/*  Reset.css   * Resets default browser CSS styles. Created by Erik Meyer:
   * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* Remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: #FFF;
	background: #000;
}
ol, ul {
	list-style: none;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* CLEARING */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display:inline-table;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
.nomargin{margin:0;padding:0;}
.clear{clear:both;display:block;}
.floatleft{float:left}
.floatright{float:right;}/* --------------------------------------------------------------     
   Typography.css
   * Sets some default typography.  
   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Wilson Miner      [wilsonminer.com]
   * Typogrify         [code.google.com/p/typogrify]   
   The default font size is 12px. The baseline is set to 
   18px. When you're setting heights of elements, always 
   remember to use a multiple of the baseline (18,36,54..).   
   The height of images shoud also be a multiple of 18.   
   Read more about using a baseline here:
   * alistapart.com/articles/settingtypeontheweb  
-------------------------------------------------------------- */   

body,ul,ol,dl,td,th,
caption,pre,p,blockquote,input,textarea {
  font-family:  Arial,"Lucida Grande", Helvetica, Verdana, sans-serif;
  font-size: 85%;
  line-height: 1.2em; /* Baseline here at 150%. This is set multiple places. */
  color: #FFF;
}


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4 { 
	clear:both; 
  	font-family: Times,"New York", Palatino, serif, "Times new roman";
	font-weight:bold;
  	margin: 0;
	padding-right:.5em;
	text-transform:uppercase;  	
}

