/*----------------------------------------
-------------BASIC SETUP------------------
----------------------------------------*/
header, footer, aside, section, article, hgroup {
	display: block;
}
body {
	background: #100250; /*--- navy blue background ---*/	
	color: #000305; /* 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: #add8e6; /*--- light blue ---*/
}
a:hover, a:active {
		color: #add8e6;  /*--- 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.1;
	margin-bottom: .8em;
}
/*----------------------------------------
----------------HEADER--------------------
----------------------------------------*/
header {
	float: none;
	position: relative;
	overflow: auto;
	background: #100250; /*--- Header background colour ---*/
}

	.gallery header div {
		margin: 0 auto;
		width: 95%;
	}
	
	header h1 {
		float: left; /*--- Send Header h1 text left ---*/
		font: bold 36px/54px "proxima-nova-extra-condensed-1", "proxima-nova-extra-condensed-2", Helvetica, Arial, sans-serif;
		text-transform: uppercase;

		color: #FFF;
	}
	
	header h2 {
		float: right; /*--- Send Header h2 text right ---*/
		color: #FFF;
	}
/*----------------------------------------
--------Main Content section-------------
----------------------------------------*/
#gallery {
	margin: 0 auto;
	padding: 5px 0;
	width: 95%;
}
	#gallery figure {
		position: relative;
		float: left;
		margin: 10px 1%;
		width: 23%;
		_width: 22.5%;
	}

	#gallery figure a.inner {
			display: block;
			padding: 1px;
			text-decoration: none;
			background: #100250 url("../images/item_background.png") bottom repeat-x;
			border: 1px solid #100250;
			
			-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: #fff 0 0 35px; /*--- on hover white halo effect ---*/
				-webkit-box-shadow: #fff 0 0 35px; /*--- on hover white halo effect ---*/
				box-shadow: #fff 0 0 35px; /*--- on hover white halo effect ---*/
			}
		
		#gallery figure img {
			display: block;
			width: 100%;
		}

		#gallery figure .details {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 30px 0 20px 0;
			color: #3b362c;
			background: rgb(239, 234, 223);
			background: rgba(239, 234, 223, 0.8);
			
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
		}
	
			#gallery figure .details h1 {
				margin: 0;
				text-align: left;
				padding: 0 15px 8px 30px;
				font: bold 20px/24px "proxima-nova-condensed-1", "proxima-nova-condensed-2", Helvetica, Arial, sans-serif;
				color: #000;
				
				-moz-text-shadow: none;
				-webkit-text-shadow: none;
				text-shadow: none;
			}
			
			#gallery figure .details dl {
				padding: 0 15px 0 30px;
			}
			
				#gallery figure .details dl dt {
					margin-bottom: 5px;
					float: left;
					width: 35%;
					font-weight: bold;
				}
				
				#gallery figure .details dl dd {
					margin-bottom: 5px;
					float: left;
					width: 65%;
				}
/*----------------------------------------
------------FOOTER-----------------------
----------------------------------------*/
#footer-shadow {
	height: 36px;
	background: url("../images/footer_shadow.png") repeat-x;
}

footer {
	float: none;
	clear: both;
	overflow: auto;
	padding: 0 0 54px 0;
	background: #100250; /*--- footer background colour ---*/
	color: #fff; /*--- footer font colour ---*/
}
	footer a:hover, footer a:active {
		color: #FFF;
	}

	footer div {
		margin: 0 auto;
		width: 95%;
	}

		footer h2 {
			text-transform: uppercase;
			color: #FFF;
		}

		footer a {
			font-weight: bold;
			text-decoration: none;
		}

		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: 18.5%;
		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%;
	}
}