html, body {
    margin: 0;
    padding: 0;
}

body {
    color: #313131;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    background-color: #FFF;
    text-align: center;
}

p, #col2b {
    line-height: 1.6em;
}

span.image_left img, img.image_left {
    float: left;
    margin: 8px 8px 8px 0px
}

span.image_right img, img.image_right {
    float: right;
    margin: 8px 0px 8px 8px
}

a, a:link {
    color: #007fd8;
    text-decoration: underline;
}

a:hover {
    color: #7bcbf9;
    text-decoration: underline;
}

a:visited {
    color: #7d659d;
    text-decoration: underline;
}

a:visited:hover {
    color: #9779bf;
    text-decoration: underline;
}

.small_print {
    font-size: 0.7em
}

h1, h2, h3, h4 {
    text-align: left
}

h1, h3, h1 a, h1 a:visited {
    font-weight: bold;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    color: #dba83e;
    text-decoration: none;
    border: 0px
}

h1 {
    font-size: 2.9em;
    margin: 0 0 2px 0;
    letter-spacing: -0.1em;
    line-height: 1em
}

h3 {
    font-size: 2.2em;
    letter-spacing: -0.1em;
    margin-bottom: -1px
}

div#frame {
    height: auto;
    text-align: justify;
    width: 736px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 8px;
}

#header {
    height: 111px;
    text-align: left;
    overflow: hidden;
    width: 736px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

#header a {
    display: block;
    position: absolute;
    top: 21px;
    left: 4px;
    border: 0px
}

#search {
    position: absolute;
    top: 50px;
    left: 561px;
    width: 178px
}

#search input {
    border: 3px solid #afafaf;
    padding: 2px 4px 4px 4px;
    height: 15px;
    font-size: 1em;
    width: 134px;
    float: left;
    text-shadow: 0px 2px 2px #AFAFAF;
}

#search button {
    background: #212121;
    color: #FFF;
    font-weight: bold;
    border: 0px;
    width: 27px;
    height: 27px;
    font-size: 0.9em
}

#search button:hover {
    background: #3F3F3F;
    -moz-box-shadow: 0px 0px 32px #999;
    -webkit-box-shadow: 0px 0px 32px #999;
    text-shadow: 0px 1px 1px #000;
}

#search button span {
    position: relative;
    top: -2px
}

button {
    cursor: pointer;
}

div#col1a, div#col2a {
    width: 375px;
    padding: 0 16px 0 16px;
    height: auto
}

html > body div#col1a, html > body div#col2a {
    width: 342px
}

/*Firefox, etc*/
div#col1a {
    float: left
}

div#col2a {
    float: right
}

div#col1b, div#col2b {
    padding: 0 12px 0 12px;
    height: auto;
    overflow: hidden
}

div#col1b {
    width: 188px;
    float: left
}

div#col2b {
    width: 500px;
    float: right
}

div.spacer {
    clear: both;
    height: 16px
}

#footer {
    clear: both;
    text-align: center;
    margin: 22px auto 0 auto;
    line-height: 1.8em;
    color: #FFF;
    background: #717171;
}

div#credits a {
    font-weight: bold;
    text-decoration: none;
}

div#credits a:hover {
    text-decoration: underline
}

div#pagetools {
    height: 18px;
    font-weight: bold;
    width: 100%;
    border-bottom: 2px solid #D1D1D1;
    padding: 2px;
    clear: both;
    margin-top: 8px;
    text-align: left
}

img#logo {
    margin: 7px;
    float: left
}

span#main_header {
    font-family: Georgia, 'Times New Roman', Serif;
    font-weight: bold;
    font-size: 47px;
    letter-spacing: -2px;
    position: relative;
    top: 48px;
    left: 6px
}

html > body span#main_header {
    letter-spacing: -0.05em;
}

/*Firefox, etc*/
div#menu {
    text-align: left;
    font-size: 0.8em
}

div#menu a, div#menu a:link, div#menu a:active, div#menu a:visited, div#submenu a, div#submenu a:link, div#submenu a:active, div#submenu a:visited {
    display: block;
    width: 100%;
    color: #212121;
    text-decoration: none;
    margin-bottom: 2px;
    padding-left: 4px;
    border-bottom: 2px solid #E1E1E1
}

