/* 
 * Copyright (C) 2015 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/>.
 */

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
    font-family: sans-serif;
    font-color:#000;
    background-image: url('img/iaz-bg.jpg');
    margin:0px;
    cursor:default;
}

body#table {
    font-family: 'Titillium Web', sans-serif;
}

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

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

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

.clearer {
    clear:both;
}

#flash {
    width:10px;
    height:10px;
    border-radius: 50%;
    border: solid 1px #d0d0d0;
    background: linear-gradient(-45deg,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);  
    display:inline-block;
    float:right;
    background-color: rgba(255, 255, 255, 0.5);
    position:absolute;
    top:10px;
    right:5px;
}

#flash.on {
    background-color:#00ff00;
}

#flash.on2 {
    background-color:#fff00;
}

#flash.on3 {
    background-color:#019FE9;
}

#flash.on4 {
    background-color:#775530;
}

#feedbackContainer {
    position:absolute;
    width:20vw;
    left:40vw;
    z-index: 100;
}

#feedbackContainer div {
    text-align:center;
    width:100%;
    margin-top:2vh;
    padding:1vh;
    box-sizing: border-box;    
    border-radius:0.2vh;
    background-color:rgba(255,255,255,0.2);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    font-family: 'Teko', sans-serif;
    cursor:pointer;
    position:relative;
}

#feedbackContainer div.error {
    background-color:rgba(255,50,50,0.9);
    color:#000;
}

#feedbackContainer div:after {
    content:'x';
    position:absolute;
    top:0.2vh;
    right:0.2vh;
    color:#000;
    padding:0 0.7vh;
    border-radius:3vh;
    /*background-color:#000;*/
}

#feedbackContainer div:hover:after {
    
    color:#fff;
}

#characterBlock {
    clear:both;
    float:left;
    width:100%;
    height:80vh;
    overflow:hidden;
}

#controlsBlock {
    clear:both;
    float:left;
    width:100%;
    height:20vh;    
}

.character, #currentChar {
    height: 80vh;
    width: 90vw;
}

#counters {
    float:left;
    margin-left:1vw;
}

#counters .amount {
    text-align: center;
    font-size: 2.5vw;
    padding: 0;
}

#narratorHazard {
    position: relative;
    float:left;
    margin-left:1vw;
}

.charChaw, .charBrainz {
    display:inline-block;
    float:left;
}

.charBrainz {
    margin-left:2vw;
    float:left;
}

.counter {
    height: 4vw;
    width: 4vw;
    border-radius: 50%;
    /*box-shadow: 0.1vw 0.1vw 0.2vw 0.1vw rgba(0, 0, 0, 0.5);*/
    display: block;
    margin-top: -3vw;
    box-shadow:0 0 2px rgba(0,0,0,0.75);
}

div.counterList {
    display:none;
}

div.counterList .counter:first-child {
    margin-top: 0 !important;
}

.counterControls {
    position:relative;
    height:6vw;
    padding-top:2vw;
}

.counterControls .more, .counterControls .less {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0vw;
    font-size: 2vw;
    font-weight: bold;
    cursor:pointer;
    height: 3.5vw;
}

.counterControls .less {
    top: 4vw;
    padding-top: 2.5vw;
    height: 2vw;
}

.counterControls .counter {
    margin-top: 1vw !important;
}

.counterControls .amount {
    text-align: center;
    color: rgb(0, 0, 0);
    font-size: 2vw;
    font-weight: bold;
    width:100%;
    position:absolute;
    top: 3vw;
}

#narratorHazard .counter {
    border-radius: 0;
    box-shadow:none;
    opacity:0.7;
    width:4vw;
    height:auto;
}

#narratorHazard .counterControls .amount {
    top:3.4vw;
}

.charCards {
    position: relative;
    width: 87vw;
    clear: both;
    height: 72vh;  
    margin-left:3vw;
}

.charCards img {
   /* width:16vw; */
    height:40vh;
    position:absolute;
    border-radius:1vh;
    box-shadow: 0vw 0vw 0.2vw 0.1vw rgba(0, 0, 0,1);
}

.charCards img.twisted {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}

.charCards img:hover {
    box-sizing: border-box;
    border:solid rgba(200,200,200,0.7) 1px;
}

.charCardHeads {
    clear: both;
    text-transform: uppercase;
    font-size: 3.5vh;
    margin-left:3vw;
    height:5vh;
    position:relative;
}

.col1, .col2, .col3 {
    width: 17vw;
    text-align: center;
    height: 5vh;
    position:absolute;
}

 .slot1, .slot2,  .slot3,  .slot4,  .slot5, .col1 {
    left:2vw;
}

 .slot6,  .slot7,  .slot8,  .slot9,  .slot10, .col2  {
    left:28vw;
}

 .slot11,  .slot12,  .slot13,  .slot14,  .slot15, .col3  {
    left:54vw;
}

 .slot1,  .slot6,  .slot11 {
    z-index:6;
    top: 24vh;
}

 .slot2,  .slot7,  .slot12 {
    z-index:5;
    top: 18vh;
}

 .slot3,  .slot8,  .slot13 {
    z-index:3;
    top: 12vh;
}

 .slot4,  .slot9,  .slot14 {
    z-index:2;
    top: 6vh;
}

 .slot5,  .slot10,  .slot15 {
    z-index:1;
    top: 0vw;
}

