/*
	Main CSS for Integral Leadership
	
*/

/* Reset browsers default margin, padding and font sizes */
* {
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
	height: 100%;
	padding-bottom: 1px; /* margin-bottom only adds a scrollbar in IE */
}

body {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 14px;
	line-height: 16px;
	border: 0;
	background: 0 0 url(../images-design/body-bg.jpg) repeat-x #C0C0C0;
}

/*  The main wrapper div, position relative. All other div's are absolute within this div.  */
#wpr {
	position: relative;
	width: 920px;
	margin: 5px auto 5px;
	border: 0;
	background-color: #FFFFFF;
}

/* Header */
#hd { /* Appears after #content in xhtml */
	position: absolute;
	top: 0; left: 0;
	border: 0;
	width: 920px;
	height: 257px;
	background: 0 68px url(../images-design/hd-bg.jpg) no-repeat #FFFFFF;
	/* z-index: -1;  Defined in iehoverfix.css only as an IE 5/6 fix to position #hd behind h1 absolutely positioned (from within #content) on top of #hd. Cannot define here as standards compliant browsers would place #hd begind #content */
}

img#hd-lg { /* Header logo */
	position: absolute;
	top: 0px;
	left: 0px;
	width: 330px;
	height: 63px;
	border: 0;
}

/* Header links top right */
ul#hd-links {
	float: right;
	width: 584px;
	text-align: right;
	margin: 21px 0 5px;
	border-bottom: 5px solid #E0E0E0;
	padding: 10px 0;
}
ul#hd-links li {
	display: inline;
}
ul#hd-links li a {
	font-size: 13px;
	line-height: 16px;
	font-weight: normal;
	color: #808080;
	margin: 0 45px 0 0;
	border-left: 1px solid #E0E0E0;
	padding: 17px 15px 0 10px;
	background: #FFFFFF url(../images-design/menuarrow.jpg) no-repeat 10px 5px;
}
ul#hd-links li a:hover {
	color: #000;
	border-left: 1px solid #01A1C3;
}

#content {
	position: relative;	
	width: 920px;
	height: 400px;	/* IE takes this as the height and then incorrectly re-sizes if required */
	text-align: left;
	margin: 0 0 0 0; /* margin at bottom not used as distance between end of content and footer, #ctbs used instead */
	border: 0;
	padding: 257px 0 0 0; /* 257 space for #hd */
}
/* Standards compliant browsers recognise this height setting */
html>body div#content {
  height: auto; 
  min-height: 400px;
}

#ctbb { /* Content Bottom Border */
	width: 100%;
	height: 1px;
	font-size: 1px; line-height: 1px; /* IE height fix - still 2px in IE6 */
	background-color: #CCCCCC; /* Border colour */
	margin: 0; border: 0; padding: 0;
}

#ctbs { /* Content Bottom Spacer. Spacer between last object within #content, including floating objects eg img, and bottom of #content */
	width: 100%;
	height: 10px;
	font-size: 0px; line-height: 0px; /* IE height fix */
	clear: both;
}

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

#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: 14px; 
	line-height: 18px;
	margin: 0;
	border: 0;
	padding: 14px 20px 0 20px;
	color: #4F4F4F;
}

/* Standard headings */

h2, h3, .h1, .h2, .h3 {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin: 0;
	border: 0;
	padding: 14px 20px 0 20px;
}

h1, .h1 { /* h1 is absolutely positioned to appear on top of #hd */
	font-family: Georgia, Tahoma, Arial, Helvetica, sans-serif;
	color: #FFFFFF; /* Use span.blue for Integral Leadership blue */
	font-size: 28px;
	line-height: 30px;
	font-weight: normal;
	background-color: #666666;
	margin: 0;
	border: 0;
	padding: 3px 6px 4px 6px;
	position: absolute;
	top: 100px;
	left: 20px;
	z-index: 1000;
}

p.header { /* Optional p class, absolutely positioned below h1 on top of #hd */
	text-align: left;
	font-size: 11px; 
	line-height: 18px;
	font-weight: bold;
	margin: 0;
	border: 0;
	padding: 0;
	color: #666666;
	position: absolute;
	top: 138px;
	left: 20px;
	z-index: 1000;
}

h2, .h2 {
	color: #4F4F4F;
	font-size: 19px;
	line-height: 22px;
}

h3, .h3 {
	color: #4F4F4F;
	font-size: 16px;
	line-height: 20px;
}

