/*
Auteur : Julien Villalard
Fichier : general.css
*/
@import url(https://fonts.googleapis.com/css?family=Signika+Negative);

HTML {
  height: 100%;
  width: 100%;
  font-size: 80%;
  	margin: 0;
	padding: 0;	
}

BODY{
	position:relative;
	width: 100%;
	height: 100%;	
	margin: 0 auto 0 auto;
	padding: 5px;	
	font-size: 1em;	
	color:white;
	background-color:black;
	line-height:1.2;
	font-family: 'Signika Negative', sans-serif;
	text-align:center;
	}


#general {
	position: relative;
	width: 100%;
	height: 100%;
	max-height: 750px;
	max-width: 1300px;
	min-height: 630px;
	min-width: 1000px;
	overflow: hidden;
	margin: 0 auto 0 auto;
	border: 1px solid #272727;
}
.nettoyeur{
clear:both;
}

H1{
font-size:1.5rem;}
H2{
font-size:1.2rem;
color:#C0C0C0}
A {
	text-decoration: none;
	font-weight: bold;
	color: white;
}
A:hover {
	text-decoration: underline;
	font-weight: bold;
	color: red;
}
A.lien_home {
	display:block;
	color: white;
	height:30px;
	font-size:1.5rem;
	padding:8px;
	border-top:1px solid white;
	border-bottom:1px solid white;
}
A.lien_home:hover {
	color:black;
	background-color:white;
	text-decoration: none;
}
A.lien_article {
	font-size:1.4rem;
}
A.lien_article:hover{
	color:red;
}

.introduction{
border-bottom:1px solid gray;
margin-bottom:20px;
}

.texte{
	position:relative;
}

.logo{
	width:110px;
	float:left;
}

/* BANDEAU  */
#bandeau_haut {
	position:absolute;
	top:0;
	width: 100%;
	height: 100px;
	z-index:10;
}

#bandeau_bas {
	position:relative;
	width: 100%;
	font-size:0.8rem;
	color:#c5c5c5;
	margin-top:20px;
	padding:10px;
	text-align:center;
}

.bandeau_noir {
	position:absolute;
	width: 100%;
	height: 100%;
	background-color: black;
   opacity : 0.7;
   filter : alpha(opacity=70); 
}

#bd_haut {
	position:absolute;
	width: 100%;
	height: 100%;
	color:white;
	border-bottom:1px solid white;
	z-index:11;	
}
#bd_bas {
	position:absolute;
	width: 100%;
	height: 100%;
	color:white;
	border-top:1px solid white;
	z-index:11;
}

.legende{
	position:absolute;
	top:20px;
	right:650px;
	font-size:16px;
	background-color:black;
	width:120px;
	text-align:center;
	z-index:3;
}

#bd_bas A{
color:white;
font-size:12px;
font-weight: normal;
}

/* ZONES UTILES  */

.zone{
	position:absolute;
	top: 0;
	left:100%;
	width:100%;
	height: 100%;
	z-index:2;
	background-color:black;
	overflow:hidden;
}

.outils{
	position:absolute;
	top: 100px;
	right:0;
	width:230px;
	height: 20px;
	padding:5px 10px 5px 10px;
	z-index:3;
	color:white;
	font-size:12px;
	background-color:#333333;
	overflow:hidden;
}
.outils A{
	display:block;
	float:left;
	color:white;
	font-size:13px;	
	text-decoration:none;
	cursor:pointer;
}
.outils_legende{
	position: absolute;
	top: 130px;
	right: 0;
	width: 230px;
	height: 460px;
	padding:5px 10px 5px 10px;	
	z-index: 3;
	color:white;
  font-size: 12px;	
	background-color: #999999;
	overflow: hidden;
}
.outils_legende A.lien_titre{
display:block;
	font-size: 14px;
	text-decoration: none;
	border-bottom:1px solid white;
	margin:3px 0 10px 0;
	cursor: pointer;
}

