/* --- ARCHE--- */

/* cookie reglementation */
#infos_cookies{
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 0.5em;
}
#infos_cookies p{
    width: 1025px;
    margin: 0 auto;
}
#infos_cookies a#close{
    width: 15px;
    text-align: center;
    background-color: #000;
    color: #fff;
    display: inline-block;
    margin-left:0.5em;
}

/* Mediametrie */
#kf_mediametrie{
  width:100%;
  border-top:3px solid #61aebc;
  border-bottom:1px solid #D9DBDB;
  background-color: #fff;
  }
  #kf_mediametrie ul{
    width:1000px;
    margin:0 auto;
    padding:5px 0;
    overflow:hidden;
    }
    #kf_mediametrie ul li{
      float:left;
      padding:0 15px;
      border-right: 1px solid #D9DBDB;
      color:#000;
      font:normal 12px Verdana, Geneva, sans-serif;
      }
      #kf_mediametrie ul li a{
        color:#666;
        font:normal 12px Verdana, Geneva, sans-serif;
        text-decoration:none;
        }
        #kf_mediametrie ul li.last{border-right:none;}

/* Header */
header[role="banner"]{
  margin: 0 auto;
  }
#kf_header_content{
  width: 1000px;
  margin: 0 auto;
  padding: 15px 0;
  overflow: hidden;
  background-color: #fff;
  border: 3px #fff solid;
  }
  #kf_header_content a#kf_logo, #kf_header_content a#kj_logo{
    display: block;
    width:102px;
    height:101px;
    float: left;
    background: url(http://static.kelformation.com/apps/public/resources/images/sprites/sprite_ico_20120607.jpg) no-repeat -15px -196px;
    }
    #kf_header_content a#kj_logo{float:right;background-position: -148px -196px;}
    #kf_header_content a span{position:absolute;left:-5000px;}

  #kf_megaban{
    float: left;
    margin:0 30px;
    padding: 2px;
    border: 1px #e4e4e4 solid;
    }

