/* CSS Document */

/*

Organized by:

Typography
Layout
Navigation
Misc.

*/



/* Typography
-------------------------------------------------------------- */

body { 
	color: #999; 
	font-family: Arial, Helvetica, sans-serif;
	}

a, a:visited { color: #00AEFF; text-decoration: underline; }
a:hover { color: #00AEFF; text-decoration: none; }

h1, h2, h3, h4, h5, h6 { color: #AE1700; font-weight: bold; }
h3 { font-size: 1.125em; line-height: 1.25; }

.title h4 {
	color: #FFF;
	font-weight: normal;
	font-size: 0.92em;
	line-height: normal;
	}

#main p, #main ul { font-size: 1em; }
#main ul ul { font-size: 100%; }

#footer a, #footer a:visited { text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer p { font-size: 0.83em; }

.blue-list a, .blue-list a:hover, .blue-list a:visited {
	color: #FFF;
	text-decoration: none;
	}

.title { height: 19px; }	
.title a, .title a:visited {
	color: #FFF;
	font-size: 0.92em;	
	text-decoration: none; }
.title a:hover { text-decoration: underline; }

.blue { color: #00AEFF; }



/* Layout
-------------------------------------------------------------- */

body {
	margin: 0;
	background: #000 url(../img/bg.jpg) no-repeat center top; 
	}
	
.container {
	width: 830px; 
	margin: 0 auto;
	padding: 20px 0;
	background: url(../img/bg_container.jpg) no-repeat center top;
	}
body#home .container { position: relative; }

#header { margin: 0 auto; }
#header h1 {
	width: 412px;
	height: 66px;
	margin: 0 auto;
	text-indent: -9000px;
	overflow: hidden;
	background: url(../img/logo.jpg) no-repeat top left;
	}
#header h1 a {
	display: block;
	height: 66px;
	background: url(../img/logo.jpg) no-repeat top left;
	}
#header h1 a:hover { background-position: top right; }

#navbar { width: 800px; }

#main {
	position: relative;
	float: left;
	width: 545px;
	padding: 20px 10px 20px 20px;
	background-color: #222;
	border: 10px solid #5D5D5F;
	}
body#home #main {
	position: absolute;
	left: 20px;
	width: 639px;
	margin-top: 20px; 
	padding: 0;
	background-color: transparent;
	border: none;
	}

.two-col-layout div.left, .two-col-layout div.right { width: 252px; }

#main ul { list-style-image: url(../img/carrot_blue.gif); }
#main ul ul { list-style-image: url(../img/bullet_blue.gif); }
	
#sidebar {
	position: relative;
	float: right;
	width: 210px;
	}
#sidebar img {
	position: relative;
	z-index: 10; 
	}

#footer {
	width: 100%;
	height: 40px;
	background: url(../img/bg_footer.gif) repeat-x top left;
	}
#footer div {
	width: 920px;
	margin: 0 auto;
	padding-top: 12px;
	}
	
.mod-home {
	display: inline;
	position: relative;
	float: left;
	width: 217px;
	margin-top: -60px;
	margin-left: 20px;
	z-index: 10;
	}

a.order-online, a.study-group, a.support-ministry {
	display: block;
	width: 292px;
	height: 63px;
	margin-left: 175px;
	margin-bottom: 25px;
	background: url(../img/btn_order_online.gif) no-repeat top left;
	}
a.study-group {
	margin-left: 215px;
	background: url(../img/btn_study_group.gif) no-repeat top left; 
	}
a.support-ministry {
	margin-left: 0;
	background: url(../img/btn_support.gif) no-repeat top left;
	}
a.order-online:hover, a.study-group:hover, a.support-ministry:hover { background-position: top right; }

a.order-large {
	display: block;
	width: 507px;
	height: 43px;
	background: url(../img/btn_order_large.gif) no-repeat top left;
	}
a.order-large:hover { background-position: top right; }

a.learn-more, a.create-join, a.preview-each-episode, a.who-is {
	display: block;
	position: relative;
	top: -30px;
	left: 15px;
	width: 214px;
	height: 25px;
	background: url(../img/btn_learn_more.gif) no-repeat top left;
	z-index: 15;
	}