div#menu a:hover, div#submenu a:hover {
    display: block;
    color: #515151;
    text-decoration: none;
    padding-left: 4px;
    border-bottom: 2px solid #D1D1D1;
    background-image: url('../images/menu2_hover.gif');
    background-position: bottom right;
    background-repeat: no-repeat
}

div#menu img {
    float: left
}

div#menu a.level1 {
    font-size: 1.2em;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    font-weight: bold;
    letter-spacing: -0.05em
}

div#menu a.level2 {
    font-weight: bold;
    margin-top: 18px
}

div#menu a.level2 img {
    margin-left: 10px
}

div#menu a.level3 img {
    margin-left: 15px
}

div#menu a.level4 img {
    margin-left: 20px
}

img {
    border: 0px;
    text-decoration: none
}

div.fp_box {
    width: 165px;
    height: 100px;
    padding: 8px;
    float: left;
    margin: 3px;
    cursor: pointer;
    overflow: hidden;
    text-align: left
}

html > body div.fp_box {
    width: 149px;
}

/*Firefox, etc*/
div#fp_box1 {
    background: #F7C460
}

div#fp_box2 {
    background: #FDE55F
}

div#fp_box3 {
    background: #86DDFA
}

div#fp_box4 {
    background: #aafcc5
}

html > body div.fp_box h2 {
    margin-top: -2px;
    margin-bottom: 0px
}

/*Firefox, etc*/
div.fp_box h2 {
    letter-spacing: -0.1em;
    font-size: 1.3em;
    margin-bottom: -18px
}

body.popup p {
    font-size: 1em
}

body.popup div.event {
    background: transparent
}

body.popup div.event h4 {
    font-size: 2em;
    margin: 8px 0 0 0
}

/* =EVENTS */
div#events {
}

div#events div {
    width: 97%;
    padding: 8px;
    text-align: left;
    color: #4a4a4a;
    background-position: bottom left;
    background-repeat: repeat-x;
    position: relative
}

.clickable {
    cursor: pointer;
}

div#events div.even {
    background-color: #EEEEEE
}

div#events div.even:hover {
    background-color: #E6E6E6
}

div#events div.odd:hover {
    background-color: #F7F7F7
}

a.more {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 0.8em;
    color: #9A9A9A;
    font-weight: bold
}

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

div#events div h4 {
    display: block;
    width: 99%;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    margin: 0px 0px 4px 0px;
    padding: 0px;
    color: #c68800;
    letter-spacing: -0.1em
}

div#events div a {
    border: 0px
}

div#events div span {
    font-size: 0.8em;
}

span.cal_date {
    font-weight: bold
}

#month_bar {
    text-align: center;
    width: 100%;
    background: #E6E6E6;
    padding: 8px 0 8px 0;
    color: #4A4A4A;
    margin: 0 0 16px 0;
    font-size: 1.2em
}

#month_bar span {
    color: #C5C5C5;
    font-size: 0.8em;
}

#month_bar a {
    text-decoration: none;
    border: 0;
    color: #007fd8;
    font-size: 0.8em
}

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

div#fpevents {
    overflow: auto;
    height: 312px
}

div.event {
    width: 97%;
    padding: 4px;
    text-align: left;
    color: #4a4a4a;
    /*
     background-image: url('../images/eventfade2.gif');
     background-position: bottom left;
     background-repeat: repeat-x;
     */
    border-bottom: 1px solid #DDD;
    margin-bottom: 8px
}

div.event h4 {
    display: block;
    width: 99%;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    margin: 0px 0px 4px 0px;
    padding: 0px;
    color: #c68800;
    letter-spacing: -0.1em
}

div.event a {
    border: 0px
}

div.event span {
    font-size: 0.8em
}

img.icon {
    margin-bottom: -3px;
    margin-left: 16px
}

div#submenu {
    font-size: 0.8em
}

div#breadcrumb {
    font-size: 1em;
    padding: 4px;
}

div#breadcrumb a {
}

div#breadcrumb a:hover {
}

td a {
    font-size: 0.8em
}

