/* Sheffield Mutual CSS */

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	background-color: #FFFCDF;
	font-size: 12px;
	line-height: 14px;
	margin: 5px;
	border: 0;
	padding:0;
}

/* The main wrapper */
#wpr {
	position: relative;
	width: 980px;
	margin: 0 auto;
	border: 0;
	padding: 0 0 3px 0; /* Padding-bottom is space below footer */
	background: 0 0 url(../images-design/wpr-bg.gif) repeat-y #FFFFFF;
}

#content {
	position: relative;	
	width: 751px; /* Width = 750 + 1px to overlap 1px-wide shading on LH grey background */
	height: 820px;	/* IE takes this as the height and then incorrectly re-sizes if required */
	text-align: left;
	margin: 0 0 10px 229px; /* margin at bottom is distance between end of content and footer */
	border: 0;
	padding: 147px 0 0 0; /* padding top set rather than margin-top for Firefox */
	background-color: #FFFFFF;
}
/* Standards compliant browsers recognise this height setting */
html>body div#content {
  height: auto;
  min-height: 820px;
}

/* Banner within #Content */
#bnr {
	position: relative;
	top: 0;
	left: 0;
	width: 751px;
	height: 197px;
	background: 0 0 url(../images-design/ethical-investment-sheffield-mutual.jpg?v=2) no-repeat; /* Your future is our business */
	margin: 0; border: 0; padding: 0;
}
div#bnr.bnr-products {background-image: url(../images-design/ethical-investment-products.jpg?v=2);} /* Products */

/* Add right padding and a bit of space between points in lists within the content area */
div#content ol, div#content ul {padding-left: 60px;}
div#content li {margin-bottom: 0.5em;}

#content ul ul, #content ul ul ul, #content ul ul ul ul {margin-top: 8px;} /* Add space before lists for each sub-menu level - used by site map */

p {
	text-align: left;
	font-size: 12px; 
	line-height: 14px;
	margin: 0;
	border: 0;
	padding: 10px 40px 4px 40px;
}

/* Highlighted paragraph */
p.highlight {
	background-color: #F7D166;
	font-size: 14px; 
	line-height: 16px;
	color: #000000;
	margin: 10px 40px 4px 40px;
	padding: 10px;
}

/* Standard headings */

h1, h2, h3, .h1, .h2, .h3 {
	font-weight: normal;
	margin: 0;
	border: 0;
	padding: 14px 10px 0 40px;
}


h1, .h1 {
	color: #076010;
	font-size: 24px;
	line-height: 25px;
}

h2, .h2 {
	color: #076010;
	font-size: 19px;
	line-height: 21px;
}

h3, .h3 {
	color: #7F7507;
	font-size: 17px;
	line-height: 19px;
}

/* Additional styles for content */
.centrealign {text-align: center;}
.rightalign {text-align: right;}
.nobold {font-weight: normal;}

hr {
	color: #FFF2CF;
	background-color: #FFF2CF;
	height: 1px;
	margin: 10px 20px 10px 40px; /* Margin left/right is as for p padding */
}

/* Image styles */
img.right, img.right-no-border {
	float: right;
	margin: 5px 0 3px 10px;
	border: 1px solid #000000;
	padding: 0;
}

img.left, img.left-no-border {
	float: left;
	margin: 5px 10px 3px 0;
	border: 1px solid #000000;
	padding: 0;
}

img.right-no-border, img.left-no-border, img.nb {border: 0;} /* No border option */

/* Class to hide elements so they can be pre-loaded */
.hdn {display: none;}

img {
	background-position: center;
	vertical-align: middle;
}

/* Basic links */
a {
	color: #001B35;
	text-decoration: underline;
    font-weight: bold;
}
a:hover {color: #9A6600;}

a img {border: 0;}

dfn { /*  A definition term */
	text-align: left;
	font-size: 12px; 
	line-height: 14px;
	font-weight: bold;
	font-style: normal;
}
dfn:hover {cursor: pointer;}

/* Header */
#hd {
	position: absolute;
	width: 100%;
	height: 147px;
	top: 0;
	left: 0;
	background-color: #FFFFFF;
	margin: 0; border: 0; padding: 0;
}

