/*
 *  EZWebGallery:
 *  Copyright (C) 2011 The EZWebGallery Dev Team <dev@ezwebgallery.org>
 *
 *  This program is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

html {font-size: 100%;
	 height: 100%;
	 overflow:hidden;} /* Important pour ie6 */

body {
  padding:0px;
  border:0px;
  margin:0px;
  height:100%;  /* Indispensable pour que les div puissent avoir height=100% */
  						  /* voir : http://www.alsacreations.com/actu/lire/92-vous-avez-dit-height100.html */
  overflow:hidden; /* Important pour ie6 */
  text-align:center;
  font-size:1em;
}

/* Liens --> Normalement surchargé mais utile si lien placé sur page principale */
/* On l'air de ne pas êtres surchargés sous IE6 */
a:link {color: black;}
a:visited {color: black;}
a:active {color: black;}


/* All optional items hidden by default */
.display_optional {
    display:none;
}


/* **** Progress bar. voir http://digitalbush.com/projects/progress-bar-plugin/ **** */

/* boite de chargement */
#progressbarWrapper{
    display: block;
	font-size:	1em;
    font-weight: bold;
    margin: auto;
    padding: 10px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 40%;
}

/* progress bar container */
#progressbar{
    width:100%;
    min-height:36px;
    position:relative;
    display:block;
    border:solid;
    font-size:	1em;
}
/* color bar */
#progressbar div.progress{
    position:absolute;
    width:0;
    left:0;
    height:100%;
    text-align:left;
    overflow:hidden;
}
/* text on bar */
#progressbar div.progress .text{
    position:absolute;
    text-align:center;
}
/* text off bar */
#progressbar div.text{
    position:absolute;
    width:100%;
    height:100%;
    text-align:center;
}


/********************************************************************/
/* Zone s'affichant à coté de flottants dans un design 2/3 colonnes */
/********************************************************************/
/* ATTENTION : NE PAS LUI DEFINIR DE MARGE LATERALE */
/* Bug possible concernant "overflow" sous ie6. voir pour correctif :  */
/* http://www.alsacreations.com/tuto/lire/588-design-trois-colonnes-positionnement-flottant.html */
/* Dans un design 3 colonnes, les float gauche et droites doivent être
 * placés dans le html AVANT la zone centrale.
/**********************************************************************/
.centralZone{
	height:100%;
    overflow: auto;
    text-align:center;
}
/* Zone à gauche */
.leftZone{
    position:absolute;
    background-image:url("../../resources/images/Shadow.png");
    text-align:center;
    left:0;
    top:0;
    z-index:100;
	height:100%;
    width:12%;
}
/* Zone à droite */
.rightZone{
	position:absolute;
    background-image:url("../../resources/images/Shadow.png");
    text-align:center;
    right:0;
    top:0;
    z-index:100;
	height:100%;
    width:12%;
}


/************************************************/

.fullScreen{
	 	position: absolute;
		padding:0px;
		margin:0px;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
        overflow: hidden;
}



/*********** TOOLBAR ****************/
/* lanscape (default) & common */
.toolbar {
    position:relative; /* Required for the z-index to work */
    z-index:150; /* Has to be above the navigation arrows */
    float:left;
    width:4%;
    min-width:50px;
    height:100%;
    text-align:left;
    border-color:black;
    border: 0px 3px 0px 0px;
}

.toolbar li {
  display: inline-block;
  margin : 0.5em 0 0 0;
  width: 100%;
  height: auto;
}

.toolbar li img {
  min-width:50px;
  width: 100%;
  height: auto;
  display:block;
  cursor:pointer;
}

.button_ezwebgallery{
    position: absolute;
    bottom: 0;
}

/* All Smartphones landscape */
/* http://code-tricks.com/css-media-queries-for-common-devices/ */
@media only screen
and (max-device-width : 960px)
and (orientation: landscape){
    .toolbar {
        width:7%;
    }
}

/* portrait */
@media only screen
and (orientation: portrait) {
    .toolbar {
        float:none;
        width:100%;
        height:4%;
        min-height:50px;
        border: 0px 0px 3px 0px;
    }

    .toolbar li {
      display: inline-block;
      margin : 0 0 0 0.5em;
      width: auto;
      height: 100%;
    }

    .toolbar li img {
      min-height:50px;
      height: 100%;
      width: auto;
    }

    .button_ezwebgallery{
        position: absolute;
        right: 0;
    }
}

/* All Smartphones portrait */
@media only screen
and (max-device-width : 960px)
and (orientation: portrait){
    .toolbar {
        height:7%;
    }
}


/********************************************/


#screenMap {
    display: none;
}


#DEBUG{
    position: relative;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: black;
    color: red;
    width: 100%;
    display: none;
}