/*---

Pavageschenail.com // CSS Global
Auteur : Eric Chenail - Arteca Design Inc.
Derniere revision : 08 mai 2009 - 11:32

Notes additionelles : 

---*/

/* ---------------------------------------- */
/* Style 'Basics'				 	  		*/
/* ---------------------------------------- */

.toggler {
	display: block;
	background: url("../img/icn_fleche.gif") 5px 8px no-repeat #e4e4e4;
	padding: 5px 5px 5px 20px;
	margin-top: 5px;
	cursor: pointer;
}

.active {
	background: url("../img/icn_fleche_bas.gif") 5px 9px no-repeat #a80000;
	color: #FFF;
}

body.sites dd p {
	margin-top:10px;
}

body.sites dd img {
	float:left;
	margin-top: 5px;
}

body.sites dd div.location {
	margin-left: 271px;
	padding-top: 10px;
}

body {
	/* background: url("../img/bg_main_centered.gif") no-repeat 50% 30% fixed #151515; */
	font-family: "Lucida Grande", Verdana, "Bitstream Vera Sans", Arial, Helvetica, sans-serif; 
	font-size: 12px;
	line-height: 14px;
	color: #151515;
	color: #333;
	text-align: center;
    /* -moz-opacity: 0.9999; */
	background-color: #202020;
	background: url("../img/bg_main_101010.jpg") repeat-y 50% 0 fixed #1E1E1E;
}

a { color: #FFF; }

.imgLeft 	{ float: left; }
.imgRight 	{ float: right; }

div.wrapper {
	width: 903px;
	margin: 0 auto;
	text-align: left;
	background-color: #FFF;
	position: relative;	
}

#header {
	padding-top: 222px;
	background: url("../img/bg_header.jpg") no-repeat #CCC;
	position: relative;
}

body.accueil #header {
	padding-top: 550px;
	background: url("../img/bg_header_accueil.jpg") no-repeat #CCC;

}

#header h1 a {
	text-indent: -5000px;
	width: 287px;
	height: 92px;
	background: url("../img/logo_chenail.gif") no-repeat;
	position: absolute;
	left: 40px;
	top: 45px;
}

body.accueil #header h1 a { 
	background: url("../img/logo_chenail_lg.gif") no-repeat;
	width: 398px;
	height: 127px;
	top: 170px;
}

#header h2 {
	text-indent: -5000px;
	width: 223px;
	height: 35px;
	background: url("../img/title_partenaire_construction.gif") no-repeat;
	position: absolute;
	right: 40px;
	top: 89px;
}

body.accueil #header h2 { 
	background: url("../img/title_partenaire_construction_lg.gif") no-repeat;
	width: 263px;
	height: 49px;	
	top: 420px;
	right: 60px;
}

body.nouvelles h2 {
	padding-bottom: 10px;
}

#mainNav {
	position: absolute;
	left: 0;
	top: 188px;
	width: 903px;
	background: url("../img/bg_mainNav.gif") repeat-x 0 0;
}

body.accueil #mainNav { top: 516px; }

#mainNav ul { width: 100%; float: left; }

#mainNav ul li { 
	float: left; 
	padding-bottom: 6px;
	background: url("../img/border_under_mainNav_items.gif") no-repeat 50% 100%;
}

#mainNav ul li a {
	text-transform: uppercase;
	color: #FFF;
	text-decoration: none;
	/* margin-left: 5px; */
	/* text-shadow: #000 0px 1px 5px; */
	display: block;
	padding: 2px 0 0;
	line-height: 28px;
	font-family: Arial, Helvetica, sans-serif;
	border-right: 1px solid #b6b6b6;
	color: #d5aba8;
	color: #b87975;
	line-height: 26px;
}

#mainNav ul li a span {
	padding: 0 25px;
	display: block;
}

#mainNav ul li.accueil a span {
	margin-left: 15px;
}

#mainNav ul li a:hover { 
	color: #FFF;
	color: #e1cecc;
}

