/* @override http://citylifeinternational.cpmpreview1.com/css/styles.css */

/*======
FILE: styles.css
CREATED: 7/9/07
AUTHOR: Ben Otero (ben@churchplantmedia.com)

TABLE OF CONTENTS

I.		GLOBALS
II. 	HEADINGS
III. 	HEADER
IV.		NAVIGATION
V.		PRIMARY CONTENT
VI. 	SECONDARY CONTENT (SIDEBAR)
VII.	FOOTER
VIII.	CALENDAR
IX.		SERMON SECTION
X.		MISCELLANEOUS (FORMS, TABLES, DEFINITIONS, ETC)
======*/


/*=====>> I. GLOBALS <<=====*/
* { margin: 0; padding: 0; line-height: 1; }
body { background:url(/images/bg_body.jpg); font-size:62.5%; font-family: "Trebuchet MS", Arial, Helvetica, Verdana, Tahoma, sans-serif; }
hr { display: none; }
#skip { position: absolute; text-indent: -9999px; list-style: none; }
#container { width: 768px; margin: 50px auto 0; }
a { overflow: hidden; }

.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 */

/*=====>> II. HEADINGS <<=====*/
#header h1{ display: inline; float: left; width: 195px; height: 50px; margin: 4px 0 0 18px; background: url(/images/logo2.gif) no-repeat; text-indent: -9999px; }
#header h1 a { display: block; width: 200px; height: 50px; }



/*=====> III. HEADER <<=====*/
#header { position: relative; float: left; width: 752px; margin-top: 25px; border: 8px solid #FFF; border-bottom: 0; background: url(/images/bg_header.jpg) no-repeat; }
#header #service-times { position: absolute; top: 4px; right: 12px; }
#header #service-times p { color: #FFF; font-size: 1.2em; }
#header #service-times img { border: 0; vertical-align: middle; }

/*=====>> IV. NAVIGATION <<=====*/
#nav { display: inline; float: right; margin: 32px 8px 0 0; list-style: none;  }
#nav li { float: left; margin-right: 4px; font-size: 1.2em; text-transform: uppercase; }
#nav li a { display: block; padding: 7px 8px 6px; background: #15161C; color: #FFF; text-decoration: none; }
	#nav li a:hover { background: #FFF url(/images/bg_nav_li_a.gif) repeat-x left bottom; color: #46494e; }

#nav li ul { position: absolute; left: -999em; z-index: 999; width: 148px; border: 5px solid #D4D4D4;   list-style: none; line-height: 1; }
#nav li li { margin: 0; font-size: 1.0833em; text-transform: none; }

#nav li ul ul { margin: -28px 0 0 148px; }
#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; }
#nav li li a { width: 140px; padding: 5px 4px; color: #15161C; background: #D4D4D4; }
#nav li li a:hover { background: #FFF; color: #DC6401; }

/* =Container-Innerß
---------------------------------------------------------------------
*/

#container-inner{
   float: left;
   width: 752px;
   border: 8px solid #FFF;
   border-top: 0;
   background: url(/images/bg_container-inner.jpg) repeat-y;
}

#container-inner img#home_header,
#container-inner img#sub_header{
   clear: both;
   display: block;
   margin: 0 auto 4px;
   padding: 5px;
   background: url(/images/bg_sub_header.jpg) no-repeat center center;
}

#container-inner img#home_header{
   background: url(/images/bg_home_header.jpg) no-repeat center center;
}

/* =Content-Wrap
---------------------------------------------------------------------
*/

#content-wrap{
   display: inline; /* IE6 double margin float bug hack */
   float: left;
   width: 736px;
   margin: 0 8px;
   padding-top: 20px;
   background: url(/images/bg_content-wrap.gif) repeat-y;
   border-top: 5px solid #15161B;
}

body#home #content-wrap{
   padding-top: 10px;
   background: none;
   border: 0;
}

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

#content{
   display: inline; /* IE6 double margin float bug hack */
   float: right;
   width: 491px;
   margin: 0 16px;
}

body#home #content{
   float: left;
   width: auto;
   margin: 0 0 10px;
}

#content h3{
   margin-bottom: .5em;
   padding-bottom: 4px;
   background: url(/images/bg_content_h3.gif) no-repeat left bottom;
   color: #FFFFFF;
   font-size: 1.4em;
   font-weight: normal;
   text-transform: uppercase;
}

#content h4{
   margin-bottom: 1em;
   color: #CE6100;
   font-size: 1.4em;
   font-weight: normal;
}

