/* * General settings */ /* apply a natural box layout model to all elements */ /* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .hidden { /* shift content off-screen; remains visible to screen readers /* * http://webaim.org/techniques/css/invisiblecontent/ */ position: absolute; left: -999em; /* apparently this second push is required for old versions of Opera: /* http://css-tricks.com/snippets/css/accessibilityseo-friendly-css-hiding/ */ top: -999px; } @media screen and (max-width: 48em) { .large-screen { position: absolute; left: -999em; top: -999px; } } @media screen and (min-width: 48em) { .small-screen { position: absolute; left: -999em; top: -999px; } } /* * General content styles (unconditional) */ .content { margin: 0 auto; padding: 0; max-width: 60em; line-height: 1.6em; /* to prevent long URLs from breaking the layout /* https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */ word-wrap: break-word; hyphens: auto; } h1, h2 { line-height: 100%; } .text { margin-bottom: 1em; } .text div + div { padding-left: 1em; } figure img { /* http://unstoppablerobotninja.com/entry/fluid-images/ */ max-width: 100%; } /* * General content styles (conditional) */ @media screen and (max-width: 48em) { .text { margin: 0 1em 1em 1em; } .content { padding: 0; } } @media screen and (min-width: 48em) { figure { /* don't allow massive figure images or capitions */ max-width: 50%; } figure:nth-of-type(odd) { float: right; } figure:nth-of-type(even) { float: left; } /* History navigation */ .next { float: right; } } /* * Menu styling (unconditional) */ .menu { margin: 0 auto; padding: 0 0; min-height: 75px; background: #4E6FCA; overflow: hidden; } .header { float: left; } .header img { padding: .5em; } #menu-links { padding-top: .5em; float: right; } .pure-menu-list { font-weight: 200; padding: 0 0; } .pure-menu-link { color: white; padding: 0 .5em; } .pure-menu-list a:hover { background-color: #4E6FCA; } /* * Menu styles (conditional) */ @media screen and (min-width: 48em) { .pure-menu-list { height: 5em; line-height: 5em; margin-right: 2em; } #fb-icon { padding-top: .75em; } } @media screen and (max-width: 48em) { .header img { padding: 0; width: 100%; } #menu-links { float: none; clear: both; padding: 0; text-align: center; } } /* * Index page styles (unconditional) */ .fold { /* elements within are positioned absolutely relative to this container */ position: relative; background: #e8e8e8; clear: both; overflow: hidden; } #site-introduction { background-color: white; margin: 0; padding: 2% 5%; font-size: 120%; } #site-introduction a { text-decoration: none; color:#4E6FCA; font-weight: bold; } #news-box { color: #333333; padding: 0.5em 1em; } #news-box h1 { font-weight: 200; } #news-box p { font-size: 80%; } #news-box a { color: #2d5aa8; } .news-all { text-align: right; } .info-box { padding: 1em; font-weight: 200; color: white; } .info-box h1 { margin-top: 0; font-weight: 200; } .info-box a { color: white; } .info-box-link { text-decoration: none; } #playlist-box { clear: left; background-image: url("../images/Cylinder-button-Playlists@2x.jpg"); background-size: cover; } #history-box { background-image: url("../images/Cylinder-button-History@2x.jpg"); background-size: cover; } #didyouknow-box { background: #8a6028; } /* * Index styles (conditional) */ @media screen and (min-width: 48em) { .fold { width: 99.8%; } #site-introduction { min-height: 100%; top: 0; } .left { float: left; min-height: 23em; } #news-box { float: right; width: 32%; } .info-box { height: 14em; float: left; width: 32.94%; margin-top: 5px; margin-bottom: 5px; } .info-box + .info-box { margin-left: 0.5%; } } /* * Audio player styles (unconditional) */ /* extending pure.css */ .fa-lg { padding-right: 5px; } button { background-color: #4E6FCA; border: none; } /* audio player on search detail page */ .detail-audio { padding: 1em; margin: 0 auto 10px auto; } .detail-audio h3 { margin-top: 0; } /* audio player on cylinder of the day */ .track-info { padding: .625em; color: white; } .track-info h2, .track-info h3 { margin-top: 0; font-weight: 200; } .track-info p { font-size: 125%; } /* generic audio player */ .audio-wrapper { /* must be above other elements to capture click events */ z-index: 2; background-color: #4E6FCA; color: white; overflow: hidden; } .audio-wrapper a { text-decoration: none; color: white; } .audio-wrapper p a { text-decoration: underline; } .audio-wrapper a:hover { text-decoration: underline; } .audio-wrapper input { width: 100px; } .volumeSlider { -moz-appearance: none; -webkit-appearance: none; background-color: #333333; border-radius: 4px; /*for IE 11*/ padding: 0px; color:transparent; /* for IE 9 */ box-sizing: content-box; /* added by cylinders.js if not IE 9 */ /* height: 10px; */ } .volumeSlider::-webkit-slider-thumb, .volumeSlider::-moz-slider-thumb { -webkit-appearance: none; -moz-appearance: none; background-color: #ebebeb; height: 10px; width: 10px; border-radius: 100%; cursor: pointer; } .volumeSlider::-moz-range-track { border: none; background: #333333; } .volumeSlider::-moz-range-thumb { background: #ebebeb; height: 10px; width: 10px; border-radius: 100%; cursor: pointer; } .playback-controls > * { float: left; } .bar { width: 100px; position:relative; background-color: #333333; margin: 9px 5px auto 5px; } .barProgress { position:absolute; background-color: #ebebeb; } .bar, .barProgress { height:10px; border-radius: 4px; } .currentTime, .durationDisplay { margin-top: -2px; } .currentTime { padding: 5px 0 5px 5px; } .durationDisplay { padding: 5px 25px 5px 0; } .muteButton { margin-right: -10px; } .download { margin-left: 5px; float: left; clear: left; } .share { float: right; } .share:last-child { padding-right: 1em; } .share, .download { margin-top: .625em; } .share ul, .share li { display: inline; padding: 0; } .share li { padding-left: .5em; } @media screen and (min-width: 48em) { .detail-audio { width: 55%; border-radius: 5px; } .track-info, #site-introduction { width: 67.1%; position: absolute; border-right: 5px solid white; } .track-info { bottom: 0; } } @media screen and (max-width: 48em) { .volume-controls { clear: left; padding-left: 45px; } } /* * Search styles (unconditional) */ .search { background: #333333; margin: 0 auto; padding: .7em 0 0 0; height: 3em; text-align: center; border: none; } .search form { display: inline; padding: 0; } .search select { color: #333333; background-color: #ffffff; } .search select option { color: #333333; background-color: #ffffff; } .search input{ height: 1.5em; margin-top: .125em; border-radius: .25em; border: none; } .search button { background: #4E6FCA; padding: .25em .5em; margin-top: -.125em; } .pagination { background: #ffffff; color: darkslategray; clear: both; overflow: hidden; } .pagination a { text-decoration: underline; } .search-detail { text-align: center; } #sort_order { float: left; } .results-nav { float: right; } .search-results { padding-top: 1em; padding-bottom: 1em; } div.result-row { padding-left: 1em; } div.row-link { position: absolute; } div.data-label { padding-right: .5em; text-align: right; color: darkslategray; } div.result-container { max-width: 30em; } .detail-row { padding-bottom: 1em; } .record-detail h1 { text-align: center; } /* * Search Results styles (conditional) */ @media screen and (max-width: 48em) { .search input { width: 20%; } } @media screen and (min-width: 48em) { .search input { width: 35%; } .pagination { padding: .5em 1em; border-radius: .25em; } } @media screen and (max-width: 48em) { .pagination { padding: 5px; } .results-nav { padding-top: 3px; } } /* * Table styles (unconditional) */ table { margin: 10px auto; } .grid { text-align: left; } .grid td, .grid th { padding-right: 10px; } .stack td:last-child { text-align: right; } .stack td:first-child { font-style: italic; } .stack tr + tr, .grid tr + tr { border-top: 1px solid #dfdfdf; } .stack td, .stack th, .grid td, .grid th { padding-top: 10px; } /* * Table styles (conditional) */ @media screen and (min-width: 48em) { .stack, .grid { width: 60%; margin-left: 20%; margin-right: 20%; } } /* * Footer Styles */ div.footer{ background: #333333; color: white; clear: both; } div.footer-content { margin: 0 auto; max-width: 40em; padding: 0 1em 1em 1em; } div.footer a{ text-decoration: none; color: white; } ul.footer-list { list-style-type: none; font-weight: 100; font-size: 80%; } ul.footer-list li { padding: .75em; } ul.footer-list li:first-child{ color: white; font-weight: bold; } div#footer-logo img { padding:.25em; } div#copyright { padding:.25em; font-size: 60%; color: white; } .button-adopt { border-radius: 6px; color: white; background:#4E6FCA; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); font-size: 85%; }