@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu-L.woff') format('woff');
}

* {
    padding: 0;
    margin: 0;
    font-family: Ubuntu, sans-serif;
    font-weight: lighter;
    outline: none;
}

html {
    height: 100%;
}

body {
    color: #fff;
    height: 100%;
	overflow: hidden;
}

a {
    text-decoration: none;
    color: #fff;
}

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

#main section {
    display: none;
    position: absolute;
	left: 0;
	right: 0;
	width: 100%;
}

#main section#index {
    display: block;
}

#main section header.line span {
    display: inline-block;
    width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

#main section .line {
    display: block;
    width: 100%;
    height: 10%;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
}

#main section .line span {
    margin-left: 5%;
}

#main section .line .text {
    line-height: normal;
    padding: 5% 10%;
}

#main section .line .text.credits a {
    color: #fff;
}

#main section .line .text .center a {
    display: inline-block;
    margin: 0 5%;
}

#main section .line .text .center .link-site, #main section .line .text .center .link-site a {
    margin:0;    
}

#main section .line .text .cmd {
    padding: 1%;
}

#main section#credits .line span span {
    font-size: 0.7em;
}

#main section .line .w14 {
    display: inline-block;
    width: 14.1%;
    height: 100%;
    text-align: center;
}

#main section .line .w20 {
    width: 20%;
    height: 100%;
    text-align: center;
}

#main section .line .w25 {
    width: 25%;
    height: 100%;
    text-align: center;
}

#main section .line .w33 {
    display: inline-block;
    width: 33%;
    height: 100%;
    text-align: center;
}

#main section .line .w50 {
    display: inline-block;
    width: 50%;
    height: 100%;
    text-align: center;
}

#main section .line .w60 {
    display: inline-block;
    width: 60%;
    height: 100%;
}

#main section .h60, #main section .h70, #main section .h90 {
    overflow-y: scroll;
}

/* Music / Video _____________________________________________________________*/

#main section .line .playlists {
    background: url("../img/icons/playlists.png") no-repeat center;
    background-size: auto 40%;
}

#main section .line .slider {
    margin: 0 auto;
    position: relative;
}

#main section .line .slider .ui-slider {
    margin: -1.505em auto 0 auto;
    border-radius: 100px;
    border: none;
}

#main section .line .slider .ui-slider-range {
    background: #fff;
    border-radius: 100px;
}

#main section .line .slider .ui-slider-handle {
    width: 1.1em;
    height: 1.1em;
    border-radius: 100px;
    border: 3px solid #fff;
}

#main section .line .play-slideshow {
    background: url("../img/icons/play-slideshow.png") no-repeat center;
    background-size: auto 50%;
}

#main section .line .exit-slideshow {
    background: url("../img/icons/exit-slideshow.png") no-repeat center;
    background-size: auto 50%;
}

/* Playlists _________________________________________________________________*/

/*#main section .h60 .line span, #main section #now-playing span {
    display: block;
}

#main section #now-playing span {
    line-height: normal;
}

#main section .h60 .line span span, #main section #now-playing span span {
    margin: 0;
}*/

/* Add Server ________________________________________________________________*/

#main section .line .fields {
    margin: 0 auto;
    overflow: hidden;
}

#main section .line .fields input, #main section .line .fields select {
    display: inline-block;
    padding: 0 5%;
    border: none;
    border-radius: 5px;
    background: #fff;
    float: left;
}

#main section .line .fields select {
    color:#999;
}

/* Touchpad __________________________________________________________________*/

#main section #canvas {
    background: url("../img/layout/touch.png") no-repeat center;
    background-size: auto 50%;
}

#main .keyboard-input {
    width: 100%;
    height: 100%;
    text-align: center;
    border: none;
}

#main section .line .left-click {
    background: url("../img/icons/left-click.png") no-repeat center;
    background-size: auto 50%;
}

#main section .line .right-click {
    background: url("../img/icons/right-click.png") no-repeat center;
    background-size: auto 50%;
}

#main section .keyboard-input {
    opacity: 0;
    position: absolute;
    bottom: 0;
    z-index: -100;
    width: 0px;
    height: 0px;
}

/* Resets ____________________________________________________________________*/

.left {
    float: left;
}

.right {
    float: right;
}

.center {
    text-align: center;
}

.fa {
    vertical-align:middle;
}

.small {
    font-size: 0.9rem;
}

/* Custom commands ___________________________________________________________*/
#main section#custom-commands .line a.link-custom-command {
    width: 70%;
    padding-left: 5%;
}

/* Scroll box ________________________________________________________________*/
.scroll {
    overflow-y: scroll;
    overflow-x: hidden;
}