body.accueil #mainNav ul li.accueil a,
body.entreprise #mainNav ul li.entreprise a,
body.expertises #mainNav ul li.expertises a,
body.equipe #mainNav ul li.equipe a,
body.realisations #mainNav ul li.realisations a,
body.contact #mainNav ul li.contact a {
	color: #FFF;
	background: url("../img/bg_mainNav_hover.gif") repeat-x;
}

div.entreprise,
div.equipe,
div.expertises,
div.realisations {
	display: none;
}

body.entreprise div.entreprise,
body.expertises div.expertises,
body.equipe div.equipe,
body.realisations div.realisations  { 
	display: block;
}

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

.subNav {
	/* padding: 15px 40px 28px; */

	padding-left: 27px;
	/* display: none; */
	border-top: 1px solid #555;
	background-color: #1e1e1e;
	background: url("../img/bg_submenu.gif") 50% 100% no-repeat #101010;
	float: left;
	width: 876px;
	padding-bottom: 12px; 
}

.subNav ul li {
	float: left;
	/* margin-right: 30px; */
	font-size: 11px;
}

body.realisations .subNav ul li {
	width: 170px;
	/* background-color: red; */
}

.subNav ul li a {
	color: #676767;
	text-decoration: none;
	display: block;
	padding: 12px 12px 0;
	text-transform: uppercase;
}

body.realisations .subNav ul li a {
	/* border-bottom: 1px solid #666; */
	/* width: 200px; */
	/* height: 25px; */
}

.subNav ul li a:hover {
	color: #a6a6a6;
}

body.presentation .subNav ul li.presentation a,
body.histoire .subNav ul li.histoire a,
body.sites .subNav ul li.sites a,
body.affiliations .subNav ul li.affiliations a,
body.environnement .subNav ul li.environnement a,
body.produits .subNav ul li.produits a,
body.travaux .subNav ul li.travaux a,
body.ressources .subNav ul li.ressources a,
body.recrutement .subNav ul li.recrutement a,
body.poste_lacolle .subNav ul li.poste_lacolle a,
body.immobillier .subNav ul li.immobillier a,
body.tunnel_melocheville .subNav ul li.tunnel_melocheville a,
body.rampes_mirabel .subNav ul li.rampes_mirabel a,
body.tunnel_hippolyte .subNav ul li.tunnel_hippolyte a,
body.usine_filtration .subNav ul li.usine_filtration a,
body.cp_lachine .subNav ul li.cp_lachine a,
body.egouts_aqueducs .subNav ul li.egouts_aqueducs a,
body.deneigement .subNav ul li.deneigement a,
body.pavages .subNav ul li.pavages a {
	color: #FFF;
}

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


#content {
	padding: 40px 40px 25px;
	position: relative;
	border-top: 1px solid #555;
	clear: both;
	background: url("../img/bg_content_temp.gif") repeat-y;
}

body.sites #content {
	background:none;
}

body.realisations #content,
body.expertises #content {
	background: url("../img/bg_content_realisations_temp.gif") repeat-y;	
}

#content h3 {
	text-transform: uppercase;
	font-size: 19px;
	font-weight: normal;
	color: #a80000;

	border-bottom: 1px solid #cb6666;
	padding-bottom: 15px;
	margin-bottom: 20px;
	line-height: 19px;
}

body.nouvelles #content div.imgLeft h3 {
	border: none;
	padding: 13px 40px 0; 
}

#content h4 {
	font-size: 16px;
	padding-top: 20px;
	margin-bottom: 15px;
	line-height: 16px;
	color: #333;
}

#content h5 {
	font-size: 14px;
	font-weight: bold;
	/* padding-top: 15px; */
	margin-bottom: 15px;
	line-height: 16px;
}

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

#content p.retour {
	font-size: 11px;
}

#content div.section {
	margin-left: 310px;
}

body.realisations #content div.section,
body.expertises #content div.section {
	margin-left: 420px;
}

#content a {
	color: #a80000;
}

