/*------------------------------------------------------------------ Site: brook.org.uk Version: 2.2 - 23/10/09 Copyright: ©2009 Jasper Interactive Template design: Jason Rainbird Studio www.jasonrainbird.com ------------------------------------------------------------------ */ /* ------------GLOBAL CSS RESET------------ */ *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0; } table { /*border-collapse:collapse;*/ border-spacing:0; } fieldset, img { border:0; } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; } caption, th { text-align:left; } h1, h2, h3, h5, h5, h6 { font-size:100%; } strong { font-weight: bold; } em { font-style: italic;} ol, ul, li { list-style:none; } * a { position:relative } /* Be Gone! IE6 links displaying over PNGs */ a img { border:none;} /* Be Gone! IE Blue img borders */ /* ------------LAYOUT PROPERTIES------------ */ * { padding:0; margin:0; } html, body {height: 100%;} body { word-wrap:break-word; margin: 0px; padding:0px; font: normal 12px/18px "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; color: #555; text-align:center; } #wrapper { min-height: 100%; margin: 0px auto; width: 1008px; text-align: left; background: #ffffff ; position:relative; padding:0px; } * html #wrapper {height: 100%;} /* IE 6 Minimum Height */ .clear { clear: both; } #menu { padding:0px 0 0 0; margin:0px; } #header { padding:0px 0 0 0; margin:0px 22px 0 22px; } #content { padding:0px; padding-bottom:250px; margin:0px 22px 0 22px; /* Height of the footer was 125px changed to 250 to add extra space to footer */ } #contentLeft { float:left; width:696px;} #contentRight { float:right; width:224px;} /* Added by Sean */ .bodyyp { background: transparent url("../images/back_youth.gif") repeat 0 0; } .bodyprof { background: transparent url("../images/back_prof.gif") repeat 0 0; } .bodyex { background: transparent url("../images/back_extra.gif") repeat 0 0; } /* ------------HEADER AND FOOTER LAYOUT ------------ */ #skip { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -999px; } /*#home { height:110px; width:100px; padding:0; position:absolute; left:82px; top:15px; }*/ #home { height:110px; width:100px; padding:0; position:absolute; left:82px; top:15px; z-index:10; } #home a img { border: 0px; text-decoration:none; } #toolbox ul { list-style: none ; float:right; padding:10px 0 0 0 ; } #toolbox li { display:inline; font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; font-weight:normal; font-size:11px; } #toolbox a { font-weight:normal; color: #0099DD; text-decoration:none; padding: 0px 5px 0px 4px; margin: 0; list-style: none; border-right: 1px solid #0099DD; } #toolbox a:hover {text-decoration: underline; } #toolbox .navEnd { border-right: 0px solid #0099DD; padding-right:0px; } /* Applied to the end of the menu to remove line */ #advanced { float:right; padding-top:10px; } #advanced a { font-weight:normal; font-size:10px; color: #0099DD; text-decoration:none; padding: 0px 5px 0px 4px; } #advanced a:hover {text-decoration: underline; } #searchBar {line-height:34px; width:964px; height:34px; background: transparent url("../images/tick_search.gif") no-repeat 0px top; padding: 0px 0px 0px 0px; } #searchBar h6 { float:right; font-family: "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size:16px; color: #FFF; margin-right:15px;} #searchbox { position:relative; float:right; background: url("../images/search_bg.gif") no-repeat left top; height:24px; width:234px; margin:5px 6px 5px 0; } /*#searchbox input#search {font-family: "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size:16px; color:#0099DD; border: 0; width: 190px; /* width of text-display area padding: 0px 0px 0px 10px; height: 22px; margin:0px; background-color:transparent; position:absolute; right:30px; top:2px; }*/ #searchbox input#mod_search_searchword {font-family: "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size:16px; color:#0099DD; border: 0; width: 190px; /* width of text-display area */ padding: 0px 0px 0px 10px; height: 22px; margin:0px; background-color:transparent; position:absolute; right:30px; top:2px; } #searchbox input#search[type="search"] {width: 200px;} * html div#searchbox input#search {background-attachment: fixed;} #searchbox input#edit-submit { position:absolute; right:0px; top:0px; margin: 0px 0px 0 0px; width: 29px;height: 24px; padding: 0; font-size: 0; border: 0; cursor: pointer; background: url("../images/search_butt_trans.gif") no-repeat 0 0;} /* #heroLaunch { position:relative; } */ #heroLaunch { position:relative; overflow: hidden; width: 100%;} #heroLaunch .tick { background:transparent url("../images/tick_hero.png") no-repeat 0 0;height:66px; width:215px; padding:0; position:absolute; left:0px; top:0px; z-index:0;} #heroLaunch #heroHead { height:40px; width:600px; padding:0; position:absolute; left:40px; bottom:13px; z-index:1; } #heroLaunch #heroHead p { font-family:/**/ "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size:28px; color:#FFF; padding: 0px 0px 0px 0px; margin: 0px; line-height: 20px;} #hero { width:718px; float:left; margin:4px 0 6px 0; padding: 0 0 0 0; height: 242px; } #hero a img { border: 0px; text-decoration:none; } #heroSect { width:718px; float:left; margin:4px 0 6px 0; padding: 0 0 0 0; height: 125px; } /* Modified styles from Patrick */ #launchPad { width:236px; float:right; margin:4px 0 6px 0; border: 3px solid #0099DD; /*-moz-border-radius: 5px; -webkit-border-radius: 5px;*/ -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius:5px; } .launchHome { height: 236px; background-color:#FFF;} .launchSect { height: 119px; background-color:#0099DD; overflow: hidden} #launchPad dt {padding-top: 3px;height:36px; background:#0099DD url("../images/arrow_white_right.gif") no-repeat 220px 50%; } #launchPad .dtBase { border-bottom: 1px solid #afdff4; } #launchPad dt:hover { background-color:#1ab2f6; cursor: pointer; } #launchPad dt a {position: static; height:34px; display:block; color:#FFF; text-decoration:none; padding:2px 2px 2px 6px; font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; font-weight: normal; } #launchPad dt .heading { display:block; font-family: "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; font-size:16px; line-height:16px; } #launchPad .ddPad { margin-top:8px; } /* Applied to the top DD for extra padding Spans and Divs dont work in IE */ #launchPad dt .desc { display:block; font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; font-weight:normal; font-size:10px; line-height:12px; } #launchPad dd { font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; font-weight:normal; font-size:12px; line-height:16px; background-color:#FFF; margin:0px 10px 0 10px;padding: 0px 0px 0px 10px; background: #ffffff url("../images/arrow_grey_right.gif") no-repeat 0 3px; } #launchPad dd a {position: static; font-weight:normal; color: #0099DD; text-decoration:none; } #launchPad dd a:hover {text-decoration: underline; } #crumbs { margin: 0 0 30px 0; padding-top: 3px;} /* Allan requested padding-top */ #crumbs ul { list-style: none ; } #crumbs li { display:inline; font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; font-weight:normal; font-size:14px; } /* Allan requested increased font size */ #crumbs a { font-weight:bold; color: #666666; text-decoration: none; padding: 0px 10px 0px 0px; margin: 0; list-style: none; } #crumbs a:hover {text-decoration: underline; } #crumbs .active { font-weight:bold;} /* Applied to the currently active page */ #footer { position:absolute; bottom:0; width:924px; margin:0px 22px 20px 22px; height:85px; background: #0099DD url("../images/tick_footer.gif") no-repeat 670px top; padding:20px; /* Height of the footer */ -moz-border-radius: 5px; -webkit-border-radius: 5px;} #footer ul { list-style: none ; padding:0px; margin:0px; } #footer li { display:inline; font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; font-weight:normal; font-size:11px; } #footer a { font-weight:normal; color: #FFF; text-decoration:none; padding: 0px 4px 0px 5px; margin: 0; list-style: none; border-left: 1px solid #FFF; } #footer a:hover {text-decoration: underline; } #footer .navEnd { border-left: 0px solid #FFF; padding-left:0px; } /* Applied to the end of the menu to remove line */ #footer h6 { font-family: "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size:20px; color: #FFF;} #footer p { font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; font-weight:normal; font-size:9px; color: #FFF;} #footer .links { position:absolute; bottom:15px;} /* ------------MODULES------------ */ .mod h1 { font-family: "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size:24px; color:#007CB6; padding: 0px 0px 14px 0px; margin: 0px; line-height: 28px;} .mod h2 { font-family: "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; font-size:18px; color:#007CB6; padding: 0px 0px 14px 0px; margin: 0px; line-height: 22px;} .mod h3 { font-family: "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size:22px; color:#007CB6; padding: 0px 0px 14px 0px; margin: 0px; line-height: 26px;} .mod h4 { font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; font-weight: bold; font-size:12px; color:#007CB6; padding: 0px; margin: 0px;} .mod h5 { font-family: "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; font-size:18px; color:#555; padding: 0px 0px 14px 0px; margin: 0px; line-height: 20px;} .mod .h2noPad { padding: 0px 0px 0px 0px; line-height:20px;} .mod p { font-size: 12px; line-height:18px; font-weight:normal; padding: 0px 0px 14px 0px; margin: 0px; color:#555; /*background: transparent url("../images/dots_horz_grey.gif") repeat-x left bottom;*/ } .mod .date { font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; text-transform:uppercase; font-weight: bold; font-size:10px; color:#666; padding: 0px; margin: 0px; } .mod .price { font-weight: bold; padding-bottom:6px; display:block; } .mod .tickBoxBasket .price { font-size:11px; font-weight: normal; padding:0px 0 6px 0 ; display:block; text-align:right;} .mod .subtotal { font-size:14px; font-weight: normal; padding:0px 0 14px 0 ; display:block; text-align:right; color:#FFF;} .mod .subtotal strong { font-weight: bold; color:#fdd300;} .mod a:link { color:#007CB6; font-weight: bold; text-decoration:none; } .mod a:visited { color:#007CB6; font-weight: bold; text-decoration:none; } .mod a:hover, a:active { color:#007CB6; font-weight: bold; text-decoration:underline; } .mod div.hr { height: 1px; margin: 10px 0px 35px 0px; padding: 0px; color:#555555; background: #007CB6; } .mod div.hr hr { display: none; } .mod .right {float:right} .mod .left {float:left} .mod .ulList { padding: 0px 0px 14px 0px; margin: 0px; } .mod .ulList li { padding: 0px 0px 0px 20px; margin: 0px; background: transparent url("../images/bullet.gif") no-repeat 0 3px; } /* ------------ TWO LINE h2 HEADERS ------------ */ .mod .h2two { height:2em; } /* Adds height to an h2 heading - Used when a heading needs to be on two lines */ /*.mod .topBorder { border-top: 1px solid #0099DD; padding-top: 14px; } - Updated by Patrick */ .mod .topBorder { border-top: 1px solid #0099DD; padding-top: 14px; padding-bottom: 0; height: 2.8em;} /* ------------COLUMNS------------ */ .mod .col2first { width:337px; float:left; } .mod .col2 { width:337px; margin-left:22px; float:left; } .mod .col3first { width:225px; float:left; } .mod .col3 { width:225px; margin-left:10px; float:left;} .mod .col4first { width:167px; float:left; } .mod .col4 { width:166px; margin-left:10px; float:left; } .mod .col3afirst { width:210px; float:left; } .mod .col3a { width:210px; margin-left:10px; float:left;} .mod .col3rcfirst { width:150px; float:left; } .mod .col3rc { width:150px; margin-left:10px; float:left;} .mod .colNavFirst { width:167px; float:left; } .mod .colNav { width:518px; float:right; margin-left:10px; } /* ------------ COLOUR TICKS ------------ */ .mod .tick { background: transparent url("../images/tick_h2_0099DD.png") no-repeat left top; height:30px; padding:0px; margin:0px; } /* ------------ ROUNDED BOXES ------------ */ .mod .tickBox { background: transparent url("../images/tick_h2_0099DD.png") no-repeat left top; padding:30px 15px 10px 15px; margin-bottom:14px; border: 1px solid #0099DD; border-top: 0px solid #0099DD; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius:5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius:5px; } .mod .tickTintBox { background: #ebf8fb url("../images/tick_h2_0099DD.png") no-repeat left top; padding:30px 15px 20px 15px; margin-bottom:30px; border: 1px solid #0099DD; border-top: 0px solid #0099DD; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius:5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius:5px; } .mod .tickBoxRight { background: transparent url("../images/tick_h2_0099DD.png") no-repeat left top; padding:30px 10px 4px 10px; margin-bottom:24px; border: 1px solid #0099DD; border-top: 0px solid #0099DD; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius:5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius:5px; } .mod .tickBoxSolidRight { background: #0099DD url("../images/tick_h2_0099DD.png") no-repeat left top; padding:30px 10px 10px 10px; margin-bottom:24px; border: 1px solid #0099DD; border-top: 0px solid #0099DD; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius:5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius:5px; } /* New styles from Patrick */ .mod .tickBoxSolid { position:relative; background: #0099DD url("../images/tick_h2_white.png") no-repeat top left; padding:0px 0px 0px 0px; margin-bottom:30px; border: 0px solid #0099DD; border-top: 0px solid #0099DD; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius:5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius:5px; } .mod .tickBoxSolid .image { position:relative; background: url("../images/image_mod_lg_default.png") no-repeat top right; padding:0 370px 0 15px; height:190px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius:5px; } .mod .tickBoxSolid h2 { font-family: "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: Bold; font-size:18px; color:#FFF; padding: 20px 0px 12px 0px; margin: 0px; line-height: 24px;} .mod .tickBoxSolid p { font-size: 12px; line-height:16px; font-weight:normal; padding: 0px 0px 8px 0px; margin: 0px; color:#FFF; } .mod .image { position:relative !important; } .mod .button { position:absolute !important; } .mod .tickBoxSolid .left { position:absolute; bottom:10px; left:5px; } .mod .tickBoxSolid .right { position:absolute; bottom:10px; right:10px; } .mod .tickBoxSolid .buttons a, .mod .tickBoxSolid .buttons button{ display:block;float:left; } .mod .imageBoxRight { position:relative; background: #0099DD url("../images/image_mod_default.png") no-repeat bottom left; padding:0px; margin-bottom:24px; border: 0px solid #0099DD; border-top: 0px solid #0099DD; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius:5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius:5px; } .mod .imageBoxRight .image { position:relative; background: transparent url("../images/tick_h2_white.png") no-repeat top left; padding:0 10px 0 10px; height:230px; } .mod .imageBoxRight .buttons { position:absolute; bottom:10px; right:10px; } .mod .imageBoxRight h2 { font-family: "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-size:18px; color:#FFF; padding: 20px 0px 12px 0px; margin: 0px; line-height: 22px;} .mod .imageBoxRight p { font-size: 11px; line-height:16px; font-weight:normal; padding: 0px 0px 6px 0px; margin: 0px; color:#FFF; } .mod .tickBoxRight p { padding:0px 0px 8px 0px; margin-bottom:0px; } .mod .tickBoxBasket { background: transparent url("../images/tick_h2_0099DD.png") no-repeat left top; margin-bottom:24px; padding:30px 0px 0px 0px; border: 1px solid #0099DD; border-top: 0px solid #0099DD; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius:5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius:5px; } .mod .tickBoxBasket .base { background-color:#0099DD; margin:0px; padding:10px 10px 10px 10px; } .mod .tickBoxBasket .basketPadding { padding:0px 10px 0px 10px; } .mod .tintBox { background-color:#ebf8fb; padding:15px 15px 5px 15px; margin-bottom:6px; border: 1px solid #0099DD; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .mod .product { margin-bottom:35px;} .mod .sortBox { background-color:#ebf8fb; padding:7px 13px 7px 13px; margin-bottom:35px; border: 1px solid #0099DD; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .mod .tickBoxSolidRight, .mod .tickBoxSolidRight h4, .mod .tickBoxSolidRight p { color:#FFF;} .mod .tickBoxSolidRight h4 { font-size:14px; padding-bottom:14px; } .mod .tickBoxSolidRight h4 label { font-size:14px; padding-bottom:14px; } .mod .tickBoxSolidRight .note { font-size:10px; line-height:12px; padding-bottom:14px; } .mod .tickBoxSolidRight textarea { background-color: #FFF; color: #0099DD; border: 1px solid #0099DD; padding:3px; margin:0px; width:94%;} .mod .tickTintBox .searchInput { background-color: #FFF; color: #0099DD; border: 1px solid #0099DD; padding:5px; margin:0px; float:left; } .mod .tabBox { padding:10px 15px 10px 15px; margin-bottom:30px; border: 1px solid #0099DD; border-top: 0px solid #0099DD; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius:5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius:5px; } .mod .tickBoxSolidRight .radioList { list-style: none; padding:0px 0 10px 10px; } .mod .tickBoxSolidRight .radioList li { margin :0 0 8px 0px; } .mod .tickBoxSolidRight .radioList input { vertical-align: middle; line-height:14px; } .mod .tickBoxSolidRight .radioList label { font-size:12px; padding :0 0 0px 0px; margin:0px; } .mod .tickBoxSolidRight .radioList label:hover { color:#fdd300; cursor:pointer; } .mod .tickTintBoxForm { background: #ebf8fb url("../images/tick_h2_0099DD.png") no-repeat left top; padding:30px 0px 20px 0px; margin-bottom:30px; border: 1px solid #0099DD; border-top: 0px solid #0099DD; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius:5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius:5px; } /* ------------MODULE LISTS------------ */ .mod .textList { list-style: none ; } .mod .textList li { background: transparent url("../images/dots_horz_grey.gif") repeat-x 0 bottom; padding: 0px 0 0px 0; margin: 0px 0 6px 0; display:block; } .mod .textList .listBase { background: transparent url("../images/empty.gif") repeat-x 0 bottom; padding: 0px 0 0px 0; margin: 0px 0 6px 0; display:block; } .mod .textList h4, .mod .imageList p { padding:0px; margin:0px; } .mod .textList p { padding-bottom:6px; } .mod .imageList { list-style: none ; } .mod .imageList li { background: transparent url("../images/dots_horz_grey.gif") repeat-x 0 bottom; padding: 0px 0 6px 0; margin: 0px 0 6px 0; display:block; min-height:86px; height:auto !important; height:86px; } .mod .imageList .listBase { background: transparent url("../images/empty.gif") repeat-x 0 bottom; padding: 0px 0 6px 0; margin: 0px 0 6px 0; display:block; min-height:86px; height:auto !important; height:86px; } .mod .imageList h4, .mod .imageList p { padding:0px; margin:0px; } .mod .verticalList ul { list-style: none ; display:block; margin-bottom:14px; } .mod .verticalList li { padding: 0px 0 0px 0; margin: 0px 0 6px 0; display:inline; } .mod .verticalList h4, .mod .imageList p { padding:0px; margin:0px; } .mod .productList { margin-bottom:30px;} .mod .productList ul { list-style: none ; display:block; } .mod .productList li { padding: 0px !important; margin: 0px!important; display:inline; } .mod .productList h4, .mod .productList p , .mod .productList h4 { padding:0px; margin:0px; } .mod .productList .clearCol { clear:both; padding: 0px 0 20px 0; margin: 0px 0 20px 0; background: transparent url("../images/dots_horz_grey.gif") repeat-x 0 bottom; /* border-bottom: 1px solid #0099DD;*/ } .mod .linksList { list-style: none ; } .mod .linksList li { margin:0px;padding: 0px 0px 0px 10px; background: transparent url("../images/arrow_grey_right.gif") no-repeat 0 5px; display:block; } .mod .linksList li a { color: #007CB6; text-decoration:none; } .mod .linksList li a:hover {text-decoration: underline; } .mod .shareList { background:transparent url("../images/dots_horz_grey.gif") repeat-x 0 top; border-bottom: 1px solid #0099DD; margin: 0px 0 35px 0 ; padding:0px; } .mod .shareList ul {list-style: none ; margin: 0px; padding:0px; display:block; overflow:hidden; } .mod .shareList li { padding:0px; margin: 10px 0px 10px 10px; float:right; display:inline; } .mod .shareList a { padding: 0px 0px 0px 10px; background: transparent url("../images/arrow_grey_right.gif") no-repeat 0 5px; } .mod .tabList { background: transparent url("../images/tick_tabbar_0099DD.gif") no-repeat left bottom; } .mod .tabListRight { background: transparent url("../images/tick_tabbar_0099DD.gif") no-repeat right bottom; overflow: hidden; width: 100%; } .mod .tabList ul {list-style: none ; } .mod .tabList li { padding:0px; margin: 0px 0px 0px 0px; float:left;} .mod .tabList a { padding: 0px 8px 25px 8px; background: transparent url("../images/tick_tabs_0099DD.gif") no-repeat left bottom; display:block; font-weight:normal; color:#666; } .mod .tabList a:hover {text-decoration: none; background: transparent url("../images/tick_tabs_0099DD.gif") no-repeat center bottom; color:#007CB6; } .mod .tabList .active {text-decoration: none; background: transparent url("../images/tick_tabs_0099DD.gif") no-repeat center bottom; color:#007CB6; font-weight:bold; } .mod .pageList {list-style: none; display:block; padding: 10px 0px 10px 0px; float:right; } .mod .pageList li { margin:0px; padding: 0px 0px 0px 0px; padding: 0px 6px 0px 7px; display: inline;border-left: 1px solid #777; } .mod .pageList a { margin: 0; list-style: none; } .mod .pageLista:hover {text-decoration: underline; } .mod .pageList .navEnd { border-left: 0px solid #777; padding-left:0px; } /* Applied to the end of the menu to remove line */ .mod .specialArea { background: transparent url("../images/icon_pound_C0377D.gif") no-repeat left 50%; padding: 15px 0px 14px 55px; } .mod .specialArea h2 { color:#c0377d; font-size:16px; padding:0px; margin:0px;} .mod .specialArea p { color:#c0377d; font-size:11px; padding:0px; margin:0px;} .mod .colNavFirst ul li a { color:#666; } .mod .colNavFirst ul li a:hover { color: #007CB6; text-decoration: none; } .mod .colNavFirst ul li ul { margin: 5px 0px 5px 0px;} .mod .colNavFirst ul li ul li a { color:#666; padding: 0px 0px 0px 10px; margin: 0px 0px 0px 10px; background: transparent url("../images/arrow_grey_right.gif") no-repeat 0 5px; font-weight:normal;} .mod .colNavFirst ul li ul li a:hover { color: #007CB6; text-decoration: none; background: transparent url("../images/arrow_blue_right.gif") no-repeat 0 5px; } .mod .colNavFirst ul li .active { color:#007CB6; } .mod .colNavFirst ul li ul li .active { color: #007CB6; background: transparent url("../images/arrow_blue_right.gif") no-repeat 0 5px; } .mod .leftNavHome { padding: 0px 0px 10px 0px; margin: 0px 0px 8px 0px; background:transparent url("../images/dots_horz_grey_nav.gif") no-repeat bottom left ; } /* ------------IMAGES------------ */ .mod .imgLarge { width:337px; height:337px; padding: 0px 0px 14px 0px; margin: 0px; } .mod .imgLarge a img { border: 0px; text-decoration:none; } .mod .imgMed { width:166px; height:166px; padding: 0px 0px 14px 0px; margin: 0px; } .mod .imgMed a img { border: 0px; text-decoration:none; } .mod .imgSmall { width:86px; height:86px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } .mod .imgSmall a img { border: 0px; text-decoration:none; margin-right:10px; } /* ------------FORM ELEMENTS ------------ */ .mod .searchSort { } .mod textarea, .mod input, .mod select, .mod label { font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; font-size:12px; /*line-height:18px;*/ } .mod .sortArea { float:left; margin-right:20px; padding:0px;} .mod .sortArea label { font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; text-transform:uppercase; font-weight: bold; font-size:10px; color:#666; padding: 0px; margin: 0px; display:block; } .form { margin: 10px 0px 0px 0px; padding: 0px; } p.legend .note { margin-left: 25px; } p.legend em { font-style: normal; } .errors { margin: 0 15px 10px 15px ; padding: 5px 10px; border: #C00 1px solid; background-color: #f8fdfe; } .errors p { margin: 0; } .errors p em { color: #C00; font-style: normal; font-weight: bold; } .form .field { border: 1px solid #666; color: #666; padding:2px; } .form input:focus, .form textarea:focus { background-color: #FFF; border-color: #000; color: #000;} .form input.error, .form input.error:focus { border-color: #C00; background-color: #FFF; color: #C00; } .form .note { font-size:10px; margin-left: 170px; } .form p { margin: 0; } .form fieldset { margin: 0px 25px 20px 25px ; padding: 0px; } .form legend { font-weight: normal; color: #666; font-family: "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; font-size:16px; color:#007CB6; padding: 0px 0px 6px 0px; margin: 0px; line-height: 20px; } .form fieldset div { padding: 3px 0; } .form label, .form span.label { margin-right: 10px; padding-right: 10px; width: 150px; display: block; float: left; text-align: right; position: relative; } .form label.error, .form span.error { color: #C00; } .form label em, .form span.label em { position: absolute; right: 0; font-style: normal; } .form div.controlset label, .form div.controlset input { display: inline; float: none; } .form div.controlset div { margin-left: 170px;} .form div.buttonrow { /*margin-left: 180px;*/ margin: 0px 25px 20px 25px ; } .mod .form div.hr { height: 1px; margin: 10px 0px 20px 0px; padding: 0px; color:#555555; background: #0099DD; } #wrapper .buttons a.negative {color: #fff} #wrapper .buttons a.negative:hover {color: #09D} .mod table { margin: 16px 0px 30px 0px; padding: 0px; width:100%; border:0px; font-size:12px; line-height: 18px; border-right: 0px solid #99d3ed; border-left: 0px solid #99d3ed; } .mod tbody th { padding: 7px 7px 6px 7px; margin: 0px; font-weight:bold; border-bottom: 1px solid #99d3ed; text-align:left; vertical-align:top; color:#0099DD; } .mod thead th { background-color:#0099DD; color:#fff; padding: 7px 7px 6px 7px; margin: 0px; border-bottom: 1px solid #fff; border-right: 1px solid #bde3f4; text-align:left; vertical-align:top;} .mod table td { padding: 7px 7px 6px 7px; margin: 0px; border-bottom: 1px solid #99d3ed; border-left: 1px solid #bde3f4; text-align:left; vertical-align:top;} .mod table .zebra td, .mod table .zebra th { background-color:#ebf8fb;} /* ------------BUTTONS------------ */ .buttons { /*margin-top:5px;*/} .buttons a, .buttons button{ display:block;float:right; margin:0 0px 0 7px;background-color:#FFF;border:1px solid #0099DD; font-family: "Century Gothic", "Helvetica Neue", Arial, trebuchet, sans-serif; font-size:14px; line-height:130%; text-decoration:none;font-weight:bold;color:#565656;cursor:pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding:5px 10px 2px 7px; /* Links */ } /* STANDARD */ button:hover, .buttons a:hover{ background-color:#dff4ff; border:1px solid #c2e1ef; color:#336699; text-decoration:none; } .buttons a:active{ background-color:#6299c5; border:1px solid #6299c5; color:#fff; } /* POSITIVE */ button.positive, .buttons a.positive{ color:#0099DD; } .buttons a.positive:hover, button.positive:hover{ background-color:#0099DD; border:1px solid #0099DD; color:#FFF; } .buttons a.positive:active{ background-color:#529214; border:1px solid #529214; color:#fff; } /* NEGATIVE */ .buttons a.negative, button.negative{ color:#ffffff; background:#0099DD; border-color:#FFF; } .buttons a.negative:hover, button.negative:hover{ background:#FFF; border:1px solid #FFF; color:#0099DD; text-decoration:none; } .buttons a.negative:active{ background-color:#d12f19; border:1px solid #d12f19; color:#fff; } /* ------------CORPORATE ICONS------------ */ .mod .iconPound { background: transparent url("../images/icon_pound_C0377D.gif") no-repeat left 50%; padding: 15px 0px 14px 55px; } .mod .iconBest { background: transparent url("../images/icon_best_0099DD.gif") no-repeat left top; padding: 15px 0px 14px 55px; } .mod .iconNews { background: transparent url("../images/icon_news_0099DD.gif") no-repeat left top; padding: 15px 0px 14px 55px; } .mod .iconResource { background: transparent url("../images/icon_book_0099DD.gif") no-repeat left top; padding: 15px 0px 14px 55px; } .mod .iconBasket { background: transparent url("../images/icon_basket_0099DD.gif") no-repeat left top; padding: 15px 0px 14px 55px; } .mod .iconTraining { background: transparent url("../images/icon_training_0099DD.gif") no-repeat left top; padding: 15px 0px 14px 55px; } .mod .iconSearch { background: transparent url("../images/icon_search_0099DD.gif") no-repeat left top; padding: 15px 0px 14px 55px; } .mod .iconInfo { background: transparent url("../images/icon_info_0099DD.gif") no-repeat left top; padding: 15px 0px 14px 55px; } .mod .iconNew { background: transparent url("../images/icon_new_0099DD.gif") no-repeat left top; padding: 15px 0px 14px 55px; } .mod .iconBulb { background: transparent url("../images/icon_bulb_0099DD.gif") no-repeat left top; padding: 15px 0px 14px 55px; } .mod .iconSpeech { background: transparent url("../images/icon_speech_0099DD.gif") no-repeat left top; padding: 15px 0px 14px 55px; } /* ------------CMS EDITOR------------ */ .blog h1 { font-family: "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size:24px; color:#007CB6; padding: 0px 0px 14px 0px; margin: 0px; line-height: 30px;} .blog h2 { font-family: "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-size:18px; color:#007CB6; padding: 0px 0px 14px 0px; margin: 0px; line-height: 24px;} .blog h3 { font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; font-weight: bold; font-size:14px; color:#007CB6; padding: 0px; margin: 0px; line-height: 20px;} .blog h4 { font-family: "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size:18px; color:#007CB6; padding: 0px 0px 14px 0px; margin: 0px; line-height: 24px;} .blog p { font-size: 14px; line-height: 20px; font-weight:normal; padding: 0px 0px 14px 0px; margin: 0px; color:#555; } .blog .introText { font-size: 18px; line-height: 26px; font-family: "Century Gothic", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; } .blog .note { font-size: 11px; line-height: 16px; font-weight:normal; padding: 0px 0px 14px 0px; margin: 0px; color:#555; } .blog .footnotes { font-size: 11px; line-height: 16px; font-weight:normal; } .blog sup { font-size: 80%; line-height: 1px; } .blog br { padding: 0px 0px 0px 0px; } .blog acronym { border-bottom: 1px dotted; cursor: help;} .blog abbr { border-bottom: 1px dotted; cursor: help;} .blog cite{ font-style:italic;} .blog ul { padding: 0px 0px 14px 30px; margin: 0px; list-style-type: none; font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; font-size:14px; line-height: 20px; color:#555555; } .blog ul li { padding: 0px 0px 0px 20px; margin: 0px; background: transparent url("../images/bullet.gif") no-repeat 0 3px; } .blog ol { list-style-position:outside; padding: 0px 0px 14px 40px; margin: 0px 0px 0px 2em; font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; font-size:14px; line-height: 20px; color:#555555; } .blog ol li { padding: 0px 0px 0px 0px; margin: 0px; list-style-type:decimal; } .blog blockquote { font-size: 14px; line-height: 22px; font-weight:normal; padding: 16px 0px 30px 50px; margin: 0px; color:#555555; background: transparent url("../images/icon_quote_0099DD.gif") no-repeat 0 18px; } .blog div.hr { height: 1px; margin: 16px 0px 30px 0px; padding: 0px; color:#555555; background: #0099DD; } .blog div.hr hr { display: none; } .blog a:link { color:#007CB6; font-weight: bold; text-decoration:none; } .blog a:visited { color:#007CB6; font-weight: bold; text-decoration:none; } .blog a:hover, a:active { color:#007CB6; font-weight: bold; text-decoration:underline; } .blog table { margin: 16px 0px 30px 0px; padding: 0px; width:100%; border:0px; font-size:12px; line-height: 18px; border-right: 0px solid #99d3ed; border-left: 0px solid #99d3ed; } .blog tbody th { padding: 7px 7px 6px 7px; margin: 0px; font-weight:bold; border-bottom: 1px solid #99d3ed; text-align:left; vertical-align:top; color:#0099DD; } .blog thead th { background-color:#0099DD; color:#fff; padding: 7px 7px 6px 7px; margin: 0px; border-bottom: 1px solid #fff; border-right: 1px solid #bde3f4; text-align:left; vertical-align:top;} .blog table td { padding: 7px 7px 6px 7px; margin: 0px; border-bottom: 1px solid #99d3ed; border-left: 1px solid #bde3f4; text-align:left; vertical-align:top;} .blog table .zebra td, .blog table .zebra th { background-color:#ebf8fb;} /* New Styles Jason 23/10 */ .blog .pulloutLine { margin-bottom:24px; padding:20px 20px 10px 20px; border: 1px solid #0099DD; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius:5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius:5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius:5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius:5px; } .blog .pulloutSolid {background-color:#0099DD; color:#FFF !important; margin-bottom:24px; padding:20px 20px 10px 20px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius:5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius:5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius:5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius:5px; } .blog .pulloutSolid h1, .blog .pulloutSolid h2, .blog .pulloutSolid h3, .blog .pulloutSolid h4, .blog .pulloutSolid p, .blog .pulloutSolid .introText, .blog .pulloutSolid ul, .blog .pulloutSolid li, .blog .pulloutSolid ol, .blog .pulloutSolid a:link { color:#FFF;} .blog .pulloutSolid ul li { background: transparent url("../images/bullet_white.png") no-repeat 0 3px; } .blog .linkList { padding: 0px 0px 14px 0px; } .blog .linkList li { padding: 0px 0px 0px 0px; background-image: none !important; } .blog .faq { text-align: center; margin: 0px auto;} .blog .faq ul { list-style: none ; padding:0px !important; margin: 0px 0px 30px 0px; } .blog .faq li { display:inline; font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; font-weight:normal; font-size:14px; background-image: none !important; padding:0px !important; margin:0px !important; } .blog .faq a { font-weight:bold; color: #007CB6; text-decoration:none; padding: 0px 0px 0px 0px !important; margin: 0px !important; } .blog .faq a:hover {text-decoration: underline; } /* Added by Sean */ .tableheading { background-color:#0099DD; color:#fff; padding: 7px 7px 6px 7px; margin: 0px; border-bottom: 1px solid #fff; border-right: 1px solid #c9ecf6; text-align:left; vertical-align:top;} .blockquote { font-size: 14px; line-height: 22px; font-weight:normal; padding: 16px 0px 30px 50px !important; margin: 0px; color:#555555; background: transparent url("../images/icon_quote_0099DD.gif") no-repeat 0 18px; } hr { border: 0; height: 1px; margin: 16px 0px 30px 0px; padding: 0px; color:#0099DD; background: #0099DD; } .zebra0 { display: block; background-color:#ebf8fb;} .zebra1 { display: block; background-color:#fff;} .blog span.hasTip a img {display: none; } /* Hides the unneeded edit icon that cannot be disabled! */ /* ------------PRIMARY NAVIGATION------------ */ /* ------------ UL ------------ */ #nav { position:relative; z-index:1; height:54px; } #nav ul { list-style: none; margin:0px 10px 0 0; position:absolute; top:40%; right:0px;} #nav a { display: block; text-decoration:none; padding: 4px 6px 5px 6px; margin: 0; list-style: none; background: transparent url("../images/dots_vert.gif") repeat-y right top; } #nav li { font-family: /**/ "Century Gothic", "Helvetica Neue", Arial, trebuchet, sans-serif; font-weight:bold; font-size:13px; position:relative; } #nav li { float: left; } #nav .navEnd { background: transparent url("../images/dots_vert.gif") no-repeat 0 200px; } /* Applied to the end of the menu to remove dots */ /* ------------ DD - DL ------------ */ #nav li dl { display: block; font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; font-weight:bold; font-size:11px; line-height:18px; } #nav li dl dd, #nav li dl dd a { display: block; font-family: "Helvetica Neue", Helvetica, Arial, trebuchet, sans-serif; font-weight:normal; font-size:11px; line-height:18px; padding-left:0px; } #nav li dl a , #nav li dl dd a { text-decoration:none; background: transparent url("../images/dots_vert.gif") no-repeat 0 200px; padding: 0px; } #nav li:hover .menuRight, #nav li:hover .menuLeft { Display: block; position: absolute; } #nav li .menuLeft { position: absolute; height: auto; width:auto; margin-top: -2px; padding-top:0px; margin-left: 0px; background-color:#FFF; border: 1px solid; border-top: 3px solid; border-bottom: 2px solid; display: none; z-index:1;} #nav li .menuRight { position: absolute; right:0px; left:auto; height: auto; width:auto; margin-top: -2px; padding-top:0px; margin-left: 0px; background-color:#FFF; border: 1px solid; border-top: 3px solid; border-bottom: 2px solid; display: none;z-index:1; } #nav li .menu1col { width: 190px; } #nav li .menu2col { width: 375px; } #nav li .menu3col { width: 560px; } /* ------------ COLS ------------ */ #nav .menuCol a:hover {text-decoration: underline;} #nav .menuCol {Display:block; margin: 10px 10px 0px 15px; padding: 0px; padding-bottom:20px; width: 160px; height: auto; float: left; } #nav li:hover .menuCol { clear:right; } /* ------------ COLOURS ------------ */ #nav li {color: #007CB6;} #nav a, #nav dl a, #nav dl a:hover {color: #007CB6;} #nav dl { border-color: #007CB6!important; } #nav li:hover > a {color:#fff; background: #007CB6;} #greenLight {color: #6F7D00;} #greenLight h1, #greenLight h2, #greenLight h3, #greenLight h4, #greenLight h5 {color: #6F7D00;} #greenLight .introText {color: #6F7D00;} #greenLight a, #greenLight dl a, #greenLight dl a:hover {color: #6F7D00;} #greenLight dl { border-color: #889900!important; } #greenLight .blog .pulloutLine { border-color: #889900!important; } #greenLight .blog .pulloutSolid {background-color:#889900!important;} #nav #greenLight:hover > a {color:#fff; background: #6F7D00;} #greenDark {color: #6d6c2d;} #greenDark h1, #greenDark h2, #greenDark h3, #greenDark h4, #greenDark h5 {color: #6d6c2d;} #greenDark .introText {color: #6d6c2d;} #greenDark a, #greenDark dl a, #greenDark dl a:hover {color: #6d6c2d;} #greenDark dl { border-color: #6d6c2d!important; } #greenDark .blog .pulloutLine { border-color: #6d6c2d!important; } #greenDark .blog .pulloutSolid {background-color:#6d6c2d!important;} #nav #greenDark:hover > a {color:#fff; background: #6d6c2d;} #turquoiseLight {color: #20808F;} #turquoiseLight h1, #turquoiseLight h2, #turquoiseLight h3, #turquoiseLight h4, #turquoiseLight h5 {color: #20808F;} #turquoiseLight .introText {color: #20808F;} #turquoiseLight a, #turquoiseLight dl a, #turquoiseLight dl a:hover {color: #20808F;} #turquoiseLight dl { border-color: #2A9FB2!important; } #turquoiseLight .blog .pulloutLine { border-color: #2A9FB2!important; } #turquoiseLight .blog .pulloutSolid {background-color:#2A9FB2!important;} #nav #turquoiseLight:hover > a {color:#fff; background: #20808F;} #turquoiseDark {color: #0b6979;} #turquoiseDark h1, #turquoiseDark h2, #turquoiseDark h3, #turquoiseDark h4, #turquoiseDark h5 {color: #0b6979;} #turquoiseDark .introText {color: #0b6979;} #turquoiseDark a, #turquoiseDark dl a, #turquoiseDark dl a:hover {color: #0b6979;} #turquoiseDark dl { border-color: #0b6979!important; } #turquoiseDark .blog .pulloutLine { border-color: #0b6979!important; } #turquoiseDark .blog .pulloutSolid {background-color:#0b6979!important;} #nav #turquoiseDark:hover > a {color:#fff; background: #0b6979;} #blueLight {color: #007CB6;} #blueLight h1, #blueLight h2, #blueLight h3, #blueLight h4, #blueLight h5 {color: #007CB6;} #blueLight .introText {color: #007CB6;} #blueLight a, #blueLight dl a, #blueLight dl a:hover {color: #007CB6;} #blueLight dl { border-color: #0099DD!important; } #blueLight .blog .pulloutLine { border-color: #0099DD!important; } #blueLight .blog .pulloutSolid {background-color:#0099DD!important;} #nav #blueLight:hover > a {color:#fff; background: #007CB6;} #blueDark {color: #2e3192;} #blueDark h1, #blueDark h2, #blueDark h3, #blueDark h4, #blueDark h5 {color: #2e3192;} #blueDark .introText {color: #2e3192;} #blueDark a, #blueDark dl a, #blueDark dl a:hover {color: #2e3192;} #blueDark dl { border-color: #2e3192!important; } #blueDark .blog .pulloutLine { border-color: #2e3192!important; } #blueDark .blog .pulloutSolid {background-color:#2e3192!important;} #nav #blueDark:hover > a {color:#fff; background: #2e3192;} #violetLight {color: #955fab;} #violetLight h1, #violetLight h2, #violetLight h3, #violetLight h4, #violetLight h5 {color: #955fab;} #violetLight .introText {color: #955fab;} #violetLight a, #violetLight dl a, #violetLight dl a:hover {color: #955fab;} #violetLight dl { border-color: #955fab!important; } #violetLight .blog .pulloutLine { border-color: #955fab!important; } #violetLight .blog .pulloutSolid {background-color:#955fab!important;} #nav #violetLight:hover > a {color:#fff; background: #955fab;} #violetDark {color: #602d91;} #violetDark h1, #violetDark h2, #violetDark h3, #violetDark h4, #violetDark h5 {color: #602d91;} #violetDark .introText {color: #602d91;} #violetDark a, #violetDark dl a, #violetDark dl a:hover {color: #602d91;} #violetDark dl { border-color: #602d91!important; } #violetDark .blog .pulloutLine { border-color: #602d91!important; } #violetDark .blog .pulloutSolid {background-color: #602d91!important;} #nav #violetDark:hover > a {color:#fff; background: #602d91;} #magentaLight {color: #cb2791;} #magentaLight h1, #magentaLight h2, #magentaLight h3, #magentaLight h4, #magentaLight h5 {color: #cb2791;} #magentaLight .introText {color: #cb2791;} #magentaLight a, #magentaLight dl a, #magentaLight dl a:hover {color: #cb2791;} #magentaLight dl { border-color: #cb2791!important; } #magentaLight .blog .pulloutLine { border-color: #cb2791!important; } #magentaLight .blog .pulloutSolid {background-color: #cb2791!important;} #nav #magentaLight:hover > a {color:#fff; background: #cb2791;} #magentaDark {color: #a3195f;} #magentaDark h1, #magentaDark h2, #magentaDark h3, #magentaDark h4, #magentaDark h5 {color: #a3195f;} #magentaDark .introText {color: #a3195f;} #magentaDark a, #magentaDark dl a, #magentaDark dl a:hover {color: #a3195f;} #magentaDark dl { border-color: #a3195f!important; } #magentaDark .blog .pulloutLine { border-color: #a3195f!important; } #magentaDark .blog .pulloutSolid {background-color: #a3195f!important;} #nav #magentaDark:hover > a {color:#fff; background: #a3195f;} #redLight {color: #E61F00;} #redLight h1, #redLight h2, #redLight h3, #redLight h4, #redLight h5 {color: #E61F00;} #redLight .introText {color: #E61F00;} #redLight a, #redLight dl a, #redLight dl a:hover {color: #E61F00;} #redLight dl { border-color: #FF2700!important; } #redLight .blog .pulloutLine { border-color: #FF2700!important; } #redLight .blog .pulloutSolid {background-color: #FF2700!important;} #nav #redLight:hover > a {color:#fff; background: #E61F00;} #redDark {color: #cd151c;} #redDark h1, #redDark h2, #redDark h3, #redDark h4, #redDark h5 {color: #cd151c;} #redDark .introText {color: #cd151c;} #redDark a, #redDark dl a, #redDark dl a:hover {color: #cd151c;} #redDark dl { border-color: #cd151c!important; } #redDark .blog .pulloutLine { border-color: #cd151c!important; } #redDark .blog .pulloutSolid {background-color: #cd151c!important;} #nav #redDark:hover > a {color:#fff; background: #cd151c;} #orangeLight {color: #B06100;} #orangeLight h1, #orangeLight h2, #orangeLight h3, #orangeLight h4, #orangeLight h5 {color: #B06100;} #orangeLight .introText {color: #B06100;} #orangeLight a, #orangeLight dl a, #orangeLight dl a:hover {color: #B06100;} #orangeLight dl { border-color: #FF9000!important; } #orangeLight .blog .pulloutLine { border-color: #FF9000!important; } #orangeLight .blog .pulloutSolid {background-color: #FF9000!important;} #nav #orangeLight:hover > a {color:#fff; background: #B06100;} #orangeDark {color: #CF4800;} #orangeDark h1, #orangeDark h2, #orangeDark h3, #orangeDark h4, #orangeDark h5 {color: #CF4800;} #orangeDark .introText {color: #CF4800;} #orangeDark a, #orangeDark dl a, #orangeDark dl a:hover {color: #CF4800;} #orangeDark dl { border-color: #FF5A00!important; } #orangeDark .blog .pulloutLine { border-color: #FF5A00!important; } #orangeDark .blog .pulloutSolid {background-color: #FF5A00!important;} #nav #orangeDark:hover > a {color:#fff; background: #CF4800;} #greyLight {color: #717171;} #greyLight h1, #greyLight h2, #greyLight h3, #greyLight h4, #greyLight h5 {color: #717171;} #greyLight .introText {color: #717171;} #greyLight a, #greyLight dl a, #greyLight dl a:hover {color: #717171;} #greyLight dl { border-color: #AAAAAA!important; } #greyLight .blog .pulloutLine { border-color: #AAAAAA!important; } #greyLight .blog .pulloutSolid {background-color: #AAAAAA!important;} #nav #greyLight:hover > a {color:#fff; background: #717171;} #greyDark {color: #525252;} #greyDark h1, #greyDark h2, #greyDark h3, #greyDark h4, #greyDark h5 {color: #525252;} #greyDark .introText {color: #525252;} #greyDark a, #greyDark dl a, #greyDark dl a:hover {color: #525252;} #greyDark dl { border-color: #777777!important; } #greyDark .blog .pulloutLine { border-color: #777777!important; } #greyDark .blog .pulloutSolid {background-color: #777777!important;} #nav #greyDark:hover > a {color:#fff; background: #525252;} #nav dd a, #greenLight dd a, #greenDark dd a, #turquoiseLight dd a, #turquoiseDark dd a, #blueLight dd a, #blueDark dd a, #violetLight dd a, #violetDark dd a, #magentaLight dd a, #magentaDark dd a, #redLight dd a, #blueDark dd a, #redDark dd a, #orangeLight dd a, #orangeDark dd a, #greyLight dd a, #greyDark dd a {color: #777777;} /* ------------ COLOUR CLASSES ------------ */ .mod .greenLight, .blog .greenLight, #crumbs .greenLight {color:#6F7D00; border-color:#6F7D00;} .mod .greenDark, .blog .greenDark, #crumbs .greenDark {color:#6d6c2d; border-color:#6d6c2d;} .mod .turquoiseLight, .blog .turquoiseLight, #crumbs .turquoiseLight {color:#20808F; border-color:#20808F;} .mod .turquoiseDark, .blog .turquoiseDark, #crumbs .turquoiseDark {color:#0b6979; border-color:#0b6979;} .mod .blueLight, .blog .blueLight, #crumbs .blueLight {color:#007CB6; border-color:#007CB6;} .mod .blueDark, .blog .blueDark , #crumbs .blueDark {color:#2e3192; border-color:#2e3192;} .mod .violetLight, .blog .violetLight, #crumbs .violetLight {color:#955fab; border-color:#955fab;} .mod .violetDark, .blog .violetDark, #crumbs .violetDark {color:#602d91; border-color:#602d91;} .mod .magentaLight, .blog .magentaLight, #crumbs .magentaLight {color:#cb2791; border-color:#cb2791;} .mod .magentaDark, .blog .magentaDark, #crumbs .magentaDark {color:#a3195f; border-color:#a3195f;} .mod .redLight, .blog .redLight, #crumbs .redLight {color:#E61F00; border-color:#E61F00;} .mod .redDark, .blog .redDark, #crumbs .redDark {color:#cd151c; border-color:#cd151c;} .mod .orangeLight, .blog .orangeLight, #crumbs .orangeLight {color:#B06100; border-color:#B06100;} .mod .orangeDark, .blog .orangeDark, #crumbs .orangeDark {color:#CF4800; border-color:#CF4800;} .mod .greyLight, .blog .greyLight, #crumbs .greyLight {color:#717171; border-color:#717171;} .mod .greyDark, .blog .greyDark, #crumbs .greyDark {color:#525252; border-color:#525252;} .greenLightBg, .blog .greenLightBg {background-color:#889900;} .greenDarkBg, .blog .greenDarkBg {background-color:#6d6c2d;} .turquoiseLightBg, .blog .turquoiseLightBg {background-color:#2A9FB2;} .turquoiseDarkBg, .blog .turquoiseDarkBg {background-color:#0b6979;} .blueLightBg, .blog .blueLightBg {background-color:#0099DD;} .blueDarkBg, .blog .blueDarkBg {background-color:#2e3192;} .violetLightBg, .blog .violetLightBg {background-color:#955fab;} .violetDarkBg, .blog .violetDarkBg {background-color:#602d91;} .magentaLightBg, .blog .magentaLightBg {background-color:#cb2791;} .magentaDarkBg, .blog .magentaDarkBg {background-color:#a3195f;} .redLightBg, .blog .redLightBg {background-color:#FF2700;} .redDarkBg, .blog .redDarkBg {background-color:#cd151c;} .orangeLightBg, .blog .orangeLightBg {background-color:#FF9000;} .orangeDarkBg, .blog .orangeDarkBg {background-color:#FF5A00;} .greyLightBg, .blog .greyLightBg {background-color:#AAAAAA;} .greyDarkBg, .blog .greyDarkBg {background-color:#777777;} .mod .greenLightTk {background: transparent url("../images/tick_h2_greenL.png") no-repeat left top; height:30px; padding:0px; margin:0px;} .mod .greenDarkTk {background: transparent url("../images/tick_h2_greenD.png") no-repeat left top; height:30px; padding:0px; margin:0px;} .mod .turquoiseLightTk {background: transparent url("../images/tick_h2_turquoiseL.png") no-repeat left top; height:30px; padding:0px; margin:0px;} .mod .turquoiseDarkTk {background: transparent url("../images/tick_h2_turquoiseD.png") no-repeat left top; height:30px; padding:0px; margin:0px;} .mod .blueLightTk {background: transparent url("../images/tick_h2_blueL.png") no-repeat left top; height:30px; padding:0px; margin:0px;} .mod .blueDarkTk {background: transparent url("../images/tick_h2_blueD.png") no-repeat left top; height:30px; padding:0px; margin:0px;} .mod .violetLightTk {background: transparent url("../images/tick_h2_violetL.png") no-repeat left top; height:30px; padding:0px; margin:0px;} .mod .violetDarkTk {background: transparent url("../images/tick_h2_violetD.png") no-repeat left top; height:30px; padding:0px; margin:0px;} .mod .magentaLightTk {background: transparent url("../images/tick_h2_magentaL.png") no-repeat left top; height:30px; padding:0px; margin:0px;} .mod .magentaDarkTk {background: transparent url("../images/tick_h2_magentaD.png") no-repeat left top; height:30px; padding:0px; margin:0px;} .mod .redLightTk {background: transparent url("../images/tick_h2_redL.png") no-repeat left top; height:30px; padding:0px; margin:0px;} .mod .redDarkTk {background: transparent url("../images/tick_h2_redD.png") no-repeat left top; height:30px; padding:0px; margin:0px;} .mod .orangeLightTk {background: transparent url("../images/tick_h2_orangeL.png") no-repeat left top; height:30px; padding:0px; margin:0px;} .mod .orangeDarkTk {background: transparent url("../images/tick_h2_orangeD.png") no-repeat left top; height:30px; padding:0px; margin:0px;} .mod .greyLightTk {background: transparent url("../images/tick_h2_greyL.png") no-repeat left top; height:30px; padding:0px; margin:0px;} .mod .greyDarkTk {background: transparent url("../images/tick_h2_greyD.png") no-repeat left top; height:30px; padding:0px; margin:0px;} .mod .iconBulbBlueL { background: transparent url("../images/icon_bulb_blueL.gif") no-repeat left 50%; padding: 15px 0px 14px 55px; } .mod .iconSpeechBlueL { background: transparent url("../images/icon_speech_blueL.gif") no-repeat left 50%; padding: 15px 0px 14px 55px; } .mod .iconFaqBlueL { background: transparent url("../images/icon_faq_blueL.gif") no-repeat left 50%; padding: 15px 0px 14px 55px; } .mod .iconTopBlueL { background: transparent url("../images/icon_top_blueL.gif") no-repeat left 50%; padding: 15px 0px 14px 55px; } .mod .iconNewBlueL { background: transparent url("../images/icon_new_blueL.gif") no-repeat left 50%; padding: 15px 0px 14px 55px; } .mod .iconArticleBlueL { background: transparent url("../images/icon_article_blueL.gif") no-repeat left 50%; padding: 15px 0px 14px 55px; } .mod .iconVoiceBlueL { background: transparent url("../images/icon_voice_blueL.gif") no-repeat left 50%; padding: 15px 0px 14px 55px; } .mod .iconVideoBlueL { background: transparent url("../images/icon_video_blueL.gif") no-repeat left 50%; padding: 15px 0px 14px 55px; } .mod .iconGamesBlueL { background: transparent url("../images/icon_games_blueL.gif") no-repeat left 50%; padding: 15px 0px 14px 55px; } .mod .iconBrookBlueL { background: transparent url("../images/icon_brook_blueL.gif") no-repeat left top; padding: 15px 0px 14px 55px; } .mod .iconSignBlueL { background: transparent url("../images/icon_sign_blueL.gif") no-repeat left top; padding: 15px 0px 14px 55px; } /* ------------ COLOUR KEY ------------ Brook Blue #0099DD Body Text Colour #555555 CMS COLOURS: Green Light #889900 Green Dark #6d6c2d Turquoise Light #2a9fb2 Turquoise Dark #0b6979 Blue Light #0099DD Blue Dark #2e3192 Violet Light #955fab Violet Dark #602d91 Magenta Light #cb2791 Magenta Dark #a3195f Red Light #ff2700 Red Dark #cd151c Orange Light #ff9000 Orange Dark #ff5a00 Grey Light #aaaaaa Grey Dark #777777 */ #ClarityContent li { padding: 0px 0px 0px 20px; margin: 0px; background: transparent url("../images/bullet.gif") no-repeat 0 3px; }