/* Default styles for HTML elements. --------------------------------------- */
/* For responsive '@media' directives associated with the styling contained in
 * this file, see 'main_r.css'. */

body
{
	color:						#333;
	/* No styles so far. */
}

a
{
	border-bottom:				none;
	color:						#6f90ba;
}

a:focus,
a:hover
{
	border-bottom:				1px solid #6f90ba;
}

a.like-button-secondary:focus,
a.like-button-secondary:hover
{
	border:						1px solid #6f90ba;
}

button.like-link,
input[type="submit"].like-link,
.like-link
{
	border-bottom:				1px solid transparent;
	color:						#6f90ba;
}

button.like-link:focus,
button.like-link:hover,
input[type="submit"].like-link:focus,
input[type="submit"].like-link:hover,
.like-link:focus,
.like-link:hover
{
	border-bottom:				1px solid #6f90ba;
}

/* Request/action pending page overlay. ------------------------------------ */

div#request-pending
{
	background-color:			white;
	display:					none;
	height:						100%;
	justify-content:			center;
	left:						0;
	opacity:					0.7;
	padding-top:				315px;
	position:					fixed;
	top:						0;
	width:						100%;
	z-index:					10;
}

div#request-pending-extra
{
	display:					none;
}

div#request-pending-extra img
{
	width:						100px;
}

/* Page container. --------------------------------------------------------- */

/* For width >= 1279px: */

div#page-container
{
	background-color:			white;
	/* Horizontally centres this element: */
	margin:						0 auto;
	max-width:					1244px;
}

/* Maintenance mode banner. ------------------------------------------------ */

div#admin-info-banner
{
	background-color:			#733737;
	color:						white;
	padding:					5px 0;
	text-align:					center;
}

div#admin-info-banner a
{
	border-bottom:				1px solid #ccc;
	color:						white;
}

div#admin-info-banner a:focus,
div#admin-info-banner a:hover
{
	border-bottom:				1px solid white;
}

/* Page banner and content elements. --------------------------------------- */

div.page-banner
{
	font-size:					12px;
	padding:					15px 2px;
}

div.page-banner a
{
	color:						#333;
}

div#page-content
{
	min-height:					550px;
	overflow:					auto;
}

/* Data rows table. -------------------------------------------------------- */

table.data-rows
{
	margin:						0 0 12px 0;
}

table.data-rows td,
table.data-rows th
{
	padding:					6px 12px;
	vertical-align:				top;
}

table.data-rows a:not(:last-child),
table.data-rows .like-link:not(:last-child)
{
	margin-right:				5px;
}

/* Data values table. ------------------------------------------------------ */

table.data-values
{
	margin:						0 0 12px 0;
}

table.data-values td,
table.data-values th
{
	padding:					6px 12px;
	vertical-align:				top;
}

table.data-values th
{
	text-align:					left;
}

/* Flex table. ------------------------------------------------------------- */

div.flex-table
{
	display:					table;
}

div.flex-tr
{
	display:					table-row;
}

div.flex-th,
div.flex-td
{
	display:					table-cell;
	vertical-align:				top;
}

/* Flex table (data rows). ------------------------------------------------- */

div.data-rows
{
	margin:						0 0 12px 0;
}

div.data-rows div.flex-th
{
	font-weight:				bold;
}

div.data-rows div.flex-th,
div.data-rows div.flex-td
{
	padding:					6px 12px;
}

div.data-rows div.form-group
{
	margin-bottom:				0;
}

div.data-rows a:not(:last-child),
div.data-rows .like-link:not(:last-child)
{
	margin-right:				5px;
}

/* Forms (main specific). -------------------------------------------------- */

a.like-button,
button,
div.form-group input[type="submit"]
{
	background-color:			#aa3939;
	border:						1px solid #aa3939;
	color:						white;
}

a.like-button:focus,
a.like-button:hover,
button:focus,
button:hover,
div.form-group input[type="submit"]:focus,
div.form-group input[type="submit"]:hover
{
	background-color:			#801515;
}

div.form-group input[type="password"]:focus,
div.form-group input[type="text"]:focus,
div.form-group select:focus,
div.form-group textarea:focus
{
	background-color:			#edf3f7;
}

/* Info popup. ------------------------------------------------------------- */

div#info-popup-backdrop
{
	background-color:			rgb(0, 0, 0); /* Fallback colour. */
	background-color:			rgba(0, 0, 0, 0.5);
	display:					none;
	height:						100%;
	left:						0;
	overflow:					auto;
	position:					fixed;
	top:						0;
	width:						100%;
	z-index:					1;
}

div#info-popup-container
{
	width:						400px;
	margin:						100px auto 0 auto;
}

div.info-title-bullet
{
	color:						#aa3939;
	display:					inline-block;
	max-width:					16px;
	min-width:					16px;
	width:						16px;
}

div.info-popup-title
{
	background-color:			#c9d9e5;
	display:					table;
	height:						35px;
}

div.info-popup-title > div
{
	display:					table-cell;
	padding:					0 10px;
	vertical-align:				middle;
}

div.info-popup-title-text
{
	width:						100%;
}

