/**********************************************************************************************

	Title: SOAZ
	Author: XHTMLized
	Date: February 2008

***********************************************************************************************

	1. GENERAL

	2. MAIN LAYOUT
			2.1. General
			2.2. Top
			2.3. Site menu
			2.4. Primary content navigation menu
			2.5. Primary content
			2.6. Secondary content
					2.6.1. Les dernières rumeurs
					2.6.2. Tout sur SOAZ
					2.6.3. Prix et mentions
					2.6.4. Contactez-nous
			2.7. Footer

	3. PAGES LAYOUT
			3.1. Common
			3.2. Intro
			3.3. Services
			3.4. Profil
			3.5. Clients
			3.6. Portfolio
					3.6.1. General
					3.6.2. Main portfolio
					3.6.3. Portfolio details

***********************************************************************************************/

/* 1. GENERAL
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

/* Global 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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }


body {
	line-height: 1;
}
	
ol, ul {
	list-style: none;
}
	
table {
	border-collapse: separate; 
	border-spacing: 0;  /* tables still need 'cellspacing="0"' in the markup */
}

caption, th, td {
	text-align: left; 
	font-weight: normal;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%; /* 1em = 10px \ 1.1em = 11px \ 1.2em = 12px */
	text-align: center;
}

input, textarea, select {
	font: 1.2em Arial, Helvetica, sans-serif;
}

a:link {
	color: #0000ff;
	text-decoration: underline;
}
a:visited {}
a:hover {
	color: #ff0000;
	text-decoration: none;
}
a:active {}

hr { 
	display: none;
}
		
strong {
	font-weight: bold; 
}
		
em {
	font-style: italic;
}
	
abbr, acronym {
	border-bottom: 1px dotted #999; 
	cursor: help;
}

/* 2. MAIN LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

/* 2.1. General
===============================================================================================*/

.dhtml { /* TODO: rethink. what if element was inline? for now just have to be careful */
	display: none;
}
html.dhtml,
html.dhtml .dhtml {
	display: block;
}

html.dhtml,
html.dhtml body,
html.dhtml #the_wrapper {
	height: 100%;
	overflow: hidden;
}

html.dhtml #the_wrapper {
	background: url(../images/body-bg-bottom.png) repeat-x left bottom;
	position: relative;
}

body {
	text-align: left;
	background: #f4f4f4 url(../images/body-bg-top.png) repeat-x left top;
}
p		{ margin: 0 0 1.5em; }
ul, ol	{ margin: 0 1.5em 1.5em 1.5em; }
ul		{ list-style-type: disc; }
ol		{ list-style-type: decimal; }
dl		{ margin: 0 0 1.5em 0; }
dl dt	{ font-weight: bold; }
dd		{ margin-left: 1.5em; }
h1		{ font-size: 3em; line-height: 1; }
h2		{ font-size: 2em; margin-bottom: 0.3em; font-weight: normal; color:#3f382c; }
h3		{ font-size: 1.5em; line-height: 1; margin-bottom: 1em; }

#preview_video {
	margin-bottom:-3px;
}

a.external, a.portfolio {
	background: url(../images/external.png) no-repeat center right;
	padding-right: 13px;
}
a.portfolio {
	color: #3f382c;
	background-color: #f9ea27;
	padding: 3px 13px 4px 4px;
	font-size: .8em;
	text-decoration:none;
}

/* Adds some styling to lists with class 'paginated'.
	Those lists are automaticaly paginated if contains more than 14 elements. */
html.dhtml .list_service ul {
	color:#3f382c;
	list-style-type: none;
	margin: 0; padding: 0;
	font-size: 1em !important;
}
	html.dhtml .list_service ul li {
		margin: -1px 0 0;
		padding: 5px 5px 6px;
/*		border-bottom: 1px dotted;*/
	}
	html.dhtml .list_service ul li ul {
		color: #888277;
		margin: 1px 0 0 0;
		padding: 0px 0 0 40px;
		font-size:0.9em !important;
	}
	
html.dhtml ul.paginated {
	list-style-type: none;
	margin: 0; padding: 0;
	overflow: hidden;
	font-size: 1.1em;
	visibility: hidden;
}
	html.dhtml ul.paginated li {
		margin: -1px 0 0;
		padding: 3px 0 6px;
		border-top: 1px dotted;
	}
html.dhtml div.paginated_list-nav {}
	html.dhtml div.paginated_list-nav div.prev_clients,
	html.dhtml div.paginated_list-nav div.next_clients {
		color: #3f382c;
		background: #f9ea27 url(../images/page_suivante-bg.png) repeat-y 0 0;
		margin-top: .5em;
		padding: 0 4px 1px 36px;
		font-size: .8em;
		line-height: 18px;
		text-align: right;
		float: right;
		cursor: pointer;
	}
	html.dhtml div.paginated_list-nav div.prev_clients {
		float: left;
	}

