/* ---------------------------------------------
------------ DESIGN GENERAL -----------
 ---------------------------------------------*/

body {
margin: 0;
background: url("fond.gif") repeat;
font-family: Arial, Verdana, "sans-serif"; 
font-size: 0.7em;
}
#site {
padding: 7px 14px 0 14px;
width: 772px;
margin: auto;
background: url("site_fond.png") repeat-y;
position: relative;
}

#degrade{
position: absolute;
top: 0px;
left: 14px;
background: url("degrade.png") repeat-x;
height: 250px;
width: 772px;
z-index: 1;
}

/*----- HAUT -----*/
#haut {  
width: 755px;
z-index: 2; position: relative;
margin: 5px 0 10px 0;
}
#menu1, #choix_langues{
margin: 0;
display: inline;
}
#choix_langues li, #menu1 li{
display: inline;
list-style-type: none;
padding: 0 10px 0 10px;
}
#choix_langues{
padding: 0 0 0 400px;
}

#header {  
width: 755px;
height: 141px;
background: url("header.jpg"); 
margin: auto;
z-index: 2; position: relative;
}
#header h1{  /* On laisse le titre pour le référencement*/
display: none;
}

/*----- MENU -----*/
#menu{
margin: 0 auto 15px auto;
padding: 0 0 10px 0;
width: 755px;
/*border-bottom: 2px dashed #ffbe60;*/
z-index: 2; position: relative;
}
#liens {
width: 500px;
padding: 10px 0px 0 0;
margin: 0 0 0 30px;
}
#liens  li{
list-style-type: none;
float: left;
margin: 0 5px 5px 5px;
padding: 0 5px 0 5px;
border: 1px dotted orange; /*#000; */
text-align: center;
background: #fff4d4;
width: 130px;
}
#liens  li:hover{
background: #ffcc5e;
border: 1px dotted #fff4d4; /*#000; */
}
#liens  li a{
display: block;
margin: 5px;
text-transform: uppercase;
text-decoration: none;
color: black;
}
#liens  li:hover a{
color: #0b81be;
}
#connexion{
display: block;
padding: 10px 0 0 10px;
float: right;
background: url("menu_rond.png");
width: 190px;
height: 42px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: black;
}
#connexion:hover{
/* background: url("menu_rond2.png");*/
color: #0b81be;
text-decoration: underline;
}
#installateur{
padding: 5px 0 0 10px;
float: right;
background: url("menu_rond_installateur.png");
width: 190px;
height: 67px;
text-align: center;
text-transform: uppercase;
color: black;
}
#installateur a{
color: black;
text-decoration: none;
}
#installateur a:hover{
text-decoration: underline;
color: #0b81be;
}
/*----- CONTENU -----*/
.contenu{
padding: 0 20px 0 20px;
z-index: 2;
position: relative;
}
.contenu_moyen{
margin: auto;
width: 600px;
z-index: 2;
position: relative;
}
.contenu_petit{
margin: auto;
width: 400px;
z-index: 2;
position: relative;
}

.contenu_droite1{
width: 340px;
padding: 0 20px 0 5px;
margin: 0 0px 10px 380px;
z-index: 2;
position: relative;
}
.contenu_gauche1{
margin: 0 0 0 0;
padding: 0 15px 0 20px;
width: 343px;
float: left;
border-right: 1px solid #0c8bcc; /*2px dashed #ffbe60;*/
z-index: 2;
position: relative;
}
.contenu_droite2{
width: 245px;
float: right;
padding: 0px 0 0 15px;
margin: 0px 10px 10px 10px;
border-left: 1px solid #0c8bcc; /*2px dashed #ffbe60;*/
z-index: 2;
position: relative;
}
.contenu_gauche2{
margin: 0 0 0 0;
padding: 0 0 0 20px;
width: 460px;
z-index: 2;
position: relative;
}

/*----- FOOTER -----*/
#footer {
clear: both;
width: 772px;
height: 16px;
margin: 30px 0 0 0;
padding: 40px 0 0 0;
background: url("footer.png"); 
text-align: center;
font-size: 0.8em;
color: #000;
position: relative;
}
#footer span{
padding: 0 20px 0 20px;
}
#footer a{
color: #000;
}

/* ---------------------------------------------
------------DIVERS -----------
 ---------------------------------------------*/
 a {
color: #0b81be;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #db911b;
}
a img{
border: none;
}
h1{
color: #0c8bcc;
text-align: center;
}
h2{
color: #0c8bcc;
background: url("pre_titre.png") no-repeat 0px 3px;
padding: 0px 0px 0px 25px;
border-bottom: 1px dotted #0c8bcc;
margin-top: 15px;
font-size: 1.5em;
}
h3{
width: 50%;
color: #0c8bcc;
background: url("pre_titre.png") no-repeat 0px 3px;
padding: 0px 0px 0px 25px;
border-bottom: 1px dotted #0c8bcc;
margin: 15px auto 0 auto;
font-size: 1.3em;
}
h4{
margin: 20px 0 8px 10px;
font-size: 1.0em;
}

.clear{
clear: both;
}
.clear-border{
clear: both;
border-bottom: 1px solid #0c8bcc;
margin: 0 20px 0 20px;
}
.image-right{
float: right;
margin: 5px 0 5px 5px;
padding: 1px;
border: 1px solid #0c8bcc;
}
.image-left{
float: left;
margin: 5px 5px 5px 0;
padding: 1px;
border: 1px solid #0c8bcc;
}
.erreur{
text-align: center;
border: 1px solid red;
margin: 10px 20px 10px 20px;
padding: 10px 0 10px 0;
background-color: #FFD0D0;
background-image: url("erreur.gif");
background-repeat: no-repeat;
background-position: 20px 6px;
}
.erreur ul{
}
.ok{
font-weight: bold;
color: green;
text-align: center;
border: 1px solid green;
margin: 10px 20px 10px 20px;
padding: 10px 0 10px 5px;
background-color: #D8FFBC;
background-image: url("ok.gif");
background-repeat: no-repeat;
background-position: 20px 5px;
}

.centre, .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;
}
.petit{
font-size: small;
}
.tpetit{
font-size: x-small;
}.ttpetit{
font-size: xx-small;
}
.grand{
font-size: large;
}
.tgrand{
font-size: x-large;
}
.ttgrand{
font-size: xx-large;
}

.bouton{
margin: auto;
padding: 5px 5px 5px 5px;
border: 1px dotted orange;
text-align: center;
background: #fff4d4;
width: 150px;
}
.bouton:hover{
background: #ffcc5e;
border: 1px dotted #fff4d4;
}
.bouton a{
display: block;
text-transform: uppercase;
text-decoration: none;
color: black;
}
.bouton:hover a{
color: #0b81be;
}

/* -------- BBCODE -------- */
.citation{
border: 1px solid silver;
margin: 10px;
padding: 5px;
}
.citation_auteur{
font-size: 0.8em;
text-decoration: underline;
}
.titre1_bb{
font-weight: bold;
text-decoration: underline;
font-size: 1.2em;
margin: 5px 0 0px 15px;
display: inline;
}
.titre2_bb{
font-weight: normal;
text-decoration: underline;
font-size: 1em;
margin: 5px 0 0px 25px;
display: inline;
}
.bbcode-float_droite{
float: right;
margin: 5px;
padding: 1px;
border: 1px solid #0c8bcc;
}
.bbcode-float_gauche{
float: left;
margin: 5px;
padding: 1px;
border: 1px solid #0c8bcc;
}


/*----- FORMULAIRE -----*/
.formulaire{
width: 450px;
margin: auto;
}
.formulaire label{
clear: left;
width: 40%;
float: left;
text-align: right;
margin-right: 10%;
margin-bottom: 12px;
}
.formulaire fieldset{
background: #b3ddf2;
border: 1px solid #0c8bcc;
padding-top: 15px;
}
.formulaire legend{
font-weight: bold;
font-size:  1.2em;
border: 1px solid orange;
background: #FFEDCF;
/* color: #0069D5; */
color: #61afff;
padding: 2px 5px 2px 5px;
}
.formulaire input, .formulaire textarea, .formulaire select{
margin-bottom: 5px;
font-family: "Courier New";
font-size: 12px;
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus{
background: #dff1ff;
}
.formulaire .validation{
margin-top: 10px;
text-align: center;
}
.formulaire .validation input{
border: none;
border: 1px solid orange;
background: #FFE2A9;
padding: 1px 3px 1px 3px;
font-weight: bold;
cursor: pointer;
}
.formulaire .validation input:hover{
background: #ffcc5e;
}
.formulaire .captcha{
position: relative;
top: 5px;
}

.contenu_gauche1 .formulaire{
width: 300px;
margin: 0 0 0 0;
}
/* ---------------------------------------------
------------  PAGES DU SITE -----------
 ---------------------------------------------*/
 
 
/*----- INDEX -----*/
.lire_suite{
background: url("lire_suite.png") no-repeat left;
padding: 0 0 0 15px;
margin: 0 0 0 20px;
border-bottom: 1px dashed #0b81be;
}
.lire_suite:hover{
background-image: url("lire_suite2.png");
border-bottom: none;
text-decoration: none;
}

/*----- CONNEXION -----*/


/* ----- PROFIL -----*/
.profil{
margin-left: 50px;
border-collapse: collapse;
background: #fff4d4;

}
.profil td{
border: 1px solid orange;
padding: 5px 10px 5px 10px;
}

/* -------- DOCUMENTS -------- */
/* --- DESIGN 1 --- */
.documents{
border-collapse: collapse;
margin: 20px auto 20px auto;
border: 1px solid  #0c8bcc;
background: #b3ddf2;
text-align: center;
width: 500px;
}
.documents th{
border-bottom: 3px double  #0c8bcc;
padding: 3px 10px 3px 10px;
color: #0069D5;
font-size: 1.2em;
}
.documents td{
border-bottom: 1px solid  #0c8bcc;
padding: 3px 10px 3px 10px;
}
.documents .couleur1:hover, .documents .couleur2:hover{
background: #D5ECFF;
}

.documents .couleur1{

}
.documents .couleur2{

}
.documents .drapeau{
height: 15px;
padding: 0 5px 0 5px;
}

/* --- DESIGN 2 --- */
.documents2 {
border-collapse: collapse;
vertical-align: middle;
text-align: center;
margin: 0 auto 50px auto;
}
.documents2 .drapeau{
height: 15px;
padding: 0 5px 0 5px;
}
.documents2 th{
text-decoration: underline;
padding: 40px 0 10px 0;
}
.documents2 td{
text-align: center;
border-bottom: 1px solid black;
border-top: 1px solid black;
padding: 3px 10px 3px 10px;
}
.documents2 .couleur1:hover, .documents2 .couleur2:hover{
background: #D5ECFF;
}