@CHARSET "UTF-8";
body {
    font-family: Georgia,Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: white;
    background-color: #111111;
}

a {
    color: black;
}

* {
    padding: 0px;
    margin: 0px;
}

div {
    border-radius: 0.2em;
}

#game-wrapper {
    width:60%;
    position:relative;
    margin:5px auto;
    border:1px solid #004455;
    height:95%;
    background-color: black;
}

#header {
    height:10%;
    text-align: center;
    color: #dddddd;
    background-color: #004455;
    position: relative;
    margin-bottom:10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
#header span {
    position: absolute;
    right:2%;
    top:15%;
    font-size: 0.75em;
}
#header a{
    color: #dddddd;
}
#header h1 {
    display:inline-block;
    margin:1%;
    font-size: 1.5em;
}

#field {
    position: relative;
    background: #004455 url("w.png");
    margin: auto;
    min-height: 395px;
}

.stone {
    width:50px;
    height:50px;
    margin:5px;
    border:1px solid black;
    position: absolute;
    top:0px;
    left:0px;
}

.stone.selected {
    background-color: rgba(255,255,255,0.5);
}
.stone.selected:hover {
    background: white;
    cursor: pointer;
}

.stone.destroyable:hover {
    background: #e9cb42 url("g.png") -48px center no-repeat;
    opacity:0.75;
    cursor: pointer;
}

.stone.destroyed {
    background: #e9cb42 url("g.png") -48px center no-repeat;;
    border:0px none;
}

.stone.fireball {
    background: url("g.png") -95px center no-repeat;
    border:0px none;
}

.player {    
    z-index:99;
    background: transparent url("g.png") 3px center no-repeat;
}

.player.selected:hover {
    cursor:inherit;
    background: rgba(255,255,255,0.5) url("g.png") 3px center no-repeat;
}

.bg-overlay {
    position:absolute;
    top:0%;
    left:0%;
    right:0%;
    bottom:0%;
    background-color: rgba(0,0,0,0.5);
    z-index:102;
}

.start-screen.overlay {
    font-size: 1em;
    text-align: center;
}

.overlay {
    border:1px solid white;
    position: absolute;
    z-index: 100;
    top:80px;
    left:30%;
    padding:50px;
    width: 30%;
    background-color: #111111;
    color: #ddd;
    border-radius: 0.5em;
    font-size: 0.75em;
}

.overlay a{
    color:#ddd;
}

.overlay .close{
    font-weight:700;
    position: absolute;
    top: 3px;
    right:7px;
}

.overlay input[type="text"], .overlay select{
    width: 95%;
    padding: 1%;
    border-radius: 0.5em;
    border:2px solid #004455;
    font-size: 1em;
    color: #004455;
    text-align: center;
    font-weight: bold;
}

.overlay input[type="submit"]{
    width: 98%;
    margin-top: 5%;
    padding: 2%;
    background-color: #004455;
    color: white;
    border-color:white;
    border-radius: 0.5em;
}

.overlay .hidden{
    display: none;
}

@media screen and (min-width: 980px){
    body { font-size: 20px;}
}
@media screen and (max-width: 980px){
    body { font-size: 17px;}
}
@media screen and (max-width: 760px){
    body { font-size: 14px;}
}
@media screen and (max-width: 500px){
    body { font-size: 11px;}
}

.blink {
  animation: blink 1s steps(5, start) 2;
  -webkit-animation: blink 1s steps(5, start) 2;
}
@keyframes blink {
  to { visibility: hidden; }
}
@-webkit-keyframes blink {
  to { visibility: hidden; }
}

#console {
    position: relative;
    margin: 20px auto;
    background: black;
    color:white;
    width: 90%;
    height: 150px;
    border: 1px solid white;
    border-radius: 0px;
    padding:5px;
    overflow-y: scroll;
    font-family: courier, serif;
    font-size: 14px;
}