img#hd-sm-logo {
	position: absolute;
	top: 40px;
	left: 24px;
	width: 234px; height: 76px; /* Image is not re-sized but stating size speeds up rendering */
	border: 0;
}

img#hd-txt { /* Image text at top-right of header */
	position: absolute;
	top: 48px;
	left: 539px;
	width: 417px; height: 70px;
	border: 0;
}

div#hd-txt { /* Text at top-right of header */
	position: absolute;
	top: 48px;
	left: 416px;
	width: 540px; height: 70px;
	font-family: 'trebuchet ms', Verdana, Arial, Helvetica, sans-serif;
	color: #076010;
	font-size: 30px;
	line-height: 30px;
	text-align: right;
	margin: 0; border: 0; padding: 0;
}

/* Left hand bar */
div#lhb {
	position: absolute;
	left: 0;
	top: 147px;
	width: 229px;
	height: 197px; /* For IE */
	margin: 0; border: 0; padding: 0;
}
html>body div#lhb {
  height: auto; 
  min-height: 197px;
}

/* Left hand menu - within #lhb */
div#nav {
	position: relative;
	left: 0;
	top: 0;
	width: 229px;
	height: 197px; /* For IE */
	background-color: #076010;
	margin: 0; border: 0; padding: 0;
	z-index: 500; /* Required in IE to make pop-out appear over footer, in Mozilla the z-index set on '#nav ul' is sufficient */
}
html>body div#nav {
  height: auto; 
  min-height: 197px;
}

/* Remove list bullets */
#nav li {
	position: relative; /* Fix position of menu list */
	list-style-type: none;
	background: 24px 21px url(../images-design/nav-top-bg.gif) no-repeat #076010;	/* left top, Underlined background */
	margin: 0 0 3px 0; /* Bottom margin is gap below each item. Removed below for sub-menus to fix IE and Opera hover bug */
	margin: 0;
}
#nav li:hover {background-image: url(../images-design/nav-top-bg-hvr.gif);}

/*Remove bottom border from Contact Us menu node */
#nav li#mn8 {background-image: none;}


/* Remove sub-list indents */
#nav ul {
	margin: 0; border: 0; padding: 0;
	width: 229px;	/* Set width of all menu levels. To specifiy a different width at lower levels define for ul ul, ul ul ul, etc */
	z-index: 500;
}

/* Fix position of sub-menus */
#nav ul ul {
	position: absolute;
	top: 0;
	left: 100%;
}

/* Hide sub menus by default */
#nav ul ul,
#nav ul ul ul {display: none;}
#nav ul li:hover ul ul,
#nav ul li:hover ul ul ul {display: none;}

/* Show submenus on rollover */
#nav ul li:hover ul,
#nav ul ul li:hover ul,
#nav ul ul ul li:hover ul {display: block;}

/* Menu colour & display settings */
#nav ul a:hover, #nav ul a:active {
	display: block;
	color: #FEF2A0;
}
	
#nav ul a { /* Note ul a:visited is not styled here to be the same as 'ul a' because a Firefox bug then prevents a:hover from working */
	display: block;
	color: #FFFFFF;
	font-size: 13px;
	line-height: 15px;
	text-decoration: none;
	font-weight: normal;
	margin: 0; border: 0;
	padding: 4px 1px 5px 25px;
}

/* Opacity settings */
#nav ul ul li {
	/* filter: alpha(opacity=95);  - Cannot set opcacity in IE, the opacity works but it breaks the pop-out functionality! For IE, 0 to 100 */
	opacity: 0.95;              /* CSS3 standard (not yet supported), 0 to 1 */
	-moz-opacity: 0.95;         /* for Mozilla, 0 to 1 */
} 
/* Remove opacity on hover */
#nav ul ul li:hover {
	/*filter: alpha(opacity=100);*/
	opacity: 1;
	-moz-opacity: 1;
}

