/* ACM CSS */

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

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

#content {
	position: relative;	
	width: 601px;
	height: 523px;	/* IE takes this as the height and then incorrectly re-sizes if required */
	text-align: left;
	margin: 0 0 10px 186px; /* margin at bottom is distance between end of content and footer */
	border: 0;
	padding: 75px 0 0 0; /* padding top set rather than margin-top to fix Firefox bug */
}
/* Standards compliant browsers recognise this height setting */
html>body div#content {
  height: auto; 
  min-height: 523px;
}

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

/* Standard headings */

h1, h2, h3, .h1, .h2, .h3 {
	font-family: 'Times New Roman', Times, serif;
	/*font-weight: bold;*/
	font-weight: normal;
	margin: 0;
	border: 0;
	padding: 14px 2px 0 10px;
}


h1, .h1 {
	color: #33415E;
	font-size: 21px;
	line-height: 23px;
}

h2, .h2 {
	font-weight: bold;
	color: #33466D;
	font-size: 19px;
	line-height: 21px;
}

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

/* Remove bold font weight - used for dates within headings for the dynamically generated list of news items */
.nobold {font-weight: normal;}

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

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

/* Right hand quick links */
div#rhql {
	position: absolute;
	width: 160px;
	height: 500px;
	top: 77px;
	left: 787px;
	margin: 0; border: 0; padding: 0;
}
html>body div#rhql {
  height: auto; 
  min-height: 500px;
}

div#rhql div.box {
	position: relative;
	width: 160px;
	height: 37px;
	margin: 0 0 2px 0;
	border: 0; padding: 0 0 5px 0;
}
html>body div#rhql div.box {
  height: auto; 
  min-height: 37px;
}

div#rhql img {
	position: relative;
	margin: 0 0 2px 0;
	border: 0; padding: 0;
}

.click:hover { /* Make a clickable box show pointer and lighten on hover */
	cursor: pointer;
}

div#rhql div.box h2, div#rhql p.hd { /* Real & psuedo rhql heading */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px; 
	line-height: 16px;
	font-weight: bold;
	color: #FFFFFF;
	margin: 0; border: 0;
	padding: 4px 0 0 7px;
}

div#rhql div.box h2 a {
	color: #FFFFFF;
	text-decoration: none;
}

div#rhql div.lb {background-color: #8494B5;} /* Light blue */
div#rhql div.lg {background-color: #CCCCCC;} /* Light grey */
div#rhql div.lg h2, div#rhql div.lg h2 a, div#rhql div.lg p {color: #333333;}
div#rhql div.db {background-color: #33466E;} /* Dark blue  */
div.db span.a {color: #999999;} /* Psuedo link */

div#rhql p {
	font-size: 10px; 
	line-height: 12px;
	font-weight: normal;
	color: #FFFFFF;
	margin: 4px 0 0 7px;
	border: 0; padding: 0;
}

div#rhql form#frm_callme input#name, div#rhql form#frm_callme input#tel {
	position: absolute;
	display: block;
	width: 93px;
	height: 12px;
	left: 58px;
	font-size: 10px; 
	line-height: 12px;
	margin: 0; border: 1px solid #666666; padding: 0;
	background-color: #FFFFFF !important;   /* Removes yellow background added by Google toolbar and other browser style sheets */
}

div#rhql form#frm_callme {height: 55px; margin: 0; border: 0; padding: 0;}

div#rhql form#frm_callme label {
	position: absolute;
	display: block;
	width: 54px;
	height: 12px;
	left: 0;
	text-align: right;
	font-size: 10px; 
	line-height: 12px;
	font-weight: normal;
	color: #FFFFFF;
}
div#rhql form#frm_callme input#name, div#rhql form#frm_callme label#lblname {top: 52px;}
div#rhql form#frm_callme input#tel, div#rhql form#frm_callme label#lbltel {top: 69px;}

div#rhql form#frm_callme input#call { /* Call me button */
	position: absolute;
	display: block;
	width: 51px;
	height: 18px;
	left: 105px;
	top: 87px;
	background: 0 0 url(../images-design/callme.gif) no-repeat #CCCCCC;
	margin: 0; border: 0; padding: 0;
}
div#rhql form#frm_callme input#call:hover {
	background-image: url(../images-design/callme-hvr.gif);
	cursor: pointer;
}

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

img#hd-acm-logo {
	position: absolute;
	top: 9px;
	left: 9px;
	width: 367px; height: 50px; /* Image is not re-sized. Stating size speeds up rendering */
	border: 0;
}

img#hd-tel {
	position: absolute;
	top: 25px;
	left: 656px;
	width: 267px; height: 23px;
	border: 0;
}

