@charset "UTF-8";

/* Bienvenue dans le style du Grand Ordre de la Serviette ! */

@import url('fontes.css');

* { /* Reset général */
 border: none;
 margin: 0;
 padding: 0;
 text-decoration: inherit;
 font-weight: inherit;
 font-family: inherit;
 font-size: 1em;
 }

article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { /* Mise en bloc d'éléments HTML5 */
 display: block;
}

/* Généralités */
 
html {
 font-size: 14px;
 text-decoration: none;
 font-weight: normal;
 font-family: Delicious, "Trebuchet MS", Arial, sans-serif;
 
 background-color: #7e94b9;                /* Fond de la page */
 background-image: url(images/fond.png);
 background-repeat: repeat-x;
 background-position: center top;
 background-attachment: fixed;
}

strong, b {
 font-weight: bold;
 }
 
em, i {
 font-style: italic;
 }
 
strike, del {
 text-decoration: line-through;
 }

pre, code {
 font-family: monospace;
 }
 
.gauche, img[align=left] {
 float: left;
 clear: left;
 margin-right: 10px;
 margin-bottom: 0.5em;
 }
 
.droite, img[align=right] {
 float: right;
 clear: right;
 margin-left: 10px;
 margin-bottom: 0.5em;
 }
 
.align-droite {
 text-align: right;
 }
 
p {
 margin-bottom: 0.5em;
 }
 
p:last-child {
 margin-bottom: 0;
 }
 

blockquote {                 /* Citations et extraits */
 background-color: #efece9;
 font-style: italic;
 padding: 15px;
 
 -moz-border-radius: 10px; /* Coins arrondis */
 -webkit-border-radius: 10px;
 border-radius: 10px;
 }
 
p.source, cite {           /* Source des articles et des citations, signatures */
 font-size: 0.9em;
 text-align: right;
 font-style: italic;
 }
 
.centre {                    /* Centrages */
 text-align: center;
 }
 
img {
 margin: 5px;
 }
 
img.centre,
video.centre,
audio.centre,
object.centre,
embed.centre {
 display: block;
 margin: 10px auto;
 }

/* Liens*/
 
a, a:visited {
 color: #475670;
 }

a:hover, a:focus {
 color: #7e94b9;
 text-decoration: underline;
 }
 
a:active {
 color: #ed602f;
 }
 
/* Formulaires */

input[type="text"], textarea {
 display: block;

 background-color: #efece9;
 padding: 5px;
 border: solid 1px white;
 
 -moz-border-radius: 5px; /* Coins arrondis */
 -webkit-border-radius: 5px;
 border-radius: 5px;
 } 
 
input:hover, textarea:hover {
 border-color: #475670;
 } 
 
input:focus, textarea:focus {
 background-color: white;
 border-color: #ed602f;
 }                                  /* Les input[type="submit"] ont le style des boutons du menu (voir plus bas) */

/* Listes */

ul {
 list-style-position: inside;
 list-style-image: url(images/puce1.png);
 }
 
section#contenu ul {
 margin-left: 1em;
 }
 
ul li {
 margin-bottom: 0.2em;
 }
 
ul li ul { /* Sous-listes */
 margin-left: 1.5em;
 list-style-image: url(images/puce2.png);
 }

li p:first-child { /* Correction d'un petit bug */
 display: inline;
 }
 
li.ok { /* Icône pour articles existants */
 list-style-image: url(images/icon.png);
 }
 
li.lien {
 list-style-image: url(images/lien.png);
 }
 
li.flux {
 list-style-image: url(images/flux.png);
 }

/* Titre des pages */

h2 {
 font-size: 1.3em;
 margin-bottom: 0.5em;
 font-weight: bold;
 color: #475670;
 margin-left: 1em;
 font-style: italic;
 
 -moz-text-shadow: 0 1px 1px #a3b0c4; /* Ombrage du texte */
 -webkit-text-shadow:0 1px 1px #a3b0c4;
 text-shadow: 0 1px 1px #a3b0c4;
 }
 
/* Sous-titres */
 
h3 { 
 font-size: 1.2em;
 margin-bottom: 0.2em;
 font-weight: bold;
 color: #ed602f;
 font-style: italic;
 
 -moz-text-shadow: 0 1px 1px #debeb2; /* Ombrage du texte */
 -webkit-text-shadow:0 1px 1px #debeb2;
 text-shadow: 0 1px 1px #debeb2;
 }
 
/* Masquage par la méthode http://webaim.org/techniques/css/invisiblecontent */

.masqué,
header a h1,
section#social li a span,
body#splash h1 span,
a.promo span,
nav a.radio span {
 position: absolute;
 left: -10000px;
 top: auto;
 width: 1px;
 height: 1px;
 overflow: hidden;
}
 
