/*
 *  TEMPLATE PORTAILS
 *
 *  Attributs en ordre alphabetique
 *  Element en ordre d'apparition
 *
 *  - STRUCTURE GENERALE
 *  - CONTENT
 *    - section
 *    - aside
 *
 *  Couleurs
 *    - Consommateurs : #006197
 *    - Commercants : #007164
**/

/*
 *  STRUCTURE GENERALE
 *  Disposition des elements
**/
  #content{ margin: 0 0 3em 0; }
  #content div.aside{ float: left; margin: 25px 26px 0 6px; position: relative; width: 279px; }

  #content div.section{ background: url(../images/content/section/div.section.portails.png) repeat-x; margin: 0; padding: 0px 17px 0 17px; }
  #content div.section{ padding-top: 0px !important; }
  #content div.section div.section.right  { background: none; }
  #content div.left{ float: left; }
  #content div.right{ float: right; }
  

/*
 *  STYLE
 *  Apparence des elements
**/
  /* Nav-Portail - Navigation de la page d'accueil d'un portail avec boite contextuelle */
  #content div.aside{ padding: 61px 0 0 0; }
  #content div.aside div.nav-portail  { background: #fff; margin: 0 0 1em 0; padding: 1px; position: relative; }
  #content div.aside div.nav-portail ul.nav-portail { -moz-box-shadow: 0 0 25px #aaa; -webkit-box-shadow: 0 0 25px #aaa; box-shadow: 0 0 25px #aaa; }
  
  
  #content div.aside div.nav-portail ul.header > li{ height: 60px; left: -5px; margin: 0; padding: 0;  top: -93px; width: 277px; list-style-type: none; }
  #content div.aside div.nav-portail ul.header > li{ font-size: 1em; line-height: 1em; }
  #content div.aside div.nav-portail ul.header > li a.menu-top{ display: inline-block; font-size: 1em; font-weight: normal; height: 42px; margin: 12px 0 0 7px; padding: 5px 0 0 0; position: relative; text-align: center; width: 128px; }
  #content div.aside div.nav-portail ul.header > li a{ border-radius: 3px 3px 0 0; }
  #content div.aside div.nav-portail ul.header > li > ul {display:none;}
  #content div.aside div.nav-portail ul.header > li.active > ul {display:block;}
  #content div.aside div.nav-portail ul.header > li ul {z-index:99;}
  #content div.aside div.nav-portail ul.header > li.groupe-01{ height: 118px; left: 0; position: absolute; top: -118px; width: 279px; }
  body#consommateurs #content div.aside div.nav-portail ul.header > li{ background: url(../images/content/aside/div.nav-section.consommateurs.png) no-repeat -1px -58px; }
  body#consommateurs #content div.aside div.nav-portail ul.header > li.groupe-01{ background-position: 0 0; }
  body#consommateurs #content div.aside div.nav-portail ul.header > li.groupe-01 a.menu-top{ height: 37px; padding-top: 10px;margin-top: 70px; }
  body#consommateurs #content div.aside div.nav-portail ul.header > li a.menu-top{ background: #003c67; border: 1px solid #5eccfd; border-bottom: 0; color: #ffffff; z-index:90;}
  body#consommateurs #content div.aside div.nav-portail ul.header > li.active a.menu-top{ background: #fff; border: 1px solid #cccccc; border-bottom: 0; color: #006197; }
  body#consommateurs.has-script #content div.aside div.nav-portail ul.header > li.groupe-02{ background: none; }

  body#commercants #content div.aside div.nav-portail ul.header > li{ background: url(../images/content/aside/div.nav-section.commercants.png) no-repeat -1px -58px; }
  body#commercants #content div.aside div.nav-portail ul.header > li.groupe-01{ background-position: 0 0; }
  body#commercants #content div.aside div.nav-portail ul.header > li.groupe-01 a.menu-top{ height: 42px; padding-top: 5px;margin-top: 70px; }
  body#commercants #content div.aside div.nav-portail ul.header > li a.menu-top{ background: #005245; border: 1px solid #00f5e6; border-bottom: 0; color: #ffffff; z-index:90;}
  body#commercants #content div.aside div.nav-portail ul.header > li.active a.menu-top{ background: #fff; border: 1px solid #cccccc; border-bottom: 0; color: #03594c; }
  body#commercants.has-script #content div.aside div.nav-portail ul.header > li.groupe-02{ background: none; }
 
  body#commercants.has-script #content div.aside div.nav-portail ul.header > li.groupe-02{ background: none; }
  
    
  #content div.minisubmenu {position:absolute;top:500px;width:279px;}

  .padding_17 { padding:0px 0px 0px 17px;}
  
  
  body.has-script #content div.aside div.nav-portail ul.header > li.groupe-02{ left: 134px; position: absolute; top: -60px; width: 128px; }
  body.has-script #content div.aside div.nav-portail ul.header > li.groupe-02 ul.nav-portail {  width: 279px; margin-left:-134px; }
  
  #content div.aside ul.nav-portail{ background: #fff; line-height: 14px; margin: 0; padding: 3px 0 2px 0; }  
  #content div.aside ul.nav-portail > li{ background: url(../images/content/aside/ul.nav-portail.li.a.portails.mouseout.png) no-repeat right center; border: 1px solid #fff; border-bottom: 1px solid #ccc;list-style: none; margin: 0; padding: 0; position: relative; z-index: 1;}
  #content div.aside ul.nav-portail > li.last{ border-color: #fff; }
  #content div.aside ul.nav-portail > li:hover{ background: #e7ebed url(../images/content/aside/ul.nav-portail.li.a.portails.mousehover.png) no-repeat right center;; border: 1px solid #006197; box-shadow: 0 0 5px #333; z-index: 10; }
  #content div.aside ul.nav-portail > li.focus{ background: #e7ebed url(../images/content/aside/ul.nav-portail.li.a.portails.mousehover.png) no-repeat right center;; border: 1px solid #006197; box-shadow: 0 0 5px #333; z-index: 10; }
  #content div.aside ul.nav-portail > li:hover ul.sous-menu { display:block;  }
  #content div.aside ul.nav-portail > li.focus ul.sous-menu{ display:block; }
  #content div.aside ul.nav-portail > li > a{ color: #474747; display: block; margin: 0; padding: 4px 35px 6px 11px; width: 214px; }
  #content div.aside ul.nav-portail > li:hover > a{  background: #e7ebed; position: relative; z-index: 333;}
  #content div.aside ul.nav-portail > li.focus > a{  background: #e7ebed; }
  #content div.aside ul.nav-portail > li > a:hover{  text-decoration:none;}  
  
  body.has-script #content div.aside ul.nav-portail{ position: absolute; top: -9999999px; }
  body.has-script #content div.aside ul.nav-portail.active{ position: relative; top: 0; }
  
  
  /* SOUS-MENU */
  #content div.aside ul.sous-menu{ background: #fff; border: 1px solid #006197; left: 259px; height: auto !important; height: 3em /* 39px */; min-height: 3em /* 39px */; position: absolute; top: -9999px; width: 300px; z-index: 33;display:none; }
  #content div.aside ul.sous-menu{ -moz-box-shadow: 0 0 5px #aaa; -webkit-box-shadow: 0 0 5px #aaa; box-shadow: 0 0 5px #aaa; }
  #content div.aside ul.sous-menu{  padding: 1em 1em 0em 2em;margin:0px }
  #content div.aside ul.sous-menu li{ margin: 0 0 1em 0; }
  #content div.aside ul.sous-menu li a{}
  #content div.aside ul.sous-menu li span{ color: #000; }

  #content div.aside p.bouton{ height: auto; margin: 0; padding: 0; }
  #content div.aside p.bouton a{ border-bottom: 1px solid #b2b2b2; display: block; overflow: hidden; padding: 7px 11px; }


  
  /* COLONNES */
  #content div.section h2{ border-bottom: 1px solid #ccc; line-height: 28px ; margin: 0 0 8px 0;  }
  #content div.section h2 a{ color: #515151; }
  #content div.section h2 a big{ font-size: 1.846em; }
  #content div.carrousel h2{ height: 35px; margin: 0 0 8px 0; padding: 0; width: 294px;border:0 }
  #content #carrousel{ margin: 0 0 0.75em 0; overflow: hidden; width: 290px; position:relative;}
  #content #carrousel{ border: 1px solid #eee; -moz-box-shadow: 0 0 8px #aaa; -webkit-box-shadow: 0 0 8px #aaa; box-shadow: 0 0 8px #aaa; }  
  #content #carrousel div.container{ width: 999999999em;height:80px }
  #content #carrousel div.article{ padding: 9px 10px 15px 144px; position: relative; width: 136px; float:left}
  #content #carrousel div.article h3{ border: 0; color: #666; letter-spacing: -1px; line-height: 1em; margin: 0;font-size: 1.308em }
  #content #carrousel div.article p.image{ left: 0; margin: 0; padding: 0; position: absolute; top: 0; }
  #content ul.pagination{ padding: 0 16px; }
  
  #content .play_pause { position:relative; float:right;}
  #content #play_btn { position:relative; margin:-66px 16px 0px 0px ;float:right;}
  #content #pause_btn { position:relative; margin:-66px -12px 0px 0px ;float:right;}
  
