/*------------------------------------------------------*
  *---------    ICARE-NET.COM - agence web ---  CSS  ----*
  *------------------------------------------------------*/

html, body
                {width: 100%;height: 100%;margin: 0 auto;}
.hide           {display: none;}
body            {background: black;color: #000;margin: 0; padding: 0;
                font: 12px Verdana, Arial, Helvetica, sans-serif; text-align: center;}
/* On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body*/
img             {border:0 none}
hr              {visibility: hidden;text-align:center;height:30px;width:100px}
ol, ul, li      {margin: 0; padding: 0;}
/* ------------ CONTENEUR GLOBAL ------------------------*/
#general        {height: auto;text-align: left;position: absolute;width: 850px;left: 50%;margin-left: -390px;}

form, input     {margin: 0px;padding: 0px;}
select          {color: #000;background-color: #fff;}
p               {margin: 0px;padding: 0px;}

img             {border:0;margin:0;padding:0;}

 /*------------------------------------------------------*
  *-------------------------------     CSS BLOCS     ----*
  *------------------------------------------------------*/

/*Haut de page*/

#header{
	margin:0;
	padding:0;
	width:850px;
	height:auto;
	background-color: white;
}
#header p       {margin: 0; padding: 0;}
#header a       {color:#fff;text-decoration:none;}
#header a:hover {color:#ccc;}
#header img     {border:0;margin:0;padding:0;}

/*
*********************** Index
*/
#home                   {
	float:left;
	background-color:#54575e;
	margin: 20px;
	height: 300px;
	width: 610px;
}
#home a            {
	width: 150px;
	height: 150px;
	float:left;
	display: block;
	padding: 0;
	margin: 0px;
	border: 1px solid #fff;
}
#home a:hover      {border: 1px solid #54575e}
#qui                  {
	background: url(../images/deco/bg_qui.jpg) no-repeat 0 0;
}
#qui:hover            {
	background: url(../images/deco/bg_qui.jpg) no-repeat 0 -150px;
}
#etat                 {background: url(../images/deco/bg_etat.jpg) no-repeat 0 0 ;}
#etat:hover           {background: url(../images/deco/bg_etat.jpg) no-repeat 0 -150px ;}
#recommandation       {background: url(../images/deco/bg_recommandation.jpg) no-repeat 0 0 ; }
#recommandation:hover {background: url(../images/deco/bg_recommandation.jpg) no-repeat 0 -150px ;}
#plan                 {background: url(../images/deco/bg_plan.jpg) no-repeat 0 0 ;}
#plan:hover           {background: url(../images/deco/bg_plan.jpg) no-repeat 0 -150px ;}
#accomp               {background: url(../images/deco/bg_accomp.jpg) no-repeat 0 0 ; }
#accomp:hover         {background: url(../images/deco/bg_accomp.jpg) no-repeat 0 -150px ;}
#formation            {background: url(../images/deco/bg_formation.jpg) no-repeat 0 0 ; }
#formation:hover      {background: url(../images/deco/bg_formation.jpg) no-repeat 0 -150px ;}
#calendrier           {background: url(../images/deco/bg_calendrier.jpg) no-repeat 0 0 ; }
#calendrier:hover     {background: url(../images/deco/bg_calendrier.jpg) no-repeat 0 -150px ;}
#references           {background: url(../images/deco/bg_references.jpg) no-repeat 0 0 ; }
#references:hover     {background: url(../images/deco/bg_references.jpg) no-repeat 0 -150px ;}
/*Contenu de page*/

#content {
	margin:0 auto;
	padding:0;
	width: 850px;
	height: auto;
	background: #efefef url(../images/deco/fondpage.jpg) repeat-x;
}
#content li     {margin-right: 40px;list-style-image: url(../images/deco/puce.gif) ;}
#content p      {margin: 0 40px 0 20px;padding-left: 0px;text-align: justify;}
#content h1     {background: #fff url(../images/deco/imgh2.gif) right no-repeat;font-size: 2em;margin: 0 52px;
                color: #eeaf00;border-bottom:1px solid #fff;}
#content h2     {background: #fff url(../images/deco/imgh2.gif) right no-repeat;font-size: 2em;margin: 0 52px;
                color: #eeaf00;border-bottom:1px solid #fff;}
#content h3     {font-size: 1.5em;margin: 10px 10px 0px 20px;padding: 0px;color:#666}
#content h4     {margin: 10px 10px 5px 20px;padding: 0px;color:#fc0;}

#content_home {
	width: 850px;
	height: auto;
	background-color:#54575e;
}
#content_home h1 {
	background-color: #EFAE00;
	font-size: 1.5em;
	text-align: center;
	letter-spacing: 0.4em;
	font-weight: bold;
	height:25px;
	color:#ffffff;
	width: 750px;
	margin-left:50px;
}

#left_content{
background-color:#3D3E45;
width:195px;
height:auto;
position:relative;
float:left;
}

#player-video{
}


 /********** Liste Menu Top ************************/
#menu           {background:#3d3e45;position:absolute;width:195px;height:auto;}
#menu ul, #menu_presentation ul, #menu_references  ul        {margin: 0 5px;
                  list-style-type: none ;}