.charCards .slot {
    box-sizing: border-box;
    border: solid 1px rgba(255, 255, 255, 1);
    /*
    width: 17vw;
    height: 2.5vw;
    background-color: rgba(255, 255, 255, 0.4);*/
    width:40vh;
    height:5vh;    
    position: absolute;    
    cursor: pointer;
    display:none;
    border-radius:1vh;
}


.charCards .slot.trans {
}

.charInfo {
    margin-left: 3vw;
    height:8vh;
    font-size:2.5vh;
    line-height:4vh;
}

.charInfo .charSelf {
    float:right;
    margin-right:23vw;
}

.charInfo .charSelf img{
    height:8vh;
    vertical-align:top;
    cursor:pointer;
    padding:0;
    margin:0;
}   

#teamChars {
    position: absolute;
    right: 0vw;
    width: 9vw;
    height: 80vh;
    overflow: auto;
    z-index:10;
    overflow-x:hidden;
    -webkit-overflow-scrolling: touch;
}

.menuButton {
    box-sizing:border-box;
    border:none;
    outline:none;
    cursor:pointer;
    padding:0px;
    background-color: rgba(0, 0, 0, 0) !important;
    border-radius: 0.2vw;
    position:relative;
    margin-right:0.7vw;   
    margin-top:1.2vh;
    box-shadow: 0 0 2px rgba(0,0,0,0.75);
}

.menuButton.modeActive, .menuButton.modeActive2 {
    background-color:#fff !important;
}

.menuButton img {
    width: 8vw;
    vertical-align: middle;   
    border-radius: 0.2vw;
}

.menuButton.notesButton img, .menuButton.characterButton img {
    width: 10vw;
}

.menuButton img.activated {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    opacity:0.9;
    z-index:2;
}

.menuButton.deckActive img {
    opacity:0;
}

.menuButton.modeActive img.activated, .menuButton.deckActive img.activated, .menuButton.modeActive2 img.activated{
    display:block;
    opacity:1;
}

.menuButton.lookButton {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.menuButton.moveButton {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
}

.menuButton.twistButton {
    -webkit-transform: rotate(2deg);
    transform: rotate(3deg);
}

.menuButton.flipButton {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
    margin-right:2.5vw;
}

.menuButton.notesButton {
    -webkit-transform: rotate(1.8deg);
    transform: rotate(1.8deg);
}

.menuButton.characterButton {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
}

.menuButton.cardListButton {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
}

.menuButton.narratorButton {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
}

.menuButton.logButton {
     -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
    margin-right:1.5vw;
}
    
.menuButton.logButton img {
    width:3.5vw;    
}

.menuButton.logButton img.activated {
    position:absolute;
    z-index:2;
    top:0;
    left:0;
}

.menuButton.logButton.active img.activated, .menuButton.notesButton.active img.activated {
    display:block;
}

.menuButton.syndromeButton {
    box-shadow:none;
    margin-left:1vw;
    margin-top: 3.5vh;
}

.menuButton.syndromeButton img {
    width:7vw;
}

#cardPicker .characterButton {
    /*margin-right:4vw;*/
}

.menuButton.deckButton {
    width: 8vw;
    text-align:center;
    font-family: 'Teko', sans-serif;
    font-size: 1.5vw;
    color:#E5AE71;
    text-transform: uppercase;   
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
}

.menuButton.narratorButton {
    display:none;
}

.menuButton.narratorButton img {   
    width:10vw;
    box-shadow: 0 0 2px rgba(0,0,0,0.75);
}

#changeAvatar.menuButton {
    box-shadow:none;
    background-color: transparent !important;
}

#changeAvatar.menuButton img {
    width:3vw;
}

#groupScreen.menuButton, #bossScreen.menuButton {
    box-shadow: none;    
}

#groupScreen.menuButton img, #bossScreen.menuButton img {
    width: 6vw;
}

.narratorButtons .fullLogButton {
    -webkit-transform: rotate(1.5deg);    
    transform: rotate(1.5deg);
}

.narratorButtons .fullLogButton img {
    width:4vw;    
}

#teamChars .menuItem {
    width: 9vw;
    box-sizing: border-box;
    font-size: 1.2vw;
    text-align: center;
    cursor: pointer;
    color: rgb(255, 255, 255);
    text-shadow: 0 0 1px rgb(0, 0, 0),0 0 1px rgb(0, 0, 0),0 0 1px rgb(0, 0, 0);
    overflow: hidden;
    border:none;
    outline:none;
    position:relative;
    box-sizing:border-box;
    height: 50px;
    padding: 0px;
    border-radius: 5px 0 0 5px;
    box-shadow: 0px 2px 2px 0px rgb(0, 0, 0);
    margin-bottom: 6px;
    margin-left:50px;
    margin-left: calc(9vw - 50px);
    background-image: url(img/avatarBack.jpg);
    background-color: rgb(189, 167, 144);
}

#teamChars .menuItem.active { 
    margin-left:0px;
}

#teamChars .menuItem .avatarImg {
    border:none;
    margin:0px;
    float:initial;
    opacity:0.5;
}

#teamChars .menuItem .menuName {
    position:absolute;
    top:0px;
    width: 9vw;
    height:100%;
    text-align:left;
    color:#000;
    text-shadow: 0 0 1px rgb(255, 255, 255),0 0 1px rgb(255, 255, 255),0 0 1px rgb(255, 255, 255);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    font-size:16px;    
    line-height:50px;
}

.modeButton.modeActive, .modeButton.modeActive2 {
    background-color: rgb(0, 0, 0);
    /*box-shadow: 0 0 1vw rgb(255, 255, 255);*/
}