h1 strong,h2 strong,h3 strong,h4 strong{color:#ff7a0e;}

/* Total height for each heading has to be a multiple of the baseline (18). */
h2 { font-size: 1.8em; line-height: 1.5em; text-align:right; }
h3 { font-size: 1.5em; text-align:right; }
h4 { font-size: 1.1em; }

#leftcol h3{color:#006600;font-size:1.2em;padding:.1em 0 0 2.7em;text-align:left;}
#leftcol h4{color:#000;font-size:.9em;margin:1em 0 .5em 1em;text-align:left;}
#page h3{margin:.5em .5em .4em 0;line-height:.9em}
#page h4{color:#ff7a0e;text-align:right;text-transform:none;margin:.5em .5em .4em 0;}
/* Text elements
-------------------------------------------------------------- */
#page p{font-size:.9em;}
p           { margin:.2em .2em .5em;; text-align:justify; }
p.last      { margin-bottom:0; }
p img       { float: left; margin: 18px 18px 18px 0; padding:0; }
p img.top   { margin-top:0; } /* Use this if the image is at the top of the <p>. */

ul, ol      { color:#000;margin: 18px 0 18px 18px; list-style:none;text-align:left; }
li          { line-height:18px; }
ol          { list-style-type: decimal; }
dl          { color:#000; margin: 18px 0; text-align:left;}
dl dt       { font-weight: bold; }

a           { color:#090; text-decoration: none; outline: none; }
a:hover     { color:#3C0; text-decoration: underline;}

blockquote  { margin: 18px 0 18px 23px; font-size: 0.9em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
small		{ font-size:.9em;}
em          { font-style: italic; }
pre         { margin-bottom: 18px; line-height:18px; background: #eee; padding:8px; border:1px solid #ddd; }
code        { font:0.9em Monaco, monospace; }


/* Tables
-------------------------------------------------------------- */

table   { margin-bottom: 13px; border-top:1px solid #ddd; border-left:1px solid #ddd; }
th,td   { height:17px; padding:0 8px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; }
th      { font-weight:bold; }


/* Some default classes
-------------------------------------------------------------- */

.small, .small p  { font-size: .8em; }
.large, .large p  { font-size: 1.2em; }
.quiet, .quiet p  { color: #666; }
.hide             { display: none; }

/* TODO: Implement image captions. */
.caption { }


/* Extra fancy typography
-------------------------------------------------------------- */

/* For great looking ampersands, use this code instead of &amp;: 
   <span class="amp">&amp;</span>  */
  
.amp { 
  color: #666; 
  font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", serif; 
  font-size: 1.1em;
  line-height:10%; /* Fix to maintain correct baseline */
  font-style: italic;
}

/* For great looking quote marks in titles, replace "asdf" width:
   <span class="dquo">&#8220;</span>asdf&#8221;
   (That is, when the title starts with a quote mark). */  

.dquo { margin-left: -.7em; } 
/* (You may have to change this value depending on your font size). *//* -------------------------------------------------------------- 
   Grid.css
   * Creates an easy to use grid of 14 columns.
   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Khoi Vinh         [subtraction.com]
   By default, the grid is 960px wide, with columns 
   spanning 50px, and a 20px margin between columns.
   If you need fewer or more columns, use this 
   formula to find the new total width: 
   Total width = (columns * 70) - 20
-------------------------------------------------------------- */

body { 
  text-align: center; /* IE Fix */
  margin:0;
}

/* A conainer should group all your columns. */
.container {
  text-align: left;
  position: relative;
  padding: 0;
  margin: 0 auto;   /* Centers layout */
  width: 960px;     /* Total width */
}

/* Clear fix */
.container:after { 
  content:  "."; 
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* Columns
-------------------------------------------------------------- */

/* Use this class together with the .span-x classes
   to create any compsition of columns in a layout.
   Nesting columns works like a charm (remember .first and .last). */
   
.column {
  float: left;
  margin: 0 10px;
  padding: 0;
}

/* Use these classes to set how wide a column should be. */
.span-5   { width: 300px; }
.span-6   { width: 400px; }
.span-7   { width: 470px; }
.span-8   { width: 540px; }
.span-9   { width: 610px; }
.span-10  { width: 680px; }a.floatleft, img.floatleft{margin:.2em 1em .5em;}
a.floatright, img.floatright{margin:.2em 1em .5em;}
a.carte{
background:url(../img/puces/eye.gif) no-repeat left center;
clear:both;
display:block;
margin-left:10em;
padding-left:20px;
text-align:left;
width:300px;
}
#conteneur{
margin:0 auto;
width:960px;
}
	#nav_rap {
	left:-4999px;
	position:relative;
	}
	#header{margin:-1em 0 0;}
		#header img{margin:0;}
		img#solhead{
		float:left;
		margin:1em 0 0 2em;
		}
		#eolhead{float:left}
		#logo{
		background:url(../img/logos/logo_header.gif) no-repeat center top;
		display:block;
		float:left;
		height:108px;
		margin:1em 2em 0;
		width:553px;
		}
			#logo h1{display:none;}
			
		#menu{
		background:url(../img/design/bande_header.jpg) no-repeat left top;
		clear:both;
		height:120px;
		margin:0;		
		} 
			#menu ul{
			height:60px;			
			margin:0;
			padding:7em 0 0 .2em;
			}
			#menu ul li{display:inline;}
			#menu li a{
			display:block;
			float:left;
			height:60px;
			margin:0 .1em;
			}
			#menu li a span{
			left:-3999px;
			position:absolute;
			}
				#menu a#acc{
				background: url(../img/menu/accueil.png) no-repeat left top;
				width:100px;
				}
				#menu a#therm{
				background:url(../img/menu/thermique.png) no-repeat left top;
				width:131px;
				}
				#menu a#photo{
				background:url(../img/menu/photovoltaique.png) no-repeat left top;
				width:175px;
				}
				#menu a#bois{
				background:url(../img/menu/bois.png) no-repeat left top;
				width:127px;
				}
				#menu a#eol{
				background:url(../img/menu/eolien.png) no-repeat left top;
				width:125px
				}
				#menu a#real{
				background:url(../img/menu/realisation.png) no-repeat left top;
				width:130px;
				}
				#menu a#aide{
				background:url(../img/menu/aides.png) no-repeat left top;
				width:73px;
				}
				#menu a#conta{
				background:url(../img/menu/contact.png) no-repeat left top;
				width:93px
				}
				#menu li#select a#acc{
				background: url(../img/menu/accueil_actif.jpg) no-repeat center 50%;
				width:70px;
				}
				#menu li#select a#therm{
				background:url(../img/menu/thermique_actif.jpg) no-repeat center 50%;
				width:107px;
				}
				#menu li#select a#photo{
				background:url(../img/menu/photovoltaique_actif.jpg) no-repeat center 50%;
				width:152px;
				}
				#menu li#select a#bois{
				background:url(../img/menu/bois_actif.jpg) no-repeat center 50%;
				width:97px;
				}
				#menu li#select a#eol{
				background:url(../img/menu/eolien_actif.jpg) no-repeat center 50%;
				width:105px
				}
				#menu li#select a#real{
				background:url(../img/menu/realisation_actif.jpg) no-repeat center 50%;
				width:105px;
				}
				#menu li#select a#aide{
				background:url(../img/menu/aides_actif.jpg) no-repeat center 50%;
				width:55px;
				}
				#menu li#select a#conta{
				background:url(../img/menu/contact_actif.jpg) no-repeat center 50%;
				width:65px
				}
	#content{
	background:#D5BF80;		
	margin:0.5em 0 0;
	padding:.8em;
	position:relative;
	}	
	#content #page{
	background:#E2D3A7 url(../img/bg/bg_cont.jpg) no-repeat 75% bottom;
	height:450px;
	margin:0.5em 0.5em 1em 0;
	padding:0 .2em 2em .5em;
	position:relative;
	overflow:auto;
	}
		#content #page p{color:#000;padding:5px;}
		#content #leftcol{text-align:left;}
			#leftcol li em{font-style:normal;}
			#leftcol ul{color:#000;margin:1em 1.2em .5em .4em}
			#leftcol ul li{background:url(../img/puces/puce_leftcol.gif) no-repeat left top; list-style:none; padding-left:15px;}
				.infos{
				background:url(../img/bg/bg_leftcol_small.jpg) no-repeat left top;
				height:220px;
				margin:1em 0 .5em;
				padding:5px 10px 10px 5px;
				}
				.filrouge{
				background:url(../img/bg/bg_leftcol_smaller.jpg) no-repeat left top;
				height:180px;
				margin:1em 0 .5em;
				padding:5px 10px 10px 5px;
				}
			a.aide{
			background:#8cc63f;
			border:1px solid #fff;
			clear:both;
			color:#000;
			display:block;
			margin:1em 5em;
			padding:.5em 2em;
			position:absolute;
			bottom:10px; 
			left:265px;
			}
		a.areal{
			background:#8cc63f;
			border:1px solid #fff;
			color:#000;
			padding:.5em 2em;
			position:absolute;
			bottom:25px; 
			right:35px;
			}
			
		a.lien_charte,
		a.lien_charte:hover,
		a.lien_charte:visited,
		a.lien_charte:active,
		a.lien_charte:focus{}
		
		a.lien_charte img{margin:0.2em 0.5em 0 0;}
		
		img#ecoartisan{margin:.6em 0 0;}
		#ecoart{background:#fff;padding:5px 10px;text-align:center;}
		#ecoart p{color:#333;font-size:.85em;}
		#ecoart p strong{font-weight:800;}
		
		a.audit{margin:.5em;clear:left;display:block;}
		
		#footer{	
		clear:both;
		margin:0 auto;	
		}
			#footer strong{
			color:#FFBD0F;	
			float:left;	
			font:600 1.25em "Times New Roman", Times, serif;		
			margin-left:.5em;
			}
			#footer ul{
			color:#fff;
			float:left;
			font-size:.7em;		
			margin:0;
			padding:.2em 0 0 .5em
			}
				#footer ul li{
				display:inline;
				margin:0 .3em;	
				padding:0;		
				}
			#footer li a{color:#fff;}
			#footer li a:hover{border-bottom:1px dotted #fff;text-decoration:none;}
