/* ========================================================
 	                   Road2Mayotte - Galeries                        	                 
======================================================== */


/* #~#~#~#~#~ Road2Mayotte Style - version 1 ~#~#~#~#~# */

/* par  
 
                C h r i s t o p h e   G a l l a i r e
                        
                         zamasp@gmail.com 
                   
                   http://www.road2mayotte.org
 
    
/* #~#~#~#~#~#~#~#~#~#~#~#~#~#~#~#~#~#~#~#~#~#~#~#~#~#~# */



body {position: relative; background: black; margin: 0; padding: 0; font-size: 100%;}
	
/* Taille de texte "globale" proportionnelle à la taille du texte par défaut du navigateur.
 Avec ce "font-size: 100%" sur l'élément body (ou html), on applique un correctif pour IE */

/* Menu latéral gauche */

div#links {
   position: absolute; 
   top: 81px; 
   left: 0; 
   width: 166px;
   height: 700px; 
   font: 16px Verdana, sans-serif; 
   z-index: 100;
}

div#links a {display: block; text-align: center; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #FFC; background: #444;
   border-right: 5px solid #505050;}
div#links a:hover {color: #411; background: #AAA;
   border-right: 5px double white;}

div#links a span {display: none;}
div#links a:hover span {display: block;
   position: absolute; top: 180px; left: 0; width: 125px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #AAA; background: black;
   font: 10px Verdana, sans-serif; text-align: center;}

/* Contenu */

div#content {position: absolute; top: 26px; left: 161px; right: 25px;
   color: #BAA; 
   background: #22232F; 
   font: 13px Verdana, sans-serif; 
   padding: 10px 10px 0px 10px; 
   border: solid 5px #444;}
   
div#content p {margin: 0 1em 1em;}

div#content h3 {
   margin-bottom: 0.5em;
   font-size: 130%;
   font-style: italic; 
   font-weight: normal; 
   text-transform: lowercase;
   letter-spacing: 0.2em;  
}

h1 {
   margin: -9px -9px 0.5em; 
   padding: 15px 0 5px; 
   text-align: right; 
   background: #333; 
   color: #667; 
   letter-spacing: 0.5em; 
   text-transform: lowercase; 
   font: bold 25px sans-serif; 
   height: 28px; 
   vertical-align: middle; 
   white-space: nowrap;
}

dt {font-weight: bold;}
dd {margin-bottom: 0.66em; text-align: justify; text-indent: 15px;}
div#content a:link {text-decoration: none; border-bottom: 1px dotted white; color: white;}
div#content a:visited {text-decoration: none; border-bottom: 1px dotted #BBC; color: #BBC;}
div#content a:link:hover {text-decoration: none; border-bottom: 1px dotted #FF0; color: #FF0;}
div#content a:visited:hover {text-decoration: none; border-bottom: 1px dotted #CC0; color: #CC0;}
code, pre {color: #EDC; font: 110% monospace;}

div#punch {float: left; font-size: 110%; width: 8em;
   text-align: center; padding: 0.2em;
   background: #333; color: #FFC; margin: 0 0.5em 0.2em 0;}

p {text-indent: 20px; text-align: justify;}

/* galerie */

/* needed for IE to make :active state work first time 
a, a:visited {color:#000;} */


/* Style commun à toutes les galeries */
a.gallery, a.gallery:visited {display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; float:left; margin:4px; z-index:50;}
a.slidea {background:url(./photos/galerie_1/adele_ballon.png);}
a.slideb {background:url(./photos/galerie_1/adele_le_nez_qui_coule.png);}
a.slidec {background:url(./photos/galerie_1/dada.png);}
a.slided {background:url(./photos/galerie_1/adele_papa_vue_haut.png);}
a.slidee {background:url(./photos/galerie_1/adele_et_papa.png);}
a.slidef {background:url(./photos/galerie_1/adele_toboggan_bas_main.png);}
a.slideg {background:url(./photos/galerie_1/sara_adele.png);}
a.slideh {background:url(./photos/galerie_1/adele_glisse.png);}
a.slidei {background:url(./photos/galerie_1/adele_glisse.png);}
a.slidej {background:url(./photos/galerie_1/adele_toboggan_bas.png);}
a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #fff;}


/* Style pour la galerie "top" */
#container_top {
   position:relative; 
   width:525px; 
   height:525px; 
   background:#d1c8c3; 
   border:1px solid #a49188; 
   margin:1em auto;
}
#container_top img {border:0;}
#container_top .thumbs {
   position:absolute; 
   left:0; 
   top:0;
}