/* Blocs principaux */
 
body {
 width: 950px;
 margin: 20px auto;
 position: relative;
 }
 
header {
 width: 950px;
 height: 240px;
 background-image: url(images/titre.png);
 position: relative;
 margin-bottom: -30px;
 }
 
header a { /* Zone cliquable réduite */
 width: 900px;
 height: 200px;
 position: absolute;
 top: 10px;
 left: 25px;
 }

section#contenu { /* Section du contenu principal */
 width: 600px;
 position: relative;
 overflow: auto; /* Correction de la flottaison */
 padding: 30px;
 margin-left: 270px;
 background-color: white;
 
 -moz-box-shadow: 0 0 2px black; /* Ombrage du bloc */
 -webkit-box-shadow: 0 0 2px black;
 box-shadow: 0 0 2px black;
 
 -moz-border-radius: 0 0 20px 20px; /* Coins infèrieurs arrondis */
 -webkit-border-radius: 0 0 20px 20px;
 border-radius: 0 0 20px 20px;
 
 /* Ombrage en bas du bloc contenu */
 background-image: url(images/contenu-fond.png);
 background-repeat: repeat-x;
 background-position: center bottom;
 }
 
section#contenu footer { /* Pied de page */
 position: absolute;
 text-align: right;
 font-size: 0.7em;
 right: 40px;
 bottom: 5px;
 }
 
/* Navigation */

nav {
 float: left;
 width: 220px;
 margin-left: 23px;
 padding: 15px;
 padding-top: 25px;
 background-image: url(images/nav-fond.png);
 text-align: center;
  
 -moz-box-shadow: 0 0 2px black; /* Ombrage du bloc */
 -webkit-box-shadow: 0 0 2px black;
 box-shadow: 0 0 2px black;
 
 -moz-border-radius: 0 0 0 10px; /* Coin infèrieur gauche arrondis */
 -webkit-border-radius: 0 0 0 10px;
 border-radius: 0 0 0 10px;
  }
  
nav ul {
 display: block;
 list-style-type: none; /* Pas de puces pour les éléments du menu */
 overflow: auto;
 font-weight: bold;
 }
 
nav li {
 display: block; /* Placement des éléments du menu et du choix dans le splash */
 float: left;
 margin: 5px;
 }
 
nav li a, input[type="submit"], ul#choix li a {   /* Boutons de navigation, des formulaires et du splash */
 display: table-cell;
 vertical-align: middle; /* Centrage vertical du texte, d'où le display:table-cell */
 width: 100px;
 height: 30px;
 background-image: url(images/bouton-fond.png); /* Effet de relief indépendant de la couleur */ 
 
 background-color: #f18239; /* Couleurs des boutons du menu normaux */
 
 -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Ombrage des blocs */
 -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.3);
 box-shadow: 0 1px 2px rgba(0,0,0,0.3);
 
 -moz-border-radius: 5px; /* Coins arrondis */
 -webkit-border-radius: 5px; 
 border-radius: 5px;
 
 -moz-text-shadow: 0 1px 1px rgba(0,0,0,0.5); /* Ombrage du texte */
 -webkit-text-shadow:0 1px 1px rgba(0,0,0,0.5);
 text-shadow: 0 1px 1px rgba(0,0,0,0.5);
 }
 
nav li a,  /* Texte des éléments du menu et des boutons de formulaires et du splash */
nav li a:active,
nav li a:visited,
input[type="submit"],
ul#choix li a,
ul#choix li a:active,
ul#choix li a:visited { 
 color: white;
 font-size: 1.1em;
}
 
nav li a:hover,
nav li a:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
ul#choix li a:hover,
ul#choix li a:focus { /* Éléments du menu survolés et boutons de formulaires survolés */
 text-decoration: none;
 color: white;
 
 background-color: #ed602f; /* Couleurs des boutons du menu survolés */
 
 -moz-box-shadow: none; /* Pas d'ombre cette fois-ci */
 -webkit-box-shadow: none;
 box-shadow: none;
 
  -moz-transform: rotate(5deg); /* Petite rotation */
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
 }
 
nav li:nth-child(3n) a:hover, nav li:nth-child(3n) a:focus { /* Rotation inverse pour 1 bouton sur 3 */
 -moz-transform: rotate(-5deg);
 -webkit-transform: rotate(-5deg);
 transform: rotate(-5deg);
 }
 
nav li a:active, input[type="submit"]:active, ul#choix li a:active { /* Au clic */
 color: white;
 background-color: #bd3809; /* Couleurs des boutons du menu cliqués */
}

