@import "slimbox.css";

/****************************************************************************/
/*                            CSS GENERIQUES                                */
/****************************************************************************/


body {
	color:#767676;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	background:#f3f0e9 url(../images/body-bg.jpg) repeat-x 0 0;
	margin:0;
	padding:0;	
}

img {
	border:none;
	padding:0;
	margin:0;
}

#navigation ul, .langues ul, .fil ul {
	list-style:none;
	margin:0;
	padding:0;
}

.cleaner {
	clear:both;
	width:1px;
	height:1px;
	line-height:1px;
}

p {
	margin:0;
	padding:0 0 10px 0;
}

form, fieldset, input { margin:0; padding:0; }
fieldset { border:none; }

/* Les titres */
h1, h2, h3 { padding:0; margin:0; }
h1, h1 a { font-size:18px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; color:#000; text-decoration:none }
h2, h2 a { font-size:14px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; color:#000; text-decoration:none}
h3, h3 a { font-size:14px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#616161; text-decoration:none}



.border { margin:15px 0; }
p.link { padding:0; }
p.link a{ background:url(../images/pictos/picto-link.gif) no-repeat 0 center; padding-left:15px; color:#e82c18; text-decoration:none; font-size:12px; }
p.red { color:#e82c18; }


/****************************************************************************/
/*                                CSS PAGES                                 */
/****************************************************************************/

/* PAGE */
#page {
	margin:0 auto;
	width:904px;
	padding:0 8px;
	background:url(../images/page-border-bg.png) repeat-y 0 0!important;
	background:none;
	filter:none!important;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/page-border-bg.png', sizingMethod='scale');

}

/* HEADER */
#header {
	width:904px;
}

/** Navigation **/
#header #navigation {
	width:874px;
	background:url(../images/navigation-bg.jpg) no-repeat 0 0;
	height:24px;
	padding:0 15px;
	position:relative;
}
#navigation ul {
	width:874px;
	height:100%;
}
#navigation ul li {
	float:left;
	padding:0 12px;
}
#navigation ul li a {
	color:#FFFFFF;
	font-weight:bold;
	text-transform:uppercase;
	text-decoration:none;
	line-height:24px;
	display:block;
}
#navigation ul li a:hover,
#navigation ul li.on a {
	color:#f4e400;
	display:block;
}
#navigation ul li.membre {
	float:right;
	background:url(../images/pictos/picto-espace-membre.jpg) no-repeat 0 0;
	padding:0 15px 0 25px;
}


/* CONTENER */
#contener {
	width:844px;
	clear:both;
	padding:0 30px;
}

/*** Langues ***/
.langues {
	position:relative;
	margin-left:-30px!important;
	*margin-left:-15px;
	background:url(../images/flag-bg.jpg) no-repeat 0 0;
	padding:15px 0 25px;
	float:left;
}
.langues ul {
	height:100%;
}
.langues li {
	padding-bottom:5px;
	font-size:14px;
	color:#000;
}
.langues li a {
	margin-right:10px;
}
.langues li img {
	vertical-align:middle;
}

/*** Fil d'ariane ***/
.fil {
	float:right;
	padding:20px 0 0;
	position:relative;
}
.fil ul li {
	float:left;
	padding-left:5px;
	font-size:11px;
	color:#767676;
}
.fil ul li a {
	color:#e82c18;
}
.fil ul li a:hover {
	text-decoration:none;
}

/** Colonne de gauche **/
#contener #col-gauche { 
	float:left;
	width:624px;
	padding-right:20px;
	position:relative;
	margin-top:-40px;
}

/*** Bloc centré ***/
#col-gauche .center {
	width:624px;
	text-align:center;
}

/*** Encadrés ***/
#col-gauche .encadre {
	width:289px;
	float:left;
}
#col-gauche .encadre.right {
	width:289px;
	float:right;
}

#col-gauche .encadre.left {
	padding-left:15px;
}

#col-gauche .encadre .wrapper-news {
	width:179px;
	background:url(../images/icon/icon-rouge.jpg) no-repeat 0 0;
	padding:25px 10px 30px 100px;
	height:27px;
}
#col-gauche .encadre .wrapper-partenaires {
	width:179px;
	background:url(../images/icon/icon-jaune.jpg) no-repeat 0 0;
	padding:25px 10px 30px 100px;
	height:27px;
	overflow:hidden;
}
#col-gauche .encadre h1 {
	margin-top:-5px;
	padding-right:10px;
	background-color:#fff;
	float:left;
}
#col-gauche .encadre .contenu {
	background:url(../images/encadre-bg.jpg) repeat-y 0 0;
	clear:left;
	padding:0 25px;
}
#col-gauche .encadre .contenu p,
#col-gauche .encadre-big .contenu p {
	font-size:12px;
	text-align:justify;
}
#col-gauche .encadre .contenu p.link,
#col-gauche .encadre-big .contenu p.link {
	text-align:right;
}


#col-gauche .encadre-intro {
	padding:15px 30px;
}


