html 
{
	font-size : 62.5%;
	height : 100%;
	background-color : #999;
}

body 
{
	background-color : #fff;
	color : #666;
	font : 1.2em Arial, Verdana, Helvetica, sans-serif;
	margin : 0.5em auto;
	width : 980px;
	height : 100%;
} 

#wrap 
{
	width : 980px;
	background-color : #fff;
	margin : 0 auto;
}

a img {
border : 0; 
} 

.imgalign {
vertical-align : middle;
}

.justifie {
text-align : justify; 
}
.pcentre {
text-align : center; 
} 
.italique {
font-style : italic; 
} 

.pentete {
text-align : justify;
color : #ff8c00;
font-weight : bold;
} 

#logo 
{
    position : relative;
    color : #666;
	margin : 5px 0;
	height : 50px;
	text-align : left;
	width : 100%;
}

#twitter 
{
	position : absolute;
	right : 20px;
	top : 1em;
	padding : 0;
	margin : 0;
	text-align : center;
	width : 61px;
}



.redgif {
padding-left : 5px;
}

h1 {
font-size : 1.5em;
color : #ff8c00;
text-align : left;
background : transparent; 
padding : 0 0 3px 0;
border-bottom : 1px solid #ff8c00;
} 
h2 {
font-size : 1.1em;
color : #800040;
text-align : justify;
}

a {
color : #666;
font-weight : bold;
}

a:hover {
color : #ff8c00;
font-weight : bold; 
}

a#current 
{
	color : #ff8c00;
	font-weight : bold; 
}

#photo {
	height : 281px;
	background : transparent;
	text-align : center;
	margin : 0 auto;
}

#imglogo 
{
	margin : 0 auto;
	padding : 0;
}

.gras 
{
	font-weight : bold; 
}

/* ===================================================== */
/*                       GAUCHE (MENU)                   */
/* ===================================================== */

#gauche 
{
	float : left;
	width : 200px;
	margin-top : 0;
	text-align : center;
	background : transparent;
}
	#gauche ul {
		list-style-type : none;
		text-indent : 0;
		width : 180px;
		margin : 0;
		padding : 0;
	}
	
		#gauche li {
			list-style-type : none;
			text-indent : 0; 
			padding : 5px;
			margin : 5px;
			text-align : left;
		}
		
			#gauche li a {
				color : #666;
				font-weight : bold;
				text-decoration : none;
				background : transparent;
				border-left : 4px solid #FFF;
				border-bottom : 1px dotted #FFF;
				padding-left : 5px;
			}
			
			#gauche li a:hover {
				color : #666;
				font-weight : bold; 
				text-decoration : none;
				background : transparent;
				border-left : 4px solid #666;
				border-bottom : 1px dotted #666;
				padding-left : 5px;
			}
						
			#gauche li a#current
			{
				color : #ff8c00;
				
				/*
				border-left : 4px solid #ff8c00;
				border-bottom : 1px solid #ff8c00;
				*/
				
				border-left : 4px solid #ff8c00;
				border-bottom : 1px dotted #ff8c00;
			}
			
/* ======================================================================================================= 
                     DROITE (GOOGLE ADSENSE)      
                    
   ======================================================================================================= */

#droite 
{
	float : right;
	width : 200px;
	margin-top : 0;
	text-align : center;
	background : transparent;
}			

/* ===================================================== */
/*                       PRINCIPAL                       */
/* ===================================================== */

#ppal 
{
	margin-top : 0; 
	margin-left : 215px;
	margin-right : 20px;
	padding : 0;
	background : transparent;
	text-align : center; 
	color : #666;
}

#ppal ul li 
{
	list-style-type : square;
	list-style-position : outside;
    text-align : justify; 
	padding : 0;
	margin : 0 0 1em 0;
} 

/* ===================================================== */
/*                       PIED DE PAGE                    */
/* ===================================================== */

#pied 
{
	clear : both;
	margin : 30px 0 10px 215px;
	padding : 3px 0 0 0;
	text-align : left;
	background : transparent;
	font-weight : bold;
	border-top : 1px dotted #666;
}

#pied ul 
{
	list-style-type : none;
	text-indent : 0;
	margin : 3px;
	padding : 0;
}

