/* ================================================================ 
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/scroll_menu.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== 
modified by bobthefrog to be adapted to my use 
principaly i use javascript for simulae :hovern div on ie6 */

/* set up the overall width of the menu div, the font and the margins with a relative position*/
.menu {
font-family: verdana, arial, sans-serif; width:130px; padding:0px 0 0px 0px; position:fixed;top:60px;right:205px;height:30px;z-index:200;}


* html .menu {position:absolute;right:186px;} /* for ie55*/
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul 
{padding:0; margin:0; list-style-type: none; border:0;}

/* float the list so that the items are in a line */
.menu ul li 
{float:left; position:relative; margin-right:1px;}

/* style the links to be 150px wide by 25px high. Set the background color and the font size. */
.menu ul li a, 
.menu ul li a:visited 
	{display:block; text-align:left; text-decoration:none; width:155px; height:25px; color:#aaa; background:transparent url(images/tab.gif) no-repeat; line-height:24px; font-size:10px; text-indent:10px;}
menu ul li ul li#li2 a, 
.menu ul li ul li#li2 a:visited 
	{display:block; text-align:left; text-decoration:none; width:134px; height:25px;  background:#363636;line-height:24px; font-size:10px; text-indent:10px;}


/* Get rid of any default table style */
/*table {border-collapse:collapse;margin:0; padding:0;}*//* not necessary for ie du to ie6.js */

/* make the dropdown ul invisible */
.menu ul li ul {display:none; text-align:left; position:absolute; top:25px; left:-20px; text-align:left;z-index:100; padding:0 30px 7px 20px; }

/* set the foreground color of the main menu li on hover and the border to trigger IE */
.menu ul li:hover a 
	{color:#fff; border:0;}

/* make the sub menu ul visible and position it beneath the first list item */
.menu ul li:hover ul 
	{display:block; text-align:left; position:absolute; top:25px; left:-20px; text-align:left;z-index:100; padding:0 30px 7px 20px; background:url(images/tab_bot.gif) 20px 100% no-repeat;}

/* make the sub menu ul li the full width 149 with padding and border. Add an auto scroll bar */
.menu ul li:hover ul li#li2

	{background:#363636; color:#000; width:154px; height:300px;overflow:auto; border-left:1px solid #7a7a7a;}
/* hack the widht for IE5.5 */
* html .menu ul li a:hover ul li {width:155px; w\idth:154px;}

/* style the background and foreground color of the submenu links with 129*/
.menu ul li:hover ul li a

	{float:left; display:block; background:#363636; color:#aaa; width:134px; text-align:left; text-decoration:none; border:0; text-indent:10px;}

/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover

	{text-decoration:none; color:#fff; background:#222;}
	
	/* fin menu*/

	
	/* debut menu3 menu with 2 colum */

/*-----------------------------------------------------------------------------------*/
/* debut menu 3  voir pour ie */

.menu3 {
font-family: verdana, sans-serif; width:155px; height:30px;font-size:0.85em; position:fixed;top:60px;right:180px;/*_right:187px;*/bottom:20px;z-index:500;
/* top to be just above the container right to be just above the droit1 selector of each container page */
}
* html .menu3 {position:absolute; ;}/*pour ie 5*/
.menu3 ul {
padding:0; margin:0; list-style-type: none;
}
.menu3 ul li {
	float:left; position:relative;
}
.menu3 li.last {
	border-bottom:1px solid #00f; margin:0;
}

.menu3 ul li a, .menu3 ul li a:visited {/* lig5es gauche droite sauf top1 et top2*/
	display:block; text-decoration:none; color:#000; width:155px;  height:20px; 
	line-height:20px;  font-size:11px; text-indent:10px;
} 

.menu3 ul li a.top1, .menu3 ul li a.top1:visited {/* 1er ligne gauche top1 */
	display:block; text-decoration:none; color:#aaa; width:155px;  height:25px; 
	background:transparent url(../fiche/images/tab.gif);
	line-height:24px;text-align:center;text-indent:0px;
	/* to null the indent of above def  to have a well center*/
}
.menu3 ul li a.top1:hover, .menu3 ul li a.top1:visited:hover {   /* 1er ligne gauche top1 hover */
	color:red;
}



.menu3 ul li ul {
display: none;
}

.menu3 table {
position:absolute;
margin:-1px; border-collapse:collapse;font-size:1em; left:1px;;top:-2px;width:120px;
}



.menu3 ul li:hover ul {   /*colonne gauche et droite */
display:block; position:absolute; top:24px; margin-top:1px; left:0; width:153px;height:auto; 

}
.menu3 ul li:hover ul li ul {
display: none;
}

.menu3 ul li:hover ul li a, .menu3 ul li:hover ul li a.drop { /* colonne gauche   */
background:#373737 ;color:#aaa; height:auto; line-height:8px;padding-top:7px;   padding-bottom:7px; padding-left:0px; width:153px;
border-left:1px solid #7a7a7a; border-right:1px solid #7a7a7a;


}

.menu3 ul li:hover ul li:hover a, .menu3 ul li:hover ul li:hover a.drop {   /*  colonne gauche hover     */
background:#222 ;color:#fff;padding-top:8px;  padding-bottom:8px; padding-left:0px; width:153px;font-size:11px;
}

.menu3 ul li:hover ul li:hover ul {   /* colonne droite */
display:block; position:absolute; left:154px; top:-7px; /* 1px more left for to sure to made good  hover*/
width:154px;/* for the right */
}
.menu3 ul li:hover ul li:hover ul li a, .menu3 ul li:hover ul li:hover ul li.last a {   /*  ligne droite    */
background:#363636; color:#aaa; height:auto; height:auto; padding-top:8px;  padding-bottom:8px; padding-left:0px; width:153px;
}
.menu3 ul li:hover ul li:hover ul li:hover a {  /*  ligne droite hover   */
 background:#222; color:#fff;
}
.menu3 ul li:hover ul li ul li a.top2, .menu3 ul li ul li ul li a.top2:visited,.menu3 ul li ul li.last ul li a.top2 {
	display:block; text-decoration:none;  position:relative;left:0px;padding-left:0px; width:155px;height:9px;border:0;
	background:transparent url(../fiche/images/tab.gif) no-repeat;
	line-height:15px; font-size:11px;
	color:#aaa;
}
.menu3 ul li:hover ul li:hover ul li:hover  a.top2  {
	background:transparent url(../fiche/images/tab.gif) no-repeat ;
	color:#fff;
}


li.divbot { display:block;position:relative; height:8px;left:0px;top:-1px;/*_top:-2px;*/padding-top:0px;
}
 li.divbot1 { display:block;position:relative;height:8px;left:0px;top:0px;padding-top:0px;
}

/* .menu3 ul li ul li ul li  {height:25px;line-height:25px;}*/

/* for IE5.x and IE6 browsers only */


.menu3 ul li a.top1:hover { /*1st top1 and top2 line  */
	color:red; background:black url(../fiche/images/tab.gif);line-height:25px;
}
 .menu3 ul li a.top1:hover ul{  /*1st  top2 right line  */
	display:block; position:absolute; top:25px; left:0; background:#363636; margin-top:0; marg\in-top:1px;  /*1er ligne droite */
	height:25px;/*_background:transparent;_width:150px;*/
}
 .menu3 ul li a.top1:hover ul li a { /* right column lines exept top2 */
	display:block; background:#363636; color:#aaa; height:20px; hei\ght:20px; padding:5px 10px; width:153px; w\idth:140px;
	border-left:1px solid #7a7a7a; border-right:1px solid #7a7a7a;z-index:1000;/*_width:155px; */line-height:15px;
}
 .menu3 ul li a.top1:hover ul li a.drop  { /* left line  exept top1 */
	background:#363636; color:#aaa;border-left:1px solid #7a7a7a; border-right:1px solid #7a7a7a;  
	line-height:25px;/*_line-height:15px; */ z-index:10;/*  just to have more height for the left column  */
}
.menu3 ul li a.top1:hover ul li a ul {   
	visibility:hidden; position:absolute; height:0; width:0;z-index:10;
}
.menu3 ul li a.top1:hover ul li a:hover {/* right lines hover */
	background:#222; color:#fff;
}
.menu3 ul li a:hover ul li a.drop:hover {  /* left lines */
	background:#222;z-index:10;
}
.menu3 ul li a:hover ul li a:hover ul {  
	visibility:visible; position:absolute; top:0; t\op:-1px; color:#000; left:153px;/*_left:154px;*/ z-index:1000;
}


.menu3 ul li a:hover ul li a:hover ul li  a.top2  {/* 1 ere ligne de droite  */
	display:block; text-decoration:none;  width:155px;
	background:black url(../fiche/images/tab.gif) no-repeat ;
line-height:15px; font-size:11px; 
color:#aaa;left:0px;
}

.menu3 ul li a:hover ul li a:hover ul li  a:hover.top2  {/* 1er ligne de droite hover */
color:#fff;
}


/* fin menu3 */	
	
/* gallery right modified from the cssplay :cssplay/gallery_click.html*/
/* needed for IE to make :active state work first time */
a, a:visited {color:#000;} 

/* common styling for all galleries */
a.gallery, a.gallery:visited {display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:50px; float:left; margin:4px; z-index:50;text-align:center;}

a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #fff;}

/* styling for RIGHT gallery */
#container_right {text-align:left;position:relative; width:750px; height:500px; background:#363636;  border:1px solid #a49188; margin:2em auto;}
#container_right img {border:0;}
#container_right .thumbs {width:170px; position:absolute; right:0; top:10px;z-index:50;}/* zindex to force h1 to be under */
#container_right a.gallery:focus span, #container_right a.gallery:active span 
			{display:block; position:absolute; width:550px; height:50px; top:435px; left:-570px; padding:5px; font-style:italic; color:#fff;  z-index:100;text-align:center;}
#container_right a.gallery:focus span:first-line, #container_right a.gallery:active span:first-line {font-style:normal; font-weight:bold; font-size:1.1em; color:red;}

#container_right a.gallery:active, #container_right a.gallery:focus {border:1px solid #000;}
#container_right a.gallery:active em, #container_right a.gallery:focus em { cursor:default;display:block; position:absolute; width:550px; height:460px; top:5px; left:-570px; padding:5px; color:#000; border:1px solid #3d330f; z-index:90; 
	  background:#d1c8c3; background-image:url(../fiche/images/texture-IH.gif);}
#container_right a.gallery:active em b	img, #container_right a.gallery:focus em b	img { cursor:default;margin:0 auto; border:1px solid #aaa; max-heigth:400px;}
#container_right h1 {clear:both;margin:0; padding-top:180px; padding-left:190px; width:300px; text-align:center; font-family: georgia, "times new roman", serif; font-size:3em; font-weight:normal; color:#fff;z-index:0;}
#container_right h1 em {font-size:0.6em; color:#000;}
.edge {width:0; height:100%; display:inline-block; vertical-align:middle;} /*necessary also for firefox due to position absolute*/
.bcont {text-align:center; width:100%; display:inline-block; vertical-align:middle;}/*necessary also for firefox due to position absolute*/
.bcont img {max-heigth:400px;}
.thimg {height:50px;max-width:75px;}/*force the img to be in the good size for thumb*/
.emimg {max-height:400px;}/* force the img to be max 400px hight*/
/* fin de  gallery_click  */	
	
	
/* album*/
.album {text-align:left;position:relative; width:750px; height:480px; background:#363636;  border:1px solid #a49188; margin:2em auto;}
.pad_left {width:400px; height:400px; float:left;}
.pad_left h1 {margin:0; padding-top:180px; padding-left:190px; width:300px; text-align:center; font-family: georgia, "times new roman", serif; font-size:3em; font-weight:normal; color:#fff;z-index:0;}
.pad_top {/*width:200px; height:200px; float:right;*/width:200px; height:50px; float:right;}
.holder {width:180px; height:200px; background: transparent url(graphics/grid.gif); float:right;}
.button {width:50px; height:50px; float:left;width:75px; height:50px;text-align:center;margin:4px;}
.button a {display:block;/* width:50px; height:50px; */text-decoration:none; border:1px solid #000; width:75px; height:50px; float:left; margin:4px;position:relative; z-index:200;}
.button a em {display:none;}
.button a:hover {/*position:absolute; top:0; left:400px; width:200px; height:400px;*/ z-index:20;}
.button a:hover {border:1px solid #fff;}

.button a:active, .button a:focus {position:absolute; width:0; height:0; top:0px; left:0px; z-index:0;}
.button a:active img.thimg, .button a:focus img.thimg {display:none;}
.button a:active em, .button a:focus em {
display:block; position:absolute; width:550px; height:465px; top:0px; left:0px; marging:5px; color:#000; border:1px solid #3d330f; z-index:10; background-image:url(../fiche/images/texture-IH.gif);}
.button a:active em img, .button a:focus em img { z-index:10; border:0; cursor:default;}

 .button a span {display:none;}
.button a:focus span, .button a:active span 
			{display:block; position:absolute; width:550px; height:50px; top:427px; left:0px; padding:5px; font-style:italic; color:#fff;  z-index:100;text-align:center;}
.button a:active span:first-line,.button a:focus span:first-line {font-style:normal; font-weight:bold; font-size:1.1em; color:red;}

/* fin de album */