/* top bar nav on top of template good for staic links link sections etc.*/
.topbar{
color:#fff;
background-color:#222;
/*ajust the top bar height*/
height:30px;
text-align:right;
text-decoration:none;
padding-top:5px;
padding-right:5px;
display:block;
white-space:nowrap;
}
.topbar a:link{color:White;}
.topbar a:visited{color:White;}
.topbar a:hover{color:White;}

/* Wrapper Footer Trick */
#Wrapper {
height:auto !important;
/*this works hand in hand with the #FooterWrapper min-height: settings */
min-height:90%;
}

/* Heading Color and Height control*/
#Header {
background-image:url(../images/brb.png);
background-repeat: repeat-x;
}

/*Menu Wrapper to cover the width if needed*/
#MenuWrapper{
	background-color:#333;
	width:100%;
	height:25px;
	white-space:nowrap;
	/*need for  FF div not working right*/
	margin:0 auto;
	padding-top:5px;
	}

/* Main Body Padding */
.MainBody{padding:8px;}
	
/* Start of layout Center Mass */

/* End of layout Center Mass */

/* Centers the footer links etc.*/
.center{margin:0 auto;text-align: center; }
#FooterWrapper{
padding:10px;
clear:both;	
/*this works hand in hand with the #Wrapper min-height: settings */
min-height:10%;
background-color: #222;
}


#container {
	width: 100%;
	margin: 0 auto;
	padding-top:90px;
}

#masthead {
	width: 100%;
	height:238px;
	margin: 0 auto;
	background-image:url(../images/masthead_bg.png);
	background-repeat:repeat-x;
	
}

#contentwrapper{
	max-width:930px;
	margin: 0 auto;
	padding: 15px 25px 0 25px;
	}

#title{
	width:465px;
	float:left;
	height:186px;
}

#quote{
	width:450px;
	float: right;
	height:186px;


}

#topnav{
	clear: both;
	height:24px;
	background: none;
	z-index:999;
	width:100%;
	padding-top:6px;
	padding-left:130px;

}

#topnav div.moduletable ul {
    margin: 0;
    padding: 0;
	line-height:20px;
}

#content{
	margin: 90px 0 0 120px;
	padding: 10px 25px 0 25px;
	background-image:url(../images/content_bg.png);
	background-repeat:repeat;
}	

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


#masthead {
	width: 100%;
		height: auto;
	margin: 0 auto;
	background-image:url(../images/masthead_bg.png);
	background-repeat:repeat-x;
	
}

#title{
	width:60%;
	float:left;
	height:186px;
}

#title img {
	max-width: 100%;
	height: auto;
	}

#quote{
	width:40%;
	float: right;
	height:186px;

}

#quote img {
	max-width: 100%;
	height: auto;
	}

#topnav{
	clear: both;
	height:24px;
	background: none;
	z-index:999;
	width:100%;
	padding-top:6px;
	padding-left:25px;

}
	
#content{
	margin: 90px 0 0 0px;
	padding: 10px 25px 0 25px;
	background-image:url(../images/content_bg.png);
	background-repeat:repeat;
}

	
	
}

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

#masthead {
	width: 100%;
	height: 100%;
	margin: 0 auto;
		background: none;
		background-image:url(../images/masthead_bg02.png);
	background-repeat:repeat;
	overflow: auto;
		
}
	
#contentwrapper{
	width:100%;
	margin: 0 auto;
	padding: 10px 0 0 0;
	height:auto;
	
}	
	
	#title{
	width:95%;
		height: auto;
		float: none;
	padding: 20px;
}

#title img {
	max-width: 100%;
	height: auto;
	}
	
#content{
	width:90%;
	float: none;
	padding: 20px;
	background-image: none;
	/*padding-top:20px;*/

}
#topnav{
	clear: both;
	height:40px;
	background: none;
	z-index:999;
	width:100%;
	padding-top:6px;
	padding-left:25px;
	background-image: url(../images/nav_bg.png);
	background-repeat: repeat-x;
	background-color: #579736;
	top: 0;
	position: fixed;
}
}