/*****  DEFINITIONS GENERALES  *****/

/* link color */
a { color: #FFFF33; }
a:link{   font-weight: bolder; text-decoration: none; }
a:visited{   font-weight: bolder; text-decoration: none; }
a:active{   font-weight: bolder; text-decoration: none; }
a:hover {   font-weight: bolder; text-decoration: underline; }

a.pseudo {
  color: #0000CC;
  font-weight: bolder;
  text-align:center;
}

a.filleuls {
  color: #0000CC;
  font-weight: bolder;
  text-align:left;
}

h1, h2, h3, h4, h5, h6 { margin: 1em 0px;}
h1 {
  text-align:center;
  font-size:24px;
  font-weight: bolder;
}
h2 {
  font-size:20px;
  margin-top:2em;
}
h3 { font-size:18px; }
h4 { font-size:16px; }
h5 { font-size:15px; }
h6 {
  font-size:14px;
  /* margin-left:40px; */
  text-align:center;
}

p {
  font-size:13px;
  margin: 0.5em 0px;
  padding:0;
}

p.alerterc{
  color:#CC0000;
  font-weight: bolder;
  text-align:center;
}

p.alerterg{
  color:#CC0000;
  font-weight: bolder;
  text-align:left;
}

p.alertebc{
  color:#0000CC;
  font-weight: bolder;
  text-align:center;
}

p.alertebg{
  color:#0000CC;
  font-weight: bolder;
  text-align:left;
}

p.retrait{
  margin-left:25px;
}



thead {
  /*font-size:11px;*/
  text-align:center;
}

table .alignleft{
  text-align:left;
}

table .alignright{
  text-align:right;
}

#centerdiv{
  margin:auto;
}

/*
table {
  font-size:11px;
}

input {
  background-color:#333333;
  border:#666 1px solid;
  color:#fff;
}

select {
  background:#333333;
  border:#666 1px solid;
  color:#fff;
}

input.color1{
  background-color:#CC9900;
  color:#333300;
  line-height:1em;
  border-color:#990000;
  text-align:center;
  -moz-border-radius : 10px 10px;
}

submit.color1{
  background-color:#CC9900;
  color:#333300;
  text-align:center;
  -moz-border-radius : 10px 10px;
}

select.color1{
  background-color:#CC9900;
  color:#333300;
  text-align:center;
  -moz-border-radius : 10px 10px;
}
*/

input.color1{
  background-color:#CC9900;
  color:#333300;
  line-height:1em;
  border: 1px solid #990000;
  text-align:center;
  -moz-border-radius : 10px 10px;
}

submit.color1{
  background-color:#CC9900;
  color:#333300;
  text-align:center;
  -moz-border-radius : 10px 10px;
}

select.color1{
  background-color:#CC9900;
  color:#333300;
  border: 1px solid #990000;
  text-align:center;
}



.conteneurTextarea textarea
{
  border:1px solid #990000;
  background:#CC9900;
  vertical-align:top;
  overflow:auto;
  color:#333300;
  size:3em;
  scrollbar-face-color: #DDCC00;
  scrollbar-shadow-color: #CC9900;
  scrollbar-highlight-color: #FFFF33;
  scrollbar-3dlight-color: #DDCC33;
  scrollbar-darkshadow-color: #000000;
  scrollbar-track-color: #996600;
  scrollbar-arrow-color: #660000;
  -moz-border-radius : 10px 10px;
}


/*  FOR IE  */
#conteneurCheckbox input
{
  opacity: 0; 
  filter : alpha(opacity=0); 
}

div.menu_pub{
  margin-left:auto;
  margin-right:auto;
  width:120px;
}





/*****  MISE EN PAGE  *****/
#fondpage {
  width:100%;
  margin:auto;
}

#page {
  width:800px;
  height:100%;
/*  background:#006600;*/
  margin:auto;
}




/*****  HEADER  *****/



#header #info_log {
  position:absolute;
  top:0px;
  left:15px;
  width:116px;
}


#header #topbanner {
  position:absolute;
  top:0px;
  left:128px;
  width:600px;
}












/*****  CENTRE  *****/


