/***** Body and main container *****/

body {  /* Set everything to zero for a good cross-browser starting point */
	margin:0; /* Zero the margins on the main body */
	padding:0; /* Zero the padding on the main body - Opera has default padding... this clears it */
	Border:0; /* Zero the padding on the main body - Opera has default padding... this clears it */
	/* background: #eaeaea;  /* sets the background image */	
	/*background-image: url(../Images/Background.jpg);  /* sets the background image for the header */
	background-color:#DDDDDD;
	color: #383412;  /* set the default text color */
	text-align: center; /* Hack to centre the wrapper in IE5.x pc */
	font-family: Arial, Helvetica, Verdana, sans-serif; /* set the default fonts */
	font-size: 100.01%; /* Sets default font size. This odd value compensates for several browser bugs. 
						First, setting a default font size in percent (instead of em) eliminates an IE/Win 
						problem with growing or shrinking fonts out of proportion if they are later set in 
						ems in other elements. Additionally, some versions of Opera will draw a default 
						font-size of 100% too small compared to other browsers. Safari, on the other hand, 
						has a problem with a font-size of 101%. Current "best" suggestion is to use the 100.01% 
						value for this property */
	min-width: 769px; /* Prevents the body becoming narrower than our wrapper div - keeps the content from 
						disappearing off the left edge with Gecko browsers */
}

#wrapper {
  	width: 771px;/*sets the width for IE5.x's broken box model*/
	w\idth: 769px; /* sets the width of the wrapper for compliant browsers*/
	margin: auto;/* centers the wrapper. First value - 5px is applied to the top and bottom margins, 
						auto sets the excess space on the view port evenly to the left and right*/
	position: relative; /* important to position it relatively */
	background-color: #FFFFFF; /* sets the wrappers background color */
	text-align: left; /* Realigns the text to the left after the IE hack in the body rule */
	border: 1px solid black;
	margin-top: 5px;
}


/***** Header *****/

#header {
	position: relative; /* **PLEASE READ** ~ This property and value is not needed for your page to be 
						rendered correctly in the browser - However, without it Dreamweaver allows the 
						position of the leftcol div to ride up over the banner in design view. If that 
						does not bother you you can safely delete this property and value pair. 
						Alternatively you could implement a design time style sheet to position the div 
						correctly for working in design view */
	background-image: url(../Images/Header.jpg);  /* sets the background image for the header */
	background-repeat: no-repeat; /* prevents the bg image from repeating */
	background-position: center; /* Position at the bottom of the wrapper */
	background-color: #FFFFFF;
	/*margin-top: 5px; /* moves the div down from the banner */
	border-bottom: 4px solid #c3c3c3;
	height: 110px;
}


/***** LeftCol *****/

#leftcol { /* Begin laying out the leftcol div */
	clear:left; /* Start by clearing any floating elements */
	float:left; /* Floats the div to the left to make a column */
	width:150px; /* Set the width of the column */
	margin:10px 0 10px 0; /* Set margins on the left column... Top Right Bottom Left */
	padding:0; /* Clear any padding that may have been set */
}

#leftcol ul { /* List within the leftcol column */
	list-style-type:none; /* Ensure that no bullets are displayed for the list */
	width:150px; /* Set the width of the list */
	margin: 0 0 20px 0; /* Set the margins for the list... Top Right Bottom Left */
	padding:0; /* Clear any padding that may have been set */
}

#leftcol li {
	margin-bottom:5px; /* We want a thin margin between the list elements */
	margin-left:5px; /* We dont want the elements to butt up against the left hand edge, so add a margin */
}

