/* Feuille de style pour toutes les pages du site */

/* Mise en page globale */
body{
background: url(images/background.jpg) repeat-x black;
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}


/* Les titres*/
h1, h2, h3, h4, h5, h6{font-family: Georgia, serif;}
h1{font-size: 1em;padding: 5px 10px 10px 10px; margin:0;color:#ff9933}
h2{font-size: 1em;padding: 5px 10px 10px 10px; margin:0;color:#ff9933}
h3{font-size: 1.2em;padding: 5px 10px 0 10px; margin:0;color:#ff9933}
h4{font-size: 1.1em;color:white; padding: 5px 10px 5px 10px; margin:0; text-align:justify; font-weight:100; text-indent:5px;}
h5{font-size: 1em;padding: 5px 10px 10px 10px; margin:0;color:#ff9933}
h6{font-size: 0.9em;padding: 5px 10px 10px 10px; margin:0;color:#ff9933}


/* Pargraphe normal */
p {
font-size: 0.7em;
color:white; 
padding: 5px 10px 0 10px;
margin:0
}


/* Les paragraphes de présentation et d'explication */
.parag {
font-family: Georgia, serif;
font-size: 0.8em;
color:white;
padding: 5px 10px 5px 10px; 
margin:0;font-weight:100;
text-align: justify;
}


/* Pour placer à gauche l'imageSweetPotion dans la page divers a propos*/
.logoimagel {
width: 250px;
height: 157px;
float:left;
border: 3px solid #ff9933;
margin:7px 20px 0 10px;
padding:0;
}

/* Pour mettre les liens des sous-menus en background orange*/
.background{
background-color:#FF9933;
}


/* conteneur */
#conteneur {
position: relative;
width:906px;
margin:0 auto;
padding:0;
}

/* header  (bannière principale)*/
#header {
height:230px;
width:906px;
margin:0;
padding:0;
background-image:url(images/header.png);
background-repeat:no-repeat;
}

/* Menu principal (horizontal) */
#menu {
position: relative;
width:840px;
height:25px;
margin:0 auto;
padding:0;
background: url(images/menu.png) no-repeat ;
}
#menu ul{
text-align:center;
margin: 0;
padding: 0;
list-style-image: url(images/puce.png);
list-style-position: inside;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:0.8em;
}
#menu li {
display: inline;
height:25px;
}
#menu  a {
padding: 0 25px 0;
height: 25px;
width: 100px;
line-height: 25px;
color: white;
background: url(images/puce.png)  center left no-repeat;
text-decoration: none;
}
#menu  a:hover {
text-decoration: underline;
color:#ff9933;
}
#menu ul li a.orangemenu {
color:#FF9933;
}

/* Contenu */
#contenu {
position: relative;
width:840px;
margin:0 auto;
padding:0;
background: url(images/backcontenu.png) repeat-y ;
}


/* Colonne Gauche */
#gauche {
float:left;
width: 240px;
margin:0;
padding:0;
}
.contenugauche {
position: relative;
width: 200px;
margin:0 auto;
padding:0;
background:url(images/backgroundcolonne.png);
}
.contenugauche p {
margin:0;
padding:0 10px 0 10px;
color:white;
}
.contenugauche a {
margin:0;
padding:0;
color:white;
}
.contenugauche a:hover {
margin:0;
padding:0;
color:#ff9933;
}
.contenugauchebas {
margin:0 0 20px 0;
padding:0;
height:42px;
background:url(images/basgauche.png) center no-repeat ;
}


/* Rubrique des clips dans la colonne gauche de la page accueil , placée nécéssairement en haut pour compléter le graphique du menu principal*/
#videogauche {
background: url(images/videos.png) no-repeat ;
width: 240px;
height: 130px;
margin:0;
padding:0;
}


/* Rubrique de gauche pour mettre de la pub */
#pubgauche {
background: url(images/pub.png) no-repeat ;
width: 240px;
height:58px;
margin:0;
padding:0;
}

/* Rubrique de gauche pour mettre de la pub , placée nécéssairement en haut pour compléter le graphique du menu principal*/
#pubgauchetop {
background: url(images/pubtop.png) no-repeat ;
width: 240px;
height:130px;
margin:0;
padding:0;
}

/* Rubrique de gauche Divers & Utiles*/
#divers {
background: url(images/divers.png) no-repeat ;
width: 240px;
height:58px;
margin:0;
padding:0;
}
#divers .orange {
color:#ff9933;
}


/* Colonne Droite */
#droite {
float:left;
width: 600px;
margin:0;
padding:0;
}


/* Bannière secondaire pour la page d'accueil (albums de la semaine + date)*/
#albumsdroite {
position: relative;
background: url(images/index-albums.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}

/* Pour spécifier la mise en forme de la date intégrée dans la bannière secondaire de la page d'accueil*/
#date {
position:absolute;
margin:0;
padding:0;
top: 95px;
left: 260px;
height: 10px;
color:#ff9933;
text-align:left;
font-weight:100;
font-size: 0.9em;
font-family: Georgia, "Times New Roman", Times, serif;
}


