html { margin: auto; padding: 0; }

body { 
background-color: #e7c36d;
    background-image: url("images/bg1.jpg");
    margin: 0;
    padding-top: 20px }

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

#outer-box { background: #f9e9bd; border: 1px solid #2e5402;overflow:hidden; }

#container { padding: 30px 30px 0 30px; width: 840px; border: 1px solid #dadee0;}

#header { float:left; border-top: 4px solid #2e5402;  background: #f5dc91; }
	#header a { text-decoration:none; margin: 0; padding: 0; font-family: 'Open Sans', verdana, geneva, sans-serif;  font-size: 20px; color: #46544c; }
 
#menu {float:left; background: #ffffff; text-align: center;border-top: 2px solid #445D33; border-top: 2px solid #445D33; }
	#menu h2 { margin: 0; padding: 0; font-family: 'Open Sans', verdana, geneva, sans-serif;  font-weight: normal; font-size: 18px; color: #46544C; }
	#menu h3 { margin: 0; padding: 0; font-family: 'Open Sans', verdana, geneva, sans-serif;  font-weight: normal; font-size: 16px; color: #46544C; }

#middle {float:left; border-top: 45px solid #D5D3D4; border-bottom:45px solid #D5D3D4;}
#image {border-top:2px solid #445D33;} 

#content { float:left; background: #C6BEBC; }
	#content p   { font-family:  verdana, geneva, sans-serif; color: #252D25;}
	#content h3 { font-family: 'Open Sans', verdana, geneva, sans-serif;  font-weight: normal; color: #263425;	 }
	#content a  {font-family:  verdana, geneva,sans-serif; text-decoration: none; font-weight: bold; color: #263425; }
	#content a:hover {color: #006400;  }

#bottom {background: #efc961; display:flex; margin:0; padding:0;}
 
#footer {width:100%; }
	#footer p { font-family:  verdana, geneva,sans-serif; color: #172F1B; }
	#footer a  {font-family:  verdana, geneva,sans-serif; color: #172F1B; }
	#footer a:hover { color: #172F1B;}


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

#menu {width:100%;}

.topmenu {background: #8E6B16;   border: 1px solid #555D55; text-align:center;
    color: #fff; font-family: verdana,arial,sans-serif; font-size: 20px; font-weight: 400;
    padding: 1px 10px; position: relative; top: -10px; width: 60px;}

 	#menu #main {display:none;}
		.trigger ul {display:none;}
		img.menu {margin-left: 20px; border:0; }
	#menu #main ul {list-style-type: none; text-align: left; }
	#menu #main ul li {line-height:1.8;}
	#menu #main li.menulabel, a.menulabel, .menulabel {font-family: arial, helvetica, sans-serif; text-decoration: none; 
			font-weight: bold; font-size: 16px; line-height:1.6; color: #555D55; padding:8px 15px 0 15px;
			position:relative; top:5px; padding:0 23px;} 
				/*this controls font style of main links*/
	#menu h3 { margin: 0; padding: 0; font-family: 'Open Sans', verdana, geneva, sans-serif;  font-weight: normal; font-size: 16px; color: #46544C; }

#outer-box {width:238px; box-sizing: border-box;}
#container {width:100%; padding:3px;}
#header { height: 30px; width: 100%; padding: 0; text-align:center;}
#header a {text-align:center;}

#middle {border-top: 1px solid #D5D3D4; border-bottom:1px solid #D5D3D4;}
#image img {height:328px; width:230px;} 

#content {width:100%; background: #EFC961; }
img.wrap-right{display:block;margin-left:auto;margin-right:auto;border:0;}
img.wrap-left{display:block;margin-left:auto;margin-right:auto;border:0;}
img.center{display:block;margin-left:auto;margin-right:auto;border:0;}

	#content p {font-size: .9em; padding:5px 10px; }
	#content a  {font-size: .9em;  }
	#content h1 {font-size:1.6em; padding:5px 10px;}
	#content h3 {font-size:1.3em;}
#footer {width:100%; text-align:center;}

	#footer p {font-size: .8em; text-align:center; padding:5px;}
	#footer a  {font-size: .9em; text-decoration:none; }
	#footer a.small {font-size: .7em; text-align:center; padding:5px; text-decoration:none;}

}

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

#outer-box {width:318px;}
#container {padding:3px;}
#header { height: 30px; padding: 0;}
#header a {text-align:center;}
.topmenu {position: relative; top: -10px; }

#menu h3 {padding-top:20px;}

#middle {height:434px; border-top: 1px solid #D5D3D4; border-bottom:1px solid #D5D3D4;}
#image img {height:442px; width:310px;} 

#content {padding: 5px; }
img.wrap-right{display:block;margin-left:auto;margin-right:auto;border:0;}
img.wrap-left{display:block;margin-left:auto;margin-right:auto;border:0;}
img.center{display:block;margin-left:auto;margin-right:auto;border:0;}

}


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

