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

input[type=text],input[type="number"] {
	height: 2em;
}

#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
=====================================================================
*/

button.iconbutton {
	height: 2em;
	width: 2em;
}

button.spinable.icon-spin6 {
	height: 2em;
	width: 2em;
	background-color: transparent !important;
}

.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:8px;
	margin-bottom:2px;
	margin-top:2px;
	vertical-align:middle;
	width:16px;
	height:16px;
}

.submenuspacer {
	/*This needs to be the same width as collectionicon*/
	margin-left:24px;
}

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

.clicktrackmenu {
	margin-left: 8px;
}

.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;
}

.padleft {
	padding-left: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.normalmenu.albumbitsmenu {
	max-width: 300px;
}

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

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

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

/*
=====================================================================
= 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;
	}
}