body {
	margin: 0;
	background: #FFFFFF url(../images/BG_body.jpg) repeat-x top left;
}
#content {
	width: 900px;
	margin: 0 auto;
}

/*##################################################################################*/
/*       HEADER                                                                     */
/*##################################################################################*/
#header-box {
	width: 900px;
	height: 237px;
	background: url(../images/PourUnSitWebQuiVousRessemble.png) no-repeat center right;
}
#logo {
	float: left;
	margin: 0;
	padding: 0;
	width: 230px;
	height: 237px;
	background: url(../images/logo.jpg) no-repeat top left;
}
#logo a {
	display: block;
	width: 210px;
	height: 200px;
	margin: 30px 10px 0 10px;
}

/*##################################################################################*/
/*       BODY                                                                       */
/*##################################################################################*/
#left-box {
	float: left;
	margin: 0;
	padding: 0;
	width: 230px;
}

	#nav-left {
		float: left;
		margin: 0;
		padding: 0;
		width: 230px;
		background: url(../images/BG_nav.png) repeat-y top left;
	}
	#nav-left .nav-left-bottom {
	 	float: left;
		margin: 0;
		padding: 0;
		width: 230px;
		height: 44px;
		background: url(../images/nav-left-bottom.jpg) no-repeat;
	 }

#boxleft {
	float: left;
	margin: 0;
	padding: 0;
	width: 230px;
	height: 156px;
	background: url(../images/BG_leftbox.jpg) no-repeat top left;
}
#boxleftlogin {
	float: left;
	margin: 0;
	padding: 0;
	width: 230px;
	height: 176px;
	background: url(../images/BG_leftboxlogin.jpg) no-repeat top left;
}
	#boxleft h2, #boxleftlogin h2 {
		padding: 0;
		margin: 8px 0 0 20px;
		color: #96bd0d;
		text-transform: uppercase;
		font-family: Geneva, Verdana;
		font-size: 11pt;
		font-weight: bold;
		line-height: 2em;		
	}
	#boxleft p, #boxleftlogin p {
		padding: 5px 20px 0 25px;
		letter-spacing: 1px;
		font-family: Verdana, Geneva ;
		font-size: 7pt;
		font-weight: normal;
		line-height: 11pt;		
	}
	
#boxDetailSite {
	float: left;
	margin: 0 20px 0 0;
	padding: 0;
	width: 275px;
	height: 400px;
}
#boxVignettesSite {
	float: left;
/*	left: 300px;	*/
	margin: 0;
	padding: 0;
	width: 350px;
	height: 400px;
}
/*##################################################################################*/
/*       DIFFERENTS FORMULAIRES                                                     */
/*##################################################################################*/
fieldset#coordonnees p {
	padding: .1em 0;
	margin: 0 0 .2em 0;
}

fieldset#authentifier label {	
	float: left;	
	width: 43%;	
	text-align: right;	
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;	
}
fieldset#coordonnees label {	
	float: left;	
	width: 30%;	
	text-align: right;	
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;	
}
fieldset#authentifier label:hover, fieldset#coordonnees label:hover {
	cursor: pointer;
}

fieldset#coordonnees {
	border: 1px solid #336699;
	width: 80%;
	margin-left: 20px;
}
fieldset#authentifier {
	border: 1px solid #336699;
	width: 72%;
	margin-left: 20px;
	margin-top: 10px;
}
legend {
	border: none;
	font-family: Geneva,Verdana ;
	font-size: 9pt;
	font-weight: bolder;
	color: #336699;
	text-align: left;
}
label {
	display: inline;
	margin-left: 2px;
	font-family: Geneva,Verdana ;
	font-size: 8pt;
	font-weight: bolder;
	color: #666666;
}
.area, .areafocus {
	border: 1px solid #96BD0D;
	margin-bottom: 3px;
	font-family: Geneva,Verdana ;
	font-size: 9pt;
	font-weight: normal;
	color: #336699;
	text-align: left;
	text-indent: 3px;
}
.areafocus {
	background-color: #e2edbc;
}
/*##########################################################################################*/
/*	 POUR LES BOUTONS CSS   : 	<a href="#" class="bouton"><ins>Texte du bouton</ins></a>	*/
/*##########################################################################################*/
.bouton {
  background: url('../images/BG_boutons.png'); /* Bord gauche et contenu du bouton */
  float: left; 
  margin: 3px 0 0 5px; 
  display: block; 
  cursor: pointer; 
  text-decoration: none;
}
.bouton ins {
  background: url('../images/BG_boutons.png') 100% -20px no-repeat; /* Bord droit du bouton, aligné à droite ! */
  height: 20px; 
  line-height: 20px; 
  padding: 0 10px; 
  color: #FFFFFF;
  display: block; 
  text-decoration: none;
}
.bouton:hover,
.bouton:focus,
.bouton:active {
  background-position: 0 -40px; 
  text-decoration: none;
}
.bouton:hover ins,
.bouton:focus ins,
.bouton:active ins {
  background-position: 100% -60px; 
  color: #FFFFFF;
  text-decoration: none;
}
#contenu {
	position: relative;
	top: -40px;
	left: 20px;
	margin: 0 0 0 0;
	float: left;
	width: 650px;
}

/*##################################################################################*/
/*       POUR TOUT CE QUI EST TEXTES                                                */
/*##################################################################################*/
a.lientexte, a.lientexte:link, a.lientexte:visited, a.lientexte:active {
/*	font-family: Geneva,Verdana ;
	font-size: 9pt;
	font-weight: normal;	*/
	color: #666666;
	text-decoration: underline;
}
a.lientexte:hover {
	color: #336699;
	text-decoration: none;
}

