/* CSS Document 
   Support for The Bridge Family Worship Center
   Summer 2008
*/

/*---------------------------------------------------------------------------- 
CORE HTML TAGS
-----------------------------------------------------------------------------*/

html { height: 100%; }

body {
	background: #efe6de url("/assets/images/structure/backgroundLite.jpg") top center no-repeat;
	margin: 0; 
	padding: 0;
	border-top: 13px solid #663300;
	height: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #422004;
	}
table, tr, th, td, p, ol, ul, li, blockquote {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #422004;
	}
p {
	padding: 0px;
	margin: 0px;
	margin-top: 15px;
	margin-bottom: 10px;
	line-height: 1.75em;
	}
ul, li {
	line-height: 1.5em;
	list-style-type: square;
	}

img { border: 0; }

a, a:link, a:visited { color: #663300; }

a:hover	{ color: #b75b00; }

.devNote { background: red; color: white; font-weight: bold; padding: 2px;}



/*---------------------------------------------------------------------------- 
WRAPPERS and PAGE SETUP
-----------------------------------------------------------------------------*/
	
#wrap {
	margin: 0px auto;
	padding: 0;
	width: 888px;
	height: 100%;
	}
#rightCol {
	background: #e0dbcb;
	float: right;
	width: 177px;
	z-index: 3;
	position: relative;
	}
#rightCol #floatBlurb {
	position: relative;
	right: -20%;
	top: -13px;
	float: right;
	}
#leftCol {
	width: 711px;
	float: left;
	}
#header {
	height: 147px;
	vertical-align: bottom;
	}
#footer {
	clear: both;
	width: 687px;
	margin: 0px;
	padding: 12px;
	background: #c0aea0;
	color: #e0dbcb;
	position: relative;
	left: 63px;
	z-index: 2;
	}
	
#footer p { 
	font-size: 9px; }

#footerShadow {
	background:     url("/assets/images/structure/ShadowBottom.png") top center no-repeat;
	position: relative;
	z-index: 0;
	margin: 0px auto;
	width: 1026px;
	height: 69px;
	left: -63px;
	}

/*---------------------------------------------------------------------------- 
NAVIGATION
-----------------------------------------------------------------------------*/

#mainNav {
	clear: both;
	display: block;
	width: 177px;
	}
#mainNav ul {
	margin: 0;
	padding: 0;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	}
#mainNav li {
	background:    url("/assets/images/structure/NavButton.png");
	border: 1px solid #e0dbcb;
	border-top: 0;
	overflow: hidden;
	line-height: normal;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	}
#mainNav .desc {
	font-size: 9px;
	text-transform: uppercase;
	font-weight: bold;
	color: #663300;
	}
#mainNav li a {
	font-family: Tahoma, Geneva, "sans-serif";
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
	padding: 0;
	padding-top: 14px;
	padding-left: 10px;
	margin: 0;
	height: 30px;
	width: 177px;
	color: #977961;
	text-decoration: none;
	display: block;	/*this line blows up dreamweaver design view */
	}
#mainNav li a:hover, li.selected a {
	background:    url("/assets/images/structure/NavButtonHover.png");
	display: block;
	height: 30px;
	width: 177px;
	color: #FFFFFF;
	}

#utilityNav {
	position: relative;
	float: right;
	top: 0;
	display: block;
	}
#utilityNav ul {
	margin: 0;
	padding: 0;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	}
#utilityNav li {
	text-transform: lowercase;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	font-size: 14px;
	margin: 0;
	padding: 0;
	float: left;
	display: block;
	}
#utilityNav li a {
	padding: 3px 10px;
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	}
#utilityNav li a:hover {
	background: #663300;
	color: #FFFFFF;
	}
#utilityNav li.selected a {
	background: #94683b;
	color: #FFFFFF;
	}
#content #subNav {
	padding-bottom: 50px;
	}	
#content #subNav ul {
	margin: 0;
	padding: 0;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	}
#content #subNav li {
	font-size: 11px;
	border-bottom: 1px solid #e0dbcb;
	margin: 3px 0px;
	overflow: hidden;
	line-height: normal;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	font-weight: normal;
	text-transform: lowercase;
	font-family: Georgia, "Times New Roman", Times, serif;
	}
