/* General Styles */

p {
	margin-top: 0px;
	margin-bottom: 0px;
}

article {
	text-align: justify;
	margin-bottom: 0;
	max-width: 780px;
	margin: auto auto 0 auto;
	font-size: 12pt;
}

#img { margin: 2pt 5pt; }
img[align=left] { margin: 2pt 5pt 2pt 0pt; }
img[align=right] { margin: 2pt 0pt 2pt 5pt; }

div.captionedimage {
	display: inline-block;
	margin: 2pt 5pt;
	background-color: silver;
}

div.captionedimage div {
	clear: both;
	display: block;
	margin: 2pt 5pt;
	font-size: 10.3pt;
}

.big { font-size: 1.25em; }

.alert {
	font-size: 1.25em;
	text-align: center;
	border-bottom: solid black 1px;
}

address {
	margin-left: 12pt;
	font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
	text-align: center;
}
h1 {
	font-size: 1.5em;
}
h2 {
	font-size: 1.2em;
}

.notready {
	color: silver;
}
.notready div.captionedimage {
	color: gray;
}

br[clear="all"] {
	clear: both;
	height: 0;
	line-height: 0;
	margin-top: 0;
	margin-bottom: 0;
	display: block;
	content: "";
}

.fltrt {display:inline; float:right; margin: 0px 5px 10px 10px; clear:right;}
.fltlt {display:inline; float:left; margin: 0px 10px 10px 5px; clear:left;}

/* General Form Layout */
form th {
	font-weight: inherit;
	text-align: right;
}
form td input[type="submit"], form td select {
	width: 100%;
}

/* Specific Form Layout */
.searchForm input[type="search"] {
	width: 500px;
	width: calc(100% - 55pt);
	margin-right: 3pt;
}
.searchForm input[type="submit"] {
	width: 50pt;
}

/* Login Page Layout */
.loginRegisterBox {
	max-width: 600pt;
	margin: 0 calc(50% - 300pt);
	padding: 5pt;
	border: 3pt outset rgb(100, 100, 100);
	background-color: rgb(0, 51, 0);
}

.loginBox {
	min-height: 225pt;
	width: 37.75%;
	width: calc(40% - 10pt);
	float: left;
	padding: 75pt 5pt 0 5pt;
	background-color: rgb(136, 170, 136);
	text-align: center;
}

.registerInfo {
	min-height: 300pt;
	width: 57.75%;
	width: calc(60% - 13pt);
	float: right;
	padding: 0 5pt;
	background-color: rgb(204, 255, 204);
	text-align: justify;
}

/* Front Page Layout */
.articlePreviews {
	width: 75%;
	float: left;
}

.sideArticles {
	width: 23%;
	height: 100%;
	width: calc(25% - 11pt);
	float: right;
	border: solid 1px black;
	padding: 3pt;
}

.articlePreviews article {
	width: 32%;
	width: calc(33% - 10pt);
	float: left;
	padding: 3pt;
	margin: 2pt;
}

/* Flexbox is much better for this, but unfortunately isn't supported well yet.
 * 
 * Flex options:
 * Parent justify-content space-around gives the nicest layout, but moves the columns
 * for incomplete rows. space-between works for 1 item in row but fails for other incomplete.
 *
 * Article no basis (take specified width), no grow/shrink keeps all articles same
 * width and just uses flex to align and set number per row (if width not percent)
 * With a fixed basis, min and max width, and grow/shrink, all will be same width
 * except in an incomplete row, where may be wider. Number of items per row is
 * determined by the basis. If doing this, might as well use space-around too.
 */
.articlePreviews {
	/* Vendor-prefixes made worse by old and new models */
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-box-lines: multiple;
	-webkit-box-pack: justify;
	-webkit-box-align: stretch;
	display: -moz-box;
	-moz-box-orient: horizontal;
	-moz-box-direction: normal;
	-moz-box-lines: multiple;
	-moz-box-pack: justify;
	-moz-box-align: stretch;
	display: -ms-flexbox;
	-ms-flex-orient: horizontal;
	-ms-flex-direction: normal;
	-ms-flex-lines: multiple;
	-ms-flex-pack: justify;
	-ms-flex-align: stretch;
	display: box;
	box-orient: horizontal;
	box-direction: normal;
	box-lines: multiple;
	box-pack: justify;
	box-align: stretch;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	-webkit-justify-content: space-around;
	-webkit-align-items: stretch;
	-webkit-align-content: stretch;
	display: -moz-flex;
	-moz-flex-flow: row wrap;
	-moz-justify-content: space-around;
	-moz-align-items: stretch;
	-moz-align-content: stretch;
	display: -ms-flex;
	-ms-flex-flow: row wrap;
	-ms-justify-content: space-around;
	-ms-align-items: stretch;
	-ms-align-content: stretch;
	display: flex;
	flex-direction: row; /* box-orient: horizontal; box-direction: normal; */
	flex-wrap: wrap; /* box-lines: multiple */
	justify-content: space-around; /* closest is box-pack: justify */
	align-items: stretch; /* box-align: stretch */
	align-content: stretch; /* no box equivalent */
}
.articlePreviews article {
	/* Allow both growing and shrinking, base width 144pt */
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-ms-flex: 1;
	box-flex: 1; /* Both grow and shrink 1; uses width attribute */
	-webkit-flex: 1 1 144pt;
	-moz-flex: 1 1 144pt;
	-ms-flex: 1 1 144pt;
	flex: 1 1 144pt; /* box-flex: 1 */
	max-width: 216pt;
	min-width: 108pt;
}

