/************************   THE BASIC BODY SET UP  ******************************/

* {
        margin: 0px;
        padding: 0px;
        }


body {
        color: #000000;
        background-color : #FFF;
        font-family: Raleway, Verdana, Arial, sans-serif;
        font-size: 100%;
        text-align: left;
        }


p {
        margin-top: 1.4em;
        }
        
        
        
        
        
 /************************   THE PAGE HEADER *************************************/


.headerstripe {
        position: relative;
        top: 0px;
        left: 0px;
        width : 100%;
        z-index: 1;
        background-color : #FFF;
        }
.headerstripe2 {
        position: relative;
        top: 0px;
        left: 0px;
        width : 100%;
        height: 50px;
        z-index: 1;
        }


.logo {
        position: absolute;
        top : 10px;
        left: 30px;
        z-index: 2;
        }
        
        
.buttonbar {
        margin-top:0px;
        width: 900px;
        float: right;
        height: 40px;
        z-index : 2;
        background-color : #FFF;
        }

        
 .menudiv {
        position:absolute;
        right:0px;
        top:60px;
        width:auto;
        font-family : 'Roboto',  Verdana, Arial, sans-serif;
        font-size:14px;
        font-weight:normal;
        border:1px solid #777;
        color:#777;
        background-color:white;
        float:right;
        padding-right:20px;
        z-index:100;
        }

.menuitem {
        width:96%;
        border-bottom:1px solid #777;
        padding:4px 4px 4px 4px;
        z-index:101;
        }
        
        
        
        
        
        
/**************** THE DROP DOWN BUTTONS ALONG THE TOP    *******************/


#tgb {
        margin: 0;
        padding: 0;
        z-index: 30;
        }


#tgb li {
        margin: 0;
        padding: 0;
        list-style: none;
        float: left;
        }
        

#tgb li a {
        display: block;
        margin: 0 1px 0 0;
        padding: 8px 0px 0px 0px;
        height: 42px;
        width: 200px;
        background-color: #FFF;
        color: #333;
        font-family : Roboto, Verdana, Arial, sans-serif;
        font-size: 22px;
        font-weight: medium;
        text-align: center;
        text-decoration: none;
        }


#tgb li a:hover {
        color : white;
        background-color: #0D3C75;
        }


#tgb div {
        position: absolute;
        visibility: hidden;
        margin: 0 0 0 10px;
        padding: 0;
        background-color: #FFF;
        border: none;
        z-index: 20;
        height: 0px;
        }


#tgb div a {
        position: relative;
        display: block;
        margin: 0px;
        padding: 6px 10px; 0px; 10px;
        width: auto;
        height: auto;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        background-color: #E6E6E6;
        color: #333;
        font-family : Roboto, Verdana, Arial, sans-serif;
        font-size: 20px;
        font-weight: medium;
        z-index:20;
        }


#tgb div a:hover {
        background-color: #ECD384;
        color: #0D3C75;
        z-index: 20;
        }
        
        
        
        
        
        
        
        
/************** SOCIAL MEDIA BUTTONS  **************/


.socialbar {
        position: absolute;
        top : 20px;
        left: 75%;
        width:25%;
        z-index: 2;
        background-color : #FFF;
        }
        
.socialcontainer {
        width:auto;
        float: right;
        margin-right:100px;
        line-height: 40px;
        color: #777;
        font-size: 14px;
        font-weight: normal;
        font-family: 'Raleway', Verdana, Arial, sans-serif;
        }

.socialcontainer img {
        vertical-align: middle;
        }
        



        
/**************************    H1 H2 H3  etc  ***************************/


h1, h1 a {
        color: #333;
        font-size: 1.3em;
        font-weight: 100;
        font-family: 'Roboto', Helvetica, Verdana, Arial, sans-serif;
        line-height: 1.5em;
        }

h2, h2 a  {
        color: #0D3C75;
        font-size: 1.5em;
        font-weight: 100;
        font-family: 'Roboto', Helvetica, Verdana, Arial, sans-serif;
        line-height: 1.7em;
        text-decoration: none;
        }

