html { font-size:14px; line-height:22px; font-family:"lucida sans", arial, sans-serif; margin:0; padding:0; }
body { font-size:14px; line-height:22px; font-family:"lucida sans", arial, sans-serif; margin:0; padding:0; background-color:#F6F4F0; color:#635B53; min-width:320px; }
h1 { color:#00297A; font-size:26px; line-height:30px; font-family:"lucida sans", arial, sans-serif; }
h2 { color:#000; font-size:22px; line-height:26px; }
a[href] { font-weight:bold; color:#440016; text-decoration:none; cursor:pointer; }
a[href]:hover { text-decoration:underline; }

button, .button, .button[href] { font-weight:normal; text-align:center; color:#FFF; background-color:#865D36; cursor:pointer; font-size:16px; font-family:"lucida sans", arial, sans-serif; display:inline-block; border-radius:2px; padding:10px 14px 8px; border:none; text-decoration:none; }
button:hover, .button:hover, .button[href]:hover { text-decoration:none; }

.page-width { margin:auto; max-width:825px; width:100%; }
.clearfix { clear:both; }

#main-header { background-color:#313131; position:relative; }
#main-header > .page-width { padding:0 20px; box-sizing:border-box; position:relative; height:127px; background-image:url(../img/logo.jpg); background-position:right center; background-repeat:no-repeat; }
#main-header-title { position:absolute; bottom:3px; left:20px; max-width:100%; }

#main-menu { background:#4C4C4C; padding:10px 20px 0; position:relative; border-bottom:solid 4px #042A75; z-index:2; }
#main-menu #menu-trigger { cursor:pointer; display:none; float:right; padding:20px 0 0; margin:0 0 8px; position:relative; border-top:solid 5px #B28C68; width:30px; }
#main-menu #menu-trigger:before,
#main-menu #menu-trigger:after { content:""; position:absolute; background:#B28C68; height:5px; width:30px; }
#main-menu #menu-trigger:before { top:5px; }
#main-menu #menu-trigger:after { top:15px; }
#main-menu ul { padding:0; margin:0; }
#main-menu ul li { display:inline-block; position:relative; }
#main-menu ul li a { font-family:serif; display:block; padding:5px 22px; letter-spacing:1px; color:#FFF; text-decoration:none; }
#main-menu ul li a:hover { background-color:#042A75; }
#main-menu ul li ul { display:none; background-color:#777777; margin:0; padding:0; position:absolute; top:100%; left:0; min-width:100%; }
#main-menu ul li:hover ul { display:block; }
#main-menu ul li ul li { display:block; }
#main-menu ul li ul li a { display:block; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; white-space:nowrap; }

#content { padding:0 20px; }
#content .col-1,
#content .col-2 { float:left; width:50%; box-sizing:border-box; }
#content .col-1 { padding:0 12px 0 0; }
#content .col-2 { padding:0 0 0 12px; }
#content img { max-width:100%; height:auto; }

#content .audio-player { display:block; z-index:1; position:relative; width:100%; margin:0 0 10px; }

#content .sermon-aside { float:right; width:200px; }
#content .sermon-aside .button { display:block; width:100%; margin-bottom:6px; }
#content .sermon-content { width:400px; width:calc(100% - 200px); box-sizing:border-box; padding:0 20px 0 0; }

#content .teaching { margin:0 0 26px; }
#content .teaching-title { margin-bottom:0; color:#000; }
#content .teaching-excerpt p { margin-top:0; }
#content .teaching-downloads { padding:0 0 0 20px;  }
#content .featured-image-caption { font-style:italic; }
#content .scripture-verse { margin:16px 0 0; }
#content .scripture-verse p { display:inline; }
#content .scripture-verse-reference { font-weight:700; }

#main-footer { background:#313131; border-top:solid 4px #042A75; margin:30px 0 0; padding:10px 20px; color:#A8AA94; font-size:12px; line-height:18px; }
#main-footer a[href] { color:#A8AA94; font-weight:bold; text-decoration:none; }
#main-footer #footer-left,
#main-footer #footer-right { box-sizing:border-box; width:50%; display:block; float:left; }
#main-footer #footer-left { padding:0 20px 0 0; }
#main-footer #footer-right { padding:0 0 0 20px; }


@media (max-width: 750px) {
	#main-menu ul li a { padding:4px 13px; }
}
@media (max-width: 650px) {
	#main-header > .page-width { background-position:right center; background-position:right -36px top 0px; }
	#main-header-title { width:300px; }
	#main-menu { position:relative; }
	#main-menu #menu-trigger { display:block; }
	#main-menu #menu-primary-navigation { display:none; position:absolute; top:100%; width:100%; left:0; margin-top:4px; background:#4C4C4C; }
	#main-menu #menu-primary-navigation.open { display:block !important; }
	#main-menu ul li { display:block; }
	#main-menu ul li ul { position:static; }
	#main-menu ul li ul.open { display:block !important; }
	#main-menu ul li:hover ul { display:none; }
	#main-menu ul li ul li a { display:block; font-family:Arial, Helvetica, sans-serif; padding:4px 13px 4px 33px; font-weight:normal; font-size:12px; white-space:nowrap; }


	#content .col-1,
	#content .col-2 { display:block; float:none; width:100%; padding:0; }
	#content .featured-image,
	#content .scripture-verse { display:none; }
	
}
@media (max-width: 470px) {
	#main-header > .page-width { background-size:auto 100%; height:100px; }
}
@media (max-width: 420px) {
	#main-header-title { width:230px; }
}