/*
=====================================================================
= Standard HTML Elements
=====================================================================
*/

h1 {
    font-size:130%;
}

h2 {
    font-size:120%;
}

select {
    width:100%;
    height:3em;
}

.selectholder {
    height:3em;
}

input[type="text"] {
    height:3em;
}

div {
    box-sizing: border-box;
}

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

#pscroller {
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
}

#headerbar {
    border:none;
    height:40px;
    padding:0px;
    margin:0px;
}

/* Note this includes 40px for headerbar. Keep them synced */
#loadsawrappers {
    /* Tried to use this, but safari on my iPhone S sets 100vh as 320px when the browser reports
    it as 300px, even in full-screen mode. This is definitely a bug, but what can ya do? */
    /* Note this includes 40px for headerbar. Keep them synced */
    /* height: calc(100vh - 40px); */
    width: 100%;
    overflow:hidden;
}

#albumpicture {
    object-fit:contain;
}

#volumecontrol {
    height:2em;
}

#volume {
    width: 95%;
}

#infobar {
    overflow-x:hidden;
    overflow-y:hidden;
}

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

#buttons {
    padding-left:0px !important;
    padding-right:0px !important;
    padding-top:2px !important;
    padding-bottom:0px !important;
    text-align:center;
}

#amontobin {
    overflow:hidden;
}

#nowplaying {
    /* white-space:nowrap; */
    margin:auto;
    padding:4px;
}

#nptext {
    text-align:center;
}

#subscribe {
    float:left;
    margin-left:12px;
}

#lastfm, #addtoplaylist, #ptagadd, #subscribe {
    float:right;
    margin-left:6px;
    margin-right:6px;
    line-height:34px;
    height:34px;
}

.playspan {
    margin-right: 1em;
}

#playcount {
    padding-top:0px;
    padding-left:8px;
    margin-left:12px;
    margin-right:12px;
    overflow:hidden;
    opacity:0.9;
    font-size:8pt;
    height:34px;
    line-height:34px;
    float:left;
}

#dbtags {
    clear: both;
    margin-top:4px;
    padding-top:0px;
    overflow:hidden;
    opacity:0.9;
    font-size:8pt;
    line-height:12pt;
}

#scrobwrangler {
    font-size:8pt;
    width:90%;
}

#stars {
    margin-top:0px;
    margin-right:2px;
    margin-left:4px;
    padding-top:0px;
}

#controls {
    padding-top:1px;
}

#notifications {
    position:absolute;
    width:100%;
    padding:4px;
    bottom:0px;
    left:0px;
    display:none;
    font-size:8pt;
    font-weight:bold;
    z-index:2000;
}

#lastfm img {
    margin-right:4px;
}

#chooserbuttons
{
    padding-top:4px;
}

#sourcescontrols
{
    width:100%;
}

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

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

#flowcontrols {
    height: 36px;
}

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

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

div.topdropmenu {
    z-index:10009;
    box-sizing:border-box;
    width:100%;
    position:fixed;
    right: 0;
}

div.topdropmenu.albumbitsmenu {
    position: absolute;
    top: 12px;
}

.chooser {
    margin-left:auto;
    margin-right:auto;
    font-weight:bold;
    font-size:130%;
    padding-bottom:1em;
    text-align:center;
    cursor:pointer;
}

.topdrop
{
    display: inline-block;
    float: none !important;
}

.pref {
    margin-left:8px;
    margin-bottom:12px;
}

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

.topdropmenu .topimg {
    width:36px;
    height:36px;
}

#narrowscreenicons {
    padding-right: 24px;
}

.mobonly {
    display:inline-block;
}

.tagremover {
    margin-left:0.5em;
}

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

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

.menu {
    width:1.5em;
    height:1.5em;
    vertical-align:middle;
    cursor:pointer;
    box-sizing:border-box;
    border:6px solid transparent;
}

@media screen and (max-width: 320px) {

    .dropmenu {
        padding-left:16px;
    }

    .indent {
        margin-left:12px;
    }
}