/*****  MENU  *****/
#main div#menug{
  /*position:relative;*/
  float:left;
  width:140px;
  height:700px;
  border-right:#000000 2px solid;
  font-size:12px;
  font-weight:bold;
  text-align:center;
}

#main div#menudepage{
  position:absolute;
  left: 0px;
  width: 515px;
  text-align:center;
  width:100%;
  z-index:2;
}



/*****  NEWS  *****/
dl .liste_news_01{
  text-align:center;
}

dl .liste_archives_01{
  text-align:center;
}

dd {
width:400px;
}

dt {
width:450px;
}

p.h1news{
  text-align:center;
  font-size:18px;
  font-weight: bolder;
}

p.h2news{
  text-align:center;
  font-size:14px;
  font-weight: bolder;
}



















/*****  PUB DROITE  *****/
#main div#pub_container{
  float:right;
  width:150px;
  height:700px;
}

#main div#pub_container div#pub{
  position : relative;
  top : 20px;
  left : 20px;
  width:128px;
  height:600px;
}

#main div#pub_container div#pub p{
  position : absolute;
  text-align : center;
}






/*****  ZONE PRINCIPALE  *****/
#main div#center{
  position: absolute;
  top: 0px;
  left: 150px;
  width: 515px;
  height: 700px;
  overflow: auto;
  scrollbar-face-color: #228b22;
  scrollbar-shadow-color: #00ff00;
  scrollbar-highlight-color: #98fb98;
  scrollbar-3dlight-color: #2e8b57;
  scrollbar-darkshadow-color: #000000;
  scrollbar-track-color: #8fbc8b;
  scrollbar-arrow-color: #eee8aa;
}

#main div#center div.form-login{
  position:relative;
  width:100%;
}

#main div#center div.form-login table{
  margin-left:auto;
  margin-right:auto;
  width:142px;
  height:96px;
}

#main div#center div#selector{
  position:absolute;
  width:600px;
  top:0px;
  left:128px;
  text-align:center;
}

#main div#center div#top-left{
  position : absolute;
  top:48px;
  left:128px;
  width:300px;
}

#main div#center div#top-right{
  position : absolute;
  top:48px;
  left:450px;
  width:300px;
}

#main div#center div#bottom{
  position : absolute;
  top:300px;
  left:128px;
  width:600px;
}

#main div#center div#bottom-left{
  position : absolute;
  top:300px;
  left:128px;
  width:300px;
}

#main div#center div#bottom-right{
  position : absolute;
  top:300px;
  left:450px;
  width:300px;
}

#main div#center #meteo {
  position:absolute;
  top:300px;
  left:600px;
  width:96px;
}

#main div#center div#top-right img{
  width:256px;
  height:256px;
}


div#panneauforet_haut{
  position:relative;
  margin-left:auto;
  margin-right:auto;
  background-image:url(../images/panneau/haut_v3.png);
  width:444px;
  height:64px;
}

div#panneauforet_milieu{
  position:relative;
  margin-top:-7px;
  margin-left:auto;
  margin-right:auto;
  background-image:url(../images/panneau/milieu_v3.png);
  width:444px;
}

div#panneauforet_contenu{
  position:relative;
  margin-top:-7px;
  margin-left:25px;
  margin-right:40px;;
  width:379px;
}

div#panneauforet_bas{
  position:relative;
  margin-left:auto;
  margin-right:auto;
  background-image:url(../images/panneau/bas_v3.png);
  width:444px;
  height:150px;
}

div#panneauforet a{   color: #990000; }
div#panneauforet a:link{ text-decoration: none; }
div#panneauforet a:visited{  text-decoration: none; }
div#panneauforet a:active{  text-decoration: none; }
div#panneauforet a:hover { font-weight: bolder; text-decoration: underline; }

div.boutique_objet{
  padding : 10px;
  border : 2px solid black;
  -moz-border-radius : 10px 10px;
  margin : 10px;
}

img.boutique_image{
  width:60px;
  height:50px;
  border:1px;
}

div.width400{
  width:400px;
  margin-left:auto;
  margin-right:auto;
}

div.width200{
  width:200px;
  margin-left:auto;
  margin-right:auto;
}




















/*****  ZONE CHAT  *****/



