/*
 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 'https://fonts.googleapis.com/css?family=Iceberg|Special+Elite|Ubuntu+Mono';

html {
    background-image:url(back.jpg);
    background-size:cover;
    height:100vh;
    width:100vw;
    cursor:default;
}

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

#game {
    margin: auto;
    width: 1220px;
    display:none;
}

#board {
    margin: auto;
    width: 1200px;
    height: 600px;
    position:relative;
    border: inset 5px rgba(130,130, 130,0.7);
    border-radius: 10px;
    margin-top: 10px;
    overflow:hidden;
}


#mainCanvas {
    background-image: url(map.png);
    background-color: rgb(3, 85, 137);
    /*background-image:url(map.jpg);*/
}

#players {
    height: 0px;
    width: 1197px;
    background-color: rgba(200,200,200,0.5);
    margin-left: 10px;
    border: solid 1px rgba(0,0,0,0.5);
    border-top: 0px;
}

.player, #discardPile, #infectedPile {
    display: inline-block;
    vertical-align: top;
    width: 180px;
    background-color: rgba(255,255,255,0.3);
    background-image: url(bleach.png);
    min-height: 200px;
    box-sizing: border-box;
    padding: 3px 5px 0px 5px;
    margin: 0px 5px;
    border-radius: 7px 7px 0px 0px;
    background-position: center center;
    position:relative;
}

.player.notPlayed {
    background:none;
}

.player .playerImg {
    width: 50px;
    height: 50px;
    display: inline-block;
    float: left;
    background-repeat: no-repeat;   
    border-radius: 5px;
    border: solid 1px rgb(0, 0, 0);
    box-sizing: border-box;
    cursor:pointer;
}

.player .playerName, .pileTitle {
    display: inline-block;
    height: 50px;
    padding: 0px 10px;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    width: 120px;
    padding-top: 5px;
    font-family: 'Iceberg', cursive;
    font-size: 18px;
    cursor:pointer;
    position:relative;
}

.pileTitle {
    cursor:default;
}

.player.active .playerName {
    color: rgb(50, 100, 50);
    text-shadow: 0px 0px 1px rgb(123, 255, 0);
}

.playerName:after {
    content: "?";
    position: absolute;
    top: 0px;
    right: 0px;
    font-family: 'Ubuntu Mono', monospace;
    font-size: 12px;
    background-color: rgb(255, 255, 255);
    padding: 0px 3px;
    border-radius: 10px;
    color: rgb(0, 0, 0);
}

.playerName:hover:after {
    color:#fff;
    background-color:#000;
}

.card {
    font-size: 14px;
    height: 16px;
    box-sizing: border-box;
    width: 170px;
    border: solid 1px rgba(0,0,0,0.6);
    line-height: 16px;
    margin: 2px 0px;
    padding-left: 25px;
    position: relative;
    color: rgb(30, 30, 30);
    font-family: 'Special Elite', cursive;
}

.card.pickme {
    cursor:pointer;
    font-weight:bold;
}

.playCard.color0 {
    background-color:rgba(70, 70, 255,0.1);
}

.playCard.color1 {
    background-color:rgba(255, 255, 51,0.1);
}

.playCard.color2 {
    background-color:rgba(50, 50, 50,0.2);
}

.playCard.color3 {
    background-color:rgba(255, 150, 200,0.2);
}

.playCard:before {
    content: "";
    width: 15px;
    height: 14px;
    position: absolute;
    top: 0px;
    left: 4px;
}

.eventCard, .playedEventCard {
    text-align: center;
    padding-left: 0px;
    font-weight: bold;
    cursor: pointer;
    background: radial-gradient(ellipse at center, rgba(180,234,63,0.75) 0%,rgba(176,199,124,0.5) 50%,rgba(176,198,125,0.51) 51%,rgba(180,234,63,0.75) 100%);
}

.playedEventCard {
    cursor: default;
    font-weight:normal;
}

.eventAnswer {
    cursor: pointer;
}

.eventAnswer:hover {
    text-decoration: underline;
}

.eventAnswer.eventAnswerYes {
    float: left;
    margin-left: 20px;
}

.eventAnswer.eventAnswerNo {
    float: right;
    margin-right: 20px;
}

.terrorCard{
    border: solid 1px rgb(0, 200, 0);
    background-image: url('slime2.png');
}