@media screen and (min-width: 321px) and (max-width: 500px) {

    .dropmenu {
        padding-left:24px;
    }

    .indent {
        margin-left:18px;
    }
}

@media screen and (min-width: 501px) {

    .dropmenu {
        padding-left:38px;
    }

    .indent {
        margin-left:24px;
    }
}

.menuspacer {
    width:1.5em;
    height:1.5em;
}

.mh {
    display:block;
    padding:8px;
    margin-top:2px;
    margin-bottom:2px;
    margin-right:1em;
}

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

div.normalmenu {
    width:40px;
}

div.rightmenu {
    top:38px;
    right:0px;
}

.infobarlayout {
    height:70px;
}

.playlistrow2 {
    font-size:80%;
}

.clrbth {
    clear:both;
    display:table;
    margin-top:8px;
}

.scroller {
    -webkit-overflow-scrolling:touch;
    overflow-y:scroll;
    overflow-x:hidden;
}

.progressbar_v {
    height:100%;
    width:2em;
    margin-right:auto;
    margin-left:auto;
}

.infobox {
    float:none;
    clear:both;
    margin-left:auto !important;
    margin-right:auto !important;
    width:90% !important;
}

.infobox_v3 {
    float:none;
    clear:both;
    margin-left:auto !important;
    margin-right:auto !important;
    width:90% !important;
}

.thumb {
    float:none !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.content img {
    max-width: 100% !important;
    height: auto !important;
}

.thumbinner
{
    margin-left:auto;
    margin-right:auto;
}

.info-box-fixed {
    padding-left: 1em;
}

.podicon {
    margin-top:4px;
    margin-bottom:4px;
    margin-left:4px;
    margin-right:16px;
    height:40px;
    width:40px;
    font-size:40px;
    vertical-align:middle;
    box-sizing:border-box;
    border:8px solid transparent;
}

.combo-button {
    box-sizing: border-box;
    border: 4px solid transparent;
}

.backhi {
    padding-left:2px;
    padding-right:2px;
    padding-top:4px;
    padding-bottom:4px;
}

.playlisticon
{
    padding:0px;
    margin-right:4px;
    margin-bottom:2px;
    margin-top:2px;
    vertical-align:middle;
    box-sizing:border-box;
    border:6px solid transparent;
    height: 26px;
    width: 26px;
}

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

.playlisticonr {
    padding:0px;
    margin-left:4px;
    margin-bottom:2px;
    margin-top:2px;
    margin-right:2px;
    vertical-align:middle;
    box-sizing:border-box;
    border:8px solid transparent;
    width:32px;
    height:32px;
}

#sortable .playlisticonr {
    margin-right:4px;
    width: 48px;
}

#collection .playlisticonr {
    margin-right:4px;
    width: 48px;
}

#sortable .track>div>div.clickable {
    margin-right: 8px;
}

#sortable {
    position: relative;
}

.playlistdown {
    margin-right: 12px;
}

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

.rating-icon-big {
    height: 34px;
    width: 140px;
    line-height:1em;
    padding-bottom:4px;
    cursor: pointer;
    vertical-align:middle;
}

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

}

#ratingimage {
    padding-bottom:0px;
}

.trackgroup {
    white-space:normal;
}

.dropdown-button {
    margin-left:-20px !important;
}

.padright {
    padding-right:4px;
}

.whatdoicallthis {
    margin-bottom: 8px;
}

.podhackshit {
    margin-bottom:2em;
}

@media screen and (orientation: landscape) {
    .cshrinker {
        max-height: calc(100vh - 40px);
        width: auto;
    }
}

@media screen and (orientation: portrait) {
    .cshrinker {
        max-width:100%;
        height: auto;
    }
}

#toomanywrappers {
    height: 100%;
    width: 100%;
}

.pleft
{
    box-sizing:border-box;
    padding-left:8px;
}
.pright
{
    box-sizing:border-box;
    padding-right:8px;
}
.mobmenu
{
    position:absolute;
    top:4px;
    left:4px;
    width:95%;
    max-height:95%;
    box-sizing:border-box;
    padding:8px;
    overflow-y:scroll !important;
}