/*
 *  SECTION
**/
  /*body#commercants #content div.section { padding: 0px; width: 677px }*/


  body#commercants #content div.twocolumns div.section.left { /*padding: 0;*/ }
  body#commercants #content div.twocolumns div.section.right { /*padding: 0 17px 0 17px;*/ }

  body#commercants #content div.twocolumns div.section.left { width: 310px; z-index: 1; margin-left: 23px; padding: 0; }
  body#commercants #content div.twocolumns div.section.right { width: 290px; }

  /* */

  body#commercants #content h1 { font-size: 1.385em; line-height: 1em; margin: 0 0 0 -9px; }
  body#commercants #content h1.ruban { background: url(../images/content/h1.593px.commercants.png) no-repeat left bottom; margin: 0 0 -8px -17px; width: 593px; }
  body#commercants #content h1.ruban span { background: url(../images/content/h1.593px.commercants.png) no-repeat left top; padding-left: 23px; }
  body#commercants #content h1.ruban span a:hover { text-decoration: none; }
        
  /*body#commercants #content h2 { font-size: 1.692em; margin: 0 0 1em 0; letter-spacing: 0px;}  
  body#commercants #content h2 { font-size: 1.385em; line-height: 1em; margin: 0 0 0 -9px; }*/

  body#commercants #content h2.ruban { 
    font-family: 'Glober', sans-serif; 
    font-weight: normal; 
    font-size: 1.2em; 
  }

  /*body#commercants #content div.right h2.ruban { background: url(../images/content/h1.314px-com.png) no-repeat left bottom; width: 331px; float:left; padding-bottom: 15px; margin-left: -24px; }
  body#commercants #content div.right h2.ruban span { background: url(../images/content/h1.314px-com.png) no-repeat; padding-left: 23px; }
  body#commercants #content div.right h2.ruban span a { color: #fff; display: block; }
   */


  body#commercants #content h3{ font-size: 1.308em /* 17px */; margin: 0 0 1em 0; }  
  body#commercants #content h3.big {font-size: 1.846em;}
  body#commercants #content div.section h3{ font-size: 1.385em; line-height: 1em; margin: 0 0 0 -9px; letter-spacing: 0px; border-bottom: 1px solid #ccc; }
  body#commercants #content div.section h3 a{ color: #515151; }
  body#commercants #content div.section h3 a big{ font-size: 1.846em; }
        
  body#commercants #content  div.section p{ margin: 0 0 0.5em 0; }
  body#commercants #content  div.section ul{ margin: 0 0 2em 20px; }
  body#commercants #content  div.section ul li{/* color: #0b4ca9;*/ }  
  /*body#commercants #content  div.section h2 a.rss{ position: absolute; right: 0; top: 3px;}*/




  a.rss { float:right;clear:left}
  
  body#commercants #content div.aside p.bouton a{ color: #007164; }
  body#commercants #content div.aside ul.sous-menu li{ color: #007164; }
  body#commercants #content div.aside ul.sous-menu li a{ color: #007164; }
  body#commercants #content div.aside ul.sous-menu li a:visited { color: #5D6A6F; }
  
  body#consommateurs #content div.twocolumns div.left { width: 290px;z-index: 1; margin-left: 6px; }