.terrorCard.color0 {
    background-color:rgba(70, 70, 255,0.3);
}

.terrorCard.color1 {
    background-color:rgba(255, 255, 51,0.3);
}

.terrorCard.color2 {
    background-color:rgba(50, 50, 50,0.4);
}

.terrorCard.color3 {
    background-color:rgba(255, 150, 200,0.4);
}

.terrorCard:before {
    content: "";
    width: 15px;
    height: 14px;
    position: absolute;
    top: 0px;
    left: 4px;
    border-radius: 10px;
}

.city {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    background-image: url(cities.png);
    z-index:2;
}

.cityName {
    position: absolute;
    color: rgb(255, 255, 255);
    font-family: 'Ubuntu Mono', monospace;
    font-size: 12px;
    transform: translate(-25%, 9px);
    pointer-events: none;
    text-shadow: 1px 1px rgb(0, 0, 0);
    z-index:0;
}

.city.color0, .card.color0:before, .strain.color0, .colorPick.color0:before {
    background-color:rgb(70, 70, 255);
    box-shadow: 0px 0px 2px 2px rgba(150, 150, 255,0.5);
    background-image: url(strain0.svg);
    background-size: cover,cover;
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
}

.city.color1, .card.color1:before, .strain.color1, .colorPick.color1:before {
    background-color: rgb(180, 180, 0);
    box-shadow: 0px 0px 2px 2px rgba(255, 255, 0,0.5);
    background-image: url(strain1.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.city.color2, .card.color2:before, .strain.color2, .colorPick.color2:before {
    background-color:rgb(51, 51, 51);
    box-shadow: 0px 0px 2px 2px rgba(180, 180, 180,0.5);
    background-image: url(strain2.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.city.color3, .card.color3:before, .strain.color3, .colorPick.color3:before {
    background-color: rgb(204, 0, 51);
    box-shadow: 0px 0px 2px 2px rgba(204, 150, 200,0.5);
    background-image: url(strain3.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.city.color0.set2, .card.color0.set2:before, .strain.color0.set2, .colorPick.color0.set2:before {
    background-image: url(strain4.svg);
}

.city.color1.set2, .card.color1.set2:before, .strain.color1.set2, .colorPick.color1.set2:before {
    background-image: url(strain5.svg);
}

.city.color2.set2, .card.color2.set2:before, .strain.color2.set2, .colorPick.color2.set2:before {
    background-image: url(strain6.svg);
}

.city.color3.set2, .card.color3.set2:before, .strain.color3.set2, .colorPick.color3.set2:before {
    background-image: url(strain7.svg);
}

.city.color0, .city.color1, .city.color2, .city.color3 {
    background-image: url(strain0.svg) ,url(cities.png);
    background-color: rgba(0, 0, 0, 0);
    width: 24px;
    height: 24px;
    background-position-y: center, 0;
    background-size: 12px 12px, 144px 96px;
    border-radius: 0;
    box-shadow: none;
}

.city.color1 {
    background-position-y: center, -24px;
    background-image: url(strain1.svg) ,url(cities.png);
}
  
.city.color2 {
    background-position-y: center, -48px;
    background-image: url(strain2.svg) ,url(cities.png);
}

.city.color3 {
    background-position-y: center, -72px;
    background-image: url(strain3.svg) ,url(cities.png);
}

.city.color0.set2 {
    background-image: url(strain4.svg) ,url(cities.png);
}

.city.color1.set2 {
    background-image: url(strain5.svg) ,url(cities.png);
}
  
.city.color2.set2 {
    background-image: url(strain6.svg) ,url(cities.png);
}

.city.color3.set2 {
    background-image: url(strain7.svg) ,url(cities.png);
}

.city.damage0 {
    background-position-x: center, 0px;
}

.city.damage1 {
    background-position-x: center, -24px;
}

.city.damage2 {
    background-position-x: center, -48px;
}

.city.damage3 {
    background-position-x: center, -72px;
}

.city.damage4 {
    background-position-x: center, -96px;
}

.city.damage5 {
    background-position-x: center, -120px;
}


.city.travelHere {
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    cursor: pointer;
    background-size: 16px 16px, 240px 160px;
}

.city.travelHere.damage0 {
    background-position-x: center, 0px;
}

.city.travelHere.damage1 {
    background-position-x: center, -40px;
}

.city.travelHere.damage2 {
    background-position-x: center, -80px;
}

.city.travelHere.damage3 {
    background-position-x: center, -120px;
}

.city.travelHere.damage4 {
    background-position-x: center, -160px;
}

.city.travelHere.damage5 {
    background-position-x: center, -200px;
}

.city.travelHere.color0 {
    background-position-y: center, 0px;
}

.city.travelHere.color1 {
    background-position-y: center, -40px;
}

.city.travelHere.color2 {
    background-position-y: center, -80px;
}


.city.travelHere.color3 {
    background-position-y: center, -120px;
}

.pawn:after {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 10px;
    top: -2px;
    left: -4px;
    background: rgb(255, 255, 255);
    font-family: 'Ubuntu Mono', monospace;
    font-size: 9px;
    text-align: center;
    line-height: 8px;
    padding-top: 1px;
}

.pawn {
    position: absolute;
    width: 0px;
    height: 0px;
    z-index: 10;
    border: solid 1px rgb(0, 0, 0);
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(255, 255, 255);
    border-width: 0px 5px 15px 5px;    
    pointer-events:none;
}

.pawn.active {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(133, 255, 0);
    animation: blinker 1s linear infinite;
}

.pawn.active:after {
    background: rgb(133, 255, 0);
    font-weight: bold;    
    animation: blinker2 1s linear infinite;
}

@keyframes blinker {  
    33% { border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(255, 255, 255); }
    66% { border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(0, 0, 0); }
}

@keyframes blinker2 {  
    33% {background-color: rgb(255, 255, 255); }
    66% {background-color: rgb(0, 0, 0); color:#fff;}
}


#pawn0 {
    transform: translate(-20px, -20px);
}

#pawn1 {
    transform: translate(-11px, -20px);
}

#pawn2 {
    transform: translate(-2px, -20px);
}

#pawn3 {
    transform: translate(7px, -20px);
}

#pawn0:after {
    content:"1";
}

#pawn1:after {
    content:"2";
}

#pawn2:after {
    content:"3";
}