.articlePreviews article header h1,
 .sideArticles article header h1 {
	font-size: 1.15em;
}
.articlePreviews article header h2,
 .sideArticles article header h2 {
	font-size: 1.10em;
}

/* Search Page Layout */
.searchResults article header h1 {
	text-align: left;
	display: inline;
	font-size: 1em;
}

.searchResults article p {
	margin-top: 3pt;
}

/* Sidebar Layout */
.sidebar {
	position: absolute;
	position: fixed;
	top: 0;
	left: 0;
	width: 160px;
	height: 100%;
	overflow: hidden;
	background-color: rgb(0, 51, 0);
	text-align: center;
	border-right: 1px solid rgb(0, 51, 0);
}
.main {
	padding-left: 160px;
	padding-top: 0;
}

#protectedArticleNote {
	height: 1.75em;
}
#protectedArticleNote p {
	position: fixed;
	margin: 0;
	padding: .25em;
	width: 100%;
	background-color: rgb(230, 230, 230);
	border-top-left-radius: 0.2em 0.25em;
	border-bottom-left-radius: 0.2em 0.25em;
	z-index: 100; /* Put above facebook box in Firefox */
}

.loading {
	position: fixed;
	margin: 0;
	padding: 0.25em;
	width: 100%;
	background-color: white;
	z-index: 101;
}

progress {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 80%;
	width: calc(100% - 200pt);
	border: inset 1px;
	
	/* Firefox, IE background */
	background-color: #888888;
}
/* Value */
progress::-moz-progress-bar { /* Firefox */
	background-color: #00AADD;
	background-image: repeating-linear-gradient(292.5deg, #00AADD 0pt, #11BBEE 15pt, #22CCFF 20pt, #11BBEE 25pt, #00AADD 40pt);
	transition: 0.25s;
}
progress::-webkit-progress-value { /* WebKit */
	background-color: #00AADD;
	background-image: repeating-linear-gradient(292.5deg, #00AADD 0pt, #11BBEE 15pt, #22CCFF 20pt, #11BBEE 25pt, #00AADD 40pt);
	transition: 0.25s;
}
/* Background */
progress:not([value]) { /* IE */
	background-color: #006699;
	background-image: repeating-linear-gradient(112.5deg, #00AADD 0pt, #11BBEE 15pt, #22CCFF 20pt, #11BBEE 25pt, #00AADD 40pt);
	animation: indeterminate-anim 1s linear 0s infinite normal;
}
progress:not([value])::-moz-progress-bar { /* Firefox */
	background-color: #006699;
	background-image: repeating-linear-gradient(112.5deg, #00AADD 0pt, #11BBEE 15pt, #22CCFF 20pt, #11BBEE 25pt, #00AADD 40pt);
	animation: indeterminate-anim 1s linear 0s infinite normal;
}
progress::-webkit-progress-bar { /* WebKit */
	background-color: #888888;
}
progress:not([value])::-webkit-progress-bar {
	background-color: #006699;
	background-image: repeating-linear-gradient(112.5deg, #00AADD 0pt, #11BBEE 15pt, #22CCFF 20pt, #11BBEE 25pt, #00AADD 40pt);
	-webkit-animation: indeterminate-anim 1s linear 0s infinite normal;
}
@-webkit-keyframes indeterminate-anim {
	from {
		background-position: -40pt;
		background-color: #006699;
	}
	to {
		background-position: 0pt;
		background-color: #0088BB;
	}
}
@keyframes indeterminate-anim {
	from {
		background-position: -40pt;
		background-color: #006699;
	}
	to {
		background-position: 0pt;
		background-color: #0088BB;
	}
}

.sidebar nav menu {
	list-style-type: none;
	padding: 0;
	margin-top: 0;
	margin-bottom: .15em;
}

.sidebar nav menu li {
	width: 100%;
	background-color: rgb(136, 170, 136);
}
.sidebar nav menu li.first {
	padding-top: .2em;
}
.sidebar nav menu li.last {
	padding-bottom: .2em;
}
.sidebar nav menu li.first.last {
	padding-top: .5em;
	padding-bottom: .5em;
}

.sidebar nav menu hr {
	height: .15em;
	padding: 0px;
	margin: 0px;
	border: 0;
}

/* Header Layout */
.skipnav {
	position: absolute;
	top: -21pt;
	left: 5pt;
	z-index: 100;
	height: 15pt;
	background-color: red;
	border-radius: 0 0 5pt 5pt;
	padding: 3pt;
	transition: 1s ease-in;
}
.skipnav:focus {
	top: 0;
	transition: 0.25s;
}

#headerImg {
	width: 400px;
	width: calc(100% - 220px - 140pt);
	max-width: 585px;
	height: auto;
}

#headerSocialMedia {
	float: right;
	width: 220px;
	padding-left: 5pt;
}

#headerDateSearch {
	float: right;
	width: 130pt;
	padding-left: 5pt;
	text-align: right;
}

#headerDateSearch input {
	width: 100%;
}

/* Footer Layout */
.permalink {
	font-size: 0.75em;
	color: inherit;
}

.copyright {
	font-style: italic;
	text-align: center;
}

.ad234x60 {
	width: 234px;
	height: 60px;
	float: left;
}

.adsbygoogle {
	display: inline-block;
	width: 234px;
	height: 60px;
}