/* == Project Details
------------------------------------------------------------------------------------------------------------------------
- Author: WECSS
- Author URL: www.wecss.co.uk
- Last Updated: 30/11/08
----------------------------------------------------------------------------------------------------------------------*/

/* == 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
- Primary Navigation
- Foot Content
- Home Layout
- Internal Layout

[Widget Styles:]

- Tooltips
- Screen Messages
- Price Calculator
- Tabs
----------------------------------------------------------------------------------------------------------------------*/


/* == Main Layout
----------------------------------------------------------------------------------------------------------------------*/

#toolBeltHold{background: transparent url(/_img/line-alt.gif) bottom left repeat-x; height: 45px;color: #fff;}
#toolBelt{background: #111111 url(/_img/pattern-bg.gif) top left; height: 40px;border-top: solid 3px #980535;color: #fff;}
#wrap{width: 995px;margin: 0 auto;text-align: left;}
#wrap #head{float: left; width: 995px;background: url(/_img/line.gif) bottom left repeat-x;}
#wrap #mainContent{float: left; width: 995px;background: url(/_img/gradient-divide.gif) top center no-repeat;padding-top: 30px;}
#foot{background: #111111 url(/_img/pattern-bg-dark.gif) top left;}
#footBase{height: 30px;background: #000 url(/_img/gradient-colour.gif) bottom left repeat-x; color: #fff;padding-bottom: 8px;}

/** content divisions **/
#wrap #mainContent #templateOne .zoneOne{float: left;width: 400px;margin: 0 0 0 30px;display: inline;}
#wrap #mainContent #templateOne .zoneTwo{float: right;width: 400px;margin: 0 30px 0 0;display: inline;}

#wrap #mainContent #templateTwo .zoneOne{float: left;width: 620px;margin: 0 0 0 30px;display: inline;}
#wrap #mainContent #templateTwo .zoneTwo{float: right;width: 250px;margin: 0 30px 0 0;display: inline;}

#wrap #mainContent #templateTwo .zoneOne .splitLeft{float: left;width: 300px;}
#wrap #mainContent #templateTwo .zoneOne .splitRight{float: right; width: 300px;}

/* == Head Content
----------------------------------------------------------------------------------------------------------------------*/

#wrap #head .logo{float: left;margin: 20px 0 0px 30px;}
#toolBelt .inner{width: 995px;margin: 0 auto;text-align: right;height: 40px;line-height: 40px;}
#toolBelt .inner a{color: #666; border: 0;font-size: 95%;font-weight: bold; text-decoration: none;}

/* == Primary Navigation
----------------------------------------------------------------------------------------------------------------------*/

#wrap #head ul#priNav{float: right; list-style: none;margin: 30px 25px 20px 0;}
#wrap #head ul#priNav li{float: left;}
#wrap #head ul#priNav li a{float: left; width: 80px; height: 30px; background: url(/_img/nav-bg.gif) top left no-repeat; color: #666; text-decoration: none;font-weight: bold;font-size: 100%;border: 0;text-align: center;padding: 7px 0 0 0;margin: 0 10px;}
#wrap #head ul#priNav li a:hover, #wrap #head ul#priNav li.on a{background: url(/_img/nav-bg-on.gif) top left no-repeat;color: #fff;}

/* == Foot Content
----------------------------------------------------------------------------------------------------------------------*/

#foot .inner{width: 995px; margin: 0 auto; text-align: left;}
#foot .inner .innerLeft{float: left; width: 630px;margin-left: 30px;display: inline;}
#foot .inner .innerRight{float: right; width: 208px;margin: 0px 30px 0px 0;display: inline;background: #000;border: solid 1px #222;border-width: 0px 1px 0px 1px;padding: 0 20px 10px 20px;}
#foot .inner h2{color: #666; background: none;border-bottom: solid 1px #222;margin: 10px 0 10px 0;padding: 0 0 10px 0;}

#foot .innerLeft label{color: #ccc; font-weight: bold;}
#foot .innerLeft .input{border: solid 1px #222;padding: 10px 20px;font-size: 170%;letter-spacing: -1px;background: #000;margin-bottom: 10px;}
#foot .innerLeft .textArea{border: solid 1px #222;padding: 10px;background: #000;margin-bottom: 10px;height: 82px;font-family: Arial; color: #333;}

