html{font-size: 100%} /* Fix bug d'IE 6-7 */

html, body, form, fieldset, dl, dd{
	margin:0;
	padding:0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

p, select, input, caption, label, tr, td, table, textarea{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:1em;
	text-align:left;
	line-height:1.5em;
}

h1, h2, h3, h4, h5, h6, span{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	line-height:1em;
	margin:0;
}

img, fieldset, table{border:none}

form, p, ul, li, fieldset, input{
   margin:0;
   padding:0;
}

ul, li{list-style:none}

ol li{	list-style:decimal inside}

address{font-style: normal}

img{vertical-align:middle}
	
/* CLEAR */

.clear{
	clear:both;
	display:block;
	height:0px;
	visibility:hidden;
}

/* new clearfix */
.clearfix:after {
	visibility:hidden;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
	height:0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/* COMMON
--------------------------------------------------------------------------------------------------------------------------------------*/

body{
	color:#6d6c6c;
	font-size:62.5%;	/* 1em = 10px */
	background-color:#f3f3f3;
}

.txt-hidden{
	position:absolute;
	left:-9999em;
}

#wrapper{
	width:992px;
	margin:auto;
}

a{color:#585757;text-decoration:none}
a:hover{text-decoration:underline}

/********** HTML5 **********/

header, section, footer,
aside, nav, article, figure{
	display: block;
}

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

#header{
	margin:20px 0 0;
	position:relative;
	background:url(img/spacer_header.png) right 86px no-repeat;
}

/********** LOGO **********/

#logo{
	float:left;
}

#logo a{
	display:block;
	width:78px;
	height:96px;
	background:url(img/et_logo.png) left top no-repeat;
}

/********** MENU **********/

#header nav{
	float:right;
	margin-top:62px;
}

#menu{
	margin-bottom:10px;
}

#menu li{
	float:left;
	font-size:1.3em;
	margin-left:40px;
}

#menu a{
	text-decoration:none;
	outline:0;
}

#menu-hover{
	height:3px;
	width:30px;
	overflow:hidden;
	background-color:#000;
	position:absolute;
	left:250px;
	top:86px;
	display:none;
}

#menu .active a, .color a{color:#8d8d8d}
.color-blue #menu .active a, .color-blue .color a{color:#29a9d8}
.color-green #menu .active a, .color-green .color a{color:#369417}

/* Colors */

#color-picker{
	float:right;
}

#color-picker li{
	float:left;
}

#color-picker .btn{
	display:block;
	width:11px;
	height:11px;
	cursor:pointer;
	margin-left:10px;
	background:url(img/btns_colors.png) left top no-repeat;
}

#color-picker .active #red{background-position:left -11px}
#color-picker .active #blue{background-position:left -22px}
#color-picker .active #green{background-position:left -33px}

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

#content{
	min-height:485px;
	padding:30px 0 0;
	position:relative;
}

#illu{
	height:400px;
	width:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	background:url(img/illu_rouge.jpg) left top no-repeat;
}

.color-blue #illu{background-image:url(img/illu_bleu.jpg)}
.color-green #illu{background-image:url(img/illu_vert.jpg)}

/********** CAROUSEL **********/

#content .project{
	left:-9999em;
	position:absolute;
	z-index:2;
	top:30px;
	width:100%;
	background-color:#f3f3f3;
}

#content .jcarousel-container{
	padding-top:2px;
	height:399px;
	background:url(img/bg_carousel.png) center top no-repeat;
}

#content .jcarousel-clip{
	width:883px;
	height:401px;
	overflow:hidden;
	margin:0 auto;
	position:relative;
	z-index:10;
}

#content .jcarousel-item{
	width:883px;
	height:401px;
	overflow:hidden;
	text-align:center;
}

#content .jcarousel-prev{
	width:47px;
	height:152px;
	position:absolute;
	left:0px;
	top:135px;
	z-index:20;
	background:url(img/bg_nav.png) left top no-repeat;
}

#content .jcarousel-next{
	width:47px;
	height:152px;
	position:absolute;
	right:0px;
	top:135px;
	z-index:20;
	background:url(img/bg_nav.png) right top no-repeat;
}

#content .jcarousel-next-disabled, #content .jcarousel-prev-disabled{
	display:none !important;
}

#content .jcarousel-prev div, #content .jcarousel-next div{
	width:100%;
	height:100%;
	cursor:pointer;
	display:none;
	background:url(img/bg_nav.png) left top no-repeat;
}

/* Infos */

#content .project .infos{
	width:887px;
	margin:20px auto 0;
}

#content .project .titre{
	width:435px;
	float:left;
}

#content .project .titre small{
	float:left;
	font-style:italic;
	color:#b2b2b2;
}

