/*
Design d'exemple du Site du Zér0
Réalisé par zaz, venom et mateo21
<lien url="http://www.siteduzero.com">http://www.siteduzero.com</lien>
*/

img
{
  border : none;  
  
}

   
h4
{
         font-size: 14px ;
   font-family: arial ;
  color : #9bfa08;  
  margin: 5px;
   }
p
{
	font-size: 12px;
	font-family: arial;
	color :white;
	margin: 5px;
	border-top-style: 0;
	border-right-style: 0;
	border-bottom-style: 0;
	border-left-style: 0;
	border-top-color: #999999;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #999999;
   }
   
h1
{
         font-size: 18px ;
   font-family: arial ;
  color :white;  
  margin: 5px;
   }
   
   h3
{
         font-size: 18px ;
   font-family: arial ;
  color : #9bfa08;  
  margin: 5px;
   }
body
{
   width: 1020px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;  
      background-image: url("images/fond.jpg");  
	  background-attachment:fixed;


}

/* L'en-tête */

#en_tete
{
	width: 1020px;
	height: 35px;
	background-repeat: no-repeat;
	margin-bottom: 10px;
	background-color: black;
	filter: Alpha(opacity=80);
	-moz-opacity: .80;

  -khtml-opacity: 0.800
 opacity: .85;   
	font-size: 14px;
	font-family: arial;
	color :silver;
	padding-right: 0px;
	line-height: 35px;
	vertical-align: middle;
  
 
}

#en_tete img
{
     padding-top: 8px;
   line-height: 35px;
  vertical-align: middle;
  float: right;
  border: solid;
  border: 5px;
   border: black;
}


.en_tete a:hover
{
   
   color: white;
}

a
{
   color: #bdbdbd;
   hover: white;
   text-decoration: none 
}

a:hover
{

   color: white;
}
a:active
{

   color: #9ae100;
}


#cadrecorps
{
	float: left;
	width: 720px;
	height: 700px;
	
	
	padding: 15px;
	
	background-image: url(images/motif.png);
	background-repeat: repeat-x;
	border: 2px none black;
	margin-bottom: 5px;
	
background-color: black;

  filter: Alpha(opacity=80);
   -moz-opacity: .80;
  -khtml-opacity: 0.80;
 opacity: .80;   
 
}

#corps
{
	float: left;
	width: 740px;
	background-image: url(images/motif.png);
	background-repeat: repeat-x;
	border: 2px none black;
	margin-bottom: 5px;
	background-color: #202020;
	padding-top: 15px;
	padding-right: 5px;
	padding-bottom: 15px;
	padding-left: 15px;

	
  
 
}

#corps img
{
	filter: Alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
}




/* Quelques effets sur les menus */


.element_menu h3
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul
{
   list-style-image: url("images/puce.png");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}


#new
{
	float: left;
	width: 245px;
	height: 222px;

	border: 14px solid black;
	margin-bottom: 5px;
background-color: #272727;
  filter: Alpha(opacity=80);
   -moz-opacity: .80;
  -khtml-opacity: 0.80;
 opacity: .80;   
}

#let
{
	width: 235px;
	height: 232px;
	margin: 15px;
		background-color: white;

 
         font-size: 14px ;
   font-family: arial ;
  color :white;   
	

}

#ecoute
{
	
	margin-top: -120px;
			

}
#zonetexte
{
width: 235px;
	height: 232px;
	
	
padding-top: 5px;
	margin-: 15px;

	

 
         font-size: 14px ;
   font-family: arial ;
  color :white;   
	

}




#actu
{
	height: 250px;
	width: 740px;
	float:right;
	margin-left: 5px;
	margin-bottom: 5px;
	
	color: #B3B3B3;
		background-image: url("images/actu.jpg.");
}


#case
{
	margin-left: 5px;
	margin-bottom: 5px;
	font-size: 14px;
	font-family: arial;
	color :white;
	color: #B3B3B3;
	border: 2px none black;
	height: 170px;
	width: 245px;
	float: right;
	background-color: #202020;
	

}
#case img
{

  filter: Alpha(opacity=100);
   -moz-opacity: 1.00;
  -khtml-opacity: 1.00;
 opacity: 1.00;   
}





