/* CSS Document */
body{ font-family:Verdana, Geneva, sans-serif; background:#212121; margin:0; padding:0; font-size:62.5%; color:#787878}
a:link{color:#dedede; text-decoration: none} 
a:visited{ color: #919191}
a:hover, a:active{ color: #dedede; text-decoration: underline;}
img a{ outline:none; border:0;}
span.invisible{ font-size:0; text-indent: -5000px}
.clearBoth{ clear:both}
.typoClassic{ font-family:Verdana, Geneva, sans-serif;}
.font14{font-size: 1.4em;}
@font-face {font-family: BirdmanL; src: url('birdmanl.ttf');}
/* Head */
#site{margin: 10px; min-width: 800px}
#head{width: auto; background: transparent url("logo_pierre_tampon-lajarriette_54x44.png") no-repeat left top; overflow: auto; padding-left:60px;}
#head h1{ margin:0; padding:0; height: 44px; font-family:BirdmanL, Verdana, Geneva, sans-serif; font-size:3.75em; letter-spacing:0.058em;}
#head h1 .tiret{ font-family:Verdana, Geneva, sans-serif; font-weight:lighter; font-size:0.9em}
#head h1 a{ color:#fff; text-decoration:none;}
/* Page*/
#head #page{ width:100%; float:left; font-size:1.2em;}
#head #page span{font-family:BirdmanL, Verdana, Geneva, sans-serif;}
#head #page span.pageCours{background:transparent url(bordure-noir.gif) repeat-x; padding: 0 2px 0 0; font-size: 1.6em; letter-spacing:0.058em;}
#head #page > span a{background:transparent url(bordure-noir.gif) no-repeat right; padding: 0 2px 0 0; }
#head #page > span a:hover{ background: none}
#head #page a{ color:#fff; text-decoration: none; padding-bottom: -1px; font-weight: 400 }
#head #page a:hover{ text-decoration: underline;}
/* nav rapide */
#head #navRapide{ width:116px; float:left; position:absolute; /*right: 35px;*/ left:669px; top:48px; margin-top: 6px;}
#head #navRapide span{ margin-top: -6px;}
#head #navRapide a{ color:#fff; text-decoration:none; margin-top: -6px;}
#head #navRapide .rapide-intro{ position:absolute; top:4px; left:-70px; color:#787878; text-indent:-5000px}
#head #navRapide:hover .rapide-intro{ text-indent:0}
/* */
#head #navRapide .rapide-intro{ position:absolute; top:4px; left:-70px; color:#787878; text-indent:-5000px}
#head #navRapide:hover .rapide-intro{ text-indent:0}
/*	picto	*/
#head #navRapide .rapide-animation{ display:block; float:left; height:21px; width:23px; background:transparent url(menu_rapide-animation.gif);}
#head #navRapide .rapide-jeu{ display:block; float:left; height:21px; width:23px; background:transparent url(menu_rapide-jeu.gif);}
#head #navRapide .rapide-jeu{ display:block; float:left; height:21px; width:23px; background:transparent url(menu_rapide-jeu.gif); }
#head #navRapide .rapide-site{ display:block; float:left; height:21px; width:23px; background:transparent url(menu_rapide-site.gif);}
#head #navRapide .rapide-labo{ display:block; float:left; height:21px; width:23px; background:transparent url(menu_rapide-labo.gif); }
#head #navRapide .rapide-graphisme{ display:block; float:left; height:21px; width:23px; background:transparent url(menu_rapide-graphisme.gif);}
/*	picto hover	*/
#head #navRapide .rapide-animation:hover{ background:transparent url(menu_rapide-animation.gif) bottom;}
#head #navRapide .rapide-jeu:hover{ background:transparent url(menu_rapide-jeu.gif) bottom;}
#head #navRapide .rapide-jeu:hover{ background:transparent url(menu_rapide-jeu.gif) bottom; }
#head #navRapide .rapide-site:hover{ background:transparent url(menu_rapide-site.gif) bottom;}
#head #navRapide .rapide-labo:hover{ background:transparent url(menu_rapide-labo.gif) bottom; }
#head #navRapide .rapide-graphisme:hover{ background:transparent url(menu_rapide-graphisme.gif) bottom;}
/*	postion et couleur texte	*/
#head #navRapide .rapide-animation span{left:0px; color:#e90005; background: #212121; padding: 4px}
#head #navRapide .rapide-labo span{left:20px; color:#eea500; background: #212121; padding: 4px}
#head #navRapide .rapide-site span{left:46px; color:#23ba37; background: #212121; padding: 4px}
#head #navRapide .rapide-jeu span{left:68px; color:#24e2f2; background: #212121; padding: 4px}
#head #navRapide .rapide-graphisme span{left:88px; color:#019df0; background: #212121; padding: 4px}
/*	general texte	*/
#head #navRapide .rapide-animation span, #head #navRapide .rapide-jeu span, #head #navRapide .rapide-site span, #head #navRapide .rapide-labo span, #head #navRapide .rapide-graphisme span{ position:absolute; top:-40px; opacity:0;-ms-transform:rotate(-30deg); -moz-transform:rotate(-30deg); -webkit-transform:rotate(-30deg); -o-transform:rotate(-30deg); -moz-transition: top 500ms, opacity 500ms; -webkit-transition: top 500ms, opacity 500ms;-o-transition: top 500ms, opacity 500ms;}
/* Hover */
#head #navRapide .rapide-animation:hover span, #head #navRapide .rapide-jeu:hover span, #head #navRapide .rapide-site:hover span, #head #navRapide .rapide-labo:hover span, #head #navRapide .rapide-graphisme:hover span{top:-30px;}
/*	opacity texte	*/
#head #navRapide .rapide-animation:hover span, #head #navRapide .rapide-jeu:hover span, #head #navRapide .rapide-site:hover span, #head #navRapide .rapide-labo:hover span, #head #navRapide .rapide-graphisme:hover span{opacity:1}
/*	Listage	*/
#listage .picto{ display: block; float:left; height:21px; width:23px; text-align: center; margin-right: 23px;}
#listage{ clear: both; font-size: 1.4em;}
#listage ul{ list-style:none; padding:0px; margin:0px;}
#listage li{ margin:10px 0; padding-left:15px;}
#listage li a {padding:5px 0; margin-right: 20px;}
/* Listage Image */
#listage-image{ padding:10px 0 0 60px;}
#listage-image a img{ padding: 1px; border: #212121 solid 1px}
#listage-image a:hover img{ border-color: #019df0;}
/*	Couleur Rouge	*/
.rouge{ color:#e90005}
#head .bordure-rouge{background:transparent url(bordure-rouge.gif) repeat-x;}
.picto-rouge{background:transparent url(menu_rapide-animation.gif) top;}
#listage ul.rouge li:hover a{color:#e90005}
#listage ul.rouge li:hover .picto-rouge{ background-position: bottom;}
/*	Couleur Jaune	*/
.jaune{ color:#eea500}
#head .bordure-jaune{background:transparent url(bordure-jaune.gif) repeat-x;}
.picto-jaune{background:transparent url(menu_rapide-labo.gif) top;}
#listage ul.jaune li:hover a{color:#eea500}
#listage ul.jaune li:hover .picto-jaune{ background-position: bottom;}
hr.jaune{background:transparent url(bg-separateur-haut-jaune.gif) repeat-x bottom; height: 8px; margin: 6px 0 12px; border: none}
/*	Couleur Vert	*/
.vert{ color:#23ba37}
#head .bordure-vert{background:transparent url(bordure-vert.gif) repeat-x;}
.picto-vert{background:transparent url(menu_rapide-site.gif) top;}
#listage ul.vert li:hover a{color:#23ba37}
#listage ul.vert li:hover .picto-vert{ background-position: bottom;}
/*	Couleur Cyan	*/
.cyan{ color:#24e2f2}
#head .bordure-cyan{background:transparent url(bordure-cyan.gif) repeat-x;}
.picto-cyan{background:transparent url(menu_rapide-jeu.gif) top;}
#listage ul.cyan li:hover a{color:#24e2f2}
#listage ul.cyan li:hover .picto-cyan{ background-position: bottom;}
/*	Couleur Bleu	*/
.bleu{ color:#019df0}
#head .bordure-bleu{background:transparent url(bordure-bleu.gif) repeat-x;}
.picto-bleu{background:transparent url(menu_rapide-graphisme.gif) top;}
#listage ul.bleu li:hover a{color:#019df0}
#listage ul.bleu li:hover .picto-bleu{ background-position: bottom;}