/* Reset CSS courtesy of Deathhadow of http://deathshadow.com/ */
/* Check colors with http://webaim.org/resources/contrastchecker/ before using */

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}

hr {
	display:none;
	/*
		HR in my code are for semantic breaks in topic/section, NOT
		style/presenation, so hide them from screen.css users
	*/
}

@media (max-width:480px) {
	/*
		Some older small screen devices will try to force a text-size
		adjustment regardless of our viewport meta, this overrides that
		so it obeys what we tell it. This is in a max-width query so that
		we don't send this to desktop safari, as it breaks zooming there...
		Even though it does NOT break zooming in mobile Safari?
	*/
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}

@media
	(-webkit-min-device-pixel-ratio:2) and (min-width:1600px), 
	(min-resolution:172dpi) and (min-width:1600px)
{
	/*
		Really high dpi non-apple devices will not lie to us about their
		screen size, nor do they start with a different default size. 
		Kindle Fire HDX and most android devices labelled "HDX" need this
		so our content scales to their really tiny display size properly.
		
		I'm still investigating better ways of handling this, including the 
		possibility of no longer using a viewport meta... the result may end
		up more complex
	*/
	html { font-size:200%; }
}
/* End CSS reset block */

body{
	max-width: 48em;
	margin: auto;
	font-family: "Segoe UI", helvetica, sans-serif;
}

h1{
	text-align: center;
	font-family: "Segoe UI";
	font-weight: 400;
	font-size: 3em;
	margin-bottom: 1em;
}

h2{
	text-align: center;
	font-family: "Segoe UI";
	font-weight: 400;
	font-size: 2em;
	margin-top: 1em;
}

h4{
	margin-top: 1em;
}

p{
	margin-top: 1em;
	line-height: 1.5em;
	font-size: 1.05em;
}

#widthWrapper{
	max-width: 48em;
	margin-left: 2em;
	margin-right: 2em;
	text-align: justify;
}

ul{
	
}

.navbar{
	text-align: center;
}

.navbar li{
	list-style-type: none;	
	display:inline;
	overflow: hidden;
}

li>a{
	display:inline-block;
	color: white;
	background-color: #666666;
	text-align: center;
	padding: 0.5em 1em;
	margin: 0.1em;
	text-decoration: none;
	min-width: 6em;
	font-size: 1.1em;
}

li>a:hover,
li>a:active{
	background-color: #111111;
}

#mainPageContent li{
	margin-top: 1em;
	list-style-type: disc;
}

.header{
	
}

.topNav{

}

.body{
	min-height: 20em;
}

.footer{
	margin-top: 5em;
}

.bottomNav{
	
}