body
{
	background-image: url(../images/fond.gif);
	background-repeat: repeat-x;
	background-color: #f8b374;
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#haut {
padding: 0;
background-image: url(../images/top.jpg);
width: 978px;
height: 206px;
}
#conteneur {
position: relative;
width: 978px;
margin: 0 auto; 
}
#centre {
background-color:#fff;
margin-left: 59px;
border-left: #000000 solid 1px;
border-right: #000000 solid 1px;
width: 821px;
height: 360px;
vertical-align: top;
}
#bas {
padding: 0;
background-image: url(../images/bottom.jpg);
width: 978px;
height: 206px;
}
#droite {
	
	width: 204px;
	margin-left: 613px;
	height: 320px;
	padding: 2px;
	position:absolute;

	
}
#gauche {
	width: 400px;
	height: 360px;
	padding: 2px;
	position:absolute;
	float: left;
	vertical-align:top;
}
#gauchesans {
	width: 600px;
	height: 360px;
	padding: 2px;
	position:absolute;
	float: left;
	vertical-align:top;
}
#cadre_hasard {
	width: 550px;
	height: 120px;
	border: #000000 solid 1px;
	margin-left: 45px;
	/*float:none;*/
	background-color: #FFEFDF;
}

#tendance {
	width: 550px;
	height: 180px;
	border: #000000 solid 1px;
	margin-left: 45px;
	float:none;
	background-color: #FFEFDF;
}

#recette {
	width: 550px;
	height: 370px;
	border: #000000 solid 1px;
	margin-left: 45px;
	/*float:none;*/
	background-color: #FFEFDF;
	overflow:auto;
	scrollbar-face-color: #f8b374;
    scrollbar-shadow-color: #521B1B;
    scrollbar-highlight-color: #D37C7C;
    scrollbar-3dlight-color: #FFEFDF;
    scrollbar-darkshadow-color: #000000;
    scrollbar-arrow-color: #FFFFFF;
	scrollbar-track-color: #FFFFFF;
}

a.menu:link { color:#666666; text-decoration: none; font-weight:bold;font-size:10px;}
a.menu:visited { color:#666666; text-decoration: none; font-weight:bold;font-size:10px;}
a.menu:hover { color:#666666; text-decoration: underline; font-weight:bold;font-size:10px;}
a.menu:active { color:#666666; text-decoration: none; font-weight:bold;font-size:10px;}

a.cat:link { color:#cd894b; text-decoration: none; font-weight:bold;font-size:12px;}
a.cat:visited { color:#cd894b; text-decoration: none; font-weight:bold;font-size:12px;}
a.cat:hover { color:#cd894b; text-decoration: underline; font-weight:bold;font-size:12px;}
a.cat:active { color:#cd894b; text-decoration: none; font-weight:bold;font-size:12px;}

a.perso:link { color:#bbbcc3; text-decoration: none; font-weight:bold;font-size:10px;}
a.perso:visited { color:#bbbcc3; text-decoration: none; font-weight:bold;font-size:10px;}
a.perso:hover { color:#bbbcc3; text-decoration: underline; font-weight:bold;font-size:10px;}
a.perso:active { color:#bbbcc3; text-decoration: none; font-weight:bold;font-size:10px;}


ul#rec
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#rec li
{
	margin: 0 0 0 0 ;
	padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}
ul#rec li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 100px ;
	line-height: 40px ;
	color: #000 ;
	text-indent: 40px ; /* On décale le texte de 40px du bord gauche */

	text-decoration: none ;
	background: url(../images/valider.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}

ul#rec li a:hover
{
	background: url(../images/valider.jpg) no-repeat 0 -40px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

ul#rec2
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#rec2 li
{
	margin: 0 0 0 0 ;
	padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

ul#rec2 li a.print
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 50px ;
	line-height: 50px ;
	color: #000 ;
	text-indent: 40px ; /* On décale le texte de 40px du bord gauche */

	text-decoration: none ;
	background: url(../images/print.gif) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}

ul#rec2 li a.print:hover
{
	background: url(../images/print.gif) no-repeat 0 -50px ; /* Et ici on décale l'image du background de 50px vers le haut pour laisser apparaître la 2eme partie de l'image */
}
	
ul#com
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#com li
{
	margin: 0 0 0 0 ;
	padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

ul#com li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 100px ;
	line-height: 30px ;
	color: #000 ;
	text-indent: 40px ; /* On décale le texte de 40px du bord gauche */

	text-decoration: none ;
	background: url(../images/okcomment.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}

ul#com li a:hover
{
	background: url(../images/okcomment.jpg) no-repeat 0 -30px ; /* Et ici on décale l'image du background de 50px vers le haut pour laisser apparaître la 2eme partie de l'image */
}
		
		
ul#forum
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#forum li
{
	margin: 0 0 0 0 ;
	padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

ul#forum li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 96px ;
	line-height: 77px ;
	color: #000 ;
	text-indent: 40px ; /* On décale le texte de 40px du bord gauche */

	text-decoration: none ;
	background: url(../images/forum.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}

ul#forum li a:hover
{
	background: url(../images/forum.jpg) no-repeat 0 -77px ; /* Et ici on décale l'image du background de 50px vers le haut pour laisser apparaître la 2eme partie de l'image */
}