/* Styles for all display widths. ------------------------------------------ */

div.your-account-site-admin
{
	margin:						15px 0 0 10px;
}

div.your-account-site-admin a
{
	border-bottom:				1px solid #aaa;
}

div.your-account-site-admin-heading
{
	font-size:					16px;
	margin-bottom:				15px;
}

/* Banner padding a little different than for other pages as the banner isn't
 * contained within the 'page-content' element for 'your account' pages. */
div.page-banner
{
	padding-left:				10px;
	padding-top:				23px;
}

div.your-account-group-container
{
	border-left:				2px solid #eee;
	border-right:				2px solid #eee;
	margin:						0 0 15px 8px;
	padding:					8px;
}

div.your-account-error
{
	color:						#c03030;
}

div.your-account-error,
div.your-account-form-container,
div.your-account-para,
div.your-account-group-container div.mdlite-container
{
	margin-left:				8px;
	padding-bottom:				15px;
}

div.your-account-heading
{
	background-color:			#c9d9e5;
	color:						#243a54;
	font-size:					16px;
	margin:						0 0 6px 8px;
	padding:					6px 10px;
	vertical-align:				middle;
}

/* Thumbnail styling. */

a.your-account-thumbnail-cell
{
	border-bottom:				none;
}

div.your-account-thumbnail-cell
{
	border:						2px solid #eee;
	cursor:						pointer;
	display:					inline-block;
	margin:						0 0 12px 10px;
	text-align:					center;
	vertical-align:				top;

	/* No double-click text selection. */
	-webkit-user-select:		none; /* Webkit (Safari, Chrome) browsers. */
	-moz-user-select:			none; /* Mozilla browsers. */
	-khtml-user-select:			none; /* Webkit (Konqueror) browsers. */
	-ms-user-select:			none; /* IE10+. */
}

div.your-account-thumbnail-caption
{
	color:						#333;
	font-size:					13px;
}

.part-number
{
	font-family:				consolas, "Lucida Console", Monaco, monospace;
}

div.shopping-cart .part-number
{
	font-family:				Verdana, Trebuchet MS, Helvetica, Arial;

}

div.your-account-thumbnail-desc
{
	color:						#666;
	height:						122px;
	padding:					10px 10px 0 10px;
}

div.your-account-thumbnail-button
{
	padding-top:				10px;
}

/* Order detail. */

div.order-detail-values,
div.order-items
{
	display:					table;
	margin-bottom:				6px;
}

div.order-detail-values-row,
div.order-items-row
{
	display:					table-row;
}

div.order-detail-values-label,
div.order-detail-values-value,
div.order-items-heading,
div.order-items-value
{
	display:					table-cell;
	padding:					6px 12px;
}

div.order-detail-values-value,
div.order-items-numerical
{
	text-align:					right;
}

/* Styles for width >= 1279px. --------------------------------------------- */

div#page-content
{
	display:					table;
	padding:					8px 8px 20px 8px;
	width:						100%;
}

div.your-account-row
{
	display:					table-row;
}

div#your-account-nav,
div#your-account-body
{
	display:					table-cell;
	overflow:					hidden;
	vertical-align:				top;
}

div#your-account-nav
{
	max-width:					306px;
	width:						306px;
}

/* Nav sidebar. */

div.your-account-nav-links
{
	border-top:					2px solid #eee;
	margin-right:				6px;
}

div.your-account-nav-links a
{
	color:						#333;
}

div.your-account-nav-links a:focus,
div.your-account-nav-links a:hover
{
	border-bottom:				none;
}

div.your-account-nav-link
{
	border-bottom:				2px solid #eee;
	cursor:						pointer;
	padding:					12px;
}

div.your-account-nav-link:hover
{
	background-color:			#eee;
}

div.your-account-nav-link-current
{
	background-color:			#f9f9f9;
}

div#your-account-body
{
	padding-left:				8px;
}

