@import url("reset.css");

/*----------------------------------------
=BASIC SETUP
----------------------------------------*/
header, footer, aside, section, article, hgroup {
	display: block;
}

body {
	background: #e5ddcd url("../images/background.png") 0 90px repeat-x;
	font: 12px/18px Helvetica, Arial, sans-serif;
}

p {
	margin-bottom: 18px;
}

a {
	color: #e46f2e;
}

	a:hover, a:active {
		color: #ea2c00;
	}

.clear {
	clear: both;
	height: 0;
	font-size: 0;
	overflow: hidden;
}

/*----------------------------------------
=HEADER
----------------------------------------*/
header {
	float: none;
	position: relative;
	overflow: auto;
	background: #3b362c url("../images/header_background.png") bottom repeat-x;
}

	.gallery header div {
		margin: 0 auto;
		width: 95%;
	}
	
	header h1 a {
		float: left;
		width: 196px;
		height: 90px;
		margin-left: 1%;
		font: bold 48px/90px "proxima-nova-extra-condensed-1", "proxima-nova-extra-condensed-2", Helvetica, Arial, sans-serif;
		text-transform: uppercase;
		color: #FFF;
		text-indent: -9999px;
		background: url("../images/logo.png") no-repeat;
	}
	
	header nav {
		float: right;
	}
	
		header nav ul li {
			float: left;
		}
	
			header nav ul li a {
				display: block;
				padding: 0 25px;
				text-decoration: none;
				font: bold 14px/90px Helvetica, Arial, sans-serif;
				color: #cbb384;
			}
			
				header nav ul li a:hover {
					color: #e46f2e;
				}
			
			.gallery header nav ul li.gallery a, .about header nav ul li.about a {
				color: #FFF;
			}
			
				header nav ul li#selected a:hover {
					color: #FFF;
				}
				
			header nav ul li#rss, header nav ul li#twitter, header nav ul li#facebook {
				margin-left: 10px;
			}
			
				header nav ul li#rss a {
					padding: 0 0 0 15px;
					width: 22px;
					background: url("../images/icon_rss_small.png") 100% 50% no-repeat;
					text-indent: -9999px;
				}
				
				header nav ul li#twitter a {
					padding: 0;
					width: 22px;
					background: url("../images/icon_twitter_small.png") 0 50% no-repeat;
					text-indent: -9999px;
				}
				
				header nav ul li#facebook a {
					padding: 0 15px 0 0;
					width: 22px;
					background: url("../images/icon_facebook_small.png") 0 50% no-repeat;
					text-indent: -9999px;
				}

/*----------------------------------------
=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: #3b362c url("../images/header_background.png") bottom repeat-x;
	color: #cbb384;
	font-size: 14px;
}

	footer a:hover, footer a:active {
		color: #FFF;
	}

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

		footer h2 {
			font: bold 36px/54px "proxima-nova-extra-condensed-1", "proxima-nova-extra-condensed-2", Helvetica, Arial, sans-serif;
			text-transform: uppercase;
			color: #FFF;
		}

		footer a {
			font-weight: bold;
		}

		footer #about, footer #submit {
			margin: 0 1%;
			width: 47%;
		}

		footer #about {
			float: left;
		}

			footer #about ul li {
				float: left;
			}

			footer #about .rss a, footer #about .twitter a, footer #about .facebook a {
				display: block;
				margin-bottom: 10px;
				padding-left: 40px;
				font-size: 12px;
				line-height: 32px;
				text-decoration: none;
				color: #FFF;
			}

				footer #about .rss a:hover, footer #about .twitter a:hover, footer #about .facebook a:hover {
					color: #e46f2e;
				}

			footer #about .rss a {
				padding-right: 25px;
				background: url("../images/icon_rss_large.png") no-repeat;
			}

			footer #about .twitter a {
				padding-right: 25px;
				background: url("../images/icon_twitter_large.png") no-repeat;
			}
			
			footer #about .facebook a {
				background: url("../images/icon_facebook_large.png") no-repeat;
			}

		footer #submit {
			float: right;
		}
		
			footer #submit hgroup h2, footer #submit hgroup h3 {
				float: left;
			}
			
			footer #submit hgroup h2 {
				display: block;
				clear: both;
				float: none; /* PROBLEM: NOT FLOATING PROPERLY IN FF */
				margin-right: 10px;
			}
			
			footer #submit hgroup h3 {
				display: none; /* PROBLEM: NOT FLOATING PROPERLY IN FF */
				font-weight: bold;
				font-size: 14px;
				line-height: 54px;
				color: #FFF;
			}

