body{
    background: #000000 url(fd.png);
	width: 955px;
	height: 603px;
	background-repeat: no-repeat;
    padding: 0;
	margin: 0;
    font: 16pt "Trebuchet MS", Tahoma, Arial;
    color: #888888;
}

a{
    color: #CC66CC;
    text-decoration: none;
}

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


h1, h2{
    color: #793f91;
    font: 100% "Trebuchet MS", Tahoma, Arial;
	border-bottom: 1px dotted #793f91;
    margin: 5px 0 0 5px;
}

h3{
    color: #793f91;
    font: 80% "Trebuchet MS", Tahoma, Arial;
	border-bottom: 1px dotted #793f91;
    margin: 5px 0 0 5px;
}

p{
    font: 70% "Trebuchet MS", Tahoma, Arial;
    padding: 0 0 5px 0;
    text-align: justify;
    color: #888888;
}

#main_container{
    margin-top: px;
	
}

/* header area */
#header{
    width:955px;
    height: 138px;
	margin-left: px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
    margin-bottom: 10px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
    top: 0px;
}

#header h1{
    color: #591376;
    font: 180% Impact, Arial, Tahoma ;
	border-bottom: 0px dotted #591376;
    margin: 33px 0 5px 20px;
    float: center;
}

#header h1 a{
    color: #591376;
}

#header h1 a:hover{
    color: #cc66cc;
}

/* navigation */
#side_nav{
    width: 225px;
	margin-left:px;
}

#side_nav ul{
    list-style: none;
    margin: 0px;
    padding-left: 50px;
}

#side_nav li{
    display: block;
    float: left;
}

#side_nav img, #side_nav img a{
    border: 0px;
}

img:hover.about_nav{
    padding-right: 6px;
    
    height: 100%;
}
img:hover.gallery_nav{
    padding-right: 6px;
    
    height: 100%;
}
img:hover.contact_nav{
    padding-right: 6px;
    
    height: 100%;
}

/* container */
#container{
    width: 710px;
	height: 430px;
	position: absolute;
    margin-left: 235px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom:px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    overflow: auto;
}
p.date {
	font-size:10px; 
	color:#FF7F00; 
	margin:0; 
	padding-left:15px; 
	background:url("") left no-repeat;
}

/* footer */
#footer{
    width: 445px;
    margin-left: 225px;
    margin-top: 442px;
}

#footer p{
    font: 50% Tahoma, Arial;
    color: #CCCCCC;
    text-align: right;
    padding-right: 20px;
    margin: 0px;
}
#footer a{
	color: #000000;
}
#footer a:hover{
	color: #ffffff;
}

/* footer */
#pub{
    width: 445px;
    margin-left: 225px;
    margin-top: 30px;
}



/* all images */
img.img_border, a img.img_border{
    border: 2px solid #9b0222;
    float: left;
    margin: 0 10px 0 0;
}

a:hover img.img_border{
    border: 2px solid #9b02ff;
}

img.img_new, a img.img_new{
    border: 2px solid #9b0222;
    float: left;
    margin: 0 10px 0 0;
	width: 220px;
    height: 182px;
}

a:hover img.img_new{
    border: 2px solid #9b02ff;
	
}



/* gallery */
#gallery{
    width: 100px;
    height: 130px;
    margin: 16px;
}

#gallery h3{
    font: 70% impact, Tahoma, Arial;
    color: #888888;
    text-align: center;
    margin: 0px;
    padding-bottom: 10px;
    border-bottom: 0px;
}

.gallery_ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: inline;
}

.gallery_ul li{
    float: left;
}

#gallery img{
    width: 100px;
    height: 100px;
}
#gallery img.img_border, #gallery a img.img_border{
    border: 2px solid #9b0222;
    float: left;
    margin: 0px;
}

#gallery a:hover img.img_border{
    border: 3px solid #9b02ff;
}


a.info {
   position: relative;
   color: red;
   text-decoration: none;
   border-bottom: 1px gray dotted; /* on souligne le texte */
}
a.info span {
   display: none; /* on masque l'infobulle */
}
a.info:hover {
   background: none; /* correction d'un bug IE */
   z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

   cursor: pointer; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
   display: inline; /* on affiche l'infobulle */
   position: absolute;

   white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

   top: 30px; /* on positionne notre infobulle */
   left: 20px;

   background: white;

   color: red;
   padding: 3px;

   border: 1px solid red;
   border-left: 4px solid red;
}