/*
=====================================================================
= Specific Elements By ID
=====================================================================
*/

#infobar {
    width:100%;
    padding-top:4px;
    padding-bottom:4px;
    margin:0px;
    overflow-y:hidden;
    overflow-x:hidden;
}

#progress {
    font-size:6pt;
}

#playbackTime {
    font-weight:bold;
    font-size:11px;
    padding-top:1px;
    height:15px;
    line-height:15px;
    text-align:center;
    width:100%;
}

#albumcover {
    padding-left:4px;
    padding-right:4px;
    padding-top:4px;
    padding-bottom:4px;
    margin:0px;
    height:82px;
    z-index:500;
}

#albumpicture {
    width: auto;
    height: 82px;
}

#nowplaying {
    font-size:8pt;
    padding-top:0px;
    padding-bottom:0px;
    height:60px;
    width:100%;
    overflow:hidden;
    box-sizing:border-box;
    border-right:4px solid transparent;
    border-left:4px solid transparent;
}

#patrickmoore {
    overflow:hidden;
    margin-right:12px;
}

#firefoxisshitwrapper {
    overflow:hidden;
}

#nptext {
    width:auto;
    overflow:hidden;
}

#amontobin {
    padding-top:4px;
}

#sortable {
    width:100%;
}

#infopane {
    height:100%;
    overflow:auto;
    position:relative;
    display:block;
}

#tagadder {
    width:400px;
    padding-right:8px;
    padding-bottom:4px;
}

#dbtags {
    overflow:hidden;
    opacity:0.9;
    font-size:8pt;
    height:22px;
    line-height:22px;
}

#playcount {
    overflow:hidden;
    opacity:0.9;
    font-size:8pt;
    height:22px;
    line-height:22px;
}

#lastfm {
    float:left;
    margin-left:4px;
    padding-top:1px;
}

#lastfm img {
    margin-right:2px;
    margin-left:2px;
}

#headerbar {
    padding:0px;
    margin:0px;
    width:100%;
    height:40px;
}

#bottompage {
    width:100%;
}

#sources {
    height:100%;
    overflow:auto;
}

#volumecontrol {
    width:14px;
    margin-left:0px;
    margin-right:0px;
    font-size:8px;
}

#notifications {
    position:absolute;
    width:50%;
    max-width:480px;
    padding:8px;
    top:0px;
    display:none;
    z-index:2000;
    right: 0px;
}

#keybindtable {
    margin-bottom:1em;
}

#outputbox {
    max-width:20%;
}

#mobileplaylistcontrols
{
    display:none;
}

#audiobooks .podcastresume>.fixed
{
    padding-left: 24px;
}

#audiobooks .podcastresume>.expand
{
    margin-right: 4px;
}

#flowcontrols {
    height: 36px;
}

#flowcontrols i {
    max-height: 24px;
    margin-top:4px;
}

/*
=====================================================================
= General Classes
=====================================================================
*/

.infobarlayout {
    margin-left:12px;
    margin-top:0px;
    margin-bottom:0px;
    padding-top:0px;
    padding-bottom:2px;
    padding-left:0px;
    padding-right:0px;
    height:90px;
}

.topstats {
    float:left;
    margin-right:8px;
    margin-top:1px;
}


.tagremover {
    margin-left:0.5em;
}


.clicktext {
    font-size:7pt;
    font-weight:bold;
}

.topimg {
    margin-right:4px;
    margin-left:4px;
    margin-bottom:2px;
    cursor: pointer;
    vertical-align:middle;
}

.npicon {
    padding:0px;
    margin-top:0px;
    margin-left:0px;
    margin-bottom:0px;
    margin-right:4px;
    height:20px;
    width:20px;
    vertical-align:middle;
}

.dropmenu {
    padding-left:16px;
}

.playlisticon {
    padding:0px;
    margin-right:4px;
    margin-bottom:2px;
    margin-top:2px;
    vertical-align:middle;
    height: 12px;
    width: 12px;
}

.collectionicon {
    padding:0px;
    margin-right:4px;
    margin-bottom:2px;
    margin-top:2px;
    vertical-align:middle;
    width:16px;
    height:16px;
}

