/* Le plus simple, pour retoucher les images pour un autre skin, retouche les images les unes après les autres, garde le même nom pour chaque fichier, colle dans un autre dossier, et tu changes le nom du dossier ici. */

html
{
width:100%;
}
body {
margin: 0px;
padding: 0px;
background-color: #b6e3f5; /* definit la couleur de fond de la page */
height:100%;
text-align:center;
}
img
{
border: 0px;
}

#top
{
background-position:center;
background-image:url(Elements/Themes/Ange/Anichiban.jpg); /* definit la bannière. celle-ci est centrée */
background-repeat: no-repeat;
height: 200px; /* si une une nouvelle bannière est plus ou moins grande, il faut changer ici */
font-size: 1px;
margin-bottom: 0px;
}

#conteneur {
  width: 1000px;
  margin-left: auto; 
  margin-right: auto;
}

#centre {
  margin-left: 200px;
  margin-right: 200px;
  width:60%;
}

#gauche {
  float: left;
  left:3px;
  top: 15px;
  width: 19%;
}

#droite {
  float: right;
  right:19px;
  top: 15px;
  width: 19%;
}

#footer {
  clear: both;
  float:center;
  width:100%;
  border-left: 2px solid #000000;
  border-right: 2px solid #000000;
  vertical-align:bottom;
}

/* HACK POUR IE */
* html #gauche
{
width: 21%;
}


/* HACK POUR IE */
* html #droite
{
right: 3px;
width: 21%;
}


/* HACK POUR IE */
* html #centre
{
width: 72%;
}


font /* font générale pour le texte qui n'est pas dans un tableau */
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}

div
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

/* TITRE - gros titre que tu peux rajouter n'importe où dans la page */
.titre
{
font-size: 20px;
color: #1b96c6;
font-family: verdana;
text-align: center;
font-weight: bold;
margin-top: 0px;
margin-bottom: 15px;
}
/* FIN TITRE */ 

/* MENU HORIZONTAL*/ 
#navcontainer
{
width:100%;

}
#navcontainer ul
{
padding: .2em 0;
margin-top: 5px;
margin-left: 1px;
list-style-type: none;
color: #FFF;
font: normal 80% arial, helvetica, sans-serif;
text-align: center;
}

#navcontainer li { display: inline; 
margin-top: 5px;}

#navcontainer li a
{
text-decoration: none;
background-color: #b5e2f5;
color: #000000;
padding: 4px;
border: 1px solid #fff;                                                                           
background-image: url(Elements/Themes/Ange/menua.jpg); /*ici l'image de fond "habituelle" */
background-repeat:repeat;
}

#navcontainer li a:hover
{
background-color: #6191ff;
color: #000000;                                                                                                     
background-image: url(Elements/Themes/Ange/menub.jpg); /* ici l'image de fond quand on passe la souris par dessus */
background-position:bottom;
background-repeat:repeat;
}
/* FIN DU MENU */

/*DIV DE FOND*/
.englopro{
background-color: #b6e3f5;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-left: 1px solid #000000;
padding:10px;
width:95%;
}

/*FIN DIV DE FOND*/

/* TABLE NEWS */
.news table
{
width:98%;
margin-left: 1%;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}

.news tr
{
background-color: #DDDDDD;
background-image: url(Elements/Themes/Ange/fondtable.jpg); /* image en fond des titres des news */
background-position:top;
}

.news td
{
font-size: 12px;
font-family: verdana;
border-top: 1px solid #000000;
padding: 5px;
}

.resumnews
{
background-image:none;
background-color: #FFFFFF;
}
/* FIN TABLE NEWS */

/* TABLEAU COMMENTAIRES */
.comm
{
margin-left: 2.5%;
margin-right: 2.5%;
background-color: #FFFFFF;
font-family: verdana;
font-size: 12px;
border: 1px solid #000000;
margin-bottom: 15px;
}

.comm_date
{
float:left;
width: 20%;
background-image: url(Elements/Themes/Ange/fondtable.jpg); /* image derrière la date */
background-position:top;
font-weight: bold;
border-bottom: 1px solid #000000; 
border-top: 1px solid #000000; 
padding-top: 3px;
padding-bottom: 3px;
}

.comm_sujet
{
float:left;
width: 50%;
background-image: url(Elements/Themes/Ange/fondtable.jpg); /* image derrière le titre */
background-position:top;
text-align: center;
font-weight: bold;
border-top: 1px solid #000000; 
border-bottom: 1px solid #000000; 
padding-top: 3px;
padding-bottom: 3px;
}

.comm_nom
{
text-align:right;
background-image: url(Elements/Themes/Ange/fondtable.jpg); /* image derrière le nom */
background-position:top;
font-weight: bold;
border-bottom: 1px solid #000000; 
border-top: 1px solid #000000; 
padding-top: 3px;
padding-bottom: 3px;
}

.comm_detail
{
border-top: 1px solid #000000; 
padding: 5px;
}
/* FIN TABLEAU COMMENTAIRES */

/* MISE EN FORME DES PETITS CADRES */
.titre_cadre
{
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 1px solid #000000;
padding-right: 10px;
margin-bottom: 0px;
width: 100%;
/*background-image: url(http://www.kouryu.info/test/anichimg/fondtitre.jpg);*/
background-image: url(Elements/Themes/Ange/fondtable.jpg);
text-align:center;
}

/* AU SUJET DES CADRES : dans la version "Ange du skin", j'ai divisé les cadres entre "cadres à gauche et cadre à droite", puisque l'image de fond est inversée en fonction de la position. Si par exemple tu fais un skin avec la même image de fond, ou une couleur fixe, évidemment, le plus simple pour ne pas retoucher le fichier php est de spécifier la même image des deux côtés. A l'inverse, tout changement fait dans le cadre de gauche doit être ajouté dans le cadre de droite. */


