/*######################### CONTENU #########################*/

html, body {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	font: 11px/1.5 verdana, arial, helvetica, sans-serif;
	font-weight:normal;
	color:#FFFFFF;
	background-color:#41494C;
}
#container {
	position: relative;
	min-height:100%;
	width: 100%;
	margin: 0 auto;
	background-color:#383D41;
}
* html #container
{
	height: 100%;
}

/*######################### HAUT DE PAGE #########################*/

#header {	
	height: 60px;
	width:100%;
	background-color: #2A3437;
	margin:0;
	padding-bottom:3px;	
}
#header #logo {	
	float:left;
	margin-left:8px;
	padding-top: 21px;
}
#header #entete {
	float:right;
	margin-right:5px;
	color:#9da1a3;
	font-size:90%;
}
#entete a {
	font-weight:normal;
	color:#9da1a3;
}
#bandeau {
	height: 20px;
	text-align: left;
	color:#2A3437;
	vertical-align:middle;	
}
#contenu_bandeau {
	font-weight: normal;
}
#bandeau a:link{
color: #FFFFFF;
text-decoration:none;
}
#bandeau a:visited{
color: #FFFFFF;
text-decoration:none;
}
#bandeau a:hover{
text-decoration: underline;
}
#bandeau a:active{
color: #41494C;
text-decoration:none;
}
/*######################### GAUCHE #########################*/
#bloc_1c {
	height: 280px;
	width: 240px;
	float: left;
	padding-left:15px;
	background-color:#41494C;
}
#bloc_2c {
	height: 100%;
	width: 95%;
	float: center;
	padding-left:15px;
	background-image: url(/media/images/contenu/bloc_2.jpg);	
}
#bloc3g {
	height: 120px;
	width: 110px;
	position: absolute;
	top: 410px;
	/*	float:left;*/
	background-color:#41494C;
	text-align:left;
	left: 30px;
}
#bloc4g {
	height: 510px;
	width:190px;
	padding-left: 10px;
	float:left;
	background-color:#41494C;
	border-top: 20px solid #2A3437;
	padding-top:0px;
}
/*######################### CENTRE DE PAGE #########################*/

#bloc_centre {	
	width:100%;
	text-align:left;
	margin: 0 0 0 0;
	float:right;
}
#table_photo {
	width:200px;
	height:200px;
	border:solid #292e30 1px;
	background-color:white;
	position:absolute;
	top:440px;
	float:left;
}
#paragraphe {
	width:630px;
	margin-left:200px;
	padding-top:0px;
}
hr {
height:0;
border:0;
border-bottom:1px dotted;
color: #9DA1A3;
}

hr2 {
height:0;
border:0;
border-bottom:1px dotted;
color: #FF0066;
}
/*######################### LIEN SURVOL #########################*/
a.viewpic {
  position:relative;
  border-bottom:1px dashed #808080; 
  text-decoration: none; 
}
a:hover.viewpic {
  text-decoration: none; 
  background: none;
}
a.viewpic span {display: none;}

a:hover.viewpic span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 152px; 
  z-index: 20; 
  width:100%; 
  padding:2px 4px;
}
/*######################### LISTE DANS TABLEAU HOME PAGE #########################*/
.home_liste li{
list-style-image: url(/media/images/contenu/puce3_383D41.jpg);
color: white;
}
.home_liste a {
color:white;
}
.home_liste a:visited {
color: white;
}
.home_liste a:hover {
color: #9DA1A3;
text-decoration:underline;
}
.home_liste a:active {
color: white;
}
.home_liste ul{
color: white;
margin:0;
padding:0 0 0 15px;
}

/*######################### MENU-DROITE #########################*/

