/*===========================================================================
	global.css

	Site-wide style rules for screen and print. Rules for discrete
	sections are broken out into their own individual stylesheets.
===========================================================================*/

@media screen, handheld {
/*===========================================================================
	Reset
===========================================================================*/
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }

/*===========================================================================
	Defaults
===========================================================================*/
body {
	font: 13px/1.5 Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
	color: #3f4244;
	background: #f0d7b5 url(../img/bg/body-bg.jpg) top center repeat;
}

#atffc { display: none; }

/* Block-Level Elements
===========================================================================*/
hr {
	clear: both;
	height: 1px;
	margin-bottom: 1em;
	border-width: 0;
	background: transparent url(../img/hr.png) center left repeat-x;
}

h1 { font-size: 26px; font-weight: normal; text-transform: uppercase; color: #2f3420; }
h2 { font-size: 18px; text-transform: uppercase; }
h3, .key-verse dt { font-size: 12px; font-weight: bold; text-transform: uppercase; color: #90441f; }
h4 { margin: 20px 0; font-size: 14px; text-transform: uppercase; color: #fff; }
/*h5 { font-size: 17px; }
h6 { font-size: 15px; }*/

/* Inline Elements
===========================================================================*/
a, a:visited, a:active { font-weight: bold; text-decoration: none; color: #94b154; }
a:hover { text-decoration: underline; }
a:focus { outline: dotted 1px; }

/* Common Classes
===========================================================================*/
.accessibility { position: absolute; left: -1000em; }
.error { color: #8a1f11; }


.clearfix:after {
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
	font-size: 1px;
	line-height: 0;
	content: ".";
}
.clearfix { display: inline-block; }
/* 1st for IE 5-6, hidden from IE 5 Mac */ /*\*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/**/ /* end hidden from IE 5 Mac */

.replace {
	height: 20px;
	outline-width: 0; /* for Firefox 1.5+ */
	text-decoration: none; /* for Firefox 1.0 */
	text-indent: -1000em;
	background-repeat: no-repeat;
}

.meta { font-size: 12px; color: #2f2f2f; }

/*===========================================================================
	Overall Document Structure
===========================================================================*/
#container { background: transparent url(../img/bg/container-bg.jpg) top center repeat-x; }
#page-wrapper { background: transparent url(../img/bg/page-wrapper-bg.jpg) top center no-repeat; min-width: 940px; }
#page {
	position: relative;
	width: 940px;
	min-width: 940px;
	margin: 0 auto 1em auto;
	padding-top: 88px; /* prevent margin collapsing */
	padding-left: 10px;
	padding-right: 10px;
	z-index: 1;

}

/*===========================================================================
	Nav
===========================================================================*/
#nav-wrapper {
	position: fixed;
	top: 0;
	z-index: 5;
	width: 100%;
	height: 88px;
	background: transparent url(../img/nav/nav-bg.png) top center repeat-x;
}

#inner-nav-wrapper { position: relative; width: 900px; margin: 0 auto; }

/* TODO: Adjust spacing and heights after ImageMagik replacements */
#nav { width: 900px; margin: 0 auto; }

div.scrollable {
	position: relative;
	float: left;
	overflow: hidden;
	/*width: 675px;*/
	height: 88px;
}

div.scrollable ul.items {
	position: absolute;
	width: 20000em;
}

.prevPage, .nextPage { float: left; padding-top: 25px; }

.items li {
	float: left;
	width: 135px;
	height: 69px;
	padding-top: 18px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	color: #070e06;
	vertical-align: middle;
}
.items li a { color: #070e06 !important; }
.items li a:hover { text-decoration: none; }
.items li span { display: block; font-size: 18px; }

.items li.active { background: transparent url(../img/nav/nav-active-bg.png) top center no-repeat; }
.items li.active, .items li.active a { color: #fff !important; }

/* ===== Dropdown ===== */
.more {
	position: absolute;
	left: 800px;
	height: 57px;
	padding-top: 31px;
}

.more a { font-size: 14px; text-transform: uppercase; color: #efecdf !important; }
.more a:hover { font-size: 14px; color: #ffcb7f !important; text-decoration: none; }
.more.hover a { color: #ffcb7f !important; }
.more ul {
	display: none;
	width: 141px;
	margin-top: 31px;
	margin-left: -21px;
	padding: 10px 0 20px 0;
	background: transparent url(../img/nav/dropdown-bg.jpg) bottom center no-repeat;
}
.more ul li {
	float: none;
	height: auto;
	width: auto;
	padding-top: 0;
	padding-left: 30px;
	text-align: left;
}
.more ul li a { text-transform: none; }
.more ul a, .more.hover ul a { font-size: 12px !important; color: #fff !important; }
.more ul a:hover, .more.hover ul a:hover { color: #ead998 !important; }

/*===========================================================================
	Header
===========================================================================*/
#hd { position: relative; height: 125px; }

#church-name,
#today,
#logo { position: absolute; top: 28px; }

#church-name {
	top: 18px;
	left: 10px;
	width: 278px;
	font-size: 22px;
	font-weight: bold;
	line-height: 1em;
	color: #0a0b07;
}
span.curriculum { display: block; font-size: 14px; text-decoration: none !important; color: #000 !important; }

#today { left: 328px; width: 362px; }
#today dt { font-size: 36px; line-height: 1em; color: #fff; } /* TODO: IM */
#today dd {
	float: left;
	padding-right: 15px;
	background-color: transparent;
	background-position: center left;
	background-repeat: no-repeat;
}
dd.read { padding-left: 30px; background-image: url(../img/icons/icon-read-shadow.png); }
dd.read a { color: #bfea60; }
dd.listen { padding-left: 25px; background-image: url(../img/icons/icon-listen.png); }
dd.listen a { color: #fbdb6c; }

#logo { right: 4px; } /* TODO: Need vector logo from WMCC */

/*===========================================================================
	Body
===========================================================================*/
#bd { width: 940px; background: transparent url(../img/bg/bd-bg.jpg) top left repeat-y; }

/* Main Content
===========================================================================*/
.main { float: right; width: 630px; padding-top: 60px; }

/* ===== Content Wrapper ===== */

.content-wrapper {
	width: 565px;
	margin-left: 11px;
	padding: 0 27px;
	background: transparent url(../img/bg/bd-bg-rpt.png) top center repeat-y;
}
.content-wrapper h3,
.content-wrapper p,
.content-wrapper li,
.content-wrapper ol { margin-bottom: 1em; }

/* ===== Overview ===== */

.overview {
	display: table;
	margin-bottom: 20px;
	padding-bottom: 10px;
	background: transparent url(../img/overview-btm.png) bottom center no-repeat;
}

.title-wrapper {
	display: table-cell;
	vertical-align: middle;
	width: 294px;
	height: 136px;
}
div.title-wrapper h1 { margin: 8px 0; line-height: 30px; }
div.title-wrapper .meta { margin-bottom: 0 !important; }
.meta li { float: left; padding-right: 11px; }
.meta li img { vertical-align: middle; }

.key-verse {
	display: table-cell;
	vertical-align: middle;
	width: 239px;
	padding-left: 32px;
	font-size: 12px;
	color: #000;
	background: transparent url(../img/bg/overview-verse-bg.png) center left no-repeat;
}
.key-verse dd { margin-bottom: 5px; }
.key-verse img { vertical-align: middle; }

/* ===== Comments Section ===== */

.commentnote {
    font-size: 10px;
    font-weight: bold;
    color: #990000;
    margin-bottom:12px;
}

.comment-list li {
	margin-bottom: 1em;
	padding-bottom: 1px;
	background: transparent url(../img/hr.png) bottom center repeat-x;
}
.comment-list p.name { margin-bottom: 0; }

#comment-form label { display: block; width: 150px; }
#comment-form input, #comment-form textarea { display: block; margin-bottom: 1em; }

/* Sidebar
===========================================================================*/
.sidebar { width: 278px; padding-top: 20px; margin-left: 32px; color: #fff; }
.sidebar a { color: #ead998; }

/* ===== Search Form ===== */

#search-form {
	width: 233px;
	height: 20px;
	padding: 4px 10px;
	background: #fff url(../img/icons/icon-search.png) 17px .5em no-repeat;
}

#search-form input {
	width: 200px;
	margin-left: 37px;
	font-size: 12px;
	color: #626466;
	border: none;
}

/* ===== Social Links & Sign Up ===== */

.social li { float: left; margin-top: 8px; }
.social li.first-col { width: 155px; }
.social img { margin-right: 5px; vertical-align: middle; }

#sign-up {
	clear: left;
	display: block;
	padding-top: 25px;
	margin-left: 15px;
}

/* ===== Author Bio ===== */

.author img { margin-left: 30px; border: 3px inset #b6833f; } /* TODO: IM the border */
.author p { margin-bottom: 1em; }

/*===========================================================================
	Footer
===========================================================================*/
#ft { padding-top: 10px; text-align: center; }

/* end @media screen, handheld */
}

/*===========================================================================
	Print
===========================================================================*/
@media print {
#nav-wrapper, #today, #logo, ul.meta, #comment-form, .sidebar { display: none; }
a { color: #000 !important; text-decoration: none; }
a img { border: none !important; }

dl.key-verse dt { font-size: 18px; font-weight: bold; }
dl.key-verse a.cboxElement { display: none; }
/* end @media print */
}