/* CSS Document */
/* META -----------------------------------------------------
	For the WORT 89.9 FM archives page
	rebuilding 4/2015
	Miriam Frost with Tim Schenider and Tom Christie */

/* ICONS ---------------------------------------------------- */
/* --------------------------------- general */
@font-face { /* thanks, fontello.com! */
	font-family: 'worticons';
	src: url('fonts/wort.eot'); }

@font-face {/* thanks, fontello.com! */
	font-family: 'worticons';
	src: url('fonts/wort.eot');
	src: url('fonts/wort.eot?#iefix') format('embedded-opentype'),
		url('fonts/wort.woff') format('woff'),
		url('fonts/wort.ttf') format('truetype'),
		url('fonts/wort.svg#wort') format('svg');
	font-weight: normal;
	font-style: normal; }
/* ------------------------------- specifics */
.icon:before {
	display: inline-block;
	height: 10px;
	font-size: 1.5em;
	line-height: .5;
	font-family: 'worticons';
	font-weight: normal;
	font-style: normal;
	vertical-align: top;
	text-align: center;
	-webkit-transition: color .1s ease-in 0;
	transition: color .1s ease-in 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; }

.icon+span { /* aria-label */
	display: inline-block;
	text-indent: -420px; }

#showlist thead a:hover,
.player_table a:hover,
.player_table_playing a:hover { text-decoration: none; }