#container_top a.gallery:hover span {
   display:block; 
   position:absolute;  
   width:402px; 
   height:50px; 
   top:110px; 
   left:5px; 
   padding:5px; 
   font-style:italic; 
   color:#fff;  
   z-index:100;
}
#container_top a.gallery:hover span:first-line {
   font-style:normal; 
   font-weight:bold; 
   font-size:1.1em; 
   color:#000;
   background: #333;  
}
#container_top a.gallery:active, #container_top a.gallery:focus {border:1px solid #000;}

#container_top a.gallery:active em, #container_top a.gallery:focus em {
   display:block; 
   position:absolute; 
   width:402px; 
   height:250px; 
   top:160px; left:5px; padding:5px; color:#000; border:1px solid #3d330f; z-index:50;}
#container_top h1 {clear:both; margin:0; padding-top:200px; text-align:center; font-family: georgia, "times new roman", serif; font-size:3em; font-weight:normal; color:#fff;}
#container_top h1 em {font-size:0.6em; color:#000;}

/* Style pour la galerie "gauche" */
#container_left {
   position:relative; 
   width:750px; 
   height:405px; 
   background:#333; 
   border:1px solid #667; 
   margin:1em auto;
}
#container_left img {border:0;}

#container_left .thumbs {
   width:170px; 
   position:absolute; 
   left:0; 
   top:0;
}

#container_left a.gallery:hover span {
   display:block; 
   position:absolute; 
   width:602px; 
   height:50px; 
   top:365px; 
   left:200px; 
   padding:5px; 
   font-style:italic; 
   color: white; 
   z-index:100;
}
#container_left a.gallery:hover span:first-line {
   font-style:normal; 
   font-weight:bold; 
   font-size:1.1em; 
   color:#667;
}
#container_left a.gallery:active, #container_left a.gallery:focus {border:1px solid #000;}

#container_left a.gallery:active em, #container_left a.gallery:focus em {
   display:block; 
   position:absolute; 
   width:502px; 
   height:328px; 
   top:30px; 
   left:200px; 
   padding:5px; 
   color:#000; 
   border:0px solid #667; 
   z-index:50;
}

/* Bloc texte centre galerie */
#container_left h1 {
   clear:both; 
   margin:0; 
   padding-top: 100px; 
   padding-left:250px; 
   width:475px; 
   text-align: center; 
   font-family: georgia, "times new roman", serif; 
   font-size:3em; 
   font-weight:normal; 
   color: #667;
}
#container_left h1 em {
font-size:0.6em; 
color:#000;}


#footer {
   margin: -9px -9px 0px; 
   padding: 30px 0 5px; 
   text-align: right; 
   color: #667; 
   letter-spacing: 0.2em; 
   text-transform: lowercase; 
   font: bold 0.8em georgia, "times new roman", serif;
   height: auto; 
   vertical-align: middle; 
   white-space: nowrap;
}

/* Galerie multipage */

/* set up the overall width of the menu div and the margins */

.menu2 {

font-family: verdana, arial, sans-serif; 

width:673px;

height:31px;

background:#22232F;

padding:0;

margin:0 auto; 

position:relative;

z-index:1;

border-bottom:20px solid #333;

margin-bottom:650px;

}

/* position the instructions using a dl */

.menu2 dl {

font-family:verdana, arial, sans-serif;

font-size:0.9em;

position:absolute;

width:270px;

top:160px;

left:50px;

}

.menu2 dl dt {font-size:1.2em; margin-bottom:2em; font-weight:bold;}