/*** Grands Encadrés ***/
#col-gauche .encadre-big {
	width:604px;
	margin:0 auto;
}
#col-gauche .encadre-big .wrapper-news {
	width:494px;
	background:url(../images/icon/icon-big-rouge.jpg) no-repeat 0 0;
	padding:25px 10px 30px 100px;
	height:27px;
}
#col-gauche .encadre-big h1 {
	margin-top:-5px;
	padding-right:10px;
	background-color:#fff;
	float:left;
}
#col-gauche .encadre-big .contenu {
	background:url(../images/encadre-big-bg.jpg) repeat-y 0 0;
	clear:left;
	padding:0 25px;
	width:554px;
}
#col-gauche .encadre-big .contenu .infos {
	background:url(../images/pointilles.gif) repeat-x 0 bottom;
	padding-bottom:10px;
	padding-top:10px;
	height:100%;
}

#col-gauche .encadre-big .contenu .infos img {padding:3px 10px}

#col-gauche .encadre-big .contenu .infos.first {
	padding-top:0;
}
#col-gauche .encadre-big .contenu .infos.last {
	padding-bottom:0;
	background:none;
}
#col-gauche .encadre-big .contenu .gauche {
	float:left;
	width:210px;
}
#col-gauche .encadre-big .contenu .gauche img {
	border:1px solid #dfdfdf;
}
#col-gauche .encadre-big .contenu .droite {
	float:left;
	width:344px;
}
#col-gauche .encadre-big .contenu p a {
	text-decoration:underline;
	color:#e8171c;
}
#col-gauche .encadre-big .contenu p a:hover {
	text-decoration:none;
}
#col-gauche .encadre-big .contenu p.link a {
	text-decoration:none;
}


/*** Panigation ***/
.pagination {
	float:right;
	padding-top:20px;
}

.pagination ul {list-style:none;}

.pagination li {
	float:left;
	padding:0 2px;
}
.pagination li a {
	color:#fff;
	background:#bebeba;
	display:block;
	width:17px;
	text-align:center;
	font-size:11px;
	padding:1px 0;
	text-decoration:none;
}
.pagination li a:hover,
.pagination li.on a {
	background:#878071;
	color:#fff;
	font-weight:bold;
}
.pagination li.suite a{
	background:none;
	padding:0;
}


/** Colonne de droite **/
#contener #col-droite.home {
	width:200px;
	float:right;
	margin-top:-60px;
}
#contener #col-droite {
	width:200px;
	float:right;
	margin-top:-20px;
}
#col-droite .contenu p {
	font-size:11px;
	text-align:justify;
}

#col-droite .bouton-plus{
	background:url(../images/icon/icon-info.gif) no-repeat 0 0;
	width:134px;
	height:59px;
	margin:0 auto;
	position:relative;
	z-index:100;
}
#col-droite .bouton-plus a{
	color:#000;
	font-weight:bold;
	text-decoration:none;
	display:block;
	padding:8px 0 0;
	text-align:center;
	
}

#col-droite .encadre-jaune {
	width:194px;
	padding-bottom:3px;
	background:url(../images/encadre-jaune-bottom.jpg) no-repeat 0 bottom;
	margin:-5px auto 30px;
	position:relative;
}
#col-droite .encadre-jaune .contenu {
	border-top:1px solid #f2c100;
	border-right:1px solid #f2c100;
	border-left:1px solid #f2c100;
	padding:20px 10px 10px;
}
#col-droite p.link {
	text-align:right;
}


#col-droite .encadre-rouge {
	width:194px;
	padding-bottom:3px!important;
	*padding-bottom:0;
	background:url(../images/encadre-rouge-bottom.jpg) no-repeat 0 bottom;
	margin:0 auto 30px;
	clear:both;
}
#col-droite .encadre-rouge .wrapper {
	float:left;
}
#col-droite .encadre-rouge .wrapper h2 {
	background-color:#FFFFFF;
	text-align:left;
	position:relative;
	z-index:100;
	float:left;
	padding:0 10px 10px 0;
	
}
#col-droite .encadre-rouge .contenu {
	border-top:1px solid #e8171c;
	border-right:1px solid #e8171c;
	border-left:1px solid #e8171c;
	padding:20px 5px 0;
	position:relative;
	margin-top:-20px;
	float:left;
	width:182px;
}
#col-droite .encadre-rouge .contenu .image {
	float:left;
	padding-right:10px;
}
#col-droite .encadre-rouge .contenu p {
	padding:0;
}
#col-droite .encadre-rouge .contenu p.red {
	padding-bottom:3px;
}	



/* FOOTER */
#footer {
	text-align:center;
	margin:0 auto;
	width:920px;
	background:url(../images/footer-bg.jpg) no-repeat 0 0;
	padding:20px 0;
}
#footer li {
	display:inline;
	font-size:11px;
	color:#767676;
	padding:0 2px;
}
#footer li a {
	color:#767676;
	text-decoration:underline;
}
#footer li a:hover {
	text-decoration:none;
}
#footer li img {
	vertical-align:text-bottom;
}


