* {
    box-sizing: border-box;
}

 .hide-element {
    border: 0;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip; rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; 
} 

body {
background-color: #fdf8ed; 
color: #455a59;
font-family: "palatino linotype", garamond, serif ;
margin: 0;
}

h1 { 
margin-left:20%;
padding-left:20px;
}

/*contents menu styling - main and in-page */

.contents {
width: 25%;
margin-left:50%;
margin-bottom:80px
}

.contents > hr {
	margin-left: 0;
	margin-right: 0;
}

/* li for contents menus, h3 for subheadings */

h3.ital, li.ital {
	text-indent: 10%;
}

p.ital {
	margin-left:2em;
}

/*navigation menu styling */

a[href], .collapsible {
display: block;
padding: 6px 6px;
margin:0;
text-decoration: none;
background-color: #fdf8ed; 
color: #455a59;
border: none;
}

input, select {
padding: 6px 6px;
margin:0;
text-decoration: none;
background-color: #fdf8ed; 
color: #455a59;
border: 1px solid #455a59;
}

.active, .collapsible:hover, .collapsible:focus, input:hover, input:focus, select:hover, a:hover {
background-color: #455a59;
color: #fdf8ed;
}

.collapsible {
width: 100%;
text-align: left;
font-family: "palatino linotype", garamond, serif ;
font-size: 100%;
}

.collapsible:after {
content: "+";
float: right;
margin-left: 5px;
font-weight: bold;
}

.expanded:after {
content: "-";
}

.navigation {
width: 20%;
float: left;
text-align: left;
height: 100%;
position: fixed;
top: 0;
overflow: auto;
background-color: #fdf8ed;
}

.submenu {
display: none;
}

.submenu a
{
padding-left: 10%;
}

ul {
list-style-type: none;
margin:0;
padding:0;
width:100%;
}

input, select {
display: block;
width: 100%
}

/*main text pane styling */

.text {
margin-left:25%;
margin-bottom:80px;
clear: left;
float: left;
}

h4 > ol {
	margin-right: 5%;
}

ol {
list-style-type: none;
}

hr {
	margin-left: 5%;
	margin-right: 35%;
	clear: both;
	}
	
.text > hr {
		visibility: hidden;
	}

.text a {
display: inline-block;
padding: 1px 1px;
margin:0;
text-decoration: none;
font-weight:bold;
}

.text h3 a {
display: block;
padding: 8px 8px;
}

.text h3 {
	clear: both;
}

dl {
margin-left: 5%;
float: left;
clear: both;
}

dt {
font-weight: bold;
float: left;
clear: left;
padding: 0.5em;
}

dd {
float: left;
clear: right;
padding: 0.5em;
margin-left: 2em;
}

.ital, blockquote {
	font-style: italic;
}

/* landing page */

.fronttext {
margin-left:20%;
width:70%;
margin-bottom:80px;
clear: left;
float: left;
}

.fronttext > p, .fronttext > h2, .fronttext > h3, .fronttext > ol {
text-align: center;
margin-right: 0;
padding-right: 0;
margin-left: 0;
padding-left: 0;
}

.fronttext > h2, .fronttext > h3 {
	font-variant: small-caps;
}

img.front {
	border-radius: 50%;
	max-width: 500px;
    height: auto;
	display: block;
    margin-left: auto;
    margin-right: auto;
	border: 6px double #455a59;
    padding: 5px;
}

/* table style */

table {
	margin-right: 5%;
}

table, tr {
    border: 1px solid #455a59;
	border-collapse: collapse;
}

td, th {
	text-align: left;
	padding: 2px;
}

th {
	background-color: #455a59;
	color:  #fdf8ed;
	position: sticky;
	top: 0;
	vertical-align: bottom;
}

th > span {
	display: inline-block;
}

td {
	padding-right: 10px;
}

td > a {
	width: 100%;
	text-align: center;
}

