* {
    box-sizing: border-box;
}

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

h1 { 
margin-left:20%;
margin-bottom: 75px;
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 {
	padding-left: 10%;
}

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

/*navigation menu styling */

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

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

a:hover, .active, .collapsible:hover, input:hover, input:focus, select: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%;
}

/*main text pane styling */

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

div.text > p, h3, h4, ol, dl, blockquote {
	margin-right: 20%;
	padding-right: 7.5%;
}

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;
width: 15%;
}

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

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

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

.fronttext > h1, .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;
}

/* concordance 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;
}

/*class to be toggled on and off by tableSort() to indicate which "sort" option is currently available */

/*.clickable {
	visibility: hidden; /*uses visibility: hidden instead of display: none to maintain structure of table heading cells, as otherwise the header text bobs up and down when sortTable() is activated */
} */	


/*Special formatting after word doc*/

/* bits Gaye's italicised */

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

/* reference styling */

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


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

a.bib:hover, 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;
}

/* END word doc formatting */

/*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;
}

/* utility buttons */

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

.showNav {
	display:none;
	}

.hide {
text-align: right;
}	
/* mobile styling */
	 
@media only screen and (max-width: 1000px) {
    .text, .contents {
       margin: 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%;
}

}