/*External CSS*/
	
	* { /*Select all elements, and make the width and height properties include content, padding and border, but not the margin.*/
		box-sizing: border-box;
	}
	
	body { /*Set default property values, including the background and font, for every page of the website.*/ 
		margin: 0;
		padding-top: 130px;
		background: url('images/bg.png') fixed; /*The background image is fixed (i.e. does not scroll with the rest of the page). By default, it is repeated horizontally and vertically.*/
		font: normal 18px 'Lato', sans-serif;
	}
	
	h1 { /*Main Heading*/
		font: bold 40px 'Droid Sans', sans-serif;
		color: #6a1613; /*Maroon*/
		margin: 20px 20px 20px 20px; /*extra allowance at top for search box*/
		text-align: center;
	}
	
	h2 { /*Subheading (Main Column)*/
		font: normal 27px 'Amaranth', sans-serif;
		color: #8c100d; /*Reddish Brown*/
	}
	
	h3 { /*Subheading (Left Column)*/
		font: bold 25px 'Droid Sans', sans-serif;
		color: #6a1613; /*Maroon*/
		margin-top: 20px;
		margin-bottom: 15px;
	}
	
	h4 { /*Main Description*/
		font: normal 22px 'Amaranth', sans-serif;
		color: #8c100d; /*Reddish Brown*/
	}
	
	h5 { /*Footer Text*/
		font: normal 19px 'Lato', sans-serif;
		color: #000000; /*Black*/
		margin: 0;
	}
	
	body.smaller_text{
		font: normal 16px 'Lato', sans-serif; 
	}
	
	h5.smaller_text { /*Small Footer Text (Acknowledgements and Copyright Details)*/
		font: normal 14px 'Lato', sans-serif;
		margin-top: 10px;
	}
	
	h5.smaller_text2 { 
		font: normal 16px 'Lato', sans-serif;
		margin-top: 10px;
		margin-left: 13px;
	}
	
	a { /*Make links red by default and remove the underline from links (needed for browsers such as Internet Explorer).*/
		color: #8c100d;
		text-decoration: none; 
	}
	
	a:hover { /*Make links change color when hovered over*/
		color: #000000;
	}
	
	img.center {
		position: absolute;
		left: 250px;
	}
	
	ul { /*Adjust spacing for unordered lists*/
		padding: 15px 0 15px 20px;
	}
	
	table, th, td { /*Common property values for tables, table headings and table data*/
		border: 1px solid black;
		border-collapse: collapse; /*Single border*/
	}
	
	th, td { /*Set padding for table headings and data to 5 px on all sides*/
		padding: 5px;
	}
	
	input{
		font: normal 14px 'Lato', sans-serif;
		z-index: 5;
	}

	.search { /*Sidebar (no scroll)*/
		position: absolute;
		top: 10px;
		left: 468px;
		z-index: 7;
	}
	
	#container { /*This sets the overall page width at 1000px and centralises the page.*/
		width: 1000px;
		margin: auto;
	}
	
	#header { /*This code is needed to make the sticky nav menu smoother.*/
		height: 130px;
	}
	
	.nav_menu { /*This code is for the navigation menu. It is "stacked" above all other elements.*/
		height: 35px;
		width: 1000px;
		margin-bottom: -35px; 
		background: #ebd14d;
		z-index: 6;
		box-shadow: 0 2px 3px rgba(0,0,0,.4); /*Give the nav menu a box-shadow with vertical shadow of 2 px, blur of 3 px and make it black with opacity (the color parameter is also needed for Safari (on PC) to make it visible.*/
		position: absolute; /*The element is positioned relative to its first positioned (not static) ancestor element*/
	}
	
	#header, .nav_menu_scrolled { /*The header and nav menu (when nav_menu_scrolled class is added - see functions.js) are fixed to the top of the screen.*/
		position: fixed; 
		top: 0;  
	}
	
	#primary_nav_wrap ul {
		list-style: none; /*No marker is shown for each list item (i.e. no bullet points / discs)*/
		margin: 0;
		padding: 0;
		font: bold 20px 'Lato', sans-serif;
		text-align: center;
	}

	#primary_nav_wrap ul a { /*Text in the nav menu is centred vertically due to the line-height property.*/
		height: 35px;
		width: 142.854px;
		display: block;
		color: #000; /*#6a1613;*/	
		line-height: 170%;
	}

	#primary_nav_wrap ul li {
		margin: 0;
		padding: 0;
		background: #ebd14d;
		float: left;
		position: relative; /*Position sub-menus directly below the corresponding page*/
	}

	#primary_nav_wrap ul li.current_menu_item { /*The button representing the page that the user is currently on has a slightly darker background.*/
		background: #e7c621;
	}

	#primary_nav_wrap ul li:hover { /*When the user hovers over a button it has a slightly darker background.*/
		background: #e7c621;
	}

	#primary_nav_wrap ul ul { /*This code is for the submenus*/
		display: none; /*Hide the submenus when user hasn't hovered over the corresponding button*/
		font: bold 17px 'Lato', sans-serif; 
		position: absolute;
	}

	#primary_nav_wrap ul ul a { /*This code is for the links for the submenus*/
		width: 200px;
		height: auto;
		padding: 10px 15px;
		text-align: left;
		box-shadow: 0 2px 3px rgba(0,0,0,.4);
		/*Delete box-shadow if using ul ul ul (sub sub-menu)*/
	}

	#primary_nav_wrap ul ul ul { /*This code is for sub-sub menus if any are added in the future. These will be positioned to the right-hand side of the sub-menus.*/
		top: 0;
		left: 100%;
	}

	#primary_nav_wrap ul li:hover > ul { /*This code is required to make submenus visible.*/
		display: block;
	}
	
	#main_image { 
		height: 360px;
	}
	
	#slideshow { 
		height: 360px;
		background: #ffffff; /*When the images on the slideshow change, the background is not visible.*/		
	}

	#slideshow > div { 
		position: absolute; 
	}
	
	#main_content {
		height: 885px;
	}
	
	#main_content_text {
		width: 1000px;
		height: 885px;
		padding: 0 40px; /*40 px padding on left and right hand sides.*/
		overflow: auto; /*Adds an internal scroll bar if the content does not fit in the allocated space*/
	}
	
	#main_content_text.center{
		text-align: center;
	}
	
	#left_column {
		width: 280px;
		height: 885px;
		float: left;
		padding: 0 20px 0 40px;	
	}
	
	#left_column a { /*Links in the left column are bright red*/
		color: #8c100d;
	}
	
	#left_column a:hover { /*Links inn the left column turn black when hovered over*/
		color: #000000;
	}

	#main_column {
		width: 720px;
		height: 885px;
		float: right;
		padding: 0 40px 0 20px;
		left: 280px;
		text-align: justify; /*Text in main column is justified*/
		overflow: auto;
	}

	#footer {
		width: 1000px;
		height: 160px;
		background: #ebd14d;
		float: left;
		margin-bottom: 40px;
	}
	
	#footer a {
		color: #6a1613;
	}
	
	#footer a:hover { 
		color: #000000;
	}
		
	#footer_left_column {
		width: 260px;
		margin: 22px 0 0 25px;
	}
	
	#footer_left_column a { 
		color: #000000;
	}
 		
	#footer_right_column {
		width: 710px;
		margin: 24px 0 0 265px;
	}

	#left_column, #main_column, #footer_right_column, #main_content_text {
		position: absolute;
		top: 0;
	}
	
	#main_image, #slideshow, #main_content, #footer { /*These elements are positioned 35 px below their "normal" position as they are situated below the nav menu.*/
		position: relative;
		top: 35px;
	}