/*----------------------------------------------*/
/* -------- DESIGN POUR LE SITE -------- */
/*----------------------------------------------*/

/* -------- DESIGN GENERAL -------- */
/*--------- SUPERIOR ORANGE -------*/
#sections_liens{
text-align: center;
margin: 0;
padding: 3px 0 0 0;
background: white;
-moz-opacity:0.85;
opacity: 0.85;
filter:alpha(opacity=85);
}
#sections_liens a{
font-size: 0.85em;
padding: 0 20px 0 20px;
color: #dd5500;
}

/* 1. RESET: on fixe toutes les propriétés comme on veut
------------------------------------------------------------- */
* {margin:0; padding:0;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, blockquote {border:0; outline:0; vertical-align:baseline; background:transparent;}
address, caption, cite, code, dfn, th, var {font-style:normal; font-weight:normal;}
h1, h2, h3, h4, h5, h6, table {font-size:100%; font-weight:normal;}
ol, ul {list-style:none;}
table {border-collapse:collapse; border-spacing:0;}
table caption, table th {text-align:left;}
.box {min-height:1px;}
.box:after {display:block; visibility:hidden; clear:both; line-height:0; font-size:0; content:".";}

/* 2. STYLE DE LA PAGE 
-----------------------------*/
body {padding-bottom:40px; background:url("../images/bg.gif"); font:0.95em/1.5 "calibri","arial", sans-serif; background-color:#362F2D; color:#000;}
h1, h2, h3, h4, h5, h6, address, blockquote, dl, fieldset, ol, p, table, ul {margin:15px 0;}
#center {width:900px; margin:40px auto 0px auto;}

#main-top {width:900px; height:15px; background:url("../images/main-top.gif") 0 0 no-repeat; font-size:0; line-height:0;}
#main-bottom {width:900px; height:15px; background:url("../images/main-bottom.gif") 0 0 no-repeat; font-size:0; line-height:0; clear: both;}
#main {padding:0 0 0 0; background:url("../images/main.gif") 0 0 repeat-y;}
#main #header {position:relative; top:10px; left:-25px; height:130px; background:url("../images/header_left.png") no-repeat; padding-left: 25px;}

#aside {float:right; width:250px; padding-right:30px; background:url("../images/aside.gif") 0 0 no-repeat; margin-top: 20px;}
#aside ul {margin:0 0 15px 15px;}
#aside ul li {display:inline;}
#aside ul li a {display:block; padding:2px 0 2px 25px; background:url("../images/arrow.gif") 0 9px no-repeat; text-decoration:none;}
#aside .title {width:250px; margin:0 0 -10px 0; padding:10px 40px 35px 15px; background:url("../images/title-right.gif") 100% 100% no-repeat; font-size:120%; font-weight:bold;}

#content {float:left; width:555px; padding:0 0 0 30px;}
#content h1 {padding-bottom:4px; background:url("../images/dot.gif") 0 100% repeat-x; font-size:200%; font-weight:bold; letter-spacing:-1px;}
#content h2 {margin-top: 0px; padding-bottom:4px; text-align: center; font-size:150%; font-weight:bold; letter-spacing:-1px;}
#content h3 {margin-top: 0px; font-size:120%; margin-left: 50px;}
#content table { border-collapse:collapse;}
#content table th, #content table td {padding:5px 10px;}
#content table th {font-weight:bold;}
#content p {text-align:justify;}

#footer {clear:both; padding:10px; background:url("../images/footer.gif") 0 0 repeat-x;}

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

.input {padding:2px; background:url("../images/input.gif") 0 0 no-repeat;}
.submit {padding:2px; background:url("../images/submit.gif") 0 0 repeat-x;}
.input, .submit {font:80%/1 "arial",sans-serif;}

#connexion{
margin-right: 20px;
}
#connexion form{
font-size: 0.8em;
text-align: right;
}
#connexion input, #connexion select{
font-size: 0.9em;
margin-right: 10px;
}
#connexion strong{
margin-right: 20px;
}