/* Add 3px wide shadow to element with 'shadowed_box' class */
.shadowed_box {
	position: relative;
}
.shadowed_box .left,
.shadowed_box .right,
.shadowed_box .center {
	position: absolute;
	font-size: 0;
}
.shadowed_box .shadow-top .left,
.shadowed_box .shadow-top .right,
.shadowed_box .shadow-bottom .left,
.shadowed_box .shadow-bottom .right {
	width: 6px;
	height: 6px;
	background-repeat: no-repeat;
	background-position: 0 0;
}
.shadowed_box .shadow-top .center,
.shadowed_box .shadow-bottom .center {
	height: 3px;
	right: 3px;
	left: 3px;
	background-repeat: repeat-x;
}
.shadowed_box .shadow-middle div {
	width: 3px;
	bottom: 3px;
	top: 3px;
	background-repeat: repeat-y;	
}
.shadowed_box .shadow-top div { top: -3px; }
.shadowed_box .shadow-bottom div { bottom: -3px; }
.shadowed_box .left { left: -3px; }
.shadowed_box .right { right: -3px; }
.shadowed_box .shadow-top .left { background-image: url(../images/shadow_overlay-tl.png); }
.shadowed_box .shadow-top .right { background-image: url(../images/shadow_overlay-tr.png); }
.shadowed_box .shadow-bottom .left { background-image: url(../images/shadow_overlay-bl.png); }
.shadowed_box .shadow-bottom .right { background-image: url(../images/shadow_overlay-br.png); }
.shadowed_box .shadow-top .center { background-image: url(../images/shadow_overlay-t.png); }
.shadowed_box .shadow-bottom .center { background-image: url(../images/shadow_overlay-b.png); }
.shadowed_box .shadow-middle .left { background-image: url(../images/shadow_overlay-l.png); }
.shadowed_box .shadow-middle .right { background-image: url(../images/shadow_overlay-r.png); }

/* nice shadow under text */
html.dhtml .bottomshadow:after,
html.dhtml .bottomshadow div.after {
	content: '';
	display: block;
	height: 24px;
	background: url(../images/content-shadow.png) no-repeat center bottom;
}

/* 2.2. Section: Top
===============================================================================================*/

#logo {
	margin: 1.8em;
}
html.dhtml #logo {
	margin: 0;
	position: absolute;
	left: 18px; top: 10px;
	z-index: 2;
}
	#logo a {
		color: black;
		display: block;
	}

/* 2.3. Section: Site menu
===============================================================================================*/

#site_menu {
	padding: 1.5em;
	background-color: #f9ea27;
	font-size: 1.2em;
	line-height: 1.4;
	color: #3d362a;
}
html.dhtml #site_menu {
	padding: 0;
	font-size: 1em;
	line-height: 1;
	position: absolute;
	top: 11px; right: 11px;
	background-color: transparent;
	z-index: 2;
}
	#site_menu a {
		color: #3d362a;
	}
	html.dhtml #site_menu a {
		text-decoration: none;
	}
	html.dhtml #site_menu a:hover {
		text-decoration: underline;
	}
	#site_menu ul {
		margin: 0 1.5em;
	}
	html.dhtml #site_menu ul {
		margin: 0;
		list-style-type: none;
	}
		html.dhtml #site_menu li {
			float: left;
			position: relative;
			margin: 0 2px 0 1px;
		}
			#access_client_form {
				margin: 1em 0;
			}
			html.dhtml #access_client_form {
				background-image: url(../images/access_client_form-bg.png);
				width: 133px; height: 147px;
				padding: 41px 7px 0 10px;
				font-size: 1.1em;
				line-height: 1.2;
				position: absolute;
				top: 100%; left: 50%;
				margin: 3px 0 0 -75px;
				color: #5f5f5f;
				display: none;
			}
				html.dhtml #access_client_form form {
					margin: 1px 0 18px;
				}
					html.dhtml #access_client_form fieldset label {
						display: none;
					}
					html.dhtml #access_client_form fieldset input {
						display: block;
						width: 118px;
						margin: 3px 0;
						font-size: .9em;
						color: #767575;
					}
					html.dhtml #access_client_form div.submit input {
						margin-left: 2px;
					}

/* 2.4. Section: Primary content navigation menu
===============================================================================================*/

