@font-face {
  font-family: 'GE Inspira' ;
  src: url('/fonts/GE_Inspira.ttf')format('truetype');
}

@font-face {
  font-family: 'GE Inspira Bold' ;
  src: url('/fonts/GE Inspira Bold.ttf')format('truetype');
}

@font-face {
  font-family: 'Times New Roman' ;
  src: url('/fonts/Times_New_Roman.ttf')format('truetype');
}

body {
  padding-left: 2%;
  padding-right: 2%;
  font-family: GE Inspira, verdana, sans-serif;
  background: #181818;
  font-size: 18px;
  color: #c6c6c6;
}

#gauche {
  position: fixed;
  overflow : auto;
  text-align: center;
  float: left;
  padding-right: 2%;
  width: 23%;
  font-size: 1em;
}

#gauche2 {
  position: fixed;
  text-align: center;
  float: left;
  width: 20%;
  font-size: 1em;
}

#droite {
  overflow : auto;
  min-height: 1080px;
  margin-top: 1.5em;
  margin-left: 25.5%;
  border-left: 1px #ff5252 solid;
}

#droite2 {
  margin-top: 1.5em;
  margin-left: 25.5%;
  text-align: center;
}

#galerie {
  font-family: Times New Roman;
  font-size: 2.1em;
  text-align: center;
  color: #808080;
  margin-bottom: 0px;
}

#galerie-slide {
  font-size: 0.6em;
  text-align: center;
}

p  {
  font-size: 1em;
  margin-top: 5px
}

h1 {
  font-size: 2.1em;
  color: #808080;
}
a:link {
  color: #c6c6c6;
text-decoration:none;
}

/*video inverse sur les liens*/
a:hover {
  color: #e900fd;
text-decoration:none;
}

img.image-link {
  border-style: none;
}

/* Various */

.small {
  margin-top: -15px;
  font-size: 0.8em;
  color: #c6c6c6;
}

.large {
  font-size: 200%;
}

.center {
  text-align: center;
}

/* positionnement de la table de l'ensemble des miniatures */

.center table {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Index table */

table.index {
  border: 0px;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

table.with-tile {
  background-color: #727272;
}

/*pour espacer les miniatures les unes des autres*/
table.index td {
  padding-left: 0;
  padding-right: 30px;
  padding-bottom: 4px;
  padding-top: 0px;
}

table.index td.thumb {
  width: 235px;
  height: 235px; 
}

/*commentaire de l'album*/ 
.desc {
  white-space: pre-line;
  text-align: left;
  font-size: 17px;
  color: #c6c6c6;
  width: 23%;
  height: 68%;
  position:fixed;
  padding-right: 10px;
  overflow: auto;
}

/*---------FIN------------*/

table.index td.text-thumb {
  border-width: 0px;
  border-style: solid;
  border-color: #ffffff;
  text-align: center;
  font-size: 50%;
}

table.index td.tiled {
  text-align: left;
  font-size: 0px;
}

table.index td.thumb-dim {
  font-size: 50%;
}

table.index tr:nth-child(even) {
display: none;
}

/*apparition et mouvement du titre sur les images*/
table.index div {
background-color: rgba(0, 0, 0, 0.3);
  top: 100px;
  width: 200px;
  height: 0;
  font-family: Times New Roman;
  font-size: 15px;
  visibility: hidden;
  position: absolute;
  color: #e6e6e6;
}

/*SPECIAL pour thumbs carrés*/
  table.index div.carre {
  background-color: rgba(0, 0, 0, 0.3);
  top: 100px;
  width: 177px;
  height: 0;
  font-family: Times New Roman;
  font-size: 15px;
  visibility: hidden;
  position: absolute;
  color: #e6e6e6;
}

/*SPECIAL pour première page*/
  table.index div.garde {
  background-color: rgba(0, 0, 0, 0.3);
  width: 300px;
  height: 0;
  font-family: Times New Roman;
  font-size: 15px;
  visibility: hidden;
  position: absolute;
  color: #e6e6e6;
}

table.index td.thumb:hover div {
  visibility: visible;
  height: auto;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: glisser;
  -moz-animation-name: glisser;
  animation-name: glisser;
}
@-webkit-keyframes glisser {
  from {
    top: 0px; 
  }
  to {
    top: 100px;
  }
}
@-moz-keyframes glisser {
  from {
    top: 0px;
  }
  to {
    top: 100px;
  }
}
@keyframes glisser {
  from {
    top: 0px; 
  }
  to {
    top: 100px;
  }
}

table.index td.thumb:hover div.garde {
  visibility: visible;
  height: auto;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: glisser;
  -moz-animation-name: glisser;
  animation-name: glisser;
}
/*---------FIN------------*/

table.index td.thumb-caption {
  text-align: left;
}

hr.index {
  width: 80%;
  height: 0px;
  border-width: 2px;
}

/* Slides */

table.slide {
  position: relative;
  top: 0;
}

table.slide td.image-slide {
  /*position: relative;*/
  top: 0;
  border: 3px solid #fff;
}
table.slide td.image-slide img {
  animation: fadein 3s;
  -moz-animation: fadein 3s;
  -webkit-animation: fadein 3s;
  -o-animation: fadein 3s;
}
@keyframes fadein {
    from {
        opacity:0.2;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { 
    from {
        opacity:0.2;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { 
    from {
        opacity:0.2;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { 
    from {
        opacity:0.2;
    }
    to {
        opacity: 1;
    }
}

/* Légende de l'image du slide */
p.caption {
  font-size: 1em;
  color: #afafaf;
  width: 987px;
}

p.legende {
  text-align: center;
  font-size: 1em;
  color: #afafaf;
}

/* Headers and footers */

.header {
  font-size: 1em;
  color: #c6c6c6;
}

.footer {
  font-size: 0.5em;
  padding-top: 6px;
  padding-bottom: 6px;
}

.footer>div {
   text-align: left !important;
}

h1{
  /* The title of the page */
  color:#808080;
  font-family:'Times New Roman', serif;
  font-size:38px;
  font-weight: normal;
}

hr{
  /* The horizontal ruler */
  background-color:#ff5252;
  border:none; medium 
  color:#ff5252;
  margin-top:10px;
  margin-bottom:10px;
  height:1px;
  width:100%;
}

