/* Site: Mosaic Christian Church */
/* @override http://mosaicchristian.cpmpreview1.com/css/styles.css */

/* @group GLOBALS */
* {
   margin: 0;
   padding: 0;
   line-height: 1;
}

body { background: #a6a08c url(/images/bg_body.jpg) repeat center top; font-size:62.5%; font-family:Helvetica, Arial, Verdana, sans-serif; }

hr{
   display: none;
}

#skip{
   position: absolute;
   text-indent: -9999px;
   list-style: none;
}

#container{
   position: relative;
   width: 658px; padding:0;
   margin: 75px auto 0; background:#fff; 

}

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

/* @end */

/* @group Header */
#header				{ position:relative; padding:0; width:100%; }
#banner				{ 
					  border:2px solid #e7e7e7; width:414px; margin:6px 5px 0 0; 
					  background:url(/mediafiles/home-header.jpg) no-repeat 5px 5px; height:297px; 
					  position:absolute; top:0; left:234px;
					}
#home #banner		{ background:none; }
#header h1			{ 
			  	  	  float:left; width: 255px; height: 98px; margin: -21px 0 7px -30px; 
			  	  	  background: url(/images/logo.png) no-repeat; text-indent: -999em;
					}
#header h1 a		{ display: block; width: 255px; height: 98px; }
#home #sub-header 	{
					  border:2px solid #e7e7e7; background:url(/mediafiles/home-header.jpg) no-repeat 5px 5px;
					  width:414px; height:297px; display:block; float:right; margin:6px 5px;
					}
/* @end */

/* @group Navigation */
#nav				{ 
					  position:relative; z-index:10; clear: left; float: left; padding:0; 
					  margin:7px 0 9px; width: 220px; list-style: none;
					}
#nav li a 			{
					  display: block; padding: 12px 0 0 36px; font-size:1.2em; width:184px;
					  font-family:Arial, Verdana, sans-serif;
					  height: 20px; color: #666;  text-decoration: none; margin-bottom:4px;
					  background:url(/images/nav_bg.gif) no-repeat left bottom; text-transform:lowercase;
					}
#nav li 			{ position:relative; float:left; clear:left; }
#nav li:hover a,
#nav li.sfhover a	{  background-position:left top; color: #FFF; }

#nav li ul			{ 
					  position: absolute; left: -999em; z-index: 999; width: 164px; margin: -36px 0 0 220px; 
					  list-style: none; line-height: 1;
					}
#nav li li			{ width: auto; font-size: .9231em; font-weight: normal; text-transform: none;}
#nav li ul ul		{ margin: -36px 0 0 164px; }
#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:hover li a,
#nav li.sfhover li a	{ 
						  width: 138px; height: 20px; padding: 12px 13px 0; margin:0; 
						  background: #5f86c4; color: #fff; 
						}
#nav li li a:hover		{ background: #2d3691; }
/* @end */

/* @group Content*/

#content-wrap { display:block; padding:10px 6px; }
#content	{ float: right; width:384px; padding: 0 15px; border:2px solid #e7e7e7; margin-top:5px; margin-top:230px;}
#content h3	{ margin-bottom: 1.5em; color: #5f86c4; font-size: 1.4em; font-weight: bold; text-transform:uppercase; margin-top:7px;}
#content h4,
#content h5,
#content h6	{ margin-bottom: .5em; color: #5f86c4; font-size: 1.4em; font-weight: bold; }

#content p,
#content li	{ margin-bottom: 1em; color: #6d6e71; font-size: 1.2em; line-height: 1.4; }

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

#content li p	{ font-size:100%; margin:0; padding:0; line-height:1; }

#content ul#byline		{ display: inline; float: left; margin-bottom: 10px; list-style: none; }
#content ul#byline li	{ font-size: 1.1em; }
#content li				{ margin: 0; }
#content li li			{ font-size: 1em; }
#content blockquote		{ margin-left: 3em; }
#content hr				{ display: block; margin-bottom: 1em; }
#content a				{ color: #5f86c4; }
#content a:hover		{ text-decoration: none; }
#content img			{ float: left; margin: 0 10px 5px 0; }
#content #text			{ clear: both; }
#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: 5px 5px 0; border: 1px solid #D7D0BB; 
						  list-style: none;
						}