/* Set sub-menu display properties default */
#nav ul ul a {
	display: block;
	color: #FFF7DF;
    background-color: #9F8127;
	margin: 0; border: 0;
	padding: 5px 1px 5px 5px;
}
	
/* Set sub-menu 1 font colour on hover */
#nav ul ul a:hover, #nav ul ul a:active {
	color: #FFFFFF;
	background-color: #7F671F;
	background-image: none;
}

/* Set sub-menu 2 font colour default */
#nav ul ul ul a {
	color: #FEF2A0;
    background-color: #9A6601;
}

/* Set sub-menu 2 font colour on hover */
#nav ul ul ul a:hover, #nav ul ul ul a:active {
	color: #FFFFFF;
	background-color: #5F3E00;
}

/* Set sub-menu 3 */
#nav ul ul ul ul a {
	color: #DFFFE3;
	background-color: #406F0D;
}

/* Set sub-menu 3 on hover */
#nav ul ul ul ul a:hover, #nav ul ul ul ul a:active {
	color: #FFFFFF;
	background-color: #2E4F0A;
}

/* Bottom margin removed for sub-menus and replaced with bottom border as IE and Opera don't honor hover over the bottom margin gap */
#nav li li {margin: 0;}
#nav ul ul a {border-bottom: 1px solid #6F5A1B;}
#nav ul ul ul a {border-bottom: 1px solid #8F5E00;}
#nav ul ul ul ul a {border-bottom: 1px solid #375F0C;}

div#lhb div.ql { /* Quick link within #lhb */
	position: relative;
	background-color: #F7D166;
	margin: 4px 16px 4px 14px;
	border: 0;
	padding: 9px 9px 13px;
}

div#lhb div.ql a {
	display: block; /* Causes excess space top & bottom in IE6 */
	color: #076010;
	font-size: 18px;
	line-height: 19px;
	text-decoration: none;
	font-weight: normal;
	margin: 0; border: 0; padding: 0;
}
div#lhb div.ql a:hover {color: #0AAF19;}

/* Green background */
div#lhb div.ql-green {background-color: #598A5B;}
div#lhb div.ql-green a {color: #F7D166;}
div#lhb div.ql-green a:hover {color: #FFFFFF;}

/* Quick link box within #lhb for news, IFA login, Search */
div#lhb div.qlbox {
	position: relative;
	width: 200px;
	height: 40px;
	margin: 4px 14px;
	border: 0; padding: 0;	
	background: 0 0 url(../images-design/qlbox.jpg) repeat-y #F7D166;
}
html>body div#lhb div.qlbox {
  height: auto; 
  min-height: 40px;
}

div#lhb div.qlbox div.top, div#lhb div.qlbox div.btm {
	position: absolute;
	left: 0;
	width: 100%;
	height: 6px;
	background: 0 0 no-repeat;
	margin: 0; border: 0; padding: 0;	
}
div#lhb div.qlbox div.top {
	background-image: url(../images-design/qlbox-top.jpg);
	top: 0;
}
div#lhb div.qlbox div.btm {
	background-image: url(../images-design/qlbox-btm.jpg);
	bottom: 0;
	font-size: 1px; line-height: 1px; /* Fix IE height bug */
}

/* News items within div#lhb div.qlbox */
div#lhb div.qlbox p.qlbox-hd {
	font-size: 20px;
	line-height: 21px;
	font-weight: normal;
	color: #076010;
	margin: 0; border: 0; padding: 7px 2px 0 9px;	
}
div#lhb div.qlbox div.news-item {
	margin: 0; border: 0; padding: 7px 2px 0 9px;
	background: 7px bottom url(../images-design/qlbox-news-item.gif) no-repeat; /* Hidden on last news item by div.btm */
}
div#lhb div.qlbox div.news-item p.hd { /* News item heading */
	margin: 0; border: 0; padding: 0 0 2px 0;
}
div#lhb div.qlbox div.news-item p.hd a {color: #088F14}
div#lhb div.qlbox div.news-item p.hd a:hover {color: #0CCF1D}