#pawn3:after {
    content:"4";
}

#actions {
    position: absolute;
    top: 340px;
    left: 100px;
}

.action, .placeholder {
    width: 100px;
    background-color: rgb(255, 255, 255);
    height: 30px;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: left;
    line-height: 25px;
    font-family: 'Iceberg', cursive;
    padding-left: 15px;
    box-sizing: border-box;
    cursor: pointer;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.7);
    border: outset 3px rgb(0, 135, 188);
}

.action:hover {
    background-color: rgb(205, 243, 255);   
}

.placeholder {
    opacity:0.2;
}

.action:active {
    box-shadow:none;
    transform: translate(1px, 2px);
}

#actionsLeft {
    margin-bottom:5px;
    height:18px;
}

.actionToken {
    width: 23px;
    height: 8px;
    display: inline-block;
    background: linear-gradient(135deg, rgb(131, 248, 8) 0%,rgb(189, 255, 48) 51%,rgb(131, 248, 8) 100%);
    margin: 0px 1px;
    border-radius: 2px;
    box-shadow: 0px 0px 1px rgb(0, 0, 0);
}

#discardPile, #infectedPile {
    width:200px;
}

#discardPile {
    margin-left: 15px;
}

.pileTitle {
    width: 100%;
    line-height: 40px;
    font-size: 20px;
    height: 50px;   
}

.discards {
    width:100%;
    height: 145px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#popup {
    position: absolute;
    background-color: rgba(255,255,255,0.9);
    width: 300px;
    height: 150px;
    z-index: 50;
    top: 225px;
    left: 450px;
    border-radius: 10px;
    box-shadow: 3px 3px 13px rgba(0,0,0,0.5);
    text-align: center;
    font-family: 'Special Elite', cursive;
    display: table;
    visibility: hidden;
    box-sizing: border-box;
    padding: 10px;
    cursor: move;
}

#popup  p {
    display: table-cell;
    vertical-align: middle;
}

#popup.bigPopup {
    width: 500px;
    left: 350px;
    border-radius: 10px 0px 10px 10px;
}

#popup .popClose {
    cursor: pointer;
    padding: 10px 15px 4px 15px;
    position: absolute;
    top: -30px;
    right: 0px;
    background-color: rgba(255,255,255,0.9);
    border-radius: 10px 10px 0px 0px;
}

#popup .popClose:hover {
    text-decoration: underline;
}

