@import url(reset.css);

html { font-size: 100%; }

body {
 font: 0.85em/1.3em "Trebuchet MS", Arial, Geneva, Verdana, Helvetica, sans-serif;
 color: #131F08;
 text-align: center;
 background: #2F4020 url(images/degrade.jpg) 0 0 repeat-x;
 overflow: scroll;
}

#global {
 position: relative;
 margin: 0 auto;
 width: 926px;
 text-align: left;
 background: transparent url(images/extensible.jpg) top center repeat-y;
}

#fond {
 background: transparent url(images/head.jpg) top center no-repeat;
}

a { text-decoration: none; color: #334B95; border-bottom: 1px solid #7789BF}
a:hover { text-decoration: none; color: #7789BF; border-bottom: 1px dotted #7789BF}




/* Menu */

#menu dt {
 position: absolute;
 height: 122px;
 top: 0;
 left: 0;
}

#menu dt a {
 border: 0;
 display: block;
 width: 100%;
 height: 100%;
 background: transparent url(images/menu.jpg) top left no-repeat;
}

#menu dt a span {
 background:url(images/menu) no-repeat scroll bottom left;
 display:block;
 position:absolute;
 top:0;
 left:0;
 height:100%;
 width:100%;
 z-index:100;
 opacity: 0;
}

#menu dt a span i {
 position: absolute;
 left: -9000px;
 top: 0;
}


#menu dt#id1 { width: 122px; left: 19px; }
#menu dt#id2 { width: 150px; left: 141px;  }
#menu dt#id3 { width: 155px; left: 291px; }
#menu dt#id4 { width: 112px; left: 446px;  }
#menu dt#id5 { width: 179px; left: 558px; }
#menu dt#id6 { width: 174px; left: 736px; }

#menu dt#id1 a { background-position:    0   0 }
#menu dt#id2 a { background-position: -122px 0 }
#menu dt#id3 a { background-position: -272px 0 }
#menu dt#id4 a { background-position: -427px 0 }
#menu dt#id5 a { background-position: -539px 0 }
#menu dt#id6 a { background-position: -717px 0 }


#menu dt#id1 a:hover,#menu dt#id1.here a,#menu dt#id1.here a:focus,#menu dt#id1 a span { background-position:    0   -122px }
#menu dt#id2 a:hover,#menu dt#id2.here a,#menu dt#id2.here a:focus,#menu dt#id2 a span { background-position: -122px -122px }
#menu dt#id3 a:hover,#menu dt#id3.here a,#menu dt#id3.here a:focus,#menu dt#id3 a span { background-position: -272px -122px }
#menu dt#id4 a:hover,#menu dt#id4.here a,#menu dt#id4.here a:focus,#menu dt#id4 a span { background-position: -427px -122px }
#menu dt#id5 a:hover,#menu dt#id5.here a,#menu dt#id5.here a:focus,#menu dt#id5 a span { background-position: -539px -122px }
#menu dt#id6 a:hover,#menu dt#id6.here a,#menu dt#id6.here a:focus,#menu dt#id6 a span { background-position: -717px -122px }




/* Sous-menu */

#sousmenu ul {
 position: absolute;
 top: 331px;
 right: 0;
 width: 175px;
}

#sousmenu li {
 font-size: 14px;
 font-weight: bold;
 list-style-type: none;
 height: 60px;
 margin-bottom: 10px;
 text-align: right;
}

#sousmenu li span {
 display: block;
 width: 100px;
}

#sousmenu li a {
 color: #244A71;
 border-bottom: 0;
 display: block;
 width: 100%;
 height: 100%;
 background: transparent url(images/vague_ss_menu.png) -47px bottom no-repeat;
}

#sousmenu li a:hover, #sousmenu li.here a {
 color: #40863E;
 background-position: right bottom;
}

#sousmenu li#id15 span,#sousmenu li#id17 span {
 padding-top: 15px;
}

/* Zone de contenu */

#main {
 display: inline;
 float: left;
 margin-top: 310px;
 margin-left: 60px;
 width: 805px;
 min-height: 350px;
}


#main h1 {
 font-size: 1.7em;
 color: #334B95;
 margin: 20px auto;
}

#main h2 {
 font-size: 1.4em;
 font-weight: normal;
 margin: 20px 0 12px;
 color: #20466A;
 line-height: 1.3em;
}

