body {
  font-family:      "Titillium Web", sans-serif;
  font-weight:      400;
  font-style:       normal;
  background-color: #111;
  color:            #f5f5f5;
  text-align:       center;
  margin: 	    0;
  padding:	    0;
}
.headbarBox {
   text-align:      center;
   width:           100%;
   padding-top:     0;
   padding-bottom:  10px;
   font-family:     "Titillium Web", sans-serif;
   background:      linear-gradient(0deg, rgba(63,59,58,1) 20% , rgba(63,59,58,0.7) 40% , rgba(63,59,58,0.3) 100% );
   vertical-align:  middle;
}
.logoBox { display: inline-block; position: absolute; left: 24px; top: 0px }
.titleBox { color: #cff1d0; font-size: 1.2rem; font-family: "Titillium Web"; font-weight: 700}
.stitleBox { color: rgba(206,240,208,0.5); font-size: 1.0rem; }
.linkBox { font-size: 2.0rem;  display: inline-block; position: absolute; left: 200px; top: 10px }
.menuBox { font-size: 0.9rem; display: inline-block; margin-left: 180px; margin-right: 40px; min-width: 200px; height: 56px; margin-top: 0px }
.userBox { padding-top: 8px; display: inline-block; width: 60px; font-size: 0.66rem; color: #cff1d0; position: absolute; right: 10px; cursor: pointer }
.detailBox { display: inline-block; margin-top: 50px; float: right; margin-right: 10px }
.digestBox { display: inline-block; white-space: nowrap; width: 90%;  margin-top: 50px; margin-left: 50px; float: left; color: #cff1d0 } 
.imageBox { float:left; }

.thumbnail { max-width: 100%; height: 120px }
.navBar { float: right; margin-top: 4px; height: 200px; width: 620px; position: absolute; right: 0 } 
.navViewport { display: inline-block; margin: 10px; padding: 0; height: 160px; width: 572px; overflow: hidden; position: absolute; right: 0; top: 0 } 
.navElt { width: 100px; padding: 4px; background: #111; border-style: solid; border-radius: 8px; display: inline-block; margin: 0 1px }
.focus-on { border-color: #f00; border-width: 2.2px; }
.focus-off { border-color: #555; border-width: 1px; }
.navTitre{ font-size: 0.45rem; text-overflow: ellipsis }

.navControl { position: relative; bottom: -160px; height: 32px; margin-left: 33%; background-color: rgba(0,0,0,0.2); width: 38%; border-radius: 6px }
.navRank { position: absolute; bottom: 18px; right: 16px; font-size: 0.7rem; color: #ccc }
.navButton {font-size: 1.0rem; display: inline-block; cursor: pointer }
.navImg {width: 30px }

.inVisible { visibility: hidden }
.affiche { float: left; height: 480px; padding: 1px; background: #aaa; border-radius: 20px; margin-right: 10px; margin-top: 40px; box-shadow: 0px 0px 20px 4px rgba(0,0,0,0.60); display: inline-block }
.curseur { cursor: pointer }
.over { background-color: #f5f5f5; position: absolute; left: 150px; padding: 5px; margin-top: 530px; visibility: hidden; display: inline-block; color: #724848; font-size: 0.8rem; border-radius: 5px }
.ba { position: absolute; left: 50%; margin-top: 40px; height: 480px; transform: translate(-50%, 0); padding: 1px; visibility: hidden; display: inline-block; box-shadow: 0px 0px 20px 4px rgba(0,0,0,0.60); border-radius: 20px }
.justifyLeft { text-align: left }
.justifyRight { text-align: right }
.XXL { font-size: 2.5rem; font-weight: 700; margin-top: 10px }
.XL { font-size: 2.0rem; margin-top: 10px }
.S { font-size: 1.0rem; margin-top: 10px }
.XS { font-family: "Titillium Web"; font-size: 0.8rem; color: #bbbbbb; margin-left: 50px }
.Ombre { text-shadow: 1px 1px #030303 }
.Ombre2 { text-shadow: 2px 2px 10px #030303 }
ol { margin-left: 0; padding-left: 20px; padding-right: 20px }
ul { list-style-type: none;  height: 30px; margin-left: 20px; vertical-align: middle }
li { display: inline-block; margin-right: 10px; vertical-align: middle;}
li.actif { display: inline-block; margin-right: 10px; color: #f00; font-weight: 400; vertical-align: middle}
li.search { display: inline-block; margin-left: 4px; margin-right: 0; margin-top: 0; margin-bottom: 0 }
a:link { text-decoration: none; color: #cff1d0; margin: 0; padding: 0 }
a:visited { text-decoration: none; color: #cff1d0; margin: 0; padding: 0 }
a:hover { background-color: rgb(0,0,0,0.1); color : #ff0000; margin: 0; padding: 0 }
.coinHD {position: absolute;top:10px;right:10px;background:#FFF;border-radius:5px;border-width:1px;border-style:solid;color: #724848;font-size: 0.8rem;padding: 8px}
.coinHD2 {position: absolute;top:10px;right:80px;background:#FFF;border-radius:5px;border-width:1px;border-style:solid;color: #724848;font-size: 0.8rem;padding: 8px}
.miniBox { font-family: Courier; font-size: 1.0rem; color: #fefefe; margin-top: 10px; padding: 0px; text-wrap: wrap; text-align: left; text-justify: inter-word;  width: 92vw}
.footer { font-family: "Titillium Web"; font-size: 0.7rem; color: #bbbbbb; position: relative; top: 720px; border-spacing: 20px; text-align: center; width: 100%; }
.BABox { margin-top: 40px; padding-top: 20px; font-size: 0.8rem; color: #724848; float: left; visibility: hidden}
td.attribut { color: #cff1d0; font-size: 1.0rem; text-align: right; font-weight: 700; padding-right: 10px}
td.valeur { text-align: left; font-size: 1.0rem; color: #ffffff }
.selected { color: red }

.center-screen { position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) }
.loginBox { box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.15); background: #ffffff; word-break: break-word; line-height: 1.8rem; color: #333; padding: 20px; width: 350px; border: 0px } 
.loginButton { background-color: #eee ; color: #724848 ; margin-bottom: 2px ; cursor: pointer ; font-size: 0.9rem; font-weight: 600 ; padding: 8px 20px ; border: 0 }
.entrylabel { font-style: italic; font-size: 0.8rem ; color: #999 ; padding-bottom: 0 ; margin-bottom: 0 }
.fix350 { width: 350px }
.left { margin: auto; text-align: start ; padding-top: 0px}
.centered { margin: auto; text-align: center}
.top8 { padding-top: 10px }
.top20 { margin-top: 20px }
.tb20 { margin: 20px }
.top100 { margin-top: 100px }
.ecartS {margin: 4px }
.ecartL { margin: 10px }
.ecartXL { margin: 20px }
input[type=text] { width: 95%; padding: 4px 4px; margin: auto; border: 1px solid #724848a0 }
input[type=password] { width: 95%; padding: 4px 4px; margin: auto; border: 1px solid #724848a0 }
input::placeholder { font-style: italic; color: #72484870 }
.stitre { text-align: center; font-weight: 600; color: #724848; font-size: 100%; font-family: "Titillium Web"; vertical-align: middle}

.shaking { animation: vibration 0.5s; }
@keyframes vibration {
  0% , 100% { transform: translateX(0) }
  10%, 30% { transform: translateX(4px) }
  20%, 40% { transform: translateX(-4px) }
  50%, 70% { transform: translateX(2px) }
  60%, 80% { transform: translateX(-2px) }
  90% { transform: translateX(1px) }
}
@-webkit-keyframes vibration {
  0% , 100% { -webkit-transform: translateX(0) }
  10%, 30% { -webkit-transform: translateX(4px) }
  20%, 40% { -webkit-transform: translateX(-4px) }
  50%, 70% { -webkit-transform: translateX(2px) }
  60%, 80% { -webkit-transform: translateX(-2px) }
  90% { -webkit-transform: translateX(1px) }
}
@-moz-keyframes vibration {
  0% , 100% { -moz-transform: translateX(0) }
  10%, 30% { -moz-transform: translateX(4px) }
  20%, 40% { -moz-transform: translateX(-4px) }
  50%, 70% { -moz-transform: translateX(2px) }
  60%, 80% { -moz-transform: translateX(-2px) }
  90% { -moz-transform: translateX(1px) }
}
@-ms-keyframes vibration {
  0% , 100% { -ms-transform: translateX(0) }
  10%, 30% { -ms-transform: translateX(4px) }
  20%, 40% { -ms-transform: translateX(-4px) }
  50%, 70% { -ms-transform: translateX(2px) }
  60%, 80% { -ms-transform: translateX(-2px) }
  90% { -ms-transform: translateX(1px) }
}