#content h5{
   margin-bottom: 1em;
   color: #9E9E9E;
   font-size: 1.5em;
   font-weight: normal;
   font-family: Georgia, Times, "Times New Roman", serif;
}

#content h6{
   margin-bottom: 1em;
   color: #9E9E9E;
   font-size: 1.5em;
   font-weight: normal;
}

#content p,
#content ul,
#content ol,
#content td{
   margin-bottom: 1em;
   color: #FEFEFC;
   font-size: 1.2em;
   line-height: 1.5;
}

#content ul,
#content ol{
   margin-left: 3em;
}

#content ul#byline{ display:inline; float:left; margin:0 0 20px; font-size: 1.1em; list-style: none; width:340px; border-bottom:1px solid #14151b;}
#content ul#byline li { float:left; display:inline; margin-right:10px;  }

#content li{
   line-height: 1.5;
}

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

#content a{
   color: #CE6100;
}

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

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

#content img#mcms_stats{
   display: none;
}


	/*======>> UPCOMING EVENTS <<=====*/
	body#home #content div#upcoming-events			{ float: left; width: 222px; padding: 0 0 0 10px; 	}
	body#home #content div#upcoming-events h3 		{ background: url(/images/bg_content_upcoming-events_h3.jpg) no-repeat left bottom; }
	body#home #content div#upcoming-events div 		{ margin-bottom: 5px; padding: 0 0 5px;  }
	body#home #content div#upcoming-events h4 		{ margin:0 0 .25em; color: #79A0BF; font-size: 1.3em; 	text-transform:uppercase; }
	body#home #content #upcoming-events h4 a 		{ color:#79a0bf; text-decoration:none; }
		#home #content #upcoming-events h4 a:hover 	{ text-decoration:underline; }
	body#home #content div#upcoming-events p 		{ margin: 0 0 0 10px; color:#fff; line-height:1.2}
	
	/*=====>> WELCOME <<=====*/
	body#home #content div#welcome { float: left; background: url(/images/bg_content_div.jpg) no-repeat right top; width: 235px; padding: 0 5px 0 10px; 	}
	body#home #content div#welcome h3{ background: url(/images/bg_content_welcome_h3.jpg) no-repeat left bottom; 	}
	body#home #content div#welcome p { line-height: 1.2; 	}
	body#home #content div#welcome p b { color: #79A0BF; font-weight: normal; 	}
	body#home #content div#welcome img { border: 0; 	}
	
	/*=====>> RECENT SERMONS <<=====*/
	body#home #content div#recent-sermons{
	   float: left; width: 226px; padding: 0 15px 0 10px; line-height: 1.5;
	   background: url(/images/bg_content_div.jpg) no-repeat right top;
	}
	body#home #content div#recent-sermons h3 { background: url(/images/bg_content_recent-sermons_h3.jpg) no-repeat left bottom; 	}
	body#home #content div#recent-sermons h4 { margin-bottom: 0; padding-right: 75px; font-size: 1.2em; text-transform: uppercase; }
	body#home #content div#recent-sermons h4 a { color: #fff; text-decoration:none; }
	body#home #content div#recent-sermons p { color: #79A0BF; }
	body#home #content div#recent-sermons .sermonbox { position: relative;  margin-bottom: 10px;	}
	body#home #content div#recent-sermons .sermonbox p.play { position: absolute; top: 0; right: 0;    text-indent: -9999px; }
	body#home #content div#recent-sermons .sermonbox p.play a { display: block; width: 56px; height: 19px; background: url(/images/bg_play.gif) no-repeat; }
	body#home #content div#recent-sermons #podcast p { color: #FFF; font-size: 1.1em; line-height: 1.1; 	}
	body#home #content div#recent-sermons #podcast img { border: 0; }

#content #text { clear: both; }

/*=====>> SERMON STYLES <<=====*/
.#content .sermonbox { margin-bottom: 20px; }
#content .sermonbox h4 { margin-bottom: 5px; }
#content .sermonbox p { padding: 0; margin: 0; }
#content .sermonbox p.sermonlink { margin-top: 10px; }
#content .sermonbox p.eventtime { margin-bottom: 0; }
#content #mediabox{   
	float:right;  width:125px;
   padding: 10px 5px 5px; margin:-1.5em 0 0;
   background:#252731; border:1px solid #14151B;
   font-size: 1.1em;
   list-style: none;
}

#content #mediabox li{ font-weight: bold; margin:5px 0; }

