body {font-size: 1em; font-family: "comic sans ms", verdana, arial, sans-serif; 
	text-align:center;		/* centers the layout in IE */
	behavior:url(css/csshover.htc);}
* {margin:0; padding:0;}
p {font-size:.75em;}			
div#mainwrap {min-width:780px; /* max-width:1140px;	 sets the max and min widths */
	margin-left:auto; margin-right:auto;	/* centers the layout in SCBs */
	text-align:left; /* stops elements inheriting the body's text-center */
	border-top:2px solid blue; border-left:2px solid blue; border-right:1px solid blue; border-bottom:1px solid blue;}
div#header {height:40px; background-color:blue; text-align:center; padding-bottom:10px; padding-top:0px}	/* temporary placeholder styles for header */
div#header img {float:left; margin-left:2px; padding-top:10px; }
div#header h1 {padding-bottom:10px; margin-right:auto; margin-left:auto; 
	font-size:1.2em; color:#FAF; }
div#header h1 strong {font-size:1.7em; }
div#contentarea {background-color:#FFF;	/* ensures bg is white if faux graphic doesn't load */
	background:url(Images_decoration/faux_left.gif) repeat-y top left;	/* faux columns graphic left column */
	position:relative;} /* set positioning context  for left sidebar div */
div#contentarea2 {background-color:#FFF;	/* ensures bg is white if faux graphic doesn't load */
	background:url(Images_decoration/faux_right.gif) repeat-y top right; /* faux columns graphic right column */
	position:relative;}		/* set positioning context  for right sidebar div */
div#column1 {width:170px;		/* left col width */
	position: absolute;		/* contextual positioning in contentarea container */
	top:0px; left:0px;		/* positions col within contentarea container */
	background-color:white;		/* left col bg color - (change color to see divs is position : ) */
	overflow:hidden;}		/* prevents overlarge elements breaking out of column */
div#column2 {background-color:#FFF; margin:3px 3px 0 171px;}	/* left and right margins to make room for sidebars */

/* Details for screen and printing settings */
div#column1 p {margin: 0px 2px 0 6px; padding: 2px 6px 2px 2px}
div#column2 p {font-size:1em; margin:0 10px 10px ;}
div#column2 p em {color: red; font-weight:bold; }
div#column2 p#index {color: navy; margin: 0 0 0 10px; padding: 0 }
div#column2 p#reference {color: red; margin: 0 0 0 10px; font-weight:500; padding: 0; }
div#column2 p#cache {color: white; font-size:0em; }
div#column2 img {padding: 2px 0 0 0; display: block;}
div#column2 img#left {float:left; padding-top:2px; }
div#column2 img#center {margin: 2px 0 0 200px; }
div#column2 img#accueil {margin: 2px 0 0 300px; width:441px; height:588px; }
div#column2 ul {color: green; list-style-type: disc; }
div#column2 li {position:relative; margin: 0 2px 0px 35px; }
div#column2 li p, ul, li {color: black; }
div#column2 p#robot {color:blue; text-align:center; text-decoration: underline; font-size: 1.2em; }
div#column2 h1 {color:navy; font-variant:small-caps; text-align:center; text-decoration: underline; font-size: 1.2em; margin-bottom:8px; }
div#column2 h2 {text-align:left; margin:0 10px 10px; font-size: 1.1em; }
div#column2 h2#EN {font-style:italic; color:gray }
div#column2 p#EN {font-style:italic; color:gray }
div#column2 ul#EN {color:#669933; font-style:italic; list-style-type: disc; }
div#footer {background-color:#FAF; text-align:center; padding-top:2px; padding-bottom:6px; }/* footer styles */
div#footer h3 {font-size:1.2em; color:blue; padding-top:0px; }
div#footer p {font-size:.6em; color:blue; padding-top:0px; }
a {text-decoration:none}
a#line {text-decoration:underline}
a:hover {color: #FAF; background-color:blue}

/* setup for the table */
#mytable {
	padding: 0;
	margin: 10px;}

caption {font: italic 0.7em "comic sans ms", verdana, arial, sans-serif;
	text-align: center;}

