@charset "utf-8";

/* chorale.css */

/* Layout */

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}	

body {
 width: 100%;
 }

#contenu {
 width: auto;
 }

#tete-pl {
 width: 100%;
 }

#tete , .topmenu, #milieu, #pied {
 width: 975px; /*68em;*/
 margin-left: auto; 
 margin-right: auto;
 }

.topmenu ul {
 margin: 0;
 padding: 5px /*10px*/;
 }
 
.topmenu ul li {
 display: inline;
 padding: 5px /*10px*/ 0;
 }

.topmenu ul li a {
 padding: 22px 10px 10px 10px;
 }

.topmenu ul li a.selected {
 padding: 5px /*10px*/;
 }

#milieu table {
 width: 100%;
 margin: 1em 0;
 border-collapse: collapse;
 }

#milieu>div {
 float: left;
 }

#milieu li {
margin-left: 2em;
}

.pl {
 width: 100%;
 }

#milieu hr.bas {
 clear: both;
 height: 0;
 }

.col1 {
 padding: 1em;
/* width: 94%;
 /* margin: 1em; */
 }

.col2gauche  {
 padding: 1em;
 width: 47%;
 min-width: 25em;
 }

.col2droite  {
 padding: 1em;
 width: 47%;
 }
 
#pied {
 padding: 5px 0 15px 0;
 }
 
#pied-pl {
 clear: both;
 width: 100%;
 }

h1 {
 margin: .3em 0 0 0;
 padding: .2em 0 0 .2em;
 }

h2 {
 margin-top: 1em;
 padding: .3em .3em 0 .3em;
 }

h3 {
 margin-top: 1em;
 padding-top: .5em;
 }

p {
 margin-top: 1em;
 }

p.valeur {
 margin-top: .5em;
 margin-left: 2em;
 margin-bottom: 1.2em;
 }

li {
 padding: .3em 0;
 }

li.compact {
 padding: 0;
 }

li p {
 margin-top: .2em;
 }

.jb {
 margin: 0.6em 0;
 padding: 0.1em 0 0 0;
 }

.temoignage {
 width: 85%;
 margin-left: auto; 
 margin-right: auto;
 margin-top: 0.5em;
 margin-bottom: 0.5em;
 padding: 0.1em 1em;
 }

.temoignage p {
 margin: 0 0 .5em 0;
 }
 
#adresse {
 margin-left: 20px;
 }
 
.col2 {
 float: left;
 width: 29em;
 padding-right: 1em;
 }

.col3 {
 float: left;
 width: 21em;
 height: 5em;
 padding-right: .5em;
 }

.blocsignature {
 margin-top: 1em;
 width: 27em;
 }
 
.blocsignature img {
 margin-top: 0;
 margin-right: 1em;
 }

.blocsignature p {
 margin: 0;
 width: 100%;
 }

.blocsignature p.signature {
 width: 90%;
 }

.chanson th {
 padding: 10px;
 }

.chanson td {
 padding: 3px;
 height: 36px;
 }

.albums {
 margin: .5em ;
 width: 98%;
 }

.membres {
 margin: .5em ;
 width: 98%;
 }

.albums img, .membres img {
 margin: .3em;
 }

h1.membre {
 margin: 2px;
 padding: 10px;
 }
 
img.greyborder {
 margin: 0;
 }

.imagemembre {
 float: left;
 margin: 1em;
 padding: 0;
 width: 200px;
 }

.biomembre {
 margin: 2em;
 }
 
.texte {
 padding: 0 1em 1em 1em;
 }
 
.photoalbum img {
 margin: .8em;
 padding: 1px;
 }
 
.floatleft {
 float: left;
 margin: 1em 1em 1em 0;
 }

.floatright {
 float: right;
 margin: 0 0 1em 1em;
 }

.clearright {
 clear: right;
 }

.clearboth {
 clear: both;
 }
 
/****************** Fonts and text ********************/
 
body {
 font-family:"Trebuchet MS", "Century Gothic", arial, verdana, Helvetica, sans-serif;
 font-size: 90%;
 }

h1 {
 font-family: Zapfino, "Tempus Sans ITC", "Apple Chancery", "URW Chancery L", "Monotype Corsiva", Mistral, "Bradley Hand ITC", "Lucida Handwriting", serif;
 font-size: 200% /*20px*/;
 /*font-weight: bold;
 /*text-transform: uppercase;*/
 }

h2 {
 font-family: Papyrus, "Poor Richard", "Copperplate Gothic Light", "Copperplate Gothic Bold", Copperplate, "Palatino Linotype", "Book Antiqua", Palatino, "Lucida Handwriting", Garamond, "Bradley Hand ITC", serif;
 font-weight: bold;
 font-size: 18px; 
 }

h3 {
 font-family: "Copperplate Gothic Light", "Copperplate Gothic Bold", Copperplate, "Palatino Linotype", "Book Antiqua", Palatino, Garamond, "Bradley Hand ITC", serif;
 font-weight: bold;
 font-size: 16px; 
 }

.temoignage {
 font-family: "Apple Chancery", "URW Chancery L", "Monotype Corsiva", Mistral, serif;
 font-size: 1.4em;
 }