a.create-join { background: url(../img/btn_create_join.gif) no-repeat top left; }
a.preview-each-episode { background: url(../img/btn_preview_each_episode.gif) no-repeat top left; }
a.who-is { background: url(../img/btn_who_is.gif) no-repeat top left; }
a.learn-more:hover, a.create-join:hover, a.preview-each-episode:hover, a.who-is:hover { background-position: top right; }

a.purchase-now, a.get-involved {
	display: block;
	position: relative;
	top: -30px;
	left: 15px;
	width: 195px;
	height: 25px;
	background: url(../img/btn_purchase_now.gif) no-repeat top left;
	z-index: 10;
	}
a.get-involved { background: url(../img/btn_get_involved.gif) no-repeat top left; }
a.purchase-now:hover, a.get-involved:hover { background-position: top right; }

a.church-kit, a.study-kit {
	display: block;
	width: 252px;
	height: 70px;
	background: url(../img/btn_church_kit.gif) no-repeat top left;
	}
a.study-kit { background: url(../img/btn_study_kit.gif) no-repeat top left; }
a.church-kit:hover, a.study-kit:hover { background-position: top right; }

.overlay {
	position: absolute;
	top: 130px;
	left: 30px;
	}
#sidebar .overlay {
	top: -45px;
	left: -35px;
	z-index: 5;
	}
#sidebar .promo {
	top: -20px;
	left: 0px;
	z-index: 10;
}
body#home #sidebar .overlay { left: 0; }
	
#main ul.blue-list {
	width: 248px;
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-image: none;
	}
.blue-list li {
	width: 248px;
	height: 19px;
	background: url(../img/bg_blue_list.gif) no-repeat top left;
	border-bottom: 1px solid #222;
	}
.blue-list a {
	display: block;
	height: 15px;
	padding: 2px 10px 0;
	background: url(../img/bg_blue_list.gif) no-repeat top left;
	}
.blue-list a:hover { background-position: top right; }

.landscape {
	width: 490px;
	margin-bottom: 20px;
	}
.landscape img { vertical-align: bottom; }
.title {
	height: 19px;
	background-color: #0072A7;
	}
.title h4 {
	display: inline;
	float: left;
	margin: 0;
	padding: 2px 5px 0;
	}
.title a { 
	display: block;
	float: right;
	height: 19px;
	padding: 0 5px 0 15px;
	background: #00A7F5 url(../img/carrot_vertical.gif) no-repeat 5px 50%;
	}
.description {
	padding: 10px 10px 5px;
	background-color: #1B3E4E; 
	}

a.order-online-red {
	display: block;
	width: 110px;
	height: 19px;
	padding: 0;
	background: url(../img/btn_order_online_red.gif) no-repeat top left;
	}
a.order-online-red:hover { background-position: top right; }
	
	

/* Navigation
-------------------------------------------------------------- */

#navbar {
	clear: both;
	width: 770px;
	height: 55px;
	margin: 15px auto;
	padding: 0;
	list-style: none;
	}
#navbar li { float: left; }
#navbar a {
	display: block;
	float: left;
	height: 55px;
	text-indent: -9000px;
	overflow: hidden;
	}
li.nav-about, li.nav-about a {
	width: 242px;
	background: url(../img/nav_about.jpg) no-repeat top left;
	}
li.nav-where, li.nav-where a {
	width: 164px;
	background: url(../img/nav_where.jpg) no-repeat top left;
	}
li.nav-community, li.nav-community a {
	width: 178px;
	background: url(../img/nav_community.jpg) no-repeat top left;
	}
li.nav-creators, li.nav-creators a {
	width: 186px;
	background: url(../img/nav_creators.jpg) no-repeat top left;
	}
#navbar a:hover, #navbar a.selected { background-position: top right; }



/* Misc.
-------------------------------------------------------------- */
	
.left { float: left; }
.right { float: right; }
.last { margin-right: 0; }
img.left { margin-right: 5px; }

.button {
	text-indent: -9000px;
	overflow: hidden;
	}