/*
Copyright (C) 2020 bryanc

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 2
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, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
*/
/* 
    Created on : Apr 18, 2020, 1:38:56 PM
    Author     : bryanc
*/
/*version:1007*/

body, table, tr, td, div, img, button{
    box-sizing: border-box;
    margin:0;
    border:0;
}
body {
    background-color: black;
}

.lable{
    font-family: arial, sans-serif, helvetica;
    color:white;
    font-size: 2em;
}
.pad{
    padding: 5px;
}

.clear{
    width: 100%;
    cursor: pointer;
    display: block;
}


.button {
    text-decoration:none;
    background: #777777;
    color:white;
    font-family: arial, sans-serif, helvetica;
    font-size: 1.5em;
    font-weight: bold;
    padding: .16em .30em;
    white-space: nowrap;
    overflow:visible;
    border-radius: .2em;
    cursor: pointer;
    -moz-border-radius: .2em;
    -webkit-border-radius: .2em;
}
.button:disabled{
    color:#999999;
    border-color: #555555;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    color:black;
    font-family: arial, sans-serif, helvetica;
    font-size: 1em;
    font-weight: bold;
    -moz-appearance:textfield;
}
.flow-row{
    display: flex;
    flex-flow: row;
}
.flow-col{
    display: flex;
    flex-flow: column;
    height: 100%;
}
.flow-row-wrap{
    display:flex;
    flex-flow: row wrap;
}
.flow-col-wrap{
    display:flex;
    flex-flow: column wrap;
    overflow: auto;
    align-content: flex-start;
    height: 100%;
}
.flow-inline{
    display:inline-flex;
}
.space-evenly{
    justify-content: space-evenly;
}
.start{
    justify-content: start;
}
.inline{
    display: inline-block;
}
.text-center{
    text-align: center;
}
.overlay{
    position: absolute;
    display: none;
    z-index: 1000;
    width:100%;
    height:100%;
    background-color: #000000;
    opacity: .5;
}

.dialog{
    position: absolute;
    display: none;
    z-index: 2000;
    width:100%;
    height:100%;
    background-color: transparent;
}
.dialog-inner{
    display: inline-block;
    background-color: #ffffff;
    max-width: 80%;
    padding:20px;
}
.dialog-caption{
    color: #000000;
    font-family: arial, sans-serif, helvetica;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom:10px;
}

.add-button {
    display:none;
}

/* Container needed to position the overlay. Adjust the width as needed */
.balls > div{
  position: relative;
  width: 100%;
}

.balls img{
    width: 100%;
    cursor: pointer;
}

.classicSkin, .classic2ndSkin{
    background: #555555; 
    border: #ffffff solid 2px;
    margin-top: 10px;
}
.deadSkin{
    background: #555555; 
    border: #000000 solid 2px;
    margin-top: 10px;
}

