/* Westside Church
   Updated: Tue 08.23.11
   Author: Misselbeck Design + Development
----------------------------------------------------------------------------------*/

body {
  background: #666666 url(images/body.jpg) top left repeat-x;
  font: 12px/1.6 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
  color: #333333;
  }
  
a, a:visited {color: #517fb9;}
a:active, a:focus {outline: 0;}

h2 {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}

p {padding-bottom: 10px;}

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

#header #branding {
  width: 264px;
  height: 38px;
  background: url(images/logo.gif) top left no-repeat;
  position: relative;
  margin: 30px 0 0 20px;
  float: left;
  display: inline;
  }

#header #logo {
  width: 264px;
  height: 38px;
  position: absolute;
  top: 5px;
  left: 0px;
  text-indent: -5000px;
  }

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

#mainNav ul {margin: 3px 0 0 25px; padding: 0; height: 27px;}
#mainNav ul li {margin: 0; padding: 0;}

#mainNav a, #mainNav a:visited {
  color: #EACFB1; 
  text-transform: uppercase;
  font-size: 16px;
  font-family: "Trebuchet MS", Helevetica, Arial, sans-serif;
  text-decoration: none;
  padding-right: 35px;
  }

#mainNav a:hover, #mainNav a.active, #mainNav a.active-trail {color: #CC6D3E;}

/* =Feature
----------------------------------------------------------------------------------*/

#feature {
  background: url(images/feature-bg.jpg) top left no-repeat;
  width: 515px;
  height: 460px;
  float: left;
  margin: 21px 0 0 25px;
  overflow: hidden;
  position: relative;
  }
  
.featured-image img {margin: 15px;}
.feature-text {margin: 12px 0 0 18px; width: 400px;}
.feature-text p {font-size: 15px; font-weight: bold; color: #cc6d3e; padding-bottom: 0;}
.feature-text p.subtitle {color: #ddd; font-size: 13px;}

#pager {position: absolute; bottom: 15px; right: 0; z-index: 10;}
#pager a {
  display: block; 
  height: 12px; 
  width: 12px;
  text-indent: -5000px; 
  background:  url(images/off.gif) top left no-repeat;
  float: left;
  margin: 0 15px 0 0;
  }

#pager a:hover, #pager a.activeSlide {background:  url(images/on.gif) top left no-repeat;}

/* =Welcome Message
----------------------------------------------------------------------------------*/

#welcome-message {
  background: url(images/crumple.jpg) top left no-repeat;
  width: 370px;
  height: 238px;
  float: right;
  overflow: hidden;
  margin: 20px 0 0 0;
  padding: 20px 20px 0 20px;
  font-size: 14px;
  }
  
#welcome-message h2 {color: #bc6336; text-transform: uppercase; font-size: 23px;}

#service-times {
  background: #EEE url(images/blocktop.png) top left repeat-x;
  width: 406px;
  float: right;
  padding: 10px 0 0 0;
  color: #666666;
  font-size: 15px;
  border: 1px solid #CCC;
  }
  
#service-times img {float: left; margin: 5px 0 0 8px;}

#service-times h3 {
  font-size: 18px; 
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
  font-weight: bold; 
  margin-left: 80px;
  }

#service-times h3 span {color: #bc6336;}
#service-times p {margin: 0 20px 0 80px;}

#welcome-video {width: 135px; height: 50px; float: right; margin: 51px 23px 0 0;}
#pblog {width: 135px; height: 50px; float: right; margin: 51px 30px 0 0;}

/* =View Blocks
----------------------------------------------------------------------------------*/

#bottom {background: #DDD; float: left; width: 960px;}

#block-views-latest_news-block_1 {float: left; margin: 20px 10px 20px 20px; width: 305px;}
#sidebar-right .block-views {margin:100px 8px 10px; width: 265px; padding:20px;}
#block-views-latest_news-block_1 ul li,
#sidebar-right .block-views ul li {list-style-type: none;}
#block-views-latest_news-block_1 .views-field-title label,
#sidebar-right .block-views .views-field-title label {display: none;}

