/******** Main Frame Factory stylesheet ********/

@import url("reset.css");

/* General structure and styles */
html {
	overflow:auto;
}

html,
body {
	height:100%;
}

body {
	font-size:75%; /* 75% = 12px */
	font-family:Arial, Helvetica, sans-serif;
	background-repeat:no-repeat;/* wide */
	color:#4d4d4d;
}

#main {
	width:954px;
	margin:0 auto;
	min-height:698px;
	background-repeat:no-repeat;
	border:0; /* wide */
	position:relative;
}
.msie6 #main {
	height:698px;
}

/* clearing floats - hiding stuff */
h1 a span,
.carousel .back,
#navigation h2 a span,
.carousel .prev span,
.carousel .next span,
#imageViewer a span,
#footer .intro a span,
.btAvailability span,
.recrutement #centre .message p a span,
acronym span,
#skins a span,
.apply span,
.contact label span,
.recrutement #centre #availabilityBlock a span {
	position:absolute;
	left:-500em;
}

#navigation:after,
#footer:after,
#content:after,
#sitemap:after,
.contact #centre form:after,
.contact #centre p:after {
	content:" ";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;
}


/* main title */
h1 {
	width:180px;
	margin:0 auto;
	z-index:10;
	position:relative;
}
		h1 span {
			display:block;
			padding:20px 63px 15px;
			width:54px;

		}
				h1 a {
					display:block;
					height:35px;
					background-repeat:no-repeat;
				}
				h1 .altered {
					cursor:pointer;
				}
				.msie6 h1 a {
					position:relative;
				}

/* main navigation */

#navContainer {
	position:absolute;
	z-index:10;
	width:180px;
	top:0;
	left:50%;
	margin-left:-90px;
	padding-top:1px;
}

		#navigation{
			width:180px;
			margin:0 auto;
			z-index:10;
			position:relative;
			top:1px;
			cursor:pointer;
		}
		.msie #navigation {
			overflow:hidden;
		}
				#navigation li {
					width:180px;
					float:left;
				}
				#navigation #planSite,
				#navigation #mentions {
					display:none;
				}
						#navigation h2 {
							padding:0 10px 8px;
							width:160px;
							font-size:1.333em;
						}
						#navigation .current h2 {
							padding:20px 10px 18px;
						}

						/* nav trick for ie6 - !! js trick also. See Framefactory.toggleNav() for info */
						#navigation .disappear {
							position:absolute;
							left:-500em;
						}
						#approche h2 {
							padding-top:20px;
							padding-bottom:6px;
						}
						#contact h2 {
							padding-bottom:19px;
						}
								#navigation h2 a {
									background-repeat:no-repeat;
									display:block;
									height:13px;
								}
								#approche.active h2 a,
								#approche h2 a:hover {
									background-position:0 -13px;
								}
								#references h2 a {
									background-position:0 -26px;
								}
								#references.active h2 a,
								#references h2 a:hover {
									background-position:0 -42px;
								}
								#recrutement h2 a {
									background-position:0 -58px;
								}
								#recrutement.active h2 a,
								#recrutement h2 a:hover {
									background-position:0 -71px;
								}
								#contact h2 a {
									background-position:0 -84px;
								}
								#contact.active h2 a,
								#contact h2 a:hover {
									background-position:0 -97px;
								}
								#planSite h2 a { background-position:0 -110px; }
								#mentions h2 a { background-position:0 -123px; }

								#references h2 a,
								#mentions h2 a {
									height:16px;
								}
								.msie6 #navigation h2 a {
									position:relative;
								}
								.msie6 #mentions h2 a,
								.msie6 #planSite h2 a {
									position:static;
								}

									#navigation .active h2 a {
										cursor:default;
									}
								.carousel {
									width:180px;
									padding:0;
								}
								.msie .carousel {
									position:relative; /* correcting sliding bug */
									display:none; /* correcting filter bug */
								}
										.carousel div {
											padding:12px 10px 17px;
											width:160px;
										}
										/* tricky class for ie */
										.msie6 #navigation .carousel .appear {
											filter:none;
											display:none;
										}
										/* // */
												.carousel ul{
													padding:3px 0 3px;
													height:302px;
													overflow:auto;
												}
														#navigation .carousel li{
															display:block;
															width:160px;
															height:90px;
															padding:5px 0;
															float:none;
															position:relative;
														}
																#navigation .carousel li object {
																	position:absolute;
																	top:5px;
																	left:0;
																	width:160px;
																	height:90px;
																	z-index:1;
																}
																#navigation .carousel li h3 {
																	position:absolute;
																	bottom:5px;
																	right:0;
																	width:160px;
																	z-index:2;
																	text-align:right;
																	font-size:.917em;
																	cursor:pointer;
																	color:#fff;
																}

																/* color variants for navigation titles and image viewer titles */
																.light {
																	color:#fff;
																}

																#navigation .carousel img {
																	display:block;
																}

														.carousel .prev,
														.carousel .next {
															display:block;
															width:16px;
															height:17px;
															margin:0 auto;
															background:url(../../img/css/pict-arrows.png) no-repeat;
														}
														.msie6 .carousel .prev,
														.msie6 .carousel .next {
															position:relative;
														}

														.carousel .disabled {
															visibility:hidden;
														}

		/* news */
		#news li {
			margin-top:60px;
			text-align:justify;
		}