#foot .inner .innerRight ul{float: left;margin: 0 0 10px 0;width: 190px;}
#foot .inner .innerRight ul li{float: left; width: 208px;list-style-image: none;margin: 0;}
#foot .inner .innerRight ul li a{float: left; width: 208px;text-decoration: none; color: #666;font-weight: normal;font-size: 100%;padding: 4px 0 4px 0px;border-bottom: solid 1px #111;font-style: italic;font-family: Georgia; font-variant: small-caps}
#foot .inner .innerRight ul li a:hover{color: #fff;}

#footBase .inner{width: 965px; margin: 0 auto; text-align: left;height: 30px; line-height: 30px;font-size: 95%;padding: 0 0 0 30px;color: #333;}
#footBase .inner a{color: #333; border: 0;}

/* == Home Layout
----------------------------------------------------------------------------------------------------------------------*/

#wrap #mainContent #templateOne .panel{float: left; width: 400px;margin: 0 0 20px 0;min-height: 275px; height: auto !important; height: 275px;}
#wrap #mainContent #templateOne .panel .panelContent{background: url(/_img/gradient-divide-sml.gif) top left no-repeat;}

/* == Internal Layout
----------------------------------------------------------------------------------------------------------------------*/

#wrap #mainContent #templateTwo .zoneOne .zoneContent{background: url(/_img/gradient-divide-content.gif) top center no-repeat;padding-top: 30px;}
#wrap #mainContent #templateTwo .zoneTwo .zoneContent{float: left;padding-top: 20px;}

#wrap #mainContent #templateTwo .zoneOne h2{margin: 0 0 30px 0;}
#wrap #mainContent #templateTwo .zoneOne .leader{border-top: solid 10px #ddd;border-bottom: solid 10px #ddd;padding: 10px 0;}

#wrap #mainContent #templateTwo .zoneOne ul.process{float: left;width: 180px;margin: 10px 40px 10px 0;text-align: center;list-style-image: none;}
#wrap #mainContent #templateTwo .zoneOne ul.processLast{margin-right: 0;}
#wrap #mainContent #templateTwo .zoneOne ul.process li{background: url(/_img/arrow-down.gif) center bottom no-repeat;padding: 0 0 20px 0;}
#wrap #mainContent #templateTwo .zoneOne ul.process li.last{background: none; padding: 0;}

#wrap #mainContent #templateTwo .zoneTwo .zoneContent .promo{float: left; width: 228px;border: solid 1px #CECECE;background: #FFFFFF url(/_img/promo-gradient.gif) top left repeat-x;padding: 10px 10px 10px 10px;margin: 10px 0 10px 0;}
#wrap #mainContent #templateTwo .zoneTwo .zoneContent .promo h4{font-size: 120%;font-weight: bold;letter-spacing: -1px;margin: 0 0 10px 0;z-index: 2;color: #B00037;}
#wrap #mainContent #templateTwo .zoneTwo .zoneContent .promo .icon{float: left; margin: 0 8px 3px 0;}
#wrap #mainContent #templateTwo .zoneTwo .zoneContent .promo ul{margin: 0;font-size: 95%;list-style-image: none;}
#wrap #mainContent #templateTwo .zoneTwo .zoneContent .promo ul li{margin: 0;padding-top: 3px;padding-bottom: 3px;}

#wrap #mainContent #templateTwo .zoneTwo .zoneContent ul.checklist{margin: 0px; list-style-image: none;}
#wrap #mainContent #templateTwo .zoneTwo .zoneContent ul.checklist li{margin: 0;padding: 0;border-top: solid 1px #eee;width: 100%;}
#wrap #mainContent #templateTwo .zoneTwo .zoneContent ul.checklist li span{display: block;background: url(/_img/tick.gif) center left no-repeat;padding: 4px 0 4px 25px;font-style: italic;font-weight: bold;color:#666;font-size: 95%;}

#wrap #mainContent #templateTwo .zoneOne ol.orderSteps li{border-bottom: solid 1px #ddd;padding: 0 0 8px 0; margin: 0 0 8px 0;font-style: italic;color: #980535;}
#wrap #mainContent #templateTwo .zoneOne ol.orderSteps li span{color: #333;}