div#lhb div.qlbox div.news-item p { /* News item preview text */
	margin: 0; border: 0; padding: 0 0 12px 0;
}

/* Search site and IFA login box */
div#lhb div.qlbox form {margin: 0; border: 0; padding: 0;}

div#lhb div#searchbox {height: 53px;}
div#lhb div#ifaloginbox {height: 125px;}

div#lhb div.qlbox label {
	display: block;
	font-size: 12px;
	line-height: 12px;
	font-weight: normal;
	color: #000000;
	margin: 0; border: 0;
	padding: 10px 0 4px 10px;
}

div#lhb div.qlbox input.hdn {display: none;}

div#lhb div.qlbox input {
	display: block; /* Unhides hidden fields but fix this with .hdn */
	width: 149px;
	height: 16px;
	font-size: 12px;
	line-height: 12px;
	font-weight: normal;
	color: #000000;
	background-color: #FFFFFF !important;  /* Override Google toolbar autosuggestion */
	margin: 0 0 0 10px;
	border: 1px solid #B4B2B3;
	padding: 0;
}
div#lhb div.qlbox div.go-btn {
	position: absolute;
	left: 162px;
	width: 24px; height: 16px;
	background-color: #46423F;
	margin: 0;
	border: 1px solid #8B8786;
	padding: 0;
}
div#lhb div#searchbox div.go-btn {top: 26px;} /* Fixed for IE6/7 in iehoverfix.css */
div#lhb div#ifaloginbox div.go-btn {top: 98px;} /* Fixed for IE6/7 in iehoverfix.css */

div#lhb div.qlbox div.go-btn:hover {
	cursor: pointer;
	background-color: #0D4508;
	border: 1px solid #F7D166;
}
div#lhb div.qlbox div.go-btn p {
	font-size: 12px;
	line-height: 12px;
	font-weight: normal;
	color: #FFFFFF;
	margin: 0; border: 0; padding: 1px 0 0 3px;
}

/* Left hand sub-menu - within #lhb */
div#sm {
	position: relative;
	background-color: #D1CDCC;
	margin: 0; border: 0;
	padding: 12px 0;
}
div#lhb div#sm {background-color: #D1CDCC;}

/* ul within #sm and .qlbox (.qlbox defined below) */
/* Remove list bullets */
div#sm ul, div#content div.qlbox ul {
	margin: 0 0 0 25px;
	border: 0; padding: 0;
}
div#sm li, div#content div.qlbox li {
	position: relative; /* Fix position of menu list */
	list-style-type: none;
	width: 190px; /* Required to fix IE top & bottom extra space bug */
	margin: 0; border: 0; padding: 0;
}
div#sm li a, div#content div.qlbox li a {
	display: block; /* Causes excess space top & bottom in IE6 */
	color: #076010;
	font-size: 13px;
	line-height: 15px;
	text-decoration: none;
	font-weight: normal;
	background: 0 center url(../images-design/sm-blt.gif) no-repeat;
	margin: 0; border: 0;
	padding: 2px 1px 4px 12px;
}
div#sm li a:hover, div#content div.qlbox li a:hover {
	color: #0AAF19;
	background-position: 3px center;
}
div#content div.qlbox li a:hover {color: #0AAF19;}

/* More densly packed in qlbox */
div#content div.qlbox ul {margin: 5px 0 0 13px;}
div#content div.qlbox li {width: 185px;}
div#content div.qlbox li a {
	font-size: 11px;
	line-height: 11px;
	padding: 0 0 2px 12px;
}

/* Quick link boxes within #content for Products Child Trust Fund */
div.qlbox-wpr {/* Wrapper div required to fix IE doubling of left/right padding bug */
	position: relative;
	height: 275px;
	margin: 20px 0 15px 40px;
	border: 0; padding: 0;
}

div#content div.qlbox {
	float: left;
	height: 275px;
	width: 340px;
	background: 0 0 no-repeat;
	margin: 0 7px 0 0; border: 0; padding: 0;
}

/* Child Trust Fund */
div#content div.qlbox-ctf {background-image: url(../images-design/box-ethical-junior-isa.jpg);}

div.qlbox-ctf h2, div.qlbox-ctf p {
	margin: 0; border: 0;
	padding: 12px 140px 0 15px;
}
div.qlbox-ctf h2 {
	font-weight: bold;
	color: #076010;
	font-size: 24px;
	line-height: 30px;
	padding-right: 100px;
}
div.qlbox-ctf p {padding-top: 18px;}

div.qlbox-ctf p#ctfa {padding-top: 36px;}
div.qlbox-ctf p#ctfa a {
	color: #FFFFFF;
	text-decoration: none;
}
div.qlbox-ctf p#ctfa a:hover {color: #F7D166;}

/* Products */
div#content div.qlbox-products {background-image: url(../images-design/box-ethical-investment-products.jpg);}

div.qlbox-products h2, div.qlbox-products p {
	font-weight: bold;
	color: #000000;
	font-size: 14px;
	line-height: 17px;
	margin: 0; border: 0;
	padding: 10px 151px 0 13px;
}
div.qlbox-products p {
	font-size: 10px;
	line-height: 10px;
	padding-top: 8px;
}

/* Ethical stance image and wrapper for within #content */
div.ei-img-wpr {
	position: relative;
	height: 70px;
	margin: 20px 25px 15px 40px;
	border: 0; padding: 0;
}
div.ei-img-wpr img {
	float: right;
	margin: 0; border: 0; padding: 0;
}

/* Footer */
div#ft {
	position: relative;
	width: 750px; /* 980 - 230 */
	height: 35px;
	background-color: #FFFFFF;
	margin: 0 0 0 230px;
	border: 0; padding: 0;
}

/* Privacy, Terms, etc, see below for styling of #ft links */
#ftl, #ftr {
	margin: 3px 0 0 0; border: 0; padding: 0 10px;
	font-size: 10px;
	line-height: 13px;
	color: #000000;
	float: left;
	text-align: left;
}
#ftr {float: right; text-align: right;}

/* Footer links */
#ft a {color: #000000; font-weight: normal;}
#ft a:hover {color: #076010;}

#ft a.txt, #ft2 a.txt:hover { /* Normal text credit link */
	color: #000000;
	text-decoration: none;
    font-weight: normal;
}

/* CSS to replace tables - used for web enquiry forms */

/* The div with class tbl-out centres correctly in standards compliant browsers (as left and right margin set to auto). IE doesn't recognise auto. Div (centrefix) fixes this as IE incorrectly centres an element with text-align:center; */
.centrefix {
	text-align: center; /* IE centre fix */
	margin: 25px 0; /* space top and bottom; */
} 

/* Width and margin set on a containing table wrapper (tbl-out) and not inner table div (tbl-in) to fix the IE width bug */
.tbl-out {
	width: 520px; 
	margin: 0 auto;
	border: 0;
	padding: 0;
	text-align: left;
	/*background: 0 0 url(../images-design/webform-bg.jpg) repeat-y #CCCCCC;*/
	background-color: #F2F1EC;
}

.tbl-in {
	margin: 0;
	border: 1px solid #EFE7C2;
	padding: 5px;
}

div.row {
  clear: both;
  margin: 0;
  border: 0;
  padding: 0;
}
/* Standards compliant browsers don't add their own spacing so need top padding */
html>body div.row {padding: 2px 0 0 0;}

