@import url(../fonts/osp-dindin/stylesheet.css); /*@import url(http://fonts.googleapis.com/css?family=Francois+One);*/
@import url(../fonts/learning_curve_proregular/stylesheet.css);
@import url(../fonts/alex_brushregular/stylesheet.css);

@import url(reset.css);

html {
  min-height: 100%;
  height:100%;
  background: #0b0b0b;
  background-image: url('../images/bg/black_pattern02.jpg');
}
body {
  font-size: 1em; /*controle toutes les tailles relatives en [em] ensuite*/
  font-family: "osp-dindin", arial, sans-serif;
  font-style: normal;
  color: #dedede;
  margin: 0.5em;
  width: 60em;
  margin: 0 auto;
}
h1 {font-size: 2.5em; text-transform: uppercase; letter-spacing:0.4em; visibility: hidden;
    height: 6.5em;
}
h1 a:hover {text-decoration: none;}
h2 {font-size: 2em;}
h3 {font-size: 1.5em;}
a {color: #dedede; text-decoration: none;}
a:hover {color: #dedede;	text-decoration: underline;}

#titre {
  width: 35em;
  clear: both;
  background: transparent url("../images/Danielle_Pierquet.png") no-repeat center center;
  background-size: 35em;
  margin: 0 auto 0 auto; /*top right bottom left*/
  text-align: center;
  /*border-bottom: 1px solid #dedede;*/
}
#menu {
  clear: both;
  text-align: center;
  margin: 0.5em 0 2em 0; /*top right bottom left*/
}
#menu.fullopacity {
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.7);
  margin: 0 !important;
}
#vignettes {
  float: left;
  width:15em;
  padding-right:4em;
}

img.vignette {
  border: none;
  width: 4em;
  height: 4em;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  border: 1px solid transparent;
}
img.vignette:hover {
  border: 1px solid #dedede;
  -khtml-box-shadow: 1px 1px 1em #ffffff;
  -o-box-shadow: 1px 1px 1em #ffffff;
  -ms-box-shadow: 1px 1px 1em #ffffff;
  -moz-box-shadow: 1px 1px 1em #ffffff;
  -webkit-box-shadow: 1px 1px 1em #ffffff;
  box-shadow: 1px 1px 1em #ffffff;
}
hr.nx_theme {
  display: block;
  clear: both;
  margin-top:2em;
  border: none;
}

#tableau {
  float: left;
  width: 40em;
  margin: 0 0 2em 0; /*top right bottom left*/
  position: relative;
}

img#attente {
  display: none;
  margin-bottom: 1em;
  margin-top: 1px;
  margin-left: 1px;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 9000;
}
img#vendu {
  width: 6em;
  display: none;
  position: absolute;
  left: -1px;
  top: -1px;
  z-index: 9001;
}


#previsualisation img {
  width: 100%;
  cursor: pointer;
  margin-bottom:1em;
  border: 1px solid #dedede;
  -webkit-box-shadow: 1px 1px 1em #ffffff;
   -khtml-box-shadow: 1px 1px 1em #ffffff;
     -moz-box-shadow: 1px 1px 1em #ffffff;
      -ms-box-shadow: 1px 1px 1em #ffffff;
       -o-box-shadow: 1px 1px 1em #ffffff;
          box-shadow: 1px 1px 1em #ffffff;
}
#previsualisation p {
  cursor: pointer;
  font-family: "osp-dindin", arial, sans-serif;
  font-size: 1.2em;
  letter-spacing: 0.15em;
  /*color:#338AC1;*/
  margin-bottom:4em;
}

#liens {
  clear: both;
  text-align: center;
  margin: 0 0 2em 0; /*top right bottom left*/
}
.text {
  color: #ffffff;
  text-align:justify;
  font-family: "learning_curve_proregular", Georgia, "Times New Roman", Times, serif;
  font-size: 2em;
  line-height: 1em;
  padding: 0 1em 0 1em; /*top right bottom left*/
  background-image: linear-gradient(transparent 23px, rgba(220,220,200,.8) 24px, transparent 24px); /*http://fabrice.lemainque.free.fr/CSS_56.html*/
  background-size: 100% 1em;
}

.text p {
  margin: 1em 0 1em 0;
}

.text p.titre, .text p.titre:first-of-type::first-letter {
  color:#338AC1;
  font-weight:bold;
}

.text p:first-of-type::first-letter { /* lettrine */
  float:left; 
  margin: -0.2em 0.17em -0.1em -0.1em; /*top right bottom left*/
  color: #dedede; 
  font-family: "alex_brushregular", Georgia, "Times New Roman", Times, serif;
  font-size:4em; 
  font-weight:bold;
  line-height: 1em 
}

.text a {
  text-align: center;
  text-decoration: none;
  padding:0 0.3em; /*top/bottom right/left*/
  border: 1px solid transparent;
}

.text a:hover {
  color: #dedede;
  text-decoration: none;
  background: #333333;
  border: 1px solid #dedede;
  -khtml-box-shadow: 1px 1px 1em #ffffff;
  -o-box-shadow: 1px 1px 1em #ffffff;
  -ms-box-shadow: 1px 1px 1em #ffffff;
  -moz-box-shadow: 1px 1px 1em #ffffff;
  -webkit-box-shadow: 1px 1px 1em #ffffff;
  box-shadow: 1px 1px 1em #ffffff;
}

.text .ms { /*more letter-spacing*/
  letter-spacing: 0.15em;
}

.liste {
  text-align:justify;
  font-size: 1.6em;
  padding: 0 1em 0 1em; /*top right bottom left*/
}

