html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    padding:0;
    border: 0;
    outline:0;
    font-size: 100%;
    font:      inherit;
    vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
    display:block;
}
ol,ul{
    list-style:none;
}
blockquote,q{
    quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
    content:’’;
    content:none;
}
/* remember to define visible focus styles! 
:focus{
    outline:?????;
} */

table{
    border-collapse:collapse;
    border-spacing:0;
}

/* This is Heydon Pickering's "lobotomized owl" selector.  It says
   that between two any adjacent siblings we should put a 1.5em
   margin. */
* + * {
    margin-top: 1.5em;
}

body
{
    margin: 0;
    background-color: #fff9ec;
    border-style: none;
    height: 100%;
    font-family: Georgia, serif;
    line-height: 1.5em;
    color: #282108;
    text-align: center;		/* ie workaround for lack of auto margins */
}

ins{
    text-decoration:none;
    color: #022f16;		/* dark green on light green*/
    background-color: #f4fff6;
}
del{
    text-decoration:line-through;
}

#all-content-box		/* center everything */
{
    margin-left: auto;
    margin-right: auto;
}

/********************************************************************
 *
 * SHADOW RULES
 *
 ********************************************************************/

header,
article,
section.sidebar,
footer,
.nav-regular {
    border: none;
    border-radius: 0.18em;
    z-index: 1;
    box-shadow: 0px -1px 3px 0px #e0e0e0, 0px 1px 2px 0px #c2c2c2; 
    box-shadow: 0px -1px 3px 0px rgba(0,0,0,0.12), 0px 1px 2px 0px rgba(0,0,0,0.24);
}

/* for comparison: background gray on google style page is #eeeeee; */

.depth1 {
    z-index: 1;
    box-shadow: 0px -1px 3px 0px #e0e0e0, 0px 1px 2px 0px #c2c2c2; 
    box-shadow: 0px -1px 3px 0px rgba(0,0,0,0.12), 0px 1px 2px 0px rgba(0,0,0,0.24); 
}
.depth2 {
    z-index: 2;
    box-shadow: 0px -3px 6px 0px #d6d6d6, 0px 3px 6px #c4c4c4;
    box-shadow: 0px -3px 6px 0px rgba(0,0,0,0.16), 0px 3px 6px rgba(0,0,0,0.23);
}
.depth3 {
    z-index: 3;
    box-shadow: 0px -10px 20px 0px #cfcfcf, 0px 6px 6px #c4c4c4;
    box-shadow: 0px -10px 20px 0px rgba(0,0,0,0.19), 0px 6px 6px rgba(0,0,0,0.23);
}
.depth4 {
    z-index: 4;
    box-shadow: 0px -14px 28px 0px #bfbfbf, 0px 10px 10px #c7c7c7;
    box-shadow: 0px -14px 28px 0px rgba(0,0,0,0.25), 0px 10px 10px rgba(0,0,0,0.22);
}
.depth5 {
    z-index: 5;
    box-shadow: 0px -19px 38px 0px #b3b3b3, 0px 15px 12px #c7c7c7;
    box-shadow: 0px -19px 38px 0px rgba(0,0,0,0.30), 0px 15px 12px rgba(0,0,0,0.22);
}

/********************************************************************
 *
 * ARTICLE
 *
 ******************************************************************/

article {
    padding: 1em;
}

/********************************************************************
 *
 * HEADER
 *
 ******************************************************************/

header
{
    margin: 0em auto;
    position: relative;
    background-color: transparent;
    font-family: Verdana, sans-serif;
    max-width: 55.2em; /* max width is the _inside_ box (not including margins, border and padding) */
    padding: 0.4em;    /* so including padding we get 56em */
    margin-left: auto;
    margin-right: auto;
}

/* clearfix for floating logo */
header:after {
    content: "";
    display: table;
    clear: both;
}

/* all the parts of the header should undo the lobotomized owl rule */
header * {
    margin-top: 0;
}

