/*
*********************************
*********************************
*Début du code CSS pour le design, sépéré en sous partie
*********************************
*********************************
*/

div,span,html,body,img,a,table,td,tr,form,label,ul,li,ol,th{
/*On établie une valeur par défaut pour toutes les balises concernants les bordures et les marges*/
border:0px;
padding:0px;
margin:0px;
}

body{
/*Pour toutes les pages, donc on dit les polices utilisés et la largeur de la page ainsi que le fond de la page body, donc le carreauté*/
font-family:"Times New Roman",Times,Georgia,"Nimbus Roman No9 L",Verdana,Roman,serif;
text-align:center;/*pour faire centrer sous IE le bloc suivant, et non pour définir l'alignement général du texte*/
width:100%;
font-size:15px;
color:#000000;
/*On définie le fond de la page*/
background-color:#6f6b63;
background-image:url("../image/design/fond.jpg");
}

#html{
/*La balise html contient toutes les autres, elle définie la texture en haut du fond*/
background-image:url("../image/design/fond_haut.jpg");
background-repeat:repeat-x;
}

#html2{
/*La balise html2 contient, comme pour le html, toutes les autres, elle définie le motif en bas de la page*/
/*background-image:url("../image/design/fond_motif.png");
background-repeat:repeat-x;
background-position:bottom;*/
}

#body{
/*La balise html2 contient, sauf html et html2, définie la largeur fixe de la page et le dégradé à gauche*/
width:1024px;
margin:auto;/*on centre ce bloc*/
text-align:center;/*pour faire centrer sous IE le bloc suivant*/
background-image:url("../image/design/degrade_gauche.png");
background-repeat:repeat-y;
background-position:left;
}

#body2{
/*Exactement cmme la balise body, sauf que celle-ci définie le dégradé à droite*/
width:1024px;
margin:auto;/*on centre ce bloc*/
text-align:center;/*pour faire centrer sous IE le bloc suivant*/
background-image:url("../image/design/degrade_droit.png");
background-repeat:repeat-y;
background-position:right;
}

#page{
/*Dernière balise qui contient toutes les autres, celle-ci est celle qui contiendra le header, le corp et le footer un à la suite de l'autre*/
width:976px;/*taille exactement du design*/
margin:auto;
background-color:#bc9b68;/*couleur du corp de la page*/
text-align:justify;/*alignement général pour le reste des pages*/
}

/*on définie, la forme général de tous les liens du site*/
a:visited, a:link{
color:#614d35;
text-decoration:underline;
}

a:active, a:hover{
text-decoration:none;
}

/*
*Début du header
*/
#header{
/*Première balise du header contenant toutes les autres*/
background-color:#614d35;/*on donne la couleur du fond*/
width:976px;
height:200px;
/*On définie l'image de séparation entre le header et le corp*/
background-image:url("../image/design/speedbar_separation.png");
background-repeat:repeat-x;
background-position:bottom;
}

#header2{
width:976px;
height:200px;
/*On définie l'image contenant le titre du site*/
background-image:url("../image/design/titre.jpg");
background-repeat:no-repeat;
background-position:center;
}

#header #logo{
/*Bloque pour déterminer l'alignement du logo*/
position:absolute;
}

#header #positionnement{
/*Bloque pour déterminer l'alignement des deux autres blocs (pour que cela marche même sous IE)*/
position:relative;
}

#header #block1{
/*Le block en haut de connexion*/
position:absolute;
right:0px;/*on le positionne en à droite*/
background-color:#000000;/*couleur du fond*/
height:167px;
width:225px;
/*partie pour l'effet de dégradé/suélevé à gauche*/
background-image:url("../image/design/block_fond_gauche.png");
background-repeat:repeat-y;
background-position:left;
text-align:center;
color:#bc9b68;
}

#header #block1 div{
/*pour espacer le formulaire*/
margin:9px;
}

#header #block1 div a{
/*pour espacer le formulaire*/
font-size:10px;
}

#header #block1 input{
/*on centre le formulaire*/
width:150px;
background-color:#614d35;
height:20px;
color:#bc9b68;
border:0px;
}

#header #block1 input:focus{
/*pour le focus sur le formulaire*/
width:150px;
background-color:#bc9b68;
color:#614d35;
}

#header #block1 .submit{
/*pour personnalisé le bouton submit*/
height:25px;
background-color:#000000;
background-image:url("../image/design/submit.png");
background-repeat:no-repeat;
cursor:pointer;
}

#header #block1 .submit:hover{
/*pour personnalisé le bouton submit au survole*/
background-image:url("../image/design/submit-hover.png");
background-repeat:no-repeat;
}

/*Début de la speedbar contenu dans le header*/
#header #speedbar{
/*Positionnement et hauteur de le speedbar*/
position:absolute;
top:167px;
right:0px;
height:33px;
/*On ajoute l'image du bout, c'est-à-dire celle arrondie*/
background-image:url("../image/design/speedbar_bout.png");
background-repeat:no-repeat;
background-position:left;
padding-left:30px;
}

#header #speedbar #bout{
/*on ajoute le fond partout pour être sûr qu,il ne reste pas de blanc, (surtout pour les vieux navigateurs)*/
background-image:url("../image/design/speedbar_fond.png");
background-repeat:repeat-x;
height:33px;
}

#header #speedbar  ul{
/*On ne veut pas de puce à la liste à puce*/
list-style-type:none;
}

#header #speedbar  li{
/*On positionne les puces, on dit qu'il s'aggit de block et on centre les liens*/
float:left;
display:block;
height:33px;
text-align:center;
}

#header #speedbar  a:visited,#header #speedbar  a:link{
/*Pour les liens de la speedbar en étant non actif*/
display:block;
color:#bc9b68;
height:33px;
text-decoration:none;
width:80px;
line-height:2.2em;
}

#header #speedbar  a:active,#header #speedbar  a:hover{
/*Pour les liens de la speedbar en étant actif*/
display:block;
color:#614d35;
background-image:url("../image/design/speedbar_fond.png");
background-repeat:repeat-x;
background-position:bottom;
line-height:2.2em;
}

#header #speedbar #bout .inscription a:visited, #header #speedbar #bout .inscription a:link{
/*Pour le lien inscription de la speedbar pour y ajouter de l'attention*/
display:block;
color:#bc9b68;
height:33px;
text-decoration:none;
width:225px;
line-height:2.2em;
}

#header #speedbar #bout  .inscription a:hover, #header #speedbar #bout.inscription a:active{
/*Pour le lien inscription de la speedbar pour y ajouter de l'attention lorsqu'il est survolé*/
display:block;
color:#614d35;
background-image:url("../image/design/speedbar_fond.png");
background-repeat:repeat-x;
background-position:bottom;
line-height:2.2em;
}
/*fin de la speedbar contenu dans le header*/
/*
*fin du header
*/


#corps{
/*La partie qui contiendra le texte*/
min-height:575px;/*min-heaiht pour que l'on voti pas le bas de la page sous aucune résolution*/
padding-bottom:130px;/*Pour que le texte reste au dessus de l'image dans le footer*/
margin:8px;
/*On insert l'image du bouclier*/
background-image:url("../image/design/bouclier.jpg");
background-repeat:no-repeat;
background-position:left top;
}


/*
*Début de footer
*/
#footer{
/*Partie qui contiendra tout le footer*/
height:75px;
width:976px;
background-color:#614d35;/*couleur du fond du footer*/
/*on défini la bordure qui sépare le footer et le corp*/
background-image:url("../image/design/speedbar_separation.png");
background-repeat:repeat-x;
background-position:top;
}

#footer .fleche{
/*On positionne la flèche qui rammène en haut*/
position:absolute;
margin:5px;
margin-top:20px;
}

#footer .positionnement{
/*Bloque pour déterminer l'alignement des deux autres blocs (pour que cela marche même sous IE)*/
position:relative;
}

#footer .copyright{
/*Partie comportant le copyright et les liens en bas de la page*/
position:absolute;
text-align:center;
font-size:12px;
width:600px;
height:40px;
/*positionnement du bloc (top ou bottom ne peuvent pas être utilisé à cause d'opera)*/
margin-left:150px;
margin-top:35px;
}

#footer .personnage img{
/*on positionne l'image du perso*/
position:absolute;
width:198px;
height:211px;
right:0px;
margin-top:-136px;
}

/*on définie la couleur des liens dans le footer*/
#footer a:visited,#footer a:link{
color:#000000;
}

#footer a:active,#footer a:hover{
text-decoration:none;
font-style:italic;
}
/*
*fin de footer
*/

/*
*Début de menu connecté
*/
#menus
{
	position:absolute;
	width:150px;
	border-right:2px solid #000000;
	border-bottom:3px solid #000000;
	margin-left:-8px;
	margin-top:-9px;
}

#menus .titre
{
	font-size: 18px;
	background-color: #000000;
	width:135px;
	font-weight:bold;
	padding-left:15px;
	color:#ebe1ca;
}

#menus ul
{
	list-style-type: none;
	margin-bottom:10px;
}

#menus a
{
	text-decoration: none;
	color: #000000;
	display: block;
	padding-left:20px;
	width: 130px;
}

#menus a:hover
{
	text-decoration: none;
	color: #000000;
	background-color: #614d35;
	width: 120px;
	display: block;
	padding-left:30px;
	font-style: normal;
}

#corp-menu{
margin-left:155px;
}
/*
*fin de menu connecté
*/


/*
*********************************
*********************************
*Fin du code CSS pour le design
*********************************
*********************************
*/

.centrer{
/*Centre le block et les image à l'intérieur*/
text-align:center;
margin:auto;
}

.gauche{
/*met le text à gauche*/
text-align:left;
}

.droit{
/*met le text à droit*/
text-align:right;
}

h1{
/*on centre les titres*/
margin:auto;
text-align:center;
}

.alert{
/*pour une alert de confirmation négative*/
padding:10px;
padding-left:36px;
background-image:url("../image/design/alert.png");
background-repeat:no-repeat;
background-position:center left;
border: 1px solid #000000;
margin-bottom:15px;
}

.ok{
padding:10px;
padding-left:40px;
background-image:url("../image/design/ok.png");
background-repeat:no-repeat;
background-position:center left;
border: 1px solid #000000;
margin-bottom:15px;
}

.block-aide{
/*pour afficher un block comme pour l'alert, mais d'aide*/
padding:10px;
padding-left:20px;
background-image:url("../image/aide.png");
background-repeat:no-repeat;
background-position:center left;
border: 1px solid #000000;
margin:15px;
}

.bull-parole{
/*pour afficher une bull parole*/
background-image:url("../image/bout-bull.png");
background-repeat:no-repeat;
background-position:top left;
padding-left:19px;
}

.bull-parole div{
background-color:#614d35;
padding:10px;
}
.bull-parole div a{
color: #000000;
}

.bull-parole div a:hover{
color: #000000;
}

#tooltip {
/*pour le menu*/
	position: absolute;
	z-index: 3000;
	border: 1px solid #000;
	background-color: #614d35;
	padding-left: 10px;
	padding-right: 10px;
	font-size:10px;
	opacity: 0.90;
}

.bordure{
border:1px solid #000000;
padding:2px;
margin:3px;
width:99%;
}

.production{/* pour la page info-general*/
width:100%;
border-collapse: collapse;
border:1px solid #000000;
margin:1px;
padding:1px;
}

.production th{
border:0px solid #000000;
margin:1px;
padding:1px;
}

.production td{
border:0px solid #000000;
margin:1px;
padding:1px;
}

/*pour le menu des ressources*/
#menu-ressource table{
margin:auto;
}

#menu-ressource table td{
padding:10px;
}

.news{
/*pour les news sur la page d'accueil*/
margin:auto;
margin-bottom:20px;
width:60%;
padding:4px;
border:3px solid #000000;
}

.table_liste{
border:2px solid #000000;
border-collapse: collapse;
width:100%;
}

.table_liste td,th{
border:2px solid #000000;
padding:5px;
border-collapse: collapse;
}

.table_liste .centrer{
text-align:center;
}

.signature{/*pour le livre d'or*/
border: 1px solid #000000;
width:75%;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}

.signature_titre{
text-align:left;
padding:2px;
font-size:11px;
padding-left:5px;
}

.signature_message{
padding:4px;
}