/* --- POSITIONNEMENT --- */

/* Page */
html, body {
	height: 100%; /* Voir -> Note 1 ci-dessous */
}
body {
	padding: 0;
}
#global {
	height: 700px; /* -> 1 */
	width: 985px;
	overflow: hidden; /* -> 2 */
	margin-left: auto;
	margin-right: auto; /* -> 3 */
}
a {text-decoration: none}
#top {background-image: url("../img/mrc_01.png"); background-repeat: no-repeat; height: 62px; width: 985px}
#bandeau {width: 778px; height: 62px; float: left; background-image: url("../img/mrc_bandeau.png"); background-repeat: no-repeat; background-position: 16px 16px}
#bandeau p {width: 100%; height: 100%; overflow: hidden; cursor: pointer; text-decoration: none}
#lecteur {background-image: url("../img/mrc_hp.png"); background-repeat: no-repeat; background-position: 160px 7px; float: right; height: 62px; width: 207px}
#lecteur p {font-family: Trebuchet MS;color: #666;font-size:13px;font-weight:bold;font-style:italic;margin-top:10px;}
#lecteur-titre {font-family: Trebuchet MS; font-size: 14px; color: #880D0D; margin-top: 9px; margin-left: 58px}
#lecteur-flash {margin-left: 35px; margin-top: 12px}

#left {background-image: url("../img/mrc_02.jpg"); background-repeat: no-repeat; width: 185px; height: 638px; float: left}
.left-selected a {color: #FF3300;}
#recherche {width: 185px; height: 49px; background-image: url("../img/mrc_recherche.png"); background-repeat: no-repeat; margin:0; padding:0;}
#recherche form {background-image: url("../img/mrc_recherche_fond.gif"); background-repeat: no-repeat; width: 155px; height: 29px; position: relative; top: 9px; left: 15px; margin:0;}
#recherche form input[type="text"] {margin-left: 6px; margin-top: -1px; height: 21px; font-family: Verdana; font-size: 14px; font-style: italic; color: #949494; border: none}
#recherche form input[type="text"]:focus {font-style: normal; color: #000; margin-left: 5px}
#recherche form input[type="submit"] {background-image: url("../img/mrc_recherche_loupe.png"); background-repeat: no-repeat; border: none; height: 27px; width: 28px; margin-top: 1px; margin-left: 2px; cursor:pointer;}
#recherche form input[type="text"]{ position  /*\**/: relative\9; top /*\**/: -8px\9 }
#menu-public {width: 185px; min-height: 390px; background-image: url("../img/mrc_px50.png"); padding-top: 10px; color: #880D0D; font-family: Verdana; font-style: italic; font-weight: bold; margin: 0px}
#menu-public dt {background-image: url("../img/mrc_dt.png"); background-repeat: no-repeat; background-position:0 2px; /*min-height: 24px;*/ padding-left: 20px; text-transform: uppercase; font-size: 12px; padding-right: 5px; padding-top:0px; padding-bottom: 6px;} 
#menu-public dd {/*background-image: url("../img/mrc_dd.png"); background-repeat: no-repeat;*/ margin-top: -6px; /*min-height: 90px;*/ margin-left: 20px; font-size: 11px}
#menu-public a {text-decoration: none; color: #880D0D}
#menu-public a:hover {color: #FF3300}
#menu-public ul {padding-top:0; margin-bottom:7px;} 
#menu-public li {list-style-type: none; line-height: 15px; margin-left: -18px; list-style-image: url("../img/mrc_li.png")}
#menu-public li a {margin-left: -3px;} 

#contact-tel {background-image: url("../img/mrc_tel.png"); background-repeat: repeat-x; height: 33px; width: 100%; font-family: Trebuchet MS; font-size: 18px; font-weight: bold; color: #880D0D; text-align: center; padding-top: 5px}
#contact-plus {width: 100%; font-family: Trebuchet MS; font-size: 13px; font-weight: bold; color: #880D0D; text-align: center}
#contact-plus p {margin: 0px}
#contact-plus h2 {margin-top: 3px; font-size: 18px; font-weight: normal; margin-bottom: 3px}
#contact-plus h3 {margin-top: 3px;margin-bottom: 3px}

#credits {width: 185px; font-family: Trebuchet MS; font-size: 11px; font-weight: bold; color: #880D0D; text-align: center; position: absolute; top: 712px; height: 20px}
#credits a {text-decoration: none; /*color: #880D0D*/}

#right {float: right; width: 800px; height: 638px}
#nav {background-image: url("../img/mrc_03.png"); background-repeat: no-repeat; height: 23px; width: 100%; font-family: Trebuchet MS; font-size: 14px}
/*#nav dl,dt,dd,ul,li {margin: 0px; padding: 0px; list-style-type: none}
#nav dl {position: relative; left: 0px; top: 0px}
#nav dt {float: left; margin: 0 10px;}
dd#nav dt {clear: left; position: absolute; top: 20px}*/
#nav ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#nav li {
 float:left;
 margin:auto;
 padding:0;
 /*background-color:#FFE8BD;*/
 }
