* {
  box-sizing: border-box;
}

body, html {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  color:  var(--background-color);
}

a:link {
  color: var(--text-color);
  background-color: transparent;
  text-decoration: underline;
}
a:visited {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}
a:hover {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}


.topMenu{
  font-size: 18px;
  font-weight: 100;
  padding: 0px 0px 0px 5px;   
  width:       100%;
  min-height:   10px;
    margin:         2px;
  border-top:    0px;
  background: var(--background-color);
  color:      var(--text-color);
  border: 5px solid var(--frame-color);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.navArea {
  width: 30%;
  float: left;
  padding: 0px;
}
.topLinks {
  background: var(--frame-color);
  min-width:  120px;
  min-height:  15px;   
    margin:         0px;
  padding:       2px 5px 2px 5px;   
    border-right:   5px solid var(--background-color);
  float: left;
  text-align: center;
  color:      #999900;
  border-top:    0px;
  cursor: pointer;
}
.topButton {
  float:right;
  background: var(--frame-color);
  min-width:  150px;
  min-height:  15px;   
  margin:         0px;
  padding:       2px 5px 2px 5px;   
  border-right:   5px solid var(--background-color);
  text-align: center;
  color:      white;
  border-top:    0px;
  cursor: pointer;
}
.topIcon {
  float:right;
  background: var(--frame-color);
  min-width:     50px;
  min-height:    15px;   
  margin:         0px;
  padding:        2px 5px 2px 5px;   
  border-right:   5px solid var(--background-color);
  text-align:  center;
  color:        white;
  border-top:     0px;
  cursor:     pointer;
}

@media only screen and (max-width: 749px) {
#statusbar {
  font-size:  10px;
}

}
/*-----------------------------------------*/


@media only screen and (max-width: 1099px) {
html {
  font-size: 18px;
}
div.topMenu{
  font-size: 16px;
  font-weight: 100;
    margin:         1px;
  padding: 0px 0px 0px 5px;   
  width:       100%;
  min-height:   1px;
  overflow: hidden;
  position: relative;
}
div.navArea{
float: none;
  width: 100%;
}
div.topLinks, div.topButton, div.topIcon {
  min-height:  40px;   
  padding: 10px 3px 2px 3px; /* Some padding */
}
div.statusbar{
  width: 100%;
}
div.status{
  width: 100%;
    box-shadow: 10px 10px red ;
}
div.topTitle{
  font-size:   16px;
  padding: 16px 3px 2px 3px; /* Some padding */
  min-height:  52px;   
  border-left:   3px solid var(--background-color);
}
div.title{
  font-size:   16px;
  padding: 16px 3px 2px 3px; /* Some padding */
  min-height:  52px;   
  border-left:   3px solid var(--background-color);
}
div.timerContainer {
    padding: 0px 0px 0px 0px;   
}
div.area1 {
  width: 100%;
  border: 3px solid var(--background-color);
  border-width: 2px 3px 2px 0px;
}
div.area2 {
  width: 100%;
  border: 3px solid var(--background-color);
  border-width: 0px 3px 2px 0px;
}
div.divButton{
  float: left;
  min-height:  52px;
  font-size:  16px;
  padding: 16px 3px 2px 3px; /* Some padding */
  border-left:   3px solid var(--background-color);
}
div.timer{
  float: left;
  min-height:  52px;
  font-size:  16px;
  padding: 16px 3px 2px 3px; /* Some padding */
  border-left:   3px solid var(--background-color);
}
div.reset{
  float: left;
  min-height:  52px;
  font-size:  16px;
  padding: 16px 3px 2px 3px; /* Some padding */
  border-left:   3px solid var(--background-color);
  /*background: var(--text-color);*/
}
.canvasContainer{
  height: 100%;
}

.canvasArea {
    width:   100%;
    max-height: 280px;
/*    min-height: 248px;  
    max-height: 448px;  
    max-height:  460px;  */
    border-width: 3px 3px 3px 3px;
    padding: 0px 0px 0px 0px; /* Some padding */
}  
#mazeCanvas {
    width:   100%;
}

}
/*-----------------------------------------*/


.timerContainer {
  background: var(--background-color);
  font-size: 20px;
  font-weight: 100;
    padding: 0px 5px 0px 0px;   
  width:       100%;
    margin:         2px;
    border: 5px solid var(--frame-color);  
    border-radius: 5px;
  /*margin:        0px auto;*/
  min-height:   10px;   
     overflow: hidden;
  position: relative;
}