#main h3 {
 font-size: 1.1em;
 font-weight: bold;
 margin: 15px 0 10px;
 color: #20466A;
}

#main h4 {
 font-size: 1em;
 font-weight: bold;
 margin: 10px 0 0 0;
 color: #20466A;
}

#main p {
 margin: 10px 0;
 line-height: 1.3em;
 text-align: justify
}

#main p b {
 color: #263F10;
}

#main .photo {
 float: right;
 margin: 0 0 10px 10px;
 text-align: center;
 font-size: 10px;
 color: #334B95;
 font-family: Verdana, sans-serif;
 border: 10px white solid;
 -moz-border-radius: 5px;
}

#main .photo img {
 float: none;
 display: block;
 margin: 0 auto;
}

#main ol li {
 list-style-type: decimal
}

#main ul,#main ol {
 margin: 0.5em auto 1em 1.3em;
}

#main ol {
 margin-left: 2.6em;
}

#main ul li {
 line-height: 1.4em;
 list-style-type: square;
}



/* Spécificité */

.s2 #main {
 width: 670px;
}

#p10 #main .photo {
 float: left;
 margin: 0 20px 20px 0;
}

#p10 #main h4 {
 margin-bottom: -10px;
}



/* Page d'accueil */


#p1 #main {
 margin: 300px 0 0 44px;
 width: 838px;
}
#p1 h1 { display: none }
#p1 #left p.intro { margin: 50px 0 -40px 45px }
#p1 #left p {
 color: #2F4020;
 font-size: 1.2em;
 font-style: italic;
 font-weight: bold;
 line-height: 1.2em;
 margin: 45px 0px 45px 45px;
 width: 425px;
}

#left {
 display: inline;
 width: 518px
}

#right {
 display: inline;
 float: right;
 width: 320px;
}

#right .bloc {
 width: 240px;
 margin: 42px auto 45px;
 padding-top: 35px;
}

.bloc#actu { background: transparent url(images/actualite.png) top left no-repeat; }
.bloc#boutique { background: transparent url(images/boutique.png) top left no-repeat; }

.bloc#actu ul {
 font-size: 11px;
 margin: 0px auto -10px 2em;
}

#p1 #right h2 {
 font-size: 12px;
 font-weight: bold;
 margin: 20px 8px 5px;
}

#p1 #right p {
 font-size: 11px;
 margin: 5px 8px;
 font-weight: normal;
 font-style: normal;
 text-align: justify;
}

#pelemele {
 width: 421px;
 height: 396px;
 position: relative;
 margin: 60px auto 20px 45px;
 background-image: url(images/pelemele.jpg);
}

#pelemele a { border: 0 }
#pelemele a span { position: absolute; left: -9000px }


#communes {
 position: absolute;
 top: 0;
 left: 0;
 width: 430px;
 height: 320px;
}

#cc {
 position: absolute;
 top: 330px;
 left: 30px;
 width: 80px;
 height: 80px;
}

#onf {
 position: absolute;
 top: 330px;
 left: 130px;
 width: 170px;
 height: 80px;
}

#cga {
 position: absolute;
 top: 330px;
 left: 320px;
 width: 80px;
 height: 80px;
}

/* Footer */

#footer {
 position: relative;
 margin: 30px auto 0;
 height: 80px;
 background: #2F4020 url(images/footer.jpg) top center no-repeat;
}

#baseline {
 position: absolute;
 top: 30px;
 left: 24px;
}

#baseline li {
 display: inline;
 list-style-type: none;
 padding: 0 7px 0 2px;
 border-right: 1px #819F63 solid;
 font-size: 13px;
}

#baseline li.last {
 border-right: 0;
}

#baseline li a { color: white; border: 0 }
#baseline li.here a, #baseline li a:hover { color: #A7BF8F; border: 0 }

#btt {
 position: absolute;
 top: 50px;
 left: 26px;
 color: #819F63;
 font-size: 11px;
}
#btt a { color: #819F63; border: 0 }
#btt a:hover { color: white; border: 0 }

#credit {
 position: absolute;
 width: 300px;
 top: 50px;
 right: 26px;
 color: #819F63;
 font-size: 11px;
 text-align: right;
}

#credit a { color: #A7BF8F; border: 0 }
#credit a:hover { color: white; border: 0 }





.spacer {
 clear: both;
}