html { margin: 0 auto; padding: 0; }

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

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

#container {	margin: 0 auto; padding: 1px; width: 816px; border: 1px solid #003300;}
#container_inner {background: #F5D273; } 
#container, #container_inner, #header, #menu, #sidebar, #content, #footer {box-sizing: border-box;}

#header { text-align: left; background: url(images/header-image.png); background-size:100%;}
	#header a { text-decoration:none; margin: 0; padding: 60px 0 0 10px; font-family: 'Open Sans', verdana, geneva, sans-serif;  font-weight: normal; color: #000; }

#sidebar {text-align: center; background: #F5D273; }
	#sidebar a  { font-family: 'Open Sans', verdana, geneva, sans-serif;  text-decoration: none; font-weight: normal; color: #294858;}
	#sidebar a:hover {color: #508bab;}
	#sidebar p {color:#263425; font-family:verdana, geneva, sans-serif;}
	#sidebar h2  { font-family: 'Open Sans', verdana, geneva, sans-serif;  font-weight: bold; color: #263425;	  }
	#sidebar img {max-width:150px; height:auto;}

 #content { float:left; background: #fbf0d3; }
	#content p   {  font-family:  verdana, geneva, sans-serif; color: #004040;}
	#content ul { padding: 0; margin: 0; }
	#content li  { font-family: verdana, geneva, sans-serif;  color: #004040; }
	#content h1 { font-family: 'Open Sans', verdana, geneva, sans-serif;  font-weight: normal; color: #263425;}
	#content h2 { font-family: 'Open Sans', verdana, geneva, sans-serif;  font-weight: normal;  color: #263425;	  }
	#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;  }
	img.buttonspace {padding:0 10px;}

	#footer {margin: 0 auto; clear:both;}
	#footer p { text-align: center; font-family:  verdana, geneva,sans-serif; text-decoration: none; color: #333; }
	#footer a  {font-family:  verdana, geneva,sans-serif; text-decoration: none;  color: #333; }

	
@media screen and (min-width: 0px) 
 {
#container {width: 236px; }
#menu {width:100%; margin:0 auto;}

.topmenu {background: #346113;   border: 1px solid #555D55; text-align:center;
    color: #fff; font-family: verdana,arial,sans-serif; font-size: 20px; font-weight: 400;
   padding: 1px 10px; width: 60px; position:relative; top:-30px; left: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; margin-bottom:-60px;}
	#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: #346113; 
			position:relative; top:5px; padding:0 23px;} 
				/*this controls font style of main links*/

#container_inner {border: 5px solid #f9e9bd; }

#header {height: 50px; margin: 0; padding:0; text-align:center;  }
	#header a { margin: 0;  text-align:center; position:relative; top:70px;
	} 
#sidebar {padding: 50px 0 0 0;}
#sidebar a, #sidebar p  { font-size: 15px;}
#sidebar img {padding-top:60px;}
#sidebar h2 {margin-top: -10px; font-size:.9em;}
.hide {display:none;}
#sidebar p  { font-size: 15px; }
#content {padding: 5px;}
	#content p, li {  font-size: .8em; }
	#content li {line-height:1.3; padding-left:5px; margin-left:15px;}
	#content a  {font-size: 1.2em;  }
	#content h1 {font-size:1.3em;}
	#content h2 {font-size:1.2em;}
	#content ul li {   padding-bottom: 10px;}
	#content ul li ul li {    padding-bottom: 0;}

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


}

@media screen and (min-width: 320px) 
 {
#container {	width: 316px;}
.topmenu {left:100px; top:40px;}

#header { height:60px; border-bottom: 2px solid #CED6C6; }
#header h1 {padding-top:60px;}
#menu {padding-top:40px;}
#menu #main ul {padding-top:10px;}

#sidebar {padding-top:0; }
#content p   {padding: 10px; }
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;}
	#footer p { padding: 0; font-size: 12px; }
	#footer a  {text-decoration: none; font-size: 12px;  }



}


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

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


#container {width: 476px; }
#header { height:101px;}
#header a {position:relative; top:110px;}
#menu {padding-top:50px;}
#menu #main ul {padding-top:10px;}
#sidebar {padding: 10px}
#sidebar a  { font-size: 15px;}
#sidebar p  { font-size: 15px; }
#content {padding: 5px; }
#content p, li {  font-size: 15px; }
#content li {line-height:1.8; padding-left:10px; margin-left:10px;}
#content a  {font-size: 15px;  }
#footer p { font-size: 12px; }
#footer a  { font-size: 12px; }


}


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

#container {width: 596px; }

.topmenu {display:none;}
#menu { height: 25px; vertical-align: middle; background: #346113; padding: 0; float: left;}

#menu #main {display: block; margin: 0;   }

#menu #main ul {	list-style: none;	position: relative;	/*display: inline-table;*/	width: 100%; margin:0;	text-align:center; position:relative; top:-10px; left: -38px;}
	#menu #main ul:after {		content: ""; clear: both; display: block;	}
	#menu #main ul li {text-align:center; float:left; padding:0;}

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

#menu .hide, #menu a.hide {display:none;}
#menu a.homeonly {display:none;}


#menu #main ul li:hover {	} 
			/* this controls the main menu hover */
#header {height:128px; text-align:left;}
#header a { text-align:left; padding-left:20px; }
#sidebar {float:left; width: 160px; padding: 20px 5px 30px 5px; }
#sidebar a  { font-size: 13px; line-height: 1.8; font-weight:bold;}
.hide {display:inline;}
#sidebar p  { font-size: 12px; }
#sidebar img {padding:0;}

 #content {float:left; width:421px;  padding:5px;}
	#content p, li {  font-size: 12px; padding-left:20px;}
	#content li {line-height:1.6; padding-left:20px; margin-left:30px;}
	#content a  {font-size: 12px;  }
#content h2 {padding-left:20px;}


	#footer p { font-size: 10px; padding-top:20px;}
	#footer a  { font-size: 10px; }

}

@media screen and (min-width: 768px) 
 {
#container {width: 764px; }

#menu #main ul {padding:0; position:relative; top:0; left:-10px;}
#menu #main ul li {text-align:center; float:left; padding:0;}
#menu #main .menulabel {padding:0 6px;} 

#container_inner {border: 8px solid #f9e9bd; }
#header {height:150px; background-repeat: no-repeat;}
#header a {position:relative; top:115px; font-size:22px; font-weight:500; margin-bottom:0;}
#sidebar {width: 174px; padding: 20px 10px 30px 10px;}
#sidebar a  { font-size: 14px;}

#sidebar p  { font-size: 12px; }
#content {width: 570px; padding: 10px; }
#content p, li { margin-left: 20px; }
#content li {line-height:1.4; padding-left:10px; margin-left:60px;}
#content h2 {padding-left:20px;}

}