#content #mediabox li a{
   display: block;
   height: 16px;
   padding:2px 0 2px 20px;
   background-repeat: no-repeat;
   background-position:0 2px;
}
#content #mediabox li#mb_links { margin:-10px -5px 10px; background:#14151b; padding:5px; font-size:1.2em;}
#content #mediabox li#mb_print a{
   background-image: url(/images/mb_print.gif);
}

#content #mediabox li#mb_video a{
   background-image: url(/images/mb_video.gif);
}

#content #mediabox li#mb_download a{
   background-image: url(/images/mb_download.gif);
}

#content #mediabox li#mb_notes a{
   background-image: url(/images/mb_notes.gif);
}

#content #mediabox li#mb_jukebox a{
   background-image: url(/images/mb_jukebox.gif);
}

#content #mediabox li#mb_podcast a{
   background-image: url(/images/mb_podcast.gif);
}


/*=====>> CALENDAR <<=====*/
#content table.calendar{
   margin-bottom: 25px;
   border: 1px solid #3A3E46;
   border-right: 0;
   border-bottom: 0;
   border-collapse: collapse;
}

#content table.calendar caption{
   padding-bottom: 10px;
   color: #FCFDFE;
   font-size: 1.4em;
}

#content table.calendar caption span{
   color: #8A4700;
}

#content table.calendar th{
   padding: 6px 0;
   background: #959596;
   color: #15161C;
   font-size: 1.3em;
   font-weight: normal;
}

#content table.calendar td{
   width: 68px;
   height: 68px;
   padding: 2px;
   border: 1px solid #3A3E46;
   border-left: 0;
   border-top: 0;
   background: #484D56;
   color: #FCFDFE;
   font-size: 1em;
   vertical-align: top;
}

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

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

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

#content table.calendar td li{
   margin-bottom: .75em;
   font-size: 1.1em;
   line-height: 1.2;
}

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

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

/*========== MINI CALENDAR ==========*/
#home #content table.calendar caption span	{ color:#fff; }
#home #content table.calendar td			{ 
											  width: 28px; height: 28px; border: 1px solid #3a3e46; border-top: 0; border-left: 0; 
									  		  color: #fcfdfe; font-size: 1.1em; font-weight: normal; text-align: center; 
											}
#home table.calendar td.linked-day			{ background:#fff; }
#home table.calendar td a					{ background:#fff; color:#000; display:block; line-height:28px; }
#traildiv									{ position:absolute; top:0; left:0; z-index:999; visibility:hidden; width:200px; height:100px; color:#FFF; }
#traildiv ul								{ padding: .75em; padding-bottom: 0; border: 3px solid #000; background: #484d56; font-size: 1.1em; }
#traildiv li								{ color: #FFF; margin-left: 1em; margin-bottom: .75em; }
#traildiv a									{ color: #FFF; text-decoration: none; }											
/*======== END MINI CALENDAR =========*/											

#content .blog{
margin-left: 25px;
margin-right: 25px;
}

#content .blog{
margin-bottom: 20px;
}

#content .blog p.date{
clear: both;
color: #ffffff;
}

#content #comments{
clear: both;
/*width: 100%;*/
margin-top: 25px;
margin-right: 25px;
}

#content #comments h4{
clear: left;
margin-bottom: 10px;
padding: 5px 0;
width: 97%;
border-top: 1px solid #24252f;
border-bottom: 1px solid #24252f;
}

#content #comments p.comment-name{
margin-bottom: 5px;
padding: 0 3px;
background: #15161b;
font-size: 100%;
text-transform: uppercase;
font-family: "Trebuchet MS", Arial, Helvetica, Verdana, Tahoma, sans-serif;
}

#content #comments .comment{
float: left;
width: 90%;
margin-bottom: 10px;
padding: 5px;
background: #24252f;
/*border-bottom: 1px solid #F2F2F2;*/
}

#content #comments p.comment-thanks{
color: #E76522;
font-style: italic;
}

#content #comments p.comments-login{
clear: left;
padding: 5px 0;
/*border-bottom: 1px solid #F2F2F2;*/
}

#content #comments textarea{
   display: block;
   width: 95%;
   padding: 5px;
   font-size: 100%;
   font-family: "Trebuchet MS", Arial, Helvetica, Verdana, Tahoma, sans-serif;
}

#content #comments input#comment-submit{
   display: block;
   padding: 5px;
   border: 0;
   background: #a05004;
   color: #FFF;
   font-size: 100%;
   font-family: "Trebuchet MS", Arial, Helvetica, Verdana, Tahoma, sans-serif;
   text-transform: lowercase;
}

#content #comments div.comment-text{
   color: #F2F2F2;
   font-size: 90%;
   line-height: 1.5;
}

