/*
 * 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: #648ACF;

  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: #648ACF;
}

/*
 * 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:#648ACF;
	font-weight: bold;
}

#news-box {
  color: #3d6dc3;

  padding: 0.5em 1em;
}

#news-box h1 {
	font-weight: 200;
}

#news-box p {
	font-size: 80%;
}

#news-box a {
  color: #3d6dc3;
}

.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: #eba000;
}

/*
 * 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: #648ACF;
  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: #648ACF;
  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 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 input{
 	height: 1.5em;
 	margin-top: .125em;
 	border-radius: .25em;
 	border: none;
}

.search button {
	background: #648ACF;
	padding: .25em .5em;
	margin-top: -.125em;
}

.pagination {
	background: #e8e8e8;
	color: #808080;

  clear: both;
  overflow: hidden;
}

.pagination a {
  color: #808080;
}

.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: #808080;
}

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: #808080;

}

ul.footer-list {
	list-style-type: none;
	font-weight: 100;
	font-size: 80%;
	color: #808080;
}

ul.footer-list li {
	padding: .25em;
}

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: #808080;
}