/* 
 * Storefronts 
 */
div#storefront-top {
	border: 3px solid #c8c3b0;
	margin: 0.25em;
	margin-bottom: 1em;
	position: relative;
	clear: both;
}

div#storefront-top td {
	padding: 0.5em;
}

div#storefront-top form {
	/* Browsers like to automatically give giant margins. */
	margin: -1px;
}

div#storefront-top td.label {
	text-align: right;
}

div#store-back-to-front {
	text-align: left;
}

.storefrontAllLink {
	font-size: 150%;
	text-align: center;
	margin-bottom: 20px;
}

.storefrontThumbnail img, #featuredProductThumbnail img {
	max-width: 100px;
	height: auto;
	margin: 10px;
	margin-top: 5px;
	border: 1px solid #ada999;
	box-shadow: 4px 4px 10px #777;
	-moz-box-shadow: 4px 4px 10px #777;
}

@media all and ( max-width: 480px )
{
	#storefront-top tr, #storefront-top#storefront-top td
	{
		display: block;
		text-align: left;
	}

	.storefrontThumbnail.storefrontThumbnail img, #featuredProductThumbnail img
	{
		max-width: 85px;
		box-shadow: none;
		margin: 0;
	}
	.storefrontDescription.storefrontDescription
	{
		margin-top: 0px;
		max-height: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
@media all and ( max-width: 320px )
{
	/* Wrap text block elements under the image. */
	table.storefrontTable tr, table.storefrontTable td
	{
		display: block;
	}
	table.storefrontTable td:first-child
	{
		float: left;
	}
	table.storefrontTable thead
	{
		display: none;
	}
}

#featuredProductThumbnail {
	float: right;
	margin-left: 15px;
}

#featuredProductThumbnail img {
	width: 150px;
}

.storefrontThumbnail img.generic {
	border: none;
	box-shadow: none;
	-moz-box-shadow: none;
}

/* The box around the tiny icons
   or MP3 preview buttons. */
div.storefrontThumbnail .container {
	height: 150px;
	float: right;
	text-align: center;
	position: relative;

	/* For IE 7 */
	margin-left: 0;
}

div.storefrontThumbnail .mp3button {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 20px;
	margin-top: -10px;
	width: 40px;
	margin-left: -20px;	
}

.storefrontTitle {
	font-size: 120%;
	font-weight: bold;
}

.storefrontDescription {
	margin-top: 2em;
}

.storefrontPrice {
	color: #98023E;
}

.instrumentation, .parentProductLink {
	font-size: 120%;
	color: #98023E;
	margin-bottom: 0.5em;
}

/*
 * Product boxes on storefronts
 */

div#hymnary-products table.views-view-grid td {
	border: 1px solid #c8c3b0;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.view-Product-Grid .views-field-title {
	font-size: 110%;
}

.view-Product-Grid .views-field-teaser {
	margin-bottom: 1em;
}

.view-Product-Grid .views-field-tid {
	margin-bottom: 1em;
}