/* 3. STYLES: INDIQUE LES COULEURS ETC... 
--------------------------------------------------------*/
body {background-color:#362F2D; color:#000;}
a {color:#D50;}
a:hover, a:active, a:focus {color:#000 !important;}
#main-top, #main-bottom, #main {background-color:#fff;}

#content h1{color:#dd5500;}
#content .info {color:#7C6B62;}
#aside ul li a {border-bottom:1px solid #EAE6E5;}
#aside ul.ul-02 li a {color:#524745;}
#aside .title {color:#fff;}
#footer {background-color:#282320; color: white;}
#footer a {color:#FFCEAD;}
#footer a:hover {color:#fff !important;}
#links, #links a {color:#A29188;}
#links a:hover {color:#fff !important;}
.input {border:1px solid #aaa; background-color:#fff;}
.submit {color:#fff;}

/* POUR DES JOLIS TABLEAUX */
#content table {border:2px solid #B1A39D;}
#content table th, #content table td {border:1px solid #C7BDB9;}
#content table th {color:#d50;}
#content table tr.bg td {background:#F3F1F1;}

#content table.noborder, #content table.noborder th, #content table.noborder td{
border: none;
background: none;
}

/* POUR DE JOLIES LISTES */
#content ul {margin:15px 0; list-style:none;}
#content ul li {padding-left:20px; background:url("../images/arrow.gif") 0 7px no-repeat;}

/* 4. POUR FIXER LES BUGS DE IE 6 (propriétés uniquement comprises par IE6) 
------------------------------------------------------------------------------------------- */
body {_text-align:center;}
#center {_text-align:left;}
#content {_width:500px;}
#aside {_width:280px; _margin-right:-55px}
#aside .title {_position:relative; _width:305px;}
.box {_height:1%;}
.input, .submit {_height:29px;}

/* -------- DESIGN DES SCRIPTS -------- */
/*--------------------------------------------*/

/* -------- COULEURS DE FOND ET BORDURES -------- */
.souvenirs-menu, #documents th, .calendrier-jour, .commentaire_auteur, .formulaire legend, .bbcode{
background:#DEF2FE;
}
.souvenirs-menu:hover, .calendrier-jour:hover{
background: #ABDFFE;
}
.photo img, .calendrier-jour, .formulaire fieldset, .formulaire legend, .bbcode, .commentaire{
border: 1px solid #0089DD;
}
.commentaire_auteur{
border-bottom: 1px solid #0089DD;
}
.souvenirs-menu{
border: 3px solid #0089DD;
}
#documents table, #documents th, #documents td {
border:1px solid #c7bdb9;
}
#documents th{
color:#dd5500;
}

/* -------- ARTICLE  -------- */
.article{

}

/* -------- EDITO  -------- */
/* Pour la page d'accueil avec edito */
#content #edito {

}

/* -------- SOUVENIR -------- */
.souvenirs-menu{
width: 42%;
float: left;
display: block;
margin: 10px;
padding: 4px 4px 4px 4px;
min-height: 70px;
color: black;
text-decoration: none;
line-height: 130%;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
}
.souvenirs-menu span{
display: block;
font-size: 0.8em;
line-height: 1.1;
}
.souvenirs-menu:hover{
text-decoration: none;
}
.souvenirs-menu img{
display: block;
float: left;
margin-right: 20px;
height: 65px;
}
.photo a{
display: block;
float: left;
margin: 5px;
padding: 0;
background: none;
border: none;
text-align: center;
}
.photo img{
margin: 0;
}

/* -------- ANNIVERSAIRE -------- */
.anniversaire{
margin: auto;
border-collapse: collapse;
font-size: 0.8em;
}
.anniversaire td{
padding: 6px;
border-top: 1px solid black;
text-align: center;
}
.anniversaire th{
font-weight: bold;
padding: 0 6px 10px 6px;
text-align: center;
}
#annifajourdhui{
margin: auto;
font-size: 1em;
border: none;
}

/* -------- DOCUMENTS -------- */
#documents {
text-align: center;
margin: 0 15px 50px 15px;
}
#documents img{ /*Pour les icones*/
height: 35px;
}

#documents table {display:table; border-collapse:collapse; margin:35px auto 0 auto; padding:0;}
#documents tr {display:table-row;}
#documents th, #documents td {display: table-cell; margin:0; padding:5px; vertical-align:middle; text-align:center;}
#documents th { text-align:center; font-weight:bold;}

/* -------- NEWS -------- */
#content .new {clear:both; margin-bottom: 20px; background:url("../images/content_article_bg.jpg") 0 0 no-repeat;}
#content .new .info {padding:5px 10px; background:url("../images/gradient.gif") 0 0 repeat-x; font-size:80%; text-align:center;}

.news_page{
margin-top: 50px;
font-size: 0.8em;
text-align: center;
}

