@import url(reset.css);

/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */


@font-face {
    font-family: Fontin_Sans_R;
    src: url("http://www.sougraigne.net/assets/fonts/Fontin_Sans_R_45b.otf") format("opentype");
}

/*
@font-face {
    font-family: GraublauWeb;
    src: url(../../fonts/GraublauWeb.otf) format("opentype");
}



@font-face {
    font-family: Delicious-Roman;
    src: url(../../fonts/Delicious-Roman.otf) format("opentype");
}
@font-face {
    font-family: Delicious-Bold;
    src: url(../../fonts/Delicious-Bold.otf) format("opentype");
}




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

html { font-size: 100%; }

body {
 font: 0.8em/1.3em "Trebuchet MS", Arial, Verdana, Geneva, Helvetica, sans-serif;
 color: white;
 text-align: center;
 background-color: #484F09;
}

#global {
 position: relative;
 width: 1035px;
 text-align: left;
 background: transparent url("http://www.sougraigne.net/assets/templates/Sougraigne/images/extensible.jpg") top center repeat-y;
 margin: 0 auto;
}

#fond {
 background: transparent url("http://www.sougraigne.net/assets/templates/Sougraigne/images/head.jpg") top center no-repeat;
}

/*****************/
/* Sticky Footer */
/*****************/
/* Penser à ajuster la hauteur du footer dans #main et dans #footer */
html, body, #global {height: 100%;}
body > #global {height: auto; min-height: 100%;}
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */




/* Styles globaux */

a { color: #FFE900; text-decoration: none }
a:active  { color: #FFFABF; border-bottom: 0}
a:link    { border-bottom: 0px solid #99A845}
a:hover   { color: #FFFABF; border-bottom: 0}
a:visited { border-bottom: 0}



h1 {
 font-family: Fontin_Sans_R, "Trebuchet MS";
 font-size: 1.6em;
 color: #FFE900;
 margin: 15px auto 20px 75px;
 text-shadow: 0px 1px 4px #000;
}

h2 {
 font-family: Fontin_Sans_R, "Trebuchet MS";
 font-size: 1.3em;
 font-weight: normal;
 color: #FFE900;
 text-shadow: 0px 1px 2px #586700;
 margin: 20px 20px 0px 20px;
}

h3 {
 font-size: 1em;
 color: #FFE900;
 margin: 10px 20px -5px 20px;
 text-shadow: 0px 1px 2px #586700;
}

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

p {
 margin: 10px 20px;
 text-align: justify
}

ul {
 margin: 10px 20px 10px 10px;
}

li {
 text-align: justify;
 list-style: none;
 padding-left: 20px;
 background: transparent url(images/puce-normal.png) 7px 4px no-repeat;
}

/****** Le retour vers l'accueil ********/

a#top {
 position: absolute;
 top: 50px;
 right: 60px;
 width: 740px;
 height: 180px;
 border: 0
}


a#top span {
 position: absolute;
 left: -3000px;
 top: -3000px;
}

/****** Décorations ********/


#fee1 {
 position: absolute;
 top: 170px;
 right: 320px;
}

#fee2 {
 position: absolute;
 top: 170px;
 left: 460px;
}

#lutin {
 position: absolute;
 top: 260px;
 right: 70px;
 z-index: 100
}


/** Plus d'info **/

.plus, #colonne .plus {
 display: none;
 text-align: right;
 margin: 15px 10px 0 auto;
}

.plus a {
 padding: 0px 0 2px 22px;
 border: 0;
 background: transparent url("http://www.sougraigne.net/assets/templates/Sougraigne/images/icones/plus.png") top left no-repeat;
}

.plus a:hover {
 background-image: url("http://www.sougraigne.net/assets/templates/Sougraigne/images/icones/plus-hover.png");
}

/****** Styles du Menu ******/

#menu {
  position: absolute;
  top: 209px;
  left: 70px;
  width: 900px;
  border-bottom: 1px #FEC00B solid;
  display: table;   /* Allow the centering to work */
  margin: 0 auto;
  padding-bottom: 5px;
  display: none

}

#menu ul {
 margin: 0 auto;
 border-bottom: 0;
 text-align: center;
  visibility: hidden;
}

#menu ul li {
 display: inline !important;
 list-style: none;
 padding: 0 20px 0;
 text-align: center;
 font-size: 1.7em;
}

#menu a {
 border-bottom : 0;
 padding: 0;
 color: #F9BF03;
 text-shadow: 0px 1px 4px #000;
}

#menu a:hover {
  background-image: none;
  background-color: transparent;
  color: #FFD75F;
}

/* Centre */