h3 {
        color: #1A1A29;
        font-size: 26px;
        font-weight: normal;
        font-family: 'Raleway', Verdana, Arial, sans-serif;
        }

h4 {
        color: white;
        font-weight: bold;
        font-family: 'Raleway', Verdana, Arial, sans-serif;
        line-height: 1.8em;
        display: inline-block;
        padding-bottom: 5px;
        position: relative;
        }
        
h4:after {
        content: "";
        position: absolute;
        width: 80%;
        height: 1px;
        bottom: 0;
        left: 0;
        border-bottom: 1px solid #C0C0C0;
        }

h5 {
        color: #111;
        font-size: 16px;
        font-weight: normal;
        font-family: 'Roboto', Verdana, Arial, sans-serif;
        line-height: 1.4em;
        text-decoration: none;
        }

h6, h6 a {
        color: white;
        font-weight: normal;
        text-decoration: none;
        font-family: 'Roboto', Verdana, Arial, sans-serif;
        line-height: 1.8em;
        }
        
h6 a:hover {
        color: #FBC21D;
        font-weight: normal;
        text-decoration: none;
        font-family: 'Roboto', Verdana, Arial, sans-serif;
        line-height: 1.8em;
        }
        

        
        
.myul {
        color: #555;
        font-size: 1.25em;
        font-weight: 90;
        font-family: 'Roboto', Helvetica, Verdana, Arial, sans-serif;
        line-height: 1.6em;
        margin-top: 14px;
        margin-left:20px;
        margin-right:40px;
        }
        
.mymobileul {
        color: #555;
        font-size: 16px;
        font-weight: 90;
        font-family: 'Roboto', Helvetica, Verdana, Arial, sans-serif;
        line-height: 20px;
        margin-top: 14px;
        margin-left:20px;
        margin-right:40px;
        }
        
li {
        margin-bottom: 8px;
        }

        
        
.newsspan {
        color: black;
        font-weight: normal;
        font-family: 'Roboto', Verdana, Arial, sans-serif;
        text-decoration: none;
        }
        
        
        
/*********************    PREDEFINED PARAGRAPH BREAKS  ***********************/

.p6 { margin-top: 6px;}
.p10 { margin-top: 10px;}
.p14 { margin-top: 14px;}
.p16 { margin-top: 16px;}
.p20 { margin-top: 20px;}
.p24 { margin-top: 24px;}
.p36 { margin-top: 36px;}



.closingdiv { height:140px; clear:both;}
.closingmobile { height:40px; clear:both;}



/*********************    PAGE ELEMENTS  ************************************/

.headertext {
        color: #0D3C75;
        font-size: 2.4em;
        font-weight: 100;
        font-family: 'Roboto', Helvetica, Verdana, Arial, sans-serif;
        line-height: 2.4em;
        }

.titlebar {
        width:95%;
        padding-top:16px;
        padding-left: 5%;
        color: white;
        font-weight: normal;
        font-family: 'Raleway', Verdana, Arial, sans-serif;
        }
        
        
.columnleft{
        width: auto;
        }
        
.columnright{
        width: 30%;
        float: right;
        background-color: white;
        }
        
        
.colheader {
        width: 99%;
        height: 26px;
        color: white;
        font-family : 'Raleway', Verdana, Arial, sans-serif;
        font-size: 16px;
        padding: 6px 10px 6px 10px;
        }
        
        
        
.horizsection {
        position:relative;
        width:96%;
        padding-left:2%;
        padding-right:2%;
        }
        
.topmargin0 {margin-top: 0px;}
.topmargin20 {margin-top: 20px;}
.topmargin30 {margin-top: 30px;}
.topmargin36 {margin-top: 36px;}
.btmmargin20 {margin-bottom: 20px;}
.btmmargin30 {margin-bottom: 30px;}
.btmmargin36 {margin-bottom: 36px;}

        
.thirdblock {
        width:30%;
        display: block;
        }
        
.thirdtwothirds {
        width:66%;
        display: block;
        }
