/**
 * $Revision: 2771 $
 */
/*
    #d1ac44 Doré.
    #e2e2e2 Gris.
  #b08957 Brun planche
  #d5c0a6 Brun planche pâle
  #997E32 Doré plus foncé
  #8d0000 Rouge annulation
  #fcc    Rouge annulation
  #00008d Bleu spécial
  #ccf    Bleu spécial

  Menu:               FULL                              Menu caché
  #455868 red         Fond du bouton
  #283744 green       Ombre et séparation fin du menu   Couleur du lien pour afficher le menu
  #fff                Texte des boutons
  #576979 blue        Séparations entre les boutons
  #8c99a4 blueviolet  Fond du bouton (hover)

  #455868 F  8b4d34 #96754A
  #283744 FF 58372e #705737
  #fff    PP f2b265 #FCC57D
  #576979 M  c06f3d #B08957
  #8c99a4 P  f29542 #BD935D

Mobile portrait (320x480)
Mobile landscape (480x320)
Small tablet portrait (600x800)
Small tablet landscape (800x600)
Tablet portrait (768x1024)
Tablet landscape (1024x768)
*/
/* @note ne plus faire de width, mais max-width (IE7+) */
/* @todo Vérifier si je suis OK comme ça! Pour que si je spécifie 500px de width, le padding et le border size ne dérange pas! */
/* @see http://learnlayout.com/box-sizing.html
   @note IE8+ */