#site-logo {
    display: none;
    max-height: 8.5em;
    margin: 0 1em 0 0;
}

@media (min-width: 56em) {	/* things to change for users on workstation */
    #site-logo {
	display: inline-block;
	float: left;
    }
    header
    {
	margin: 1em auto;
    }
}

#headerbox-title {
    display: block;
    text-align: left;
    height: 30%;
    margin-left: 0.75em;
    font-size: 1em;
    line-height: 1.1em;
    font-family: Verdana, sans-serif;
    font-weight: bold;
}

/********************************************************************
 *
 * SEARCH BOX
 *
 ******************************************************************/
/* fixes inability of older versions of safari to allow css on search fields */
input[type="search"] {
    -webkit-appearance: textfield;
}

.search-form {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.search-text-input {
    margin: 0;
    color: #4a1613;
    border: none;
    background: transparent;
    font-family: verdana, sans-serif;
    font-size: 1em;
    padding: .25em 0em .25em .4em;
    max-width: 8em;
}
.search-button {
    margin: 0;
    color: #282108;
    border: none;
    background: transparent;
    font-family: verdana, sans-serif;
    font-size: 1em;
    padding: .25em .4em .25em .25em;
    -webkit-transition: font-size .25s ease, padding .25s ease;
    transition: font-size .25s ease, padding .25s ease;
}

/* Fixes submit button height problem in Firefox */
.search-button::-moz-focus-inner {
    border: 0;
}

/* style the placeholder text */
::-webkit-input-placeholder{	/* For WebKit browsers */
    color: #c3b89b;
    opacity: 1;
}
:-moz-placeholder{		/* For Mozilla Firefox 4 to 18 */
    color: #c3b89b;
    opacity: 1;
}
::-moz-placeholder{		/* For Mozilla Firefox 19+ */
    color: #c3b89b;
    opacity: 1;			/* Mozilla defaults to 0.5 for some reason */
}
:-ms-input-placeholder{		/* For Internet Explorer 10+ */
    color: #c3b89b;
    opacity: 1;
}

.search-button:hover {
    color: #662c27;
    font-size: 1.25em;
    padding: 0em .15em 0em 0.15em;
    cursor: pointer;
}
.search-button:active {
    font-size: 1.15em;
    padding: 0em .2em 0em 0.2em;
    cursor: pointer;
}
.search-button:focus {
    font-size: 1.25em;
    padding: 0em .15em 0em 0.15em;
}

/********************************************************************
 *
 * MENU
 *
 ******************************************************************/

#headerbox-menu-button {
    display: inline-block;
    margin-left: 0;
    margin-right: auto;
    padding: .25em;
    font-size: 1em;
    border: none;
    border-radius: 0.12em;
    -webkit-transition: -webkit-transform 1s ease, box-shadow .5s ease, font-size .25s ease, padding .25s ease;
    transition: transform 1s ease, box-shadow .5s ease, font-size .25s ease, padding .25s ease;
}

/* Checkbox is controlled by menu button, so is itself invisible. */
/* clip and opacity: 0 makes it still focusable (which is necessary so that the
   label (the menu button) can be focussed with the keyboard.  To make
   it unfocussable (which it should be when the menu button is
   invisible, it should also be made invisible.) */
#headerbox-menu-toggle {
    position: absolute;
    clip: rect(0,0,0,0);
    opacity: 0;
}

nav {
    text-align: right;
}

nav.nav-regular {
    display: inline-block;
    text-align: left;
    z-index: 2;
    line-height: 1.5em;
    margin: 0.5em 0;
    border: none;
    border-top-left-radius: 0; /* unround the left corners */
    border-bottom-left-radius: 0;
    background-color: #fff9ec;
    padding-left: 1em;
    width: 7em;
    position: absolute;
    top: 1.5em;
    left: -9em; /* starts off screen */
    -webkit-transition: left 0.5s ease;
    transition: left 0.5s ease;
}

#headerbox-menu-toggle:checked ~ nav.nav-regular {
    left: 0em; /* slide in*/
}

