/*******************************************************
TITLE: test de blocs superposes et autres colonnes
DATE: 20110725
AUTHOR: Joel SIMON ADAPTATION de The CSS Tinderbox - http://www.csstinderbox.com
Dore, c'etait ff9900
maintenant c'est #ffa520 
Bleu, dans le body, c'est 223344
pour le reste, c'est #001122 et les degrades #112233,111133 etc.
Noir, c'est #000000
body,a,a:hover,blockquote, blockquote p,
.logouaicf, .photochorale1, .photochorale,photocache,
.saison, .repetition,boiteachanteurs,boiteaplayer,
boiteasmartphone,.playerSP,.chant,
#header, #header1, #header3, #header a,
#colonnegauche, #colonnedroite, #colonnecentre,
#colonnegauche h2, #colonnegauche ul, #colonnegauche li,
#colonnegauche li a, #colonnegauche li a:hover,
#colonnecentre, #colonnecentre h2, refXHTML
*******************************************************/
/* LES COULEURS  -------------------------------------------------*/

     /* le background en couleur */
a{
background-color:transparent;
}
.logouaicf{
background-color:#112233;
}
.photochorale{
background-color:#112233;
}
.repetition{
background-color:#112233;
}
#header{
background-color:#112233;
}
#header a{
background-color:transparent;
}
#colonnegauche{
background-color:#112233;
}#colonnedroite {
background-color:#112233;
}
#colonnegauche h2{
background-color:#transparent;
}
#colonnegauche ul{
background-color:#transparent;
}
#colonnegauche li{
background-color:#transparent;
}
#colonnegauche li {
background-color:#transparent;
}
#colonnecentre{
background-color:#112233;
}
#colonnecentre h2 {
background-color:#transparent;
}
#colonnecentre ul {
background-color:#001122;
}

#tags {
background-color:#001122;
}

/*   la couleur de police  */
a, a:hover, .logouaicf, .photochorale, .saison, .repetition, #header, #header a, #colonnegauche, #colonnedroite, #colonnegauche h2, #colonnegauche ul, #colonnegauche li, #colonnegauche li a, #colonnegauche li a:hover {color:#ffb520;}
#colonnecentre {color:#112233;}
#colonnecentre h2, .maj{color:#ffb520;}
#colonnecentre h2 ul, #colonnecentre h2 ul li{color:#ffb520;}
  /*fin  des COULEURS ------------------------------------- */


/********************************************************/

/* corps central */
body {
margin:px;
padding:2px;
background-color:#334455;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
color:#ffa520;
}

/* liens */
a {
color:#ffa520;
text-decoration:underline;
}

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

/* encart des annees de la saison*/
blockquote {
margin:1em;
padding:.5em;
font-size:.9em;
color:#ffa520;
background-color:#112233;
border-top:3px solid #ffa520;
border-left:3px solid #ffa520;
border-bottom:1px solid #ffa520;
border-right:1px solid #ffa520;
}
/* ca c'est juste  la marge  autour */
blockquote p {
margin:.3em;
}

/* place reservee au logo uaicf */
.logouaicf {
position: absolute;
top: 1.5em;
left: 1.5em;
}

/* place reservee a  la photo de la chorale */
/* page de l'index */
.photochorale1 {
position: absolute;
top: 10em;
left: 7em;
}
/*place reservee a la photo de la chorale */
/* page de l'index */
.photochorale2 {
position: absolute;
top: 10em;
left: 7em;

/*******************************************************
TITLE: test de blocs superposes et autres colonnes
DATE: 20110725
AUTHOR: Joel SIMON ADAPTATION de The CSS Tinderbox - http://www.csstinderbox.com
Dore, c'etait ff9900
maintenant c'est #ffa520 
Bleu, dans le body, c'est 223344
pour le reste, c'est #001122 et les degrades #112233,111133 etc.
Noir, c'est #000000
body,a,a:hover,blockquote, blockquote p,
.logouaicf, .photochorale1, .photochorale,photocache,
.saison, .repetition,boiteachanteurs,boiteaplayer,
boiteasmartphone,.playerSP,.chant,
#header, #header1, #header3, #header a,
#colonnegauche, #colonnedroite, #colonnecentre,
#colonnegauche h2, #colonnegauche ul, #colonnegauche li,
#colonnegauche li a, #colonnegauche li a:hover,
#colonnecentre, #colonnecentre h2, refXHTML
*******************************************************/
/* LES COULEURS  -------------------------------------------------*/

     /* le background en couleur */
a{
background-color:transparent;
}
.logouaicf{
background-color:#112233;
}
.photochorale{
background-color:#112233;
}
.repetition{
background-color:#112233;
}
#header{
background-color:#112233;
}
#header a{
background-color:transparent;
}
#colonnegauche{
background-color:#112233;
}#colonnedroite {
background-color:#112233;
}
#colonnegauche h2{
background-color:#transparent;
}
#colonnegauche ul{
background-color:#transparent;
}
#colonnegauche li{
background-color:#transparent;
}
#colonnegauche li {
background-color:#transparent;
}
#colonnecentre{
background-color:#112233;
}
#colonnecentre h2 {
background-color:#transparent;
}
#colonnecentre ul {
background-color:#001122;
}

