/*
 *  STRUCTURE COMMUNE
 *
 *  Attributs en ordre alphabetique
 *  Element en ordre d'apparition
 *
 *  - STRUCTURE GENERALE
 *  - CONTENT
 *  - HEADER
 *  - SLOGAN
 *  - FOOTER
 *  - NOSCRIPT
**/


/*
 *  STRUCTURE GENERALE
 *  Disposition des elements conteneurs importants
 *  background, bottom, height, left, margin, padding, position, right, top, width, z-index
**/
  html{ overflow-y: scroll; }
  html, body{ margin: 0; padding: 0; }
  body{ width: auto !important; min-width: 984px; width: 76em; }
  div.innerwrap{ margin: 0 auto;position: relative;  min-width: 994px;width: 76em;z-index:1; }
  #content.sys div.innerwrap{ width:50em;min-width:50em; }
  p.evitement {visibility:hidden;height:0;font-size:0;}
  a.aller-au-contenu { background: #ccc; left: -9999999em; margin: 0; padding:  0.25em 0.417em /* 3px 5px */; position: absolute; }
  a.aller-au-contenu:focus {left:0; position:relative;}
  a.aller-au-contenu:focus { color: #000; }
  a.aller-au-contenu{ color: #fff; }

  surligne {color: #415275; font-weight:bold }

  #header{ border-top: 8px solid #0d5899; background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/header/background.png) repeat-x left bottom -13px; width: 100%; z-index: 1; }
  #header div.innerwrap { }
  #header ul.nav{ min-height:53px;background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/header/ul.nav.gif) no-repeat right center; margin: 0; padding: 0;  min-width: 974px; z-index: 1; }
  #header ul.nav-portail{ background: #003a9b; bottom: 99px; height: 1em /* 13px */; margin: 0; overflow: hidden; padding: 0 0 0 29px; position: absolute; left: 198px; width: 757px; margin-bottom: 8px; margin-left: 11px;}
  #header div.client{ height: 25px; margin: 5px 0 7px 0; overflow: hidden; padding: 0; }

  #header div.pivRecherche{ height: 38px; margin: 12px 0 0 0; overflow: hidden; padding: 0; text-align: right; width: 345px; float: right; position: relative; }

  #header div.pivRecherche div#conteneurRecherche {
    position: absolute;
    left: 227px;
    width: 0px;
    top: 2px;
    height: 32px;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
    text-align: left;
  }

    #header div.pivRecherche div#conteneurRecherche div.widthRecherche {
      width: 227px;
    }

    #header div.pivRecherche div#conteneurRecherche input#txtRechercheHeader {
      background: #fff;
      border: 0px;
      height: 28px;
      width: 180px;
    }

    #header div.pivRecherche div#conteneurRecherche input#btnsearch,
    div#conteneurRechercheMobile input#btnsearch {
      width: 30px;
      height: 30px;
    }


  #header div.pivRecherche a#loupeRecherche {
    display: inline-block;
    position: relative;
    width: 25px;
    height: 25px;
    margin-right: 1em;
    margin-top: 5px;
    cursor: pointer;
    border: 1px solid #fff;
  }

    #header div.pivRecherche a#loupeRecherche:hover {
      opacity: 0.75;
    }

    #header div.pivRecherche a#loupeRecherche:focus {
      border: 1px dotted #999;
      outline: 0;
    }

  #header ul.pivLiens {
    vertical-align: top;
    display: inline-block;
    position: relative;
    text-align: left;
    line-height: 1.4em;
    margin: 0;
  }

    #header ul.pivLiens li {
      list-style: none;
      margin-bottom: 0;
    }

    #header ul.pivLiens a {
      display: block;
      color: #000;
    }

      #header ul.pivLiens a:visted {
        color: #000;
      }

  #header p.pivLogo { top: -5px; font-size: 1em; left: 0; margin: 0; position: relative; display: inline-block; }
  #header div.pivTitre { font-family: 'Roboto', sans-serif; font-size: 1.2em; margin: 22px 0 0 57px; position: relative; display: inline-block; vertical-align: top; }
  #header div.pivTitre a { color: #000;}

  div#conteneurRechercheMobile {
    display: none;
    height: 32px;
    overflow: hidden;
    padding: 0 5px 2px 5px;
    background: #fff;
    border-bottom: 1px solid #ccc;
    margin: 5px;
  }

  div#conteneurRechercheMobile input#txtRechercheHeader {
      background: #fff;
      border: 0px;
      height: 28px;
      width: 89%;
    }












  #content{ background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/content/background.jpg) repeat-x center top; height: auto !important; /*height: 400px;*/ min-height: 400px; padding: 35px 0 0 0; position: relative; }
  #slogan{ background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/slogan/background.png) no-repeat center top; margin: 0 0 7px 0; padding: 13px 0 0 0 /* fixe */; }
  #slogan div.innerwrap{  background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/slogan/background.png) no-repeat center bottom; padding: 0 0 28px 0; width: 100%; }
  #footer{ margin: 0 0 3em 0; }
  #noscript{}
  #popup{ left: 0; margin: 0; padding: 0; position: absolute; top: 0; width: 100%; z-index: 99999; }

