/* == STYLESHEET FUNCTIONS
------------------------------------------------------------------------------------------------------------------------
- Defines the site-wide layout for core structure
- Defines reusable widget code
- Defines page specific layout
- Overrides base HTML elements where required
----------------------------------------------------------------------------------------------------------------------*/

/* == CONTENTS
------------------------------------------------------------------------------------------------------------------------
- Main Layout
- Head Content
- Navigation
- Foot Content

[Widget Styles:]

- Lead Feature
- Holders
- Screen Messages
- Featured Quotes
----------------------------------------------------------------------------------------------------------------------*/


/* == Main Layout
----------------------------------------------------------------------------------------------------------------------*/
#wrap{width: 950px;margin: 0 auto;text-align: left;background: #1b2a2d;}
#wrap #head{float: left; width: 950px;background: #1b2a2e url(/_img/head-bg.gif) top left repeat-y;}
#wrap #priNav{float: left;width: 950px;background: url(/_img/pixel-dark.gif) bottom left repeat-x;margin: 12px 0 0 0;}
#wrap #mainContent{float: left; width: 902px; padding: 10px 24px;}
#wrap #foot{float: left; width: 902px;background: #172629;border-bottom: solid 1px #6fa0a7;border-left: solid 2px #223438;border-right: solid 2px #223438;padding: 10px 22px 10px 22px;}

/** content divisions **/
#wrap #mainContent #templateOne .zoneOne{float: left; width: 624px;}
#wrap #mainContent #templateOne .zoneTwo{float: right; width: 265px; margin: 0 0 10px 0;}
#wrap #mainContent #templateOne .zoneOne .splitZone{width: 302px;}

#wrap #mainContent #templateTwo .zoneOne{float: left; width: 902px;}


/* == Head Content
----------------------------------------------------------------------------------------------------------------------*/
#wrap #head .logo{float: left; margin: 34px 0 0 22px;}


/* == Navigation
----------------------------------------------------------------------------------------------------------------------*/
#wrap #priNav ul{float: right;margin: 0;}
#wrap #priNav ul li{float: left;list-style-type: none;margin: 0;}
#wrap #priNav ul li a{float: left;color: #cdcdcd;text-decoration: none;padding: 0 8px 9px 8px;font-weight: bold;}
#wrap #priNav ul li a:hover, #wrap #priNav ul li.liOn a{color: #fff;background: url(/_img/nav-point.gif) bottom center no-repeat;}

#wrap #head #subNav{float: left; width: 902px;background: #1a363a;height: 40px; line-height: 40px;padding: 0 24px;}
#wrap #head #subNav .breadcrumb{float: left;}
#wrap #head #subNav .breadcrumb a{text-decoration: none;color: #a7a9aa;}
#wrap #head #subNav .breadcrumb a:hover{color: #fff;}
#wrap #head #subNav .breadcrumb span{padding: 0 5px; color: #e2be07;font-weight: bold;}

#wrap #head #subNav ul{float: right; margin: 0; height: 40px; line-height: 40px;}
#wrap #head #subNav ul li{margin: 0;list-style: none;display: inline;margin-left: 15px;}
#wrap #head #subNav ul li a{text-decoration: none;color: #72c5d2;font-weight: bold;padding-left: 18px;}
#wrap #head #subNav ul li a:hover, #wrap #head #subNav ul li.liOn a{color: #9ec911;background: url(/_img/nav-star.gif) center left no-repeat;}

#wrap #mainContent .zoneTwo ul{margin: 4px 0 4px 28px;}
#wrap #mainContent .zoneTwo ul li{list-style-image: url(/_img/nav-bullet.gif);font-size: 110%;margin: 0 0 8px 0;}
#wrap #mainContent .zoneTwo ul li a{font-weight: bold;color: #fff;text-decoration: none;}
#wrap #mainContent .zoneTwo ul li a:hover, #wrap #mainContent .zoneTwo ul li a.on{color: #9ec911;}


/* == Main Content
----------------------------------------------------------------------------------------------------------------------*/
#wrap #mainContent .inset, #wrap #mainContent .insetleft{float: right; margin: 0 0 10px 10px; padding: 1px; border: 1px #777 solid;}
#wrap #mainContent .insetleft{float: left; margin: 0 10px 10px 0;}

#wrap #mainContent .zoneOne ul li{list-style: url(/_img/starbullet.gif) outside;}

#wrap #mainContent .zoneOne p.leadtext{font-size: 130%; font-weight: bold; margin: 15px 0;}

#wrap #mainContent .zoneOne .pagebanner{padding: 1px; border: 1px #999 solid;}

#wrap #mainContent .zoneTwo .delegatequotes{float: left; height: 113px; *height: 126px;}
#wrap #mainContent .zoneTwo .delegatequotes ul, #wrap #mainContent .zoneTwo .delegatequotes ul li{list-style: none; margin: 0; padding: 0;}
#wrap #mainContent .zoneTwo .delegatequotes ul li{display: none; width: 265px;}
#wrap #mainContent .zoneTwo .delegatequotes ul li blockquote{margin: 0;}