.setupdiv
{
    width:100%;
    box-sizing:border-box;
}

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

.buttonbar {
    height: 42px;
}

.onlyverywide {
    padding-left:8px;
    padding-right:8px;
    box-sizing:border-box;
}

.sptext {
    white-space:nowrap;
    padding-right:4px;
    text-align:right;
    margin-right:24px;
}

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

/*
=====================================================================
= Responsive Layout - General
=====================================================================
*/

@media screen and (max-width: 420px) {
    .notnarrow.snapclienthost {
        display: none;
    }
}

@media screen and (max-width: 640px) {
    .info-detail-layout {
        -webkit-box-orient:vertical;
        flex-direction: column;
    }
    .info-box-expand.stumpy {
        padding-left:0px;
    }
    .info-box-fixed.info-border-right {
        padding-left:0px;
    }
    .info-box-expand.info-border-right {
        margin-bottom:1em;
        padding-bottom:0.5em;
    }
}

@media screen and (min-width: 641px) {
    .cleft.narrowright {
        margin-left:1em;
    }
}

@media screen and (max-width: 540px) {
    .onlywide {
        display:none !important;
    }
}

@media screen and (min-width: 541px) {
    .onlynarrow {
        display:none !important;
    }
}

@media screen and (max-width: 1024px) {
    .onlyverywide {
        display: none;
    }
}

@media screen and (max-width: 540px) {
    .stleft
    {
        float:none;
        width:auto;
        max-width:95%;
        clear:both;
        border-right:none !important;
        border-bottom: 1px solid #dddddd !important;
    }
}

/*
=====================================================================
= Responsive Layout - Portrait, playlist on separate panel
=====================================================================
*/

@media screen and (max-height: 699px) and (orientation: portrait) {

    #playlistm {
        width:100%;
        height:100%;
    }

    .mainpane {
        width: 100%;
        height: 100%;
    }

    #albumcover {
        text-align: center;
        overflow:hidden;
    }

    #albumpicture {
        width: 85%;
        max-width: 60vh;
    }

    #dbtags {
        float: left;
        margin-left:6px;
        margin-right:6px;
    }

    #stars {
        float:left;
    }

}

/* == Tweaks for specific sizes */

@media screen and (max-height: 480px) and (orientation: portrait) {
    /* iPhone 4 screen height */
    #albumpicture {
        max-width:50vh;
    }
}

@media screen and (max-width: 360px) and (max-height: 699px) and (orientation: portrait) {
    #albumpicture {
        width:98%;
    }
}

@media screen and (min-height: 640px) and (max-height: 699px) and (orientation: portrait) {
    #albumpicture {
        width: 98%;
    }
}

/*
=====================================================================
= Responsive Layout - Portrait, playlist on now playing screen
= Changes at 700px high
=====================================================================
*/

@media screen and (min-height: 700px) and (orientation: portrait) {

    .mainpane {
        width: 100%;
        height: 100%;
    }

    #infobar {
        height: 50%;
        width: 100%;
    }

    #toomanywrappers {
        overflow: hidden;
    }

    #playlistm {
        height:50%;
        width:100%;
    }

    .choose_playlist {
/*      This is here so the layoutProcessor knows we're in tall portrait mode
        and it should choose infobar instead */
        font-weight:900;
    }

}

@media screen and (min-height: 700px) and (max-width: 420px) and (orientation: portrait) {
    /* Narrow screens - nowplaying under album picture */
    #albumcover {
        text-align: center;
        overflow:hidden;
    }

    #albumpicture {
        width: 85%;
        max-width: 22vh;
        height: auto;
    }

    #dbtags {
        float: left;
        margin-left:6px;
        margin-right:6px;
    }

    #stars {
        float:left;
    }
}

