@import url(reset.css);

@font-face {
    font-family: Aaargh;
    src: url("../../fonts/Aaargh.ttf") format("truetype");
}

html {
 font-size: 100%;
 background: #B4E53B url(images/bg-header.jpg) top left repeat-x;
}

body {
 font: 0.85em/1.3em "Trebuchet MS", Verdana, Helvetica, Arial, Geneva, sans-serif ;
 color: #0F1F00;
 color: #2F0F19;
 text-align: center;
 overflow: scroll;
 background: transparent url(images/header.jpg) top center no-repeat;
}

#global {
 position: relative;
 margin: 0 auto;
 width: 960px;
 text-align: left;
}


a { text-decoration: none; color: #A31D58; border-bottom: 0spx solid #A31D58}
a:hover { text-decoration: none; color: #BF5385; border-bottom: 1px solid #A31D58}



#header h1 {
 position: absolute;
 top: 40px;
 width: 395px;
 height: 70px;
}

#header h1 a {
 display: block;
 width: 100%;
 height: 100%;
 border: 0;
}

#header h1 span {
 position: absolute;
 top: -9000px;
}

#header h2 {
 position: absolute;
 top: 120px;
 left: 5px;
 font-size: 14px;
 color: white
}

/* Menu */

#menu ul {
 position: relative;
 top: 170px;
 left: 0px;
}

#menu li {
 display: inline;
 margin: 0 2px;
 list-style: none none;
}

#menu a {
 padding: 5px 7px;
 line-height: 1.4em;
 border: 0;
 text-decoration: none;
 color: white;
 font-size: 11px;
 font-family: Verdana, sans-serif;
 background: transparent url(images/fond-menu.png) top left repeat-x;
 border-radius: 4px;
 -o-border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 text-transform: uppercase;
 box-shadow: 0px 0 5px #488A06;
 -o-box-shadow: 0px 0 5px #488A06;
 -moz-box-shadow: 0px 0px 5px #488A06;
 -webkit-box-shadow:0px 0 5px #488A06;
}

#menu a:hover {
 background-position: bottom left;
 box-shadow: 0px 0 2px #fff;
 -o-box-shadow: 0px 0 2px #fff;
 -moz-box-shadow: 0px 0px 2px #fff;
 -webkit-box-shadow:0px 0 2px #fff;
}

#menu li.here a {
color: #274F00;
color: #E2FA06;
color: white;
 background-position: bottom left;
 -moz-box-shadow: 0px 0px 10px #fff;
}


/* Sommaire */

#sommaire {
 position: absolute;
 top: 310px;
 right: 20px;
 width: 290px;
 margin: 0 0 20px auto;
 text-align: right;
}

#sommaire h3 {
 font-family: Aaargh;
 font-size: 1.2em;
 color: #A2144E;
 width: 100%;
 padding-bottom: 5px;
 border-bottom: 2px #EFE0E6 solid;
}

#sommaire ul {
 margin-bottom: 60px;
}

#sommaire li {
 list-style: none none;
 border-bottom: 1px solid #EFEFEF;
}

#sommaire li a {
 color: #8A8F86;
 border: 0;
 line-height: 3em;
 display: block;
 width: 100%;
 height: 100%;
}

#sommaire li a:hover {
 color: #B8BFB3;
}

#sommaire a.bas {
 position: absolute;
 bottom: 0;
 right: 0px;
 border: 0;
 display: block;
 width: 27px;
 height: 37px;
 background: transparent url(images/fleche.jpg) right top no-repeat;
}

#sommaire a.haut {
 position: absolute;
 bottom: 0;
 right: 30px;
 border: 0;
 display: block;
 width: 27px;
 height: 37px;
 background: transparent url(images/fleche.jpg) left top no-repeat;
}


/* Zone de contenu */

#content {
 margin-top: 270px;
 width: 960px;
 background: white;
}


#main {
 position: relative;
 margin: 50px 0 0 20px;
 padding-bottom: 20px;
 width: 600px;
 min-height: 650px;
}


#main h1, #decouvrez h1 {
 font-family: Aaargh;
 position: absolute;
 font-size: 1.8em;
 color: #A2144E;
 top: -50px;
  left: 0;
 width: 100%;
 padding-bottom: 10px;
 border-bottom: 2px #EFE0E6 solid;
}

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

#main h2 span, #main h3 span {
 font-size: 0.7em;
}

#main h3 {
 font-size: 1.2em;
 font-weight: bold;
 margin: 15px 0 10px;
 color: #8FC340;
}

#main h4, #main dt, #main dt a {
 font-size: 1.05em;
 font-weight: normal;
 margin: 10px 0 0 0;
 color: #81AF36;
}

#main dt a:hover {
 border: 0;
 color: #A8C874;
}