.playlisticonr {
    padding:0px;
    margin-left:4px;
    margin-right:2px;
    margin-bottom:2px;
    margin-top:2px;
    vertical-align:middle;
    height: 12px;
    width: 12px;
}

.rating-icon-big {
    height: 20px;
    width: 100px;
    cursor: pointer;
    vertical-align:middle;
}

.rating-icon-small {
    height: 14px;
    width: 70px;
    cursor: pointer;
    vertical-align:middle;
}

.headercontainer {
    height:90%;
    box-sizing:border-box;
}

.background-left {
    background-position: left !important;
    max-height: 24px;
}

.background-right {
    background-position: right !important;
    max-height: 24px;
}

#sourcescontrols i, #chooserbuttons i, #playlistcontrols i {
    max-width: 24px;
}

i.topdrop
{
    position: relative;
    font-style: normal;
}

.dragmenu {
    cursor:move;
}

.menuitem {
    font-weight:bold;
    margin:0px;
    padding-left:8px;
    padding-right:0px;
    padding-top:2px;
    padding-bottom:2px;
    -webkit-box-align:center;
    align-items: center;
}

.playlistitem.menuitem {
    align-items: inherit !important;
}

.playlistalbum {
    font-weight:bold;
    margin:0px;
    padding-left:4px;
    padding-right:0px;
    padding-top:4px;
    padding-bottom:2px;
    -webkit-box-align:stretch;
    align-items: stretch;
}

.mh {
    margin-right:6px;
    display:block;
    margin-top:2px;
    margin-bottom:2px;
}

.menu {
    width:14px;
    height: 14px;
    vertical-align:middle;
    cursor:pointer;
}

.ninesix {
    font-size:96%;
    padding-top:2px;
}

.indent {
    margin-left:16px;
}

.padright {
    padding-right:4px;
}

.buttonchange {
    text-align:center;
}

.outhack {
    width:14px;
    height:14px;
    margin-top:2px;
}

.cshrinker {
    max-width:400px;
}

/*
=====================================================================
= Info Panel - General
=====================================================================
*/

.info-box-fixed {
    -webkit-box-flex:0;
    flex-grow: 0;
    flex-shrink:0;
}

.info-border-right {
    border-right: 1px solid #454545;
    padding-right:1em;
    max-width:240px;
}

.info-box-expand {
    -webkit-box-flex:1.0;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

.info-detail-layout {
    margin-top:8px;
}

.cleft {
    border-left: 1px solid #454545;
    padding-left:1em;
    margin-left:1em;
}

/*
=====================================================================
= Dropdown Menus
=====================================================================
*/

div.normalmenu
{
    width:25vw;
    max-width:360px;
    min-width:240px;
}

div.widemenu
{
    width:40vw;
    max-width:640px;
    min-width:400px;
}

div.leftmenu
{
    top: 30px;
    left: 0px;
}

div.rightmenu
{
    top:30px;
    right:-12px;
}

/*
=====================================================================
= Podcasts
=====================================================================
*/

.podicon {
    padding:0px;
    margin:2px;
    height:16px;
    width:16px;
    vertical-align:middle;
}

/*
=====================================================================
= Responsive Layout
=====================================================================
*/

@media screen and (max-width: 480px) {
    #notifications {
        width: 90% !important;
    }
}

@media screen and (min-height: 800px) and (max-height: 939px) {
    .infobarlayout {
        height:115px;
    }
    #albumcover {
        height: 107px;
        padding-right:6px;
    }
    #albumpicture {
        height: 107px;
    }
    #nowplaying {
        height: 85px;
    }
}

@media screen and (min-height: 940px) and (max-height: 1099px) {
    .infobarlayout {
        height:140px;
    }
    #albumcover {
        height: 132px;
        padding-right:8px;
    }
    #albumpicture {
        height: 132px;
    }
    #nowplaying {
        height: 110px;
    }
}

@media screen and (min-height: 1100px) {
    .infobarlayout {
        height:160px;
    }
    #albumcover {
        height: 152px;
        padding-right:8px;
    }
    #albumpicture {
        height: 152px;
    }
    #nowplaying {
        height: 130px;
    }
}