@charset "UTF-8";
/* CSS Document */

body{
	margin-top:0px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	font-family:Arial, Helvetica, sans-serif;}

/* AGENCE */

.agence{
	background-color:#339933;
	color:#339933;
	}
	
img.agence{
	position:relative;}
	
.service{
	background-color:#6f5ead;
	color:#6f5ead;
	}
	
.realisation{
	background-color:#1eacb9;
	color:#1eacb9;
	}
	
.contact{
	background-color:#cc3333;
	color:#cc3333;}

#header_wide{
	float:left;
	background-color:#fff;
	background-image:url(../img/headerwide_bg.png);
	min-height:171px;
	height:171px;
	max-height:171px;
	width:100%;
	}

#header{
	margin:auto;
	background-image:url(../img/header_bg4.png);
	background-repeat:no-repeat;
	background-position:center;
	min-height:171px;
	height:171px;
	max-height:171px;
	width:1014px;
}
	
#link_accueil a{
	float:left;
	margin-top:15px;
	}
	
	ul#topnav {
	margin: 0;
	margin-left:50px;
	margin-top:8px;
	padding: 0;
	list-style: none;
	float: left;
	font-size: 1.1em;
	font-size:15px;
}
ul#topnav li{
	margin: 0;
	margin-top:6px;
	padding: 0;
	overflow: hidden;  /*--Important - Masking out the hover state by default--*/
	float: left;
	height:26px;
}
ul#topnav a, ul#topnav span { /*--The <a> and <span> share the same properties since the <span>  will be a duplicate of the <a> tag--*/
	padding-top:4px;
	padding-right:26px;
	float: left;
	text-decoration: none;
	background: url(a_bg.gif) repeat-x;
	text-transform: uppercase;
	clear: both;
	width: 100%;
	height: 20px;
	line-height: 20px; /*--Vertical alignment of text--*/
}

ul#topnav span{
	color: #909090;
}

ul#topnav .agence_active span, ul#topnav .agence_nonactive a, ul#topnav .agence_active a{
	color: #339933;
}

ul#topnav .service_active span, ul#topnav .service_nonactive a, ul#topnav .service_active a{
	color:#6f5ead;}

ul#topnav .realisation_active span, ul#topnav .realisation_nonactive a, ul#topnav .realisation_active a{
	color:#1eacb9;}

ul#topnav .contact_active span, ul#topnav .contact_nonactive a, ul#topnav .contact_active a{
	color:#cc3333;}


ul#topnav a{ /*--This is basically the hover state of navigation--*/
	//color: #555;
	background-position: left bottom;
}
ul#topnav span{ /*--Default state of navigation--*/
	background-position: left top;
}
	
.service_nonactive a, .service_active a{
	color:#6f5ead;}

.realisation_nonactive a, .realisation_active a{
	color:#1eacb9;}

.contact_nonactive a, .contact_active a{
	color:#cc3333;}
	
#content_wide{
	float:left;
	padding-top:6px;
	min-height:340px;
	height:340px;
	max-height:340px;
	width:100%;
	}

#content{
	margin:auto;
	min-height:340px;
	height:340px;
	max-height:340px;
	width:1014px;
	}
	
/*#titre{
	font-size:22px;
	margin-top:-20px;
	padding-left:25px;
	font-weight:bold;
	width:300px;
	}*/
	
h1{
	margin-top:110px;
	margin-right:150px;
	float:right;
	text-align:right;
	}	
	
h1.agence, h1.service, h1.realisation, h1.contact  {
	background-color:#FFF;
	width:199px;
	height:0px;
	padding-top:21px;
	overflow:hidden;
	background-repeat:no-repeat;
}

h1.agence{
	background-image:url(../img/h1_agence.png);
	}
	
h1.service{
	background-image:url(../img/h1_service.png);
	}

h1.realisation{
	background-image:url(../img/h1_realisation.png);
	}

h1.contact{
	background-image:url(../img/h1_contact.png);
	}
	
#texte.agence{
	float:left;
	font-size:13px;
	margin-top:25px;
	width:350px;
	text-align:justify;
	color:#ffffff;}
	
#photo.agence{
	margin-top:-6px;
	float:right;}
		
/*****  REALISATION  ******/

#texte.realisation{
	float:right;
	font-size:13px;
	margin-top:90px;
	margin-right:50px;
	width:350px;
	text-align:justify;
	color:#ffffff;}


#galerie{
	float:left;
	margin-top:25px;
	width:600px;
	}

.zitem {
	width:125px;
	height:125px;	
	border:3px solid #ffffff;	
	margin:5px 5px 5px 0;
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
}