div#topmenu {
    clear: both;
    height: 32px;
    text-align: center;
    padding-bottom: 4px;
    margin-bottom: 0px;
    margin-top: -4px;
    width: 758px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    top: 0px;
    left: 13px;
}

div#topmenu a, div#topmenu a:link, div#topmenu a:visited, div#topmenu a:active {
    display: block;
    float: left;
    height: 18px;
    color: #212121;
    text-decoration: none;
    border: 0px;
    font-size: 0.9em;
    font-weight: bold;
    padding: 8px 7px 8px 7px;
    margin: 0 4px 8px 0;
    letter-spacing: -0.01em;
}

div#topmenu a:hover {
    background-image: url('../images/menu_hover.gif');
    background-position: bottom center;
    background-repeat: no-repeat;
    color: #515151
}

div#topmenu a.selected {
    background-image: url('../images/menu_selected.gif');
    background-position: bottom center;
    background-repeat: no-repeat;
    color: #e09a04
}

div#menu a#selected {
    background-image: url('../images/menu2_selected.gif');
    background-position: bottom right;
    background-repeat: no-repeat;
    color: #e09a04
}

/* STYLES FOR CROSSFADER */
div.cf_wrapper {
    position: relative;
    height: 180px;
}

div.cf_element {
    width: 180px;
    height: 180px;
    background: #86DDFA;
    padding: 6px;
    cursor: pointer;
    color: #00769d;
    font-size: 0.8em;
    overflow: hidden
}

div.cf_element div.content {
    padding: 10px;
}

div.cf_element div.content h3, div.cf_element h3 {
    padding-top: 0;
    margin-top: 0;
    color: #FFFFFF;
    font-size: 2.4em;
    letter-spacing: -0.1em;
    line-height: 0.9em;
    text-align: left;
    font-weight: bold
}

/* STYLES FOR CROSSFADER */
.hidden {
    display: none
}

body.popup {
    text-align: justify;
    background-image: url('../images/as_faint.gif');
    background-repeat: no-repeat;
    background-position: bottom right;
    height: 300px;
    padding: 0 20px 0 20px
}

div.document_row {
    background: #F1F1F1;
    font-weight: bold;
    width: 100%;
    padding: 3px;
    clear: both;
    margin-top: 2px
}

div.document_row a, div.document_row a:hover {
    text-decoration: none;
    border: 0px
}

div.document_row img {
    margin-right: 8px
}

table.sermons {
    width: 100%
}

table.sermons td, table.sermons th {
    padding: 8px;
    text-align: left
}

table.sermons td a {
    font-size: 0.7em
}

tr.even {
    background: #F1F1F1
}

div.pager_bar {
    width: 100%;
    text-align: center;
    float: left;
    margin-top: 16px;
    color: #E1E1E1;
    font-weight: bold;
}

div.pager_bar a {
    height: 18px;
    padding: 0 0 8px 0;
    text-decoration: none;
    border: 0px
}

div.pager_bar a.selected {
    background-image: url('../images/menu_hover.gif');
    background-position: bottom center;
    background-repeat: no-repeat;
}

.pic_left {
    float: left;
    margin: 8px 8px 8px 0
}

.pic_right {
    float: right;
    margin: 8px 0 8px 8px
}

.video_placeholder {
    display: none;
    visibility: hidden
}

span.cal_venue, span.cal_time {
    color: #777777
}

.borderless, a.borderless, a.borderless:hover {
    border: 0px
}

#col_wide {
    width: 736px;
}

table.calendar_new {
    width: 736px;
    border: 1px solid #AFAFAF;
    border-width: 1px 0 0 1px;
}

.calendar_new th {
    background: #8F8F8F;
    color: #FFFFFF;
    text-align: center;
    border: 1px solid #8F8674;
    border-width: 0 1px 0 0;
    padding: 4px 0 4px 0
}

.calendar_new td {
    width: 105px;
    border: 1px solid #AFAFAF;
    border-width: 0 1px 1px 0;
    height: 120px;
    position: relative;
    background: #FFF;
}

div.day_container {
    width: 105px;
    height: 100%;
    position: relative;
}

div.day_container ul {
    margin: 0px;
    list-style: none;
    padding-left: 0;
}