#tags {
background-color:#001122;
}

/*   la couleur de police  */
a, a:hover, .logouaicf, .photochorale, .saison, .repetition, #header, #header a, #colonnegauche, #colonnedroite, #colonnegauche h2, #colonnegauche ul, #colonnegauche li, #colonnegauche li a, #colonnegauche li a:hover {color:#ffb520;}
#colonnecentre {color:#112233;}
#colonnecentre h2, .maj{color:#ffb520;}
#colonnecentre h2 ul, #colonnecentre h2 ul li{color:#ffb520;}
  /*fin  des COULEURS ------------------------------------- */


/********************************************************/

/* corps central */
body {
margin:px;
padding:2px;
background-color:#334455;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
color:#ffa520;
}

/* liens */
a {
color:#ffa520;
text-decoration:underline;
}

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

/* encart des annees de la saison*/
blockquote {
margin:1em;
padding:.5em;
font-size:.9em;
color:#ffa520;
background-color:#112233;
border-top:3px solid #ffa520;
border-left:3px solid #ffa520;
border-bottom:1px solid #ffa520;
border-right:1px solid #ffa520;
}
/* ca c'est juste  la marge  autour */
blockquote p {
margin:.3em;
}

/* place reservee au logo uaicf */
.logouaicf {
position: absolute;
top: 1.5em;
left: 1.5em;
}

/* place reservee a  la photo de la chorale */
/* page de l'index */
.photochorale1 {
position: absolute;
top: 10em;
left: 7em;
}
/*place reservee a la photo de la chorale */
/* page de l'index */
.photochorale2 {
position: absolute;
top: 10em;
left: 7em;
}
.zoom{
width: 300px;
width: 161px;
}

.zoom:hover{
width: 600px;
width: 322px;
}
/* place reservee a  la fleche vers la droite*/
#flechedroite {
position: absolute; z-index:1;
top: 21em;
left: 24em;
background: norepeat url('flechedoree.jpg') bottom left; 

}

/* a  la saison **************************/
.saison {
position: absolute;
top: 2em;
left: 19em;
width:auto;
height:auto;
border-radius:6px 6px 0 6px;
}  


/* Titre Chorale de Corbeil-Essonnes */
#header {
margin:2em;
padding:1em;
width:400px;
height:460px;
background-color:#111144;
background: #fff url('partoche02bGblue.jpg') bottom left; 
border-left:5px solid #ffa520;
border-top:4px solid #ffa520;
border-right:1px solid #ffa520; 
border-bottom:1px solid #ffa520; 
border-radius:6px 6px 0 6px
}

#header h1 { 
margin:0; 
padding:0;
font-size:2em;
}
 
#header h3 { 
padding:0;
font-size:.9em;
font-style:italic;
color:#ffa520;
text-align:left;
}

#header a {
text-decoration:none;
}

#colonnegauche {
position:absolute;
left:2.25em;
top:12em;
width:15em;
margin:0;
padding:1em .5em 2em .5em;
background:#111122;
border-left:3px solid #ffa520;
border-top:4px solid #ffa520;
border-right:1px solid #ffa520; 
border-bottom:1px solid #ffa520; 
font-size:.9em;
color:#ffa520;
}

#colonnegauche h2 { 
margin:0 0 -1em 0; 
padding:0;
font-size:1em;
color:#ffa520;
letter-spacing:.1em;
}

#colonnegauche ul { 
margin:1.5em 0 0 0; 
padding:0;
list-style:none;
}

#colonnegauche li { 
margin:0 0 .4em 0; 
padding:0;
}

#colonnegauche li a { 
margin:0 0 0 .2em;
color:#ffa520;
text-decoration:none; 
}

#colonnegauche li a:hover { 
color:#ffa520;
text-decoration:none; 
}

#colonnecentre {
position:absolute;
right:1.5em;
top:22em;
margin-top:.2em;
margin-left: 16em;
margin-right:16em;
border-left:3px solid #ffa520;
border-top:3px solid #ffa520;
border-right:1px solid #ffa520;
border-bottom:1px solid #ffa520;
voice-family: "\"}\"";
voice-family: inherit;
padding:1em .5em 2em .5em;
background:#112233;
font-size:.9em;
}

