/* @override http://www.missiodeicommunities.com/_css/styles.css */

/* Site: Missio Dei Communities */

/* =RESET MARGINS & PADDING
---------------------------------------------------------------------
*/

html, body, div, span,
p, blockquote, pre, code,
ul, ol, li,
h1, h2, h3, h4, h5, h6,
form, fieldset, legend, label, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
}

img {
  border: 0;
  margin: 0;
  padding: 0;
}

hr{
   display: none;
}

/* =RESET TYPOGRAPHY
---------------------------------------------------------------------
*/

body {
  font-family: Verdana, Arial, Helvetica, sans-serif; /* web safe fonts */
  font-size: 62.5%;  /* Rest font to a 10px baseline when using ems */
  font-weight: normal;
  line-height: 140%;   
  background: #1f180a url(/_img/bg_body.gif) no-repeat center top;
  color: #1f190a;
}

h1,h2,h3,h4,h5,h6{
  font-family: Helvetica;
}

h1 {
  font-size: 2em; /* font-size doesn't matter since we hide this with a logo */
  font-weight: normal;
}

h2 {
  font-size: 3em;
  line-height: 1.6;
  font-weight: bold;
  text-transform: uppercase;
  color: #1f190a;
}

h3 {
  font-size:2.2em;
  line-height: 1.6;
  font-weight: bold;
}
h4 {
  font-size: 1.8em;
  line-height: 1.4;
  font-weight: bold;
}

h5 {
  font-size: 1.2em;
  font-weight: bold;
}

h6 {
  font-size: 0.8em;
  font-weight: bold;
}

p {
  font-weight: normal;
  margin: 0 0 10px 0;
  line-height: 1.5;
  color: #2d2717;
}

/* =DEFAULT LINKS
---------------------------------------------------------------------
*/

a {
  color: #a88356;
  margin: 0;
  padding: 0;
  text-decoration: none;
  overflow: hidden;
}

a:hover,
a:active {
  text-decoration: underline;
}

a.read-more{
  display: block;
  font-weight: bold;
  color: #2d2717;
  text-transform: lowercase;
}

/* =Helper Classes
---------------------------------------------------------------------
*/

#skip{
   position: absolute;
   list-style: none;
   display: block;
   height: 0;
   overflow: hidden;
}

/* the clearfix rules make it possible to clear floated elements without additional structural markup. See http://www.positioniseverything.net/easyclearing.html */

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

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* =Header
---------------------------------------------------------------------
*/

#header{
  position: relative;
  z-index: 900;
  width: 965px;
  height: 126px;
  background: url(/_img/bg_header-inside.jpg) no-repeat left top;
}

#home #header{
  background: url(/_img/bg_header.jpg) no-repeat left top;
  height: 109px;
}

body.noSidebars #header{
  background: url(/_img/bg_header-inside-noSB.jpg) no-repeat left top;
}

#header h1 {
   width: 280px;
   height: 101px;
   background: url(/_img/bg_h1.jpg);
   float: left;
   display: inline;
   margin-top: 25px;
   margin-left: 42px;
}

#header h1 a{
  display: block;
  width: 290px;
  height: 101px;
  text-indent: -999px;
}

#home #header h1,
#home #header h1 a{
  height: 84px;
}

/* =Navigation
---------------------------------------------------------------------
*/

#nav{
   list-style: none;
   height: 33px;
   float: left;
   display: inline;
   margin-top: 66px;
   width: 630px;
}

#nav li{
   float: left;
   line-height: 33px;
   background: url(/_img/bg_nav-li.gif) no-repeat right center;
}


#nav li a{
   display: block;
   color: #ffffff; /* Change this to the right color */
   text-decoration: none;
   font-size: 1.1em;
   padding: 0 15px 0 12px;
   font-weight: bold;
}

#nav li ul{
   position: absolute;
   left: -999em;
   z-index: 1100;
   width: 150px; /* Needs to be same as other 150px value */
   list-style: none;
   line-height: 1;
   margin-top: -2px;
}

#nav li li{
   font-size: .9em;
   background: none;
   padding: 0;
   margin-left: 0;
}

