html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html{

	scroll-behavior:smooth;
}



a {
	line-height:1.5em;
}

strong {
	font-weight:bold;
}


h1 {
    color:black;
    font-family:"Times New Roman", Times, serif;
    font-size:300%;
	line-height:1.5em;
	
}

.border {
	border:#003;
	border-style:inset;
}

h2 {
    color:black;
    font-family:"Times New Roman", Times, serif;
    font-size:200%;
	line-height:1em;
	font-variant:small-caps;
	line-height:1.5em;
	font-weight:bold;
}

h3 {
    color:blue;
    font-family:"Arial", sans serif;
    font-size:2em;
	line-height:1.5em;
	font-weight:bold;
}

h4 {
	color:black;
    font-family:"Arial", sans serif;
    font-size:1em;
	line-height:1em;
	font-weight:bolder;
	
}

li.zip { background: gray; }
li.zip:nth-child(odd) { background:#09F ; }


.space {
	color:black;
    font-family:"Arial", sans serif;
    font-size:1.2em;
	line-height:1.5em;
	font-weight:bold;
}

h5 {
	color:black;
    font-family:"Arial", sans serif;
    font-size:1em;
	line-height:1em;
	font-weight:bolder;
	
}

li {
				
	font-style:italic;
	padding-bottom:15px;
}


p.caption {
	font-size:1em;
	font-style:italic;
}

.header {
	background-color: #ffffff;
}


.image.featured4 {		
	height:auto;
	max-width: 600px;
	width:80%;
	display:block;
	margin:auto;
	border:none;
	
}
.image.featured3 {		
	height:auto;
	border:none;
	max-width: 600px;
	width:80%;
	display:block;
	margin:auto;
	
}


@media screen  and (min-width: 1001px) {
	.outer {
		width:1000px;
		margin:0 auto;
	}

	body {
		margin:0.0%;
		padding:0;
		border:0;			/* This removes the border around the viewport in old versions of IE */
		width:100%;
		background-color:white;		/* Minimum width of layout - remove line if not required */
						/* The min-width property does not work in old versions of Internet Explorer */
		font-size:90%;
		font-family:Arial, Helvetica, sans-serif;
		line-height:1.5;
	}
	a {
		color:#369;
	}
	a:hover {
		color:#fff;
		background:#369;
		text-decoration:none;
	}

	h4 {
		font-size:16px;
		margin: 0; padding: 0;
	}

	h5 {
		font-size:15px;
		margin: 0; padding: 0;
	}

	p {
		margin:.4em 0 .8em 0;
		padding:0;
	}
	
	#ads img {
		display:block;
		padding-top:10px;
	}

/* 'widths' sub menu */
	#layoutdims {
		clear:both;
		background:#eee;
		border-top:4px solid #000;
		margin:0;
		padding:6px 15px !important;
		text-align:right;
	}

	#menu ul, #menu li {
		line-height:22px;
		text-align:left;
		font-size:14px;
	}
/* menu starts here */

	#menu {
		list-style:none;
		width:auto; 
		margin:0 auto;
		height:50px;
		padding:5px 70px;
		/* rounded corners for different browser support */
		
		border-radius:5px 5px 0 0;
		-moz-border-radius:5px 5px 0 0;
		-webkit-border-radius:5px 5px 0 0;
		/* css3 gradient */
		background:#333333;
		background: -moz-linear-gradient(#444444, #111111) repeat scroll 0 0 transparent;
		/* css3 borders */
		
		border: 1px solid #9C9C9C;
		box-shadow:inset 0px 0px 1px #e8edf0;
		-moz-box-shadow:inset 0px 0px 1px #e8edf0;
		-webkit-box-shadow:inset 0px 0px 1px #e8edf0;
		z-index:9999;
	}
/* tab starts here */

	#menu li {
		float:left;
		display:block;
		position:relative;
		text-align:center;
		padding:4px 10px;
		margin:7px 30px 0 0;
		border:none;
		z-index:9999;
		font-size:14px;
	}
	#menu li:hover {
		border:1px solid #b7b7b7;
		padding:4px 9px;
		/*rounded corners  */
		
		border-radius:5px 5px 0 0;
		-moz-border-radius:5px 5px 0 0;
		-webkit-border-radius:5px 5px 0 0;
		/* css 3 gradient */
		background:#fff;
		background: -moz-linear-gradient(center top, #FFFFFF, #EDEDED) repeat scroll 0 0 transparent;
		background:-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EDEDED));
	}
	#menu li a {
		font-size:14px;
		color: #999999;
		display:block;
		outline:0;
		text-decoration:none;
	}
	#menu li:hover a {
		color:#161616;
	}