#headerchat #topbannerchat {
  position:absolute;
  text-align:center;
  top:15px;
  left:32px;

}



#mainchat div#centerchat{
  float:center;
  margin-top:5px;
  margin-left:5px;
  margin-right:5px;
  margin-bottom:5px;
  width:790px;
/*  height:700px;
  overflow:auto;
  scrollbar-face-color: #DDCC00;
  scrollbar-shadow-color: #CC9900;
  scrollbar-highlight-color: #FFFF33;
  scrollbar-3dlight-color: #DDCC33;
  scrollbar-darkshadow-color: #000000;
  scrollbar-track-color: #996600;
  scrollbar-arrow-color: #660000; */
}

#pubchatbottom{
  text-align:center;
}








/*                                          TCHAT                                                         */

.retour{
  text-align:center;
  font-weight:bold;
}

div#pfc_container span.pfc_heure {
  color: #000000;
  font-size: 70%;
}

div#pfc_container a{ color: #990000; }
div#pfc_container a:link{   font-weight: bolder; text-decoration: none; }
div#pfc_container a:visited{   font-weight: bolder; text-decoration: none; }
div#pfc_container a:active{   font-weight: bolder; text-decoration: none; }
div#pfc_container a:hover {   font-weight: bolder; text-decoration: underline; }


#arplantext {
  position:absolute;
  width:104px;
  height:69px;
  z-index:1;
  background-color: #CCCCCC;
}
#textcolor {
  position:absolute;
  width:104px;
  height:69px;
  z-index:1;
  background-color: #CCCCCC;
}

input#pfc_words{ /* Barre de saisie */
  background-color:#FFFFFF;
  line-height:1em;
  border: 1px solid #000000;
  text-align:left;
  -moz-border-radius : 5px 5px;
}

submit#pfc_td3{ /* Bouton envoyer */
  background-color:#333333;
  line-height:1em;
  border: 1px solid #000000;
  text-align:center;
  -moz-border-radius : 5px 5px;
}

.Style1 {color: #0000FF}
.Style2 {
  font-size: 12px;
  font-weight: bold;
}
#deconnect {
  background-color: #FF0000;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #990000;
  border-right-color: #990000;
  border-bottom-color: #990000;
  border-left-color: #990000;
  color: #FFFF00;
  font-weight: bold;
}
.Style3 {
  color: #FF0000;
  font-weight: bold;
}






