/* Category tags */
.view-Product-Grid .views-field-tid a, .categoryTag {
	font-size: 80%;
	border: 1px solid #C8C3B0;
	white-space: nowrap;
	padding: 3px;
	color: #0A3F64;
	background-color: white;

	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.categoryTag img {
	vertical-align: middle;
	margin: 2px;
}

/*Labels for products shown below a hymnal instance.*/
div.productLabel {
	text-align: center;
	color: #49121F;
	font-style: italic;
}

.view-Product-Grid .views-field-sell-price {
	color: #98023E;
	font-weight: bold;
}

/*
 * Product node styling.
 */

/* Display as divs for small screens, table cells for large screens */
.similar-products > div.csstable > span.csstr > div
{
	vertical-align: top;
	padding: .3em .5em;
}
div.field-field-product-previews table tbody tr td,
div.field-field-hope-audio table tbody tr td
{
	display: inline;
}
@media all and ( min-width: 1201px )
{
	.similar-products > div > span.csstr > div,
	div.field-field-product-previews table tbody tr td,
	div.field-field-hope-audio table tbody tr td
	{
		display: table-cell;
	}
}
@media all and ( min-width: 321px ) and ( max-width: 480px )
{
	.similar-products > div > span.csstr > div,
	div.field-field-product-previews table tbody tr td
	{
		display: table-cell;
	}
	div.product-sidebar div.field-field-authors,
	div.product-sidebar div.field-field-composers,
	div.product-sidebar div.field-field-arrangers
	{
		display: inline-block;
		width: 30%;
		width: calc( 33% - 8px );
	}
}

/* Fields to float on the right. */
div.product-sidebar > div,
div.related-hymns {
	border: 1px solid #ada999;
	margin: 0.4em;
	padding: 0.4em;
}
.similar-products > div.csstable, .related-hymns table {
	margin: 0;
}
div.related-hymns
{
	clear: left;
	width: 65%;
	width: calc(70% - 1.6em - 4px)
}
div.field-name-field-alternate-format div.field-item {
	padding: 0.5em;
}
div.field-name-field-alternate-format img {
	vertical-align: middle;
}
div.field-name-field-alternate-format h6 {
	font-weight: bold;
	color: #49121F;
	display: inline;
	margin: 0.25em 0.5em;
}

div.field-name-field-format div.field-item {
	padding: 0.5em;
}
div.field-name-field-format img {
	vertical-align: middle;
}
div.field-name-field-format h6 {
	font-weight: bold;
	color: #49121F;
	display: inline;
	margin: 0.25em 0.5em;
}
/* Things inside the field blocks.
   Make them look like a table. */

.fields-like-table div.field-item {
    padding: 0.1em 0.75em;
    border-color: #C9C4B1;
    border-style: solid;
    border-width: 0 0 1px 0;
}

.fields-like-table div.field-item.odd {
	background-color: #F0EDD3;
}

.fields-like-table div.field-item.even {
	background-color: #FFFFFF;
}

.fields-like-table .field .field-label,
.fields-like-table div.categories-label {
	font-weight: bold;
	background-color: #C8C3B0;
    border-bottom: 2px solid #ADA999;
    padding: 0.1em 0.75em;
}

.node-add-to-cart {
	font-size: 150%;
}

.product-preview {
	margin: 0em 1em 2em 1em;
	width: 65%;
}

div.field-priceButton {
	border: none;
	text-align: right;
}

div.field-priceButton form {
	padding: 5px;
	margin: -1px !important;
}

div.field-priceButton input {
	margin: -1px;
}

span.uc-price-display {
	float: none;
    color: #98023E;
	font-size: 170%;
	margin: 0.4em;
	margin-right: 3px;
}

/* The same as uc-price-display, but on product pages. */
.product-price {
    color: #98023E;
	font-size: 150%;
	font-weight: bold;
}

td.scorch-add-to-cart div.add-to-cart form {
	margin: -1px !important;
}

#bottom-priceButton {
	border: 1px solid #ada999;
	padding: 5px;
	width: 150px;
	text-align: center;
	clear: left;
}

#bottom-priceButton form {
	margin-bottom: -1px !important;
}

#bottom-priceButton form input {
	margin: -1px !important;
}

#scorchFrame {
	position: relative;
	margin: 1em auto;
	background: white;
	border: 1px solid #C8C3B0;
	box-shadow: 4px 4px 8px #33322D;
	-moz-box-shadow: 4px 4px 8px #33322D;
}
#scorchFrame, #scorchPlugin, #scorchPlugin embed {
	width: 720px;
	height: 780px;
}
#scorchMissing {
	text-align: center;
	margin: 0 30%;
	position: absolute;
	top: 5em;
}
#scorchMissing a {
	font-style: italic;
}

div#productTypeMessage {
	margin-right: 3px;
}

div.product-sidebar
{
	width: 30%;
	float: right;
}

div.product-image {
	clear: left;
	float: left;
	margin: 0em 1em 1em 0em;
	max-width: 45%;
}

div.product-image img {
	width: 100%;
	height: auto;
}


/* For product kits, the included products list. */
div.product-collection-list {
	clear: left;
}

/*
 * Product Preview box
 */
td.file-icon {
	text-align: center;
	width: 75px;
}

.productPreviewThumbnail img {
	border: none;
	max-width: 75px;
	height: auto;
	box-shadow: 4px 4px 10px #777;
	-moz-box-shadow: 4px 4px 10px #777;
}
.productPreviewThumbnail img.generic {
	box-shadow: none;
	-moz-box-shadow: none;
}

/*
 * Product pictures in global search results
 */
.searchPreview img {
	border: 1px solid #ada999;
	width: 90px;
	height: auto;
	box-shadow: 4px 4px 10px #777;
	-moz-box-shadow: 4px 4px 10px #777;
}

.searchPreview img.generic {
	border: none;
	box-shadow: none;
	-moz-box-shadow: none;
}

/*
 * Storefront search
 */
.storeLabel {
	text-align: right;
}

#storefrontSearch {
	display: inline;
	float: right;
	width: 30em;
	margin: 0;
}

#storefrontSearch td {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

.product-header {
	background: #C8C3B0;
	border: none;
	margin: 0;
	padding: 0;
}
.product-header td {
	vertical-align: top;
	padding: 0.5em;
}
.product-header p {
	padding: 0;
	margin: 0.25em;
}
.product-header .product-cart-stuff {
	text-align: right;
}
.product-header .product-type-icon {
	text-align: center;
	vertical-align: middle;
	padding: 0.5em 0.5em 0.5em 1em;
	width: 50px;
	min-width: 50px;
}
.product-header .product-type-icon img {
	cursor: help;
	padding: 2px;
	border-bottom: 1px dotted #C8C3B0;
}
.product-header .product-type-icon img:hover {
	border-bottom: 1px dotted black;
}
.product-header .product-type-name {
	padding: 4px; /* Padding added so that product type is aligned with product name */
	font-size: 120%;
	font-weight: bold;
	color: #49121f;
}
.product-header .product-quantity {
	width: 3em;
}
.product-header p {
	color: #0a3f64;
}
#center .product-header form {
	margin: 0.5em 0em;
	padding: 0;
}
#center #scorch-print-copies-form {
	margin: 0;
}
#hymnary-ecommerce-add-to-cart-form .form-item, #hymnary-ecommerce-add-to-cart-form label {
	display: inline;
}

