/* Home page */

div#home-page-container {
	display: flex;
	align-items: flex-start;
	flex-wrap: row nowrap;
	justify-content: center;
	margin: 0 -6px;
}

div#home-page-container > div, div#home-page-container > main {
	box-sizing: border-box;
	margin: 0 6px 6px 6px;
	max-width: 100%;
}

div#home-page-container > div {
	flex: 0 0 auto;
	margin-left: 6px; margin-right: 6px;
}

/* Random review container on home page */

div#home-page-container aside {
	margin-bottom: 1em;
}

#random-review-container h2 {
	font-size: 100%;
	margin-top: 0;
	text-align: center;
}

#random-review-container p:last-of-type { margin-bottom: 0; }

/* Side navigation bar on home page */

#side-navbar {
	margin: 0 12px;
	width: 258px;	/* = 282px for random review container - 2*12px for margins */
}

#side-navbar ul {
	display: table;
	margin: 0;
	padding: 0;
	width: 100%;
}

#side-navbar li {
	display: table-row;
}

#side-navbar ul > li:first-of-type {
	margin-top: 0;
}

#side-navbar ul > li:last-of-type {
	margin-bottom: 0;
	border-bottom: none;
}

#side-navbar ul > li > a {
	display: table-cell;
	padding: 8px 0;
	vertical-align: middle;
	border-top: solid #303030 2px;
}

#side-navbar ul > li:first-of-type > a {
	border-top: none;
	padding-top: 0;
}

#side-navbar ul > li:last-of-type > a {
	padding-bottom: 0;
}

/* Hide the 'random review' link by default */

li#random-review-link {
	display: none;
}

/* News container on home page */

div#home-page-container > main {
	flex-grow: 1;
	flex-shrink: 1;
	margin: 0 6px 6px 6px;
}

/* Clearfix to ensure all floating elements fit inside a news container */

div.news-article::after {
	clear: both;
	content: '';
	display: block;
}

div.news-article {
	background-color: #242424;
	border-radius: 12px;
	clear: both;
	margin: 16px 0 16px 0;
	max-width: 100%;
	padding: 12px;
	position: relative;
	text-align: justify;
}

div.news-article:first-of-type {
	margin-top: 0;
}

div.news-article:last-of-type {
	margin-bottom: 0;
}

div.news-article h3, div.news-article h4, div.news-article h5, div.news-article h6 {
	color: white; margin: 0;
}

div.news-article h3 {
	font-size: 125%; 
}

div.news-article h4, div.news-article h5, div.news-article h6 {
	font-size: 117%;
}

div.news-article h2 {
	color: #38c8ff;
	font-size: 150%;
	line-height: 1.25;
	margin: 0 0 0.5em 0;
}

div.news-article ul {
	margin-top: 0; margin-bottom: 0;
	list-style-position: inside;
	padding-left: 0;
}

div.news-article p.unpublished-note {
	display: table;
	background-color: #383838;
	border-radius: 6px;
	margin: 1em 0;
	padding: 6px;
}

/* Hide the random review container and move the navigation bar on the
   left of the screen to the top, above the news articles */

@media screen and (max-width: 1023px) {
	div#home-page-container aside {
		display: none;
	}

	div#home-page-container {
		align-items: stretch;
		flex-flow: column wrap;
	}

	#side-navbar {
		margin: 0;
		width: 100%;
	}

	#side-navbar ul {
		display: block;
		margin-bottom: 6px;
		text-align: center;
	}

	#side-navbar ul > li {
		display: inline-block;
		white-space: nowrap;
	}

	#side-navbar ul > li::after {
		content: ' |';
	}
	
	#side-navbar ul > li:last-of-type::after {
		content: '';
	}

	#side-navbar ul > li > a {
		display: inline;
		border-top: none;
		padding: 0;
	}

}