/* CADRES A GAUCHE */
.cadre
{
border-bottom: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
background-color: #FFFFFF;
padding: 5px;
margin-top: 0px;
margin-bottom: 10px;
width: 100%;
font-family: verdana;
font-size: 12px;
background-image:url(Elements/Themes/Ange/cadreg.jpg);
background-repeat:repeat;
}
/* HACK POUR IE */
* html .cadre
{
padding-right: 10px;
}
.cadre table
{
width: 100%;
}
.cadre td
{
font-size: 12px;
}

/* couleur des liens à changer en fonction du skin */

.cadre a 
{
color: #093242;
}
.cadre a:hover
{
background-color: #d8effa;
}
.cadre a:visited
{
color: #230e6f;
}
.cadre a:active
{
color: #330033;
}

/* CADRES A DROITE */
.cadred
{
border-bottom: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
background-color: #FFFFFF;
padding: 5px;
margin-top: 0px;
margin-bottom: 10px;
width: 100%;
font-family: verdana;
font-size: 12px;
background-image:url(Elements/Themes/Ange/cadred.jpg);
background-repeat:repeat;
}
* html .cadred
{
padding-right: 10px;
}
.cadred table
{
width: 100%;
}
.cadred td
{
font-size: 12px;
}

.cadred a
{
color: #093242;
}
.cadred a:hover
{
background-color: #d8effa;
}
.cadred a:visited
{
color: #230e6f;
}
.cadred a:active
{
color: #330033;
}

/* LES INFO QUI SUIVENT PERMETTENT DE DEFINIR LE DESIGN DE CADRES BIEN PARTICULIER. AU-DESSUS, ON DEFINISSSAIT LES INFO GENERALES DES CADRES, ICI, ON DEFINIT L'IMAGE DE FOND. PAR EXEMPLE, SI TU VEUX RAJOUTER UNE IMAGE DERRIERE LES PARTENAIRES, RAJOUTE #menupartenaires DANS LE FICHIER CSS ET DANS LA PAGE PHP, AU CADRE CORRESPONDANT, TU RAJOUTES UN id="menupartenaires". BREF, JE NE SAIS PAS SI JE SUIS CLAIR... */
#menuClassique
{
background-image: url(Elements/Themes/Ange/ImageHaut.gif);
background-position: bottom left;
background-repeat: no-repeat;
}

#membresClassique
{
background-image: url(Elements/Themes/Ange/Imagebas.gif);
background-position: bottom right;
background-repeat: no-repeat;
margin-right:0px;
}
/* FIN DE MISE EN FORME DES PETITS CADRES */

/* MENUS GENERIQUES (CELUI DE GAUCHE) */
.menugen { 
list-style-image: url(Elements/Themes/fleche.gif);
margin:0px;
padding: 15px;
}

.menugen 
{
margin:0px;
}

.menugen li
{
margin-bottom: 2px;
}

.null
{
list-style:none;
list-style-image: none; 
font-weight: bold;
margin-top: 10px;
}
/* FIN MENUS GENERIQUES */

/* MENU POUR FAIRE APPARAITRE SKIN */
ul#menu,ul#menu ul{
  list-style:none;
  margin:0px;
  padding:0px;
  width:148px;
  _width:150px;
}

ul#menu ul{
  position:absolute;
  top:-1px;
  left:100px;
}

ul#menu li{
  position:relative;
  margin:0px;
  padding:0px;
  _display:inline;
  font-size: 10px;
  font-family: verdana;
  text-align:center;
}

ul#menu li ul{
  display:none;
}

ul#menu li:hover>ul{
  display:block;

}

/* FIN MENU SKIN */


/* DETAIL NEWS */
.detail_news
{
font-family: verdana;
font-size: 12px;
border: 2px solid #000000;
margin-left: 5%;
margin-right: 5%;
text-align: justify;
margin-bottom: 10px;
}

.detail_news_titre
{
background-color: #9900FF;
padding-top: 3px;
padding-bottom: 3px;
font-weight: bold;
background-image: url(Elements/Themes/Ange/fondtable.jpg);
background-repeat: repeat;
}

.detail_news_texte
{
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
background-color: #FFFFFF;
}

.detail_news_pied
{
background-color: #9900FF;
padding-top: 3px;
padding-bottom: 3px;
font-weight: bold;
background-image: url(Elements/Themes/Ange/fondtable.jpg);
background-repeat: repeat;
background-position: top;
}
/* FIN DETAIL NEWS */

/* GALERIES */

.galerie table
{
margin: 5px;
}

.galerie td
{
border: 1px solid #000000;
padding: 7px;
}

.galerie img
{
border-top: 1px solid #660066;
border-left: 1px solid #660066;
border-right: 2px solid #660066;
border-bottom: 2px solid #660066;

}


/* MEMBRES */

#table table
{
border-left: 1px solid #000000;
border-top: 1px solid #000000;
text-align:center;
}

#table td
{
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
font-size: 10px;
background-color: #e0d3ff;
}

#table .top
{
background-image: url(Elements/Themes/Ange/fondtable.jpg);
background-repeat: repeat;
background-position: top;
}

#table .nonlu
{
background-color: #8A2BE2;
}

/* FORMULAIRE */

#form
{
width: 40%;
border: 1px solid #000000;
background-color: #e0d3ff;
}

#form td
{
font-size: 10px;
}

#form input
{
background-image: url(Elements/Themes/Ange/fondtable.jpg);
background-repeat: repeat;
background-position: top;
margin: 0px;
padding: 0px;
style: none;
border:1px solid black;
font-size: 9px;
}

#form  textarea
{
margin: 0px;
padding: 0px;
style: none;
border:1px solid black;
font-size: 9px;
}