/*css document*/
* {margin: 0; padding: 0;}
body {font : normal 100%/100%, Arial, Helvetica, Verdana, arial, sans-serif; background-color: rgb(170,190,210);}
img {vertical-align: middle; border: 0px;}

/*structure*/
div {	-webkit-border-radius: 1.3em;
	-moz-border-radius: 0.7em;
	-o-border-radius: 0.7em;
	border-radius: 0.7em;}
.scr { width: 100%;}
.gen {width: 970px;height: 900px; margin: 0 auto; background-color:rgb(190,210,230);padding-left: 1em;}
#bulle {width: 380px; height: auto; position: absolute; top: 100px; left: 750px;z-index: 10; display: block; cursor: move;}
#mask {position: absolute; z-index: 1; display: block;background-color: rgb(160,180,200); -moz-opacity: 0.9; opacity: 0.9; filter:alpha(opacity=90);width: 100%; height: 1000px;}
/*classe pour blanchir le contenu*/
h1.header {width: inherited;height: 1.6em;text-align: center; font-size: 1em; background-color: rgb(150,170,190); color: #fff; margin: 0.3em auto 0 auto; padding: 0.3em 0 0 0;}
h1.pretexte {font: normal 180% inherited; color: rgb(255,255,255);margin: 0px;}
.rack { width: 320px;float: left;}
.ico { width: 16px; border: 0;}

/*allume, eteint*/
.box { width: 260px; float: left; border: dotted 1px #fff; margin: 0.2em;padding: 1em;height: auto;	}
.boxlit {width: 260px;float: left;margin-top: 1em; border: dotted 1px #fff; margin:  0.2em;padding: 1em;background-color: rgb(210,230,250);font: normal 100% inherited;
-webkit-box-shadow:  rgb(70,90,110) 0px 0px 50px;
	-moz-box-shadow: #999 0px 0px 50px;
	-o-box-shadow: #999 0px 0px 50px;
	box-shadow: #999 0px 0px 50px;}
h2 { font: oblique 80%/100% inherited; color: #fff; background-color: rgb(200,80,200); width: 160px;margin:0 1em;padding: 0 0 0 1em;	-webkit-border-radius: 1.3em;
	-moz-border-radius: 0.7em;
	-o-border-radius: 0.7em;
	border-radius: 0.7em;}
h2.cg { font: normal 85%/150% Impact; color: #fff; background-color: rgb(200,80,200); width: 11em;margin: 1em;padding: 0 0 0 1em;}
h2.bu { background-color: #FFF; color:  rgb(170,190,210); font: bold 120% Arial;margin-top: -1em;}
h2.e { font: normal 100%/100% Impact; color: #fff; background-color: rgb(230,150,230); width: 12em;margin-left: 8px;margin-bottom: 4px;padding: 0.4em;}
/* bulle */
.hlp { display: none; width: 380px; padding-left: 20px;margin-left: 0px;}
.expl { display: none; font: normal 75%/130% Arial, Helvetica, Sans-serif; padding: 1em 1em 1em 5em; line-height: 1.6em;background-color: rgb(255,255,255);	-webkit-border-radius: 1.4em;
	-moz-border-radius: 0.8em;
	-o-border-radius: 0.8em;
	border-radius: 0.8em;
	-webkit-box-shadow: #999 5px 5px 60px;
	-moz-box-shadow: #244766 10px 10px 10px;
	-o-box-shadow: #244766 10px 10px 10px;
	box-shadow: #244766 10px 10px 10px;}
 #aut, #alt{-webkit-column-count: 2;-webkit-column-width: 120px;-webkit-column-gap: 5px;-moz-column-count: 2;-moz-column-width: 120px;-moz-column-gap: 5px;-o-column-count: 2;-o-column-width: 120px;-o-column-gap: 5px;-o-column-rule: 1px solid #6d94b4;column-count: 2;column-width: 120px;column-gap: 5px;
}
/* définir classe menuinline menu2col*/
.menuic { display: block;}
#rec { display: block; }
#deli { clear: both;}


.footer { color: rgb(30, 30, 30);font-size: smaller;}
#coleft {width: 400px; border: solid 1px red;}
.sst { font: oblique 70%/120% Arial, helvetica, verdana; color: rgb(80,90,100);background-color: rgb(180,200,220);text-align: center;}
.quest { font-weight: bold; background-color: rgb(255,255,255);color: rgb(140,160,180);padding: 0 4px;}
.etiq {font-size: 80%; background-color: rgb(255,255,210);color: #000; border: dotted 1px rgb(200,200,200);padding: 2px 4px;}
/*elements*/
iframe { width: 500px; height: 480px; border: 0px;margin: 0; padding: 0;background-color: transparent; }

h1.cd { font-size: 1em; margin-left: 0px; text-align: left; text-decoration: none;}
h3 { width: 200px; font-style: oblique; color: #606060; position: relative; top: -8px; left: 80px;}
h4 { width: 160px; font-size: 0.8em;margin:-6px 0;padding-left: 0.5em;color: rgb(128,0,0);}
tt { font-size: 0.8em;}

/*help*/
#hlp1 { display: block; position: absolute; z-index: 5; top: 60px; left: 100px; width: 640px; border: solid 24px white; padding: 1em; background-color: rgb(130,150,170);}
#hlp2 { display: none; position: absolute; z-index: 5; top: 80px; left: 120px; width: 640px; border: solid 24px white; padding: 1em; background-color: rgb(130,150,170);}
#hlp3 { display: none; position: absolute; z-index: 5; top: 100px; left: 140px; width: 640px; border: solid 24px white; padding: 1em; background-color: rgb(130,150,170);}
.une { font: normal 100%/200% Arial, Helvetica; color: rgb(255,255,255);background-color: rgb(130,150,170);margin-top: 1em; padding: 1em;}
li.une { font: normal 80%/150% inherited; margin: 0 2em; padding: 0;}
small { line-height: 1.5;}
/*classes*/

/*listes*/
ul.menu, ul.highlight, ul.cadres { list-style-type : none; font: normal 76%/130% Arial, helvetica; width: 100%;margin: 2px 4px 0px 4px;;padding: 4px;}
/*couleur*/
.highlight { list-style-type: none; margin: 2px 4px 0px -4px;padding: 4px; -webkit-border-radius: 1.1em;
	-moz-border-radius: 0.6em;
	-o-border-radius: 0.6em;
	border-radius: 0.6em;}

li.ce { 
margin:2px 4px;
padding: 2px 4px;
text-align : center;
line-height: 1.5em;
font: normal 100%/100% inherited;
display: inline;
}
li.ce>img {margin: 1px;}
li.vi { display: inline; margin: 0;}

/*links*/
a:link {
color : #b22222;
text-decoration : none;
}
a:visited {
color : #696969;
text-decoration : none;
}
a:hover {
color :  #ff00d7;
text-decoration : none;
background-color: rgb(180,200,240);
margin: 1px;
}
a:active {
color : #ff0000;
text-decoration : none;
}