/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 15-Mar-2018, 15:09:51
    Author     : Neil
*/

*:focus {
    outline: none;
}

body {
    font: 24px/26px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
    background-color: lightblue;
}

h2, label, select {
    font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}

.big-button {
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    text-decoration: none;
    font-size: 64px;
    font-weight: bold;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
    border: 1px solid #20538D;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
}

.big-button:hover {
    background: #356094;
    border solid 1px #2A4E77;
    text-decoration: none;
    cursor: pointer;
}

.medium-button {
    padding: 10px 15px;
    background: #4479BA;
    color: #DDD;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
    border: 1px solid #20538D;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
}

.medium-button-red {
    padding: 10px 15px;
    background: red;
    color: #DDD;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
    border: 1px solid #20538D;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
}

.medium-button-yellow {
    padding: 10px 15px;
    background: yellow;
    color: #DDD;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
    border: 1px solid #20538D;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
}

.medium-button-green {
    padding: 10px 15px;
    background: green;
    color: #DDD;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
    border: 1px solid #20538D;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
}

.medium-button-grey {
    padding: 10px 15px;
    background: lightgrey;
    color: #C0C0C0;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
    border: 1px solid #20538D;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
}

.medium-button:hover {
    background: #356094;
    border solid 1px #2A4E77;
    text-decoration: none;
    cursor: pointer;
}

.medium-button-red:hover {
    background: darkred;
    border solid 1px #2A4E77;
    text-decoration: none;
    cursor: pointer;
}

.medium-button-green:hover {
    background: darkgreen;
    border solid 1px #2A4E77;
    text-decoration: none;
    cursor: pointer;
}

.medium-button-yellow:hover {
    background: #CCCC00;
    border solid 1px #2A4E77;
    text-decoration: none;
    cursor: pointer;
}

.medium-button-grey:hover {
    background: #808080;
    border solid 1px #2A4E77;
    text-decoration: none;
    cursor: pointer;
}

.small-button {
    padding: 10px 15px;
    background: #4479BA;
    color: #DDD;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
    border: 1px solid #20538D;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
}

input[type=submit] {
    padding: 10px 15px;
    background: #4479BA;
    color: #DDD;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
    border: 1px solid #20538D;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
}

input[type=button] {
    padding: 10px 15px;
    background: #4479BA;
    color: #DDD;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
    border: 1px solid #20538D;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 2px rgba(0, 0, 0, 0.2);
}

#redcircle {
    width: 25px;
    height: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background: red;
}

#greencircle {
    width: 25px;
    height: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background: green;
}

td {
    height: 50px;
    width: 50px;
}

#cssTable td {
    text-align: center;
    vertical-align: middle;
}

.nav > li > a:focus, .nav > li > a:hover{
  background: transparent !important;
}