/*

+----------------------------------------------------------------------------------------------------+
|                                                                                                    |
|    TYPOGRIDPHY - TYPOGRAPHICAL AND GRID LAYOUT CSS FRAMEWORK FROM HARRY ROBERTS OF CSS WIZARDRY    |
|                                                                                                    |
+-------------------------------------------------+--------------------------------------------------+
|                                                 |                                                  |
|   TYPOGRIDPHY IS © COPYRIGHT OF HARRY ROBERTS   |   v 0.1.1                                        |
|   IT IS FREE TO BE USED AND MODIFIED PROVIDED   |   May 2008                                       |
|   THIS TEXT REMAINS INTACT -- CSSWIZARDRY.COM   |   http://csswizardry.com                         |
|                                                 |                                                  |
+-------------------------------------------------+--------------------------------------------------+



COLOUR REFERENCES
BODY BG: #FFF
TOP STRIP: #000
BODY COLOUR: #666
LINKS: #000
-------------------------------------------------------- */


/* RESET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {  
	margin:0; 
	padding:0; 
} 
table { 
	border-collapse:collapse; 
	border-spacing:0; 
} 
fieldset,img {  
	border:0; 
} 
address,caption,cite,code,dfn,em,strong,th,var { 
	font-style:normal; 
	font-weight:normal; 
} 
ol,ul { 
	list-style:none; 
} 
caption,th { 
	text-align:left; 
} 
h1,h2,h3,h4,h5,h6 { 
	font-size:100%; 
	font-weight:normal; 
} 
q:before,q:after { 
	content:''; 
} 
abbr,acronym {
	border:0; 
}
/*---------- END RESET ----------*/


/*-------------------------------------------+
|                                            |
|            MAIN STRUCTURE STYLES           |
|                                            |
+-------------------------------------------*/
html{
	min-height:101%;
}
body{
	font-size:62.5%;
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	background:/*url(images/grid.gif) top center repeat-y*/;  /* Uncomment to display the grid */
	border-top:0.5em solid #666;
	padding:0 1em;
}
#wrapper{
	width:94em;
	margin:0 auto;
}
#header{
	width:100%;
	height:190px;
	background: #333333 url(../images/bg-header.jpg) repeat-x;
	display:block;
}
#logo{ width:260px; height:37px; padding-left:74px;padding-top:37px; padding-bottom:37px;}
ul#adresse{list-style:none; height:30px; }
ul#adresse li{width:100%; font-size:2.4em; font-weight:bold; letter-spacing:0.1em; background:#666; color:#FFF; padding:2px 2px 2px 10px;}
/*#adresse span.add-left{ padding-left:10px;	width:46em; margin-right:10em;}
#adresse span.add-right{padding-right:10px;	width:46em; margin-right:1em;}*/

#footer{background:#333; width:100%;height:49px; clear:both;}

/*NAVIGATION
-------------------------------------------------------- */
#nav{
	font-size:1.8em;
	margin-top:10px;
	padding-left:10px;
}
#nav a{
	padding:0.2em;
	color:#fff;
	text-decoration:none;
}
#nav a:hover{
	text-decoration:none;
}
#nav span{
	float:right;
	margin-top:-1.2em;
}

#nav a#nav1{
	background:#ea0437;
}
#nav a#nav2{
	background:#339933;
}
#nav a#nav3{
	background:#0087c7;
}
#nav a#nav4{
	background:#cc33cc;
}
#nav a#nav5{
	background:#000;
}


/*FOOTER NAVIGATION
-------------------------------------------------------- */
#footer-nav{
	word-spacing:0.2em;
}
#footer-nav a{
	color:#000;
	font-variant:small-caps;
}
/*GRIDS
-------------------------------------------------------- */
/* Set styles common among all grids - all grid divs must be assigned this class */
.generic{
	border-top:0.5em solid #666; /* The border at the top of each grid */
	float:left;
	padding-top:1em;
	margin-bottom:2em;
}
/* Sets styles for any 'start' grids - this class MUST be given to a grid that is the first in a horizontal series */
.clear{
	clear:both;
}
/* Sets styles for any 'end' grids - this class MUST be given to a grid that is the last in a horizontal series */
.end{
	margin-left:0 !important;
	margin-right:0 !important;
}
/* 220px */
.twotwenty{
	width:22em;
	margin-right:2em;
}
/* 280px */
.twoeighty{
	width:28em;
	margin-right:2em;
}
/* 340px */
.threeforty{
	width:34em;
	margin-right:2em;
}
/* 400px */
.fourhun{
	width:40em;
	margin-right:2em;
}
/* 460px */
.foursixty{
	width:46em;
	margin-right:2em;
}
/* 520px */
.fivetwenty{
	width:52em;
	margin-right:2em;
}
/* 580px */
.fiveeighty{
	width:58em;
	margin-right:2em;
}
/* 640px */
.sixforty{
	width:64em;
	margin-right:2em;
}
/* 700px */
.sevenhun{
	width:70em;
	margin-right:2em;
}
/* 760px */
.sevensixty{
	width:76em;
	margin-right:2em;
}
/* 820px */
.eighttwenty{
	width:82em;
	margin-right:2em;
}
/* 880px */
.eighteighty{
	width:88em;
	margin-right:2em;
}
/* 940px */
.nineforty{
	width:94em;
}

