/*
THEME NAME: St. John of Shanghai
THEME URI: http://www.tomfroese.com
DESCRIPTION: A special theme for this Vancouver Orthodox mission, based on Sandbox
VERSION: 1.6.1
AUTHOR: Tom Froese, deriving from the hard work of <a href="http://andy.wordpress.com/">Andy Skelton</a> &amp; <a href="http://www.plaintxt.org/">Scott Allan Wallick</a>
AUTHOR URI:
TAGS: custom
*/


/****** GLOBAL ******/

img {
	border: none;
}

html, body {
	margin: 0;
	padding: 0;
	background: url('images/antique_paper2.jpg') no-repeat fixed center top;
	height: 100%;
}

/* This overall container ensures an uninterrupted #fbfbfb background behind all elements */

#everything {
	margin: 0 auto;
	width: 1059px;
	background: #fbfbfb;
}

/****** PAGE ******/ 

#container {
	width: 1059px;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	background: #fbfbfb;
}

/****** HEADER & NAVIGATION ******/

#above_global_nav {
	margin: 0;
	padding: 0;
	width: 1059px;
	height: 40px;
	background: url('images/above_global_nav.gif');
}

#global_nav {
	margin: 0;
	padding: 0;
	width: 1059px;
	height: 41px;
	background: #736357;
}

#global_nav_left {
	margin: 0;
	padding: 0;
	height: 41px;
	width: 340px;
	background: url('images/global_nav_background_left.gif');
	float: left;
}

#global_nav_right {
	margin: 0;
	padding: 0;
	height: 41px;
	width: 719px;
	float: left;
}

/*** Global navigation hover states ***/
/* Special thanks:  Alistapart.com http://www.alistapart.com/articles/sprites */

#global_nav_links { 
	margin: 0;
	padding: 0;
	height: 100%;
	width: 719px;
	background: url('images/global_nav_menu.gif');
	list-style: none;
	position: relative;
}

#global_nav_links li { /* skyline li" */
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
}

#global_nav_links li, #global_nav_links a {
	height: 41px;
	display: block;
	text-indent: -9999px;
}

#blog {
	left: 0px;
	width: 140px;
}

#our_parish {
	left: 141px;
	width: 168px;
}

#about_orthodoxy {
	left: 309px;
	width: 244px;
}

#house {
	left: 553px;
	width: 124px;
}

/* hover states */

#blog a:hover {
	background: transparent url('images/global_nav_menu.gif') no-repeat 0 -41px;
}

#our_parish a:hover {
	background: transparent url('images/global_nav_menu.gif') no-repeat -141px -41px;
}

#about_orthodoxy a:hover {
	background: transparent url('images/global_nav_menu.gif') no-repeat -309px -41px;
}

#house a:hover {
	background: transparent url('images/global_nav_menu.gif') no-repeat -553px -41px;
}

/*** Below the Navigation, includes Parish logo (right) and Parish photo (right) ***/
/*
#below_global_nav {
	margin: 0;
	padding: 0;
	width: 1059px;
	height: 452px;
	background: black;
	position: relative;
}*/

#logo_area {
	width: 340px;
	height: 452px;
	background: url('images/logo_area.gif') no-repeat;
	float: left;
	/*position: absolute;
	left: 0;*/
}

#logo_area_home_button {
	margin: 0;
	padding: 0;
	width: 340px;
	height: 203px;
	display: block;
}

/* needed to compensate for short logo area */
#logo_spacer {
	margin: 0;
	padding: 0;
	width: 13px;
	height: 452px;
	background: url('images/logo_spacer.gif');
	float: left;
}

#photo_area {
	width: 706px;
	height: 452px;
	background: url('images/photo_area.gif') no-repeat;
	/*position: absolute;
	left: 340px;*/
	float: left;
	text-align: center;
}

#photo_area img {
	display: block;
	margin: 15px auto;
	border: 10px solid white;
}


/****** PAGE CONTENT ******/

#left_content {
	background: #fbfbfb;
	width: 353px;
	height: 100%;
	left: 0;
	float: left;
}

#google_calendar {
	margin: 10px 0 0 0;
}

#right_content {
	width: 706px;
	float: right;
}

#column1, #column2, #column3 {
	margin: 0;
	padding: 0;
	width: 353px;
	background-color: #fbfbfb;
	text-align: center;
	float: left;
}

h1.column_title {
	font-family: helvetica, arial, sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #666666;
	margin: 0 auto 25px auto;
}

/* Image replacement technique: Phark -- Thanks: http://css-tricks.com/css-image-replacement/ */

h1.column_title#support_our_mission {
	background: url('images/support_our_mission.gif') no-repeat center center;
	width: 100%;
	height: 8px;
	text-indent: -9999px;
}

h1.column_title#recent_posts {
	background: url('images/recent_posts.gif') no-repeat center center;
	width: 100%;
	height: 8px;
	text-indent: -9999px;
}

h1.column_title#upcoming_services {
	background: url('images/upcoming_services.gif') no-repeat center center;
	width: 100%;
	height: 8px;
	text-indent: -9999px;
}

/* column 1 - headings in this col have same properties as main headings in all 3 columns */

h1.column_title#follow_us {
	background: url('images/follow_us.gif') no-repeat center bottom;
	width: 50%;
	margin: 15px auto 6px auto;
	height: 24px;
	text-indent: -9999px;
	border-top: 1px solid #ccc;
}

h1.column_title#contact {
	background: url('images/contact.gif') no-repeat center bottom;
	width: 50%;
	margin: 15px auto 6px auto;
	height: 24px;
	text-indent: -9999px;
	border-top: 1px solid #ccc;
}

p#contact_info {
	font-family: helvetica, arial, sans-serif;
	font-size: 13px;
	color: #666;
	line-height: 18px;
}