#wrap #mainContent .zoneTwo .logoholder{height: 110px; *height: 130px; background: url(/_img/bg-logoholder.gif) #fff no-repeat bottom left; padding: 10px; *padding: 0 10px;}
#wrap #mainContent .zoneTwo .logoholder .innerfade{*margin: 10px 0;}
#wrap #mainContent .zoneTwo .logoholder ul{margin: 0; padding: 0;}
#wrap #mainContent .zoneTwo .logoholder ul li{display: none; list-style: none;}


/* == Foot Content
----------------------------------------------------------------------------------------------------------------------*/
#wrap #foot ul{float: left;margin: 0;}
#wrap #foot ul li{float: left;list-style-type: none;margin: 0;padding: 0 8px;border-right: 1px #c9cecf solid;}
#wrap #foot ul li a{text-decoration: none;font-size: 95%;color: #c9cecf;}
#wrap #foot ul li a:hover, #wrap #foot ul li.liOn a{text-decoration: underline; color: #fff;}
#wrap #foot ul li.last a{border: 0;}


/* == Widgets: Lead Feature
----------------------------------------------------------------------------------------------------------------------*/
.leadFeature{float: left; position: relative; width: 614px; height: 307px; margin: 0 0 10px 0; border: 5px #DADCD9 solid; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.leadFeature .rotate img{display: none;}
.leadFeature .controls{position: absolute; z-index: 10; bottom: 0; right: 0; background: #102427; opacity: 80; padding: 7px 10px 7px 15px; border: 2px #233C3F solid; border-width: 2px 0 0 2px;}
.leadFeature .controls a{float: left; display: inline; width: 52px; height: 15px; background: url(/_img/bg-controls-btn.gif) no-repeat top left; color: #fff; margin: 0 0 0 3px; text-align: right; padding: 0 6px 0 0; font-size: 90%; text-decoration: none;}
.leadFeature .controls a:hover, .leadFeature .controls a.activeSlide{background-image: url(/_img/bg-controls-btn-on.gif); color: #333;}
.leadFeature .controls p{margin: 0 0 5px 3px; font-size: 90%;}

/* This is because the 'find more' buttons are used to link to pages rather than control movement of images.
jQuery buttons still have to be generated to get the on state when the image rotates but the hard-coded buttons
are displayed as duplicates and the jQuery buttons hidden. By Tom 05/06/09*/
.leadFeature .controls a{display: none;}
.leadFeature .controls a.show{display: inline;}


/* == Widgets: Holders
----------------------------------------------------------------------------------------------------------------------*/
#wrap #mainContent .zoneOne .holder{background: #2f4145 url(/_img/holder-btm-wide.gif) bottom left no-repeat;padding: 5px 10px 10px 10px;}
#wrap #mainContent .zoneOne .splitZone .holder{background: #334549 url(/_img/holder-btm.gif) bottom left no-repeat;padding: 5px 10px 10px 10px;}
#wrap #mainContent .zoneTwo .holder{background: #334549 url(/_img/holder-btm-zone2.gif) bottom left no-repeat;padding: 5px 10px 10px 0px;}
#wrap #mainContent .zoneTwo .holder .summaryText{padding: 5px;background: #395156 url(/_img/holder-btm-light.gif) bottom left no-repeat;}
#wrap #mainContent .zoneTwo .noPad{padding: 5px 0 0 0;}


/* == Widgets: Screen Messages
----------------------------------------------------------------------------------------------------------------------*/
.msgInfo{background: #263f44;padding: 3px 5px;}


/* == Widgets: Featured Quotes
----------------------------------------------------------------------------------------------------------------------*/
.featuredQuotes div{float: left; display: none; width: 265px; height: 107px; background: url(/_img/homepagequotes/acorn.jpg) top left no-repeat; text-align: right;}
.featuredQuotes div p{float: left; margin: 20px 0 0 85px; width: 180px;display: inline;font-weight: bold;font-size: 105%;}
div.angrycustomer{background: url(/_img/homepagequotes/angry-customer.jpg) top left no-repeat;}
div.apple{background: url(/_img/homepagequotes/apple.jpg) top left no-repeat;}
div.chameleon{background: url(/_img/homepagequotes/chameleon.jpg) top left no-repeat;}
div.dove{background: url(/_img/homepagequotes/dove.jpg) top left no-repeat;}
div.dragon{background: url(/_img/homepagequotes/dragon.jpg) top left no-repeat;}
div.punkgirl{background: url(/_img/homepagequotes/punk-girl.jpg) top left no-repeat;}
div.stars{background: url(/_img/homepagequotes/stars.jpg) top left no-repeat;}
div.start{background: url(/_img/homepagequotes/start-button.jpg) top left no-repeat;}
div.tennisball{background: url(/_img/homepagequotes/tennis-ball.jpg) top left no-repeat;}


/* == Widgets: Twitter
----------------------------------------------------------------------------------------------------------------------*/
.tweet, .tweetlink{background: url(/_img/bg-tweet.gif) no-repeat 7px 12px #263F44; margin: 10px 0; padding: 10px 10px 10px 33px; border: 0;}
.tweetlink{background-image: none; padding: 5px 10px 5px 33px;}


/* == News Styling
----------------------------------------------------------------------------------------------------------------------*/
#wrap #mainContent .zoneOne ul.newsListHome, #wrap #mainContent .zoneOne ul.newsListHome li, #wrap #mainContent .zoneOne ul.newsListing, #wrap #mainContent .zoneOne ul.newsListing li{margin: 0; padding: 0; list-style: none; list-style-image: none;}
#wrap #mainContent .zoneOne ul.newsListing li p.title b{font-weight: normal; font-size: 90%; font-style: italic;}

#wrap #mainContent .zoneOne .paging .pg{float: right; text-align: right; margin: 20px 0 10px 0;}
#wrap #mainContent .zoneOne .paging .pg ul, #wrap #mainContent .zoneOne .paging .pg ul li{margin: 0; padding: 0; list-style: none;}
#wrap #mainContent .zoneOne .paging .pg ul li{float: left;}
#wrap #mainContent .zoneOne .paging .pg ul li.det{margin: 0 10px 0 0;}
#wrap #mainContent .zoneOne .paging .pg ul li a{display: inline; padding: 0 5px; background: #3B595F; color: #fff; text-decoration: none; margin: 0 0 0 3px;}
#wrap #mainContent .zoneOne .paging .pg ul li a:hover, #wrap #mainContent .zoneOne .paging .pg ul li a.on{background: #fff; color: #1A363A;}

#wrap .withBG .paging, #wrap .withBG .pagingClr{display: none;}


/* == The Training Connection Timeline
----------------------------------------------------------------------------------------------------------------------*/
#wrap #mainContent .zoneOne .trainingTimeline{float: left; margin: 20px 0 0 0; padding: 4px; font-size: 90%; background: #2F4145;}
#wrap #mainContent .zoneOne .trainingTimeline a{float: left; position: relative; text-decoration: none; margin: 0 6px 6px 0;}
#wrap #mainContent .zoneOne .trainingTimeline a.end{margin: 0 0 6px 0;}

#wrap #mainContent .zoneOne .trainingTimeline a img{border: 2px #3f5d63 solid; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -khtml-opacity:.70; -moz-opacity:.70; -ms-filter:"alpha(opacity=70)"; filter:alpha(opacity=70); opacity:.70;}
#wrap #mainContent .zoneOne .trainingTimeline a:hover img, #wrap #mainContent .zoneOne .trainingTimeline a.on img, #wrap #mainContent .zoneOne .trainingTimeline a.logo img{border: 2px #d9f36f solid; -moz-opacity:1; filter:alpha(opacity=100); opacity:1;}
#wrap #mainContent .zoneOne .trainingTimeline a.logo img{border: 2px #3f5d63 solid;}

#wrap #mainContent .zoneOne .trainingTimeline a span{display: block; position: absolute; color: #fff; top: 2px; left: 2px; padding: 2px 5px;}
#wrap #mainContent .zoneOne .trainingTimeline a:hover span, #wrap #mainContent .zoneOne .trainingTimeline a.on span{background: #d9f36f; color: #333; -webkit-border-radius-bottomright: 5px; -moz-border-radius-bottomright: 5px; border-radius-bottomright: 5px;}


/* == Contact Form
----------------------------------------------------------------------------------------------------------------------*/
#wrap #mainContent .zoneOne .contactform{margin: 20px 0 0 0;}
#wrap #mainContent .zoneOne .contactform label{float: left; display: inline; width: 90px; margin: 4px 20px 0 0;}
#wrap #mainContent .zoneOne .contactform input, #wrap #mainContent .zoneOne .contactform textarea{float: left; width: 250px; border: 1px #ccc solid; background: #666; color: #eee; padding: 5px 3px; margin: 3px 0;}
#wrap #mainContent .zoneOne .contactform textarea{width: 350px;}
#wrap #mainContent .zoneOne .contactform input.submit{width: 70px; color: #fff; background: #1A363A; font-weight: bold; border: 1px #666 solid;}

#wrap #mainContent .zoneOne .error{width: 80%; background: #333; border: 1px #666 solid; padding: 10px; margin: 20px 0; font-size: 90%; color: #fff;}
#wrap #mainContent .zoneOne .error p{color: #EA2024; font-weight: bold;}
#wrap #mainContent .zoneOne .error p.success{color: #9EC911;}