/*
      #gameContainer {
      width: 100%;
      }
      */
      #oMouse {
      width: auto;
      height: auto;
      position: absolute; 
      bottom: 2px; 
      }
      @media (min-width: 750px) {
         #oMouse {
         left: 8%;
         } 
      }
      @media (max-width: 749px) {
         #oMouse {
         left: 15px;
         } 
      }
      #divMiddleSection {
         margin: auto;
         padding: 0;
         width: 100%;
         position: relative;
      }
      
      #sevenCanvasesContainer {
         margin: auto;
         display: flex;
         justify-content: space-around;
         align-items: center;   /* this aligns vertically */
         background-color: #CCCCCC;
      }
      #canvas1, #canvas2, #canvas3, #canvas4, #canvas5, #canvas6, #canvas7  {
         background-color: #FFFFC0;
         box-shadow: 5px 5px 3px #888888;
      }
      
      #sevenCanvasesContainerOverlay {
         position: absolute;
         top: 0px;
         left: 0px;
         display: flex;
         justify-content: space-around;
         align-items: center;   /* this aligns vertically */
         /* background-color: blue; */
         z-index: 2;
         visibility: hidden;
      }
      #sCCO-d1, #sCCO-d2, #sCCO-d3, #sCCO-d4, #sCCO-d5, #sCCO-d6, #sCCO-d7  {
         /* background-color: red; */
         box-shadow: 5px 5px 3px #888888;
      }
      #sevenCanvasesContainerOverlay img {
         width: 100%;
         height: 100%;
      }
      
      @media (min-width: 850px) {
         .container {
            width: 850px;
         } 
         #sevenCanvasesContainer {
            width: 630px;
            height: 88px;
         }  
         #canvas1, #canvas2, #canvas3, #canvas4, #canvas5, #canvas6, #canvas7  { 
            width: 68px;
            height: 51px;
         }
         #sevenCanvasesContainerOverlay {
            width: 630px;
            height: 88px;
         }  
         #sCCO-d1, #sCCO-d2, #sCCO-d3, #sCCO-d4, #sCCO-d5, #sCCO-d6, #sCCO-d7  { 
            width: 68px;
            height: 51px;
         }
         #gameTopHdg {
            width: 50%;
         }
         #gameTopHdg  h1{
            font: bold 22pt 'Comic Sans MS';
         }
         #gameInstructions {
            font: 14pt Roboto;
            width: 50%;
         }
      }
      @media (min-width: 750px) and (max-width: 849px) {
         .container {
            width: 100%;
         } 
         #sevenCanvasesContainer {
            width: 630px;
            height: 88px;
         }  
         #canvas1, #canvas2, #canvas3, #canvas4, #canvas5, #canvas6, #canvas7  { 
            width: 68px;
            height: 51px;
         }
         #sevenCanvasesContainerOverlay {
            width: 630px;
            height: 88px;
         }  
         #sCCO-d1, #sCCO-d2, #sCCO-d3, #sCCO-d4, #sCCO-d5, #sCCO-d6, #sCCO-d7  { 
            width: 68px;
            height: 51px;
         }
         #gameTopHdg {
            width: 50%;
         }
         #gameTopHdg  h1{
            font: bold 18pt 'Comic Sans MS';
         }
         #gameInstructions {
            font: 12pt Roboto;
            width: 50%;
         }
      }
      @media (min-width: 700px) and (max-width: 749px) {
         .container {
            width: 100%;
         } 
         #sevenCanvasesContainer {
            width: 630px;
            height: 88px;
         }  
         #canvas1, #canvas2, #canvas3, #canvas4, #canvas5, #canvas6, #canvas7  { 
            width: 68px;
            height: 51px;
         }
         #sevenCanvasesContainerOverlay {
            width: 630px;
            height: 88px;
         }  
         #sCCO-d1, #sCCO-d2, #sCCO-d3, #sCCO-d4, #sCCO-d5, #sCCO-d6, #sCCO-d7  { 
            width: 68px;
            height: 51px;
         }
         #gameTopHdg {
            width: 45%;
         }
         #gameTopHdg  h1{
            font: bold 18pt 'Comic Sans MS';
         }
         #gameInstructions {
            font: 12pt Roboto;
            width: 45%;
         }
      }
      @media (min-width: 650px) and (max-width: 699px) {
         .container {
            width: 100%;
         } 
         #sevenCanvasesContainer {
            width: 585px;
            height: 82px;
         }  
         #canvas1, #canvas2, #canvas3, #canvas4, #canvas5, #canvas6, #canvas7  { 
            width: 63px;
            height: 47px;
         }
         #sevenCanvasesContainerOverlay {
            width: 585px;
            height: 82px;
         }  
         #sCCO-d1, #sCCO-d2, #sCCO-d3, #sCCO-d4, #sCCO-d5, #sCCO-d6, #sCCO-d7  { 
            width: 63px;
            height: 47px;
         }
         #gameTopHdg {
            width: 45%;
         }
         #gameTopHdg  h1{
            font: bold 18pt 'Comic Sans MS';
         }
         #gameInstructions {
            font: 12pt Roboto;
            width: 45%;
         }
      }
      @media (min-width: 600px) and (max-width: 649px) {
         .container {
            width: 100%;
         } 
         #sevenCanvasesContainer {
            width: 541px;
            height: 77px;
         }  
         #canvas1, #canvas2, #canvas3, #canvas4, #canvas5, #canvas6, #canvas7  { 
            width: 58px;
            height: 44px;
         }
         #sevenCanvasesContainerOverlay {
            width: 541px;
            height: 77px;
         }  
         #sCCO-d1, #sCCO-d2, #sCCO-d3, #sCCO-d4, #sCCO-d5, #sCCO-d6, #sCCO-d7  { 
            width: 58px;
            height: 44px;
         }
         #gameTopHdg {
            width: 40%;
         }
         #gameTopHdg  h1{
            font: bold 16pt 'Comic Sans MS';
         }
         #gameInstructions {
            font: 11pt Roboto;
            width: 40%;
         }
      }
      @media (min-width: 585px) and (max-width: 599px) {
         .container {
            width: 100%;
         } 
         #sevenCanvasesContainer {
            width: 496px;
            height: 71px;
         }  
         #canvas1, #canvas2, #canvas3, #canvas4, #canvas5, #canvas6, #canvas7  { 
            width: 54px;
            height: 40px;
         }
         #sevenCanvasesContainerOverlay {
            width: 496px;
            height: 71px;
         }  
         #sCCO-d1, #sCCO-d2, #sCCO-d3, #sCCO-d4, #sCCO-d5, #sCCO-d6, #sCCO-d7  { 
            width: 54px;
            height: 40px;
         }
         #gameTopHdg {
            width: 40%;
         }
         #gameTopHdg  h1{
            font: bold 16pt 'Comic Sans MS';
         }
         #gameInstructions {
            font: 11pt Roboto;
            width: 40%;
         }
      }
      @media (max-width: 584px) {
         .container {
            width: 584px;
         } 
         #sevenCanvasesContainer {
            width: 495px;
            height: 71px;
         }  
         #canvas1, #canvas2, #canvas3, #canvas4, #canvas5, #canvas6, #canvas7  { 
            width: 54px;
            height: 40px;
         }
         #sevenCanvasesContainerOverlay {
            width: 495px;
            height: 71px;
         }  
         #sCCO-d1, #sCCO-d2, #sCCO-d3, #sCCO-d4, #sCCO-d5, #sCCO-d6, #sCCO-d7  { 
            width: 54px;
            height: 40px;
         }
         #gameTopHdg {
            width: 40%;
         }
         #gameTopHdg  h1{
            font: bold 14pt 'Comic Sans MS';
         }
         #gameInstructions {
            font: 11pt Roboto;
            width: 40%;
         }
      }
      /* CDB - 04/05/18 - Previously we didn't show modalDialogsContainer 
      @media (max-width: 3000px) {
      #modalDialogsContainer { display: none; } 
      }
      */

      #sevenCanvasesContainerOverlay {
          left: 50% !important;
      }

      @media (max-width: 669px) and (min-width: 570px) {
         #sevenCanvasesContainerOverlay img {
            margin-left: 0;
         }
      }

      @media (max-width: 584px) {
         #sevenCanvasesContainerOverlay {
            margin-left: -247.5px;
         }
      }

      @media (max-width: 599px) and (min-width: 585px) {
         #sevenCanvasesContainerOverlay {
            margin-left: -248px;
         }
      }

      @media (max-width: 649px) and (min-width: 600px) {
         #sevenCanvasesContainerOverlay {
            margin-left: -270.5px;
         }
      }

      @media (max-width: 699px) and (min-width: 650px) {
         #sevenCanvasesContainerOverlay {
            margin-left: -292.5px;
         }
      }

      @media (min-width: 700px) {
         #sevenCanvasesContainerOverlay {
            margin-left: -315px;
         }
      }

      /*@media (min-width: 850px) {
         #sevenCanvasesContainerOverlay {
            margin-left: -315px;
         }
      }*/