/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* NEW STYLE */

strong{
	font-weight:bold;
}

p{
	line-height:15px;
	margin-bottom:6px;
}

.f10{
	font-size:10px;
}

sub{
  vertical-align: sub;
  font-size: smaller;
  line-height: normal;
}

sup{
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

/* BOX */

body{
	background:url(../img/top.gif) top left repeat-x;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#333;
}

#pattern{
	background:url(../img/pattern.gif) top left;
}

#global{
	width:960px;
	margin:7px auto 0;
}

#header{}

#content{
	overflow:hidden;
	margin:0 0 40px;
}

h1#logo a{
	float:left;
	background:url(../img/logo.png) top left no-repeat;
	width:491px;
	height:117px;
	text-indent:-999999px;
	margin:8px 0 0;
}

/* CONTENT */

#content h1{
	color:#669900;
	font-size:22px;
}

#content h2{
	color:#ff9933;
	font-size:18px;
	margin-bottom:3px
}

#content h2.mb-15{
	margin-bottom:15px;
}

#content .fixation h2{
	font-size:14px;
}

#content span.ref{
	display:block;
	font-size:11px;
	color:#999;
	margin-bottom:12px;
	text-transform:uppercase;
	font-weight:bold;
}

#content .col1,
#content .col2{
/*border:1px dotted #eee;*/
}

#content .col1{
	float:left;
	width:250px;
}

#content .col2{
	float:right;
	width:360px;
}

#content .prod{
	padding:12px 0 40px;
	border-bottom:2px solid #ccc;
	overflow:hidden;
}

#content .last{
	border:none;
	padding:12px 0 0;
}

#content .fixation{
	width:175px;
	height:150px;
	padding:12px 0;
	margin:0 32px 0 0;
	float:left;
}

#content .fixation a{
	-moz-box-sizing: border-box;
	display:inline-block;
	border-width:1px;
	border-color:#ccc;
	border-style:solid;		
}

#content .fixation a:hover{
	border-color:#333;
	-webkit-transition: all 0.4s ease-in;
	-moz-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
}

#content p{
	margin:0 0 16px;
	line-height:16px;
	text-align:justify;
}

.f-left{
	float:left;
	margin:0 16px 20px 0;
}

.f-right{
	float:right;
	margin:0 0px 20px 16px;
}

.clear{
	clear:both;
}

.clear-r{
	clear:right;
}

.center{
	text-align:center;
	margin:auto;
}

.tit-bold{
	font-weight:bold;
	display:block;
}

.mb-10{
	margin-bottom:12px;
}

ul.pdf li{
	display:block;
	height:16px;
	background:url(../img/ico.pdf.png) 0 0 no-repeat;
	padding:2px 0 0 20px;
	margin:0 0 4px;
}

ul.pdf li a{
	color:#FF3333;
	text-decoration:none;
	font-weight:bold;
}

ul.pdf li a:hover{
	text-decoration:underline;
}

ul.list li{
	display:block;
	height:16px;
	background:url(../img/ico.arrow.png) 0 0 no-repeat;
	padding:2px 0 0 20px;
	margin:0 0 4px;
}

ul.pdf li a{
	text-decoration:none;
	font-weight:bold;
}

ul.pdf li a:hover{
	text-decoration:underline;
}
	

/* TABLE */

table{
	margin:25px 0;
}

table tr td,
table tr th{
	border:1px solid #999;
	padding:4px 10px;
	text-align:center;
}

table tr th{
	background:#ddd;
	color:#333;
}

table tr td.th2{
	font-weight:bold;
}

/* MENU TOP */

ul#menu-top{
	float:right;
	width:107px;
	height:25px;
	padding:10px 0 0 18px;
	background:url(../img/menu-top.png) top left no-repeat;
}
	
ul#menu-top li{
	float:left;
	margin-right:8px;
	border-right:1px solid #666;
	padding:0 8px 2px 0;
}

ul#menu-top li.last{
	margin:0;
	padding-right:0;
	border:none;
}

ul#menu-top li a{
	color:#666;
	font-size:11px;
	text-decoration:none;
}

ul#menu-top li a:hover{
	color:#999;
	-webkit-transition: color .3s ease-in-out;
	-moz-transition: color .3s ease-in-out;
	-o-transition: color .3s ease-in-out;
	transition: color .3s ease-in-out;	
}

ul#menu-top li a#mt-actif{
	text-decoration:underline;
}

/* MENU */

ul#menu{
	position:relative;
	background:url(../img/menu.png) top left no-repeat;
	width:960px;
	height:41px;
	clear:both;
	margin:0 0 30px 0;
}

ul#menu li{
	float:left;
}

ul#menu li a{
	display:block;
	/*border:1px solid red;*/
	height:40px;
	text-indent:-999999px;
}

/* Default */
ul#menu li#m-couverture a{ width:237px;}
ul#menu li#m-panneaux-isoles a{ width:164px;}
ul#menu li#m-panneaux-tuiles a{width:165px;}
ul#menu li#m-plastiques a{width:127px;}
ul#menu li#m-gouttieres a{width:128px;}
ul#menu li#m-fixations a{width:139px;}