@media screen and (min-height: 700px) and (min-width: 421px) and (orientation: portrait) {
    /* Wider screens - nowplaying next to album picture */
    #albumcover {
        float: left;
        height:100%;
    }

    #albumpicture {
        height: 100%;
        width: auto;
        margin-right:8px;
    }

    #nowplaying {
        padding-right: 8px;
    }

    #nptext {
        text-align:right;
    }

    #amontobin {
        text-align: right;
    }

    #lastfm, #addtoplaylist, #ptagadd, #subscribe {
        margin-bottom: 4px;
    }

}

/*
=====================================================================
= Responsive Layout - Landscape, playlist on separate panel
= Essentially the same as portrait with min-height 700 and min-width 421
=====================================================================
*/

@media screen and (max-width:639px) and (orientation: landscape) {

    .mainpane {
        width: 100%;
        height: 100%;
    }

    #albumpicture {
        height: 100%;
        width: auto;
        margin-right:8px;
    }

    #playlistm {
        width: 100%;
        height: 100%;
    }

    #albumcover {
        float: left;
        height:100%;
    }

    #nowplaying {
        padding-right: 8px;
    }

    #amontobin {
        text-align: right;
    }

    #lastfm, #addtoplaylist, #ptagadd, #subscribe, #stars {
        margin-bottom: 8px;
    }

    #stars {
        float: right;
    }
}

/*
=====================================================================
= Responsive Layout - Landscape, chooser next to nowplaying
= Switches at 640px wide
=====================================================================
*/

@media screen and (min-width:640px) and (orientation: landscape) {
    .mainpane {
        width: 50%;
        float:left;
        height: 100%;
    }

    #playlistm {
        width: 50%;
        float:left;
        height: 100%;
    }

    #infobar {
        display:block;
    }

    #infopane {
        width:100%;
    }
}

/* 3 Modes for info pane to make best use of available space */

@media screen and (min-width:640px) and (orientation: landscape) {
    /* Standard - info pane looks like small portrait mode */
    #albumcover {
        text-align: center;
        overflow:hidden;
    }

    #albumpicture {
        width: 85%;
        max-width: 40vh;
    }

    #dbtags {
        float: left;
        margin-left:6px;
        margin-right:6px;
    }

    #stars {
        float:left;
    }
}

@media screen and (min-width:810px) and (max-height: 540px) and (orientation: landscape) {
    /* Wider - info pane looks like wide portrait mode up to 540px high*/
    /* ie nowplaying is next to album image - can't have album image very big
        with a screen of this height so there's loads of wasted space to the sides */
    #albumcover {
        float: left;
        height:100%;
    }

    #albumpicture {
        height: 100%;
        width: auto;
        margin-right:8px;
        max-width:60vh;
    }

    #nowplaying {
        padding-right: 8px;
    }

    #nptext {
        text-align:right;
    }

    #amontobin {
        text-align: right;
    }

    #lastfm, #addtoplaylist, #ptagadd, #subscribe {
        margin-bottom: 4px;
    }

    #stars, #dbtags {
        float: none;
    }

}

@media screen and (min-width:640px) and (min-height: 541px) and (orientation: landscape) {
    /* at 540 px high it reverts to being like small portrait mode */
    #albumpicture {
        max-width:60vh
    }
}

@media screen and (min-width:1024px) and (min-height: 768px) and (orientation: landscape) {
    /* Big screens - combination of everything - nowplaying and playlist together, chooser on right hand side */
    #infobar {
        height: 50%;
    }

    #albumcover {
        float: left;
        height:100%;
    }

    #albumpicture {
        height: 100%;
        width: auto;
        margin-right:8px;
    }

    #nowplaying {
        padding-right: 8px;
    }

    #nptext {
        text-align:right;
    }

    #amontobin {
        text-align: right;
    }

    #lastfm, #addtoplaylist, #ptagadd, #subscribe {
        margin-bottom: 4px;
    }

    #stars, #dbtags {
        float: none;
    }

    .choose_playlist {
/*      This is here so the layoutProcessor knows we're in tall portrait mode
        and it should choose infobar instead */
        font-weight:1000;
    }

    #playlistm {
        position: absolute;
        height: calc(50% - 20px);
        top: calc(50% + 20px);
    }

}