/* blocs */
.block-left{width:34em;
	margin-right:2em;}
.block-right{width:34em;
	margin-right:2em;}

	
/*-------------------------------------------+
|                                            |
|                FONT STYLES                 |
|                                            |
+-------------------------------------------*/
/*PARAGRAPHS
-------------------------------------------------------- */
.generic p{
	font-size:1.2em;
	line-height:1.5em;
	margin-bottom:1.5em;
}
/* Styles an introductory paragraph, similar to newspapers. Assign this class to the first paragraph in an article */
p.intro:first-line{
	font-variant:small-caps;
}
/* Styles a drop cap on each paragraph with this class */
p.drop:first-letter{
	float:left;
	font-size:3em;
	margin-top:-0.05em;
	margin-right:0.1em;
	margin-bottom:-0.5em;
}
.footer p{
	font-size:1.2em;
	line-height:1.5em;
	padding-top:1em;
	margin-bottom:1.5em;
	color:#fff;
	text-align:center;
}
/*HEADINGS
-------------------------------------------------------- */
h1{
	color:#000;
	font-size:3em;
	margin-bottom:0.6em;
	font-style:italic;
	line-height:1.2em;
}
h2{
	color:#000;
	font-size:2em;
	margin-bottom:0.9em;
	line-height:0.9em;
}
h3{
	color:#000;
	font-size:1.5em;
	margin-bottom:1.2em;
	line-height:1.2em;
	font-variant:small-caps;
}
h4{
	color:#000;
	font-size:1.2em;
	margin-bottom:1.5em;
	line-height:1.5em;
	font-variant:small-caps;
}
h5{
	color:#000;
	font-size:1em;
	margin-bottom:1.8em;
	line-height:1.8em;
	font-variant:small-caps;
}
h6{
	color:#000;
	font-size:1em;
	margin-bottom:1.8em;
	line-height:1.8em;
}
/*LINKS
-------------------------------------------------------- */
p a{
	color:#000;
}
p a:hover{
	text-decoration:none;
}
h1 a{
	color:#000;
}
h1 a:hover{
	text-decoration:none;
}
li a{
	color:#000;
}
li a:hover{
	text-decoration:none;
}

.footer a{
	color:#fff;
}
.footer a:hover{
	text-decoration:none;
}