#main h4 span, #main dt span {
 color: #2F0F19;
 padding-left: 10px;
 font-weight: bold;
}

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


#main img.gauche {
 float: left;
 margin: 5px 10px 10px 0;
}

#main img {
 float: right;
 margin: 5px 0 10px 10px;
 padding: 10px;
 border: 1px solid #EFEFEF;
}

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

#main ul,#main ol {
 margin: 0.5em auto 1em 0;
 text-align: justify
}

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

#main ul li {
 line-height: 1.3em;
 margin-bottom: 3px;
 list-style: none none;
 padding-left: 20px;
 background: transparent url(images/puce.png) left 2px no-repeat;
}

#main li li {
 padding-left: 15px;
 background: transparent url(images/souspuce.png) left 5px no-repeat;
}


td {
 padding: 3px 0px;
 border-bottom: 1px solid #EFD095;
}

table {
 margin-top: -5px
}

.col1 { width: 80px }
.col2 { width: 190px }


/* Spécificité */


/* Page d'accueil */

#gauche img  {
 float: left;
 margin: 0px 5px 0 0;
 border: 0;
 padding: 0;
}

#main #gauche dt  {
 padding-left: 20px;
 background: transparent url(images/puce.png) left 2px no-repeat;
 font-size: 1.2em;
 margin: 15px auto 5px;
}

#gauche ul li  {
 background-image: none;
 border-bottom: 1px solid #EFE0E6;
 padding: 5px 0 0 0;
 font-size: 0.8em;
 text-align: left;
 font-family: Verdana;
 margin-bottom: 0;
 line-height: 1.2em;
 height: 78px;
}

#gauche ul a  {
 display: block;
 width: 100%;
 height: 100%;
 border: 0;
 text-decoration: none;
 color: #9F9F9F;
 margin: 0;
}

#gauche ul a:hover  {
 color: #5F5F5F;
}

#gauche span  {
 display: block;
 color: #D79416;
 font-size: 1.2em;
 margin: 0 0 5px 0;
}

#gauche br  {
 border: 0;
 height: 0;
 clear: both;
}


#main #gauche h1 {
 position: relative;
 top: 0;
 margin: 30px auto 0px 0
}

#gauche, #centre  {
 float: left;
 width: 290px;
 height: 400px;
 margin-right: 20px
}

#centre {
 margin-right: 0
}

#centre ul li {
 padding-left: 0;
 text-indent: 20px;
 list-style-position: inside
}

#droite {
 position: absolute;
 top: -1px;
 right: -320px;
 width: 290px;
 margin: 0 0 20px auto;
}

#droite h2 {
 margin-top: 2px;
}


/* Footer */

#footer {
 margin: -20px auto 0px;
 height: 332px;
 text-align: left;
 color: white;
 font-size: 0.85em;
 background: #B4E53B url(images/footer.jpg) top center no-repeat;
}

#footer .in {
 position: relative;
 width: 960px;
 margin: 0px auto 20px;
}

#footer #top {
 display: none;
 position: absolute;
 top: 325px;
 right: -19px;
 width: 27px;
 height: 84px;
 background: transparent url(images/top.png) left top no-repeat;
}

#footer #top:hover {
 background-position: right top;
 border: 0 ;
}

#footer a { color: white }
#footer a:hover { color: #FDFF3F; border-bottom: 1px solid #FDFF3F }



#footer p {
 margin: 0.3em auto 0.7em;
}

#footer li {
 list-style: none none;
}

#bloc1 {
 position: absolute;
 top: 200px;
 left: 20px;
 color: white;
 width: 290px;
 font-size: 1.2em;
 text-align: center;
}


#bloc1 h3 {
 font-weight: bold;
 margin-bottom: 0em;
 font-size: 1.2em;
}

#bloc2 {
 color: white;
 font-size: 0.9em;
 text-align: center;
}

#subnav {
 position: absolute;
 top: 207px;
 left: 352px;
 font-weight: bold;
 font-size: 1.3em;
 line-height: 1.5em;
 background: transparent url(images/favicon.png) center top no-repeat;
 padding-top: 35px;
}

#credits {
 position: absolute;
 top: 262px;
 left: 561px;
 margin-top: 5px;
}

#credits a {
}

sup {
 vertical-align: super;
 font-size: 0.7em;
}
.fushia { color: #A2144E !important }
.orange { color: #D79314 !important }
.petit { font-size: 0.85em }
p.gauche { text-align: left !important }
p.droite { text-align: right !important }
.spacer { clear: both }

.separateur {
 height: 70px;
 padding-top: 15px;
 margin: 0 auto 15px;
 clear: both;
 background: transparent url(images/separateur.png) center bottom no-repeat;
}