#nav li ul ul {
   margin: -25px 0 0 150px; /* the -25px and 150px need to be adjusted until the sub-sub-menu sits in the right place */
}

#nav li:hover ul ul,
#nav li.sfhover ul ul{
   left: -999em;
}

#nav li:hover ul,
#nav li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul{
   left: auto;
}

#nav li li li{
   font-size: 1em;
   margin-left: 15px;
}

#nav li li a{
   width: 140px; /* Needs to be same as other 150px value, less any padding or margin */
   background: #BF925B;
}

#nav li li a:hover{
  color:  #BF925B;
  background: #e5ddc4;
}


/* =Container
---------------------------------------------------------------------
*/

#container{
   width: 965px;
   margin: 0 auto;
   background: url(/_img/bg_content.jpg) repeat-y left 145px;
}

/* =Home Page
---------------------------------------------------------------------
*/

#homeLeft{
  float: left;
  display: inline;
  width: 458px;
  background: url(/_img/bg_home-left.gif) no-repeat left bottom;
}

#homeRight{
  float: left;
  display: inline;
  width: 502px;
  background: url(/_img/bg_sidebar-orange-repeat.gif) -2px top;
}

#welcome-img{
  float: left;
  background: url(/_img/bg_welcome-img.jpg) no-repeat left top;
  width: 369px;
  height: 158px;
  padding: 40px 40px 43px 49px;
}

#key-values{
  clear: both;
  padding-bottom: 26px /*36px - 10px from last li */;
  background: url(/_img/bg_btm-border.gif) repeat-x bottom left;
  margin-left: 5px;
}

#key-values div{
  margin: 0 27px 10px 36px;
}

#key-values div a{
  display: block;
  background:  #e5ddc4 url(/_img/bg_btm-border.gif) repeat-x left bottom;
  padding: 10px 15px;
}

#key-values div a:hover{
  background-color: #E9E2CA;
  text-decoration: none;
}

#key-values div a:hover span{
  cursor: pointer;
}

#key-values div span.title{
  background: url(/_img/bg_h2-star.gif) no-repeat right top;
  font-family: Helvetica;
  line-height: 1.2;
  font-size: 3.0em;
  color: #1f190a;
  font-weight: bolder;
  text-transform: uppercase;
  padding: 0 20px 0 0;
  float: left;
}

#key-values div span.description{
  clear: both;	
  float: left;
  font-size: 1.2em;
}

#purpose{
  padding: 27px 40px 43px 49px;
  background: #e5ddc4;
  margin-left: 5px;
}

#purpose h3{
  font-size: 2.4em;
  background: url(/_img/bg_h3-star.gif) no-repeat right top;
  padding-right: 15px;
  float: left;
  text-transform: uppercase;
  line-height: 1em;
  margin-bottom: 15px;
}

#purpose .text{
   clear: both;
   padding-top: 25px;
   background: url(/_img/bg_btm-border.gif) repeat-x left top;
}

#who-we-are{
  background: url(/_img/bg_who-we-are.jpg) no-repeat left top;
  float: left;
  width: 507px;
  height: 115px;
  text-indent: -9999px;
}

#who-we-are h3{
  color: #f3ecd6;
  font-size: 1.2em;
}

#recent-sermons{
  float: left;
  display: inline;
  background: url(/_img/bg_home-recent-sermons.jpg) repeat-y left top;
  padding: 0 40px 15px 40px;
}
#recent-sermons h3{
  line-height: 1em;
  padding: 0 18px 0 0;
  margin: 30px 0 22px 0;
  font-size: 2.44em;
  text-transform: uppercase;
  float: left;
  background: url(/_img/bg_home-blog-h3.gif) no-repeat right top;
  color: #ffffff;
}

#recent-sermons .sermon,
#sidebar .resource{
  clear: both;
  width: 403px;
  margin-bottom: 8px;
  padding: 12px;
  background: url(/_img/bg_home-sermon.gif);
  overflow: auto;
}

#sidebar .sidebar-content h4 a{
  color: #2d2717;
}