/* the trick here is that the second part: "nav
#headerbox-menu-button::after" is what we are giving the style for.
But it needs to be a sibling of #headerbox-menu-toggle:checked, so it
needs to start with the document element (in this case nav.nav-super),
and then we can specify what we are really after, which is the ::after
of the decendent of nav.nav-super. */
#headerbox-menu-toggle:checked ~ nav #headerbox-menu-button {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

@media (min-width: 56em) {	/* workstation screens */
    nav.nav-regular {
	display: block;
	box-shadow: none;
    }
}

.nav-super {
    display: block;
    width: 100%;
    vertical-align: top;
    line-height: 1.5em;
    margin: 0;
    white-space: nowrap;
}

.nav-super li {
    margin-left: 0.25em;
    display: inline-block;
}

.nav-super li:first-child {
    float: left;
}

.nav-regular li {
    margin: 0;
    line-height: 2em;
    padding: .25em;
}


#headerbox-menu-button:hover {
    font-size: 1.25em;
    color: #662c27;
    padding: 0em;
    cursor: pointer;
}
#headerbox-menu-button:active {
    font-size: 1.15em;
    color: #662c27;
    padding: .1em;
    cursor: pointer;
}
#headerbox-menu-toggle:focus ~ nav.nav-super #headerbox-menu-button {
    font-size: 1.25em;
    color: #662c27;
    padding: 0em;
}

.nav-regular .nav-selected {
    font-weight: bold;
}

/********************************************************************
 *
 * adapt menu for workstation width screens
 *
 *******************************************************************/

@media (min-width: 56em) {

    #headerbox-menu-button,
    #headerbox-menu-toggle /* make toggle unfocusable (since there's no visible menu button) */
    {
	display: none;
    }
    nav.nav-regular {
	display: block;
	font-size: 1.5em;
	background-color: transparent;
	border: none;
	width: auto;
	position: static;
	text-align: right;
    }
    nav.nav-regular li {
	display: inline;
    }
    .nav-regular li {
	background-color: transparent;
	border: none;
	line-height: 1em;
	padding: none;
	width: auto;
    }

}


/****************************************************************
 *
 * MAIN BODY
 *
 ***************************************************************/

.bodybox
{
    max-width: 36em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

article,
section.sidebar {
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.24); /* remove the top shadow*/
}

main
{
    display: inline-block;
    vertical-align: top;
    max-width: 35em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


.bodybox .sidebar
{
    display: inline-block;
    vertical-align: top;
    max-width: 35em;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 56em) {
    .bodybox {
	max-width: 56em;
	width: 56em;
	padding-left: 0;
	padding-right: 0;
	text-align: justify;
    }
    main
    {
    }
    .bodybox .sidebar
    {
	width: 18em;
	margin-left: 1em;	/* 1em is max, otherwise behavior gets strange just above 56em */
	margin-top: 0em;
    }
}

@media (min-width: 35em) {
    article, section.sidebar {
	box-shadow: 0px -1px 3px 0px rgba(0,0,0,0.12), 0px 1px 2px 0px rgba(0,0,0,0.24);
    }
}

/****************************************************************
 *
 * FOOTER
 *
 ***************************************************************/

footer {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    max-width: 56em;
    text-align: left;
}

footer p {
    display: inline-block;
    vertical-align: top;
    padding: 0.5em;
    margin: 0.5em;
    text-align: left;
}

#footer-logo {
    display: inline-block;
    vertical-align: top;
    height: 8em;
    min-width: 6.13em;
    margin: 0.5em;
}


@media (min-width: 56em) {
    footer {
	margin: 1em auto 0.5em auto;
    }
}

/****************************************************************
 *
 * "NORMAL" STUFF (almost always in <main>)
 *
 ***************************************************************/