/* image viewer */
#imageViewer,
#overlay {
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	width:100%;
	height:100%;
	overflow:hidden;
}
		#imageViewer img {
			display:none;
			position:absolute;
			top:0;
			left:0;
			z-index:1;
		}

		/* controls */
		#imageViewer .close,
		#imageViewer .prev,
		#imageViewer .next {
			position:absolute;
			z-index:5;
			display:none;
			outline:none;
		}
		#imageViewer .prev,
		#imageViewer .next {
			height:65px;
			width:33px;
			top:50%;
			margin-top:-32px;
			background:url(../../img/css/pict-arrows.png) no-repeat;
		}
		#imageViewer .prev {
			left:10px;
			background-position:0 -34px;
		}
		#imageViewer .next {
			right:10px;
			background-position:-33px -34px;
		}
		#imageViewer .close {
			top:35px;
			right:10px;
			width:76px;
			height:16px;
			background:url(../../img/css/pict-close.png) no-repeat;
		}
		.msie6 #imageViewer .close {
			background-image:url(../../img/css/pict-close_png8.png);
		}
		#imageViewer .disabled {
			cursor:default;
			visibility:hidden;
		}
			#imageViewer .disabled:hover {
				color:#666;
			}

/* gallery */
#gallery {
	position:absolute;
	left:-500em;
	display:none;
}

#lightbox-nav-btnNext {
	background-position:96% 50%!important;
}
#lightbox-nav-btnPrev {
	background-position:10px 50%!important;
}

/* content */
#content {
	width:860px;
	margin:0 auto;
	padding:90px 0 60px;
	position:relative;
	z-index:1;
	font-size:1.083em;
}
		#intro {
			width:660px;
			margin:0 auto;
		}
				#intro a {
					float:right;
					font-size:.846em;
					margin-top:5px;
				}

		#left,
		#centre {
			float:left;
			padding-top:110px;
		}
		#left {
			width:280px;
		}
		#centre {
			width:580px;
			text-align:justify;
		}
				#centre h5 {
					font-size:1.308em;
				}
				#centre h5,
				#centre p {
					padding-bottom:18px;
				}
				#centre p {
					line-height:17px;
					width:500px;
				}
				#centre .jscrollpane p {
					line-height:15px;
					width:438px;
				}

						#centre em {
							font-style:normal;
						}

/* plan du site */
#sitemap {
	width:720px;
	margin:0 auto;
	padding-top:110px;
	background:no-repeat 42px 135px;
}
		#sitemap li {
			float:left;
			border:1px solid;
			padding:4px 10px;
			font-weight:bold;
			text-transform:uppercase;
			font-size:.923em;
			margin:20px 0 0 22px;
			text-align:center;
		}
		#sitemap .first {
			margin-left:0;
			clear:both;
		}
		#sitemap .box {
			clear:both;
			float:none;
			width:43px;
			margin:0 0 36px 328px;

		}
					/* active and hover states */
					#sitemap a:hover {
						text-decoration:none;
					}

/* contact */
.contact address {
	text-transform:uppercase;
	font-style:normal;
	font-size:.846em;
	background:no-repeat 45px 4px;
	padding-top:40px;
}
		.contact address strong {
			display:block;
			font-size:1.091em;
		}
		.contact address span {
			padding-left:16px;
			background-repeat:no-repeat;
			background-position:0 3px;
			display:inline-block;
			height:10px;
		}