#block-views-latest_news-block_1 h3,
#block-views-latest_message-block_1 h3,
#sidebar-right .block-views h3,
#block-views-latest_news-block_1 .item-list ul li div,
#sidebar-right .block-views .item-list ul li div {
  background: #EEE url(images/blocktop.png) top left repeat-x;
  border: 1px solid #AAA; 
  border-width: 0 1px 1px;
  font-size: 15px;
  padding: 10px;
  }

#block-views-latest_news-block_1 h3,
#sidebar-right .block-views h3,
#block-views-latest_message-block_1 h3 {
  background: #EEE url(images/news.gif) 10px 10px no-repeat;
  border-width: 1px;
  padding: 10px 10px 10px 50px;
  font-family: "Trebuchet MS", Helevetica, Arial, sans-serif;
  font-size: 20px;
  }

#block-views-latest_news-block_1 .item-list ul li,
#sidebar-right .block-views .item-list ul li {margin: 0;}
#block-views-latest_news-block_1 .item-list ul li,
#sidebar-right .block-views .item-list ul li {list-style-position: outside;}
#block-views-latest_news-block_1 .item-list ul li a,
#sidebar-right .block-views .item-list ul li a,
#block-views-latest_news-block_1 .item-list ul li a:visited,
#sidebar-right .block-views .item-list ul li a:visited {
  background: url(images/doc.png) center left no-repeat;
  color: #666666;
  padding: 0 36px;
  text-decoration: none;
  display: block;
  }

#block-views-latest_news-block_1 .item-list ul li a:hover,
#sidebar-right .block-views .item-list ul li a:hover,
#sidebar-right .block-views .item-list ul li a.active {color: #BC6336;}

#block-views-latest_message-block_1 {float: right; margin: 20px 20px 20px 10px;}
#block-views-latest_message-block_1 .audio-node {
  width: 585px;
  background: #EEE url(images/blocktop.png) top left repeat-x;
  border: 1px solid #AAA;
  }

#block-views-latest_message-block_1 h3 {border-bottom: none; background: #EEE url(images/podcast.gif) 10px 10px no-repeat; }
#block-views-latest_message-block_1 .audio-node .entry {float: none; border: none;}
#block-views-latest_message-block_1 .audio-node .text {float: left; margin: 15px 10px;}
#block-views-latest_message-block_1 .audio-node .text h2.title {font-size: 18px;}
#block-views-latest_message-block_1 .audio-node .field-field-part {font-size: 14px;}

#rss {text-align: center; padding: 0; margin: -19px 0 10px;}
#rss a, #rss a:visited {background: #CC6D3E; text-decoration: none; color: #fff; font-size: 11px; display: block; padding: 2px 5px;}
#rss a:hover {background: #517FB9;}

/* =Pages
----------------------------------------------------------------------------------*/

h2.full-page-title {
  background: url(images/page-title.jpg) top left no-repeat;
  font-size: 24px;
  text-transform: uppercase;
  color: #cc6d3e;
  padding: 7px 20px;
  margin: 20px 0 0 15px;
  }
  
h2.full-page-title span {color: #666666;}

.content-wrap {
  background: #DDD url(images/boxtop.jpg) top left repeat-x;
  width: 610px;
  min-height: 600px;
  height: auto !important; /* Min-Height Fast Hack for IE*/
  height: 600px;
  margin: 0 0 0 15px;
  padding-top: 35px;
  float: left;
  }
  
/* =Sidebar Blocks
----------------------------------------------------------------------------------*/

/* =Guest Information
----------------------------------------------------------*/

#sidebar-right #service-times {width: 265px; height: 70px; float: none; margin: 35px 0 0 25px;}
#sidebar-right #service-times img {margin-top: 0px;}

.directions {width: 267px; background: #BC6336; text-align: center; margin: 10px 0 0 25px; padding: 5px 0; cursor: pointer;}
.directions p {padding-bottom: 0;}

.directions a, .directions a:visited {
  color: #EEE; 
  font-weight: bold; 
  text-decoration: none; 
  text-transform: uppercase;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 14px;
  display: block; 
  }

#expectations {width: 267px; margin: 10px 0 0 25px;}
#expectations h3 {text-align: center; text-transform: capitalize; font-size: 16px;}
#expectations dl, #expectations h3 {
  background: #EEE url(images/blocktop.png) top left repeat-x; 
  border: 1px solid #CCC; 
  border-width: 1px 1px 0;
  }

#expectations h3 {padding: 10px;}

#expectations dt {
  background: #EEE url(images/blocktop.png) top left repeat-x;
  border: 1px solid #CCC; 
  border-width: 0 0 1px;
  font-weight: bold; 
  font-size: 14px;
  padding: 10px;
  position: relative;
  }

