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

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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
text-align: left;
vertical-align: baseline;
}
html{
font-size:100%/*WinIE6- text resize adjust*/
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
content: "";
}

/* ----------------------------------------------  BODY  ---------------------------------------------- */
			
body {width:100%; height:100%; font-family: "Lucida Grande", Arial, Verdana, sans-serif; font-size: 12px; background: #ddddd2 url(../images/head/header_bg.gif) top left repeat-x;}
 
/* ---------------------------------------------  GENERAL VRAC ---------------------------------------- */
strong{ font-weight:bolder;}
.clr{ clear:both;}
.rounded { -moz-border-radius: 3px; -webkit-border-radius: 3px;}
.shadow{background: -moz-box-shadow: 0px 0px 2px #999; box-shadow: 0px 0px 2px #999; -webkit-box-shadow: 0px 0px 2px rgba(51,51,51,0.4); -moz-box-shadow: 0px 0px 2px rgba(51,51,51,0.4);}
.noscreen, hr, legend{ display:none;}
.border{ border:1px solid lime}
.indent {text-indent:15px;}	
.indent25 {text-indent:27px; font-size:16px;}	
.bb-red{border-bottom:1px solid #dca9ad; line-height:16px;}
.webprojet{ width:144px; height:54px; float:left; padding:1px; border:2px solid #D2D2CB; margin:0; margin-top:8px; margin-left:15px; cursor:pointer;}

#fuckie6 { display:none; position:absolute; z-index:9999; width:100%; margin: 150px 0px 50px 0px; background-color:#f0f0f0; color:#333; font-size:24px; text-align:center; line-height:150%;}
#fuckie6 a {color: #409cf2;}	
#fuckie6 a:hover {text-decoration: underline;}

a { text-decoration: none; cursor: pointer;}
	a:active { outline: none; }
	a:focus{-moz-outline-style: none;}
	a:focus, a:hover, a:active { outline:none;}

img { outline: none;  border:none; padding:0;}
	
/* ----------------------------------------------  TYPE  ---------------------------------------------- */

@font-face {font-family: 'Fontin-Regular'; src: url('../fonts/Fontin-Regular.eot'); src: local('Fontin-Regular'),url('../fonts/Fontin-Regular.ttf') format('truetype');}
@font-face {font-family: 'Fontin-Bold'; src: url('../fonts/Fontin-Bold.eot'); src: local('Fontin-Bold'),url('../fonts/Fontin-Bold.ttf') format('truetype');}

/* ----------------------------------------------  TITLE  --------------------------------------------- */

h2 {font-family: "Fontin-Bold", "Lucida Grande", Georgia, Times, serif; font-size: 24px; color: #747b89; margin:5px 0 0 -5px;}
h3 {font-family: "Fontin-Regular", "Lucida Grande", Georgia, Times, serif; font-size: 20px; color: #747b89; margin-bottom:5px; padding:0; }
h4 {font-family: "Fontin-Bold", "Lucida Grande", Georgia, Times, serif; font-size: 16px; color: #5e6470; margin:0 0 5px 5px; padding:5px 0}

/*------------------------------------------- H3 COLOR CODE (subtitles)---------------------------------*/

.presentation {color:#EE7D03;}
.approche {color:#40BEC6;}
.services {color:#7569DD;}
.sitesweb {color:#7C9597;}
.banners {color:#628ec4;}
.cddvd {color:#DDDED2;}
.animations {color:#1B5DC3;}
.clients {color:#CE2A11;}
.photos {color:#D4771D;}
.cv {color:#D4771D;}
.contact {color:#b12531;}
.coordonnees {color:#b12531;}
	
/* ----------------------------------------------  STRUCTURE  ----------------------------------------- */

#wrapper {width:775px; margin: 0 auto; margin-bottom:20px; position: relative;}

#header{padding:6px 3px 3px 3px; background:#fff; margin-left:20px; text-align:center; }

#presentation,#approche,#services,#banners,#sitesweb,#cddvd,#animations,#photos,#cv,#clients,#contact,#coordonnees{padding:10px 0 0 20px; background:#fff; margin-top:10px; color:#4f5561;}

.footer{ padding:10px 0 10px 10px; margin:20px 0 20px 5px; position:relative; }
.footer_reflected{ background:#fff url(../images/foot/footer_reflected.png) top center no-repeat; margin-top:-18px; height:53px}

/* ----------------------------------------------  FEATURES  ------------------------------------------ */

#siteType {position:relative; float:right; margin:10px 10px 0 0; font-size:11px; color: #888E8E;}
#siteType a:link, #siteType a:visited, #siteType a:hover, #siteType a:active {color: #409cf2; font-weight: bold; text-decoration:underline;}
#siteType a:hover{ color:#608DAD;}

.logo{position:relative; z-index:99; float:left; margin:5px 0 0 4px; width:150px;}
.light{position:absolute; z-index:9; width:320px; height:225px; top:0px; left:-30px; background: url(../images/head/light2.png) top left no-repeat; }
.tools{position:relative; width:156px; height:87px; top:0px; left:28px; margin:5px 0 10px 0}

/* ----------------------------------------------  NAV  ----------------------------------------------- */
		
#nav {clear:both; float:right; line-height:80px; position:relative; display:none;}
*+html #nav { margin-top:85px;}
	#nav a { color:#4f5561; background: url(../images/head/bg_nav.png) repeat-x #f0f0f0; text-decoration: none; display: block; font-family: "Fontin-Bold", "Lucida Grande", Cambria, "Trebuchet MS", Georgia, Times, serif; font-size:15px; font-weight: bold; text-align:center; background: -moz-box-shadow: 1px 0px 1px #666; box-shadow: 1px 0px 1px #666; -webkit-box-shadow: 1px 1px 1px rgba(51,51,51,0.3); -moz-box-shadow: 1px 0px 1px rgba(51,51,51,0.3);}

	#nav ul {margin: 0px; padding: 0px; margin-top:-75px; list-style-type: none;}	
		#nav ul li {width: 87px; line-height: 24px; background:#f0f0f0 url(../images/head/bg_nav.png) repeat-x; display: block; float: left; text-align: center; margin: 0px 5px 0px 5px; padding: 0px !important;}

	#nav .cat_active {background: url(../images/head/bg_nav_hover.png) repeat-x #3873ab; color:#FFF;}
	/*
	#nav li a.hover {background: url(../images/head/bg_dark.png) repeat-x #333; color: #FFF;}
	*/
	#nav ul.nav_level2{margin:10px 0 0 0; padding:0; position:absolute; left:5px; width:400px; display:none;}
	#nav ul.nav_level2 li{margin: 0px 10px 0px 0px; padding:0; display:block; float: left;}
	#nav ul.nav_level2 li a{font-size:13px; letter-spacing:0px;font-weight: normal;}
	
/* ----------------------------------------------  CONTENT  ------------------------------------------- */
	
.presentatonStyle { float:left; width:210px; margin:10px 0 10px 15px; padding:6px; border-left: 4px solid #EE7D03; background-color:#fafafa; position:relative;}
	.presentatonStyle p {font-size:1em; line-height:1.4em; margin-bottom:8px; font-weight:normal}
	.presentatonStyle a {color:#EE7D03;}
		.presentatonStyle a:hover {background-color:#EE7D03; color:#fff; text-decoration:none;}

.approcheStyle {float:left; width:210px; margin:10px 0 10px 15px; padding:6px; border-left: 4px solid #40BEC6; background-color:#fafafa;}
	.approcheStyle p {font-size:1em; line-height:1.4em; margin-bottom:8px; font-weight:normal}
	.approcheStyle a {color:#40BEC6;}
		.approcheStyle a:hover {background-color:#40BEC6;color:#fff;}

.servicesStyle {float:left; width:210px; margin:10px 0 10px 15px; padding:10px; border-left: 4px solid #7569DD; background-color:#F9F8FE; position:relative;}
	.servicesStyle p {font-size:1em; line-height:1.4em; margin-bottom:8px; font-weight:normal}
	.servicesStyle ul{list-style-position:inside; list-style-image: url(../images/mid/fleche.gif);}
		.servicesStyle ul li{text-indent:8px; margin-left:6px; margin-top:3px;}
	.servicesStyle a {color:#7569DD;}
		.servicesStyle a:hover {background-color:#7569DD; color:#fff;}

.bannerStyle{float:left;}
	.bannerStyle .thumb{margin: 15px 0px 4px 20px;	background-color:#FAFAFA; border:1px solid #EFEFEF; width:144px; padding:5px 5px 3px 5px; font-size:13px; color:#8A8383;}
	.bannerStyle .text{clear:both; margin:4px 0px 0px 20px; background-color:#FAFAFA; border:1px solid #EFEFEF; width:200px; padding:6px; font-size:13px; color:#8A8383; line-height:16px;text-align:left;}
	.bannerStyle .text .highlight{ font-weight:bold; background:#fff; display:block; margin:10px 5px 0 0; clear:both; float:right}

.photosStyle {float:left; width:105px; margin: 15px 30px 4px 30px; padding:0 3px; border-left: 4px solid #D4771D; background-color:#FFFBF7;}

.bannerClient{	float:left;	margin: 10px 0px 8px 20px; background-color:#FAFAFA; border: 1px solid #EFEFEF; width:200px; padding:4px 5px 3px 5px; font-size:13px; color:#8A8383; line-height:14px; -moz-border-radius:3px; -webkit-border-radius: 3px;}
	#clients p{float:left; margin:10px 0px 0px 20px; background-color:#FAFAFA; border: 1px solid #EFEFEF; width:450px; padding:6px; font-size:13px; color:#8A8383; line-height:16px;
-moz-border-radius:3px;	-webkit-border-radius: 3px; text-align: left;}
	#clients p a{color:#CE2A11;}
	#clients p a:hover{ background:#CE2A11; color:#fff}
	
.contactStyle{float:left; width:330px; margin:10px 0 10px 15px; padding:5px; border-left: 4px solid #b12531; background-color:#fff8f9; position:relative;}
	.contactStyle p{font-size:1em; margin-top:10px;}
	.contactStyle a {color:#b12531;}
	.contactStyle a:hover {background-color:#b12531; color:#fff; text-decoration:none;}
	
.coordonneesStyle{float:left; width:330px; margin:10px 0 10px 15px; padding:5px; border-left: 4px solid #b12531; background-color:#fff8f9; position:relative;}
	.coordonneesStyle p {font-size:1em; margin-bottom:8px; font-weight:normal; line-height:16px;}
	.coordonneesStyle a {color:#b12531;}
	.coordonneesStyle a:hover {background-color:#b12531; color:#fff; text-decoration:none;}

.portfolioSource{width:680px; margin:0 auto 20px auto; padding-bottom:10px;}
.portfolioTarget{width:642px; margin:0 auto 20px auto;  border:2px solid #D2D2CB; text-align:center;}
.portfolioTarget #cart{position:relative; z-index:99999; padding:3px; padding-bottom:10px;}

.portfolioTarget img.loader{ position:relative; left:230px; top:50px;}
img.blocPortfolioExt {position:relative; float:left; width:144px; height:54px; margin:5px; margin-bottom:0; padding:1px; border:1px solid #D2D2CB !important;}

.portfolioTexte { clear:both; position:relative; width:621px; left:4px; padding:4px; top:5px; text-align:justify; color:#8A8383; background-color:#FAFAFA;}
	.portfolioTexte a {color:#7C9597;}
		.portfolioTexte a:hover{ background-color:#7C9597; color:#fff; text-decoration:none;}

.portfolioDate {float:right; width:93px; height:22px; line-height:18px; margin-top:7px; margin-right:5px; font-weight:bold; color:#FFF; background: url(../images/mid/date.gif) no-repeat 0 0; text-align:center;}
.portfolioLien {float:right; width:93px; height:26px; margin-top:5px; margin-right:5px; background: url(../images/mid/voir_site_off.gif) no-repeat 0 0; cursor:hand; text-align:center;}
	.portfolioLien a { font-weight:bold; color:#FFF; text-decoration:none; line-height:18px;}
		.portfolioLien a:hover {color:#4a6163;}
	
/* ----------------------------------------------  SLIDER  ------------------------------------------- */
		
.scroll { overflow: auto; position: relative; /* fix for IE to respect overflow */ clear: left; margin-left:20px;}
.scrollContainer div.panel { width:753px; padding:0 1px;}

/* ----------------------------------------------  FORM  -------------------------------------------- */

#form_contact fieldset {padding:0px 0px 0px 15px;}
#form_contact fieldset label {text-indent: -999px; overflow:hidden; display:block;}
#form_contact fieldset input {font-size:16px; width:265px; padding:5px 0px 5px 34px;}
#form_contact fieldset textarea {font-size:16px; font-family:Arial, Helvetica, sans-serif; width:265px; height:80px; padding:5px 0px 5px 34px;}
#firstname {background: #FFF url(../images/contact/bg_form_firstname.png) 0 0  no-repeat;}
#lastname {background: #FFF url(../images/contact/bg_form_lastname.png) 0 0  no-repeat;}
#phone {background: #FFF url(../images/contact/bg_form_phone.png) 0 0  no-repeat;}
#email {background: #FFF url(../images/contact/bg_form_email.png) 0 0  no-repeat;}
#message {background: #FFF url(../images/contact/bg_form_message.png) 0 0  no-repeat;}
	#form_contact fieldset input#submit {float:right; margin:10px 12px 10px 0;}
	#form_contact fieldset input#submit {cursor:pointer; width:105px; background: url(../images/head/bg_nav.png) repeat-x #f0f0f0; text-decoration: none; display: block; font-family: "Fontin-Bold", "Lucida Grande", Georgia, Times, serif; font-size:15px; font-weight: bold; color:#777; text-align:center; background: -moz-box-shadow: 1px 0px 1px #666; -webkit-box-shadow: 1px 0px 1px #666; box-shadow: 1px 0px 1px #666; -moz-box-shadow: 1px 0px 1px rgba(51,51,51,0.3); outline:none; padding:0; padding-bottom:3px;}
		#form_contact fieldset input#submit:hover {color:#444; outline:none;}

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

.footer span { display:block; position: absolute; top:18px; left:0px;}
	.footer span.copyright a{ color:#747b89}
.footer ul { width: 523px; height: 25px; position:relative; float:right; margin-left:150px; margin-right:10px; background:#fafafa; border: 1px solid #EFEFEF;}
	.footer ul li { font-size: 1.1em; position: absolute; color:#899daa; }
		.footer li.path { top:4px; left: 90px; }
		.footer li.path a {color:#c2c2c2; padding:2px; text-decoration:underline;}
		.footer li.path img { margin:0 10px; margin-bottom:-2px;}
		.footer li.path a:hover { padding:2px; color:#899daa;}		
		.footer li.home { top: 3px; left: 20px;}
		.footer li.valid { top: 5px; left: 430px;}
		
/* ----------------------------------------------  TABS  -------------------------------------------- */

#organic-tabs { background: #fbfbfb; padding: 10px; margin:10px 0 15px 18px; width:680px; -moz-box-shadow: 0 0 2px #999; -webkit-box-shadow: 0 0 2px #999; position:relative;}
#explore-nav { overflow: hidden; margin: 3px 0 10px 3px;  }
	#explore-nav li { width: 97px; float: left; margin: 0 20px 0 0px;}
	#explore-nav li.last { margin-right: 0; }
	#explore-nav li a { display: block; padding: 5px; background:#b4b4b4; color:#fff; font-size: 12px; font-weight:bold; text-align: center; border: 0; }
	#explore-nav li a:hover { background-color: #D4771D;}
	#explore-nav li#ex-identite a.current, 	#explore-nav li#ex-formation a.current, #explore-nav li#ex-aptitudes a.current, #explore-nav li#ex-experience a.current{ background: url(../images/mid/cv_bg.gif) 0 0; color:#fff;}
#formation, #aptitudes, #experience { display: none; }
#identite p, #formation p, #aptitudes p, #experience p { padding:10px;}
#identite a, #formation a, #aptitudes a, #experience a {color:#D4771D;}
#identite a:hover, #formation a:hover, #aptitudes a:hover, #experience a:hover {background-color:#D4771D;color:#fff;text-decoration:none;}

#identite img{ position:absolute; right:28px; top:-10px;}

/* ----------------------------------------------  DECO  -------------------------------------------- */

.deco_services{width:120px; height:120px; background:url(../images/deco/deco_services.png) 0 0 no-repeat; position:absolute; top:-73px; right:15px;}
.deco_contact{width:120px; height:120px; background:url(../images/deco/deco_contact.png) 0 0 no-repeat; position:absolute; top:-73px; right:5px;}
.deco_coordonnees{width:120px; height:120px; background:url(../images/deco/deco_coordonnees.png) 0 0 no-repeat; position:absolute; top:-73px; right:10px;}
.deco_presentation{width:120px; height:120px; background:url(../images/deco/deco_presentation.png) 0 0 no-repeat; position:absolute; top:-73px; right:10px;}

/* ----------------------------------------  KETCHUP VALIDATION  ------------------------------------ */

.ketchup-error-container { display: none; width: auto; width:303px;}
	.ketchup-error-container ol { font-size: 12px; color: #fafafa; background: #b12531; background: rgba(177, 37, 49, 1); padding: 5px; border-radius: 3px; -moz-border-radius: 3px; 
-webkit-border-radius: 3px; list-style: none; line-height: 14px; margin:0; margin-top:5px;}