/* Hover */
ul#menu li#m-couverture a:hover{ background:url(../img/menu.png) 0 -82px no-repeat;}
ul#menu li#m-panneaux-isoles a:hover{ background:url(../img/menu.png) -237px -82px no-repeat;}
ul#menu li#m-panneaux-tuiles a:hover{background:url(../img/menu.png) -401px -82px no-repeat;}
ul#menu li#m-plastiques a:hover{background:url(../img/menu.png) -566px -82px no-repeat;}
ul#menu li#m-gouttieres a:hover{background:url(../img/menu.png) -693px -82px no-repeat;}
ul#menu li#m-fixations a:hover{background:url(../img/menu.png) -821px -82px no-repeat;}

/* Actif */
ul#menu li#m-couverture a#m-actif{ background:url(../img/menu.png) 0 -41px no-repeat;}
ul#menu li#m-panneaux-isoles a#m-actif{ background:url(../img/menu.png) -237px -41px no-repeat;}
ul#menu li#m-panneaux-tuiles a#m-actif{background:url(../img/menu.png) -401px -41px no-repeat;}
ul#menu li#m-plastiques a#m-actif{background:url(../img/menu.png) -566px -41px no-repeat;}
ul#menu li#m-gouttieres a#m-actif{background:url(../img/menu.png) -693px -41px no-repeat;}
ul#menu li#m-fixations a#m-actif{background:url(../img/menu.png) -821px -41px no-repeat;}

ul#menu li a#m-actif span{
	display:block;
	background:url(../img/menu-separator.png) top left no-repeat;
	height:40px;
}


/* SS MENU */

ul#menu li ul{
	background:url(../img/ss-menu-top.png) top left no-repeat;
	margin:8px 0 0 0;
	padding:24px 0 12px 0;
	position:absolute;
	width:350px;
	z-index:99;
	-webkit-border-radius: 0 0 8px 8px;
	-moz-border-radius: 0 0 8px 8px;
	border-radius: 0 0 8px 8px;	
	display:none;
}

ul#menu li ul li{
	float: none;
	display: block;
	width:100%;
	line-height:16px;
}

/* Default */
ul#menu li#m-couverture ul li a,
ul#menu li#m-panneaux-isoles ul li a,
ul#menu li#m-panneaux-tuiles ul li a,
ul#menu li#m-plastiques ul li a,
ul#menu li#m-gouttieres ul li a,
ul#menu li#m-fixations ul li a{
	background:none;
	text-indent:0;
	color: #fff;
	padding:6px 24px;
	text-decoration:none;
	font-size:12px;
	width:282px;
	height:auto;
	margin:0;
	font-weight:bold;
}

/* Hover/Actif */
ul#menu li#m-couverture ul li a:hover,
ul#menu li#m-panneaux-isoles ul li a:hover,
ul#menu li#m-panneaux-tuiles ul li a:hover,
ul#menu li#m-plastiques ul li a:hover,
ul#menu li#m-gouttieres ul li a:hover,
ul#menu li#m-fixations ul li a:hover,
ul#menu li#m-couverture ul li a#sm-actif,
ul#menu li#m-panneaux-isoles ul li a#sm-actif,
ul#menu li#m-panneaux-tuiles ul li a#sm-actif,
ul#menu li#m-plastiques ul li a#sm-actif,
ul#menu li#m-gouttieres ul li a#sm-actif,
ul#menu li#m-fixations ul li a#sm-actif
{
	background:none;
	text-decoration:underline;
}

/* SLIDESHOW */

#slideshow-box{
	float:left;
	width:684px;
	height:288px;
	background:url(../img/shadow-slideshow.png) top right no-repeat;
}

#slider{
	position:relative;
	background:#fff url(../img/ajax-loader.gif) center center no-repeat;
	width:670px;
	height:288px;
}

/* COL LEFT */
#left{
	float:left;
	width:630px;
	background:#fff;
	padding:20px;
	margin:2px 0 2px 2px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 0 3px #ccc;
	-moz-box-shadow: 0 0 3px #ccc;
	box-shadow: 0 0 3px #ccc;	
}

/* COL RIGHT  */

#right{
	float:right;
	width:250px;
}

#right h2{
	color:#669900;
	font-weight:bold;
	font-size:14px;
	margin-bottom:8px;
}

#right p{
	line-height:normal;
}

#right a{
	color:#333;
}

#right a:hover{
	text-decoration:underline;
}

#right a#map{
	display:block;
	margin:10px 0 0;
}

/* FOOTER */

#footer{
	background:#fff url(../img/bottom.gif) top left repeat-x;
	clear:both;
	padding:16px 0 0;
	margin-bottom:16px;
}

#footer #footer-content{
	width:960px;
	margin:auto;
	color:#999;
	font-size:11px;
}

#footer #footer-content ul{
	float:right;
}

#footer #footer-content ul li{	
	float:left;
	background:url(../img/menu-top-separator.gif) right 6px no-repeat;
	padding-right:12px;
	margin-left:8px;
}

#footer #footer-content ul li.last{
	background:none;
	padding-right:0;
}

#footer #footer-content ul li a{
	color:#999;
	text-decoration:none;
}

#footer #footer-content ul li a:hover{
	color:#666;
	-webkit-transition: color .3s ease-in-out;
	-moz-transition: color .3s ease-in-out;
	-o-transition: color .3s ease-in-out;
	transition: color .3s ease-in-out;	
}

#footer #footer-content ul li a#mf-actif{
	text-decoration:underline;
	color:#666;
}


/*************************************
==> MEDIA SCREEN
*************************************/

@media screen and (min-height:720px) {
	#content{
		min-height:420px;
	}
}

@media screen and (min-height:820px) {
	#content{
		min-height:530px;
	}
}