/* nav li.actif a,                  Avant le CMS
nav li.actif a:active,
nav li.actif a:visited,
nav li.actif a:hover, 
nav li.actif a:focus,
nav li.actif :nth-child(3n) a:hover,
nav li.actif :nth-child(3n) a:focus  */

nav li.current a,                       /* Pour l'élément "en cours" (class='current'), depuis le CMS */
nav li.current a:active,
nav li.current a:visited,
nav li.current a:hover, 
nav li.current a:focus,
nav li.current :nth-child(3n) a:hover,
nav li.current :nth-child(3n) a:focus   /* ... quelque soit son état */
{
 color: white;
 background-color: #db7856; /* Couleurs du bouton du menu actif */

 -moz-box-shadow: none; /* Pas d'ombre ici */
 -webkit-box-shadow: none;
 box-shadow: none;
 
 -moz-transform: none; /* Pas de rotation non plus */
 -webkit-transform: none;
 transform: none;
}

/* Promo boutique (ou autre) */

nav a.promo {
 display: block;
 width: 210px;
 height: 100px;
 margin: 5px;
 }
 
nav a.promo:hover, nav a.promo:focus {
 opacity: 0.9;
 }
 
nav a.promo.boutique {
 background-image: url(images/boutique.png);
 }
 
/* Lien radio */
 
nav a.radio {
 display: block;
 position: absolute;
 right: 50px;
 top: 155px;
 width: 200px;
 height: 75px;
 z-index: 42; /* La réponse */
 background-image: url(images/radio.png);
 }
 
nav a.radio:hover, nav a.radio:focus {
 background-position: 0 75px;
 }

/* Liens sociaux */

section#social {
 float: left;
 clear: left;
 width: 220px;
 margin-left: 23px;
 padding: 15px;
 text-align: center;
 font-size: 0.9em;
 color: white;
 }

section#social ul {
 list-style-type: none; /* Pas de puce sur cette liste */
 margin-top: 5px;
 padding-bottom: 10px;
 }
 
section#social li {
 display: block; /* Mise en page des boutons */
 float: left;
 width: 48px;
 height: 48px;
 margin: 3px;
 }
 
section#social li:hover, section#social li:focus { /* Effet au survol */
 opacity: 0.8;
 }
 
section#social li a { /* Pour le lien en lui-même */
 display: block;
 width: 48px;
 height: 48px;
 }
 
section#social li a[title=Facebook] {            /* Icônes Social.me, par jwloh */
 background-image: url(boutons/facebook.png);    /* Ajouter un paragraphe pour chaque nouveau réseau */
}                                                /* Le title correspond à celui mis dans l'HTML */

section#social li a[title=Twitter] {
 background-image: url(boutons/twitter.png);
}

section#social li a[title=MySpace] {
 background-image: url(boutons/myspace.png);
}

section#social li a[title=StumbleUpon] {
 background-image: url(boutons/stumbleupon.png);
}

/* Module de news */

aside#news { /* + .droite */
 width: 230px;
 padding: 10px;
 border: solid 1px #ed602f;
 
 -moz-border-radius: 10px; /* Coins arrondis */
 -webkit-border-radius: 10px;
 border-radius: 10px;
 
  -moz-box-shadow: 0 0 3px #ed602f; /* Ombrage du bloc */
 -webkit-box-shadow: 0 0 3px #ed602f;
 box-shadow: 0 0 3px #ed602f;
 }

/* Splash screen, le redoutable écran d'accueil */

body#splash {
 width: 600px;
 padding: 30px;
 padding-top: 80px;
 margin-top: 400px;
 background-color: white;
 text-align: center;
 
 -moz-box-shadow: 0 0 3px black; /* Ombrage du bloc */
 -webkit-box-shadow: 0 0 3px black;
 box-shadow: 0 0 3px black;
 
 -moz-border-radius: 20px; /* Coins arrondis */
 -webkit-border-radius: 20px;
 border-radius: 20px;
 
 /* Ombrage en bas du bloc */
 background-image: url(images/contenu-fond.png);
 background-repeat: repeat-x;
 background-position: center bottom;
 }

body#splash p#message {
 font-weight: bold;
 }
 
body#splash h1 {
 display: block;
 width: 500px;
 height: 500px;
 background-image: url(images/logo.png);
 position: absolute;
 left: 75px;
 top: -400px;
 }
 
body#splash ul#choix {
 display: block;
 list-style-type: none;
 list-style-image: none;
 width: 250px;
 height: 30px;
 margin: auto;
 }
 
body#splash ul#choix li {
 display: block;
 float: left;
 margin: 10px;
 }