.outils_legende A{
	color:white;
	font-size:12px;	
	text-decoration:none;
}

A.lien_blanc{
	color:white;
	font-size:14px;	
	text-decoration:none;
}
/* ZONES EDITORIALE  */
#zone_editoriale{
	position:absolute;
	top: 100px;
	left:150px;;
	width:900px;
	height: 460px;
	z-index:2;
	padding:20px;
	background-color:white;
	color:black;
	overflow:auto;
   display:none;
}

#menu{
	position: absolute;
	top: -10px;
	left: 170px;
	width: 210px;
	height: 120px;
	z-index: 13;
	background-color: #1c1c1c;
	overflow: hidden;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	padding: 20px 0 3px 0;

}

#menu A{
	color: white;
	text-decoration: none;
	cursor: pointer;
	display: block;
	border-bottom: 1px solid #2f2f2f;
	font-size: 11px;
	font-weight: normal;
	height: 24px;
}
#menu A:hover{
	color:white;
	text-decoration:none;
	cursor:pointer;
	display:block;
	border-bottom:1px solid white;
	font-size:12px;
	font-weight:normal;
	background-color: #303030;
}
.cadre_auteur{
	float: left;
	width: 250px;
	height: 160px;
	background-color: #e8e8e8;
	overflow: hidden;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	padding: 10px;
	margin:10px;
	font-size:12px;
	text-align:justify;
}

A.lien_noir{
	color:black;
	font-size:18px;	
	text-decoration:none;
}

A.lien_pieds{
	font-size:10px;
	cursor: pointer;
}
A.lien_pieds:hover{
	text-decoration:none;
}

A.lien_rond
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	display:block;
	float:left;
	font-size:14px;
	border:1px solid black;
	background-color:#D0D0D0;
	padding:6px;
	margin:5px;
	width:25px;
	text-align:center;
	cursor: pointer;	
}
A.lien_rond:HOVER
{
text-decoration: none;
color:red;
}

A.plien_rond
{
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: block;
	float: left;
	font-size: 11px;
	border: 1px solid black;
	background-color: #555555;
	padding: 4px;
	margin: 3px;
	text-align: center;
}
/* ZONES RESSOURCES  */
/* Ecran choix du thème */
.theme{
	position:relative;
	width:90%;
	max-width:300px;
	margin:10px auto;
	height: 160px;

	z-index: 2;
	overflow:hidden;
}

.theme img{
	width:100%;
	}
.legende_theme{
	position: absolute;
	cursor: pointer;
	left:0;
	bottom:0;
   cursor:pointer;
	width: 100%;
	height: 45px;
	z-index:3;
}
.legende_theme_texte{
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	color: white;
	font-size: 18px;
	z-index:4;
	padding:10px 10px 10px 10px;
}
.legende_theme_fond{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height: 100%;
	background-color:black;
	opacity : 0.5;
	filter : alpha(opacity=50);	
	z-index: 3;
}


/* ZONES RESSOURCES  */
/* Ecran des ressources*/
#res_multimedia{
	position: absolute;
	right: 250px;
	top: 0;
	width: 250px;
	height: 500px;
	background-color: #242424;
	z-index: 3;	
}

.onglet{
	padding: 8px 0 0 5px;
	float: left;
	width: 120px;
	cursor: pointer;
	height: 22px;
	background-color: #4f4f4f;
}

.onglet:hover{
	background-color: #434343;
}

.divinterview{
   position:relative;
	opacity : 0.6;
	filter : alpha(opacity=60);	
	border-bottom:1px solid white;
	padding:6px 6px 6px 80px;
	font-size:12px;
	cursor:pointer;
	height:60px;
	overflow:hidden
}

.divinterview:hover{
	opacity : 1;
	filter : alpha(opacity=100);	
	border-bottom:1px solid white;
}

.titre_multimedia {
	position:absolute;
	left:0;
	top:20px;
	width:100%;
	height:100%;
	font-size:20px;
	color:gray;
	background-color:black;
	opacity : 0.5;
	filter : alpha(opacity=50);		
}
.logo_ressource{
	width:100%;

}

