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

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


body {
        color: #333;
        background-color : white;
        font-family: 'Arimo', Verdana, Arial, sans-serif;
        font-size: 100%;
        text-align: left
        }








/************************   THE MAIN CONTENT WRAPPER  **********************************/


.centreit {
        width:1000px;
        margin-left:auto;
        margin-right:auto;
        position:relative;
        }

.maincontainer {
        background-color:white;
        top:80px;
        width:980px;
        }
        
        
        
        




/************************   THE PAGE HEADER AND FOOTER *************************************/

.header {
        max-width: 100%;
        height: auto;
        z-index : 1;
        position:relative;
        top:0px;
        left: 0px;
        background-color: white;
        }


.headercontainer {
        position:relative;
        width : 1000px;
        height: 120px;
        margin-left:auto;
        margin-right:auto;
        overflow: hidden;
        background-repeat:no-repeat;
        background-image: url("../customimgs/header.png");
        }


.pagefooter {
        background-color: #222;
        width : 100%;
        height : 140px;
        border-top : 1px solid #000033;
        }


.pagefootercontent {
        background-color: #222;
        position: relative;
        width : 1000px;
        height : 120px;
        margin-left:auto;
        margin-right:auto;
        overflow: hidden;
        }





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


h1, h1 a {
        color: #222;
        font-size: 16px;
        font-weight: normal;
        font-family: 'Arimo', Verdana, Arial, sans-serif;
        line-height: 1.8em;
        }

h2, h2 a  {
        color: #222;
        font-size: 14px;
        font-weight: normal;
        font-family: 'Arimo', Verdana, Arial, sans-serif;
        line-height: 1.8em;
        text-decoration: none;
        }

h3 {
        color: white;
        font-size: 24px;
        font-weight: normal;
        font-family: 'Arimo', Verdana, Arial, sans-serif;
        line-height: 1.5em;
        }

h4, h4 a {
        color: white;
        font-size: 13px;
        font-weight: normal;
        font-family: 'Arimo', Verdana, Arial, sans-serif;
        line-height: 1.8em;
        }

h5, h5 a {
        color: #444;
        font-size: 15px;
        font-weight: normal;
        font-family: 'Arimo', Verdana, Arial, sans-serif;
        line-height: 1.8em;
        text-decoration: none;
        }

h6, h6 a {
        color: white;
        font-size: 20px;
        font-weight: normal;
        text-decoration: none;
        font-family: 'Arimo', Verdana, Arial, sans-serif;
        line-height: 1.5em;
        }
        
        



        
        
/**************** THE TITLE BAND    *************/

        
.titleband {
        position:absolute;
        top:475px;
        width:980px;
        color : #111;
        background: #E3BD0B;
        font-family: 'Arimo', Verdana, Arial, sans-serif;
        font-size: 32px;
        padding-top:6px;
        padding-bottom:6px;
        padding-left:20px;
        opacity:0.8;
        z-index:2;
        }






/**************** THE DYNAMIC DROP DOWN BUTTONS ALONG A STRIP    *************/


.buttonbar {
        position:absolute;
        top:120px;
        left:0px;
        width : 100%;
        height: 60px;
        background-color: #FFF;
        }
        
.buttoncontainer {
        position:relative;
        width : 1000px;
        margin-left:auto;
        margin-right:auto;
        }
        

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


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


#tgb li a {
        color: #555;
        background-color: white;
        display: block;
        margin: 0 0 0 0;
        padding: 6px 0px 0px 0px;
        height: 34px;
        width: 100px;
        font-family : 'Arimo', Verdana, Arial, sans-serif;
        font-size: 16px;
        font-weight: normal;
        text-align: center;
        text-decoration: none;
        border-right: 1px solid #AAA;
        }
        
        
#tgb li:last-child a {
        border-right: none;
        }


#tgb li a:hover {
        color : #111;
        background-color: #E3BD0B;
        }


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

#tgb div a {
        color: #555;
        background-color: white;
        position: relative;
        display: block;
        margin-top: 2px;
        margin-bottom: 2px;
        padding: 5px 4px 5px; 6px;
        width: auto;
        height: auto;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        font-family : 'Arimo', Verdana, Arial, sans-serif;
        font-size: 16px;
        font-weight: normal;
        z-index:200;
        border-right: none;
        }


#tgb div a:hover {
        color : #009CD4;
        z-index:200;
        }









/*********************    PREDEFINED PARAGRAPH BREAKS  ***********************/

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








/********************    COLOURED BUTTONS    ***************/