#droite {
	float:right;
	width: 190px;
	height:280px;
	margin-right:10px;
	margin-top:50px;
	background-color:#2a2f32;
	border:solid #292e30 3px;
	z-index:2;
}
#menu_droite{
	margin-top:20px;
	margin-bottom:20px;
	padding-left:20px;
	margin-left:8px;
}
#menu_droite #principal li{
list-style-image:url(../images/contenu/puce_2A2F32.gif);
color: #9da1a3;
}
#menu_droite #principal a{
color: #9da1a3;
font-weight:bold;
}
#menu_droite #principal a:link{
text-decoration:none;
}
#menu_droite #principal a:visited{
text-decoration:none;
}
#menu_droite #principal a:hover{
text-decoration:underline;
}
#menu_droite #principal a:active{
text-decoration:none;
}
#menu_droite #smenu li{
list-style-type:none;
color: #767b7e;
font-weight:bold;
}
#menu_droite #smenu a{
color: #767b7e;
font-weight:bold;
}
#menu_droite #smenu a:link{
text-decoration:none;
}
#menu_droite #smenu a:visited{
text-decoration:none;
}
#menu_droite #smenu a:hover{
text-decoration:underline;
}
#menu_droite #smenu a:active{
text-decoration:none;
}
#menu_droite #smenu #ssmenu li{
list-style-type:none;
color: #FFFFFF;
font-weight:normal;
}
#menu_droite #smenu #ssmenu a{
color: #FFFFFF;
}
#menu_droite #smenu #ssmenu a:link{
text-decoration:none;
}
#menu_droite #smenu #ssmenu a:visited{
text-decoration:none;
}
#menu_droite #smenu #ssmenu a:hover{
text-decoration:underline;
}
#menu_droite #smenu #ssmenu a:active{
text-decoration:none;
}
/*######################### CONTENU #########################*/
a:link {
text-decoration:none;
color:#ff6600;
/*font-weight:bold;*/
}
a:visited {
text-decoration: none;
color:#ff6600;
font-weight: normal;
}
a:hover {
text-decoration: underline;
color:#9DA1A3;
font-weight: normal;
}
#content {
	margin-right:220px;
	padding:0;
}
#contenu {
	margin:0;
	text-align:left;
	color:#FFFFFF;
	padding: 0;
	margin-left:30px;
}
#colonne_g {
	width:80px;
	height:200px;
	float: right;
	margin-right:98px;
	margin-top:2px;
	background-color: #41494C;
}
#contenu #colonne_g {	
}
#contenu #colonne_g #entete{
	width:160px;
	background-color: #FFFFFF;
	height:50px;
	padding-top:10px;
}
#contenu #colonne_g #entete h3{
	color:black;
	text-align:left;	
}
#contenu #colonne_g ul{
	margin-left:0px;
}
#contenu #colonne_g li{
	list-style-type:none;
	border-bottom:1px solid white;
	margin-bottom:15px;
	padding-bottom:15px;
	width:130px;	
}
#contenu #colonne_d {
	padding-top:0px;
	padding-left:190px;
	margin-left:30px;
	padding-bottom:30px;
	font-weight:normal;
	z-index:50;
}
/*######################### ROLL-OVER SUR IMAGES #########################*/
#contenu img {
margin-right:10px;
margin-bottom:10px;
}
a.image{
display:block;
width: 105px;
height: 105px;
background: url(../images/home/Channe1.jpg) no-repeat;
}
a.image:hover {
background-image:url(../images/home/channe2.jpg);
}
a.image span {
display:none;
}
a.image2{
display:block;
width: 105px;
height: 105px;
background:url(../images/home/clavier.jpg) no-repeat;
}
a.image2:hover {
background-image:url(../images/info/pc.jpg);
}
a.image2 span {
display:none;
}
a.image3{
display:block;
width: 105px;
height: 105px;
background:url(../images/home/galerie_nb.jpg) no-repeat;
}
a.image3:hover {
background-image:url(../images/home/cours_info.jpg);
}
a.image3 span {
display:none;
}
a.image4 {
display:block;
width: 105px;
height: 105px;
background:url(../images/photo/mics3_nb.jpg) no-repeat;
}
a.image4:hover {
background-image:url(../images/technique/grandes/expo.jpg);
}
a.image4 span {
display:none;
}
a.image5 {
display:block;
width: 280px;
height: 210px;
background: url(../images/cours/paris2.jpg) no-repeat;
}
a.image5:hover {
background-image: url(../images/cours/paris1.jpg);
}
a.image5 span {
display:none;
}
a.image6 {
display:block;
width: 150px;
height: 200px;
background: url(../images/cours/jael2.jpg) no-repeat;
}
a.image6:hover {
background-image: url(../images/cours/jael1.jpg);
}
a.image6 span {
display:none;
}
a.image7 {
display:block;
width: 150px;
height: 200px;
background: url(../images/cours/seine2.jpg) no-repeat;
}
a.image7:hover {
background-image: url(../images/cours/seine1.jpg);
}
a.image7 span {
display:none;
}
a.image8 {
display:block;
width: 150px;
height: 200px;
background: url(../images/cours/paris2.jpg) no-repeat;
}
a.image8:hover {
background-image: url(../images/cours/paris1.jpg);
}
a.image8 span {
display:none;
}
a.image9 {
border: 2px solid #6F4319;
display:block;
width: 450px;
height: 310px;
background: url(/media/images/retouche_photo/Eliane_Kiney_apres.jpg) no-repeat;
}
a.image9:hover {
border: 2px solid #FFFFFF;
background-image: url(/media/images/retouche_photo/Eliane_Kiney_avant.jpg);
}
a.image9 span {
display:none;
}
a.image10 {
border: 0;
display:block;
width: 300px;
height: 200px;
background: url(/media/images/cours/retap-DSC8431.jpg) no-repeat;
}
a.image10:hover {
border: 0;
background-image: url(/media/images/cours/base-DSC8431.jpg);
}
a.image10 span {
display:none;
}
/*######################### FONT #########################*/
#contenu p {
text-align:left;
color:#FFFFFF;
}
#contenu h1 {
font-size:135%;
color:#9da1a3;
}
#contenu h2 {
font-size:110%;
color:#CACDCE;
}
#contenu h3 {
font-size:100%; 
color:#FFFFFF;
}
#contenu h4 {
font-size:95%;
}
#contenu h5 {
font-size:110%;
color:#ffffff;
}
#contenu h6 {
font-size:110%;
color:#ff6600;
}
/*######################### IMAGE REACTIVE #########################

ul#image_reactive
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
	text-decoration:none;
	
Suppression du margin, du padding et des puces du <ul>
}
ul#image_reactive li
{
	margin: 0 0 5px 0 ;
	text-decoration:none;
	padding: 0 ;
	
Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout
}

ul#image_reactive li a
{
	display: block; On passe les liens en éléments de type block pour leur donner des propriétés de taille 
	width: 160px ;
	line-height: 115px ;
	color: #000 ;
	text-indent: 40px ; On décale le texte de 40px du bord gauche 
	border: solid #2A3437 2px;
	text-decoration: none ;
	background: no-repeat 0 0 ;  On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut
}

ul#image_reactive li a:hover
{
Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image
border: solid #2A3437 2px;
background: no-repeat 0 -115px ;}*/


