:root {
    --color-status-success: 90;
    --color-status-error: 0;
    --color-status-neutral: 247;
}


/* Landscape phones and down */
@media (min-width: 980px)
{

#inline_logo
{
display: none;
}

}

/****************
    General
*****************/

body
{
    font-family: 'Source Sans Pro', sans-serif;
}

#logo
{
    position: fixed;
    left: 20px;
    top: -2px;
    z-index: 4000;
}

body h1
{
    font-size: 3em;
    font-family: 'Source Sans Pro';
    font-weight: 200;
    margin-bottom: 0;
}

h2
{
    font-size: 14pt;
    padding-top: .5em;
}

h3
{
    font-size: 12pt;
}

.brand img
{
    display: inline;
}

.logo-group
{
    padding: .5em 0 1em 0;
}



/*******************
   "List" Tables
********************/


table.list
{
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 2em;
}

table.list tr td
{
    padding: .3em;
    border-top: thin dotted #ccc;
    border-bottom: thin dotted #ccc;
    vertical-align: middle;
}

table.list tr:hover td {
    background-color: #eeeeee;
}

table.list tr.nohighlight:hover td {
    background-color: inherit;
}

table.list th
{
    text-align: left;
    padding: 5px;
    font-weight: bold;
}

table.list th,
table.list td
{
    padding-right: 1em;
}

table.list td
{
    height: 40px;
}

table td.numeric,
table th.numeric
{
    text-align: right;
}

table.list td.empty
{
    text-align: center;
    font-size: .8em;
}

table.list tr.group
{
    font-weight: bold;
    height: 3em;
    vertical-align: bottom;
}

table.list tr.group:hover td
{
    /* don't show hover effect for group rows */
    background-color: inherit;
}

td.logo
{
    width: 32px;
}

td.logo img
{
    max-height: 32px;
    max-width: 32px;
}

table form
{
    display: inline;
}

/* used for headers above a group of table rows */

table.list th.group
{
    background-color: #999;
    color: white;
    text-align: center;
}

table.list th.group a
{
    color: white;
}

table.list th.group i
{
    font-size: .7em;
}

.description,
.summary
{
    color: #222;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    text-align: justify;
}


div.description,
div.summary
{
    margin-top: 1em;
}

.summary img
{
    display: none;
}

/* don't show images in the description of the podcast page */
.first-episode img
{
    display: none;
}

.first-episode div.description
{
    margin-top: .5em;
}

.first-episode h2
{
    margin-bottom: 0;
    line-height: 1em;
}

div#podcastlogo
{
    float: right;
    padding-left: 20px;
    padding-bottom: 10px;
}

#podcastlogo img {
    max-height: 128px;
    max-width: 128px;
}