div.day_container ul li a {
    text-align: left;
    color: #363636;
    font-size: 0.75em;
    display: block;
    width: 102px;
    margin: 2px 2px 6px 2px;
    font-weight: normal;
    border: 0px;
    text-decoration: none;
    line-height: 1.1em
}

div.day_container ul li a:hover {
    text-decoration: underline;
    color: #111
}

div.day_container ul li a span {
    font-weight: bold;
    font-size: 0.9em
}

.calendar_new td span.day_num {
    font-size: 1.5em;
    color: #EFDCB3;
    font-weight: bold;
    display: block;
    padding: 0px;
    margin: 0px;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 74px;
}

td.today {
    background: #FFF5DF
}

td.today span.day_num {
    color: #DBA83E
}

.pager_bar #month {
    margin: 8px 8px 0px 8px
}

.calendar_new a.extra {
    background: #DFC999;
    color: #FFF;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font-weight: bold;
    font-size: 0.8em;
    width: 64px;
    text-align: center;
    padding: 2px 0 2px 0;
    position: absolute;
    bottom: 4px;
    left: 7px
}

.calendar_new a.extra:hover {
    background: #DBA83E;
    border: 0px;
}

ul.part_day {
    /*
     z-index: 100
     */
}

ul.full_day {
    display: none;
    border: 2px solid #BFBFBF;
    background: #FFF;
    position: absolute;
    top: -6px;
    left: -6px;
    -moz-box-shadow: 0px 8px 32px #999;
    -webkit-box-shadow: 0px 8px 32px #999;
    z-index: 2000;
}

ul.full_day li a {
    padding: 0 4px 0 4px;
}

ul.full_day li a.close {
    color: #888;
    font-weight: bold;
    text-align: center;
    border: 0px
}

option.selected {
    font-weight: bold;
    background: #DBA83E;
    color: #fff
}

td.blank {
    background: #EFEFEF;
}

#tt {
    position: absolute;
    display: block;
    z-index: 10000;
}

#tttop {
    display: block;
    overflow: hidden;
}

#ttcont {
    display: block;
    background: #DBA83E;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    padding: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-box-shadow: 0px 8px 32px #999;
    -webkit-box-shadow: 0px 8px 32px #999;
    width: 200px
}

#ttcont strong {
    text-shadow: 0px 1px 1px #4F3E1D;
    font-size: 1.4em;
    margin: 0 0 8px 0;
    display: block;
}

#ttcont span {
    display: block;
}

#ttbot {
    display: block;
    height: 7px;
    overflow: hidden;
}

input, textarea, select, button {
    font-family: Arial, sans-serif, helvetica;
    font-size: 1em;
    color: #313131;
}

#front_row1 {
    height: 255px;
    position: relative;
    margin: 26px 0 0 0
}

#front_text {
    width: 208px;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 0.9em
}

#front_text, #front_text p {
    line-height: 1.9em
}

#front_pics {
    width: 491px;
    height: 256px;
    position: absolute;
    top: 0px;
    right: 0px;
    overflow: hidden;
}

div.pic_element {
    width: 491px;
    height: 256px;
    background: #212121;
    color: #212121;
    float: left;
    overflow: hidden;
}

#front_pics_welcome {
    position: absolute;
    bottom: 39px;
    left: 41px;
    z-index: 100
}

#front_bucket1, #front_bucket2, #front_bucket3 {
    height: 264px;
    float: left;
    width: 224px;
}

.front_bucket_divider {
    height: 264px;
    background-image: url('../images/front_bucket_divider.gif');
    background-position: center center;
    background-repeat: no-repeat;
    width: 32px;
    float: left;
}

#front_row2 {
    margin: 48px 0 0 0
}

#front_bucket1 ul, #front_bucket1 ul li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    text-align: left;
}

#front_bucket1 ul li {
    height: 44px;
    position: relative;
    margin: 0 0 3px 0
}

#front_bucket1 ul .num {
    color: #d0a041;
    font-weight: bold;
    font-size: 2.4em;
    letter-spacing: -0.1em;
    width: 40px;
    display: block;
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
}

#front_bucket1 ul .title {
    color: #979797;
    font-size: 1em;
    letter-spacing: -0.1em;
    position: absolute;
    left: 48px;
    top: 4px;
    display: block
}

