body { font: 14px arial; background: rgb(221, 221, 221); color: rgb(93, 93, 93); margin: 0px; }
p { padding: 0px 0px 10px; line-height: 1.4em; }
#banner img { width: 100%; max-height: 180px; }
#banner { width: 100%; height: auto; position: relative; margin: 0px 0px 1.5em; }
#intro { margin: 0px 10%; width: 76%; background-color: rgb(255, 255, 255); padding: 2%; border: 1px solid rgb(51, 51, 51); float: left; }
textarea { width: 95%; }
#more_info { margin: 0px 10%; width: 72%; background-color: rgb(255, 255, 255); padding: 1em 4%; border: 1px solid rgb(51, 51, 51); float: left; }
#left { float: left; width: 20%; margin: 3%; padding: 3%; background-color: rgb(143, 177, 204); }
#files {color: #fff; float: left;width: 24%;margin: 1em 35%;padding: 3%;background-color: rgb(143, 177, 204);}
#theBoard { float: left; padding: 3% 4% 1em 0px; width: 62%; }
table#theGrid { table-layout: fixed; border: 2px solid rgb(90, 150, 198); }
#theGrid td { width: 50px; height: 50px; text-align: center; background-color: rgb(255, 255, 255); }
#theGrid td.bigNumber { border: 2px solid rgb(110, 110, 113); width: 50px; height: 50px; }
#theGrid td.smallNumber { border: 2px solid rgb(110, 110, 113); font-size: 15px; }
#theGrid td .arrow { border: none; cursor: pointer; table-layout: fixed; }
#theBoard [type="text"] { padding: 0; width: 85%; font-size: 35px; border: none; text-align: center; outline: none; }
.arrow { font-size: 25px; cursor: pointer; }
.red { background-color: rgb(242, 130, 130); }
.green { background-color: rgb(64, 222, 115); }
footer { width: 96%; background-color: rgb(143, 177, 204); float: left; color: rgb(255, 255, 255); padding: 2%; margin-top: 1em; text-align: center; }
footer a { color: rgb(255, 255, 255); }
@media screen and (max-width: 700px) {
  #left { width: 74%; margin: 1em 10%; }
  #theBoard { margin: 0px 8%; width: 84%; }
  #files {width: 76%;margin: 1em 9%;}
}