.menu2 dl dd { padding:0; margin:0; line-height:1.7em; margin-bottom:2em;}

.menu2 dl dd:first-letter {font-weight:bold;}



/* remove the bullets and set the margin and padding to zero for the unordered list */

.menu2 ul {

padding:0; 

margin:0;

list-style-type: none;

border:0;

}

/* float the list so that the items are in a line */

.menu2 ul li {

display:block;

float:left;

width:51px;

height:31px;

}

/* style the links to be 50px wide by 31px high with a right border 1px solid white. Set the background color and the font size. */

.menu2 ul li a, .menu2 ul li a:visited {

display:block; 

float:left;

text-align:center; 
 
outline:none; 

width:50px; 

height:31px; 

color:#ddd;

border-right:1px solid #fff;

background:#333; 

line-height:30px; 

font-size:11px;

}



/* clear the float at the end of each line of four slides */

span.clr {display:block; clear:both; width:0; height:0; font-size:0; line-height:0;}



/* make the dropdown ul invisible */

.menu2 ul li ul {

display: none;

}



/* remove the table styling */

table {

border-collapse:collapse;

margin:0; 

padding:0;

}





/* specific to non IE browsers */

/* set the background and foreground color of the main menu li link on hover */

.menu2 ul li:hover a{

color:#fff; 

background:#000;

cursor:default;

}



/* make the sub menu ul visible and position it beneath the first list item */

.menu2 ul li:hover ul {
text-align:left;
display:block; 
position:absolute; 
top:31px; 
left:0;
}



/* make the sub menu ul li the full width with padding and border. */

.menu2 ul li:hover ul li {

cursor:pointer;

width:483px;

height:483px;

border:20px solid #000;

border-width:20px 5px;

background:black; /* image grand format */

color:#fff;

padding:82px 90px;

cursor:default;

outline:none; 

}



/* style the background and foreground color of the submenu links */

.menu2 ul li:hover ul li a {

background:#333;

width:118px;

height:118px;

border:1px solid #ddd;

border-color:#888 #888 #000 #888;

outline:none; 

}





/* keep the large image hidden */

.menu2 ul li:hover ul li a em {

display:none;

text-decoration: none; 

}

/* add a border to the horizontal slide and position it centrally using a top margin */

.menu2 ul li:hover ul li a.horiz span img {

border:1px solid #888;

margin-top:21px;

text-decoration: none; 

}

/* add a border to the vertical slide and position it centrally using a top margin */

.menu2 ul li:hover ul li a.vert span img {

border:1px solid #888;
margin-top:9px;
}



.menu2 ul li:hover ul li a:hover {

background:#000;
}





/* make the active links zero size so the active dotted border does not show through the large image */

.menu2 ul li:hover ul li a:active, .menu2 ul li:hover ul li a:focus {background:#aaa; height:0; width:0; border:0;}

.menu2 ul li:hover ul li a:active em, .menu2 ul li:hover ul li a:focus em {background:#bbb; height:0; width:0; padding:0; margin:0; border:0; }





/* make the large image visible and set the border, position them using position absolute centrally over the slides */

/* horizontal large image styling */

.menu2 ul li:hover ul li a.horiz:active em, .menu2 ul li:hover ul li a.horiz:focus em {display:block; background:black; position:absolute; left:15px; top:100px; width:645px; height:485px; z-index:200; z-index:500; cursor:default; border:0px solid #fff; }

.menu2 ul li:hover ul li a.horiz:active em img, .menu2 ul li:hover ul li a.horiz:focus em img {border:1px solid #fff;}

/* vertical large image styling */

.menu2 ul li:hover ul li a.vert:active em, .menu2 ul li:hover ul li a.vert:focus em {display:block; background:black; position:absolute; left:95px; top:23px; width:480px; height:640px; z-index:200; z-index:500; cursor:default;  border:0px solid #fff;}

.menu2 ul li:hover ul li a.vert:active em img, .menu2 ul li:hover ul li a.vert:focus em img {border:1px solid #fff;}