* { margin: 0; padding: 0; box-sizing: border-box; line-height: 1.2; }
img { max-width: 100%; height: auto; vertical-align: middle; border-radius: 3px; }
a { color: #369; }
a:hover { color: #036; }
h1, h2, h3, h4, h5, h6 { margin-bottom: 20px; }
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child { margin-bottom: 0; }

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }

:root {
	--outer-padding: .6rem; /* .6rem */
	--inner-padding: 1.2rem; /* 1.2rem */
	--background-color-1: #d9212d;
	--text-color-1: #fff;
	--background-color-2: #bbb;
	--text-color-2: #fff;
	--background-color-3: #ccc;
	--text-color-3: #000;
	--background-color-4: #ddd;
	--text-color-4: #111;
	--background-color-5: #eee;
	--text-color-5: #111;
	--background-color-6: #222;
	--text-color-6: #fff;
	--background-color-7: #444;
	--text-color-7: #fff;
	--background-color-8: #fff;
	--text-color-8: #222;
	--background-color-body: #231e54; /* Dark Blue from Yard Sign Design */
	--text-color-body: #eee;
	--background-color-wrapper: none;
	--text-color-wrapper: none;
	--background-color-item: #fff;
	--text-color-item: #222;
	--background-color-none: none;
	--text-color-none: none;
}

.row {
	display: grid;
	gap: var(--outer-padding);
	margin-bottom: var(--outer-padding);
}
.row:last-child { margin-bottom: 0; }

.cols1 { grid-template-columns: 1fr; }
.cols2 { grid-template-columns: repeat(2, 1fr); }
.cols3 { grid-template-columns: repeat(3, 1fr); }
.cols4 { grid-template-columns: repeat(4, 1fr); }
.cols5 { grid-template-columns: repeat(5, 1fr); }
.cols6 { grid-template-columns: repeat(6, 1fr); }

.cols2-12 { grid-template-columns: 1fr 2fr; }
.cols2-13 { grid-template-columns: 1fr 3fr; }
.cols2-14 { grid-template-columns: 1fr 4fr; }

.cols2-12r { grid-template-columns: 2fr 1fr; }
.cols2-13r { grid-template-columns: 3fr 1fr; }
.cols2-14r { grid-template-columns: 4fr 1fr; }

.cols3-121 { grid-template-columns: 1fr 2fr 1fr; }
.cols3-131 { grid-template-columns: 1fr 3fr 1fr; }
.cols3-141 { grid-template-columns: 1fr 4fr 1fr; }
.cols3-113 { grid-template-columns: repeat(2, 1fr) 3fr; }
.cols3-114 { grid-template-columns: repeat(2, 1fr) 4fr; }

.cols3-113r { grid-template-columns: 3fr repeat(2, 1fr); }
.cols3-114r { grid-template-columns: 4fr repeat(2, 1fr); }

.cols6-1221 { grid-template-columns: 1fr repeat(2, 2fr) 1fr; }

body {
	background-color: var(--background-color-body);
	color: var(--text-color-body);
	font-family: sans-serif;
	font-size: 20px;
	overflow-y: scroll;
}

#wrapper {
	width: 1200px;
	margin: auto;
	background-color: var(--background-color-wrapper);
	color: var(--text-color-wrapper);
	padding: var(--outer-padding);
}

.item {
	background-color: var(--background-color-item);
	color: var(--text-color-item);
	padding: var(--inner-padding);
	border-radius: 3px;
}

.color1 { background-color: var(--background-color-1); color: var(--text-color-1); }
.color2 { background-color: var(--background-color-2); color: var(--text-color-2); }
.color3 { background-color: var(--background-color-3); color: var(--text-color-3); }
.color4 { background-color: var(--background-color-4); color: var(--text-color-4); }
.color5 { background-color: var(--background-color-5); color: var(--text-color-5); }
.color6 { background-color: var(--background-color-6); color: var(--text-color-6); }
.color7 { background-color: var(--background-color-7); color: var(--text-color-7); }
.color8 { background-color: var(--background-color-8); color: var(--text-color-8); }
.nocolor { background-color: var(--background-color-none); color: var(--text-color-none); }

#nav a {
	color: #fff;
	text-decoration: none;
	display: block;
}

#nav a:hover { color: #ffa; }

#mainlogo { width: 90%; }
.showonsmall { display: none; }

/*** LARGE SCREENS ***/
@media screen and (max-width:1224px){
	#wrapper { width: 100%; }
}

/*** MEDIUM SCREENS ***/
/*@media screen and (max-width:1024px){*/
/*	.cols4 { grid-template-columns: repeat(2, 1fr); }*/
/*	.cols6 { grid-template-columns: repeat(3, 1fr); }*/
/*}*/

/*** SMALL SCREENS ***/
@media screen and (max-width:910px){
	.cols6 { grid-template-columns: repeat(2, 1fr); }
	.cols3,.cols5,.cols2-12,.cols2-13,.cols2-14,.cols2-12r,.cols2-13r,.cols2-14r,.cols3-121,.cols3-131,.cols3-141,.cols3-113,.cols3-114,.cols3-113r,.cols3-114r { grid-template-columns: 1fr; }
	.cols6-1221 { grid-template-columns: 1fr repeat(2, 4fr) 1fr; }
	#mainlogo { width:80%; }
	.hideonsmall { display: none; }
	.nopadonsmall { padding: 0; }
	.showonsmall { display: block; }
}

/*** EXTRA SMALL SCREENS ***/
@media screen and (max-width:374px){
	.cols2,.cols4,.cols6,.cols6-1221 { grid-template-columns: 1fr; }
}

/*** EXTRA CSS ***/

#page p { margin-bottom:20px; }
#page p:last-child { margin-bottom:0; }
#page ol, #page ul { margin-left:20px; }

#postContainer { margin-bottom:15px; }
#postContainer:last-child { margin-bottom:0; }
#postContainerPadding { padding:15px; background-color:#eee; border-radius:3px; }
#postContainerDescription { padding:10px; font-size:85%; font-style:italic; }
#postContainerStats { padding:0 10px; text-align:right; font-size:75%; }

#side ul, #side ol { list-style: none; }
#side li {  }
#side li a { text-decoration: none; }

.nopadding { padding: 0; }