/*
 *  STYLE
 *  Apparence des elements
**/

/*
 *  HEADER
**/
  #header p.logo{ bottom: 87px; font-size: 1em; left: 0; margin: 0; position: absolute; }
  #header ul.nav{}
  #header ul.nav li{ background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/header/ul.nav.gif) no-repeat left 23px; display: block; float: left; list-style: none; margin: 0;z-index:1 }
  #header ul.nav li ul{ display: none; }
  #header ul.nav li a{ font-family: 'Glober', sans-serif; border: 1px solid transparent; border-width: 1px 0 7px; display: block; height: 21px; margin: 0; padding: 19px 0 5px 0; position : relative; text-align: center; z-index:1;}
  #header ul.nav li a{ color: #000; font-size: 1.45em  /* fixe */; line-height: 1em; box-sizing: content-box; }
  #header ul.nav li a:hover{ text-decoration: none; background-color: transparent; }
  #header ul.nav li a small{ display: block; left: 26px; position: absolute; top: 6px;z-index:1; }
  #header ul.nav li a small{ font-size: 0.7em /* fixe */; font-style: italic; font-weight: normal; line-height: 1em; }
  #header ul.nav li.accueil{ min-width: 110px; }
  #header ul.nav li.consommateurs{ font-weight: bold; min-width: 184px; }
  #header ul.nav li.commercants{ font-weight: bold; min-width: 162px; }
  #header ul.nav li.autres-clienteles{ font-weight: bold; min-width: 186px; }
  #header ul.nav li.actualites{ min-width: 135px; }
  #header ul.nav li.a-propos-de-l-office{ min-width: 215px; }
  #header ul.nav li.nous-joindre{ min-width: 160px; }

        body.en #header ul.nav li.consommateurs a{ padding-right: 43px; }
        body.en #header ul.nav li.commercants a{ padding-right: 23px; }
        body.en #header ul.nav li.autres-clienteles a{ padding-right: 7px; }

  #header ul.nav li.accueil a:focus,
  #header ul.nav li.accueil a:hover,
    body#accueil #header ul.nav li.accueil a{ border-color: #284e61; }

  #header ul.nav li.consommateurs a:focus,
  #header ul.nav li.consommateurs a:hover,
    body#consommateurs #header ul.nav li.consommateurs a{ border-color: #006197; }

  #header ul.nav li.commercants a:focus,
  #header ul.nav li.commercants a:hover,
    body#commercants #header ul.nav li.commercants a{ border-color: #007164; }

  #header ul.nav li.autres-clienteles a:focus,
  #header ul.nav li.autres-clienteles a:hover,
    body#autres #header ul.nav li.autres-clienteles a{ border-color: #009fe3; }

  #header ul.nav li.actualites a:focus,
  #header ul.nav li.actualites a:hover,
    body#actualites #header ul.nav li.actualites a{ border-color: #284e61; }

  #header ul.nav li.a-propos-de-l-office a:focus,
  #header ul.nav li.a-propos-de-l-office a:hover,
    body#a-propos-de-l-office #header ul.nav li.a-propos-de-l-office a{ border-color: #284e61; }

  #header ul.nav li.nous-joindre a:focus,
  #header ul.nav li.nous-joindre a:hover,
    body#nous-joindre #header ul.nav li.nous-joindre a{ border-color: #284e61; }

  #header ul.nav-portail{}
  #header ul.nav-portail li{ display: inline; list-style: none; margin: 0; padding: 0 11px 0 0; }
  #header ul.nav-portail li a{ color: #fff; font-size: 0.846em /* 11px */; line-height: 1em /* 11px */; position: relative; top: -2px; }
  #header ul.nav-portail li a:hover{ text-decoration: none; }

  #header div.client{}
  #header div.client form{ display: block; float: left; vertical-align: top; }
  #header div.client form input{ background: #fff; border-color: #427382; color: #427382; display: block; float: left; font-size: 0.923em /* 12px */; height: 17px; line-height: 1.333em /* 16px */; margin: 0; overflow: hidden; padding: 0.25em 0.417em /* 3px 5px */; width: 13.25em /* 159px */; }
  #header div.client form input#btnsearch { width: auto; height:auto; padding:0; margin: 0 0 0 0.417em /* 3px 5px */ }
  #header div.client form button{ background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/header/div.client.png); display: block; float: left; height: 24px; margin-left: 6px; overflow: hidden; text-indent: -9999px; width: 25px /* fixe */; }
  #header div.client form button:hover{ background-position: 0 -24px; cursor: pointer; }
  #header div.client ul{ float: right; margin: 0 0 0 14px; padding: 0 0 0 15px; }
  #header div.client ul li{ display: inline; list-style: none; margin: 0; padding: 0; }
  #header div.client ul li a{ display: block; float: left; height: 24px; overflow: hidden; width: 25px;}
  #header div.client ul li.format-du-texte a{ /*background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/header/div.client.png); text-indent: -9999px;*/}
  #header ul.configuration{ background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/header/div.client.separateur.gif) no-repeat left 1px; }
  #header ul.configuration li{}
  #header ul.configuration li.imprimer a{ background:none; }
  #header ul.configuration li.imprimer a:hover{ background:none; }
  #header ul.configuration li.format-du-texte{ display: block; float: left; height: 24px; margin-left: 8px;position: relative; width: 25px /* fixe */; }
  #header ul.configuration li.format-du-texte a.reduire{  z-index: 333; }
  #header ul.configuration li.format-du-texte a.agrandir{  z-index: 111;}
  #header ul.configuration li.format-du-texte:hover a.reduire{ }
  #header ul.configuration li.format-du-texte:hover a.reduire:hover{  }
  #header ul.configuration li.format-du-texte:hover a.agrandir{ }
  #header ul.configuration li.format-du-texte:hover a.agrandir:hover{  }
  #header ul.configuration button:focus img { border: 1px solid #000; }
  #header ul.socials{}
  #header ul.socials li{}
  #header ul.socials li a{ margin-left: 1px; width: 24px /* fixe */;}
  #header ul.socials li.facebook a{ background:none; }
  #header ul.socials li.facebook a:hover{ background:none; }
  #header ul.socials li.twitter a{ background:none; }
  #header ul.socials li.twitter a:hover{ background:none; }
  #header ul.socials li.youtube a{ background:none; }
  #header ul.socials li.youtube a:hover{ background:none; }
  /*#header div.client ul li a.rssmenu{ background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/icones/rss-menu.png); }*/
  #header p.langage{ background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/header/div.client.separateur.gif) no-repeat left 0.083em /* 1px */; float: left; font-size: 0.923em /* 12px */; font-weight: bold; line-height: 1em /* 12px */; margin-left: 14px; padding: 0.417em 0 0.667em 14px /* 0 5px 0 8px 12px */; }
  #header p.langage a{ color: #626262; }
  #header p.langage a:hover{ color: #000; }