/*
  body#consommateurs #content div.left div.carrousel { border-top: 1px dashed #ccc; padding: 14px 0 0 0 }
  body#consommateurs #content div.left h2.ruban { background: url(../images/content/h1.314px.png) left bottom; width: 331px; padding-bottom: 15px; }
  */ 

  


  body#consommateurs #content div.right { /*padding: 39px 17px;*/ width:639px }
  body#consommateurs #content div.twocolumns div.right { width: 290px;  }


/*
  body#consommateurs #content div.right h2.ruban { background: url(../images/content/h2.right.png) no-repeat left bottom; width: 331px; float:left; padding-bottom: 15px; }
  body#consommateurs #content div.left h1.ruban { background: url(../images/content/h1.314px.png) left bottom; width: 331px;float:left; }
  body#consommateurs #content div.right h2.ruban span { background: url(../images/content/h2.right.png) no-repeat; padding-left: 23px; }
  body#consommateurs #content div.left h1.ruban span{ background: url(../images/content/h1.314px.png); padding-left: 23px; }
*/

  body#consommateurs #content div.right p.rss { position: absolute; right: 1em; top: 1.33em; }
  body#consommateurs #content div.right ul { margin: 0; padding: 0; }
  body#consommateurs #content div.right ul li { color: #000; clear: left; height: auto !important; height: 50px; min-height: 50px; list-style: none; margin: 0 0 1.154em 0; padding: 0; position: relative; }
  body#consommateurs #content div.right ul li a { white-space: nowrap; }
  body#consommateurs #content div.right ul li img { left: 0; /*position: absolute; top: 2px;*/ }
  body#consommateurs #content div.right p.plus{ clear: both; text-align: right; padding: 0 1em; }
  body#consommateurs #content div.right ul.actualites li{ padding: 0 0 0 0px; } 
  body#consommateurs #content div.right ul.actualites li img{ float:left; padding: 0 1em 0 0;  } 

  body#consommateurs #content form.renseignements button,
  body#commercants #content form.renseignements button { 
    cursor: pointer; 
    display: inline-block; 
    height: 32px; 
    text-indent: -9999px; 
    margin-left: 5px;
    width: 30px;
    position: relative;
  }

  body#consommateurs #content form.renseignements button:after,
  body#commercants #content form.renseignements button:after {
    content: '»';
    color: #008bce;
    font-weight: normal !important;
    font-family: Arial, sans-serif;
    width: 30px;
    height: 32px;
    position: absolute;
    top: 2px;
    left: 0;
    font-size: 54px;
    text-indent: 0;
    line-height: 18px;
  }

  body#commercants #content form.renseignements button:after {
    color: #07a389;
  }
  

  body#consommateurs #content form.renseignements input[type="text"],
  body#commercants #content form.renseignements input[type="text"] { 
    width: 240px;
    height: 20px;
    padding: 5px;
    float: left;
    margin-bottom: 1em;
    background: none;
    border-color: #ccc;
    border-radius: 3px;
  }

  body#consommateurs #content form.renseignements input[type="text"]:focus,
  body#commercants #content form.renseignements input[type="text"]:focus {
    box-shadow: 0px 0px 4px rgba(0,0,0,0.6);
    outline: 0;
  }
  
  
  
  
  ul.actualites { float:left;}
  
  
/**/