.short
{
    height: 1.3em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.URL
{
    text-decoration: none;
    color: black;
}

.URL:hover
{
    text-decoration: underline;
}

img.device_icon
{
    padding: 3px;
    vertical-align: middle;
}


/******************
     Searching
*******************/

form.search input[type="text"]
{
    width: 300px;
    display: inline;
}

form.search ul
{
    display: inline;
    margin: 0px;
    padding: 0px;
}

form.search ul li
{
    list-style: none;
    display: inline;
}

form.search input[type="submit"]
{
    margin-top: 20px;
    display: inline;
}

form.internal
{
    display: none;
}

div.result img
{
    float: left;
}

div.result a.podcast
{
    font-size: 1.2em;
    color: black;
    padding-top: 2em;
    font-weight: bold;
    display: block;
}

div.result span.episode
{
    display: list-item;
    margin-left: 2em;
}

div.result span.episode a
{
    color: black;
}


input.url
{
    width: 80%;
}

.bar
{
    background-color: #777;
    color: white;
    float: left;
    text-align: left;
}

.bar span, .barbg span
{
    padding-left: 5px;
    padding-right: 5px;
}

.barbg
{
    background-color: #aaa;
    text-align: right;
    color: black;
    float: left;
    width: 100%;
}


span.from_podcast, span.latest_episode {
    font-size: x-small;
    color: #666;
}

span.from_podcast a, span.latest_episode a {
    color: #333;
}

.time
{
    width: 5em;
}


.own-chapter
{
    font-weight: bold;
}

div.related-podcasts
{
    float: right;
}


.toplist-pos
{
    padding-left: 1em;
}

#tagcloud
{
    text-align: justify;
}

.sponsoring-podcast
{
    padding-top: 1em;
    padding-bottom: 1em;
}

.sponsoring-podcast img
{
    float: left;
}



iframe.results
{
    width: 100%;
    border: none;
}

.by-user
{
    font-size: 50%;
}



/*****************
   Footer
*******************/

footer, footer a
{
    color: #777;
}

footer ul
{
    list-style-type: none;
}

div.first-episode
{
    margin-bottom: 2em;
}



/************************
   Episode Lists
*************************/

div.episodes div.episode
{
    clear: left;
}

div.episode span.title
{
    font-size: 1.5em;
    font-family: 'Source Sans Pro';
    font-weight: 200;
}

div.episodes div.episode
{
    margin: 1.5em 0 1.5em 0;
}

div.episode div.description
{
    font-family: 'Source Sans Pro';
    font-weight: 300;
}

div.episodes div.description
{
    margin-top: 0;
    max-height: 2.9em;
    overflow: hidden;
    text-overflow: ellipsis; /* why doesn't this work?! */
}


div.episode span.number
{
    display: inline;
    font-size: 1.5em;
    font-weight: 300;
    font-family: 'Source Sans Pro';
}


div.episode div.listeners
{
    width: 8em;
    float: right;
    font-size: .7em;
}

div.episode span.released,
div.episode span.status
{
    font-size: .7em;
    font-weight: normal;
}

div.first-episode
{
    margin-top: 1.5em;
}

div.first-episode div.header
{
    font-size: 1.5em;
}

/*
div.first-episode div.episode div.header a
{
    text-decoration: none;
    color: black;
}
*/




/* Sidebar Navigation */

.sidebar-nav
{
    text-align: right;
    border-right: thin solid #222;
    margin-right: 1em;
}

.sidebar-nav a
{
    color: #222;
}

.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  background-color: #888;
  color: #eee;
}

#content
{
    padding-top: 1em;
}

#tag-box form
{
    display: inline-block;
}


div.podcasts
{
    padding-top: 2em;
}


div.podcasts div.podcast
{
    overflow: hidden;
    margin-bottom: 2em;
    padding: .2em;
}


div.podcasts div.podcast div.logo
{
    float: left;
    padding-right: .5em;
}

div.podcasts div.podcast div.actions
{
    float: right;
    padding-left: .5em;
    display: box;
}

div.podcasts div.podcast div.title
{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

div.podcasts div.podcast div.title a
{
    font-family: 'Source Sans Pro';
    font-weight: 300;
    font-size: 1.9em;
}

div.podcasts div.podcast div.description
{
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: .5em;
    height: 7em;
}

div.podcasts div.podcast div.actions a.btn,
div.podcasts div.podcast div.actions button.btn

{
    display: none;
    margin-bottom: 1em;
    box-flex: 1;

}

div.podcasts div.podcast:hover div.actions a.btn,
div.podcasts div.podcast:hover div.actions button.btn
{
    display: block;
}

/* http://stackoverflow.com/a/18330040/693140 */
.nav > li.disabled.nav-header > a {
    cursor: default;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.tab-pane
{
    padding-top: 1em;
}

.centered {
    float: none;
    margin: 0 auto;
}

.hosting {
    text-align: center;
}

.status-success {
    background-color: hsla(var(--color-status-success), 100%, 75%, 1);
}


.status-error {
    background-color: hsla(var(--color-status-error), 100%, 75%, 1);
}

.status-neutral {
    background-color: hsla(var(--color-status-neutral), 16%, 85%, 1);
}