/* blog */

body#blog #content{
   position: relative;
}

#content p#subscribe{
   position: absolute;
   top: 0;
   right: 0;
}

#content p#subscribe a{
   display: block;
   padding: 3px 20px 3px 0;
   background: url(/images/bg_subscribe_blog.gif) no-repeat right center;
   color: #ABABAF;
   text-decoration: none;
}

body#blog #content h3{
   margin-bottom: 1em;
}

body#blog #content #detail h3{
   margin-bottom: .5em;
}

body#blog #content h4{
   margin-bottom: .25em;
}

body#blog #content h4 a{
   color: #FFF;
   text-decoration: none;
}

body#blog #content h4 a:hover{
   text-decoration: underline;
}

body#blog #content p.byline{
   margin-bottom: .75em;
   color: #FFF;
   font-size: 1.3em;
}

body#blog #content p.byline span.author{
   margin-left: 5px;
   color: #ABABAF;
   font-size: .8462em;
}

#content .post{
   float: left;
   width: 491px;
   margin-bottom: 25px;
}

#content .post p.content{
   margin-bottom: .5em;
   line-height: 1.25;
}

#content .post-foot{
   float: left;
   padding: 3px 10px;
   background: #2B2C38;
}

#content .post-foot p{
   margin: 0;
   color: #ABABAF;
   font-size: 1.1em;
}

#content .post-foot p.category{
   float: left;
}

#content .post-foot p.category a{
   color: #FFF;
}

#content .post-foot p.comments{
   float: right;
}

#content .post-foot p.comments a{
   display: block;
   padding: 3px 0 3px 22px;
   background: url(/images/bg_comments_blog.gif) no-repeat left center;
   color: #ABABAF;
   text-decoration: none;
}

#content .post-foot p.comments a:hover{
   text-decoration: underline;
}

#content #post-options{
   float: left;
   margin: -5px 0 10px;
   padding: 2px 10px;
   background: #2B2C38;
}

#content #post-options p{
   float: left;
   margin: 0;
   padding: 2px 0 2px 20px;
   background: url(/images/bg_email_blog.gif) no-repeat left center;
   color: #ABABAF;
   font-size: 1.1em;
}

#content #post-options a{
   color: #FFF;
}

#content #post-options p.comments{
   float: right;
   background-image: url(/images/bg_comments_blog.gif);
}

body#blog #content #comments{
   margin: 0;
}

body#blog #content #comments p.comments{
   padding: 4px 33px 5px;
   border-top: 1px solid #15161C;
   background: #22232C url(/images/bg_comments_blog.gif) no-repeat 11px center;
   color: #ABABAF;
   font-size: 1.1em;
}

body#blog #content #comments .comment{
   width: 491px;
   padding: 0;
}

body#blog #content .author-box{
   float: left;
   width: 491px;
   margin-bottom: 25px;
   background: #2A2B35;
}

body#blog #content #comments .comment h5,
body#blog #content .author-box h5{
   padding: 10px 14px;
   border-bottom: 1px solid #1F2028;
   background: #31323E;
   color: #87868E;
   font-size: 1.2em;
   font-weight: bold;
   font-family: "Trebuchet MS", Arial, Helvetica, Verdana, Tahoma, sans-serif;
}

body#blog #content .author-box h5{
   margin-bottom: .75em;
}

body#blog #content #comments .comment h5 span.commenter,
body#blog #content .author-box h5 span.author{
   padding-bottom: 2px;
   border-bottom: 1px dashed #64646C;
   color: #BCBCBD;
   font-size: 1.25em;
}

body#blog #content #comments .comment p,
body#blog #content .author-box p{
   margin: 0;
   margin: 0 14px 1em;
   color: #DCDCDE;
}

body#blog #content .author-box p{
   color: #FFF;
}

body#blog #content .author-box img{
   margin: 10px 9px 5px 11px;
   border: 2px solid #1A1B22;
}

body#blog #content #comments form{
   margin-bottom: 15px;
}

body#blog #content #comments label{
   display: block;
   margin-bottom: .5em;
   font-size: 1.4em;
   color: #DCDCDE;
}

body#blog #content #comments textarea{
   font-size: 1.2em;
}

#content #send_blog fieldset{
   border: 0;
}

#content #send_blog label{
   display: block;
   width: 200px;
   margin-bottom: .5em;
}

#content #send_blog input{
   display: block;
   width: 200px;
   padding: 2px;
   font-family: "Trebuchet MS", Arial, Helvetica, Verdana, Tahoma, sans-serif;
   font-size: 12px;
}

