/* Theme Name: Christian Assembly Theme URI: http://cachurch.com/ Description: A custom theme created specifically for Christian Assembly Version: 1.0 Author: FireTree Design, LLC Author URI: http://firetreedesign.com */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800); /** * Generic Classes */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; color: #000; background-color: #eeeded; } .content { width: 960px; margin: 0 auto; } h1, h2, h3, h4, h5, h6 { font-weight: 800; color: #3c4f6c; margin: 5px 0; } h1 { font-size: 1.4em; text-transform: uppercase; } h2 { font-size: 1.3em; font-weight: 600; } h3 { font-size: 1.2em; font-weight: 600; } h4, h5, h6 { font-size: 1.1em; } hr { background-color: rgba(60, 79, 108, 0.5); margin: 20px 0; border: 0; height: 1px; } img.alignleft { display: block; float: left; } img.aligncenter { display: block; margin-left: auto; margin-right: auto; } img.alignright { display: block; float: right; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { .content { width: 100%; padding: 0 2%; } } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { .content { width: 100%; padding: 0 2%; position: relative; clear: both; } } /** * Blog */ article.post header img { width: 100%; height: auto; } article.post header a { color: #000; text-decoration: none; } .pagination { padding: 20px 0 0 0; } /** * Service Times */ #service_times_container { display: none; background-color: #3c4f6c; color: #fff; font-size: 0.9em; text-transform: uppercase; } #service_times_container .content > div { padding: 10px 0; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { } /** * Top Bar */ #top_bar_container { background-color: #8d96a6; height: 35px; overflow: hidden; } #top_bar_container .content { line-height: 35px; text-transform: uppercase; font-size: 11px; font-weight: 600; color: #fff; } #top_bar_container .content div a { color: #fff; text-decoration: none; line-height: 35px; } #top_bar_container .content .top_bar_1 { float: left; line-height: 35px; } #top_bar_container .content .top_bar_2 { float: right; line-height: 35px; } #top_bar_container .content .service_times { display: none; } #top_bar_container .social-media-icons { font-size: 18px; } #top_bar_container .social-media-icons a { margin: 0 3px; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { #top_bar_container { min-height: 35px; height: auto; } #top_bar_container .content { line-height: normal; } } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { #top_bar_container { min-height: 35px; height: auto; } #top_bar_container .content { line-height: normal; } #top_bar_container .content .top_bar_1 { float: none; padding-right: inherit; text-align: center; } #top_bar_container .content .top_bar_2 { float: none; text-align: center; } } /** * Header Menus */ #header_container #left_menu > ul, #header_container #right_menu > ul { list-style: none; width: 100%; border-bottom: 3px solid #3c4f6c; border-top: 3px solid #3c4f6c; text-align: center; padding: 0; margin-top: 35px; } #header_container #left_menu > ul > li, #header_container #right_menu > ul > li { display: inline-block; padding: 0 10px; position: relative; } #header_container #left_menu > ul > li:first-of-type, #header_container #right_menu > ul > li:first-of-type { padding-left: 0; } #header_container #left_menu > ul > li:last-of-type, #header_container #right_menu > ul > li:last-of-type { padding-right: 0; } #header_container #left_menu > ul > li > a, #header_container #right_menu > ul > li > a { display: inline-block; text-decoration: none; line-height: 40px; color: #000; font-weight: 600; font-size: 0.8em; text-transform: uppercase; } #header_container #right_menu > ul > li:hover a, #header_container #left_menu > ul > li:hover > a { color: #688477; } #header_container #left_menu > ul > li > ul.sub-menu, #header_container #right_menu > ul > li > ul.sub-menu { display: none; width: 250px; position: absolute; left: 0; top: 40px; z-index: 999; padding: 10px; background-color: #fff; border-bottom: 10px solid #3c4f6c; border-top: 10px solid #3c4f6c; -webkit-box-shadow: 0 0 5px 3px rgba(0,0,0,0.1); box-shadow: 0 0 5px 3px rgba(0,0,0,0.1); -webkit-border-radius: 5px; border-radius: 5px; } #header_container #right_menu > ul > li > ul.sub-menu { left: auto; right: 0; } x#header_container #left_menu > ul > li > ul.sub-menu:before, x#header_container #right_menu > ul > li > ul.sub-menu:before { content: ""; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #fff; position: absolute; top: 0; left: 25px; margin-top: -7px; } x#header_container #right_menu > ul > li > ul.sub-menu:before { left: auto; right: 25px; } #header_container #left_menu > ul > li > ul.sub-menu > li, #header_container #right_menu > ul > li > ul.sub-menu > li { display: block; text-align: center; padding: 5px 0; } #header_container #left_menu > ul > li > ul.sub-menu > li > a, #header_container #right_menu > ul > li > ul.sub-menu > li > a { text-decoration: none; color: #000; font-size: 0.8em; font-weight: 600; } #header_container #left_menu > ul > li > ul.sub-menu > li > a:hover, #header_container #right_menu > ul > li > ul.sub-menu > li > a:hover { color: #688477; } #header_container #left_menu > ul > li:hover ul.sub-menu, #header_container #right_menu > ul > li:hover ul.sub-menu { display: block; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { #mobile_menu { clear: both; margin-top: 15px; } #mobile_menu > ul { list-style: none; width: 100%; padding: 0; margin: 0; } #mobile_menu > ul > li { padding: 2px 0; } #mobile_menu > ul > li > a { display: block; padding: 10px 5px; text-decoration: none; background-color: #8d96a6; color: #fff; text-transform: uppercase; -webkit-border-radius: 5px; border-radius: 5px; } #mobile_menu > ul > li > .sub-menu { list-style: none; width: 100%; padding: 2px 0 0 0; margin: 0; display: none; } #mobile_menu > ul > li > .sub-menu > li { padding: 2px 0; } #mobile_menu > ul > li > .sub-menu > li > a { display: block; padding: 5px 3px; text-decoration: none; background-color: #fff; color: #000; text-transform: uppercase; -webkit-border-radius: 5px; border-radius: 5px; font-size: 0.9em; } } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { #mobile_menu { clear: both; margin-top: 15px; } #mobile_menu > ul { list-style: none; width: 100%; padding: 0; margin: 0; } #mobile_menu > ul > li { padding: 2px 0; } #mobile_menu > ul > li > a { display: block; padding: 10px 5px; text-decoration: none; background-color: #8d96a6; color: #fff; text-transform: uppercase; -webkit-border-radius: 5px; border-radius: 5px; } #mobile_menu > ul > li > .sub-menu { list-style: none; width: 100%; padding: 2px 0 0 0; margin: 0; display: none; } #mobile_menu > ul > li > .sub-menu > li { padding: 2px 0; } #mobile_menu > ul > li > .sub-menu > li > a { display: block; padding: 5px 3px; text-decoration: none; background-color: #fff; color: #000; text-transform: uppercase; -webkit-border-radius: 5px; border-radius: 5px; font-size: 0.9em; } } /** * Left Header Menu */ #left_menu { float: left; width: 35%; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { #left_menu { display: none; } } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { #left_menu { display: none; } } /** * Right Header Menu */ #right_menu { float: right; width: 35%; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { #right_menu { display: none; } } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { #right_menu { display: none; } } /** * Logo */ #logo { text-align: center; margin-top: 30px; } #logo img { width: 18%; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { #logo img { width: 50%; } } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { #logo img { width: 70%; } } /** * Mobile Menu */ #mobile_menu_container { display: none; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { #mobile_menu_container { display: block; text-align: center; padding: 10px 0; } #mobile_menu_button { margin: 0 auto; padding: 5px 10px; text-transform: uppercase; -webkit-border-radius: 5px; border-radius: 5px; background-color: #3c4f6c; color: #fff; } #mobile_menu { display: none; } } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { #mobile_menu_container { display: block; text-align: center; padding: 10px 0; } #mobile_menu_button { margin: 0 auto; padding: 5px 10px; text-transform: uppercase; -webkit-border-radius: 5px; border-radius: 5px; background-color: #3c4f6c; color: #fff; } #mobile_menu { display: none; } } /** * Home Page Banner */ #banner_container { margin-top: 20px; } #banner_container img { width: 100%; height: auto; } /** * Home Page Highlights */ #highlight_container { margin: 25px 0; } #highlight_container .content { text-align: center; } .homepage_highlight { width: 48%; height: 380px; overflow: hidden; display: inline-block; background-color: #fff; margin: 0; vertical-align: top; padding-bottom: 15px; } .homepage_highlight:first-of-type { margin-right: 13px; } .homepage_highlight:last-of-type { margin-left: 13px; } .homepage_highlight img { width: 100%; height: auto; } .homepage_highlight h2 { text-transform: uppercase; font-size: 1.2em; font-weight: 800; } .homepage_highlight h2 a { color: #000000; text-decoration: none; } .homepage_highlight p { padding: 0 15px; font-size: 0.8em; text-align: left; color: #7e7e7e; overflow: hidden; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { .homepage_highlight { width: 46%; height: 320px; margin: 0; } .homepage_highlight:first-of-type { margin-right: 13px; } .homepage_highlight:last-of-type { margin-left: 13px; } } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { .homepage_highlight { width: 100%; margin: 0 0 15px 0; height: auto; } .homepage_highlight:first-of-type { margin-right: 0; } .homepage_highlight:last-of-type { margin-left: 0; } } /** * Home Page Images */ #image_buttons_container { margin: 13px 0; } #image_buttons_container .content { text-align: center; } #image_buttons_container .content a { text-decoration: none; width: 22.5%; margin: 0 13px; display: inline-block; } #image_buttons_container .content a:first-of-type { margin-left: 0; } #image_buttons_container .content a:last-of-type { margin-right: 0; } .image_button { width: 100%; } .image_button img { width: 100%; height: auto; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { #image_buttons_container .content a { width: 46%; margin: 13px; } #image_buttons_container .content a:nth-of-type(odd) { margin-left: 0; } #image_buttons_container .content a:nth-of-type(even) { margin-right: 0; } } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { #image_buttons_container .content a { width: 100%; margin: 10px 0; } } /** * Main Content */ #page-slider { margin-bottom: 20px; } #content_container { padding-top: 40px; padding-bottom: 40px; } .main_content { float: left; width: 73%; background-color: #fff; border-top: 10px solid #3c4f6c; padding: 20px; position: relative; margin-bottom: 20px; } .main_content header.image { margin: -20px -20px 15px -20px; } .main_content header.image img { width: 100%; height: auto; } .main_content header.image h1 { position: absolute; top: 55px; color: #fff; font-size: 1.7em; text-transform: uppercase; display: block; text-align: center; width: 100%; text-shadow: 2px 2px 2px rgba( 0, 0, 0, 0.5 ); } .main_content img.alignnone, .main_content img.alignleft, .main_content img.aligncenter, .main_content img.alighright { max-width: 100%; height: auto; } #breadcrumbs { font-size: 0.9em; text-decoration: none; color: #959595; margin-top: 0; } #breadcrumbs a { text-decoration: none; color: #959595; } #content_container > .image { position: relative; width: 100%; height: 350px; margin: 0 0 30px 0; background-size: cover; background-position: center; background-repeat: no-repeat; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { .main_content img.alignnone, .main_content img.alignleft, .main_content img.aligncenter, .main_content img.alighright { max-width: 100%; height: auto; } } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { .main_content { float: none; width: 100%; } .main_content header.image h1 { top: 20px; font-size: 1em; } .main_content img.alignnone, .main_content img.alignleft, .main_content img.aligncenter, .main_content img.alighright { max-width: 100%; height: auto; } #content_container > .image {height: 160px; } } /** * Sidebar */ #sidebar { float: right; width: 25%; } #sidebar section { background-color: #fff; border-top: 10px solid #3c4f6c; padding: 20px; margin-bottom: 20px; } #sidebar section .widget-title { font-size: 1.2em; font-weight: 800; text-transform: uppercase; margin-top: 0; } #sidebar section h2 { font-size: 1em; font-weight: 600; color: #3c4f6c; margin-bottom: 0; } #sidebar section ul { list-style: none; margin: 0; padding: 0; } #sidebar section ul li { padding-left: 15px; text-indent: -15px; } #sidebar section ul li a, #sidebar section a { text-decoration: none; color: #000; font-weight: bold; } #sidebar section .podcast { padding-top: 50px; } #sidebar section .podcast img { width: 100px; height: auto; display: block; margin-left: auto; margin-right: auto; } #sidebar section .podcast p { color: #959595; } #sidebar section a.st_sharethis { background-color: #3c4f6c; color: #fff; width: 22px; height: 22px; line-height: 22px; text-align: center; font-size: 0.8em; display: inline-block; } #sidebar section .stButton { display: none !important; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { #sidebar { float: none; width: 100%; margin-top: 20px; } } /** * Staff */ .church-pack-people { display: inline-block; width: 207px; height: 400px; vertical-align: top; background-color: #f0f0f0; margin-right: 15px; margin-bottom: 20px; padding: 15px; overflow: hidden; position: relative; } .church-pack-people:nth-child(3n) { margin-right: 0; } .church-pack-people .person-image, .church-pack-person .person-image { text-align: center; } .church-pack-people .person-image img, .church-pack-person .person-image img { width: 140px; height: 140px; -webkit-border-radius: 70px; border-radius: 70px; } .church-pack-people .churchpack-title, .church-pack-person .churchpack-title { margin: 0; padding: 3px 0 0 0; font-size: 1em; font-weight: bold; text-transform: uppercase; text-align: center; } .church-pack-people .person-title, .church-pack-person .person-title { text-transform: none; font-style: italic; font-weight: normal; margin-top: 0px; text-align: center; font-size: 1em; } .church-pack-people > .person-bio, .church-pack-person > .person-bio { font-size: 0.9em; } .church-pack-people .cp-social { position: absolute; left: 0; bottom: 10px; text-align: center; width: 100%; } .church-pack-people .cp-social ul, .church-pack-person .cp-social ul { list-style: none; text-align: center; margin: 0 !important; padding: 0 !important; } .church-pack-people .cp-social ul li, .church-pack-person .cp-social ul li { display: inline-block; float: none !important; padding: 0 3px !important; margin: 0 !important; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { .church-pack-people { width: 47.5%; height: 360px; margin: 0 5px 15px 5px !important; } } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { .church-pack-people { display: block; width: 100%; height: auto; padding-bottom: 45px; } } /** * Nivo Lightbox */ .nivo-lightbox-wrap { width: 500px !important; left: 50% !important; right: auto !important; top: 10% !important; bottom: 10% !important; margin-left: -250px !important; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { .nivo-lightbox-wrap { width: 95% !important; left: 1% !important; right: 1% !important; bottom: 1% !important; margin-left: auto !important; margin-right: auto !important; } } /** * Sermons */ #sermons .sermon_series_image { float: left; margin-right: 15px; } #sermons .sermon_series_image img { width: 150px; height: auto; } #sermons .sermon_series_info > h1 { font-size: 1.3em; text-transform: uppercase; font-weight: 600; margin: 0; } #sermons .sermon_series_info > h1 a { text-decoration: none; color: #3c4f6c; } #sermons .sermon_series_info > p { font-size: 0.9em; color: #959595; margin-top: 0; } #sermons .sermon_tbl { clear: both; width: 100%; } #sermons .sermon_tbl th { text-align: left; font-size: 1em; font-weight: 600; color: #3c4f6c; text-transform: uppercase; } #sermons .sermon_tbl th.sermon_media { text-align: center; } #sermons .sermon_tbl td { text-transform: none; color: #959595; font-size: 0.9em; padding-bottom: 5px; } #sermons .sermon_tbl td a { text-decoration: none; color: #959595; } #sermons .sermon_tbl td.sermon_title { font-weight: 600; } #sermons .sermon_tbl td.sermon_media { text-align: right; } #sermons .sermon_tbl td.sermon_media a { background-color: #3c4f6c; color: #fff; width: 22px; height: 22px; line-height: 22px; text-align: center; font-size: 0.8em; display: inline-block; } #sermons .sermon_tbl td.sermon_media .stButton { display: none !important; } #sermons hr { background-color: rgba(60, 79, 108, 0.5); margin: 20px 0; border: 0; height: 1px; } body.single-wpfc_sermon .wpfc_sermon_image { margin: 0 10px 0 0; } body.single-wpfc_sermon .wpfc_sermon_image img { width: 250px !important; height: auto !important; margin: 0 !important; } body.single-wpfc_sermon .wpfc_sermon_series_desc { font-size: 0.9em; color: #959595; } #service_type_filter { float: right; margin-top: -5px; } #service_type_filter select { border: 1px solid #c0c0c0; background-color: transparent; font-family: 'Open Sans', sans-serif; padding: 3px 5px; } #seriesengine { margin: 20px 0 !important; } .enmse-poweredbytext { display: none !important; } #seriesengine .enmse-share-details ul li a span { font-size: 11px !important; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { #sermons .sermon_series_image { float: none; margin: 0 0 10px 0; } #sermons .sermon_series_image img { width: 100%; } #sermons .sermon_tbl th.sermon_media, #sermons .sermon_tbl td.sermon_media { display: none; } body.single-wpfc_sermon .wpfc_sermon_image { margin: 0 0 10px 0; } body.single-wpfc_sermon .wpfc_sermon_image img { width: 100% !important; } } /** * Blog Post */ body.single-post .main_content header img { width: 100%; height: auto; } /** * Home Page Footer Quote */ #footer_quote_container { background-color: #8d96a6; color: #fff; padding-bottom: 15px; } #footer_quote_container p { font-size: 2em; font-weight: 300; } #footer_quote_container p strong { font-weight: 600; } #footer_quote_container blockquote { font-style: italic; } #footer_quote_container ul { list-style: none; width: 100%; text-align: center; padding: 0; } #footer_quote_container ul li { display: inline-block; margin: 0 25px; width: 20%; } #footer_quote_container ul li:first-of-type { margin-left: 0; } #footer_quote_container ul li:last-of-type { margin-right: 0; } #footer_quote_container ul li a { background-color: #3c4f6c; display: block; color: #fff; text-decoration: none; padding: 10px; text-transform: uppercase; font-weight: 600; font-size: 1.2em; } #footer_quote_container ul li a div { font-size: 0.7em; font-weight: 300; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { #footer_quote_container ul li { width: 43%; margin: 10px 25px; } #footer_quote_container ul li:first-of-type { margin-left: 0; } #footer_quote_container ul li:last-of-type { margin-right: 0; } #footer_quote_container ul li:nth-of-type(odd) { margin: 10px 25px 10px 0; } #footer_quote_container ul li:nth-of-type(even) { margin: 10px 0 10px 25px; } } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { #footer_quote_container p { font-size: 1.5em; font-weight: 300; } #footer_quote_container ul li { width: 100%; margin: 10px 0; } } /** * Page footer */ #footer_container { background-color: #3c4f6c; color: #fff; text-transform: uppercase; font-size: 0.75em; padding: 15px 0 20px 0; clear: both; } #footer_menu > ul { list-style: none; width: 100%; padding: 0; } #footer_menu > ul > li { display: inline-block; width: 24%; vertical-align: top; } #footer_menu > ul > li > a { color: #fff; text-decoration: none; font-weight: 600; } #footer_menu .sub-menu { list-style: none; padding: 0; } #footer_menu .sub-menu > li > a { color: #fff; text-decoration: none; font-weight: 300; } #footer_container > .content { padding: 20px 0; overflow: auto; } #designed_by { float: right; text-align: right; } #footer_copyright { float: left; text-align: left; text-transform: uppercase; } #designed_by a, #footer_copyright a { color: #fff; text-decoration: none; } /* iPad - Portrait -----------------------------------------*/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { #footer_container > .content { padding: 20px 10px; } } /* Other portrait tablets and most phones -----------------------------------------*/ @media only screen and (max-width: 767px) { #footer_menu > ul > li { width: 49%; margin-bottom: 15px; } #designed_by, #footer_copyright { float: none; text-align: center; } #footer_copyright { padding-bottom: 25px; } }