@font-face {
  font-family: 'Square';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Square.woff) format('woff');
}

@font-face {
  font-family: 'Electrolize';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Electrolize.woff) format('woff');
}

body {
  font-family: Square, Verdana, Arial;
  font-size: medium;
  text-align: center;
  color: #444;
  background-color: #AAA;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

h1
{
  font-family: Electrolize, Verdana, Arial;
  font-size: xx-large;
  font-weight: bold
  color: #888;
}

h2
{
  font-family: Electrolize, Verdana, Arial;
  font-size: large;
  font-weight: bold;
  color: #444;
}

h3
{
  font-family: Electrolize, Verdana, Arial;
  font-size: x-small;
  font-weight: normal;
  color: #555555;
}

a:link, a:visited
{
  font-weight: normal;
  text-decoration:none;
  color: #444;
}

a:hover
{
  font-weight: normal
  text-decoration:none;
  color: #4477AA;
  text-shadow:#25A3FF 0px 0px 6px;
}

.error
{
  font-size: large;
  font-weight: bold;
  color: #ff0000;
}

.left-align
{
  text-align: left;
}

.right-align
{
  text-align: right;
}

.footer
{
  font-weight: 400;
  font-size: small;
  color: #444;
  background-color: #AAA;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

/* buttons */
.button {
  box-shadow: inset 1px 1px 4px rgba(0,0,0,0.5);
  -moz-box-shadow: inset 1px 1px 4px rgba(0,0,0,0.5);
  -webkit-box-shadow: inset 1px 1px 4px rgba(0,0,0,0.5);
  border-radius: 0.4em;
  -moz-border-radius: 0.4em;
  -webkit-border-radius: 0.4em;
  background-color: rgba(160,160,160,1);
  border: 1px solid rgba(200,200,200,1);
  display: inline-block;
  cursor: pointer;
  padding: 0 1.5em;
  margin: 0.5em;
  font: bold 1em/2em Electrolize, verdana, arial, sans;
  color: rgba(60,60,60,1);
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}
  
.button:hover {
  background-color: rgba(64,64,64,1);
}
  
.button:active {
  position: relative;
  top: 1px;
  left: 1px;
}

.button:focus {
  background-color: rgba(255,180,50,1);
  outline: 0;
}

/* table */
table {
  display: table;
  background-color: rgba(200,200,200,1);
  font-family: Square, verdana, arial, sans;
  font-size: 16px;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  height: 20px;
  text-align: left;
}

table, th, td {
  border: 1px solid black;
  box-shadow: inset 2px 2px 8px #999999;
  -moz-box-shadow: inset 2px 2px 8px #999999;
  -webkit-box-shadow: inset 2px 2px 8px #999999;
}

th {
  vertical-align: middle;
  text-align: center;
  height: 20px;
  padding: 5px;
}

td {
  vertical-align: middle;
  text-align: left;
  height: 15px;
  padding: 5px;
}

.greenbox {
  display: block;
  font: bold 1em/2em Electrolize, verdana, arial, sans;
  background-color: rgba(90,180,90,1);
  color: rgba(240,240,240,1);
  text-decoration: none;
  text-align:center;
  position: relative;
  border: 1px solid transparent;
  padding: .2em .5em;
  margin: auto;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
  -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
  -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}

.yellowbox {
  display: block;
  font: bold 1em/2em Electrolize, verdana, arial, sans;
  background-color: rgba(205,200,78,1);
  color: rgba(240,240,240,1);
  text-decoration: none;
  text-align:center;
  position: relative;
  border: 1px solid transparent;
  padding: .2em .5em;
  margin: auto;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
  -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
  -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}

.redbox {
  display: block;
  font: bold 1em/2em Electrolize, verdana, arial, sans;
  background-color: rgba(230,50,50,1);
  color: rgba(240,240,240,1);
  text-decoration: none;
  text-align:center;
  position: relative;
  border: 1px solid transparent;
  padding: .2em .5em;
  margin: auto;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
  -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
  -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}

.warning {
  display: block;
  text-decoration: none;
  position: relative;
  border: 0;
  padding: .2em .5em;
  margin: 0;
  background-color: rgba(230,50,50,1);
  color: rgba(240,240,240,1);
}