#strains {
    position: absolute;
    top: 10px;
    right: 20px;
}

.strain {
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 50px;
    margin-left:10px;
    position:relative;
    color:#fff;
    font-size: 1px;
}

.campaign .strain {
    cursor:pointer;
    z-index: 50;
}

.campaign .strain:hover {
    opacity:0.8;    
}

.strain .strainCount {
    position: absolute;
    top: 50px;
    left: 0px;
    width: 50px;
    text-align: center;
    color: rgba(255, 255, 255,0.9);
    font-family: 'Iceberg', cursive;
    font-size: 18px;
}

.playerAbility {
    position: absolute;
    width: 170px;
    bottom: 145px;
    background-color: rgba(255,255,255,0.9);
    padding: 10px;
    box-sizing: border-box;
    font-family: 'Ubuntu Mono', monospace;
    font-size: 12px;
    border-radius: 10px 10px 0px 0px;
    cursor:pointer;
    z-index: 2;
}

.playerAbility u {
    font-variant: small-caps;
    font-size: 15px;
}

.player.active .playerAbility u {
    color: rgb(50, 100, 50);
    text-shadow: 0px 0px 1px rgb(123, 255, 0);
}

.playerAbility:after {
    content: "x";
    position: absolute;
    top: 4px;
    right: 4px;
    font-family: 'Ubuntu Mono', monospace;
    font-size: 12px;
    background-color: rgb(255, 255, 255);
    padding: 0px 3px;
    border-radius: 10px;
    color: rgb(0, 0, 0);
    line-height: 11px;
    height: 12px;
}

.playerAbility:hover:after {
    color:#fff;
    background-color:#000;
}

.colorPick, .whoPick {
    cursor: pointer;
    display: inline-block;
    margin-top: 7px;
    position: relative;
    width: 145px;
    text-align: left;
}

.whoPick { 
    width: 160px;
}

.colorPick:before {
    content: "";
    width: 15px;
    height: 14px;
    position: absolute;
    top: -1px;
    left: -22px;
    border-radius: 20px;    
}

.colorPick:hover, .whoPick:hover {
    text-decoration: underline;    
}

#intel {
    position: absolute;
    bottom: 0px;
    right: 225px;
    width: 200px;
    text-align: center;
    height: 25px;
    line-height: 25px;
    background-color: rgba(255,255,255,0.7);
    border-radius: 5px 5px 0px 0px;
    font-family: 'Ubuntu Mono';
    font-size: 17px;
    font-weight: bold;
}

#infectionRate {
    overflow:hidden;
    position: absolute;
    bottom: 0px;
    right: 9px;
    width: 200px;
    text-align: center;
    height: 25px;
    line-height: 25px;
    background-color: rgba(255,255,255,0.7);
    border-radius: 5px 5px 0px 0px;
    font-family: 'Ubuntu Mono';
    font-size: 17px;
    font-weight: bold;
}

#infectionRate.reprieve:after {
    content: "REPRIEVE";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    color: rgb(200, 0, 0);
    font-weight: bold;
    font-family: 'Ubuntu Mono';
    font-size: 21px;
    transform: rotate(7deg);
    text-shadow: 1px 1px rgb(0, 0, 0);
    background-color: rgba(255, 255, 255,0.8);
}

#threatLevel {
    position: absolute;
    top: 10px;
    left: 20px;    
    pointer-events: none;
}

#threatLevel .threat {
    width: 50px;
    height: 50px;
    float: left;
    background-color: rgba(255,255,255,0.3);
    margin-right: 15px;
    border-radius: 50px;
    border: solid 1px rgba(0,0,0,0.5);
    text-align: center;
    line-height: 50px;
    color: rgba(255,255,255,0.7);
    font-family: 'Iceberg', cursive;
    font-size: 18px;    
    text-decoration: none;
}

#threatLevel .threat.finalThreat {
    background-image:url(threatFinal.png);
}

#threatLevel .threat.activeThreat {
    background-image:url(threatBack.png);
    background-size:cover;
    box-shadow: 0px 0px 15px 2px rgba(255,255,255,0.5);
}

#threatLevel .threat.activeThreat.finalThreat {
    background-image:url(threatFinal.png),url(threatBack.png);
    box-shadow: 0px 0px 15px 2px rgba(255,255,255,0.5);
}