#more {
	text-align: left;
	font-family: helvetica, arial, sans-serif;
	font-size: 13px;
	padding-left: 34px;
}

#more a {
	color: #069;
	text-decoration: none;
}

#more a:hover {
	text-decoration: underline;
}

/****** BLOG PAGE SPECIFIC ******/

#content_blog {
	width: 706px;
	background: #fbfbfb url('images/content_background_top.gif') no-repeat center top;
	float: right;
	padding-top: 50px;
	padding-bottom: 50px;
}


h1.page_title {
	text-transform: uppercase;
	font-family: georgia, "times new roman", serif;
	font-size: 12px;
	color: #999;
	font-weight: normal;
	letter-spacing: 3px;
	padding: 0 0 0 34px;
	margin: 0 0 50px 0;
}

.post {
	padding: 0 120px 0 34px;
	width: 480px;
}

.entry-content_page {
	font-family: helvetica, arial, sans-serif;
	font-size: 13.5px;
	line-height: 22px;
	color: #333;
	margin: 0 0 30px 0;
	width: 480px;
}

h1.post_title {
	font-family: georgia, "times new roman", serif;
	font-size: 18px;
	margin: 24px 0 0 0;
	padding: 0 100px 0 0;
	color: #177199;
}

/* Using entry-title (same as home page) instead
h1.post_title a {
	color: #177199;
	text-decoration: none;
}

h1.post_title a:hover {
	text-decoration: underline;
} */

.entry-title_page {
	color: #069;
	font-size: 18px;
	line-height: 22px;
	font-family: georgia, "times new roman", serif;
	padding: 0 0 6px 0px; 
	margin: 0 0 -6px 0;
	border-bottom: 1px dotted #ccc;
	width: 480px;
}

.entry-title_page a:link, .entry-title_page a:visited, .entry-title_page a:active {
	color: #069;
	text-decoration: none;
}

.entry-title_page a:hover {
	color: #069;
	text-decoration: underline;
}

.entry-date_page {
	font-weight: normal;

}

#nav-below {
	padding-left: 34px;
}

#nav-below a{
	font-family: georgia, "times new roman", serif;
	font-size: 13px;
	color: #069;
	text-decoration: none;
}

#nav-below a{
	text-decoration: underline;
}

/****** SINGLE PAGE SPECIFIC 
 ****** This is a band-aid fix to a problem page - I can't figure out for the life of me why 
 ****** formatting, especially of the left margin of the post/entry area, 
 ****** is rendered in the browser differently from that of the page.php 
 ******/
#content_single {
	width: 706px;
	background: #fbfbfb url('images/content_background_top.gif') no-repeat center top;
	float: right;
	padding-top: 50px;
	padding-bottom: 50px;
}

.entry-title_single {
	color: #069;
	font-size: 18px;
	line-height: 22px;
	font-family: georgia, "times new roman", serif;
	padding: 0 0 6px 0px; 
	margin: 0 0 -6px 34px;
	border-bottom: 1px dotted #ccc;
	width: 480px;
}

.entry-title_single a:link, .entry-title_single a:visited, .entry-title_single a:active {
	color: #069;
	text-decoration: none;
}

.entry-title_single a:hover {
	color: #069;
	text-decoration: underline;
}


.post {
	padding: 0 120px 0 34px;
	width: 480px;
}

.entry-content_single {
	font-family: helvetica, arial, sans-serif;
	font-size: 13.5px;
	line-height: 22px;
	color: #333;
	margin: 0 0 30px 34px;
	width: 480px;
}

h1.post_title {
	font-family: georgia, "times new roman", serif;
	font-size: 18px;
	margin: 24px 0 0 0;
	padding: 0 100px 0 0;
	color: #177199;
}




/****** FOOTER ******/

/* Placed outside of and below main container */

#footer {
	width: 1059px;
	margin: 0 auto;
	padding: 20px 0 0 0;
	height: 100px;
	clear: both;
	background: #fbfbfb; 
	bottom: 100px;
}

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

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

#bottom_nav {
	margin: 10px 80px;;
	padding: 10px 0 0 0;
	font-family: helvetica, arial, sans-serif;
	font-size: 13px;
	color: #666;
	list-style: none;
	display: block;
	border-top: 1px solid #ccc;
}

#bottom_nav li {
	display: inline;
}

#bottom_nav li:before { 
	content: "| "; 
}

#bottom_nav li:first-child:before { 
	content: ""; 
}


/****** Homepage Content Styles (Excerpts) 
 ****** Excerpts are handled by Advanced Excerpt plugin: http://wordpress.org/extend/plugins/advanced-excerpt/faq/ ***/

#post-item {
	text-align: left;
	width: 300px;
	font-family: helvetica, arial, sans-serif;
	font-size: 13.5px;
}

.entry-title {
	color: #069;
	font-size: 16px;
	line-height: 24px;
	font-family: georgia, "times new roman", serif;
	padding: 0 0 0 0; 
	margin: 12px 0 6px 0;
	border-bottom: 1px dotted #ccc;
}

.entry-title a:link, .entry-title a:visited, .entry-title a:active {
	color: #069;
	text-decoration: none;
}

.entry-title a:hover {
	color: #069;
	text-decoration: underline;
}

.published {
	border: none;
	color: #999;
	font-weight: normal;
	font-family: helvetica, arial, sans-serif;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: .1em;
}

.entry-content {
	margin: 0;
	padding: 0;
}

.entry-content p {
	font-family: helvetica, arial, sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: #333;
}

a.read_more:link, a.read_more:visited, a.read_more:active {
	color: #069;
	text-decoration: none;
}

a.read_more:hover {
	color: #069;
	text-decoration: underline;	
}



/**************** SANDBOX OTB *****************/