/*-----------------------------------------------------------------------------------------------------------------------------------------------------
RESET
-------------------------------------------------------------------------------------------------------------------------------------------------------*/

* {
	margin:0;
	padding:0;
	border: 0;
	font-family: sans-serif;
	font-size: 1em;
	font-weight: normal;
	font-style: normal;
	text-decoration: none; 
}

html, body {
	width:100%;
	height:100%;
}

/*-------------------------------------------------------------------------------------------------------------------------------------------------------
FIN RESET
-------------------------------------------------------------------------------------------------------------------------------------------------------*/

* {
	margin:0;
	padding:0;
	border: 0;
	font-family: sans-serif;
	font-size: 1em;
	font-weight: normal;
	font-style: normal;
	text-decoration: none; 
}

html, body {
	width:100%;
	height:100%;
}


/*-------------------------------------------------------------------------------------------------------------------------------------------------------
GLOBAL
-------------------------------------------------------------------------------------------------------------------------------------------------------*/

body {
	font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #605f5f;
	background: #e8e7e7 url(../images/bg_repeat.jpg) repeat-x;
	margin:0;
	padding:0;
}

#all {
	width: 1000px;
	margin-left: auto;
    margin-right: auto;
}

#footer {
	background: url(../images/bg_repeat_footer.jpg) repeat-x 50% 0%;
	height: 136px;
	clear: both;
	position:relative;
}
	
/*-------------------------------------------------------------------------------------------------------------------------------------------------------
FIN GLOBAL
-------------------------------------------------------------------------------------------------------------------------------------------------------*/


/*-------------------------------------------------------------------------------------------------------------------------------------------------------
HEADER
-------------------------------------------------------------------------------------------------------------------------------------------------------*/
#header {
	width: 987px;
	height: 108px;
	float: left;
}



#bg_logo {
	background: url(../images/bg_logo.jpg) no-repeat;
	width: 368px;
	height: 108px;
	float: left;
}



#logo {
	background: url(../images/logo.jpg) no-repeat;
	width: 229px;
	height: 108px;
	margin-left: auto;
    margin-right: auto;
}



#container_header {
	width: 619px;
	height: 108px;
	float: left;
}

#accroche {
	background: url(../images/accroche.jpg) no-repeat;
	width: 619px;
	height: 23px;
	float: left;
}

.txt_accroche {
	font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #605f5f;
	font-weight: bold;
	line-height: 12px;
	float: left;
	text-align: justify;
	margin-top: 6px;
	padding-left: 42px;
}


#shadow_header {
	background: url(../images/shadow_header.jpg) no-repeat;
	width: 143px;
	height: 44px;
	float: left;
}

#btn_cata {
	background: url(../images/btn_cata.jpg) no-repeat;
	width: 232px;
	height: 44px;
	float: left;
}

#btn_acces_pro {
	background: url(../images/btn_acces_pro.jpg) no-repeat;
	width: 244px;
	height: 44px;
	float: left;
}

.acces_pro {
	font: 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #605f5f;
	font-weight: bold;
	font-variant: small-caps;
	line-height: 53px;	
	margin-left: 22px;
}

.fabricants {
	font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #605f5f;
	font-weight: bold;
	line-height: 16px;
	float: left;
	text-align: justify;
}

a.fabricants {
	font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #605f5f;
	font-weight: bold;
	line-height: 16px;
	float: left;
	text-align: justify;
}


a.fabricants:hover {
	text-decoration: underline;
}

/*-------------------------------------------------------------------------------------------------------------------------------------------------------
FIN HEADER
-------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------------------------------------------------------------------------
MENU
-------------------------------------------------------------------------------------------------------------------------------------------------------*/

#menu {
	width: 619px;
	height: 41px;
	float: left;
	font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #fff;
	font-weight: bold;
	font-variant:small-caps;
}

#menu_left {
	background: url(../images/menu_left.jpg) no-repeat;
	width: 40px;
	height: 41px;
	float: left;
}

#menu_right {
	background: url(../images/menu_right.jpg) no-repeat;
	width: 8px;
	height: 41px;
	float: left;
}

