@charset "UTF-8";

/* Global Resets */

body, h1, h2, h3, h4, p, ul, li {
	margin: 0px auto; /* Removes default margin that some browsers add. */
	padding: 0px; /* Removes default padding that some browsers add. */
}

/* _______________________________________________________________________________________________________________ */
/* Global Layout */

body {
	font-size: 80%; /* Sets default font size to 100% of users default */
	font-family: Arial, Helvetica, sans-serif; /* Sets the default font families for text throughout the page. */
	color: #000033; /* Sets the text color for the page. (Dark Blue) */
	background: #000033; /* Sets background colour for the page (V+ Dark Blue) */
	text-align: left; /* Justifies text for the entire content */
}

/* _______________________________________________________________________________________________________________ */
/* Main Text Elements */
p {
	padding-bottom: 10px; /* Adds padding to the bottom of paragraphs */
}

a {
	color: #0033FF; /* Sets default colour for links (Med Blue) */
	border: none; /* Removes border on picture links */
	text-decoration: none; /* Removes underlines on text links */
}

a:visited {
	border: none;
}

a:hover {
	text-decoration: underline; /* Underlines links when hovering with mouse */
}

.piclink { /* Needs to be added to the <p> element also for padding to come into effect */
	color: #FFFFFF; /* Changes the colour of the border around links to white so as to appear not to be there. */
	padding-top: 20px; /* Adds padding between pictures and surroundings */
	padding-bottom: 20px;
}

/* _______________________________________________________________________________________________________________ */
/* Special Text Formatting */
/* Headings */

h1 {
	font-size: 120%;
	font-weight: bold;
	color: #000066;
}

h2 {
	font-size: 100%;
	font-weight: bold;
	color: #000066;
}

h3 {
	font-size: 80%;
	font-weight: bold;
	color: #000033;
}

h4 {
	font-size: 100%;
	font-weight: bold;
	color: #0000CC;
}

/* Lists and Tables */

.list {
	font-size: 80%;
}

/* _______________________________________________________________________________________________________________ */
/* Layout Elements */

.container {
	margin: 0px auto; /* Centers the content of the page within the window in all but versions of WinIE5. */
	width: 900px; /* Sets the overall width of the containers within the bands. */
	background: #FFFFFF; /* Sets the background colour for the content. */
}

#masthead {
	margin: 0px auto;
	background: url(../images/background/headerbackground.jpg);
}

#masthead span {
	position: absolute; /* Takes the span (that holds the text for the p element) out of the document flow so that it can be positioned in an exact place off the viewport. */
	top: -10000px; /* Uses a large negative margin to put the text within the p way off screen so that visual users to not see it. */
}

#bar { /* Bar underneath masthead with slogan. */
	background: url(../images/background/barbackground.jpg) repeat-x;
	margin: 0px auto; /* Aligns the bar next to the other content divs and the page background */
	height: 30px; /* Ensures the correct height for the background to fit properly */
}

#content-wrapper {
	float: left; /* Float the content wrapper to the left - floating a wrapper and its child divs allows for independance in block context formatting. */
	padding-bottom: 10px; /* Adds 20 pixels of space under the content area to give it breathing room before the footer begins. */
	background: #FFFFFF; /* Sets the background for all of the content and its sub divs. */
}

#navigation {
	float: left; /* Floats the navigation column to the left */
	width: 180px; /* Sets the width of the navigation column */
	padding: 10px; /* Adds padding to prevent content touching other content. */
	text-align: left; /* Resets the default justified text */
	background: url(../images/menubg.png)
}

#content {
	float: left;
	width: 690px;
}

#maincontentmenu {
	background: url(../images/background/contentmenubackground.jpg) no-repeat;
	float: left;
	width: 655px;
	height: 30px;
	margin-top: 10px; /* Pushes the image down, making the image file smaller to upload and still maintaining a gap between divs */
	padding-right: 10px;
	padding-left: 25px;
}