.boardHead {
    text-align: center;
    color: rgb(255, 255, 255);
    font-family: 'Iceberg', cursive;
    font-size: 18px;
    margin-bottom: 5px;
}

.forecastRow div {
    display:inline-block;
}

forecastRow {
    height: 25px;
}

.forecastUp, .forecastDown  {
    width: 0;
    height: 0;
    border-style: solid;
    cursor:pointer;
    transition: 0.5s;
}
    
.forecastUp {
    border-width: 0 6px 12px 6px;
    border-color: transparent transparent #000000 transparent;
    margin-left: 5px;
}

.forecastUp:hover {
    border-color:transparent transparent #549E0F transparent;
}

.forecastDown {
    border-width: 12px 6px 0 6px;
    border-color: #000000 transparent transparent transparent;
    margin-right: 5px;
}

.forecastDown:hover {
    border-color: #549E0F transparent transparent transparent;
}

#forecastContainer .forecastRow:first-child .forecastUp {
    visibility: hidden;
}

#forecastContainer .forecastRow:last-child .forecastDown {
    visibility: hidden;
}

.forecastDown:active, .forecastUp:active {
    box-shadow:none;
    transform: translate(1px, 2px);
}

#forecastDone {
    cursor:pointer;
}

#forecastDone:hover {
    text-decoration: underline;
}

.popoutEffect {
    position: absolute;
    font-size: 1px;
    font-family: 'Iceberg', cursive;
    border-radius: 15px;
    color: rgb(255, 255, 255);
    border: solid 2px rgba(255, 255, 255,0.6);
    padding: 0px;
    transform: translate(-50% ,-50%);
    pointer-events: none;
    font-weight: bold;
    text-shadow: 1px 1px rgb(0, 0, 0);
    z-index:4;
}

.largeTextEffect {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: 'Iceberg', cursive;
    font-weight: bolder;
    font-size: 150px;
    transform: translate(-50% ,-50%);
    background-image: url('threatBack.png');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: cover;
    z-index:5;
    pointer-events: none;
}

.meteorEffect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    background-image: url('biohazard.png');
    background-size: cover;
    width:200px;
    height:200px;
    z-index:12;
    pointer-events: none;
}

.contaminateEffect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    background-image: url('biohazard.png');
    background-size: cover;
    width:16px;
    height:16px;
    z-index:2;
    pointer-events: none;
    animation: blink 0.5s steps(5, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

#nameSign {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: rgba(65, 63, 60,0.7);
    border-radius: 8px;
}

#nameSign input#playerName {
    text-align: center;
    width: 170px;
    border-radius: 5px;
    border: none;
    margin: 5px;
    background: linear-gradient(to bottom, rgb(255, 255, 255) 0%,rgb(211, 211, 211) 48%,rgb(100, 100, 100) 100%);
    outline:none;
}

::selection {
    background: transparent;
}
::-moz-selection {
    background: transparent; 
}

input#playerName::selection {
    background: #2890C0;
    color:#fff;
}
input#playerName::-moz-selection {
    background: #2890C0; 
    color:#fff;
}

div#cityLevels {
    position: absolute;
    right: 0px;
    bottom: 234px;
    height: 136px;
    width: 114px;
    background-image: url(cityLevels.png);
    background-repeat: no-repeat;
    background-position: 86px;
    background-color: rgba(255,255,255,0.2);
    line-height: 21px;
    font-family: 'Ubuntu Mono', monospace;
    padding-left: 10px;
    border-radius: 4px;
    padding-top: 3px;
    box-sizing: border-box;
    color: rgb(31, 31, 31);
    font-size: 13px;
    pointer-events: none;
}

div#cityLevels:before {
    content: "City levels";
    position: absolute;
    top: -13px;
    left: 24px;
    padding: 0px 5px;
    border-radius: 5px 5px 0px 0px;
    font-family: 'Iceberg', cursive;
    font-size: 15px;
}

#strains .strain.strainInfo {
    width: 300px;
    height: 335px;
    z-index: 1000;
    vertical-align: top;
    background-color: rgba(255,255,255,0.95);
    border-radius: 10px;
    color:#000;
    font-family: 'Special Elite', cursive;
    box-sizing: border-box;
    padding:10px;
    font-size: 16px;
    transition: 0.5s;
}

#strains .strain.strainInfo .strainHead {
    text-align: center;
    font-weight:bold;
    font-size: 150%;
}

#strains .strain.infiltrated {
    background-image: url('infiltrated.png');
}