#site_nav {
	font-size: 1.3em;
	line-height: 1;
	margin: 1em 0;
	background-color: #f9ea27;
}
html.dhtml #site_nav {
	position: absolute;
	top: 60px; left: 12px;
	z-index: 2;
	background: none;
}
	#site_nav ul {
		list-style-type: none;
		line-height: 23px;
		height: 23px;
	}
	html.dhtml #site_nav ul {
		margin: 0;
	}
		#site_nav li {
			float: left;
			height: 100%;
		}
		html.dhtml #site_nav li {
			background: #f9ea27 url(../images/site-nav-item-bg.png) no-repeat right center;
			cursor: pointer;
			 /* padding-right: 68px; - when expanded */
		}
			#site_nav a {
				color: #282828;
				background: #f9ea27 url(../images/bul-plus-dark.png) no-repeat 9px 50%;
				padding: 0 7px 0 16px;
			}
			html.dhtml #site_nav a {
				text-decoration: none;
				float: left;
				height: 100%;
			}

/* 2.5. Section: Primary content
===============================================================================================*/

html.dhtml #content-overlay {
	background-color: #f4f4f4;
	width: 100%; height: 100%;
	position: absolute;
	top: 0; left: 0;
	z-index: 1;
	display: none;
}
html.dhtml #content-wrapper {
	height: 100%;
	display: table;
	margin: 0 auto;
	position: relative;
	top: -25px;
}
html.dhtml body.intro #content-wrapper {
	top: -100px;
}
	#content {
		font-size: 1.3em;
		line-height: 1.2;
		padding: 1.5em;
	}
	html.dhtml #content {
		padding: 0;
		display: table-cell;
		vertical-align: middle;
	}

/* 2.6. Section: Secondary content
===============================================================================================*/

