/* Ce fichier définit le design du site.
 *
 * Le design choisi pour le site sera 'liquid' :
 * - largeur fixe de 800px, placé au milieu du navigateur
 *
 * Dans l'ordre, vous trouverez les regles qui définissent le design pour:
 * - les elements HTML en general
 * - 'container'
 *   - 'header'
 *   - 'accueil' ou 'main'
 *     (si 'main')
 *     - 'menu'
 *     - 'content'
 *   - 'footer'
 *
 */

/* Les éléments HTML en général
-------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
}
html, body {
		font: 12px verdana, arial, helvetica, sans-serif;
    height: 100%;
  line-height: 1.4em;

}
body {
/* pour le centrage du container */
	text-align: center;
    background: url(images/carrelage.jpg);
}
/* container contient :
 * - header
 * - accueil ou main
 * - footer
 * il est centre dans la page (body)
 * http://openweb.eu.org/articles/initiation_centrage/
-------------------------------------------------------- */
#container {
/* centrage du container */
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 810px;
/* correction de l'alignement de la page (body) */
    text-align: left;
    background-color: white;
}

/* container/header
-------------------------------------------------------- */
#header {
    padding: 5px;
    height: 100px;
/*    border: 1px solid;*/
    text-align: left;	
}

/* container/accueil
-------------------------------------------------------- */
#accueil {
  	width: 100%;
}

/* container/main contient :
 * - menu
 * - content
-------------------------------------------------------- */
#main {
    padding-top: 40px;
  	width: 100%;
/*    border: 1px solid;*/
}

/* container/main/menu
 * positionnee a droite dans le container espace de 20px
 * du main
-------------------------------------------------------- */
#menu {
    padding-left: 10px;
  	float: left;
  	width: 210px;
}

/* container/main/content
-------------------------------------------------------- */
#content {
  	float: right;
  	width: 550px;  	
    padding: 15px;
    height: auto;
    min-height: 300px;
    _height: 300px; /* underscore hack uniquement interprete par IE Win*/
    text-align: center;
}

/* footer
-------------------------------------------------------- */
#footer {
    clear: both;
  	width: 100%;
    text-align: right;
}

/* --------------------------------------------------------
-------------------------------------------------------- */
img {
    vertical-align:middle;
}
a img {
    border:none;
}

#accueil a.bouton {
  color: black;
  background-color: #cc6600;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  padding: 5px;
}
#accueil a.bouton:hover {
  background-color: #ff3300;
/*  background-image: url(aqua.jpg);*/
}

#accueil a.lien{
font-variant: small-caps;
}

#accueil a.lien:hover{
color:#369;
background-color:transparent;
text-decoration:none;
font-variant: small-caps;
}

#accueil a.lien:visited{
color:#369;
background-color:transparent;
font-variant: small-caps;
}

div.spacer {
 	clear: both;
}

.remarque{
margin-top : 25px;
  text-align: center;
font-size: 0.75em;
}