.notesButton.active{
    background-color: rgb(255, 255, 255) !important;   
    /*box-shadow: 0 0 1vw rgb(255, 255, 255);*/
}

.notesButton.active img{
    opacity:0.9;   
}

#teamChars .menuItem.active {
    background-color: rgb(255, 255, 255);
}

#teamChars .menuItem.active .avatarImg {
    opacity:1;
}

#teamChars .menuItem.active .menuName {
    opacity:0.75;
    /*
    color:#fff;
    text-shadow: 0 0 1px rgb(0, 0, 0),0 0 1px rgb(0, 0, 0),0 0 1px rgb(0, 0, 0);
    */
    font-size:20px;  
    text-align:center;
}

.canScroll {
    -webkit-overflow-scrolling: touch;
}

#notes textarea {
    width:40vw;
    height:95vh;
    resize: none;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: 0.5vw 0.5vw 0.3vw rgba(0, 0, 0, 0.7);
    position: absolute;        
    top: 0vh;
    left: 30vw;
    z-index:10;
    border:none;
    outline:none;    
    font-family: monospace;
    background-image: url(img/notesback.png);
    background-size: cover;
    padding: 0px 2vw;
    font-weight: bold;
}   

.hidden {
    /*left: -24.8vw;*/
    display:none;
}

#log {
    background-color: rgba(0, 0, 0,0.6);
    color: rgb(77, 255, 13);
    text-shadow: 0 0 1px rgb(100, 255, 0);
    pointer-events: none;
    overflow:hidden;
    box-sizing:border-box;
    position: fixed;     
    background-image: none;
    width:80vw;
    height:25vh;
    bottom:0vh;
    left:0vw;
    z-index:10;
    padding: 0.5vw 2vw;
    font-family: monospace;
    overflow-y:hidden;
    border-top: solid 1px rgb(0, 0, 0);
    border-right: solid 1px rgb(0, 0, 0);
    border-radius: 0 0.5vw 0 0;
}

#modus {
    margin-left: 3.2vw;
    display: inline-block;
    margin-top: 2vh;
    float:left;
}

.charCards div.slot { 
    display:none;
}

.charCards div.slot.dropActive {
    background-color:rgba(255,255,255,0.4);    
    display:block !important;
}

.charCards div.slot.dropHover {
    background-color:rgba(255,0,0,0.9);
    display: block!important;
}

#hazard {
    display:inline-block;
}

#hazard .hazardIndicator {
    position:relative;
    display:inline-block;
    margin-right:1.2vw;
}

#hazard .hazardIndicator.alarm:before {
    content: '';
    position: absolute;
    top: 0;
    width: 0.1vw;
    height: 0;
    border-style: solid;
    border-width: 0 2vw 3.4vw 2vw;
    border-radius: 0.5vw;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(255, 0, 0) rgba(0, 0, 0, 0);
    opacity: 0.75;
}

#hazard .hazardImg {
    width: 4vw;
    vertical-align: middle;    
}

#hazard .chawImg {
    width: 3.5vw;
    vertical-align: middle;   
    border-radius:2vw;
    box-shadow:0 0 2px rgba(0,0,0,1);
}

#hazard .chawImg {
    opacity:0.4;
}

.hazardIndicator #hazardAmount, .hazardIndicator div#chawAmount {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: bold;
    font-size: 2vw;
    text-align:center;
    line-height:4vw;
    width:100%;
}

.hazardIndicator div#chawAmount {
    line-height:3.5vw;
}

#bigCard {
    display:none;  
    position:absolute;  
    top: 15vh;
    z-index: 100;
    left: calc(50% - 28vh);
    cursor:pointer;
}

#cardBrowser #bigCard  {
    position:fixed;  
}


#bigCard img {
    height:70vh;    
    border-radius: 1vw;
    box-shadow: 0vw 0vw 0.2vw 0.1vw rgba(0, 0, 0,1);
}

#bigCard #bigFlip {
    position: absolute;
    width: 10vh;
    height: 8vh;
    z-index: 1;
    left: 0px;
    top: 31vh;
    border-radius: 0 1vw 1vw 0;
    background-image: url(img/flipCard.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain; 
}

#bossPicker {
    width: 12vw;
    float: left;
    margin-left:2vw;
    margin-top:1vw;
}

#bossPicker select#pickBoss {
    outline:none;
    border:none;
    box-shadow: 0 0 1vw rgb(255, 255, 255);
    max-width: 12vw;
}

#dice {
    float:left;
    display:inline-block;
    margin-top: 4vh;
    border-radius:0.5vw;
    margin-left:2vw;
    position: relative;
}

.diceButtons {
    width: 9vw;
    float:left;
}

.diceContainer {
    float: left;
    display: inline-block;
    width:20vw;
}

#dice .roller {
    border: none;    
    cursor: pointer; 
    outline:none;
    width:8vw;
    background-color: rgba(0, 0, 0, 0);
    padding:0;
    border-radius:0.3vw;
    box-shadow: 0 0 2px rgba(0,0,0,0.75);
}

#dice .roller img{
    width:8vw;
    vertical-align: middle;
    border-radius:0.3vw;
}    
    

#dice button#reroll {
    margin-top:1vh;
}


.die {
  border: solid 1px rgba(0, 0, 0, 0.2);
  float:left;
  padding: 2px;
  background-color: rgb(0, 0, 0);
  width: 3vw;
  height: 3vw;
  -o-object-fit: contain;
  object-fit: contain;
  box-shadow: inset 0 3px rgb(255, 255, 255), inset 0 -3px rgb(187, 187, 187), inset 3px 0 rgb(215, 215, 215), inset -3px 0 rgb(215, 215, 215);
  border-radius: 10%;
  display:none;
  cursor:pointer;
  margin:0 0.5vw;
}

