/* --------------------------------------------------Global Resets-------------------------------------------------*/
/* Removes all extra padding and margins that are added by some browsers, which ensures everythings lines up as intended */
body, h1, h2, h3, h4, p, ul, li {
	margin: 0px auto;
	padding: 0px;
}

/* --------------------------------------------------Global Elements-------------------------------------------------*/
/* Sets the default styles for the site */
body {
	font-size: 90%; /* 90% of users default */
	font-family: Geneva, Arial, Helvetica, sans-serif; /* Fonts for text throughout site */	
	color: #330033; /* Text color: very dark purple */
	background: url(../images/background/bodybg.png) repeat-x fixed; /* Background image is fixed so the page scrolls over it */
	text-align: left; /* Justified alignment for all text */
}

table {
	font-size: 75%; /* Reduces the size of the text in a table */
	border-style: solid;
	border-width: medium;
	border-color: #520079;
}

td {
	border-style: solid;
	border-width: thin;
	border-color: #520079;
}

/* Paragraphs */
p {
	padding-bottom: 10px; /* Puts a small space between paragraphs */
}

/* Links */
a img {
	border-style: none;
}

#content-wrapper a {
	color: #660066; /* Text color is medium purple */
	border: none; /* Removes the automatic border on picture links */
	text-decoration: none; /* Removes underlines on text links */
}

#content-wrapper 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: 10px; /* Adds padding so that text doesn't sit up against pictures when they are links */
}

/* Headings */
h1 { /* Main headers: bigger, bolder and slightly brighter than normal text */
	font-size: 125%;
	font-weight: bold;
	color: #660066;
}

h2 { /* Secondary headers: slightly smaller than h1 */
	font-size: 110%;
	font-weight: bold;
	color: #660066;
}

h3 { /* Same as normal text just in bold */
	font-size: 100%;
	font-weight: bold;
	color: #330033;
}

/* --------------------------------------------Layout Elements------------------------------------------------------ */

.container { /* Creates a centrally aligned container that puts everything in the middle of the screen and sets the width of the page */
	margin: 0px auto; /* Centers the content of the page within the window in all but versions of WinIE5. */
	width: 1000px; /* Sets the maximum width of anything to 1000 pixels */
	background: #FFFFFF; /* Puts a white background on top of the main page background creating the content within the main screen */
}

#header { /* This is the top section for each page that contains the Dac SSP picture. The picture will automatically align centrally, and can be changed easily just by replacing the file with another one (just name it the same so that the old one is overwritten) */
	width: 1000px;
}


#navigation { /* This section contains the navigation menu at the top of the page */
	height: auto; /* The height will adjust to accomodate the background image */
	margin: 0px auto;
	padding: 0;
}

#navigationbar1 {
	margin: 0px auto;
	padding: 0;
}

#navigationbar2 {
	margin: 0px auto;
	padding: 0;
}

#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. */
	width: 990px;
	padding: 5px;
	background: #FFFFFF; /* Sets the background for all of the content and its sub divs. */
}

#content { /* This is the main section of the page which is different on each page */
	float: left; /* Float the content to the left - floating a wrapper and its child divs allows for independance in block context formatting. */
	width: 980px;
	padding: 5px;
	background: #FFFFFF; /* Sets the background to white for all of the content and its sub divs. */
}

#main { /* This is the main part of the content for each page, but only needs to be used if there are 2 sections to any page: e.g. if there is a calendar as well on the page */
	float: left;
	width: 650px; /* Sets the width to avoid the shrink wrapping of its contents */
	padding: 5px;
}

#main img { /* This adds some padding around pictures within the main section so that text doesn't sit up against the image */
	padding: 5px;
}

#second { /* This is the secondary content for any page that has 2 sections: e.g. a calendar */
	background-color: #FCCCFF;
	float: left;
	width: 300px; /* Sets the width to avoid the shrink wrapping of its contents */
	padding: 5px;
}

#footer { /* 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-color: #330033;
	color: #FFFFFF; /* White text on a dark background */
	float: left; 
	width: 960px; 
	padding-left: 20px;
	padding-right: 20px; 
}

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

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

.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 { /* Sets the link colour to the same as footer text colour */
	color: #FFFFFF;
}

.column a:visited { /* Resets the link colour to the same as footer text colour */
	color: #FFFFFF;
}