/* BASE-8x6 12/7/2007 */

/* STANDARD FONTS */
body {font-size:76%; line-height:1.3} 
html, table {font-size: 100%} /* for IE 5 */ 
body * {font-size:1em} /* stop sizes compounding */
#banner {font-size:0.9em}
#menu {font-size:1.1em}
#pageheader .subheading {font-size:0.9em}
#content.internal {font-size:0.9em}
h1 {font-size:1.6em}
h2 {font-size:1.6em}
h3 {font-size:1.3em}
h4 {font-size:1em}
h5 {font-size:1em} 
h6 {font-size:0.9em} 
#leftareadiv {font-size:0.9em}
#content.internal .breadcrumb {font-size:0.9em}
#footer .menu-links ul {font-size:0.8em}
#footer .tools ul {font-size:0.8em}

/* Standard styles */
body {margin:0;padding:0;font-family:Verdana, Arial, Helvetica, sans-serif;background-color:#ccc}
a {text-decoration:none; color:#333} /* Note: For clarity Links are not underlined in obvious navigation areas. In body text links ARE underlined. */
a:hover{text-decoration:underline}
h1 a:hover{text-decoration:none} /* Workaround for H1 fields being used for anchorpoints for Accesskeys, giving spurious underlines though not hyperlinks */
a:visited{color:#505}
img {border:0}

/* PAGE STRUCTURE */
/* #wrapper puts nice edges on left and right and holds... */
/*	#container holds everything else...  banner, menu, content and footer */
/*		#banner holds standard top graphic etc... */
/*		#menu holds standard top navigation tabs and drop down menus */
/*		#content holds changing content... */
/*			#leftareadiv holds left navigation bar */
/*			#content-internal holds actual content */
/*		#footer holds standard footer items: menu-links (main channels), tools (Home, Contact Us etc.) and footer-dia (Logo etc.) */

#container {width:771px;margin:0 auto}

#banner {height:99px;background: url(../../images/banner.jpg) top left no-repeat;width:770px;margin-left:1px;float:left;line-height:1.2}
#banner .bannerimg {float:left;position:absolute;margin:0}
#banner .date {float:left; color:#900; margin:76px 0 0 106px}
*:first-child+html .date {position:absolute}  /* avoids IE problem where hotspot too far right */
#banner .banner-arrow {margin:0 0 -4px 0;background-color:#fff}
#banner .small-a a {font-size:1.1em;text-decoration:underline}
#banner .big-a a {font-size:2em;text-decoration:underline}

#access {text-align:right;margin:0 6px 0 0;float:right}
#access p {margin:2px 0; font-size:0.9em}

#searchbox {display:none} /* Searchbox needs JS, so hidden unless Javascript is enabled */
#searchbox input.searchfield {border:1px solid #ccc;color:#900;padding:3px}
#searchbox .search-go {border:none;padding:0; margin:5px 0 -6px -4px}
/* 04/12/2006 * html #searchbox .search-go {margin:0 -6px -4px -4px} */
#searchlink {margin:30px 6px 0 0}

.hide {display:none} /* Some items that need JS are hidden unless JS enabled */

/* MENU TABS */
#menu {width:771px;background-color:#333;font-family:Arial, Helvetica, sans-serif;float:left;line-height:1.2}
#nav {list-style-type:none; margin:0; padding:3px 0 0 6px}
#nav li {float:left; display:block; margin: 0 3px 0 0;padding:0 0 1px 0;width:124px}
#nav li.communitycentre {background-color:#faf}
#nav li.how-toguides {background-color:#9ff}
#nav li.links {background-color:#f99}
#nav li.hottopics {background-color:#fa5}
#nav li.casestudies {background-color:#ff6}
#nav li.about {background-color:#9f9}
#nav li a {color:#000;padding-left:8px;font-weight:bold; letter-spacing:-0.05em; background:url(../../images/corners-20.gif) left top no-repeat} /* was tabs/trans-left.gif */
#nav li a span {padding-right:2px;background: url(../../images/corners-20.gif) right top no-repeat} /* was tabs/trans-right.gif */
#nav li.how-toguides a{padding-left:5px;letter-spacing:-0.09em} /* Squeeze it in */
#nav a:visited{color:#000}
#menu a, #menu a span {display: block;float: left}
#menu:after {content:".";display: block;height: 0;clear: both;visibility: hidden}
#menu a, #menu a span {float: none}

/* DROPDOWN MENUS */
#nav li ul {position:absolute;display:none;background:none;width:200px;margin:0;padding:4px 0 0 0}
#nav li.communitycentre ul {background-color:#fcf}
#nav li.how-toguides ul a {background-color:#cff}
#nav li.links ul {background-color:#fcc}
#nav li.hottopics ul {background-color:#fc9}
#nav li.casestudies ul {background-color:#ff8}
#nav li.about ul {background-color:#cfc}
#nav li:hover ul, #nav li.over ul {display:block;z-index:6000}
#nav li ul li {width: 200px;padding:0;margin:0}
#nav li ul a {border-bottom:1px solid white;padding:4px 6px 4px 8px;letter-spacing:normal;font-weight:normal;color:#333;background:none}
#nav li.how-toguides ul a{padding-left:4px;letter-spacing:normal}  /* Undo above squeeze */
#nav li ul a:hover {font-weight: bold}

/* CONTENT */
/* CONTENT STRUCTURE is wrapper, breadcrumbs,  pageheader, content */  
#contentwrapper {background: url(../../images/bg-trans.gif) repeat-y top left} /* positions a transparent window for sidebar colour */
#content {background-color:#ebebeb;padding-bottom:7px}
#content:after {content: ".";display: block;height: 0;clear: both;visibility: hidden}

#content.internal {margin:2px 20px 0 190px; background-color:white; color:#333} /* leave margin to stop content wrapping in below left nav */
/* * html #content.internal {margin-left: 0px}  IE automatically keeps straight */

#content.internal .breadcrumb a {text-decoration:none}
#content.internal .breadcrumb a:visited {text-decoration:none}
#content.internal .breadcrumb a:hover {text-decoration:underline}

#pageheader h1 {font-weight:normal; margin-top:0.5em}
#pageheader .subheading {margin-top:-1.5em}  img {border:0}

#content.internal p {margin:8px 0}
#content.internal a:link { text-decoration:underline}

h2 {margin:20px 0 0 0}
#content.internal li h4 {margin:0; padding:0} 
#content.internal dt {margin-top:12px; font-weight:bold}
#content.internal li {margin-bottom:12px}
#content.internal dl, #content.internal ul.summary {margin:12px 0 0 0; padding:0}
#content.internal dt, #content.internal ul.summary li {background: url(../../images/arrow-trans.gif) top left no-repeat; padding:0 0 0 22px; color:#000} /* Text to black, for clarity if images switched off, giving coloured background */
#content.internal dt, #content.internal ul.summary li a{color:#000} 
#content.internal ul.summary li .updated {font-size:0.9em} 
#content.internal th, #content.internal td {text-align: left; vertical-align: text-top} 
#content.internal a:visited {text-decoration:underline}

/* ARROW BUTTON COLOURS (used mainly in Home Page) */
.arrow-communitycentre {background-color:#faf}
.arrow-how-toguides {background-color:#9ff}
.arrow-links {background-color:#f99}
.arrow-hottopics {background-color:#fa5}
.arrow-casestudies {background-color:#ff6}
.arrow-about {background-color:#9f9}
.arrow-white {background-color:#fff}

ul.summary {list-style: none;margin-left: 20px}
ul.summary h4 {padding: 0 0 .5em 0; margin-left: -20px}
ul.summary p {margin: 3px}

/* FORMS */
.formWrapper {float:left; padding:0 10px 10px 10px; margin-top: -10px; padding-top: 10px} /* float:left fixes Opera problem */

.column-left {clear:left; padding:3px 0 3px 0; font-weight:bold;float:left; margin:0; width:200px; text-align:left}
.column-right {padding:3px 0 3px 0; margin:0; width:304px; text-align:left}
.column-right-centre {padding:0; margin:0 3px 0 0}
.column-left-heading {clear:left; padding:3px 0 3px 0; float:left; margin:0; width:100%}
.column-left-heading h3 {padding:0}
.columns-span {clear:left; padding:5px 10px 0 10px; float:right; margin:0; width:520px; text-align: right}

/* FOOTER */
#footer {clear:both}
#footer .menu-links {background-color:#ebebeb;padding:12px 0 12px 0; height: 1%; font-weight:bold}  
#footer .menu-links:after {content: ".";display: block;height: 0;clear: both;visibility: hidden} /* Needed for non IE browsers */
#footer .menu-links ul {list-style-type:none}
#footer .menu-links ul li {border-right:1px solid #dadada;padding-left:12px;width:100px;float:left}
#footer .menu-links ul li.last {border-right:0}

#footer .tools {clear:both;font-weight:bold;margin-bottom:4px}
#footer .tools:after {content: ".";display: block;height: 0;clear: both;visibility: hidden}
#footer .tools ul {list-style-type:none;margin:4px 0 0 17px}
#footer .tools ul li {border-right:1px solid #dadada;padding:0 8px;float:left}
#footer .tools ul li.last {border-right:0}
#footer .footer-dia {background-color:#333;clear:both;color:#eee;font-size:0.8em;margin:0;padding:17px}
#footer .footer-dia p {margin:0}
#footer .footer-dia a {color:#eee}
#footer .compliancy {margin:0;visibility: hidden}
#footer .logo-dia {float:right}

/* LAYOUT 8x6  For 800*600 size screen 04/12/06 */
#wrapper{background:url(../../images/container-bg-8x6.gif) top center repeat-y;margin-left:1px}

#container{width:771px;background-color:#fff;padding:0}

/* homepage news panel - collapsed */


#website-news{border-top:1px solid #d9d9d9;background: url(../../images/website-news-top.gif) top center repeat-x; min-height:160px; clear:left}
#website-news h2 {color:#fff;font-size:1.01em;padding:5px 5px 5px 12px;margin:0;background: url(../../images/content-top.gif) left top no-repeat} /* was content-top-left.gif */
#website-news .content-box-col {width:222px;float:left;margin-top:6px;padding:0 8px 6px 12px;border-right:1px solid #dadada}
#website-news .content-box-col-end {width:212px;float:left;margin-top:6px;padding:0 8px 6px 12px}
#footer .menu-links ul {margin:0 0 0 12px}

/* END OF LAYOUT 8x6  For 800*600 size screen 04/12/06 */

/* HOMEPAGE styles 25/6/2007 NOTE: These styles could all have .homepage put in front, but all seem to be uniquely named without it */

#content {height: 1%} /* added height:1% for IE 7 */

#column-left{width:368px;float:left; margin-left:13px;color:#333;font-size:0.9em} 
#column-right{width:368px;float:left;margin-left:8px;color:#333;font-size:0.9em}

.content-box-head {border:1px solid #ccc; border-bottom:0; background:#fff3bf url(../../images/content-top.gif) right top no-repeat; line-height:1.0} /* image was content-top-right.gif */
*:first-child+html .content-box-head {background-image:url(../../images/content-top-right-ie.gif)}  /* IE needs different image */

#column-left .content-box-head h2 a, #column-right .content-box-head h2 a{color:#900}
.content-box-head h2 {color:#900;font-size:1.2em;margin:0;padding:5px 5px 5px 12px;background: url(../../images/content-top.gif) left top no-repeat} /* was content-top-left.gif */

#column-left .content-box, #column-right .content-box {width:368px;margin-top:6px}
#column-left .content-box-entry p, #column-right .content-box-entry p {margin:0;padding:6px}
#column-left .content-box-entry, #column-right .content-box-entry {border-left:1px solid #ccc;border-right:1px solid #ccc;background-color:#fff}
#column-left .content-box-bottom, #column-right .content-box-bottom {background-color:#fff;padding:6px;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc}

#column-left .content-box-head .updated, #column-right .content-box-head .updated {float:right;margin:-19px 7px 0 0;height:14px; font-size:0.9em}
#column-left .content-box-head .updated img, #column-right .content-box-head .updated img {margin-bottom:-4px}
#column-right .content-box-entry .updated {font-size:.9em}  

#website-news .content-box {margin:14px;color:#333}
#website-news .content-box-head h2, #website-news .content-box-head h2 a {color:#900;line-height:1.0}
#website-news .content-box-head .updated {float:right;margin:-19px 7px 0 0;height:14px}
#website-news .content-box-head .updated img {margin-bottom:-4px}
#website-news .content-box-entry {background-color:#ebebeb;min-height:122px; border-left:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #ccc;font-size:0.9em} 
#website-news .content-box-entry:after {content: ".";display: block;height: 0;clear: both;visibility: hidden}
#website-news .content-box-entry p {margin:4px 0}
#website-news .content-box-entry h4 {margin:4px 0}
#website-news .content-box-entry h4 a {text-decoration:none}
#website-news .content-box-entry a {text-decoration:underline}

/* New COMMON content section 25/6/2007 with changes to use class */
#top-colour-bar {height:4px; float:left; width:771px}

#leftareadiv {margin:0 0 0 1px; float:left; width:180px; border-top:3px solid #fff; border-left:2px solid #fff}
#leftareadiv .lhsnav-header {padding:6px}
#leftareadiv .lhsnav-header a {font-weight:bold; color:#000}

#leftnav {border:0 none; width:100%}
#leftnav ul {margin:0;padding:6px 0 0 0;list-style:none; list-style-image:none}
#leftnav li a {color:#000}
#leftnav li a.current {font-weight:bold}

#leftnav ul li {margin:0;padding:6px 6px 6px 18px; border-top:1px solid #fff}
#leftnav ul.level2 {margin-bottom:-6px}
#leftnav ul.level2 li {margin:0 -6px 0 -18px;padding-left:32px}
#leftnav ul.level3 {margin:6px 0 -6px 0}
#leftnav ul.level3 li {margin:0 -6px 0 -32px;padding-left:46px}

/* ABOUT 25/6/2007 Changes to use Class="About" */
/* About 5/12/06 L1 cfc,L2 dfd,L3 efe & IE 7 changes*/
#top-colour-bar.about, .about #leftareadiv, .about #content.internal dt, .about #content.internal ul.summary li {background-color: #9f9}
#contentwrapper.about, .about #leftnav ul.level1 li {background-color:#cfc}
.about #leftnav ul.level2 li {background-color:#dfd}
.about #leftnav ul.level3 li {background-color:#efe}

/* CASESTUDIES 25/6/2007 Changes to use Class="casestudies" */
/* CaseStudies 5/12/06 L1 #ff9, L2 #ffb, L3 #ffd & IE 7 changes */
#top-colour-bar.casestudies {background-color:#ff6}
.casestudies #leftareadiv, .casestudies #content.internal dt, .casestudies #content.internal ul.summary li {background-color:#ff6}
#contentwrapper.casestudies, .casestudies #leftnav ul.level1 li {background-color:#ff9}
.casestudies #leftnav ul.level2 li {background-color:#ffb}
.casestudies #leftnav ul.level3 li {background-color:#ffc}

/* NOTICEBOARD 25/6/2007 Changes to use Class=".communitycentre" (the old name for NoticeBoard) */
/* Notice Board 5/12/2006 colours to ffc0ff, ffd8ff, fef - less hot */
#top-colour-bar.communitycentre, .communitycentre #leftareadiv, .communitycentre #content.internal dt, .communitycentre #content.internal ul.summary li {background-color: #faf}
#contentwrapper.communitycentre, .communitycentre #leftnav ul.level1 li {background-color:#ffc0ff}
.communitycentre #leftnav ul.level2 li {background-color:#ffd8ff}
.communitycentre #leftnav ul.level3 li {background-color:#fef}

/* HOTTOPICS 25/6/2007 Changes to use Class=".hottopics" */
/* HotTopics: 05/12/06 Colors = L1 #FC8, fdb, fec */
#top-colour-bar.hottopics, .hottopics #leftareadiv, .hottopics #content.internal dt, .hottopics #content.internal ul.summary li {background-color: #fa5}
#contentwrapper.hottopics, .hottopics #leftnav ul.level1 li {background-color:#fc8}
.hottopics #leftnav ul.level2 li {background-color:#fdb}
.hottopics #leftnav ul.level3 li {background-color:#fec}

/* HOW-TOGUIDES 25/6/2007 Changes to use Class=".how-toguides " */
/* how-toguides - 5/12/2006 IE 7 & CRK L1 bff, L2 dff, L3 eff */ 
#top-colour-bar.how-toguides, .how-toguides #leftareadiv, .how-toguides #content.internal dt, .how-toguides #content.internal ul.summary li {background-color: #9ff}
#contentwrapper.how-toguides, .how-toguides #leftnav ul.level1 li {background-color:#bff}
.how-toguides #leftnav ul.level2 li {background-color:#dff}
.how-toguides #leftnav ul.level3 li {background-color:#eff}

/* LINKS 25/6/2007 Changes to use Class=".links " */
/* Links: 5/12/06 L1 #fbb, L2 fdd, L3 fee, changes for IE 7 */
#top-colour-bar.links, .links #leftareadiv, .links #content.internal dt, .links #content.internal ul.summary li {background-color: #f99}
 #contentwrapper.links, .links #leftnav ul.level1 li {background-color:#fbb}
.links #leftnav ul.level2 li {background-color:#fdd}
.links #leftnav ul.level3 li {background-color:#fee}

/* number of links to show selector */
#linksitemselector {float:right;z-index:6;background-color:White;border:solid 1px #f99;text-align:center;padding:1em;margin:0.5em;width:20em;color:#333;font-weight:bold;visibility:hidden}

/* managing well style */
.resHeading {width:15em;font-weight:bold;float: left}

/* COMMUNITY RESOURCE KIT (in How-ToGuides) crkwrapper, crk, red, tip, tipbox,checklist-box etc. -- */
/* 5/12/06 Changes green colour from #9eab05 to #808000; also changes for IE 7 */

#crkwrapper {padding:15px; margin:0; background-color:#eec; clear:none; color:#333}  /* Margin changed from -20px 0 -7px to avoid loss of left nav July 07 */

#crk {border:1px solid #808000; padding:0 20px 0 20px; color:#781f1c; background-color:#fff} 
#crk h2 {background:url(../../images/gr-hdr1.gif) no-repeat bottom left; background-color:#808000; color:#fff; margin: 0 -20px 0 -21px; padding:15px;padding-right:70px}
#crk h3 {background: url(../../images/gr-o-big.gif) no-repeat top left; margin-left:-30px; padding-left:30px; padding-right:0; padding-top:0; padding-bottom:2px}
#crk h3.red {background: url(../../images/red-circle-big.gif) no-repeat top left} /* 19/1/07 - url corrected */
#crk h3.checklist {background: url(../../images/cl-o-big.gif) no-repeat top left}
#crk h4 {background: url(../../images/gr-o-small.gif) no-repeat bottom left; margin-left:-26px; padding-left:26px; padding-right:0; padding-top:0; padding-bottom:0;text-transform: uppercase} 
#crk ul, ol {margin-left:2.5em; padding-left:.8em}  /* needs to be +1 em for Opera */
#crk p.footnote {font-size:0.8em}

/* CRK TABLES */
#crk table {padding:2px; background-color:white; border-color:#781f1c; border:0}  /* 19/1/07 - padding corrected */
#crk th {background: #781f1c; color:white; text-transform: uppercase} /* ALtered */
#crk td {border-color:#781f1c; border-bottom:1px solid #781f1c}
#crk td.col1 {background: #eec}

/* CRK TIP-BOX and TIP */
#tip-box, .tip-box {border:1px solid #808000; background-color:#eec; padding:0.5em 1em 0.5em 21px; margin: 10px -21px 0 -21px}
#tip-box footer, .crk-footer {border:1px solid #9eab05; background-color:#f6eee1;padding:0.5em 1em 0.5em 21px; margin: 10px -21px 0 -21px; font-size:0.8em}
#tip h1, h1.tip, p.tip {float:right; display: block; text-transform: uppercase; color:#fff; font-weight:bold; font-size:1em; margin:-0.6em -1em 0 0.5em; padding:0 10px 2px 10px; background-color: #808000}

/* CRK CHECKLIST-BOX */
#checklist-box, div.checklist-box {border:1px solid #808000; padding:5px 10px 5px 22px;background-color:#eec}
#checklist-box h4, h4.checklist-box {background: url(../../images/cl-o-big.gif) no-repeat top left; margin-left:-32px; padding:0 0 6px 32px}
#checklist-box h5, h5.checklist-box, #checklist-box li, li.checklist-box {background: url(../../images/cl-o-small.gif) no-repeat top left; margin-left:-28px;font-weight:normal; font-size:1em; padding-left: 28px}
#checklist-box ul, ul.checklist-box {list-style-image: url('none');list-style-type:none; margin-left:-9px} /* needs to be +1 em for Opera -3.7 em for IE 6? */
#checklist-box li>ul, li>ul.checklist-box {list-style-image: url('none');list-style-type:none;margin-left:20px}

/* CRK BOX */
#box, div.box {border:1px solid #808000; padding:5px 10px 5px 22px; background-color:#f6eee1}
#box h4, h4.box {background: url(../../images/gr-o-small.gif) no-repeat bottom left; margin-left:-50px; padding:0 0 0 50px} /* 54 for IE6? */