body {
	/*font-family:"Times New Roman", serif !important;*/
	font-size: 20px !important;
}
h1, h2, h3, h4, p {
	font-weight: 300 !important;
}
.current {
	background-color: lightgray;
	color: white;
}
a {
	color:black;
	text-decoration:none;
	font-size:2em;
	margin: 0;
}
.nav li a {
	margin: 0;
	padding: 0 .5em;
	color: gray;
	line-height: 1;
}
a:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
	color: gray;
}
a.current:hover {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	color: white;
	cursor:default;
}
a.siteTitle:hover {
	opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	color:inherit;
}
h1, h2{
	text-align:center !important;
}
h1.siteTitle {
	font-size:3.2em;
	/*color: white;*/
	margin: 0;
	line-height: normal;

	/*text-shadow: 3px 4px 13px rgba(0, 0, 0, 1);*/
}
h2 {
	font-size:2.5em;
	margin: .1em 0;
}
h3 {
	font-size:2em;
}
.nav {
	list-style: none;
}
.nav {
	padding: 0;
	margin:  0;
}
.nav li {
	display: inline-block !important;
	margin: .5em 0 !important;
}
#menuIcon {
	display:none;
	width: .8em;
	height: .6em;
	background: white url(../images/menu-icon.png) center no-repeat;
	background-size:cover;
	position:absolute;
	top: .8em;
	left: .35em;
}
/*a:hover #menuIcon {
	opacity: 0.5;
    filter: alpha(opacity=50);
}*/

@media only screen and (max-width : 517px) {
	h1.siteTitle {
		font-size: 4em;
		margin: .1em 0 -.2em 0 !important;
	}
	#menuIcon {
		display:inline-block;
	}
	#navDiv {
		position: absolute;
		width: 14%;/*larger than with of screen if use 100% for some reason so not centered*/
		height: 5%;/*want this to have some size so curser can go to menu without it dropping out*/
		left:0;
		top: 0;
		/*background: rgba(0,0,0,.4);
		border-color:black;
		border-style:double;*/
	}
	/*need the important designator since bootstrap has this same class i think*/
	nav #navDiv, nav:active #navDiv { 
		display: none !important;
		z-index:100 !important;
	}
	#navDiv ul {
		display: inline-block;/*centers it!?*/
		margin-top: 20%;
		padding: 1%;
		background: rgba(255,255,255,.95);
		width: 600%;
		border-radius: 4px 4px 4px 4px;
		box-shadow: 2px 2px 20px rgba(0,0,0,.5);
		
	}
	nav li {
		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;
	}
	nav li a{
		color: black;
	}
	nav:hover #navDiv {
		display: block !important;
	}

	/*didn't work
	nav:hover + main {
		pointer-events: none;
	}*/
}
@media only screen and (max-width: 400px){
	h1.siteTitle {
		font-size:3em;
	}
	#menuIcon {
		top: .5em;
	}
}