html { 
            margin: 0;
            padding: 0;
            width: 100%; 
            height: 100%;

}

body { 
            margin: 0; 
            padding: 0;
            width: 100%; 
            height: 100%; 
            /* Turn off tap highlight in Mobile Safari */
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            
   background-image: url("demo.jpg");
}

#snailbait-arena {
   margin: 0 auto;
   width: 800px;
   height: 520px;
}

#snailbait-game-canvas {
   border: 1px solid blue;

   -webkit-transition: opacity 3s;
   -moz-transition: opacity 3s;
   -o-transition: opacity 3s;
   transition: opacity 3s;

   width: 100%;

   opacity: 0;
   display: none;
}
         
#snailbait-score {
   font: 46px fantasy;
   text-align: center;
   color: yellow;
   text-shadow: 2px 2px 4px rgba(0,0,80,1.0);

   -webkit-transition: opacity 5s;
   -moz-transition: opacity 5s;
   -o-transition: opacity 5s;
   transition: opacity 5s;

   opacity: 0;
   display: none;
}
 
#snailbait-fps {
   position: absolute;
   margin-left: 740px;
   margin-top: -2em;
   color: yellow;
   text-shadow: 1px 1px 1px rgb(0,0,80);
   font: bold 20px fantasy;

   -webkit-transition: opacity 5s;
   -moz-transition: opacity 5s;
   -o-transition: opacity 5s;
   transition: opacity 5s;

   opacity: 0;
   display: none;
   z-index: 1;
}

#snailbait-toast {
   position: absolute;
   margin-left: 100px;
   margin-top: 20px;
   width: 600px;
   font: 40px fantasy;
   text-align: center;
   color: #ff6;
   text-shadow: 2px 2px 4px rgb(0,0,0);

   -webkit-transition: opacity 0.5s;
   -moz-transition: opacity 0.5s;
   -o-transition: opacity 0.5s;
   transition: opacity 0.5s;

   opacity: 0;
   display: none;
   z-index: 1;
}

#snailbait-instructions {
   margin-left: 155px;
   padding-left: 5px;
   padding-top: 10px;
   height: 2em;

   color: yellow;
   font-size: 0.95em;

   -webkit-transition: opacity 5s;
   -moz-transition: opacity 5s;
   -o-transition: opacity 5s;
   transition: opacity 5s;

   display: none;
   opacity: 0;
}

.snailbait-keys {
   color: orange;
   text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
   background: rgba(0,0,0,0.1);
   border: thin solid rgba(0,0,0,0.20);
   border-radius: 5px;
   margin-left: 10px;
   padding-right: 5px;
   padding-left: 5px;
   padding-bottom: 5px;

   display: inline;
}

.snailbait-explanation {
   color: yellow;
   text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
   display: inline;
   margin-top: 5px;
   padding-right: 5px;
   padding-left: 5px;
   padding-bottom: 2px;
}

#snailbait-copyright {
   float: right;
   margin-right: 2px;
   margin-top: -2.3em;
   padding: 2px;
   color: blue;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
   font-size: 0.85em;

   -webkit-transition: opacity 5s;
   -moz-transition: opacity 5s;
   -o-transition: opacity 5s;
   transition: opacity 5s;

   display: none;
   opacity: 0;
}

#snailbait-sound-and-music {
   position: absolute;
   margin-left: 5px;
   margin-top: 9px;
   padding: 5px;
   padding-top: 2px;
   padding-bottom: 2px;
   color: yellow;
   font-size: 0.9em;
   text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
   background: rgba(0,0,0,0.1);
   border-radius: 5px;
   border: thin solid rgba(0,0,0,0.20);

   -webkit-transition: opacity 5s;
   -moz-transition: opacity 5s;
   -o-transition: opacity 5s;
   transition: opacity 5s;

   display: none;
   opacity: 0;
}

.snailbait-checkbox-div {
   display: inline;
   text-shadow: 1px 1px 1px blue;
}

#snailbait-sound-checkbox-div {
   margin-right: 10px;
}

#snailbait-loading {
   position: absolute;
   margin-top: 80px;
   width: 790px;
   font: 55px fantasy;
   text-align: center;

   -webkit-transition: opacity 2.0s;
   -moz-transition: opacity 2.0s;
   -o-transition: opacity 2.0s;
   transition: opacity 2.0s;
}

#snailbait-loading-title {
   padding-left: 40px;
   padding-bottom: 30px;
   color: #ff6;
   text-shadow: 2px 2px 4px rgb(0,0,0);

   -webkit-transition: opacity 2.0s;
   -moz-transition: opacity 2.0s;
   -o-transition: opacity 2.0s;
   transition: opacity  2.0s;

   opacity: 0;
   display: none;
}