#secondary_content {
	color: white;
	background: #3c352a url(../images/secondary_content-bg.png) repeat-x left top;
	font-size: 1.3em;
	line-height: 1.2;
	padding: 1.5em;
}
html.dhtml #secondary_content {
	position: absolute;
	bottom: 24px;
	width: 100%;
	z-index: 2;
	padding: 0;
	margin-top: 35px;
	font-size: 1em;
}
	#secondary_content a {
		color: white;
	}
	#secondary_content a.goto {
		background: url(../images/bul-goto.png) no-repeat left center;
		padding-left: 8px;
		color: #f3e400 !important;
	}
	#secondary_content h2,
	#secondary_content h3 {
		color: #f9ea27;
	}

	html.dhtml #intro-nav-mini {
		position: absolute;
		bottom: 100%; right: 0;
		background: url(../images/intro-nav-mini-bg-whole.png) no-repeat 0 0;
		color: #282828;
		padding-left: 36px;
	}
		html.dhtml #intro-nav-mini a {
			color: #282828;
			text-decoration: none;
		}
		html.dhtml #intro-nav-mini a:hover {
			text-decoration: underline;
		}
		html.dhtml #intro-nav-mini ul {
			list-style-type: none;
			margin: 0;
		}
			html.dhtml #intro-nav-mini li {
				padding-left: 0;
			}
			html.dhtml #intro-nav-mini li.communication,
			html.dhtml #intro-nav-mini li.developpement {
				margin-right: 1px;
			}
			html.dhtml #intro-nav-mini li.communication,
			html.dhtml #intro-nav-mini li.developpement,
			html.dhtml #intro-nav-mini li.exposition {
				float: left;
				position: relative;
				display: inline;
				width: 120px;
			}
				html.dhtml #intro-nav-mini div.title {
					font-size: 1.45em;
					line-height: 36px;
					background-color: #f9ea27;
					padding: 0 8px;
				}
				html.dhtml #intro-nav-mini div.content {
					display: none;
					font-size: 1.2em;
					line-height: 1.6em;
					background-color: #f9ea27;
					padding: 0 8px;
				}
					html.dhtml #intro-nav-mini li.communication {
						padding-left: 92px;
					}
					html.dhtml #intro-nav-mini li.communication ul.external {
						width: 92px;
					}
					html.dhtml #intro-nav-mini li.communicationCollapsed {
						background: url(../images/intro-nav-mini-bg-whole-yel.png) no-repeat top right;
					}
					html.dhtml #intro-nav-mini li ul {}
						html.dhtml #intro-nav-mini li ul li {
							padding: 0;
							background: url(../images/bul-plus-dark.png) no-repeat left center;
							text-indent: 9px;
						}
					html.dhtml #intro-nav-mini ul.internal {}
						html.dhtml #intro-nav-mini ul.internal li {}
					html.dhtml #intro-nav-mini ul.external {
						width: 0;
						position: absolute;
						bottom: 0; left: 0;
						overflow: hidden;
					}
						html.dhtml #intro-nav-mini ul.external li {
							background-color: #f9ea27;
							background-position: 5px 50%;
							text-indent: 15px;
							white-space: nowrap;
						}
							html.dhtml #intro-nav-mini ul.external img {
								vertical-align: middle;
							}

	
		
			html.dhtml #secondary_content-toc {
				width: 585px; height: 35px;
				position: absolute;
				bottom: 100%;
				font-size: 1.2em;
				line-height: 35px;
				text-align: center;
			}
				html.dhtml #secondary_content div.toc div.label {
					display: none;
				}
				html.dhtml #secondary_content-toc ul {
					list-style-type: none;
					width: 100%; height: 100%;
					margin: 0;
				}
					html.dhtml #secondary_content-toc li {
						float: left;
						height: 100%;
						position: relative;
					}
			html.dhtml #secondary_content-toc li.item-1 { width: 175px; }
			html.dhtml #secondary_content-toc li.item-2 { width: 120px; }
			html.dhtml #secondary_content-toc li.item-3 { width: 130px; }
			html.dhtml #secondary_content-toc li.item-4 { width: 160px; }
				html.dhtml #secondary_content-toc li span {
					display: block;
					width: 100%; height: 100%;
					background: url(../images/secondary_content-nav_fr.png) no-repeat 0 0;
					position: absolute;
					top: 0; left: 0;
					cursor: pointer;
				}
				html.dhtml #secondary_content-toc li.item-2 span { background-position: -175px 0; }
				html.dhtml #secondary_content-toc li.item-3 span { background-position: -295px 0; }
				html.dhtml #secondary_content-toc li.item-4 span { background-position: -425px 0; }
				html.dhtml #secondary_content.les_dernieres_rumeurs #secondary_content-toc li.item-1 span { background-position: 0 -35px; }
				html.dhtml #secondary_content.les_dernieres_rumeurs #secondary_content-toc li.item-2 span { background-position: -175px -35px; }
				html.dhtml #secondary_content.tout_sur_soaz #secondary_content-toc li.item-1 span { background-position: 0 -70px; }
				html.dhtml #secondary_content.tout_sur_soaz #secondary_content-toc li.item-2 span { background-position: -175px -70px; }
				html.dhtml #secondary_content.tout_sur_soaz #secondary_content-toc li.item-3 span { background-position: -295px -70px; }
				html.dhtml #secondary_content.prix_et_mentions #secondary_content-toc li.item-2 span { background-position: -175px -105px; }
				html.dhtml #secondary_content.prix_et_mentions #secondary_content-toc li.item-3 span { background-position: -295px -105px; }
				html.dhtml #secondary_content.prix_et_mentions #secondary_content-toc li.item-4 span { background-position: -425px -105px; }
				html.dhtml #secondary_content.contactez-nous #secondary_content-toc li.item-3 span { background-position: -295px -140px; }
				html.dhtml #secondary_content.contactez-nous #secondary_content-toc li.item-4 span { background-position: -425px -140px; }
				html.dhtml #secondary_content-toc a {
					display: block;
					width: 100%; height: 100%;
					color: #3c352a;
				}
			
	
	html.dhtml #secondary_content-fermer {
		position: absolute;
		top: 7px; right: 24px;
		color: white;
		font-size: 8px;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		text-transform: uppercase;
		display: none;
	}
	html.dhtml #secondary_content.open #secondary_content-fermer {
		display: block;
	}

	html.dhtml #secondary_content div.article {
		display: none;
	}
		html.dhtml #secondary_content div.article h2.header {
			display: none;
		}
		html.dhtml #secondary_content div.article div.content {
			padding: 40px 80px;
			font-size: 1.3em;
			line-height: 1.2;
			max-height: 350px; /* NOTE: don't forget to change parallel property in ie.css */
			overflow: auto;
		}		
			html.dhtml #secondary_content div.article div.content div.col-1,
			html.dhtml #secondary_content div.article div.content div.col-2 {
				width: 380px;
				float: left;
			}
			html.dhtml #secondary_content div.article div.content div.col-1 {
				margin-right: 40px;
			}
			html.dhtml #secondary_content div.article div.content h3 {
				font-size: 1.3em;
				font-weight: normal;
			}
		html.dhtml #secondary_content div.article div.toc {
			background: url(../images/secondary_content-toc-bg.png) repeat-x left bottom;
		}
			html.dhtml #secondary_content div.article div.toc ul {
				list-style-type: none;
				background: url(../images/secondary_content-toc-border.png) no-repeat 0 3px;
				padding-top: 3px;
				height: 34px;
				font-size: 1.2em;
				margin: 0;
			}
				html.dhtml #secondary_content div.article div.toc li {
					float: left;
					background: url(../images/secondary_content-toc-border.png) no-repeat right top;
					text-align: center;
					padding: 3px 22px 0 0;
					height: 18px;
				}
					html.dhtml #secondary_content div.article div.toc a {
						color: white;
						text-decoration: none;
					}
					html.dhtml #secondary_content div.article div.toc a:hover,
					html.dhtml #secondary_content div.article div.toc li.selected a {
						padding: 0 15px;
						background: url(../images/secondary_content-toc-hover.png) no-repeat 0 50%;
					}

