body {
	background-color:#000;
	width:100%;
	height: 100%;
	color: #fff;
	font-family: 'Noto Sans', sans-serif;
	font-size: 125%;
}
audio {
	display: block;
	margin: 0;
}
img {
	margin: 50px 50px 10px 50px;
}
a {
	text-decoration: none;
	color: #e7e700;
}
button {
    border: medium none;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
    font-size: 1em;
    margin: 0;
    padding: 0;
    text-align: left;
	background-color: #000;
    outline: none !important; 
}
button:hover {
    color: #e7e700;
}
input[type="button"]::-moz-focus-inner {
    border: 0;
}
button:disabled {
	color: #444;
}
#wrapper {
    margin-left: 5px;
}
#left-col, #info { /* added to archive view */
    float: left;
    width: 35%;
}
#right-col { /* added to archive view */
    float: right;
    width: 65%;
}
#project-header {
	width: 100%;
	margin: 0 auto;
}
#cr-title {
    color: #e7e700;
	font-size: 1.6em;
}
#cr-title, #mofo {
    display: block;
    font-weight: 900;
	line-height: 1em;
}

#mofo {
    padding: 3px 0 0 0;
	font-size: 1.2em;
}
#mofo, #date-time {
    color: #fff;
    margin: 0;
}
#datetime {
    margin: 1em 0 0.5em 0;
}
#datetime div {
    margin: 0;
}
#date, #time, #date-time {
	color: #e7e700;
    display: block;
	line-height: 1em;
	height: 1em;
	margin: 1.5em 0 0.5em 0;
}
#time {
	margin: 0;
}

#interface {
	clear: both;
	width: 100%; /* 40% archive view */
}
#play-live-stream {
    clear: both;
    display: inline-block;
    font-size: 1em;
    margin: 5px 0 0;
    padding: 0 0 5px;
    text-align: left;
}
#play-live-stream-button {
	background-color: #000;
	color: #e7e700;
}
.jp-state-playing #play-live-stream-button {
	background-color: #e7e700;
	color: #000;
}
#play-live-stream.stopped, .recording.stopped button {
	/*background-color: #000;*/
}
#play-live-stream.playing, .recording.playing button, .jp-state-playing button {
	background-color: #e7e700;
	color: #000;
}
#play-live-stream.playing:hover, .recording.playing button:hover, .jp-state-playing button:hover {
	border: 1px solid #e7e700;
}

.play-symbol {
    font-size: 3em;
    line-height: 0;
    padding: 0 0 0 5px;
    position: relative;
    top: 14px;
}

.play-symbol-test {
    display: inline;
    font-size: 3em;
    line-height: 0;
    overflow: hidden;
    padding: 0 0 0 5px;
    position: relative;
    top: 13px;
}

#listen-to {
	display: block;
	margin: 1em 0;
	color: #e7e700; /* added to archive view */
}
#please-allow {
    display: block;
    font-size: 0.75em;
    padding: 15px 0 0;
    clear: both;
}
.prev-play-hidden {
	display: none;
}
ul {
    list-style: outside none none;
	padding: 0;
	margin: 0;
}
ul#day-list {
    display: block;
    width: 100%; /* 80% archive view */
}
.day {
    display: block;
    float: left;
    padding: 0;
    text-align: left;
    width: 33%; /* 25% archive view */
}
.sub-menu {
    display: block;
    margin: 0 0 0 -4px;
    padding: 0;
}
.hour {
    display: inline-block;
    padding: 4% 0;
    text-align: left;
    width: 100%;
}
.hour .play-recording {
    width: 100%;
    height: 100%;
}
#info {
    clear: both;
    display: block;
    padding: 0 0 2em 0;
}
#info-title {
    color: #e7e700;
}
#dashes, #dashes-mobile {
	display: block
}
#dashes-mobile {
	display: none;
}
#mobile-day-title {
	display:none;
}
/* FLEXSLIDER STYLES */
.flexslider {
    margin: 0 0 0 50px;
}
.flex-viewport ul li img {
    margin: 30px 0 0 0;
}
.flexslider-caption {
	margin: 0
}
/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating
   See:  http://stackoverflow.com/questions/1964839/how-can-i-create-a-please-wait-loading-animation-using-jquery/1964871#1964871
   */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('img/ajax-loader.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}
/* MOBILE STYLES */
/* MOBILE STYLES */
/* MOBILE STYLES */
@media (max-width: 1000px) {
	body {
		font-size: 300%;
	}
	#wrapper {
		min-width: 800px;
		margin: 0 auto;
		width: 95%;
	}
	#left-col, #info, #right-col { /* added to archive view */
    width: 100%;
	}
	#interface {
		clear: both;
		width: 100%;
	}
	.flexslider {
    margin: 0 0 0 5px;
	}
	.play-symbol-test {
		font-size: 1.3em; /* 1.3em; */
		line-height: 0;
		padding: 0 0 0 10px;
		position: relative;
		top: 7px;
	}
	/*.play-symbol {
		font-size: 0.8em; /* 1.3em; 
		line-height: 0;
		padding: 0 0 0 10px;
		position: relative;
		top: 7px;
	}*/
	#dashes, #dashes-mobile {
		width: 100%;
		overflow: hidden;
		height: 1.5em;
	}
	#dashes-mobile {
		display: block;
	}
	ul#day-list {
		display: block;
		width: 100%;
	}
	#desktop-day-title {
		display:none;
	}
	#mobile-day-title {
	display:inline;
	}
	#listen-to,
	#date-time,
	#play-live-stream {
		font-size: 1em;
	}
	/*#cr-title, #mofo {
		display: block;
		font-size: 4em;
		font-weight: 900;
		line-height: 1em;
		margin: 0;
	}
	#cr-title {
		margin: 0 0 5% 0;
	}
	#mofo {
		font-size: 3em;
		padding: 1.5% 0 0.5% 0;
	}
	#date-time {
		display: block;
		font-weight: bold;
		line-height: 1.1em;
		font-size: 1.5em;
		float: left;
	}
	#play-live-stream {
		background-color: #cceeff;
		clear: both;
		color: #222244;
		display: block;
		margin: 0 auto 5%;
		padding: 5px 0;
		text-align: center;
		width: 69%;
		font-size: 2em;
		font-weight: bold;
	}
	.play-symbol {
		font-size: 2em;
		line-height: 0;
		padding: 0 5px;
		position: relative;
		top: 10px;
	}
	#mofo, #date-time {
		margin: 0 0 0 2%;
	}*/
}