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, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
		 background-color: Beige  ; 
		font-family: Arial,Helvetica,sans-serif;
}
ol, ul {
	list-style: none;
}

p { 
	font-family: Arial,Helvetica,sans-serif;
   line-height: 130%;
	color: #383838; 
	font-size: .875em; /* 14 ÷ 16 */ 
}

img.logoimg { 
max-width: 30%; /* 300 / 960 */ 
float:left;
margin-right:2%;
margin-left:0;
margin-bottom:3%;
box-shadow: 0px 3px 8px #444;
}
 

img.ctrImg {float:none;width:80%; max-width:400px;}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* self-clear floats - if you need them, this is my (current) favourite technique. More info: http://nicolasgallagher.com/micro-clearfix-hack/ */

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}


/* wrap url's */
pre {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	word-wrap: break-word;      /* IE 5+ */
	}



a {
	color: #666;
	text-decoration:none; 
	/*transition: all 0.7s; */
}
a:hover {
	color: #000;
}

a.uline { text-decoration:underline; }

img,video { 
	max-width: 100%; height: auto; 
}

table {border-collapse:collapse;margin:1% auto 1% auto;}
th {border:1px solid DimGray;padding:5px;background-color:black;color:white;}
td {border:1px solid DimGray;padding:5px;}

td.tdrt {text-align:right;} 

#wrapper {
	margin-right: auto;
	margin-left: auto;
	width: 96%; /* Holding outermost DIV */
	/*max-width: 1306px; */
	max-width:1000px;
}

header {
	background-position: 0 top;
    margin-top:1%;
	margin-right: auto; /* 10 ÷ 960 */
	margin-left: auto; /* 10 ÷ 960 */
	width: 97.9166667%; /* 940 ÷ 960 */
}
header a {
	text-decoration: none;
}
#logo { 
	display: block; 
	padding-top: 35px; 
	color: #0d0c0c; 
	text-shadow: 0px 1px #c7c7c7,1.3px 1.3px 0px red ; /* 4 ÷ 30 */
font-family: 'Pompiere', cursive;
	font-size: 3em; /* 48 ÷ 16 = 3*/
}
#logo span { 
font-size: .75em; /* inherited so .75 of 3em */
}

#logo img { 
max-width: 30%; /* 300 / 960 */ 
float:left;
margin-right:2%;
margin-left:1.2%;
margin-bottom:2%;
box-shadow: 0px 3px 8px #444;
}

/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
float:right;
	margin: 2px 0 10px 10px;  /* Was margin-top: 20 */
}

#nav-wrap a {text-decoration: none;}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}

#nav, 
#nav li {
	margin: 0;
	padding: 0;
	font-size:.95em;
}
#nav li {
	list-style: none;
	float: left;
	margin-right: 10px;
	box-shadow: 5px 5px 3px DimGray; /* #669900; */
}

/* nav link */
#nav a {
	padding: 4px 15px;
	display: block;
	color: #fff;
	background:  OliveDrab ; /* was #99cc66 */
}
#nav a:hover {
	background: DarkOliveGreen ; /* #ccff99; */
}

/* nav dropdown */
#nav ul {
	background: #fff;
	padding: 0 2px 2px 2px;  /* was 2px */
	position: absolute;
	border: solid 1px #ccc;
	display: none; /* hide dropdown */
	width: 180px;
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #999; 
	box-shadow: none;
}
#nav li:hover > ul {
	display: block; /* show dropdown on hover */
}

#content {
	margin-top: 50px;
	margin-left: 4.16666%; /* 40 ÷ 960  [960 is 96% of 1000 max wrapper width */
	margin-right: 6.25%; /* 60 ÷ 960 */
	width: 94%;   /* 94 % of 960  = 904 */
	
	height: 100%;
	}

#content h1 { 
font-family: 'Pompiere', cursive;
	font-size: 1.25em;  /* 28 ÷ 16 */
	font-weight: 600;
	margin-bottom:1%;
	color: DarkOliveGreen;
}

#content h1 span {
   font-size:.75em;

}

#content h2 a {
	color: #383838;
}

#content h2 { 
font-family: 'Pompiere', cursive;
	font-size: 1.4em;  /* 20 ÷ 16 */
	font-weight: 400;
    margin-bottom:6px;
}



#content h3 {
	font-size: 1.2em;  
	font-weight: 400;
	margin-bottom:1%;
}
#content h3.hctr {
	text-align:center;
}


#content p  {
 padding-bottom: 1%;	
}