*
{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/**
 *
 * @see http://webdesign.tutsplus.com/tutorials/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972
 **/
@viewport
{
  zoom: 1.0;
  width: extend-to-zoom;
}
/* For IE10 "snap mode". */
@-ms-viewport
{
  zoom: 1.0;
  width: extend-to-zoom;
}

body
{
    font-family: "Segoe UI", Arial, "sans serif";
    background-image: url('../images/plancher_background.png');
  background-color: #d5c0a6; /* Brun planche pâle */
}

/* Section centrale contenant le site entier. */
div#container
{
  max-width: 758px;
  min-width: 200px;
    background-color: white;
    /* Centre la section. */
    margin-left: auto;
    margin-right: auto;
    border: 4px solid #d1ac44; /* Doré. */
}

h1#header
{
  background: white url('../images/header.png') no-repeat center top;
    height: 233px;
  padding: 180px 310px 0 0;
  margin: 0;
  color: black;
}

/* Copyrights */
div#copyright, div#right
{
    text-align: center;
    font-weight: bold;
}

div#copyright
{
    font-size: x-small;
  padding-top: 1em;
}

div#right
{
    font-size: xx-small;
    margin-bottom: 1em;
}

/* Photo des professeurs (écran très large). */
div.contact
{
    background: url('../images/contact_photo.png') no-repeat 90% 6.3em;
}

/* Photo sur la page d'accueil. */
div.accueil
{
    margin-left: 0;
    padding-left: 240px;
    background: url('../images/photos_accueil.png') no-repeat left center;
}

/* Photos des lieux des cours. */
div#levis
{
  padding-left: 250px;
  background: url('../images/maison_des_scouts_bordure_floue.png') no-repeat left center;
}
div#stapollinaire
{
  padding-left: 250px;
  background: url('../images/salle_communautaire_st-apollinaire_bordure_floue.png') no-repeat left center;
}
div#philippeboucher
{
  padding-left: 250px;
  background: url('../images/espace_philippe_boucher_bordure_floue.png') no-repeat left center;
  min-height: 195px;
}
div#stemarie_maribel
{
  padding-left: 250px;
  background: url('../images/ecole_maribel_ste-marie_bordure_floue.png') no-repeat left center;
  min-height: 180px;
}
div#stemarie_centre_recreatif
{
  padding-left: 250px;
  background: url('../images/centre_recreatif_ste-marie_bordure_floue.png') no-repeat left center;
  min-height: 269px;
}
div#stemarie_estival
{
  padding-left: 250px;
  background: url('../images/place_de_la_cite_centre_caztel_ste-marie_bordure_floue.png') no-repeat left center;
}

div#featured_video
{
  height: 400px;
    /*width: 425px;*/
    max-width: 500px;
    /*margin-top: 35pt; /* @todo p-e qu'on peut mettre ca ailleurs */
    padding: 0.6em;
    /* Centre le vidéo. */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Liste des danses. */
ul.danses
{
    -moz-column-count: 2;
    -moz-column-gap: 1em;
    -webkit-column-count: 2;
    -webkit-column-gap: 1em;
    column-count: 2;
    column-gap: 1em;
}

span.courriel
{
  white-space: nowrap;
}

p.courriel
{
  text-align: left;
}

/* Encadré indiquant la date de début d'un événement. */
/* @see www.sitepoint.com/create-calendar-icon-html5-css3 */
time.icon
{
  font-size: 1em; /* change icon size */
  display: block;
  /*position: relative;*/
  position: absolute;
  top: 1.5em;
  left: 0;
  width: 7em;
  height: 7em;
  background-color: #fff;
  border-radius: 0.6em;
  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
  overflow: hidden;
  margin: 0.5em;
}

time.icon *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

/* Le mois. */
time.icon strong
{
  position: absolute;
  top: 0;
  padding: 0.4em 0;
  color: #fff;
  background-color: #96754A;
  border-bottom: 1px dashed #d1ac44;
  box-shadow: 0 2px 0 #96754A;
  text-transform: capitalize;
}

/* Le jour de la semaine. */
time.icon em
{
  position: absolute;
  bottom: 0.3em;
  color: #96754A;
  text-transform: lowercase;
}

/* Le jour. */
time.icon span
{
  font-size: 2.8em;
  letter-spacing: -0.05em;
  padding-top: 0.7em;
  color: #2f2f2f;
}
/* Fin de «Encadré indiquant la date de début d'un événement.» */

/* Prochaine sorties et Plan du site. */
.sortie dl
{
  margin-left: 9em;
}

dl
{
  margin: 15px;
}

dt
{
    font-weight: bold;
}

dd.url a
{
    font-size: small;
}
/* Fin de Prochaine sorties. */

/* Espace légèrement les listes numérotées. */
ol li
{
    margin: 0.5em;
}

/* Menu horizontal. */
/* @todo Venir corriger le tout. */
ul.menu
{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.menu li
{
    float: left; /* Pour IE. */
}

ul.menu li a
{
    display: block;
    float: left;
    width: 125px;
    line-height: 55px; /* Hauteur de l'image de fond. */
    background: #b08957 url(../images/planche_menu.png) repeat-x;
    color: #e2e2e2; /* Gris. */
    text-decoration: none;
    text-align: center;
}

.sticky
{
    position: sticky;
    top: 0;
    z-index: 1;    
}

/**
 * Permettre aux ancrages de s'afficher au bon endroit avec un entête fixe.
 * @see https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors
 **/
:target::before
{
    content: "";
    display: block;
    height: 110px; /* fixed header height */
    margin: -110px 0 0; /* negative fixed header height */
}

nav {
    height: 55px;
    width: 100%;
    background: #455868; /* Bleu du modèle. */
  /*background: #b08957; /* Couleur de mon ancien menu. */
  background: #96754A;
  /**/  background: #96754A url(../images/Planche_Sans_Biseau_Ni_Ombre.png);/**/
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid #283744;
    /*border-bottom: 2px solid #d19a00;*/
    border-bottom: 2px solid #705737;
}
nav ul {
    padding: 0;
    margin: 0 auto;
    width: 750px;
    height: 55px;
}

nav li {
    display: inline;
    float: left;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

nav a {
    color: #fff;
  /*color: #FCC57D;*/
    display: inline-block;
    width: 125px;
    text-align: center;
    text-decoration: none;
    line-height: 55px; /* Hauteur de l'image de fond. */
/*  background: #96754A url(../images/Planche_Sans_Biseau_Ni_Ombre.png) repeat-x;/**/
    text-shadow: 1px 1px 0px #283744;
    text-shadow: 1px 1px 0px #705737;
}

nav li a {
    border-right: 1px solid #576979;
  border-right: 1px solid #B08957;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
nav li:last-child a {
    border-right: 0;
}

nav a:hover, nav a:active {
    background-color: #8c99a4;
  background-color: #BD935D;
  /*opacity: 0.7;
  filter: alpha(opacity=70); pas sur */
}

nav a#pulltop, nav a#pullbottom{
    display: none;
}

/* Pour un bouton supplémentaire dans le menu. */
.dansons-en-coeur
{
	margin: 0;
	padding: 0.5em 1em;
	text-align: right;
}

/* @see http://learnwebtutorials.com/how-make-link-into-css-button */
.buttonLink
{
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid #900;
    background-color: #df0000;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 3px 4px 1px rgba(0, 0, 0, .2) inset,
    2px 2px 4px 1px rgba(0, 0, 0, .5);
    text-shadow: 2px 2px 3px #444;
    background-image: -webkit-linear-gradient(top, #9f0000, #ff0000);
    background-image: -linear-gradient(to bottom, #9f0000, #ff0000);
}
.buttonLink:hover
{
    background-color: #f00;
    text-decoration: none;
    background-image: -webkit-linear-gradient(top, #ff0000, #9f0000);
    background-image: -linear-gradient(to bottom, #ff0000, #9f0000);
}

@media screen and (max-width: 790px) { /* 2 * 8px (body margins) + 2 * 4px (div container border) + width 750px */
    nav {
        height: auto;
    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
    }
    nav li {
        width: 50%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #576979;
        border-bottom: 1px solid #B08957;
        border-right: 1px solid #576979;
        border-right: 1px solid #B08957;
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
    /*h1, h2{
    background-color: red;
    }/**/

  /* Photo des professeurs (écran large, HTC One en mode paysage). */
  div.contact
  {
    padding-bottom: 140px; /* 220px (photo) - 50px (logo Facebook) - 2 * (15px) (margin-top-bottom) */
    background: url('../images/contact_photo.png') no-repeat center bottom;
  }

  h1#header
  {
    background: white url('../images/logo_cc_lover_rond_transparent_200x200.png') no-repeat 10% 0%;
    height: 200px;
    padding: 70px 0 0 200px;
  }

  body
  {
    background-image: none;
  }

  /* Espace légèrement les listes numérotées. */
  ol li
  {
    margin: 1em;
  }

  /* Liste des danses. */
  .danses li
  {
    margin: 0 0 1em 0;
  }

  /* Liens vers les lettres des danses. */
  h4 a
  {
    margin: 1em;
  }
  h4 a.retour
  {
    margin: 0;
  }
  
}

@media only screen and (max-width : 790px) {
    nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pulltop, nav a#pullbottom {
        display: block;
        background-color: #283744;
    background-color: #705737;
    /**/    background: #705737 url(../images/Planche_Sans_Biseau_Ni_Ombre.png) repeat-x;/**/
    /**/    background: #705737 url(../images/Planche_Sans_Biseau_Ni_Ombre_Fonce.png) repeat-x;/**/
        width: 100%;
        position: relative;
    }
    nav a#pulltop:after, nav a#pullbottom:after {
        content:"";
        background: url('../images/nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 7px;
        top: 17px;
    }
    /*h1, h2{
    background-color: blue;
    }/**/

  h1#header
  {
    background: white url('../images/logo_cc_lover_rond_transparent_200x200.png') no-repeat center top;
    height: auto;
    padding: 200px 0.5em 0 0.5em;
  }

  /* Photo des professeurs (écran étroit, HTC One en mode portrait). */
  div.contact
  {
    padding-bottom: 205px; /* 220px (photo) - 15px (margin-bottom logo Facebook) */
    background: url('../images/contact_photo.png') no-repeat center bottom;
  }

  /* Photo sur la page d'accueil. */
  div.accueil
  {
    padding-left: 0;
    padding-bottom: 475px;
    background: url('../images/photos_accueil.png') no-repeat center bottom;
  }

  /* Photos des lieux des cours. */
  div#levis
  {
    padding-left: 0;
    padding-bottom: 150px;
    background: url('../images/maison_des_scouts_bordure_floue.png') no-repeat center bottom;
  }
  div#stapollinaire
  {
    padding-left: 0;
    padding-bottom: 158px;
    background: url('../images/salle_communautaire_st-apollinaire_bordure_floue.png') no-repeat center bottom;
  }
  div#philippeboucher
  {
    padding-left: 0;
    padding-bottom: 190px;
    background: url('../images/espace_philippe_boucher_bordure_floue.png') no-repeat center bottom;
  }
  /* @todo */ 
  div#stemarie_maribel
  {
    padding-left: 0;
    padding-bottom: 190px;
    background: url('../images/ecole_maribel_ste-marie_bordure_floue.png') no-repeat center bottom;
  }
  div#stemarie_centre_recreatif
  {
    padding-left: 0;
    padding-bottom: 279px;
    background: url('../images/centre_recreatif_ste-marie_bordure_floue.png') no-repeat center bottom;
  }
  div#stemarie_estival
  {
    padding-left: 0;
    padding-bottom: 177px;
    background: url('../images/place_de_la_cite_centre_caztel_ste-marie_bordure_floue.png') no-repeat center bottom;
  }
  div#stemarguerite
  {
    padding-left: 0;
    padding-bottom: 165px;
    background: url('../images/salle-municipale-ste-marguerite-bordure-floue.png') no-repeat center bottom;
  }

  div#featured_video
  {
    height: 250px;
  }

  /* Pour un bouton supplémentaire dans le menu. */
  .dansons-en-coeur
  {
  	text-align: center;
  }

  /* Liste des danses. */
  .danses li
  {
    width: 100%;
  }

  /* Encadré indiquant la date de début d'un événement. */
  time.icon
  {
    position: relative; /* @todo Venir placer la date au centre de la sortie... */
    top: 0.5em;
    margin-left: auto;
    margin-right: auto;
  }
  /* Fin de «Encadré indiquant la date de début d'un événement.» */
  /* Prochaine sorties. */
  .sortie dl
  {
    margin: 15px;
  }
  /* Fin de Prochaine sorties. */

}

@media only screen and (max-width : 320px) {
    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
        border-bottom: 1px solid #B08957;
    }
    /*h1, h2{
    background-color: green;
    }/**/
  /* Photo des professeurs (écran très étroit, plus étroit que mon HTC One en mode portrait). */
  div.contact
  {
    padding-bottom: 0;
    background-image: none;
  }

  span.courriel
  {
    white-space: normal;
  }
}

.introduction p
{
    text-align: center;
    font-size: 13pt;
    color: #d1ac44; /* Doré. */
    margin: 0.2em;
    padding: 0 2em;
}

.spacer
{
    clear: both;
}

/* Liens */
a, span.futurLink
{
    color: #d1ac44; /* Doré. */
    /*color: #997E32; /* Doré plus foncé. */
    font-weight: bold;
    text-decoration: none;
}

a:hover
{
    text-decoration: underline;
}

a.maps
{
    background-image: url('../images/logo-google-maps.png');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;

    /* Permet de voir le logo de Google Maps au complet. */
    display: inline-block;    
    min-height: 21px;
}

/* Ajoute une icône "nouveau" à droite des nouveautés. */
.nouveau
{
    background-image: url('../images/nouveau.png');
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 60px;
  min-height: 24px;
}

span.futurLink, span.infobulle
{
    border-bottom: 2px dotted #d1ac44; /* Doré */
  cursor: help; /* Curseur avec un point d'interogation à côté. */
}

p, div.sortie
{
    margin: 15px;
    text-align: justify;
}

h1, h2, h3, h5, h6
{
    padding-left: 15px;
    padding-right: 15px;
    color: #d1ac44; /* Doré. */
    clear: both;
}

h1, h2, h3
{
    text-align: center;
}

h4, h4 a
{
    color: black;
    clear: both;
    position: relative;
}

.retour
{
    position: absolute;
    top: 0.4em;
    right: 0.9em;
    /*
    Autre solution potable.
    font-size: small;
    margin: 0.1em 0.6em 0 0;
    */
    font-size: x-small;
}

table, div.cours, div.liste, h4, ul.danses
{
    margin: 1em;
    /* Centrer le tableau. */
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

th, div.sortie h3.nom, div.cours div.titre, h4
{
    background-color: #d1ac44; /* Doré. */
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
}

th a
{
    color: black;
}

td.photo
{
    width: 250px;
    text-align: center;
}

.lieu, .niveau, .residence
{
    font-weight: bold;
}

div.description div
{
  /* Permet à "div.niveau" et "div.residence" de bien se placer. */
  position: relative;

  padding: 0.1em 0;
}

div.description div div.niveau, div.description div div.residence
{
  position: absolute;
  left: 0;
  /* La largeur doit correspondre à la marge gauche de ".horaire" et ".couts". */
  width: 8em;
}

.horaire, .couts
{
  /* La marge gauche doit correspondre à la largeur de "div.niveau" et "div.residence". */
  margin-left: 8em;
}

/* Pour aligner le @ par rapport au texte */
img.arobas
{
    vertical-align: text-bottom;
    vertical-align: -6px;
}

/* Pour l'agenda Google */
div.agenda
{
    padding: 1em;
    /* Centrer le tableau. */
    margin-left: auto;
    margin-right: auto;
}

/**/
iframe
{
  border-width: 0;
}

/* Pour tous les agendas */
iframe.agenda
{
    width: 100%;
}

/* Agenda des cours. Agenda des soirées. */
iframe.agenda#cours, iframe.agenda#soirees
{
    height: 400px;
}

img.photo-accueil
{
    float: left;
    margin: 5em 1em;
}

img.banniere
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.photo-contact
{
    float: right;
    margin: 1em 3em 0em 0em;
}

/* Adresses */
div.adresse
{
    width: 40%;
    float: left;
    /*background-color: blue; /**/
    margin: 0 5%;
}

p.adresse
{
    font-size: small;
    font-weight: bold;
}

p.lieu, p.adresse
{
    margin: 0.5em 0;
    text-align: left;
}

ul.aeree li
{
    margin: 0 0 1em 0;
}

ul li ul li, ul.danses
{
    list-style-type: none;
}

ul.danses
{
    padding: 0;
}

.sessions
{
    text-align: center;
}

.selected
{
    /* Mets l'accent sur la session sélectionnée. */
    font-size: 125%;
}

h2.annulation
{
    color: #8d0000;
}

div.annulation
{
    margin: 2em;
    padding: 0.2em;
    background-color: #fcc;
    border: 7px ridge red;
}

h2.special
{
    color: #00008d;
}

div.special
{
    margin: 2em;
    padding: 0.2em;
    background-color: #ccf;
    border: 7px ridge blue;
}

div.sortie
{
    clear: both;
  position: relative;
}

p.note
{
    text-align: right;
    font-size: small;
}

.footnote
{
    font-size: x-small;
    font-style: italic;
}

/* Debug */
/*table, th, td
{
    border: solid 1px black;
}
/**/

iframe.video
{
  height: 88%;
  width: 95%;
}