body {font-family:Arial, Helvetica, sans-serif; background:#000; font-size:0.8em; color:#053343}
a {color:#008080; text-decoration:none}
a:hover {text-decoration:underline}
#conteneur {background:#fff; width:84%; margin:0 auto}
.header {border-right:12px solid #000; border-left:12px solid #000}
.header img {margin:15px}
.header div#haut {padding:3px; background:#d1d1d1; font-size:0.8em}
.header div#haut  a {color:#555}
.header #outils {float:left; font-weight:bold}
.header #aide {text-align:right}
.header div li {display:inline-block; padding:0 0 0 5px}
.header div li:after {content:" | "}
.header div li:last-child:after  {content:none}
.header div img {margin:0}
#gpc {margin:0 0 0 15px; font-weight:bold; font-size:2em}
.header form {float:right; margin:35px 30px 0 0}
#validerRecherche {background-color:#053343; margin: 0 0 0 -4px; padding: 5px; vertical-align: bottom; width: auto}
input[type="text"] {border: 1px solid #053343; min-height: 24px; padding:0 5px; width: 160px;}

.watermk {
	display:none;
	background-image:url(../img/arrowup.png);
 	position:fixed;
 	bottom:5px;
 	right:5px;
 	z-index:99; 
 	opacity:0.3;
 	filter: alpha(opacity=30); 
 	padding:3px;
 	clear:both;
}

.watermk:hover{
    opacity:0.6;
    filter: alpha(opacity=60); 
}

.watermk a{
	display:block;
 	position:relative;
 	bottom:0px;
 	right:0px;
 	width:58px;
    height:58px;
 	text-indent:-9999px;
 	clear:both;
}

.nav {background:#008080; position:relative;border:1px solid #008080 }
.nav ul {margin:0}
.nav ul li {display:inline-block; font-weight:bold; border-right:1px solid #008080; margin:0; padding:0; text-transform:uppercase}
.nav ul li:last-child {border-right:none}
.nav ul li span {display:block;background:#fff;border:1px solid #008080;padding:1px 15px;color:#008080;}
.nav ul li span a {display:block;background:#fff;border:0px solid #008080;padding:1px 15px;color:#008080;}
.nav ul li a {display:block; color:#fff; padding:2px 15px;margin:0}
.nav ul li a:hover {color:#008080; background:#fff; text-decoration:none}

.nav:after {display: block; width:12px; content:" "; background: #008080 url(../img/tg.png) no-repeat; height:12px; float:left}
.nav:before {display: block; width:12px; content:" "; background: #008080 url(../img/td.png) no-repeat; height:12px; position:absolute; top:100%; right:0}
#contenu  {border-right: 12px solid #000; border-left: 12px solid #000; padding-top:15px}
/*#contenu  {border-right: 12px solid #053343; border-left: 12px solid #053343; padding-top:15px}*/

/*
nav:after {display: block; width:12px; content:" "; background: #fff url(../img/tg.png) no-repeat; height:12px; float:left}
nav:before {display: block; width:12px; content:" "; background: #fff url(../img/td.png) no-repeat; height:12px; position:absolute; top:100%; right:0}
*/

#menu2 { position:relative;border:0px solid #008080;padding:0;margin-left:10px;margin-right:10px}
#menu2 ul {margin:0;background:#008080;}
#menu2 ul li {display:inline-block; font-weight:normal;background:#008080; border-right:1px solid #008080; margin:0; padding:0;}
#menu2 ul li:last-child {border-right:none}
#menu2 ul li span {display:block;background:#fff;border:1px solid #008080;padding:1px 15px;color:#008080;}
#menu2 ul li span a {display:block;background:#fff;border:0px solid #008080;padding:1px 15px;color:#008080;}
#menu2 ul li a {display:block; color:#fff; padding:2px 15px;margin:0}
#menu2 ul li a:hover {color:#008080; background:#fff; text-decoration:none}

/*
#menu2 {text-align:center}
#menu2 ul, header div ul {padding:0; margin:0}
#menu2 li {display:inline-block; margin:0 5px; vertical-align:top}
#menu2 ul {border-bottom:3px solid #008080; width:80%; margin:auto; text-align:left}
#menu2 li span:before {content:none}
#menu2 li span {display:block; padding:5px 10px 15px 10px;color:#fff; background:#008080}
*/

article {margin:0 80px}
.article {margin:0 80px}
#article {margin:0 80px}
h1 {margin:2em 0; text-align:center}
h2 {color:#053343; margin-top:35px}
h3 {margin-top:25px}
/*h3:before {content:"/ / "}*/
.chapo {color:#666; font-weight:bold}
p {max-width:650px}


	
#liste h2{
	font-size: 5em;	
	top: 0px;
	left: -25px;
	margin: 0;
	padding:0;	
	opacity: 0.5;
	font-weight: bold;
	}
#liste h3  {margin:0 15px}
#liste h3:before {content:none}
#contenu span.alerte {color:#ff782b; font-weight:bold}
#contenu span.alerte:before {content:" » "}
ul {padding-left:20px}
/*
#liste div {
	column-count:2; 
	column-gap:2em;
	-moz-column-count:2; 
	-moz-column-gap:2em; 
	-webkit-column-count:2;
	-webkit-column-gap:2em; 
	margin:1em 0; 
	column-rule-style:dotted; 
	-moz-column-rule-style:dotted; 
	-webkit-column-rule-style:dotted
	}
	*/
#liste {	
	font-size:0.9em; 	
	}
#liste div {	
	margin:0.2em 0;
	margin-top:2px;
	margin-bottom:2px; 	
	}
#liste ul {padding:0 0 5px 20px; margin:0}
#liste li {list-style:none;padding:5px;}

#liste div#sommaire  {column-count:1;-moz-column-count:1; -webkit-column-count:1}
#liste #sommaire ul {text-align:center}
#liste #sommaire li {display:inline-block; width:3em}
#liste #sommaire a {font-weight:bold; display:block; padding:5px; margin:0 5px; background:#e5e1d6}
#liste #sommaire a:hover {background:#048D9A; color:#fff; text-decoration:none}
#liste #sommaire a:link, #liste #sommaire a:visited{-webkit-transition:background-color .2s linear,color .2s linear .2s;-moz-transition:background-color .2s linear,color .2s linear .2s;-o-transition:background-color .2s linear,color .2s linear .2s;transition:background-color .2s linear,color .2s linear .2s}
blockquote {margin:25px 0; padding:2px 20px; max-width:510px; background-color:#f2f1ed; background-image: url(../img/triangle.png), url(../img/gris.gif), url(../img/gris.gif); background-position:100% 100%, 0 100%, 100% 0; background-repeat:no-repeat, repeat-x, repeat-y}
iframe {width:100%}
.reference {border-left:5px solid #008080; padding-left:5px; margin:20px 0}
.reference span {display:block;font-weight:bold}
.reference a:before {content:"> "; font-weight:bold; font-size:0.9em}
.float {padding:0}
.float li {display:inline-block; padding:10px 15px 10px 0; max-width:29%; vertical-align:top}
.float li img {width:100%; height:auto}
#date {text-align:right; font-size:0.75em; margin:15px}
#date img {vertical-align:-4px; margin-right:10px}
h1 img {width:100%; height:auto; margin:20px 0}
video {max-width:100%; height:auto}
.trigram {font-size:80%; color:#999}
.rouge {color:red; border:1px solid red; padding:0 3px}
.vert {color:green; border:1px solid green; padding:0 3px}
.bleu {color:blue; border:1px solid blue; padding:0 3px}
.noir {color:#000; border:1px solid #222; padding:0 3px}
.grisf {color:#555; border:1px solid #444; padding:0 3px}
.grisc {color:#999; border:1px solid #666; padding:0 3px}

.mob {display:none}
div.accueil {margin-top:15px}
ul.accueil {padding:0}
ul.accueil li, p.accueil {display:inline-block}
ul.accueil li  a{font-size:1.6em; color:#999;}
ul.accueil li:before {font-size:1.6em; content:" / / "; color:#a54e01}
ul.accueil li:first-child:before {content:""}
p.accueil {padding:0 10px 0 0; vertical-align:top}
footer {clear:both; padding:10px; text-align:center; font-size:0.7em; border-top:1px solid #ccc; width:95%; margin:auto;margin-top:5px}
#footer {clear:both; padding:10px; text-align:center; font-size:0.7em; border-top:1px solid #ccc; width:95%; margin:auto;margin-top:5px}
@viewport {width:device-width; zoom:1}
@media (max-width:1000px) {
#rs {position:relative; margin:12px 0 0 0; padding:10px 0 0 25px; background:#fff; border-right: 12px solid #000; border-left: 12px solid #000}
#rs a {display:inline-block}
}
@media (max-width:720px) {
#conteneur {width:auto}
article {float:none; width:auto; margin:0 5%}
.article {float:none; width:auto; margin:0 5%}
h1 {margin-top:0; padding-top:10px}
.float li {max-width:43%}
nav ul li {display:block; border:none}
}
@media (max-width:440px) {
.float li {display:block; padding:5px 0; max-width:90%}
.float li img {width:auto; display:block}
img {max-width:100%}
}
@media handheld, only screen and (max-device-width: 600px), only screen and (max-width: 600px){
.mob {display:inline}
.fix {display:none}
}