/*== SWATCH LIST
 * Blue: #004b8d;
 * Gold: #e4a024;
 * Gold-dark: #ce921a; // Text Hover
 * Blue-light: #457cac; // links
 * Blue-Lighter: #bfd2e1; //Borders
 * Blue-lightest:#f2f6f9; //fills
 * White
 * Dark Grey: #4c4c4c; //Text
 * Light Grey: #828282; //Disabled
 */

/*== TOC
 * Elements
 * Utility

 OVERALL LAYOUT

 * Macro Layout
 * Sidebars Macro Layout
 * Columns Layout

 MAIN STYLES

 * Menu
 * Logo
 * Search
 * Aux-nav & Crumbs (header)
 * Banner & Promotional-Buttons
 * footer

	CONTENT MODULES

 * content
 * photo-list
 * icon-list
 */


/*@font-face {font-family: "Bembo Std"; src: url('http://www.massey.ac.nz/~wwhome/fonts/BemboStd-Semibold.otf'); font-weight:normal;} */


/*== Elements */
body {font:normal normal normal 62.5%/1.5em Arial, "Helvetica Neue", Helvetica, sans-serif; color:#4c4c4c; padding:0; margin:0;} /* font-size:62.5% makes the default font-size 10px; it makes maths slightly easier.*/
a:link {color:#0066cc; text-decoration:none;}
a:visited {color:#996699; text-decoration:none;}
a:focus {color:#cc9900; outline:0; text-decoration:underline;}
a:hover {color:#cc9900; text-decoration:underline;}
a:active {color:#0066cc; text-decoration:underline;}
h1, h2, h3, h4, h5, h6 {font: normal 1em "Bembo Std", "Times New Roman", Times, serif; color:#004b8d; clear:both; margin:0; padding:0;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration:none; color:inherit;}
#container h2 a {color:#004b8d;}
ul {clear:left; padding-top:1em; padding-bottom:1em; padding-left:3em; padding-right:0em; margin:0; list-style-type:disc; line-height:1.5em;}
ol {clear:left; padding-top:1em; padding-bottom:1em; padding-left:3em; padding-right:0em; margin:0; line-height:1.5em;}
h1 {font-size:2.8em; color:#4c4c4c;}
h2 {font-size:2.4em; margin-top:1.5em;}
h3 {font-size:2.1em; margin-top:1.5em; color:#4c4c4c;}
h4 {font-size:1.9em; margin-top:1.5em;}
h5 {font-size:1.7em; margin-top:1.5em; color:#4c4c4c;}
h6 {font-size:1.5em; margin-top:1.5em;}
dd, dl {border:0; margin:0; margin-bottom:1.5em;}
hr {background:#bfd2e1; color: #bfd2e1; border:0; height:1px; clear:both; margin-top:2em; margin-bottom:0;} /* color set for IE */
hr.blue {background-color:#bfd2e1; color:#bfd2e1;}
address {font-style:normal;}
form h3, form h2 {margin-bottom:0;}
table {width:100%; border:1px solid #bfd2e1; background:#f2f6f9; border-collapse:collapse; margin:0 0;}
table.layout {border:none; background:none; border-collapse:collapse; border-color:#FFFFFF;}
table.layout th, table.layout td {border:none; border-color:#FFFFFF}
td {font-size:1.2em; background:white;}
th, td {border:1px solid #bfd2e1; padding:0.2em;}
th {text-align:left; font-weight:normal; width:240px;}
p {padding:0; padding-top:1em; margin:0; line-height:1.3em;}

/*== Utility */
.hidden {position:absolute; left:-9999px; top:-9999px; display:block;}
.off {display:none;}
.clear {clear:both;}

/* * * * * * * *
 * MAIN LAYOUT *
 * * * * * * * */

#container {width:960px; padding:0 10px; margin:0 auto;} /* side paddings so things don't look weird when we're smaller than content */
#header {height:13em; position:relative; clear:left; z-index:5; border-bottom:1px solid #e4a024; margin-bottom:-1px;} /* gold line is under flash (is visible when flash isn't present.) */
#content-container {padding:2.4em 0 1em; padding-bottom:2em; clear:both; float:left; position:relative;width:960px;} /* 2em to footer, 1 is here 1 is bottom of final block*/
#content {float:left;}
#footer {border-top:1px solid #e4a024; clear:both; padding:1.25em 0 1em;}

/*== Sidebars */
/* #content-container has either .sidebars-0 .sidebars-1 .sidebars-2. this is the number of sidebars.
 * each sidebar has a class of .sidebar and either .sidebar-right or .sidebar-left
 */
.sidebar {width:170px;}
.sidebar-right {float:right; margin-left:70px;}
.sidebar-left {float:left; margin-right:70px; width:170px;}
.sidebars-0 #content {width:960px;}
.sidebars-1 #content {width:720px;}
.sidebars-2 #content {width:480px;}

/*== Columns */
/* Columns have gutters of 30px.
 * use faux columns for vertical borders
 * columns container has a class of either .columns-2 .columns-3 .column-4
 * each column inside has .column. the first column has .first
 * widths are obtained by roundto1dp((contentWidth+gutterWidth)/numberOfColumns-gutterWidth);
 */
#content .first{border:0;}
.columns {position:relative; float:left; margin:0.5em 0 0 0;}
.columns .column {padding:0; margin-left:30px; float:left; position:relative; top:0; bottom:0; height:100%;}
.columns .first {margin-left:0;}

/*.columns-2 {background:url('../images/col-2.png') repeat-y top center;} */

/*.sidebars-0 .columns-3 {background:url('../images/col-960-3.png') repeat-y top center;}*/
/*.sidebars-0 .columns-4 {background:url('../images/col-960-4.png') repeat-y top center;}*/

/*.sidebars-1 .columns-3 {background:url('../images/col-720-3.png') repeat-y top center;}*/
/*.sidebars-1 .columns-4 {background:url('../images/col-720-4.png') repeat-y top center;}*/

/*.sidebars-2 .columns-3 {background:url('../images/col-480-3.png') repeat-y top center;}*/
/*.sidebars-2 .columns-4 {background:url('../images/col-480-4.png') repeat-y top center;}*/

.sidebars-0 .columns-2 .column {width:465px;}
.sidebars-0 .columns-3 .column {width:300px;}
.sidebars-0 .columns-4 .column {width:217px;}

.sidebars-1 .columns-2 .column {width:345px;}
.sidebars-1 .columns-3 .column {width:220px;}
.sidebars-1 .columns-4 .column {width:157px;}

.sidebars-2 .columns-2 .column {width:225px;}
.sidebars-2 .columns-3 .column {width:140px;}
.sidebars-2 .columns-4 .column {width:097px;}

/*== Menu */
ul#menu {float:left; height:40px; width:960px; background:#004b8d; margin:0; padding:0; list-style-type:none; z-index:100; position:relative; background:#004b8d url('../images/bg-nav.jpg') no-repeat top right; }
#menu li {border-right:1px solid; border-color:#4c4c4c; width:136px; float:left; height:40px; margin:0; padding:0 0 0 0; position:relative;}
#menu a {position:relative; z-index:101; display:block; height:100%; line-height:40px; font-size:1.3em; font-weight:normal; color:white; text-align:center; text-decoration:none;}
#menu .first {background-image:url('../images/bl-corner.png'); background-repeat:no-repeat; background-position:bottom left; border-left:0;}
#menu .last {background-image:url('../images/br-corner.png'); background-repeat:no-repeat; background-position:bottom right; float:right; width:138px; border-right:0;}
#menu .selected {background-color:#e4a024;}
#menu .selected a {color:#ffffff; font-weight:bold;}
#menu .highlighted a,
#menu a:hover,
#menu a:focus {border:1px solid #bfd2e1; border-bottom:0; background-color:#f2f6f9; color:#00325e; margin-bottom:-1px; z-index:1001; font-weight:bold;}
#menu a.more {padding-right:1em; border-bottom:0;}
#menu .highlighted a.more {background-color:#f2f6f9; border:1px solid #bfd2e1; border-bottom:0;}


/*#menu a.more {background:url('../images/arrow-white-on-blue.png') no-repeat 94% center; padding-right:1em; border-bottom:0;}
#menu .selected a.more {background-image:url('../images/arrow-white-on-gold.png');}
#menu .highlighted a.more {background-image:url('../images/arrow-blue-on-blue.png'); background-color:#f2f6f9; border:1px solid #bfd2e1; border-bottom:0;} */

#menu div.dropdown {z-index:1000; position:absolute; top:40px; left:0; background:#f2f6f9; float:left; border:1px solid #bfd2e1; border-bottom:0; height:auto; width:auto; padding:1em; overflow:visible; display:none;}
#menu .right div.dropdown {right:0px; left:auto;}

#menu ul {display:block; position:relative; height:auto; list-style-type:none; margin:0; padding:0; float:left; clear:left; z-index:0;}
#menu ul li {height:auto; width:100%; border-top:1px solid #bfd2e1; padding:1.2em 0 0; margin:0.7em 0 0;clear:left; border-right:0;}
#menu ul li.first {border:0; padding:0; margin:0;}
#menu ul li.first a {background:transparent;}



#container #menu ul a {text-align:left; white-space:nowrap; border:0; background:transparent; margin-bottom:0; line-height:1.0em; font-size:1.3em; font-weight:bold;}
#container #menu ul ul a {font-weight:normal;}
#menu ul a:link {color:#003366;}
#menu ul a:visited {color:#443366;}
#menu ul a:focus {color:#996633; outline:0;}
#menu ul a:hover {color:#996633; text-decoration:underline;}
#menu ul a:active {color:#003366;}

#menu ul ul {clear:left; float:left; white-space:nowrap; height:auto; line-height:1em; padding-top:0.6em; font-size:0.85em; font-weight:normal;}
#menu ul ul li {display:inline-block; width:auto; float:none; clear:none; padding:0 0 0 1em; border:0; border-left:1px solid #bfd2e1; margin:0 0 0 1em; font-weight:normal; margin-bottom:1em;}
#menu ul ul a {width:auto; font-size:1em; line-height:1.1em;}
#menu ul ul li.first {border:0; padding:0; margin:0;}

#menu div.bl {background:url('../images/dd-corners.png') no-repeat top right; height:15px; width:10px; position:absolute; bottom:-14px; left:-2px;}
#menu div.br {background:url('../images/dd-corners.png') no-repeat top left; height:15px; width:11px; position:absolute; bottom:-14px; right:-7px;}
#menu div.b-wrapper {width:100%; height:15px; position:absolute; bottom:-14px; left:0;}
#menu div.b  {background:url('../images/dd-bottom.png') repeat-x top left; height:15px; margin:0 4px 0 8px; display:block;}
#menu div.l  {background:url('../images/dd-edges2.png') repeat-y right top; width:2px; top:-1px; height:100%; left:-2px; position:absolute;}

#menu div.r  {background:url('../images/dd-edges2.png') repeat-y left top; width:6px; height:100%; position:absolute; top:-1px; right:-6px;}
#menu .last div.r {margin-top:-5em;padding-bottom:5em;}




/*== Logo */
h2#logo {font-size:1em;}
#logo a {top:7px;position:absolute;height:13em; width:385px; background:url('../images/logo.png') no-repeat center left; display:block;}
#logo span {display:block; text-indent:-9999px;}
#print-logo {display:none;}

/*== Search */
/* uses .form_standard rules in Content section of this page */
#search {position:absolute; right:0;top:50%;margin-top:-2px;}

/*== Aux nav (header) */
.text-link-list {color:#4c4c4c; padding-bottom:1em;}
.text-link-list span {color:#4c4c4c;}
#aux-nav {position:absolute; bottom:7em; margin-bottom:0.5em; right:0;}
#breadcrumbs {position:absolute; top:0.5em; left:0;}

/*== Promotional Buttons */
#banner {float:left; width:760px; height:200px; z-index:40;position:relative;}
#promotional-buttons {float:right; width:200px; color:white; background:#004b8d url('../images/bg-button.jpg') no-repeat top right; height:200px; position:relative; z-index:50; display:table; overflow:hidden;}
#promotional-buttons hr {background-color:#4c4c4c; color:#4c4c4c; margin-top:1.75em; margin-bottom:1.75em;}
#promotional-buttons a {color:white;}
#promotional-buttons h1 a {color:white;}
#promotional-buttons h2 a {color:white;}
#promotional-buttons h3 a {color:white;}
#promotional-buttons h4 a {color:white;}
#promotional-buttons h5 a {color:white;}
#promotional-buttons h6 a {color:white;}
#promotional-buttons p {margin:0.7em 0 0; font-size:1.2em; line-height:1.5em;}
#promotional-buttons h1 {margin:0; padding:0; font-size:5em; font-weight:normal}
#promotional-buttons h2 {margin:0; padding:0; font-size:1.7em; font-weight:normal}
#promotional-buttons h3 {margin:0; padding:0; font-size:1.7em; font-weight:normal}
#promotional-buttons h4 {margin:0; padding:0; font-size:1.7em; font-weight:normal}
#promotional-buttons h5 {margin:0; padding:0; font-size:1.7em; font-weight:normal}
#promotional-buttons h6 {margin:0; padding:0; font-size:1.7em; font-weight:normal}
#promotional-buttons-mid {width:200px; height:180px; display:table-cell; text-align:center; vertical-align:middle; padding:0px;}
/*== footer */

#footer-left {width:675px; border-top:1px solid #e4a024; float:left;}
#footer-right {width:210px; padding-left:75px; padding-top:30px; border-top:1px solid #e4a024; float:right;}

ul#contact {list-style-type:none; list-style-position:outside; float:left; margin:0; padding:0; padding-bottom:1em; text-align:left;}
#footer address {padding-bottom:1em; text-align:right; float:right;}
#footer strapline {height:68px; width:208px; border:0px; margin:0px; padding:0px; float:right; padding:left:50px;}
#footer {text-align:center;}
#footer #functions {color:white; vertical-align:middle; margin-bottom:0.5em;}
#footer #functions img {vertical-align:bottom; border:0;}
#footer #shorturl {height:16px; line-height:14px; font-size:11px; width:200px; border:1px solid #BFD2E1; padding:0 2px;}

/*== sidebar-sections */

.sidebar h1 {font-size:5em; color:#4c4c4c; border-bottom:1px solid #bfd2e1; margin:0; padding-bottom:0.2em;}
.sidebar h2 {font-size:1.8em; color:#4c4c4c; border-bottom:1px solid #bfd2e1; margin:0; padding-bottom:0.2em;}
.sidebar h3 {font-size:1.8em; color:#4c4c4c; border-bottom:1px solid #bfd2e1; margin:0; padding-bottom:0.2em;}
.sidebar h4 {font-size:1.8em; color:#4c4c4c; border-bottom:1px solid #bfd2e1; margin:0; padding-bottom:0.2em;}
.sidebar h5 {font-size:1.8em; color:#4c4c4c; border-bottom:1px solid #bfd2e1; margin:0; padding-bottom:0.2em;}
.sidebar h6 {font-size:1.8em; color:#4c4c4c; border-bottom:1px solid #bfd2e1; margin:0; padding-bottom:0.2em;}
.sidebar li {vertical-align:middle;}
.sidebar img {border:1px solid #4c4c4c; margin-right:5px;}
#container .sidebar h1 a {color:#4c4c4c;}
#container .sidebar h2 a {color:#4c4c4c;}
#container .sidebar h3 a {color:#4c4c4c;}
#container .sidebar h4 a {color:#4c4c4c;}
#container .sidebar h5 a {color:#4c4c4c;}
#container .sidebar h6 a {color:#4c4c4c;}
.sidebar .sidebar-section h1 {font-size:5em;}
.sidebar .sidebar-section h2 {font-size:1.8em;}
.sidebar .sidebar-section h3 {font-size:1.8em;}
.sidebar .sidebar-section h4 {font-size:1.8em;}
.sidebar .sidebar-section h5 {font-size:1.8em;}
.sidebar .sidebar-section h6 {font-size:1.8em;}
.sidebar .sidebar-section {margin-bottom:2em;}
#sub-menu a {font-size:1.2em;}
#sub-menu li a {color: #004b8d;}
#sub-menu li a:hover {color: #ce921a;}
#sub-menu li.selected a {font-weight:bold; background-color:#004b8d; color:#FFFFFF;}
#sub-menu li.selected li a {font-weight:normal; background-color:#FFFFFF; color:#004b8d;}
#sub-menu li.selected li a:hover {font-weight:normal; background-color:#FFFFFF; color:#cd921a;}
#sub-menu li.selected li a:selected {font-weight:normal; background-color:#FFFFFF; color:#FFFFFF;}
#sub-menu li.selectedmore a {background:url("../images/arrow-down-white-on-blue.gif") 98% center no-repeat; font-weight:bold; background-color:#004b8d; color:#FFFFFF;}

/* added after restructuring sub menu to be correctly nested JF*/
#sub-menu li.selectedmore li a {background-image: none;font-weight: normal;background-color: #fff;color: #004b8d;}
#sub-menu li.selectedmore li a:hover {font-weight:normal; background-color:#FFFFFF; color:#cd921a;}
#sub-menu li.unselectedmore li a {font-weight:normal; color:#004b8d;background-image:none;}
#sub-menu li.unselectedmore li a:hover {font-weight:normal; background-color:#FFFFFF; color:#cd921a;}
#sub-menu li.unselectedmore li.selected a {font-weight:bold; background-color:#004b8d; color:#FFFFFF; background-image:none;}
/* end of additions */

#sub-menu li.unselectedmore a {background:url("../images/arrow-down-blue-on-white.gif") 98% center no-repeat; font-weight:bold;}
#sub-menu a.more {background:url("../images/arrow-down-blue-on-white.gif") 98% center no-repeat;}
#sub-menu a.more:visited {background-image:url('../images/arrow-right-blue-on-white.gif');}
#sub-menu a.more:hover {background-image:url('../images/arrow-right-gold-on-white.gif');}
#sub-menu a.more:active {background-image:url('../images/arrow-right-blue-on-white.gif');}
.sidebar ul {margin:0; padding:0; text-indent:0; list-style-type:none; list-style-position:outside;} /* ie6&7 add extra un-removeable padding with list-style-position:inside; */
.sidebar ul ul {padding-left:1.5em;}
.sidebar li {border-top:1px solid #bfd2e1; margin:0; padding:0; text-indent:2px;}
.sidebar li.first {border-top:0;}
.sidebar li a {line-height:2em; display:block; text-decoration:none; padding:0; margin:0;}
.sidebar p {padding-bottom:1em;}
div.sidebar-right li a:hover {text-decoration:underline;}

/* These two lines affect the spacing for the left and right column lists */
div.sidebar-right li a {line-height:1.2em;padding-top:.5em;padding-bottom:.5em;}
div.sidebar-left li a {line-height:1.2em;padding-top:.75em;padding-bottom:.75em;}

#homepage-search h3 {padding-bottom:1em;}
#homepage-search form {padding-bottom:2.5em;}
#homepage-search {padding-bottom:2.5em;}

/* * * * * *
 * CONTENT *
 * * * * * */

#content ol,
#content p,
#content blockquote {font-size:1.2em;}
#content li {font-size:1.2em;}
#content .content-footer {font-size:1em; margin-top:5em; margin-bottom:1em; clear:both;}
#content li li {font-size:1em;}

/*== Photo list */
/* structure: <div class="photolist"><div><img width=50><p></p>[<p></p>]</div>[...]</div>
 * p width is calculated by column-width - image-width - image-margin;
 */
.photo-list div {clear:left;}
.photo-list img {float:left; margin:1.6em 15px 0 0; width:50px; display:block;}
.photo-list p {margin:1em 0 0; padding:0; clear:none; font-size:1.2em; float:left;}
.photo-list p+p {margin:0;padding:0;}
#container .photo-list p.date {font-size:0.9em;}
.sidebars-0 .columns-3 .photo-list p {width:235px;}
.sidebars-0 .columns-4 .photo-list p {width:152px;}
.sidebars-1 .columns-3 .photo-list p {width:155px;}
.sidebars-1 .columns-4 .photo-list p {width:92px;}
.sidebars-2 .columns-3 .photo-list p {width:75px;}
.sidebars-2 .columns-4 .photo-list p {width:32px;}
.sidebar .photo-list img {margin-right:10px;}
.sidebar .photo-list p {font-size:1.2em; width:110px;}

.photo-list .more {float:right; display:block; margin-top:1em;clear:both;}

/*== Forms */
.form_standard div {float:left;}
.form_standard .text {border:1px solid #004b8d; height:18px; float:left; color:#4c4c4c;}
.form_standard .text:focus {border-color:#e4a024; outline:0;}
.form_standard .button {background:url('../images/button-left.png') center left no-repeat #004b8d; float:left; margin:0 0 0 6px; padding:0 0 0 4px; height:22px;}
.form_standard .button input {border:0; background:transparent url('../images/button-right.png') no-repeat right center; color:white; font-weight:normal; cursor:pointer; margin:0; text-indent:-4px; font-size:10px; height:22px;}

.sidebars-0 .columns-3 .search .text {width:180px; font-size:1.2em;}

/* -moz only hack from: http://www.nealgrosskopf.com/tech/thread.asp?pid=20 */
/* This solves vertical centering issue with buttons, as far as hacks go it's pretty stable. */
/*@-moz-document url-prefix() {.form_standard .button input {background-position:right 2px; padding-bottom:2px;margin-top:-2px;height:24px;}}*/


/*== Icon list */
.icon-list img {float:left; margin:0 10px 0 0; display:block;}
.icon-list h3 {margin-bottom:0.5em;}
.icon-list p {margin:0; padding:0; clear:none; font-size:1.2em; float:left; width:130px;}


/* Input form on error page */
.input-id form {width:50%;}
.input-id label {float:left;}
.input-id input {float:right;}
.input-id .submit {float:left;}
.input-id p {clear:both;}



/* CSS STYLE GUIDE
 *
 * selector,
 * selector [space] {property-name:value; [space] property-name:value;}
 *
 * use named colours for black and white
 */