head, body {
    margin:0;
    padding:0;
    font-family:open-sans;
    font-weight: 300;
	font-style: normal;
}

body {
    
}

*:focus {
    outline: none;
}

header {
    width: 100%;
    height: 4.0rem;
    background: blue;
    position:fixed;
    top:0;
    z-index:100;
}

header div i {
    font-size: 2.0rem;
}

header div span {
    line-height: 0.1rem;
    vertical-align:middle;
    margin-left:0.2rem;
    
}

header.mobile div span {
    display: none;
}

footer {
    position:fixed;
    bottom:0;
    width:100%;
    height:2.0rem;
    text-align:center;
    z-index:100;
}

div#copyright {
    top: -0.6rem;
    position: relative;
}

.button {
    cursor: pointer;
    position: relative;
    display:inline-block;
    padding: 0.4rem 1.1rem 0.4rem 1.0rem;
    margin:0.2rem;
    
    -webkit-transition: background-color 500ms;
    -moz-transition: background-color 500ms;
    -o-transition: background-color 500ms;
    transition: background-color 500ms;
}

div.transport_controls {
	position:relative;
	top:0.7rem;
	text-align: center;
}

div.transport_controls ul {
	list-style: none;
	display:inline-block;
	text-decoration: none;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

div.transport_controls ul li {
	display:inline-block;
	padding-left:0.5rem;		/*Transport button spacing*/
	
}

div.transport_controls ul li.show-menu {
	position: absolute;
	left: 0;
}

header#universal-player.mobile div#menu.button span{
	display: none;
}

div#menu.button {
	display:inline-block;
}

.view-main-content div div {
    margin:0.5rem;
    overflow:hidden;
    position: relative;
    display:inline-block;
    cursor: pointer;
    vertical-align: top;
    -webkit-transition: background-color 500ms;
    -moz-transition: background-color 500ms;
    -o-transition: background-color 500ms;
    transition: background-color 500ms;
}

div.view-main-content ul.playlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display:block;
	background: hsla(0,0%,78%,1);
	color: hsla(0,0%,28%,1);
	
}

div.view-main-content ul.playlist li {
	height: 3.0rem;
	font-size:1.5rem;
	font-weight: bold;
	position:relative;
}

div.view-main-content ul.playlist li:nth-child(even) {
	background: hsla(0,0%,86%,1);
} 

div.view-main-content ul.playlist li span.time {
	position:absolute;
	display: block;
	right: 1.0rem;
	top:0.5rem;
}

div.view-main-content ul.playlist li span.name {
	position:absolute;
	display: block;
	left: 1.0rem;
	top:0.5rem;
}

div.view-main-content ul.playlist li span.pbind {
	position:absolute;
	display: block;
	left: 0.0rem;
	top:0.0rem;
	/*width: 50%;*/
	height: 3.0rem;
	background: hsla(206, 69%, 44%, 1);
	opacity: 0.5;
}









































/*
================================================================================
============== MAIN MENU STUFF============== 
================================================================================
*/

.main_menu {
    display: none;
    align-self: center;
    z-index: 999;
}

.main_menu.desktop {
    width: 37.0rem;
    height: auto;
    margin: 0 auto;
    /*max-height: 30.0rem;*/
    overflow:hidden;
}

.main_menu.tablet {
    position:absolute;
    left:1.0rem;
    right:1.0rem;
    bottom:1.0rem;
    top:1.0rem;
}

.main_menu.mobile {
    position:absolute;
    left:0.0rem;
    right:0.0rem;
    bottom:0.0rem;
    top:0.0rem;
}



/*.main_menu .windows-header {*/
.windows-header {
    font-weight: bold;
    height: 3.0rem;
    line-height: 3.0rem;
    vertical-align: middle;
    padding-left: 0.5rem;
    display: block;
    right: 0;
    position: relative;
    /* width: auto; */
    left: 0;
}

/*.main_menu .windows-header .title {*/
.windows-header .title {
    /*line-height:3.0rem;*/
    vertical-align: top;
    
}

/*.main_menu .windows-header .title-icon {*/
.windows-header .title-icon {
    font-size: 1.5rem;
    font-weight: bold;
    height:34px;
    width:34px;
    display:inline-block;
}

.main_menu .windows-header .title-icon .search-icon {
    width: 2.1rem;
    height: 2.0rem;
    margin-top:0.45rem;
    
    display: block;
    -webkit-mask-image: url('../img/common/icon-search_dark.svg');
    mask-image: url('../img/common/icon-search_dark.svg');
}

/*.main_menu .windows-header .close {*/
.windows-header .close {
    position:absolute;
    right:1.5rem;
    cursor:pointer;
    
}

.main_menu .content {
    position:relative;
    top:0px;
    overflow-y:auto;
    height:100%;
    
    /*display: table;*/
}

.main_menu.mobile .content ul {
    list-style-type: none;
    width:100%;
    padding:0;
    top:-15px;
    position:relative;
    text-align:left;
}

.main_menu .content ul {
    list-style-type: none;
    padding:0;
    text-align:center;
}

.main_menu.mobile .content ul li {
    height:3.0rem;
    float:none;
    width:100%;
    padding:0;
    margin:0;
    display:block;
}

.main_menu .content ul li {
    /*float:left;*/
    width: 90px;
    height: 120px;
    margin: 10px;
    position: relative;
    cursor: pointer;
    display:inline-block;
    
    vertical-align: top;
    
    -webkit-transition: background-color 500ms;
    -moz-transition: background-color 500ms;
    -o-transition: background-color 500ms;
    transition: background-color 500ms;
}

.main_menu.mobile .content ul li div i {
    font-size: 2.0rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top:0.7rem;
    line-height:3.0rem;
    vertical-align: middle;
    width:auto;
    display:inline;
}

.main_menu .content ul li div i {
    font-size: 3.0rem;
    padding:0;
    padding-top:0.5rem;
    line-height:3.5rem;
    vertical-align: middle;
    width:100%;
    text-align: center;
    display:block;
}

.main_menu.mobile .content ul li div span {
    line-height:3.0rem;
    vertical-align: middle;
    display:inline;
    width: auto;
}

.main_menu .content ul li div span {
    overflow:hidden;
    height:48px;
    
    vertical-align: middle;
    display:table-cell;
    text-align: center;
    width: 90px;
    
}

.close {
    -webkit-transition: color 500ms;
    -moz-transition: color 500ms;
    -o-transition: color 500ms;
    transition: color 500ms;
}

.spacer {
    width:100%;
    height:15px;
    position:relative;
}



#view-main-content .view-main-content-header-spacer {
    width: 100%;
    height: 4.0rem;
    display: block;
}














.detailed-view-background {
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1000;
    opacity:0;
    background-color:rgba(200,200,200,0.7);
    
    /*vertical-align:middle;
    text-align: center;*/
    display: none;
    
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}

div.sub-window-background {
   
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1000;
    opacity:0;
    /*vertical-align:middle;
    text-align: center;*/
    display: none;
    
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}