/* Blog page layout styling. ----------------------------------------------- */

div#page-content,
div#main-blog-body
{
	display:					table;
	overflow:					hidden;
	width:						100%;
}

div#page-content
{
	margin-bottom:				24px;
}

div#main-blog-secondary-nav-sm
{
	display:					none;
}

div#main-blog-body-container,
div#main-blog-secondary-nav,
div#main-blog-aux,
div#main-blog-content
{
	display:					table-cell;
	vertical-align:				top;
}

div#main-blog-secondary-nav,
div#main-blog-aux
{
	width:						250px;
}

/* Styling for blog index/thumbnail pages. --------------------------------- */

a.main-blog-thumbnail-link,
div.main-blog-index-pagination-control a
{
	border-bottom:				0;
}

div.main-blog-index-heading-container,
div.main-blog-view-heading-container
{
	display:					table;
	height:						35px;
	margin:						5px 2px;
	width:						100%;
}

div.main-blog-index-heading,
div.main-blog-index-pagination-control,
div.main-blog-view-heading
{
	display:					table-cell;
	vertical-align:				middle;
}

div.main-blog-index-heading,
div.main-blog-view-heading
{
	color:						#808080;
	font-size:					12px;
	overflow:					hidden;
	white-space:				nowrap;
}

div.main-blog-index-pagination-control
{
	/* Padding right to match border spacing of thumbnails container: */
	padding-right:				43px;
	text-align:					right;
}

div.main-blog-thumbnails-container
{
	/* 'border-collapse: separate' is required for 'border-spacing': */
	border-collapse:			separate;
	border-spacing:				43px;
	display:					table;
	/* 'border-spacing' can't accept four values, so the following 'margin'
	 * nullifies the effect of the first row and first column's top and left
	 * 43px border spacing. */
	margin:						-43px 0 0 -43px;
}

div.main-blog-thumbnails-row
{
	display:					table-row;
}

div.main-blog-thumbnail-cell
{
	border:						2px solid #eee;
	display:					table-cell;
	height:						360px;
	max-width:					454px;
	padding:					20px;
	/* This allows 'main-blog-thumbnail-button' use 'position: absolute': */
	position:					relative;
	vertical-align:				top;
}

div.main-blog-thumbnail-cell-dummy
{
	display:					table-cell;
}

div.main-blog-thumbnail-cell img,
div.main-blog-thumbnail-cell video
{
	width:						410px;
}

div.main-blog-thumbnail-title
{
	color:						#365473;
	font-size:					18px;
	font-weight:				bold;
	padding:					6px 0;
}

div.main-blog-thumbnail-button
{
	/* 'bottom' and 'right' to match thumbnail cell padding: */
	bottom:						20px;
	position:					absolute;
	right:						20px;
}

div.main-blog-thumbnail-button button
{
	/* The following is to nullify the 'margin-bottom' for buttons in
	 * 'default.css: */
	margin:						0;
}

span.pagination-link
{
	border-color:				#eee;
	border-radius:				4px;
	border-style:				solid;
	border-width:				2px;
	cursor:						pointer;
	/* 'inline-block' appears to stop this element's padding going outside of
	 * the containing 'div': */
	display:					inline-block;
	padding:					6px 12px;
}

span.pagination-link:hover
{
	background-color:			#eee;
}

/* Styling of blog article view auxiliary area. ---------------------------- */

div#main-blog-aux
{
	padding:					15px 0 0 0;
}

div.blog-aux-author-image a
{
	border-bottom:				0;
}

div.blog-aux-author-image
{
	padding:					0 65px 15px 65px;
}

div.blog-aux-author-image img,
div.blog-aux-author-image video
{
	width:						120px;
}

div.blog-aux-author-name,
div.blog-aux-article-date
{
	padding-bottom:				15px;
	text-align:					center;
}

div.blog-article-link-title
{
	font-weight:				bold;
	padding:					10px 0;
}

div.blog-article-link-title:first-child
{
	padding-top:				0;
}

span.blog-article-link-title-suffix
{
	display:					none;
}

div.blog-article-links-container
{
	padding-bottom:				10px;
}

div.blog-article-link
{
	padding-bottom:				5px;
}

/* Styling for blog article content. --------------------------------------- */

div#main-blog-content
{
	font-size:					16px;
	line-height:				1.75;
	padding:					0 45px;
}

div.blog-content-banner-image
{
	padding-bottom:				15px;
	text-align:					center;
}

div.blog-content-banner-image img,
div.blog-content-banner-image video
{
	width:						100%;
}

