/* Color names and their pairs so I don't forget later like a goober
White - background
Black - text (prefered)
Lime, Fuchsia (primary pair)
Aqua, Yellow (secondary pair)
Red, Gray
Blue, Silver
*/
@font-face {
	font-family: 'modenine-webfont';
	src: url('modenine-webfont.woff2') format('woff2'), url('modenine-webfont.woff') format('woff');
	}
	@font-face {
	font-family: 'damonhand-webfont';
	src: url('damonhand-webfont.woff2') format('woff2'), url('damonhand-webfont.woff') format('woff');
	}
	@font-face {
	font-family: 'bobcat-webfont';
	src: url('bobcat-webfont.woff2') format('woff2'), url('bobcat-webfont.woff') format('woff');
	}
body {
	background: white;
	font-family: modenine-webfont, lucida console, monospace;
	color: black;
	font-size: 1em;
}
/* Paragraph styles */
p {
	font-family: ModeNine Regular, modenine-webfont, lucida console, monospace;
	color: black;
	font-size: 1em;
	text-indent: 1em;
}
p.hand {
	font-family: bobcat normal, bobcat-webfont, cursive;
	font-size: 1.3em;
}
/* Text Fromat Styles */
strong, b {
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
	color: green;
}
em, i {
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
	color: navy;
}
u {
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
	color: maroon;
}
/* Layout Div Styles */
div {
	max-width: 100%;
	max-height: 100%
}
div.navtop {
	width: calc(100% - 10em - 24px);
	height: 1em;
	border-style: solid;
	border-color: cyan;
	border-width: 0px 0px 8px 0px;
	outline-style: solid;
	outline-color: white;
	outline-width: 0px;
	box-shadow: 0px 16px yellow;
	margin: 1px 1px 16px 18px;
	padding-bottom: 8px;
	padding-left: 1em;
	float: left;
	font-size: 1em;
}
div.navleft {
	width: 8em;
	float: left;
	height: 99%;
	border-style: solid;
	border-color: fuchsia;
	border-width: 0px 8px 0px 0px;
	outline-style: solid;
	outline-color: white;
	outline-width: 0px;
	box-shadow: 16px 0px lime;
	margin: 8px 1px 1px 1px;
	padding-right: 8px;
	font-size: 1em;
}
div.spaceleft {
	width: 16%;
	float: left;
	height: 16%;
	border-style: solid;
	border-color: lime;
	border-width: 0px 8px 0px 0px;
	outline-style: solid;
	outline-color: white;
	outline-width: 8px;
	box-shadow: 16px 0px lime;
	margin: 8px 1px 1px 1px;
	padding-right: 8px;
	font-size: 1em;
}
div.body {
	float: left;
	width: calc(100% - 10em - 24px);
	height: calc(100% - 3em);
	margin-left: 2em;
	overflow: auto;
	font-size: 1em;
}
div.navmobile{
	display: none;
	font-size: 1em;
}
div.wrapper{
	/* there's nothing here? */
}
div.thumb {
	width: 150px;
	height: 150px;
	background-color: white;
	overflow: visible;
	display: inline-block;
	text-align: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center;
	/* -webkit-filter: grayscale(100%) contrast(200%); /* Safari 6.0 - 9.0 */
	/* filter: grayscale(100%) contrast(200%); */
	border-color: teal;
	border-width: 0.25em;
	border-style: solid;
	margin-bottom: 0.5em;
}
div.thumb:hover {
	background-color: white;
	/* filter: sepia(100%) hue-rotate(180deg); */
	/* -webkit-filter: sepia(100%) hue-rotate(180deg); /* Safari 6.0 - 9.0 */
	-webkit-filter: grayscale(0%) contrast(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(0%) contrast(100%);
	border-color: aqua;
}
/* Mobile */
@media only screen and (max-width: 984px) {
  div.navtop {
	width: 100%;
	height: auto;
	border-style: solid;
	border-color: cyan;
	border-width: 0px 0px 8px 0px;
	outline-style: solid;
	outline-color: white;
	outline-width: 8px;
	box-shadow: 0px 16px yellow;
	margin: 1px 1px 16px 18px;
	padding-bottom: 8px;
	padding-left: 1em;
	float: none;
	display: block;
	font-size: 1.5em;
  }
  div.navleft {
	display: none;
}
  div.navmobile {
	width: 98%;
	float: none;
	height: auto;
	border-style: solid;
	border-color: fuchsia;
	border-width: 8px 0px 0px 0px;
	outline-style: solid;
	outline-color: white;
	outline-width: 8px;
	box-shadow: 0px -16px lime;
	margin: 8px 1px 1px 1px;
	padding-right: 8px;
	display: inline-block;
	font-size: 1.5em;
}
div.body {
	float: none;
	width: 99%;
	height: auto;
	margin-bottom: 2em;
	overflow: auto;
}
}
/* list styles */
ul {
	
}

ul.navleft {
	list-style-type: none;
	list-style-position: inside;
	margin-left: -2em;
}
li {
	
}
li.navleft {
	margin-bottom: 1em;
}
@media only screen and (max-width: 984px) {
	ul.navleft {
	list-style-type: none;
	list-style-position: inside;
	margin-left: 0em;
}
}
/* anchor styles */
a {
	
}
a.jump {
	display: none;
}
/* Link styles (ugh, awful) */
a:link {
  color: teal;
  text-decoration: underline;
}
a:visited {
  color: olive;
  text-decoration: underline;
}
a:hover {
  color: aqua;
  text-decoration: overline;
}
a:active {
  color: yellow;
  text-decoration: underline;
}
/* Headings */
h1 {
	border-style: solid;
	border-color: black;
	border-width: 0px 0px 8px 0px;
	outline-style: solid;
	outline-color: white;
	outline-width: 8px;
	box-shadow: 0px 16px grey;
	margin: 0em 0em 1em 0em;
	font-size: 2em;
	text-indent: 1em;
}
h2 {
	border-style: solid;
	border-color: black;
	border-width: 0px 0px 8px 0px;
	outline-style: solid;
	outline-color: white;
	outline-width: 8px;
	box-shadow: 0px 16px grey;
	margin: 0em 0em 1em 0em;
	font-size: 1.66em;
	text-indent: .66em;
}
h3 {
	border-style: solid;
	border-color: black;
	border-width: 0px 0px 8px 0px;
	outline-style: solid;
	outline-color: white;
	outline-width: 8px;
	box-shadow: 0px 16px grey;
	margin: 0em 0em 1em 0em;
	font-size: 1.33em;
	text-indent: .33em;
}
/* Images */
img {
	
}
img.thumb {
	max-height: 150px;
	max-width: 150px;
	background-color: white;
	text-align: center;
}
img.gallery {
	margin:auto;
	display: block;
	max-width: calc(100vw - 11em - 24px);
	max-height: calc(100vh - 4em);
}