/* 

Main CSS

South Yorkshire Women in Industry

*/

/* 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%;
	margin-bottom: 1px;
}

body {
	font-family: 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 #FFFFFF; */
	background-color: #FFFFFF;
}

/*  The main wrapper div, position relative. All other div's are absolute within this div.  */
#wpr {
	position: relative;
	width: 970px;
	margin: 5px auto;
	border: 0;
	background: 0 0 url(../images-design/wpr-bg.jpg) repeat-y;
}

/* Header */
#hd { /* Appears after #content in xhtml */
	position: absolute;
	top: 0; left: 0;
	border: 0;
	width: 970px;
	height: 150px;
	background: 0 0 url(../images-design/hd-bg.jpg) repeat-y #6DA0A1;
}

#hd img#sywdt-lg { /* SYWDT logo */
	position: absolute;
	top: 3px;
	left: 31px;
	width: 130px;
	height: 130px;
	border: 0;
}

#hd img#lottery-lg { /* Lottery logo */
	position: absolute;
	top: 18px;
	left: 788px;
	width: 164px;
	height: 103px;
	border: 0;
}

#hd div#sywii-txt { /* Header text */
	position: absolute;
	top: 23px; left: 192px;
	height: 93px; width: 515px;
}

#content {
	position: relative;	
	width: 768px; /* 770 - 2 (rh border) */
	height: 480px;	/* IE takes this as the height and then incorrectly re-sizes if required */
	text-align: left;
	margin: 0 0 15px 200px; /* margin at bottom is distance between end of content and footer */
	border: 0;
	padding: 175px 0 0 0; /* 150 (space for #hd) + 25 (space below #hd) */
	background: 0 150px url(../images-design/content-bg.jpg) repeat-x; /* Position from top = space for #hd */
}
/* Standards compliant browsers recognise this height setting */
html>body div#content {
  height: auto; 
  min-height: 480px;
}

/* Add right padding and a bit of space between points in lists within the content area */
div#content ol, div#content ul {padding: 10px 75px 10px 65px;}
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: 14px; 
	line-height: 18px;
	margin: 0;
	border: 0;
	padding: 14px 10px 0 30px;
}

/* Standard headings */

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

h1, .h1 {
	color: #293E3F;
	font-size: 28px;
	line-height: 30px;
}

h2, .h2 {
	color: #575757;
	font-size: 20px;
	line-height: 22px;
}

h3, .h3 {
	color: #333333;
	font-size: 16px;
	line-height: 18px;
}

/* Highlighted text box  */
p.highlight {
	padding: 10px;
	margin: 14px 10px 0 30px;
	font-size: 14px; 
	line-height: 20px;
	color: #EFFFFF;
	background-color: #274F4F;
}

p.highlight a {color: #FFE2AF;}
p.highlight a:hover {color: #FFBF4F;}

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

/* Object styles - used for audio/media player */
object.left {
	float: left;
	margin: 0 10px 0 0;
	border: 0;
}


table {
	margin: 14px 10px 10px 30px; /* 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;
}

/* Women in Industry styling for photo gallery table */
table.photo-gallery {
	width: 728px; border-collapse: collapse; /* These 2 settings left in html to help discourage user edits via editor */
}
table.photo-gallery td {
	width: 182px; /* 728/4 = 182 */
	border-bottom: 1px solid #408080;
}

table.photo-gallery td h3 {
	margin: 30px 0 5px 0;
	border: 0;
	padding: 0;
	text-align: center;
}
table.photo-gallery td h3 a {
	color: #333333;
	text-decoration: none;
}
table.photo-gallery td h3 a:hover {color: #FFA200;}

table.photo-gallery td img {
	float: left;
	margin: 5px 0 0 10px; /* left padding of 10px centres an image of width 160px */
	border: 0;
	padding: 0;
	clear: both;
}

table.photo-gallery td p {
	clear: both;
	margin: 0;
	border: 0;
	padding: 10px 5px 12px 5px;
	text-align: center;
}

hr {
	color: #CCCCCC;
	background-color: #CCCCCC;
	height: 1px;
	margin: 14px 10px 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: #305E54;
	text-decoration: underline;
    font-weight: bold;
}
a:hover {color: #FFA200;}
/*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 */

/* Main menu - navigation */
#nav {
	position: absolute;
	left: 3px; /* Left border */
	top: 168px;
	width: 196px; /* 200 - R (3) and L (1) borders */
	height: 260px; /* IE5/6 takes this as the height and then incorrectly re-sizes if required */
	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 */
}

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

/* Remove list bullets */
#nav li {
	list-style-type: none;
	/* background: bottom left url(../images-design/nav-top-bg.gif) repeat-x; Option to use image for bottom border */
}

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

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

#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: #767676;
	font-size: 14px;
	line-height: 16px;
	text-decoration: none;
	font-weight: bold;
	margin: 0; border: 0;
	padding: 8px 1px 14px 42px; /* If padding top and bottom differ then background top needs to be Xpx rather than 'center' */
	background: 11px 8px url(../images-design/nav-blt.gif) no-repeat;
}
#nav ul a:hover, #nav ul a:active {color: #000000;} /* #FFAD1F */
#nav ul a:hover {background: 11px 8px url(../images-design/nav-blt-hvr.gif) no-repeat;}

/* Set border for top level menu options */
#nav ul li {border-bottom: 1px solid #CFCBC2;}

/* Set border sub level menu options */
#nav ul ul li, #nav ul ul ul li {
	border: 0;
	/* border-bottom: 1px solid #A16F70; Can be set on li or a, in this case set on a */
}

/* 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;         /* 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: #254748;
	background-color: #FDE176;
	margin: 0; border: 0;
	border-bottom: 1px solid #83AF93;
	padding: 8px 1px 14px 14px;
	/* background: bottom left url(../images-design/nav-sub-bg.gif) repeat-x; Option to use image for bottom border */
	background-image: none; /* Remove bullet from sub-menu links */
}
	
