*{
        moz-user-select: -moz-none;
        -moz-user-select: none;
        -o-user-select:none;
        -khtml-user-select:none;
        -webkit-user-select:none;
        -ms-user-select:none;
        user-select:none;
    }
    
    body{
        font-family:"Segoe UI";
    }

    #header{ 
        position: relative;    
        height: 3em;
        margin: auto;
        
        /*min-width: 1280px;*/
    }

    #header > img{
        position: absolute;
        height: 1.5em;
        left: 1.5em;
        top: 0.8em;   
        width: 8em;
    }

    #header > button{
        position: absolute;
        height: 1.2em;
        right: 1.2em;
        top: 0.8em;  
        width: 3.5em;
        color: white;
        background: none;
        border: none;
        font-size: 1.2em;
    }
    
    #header > button:hover{
        background-color: #008996;
    }
    
    #main{ 
        position: relative;  
        margin: auto;
        
        /*min-width: 1280px;*/
        /*min-height: 700px;*/
    } 

    #left_panel{
        position: absolute;  
        width: 20%;
        height: 100%;
    }
    
    #left_panel > div{
        position: absolute;  
        left: 2%;
        width: 97%;
    }
    
    #playlist_panel{
        top: 1%;
        height: 60%; 
        background-color: #565656;            
    }
    
    #playlist_panel > .header{
        width: 100%;
        height: 6%;
    }
 
    #playlist_panel > .header > button{
        float: left;
        width: 50%;
        height: 100%;
        font-size: 90%;
        color: #999999;
        background-color: #333333;
        line-height: 150%;
        border: none;
        text-align: left;
        vertical-align: middle;
        overflow: hidden;
    }

    #playlist_panel > .header > button.active{
        color: #D2D2D2;
        background-color: #565656;   
    }
    
    #triangle{
        position:relative; 
        display:block; 
        height:0%; 
        width:0%; 
        left:60%;
        border:1em solid #000000; 
        border-color:transparent black transparent transparent; 
        border-style:dashed solid dashed dashed; 
        opacity:0.8;
        z-index:3;
    }
    
    #description{
        position:relative; 
        display:block; 
        height:auto; 
        min-height:30%;
        width:120%; 
        /*top:-15%;*/
        border:0.2em solid #007883; 
        background-color: black;
        color: white;
        font-size:0.8em;
        text-align:left;
        opacity:0.8;
        z-index:2;
        word-wrap: break-word; 
        word-break: auto;
    }
    
    #playlist_panel > .content{
        position: absolute;
        width: 97%;
        height: 86%;
        background-color: #4B4B4B;
        margin: 1.5%;
        overflow-x: hidden;
        list-style: none;  
        padding: 0;
    }
    
    #playlist_panel > .content.active{
        z-index: 1;
    }
    
    #playlist > li {
        position: relative;
        display: inline-block;
        width: 500%;
        height: 8%;  
        background: none;
        border: none;
        vertical-align: middle;
        text-align: left;
        color: #EEEEEE; 
    }

    #playlist > li > img{
        position: relative;
        float: left;
        height: 100%;
        width: auto;
        line-height: 100%;
        visibility: hidden;
        vertical-align: middle;
    }
    
    #playlist > li > img.selected{
        visibility: visible;
    }
    
    #playlist > li > img.shown{
        visibility: visible;
    }
    
    #playlist > li > button{
        position: relative;
        display: inline-block;
        float: left;
        width: 60%;
        height: 100%;  
        background: none;
        border: none;
        vertical-align: middle;
        text-align: left;
        color: #EEEEEE; 
    }
    
    /*
    #playlist_panel > .content > div > button:hover{
        background-color: #008996;
    } 
    */    
    
    #playlist_panel > .control{
        position: absolute;
        top: 94%;
        width: 98%;
        height: 5%;
        
    }
    
    #playlist_panel > .control.active{
        z-index: 1;
    }
    
    #playlist_panel > .control > button{
        position: absolute;
        width: 99%;
        height: 100%;
        margin-left: 1.5%;
        font-size: 0.8em;
        color: #EEEEEE;
        border: none;
        vertical-align: middle;
        overflow: hidden;
        line-height: 150%;
    }
    
    /*
    #playlist_panel > .control > button:hover{
        background-color: #008996;
    }
    */
    
    #console_panel{
        top: 62%;
        height: 37%;   
        background-color: #565656;
    }
    
    #console_tab{
        position: absolute;
        width: 96%;
        height: 6%;
        margin: 2%;
        color: #D2D2D2;
        font-size: 1em;
    }
    
    #console_log{
        position: absolute;
        top: 10%;
        width: 96%;
        height: 86%;
        margin: 2%;
        background-color: #4B4B4B;
        overflow: auto;
    }
      
    #console_log  > span{
        float: top;
        width: 100%;
        height: auto;
        font-size: 1em;
        color: #EEEEEE;
        line-height: 1.2em;
        
        word-wrap: break-word; 
        word-break: auto;
    }
    
    #console_log  > span .txt{
        color: #EEEEEE;
    }
    
    #console_log  > span .txt.error{
        color: red;
    }
    
    #right_panel{
        position: absolute;  
        left: 20%;
        width: 80%;
        height: 100%;
    }
    
    #right_panel > div{
        position: absolute;
        left: 0.5%;
        width: 99%;
        background-color: #565656;
    }
    
    #playback_panel{
        top: 1%;
        height: 80%;
    }
    
    #playback_panel > div{
        position: absolute;
        width: 100%;
        height: 100%;
        display: none;
    } 
    
    #playback_panel > div.active{
        display: block;
    }
    
    #playback_panel > div.cover{
        background: url("background.jpg") no-repeat;
        background-size: 100% 100%;
    }
    
    #playback_panel > div.playback{
        background-color: black;
    }
    
    #playback_panel > div.info{
        color: #EEEEEE;
        opacity: 0.7;
        background-color: black;
        
        word-wrap: break-word; 
        word-break: auto;
    }
    
    #url_div{
        position: absolute;
        left: 0.1%;
        width: 100%;
        height: auto;
        opacity: 0.7;
        visibility: hidden;
        background-color: black;
        color: white;
        word-wrap: break-word; 
        word-break: break-all;
        overflow: hidden;
    }
    
    #url_div.active{
        visibility: visible;
    }
    
    #control_panel{
        top: 82%;
        height: 17%;
    }
    
    #control_panel > img{
        position: relative;
        float: left;
        top: 30%;
        width: 6%;
        height: 40%;
        background-size: 100% 100%;
        border: solid 0.2em #565656;
    }
    
    #info_btn{
        left: 12%;
        background-image: url("info_button.jpg");
    }
    
    #info_btn:hover{
        background-image: url("focus/info_button.jpg");
        border-color: white;
    }
    
    #pre_btn{
        left: 17%;
        background-image: url("previous_button.jpg");
    }
    
    #pre_btn:hover{
        background-image: url("focus/previous_button.jpg");
        border-color: white;
    }
    
    #frw_btn{
        left: 19%;
        background-image: url("fast_rewind_button.jpg");
    }
    
    #frw_btn:hover{
        background-image: url("focus/fast_rewind_button.jpg");
        border-color: white;
    }
    
    #play_btn{
        left: 21%;
        background-image: url("play_button.jpg");
    }
    
    #play_btn:hover{
        background-image: url("focus/play_button.jpg");
        border-color: white;
    }
    
    #pause_btn{
        left: 23%;
        background-image: url("pause_button.jpg");
    }
    
    #pause_btn:hover{
        background-image: url("focus/pause_button.jpg");
        border-color: white;
    }
    
    #stop_btn{
        left: 25%;
        background-image: url("stop_button.jpg");
    }
    
    #stop_btn:hover{
        background-image: url("focus/stop_button.jpg");
        border-color: white;
    }
    
    #ffw_btn{
        left: 27%;
        background-image: url("fast_forward_button.jpg");
    }
    
    #ffw_btn:hover{
        background-image: url("focus/fast_forward_button.jpg");
        border-color: white;
    }

    #next_btn{
        left: 29%;
        background-image: url("next_button.jpg");
    }
    
    #next_btn:hover{
        background-image: url("focus/next_button.jpg");
        border-color: white;
    }

    #fullscreen_btn{
        left: 34%;
        background-image: url("fullscreen_button.jpg");
    }
