@import url(typo.css);
@import url(skin.css);
@import url(menu1.css);
@import url(menu2.css);

/*===| I. LAYOUT SIZE |====================================================*/


/* --- Important! -------------------------------
	The bottom margin of #wrap-container
	is the negative value of the footer's height
	-----------------------------------------------
*/	#wrap-container {	margin: 0 auto -89px;}


/* ===| II. LAYOUT's DEFAULT ELEMENTS |=======================================*/

* {margin: 0;}


/* ===| III. CONTENT ELEMENTS |===============================================*/

img {border: 0;}

a:focus{
  outline: none;
}
a:link, a:visited{
	color:#147ACA;
	text-decoration: none;}

a:hover, a:active{
	color:#000000 !important;
	text-decoration: none !important;}

/*	--- Important! ----------------------------------
	Use class "left" or "right" on the html elements
	you want to float (on the thumbs, for example)
*/	.left{float: left;} .right{float: right;}


/* ===| IV. NAVIGATION |===============================================*/
#menu2 ul li{display: inline;}

.ref {
		width:100%;
		text-align:center;
		padding:0px 0 2px 0;
        color:#000000;
	}

html, body {height: 100%; width: 100%;}
body {text-align: center;}
ul, li{
	list-style: none;
	list-style-position: outside;
	margin: 0;
	padding: 0;}

p{	padding: 0 5px;}

#wrap-container {
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
#container {
	margin:0 auto;
    height:645px;
    width:778px;
    padding: 0 40px 0 42px;
	text-align: left;
    }
#footer {
    width: 860px;
    height:89px;
    margin:0px auto;
    padding:0px;
}

#top{
  width:511px;
  height:20px;
  margin:0px;
  padding:40px 0 0 267px;
}
#photo-left{
  float:left;
  width:267px;
  height:455px;
  margin:0px;
  padding:0px;
}

#menu{
  float:left;
  width:511px;
  height:35px;
  margin:0px;
  padding:0px;
}
#contenu{
  float:left;
  width:509px;
  height:420px;
  margin:0px;
  padding:0px;
}
#contenu-left{
    float:left;
    width:242px;
    height:420px;
    margin:0px;
    padding:0px;
}
#text{
  float:left;
  width:242px;
  height:247px;
}
#logo{
  float:left;
  width:242px;
  height:173px;
}


#contenu-right{
    float:left;
    width:267px;
    height:420px;
    margin:0px;
    padding:0px;
}
#img1{
  float:left;
  width:267px;
  height:220px;
}
#img2{
  float:left;
  width:267px;
  height:200px;
}
#middel{
  float:left;
  width:776px;
  height:33px;
  margin:0px;
  padding:0px;
}
#bottom{
  float:left;
  width:776px;
  height:95px;
  margin:0px;
  padding:0px;
}

#actualite{
  float:left;
  width:255px;
  padding:12px 0 0 12px;
  height:83px;
}
#actualite-text{
  height:47px;
  padding-top:15px;
  margin-right:10px;
}

#info{
  float:left;
  width:207px;
  padding:4px 15px 0 20px;
  height:91px;
}
#info a:link, #info a:visited{
	color:#147ACA;
	text-decoration: underline;}

#info a:hover, #info a:active{
	color:#000000 !important;
	text-decoration: none !important;}
#img3{
  float:left;
  width: 267px;
  height:95px;
}
/*------------------gouttiere--------------------*/
#left-column{
	float:left;
	width:267px;
	height:450px;
	padding-top:133px;
	text-align:center;
}
#right-column{
	float:left;
	width:511px;
	height:583px;
}
#title{
	float:left;
	width:509px;
	height:48px;
	margin:0px;
	padding:0px;
}
#contenu1{
	float:left;
	width:509px;
	height:374px;
}
#contenu2{
	float:left;
	width:509px;
	height:115px;
	text-align:center;
}
#contenu2 a:link, #contenu2 a:visited
{
    color: #ffffff !important;
    text-decoration: underline;
}

#contenu2 a:hover, #contenu2 a:active{
	color: #147ACA !important;
    text-decoration: none;
}

.paragraph{
	clear:both;
	width:485px;
	padding:0 14px 0 10px;
}
/*------------------energies--------------------*/
#left-column1{
	float:left;
	width:267px;
	height:583px;
	text-align:center;

}
#contenu3{
	float:left;
	width:509px;
	height:500px;
	padding:0px;
	margin:0px;
    display:inline;
}
/*------------------realisations--------------------*/
#left-column2{
	float:left;
	width:267px;
	height:583px;
	text-align:center;

}
.select{
  width:130px;
}
.bg-details
  {
  padding-top:2px;
  width:95px;
  height:18px;
  background:url(../images/charte/bg-details.jpg) no-repeat left top;
  margin-top:4px;
  float:left;
  margin-left:0px;

  }
/*------------------energies--------------------*/
ul.list1{
    margin:0px;
    padding:0px;

    list-style: none;
	}
ul.list1 li{
	background: url(../images/charte/bullet1.gif) no-repeat top left;
    background-position:0px 4px;
    color: #000000;
    font-family: arial;
    font-size: 12px;
	text-align:left;
    padding-left:12px;
}
#energie-text{
	height:65px;
}
#energie3-text{
	height:144px;
	margin-top:20px;
	padding-top:40px;
}
#energie3-text a:link, #energie3-text a:visited
{
    color: #ffffff !important;
    text-decoration: underline;
}
#energie3-text a:hover, #energie3-text a:active{
	color: #000000 !important;
    text-decoration: none;
}
/*------------------contact--------------------*/
#left-column3{
	float:left;
	width:267px;
	height:583px;
	text-align:center;

}
#plan{
	float:right;
   
	margin:20px 20px 0 0;
	display:inline;
}
/*------------------footer--------------------*/

#digital-age{
    float:left;
    width: 267px;
    height:79px;
    padding:10px 0 0 42px;
    margin:0px;
}
#digital-age a:link, #digital-age a:visited
{
    color: #147ACA !important;
    text-decoration: none;
}

#digital-age a:hover, #digital-age a:active{
	color: #000000 !important;
    text-decoration: none;
}
#mentions{
    float:left;
    width:509px;
    height:79px;
    padding:10px 42px 0 0;
    text-align: right;
}
#mentions a:link, #mentionse a:visited
{
    color: #147ACA;
    text-decoration: none;
}

#mentions a:hover, #mentions a:active{
	color: #000000;
    text-decoration: underline !important;
}
/* ---| THE END |------------------------- */