/* menu containers here  */

	#menu .menu-container-1,#menu .menu-container-2,#menu .menu-container-3,#menu .menu-container-4 {
		margin:4px auto;
		float:left;
		position:absolute;
		left:-999em;
		text-align:left;
		padding:10px 5px;
		border:1px solid #b7b7b7;
		border-top:none;
		/* rounded corners */
		
		border-radius:0 5px 5px 5px;
		-moz-border-radius:0 5px 5px 5px;
		-webkit-border-radius:0 5px 5px 5px;
		/* gradient */
		background:#444444;
		background: -moz-linear-gradient(center top, #444444, #111111) repeat scroll 0 0 transparent;
		background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));
		z-index:9999;

	}
	#menu .menu-container-1 {
		width:140px;
	}
	#menu .menu-container-2 {
		width:280px;
	}
	#menu .menu-container-3 {
		width:420px;
	}
	#menu .menu-container-4 {
		width:560px;
	}
	#menu li:hover .menu-container-1, #menu li:hover .menu-container-2, #menu li:hover .menu-container-3, #menu li:hover .menu-container-4 {
		top:auto;
		left:-1px;
		z-index:9999;
	}
/* columns ici */

	#menu .column-1, #menu .column-2 {
		display:inline;
		float:left;
		position:relative;
		margin:0 5px;
		z-index:9999;
	}
	#menu .column-1 {
		width:130px;
	}
	#menu .column-2 {
		width:260px;
	}
	#menu .column-3 {
		width:280px;
	}
	#menu .column-4 {
		width:520px;
	}
	/* right menu */

	#menu .menu-right {
		float:right;
		margin-right:0px;
	}
	#menu .menu-right1 {
		float:right;
		margin-right:100px;
	}
	#menu li .align-right {
		/*rounded corners */
		
		border-radius:5px 0 5px 5px;
		-moz-border-radius:5px 0 5px 5px;
		-webkit-border-radius:5px 0 5px 5px;
	}
	#menu li:hover .align-right {
		left:auto;
		right:-1px;
		top:auto;
	}
	/* menu h2, h3, p, etc.... */

	#menu p, #menu h2, #menu h3, #menu ul li {
		line-height:21px;
		font-size:12px;
		text-align:left;
	}
	#menu p {
		line-height:18px;
		margin-bottom:10px;
		color:#F2E8E8;
	}
	#menu h3, #menu h2 {
		font-size:11px;
		margin:7px 0 14px 0;
		padding-bottom:5px;
		text-transform:uppercase;
		color: #999999;
		text-align:center;
		
	}
	#menu li:hover div a {
		box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
		color: #666666;
		font-size: 14px;
		padding-left: 6px;
	}
	#menu li:hover div a:hover {
		background: -moz-linear-gradient(#04ACEC, #0186BA) repeat scroll 0 0 transparent;
		background:-webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA));
		color: #FAFAFA;
		background:#04ACEC;
	}
	#menu li ul {
		box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
		list-style:none;
		padding:0;
		margin-bottom:12px;
	}
	#menu li ul li {
		float: none;
		font-size: 14px;
		line-height: 24px;
		margin: 0;
		padding: 0;
		position: relative;
		text-align: left;
		width: 150px;
	}
	#menu li ul li:hover {
		background: none;
		border: medium none;
		margin: 0;
		padding: 0;
	}
	/* login here */

	#menu .form {
		margin:10px 0 0 45px;
	}
	#menu input {
		color:#e9e9e9;
		font-size:12px;
		outline:0 none;
		padding:9px;
		/* gradient */
		background:#6e6e6e;
		background:-moz-linear-gradient(top, #888, #575757);
		background:-webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
		/* css3 borders */
		border:1px solid #555;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		/* css3 shadow effect */
		-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.1);
		-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 8px;
		box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 8px;
	}
	#menu input:focus {
		background: none repeat scroll 0 0 #313131;
	}
	#menu input:hover {
		border-color: #000000;
	}
	#menu .submit input {
		background: -moz-linear-gradient(center top, #444444, #111111) repeat scroll 0 0 transparent;
		background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));
		border-radius: 10px 10px 10px 10px;
		box-shadow: 0 0 1px #EDF9FF inset;
		color: #FADDDE;
		padding: 9px;
		width: 90px;
	}
	#menu .submit input:hover {
		background: -moz-linear-gradient(center top, #444444, #3D3A3A) repeat scroll 0 0 transparent;
		background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#3D3A3A));
		cursor: pointer;
	}
	#menu .submit input:active {
		background: -moz-linear-gradient(center top, #444444, #111111) repeat scroll 0 0 transparent;
		background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));
		border: 1px solid #9C9C9C;
		color: #9C9C9C;
	}

	.menuPFW {
		max-width:1500px;
	}


	#footer {
		width: 100%;
		margin: auto;
		height:100%;
		background-color: #848482;
		background-color:#848482;
		
	} 

	.footerFloat {
		width: 23%;
		float: left;
		background-color: #848482;
		color: white;
		font-size:14px;
		padding:6px;
		
	}


	.footerFloat a {
		color: white;
		text-decoration:none !important;
		font-size:14px;
	}

	.footerFloat h4 {
		color: black;
		text-decoration:none;
		font-size:14px;
		padding: 9px;
	}


	div.floating-menu {
	position:fixed;
	left:90%;
	top:50%;
	background:#fff4c8;
	border:1px solid #ffcc00;
	width:150px;
	z-index:100;
	}

	div.floating-menu a, div.floating-menu h3 {
	display:block;margin:10 0.5em;
	}



	#books h1 {
		font-size:24px;
		font-family:Arial, Helvetica, sans-serif;
		
	}

	iframe {
		display:block;
		background-color: #777;
		
	}

	#content {		
			overflow:hidden;
			position:relative;
			min-height: 100%;
			margin: 0 auto -200px;
	}
	
	.nav {
		display:none;
		visibility:hidden;
	}
	
	
	.content {
		
		
		width:100%;	
		max-width:100%;
		float: left;
		overflow:hidden;
	}
	
	#spacer {
		display:none;
		visibility:hidden;
	}
	
	.booksShow {
		width:26%;		
		float: left;	
  		background: #777;
		margin-bottom: -5000px; /* any large number will do */
  		padding-bottom: 5000px; 
		overflow:visible;
		height: 1vh;
		
	}
	
	.fileShow{
		width:73%;	
		float: right;
		overflow: hidden;
		color:black;
		
	}
	
	.slide {
		width:100%;	
		left:auto;
		min-height:100%;
	}
	
	#sidebar{
		display:none;
		visibility:hidden;
	}
	
	.footerHere {
		display:none;
		visibility:hidden;
	}
	#footer {
		visibility:visible;
		height:600px;
		
	}	
	.nav-trigger {
		display:none;
		visibility:hidden;
	} 	
	 ul.navigation {
		display:none;
		visibility:hidden;
	}
	hr {
		visibility:hidden;
		display:none;
	}
	
	.slide-checkbox {
		visibility:hidden;
		display:none;
	}

	.menuSize {
		width:100%;
		padding:10px;
	}
}




