/**
 *
 * HEP.ch CSS
 *
 **/

/** ** ** 
  RESET 
 ** ** **/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;text-align:left;font-family:inherit;}table{border-collapse:collapse;border-spacing:0;}ol,ul{list-style:none;}q:before,q:after,blockquote:before,blockquote:after{content:"";}



   /**
    * Couleurs
    * rouge : #890c0c
    * gris clair : #dcdcdc
    * gris foncé : #515151
    **/

   body{
      background-color: #fff;
      font-family: 'Arial Narrow', 'Helvetica condensed', Helvetica, Arial, sans-serif;
      color:#515151;
   }
   
   
   a{
      text-decoration:none;
      color:#890c0c;
   }
   a:hover{
      text-decoration:underline;
   }
   strong{
      font-weight:bold;
   }

   
   /** ** ** 
      MAIN 
    ** ** **/
    
   
    h2.h_hep{
       background: url('../images/tools/mini_logo_hep.gif') 0 0 no-repeat;
       height:35px;
       padding-top:20px;
       padding-left:50px;
       color:#890c0c;
       font:22px 'Arial Narrow', 'Helvetica condensed', Helvetica, Arial, sans-serif;
    }      
    
    /** ** ** 
       BLOC 
     ** ** **/             
   
   #container{
      font:13px Helvetica, Arial, sans-serif;         
   }
   #hep{
      width:960px;
      margin:10px auto;
      position:relative;

   }
   
   #footer{
      background-color:#f5f5f5;
      padding:10px;
      margin:10px 0;
      width:720px;
      font-size:10px;      
      float:left;     
      position:relative; 
   }
   
   
   
   #header a{
      color:#a4a4a4;
      text-decoration:none;
   }
   
   #logo{
      display:block;
      width:300px;
      height:110px;
      background:url('../images/hep_logo.gif') 0 0 no-repeat;
      margin-bottom:5px;
   }
   #logo h1{
      display:none;
   }
   
   /** ** ** 
      MENU 
    ** ** **/      
   #menu {
      position:absolute;
      right:0;
      top:80px;
      z-index:99;
   }
   ul#menu li{
      float:left;
      width:140px;
      height:30px;
      margin-left:5px;
      position:relative;      
   }
   ul#menu li a{
      font-size: 18px;
      color:#fff;
      display:block;
      padding:5px 10px 5px 5px;
      width:125px;
      height:20px;
      text-align:right;         
      background:url('../images/tools/fnd_menu.png') 0 0 no-repeat;
   }
   ul#menu li a:hover, ul#menu li a.current:hover{
      color:#fff;
   }
   ul#menu li a.current{
      color:#515151;
   }      

   ul#menu li#menu_taxi a{             background-position: 0 0; }
   ul#menu li#menu_permis a{           background-position: -140px 0; }
   ul#menu li#menu_agri a{             background-position: -280px 0; }
   ul#menu li#menu_vacances a{         background-position: -420px 0; }

   ul#menu li#menu_taxi a.current{     background-position: 0 -60px; } 
   ul#menu li#menu_permis a.current{   background-position: -140px -60px; }
   ul#menu li#menu_agri a.current{     background-position: -280px -60px; }
   ul#menu li#menu_vacances a.current{ background-position: -420px -60px; }

   ul#menu li#menu_taxi:hover a{       background-position: 0 -30px; }
   ul#menu li#menu_permis:hover a{     background-position: -140px -30px; }
   ul#menu li#menu_agri:hover a{       background-position: -280px -30px; }
   ul#menu li#menu_vacances:hover a{   background-position: -420px -30px; }
   
   ul#menu li ul{
      background-color:#fff;
      border:1px solid #dcdcdc;     
      display:none; 
      margin:0;
      position:absolute;
      left:0;
      top:30px;
      z-index:30;
   }
   
   ul#menu.menu_css li:hover > ul{
      display:block;
   }
      
   ul#menu li ul li{
      float:none;
      height:auto;
      width:auto;
      margin:0;
   }
   ul#menu li ul li a{
    background:none;
    color:#515151;
    font-size: 14px;
    padding:5px 10px 5px 10px;
    width:118px;
    height:auto;
   }   
   ul#menu li ul li a:hover{
    color:#515151;
    text-decoration:underline;
    background-color:#efefef;
   }         
   
   /** ** ** 
     TOOL MENU 
    ** ** **/      
   
   #toolmenu{
      position:absolute;
      top:50px;
      right:0;
      font-size: 14px;
   }
   #toolmenu ul li{
      float:left;
   }
   #toolmenu ul li a{
      height:22px;
      padding:2px 8px 1px 25px;
      margin:0 5px;
      border-right:1px solid #dcdcdc;
   }
   #toolmenu ul li a:hover{
      text-decoration:underline;
   }      
   #toolmenu ul li.last a{
      border:none;
      padding-right:0;
      margin-right:2px;
   }
   .ico{
      background-position:0 0;
      background-repeat:no-repeat;
      
   }
   a.accueil{
      background-image:url('../images/tools/ico_home.png');
   }
   a.sitemap{
      background-image:url('../images/tools/ico_sitemap.png');
   }
   a.contact{
      background-image:url('../images/tools/ico_contact.png');
   }      
   
   /** ** ** 
    BOUTONS RESERVER 
    ** ** **/
   a.reserver{
      margin:0px 10px 0 0;
      float:left;
      display:block;
      width:200px;
      height:50px;      
      background:url('../images/hep_reserver.png') 0 0 no-repeat;
      border:none;
   }
   a.reserver:hover{
      border:none;
   }
   a.reserver b{
      display:none;
   }
   a.btelephone:hover{background-position:-200px 0;}
   a.bonline{background-position:0 -50px; }
   a.bonline:hover{background-position:-200px -50px; }
   a.btelephone:active{background-position:-400px 0;}
   a.bonline:active{background-position:-400px -50px; }      
   a.bookpermis{
      background:url('../images/hep_permis_bt.png') 0 0 no-repeat;
   }
   a.bookpermis:hover{background-position:-200px 0; }
   a.bookpermis:active{background-position:-400px 0; }   
   
   
   /** ** ** 
    HEADER PHOTO 
    ** ** **/
   #header_photo{
      width:960px;
      height:280px;      
   }