.die.lock {
    opacity: 0.3;
    border: solid 1px rgb(0, 0, 255);
}

.die img {
    width:3vw;
    height:3vw;
}

.die5, .die6, .die7, .die8 {
    margin-top: 1.5vh;
}

#rerollMarkers {
    width: 9vw;
    float:left;
    margin-top:1vh;
    height:1.5vw;
}

.rerollMarker {
    width: 1.5vw;
    height:1.5vw;
    background-size:cover;
    background-image:url(img/rerollMarker.png);    
    float:left;
    margin-right:1.5vw;
}

div#diceSelect {
    float: left;
    background-image:url(img/dice-select.jpg);   
    background-size:cover;
    width:5.1vw;
    height:8vw;
    position:relative;
    border-radius:0.5vw;
    margin-right:1.5vw;
    text-align:left;
    box-shadow: 0 0 2px rgba(0,0,0,0.75);
}

select#diceCount {
    font-size: 2.5vw;
    font-family: 'Titillium Web', sans-serif;
    background-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    -moz-appearance:none;
    border: none;
    margin-left: 1.5vw;
    margin-top: 3vw;
    outline:none;
    cursor:pointer;
    height:4vw;
}

select#diceCount option {
    font-size: 1.2vw;
    background-color: rgb(228, 201, 165);
    border: solid 1px rgb(230, 0, 0);
    outline: none;
}

#narratorDice {    
    position: relative;
    float:left;
    font-size: 1vw;
    margin-left:2vw;
    margin-top: 4vh;
    margin-right: 0.1vw;
}

#narratorDiceContainer {
    float:left;
    width: 26vw;
}

#narratorRoll {
    float:left;
    border: none;
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    outline:none;
    margin-right:1.5vw;
    box-shadow: 0 0 2px rgba(0,0,0,0.75);
}

#narratorRoll img {
    width: 8vw;
    vertical-align: middle;
    border-radius: 0.3vw;
}    

#narratorDice select.mookDice {
    border:none;
    vertical-align: top;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align:center;
    padding:0;
    outline:none;
    background-color:#fff;
}

#narratorDice table {
    width:100%;
}

#narratorDice table td {
    border-collapse: collapse;
    border:solid 1px rgba(0,0,0,0.5);
    text-align:center;
    width: 8%;
    font-size:0.75vw;
}

#narratorDice table td.mookBack {
    background-color:rgba(255,255,255,0.6);
}

 .diceSwitch {
    position: absolute;
    right: -1vw;
    cursor: pointer;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    top: -3.5vh;
    border-radius: 3vh;
}

 .diceSwitch img {
     height:5vh;
     padding:0;
     margin:0;
    box-shadow: 0 0 2px rgba(0,0,0,0.75);
    border-radius: 3vh;
 }

img.mookChawImg, img.mookBrainzImg, img.diceImg, img.mookHazardImg {
    width: 0.75vw;
    height:0.75vw;
}

#narratorDice .mookLowerDice td {
    cursor:pointer;
}

#mookCount {
    outline:none;
}
    
/* login stuff */

#loginPage, #spectatePage {
    text-align:center;
}

#loginPage button {
    background-color:transparent;
    border:none;
    padding:0;
    outline:none;
    cursor:pointer;
    display:block;    
}

#loginPage #loggedOn button {
    margin: 0 auto;
}

#loginPage #loggedOn button img {
    width:120px;
    height:auto;
    vertical-align: middle;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);    
    margin-top:15px;
}

#loginPage #loggedOn #logoutButton img {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
}

img.iazLogo {
    height:17vh;
    margin-top:1vh;
    /*box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);*/
    box-shadow: 0 0 2px rgba(0,0,0,0.75);
    border-radius: 1.5vh;
}

div.link {
    color:#000;
    text-decoration: underline;
    cursor:pointer;
    display:inline-block;
    margin-left:1vw;
    margin-top:1vh;
    float:left;
}

.link img {
    height: 7.5vh;
    vertical-align: middle;
}

.loginCenter form {
    margin-bottom: 0;
}

.loginCenter .loginLink {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
    cursor:pointer;
    display:block;
}

.loginCenter .charLink {
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
    cursor:pointer;
    margin-top:3vh;
    display:block;
}

.loginCenter .teamLink {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
    cursor:pointer;
    margin-top:3vh;
    display:block;
}

.loginCenter .loginBlock {
    height:0px;
    overflow:hidden;
}

.loginCenter .loginBlock.showLogin {
     /*display:block;*/
}

.loginCenter .spectate {
    text-align: center;
    margin-top: 4vh;
    padding: 2vh;
    border-top: solid 1px rgba(0,0,0,0.5);
    cursor:pointer;
    color:#000;
}

.loginCenter .spectate:hover {
    color:rgba(0,0,0,0.5);
}



img.loginToggle {
    border: solid 1px rgba(0, 0, 0, 0.7);
    border-radius: 5px;
     box-shadow: 0 0 2px rgba(0,0,0,0.75);
}

div.loginCenter {
    margin:5vh auto 0 auto;
    width:300px;
    font-family: 'Teko', sans-serif;
    text-align:center;
    /*
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
    */
}

div.loginCenter input, div.loginCenter button {
    font-family: 'Teko', sans-serif;
}