/*Mise en page pour un slot album */
.news {
width: 580px;
margin:0 ;
padding:0;
border-top:#ff9933 solid 6px;
background:url(images/backgrounddroite.png);
}
.newsrecherche {
width: 580px;
border-top:#ff9933 solid 6px;
}
.datesortie {
margin:0 ;
padding: 5px 10px 5px 10px;
color:#b9a88b;
}
.imager {
width: 240px;
height: 240px;
float:right;
border: 3px solid #ff9933;
margin:7px 10px 0 20px;
padding:0;
}
.imagel {
width: 240px;
height: 240px;
float:left;
border: 3px solid #ff9933;
margin:7px 20px 0 10px;
padding:0;
}
.left {
text-align: left;
}
.lien {
color:#ff9933;
}
.retour {
color:maroon;
text-align: right;
}
.retour a {
color: maroon;
}
.basnews {
width: 580px;
height:43px;
margin:0 0 20px 0;
padding:0;
background:url(images/basdroite.png);
}
.commentaire{
clear: both;
}


/* Mise en page pour un sous-menu */
.datealbums {
width: 580px;
margin:0 0 30px 0 ;
padding:10px 5px 5px 5px;
border-top: solid #ff9933 2px;
background:url(images/backgrounddroite.png);
text-align:center;
}
.datealbums a {
text-align:center;
color:white;
font-family: Arial, Helvetica, "Times New Roman", serif;
font-size: 1em;
padding: 0 2px 0;
border-right: groove 1px white;
}
.datealbums a:hover {
color:white;
background-color:#FF9933;
}


/* Bannière secondaire pour les pages Albums */
#albumspage {
position: relative;
background: url(images/albumspage.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}
#albums2010 {
position: relative;
background: url(images/albums-2010.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}
#albums2009 {
position: relative;
background: url(images/albums-2009.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}
#albums2008 {
position: relative;
background: url(images/albums-2008.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}
#albums2007 {
position: relative;
background: url(images/albums-2007.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}
#albums2006 {
position: relative;
background: url(images/albums-2006.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}
#albums2005 {
position: relative;
background: url(images/albums-2005.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}
#albums2004 {
position: relative;
background: url(images/albums-2004.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}
#albums2003 {
position: relative;
background: url(images/albums-2003.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}
#albums2002 {
position: relative;
background: url(images/albums-2002.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}
#albums2001 {
position: relative;
background: url(images/albums-2001.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}
#albums2000 {
position: relative;
background: url(images/albums-2000.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}
#albums1999 {
position: relative;
background: url(images/albums-1999.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}
#albums1998 {
position: relative;
background: url(images/albums-1998.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}
#albumsrecherche {
position: relative;
background: url(images/albums-recherche.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}
#albumsdiscographie {
position: relative;
background: url(images/albums-discographie.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}


/* Bannière secondaire pour la page d'acceuil focus */
#focus{
position: relative;
background: url(images/focus.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}


/* Bannière secondaire pour la page focus Billboard */
#focus_billboard{
position: relative;
background: url(images/focus-billboard.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}


/* Bannière secondaire pour la page focus 106 & Park */
#focus_106andpark{
position: relative;
background: url(images/focus-106andpark.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}


/* Bannière secondaire pour la page divers a propos*/
#divers_apropos {
position: relative;
background: url(images/divers-apropos.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}


/* Bannière secondaire pour la page divers Cgu */
#divers_cgu {
position: relative;
background: url(images/divers-cgu.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}


/* Bannière secondaire pour la page divers Contact */
#divers_contact {
position: relative;
background: url(images/divers-contact.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}


/* Bannière secondaire pour la page divers Plan du site */
#divers_plandusite {
position: relative;
background: url(images/divers-plandusite.png) no-repeat ;
width: 600px;
height: 130px;
margin:0;
padding:0;
}


/* Footer */
#footer {
margin:0 auto;
padding:0;
background: url(images/footer.png) center no-repeat;
width:840px;
height: 54px;
}
#footer p {
font-family: Arial, Helvetica, "Times New Roman", serif;
font-size: 0.6em;
color:white;
text-align:center;
margin: 0;
padding: 5px 0;
}
#footer a:hover {
color:white;
}

/* Element pour pousser le footer vers le bas */
.separation {clear:both;visibility:hidden;}



/* Pour le tableau de la page focus billboard */
caption {color:white;font-size: 0.8em;}
table.t1 {color:white; border: thin solid white;border-collapse: collapse;}
table.t1 th {border: thin solid white;padding: 5px;font-size: 0.8em;}
table.t1 td {font-size: 0.8em; border: thin solid white; padding: 5px;}
table.t1 a {color: #FFFFFF;}
table.t1 a:hover {color:#FF9933;}

caption {color:white;font-size: 0.7em;}
table.t2 {color:white; border: thin solid white;border-collapse: collapse;}
table.t2 th {border: thin solid white;padding: 2px;font-size: 0.7em;}
table.t2 td {font-size: 0.7em; border: thin solid white; padding: 2px;}
table.t2 a {color: #FF9933;}
table.t2 a:hover {color:#FFFFFF;}



/* Pour faire des liens en blanc avec un hover orange */
.lien2 a{color: #FFFFFF}
.lien2 a:hover {color:#FF9933;}

/* Pour mettre en orange */
.orange {
color:#ff9933;
text-decoration:none;
}

/* Pour centrer  du texte*/
.centrer{
text-align: center;
} 

/* Pour le sommaire des pages albums */
.sommaire a {font-size: 1.2em;color:white;}
.sommaire a:hover {color:#ff9933;}

/* Pour les liens donnés en résultat du moteur de recherche*/
a.lienalbum {font-size: 1.2em;
color:white; 
padding: 5px 10px 0 10px;
margin:0}
a.lienalbum:hover {color:#ff9933;}

/* Pour modifier les bords des logos RSS, nécéssaire pour que la page index soit aux standards w3c */
.c1 {
border-color: #ff9933;
}