div#billboard-container-primary
{
	display:					table;
	margin-bottom:				30px;

	/* 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#billboard-image-container-primary,
div#billboard-text-panel-primary
{
	display:					table-cell;
	vertical-align:				top;
}

div#billboard-image-container-primary
{
	/* To allow child elements to be 'absolute' positioned within this one: */
	position:					relative;
}

div#billboard-image-container-primary,
img.billboard-image-primary,
video.billboard-image-primary
{
	height:						400px; /* ~0.449 of the width. */
	width:						890px;
}

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

div#billboard-text-panel-primary
{
	/* 'width: 100%' to cause the text panel to use all remaining width: */
	width:						100%;
}

div#billboard-container-secondary
{
	display:					none;
	margin:						0 auto 10px auto;
	max-width:					400px;
	min-width:					400px;

	/* 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#billboard-image-container-secondary
{
	/* To allow child elements to be 'absolute' positioned within this one: */
	position:					relative;
}

img.billboard-image-secondary,
video.billboard-image-secondary
{
	/* When an image (and a video too it would appear) is 'display: inline'
	 * (the default), there a small gap underneath for character descenders,
	 * so 'block' used instead: */
	display:					block;
	height:						400px;
	width:						400px;
}

div#billboard-text-panel-secondary
{
	max-width:					400px;
}

div.billboard-text-panel
{
	/* To allow child elements to be 'absolute' positioned within this one: */
	position:					relative;
}

div.billboard-text-area
{
	max-height:					400px;
	overflow:					hidden;
	/* Larger padding right/bottom to make sure there's space for navigation
	 * elements: */
	padding:					8px 30px 42px 16px;
}

div.billboard-heading
{
	font-size:					28px;
	font-weight:				bold;
	padding-bottom:				20px;
}

div.billboard-paragraph
{
	font-size:					24px;
	padding-bottom:				15px;
}

div.billboard-navigation-previous,
div.billboard-navigation-next
{
	bottom:						0;
	color:						white;
	cursor:						pointer;
	padding:					190px 15px;
	position:					absolute;
	text-shadow:				1px 1px 0 black, 0 0 1px black;
	top:						0;
}

div.billboard-navigation-next
{
	right:						0;
}

div.billboard-navigation-previous:hover,
div.billboard-navigation-next:hover
{
	background-color:			#aaa;
	opacity:					0.75;
}

div.billboard-navigation
{
	bottom:						12px;
	left:						50%;
	position:					absolute;
	/* The following line copied from
	 * css-tricks.com/forums/topic/horizontal-centering-of-an-absolute-element/
	 */
	transform:					translateX(-50%);
	white-space:				nowrap;
}

span.billboard-navigation-dot
{
	background-color:			#bbb;
	border-radius:				50%;
	cursor:						pointer;
	display:					inline-block;
	height:						15px;
	opacity:					0.75;
	margin:						0 6px;
	width:						15px;
}

span.billboard-navigation-dot:hover,
span.billboard-navigation-dot-current
{
	background-color:			white;
}

@keyframes billboard-change-animation
{
	0%
	{
		opacity:				0.5;
	}
	100%
	{
		opacity:				1;
	}
}

.billboard-change
{
	animation-name:				billboard-change-animation;
	animation-duration:			0.25s;
}

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

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

div#billboard-image-container-primary,
img.billboard-image-primary,
video.billboard-image-primary
{
	height:						301px; /* ~0.449 of the width. */
	width:						670px;
}

div.billboard-text-area
{
	max-height:					301px;
	/* Larger padding right/bottom to make sure there's space for navigation
	 * elements: */
	padding:					8px 25px 42px 12px;
}

div.billboard-heading
{
	font-size:					22px;
	padding-bottom:				14px;
}

div.billboard-paragraph
{
	font-size:					18px;
	padding-bottom:				12px;
}

div.billboard-navigation-previous,
div.billboard-navigation-next
{
	padding:					140px 10px;
}

span.billboard-navigation-dot
{
	height:						14px;
	margin:						0 5px;
	width:						14px;
}

}

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

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

div#billboard-image-container-primary,
img.billboard-image-primary,
video.billboard-image-primary
{
	height:						225px; /* ~0.449 of the width. */
	width:						500px;
}

div.billboard-text-area
{
	max-height:					225px;
	/* Larger padding right/bottom to make sure there's space for navigation
	 * elements: */
	padding:					8px 20px 42px 12px;
}

div.billboard-heading
{
	font-size:					16px;
	padding-bottom:				8px;
}

div.billboard-paragraph
{
	font-size:					13px;
	padding-bottom:				8px;
}

div.billboard-navigation-previous,
div.billboard-navigation-next
{
	padding:					100px 5px;
}

span.billboard-navigation-dot
{
	height:						12px;
	margin:						0 4px;
	width:						12px;
}

}

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

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

div#billboard-container-primary
{
	display:					none;
}

div#billboard-container-secondary
{
	display:					block;
}

div.billboard-navigation-previous,
div.billboard-navigation-next
{
	padding:					190px 10px;
}

div.billboard-text-area
{
	max-height:					none;
	/* Larger padding right/bottom to make sure there's space for navigation
	 * elements: */
	padding:					8px 12px 42px 12px;
}

div.billboard-heading
{
	font-size:					22px;
	padding-bottom:				14px;
}

div.billboard-paragraph
{
	font-size:					18px;
	padding-bottom:				12px;
}

}

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

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

div#billboard-container-secondary
{
	min-width:					310px;
}

img.billboard-image-secondary,
video.billboard-image-secondary
{
	height:						310px;
	width:						310px;
}

div.billboard-navigation-previous,
div.billboard-navigation-next
{
	padding:					145px 5px;
}

div.billboard-heading
{
	font-size:					16px;
	padding-bottom:				8px;
}

div.billboard-paragraph
{
	font-size:					13px;
	padding-bottom:				8px;
}

}