/* Your Account page nav box. */

div.your-account-navbox
{
	display:					table;
}

div.your-account-navbox-row
{
	display:					table-row;
}

div.your-account-navbox-blank,
div.your-account-navbox-cell
{
	border-bottom:				32px solid white;
	border-left:				8px solid white;
	border-right:				8px solid white;
	display:					table-cell;
	font-size:					14px;
	max-width:					304px;
	text-align:					center;
	vertical-align:				middle;
	width:						304px;
}

img.your-account-icon,
video.your-account-icon
{
	/* When an image is 'display: inline' (the default), there a small gap
	 * underneath for character descenders, so 'block' used instead: */
	display:					block;
	width:						288px;
}

div.your-account-icon-heading
{
	height:						45px;
	padding:					13px 10px;
	white-space:				nowrap;
}

div.your-account-icon-description
{
	padding:					6px 10px;
	height:						65px;
	text-align:					left;
}

div.your-account-navbox a
{
	color:						#333;
}

div.your-account-navbox a.dummy
{
	cursor:						default;
}

div.your-account-navbox a:focus,
div.your-account-navbox a:hover
{
	border-bottom:				none;
}

div.your-account-login-form-container
{
	max-width:					500px;
}

div.your-account-form-container input[type="password"],
div.your-account-form-container input[type="text"]
{
	width:						500px;
}

div.your-account-form-container select
{
	max-width:					900px;
}

div.order-summary-table,
div.your-account-user-details
{
	display:					table;
	padding-bottom:				20px;
}

div.order-summary-table
{
	width:						800px;
}

div.order-summary-row,
div.your-account-user-details-row
{
	display:					table-row;
}

div.order-summary-cell,
div.your-account-user-details-label,
div.your-account-user-details-value
{
	display:					table-cell;
	padding:					6px 12px;
	vertical-align:				top;
}

div.order-summary-cell-highlight
{
	background-color:			#f9f9f9;
}

div.order-summary-cell-numeric
{
	text-align:					right;
}

/* Flex tables: Shopping cart. */

div.shopping-cart div.flex-td
{
	vertical-align:				middle;
}

div.shopping-cart .price,
div.shopping-cart .quantity
{
	text-align:					right;
}

div.shopping-cart .actions,
div.shopping-cart .part-number,
div.shopping-cart .price
{
	white-space:				nowrap;
}

div.shopping-cart .quantity input[type="text"]
{
	text-align:					right;
	width:						65px;
}

/* Thumbnail styling. */

div.your-account-thumbnail-cell
{
	max-width:					213px;
	min-width:					213px;
	padding:					10px 0;
}

/* With a 4:3 aspect ratio, height (minus padding) is 0.75 of the width (again
 * minus padding), e.g., (147px - 5px) = (209px - 20px) * 0.75. */
img.results-thumbnail,
video.results-thumbnail
{
	/* The actual image height is the following minus the top/bottom
	 * padding. */
	height:						147px;
	/* Left/right padding on image rather than cell to allow caption to be
	 * wider than the image. */
	padding:					0 10px 5px 10px;
	/* The actual image width is the following minus the left/right padding. */
	width:						209px;
}

/* Order detail. */

div.order-detail-values,
div.order-items
{
	width:						906px;
}

/* Styles for width 960px to 1278px. --------------------------------------- */

@media only screen
	and (max-width: 1278px)
{

div#your-account-nav
{
	max-width:					230px;
	width:						230px;
}

div.your-account-navbox-blank,
div.your-account-navbox-cell
{
	font-size:					13px;
	max-width:					226px;
	width:						226px;
}

img.your-account-icon,
video.your-account-icon
{
	width:						210px;
}

div.your-account-icon-description
{
	height:						60px;
	padding:					5px 8px;
}

div.your-account-login-form-container
{
	max-width:					400px;
}

div.your-account-form-container input[type="password"],
div.your-account-form-container input[type="text"]
{
	width:						400px;
}

div.your-account-form-container select
{
	max-width:					660px;
}

/* Flex tables: Shopping cart. */

div.shopping-cart .actions,
div.shopping-cart .price
{
	white-space:				normal;
}

div.order-summary-table
{
	width:						100%;
}

/* Order detail. */

div.order-detail-values,
div.order-items
{
	width:						674px;
}

}

