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

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


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








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


.main_1000 {width : 1000px;margin-left:auto;margin-right:auto;position:relative;overflow:none;height:1000px;}
.main_auto {width : 1000px;margin-left:auto;margin-right:auto;position:relative;overflow:none;}








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


h1, h1 a {
        color: #2860A9;
        font-size: 16px;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        line-height: 2em;
        }

h2  {
        color: #333;
        font-size: 12px;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        line-height: 2em;
        }

h3 {
        color: #333;
        font-size: 12px;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        line-height: 2em;
        }

h4, h4 a {
        color: #333;
        font-size: 10px;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        line-height: 2em;
        }

h5, h5 a {
        color: #777;
        font-size: 14px;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        }

h6, h6 a {
        color: #333;
        font-size: 12px;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        line-height: 1.6em;
        }









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

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









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

.pageheader {
        width : 1000px;
        height: 140px;
        z-index : 1;
        position:absolute;
        top:0px;
        left: 0px;
        background-image : url('../imgs/header.png');
        background-repeat : no-repeat;
        }



.pagefooter {
        background-color: #FFF;
        position:absolute;
        left:0px;
        top:560px;
        width : 100%;
        height : 120px;
        border-top : 1px solid #777;
        }


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





        
        

        


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


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


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


#tgb li a {
        color: #FFF;
        background-color: #2860A9;
        display: block;
        margin: 0 0 0 0;
        padding: 6px 0px 0px 0px;
        height: 30px;
        width: 123px;
        font-family : 'Open Sans', Verdana, Arial, sans-serif;
        font-size: 12px;
        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 : #FFF;
        background-color: #92AFC1;
        }


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

#tgb div a {
        color: #2860A9;
        background-color: #DDD;
        position: relative;
        display: block;
        margin: 0px;
        padding: 6px 4px; 0px; 6px;
        width: auto;
        height: auto;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        font-family : 'Open Sans', Verdana, Arial, sans-serif;
        font-size: 12px;
        font-weight: normal;
        z-index:20;
        border-right: none;
        }


#tgb div a:hover {
        color : #FFF;
        background-color: #1BABE2;
        z-index:20;
        }













/********************   SNAZZY ROUNDED BUTTONS ***************/



.clearbtn { /* generic container (i.e. div) for floating buttons */
        overflow: hidden;
        width: 100%;
        }

a.button {
        background: transparent url('../imgs/bg_button_a.gif') no-repeat scroll top right;
        color: #444;
        display: block;
        float: left;
        font: normal 12px arial, sans-serif;
        height: 24px;
        margin-right: 6px;
        padding-right: 18px; /* sliding doors padding */
        text-decoration: none;
        }

a.button span {
        background: transparent url('../imgs/bg_button_span.gif') no-repeat;
        display: block;
        line-height: 14px;
        padding: 5px 0 5px 18px;
        }
        
a.button:hover {
        cursor : pointer;
        }

a.button:active {
        background-position: bottom right;
        color: #000;
        outline: none; /* hide dotted outline in Firefox */
        }

a.button:active span {
        background-position: bottom left;
        padding: 6px 0 4px 18px; /* push text down 1px */
        }





/********************   CSS ROUNDED BUTTONS ***************/

.cssbutton {
        color: #333;
        background-color:#DDD;
        font-size: 12px;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        text-align: center;
        padding: 4px 10px 4px 10px;
        border-width:1px;
        border-color:#777;
        border-style:solid;
        line-height: 18px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
        }