div.info-popup-dismiss
{
	cursor:						pointer;
	font-size:					150%;

	/* 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.info-popup-content
{
	background-color:			white;
}

div.info-popup-message
{
	background-color:			#f9f9f9;
}

div.info-popup-content-wrapper,
div.info-popup-message-wrapper
{
	padding:					10px 20px;
}

div.info-popup-message-wrapper
{
	min-height:					75px;
}

/* Login form (common styles). --------------------------------------------- */

div.login-form-container
{
	/* No common styles yet. */
}

div.login-form-label-container,
div.login-form-action-container
{
	display:					table;
	width:						100%;
}

div.login-form-label,
div.login-form-label-link,
div.login-form-action-login,
div.login-form-action-signup
{
	display:					table-cell;
}

div.login-form-label,
div.login-form-label-link
{
	padding-bottom:				5px;
}

div.login-form-label-link,
div.login-form-action-signup
{
	text-align:					right;
}

div.login-form-container div.form-group input[type="password"],
div.login-form-container div.form-group input[type="text"]
{
	width:						100%;
}

/* Markdown Lite default styling. ------------------------------------------ */

a.mdlite-link
{
	border-bottom:				0;
	color:						#5A8DBF;
}

a.mdlite-link:focus,
a.mdlite-link:hover
{
	border-bottom:				1px solid #5A8DBF;
}

div.mdlite-blockquote
{
	margin-left:				30px;
}

div.mdlite-bullet
{
	margin-left:				42px;
	text-indent:				-12px;
}

div.mdlite-heading-1
{
	font-size:					18px;
	line-height:				normal;
}

div.mdlite-heading-2
{
	font-size:					16px;
	line-height:				normal;
}

div.mdlite-numbered-bullet
{
	margin-left:				49px;
	text-indent:				-19px;
}

span.mdlite-bold
{
	font-weight:				bold;
}

span.mdlite-code
{
	font-family:				monospace;
}

span.mdlite-italic
{
	font-style:					italic;
}

table.mdlite-columns
{
	table-layout:				fixed;
	width:						100%;
}

table.mdlite-columns td
{
	vertical-align:				top;
	padding:					0 10px;
}

table.mdlite-columns td:first-child
{
	padding-left:				0;
}

table.mdlite-columns td:last-child
{
	padding-right:				0;
}

/* Product info popup contents. -------------------------------------------- */

div.product-info-popup-container
{
	display:					table;
	width:						100%;
}

div.product-info-popup-image-cell,
div.product-info-popup-overview-cell
{
	display:					table-cell;
	vertical-align:				top;
}

div.product-info-popup-image-cell,
img.product-info-popup-thumbnail
{
	width:						192px;
}

div.product-info-popup-overview-cell
{
	padding-left:				20px;
}

div.product-info-popup-heading
{
	background-color:			#c9d9e5;
	display:					table;
	margin-bottom:				10px;
	padding:					6px;
	width:						100%;
}

div.product-info-popup-heading-bullet,
div.product-info-popup-heading-label
{
	display:					table-cell;
}

div.product-info-popup-heading-bullet
{
	color:						#aa3939;
	max-width:					16px;
	min-width:					16px;
	width:						16px;
}

div.product-info-popup-info-table
{
	border-left:				1px solid #ccc;
	border-right:				1px solid #ccc;
	display:					table;
	margin-bottom:				10px;
	width:						100%;
}

div.product-info-popup-info-row
{
	display:					table-row;
}

div.product-info-popup-info-table-label,
div.product-info-popup-info-table-value
{
	display:					table-cell;
	padding:					4px 12px;
}

div.product-info-popup-info-table-label
{
	width:						40%;
}

div.product-info-popup-button-bar
{
	padding:					20px 0;
	text-align:					right;
}

/* Company part number info popup contents. -------------------------------- */

input#cpn_part_num
{
	width:						100%;
}

div#cpn-set-form-feedback
{
	display:					none;
}

/* Notification. ----------------------------------------------------------- */

div#notification
{
	position:					absolute;
	/* I've no idea how the following two lines cause the element to be centre
	 * justified, but they do (at least on Chrome; not tested on anything
	 * else). */
	/* This kept here just in case I need to know how to do this in future.
	left:						50%;
	transform:					translate(-50%, 0);
	*/
	/* The following 'right' value is a default. The value is set by JavaScript
	 * when the notification element is displayed (see 'notification.php'). */
	right:						0;
	top:						0;

	background-color:			#e9e9e9;
	padding:					10px 50px;
	text-align:					center;
	display:					none;
}

/* Footer styling. --------------------------------------------------------- */

div#page-footer-container
{
	background-color:			#365473;
	border-top:					2px solid #eee;
	padding:					20px 0;
}

div#page-footer
{
	margin:						0 auto;
	width:						1244px;
}

div.footer-column
{
	display:					inline-block;
	padding-bottom:				10px;
	padding-left:				25px;
	vertical-align:				top;
	width:						300px;
}

div.footer-column-heading
{
	color:						white;
	font-weight:				bold;
	padding-bottom:				12px;
}

div.footer-link
{
	padding-bottom:				4px;
}

div.footer-link a
{
	border-bottom:				0;
	color:						white;
}

div.footer-link a:focus,
div.footer-link a:hover
{
	border-bottom:				1px solid white;
}

/* Miscellaneous styling. -------------------------------------------------- */

.numeric-value
{
	text-align:					right;
}

a.icon
{
	border-bottom:				none;
}

div[class$="-toggle-hideable"]
{
	cursor:						pointer;

	/* 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.region-confirmation-link
{
	padding:					6px 12px;
}

div.row
{
	display:					table-row;
}

div.site-message-paragraph
{
	padding-bottom:				15px;
}

div.site-message-paragraph:last-child
{
	padding-bottom:				0;
}