/* Styles for width 720px to 959px. ---------------------------------------- */

@media only screen
	and (max-width: 959px)
{

div.your-account-navbox-row
{
	display:					block;
}

div.your-account-navbox-blank,
div.your-account-navbox-cell
{
	font-size:					14px;
	max-width:					435px;
	width:						435px;
}

img.your-account-icon,
video.your-account-icon
{
	width:						419px;
}

div.your-account-icon-description
{
	height:						65px;
	padding:					6px 10px;
};

div.your-account-form-container select
{
	max-width:					470px;
}

/* Flex tables: Shopping cart. */

div#page-content div.flex-table,
div#page-content div.flex-tr,
div#page-content div.flex-td
{
	display:					block;
	text-align:					center;
}

div#page-content div.flex-th,
div#page-content div.flex-td-spacer
{
	display:					none;
}

div.shopping-cart .price
{
	background-color:			#c9d9e5;
}

div.shopping-cart .quantity input[type="text"]
{
	text-align:					center;
}

/* Thumbnail styling. */

div.your-account-thumbnail-cell
{
	max-width:					208px;
	min-width:					208px;
	padding:					10px 0;
}

/* With a 4:3 aspect ratio, height (minus padding) is 0.75 of the width (again
 * minus padding), e.g., (144px - 5px) = (204px - 20px) * 0.75. */
img.results-thumbnail,
video.results-thumbnail
{
	/* The actual image height is the following minus the top/bottom
	 * padding. */
	height:						144px;
	/* Left/right padding on image rather than cell to allow caption to be
	 * wider than the image. */
	padding:					0 10px 5px 10px;
	/* The actual image width is the following minus the left/right padding. */
	width:						204px;
}

div.order-detail-values,
div.order-items
{
	width:						436px;
}

}

/* Styles for width 620px to 719px. ---------------------------------------- */

@media only screen
	and (max-width: 719px)
{

div.your-account-navbox-blank,
div.your-account-navbox-cell
{
	max-width:					346px;
	width:						346px;
}

img.your-account-icon,
video.your-account-icon
{
	width:						330px;
}

div.your-account-login-form-container
{
	max-width:					290px;
}

div.your-account-form-container input[type="password"],
div.your-account-form-container input[type="text"]
{
	width:						290px;
}

div.your-account-form-container select
{
	max-width:					330px;
}

div.order-detail-values,
div.order-items
{
	width:						338px;
}

}

/* Styles for width < 620px. ----------------------------------------------- */

@media only screen
	and (max-width: 619px)
{

div#page-content,
div.your-account-row,
div#your-account-nav,
div#your-account-body
{
	display:					block;
}

div#your-account-nav,
div#your-account-body
{
	max-width:					294px;
	width:						294px;
}

div.your-account-group-container,
div.your-account-heading
{
	margin-left:				0;
}

div.your-account-nav-links
{
	margin-right:				0;
}

div#your-account-body
{
	padding-left:				0;
}

div.your-account-navbox-blank,
div.your-account-navbox-cell
{
	font-size:					13px;
	max-width:					294px;
	width:						294px;
}

img.your-account-icon,
video.your-account-icon
{
	width:						278px;
}

div.your-account-icon-heading,
div.your-account-icon-description
{
	padding:					5px 8px;
}

div.your-account-icon-heading
{
	height:						28px;
}

div.your-account-icon-description
{
	height:						60px;
}

div.your-account-form-container select
{
	max-width:					280px;
}

div.order-detail-values,
div.order-items
{
	width:						286px;
}

}