/*----------------------------------------
=GALLERY
----------------------------------------*/
#gallery {
	margin: 0 auto;
	padding: 18px 0;
	width: 95%;
}

	#gallery h1 {
		margin-bottom: -36px;
		text-align: center;
		font: bold 14px/27px Helvetica, Arial, sans-serif;
		
		-moz-text-shadow: #FFF 0 1px 0;
		-webkit-text-shadow: #FFF 0 1px 0;
		text-shadow: #FFF 0 1px 0;
	}
	
	#gallery h1.no-pagination {
		margin: 0;
	}

	#gallery .pagination-top {
		width: 100%;
		height: 36px;
		overflow: auto;
	}
	
	#gallery .pagination-bottom {
		width: 100%;
		height: 36px;
		overflow: auto;
	}
	
		#gallery .pagination-top ul {
			padding-bottom: 8px;
			width: 100%;
			height: 27px;
		}
		
		#gallery .pagination-bottom ul {
			padding-top: 8px;
			width: 100%;
			height: 27px;
		}

			#gallery .pagination-top .newer, #gallery .pagination-bottom .newer {
				float: left;
				margin-left: 1%;
			}
	
			#gallery .pagination-top .older, #gallery .pagination-bottom .older {
				float: right;
				margin-right: 1%;
			}
		
				#gallery .pagination-top a, #gallery .pagination-bottom a {
					display: block;
					padding: 0 10px;
					font: 12px/25px Helvetica, Arial, sans-serif;
					text-decoration: none;
					background: #efeadf;
					color: #000;
					border: 1px solid #FFF;
				
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					border-radius: 5px;
					-moz-text-shadow: #FFF 0 1px 0;
					-webkit-text-shadow: #FFF 0 1px 0;
					text-shadow: #FFF 0 1px 0;
				}
			
					#gallery .pagination-top a:hover, #gallery .pagination-bottom a:hover {
						font-weight: bold;
					}

	#gallery article {
		position: relative;
		float: left;
		margin: 10px 1%;
		width: 23%;
		_width: 22.5%;
	}

		#gallery article a.inner {
			display: block;
			padding: 13px;
			text-decoration: none;
			background: #efeadf url("../images/item_background.png") bottom repeat-x;
			border: 1px solid #FFF;
			
			-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 article a.inner:hover {
				-moz-box-shadow: #7d6d4d 0 0 35px;
				-webkit-box-shadow: #7d6d4d 0 0 35px;
				box-shadow: #7d6d4d 0 0 35px;
			}
		
		#gallery article img {
			display: block;
			width: 100%;
		}

		#gallery article .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 article .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 article .details dl {
				padding: 0 15px 0 30px;
			}
			
				#gallery article .details dl dt {
					margin-bottom: 5px;
					float: left;
					width: 35%;
					font-weight: bold;
				}
				
				#gallery article .details dl dd {
					margin-bottom: 5px;
					float: left;
					width: 65%;
				}

/*----------------------------------------
=DETAILS GALLERY
----------------------------------------*/

.details .image-wrapper {
	float: left;
	margin: 0 0 18px 18px;
	display: block;
	padding: 13px;
	background: #efeadf url("../images/item_background.png") bottom repeat-x;
	border: 1px solid #FFF;
	
	-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;
}

	.details .image-wrapper img {
		width: 425px;
		height: 566px;
		display: block;
	}

.details #info {
	float: right;
	margin: 0 18px 0 0;
	width: 453px;
}

	.details #info h1 {
		margin: 18px 0;
		font: bold 48px/54px "proxima-nova-condensed-1", "proxima-nova-condensed-2", Helvetica, Arial, sans-serif;
		color: #000;
	}
	
	.details #info dl {
		width: 453px;
		overflow: auto;
	}

		.details #info dl dt {
			margin-right: 18px;
			margin-bottom: 5px;
			float: left;
			width: 139px;
			font-weight: bold;
		}
		
		.details #info dl dd {
			margin-bottom: 5px;
			float: left;
			width: 296px;
		}
		
	.details #info a.readmore {
		display: block;
		margin: 18px 0 0 0;
		padding: 0 16px;
		width: 200px;
		font-weight: bold;
		text-decoration: none;
		line-height: 32px;
		background: url("../images/details_readmore.png") no-repeat;
		color: #762600;
		
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: #baaa89 0 0 5px;
		-webkit-box-shadow: #baaa89 0 0 5px;
		box-shadow: #baaa89 0 0 5px;
	}
	
		.details #info a.readmore:hover {
			background-position: 0 -32px;
		}
		
		.details #info a.readmore:active {
			background-position: 0 -64px;
		}

