/* STANDARD TAG CLASSES */
body {
	background-image: linear-gradient(to bottom, #CCCCCC, #666666);
	background-attachment: fixed;

	font-family: Roboto, Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Noto Serif", serif;
	font-weight: bold;
}

pre { overflow-x: auto; }
code { font-family: "Noto Sans Mono", monospace; }


/* SELECTOR CLASSES */
#myHeader { height: 56px; }

#mySidebar {
	z-index: 3;
	width: 240px;
	top: 56px;
	background-image: linear-gradient(to bottom, #F0F0F0, #F0F0F0, #F0F0F0, #C0C0C0);
	font-size: 24px !important;
}

#myContent {
	margin-top: 56px;
	margin-left: 240px;
}


/* W3.CSS CLASS OVERRIDES */
.w3-content, .w3-auto { min-width: 288px; }
.w3-btn, .w3-button { font-family: "Noto Serif", serif; }
.w3-animate-opacity{animation:opac 0.5s}@keyframes opac{from{opacity:0} to{opacity:1}}
nav a.w3-bar-item { padding-left: 24px !important; }


/* MAIN CONTENT CLASSES */
main h1 {
	background-image: linear-gradient(90deg, #E0E0E0, transparent);
	padding: 0 0.5ex;
	color: #000000;
}
main h2 {
	border-top: 1px solid #333333;
	padding-top: 0.5ex;
}
main h2, main h3, main h4, main h5, main h6 { 
	color: #104010;
}

main a:link, main a:visited {
	color: #104010;
	font-weight: bold;
	text-decoration: underline;
}
main a:active, main a:hover {
	color: #666666;
	font-weight: bold;
	text-decoration: underline;
}

main ol { list-style-type: decimal; }
main ol li ol { list-style-type: lower-roman; }

main blockquote {
	margin-right: 16px;
	margin-left: 16px;
	border-left: 4px solid #008000;
	background-color: #FFFFFF;
	padding-right: 16px;
	padding-left: 16px;
}

main p code {
	background-color: #E0F8E0;
	padding-right: 0.25ex;
	padding-left: 0.25ex;
	font-weight: 500;
}


/* CUSTOM CLASSES */
p.dates {
	padding-left: 1em;
	text-align: left;
	font-family: "Noto Sans Mono", monospace;
	font-weight: bold;
}
p.dates span.dates-updated {
	white-space: nowrap;
	font-style: italic;
}

div.posts-list ul li {
	margin-bottom: 0.5ex;
	font-family: "Noto Sans Mono", monospace;
}
div.posts-list ul li a {
	font-size: larger;
	font-family: "Noto Serif", serif;
	font-weight: bold;
}


/* SMALL SCREEN */
@media (max-width: 600px) {
	#myFooter2 { text-align: center !important; }
}