.caecbutton {
        color: #111;
        background-color: #E3BD0B;
        font-size: 16px;
        font-weight: normal;
        font-family: 'Arimo', Verdana, Arial, sans-serif;
        text-align: center;
        padding: 0 14px 0 14px;
        height: 40px;
        line-height: 30px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
        }

.caecbutton:hover {
        color: #FFF;
        background-color: #777;
        cursor : pointer;
        }
        
        
        
        
        
        
        
/********************    HOMEPAGE TABLES    ***************/
        
        
.tdtitle {
        font-size: 24px;
        font-weight: normal;
        font-family: 'Arimo', Verdana, Arial, sans-serif;
        line-height: 1.8em;
        }
        

.scrolluptext {
        position:absolute;
        left:0px;
        top:250px;
        height:50px;
        background-color:white;
        z-index:2;
        opacity:0.84;
        color:#222;
        font-family : 'Arimo', Verdana, Arial, sans-serif;
        font-size: 14px;
        padding: 4px 4px 4px 4px;
        border-left:1px solid #AAA;
        border-right:1px solid #AAA;
        border-bottom:1px solid #AAA;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
        }
        
.scrollupindex {
        width:390px;
        }
        
.scrollupright {
        width:290px;
        }


        
        
/********************    SCREEN BOXES    ***************/
        
.box {
        border: 1px solid #CCC;
        height: 260px;
        overflow: hidden;
        z-index: 1;
        }
        
.boxhalf {
        width: 480px;
        }
.boxthird {
        width: 316px;
        }
        
.boximage {
        position:absolute;
        top: 0px;
        left: 0px;
        z-index: 0;
        height: 260px;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
        transition: all 1s ease;
        }

        
.boxhalfimage {
        width: 480px;
        }
.boxhalfimage:hover {
        height: 286px;
        width: 528px;
        }
.boxthirdimage {
        width: 316px;
        }
.boxthirdimage:hover {
        height: 286px;
        width: 347px;
        }

        
.boxtitle {
        position:absolute;
        top: 0px;
        left: 0px;
        z-index: 2;
        height: 40px;
        padding-left: 10px;
        padding-top: 12px;
        background: #059;
        opacity: 0.85;
        filter: alpha(opacity = 85);
        color : white;
        font-family: 'Arimo', Verdana, Arial, sans-serif;
        font-size: 18px;
        }
        
.boxfooter {
        position:absolute;
        top: 220px;
        left: 0px;
        z-index: 2;
        height: 50px;
        padding-left: 10px;
        padding-top: 12px;
        background-color: #FFF;
        opacity: 0.65;
        filter: alpha(opacity = 65);
        color : black;
        font-family: 'Arimo', Verdana, Arial, sans-serif;
        font-size: 14px;
        }
        
.boxhalfwords {
        width: 470px;
        }
.boxthirdwords {
        width: 306px;
        }
        
        
        
        
        
        
        
/********************    MENU PAGES RIGHT HAND COLUMN    ***************/
        
.menuright {
        position:absolute;
        left:662px;
        top:20px;
        width:310px;
        padding-left:10px;
        border-left:1px solid gray;
        }
        
        
        
.boxright {
        width:258px;
        padding: 6px 6px 6px 6px;
        background-color: #059;
        color: white;
        font-size: 14px;
        font-weight: normal;
        font-family: 'Arimo', Verdana, Arial, sans-serif;
        line-height: 1.5em;
        text-decoration: none;
        }



.menurthalf {
        position:absolute;
        left:540px;
        top:20px;
        width:422px;
        padding-left:20px;
        border-left:1px solid gray;
        }
        
        
        
        
        
        
        
/********************   NEWS AND 100 ACTS BLOCK    ***************/

.newsblock {
        position:absolute;
        top:20px;
        left:20px;
        width:500px;
        color: #222;
        font-size: 16px;
        font-weight: normal;
        font-family: 'Arimo', Verdana, Arial, sans-serif;
        line-height: 1.8em;
        text-decoration: none;
        }








/********************    CLICKABLE AND SCROLLABLE ELEMENTS    ***************/

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


.brightable: { opacity: 0.5; filter: alpha(opacity = 50); }
.brightable:hover { opacity: 1.0; filter: alpha(opacity = 100); }
.dimmable: { opacity: 1.0; filter: alpha(opacity = 100); }
.dimmable:hover { opacity: 0.5; filter: alpha(opacity = 50); }

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