.details .related h2 {
	margin-left: 18px;
	font: bold 24px/48px "proxima-nova-condensed-1", "proxima-nova-condensed-2", Helvetica, Arial, sans-serif;
	color: #000;
}

.details .related article {
	float: left;
}

	.details .related article h3 {
		display: none;
	}

	.details .related article a {
		margin: 0 0 18px 18px;
		display: block;
		padding: 13px;
		background: #efeadf url("../images/item_background.png") bottom repeat-x;
		border: 1px solid #FFF;

		-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;
	}
	
		.details .related article a:hover {
			-moz-box-shadow: #7d6d4d 0 0 35px;
			-webkit-box-shadow: #7d6d4d 0 0 35px;
			box-shadow: #7d6d4d 0 0 35px;
		}
	
		.details .related article a img {
			display: block;
			width: 111px;
			height: 148px;
		}

/*----------------------------------------
=STATIC PAGES
----------------------------------------*/
#page, #details {
	margin: 0 auto;
	overflow: auto;
	padding: 18px 16px;
	width: 960px;
	color: #3b362c;
}

	#page h1 {
		font: bold 36px/56px "proxima-nova-condensed-1", "proxima-nova-condensed-2", Helvetica, Arial, sans-serif;
	}

.page header div, .details header div {
	margin: 0 auto;
	width: 960px;
}

.page header h1 a, .details header h1 a {
	margin-left: 18px;
}

.page footer div, .details footer div {
	margin: 0 auto;
	width: 960px;
}

.page footer #about, .details footer #about { /* PROBLEM: NOT ALIGNING TO GRID, BREAKS LAYOUT IN FF WHEN MARGIN-LEFT ADDED */
	margin: 0 0 0 18px;
	padding: 0;
	width: 453px
}

.page footer #submit, .details footer #submit { /* PROBLEM: NOT ALIGNING TO GRID, BREAKS LAYOUT IN FF WHEN MARGIN-RIGHT ADDED */
	margin: 0 18px 0 0;
	padding: 0;
	width: 453px;
}

/*----------------------------------------
=ABOUT PAGE
----------------------------------------*/
body.about {
	background-position: 0 252px;
}

.about section header {
	background: url("../images/about_gradient.png") repeat-x;
	height: 162px;
}

	.about section header hgroup {
		margin: 0 auto;
		padding: 27px 0 0 0;
		width: 960px;
		text-align: center;
		color: #000;
		
		-moz-text-shadow: #eea585 0 1px 0;
		-webkit-text-shadow: #eea585 0 1px 0;
		text-shadow: #eea585 0 1px 0;
	}

		.about section header h1 {
			font: bold 54px/72px "proxima-nova-condensed-1", "proxima-nova-condensed-2", Helvetica, Arial, sans-serif;
		}

		.about section header h2 {
			font: bold 32px/36px "proxima-nova-condensed-1", "proxima-nova-condensed-2", Helvetica, Arial, sans-serif;
		}

.about #page {
	padding: 36px 0 18px 0;
	font-size: 14px;
	line-height: 22px;
}

	.about #page #mainContent {
		float: left;
		padding-left: 18px;
		width: 610px;
	}

		.about #page #mainContent h3 {
			font: bold 14px/27px Helvetica, Arial, sans-serif;
			color: #000;
		
			-moz-text-shadow: #FFF 0 1px 0;
			-webkit-text-shadow: #FFF 0 1px 0;
			text-shadow: #FFF 0 1px 0;
		}

	.about #page #sidebar {
		float: right;
		padding-right: 18px;
		width: 296px;
	}

/*----------------------------------------
=RESPONSIVE STYLING
----------------------------------------*/
@media screen and (min-width: 1150px) { /* Columns increased to 5 */
	
	#gallery article {
		width: 18.5%;
		margin-left: 0.75%;
		margin-right: 0.75%;
	}
	
}

@media screen and (max-width: 935px) { /* Columns decreased to 3 */
	
	#gallery article {
		width: 31.3333%;
		margin-left: 1%;
		margin-right: 1%;
	}
	
}

@media screen and (max-width: 750px) { /* Columns decreased to 2 */

	#gallery article {
		margin: 2%;
		width: 46%;
	}
	
		#gallery article a.inner {
			padding-top: 20px;
			padding-bottom: 20px;
		}
		
}