/*ALL THE TRIMMINGS
-------------------------------------------------------- */
blockquote p{
	font-size:1.2em!important;
	line-height:1.5em!important;
	margin-bottom:1.5em!important;
	font-style:italic;
	font-weight:bold;
}
blockquote p cite{
	font-style:normal;
}
.generic strong{
	font-variant:small-caps;
}
.generic em{
	font-style:italic;
	font-weight:inherit;
}
.amp{ /* Give those ampersands a right sexy look */
	font-family:Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
	font-style:italic;
	font-weight:normal;
	line-height:inherit;
}
abbr{
	border-bottom:1px dotted #666;
	border-color:inherit;
	cursor:help;
}
.clear{
	clear:both;
}
.right-float{ /* Float any item to the right */
	float:right;
	margin-left:2em;
	margin-right:0;
}
.left-float{ /* Float any item to the left */
	float:left;
	margin-right:2em;
	margin-left:0;
}
.code{ /* Styling for and code type items */
	font-family:Courier, "Courier New", monospace;
	background:#ddd;
	font-size:1em;
}
/*-------------------------------------------+
|                                            |
|               IMAGE STYLES                 |
|                                            |
+-------------------------------------------*/
img{
	font-size:1em;
}
img.left-img{ /* Float any image to the LEFT and give it some margin */
	font-size:1em;
	float:left;
	padding:4px;
	border:1px solid #ccc;
	margin-bottom:1.8em;
	margin-right:2em;
	margin-top:0.3em;
}
img.right-img{ /* Float any image to the RIGHT and give it some margin */
	font-size:1em;
	float:right;
	padding:4px;
	border:1px solid #ccc;
	margin-bottom:1.8em;
	margin-left:2em;
	margin-top:0.3em;
}
/*CONTACT FORM STYLES
-------------------------------------------------------- */
#contact-form{
}
#contact-form label{
	width:10em;
	float:left;
	margin-top:0.6em;
}
#name, #form-email, #url, #location{
	width:42.7em;
	height:20px;
	padding:3px;
	padding-top:5px;
	border:2px solid #666;
	margin-bottom:18px;
	background:#fff !important;
}
#comments{
	width:43.8em;
	height:10em;
	padding:3px;
	border:2px solid #666;
	margin-bottom:18px;
	overflow:auto;
	background:#fff !important;
}
#name:active, #form-email:active, #url:active, #location:active, #comments:active, #submit:active, #name:focus, #form-email:focus, #url:focus, #location:focus, #comments:focus, #submit:focus{
	border:2px solid #000;
}
#submit{
	clear:both;
	padding:5px;
	border:2px solid #666;
	background:#fff !important;
	cursor:pointer;
	margin-left:9em;
}
#reset{
	clear:both;
	padding:3px;
	border:none;
	background:#f00 !important;
	cursor:pointer;
	float:right;
	color:#fff;
	margin-top:-28px;
}
/*-------------------------------------------+
|                                            |
|                LIST STYLES                 |
|                                            |
+-------------------------------------------*/
ul{
	margin-bottom:1.8em;
	list-style:square inside;
}
ul li{
	font-size:1.2em;
	line-height:1.5em;
}
ul li.caption{ /* Apply this class to the first list item in a list to give it a caption */
	font-variant:small-caps;
	list-style:none;
	color:#000;
}
li > ul, li > ol{
	margin-bottom:0;
	margin-left:5em;
}
li > ul li, li > ol li{
	font-size:1em;
}
ol{
	margin-bottom:1.8em;
	list-style:decimal inside;
}
ol li{
	font-size:1.2em;
	line-height:1.5em;
}
/*-------------------------------------------+
|                                            |
|               MISC. STYLES                 |
|                                            |
+-------------------------------------------*/


/****** CONTENT ******/

.stitre {
    color: #0099FF;
    font-size: 150%;
    margin: 0.6em 0;
}
.sstitre {
    font-size: 110%;
    margin: 0.3em 0;
}
dl {
    margin: 1em 0 1em 0;
}
dl dt {
    margin-bottom: 0.3em;
}
dl dd, .puce {
    background: url("../img/picto/puce.orange.gif") no-repeat scroll left 0.4em transparent;
    margin: 0.3em 0;
    padding-left: 10px;
}

/****** FORMULAIRE ******/

form {
	margin:0;
	font-size:120%;
}
select, textarea, input, .normal, input.case,
select.normal, textarea.normal {		/*** configuration general ***/

	color: #666;
	background-color: #fafafa;
	font-weight: bold;
	font-size:110%;
}
input.case {		/*** configuration case a coché ***/
	background: none;
}

.focus, .focus2, .focus3,
select.focus,
textarea.focus, textarea.focus2  {	/*** Mise en avant des champs en cours d'utilisation - onfocus="this.className='focus';" ***/
	background: #fff;
	/*color: #c00;*/
	border: #B05737 2px solid;
	color:#B05737;
	margin:0 0;
	padding-left: 3px;
}
textarea, input, .normal, select,
.search, .fpart, .fpart2 {	/*** Retour à  l'état normal aprés l'utilisation - onblur="this.className='normal';" ***/
	padding-left: 3px;
	font-weight: bold;
	margin:1px 1px;
}
.normal, .focus {	/*** taille des champs ***/
	/*width: 180px;*/
}
.normal {	/*** bordure des champs ***/
	border: #A6A08F 1px solid;
}

select.normal, select.focus, .submit { /*** taille select ***/
	/*width: 187px;*/
}
textarea.normal, textarea.focus, textarea.focus2  /*** taille textarea ***/
{
	/*font-size:100%;*/
	height:8em;
}




/**** QUESTIONNAIRE ****/

/***** QUESTIONNAIRE *******/
.questionnaire
{
	width:100%;
	margin:auto;
}
.questionnaire table
{
	width:100%;
	/*border-collapse:collapse;*/
}
.questionnaire .disabled,
.questionnaire .disabled:focus,
.questionnaire .disabled:hover
{
	

	background:#e3e3e3;
	border: #A6A08F 1px solid;
	margin:1px;
	
}
.formfond, .erreur
{
	background-color:#eee;
	padding:5px 20px;
}
.questionnaire dd
{
	background:none;	
}
.champ_date_image
{
	margin:0 10px 0 1px;
	cursor:pointer;
}