div.blog-content-image
{
	text-align:					center;
}

div.blog-content-image img,
div.blog-content-image video
{
	width:						100%;
}

div.blog-content-title
{
	color:						#365473;
	font-size:					28px;
	font-weight:				bold;
	line-height:				normal;
	padding:					15px 0;
}

span.blog-content-error
{
	color:						#c03030;
	font-weight:				bold;
}

/* Markdown Lite over-riding styles (see 'main.css' for default styles). */

div.mdlite-heading-1
{
	font-size:					24px;
}

div.mdlite-heading-2
{
	font-size:					20px;
}

/* Styling of blog secondary nav area. ------------------------------------- */

div#main-blog-secondary-nav,
div#main-blog-secondary-nav-sm
{
	padding:					15px 0 0 0;
}

div.main-blog-secondary-nav-top-padding
{
	height:						30px;
}

/* Blog featured link styling. */

div.blog-featured-link-container
{
	/* No styling (at this browser width) so far. */
}

div.blog-featured-link-cell
{
	border:						0 solid white;
	border-radius:				5px;
	margin-bottom:				20px;
	min-height:					175px;
	overflow:					hidden;
	/* Larger padding at the bottom for the absolutely-positioned button: */
	padding:					10px 10px 40px 10px;
	position:					relative;
	text-align:					center;
}

div.blog-featured-link-cell a
{
	border-bottom:				0;
}

div.blog-featured-link-heading
{
	font-size:					16px;
	font-weight:				bold;
	padding-bottom:				10px;
}

div.blog-featured-link-blurb
{
	font-size:					14px;
	padding-bottom:				10px;
}

div.blog-featured-link-button
{
	bottom:						10px;
	left:						0;
	position:					absolute;
	right:						0;
}

div.blog-featured-link-button button
{
	background-color:			white;
	border-color:				black;
	color:						black;
	margin-bottom:				0;
}

div.blog-featured-link-button button:hover
{
	background-color:			#eee;
}

/* Blog related article styling. */

div.blog-related-article-cell
{
	border:						2px solid #eee;
	margin-bottom:				20px;
	/* Padding at the bottom for the absolutely-positioned button: */
	padding:					10px 10px 40px 10px;
	position:					relative;
}

div.blog-related-article-cell a
{
	border-bottom:				0;
}

div.blog-related-article-cell img,
div.blog-related-article-cell video
{
	width:						226px;
}

div.blog-related-article-title
{
	font-size:					16px;
	padding-bottom:				10px;
}

div.blog-related-article-button
{
	bottom:						10px;
	position:					absolute;
	right:						10px;
}

div.blog-related-article-button button
{
	margin-bottom:				0;
}

/* Blog tag styling. */

div.blog-tags-container
{
	padding-bottom:				15px;
}

div.blog-tag-link
{
	background-color:			#f9f9f9;
	border:						1px solid #ccc;
	border-radius:				4px;
	display:					inline-block;
	margin:						0 5px 10px 0;
}

div.blog-tag-link a
{
	border-bottom:				0;
	display:					inline-block;
	padding:					5px;
}

div.blog-tag-link a:focus,
div.blog-tag-link a:hover
{
	background-color:			#eee;
}

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

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

div.main-blog-index-pagination-control
{
	/* Padding right to match border spacing of thumbnails container: */
	padding-right:				30px;
}

div.main-blog-thumbnails-container
{
	border-spacing:				30px;
	margin:						-30px 0 0 -30px;
}

div.main-blog-thumbnail-cell
{
	height:						270px;
	max-width:					313px;
	padding:					14px;
}

div.main-blog-thumbnail-cell img,
div.main-blog-thumbnail-cell video
{
	width:						281px;
}

div.main-blog-thumbnail-title
{
	font-size:					14px;
}

div.main-blog-thumbnail-button
{
	/* 'bottom' and 'right' to match thumbnail cell padding: */
	bottom:						14px;
	right:						14px;
}

div.main-blog-thumbnail-button button
{
	font-size:					12px;
}

div.blog-related-article-title
{
	font-size:					14px;
}

div#main-blog-body,
div#main-blog-aux,
div#main-blog-content
{
	display:					block;
}

div#main-blog-aux
{
	width:						auto;
}

div#main-blog-content
{
	padding:					0 45px 0 0;
}

/* Blog article view auxiliary area. */

div.blog-aux-author-image,
div.blog-aux-author-name,
div.blog-aux-article-date
{
	display:					inline-block;
	padding:					0 10px 15px 0;
	text-align:					left;
	vertical-align:				middle;
}