/*    
    #fullscreen_btn:hover{
        background-image: url("focus/fullscreen_button.jpg");
        border-color: white;
    }
*/   
    #menu{
        position: absolute;
        left: 0em;
        top: 0em;
        z-index: 10;
        display: none;
        
        min-width: 1280px;
        min-height: 700px;
    }
    
    #menu.active{
        display: block;
    }
    
    #menu_panel{
        position: absolute;
        left: 35%;
        width: 30%;
        top: 35%;
        height: 20%;
        background-color: black;
        border-top: solid 0.2em white;
        border-left: solid 0.2em white;
        border-right: solid 0.2em white;
        border-bottom: solid 0.4em white;
        display: none;
    }
    
    #menu_panel.active{
        display: block;
    }
    
    #menu_panel > button{
        float: top;
        text-align: left;
        width: 100%;
        height: 32.5%;
        background-color: #4B4B4B;
        border: none;
        margin-top: 0.1em;
        font-size: 1.5em;
        color: white;
    }
    
    #menu_panel > button:hover{
        background-color: #008996;
    }
    
    #about_panel, #input_panel {
        position: absolute;
        left: 25%;
        width: 50%;
        top: 25%;
        height: 50%;
        background-color: none;
        border: solid 0.4em white;
        display: none;
        min-width: 640px;
        min-height: 350px;
    }
    
    #about_panel.active{
        display: block;
    }
    
    #about_panel > span{
        float: top;
        width: 100%;
        height: auto;
        color: white;
    }
    
    #about_panel > span.header{
        font-size: 2em;
    }
    
    #about_panel > span.info{
        font-size: 1.2em;
    }
    
    #input_panel.active{
        display: block;
    }
    
    #input_panel > span{
        position: absolute;
        left: 10%;
        top: 15%;
        width: 100%;
        height: auto;
        color: white;
        font-size: 2em;
    }
    
    #input_panel > textarea{
        position: absolute;
        left: 10%;
        top: 40%;
        width: 80%;
        height: auto;
        font-size: 1.5em;
        resize: none;
        word-wrap: break-word; 
        word-break: auto;
    }
    
    #input_panel > button{
        position: relative;
        float: left;
        left: 25%;
        top: 60%;
        width: 20%;
        height: 7%;
        font-size: 1em;
        margin-right: 10%;
        color: white; 
        background-color: #4B4B4B;
        overflow: hidden;
        border: none;
    }
    
    #input_panel > button:hover{
        background-color: #008996;
    }
    
    #audiocomponent > hr{
        position: relative; 
        border:none;
        border-top: 0.4em solid #565656;
    }
    
    #audiocomponent  > li{
        position: relative;
        display: block;
        width: 100%;
        background: none;
        border: none;
        vertical-align: middle;
        color: #EEEEEE; 
    }
    
    #audiocomponent  > li > span{
        position: relative;
        display: block;
        text-align: center;
        font-weight: bold;
        font-size: 1.2em;
        padding-bottom: 0.5em;
    }
    
    #audiocomponent  > li > ul{
        list-style: none;
        padding-left: 1em;
    }
    
    #audiocomponent  > li > ul > li{
        position: relative;
        display: block;
        width: 100%;
        background: none;
        border: none;
        vertical-align: middle;
        color: #EEEEEE;
        overflow: hidden;
    }
    
    #audiocomponent  > li > ul > li > span{
        font-size: 1.1em;
    }
    
    #audiocomponent  > li > ul > li > span.disabled{
        color: #111111;
    }
    
    #audiocomponent  > li > ul > li > input.hidden{
        /*visibility: hidden;*/
        display: none;
    }

    #audiocomponent  > li > ul > li > ul{
        list-style: none;
        padding-left: 2em;
        display: none;
    }
    
    #audiocomponent  > li > ul > li > ul.active{
        display: block;
    }
    
    #audiocomponent  > li > ul > li > ul > li > span{
        font-size: 0.9em;
    }