#content ul { margin:3px 0 10px 40px; list-style-type: square; }

#content li {
	
	font: .875em  Arial,Helvetica,sans-serif;  /* 14 / 16 */

	color: #383838;
	line-height: 150%;
}

#content img.cimg { width:23.7%; margin:1% 1% 1.5% 1.5%; float:right;    box-shadow: 8px 8px 5px #a2a2a2;}


footer {
	margin:10px auto 10px auto;
/*	width: 94%;   / * 94 % of 960  = 904 */
   width: 97.9166667%;
	height: 100%;
line-height: 150%;    
	/* padding-bottom: 20px; */
	/*float: left; */
    background-color: DarkOliveGreen;
	/* margin:0 auto 0 auto;*/
	clear: both;
	/* border-top: 4px double #bfbfbf; */
border:2px solid DarkOliveGreen;
border-radius:25px;  /* rouunded corner */
	margin-bottom:20px;
}
footer p {
	/* margin-bottom: 20px;*/
	padding:10px;
		text-align: center;
	font-size: 1.25em; /* 14 ÷ 16 */
font-family: 'Pompiere', cursive;
/*	 text-transform: uppercase; */
	color: white;  /* #757474; */
}
footer span a {
	color: #bfbfbf;
}

#web {
	/* padding-bottom: 20px; */
	float: left;
	margin:0 auto 20px auto;
	clear: both;
	width: 97.9166667%; /* 940 ÷ 960 */
	text-align:center;
}

#web a { font-size:.75em; }

.sideBlock {
	width: 100%;  /* 220 */
	margin-top:0;
	padding-top:0;
	
}


/* 3 sections on home page */
.Qcontainer { 	
  height: 315px;  /* Set this when content is finalized it was 100% */
  width: 30%;
  position: relative;
 /* perspective: 200; */
  float: left;
 /* margin-right: 2%;  */
 margin:15px 0 20px 15px; 

padding:0;
  background-color:#fff;
  border: 1px solid #8d8d8d;
border-radius:25px;  /* rouunded corner */

}

.Qcontainer h2 {
font-family: 'Pompiere', cursive;
	font-size: 1em;  /* 18 / 16 */
color: white;
text-transform:none;
text-align:center;
background-color:DarkOliveGreen;
padding:3px 0 3px 0;
margin:0;
border-top-left-radius:25px;  /* rounded corner */
border-top-right-radius:25px;  /* rounded corner */

}

.Qcontainer p {
	line-height: 16px; 
    padding:10px;
 }

.Qcontainer .Qimg { width:98%; float:left; margin-bottom:2%;border:1px solid #8d8d8d;}

.toph {
/*font-family: 'Pompiere', cursive; */
	font-size: .875em ; /* 36px ÷ 16 */
	background-color: black;
	color: white;
	text-align:center;
	padding: 5px;
	font-style:italic;
	margin-top:1%;
	margin-right: auto; /* 10 ÷ 960 */
	margin-left: auto; /* 10 ÷ 960 */
	margin-bottom:.5%;
	width: 97.9166667%; /* 940 ÷ 960 */
border-radius:25px;  /* rounded corner */
	
}
.ctr {text-align:center;}
.frm {border:1px solid black; }
.container {border:1px solid black;width: 90%; padding:2% 2% 1% 2%;
            margin-left:auto;margin-right:auto;font-size:.875em;
            background-color:white; line-height: 2em;}
.leftColumn {width:50%;float:left;font-size:.875em;} 
.rightColumn{width:50%;float:left;font-size:.875em;} 
.buttonctr {margin:2% auto 2% auto;text-align:center}

.cnote {text-align:center;font-style:italic;} 

.indent {margin-left:4%;}

@media screen and (max-width: 600px) { 
 .leftColumn {width:100%;}
 .rightColumn {width:100%;} 
}

/* Media Queries */
@media screen and (min-width: 300px) and (max-width: 400px) {
	#logo { 		font-size: 1.5em; }
#content h1 { font-size:1.5em;margin-top:15%; }
	
  #nav li { box-shadow: none;}
	
	#content img.cimg { box-shadow: 4px 4px 4px #a2a2a2;}
	
	#footer p {	font-size: .75em; /* 14 ÷ 16 */ }

	.Qcontainer { 	
		width: 100%;
		height:100%;
		margin:0 0 10px 0;
		clear: left;
    }

}
@media screen and (min-width: 300px) and (max-width: 600px) {
    

	.Qcontainer {
		width: 100%;
		height:100%;
		height:100%;
		clear: left;
	}
	#wrapper {
		margin: 0px;
		width: 100%;
	}
	
/* #content h2 {font-size:1.4em; }	*/

#nav li { box-shadow: none;}

		
	#content p {
		font-size: 1em;
		line-height: 1.3em;
		color: #383838;
	}
	
