/* ---------- < propriétés générales > ---------- */
html, body { margin: 0; padding: 0; }

body {
color: #451a00; 
background-color: #000;
background-position: top left;
background-repeat: repeat-x;
font-family: Georgia, Times, serif;
font-size: 13px;
}
div#coeur {
clear: both;
width: 846px;
margin: 0;
padding-top: 0;
padding-bottom: 0;
background: transparent url(img/bg_page_milieu.png) center top repeat-y; 
}
#coeurcont {
width: 798px;
margin: 0 25px 0 23px;
border-bottom: 1px solid #fff;
}
#coeurcont h1 {
clear: both; 
margin: 0 0 0 168px; 
padding: 7px 0 7px 0;
font-size: 18px;
font-style: italic; 
}
#coeurcont h3 {
margin-top: 20px;
}
#principal {
width: 477px;
margin: 0 153px 20px 168px; 
padding: 0; 
}
#principal p { 
line-height: 28px; 
text-align: justify; 
margin: 10px 0;
padding: 0; 
text-indent: 20px; 
font-style: italic; 
}
#principal_large {
width: 620px;
margin: 0 0 20px 168px; 
padding: 0; 
}
#principal_xl {
width: 738px;
margin: 0 30px 20px 30px;
padding: 15px 0 0 0;
}
/*---------------------------------- < spécificités du site bf > ----------------------------------*/
body#bf { background-image: url(img/bgbf.png); }
body#bf a { color: #b00000; }
body#bf h1 { color: #b00000; }
body#bf h2 { color: #b00000; }
body#bf #titre { background-image: url(img/bf_h1.png); }
body#bf #coeurcont { background: #fff url(img/minisousa.jpg) left bottom no-repeat; }
/*---------------------------------- < spécificités du site tambours > ----------------------------------*/
body#tambours { background-image: url(img/bgtambours.png); }
body#tambours a { color: #900000; }
body#tambours h1 { color: #900000; }
body#tambours h2 { color: #900000; }
body#tambours #titre { background-image: url(img/tb_h1.png); }
body#tambours #coeurcont { background: #fff url(img/minitambour.jpg) left bottom no-repeat; }
/*---------------------------------- < spécificités du site ecole > ----------------------------------*/
body#ecole { background-image: url(img/bgecole.png); }
body#ecole a { color: #3e636f; }
body#ecole h1 { color: #3e636f;}
body#ecole h2 { color: #3e636f;}
body#ecole #titre { background-image: url(img/ec_h1.png); }
body#ecole #coeurcont { background: #fff url(img/maincraie.jpg) left bottom no-repeat; }
/*---------------------------------- </ spécificités du site ecole > ----------------------------------*/
body#prive { background-image: url(img/bgbf.png); font-size: 12px; }
body#prive a { color: #b00000; }
body#prive h1 { color: #b00000; }
body#prive h2 { color: #b00000; }
body#prive #titre { background-image: url(img/bf_h1.png); }
body#prive  #principal p { line-height: normal; text-indent: 0; }
body#prive #principal_large p { line-height: normal; text-indent: 0; }
body#prive #coeurcont { background: #fff url(img/miniprive.jpg) left bottom no-repeat; }
/*---------------------------------- < propriétés communes > ----------------------------------*/
body.body_msg { background-position: left -140px; }
body.prive { background-position: left -250px; }
div#message { 
width: 300px; 
background: #fff; 
margin-top: 250px; /* pas trop bas car en 800x600 après on sort du cadre */
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-size: 11px;
padding: 10px 20px 5px 20px; 
}
div#message h1 { margin: 0; font-size: 20px; font-style: italic; line-height: 30px; }
img { border: none; }
strong { font-weight: bold; }
em { font-style: italic; }
h1, h2, h3 { margin: 0; padding: 0;  font-weight: bold; }
h1 { font-size: 18px; letter-spacing: 1px; margin-bottom: 20px; }
h2 { color: #900000; font-size: 16px; font-style: italic; letter-spacing: 1px; margin-bottom: 10px; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style-type: none; }
.centre { text-align: center; }
input.bouton {
color: #451a00; 
background: #e3ddc5; 
padding: 3px 10px; 
font-variant: small-caps; 
border: 1px solid #ac9884; 
margin: 10px; 
font-family: georgia, serif; 
}
input.bouton:hover { border: 1px solid #451a00; } 
.area { border: 1px solid #ac9884; }
.area:hover { background: #f3f0e6; }
#page {
width: 846px;
margin: 0px;
margin-left: auto;
margin-right: auto;
}
/* ---------- </ propriétés générales du document > ---------- */
/*------------------------------------------------------------------------------------------------------ < haut de page > ------------------------------------------------------------------------------------------------------*/
#bandeau { height: 130px; margin: 0; margin-bottom: 10px; }
#bandeau .logo {
float: left;
width: 180px;
height: 130px;
background: transparent url(img/logo.png) left top no-repeat;
}
#bandeau .logo a {
display: block;
width: 180px;
height: 130px;
text-indent: -9999px;
}
#bandeau h1 {
float: left;
width: 277px;
height: 89px;
background: #ccc url(img/bandeau_prive.png) left top no-repeat;
color: #fff;
margin: 0;
padding: 0;
font-size: 20px;
font-style: italic;
line-height: 87px;
text-indent: -9999px;
}
#nav {
list-style: none;
margin: 0;
padding: 0; 
height: 98px;
overflow: hidden; /* contexte de formatage, touche pas */
}
#nav li {
float: left;
color: #fff;
}
#nav li.ong1 {
width: 270px;
margin-right: 30px;
}
#nav li.ong2 {
width: 190px;
}
#nav li.ong3 {
width: 150px;
margin-left: 0px;
}
#nav li a {
display: block;
height: 98px;
color: #fff;
font: 1em Georgia, serif;
text-transform: uppercase; 
line-height: 1em;
padding: 0;
text-align: center;
text-indent: -9999px;
text-decoration: none;
}
#nav li a:hover { background-position: right top; }
a.bf1 { background: transparent url(img/bfong1.png); }
a.bft2 { background: transparent url(img/bf_tambong2.png); }
a.bfe3 { background: transparent url(img/bf_ecolong3.png); }
a.t1 { background: transparent url(img/tambong1.png); }
a.tbf2 { background: transparent url(img/tamb_bfong2.png); }
a.te3 { background: transparent url(img/tamb_ecolong3.png); }
a.e1 { background: transparent url(img/ecolong1.png); }
a.ebf2 { background: transparent url(img/ecole_bfong2.png); }
a.et3 { background: transparent url(img/ecole_tambong3.png); }
#header { 
width: 846px; 
height: 190px; 
padding-top: 19px;
background: url(img/bg_page_haut.png) center top no-repeat; 
}
h1#titre {
width: 780px;
height: 30px;
background-color: transparent;
background-position: top right; 
background-repeat: no-repeat;
margin: 0;
color: #512911;
margin-bottom: 10px; 
margin-left: auto; 
margin-right: auto; 
letter-spacing: 4px;
font-size: 20px;
font-weight: normal; 
font-style: italic;
font-family: Georgia, serif;
text-indent: -9999px; 
}
#headercont {
width: 799px;
height: 150px;
margin: 0 24px 0 23px;
}
#diapo {
float: right;
width: 630px;
height: 150px;
background: #fff;
}
#diapo h1 {
clear: both; 
margin: 0; 
padding: 7px 0 7px 0;
background: #fff url(img/bgtitre.png) left top no-repeat;
font-size: 18px;
font-style: italic; 
}
#diapo p { 
line-height: 28px; 
text-align: justify; 
margin: 0;
padding: 10px; 
text-indent: 20px; 
font-style: italic; 
}
/*---------------------------------- < menu de navigation interne > ----------------------------------*/
ul#menu { 
margin: 0;
padding: 0;
width: 167px;
height: 150px;
list-style-type: none;
background: #fff url(img/bgmenu.png) left top no-repeat;
}
ul#menu li { margin: 0; display: inline; width: 167px; height: 30px; } /* display: inline c'est une correction pour IE5 et IE5.5 ne l'enlève surtout pas */
ul#menu li a { 
display: block;
height: 30px;
line-height: 28px;
margin: 0; 
padding: 0;
padding-left: 30px;
color: #512911; 
font-style: italic; 
font-weight: bold; 
text-decoration: none; 
font-size: 14px; 
}
ul#menu li a:hover { color: #2b1600; background: #fff url(img/bgmenu.png) left top no-repeat; }
ul#menu li a#accueil:hover { background-position: right top; }
ul#menu li a#present:hover { background-position: right -30px; }
ul#menu li a#agenda:hover { background-position: right -60px; }
ul#menu li a#media:hover { background-position: right -90px; }
ul#menu li a#contact:hover { background-position: right -120px; }
/* et voilà une seule image en tout et pour tout... CSS power :) */
div#menu_prive { 
width: 167px;
margin: 0 631px 0 0;
height: 150px;
background: #fff left top no-repeat;
padding: 0; 
font-size: 10px;
}
/*---------------------------------- </ menu de navigation interne > ----------------------------------*/
/*------------------------------------------------------------------------------------------------------ </ haut de page > ------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------------ < coeur de page > ------------------------------------------------------------------------------------------------------*/
#encart_gauche { 
float: left;
width: 115px; 
margin: 100px 0 110px 0;
padding: 0;
padding-left: 10px;
font-size: 10px;
border-right: 1px dashed #ccc; 
}
#encart_gauche.prive { 
float: left;
width: 115px; 
margin: 10px 0 110px 0;
padding: 0;
padding-left: 10px;
font-size: 10px;
border-right: 1px dashed #ccc; 
}
#encart_gauche h4 { font-style: italic; margin: 0 ; font-size: 10px; }
#encart_gauche li { margin: 10px 0; }
#encart_droite { 
float: right;
margin: 0 5px 5px 0;
padding: 0;
width: 140px ; 
background: #e3ddc5; 
font-size: 11px;
text-align: justify;
}
#encart_droite h3 { margin: 0; margin-bottom: 5px; font-weight: normal; font-style: italic; }
#encart_droite h3 strong { font-weight: bold; font-style: normal; }
#encart_droite li { margin: 0; padding: 0 8px; }
#encart_droite li p { margin: 0; }
#encart_droite li.haut { 
background: #e3ddc5 url(img/bgencart_haut.png) center top no-repeat;
padding: 8px 8px 12px 8px;
}
#encart_droite li.bas { 
background: #e3ddc5 url(img/bgencart_bas.png) center bottom no-repeat;
padding: 12px 8px 8px 8px; 
}
#encart_droite li a { color: #451a00; display: block; padding-top: 5px; }
#encart_droite li a:hover { text-decoration; underline; }
ul#agenda { margin: 30px 0; }
ul#agenda li { margin: 10px 0; border-bottom: 1px dotted #ddd; }
ul#agenda li p { line-height: normal; text-indent: 0; }
ul#agenda li p .ou { font-weight: bold; padding-left: 5px; }
ul#agenda li p .quoi { font-style: italic; font-variant: small-caps; font-size: 15px; }
ul#agenda li p .desc { font-size: 10px; font-style: normal; position: relative; top: -2px; left: 11px; }
ul#bureau { margin: 0; font-size: 11px; }
ul#bureau li { float: left; width: 94px; height: 130px; margin: 2px; padding: 4px; background: #efecdf; }
ul#bureau li.large { width: 100%; height: auto; }
ul#bureau li.dirlo { margin: 40px 17px; height: auto; }
ul#bureau li h4 { margin: 2px 0; padding: 0; font-size: 12px; }
#principal_large p { 
line-height: 28px;  
text-align: justify; 
margin: 10px 0;
padding: 0; 
text-indent: 20px; 
font-style: italic; 
}
#astuce { clear: both; height: 1px; }
#menurappel { color: #777; text-align: center; font-size: 9px; }
#menurappel a { padding: 0 10px; color: #777; }
#formcontact {
margin: 0;
padding: 0;
font-style: normal;
font-size: 11px;
}
#formcontact fieldset { border: none; margin: 20px 0px; }
ul#boussole_media {
margin-top: 10px; 
margin-right: auto;
margin-left: auto; 
width: 390px;
height: 120px;
background: #fff url(img/ulmedialogos.png) left bottom no-repeat;
padding: 0; 
}
ul#boussole_media li { 
display: inline; 
margin: 0; 
float: left; 
width: 130px; 
height: 120px; 
text-align: center; 
}
ul#boussole_media li a { 
display: block;
height: 120px;
margin: 0; 
padding: 0;
color: #999; 
text-decoration: none; 
font-style: italic;
text-indent: -9999px;
}
ul#boussole_media li a:hover { background: #fff url(img/ulmedialogos.png) left bottom no-repeat; }
ul#boussole_media li a#photos:hover { background-position: -390px bottom; }
ul#boussole_media li a#videos:hover { background-position: -520px bottom; }
ul#boussole_media li a#audios:hover { background-position: -650px bottom; }
#navigation {
background: #ebebeb;
border: 1px dotted #ffffff;
}
#navigation a {
margin-right: 15px;
}
/*------------------------------------------------------------------------------------------------------ </ coeur de page > ------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------------ < pied de page > ------------------------------------------------------------------------------------------------------*/
#pied {
width: 846px;
height: 95px;
margin: 0;
padding-top: 5px;
color: #444;
background: transparent url(img/bg_page_bas.png) center bottom no-repeat; 
}
ul#elements {
margin: 0 33px;
padding: 0;
width: 780px;
height: 70px;
}
ul#elements li {
float: left; 
list-style-type: none; 
height: 68px; 
margin: 0; 
padding: 0;
font-size: 11px;
}
ul#elements li a { color: #444; }
ul#elements h3 {
margin: 0 0 7px 0;
padding: 0;
color: #444;
font-style: italic;
font-size: 13px;
}
ul#elements li p { margin: 0; }
ul#elements li.gauche {
width: 250px;
padding-left: 5px;
padding-right: 5px;
}
ul#elements li.milieu {
width: 230px;
margin: 0;
padding: 0 5px 0 20px;
border-left: 1px dashed #292929; 
border-right: 1px dashed #292929; 
}
ul#elements li.copy { width: 230px; padding-left: 10px; font-size: 10px; }
ul#semelle {
clear: both;
width: 780px;
height: 14px;
color: #333;
margin: 0 33px;
padding: 0;
text-align: right;
line-height: 12px;
}
ul#semelle li {
float: none;
display: inline;
height: 14px;
line-height: 12px;
margin: 0;
padding: 0; 
font-size: 9px;
}
ul#semelle li  a { color: #333; margin: 0; padding: 0 2px; }
/*ul#semelle li  a:hover { color: #555 ; text-decoration: underline; }*/
ul#semelle  li  a:hover { color: #555; }
/*------------------------------------------------------------------------------------------------------ </ pied de page > ------------------------------------------------------------------------------------------------------*/
.anniv{
	margin: 5 10px;
	background-color: #f3f0e6;
	font-family: Trebuchet, Arial, sans-serif;
	text-align: center;
	color: #000000;
}
.encadre{
	font-family: Trebuchet, Arial, sans-serif;
	font-style: normal;
	border: 1px dotted #cccccc;
	margin-bottom: 5px;
	background: #f3f0e6;
}
.encadre:hover{
	
}