/* 2.6.1. Les dernières rumeurs
-----------------------------------------------------------------------------------------------*/

html.dhtml #les_dernieres_rumeurs {}
	html.dhtml #les_dernieres_rumeurs div.content {
		padding: 12px !important;
		font-size: 1em !important;
	}
		html.dhtml #les_dernieres_rumeurs div.news {
			width: 240px;
			min-height: 95px;
			padding: 10px 12px 0 0;
			background: url(../images/les_dernieres_rumeursl-brd.png) no-repeat right top;
			margin-right: 12px;
			float: left;
			font-size:1.1em;
		}
			html.dhtml #les_dernieres_rumeurs div.news a {
				color: white;
				text-decoration: none;
			}
			html.dhtml #les_dernieres_rumeurs div.news a:hover {
				text-decoration: underline;
			}
			html.dhtml #les_dernieres_rumeurs div.news h3 {
				font-size: 1.3em;
				background: url(../images/bul-plus.png) no-repeat left center;
				padding-left: 18px;
				color: white;
			}
				html.dhtml #les_dernieres_rumeurs div.news h3 a {
					display: block;
				}

/* 2.6.2. Tout sur SOAZ
-----------------------------------------------------------------------------------------------*/

html.dhtml #tout_sur_soaz {}
	html.dhtml #tout_sur_soaz div.content {
		display: none;
	}
	html.dhtml #tout_sur_soaz div.toc ul {
		background-position: 190px 3px !important;
		padding-left: 211px;
	}
		html.dhtml #tout_sur_soaz div.toc li.profil { width: 101px; }
		html.dhtml #tout_sur_soaz div.toc li.philosophie { width: 106px; }
		html.dhtml #tout_sur_soaz div.toc li.equipe { width: 117px; }

/* Tout sur SOAZ - Profil */

html.dhtml #profil {
	padding-left: 200px !important;
}
	html.dhtml #profil h3 {
		font-size: 2em !important;
		position: absolute;
		left: 17px;
	} 
	html.dhtml #profil h4 {
		font-size: 1.3em !important;
		color: #f9ea27;
		margin-bottom: .75em;
	}
	html.dhtml #profil div.col-1 {
		width: 270px !important;
	}
	html.dhtml #profil div.col-2 {
		width: 380px !important;
	}
	html.dhtml #profil .footer {
		clear: both;
		width: 630px;
		font-size: 1.2em;
		padding-top: 1em;
	}
		html.dhtml #profil .footer strong {
			color: #f9ea27;
		}
		html.dhtml #profil .footer img {
			float: right;
			margin-left: 60px;
		}

/* Tout sur SOAZ - Philosophie */

html.dhtml #philosophie {}
	html.dhtml #philosophie h4 {
		font-size: 1em !important;
		color: #f9ea27;
		padding-bottom:16px;
	}
	html.dhtml #philosophie p {
		margin-bottom:0px;
		padding-bottom:0px;
	}

/* Tout sur SOAZ - Équipe */

html.dhtml #equipe {}
	html.dhtml #equipe dl.compact {}
		html.dhtml #equipe dl.compact dt {
			border-bottom: 1px dotted #bda506;
			background: url(../images/bul-plus.png) no-repeat 0 50%;
			padding: .1em 0 .2em 18px;
			font-weight: normal;
			cursor: pointer;
		}
		html.dhtml #equipe dl.compact dt.expanded {
			background-image: url(../images/bul-minus.png);
			border-bottom: none;
			margin-bottom: 1px;
		}
		html.dhtml #equipe dl.compact dd {
			display: none;
			margin: .5em 0 1em 18px;
		}
		html.dhtml #equipe dl.compact dd.expanded {
			display: block;
		}

/* 2.6.3. Prix et mentions
-----------------------------------------------------------------------------------------------*/

html.dhtml #prix_et_mentions {}
	html.dhtml #prix_et_mentions strong.prix {
		/*font-style: italic;*/
	}

/* 2.6.4. Contactez-nous
-----------------------------------------------------------------------------------------------*/

