/* 1. Reset 2. General 3. Header 4. Content 5. Sidebar 6. Footer 7. Mobile Styles 8. Print Styles */ /* ================================================================================== */ /* == 1. Normalize.css v1.01 ======================================================== */ /* ================================================================================== */ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /*transition:all .5s linear; -o-transition:all .5s linear; -moz-transition:all .5s linear; -webkit-transition:all .5s linear;*/ } /* ================================================================================== */ /* == 2. General Styles ============================================================= */ /* ================================================================================== */ html,body { font-family: "open-sans", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.75em; color: #676767; } .container { max-width: 1024px; padding: 0 6%; margin: 0 auto; overflow: hidden; transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; } p, h1, h2, h3, h4, h5, h6, ul { margin: 0; padding: 0; margin-bottom: 15px; transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; } a { text-decoration: none; color: #2a70b1; -webkit-transition: all 0.218s; -moz-transition: all 0.218s; -ms-transition: all 0.218s; -o-transition: all 0.218s; transition: all 0.218s; } a:hover { color: #66BE4A; } h1, h2, h3, h4, h5, h6 { font-family: "adelle", Georgia, sans-serif; color: #333; font-size: 24px; font-weight: 600; } h2 { font-size: 24px; } h3 { font-family: "open-sans"; font-size: 15px; font-weight: 700; margin-bottom: 0px; } section { margin: 70px 0; overflow: hidden; } a.read-more { background: url(img/icon-arrow.png) no-repeat right; padding-right: 17px; } @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){ a.read-more { background: url(img/icon-arrow@2x.png) no-repeat right; background-size: 12px 10px; } } a.button { display: block; background: #2D78BD; color: #fff; padding: 12px 19px; text-align: center; border-radius: 4px; font-weight: 700; text-shadow: 0px 1px 1px rgba(0,0,0,0.3); } a.button:hover { background: #66BE4A; } a.button { position: relative; text-align: left; padding-left: 67px; display: inline-block; margin-top: 5px; padding-right: 40px; } a.button span { width: 52px; height: 100%; position: absolute; top: 0; left: 0;} @media only screen and (min-width: 1024px) { .container { padding: 0 70px; } } @media only screen and (max-width: 768px) { section { margin: 40px 0; } } /* ================================================================================== */ /* == 3. Header ===================================================================== */ /* ================================================================================== */ #header { height: 138px; overflow: hidden; padding: 25px 0; margin: 0; } #header hgroup { float: left; } #header hgroup a { display: block; width: 352px; height: 88px; background: url(img/jasper-sda-logo.png); } @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){ #header hgroup a { background: url(img/jasper-sda-logo@2x.png); background-size: 352px 88px; } } #header hgroup h1, #header hgroup h2 { text-indent: -9999px; } /*Navigation*/ #main-nav {float: right; font-family: "adelle"; } #main-nav ul { overflow: hidden; margin: 0; margin-right: -10px; } #main-nav ul li { float: left; margin-left: 10px; } #main-nav ul li a { display: block; padding: 10px; line-height: 68px; color: #898989; } @media only screen and (max-width: 930px) { #header { height: auto; text-align: center; } #header hgroup { float: none; margin: 0 auto; width: 352px;} #main-nav { float: none; margin-top: 33px; background: #F4F3F0; border: 1px solid #E1DDD9; border-radius: 5px; } #main-nav ul { margin: 0; width: auto; } #main-nav ul li { width: 20%; margin: 0; border-right: 1px solid #E1DDD9;} #main-nav ul li:last-child { border: none; } #main-nav ul li a { line-height: normal; padding: 13px 0 10px 0; } #main-nav ul li a:hover { background: #DFEAF3; } } @media only screen and (max-width: 640px) { #main-nav ul li { width: 50%; margin: 0; border-right: 1px solid #E1DDD9; border-bottom: 1px solid #E1DDD9;} #main-nav ul li:last-child { width: 100%;} } @media only screen and (max-width: 320px) { #main-nav ul li{ width: 100%; } } /* ================================================================================== */ /* == 4. Content ==================================================================== */ /* ================================================================================== */ article { widt/h: 90%; margin: 0 auto; text-align: justify; } article section { margin: 0 0 0px 0; } article p { margin: 1em 0; } article h1 { font-size: 2em; margin: 0 0 .67em 0; } article h2 { font-size: 1.5em; margin: .83em 0; } article h3 { font-size: 1.17em; margin: 1em 0; } article h4 { font-size: 1em; margin: 1.33em 0; } article h5 { font-size: .83em; margin: 1.67em 0; } article h6 { font-size: .75em; margin: 2.33em 0; } article ul { list-style: disc; padding-left: 25px; } article ul li { margin: 1em 0; } .article { background: #eee; padding: 50px; border-radius: 5px; box-shadow: inset 0px 1px 5px rgba(0,0,0,0.2); margin: 20px 0; transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; } .article article { background: #fff; padding: 50px; border-radius: 5px; box-shadow: 0px 2px 5px rgba(0,0,0,0.2); transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; } @media only screen and (max-width: 690px) { .article, .article article { padding: 0px; box-shadow: none; } } /*Church Picture*/ #church-building { background: #DFEAF3 url(img/feature-bg2.png) no-repeat bottom; background-size: 100%; text-align: center; margin-top: 0; position: relative; } #church-building #image { position: relative; } #church-building #image:before { content: ""; background: url(img/feature-bg3.png) no-repeat top; background-size: 100%; position: absolute; z-index: 99; height: 30px; width: 100%; display: block; } #church-building #image:after { content: ""; background: url(img/feature-bg1.png) no-repeat bottom; background-size: 100%; position: absolute; z-index: 99; height: 30px; width: 100%; display: block; bottom: 0px; } #church-building img { display: block; width: 100%; height: 300px; position: relative; z-index: 9; } #church-building .text { padding: 30px 25px 20px 25px; } #church-building .text h2 { margin-bottom: 7px; } #church-building .text p { font-family: "adelle"; font-size: 18px; font-weight: 400; } /*Welcome Content*/ #content { background: url(img/shadow-divider.png) no-repeat bottom center; padding-bottom: 97px; background-size: 100% 28px; } #content #welcome { float: left; width: 61%; } #content #times { float: right; width: 32%; } @media only screen and (max-width: 768px) { #content { padding-bottom: 75px; } } /*Location*/ #location { } #location #details { float: left; width: 28%; } #location iframe { float: right; width: 65%; height: 390px; border: 1px solid #cdcdcd; } #location a.button span { background: rgba(0,0,0,0.1) url(img/icon-car.png) no-repeat center; } .lt-ie9 #location a.button span { background: url(img/icon-car.png) no-repeat center; border-right: 1px solid #fff; } @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){ #location a.button span { background: rgba(0,0,0,0.1) url(img/icon-car@2x.png) no-repeat center; background-size: 27px 15px; } } #online {} #online #zoom { float: left; width: 61%; } #online #sermon { float: right; width: 32%; } #online #sermon .button { } .special-note { background: #CCA139; padding: 60px; border-radius: 5px; text-align: center; color: #fff; font-size: 18px; line-height: 1.7em; text-shadow: 0 1px 1px rgba(0,0,0,0.3); } .special-note p { margin: 0;} .special-note a { color: #fff; text-decoration: underline; } /*Contact*/ #contact { background: #D5E4F2; padding: 35px; border-radius: 5px; margin-bottom: 10px; margin-top: 90px; } #contact h2 { margin-bottom: 10px; } #contact #contact-us { float: left; width: 61%; } #contact #facebook { float: right; width: 32%; } #contact #contact-us a.button span { background: rgba(0,0,0,0.1) url(img/icon-mail@2x.png) no-repeat center; background-size: 26px 20px; } .button-facebook span { background: rgba(0,0,0,0.1) url(img/icon-facebook@2x.png) no-repeat center; background-size: 10px 18px; } @media only screen and (max-width: 590px) { #content { padding: 0; background: none; } #content #welcome, #content #times, #location #details, #location iframe, #contact #contact-us, #contact #facebook, #online #zoom, #online #sermon { float: none; width: 100%; } #content #welcome, #location #details, #contact #contact-us, #online #zoom { margin-bottom: 40px; } #contact { margin: 0 0 10px 0; } } /*Contact Form*/ #contact-form { background: #D5E4F2; padding: 35px; border-radius: 5px; margin: 10px 0; } #contact-form input, #contact-form textarea { padding: 12px; border: none; border-radius: 4px; } #contact-form input { float: left; width: 31%; box-shadow: inset 0px 1px 3px rgba(0,0,0,0.35); } #contact-form input#Email { margin: 0 3.5%; } #contact-form textarea { clear: both; width: 100%; margin-top: 30px; box-shadow: inset 0px 1px 3px rgba(0,0,0,0.35); } #contact-form input.submit-button { margin-top: 30px; width: 100%; background: #2D78BD; color: #fff; font-weight: 700; text-shadow: 0px 1px 1px rgba(0,0,0,0.3); box-shadow: 0px 1px 3px rgba(0,0,0,0.2), inset 0px 1px 1px rgba(255,255,255,0.2), inset 0px -1px 1px rgba(0,0,0,0.2); } #contact-form input.submit-button:hover { background: #66BE4A; } @media only screen and (max-width: 480px) { #contact-form input { float: none; width: 100%; } #contact-form input#Email { margin: 15px 0; } } #message-thanks { background: #D5E4F2; padding: 35px; border-radius: 5px; margin: 10px 0; text-align: center; } #message-thanks h2 { margin: 200px 0; } /* ================================================================================== */ /* == 6. Footer ===================================================================== */ /* ================================================================================== */ #footer { clear: both; color: #898989; font-size: 12px; padding: 0 0 20px 8px; } #footer a { color: #898989; text-decoration: underline; } .announcement-banner { background: #CCA139; padding: 60px 0; text-align: center; color: #fff; font-size: 16px; text-shadow: 0 1px 1px rgba(0,0,0,0.3); } @media only screen and (max-width: 680px) { .announcement-banner { padding: 40px 0; font-size: 1rem; } } @media only screen and (max-width: 620px) { .announcement-banner br { display: none; } } /* ================================================================================== */ /* == 8. Print Styles =============================================================== */ /* ================================================================================== */ /* MAKE BETTER PRINT STYLES */ @media print { * { background: transparent !important; color: #000 !important; box-shadow:none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }