/* Water @ Leeds CSS */


body {
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 14px;
	line-height: 16px;
	margin: 9px 0px; border: 0px; padding: 0px;
	background-color: #0085C6;
}

/*  The main wrapper div */
#wpr {
	position: relative;
	width: 960px;
	margin: 0 auto;
	border: 0; padding: 0;
	background: url(../images-design/wpr-bg.gif) 0 0 repeat-y #DFECFF;
}

/* Header divs */
#hd {
	position: relative;
	margin: 0; border: 0; padding: 0;
	left: 0; top: 0;
	width: 960px;
	height: 128px;
	background: url(../images-design/hd-bg.jpg) 0 0 repeat-y #FFFFFF;
}

#hd-water-logo { /* Water at Leeds logo within #hd */
	position: relative;
	margin: 0; border: 0; padding: 0;
	/* left: 25px; top: 7px; width: 280px; height: 111px; original large size */
	left: 17px; top: 42px; width: 175px; height: 71px;
	background: url(../images-design/water-at-leeds-logo-175x71px.jpg) 0 0 no-repeat;	
}

#hd-kp { /* Keyphrase text over Water at Leeds logo circle */
	position: relative;
	margin: 0; border: 0; padding: 0;
	left: 0; top: 0;
	/* width: 114px; height: 111px; original large size */
	width: 70px; height: 71px;
}

#hd-leeds-logo { /* University of Leeds logo within #hd - can be applied to an img or div */
	position: absolute;
	margin: 0; border: 0; padding: 0;
	left: 718px; top: 46px;
	width: 225px;
	height: 65px;	
}
div#hd-leeds-logo { /* Background image if a div */
	background: url(../images-design/university-of-leeds-logo.gif) 0 0 no-repeat;
} 

#bc { /* Potential breadcrumb area */
	position: relative;
	margin: 0; border: 0; padding: 0;
	left: 0; top: 0;
	width: 960px;
	height: 23px;
	background: url(../images-design/bc-bg.jpg) 0 0 repeat-y #007DBD;
}

#bc-btm { /* Gap below breadcrumb area */
	position: relative;
	margin: 0; border: 0; padding: 0;
	left: 0; top: 0;
	width: 960px;
	height: 2px;
	line-height: 2px; font-size: 2px; /* IE fix */
	background-color: #E0EDFF;
}

#content {
	position: relative;	
	width: 780px;
	height: 610px;	/* IE takes this as the height and then incorrectly re-sizes if required */
	text-align: left;
	margin: 0px 0px 20px 180px; /* Margin at bottom is distance between end of content and footer */
	border: 0px; padding: 0px;
}
/* Standards compliant browsers recognise this height setting */
html>body div#content {
  height: auto; 
  min-height: 610px;
}

/* Add right padding and a bit of space between points in lists within the content area */
#content ol, #content ul {margin: 0px; border: 0px; padding: 0px 10px 5px 52px;}
#content li {
	margin-bottom: 0.5em;
	font-size: 12px; /* Set font size and color same as for p */
	color: #000000;
}

#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: 16px;
	margin: 0; border: 0;
	padding: 0px 16px 12px 25px;
	color: #000000;
}

/* Standard headings */

h1, h2, h3, .h1, .h2, .h3 {
	font-family: Arial, Helvetica, sans-serif;
	color: #020D41;
	font-weight: normal;
	margin: 0; border: 0;
	padding: 6px 6px 6px 12px; 
}

h1, .h1 {
	font-weight: bold;
	font-size: 22px;
	line-height: 24px;
	margin: 0px 0px 5px 0px;
}

h2, .h2 {
	font-size: 16px;
	line-height: 18px;
	font-weight: bold;
	margin: 5px 0px 0px 0px;
}

h3, .h3 {
	font-size: 14px;
	line-height: 16px;
	font-weight: bold;
	margin: 5px 0px 0px 0px;
}

hr {
	color: #CCCCCC;
	background-color: #CCCCCC;
	height: 1px;
	margin: 10px;
}

td hr {margin: 10px 0;}

/* Optional additional styles */
.centrealign {text-align: center;}
.rightalign {text-align: right;}


/* Blue highlight box - can be applied to p tags */
.bluebox {
	margin: 0px 16px 10px 25px;
	padding: 10px;
	font-size: 14px;
	line-height: 20px;
}
.bluebox {color: #E0EDFF; background-color: #013C80;}

.bluebox a {color: #E0EDFF; text-decoration: underline;}
.bluebox a:hover {color: #FFFFFF;}


/* Bullets for tel, e-mail, magnifying glass */
span.tel {
	padding-left: 10px;
	background: url(../images-design/tel-blt.gif) 0 center no-repeat;
}

span.email {
	padding-left: 15px;
	background: url(../images-design/email-blt.gif) 0 center no-repeat;
}

span.email a {
	text-decoration: none;
}

span.magnify {
	padding-left: 19px;
	background: url(../images-design/magnify-blt.gif) 0 center no-repeat;
}

/* Image styles */
img.right, img.right-no-border {
	background: #FFFFFF;
	margin: 5px 0px 5px 10px;
	float: right;
	border: 0px; padding: 0px;
}

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

/* Class to hide images so they can be pre-loaded. Can be used to hide any object */
.hdn {display: none;}

.nobold {font-weight: normal;}

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

/* Basic links */
a {
	color: #013C80;
	text-decoration: underline;
    font-weight: bold;
}
a:hover {color: #0085C6;}
/*a:visited {color: #532E4D;}*/

/* See above for styling for .redbox a, etc */

a img {border: 0px;} /* Remove border from image links */

/* List of links  */
ul.link-list {margin: 0; border: 0; padding: 6px 0 10px 0;}

ul.link-list li {
	margin: 0; border: 0; padding: 0;
	list-style: none;
	line-height: 12px;
}

/* The span.no-link styling allows text that is not a link to have the same format */
ul.link-list a, ul.link-list li span.no-link {
	margin: 0; border: 0; padding: 0 0 0 12px;
	color: #013C80;
	font-size: 12px;
	line-height: 12px;
	text-decoration: none;
	font-weight: bold;
	background: url(../images-design/link-list-blt.gif) 0 center no-repeat;
}
ul.link-list a:hover {background-position: 3px center; color: #0085C6;} /* The active link hover styling is not applied to (ul.link-list li span.no-link) */

ul.link-list li span.no-link {background: url(../images-design/link-list-no-link-blt.gif) 0 3px no-repeat;} /* Different bullet to distinguish non-links */

/* Option to stop 2nd line within same list item from wrapping under bullet. Has to be fixed width so at 700px will only work if the full page width is available */
ul.link-list-width700 li {width: 700px;}
ul.link-list-width700 a, ul.link-list-width700 li span.no-link {
	display: block;  /* Stops text wrap below bullet. Requires width to be set on ul.link-list li */
}

/* The following code sets menu position, basic display and sub menu pop ups */

/* Remove menu indents */
#nav {
	position: absolute;
	left: 7px;
	top: 165px;
	width: 173px;
	height: 475px; /* IE5/6 takes this as the height and then incorrectly re-sizes if required */
	margin: 0px; border: 0px; padding: 0px;
	z-index: 500; /* Required in IE to make pop-out appear over footer, in Mozilla the z-index set on '#nav ul' is sufficient */
	background-color: #001043; /* To give background while wpr bg image loads */
}

/* Standards compliant browsers recognise this height setting */
html>body div#nav {
  height: auto; 
  min-height: 475px;
}

/* Remove list bullets */
#nav li {
	list-style-type: none;
	background: url(../images-design/nav-li-bg.jpg) 0 5px no-repeat; /* Top level li background */
}

/* Optional indented li backgrounds - as used by 2nd level research options */
#nav li.bg1 {background: url(../images-design/nav-li-bg1.gif) 10px 5px no-repeat;} /* Light brown */
#nav li.bg2 {background: url(../images-design/nav-li-bg2.gif) 10px 5px no-repeat;} /* Plumb       */
#nav li.bg3 {background: url(../images-design/nav-li-bg3.gif) 10px 5px no-repeat;} /* Green       */
#nav li.bg4 {background: url(../images-design/nav-li-bg4.gif) 10px 5px no-repeat;} /* Grey        */
#nav li.bg1 a.bg1, #nav li.bg2 a.bg2, #nav li.bg3 a.bg3, #nav li.bg4 a.bg4 {
	background-color: transparent; /* Remove a background as would cover li background */
	padding: 7px 1px 2px 36px;
	color: #FFFFFF;
}
#nav li.bg1 a.bg1:hover, #nav li.bg2 a.bg2:hover, #nav li.bg3 a.bg3:hover, #nav li.bg4 a.bg4:hover {background: url(../images-design/nav-blt-hvr2.gif) 15px 8px transparent no-repeat;}

li.xpadbtm {padding-bottom: 5px;} /* Optional eXtra Padding Bottom - applied to last option in a sub-list */


/* Remove sub-list indents */
#nav ul {
	margin: 0; border: 0; padding: 0;
	width: 173px;	/* 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 menu list */
#nav li {position: relative;}

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

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

#nav ul ul#research { /* For the research sub-menu levels only, display visable and expanded within the top-level menu */
	display: block;
	position: relative;
	left: 0;
}

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

/* The following code controls the colour of menu options and
sets menu link display default and
sets menu link font colour on hover */
#nav ul a:hover, #nav ul a:active {
	display: block;
	color: #005D9A;
}


/* Opacity */
#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;
}

#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: #051346;
	font-size: 12px;
	text-decoration: none;
	font-weight: bold;
	margin: 0; border: 0px;
	padding: 8px 1px 3px 30px;
	background: url(../images-design/nav-blt.jpg) no-repeat 4px 8px;
}
#nav ul a:hover {
	background-image: url(../images-design/nav-blt-hvr.jpg);
	/*background-position: 5px center;*/
}

/* Add bottom border to top level menu options */
/* #nav ul li {border-bottom: 1px solid #42BDF6;} */

/* Remove border from sub level menu options */
/* #nav ul ul li, #nav ul ul ul li {border: 0px;} */


/* Set sub-menu display properties default */
#nav ul ul a {
	display: block;
	color: #2F0C2A;
    background-color: #0085C6;
	/* border: 1px solid #CCCCCC; */
	margin: 0px; border: 0px;
	padding: 8px 1px 8px 14px;
	background-image: url(../images-design/nav-sub-bg.gif);	/* Line for bottom border */
	background-repeat: repeat-x;
	background-position: bottom left;
}
	
/* Set sub-menu 1 font colour on hover */
#nav ul ul a:hover, #nav ul ul a:active {
	color: #FFFFFF;
	background-color: #001043;
	background-image: none;
}

/* Set sub-menu 2 font colour default */
#nav ul ul ul a {
	color: #2F0C2A;
	background-color: #8EB9A5;
	/* border: 1px solid #CCCCCC; */
}

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

/* Set sub-menu 3 */
#nav ul ul ul ul a {
	color: #054F4F;
	background-color: #95B7B9;
}

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

#nav-ft { /* Nav panel footer - waves image */
	margin: 0; border:0; padding: 0;
	position: relative;
	top: 17px; left: 7px; /* #nav left + # nav-ft left = 14px from edge */
	width: 155px; height: 81px;
	background: url(../images-design/nav-ft-bg.jpg) 0 0 no-repeat;
	clear: left; /* IE8 fix */
}

/* Footer */
#ft {
	position: relative;
	margin: 0; border: 0; padding: 0;
	width: 960px;
	height: 81px;
	background: url(../images-design/ft-bg.gif) 0 0 repeat-x #E9E2D2;
	clear: both;
}

#ft p {
	text-align: right;
	font-size: 12px; 
	line-height: 17px;
	margin: 0; border: 0;
	padding: 20px 16px 0px;
	color: #000000;
}

/* Footer links */
#ft a {
	margin: 0px; border: 0px; padding: 0px;
	color: #000000;
	font-weight: normal;
	text-decoration: none;
}
#ft a:hover {color: #0085C6;}

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

/* Spacers to clear floating elements */
div.spacer {clear: both;} /* Has no height */
div.half-space {clear: both;}
div.half-space, div.space { /* Has height of half or a full line */
  clear: both;
  height: 6px;
  line-height: 6px;
  margin: 0px; border: 0px; padding: 0px;
}
div.space {height: 12px; line-height: 12px;}

/* General table styling */
td {
	vertical-align: top;
	text-align: left;	/* Text as for p */
	font-size: 12px; 
	line-height: 16px;
	color: #000000;
}

/* 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;} 

/* 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: 582px; 
	margin: 0 auto;
	border: 0;
	padding: 0;
	text-align: left;
}

.tbl-in {
	margin: 0;
	border: 1px solid #D1DFDF;
	padding: 5px;
	background-color: #D1EFEF;
}

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.space {
  clear: both;
  height: 6px;
  line-height: 6px;
  margin: 0; border: 0; padding: 0;
}
div.space {height: 12px; line-height: 12px;}

div.row label {
	float: left;
	width: 210px;
	text-align: right;
	font-size: 14px; 
	line-height: 18px;
	margin: 2px 0 0 0;
	padding: 0;
}
span.fld label {width: 80px;} /* Email & Phone radio labels */

span.fixed-txt { /* Option to replace an input with fixed text, styled the same as its label */
	font-size: 14px;
	line-height: 18px;
	margin: 2px 0 0 0;
	padding: 0;
	color: #222222;
}

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

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

/* The spacer is used to ensure the table-div clears the last field. Note not required if fields are enclosed in a fieldset tag */
div.spacer {
  clear: both;
}

/* 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 #9BCFCF;
	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 #9BCFCF;
	padding: 2px 5px;
	margin: 0 0 10px 0;
	font-weight: bold;
	color: #000B40;
	background-color: #AADADC;
}

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

/* Style for the input boxes */
/* applied only to inputs within div class inputs so does not have to apply to inputs that are buttons (as cannot be undone with a specific input.btn class). */
div.inputs input, div.inputs select, div.inputs textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #222222;
	margin: 2px 0 0 0; padding: 0; border: 1px solid #7F9DB9; /* Remove border style to stick with sunken default */
	background-color: #FFFFFF !important;   /* Removes yellow background added by Google toolbar and other browser style sheets */
}

div.inputs input.checkbox, div.inputs input.radio {background-color: #ECEAEB !important; border: 0} /* IE fix: Remove "div.inputs input" styling applied to radio buttons */

/* Buttons */
input.btn {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px; /* Required to vertically centre text in button in IE */
	color: #222222;
	width: 100px;
	margin: 0; padding: 0;
}

/*

Start of CSS to define content area graphical link boxes

*/
div.ct-link-boxes { /* Wrapper for Content area link boxes */
	position: relative;
	margin: 0 0 12px 8px; border: 0; padding: 0;
	width: 764px; height: 353px;
}

div.ctbtl, div.ctbtr, div.ctbbl, div.ctbbr { /* Content area link box Top Left, Top Right, Bottom Left & Bottom Right */
	position: absolute;
	margin: 0; border: 0; padding: 0;
	width: 380px; height: 175px;
}

div.ctbtl {
	top: 0; left: 0;
	background: url(../images-design/hpbtl.gif) 0 0 no-repeat;	
}
div.ctbtr {
	top: 0; left: 384px;
	background: url(../images-design/hpbtr.gif) 0 0 no-repeat;

}
div.ctbbl {
	top: 178px; left: 0px;
	background: url(../images-design/hpbbl.gif) 0 0 no-repeat;	
}
div.ctbbr {
	top: 178px; left: 384px;
	background: url(../images-design/hpbbr.gif) 0 0 no-repeat;
}

img.ctb { /* Home Page Box image */
	position: absolute;
	top: 8px; left: 187px;
	width: 186px; height:159px;
	margin: 0; border: 0; padding: 0;
}

div.ctb-txt { /* Link box text */
	position: absolute;
	top: 12px; left: 13px;
	margin: 0; border: 0; padding: 0;
	width: 147px; height: 161px;
}

div.ctb-txt h2 {
	color: #FFFFFF;
	font-weight: bold;
	margin: 0; border: 0;
	padding: 0px 0px 2px 0px; 
	font-size: 22px;
	line-height: 24px;
}

div.ctb-txt p {
	color: #FFFFFF;
	font-weight: normal;
	margin: 0; border: 0;
	padding: 5px 0px 0px 4px; 
	font-size: 12px;
	line-height: 17px;
}

div.ctb-txt p a {color: #DFEBFF; text-decoration: none;}
div.ctb-txt p a:hover {color: #8FDCFF;}

div.ctb-txt p.more {text-align: right;}
div.ctb-txt p.more a {color: #DFEBFF; text-decoration: underline;}
div.ctb-txt p.more a:hover {color: #8FDCFF;}

/*

End of CSS to define content area graphical link boxes

*/

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

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: #073060;
}

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