html.dhtml #contactez-nous {}
	html.dhtml #contactez-nous h2.header {
		display: block !important;
		margin: 40px 0 1em 80px;
		font-size: 1.6em;
		font-style: normal;
	}
	html.dhtml #contactez-nous div.content {
		padding-top: 0 !important;
		background: url(../images/contactez-nous-map-bg.png) no-repeat 190px 0;
		width: 822px; height: 350px;
		position: relative;
	}
		html.dhtml #contactez-nous div.vcard {}
			html.dhtml #contactez-nous div.vcard a.org {
				position: absolute;
				left: -9999px;
			}
		html.dhtml #contactGmap {
			width: 576px; height: 323px;
			position: absolute;
			top: 7px; left: 318px;
		}

/* 2.7. Section: Footer
===============================================================================================*/

#footer {
	color: #383124;
	background: #f9ea27;
	text-align: center;
	overflow: hidden;
	height: 24px;
	line-height: 24px;
}
html.dhtml #footer {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	z-index: 2;
	border-top: 1px solid #5B513F;
}
	#footer a {
		color: #383124;
		text-decoration: none;
	}
	#footer a:hover {
		text-decoration: underline;
	}
	html.dhtml #footer a.org {
		position: absolute;
		left: -9999px;
	}

/* 3. PAGES LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

/* 3.1. Common
===============================================================================================*/

#services,
#profile,
#clients {
	color: #888277;
}
	#services a,
	#profile a,
	#clients a {
		color: #888277;
		font-weight: bold;
		text-decoration: none;
	}
	#services a:hover,
	#clients a:hover {
		text-decoration: underline;
	}
	#services h2,
	#profile h2,
	#clients h2 {
		font-size: 1.6em;
	}
	#services .col-1,
	#clients .col-1 {
		width: 50%;
		padding-right: 50px;
	}
	html.dhtml #services .col-1,
	html.dhtml #clients .col-1 {
		width: 430px;
		vertical-align: middle;
	}
	#services .col-2,
	#clients .col-2 {
		width: 50%;
	}
	html.dhtml #services .col-2,
	html.dhtml #clients .col-2 {
		width: 370px;
		vertical-align: middle;
	}

/* 3.2. Intro
===============================================================================================*/

body.avis #site_nav{
display:none;
}


body.intro #site_nav,
body.intro #logo,
body.intro #intro-nav-mini {
	display: none;
}

html.dhtml #intro {
	width: 465px;
	background: url(../images/soaz-logo-big.jpg) no-repeat 0 120px;
	padding-left: 465px;
	padding-top: 2.3em;
	min-height: 210px;
	position: relative;
}

	html.dhtml #intro-catch_phrase {
		width: 600px;
		font-size: 1.6em;
		line-height: 1.1;
		color: #695e49;
		text-align: right;
		position: absolute;
		top: 10px; left: -170px;
	}

	html.dhtml #intro-content {
		font-size: .9em;
		line-height: 1.4;
		color: #888277;
	}

	html.dhtml #intro-nav {
		width: 373px;
		color: #282828;
		position: absolute;
		margin-top: 2em;
	}
		html.dhtml #intro-nav a {
			color: #282828;
			text-decoration: none;
		}
		html.dhtml #intro-nav a:hover {
			text-decoration: underline;
		}
		html.dhtml #intro-nav ul {
			list-style-type: none;
			margin: 0;
		}
			html.dhtml #intro-nav li {
				background-image: url(../images/intro-nav-bg.png);
				margin-bottom: 4px;
				padding: 1px 0;
			}
				html.dhtml #intro-nav div.title {
					font-size: 1.35em;
					text-indent: 214px;
					background: url(../images/bul-arrow-white.png) no-repeat 13px center;
					margin: .2em 0;
				}
				html.dhtml #intro-nav div.content {
					display: none;
					position: relative;
					padding-bottom: 1px;
				}
					html.dhtml #intro-nav ul.internal {
						background-image: none;
						margin: .9em 0 1.1em 217px;
					}
						html.dhtml #intro-nav ul.internal li {
							background: url(../images/bul-plus-dark.png) no-repeat left center;
							font-size: 1.1em;
							margin: .3em 0;
							padding: 0;
							text-indent: 9px;
						}
					html.dhtml #intro-nav ul.external {
						background-color: #f9ea27;
						position: absolute;
						bottom: 1.1em; right: 167px;
					}
						html.dhtml #intro-nav ul.external li {
							background-image: none;
							margin: 0; padding: 2px 4px 2px 9px;
							background: url(../images/bul-plus-dark.png) no-repeat 9px center;
							text-indent: 9px;
						}
							html.dhtml #intro-nav ul.external img {
								vertical-align: middle;
							}

/* 3.3. Services
===============================================================================================*/

html.dhtml #services {
	width: 850px;
}

/* 3.4. Profile
===============================================================================================*/

html.dhtml #profile {
	width: 480px;
	margin-right: 150px;
}

/* 3.5. Clients
===============================================================================================*/