#content div.section ul,
#content div.section ol,
body.nouvelles #content ul {
	margin-left: 35px;
	margin-bottom: 7px;
	font-size: 11px;
	color: #666;
}

#content div.section li,
body.nouvelles #content li {
	padding-bottom: 8px;
}

#content div.section ul li,
body.nouvelles #content ul li {
	list-style-type: disc;
}

body.nouvelles #content ul li a {
	color: #666;
}

body.nouvelles #content ul li a:hover {
	color: #a80000;
}

body.nouvelles #content ul {
	margin-left: 55px;
}

#content div.section ol li {
	list-style-type: decimal;
}

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

body.sites #content ul {
	margin-left: 16px;
	margin-top: 15px;
}

body.sites #content div.location {
	border-bottom: 1px solid #DDD;
	padding-bottom: 13px;
}

body.expertises #content ul#produits {
	margin-bottom: 20px;
}

body.affiliations #content {
	background-image: none;
}

body.affiliations #content div.section {
	margin-left: 0;
	height: 400px;
}

body.affiliations #content ul {
	padding-top: 15px;
	margin-left: 10px;
}
body.affiliations #content ul li {
	float: left;
	text-indent: -5000px;
	list-style-type: none;
}

body.affiliations #content ul li.iso9001 {
	width: 382px;
	height: 186px;
	background: url("../img/logo_iso9001_lg.gif") no-repeat 50% 50%;
}

body.affiliations #content ul li.apchq {
	width: 386px;
	height: 186px;
	background: url("../img/logo_apchq_lg.gif") no-repeat 50% 50%;
}

body.affiliations #content ul li.qualibeton {
	width: 382px;
	height: 126px;
	background: url("../img/logo_qualibeton_lg.gif") no-repeat 50% 100%;

}

body.affiliations #content ul li.rbq {
	width: 386px;
	height: 126px;
	background: url("../img/logo_rbq_lg.gif") no-repeat 100% 50%;

}

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

body.ok #content {
	height:375px;
}

body.contact form {
	/* border: 1px solid red; */
	/* padding-top: 20px; */
}

body.recrutement form {
	/* border: 1px solid red; */
}

body.contact form dt {
	/* font-weight: bold; */
	padding: 8px 0 4px;
	color: #666;
}

body.contact form input.textfield,
body.contact form textarea {
	font-size: 13px;
	color: #666;
	padding: 3px;
	width: 200px;
	margin: 0;
	margin-left:5px;
}

body.contact form textarea {
	width: 414px;
	height: 160px;
	margin-bottom: 13px;
}

body.contact form input.textfield {
	margin-right:10px;
}

body.recrutement form dl {
	clear: left;
}

body.recrutement form dt {
	padding: 5px 0 4px;
	color: #666;
	width:175px;
	float:left;
	margin: 10px 0;
	text-align:right;
}

body.recrutement form dl.lieu dt {
	padding: 2px 0 4px;	
}

body.recrutement form dl.cv dt {
	padding: 5px 0 4px;	
}

body.recrutement form dd {
	/* float: left; */
	margin-left: 185px;
}

body.recrutement form input.textfield,
body.recrutement form textarea,
body.recrutement form select.mediumSelect,
body.recrutement form input.file {
	font-size: 13px;
	color: #666;
	padding: 3px;
	width: 275px;
	margin: 10px 0;
}

body.recrutement form input#codepostal {
	width:75px;
}

body.recrutement form input#ville,
body.recrutement form input#province,
body.recrutement form input#telephone {
	width:200px;
}


body.recrutement form div.formSubmission {
	margin-left: 185px;
}

body.contact form .fValidator-msg,
body.recrutement form .fValidator-msg {
	/*line-height: 21px;*/
	font-size: 11px;
	color: #a80000;
}

body.recrutement form .fValidator-msg {
	display:block;
}

body.recrutement form dl.cv .fValidator-msg {
	margin-bottom:10px;
}

body.contact form p {
	margin-bottom: 8px;
}

body.contact #confirmation {
	padding: 20px;
	background-color: #E99500;
	color: #FFF;
	margin-bottom: 15px;
	display: none;
}