p
{
    text-align: left;		/* for web justify doesn't really work */
    max-width: 35em;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

p + p {
    margin-top: 0.5em;
    text-indent: 1em;
}

.drop-cap {
    float: left;
    font-weight: bold;
    font-size: 4.5em;
    line-height: 1em;
    padding-right: 0.1em;
    color: #4a1613;
}

h1
{
    text-align: center;
    font-family: Verdana, sans-serif;
    font-weight: bold;
    color: #4a1613;
}
h2
{
    text-align: left;
    font-family: Verdana, sans-serif;
    font-weight: bold;
    color: #4a1613;
}
h3
{
    text-align: left;
    font-family: Verdana, sans-serif;
    font-weight: bold;
    color: #4a1613;
}
h4
{
    text-align: left;
    font-family: Verdana, sans-serif;
    font-weight: bold;
    color: #4a1613;
}

/********************************************************************
 *
 * DYNAMICALLY SIZE TITLE, HEADERS, and MENU ITEMS FOR SCREEN SIZE
 *
 ******************************************************************/

@media (min-width: 17em) {
    #headerbox-title {
	font-size: 1.3em;
    }
    h1 {
	font-size: 1.2em;
    }
    h2 {
	font-size: 1.1em;
    }
}
@media (min-width: 22em) {
    #headerbox-title {
	font-size: 1.6em;
    }
    .search-text-input {
	width: 8em;
    }
    h1 {
	font-size: 1.5em;
    }
    h2 {
	font-size: 1.3em;
    }
    h3 {
	font-size: 1.1em;
    }
}
@media (min-width: 28em) {
    #headerbox-title {
	font-size: 2em;
    }
    .search-text-input {
	width: 10em;
    }
    h1 {
	font-size: 1.5em;
    }
    h2 {
	font-size: 1.3em;
    }
    h3 {
	font-size: 1.1em;
    }
}
@media (min-width: 35em) {
    #headerbox-title {
	font-size: 2.4em;
    }
    .search-text-input {
	width: auto;
    }
    h1 {
	font-size: 2em;
    }
    h2 {
	font-size: 1.5em;
    }
    h3 {
	font-size: 1.3em;
    }
    h4 {
	font-size: 1.1em;
    }
}
@media (min-width: 44em) {
    #headerbox-title {
	font-size: 3em;
    }
    .search-text-input {
	width: auto;
    }
    h1 {
	font-size: 2em;
    }
    h2 {
	font-size: 1.5em;
    }
    h3 {
	font-size: 1.3em;
    }
    h4 {
	font-size: 1.1em;
    }
}

@media print {
    header {
	display: none;
    }
    body {
	background-color: #fff;
	color: #000;
    }
    p {
	text-align: justify;
	background-color: #fff;
	color: #000;
    }
    p.opening-para::first-letter {
	color: #000;
    }
    h1 {
	background-color: #fff;
	color: #000;
    }
    h2 {
	background-color: #fff;
	color: #000;
    }
    h3 {
	background-color: #fff;
	color: #000;
    }
    h4 {
	background-color: #fff;
	color: #000;
    }
}

/**********************************************
 *
 * COLOR SCHEME
 *
 *  hex      Lch
 *
 * #fff9ec 98  7  92  background
 * #c3b89b 75 16  92  75% gray
 * #80765c 50 16  92  50% gray
 * #453d25 26 16  92  base color
 * #282108 13 16  92  dark base color (Text)
 *
 * #0a406b 26 30 -88  contrast color (blue)
 * #0e4727 26 30 152  green complement
 * #662c27 26 30  32  brown complement
 *
 * #eaf1fe 95  7 -88  background contrast color (blue)
 * #f4fff6 99  6 152  background green complement
 * #fdedeb 95  6  32  background brown complement
 *
 * #00294a 16 24 -88  dark blue
 * #022f16 16 25 152  dark green
 * #4a1613 16 29  32  dark brown
 * 
 * #6baefe 70 46 -88  bright blue
 * #57bf7e 70 51 152  bright green
 * #c3aa4b 70 51  92  bright mustard
 * #ff897d 70 51  32  bright salmon
 *********************************************/