#maincontentmenubutton { /* Allows each div to simulate a button, by setting the width, adding margins to move them away from the top of the maincontentmenu (top) and from each other (right). Floating left keeps them all against each other */
	width: 120px;
	margin-top: 7px;
	margin-right: 10px;
	float: left;
}

#maincontentmenubuttonsmall { /* Allows each div to simulate a button, by setting the width, adding margins to move them away from the top of the maincontentmenu (top) and from each other (right). Floating left keeps them all against each other */
	width: 80px;
	margin-top: 7px;
	margin-right: 10px;
	float: left;
}

#maincontent {
	/* background: url(../images/background/contentbackground.jpg) no-repeat; /* Places the background picture for the main content. */
	float: left; /* Floats the main column to the left. */
	width: 670px; /* Sets the width to avoid the shrink wrapping of its contents. Gives a 20px buffer to the right hand side of the content. */
	padding: 10px; /* Adds padding to prevent content touching the slogan bar above. */
	padding-bottom: 20px; /* Adds extra padding to the bottom of the main content column. */
	background-color: #DDDDFF;
}

#maincontentprimary { /* Adds a content holder when placing content and a list. */
	float: left; /* Floats primary content to the left. */
	width: 470px;
	padding-right: 10px; /* Adds padding to make 20px between primary and secondary content. */
}

#maincontentsecondary { /* Adds a content holder for lists with padding all around, dark background and small light text. */
	float: right;
	width: 160px;
	padding: 10px;
	font-size: 78%;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #000033;
	text-align: left;
}

#footer-wrapper { /* This div is set up for use in faux column technique within the footer. It is the parent container for the three columns, and is needed in order to have a way to give the illusion of a border around and within the the three columns in the footer.*/
	background: url(../images/background/footerbackground.jpg) repeat-y; /* Sets the background image, and the vertical repeat of the image on the footer wrapper. */
	color: #FFFFFF; /* Sets the text color for the footer. */
	float: left; /* Floats the footer wrapper to the left. */
	width: 858px; /* Assigns a width to the footer wrapper. */
	margin-left: 21px; /* Margins set to centre the footer below the content */
	margin-right: 21px;
	margin-bottom: 20px; /* Gives some space between the bottom of the footer and the edge of the browser window. */
}

#links-wrapper { /* This div is set up for use in faux column technique within the footer. It is the parent container for the three columns, and is needed in order to have a way to give the illusion of a border around and within the the three columns in the footer.*/
	float: left; /* Floats the footer wrapper to the left. */
	width: 858px; /* Assigns a width to the footer wrapper. */
	margin-left: 20px; /* Margins set to centre the footer below the content */
	margin-right: 20px;
	margin-bottom: 20px; /* Gives some space between the bottom of the footer and the edge of the browser window. */

}

/* _______________________________________________________________________________________________________________ */
/* Clearing after divs */
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	font-size: 1px; /* Sets the font size to 1 pixel */
	line-height: 0px; /* Sets line-height to 0 -font and line-height, even if not explicitly on the page, might add dimension to the clearing element rather than make it largely invisible */
	clear: both; /* Keeps floated divs from draping over objects beneath them. */
	height: 0px; /* Makes sure the clearing element has no height */
}

/* _______________________________________________________________________________________________________________ */
/* Image placing */
.image {
  	float: left; /* Moves the image to the left side of its container and allows text to flow around its right side. */
	margin-right: 10px; /* Adds space to the right of the image so that it does not touch the text */
}

/* _______________________________________________________________________________________________________________ */
/* Element Specific Formatting */
/* masthead div */

#masthead a img {
	border: none;
}

/* maincontentmenu div */

#maincontentmenu a {
	text-align: center;
	background-color: #000033; /* Sets background colour of the block */
	color: #0099FF; /* Sets text colour (Med Blue) */
	font-weight: bold; /* Emphasises the text */
	font-size: 90%; /* Makes it slightly smaller than regular text */
	text-decoration: none; /* Removes underline on hover */
	display: block; /* Sets the <li> to fill the whole row ignoring amount of text - button styling */
	border: 1px solid #999999; /* Sets a border around the <li> */
	padding: 3px 0px 3px 0px; /* Enlarges the space around the text top and bottom */
}