/* Menu principal */
nav[role="navigation"]{
  width: 100%;
  height: 88px;
  margin: 0 auto;
  background: url("http://static.kelformation.com/apps/public/resources/images/sprites/sprite_background_20120607.jpg") repeat-x 0 0;
  }
  nav[role="navigation"].vampi{
    width: 1000px;
    border: 3px #fff solid;
    }
  nav[role="navigation"] ul{
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    }
    nav[role="navigation"] ul li{
      float: left;
      padding-top: 6px;
      }

      nav[role="navigation"] ul li.current, nav[role="navigation"] ul li:hover{background: url("http://static.kelformation.com/apps/public/resources/images/sprites/sprite_background_20120607.jpg") repeat-x 0 -98px;}
      nav[role="navigation"] ul li a{
        display: block;
        padding: 13px 10px 18px 10px;
        font-size: 1.1em;
        font-weight: bold;
        text-transform: uppercase;
        color: #fff;
        text-shadow: 1px 1px 0 #000;
        border-right: 1px #000 solid;
        }
        nav[role="navigation"] ul li a.extra{color:#fc9546}
        nav[role="navigation"] ul li a:hover, nav[role="navigation"] ul li.current a,nav[role="navigation"] ul li:hover a{
          color: #333;
          text-decoration: none;
          text-shadow: none;
          }
        nav[role="navigation"] ul li a.home{
          width:30px;
          background: url("http://static.kelformation.com/apps/public/resources/images/sprites/sprite_transparent_20120607.png") no-repeat 10px 5px;
          }
          nav[role="navigation"] ul li a.home em{}
          nav[role="navigation"] ul li a.home span{
            position: absolute;
            left:-4000px;
            }
          nav[role="navigation"] ul li:hover a.home, nav[role="navigation"] ul li a.home:hover, nav[role="navigation"] ul li.current a.home{
            background-position: 10px -53px;
            }

      nav[role="navigation"] ul li a.last, nav[role="navigation"] ul li:hover ul li a.last, nav[role="navigation"] ul li.current ul li a.last{border-right: 0}
      nav[role="navigation"] ul li ul li a.first, nav[role="navigation"] ul li:hover ul li a.first{border-left: 0 !important;}

/* Sous-menu */
nav[role="navigation"] ul li ul{display: none;}
nav[role="navigation"] ul li.current ul{
  display: block;
  position: absolute;
  z-index: 900;
  }
nav[role="navigation"] ul li.current ul.ssm0, nav[role="navigation"] ul li:hover ul.ssm0{margin-left: 0; width: 1000px; height: 31px;background: #e5e5e5;}
nav[role="navigation"] ul li.current ul.ssm1, nav[role="navigation"] ul li:hover ul.ssm1{margin-left: -51px; width: 1000px; height: 31px;background: #e5e5e5;}
nav[role="navigation"] ul li.current ul.ssm2, nav[role="navigation"] ul li:hover ul.ssm2{margin-left: -139px; width: 1000px; height: 31px;background: #e5e5e5;}
nav[role="navigation"] ul li.current ul.ssm3, nav[role="navigation"] ul li:hover ul.ssm3{margin-left: -237px; width: 1000px; height: 31px;background: #e5e5e5;}
nav[role="navigation"] ul li.current ul.ssm4, nav[role="navigation"] ul li:hover ul.ssm4{margin-left: -349px; width: 1000px; height:31px; background: #e5e5e5;}
nav[role="navigation"] ul li.current ul.ssm5, nav[role="navigation"] ul li:hover ul.ssm5{margin-left: -499px; width: 1000px; height: 31px; background: #e5e5e5;}
nav[role="navigation"] ul li.current ul.ssm6, nav[role="navigation"] ul li:hover ul.ssm6{margin-left: -637px; width: 1000px; height: 31px; background: #e5e5e5;}
  nav[role="navigation"] ul li:hover ul{
    display:  block;
    position: absolute;
    z-index:  1000;
    }
    nav[role="navigation"] ul li:hover ul li, nav[role="navigation"] ul li ul li{padding: 0;background:#e3e3e3;}
      nav[role="navigation"] ul li:hover ul li.ss-current, nav[role="navigation"] ul li ul li.ss-current{
        padding:  10px;
        font-size:  1em;
        font-weight:  bold;
        line-height:  0.8em;
        color:  #333 !important;
        border-right:  1px #454545 solid;
        }
      nav[role="navigation"] ul li:hover ul li a, nav[role="navigation"] ul li.current ul li a{
        padding:  10px;
        font-size:  1em;
        font-weight:  normal;
        line-height:  0.8em;
        text-transform  :none;
        text-shadow:  none;
        color:  #333 !important;
        border-left: 1px #efefef solid;
        border-right: 1px #b1b0b0 solid;
        }
        nav[role="navigation"] ul li:hover ul li a:hover{color: #f60 !important;}

/* Conteneur principal */
#kf_container{
  margin: 0 auto;
  padding-top: 10px;
  width: 1000px;
  clear: both;
  background-color:#fff;
  border: 3px #fff solid;
  overflow: hidden;
  }

p#breadcrumb {
  font-size:0.85em;
  margin: 0 0 15px 0;
  }

/* Footer */
footer[role="contentinfo"]{
  width: 100%;
  margin-top: 20px;
  padding: 10px 0;
  background-color: #333;
  border-top: 3px #60adbb solid;
  overflow: hidden;
 }
footer[role="contentinfo"] ul{
  margin: 0 auto;
  width: 1000px;
  }
  footer[role="contentinfo"] ul li{
    float: left;
    padding: 0 7px;
    border-left: 1px #454545 solid;
    }
  footer[role="contentinfo"] ul li.first{border: 0;}
footer[role="contentinfo"] a{color: #fff !important}

/* Divers */
.infos_dev{display:none;}
#pub_habillage {
  /*display: none;*/
  margin: 0 auto;
  width: 1006px;
  }

/* hack Chrome / Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	nav[role="navigation"] ul li {
        float: left;
        padding-top: 7px;
        }
  }

/*
 Modal Alert pop, a revoir integralement
*/

#qa-comment {
    display: none;
}

.modal__msg {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 610px;
    max-width: 630px;
    min-width: 300px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-color: transparent;
}
.oldie .modal__msg {
    top: 30%;
    width: 400px;
    margin-left: -200px;
}
.modal-msg__header {
    background-color: transparent;
    height: 40px;
}
a.modal__close-link {
    display: block;
    float: right;
    font-size: 1em;
    padding: 0.5em 0;
}
.modal__close-link:hover,
.modal__close-link:active {
    border-bottom-color: white;
}
.modal-msg__content {
    padding: 1em;
    color: #555555;
    min-height: 210px;
    height: auto;
    background-color: #fff;
    border: 8px solid #73b3bf;
}
.am_img{
    float: left;
    width: 80px;
    height: 200px;
    margin-top: -30px;
    background: url("http://static.kelformation.com/apps/public/resources/images/redirect/alerte_lightbox.png") no-repeat top left;
}
.am_form{
    float: left;
    margin-left: 20px;
    width: 465px;
}
.am_form > p {
    font-size: 1.5em;
}
.am_form strong {
    color: #73b3bf;
}
.am_form .qa-form__input {
    padding: 0.75em;
    width: 230px;
}
.am_form .qa-form__submit {
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #cf3600;
    color: white;
    font-weight: bold;
    font-size: 1.25em;
    padding: 0.4em;
    cursor: pointer;
    background-color: #FF7D03;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #FF8903),
        color-stop(0.5, #FF7D03),
        color-stop(0.5, #FF6701),
        color-stop(1, #F84600)
    );
    background-image: -o-linear-gradient(bottom, #FF8903 0%, #FF7D03 50%, #FF6701 50%, #F84600 100%);
    background-image: -moz-linear-gradient(bottom, #FF8903 0%, #FF7D03 50%, #FF6701 50%, #F84600 100%);
    background-image: -webkit-linear-gradient(bottom, #FF8903 0%, #FF7D03 50%, #FF6701 50%, #F84600 100%);
    background-image: -ms-linear-gradient(bottom, #FF8903 0%, #FF7D03 50%, #FF6701 50%, #F84600 100%);
    background-image: linear-gradient(to bottom, #FF8903 0%, #FF7D03 50%, #FF6701 50%, #F84600 100%);
    -webkit-box-shadow: 1px 1px 1px 0 #bbb;
    box-shadow: 1px 1px 1px 0 #bbb;
}
.qa-form__submit:hover {
    text-decoration: underline;
}
.modal__msg.show {
    visibility: visible;
}
.modal__msg.error p {
    color: red;
    font-size: 1.2em;
}
.modal__msg.error p + p {
    color: inherit;
    font-size: inherit;
}
.modal__overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: #cccccc;
    background: rgba(50,50,50,0.7);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.show ~ .modal__overlay {
    opacity: 1;
    visibility: visible;
}