#content #subNav li a {
	height: 15px;
	width: 100%;
	padding: 3px;
	padding-left: 8px;
	margin: 0;
	color: #663300;
	text-decoration: none;
	display: block;	
	}
#content #subNav li a:hover {
	background: #e0dbcb;
	display: block;
	height: 15px;
	width: 100%;
	color: #FFFFFF;
	}
#content #subNav li.selected a {
	background: #e0dbcb;
	display: block;
	height: 15px;
	width: 100%;
	color: #FFFFFF;
	}
	

#content #audioBar .title {
	font-size: 10pt;
	font-weight: bold;
	}
#content #audioBar .details {
	font-size: 8pt;
	padding-left: 27px;
	padding-bottom: 10px;
	color: #000000;
	}
#content #audioBar a,
#content #audioBar a:link,
#content #audioBar a:visited,
#content #audioBar a:hover {
	text-decoration: none;
	}
#content #audioBar a:hover {
	text-decoration: underline;
	}



/*---------------------------------------------------------------------------- 
CONTENT ELEMENTS
-----------------------------------------------------------------------------*/

#contentShadow {
	position: relative;
	z-index: 0;
	margin: 0px auto;
	width: 1026px;
	left: -63px;
	background:     url("/assets/images/structure/ShadowMain.png") top center repeat-y;
	}
#content {
	width: 699px;
	height: 100%;
	padding-left: 12px;
	padding-bottom: 12px;
	background: white;
	position: relative;
	left: 63px;
	clear: both;
	}
	
#content #title { height: 72px; }

body.teal #content #title { background: #005f5b; }
body.orange #content #title { background: #cc6600; }
body.lime #content #title { background: #b0cf07; }
body.chocolate #content #title { background: #422004; }
body.pink #content #title { background: #720f4f; }
body.index #content #title { background: #b0cf07; }

#content h1 {
	font-family: "New Gothic", "Arial Narrow", Arial, Helvetica, sans-serif;
	font-size: 30pt;
	color: #ffffff;
	font-weight: normal;
	margin: 0;
	padding: 0;
	padding-left: 10px;
	padding-top: 0px; /*24px;*/
	}
#content h2 {
	font-family: Tahoma, Geneva, "sans-serif";
	font-size: 16px;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	margin-bottom: 3px;
	font-weight: bold;
	}
		
#content h2, #content h2 a, #content h2 a:link, #content h2 a:visited {
	text-decoration: none;
	}
#content h3 {
	padding: 1px 15px;
	margin: 0;
	margin-left: 20px;
	color: #FFFFFF;
	background: #422004;
	display: inline;
	font-size: 12px;
	font-weight: normal;
	text-transform: lowercase;
	font-family: Georgia, "Times New Roman", Times, serif;
	}		
#content h3, #content h3 a, #content h3 a:link, #content h3 a:visited {
	text-decoration: none;
	color: #FFFFFF;
	}
#content h4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	padding-left: 10px;
	padding-top: 8px;
	}
#content h5 {
	font-size: 12px;
	color: #422004;
	font-weight: bold;
	text-transform: lowercase;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin: 0;
	padding: 0;
	padding-top: 8px;
	margin-bottom: -16px;
	}

body.teal #content h4 { color: #62aeab; }
body.orange #content h4 { color: #e8b37e; }
body.lime #content h4 { color: #e4eeab; }
body.chocolate #content h4 { color: #be9573; }
body.pink #content h4 { color: #af6495; }
body.index #content h4 { color: #cef207; }
	
body.teal #content h4, body.teal #content h4 a, body.teal #content h4 a:link, body.teal #content h4 a:visited {
	text-decoration: none;
	color: #62aeab; 
	}
body.orange #content h4, body.orange #content h4 a, body.orange #content h4 a:link, body.orange #content h4 a:visited {
	text-decoration: none;
	color: #e8b37e; 
	}
body.lime #content h4, body.lime #content h4 a, body.lime #content h4 a:link, body.lime #content h4 a:visited {
	text-decoration: none;
	color: #e4eeab; 
	}