A.groslien_blanc,
.titre_multimedia A{
font-size:20px;
color:white;
}

#res_diaporama{
	position: absolute;
	left: 0;
	top: 0;
	width: 500px;
	height: 500px;
	z-index: 3;	
}

#zone_uneressource{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

#legende_auteur{
	position: absolute;
	top: 30px;
	right: 0;
	width: 230px;
	height: 450px;
	padding:10px;
	z-index: 3;
	background-color: #999999;
	overflow: hidden;
	color:white;
}
#cartouche_auteur{
	position: absolute;
	top: 0;
	right: 0;
	width:400px;
	height: 480px;
	padding:10px;	
	z-index: 5;
	color:white;	
	background-color: #999999;
	overflow: hidden;
	display:none;
}

#uneressource{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	overflow: hidden;
}



/* ZONES CARTE  */
#info_plan,#info_prison,#info_chiffres{
	position: absolute;
	padding:28px 10px 10px 10px;
	top: 100px;
	right: 0;
	width: 400px;
	height: 462px;
	z-index: 4;
	display: none;
	overflow: auto;
	background-color: #999999;
	color:white;
}

#info_plan A,#info_prison A{
	color:white;
}
#info_chiffres A{
	color:white;
}
#texte_prison {
	position: absolute;
	top: 100px;
	left: 100px;
	width: 350px;
	z-index: 100;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: none;
	font-style: italic;

}
#texte_prison1 {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 100;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background-color: black;
	opacity:0.8;
}
#texte_prison2 {
	position: relative;
	width: 90%;
	height: 95%;
	padding:10px 5px 10px 20px;
	z-index: 101;
	color: white;
}
#texte_prison2 A{
	color: white;
	font-size: 9px;
	float: right;
	text-decoration: none;
}
.titre_prison {
 font-size:25px;
 color:white;
}
.carte_chiffre
{
	font-size: 40px;
	font-weight: bold;
	text-align:center;
}



/*  ZONE PLAN  */
#texte_plan {
	position: absolute;
	top: 130px;
	left: 100px;
	width: 300px;
	height: 350px;
   z-index:5;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	display: none;
}
#texte_plan1 {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity:0.8;
}
#texte_plan2 {
	position: relative;
	width: 98%;
	padding: 8px;
	color: white;
	font-size:12px;
	overflow:visible;
}
#texte_plan3 {
	position: relative;
	width: 98%;
	padding: 5px;
	color: white;
	font-size: 12px;
	overflow: hidden;
}


/*  ZONE CHIFFRES  */
.chiffre{
	position:absolute;
	width:370px;
	height: 220px;
	background-color:gray;
	opacity : 0.7;
	filter : alpha(opacity=70);	
	z-index: 2;
}
.legende_chiffre{
	position: absolute;
	left:0;
	bottom:0;
	width: 100%;
	height: 45px;
	z-index:3;
}
.legende_chiffre_ex{
	position: absolute;
	display:none;
	left:0;
	top:0;
	width: 350px;
	height: 155px;
	z-index:3;
	background-color:#dbff44;
	padding:10px;
	cursor: pointer;
	overflow: hidden;
	color:black;
}
.legende_chiffre_texte{
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	color: white;
	font-size: 18px;
	z-index:4;
	padding:10px 10px 10px 10px;
}

.legende_chiffre_texte A{
text-decoration:none;
font-size:25px;
color:white;
}

.legende_chiffre_fond{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height: 100%;
	background-color:black;
	opacity : 0.3;
	filter : alpha(opacity=30);	
	z-index: 3;
}

A.bouton_chiffre{
float:left;
width:30px;
height:26px;
	font-size:16px;
	text-align:center;
	
}

A.bouton_chiffre:hover{
background-color:#545454;
	
}

A.spip_out{
color:white;
text-decoration:underline;
	
}