#nav li a {
 display:block;
 /*width:100px;*/
 color:#880d0d;
 text-decoration:none;
 padding:5px 20px;
 text-transform: uppercase;
 height: 21px;
 position: relative;
 z-index: 2;
 }
#nav li a:hover {background-image: url("../img/mrc_nav_hover.png"); background-repeat: repeat-x;}
 #nav ul li ul {
 display:none;
 }
 #nav ul li:hover ul {display: block; background-image: url("../img/mrc_nav_hover.png"); background-repeat: repeat-x; position: relative; top: -31px; padding-top: 24px; z-index: 1}
#nav li:hover ul li {float: none; background-color: #ffeac0}

#nav li ul li a {text-transform: none; padding:1px 5px; position: relative; top: 1px}
#nav li ul li a:hover {background-color: #FFF; background-image: none}
/*#nav li ul {
 position:absolute;
 }*/
#nav {
 height:23px;
 }
#nav .selected {background-image: url("../img/mrc_nav_hover.png"); background-repeat: repeat-x;}

#page {background-image: url("../img/mrc_04.png"); background-repeat: repeat-x; height: 615px; width: 100%} 
#fil {position: absolute; top: 110px; color: #880D0D; font-family: Trebuchet MS; font-size: 0.9em; margin-left: -8px}
#fil li {display: inline; color: #880D0D}
#fil a {text-decoration: none; color: #880D0D; font-weight: bold}
#fil a:hover {color: #FF3300}
#pave1 {height: 360px; position: relative; left: 20px; top: 67px; width: 760px; /*border: 1px solid #CCC;*/ color: #880D0D; font-family: Verdana; font-size: 0.8em; z-index: 1} 
#pave-txt {background-image: url("../img/mrc_pave_fond.png"); background-repeat: repeat-y; position: absolute; height: 360px; left: 0px; top: 0px; z-index: 2; width: 760px; overflow-y: auto; margin-bottom: 15px}
.flash h1 {padding: 15px; padding-right: 400px; margin: 0px; color: #99CC00; font-size: 18px}
#pave-txt h2, #pave-txt h3, #pave-txt h4 {padding: 15px; padding-right: 400px; margin: 0px}
#pave-txt p {padding-left: 15px; padding-right: 400px; line-height: 1.5em; text-align: justify}
#pave-txt li {padding-right: 400px; margin-bottom:6px; text-align: justify}
.lien-txt {font-size: 1.1em}
#pave-img {position: absolute; top: 0px; right: 0px; z-index: 1; width: 400px; height: 360px; background-repeat: no-repeat}

#pave-lien {width: 733px; background-color: white; font-family: Trebuchet MS; position: absolute; top: 160px; margin-left: 20px; height: 100%; color: #880D0D; padding-left: 15px; font-size: 0.8em; padding-right: 15px; padding-top: 8px; padding-bottom: 15px}
#pave-lien h3 {margin: 0px; font-family: Verdana}
#pave-lien li {margin-bottom: 6px; margin-left: -12px}
#pave-lien a {color: #880D0D; text-decoration: none; font-weight: bold}
#pave-lien a:hover {color: #FF3300}

#pave2 {height: 326px; position: absolute; margin-left: 20px; top: 167px; width: 740px; color: #880D0D; font-family: Verdana; font-size: 0.7em; z-index: 1; background-color: #CCCCCC; padding: 12px; text-align: justify; overflow-y: auto; background-image: url("../img/mrc_pave2_fond.png"); background-repeat: repeat-x} 
.date {float: right; font-style: italic; font-weight: normal}
.date a {text-decoration: none}

#pave-cnx {position: absolute; margin-left: 596px; background-color: white; width: 204px; top: 95px; color: #880D0D; font-family: Verdana; font-size: 13px; padding: 5px}
#pave-prive {height: 517px; position: absolute; margin-left: 20px; top: 167px; width: 740px; color: #880D0D; font-family: Verdana; font-size: 0.7em; z-index: 1; background-color: #CCCCCC; padding: 12px; text-align: justify; overflow-y: auto; background-image: url("../img/mrc_pave2_fond.png"); background-repeat: repeat-x} 

#bandeauimg {
    margin-bottom: 20px;
    margin-left: -2px;
    outline: medium none;
    position: relative;
    width: 740px;
}
.vignette {padding: 0; margin-top: 3px; margin-left: 3px; float: left}
.loupe {border: none; position: absolute; z-index: 999; margin-left: -28px; margin-top:95px}  