#centre {
 width: 100%;
 padding-top: 310px;
 padding-bottom: 305px; /* sticky footer, même valeur que #footer */
}

img.photo {
 float: right;
 margin: 0 20px 10px 10px;
 border: 10px #B1BF5F solid;
 -moz-border-radius: 10px;
}


/* Colonne */

#colonne {
 float: right;
 display: inline;
 margin: 0px 62px 0 0;
 width: 300px;
}

.bloc {
 position: relative;
 width: 100%;
 background-color: #909F3B;
 margin-bottom: 25px;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 box-shadow: 0px 5px 10px #2F3600;
 -moz-box-shadow: 0px 2px 10px #2F3600;
 -webkit-box-shadow:0px 2px 10px #2F3600;

}

.bloc div {
 padding: 10px 0;
 position: relative;
}

.bloc .icone {
 position: absolute;
 top: -20px;
 left: -20px;
}

#colonne p, #colonne li {
 text-align: left;
}

/* Zone de contenu */

#main {
 margin-left: 62px;
 width: 586px;
}



/* Spécificités des blocs */

#bai, #bap {
 float: left;
 width: 280px;
}

#bai {
 margin-right: 26px;
}

#login .icone {
 top: -40px;
 left: -20px;
}

#firefox  {
 display: none;
}

/* Login */

#login p {
 margin: 0 20px 10px;
}

#login p.log {
 clear: both;
 margin: -1px 20px 0;
 border: 1px solid #B1BF5F;
 border-width: 1px 0;
}

#login label {
 float: left;
 width: 120px;
 text-align: right;
 padding-right: 10px;
 font-weight: bold;
 margin-top: 5px;
}

#login input, #login button {
 color: white;
 width: 120px;
 border: 1px solid #586700;
 background: #717F1F url("http://www.sougraigne.net/assets/templates/Sougraigne/images/fond-input.jpg") top left repeat-x;
 -moz-border-radius: 2px;
 padding: 0 2px;
 margin: 6px 0;
}

#login input:focus, #login input:hover, #login button:hover {
 border-color: #303500;
}

#login p.submit, #login fieldset {
 margin: 20px 20px 0px;
 text-align: right;
}

#login p.submit input, #login button {
 color: white;
 padding: 3px 5px;
}

#wlpeUserInfo, #wlpeWelcome {
 margin: 0;
 padding: 0
}

/* Chorale */



.chanson {
 padding-left: 20px;
 background: transparent url(images/icones/note2.png) left top no-repeat;
}

.chanson span {
 display: block;
 float: left;
 width: 200px;
 line-height: 20px;
}

.chanson a {
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 line-height: 20px;
 margin: 0 5px;
 background: transparent url(images/icones/paroles2.png) top left no-repeat;
}

.chanson .player {
 display: block;
 float: left;
 background: none;
}
/*
.player {
 padding-left: 45px;
 background: transparent url(images/icones/note.png) top left no-repeat;
}
*/

.proposition {
 padding-left: 20px;
 background: transparent url(images/icones/fleche.png) left 2px no-repeat;
}

.proposition span {
 display: block;
 float: left;
 width: 230px;
}

/* Les pros */

.coordonnees {
 margin: 0 20px 0 20px;
}

.coordonnees li {
 list-style-type: none;
 list-style-image: none;
 padding-left: 20px;
 background: transparent top left no-repeat;
}

#pros p.description { margin: 5px 20px 5px }
.coordonnees .phone { background-image: url("http://www.sougraigne.net/assets/templates/Sougraigne/images/phone.png") }
.coordonnees .mail  { background-image: url("http://www.sougraigne.net/assets/templates/Sougraigne/images/mail.png") }
.coordonnees .web   { background-image: url("http://www.sougraigne.net/assets/templates/Sougraigne/images/web.png") }

/* Footer */

#footer {
 width: 1035px;
 position: relative;
 margin: -305px auto 0; /* Sticky footer, valeur négative pour margin-top */
 height: 305px; /* Sticky footer */
 clear: both; /* Sticky footer */
 background: transparent url("http://www.sougraigne.net/assets/templates/Sougraigne/images/footer.jpg") top center no-repeat;
}


#btt {
 position: absolute;
 bottom: 6px;
 left: 55px;
 font-size: 1em;
 text-shadow: 0px 1px 2px #000;
}
#btt a, #credit a { color: white }
#credit a:hover { color: #FFE900 }
#credit {
 position: absolute;
 width: 300px;
 bottom: 6px;
 right: 55px;
 font-size: 1em;
 text-align: right;
 text-shadow: 0px 1px 2px #000;
}






.spacer { clear: both }
.hidden { display: none }
.noborder { border: 0 !important }