#nav {
	background: url(../images/nav_main.jpg) no-repeat;
	width: 571px;
	height: 41px;
	float: left;
}

#nav li {
	float: left;
	list-style-type : none;
}

#nav li a {
	font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #fff;
	font-weight: bold;
	position: relative;
	top: 0;
	margin: 0;
	padding: 0;
	display: block;
	height: 41px;
	background: url(../images/nav_main.jpg) no-repeat;
	overflow: hidden;
	text-align: center;
	line-height: 41px;
	font-variant:small-caps;
}

/*up state*/

li#presentation a {
	left: 0;
	width: 87px;
	background-position: 0 0;
}

li#electromenager a {
	left: 0px;
	width: 104px;
	background-position: -87px 0;
}

li#pem a {
	left: 0px;
	width: 49px;
	background-position: -191px 0;
}

li#image_son a {
	left: 0px;
	width: 85px;
	background-position: -240px 0;
}

li#chauffage a {
	left: 0px;
	width: 149px;
	background-position: -325px 0;
}

li#contact a {
	left: 0px;
	width: 97px;
	background-position: -474px 0;
}


/*hover state*/
li#presentation a:hover {
	background-position: 0 -41px;
	color: #4e2b08;
}

li#electromenager a:hover {
	background-position: -87px -41px;
	color: #4e2b08;
}

li#pem a:hover {
	background-position: -191px -41px;
	color: #4e2b08;
}

li#image_son a:hover {
	background-position: -240px -41px;
	color: #4e2b08;
}

li#chauffage a:hover {
	background-position: -325px -41px;
	color: #4e2b08;
}

li#contact a:hover {
	background-position: -474px -41px;
	color: #4e2b08;
}

/*current state*/
#body_presentation li#presentation a {
	background-position: 0 -41px;
	color: #4e2b08;
}

#body_electromenager li#electromenager a {
	background-position: -87px -41px;
	color: #4e2b08;
}

#body_pem li#pem a {
	background-position: -191px -41px;
	color: #4e2b08;
}

#body_image_son li#image_son a {
	background-position: -240px -41px;
	color: #4e2b08;
}

#body_chauffage li#chauffage a {
	background-position: -325px -41px;
	color: #4e2b08;
}

#body_contact li#contact a {
	background-position: -474px -41px;
	color: #4e2b08;;
}



/*-------------------------------------------------------------------------------------------------------------------------------------------------------
FIN MENU
-------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------------------------------------------------------------------------
CONTENT
-------------------------------------------------------------------------------------------------------------------------------------------------------*/
#middle_content {
	background: url(../images/middle_content.jpg) no-repeat;
	width: 987px;
	height: 163px;
	float: left;
	margin-top: -10px;
}

#content {
	background: url(../images/content.jpg) no-repeat;
	width: 987px;
	height: 100%;
	float: left;
	margin-top: 0px;
}

#content_contact {
	background: url(../images/content_contact.jpg) no-repeat;
	width: 987px;
	height: 100%;
	float: left;
	margin-top: -10px;
}

#txt_middle {
	width: 430px;
	height: 163px;
	padding: 9px 0 0 50px;
	float: left;
}

#txt_content {
	width: 450px;
	height: 163px;
	padding: 23px 0 0 29px;
	float: left;
}

h3 {
	font: 30px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #605f5f;
	font-weight:bolder;
	font-variant:small-caps;
	line-height: 20px;
	margin-top: 2px;
}


h2 {
	font: 21px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #605f5f;
	font-weight:bolder;
	font-variant:small-caps;
	line-height: 20px;
	margin-top: 2px;
}

.txt_middle {
	font: 11px "Helvetica", Arial, sans-serif;
	color: #605f5f;
	font-weight: normal;
	line-height: 15px;
	float: left;
	text-align: justify;
	margin-top: 0px;
}

.b {
	color: #605f5f;
	font-weight: bold;
}

.txt_content {
	font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #605f5f;
	font-weight: normal;
	line-height: 16px;
	float: left;
	text-align: justify;
}