#snailbait-loading-animated-gif {
   margin: 0 auto;
   border: thin solid rgba(0, 0, 255, 0.7);
   border-radius: 60px 60px 60px;   
   padding: 40px;
   margin-top: 10px;

   /* Radial gradient generated at http://www.colorzilla.com/gradient-editor */ 

   background: -moz-radial-gradient(center, ellipse cover, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f2f6f8), color-stop(50%,#d8e1e7), color-stop(51%,#b5c6d0), color-stop(100%,#e0eff9));
   background: -webkit-radial-gradient(center, ellipse cover, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
   background: -o-radial-gradient(center, ellipse cover, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
   background: -ms-radial-gradient(center, ellipse cover, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
   background: radial-gradient(ellipse at center, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=1 );

   -webkit-transition: opacity 2.0s;
   -moz-transition: opacity 2.0s;
   -o-transition: opacity 2.0s;
   transition: opacity  2.0s;

   opacity: 0;
   display: none;
}

#snailbait-lives {
   position: absolute;
   margin-top: 20px;
   margin-left: 5px;

   -webkit-transition: opacity 5s;
   -moz-transition: opacity 5s;
   -o-transition: opacity 5s;
   transition: opacity 5s;

   display: none;
   opacity: 0;
}

#snailbait-life-icon-left {
   -webkit-transition: opacity 5s;
   -moz-transition: opacity 5s;
   -o-transition: opacity 5s;
   transition: opacity 5s;
}

#snailbait-life-icon-middle {
   -webkit-transition: opacity 5s;
   -moz-transition: opacity 5s;
   -o-transition: opacity 5s;
   transition: opacity 5s;
}

#snailbait-life-icon-right {
   -webkit-transition: opacity 5s;
   -moz-transition: opacity 5s;
   -o-transition: opacity 5s;
   transition: opacity 5s;
}

.snailbait-title {
   font: 24px fantasy;
   color: blue;
}

.snailbait-credits {
   position: absolute;
   margin-left: 32px;
   margin-top: 10px;
   padding-bottom: 30px;
   font: 20px fantasy;
   text-align: center;
   width: 650px;
   height: 23em;
   background: rgba(255,255,230,0.75);
   border: thin solid blue;
   padding-top: 10px;
   padding-left: 40px;
   padding-right: 40px;

   -webkit-transition: opacity 2s;
   -moz-transition: opacity 2s;
   -o-transition: opacity 2s;
   transition: opacity 2s;

   -webkit-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   -moz-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   -o-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;

   border-radius: 10px;

   opacity: 0;
   display: none;
   z-index: 1;
}

#snailbait-credits a:hover {
   color: blue;
   text-shadow: 1px 1px 1px rgba(0,0,200,0.5);
}

#snailbait-credits p {
   margin-top: 20px;
   margin-bottom: 10px;
   font: 24px fantasy;
   text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
   color: blue;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}

#snailbait-credits .attribution {
   font: 18px fantasy;
   color: blue;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}

#snailbait-credits .title {
   margin-bottom: 10px;
   font-size: 22px;
   color: blue;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}

#snailbait-new-game-link {
  margin-top: 10px;
  float: right;
  margin-right: 20px;
  font-size: 0.9em;
}

#snailbait-art-title {
   margin-top: 20px;
}

#snailbait-sound-and-music-title {
   margin-top: 20px;
}

#snailbait-credits .snailbait-heading {
   margin-bottom: 10px;
   font-size: 35px;
   font-family: fantasy;
   color: blue;
   text-shadow: 2px 2px 2px rgba(255,255,255,0.8);
}

.snailbait-tweet-link {
  margin-top: 10px;
  margin-left: 20px;
  float: left;
  font-size: 0.9em;
}

#snailbait-play-again-link {
  margin-top: 10px;
  float: right;
  margin-right: 20px;
  font-size: 0.9em;
}

#snailbait-running-slowly {
   position: absolute;
   margin-left: 82px;
   margin-top: 75px;
   width: 600px;
   background: rgba(255,255,255,0.85);
   padding: 0px 20px 20px 20px;
   color: navy;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.5);

   -webkit-transition: opacity 1s;
   -moz-transition: opacity 1s;
   -o-transition: opacity 1s;
   transition: opacity 1s;
   
   border-radius: 10px 10px 10px;   

   -webkit-box-shadow: rgba(0,0,0,0.5) 4px 4px 8px;
   -moz-box-shadow: rgba(0,0,0,0.5) 4px 4px 8px;
   -o-box-shadow: rgba(0,0,0,0.5) 4px 4px 8px;
   box-shadow: rgba(0,0,0,0.5) 4px 4px 8px;

   opacity: 0;
   display: none;

   z-index: 1;
}

#snailbait-running-slowly h1 {
   padding-top: 0;
   text-align: center;
   color: rgb(50,50,250);
}

#snailbait-slowly-okay:hover {
   color: blue;
}

#snailbait-slowly-dont-show:hover {
   color: blue;
}

#snailbait-slowly-okay {
   margin-top: 20px;
   float: left;
   margin-left: 50px;
   font-size: 1.2em;
}

#snailbait-slowly-dont-show {
   margin-top: 20px;
   float: right;
   margin-right: 50px;
   font-size: 1.2em;
}

#snailbait-running-slowly p {
   color: navy;
   font-size: 1.05em;
}

#snailbait-developer-backdoor {
   color: navy;
   position: absolute;
   margin: 0 auto;
   margin-top: 72px;
   margin-left: 1px;
   width: 800px;
   height: 90px;
   border: thin solid brickred;
   border-bottom: thin solid blue;
   background: rgba(255, 255, 200, 0.7);

   -webkit-transition: opacity 1s;
   -moz-transition: opacity 1s;
   -o-transition: opacity 1s;
   transition: opacity 1s;

   display: none;
   opacity: 0; 
   z-index: 1;
}

.snailbait-group {
   position: absolute;
   text-align: center;
}

#snailbait-collision-rectangles {
   margin-left: 530px;
   margin-top: 0.5em;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.5); 
}

#snailbait-detect-running-slowly {
   margin-left: 530px;
   margin-top:  2.0em;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.5); 
}

#snailbait-smoking-holes {
   margin-left: 530px;
   margin-top: 3.5em;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.5); 
}

.snailbait-readout {
   position: relative;
   margin 0 auto;
   width: 3em;
   height: 1.5em;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
   color: navy;
}

#snailbait-running-slowly-threshold {
   margin-left: 30px;
   margin-top: 10px;
   width: 250px;
   height: 50px;
}

#snailbait-running-slowly-slider {
   margin-left: 20px;
   width: 200px;
   height: 30px;
}

#snailbait-time-rate {
   margin-left: 245px;
   margin-top: 10px;
   width: 250px;
   height: 50px;
}

#snailbait-time-rate-slider {
   margin-left: 20px;
   width: 200px;
   height: 30px;
}

#snailbait-ruler-canvas {
   position: absolute;
   margin-top: -22px;
   border-top: thin solid rgba(255,255,0,0.5);
   border: thin solid rgba(0,0,255,0.5);
   background: rgba(255, 255, 200, 0.7);

   -webkit-transition: opacity 1s;
   -moz-transition: opacity 1s;
   -o-transition: opacity 1s;
   transition: opacity 1s;

   opacity: 0;
   display: none;
   z-index: 1;
}

#snailbait-high-score-toast {
   position: absolute;
   padding: 5px;
   margin-left: 135px;
   margin-top: 32px;
   color: yellow;
   font: 20px fantasy;
   text-shadow: 1px 1px 1px black;
   text-align: center;
   width: 520px;
   height: 390px;
   z-index: 1;

   opacity: 0;
   display: none;

   -webkit-transition: opacity 1s;
   -moz-transition: opacity 1s;
   -o-transition: opacity 1s;
   transition: opacity 1s;
}


#snailbait-high-score-toast p {
   color: yellow;
}

#snailbait-high-score-toast .snailbait-title {
   font-size: 45px;
   text-shadow: 2px 2px 2px black;
   margin-bottom: 10px;
}

#snailbait-previous-high-scores-title {
   font-size: 25px;
}

#snailbait-previous-high-scores {
   text-align: left;
   margin: 0 auto;
   padding-left: 130px;
}

#snailbait-left-control {
   display: none;
}

#snailbait-right-control {
   display: none;
}

#snailbait-ipad-instructions {
   display: none;
}

.snailbait-instruction-explanation {
   color: royalblue;
   margin-left: 10px;
}

.snailbait-instruction-keys {
   color: royalblue;
   margin-left: 10px;
}

.snailbait-mobile-toast {
   position: absolute;
   border-radius: 10px;

   font: 30px fantasy;
   text-align: center;
   text-shadow: 1px 1px 1px rgb(0,0,0);

   color: yellow;

   -webkit-transition: opacity 1s;
   -moz-transition: opacity 1s;
   -o-transition: opacity 1s;
   transition: opacity 1s;

   display: none;
   z-index: 1; 
   opacity: 0;
}

#snailbait-mobile-start-toast {
   width: 800px;
   height: 400px;
}

#snailbait-mobile-welcome-toast {
   width: 800px;
   height: 400px;
}

.snailbait-welcome-link {
   font: 40px fantasy;
   color: gold;
   text-shadow: 2px 2px 2px blue;
}

.snailbait-welcome-link:hover {
   color: yellow;
}

#snailbait-welcome {
   text-align: center;
   padding: 25px;
   margin-bottom: 30px;
   font: 36px fantasy;
   text-shadow: 1px 1px 1px black;
}

#snailbait-welcome-instructions {
   font: 18px fantasy;
   text-shadow: 1px 1px 1px black;
   color: white;
}

#snailbait-mobile-instructions {
   margin-left: 155px;
   padding-left: 5px;
   padding-top: 10px;
   height: 2em;

   color: #ff0;
   font-size: 0.95em;

   -webkit-transition: opacity 5s;
   -moz-transition: opacity 5s;
   -o-transition: opacity 5s;
   transition: opacity 5s;

   display: none;
   opacity: 0;
}