/*  concert a ecouter**************************/
#concert {
position: absolute;
font-size:.8em;
text-align: center; 
margin: 10px; 
top: 30em;
left:10em;
padding:1em;
width:auto;
height:auto;
background-color:#002233;
border-left:5px solid #ffa520;
border-top:5px solid #ffa520;
border-right:1px solid #ffa520; 
border-bottom:1px solid #ffa520; 
border-radius:6px 6px 0 6px;
color:#ffa520;
font-size:1em;
font-weight:bold;
}  

/*  prochains concerts, vie de l'asso, etc ... **************************/
#actualite {
position: absolute;
text-align: center; 
margin: 2px;
top: 4.5em;
left:41em;
padding:0.3em;
width: auto;
height: auto;
background-color:#002233;
border-left:5px solid #ffa520;
border-top:5px solid #ffa520;
border-right:1px solid #ffa520; 
border-bottom:1px solid #ffa520; 
color:#ffa520;
font-size:.8em;
font-weight:normal;

#actualite h2 {
margin:0 0 4 0; 
padding:5;
font-size:2em;
letter-spacing:.5em;
font-weight:bold;
}
}  
/*html>body */
#colonnecentre {
margin-left:17.50em;
margin-right:17.50em;
}

#colonnedroite {
position:absolute;
right:2.25em;
top:2.3em;
width:14em;
margin:0;
padding:1em .5em 2em .5em;
background:#001122;
border-left:3px solid #ffa520;
border-top:4px solid #ffa520;
border-right:1px solid #ffa520; 
border-bottom:1px solid #ffa520; 
font-size:.9em;
color:#ffa520;
}

#colonnedroite h2 { 
margin:0 0 -1em 0; 
padding:0;
font-size:1em;
color:#ffa520;
letter-spacing:.1em;
}

/* reserve a  la date de mise a  jour */
.maj{ 
position:absolute;
left:35em;
top:.2em;
font-size:0.9em;
font-style:italic;
text-align:right;
color:#ffa520;
}

.misengras {
font-weight:bold;
}
.sanssouslignage {
font-style:normal;
}

#pieddpageindex{
position:relative;
left:15em;
bottom:-.2em;
width:12em;
height:auto;
margin:.5em;
padding:1em .3em .5em .8em;
background:transparent;   /* ex #334455;*/
border-left:3px solid #ffa520;
border-top:4px solid #ffa520;
border-right:1px solid #ffa520; 
border-bottom:1px solid #ffa520; 
border-radius:6px 6px 0 6px;
font-size:.9em;
color:#ffa520;
}


#pieddpage{
position:relative;
left:-2em;
top:30em;
width:60em;
height:3em;
margin:0.2em;
padding:0.5em 0.5em 0.5em 0.5em;
font-size:2em;
color:#ffa520;
}
#pieddpage span{
margin:.5em;
}
#puce01 {
position: absolute;

}
/* en cas de repetition EXCEPTIONNELLE *************************/
.repetitionexceptionnelle {
position: absolute;
z-index:1;
text-align: center; 
margin: 1px;
top: 8em;
left:21em;
padding:1em;
width:auto;
height:auto;
background-color:#002233;
border-left:3px solid #ffa520;
border-top:3px solid #ffa520;
border-right:1px solid #ffa520; 
border-bottom:1px solid #ffa520; 
border-radius:3px 3px 0 3px;
color:#ffa520;
font-size:0.9em;
font-weight:bold;
} 




/* place reservee a  la fleche vers la droite*/
#flechedroite {
position: absolute; z-index:1;
top: 21em;
left: 24em;
background: norepeat url('flechedoree.jpg') bottom left; 

}

/* a  la saison **************************/
.saison {
position: absolute;
top: 2em;
left: 19em;
width:auto;
height:auto;
border-radius:6px 6px 0 6px;
}  


/* Titre Chorale de Corbeil-Essonnes */
#header {
margin:2em;
padding:1em;
width:400px;
height:460px;
background-color:#111144;
background: #fff url('partoche02bGblue.jpg') bottom left; 
border-left:5px solid #ffa520;
border-top:4px solid #ffa520;
border-right:1px solid #ffa520; 
border-bottom:1px solid #ffa520; 
border-radius:6px 6px 0 6px
}

#header h1 { 
margin:0; 
padding:0;
font-size:2em;
}
 
#header h3 { 
padding:0;
font-size:.9em;
font-style:italic;
color:#ffa520;
text-align:left;
}

#header a {
text-decoration:none;
}

