html, body
{
  width:100%;
  height:100%;
  font-family:Trebuchet MS;
}
.container-header
{
  background:linear-gradient(0.5turn, wheat, peru);
  display:block;
  position:fixed;
  top:0px;
  left:0px;
  height:55px;
  width:100%;
  z-index:2;
  padding:10px 10px 10px 10px;
}
h1
{
  font-size:24px;
}
#page
{
  height:100%;
}
.container-main
{
  background-color:#EEE;
  padding:20px;
  margin-top:55px;
}
input.double,.double
{
  -ms-transform:scale(1.5);
  -moz-transform:scale(1.5);
  -webkit-transform:scale(1.5);
  -o-transform:scale(1.5);
}
.www, .www:hover
{
  color:snow;
}
.ggg
{
  background:linear-gradient(0.01turn, peru, wheat);
}
.bbb
{
  border:solid 1px black;
}
.big
{
  font-size:24px;
  line-height:24px;
}
.titlelink, .titlelink:hover
{
  color:black;
  text-decoration:none;
}
.rssimg
{
  width:80px;
  height:46px;
  float:left;
  margin-right:10px;
}

.scroll-container
{
  margin:auto;
  -height:100hv;
  -width:97vw;
  overflow:hidden;
  -white-space:nowrap;
  border:none;
}

.scroll-text-vertical
{
  height:100%;
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -moz-animation: my-animation-vertical 16s linear infinite;
  -webkit-animation: my-animation-vertical 16s linear infinite;
  animation: my-animation-vertical 16s linear infinite;
}

.scroll-text-horizontal
{
  height:100%;
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -moz-animation: my-animation-horizontal 16s linear infinite;
  -webkit-animation: my-animation-horizontal 16s linear infinite;
  animation: my-animation-horizontal 16s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation-vertical
{
  from { -moz-transform: translateY(100%); }
  to { -moz-transform: translateY(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation-vertical
{
  from { -webkit-transform: translateY(100%); }
  to { -webkit-transform: translateY(-100%); }
}

/* for Firefox */
@-moz-keyframes my-animation-horizontal
{
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation-horizontal
{
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation-vertical
{
  from {
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  to {
    -moz-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

@keyframes my-animation-horizontal
{
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

.fade-block { animation: fading 2s; }
@keyframes fading { 0% { opacity: 0; } 100% { opacity: 1; } }

.slide-block { animation: sliding 0.8s; overflow:hidden; }
@keyframes sliding { from { top:-100%; } to { top:0%; } }

.slideleft-block { animation: slidelefting 1.6s; overflow:hidden; }
@keyframes slidelefting { from { left:100%; } to { left:0; } }

.blur-block { animation: bluring 1s; }
@keyframes bluring { 0% { filter:blur(100px); } 100% { filter:blur(0px); } }

.glossy-button {
  display: inline-block;
  text-align:center;
  width:64px;
  height:64px;
  position: relative;
  background-color: #AAA;
  background-image: linear-gradient( /* chrome */
    hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 100%, 0) 50%,
    hsla(0, 0%, 0%, 0.3) 50%, hsla(0, 0%, 100%, 0.2)
  );
  font-size: 52px;
  font-family: sans-serif;
  font-weight: bold;
  color: black;
  line-height:64px;
  text-shadow:
    0 0 15px hsla(0, 0%, 100%, 1), /* bloom */
    0 2px 4px hsla(0, 0%, 0%, 0.7); /* drop shadow */
  border:solid 1px black;
  border-radius: 15px;
  margin: 2px;
  box-shadow:
    inset 0 -5px 20px hsla(0, 0%, 0%, 0.4), /* top light */
    inset 0 5px 20px hsla(0, 0%, 100%, 0.4), /* bottom shadow */
    /* multiple light sources yall */
    -8px 8px 5px hsla(0, 0%, 0%, 0.15), /* drop shadow 1 */
    5px 18px 10px hsla(0, 0%, 0%, 0.2); /* drop shadow 2 */
  transition: transform 0.1s, box-shadow 0.1s;
}

.glossy-button:before {
  content: '';
  display: block;
  position: absolute;
  left: 5px;
  right: 5px;
  top: 5px;
  height: 30px;
  border-radius: 15px;
  background: linear-gradient(
  hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0) );
}

.loto-button {
  display:inline-block;
  text-align:center;
  width:64px;
  height:64px;
  font-size:36px;
  line-height:64px;$
  background: radial-gradient(
    circle at top,
    white,
    yellow,
    orange,
    red,
    darkred
  );
  border-radius:50%;
}

.chiffres-button {
  display:inline-block;
  text-align:center;
  min-width:60px;
  height:60px;
  font-size:36px;
  line-height:60px;
  padding:0px 20px 0px 20px;
  color:white;
  background: radial-gradient(
    dodgerblue, navy
  );
  border-radius:12px;
}

.chiffres-button-red {
  background: radial-gradient(
    crimson, darkred
  );
}

.lettres-button {
  display:inline-block;
  text-align:center;
  width:50px;
  height:50px;
  font-size:36px;
  line-height:50px;
  color:black;
  background: radial-gradient(
    white, gold
  );
  border-radius:12px;
}