/* ---------------------------- audio player */
.player_table .icon:before,
.player_table_playing .icon:before {
	width: 1.7em;
	color: #d3d3d3;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

/*canvas { /* nope *
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}*/
.player_table .icon:hover:before,
.player_table_playing .icon:hover:before { color: #58DD54; }

.icon.play:before { content: "\f00f"; }
.pause:before { content: "\f00e"; }
.loud:before { content: "\f521"; }
.mute:before { content: "\f520"; }
.restart:before { content: "\f013"; }

/* --------------------------- table sorters */
#showlist thead a { float: right; }
/*.icon.up,
.icon.down { margin-top: -4px; }*/
.icon.up:before,
.icon.down:before {
	width: 9px;
	height: 10px;
	font-size: 1.3em;
	line-height: .5;
	color: #939393; }

.up:before {
	content: "\f140";
	margin-top: -3px;
	margin-right: 5px;
	color: #939393; }
.down:before {
	content: "\f142";
	margin-right: 15px;
	color: #939393; }

.icon.on:before,
.icon.on:hover:before { color: #3c6631; } /* green */
.icon.up:hover:before,
.icon.down:hover:before { color: #f69022; } /* gold */


/* LAYOUT ---------------------------------------------------- */
/* ------------------------------------ misc */
body {
	max-width: 90%;
	margin: auto;
	padding: 0;
	font-size: 11px;
	font-family: Arial, helvetica, sans-serif;
	background-color: #fff !important; }
h2, h3, h4, h5,
caption, th, td, button { font-family: 'Lato', sans-serif; }
a { color: #335383;
	text-decoration: none; }
a:hover { text-decoration: underline; }
h1 a {
	display: block;
	width: 600px;
	height: 100px;
	margin-left: 10px;
	text-indent: -6666px;
	background: url('images/logo-desk.gif') no-repeat 0 0; }
h2 {
	margin: -30px 0 0 20px;
	color: #2A5086;
	font-size: 30px;
/*	text-align: right;*/
	text-transform: uppercase;
	text-shadow: rgb(171, 171, 171) 3px 3px 5px; }
iframe { border: none; }
p {
	margin-left: 20px;
	margin-bottom: 1.5em;
	font-size: 1.2em;
	max-width: 1000px; }
p a{ font-weight: bold; }
/* ---------------------- general table bits */
table {
	width: 100%;
	cellpadding: 0;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show; }
#showlist { margin-top: -30px; }
#showlist thead tr:last-child {
	background-color: #f8f8f8;
	border-bottom: 1px solid #000; }
#showlist th { padding-left: 4px; }
#showlist tr.even th, /* stripes */
#showlist tr.even td { background-color: #e6e6e6; }
#showlist tbody tr:hover th,
#showlist tr:hover td { background-color: #ffffbf; }

/* --------------------------------- headers */
thead th { /* col heads, mimic h6 */
	color: #5C5C5C;
	font-size: 11px;
	font-weight: normal;
	text-align: left;
	text-transform: uppercase; }
/*thead th:first-child { padding-right: 12px; }*/
thead th:last-child {
	padding-right: 4px;
	text-align: right; }
#showlist thead td[colspan="4"]:hover { background-color: #fff !important; } /* category sorter */
#showlist th {
	padding-right: 10px;
	padding-left: 23px; }
tr th[colspan="4"] { /* dates, mimic h4 */
	margin-bottom: 6px;
	padding: 2px 4px;
	color: #fff;
	font-size: 14px;
	line-height: 1.3em;
	text-align: left;
	text-transform: uppercase;
	background-color: #5c5c5c; }
#showlist tr th[colspan="4"]:hover { background-color: #5c5c5c !important; }
/* ---------------------------- detaily bits */
tbody th { /* name */
	width: 40%;
	padding: 12px 0;
	font-size: 14px;
	font-weight: normal;
	text-align: left;
	vertical-align: top; }
th p { /* description */
	font-size: 11px; }
td {
	padding: 12px 0;
	font-size: 13px;
	vertical-align: top; }
th+td { /* time */
	width: 12%;
	font-size: 1.1em; }
th+td+td { /* duration / days available */
	width: 12%;
	font-size: 12px; }
th+td+td em { /* duration */
	display: block;
	font-style: normal; }
/*#showlist td.buttons */
#showlist td:last-child {
	padding-right: 13px;
	text-align: right; } /* buttons */
/* --------------------------------- buttons */
td.playpause a { display: block; }
button.download,
button.play,
a.podcast {
	display: inline-block;
	padding: 2px 5px 3px 5px;
	color: #fff;
	font-size: 14px;
	text-align: center;
	text-transform: uppercase;
	border-radius: 3px;
	border-width: 0; }
button { padding: 1px 5px 2px !important; }

button.download { background: #335383; } /* download */
button.play { background: #3c6631; } /* play */
a.podcast { background: #5d2C77; } /* podcast */

audio { display: none; }

button.download:hover,
button.play:hover,
a.podcast:hover {
	color: #F69022;
	background: #142210;
	text-decoration: none; }
th p { /* description text (does this exist?) */
	margin: 0 0 2px 0;
	font-style: italic;
	font-weight: normal; }


/* AUDIO PLAYER ---------------------------------------------- */
.player_table td,
.player_table_playing td {
	padding: 7px 0 2px !important;
	vertical-align: middle !important;
	text-align: center; }

.player_table td a,
.player_table_playing td a,
.player_table td canvas,
.player_table_playing td canvas { cursor: pointer; }

table.player_table,
table.player_table_playing {
	max-width: 420px;
	margin: 0 auto;
	border-width: 0; }

table.player_table,
table.player_table_playing,
#showlist tr.even table.player_table td,
#showlist tr.even table.player_table_playing td,
#showlist tr:hover table.player_table td,
#showlist tr:hover table.player_table_playing td { background: #2d2d2d !important; }

td.progbar { width: 60%; }
td.playpause,
td.voldown,
td.volup { width: 7%; }
td.volbars { width:5%; }

td.playpause,
td.voldown,
td.volup { font-size: 11px !important; }

/* this was on volup icon style="position:relative;left:-6px;"*/

/* RESPONSIVE ------------------------------------------------ */
/* ---------------------------------- phones */
@media only screen and (max-width: 480px) {
	h1 a {
		width: 80% !important;
		margin: 5px auto;
		background: url('images/logo-mobile') center center no-repeat;
		background-size: contain; }
	h2 { margin: -10px auto 0;
		text-align: center; font-size:20px !important;}
	#showlist { margin-top: 5px; }
	#showlist thead th:nth-child(3), /* duration */
	#showlist tbody td:nth-child(3),
	button.download,
	td.voldown,
	td.volbars,
	td.volup /*a.podcast */ { display: none; }

	#showlist th { padding-left: 10px; }
	#showlist td:last-child { padding-right: 4px; }

	#showlist thead td[colspan="4"] { text-align: center; }
	th+td { width: 34%; } /* date */

	audio { display: block; }
	table#showlist { border: 0; }

	thead th,
	td { font-size: 14px; }
	th+td { font-size: 13px; } /* time */
	thead th a { font-size: 11px; }

	tr th[colspan="4"], /* date header */
	button.play,
	a.podcast {
		font-weight: bold !important; }

	button.play { margin-right: 0; }
	table.player_table,
	table.player_table_playing { max-width: 80%; }

	td.playpause { width: 15% !important; }
	td.progbar {
		width: 80% !important;
		padding-right: 12px !important; }

	.player_table .icon:before,
	.player_table_playing .icon:before {
		height: 40px;
		font-size: 3em !important;
		line-height: 1; }

	canvas {
		width: 100%;
		height: 20px !important;
		font-size:14px !important; }
}