div.blog-aux-author-image img,
div.blog-aux-author-image video
{
	width:						40px;
}

div.blog-article-link-title,
div.blog-article-link-container,
div.blog-article-link
{
	display:					inline-block;
}

span.blog-article-link-title-suffix
{
	display:					initial;
}

div.blog-article-link
{
	padding-bottom:				0;
}

div.blog-article-link-title,
div.blog-article-link-container
{
	padding:					0 5px 0 0;
}

}

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

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

div#page-content,
div#main-blog-secondary-nav-sm,
div#main-blog-body-container
{
	display:					block;
}

div#main-blog-content
{
	padding:					0;
}

div#main-blog-secondary-nav
{
	display:					none;
}

div.main-blog-index-pagination-control
{
	padding-right:				2px;
}

div.main-blog-thumbnails-container
{
	margin:						-30px -30px 0 -30px;
}

div.main-blog-thumbnail-cell
{
	height:						270px;
	max-width:					334px;
}

div.main-blog-thumbnail-cell img,
div.main-blog-thumbnail-cell video
{
	width:						302px;
}

/* Blog featured link styling. */

div.blog-featured-link-container
{
	display:					flex;
	flex-wrap:					wrap;
}

div.blog-featured-link-cell
{
	margin:						0 5px 10px 5px;
	min-height:					0;
	width:						335px;
}

div.blog-featured-link-blurb
{
	display:					none;
}

/* Blog related article styling. */

div.blog-related-article-container
{
	display:					flex;
	flex-wrap:					wrap;
}

div.blog-related-article-cell
{
	margin:						0 5px 10px 5px;
	width:						335px;
}

div.blog-related-article-cell img,
div.blog-related-article-cell video
{
	width:						311px;
}

/* Blog tag styling. */

div.blog-tags-container
{
	padding-bottom:				0;
}

}

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

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

div.main-blog-thumbnails-container,
div.main-blog-thumbnails-row,
div.main-blog-thumbnail-cell-dummy
{
	display:					block;
}

div.main-blog-thumbnails-container
{
	/* Bottom margin of -43px to nullify the bottom margin of the last
	 * 'main-blog-thumbnail-cell': */
	margin:						0 0 -43px 0;
}

div.main-blog-thumbnail-cell
{
	display:					block;
	height:						480px;
	margin-bottom:				43px;
	max-width:					600px;
	padding:					20px;
}

div.main-blog-thumbnail-cell img,
div.main-blog-thumbnail-cell video
{
	width:						556px;
}

div.main-blog-thumbnail-title
{
	font-size:					24px;
}

div.main-blog-thumbnail-button
{
	/* 'bottom' and 'right' to match thumbnail cell padding: */
	bottom:						20px;
	right:						20px;
}

div.main-blog-thumbnail-button button
{
	font-size:					14px;
}

/* Blog featured link styling. */

div.blog-featured-link-cell
{
	width:						288px;
}

/* Blog related article styling. */

div.blog-related-article-cell
{
	width:						288px;
}

div.blog-related-article-cell img,
div.blog-related-article-cell video
{
	width:						264px;
}

}

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

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

div.main-blog-thumbnails-container
{
	/* Bottom margin of -30px to nullify the bottom margin of the last
	 * 'main-blog-thumbnail-cell': */
	margin-bottom:				-30px;
}

div.main-blog-thumbnail-cell
{
	height:						260px;
	margin-bottom:				30px;
	max-width:					310px;
	padding:					14px;
}

div.main-blog-thumbnail-cell img,
div.main-blog-thumbnail-cell video
{
	width:						278px;
}

div.main-blog-thumbnail-title
{
	font-size:					14px;
	font-weight:				normal;
}

div.main-blog-thumbnail-button
{
	/* 'bottom' and 'right' to match thumbnail cell padding: */
	bottom:						14px;
	right:						14px;
}

div.main-blog-thumbnail-button button
{
	font-size:					12px;
}

/* Blog article view auxiliary area. */

div.blog-aux-author-image,
div.blog-aux-author-name,
div.blog-aux-article-date
{
	display:					block;
	text-align:					center;
}

div.blog-aux-author-image,
div.blog-aux-author-name
{
	padding:					0 0 5px 0;
}

div.blog-aux-article-date
{
	padding:					0 0 15px 0;
}

/* Blog featured link styling. */

div.blog-featured-link-cell
{
	width:						295px;
}

/* Blog related article styling. */

div.blog-related-article-cell
{
	width:						295px;
}

div.blog-related-article-cell img,
div.blog-related-article-cell video
{
	width:						271px;
}

}