#strains .strain.eliminated {
    background-image: url('eliminated.png');
}

.strain.toxicAbility:after {
    position: absolute;
    content: "!";
    top: -6px;
    right: -10px;
    font-size: 15px;
    background-color: rgba(255, 255, 255,0.9);
    padding: 0px 5px;
    border-radius: 10px;
    font-weight: bold;
    color: rgba(200, 0, 0,0.9);
    box-sizing: border-box;
    border: solid 3px rgba(200, 0, 0,0.8);
    font-family: 'Ubuntu Mono', monospace;
}

.continue, .continue2 {
    position: absolute;
    bottom: -31px;
    left: 50%;
    transform: translate(-50%,0);
    display: inherit;
    padding: 5px 10px 10px 10px;
    background-color: rgba(255,255,255,0.9);
    border-radius: 0px 0px 5px 5px;
    text-decoration: underline;
    cursor: pointer;
    box-shadow: 3px 7px 9px rgba(0,0,0,0.5);
}

.continue2 {
    bottom:-62px;
}

.continue:hover, .continue2:hover {
    text-decoration: none;
}

#lockdown {
    position: absolute;
    top: 21px;
    right: 280px;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    font-family: 'Iceberg', cursive;
    border: solid 2px rgb(255, 255, 0);
    box-shadow: 1px 2px 7px 0px rgba(0,0,0,0.5);
    width: 92px;
    height: 90px;
}

div#lockdownHead {
    text-align: center;
    font-weight: bold;
    padding: 10px 5px 0px 5px;
    border-radius: 5px 5px 0px 0px;
    border: dashed 2px rgb(0, 0, 0);
    position: absolute;
    top: -2px;
    left: -2px;
    width: 82px;
    border-bottom: 0;
}

div#lockdownCount {
    text-align: center;
    font-size: 40px;
    border-radius: 5px;
    padding: 0px;
    position: absolute;
    top: 42px;
    left: -2px;
    width: 92px;
    border: dashed 2px rgb(0, 0, 0);
    border-top: 0px;
}

#teamwork {
    position: absolute;
    bottom: 0px;
    left: 387px;
    width: 180px;
    text-align: center;
    height: 25px;
    line-height: 25px;
    background-color: rgba(255,255,255,0.7);
    border-radius: 5px 5px 0px 0px;
    font-family: 'Ubuntu Mono';
    font-size: 17px;
    font-weight: bold;
}

.nuke {
    position: absolute;
    background-image: url(nuke.png);
    background-size: contain;
    width: 10px;
    height: 10px;
    left: 50%;
    bottom: 4px;
    transform: translate(-50%,-0);
    animation: boom 4s ease-out 1;
}

.plane {
    position: absolute;
    background-image: url(plane.png);
    background-size: contain;
    width: 50px;
    height: 36px;
    left: -100px; 
    z-index:1000;
}

#rewardPicker {
    position: absolute;
    background-color: rgba(255,255,255,0.9);
    padding: 10px;
    width: 300px;
    right: -330px;
    top: 0px;
    border-radius: 10px;
}

#rewardHeader {
    font-weight: bold;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 5px 30px 0px 30px;
}

#rewardOptions {
    float: left;
    width: 150px;
}

.rewardEvent {
    text-align: left;
    cursor: pointer;
}

#rewardHelper {
    float: right;
    width: 150px;
    vertical-align: top;
    padding-top: 5px;
    text-align: left;
}

button#rewardButton {
    float: left;
    width: 100%;
    margin-top: 10px;
    cursor:pointer;
    padding: 7px 0px;    
}

#nameSign.red input#playerName {
    background: linear-gradient(to bottom, rgb(255, 200, 200) 0%,rgb(255,100, 100) 48%,rgb(255, 0, 0) 100%);
    transition: 0.5s;
}

#nameSign.red input#playerName::-webkit-input-placeholder {
   color: rgb(0,0,0);
   font-weight:bold;
}

@keyframes boom {  
    75% {width:50px; height:50px; opacity:1;}
    100% {width:50px; height:50px; opacity:0;}
}

::-webkit-input-placeholder {
   color: rgb(100,100,100);
}

:-moz-placeholder { /* Firefox 18- */
    color: rgb(100,100,100);
}

::-moz-placeholder {  /* Firefox 19+ */
    color: rgb(100,100,100);
}