#globalCategories {
	line-height: 300%;
}

#globalStorefrontBrowse
{
	display: table;
}
#globalStorefrontBrowse > div
{
	display: table-cell;
	padding: 1em 1em 0em;
}

#globalStorefrontBrowse > div:first-child
{
	text-align: right;
}

@media all and ( max-width: 480px )
{
	#globalStorefrontBrowse#globalStorefrontBrowse > div
	{
		display: block;
		text-align: left;
	}
}

ul.nobullets li {
	background: none;
	margin-left: 0;
	padding-left: 0;
}

/*
 * IE8 Bug Fix for storefront tables.
 * 
 * IE8 will render table cells with an element with the max-width
 *  attribute set at the width of the largest element, even though
 *  it is scaled down to the max-width.
 *
 * CSS magic from http://brenelz.com/blog/fix-table-cell-and-max-width-bug-in-ie8/
 */

table.storefrontTable {
	table-layout: fixed;
	width: 100%;
}

#hymnary-ecommerce-print-scores-form div.form-item {
	display: inline;
}

#product-types td { vertical-align: top; }
#product-types h3 { color: #49121f; }

.scripture_product {
	margin-top: 1em;
	margin-bottom: 2em;
	font-weight: bold;
}

.scripture_product img {
	box-shadow: 3px 3px 4px #333;
}

#hymnary-ecommerce-add-to-cart-form #edit-add-to-cart,
#cart-form-products .form-submit,
#cart-form-buttons #edit-update,
#cart-form-buttons #edit-checkout,
#checkout-form-bottom #edit-continue,
#checkout-form-bottom #edit-cancel,
.order-review-table #edit-back,
.order-review-table #edit-submit {
	font-size: 1.3em;
	font-weight: bold;
	background: #027AC6;
	color: white;
	padding: 0.5em;
	border: 3px solid #E9E6CD;
	border-radius: 6px;
	cursor: pointer;
}
#hymnary-ecommerce-add-to-cart-form #edit-add-to-cart {
	font-size: 1.2em;
}
#cart-form-products .form-submit {
	background: silver;
	border: none;
	font-size: 1em;
}
#cart-form-buttons #edit-update,
#checkout-form-bottom #edit-cancel,
.order-review-table #edit-back {
	background: silver;
}
.order-review-table #edit-back,
.order-review-table #edit-submit {
	border: none;
	margin: 0.5em;
}
#hymnary-ecommerce-add-to-cart-form #edit-add-to-cart:hover,
#cart-form-products .form-submit:hover,
#cart-form-buttons #edit-update:hover,
#cart-form-buttons #edit-checkout:hover,
#checkout-form-bottom #edit-continue:hover,
#checkout-form-bottom #edit-cancel:hover,
.order-review-table #edit-back:hover,
.order-review-table #edit-submit:hover {
	text-decoration: underline;
}
#hymnary-ecommerce-add-to-cart-form #edit-quantity {
	font-size: 1.5em;
	text-align: right;
	font-weight: bold;
	color: #027AC6;
	border: 3px solid #E9E6CD;
	padding: 0.1em 0.25em;
	vertical-align: bottom;
}

.product-body dl {
	float: left;
	max-width: 40%;
	margin: 0 0.5em 1em 0.5em;
	border: 1px solid #ada999;
	padding: 1em;
	background: #f0edd3;
}
.product-body dt {
	font-weight: bold;
	clear: left;
	float: left;
	margin: 0;
}
.product-body dd {
	float: left;
	margin: 0;
	padding-left: 0.75em;
}

/**
 * Hide the PayPal radio button since it's the only option anyway.
 */
div.form-item-panes-payment-payment-method input {
	display: none !important;
}

.review-order-important {
	color: darkred !important;
}

@media all and ( min-width: 481px )
{
	.product-content
	{
		width: 70%;
		float: left;
	}
}
@media all and ( max-width: 480px )
{
	div.product-sidebar, div.related-hymns
	{
		width: 100%;
		clear: left;
		float: none;
		margin: 0;
	}
	div.product-sidebar > div, div.related-hymns
	{
		margin: 1px;
		padding: 1px;
	}
}
@media all and ( max-width: 220px )
{
	div.product-image
	{
		max-width: 100%;
	}
}