/* Feuille de style pour la charte graphique du site

 * Cette feuille de style est appelée depuis style.css.

 */



/***************** STRUCTURE *****************/

*{

/*---toutes les marges sont à 0---*/

margin:0;

padding:0;

}

body,html{

height:100%;/*---obligatoire pour le footer---*/

/*scrollbar-base-color: #fecb31;*/

background:#9d4414;

}

body{

font-size:62.5%;

font-family:Arial, Helvetica, sans-serif;

}

#container{

position: relative;/*---obligatoire pour le footer---*/

min-height:100%; /*---obligatoire pour le footer:Firefox---*/

height:auto !important;/*---obligatoire pour le footer:Firefox---*/

height:100%;/*---obligatoire pour le footer:IE---*/

width:1003px;

margin:0 auto;

background:#fecb31;

}

/*------------------------------------Header--------------------*/

#header{

width:1003px;

height:190px;

}

/*------------------------------------Fin Header--------------------*/





/***************** Menu haut ********************/

#menu-haut{	

	width:1003px;

	height:51px;

	list-style-type:none;

	background:url(../images/charte/bg-menu.gif);



}

#menu-haut ul{

	width:1003px;

	height:51px;

	float:left;

	list-style-type:none;}



#menu-haut ul li{

	height:51px;;

	float:left;

	list-style-type:none;}



#menu-haut ul li a{

	display:block;

	height:51px;

}

#menu-haut ul li a span{

	display:none;

}



a.accueil{

	width:105px;

	background-image:url(../images/charte/accueil.jpg);

}

a.accueil:hover{

	width:105px;

	background-image:url(../images/charte/accueil-on.jpg);

}

a.lyon{

	width:183px;

	background-image:url(../images/charte/lyon.jpg);

}

a.lyon:hover{

	width:183px;

	background-image:url(../images/charte/lyon-on.jpg);

}

a.beynost{

	width:182px;

	background-image:url(../images/charte/beynost.jpg);

}

a.beynost:hover{

	width:182px;

	background-image:url(../images/charte/beynost-on.jpg);

}

a.stetienne{

	width:224px;

	background-image:url(../images/charte/stetienne.jpg);

}

a.stetienne:hover{

	width:224px;

	background-image:url(../images/charte/stetienne-on.jpg);

}

a.livre{

	width:309px;

	background-image:url(../images/charte/livre.jpg);

}

a.livre:hover{

	width:309px;

	background-image:url(../images/charte/livre-on.jpg);

}





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

#contenu{

position: relative;/*---obligatoire pour le footer---*/

min-height:450px; /*---obligatoire pour le footer:Firefox---*/

height:auto !important;/*---obligatoire pour le footer:Firefox---*/

height:450px;/*---obligatoire pour le footer:IE---*/

width:1003px;

background:url(../images/charte/bg-contenu.jpg) no-repeat scroll left top;

font-family:Arial, Helvetica, sans-serif;

padding-bottom:40px;

}



#contenu-page-interieur{

position: relative;/*---obligatoire pour le footer---*/

min-height:270px; /*---obligatoire pour le footer:Firefox---*/

height:auto !important;/*---obligatoire pour le footer:Firefox---*/

height:270px;/*---obligatoire pour le footer:IE---*/

width:1003px;

background:url(../images/charte/bg-contenu-interieur.jpg) no-repeat scroll left top !important;

font-family:Arial, Helvetica, sans-serif;

padding-bottom:40px;

}

/*------------------------collLeft---*/







/***********************menu left*/



#menuLeft {

	width: 170px;

	padding:45px 0px 0 65px;

  float:left;

}



#menuLeft dt {

	text-align:left;

	cursor: pointer;

	line-height:18px;

}

#menuLeft dt a:link,#menuLeft dt a:visited{

	text-decoration: none;

	font:bold 13px Arial, Helvetica, sans-serif;

	color: #fecb31;

	padding-left:16px;

}