/*   SETUP   */

#setup {
    margin: auto;
    width: 1220px;
    height: 600px;
    background-image: url('hands.jpg');
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50% ,0);
    border-radius: 15px;
    overflow: hidden;
    background-size: cover;
    box-shadow: 0 1px 3px rgba(0,0,0,0.75);
    font-family: 'Iceberg', cursive;
}

#setup h1 {
    text-align: center;    
    margin-top: 0px;
    font-size: 136px;
    text-shadow: 0px 0px 25px rgb(255, 246, 7);
}

#setup #borderback {
    background-image: url('/iaz/img/borderBack.png');
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 2;
    background-size: cover;
    background-position: top left;
}

#setup #borderback2 {
    background-image: url('/iaz/img/borderBack2.png');
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
    z-index: 2;
    background-size: cover;
    background-position: bottom right;
}

#setup #setupControls {
    display:none;
    position: absolute;
    bottom: 86px;
    width: 602px;
    height: 300px;
    background-color: rgba(0,0,0,0.8);
    left: 309px;
    border: solid 1px rgba(227, 134, 2,0.6);
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0px 0px 25px rgb(227, 134, 2);
    z-index:5;
    color: rgb(221, 184, 15);
}

#setup select {
    background-color: rgb(0, 0, 0);
    outline: none;
    -webkit-appearance: none;
    font-family: 'Iceberg', cursive;
    width: 100px;
    color: rgb(221, 184, 15);
    border: solid 1px rgb(221, 184, 15);
    border-radius: 4px 4px 0px 0px;
    padding: 0px 5px;
}

#setup option:checked {
    background: rgb(221, 184, 15) !important;
    color: rgb(0, 0, 0);
}

#setup option {
    outline: none;
    color: rgb(221, 184, 15);
    /* -webkit-appearance: none; */
}

#setup #setupPlayers, #setup #setupStyle , #setup #setupDifficult {
    position: absolute;
    bottom: 140px;
    left: 40px;
}

#setup #setupStyle {
    right: 40px;
    left: initial;
}

#setup #setupDifficult {
    left: 240px;
}

#setup #setupDifficult {
    left: 246px;
}


#setup option::selection {
    background: rgb(221, 184, 15);
}

#setup #setupHeader {
    position: absolute;
    font-size: 40px;
    text-align: center;
    width: 100%;
    top: 20px;
}

#setup button {
    position: absolute;
    bottom: 50px;
    color: rgb(221, 184, 15);
    font-family: 'Iceberg', cursive;
    padding: 5px;
    background-color: rgb(0, 0, 0);
    border-radius: 3px;
    cursor: pointer;
    border: outset 3px rgb(221, 184, 15);
}

#setup button:hover {
    background-color: rgb(221, 184, 15);
    color:#000;
}

#setup button:active, #setup button:focus {
    transform: translate(1px, 2px);
}

#setup button#startGame {
    left: 40px;
}

#setup button#startCampaign {
    right: 40px;
}

#setup button#continueCampaign {
    left:50%;
    transform: translate(-50%, 0);
}

#credits {
    position: absolute;
    bottom: -2px;
    z-index: 1000;
    color: rgb(195, 167, 12);
    left: 0;
    font-size: 12px;
    width: 100%;
    text-align: center;
}

input#gameCodeInput {
    position: absolute;
    bottom: 15px;
    width: 105px;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    font-family: 'Iceberg', cursive;
    border: solid 1px rgb(221, 184, 15);
    background-color: rgb(0, 0, 0);
    color: rgb(221, 184, 15);
    outline: none;
}

input#gameCodeInput::selection {
    background: rgb(221, 184, 15);
    color:rgb(0, 0, 0);
}
input#gameCodeInput::-moz-selection {
    background: rgb(221, 184, 15);
    color:rgb(0, 0, 0);
}

#setup #error {
    position: absolute;
    bottom: 87px;
    left: 50%;
    transform: translate(-50%, 0);
}

#other {
    position: absolute;
    top: -5px;
    right: 43px;
    padding: 0px;
}

#other a {
    font-family: 'Ubuntu Mono', monospace;
    color: rgb(255, 255, 255);
    font-size: 12px;
    background-color: rgba(0, 0, 0,0.7);
    padding: 0px 5px;
}
    
#other a:hover {
    text-decoration: none;
}

#other #quitLink {
    display:none;
}