.deadSkin .clear{
    display: block;
    visibility: visible;
    width: 100%;
    cursor: pointer;
}
.deadSkin .cover{
    display: none;
    visibility: hidden;
}
.deadSkin .cover2nd{
    display: none;
    visibility: hidden;
}
.deadSkin .balls > div > img:nth-child(1){
    display: block;
    visibility: visible;
}
.deadSkin .balls > div > img:nth-child(2){
    display: block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.deadSkin .balls > div > img:nth-child(3){
    display: block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.deadSkin .balls > div > img:nth-child(4){
    display: none;
    visibility: hidden;
}
.deadSkin .balls > div > img:nth-child(5){
    display: none;
    visibility: hidden;
}
.deadSkin .dead >  div > img:nth-child(2){
    visibility: visible;
}
.deadSkin .half >  div > img:nth-child(3){
    visibility: visible;
}
.deadSkin .blueRow{
    background-color:#4b94d2;
}
.deadSkin .redRow{
    background-color:#d24b4e;
}
.deadSkin .blackRow{
    background-color:#858585;
}
.deadSkin .yellowRow{
    background-color:#d7c94a;
}
.deadSkin .greenRow{
    background-color:#53d74a;
}
.deadSkin .orangeRow{
    background-color:#fca55a;
}


.classicSkin .clear{
    display: none;
    visibility: hidden;
}
.classicSkin .cover{
    display: block;
    visibility: visible;
    width: 100%;
    cursor: pointer;
}
.classicSkin .cover2nd{
    display: none;
    visibility: hidden;
}
.classicSkin .balls > div > img:nth-child(1){
    display: none;
    visibility: hidden;
}
.classicSkin .balls > div > img:nth-child(2){
    display: none;
    visibility: hidden;
}
.classicSkin .balls > div > img:nth-child(3){
    display: none;
    visibility: hidden;
}
.classicSkin .balls > div > img:nth-child(4){
    display: block;
    visibility: visible;
}
.classicSkin .balls > div > img:nth-child(5){
    display: block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.classicSkin .dead >  div > img:nth-child(4){
    visibility: hidden;
}
.classicSkin .half >  div > img:nth-child(4){
    visibility: hidden;
}
.classicSkin .half >  div > img:nth-child(5){
    visibility: visible;
}

.classicSkin .white{
    background-color:#ffffff;
}
.classicSkin .blue{
    background-color:#0000ff;
}
.classicSkin .red{
    background-color:#ff0000;
}
.classicSkin .black{
    background-color:#000000;
}
.classicSkin .yellow{
    background-color:#ffff00;
}
.classicSkin .green{
    background-color:#00ff00;
}
.classicSkin .orange{
    background-color:#ff9d00;
}

.classic2ndSkin .clear{
    display: none;
    visibility: hidden;
}
.classic2ndSkin .cover{
    display: none;
    visibility: hidden;
}
.classic2ndSkin .cover2nd{
    display: block;
    visibility: visible;
    width: 100%;
    cursor: pointer;
}
.classic2ndSkin .balls > div > img:nth-child(1){
    display: none;
    visibility: hidden;
}
.classic2ndSkin .balls > div > img:nth-child(2){
    display: none;
    visibility: hidden;
}
.classic2ndSkin .balls > div > img:nth-child(3){
    display: none;
    visibility: hidden;
}
.classic2ndSkin .balls > div > img:nth-child(4){
    display: block;
    visibility: visible;
}
.classic2ndSkin .balls > div > img:nth-child(5){
    display: block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.classic2ndSkin .dead >  div > img:nth-child(4){
    visibility: hidden;
}
.classic2ndSkin .half >  div > img:nth-child(4){
    visibility: hidden;
}
.classic2ndSkin .half >  div > img:nth-child(5){
    visibility: visible;
}
.classic2ndSkin .white{
    background-color:#ffffff;
}
.classic2ndSkin .blue{
    background-color:#00ff00;/*Green*/
}
.classic2ndSkin .red{
    background-color:#ffadad;/*Pink*/
}
.classic2ndSkin .black{
    background-color:#ba4108;/*Brown*/
}
.classic2ndSkin .yellow{
    background-color:#eeeeee;/*White*/
}
.classic2ndSkin .green{
    background-color:#0000ff;/*Blue*/
}
.classic2ndSkin .orange{
    background-color:#ff0000;/*Red*/
}
.info{
    position: absolute;
    display: none;
    z-index: 2000;
    width:100%;
    background-color: #ffffff;
    color: #000000;
    font-family: arial, sans-serif, helvetica;
    font-size: 1.0em;
    font-weight: bold;
    padding: 10px;
}
.paragraph{
    padding: 2px 10px 2px 10px;
}
.title{
    font-size: 1.7em;
}
.subtitle{
    font-size: 1.3em;
    padding: 10px 10px 0px 10px;
}
.sbutton {
    text-decoration:none;
    background: #777777;
    color:white;
    font-family: arial, sans-serif, helvetica;
    font-size: 0.8em;
    font-weight: bold;
    padding: .16em .30em;
    white-space: nowrap;
    overflow:visible;
    border-radius: .2em;
    -moz-border-radius: .2em;
    -webkit-border-radius: .2em;
}