/*	#content h1 {font-size:.5em; margin-top:1%;text-align:left;font-family:arial;}
	#content h2 {font-size:.5em; margin-top:1%;text-align:left;}
	*/

	#content { margin-top: 20px; width: 96%;margin: 2%;}
   
 /*	#content img.cimg { box-shadow: 4px 4px 4px #a2a2a2;} */

	#footer p {	font-size: .75em; /* 14 ÷ 16 */ }

	
}

@media screen and (min-width: 475px) and (max-width: 600px) {

#nav li { box-shadow: none;}
/*
	#content h1 {
		font-size: 1em;  / * was 5em * /
				
	}
	
	#content h2 {
		font-size: 1em; 
	}
*/

 #content h2 {font-size:1.75em; }	
	#content p {
		font-size: .875em; 
		line-height: 1em;
		color: #383838;

	}
		#content img.cimg { box-shadow: 4px 4px 4px #a2a2a2;}

	
		.Qcontainer {
		width: 100%;
		height:100%;
		margin:0 0 10px 0;
		clear: left;
	}

		#content { margin-top: 20px; width: 96%;margin: 2%;}
	
	#footer p {	font-size: .75em; /* 14 ÷ 16 */ }

}

@media screen and (max-width: 600px) {
	#content h2 {font-size:1.4em; }	
		#content { margin-top: 20px; width: 96%;margin: 2%;}
		/* #content h1,h2 {font-size:1.75em; } */
			#footer p {	font-size: .75em; /* 14 ÷ 16 */ }


}

@media screen and (max-width: 768px) {
	#body {width: 96%; margin: 2%; padding: 0px; margin-bottom: 0px;
	}	
	#logo { 	text-align:center; 
	}
	
	#content { margin-top: 20px; width: 96%;margin: 2%;}
	#content h2 {font-size:1.4em; }
/*	#content h1,h2 {font-size:1.75em; } */

	#footer p {	font-size: .75em; /* 14 ÷ 16 */ }

	
}

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

  
	#content h1 {
		font-size: 2em; 
	}
	
	#content h2 {font-size:1.4em; }


}

/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 600px) {

	/* nav-wrap */
	#nav-wrap {
		position: relative;
	}

	/* menu icon */
	#menu-icon {
		color: #000;
		width: 180px;
		height: 29px;
/*		background: #669933  url(images/menuicon.png) no-repeat 10px center; */
background-color:  #669900;  /* #669933  DarkOliveGreen menu icon needs color change */
 /* background-image: url(images/menuicon.png); 
 background-repeat: no-repeat; */
		padding: 8px 10px 8px 5px;
		cursor: pointer;
		border: solid 1px #669900;
		vertical-align: middle;
		display: block; /* show menu icon */
	}
	#menu-icon:hover {
		background-color: #669900;
	}
	#menu-icon.active {
		background-color:  #669900;  /* DarkOliveGreen - icon color has to change */
	}
	
	/* main nav */
	#nav {
		clear: both;
		position: absolute;
		top: 38px;
	/*	width: 160px; */
		z-index: 10000;
		padding: 5px;
		margin-right:30px;
		background: #669933;
		border: solid 1px #999;
		display: none; /* visibility will be toggled with jquery */
	}
	#nav li {
		clear: both;
		float: none;
		margin: 5px 0 5px 10px;
		border-bottom:1px solid #99cc66;
	}
	#nav li.last { border-bottom: none; margin-bottom:3px;}
	
	#nav a, 
	#nav ul a {
		font: inherit;
	/*	background: none; */
	    background:inherit;
		display: inline;
		padding: 0;
		color: #333;
		border: none;
	}
	#nav a:hover {
		background: black;
		color: white;
	}
 
	#nav ul a:hover {
		background-color: black;
		color: white;
	}
	
/*	#nav li {border-bottom:1px solid #999; } */
	
	/* dropdown */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: #ccff99; /* was inherit */
	}
	#nav ul li {
		margin: 3px 0 3px 10px; /* was left 15px */
	}

}

@media screen and (min-width: 600px) {

	/* ensure #nav is visible on desktop version */
	#nav {
		display: block !important;
	}

}