#content .project .titre a{
	font-style:italic;
	float:right;
	color:#de0e3a;
}
.color-blue #content .project .titre a{color:#29a9d8}
.color-green #content .project .titre a{color:#369417}

#content .project h2{
	padding-bottom:5px;
	margin-bottom:5px;
	font-size:1.1em;
	color:#333;
	line-height:1em;
	font-size:1.1em;
	font-weight:normal;
	border-bottom:1px solid #d0d0d0;
}

#content .project p{
	float:right;
	margin-top:12px;
	width:435px;
	font-size:1.2em;
	line-height:1.25em;
	text-align:justify;
}

/* THUMBS
--------------------------------------------------------------------------------------------------------------------------------------*/

#thumbs{
	padding:30px 0;
	margin-top:-110px;
	border-bottom:1px solid #d0d0d0;
	border-top:1px solid #d0d0d0;
	background:url(img/bg_thumbs.png) left 73px no-repeat;
}

#thumbs li{
	float:left;
	width:180px;
	height:124px;
	overflow:hidden;
	margin-left:23px;
	margin-bottom:21px;
}

#thumbs .first{
	margin-left:0;
}

#thumbs .line{
	margin-bottom:0;
}

#thumbs a{
	display:block;
	position:relative;
	width:180px;
	height:124px;
	font-size:1.1em;
	text-decoration:none;
}

#thumbs img{
	margin-top:-124px;
}

#thumbs span{
	display:block;
	padding:10px 0 0 30px;
	height:24px;
	width:150px;
	position:absolute;
	left:0;
	top:124px;
	color:#fff;
	text-shadow:#333 -1px -1px;
	background:url(img/btn_thumb.jpg) left top no-repeat;
}

.color-blue #thumbs span{background-position:left -68px}
.color-green #thumbs span{background-position:left -34px}

#thumbs .overlay{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:url(img/thumb_overlay.png) left top no-repeat;
}

/* ABOUT
--------------------------------------------------------------------------------------------------------------------------------------*/

#about{
	min-height:362px;
	display:none;
	position:absolute;
	left:0;
	top:0;
	padding:115px 0 0 500px;
	background:url(img/bg_about.jpg) left top no-repeat;
}

#about h2, #contact h2{
	color:#333232;
	font-size:1.1em;
	font-weight:normal;
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:1px solid #d0d0d0;
}

#about p{
	color:#6d6c6c;
	margin-top:20px;
	font-size:1.1em;
	line-height:1.75em;
}

#about .first{
	margin-top:0;
}

#about .footer{
	margin-top:10px;
	padding-top:5px;
	text-align:right;
	border-top:1px solid #d0d0d0;
}

#about .footer img{
	margin-left:2px;
}

/* CONTACT
--------------------------------------------------------------------------------------------------------------------------------------*/

#contact{
	display:none;
	position:absolute;
	left:0;
	top:30px;
}

/********** FORM **********/

#contact form{
	float:left;
	width:412px;
	margin:0 40px 0 150px;
}

#contact form h2{
	width:385px;
}

#contact label{
	color:#6d6c6c;
	width:45px;
	margin-right:5px;
	display:inline-block;
	vertical-align:middle;
}

#contact label.error{
	width:14px;
	height:15px;
	text-indent:-9999em;
	background:url(img/ico_error.png) left top no-repeat;
	margin:0 0 0 5px;
}

#contact input[type=text], #contact textarea{
	padding:10px 5px;
	width:320px;
	color:#6d6c6c;
	font-size:1.1em;
	vertical-align:middle;
	border:1px solid #e2e2e2;
	border-top-color:#cdcdcd;
	border-bottom-color:#fff;
	background-color:#ededed;
}

#contact textarea{
	height:100px;
	line-height:1.75em;
	vertical-align:top;
}

#contact .list-inputs{
	margin-top:18px;
}

#contact .list-inputs li{
	margin-bottom:15px;
}

#contact .submit{
	text-align:right;
	padding-right:25px;
}

#contact .submit input{
	height:25px;
	width:99px;
	border:0;
	text-indent:-9999em;
	background:url(img/btn_envoyer.png) left top no-repeat;
}

.color-blue #contact .submit input{background-position:left -25px}
.color-green #contact .submit input{background-position:left -50px}

/********** ADDRESS**********/

#contact .address{
	float:left;
	width:390px;
}

#contact .address address{
	line-height:1.75em;
}

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

#footer{
	color:#b2b2b2;
	margin-top:3px;
	text-align:right;
	padding-bottom:20px;
}

#footer a{
	color:#b2b2b2;
}

#footer img{
	margin:0 1px;
}