/*
 *  CONTENT
**/
  #content {z-index: 2}
  #content div.aside ul{}
  #content div.aside ul li{ color: #3d6db2; }
  #content div.aside ul li a{}

  #content a:hover{ text-decoration: underline; }

  span.hidden {display:none;}

/*
 * RUBAN
 *
**/
  #content div.section .ruban,
  #content div.aside .ruban { border: 0; display: block; margin: 0 0 0 -24px; padding: 0 0 13px 0;  }
  #content div.section #section_du_haut .ruban,#content div.aside #section_du_haut .ruban { margin: 0 0 0 -6px;}
  #content div.section .ruban span,
  #content div.aside .ruban span {
    color: #fff;
    display: block;
    line-height: 1em;
    padding: 10px 0 6px 25px;

  }


  .titre_deux_lignes {display: block!important; width: 70%!important; background: none!important; padding: 0!important;}

/*
 *  SLOGAN
**/
  #slogan{}
  #slogan div.innerwrap{}
  #slogan p{ font-family: 'Glober', sans-serif; background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/slogan/background.png) no-repeat center -13px /* fixe */; margin: 0; }
  #slogan p strong{ background: url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/slogan/background.png) no-repeat center -13px /* fixe */; display: block; margin: 0 auto; padding: 7px; }
  #slogan p strong{ color: #4B585D; font-size: 1.385em /* 18px */; font-weight: normal; line-height: 2.278em /* 41px */; text-align: center; }