#centre,
.contact #centre,
.mentions #centre,
.recrutement #centre {
	width:520px;
	padding-left:60px;
	text-align:left;
}
				.contact fieldset {
					width:260px;
					float:left;
					font-size:.923em;
					font-weight:bold;
				}
				.contact .message {
					width:240px;
					margin-left:20px;
				}
				.contact #centre .validation {
					clear:both;
					width:100%;
					padding-top:10px;
				}
				#centre .errors {
					clear:both;
					color:#f00;
				}
						.contact fieldset legend {
							display:none;
						}
						.contact #centre p {
							overflow:hidden;
							width:auto;
							height:19px;
							padding:2px 5px 3px;
							margin-bottom:14px;

							padding:1px 1px 3px 5px;/* ** */
						}
						.contact #centre .validation p {
							background-color:transparent;
							height:auto;
							text-align:right;
							padding:0;
							margin-bottom:0;
							border-top:1px solid;
						}
						.contact #centre .message p {
							height:auto;
							margin-bottom:0;
							padding:1px 1px 0;
						}
						.contact #centre input {
							float:right;
							height:17px;
							width:140px;
						}

						.contact #centre input,
						.contact #centre textarea {
							background-color:transparent;
							border-width:0;
							font-family:Arial, Helvetica, sans-serif;
							font-size:1em;

							background-color:#FFF; /* ** */
							border:0; /* ** */
						}
						.contact #centre label {
							float:left;
							width:70px;
							height:11px;
							margin-top:5px;
							background:url(../../img/css/forms.gif) no-repeat;
						}

						/* labels */
						.contact #centre #fFirstname label,
						.contact #centre #fCompany label {
							height:10px;
						}
						.contact #centre #fPhone label { height:12px; }
						.contact #centre #fUrl label,
						.contact #centre #fAvailability label,
						.contact #centre #fMessage label,
						.contact #centre #fLetter label,
						.contact #centre #fCv label,
						.contact #centre #fPortfolio label {
							height:11px;
						}
						.contact #centre .message #fLetter label,
						.contact #centre .message #fCv label,
						.contact #centre .message #fPortfolio label {
							width:152px;
							margin-left:0;
						}
						#fLetter span,
						#fCv span,
						#fPortfolio span {
							display:block;
							clear:both;
						}

						.contact #centre .message label {
							margin:6px 0 3px 3px;
							width:50px;
						}
						.contact #centre textarea {
							padding:2px;
							height:144px;
							width:234px;
							font-weight:bold;
						}

						.contact #centre .validation input {
							height:9px;
							margin-top:5px;
							float:right;
							text-transform:uppercase;
							font-weight:bold;
							width:48px;
							text-indent:-500em;
							background:url(../../img/css/forms.gif) no-repeat;
							border:0;
						}

						/* error handling */
						#main #centre p.error {
							background-color:#f00;
						}
						#main #centre label.error {
							color:#f00;
						}

						.contact #centre #fJob.error label { background-position:-525px -5px; }
						.contact #centre #fName.error label { background-position:-525px -26px; }
						.contact #centre #fFirstname.error label { background-position:-525px -44px; }
						.contact #centre #fBirth.error label { background-position:-525px -65px; }
						.contact #centre #fPhone.error label { background-position:-525px -84px; }
						.contact #centre #fEmail.error label { background-position:-525px -105px; }
						.contact #centre #fUrl.error label { background-position:-525px -125px; }
						.contact #centre #fAvailability.error label { background-position:-525px -144px; }
						.contact #centre #fCompany.error label { background-position:-525px -321px; }
						.contact #centre #fMessage.error label { background-position:-525px -342px; }

						.contact #centre #fLetter .error { background-image:url(../../img/css/motivation_error.png); }
						.msie6 .contact #centre #fLetter .error {
							background-image:none;
							filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/css/motivation_error.png')
						}
						.contact #centre #fCv .error { background-image:url(../../img/css/cv_error.png); }
						.msie6 .contact #centre #fCv .error {
							background-image:none;
							filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/css/cv_error.png')
						}
						.contact #centre #fPortfolio .error { background-image:url(../../img/css/portfolio_error.png); }
						.msie6 .contact #centre #fPortfolio .error {
							background-image:none;
							filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/css/portfolio_error.png')
						}

/* mentions */
.mentions #left ol {
	list-style:decimal outside;
	width:220px;
}
.msie .mentions #left ol {
	list-style-position:inside;
}
		.mentions #left li {
			padding-bottom:18px;
		}
				.mentions #left a:hover {
					text-decoration:none;
				}


.mentions #centre {
	position:relative;
}
		#centre .jscrollpane {
			height:400px;
			overflow:auto;
		}
		.mentions #centre .jscrollpane {
			height:345px;
		}
				.mentions #centre h5 {
					padding:0 0 38px 40px;
				}
				.mentions #centre ol {
					list-style:decimal inside;
					text-align:justify;
				}
				.mentions #centre li {
					margin-bottom:10px;
					font-weight:bold;
				}
				.mentions #centre p {
					font-weight:normal;
					font-size:.923em;
					width:auto;
				}