#leftcol li a {
	font-weight:bold; /* Make the text in the list elements bold for effect */
	font-size:10px; /* Set the font size */
	height:20px; /* Set a height of 20 pixels to space give space around the text */
	text-decoration:none; /* Since list item texts are links, we want to clear any underlining for effect*/
	color:#505050; /* Set the colour of the text... Dark grey */
	display:block; /* Make the element a physical block so it looks like a container*/
	padding:6px 0 0 10px; /* Add padding to the list elements for positioning of the text... Top Right Bottom Left*/
	background:#f4f4f4 url(../images/menubg.gif) bottom left repeat-x; /* Set the background image for the list elements
																		The image is placed at bottom left and repeats
																		to the right to fill the whole element. The
																		top portion of the element shows the backcolour */
	border-top:1px solid #d8d8d8; /* Put a grey border around all four sides of the element */
	border-right:1px solid #d8d8d8; /* Put a grey border around all four sides of the element */
	border-bottom:1px solid #d8d8d8; /* Put a grey border around all four sides of the element */
	border-left:4px solid #cccccc; /* Put a grey border around all four sides of the element. Thicker on the left for effect */
}

#leftcol li a:hover {
/*	text-decoration:overline underline;  /* When the user hovers over the text, show an underline and an overline for effect */
}

#leftcol li a:hover, #leftcol li a.current {
	background:#eaeaea url(../images/menubg2.gif) bottom left repeat-x; /* When hovering over the element and for the selected 
																		element, show a different, darker background image.
																		It still repeata for left to right*/
	color:#505050; /* Set the colour of the text... Dark grey*/
	border-top:1px solid #67c755; /* Put a grey border around all four sides of the element */
	border-right:1px solid #67c755; /* Put a grey border around all four sides of the element */
	border-bottom:1px solid #67c755; /* Put a grey border around all four sides of the element */
	border-left:4px solid #67c755; /* Put a grey border around all four sides of the element. Thicker on the left for effect */
}

#leftcol ul ul {
	margin:5px 0 5px 3px; /* set up margins for second level lists.... Top Right Bottom Left */
	width:142px; /* To distinguish second level lists, make them a bit smaller */
}

#leftcol ul ul a {
	height:16px; /* Set the height of the second level list elements.. Slightly thinner than top level elements */
	margin:0; /* No margins needed for second level elements. They are already away from the left hand edge */
	padding:4px 0 0 8px; /* Add padding to the list elements for positioning of the text... Top Right Bottom Left*/
}

#leftcol h2 {
	font-size:13px; /* Increase font size for emphasis */
	font-weight:bold; /* Make thge text bold for emphasis */
}

/***** Did you know *****/
#DYK {
	margin:10px 0 10px 5px; /* Set margins on the Did you know box... Top Right Bottom Left */
	padding:10px 10px 5px 10px; /* Add padding to the Did you know box to position it... Top Right Bottom Left */
	color:#505050; /* Set text colour for the box */
	background:#f4f4f4 url(../images/menubg.gif) bottom left repeat-x; /* Set the background image for the Did you know box.
																	The image is placed at bottom left and repeats
																	to the right to fill the whole element. The
																	top portion of the box shows the backcolour */
	border-top:1px solid #d8d8d8; /* Put a grey border around all four sides of the element */
	border-right:1px solid #d8d8d8; /* Put a grey border around all four sides of the element */
	border-bottom:1px solid #d8d8d8; /* Put a grey border around all four sides of the element */
	border-left:4px solid #cccccc; /* Put a grey border around all four sides of the element. Thicker on the left for effect */
	width:120px; /* Set the width of the Did you know box */
}

#DYK a, #footer a {
	font-weight:bold; /* Make any link bold for emphasis (eg The Read more >> link) */
	text-decoration: none; /* Turn off underlining links */
}

#DYK a:hover, #footer a:hover {
	text-decoration: underline; /* When moving over a link, apply an underline for effect */
}

#DYK p, #footer p{
	font-size:10px; /* Set the font size for the Do you know box */
}

#DYK h2 {
	margin:0 0 10px 0; /* Set margins for emphasised text in the Do you know box.... Top Right Bottom Left */
	padding:0; /* Clear any padding */
}

