#page-title {
	margin-top: 20px;
}

/******************************************************************************/

#product-viewport {
	position: relative;
	height: 315px;
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 5px;
	padding-left: 9px;
	padding-right: 9px;
}

#product-viewport-description {
	position: absolute;
	width: 100%;
	bottom: 5px;
	margin: 0 auto;
	text-align: center;
	font-weight: 300;
	font-size: 1.4em;
}

#product-viewport .product-preview {
	min-width: 270px;
	max-width: 1080px;
}

#product-viewport .product-preview .image {
	padding-right: 50px;
}

#product-viewport .product-preview h3 {
	font-size: 1.6em;
	font-weight: 300;
	padding-bottom: 0.2em;
	text-align: center;
}

#product-viewport .product-preview p {
	font-size: 1.1em;
	font-weight: 300;
	padding-bottom: 1em;
}

/******************************************************************************/

.product-list-container {
	min-width: 270px;
	margin: 0 auto;
	text-align: center;
	padding: 0 auto;
}

ul.product-list {
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

li.product .product-container {
	position: relative;
	width: 100%;
	height: 100%;
}

li.product .label {
	position: absolute;
	bottom: 6px;
	width: 100%;
}

li.product .label h3 {
	font-size: 1.5em;
}

li.product .thumbnail img {
	margin-top: 6px;
}

li.product a {
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #dbdbbf;
}

li.product .price h4 {
	display: inline;
	font-size: 1.0em;
}

#product-count {
	margin: 0 right-floated-width 0 left-floated-width;
	padding: 10px 0 10px 0;
	text-align: center;
}

.product {
	width: 250px;
	height: 250px;
	float: left;
	margin-left: 9px;
	margin-right: 9px;
	margin-top: 9px;
	margin-bottom: 9px;
	border: 1px solid #353129;
	background-color: #403c33;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.product:hover {
	border: 1px solid #434037;
	background-color: #535047;
	cursor: pointer;
}

/* Special case -- most likely a mobile phone -- where we only display one
   product in each row */
@media only screen and (max-width: 559px) {

	.product-list-container {
		min-width: 250px;
		max-width: 250px;
	}

	.product {
		margin-left: 0;
		margin-right: 0;
	}
}

@media only screen and (min-width: 560px) and (max-width: 809px) {

	.product-list-container {
		max-width: 540px;
	}

	#product-viewport {
		max-width: 540px;
	}
}

@media only screen and (min-width: 810px) and (max-width: 1079px) {

	.product-list-container {
		max-width: 810px;
		overflow: hidden;
	}

	#product-viewport {
		max-width: 810px;
	}
}

@media only screen and (min-width: 1080px) {

	.product-list-container {
		max-width: 1080px;
		overflow: hidden;
	}

	#product-viewport {
		max-width: 1080px;
	}
}