/* Provide a level field to start with */
html,body{margin:0;padding:0; border:none;}
/* Set font to 0.8 of the standard size, with line heigh 1.2 of the standard size
Font preference order also set, along with the centralise which causes IE to display the
site in the centre of the screen */
body{font: normal 0.8em/1.2em arial, helvetica, sans-serif;text-align:center; background-image: url(bg.gif); background-repeat: repeat-x;}
h1{padding: 0; margin: 0;}
/* Remove borders from all images - stops image links being displayed with horrible blue border */
img{border:none;}
/* Set text-align back to left, or it will inherit the centre specified by the body rule */
div#container{text-align:left}
div#navigation{background: White;}
div#rightCol{background:White;}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
/* A clear div is used in various places after a float. It stops anything after it floating as well */
div.clear{clear:both; line-height:0.05em;}
/* Set overall width of layout and give a minimum margin */
div#container{width:990px;margin:2px auto 0 auto; background: White;}
/* Set up the wrapper for the main content */
div#wrapper{float:left;width:800px; margin:0 auto 3px 3px; background: White;}
/* ------------------ Start of new css ------------------- */
div#welcome {border: 1px solid #06C; width: 450px; height: 265px; float:left; margin: 0 0 7px 0; background-image: url(bg7.gif); background-repeat: repeat-y; overflow:auto; background-position: right;}
div#welcome h2.Blue{background-color:#06C;}
.mainimage1 { width: 277px; height: 170px; float: left; border: 1px solid #06C; margin: 4px 5px 0 5px;}
li.red {color: Red;}
.important {border: 0px solid Red;}
p.centre {color:red; text-align:center;}
p.centre a {color:red; }
div#motiondiv {border: 0px solid red; width: 290px; height: 240px; float:left; background-color: #80b0e0; margin-right: 5px;}
div#motiondiv1 {border: 0px solid green; width: 290px; height: 182px; float:left; background-color: #ffffff; margin-right: 5px;}
div#blueback {border: 0px solid red; background-color:#80B0E0; float:left; width:290px; height: 40px;}
.motionhead {margin-bottom: 0px; line-height: 1.4em; font-size: 1.2em; margin-left: 5px; margin-top: 0.5px }
.motionpara {margin-bottom: 0px; line-height: 1.2em; margin-left: 5px; margin-top: 0.5px }
div#player {margin: 6px 0 -15px 6px; }
div#newtwo{border: 0px solid #F60; width: 342px; height: 265px; float:right; margin: 0 0 9px 0;}
div#fundraising{border: 1px solid #F60; width: 340px; height: 128px; float:left; margin: 0; background-image: url(bg2.gif); background-repeat: repeat-y; background-position: right; overflow: auto;}
div#fundraising h2.orange{background-color:#F60;}
.mainimage2 { float: right; height:128px; margin-bottom: -1px; }
div#news{border: 1px solid #cc0000; width: 340px; height: 128px; float:left; margin-bottom: 7px; overflow:auto;}
div#news h2.red{background-color:#cc0000;}
.mainimage3 { float: right; height: 105px; width: 105px; margin: 10px 10px 0px 0px; border: 1px solid #cc0000 }
div#membership{border: 1px solid #F60; width: 340px; height: 85px; float:left; margin: 0 0px 2px 0; background-image: url(bg6.gif); background-repeat: repeat-y; overflow:auto;}
div#membership h2.orange{background-color:#F60;}
.mainimage8 { height: 85px; width: 169px; float: left; border-right: 1px solid #F60; margin-bottom: -1px; margin-right: 7px; }
div#working{border: 1px solid #960; width: 450px; height: 85px; float:right; margin-bottom: 7px; background-position: left; background-image: url(bg3.gif); background-repeat: repeat-y; overflow:auto;}
div#working h2.brown{background-color:#b55800;}
.mainimage4 { height: 85px; float: right; margin-bottom: -1px;}
div#downloads{border: 1px solid #093; width: 450px; height: 85px; float:left; margin: 0 0 5px 0; background-image: url(bg5.gif); background-repeat: repeat-y; background-position: right; overflow:auto;}
div#downloads h2.green{background-color:#093;}
.mainimage6 { height: 75px; width: 75px; float: left; margin: 4px 5px 0 5px; border: 1px solid #093}
div#dialysis{border: 1px solid #309; width: 340px; height: 85px; float:right; margin-bottom: 6px; background-position: right; background-image: url(bg4.gif); background-repeat: repeat-y; overflow:auto;}
div#choices{border: 0px solid #309; width: 340px; height: 37px; float:right; margin-bottom: 6px; background-position: right; background-repeat: repeat-y; overflow:auto;}
div#content5 h2.purple{background-color:#309;}
div#Resilience{border: 0px solid #309; width: 450px; height: 37px; float:left; margin-bottom: 6px; background-position: right; background-repeat: repeat-y; overflow:auto;}
.mainimage5 { height: 75px; width: 75px; float: right; margin: 4px 5px 0 5px; border: 1px solid #309;}
.choices { height: 34px; width: 160px; float: right; margin: 0px 0px 0 0px; border: 0px;}
.disabledgo { height: 34px; width: 149px; float: right; margin: 0px 0px 0 0px; padding-right: 4px; border: 0px;}
.resilience { height: 34px; width: 176px; float: right; margin: 0px 0px 0 0px; border: 0px;}
div#news h2.red a, div#membership h2.orange a, div#fundraising h2.orange a, div#working h2.brown a, div#downloads h2.green a, div#dialysis h2.purple a {text-decoration: none; color: White;}
div#welcome h2, div#fundraising h2, div#news h2, div#working h2, div#dialysis h2, div#downloads h2, div#membership h2 { padding: 0 0 0 8px; font-size: 1.5em; line-height: 1.25em; margin: 0px; background-color:#06C; color: White;}
/* --
div#welcome ul { list-style-type: none; line-height: 2.8em; margin: 3px 0 0 10px; padding: 0; }
div#welcome li { list-style-type: none; margin: 3px 0 0 0px; padding: 0; }
div#welcome ul a {color: black; text-decoration: none; }
-- */
div#welcome ul, div#fundraising ul, div#news ul, div#working ul, div#dialysis ul, div#downloads ul, div#membership ul, div#content8 ul, div#content9 ul, div#content10 ul{ list-style-type: none; line-height: 1.2em; margin: 3px 0 0 10px; padding: 0; }
div#welcome ul a, div#fundraising ul a, div#news ul a, div#working ul a, div#dialysis ul a, div#downloads ul a, div#membership ul a {color: black; text-decoration: none; }
div#welcome ul a:hover, div#fundraising ul a:hover, div#news ul a:hover, div#working ul a:hover, div#dialysis ul a:hover, div#downloads ul a:hover, div#membership ul a:hover {color: black; background-color: black; color: white;}
div#welcome li, div#fundraising li, div#news li, div#working li, div#dialysis li, div#downloads li, div#membership li, div#content8 li, div#content9 li, div#content10 li{ margin-bottom: 1px; line-height: 1.4em; }
/* ------------------ End of new css ------------------- */
/* Set the width of the navigation bar and bring it back to the left hand side */
div#navigation {
float:left;
width:181px;
padding: 0;
margin-right: 6px;
}
div#navigation ul{
list-style-type: none;
margin: 0;
padding: 0;
}
div#navigation li{margin-bottom: 1px;}
div#navigation a{
color: Black;
position: relative;
display: block; /* so that the link fills the menu width */
width: 181px;
background-color: #9CF;
text-decoration: none;
padding: 1px 0 1px 4px;
}
div#navigation a.Blue, div#navigation a.Orange, div#navigation a.Purple, div#navigation a.Green, div#navigation a.Pink {color: White;font-weight: bold; padding: 2px 0 2px 4px;}
div#navigation a.LightOrange {background-color:#fc9;}
div#navigation a.LightPurple {background-color:#bdbdff;}
div#navigation a.LightGreen {background-color:#cfc;}
div#navigation a.LightPink {background-color:#debdde;}
/* different class links have different colours... */
div#navigation a.Blue{background-color:#06C;}
div#navigation a.Orange{background-color:#F60;}
div#navigation a.Purple{background-color:#309;}
div#navigation a.Green{background-color:#093;}
div#navigation a.Pink{background-color:#906;}
/* ... but they all do the same when you hover over them */
div#navigation a:hover{background-color: White;color: Black;}
/* Set up Centre column */
div#content{border: 0px solid red; width: 607px; float:left;}
/* Set up Right hand column */
/* Set the width of the right hand side column and position it */
div#rightCol{float:left;width:189px; height: 400px; padding:0; border:0px solid blue;margin-left:-190px;}
div#rightColUpper{margin: 0;padding: 0; height: 400px; }
div.rightColUpperBlue {background:#DBEDFF;}
div.rightColUpperOrange {background:#FFDEBD;}
div.rightColUpperPurple {background:#BDBDFF;}
div.rightColUpperGreen {background:#DEFFDE;}
div.rightColUpperPink {background:#DEBDDE;}
div#rightColUpper a{
color: Black;
font-weight: bold;
text-decoration: none;
}
div#rightColUpper a:hover{
text-decoration: underline;
}
div.rightColHeader {
margin: 0;
padding: 2px 0 2px 4px;
background-color: #06C;
color: White;
font-weight:bold;
}
div#rightCol img.imageLink{
border: 1px solid black;
margin: 2px 6px;
margin-right: 6px;
padding:0;
width: 70px;
height: 70px;
display: inline; /* so that the text is next to it */
}
div.newsItemLeft, div.newsItemRight{
margin: 11px 0;
padding: 0;
clear: both;
}
div.newsItemLeft div, div.newsItemRight div{margin: 0 6px;}
div.newsItemLeft img{float: right;}
div.newsItemRight img{float: left;}
div#nhslinks {
width: 180px;
height: 76px;
background-color: White;
border: 0px solid black;
margin: 3px 0 0 0;
}
div#nhslinksHOME {
width: 162px;
height: 76px;
background-color: White;
border: 0px solid black;
margin: 3px 0 0 0;
}
div#nhsimg1 {
border: 0px solid blue;
width: 90px;
height: 60px;
margin: 1px 0 0 0;
float: left;
}
div#nhsimg3 {
border: 0px solid blue;
width: 162px;
height: 76px;
margin: 1px 0 0 0;
float: left;
}
div#nhsimg3 a {
color: White;
position: relative;
display: inline;
width: 162px;
background-color: White;
text-decoration: none;
}
div#nhsimg2 {
border: 0px solid red;
width: 90px;
height: 60px;
float: right;
margin: 1px 0 0 0;
}
div#nhsimg1 a, div#nhsimg2 a {
color: White;
position: relative;
display: inline;
width: 90px;
background-color: White;
text-decoration: none;
}
p.floatTextBlue { color:#06C; font-style: italic; font-weight: bold; width: 240px; float: right; border: 7px solid white; font-size: 1.3em}
p.floatTextBlueSmall {color:#F60; font-style: normal; font-weight: bold; font-size: 0.9em}
p.floatTextOrange {color:#F60; font-style: italic; font-weight: bold; font-size: 1.3em}
p.floatTextOrangeSmall {color:#F60; font-style: normal; font-weight: bold; font-size: 0.9em}
p.floatTextPurple {color:#309; font-style: italic; font-weight: bold; width: 240px; float: right; border: 7px solid white; font-size: 1.3em}
p.floatTextPurpleSmall {color:#F60; font-style: normal; font-weight: bold; font-size: 0.9em}
p.floatTextGreen {color:#093; font-style: italic; font-weight: bold; width: 240px; float: right; border: 7px solid white; font-size: 1.3em}
p.floatTextGreenSmall {color:#F60; font-style: normal; font-weight: bold; font-size: 0.9em}
p.floatTextPink {color:#906; font-style: italic; font-weight: bold; width: 240px; float: right; border: 7px solid white; font-size: 1.3em}
p.floatTextPinkSmall {color:#F60; font-style: normal; font-weight: bold; font-size: 0.9em}
span.floattext {
float: right;
border: 5px solid white;
width: 240px;
}
/* Set up the footer */
div#footer{clear:left;width:100%}
div#footer{ background-color:#06c; color: White; padding: 3px 0; text-align: center; font-size: 0.85em; }
div#footer a { color: White; font-weight: bold; }
span#footerText{text-align: center; position: relative; top: 0; margin: 0; padding: 0;}
div#bannerDiv {
position: relative;
top: 1px;
height: 41px;
}
div.searchTool {
background-color: #CCC;
margin:0;
padding: 7px 3px;
width: 179px;
float: left;
}
span.topLinks {
margin: 0;
padding: 0;
position: relative;
top: 9px;
left: 33px
}
span.topLinks a {
padding: 2px 3px;
color: Black;
text-decoration: none;
}
span.topLinks a:hover {background-color: #06C; color: White;}
span#topTextButtons {position: relative; top: -1px;}
.chooser {font-size: 12px;}
div.searchTool input.txtSearch {width: 100px;}
/* Set up the logo */
#logoImg {
position: absolute;
top: 0;
right: 0;
}
/* Centre Content */
/* Content Section Styling */
div#content h1{
color: Black;
padding: 12px 0 5px 0;
font-size: 1.8em;
margin: 0;
line-height: 1.4em;
}
div#content h2{
font-size: 1.7em;
padding: 12px 0 5px 0;
margin: 0;
line-height: 1.4em;
}
div#content h3{
font-size: 1.4em;
padding: 12px 0 5px 0;
margin: 0;
line-height: 1.4em;
}
div#content h4{
font-size: 1.3em;
padding: 12px 0 4px 0;
margin: 0;
line-height: 1.4em;
}
div#content h5{
font-size: 1.2em;
padding: 12px 0 4px 0;
margin: 0;
line-height: 1.4em;
}
div#content h6{
font-size: 1.1em;
padding: 12px 0 4px 0;
margin: 0;
line-height: 1.4em;
}
div#content a{color: #06C;}
div#content a:hover {text-decoration: none;}
div#content p{line-height:1.2em;}
div#content ul{
margin-top: 0;
margin-bottom:0.8em;
}
#content h1.blueHead{
background-color:#06C;
font-size: 1.8em;
padding: 5px;
line-height: 1.1em;
margin: 0px 0px 5px 0px;
color: White;
}
#content h1.orangeHead{
background-color:#F60;
font-size: 1.8em;
padding: 5px;
line-height: 1.1em;
margin: 0px 0px 5px 0px;
color: White;
}
#content h1.purpleHead{
background-color:#309;
font-size: 1.8em;
padding: 5px;
line-height: 1.1em;
margin: 0px 0px 5px 0px;
color: White;
}
#content h1.greenHead{
background-color:#093;
font-size: 1.8em;
padding: 5px;
line-height: 1.1em;
margin: 0px 0px 5px 0px;
color: White;
}
#content h1.pinkHead{
background-color:#906;
font-size: 1.8em;
padding: 5px;
line-height: 1.1em;
margin: 0px 0px 5px 0px;
color: White;
}
#content img.floatLeft{float: left; margin: 3px 8px 3px 0;}
#content img.floatRight{float: right; margin: 3px 0 3px 8px;}
#content img.up10px{position:relative; top: -8px;}
#content p{margin: 0; padding: 3px 0;}
div#content div.FourSectionPageLeft{
float: left;
width: 49%;
position: relative;
border: 1px solid #eee;
line-height: 1.5em;
font-size: 0.9em;
background-color: #DBEDFF;
margin-top: 5px;
}
div#content div.FourSectionPageRight{
float: right;
width: 49%;
position: relative;
border: 1px solid #eee;
line-height: 1.5em;
font-size: 0.9em;
background-color: #DBEDFF;
margin-top: 5px;
}
div#content div.FourSectionPageLeft img, div#content div.FourSectionPageRight img{
float:left;
display: inline;
margin: 6px;
border: 1px solid black;
}
div#content div.FourSectionPageLeft span.SectionTitle, div#content div.FourSectionPageRight span.SectionTitle{
font-size: 1.5em;
line-height: 1.4em;
padding-bottom: 3px;
font-weight:bold;
}
div#content div.FourSectionPageLeft a, div#content div.FourSectionPageRight a{color: Black; text-decoration: none;}
div#content div.FourSectionPageLeft a:hover, div#content div.FourSectionPageRight a:hover{color: White; background-color: Black;}
/* Styling for Sub-Sub-Menu pages */
div.subMenuLeft {
float: left;
width: 49%;
position: relative;
margin-bottom: 5px;
border: 1px solid #eee;
}
div.subMenuRight {
float: right;
width: 49%;
position: relative;
margin-bottom: 5px;
border: 1px solid #eee;
}
img.subSubImg {
float: left;
height: 40px;
width: 40px;
margin: 3px;
margin-right: 8px;
}
div#content div.subMenuLeft a, div#content div.subMenuRight a {
font-size: 1.0em;
font-weight: bold;
position: relative;
top: 14px;
color: Black;
text-decoration: none;
}
div#content div.subMenuLeft a:hover, div#content div.subMenuRight a:hover {text-decoration: underline;}
p.introText {
padding: 0;
margin:0;
margin-bottom: -10px;
}
/* Search Page Styling */
ul.resultsList {
display: block;
background-color: #9cf;
margin:0;
margin-bottom: 10px;
padding: 5px;
}
ul.resultsList li {list-style: none; margin: 4px 0;}
input.searchPageTextBox {width: 200px;}
p.pageControlLinks {text-align: center;}
table.resultsTable {border: none;}
a.resultLink {
font-weight: bold;
text-decoration: none;
color: #06C;
}
a.resultLink:hover {text-decoration: underline;}
span.resultDate {color: #AAA; font-style: italic;}
span.resultURL {color: #093; font-style: italic;}
h2.resultsHeader {
background-color: #DBEDFF;
line-height: 1.3em;
margin: 5px 0 8px 0;
padding: 0;
padding-left: 5px;
font-size: 1.1em;
}
/* CSS for site plan */
#siteplanbox {position: relative;height: 771px;width: 603px;border: 0 ;}
div.float {float: left;}
.image1 {border: 0px;width: 300px; height: 400px;margin: 0;}
.image2 {border: 0px; width: 303px; height: 400px; margin: 0;}
.image3 {border: 0px;width: 300px; height: 371px; margin: 0;}
.image4 {border: 0px;width: 303px; height: 371px; margin: 0;}
* html div#siteplanbox .image3, * html div#siteplanbox .image4 {position: relative;top: -4px;}
#siteplanbox1 {position: relative;height: 464px;width: 432px;border: 0 ;}
div.float {float: left;}
.1image1 {border: 0px;width: 216px; height: 232px;margin: 0;}
.1image2 {border: 0px; width: 216px; height: 232px; margin: 0;}
.1image3 {border: 0px;width: 216px; height: 232px; margin: 0;}
.1image4 {border: 0px;width: 216px; height: 232px; margin: 0;}
/* CSS for Cycle Map */
#cyclebox {position: relative;height: 380px;width: 590px;border: 0 ;}
.cycleimage1 {border: 0px;margin: 0;}
.cycleimage2 {border: 0px;margin: 0;}
.cycleimage3 {border: 0px;margin: 0;}
/* "* html" hides the rule from everything except IE */
* html div#cyclebox .cycleimage2 {position: relative;top: -4px;}
* html div#cyclebox .cycleimage3 {position: relative;top: -8px;}
table#contactUs {width: 80%;}
table#contactUs td.leftCell{width: 30%;text-align:right;padding-right: 10px; }
table#contactUs td.rightCell{width: 50%;text-align:left; padding: 3px 0;}
table#contactUs input.textBoxes {width: 255px;}
/* Central CSS */
div.centreMe {
width: 80%;
margin: 0 auto;
}
div#content table.tblLinks td {
text-align: left;
padding: 0;
vertical-align: top;
border-left: 1px solid white;
border-bottom: 1px solid white;
background-color: #9CF;
height: 1em;
width: 50%;
}
div#content table.tblLinks td a {
position: relative;
text-decoration: none;
padding: 3px 0 3px 6px;
margin-right: -6px;
display: block;
width: 100%;
color: Black;
}
div#content table.tblLinks td a:hover {color: White; }
div#orangehr { clear: both; border-bottom: 3px solid #F60;}
/* Page below no longer used */
/* Clear the margins of the pager div to clear the sidebars, then set the rest of it up */
div#pager{
margin: 0;
padding: 0;
border: none;
background-color: White;
font-size: 1.2em;
}
div#innerPager {
margin: -4px 210px 0 190px;
text-align:right;
font-weight: bold;
text-decoration: none;
color: Black;
padding-bottom: 6px;
}
div#innerPager a {
text-decoration: none;
color: #06C;
}
/* ---------------------- news ----------------------- */
.newsHeadlineCell { }
.newsHeadline {font-size: 1.5em;}
.newsSource {}
.newsSummary {}
.newsHeadlineDate {}
.newsFeatured {}
span.rightColList ul { list-style-type: square; margin: 0 0 0 19px; padding: 0; }
span.rightColList li { margin-bottom: 3px; }
span.rightColList a { color: Black; text-decoration: none; font-weight: normal; margin: 0 0 -5px 0; }
span.rightColList a:hover { font-weight: normal; text-decoration: underline; color:#000; }
.subNewsHeadlineCell {}
.subNewsHeadline {color: #06C; font-size: 1.6em;}
.subNewsSource {}
.subNewsSummary {font-size: 1.2em;}
.subNewsHeadlineDate {}
.subNewsFeatured {}
.subNewsHeadlineCell {}
/* ---------------------- videos ----------------------- */
div#video {border: 0px solid red; float:left; width: 280px}
div#text {border: 0px solid blue; float:left; width: 325px}
div#text a {color: #06c; text-decoration: none; }
div#text a:hover{color: #06c; text-decoration: underline; }
.videoHead { font-size: 1.1em; margin: 0;}
div#clearVid { clear: both; border-bottom: 3px solid #06c;}
td.boldtext { font-weight: bold;}
tr.yellow td {border-top: 1px solid #06c;border-bottom: 1px solid #06c;background: #9cf;}
.vidtable td {border-left: 0px solid blue}
div#noflash {
border: 0px solid red;
height: 163px;
width: 277px;
background-image: url(welcome.jpg);
text-align: center;
}
div#navigation a.white{background-color: white;}
/* ---------------------- document icons ----------------------- */
a.ppt {background: transparent url(../images/ppt.gif) no-repeat scroll right center;padding-right: 20px;}
a.xls {background: transparent url(../images/xls.gif) no-repeat scroll right center;padding-right: 20px;}
a.pdf {background: transparent url(../images/pdf.gif) no-repeat scroll right center;padding-right: 20px;}
a.doc {background: transparent url(../images/doc.gif) no-repeat scroll right center;padding-right: 20px;}
a.ext {background: transparent url(../images/ext.gif) no-repeat scroll right center;padding-right: 15px;}
a.int {background: transparent url(../images/int.png) no-repeat scroll right center;padding-right: 15px;}
a.pptx {background: transparent url(../images/pptx.png) no-repeat scroll right center;padding-right: 15px;}
a.docx {background: transparent url(../images/docx.png) no-repeat scroll right center;padding-right: 15px;}
a.xlsx {background: transparent url(../images/xlsx.png) no-repeat scroll right center;padding-right: 15px;}
a.outlook {background: transparent url(../images/outlook.png) no-repeat scroll right center;padding-right: 15px;}
ul.doc li, li.doc {background-image:url(../images/doc.gif);}
ul.pdf li, li.pdf {background-image:url(../images/pdf.gif);}
ul.xls li, li.xls {background-image:url(../images/xls.gif);}
ul.ppt li, li.ppt {background-image:url(../images/ppt.gif);}
ul.ext li, li.ext {background-image:url(../images/ext.gif);}
ul.pptx li, li.pptx {background-image:url(../images/pptx.png);}
ul.docx li, li.docx {background-image:url(../images/docx.png);}
ul.xlsx li, li.xlsx {background-image:url(../images/xlsx.png);}
ul.outlook li, li.outlook {background-image:url(../images/outlook.png);}
ul.int li, li.int {background-image:url(../images/int.png);}
ul.int li, li.int, ul.pdf li, li.pdf, ul.doc li, li.doc, ul.xls li, li.xls, ul.ppt li, li.ppt, ul.ext li, li.ext, ul.pptx li, li.pptx, ul.xlsx li, li.xlsx, ul.docx li, li.docx, ul.outlook li, li.outlook {
background-position:0 3px;
background-repeat:no-repeat;
list-style-type:none;
margin-left:0;
padding:5px 25px;
}