html.dhtml #clients {
	width: 850px;
}
	.clients-info {}
		.clients-info strong {
			display: block;
			font-size: 1.2em;
		}

/* 3.6. Portfolio
===============================================================================================*/

/* 3.6.1. General
-----------------------------------------------------------------------------------------------*/

#portfolio-info {
	margin-bottom: 2em;
}
html.dhtml #portfolio-info {
	width: 400px;
	margin: 0;
}
	#portfolio-info h2 {
		font-size: 1.6em;
		font-weight: bold;
		margin: 0;
	}
	#portfolio-info p {
		margin: .5em 0;
	}
	html.dhtml #portfolio-info div.pdf_portfolio {
		font-weight: bold;
		border-bottom: 1px dotted #BDA506;
		padding-bottom: .2em;
		width: 300px;
		position: relative;
		margin-top: 1em;
		margin-bottom: 10px;
	}
		html.dhtml #portfolio-info div.pdf_portfolio a {
			text-decoration: none;
		}
			html.dhtml #portfolio-info div.pdf_portfolio img {
				position: absolute;
				right: 0; top: 0;
			}

/* 3.6.2. Main portfolio
-----------------------------------------------------------------------------------------------*/

#portfolio {
	color: #695E49;
}
html.dhtml #portfolio {
	position: relative;
	padding: 1px;
}
	#portfolio a {
		color: #695E49;
	}
	
	html.dhtml #portfolio #portfolio-info {
		position: relative;
		left: 50%;
	}

	html.dhtml #projects_gallery {
		position: relative;
		clear: both;
		width: 913px;
	}

		html.dhtml #projects_gallery div.portfolio-nav {}
			html.dhtml #projects_gallery div.portfolio-nav div.prev_project,
			html.dhtml #projects_gallery div.portfolio-nav div.next_project {
				width: 32px; height: 158px;
				position: absolute; top: 55px;
			}
			html.dhtml #projects_gallery div.portfolio-nav div.prev_project {
				right: 100%;
				background-image: url(../images/prev_project-btn.png);
			}
			html.dhtml #projects_gallery div.portfolio-nav div.prev_project-hover {
				background-image: url(../images/prev_project-hover-btn.png) !important;
			}
			html.dhtml #projects_gallery div.portfolio-nav div.next_project {
				left: 100%;
				background-image: url(../images/next_project-btn.png);
			}
			html.dhtml #projects_gallery div.portfolio-nav div.next_project-hover {
				background-image: url(../images/next_project-hover-btn.png) !important;
			}
	
		html.dhtml #projects-wrapper {
			width: 860px; /* 5 * 172 */
			height: 317px; /* 253px + 84px - 20px = 317 */
			padding-top: 35px;
			overflow: hidden;
			position: relative;
			margin: 0 auto;
		}
			#projects {
				margin: 0;
			}
			html.dhtml #projects {
				width: 999999px; height: 100%;
			}
			html.dhtml #projects:after {
				content: '';
				display: block;
				height: 1px;
				clear: both;
			}
				#projects li {
					margin: 1em 0;
					border: 1px solid;
					padding: 1em;
					list-style-type: none;
				}
				html.dhtml #projects li {
					margin: 0; border: 0; padding: 0;
					float: left;
					position: relative;
					top: 0;
				}
					html.dhtml #projects li div.preview {
						margin: 0 -15px;
						position: relative;
					}
						html.dhtml #projects li div.preview img.bg,
						html.dhtml #projects li div.preview div.bg {
							width: 202px; height: 204px; /* oryginal is 251px */
						}
						#projects li div.preview div.bg {
							display: none;
						}
						html.dhtml #projects li div.preview img.image {
							width: 152px; /* oryginal is 191px */
							position: absolute;
							top: 50%; left: 50%;
							margin-top: -93px;
							margin-left: -76px;
							cursor: pointer;
						}

		html.dhtml #projects_gallery div.project-description {
			display: none;
			position: absolute;
			width: 243px; height: 55px;
			padding: 23px 271px 6px 274px;
			margin: 228px 0 0 -284px;
			background: url(../images/project-description-bg.png) no-repeat center center;
			line-height: 1.2em;
			cursor: pointer;
		}
			#projects_gallery div.project-description h3 {
				font-size: 1em;
				font-weight: bold;
				margin: 0;
			}
			#projects_gallery div.project-description p {
				margin: .1em 0;
			}
			html.dhtml #projects_gallery div.project-description div.more {
				color: #3f382c;
				background: #f9ea27 url(../images/page_suivante-bg.png) repeat-y 0 0;
				font-size: .9em;
				text-align: right;
				position: absolute;
				right: 271px; bottom: 9px;
			}
				html.dhtml #projects_gallery div.project-description div.more a {
					display: block;
					padding: 2px 5px 1px 37px;
					white-space: nowrap;
					text-decoration: none;
				}

