/*-----------------------TOUT-----------------------------------*/

* {font-family: Verdana, Helvetica, sans-serif;  padding: 0; margin: 0; border: 0;}

/*-----------------------TOUT-----------------------------------*/

/*-----------------------LINK-----------------------------------*/

a, a:link { 
	font-weight :bold;
    text-decoration: none;
    color: #000000;
}
a:visited { color: #333333; }
a:hover { color: #000; text-decoration: underline;}
a:active { color: #000000; border-color: #000000 }

/*-----------------------LINK-----------------------------------*/


/*-----------------------PAGE-----------------------------------*/

html{background: #fff url(images/bg.jpg) repeat-x top left;}


body { margin:0 20px;
       width:780px;
 	   padding-top:5px;
 	   margin-right: auto;
 	   margin-left: auto;}
/*-----------------------PAGE-----------------------------------*/

/*-----------------------BANNER-----------------------------------*/

#banner { background: #ffffff url(images/header.jpg) no-repeat top left;
		  height:122px;}
 
#banner h1 { padding:10px; }

/*-----------------------BANNER-----------------------------------*/


  
/*-----------------------SIDEBAR-----------------------------------*/
		   
#sidebar, #sidebar ul { /* toutes les listes */
	font-size:13px;
	padding: 0;
	margin: 0;
	list-style: none;
	text-decoration:none;
	line-height: 1;
}

#sidebar a {
	display: block;
	width: 170px;
	height:30px;
}

#sidebar li { /* tous les items de liste */
	float: right;
	width: 170px;
	height:30px; 
}

#sidebar li ul { /* listes de deuxième niveau */
	margin-top:-11px;
	position: absolute;
	width: 169px;
	left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
}

#sidebar li:hover ul, #sidebar li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
	left: auto;
}
#sidebar ul li ul a {color:#fff;	background:#000;} 
#sidebar ul a {color:#fff; text-align:center; background: url(images/btn-menu.jpg);} 

/*-----------------------SIDEBAR-----------------------------------*/

/*-----------------------Footer-----------------------------------*/		   

#footer {padding-top:20px;
          clear:both;
          width:780px;
		  font-size:9px;
		  height:20px;}
		  
#footer p{
		  color:#333333;
		  text-align:center;}

/*-----------------------Footer-----------------------------------*/

#illustration {width:789px;
			   height:163px;
			   background: url(images/herbe.jpg) top right;
			   margin-top:40px;}

#box {padding-top:20px;}
			 
#box h2{color:#339933;
		padding-top:20px;
		padding-bottom:10px;
		padding-left:200px;
		font-size: 14px;
		font-weight :bold;}
		
#box ul{padding-left:200px;
        font-size: 12px;
        color: #333333;
        font-weight :bold;}
        
#box ul li{list-style: none;
		   padding-left: 1.5em;
		   padding-bottom:4px;
           background: url(images/puce.jpg) no-repeat 0 4px;}
			 
#boxuleft {width:377px;
		   height:156px;
		   background: url(images/webdesign.jpg);
		   float:left;
		   border-style:solid; 
           border-width:2px; 
           border-color:#339933;}
           
#boxuright {width:377px;
		   height:156px;
		   background: url(images/animation.jpg);
		   float:right;
		   margin-left:15px;
		   border-style:solid; 
           border-width:2px; 
           border-color:#339933;}
           
#boxup {height:176px;}

#boxdleft {width:377px;
		   height:156px;
		   background: url(images/3D.jpg);
		   float:left;
		   border-style:solid; 
           border-width:2px; 
           border-color:#339933;}
           
#boxdright {width:377px;
		   height:156px;
		   background: url(images/2D.jpg);
		   float:right;
		   border-style:solid; 
           border-width:2px; 
           border-color:#339933;}