html { margin: 0; padding: 0; height: 100%; }
* { margin: 0 }
body {
    background: #474747 url(i/fond.jpg) repeat-x;
    font-family: century gothic, verdana, arial;
    font-size: 0.8em;
    margin: 0;
    padding: 0;
    height: 100%;
    -webkit-text-size-adjust: none;
}
a { color: #fff; text-decoration: none }
a:visited { color: #ccd; text-decoration: none }
a:hover { color: #9CBDF7 }
b { color: white }
td { vertical-align: top }

/* Grandes zones */
.marge { position: absolute; left: 0; top: 0; width: 212px; padding: 0 10px; background: #000 url(i/marge.jpg) no-repeat left top; border-right: 2px solid #000; }
.content { position: relative; height: 100%; padding-left: 254px; color: #dde; }
.navigation { position: absolute; left: 0; top: 0px; width: 100%; padding: 6px 0; background: #474747; color: #00FC65; }
.content2 { width: 800px; }
.pied { font-size: 0.8em; margin: 20px 0 }

/* Petites zones */
.zone { background: #424A50 url(i/gloss1000.png) center center; padding: 10px; border: 1px solid #323A40; 
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px; 
    box-shadow: 2px 2px 3px #31383C;
    -webkit-box-shadow: 2px 2px 3px #31383C;}
.zone td { vertical-align: top }
.zone2 td { height: 100px; }
.recherche { font-size: 0.8em; width: 155px; font-family: monaco; opacity: 0.3; position: absolute; top: 100px; left: 5px; z-index: 10; padding: 5px;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out }
.recherche:hover { opacity: 1 }
.zone_g { margin: 10px 5px; padding: 10px; text-align: right; background: #111; }
.zone_g a { text-decoration: none }
.tiroir { overflow: hidden; height: 16px; font-size: 0.8em; text-align: left;}
.tiroir:hover { height: auto; }


/* Menu */
.marge menu { margin: 90px 0 0; padding: 0; text-align: right; line-height: 2em; border-top: 1px solid #444 }
.marge li { margin: 0; padding: 0; list-style-type: none; }
.marge li a { font-size: 1.8em; color: white; text-decoration: none; font-variant: small-caps; margin-right: 6px; display: block;
    -webkit-transition: all .8s ease-out;
    -moz-transition: all .8s ease-out;
    -o-transition: all .8s ease-out
}
.marge li a:hover { color: magenta;
    -moz-transform: scale(1.2);  
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
menu.menu2 { position: absolute; line-height: 1.2em; margin: -70px 0 0 0; width: 100px; padding: 5px; text-align: left;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out }
menu.menu2:hover { margin: -80px 0 0 30px; background: #222;
    -moz-transform: scale(1.5) rotate(718deg);  
    -webkit-transform: scale(1.5) rotate(718deg);
    transform: scale(1.5) rotate(718deg);  }
.menu2 li a { font-size: 0.8em; color: #555 }
menu.menu2:hover a { color: white }

/* C. Menu */
.cmenu { position: absolute; width: 40px; height: 40px; white-space: nowrap; overflow: hidden; left: 185px; top: 110px; z-index: 22;
    -webkit-transition: .2s all .2s ease-out;
    -moz-transition: .2s all .2s ease-out;
    -o-transition: .2s all .2s ease-out }
.cmenu:hover { display: block; width: 300px; height: 340px; left: 145px; top: 90px;
    -moz-transform: rotate(-1deg);  
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg); }
.cmenu_in { background:#1C20AC url(i/gloss.png) center center; margin: -4px 10px 10px 40px; padding: 5px 0; 
    box-shadow: 2px 2px 20px #000;
    -webkit-box-shadow: 2px 2px 20px #000;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    }
.cmenu img { cursor: e-resize;
    -webkit-transition: .2s all .2s ease-out;
    -moz-transition: .2s all .2s ease-out;
    -o-transition: .2s all .2s ease-out }
.cmenu:hover img { opacity: 0; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; }
.cmenu hr { border: 0; height: 1px; border-top: 1px solid #55a; border-bottom: 1px solid #77D; margin: 5px 10px }
.cmenu a { display: block; margin: 0 20px; color: #fff; text-decoration: none; height: 20px; padding: 0 10px;
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -o-transition: all .1s ease-out }
.cmenu a:hover { background: #000; color: #fff; }

/* Categories */
.zone_h { clear: both; height: 100px; display: block }
.ajax { float: right; width: 400px; padding: 5px 10px; background: black; text-align: center; color: white; opacity: 0.7 }
.categorie a { font-size: 1.2em; font-variant: small-caps }

/* Fiches */
.visuel { position: absolute; text-align: center; }
.visuel img { border: 2px solid #111; background: black }
.p_desc {  background:url(i/trame.png);padding: 10px; border: 1px solid black;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;  }

/* Listes */
.tab_liste { background: #575757 }
.tab_liste td { padding: 1px 5px; color: #fff }
.tab_liste a { color: cyan }
td.faible { border-bottom: 1px solid #474747; height: 20px; vertical-align: top; padding-left: 10px }
.onglet { border-width: 1px 1px 0; border-color: #9D9D9D; padding: 1px 5px; background: #C8C8C8; color: #646464; text-decoration: none }
A.onglet { color: #646464 }
.ongletA { border-width: 1px 1px 0; border-color: #9D9D9D; padding: 5px 5px 1px; background: #AAA; color: #000; text-decoration: none; font-size: 1.4em;
    -moz-border-top-left-radius: 20px;
    -webkit-border-top-left-radius: 20px; }
.menu_h2 td { padding: 3px 0 6px; color: white; text-decoration: none; background: #000; vertical-align: top; font-size: 1.2em }
.zone_b { height: 34px }
a.liste { display: block; text-decoration: none; font-size: 1.2em; color: white; height: 20px; padding-left: 20px; border: 0 }

.apercu {
    border: 1px solid black; width: 156px; height: 91px; background: #000 url(img/load.gif) center no-repeat; position: absolute; cursor: pointer; overflow:hidden;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out
}
.apercu:hover {
    -moz-transform: scale(1.7);  
    -webkit-transform: scale(1.7);
    transform: scale(1.7);
}


/* Interface */
.faible { font-size: 0.8em; color: #B0CAF9; }
.important { color:red }
.popup { position: absolute; display: none; background: url(img/info.png) no-repeat; color: #eee; text-align: center; padding: 4px; width: 120px; overflow: hidden; }
.zoom a { display: inline-block;
    -webkit-transition: all .7s ease-out;
    -moz-transition: all .7s ease-out;
    -o-transition: all .7s ease-out }
.zoom a:hover { font-weight: bolder;
    -moz-transform: scale(3) rotate(360deg);  
    -webkit-transform: scale(3) rotate(360deg);
    transform: scale(3) rotate(360deg);
    
}
.bout { text-decoration:none; background: #397BEF; padding: 2px 15px; color: white; font-size: 12px; border: 1px solid cyan; text-transform: uppercase; -webkit-border-radius: 13px; -moz-border-radius: 13px; box-shadow: 2px 2px 5px #111; -webkit-box-shadow: 2px 2px 5px #111; font-family: arial; cursor: pointer;
    -webkit-transition: all .7s ease-out;
    -moz-transition: all .7s ease-out;
    -o-transition: all .7s ease-out }
a.bout { color:white }
.bout:hover { background: magenta }
.bout2 { text-decoration:none; background: #397BEF; padding: 1px 10px; color: #fff; font-size: 12px; border: 1px solid #1C20AC; font-variant: small-caps; -webkit-border-radius: 13px; -moz-border-radius: 13px; box-shadow: 0 0 4px #1C20AC; -webkit-box-shadow: 0 0 4px #1C20AC; font-family: arial; cursor: pointer;
    -webkit-transition: all .7s ease-out;
    -moz-transition: all .7s ease-out;
    -o-transition: all .7s ease-out }
a.bout2 { color:#fff }
.bout2:hover { background: black }



/* Titres */
h1 { margin: 50px 0 20px; font-size: 3em; color: white; font-weight: normal }
h2, h3, h4 { margin: 10px 0 5px; }
h3, h2, h1 { font-variant: small-caps }
.titre { font-size: 1.8em; color: #fff; font-variant: small-caps }
h2.titre { font-size: 3em }
.stitre { font-size: 1.4em; color: #fff; font-variant: small-caps; font-weight: bold }
.stitre a { color: #fff }
.zone_g h3 { font-weight: normal; font-size: 1.4em; color: black; border-bottom: 1px solid #777; background: #777; padding: 0 5px; margin-bottom: 10px; }
.content h1 { position: fixed; background: #397BEF; padding: 0 20px 4px; margin: 0; font-size: 1.2em; right: 0px; border: 1px solid #094BBF; border-top: 0; color: #fff; z-index: 9; opacity: 0.9;
    border-bottom-left-radius: 15px; -moz-border-bottom-left-radius: 15px; -webkit-border-bottom-left-radius: 15px;
}

/* Pagination */
.barre_pagination { text-align: center; padding: 10px; font-weight: bold; font-size: 1.4em }
.barre_pagination A { color: Turquoise }



/* Couleurs */
.vert { color: #00FC65 }
.bg_bleu { background-color: #397BEF }
.bg_marine { background-color: #1C20AC }
.bg_black { background-color: #000000 }
.bg_fonce { background-color: #111 }