/* 3.6.3. Portfolio details
-----------------------------------------------------------------------------------------------*/

#portfolio-details {
	color: #695E49;
}
html.dhtml #portfolio-details {
	width: 983px;
	position: relative;
}
html.dhtml #portfolio-details:after {
	content: "";
	display: block;
	height: 1px;
	clear: both;
}
	#portfolio-details a {
		color: #695E49;
	}

	html.dhtml #portfolio-details #portfolio-info {
		display: inline;
		float: right;
		margin-right: 52px;
	}

	html.dhtml #portfolio-details div.projects-nav {}
		html.dhtml #portfolio-details div.projects-nav div.fermer {
			color: #3f382c;
			background: #f9ea27 url(../images/page_suivante-bg.png) repeat-y 0 0;
			padding: 3px 4px 4px 36px;
			font-size: .8em;
			text-align: right;
			cursor: pointer;
			position: absolute;
			right: 5px; top: 5px;
		}
			html.dhtml #portfolio-details div.projects-nav div.fermer a {
				text-decoration: none;
			}
		html.dhtml #portfolio-details div.projects-nav div.prev_project,
		html.dhtml #portfolio-details div.projects-nav div.next_project {
			position: absolute;
			width: 32px; height: 158px;
			top: 50%; margin-top: -79px;
		}
		html.dhtml #portfolio-details div.projects-nav div.prev_project {
			left: -522px;
			background-image: url(../images/prev_project-btn.png);
		}
		html.dhtml #portfolio-details div.projects-nav div.prev_project-hover {
			background-image: url(../images/prev_project-hover-btn.png) !important;
		}
		html.dhtml #portfolio-details div.projects-nav div.next_project {
			right: -56px;
			background-image: url(../images/next_project-btn.png);
		}
		html.dhtml #portfolio-details div.projects-nav div.next_project-hover {
			background-image: url(../images/next_project-hover-btn.png) !important;
		}
			html.dhtml #portfolio-details div.projects-nav div.prev_project a,
			html.dhtml #portfolio-details div.projects-nav div.next_project a {
				display: block;
				width: 100%; height: 100%;
			}

	html.dhtml #portfolio-details div.project_description {
		width: 369px;
		float: right; display: inline;
		clear: right;
		position: relative;
		padding: 0 18px;
		margin-right: 55px;
		background-color: white;
	}
		#portfolio-details div.project_description div.date {
			font-size: .8em;
			margin: 9px 0 1em;
		}
		#portfolio-details div.project_description h3 {
			margin: .75em 0;
			font-weight: bold;
		}
		#portfolio-details div.project_description p {
			margin: 1em 0;
			font-size: 0.9em;
		}
		#portfolio-details div.project_description ul.preview-thumbnails {
			margin: 1em 0;
		}
		html.dhtml #portfolio-details div.project_description ul.preview-thumbnails {
			height: 72px;
			margin: .5em 0 1em;
		}
			#portfolio-details div.project_description ul.preview-thumbnails li {
				list-style-type: none;
				display: inline;
			}
			html.dhtml #portfolio-details div.project_description ul.preview-thumbnails li {
				width: 171px; height: 72px;
				position: relative;
				float: left;
				margin: 0 -50px 0 -40px;
			}
				html.dhtml #portfolio-details div.project_description ul.preview-thumbnails div.wrapper { /* this element is just to hack IE6 */
					height: 100%;
					background-image: url(../images/project-small_images-bg.png);
				}
					html.dhtml #portfolio-details div.project_description ul.preview-thumbnails img {
						position: absolute;
						top: 5px; left: 43px;
						z-index: 1;
					}
					html.dhtml #portfolio-details div.project_description ul.preview-thumbnails img.selected,
					html.dhtml #portfolio-details div.project_description ul.preview-thumbnails img.hover {
						border: 3px solid #F9EA27;
						top: 2px; left: 40px;
					}
		html.dhtml #portfolio-details div.preview-wrapper {
			position: absolute;
			bottom: -12px; right: 100%;
			width: 470px; height: 360px;
		}
			#portfolio-details ul.preview {
				margin: 0;
			}
			html.dhtml #portfolio-details ul.preview {
				position: absolute;
				bottom: 0; right: 0;
				display: none;
			}
				#portfolio-details ul.preview li {
					list-style-type: none;
				}
				html.dhtml #portfolio-details ul.preview li {
					padding: 5px;
					background-color: white;
				}
					#portfolio-details ul.preview li img {
						margin: 1em;
						border: 2px solid white;
					}
					html.dhtml #portfolio-details ul.preview li img {
						display: block;
						border: none;
						margin: 0;
					}