body {
    background: #332722;
    font: normal 12px/16px arial;
    color: #333333;
    margin: 0;
    padding: 0;
}

#site {
    background-color: white;
    width: 800px;
    margin: 2px auto 0 auto;
}

a {
    color: #333333;
}

.gras {
    font-weight: bold;
}

.gros {
    font-size: 22px;
    line-height: 28px;
}
/*************************/
/******* L'entete ********/
/*************************/
#header {
    clear: both;
    color: white;
}

#header a {
    color: white;
}

#header_col1 {
    float: left;
    width: 200px;
}

#header_col2 {
    float: left;
    width: 600px;
}

.logo {
    display: block;
}

.menu_horizontal {
    padding-top: 3px;
    height: 57px;
    padding-left: 450px;
}

.son {
    padding-left: 420px;
}

.menu_horizontal a {
    font: normal 10px/18px arial;
    text-decoration: none;
}

.menu_horizontal .separateur {
    margin: 0 2px 0 2px;
}

.menu_horizontal a:hover {
    text-decoration: underline;
}

.menu_vertical {
    height: 146px;
	
}

.menu_vertical a {
    font: bold 11px/18px arial;
    text-decoration: none;
    margin-left: 30px;
}

.menu_vertical a:hover {
    text-decoration: underline;
}

/***************************/
/******* Le contenu ********/
/***************************/
#content {
    clear: both;
}

#content_col1 {
    float: left;
    width: 200px;
    margin-top: 67px;
}

#content_col2 {
    float: left;
    width: 600px;
}

#phrase {
    margin-bottom: 43px;
}

#ancre {
    margin-bottom: 20px;
}

#ancre a {
    color: #333333;
    text-decoration: none;
}

#ancre .separateur {
    margin: 0 5px 0 5px;
}

.titre {
    font: bold 14px/18px arial;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.sous_titre {
    font: normal 12px/18px arial;
    text-transform: uppercase;
}

table {
    border-collapse: collapse;
}

td {
    vertical-align: top;
    padding-bottom: 25px;
}

.colonne1_4, .colonne3_4 {
    width: 276px;
}

.colonne34_4 {
    width: 304px;
    text-align: right;
}

.colonne2_4 {
    width: 20px;
}

.colonne4_4, .colonne2_2 {
    width: 28px;
}

.colonne1_2 {
    width: 572px;
}

.savoir {
    font: bold 12px/15px arial;
    color: black;
    text-decoration: underline;
}

.signature {
    margin-top: 12px;
    font: normal 12px/16px arial;
    text-transform: uppercase;
}

.titre_zone {
    font: bold 12px/16px arial;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Pour centrer certicalement une image dans une cellule */
td.centrer {
    vertical-align: middle;
}

td.extrait {
    font-weight: bold;
    padding: 3px 0 0 30px;
	font: 10px arial;
}

table .ecoutez td {
    padding-bottom: 10px;
}

#bouton_son {
    vertical-align: middle;
    margin-right: 10px;
}

/*************************************/
/******* Les cas particuliers ********/
/*************************************/

/* Le tableau du conseil d'administration */
table .conseil {
    width: 276px;
    empty-cells: show;
}

table .conseil td {
    padding-bottom: 0;
}

td .separation {
    width: 25px;
}

.pair {
    background: none;
}

.impair {
    background: #cccccc;
}

/* Le Coream sur fond bleu */
.lecoream {
    background: #00468c;
    color: white;
    padding: 20px 10px 20px 10px;
}

.lecoream .titre {
    text-transform: uppercase;
    font: bold 10px/17px arial;
}

.lecoream .lettre1 {
    font: normal 17px/25px arial;
}

/* Le tableau dans archives */
table .archive td {
    padding-bottom: 0;
    padding: 0 20px 0 0;
}

/* Le tableau de contact */
table .contact td {
    padding: 0 20px 6px 0;
}

input.contact, textarea.contact {
    border: 1px solid black;
    width: 400px;
}

input.bouton {
    border: 1px solid black;
    background: #999999;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    padding: 3px 10px 3px 10px;
}
/************************/
/******* Le pied ********/
/************************/
#footer {
    clear: both;
    text-align: center;
    padding: 70px 0 10px 0;
    color: white;
}

.texte_pied {
    height: 20px;
    width: 740px;
    margin: 0 auto;
    padding-top: 5px;
}

.texte_pied a {
    color: white;
    margin-right: 22px;
}


/******************************************************/
/******* Les variations en fonction de la page ********/
/******************************************************/

/* Page 1 : index.html */
.page1 {
    background: #669acc;
}

.couleur1 {
    color: #669acc;

}

.titre1 {
    color: #669acc;
    border-bottom: 9px solid #669acc;
}

/* Page 2 : coream.html */
.page2 {
    background: #00468c;
}

.couleur2 {
    color: #00468c;

}

.titre2 {
    color: #00468c;
    border-bottom: 9px solid #00468c;
}

/* Page 3 : coreades.html */
.page3 {
    background: #e05830;
}

.couleur3 {
    color: #e05830;

}

.titre3 {
    color: #e05830;
    border-bottom: 9px solid #e05830;
}

/* Page 4 : bachapaques.html */
.page4 {
    background: #a2062b;
}

.couleur4 {
    color: #a2062b;

}

.titre4 {
    color: #a2062b;
    border-bottom: 9px solid #a2062b;
}

/* Page 5 : chantez.html */
.page5 {
    background: #e05830;
}

.couleur5 {
    color: #e05830;

}

.titre5 {
    color: #e05830;
    border-bottom: 9px solid #e05830;
}


/* Page 6 : ecoutez.html */
.page6 {
    background: #e85277;
}

.couleur6 {
    color: #e85277;

}

.titre6 {
    color: #e85277;
    border-bottom: 9px solid #e85277;
}

/* Page 7 : archives.html */
.page7 {
    background: #8db111;
}

.couleur7 {
    color: #8db111;

}

.titre7 {
    color: #8db111;
    border-bottom: 9px solid #8db111;
}

/* Page 8 : presse.html */
.page8 {
    background: #f29400;
}

.couleur8 {
    color: #f29400;

}

.titre8 {
    color: #f29400;
    border-bottom: 9px solid #f29400;
}

/* Page 9 : liens.html */
.page9 {
    background: #794e7b;
}

.couleur9 {
    color: #794e7b;

}

.titre9 {
    color: #794e7b;
    border-bottom: 9px solid #794e7b;
}

/* Page 10 : contact.html */
.page10 {
    background: #999999;
}

.couleur10 {
    color: #999999;

}

.titre10 {
    color: #999999;
    border-bottom: 9px solid #999999;
}