/*
  ZEPHYR layout CSS
  aymeric murgale
*/

/*TEMPORAIRE
img{
  background-color : gray;
}

/*FIN TEMPORAIRE*/

/* html & body
----------------------------------------------------------------------------------------------------*/
body{
  height: 100%;
  margin: 0;
  padding: 0;
}

img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
/* header
----------------------------------------------------------------------------------------------------*/
div#header{
  margin-top : 10px;
  padding-top :10px;
  background : url(../images/header/bg-header.png) no-repeat 0 0;
}

/* selection de la langue, lien vers l'accueil et la sitemap
----------------------------------------------------------------------------------------------------*/
#header #langbar {
  display:block;
  margin-left: 350px;
  height:17px;
  list-style:none;
  width: 620px;
}

#header #langbar li {
  display:block;
  margin : 0 7px 0 7px;
  float:left;
}
#header #langbar li a{
  display : block ;
  width : 100%;
  height : 100%;
  position : relative;
  bottom : 0px;
  font-size : 11px;
  color : #1098D7;
}

#header #langbar li .small{
  display : block ;
  width : 100%;
  height : 100%;
  position : relative;
  bottom : 0px;
  font-size : 11px;
  color : #3E991E;
}

#header #langbar li a:hover{
  text-decoration : underline;
  color : #1098D7;
}

#header #langbar .flag {
  width : 24px;
  height: 17px;
  margin-left: 20px;
  text-indent:-10000px;
}

#header #langbar #fr{
  margin-left: 0;
  background : url(../images/header/fr.png) no-repeat;
}

#header #langbar #gb{
  background : url(../images/header/gb.png) no-repeat 0 0;
}
#header #langbar #es{
  background : url(../images/header/es.png) no-repeat 0 0;
}
#header #langbar #de{
  background : url(../images/header/de.png) no-repeat 0 0;
}
#header #langbar #it{
  background : url(../images/header/it.png) no-repeat 0 0;
}

#header #langbar .active-lang{
  background-position : bottom !important;
}

#header #langbar #gohome{
  padding-top : 20px;
  padding-left : 150px;
}

#header #langbar #sitemap{
  width : 80px;
  padding-top : 20px;
}

/* logos
----------------------------------------------------------------------------------------------------*/
#logozeph{
  margin-bottom : 0;
  padding-left : 60px;
  text-indent : -10000px;
  background-color : #fff;
}
#logozeph a{
  display : block;
  width : 218px;
  height : 175px;
  background : url(../images/header/logo-zephyr.png) no-repeat 0 0;

}
#logozeph a:hover{
  background : url(../images/header/logo-zephyr.png) no-repeat 0 -175px;
}

#logogreen{
  padding : 0px 0 0px 100px;
  text-indent : -10000px;
  background-color : #fff;
}
#logogreen a{
  display : block;
  margin : -20px 0px 0px 20px;
  width : 620px;
  height : 150px;
  background : url(../images/header/logo-green.png) no-repeat 0 0;

}

/* formulaires
----------------------------------------------------------------------------------------------------*/
#login p,#search p{
  overflow : hidden;
  margin-bottom : 10px;
}

#login p a,#search p a{
  float   : right;
  font-size : 10px;
}

#login label, #search label{
  padding-top : 2px;
  cursor:pointer;
}

#login input, #search input{
  border : none;
}

#login  input[type="text"],#login input[type="password"],
#search  input[type="text"],#search input[type="password"]{
  margin-left : 10px;
  padding : 2px 0 0 0;
  height : 18px;
  color : #424242;
  font-weight : bold;
}
#bt-search,
#bt-enter-shop{
  padding : 0;
  height : 20px;
  cursor:pointer;
  color : #fff;
}

/* search form*/
#search label{
  display : block;
  margin-bottom : 5px;
  text-align : center;
}

#input-search{
  float : left;
  width : 300px;
  color : #424242;
  background : url(../images/formulaires/input-search.png) no-repeat right top;
  /* right : pour empecher IE de scroller le fond vers la gauche,
     top : si pas top -> default et default = center -> le fond se decale*/
  text-align : center;
}
#bt-search:hover{
  background : url(../images/formulaires/bt-search.png) no-repeat 0 0;
}
#bt-search{
  float : left;
  width : 77px;
  height : 20px;
  color : white;
  background : url(../images/formulaires/bt-search.png) no-repeat 0 -20px;
}
#bt-search:active{
  background : url(../images/formulaires/bt-search.png) no-repeat 0 -40px;
}
/* login form*/
#login {
  position : relative;
  right : 35px;
  margin-top : 10px;
}

#search {
  position : relative;
  margin-left : 250px;
}

#login label {
  float : right;
}

#login input{
  width : 100px;
  vertical-align:middle;
  text-align : center;
}

#input-user-id, #input-password{
  background : url(../images/formulaires/bg-login.png) no-repeat right top;
}
#bt-enter-shop:hover{
  background : url(../images/formulaires/bg-enter.png) no-repeat 0 0;
}
#bt-enter-shop {
  float : right;
  padding-bottom : 2px;
  background : url(../images/formulaires/bg-enter.png) no-repeat 0 -20px;
}
#bt-enter-shop:active{
  background : url(../images/formulaires/bg-enter.png) no-repeat 0 -40px;
}
/* main menu
----------------------------------------------------------------------------------------------------*/