.blockborder {border: 2px solid #AAA;}
.noborder {border: none;}

.overflowhidden {
        overflow:hidden;
        }
        
.col1 { float:left;margin-left:0%;}
.col2 { float:left;margin-left:4%;}
.col3 { float:right;}
        
        
.picblock {
        position: relative;
        left: 0px;
        top: 0px;
        display: block;
        width: 100%;
        z-index: 0;
        transition: all 1.5s ease;
        }
        
.pictitle {
        position: relative;
        left: 8%;
        width: 84%;
        top: -10px;
        line-height: 26px;
        background-color:#0D3C7d;
        color: #FFF;
        font-size: 14px;
        font-weight: normal;
        font-family: 'Raleway', Verdana, Arial, sans-serif;
        text-align: center;
        border: 2px solid #AAA;
        z-index: 3;
        }
        
        
.pictext {
        position: relative;
        left: 0px;
        width: 90%;
        padding-left:5%;
        padding-right:5%;
        top: -34px;
        padding-top: 40px;
        height: 100px;
        background-color: white;
        color: #333;
        font-size: 1.2em;
        line-height: 1.4em;
        font-weight: 200;
        font-family: 'Roboto', Verdana, Arial, sans-serif;
        text-align: center;
        border-top:2px solid #AAA;
        z-index: 1;
        }
        
        
.chatblock {
        position: relative;
        left: 0px;
        top: -40px;
        display: block;
        width: 100%;
        z-index: 0;
        }
        
        



/*********************    COLOURS  ************************************/


.whitetext {color: #FFF; }

.masonblue {background-color: #0D3C75; }
.masonbluetext {color: #0D3C75; }

.masongold {background-color: #ECD384; }
.masongoldtext {color: #ECD384; }

.darkgrey {background-color: #333; }
.darkgreytext {color: #333; }

.lightgrey {background-color: #EEE; }
.lightgreytext {color: #EEE; }



/*********************    INPUT BOXES AND BUTTONS  ********************/


.calendar {
        color:#0D3C75;
        font-size:1.4em;
        font-weight:100;
        font-family:'Roboto', Helvetica, Verdana, Arial, sans-serif;
        text-align:center;
        padding:6px 10px 2px 10px;
        }
        
.calarrow {
        width:10%;
        }
        
.calheading {
        width:70%;
        }
        
.calarrow:hover{
        color:#ECD384;
        }
        
        

.textinput {
        height: 30px;
        margin-top:6px;
        margin-bottom:6px;
        font-family: 'Roboto', Verdana, Arial, Sans-Serif;
        font-size: 14px;
        color : #333;
        padding-left:10px;
        border: 1px solid #777;
        }
        
        
.chatdrop {
        margin-left:30px;
        margin-top:2px;
        color:#333;
        font-size: 16px;
        font-weight: normal;
        font-family: 'Roboto', Verdana, Arial, sans-serif;
        width:250px;
        }
        

.btn-general {
        font-size: 16px;
        font-weight: normal;
        font-family : 'Raleway', Verdana, Arial, sans-serif;
        background-color: #0D3C75;
        color:white;
        text-align: left;
        padding: 10px 10px 10px 10px;
        height: auto;
        border:1px solid white;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
        }


.btn-general:hover {
        background-color: #ECD384;
        color:#333;
        border:1px solid grey;
        cursor:pointer;
        }
        



        
/*********************   CLICKABLE AND HOVERABLE ELEMENTS  ********************/

.clickable :{border:0}
.clickable:hover{cursor:pointer}

.brightable:{opacity:.5;filter:alpha(opacity = 50)}
.brightable:hover{opacity:1;filter:alpha(opacity = 100)}

.dimmable:{opacity:1;filter:alpha(opacity = 100)}
.dimmable:hover{opacity:.5;filter:alpha(opacity = 50)}

.borderable:{border:1px solid white}
.borderable:hover{border:1px solid gray}



/*********************   OBFUSCATABLE ****************************************/

obfusc::after {
        content: attr(whereat) ".com";
        }
obfusc::before {
        content: attr(me) "\0040";
        }