#stream_list{
    position:relative;
    text-align:center;
    width:51.5em;
    margin:auto;
    margin-bottom:10px;
}
/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 360px) {
  #stream_list{
    text-align:center;
  }
}
#stream_list_refresh{
    min-height:unset;
    font-size:0.66em;
    cursor:default;
    margin-left:0.66em;
    background-color:#335500;
    color:#f90;
}
.refresh_note{
    display:inline-block;
    margin-left:0.66em;
    font-size:0.66em;
    color:white;
}
#stream_list .stream_button{
    display:inline-block;
    position:relative;
    width:8em;
    min-width:unset;
    max-width:unset;
    font-size:150%;
}
#stream_list .stream_button.online{
    border:1px solid #f90;
    background-color:#335500;
    float:left;
    clear:right;
}
@media (max-width: 52.5em) {
    #stream_list .stream_button.online{
        float:none;
        clear:none;
    }
}

.name{
    white-space:nowrap;
    overflow:clip;
}

#stream_list .stream_button.error{
    background-color:grey;
}

#stream_list .stream_button span{
    display:inline-block;
}

#stream_list .details{
    position:relative;
    width:100%;
    font-size:66%;
    line-height:0.9em;
    font-variant:none;
    text-shadow:none;
}
#stream_list .details.single{
    top:-0.33em;
}
#stream_list .details span{
    width:100%;
}

#stream_list .det_prop{
    font-size:0.88em;
    font-weight:normal;
    color:#f90;
    text-decoration:none;
    text-transform:lowercase;
}
#stream_list .det_prop.no_title{
    text-transform:unset;
}
#stream_list .det_val{
    font-weight:bolder;
    font-style:italic;
    color:white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#stream_list .listeners{
    position:relative;
    top:0.15em;
}
#stream_list .listeners .det_prop,
#stream_list .listeners .det_val{
    width:unset;
}
#stream_list .listeners .det_prop{
    position:relative;
    top:-0.05em;
    margin-right:0.25em;
}

#stream_list .footnote{
    position:absolute;
    bottom:-2px;
    right:3px;
    font-size:50%;
    max-width:calc(100% - 0.5em);
    white-space:nowrap;
    overflow:clip;
    font-style:italic;
    color:white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

#stream_list .status_icon{
    position:absolute;
    right:0;
    top:0;
    width:1em;
    height:1em;
    background-size:100%;
}
#stream_list .checking .status_icon{
    background-image:url(graphics/loading_spinner.gif);
}
#stream_list .stream_button:hover .status_icon,
#stream_list .stream_button:active .status_icon{
    background-image:url(graphics/Light-Yellow_labeled.png);
}
#stream_list .offline:hover .status_icon,
#stream_list .offline:active .status_icon{
    background-image:url(graphics/Light-Red_labeled.png);
}
#stream_list .online:hover .status_icon,
#stream_list .online:active .status_icon{
    background-image:url(graphics/Light-Green_labeled.png);
}