/***** ausmade *****/
#ausmade {
	margin:10px 0 10px 5px; /* Set margins on the Did you know box... Top Right Bottom Left */
	padding:10px 10px 5px 10px; /* Add padding to the Did you know box to position it... Top Right Bottom Left */
	color:#505050; /* Set text colour for the box */
	background:#ffffff url(../images/ausmade.jpg) bottom left no-repeat; /* Set the background image for the Did you know box.
																	The image is placed at bottom left and repeats
																	to the right to fill the whole element. The
																	top portion of the box shows the backcolour */
	border-top:0; /* Put a grey border around all four sides of the element */
	border-right:0; /* Put a grey border around all four sides of the element */
	border-bottom:0; /* Put a grey border around all four sides of the element */
	border-left:0; /* Put a grey border around all four sides of the element. Thicker on the left for effect */
	width:120px; /* Set the width of the Did you know box */
	height:100px; /* Set the height of the Did you know box */
}

/***** footer *****/
#footer {
  	width: 771px;/*sets the width for IE5.x's broken box model*/
	w\idth: 769px; /* sets the width of the wrapper for compliant browsers*/
	margin: auto;/* centers the wrapper. First value - 5px is applied to the top and bottom margins, 
						auto sets the excess space on the view port evenly to the left and right*/
	position: relative; /* important to position it relatively */
	background-color: #FFFFFF; /* sets the wrappers background color */
	border: 1px solid black;
	border-top: 0;
	margin-top: 0; /* moves the div down from the banner */
	height: 20px; 
	padding-top: 7px;
	text-align:center;
}

#footercol1 { /* Div class used for columns */
	float: left;  /* Float the div on the left to make a column. Multiple divs float after each after */
	padding-left: 10px;
	width: 370px;  /* Set the width of the div. Total width is 582 px.  We want 3 columns. */
	text-align:left;
}

#footercol2 { /* Div class used for columns */
	float:none;  /* Dont float. This will mean it appears after the last float (footerCol1) Multiple divs float after each after */
	padding-right:10px;  /* Clear any padding */
	text-align:right;
}

/***** Main page divs *****/
/* NOTE: These divs are used as the main divs on each individual page. There is a standard    */
/*       RHS div that should be used if no customisation is needed. If any chnages are needed */
/*       such as background images or different margins/padding etc, then tailor one of the   */
/*       5 RHS custom divs. You can freely add in more RHS custom divs as need here for use   */
div.RHS, div.RHS_header, div.RHS_custom1, div.RHS_custom2, div.RHS_custom3, div.RHS_custom4, div.RHS_custom5 { /* Begin styling the RHS type divs */
	width: 582px; /* sets the width of our content*/
	margin-left: 175px; /* this left margin clears the leftcol div and allows our content div to become a second column */
	margin-bottom: 10px; /* Leaves a margin below the div */
	margin-top: 10px; /* Leaves a margin above the div */
	border:1px solid #d8d8d8; /* Put a grey border around all four sides of the element */
	border-right:4px solid #d8d8d8; /* Put a thicker grey border on the right of the element for effect */
}

div.RHS_header { /* casestudy specific values */
	Height: 30px; /* Set the height of the div (minimum height) */
	margin-bottom: 0; /* Remove the margin on the bottom so the next box will butt up against it */
	border-bottom:0; /* Remove the border from the bottom. It will use the next divs top border */
	/*background-color:#F5F89C; /* Set the background colour to yellowish */
	background:url(../images/section_header.jpg) top right no-repeat; /* Set the background image for the bottom section.
																		The image is placed at the top right and does not 
																		repeat. The rest of the box inherits the backcolour 
																		from the main wrapper div */
}

div.RHS_header p { /* Common p element styling */
	font-size:14px; /* Set the font size */
	font-weight:bold; /* Make the text bold for emphasis */
	margin: 7px 6px 10px 6px; /* set the margins for the p element... Top Right Bottom Left */
	padding: 0; /* zero off the padding */
	color:#990000; /*Set the font colour to Redish */
	text-align:center; /* Center the text */
}