ul#ouSuisJe {
	position: relative;
	top: -45px;
	left: 5px;
	margin: 0 0 0 0;
}
ul#ouSuisJe li {
	display: inline;
	font-family: Geneva,Verdana ;
	font-size: 8pt;
	font-weight: bold;
	color: #333333;
}
	ul#ouSuisJe li a,ul#ouSuisJe li a:link,ul#ouSuisJe li a:visited,ul#ouSuisJe li a:active {
		display: inline;
		font-family: Geneva,Verdana ;
		font-size: 8pt;
		font-weight: bold;
		color: #333333;
		text-decoration: underline;
	}
	ul#ouSuisJe li a:hover {
		text-decoration: none;
	}
	ul#ouSuisJe li ul {
	display:inline;
	}

p, .texteBleu, .texteC, .texteL, .texteR, .texteJ, .texteVert, .texteRouge {
	font-family: Geneva,Verdana ;
	font-size: 9pt;
	font-weight: normal;
	color: #666666;
}
.lettrine {
	border: 2px solid ;
	padding: 0.1em;
	margin-right: 3px;
	float: left;
	line-height: 1em;
	font-size: 2em;
	background-color: #96bd0d;
	width: 23px; /* pour avoir un carré */
	text-align: center;
} 
/*****************************************/
p.lettrine:first-letter {
	border: 2px solid ;
	padding: 0.1em;
	margin-right: 3px;
	float: left;
	line-height: 1em;
	font-size: 3em;
} 
/*****************************************/
.texteBleu {
	color: #336699;
	font-weight: bold;
}
.texteC {
	text-align: center;
}
.texteL {
	text-align: left;
}
.texteR {
	text-align: right;
}
.texteJ {
	text-align: justify;
}

.titreVert {
	font-family: Geneva,Verdana ;
	font-size: 15pt;
	font-style: normal;
	font-weight: bold;
	color: #96bd0d;
}
.texteVert {
	color: #96bd0d;
	font-weight: bold;
}
.texteRouge {
	color: #990000;
	font-weight: bold;
}
li.ref {
	list-style-position: outside;
	list-style-image: url(../images/arrow_next.gif);
	font-family: Geneva,Verdana ;
	font-size: 9pt;
	font-weight: normal;
	color: #666666;
}
/*##################################################################################*/
/*       LISTE POUR LES VIGNETTES PORTFOLIO                                         */
/*##################################################################################*/
#portfolio {
	margin: 0 50px;
	padding: 15px 0 0 0;
	list-style: none;
	float: left;
	width: 650px;
}
#portfolio li {
	padding: 0;
	margin: 0 6px 12px 0;
	float: left;
	width: 356px;
}
#portfolio a {
	float: left;
	padding: 8px 8px 2px 8px;
	background-color: #c9da8e;
	font-family: Geneva,Verdana ;
	font-size: 8pt;
	font-style: normal;
	font-weight: bold;
	color: #c9da8e;
	text-align: right;
	text-decoration: none;
}
#portfolio a:hover {
	font-size: 8pt;
	font-style: normal;
	font-weight: bold;
	color: #e9f5bf;
	text-align: right;
	text-decoration: none;
	background-color: #A2C628; /* #5e8406; */
}

/* PAGINATION  ########################################## */
div.pagination {
padding: 3px;
margin: 3px;
text-align:center;
}

div.pagination a {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #c9da8e;

text-decoration: none; /* no underline */
color: #c9da8e;
}
div.pagination a:hover, div.digg a:active {
border: 1px solid #c9da8e;
background-color: #c9da8e;
color: #FFFFFF;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #A2C628;

font-weight: bold;
background-color: #A2C628;
color: #FFF;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #EEE;

color: #DDD;
}

/*##################################################################################*/
/*       FOOTER                                                                     */
/*##################################################################################*/
#footer {
	margin: 0;
	float: left;
	height: 180px;
	width: 100%;
	background: #FFFFFF url(../images/BG_footer.jpg) repeat-x bottom left;
}
#footer-box {
	width: 900px;
	margin: 0 auto;
	padding: 55px 0 0 0;
	font-family: Geneva,Verdana ;
	font-size: 9pt;
	font-style: normal;
	font-weight: normal;
    color: #666666;
}  
  
  
/* separate the list from surrounding elements */
ul#ulfooter {
  margin: 0 5em;
  list-style-type: none;
}

ul#ulfooter li {
  /* Stipulate the height of each item so that 
  vertical return = items * height */

  line-height: 1.2em;

  /* Clear the default margins & padding 
  so we can style the list from scratch */
  width: 200px;
  margin: 0;
  padding: 0;
}

/* If li position is left static, Internet 
Explorer disables hyperlinks in the list 
in all but the final column.

This rule will be processed only by 
Internet Explorer because only IE believes 
that there’s a level above HTML: */

html ul#ulfooter li {
	position: relative;
}

/* horizontal position of each column */

ul#ulfooter li.footer-col-1 { margin-left: 0em; }
ul#ulfooter li.footer-col-2 { margin-left: 20em; }
ul#ulfooter li.footer-col-3 { margin-left: 40em; }

/* Bring the first item of each column 
back up to the level of item 1.
Vertical return = items * height.
Here, 5 items * 1.2em line-height = 6em */

ul#ulfooter li.reset { 
	margin-top: -6em; 
}

/* anchor styling */
ul#ulfooter li a{
  display: block;
  text-decoration: none;
  color: #666666;
}
ul#ulfooter li a:hover{
  color: #999999;
}