#recent-sermons .sermon h4,
#recent-blog .post h4{
  float: left;
  width: 225px;
  position: relative;
}

#recent-sermons .sermon h4 a,
#recent-blog .post h4 a{
  color: #1f190a;
}

#recent-sermons .sermon p.meta{
  font-size: 1.1em;
  clear: left;
  margin: 0;
  display: inline;
}

#recent-sermons .sermon ul{
  list-style-type: none;
  width: 175px;
  float: right;
}

#recent-sermons .sermon ul li,
#sidebar .resource ul li{
  float: right;
  display: inline;
  margin-left: 10px;
  font-size: 1.2em;
}

#recent-sermons .sermon ul li a,
#sidebar .resource ul li a{
  color: #ffffff;
  padding: 10px;
  display: block;
  background: #cab47b;
}

#recent-sermons .sermon ul li a:hover,
#sidebar .resource ul li a:hover{
  background: #b7a26b;
  text-decoration: none;
}

p.more{
  float: right;
  margin: 0;
  text-transform: lowercase;
  font-size: 1.1em;
  margin: 10px 0;
  clear: both;
}

p.more a{
  color: #000000;
  padding: 4px 8px;
  display: block;
  background: #b8a26b;
  font-family: Helvetica;
  font-size: 1.2em;
}

#recent-blog h3{
  line-height: 1em;
  padding: 0 18px 0 40px;
  margin: 30px 0 22px 0;
  font-size: 2.44em;
  text-transform: uppercase;
  float: left;
  background: url(/_img/bg_home-blog-h3.gif) no-repeat right top;
  color: #ffffff;
}

#home #recent-blog{
  float: left;
  display: inline;
  background: url(/_img/bg_home-blog.jpg) no-repeat left top;
}

#recent-blog{
  float: left;
}

#recent-blog .recent-blog-content{
  float: left;
  padding: 0 40px 40px;
  background: url(/_img/bg_sidebar-orange-repeat.gif) -2px top;
  margin-left: 1px;
  margin-right: 3px;
  margin-top: -1px;
}

#recent-blog .post{
  padding: 15px 20px;
  margin-bottom: 15px;
}

#home #recent-blog .post{
  background: #d9a86e;
}

#recent-blog .post{
   background: #e5ddc4;
}
#recent-blog .post:hover{
   background: #ECE4CD;
}

#recent-blog .post p.meta{
  font-size: 1.1em;
  color: #a07d52;
  clear: both;
}

#recent-blog .post p.comments{
  float: right;
  font-size: 1.1em;
  width: 100px;
  padding-top: 5px;
  margin-bottom: 0;
}

#recent-blog .post p.comments span{
  background: url(/_img/bg_home-blog-comments.gif) no-repeat left bottom;
  color: #fff;
  width: 9px;
  height: 16px;
  display: block;
  padding: 0 2px 1px 4px;
  margin-right: 4px;
  float: left;
  font-size: .9em;
  font-weight: bold;
}

#recent-blog .post p.comments a{
  color: #ffffff;
  float: left;
}

#recent-blog .post .text{
  clear: both;
  border-top: 1px dashed #a07d52;
  padding-top: 8px;
}

p.subscribe{
  float: right;
  margin-top: 18px;
  background: url(/_img/rss-small.gif) no-repeat right center;
  padding-right: 30px;
  height: 30px;
  line-height: 30px;
}

.bloglist p.subscribe{
  margin-top: 0;
}

/* =Container-Inner
---------------------------------------------------------------------
*/
#container-inner{
   width: 965px;
   clear: both;
}
/* =Content-Wrap
---------------------------------------------------------------------
*/
#content-wrap{
  overflow: auto;
}

#sermons #content-wrap{
  overflow: hidden;
}

/* =Content
---------------------------------------------------------------------
*/
#content{
   clear: both;
   width: 492px;
   padding: 0 30px 10px 63px;
   float: left;
   display: inline;
   margin-left: 7px;
}

body.noSidebars #content{
  width: 865px;
}