/* Champs de Formulaires
-------------------------------------------------------- */
input,textarea{margin : 1px;}
input.noborder {border:0;}
input.recherche {width:50px;}
input.button {	border:0px solid #2c220e;}
input.small_button {
	border:0px solid #2c220e;
	background-color:#2c220e;
	color:#ccc;
	font-size:12px;	
}

select {margin : 2px;}
form {padding:0;margin:0;}
textarea{
	width: 96%;
	font-size: 1em;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#titreForm, #piedForm {	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 1.1em arial, hevetica, sans-serif;
	color: black;
	margin: 0;
	padding: .5em;
}

#piedForm {
	text-align: center; /*** Les boutons sont alignes a droite ***/
}

#piedForm input {
	font-weight: bold; /*** Pour ameliorer la lisibilite des boutons ***/
	padding: 0.1em 0.1em;

}

#corpForm {	/*** Mise en forme du corp du formulaire (bordure, couleur du fond...) ***/

	margin: 0;
	padding: 1em;
}

#corpForm .text-input {
	width: 160px;
	padding:2px 4px;
	border: 1px solid #B5B8C8;
	font-size: 12px;
	margin-top: 4px;
	background: #FFF url('../images/form/text-bg.gif') repeat-x;
	
}

#corpForm fieldset {	/*** Mise en forme des cadres ***/
	margin: 0;
	font-style: normal;
	padding: 5px;
	border-width: 1px 0 0 0;
	border-style:solid;
	border-color: #867d78;
	
}
#corpForm legend {	/*** Mise en forme des titres des cadres ***/
	font-weight: bold;
	color: #fff;
	background:#616161;
	padding:2px 10px;
}
#corpForm p {	/*** Mise en forme des lignes du formulaire ***/
	padding: .2em 0;
	margin: 0 0 .2em 0;

}
#corpForm fieldset.coordonnees label {	/*** Mise en forme des intitules de champs ***/
	float: left;	/*** Tres important, ne pas suprimer ! ***/
	width: 40%;	/*** Les intitules prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: right;	/*** ... et ils sont alignes a droite... ***/
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;	/*** ... et centres verticalement. ***/
}

#corpForm fieldset.interets p{	/*** Mise en forme des intitules de champs ***/
	
	/*** Les intitules prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: left;	/*** ... et ils sont alignes a droite... ***/
	margin-left:40%;
	padding: 0 .5em 0 5px;
	line-height: 1.8;	/*** ... et centres verticalement. ***/
}

#corpForm fieldset.quizz p {
	padding:10px;
}

#corpForm fieldset.quizz input {border:0}


#corpForm label:hover, #piedForm input {
	cursor: pointer;	/*** Petite astuce pour apprendre aux utilisateurs a cliquer sur les intitules ***/
}
#corpForm label.oblig {
	font-weight: bold;	/*** Mise en evidence des champs obligatoires ***/
}
#corpForm .legende {	/*** Mise en forme des aides contextuelles ***/
	font-style: italic;
	color: #666;
	background: transparent;
	margin: 0;
	padding: 0;
	font-size:10px;
}
#corpForm a.aide {	/*** Mise en forme des bulles d'aide ***/
	text-decoration: none;
}
#corpForm a.aide img {	/*** Mise en forme de l'image des bulles d'aide ***/
	margin: 0;
	padding: 0;
	border: 0;
}

a.aide:hover {	/*** Le curseur de la souris change d'aspect quand il passe au-dessus d'une bulle d'aide ***/
	cursor: help;
}

/* bouton ok */
.submit {
     border:none;
     color:#fff;
     width:36px;
     height:20px;
	 font-weight:bold;
	 font-size:10px;
	 padding:0 ;
	 margin:0;
}

/* galerie photo gauche */
.bloc_galerie_photo_gauche
{
	float:left;
	text-align:center;
}

.galerie_photo_gauche
{
	margin: 0 ;
	padding: 0;
	list-style-type: none ;
	text-align:center;
	float:left;
}

.galerie_photo_gauche ul {margin:0;padding:0;list-style-type: none ;}
.galerie_photo_gauche li
{
	margin:0;padding:0;
	padding: 0px ;
	text-align:center;
	font-size:10px;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
}

.galerie_photo_gauche  img 
{
	margin: 1px 5px 3px 0px;
	padding:0px;
}

.galerie_photo_gauche a, .galerie_photo_gauche a:visited, .galerie_photo_gauche a:hover {
	text-decoration:none;
	color:#f7941d;
}

.galerie_photo_gauche span {
		background-color:#543019;
		font-weight:bold;
		line-height:13px;
		padding: 1px 3px;
}


/* pagination 
-------------------------------------------------------- */


.menu_paragraphe {
	padding-bottom:25px;
}

.menu_paragraphe ul { list-style:none; margin:0;}
.menu_paragraphe li {
	background:url(../images/pictos/picto-link.gif) left no-repeat;
	line-height:20px;
}

.menu_paragraphe a, .menu_paragraphe a:visited {
	font-weight:bold;
	padding-left:15px; 
	color:#e82c18; 
	text-decoration:none; 
	font-size:12px;
}

.partenaires {
	text-align:center;
	padding-top:15px;
}

.partenaires img {padding:5px 10px;}