/* Safari 4.0 - 8.0 */
	@-webkit-keyframes openNav {
		from {left: -200px;}
		to {left: 0px;}
	}
	/* Standard syntax */
	@keyframes openNav {
		from {left: -200px;}
		to {left: 0px;}
	}
	/* Safari 4.0 - 8.0 */
	@-webkit-keyframes closeNav {
		from {left: 0px;}
		to {left: -200px;}
	}
	/* Standard syntax */
	@keyframes closeNav {
		from {left: 0px;}
		to {left: -200px;}
	}
		/* Safari 4.0 - 8.0 */
	@-webkit-keyframes openPad {
		from {padding-left: 0px;}
		to {padding-left: 200px;}
	}
	/* Standard syntax */
	@keyframes openPad {
		from {padding-left: 0px;}
		to {padding-left: 200px;}
	}
	/* Safari 4.0 - 8.0 */
	@-webkit-keyframes closePad {
		from {padding-left: 200px;}
		to {padding-left: 0px;}
	}
	/* Standard syntax */
	@keyframes closePad {
		from {padding-left: 200px;}
		to {padding-left: 0px;}
	}
		
	body {
		font-family: 'Open Sans', sans-serif;
		font-size: 15px;
		margin: 0px;
	}

	#menu.open {
		background: #f6f6f6;					
		position: fixed;
		border-right-style: ridge;
		overflow: auto;
		-webkit-animation-name: openNav; /* Safari 4.0 - 8.0 */
		-webkit-animation-duration: .2s; /* Safari 4.0 - 8.0 */
		animation-name: openNav;
		animation-duration: .2s;
		width:200px;
		height:100%;
	}

	#menu.closed {
		background: #f6f6f6;					
		-webkit-animation-name: closeNav; /* Safari 4.0 - 8.0 */
		-webkit-animation-duration: .2s; /* Safari 4.0 - 8.0 */
		animation-name: closeNav;
		animation-duration: .2s;
		position: fixed;
		width: 100%;
		height: auto;
		top: 0px;
	}
	
	#menu.closed #inBar {
		display: block;
		font-size: 18px;
		border-bottom-style: ridge;
	}
	#menu.closed #inMenu {
		display: none;
	}	

	#menu.open #inMenu {
		font-family: 'Open Sans', sans-serif;
		font-size: 15px;
		margin: 30px 10px 10px 30px;
	}
	
	#menu.open #inBar {
		display: none;
		font-family: 'Open Sans', sans-serif;
		font-size: 18px;
		border-bottom-style: ridge;
		
	}
	
	#inBar ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	
	#inBar ul li {
		float: left;
		border-right: 1px solid #bbb;
	}
	
	#inBar ul li:last-child {
		border-right: none;
	}
	
	#inBar ul li a {
		display: block;
		text-align: center;
		padding: 8px 16px;
		text-decoration: none;
	}

	#content.open {
		background: #ffffff;
		max-width: 912px;
		margin: 0px 80px 0px 40px;
		padding-left: 200px;
		
		-webkit-animation-name: openPad; /* Safari 4.0 - 8.0 */
		-webkit-animation-duration: .2s; /* Safari 4.0 - 8.0 */
		animation-name: openPad;
		animation-duration: .2s;
	}

	#content.closed {
		background: #ffffff;
		max-width: 912px;
		margin: 0px 80px 0px 40px;
		padding-left: 0px;
		
		-webkit-animation-name: closePad; /* Safari 4.0 - 8.0 */
		-webkit-animation-duration: .2s; /* Safari 4.0 - 8.0 */
		animation-name: closePad;
		animation-duration: .2s;
	}	
	 
	#sub {
		font-family: 'Open Sans', sans-serif;
		font-size: 9px;
	}
	
	#date {
		font-size: 9px;
		font-weight: bold;
		color: rgb(145, 145, 145);
	}
	 
	#tags {
		font-size: 11px; 
		margin-top: -9px; 
		padding-left: 7px;
	}
	
	#showall {
		display: block;
		font-size: 13px; 
		margin-top: -30px;
		margin-left: 25px; 
		text-decoration:underline;
		cursor: pointer; 
		cursor: hand; 
	}
		
	#link {text-decoration:underline; cursor: pointer; cursor: hand;}
	#post {padding-left: 20px;}
	#info {padding-left: 20px;}
	#title {padding-left: 0px;}
		
	.footnote {
		position: relative;
		vertical-align: super;
		font-size: smaller;
	}
	
	.footnote .notebody {
		visibility: hidden;
		display: block;
		position: absolute;
		z-index: 9999;
		vertical-align: baseline;
		background-color: #f6f6f6;
		border: 1px solid;
		padding: 5px;
		word-wrap: break-word;   
		overflow: auto;
		min-width: 20em;
		top: 15px;
		left: 15px;
	}
	
	.footnote:focus .notebody {
		visibility: visible;
	}
	
	@media screen and (min-width: 992px) {
		#menu.closed {
			-webkit-animation-name: openNav; /* Safari 4.0 - 8.0 */
			-webkit-animation-duration: .2s; /* Safari 4.0 - 8.0 */
			animation-name: openNav;
			animation-duration: .2s;
			
			border-right-style: ridge;
			width: 200px;
			height: 100%;
		}
		#content.closed {
			-webkit-animation-name: openPad; /* Safari 4.0 - 8.0 */
			-webkit-animation-duration: .2s; /* Safari 4.0 - 8.0 */
			animation-name: openPad;
			animation-duration: .2s;
			padding-left: 200px;
		}
		#menu.closed #inBar {
			display: none;
		}
		#menu.closed #inMenu {
			font-size: 15px;
			margin: 30px 10px 10px 30px;
			display: block;
		}	
		#nav-icon3 {
			display: none;
		}
	}
	

	
	/* Hamburger Navicon, from https://codepen.io/designcouch/pen/Atyop */
	
	#nav-icon3 {
		width: 30px;
		height: 22px;
		position: relative;
		margin: 10px 10px 5px 10px;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		cursor: pointer;
	}

	#nav-icon3 span {
		display: block;
		position: absolute;
		height: 3px;
		width: 100%;
		background: black;
		border-radius: 4px;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}


	#nav-icon3 span:nth-child(1) {
		top: 0px;
	}

	#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
		top: 9px;
	}

	#nav-icon3 span:nth-child(4) {
		top: 18px;
	}

	#nav-icon3.open span:nth-child(1) {
		top: 18px;
		width: 0%;
		left: 50%;
	}

	#nav-icon3.open span:nth-child(2) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#nav-icon3.open span:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	#nav-icon3.open span:nth-child(4) {
		top: 18px;
		width: 0%;
		left: 50%;
	}