/*     RAPPEL POUR UTILISER LE CSS

Les styles de police

font-family
définit un nom de police ou une famille de police
<nom> ou <famille>
police précise (Arial, Times, Helvetica...) ou
famille (serif, sans-serif, cursive, fantasy, monospace)
H3 {font-family: Arial}

font-style
définit le style de l'écriture
normal ou italique ou oblique
H3 {font-style: italic}

font-weight
définit l'épaisseur de la police
normal ou bold ou bolder ou lighter ou valeur numérique soit
(100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)
P {font-weight: bold}

font-size
définit la taille de la police
xx-small ou x-small ou small ou médium ou large ou x-large ou xx-large
ou larger ou smaller
ou taille précise en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {font-size: 12pt}

font-variant
définit une variante par rapport à la normale
normal ou small-caps
P {font-variant: small-caps}

font
raccourci pour les différentes propriétés de police
P {font: bold italic}

Les styles du texte

text-align
définit l'alignement du texte
left ou center ou right
H1 {text-align: center}

text-indent
définit un retrait dans la première ligne d'un bloc de texte
souvent utilisé avec <P>, n'oubliez pas dans ce cas </P>.
spécifié en inches (in) ou en centimètres (cm) ou en pixels (px)
P {text-indent: 1cm}

text-decoration
définit une décoration (?) du texte, soit barré, clignotant, etc.
blink ou underline ou line-through ou overline ou none
A:visited {text-decoration: blink}

text-transform
définit la casse du texte (majuscule, minuscule)
uppercase (met les caractères en majuscules) ou
lowercase (met les caractères en minuscules) ou
capitalize (met le premier caractère en majuscule)
P {text-transform: uppercase}

color
définit la couleur du texte
par exemple en hexadécimal
H3 {color: #000080}

word-spacing
définit l'espace entre les mots
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {word-spacing: 5pt}

letter-spacing
définit l'espace entre les lettres
spécifié en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {letter-spacing: 2pt}

line-height
définit l'interligne soit l'espace entre les lignes du texte
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
P {line-height: 10pt}

width
détermine la longueur d'un élément de texte ou d'une image
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H1 {width: 200px}

height
détermine la hauteur d'un élément de texte ou d'une image
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H1 {heigh: 100px}

white-space
espace ou blanc
normal ou pre ou nowrap
PRE {white-space: pre}

Les arrière-plans

background-color
définit la couleur de l'arrière-plan
couleur (par exemple en hexadécimal) ou transparent
H1 {background-color: #000000}

background-image
définit l'image de l'arrière-plan
URL de l'image
BODY {background-image: image.gif}

background-repeat
définit la façon de répéter l'image d'arrière-plan
repeat ou no-repeat ou repeat-x (x = nombre de répétitions horizontales) ou
repeat-y (y = nombre de répétitions verticales
P {background-image: image.gif; background-repeat: repeat-4}

background-attachment
spécifie si l'image d'arrière-plan reste fixe avec les déplacements de l'écran
scroll ou fixed
BODY {background-image: image.gif; background-attachement: fixed}

background-position
spécifie la position de l'image d'arrière-plan par rapport au coin
supérieur gauche de la fenêtre
{1, 2}
{top ou center ou bottom , left ou center ou right}
ou en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
BODY {background-image: img.gif; background-position: right top}

background
raccourci pour les différentes propriétés d'arrière-plan
P {background: image.gif fixed repeat}

Les marges

margin-top
détermine la valeur de la marge supérieure
en unité de longueur ou auto
{ margin-top: 5px }

margin-right
détermine la valeur de la marge droite
en unité de longueur ou auto
{ margin-right: 5px }

margin-bottom
détermine la valeur de la marge inférieure
en unité de longueur ou auto
{ margin-bottom: 5px }

margin-left
détermine la valeur de la marge gauche
en unité de longueur ou auto
{ margin-left: 5px }

margin
regroupe les différentes propriétés de la marge

Les bords et les "enrobages"

border-top-width
donne l'épaisseur du bord supérieur
thin ou medium ou thick ou spécifié par l'auteur
H3 {border-top-width: thin}

border-right-width
donne l'épaisseur du bord droit
thin ou medium ou thick ou spécifié par l'auteur
H3 {border-right-width: medium}

border-bottom-width
donne l'épaisseur du bord inférieur
thin ou medium ou thick ou spécifié par l'auteur
H3 {border-bottom-width: thick}

border-left-width
donne l'épaisseur du bord gauche
thin ou medium ou thick ou spécifié par l'auteur
H3 {border-left-width: 0.5cm}

border-width
regroupe les différentes propriétés de border-width

border-color
détermine la couleur de la bordure
H3 {border-color: yellow}

border-style
détermine le style du trait de la bordure
none ou solid ou dotted ou dashed ou double
ou groove ou ridge ou inset ou outset
{border-style: solid dashed}

border
regroupe toutes les propriétés des bords

padding-top
valeur de remplissage haut entre l'élément et le bord
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H3 {padding-top: 3px}

padding-right
valeur de remplissage droite entre l'élément et le bord
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H3 {padding-right: 3px}

padding-bottom
valeur de remplissage bas entre l'élément et le bord
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H3 {padding-bottom: 3px}

padding-left
valeur de remplissage gauche entre l'élément et le bord
en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
H3 {padding-left: 3px}

padding
regroupe les différentes propriétés de remplissage

Les listes

list-style-type
détermine le type de puces ou de numérotation
disc ou circle ou square
decimal ou lower-roman ou upper-roman ou lower-alpha ou upper-alpha
OL {list-style-type: square}

list-style-image
permet de remplacer les puces par une image
url ou none
OL {list-style-image: image.gif}

list-style-position
spécifie si les puces sont à l'intérieur ou à l'extérieur du texte
inside ou outside
UL {list-style-position: inside}

list-style
regroupe toutes les propriétés de liste

*/