span.white {color: #FFFFFF;}
span.blue {color: #01A1C3;} /* Integral Leadership blue */

/* Highlighted text box  */
p.highlight {
	padding: 18px 10px 10px 10px;
	margin: 14px 20px 0 20px;
	font-size: 14px; 
	line-height: 20px;
	font-weight: bold;
	color: #00272F;
	background: 0 0 url(../images-design/p-highlight-bg.jpg) repeat-x #F4FDFF;
}

p.highlight a {color: #0060AF;}
p.highlight a:hover {color: #01A1C3;}

/* Bold text para */
p.boldtext {
	font-size: 16px; 
	line-height: 22px;
	color: #4F4F4F;
	font-weight: bold;
	margin: 0;
	border: 0;
	padding: 14px 20px 0 20px;
}

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

img.left, img.left-no-border {
	float: left;
	margin: 0 10px 3px 0;
	border: 1px solid #000000;
}
img.right-no-border, img.left-no-border, img.nb {border: 0;} /* No border option */

img.space-for-list {margin-right: 20px;} /* Optional class to push li bullets off edge of a left-aligned img */

table {
	margin: 14px 10px 10px 25px; /* Space outside table, same as p. If width is 100% it will overspill #content on right by 14px */
}
table caption {font-weight: bold; margin: 10px 0 0 0;}

th {border-bottom: 2px solid #000000;}

th p, tr p { /* WPro inserts cell contents within a p by default */
	text-align: left;
	font-size: 14px; 
	line-height: 18px;
	margin: 0;
	border: 0;
	padding: 10px 20px 10px 20px;
}

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

dfn { /*  A definition term */
	text-align: left;
	font-size: 1em; 
	font-weight: bold;
	font-style: normal;
}
dfn:hover {cursor: help;}

/* General links */
a {
	color: #01A1C3;
	text-decoration: none;
    font-weight: bold;
}
a:hover {color: #808080;}
/*a:visited {color: #532E4D;}*/

a img {border: 0;}

/* Additional styles available */

.centre-align {text-align: center;}
.right-align {text-align: right;}

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

/* Left and right partitions within #content */
div#left-box1 {
	clear: left;
	float: left;
	width: 550px;
	margin: 0;
	padding: 0;
}

div#left-box1 p {padding-right: 0;}

div#left-box1 p.boldtext {
	font-size: 16px; 
	line-height: 22px;
	color: #4F4F4F;
	font-weight: bold;
	margin: 0;
	border: 0;
	padding: 7px 0 0 20px;
}

div#right-box1 { /* Absolute positioning of this div does not work in IE6 */
	float: right;
	margin: 0 20px 0 0;
	padding: 0;
	width: 284px;
}

div#right-box1 p {
	padding: 7px 0 0 0;
}

div#right-box1 ul {padding: 15px 0 0 20px;}

div#right-box1 p.grey-box {
	background: #F8F8F8 url(../images-design/ul-articles-bg.jpg) repeat-x 0 bottom;
	font-size: 12px; 
	line-height: 14px;
	margin: 20px 0 0 0;
	border-top: 1px solid #cecece;
	padding: 5px;
}

div.article {
	background: #F8F8F8 url(../images-design/ul-articles-bg.jpg) repeat-x 0 bottom;
	font-size: 12px; 
	line-height: 14px;
	width: 250px;
	float: left;
	margin: 20px 0 0 20px; /* margin-left:20px as set here is correct. IE bug doubles it (which makes div#left-box1 too wide to allow space for div#right-box1) so reset in IE as 10px (which bug converts to 20px) in iehoverfix.css */
	border-top: 1px solid #cecece;
	padding: 5px 0 8px 5px;
}
div#right-box1 p.grey-box a, div.article a {
	background: url(../images-design/menuarrow.jpg) no-repeat 0 5px;
	padding: 0 0 0 8px;
}

/* Main menu - navigation */
#nav {/* Menu (navigation) panel */
	position: absolute;
	margin: 0; border: 0; padding: 0;
	left: 10px; top: 200px;
	width: 920px;
	height: 23px; /* IE will re-size this if more menu options are added */
}
/* Standards compliant browsers recognise this height setting
This will allow new top-level menu options to be displayed if added without updating style sheet to increase width of #nav */
html>body div#nav {
  height: auto; 
  min-height: 23px;
}

#nav ul {margin: 0; border: 0; padding: 0;}

#nav ul li {
	list-style: none;
	margin: 0; border: 0; padding: 0;
	width: 113px;  /* Generic top level menu width in case new menu items added without updating style sheet */
	float: left; /* Lines up the top level menu options from left to right */
	background: 0 0 url(../images-design/nav-li-bg.gif) no-repeat;
}
/* IE6 fix - width must be specified to #nav ul li# level */
#nav ul li#mn1, #nav ul li#mn2, #nav ul li#mn3, #nav ul li#mn4, #nav ul li#mn5, #nav ul li#mn6 {width: 113px;}