body.chocolate #content h4, body.chocolate #content h4 a, body.chocolate #content h4 a:link, body.chocolate #content h4 a:visited {
	text-decoration: none;
	color: #be9573; 
	}
body.pink #content h4, body.pink #content h4 a, body.pink #content h4 a:link, body.pink #content h4 a:visited {
	text-decoration: none;
	color: #af6495; 
	}
body.index #content h4, body.index #content h4 a, body.index #content h4 a:link, body.index #content h4 a:visited {
	text-decoration: none;
	color: #e4eeab; 
	}
body.teal #content h4 a:hover, body.orange #content h4 a:hover, body.lime #content h4 a:hover, body.chocolate #content h4 a:hover, body.pink #content h4 a:hover { color: #ffffff; }

body.teal #spacer { background: #005f5b; }
body.orange #spacer { background: #cc6600; }
body.lime #spacer { background: #b0cf07; }
body.chocolate #spacer { background: #422004; }
body.pink #spacer { background: #720f4f; }
body.index #spacer { background: #b0cf07; }

#content #mainBody {
	padding: 8px;
	margin: 0;
	}
#content #mainBodyBar {
	padding: 8px;
	margin: 0;
	width: 523px;
	float: right;
	}
#content #leftBar {
	margin: 0 10px 10px 0px;
	padding: 0;
	float: left;
	width: 150px;
	height: 100%;
	}
#content #leftBar #callout {
	background: #f2f0e9;
	padding: 10px;
	margin: 15px 0;
	}
#content #bodyBlurb {
	position: absolute;
	float:right;
	z-index: 2;
	right: 0px;
	top: -51px;
	}
#content .right {
	position: relative;
	float: right;
	}
#content .pictBorderMargin {
	border: 1px solid #e0dbcb;
	margin: 6px;
	padding: 2px;
	}
#content .pictBorderNoMargin {
	border: 1px solid #e0dbcb;
	margin: 0px;
	padding: 2px;
	}
#content .pictureNoBorderMargin {
	border: 0px;
	margin: 6px;
	padding: 2px;
	}
#content .topNeed { 
	color: #720f4f; 
	font-weight: bold;
	}
	
/*---------------------------------------------------------------------------- 
INDEX ONLY ELEMENTS
-----------------------------------------------------------------------------*/

body.index #content #mainBody {
	margin: 0;
	padding: 0;
	}
body.index #content #promoBoxWrap {
	border: 1px solid #e0dbcb;
	margin: 6px;
	padding: 6px;
	background: #f2f0e9;
	width: 673px;
	height: 152px;
	}
body.index #content #promoBox {
	border: 1px solid #e0dbcb;
	height: 150px;
	}
body.index #spotlights td {
	padding: 4px;
	}
body.index #spotlights p {
	font-size: 9px;
	padding: 0;
	margin: 0;
	line-height: 1.3em;
	color: #a78460;
	}
body.index #spotlights h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #663300;
	padding: 0px;
	margin: 0px 0px 2px 0px;
	text-transform: none;
	font-weight: bold;
	font-size: 12px;
	}
body.index #spotlights h2 a, body.index #spotlights h2 a:link, body.index #spotlights h2 a:visited { text-decoration: none;	}
body.index #spotlights #slTeaser {
	height: 27px;
	overflow: hidden;
	}
	
/*---------------------------------------------------------------------------- 
RIGHT COLUMN ELEMENTS
-----------------------------------------------------------------------------*/

#rightCol #miniCal {
	width: 157px;
	border: 1px solid #bda799;
	margin: 15px 9px;
	overflow: hidden;
	}
#rightCol #miniCal h1 {
	padding: 5px 3px 7px 4px;
	margin: 0;
	font-weight: normal;
	font-family: Tahoma, Geneva, "sans-serif";
	color: #663300;
	font-size: 16px;
	}
#rightCol #miniCal .morelink { 
	font-size: 10px;
	}
#rightCol #miniCal .morelink a, #rightCol #miniCal .morelink a:link, #rightCol #miniCal .morelink a:visited { text-decoration: none;	}
#rightCol #miniCal .morelink a:hover { text-decoration: underline; }

#rightCol .ad {
	border: 1px solid #bda799;
	margin: 15px 9px 0px 9px;
	}