﻿/* == STYLESHEET FUNCTIONS
------------------------------------------------------------------------------------------------------------------------
- Defines the site-wide layout for core structure
- Defines page specific layout
- Overrides base HTML elements where required
----------------------------------------------------------------------------------------------------------------------*/

/* == CONTENTS
------------------------------------------------------------------------------------------------------------------------
- Main Layout
- Head Content
- Primary Navigation
- Main Content Layout
- Foot Content
- Text, Links, Images Etc.
- Individual Styled Blocks
----------------------------------------------------------------------------------------------------------------------*/

/* == Main Layout
----------------------------------------------------------------------------------------------------------------------*/

#wrap{width: 995px; margin: 0 auto; text-align: left;}
#wrap #head{float: left; position: relative; width: 995px; height: 173px; background: #fff;}
#wrap #mainContent{float: left; width: 995px;}
#wrap #foot{float: left; width: 995px;}


/* == Head Content
----------------------------------------------------------------------------------------------------------------------*/

#wrap #head .logo{position: absolute; top: 20px; left: 0;}
#wrap #head .tools{position: absolute; top: 16px; right: 0; text-align: right; width:500px;}
#wrap #head .tools span.date{font-size: 130%; color: #1d1160;}
#wrap #head .tools label{font-size: 110%; text-transform: uppercase; color: #787878; padding: 7px 6px 0 0; display:none;}
#wrap #head .tools input{border: 1px #ccc solid; padding: 5px; width: 200px; }
#wrap #head .tools input.btn{background:#1D1060 none repeat scroll 0 0;  border:0 none;font-size:85%;margin:5px 0 0;width:75px; color#FFF;}



/* == Primary Navigation
----------------------------------------------------------------------------------------------------------------------*/

#wrap #head #priNav{position: absolute; bottom: 15px; left: 0;}

#wrap #head #priNav ul, #wrap #head #priNav ul li, #wrap #head #priNav ul ul{list-style: none; margin: 0; padding: 0;}
#wrap #head #priNav ul{width: 995px; position: relative; z-index: 597; float: left;}

#wrap #head #priNav ul li{float: left; line-height: 1.3em; vertical-align: middle; zoom: 1;}
#wrap #head #priNav ul li{padding: 5px 0;}
#wrap #head #priNav ul li.hover, #wrap #head #priNav ul.dropdown li:hover{position: relative; z-index: 599;}
#wrap #head #priNav ul li.home{background: url(/_img/bg-nav-home.gif) center left no-repeat;}

#wrap #head #priNav ul li a{float: left; padding: 0 14px 0 15px; line-height: 1.3em; vertical-align: middle; zoom: 1; color: #b9ab97; font-size: 100%; background: url(/_img/bg-nav.gif) top right repeat-y;}
#wrap #head #priNav ul li a:hover, #wrap #head #priNav ul li.liOn a{color: #666; text-decoration: none;}

body:first-of-type #priNav ul li a{padding:0 13px 0 13px;} /*Safari position hack*/
#wrap #head #priNav ul li.liOn li a{text-decoration: none;}

#wrap #head #priNav ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 200px; background: #fff; padding-bottom: 7px; border-top: 10px #1fb4db solid; cursor: pointer;}
#wrap #head #priNav ul ul li {float: left; clear: both; width: 100%;}
#wrap #head #priNav ul ul li a{float: left; width: 100%; font-size: 80%; color: #40badf; margin: 0; padding: 0 5px; background-image: none; cursor: pointer;}
#wrap #head #priNav ul ul li a:hover{color: #321f61;}

#wrap #head #priNav ul ul ul{top: -10px; left: 99.9%;}

#wrap #head #priNav ul li:hover > ul{visibility: visible;}