/*######################### VISIONNEUSE #########################*/

#visionneuse {
	width: auto;
	position: relative;
	height: auto;
}
#placeholder {
}

#liens_visionneuse {
	float: left;
	position: relative;
	top: 25px;
	left: 15px;
}
/*######################### VISIONNEUSE LIGHTBOX2 #########################*/

/*--------- Lightbox -----------*/
/*#lightbox{
    background-color:#eee;
    padding: 10px;
    border-bottom: 2px solid #666;
    border-right: 2px solid #666;
}

#lightboxDetails{
    font-size: 0.9em;
    color: #555;
    padding-top: 0.5em;
}

#closeButton{ top: 5px; right: 5px; }

#lightboxCaption{ float: left; }

#keyboardMsg{ float: right; }

#lightbox img{ border: none; }

#overlay img{ border: none; }

#overlay{ background-image: url(XXX/overlay.png); }

* html #overlay{ Hack IE 
    background-color: #000;
    background-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XXX/overlay.png", sizingMethod="scale");
}*/
/*-------- fin lightbox -------*/


#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}
.thumbnail{
	padding: 6px 0px 3px 8px;
	background-color: #2A2F32;
	border: 1px solid #2a2a2a;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	}	

/*######################### FOOTER #########################*/
#footer2 {
	height:20px;
	margin-left:0px;
}
#footer {
	/*position: fixed;*/
	z-index:200;
	overflow:hidden;
	bottom: 0;
	padding-bottom:0px;
	padding-top:2px;	
	background-color: #2A3437;
	border-top: solid #202526 1px;
	width:100%;
	text-align:center;
	color:#9da1a3;
	font-size:90%;
}
#footer a {
	font-weight:normal;
	color:#9da1a3;
}
/*######################### BLOC ADRESSE #########################*/
#adresse {
	font-size:100%;
}
#adresse a {
	font-weight:normal;
	color:#FF6600;
}
/*######################### TABLEAU #########################*/
#tableau { 
	margin-left:0px;
	margin-top:0px;
	font-weight: normal;
	color:#FFFFFF;
}
/*######################### LIGNE TABLEAU ET CLASS #########################*/
.orange {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	color:#FF6600;
}
.ligne_tab {
	padding-bottom:5px;
	padding-top:5px;
	border-bottom:solid 1px #535A5F;
}

.ligne_tab2 {
	padding-bottom:5px;
	padding-top:5px;
	border-bottom:solid 1px #CACDCE;
}