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

/* -------- DESIGN GENERAL -------- */
/*--------- CRISTAL BLUE -------*/

* {min-height:1px;}
body {border:0; margin:0; padding:0; background: #6e8cef; font:75%/165% "verdana",sans-serif; color:#060C3B; text-align:center;}

#sections_liens{
text-align: center;
margin: 0;
padding: 3px 0 0 0;
background: #6e8cef;
}
#sections_liens a{
font-size: 0.85em;
padding: 0 20px 0 20px;
color: white;
}
#sections_liens a{
font-size: 0.85em;
padding: 0 20px 0 20px;
color: white;
}

#site{
background:#EBEEFD url("../images/bg.gif") 0 0 repeat-x;
padding-top: 50px;
}

#main {width:960px; margin:0 auto 0 auto; text-align:left;}

#header {position:relative; width:960px; height:100px; margin:0; padding:0; background:#233C9B url("../images/header.jpg") 0 0 no-repeat; color:#FFF;}

    #header #logo {position:absolute; top:35px; left:35px; margin:0;}
    #header #logo a {color:#FFF;}
    #header #logo a:hover {color:#B5C4E3; text-decoration:underline;}

#connexion{
background:#060C3B;
margin:0 5px;
_height:1px;
border-bottom: 3px solid #0d164c;
font-size: 0.8em;
padding: 3px 0px 3px 0px;
text-align: center;
color:#94A8D4;
}
#connexion form{
margin: 0 80px 0 0;
}
#connexion input, #connexion select{
font-size: 0.9em;
border: 1px solid #94a8d4;
margin-right: 20px;
}
#connexion input:focus, #connexion select:focus{
background: #e2e6ff;
}
#connexion strong{
margin-right: 20px;
font-size: 1em;
}
#connexion .validation input{
border: 3px double #94a8d4;
}
#connexion_admin {
float: right;
padding-right: 15px;
padding-top: 3px;
}

/* TOUTE LA PAGE */
#page {width:960px; min-height:1px; background:#FFF url("../images/bg_page.gif") 0 0 repeat-y; _height:1px;}
#page-in {min-height:1px; padding:10px 0; background:url("../images/bg_page_in.jpg") 0 0 no-repeat; _height:1px;}

/* MENU DE DROITE */
#col {float:right; width:250px; margin:0 20px 0 0; padding:0; background:#B4C6F5 url("../images/col_bg.gif") 0 0 repeat-y;}
#col-in {padding:20px 10px; background:url("../images/col_top2.png") 0 0 no-repeat;}
#col h3 {padding:13px 15px 14px 15px; margin:0 -10px 15px -10px; background:#A0B9F3 url("../images/col_title_bg.gif") 0 0 repeat-y; color:#192666;}

    #col ul.category {margin:15px 0; padding:0; list-style:none;}
    #col ul.category li {margin:0; padding:0; border-bottom:1px solid #E0E8FA;}
    #col ul.category li a {display:block; padding:3px 0 3px 22px; background:url("../images/ico_links.gif") 5px 6px no-repeat; text-decoration:none; color:#060C3B}
    #col ul.category li a:hover {background-color:#D3DFF8; color:#192666;}

/* CONTENU DE GAUCHE */
#content {float:left; width:670px; _width:550px; margin:0; padding:20px 0 0 20px;}
	/* Pour les pages avec que 1 article */
	#content #contenu_1pg{
	background:url("../images/content_article_bg.jpg") 0 0 no-repeat;
	padding: 20px;
	margin: 0;
	min-height: 500px;
	}
    #content #contenu_1pg  h1 {margin:0 -20px; padding:10px; background:#DEE5FD url("../images/content_title_bg.gif") 0 0 repeat-y; color:#192666; text-align: center;}		

#footer {position:relative; clear:both; width:960px; height:60px; margin-bottom:50px; background:url("../images/footer.jpg") 0 0 no-repeat; color:#6685CC;}
#footer a {
color:#6685CC;
text-decoration: underline;
}
#footer a:hover {
color:#FF9000;
}
    #top {position:absolute; top:55px; left:690px;}
    #top p {position:relative; width:30px; height:25px; margin:0; overflow:hidden;}
    #top p span {display:block; position:absolute; left:0; top:0; z-index:1; width:30px; height:25px; background:url("../images/ico_top.gif") 0 0 no-repeat; cursor:pointer;}
    #top a:hover span {background:url("../images/ico_top.gif") -30px 0 no-repeat;}

    #createdby {position:absolute; top:10px; left:20px; margin:50px 0; color:#8CA3D8; width: 660px;}

.box {min-height:1px;}
.box:after {content:"."; display:block; line-height:0px; font-size:0px; visibility:hidden; clear:both;}
	
/* -------- PROPRIETES GENERALES -------- */
/*------------------------------------------------*/

h1, h2, h3, h4, h5 {border:0; margin:15px 0 10px 0; padding:0; font-weight:bold;}
h1 {font-size:260%; line-height:100%; font-family:"georgia",serif; font-weight:normal; text-align: center;}
h2 {font-size:175%; line-height:100%; font-family:"georgia",serif; font-weight:normal; text-align: center;}
h3 {font-size:120%; line-height:100%; font-weight:bold;}
h4 {font-size:120%;}
h5 {font-size:100%;}