.mainArea {
  width: 100%;
  float: left;
}

.bigBlock2 {
  width: 79%;
  margin-right: 0px;
  float: right;
}


.area1 {
  width: 45%;
  float: left;
}
.area2 {
  width: 55%;
  float: left;
}
.topTitle, .title, .divButton, .timer, .reset{
  float: left;
  /*width:      50%;   
  padding:    5px 0;   */
  font-size:  18px;
  text-align: center;
  color:      #fff;
  cursor: pointer;
}
.topTitle {
  background: var(--top-color);
  color:      var(--text-color);
  width:       30%;
  border-left:   5px solid var(--background-color);
}
.title {
  background: var(--top-color);
  color:      var(--text-color);
  width:       20%;
  border-left:   5px solid var(--background-color);
}
.divButton{
  background: var(--frame-color);
  color:      white;
  width:       25%;
  border-left:   5px solid var(--background-color);
}
.timer {
  background: #006622;
  color:      white;
  width:       25%;
  border-left:   5px solid var(--background-color);
}
.reset {
  background: var(--frame-color);
  color:      white;
  width:       25%;
  border-left:   5px solid var(--background-color);
}
.reset:hover, .divButton:hover, .topButton:hover, .topIcon:hover {
  background: var(--hover-color);
}
.lighter {
  background: var(--lighter-color);
}

.instructionsContainer {
  float: left;
  width: 20%; 
  background-position:80% center;
  margin:         0px;
  border:  5px solid var(--frame-color);
  border-radius: 5px;
      padding: 3px 3px 3px 3px;
}
.instructions {
  background: var(--box-color);
  border: 3px solid var(--top-color);
  color:     var(--background-color);
  font-size: 14px;  
     padding: 0px 10px 0px 0px;
}

.statusContainer{
  /*background: var(--background-color);  */
  float:       right;
  width:       100%; 
  min-height:     20px;
  margin:         0px;
  border-top:     0px;
  border:         5px solid var(--frame-color);
  border-radius:  5px;
        padding: 3px 3px 3px 3px;
  overflow: hidden;
}
.statusbarDiv{
  /*width:       100%; */
  background: var(--box-color);
  border: 3px solid var(--top-color);
  border-radius:  0px;
  padding: 0px 0px 0px 0px;     
}  

.statusbar{
  background:var(--frame-color);
  width:       100%;
  min-height:     20px;
  margin-top:         3px;
  border-top:     0px;
  border:         3px solid var(--top-color);
  border-radius:  0px;
  /*overflow: hidden;  */
  color:      var(--background-color);
}

#statusbar{
  width:       100%;
  height:        30px;
  margin:         3px;
  border-top:     0px;
  border:         5px solid var(--top-color);
  border-radius:  0px;
  font-size:    16px;
  /*font-weight:  100; */
  padding:        0px 0px 0px 0px;   
  background: var(--top-color);
  color:      var(--background-color);
  overflow: hidden;
  position: relative; 
}

.canvasContainer {
  float:       right; 
  width:         100%;  
  height:        100%;
  /* max-height:    550px;
  min-height:    430px;  */
  margin-top:     2px;
  border:         5px solid var(--frame-color);  
  border-radius:  5px;
  padding:        3px 3px 3px 3px;   
 /* background: var(--background-color);
  overflow: hidden;
  position: relative;  */
}
.canvasArea {
  width:         100%;
  min-height:   414px;
  overflow:     hidden;
  /*min-height:    548px;  */  
  border:          0px solid var(--top-color);
  border-width:    3px 3px 3px 3px;
}
#mazeCanvas {
  margin:         3px;
  border-top:     0px;
  border:         2px solid #000000;
  border-radius:  0px;
  border-width:   2px 10px 10px 2px;  
}

.footerArea {
  float: left;
  width:  100%;
  margin-top:  2px;
  background: var(--box-color);
  border: 5px solid var(--frame-color);
  border-radius:  5px;
     padding: 3px 3px 3px 3px; 
}

.footer {
  background: black);
  width:         100%;
  min-height:    20px;
  margin-top:     0px;
  border-top:     0px;
  border:         3px solid var(--top-color);
  border-radius:  0px;
       padding: 3px 3px 3px 3px; 
  /*overflow: hidden;  */
  text-align: center;
  font-size: 12px;
  color: var(--text-color);  
}

.footerText {
  background-color: var(--top-color);
  width:         100%;
  border:         0px solid #00aacc;  
  border-radius:  0px;
    padding: 3px 3px 3px 3px;
}