/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 7 juil. 2015, 14:41:27
    Author     : baldetti
*/

#surprisecontent {
  width: 90%;
    height: 100%;
    left: 10%;
  background-image: url("/nolang/surprise/mosaic.png"), -webkit-linear-gradient(#fcf100 0%, #ffcc00 100%); /* For Safari 5.1 to 6.0 */
  background-image: url("/nolang/surprise/mosaic.png"), -o-linear-gradient(#fcf100 0%, #ffcc00 100%); /* For Opera 11.1 to 12.0 */
  background-image: url("/nolang/surprise/mosaic.png"), -moz-linear-gradient(#fcf100 0%, #ffcc00 100%); /* For Firefox 3.6 to 15 */
  background-image: url("/nolang/surprise/mosaic.png"), linear-gradient(#fcf100 0%, #ffcc00 100%); /* Standard syntax */
  
      position: fixed;
      top: 0px;
      vertical-align: middle;
height: 100%;

}
#dice {
    position: absolute;
    top: 0px;
    right: 0px;
    display: block;
    z-index: 250;
    width: 300px;
    height: auto;
}
#dice img {
    width: 150px;
    height: auto;
}
#surprisedisplay {
    font-family: Arial;
    font-size: 24px;
    color: white;
    text-shadow: 2px 2px black;
    text-align: center;
vertical-align: middle;
    height: 30em;
    top: 2%;
    position: absolute;
    width: calc(100% - 300px);
}
#numberdice {
    position: absolute;
    bottom: 15px;
    right:10px;
    font-family: Arial;
    font-size: 20px;
    color: white;
    text-shadow: 2px 2px black;
    text-align: center;
        z-index: 250;

}
figure 
{
  width: auto;
  float: left;
  margin: 0 20px 0 0;
  background: black;
  border: 10px solid black;
  -webkit-box-shadow: 0 3px 10px #ccc;
  -moz-box-shadow: 0 3px 10px #ccc;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 1s ease;
  position: relative;
  display: block;
}

figcaption 
{
  text-align: center;
  display: block;
  font-size: 12px;
  font-style: italic;
}
figure:hover
{
  -webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg);
  -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
}

figure:focus
{
  outline: none;
  -webkit-transform: rotate(-3deg) scale(1.5); -moz-transform: rotate(-3deg) scale(1.5);
   -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
  z-index: 9999;
}
@font-face {
  font-family: 'VideoJS';
  src: url('/nolang/font/vjs.eot');
  src: url('/nolang/font/vjs.eot?#iefix') format('embedded-opentype'), url('font/vjs.woff') format('woff'), url('/nolang/font/vjs.ttf') format('truetype'), url('/nolang/font/vjs.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
.video-js { 
  margin: 0 auto; 
  width: 640px;
  height: 360px;
}

table { 
  margin-left:auto; 
  margin-right:auto; 
  
}
#surprisedisplay figure {
    text-align: center;
    display: block;
}
.plusbtn {
  color: #ffffff;
  font-size: 15px;
  background: #000000;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
}

.plusbtn:hover {
  text-decoration: none;
  color: #ffde00;
  
}