/* CSS Document */

body {
margin: 0px;
padding: 0px;
background: #ffffff;
font-family:  helvetica, verdana, arial, sans-serif;
font-size: 12px;
color: #000000;
scrollbar-face-color: #999999;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #336699;
scrollbar-darkshadow-color: #336699;
scrollbar-3dlight-color: #336699;
scrollbar-highligh-color: #336699;
scrollbar-shadow-color: #336699;
}
#global {
margin: 0px auto 0px auto;
padding: 0px;
width: 800px;
height: auto;
background-color: #ffffff;
}
#bandeau {
width: 700px;
height: 300px;
margin: 0px;
padding: 0px 25px 0px 25px;
border: 0px;
background: url(img/acc_asso.jpg) top center no-repeat;
}
#titre {
visibility: hidden;
margin: 0px;
padding: 0px;
}
/* Mise en place des deux menus------------------------------------------------ */
#menu {
margin: 5px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 750px;
height: 20px;
list-style-type: none;
border-bottom: 1px solid #333399;
}
#menu li {
float: left;
}
#menu li a {
display: block;
width: 107px;
height: 20px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-decoration: none;
text-align: center;
color: #000000;
}
#accueil {
background: url(img/menu/accueil.jpg) top left no-repeat;
}
a#accueil:hover, a#accueil:focus {
background-position: 0% -20px;
}
#asso {
background: url(img/menu/association.jpg) top left no-repeat;
}
a#asso:hover, a#asso:focus {
background-position: 0% -20px;
}
#activites {
background: url(img/menu/activites.jpg) top left no-repeat;
}
a#activites:hover, a#activites:focus {
background-position: 0% -20px;
}
#membres {
background: url(img/menu/membres.jpg) top left no-repeat;
}
a#membres:hover, a#membres:focus {
background-position: 0% -20px;
}
#evenements {
background: url(img/menu/evenement.jpg) top left no-repeat;
}
a#evenements:hover, a#evenements:focus {
background-position: 0% -20px;
}
#boutique {
background: url(img/menu/boutique.jpg) top left no-repeat;
}
a#boutique:hover, a#boutique:focus {
background-position: 0% -20px;
}
#contact {
background: url(img/menu/contact.jpg) no-repeat top;
}
a#contact:hover, a#contact:focus {
background-position: 0% -20px;
}
.invisible {
visibility: hidden;
}
#contenu {
position: relative;
width: 750px;
height: 390px;
margin: 20px 0px 0px 0px;
padding: 0px;
}
/* Mise en place de la colonne de gauche --------------------------------------- */
#colgauche {
position: absolute;
top: 0px;
left: 25px;
margin: 0px;
padding: 0px;
width: 220px;
height: 260px;
}
#colgauche h5 {
margin: 0px 0px 5px 0px;
padding: 0px;
}
#colgauche p {
margin: 0px 0px 10px 0px;
padding: 0px;
text-align: justify;
line-height: 15px;
}
/* Mise en place de la colonne centrale --------------------------------------- */
#colcentre {
position: absolute;
top: 0px;
left: 265px;
margin: 0px;
padding: 0px 0px 20px 0px;
width: 220px;
text-align: center;
background: url(img/encart/encart_bas.jpg) no-repeat bottom;
}
#fondcolcentre {
background: url(img/encart/encart_milieu.jpg) repeat top;
margin: 0px;
padding: 0px;
}
#colcentre img {
border: none; 
}
#titreactu {
margin: 0px;
padding: 0px;
background-image: url(img/encart/encart_haut.jpg);
height: 30px;
color: #ffffff;
}
#colcentre p {
margin: 0px 0px 0px 0px;
padding: 5px 5px 0px 5px;
}
#vernissage {
margin: 10px 0px 5px 0px;
padding: 5px 0px 5px 0px;
background: #ccccff;
font-weight: bold;
border-left: 1px solid #333399;
border-right: 1px solid #333399;
}
/* Mise en place de la colonne de droite --------------------------------------- */
#coldroite {
position: absolute;
top: 0px;
right: 25px;
margin: 0px;
padding: 0px;
width: 220px;
list-style-type: none;
}
#coldroite li {
margin: 0px;
padding: 0px;
}
#coldroite li a {
display: block;
width: 220px;
height: 109px;
margin: 0px 0px 15px 0px;
padding: 0px;
text-decoration: none;
text-align: center;
}
#coldroite img {
border: none;
}
/* PRESENTATION mise en place du contenu de la page        ------------------- */
#bandopresentation {
width: 700px;
height: 300px;
margin: 0px;
padding: 0px 25px 0px 25px;
border: 0px;
background: url(img/salon_asso.jpg) top center no-repeat;
}
#colgauchepresent {
position: absolute;
top: 0px;
left: 25px;
margin: 0px;
padding: 0px;
width: 340px;
height: 370px;
}
#colgauchepresent p {
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 15px;
overflow: auto;
}
#sstitrepresent {
height: 25px;
margin: 0px 0px 10px 0px;
padding: 0px;
color: #ffffff;
text-align: center;
background: url(img/fondtitre.png) no-repeat top left;
}
#coldroitepresent {
position: absolute;
top: 15px;
left: 380px;
margin: 0px;
padding: 0px;
width: 340px;
height: 355px;
background-color : #cccccc;
}
/* MEMBRES mise en place du contenu de la page membres ------------------------ */
#bandomembres {
width: 700px;
height: 300px;
margin: 0px;
padding: 0px 25px 0px 25px;
border: 0px;
background: url(img/membres_asso.jpg) top center no-repeat;
}
#colgauchemembre {
position: absolute;
top: 30px;
left: 25px;
margin: 0px;
padding: 0px;
width: 220px;
text-align: center;
}
#colcentremembre {
position: absolute;
top: 30px;
left: 265px;
margin: 0px;
padding: 0px;
width: 220px;
text-align: center;
}
#coldroitemembre {
position: absolute;
top: 30px;
right: 25px;
margin: 0px;
padding: 0px;
width: 220px;
text-align: center;
}
#colcentremembre p {
padding: 0px;
margin: 0px auto 15px auto;
}
#sstitremembre {
margin: 0px 0px 15px 0px;
padding: 0px;
color: #333399;
text-align: center;
}
/* ACTIV mise en place du contenu de la page ---------------------------------- */
#bandoactiv {
width: 700px;
height: 300px;
margin: 0px;
padding: 0px 25px 0px 25px;
border: 0px;
background: url(img/activite_asso.jpg) top center no-repeat;
}
#colgaucheactiv {
position: absolute;
top: 0px;
left: 25px;
margin: 0px 0px 10px 0px;
padding: 0px;
}
#sstitreactiv {
height: 25px;
width: 340px;
margin: 0px auto 0px auto;
padding: 0px;
color: #ffffff;
text-align: center;
background: url(img/fondtitre.png) no-repeat top left;
}
#blocedition {
position: absolute;
top: 40px;
left: 20px;
margin: 0px;
padding: 0px 0px 20px 0px;
width: 220px;
background: url(img/encart/encart_bas.jpg) no-repeat bottom;
}
#blocedition h5 {
margin: 0px;
padding: 0px 0px 0px 25px;
background-image: url(img/encart/encart_haut_edition.png);
height: 30px;
color: #ffffff;
}
#blocedition p {
margin: 0px 0px 5px 0px;
padding: 0px;
background: url(img/encart/encart_milieu.jpg) repeat top;
}
#blocatelier {
position: absolute;
top: 40px;
left: 265px;
margin: 0px;
padding: 0px 0px 20px 0px;
width: 220px;
background: url(img/encart/encart_bas.jpg) no-repeat bottom;
}
#blocatelier h5 {
margin: 0px;
padding: 0px 0px 0px 25px;
background-image: url(img/encart/encart_haut_atelier.png);
height: 30px;
color: #ffffff;
}
#blocautre {
position: absolute;
top: 40px;
right: 20px;
margin: 0px;
padding: 0px 0px 20px 0px;
width: 220px;
background: url(img/encart/encart_bas.jpg) no-repeat bottom;
}
#blocautre h5 {
margin: 0px;
padding: 0px 0px 0px 25px;
background-image: url(img/encart/encart_haut_autre.png);
height: 30px;
color: #ffffff;
}
.texteactiv {
margin: 0px;
padding: 0px 10px 5px 10px;
background: url(img/encart/encart_milieu.jpg) repeat top;
}
.lien {
text-decoration: none;
color: #333399;
font-weight: bold;
}
.lien:hover, .lien:focus{
text-decoration: underline;
}
/* EVENEMENT mise en place du contenu de la page  ----------------------------- */
#bandoeven {
width: 700px;
height: 300px;
margin: 0px;
padding: 0px 25px 0px 25px;
border: 0px;
background: url(img/bando_even.jpg) top center no-repeat;
}
#colgaucheven {
position: absolute;
top: 0px;
left: 25px;
margin: 0px;
padding: 0px;
width: 340px;
height: 370px;
}
.avenir {
margin: 10px 0px 2px 10px;
padding: 0px;
}
#colgaucheven p {
margin: 0px;
padding: 0px 10px 0px 10px;
}
#colgaucheven ul {
margin: 0px 0px 0px 10px;
padding: 0px;
list-style-type: none;
}
#colgaucheven a {
text-decoration: none;
color: #333399;
font-weight: bold;
}
#colgaucheven a:hover, #colgaucheven a:focus  {
text-decoration: underline;
}
#sstitreven {
height: 25px;
margin: 0px 0px 10px 0px;
padding: 0px;
color: #ffffff;
text-align: center;
background: url(img/fondtitre.png) no-repeat top left;
}
#sstitrefest {
height: 25px;
margin: 0px 0px 10px 0px;
padding: 0px;
color: #ffffff;
text-align: center;
background: url(img/fondh5_hdb.png) no-repeat top left;
}
#coldroiteven {
position: absolute;
top: 0px;
left: 380px;
margin: 0px;
padding: 0px;
width: 340px;
height: 370px;
}
#coldroiteven h5 {
text-align: center;
margin: 0px 0px 5px 0px;
padding: 0px;
height: 25px;
}
#coldroiteven p {
text-align: center;
margin: 0px;
padding: 0px;
}
#souvfest {
margin: 0px 0px 0px 0px;
padding: 0px 10px 10px 10px;
width: 320px;
height: 150px;
}
#souvfest ul {
margin: 10px 0px 0px 0px;
padding: 0px;
height: 150px;
overflow: auto;
list-style-type: none;
text-align: center;
}
#souvfest ul li {
margin: 0px;
padding: 0px;
border-bottom: 1px #ccccff dotted;
}
#souvfest a {
display: block;
height: 15px;
color: #333333;
text-decoration: none;
margin: 0px;
padding: 0px;
}
#souvfest a:hover, #souvfest a:focus  {
color: #000000;
font-weight: bold;
border-left: 1px #333399 solid;
border-right: 1px #333399 solid;
background: #eae9e2;
}
#diapo{
margin: 10px 0px 0px 0px;
padding: 0px;
width: 340px;
height: 160px;
}
/* BOUTIQUE mise en place du contenu de la page-------------------------------- */
#bandoboutique {
width: 700px;
height: 300px;
margin: 0px;
padding: 0px 25px 0px 25px;
border: 0px;
background: url(img/bando_boutique.jpg) top center no-repeat;
}
#colgaucheboutique {
position: absolute;
top: 0px;
left: 25px;
margin: 0px;
padding: 0px;
width: 320px;
height: 370px;
}
#sstitreboutique {
border-bottom : 1px #000000 solid;
margin: 0px 0px 15px 0px;
padding: 0px;
color: #333399;
}
#coldroiteboutique {
position: absolute;
top: 0px;
left: 390px;
margin: 0px;
padding: 0px;
width: 340px;
height: 370px;
text-align: center;
overflow: auto;
}
#coldroiteboutique  h5 {
margin: 0px 0px 5px 0px;
padding: 0px;
text-align: center;
height: 30px;
color: #ffffff;
}
#hdb {
background: url(img/fondh5_hdb.png) center top no-repeat;
}
#pitiprojet {
background: url(img/fondh5_projet.png) center top no-repeat;
}
#goodies {
background: url(img/fondh5_goodies.png) center top no-repeat;
}
#coldroiteboutique ul {
margin: 0px 0px 10px 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
#coldroiteboutique ul li {
margin: 0px 5px 0px 0px;
padding: 0px;
display: inline;
text-align: bottom;
}
#revuehdb {
position: relative;
margin: 0px;
padding: 0px;
height: 110px;
}
#hdb1 {
position: absolute;
left: 0px;
margin: 0px;
padding: 0px;
}
#hdb2 {
position: absolute;
left: 70px;
margin: 0px;
padding: 0px;
}
#hdb3 {
position: absolute;
left: 130px;
margin: 0px;
padding: 0px;
}
#hdb4 {
position: absolute;
left: 200px;
margin: 0px;
padding: 0px;
}
#hdb5 {
position: absolute;
left: 260px;
margin: 0px;
padding: 0px;
}
/* CONTACT mise en place du contenu de la page contact ------------------------ */
#bandocontact {
width: 700px;
height: 300px;
margin: 0px;
padding: 0px 25px 0px 25px;
border: 0px;
background: url(img/contact_asso.jpg) top center no-repeat;
}
#colgauchecontact {
position: absolute;
top: 0px;
left: 25px;
margin: 0px;
padding: 0px;
width: 340px;
height: 370px;
}
#sstitrecontact {
height: 25px;
margin: 0px 0px 10px 0px;
padding: 0px;
color: #ffffff;
text-align: center;
background: url(img/fondtitre.png) no-repeat top left;
}
#coldroitecontact {
position: absolute;
top: 10px;
left: 380px;
margin: 0px;
padding: 0px;
width: 340px;
height: 370px;
}
.adresse {
text-align: center;
font-weight: bold;
}
/* mise en place du pied de page ---------------------------------------------- */
#pied {
margin: 0px;
padding: 5px 0px 0px 0px;
width: 750px;
height: 25px;
text-align: center;
border-top: 1px #333399 dotted;
border-bottom: 1px #333399 solid;
}
#pied a {
text-decoration: none;
color: #9999cc;
}
#pied a:hover, #pied a:focus {
text-decoration: underline;
color: #333399;
}
/* mise en place du pied de page ---------------------------------------------- */
.contenudiapo {
width: 750px;
margin: 20px 0px 10px 0px;
padding: 0px;
text-align: center;
}
#bandofest {
width: 700px;
height: 300px;
margin: 0px;
padding: 0px 25px 0px 25px;
border: 0px;
background: url(img/bando_fest.jpg) top center no-repeat;
}