body {
background: rgb(83,144,213);
background-image: url("http://www.notre-planete.info/medias/bandeau.png"), linear-gradient(rgb(255, 255, 255), rgb(150, 200, 50));
background-position: center top; background-repeat: no-repeat; background-attachment : scroll, fixed;
font-size: 0.8em; font-family: Arial, Helvetica, sans-serif;
margin:0;
}

a:link, a:visited { color: #00F; text-decoration: none }
a:active, a:hover { color: #00F; text-decoration: underline }

a[href$=".pdf"]:before, a[href$=".pdf"]:before, a[href$=":PDF"]:before { content: url(/medias/doc_pdf.png); vertical-align: -3px; padding-right: 4px }

hr { clear:both; background-color: #666; height: 1px; border:0 }

/* corps du document */
#site { margin: 15px auto; width: 1261px; position: relative }
#corps { text-align: center; width: 925px; float: left; padding: 0 10px 2% 10px; background-color: rgb(255, 255, 255); margin-top:5px; box-shadow: 0 0 10px rgb(200,200,200) }
#page { padding-top:5px }

/* menu du haut */
#pubtop { position: absolute; top: -10px; right:0px }
#bandeau { height: 280px; clear: both;}
#indexlien { position: absolute; top: 90px; width: 600px; height: 100px; }

/* moteur de recherche */
#moteur { position: absolute; top: 200px; left: 5px; padding: 10px 10px 5px 10px; background-color: rgba(255, 255, 255, 0.6); width:450px }

#accroche{ position: absolute; top: 100px; left: 850px; font-size: 1.5em; color: rgb(255,255,255); font-weight: bold; text-align:right }
#login { position: absolute; left: 860px; top: 200px; border-radius:3px; padding: 5px 5px 0 5px; background-color: rgba(255, 255, 255, 0.6) }
#login input { height:20px; color:#666}
#login input[type="submit"] { background-color: rgb(74, 139, 245); color:#FFF; font-weight:bold; height:24px; border: 1px solid rgb(48, 121, 237); border-radius:2px }
#login input[type="submit"]:hover { background-color: rgb(66, 134, 244); border: 1px solid rgb(47, 91, 183); }

#outils { clear:both; width: 100%; table-layout:fixed; height:80px; border-radius: 0 0 5px 5px; padding-top:5px;) }
#outils tr { vertical-align:top }
.reco { width:70px; text-align:center; border:1px solid rgb(204,204,204); border-radius:2px; background: rgb(255,255,255); color:rgb(0,0,255); font-size:11px}
.reco_hits {width:70px; text-align:center; border:1px solid rgb(204,204,204); background: rgb(255,255,255); color:rgb(100,100,100); line-height:30px;margin-bottom:8px; border-radius:2px}
.reco:hover { border:1px solid rgb(150,150,150); cursor: pointer }
#fil { background: rgba(255,255,255,0.5); width:500px; font-style:italic;line-height:30px; padding-left:5px; float:right }
#hotlinks { background: rgb(255,255,255); width:500px; font-weight:bold; line-height:30px; padding-left:5px; float:right; text-align:center }

/* menu */
#nav { z-index:10; position:relative; }
#menu { margin: 0; padding: 0; z-index: 5; position:relative }
#menu > li {
	list-style: none; 
	float: left;
	background: linear-gradient(#039, #538ED5);
	box-shadow: 0px 0px 2px rgb(200,200,200);
	margin: 0;
	padding: 0;
	width:180px;
	cursor: pointer;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
	height:40px;
}
#menu > li:last-child { margin: 0 }
#menu > li:nth-child(3){ width:181px}
#menu > li a { text-decoration: none; color: #FFF; font-size: 18px; display:block }
#menu > li:hover { background:#9C3 }

#menu > li > ul { margin: 0; padding:0; display:none; box-shadow: none; width:180px; font-size: 13px; box-shadow: 3px 3px 10px rgb(100,100,100);}
#menu > li > ul > li { list-style: none; background: rgb(80,140,210); margin: 0; padding: 0; line-height:30px; border-top: 1px dotted #EEE; white-space:nowrap; text-align:left }
#menu > li > ul > li > a { font-size:14px; padding: 0 0 0 5px; color: #FFF; text-decoration: none; display:block;}
#menu > li > ul > li > a:hover, #menu li a:focus {background: #FFF; color: rgb(0,0,255)}

/* bouton like */
.like { font-size:12px; padding:2px 4px; background:rgb(240,240,240); border: 1px solid rgb(255,255,255) }

/* bouton play video */
.play { top: 75%; left: 50%; width: 66px; height: 66px; position: relative; border: 3px solid #fff; margin: -36px 0 0 -36px; border-radius: 36px; opacity:0.7; }
.arrow { display: inline-block; border-top: 4px solid transparent; border-left: 8px solid #fff; border-bottom: 4px solid transparent; }
.play .arrow { top: 50%; left: 50%; position: relative; border-top-width: 14px; border-bottom-width: 14px; border-left-width: 24px; margin: -14px 0 0 -10px; }
.play:hover {opacity:1;}

/* menu de droite  */
#sky {float: right; width: 300px; margin-bottom:15px;position:relative;top:-50px }

.sky_mention { text-align:center; font-size:11px; margin:2px 0 0 0 }
.sky_cadre { width: 294px; margin: 8px auto; padding:3px; background:rgb(255,255,255)}
.sky_cadre > p:first-child { 
	color: #FFF;
	font-weight: bold;
	font-size: 1.2em;
	line-height: 25px;
	margin: 0;
	background: #538DD5;
	text-align:center
}
.sky_cadre ul { width: 100%; margin: 0; padding: 0 }
.sky_cadre li { border-top: 1px dotted #EEE; list-style: none }
.sky_cadre li a:before { content: "\002B\00a0"; color:#EEE }
.sky_cadre li a.alerte { color:rgb(255,0,0); font-weight:bold }
.sky_cadre li a.alerte:before { content: "\00a0\21\00a0"; color:rgb(255,0,0); font-weight:bold }
.sky_cadre li a { display: block; line-height: 25px; text-decoration: none; color: #000 }
.sky_cadre li a:hover, .sky_cadre li a:focus { color: #00F; background: #EEE }

/* actualites à la une sky */
.pop { width:285px; height:150px; margin: 5% auto 0 auto}
.pop > a { font-size:14px; font-weight: bold; position:relative; top:+90px; background: rgba(255,255,255,0.9); width:275px; height:50px; padding:5px; display: block; }
.pop a:link, .pop a:visited { text-decoration: none; color: rgb(0,0,0) }
.pop a:hover, .pop a:active { color: rgb(0,0,255) }
.pop:hover { cursor:pointer }

/* réseaux sociaux sky */
#rs { border-spacing:15px 5px; margin:auto; width:auto }
#rs  img:hover{ box-shadow: 2px 4px 5px rgb(150,150,150);}

/* bas de page  */
footer {
	margin: 0 auto;
	text-align:center;
	background: rgb(80,140,210);
	background: linear-gradient(rgb(80,140,210),#039);
	font-size: 12px;
	color: #FFF;
	margin-bottom: 5%;
	padding:2px;
}
footer a:link, footer a:visited { color: #FFF; text-decoration: none }
footer a:active, footer a:hover { color: #FFF; text-decoration: underline}
#renvoi_page {clear:both; line-height:20px;text-align:right }
#cnil { width:280px;padding:5px;background-color:rgb(245,245,245);position:fixed;bottom:0;left:10px;z-index:5; }
#abp { width:100%;padding:1%;background-color:rgb(245,245,245);position:fixed;top:35%;left:0;z-index:5; font-size:4em;color:rgb(0,0,0);z-index:30 }

/* élements de formulaire  */
.fielderror { color: #F00 }
.fieldreq { color: #000 }
input[type=submit] { height: 27px; cursor: pointer }
input:focus, textarea:focus { color:#00F }
:required { border: 1px solid orange }

#erreur { width: 99%; margin: auto; color: #FFF; background-color: #F00; padding: 3px; text-align: center; font-weight : bold }

table {text-align: left}
a img {border:0}

/* titres */
h1 {
	clear: both;
	text-align: left;
	background-repeat: no-repeat;
	padding-left: 20px;
	background-image: url(/medias/terre_puce.png);
	background-position: -14px top;
	color: rgb(50,150,0);
	margin: 20px 0;
	font-size:26px;
	line-height:30px;
}
h2 { color: #390; border-bottom: 1px solid #EEE; clear: both; margin: 5% 0 2% 0; font-size:20px; padding-bottom: 10px; text-align: left }
h3 { color: #390; text-align: left; font-size: 16px; margin-top:5%; }
h4 { font-size: 15px; margin-bottom:0 }

/* commentaires */
.com { border-radius: 5px; margin-bottom: 10px; padding: 5px; border: 1px solid #EEE; width: 100% }
.com > img { vertical-align: middle; width:20px; height:20px; }
.com tr:nth-child(2) td { border-top: 1px dotted #EEE;padding-top:5px; word-wrap:break-word}
#com { display: block; margin-top: 5px; text-align:left; font-size: 1em }
#comf { background-color: #EEE; text-align: left; padding:1% }

.rubrique { border: 1px dotted #9C3 }

#som_rub > .actu:nth-child(odd) { margin-left:3px }
.actu { border-spacing:0; width: 440px; float: left; padding:15px }
.actu td {padding:0}
.actu tr:nth-child(1) { height:70px; font-size:1.5em; font-weight:bold }
.actu tr:nth-child(2) { height:180px }
.actu tr:nth-child(3) { font-size: 1em; color: rgb(190,190,190); height:30px }
.actu tr:nth-child(3) > td { padding-top:5px; vertical-align:top }
.actu a:link, .actu a:visited { color: rgb(50,50,50); text-decoration:none } 
.actu a:active, .actu a:hover { color: rgb(0,0,255); text-decoration:none } 
.actu span { float:right }

.actu:hover { box-shadow: 0 0 10px rgb(200,200,200) }
.lienimg { display:block; width:430px; height:180px }

/* liste à puces à droite d'une image dossier */
.liste_img { list-style-position:inside; text-indent: 5px }

/* images dossiers */
.minimg { font-size: 12px; margin: 0 10px 5px 0; float: left; line-height:15px; color: #666 }
.minimgr { font-size: 12px; margin: 0 0 5px 10px; float: right; line-height:15px; color: #666 }
.minimg img, .minimgr  img {margin-bottom: 5px; display:block }
.image { font-size: 12px; margin: 20px auto; line-height:15px; color: #666; overflow:hidden; width:900px }
.image > img {margin-bottom: 0; display:block;}
.image-portrait { font-size: 12px; float:left; margin:0 10px 0 0; line-height:15px; color: #666; overflow:hidden }
.image-portrait > img {margin-bottom: 0; display:block;}

.legende { color: #666; margin: 0 auto 20px auto; line-height: normal; padding: 2px; font-size: 0.8em }

/* dossiers */
.texte { text-align: justify; line-height: 1.4em; color:rgb(50,50,50); font-size:1.2em; padding: 0 5px }

/* dossiers en savoir plus  : références et auteurs */
.plus { background: #EEE; margin:0 15px; padding:5px 5px 5px 22px; text-align:left; border-radius:7px; font-size:12px }

/* barre grise d'options pour les services */
.options { margin: 1% auto; font-size:1em; line-height: 30px; }
.options a { padding: 5px; background: #EEE; margin:0 5px; border-radius: 2px; box-shadow: 2px 2px 2px #CCC; }
.options a:before { content: "\002B \0020"; color:#000 }
.options a:hover { box-shadow: 2px 2px 2px rgb(150,150,150); text-decoration:none }

/* élements de navigation */
.navigation { text-align: center; line-height:32px; clear:both; font-weight:bold; font-size: 12px; padding: 2% 0}
.navigation span { padding: 4px 8px; border-radius: 4px; box-shadow: 2px 2px 2px #AAA; background-color:#EEE; margin: 5px }
.navigation a:link, .navigation a:visited { padding: 4px 8px; border-radius: 4px; box-shadow: 2px 2px 2px #AAA; margin: 5px }
.navigation a:active, .navigation a:hover { padding: 4px 8px; border-radius: 4px; text-decoration:none; box-shadow: 2px 2px 2px #AAA; background:#538ED5; color:#FFF; margin:5px }

/* avertissement et alertes */
.avert { padding: 5px; border: 1px solid #EEE; text-align: left; color: #666; font-size:12px }
.avert_r { padding: 5px; border: 1px solid #F00; font-weight: bold; text-align: center }
.avert_v { padding: 5px; border: 2px solid #9C3; font-weight: bold; text-align: center; box-shadow: 0 0 10px #9C3; border-radius:5px }
.accroche {
	line-height:50px;
	border-radius:5px;
	padding: 0 5px;
	box-shadow: 0 0 5px #AAA;
	font-size:120%;
	font-weight: bold;
	text-align:center;
	width:85%;
	margin:5% auto;
	background: #EEE;
	background: linear-gradient(#FFF, #EEE);
	clear:both;
}

/* divers */
.spacer { clear: both }
.liste_espace li  { margin-bottom: 10px }
button {line-height:18px }

/* tableau texte */
.tableau { margin: 20px auto 0 auto; text-align: left;}
.tableau caption {caption-side: bottom; 	font-size: 12px; color:#666; line-height:15px; margin-bottom:20px; text-align: left }
.tableau th { line-height: 30px; text-align: center; font-weight: bold; background: #9C3; color:#FFF; padding:0 5px }
.tableau td { padding: 2px; border-bottom: 1px solid #EEE; height: 30px }
.tableau tr:hover { background-color:#EEE}
.tab-e {font-weight:bold}

/* entête impression */
#mini, #entete { display: none }

#modal {	position: absolute; padding: 5px 20px; background: rgb(255,255,255); border-radius: 15px; box-shadow: 1px 1px 12px rgb(100,100,100); font-size:14px; z-index:15 }
#close {	position:absolute; width:25px; height:25px; top:-10px; right:-10px; z-index:20; color:#FFF; background:rgb(80,140,210); line-height: 25px; font-size:15px; text-align: center; font-weight: bold; border-radius: 12px; cursor: pointer; box-shadow: 1px 1px 12px rgb(100,100,100) }
#close:hover { background: rgb(150,200,50) }