/*
 Theme Name: StJohn
 Theme URI:
 Description: StJohn
 Author: StJohn
 Author URI:
 */

/*====================================================================================================
 * G L O B A L                                                                             G L O B A L  
 =====================================================================================================*/

/* Default font settings. 
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
   
html { font-size: 100.01%; }
body { 
	  font-size: 75%;   
	  color: #000000; 
	  background: url(images/bg-single.png) repeat-x top;
	  font-family: verdana /* "Helvetica Neue", Arial, Helvetica, sans-serif */;	  
}

body.home { background: url(images/bg.png) repeat-x top; }

/* Links
-------------------------------------------------------------- */

a, 
a:link,
a:visited   { color: #202020; text-decoration: none;}
a:hover,
a:active,
a:focus     { color: #A01226; outline:none; /*deletes dotted outline border*/ }
a img       { border: none; /*resets the amazing border*/ } 

.entry a, .entry a:link, .entry a:visited   { color: #A01226; text-decoration: none; border-bottom:1px dashed #A01226;}
.entry a:hover, .entry a:active,.entry a:focus { border-bottom:0; color: #A01226; outline:none; /*deletes dotted outline border*/ }
.sermon .entry h3 a,.entry .newsletter-image a{border:0;}

/* Alignment
-------------------------------------------------------------- */

.aligncenter,
div.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft      { float: left;  }
.alignright     { float: right; }

/* Headings
-------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 { font-weight: bold; }

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

.indent-9999px { text-indent: -9999px; }
.display-none { display: none; }
.no-bg { background: none !important; }

/*====================================================================================================
 * S T R U C T U R E                                                                 S T R U C T U R E
 ====================================================================================================*/

#container    { position: relative; width: 990px; margin: 0 auto; padding: 0 0px 0 0px; text-align: left; background-color: #fff; }
#header       { position: relative; width: auto; height: 207px; background:url(images/header.png) repeat-x top; z-index: 9999; }
.home #header       { position: relative; width: auto; height: 447px; background:url(images/header-home.png) repeat-x top; z-index: 9999; }
/*wraps content and sidebar - important when using more than 2 columns*/
#wrapper      { position: relative; float: left; width: 100%; margin: 30px 0 0 0; }
/*wraps posts*/
#content      { position: relative; float: left; display: inline; width: 620px; height: auto; padding: 0 0 20px 0; margin: 0px 0 0 0px; }
/*.home #content { width: 640px; margin: -10px 0 0 0; }*/
/*wraps a post*/
.post-content { position: relative; width: auto; background-color: #ffffff; margin: -10px 15px 0px 10px; text-align: justify; font-family: tahoma; font-size: 1.0em; line-height: 1.7em; }
#sidebar      { display: inline; position: relative; float: right; width: 290px; height: auto; margin: 0 58px 21px 0; background: url(images/sidebar-bg.png) repeat-x bottom; }
#footer       { position: relative; width: 990px; height: 140px; margin: 0 auto 0 auto; text-align: center; font-size: 12px; clear: both; font-family: arial; }

/*====================================================================================================
 * H E A D E R                                                                             H E A D E R
 ====================================================================================================*/

a.logo                 { position: absolute; display: block; width: 505px; height: 100px; top: 40px; left: 25px; text-indent: -9999px; }
.tell-a-friend         { position: absolute; width: 176px; height: 25px; top: 0px; right: 0px; padding: 5px 10px 0 10px; background: url(images/tell-a-friend.png) no-repeat; }
.tell-a-friend a.link {  display: block; width: 80px; height: 15px; text-indent: -9999px; }
#top-menu { position: absolute; width: 980px; height: 32px; top: 174px; left: 5px; background: none; z-index: 9999; }
.home #top-menu { position: absolute; width: 980px; height: 32px; top: 417px; left: 5px; background: url(images/top-menu.jpg) no-repeat; z-index: 9999; }
#header #contact { position: absolute; height: 20px; width: 460px; top: 0px; left: 340px; line-height: 20px; color: #000; font-size: 0.9em;  }

/*Header - search form
-------------------------------------------------------------- */

#searchform        { position: absolute; display: block; width: 155px; height: 21px; top: 5px; right: 28px; line-height: 21px; background: url(images/search.jpg) no-repeat; clear: both; }
#searchform p       { margin: 0 0 0 0; padding: 0 0 0 0; }
#searchform #searchfield { float: left; width: 130px; height: 19px; margin: 0px 0 0 0px; padding: 4px 2px 0 2px; border: none; background: none; color: #000; font-size: 0.9em; }
#searchform #searchsubmit { float: right; width: 15px; height: 21px /* #searchfield height +2px */; margin: 0px 0px 0 0px; border: none; background: none; color: white;  cursor: pointer; }

/*====================================================================================================
 * S I D E B A R                                                                         S I D E B A R
 ====================================================================================================*/

/*Sidebar - widget
-------------------------------------------------------------- */

.widget            { width: auto; margin: 20px 0 10px 0; }
h3.widgettitle     { width: 340px; height: 23px; padding: 0 0px 0 0px; font-size: 20px; line-height: 1; color: #000; background: url(images/widget-title.jpg) no-repeat left bottom; }
.widget p          { padding: 10px 10px 10px 10px; }  
.widget ul         { list-style: none; padding: 0px 0px 0px 0px; font-size: 12px; font-family: arial; }
.widget ul ul      { margin: 0 0 0 0px; padding: 0 0 0 0; }

/*Sidebar - upcoming events
-------------------------------------------------------------- */

.upc-events {background:url(images/upcoming-events3.jpg) repeat-y;width:342px; }
.upc-events-2{position:relative;width:342px;margin:0px;padding:3px 0 0 0;background:url(images/upcoming-events1b.jpg) no-repeat;}
.upc-events-3 {min-height:245px;background: url(images/upcoming-events2.jpg) no-repeat bottom;padding:0 0 10px 0;}
.upc-events-3 .widget{margin:0;padding:0;}
.upc-events .widget h3.widgettitle { margin:0;padding: 10px 0 0 17px; font-size: 20px; background: none !important; }
.upc-events .widget ul { margin:10px 0 0 10px;width:176px;}
.upc-events .widget ul ul { margin:2px 0 0 0; }
.upc-events .widget ul li{margin:0 0 15px 5px;font-weight:700;padding:0 0 0 20px;background:url(images/cross.png) no-repeat left top;}
.upc-events .widget ul li ul li { background:none;padding:0;font-weight:100;margin:0;}
.upc-events .widget .calnk a {text-decoration:none;font-style:italic;border:0;cursor:default;padding:0 4px 0 0;}
.upc-events .widget .calnk a span{display:none;visibility:hidden;}
.upc-events .date{position:absolute;width:105px;height:50px;top:110px;right:20px;text-align:center;font-family:Georgia;font-size:1.6em;}
.upc-events .date .month {}
.upc-events .date .day {font-size: 1.2em; }
.upc-events a.view-more{position:absolute;display:block;width:118px;height:33px;bottom:22px;right:17px;background:url(images/view-more.jpg) no-repeat;text-indent:-9999px;}

/*#upcoming-events ul li{display:none;}*/

/*Sidebar - rss
-------------------------------------------------------------- */

.widget_kbrss h3 { display: block; width: 340px; height: 25px; margin-top: 20px; padding: 0 0 0 0; background: url(images/title-feed.jpg) no-repeat right; font-size: 20px; }
.widget_kbrss ul li { margin: 0 0 10px 0; padding: 0px 0 0 20px; line-height: 20px; background: url(images/arrow.jpg) no-repeat top left; }
.widget_kbrss ul li a { position: relative; top: -6px;   }

/*====================================================================================================
 * F O O T E R                                                                             F O O T E R
 ====================================================================================================*/

#footer-wrapper { position: relative; width: 100%; height: 140px; background: url(images/footer.jpg) repeat-x; }

#footer a,
#footer a:link,
#footer a:visited { color: #555553; text-decoration: none; }
#footer a:hover,
#footer a:active { text-decoration: underline; }

#footer ul { list-style: none; margin: 35px auto 0 auto; }
#footer ul li { width: auto; height: 10px; padding: 0 5px 0 10px; display: inline; background: url(images/divider-footer.jpg) no-repeat left center; }
#footer ul li.page-item-9 { background: none; }

#footer p { margin-top: 2px; color: #555553; font-size: 0.8em; }

/*====================================================================================================
 * C O N T E N T                                                                         C O N T E N T
 ====================================================================================================*/

/* Content - headings
-------------------------------------------------------------- */

#content h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
#content h2 { font-size: 2em; margin-bottom: 0.75em; }
#content h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; margin-top:1.5em;}
#content h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
#content h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
#content h6 { font-size: 1em; font-weight: bold; }
h2#search   { margin: 0 0 0 0; padding: 0.5em 10px 0.5em 10px; } 
#content .post-content h2.permalink  { width: auto; padding:10px 0px 10px 0px; font-size: 2.5em; color: #000; text-align: left; }

#content .post-content h2.permalink img { margin-left: -5px; }


.postmetadata               { padding: 0px 0px 0px 0px; }
.entry { margin-top: -1em; padding: 0 0px 0 0px; font-size: 1.1em; line-height: 1.3em; font-family: verdana; /*post itself without permalink*/ }
.entry .frame { position: relative; width: 180px; height: 190px; margin-left: 10px; padding: 0px 0 0 0px; background: url(images/frame.png) no-repeat; }
.entry .frame img { display: block; width: 150px; height: 160px; margin: 15px 0 0 15px; }

/* Post content - text elements
-------------------------------------------------------------- */

.entry p           { margin: 1em 0 1em 0; }
.entry p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
.entry p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }
.entry img         { max-width:100%; /*..because some images are too wide*/}


.entry blockquote          { margin: 1.5em; color: #666; font-style: italic; }
.entry strong              { font-weight: bold; }
.entry em, .entry dfn      { font-style: italic; }
.entry dfn                 { font-weight: bold; }
.entry sup, .entry sub     { line-height: 0; }

.entry abbr, 
.entry acronym     { border-bottom: 1px dotted #666; }
.entry address     { margin: 0 0 1.5em; font-style: italic; }
.entry del         { color: #666; }

.entry pre 				{ margin: 1.5em 0; white-space: pre; }
.entry pre, .entry code, .entry tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

/* Post content - lists
-------------------------------------------------------------- */

.entry li ul, 
.entry li ol       { margin: 0 1.5em; }
.entry ul,
.entry ol          { margin: 0 1.5em 1.5em 1.5em; }

.entry ul          { list-style-type: disc; }
.entry ol          { list-style-type: decimal; }

.entry dl          { margin: 0 0 1.5em 0; }
.entry dl dt       { font-weight: bold; }
.entry dd          { margin-left: 1.5em;}

/* Post content - tables
-------------------------------------------------------------- */

.entry table       { margin-bottom: 1.4em; width:100%; }
.entry th          { font-weight: bold; }
.entry thead th    { background: #c3d9ff; }
.entry th,
.entry td,
.entry caption     { padding: 4px 10px 4px 5px; }
.entry tr.even td  { background: #e5ecf9; }
.entry tfoot       { font-style: italic; }
.entry caption     { background: #eee; }

/* Post content - WP-captions - post content (optional rounded corners for browsers that support it)
-------------------------------------------------------------- */

.alignleft  img,.alignright img{border:1px solid #ddd;background:#f3f3f3;padding:2px;}
img.alignleft, img.alignnone{margin:0px 12px 12px 0;border:1px solid #ddd;background:#f3f3f3;padding:2px;}
img.alingright{margin-left:12px;border:1px solid #ddd;background:#f3f3f3;padding:2px;}

.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3;padding:5px 0 2px 0;}
.wp-caption img{ margin: 0; padding: 0; border: 0 none; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 18px; padding:1px 0; margin: 0; }
.wp-caption.alignright{margin:0 0 0 10px;}
.wp-caption.alignleft{margin:0 10px 0 0;}

/* Post content - page navigation
-------------------------------------------------------------- */
.navigation           { line-height: 30px; }
.navigation .next     { float: left; max-width: 50%; }
.navigation .previous { float: right; max-width: 50%; }

/*====================================================================================================
* H O M E P A G E                                                                      H O M E P A G E
====================================================================================================*/

.headlines { position: relative; width: 540px; height: 245px; margin: 40px 0 0 0; padding: 45px 40px 0 40px; background: url(images/headlines-bg.jpg) no-repeat; }
.headlines .widget { float: left; width: 260px; margin: 0px 0 0 0;  }
.headlines .widget h3.widgettitle { margin: 0 0 0 0; padding: 0 0 0 0; margin-bottom: 0 !important; font-size: 20px !important; background: none; }
.headlines .widget ul { list-style: none; }
.headlines .widget ul li { margin: 0 0 10px 0; padding: 0 0 0 23px; line-height: 20px; background: url(images/cross.png) no-repeat left top; }
.headlines .widget ul li a { position: relative; top: -4px; }
.headlines img.church { float: right; border: 1px solid #000; }

/*====================================================================================================
* C A L E N D A R                                                                     C A L E N D A R
====================================================================================================*/
.page-template-template-calendar-php #content { width: 100%; }		
		
/*====================================================================================================
* S L I D E S H O W                                                                 S L I D E S H O W
====================================================================================================*/
        
#slideshow { position: absolute; width: 940px; height: 180px; top: 170px; left: 14px; margin: 20px auto 20px 0; }
#slideshow div { position: relative; width: 940px; height: 180px; margin:10px 0 0 11px; color: #333; text-align: left; }
#slideshow div a img { float: left; width: 940px; height: 180px; }
#slideshow div h1 { position: absolute;  bottom: 10px; right: 20px; padding: 0 0px 0 0px; font-size: 30px; color: #fff; z-index: 9999;  }

/*====================================================================================================
 * H A C K S                                                                                 H A C K S 
 ====================================================================================================*/

/* clearfix 
-------------------------------------------------------------- */

.clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clear { min-width: 0; display: inline-block; /* \*/ display: block; }
* html .clear { /* \*/ height: 1%; }

/* Fix for PNG alpha channel display in IE6 */
img {
  behavior: url(images/pngbehavior.htc);
}

/* CUSTOM STYLES */
.newsletter-image{text-align:center;margin:0 0 28px 0;}
.newsletter-image img{border:5px solid #EDECD8;}
html #wrapper .sermon, html #wrapper .news{margin-top:50px;margin-bottom:28px;}
html #wrapper .sermon h3, html #wrapper .news h3, #wrapper .entry h3{margin-bottom:10px;}
html #wrapper .sermon h3 a{border-bottom:1px solid #A01226;}
html #wrapper .sermon h3 a:hover{border-bottom:1px solid #fff;}
html .sermon-content p, html .news-content p{padding:0;margin:0 0 10px 0;}
a.nolink{cursor:default;}
.cf-ol li,.cf-ol{list-style:none;margin:0!important;padding:0;}
.cf-ol label{display:block;}
.emailreqtxt{color:#999;font-size:11px;}
.cf-ol input{width:240px;margin:0 10px 20px 0;}
.cf-ol textarea{width:400px;}
.cf_info{margin:20px 0;font-weight:700;}
body #slideshow h1{display:block;width:920px;margin:0;padding:10px 10px 10px 10px;height:22px;position:absolute;bottom:0px;left:0px;text-align:right;}
body #slideshow span{width:940px;height:42px;display:block;background:#000;position:absolute;bottom:0px;left:0px;opacity:0.6;filter: alpha(opacity=60); /*for Internet Explorer 6/7*/}
.inspiration-widget{background:url(images/upcoming-events3.jpg) repeat-y;width:342px;margin:40px 0 20px 0;}
.inspiration-widget2{background:url(images/upcoming-events2.jpg) no-repeat bottom;width:342px;}
.inspiration-widget3{background:url(images/upcoming-events4.jpg) no-repeat top;width:318px;padding:12px;}
.inspiration-widget p{line-height:20px;color:#333;font-style:italic;text-align:justify;}
.inspiration-widget .qts{width:22px;height:20px;text-indent:-999999px;display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;}
.inspiration-widget .qts1{background:url(images/qts.png) no-repeat -20px -16px;padding:0 6px 0 0;}
.inspiration-widget .qts2{background:url(images/qts.png) no-repeat -82px -16px;}
.inspiration-widget p{display:inline;}
.prayer{background:#EDECD9 url(images/prayer1.png) no-repeat top left;margin:18px 0 32px 0;}
.prayer2{background: url(images/prayer2.png) no-repeat bottom left;padding:18px 18px 4px 18px;text-align:center;}
.prayer strong{text-align:center;display:block;font-size:18px;font-weight:100;margin:0 0 20px 0;}
input{outline:none;}
#content h2#search{margin-bottom:45px;}