/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

*{
 margin:0;
 padding:0;
}

body {
  font-family: 'Times New Roman';
  color:white;
  font-size:20px;
  background: url('img/meteorite.gif');
  background-size:300px auto;
  background-repeat: repeat;
}

a{
 color:red; 
}



header{
  text-align:center;
  border-bottom: 2mm ridge silver;
   box-shadow: 0 0 16px 0 rgba(0,0,255,0.2), 0 6px 20px 0 rgba(0,0,255,0.19);
   font-family:monospace;
}

header img{
  width:468px;
  margin:auto;
}

.marquee{
  max-width:70%;
  margin: auto;
  overflow: hidden;  
 color:white;
      text-shadow: 1px 1px 2px blue, 0 0 25px blue, 0 0 5px blue;
}


.marquee > :first-child {
  display: inline-block;                /* modèle de boîte en ligne */
  padding-right: 2em;                   /* un peu d'espace pour la transition */
  padding-left: 100%;                   /* placement à droite du conteneur */
  white-space: nowrap;                  /* pas de passage à la ligne */
  animation: defilement-rtl 15s infinite linear;
}

.news{
 width:100%;
 text-align:center;
}

.content-index{
  height:100%;
  width:100%;
  text-align:center;
    box-shadow: 0 0 16px 0 rgba(0,0,255,0.2), 0 6px 20px 0 rgba(0,0,255,0.19);
}

.content-index p{
   padding-bottom:20px;
}

.nav-index table{
  width:auto;
  margin:auto;
}



button{
  font-family:'Arial';
  width:250px;
  height:70px;
  box-shadow: 0 8px 16px 0 rgba(0,0,255,0.2), 0 6px 20px 0 rgba(0,0,255,0.19);
  background: url('img/marble.jpg');
  margin:30px;
  border: 1mm ridge silver;
  font-size:20px;
  text-decoration:none;
  font-weight:bold;
  color: black;
  text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ff0, 0 -10px 20px #ff8000, 0 -18px 40px #F00, 2px 2px 2px rgba(206,89,55,0);
  cursor:pointer;
}

button:hover{
    box-shadow: 0 8px 16px 0 rgba(255,0,0,0.2), 0 6px 20px 0 rgba(255,0,0,0.19);
     text-shadow: 1px 1px 2px red, 0 0 25px red, 0 0 5px red;
}


.nav-crew{
  width:300px;
  height:100%;
  text-align:center;
  padding-top:20px;
  padding-bottom:20px;
  border-right: 10px ridge silver;
  vertical-align:top;
     box-shadow: 0 0 16px 0 rgba(0,0,255,0.2), 0 6px 20px 0 rgba(0,0,255,0.19);
}

.nav-crew button{
  margin-top:10px;
  margin-bottom:10px;
}

.crew-content, .crew-intro{
  width:100%;
  padding:20px;
  vertical-align:top;
  box-shadow: 0 0 16px 0 rgba(0,0,255,0.2), 0 6px 20px 0 rgba(0,0,255,0.19);
}

.crew-intro{
  font-size:24px;
}

.p-warning{
  color:cyan;
  animation: blinker 0.5s linear infinite;
}

.crew-content {
  text-align:justify;
  background: rgb(101,96,180, 0.5);
background: linear-gradient(0deg, rgba(101,96,180,0.7) 0%, rgba(9,9,121,0.7) 0%, rgba(85,65,150,0.7) 100%);
  color:white;
}

.crew-content h2{
  color:white;
  text-shadow: 2px 2px red;
}


.crew-content p{
  width:30em;
}

.crew-content hr{
  border-bottom: 10px ridge silver;
  margin-bottom:20px;
 box-shadow: 0 0 16px 0 rgba(0,0,255,0.2), 0 6px 20px 0 rgba(0,0,255,0.19);
}

.folder-titre{
  margin-top:20px;
  font-size:36px;
}

.folder-table{

  padding:30px;
  width:100%;
}

.dossiers{
    text-align:left;
}

.folder-table td{
  padding:20px;
}

.folder-table a{
    text-decoration:none;
}

.folder-table h3{
  font-size:18px;
  text-shadow: 2px 0 0 blue, -2px 0 0 blue, 0 2px 0 blue, 0 -2px 0 blue, 1px 1px blue, -1px -1px 0 blue, 1px -1px 0 blue, -1px 1px 0 blue;
  font-family: monospace;
}

.folder-table h3:hover{
   text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

.nav-folder{
  vertical-align: top;
  width:30%;
  font-family:monospace;
}

.nav-folder p{
  margin:0;
}

.nav-folder ul{
  list-style:none;
}

.nav-folder li{
  font-size:16px;
  padding-left:10px;
    margin-bottom:5px;
}

.label-sommaire{
  color:black;
  background:linear-gradient(#e66465, #9198e5);
    font-weight:bold;
}

.label-sommaire:hover{
  font-weight:bold;
  box-shadow: 0 0 16px 0 rgba(0,0,255,0.2), 0 6px 20px 0 rgba(0,0,255,0.19);
}


.folder-legend {
 font-family: monospace; 
 font-size:16px;
}

.content-folder{
  color:white;
  background:rgb(255, 255, 255, 0.5);
  box-shadow: 0 0 16px 0 rgba(0,0,255,0.2), 0 6px 20px 0 rgba(0,0,255,0.19);
  background: rgb(101,96,180, 0.5);
background: linear-gradient(0deg, rgba(101,96,180,0.7) 0%, rgba(9,9,121,0.7) 0%, rgba(85,65,150,0.7) 100%);
}

.content-folder a{
  color:lime;
  text-decoration:underline;
  font-weight:bold;
}

.content-folder ul{
    list-style-image: url('../img/star.gif');
    padding-left:15px;
    padding-bottom:20px;
}

.footer {
    border-top: 2mm ridge silver;
    padding:1em;
text-align:center;
font-size:12px;
}

.small-banners{
  margin-top:1em;
}


@keyframes blinker {
  50% {
    color: red;
  }
}

@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);  /* position finale à gauche */
  }
}