th {	font: bold 0.9em "comic sans ms", verdana, arial, sans-serif;
	color: #6D929B;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-top: 1px solid #C1DAD7;
	letter-spacing: 2px;
	text-align: center;
	padding: 6px 6px 6px 12px;
	background: #CAE8EA;}

th.nobg {border-top: 0;
	border-left: 0;
	border-right: 1px solid #C1DAD7;
	background: none;}

th.spec {border-left: 1px solid #C1DAD7;
	border-top: 0;
	text-align: left;
	letter-spacing: 1px;
	font: 0.8em "comic sans ms", verdana, arial, sans-serif;}

th.specalt {border-left: 1px solid #C1DAD7;
	border-top: 0;
	font: 0.8em "comic sans ms", verdana, arial, sans-serif;
	color: #B4AA9D;}

td {	border: 1px solid #C1DAD7;
	font-size:0.9em;
	background: #fff;
	padding: 6px 6px 6px 6px;
	text-align:center;
	color: #6D929B;}

td	img#annees {padding: 2px 2px 2px 2px;
	width:60px; 
	height:80px;
	border:0;}
	

td.alt {background: #F5FAFA;
	color: #B4AA9D;}
td.img {margin: 3px; border: 2px red solid; height: 160px; width: 252px; float: left; padding: 2px 4px 1px 2px; overflow:hidden; }
td.img img {float: left; width:150px; height:100px; }
td.img img:hover {float: left; width:249px; height:166px; }
td.img a:hover img {border: 1px solid #0000ff;  }

/* Setup for pop-up images
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
/*http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
height: 320px; width: 240px;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
height: 320px; width: 240px;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
height: 320px; width: 240px;
left: 60px; /*position where enlarged image should offset horizontally */
}

/* Move the image to the left for the text that is on the right of the screens */
.thumbnail2 {
position: relative;
z-index: 0;
}

.thumbnail2:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail2 span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
right: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
height: 320px; width: 240px;
text-decoration: none;
}

.thumbnail2 span img{ /*CSS for enlarged image*/
border-width: 0;
height: 320px; width: 240px;
padding: 2px;
}

.thumbnail2:hover span{ /*CSS for enlarged image on hover*/
position:absolute;
visibility: visible;
top: 0;
height: 320px; width: 240px;
right: 100px; /*position where enlarged image should offset horizontally */
}

</style>




/* setup for the catalog images */
div.img-i-h {margin: 3px; border: 2px red solid; height: 160px; width: 252px; float: left; padding: 2px 4px 1px 2px; overflow:hidden; }
div.img-i-h img {float: left; width:150px; height:100px; }
div.img-i-h img:hover {float: left; width:249px; height:166px; }
div.img-i-h a:hover img {border: 1px solid #0000ff;  }
div.img-i-v {margin: 3px; border: 2px red solid; height: 160px; width: 252px; float: left; padding: 2px 4px 1px 2px; overflow:hidden; }
div.img-i-v img {float: left; width:100px; height:150px; }
div.img-i-v img:hover {float: left; width:166px; height:249px; }
div.img-i-v a:hover img {border: 1px solid #0000ff; }
div.img-p-h {margin: 3px; border: 2px blue solid; height: 160px; width: 252px; float: left; padding: 2px 4px 1px 2px; overflow:hidden; }
div.img-p-h img {float: left; width:150px; height:100px; }
div.img-p-h img:hover {float: left; width:249px; height:166px; }
div.img-p-h a:hover img {border: 1px solid #0000ff; }
div.img-p-v {margin: 3px; border: 2px blue solid; height: 160px; width: 252px; float: left; padding:2 px 4px 1px 2px; overflow:hidden; }
div.img-p-v img {float: left; width:100px; height:150px; }
div.img-p-v img:hover {float: left; width:166px; height:249px; }
div.img-p-v a:hover img {border: 1px solid #0000ff; }
div.desc {text-align: left; font-weight: normal; width: 250px; margin: 1px; }
 
/* the vertical menu starts here */
div#listmenu {border:1px solid #000; width:100%; font-size:.8em; background-color:#CCF; margin-top:5px; margin-left:5px}
div#listmenu ul {border:0; margin:2px 2px 2px 0px; padding: 0 0 10px 0; list-style-type:none}
div#listmenu li {position:relative; list-style-type:none; background-color:#FFA; border-right:1px solid #069; border-bottom:2px solid#069; padding:.3em; text-indent:.5em}
div#listmenu li:first-child {border-top:2px solid #069}
html div#listmenu ul {border-top:2px solid #069}

/* END OF LIST-BASED MENU */

/* here the "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
	content: ".";		/* the period is placed on the page as the last thing before the div closes */
	display: block;		/* inline elements don't respond to the clear property */ 
	height: 0;			/* ensure the period is not visible */
	clear: both;		/* make the container clear the period */
	visibility: hidden;	/* further ensures the period is not visible */
	}

.clearfix {display: inline-block;}	/* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */