/*
 * Copyright (C) 2012 David Geary. This code is from the book
 * Core HTML5 Canvas, published by Prentice-Hall in 2012.
 *
 * License:
 *
 * Permission is hereby granted, free of charge, to any person 
 * obtaining a copy of this software and associated documentation files
 * (the "Software"), to deal in the Software without restriction,
 * including without limitation the rights to use, copy, modify, merge,
 * publish, distribute, sublicense, and/or sell copies of the Software,
 * and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 *
 * The Software may not be used to create training material of any sort,
 * including courses, books, instructional videos, presentations, etc.
 * without the express written consent of David Geary.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
*/

      #readoutToast {
         position: absolute;
         left: 480px;
         top: 60px;
         color: white;
         display: none;
      }
      
      #loadingToast {
         padding: 20px;
         position: absolute;
         left: 42px;
         top: 180px;
         width: 450px;
         height: 150px;
         display: block;
      }

      #loadingToast .title {
         padding-left: 125px;
         font: 16px Arial;
      }

      #loadingToast p {
         margin-left: 10px;
         margin-right: 10px;
         color: black;
      }
      
      #highScoreParagraph {
         position: absolute;
         left: 175px;
         top: 0px;
         color: red;
         font-size: 4.5em;
         margin-left: 70px;
      }
      
      #highScoreToast {
         position: absolute;
         left: 20px;
         top: 120px;
         color: cornflowerblue;
         margin-left: 150px;
         margin-top: 20px;
      }

      #gameCanvas {
         margin: 20px;
         background: lightskyblue;
         /*background: rgba(120,168,249,0.7);*/
         position: absolute;
         left: 0px;
         top: 0px;
         -webkit-box-shadow: rgba(100,100,100,0.5) 4px 4px 8px;
         -moz-box-shadow: rgba(100,140,230,0.5) 2px 2px 6px;
         box-shadow: rgba(100,140,230,0.5) 2px 2px 6px;
         -o-box-shadow: rgba(100,140,230,0.5) 2px 2px 6px;
         border: thin solid cornflowerblue;
      }

      .floatingControls {
         background: rgba(0, 0, 0, 0.1);
         border: thin solid skyblue;
         -webkit-box-shadow: rgba(0,0,0,0.3) 2px 2px 4px;
         -moz-box-shadow: rgba(100,140,230,0.5) 2px 2px 6px;
         box-shadow: rgba(100,140,230,0.5) 2px 2px 6px;
         -o-box-shadow: rgba(100,140,230,0.5) 2px 2px 6px;
         position: absolute;
      }

      .floatingControls a {
         font-size: 1.5em;
         text-decoration: none;
         color: rgba(255,255,0,0.6);
      }
 
      .floatingControls a:hover {
         color: rgba(255,255,0,1.0);
      }

      #instructionsLink {
         color: cornflowerblue;
         text-decoration: none;
      }

      #instructionsLink:hover {
         color: rgba(255,255,0,1.0);
      }

      #instructions p.title {
         font-size: 1.5em;
         color: blue;
      }
      
      #instructions {
         margin-left: 60px;
         margin-top: 50px;
         padding-left: 20px;
         padding-right: 20px;
         width: 700px;
         height: 370px;
         -webkit-box-shadow: rgba(0,0,0,0.3) 4px 4px 8px;
         -moz-box-shadow: rgba(100,140,230,0.5) 2px 2px 6px;
         box-shadow: rgba(100,140,230,0.5) 2px 2px 6px;
         -o-box-shadow: rgba(100,140,230,0.5) 2px 2px 6px;
         color: rgba(0, 0, 255, 0.8);
         background: rgba(255, 255, 255, 0.8);
      }

      #instructionsOkayButtonDiv {
         left: 0px;
         width: 100%;
         text-align: center; 
      }

      #instructionsOkayButton {
         margin-top: 30px;
      }

      .toast {
         background: rgba(255, 255, 255, 0.7);
         border: thin solid skyblue;
         -webkit-box-shadow: rgba(0,0,0,0.3) 2px 2px 4px;
         -moz-box-shadow: rgba(100,140,230,0.5) 2px 2px 6px;
         box-shadow: rgba(100,140,230,0.5) 2px 2px 6px;
         -o-box-shadow: rgba(100,140,230,0.5) 2px 2px 6px;
         position: absolute;
         display: none;
      }

      #pausedToast {
         padding: 5px 40px 20px 40px;
         margin-left: 172px;
         margin-top: 100px;
         color: blue;
      }

      #pausedToast p {
         color: blue;
      }

      #pausedToast p.title {
         font-size: 1.50em;
         color: blue;
         padding-left: 18px;
      }

      #scoreToast {
         background: #5a3716;
         left: 25px;
         top: 25px;
         padding: 5px; 
         font-size: 1.25em;
         color: yellow;
         width: 3em;
         text-align: center;
         border: thin solid rgba(255,255,0,0.5);
      }

      div .title { 
         color: blue;
      }

      div p { 
         color: blue;
      }

      div a { 
         text-decoration: none;
         color: cornflowerblue;
      }

      p.title {
         font-size: 1.5em;
      }

      #gameOverToast {
         padding-left: 30px;
         padding-right: 30px;
         padding-bottom: 10px;
         margin-left: 173px;
         margin-top: 100px;
         text-align: center;
         display: none;
      }

      #highScoreList {
         color: rgba(0,0,255,0.6);
      }

      #previousHighScoresTitle {
         margin-top: 50px;
      }

      #loadButtonSpan {
         position: absolute;
         left: 200px;
         padding-top: 20px;
      }
      
      .blurb {
         padding: 10px;
         display: block;
         font: 12px Arial;
      }

      #progressDiv {
         padding-left: 55px;
         padding-top: 45px;
      }

      #loadingMessage {
         color: navyblue;
         font: 14px Helvetica;
         padding-top: 20px;
         padding-left: 183px;
      } 

      #showPolygonsOnlyToast {
         background: rgba(255,255,255,0.5);
         padding: 3px; 
         color: rgba(255,250,0,1.0);
         text-align: center;
         left: 423px;
         top: 25px;
      }
