/* ### Fleuve du du Rhône -  ### */
/* ### Feuille de styles ECRAN ### */
/* ### Esprit Public - 2007 ### */


/*
	Version 1.0
	Dernière modification : 09/07/2007 
	Par : Franck Grenier (f.grenier@esprit-public.fr)
*/


/* ############### SOMMAIRE ############### */
/* 

 $1. Remise à zéro des styles
 $2. Redéfinition des balises de base
 $3. Styles recherches et formulaires
 $4. Blocs de mise en page
 $5. Menus : navigation (1,2,3), pratique, pied de page
 $6. Blocs de contenu principal
 $7. Blocs de contenu contextuel
 $8. Blocs navigation annexe 
 $9. Styles spécifiques "Accueil"
 
*/
/* ######################################## */


/* ###################### $1. Remise à zéro des styles ###################### */
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;
	background:transparent;
}

:focus {
	outline:0;
}

body {
	line-height:1;
	color:black;
	background:;
}

ol, ul {
	list-style:none;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

caption, th, td {
	text-align:left;
	font-weight:normal;
}

blockquote:before, blockquote:after, q:before, q:after {
	content:"";
}

blockquote, q {
	quotes:"" "";
}


/* ###################### $2. Redéfinition des balises de base ###################### */
body {
	font-family:"Verdana", sans-serif;
	font-size:62.5%;
	line-height:1.5em;
	color:#4e4e4e;
}

a {
	color:#4e4e4e;
	text-decoration:none;
}

a:hover {
	color:#4B86A8;
	/*background:#deded2;*/
	text-decoration:underline;
}

strong {
	font-weight:bold;
}

em {
	font-style:italic;
}

sup {
	font-size:0.9em;
	position:relative;
	top:-0.3em;
}

h1,h2,h3,h4,h5,h6 {
	font-family:"Arial";
	font-weight:bold;
}

h1 {
	font-size:1.55em;
	color:#FFC100;
	padding:0 0 3px 22px;
	margin:0;
	clear:both;
}

h2 {
	font-size:1.5em;
	color:#000;
	padding:0 0 0 15px;
	margin:25px 0 6px 0;
	clear:both;
}

h3 {
	font-size:1.1em;
	color:#3b3b3b;
	padding:0 0 0 0px;
	margin:5px 0 5px 20px;
}

h4 {
	color:#8b8b62;
	padding:0 0 0 13px;
	margin:10px 0 5px 0;
}

p {
	margin:0 0 15px 0;
}

ul {
	padding:0;
	margin:0 20px 20px 20px;
	clear:both;
}

li {
	padding:0 0 0 10px;
	margin:2px 0 2px 0;
}

/* hack IE 6 */
* html body ul {
	padding-left:15px;
}

caption {
	display:none;
}



/* ###################### $3. Styles recherches et formulaires ###################### */
form {
	font-family:"Arial", sans-serif;
	line-height:1.5em;
	margin:0 0 20px 0;
	padding:0;
}

fieldset {
	display:block;
	padding:6px 8px 10px 0px;
	margin:0;
	border:0;
}

legend {
	display:block;
	position:relative;
	font-size:1.3em;
	color:#369;
	margin:15px 0 5px -8px;
	padding:0 0 0 15px;
	clear:both;
	font-weight:bold;
	
}

fieldset fieldset legend {
	font-size:1em;
	font-weight:normal;
	color:#369;
	padding:0 0 0 15px;
	margin:0 0 3px 0;
}

label {
	color:#5c5c5c;
	font-size:1.1em;
	padding:0 2px 0 2px;
}

fieldset fieldset label {
	display:inline;
	float:none;
	padding-left:0;
	background:none;
}

input, select, textarea {
	font-family:"Arial", sans-serif;
	font-size:1.1em;
	color:#666;
	padding:2px;
	margin:2px;
	vertical-align:middle;
	border:1px #969696 solid;
}

input:hover, select:hover, textarea:hover {
	border:1px solid #F8CB34;
}

input:focus, select:focus, textarea:focus {
	border:1px solid #F8CB34;
}

textarea {
	width:240px;
	height:150px;
}

input[type=text], select {
	width:180px;
}

input[type=radio], input[type=checkbox] {
	border:0;
}

input.standalone {
	color:#900;
	font-size:1.1em;
	font-weight:bold;
	padding:4px 15px 4px 15px;
	margin:0;
	background-color:#fff;
	border:1px #900 solid;
}

input.validsearch {
	font-size:1.1em;
	font-weight:bold;
	padding:0 0 2px 10px;
	margin:0;
	border:none;
	color:#990000;
	width:104px;
	height:20px;
}

input.standalone:hover {
	color:#fff;
	background:#900;
}

#main_container {
	margin:0px auto;
	width:870px;
}

#container {
	float:left;
	height:auto;
	text-align:left;
	overflow:hidden;
	width:870px;
}

#colgauche {
	display:none;
}


#colgauche ul {
	padding:0;
	margin:0 20px 20px 25px;
	clear:both;
}

#colgauche a {
	color:#FFF;
	text-decoration:none;
}

#colgauche a:hover {
	text-decoration:underline;
}

#colgauche li {
	padding:0 0 0 10px;
	margin:2px 0 2px 0;
}

#coldroite {
	width:600px;
	float:left;
	background:#FFF;
}

/*------------ ELEMENTS COLDROITE ---------------*/

#header {
	display:none;
}

#corps {
	width:485px;
	padding:0 50px 0 65px;
	margin:0;
}

.article {
	float:left;
	width:470px;
}

.contenu_article {
	text-align:justify;
	padding:0 0 0 10px; 
}

.article img {
	margin:0 10px 10px 0;
	border:0;
	float:left;
}

.article p {
	font-weight:bold;
}

.article span {
	background:#74CB00;
	padding:10px;
	width:450px;
	float:right;
	margin:0px;
	color:#FFF;
}

/* -- HACK OPERA -- */
html:first-child .article span {
	margin:0 10px 0 -10px;
}

.trait_article{
	font-size:0px;
	height:1px;
	border-bottom:1px solid;
	margin:0 0 15px 0;
	padding:0px;
	width: 100%;
	display:block;
}

.comtracks {
	float:right;
	margin:10px 0 0 0;
	padding:5px 5px 5px 25px;
	width:440px;
	background:#E6E6E6 url('../img/puce_bulle.gif') no-repeat 2px 5px;
}

.commentaire {
	float:left;
	width:470px;
}

.commentaire h2 {
	color:#4989A5;
	background:none;
	padding:10px 0px 10px 0;
	border-top:1px solid #CCCCCC;
}

.bloc_com {
	background:#74CB00;
	padding:20px 10px 30px 10px;
	width:450px;
	float:right;
	margin:0px;
	color:#FFF;
}

.fleche_com {
	background:#74CB00 url('../img/fleche_com.gif') no-repeat 50px 0px	;
	margin:10px 0 0 0;
	padding:0px;
	width:420px;
	height:10px;
}	

.contenu_com {
	background:#FFF url('../img/fleche_com.gif') no-repeat 50px 0px	;
	color:#000;
	padding:15px;
	margin:0 10px 0 10px;
}	


/* ---  BUG IE6  --- */

* html .fleche_com {
	margin:10px 0 -4px 0;
}

/* ---  BUG IE6  --- */



