html { margin: auto; padding: 0; }

body { margin: 0; padding-top: 20px;  background-color: #E8E6E6; background-image: url(images/rain.gif); background-repeat: repeat; }

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

#outer-box { background: #D5D3D4; border: 1px solid #445D33;overflow:hidden; }

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

#header { float:left; border-top: 4px solid #445D33;  background: #C6BEBC; }
	#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   { padding: 0 0 0 20px; 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, Arial, sans-serif; text-decoration: none; font-weight: bold; color: #263425; }
	#content a:hover {color: #006400;  }

#bottom {background: #C6BEBC; display:flex; margin:0; padding:0;}
 
#footer {float:left;  }
	#footer p { text-align: right; font-family:  verdana, Arial, sans-serif; text-decoration: none; color: #172F1B; }
	#footer a  {font-family:  verdana, Arial, sans-serif; text-decoration: none; color: #172F1B; }
	#footer a:hover { color: #172F1B;}


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

.topmenu {background: #6F7D6F;   border: 1px solid #555D55; text-align:center;
    color: #fff; font-family: verdana,arial,sans-serif; font-size: 20px; font-weight: 400;
    margin-bottom: 10px; padding: 1px 10px; position: relative; top: 80px; left:0px;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; padding-top:70px;}
	#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;}
#container {width: 230px; padding:3px;}
#header { height: 30px; width: 232px; padding: 0; text-align:center;}
#header a {text-align:center;}
#menu {width:230px;}

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

#content {width:230px; padding: 5px; background:#cdcdcd;}
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: 15px; }
	#content a  {font-size: 15px;  }
	#content h1 {font-size:18px;}
	#content h2 {font-size:15px;}
	#footer p { font-size: 12px; text-align:center; }
	#footer a  { font-size: 12px; }


}

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

.topmenu {position: relative; top: 10px; left:10px;}

#outer-box {width:318px;}
#container {width: 310px; padding:3px;}
#header { height: 30px; width: 312px; padding: 0;}
#header a {text-align:center;}
#menu {width:310px;}
#menu h3 {padding-top:20px;}

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

#content {width:300px; padding: 5px; background:#cdcdcd;}
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) 
 {

.topmenu {position: relative; top: 10px; left:9px;}

#outer-box {width:476px;}
#container { padding: 1px; width: 476px; }
#header {width: 478px; height:69px;}
#menu {padding-top:50px; width:476px;}
#menu #main ul {padding-top:10px; width:476px;}
#content {width:458px; padding: 5px; }
#content p {  font-size: 15px; }
#content a  {font-size: 15px;  }
#middle {height:550px; width:478px; border-top: 1px solid #D5D3D4; border-bottom:1px solid #D5D3D4;}
#image img {height:550px; width:395px;} 

#footer p { font-size: 12px; }
#footer {width:450px;}
#footer a  { font-size: 12px; }

}


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


.topmenu {display:none;}
#menu { width: 135px;  height: 645px; vertical-align: middle; background: #fff; padding: 0; float: left;}

#menu #main {display: block; margin: 0;  width:135px; }

#menu #main ul {	list-style: none;	position: relative;	display: block;	width: 100%;	padding:20px 15px; 
margin:0;	text-align:center;}
	#menu #main ul:after {		content: ""; clear: both; display: block;	}
#menu #main ul li {text-align:left; }

#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 ul li:hover {	} 
			/* this controls the main menu hover */

#outer-box {width:598px; height:630px; }
#container { padding: 10px; width: 578px; height:620px;}
#header {width: 578px; height:30px;}
#header h1 {text-align:left; padding-left:10px; }
#menu {height:550px;}
#menu h3 {font-size:14px;padding:0 5px;}

#middle {width:200px;}
#middle img {width:200px; height:300px;}
 #content {width:233px; height:550px; padding: 5px;  }
	#content p {  font-size: 12px; padding-left:20px;}
	#content a  {font-size: 12px;  }
	#content h3 {font-size:14px; padding-left:10px; padding-right:5px; padding-top:50px;}
	#content img {position:relative; top:-90px; left: -220px;}
#bottom {height:1px;}
#footer {width:180px; position:relative; top:-130px; left:360px;}
	#footer p { font-size: 10px; }
	#footer a  { font-size: 10px; }

}

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

#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;}
#menu #main .menulabel {padding:0 2px;} 
#menu h3 {padding: 10px 5px;}

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

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

#middle {height:400px; width:279px; border-top: 45px solid #D5D3D4; border-bottom:45px solid #D5D3D4;}
#middle img {height:555px; width:388px;border-top:2px solid #445D33;} 
#content {width: 300px; height:647px; padding: 0 10px 0 10px; background: #C6BEBC; }
#content p{ margin-left: 20px;}
#content h3 { font-size: 15px; padding:70px 20px 20px 20px;  }
#content img {position:relative; top:0; left:0;}

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



@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;}
#menu #main .menulabel {padding:0 2px;} 
#menu h3 {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 #D5D3D4; border-bottom:45px solid #D5D3D4;}
#image img {height:555px; width:395px;border-top:2px solid #445D33;} 
#content {width: 290px; height:647px; padding: 0 10px 0 10px; background: #C6BEBC; }
#content p{ margin-left: 20px; }
#content h3 { font-size: 15px; padding:80px 20px 20px 20px;  }
#content img {position:relative; top:0; left:0;}

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

#footer {width: 840px; position:relative; top:0; left: 0; }
	#footer p {  font-size: 10px;  float:right; text-align:right; }
	#footer a  {font-size: 10px; }


}