/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond*/
#menu li, #menu_presentation li, #menu_references  li      {text-align: left ;padding: 5px}
/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */
#menu li a, #menu_presentation li a, #menu_references  li a    {height: 30px;padding: 5px;font-size: 8pt ;width: 120px ;line-height: 20px;letter-spacing: 1px ;
                color: #fff;text-decoration: none ;background-color: #666}
/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */
#menu a:hover, #menu_presentation a:hover, #menu_references  a:hover {color: #000;background: #efefef url(../images/deco/hover.jpg) no-repeat center;}


#menu_references           {background:#3d3e45;position:absolute;width:195px;height:680px;}

#menu_presentation           {background:#3d3e45;position:absolute;width:195px;height:770px;}
/********** Fin Liste Menu Top ********************/


/*Bas de page*/

#footer{
  color:#efefef;
  background: url(../images/deco/fondfoot.jpg) no-repeat bottom;
  text-align: justify;
	margin:0 auto;
	padding:0;
	width:850px;
	height:auto;
	clear:both;
}
#footer a       {color:#efefef;text-decoration:none;}
#footer a:hover {color:#EFAE00;background:#888}


/*clear*/

.clear {
   clear: both;
   overflow: hidden;
   width: 1px;
   height: 1px;
   margin: 0 -1px -1px 0;
   border: 0;
   padding: 0;
   font-size: 0;
   line-height: 0;
}

 /*------------------------------------------------------*
  *-------------------------------     CSS PLANS     ----*
  *------------------------------------------------------*/

/*page plans*/
#divmail{
  float:right;
  background: #666;
  margin:0;
  padding-size:0;
  text-align:center;
  width:360px;
  height:500px;
}
#divmail p    {font-size:1.2em;color:#efefef;text-align:left;margin-left:50px}

#divplan {
  float:left;
  background: #666;
  margin:0;
  padding:0 0 0 202px;
  text-align:center;
  width:280px;
  height:500px;
}
#divplan span {float:left;color:white;}
#divplan p    {text-align:center;margin: 0;padding:o}
#divplan h3   {margin: 0;padding: 0;color:#efefef}



#plan img {
 margin-top: 10px;
	margin-bottom: 10px;
}

/*pop up plans*/
#popup_plan {
  background:#efaf00;
  margin-top:20px;
	width: 570px;
	position: absolute;
	left: 50%;
	margin-left: -285px;
}

#popup_plan a {
	color:#666;
	text-decoration:none;
}

#popup_plan a:hover {
	color:#666;
}

#popup_plan img {
	border: 1px solid #333;
}




 /*------------------------------------------------------*
  *------------------------------     CSS TITRES     ----*
  *------------------------------------------------------*/

   h1 {
   	margin: 5px;
    padding: 5px;
	   color: #003;

  }

   h2 {
   	margin: 5px;
    padding: 5px;
	   color: #003;
  }

   h3 {
   	margin: 5px;
    padding: 0px;
  	 color:#f90;
  }

   h4 {
   	margin: 0px;
    padding: 0px;
  	 color:#000;
  }

   h5 {
   	margin: 0px;
    padding: 0px;
  	 color:#000;
  }

   h6 {
   	margin: 0px;
    padding: 0px;
  	 color:#000;
  }



 /*-----------------------------------------------------------*
  *-----------------------------------     CSS EFFETS     ----*
  *-----------------------------------------------------------*/

#zone {
	margin:5px;
	width: 300px;
	height: 250px;
	overflow: auto;
	}


.transparence {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	opacity: 0.5;
	}
	
#logo_home {
	float:left;
	width:200px;
	height:300px;
	}
	
#news {
	background-image:url(../images/home/news_off.jpg);
	float:left;
	margin:20px 0 0;
	height:100px;
	width:200px;
}

#news:hover {
	background-image: url(../images/home/news_on.jpg);
	}

#nouveaute {
	background-image:url(../images/home/nouveaute_off.jpg);
	float:left;
	margin:50px 0 0;
	height:100px;
	width:198px;
	}

#nouveaute:hover {
	background-image:url(../images/home/nouveaute_on.jpg);
	}
	
#div_presse dt {
	color: #FFFFFF;
	background-color: #EDB101;
	padding: 3px;
}
#div_presse {
	margin: 5px;
	padding: 3px;
	float: left;
	width:300px;
	border: 1px solid #ccc;
}
#div_presse .apercu {
	margin: 3px;
	padding: 0px;
	float: left;
}
#div_presse a {
	color: #796F54;
	font-weight: bold;
	margin: 25px 0;
	display: block;
	text-decoration: none;
	text-align: center;
}
#div_presse h3 {
	color: #333333;
	background-color: #F8DD98;
	padding: 5px;
	text-align: right;
	font-size: 14px;
}

#list1 li{
	padding:0;
	margin:0 0 10px 0;
}
#plan
{
	width:270px;
	height:400px;
	text-align:center
}
.agrandir-plan
{
	color:#FFFFFF;
	text-decoration:none;
	text-transform:uppercase;
}