body.contact #content div.section #adresse {
	height:100px;
	position: absolute;
	left: 40px;
	top: 300px;
}

body.contact #content div.section #adresse address {
	font-style: normal;
}

body.contact #content div.section #adresse ul {
	padding-top: 15px;
	margin-left: 0;
}

body.contact #content div.section ul li {
	list-style-type: none;
	padding-bottom: 0;
	color: #333;
}

#content div.imgLeft {
	width: 315px;
	position: absolute;
	left: 0;
	top: 27px;
	border-top: 15px solid #FFF;
	border-bottom: 15px solid #FFF;
}

body.nouvelles #content div.imgLeft {
	border: none;
}

body.realisations #content div.imgLeft,
body.expertises #content div.imgLeft {
	width: 425px;
}

#content p.caption {
	position: absolute;
	left: 0;
	top: 267px;
	font-size: 11px;
	color: #999;
	width: 285px;
	padding: 15px;
}

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


body.realisations #content table {
	margin-bottom: 25px;
	width: 100%;
}

body.realisations #content table td {
	padding: 7px;
	border: 1px solid #CCC;
}

body.realisations #content dl {
	padding: 15px 0;
	border-top: 1px solid #CCC;
	color: #a2a2a2;
}

body.realisations #content dl dt {
	float: left;
	margin-right: 4px;
	font-weight: bold;
}

body.realisations #content dl dt.phase {
	color: #333;
}

body.realisations #content dl dd.phase {
	color: #a80000;
}

body.realisations #content dl dt.phase,
body.realisations #content dl dd.phase {
	padding-bottom: 5px;
}


body.immobillier #content div.section,
body.pavages #content div.section  {
	height: 525px;
}

body.rampes_mirabel #content div.section,
body.usine_filtration #content div.section,
body.egouts_aqueducs #content div.section,
body.deneigement #content div.section  {
	height: 393px;
}

body.ressources #content h4 {
	padding-top: 0;
}

body.ressources #content h4 span {
	display: block;
	font-weight: normal;
	font-size: 12px;
	color: #999;
}

body.environnement #content {
	background-image: none;
}

body.environnement #content div.imgLeft {
	padding-left: 35px;
}

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

/**
Stylesheet: Slideshow.css
	CSS for Slideshow.

License:
	MIT-style license.

Copyright:
	Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
	
HTML:
	<div class="slideshow">
		<div class="slideshow-images" />
		<div class="slideshow-captions" />
		<div class="slideshow-controller" />
		<div class="slideshow-loader" />
		<div class="slideshow-thumbnails" />
	</div>
	
Notes:
	These next four rules are set by the Slideshow script.
	You can override any of them with the !important keyword but the slideshow probably will not work as intended.
*/

.expertise .slideshow { 
	background: url("../img/expertises/01.jpg");
	background: url("../img/expertises/02.jpg");
	background: url("../img/expertises/03.jpg");
	background: url("../img/expertises/04.jpg");
	background: url("../img/expertises/05.jpg");
	background: url("../img/expertises/06.jpg");
	background: url("../img/expertises/07.jpg");
	background: url("../img/expertises/08.jpg");
	background: url("../img/expertises/09.jpg");
	background: url("../img/expertises/10.jpg");
	background: url("../img/expertises/11.jpg");
	background: url("../img/expertises/12.jpg");
	background: url("../img/expertises/13.jpg");
	background: url("../img/expertises/14.jpg");
	background: url("../img/expertises/15.jpg");
	background: url("../img/expertises/16.jpg");
	background: url("../img/expertises/17.jpg");
	background: url("../img/expertises/18.jpg");
	background: url("../img/expertises/19.jpg");
	background: url("../img/expertises/20.jpg");
	background: url("../img/expertises/21.jpg");
	background: url("../img/expertises/22.jpg");
	background: url("../img/expertises/23.jpg");
	background: url("../img/expertises/24.jpg");
}
 
