@import url("reset.css");

/********** UTILS **********/
/*
	FONT SIZE (em)
		10px: 62.5%
		11px: 69% (68.75)
		12px: 75%
		16px: 100%
	
	PNG > IE6 (info: le chemin de l'image se fait part rapport à la page et non la css)
		background:none;
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/image.png')
	
	INSTRUCTION CONDITIONNELLE
	<!--[if IE 7]><style type="text/css">#div{}</style><![endif]-->
	
	FAMILLES DE POLICES
	font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
	font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-family: Georgia, "DejaVu Serif", "Bitstream Vera Serif", Norasi, serif;
	
*/
/* COMMON
/*------------------------------------------------------------------------------------------------------------------------------------*/

body{
	color:#d39b76;
	font-size:68.75%;	/* 1em = 11px */
	background:#000 url(../img/common/bg_body.jpg) center top no-repeat;
}

a{
	color:#d39b76;
	text-decoration:none;
}

a:hover{
	text-decoration:underline;
}

#page{
	width:985px;
	margin:auto;
	position:relative;
	overflow:hidden;
	padding-bottom:50px;
	min-height:700px;
	height:auto !important;
	height:700px;
}

#page.pageHome{
	padding:0;
}

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

#header{
	margin-left:72px;
	overflow:hidden;
	height:80px;
	top:35px;
	position:absolute;
}

#header .logo{
	display:inline;
	float:left;
	margin-right:45px;
}

#header .logo img{
	display:block;
}

#header .logo span{
	position:absolute;
	left:-9999em;
}

#header ul{
	float:left;
	height:55px;
	margin-top:22px;
}

#header li{
	float:left;
	height:100%;
}

#header li a{
	display:block;
	float:left;
	width:86px;
	height:100%;
	color:#bfafa3;
	font-size:1.17em;
	text-decoration:none;
	text-align:center;
	text-transform:uppercase;
}

#header li a:hover{
	color:#fff;
}

#header li.active a{
	color:#fff;
	background:url(../img/common/menu_active.png) center bottom no-repeat;
}

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

#content{
	
}

/********** CADRE **********/

#cadre{
	height:379px;
	margin-top:96px;
	padding:36px 42px 0 43px;
	background:url(../img/common/bg_cadre.jpg) top left no-repeat;
}

#cadre .stdInner{
	height:342px;
	width:900px;
	background:url(../img/common/bg_std_cadre.jpg) top left no-repeat;
}

/* Clients */

#cadre .innerClients .content{
	padding:20px 10px 0 80px;
	color:#2f0201;
}

#cadre .innerClients h2{
	font-size:1.09em;
	letter-spacing:-1px;
	margin-bottom:25px;
}

#cadre .innerClients ul{
	overflow:hidden;
	width:100%;
}

#cadre .innerClients li{
	width:200px;
	float:left;
	margin-bottom:10px;
	font-size:1.09em;
	text-transform:uppercase;
}

/* Contact */

#cadre .innerContact{
	position:relative;
	background:url(../img/common/bg_cadre_contact.png) top left no-repeat;
}

#cadre .innerContact .content{
	padding:75px 0 0 80px;
}

#cadre .innerContact h2{
	color:#590301;
	font-size:1.5em;
	letter-spacing:-1px;
	margin-bottom:20px;
}

#cadre .innerContact p{
	color:#000;
	font-size:1.25em;
	letter-spacing:-1px;
	margin-bottom:20px;
}

#cadre .innerContact .plan{
	color:#590301;
	padding-left:15px;
	background:url(../img/common/btn_plan.png) left center no-repeat;
}

#cadre .innerContact p span{
	color:#590301;
}

#cadre .innerContact #contactMap{
	position:absolute;
	top:0px;
	right:0px;
	width:608px;
	height:342px;
}

/* Studio et apporteurs */

#cadre .innerStudio{
	background:url(../img/common/bg_cadre_studio.jpg) top left no-repeat;
}

#cadre .innerApp{
	background:url(../img/common/bg_cadre_apporteur.jpg) top left no-repeat;
}

#cadre .innerStudio .content, #cadre .innerApp .content{
	padding:45px 0 0 50px;
	width:485px;
}

#cadre .innerStudio h2, #cadre .innerApp h2{
	font-size:1.09em;
	color:#000;
	letter-spacing:-1px;
	margin-bottom:25px;
}

#cadre .innerStudio p, #cadre .innerApp p{
	color:#1b0101;
	font-size:1.18em;
	line-height:1.2em;
	margin-bottom:20px;
	letter-spacing:-1px;
}

/********** TXT CONTENT **********/

#txtContent{
	min-height:630px;
	height:auto !important;
	height:630px;/*Needs to match the min height pixels above*/
	margin-top:160px;
}

#txtContent p{
	margin-bottom:15px;
}

#txtContent h1{
	color:#fff;
	font-size:1.17em;
	margin-bottom:30px;
	font-weight:normal;
	text-transform:uppercase;
}

#txtContent h2{
	color:#fff;
	font-size:1.17em;
	margin-bottom:15px;
	margin-top:25px;
}