div.loginCenter input {
    border: none;
    background-color: rgba(255, 255, 255, 0.7);
    outline: none;
}

div.loginCenter input:focus {
    background-color: rgba(255, 255, 255, 1);
}

#loggedOn {
    text-align:left;
    line-height:35px;
    font-family: 'Special Elite', cursive;
}

#loggedOn #sessionInfo {
    background-image:url('img/sessionInfoBack.png');
    background-size: contain;
    height:121px;
    padding: 12px;
    box-sizing: border-box;
}

img.loginfoImg {
    width: 150px;
    vertical-align: top;
    margin-bottom: 19px;
    opacity:0.5;
    display:none;
}

.error {
    color:#e00;
}


/* character page */

#avatar {
    position: absolute;
    top: 1vh;
    right: 1vh;
}

#currentAvatar, .avatarImg {
    background-image:url(img/avatars.jpg);
    background-repeat: no-repeat;
    width:50px;
    height:50px;
    overflow:hidden;
    border-radius: 3px;
    border:solid 1px #000;
}

.avatarImg {
    float:left;   
    cursor:pointer;
    margin:0.1vw;
}

.currentImg.avatarImg {
    opacity:0.5;
}

.avatarImg.narratorImg {
    background-image:url(img/narrator.png);
}

#avatarList {
    position: absolute;
    top: 5vw;
    left: 5vw;
    width: 80vw;
    background-color: rgb(255, 255, 255);
    z-index: 1000;
    padding: 2vw;
    border-radius: 1vw;
    box-shadow: 1vw 1vw 2vw rgb(0, 0, 0);
}

#groupBox {
    float:left;
    font-size:2vh;
    margin-left:2vw;
    margin-bottom:2vh;
    margin-top:1vh;
}

#groupBox #editGroup {
    outline:none;
}

#groupBox #editGroup:focus {
}

#groupBox #joinGroup {
    margin-left:-1px;
}

#groupError {
    font-weight: bold;
    color: rgb(255, 0, 0);
    background-color: rgba(0,0,0,0.3);
}

#note {
    float:left;
    font-size:2vh;
    margin-left:2vw;
    margin-bottom:2vh;
    margin-top:1vh;
    font-weight: bold;
}

button#leaveGroup {
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    padding: 0;
    vertical-align: middle;
    float: left;
    outline:none;
    cursor:pointer;
}

button#leaveGroup img {
    height: 5.5vh;
}

#cardPicker {
    clear:both;
    margin-left:2vw;
}

#cardPicker #characterControls {
    margin-bottom:2.5vh;
}

#cardPicker #characterControls .menuButton.characterButton img{
    width:8vw;
}

#cardPicker #characterCards {
    margin-top: 1vh;
}

.charCards img.syndrome, .listCard.syndrome img {
    box-sizing: border-box;
    /*border-style: solid;
    color: rgb(160, 0, 0);*/
    
    /*
    border-style: double;
    color: rgb(160, 0, 0);
    border-width: 3px;
    */
    
    border-style: solid;
    border-width: 10px;
    
    /*
    -moz-border-image: url(img/border.png) 5 stretch repeat;
    -webkit-border-image: url(img/border.png) 5 stretch repeat;
    -o-border-image: url(img/border.png) 5 stretch repeat;
    border-image: url(img/border.png) 5 fill stretch repeat;
    background-color:#f60;
    */
    
    -moz-border-image: url(img/tape.png) 40 stretch stretch;
    -webkit-border-image:url(img/tape.png) 40 stretch stretch;
    -o-border-image: url(img/tape.png) 40 stretch stretch;
    border-image: url(img/tape.png) 40 stretch stretch;

}

.charCards img.syndrome:hover {
    border-style: solid;
    border-width: 9px;
    -moz-border-image: url(img/tape.png) 40 stretch stretch;
    -webkit-border-image: url(img/tape.png) 40 stretch stretch;
    -o-border-image: url(img/tape.png) 40 stretch stretch;
    border-image: url(img/tape.png) 40 stretch stretch;
}

.dropCards div.listCard, .dropCards div.listCard img, #generator div.listCard, #generator div.listCard img, #cardBrowser div.listCard, #cardBrowser div.listCard img {
    width:9vw;
    height:12.6vw;
    float:left;
    position:relative;
    margin-right: 0.5vw;
    border-radius:0.5vw;
    box-shadow: 0vw 0vw 0.1vw 0.05vw rgba(0, 0, 0,1); 
}

.dropCards div.listCard .listLook, #generator div.listCard .listLook, #cardBrowser div.listCard .listLook  {
    position: absolute;
    width: 2.5vw;
    height: 2.5vw;
    left: 0px;
    /*top: calc(50% - 1.25vw);*/
    /*top: 1vw;*/
    top:4.5vw;
    z-index: 1;
    background-image: url(img/lookCard.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    border-radius: 0 1vw 1vw 0;
}

/*
.dropCards div.listCard .listFlip {
    position: absolute;
    width: 2.5vw;
    height: 2.5vw;
    z-index: 1;
    left: 0px;
    top: 6vw;
    border-radius: 0 1vw 1vw 0;
    background-image: url(img/flipCard.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;    
}
*/

.dropActive {
    background-color:rgba(255,255,255,0.2);    
    /*border:solid 1px rgba(0,0,0,1);*/
}

.dropHover {
    background-color:rgba(255,255,255,0.5);
    /*border:solid 1px rgba(255,255,255,1);*/
}