#content h2{
  line-height: 1;
  padding-right: 20px;
  background: url(/_img/bg_h2-star.gif) no-repeat right top;
  float: left;
  display: inline;
  margin: 20px 0;
}

#content .text{
  clear: left;
}

#content img{
   float: left;
   display: inline;
   margin: 0 10px 5px 0;
}

#home p,
#content p,
#content li{
  font-size: 1.2em;
}

#content ul.stars li{
   margin-bottom: 1em;
   line-height: 1.5;
   margin: 0;
   list-style-image: url(/_img/bg_content-li.gif);
}

#content ul,
#content ol{
   margin: 0 0 1em 3em;
}

#content li li{
   font-size: 1em;
}

#content blockquote{
   margin-left: 3em;
}

#content hr{
   display: block;
   margin-bottom: 1em;
}

#content a:hover{
   text-decoration: none;
}

#content #text{
  clear: both;
}

#content-header img{
  margin: 0;
}

#content p.summary{
  clear: both;
}

.content-header{
  float: left;
  display: inline;
  background: url(/_img/bg_content-header.jpg) no-repeat left top;
  width: 504px;
  height: 287px;
  padding: 34px 41px 66px 42px;
  /* negative margins account for #content padding */
  margin-left: -63px;
}

/* =Sidebar
---------------------------------------------------------------------
*/

#sidebar{
   width: 370px;
   float: left;
   display: inline;
   margin-left: 3px;
   position: relative;}

#sidebar .green{
   background: url(/_img/bg_sidebar-green.jpg) repeat-y left top;
}

#sidebar .orange{
  clear: both;
  background: url(/_img/bg_sidebar-orange.jpg) no-repeat left top;
}

#sidebar h3{
  line-height: 1em;
  padding: 0 18px 0 0;
  margin: 0 0 18px 30px;
  font-size: 2.44em;
  text-transform: uppercase;
  float: left;
  display: inline;
  background: url(/_img/bg_home-blog-h3.gif) no-repeat right top;
  color: #ffffff;
}

.sidebar-content{
  clear: both;
  border-top: 1px dashed #76694d;
  padding-top: 25px;
  margin: 0 30px 0 27px;
}

#sidebar .resource{
  width: 290px;
  position: relative;
}
#sidebar .resource p.meta{
  font-size: 1.1em;
}
#sidebar .resource ul{
  float: left;
  display: inline;
  list-style-type: none;
}

.green .sidebar-content ul{
  list-style-type: none;
}

#sidebar .orange h3{
  margin-top: 35px;
  margin-bottom: 25px;
}

#sidebar .orange .sidebar-content{
  margin: 0 5px 0 0;
  background: url(/_img/bg_sidebar-orange-repeat.gif) left top;
  overflow: auto;
  padding: 25px 25px 20px 27px;
  border-top: none;
}

#sidebar .orange ul{
  list-style-type: none;	
  background: #d9a86e;
  padding: 10px 20px;
}

#sidebar .orange ul li{
  padding: 10px 0;
  border-bottom: 1px dashed #76694d;
}

#sidebar .orange ul li a{
  display: block;
}

#sidebar .orange ul li p{
  margin-bottom: 0;
}

#sidebar .orange .blog-archive li a{
  font-size: 1.8em;
  line-height: 2;
  font-family: Helvetica;
  color: #1f190a;
  font-weight: bold;
}
#sidebar .orange p.more{
}

#sidebar .orange p.more a{
  background: #d9a86e;
  margin-top: 10px;
}

p.register{
  position: absolute;
  top: 12px;
  right: 12px;
  text-transform: lowercase;
  font-size: 1.1em;
  margin-bottom: 10px;
}

p.register a{
  color: #000000;
  padding: 4px 8px;
  background: #b8a26b;
  font-family: Helvetica;
  font-size: 1.2em;
}

/* = Sermons  
---------------------------------------------------------------------
*/

#sermons #content h3{
   font-size: 1.3em;
   font-weight: bold;
   font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
   line-height: 1.4;
}

#sermons #content #podcastlink{
  float: right;
  margin-bottom: 0;
  margin-top: 10px;
}

