/* ============================= Fonts ================================= */


@font-face {
 font-family: 'bitwise';
 src: url("fonts/bitwise.eot"),
 url("../fonts/bitwise.eot?#iefix") format('embedded-opentype'),
 url("../fonts/bitwise.ttf") format('truetype'),
 url("../fonts/bitwise.woff") format('woff'),
 url("../fonts/bitwise.svg") format('svg'); 
}

/* ============================= Structure ============================= */

/* when this is 'finished' the body colour will only need to be set once */
A {
    font-family: Helvetica Neue; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: normal; 
    line-height: normal;
    text-decoration: none; 
    border-bottom: 0px solid #000000; 
    transition: 0s ease;  
}

A:link { 
    color: #FFFFFF; 
    font-weight: normal; 
    text-decoration: none; 
}

A:visited { 
    color: #FFFFFF; 
    font-weight: normal; 
    text-decoration: none; 
}

A:hover { 
    color: #FFFFFF;  
    border-bottom: 2px solid #FFFFFF;
}

A:active        { color: #FFFFFF; text-decoration: none; }

A.nav { 
     font-size:35px; 
}

A.nav:link { 
    color: #FFFFFF; 
}

A.nav:visited { 
    color: #E0E0E0; 
}

A.nav:hover { 
    color: #FFFFFF; 
    border-bottom: 5px solid #FFFFFF;
}

A.nav:active { 
    color: #FFFFFF; 
    border-bottom: 5px solid #FFFFFF; 
}

img { 
    border: none; 
}

table { 
    width: 70%; 
    margin-left:15%; 
    margin-right:20%; } 

body { 
    background-color: #e0e0e0; 
}
th { font-family: Helvetica Neue; font-size: 30px;}




/* ============================== Big screen ============================ */



body {
    background-color: #e0e0e0;
}

div#outer {
    width: 1000px;
    background-color:#FFFFFF;
    margin:0px auto;
    min-height: 100%;
    height: 1000px
}

div#header {
    height: 200px;
    font-size: 12px;
    color: #000000;
    background-color:#000000; 
    background-image:url('header_fit.png');
    background-position:center center;
    background-repeat:no-repeat;
}

div#nav {
    height:37px;
    font-size: 10pt;
    font-family: Helvetica Neue;
    color: #ffffff;
    text-align: left;
    margin:0px auto;
    background-color: #000000;
    padding-bottom: 3px;

}

.right_bottom{
    font-size: 10pt;
    font-family: Helvetica Neue;
    color: #FFFFFF; 
    position: relative;
    right: 0px;    
    text-align: right ;
/*    top: 112px;*/
    bottom: 0px;
    padding-right: 10px; 
}

/* ==== Content ====*/

div#main {
    height: 72%;
}

div#main-top {
    padding-top:50px;
    height: 40%;
}

div#main-bot {
    height: 32%;
}

.centre {
    text-align: center;
}

/* ==== Footer ====*/

div#footer {
    font-size: 12px;
    color: #FFFFFF;
    text-align: left;
    padding: 3px;
    vertical-align: bottom;
    bottom: 0;
    background-color: #2f2f2f;
}

.footer {
    font-size: 12px;
    color: #FFFFFF;
    text-align: left;
    padding: 3px;
    vertical-align: bottom;
    bottom: 0;
    background-color: #2f2f2f;
}

.ts{
    font-family: Helvetica Neue;
    font-size: small;
}

/*============================== Small screen ==============================*/

@media screen and (max-width: 1080px) {
    body {
        background-color: #e0e0e0;
    }

        A.nav               { font-size:25px; }

div#outer {
    height: 945px;
    width: 93%;
    min-width: 500px;

}

div#header {
    height: 150px;
    opacity: 0.4;
}

div#nav {
    height:27px;
    font-size: 10pt;
    text-align: left;
    line-height: 10px;
}

/* ==== Content ====*/

div#main {
    height: 66%;
}

div#main-top {
    height: 34%;
}

div#main-bot {
    height: 10%;
}

/*.right_bottom{    
    top: 74px; 
}*/

}

/* ============================= Grid layout =========================== */

.grid-outer {
  background: white;
  display: inline-block;
  border: 2px solid white;
  justify-content: center;
  align-items: center;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: repeat(3, 80px);
  grid-gap: 5px;
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, 122px);
  grid-template-rows: 80px;
  grid-gap: 5px;
  margin-top: 5px;
}

.cell {
   /* center the cell content */
  justify-content: center;
  align-items: center;
  display: flex;
  font-family: Helvetica Neue;
  font-size: 3rem;
  font-weight: bold;
  background: black;
  color: white;
}

.cen {
  margin: auto;
  width: 25%;
  border: 3px;
  padding: 10px;
}