html {
    overflow-y: scroll;
}

body, div, h1, h2, input, p, iframe, a, img{
    box-sizing: border-box;
}

.container{
    width:100%;
    position:relative; 
    text-align: center;
}
.table{
    display:table;
}
.row{
    display:table-row;
}
.cell{
    display:table-cell;
}

.header{
    margin: 1em auto;
    font-size:2.5em;
}
.header .cell:last-of-type{
    padding-left:.5em;
}
.header.input{
    width:auto;
}

.btn-edit{
    display:block;
    width:1em;
    height:1em;
    background-image:url(../images/edit.png);
    background-size: 100% auto;
    cursor: pointer;
}

.edit-name{
    border:1px solid #aaa;
    border-radius: 3px;
    font-size:1em;
    padding:2px;
    width:100%;
}
.edit-name.error{
    border:1px solid red;
}
.edit-name.disabled{
    border:1px solid transparent;
    padding:2px;
    background:transparent;
    color:#000;
}

#menu{
    position:absolute;
    top:20px;
    left:20px;
    z-index:9999999;
}
#menu-items{
    position:absolute;
    top:20px;
    left:20px;
    width:65px;
    height:65px;
    overflow-y: hidden;
    z-index:999999;
    transition: all .5s;
    border-radius: 60px;
}
#menu, #menu-items a{
    display: block;
    width:60px;
    height:60px;
    border-radius: 60px;
    background-color:#81d742;
    color:#fff;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
    margin:0 0 20px 0;
    box-shadow: 1px 1px 5px #aaa;
}
#menu img{
    width:40px;
    margin:10px;
}

#menu-items a img{
    width:50px;
    margin:5px;
}
#menu-items a{
    font-weight: 700;
    font-size:3em;
}
.middle{
    vertical-align: middle;
}


.new{
    margin: 0px auto;
    border:1px solid #81d742;
    border-radius:20px;
}
.new-label{
    font-size:1.66em;
    margin-top:4em;
    display:inline-block;
    color:#999;
}
.new input{
    font-size: 3em;
    width: 2em;
    height: 2em;
    text-align: center;
    border: 0;
    background: transparent;
}
.new a{
    display:inline-block;
    font-size: 3em;
    font-weight:700;
    width: 2em;
    height: 2em;
    line-height:2em;
    text-align: center;
    border: 0;
    border-radius:20px;
    background-color:#81d742;
    color:#fff;
    cursor:pointer;
}

table.main, table.results{
    margin:0px auto 2em;
}

input.error{
    border-color:#f00;
}

table.results{
    border-collapse: collapse;
}

table.results td,
table.results th{
    border:1px solid #555;
    height:1em;
    padding:3px 5px;
    text-align:left;
}
table.results tr td:nth-of-type(1),
table.results tr td:nth-of-type(2){
    min-width: 8em;
}

table.main{
    border-collapse:initial;
    border:0;
}
table.main td{
    border:0;
}
table.main td input{
    border:1px solid #666;
    width:10em;
    padding:3px;
}

table.main td input.player{
    background-color:rgba(200,200,200,.1)
}
table.main td input.player.disabled{
    background-color:rgba(200,200,200,.8)
}
table.main td input:focus{
    box-shadow: 0px 0px 5px 0px rgba(129,215,66,1);
}
table.main td input.error{
    border:1px solid #f00;
    box-shadow: 0px 0px 5px 0px rgba(255,0,0,1);
    color:#f00;
}
table.main td input.disabled.diagonal{
    background-color:#888;
}
    
table.main td input.disabled{
    background-color:#ddd;
    color:#333;
}

a#create{
    color:transparent;
    background: #81d742 url('../images/check.png') no-repeat 50%/66%;
    margin-right:-1px;
}

a.save{
    display:inline-block;
    cursor: pointer;
    border-radius: 2em;
    line-height:2em;
    width:2em;
    margin:5px;
    background-color:#81d742;
    color:#fff;
}

a.save.active{
    background-color:#f00;
}

div.save-menu{
    position:fixed;
    bottom:0px;
    right:0px;
}
div.save-menu a.save{
    text-align: center;
}