#cardsList {
    min-height: 25.2vw;
    width:100%;
    clear:both;
}

#chosenCards {
    min-height: 12.6vw;
    width:100%;
}

#chosenCards .listCard.lockCard img{
    box-shadow: 0vw 0vw 0.0vw 0.1vw rgba(255, 255, 255,1); 
}

.dropCards {
    box-sizing: border-box;
}

.dropCards.overlapCards .listCard, #genCardList.overlapCards .listCard{
    margin-left:-6vw;
}

.dropCards.overlapCards .listCard:first-child,  #genCardList.overlapCards .listCard:first-child{
    margin-left:0 !important;
}

#cardsList.dropCards.overlapCards .listCard{
    margin-left:-2.5vw;
}

#cardsList.dropCards.overlapCards .listCard:nth-child(14) {
    margin-left:0 !important;
}

.ui-draggable-dragging {
    cursor:move;
    z-index:1000 !important;
    box-shadow: 1vw 1vw 2vw 0.05vw rgba(0, 0, 0,1) !important; 
}

.buttons {
    text-align: center;
    clear: both;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

#saveCards {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
}

#prevCards {
    float:left;
    -webkit-transform: rotate(0.5deg);
    transform: rotate(0.5deg);
    
}

#nextCards {
    float:Right;
    margin-right:3vw;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
}

#narrator #nextCards{
    margin-right:0.5vw;
}

#currentAvatar {
    display: inline-block;
}

.avatarArrow {
    display: inline-block;
    cursor:pointer;
}

.arrowRight {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 25px 25px;
    border-color: transparent transparent transparent #000000;
}

.arrowLeft {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 25px 0;
    border-color: transparent #000000 transparent transparent;
}

#characterCards {
    display:none; 
}

#characterInfo {
}

#charHead {
    font-size: 5vh;
    font-weight: bold;
    margin-left: 2vw;
    float: left;
    font-family: 'Teko', sans-serif;
    line-height: 5vh;
    margin-top: 2.5vh;
}

#charHead span {
    font-size: 3vh;
}

#charHead button {
    cursor:pointer;
}

#sheet {
    clear: both;
    font-family: 'Teko', sans-serif;
    background-color: rgb(255, 255, 255);
    padding: 2vw;
    float: left;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    position:relative;
    background-image: url(img/notes.jpg);
    margin-right: 1vw;
    margin-bottom:2vh;
    margin-left:2vw;    
}

#sheet div {
    float: left;
}
#sheet div.clear {
    clear:both;
}

#sheet input.charInput {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-bottom: #d1d1d1 1px dotted;
    outline: none;
    margin: 0.5vw;
    font-family: 'Special Elite', cursive;
}

#sheet label {
    text-transform: uppercase;
}

#sheet div.bigHead label {
    font-size: 3vh;
}

#sheet div.specialColor label {
   /* color:#e92152; */
    color: rgb(160, 33, 44);
}
#sheet #buttons {
    float:right;
    clear:both;
    margin-top: 2vh;
}

#sheet ::-webkit-input-placeholder { 
    color:    #d1d1d1;
}
#sheet :-moz-placeholder { 
   color:    #d1d1d1;
   opacity:  1;
}
#sheet ::-moz-placeholder { 
   color:    #d1d1d1;
   opacity:  1;
}
#sheet :-ms-input-placeholder {
   color:    #d1d1d1;
}

.groupShowName {
    float: left;
    line-height: 3vh;
    padding: 1vh;
    margin-right: 1vw;
    border-radius: 0.5vh;
    background-image: url(img/notes.jpg);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    font-family: 'Special Elite', cursive;
    background-position: -100px -20px;
}

.groupShowName b {
    font-family: 'Teko', sans-serif;
    text-transform: uppercase;
}

div#charNotes {
    float: left;
    background-color: rgb(255, 255, 255);   
    padding:2vw;
    position:relative;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    background-image: url(img/notes.jpg);
    margin-bottom:4vh;
}

div#charNotes textarea {
    height: calc(100% - 2vw);
    width: 100%;
    outline:none;
    border:none;
    font-family: 'Special Elite', cursive;
    box-sizing: border-box;
    margin-top: 2vw;
    margin-bottom: 2vw;
    resize: none;
    background-color:transparent;
    -webkit-overflow-scrolling: touch;
}

div#charNotes #charNotesHead {
    position: absolute;
    font-size: 3vh;
    text-transform: uppercase;
    font-family: 'Teko', sans-serif;
    top: 2vw;
    /*background-color: rgb(255, 255, 255);*/
    width: 50%;
    height: 2vw;
}

#charNotes #charButtons {
    position: absolute;
    right: 4vw;
    bottom: 2vw;
}

#charNotes ::selection, #notes ::selection, #sheet ::selection, #loginPage ::selection, #bossName ::selection, #teamCode span::selection{
  background: darkgray;
  color:#f0f0f0;
}

#charNotes ::-moz-selection, #notes ::-moz-selection, #sheet ::-moz-selection, #loginPage ::-moz-selection, #bossName ::-moz-selection, #teamCode span::-moz-selection {
  background: darkgray;
  color:#f0f0f0;
}

#saveNotes,  #saveSheet {
    border:none;
    background-color:transparent;
    border-radius:0.2vh;
    cursor:pointer;
    outline:none;
    padding: 0;
}

#saveNotes img,  #saveSheet img {
    height:2.5vh;
    border-radius:0.2vh;
    vertical-align: middle;
    box-shadow: 0 0 2px rgba(0,0,0,0.75);
}