#bc { /* Bread crumb trail */
	position: absolute;
	top: 65px;
	left: 3px;
	width: 944px; height: 10px;
	background: 0 0 url(../images-design/bc-bg.jpg) repeat-y #B27F19;
	margin: 0; border: 0; padding: 0;
	font-size: 6px; line-height: 6px; /* Fix IE height bug */
}

/* Left hand menu */

/* Remove menu indents */
#nav {
	position: absolute;
	left: 6px;
	top: 106px;
	width: 175px;
	height: 250px; /* For IE */
	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 { /* For standards compliant browsers */
  height: auto; 
  min-height: 250px;
}

/* Remove list bullets */
#nav li {
	position: relative; /* Fix position of menu list */
	list-style-type: none;
	background: 0 0 url(../images-design/nav-top-bg.jpg) repeat-y #8292B3;	/* Gradient 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 */
}
#nav li:hover {background-image: url(../images-design/nav-top-bg-hvr.jpg);}

/* Remove sub-list indents */
#nav ul {
	margin: 0; border: 0; padding: 0;
	width: 175px;	/* 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: 10px;
	text-decoration: none;
	font-weight: normal;
	margin: 0; border: 0;
	padding: 5px 1px 5px 5px;
	/* background: 4px center url(../images-design/nav-blt.jpg) no-repeat; */
}
/*#nav ul a:hover {background-image: url(../images-design/nav-blt-hvr.jpg);}*/

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

/* 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: #FEF2A0;
    background-color: #9A6601;
	/* border: 1px solid #CCCCCC; */
	margin: 0; border: 0;
	padding: 5px 1px 5px 5px;
	/* background: bottom left url(../images-design/nav-sub-bg.gif) repeat-x; Line for bottom border */
}
	
/* Set sub-menu 1 font colour on hover */
#nav ul ul a:hover, #nav ul ul a:active {
	color: #FFFFFF;
	background-color: #5F3E00;
	background-image: none;
}

/* Set sub-menu 2 font colour default */
#nav ul ul ul a {
	color: #DFEAFF;
	background-color: #33466D;
	/* 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: #22324F;
}

/* Set sub-menu 3 */
#nav ul ul ul ul a {
	color: #EFF4FF;
	background-color: #8494B5;
}

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

/* 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 #7F5607;}
#nav ul ul ul a {border-bottom: 1px solid #1D345F;}
#nav ul ul ul ul a {border-bottom: 1px solid #63779F;}

/* Address in menu bar */
#nav div#adr {
	position: relative;
	margin: 18px 0 0 0;
	border: 0; padding: 0;
}

#nav div#adr p.hd { /* Pseudo heading */
	font-size: 10px; 
	line-height: 12px;
	font-weight: bold;
	color: #FFFFFF;
	margin: 0; border: 0;
	padding: 12px 0 0 8px;
}

#nav div#adr p.free { /* Freephone */
	font-size: 18px; 
	line-height: 20px;
}

#nav div#adr p.int { /* International tel */
	font-size: 11px; 
	line-height: 14px;
}

#nav div#adr p {
	font-size: 10px; 
	line-height: 12px;
	font-weight: normal;
	color: #FFFFFF;
	margin: 0; border: 0;
	padding: 0 0 0 8px;
}

#nav div#adr p.sp {padding: 5px 0 0 8px;} /* Space before paragraph */

#nav div#adr a {color: #FFFFFF; text-decoration: none;}
#nav div#adr a:hover {color: #FEF2A0;}

/* Footer */
div#ft {
	position: relative;
	width: 761px;
	height: 35px;
	background-color: #000000;
	margin: 0 0 0 186px;
	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: #676B7F;
	float: left;
	text-align: left;
}
#ftr {float: right; text-align: right;}

/* Footer links */
#ft a {color: #676B7F; font-weight: normal;}
#ft a:hover {color: #FFFFFF;}

#ft a.txt, #ft2 a.txt:hover { /* Normal text credit link */
	color: #676B7F;
	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: 460px; 
	margin: 0 auto;
	border: 0;
	padding: 0;
	text-align: left;
	background: 0 0 url(../images-design/webform-bg.jpg) repeat-y #CCCCCC;
}

.tbl-in {
	margin: 0;
	border: 1px solid #999999;
	padding: 5px;
	/*background-color: #E5E4E3;*/
}

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: 175px;
  text-align: right;
}

/* Class fld (field) defines data input fields */
div.row span.fld {
  float: right;
  width: 245px;
  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: 424px;
  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 #999999;
	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 #999999;
	padding: 2px 5px;
	margin: 0 0 10px 0;
	font-weight: bold;
	color: #655048;
	background-color: #E5E4E3;
}

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

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

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

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

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