.poste_lacolle .slideshow { 
	background: url("../img/realisations/poste_lacolle/01.jpg");
	background: url("../img/realisations/poste_lacolle/02.jpg");
	background: url("../img/realisations/poste_lacolle/03.jpg");
	background: url("../img/realisations/poste_lacolle/04.jpg");
	background: url("../img/realisations/poste_lacolle/05.jpg");
	background: url("../img/realisations/poste_lacolle/06.jpg");
	background: url("../img/realisations/poste_lacolle/07.jpg");
	background: url("../img/realisations/poste_lacolle/08.jpg");
	background: url("../img/realisations/poste_lacolle/09.jpg");
	background: url("../img/realisations/poste_lacolle/10.jpg");
	background: url("../img/realisations/poste_lacolle/11.jpg");
}
 
.rampes_mirabel .slideshow { 
	background: url("../img/realisations/rampes_mirabel/01.jpg");
	background: url("../img/realisations/rampes_mirabel/02.jpg");
	background: url("../img/realisations/rampes_mirabel/03.jpg");
} 

.usine_filtration .slideshow {  
	background: url("../img/realisations/usine_filtration/01.jpg");
	background: url("../img/realisations/usine_filtration/02.jpg");
	background: url("../img/realisations/usine_filtration/03.jpg");
	background: url("../img/realisations/usine_filtration/04.jpg");
}

.tunnel_melocheville .slideshow {
	background: url("../img/realisations/tunnel_melocheville/01.jpg");
	background: url("../img/realisations/tunnel_melocheville/02.jpg");
	background: url("../img/realisations/tunnel_melocheville/03.jpg");
	background: url("../img/realisations/tunnel_melocheville/04.jpg");
	background: url("../img/realisations/tunnel_melocheville/05.jpg");
	background: url("../img/realisations/tunnel_melocheville/06.jpg");
	background: url("../img/realisations/tunnel_melocheville/07.jpg");
	background: url("../img/realisations/tunnel_melocheville/08.jpg");
	background: url("../img/realisations/tunnel_melocheville/09.jpg");
	background: url("../img/realisations/tunnel_melocheville/10.jpg");
	background: url("../img/realisations/tunnel_melocheville/11.jpg");
	background: url("../img/realisations/tunnel_melocheville/12.jpg");
	background: url("../img/realisations/tunnel_melocheville/13.jpg");
	background: url("../img/realisations/tunnel_melocheville/14.jpg");
	background: url("../img/realisations/tunnel_melocheville/15.jpg");
	background: url("../img/realisations/tunnel_melocheville/16.jpg");
	background: url("../img/realisations/tunnel_melocheville/17.jpg");
	background: url("../img/realisations/tunnel_melocheville/18.jpg");
}

.cp_lachine .slideshow {
	background: url("../img/realisations/cp_lachine/01.jpg");
	background: url("../img/realisations/cp_lachine/02.jpg");
	background: url("../img/realisations/cp_lachine/03.jpg");
	background: url("../img/realisations/cp_lachine/04.jpg");
}

.egouts_aqueducs .slideshow {
	background: url("../img/realisations/egouts_aqueducs/01.jpg");
	background: url("../img/realisations/egouts_aqueducs/02.jpg");
	background: url("../img/realisations/egouts_aqueducs/03.jpg");
	background: url("../img/realisations/egouts_aqueducs/04.jpg");
}

.immobillier .slideshow {
	background: url("../img/realisations/immobillier/01.jpg");
	background: url("../img/realisations/immobillier/02.jpg");
	background: url("../img/realisations/immobillier/03.jpg");
	background: url("../img/realisations/immobillier/04.jpg");
	background: url("../img/realisations/immobillier/05.jpg");
	background: url("../img/realisations/immobillier/06.jpg");
	background: url("../img/realisations/immobillier/07.jpg");
	background: url("../img/realisations/immobillier/08.jpg");
	background: url("../img/realisations/immobillier/09.jpg");
	background: url("../img/realisations/immobillier/10.jpg");
	background: url("../img/realisations/immobillier/11.jpg");
	background: url("../img/realisations/immobillier/12.jpg");
	background: url("../img/realisations/immobillier/13.jpg");
	background: url("../img/realisations/immobillier/14.jpg");
	background: url("../img/realisations/immobillier/15.jpg");
}