span.ui-accordion-right {
  background: url(images/collapsed.gif) left center no-repeat; 
  position: absolute; 
  top: 11px;
  right: 13px;
  width: 13px; 
  height: 15px;
  }

#expectations dt.active {color: #BC6336; border-width: 0; padding-bottom: 2px;}
#expectations dt.active span.ui-accordion-right {
  background: url(images/expanded.gif) left center no-repeat;
  width: 15px;
  height: 13px;
  }

#expectations dd {color: #666666; padding: 0 10px;}

#sidebar-right .block-user {margin: 40px;}
#sidebar-right .callout {margin-top: 100px;}

#block-block-3 h3 {margin: 0 0 10px 0; text-align: center}
#block-block-3 p {margin-bottom: 10px;}
#block-block-3 img {margin: 0 0 0 15px;}

/* =Content Nodes
----------------------------------------------------------------------------------*/

.ministry-node, .audio-node, .news-node {width: 610px; float: left;}

.entry {border-top: 1px solid #EEE; border-bottom: 3px solid #CCC; float: left; padding-bottom: 10px;}

.list-image {float: left; background:url(images/list-frame.gif) top left no-repeat; margin: 15px 0 25px 10px;}
.list-image img {padding: 13px 18px;}
.blog .list-image {margin: 15px 10px 0;}

.full .list-image {margin: 5px 10px 10px;}

.text {width: 310px; float: right; margin: 15px 20px; font-size: 14px;}
.blog .text {width: auto; float: none;}
.text h2.title {font-size: 30px; line-height: 1em; font-weight: normal; margin-bottom: 10px;}
.text ul li {padding: 5px 15px;}

.full .text {float: none; width: auto;}

.content ul {padding-bottom: 10px;}
.content ul li {list-style-position: inside;}


/* =News
----------------------------------------------------------*/

.more a, .more a:visited {color: #BC6336; text-decoration: none;}
.more a:hover {text-decoration: underline;}
.more span {color: #666666;}

.meta {
  float: right; 
  margin-bottom: 20px;
  padding-right: 10px;
  width:125px;
  }

.meta .comment-count {float: left; padding: 5px 5px 0 0; color: #666666;}

.meta a {
  background: url(images/list-bubble.gif) center left no-repeat; 
  width: 30px;
  height: 27px;
  color: #EEE; 
  font-size: 15px; 
  font-weight: bold; 
  text-decoration: none; 
  padding: 2px 0 0 11px; 
  display: block;
  float: right;
  }

.news-node ul.links li {padding: 0;}
.read-more a, .read-more a:visited {
  font-weight: bold;
  background: #517FB9;
  color:#FFFFFF;
  padding:5px 8px;
  font-size: 12px;
  text-decoration: none;
  }

.read-more a:hover {background: #CC6D3E;}

.pictures {clear: both; margin: 20px 10px;}
.pictures a {display: block; width: 150px; height: 150px; float: left; margin: 0 4px 5px 4px;}
.pictures a span {background: url(images/frame.gif) top left no-repeat; width: 150px; height: 150px; display: block;}
.pictures a img {padding: 11px 13px;}

.submitted {font-style: italic; font-size: 13px; font-weight: bold;}
#block-block-11, #block-block-12, #block-block-13 {margin: 80px 5px -90px 25px;}

/* =Audio
----------------------------------------------------------*/

.audio-node .text {font-size: 15px;}
.audio-node .text h2.title {font-size: 24px; padding-bottom: 0;}

.video-player {
  width: 320px; 
  min-height: 20px; 
  background: #EEE url(images/blocktop.png) top left repeat-x;
  border: 1px solid #CCC; 
  cursor: pointer; 
  padding: 10px;
  margin: 10px 0 10px -20px;
  }

.video-player a {
  width: 260px; 
  display: block; 
  background: url(images/video.png) center left no-repeat;
  padding-left: 50px;
  margin-left: 10px;
  color: #666666;
  }

.video-player .panel {padding-top: 20px;}

.field-field-part {color: #666666; font-size: 18px;}
.field-field-date div {float: left;}
.field-field-speaker {clear:  both;}
.field-field-speaker div {float: left;}
.field-field-mp3 {float: left; margin: 15px 0;}

.field-field-part .field-label,
.field-field-mp3 .field-label
 {display: none;}

.audio-file {padding: 35px 0 10px 0;}

.download {float: left;}

.download a {display: block; background: url(images/download.gif) top left no-repeat; width: 154px; height: 31px; text-indent: -5000px;}
.sheet {float: left; display: block; background: url(images/deeper.gif) 0 -1px no-repeat; width: 120px; height: 31px; text-indent: -5000px; padding-left: 30px;}

#filter {height: 80px;}
#filter img {float: left; margin-right: 20px;}
#filter p {padding: 10px 0 0 0; font-size: 17px; color: #666666;}
.views-exposed-form {margin:0 0 20px 90px;}
.views-exposed-form label {display: none;}
.views-exposed-form select {margin-top: 0; color: #666666;}
.views-exposed-form #edit-submit {margin: 0;}

#block-block-4 {margin: 120px 20px 0 20px;}

/* =Worship Team Audio
----------------------------------------------------------*/

#block-block-9 {margin: 0 0 0 30px;}
#block-block-9 p {padding-bottom: 0;}
.worship h2.title {font-size: 24px; padding: 0 0 10px 3px; font-weight:normal; line-height:1em; margin-bottom:10px;}
.worship .entry {margin-left: 20px; padding: 20px 10px; font-size: 15px;}
.worship .audio {width: 275px; float: right;}
.worship #attachments {display: none;}
.chart, .song-upload, .manage, .schedule  {float: left; display: block; background: url(images/chart.gif) top left no-repeat; width: 150px; height: 31px; text-indent: -5000px; padding-left: 30px;}
.song-upload {background: url(images/song-upload.gif) top left no-repeat; margin: 0 0 10px 0;}
.manage {background: url(images/manage.gif) top left no-repeat; margin: 0 0 10px 0;}
.schedule {background: url(images/schedule.gif) top left no-repeat; margin: 0 0 10px 0;}
.worship .download {float: left;}
.worship .audio-file {float: left; padding: 25px 5px 10px;}

/* =Comments
----------------------------------------------------------------------------------*/

#comments {clear: both;}

.box {clear: both; padding: 10px 20px 20px 25px;}
.box h2 {text-transform: capitalize;}

.comment {
  margin: 10px 20px; 
  padding: 10px 10px 10px 110px;
  background: #FFF url(images/bubble1.gif) 20px center no-repeat;
  border: 1px solid #AAA;
  }
  
.comment .bubble {float: right;}
.comment h3 {color: #666666;}
.comment .submitted {color: #666666; font-size: 11px; float: right;}

#comments .even {background: #EEE url(images/bubble2.gif) 20px center no-repeat; border-color: #AAA;}

#comment-form #edit-submit {display: inline;}
#comment-form #edit-preview {display: inline; margin-left: 15px;}
#comment-form #edit-comment {height: 180px;}

/* =Give, Visit, 404 Pages
----------------------------------------------------------------------------------*/

#give, #visit, #lost, #filter, .callout, #block-block-6, .messages, .full {
  background: #EEE url(images/blocktop.png) top left repeat-x;
  border: 1px solid #CCC; 
  font-size: 15px;
  padding: 15px;
  margin: 10px 20px;
  }
  
#give form {margin: 20px;}

#give h4 {padding: 10px 0; font-size: 16px;}

#give img {float: left; padding-right: 20px;}

#block-block-2 {margin-top: 20px;}

#map {margin-top: 20px;}

#lost a, #lost a:visited {display: block; font-weight: bold; padding: 5px 0;}

#edit-site a, #edit-site a:visited {
  display: block;
  background: #333333;
  color: #ffffff;
  margin-top: 20px;
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  width: 200px;
  text-align: center;
  }
  
#edit-site a:hover {background: #BC6336;}


/* =Forms
----------------------------------------------------------------------------------*/

.webform-node form {clear: both;}

input, textarea, select {
  background-color: #FEFEFE;
  border: 1px solid  #CCC;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 18px;
  margin-top: 5px;
  padding: 4px;
  width: 300px;
  }

input.button, #edit-submit, #edit-preview {
  background-color:#333333;
  border:0 none;
  color:#FFFFFF;
  cursor:pointer;
  display:block;
  font-weight:bold;
  margin:20px 0 25px;
  padding:5px 14px;
  width:auto; 
  }

input.button:hover, #edit-submit:hover, #edit-preview:hover {background-color: #BC6336;}

input.form-radio {width: auto;}

#contact-mail-page, #user-login {margin: 20px;}
#contact-mail-page .form-text {width: 275px;}

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

.footer-wrap {margin: 0 auto; width: 960px;}
#footer p {font-size: 13px; padding: 20px; float: right;}
#footer p a, #footer p a:visited {color: #bc6336; text-decoration: none;}
#footer p a:hover {text-decoration: underline;}
#footer a#facebook, #footer a#twitter {
  display: block;
  float: left;
  overflow:hidden;
  text-indent: -5000px;
  margin: 15px 0 0 20px;
  }
  
#footer a#facebook {width:77px; height: 29px; background: url(images/facebook.jpg) top left no-repeat;}
#footer a#twitter {width:82px; height: 29px; background: url(images/twitter.gif) top left no-repeat;}
  


/* =Kenya
----------------------------------------------------------------------------------*/

#kenya .header {margin: 15px 0 0 50px;}
#kenya .pictures {float: left; margin: }
.kenyan-ministries {border-top: 3px solid #DDD; padding-top: 20px; margin-top: 20px;}

#sidebar-right .video {margin: 10px 28px;}

/* =Misc
----------------------------------------------------------------------------------*/

#calendar {margin: 20px;}
#blocks .even {background-image: none;}
.help {padding: 20px;}
.node-unpublished {background: none;}
#edit-field-audio-file-0-wrapper {background: #CCC;}
#sidebar-right #user-login-form {text-align: left;}
#sidebar-right #user-login-form input.form-text {width: 200px;}
.item-list .pager {padding: 20px 0;}
.item-list .pager li {padding: 0;}

/* =CandyZone
----------------------------------------------------------------------------------*/

#candyzone {
  background: #4D2908; 
  margin: 20px; 
  padding: 20px; 
  font-size: 24px; 
  color: #FA5B11; 
  font-weight: bold;
  text-align: center;
  position: relative;
  }
#candyzone .safe {
  background: url(images/safe.gif) top left no-repeat;
  width: 360px;
  height: 136px;
  text-indent: -5000px;
  margin: 15px 0 0 75px;
  }
  
#candyzone a, #candyzone a:visited {color: #f9a311;}
#candyzone a:hover {text-decoration: none;}
#candyzone .fun {color: #EEE; text-align: left; font-weight: normal; margin: 0 0 0 135px;}
#candyzone .fun li {list-style-type: none;}
#candyzone #zorro {position: absolute; top: 405px; left: 10px;}

#block-block-6 {margin-top: 152px; color: #666666;}
#block-block-6 h3 {
  background: url(images/prize.gif) top left no-repeat;
  width: 165px;
  height: 88px;
  text-indent: -5000px;
  margin-left: 34px;
  }

#block-block-6 ul li {margin: 3px 5px; list-style-position: inside;}
#block-block-6 ul li span {color: #CC6D3E;}
.rotator {width: 200px; height: 200px; overflow: hidden; border: 3px solid #DDD; margin: 10px 0 10px 10px;}


/* =Dropdown Menu
----------------------------------------------------------------------------------*/

ul.bearnav-menutop {
  margin: 22px 0 0 25px;
  padding: 0 0 0 0;
  list-style: none;
  }

ul.bearnav-menutop li {float: left; height: 28px;}

ul.bearnav-menutop li > div {padding-right: 35px;}

ul.bearnav-menutop li > div > a {padding: 0 !important;}

ul.bearnav-submenu li {float: none; padding-left: 5px;}

ul.bearnav-menutop li ul {
  display: none;
  position: absolute;
  top: 12px; 
  left: 0;
  width: 170px;
  background: #ffffff;
  z-index: 9;
  padding: 0;
  border-bottom: 2px solid #DDD;
  }

ul.bearnav-menutop li.over ul {display: block;}

#mainNav ul.bearnav-menutop li ul li {
  position:relative;
  left: 0;
  top: 0;
  z-index: 10;
  width: 165px;
  padding: 10px 0 10px 5px;
  background: none;
  border-bottom: 1px solid #b8b8b3;
  height: auto;
}

/* =To Help IE
-------------------------------------*/

#mainNav ul.bearnav-menutop li ul { 
	/* to override top and left in browsers other than IE, which will position 
	 * to the top right of the containing li, rather than bottom left */
	top: auto;
	left: auto;
	margin: 2px 0 0;
	height: auto;
  }

/* =Look and Feel
-------------------------------------*/

ul.bearnav-menutop ul li {font-size: 12px; line-height: 12px;}

ul.bearnav-menutop li.first {margin-left: 0;}
ul.bearnav-submenu li.first {margin: 0 0 0 .5em;}
ul.bearnav-submenu li.last {border: none;}

ul.bearnav-menutop a:hover, ul.bearnav-menutop li a.active-top {color: #fd9e38;}
ul.bearnav-menutop li.last a {padding-right: 0;}

#mainNav ul.bearnav-submenu a {color: #333333; text-align: left; font-weight: normal; font-size: 12px;}
#mainNav ul.bearnav-submenu a:hover, ul.bearnav-submenu li a.active {color: #CC6D3E;}

/* --------------- System Tabs  --------------- */

.tabs {
  margin: 20px;
}
.tabs ul.primary {
  padding: 0 3px;
  margin: 0;
  overflow: hidden;
  border: none;
  background: transparent url(images/tabs-border.png) repeat-x left bottom;
}
.tabs ul.primary li {
  display: block;
  float: left; /* LTR */
  vertical-align: bottom;
  margin: 0 5px 0 0; /* LTR */
}
.tabs ul.primary li.active a {
  border-bottom: 1px solid #ffffff;
}
.tabs ul.primary li a {
  color: #000;
  background-color: #ededed;
  height: 1.8em;
  line-height: 1.9;
  display: block;
  font-size: 0.929em;
  float: left; /* not LTR */
  padding: 0 10px 3px;
  margin: 0;
  text-shadow: 0 1px 0 #fff;
  -khtml-border-radius-topleft: 6px;
  -moz-border-radius-topleft: 6px;
  -webkit-border-top-left-radius: 6px;
  border-top-left-radius: 6px;
  -khtml-border-radius-topright: 6px;
  -moz-border-radius-topright: 6px;
  -webkit-border-top-right-radius: 6px;
  border-top-right-radius: 6px;
}
.tabs ul.primary li.active a {
  background-color: #ffffff;
}
.tabs ul.secondary {
  border-bottom: none;
  padding: 0.5em 0;
}
.tabs ul.secondary li {
  display: block;
  float: left; /* LTR */
}
.tabs ul.secondary li:last-child {
  border-right: none; /* LTR */
}
.tabs ul.secondary li:first-child {
  padding-left: 0; /* LTR */
}
.tabs ul.secondary li a {
  padding: 0.25em 0.5em;
}
.tabs ul.secondary li a.active {
  background: #f2f2f2;
  border-bottom: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}
ul.action-links {
  list-style: none;
  margin: 5px;
  padding: 0.5em 1em;
}
ul.action-links li {
  display: inline-block;
  margin-left: 10px;
}
ul.action-links li a {
  padding-left: 15px;
  background: url(images/add.png) no-repeat left center;
  margin: 0 10px 0 0;
}