.clearfix {clear:both}

/* LAYOUT: sidebar+article, sidebar appears under <article> on mobile */

html, body {height:100%; margin:0;}
layout, sidebar, article {display:block;}



/* --- MOBILE DEFAULTS --- */

layout {display:flex; flex-direction:column; min-height:100vh}
sidebar {width:auto; flex-shrink:0; order:2; align-self:center}
article {order:1}  /* min-width is supposed to fix wide tables */
footer {} /* Not part of <layout>, b/c on mobile, the sidebar will appear under the <article>, which would make the footer appear *above* the sidebar. */

/* --- DESKTOP --- */
@media (min-width:700px) {
    layout {flex-direction:row; align-items:flex-start}
    sidebar {width:250px; order:0;}
    article {order:0;}
}



/* common to mobile + desktop */

article {font:16px/180% Verdana; padding:10px}

h1 {color:sienna; text-align:center; font:42px Georgia}
H2,H3 {margin-top:48px; font-family:Arial; line-height:130%}
h2 {font-size:34px; color:green}
h3 {color:navy; font-size:24px; background:whitesmoke; padding:5px; margin-left:-5px}
#update {text-align:right !important; font-style:italic; text-indent:0px !important}
#update:after {font-size:80%; color:gray; display:block; content:"all articles are by Michael Bluejay unless otherwise noted"}
#note {background:lightyellow; border:1px solid silver; border-radius:12px; padding:8px; width:fit-content; margin:auto}
cite {font-size:85%; color:dimgray; font-style:normal}
cite a {color:dodgerblue}

a:hover{background:lightskyblue;}
.deadlink {color:mediumblue; text-decoration:line-through underline}
.dead {text-decoration:line-through}
.floatOrNot {background:lightyellow; border:1px solid silver; border-radius:9px; padding:8px}
.heading {font-size:15px; border-bottom:1px solid gray; color:maroon}
.basicTable {border-collapse:collapse; font:14px Arial}
.basicTable tr:first-child td {background:black; color:orange; font:bold 24px Arial; border-radius: 12px 12px 0px 0px; text-align:center}
.basicTable tr:nth-child(2) td {background:gainsboro; font-weight:bold}
.basicTable td {border:1px solid silver; padding:4px 8px; text-align:center}
.basicTable td:first-child {text-align:left}




.s9 {font-size:9px}
a.noundies:link {text-decoration: none}
a.noundies:visited {text-decoration: none;}
.yeller {color:yellow}

.tab {border-collapse:collapse; border:1px double gray; font:12px Arial}
.tab .title {background:black; color:goldenrod; font-size:16px}
.tab .heads {background:gainsboro; font-weight:bold}
.tab td {border:1px solid silver; padding:4px}


/* mobile default */

img {max-width:95%; margin:auto}
.floatOrNot {display:block; width:90%; margin:auto}
iframe {max-width:100%}


/* desktop */

@media screen and (min-width:550px) {
	body { margin:0px; background:wheat}
	sidebar {padding-left:20px; align-self: flex-start}
	pageContents {display:block; max-width:1200px; background:white; border:1px solid silver; border-radius:9px; padding:20px; margin:12px auto; box-shadow:8px 8px 10px 2px gray}
	  /* Holds everything: masthead + layout (which itself contains sidebar + article) + footer */
	article p {margin-left:25px}
	article table p {margin-left:0px}
	ul,ol {margin-left:40px}
	.floatOrNot {margin-left:12px; float:right; width:300px; font-size:90%; text-align:center}
}