/* recrutement */
.recrutement #centre h6 {
	text-align:justify;
	font-size:0.923em;
	font-weight:normal;
	margin:0;
}
		.recrutement #centre h5 {
			clear:both;
		}
		.recrutement .apply {
			display:block;
			margin-bottom:38px;
			border:1px solid;
			padding:5px;
			float:right;
			text-transform:uppercase;
			font-size:.923em;
		}

.recrutement #left {
	text-align:justify;
	font-size:.923em;
	width:230px;
	padding-right:50px;
	line-height:17px;
}
		.recrutement #left p strong {
			font-weight:normal;
		}
		.recrutement #left .apply {
			width:145px;
			height:25px;
			margin:18px 0 0;
			padding:4px 4px 7px 4px;
			padding:0;
		}
		.recrutement #left .candidature,
		.recrutement #left .offres,
		.recrutement .postuler {
			display:block;
			width:145px;
			height:25px;
			border:0;
			padding:0;
			background-repeat:no-repeat;
			background-position:0 -25px;
		}
		.recrutement .postuler {width:65px;}
		.recrutement #left .candidature:hover ,
		.recrutement #left .offres:hover,
		.recrutement .postuler:hover {
			background-position:0 0;
		}

.recrutement #centre .birth {
	width:98px;
}

.recrutement #centre .message label span {
	font-weight:normal;
	padding-left:5px;
}
.recrutement #centre #fAvailability {
	position:relative;
	margin-bottom:0;
}
		.recrutement #centre #fAvailability span {
			padding-left:5px;
			font-size:.916em;
		}

.recrutement #centre #availabilityBlock {
	position:absolute;
	padding:12px 0 7px;
	width:260px;
	margin-top:1px;
	font-weight:normal;
	display:none;
}
		.recrutement #centre #availabilityBlock li {
			float:left;
			width:100%;
		}
		.recrutement #centre #availabilityBlock a {
			display:block;
			width:100px;
			height:9px;
			margin:2px 5px;
			background:url(../../img/css/forms.gif) no-repeat;
		}

.recrutement #centre .btAvailability {
	position:absolute;
	top:8px;
	right:6px;
	width:15px;
	height:10px;
	background-repeat:no-repeat;
	outline:none;
}

.recrutement #centre .error .btAvailability {
	background-position:0 100%;
}

.recrutement #centre .message p {
	position:relative;
	background-color:transparent;
	min-height:40px;
}
.msie6 .recrutement #centre .message p {
	height:40px;
}
		.recrutement #centre .message .file,
		.recrutement #centre .message p .addFile {
			position:absolute;
			top:7px;
			right:0;
		}
		.recrutement #centre .message input {
			height:auto;
		}
		.recrutement #centre .message .file {
			width:54px;
			width:auto;
			height:12px;
			opacity:0;
			filter:Alpha(opacity=0);
			z-index:2;
		}
		.recrutement #centre .message p .addFile {
			background:url(../../img/css/forms.gif) no-repeat;
			height:9px;
			width:58px;
			z-index:1;
			overflow:hidden;
		}
		.recrutement #centre .message span {
			font-weight:normal;
		}

		.confirmation .emphasis em {
			text-transform:uppercase;
		}

/* scrolls */
#centre .jScrollPaneContainer {
	overflow:hidden;
	position:relative;
	outline:none;
	border-left:1px solid;
}
		.jScrollPaneTrack {
			border-left:1px solid;
			position:absolute;
			right:0;
		}
				.jScrollPaneDrag {
					background-repeat:no-repeat;
					cursor:pointer;
					position:absolute;
				}

/* skin controls */
#skins {
	position:absolute;
	top:10px;
	right:10px;
	z-index:15;
}
		#skins a {
			display:block;
			width:72px;
			height:9px;
			background:url(../../img/css/skin.png) no-repeat;
		}

.day #skins #day,
.night #skins #night {
	display:none;
}

/* footer */
#footer {
	width:100%;/* left / wide */
	padding:18px 0;
	position:fixed;
	left:0;/* left / wide */
	bottom:0;
	z-index:101;
	text-transform:uppercase;
	font-size:.75em;
}
.msie6 #footer {
	position:absolute;
	bottom:expression(documentElement.scrollTop+body.scrollTop);
}
		#footer strong {
			float:left;
			display:block;
			width:91px;
			height:8px;
			text-indent:-999px;
			margin:0 14px 0 20px;
			font-size:1.222em;
		}
		#footer ul {
			float:right;
			padding-right:20px;
		}
				#footer li {
					float:left;
					padding:0 5px;
					line-height:10px;
				}
				#footer .middle {
					border-left:1px solid;
					padding-right:20px;
				}
				#footer .intro {
					padding-left:0;
				}
						#footer .intro a {
							display:block;
							height:9px;
							width:76px;
							background-repeat:no-repeat;
						}