#txtContent h2 a{
	color:#fff;
}

#txtContent span{
	color:#fff;
}

#txtContent .partenaires{
	margin-bottom:30px;
}

#txtContent .partenaires dt{
	color:#fbceb0;
	margin-bottom:10px;
}

#txtContent .partenaires dd{
	margin:0 0 20px;
	padding:0;
}

/* 404 */

#txtContent h2.page404{
	font-size:1.64em;
	color:#d39b76;
}

#txtContent p.page404{
	color:#fff;
	font-size:1.17em;
}

/********** INNER **********/

#inner{
	width:900px;
	overflow:hidden;
	margin:-16px auto 50px;
}

#inner p{
	margin-bottom:20px;
}

#inner .box{
	padding-top:20px;
}

#inner .box strong{
	color:#fbceb0;
}

#inner h1{
	color:#fff;
	font-size:1.17em;
    line-height:1.4em;
	margin-bottom:20px;
	text-transform:uppercase;
}

/* Box contact */

#inner .boxContact{
	width:224px;
	float:left;
	height:250px;
	background:url(../img/common/inner_border.png) right top no-repeat;
}

#inner .boxContact ul{
	margin-bottom:25px;
}

#inner .boxContact li{
	margin-bottom:3px;
}

#inner .boxContact li span, #inner .boxContact li a{
	color:#fff;
}

/* Box Pres */

#inner .boxPres{
	width:375px;
	float:left;
	padding:20px 15px 0;
	background:url(../img/common/bg_pres.png) left -10px repeat-x;
}

#inner .boxPres p{
	text-align:justify;
}

/* Box Actu */

#inner .boxActu{
	width:255px;
	height:250px;
	float:left;
	padding-left:15px;
	background:url(../img/common/inner_border.png) left top no-repeat;
}

#inner .boxActu p{
	margin-bottom:2px;
}

#inner .boxActu a{
	color:#fbceb0;
	text-decoration:underline;
}

#inner .boxActu a:hover{
	text-decoration:none;
}

#inner .boxActu h4{
	font-size:1em;
	color:#fbceb0;
	margin-bottom:3px;
}

#inner .boxActu li{
	width:100%;
	margin-bottom:10px;
	overflow:hidden;
}

#inner .boxActu .visu{
	display:block;
	float:left;
	width:78px;
	padding:4px;
	height:61px;
	margin-right:8px;
	background:url(../img/common/bg_bloc_actu.png) top left no-repeat;
}

#inner .boxActu img{
	display:block;
}

/* Box Portfolio def */

#inner .boxPortDef{
	background:url(../img/common/inner_border.png) right top no-repeat;
	float:left;
	width:280px;
	padding-right:10px;
}

#inner .boxPortDef p{
	text-align:justify;
}

/* Box Portfolio */

#inner.innerPort{
	width:940px;
}

#inner .boxPort{
	width:630px;
	float:left;
	padding:20px 0 0 20px;
}

#inner .boxPort ul{
	width:100%;
	overflow:hidden;
}

#inner .boxPort li{
	float:left;
	font-weight:bold;
	color:#fbceb0;
	width:126px;
	margin-bottom:12px;
}

#inner .boxPort a{
	display:block;
	width:92px;
	padding:4px;
	height:73px;
	background:url(../img/common/bg_thumb_port.png) top left no-repeat;
}

#inner .boxPort li span{
	display:block;
	padding-left:4px;
	height:32px;
}

/* Box Contact Full */

#inner.innerContact{
	margin-top:0px;
	padding-top:4px;
}

#inner.innerContact h1{
	margin-bottom:14px;
}

#inner.innerContact .contactLeft{
	float:left;
	width:250px;
	margin-right:40px;
	display:inline;
	margin-top:15px;
}

#inner.innerContact .contactLeft .envoi{
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
}

#inner.innerContact .contactLeft .erreur{
	color:#770806;
	font-size:1.2em;
	font-weight:bold;
}

#inner.innerContact form{
	width:550px;
	float:left;
	overflow:hidden;
}

#inner.innerContact fieldset{
	width:275px;
	float:left;
}

#inner.innerContact label{
	font-size:0.9em;
	color:#fff;
	display:block;
	margin-bottom:2px;
}

#inner.innerContact textarea{
	display:block;
	width:267px;
	height:100px;
	padding:2px 3px;
	margin-bottom:10px;
	background-color:#f5e6db;
	border:1px solid #000;
}

#inner.innerContact .infos input{
	display:block;
	width:224px;
	height:15px;
	padding:2px 3px;
	margin-bottom:5px;
	background-color:#f5e6db;
	border:1px solid #000;
}

#inner.innerContact .btnEnvoyer{
	width:100%;
	overflow:hidden;
}

#inner.innerContact .envoi{
	font-weight:bold;
}

#inner.innerContact .btnEnvoyer span{
	display:block;
	float:left;
	padding-top:2px;
	color:#770806;
	font-size:0.9em;
}

#inner.innerContact .btnEnvoyer input{
	float:right;
}

