html{height: 100%}

* {padding: 0;margin: 0;}
ul{list-style: none}

body{
  min-height: 100%;
  font-family: 'Advent Pro', Arial, sans-serif;
  background-color: #000000;
    
    color : #ffffff;
    overflow: scroll;
    letter-spacing: 1px;
    
}

#mainDiv{
  width: 810px;
  margin-bottom: 50px;
  margin-top: 50px;
}

div#photo{display: none}

fieldset{
  width: 700px;
  border: solid 1px #444;
  margin-bottom: 20px;
  padding: 8px;
}

legend{
  margin: 0 4px;
  background-color: #000000;
  font-weight: bold;
}

h1, legend, .organisme b, #titre, .grey{
  color: #666666;
}

h1{
  margin: 0 auto;
  width: 360px;
  text-align: center;
}

#etatCivil{
  position: fixed;
  margin: 20px;
}

#etatCivil a img{
  border: 0px;
}

#bodyMenu{
  height: 36px;
}

ul#menu{
  list-style: none outside none;
  /*background-image: url("../images/menubk.png");*/
  background-color: #111111;
  height: 36px;
  border-color: #999999;
    /*border-radius: 4px 4px 4px 4px;*/
    border-style: solid;
    border-width: 0;
    position: fixed;
}

ul#menu li{
  float: left;
  text-align: center;
  padding-left: 1px;
}

ul#menu li a{
  padding: 10px;
  display: block;
  float: left;
  background: #333333;
  color: #ffffff;
  text-decoration: none;
  line-height: 16px;
  text-shadow: 0 0 0 #ffffff;
  font-size: 12px;
  font-weight: bold;
  /*background-image: url("../images/menubk.png");
  background-position: 0 50%;*/
}

/*
ul#menucss li a{
    background: #333333;
    -moz-transition: all .5s;
    display: block;
    width: 100px;
    height: 50px;
}
*/

ul#menu li a:hover{
    -moz-transition: all .5s;
    -webkit-transition: all .5s ;
    -ms-transition: all .5s ;
    -o-transition: all .5s ;
    transition: all .5s;
    color: #000000;
}

#bottomShade{
  background: url('../images/shadow.png') repeat-x 0 0 transparent;
  bottom: 0px;
  height: 50px;
  position: fixed;
  width: 100%;
}
/*.bleu{#1D00FF}
.rouge{#FF0000}
.orange{#FF7F00}
.jaune{#FFE900}
.vert{#08FF00}
.indigo{#8300FF}
.violet{#B700E0}*/
ul#menu li a.color1:hover{
    background: #FF0000;
}
ul#menu li a.color2:hover{
    background: #FF7F00;
}
ul#menu li a.color3:hover{
    background: #FFE900;
}
ul#menu li a.color4:hover{
    background: #08FF00;
}
ul#menu li a.color5:hover{
    background: #1D00FF;
}
ul#menu li a.color6:hover{
    background: #8300FF;
}
ul#menu li a.color7:hover{
    background: #B700E0;
}

.first{border-radius: 4px 0 0 4px}
.last{border-radius: 0 4px 4px 0}

div#wrapper{
  width: 960px; 
  margin: 0 auto;
  position: relative;
  min-height: 100%;
   /* background-image: url("../images/content-middle.png");*/
}
.cols{
/*background-image: url("../images/content-middle.png");*/
  height: 100%;
  position: relative;
  z-index: 0;
  float: left;
}

.left-rainbow{
  width: 150px;
  background: url('../images/full-rainbow-bg-1.png') ;
  position: absolute;
  left: -150px;
  height: 100%;
  opacity: 0;
}
.left-rainbow-cache{
  width: 150px;
  background: url('../images/pochoir1.png') ;
  position: fixed;
  height: 100%;
}

.right-rainbow{
  width: 150px;
  background: url('../images/full-rainbow-bg-2.png') ;
  position: absolute;
  right: -150px;
  height: 100%;
  float: left;
  opacity: 0;
}
.right-rainbow-cache{
  width: 150px;
  background: url('../images/pochoir2.png') ;
  position: fixed;
  height: 100%;
}

#leftCol{width: 150px; float: left; min-height: 100px; position: relative; z-index: 1}

#rightCol{float: left; min-height: 100px;  position: relative; z-index: 1}

.zero{clear: both}
.fl{float: left}
.fr{float: right}
.error{color: red}

.mail_contact{
  position: relative;
  top: 4px;
}

#mail_left{position: relative; cursor: pointer}

.hepta{
  height: 700px;
  position: fixed;
  top: 50px;
  width: 700px;
  z-index: -1;
  margin: 0 0 0 130px;
  opacity: 0.5;
  display: none;
}

#slideshow{z-index: -1;}

#slideshow .inner-slideshow img{
  height: 525px;
  width: 700px;
}

#prev{
  font-size: 50px;
  position: absolute;
  text-shadow: #000 0px 0px 3px;
  top: 250px;
  left: -30px;
  cursor: pointer;
}
#next{
  font-size: 50px;
  position: absolute;
  text-shadow: #000 0px 0px 3px;
  top: 250px;
  right: 79px;
  cursor: pointer;
}

#titre{
  margin-left: 100px;
  font-weight: bold;
  font-size: 18px;
}
#societe{
  margin-left: 60px;
}
#description{
  width: 650px;
  height: 80px;
  margin: 10px 0 0 70px
}
#wrapperSlider{
  /*margin:0 auto; width: 810px; height:300px;*/
  position: relative;
}

#qcq .hepta{
  display: block;
}

#qcq #mainDiv{
  left: 150px;
  position: relative;
  top: 250px;
  width: 360px;
}

#mainDiv p a{
  color: #A454A1;
}
 
@media screen and (max-width: 960px) {
    div#wrapper{
        width: auto;
        padding: 0 10px;
    }
    .left-rainbow{
        left: -140px;
    }
    .right-rainbow{
        right: -140px;
    }
    #leftCol, #rightCol{
        float: none;
    }
    #leftCol{
        width: auto;
        background-color: #000000;
    }
    #etatCivil{
        position: relative;

    }
    #textEtatCivil{
        float: left;
        width: auto;
    }
    #liensDocs{
        float: right;
    }
    #mainDiv{
        width: auto;
        margin-left: 10px;
        margin-right: 10px;
    }
    ul#menu{
        position: relative;
        padding: 10px;
        height: auto;
    }
    ul#menu li{
        float:none;
        display: inline-block;
    }
    ul#menu li a{
        float: none;
    }
    h1, fieldset{
        width: auto;
    }
    .hepta{
        width: 100%;
        top: 150px;
        height: auto;
        margin: 0px;
        left: 0px;
    }
    #titre{
        margin-left: 60px;
    }
    #description{
        max-width: 452px;
        margin: 10px 70px 30px;
        width: auto;
        min-height: 100px;
    }
    #slideshow{
        margin: 0 auto;
    }
    #slideshow .inner-slideshow img, #slideshow .inner-slideshow, #slideshow {
      height: 300px;
      width: 400px;
    }
    #prev{
      top: 120px;
      left: 20px;
    }
    #next{
        top: 120px;
        right: 20px;
    }
    .first, .last{
        border-radius: 0px;
    }
}
@media screen and (max-width: 632px) {
    #mainDiv{
        margin-top: 100px;
    }
}
@media screen and (max-width: 500px) {
    #slideshow .inner-slideshow img, #slideshow .inner-slideshow, #slideshow {
      height: 210px;
      width: 280px;
    }
}