#corps h1
{
   color: #B3B3B3;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
   height: 30px;

   background-image: url("images/titre.png");
   background-repeat: no-repeat;
   
   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}


/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */



#pied_de_page
{
	float: bottom;
	width: 980px;
	height: 35px;

	margin-bottom: 10px;
padding: 5px;
background-color: black;
  filter: Alpha(opacity=80);
   -moz-opacity: .80;
  -khtml-opacity: 0.800
 opacity: .85;   
 
        font-size: 14px ;
   font-family: arial ;
  color :silver;   


  padding-left: 10px;
  padding-right: 10px;
  
	
  line-height: 35px;
  vertical-align: middle;
  
 
}

.image_supprimer_input
{
background-image:url("images/abdelete.gif");
}

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 100%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 500px; background-color: #000; }

   
a.info_bulle
{				
  color           : #2F368A;
  
  text-decoration : none; 
  
  padding         : 2px 16px 2px 2px; /*Définition des marges intérieures de notre lien */
  
  /* Définition de l'arrière plan de notre lien */
  background      : transparent url('comment.gif') no-repeat right center;
  
  position        : relative; /* Indispensable pour le bon positionnement de l'info-bulle */ 
}  
 
a.info_bulle:hover 
{
  border          : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
} 

/* Rend invisible tout notre bloc span */
a.info_bulle span.info_bulle 
{								   
  position   :  absolute;
  top        :  -2000em;
  left       :  -2000em;
  width      :  100px;
  height     :  100px;
  overflow   :  hidden; 
} 

/* Rend visible tout notre bloc span et lui attribue une taille */
a.info_bulle:hover span.info_bulle, a.info_bulle:focus span.info_bulle, a.info_bulle:active span.info_bulle
{
  top        :  auto;
  left       :  auto;
  width      :  220px;
  height     :  auto;
  overflow   :  visible;
} 

span.header
{
   display         : block; 
   height          : 35px;  /* Hauteur correspondant à celle de notre image */
   line-height     : 220%;  /* Propriété qui centrera le texte verticalement */
   text-align      : center;
   background      : transparent url('./top.gif') no-repeat 0 0; 
   font-size       : 15px; 
   font-weight     : bold;
} 

span.content
{
   display     : block; 
   background  : transparent url('./centre.gif') repeat-y;
   padding     : 0 8px;
} 

span.footer
{
   display     : block; 
   height      : 5px; 
   background  : url('./bot.gif') no-repeat bottom left; 
   font-size   : 0; /* Corrige l'espacement inutile sous IE */
}         
                

#texteactualite
{
	margin-left: 75px;
	margin-top: -360px;
 color: white;
  width      :  599px;
 
}

#ensavoirplus
{
	margin-left: 487px;

 
}

/*Le menu deroulant */

#menu, #menu ul /* Liste */     
{
	padding : 0; /* pas de marge intérieure */
	margin : 0px; /* ni extérieure */
	list-style : none; /* on supprime le style par défaut de la liste */
	line-height : 35px; /* on définit une hauteur pour chaque élément */
	text-align : center; /* on centre le texte qui se trouve dans la liste */
	font-size: 12px;
}

#menu /* Ensemble du menu */
{
	font-weight : normal; /* on met le texte en gras */
	font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
	font-size : 14px; /* hauteur du texte : 12 pixels */
}

#menu a /* Contenu des listes */
{
	display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
	padding : 0; /* aucune marge intérieure */
	background : #000000; /* couleur de fond */
	color : #bdbdbd; /* couleur du texte */
	text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
	width : 110px; /* largeur */
}

#menu li /* Elements des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}


#menu li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#menu li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}

#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #fff; /* On passe le texte en noir... */
        background: #202020; /* ... et au contraire, le fond en blanc */
}

#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}