/* PORTFOLIO
/*------------------------------------------------------------------------------------------------------------------------------------*/

#itemContainer{
	width:100%;
	height:342px;
	overflow:hidden;
	position:relative;
}

#itemContainer.fonce{
	color:#000;
}

#itemContainer.clair{
	color:#fff;
}

#itemContainer .number{
	position:absolute;
	left:20px;
	bottom:10px;
	font-size:0.9em;
	z-index:10;
}

#itemContainer .desc{
	position:absolute;
	right:20px;
	bottom:10px;
	font-size:0.9em;
	text-align:right;
	z-index:10;
}

#itemContainer .elem{
	width:100%;
	height:100%;
}

#itemContainer .btnControl{
	background:url(../img/common/blank.png) top left repeat;
}

#itemContainer .prev{
	width:268px;
	height:80%;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1000;
	cursor:pointer;
}

#itemContainer .prev .visu{
	width:102px;
	height:145px;
	display:none;
	margin:95px 0 0 50px;
	background:url(../img/common/btn_prec.png) center center no-repeat;
}

#itemContainer .playAndPause{
	width:360px;
	height:80%;
	position:absolute;
	left:268px;
	z-index:1000;
	top:0px;
	cursor:pointer;
}

#itemContainer .playAndPause .visu{
	width:101px;
	height:158px;
	display:none;
	margin:89px auto 0;
}

#itemContainer .play .visu{
	background:url(../img/common/btn_play.png) center center no-repeat;
}

#itemContainer .pause .visu{
	background:url(../img/common/btn_pause.png) center center no-repeat;
}

#itemContainer .next{
	width:272px;
	height:80%;
	position:absolute;
	left:628px;
	z-index:1000;
	top:0px;
	cursor:pointer;
}

#itemContainer .next .visu{
	width:102px;
	height:145px;
	display:none;
	margin:95px 0 0 120px;
	background:url(../img/common/btn_suiv.png) center center no-repeat;
}

/* Item */

#itemContainer #itemFirst{
	display:block;
}

#itemContainer .item{
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	display:none;
}

#itemContainer .visu{
	display:block;
}

#itemContainer .itemDesc{
	position:absolute;
	left:-9999em;
}

#itemContainer .btnCreation{
	width:103px;
	height:24px;
	display:block;
	float:right;
	margin-bottom:3px;
	background:url(../img/common/btn_voir_creation.png) top left no-repeat;
}

#itemContainer .btnCreation:hover{
	background-position:left -24px;
}

#itemContainer .btnCreation span{
	position:absolute;
	left:-9999em;
}

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

#minFooter{
	color:#770806;
	font-size:0.9em;
	width:910px;
	margin:0 auto;
	overflow:hidden;
}

#minFooter span{
	float:left;
}

#minFooter ul{
	float:right;
}

#minFooter li{
	display:inline;
	margin-left:20px;
}

#minFooter a{
	color:#770806;
}

#footer{
	margin-top:20px;
	padding-bottom:35px;
	background:#260101 url(../img/common/bg_footer.png) top left repeat-x;
}

#footer .content{
	width:985px;
	margin:0 auto;
	overflow:hidden;
	padding-bottom:30px;
}

#footer h3{
	text-transform:uppercase;
	font-size:1.17em;
	margin-bottom:15px;
}

/* Coord */

#footer .coord{
	padding:25px 15px 0;
	width:257px;
	float:left;
	background:#260101 url(../img/common/bg_coord.png) top left repeat-x;
}

#footer .coord h3{
	padding-left:31px;
}

#footer .coord p, #footer .coord address{
	font-size:0.82em;
	padding-left:31px;
	margin-bottom:10px;
}

#footer .coord .logo{
	height:18px;
	padding-top:4px;
	color:#e2433e;
	text-transform:uppercase;
	background:url(../img/common/logo.png) top left no-repeat;
}

#footer .coord .logo span{
	color:#ff7e65;
}

/* Portfolio */

#footer .portfolio{
	padding:25px 0 0 15px;
	width:680px;
	float:left;
}

#footer .portfolio h3{
	margin-bottom:19px;
}

#footer .portfolio ul{
	width:100%;
	overflow:hidden;
}

#footer .portfolio h4{
	font-size:0.82em;
	margin-bottom:15px;
	color:#e2433e;
	text-transform:uppercase;
}

#footer .portfolio h4 a{
	color:#e2433e;
	text-decoration:none;
}

#footer .portfolio h4 a:hover{
	color:#ff7e65;
}

#footer .portfolio li{
	margin-left:23px;
	float:left;
	width:95px;
}

#footer .portfolio .min{
	width:80px;
}

#footer .portfolio .pack{
	width:62px;
}

#footer .portfolio .full{
	width:130px;
}

#footer .portfolio .first{
	margin:0;
}

#footer .portfolio .last{
	margin-left:3px;
}

#footer .portfolio li li{
	margin:0;
	float:none;
	font-size:0.82em;
}

#footer .portfolio li li a{
	text-decoration:none;
}

#footer .portfolio li li a:hover{
	color:#fff;
}