/* -------- CALENDRIER -------- */
.calendrier-titre{
position: relative;
text-align: center;
width: 400px;
margin: 10px auto 30px auto;
}
.calendrier-precedent, .calendrier-suivant{
position: absolute;
display: block;
width: 48px;
height: 48px;
}
.calendrier-precedent{
top: -5px;
left: 0px;
}
.calendrier-suivant{
top: -5px;
right: 0px;
}
.calendrier-mois{
width: 650px;
margin-left: -5px;
}
.calendrier-jour_nom{
font-weight: bold;
text-align: center;
width: 80px;
float: left;
margin: 2px;
}
.calendrier-jour{
position: relative;
width: 72px;
height: 40px;
padding: 20px 3px 0px 3px;
float: left;
margin: 2px;
font-size: 0.75em;
line-height: 120%;
overflow: auto;
}
.calendrier-jour-transparent{
width: 80px;
height: 40px;
float: left;
margin: 2px;
}
.calendrier-jour:hover{
color: white;
}
.curseur_pointeur{
cursor: pointer;
}
.calendrier-jour p{
margin: 0;
}

.calendrier-jour-numero{
position: absolute;
top: 3px;
left: 4px;
color: #868686;
}
.calendrier-anniversaire{
position: absolute;
top: 3px;
right: 4px;
}

#calendrier_details{
min-height: 300px;
width: 500px;
margin: auto;
background: none;
}
.calendrier-details-img{
float: left;
}
.calendrier-details-contenu{
margin-left: 140px;
padding-top: 10px;
}
.calendrier-details-commentaires{
margin-left: 20px;
}

#calendrier_form{
width: 550px;
margin: 20px auto 30px auto;
}
#calendrier_form div div{
width: 200px;
float: left;
}
#calendrier_form div div label{
clear: left;
width: 200px;
float: none;
text-align: left;
margin-left: 0;
margin-bottom: 0px;
}
#calendrier_form #calendrier_form_valider{
display: block;
margin-left: 180px;
clear: both;
}
/* -------- COMMENTAIRES -------- */
.commentaire{
margin: 0px 10px 35px 10px;
}
.commentaire_auteur{
padding: 3px 0 3px 25px;
font-size: 90%;
}
.commentaire_date{
float: right;
font-size: 90%;
margin: 0 10px 0 0;
}
.commentaire_contenu{
margin: 10px;
}

 /* -------- FORMULAIRE -------- */
.formulaire label{
clear: left;
width: 30%;
float: left;
text-align: left;
margin-left: 20%;
margin-bottom: 5px;
}
.formulaire fieldset{
width: 80%;
margin: auto;
background: transparent;
}
.formulaire legend{
font-weight: bold;
margin-left: 10px;
}
.formulaire legend a{
text-decoration: none;
}
#formulaire_interieur, .formulaire_interieur{
padding: 10px;
}
.formulaire .validation{
margin-top: 10px;
text-align: center;
}
.formulaire #id_textarea_bbcode{
display: block;
width: 80%;
margin: auto;
}
.formulaire .captcha{
position: relative;
top: 6px;
}
.formulaire input[type=text], .formulaire textarea{
font-family: "Courier New";
}


/* -------- DIVERS -------- */
/*----------------------------*/

/* -------- BBCODE COMMANDE -------- */
.bbcode{
width: 90%;
padding: 7px 0 3px 0;
margin: 10px auto 10px auto;
text-align: center;
clear: both;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
}
.bbcode img{
cursor: pointer;
}
.bbcode img:hover{
background: none;
}
.bbcode select{
position: relative;
bottom: 5px;
}

/* -------- AUTRES --------  */
.erreur{
font-weight: bold;
text-align: center;
border: 1px solid red;
margin: 10px 20px 10px 20px;
padding: 5px 10px 5px 10%;
background-color: #FFD0D0;
background-image: url("../../images/erreur.png");
background-repeat: no-repeat;
background-position: 5% 50%;
}
.erreur ul{
font-weight: normal;
}
.ok{
font-weight: bold;
color: green;
text-align: center;
border: 1px solid green;
margin: 10px 20px 10px 20px;
padding: 15px 10px 15px 10%;
background-color: #D8FFBC;
background-image: url("../../images/ok.png");
background-repeat: no-repeat;
background-position: 5% 50%;
}
.fin_float{
clear: both;
}
a img{
border: none;
}
.centré{
text-align: center;
}
.gauche{
text-align: left;
}
.droite{
text-align: right;
}
.gras{
font-weight: bold;
}
.souligné{
text-decoration: underline;
}.italique{
font-style: italic;
}.barré{
text-decoration: line-through;
}
.clear{
clear: both;
}
.petit{
font-size: x-small;
}
.tpetit{
font-size: xx-small;
}
.grand{
font-size: large;
}
.tgrand{
font-size: x-large;
}


/* RAJOUTE POUR WEB MOBILE */
#btnMenu_mobile {display: none;}
#title_mobile {display: none;}