th > span:hover {
color: #fffefc;
letter-spacing: 1px;
}

th > input {
	background-color: #455a59;
	color:  #fdf8ed;
	border-color:  #fdf8ed;
	border-style: solid;
	margin-top: 5px;
}

th > input:hover, th > input:focus {
background-color: #fdf8ed;
color: #455a59;
}

/*class to be toggled on and off by tableSort() to show appropriate version of table*/

.hidden {
	display: none;
}

/* reference styling */

.bib, .ref {
	color: #800000;
}

blockquote a.ref {
background-color: transparent;
}

a.bib, a.ref {
	font-weight: normal;
	font-style: italic;
	display: inline;
}

a.bib:hover, a.ref:hover, blockquote a.ref:hover {
background-color: #800000;
}

/* footnote styling */

a.footnote {
	vertical-align: super;
    font-size: smaller;
	font-style: normal;
}

a.footer {
	font-weight: normal;
}

a.footer:hover, a.bib_abbrev:hover {
	background-color: #fdf8ed;
	color: #455a59;
}
/* "note to" styling */

.note {
	font-variant: small-caps;
	font-family: garamond;
}

/* image styling */

/* right hand side thumbnail image pane styling */

.thumbnails {
width: 25%;
float:right;
position: relative;
top: 2.66em;
clear: right;
margin-left: 5%;
}

div.thumbnails > a {
	width: 90%;
	height: auto;
	clear: both;
	padding: 2%;
}

img {
	width: 100%;
}

p.caption {
	padding: 0 0;
	margin: 0 0;
	text-align: center;
	font-weight: normal;
	font-size: small;
}

/*full-width banner images */ 

.banner {
	position: relative;
	width: 100%;
	object-fit: cover;
	max-height: 25vh;
	overflow: hidden;
	margin-top: 2%;
}

.pale {
	color: #455a59;
	background-color: rgba(253, 248, 237, 0.5); 
}

.dark {
	color: #fdf8ed;
	background-color: rgba(69, 90, 89, 0.5);
}


/* right-aligned portrait images, in-text */ 

.right { 
	max-width: 30%;
	margin-left: 2%;
	margin-right: 2%;
	float: right;
	display: inline;
}

/* left-aligned portrait images, in-text*/ 

.left { 
	max-width: 30%;
	overflow: hidden;
	margin-right: 2%;
	float: left;
	display: inline;
}

/* end image stuff */

/* utility buttons */

.topjump {
    position: fixed;
    bottom: 0;
    right: 0;
	float: right;
	clear: right;
	z-index: 10;
	background-color: transparent;
}

.showNav {
	display:none;
	}

/* mobile styling */
	 
@media only screen and (max-width: 880px) {
	.text, .contents {
       margin-left: 0;
	   margin-right: 0;
	   width: 100%;
    }
	.navigation {
		width: 80%;
		display: none;
		max-width: 450px;
	}
	
	.showNav {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		padding: 16px 16px;
		margin:0;
		background-color:#455a59; 
		color:  #fdf8ed;
		border: none;
		width: 100%;
		font-size: 1.2em;
	}
	
	.thumbnails {
		display: block;
		width: 100%;
		position: static;
		padding-bottom: 5%;
	}
	
	div.thumbnails > a {
		display: block;
		max-width: 500px;
		margin: auto;
		}
	
	div.text > p, ol, blockquote, h3, h4, hr {
		padding: 0;
		margin-left: 5%;
		margin-right: 5%;
	}
	
	h1 {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 10%;
		padding: 5%;
		font-size: 1.5em;
	}
	
	.topjump {
		background-color:  #fdf8ed; 
		font-size: 1.2em;
	}
	
	.fronttext {
		margin-left: 20%;
		width:60%;
	}
	
	h1.pale, h1.dark {
		font-size: 3em;
		left: 0;
	}
	
	h3.pale, h3.dark {
		display: none;

}