/*
 Copyright (C) 2016 Jan-Dirk van Dingenen
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.
 
 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.
 
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
@import url('https://fonts.googleapis.com/css?family=Orbitron:900');

body {
    margin: 0px;
    padding:0px;
    font-family: 'Orbitron', sans-serif;
}

#game {
    position: relative;
    width:1200px;
    height: 600px;
    margin:0px auto;
    background-color: #000;
    margin-top: calc((100vh - 600px) / 2);
    border-radius: 10px;
}

#gameBanner {
    position: absolute;
    height: calc((100vh - 600px) / 2);
    width: 100%;
    top: calc((100vh - 600px) / -2);
    text-align: center;
    font-size: calc((100vh - 600px) / 2);
}

#gameBanner:before {
    content: "";
    position: absolute;
    left: 0px;
    width: calc((100vh - 600px) / 2.5);
    height: calc((100vh - 600px) / 2.5);
    background-color: #a00;
    transform: translate(0,12.5%);
    border-radius: 100vh;
}

#gameBanner:after {
    content: "";
    position: absolute;
    right: 0px;
    width: calc((100vh - 600px) / 2.5);
    height: calc((100vh - 600px) / 2.5);
    background-color: #a00;
    transform: translate(0,12.5%);
    border-radius: 100vh;
}

#board {
    position: absolute;
    top: 0px;
    left:0px;
    border-radius: 10px;
    background: rgb(0, 0, 0);
}

div#other {
    position: absolute;
    top: 0px;
    right: 20%;
    font-size: 75%;
    
}

div#other a {
    color: rgb(0, 0, 0) !important;
}

div#other a:hover {
    color: #AA0000 !important;
}

#highscore {
    font-family: 'Orbitron', sans-serif;
    z-index: 25;
    width: 410px;
    height: 580px;
    padding: 10px;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 0px;
    left: calc(50% - 210px);
    font-size: 20px;
    cursor: pointer;
    overflow-y: auto;
    display:none;
}

#highscore h1 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

#highscore table {
    width:100%;
    border-spacing: 0;
    border-collapse: collapse;
}

#highscore table tr.yourscore {
  color: rgb(170, 0, 0);
  font-size: 150%;
}

#highscore table td.rank {
  width: 85%;
}

#highscore table tr:hover {
    background: rgb(170, 0, 0);
    color: rgb(255, 255, 255);
}

#inputscore {
    font-family: 'Orbitron', sans-serif;
    display: none;
    z-index: 25;
    width: 320px;
    height: 131px;
    padding: 10px;
    border: double 4px rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 180px;
    left: 433px;
    font-size: 20px;
    cursor: pointer;
    text-align: center;
}

input#yourname {
  font-family: 'Orbitron', sans-serif;
  height: 30px;
  width: 290px;
  margin-top: 8px;
  margin-bottom: 8px;
  line-height: 30px;
  font-size: 30px;
  padding-left: 5px;
  outline-color: rgb(250, 250, 250);
}

button#okbutton {
  width: 299px;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  font-family: 'Orbitron', sans-serif;
  height: 25px;
  cursor: pointer;
  font-size: 20px;
  border: solid 1px rgb(0, 0, 0);
}

button#okbutton:hover {
    background-color: #AA0000;
}

div#info {
    position: absolute;
    top: 200px;
    height: 185px;
    width: 300px;
    background: rgb(255, 255, 255);
    border-radius: 10px;
    padding: 10px;
    left: 450px;
    text-align: center;
}

div#info strong {
    color:#AA0000;
}

div#keyInfo {
    text-align: left;
    padding-left: 50px;
}

div#keyInfo div {
    display: inline-block;
}