@media screen and (-webkit-min-device-pixel-ratio:0){#wrap #head #priNav ul li a{padding: 0 13px;}}


/* == Main Content Layout
----------------------------------------------------------------------------------------------------------------------*/

#wrap #mainContent .imagebanner{float: left; width: 995px; margin: 0 0 20px 0;}
#wrap #mainContent .imagebanner p{margin: 0;}

#wrap #mainContent .leftCol{float: left; width: 220px;}
#wrap #mainContent .centreCol{float: left; display: inline; width: 505px; margin: 0 30px;}
#wrap #mainContent .rightCol{float: left; width: 210px;}


/* == Foot Content
----------------------------------------------------------------------------------------------------------------------*/

#wrap #foot .info{background: #b2e9f5; padding: 10px; margin: 30px 0 0 0; font-size: 90%; color: #000; line-height: 1.6em;}
#wrap #foot .info a{font-size: 100%; color: #000;}
#wrap #foot .info a.big{font-size: 115%;}
#wrap #foot .info a.bigger{font-size: 130%;}

#wrap #foot .credits{font-size: 80%; text-transform: uppercase; padding: 10px 0; color: #787878;}
#wrap #foot .credits a{font-size: 100%; color: #787878;}


/* == Text, Links, Images Etc.
----------------------------------------------------------------------------------------------------------------------*/

#wrap #mainContent .centreCol .quote{background: url(/_img/bg-centrequote.gif) no-repeat top left; padding: 0 0 0 55px; margin: 0 0 15px 0; font-size: 22px; font-weight: bold; font-family: Myriad, 'Myriad Web', 'Myriad Web Pro';}
#wrap #mainContent .centreCol .quote p{margin: 0; line-height: normal;}

#wrap #mainContent .centreCol ul li{list-style: circle;}

#wrap #mainContent .leftCol p:first-child{margin: 0;}

#wrap #mainContent .centreCol ul{margin: 0 0 0 15px;}

#wrap #mainContent .centreCol ul.searchListing li{list-style: none;}
#wrap #mainContent .centreCol ul.searchListing img {margin:0 20px 20px 0px}
#wrap #mainContent .centreCol ul.searchListing h3 a:hover {text-decoration:none}


/* == Individual Styled Blocks
----------------------------------------------------------------------------------------------------------------------*/

#wrap #mainContent .fullCol{width: 995px; margin-top: 20px}

#wrap #mainContent .leftCol .signup{background: #b2e9f5; margin: 5px 0 0 0; padding: 15px 10px; float:left;}
#wrap #mainContent .leftCol .signup h4{background-image: url(/_img/bg-h4-signup.gif); margin: 0 0 7px 0;}
#wrap #mainContent .leftCol .signup p{margin: 0 0 10px 0; color: #1d1160; font-size: 110%;}
#wrap #mainContent .leftCol .signup input{width: 187px; border: 1px #999 solid; padding: 3px 5px; margin: 0 0 5px 0;}
#wrap #mainContent .leftCol .signup input.btn{width: 75px; background: #1D1060; margin: 5px 0 0 0; font-size: 85%; border: 0;}

#wrap #mainContent .leftCol .infiniteCarousel{width: 220px; position: relative; float:left; min-height: 360px; height:auto !important; height: 360px;}
#wrap #mainContent .leftCol .infiniteCarousel .wrapper{width: 220px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */ overflow: auto; height: auto; min-height: 340px; _height: 340px; margin: 0px; position: absolute; top: 10px; margin-left:-10px; float: left;}
#wrap #mainContent .leftCol .infiniteCarousel h3{font-size: 110%; border-bottom: 3px solid #8FD8F8; float: left; width: 220px;}
#wrap #mainContent .leftCol .infiniteCarousel ul a img{border: 5px solid #000; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
#wrap #mainContent .leftCol .infiniteCarousel .wrapper ul{width: 9999px; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0; position: absolute; top: 0;}
#wrap #mainContent .leftCol .infiniteCarousel ul{margin:0;}
#wrap #mainContent .leftCol .infiniteCarousel ul li{display:block; float:left; padding: 0 10px; height: auto; width: 220px;}
#wrap #mainContent .leftCol .infiniteCarousel ul li a img{display:block;}
#wrap #mainContent .leftCol .infiniteCarousel .portrait{width: 123px; height: 136px; padding: 12px 0 0 14px; background: url(/_img/bg-frame.gif) no-repeat top left;}
#wrap #mainContent .leftCol .infiniteCarousel .portrait img{width: 110px; height: 122px;}
#wrap #mainContent .leftCol .infiniteCarousel .arrow{display: block; height: 36px; width: 37px; background: url(_img/arrow.png) no-repeat 0 0; text-indent: -999px; position: absolute; top: -20px; cursor: pointer; display:none;}
#wrap #mainContent .leftCol .infiniteCarousel .forward{background-position: 0 0; right: 0;}
#wrap #mainContent .leftCol .infiniteCarousel .back{background-position: 0 -72px; left: 0;}
#wrap #mainContent .leftCol .infiniteCarousel .forward:hover{background-position: 0 -36px;}
#wrap #mainContent .leftCol .infiniteCarousel .back:hover{background-position: 0 -108px;}

#wrap #mainContent .centreCol .homeNews .paging, #wrap #mainContent .centreCol .homeNews .pagingClr{display: none;}
#wrap #mainContent .centreCol .homeNews ul.homeNewsList{width: 505px; margin: 15px 0; padding: 0;}
#wrap #mainContent .centreCol .homeNews ul.homeNewsList li{width: 225px; margin: 0 25px 10px 0; padding: 0; list-style: none; border-bottom: 2px #ccc dotted; vertical-align: top; display: -moz-inline-stack; display: inline-block; _overflow: hidden; zoom: 1; *display: inline;}
#wrap #mainContent .centreCol .homeNews ul.homeNewsList li h2{font-size: 17px; margin: 10px 0 0 0;}
#wrap #mainContent .centreCol .homeNews ul.homeNewsList li h2 a{color: #1d1160; text-transform: none;}
#wrap #mainContent .centreCol .homeNews ul.homeNewsList li p{margin: 0 0 10px 0;}

#wrap #mainContent .centreCol .paging{float: right; text-align: right; font-size: 90%;}
#wrap #mainContent .centreCol .paging .text{display: none;}
#wrap #mainContent .centreCol .paging .pg ul{margin: 3px 0 0 0;}
#wrap #mainContent .centreCol .paging .pg ul li{display: inline; margin: 0 2px; list-style: none;}
#wrap #mainContent .centreCol .paging .pg ul li.det{margin: 0 5px 0 0;}
#wrap #mainContent .centreCol .paging .pg ul li a{padding: 0 2px; border: 1px #00AFD8 solid; color: #666;}
#wrap #mainContent .centreCol .paging .pg ul li a:hover, #wrap #mainContent .centreCol .paging .pg ul li a.on{background: #00AFD8; color: #fff;}
#wrap #mainContent .centreCol .mainNewsList{margin: 0; padding: 0;}
#wrap #mainContent .centreCol .mainNewsList li{margin: 0 0 20px 0; list-style: none;}
#wrap #mainContent .centreCol .mainNewsList li h2{color: #00AFD8; margin: 0;}
#wrap #mainContent .centreCol .mainNewsList li h2 a{color: #1D1160;}

#wrap #mainContent .centreCol .imageviewer{padding: 0; border: 1px #00B6DE dotted; border-width: 1px 0;}
#wrap #mainContent .centreCol .imageviewer ul{margin: 0; padding: 0;}
#wrap #mainContent .centreCol .imageviewer li{display: inline; margin: 0; padding: 0; list-style: none;}
#wrap #mainContent .centreCol .imageviewer li a{float: left; border: 1px #ccc solid; margin: 7px 5px 7px 0;}
#wrap #mainContent .centreCol .imageviewer li a:hover{border: 1px #00B6DE solid;}

#wrap #mainContent .centreCol table.timetable tr td.day, table.timetable tr td.period, table.timetable tr td.content{background: url(/_img/timetable/bg-timetable.gif) repeat-x  top left #63C8F6; color: #fff; font-size: 90%; font-weight: bold;}
#wrap #mainContent .centreCol table.timetable tr td.period{background: #999; text-align: center;}
#wrap #mainContent .centreCol table.timetable tr td.content{background: url(/_img/timetable/bg-timetable-content.gif) repeat-x top left #F1F0F0; color: #666;}

#wrap #mainContent .rightCol ul.linklist{margin: 0; padding: 0;}
#wrap #mainContent .rightCol ul.linklist li{background: url(/_img/list-linklist.gif) no-repeat top left; padding: 0 0 0 10px; margin: 10px 0;}


/* == Thickbox Styling
----------------------------------------------------------------------------------------------------------------------*/

#TB_overlay{position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%;}
.TB_overlayMacFFBGHack {background: url(/_img/macFFBgHack.png) repeat;}
.TB_overlayBG{background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75;}
* html #TB_overlay{position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}
#TB_window{position: fixed; background: #ffffff; z-index: 102; color:#000000; display:none; border: 4px solid #525252; text-align:left; top:50%; left:50%; font-size: 90%;}
* html #TB_window {position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}
#TB_window img#TB_Image{display:block; margin: 15px 0 0 15px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #666; border-left: 1px solid #666;}
#TB_caption{height:25px; padding:7px 30px 10px 25px; float:left;}
#TB_closeWindow{height:25px; padding:11px 25px 10px 0; float:right;}
#TB_closeAjaxWindow{padding:7px 10px 5px 0; margin-bottom:1px; text-align:right; float:right;}
#TB_ajaxWindowTitle{float:left; padding:7px 0 5px 10px; margin-bottom:1px;}
#TB_title{background-color:#e8e8e8; height:27px;}
#TB_ajaxContent{clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em;}
#TB_ajaxContent.TB_modal{padding:15px;}
#TB_ajaxContent p{padding:5px 0px 5px 0px;}
#TB_load{position: fixed; display:none; height:13px; width:208px; z-index:103; top: 50%; left: 50%; margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */}
* html #TB_load{position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}
#TB_HideSelect{z-index:99; position:fixed; top: 0; left: 0; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; height:100%; width:100%;}
* html #TB_HideSelect{position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}
#TB_iframeContent{clear:both; border:none; margin-bottom:-1px; margin-top:1px; _margin-bottom:1px;}


/* == Form Styling
----------------------------------------------------------------------------------------------------------------------*/

#wrap #mainContent .centreCol .errors{min-height: 40px; _height: 40px; background: url(/_img/bg-errorbox.gif) no-repeat 7px center #f0f0f0; border: 1px #ccc dashed; margin: 0 0 20px 0; padding: 10px 10px 10px 70px; font-size: 90%; font-weight: bold; color: #FF2F4B;}
#wrap #mainContent .centreCol .errors li{list-style: none; margin: 0 0 0 10px;}
#wrap #mainContent .centreCol .success{background: url(/_img/bg-successbox.gif) no-repeat 7px center #f0f0f0;}
#wrap #mainContent .centreCol label{width: 145px; margin: 5px 0;}
#wrap #mainContent .centreCol input, #wrap #mainContent .centreCol textarea{width: 270px; border: 1px #999 solid; padding: 5px; margin: 3px 0; background: #fff;}
#wrap #mainContent .centreCol textarea{width: 270px; color: inherit; font-size: 100%;}
#wrap #mainContent .centreCol input.btn{width:auto; background: #1D1060; margin: 5px 0 0 0; font-size: 85%; border: 0;}

#wrap #mainContent .centreCol .donateform input{width: 187px; border: 1px #ccc solid; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
#wrap #mainContent .centreCol .donateform input.btn{width: auto;}
#wrap #mainContent .centreCol .donateform span.hidechk{display: none;}
#wrap #mainContent .centreCol .donateform select{width: 55px; padding: 4px 3px; margin: 3px 5px 0 0; *margin: 7px 5px 0 0; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
#wrap #mainContent .centreCol .donateform select.year{width: 79px;}
#wrap #mainContent .centreCol .donateform .fakecheck{float: left; display: block; width: 28px; height: 28px; margin: 3px 0 0 0; padding: 0; background: url(/_img/checkbox.gif) no-repeat; text-decoration: none;}
#wrap #mainContent .centreCol .donateform .fakecheck:hover{}
#wrap #mainContent .centreCol .donateform .fakechecked{background-position: 0 -28px;}

#wrap .recaptchatable .recaptcha_r1_c1, #wrap .recaptchatable .recaptcha_r2_c1, #wrap .recaptchatable .recaptcha_r2_c2,
#wrap .recaptchatable .recaptcha_r3_c1, #wrap .recaptchatable .recaptcha_r3_c2, #wrap .recaptchatable .recaptcha_r3_c3,
#wrap .recaptchatable .recaptcha_r4_c1, #wrap .recaptchatable .recaptcha_r4_c2, #wrap .recaptchatable .recaptcha_r4_c4,
#wrap .recaptchatable .recaptcha_r7_c1, #wrap .recaptchatable .recaptcha_r8_c1
{background-image: url(http://api.recaptcha.net/img/white/sprite.png);}
 

/* == Hint Box Styling
----------------------------------------------------------------------------------------------------------------------*/

.hintbox{background: #00b6de; color: #fff; width: 160px; overflow: hidden; font-size: 90%; text-align: left;}
.hintbox p{margin: 10px;}
.hintbox .tl, .hintbox .tr, .hintbox .bl, .hintbox .br{background: url(/_img/bg-hintbox.gif) 0 0; width: 10px; height: 10px; font-size: 0;}
.hintbox .tl, .hintbox .bl{float: left;}
.hintbox .tr, .hintbox .br{float: right;}
.hintbox .tr{background-position: -10px 0;}
.hintbox .bl{background-position: 0 10px;}	
.hintbox .br{background-position: -10px 10px;}
.hintbox .body{clear: both; padding: 0 10px; overflow: hidden;}
* html .hintbox .body{height: 1%;}

/* == Video
----------------------------------------------------------------------------------------------------------------------*/
.videoPlayer{padding: 10px; background-color: #ececec; border: solid 1px #ccc; text-align:center; margin-top: 15px;}