#menu{
  margin : auto;
  width : 880px;
  height : 60px;
  list-style-type : none;
}

#menu>li{
  display : block;
  float : left;
  margin : 0;
  height : 60px;
  text-align : center;
  cursor : default;
}

#environnement, #client{
  width : 170px;
}
#normes, #garanties, #services, #reseau{
  width : 135px;
}

#menu>li#environnement{
  background : url(../images/header/bg-menu.png) no-repeat 0 0;
}
#menu>li#normes{
  background : url(../images/header/bg-menu.png) no-repeat -170px 0;
}
#menu>li#garanties{
  background : url(../images/header/bg-menu.png) no-repeat -305px 0;
}
#menu>li#services{
  background : url(../images/header/bg-menu.png) no-repeat -440px 0;
}
#menu>li#reseau{
  background : url(../images/header/bg-menu.png) no-repeat -575px 0;
}
#menu>li#client{
  background : url(../images/header/bg-menu.png) no-repeat -710px 0;
}
#menu>li#environnement:hover{
  background : url(../images/header/bg-menu.png) no-repeat 0 -60px;
}
#menu>li#normes:hover{
  background : url(../images/header/bg-menu.png) no-repeat -170px -60px;
}
#menu>li#garanties:hover{
  background : url(../images/header/bg-menu.png) no-repeat -305px -60px;
}
#menu>li#services:hover{
  background : url(../images/header/bg-menu.png) no-repeat -440px -60px;
}
#menu>li#reseau:hover{
  background : url(../images/header/bg-menu.png) no-repeat -575px -60px;
}
#menu>li#client:hover{
  background : url(../images/header/bg-menu.png) no-repeat -710px -60px;
}
.theme span{
  position : relative;
  top : 20px;
  font-size : 16px;
  font-weight : bold;
  margin : 0 ;
  color : #fff;
}
.sous-menu{
  display : none;
  position : relative;
  top : 32px;
  width : 220px;
  list-style-type : none;
  z-index : 10;
}
#menu>li#environnement .sous-menu{
  /*display : block;*/
  left : 5px;
}
#menu>li#normes .sous-menu{
  /*display : none;*/
  right : 43px;
}
#menu>li#garanties .sous-menu{
  /*display : none;*/
  right : 43px;
}
#menu>li#services .sous-menu{
  /*display : none;*/
  right : 43px;
}
#menu>li#reseau .sous-menu{
  /*display : none;*/
  right : 43px;
}
#menu>li#client .sous-menu{
  /*display : none;*/
  right : 53px;
}


#menu>li:hover .sous-menu{
  display : block;
}

.sous-menu>li {
  display : block;
  margin : 0;
  width : 220px;
  height : 30px;
  background : /*#00adef*/ url(../images/header/bg-sous-menu.png) no-repeat 0 -30px;
}
.sous-menu>li:hover{
  background : /*#00adef*/ url(../images/header/bg-sous-menu.png) no-repeat 0 -130px;
}
.sous-menu>li>a{
  display :inline-block;
  padding-top: 5px;
  width : 200px;
  height : 25px;
  text-decoration : none;
  font-weight : bold;
  color : #fff;
}

.sous-menu>li.sm-first{
  background : url(../images/header/bg-sous-menu.png) no-repeat 0 0;
}
.sous-menu>li.sm-first:hover{
  background : url(../images/header/bg-sous-menu.png) no-repeat 0 -100px;
}

.sous-menu>li.sm-last{
  height : 40px;
  background : url(../images/header/bg-sous-menu.png) no-repeat 0 -60px;
}
.sous-menu>li.sm-last:hover{
  background : url(../images/header/bg-sous-menu.png) no-repeat 0 -160px;
}

/* content/middle
----------------------------------------------------------------------------------------------------*/
#content{
  position : relative;
  background : #fff;
  padding-top : 10px;
  padding-bottom : 10px;
}
#content h1, #content h3, #content em{
  color : #1098D7;
  font-weight : bold;
}

#content h2, #content h4, #content strong{
  color : #3E991E;
}
/* footer
----------------------------------------------------------------------------------------------------*/
#footer{
  height : 210px;
  margin-bottom : 10px;
  background : url(../images/footer/bg-footer.png) no-repeat 0 0 ;
}

/*produits*/
#produits{
  height : 160px;
  background : url(../images/footer/bg-catego.png) no-repeat 0 0 ;
  list-style-type : none;
}

#produits li{
  float : left;
  width : 260px;
  height : 120px;
  margin : 30px 0 0 40px;
}

#produits li a{
  display : inline-block ;
  width : 100%;
  height : 100%;
  font-size : 35px;
  font-weight : bold;
  color : #fff;
}

#produits li span{
  position : relative;
  bottom : 30px;
  left : 20px;
}

#produits li img{
  position : relative;
  left : 90px;
  bottom : 30px; 
  display : block;
  width : 160px;
  height : 100px;
  font-size : 12px;
}

#laser a:hover{
  text-decoration : none;
  color : cyan;
}
#jet a:hover{
  text-decoration : none;
  color : magenta;
}
#fax a:hover{
  text-decoration : none;
  color : yellow;
}

/*bottomlinks*/
#bottom-links{
  text-align : center;
}
#bottom-links li {
  display : inline-block;
  font-size : 14px;
}

/* petite phrase pour les chatouilleux du copyright*/

.copyright{
  font-size : 10px;
  color : #fff;
  text-align : center;
}