@media only screen and (max-width: 1000px) {

* {
	margin: 0;
	padding: 0;
}

body,
html {
		height: 100%;
}

body {
	font: 13px/18px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;

	/*
	 * Relates to the pseudo class & sibling bug, see
	 * http://css-tricks.com/webkit-sibling-bug/ for more details
	 */
	-webkit-animation: bugfix infinite 1s;
}

/* Also relates to the pseudo class & sibling bug */
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

.outer {
	width:100%;
	overflow:hidden;
}

.slide {
	background: #f9f9f9;
	padding: 20px;
}

.content {
	margin-top: 30px;
	width:100%;
}

.content ul,
.content ol {
	margin: 10px 40px;
}

h1,h2,h3,p {
	margin-bottom: 18px;
}

h1 {
	line-height: 26px;
}

/* @group .nav */
.nav {
	width: 100%;
	margin: 0 0 20px 0;
	padding: 5px 0;
	background: #333;
	border-radius: 3px;
	overflow: hidden;
}

.nav li {
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
}

.nav li a {
	display: block;
	padding: 5px 20px;
	text-decoration: none;
	background: #333;
	color: #f9f9f9;
}

.nav li a:hover {
	background: #2e2e2e;
}

/* @end nav */

/* This is the clickable label */
.slide-toggle {
	float: right;
	cursor: pointer;
	position: relative;
	z-index: 1;
	display: none;
	margin: 10px 10px 0 0;
}

/* Kill the nasty outlines everywhere */
.slide-toggle,
.slide-toggle:active,
.slide-toggle:focus {
	border: none !important;
	outline: none !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* The :after pseudo element has an icon that covers the checkbox */
.slide-toggle:after {
	content: "☰";
	color: #f9f9f9;
	background: #333;
	display: block;
	height: 30px;
	width: 38px;
	border-radius: 3px;
	font: 24px/30px 'responav';
	text-align: center;
	margin-left: -19px;
}

/* This is the checkbox */
.slide-checkbox {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

/* When it's checked replace the menu icon with a close icon */
.slide-checkbox:checked ~ .slide-toggle:after {
	content: '!';
}


.pfwMenu {
		display:none;
		visibility:hidden;
	}
	
	.booksShow {
		display:none;
		visibility:hidden;
	}
	
	#spacer {
		display:block;
		visibility:visible;
	}
	#menu {
		display:none;
		visibility:hidden;
	}
	#footer {
		display:none;
		visibility:hidden;
	}
	.col3{
		display:none;
		visibility:hidden;
	}
	.footerHere {
		display:block;
		visibility:visible;
		
	}	
	#sidebar{
		display:block;
		visibility:visible;
		overflow:hidden;
	}		
	.content {
		display:none;
		visibility:hidden;
		width:0%;	
	}	

 	

}