#maincontentmenu a:visited { /* Resets formatting for visited links from the main page back to the normal navigation panel setting */
	color: #0099FF; /* Sets text colour (Med Blue) */
}

#maincontentmenu a:hover { /* Sets the changes when hovering over the link */
	background-color: #000066; /* Sets background colour of the block when hovering */
	color: #FFFFFF; /* Sets text colour (White) */
	font-weight: bold; /* Emphasises the text */
	border: 1px solid #FF6600; /* Sets a border around the <li> */
	border-left: 4px solid #FF6600;
	padding: 3px 0px 3px 10px; /* Enlarges the space around the text */
}

/* Navigation Panel */
#navigation a img {
	border: none
}

#navigation ul {
	list-style: none; /* Removes list bullets */
	margin: 0px 0px 0px 0px; /* Sets spacing around links for a margin on the left */
}

#navigation li {
	margin-bottom: 5px; /* Puts a space between one link and the next */
	margin-right: 20px;
}

#navigation li a {
	background-color: #000033; /* Sets background colour of the block */
	color: #0099FF; /* Sets text colour (Med Blue) */
	font-weight: bold; /* Emphasises the text */
	font-size: 90%; /* Makes it slightly smaller than regular text */
	text-decoration: none; /* Removes underline on hover */
	display: block; /* Sets the <li> to fill the whole row ignoring amount of text - button styling */
	border: 1px solid #999999; /* Sets a border around the <li> */
	padding: 3px 0px 3px 10px; /* Enlarges the space around the text. 3px top/bottom, 10px on left */
}

#navigation li a:visited { /* Resets formatting for visited links from the main page back to the normal navigation panel setting */
	color: #0099FF; /* Sets text colour (Med Blue) */
}

#navigation li a:hover { /* Sets the changes when hovering over the link */
	background-color: #000066; /* Sets background colour of the block when hovering */
	color: #FFFFFF; /* Sets text colour (White) */
	font-weight: bold; /* Emphasises the text */
	font-size: 90%; /* Makes it slightly smaller than regular text */ 
	display: block; /* Sets the <li> to fill the whole row ignoring amount of text - button styling */
	border: 1px solid #FF6600; /* Sets a border around the <li> */
	border-left: 4px solid #FF6600;
	padding: 3px 0px 3px 10px; /* Enlarges the space around the text */
}

/* Footer */
.column { 
	float: left;/* Floats each column to the left.*/ 
	width: 266px; /* Assigns a width for each column. */
	padding: 10px; /* Adds space around footer content */
}

.smallcolumn {
	text-align: center;
	float: left;/* Floats each column to the left.*/ 
	width: 190px; /* Assigns a width for each column. */
	padding: 10px; /* Adds space around footer content */
}

.smallcolumn p { /* This descendant selector sets attributes for paragraphs only in the context of the column class. */
	font-size: 75%; /* Sets the font size to 75% of the user's browser preference. */
	line-height: 1.4; /* Opens up the spacing (leading) between lines of text. */
	padding-bottom: 0px; /* Removes excess space between bottom line and edge of content. */
	text-align: center;
}

.column p { /* This descendant selector sets attributes for paragraphs only in the context of the column class. */
	font-size: 75%; /* Sets the font size to 75% of the user's browser preference. */
	line-height: 1.4; /* Opens up the spacing (leading) between lines of text. */
	padding-bottom: 0px; /* Removes excess space between bottom line and edge of content. */
}

.column a img { /* Removes the automatic border around img links */
	border: none;
}

#maincontentsecondary ul {
	list-style-position: outside;
	margin-left: 20px;
}

#maincontentsecondary li {
	padding-bottom: 3px;
}

#maincontentsecondary h4 {
	color: #FF6600;
}

#footer-wrapper a {
	color: #FFFFFF;
}

