/* @override 
	http://beta.spencerportwesleyan.org/textpattern/css.php?n=default
	http://localhost:8888/textpattern/css.php?n=default
	http://localhost:8888/css/styles.css
	http://beta.spencerportwesleyan.org/css/styles.css
*/

/*******************************************************************/
/* css by justintalbott.com ****************************************/
/*******************************************************************/

/* reset & restore ****************************************/
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%; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
li { display: inline; }
blockquote, q { quotes: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
img { -ms-interpolation-mode:bicubic; }
a { cursor: pointer; text-decoration: none; }
em { font-style: italic; }
strong { font-weight: bold; }

/* general classes & element restore ****************************************/
.wrap { width: 921px; margin:0 auto; position: static; }
.clear { clear: both; }
.hide { display: none; }
.textbox { padding: .3em; }
.rounded, .button { -moz-border-radius: 8px; -webkit-border-radius: 8px; }
.left-col blockquote { -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; }
.left { float: left; }
.right { float: right; }
.button { display: block; padding: 8px 15px; text-transform: uppercase; font-size: .7em; border: 1px solid #333; color: #fff; letter-spacing: 1px; }

/* font family ****************************************/
body, p, li, dd, dt { font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Geneva,Helvetica,Arial,sans-serif; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
code { font-family: Monaco, "Andale Mono", "Courier New", monospace; }

/* colors ****************************************/
p { color: #333; }
a { color: #1e37dd; border-bottom: 1px solid #ddb; } a img { border: 0; }
a:hover { color: #1e3796; border-color: #666; }
input:focus, textarea:focus, select:focus { background: #ffffee; }
#menu, #footer { background: #2b1a11; }
#footer, #footer a:hover { color: #fec; }
#footer a, #spotlight p, #spotlight .left, #spotlight .right, .button:hover { color: #eee; }
#spotlight h3 { border-color: #fec; color: #fff; }
#main .left-col blockquote { background: #eee5d3; }
#menu a:hover { background: #111; }
#menu ul a { color: #2b1a11; }
.button { background: #1b3e26; }
.button span { color: #fec; }

/* font styles ****************************************/
p, .main-col li { padding: .438em 0; /* 7px */ font-size: .8em; /* 14px */ line-height: 1.413em; /* 21px */ }
h2 { font-size: 1.5em; padding: 5px 0; border-bottom: 1px solid #ddb; margin: 10px 0 5px 0; }
h3 { font-size: 1.35em; padding: 5px 0; border-bottom: 1px solid #ddb; margin: 10px 0 5px 0; }
.smaller, #spotlight li { font-size: 11px; }
.larger { font-size: 1.25em; }
dl { font-size: .9em; position: relative; width: 100%; }
dt { position: absolute; top: 0; left: 0; font-size: .75em; width: 90px; text-align: right; }
h4 { padding: 10px 0 5px; font-style: italic; margin-bottom: 2px; border-bottom: 1px solid #ddb; line-height: 1.25em;}

/* layout pieces ****************************************/
body { background: url(/imgs/bg-2.jpg) repeat 0 0; }
/*#overlay-wrap { position: absolute; z-index: 9998; width: 100%; height: 100%; top: 0; left:0; display: block; }
#overlay { position: absolute; z-index: 9998; width: 100%; height: 100%; background: #fff; opacity: .8; filter:alpha(opacity=80); -moz-opacity: 0.8; }
* html #overlay-wrap { height: 800px;  }
#overlay-content { width: 700px; height: 400px; z-index: 9999; top: 50%; left: 50%; margin: -250px 0 0 -350px; position: absolute; background: #fff; padding:20px; border: 1px solid #a8a7d4; text-align: left; -moz-border-radius: 4px; -webkit-border-radius: 4px; overflow-y: scroll; }*/

#header { height: 223px; position: relative; }
#header h1 a { display: block; height: 154px; width: 921px; margin: 5px 0; border: 0; padding-top: 10px; }
/*
html>body #header h1 a { background: url(/imgs/logo.png) no-repeat 0 0; }
* html #header h1 a { background-color: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/imgs/logo.png", sizingMethod="crop"); }
*/

#main .wrap { background: url(/imgs/main-col-bg.png) #fff repeat-y 0 0; position: relative; }

.left-col { width: 345px; float: left; display: inline; padding: 15px 20px; }
.main-col { width: 473px; float: left; display: inline; padding: 15px 30px; min-height: 350px; height: auto !important; height: 350px; }

#left-shadow { display: block; background: url(/imgs/left-shadow.png) no-repeat; height: 350px; position: absolute; top: 0; width: 25px; left: -26px; }
#right-shadow { display: block; background: url(/imgs/right-shadow.png) no-repeat; height: 100%; position: absolute; width: 25px; top: 0; right: -26px; }
#bottom-shadow { display: block; background: url(/imgs/bottom-shadow.png); height: 50px; position: absolute; width: 818px; left: 53px; }
* html #left-shadow, * html #right-shadow, * html #bottom-shadow { display: none; }

#footer { padding: 10px 20px 35px 20px; font-size: .8em; text-align: right; }
#footer li { display: block; padding: 5px 15px; }
#footer a { border: 0; text-decoration: underline; }

#zoom a { border: 0; }
#zoom_content { padding: 20px; }

/* home-page ****************************************/
#home-top { position: relative; height: 304px; width: 100%; z-index: 0; }
#spotlight { position: absolute; height: 304px; width: 462px; background: url(/imgs/spotlight-bg-1.png) no-repeat; z-index: 1; top: 0; left: 0; }
* html #spotlight { background: url(/imgs/spotlight-bg-1.gif) no-repeat; }
#main #spotlight ul { margin: 0; }
#slideshow { position: relative; float: right; text-align: right; height: 303px; width: 547px; border: 1px solid #ddd; border-bottom: 0; z-index: 0; overflow: hidden; }
#slideshow img { width: 547px; }

/*#mission-statement { color: #f1f1f1; font-size: .9em; font-style: italic; text-align: center; }
#mission-statement h1 { font-size: .8em; line-height: 1.3em; }
* html #mission-statement { background: none; }*/
#spotlight h3 { margin-top: 0; }
#spotlight .left { width: 150px; height: 188px; position: relative; }
#spotlight .right { width: 180px; height: 188px; position: relative; }
#spotlight p { padding: .2em 0; }
#spotlight .button { margin-top: 1em; }
#spotlight li { display: block; padding: .2em 1em; line-height: 1.33em; }

#overview { margin: .8em 0 0; }
#overview li { display: block; width: 100%;}
#overview li h4 { font-style: normal; color: #333; text-shadow: 1px 1px #fff; padding: 14px 18px 12px; border: 1px solid #ddb; background: #fff; margin-top: 10px; -moz-border-radius: 8px; -webkit-border-radius: 8px; }
#overview li h3 { margin: 0; }
#overview li p { padding: .4em 0; }
#overview li p em { font-size: .8em; }

.overview-image { float: right; background: #eff; width: 190px; height: 143px; display: inline; margin: -15px -10px 5px 20px; z-index: 1; position: relative; }
.overview-image img { position: absolute; right: 0; width: 190px; z-index: -1; }
.tilt-frame { position: absolute; width: 190px; height: 143px; right: 0; top: 0; background: url(/imgs/tilt-frame-2.png) no-repeat; }
* html .overview-image { display: none; }

.page-image { float: right; background: #eff;width: 353px; height: 260px; display: inline; margin: -15px -10px 5px 20px; z-index: 1; position: relative; }
* html .page-image { display: none; }
.page-image img { position: absolute; top: 0; right: 0; z-index: -1; }
.tilt-frame-bg { background: url(/imgs/tilt-frame-big.png) no-repeat; width: 353px; height: 260px; position: absolute; top: 0; right: 0; }

/*#upcoming-events a { display: block; line-height: 1.5em; border: 0; padding: 10px; margin: 10px 0; background: #fafafa; -moz-border-radius: 5px; -webkit-border-radius:5px; color: #333; border: 1px solid #ddd; }
#content #upcoming-events li { margin: 0; display: block; list-style: none; }
#upcoming-events a:hover { color: #00f; background: #fff; border-color: #fff; }
#upcoming-events a:hover dl { color: #333; }
#upcoming-events .title { font-size: 1.2em; text-decoration: underline; margin: 5px; display: block; }*/

/*  menu ****************************************/
#menu { width: 921px; -moz-border-radius-topright: 16px; -webkit-border-top-right-radius: 16px; line-height: 1.1; z-index: 99; height: 54px; }
#menu li:hover { visibility: inherit; }
#menu li { float: left; display: block; position: relative; }
#menu a { display: block; padding: 19px; height: 1em; color: #fff; border: 0; z-index: 99; position: relative; }
#menu a.noclick:hover { cursor: default; }

#menu ul
	{ position: absolute; top: -999em; width: 13em; font-size: .9em; 
	  background: url(/imgs/shadow.png) #ddd no-repeat bottom right; padding: 10px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; border: 1px solid #aaa; }

#menu ul li { width: 100%; }
#menu ul a:hover { background: #fff; color: #111; }
#menu ul a { display: block; padding: 7px 10px; position: relative; white-space: nowrap; }
#menu li:hover ul,
#menu li.sfHover ul { left: 0; top: 54px; z-index: 99; }

/* standard page ****************************************/
#worship .left-col,
#life-learning-for-all .left-col,
#missions .left-col,
#contact .left-col,
#church-life .left-col { width: 245px; }
#worship .main-col,
#life-learning-for-all .main-col,
#missions .main-col,
#contact .main-col,
#church-life .main-col { width: 573px; }
#worship #main .wrap,
#life-learning-for-all #main .wrap,
#missions #main .wrap,
#contact #main .wrap,
#church-life #main .wrap { background: url(/imgs/main-col-bg.png) #fff repeat-y -100px 0; }
#main .left-col ul { margin-bottom: 20px; }
#main .left-col blockquote ul { margin-bottom: 0; }
#side-menu a, #main .left-col p.morelink a { display: block; padding: 5px 7px; border-left: 1px solid; margin: 5px 0; border-color: #ddb; color: #333; font-size: .9em; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; background: #fdf7e4; }
#side-menu a { margin: .5em 0; }
#main .left-col ul li.current a { border-color: #666; }
#main .left-col blockquote { padding: 10px; border: 1px solid #ddb; font-size: .9em; }
#main .left-col blockquote h4 { width: 100%; border-color: #ddb; margin-bottom: 5px; font-size: .8em; padding-bottom: .9em; }
#main .left-col blockquote li { display: list-item; list-style: circle outside; margin: 0 15px; padding: .3em 0; font-size: .8em; line-height: 1.2em; }
#main .main-col h2 { margin-bottom: .5em; }
#main .main-col li { display: list-item; list-style: circle outside; margin-left: 35px; }
#main .left-col strong { font-size: 1.1em; line-height: 1.35em; text-shadow: 1px 1px #fff; }
#main #spotlight .left-col strong { text-shadow: 1px 1px #111; font-size: 1.06em; }
#main .main-col form { margin: 1em 0; }

/* calendar page ****************************************/
#calendar #wide-col { padding: 20px 20px; }
#calendar #main .wrap { background: #fff; }
#calendar table { margin: 0 auto 15px auto; }
#calendar th { padding: 10px 0; background: #fffffa; }
#calendar .smd_cal_navrow th { background: #fff; font-weight: normal; font-size: .9em; }
#calendar .smd_cal_daynames { border: 1px solid #ddd; }
#calendar tr td { border: 1px solid #ddd; vertical-align: top; text-align: left; padding: 10px; width: 100px; height: 70px; line-height: 1em; }
tr.alt td { background: #fdfdfd; }
#calendar tr .smd_cal_event { background: #fcfcfc; }
#calendar td:hover { background: #fbfbfb; }
#calendar td a { display: block; border: 0; margin-top: 7px; font-size: .9em; color: #333; }
#calendar td a .title { display: block; margin-bottom: 2px; border-bottom: 1px solid #ddd; padding-bottom: 3px; color: #00f; }
#calendar td a:hover .title { color: #333; } 
#calendar dt { position: absolute; top: 0; left: 0; font-size: .75em; width: 47px; text-align: left; }
#calendar dd { margin-left: 50px; font-size: .9em; }
#calendar #zoom tr td { border: 0; margin: 0; padding: 0; }
#calendar h4 { margin: 0; padding: 0; border: 0; width: auto; }

/* contact page ****************************************/
#contact form { padding: 20px 0; }
#contact dt {  }
#contact label { display: block; height: 18px; line-height: 1.6em; padding: 3px 4px 2px; background: #fafafa; border-bottom: 1px solid #ddd; margin-top: 3px; position: absolute; width: 129px; font-size: .8em; text-align: right; }
#contact dl { margin: 15px 0; }
#contact input, #contact textarea { width: 70%; padding: 4px 3px; font-size: 1em; margin-left: 140px; }
#contact dd textarea { height: 150px; }
#contact dl.submit input { width: auto; }

/* church life page ****************************************/
#church-life #news li { padding: 0; margin-left: 1em; list-style: none; border-bottom: 1px solid #ddb; padding-bottom: .6em; }
#church-life #news li p { font-size: .88em; }
#church-life #news h4 { font-size: 1.3em; padding-bottom: 5px; }
#church-life #news .date { display: block; margin-bottom: 1em; }

#audio p.title { font-size: 1.3em; }
#audio p { font-size: 1em; }

#overview li div { font-size: .9em; line-height: 1.33em; }

#upcoming, #gcal { margin: 10px 0; }