body {
  color:#333;
  font-family:Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
}

button {
  cursor:pointer;
}

p.dead {
  text-align:center;
  font-weight:bold;
  font-style:italic;
}

h1 {
  font-size:2rem;
  text-align:center;
  color:#5383b9;
}

h1 i {
  font-size:1.5rem;
}

i.fa-twitter-square {
  color: #2aa7de;
}

body.with-logo h1 {
  margin:0;
}

body.www h1 {
  margin-bottom:10px;
}

div.menu {
  text-align:center;
}

ol li {
  margin-top:5px;
}

.download  {
  width:500px;
  margin-top:20px;
  margin-left:auto;
  margin-right:auto;
}

#subtitle {
  text-align:center;
  color:#5383b9;
  font-size:.90rem;
}

body.with-logo #subtitle {
  margin-top:0;
}

#footer {
  margin-top:20px;
  text-align:center;
  font-size:.80rem;
  color:silver;
}

a {
  text-decoration:none;
  color: cornflowerblue;
}

h2 {
  font-size:1.5rem;
}

h3 {
  text-align:center;
}

h2.fa-arrow-circle-up {
  color:#333;
}

ul {
  padding-left:25px;
  list-style: square;
}

ul.left-img li {
  padding-bottom: 2px;
}

ul.left-img a {
  background-repeat: no-repeat;
  padding-left: 28px;
  padding-bottom:5px;
}

ul.left-img a.lbdc {
  background-image: url('/images/le_bruit_des_choses-icon.jpg');
}

ul.left-img a.idln {
  background-image: url('/images/incendie_dans_la_nuit-icon.jpg');
}

ul.left-img a.lae {
  background-image: url('/images/l_abyssal_envers-icon.jpg');
}

ul.left-img a.tdv {
  background-image: url('/images/teneurs_du_vide-icon.jpg');
}

ul.left-img a.cdc {
  background-image: url('/images/casseurs_de_codes-icon.jpg');
}

ul.left-img a.flying-bus {
  background-image: url('/images/flying_bus-icon.jpg');
}

ul.left-img a.strange-moon {
  background-image: url('/images/strange_moon-icon.jpg');
}

ul.left-img a.night-rain {
  background-image: url('/images/night_rain-icon.jpg');
}

#buttons-bar {
  text-align:center;
  margin-top:20px;
}

.description {
  background:#fdfdfd;
  padding-left:20px;
  padding-right:20px;
  margin-top:20px;
  margin-bottom:10px;
  margin-left:auto;
  margin-right:auto;
  border: 1px solid #efefef;
  border-radius:5px;
  line-height: 1.5em;
}

.description a.project {
  font-weight:bold;
}

#infos {
  text-align:center;
  font-size:12px;
}

.btn {
  margin-top:5px;
  display: inline-block;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: #b3c8ed;
  color:#fff;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn:hover {
  color:#555;
}

.btn-1:hover,
.btn-2:hover {
  color:#fff;
  background-color:#dd3d31;
  border-color: #dd3d31;
  text-shadow: 1px 1px 1px black;
}

.btn.little {
  font-size:0.8rem;
}

.btn-1 {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-2 {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}


i.fa-rss-square {
  color: #f08730;
}

.ss-outdated {
  text-align:center;
  font-style:italic;
  font-size:12px;
}

.slider {
  margin: auto;
  width: 85%;
  max-width:1024px;
}

.slider > a {
  float:left;
}

img {
  border:1px solid silver;
  margin:5px;
  padding:5px;
  border-radius:3px;
}

.lang-choice {
  text-align:center;
}

.lang-choice img {
  border:none;
  margin:0;
  padding-top:0;
}

body.with-logo img.logo {
  display:block;
  margin:auto;
  border:0;
  width:48px;
  height:48px;
}

iframe {
  height:190px;
  width:700px;
}

body.gpl h1:before  {
  content: url("/images/GPLv3_Logo.png");
}

@media all and (max-width:740px){

  iframe {
    width: 550px;
  }

}

@media all and (max-width:580px){

  iframe {
    width: 400px;
  }

}

@media all and (max-width:460px){

  iframe {
    width: 250px;
  }

}

@media all and (max-width:400px){
  
  * {
    font-size:0.9rem;
  }
}

@media all and (min-width:1024px){

  .description {
    max-width:1024px;
  }

}

/************************************* Header min */

#header-min {
  display:none;
  position:fixed;
  background:#fdfdfd;
  padding:5px;
  border-bottom:1px solid cornflowerblue;
  top:0;
  left:0;
  width:100%;
  text-align:center;
  box-shadow: 0 1px 3px 5px rgba(0, 0, 0, 0.2);
  z-index:1;
}

#header-min i.fa-arrow-circle-up {
  margin-right:20px;
}

#header-min div.menu {
  margin-right:10px;
}

/************************************* Section cursor */

#cursor {
  visibility:hidden;
}

#section-cursor {
  position:fixed;
  margin-left:-2px;
  margin-top:50px;
  color:silver;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform-origin: left bottom 0;
  -ms-transform-origin: left bottom 0;
  -webkit-transform-origin: left bottom 0;
}

#section-cursor:first-letter {
    text-transform: uppercase;
}

#cursor-arrow {
  position:fixed;
  margin-left:-6px;
  margin-top:63px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid cornflowerblue;
}

@media all and (max-width:400px){

  #section-cursor {
    margin-left:-5px;
  }

  #cursor-arrow {
    margin-left:-8px;
    margin-top:60px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid cornflowerblue;
  }
}


/************************************* Player */

  div.player-section {
    background:#464646;
    padding:10px;
    border-radius:10px;
    display:inline-block;
    text-align:center;
  }

  div#player-controls, audio {
    border-radius:10px;
    width: 350px;
    text-align:center;
  }

  audio {
    display:none;
  }

  div#player-controls {
    width: 375px !important;
  }

  div#player-msg {
    color:#fff;
    text-align:center;
    font-size:0.9rem;
  }

  div.player-section select {
    border:1px solid #fff;
    border-radius:3px;
    margin-bottom:10px;
    padding:3px;
  }

  .disabled {
        opacity:.6;
        pointer-events: none;
        cursor: default;
  }

@media all and (max-width:450px){

  audio {
    width: 250px;
  }

  div#player-controls {
    width: 270px !important;
  }


}

@media all and (max-width:350px){

  audio {
    width: 180px;
  }

  div#player-controls {
    width: 210px !important;
  }


}