.liste p:first-of-type {
  margin: 0; /*top right bottom left*/
}
.liste p {
  margin: 1.2em 0 0 0; /*top right bottom left*/
}

.liste a {
  text-align: center;
  text-decoration: none;
  padding:0 0.3em; /*top/bottom right/left*/
  border: 1px solid transparent;
}

.liste a:hover {
  color: #dedede;
  text-decoration: none;
  background: #333333;
  border: 1px solid #dedede;
  -khtml-box-shadow: 1px 1px 1em #ffffff;
  -o-box-shadow: 1px 1px 1em #ffffff;
  -ms-box-shadow: 1px 1px 1em #ffffff;
  -moz-box-shadow: 1px 1px 1em #ffffff;
  -webkit-box-shadow: 1px 1px 1em #ffffff;
  box-shadow: 1px 1px 1em #ffffff;
}

.liste .resumer {
  font-family: "osp-dindin", arial, sans-serif;
  font-size: 0.6em;
  letter-spacing: 0.10em;
  color: #338AC1;
  margin-bottom: 1em;
}

.liste .date {
  display: block;
  float: left;
  width: 3em;
  height: 3em;
  margin-right: 1em;
  border-right: 1px solid white;
  font-family: "osp-dindin", arial, sans-serif;
  font-size: 0.8em;
  letter-spacing: 0.15em;
  color:#338AC1;
}
.liste .video {
  width:21.85em;
  height:12.3em;
  border: none;
}

ul.menu {
  font-size: 1.2em;
  list-style-type: none;
  display: block;
  margin:0;
  padding:0
}
ul.menu li {
  font-weight: 100;
  display: inline;
  cursor: pointer;
  border-right: 1px solid #dedede;
  padding: 0 0.5em 0 0.5em; /*top right bottom left*/
  margin: 0;
  letter-spacing:0.15em;
}
ul.menu li:first-child {
  padding: 0 0.5em 0 0; /*top right bottom left*/
}
ul.menu li:last-child {
  padding: 0 0 0 0.5em; /*top right bottom left*/
  border-right: none;
}
ul.menu li a {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding:0 0.3em; /*top/bottom right/left*/
  border: 1px solid transparent;
}

ul.menu li a:hover {
  color: #dedede;
  text-decoration: none;
  background: #333333;
  border: 1px solid #dedede;
  -khtml-box-shadow: 1px 1px 1em #ffffff;
  -o-box-shadow: 1px 1px 1em #ffffff;
  -ms-box-shadow: 1px 1px 1em #ffffff;
  -moz-box-shadow: 1px 1px 1em #ffffff;
  -webkit-box-shadow: 1px 1px 1em #ffffff;
  box-shadow: 1px 1px 1em #ffffff;
  
  /*color: #000000;
  text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
  color: rgb(51, 153, 187);
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);*/
}

/* Smartphones ----------- */
/*@media only screen and (max-width: 810px) and (orientation: portrait), handheld and (orientation: portrait) {*/
@media only screen and (max-width: 810px), handheld {
  body {
    font-size: 1.4em; /*control toutes les tailles relative en [em] ensuite*/
    width: auto;
    text-align: center;
  }
  #menu {
    width: auto;
    margin: 0.5em 0.5em 0.5em 0.3em; /*top right bottom left*/
    padding-bottom: 0;
  }
  #liens {
    width: auto;
    margin: 0.5em 0.5em 0.5em 0.3em; /*top right bottom left*/
  }
  #titre {
    width: auto;
    margin: 0 0.5em 0 0.3em; /*top right bottom left*/
    text-align: center;
    border-bottom: none;
    background-size: 20em;
 }
  #vignettes {
    width: auto;
    float: none;
    padding: 0;
    margin: 0 0.5em 0 0.3em; /*top right bottom left*/
    text-align: left;
  }
  #tableau {
    width: auto;
    margin: 0 0.5em 0 0.3em; /*top right bottom left*/
    float: none;
  }
  h1 {font-size: 1.2em; letter-spacing:0.2em}
  hr.nx_theme {
    margin-top:0;
    border-bottom: 1px solid #dedede;
  }
  .currentLink {
    -khtml-box-shadow: 1px 1px 1em #ffffff;
    -o-box-shadow: 1px 1px 1em #ffffff;
    -ms-box-shadow: 1px 1px 1em #ffffff;
    -moz-box-shadow: 1px 1px 1em #ffffff;
    -webkit-box-shadow: 1px 1px 1em #ffffff;
    box-shadow: 1px 1px 1em #ffffff;
  }
  .notInPhone {
    display: none;
  }

  ul.menu {
    width: 96%;
    text-align: left;
  }
  ul.menu li, ul.menu li:first-child, ul.menu li:last-child {
    border-right: none;
    padding: 0 0 0.2em 0; /*top right bottom left*/
    display: block;
  }
  ul.menu li a {
    width: 100%;
    color: #dedede;
    text-decoration: none;
    background: #333333;
    border: 1px solid #dedede;
  }
  img.vignette {
    width: 6.4em;
    height: 6.4em;
    margin-right: 0.2em;
    margin-bottom: 0.2em;
  }
  .text {
    font-size: 1.3em;
    line-height: 1em;
    background-image: linear-gradient(transparent 23px, rgba(220,220,200,.8) 24px, transparent 24px); /*http://fabrice.lemainque.free.fr/CSS_56.html*/
    background-size: 100% 1em;
  }
  .text p:first-of-type::first-letter { /* lettrine */
    font-size:2em; 
  }
  .liste {
    font-size: 1.2em;
  }
  .liste .resumer {
    font-size: 0.8em;
    letter-spacing: 0.10em;
  }
}