#content #send_blog input.hidden{
   display: none;
}

#content #send_blog input#send{
   width: auto;
}

#content #send_blog textarea{
   width: 300px;
   height: 100px;
   padding: 4px;
   font-size: 12px;
   font-family: "Trebuchet MS", Arial, Helvetica, Verdana, Tahoma, sans-serif;
}

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

#sidebar{
   display: inline; /* IE6 double margin float bug hack */
   float: left;
   width: 187px;
   margin: 0 11px 25px;
}

#sidebar h3{
   margin-bottom: .5em;
   padding-bottom: 4px;
   background: url(/images/bg_sidebar_h3.gif) no-repeat left bottom;
   color: #9E9E9E;
   font-size: 1.2em;
   text-transform: uppercase;
}

#sidebar a{
   color: #CE6100;
}

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

#sidebar .event{
   margin-bottom: 15px;
}

#sidebar .event h4{
   margin-bottom: .25em;
   color: #79A0BF;
   font-size: 1.3em;
   font-weight: normal;
}

#sidebar .event p{
   margin-left: 5px;
   color: #FFF;
   font-size: 1.2em;
   line-height: 1.3;
}

#sidebar #church-projects h4{
   margin-bottom: .25em;
   color: #90B3D0;
   font-size: 1.4em;
   font-weight: normal;
}

#sidebar #church-projects p{
   color: #F5EDE3;
   font-size: 1.4em;
   line-height: 1.3;
}

#sidebar #church-projects p.current{
   margin-top: 10px;
   padding-top: 10px;
   border-top: 1px solid #1A1A22;
   font-size: 1.2em;
}

#sidebar #church-projects p.current a{
   color: #CE6100;
}

#sidebar #church-projects a{
   color: #F5EDE3;
}

#sidebar #church-projects img{
   display: block;
   margin-bottom: 5px;
   border: 3px solid #0D0E11;
}

#sidebar #blog-sidebar ul{
   margin-bottom: 20px;
}

#sidebar #blog-sidebar li{
   margin-bottom: .5em;
   font-size: 1.2em;
   list-style: none;
}

#sidebar #blog-sidebar a{
   color: #FFF;
}

#sidebar #blog-sidebar a:hover{
   color: #C26409;
   text-decoration: none;
}

#sidebar #blog-sidebar p { font-size:1.2em; line-height:1.5em; color:#fff; margin-bottom:1em; }
#blog #sidebar #blog-sidebar img, #sidebar #blog-sidebar img.bio { float:left; margin:0 5px 5px 0; border:4px solid #40424F; clear:left; }
#sidebar #blog-sidebar h4 { font-size:1.4em; font-weight:normal; margin-bottom:0; color:#A2C3E4;  }

/* =Quicklinks
---------------------------------------------------------------------
*/

#quicklinks{
   display: inline; /* IE6 double margin float bug hack */
   clear: both;
   float: left;
   width: 753px;
   height: 115px;
   margin: 0 8px;
   padding:8px 0 0;
   /*padding: 8px 1px;*/
   background: url(/images/bg_quicklinks.jpg) no-repeat;
}
#quicklinks ul { margin-left:7px; }
#quicklinks li{
   display: inline; /* IE6 double margin float bug hack */
   float: left;   
   list-style: none;
}
#quicklinks a { display: block; width:225px; height:88px; border: 8px solid #7A7A7A; text-indent:-9999px; margin:0 3px; }
#quicklinks li#coffeetalk a { background:url(/mediafiles/quicklink1.jpg) no-repeat; margin-left:3px; }
#quicklinks li#communitygroups a { background:url(/mediafiles/quicklink2.jpg) no-repeat; }
#quicklinks li#ourvision a { background:url(/mediafiles/quicklink3.jpg) no-repeat; }
#quicklinks a:hover { border: 8px solid #4D5F71; }

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

#footer{
   clear: both;
   padding: 0 25px 25px;
}

#footer p{
   float: left;
   color: #FFF;
   font-size: 1.1em;
   font-weight: normal;
}

#footer p.powered{
   float: right;
   font-size: 1.1em;
   font-weight: normal;
}

#footer a{
   color: #FFF;
   text-decoration: none;
}

#footer a:hover{
   color: #FFF;
   text-decoration: underline;
}

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash #content h3 {
	visibility: hidden;
	letter-spacing: -6px;
	font-size: 22px;
}

.sIFR-hasFlash #sidebar h3 {
	visibility: hidden;
	letter-spacing: -6px;
	font-size: 19px;
}