body {
	margin: 0px;
	background-color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

#hdr {
width: 800px;
height: 558px;

margin-left: auto;
margin-right: auto;
background-image: url(../pagedegarde2.JPG);
background-repeat: no;
}
#left ul {   /* defined as left because the nav is in the left div */
margin: 33px 0 0 0;  /* top margin brings the menu down slightly */
list-style: none;
padding: 0;
width: 160px;
}

#left li {
border: 0;
padding: 0;
margin: 0;
display: inline /* fix for IE 5 & 6 */
}



#left li.rouge {
position:absolute;
top:290px;
margin-left:100px;
}
#left li.vert {
position:absolute;
top:400px;
margin-left:430px;
}
#left li.bleu {
position:absolute;
top:120px;
margin-left:400px;
}
#left a {  /* these "a" styles define the main text that appears when the main links are hovered over */
display: block;
border: 0;
padding: 3px;
margin: 0;
font-family: Georgia, serif;
font-size: 15px;
text-decoration: none;
letter-spacing: 3px;
width: 150px;
height: 100px;
}
#left a:hover, #left a:active { /* these "a" styles define the main text that appears when the main links are hovered over */
padding-left: 10px;
color: #EEAB36;
background-position: 0% 25%;
background-color: #444444;


}

#left span.comment {   /* the .comment style defines the small text that appears when the links are hovered over */
margin: 0;
padding: 0;
color: #444444;
font-size: 10px;
background: none;
letter-spacing: 0;
visibility: hidden;
}


#left a:hover span.comment  {  /* the .comment style defines the small text that appears when the links are hovered over */
margin: 0;
padding: 0;
color: #ffffff;
font-size: 10px;
background: none;
letter-spacing: 0;
visibility: visible;
}
/* PUTAIN DE IE7*/
*+html  #left li.rouge {
list-style: none;
top:290px;
margin-left:100px;
}
*+html #left li.vert {
list-style: none;
top:400px;
margin-left:430px;
}
*+html #left li.bleu {
list-style: none;
top:120px;
margin-left:400px;
}
*+html #left a:hover, #left a:active { /* these "a" styles define the main text that appears when the main links are hovered over */
padding-left: 10px;
color: #EEAB36;
left:0px;
background-color: #444444;


}

*+html #left span.comment {   /* the .comment style defines the small text that appears when the links are hovered over */
margin: 0;
padding: 0;
color: #444444;
font-size: 10px;
background: none;
letter-spacing: 0;
visibility: hidden;
left:0px;
}


*+html#left a:hover span.comment  {  /* the .comment style defines the small text that appears when the links are hovered over */
left:0px;
color: #ffffff;
font-size: 10px;
background: none;
letter-spacing: 0;
visibility: visible
}