#colonnegauche {
position:absolute;
left:2.25em;
top:12em;
width:15em;
margin:0;
padding:1em .5em 2em .5em;
background:#111122;
border-left:3px solid #ffa520;
border-top:4px solid #ffa520;
border-right:1px solid #ffa520; 
border-bottom:1px solid #ffa520; 
font-size:.9em;
color:#ffa520;
}

#colonnegauche h2 { 
margin:0 0 -1em 0; 
padding:0;
font-size:1em;
color:#ffa520;
letter-spacing:.1em;
}

#colonnegauche ul { 
margin:1.5em 0 0 0; 
padding:0;
list-style:none;
}

#colonnegauche li { 
margin:0 0 .4em 0; 
padding:0;
}

#colonnegauche li a { 
margin:0 0 0 .2em;
color:#ffa520;
text-decoration:none; 
}

#colonnegauche li a:hover { 
color:#ffa520;
text-decoration:none; 
}

#colonnecentre {
position:absolute;
right:1.5em;
top:22em;
margin-top:.2em;
margin-left: 16em;
margin-right:16em;
border-left:3px solid #ffa520;
border-top:3px solid #ffa520;
border-right:1px solid #ffa520;
border-bottom:1px solid #ffa520;
voice-family: "\"}\"";
voice-family: inherit;
padding:1em .5em 2em .5em;
background:#112233;
font-size:.9em;
}

/*  concert a ecouter**************************/
#concert {
position: absolute;
font-size:.8em;
text-align: center; 
margin: 10px; 
top: 30em;
left:10em;
padding:1em;
width:auto;
height:auto;
background-color:#002233;
border-left:5px solid #ffa520;
border-top:5px solid #ffa520;
border-right:1px solid #ffa520; 
border-bottom:1px solid #ffa520; 
border-radius:6px 6px 0 6px;
color:#ffa520;
font-size:1em;
font-weight:bold;
}  

/*  prochains concerts, vie de l'asso, etc ... **************************/
#actualite {
position: absolute;
text-align: center; 
margin: 2px;
top: 4.5em;
left:41em;
padding:0.3em;
width: auto;
height: auto;
background-color:#002233;
border-left:5px solid #ffa520;
border-top:5px solid #ffa520;
border-right:1px solid #ffa520; 
border-bottom:1px solid #ffa520; 
color:#ffa520;
font-size:.8em;
font-weight:normal;

#actualite h2 {
margin:0 0 4 0; 
padding:5;
font-size:2em;
letter-spacing:.5em;
font-weight:bold;
}
}  
/*html>body */
#colonnecentre {
margin-left:17.50em;
margin-right:17.50em;
}

#colonnedroite {
position:absolute;
right:2.25em;
top:2.3em;
width:14em;
margin:0;
padding:1em .5em 2em .5em;
background:#001122;
border-left:3px solid #ffa520;
border-top:4px solid #ffa520;
border-right:1px solid #ffa520; 
border-bottom:1px solid #ffa520; 
font-size:.9em;
color:#ffa520;
}

#colonnedroite h2 { 
margin:0 0 -1em 0; 
padding:0;
font-size:1em;
color:#ffa520;
letter-spacing:.1em;
}

/* reserve a  la date de mise a  jour */
.maj{ 
position:absolute;
left:35em;
top:.2em;
font-size:0.9em;
font-style:italic;
text-align:right;
color:#ffa520;
}

.misengras {
font-weight:bold;
}
.sanssouslignage {
font-style:normal;
}

#pieddpageindex{
position:relative;
left:15em;
bottom:-.2em;
width:12em;
height:auto;
margin:.5em;
padding:1em .3em .5em .8em;
background:transparent;   /* ex #334455;*/
border-left:3px solid #ffa520;
border-top:4px solid #ffa520;
border-right:1px solid #ffa520; 
border-bottom:1px solid #ffa520; 
border-radius:6px 6px 0 6px;
font-size:.9em;
color:#ffa520;
}


#pieddpage{
position:relative;
left:-2em;
top:30em;
width:60em;
height:3em;
margin:0.2em;
padding:0.5em 0.5em 0.5em 0.5em;
font-size:2em;
color:#ffa520;
}
#pieddpage span{
margin:.5em;
}
#puce01 {
position: absolute;

}
/* en cas de repetition EXCEPTIONNELLE *************************/
.repetitionexceptionnelle {
position: absolute;
z-index:1;
text-align: center; 
margin: 1px;
top: 8em;
left:21em;
padding:1em;
width:auto;
height:auto;
background-color:#002233;
border-left:3px solid #ffa520;
border-top:3px solid #ffa520;
border-right:1px solid #ffa520; 
border-bottom:1px solid #ffa520; 
border-radius:3px 3px 0 3px;
color:#ffa520;
font-size:0.9em;
font-weight:bold;
}