*{padding:0;margin:0;border:none;outline-style:none;outline-width:0;box-sizing:border-box;}
:focus{outline:none}
a { color:#fff;text-decoration:none; }
@font-face {
font-family: RobotoCondensed;
src: url(RobotoCondensed-Regular.ttf);
}
body {
font-family: "RobotoCondensed", Helvetica, Arial, sans-serif;
text-transform: uppercase;
cursor: default;
font-size: 75%;
color:#fff;
background-color: #121212;
letter-spacing: 0.1em;
}
#theme-light {
color: #000;
background-color: #fff;
}
#theme-light nav li.selected a, #theme-light nav li a:hover, #theme-light nav li label:hover {
color: #000;
border-bottom: 2px solid #000;
}
#theme-light input[type="text"], #theme-light input[type="password"], #theme-light input[type="submit"] {
border: 1px solid #000;
color: #000;
}
#theme-light ul.actions li a {
color:#000;
}
#theme-light ul.actions li.active, #theme-light ul.actions li:hover {
background: rgba(0,0,0,.2);
}
#theme-light .album-cover img {
box-shadow: 0 0 0 1px black;
}
#theme-light #search {
background: url("/img/icons/search-light.svg") no-repeat 3px 3px;
}
#page-container{
width: 100%;
position: relative;
}
h1, h2, h3 {
font-weight: normal;
line-height: 1;
float:left;
}
h1 {
margin:20px;
font-size: 1.3em;
}
h2 {
margin-bottom: 20px;
font-size: 1.3em;
width:100%;
}
h3 {
margin: 5px 0;
font-size: 1em;
float: left;
clear: both;
}
p {
font-size: 1em;
margin:0 0 13px;
}
ul {
list-style-type:none;
}
nav {
float:left;
width: 100%;
}
#nav-main {
border-bottom: 1px solid rgba(255,255,255,.1);
}
#theme-light #nav-main {
border-bottom: 1px solid rgba(0,0,0,.1);
}
nav ul {
list-style-type: none;
float:left;
}
nav li {
margin-left: 18px;
float: left;
}
nav li a, nav li label {
display:block;
color: #999;
padding: 20px 0;
}
nav li.selected a, nav li a:hover, nav li label:hover {
color: #fff;
border-bottom: 2px solid #fff;
}
nav li label {
cursor:pointer;
}
nav li input[type=file] {
display:none;
}
nav li form {
margin:0;
}
#page {
width: 100%;
margin-bottom: 100px;
padding:20px;
float:left;
}
#page button {
-webkit-appearance: none;
-webkit-user-select: none;
background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
border: 1px solid rgba(0, 0, 0, 0.25);
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
color: #444;
font: inherit;
margin: 0 1px 0 0;
text-shadow: 0 1px 0 rgb(240, 240, 240);
-webkit-padding-end: 10px;
-webkit-padding-start: 10px;
min-height: 2em;
min-width: 4em;
}
#page button:hover {
background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
border-color: rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95);
color: black;
}
#page button:active {
background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
box-shadow: none;
text-shadow: none;
}
input[type=text], input[type=password], input[type=submit] {
width:300px;
height: 2em;
border:1px solid #fff;
background:transparent;
color:#fff;
padding: 0 5px;
margin:0 0 13px;
font-family: RobotoCondensed;
letter-spacing: 0.1em;
font-size: 100%;
}
input[type=submit] {
width: auto;
padding: 0 10px;
cursor: pointer;
}
input[type=radio] {
margin: 0 10px 10px 0;
}
.btn-albums-red {
display:none;
margin-bottom:0 !important;
border-color: red !important;
color: red !important;
}
.btn-albums-red:hover {
background-color:red;
color: black !important;
}
input[type=checkbox] {
margin: 0 10px 10px 0;
}
.album-select {
display:none;
margin:5px !important;
position:absolute;
top: 0;
left: 0;
}
.album-cover:hover .album-select, .album-select:checked {
display:block;
}
#search {
width:170px;
height: 27px;
background: url("/img/icons/search.svg") no-repeat 3px 3px;
padding-left:30px;
border-radius:0;
margin-top: 14px;
opacity: .6;
}
#search:hover, #search:focus {
opacity:1;
}
input, button, textarea, p, .form-group {
float:left;
clear:both;
}
.album-cover {
float:left;
margin:15px 15px 5px 0;
width: 200px;
line-height:1;
position:relative;
}
.album-cover a {
margin-bottom: 5px;
float:left;
font-size: 90%;
line-height: 130%;
}
.album-cover img {
display: block;
width: 200px;
height: 200px;
box-shadow: 0 0 0 1px white;
}
.album-playing img {
box-shadow: 0 0 0 4px red;
}
.paging {
margin:10px 0;
float:left;
width:100%;
}
.paging a, .paging span {
display:block;
float:left;
margin-right:10px;
padding: 5px 0;
text-decoration: none;
min-width: 25px;
text-align: center;
}
.paging a {
border:1px solid #fff;
}
.paging a.active {
background:#fff;
color:#000;
}
form {
margin-top: 10px;
float: left;
clear: both;
}
table {
border-spacing: .5em;
width: 100%;
text-align: left;
}
#player {
position:fixed;
width:275px;
height:100px;
top:550px;
right: 100px;
}
#webamp {
position:fixed !important;
user-select: none;
}
ul.actions li.active, ul.actions li:hover {
background: rgba(255,255,255,.2);
}
ul.albums, ul.actions {
max-width: 1310px;
min-height: 40px;
width: 100%;
}
ul.actions {
float: left;
}
ul.albums li, ul.actions li {
display:inline-block;
vertical-align: top;
}
ul.actions li {
margin: 0 5px 10px 0;
}
ul.actions li a {
padding: 5px 10px;
display: block;
font-size: 90%;
}
.track-comment {
color: #999;
margin-left:5px;
}
p a.active {
color:#09B1FA;
}
@media screen
  and (max-device-width: 480px)
  and (orientation: portrait){
    ul.actions, #search {
    	display: none !important;
    }
    .album-cover {
    	width:100px;
		margin: 15px 5px 5px 0;
    }
    .album-cover img {
    	width: 100px;
    	height: 100px;
    }
}