/*
 * I set the width pretty high because I wanted to test on an Ipad in portrait mode,
 * depending on your website you can probably make this narrower
 */
@media only screen and (max-width: 1000px) {

	body, input, textarea, select {
		line-height: 1.6em;
				font-size: 1em;
		
				
	}
	h1 {
		line-height:1.5em;
	}
	p{
		padding-bottom:10px;
	}
	
	/* Only show the menu link on smaller screens */
	.slide-toggle {
		display: block;
	}

	/*
	 * The transition value determines the speed
	 * at which the content will slide over
	 */
	.slide {
		-webkit-transition: -webkit-transform 500ms ease;
		-moz-transition: -moz-transform 500ms ease;
		-o-transition: -o-transform 500ms ease;
		transition: transform 500ms ease;
	}

	/*
	 * Enable hardware acceleration and stop flickering
	 * More details: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
	 * Add more browser prefixes as required for your environment
	 */
	.slide,
	.nav {
		-webkit-transform: translateZ(0);
		-moz-transform: translateZ(0);
		-webkit-perspective: 1000;
		-moz-perspective: 1000;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
	}

	/*
	 * When the checkbox is checked slide the content
	 * over and the checkbox with it
	 */
	.slide-checkbox:checked ~ .slide {
		-webkit-transform: translateX(70%) scale(1);
		-moz-transform: translateX(70%) scale(1);
		-ms-transform: translateX(70%) scale(1);
		-o-transform: translateX(70%) scale(1);
		transform: translateX(70%) scale(1);

	}

	.nav {
		height: 100%;
		background: #333;
		border-radius: 0;

		/*
		 * The width determines how much of the page you want to
		 * remain visible once the menu slides over
		 */
		width: 50%;

		/*
		 * Must be absolutely positioned otherwise it won't sit
		 * side by side with the content but instead above it
		 * */
		position: absolute;
		left: -20%;
		top: 0;

		/* Keeps the menu hidden off-canvas to the left */
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	.nav li {
		float: none;
	}

	.nav li a {
		border-top: 1px solid #222;
		border-bottom: 1px solid #444;
		padding: 12px 12px;
	}

	.nav li:first-child a {
		border-top: none;
	}

	.nav li:last-child a {
		border-bottom: none;
	}
	
	
	.pfwMenu {
		display:none;
		visibility:hidden;
	}
	
	.booksShow {
		display:none;
		visibility:hidden;
	}
	
	#spacer {
		display:block;
		visibility:visible;
	}
	#menu {
		display:none;
		visibility:hidden;
	}
	#footer {
		display:none;
		visibility:hidden;
	}
	.col3{
		display:none;
		visibility:hidden;
	}
	.footerHere {
		display:block;
		visibility:visible;
		
	}	
	#sidebar{
		display:block;
		visibility:visible;
		overflow:hidden;
	}		
	.content {
		display:block;
		visibility:visible;
		overflow:hidden;
		width:100%;	
	}	
	
	.fileShow{
		width:100%;	
		display:block;
		visibility:visible;
		overflow: hidden;
	}
	
.menuSize {
	width:100%;	
}



}





@media screen and (max-width: 600px) {
	h2 {
		font-size: 16px;
	}

	body {
	  margin: 0;
	  margin-right: 5px;
	  font-size: 14px;
	}
  
	
	table {
	  width: 100%;
	  
	}
	table td {
	  font-size: 14px;
	}
	  
  }