#outer-box {width:476px;}
#container { padding: 1px;  }
#header { height:69px;}
.topmenu {position: relative; top: -10px; }

#menu #main ul {padding-top:10px; width:476px;}
#content {padding: 10px; }
#middle {height:550px; width:478px; }
#image img {height:550px; width:395px;} 

}


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

#menu { width: 135px;  height: 800px; vertical-align: middle; background: #FBF0D3; padding: 0; float: left;}
#menu h2 {padding:1px 10px;}
.topmenu {display:none;}
#menu #main {display: block; margin: 0;  }

#menu #main ul {	list-style: none;	position: relative;	display: block;	padding:0 2px; }
	#menu #main ul:after {		content: ""; clear: both; display: block;	}
#menu #main ul li {text-align:left; line-height:1.8 }

#menu #main .menulabel {font-family:verdana, helvetica, sans-serif; text-decoration:none;
	color: #46544C; font-size: 12px; font-weight:bold; text-align: center; padding:0 5px; line-height:1;} 
	#menu a.menulabel:hover {color: #637169; }

#menu #main .hide {display:none;}

#menu #main ul li:hover {	} 
			/* this controls the main menu hover */

#outer-box {width:598px; height:800px; }
#container { padding: 10px; width: 578px; height:800px;}
#header {width: 578px; height:30px;}
#header h1 {text-align:left; padding-left:10px; }

#middle {width:200px; height:800px}
#middle img {width:200px; height:300px;}
 #content {width:233px; height:800px; padding: 5px;  }
	#content p {  padding-left:20px; font-size:.8em;}
	#content a  {font-size: 12px;  }
	#content h3 {padding-left:20px}
	#content img {position:relative; top:-90px; left: -220px;}
	#content p.move600 {position:relative; top:-20px; left:-210px; font-size:.8em; width:180px;}
	#content p.moveup600 {position:relative; top:-320px; font-size:.8em;}
#bottom {height:1px;}
#footer {width:225px; position:relative; top:-190px; left:345px;}

}

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

#outer-box { margin: auto; width: 766px; height:auto;}
#container { padding: 30px 30px 0 30px; width: 766px; height:auto;}

#menu {height:645px; }
#menu #main ul {padding-top:40px; }
#menu #main ul li {text-align:left; padding:0; line-height:1.8}
#menu #main .menulabel {padding:0 2px;} 
#menu h2 {padding: 10px 5px;}


#header {height: 38px; width: 766px; padding: 0 0 0 30px; text-align:left;}
#header a {text-align:left; padding-left:10px;}

/*middle height controls  bottom div displaying snug, change  to auto to help adjust for long text content */

#middle {height:550px; width:279px; border-top: 45px solid #F9E9BD; border-bottom:45px solid #F9E9BD}
#middle img {height:398px; width:279px;border-top:2px solid #445D33;} 
#content {width: 300px; height:647px; padding: 0 10px 0 10px; }
#content p{ margin-left: 20px;}
#content img {position:relative; top:0; left:0;}
	#content p.move600 {position:relative; top:0; left:0;width:initial;}
	#content p.moveup600 {position:relative; top:0; }

	#content p.move768 {position:relative; top:120px; left:-315px;width:258px;}
	#content p.move768initial {position:relative; top:0; left:0;width:initial;}
	#content p.moveup768 {position:relative; top:-150px; }

#bottom {height:25px; width:766px;  }
#footer {width: 766px; height:80px;position:relative; top:0; left: -40px; float:right;}
	#footer p {text-align:right; }
	#footer a.small { text-align:right;}
}



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

#menu {float:left; width: 135px; height:645px; }
#menu #main {width:135px; }
#menu #main ul {padding-top:60px; }
#menu #main ul li {text-align:left; padding:0; line-height:1.4}
#menu #main .menulabel {padding:0 2px;} 
#menu h2 {padding: 10px 5px;}

#outer-box { margin: auto; width: 900px; height:auto;}

#container { padding: 30px 30px 0 30px; width: 840px; height:auto;}
#header {height: 38px; width: 810px; padding: 0 0 0 30px;}
#middle {height:555px; width:395px; border-top: 45px solid #F9E9BD; border-bottom:45px solid #F9E9BD;}
#image img {height:555px; width:395px;border-top:2px solid #445D33;} 
#content {width: 290px; height:647px; padding: 0 10px 0 10px; }
#content p{ margin:0; }
#content h3 {  padding:0 0 0 20px;  }
#content img {position:relative; top:0; left:0;}

	#content p.move768 {position:relative; top:0; left:0;width:initial;}
	#content p.moveup768 {position:relative; top:0; }


#bottom {height:25px; width:840px;  }

#footer {width: 840px; position:relative; top:0; left: 0; }
	#footer p {  font-size: .7em;  float:right; text-align:right; }
	#footer a  {font-size: .8em; }
	#footer a.small {font-size: .8em; }



}