﻿/* == 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;z-index:200; width: 995px; height: 200px; background: #fff;}
#wrap #mainContent{float: left; width: 995px; position: relative;z-index:100;}
#wrap #foot{float: left; width: 995px;}


/* == Head Content
----------------------------------------------------------------------------------------------------------------------*/

#wrap #head .logo{position: absolute; top: 40px; left: 0;}
#wrap #head .tools{position: absolute; top: 100px; right: 150px; text-align: right; width:300px;}
#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;}
#wrap #head .makeDonation{position: absolute; right:15px;top:50px;}
#wrap #head .makeDonation img{width:89px;height:87px;}
#wrap #head span.date{position: absolute; right:15px;top:15px;font-size: 130%; color: #1d1160;}


/* == 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.hover, #wrap #head #priNav ul.dropdown li:hover{position: relative; z-index: 599;}
#wrap #head #priNav ul li.Homehome{background: url(/_img/bg-nav-home.gif) center left no-repeat;}
#wrap #head #priNav ul li.liOn a{color: #1d1060; text-decoration: none;font-weight:bold;padding:0 13px;}
#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{color:#00b6de;}

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 li.liOn ul, #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 li.liOn ul li, #wrap #head #priNav ul ul li {float: left; clear: both; width: 100%;}
#wrap #head #priNav ul li.liOn ul li a, #wrap #head #priNav ul ul li a{float: left; width: 95%; font-size: 80%; color: #40badf; margin: 0; padding:5px; background-image: none; cursor: pointer;}
#wrap #head #priNav ul li.liOn ul li a:hover, #wrap #head #priNav ul ul li a:hover{color: #fff;background:#00b6de;}

#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:100%;margin: 0 0 20px 0;}

#wrap #mainContent .leftCol{float: left; width: 220px;}
#wrap #mainContent .centreCol{float: left; display: inline; width: 480px; margin: 0 30px;}
#wrap #mainContent .rightCol{float: right; width: 230px;}

/* == Banner
----------------------------------------------------------------------------------------------------------------------*/
#banner{float:left;}
#homeBanner {float:left;width:740px;margin-right:25px;height:280px;overflow:hidden;}
.slider{display:inline-block;overflow:hidden;}
.slider .content{float:left;display:none;height:280px;overflow:hidden;}
.slider .content h2{color:#fff;font-family: Myriad Pro, Arial;}
.slider .content p{color:#fff;font-size:90%;}
.slider .content img{float:right;}
.slider a{color:#FFFFFF;font-size:100%;font-weight:bold;text-transform:none;}
.slider .content a.btn{background:#fff;font-size:90%;margin-top:20px;float:left;}
.slider .content .text{float:left;height:240px;margin:20px 0;width:300px;padding:0 10px;border-left:1px dotted #FFFFFF;}
.click{float:left;width:40px;height:280px;cursor:pointer;}
.set1{float:left;background:#F26631 url(/_img/banner-no1.gif) no-repeat top left;}
.set2{float:left;background:#B92F92 url(/_img/banner-no2.gif) no-repeat top left;}
.set3{float:left;background:#8CC63F url(/_img/banner-no3.gif) no-repeat top left;}
.set1 a.btn{color:#F26631;}
.set2 a.btn{color:#B92F92;}
.set3 a.btn{color:#8CC63F;}

/* == 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{width: 200px;padding:10px;margin: 0 0 15px; float:left;background:#D9F1F7;}
#wrap #mainContent .leftCol .signup h2{margin:0;padding-left:20px;background:url(/_img/arrow-lightblue.gif) no-repeat left 8px;}
#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{float:left;background:#EDEAE5;margin:0 0 10px;height:330px;padding:0 0 5px;position:relative;width:220px;}
#wrap #mainContent .leftCol .infiniteCarousel .wrapper{width: 198px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */padding:0 10px; overflow: hidden; height: 330px;  }
#wrap #mainContent .leftCol .infiniteCarousel .wrapper div{margin:0 10px;}
#wrap #mainContent .leftCol .infiniteCarousel h3{font-size: 110%; border-bottom: 3px solid #8FD8F8; float: left; width: 220px;}
#wrap #mainContent .leftCol .infiniteCarousel .portrait{ width: 110px; height: 122px;padding: 12px 15px;margin:10px 0 0 20px; background: url(/_img/bg-frame.gif) no-repeat top left;}
#wrap #mainContent .leftCol h4{color:#fff; margin:0 !important;}
#wrap #mainContent .leftCol div.hr{border:none;}


#wrap #mainContent .centreCol .homeNews .paging, #wrap #mainContent .centreCol .homeNews .pagingClr{display: none;}
#wrap #mainContent .centreCol .homeNews ul.homeNewsList{width: 485px; margin: 15px 0; padding: 0;}
#wrap #mainContent .centreCol .homeNews ul.homeNewsList li{ margin: 0 0 10px 0; padding: 0 0 10px 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 .summary{float:right;width:125px;}
#wrap #mainContent .centreCol .homeNews ul.homeNewsList li p{margin: 0 0 10px 0;}
#wrap #mainContent .centreCol .homeNews ul.homeNewsList li img{float:left;margin-right:12px;}

#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 0 5px;}
#wrap #mainContent .rightCol ul.linklist li{background: url(/_img/list-linklist.gif) no-repeat 5px 8px; padding: 5px 0 5px 15px; margin:0;}
#wrap #mainContent .rightCol h4{color:#fff;margin:0 !important;}
#wrap #mainContent .rightCol div.hr{border:none;}


/* == Thickbox Styling
----------------------------------------------------------------------------------------------------------------------*/

#TB_overlay{position: fixed; z-index:200; 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: 200; 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:300; 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;z-index:300;}
.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;}
.videoPlayer.homepage{float:left;background-color: #F5F2EF; text-align:left;margin-bottom:10px;width:465px;}
.videoPlayer.homepage embed{float:left;margin-right:12px;display:inline;border:1px #ccc solid;}
.videoPlayer.homepage .text{width:250px;float:right;}
.videoPlayer.homepage .text h2{margin:0;}
.videoPlayer.homepage .text p{margin:0 0 10px 0;}
img.social{float:left;margin:10px 0;}

/* == Twitter & Facebook
----------------------------------------------------------------------------------------------------------------------*/
ul.socialNav{float:left;width:230px;margin:0;}
ul.socialNav li{margin:0;color:#1D1160;font-weight:bold;background:#B9AB97 url(/_img/arrow-social.gif) no-repeat 10px 10px;padding:5px 20px 0 30px;}
ul.socialNav li.on{background:#EDEAE5 url(/_img/arrow-social-on.gif) no-repeat 10px 10px;}
.socialBox{float:left;width:210px;padding:10px;background:#EDEAE5;}
.socialBox #twitter{height:187px;border-bottom:#D2CFDF dotted 1px;overflow:auto;}
.socialBox #twitter ul#tweet{font-size:80%;margin:0px;}
.socialBox #twitter ul#tweet li{margin:0 0 10px 0;}
.socialBox #twitter ul#tweet li#loader{text-align:center;margin:30px 0;}
.socialBox a.joinTwitter{font-size:80%;color:#1D1160;}
.socialBox #facebook{height:187px;border-bottom:1px solid #94A3C4;}
.socialBox .links{float:left;width:210px;padding-top:10px;}
