/* Les couleurs */
body { 
    background-color: #444;
    background-image: url("img/bords.jpg");
    color: #fff;
    font-size: 1em ;
}
a {font-weight: bold; text-decoration: none; }

.corps h1 { font-variant: small-caps; }

#lastmod {
    color: #999;
    font-size: .8em;
}

#content {
    background-color: white;
}


/* Basé sur 3 couleurs, gris foncé, gris clair et rouge foncé */
/* noir: #222 */
/* rouge: #a00 */
/* blanc: #ccc */

/* fond blancs */
#liens,
#sousliens,
#choix,
.corps {
    background-image: url("img/white.jpg");
    background-repeat: no-repeat;
    background-color: #ccc;
    border-color: #ddd;
    color: #222;
}

/* centré verticalement et horizontalement */
#liens,
#sousliens,
#choix {
    background-position: 50% 50%;
}
/* centré horizontalement en haut */
.corps {
    background-position: 50% 0%;
}

#liens a,
#sousliens a,
#choix a,
.corps a,
#liens a:link,
#sousliens a:link,
#choix a:link,
.corps a:link       { color: #a00 ; }

#liens a:visited,
#sousliens a:visited,
#choix a:visited, 
.corps a:visited    { color: #a00 ;  }

#liens a:active,     
#liens a:hover,
#sousliens a:active, 
#sousliens a:hover,
#choix a:active,     
#choix a:hover, 
.corps a:active, 
.corps a:hover      { color: #f00; }



/* fond noir */
pre.twilight,
.corps h2,
.corps h3,
.corps h4,
#bottom { 
    background-image: url("img/black.jpg");
    background-repeat: no-repeat;
    background-color: #000; 
    border-color: #000;
    color: #eee
}

/* image centree verticalement */
.corps h2,
.corps h3,
.corps h4,
#bottom { 
    background-position: 50% 50%;
}
/* image en haut */
pre.twilight {
    background-position: 50% 50%;
}

.withfile pre.twilight {
    background-position: 50% -10%;
}

#entete { 
    background-image: url("img/black600.jpg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: #111111; 
    border-color: #111111;
    color: #eee
}
.file a,
.corps h2 a,
.corps h3 a,
.corps h4 a,
#entete > a,
#bottom a,
.file a:link,
.corps h2 a:link,
.corps h3 a:link,
.corps h4 a:link,
#entete > a:link,
#bottom a:link { color: #ddd ; }

.file a:visited,
.corps h2 a:visited,
.corps h3 a:visited,
.corps h4 a:visited,
#entete > a:visited,
#bottom a:visited,
{ color: #ccc ;}

.file a:active, .file a:hover,
.corps h2 a:active, .corps h2 a:hover,
.corps h3 a:active, .corps h3 a:hover,
.corps h4 a:active, .corps h4 a:hover,
#bottom a:active, #bottom a:hover { color: #cc0000; }

/* fond rouge */
.corps h1,
#titre,
#blocMessage { 
    background-image: url("img/red.jpg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    color: #fff; 
    background-color: #6c0000;
    border-color: #6c0000 
}
.corps h1 a,
#titre a,
#blocMessage a          {font-weight: bold; text-decoration: none; }
.corps h1 a:link,
#titre a:link,
#blocMessage a:link     { color: #ccc ; }
.corps h1 a:visited,
#titre a:visited,
#blocMessage a:visited  { color: #aaa ;  }
.corps h1 a:active,
#titre a:active,
#blocMessage a:active   { color: #000; }
.corps h1 a:hover,
#titre a:hover,
#blocMessage a:hover    { color: #000; }

/* les fontes */
#boutonMessage {color: black; font-size: 10px; font-family: sans-serif; }
body { 
    font-family: Optima, Arial, Helvetica, sans-serif;
}
a { text-decoration: none; }
#liens, #choix, #sousliens { font-weight: bold; }

ul {
    list-style: square;
}

/* le style des blocs de liens */
#liens ul, 
#choix ul, 
#sousliens ul {
    list-style: none;
    padding-left: 10px;
    margin-top:0px;
    margin-bottom: 0px;
}

/* les borders (pas les couleurs) */
/* bord arrondi avec reflet taille 10 */
pre.twilight, #bottom, #blocMessage, #choix, #liens, #sousliens, #presentation,
#presentation, #Menu, .corps h1, .corps h2, 
.corps h3, .corps h4, .corps, #photos {
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    /* background-image: url("img/reflet10.png") ; */
    /*background-repeat: repeat-x; */
    /*
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    */
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
}

#content {
    -moz-border-radius-bottomleft: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-style: none;
}
/* bord arrondi avec reflet taille 20 */
#titre, .corps {
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomleft: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-bottom-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    border-radius: 20px;
    border-style: none;
    border-width: 2px ;
    /* background-image: url("img/reflet20.png") ; */
    /* background-repeat: repeat-x; */
}

#blocMessage {
    border-style: solid;
    border-width: 1px 1px 1px 1px;

    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomleft: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
}

#boutonMessage {
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
}





/* les ombres */
.ombre {
    background-image: url("img/ombre.jpg");
    background-repeat: repeat-x;
}