#photo_middle {
	background: url(../images/photo_middle.jpg) no-repeat;
	width: 450px;
	height: 163px;
	float: left;
	margin-left: 15px;
}

#photo_middle_pem {
	background: url(../images/photo_pem2.jpg) no-repeat;
	width: 450px;
	height: 163px;
	float: left;
	margin-left: 15px;
}


#photo_middle_image {
	background: url(../images/photo_image2.jpg) no-repeat;
	width: 450px;
	height: 163px;
	float: left;
	margin-left: 15px;
}

#photo_middle_son {
	background: url(../images/photo_son2.jpg) no-repeat;
	width: 450px;
	height: 163px;
	float: left;
	margin-left: 15px;
}

#photo_middle_chauffage {
	background: url(../images/photo_chauffage2.jpg) no-repeat;
	width: 450px;
	height: 163px;
	float: left;
	margin-left: 15px;
}

.photo_content {
	
	width: 457px;
	height: 259px;
	float: left;
	margin: 15px 0 0 23px;
}

#box_footer {
	width: 987px;
	height: 90px;
	float: left;
	margin: 13px 0 0 95px;
}

#box{
	width: 157px;
	height: 80px;
	text-align: center;
	float: left;
	padding-left: 2px;
	margin-top: 3px;
}

.title_footer {
	font: 13px "Helvetica", Arial, sans-serif;
	color: #605f5f;
	font-weight:bolder;
	font-variant:small-caps;
	letter-spacing: 0px;
}

.detail {
	font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #605f5f;
	font-weight : bold;
	line-height: 13px;
}

#top_contact {
	background: url(../images/top_contact.jpg) no-repeat;
	width: 987px;
	height: 24px;
	float: left;
	margin-top: -10px;
}


#bottom_contact {
	background: url(../images/footer_contact.jpg) no-repeat;
	width: 987px;
	height: 47px;
	float: left;
}

#formulaire {
	background: url(../images/formulaire.jpg) no-repeat;
	width: 342px;
	height: 474px;
	float: left;
	margin-left: 50px;
}

#map {
	background: url(../images/map.jpg) no-repeat;
	width: 549px;
	height: 369px;
	margin-left: auto;
    margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

/*-------------------------------------------------------------------------------------------------------------------------------------------------------
FIN CONTENT
-------------------------------------------------------------------------------------------------------------------------------------------------------*/


/*-------------------------------------------------------------------------------------------------------------------------------------------------------
FOOTER
-------------------------------------------------------------------------------------------------------------------------------------------------------*/

#footer_suberville {
	background: url(../images/footer.jpg) no-repeat;
	width: 987px;
	height: 132px;
	margin-left: auto;
    margin-right: auto;
}

.copyright {
	font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #fff;
	font-weight: bold;
	line-height: 14px;
	float: left;
	margin-top: -14px;
	padding-left: 10px;
}	

.adress {
	font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #fff;
	font-weight: bold;
	line-height: 14px;
	float: right;
	margin-top: -14px;
	padding-left: 10px;
}	
/*-------------------------------------------------------------------------------------------------------------------------------------------------------
FIN FOOTER
-------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------------------------------------------------------------------------
TYPO
-------------------------------------------------------------------------------------------------------------------------------------------------------*/


/*-------------------------------------------------------------------------------------------------------------------------------------------------------
FIN TYPO
-------------------------------------------------------------------------------------------------------------------------------------------------------*/







/*-------------------------------------------------------------------------------------------------------------------------------------------------------
CONTENT
-------------------------------------------------------------------------------------------------------------------------------------------------------*/

	
/*-------------------------------------------------------------------------------------------------------------------------------------------------------
FIN CONTENT
-------------------------------------------------------------------------------------------------------------------------------------------------------*/

#border {
	width: 940px;
	height: 302px;
	position: relative;
	float: left;
	left: 0px;
	top: -302px;
}

/* Easy Slider */

img{border:none;}
	
			
    /* image replacement */
        .graphic, #prevBtn, #nextBtn{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */

#album {
	background: url(../images/bg_slider.jpg) no-repeat;
	width:987px; 
	height:322px;  
	position:relative;
	float: left;
	left: 0px;
	padding: 10px 0 0 23px;
}


	#slider{}	
	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:940px;
		height:302px;
		overflow:hidden; 
		}	
								

/* // Easy Slider */

/* ----------------IMAGE SLIDER------------- */
#SlideItMoo_outer {  
	width:916px; 
	height: 295px;
	margin:0px auto 10px; 
	background:transparent; 
	display:block; 
	position:relative; 
	padding:10px 10px 0px;
}
/* create custom forward-backward buttons for this container */
#SlideItMoo_outer .SlideItMoo_forward,
#SlideItMoo_outer .SlideItMoo_back{ 
	display:block; 
	position:absolute; 
	cursor:pointer; 
	width:31px; 
	height:295px; 
	bottom:0px; 
	right:0px; 
	background:url(../images/slideitmoo_forward.jpg) no-repeat center;  
}
#SlideItMoo_outer .SlideItMoo_back { 
	left:0px; 
	background:url(../images/slideitmoo_back.jpg) no-repeat center;  
}

/* the width is set to show the number of thumbnails that will be visible */
#SlideItMoo_inner{ 
	position:relative ; 
	overflow:hidden ; 
	width:940px ; /* set a display width to make the slider look good in case js is disabled */
	height: 295px;
	margin:0px 0 0 110px;
	padding:10px 0px 10px;
}
/* the thumbnails container; set a width on it so everything will be fine */
#SlideItMoo_items { 
	display:block; 
	position:relative; 
}
/* single element design */
#SlideItMoo_items div.SlideItMoo_element { 
	display:block; 
	position:relative; 
	float:left; 
	margin:0px 15px 0px; 
	font-size:12px; 
	width:138px; 
	text-align:center; 
	color:#8f060a;
}
#SlideItMoo_items a { padding:0px; margin:3px 0px 3px; clear:both; display:block; background:transparent; padding:2px; color:#605f5f; font-weight:bold; text-decoration: none;}

#SlideItMoo_items a:hover { padding:0px; margin:3px 0px 3px; clear:both; display:block; background:transparent; padding:2px; color:#605f5f; font-weight:bold; text-decoration: underline;}

#SlideItMoo_items a img{ border:3px solid #605f5f;  }

/* --------------------BANNER ROTATOR--------------------- */
#SlideItMoo_banners_outer { 
	display:block; 
	position:relative; 
	width:557px; 
	height:295px; 
	margin:0px auto 0px; 
	border:1px #CCCCCC solid; 
}
#SlideItMoo_banners_inner { 
	position:relative ; 
	overflow:hidden ; 
	width:557px ; 
	height:134px ; 
	margin:0px auto 0px;  
}
#SlideItMoo_banners_items { 
	white-space:nowrap; 
	display:block; 
	position:relative; 
}
#SlideItMoo_banners_items a img { 
	border:none; 
}

/* -------------------INFO BANNERS-------------------- */
#SlideItMoo_info_outer { 
	display:block; 
	position:relative; 
	width:557px; 
	height:190px; 
	margin:0px auto 0px; 
	border:1px #CCCCCC solid; 
}
#SlideItMoo_info_inner { 
	position:relative ; 
	overflow:hidden ; 
	width:557px ; 
	height:190px ; 
	margin:0px auto 0px;  
}
#SlideItMoo_info_items { 
	display:block; 
	position:relative; 
}

#SlideItMoo_info_items .info_item{
	display:block; 
	position:relative;
	width:547px;
	height:200px;
	float:left;
	background:#E8E8E8;
	text-align:justify;
	padding:5px;
	border-right:5px #333333 solid;
}

#SlideItMoo_info_items .info_item a img{
	border:none;
}

#SlideItMoo_info_items .info_item img {
	float:left;	
	margin-right:15px;
}

#SlideItMoo_info_items .info_item h1{
	background:none;
	color:#006699;
	text-align:right;
	margin:5px 0px 10px;
}
/* ----------------END IMAGE SLIDER------------- */