#saveSheet {
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
}

#saveNotes {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

div.link2 {
    position:absolute;
    right:1vw;
    display:inline-block;
    top: 9.5vh;
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
}

div.link2 a {
    color:#000 !important;
    font-family: 'Teko', sans-serif;
}

div.link2 a img {
    height:4vh;
    box-shadow: 0 0 2px rgba(0,0,0,0.75);
}


div.logoutLink {
    margin-top:0;    
    margin-left:0;    
    position:absolute;
    top:1vh;
    right:1vw;
    padding:0;
}

#table .logoutLink img {
    width: 8vw;
    cursor:pointer;
}

/*  Narrator  */

#narrator {
    font-family: 'Teko', sans-serif;
}

#bossCards {
    position:relative;
    width: 37vw;
    float:left;
    height: 37vw;  
}

#narrator #cardsList {
    min-height: 25.2vw;
    float: right;
    width: 57vw;
    margin: 0 2vw 0 0;
    clear:none;
}

#groupManagement {
    display:none;
}

#teamCode, #kickChar {
    float: left;
    margin-left: 2vw;
    font-weight: bold;
    font-family: 'Teko', sans-serif;
    line-height: 5vh;
    padding: 1vw;
    background-image: url(img/notes.jpg);
    box-shadow: 0 0 2px rgba(0,0,0,0.75);
    border-radius:0.5vh;
    margin-top:2vh;
    box-sizing: border-box;
}

#teamCode span {
    font-size: 3vh;
    color:#a00;              
}

#bossCards .slot {
    box-sizing: border-box;
    /*border: solid 1px rgba(100, 100, 100, 0.7);*/
    width: 9vw;
    height: 2.5vw;
    background-color: rgba(255, 255, 255, 0.4);
    position: absolute;    
    cursor: pointer;
}

#bossCards div.slot.dropActive {
    background-color:rgba(255,255,255,0.4);    
    /*border:solid 1px rgba(0,0,0,1);*/
    display:block !important;
    border:none;
}

#bossCards div.slot.dropHover {
    background-color:rgba(255,0,0,0.9);
    /*border:solid 1px rgba(255,0,0,1);*/
    display: block!important;
    border:none;
    z-index:50;
}

#bossCards div.slot.dropHover {
    background-color:#f00;
}

#bossCards div.slot.dropHover img {
    box-sizing: border-box;
    border:solid 1px #f00;
    opacity:0.7;
}

 #bossCards .slot1, #bossCards .slot2,  #bossCards .slot3,  #bossCards .slot4,  #bossCards .slot5 {
    left:2vw;
}

 #bossCards .slot6,  #bossCards .slot7,  #bossCards .slot8,  #bossCards .slot9,  #bossCards .slot10  {
    left:14vw;
}

 #bossCards .slot11,  #bossCards .slot12,  #bossCards .slot13,  #bossCards .slot14,  #bossCards .slot15  {
    left:26vw;
}


 #bossCards .slot1,  #bossCards .slot6,  #bossCards .slot11 {
    z-index:6;
    top: 48vh;
}

 #bossCards .slot2,  #bossCards .slot7,  #bossCards .slot12 {
    z-index:5;
    top: 36vh;
}

 #bossCards .slot3,  #bossCards .slot8,  #bossCards .slot13 {
    z-index:3;
    top: 24vh;
}

 #bossCards .slot4,  #bossCards .slot9,  #bossCards .slot14 {
    z-index:2;
    top: 12vh;
}

 #bossCards .slot5,  #bossCards .slot10,  #bossCards .slot15 {
    z-index:1;
    top: 0vw;
}

#narrator #cardPicker {
    margin-bottom:0vh;
}

#narrator .buttons {
    float: right;
    width: 57vw;
    margin-left:40vw;
    margin-right:2vw;
    margin-bottom:1vh;
}

#narrator .dropCards div.listCard .listLook {
    position: absolute;
    width: 2.5vw;
    height: 2.5vw;
    left: 0px;
    top: 1.5vw;
    z-index: 1;
    background-image: url(img/lookCard.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    border-radius: 0 1vw 1vw 0;
}

#narrator .narratorButtons {
    margin-left:2vw;
    margin-bottom:0vh;
    clear:both;
    min-height: 9vh;
}

.buttons button {
    border:none;
    background-color:transparent;
    border-radius:0.2vh;
    cursor:pointer;
    outline:none;
    padding: 0;
}

.buttons button img {
    height:3vh;
    border-radius:0.2vh;
    vertical-align: middle;
}

#saveCards img {
    box-shadow: 0 0 2px rgba(0,0,0,0.75);
}

.buttons #resetTrueself {
    display: none;
    float: left;
    cursor: pointer;
    border: solid 1px rgb(0, 0, 0);
    padding: 0.5vw;
    background-color: rgba(255,255,255,0.5);
    border-radius: 0.5vw;
}

#narrator .monster[rel="1"] {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
}

#narrator .monster[rel="2"] {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
}

#narrator .monster[rel="3"] {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
}

#narrator .monster[rel="4"] {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

#narrator .monster[rel="5"] {
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
}

#narrator .menuButton.monster img {
    width: 4vw;
}

#narrator .monster.notSaved, #saveCards.notSaved {
    box-shadow: 0 0 10px 1px rgb(255, 0, 0);
}

#narrator div#bossName {
    display: inline-block;
    text-align: center;
    font-weight: bold;
}