.fix1, .fix4, .fix5
{
	display:inline-block;
	width:170px;
}
.fix2
{
	width:52%;
}
.fix3
{
	width:100px;
}
.fix4
{
	width:100px;
}
.fix5
{
	width:180px;
}

/* 87C81F e5e9ee f5c400 */
.coul1, .coul2,
.coulf1, .coulf2
{
	/*background-color:#f5c400;  87C81F e5e9ee f5c400 */
	border:#f5c400 1px solid;
	padding-left:10px;
	padding-top:3px;
}
.coul1, .coul2
{ 
	border:#f5c400 1px solid; /* jaune */
}
.coul2, .coulf2
{
	border:#0099CC 1px solid; /* vert */
}

.coulf1, .coulf2
{
	background-color:#f5c400; /* jaune */
}
.coulf2
{
	background-color: #0099CC; /* bleu */
}

/* generique */
.erreur
{
	color:#c00;
	padding:0 0.3em;
	font-size:120%;
	width:auto;
	font-size:100%;
	text-align:justify;
}
.aTitre,
.erreur
{
	padding:3px 10px;
	/*border:#00FF66 1px solid;*/
}
.champ_text,
.champ_textarea,
.champ_password,
.champ_select,
.champ_date
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #666;
	background-color: #fafafa;
	border: #A6A08F 1px solid;
	font-weight: bold;
	width:160px;
}
.champ_select_court
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #666;
	background-color: #fafafa;
	border: #A6A08F 1px solid;
	font-weight: bold;
	width:100px;
}
.champ_text:focus,
.champ_text:hover,
.champ_textarea:focus,
.champ_textarea:hover,
.champ_password:focus,
.champ_password:hover,
.champ_select:focus,
.champ_select:hover,
.champ_date:focus,
.champ_date:hover
{
	background: #fff;
	/*color: #c00;*/
	border: #081A5E 2px solid;
	color:#081A5E;
	margin:0 0;
	padding-left: 3px;
}
.champ_textarea
{
	/*font-size:16px;*/
}
.remarque .champ_textarea
{
	width:80%;
	height:100px;
}
.champ_radio,
.champ_checkbox
{
	background:none;
	margin:0.2em 0.3em 0.1em 0.2em;
}

.champ_submit,
.btimprimer
{
	width:200px;
	height:25px;
	display:block;
	float:right;
	border:0;
	color: #fff;
	font-weight:bold;
	background:url(../images/bt.gif) no-repeat left top;
}
.champ_submit:hover,
.btimprimer:hover
{
	background-position: left bottom;
}
.btimprimer
{
	margin-top:1px;
	float:left;
}

/* espace client */
.aTitre
{
	font-weight:bold;
	background-color:#AFA99B;
	border-bottom:#5C584D 1px solid;
	border-top:#5C584D 1px solid;
}
.nowrap,
.action
{
	white-space:nowrap;
}
.tdjustify
{
	text-align:justify;
}
.action
{
	text-align:right;
	font-size:80%;
}
p.floatright{ text-align:right; display:block; width:100%; height:6px;}
span.obli{color:red;}







/***** NEWS *******/
.news {
    border: 2px solid #E5E9EE;
    margin: 2em 0;
    padding: 0.5em 0 0;
    position: relative;
}
.news legend {
    font-weight: bold;
    margin: 0 0 0 1em;
    padding: 0 0.5em;
}
.news .images {
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 20px;
    position: relative;
    top: 20px;
    width: 275px;
}
.news .articles {
    margin: 0 40px 10px 50px;
    overflow: hidden;
    position: static;
    text-align: justify;
}
.imgnews {
    display: inline;
}
.imgnews a img {
    border: 1px solid #E5E9EE;
    margin-bottom: 20px;
}
.imgnews a:hover img {
    border: 1px solid #9CA1A6;
}
.articles ul {
    margin: 5px 0 5px 10px;
}
.articles ul li {
    background: url("../images/puce.gif") no-repeat scroll left 0.4em transparent;
    padding-left: 10px;
}



.navig {
    float: right;
    list-style: none outside none;
    margin: 1em 0.8em;
}

.navig ul {
    list-style-type: none;
}
.navig li {
display: inline;
    margin: 0.5em;
    text-align: right;
}
.navig .print a {
    background: url("../images/print.gif") no-repeat scroll left 0.4em transparent;
    padding-left: 14px;
	color: #0099FF;
}
.navig .retour a {
    background: url("../images/top.gif") no-repeat scroll left 0.55em transparent;
    padding-left: 11px;
	color: #0099FF;
}


#mots, #mots a {
    font-size:8pt;
    color:#BBB;
}

#mots {
	font-size:8pt;
	color:#BBB;
	text-decoration:none;
	text-align:justify;
	margin:0 20px 30px 20px;
}