#menuLeft dt a:hover{

	text-decoration: none;

	color:#fff;

}



dt.pucebleu{

	background:url(../images/charte/star-menu.gif) no-repeat left 4px;

}

dt.pucerouge{

	background:url(../images/charte/star-menu.gif) no-repeat left 4px;

}

dt.pucejaune{

	background:url(../images/charte/star-menu.gif) no-repeat left 4px;

}

dt.puceverte{

	background:url(../images/charte/star-menu.gif) no-repeat left 4px;

}









/***********************contenu*/

#collright{

	float:right;

	width:175px;

	min-height:140px;

	height:auto !important;

	height:140px;



}

#colLeft{

  float:right;

  width:600px;

  /*min-height:480px;

	height:auto !important;

	height:480px;*/



}

#texte #colLeft{

  float:left;

  width:700px;

/*  min-height:480px;

	height:auto !important;

	height:480px;*/

  padding-left:30px;

}

#newsletter{

float:right;

width:175px;

height:140px;

background:url(../images/charte/newsletter.jpg);

}

#newsletter form{

padding:75px 0 5px 20px;

}

#newsletter input.case{

width:120px;

height:15px;

background:#fff;

border:1px solid #fecb31;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:0.9em;

text-align:left;

color: #000;

display:inline;

vertical-align:middle;



}

#newsletter a.search, #newsletter a.search:visited{

	font-size:10px;

	font-weight:normal;

	text-decoration:none;

	color:#8ec884;

	padding:0px 0 0 20px;

}

#newsletter a.search:hover, #newsletter a.search:active{

	font-weight:normal;

	text-decoration:underline;

	color: #fff;

}

#video a{

	float:right;

	width:175px;

	height:90px;

	display:block;

	background-image:url(../images/charte/bt-video.jpg);

}

#video a:hover{

	float:right;

	width:175px;

	height:90px;

	display:block;

	background-image:url(../images/charte/bt-video-on.jpg);

}

#actualites{

  width:115px;

  padding:235px 5px 0 35px;

  float:left;

}



#texteaccueil{

float:left;

width:977px;

/*padding:0 26px 0 186px; */

padding:0 26px 0 0px;

font-size:12px;

height:auto;

}



#texte{

float:left;

width:1003px;

font-size:12px;



}



/*---obligatoire pour le footer---*/

/*---mettre <div class="clearer"></div> apres la div contenu---*/

.clearer

{

	clear: both;

	display: block;

	height: 1px;

	margin-bottom: -1px;

	font-size: 1px;

	line-height: 1px;

}



.spacer{

  background: url(../images/charte/spacer.jpg) left top  repeat-x;

  width:100%;

  height: 3px;

  margin-bottom:10px;

}

.spacer2{

  background: url(../images/charte/spacer2.jpg) left top repeat-x;

  width:100%;

  height: 9px;



}

/***************** FOOTER *****************/

#footer{

	position:relative;

	width:1003px;

	height:40px;

	margin:0 auto 0 auto;

	clear:both;

	background:url(../images/charte/bg-footer.jpg) no-repeat top right;

	

}



#idep{

position:absolute;

left:10px;

top:10px;

width:195px;

height:30px;

}

#idep img{

float:left;

border:0;

}

#footer #idep a.idep{

text-decoration:none;

display:block;

font:9px/9px Arial, Helvetica, sans-serif;

color:#fecb31;

margin:0px 0 0;

}

#footer #idep a.idep.optea{

margin:0;

}

#footer #idep a:hover.idep{

text-decoration:none;

color:#fff;

}





#liens{

	float:right;

	height:20px;

	width:180px;

	padding:10px 10px 0 0;

	color:#ee9fcc;

	font-size:11px;

}

#liens a:link,#liens a:visited{

	padding:8px 5px 0 5px;

	color:#fff;

	text-decoration:none;

}

#liens a:hover{

	padding:8px 5px 0 5px;

	color:#fecb31;

	text-decoration:underline;

}

.invisible {

  display: none;

}