.blocsignature p.signature {
 font-family: "Handwriting - Dakota", Mistral, "Bradley Hand ITC", "Lucida Handwriting", "Apple Chancery", "URW Chancery L", "Monotype Corsiva", "Comic Sans MS", script;
 /*font-weight: bold;*/
 font-size: 1.8em;
 }

h1.membre {
 font-family: Zapfino, Mistral, "Bradley Hand ITC", "Palatino Linotype", "Book Antiqua", Palatino, "Lucida Handwriting", Harrington, "Comic Sans MS", script;
 font-size: 24px;
 text-transform: none;
 }

#tete {
 text-align: center;
 background-color: white;
 }
 
.topmenu {
 text-align: center;
 }
 
.topmenu ul {
 list-style: none;
 font-size: 80%;
 }
 
.topmenu ul li {
 font-weight: bold;
 text-transform: uppercase;
 }

.topmenu ul li a {
 text-decoration: none;
 }

/*
#milieu p {
 letter-spacing: 1px;
 }
*/

#pied {
 text-align: center;
 }
 
ul {
 list-style-type: circle;
 }

.auteur {
 font-size: 0.8em;
 }

#adresse {
 font-weight: bold;
 }
 
.col2 a , .col3 a {
 text-decoration: none;
 }

.chanson th {
 font-size: 18px;
 text-transform: uppercase;
 }

.chanson td {
 text-align: center;
 vertical-align: middle;
 }

.albums, .membres {
 text-align: left;
 }

.albums a, .membres a {
 font-size: 110%;
 }

.item {
 font-style: italic; 
 }

.valeur {
 font-size: 1.4em;
 font-weight: bold;
 }
 
 ul.nomark {
 list-style: none;
 }
 
ul.nomark li {
 font-weight: bold;
 }

ul.nomark li a {
 text-decoration: none;
 }

.caption {
 font-weight: bold;
 text-align: center;
 }

/***************** Colors ********************/
 
body {
 color: #990000;
 background-color: #f0eac8 /*#d0ba98*/;
 }

#tete {
 background-color: white;
 }

#milieu {
 background-color: #ffffe8;
 }

.topmenu ul {
 background-color: #967864;
 }
 
.topmenu ul li a {
 color: white;
 }
 
.topmenu ul li:hover {
 background-color: #c1a886;
 }
 
 .topmenu ul li a.selected {
 color: #660000;
 background-color: #ffffe8; /* ffffc0 */
 }
 
#pied {
 color: white;
 background-color: #c1a886;
 }
 
h1 {
 /*background-color: #ffffd8;*/
 color: #660000;
 }

h2 {
 color: #660000;
 background-color: #c1a886;
 }

h2, .albums a, .membres a {
 color: #660000;
 }

h3 {
 color: #967864;
 }

#adresse {
 color: #000066;
 }
 
.temoignage {
 color: #000066;
 background: url("images/cite.jpg") left top no-repeat;
 }
 
.blocsignature p.signature {
 color: #0000aa;
 }

.chanson th {
 color: white;
 background-color: #c1a886;
 }

 h1.membre {
  color: #660000;
  }
 
.chanson td, .albums, .membres, h1.membre, .jb {
 background-color: #ccccff;
 }

.texte {
 background-color: #fff090;
 }
 
.photoalbum img {
 background-color: #000000;
 }
 
/************************ Borders ***********************/
 
#tete {
 border-top: 1px solid #660000;
 border-left: 1px solid #660000;
 border-right: 1px solid #660000;
 }

#milieu {
 border-left: 1px solid #660000;
 border-right: 1px solid #660000;
 border-bottom: 1px solid #ffffe8;
 }

.topmenu {
 border-left: 1px solid #660000;
 border-right: 1px solid #660000;
 }
 
.topmenu ul {
 border-top: 6px /*12px*/ solid #660000;
 border-bottom: 1px solid #660000;
 }
 
.topmenu ul li {
 border-top: 6px /*12px*/ solid #660000;
 border-right: 1px solid white;
 border-left: 1px solid white;
 }

.topmenu ul li:hover {
 border-top: solid 5px /*10px*/ white;
 }
 
 .topmenu ul li a.selected {
 border-top: solid 6px /*12px*/ #660000;
 border-bottom: solid 1px #ffffe8;
 }
 
#milieu hr.bas {
 border: none;
 }

 /*
.col2gauche  {
 border-right: 2px dotted #f0d8b6;
 }
*/

#pied {
 border: 1px solid #660000;
 }
 
/*
h1 {
 border-bottom: 2px solid #f0d8b6;
 }
*/

.blocsignature img {
 border: 1px solid black;
 }

.chanson th, .chanson td  {
 border: 1px solid #660000;
 }

h1.membre {
 border-bottom: 1px solid #660000;
 }

.albums, .membres {
 border: .1em solid #660000;
 }

.albums img, .membres img {
 border: .2em solid #660000;
 }

img {
 border: none;
 }

img.greyborder {
 border: 3px solid #888888;
 }

img.blackborder {
 border: 1px solid black;
 }
img.brownborder {
 border: 3px solid #660000;
 }
 
.texte {
 border-top: 1px solid #660000;
 }
 
.photoalbum img {
 border: .8em solid #c1a886;
 }