#content #mediabox li	{ margin-bottom: 5px; font-size: 1.1em; font-weight: bold; }
#content #mediabox li a	{ display: block; height: 16px; padding-left: 20px; background-repeat: no-repeat; }
#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); }
/* @end */

/* @group WHAT'S GOING ON */
#content #whats-going-on h3		{
								  width: 414px; height: 36px; margin:0px 0 17px -15px; 
								  background: url(/images/bg_whats-going-on_h3.gif) no-repeat;
								  text-indent: -9999px;
								}
#content #whats-going-on h4		{ margin-bottom: .5em; color: #688457; font-size: 1.2em; font-weight: bold; }
#content #whats-going-on h4 a	{ color: #5f86c4; text-decoration: none; text-transform:uppercase; }
#content #whats-going-on h4 a:hover{ text-decoration: underline; }
#content #whats-going-on .item	{ margin-bottom: 15px; }
#content #whats-going-on .item p{ line-height: 1.2; }
#content #whats-going-on p.more	{ text-indent: -9999px; }
#content #whats-going-on p.more a	{ 
								  	  display: block; width: 61px; height: 13px; float:right; margin-bottom:5px;
								  	  background: url(/images/bg_whats-going-on_more.gif) no-repeat;
								  	}
/* @end */

/* @group QUICKLINKS */
#quicklinks				{ margin-top:5px margin-left:-2px}
#quicklinks p			{ margin:0; padding:0; }
#quicklinks img			{ padding:5px; border:2px solid #e7e7e7; margin-bottom:6px;}
/* @end */

/* @group Calendar */

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

#content table.calendar caption	{ padding-bottom: 10px; color: #5f86c4; font-size: 1.4em; font-weight: bold; }
#content table.calendar th		{ padding: 6px 0; background: #5f86c4; color: #fff; font-size: 1.2em; font-weight: normal; }
#content table.calendar td		{ 
								  width: 68px; height: 68px; padding: 2px; border: 1px solid #ccc; border-left: 0; border-top: 0;
								  background: #e7e7e7; color: #B1AB98; font-size: 1em; vertical-align: top; 
								}

#content table.calendar td a	{ color: #5f86c4; 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; padding:0; font-size: 1.1em; line-height: 1.2; }
#content table.calendar td li a	{ text-decoration: underline; }
#content table.calendar td li a:hover{text-decoration: none; }
/* @end */

/* @group Sidebar */

#sidebar					{ clear: left; float: left; width: 221px; }
#sidebar #feed-buttons		{ position: relative; width: 226px; margin-right: -5px; }
#sidebar #feed-buttons img	{ display: block; float: left; margin: 0 5px 5px 0; border: 0; }


#sidebar #recent-sermon li#sb_listen a	{ background: url(/images/sb_listen.gif) no-repeat; }
#sidebar #recent-sermon li#sb_download a{ width: 86px; background: url(/images/sb_download.gif) no-repeat; }
#sidebar #recent-sermon p.more			{ clear: left; font-size: 1.2em; font-weight: normal; }
#sidebar #recent-sermon p.more a		{ color: #777069; }

/* @end */

/* @group Footer*/
#footer-outer		{ width:658px; margin:0 auto; }
#footer				{ padding:0 7px 75px;  clear: both; }
#footer p			{ 
			  		  float: right; font-family: "Trebuchet MS", Arial, Helvetica, Verdana, Tahoma, sans-serif;
   			  		  color: #898989; text-transform: uppercase; margin-top:20px;
   					}
#footer p#designed	{ float: left; }
#footer a			{ color: #a99986; }
#footer a:hover		{ text-decoration:none; }
/* @end */