#pave_recherche {height: 517px; position: absolute; margin-left: 20px; top: 167px; width: 740px; color: #880D0D; font-family: Verdana; font-size: 0.7em; z-index: 1; background-color: #CCCCCC; padding: 12px; text-align: justify; overflow-y: auto; background-image: url("../img/mrc_pave2_fond.png"); background-repeat: repeat-x} 
#pave_recherche ul {margin-left: -20px}
#pave_recherche a {color: #880D0D;}
#pave_recherche h2 {font-size: 1.1em; margin-top:0px}
.titre_recherche {font-weight: bold}
.txt_recherche {font-weight: bold; color: #FF3300}
.cadre_recherche {border: 1px dotted #FF3300; padding: 6px; margin-top: 3px; margin-bottom: 12px}

#pagePrec { position: absolute; top: 528px; margin-left: 35px; /*left: 35px;*/ font-family:Trebuchet, sans-serif; font-size:0.9em; font-style:bold; z-index:10; }

/* Général */
body {
	color: #F0E39E;
	background: #FFFFFF;
}
a {
	color: #FF6533;
}
a:hover, a:focus {
	color: #FF4C00;
}
strong {
	color: #A1B55D;
}

/* Page */
#global {background: #CCCCFF}

/* Navigation */
#navigation {
	background: #181A12;
}
#navigation a {
	color: #FF6533;
}
#navigation a:hover, #navigation a:focus {
	background: #000000;
}

/* Contenu principal */
#contenu {color: #363B29; background: #CBD888}
#contenu a {
	color: #332510;
}
#contenu a:hover, #contenu a:focus {
	color: #6E5122;
}
#contenu strong {
	color: #181A12;
}

/* Pied de page */
#pied {
	color: #E6A948;
}


/* --- POSITIONNEMENT --- */

/* En-tête */
#entete {
	padding: 15px 20px 10px 20px;
}
#entete h1 {
	margin: 0;
}
#entete h1 img {
	float: left;
	margin: 7px 20px 10px 0;
}
#entete .sous-titre {
	margin: 4px 0 15px 0;
}

/* Menu de navigation */
#navigation {
	padding: 12px 15px;
}
#navigation ul {
	margin: 0;
	list-style: none;
	text-align: center;
}
#navigation li {
	display: inline;
}
#navigation a {
	padding: 6px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}

/* Contenu */
#contenu {
	padding: 10px 20px;
}
#contenu > :first-child {
	margin-top: 10px;
}
#contenu p, #contenu li {
	line-height: 1.5;
}

/* Pied de page */
#pied {
	padding: 15px 20px;
	font-size: .85em;
}
#pied p {
	margin: .5em 0;
}
#copyright {
	text-align: left;
	font-size: 1em;
}


/* --- NOTES ---

1.	Pour pouvoir utiliser une hauteur (height) ou une hauteur minimale
	(min-height) sur un bloc, il faut que sont parent direct ait lui-même une
	hauteur déterminée (donc toute valeur de height sauf "auto": hauteur en
	pixels, em, autres unités...).
	Si la hauteur du parent est en pourcentage, elle se réfère alors à la
	hauteur du «grand-père», et ainsi de suite.
	Ainsi, pour pouvoir utiliser un "min-height: 100%" sur div#contenu, il nous
	faut:
	- un parent (body) en "height: 100%";
	- le parent de body également en "height: 100%".

2.	Il faut éviter que les marges des enfants de div#global ne se transmettent
	à leur parent. Notamment, le margin-top du premier enfant (ici, div#entete),
	et le margin-bottom du dernier enfant (ici, div#pied).
	On évite ce problème grâce à la propriété CSS overflow, qui bloque la
	fusion des marges. En savoir plus sur la fusion des marges:
	http://web.covertprestige.info/test
		04-blocs-imbriques-et-fusion-des-marges.html

3.	Les marges automatiques à gauche et à droite permettent de centrer notre
	bloc div#global, et donc tout le site.
	Pour aligner div#global à gauche, on fera:
		margin-left: 0;
		margin-rigth: auto;
	Pour aligner div#global à droite, on fera:
		margin-left: auto;
		margin-right: 0;
	Pour aligner div#global à droite avec un retrait (à droite) de 100px:
		margin-left: auto;
		margin-right: 100px;

*/