a {
color:#6685CC;
text-decoration: none;
}
a:hover {
color:#FF9000;
text-decoration: underline;
}

/*POUR DE JOLIS TABLEAUX:

table {display:table; border-collapse:collapse; margin:15px 0; padding:0; border:1px solid #B7CAF6;}
tr {display:table-row;}
th, td {display: table-cell; border:1px solid #B7CAF6; margin:0; padding:5px; vertical-align:top; text-align:left;}
th {background:#E7ECFD; text-align:center; color:#192666; font-weight:bold;}
*/

/*POUR DE JOLIES LISTES:

ul, ol {display:block; border:0; margin:15px 0 15px 40px; padding:0;}
ol {list-style-type:decimal;}
li {display:list-item; border:0; margin:0; padding:0;}
ul ul, ul ol, ol ol, ol ul {margin: 0 0 0 20px;}

dl {border:0; margin:15px 0; padding:0;}
dt {border:0; margin:0; padding:0; font-weight:bold;}
dd {border:0; margin:0 0 0 30px; padding:0;}
*/

form {border:0; margin:0; padding:0;}
fieldset {border:1px solid #ccc; margin:15px 0; padding:10px;}
legend {margin-left:10px; font-size:100%; font-weight:bold; color:#008;}


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

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

}

/* -------- EDITO  -------- */
/* Pour la page d'accueil avec edito */
#content #edito {
background:url("../images/edito_bg.png") 0 0 no-repeat;
width: 505px;
padding: 20px;
margin: auto;
}
#content #edito h2 {margin:0 -20px; padding:10px; text-align: center; background:#DEE5FD url("../images/edito_title_bg.png") 0 0 repeat-y; color:#192666;}

/* -------- SOUVENIR -------- */
.souvenirs-menu{
width: 44%;
float: left;
display: block;
margin: 10px;
padding: 4px 4px 4px 4px;
background:#E7ECFD;
min-height: 70px;
color: black;
text-decoration: none;
line-height: 130%;
border: 3px solid #7898ec;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
}
.souvenirs-menu:hover{
background: #B7CAF6;
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;
border: 1px solid #7898ec;
}

/* -------- ANNIVERSAIRE -------- */
.anniversaire{
margin: auto;
border-collapse: collapse;
text-align: center;
font-size: 0.8em;
}
.anniversaire td{
padding: 6px;
border-top: 1px solid black;
}
.anniversaire th{
font-weight: bold;
padding: 0 6px 10px 6px;
}
#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; border:1px solid #B7CAF6;}
#documents tr {display:table-row;}
#documents th, #documents td {display: table-cell; border:1px solid #B7CAF6; margin:0; padding:5px; vertical-align:middle; text-align:center;}
#documents th {background:#E7ECFD; text-align:center; color:#192666; font-weight:bold;}

/* -------- NEWS -------- */
#content .new {clear:both; margin:0 0 20px 0; padding:20px; background:url("../images/content_article_bg.jpg") 0 0 no-repeat;}
#content .new h2 {margin:0 -20px; padding:10px; background:#DEE5FD url("../images/content_title_bg.gif") 0 0 repeat-y; color:#192666; text-align: left}
#content .new h2 span {background:url("../images/ico_list.gif") 0 50% no-repeat; padding-left:25px; margin-left: 20px;}

#content .new .info {margin:10px 0; padding-bottom:8px; border-bottom:1px solid #DEE5FD; color:#3B5AB3;}
#content .new .info a {color:#6685CC;}
#content .new .info a:hover {color:#FF9000;}

#content .new .info span.date, #content .info span.cat, #content .info span.user, #content .info span.comments {padding-left:15px;}
#content .new .info span.date {background:url("../images/ico_date.gif") 0 50% no-repeat;}
#content .new .info span.comments {background:url("../images/ico_comments.gif") 0 50% no-repeat; margin-left:8px;}

.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: 88px;
float: left;
margin: 2px;
}
.calendrier-jour{
position: relative;
width: 80px;
height: 40px;
padding: 20px 3px 0px 3px;
border: 1px solid #7898ec;
float: left;
margin: 2px;
font-size: 0.75em;
line-height: 120%;
overflow: auto;
background-color: #E7ECFD;
}
.calendrier-jour-transparent{
width: 88px;
height: 40px;
float: left;
margin: 2px;
}
.calendrier-jour:hover{
background-color: #B7CAF6;
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: 500px;
margin: 20px auto 30px auto;
}
#calendrier_form div div{
width: 220px;
float: left;
}
#calendrier_form #calendrier_form_valider{
display: block;
margin-left: 180px;
clear: both;
}
/* -------- COMMENTAIRES -------- */
.commentaire{
border: 1px solid #7898ec;
margin: 0px 10px 35px 10px;
}
.commentaire_auteur{
background: #E7ECFD;
border-bottom: 1px solid #7898ec;
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;
border: 1px solid #7898ec;
}
.formulaire legend{
font-weight: bold;
border: 1px solid #7898ec;
background: #E7ECFD;
}
#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: 3px;
}


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

/* -------- BBCODE COMMANDE -------- */
.bbcode{
width: 90%;
padding: 7px 0 3px 0;
margin: 10px auto 10px auto;
border: 1px solid gray;
background: #e8f0f4;
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;}