#front_bucket1 ul .day {
    position: absolute;
    left: 48px;
    top: 24px;
    font-size: 0.8em;
    display: block;
    color: #313131
}

#front_bucket1 ul li a {
    display: block;
    width: 100%;
    height: 100%;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    text-decoration: none
}

#front_bucket1 ul li a:hover {
    background: #F1F1F1;
    height: 44px;
}

#view_full_calendar {
    font-weight: bold;
    text-align: center;
    margin: 8px 0 0 0
}

#view_full_calendar img {
    position: relative;
    top: 2px
}

#front_bucket2 .cf_element, #front_bucket2 .cf_element .content {
    background: #FFF;
    padding: 0px;
    margin: 0px
}

#front_bucket2 .cf_element .content p {
    color: #959595;
    font-size: 1.2em;
    text-align: left;
    line-height: 1.5em
}

#front_bucket2 h3 {
    color: #e2a72a
}

#front_bucket3 ul, #front_bucket3 ul li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    text-align: left;
}

#front_bucket3 ul li a {
    background: #e2b45a;
    display: block;
    font-weight: bold;
    color: #FFF;
    padding: 4px;
    font-size: 1.7em;
    text-decoration: none;
    margin: 0 0 11px 0;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border: 1px solid #d0a041;
    border-left: 12px solid #d0a041;
    letter-spacing: -0.05em
}

#front_bucket3 ul li a#link2 {
    background-color: #70c1dc;
    border-color: #4fa3bf
}

#front_bucket3 ul li a#link3 {
    background-color: #88d8a3;
    border-color: #6abb85
}

#front_bucket3 ul li a#link4 {
    background-color: #b6d781;
    border-color: #9dbe67
}

#front_bucket3 ul li a#link1:hover {
    background-color: #dba345;
    border-color: #c58a32
}

#front_bucket3 ul li a#link2:hover {
    background-color: #56b3d4;
    border-color: #3d8eb0
}

#front_bucket3 ul li a#link3:hover {
    background-color: #6ccf8e;
    border-color: #51ab69
}

#front_bucket3 ul li a#link4:hover {
    background-color: #a5ce64;
    border-color: #86af4f
}

/* End hide from IE-mac */
#footer_inner {
    width: 736px;
    margin: 0 auto 0 auto;
}

#footer_col1, #footer_col2, #footer_col3 {
    height: 211px;
    float: left;
    width: 224px;
    margin: 32px 0 0 0
}

.footer_col_divider {
    height: 199px;
    width: 32px;
    float: left;
}

#footer a, #footer a:link {
    color: #45adf5;
}

#footer a:hover {
    color: #caecff;
}

#footer a:visited {
    color: #bf98f4;
}

#footer a:visited:hover {
    color: #d4b9f9;
}

#header a {
    text-decoration: none;
}

#header a:hover #return_to_home {
    display: block
}

#return_to_home {
    position: absolute;
    color: #a8a8a8;
    font-size: 0.8em;
    display: block;
    width: 400px;
    top: 60px;
    left: 292px;
    display: none;
}

#return_to_home img {
    position: relative;
    top: 1px
}

/*
 Sticky Footer Solution
 by Steve Hatcher
 http://stever.ca
 http://www.cssstickyfooter.com
 */
/*
 * {margin:0;padding:0;}
 */
/* must declare 0 margins on everything, also for main layout components use padding, not
 vertical margins (top and bottom) to add spacing, else those margins get added to total height
 and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body, #frame {
    height: 100%;
}

body > #frame {
    height: auto;
    min-height: 100%;
}

#main {
    padding-bottom: 220px;
}

/* must be same height as the footer */
#footer {
    position: relative;
    margin-top: -220px; /* negative value of footer height - 44*/
    height: 220px;
    clear: both;
}

/* CLEAR FIX*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

/* Hides from IE-mac \*/ * html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

#footer a, #footer a:link {
    color: #7BCBF9
}

#sermon_search {
    background-color: #b6d781;
    border: 1px solid #9dbe67;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    padding: 8px;
    margin: 16px 0 16px 0;
    width: 338px
}

#sermon_search a {
    display: block;
    float: right
}