/* Stylesheet Layout */ 

/*************************************************************
Design
*************************************************************/

html {
 background: #8D8D8D url("../img/background.jpg") repeat-x;
 background-attachment: fixed;
}

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 width: 780px;
 margin: 0 auto 1em auto;
}

/* Design : Header */
body div.header {
	background-image: url("../img/header.png");
	background-repeat: no-repeat;
	height: 26px;
	margin: 0;
	padding: 0;
}

/* Design : Body */
body div.body {
	background-image: url("../img/body.png");
	background-repeat: repeat-y;
	height: auto;
	margin: 0;
	padding: 0;
}

/* Design : Footer */
body div.footer {
	background-image: url("../img/footer.png");
	background-repeat: no-repeat;
	height: 8px;
	margin: 0;
	padding: 0;
}

div.bandeau {
 background-image: url("../img/bandeau.jpg");
 background-repeat: no-repeat;
 height: 115px;
 }

/*************************************************************
Menu
*************************************************************/

#menu {
 font-size:90%;
 margin-top: 83px;
 float:left;
 width:100%;
 line-height:normal;
 
 /* Image qui souligne le menu */
 
 background:url("../img/bg.gif") repeat-x bottom;
 }

#menu ul {
 margin:0;
 padding:10px 20px 0;
 list-style:none;
}

#menu li {
 display:inline;
 margin:0;
 padding:0;
 }

#menu a {
 float:left;
 margin:0;
 padding:0 0 0 9px;
 text-decoration:none;
 cursor: pointer;
 
 /* Borbure qui souligne le menu + Image du menu (doit avoir la meme couleur que celle de l'image ci dessus */
 
 border-bottom:1px solid #765;
 background:url("../img/left_both.gif") no-repeat left top;
 }

#menu a span {
 float:left;
 display:block;
 /*width:.1em;*/
 padding:5px 15px 4px 6px;
 white-space:nowrap;
 
  /* Style des onglets non selectionne bold, couleur, image */
 
 font-weight:bold;
 color:#765;
 background:url("../img/right_both.gif") no-repeat right top;
 /*#header > ul span {width:auto;}*/
 }
/* hack pour IE5-Mac \*/
#menu a span {float:none;}
/* fin du hack pour IE5-Mac */

.accueil #nav-accueil a, .songs #nav-songs a, .lyrics #nav-lyrics a, .archives #nav-archives a {
 background-position:0 -150px;
 border-width:0;
 }

/* couleur de l'onget selectionne */

.accueil #nav-accueil span, .songs #nav-songs span, .lyrics #nav-lyrics span, .archives #nav-archives span {
 color:#333333;
 background-position:100% -150px;
 padding-bottom:5px;
 }

#menu a:hover, #menu a:hover span {
 background-position:0% -150px;
 }

/* couleur de l'onget survole */

#menu a:hover span {
 color:#333;
 background-position:100% -150px;
 }

/*************************************************************
Copyright
*************************************************************/

#copyright {
 font-size: 10px;
 margin: auto;
 text-align: center;
 }
#copyright p {
 padding: 2px 0 2px 0;
 margin: 0;
 color: #ffffff;
 }
 
#copyright p.underline {
 margin: 0 120px 0 120px;
 background:url("../img/underline_copyright.png") repeat-x bottom;
 }
 
#copyright p a {
 text-decoration:none;
 cursor: pointer;
 color: #ffffff;
 }
 
#copyright p a:hover {
 text-decoration:underline;
 cursor: pointer;
 color: #ffffff;
 }
 
 /*************************************************************
Fonction commune
*************************************************************/

.fct_com {
 font-size: 12px;
 text-align:right;
 color: #776655;
 padding: 5px 0 0 0;
 margin: 0 35px 0 0;
 clear:both;
 }
 
.fct_com img {
 padding: 0 5px 0 0;
 vertical-align: middle;
 }
  
.fct_com a {
 text-decoration:none;
 cursor: pointer;
 color: #776655;
 }
 
.fct_com a:hover {
 text-decoration:underline;
 cursor: pointer;
 color: #776655;
 }

/*************************************************************
Contenu
*************************************************************/
#content {
 margin: 0 0 0 5px;
 padding: 30px 0 0.8em 0;
 }

/* titre principale d'une rubrique */
#content h1 {
 margin: 0 0 0 16px;
 width: 540px;
 font-size:15px;
 font-weight:normal;
 color: #333333;
 background:url("../img/underline_title.png") repeat-x bottom;
 }

#content h1 a {
 text-decoration:none;
 color: #333333;
 cursor: pointer;
 }
 
#content h1 a:hover {
 text-decoration:none;
 color: #776655;
 cursor: pointer;
 }
 
/* espace entre l'image et le texte */
#content h1 img {
 padding-right: 15px;
 vertical-align: middle;
 }

/* Colonne centrale (quand il y a la collone de gauche) */   
#content #col_content {
 margin: 0 0 0 16px;
 width: 540px;
 padding-top: 1em;
 }
 
/* description d'une news */ 
#content #col_content p {
 margin: 0;
 padding: 10px 0 6px 0;
 font-size:12px;
 color: #333333;
 text-align:justify;
 }
  
/* Colonne de gauche */ 
#content #col_right {
 width: 205px;
 margin-top: 16px;
 padding-bottom: 20px;
 float: right;
 background:url("../img/background_col_right.png") repeat-y;
 }

#content #col_right .col_right_content {
 margin: 20px 0 0 18px;
 width: 179px;
 background-color: #FFFFFF;
 border-right: 1px solid #776655;
 border-bottom: 1px solid #776655;
 }
 
#content #col_right .col_right_content h3 {
 text-align: center;
 position: relative;
 top: 5px;
 margin: 0 0 0 5px;
 padding-bottom: 5px;
 font-size:12px;
 font-weight:normal;
 color:#ffffff;
 vertical-align:middle;
 background:url("../img/background_title.png") no-repeat;
 }

/*************************************************************
Defaut
*************************************************************/

img {
 border:0;
 }
 
/*************************************************************
liste liens colonne de droite
*************************************************************/

#content #col_right .col_right_content ul {
padding-left:15px;
list-style-type:circle;
}

#content #col_right .col_right_content ul li a {
text-decoration:none;
color:#333333;
cursor: pointer;
}

#content #col_right .col_right_content ul li a:hover {
text-decoration:underline;
color:#776655;
cursor: pointer;
}

h2 {
font-weight:bold;
font-style:italic;
padding:0 0 5px 0;
margin-bottom:0;
color:#333333;
font-size:13px;
}

.chorus {
font-style:italic;
}

.underline_lyrics {
background:url("../img/underline_title.png") repeat-x bottom;
background-position: top;
}

.align_right, .align_right a {
text-align:right;
color: #333333;
text-decoration:none;
}

.align_right a:hover {
text-align:right;
color: #776655;
font-weight:bold;
}

.cadre {
background:url("../img/underline_title.png") repeat-x bottom;
margin-bottom: 15px;
}

.play_songs {
-moz-border-radius:10px;
border-radius:10px;
border: 1px solid #776655;
margin: 30px 0 15px 0;
padding:0 5px;
}

.cadre .align_right {
float:right;
text-align: left;
}

.cadre p.clear {
clear:both;
}

#content #col_content p.intro {
font-size:14px;
line-height:20px;
}