/*
 *  FOOTER
**/
  #footer{}
  #footer div.innerwrap { padding-top: 20px; }
  #accueil #footer div.innerwrap { padding-top: 0px; }
  #footer p.quebec {font-size: 1em; margin: 0 0 0.462em 0 /* 0 0 6px 0*/; text-align: center; margin-top: 2em; }
  #footer p.quebec img{ height: 90px; }

  #footer ul{ margin: 0; padding: 0; text-align: center; }
  #footer ul li{ border-left: 1px solid #666667; display: inline; font-size: 1em; list-style: none; margin: 0; padding: 0 0.4em /* 0 4px */; }
  #footer ul li.first{ border-left: 0; }
  #footer ul li a { color: #666667; text-decoration: none; }
  #footer ul li a:hover { text-decoration: underline; }
  #footer ul.social { display: none; }
  #footer ul.social li { border: none; }
  #footer p.copyright { font-family: 'Roboto', sans-serif; text-align: center; }
  #footer p.copyright a { color: #0b4ca9; }

  @media screen and ( max-width: 1023px ) {
    #footer ul li{ border-left: 0; }
    #footer ul li a { display: block;}
    #footer ul.social { display: block; }
    #footer ul.social li a { display: inline-block; }
  }


/*
 *  NOSCRIPT
 *  Message d'alerte des javascript inactif
**/
  #noscript{}


/*
 *  POPUP
 *  Fenetre de message contextuel
**/
  #popup{}
  #popup div.innerwrap{ border: 1px solid #eff2f3; width: 600px; min-width:600px; }
  #popup.carte-regionale div.innerwrap{ background: #fff; }
  #popup div.innerwrap{ -moz-box-shadow: 0 0 25px #333; -webkit-box-shadow: 0 0 25px #333; box-shadow: 0 0 25px #333; }
  #popup h1{ background: #515151; color: #fff; font-size: 1.5em /* 19px */; font-weight: normal; letter-spacing: -1px; line-height: 1.615em /* 42px */; margin: 0; padding: 0 0.692em /* 0 18px */; position: relative; }
  #popup div.contenu{ background: #fff url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/content/section/article/background.gif) repeat-x; margin: 0; padding: 1em 0.818em /* 13px 18px */; }
  #popup p.input{}
  #popup p.input input{ width: 550px; }
  #popup p.fermer{ margin: 0; padding: 0; }
  #popup.carte-regionale p.fermer{ background: #fff url(/_assets/3e0249a37e7802c1c36db9f33f8055e6/Images/Opc/content/section/article/background.gif) repeat-x; margin: 0; padding: 5px; }

  body#consommateurs #popup h1{ background: #006197; }
  body#commercants #popup h1{ background: #007164; }


  body#sys #content div.section, #content.sys div.section {  width:100% }
  body#sys #content div.section #subheader_page span.ruban,#content.sys div.section #subheader_page span.ruban,#content.sys div.section #entete_de_page span.ruban {  width:auto }



/* une colonne */
/*.wide #content {background:none;}*/
.wide #header {height:185px;}



/* FCEs */
#content .section .twocolumns, #content .section .threecolumns {clear:both;}
#content .section .twocolumns .section.left {width:48%;float:left;min-height:100px;}
#content .section .twocolumns .section.left.w70 {width:68%;float:left;min-height:100px;}
#content .section .twocolumns .section.right {width:48%;float:right;min-height:100px;}
#content .section .twocolumns .section.right.w30 {width:28%;float:right;min-height:100px;background:#FCFCFC;border:1px solid #bdbdbf;padding:5px}
#content .section .threecolumns .col1,
#content .section .threecolumns .col2 ,
#content .section .threecolumns .col3 {width:31%;float:left;margin-right:1%;min-height:100px;}
#content .section .threecolumns .col3 {margin-right:0;}


@media screen and (max-width: 1023px) {
  #header p.pivLogo {
    left: 17px;
  }

  #header div.pivRecherche {
    position: absolute;
    top: 0;
    right: 0;
  }

  #header div.pivRecherche a#loupeRecherche {
    margin-top: 3px;
  }

  #header div.pivTitre {
    display: block;
    margin: -8px 0 0 17px;
  }

  div.innerwrap {
    z-index: 999;
  }

  #footer p.quebec {
    margin-top: 0;
  }

}

@media screen and (min-width: 600px) {
  div#conteneurRechercheMobile {
    display: none !important;
  }
}

@media screen and (max-width: 599px) {
  #header div.pivRecherche div#conteneurRecherche {
    display: none !important;
  }
}