/*  CSS Document  */

body {
	margin: 0px;
	padding: 20px 10px 20px 30px;
	font: 14px Arial;
	color: #bd8a1e;
	background-color: #000;
}
p { margin: 0px 0px 1em 0px; }
a, a:visited { color: #00f; }
img.background { position: fixed; right: 0px; bottom: 0px; }

.title {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 70px;
	height: 100%;
	background: url(../images/title_large.png) no-repeat 0px 5px;	
}

.gallery { width: 80%; margin: 0px auto; position: relative; }

.gallery .sorting { margin: 0px 0px 15px 0px; border: 1px solid #6d4d2e; background-color: rgba(109,77,46,.3); }
.gallery .sorting span { padding: 0px 20px 0px 0px; color: #6d4d2e; font-style: italic; }
.gallery .sorting div { margin: 10px 0px 10px 10px; }
.gallery .sorting a {
	color: #fff;
	font-size: .85em;
	text-decoration: none;
	text-transform: uppercase;
	padding: 3px 20px 3px 20px;
	background: url(../images/check_normal.gif) no-repeat 0px 3px;
}
.gallery .sorting a:hover { color: #e5aa2c; }
.gallery .sorting a.selected { color: #e5aa2c; background-image: url(../images/check_selected.gif); }

.gallery .photos .thumbnail_container { position: relative; }
.gallery .photos .thumbnail_container a.thumbnail { position: absolute; }
.gallery .photos .thumbnail_container a.thumbnail img { width: 75px; height: 75px; border: 1px solid #6d4d2e; }

.clear_both { clear: both; line-height: 1px; }






/* Vertical */
@media screen and (min-height:50px) and (max-height:520px) { 
	.title{ background-image: url(../images/title_small.png); }

}
@media screen and (min-height:521px) and (max-height:700px) { 
	.title{ background-image: url(../images/title_medium.png); }

}
@media screen and (min-height:701px) and { 
	.title{ background-image: url(../images/title_large.png); }

}

/* Horizontal */
@media screen and (min-width:50px) and (max-width:500px) {
	.title{ background-image: url(../images/title_small.png); }
	body { padding: 5px 0px 0px 5px; }
	.gallery { width: auto; margin-left: 35px; }
	.gallery .sorting span { display: block; color: #e5aa2c; padding: 0px 0px 20px 0px; }
	.gallery .sorting a { display:block; }

}
@media screen and (min-width:501px) and (max-width:960px) { 
	.title{ background-image: url(../images/title_medium.png); }
	.gallery .sorting span { display: block; padding: 0px 0px 20px 0px; }
	.gallery .sorting a { display: block; width: 35%; float: left; margin-bottom: 5px; }

}
@media screen and (min-width:961px) and {
	.title{ background-image: url(../images/title_large.png); } 
	.gallery .sorting span { padding: 0px 20px 0px 0px; }


}