/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-weight: normal; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } @font-face { font-family: "KefaIIPro-Medium"; src: url("/static/webFonts/KefaIIPro-Medium/font.woff") format("woff"); } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } div.vid { max-width: 400px; width: 100%; } body { font-family: sofia-pro-soft, sans-serif; font-weight: 300; background-color: #e4e3f1; } p { font-family: sofia-pro-soft, sans-serif; font-weight: 300; } a { color: #009fbf; font-weight: 300; } button { margin: 1em; width: 10em; } .options { margin: 1em; } .autoadvance-group label { margin: 10px; } .myhide { position: absolute; left: -99999px; } button:focus, video:focus { outline: none !important; } .fancybox-content { padding: 60px 0 0 0 !important; background-color: white; } .options label, .options h4 { color: ghostwhite; display: inline-block; } /* Songs player modal: keep the whole player — square album art, native control bar, and the Previous/Next/auto-advance row — within the viewport so the controls never fall below the fold. video.js's aspectRatio option sizes the player height from its WIDTH (a padding-top hack), which overflows short windows and forces a scroll. Instead we derive the square art from the available HEIGHT and let the options row wrap beneath it. Scoped to #songs (the id lives on ) so other pages' fancybox modals are untouched. */ #songs .fancybox-content { padding: 0 !important; background-color: black; } #songs #my-media { height: auto !important; width: min(90vw, calc(96vh - 130px)); max-width: 100%; display: flex; flex-direction: column; background-color: black; } #songs #my-media .video-js.vjs-fluid { padding-top: 0 !important; /* drop the width-driven aspect box */ height: auto !important; aspect-ratio: 1 / 1; /* match the square album art */ width: 100%; } #songs #my-media .options { flex: 0 0 auto; } #pickerwrapper { background-image: url("/static/images/bg.jpg"); background-color: #cd5c38; padding: 50px; } #pickerwrapper.fun { background-image: url("/static/images/bg-fun.gif"); } #pickerwrapper.playlists { background-image: url("/static/images/bg-playlists.gif"); } #picker { width: 100%; text-align: center; padding: 15px; } #picker div.card { position: relative; display: inline-block; vertical-align: top; width: 370px; height: 410px; margin: 20px; background-color: #fff; border-radius: 12px; overflow: hidden; -webkit-box-shadow: 0px 0px 16px 0px rgba(54, 45, 30, 0.5); -moz-box-shadow: 0px 0px 16px 0px rgba(54, 45, 30, 0.5); box-shadow: 0px 0px 16px 0px rgba(54, 45, 30, 0.5); } #picker div.card.fun { height: 360px; } #picker div.card.songs { height: auto; } #picker img.poster { width: 100%; display: block; cursor: pointer; border-top-left-radius: 12px; border-top-right-radius: 12px; } #picker div.card a.poster { background-color: #eae3ce; display: block; } #picker div.card img.poster { opacity: 0.8; transition: opacity 0.25s ease-in-out; } #picker div.card img.poster:hover { opacity: 1; } #picker div.card img.poster.story { opacity: 0.92; } #picker div.card img.poster.story:hover { opacity: 1; } #picker h2 { font-family: KefaIIPro-Medium, serif; color: #203c73; font-size: 47px; line-height: 35px; letter-spacing: -0.03em; padding: 12px 12px 0; } #pickerwrapper h3 { font-family: KefaIIPro-Medium, serif; color: #203c73; font-size: 37px; line-height: 35px; letter-spacing: -0.03em; padding: 12px 12px 0; } #picker h3.sub { font-family: sofia-pro-soft, sans-serif; font-weight: 300; color: #333333; font-size: 23px; line-height: 23px; letter-spacing: -0.02em; padding-bottom: 20px; } #picker h4 { font-weight: 300; color: #262626; font-size: 19px; line-height: 22px; letter-spacing: -0.01em; padding: 5px 12px; } #picker h3 a { color: #203c73; transition: color 0.25s ease-in-out; } #picker h3 a:hover { color: #f69d1d; } #picker h4 a { font-weight: 300; color: #262626; } #picker p.icons { text-align: center; font-size: 20px; padding-top: 20px; display: none; position: absolute; top: 20%; z-index: 8005; } #picker p.icons a { color: #727272; margin: 0 12px; } #picker div.sharing { width: 370px; text-align: center; font-size: 20px; padding-top: 20px; display: none; position: absolute; top: 20%; z-index: 8005; } #picker div.sharing p { width: 370px; } #picker div.sharing p.sharelink { width: 370px; background-color: #f0ede7; padding: 25px; margin-top: 25px; box-sizing: border-box; line-height: 28px; white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP Printers */ word-wrap: break-word; /* IE 5+ */ } #picker div.sharing a { color: #727272; margin: 0 12px; } #picker i.hudtrigger, #picker i.sharetrigger { position: absolute; right: 18px; bottom: 16px; color: #b9c5ac; font-size: 24px; cursor: pointer; z-index: 7900; } #picker i.sharetrigger { right: auto; left: 18px; } div.card div.gray-out, div.card div.hud-overlay { width: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 8000; /*background-color: rgba(221,83,42,0.30);*/ background-color: rgba(127, 178, 207, 0.5); border-radius: 12px; border-top-right-radius: 0; } div.card div.hud-overlay { background-color: rgba(255, 255, 255, 0.95); z-index: 8002; display: none; } #picker div.status-overlay { width: 0; height: 0; border-width: 0 65px 65px 0; border-color: transparent white transparent transparent; border-style: solid; opacity: 0.85; position: absolute; z-index: 8001; top: 0; right: 0; } #picker i.currentstory { position: absolute; top: -5px; left: 15px; font-size: 60px; color: #d62f27; z-index: 99; text-shadow: 1px 1px 4px black; display: none; } #picker i.play-overlay { position: absolute; top: 146px; left: 15px; font-size: 50px; color: white; z-index: 99; text-shadow: 1px 1px 4px black; opacity: 0.4; cursor: pointer; transition: opacity 0.4s ease-in-out; } #picker i.play-overlay.songs { top: auto; bottom: 12px; } #picker i.play-overlay:hover { opacity: 0.75; } #picker div.status-overlay.draft { border-right-color: #f79d1d; } #picker div.status-overlay.ready { border-right-color: #567f44; } #picker div.status-overlay.coming { border-right-color: #c53f32; } #picker div.status-overlay i { position: absolute; top: 6px; right: -58px; font-size: 25px; color: white; z-index: 100; opacity: 0.9; } #picker img.inactive { } #picker div.verse-bubble { background-color: #ece9dd; position: absolute; bottom: -80%; width: 80%; height: 100%; border-radius: 400px; margin: 0 10%; } #picker div.verse-bubble p { font-size: 14px; width: 200px; height: 92px; margin: auto; margin-top: -3px; text-align: center; line-height: 16px; display: flex; flex-direction: column; justify-content: center; } #picker div.verse-bubble p a { display: block; color: #464646; } /*#picker div.status-overlay { text-align: right; position: absolute; top: 10px; right: 10px; font-size: 12px; color: #A5A5A5; font-family: sofia-pro-soft,sans-serif; font-weight: 300; line-height: 13px; }*/ header { text-align: center; background-color: white; background-image: url("/static/images/bible-stories-header-bg.jpg"); background-position: center bottom; background-size: contain; background-repeat: no-repeat; height: 560px; overflow: hidden; position: relative; } html#stories header { background-image: url("/static/images/bg-header-stories4.jpg"); background-size: cover; background-color: #411d39; background-position: right center; } html#playlists header { background-image: url("/static/images/bg-header-playlists.jpg"); background-size: cover; background-color: #411d39; background-position: center top; } html#fun header { background-image: url("/static/images/bg-header-fun2.jpg"); background-size: cover; background-color: #f69d1d; background-position: center center; } html#mobile header { background-image: url("/static/images/bg-header-app.jpg"); background-size: cover; background-color: #f69d1d; background-position: center center; } html#songs header { background-image: url("/static/images/bg-header-songs.jpg"); background-size: cover; background-color: #7b2f30; background-position: center center; } header #bar { background-color: #689c4c; background-image: url("/static/images/grass5-bg.jpg"); background-size: cover; height: 44px; } header h1.home, header div.site-name { text-indent: -9999px; font-size: 12px; padding: 10px; } h1.not-home { color: white; font-family: sofia-pro-soft, sans-serif; font-weight: 500; font-size: 125px; letter-spacing: -0.03em; padding-top: 270px; line-height: 80px; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } span.ro { display: inline-block; } span.r10 { transform: rotate(10deg); } span.r4 { transform: rotate(4deg); } span.r7 { transform: rotate(7deg); } span.r0 { transform: rotate(0deg); } span.r-10 { transform: rotate(-10deg); } span.r-4 { transform: rotate(-4deg); } span.r-7 { transform: rotate(-7deg); } span.kern8 { margin-left: -8px; } header h2 { font-family: sofia-pro-soft, sans-serif; font-weight: 300; font-size: 55px; color: #3a3a3a; letter-spacing: -0.04em; line-height: 55px; padding-top: 130px; padding-left: 50px; } header h2 span { color: #f57f20; font-size: 80px; position: relative; top: 7px; letter-spacing: -0.06em; } header h2 span.first { left: -170px; } #logo { position: absolute; left: 1%; top: 7px; width: 400px; } #intro, #outro { width: 100%; max-width: 1100px; margin: 0 auto; padding: 25px; position: relative; } div.fullwidth { background-color: #97e7f0; height: auto; } div.fullwidth.songs { background-color: #e5cad9; } div.fullwidth.homeplayer { background-color: #f2ebd6; } div.innerwidth { width: 100%; max-width: 1100px; margin: 0 auto; position: relative; } div.innerwidth h3 { font-family: KefaIIPro-Medium, serif; color: #cc3555; font-size: 67px; line-height: 56px; letter-spacing: -0.04em; padding-bottom: 20px; } div.coming-soon-note { float: right; max-width: 599px; padding: 200px 0 0 30px; } div.coming-soon-note p { font-size: 24px; line-height: 30px; } div.coming-soon-note img { width: 150px; display: block; margin: 30px 0; } div.coming-soon-note.songs { max-width: 380px; } #outro { padding-bottom: 15px; } #intro p, #outro p, #parents, footer p, #coming-soon-note { font-style: normal; color: #3a3a3a; font-size: 125%; line-height: 180%; margin-bottom: 18px; } #intro p.narrow { width: 45%; } #whisper { position: absolute; bottom: 0; right: -70px; width: 600px; } #noah-work { float: left; width: 450px; } em { font-style: italic; font-weight: inherit; } strong { font-weight: bold; } strong.colored { color: #7d973a; } footer { background-color: darkslategray; background-image: url("/static/images/stars-bg.jpg"); background-position: center; background-size: cover; padding: 100px 0 50px; position: relative; color: white; text-align: center; clear: both; } #footerlamb { width: 180px; position: absolute; right: 50px; top: -30px; } #parents, #coming-soon-note { display: none; background-color: white; width: 500px; padding: 30px; overflow: hidden; } a.button { display: inline-block; background-color: #009fbf; color: white; padding: 15px 20px; margin: 10px 0; font-size: 140%; border-radius: 10px; transition: background-color 500ms; font-family: KefaIIPro-Medium, serif; } a.button:hover { background-color: #cc3555; } nav { position: absolute; top: 5px; right: 100px; z-index: 10; } nav a { width: 110px; height: 110px; background-color: darksalmon; color: rgba(255, 255, 255, 0.65); border-radius: 70px; text-align: center; font-family: KefaIIPro-Medium, serif; font-size: 24px; display: inline-block; -webkit-box-shadow: 9px 0px 11px -4px rgba(0, 0, 0, 0.52); -moz-box-shadow: 9px 0px 11px -4px rgba(0, 0, 0, 0.52); box-shadow: 9px 0px 11px -4px rgba(0, 0, 0, 0.52); position: absolute; transition: transform 0.25s ease-in-out, z-index 0.25s ease-in-out; } nav a:hover { transform: scale(1.25); color: rgba(255, 255, 255, 1); z-index: 110 !important; } nav a img { display: block; margin: 0 auto; opacity: 0.65; } nav a:hover img { opacity: 1; } nav a#navstories img { padding: 23px 0 3px; width: 60%; } nav a#navstories { background-color: #653f8b; z-index: 104; right: 420px; } nav a#navplaylists img { padding: 20px 0 6px; width: 48%; } nav a#navplaylists { background-color: #36679e; z-index: 103; right: 315px; } nav a#navsongs img { padding-top: 22px; width: 30%; } nav a#navsongs { background-color: #cc3555; z-index: 102; right: 210px; } nav a#navactivities img { padding: 16px 5px 0 0; width: 60%; } nav a#navactivities { background-color: #f69d1d; z-index: 101; right: 105px; } nav a#navapp img { padding: 19px 0 3px; width: 30%; } nav a#navapp { background-color: #00b2b1; z-index: 100; right: 0; } #navbars { display: none; } a:focus { outline: none; } br.mobile-break { display: none; } a.allvidlink { color: white; } a.allvidlink:hover { color: #f7d1aa; } img.girlsongs { height: 500px; display: block; } @media (min-width: 1800px) { header h2 { padding-top: 40px; } } @media (max-width: 950px) { #intro p.narrow { width: auto; } #whisper { right: 0; width: 400px; } #intro { padding-bottom: 240px; } #footerlamb { width: 95px; position: absolute; right: 10px; top: -30px; } footer { padding: 80px 15px 30px; } header h2 { padding-top: 170px; } nav { display: none; position: fixed; right: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.95); z-index: 9998; padding: 55px 35px 20px 35px; } nav a { font-size: 34px; text-align: left; position: relative; width: auto; height: auto; padding: 8px 0 10px 40px; color: rgba(255, 255, 255, 1); display: block; -webkit-box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.52); -moz-box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.52); box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.52); margin: 20px auto; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } nav a img { float: right; opacity: 0.85; } nav a#navstories, nav a#navplaylists, nav a#navsongs, nav a#navactivities, nav a#navapp { right: auto; } nav a:hover { transform: none; color: rgba(255, 255, 255, 1); z-index: inherit; } nav a#navstories img { padding: 0 40px 0 0; width: 100px; } nav a#navplaylists img { padding: 0 40px 0 0; width: 90px; } nav a#navsongs img { padding: 0 48px 0 0; width: 80px; margin-top: -4px; } nav a#navactivities img { padding: 0 40px 0 0; width: 90px; margin-top: -4px; } nav a#navapp img { padding: 0 48px 0 0; width: 80px; margin-top: -4px; } #navbars { display: block; position: fixed; z-index: 9999; color: white; background-color: rgba(0, 0, 0, 0.6); padding: 8px 12px 8px 14px; font-size: 28px; right: 0; top: 0; border-bottom-left-radius: 5px; } div.coming-soon-note { padding-top: 40px; } img.girlsongs { height: 400px; display: block; } } @media (max-width: 700px) { #picker div.card { margin: 10px 0; width: 100%; -webkit-box-shadow: 0px 0px 12px 0px rgba(54, 45, 30, 0.9); -moz-box-shadow: 0px 0px 12px 0px rgba(54, 45, 30, 0.9); box-shadow: 0px 0px 12px 0px rgba(54, 45, 30, 0.9); } #picker div.card.fun { height: auto; padding-bottom: 20px; } #logo { width: 85%; left: 0; top: 10px; } #pickerwrapper { padding: 0; } #picker img.inactive { opacity: 0.25; } #intro p, #outro p, #parents, footer p { font-size: 118%; line-height: 140%; } #parents, #coming-soon-note { width: 100%; padding: 20px; } #noah-work { float: none; display: block; width: 100%; margin-bottom: 20px; } header { height: 530px; background-image: url("/static/images/bible-stories-header-bg-sm.jpg"); } header h2 { font-size: 50px; line-height: 50px; padding-top: 145px; padding-left: 0; } header h2 span { font-size: 60px; top: 2px; } header h2 span.first { left: 0; } h1.not-home { font-size: 100px; line-height: 80px; } br.mobile-break { display: inline; } img.girlsongs { height: auto; width: 100%; display: block; } }