#nav ul li li {
	width: 170px; /* Required to set width of secondary menu levels in IE */
	border-bottom: 1px solid #D8D8D8;
}
#nav ul li li li {border-left: 1px solid #D8D8D8;}

/* Set background on hover at top level only - set on "li a" not "li" or it breaks hover behaviour for sub-menus in IE and Mozilla */
#nav ul li a:hover {
	/*background: 0 0 url(../images-design/nav-li1-bg-hvr.gif) no-repeat;   Set generic top-level background image on hover in case additional menu items added before CSS is updated */
	color: #FFFFFF;
}
/*#nav ul li li a:hover {background-image: none;}*/


/* Background colour to drop-down options */
#nav ul ul li {
	background-image: none;
	background-color: #006A7F; /* Generic sub-level background colour in case additional menu options added before CSS updated */
	/* filter: alpha(opacity=95);  - Cannot set opcacity in IE, the opacity works but is 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 a {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 20px;
	font-weight: bold;
	text-align: center;
	display: block;
	margin: 0;
	border: 0;
	/* border-right: 1px solid #DCDDDF; */
	padding: 0 0 3px 0; /* line-height: 20px; + padding-bottom:3px gives an overall height of 23px for optimal vertical positioning of text and to make bottom grey line of nav-li-bg.gif visible */
	color: #D8D8D8;
	text-decoration: none;
}

#nav a:hover {color: #FFFFFF;} /* Generic in case new options added before CSS updated */

#nav ul li li a {text-align: left; padding: 0 0 0 5px;} /* Left align text in pop-out options */

/* Position pop-out menus */
#nav li {position: relative;}

#nav ul ul {
	position: absolute;
	z-index: 500;
}

#nav ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
}

/* Make last top-level drop-down in list overlap to left, not right, to keep on screen */
#nav ul li#mn9 ul {
	left: -60px;
}

/* Show/Hide on hover */
div#nav ul ul,
div#nav ul li:hover ul ul,
div#nav ul ul li:hover ul ul
{display: none;}


div#nav ul li:hover ul,
div#nav ul ul li:hover ul,
div#nav ul ul ul li:hover ul
{display: block;}



/* Footer */
div#ft {
	position: relative;
	width: 920px; /* Same as content */
	height: 73px;
	background-color: #666666;
	margin: 0;
	border: 0;
	clear: both;
}

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

/* Footer links */
#ft a {color: #FFFFFF; font-weight: bold; text-decoration: none;}
#ft a:hover {color: #01A1C3;}

#ft a.txt, #ft2 a.txt:hover { /* Normal text credit link */
	color: #FFFFFF;
	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: 600px; 
	margin: 0 auto;
	text-align: left;
	background: 0 0 url(../images-design/p-highlight-bg.jpg) repeat-x #F4FDFF;
	/*background-color: #FDEE84;*/
	clear: both; /* To clear any floated objects */
}

.tbl-in {
	border: 1px solid #A3A3A3;
	padding: 5px;
}

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

div.space, div.half-space, div.third-space {
  clear: both;
  height: 12px;
  line-height: 12px;
}
div.half-space {height: 6px; line-height: 6px;}
div.third-space {height: 4px; line-height: 4px;}

div.row label {
  float: left;
  width: 210px;
  text-align: right;
  color: #201130;
}

/* Class fld (field) defines data input fields */
div.row span.fld {
  float: right;
  width: 350px;
  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: 572px;
  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 {
  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 #39675C;
	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 #39675C;
	padding: 2px 5px;
	margin: 0 0 10px 0;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #01393A;
}

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

/* News/Event items */
p.news-event-info {
	/* Currently left unstyled. .h3 is also applied. Additional styling can be set for p.news-event-info if required */
}

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: #043836;
	font-weight: bold;
	text-decoration: none;
}
h3.news-event a:hover {color: #A30001;}

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 #6B8F87;
	padding: 5px;
	background-color: #01A1C3;
}

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: #01A1C3;
	font-size: 17px;
	line-height: 19px;
}

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

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

/* Show / Hide layers */
div.layer-wpr1 { /* Wrapper for show / hide layers */
	position: relative;
	width: 580px;
	float: right;
}

div.layer {
	position: absolute;
	visibility: hidden;
	top: 0;
	left: 0;
	/*
	height: 221px;
	width: 410px;
	left: 400px;
	top: 400px;
	*/
}
div#ontop {visibility: visible;} /* Default top layer */

/* List of clickable options that are not links */
#content ul.click-list li, span.link {
	color: #01A1C3;
    font-weight: bold;
	cursor: pointer;
}
#content ul.click-list li:hover, span.link:hover {color: #808080;}