div.splash-area-container
{
	/* No styles so far. */
}

div.splash-area-row
{
	display:					table;
	/* This appears to be required to force 'div.splash-box' elements to occupy
	 * the full height within the 'div.splash-box-cell-width-X' elements: */
	height:						100%;
}

div.splash-box-cell-width-1,
div.splash-box-cell-width-2,
div.splash-box-cell-width-3
{
	box-sizing:					content-box;
	display:					table-cell;
	padding-bottom:				30px;
	padding-right:				10px;
	vertical-align:				top;
}

div.splash-box-cell-width-1,
div.splash-box-cell-width-1 img.splash-image,
div.splash-box-cell-width-1 video.splash-image
{
	width:						408px;
}

div.splash-box-cell-width-2,
div.splash-box-cell-width-2 img.splash-image,
div.splash-box-cell-width-2 video.splash-image
{
	width:						826px;
}

div.splash-box-cell-width-3,
div.splash-box-cell-width-3 img.splash-image,
div.splash-box-cell-width-3 video.splash-image
{
	width:						1244px;
}

div.splash-box-cell:last-of-type
{
	/* Padding between splash box cells, not after them: */
	padding-right:				0;
}

span.splash-box-link
{
	cursor:						pointer;
}

div.account-box,
div.splash-box
{
	height:						100%;
}

div.account-box
{
	display:					table;
	background-color:			#f1f1f1;
	border:						20px solid #c9d9e5;
}

div.account-box div.login-form-container
{
	background-color:			white;
	display:					table-cell;
	padding:					10px 20px 0 20px;
}

div.account-box-message-area
{
	display:					table-cell;
	height:						0;
	padding:					10px 20px 0 20px;
}

div.account-box-more-nav-area
{
	display:					table-cell;
	height:						0;
	padding:					10px 20px;
	text-align:					right;
}

div.account-box div.login-form-container,
div.account-box-message,
div.account-box-more-nav-area,
div.splash-description,
div.splash-heading
{
	font-size:					16px;
}

div.splash-description,
div.splash-heading
{
	padding:					10px 15px;
}

div.splash-description
{
	height:						80px;
}

div.splash-heading
{
	height:						40px;
}

div.splash-image-container
{
	text-align:					center;
}

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

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

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

div.splash-box-cell-width-1,
div.splash-box-cell-width-2,
div.splash-box-cell-width-3
{
	padding-bottom:				27px;
	padding-right:				9px;
}

div.splash-box-cell-width-1,
div.splash-box-cell-width-1 img.splash-image,
div.splash-box-cell-width-1 video.splash-image
{
	width:						306px;
}

div.splash-box-cell-width-2,
div.splash-box-cell-width-2 img.splash-image,
div.splash-box-cell-width-2 video.splash-image
{
	width:						621px;
}

div.splash-box-cell-width-3,
div.splash-box-cell-width-3 img.splash-image,
div.splash-box-cell-width-3 video.splash-image
{
	width:						936px;
}

div.account-box
{
	border:						16px solid #c9d9e5;
}

div.account-box div.login-form-container,
div.account-box-message-area
{
	padding:					8px 16px 0 16px;
}

div.splash-heading
{
	height:						32px;
	padding:					8px 12px;
}

div.splash-description
{
	height:						68px;
}

div.account-box div.login-form-container,
div.account-box-message,
div.account-box-more-nav-area,
div.splash-description,
div.splash-heading
{
	font-size:					13px;
}

}

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

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

div.splash-box-cell-width-1,
div.splash-box-cell-width-2,
div.splash-box-cell-width-3
{
	padding-bottom:				21px;
	padding-right:				7px;
}

div.splash-box-cell-width-1,
div.splash-box-cell-width-1 img.splash-image,
div.splash-box-cell-width-1 video.splash-image
{
	width:						228px;
}

div.splash-box-cell-width-2,
div.splash-box-cell-width-2 img.splash-image,
div.splash-box-cell-width-2 video.splash-image
{
	width:						463px;
}

div.splash-box-cell-width-3,
div.splash-box-cell-width-3 img.splash-image,
div.splash-box-cell-width-3 video.splash-image
{
	width:						698px;
}

div.account-box
{
	border:						12px solid #c9d9e5;
}

div.account-box div.login-form-container,
div.account-box-message-area
{
	padding:					6px 12px 0 12px;
}

div.splash-heading
{
	height:						23px;
	padding:					5px 10px;
}

div.splash-description
{
	height:						72px;
}

div.account-box div.login-form-container,
div.account-box-message,
div.account-box-more-nav-area,
div.splash-description,
div.splash-heading
{
	font-size:					11px;
}

}

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

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

div.splash-area-row,
div.splash-box-cell-width-1,
div.splash-box-cell-width-2,
div.splash-box-cell-width-3
{
	display:					block;
}

div.splash-box-cell-width-1,
div.splash-box-cell-width-2,
div.splash-box-cell-width-3
{
	padding:					0;
}

div.splash-box-cell-width-1,
div.splash-box-cell-width-2,
div.splash-box-cell-width-3,
div.splash-box-cell-width-1 img.splash-image,
div.splash-box-cell-width-1 video.splash-image,
div.splash-box-cell-width-2 img.splash-image,
div.splash-box-cell-width-2 video.splash-image,
div.splash-box-cell-width-3 img.splash-image,
div.splash-box-cell-width-3 video.splash-image
{
	width:						400px;
}

div.account-box
{
	border:						20px solid #c9d9e5;
}

div.account-box div.login-form-container,
div.account-box-message-area
{
	padding:					10px 20px 0 20px;
}

div.splash-area-row,
div.account-box,
div.splash-box
{
	margin:						0 auto 10px auto;
	width:						400px;
}

div.splash-heading
{
	height:						auto;
	padding:					10px 15px;
}

div.splash-description
{
	height:						auto;
}

div.account-box div.login-form-container,
div.account-box-message,
div.account-box-more-nav-area,
div.splash-description,
div.splash-heading
{
	font-size:					16px;
}

}

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

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

div.account-box
{
	border:						16px solid #c9d9e5;
}

div.account-box div.login-form-container,
div.account-box-message-area
{
	padding:					8px 16px 0 16px;
}

div.splash-area-row,
div.account-box,
div.splash-box,
div.splash-box-cell-width-1,
div.splash-box-cell-width-2,
div.splash-box-cell-width-3,
div.splash-box-cell-width-1 img.splash-image,
div.splash-box-cell-width-1 video.splash-image,
div.splash-box-cell-width-2 img.splash-image,
div.splash-box-cell-width-2 video.splash-image,
div.splash-box-cell-width-3 img.splash-image,
div.splash-box-cell-width-3 video.splash-image
{
	width:						310px;
}

div.splash-heading
{
	padding:					8px 12px;
}

div.account-box div.login-form-container,
div.account-box-message,
div.account-box-more-nav-area,
div.splash-description,
div.splash-heading
{
	font-size:					15px;
}

}