.cssbutton:hover {color:#FFF; background:#92AFC1; cursor:pointer;}



.tinybutton {
        color: #333;
        background-color:#DDD;
        font-size: 10px;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        text-align: center;
        padding: 2px 6px 2px 6px;
        border-width:1px;
        border-color:#777;
        border-style:solid;
        line-height: 14px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
        }

.tinybutton:hover {color:#FFF; background:#92AFC1; cursor:pointer;}






/********************    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 #333; }



.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: 'Open Sans', 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 #4B5966;}
.one-column-generalpurpose tr:hover td { color: #222; background: #AAA; }


/* CLASS no background colour change on hover */
.one-column-nobgchange { font-family: 'Open Sans', 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 #4B5966; }


/* CLASS no borders */
.one-column-noborder { font-family: 'Open Sans', 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: 'Open Sans', 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: 'Open Sans', 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: 20px; font-family: 'Open Sans', Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777; }
.onecol_txt_210 { width: 210px; height: 20px; font-family: 'Open Sans', Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777; }
.onecol_txt_150 { width: 150px; height: 16px; font-family: 'Open Sans', Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777; }
.onecol_txt_70 { width: 70px; height: 16px; font-family: 'Open Sans', Verdana, Arial, Sans-Serif; font-size: 12px; color : #111111; border: 1px solid #777; }

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

.onecol_txtarea { font-family: 'Open Sans', Verdana, Arial, Sans-Serif; font-size: 12px; color : #111; border: 1px solid #777; }

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










/************** SOCIAL MEDIA BUTTONS  **************/

.social-wrap{position:absolute;
                left:760px;
                top:20px;
                width:180px;
                }


.social-button{float:left;
                height:30px;
                width:30px;
                border-radius: 17px;
                margin-left:10px;
                -webkit-border-radius: 17px;-moz-border-radius: 17px;
                border:2px solid #cccccc;
                }



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


.facebook:hover{background: url(../imgs/facebook_icon.jpg) center center no-repeat;}
.twitter:hover{background: url(../imgs/twitter_icon.jpg) center center no-repeat;}
.google:hover{background: url(../imgs/google_icon.jpg) center center no-repeat;}
.linkedin:hover{background: url(../imgs/linkedin_icon.jpg) center center no-repeat;}
.instagram:hover{background: url(../imgs/instagram_icon.jpg) center center no-repeat;}
.youtube:hover{background: url(../imgs/youtube_icon.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: #FEF303; padding: 1px; }
#CalendarControl td { text-align: center; }
#CalendarControl .header { background-color: #2860A9; }
#CalendarControl .weekday { background-color: #888; color: #FFF; }
#CalendarControl .weekend { background-color: #555; color: #248EEE; }
#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; }






/************** THE POP UP TIME PICKER  **************/

#timepickerid table { font-family: Verdana, helvetica, sans-serif; font-size: 8pt; border: 1px solid #336; }
#timepickerid th { font-weight: normal; text-decoration: none; color: white; padding: 1px; }
#timepickerid td { text-align: center; font-weight: normal; text-decoration: none; color: white; background-color: #888; padding: 1px 4px 1px 4px; border: 1px solid #FFF;}
#timepickerid td:hover { cursor:pointer; background-color:#333;}
#timepickerid .header { background-color: #2860A9; }
#timepickerid .footer, .footer a { color: #FEF303; background-color: #2860A9;}





/************** LARGE (Google calendar style) CALENDARS  **************/

.googlecalday { font-size: 12px; font-weight: normal; font-family: 'Open Sans', Verdana, Arial, sans-serif; text-align: left; background-color: #EEE; color : #333; width:126px; padding-left:5px;}
.googlecalwkd { font-size: 12px; font-weight: normal; font-family: 'Open Sans', Verdana, Arial, sans-serif; text-align: left; background-color: #1BABE2; color : #248EEE; width:126px; padding-left:5px;}
.googlecalweekday { font-size: 12px; font-weight: normal; font-family: 'Open Sans', Verdana, Arial, sans-serif; text-align: left; background-color: #EEE; color : #333; width:124px; padding-left:5px; border: 1px solid #CCC;}
.googlecalweekend { font-size: 12px; font-weight: normal; font-family: 'Open Sans', Verdana, Arial, sans-serif; text-align: left; background-color: #1BABE2; color : #248EEE; width:124px; padding-left:5px; border: 1px solid #CCC;}
.googlecalempty { font-size: 12px; font-weight: normal; font-family: 'Open Sans', Verdana, Arial, sans-serif; text-align: left; background-color: white; width:124px; padding-left:5px;}



/************** some extra google calendar styles for ad-hoc  **************/
.googlecal1 { font-size: 12px; font-weight: normal; font-family: 'Open Sans', Verdana, Arial, sans-serif; text-align: left; background-color: #FFF; width:126px; padding-left:5px;}
.googlecal2 { font-size: 12px; font-weight: normal; font-family: 'Open Sans', Verdana, Arial, sans-serif; text-align: left; background-color: #DDD; color: #0453E8; width:123px; padding-left:5px; border: 1px solid #CCC;}



/************** little icons next to the dates **************/
.calicon  {
        color: white;
        background-color: #888;
        font-size: 11px;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        padding-left:4px;
        padding-right:4px;
        margin-left:2px;
        margin-right:2px;
        }

.calicon:hover { cursor : pointer; }







/********************   THE "NEXT PAGE" PAGINATION TABS   ***************/

.pagination {
        border-top: 1px solid #CCC;
        padding-top: 8px;
        display: inline-block;
        width: 100%;
        margin-bottom: 10px;
        background-color : #FFF;
        }

.pagination .links {
        float: left;
        font-size: 12px;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        text-decoration: none;
        }

.pagination .links:hover {
        cursor : pointer;
        }

.pagination .links .x {
        display: inline-block;
        border: 1px solid #CCC;
        color: #222;
        background-color : #EEE;
        height: 42px;
        width: 30px;
        text-align: center;
        padding-top: 10px;
        }
.pagination .links .x:hover {background-color : #FFF;}


.pagination .links .y {
        display: inline-block;
        border: 1px solid #DDDDDD;
        color: #DDDDDD;
        background-color: #555555;
        height: 42px;
        width: 30px;
        text-align: center;
        padding-top: 10px;
        }


.pagination .results {
        font-size: 12px;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        float: right;
        padding-top: 3px;
        }








/*****************    SMALL paginations    ***************/
.smallpagination  {
        color: white;
        background-color: grey;
        font-size: 12px;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        padding-left:4px;
        padding-right:4px;
        }

.smallpagination:hover { cursor : pointer; }












/*****************    SNAZZY ALERT POPUPS (alternative to javascript alert)    ***************/

.snazzyalert {
        position: absolute;
        left: 200px;
        top : 100px;
        z-index: 200;
        color : #111;
        background-color: #FFF;
        width:360px;
        height:140px;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        font-size: 12px;
        line-height: 2em;
        font-weight: normal;
        padding : 20px 20px 20px 20px;
        border : 2px solid #4B5966;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
        }


.snazzybigalert {
        position: absolute;
        left: 200px;
        top : 100px;
        z-index: 200;
        color : #111;
        background-color: #FFF;
        width:360px;
        height:240px;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        font-size: 12px;
        line-height: 2em;
        font-weight: normal;
        padding : 20px 20px 20px 20px;
        border : 2px solid #4B5966;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
        }


.snazzyokay {
        color: #111; background: #AAA;
        font-size: 16px; font-weight: normal; font-family: 'Open Sans', Verdana, Arial, sans-serif;
        text-align: center; padding: 0; width: 60px; height: 30px;
        }

.snazzysubmit {
        color: #111; background: #AAA;
        font-size: 16px; font-weight: normal; font-family: 'Open Sans', Verdana, Arial, sans-serif;
        text-align: center; padding: 0; width: 100px; height: 30px;
        }








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

.bobslide {
        position: absolute;
        left: 200px;
        top : -90px;
        z-index: 200;
        color : #111;
        background-color: #FFF;
        width:600px;
        height:600px;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        font-size: 14px;
        font-weight: normal;
        border : 2px solid #4B5966;
        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; }