#sermons #content #podcastlink a{
  display: block;
  height: 44px;
  line-height: 66px;
  padding-right: 50px;
  background: url(/_img/bg_podcastlink.gif) no-repeat right top;
  color: #2d2717;
}

#sermons #content h3 a{
   color: #274247;
}

#sermons h3.sermongroup{
   margin: 24px 0 10px;
}

#content h3 a:hover{
   text-decoration: underline;
}
#content .sermonbox{
   position: relative;
   clear: both;
   padding: 10px 15px 8px;
   border: 1px solid #ece4cd;
   background: #e5ddc4;
   margin-bottom: 3px;
}

#content .sermonbox:hover{
   background: #ECE4CD;
}

#content .sermonbox h4{
   margin: 0 0 5px;
   font-size: 1.2em;
   font-family: Verdana, Arial, Tahoma, sans-serif;
   line-height: 1.3;
   text-transform: none;
   max-width: 230px;
   float: left;
   position: relative; /* gives hasLayout to ie6 -- need because of float */
}

#content .sermonbox h4 a{
   color: #1f190a;
   text-decoration: none;
}

#content .sermonbox h4 a:hover{
   text-decoration: underline;
}

#content .meta{
   clear: left;
}

#content .meta p{
  margin: 0;
  color: #a88356;
}

#content .meta a{
  color: #a88356;
  text-decoration: underline;
}

#content ul#mediabox{ /* #mediabox controls "feature" sermon and sermon detail */
   float: right;
   display: inline;
   padding: 10px;
   list-style: none;
   background: #e5ddc4;
   margin: 0 0 20px 20px;
}

#content .sermonbox ul{
   float: right;
   list-style: none;
   margin: 0;
   padding: 0;
}

#content .sermonbox li,
#content ul#mediabox li{
   float: left;
   clear: right;
   display: inline-block;
   padding: 10px;
   background: #f3ecd6;
   margin-left: 10px;
   white-space: nowrap;
}

#content .sermonbox li a,
#content ul#mediabox li a{
   color: #1f190a;
}

#content .sermonbox li:hover,
#content #mediabox li:hover{
   background: #bf915a;
   color: #ffffff;
}

#content .sermonbox li:hover a,
#content #mediabox li:hover a{
   background: #bf915a;
   color: #ffffff;
}

#content .sermonbox p.comments{
   height: 15px;
   margin: 0;
   padding-left: 19px;
   background: url(/_img/bg_comments.gif) no-repeat left center;
}

#content .sermonbox.alt p.comments{
   background-position: left bottom;
}

#content .sermonbox:hover p.comments{
   background-position: left top;
}

#content .sermonbox p.comments a{
   color: #0F6131;
}

#content h4.sermongroup{
  clear: both;
  margin-bottom: 15px;
}

#pagination span.paginate_label{
   display: block;
   float: left;
   margin-right: 5px;
}

#pagination a#off{
   display: none;
}

p#pagination{
   float: left;
   display: block;
   margin: 20px 0 0;
   line-height: 14px;
   height: 14px;
}

#pagination a#current{
   font-weight: bold;
   display: block;
   color: #464646;
   float: left;
   margin: 0 8px;
   text-decoration: none;
}

#pagination a{
   margin: 0 8px;
   text-decoration: underline;
   display: block;
   float: left;
}

#pagination a:hover{
   text-decoration: none;
}

#pagination a#next{
	width: 14px;
	text-indent: -9999px;
	height: 14px;
	margin-top: 1px;
	margin-left: 4px;
	background: url(/_img/bg_paginate_next.png) no-repeat;
}

#pagination a#previous{
   width: 14px;
   height: 14px;
   text-indent: -9999px;
   margin: 1px 4px 0;
   background: url(/_img/bg_paginate_prev.png);
}

#sermons p#backtoarchive{
   margin-top: 20px;
   float: left;
   clear: left;
}

#sermons p#backtoarchive a{
   display: block;
   padding: 3px 10px;
   background: #e5ddc4;
   line-height: 1.5;
}