/* == Tooltips
----------------------------------------------------------------------------------------------------------------------*/
a.tooltip{border: 0;float: right;margin: 0 10px 0 0;cursor: help;}
a.tooltip span{display: none;}
a.tooltip:hover {border:0; position:relative; z-index:300; text-decoration:none;cursor:help;color: #9A0536;}
a.tooltip:hover span{display: block;position: absolute; top:-15px; right:40px;z-index:500; background: #EAF1F5; width: 150px;padding: 5px;color: #333;border: solid 5px #BFCAD1;letter-spacing: 0px;}
h3 a.tooltip:hover span{font-size: 58%;}

/* == Screen Messages
----------------------------------------------------------------------------------------------------------------------*/

.errorMsg{margin: 10px 0;border: solid 1px #CB2026; padding: 20px 10px 20px 90px;font-weight: bold; color: #CB2026;background: #F6CBCA url(/_img/warning.gif) center left no-repeat;}
.successMsg{border: solid 1px #8FAD3D; padding: 20px 10px 20px 60px;font-weight: bold; color: #8FAD3D;background: #EEF4D4 url(/_img/success.gif) center left no-repeat;}
.msgInfo{border: solid 1px #ddd;padding: 5px;background: #EFEFEF;font-family: Times New Roman;font-size: 120%;line-height: 1.3em;}

/* == Price Calculator
----------------------------------------------------------------------------------------------------------------------*/

#wrap #mainContent #templateTwo .zoneOne .scrollHolder{float: left;width: 600px;display: inline;position: relative;height: 70px;}
#wrap #mainContent #templateTwo .zoneOne .scrollHolder label{width:120px;margin: 1px 0 0 0;float: left;background: url(/_img/bracket-sml.gif) center right no-repeat;height: 62px;line-height: 62px;}
#wrap #mainContent #templateTwo .zoneOne .scrollHolder .scrollBox{float:left; width: 455px;}
#wrap #mainContent #templateTwo .zoneOne .scrollHolder .lblKey{float:left;background: url(/_img/icon-bubble.gif) top left no-repeat;width: 30px; height: 27px;text-align: center; padding: 3px 0 0 0;font-style: italic;font-family: Georgia;}
#wrap #mainContent #templateTwo .zoneOne .scrollHolder .slider{position: absolute;background: url(/_img/slider-bg.gif) center left repeat-x;height:30px;width:253px;border-right: solid 1px #ccc;border-left: solid 1px #ccc;top: 35px;}
#wrap #mainContent #templateTwo .zoneOne .scrollHolder .handle{position: absolute;cursor: move;z-index: 100;height: 30px;width: 30px;background: url(/_img/slider-button.gif) top left no-repeat;}

#wrap #mainContent #templateTwo .zoneOne #holderTime .lblKey{margin-right: 15px;}
#wrap #mainContent #templateTwo .zoneOne #holderPages .lblKey{margin-right: 17px;}
#wrap #mainContent #templateTwo .zoneOne #holderPages .label-end{margin-right: 0;}
#wrap #mainContent #templateTwo .zoneOne #holderPages .slider{width:450px;}

#wrap #mainContent #templateTwo .zoneOne .price{float: left; width: 580px;height: 300px;text-align: center;font-size: 2000%;font-family: Georgia;color: #bbb;letter-spacing: -10px;background: url(/_img/price-bg.gif) top left no-repeat;margin: 12px 0 0 0;position: relative;}
#wrap #mainContent #templateTwo .zoneOne .price .sign{color: #ddd;}

/* == Tabs
----------------------------------------------------------------------------------------------------------------------*/

#wrap #mainContent #templateTwo .zoneOne ul.tabs{margin: 10px 0;font-size: 160%;letter-spacing: -1px;font-weight: normal; height: 55px;color: #333;background: url(/_img/tabs-bg.gif) bottom left repeat-x;float: left;width: 100%;}
#wrap #mainContent #templateTwo .zoneOne ul.tabs li{float: left; list-style: none;margin: 0;}
#wrap #mainContent #templateTwo .zoneOne ul.tabs li a{float: left;height: 35px;padding: 20px 0 0 0;color: #999;width: 135px;text-align: center;text-decoration: none;}
#wrap #mainContent #templateTwo .zoneOne ul.tabs li a.on{background: url(/_img/tab-on.gif) top left no-repeat;color: #333;}
#wrap #mainContent #templateTwo .zoneOne ul.tabs li a:hover{color: #980535;}