.deneigement .slideshow {
	background: url("../img/realisations/deneigement/01.jpg");
	background: url("../img/realisations/deneigement/02.jpg");
	background: url("../img/realisations/deneigement/03.jpg");
	background: url("../img/realisations/deneigement/04.jpg");
	background: url("../img/realisations/deneigement/05.jpg");
}

.pavages .slideshow {
	background: url("../img/realisations/pavages/01.jpg");
	background: url("../img/realisations/pavages/02.jpg");
	background: url("../img/realisations/pavages/03.jpg");
	background: url("../img/realisations/pavages/04.jpg");
	background: url("../img/realisations/pavages/05.jpg");
	background: url("../img/realisations/pavages/06.jpg");
	background: url("../img/realisations/pavages/07.jpg");
	background: url("../img/realisations/pavages/08.jpg");
	background: url("../img/realisations/pavages/09.jpg");
	background: url("../img/realisations/pavages/10.jpg");
	background: url("../img/realisations/pavages/11.jpg");
	background: url("../img/realisations/pavages/12.jpg");
}

.slideshow {
	display: block;
	position: relative;
	margin-left:-120px;
	z-index: 0;
}
.slideshow-images {
	display: block;
	overflow: hidden;
	position: relative;
}		
.slideshow-images img {
	display: block;
	position: absolute;
	z-index: 1;
}		
.slideshow-thumbnails {
	overflow: hidden;
}

/**
HTML:
	<div class="slideshow-images">
		<img />
		<img />
	</div>
	
Notes:
	The images div is where the slides are shown.
	Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/

.slideshow-images {
	height: 300px;
	width: 400px;
}		
.slideshow-images-visible { 
	opacity: 1;
}	
.slideshow-images-prev { 
	opacity: 0; 
}
.slideshow-images-next { 
	opacity: 0; 
}
.slideshow-images img {
	float: left;
	left: 0;
	top: 0;
}	

/**
Notes:
	These are examples of user-defined styles.
	Customize these classes to your usage of Slideshow.
*/

.slideshow {
	height: 320px;
	margin: 0 auto;
	width: 425px;
}
.slideshow a img {
	border: 0;
}

/**
HTML:
	<div class="slideshow-captions">
		...
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the captions animation.
*/

.slideshow-captions {
	background: #000;
	bottom: 0;
	color: #FFF;
	font: normal 12px/22px Arial, sans-serif;
	left: 0;
	overflow: hidden;
	position: absolute;
	text-indent: 10px;
	width: 100%;
	z-index: 10000;
}
.slideshow-captions-hidden {
	height: 0;
	opacity: 0;
}
.slideshow-captions-visible {
	height: 22px;
	opacity: .7;
}

/**
HTML:
	<div class="slideshow-controller">
		<ul>
			<li class="first"><a /></li>
			<li class="prev"><a /></li>
			<li class="pause play"><a /></li>
			<li class="next"><a /></li>
			<li class="last"><a /></li>
		</ul>
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the controller animation.
*/

.slideshow-controller {
	background: url(controller.png) no-repeat;
	height: 42px;
	left: 50%;
	margin: -21px 0 0 -119px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	width: 238px;
	z-index: 10000;
}
.slideshow-controller * {
	margin: 0;
	padding: 0;
}
.slideshow-controller-hidden { 
	opacity: 0;
}
.slideshow-controller-visible {
	opacity: 1;
}
.slideshow-controller a {
	cursor: pointer;
	display: block;
	height: 18px;
	overflow: hidden;
	position: absolute;
	top: 12px;
}
.slideshow-controller a.active {
	background-position: 0 18px;
}
.slideshow-controller li {
	list-style: none;
}
.slideshow-controller li.first a {
	background-image: url(controller-first.gif);
	left: 33px;
	width: 19px;
}
.slideshow-controller li.last a {
	background-image: url(controller-last.gif);
	left: 186px;
	width: 19px;
}
.slideshow-controller li.next a {
	background-image: url(controller-next.gif);
	left: 145px;
	width: 28px;
}
.slideshow-controller li.pause a {
	background-image: url(controller-pause.gif);
	left: 109px;
	width: 20px;
}
.slideshow-controller li.play a {
	background-position: 20px 0;
}
.slideshow-controller li.play a.active {
	background-position: 20px 18px;
}
.slideshow-controller li.prev a {
	background-image: url(controller-prev.gif);
	left: 65px;
	width: 28px;
}