.scrollable : {
        border : 0px;
        -o-transition: all .5s;
        -ms-transition: all .5s;
        -moz-transition: all .5s;
        -webkit-transition: all .5s;
        transition: all .5s;
        }

.scrollable:hover { cursor : pointer; }











/***********************************    TABLES    ***********************************************************/


.oce-first { background: #DDD; border-right: 6px solid transparent; border-left: 6px solid transparent; }


/* CLASS general purpose ! */
.one-column-generalpurpose { font-family: 'Arimo', Verdana, Arial, Sans-Serif; font-size: 12px; margin: 2px; text-align: left; border-collapse: collapse; }
.one-column-generalpurpose th { font-size: 12px; font-weight: normal; padding: 6px 6px; color: #111; }
.one-column-generalpurpose td { padding: 6px 6px; color: #111111; border-top: 1px solid #888; }
.one-column-generalpurpose tr:hover td { color: #222; background: #AAA; }


/* CLASS no background colour change on hover */
.one-column-nobgchange { font-family: 'Arimo', Verdana, Arial, Sans-Serif; font-size: 12px; margin: 2px; text-align: left; border-collapse: collapse; }
.one-column-nobgchange th { font-size: 12px; font-weight: normal; padding: 6px 6px; color: #111; }
.one-column-nobgchange td { padding: 6px 6px; color: #111111; border-top: 1px solid #888; }


/* CLASS no borders */
.one-column-noborder { font-family: 'Arimo', Verdana, Arial, Sans-Serif; font-size: 12px; margin: 2px; text-align: left; border-collapse: collapse; }
.one-column-noborder th { font-size: 12px; font-weight: normal; padding: 6px 6px; color: #111; }
.one-column-noborder td { padding: 6px 6px; color: #111111; }
.one-column-noborder tr:hover td { color: #222; background: #AAA; }


/* CLASS no borders or hover */
.one-column-clean { font-family: 'Arimo', Verdana, Arial, Sans-Serif; font-size: 12px; margin: 2px; text-align: left; border-collapse: collapse; }
.one-column-clean th { font-size: 12px; font-weight: normal; padding: 6px 6px; color: #111; }
.one-column-clean td { padding: 6px 6px; color: #111111; }


/* CLASS borders on all sides, no bg change */
.one-column-borders { font-family: 'Arimo', Verdana, Arial, Sans-Serif; font-size: 12px; margin: 2px; text-align: left; border-collapse: collapse; }
.one-column-borders th { font-size: 12px; font-weight: normal; padding: 6px 6px; color: #111; }
.one-column-borders tr { border-top: 1px solid #888;}
.one-column-borders tr:first-child { border-top: 1px solid #333;}
.one-column-borders tr:last-child { border-bottom: 1px solid #333;}
.one-column-borders td { padding: 6px 6px; color: #111111; border-left: 1px solid #888;}
.one-column-borders td:first-child { border-left: 1px solid #333;}
.one-column-borders td:last-child { border-right: 1px solid #333;}









/********************    SUITE OF INPUT BOXES, TEXT AREAS AND DROPDOWNS    ***************/

.onecol_txt { height: 22px; font-family: 'Arimo', Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777; }
.onecol_txt_210 { width: 210px; height: 22px; font-family: 'Arimo', Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777; }
.onecol_txt_70 { width: 70px; height: 22px; font-family: 'Arimo', Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777; }

.onecol_drop { width: 120px; height: 22px; font-family: 'Arimo', Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777; }
.onecol_drop_210 { width: 210px; height: 22px; font-family: 'Arimo', Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777;}

.onecol_txtarea { font-family: 'Arimo', Verdana, Arial, Sans-Serif; font-size: 12px; color : #111; border: 1px solid #777; }
.onecol_txtarea50 { font-family: 'Arimo', Verdana, Arial, Sans-Serif; font-size: 12px; color : #111; border: 1px solid #777; width:210px; height:50px; }

.mysearch { width: 200px; height: 30px; font-family: 'Arimo', Verdana, Arial, Sans-Serif; font-size: 12px; color : #777; border: 1px solid #888; padding-left:10px; vertical-align:middle;}

.contact { width: 400px; height: 22px; font-family: 'Arimo', Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777; }
.contactbox { width: 400px; height: 140px; font-family: 'Arimo', Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777; }










/********************    LISTS    ***************/

.caeclist  {
        color: #222;
        font-size: 16px;
        font-weight: normal;
        font-family: 'Arimo', Verdana, Arial, sans-serif;
        line-height: 2em;
        padding-left:16px;
        }








/************** SOCIAL MEDIA BUTTONS  **************/
.social-wrap{position:absolute;
                left:570px;
                top:50px;
                width:200px;
                }


.social-button{float:left;
                height:30px;
                width:30px;
                margin-right:10px;
                }


.facebook{background: url(../imgs/facebook_icon.jpg) center center no-repeat;}
.twitter{background: url(../imgs/twitter_icon.jpg) center center no-repeat;}
.google{background: url(../imgs/google_icon.jpg) center center no-repeat;}
.linkedin{background: url(../imgs/linkedin_icon.jpg) center center no-repeat;}
.instagram{background: url(../imgs/instagram_icon.jpg) center center no-repeat;}
.youtube{background: url(../imgs/youtube_icon.jpg) center center no-repeat;}

.facebook:hover{background: url(../imgs/facebook_icon_over.jpg) center center no-repeat;}
.twitter:hover{background: url(../imgs/twitter_icon_over.jpg) center center no-repeat;}
.google:hover{background: url(../imgs/google_icon_over.jpg) center center no-repeat;}
.linkedin:hover{background: url(../imgs/linkedin_icon_over.jpg) center center no-repeat;}
.instagram:hover{background: url(../imgs/instagram_icon_over.jpg) center center no-repeat;}
.youtube:hover{background: url(../imgs/youtube_icon_over.jpg) center center no-repeat;}












/************** GOOGLE MAP CANVAS  **************/

#map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
        }

.maplabels {
        color: #2185C7;
        background-color: white;
        font-family: "Verdana", "Arial", sans-serif;
        font-size: 10px;
        font-weight: normal;
        text-align: center;
        width: 70px;
        border: 1px solid #2185C7;
        white-space: nowrap;
        }










/************** CALENDAR CONTROL (javascript popup calendar)  **************/

#CalendarControlIFrame { display: none; left: 0px; position: absolute; top: 0px; height: 250px; width: 250px; z-index: 99; }
#CalendarControl { position:absolute; background-color:#FFF; margin:0; padding:0; display:none; z-index: 100; }
#CalendarControl table { font-family: Verdana, helvetica, sans-serif; font-size: 8pt; border-left: 1px solid #336; border-right: 1px solid #336; }
#CalendarControl th { font-weight: normal; }
#CalendarControl th a { font-weight: normal; text-decoration: none; color: red; padding: 1px; }
#CalendarControl td { text-align: center; } #CalendarControl .header { background-color: blue; }
#CalendarControl .weekday { background-color: blue; color: green; }
#CalendarControl .weekend { background-color: red; color: gray; }
#CalendarControl .current { border: 1px solid #339; background-color: #222; color: #FFF; }
#CalendarControl .weekday, #CalendarControl .weekend, #CalendarControl .current { display: block; text-decoration: none; border: 1px solid #FFF; width: 2em; }
#CalendarControl .weekday:hover, #CalendarControl .weekend:hover, #CalendarControl .current:hover { color: #FFF; background-color: #333; border: 1px solid #999; }
#CalendarControl .previous { text-align: left; }
#CalendarControl .next { text-align: right; }
#CalendarControl .previous, #CalendarControl .next { padding: 1px 3px 1px 3px; font-size: 1.4em; }
#CalendarControl .previous a, #CalendarControl .next a { color: #FFF; text-decoration: none; font-weight: bold; }
#CalendarControl .title { text-align: center; font-weight: bold; color: #FFF; }
#CalendarControl .empty { background-color: #CCC; border: 1px solid #FFF; }







/************** BOBSLIDE  **************/

.bobslide {
        position: absolute;
        left: 200px;
        top : -90px;
        z-index: 200;
        color : #111;
        background-color: #FFF;
        width:600px;
        height:600px;
        font-family: 'Arimo', Verdana, Arial, sans-serif;
        font-size: 14px;
        font-weight: normal;
        border : 2px solid gray;
        visibility : hidden;
        }

.redex {
        position:absolute;
        left:550px;
        top:0px;
        z-index:202;
        border: 0px;
        background-image : url('imgs/redex.png');
        }
        
.redex:hover { cursor : pointer; }

.bobarrowl {
        position:absolute;
        left:0px;
        top:200px;
        z-index:202;
        opacity:0.8;
        background-image : url('imgs/bobarrowl.png');
        }
        
.bobarrowl:hover { cursor : pointer; }
        
.bobarrowr {
        position:absolute;
        left:530px;
        top:200px;
        z-index:202;
        opacity:0.8;
        background-image : url('imgs/bobarrowl.png');
        }

.bobarrowr:hover { cursor : pointer; }