#pied li 
{
	display : inline;
	list-style-type : none;
	text-indent : 0;
	padding : 0;
	margin : 0;
	text-align : center;
}

/* ===================================================== */
/*                       FORMULAIRES                     */
/* ===================================================== */

form {
color : #666;
} 

form p {
padding : 2px;
margin : 0;
text-align : left;
}

label 
{
	float: left;
	width: 30%;
	text-align: right;
	color : #666;
	margin-right : 5px; 
	cursor : pointer;
	padding-top : 0.2em;
}

.nolabel 
{
	float: left;
	width: 30%;
	margin-right : 5px;
	text-align: right;
	padding-top : 0.2em;
} 

.label_radio 
{
	float : none;
	width : 150px;
	font-size : 1em;
	text-align: left;
	font-weight : normal;
	padding : 0;
	cursor : pointer;
	margin : 0;
}

p input, select, textarea
{
	border : 1px dotted #666; 
	color : #666;
	font : 1em Arial, Verdana, Helvetica, sans-serif;
} 
	
} 

.autresinput 
{
	border : 1px solid #fff; 
	color : #666;
}

.bouton 
{
	font : 0.8em Arial, Helvetica, sans-serif;
	background-color : #666; 
	border : 0; 
	color : #fff; 
	font-weight : bold; 
} 

button 
{
	background-color :#fff;
	border : 0;
}

.erreur 
{
	color : #ff0000; 
	font-weight : bold; 
	margin : 0.5em 2em;
} 
 
.success 
{
	color : #008000; /* = green */
	font-weight : bold; 
	margin : 0.5em 2em;
}

#erreur_bloc 
{
	background-color : #fff;
    border : 2px solid #ff0000;
	padding : 0;
	margin : 0.5em 0;
	color : #ff0000;
	text-align : left;
	font-weight : bold;
	padding-left : 0.5em;
}

#erreur_bloc .erreur 
{
	margin : 0;
}

/** ----------------------------------------------------
*                      References
*   ----------------------------------------------------  
*/

#ppal_references 
{
	margin : 0; 
	padding : 0;
}
/*
#ppal_references ul 
{
	
}
*/

#ppal_references ul li 
{
	list-style-type : none;
    border-bottom : 1px dotted  #ff8c00 /* #999 */;
	text-align : justify;
	padding : 0.5em;
	margin : 0.5em;
}

.li_vignettes 
{
	height : 110px;
}

.references_vignettes 
{
	float : left;
	margin : 0 0.5em;
	padding : 0;
}

#ppal_references a img 
{  
	border : 2px solid #999;
}

#ppal_references a:hover img
{
	border : 2px solid #ff8c00;
}

/** ----------------------------------------------------
*                      Autres
*   ----------------------------------------------------  
*/

#dispo 
{
	text-align : center;
	background-color : #ff8c00;
	color : #fff;
	font-weight : bold;
	padding : 3px;
	font-size : 1.5em;
}
	
.dispo 
{
	text-align : center;
	background-color : #FF8c00; /** fond orange */
	color : #fff;
	font-weight : bold;
	padding : 5px 0 5px 0;
	font-size : 1.5em;
}

.indispo 
{
	text-align : center;
	background-color : #ce0000; /** fond rouge */
	color : #fff;
	font-weight : bold;
	padding : 5px 0 5px 0;
	font-size : 1.5em;
}

.dispo a 
{
	color : #FFF;
	text-decoration : underline;
}

.dispo a:hover 
{
	color : #800040; /** prune */
	text-decoration : underline;
}

/** ------------------------------------------------------------------ 
*          diaporama des logos technos sur la page d'accueil
*   ------------------------------------------------------------------
*/

#diaporama_logos 
{
	width : 250px;
	height : 200px;
	margin : 0 auto;
}

.slideshow img
{
	margin : 0 auto;
}

/** ------------------------------------------------------------------ 
*          index.php bloc présentation perso
*   ------------------------------------------------------------------
*/

#presentation {
	height : 150px;
	width : 660px;
	margin : 0 0 20px 30px;
	padding : 0 1em;
	border : 2px solid #ccc;
	background-color : #eee;
	color : #000;
}

#presentation ul {
	margin-top : 1em;
    color : #000;
}