/*   #header_photo {
      position:relative;
   }
   #header_photo .contentbloc{
      position:absolute;
      top:5px;
      left:5px;
      z-index:0;
   }*/
   #header_photo img{
      margin:5px;
      width:950px;
      height:270px;
   }
   #header_photo{
    position:relative;
   }
   #header_photo h1{
      position:absolute;
      font-family: 'Arial Rounded', Arial, sans-serif;
      font-size:30px;
      color:#fff;
      width:500px;
      bottom:20px;
      right:20px;
      text-align:right;
   }
   #header_photo h1 p{
      margin:0;
      padding:0;
      text-align:right;      
   }

   /** ** ** 
      SIDEBAR 
    ** ** **/

   #sidebar{
      float:left;
      width:210px;
   }
   #sidebar .contentbloc p{
      margin: 10px 10px;
      color:#515151;
      font-size:12px;
   }
   
   /** ** ** 
    CONTENT 
    ** ** **/      
   #content{
      margin-left:220px;
      width:740px;
   }

   #container{
      margin-top:10px;
   }
   .page{
      border:1px solid #dcdcdc;
      padding:10px;
      margin-bottom:5px;
      min-height:140px;  
      font-size:14px;    
   }
   .page h1{
      margin:0;
      font-size:40px;
      margin-bottom:10px;
   }
   .page p{
      margin:10px 0;
   }
   .page h2{
      margin:10px 0 5px 0;
      font-size:16px;
      text-transform: uppercase;
      border-bottom:1px solid #dcdcdc;
   }
   .page table{
      margin:10px 0;
      width:100%;
   }
   .page table tr{
      background-color:#ececec;      
   }
   .page table td{
      border-bottom:4px solid #fff;

      padding:5px;
   }
   .page table tr:hover{
      background-color:#dcdcdc;
   }   
   .page table td.prix,    .page table td.inscription{
      text-align:right;
      width:20%;
   }
   .page table td.date_agenda{
      width:30%;      
   }


   .page ul{
      list-style: square inside;
   }
   .page ul li{
      margin:2px 0;
   }
   .intro{
      background-color:#f5f5f5;
      padding:10px;
      margin-bottom:5px;
      min-height:140px;
   }
   .intro p{
      margin-right:10px;
   }
   .intro p{
   }
   .bloc{
      border:1px solid #dcdcdc;
   }
   .contentbloc{
      margin:5px;
   }


   /** ** ** 
      ITEMS 
    ** ** **/
    .items{
       float:left;
       width:740px;
    }
   .items a{
      display:block;
      position:relative;
      float:left;
      width:240px;
      height:110px;
      margin:2px 7px 2px 0;
      text-decoration: none;         
   }
   /*.items a:hover > span{
            display:block;
         }*/

   .items a span{
      display:none;
      position:absolute;
      top:5px;
      left:5px;
      width:200px;
      height:70px;
      padding:;
      background:url('../images/tools/fnd_permis.gif') 0 0 repeat-x;
      color:#515151;
      padding:15px;        
   }
   .items a span b{
      display:block;
      margin-bottom:2px;
      text-transform: uppercase;
   }
   .items a span.item_taxi{ background-image:url('../images/tools/fnd_taxi.gif');color:#fff;}
   .items a span.item_permis{ background-image:url('../images/tools/fnd_permis.gif');}
   .items a span.item_agri{ background-image:url('../images/tools/fnd_agri.gif');}
   .items a span.item_vacances{ background-image:url('../images/tools/fnd_vacances.gif');color:#fff;}
   .items a.last{
      margin-right:0 !important;
   } 
 
 
   /**
    large type action
    */
    
    /* LargeTypeAction */
    #largeTypeAction{
       background:url('../images/largetypeaction.png') 0 0 no-repeat;
       width:940px;
       height:190px;
       text-align:center;
       font: 110px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
       font-weight: normal;
       z-index:900;
       position:fixed;
       left:50%;
       top:50%;
       margin-top:-140px; 
       margin-left:-470px;
       color:#fff;
       -webkit-transition: opacity 0.2s linear;
       cursor: pointer;

    }
    #largeTypeAction span{
       text-align:center;
       opacity:100%;
       margin:30px 50px 50px 50px;
       display:block;
       font-weight: bold;         
    }
        
 
    #logo_as strong{
      display:none;
    }
    #logo_as{
       position:absolute;
       top:7px;
       right:8px;
       display:block;
      width:70px;
      height:18px;
      background: url('../images/logo_antistatique_net.png') 0 -18px no-repeat;
      cursor: pointer;
    }
    #logo_as:hover{
      background-position:0 0;
    }
 
 
   /**
   UI Dialog
   */
   .ui-datepicker-div, .ui-dialog, .ui-dialog form, .ui-dialog a, .ui-dialog-buttonpane, .ui-widget { font-size: 80%; }
		.ui-dialog label, .ui-dialog input { display:block; }
		.ui-dialog input.text, .ui-dialog textarea{ margin-bottom:12px; width:95%; padding: .4em; }
		.ui-dialog fieldset { padding:0; border:0; margin-top:25px; }
   .ui-dialog h1 { font-size: 1.2em; margin: .6em 0; }
		.ui-dialog .ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
		.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }
		#ui-datepicker-div{
		   z-index:10000;
		}
		.group2 div{
		   width:42%;
		   margin-right:5%;
		}
		.group3 div{
        width:26%;
        margin-right:5%;
		}		
		.group2 div, .group3 div{
		   float:left;
		}