/* Set sub-menu 1 font colour on hover */
#nav ul ul a:hover, #nav ul ul a:active {
	color: #FFF9EF;
	background-color: #FF981F;
	background-image: none; /* Remove bullet from sub-menu links */
}

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

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

/* Set sub-menu 3 */
#nav ul ul ul ul a {
	color: #254748;
	background-color: #E5E9EA;
}

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

/* Optional contact details below nav panel */
#nav div.spacer { /* IE8 fix to force p to clear #nav ul, Not required for IE6,7, Opera, Mozilla, Chrome or Opera */
	clear: both; height: 1px; font-size: 1px; line-height: 1px;
}

#nav p {
	text-align: left;
	font-size: 13px; 
	line-height: 16px;
	color: #767676;
	margin: 0;
	border: 0;
	padding: 20px 0 0 14px;
	clear: both;
}

#nav p.tel {
	font-size: 18px; 
	line-height: 22px;
	margin: 30px 0 0 11px;
	border: 0;
	padding: 0 0 0 35px;
	background: 0 center url(../images-design/nav-tel.gif) no-repeat;
}

#nav p.email {
	font-size: 18px; 
	line-height: 22px;
	margin: 13px 0 0 11px;
	border: 0;
	padding: 0 0 0 35px;
	background: 2px center url(../images-design/nav-email.gif) no-repeat;
}

#nav p.map {padding: 10px 0 0 14px;}
#nav p a {color: #767676; font-weight: normal;}
#nav p a:hover {color: #000000;}


/* Search box below menu, within #nav*/
div#src-wpr { /* Search wrapper */
	position: relative;
	width: 170px;
	margin: 20px 0 0 14px;
	clear: left;
}
div#src-wpr form {margin: 0; border: 0; padding: 0;}
div#src-wpr form input#srctxt {
	width: 148px;
	height: 19px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 15px; /* Vertically aligns text in IE */
	color: #4F4F4F;
	margin: 0;
	border: 1px solid #9A9A9A;
	padding: 0 0 0 18px;
	background: url(../images-design/search-box-bg.gif) 0 1px #F6F6F6 no-repeat;
}

/* Footer */
div#ft {
	position: relative;
	width: 768px; /* Same as content */
	height: 50px;
	background-color: #FFDFAC;
	margin: 0 0 0 200px;
	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: 17px;
	color: #000000;
	float: left;
	text-align: left;
}
#ftr {float: right; text-align: right;}

/* Footer links */
#ft a {color: #0D1717; font-weight: normal;}
#ft a:hover {color: #077F77;}

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

div#ft2 { /* Bottom border for site */
	position: relative;
	width: 970px; /* Same as content */
	height: 2px;
	font-size: 2px; line-height: 2px;
	background-color: #121212;
	border: 0;	
}

/* 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/webform-bg.jpg) repeat-y #FDEE84;
	/*background-color: #FDEE84;*/
}

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

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

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