#sermons p#backtoarchive a:hover{
   background: #bf915a;
   color: #ffffff;
}

#content ul#byline{
   clear: both;
   float: left;
   display: inline;
   padding: 5px 5px 4px;
   list-style: none;
   margin: 0 0 20px;
   max-width: 280px; /* keeps byline from overflowing into ul#mediabox */
   _width: 280px;
   width: 280px;
}
#content ul#byline li{
  list-style-position: outside;
}

#content ul#byline li a{
  color: #a88356;
}

/* = Blog Commenting
---------------------------------------------------------------------
*/
#comments h3{
  font-size: 2.4em;
  background: url(/_img/bg_h3-star.gif) no-repeat right top;
  padding-right: 15px;
  float: left;
  text-transform: uppercase;
  line-height: 1em;
  margin-bottom: 15px;
}

#comments .comment{
   clear: left;
   padding: 10px 15px 8px;
   border: 1px solid #ece4cd;
   background: #e5ddc4;
   margin-bottom: 3px;
}

#comments .comment.alt{
   background: #ECE4CD;
}

#comments form{
  clear: left;
}

#comments form label{
  font-size: 1.8em;
  font-family:Helvetica;
  float: left;
  line-height: 2.0em;
  text-transform: uppercase;
  font-weight: bold;
}

#comments textarea#comment{
  clear: both;
  float: left;
  width:100%;
}

#comments input#comment-submit{
  clear: both;
  float: left;
  margin-top: 10px;
}
/* = Events  
---------------------------------------------------------------------
*/

#content #calendar-outer{
   position: relative;
}

#content table.calendar{
   margin-bottom: 25px;
   border: 1px solid #e3dfda;
   border-right: 0;
   border-bottom: 0;
   border-collapse: collapse;
}

#content table.calendar caption{
   height: 25px;
   line-height: 25px;
   font-size: 1.8em;
   font-weight: normal;
   color: #1f190a;
   position: relative;
}

#content table.calendar caption span{
   position: absolute;
   top: 3px;
   width: 18px;
   height: 0;
   padding-top: 19px;
   overflow: hidden;
   color: #8A4700;
}

#content table.calendar caption span.calendar-prev{
   left: 125px;
   background-image: url(/_img/bigcal_previous.png);
}

#content table.calendar caption span.calendar-next{
   right: 125px;
   background-image: url(/_img/bigcal_next.png);
}

#content table.calendar th{
   padding: 6px 0;
   background: #cab47b;
   color: #ffffff;
   font-size: 1.3em;
   font-weight: normal;
   text-align: center;
}

#content table.calendar td{
   width: 100px;
   height: 68px;
   padding: 2px;
   border: 1px solid #e3dfda;
   border-left: 0;
   border-top: 0;
   background: #FFF;
   color: #626262;
   font-size: 1em;
   vertical-align: top;
}

#content table.calendar td.empty{
   background: #f6f5f3;
}

#content table.calendar td a{
   text-decoration: none;
}

#content table.calendar td ul{
   margin: .5em 0 0 .5em;
   font-size: 100%;
   list-style: none;
   padding: 0;
}

#content table.calendar td li{
   padding-left: 8px;
   margin-left: 0;
   margin-bottom: .75em;
   font-size: 1.1em;
   line-height: 1.2;
   background: none;
}

#content table.calendar td li a{
   text-decoration: underline;
}

#content table.calendar td li a:hover{
   text-decoration: none;
}

/* =Footer
---------------------------------------------------------------------
*/

#footer{
   clear: both;
   padding: 15px;
   color: #ffffff;
   height: 155px;
   background: url(/_img/bg_footer.jpg) no-repeat left top;
   overflow: auto;
   margin-bottom: 25px;
}

#footer p{
   float: left;
   font-size: 1.2em;
   margin: 0;
   line-height: 25px;
}

#footer p.right{
   float: right;
   text-align: right;
}

#footer a{
  color: #ffffff;
}

#footer a.twitter{
  padding: 3px 25px;
  background: url(/_img/twitter_20.png) no-repeat left top;
}