#narrator div#bossName input {
    outline: rgb(0, 0, 0);
    border: none;
    box-shadow: 0 0 1vw rgb(255, 255, 255);
    padding: 0.5vw;
}


/*  generator */

#generator {
    padding: 2vh 2vw;
}

#generator #charHead {
    margin-left:0;
    margin-top:1vh;
}

#goback {
    font-size:2vw;
    font-family: 'Teko', sans-serif;
    padding:2vh 0vw;    
}

#goback img { 
    box-shadow: 0 0 2px rgba(0,0,0,0.75);
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
}

.deckSelector div {
    display:inline-block;
}

div#genCardList, div#genTrueself {
    height: 12.7vw;
    width: 100%;
    position:relative;
    margin-top: 1vh;
}

div#genCardList {
    background-color: rgba(255,255,255,0.6);
}

.genCardLabel {
    position: absolute;
    font-family: 'Teko', sans-serif;
    color: rgba(255, 255, 255,0.6);
    font-size: 6vw;
    left: 10vw;
    line-height: 12.7vw;
}

#genCardList .genCardLabel {
    left: 0vw;
    width: 100%;
    text-align: center;
    top: -6vw;
    padding: 0;
    vertical-align: bottom;
    margin: 0;
    height: 6vw;
    line-height: 10vw;
    overflow: hidden;
}

#deckControls, #levelControls  {
    clear:both;
    padding-top:1vh;
}

#levelControls {
    padding-top:3vh;
}

div#levelControls, div#levelControls select, div#levelControls button {
    font-family: 'Teko', sans-serif;
    font-size: 3vh;
    outline:none;
}

.deckSelector {
    display: block;
    margin-right: 2vw;
    float:left;
}

.deckSelector input[type="checkbox"] {
    height: 1.8vw;
    width: 1.8vw;
    padding: 0;
    margin: 0;
    cursor:pointer;
    display:none;
}

.deckSelector .menuButton {
    margin-top:0;
    vertical-align: top;
}


/* ***  spectacte    *** */
#spectateTeams {
   width:60vw;
   margin: 2vh auto 0 auto;
}

#spectateTeams table {
    width:100%;
}

#spectateTeams table tbody tr {
    cursor:pointer;
}

#spectateTeams table td {
    padding:1vw;
    height: 4vh;
    line-height: 4vh;
    font-family: 'Teko', sans-serif;
}

#spectateTeams table th, div#spectateHead{
    padding: 0 1vw;
    font-family: 'Teko', sans-serif;
    font-size:2em;
}

#spectateTeams table .nameCol {
    text-align:left;
}

#spectateTeams table .dateCol {
    text-align:right;
}

#spectateTeams table .eye {
    width:5vh;    
}

#spectateTeams table tbody tr:hover .nameCol, #spectateTeams table tbody tr:hover .dateCol {
    background-color:rgba(255,255,255,0.5);
}

#spectateTeams table tr:hover .eye {
    background-image:url('img/lookCard.png');
    background-size:cover;   
}

#spectatePage .iazLogo {
    cursor:pointer;
}

div#version {
    position: absolute;
    bottom: 2.5vh;
    left: 2vw;
    font-size: 1vw;
    font-family: 'Teko', sans-serif;
    color: rgba(0,0,0,0.5);
}

.callActive {
    opacity:0.5;
    background-color:rgba(255,255,255,0.3);
}

#kickChar {
    clear:both;
   
}

#kickChar select {
    outline: none;
    background-color: rgba(0,0,0,0.1);    
    border-color: rgb(179, 164, 145);
    font-family: 'Teko', sans-serif;
    border-radius:0.5vh;
    font-size: 1em;
}

#kickChar select option {
    background-color: rgba(174, 158, 142,1);
    outline:none;
}

#kickChar #kickPlayer {
    float:right;
    clear:both;
    margin-top:2vh;
    margin-right:0;
}

#cardBrowser .buttons {
    margin-bottom:1vh;
}

#cardBrowser #cards {
    clear: both;
    margin-left: 2vw;
    margin-top:5vh;
}

#cardBrowser .listCard {
    cursor:pointer;
    margin-top:0.5vw;
}

#cardBrowser .filter {
    display:inline-block;
    margin-right: 1vw;
    padding: 1vw;
    font-family: 'Teko', sans-serif;
    background-image: url(img/notes.jpg);
    box-shadow: 0 0 2px rgba(0,0,0,0.75);
    border-radius:0.5vh;
    box-sizing: border-box;
    margin-top:2vh;
}

#cardBrowser .filterTitle{
    text-transform: uppercase;
}

#cardBrowser .filter select {
    outline: none;
    background-color: rgba(0,0,0,0.1);    
    border-color: rgb(179, 164, 145);
    font-family: 'Teko', sans-serif;
    border-radius:0.5vh;
    font-size: 1em;    
}

#cardBrowser .filter select option {
    background-color: rgba(174, 158, 142,1);
    outline:none;
}

#cardBrowser .filter button {
    border: solid 1px rgb(179, 164, 145);
    border-radius:0.5vh;
    background-color: rgba(0,0,0,0.1); 
    font-family: 'Teko', sans-serif;
    padding: 4px 1vw;
}


#toCardBrowser {
    display:inline-block;
    margin-right: 2vw;
    padding: 0.2vw 0.5vw;
    font-family: 'Teko', sans-serif;
    background-image: url(img/notes.jpg);
    box-shadow: 0 0 2px rgba(0,0,0,0.75);
    border-radius:0.5vh;
    box-sizing: border-box;
    margin-top:2vh;
    color:#000;    
}