﻿/*----------------------------------------
-----INDEX PAGE BASIC SETUP------------------
----------------------------------------*/
header, footer, aside, section, article, hgroup {
	display: block;
}
body {
	background: #FFF; /*--- White background ---*/	
	color: #FF000080; /* Green Base font colour */
	font-size: 87.5%; /* Base font size: 14px */
	font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	line-height: 1.429;
	margin: 0;
	padding: 0;
	text-align: left;
}
p {
	margin-bottom: 30px;  /*--- Gap under a paragraph ---*/
}

a {
	color: #FFF; /*--- Links Font Colour ---*/
}
a:hover, a:active {
		color: cornflowerblue;  /*--- light blue ---*/
	}
a img {
	border: 0px; 
	text-decoration: none; /* this removes the underline from hyperlinks */
}
.clear {
	clear: both; /* this stops items floating around container */
	height: 0;
	font-size: 0;
	overflow: hidden;
}
/*----------------------------------------
--------- Font h class styles ------------
-------------------------------------- */
h2 {font-size: 1.571em}	/* 22px divided by 14 */
h3 {font-size: 1.429em}	/* 20px divided by 14 */
h4 {font-size: 1.286em}	/* 18px divided by 14 */
h5 {font-size: 1.143em}	/* 16px divided by 14 */
h6 {font-size: 1em}		/* 14px */
h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.4;
	margin-bottom: .05em;
}
/*----------------------------------------
----------------HEADER--------------------
----------------------------------------*/
/* ====== Header Style ======= */ 
.mainHeader h1 { 
	color: #000066;
	float: left;
	clear: both;
	overflow: hidden; /* stops other content floating over this box */
	margin-left: 3%;
}
.mainHeader nav {
	background: #fff;
	float: right;
	overflow: hidden; /* stops other content floating over this box */

}
.mainHeader nav a:link, .mainHeader nav a:visited {
	color: #fff;
	display: inline-block;
	padding: 2px 0px; 
	text-decoration: none;
}
.content {
	overflow: hidden; /* stops other content floating over this box */
	line-height: 25px;
	width: 95%; /* width of main content box */
	float: left;
}
.content h1 {
		color: #000066;
		margin-left: 3%;
		line-height: 1.00em;
}

/*----------------------------------------
--------Main Content section-------------
----------------------------------------*/
#gallery {
	margin: 0 auto;
	padding: 5px 0;
	width: 95%;
}
	#gallery figure {
		position: relative;
		float: left;
		margin: 10px 1%;
		width: 23%;
	}
	#gallery figure p {
		margin: 2%;
	}
	#gallery figure a.inner {
			display: block;
			padding: 1px;
			text-decoration: none;
			background: #003300 url("../images/item_background.png") bottom repeat-x; /*--- Black background to image ---*/
			border: 1px solid #003300; /*--- Black edge to image ---*/
			
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			-moz-box-shadow: #baaa89 0 0 10px;
			-webkit-box-shadow: #baaa89 0 0 10px;
			box-shadow: #baaa89 0 0 10px;
		}
		
		#gallery figure a.inner:hover {
				-moz-box-shadow: cornflowerblue 0 0 35px; /*--- on hover light green halo effect ---*/
				-webkit-box-shadow: cornflowerblue 0 0 35px; /*--- on hover light green halo effect ---*/
				box-shadow: cornflowerblue 0 0 35px; /*--- on hover light green halo effect ---*/
			}
		
		#gallery figure img {
			display: block;
			width: 100%;
		}

/*----------------------------------------
------------FOOTER-----------------------
----------------------------------------*/
footer {
	float: none;
	clear: both;
	overflow: auto;
	padding: 0 0 354px 0;
	background: #000066; /*--- footer background colour ---*/
	color: #FFF; /*--- footer font colour ---*/
}
	footer a:hover, footer a:active {
		color: #FFF; /*--- Links footer font colour ---*/
	}

	footer div {
		margin: 0 auto;
		width: 95%;
	}

		footer h2 {
			text-transform: uppercase;
			color: #FFF; /*--- H2 footer font colour ---*/
		}

		footer a {
			font-weight: bold;
			text-decoration: none;
			line-height: 2.5;
		}

		footer #more-links , footer #contact {
			margin: 0 1%;
			width: 47%;
		}

		footer #more-links {
			float: left;
		}
		footer #more-links .links a{
				text-decoration: none;
				color: #FFF;
			}
		footer #more-links .links a:hover {
					color: #FFF;
				}
		footer #contact {
			float: right;
		}
		
			footer #sucontact bmit hgroup h2, footer #contact hgroup h3Â {
				float: left;
			}
			
			footer #contact hgroup h2 {
				display: block;
				clear: both;
				float: none; /* PROBLEM: NOT FLOATING PROPERLY IN FF */
				margin-right: 10px;
			}
			
			footer #contact hgroup h3 {
				display: none; /* PROBLEM: NOT FLOATING PROPERLY IN FF */
				font-weight: bold;
				font-size: 14px;
				line-height: 54px;
				color: #FFF;
			}

/*----------------------------------------
--------RESPONSIVE STYLING----------------
----------------------------------------*/
@media screen and (min-width: 1150px) { /* Columns increased to 5 - large computer screen*/
	
	#gallery figure {
		width: 17%;
		margin-left: 0.75%;
		margin-right: 0.75%;
	}
}
@media screen and (max-width: 935px) { /* Columns decreased to 3 - ipad portrait*/
	
	#gallery figure {
		width: 31.3333%;
		margin-left: 1%;
		margin-right: 1%;
	}
}
@media screen and (max-width: 750px) { /* Columns decreased to 2 - iphone portrait */
	#gallery figure {
		margin: 2%;
		width: 46%;
	}
	.mainHeader h1 { 
	font-size: 1em; /* for iPhone decreases the title font size to size 14 (14 divided by 14) so it fits the screen */
	}
.mainHeader nav {
	padding: 0px 0px; 
}
footer #more-links , footer #contact {
	margin: 4% 15%;
	width: 70%;
}
}