.zitem .caption {
	width:125px;
	height:30px;
	background:#000;
	color:#fff;
	font-weight:bold;
		
	/* fix it at the bottom */
	position:absolute;
	bottom:-1px; /* fix IE issue */
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=70);    /* ie  */
	-moz-opacity:0.7;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.7;    /* for really really old safari */  
	opacity: 0.7;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.zitem .caption a {
	text-decoration:none;
	color:#fff;
	font-size:12px;	
	
	/* add spacing and make the whole row clickable*/
	padding:5px;
	display:block;
}

img {
	border:0;
	
	/* allow javascript moves the img position*/
	position:absolute;
}

.clear {
	clear:both;	
}

/*** SERVICES ***/

#texte.service{
	float:left;
	font-size:13px;
	margin-top:55px;
	width:660px;
	text-align:justify;
	color:#ffffff;}


ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 45px; /*--Set height of tabs--*/
	width: 300px;
	text-transform:uppercase;
	font-size:24px;
	font-weight:bold;
}
ul.tabs li {
	margin: 0;
	padding: 0;
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 44px; /*--Vertically aligns the text within the tab--*/
	margin-bottom: 10px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
}
ul.tabs li a {
	text-decoration: none;
	color: #ffffff;
	padding-left:25px;
	display: block;
	outline: none;
}
ul.tabs li a:hover{
	background-image:url(../img/service_arrow_hover.png);
	background-repeat:no-repeat;
}

ul.tabs li.active {
	background-image:url(../img/service_arrow.gif);
	background-repeat:no-repeat;
}

html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
}

.tab_container {
	overflow: hidden;
	float: left; 
	margin-left:300px;
	margin-top:-35px;
}
.tab_content {
	width:300px;
	height:300px;
	float:left;
}

.tab_content ul li{
	padding-left:10px;
	content: "- ";
	color:#ffffff;
	list-style-position:inside;

	}

#photo.service{
	padding-top:80px;}

/*** CONTACT ***/

#e-mail{
	margin-top:-6px;
	padding-left:50px;
	padding-top:25px;
	background-image:url(../img/email.png);
	background-repeat:no-repeat;
	width:480px;
	height:300px;
	float:left;
	color:#fff;
	}
		
#phone{
	margin-top:-6px;
	background-image:url(../img/telephone.png);
	background-repeat:no-repeat;
	width:410px;
	height:150px;
	float:left;
	color:#FFF;
	padding-top:140px;
	padding-left:50px;
	}
	
#phone strong{
	text-transform:uppercase;
	font-size:18px;
	}
	
.form_text{
	width:200px;
	height:20px;}
	
.field_line{
	height:33px;}

.field_name{
	float:left;
	width:95px;}

.textbox{
	min-width:335px;
	width:335px;
	max-width:335px;
	height:20px;
	border:none;
	font-size:14px;
	padding-top:3px;
	padding-left:3px;
	}
	
textarea{
	min-width:335px;
	width:335px;
	max-width:335px;
	height:135px;
	border:none;
	font-size:14px;
	padding-top:3px;
	padding-left:3px;
	font-family:Arial, Helvetica, sans-serif;
}

.form_button{
	margin-left:95px;
	margin-top:15px;
	height:23px;
	width:335px;
	background-color:#FFF;
	color:#cc3333;
	font-size:18px;
	border:none;}

.error
{
	margin-top:10px;
	margin-left:95px;
	width:335px;
	background-color:#FFBFBF;
	color:#FF0000;
}

#champs_obligatoire{
	font-size:10px;
	text-align:right;
	margin-top:140px;
	}


/*** FOOTER ***/

#footer_wide{
	float:left;
	clear:both;
	background-color:#fff;
	min-height:194px;
	height:194px;
	max-height:194px;
	width:100%;
	}

#footer{
	margin:auto;
	background-image:url(../img/footer_bg.png);
	background-repeat:no-repeat;
	background-position:center;
	width:1014px;
	min-height:194px;
	height:194px;
	max-height:194px;
	}

#espace_footer{
	height:47px;
	width:100%;}
	
#s3{
	width:696px;
	height:93px;
	margin-left:181px;
	background-image:url(../img/slideshow_bg2.png);
	background-color:#efefef;
	background-repeat:no-repeat;
	}
	
#citation{
	background-color:#efefef;
	margin-top:14px;
	margin-left:85px;
	text-align:justify;
	height:65px;
	width:500px;
	color:#5a5858;
	font-size:12px;}
	
#citation h3{
	color:#7a7676;
	font-size:18px;}
	
h3{
	width:193px;
	height:0px;
	padding-top:18px;
	overflow:hidden;
	background-repeat:no-repeat;
	margin-bottom:5px;
}

h3.curiosite{
	background-image:url(../img/slideshow_titre_curiosite.png);
	}

h3.analyse{
	background-image:url(../img/slideshow_titre_analyse.png);
	}

h3.communication{
	background-image:url(../img/slideshow_titre_communication.png);
	}

h3.design{
	background-image:url(../img/slideshow_titre_design.png);
	}


#copyright{
	margin-top:25px;
	font-size:10px;
	color:#909090;
	float:right;}