268 lines
5.7 KiB
CSS
268 lines
5.7 KiB
CSS
|
/* 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;
|
||
|
}
|
||
|
|