div.half-space, div.third-space {
  clear: both;
  height: 6px;
  line-height: 6px;
  margin: 0; border: 0; padding: 0;
}

div.third-space {height: 4px; line-height: 4px;}

div.row label {
  float: left;
  width: 190px;
  text-align: right;
}

/* Class fld (field) defines data input fields */
div.row span.fld {
  float: right;
  width: 285px;
  text-align: left;
  margin-right: 2px;	/* Required to stop right side touching the fieldset border in IE */
}


/* Left align labels in the field area - used for labels that contain check boxes */
span.fld label {text-align: left;}

/* Classes to define 2 field columns (left and right) */
div.row span.fld-coll {
  float: left;
  width: 170px;
  text-align: left;
}
div.row span.fld-colr {
  float: right;
  width: 190px;
  text-align: left;
}

div.row span.fld-full-width {
  float: left;
  width: 484px;
  text-align: left;
  margin: 0;
}

/* The spacer is user to ensure the table-div clears the last field. Note not required if fields are enclosed in a fieldset tag */
div.spacer, div.space {
  clear: both;
}
div.space {
	height: 14px;
	font-size: 14px; line-height: 14px;
}

/* Class full (full width) ensures fields fill their containing element */
.full {width: 100%;}

.bld {font-weight: bold;}  /* Set bold text in selects */

fieldset {
	border:1px solid #598A5B;
	padding: 0 8px 10px 5px;	/* Can't add padding to top as IE incorrectly puts this outside the fieldset so have added a bottom margin on the legend */
}

legend {
	border:1px solid #598A5B;
	padding: 2px 5px;
	margin: 0 0 10px 0;
	font-weight: bold;
	color: #076010;
	background-color: #F7D166;
}

form {border: 0; margin: 0; padding: 0;}	/* Stops IE adding space around a form */

/* Style for the input boxes */
input, select, textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
	color: #222222;
	margin: 0; padding: 0;
}

/* Buttons */
input.btn {
	font-size: 12px;
	line-height: 16px; /* Required to vertically centre text in button in IE */
	width: 120px;
}

/* IFA login form */
div.tblwrp1 { /* Table wrapper type 1 */
	background-color: #F7D166;
	margin: 15px 0 15px 40px;
	border: 1px solid #598A5B;
	padding: 0 0 8px 8px;
}

div.tblwrp1 h2 {padding: 8px 2px 10px 2px;}

/* News/Event items */
p.news-event-info {
	/* Currently left unstyled, .h3 applied instead */
}

p.news-event-info span.label {
  float: left;
  width: 80px;
  text-align: left;
  margin-right: 10px;
  padding: 0;
}

div.news-event-info-spacer {clear: both; height: 18px;}

/* Remove bold font weight - used for dates within headings for the dynamically generated list of news items */
/*.nobold {font-weight: normal;} - already defined */
h3.news-event a {
	color: #076010;
	font-weight: bold;
	 text-decoration: none;
}
h3.news-event a:hover {color: #9A6600;}

h3.news-event .nobold {
	font-weight: normal;
	font-size: 12px; /* Smaller than h3 */
}
p.news-event-hidden {
	color: red;
	font-weight: bold;
}

/* Search this web site */
div#src { /* Search box in content area */
	width: 398px;
	margin: 15px 0 10px 40px;
	border: 1px solid #8EAF8F;
	padding: 5px;
	background-color: #598A5B;
}

div#src input.srctxt {
	width: 350px;
	margin: 0 0 0 3px;
}

div#src input#srcbtn {margin-left: 2px; width: 35px;}
div#src input#srcbtn:hover {font-weight: bold;}

p.srcnote { /* Search feedback note */
	color: #7F7507;
	font-size: 17px;
	line-height: 19px;
}

p.page-links { /* Search results pagination page links */
	font-size: 12px;
	text-align: left;
	color: #076010;
}

p.page-links-top {
	margin-top:13px;
	margin-bottom:17px
}