/**
HTML:
	<div class="slideshow-loader" />
	
Notes:
	Customize the hidden / visible classes to affect the loader animation.
*/

.slideshow-loader {
	height: 28px;
	right: 0;
	position: absolute;
	top: 0;
	width: 28px;
	z-index: 10001;
}
.slideshow-loader-hidden {
	opacity: 0;
}
.slideshow-loader-visible {
	opacity: 1;
}

/**
HTML:
	<div class="slideshow-thumbnails">
		<ul>
			<li><a class="slideshow-thumbnails-active" /></li>
			<li><a class="slideshow-thumbnails-inactive" /></li>
			...
			<li><a class="slideshow-thumbnails-inactive" /></li>
		</ul>
	</div>
	
Notes:
	Customize the active / inactive classes to affect the thumbnails animation.
	Use the !important keyword to override FX without affecting performance.
*/

.slideshow-thumbnails {
	/* bottom: -165px; */

	top: 320px;
	height: 65px;
	left: 0;
	position: absolute;
	width: 100%;
	height: 300px !important;
}
.slideshow-thumbnails * {
	margin: 0;
	padding: 0;
}
.slideshow-thumbnails ul {
	height: 65px;
	left: 0;
	position: absolute;
	top: 15px;
	width: 10000px;
	width: 425px !important;
	height: 300px !important;
	padding: 15px;

	/* background-color: red; */
}
.slideshow-thumbnails li {
	float: left;
	list-style: none;
	margin: 0 15px 15px 0;
	position: relative;
}
.slideshow-thumbnails a {
	display: block;
	float: left;
	padding: 1px;
	position: relative; 
}
.slideshow-thumbnails a:hover {
	background-color: #FFF !important;
	opacity: 1 !important;
}
.slideshow-thumbnails img {
	display: block;
}
.slideshow-thumbnails-active {
	background-color: #9FF;
	background-color: #a80000;

	opacity: 1;
}

.slideshow-thumbnails-active a:hover {
	background-color: #a80000;	!important;
}

.slideshow-thumbnails-inactive {
	background-color: #FFF;
	opacity: .65;
}

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


#panels {
	padding: 25px 0;
	overflow: auto;
	height: 102px;
	background: url("../img/logo_affiliations_footer.gif") no-repeat 0 100%;

}

/*body.accueil #panels {
	height:auto;
}

#panels #nouvelles {
	display: none;
}

body.accueil #panels #nouvelles {
	display: block;
	width: 550px;
	padding-bottom: 25px;
	color:#FFF;
}*/

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

#footer {
	background-color: #470500;
	padding: 0 40px 8px;
	line-height: 1.6em;
	background: url("../img/bg_footer.jpg") no-repeat 0 85%;
}

#footer p {
	text-align : left;
	color: #b59795;
	color: #916764;
	font-size: 9px;
}

/*#footer #nouvelles p {
	font-size: 12px;
	padding-bottom: 45px;
}

#footer #nouvelles p a {
	display: block;
	padding: 5px 0;
	color: #b59795;
}

#footer #nouvelles p a:hover {
	color: #FFF;
}*/

#footer h3 {
	text-transform: uppercase;
	font-size: 18px;
	font-weight: normal;
	padding-bottom: 15px;
}

#footer h2 {
	font-size: 12px;
	font-weight: normal;
	padding-bottom: 10px;
}