/* SprySlidingPanels.css - version 0.1 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main SlidingPanels container. This selector
 * defines the width and height of the view port for the widget. Note that
 * this selector does not set the overflow property since that is done programatically
 * by the widget. Setting the overflow property programatically ensures that
 * the contens of the widget will be fully visible should JavaScript be disabled
 * in the browser.
 *
 * If you want to constrain the width of the SlidingPanels widget, set a width on
 * the SlidingPanels container. By default, our sliding panels widget expands
 * horizontally to fill up available space.
 *
 * The SlidingPanels container is positioned relative so that content inside it
 * can be positioned relative to its upper left corner.
 *
 * Avoid placing any CSS border or padding properties on the SlidingPanels container
 * as they can affect the proper positioning and sliding animations of the contents
 * inside the container.
 *
 * The name of the class ("SlidingPanels") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * SlidingPanels container.
 */
.SlidingPanels {
	float: left;
	position: relative;
	width: 100%;
	padding: 0px;
	border: none;
}

/* This is the selector for the container that holds all of the content panels
 * for the widget. The SlidingPanelsContentGroup container is what gets programtically
 * positioned to create the slide animation. It is also what governs the layout of
 * the panels.
 *
 * By default, the width of the container is the same as its parent, the SlidingPanels
 * container.
 *
 * You can make the panels within the SlidingPanelsContentGroup container layout
 * horizontally by giving the SlidingPanelsContentGroup container a width that is as wide
 * or larget than the sum of the widths of all of the content panels, and then floating
 * the content panels inside the SlidingPanelsContentGroup container so they all appear
 * on the same line. You may also need to float the SlidingPanels and SlidingPanelsContentGroup
 * containers to insure that none of the content panels "leak" outside of the widget.
 *
 * Avoid placing any CSS border, margin, or padding properties on the SlidingPanels
 * container as they can affect the proper positioning and sliding animations of the
 * the container within the widget.
 *
 * The name of the class ("SlidingPanelsContentGroup") used in this selector is not
 * necessary to make the widget function. You can use any class name you want to style the
 * SlidingPanelsContentGroup container.
 */
.SlidingPanelsContentGroup {
	float: left;
	position: relative;
	width: 10000px;
	margin: 0px;
	padding: 0px;
	border: none;
}


/* This is the selector for the container that holds content for a given panel. In our
 * default style implementation, the dimensions of each content panel exactly match the
 * dimensions of the view port (SlidingPanels) container. This ensures that only one
 * panel ever shows within the view port.
 *
 * Avoid placing any CSS border, margin, or padding properties on the SlidingPanels
 * container as they can affect the proper positioning and sliding animations of the
 * the panel within the widget. You can place border, margins and padding on any content
 * *inside* the content panel.
 *
 * The name of the class ("SlidingPanelsContent") used in this selector is not
 * necessary to make the widget function. You can use any class name you want to style the
 * SlidingPanelsContent container.
 */
.SlidingPanelsContent {
	float: left;
	width: 470px;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
	border: none;
}

/* The class used in this selector is programatically added to the SlidingPanels container
 * anytime we are animating between panels. This rule makes sure that *all* content inside
 * the widget is overflow:none to avoid a rendering glitch that occurs in FireFox 1.5 whenever
 * there is an element inside the widget that displays a scrollbar.
 *
 * The class is automatically removed once the animation has stopped so that the overflow
 * properties of the content inside the widget should be restored.
 */
.SlidingPanelsAnimating * {
	overflow: hidden !important;
}

/* The class used in this selector is programatically added to the SlindingPanelsContent
 * container that is currently visible in the view port. The class is automatically removed
 * when the widget switches to a different panel.
 */
.SlidingPanelsCurrentPanel {
}

/* The class used in this selector is programatically added to the SlidingPanels container
 * anytime the SlidingPanels container is given focus. The class is automatically removed
 * once the SlidingPanels container loses focus.
 */
.SlidingPanelsFocused {
}