/* Import the dock
--------------------------------*/
@import url(dock.css);

/* General
--------------------------------*/
body { font-family: Arial, sans-serif; margin: 0; padding: 0; overflow: hidden; background-color: white;}

.clearfix { display: inline-table; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

#home, #config, #video, #tilesMenu { display: none; } /* These four divs are hidden on start */
#video { background: url(tv:); }
.with-padding { padding: 2% 8%; } /* modify the margin to match the display */
.maximize { overflow: hidden; position: relative; width: 100%; height: 100%; }
#tv { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1; }
select { -webkit-appearance: menulist-button; } /* Workaround for webkit display issue that the longest option isn't displayed properly. (e.g. 1080p24 is show as 10...24 in the dropdown box) */

/* For loading div
--------------------------------*/
#loading { background-color: #000; width: 100%; height: 100%; }
#loading span { position: absolute; top: 45%; left: 20%; font: bold 2em; color: #ddd; }

/* For header banner
--------------------------------*/
div.banner { height: 65px; background: black; }
div.banner .tagline { float: right; margin: 25px; width: 186px; height: 22px; }
div.banner .logo { float: left; margin: 7px 0 0 25px; background-image: url('../images/amino-logo.png'); width: 181px; height: 51px; }


/* For home div
--------------------------------*/
#home div.home-div div.welcome-text { float: right; width: 60%; padding: 5% 0; text-align: center; font: bold 1.5em; }
#home div.home-div div.stbImage { float: right; margin: 0%; }
#home div.home-div div.stbImage > img { width: 100%; } 
#home div.home-div .home-menu { float: left; }
#home div.home-div ul { list-style-type: none; }
#home div.home-div ul li { width: 220px; }
#home div.home-div ul li a:focus { outline: none; }

/* For tilesMenu div
--------------------------------*/
#tilesMenu { background: #000; background: -moz-linear-gradient(top, #000 0%, #0754AE 28%, #0074DE 32%, #00CBFD 40%, #00CBFD 60%, #0074DE 68%, #0754AE 72%, #000 100%); background: -webkit-linear-gradient(top, #000000 0%,#0754ae 28%,#0074de 32%,#00cbfd 40%,#00cbfd 60%,#0074de 68%,#0754ae 72%,#000000 100%); background: linear-gradient(to bottom, #000 0%,#0754AE 28%,#0074DE 32%,#00CBFD 40%,#00CBFD 60%,#0074DE 68%,#0754AE 72%,#000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#000000", endColorstr="#000000",GradientType=0 ); width: 100%; height: 100%; }
#tilesMenu .aminoLogo { position: absolute; top: 100px; left: 80px; }
#tilesMenu .customerLogo { position: absolute; top: 100px; right: 95px; max-width: 120px; }
#tilesMenu div.tvScreen { background: url(tv:); position: absolute; top: 202px; left: 80px; width: 560px; height: 315px; -webkit-background-composite: clear; }
#tilesMenu div.chDescription { color: #ffffff; font-size: 22px; position: absolute; top: 530px; left: 80px; width: 550px; padding: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 1.3em; max-height: 86px; }
#tilesMenu ul.chMenu { position: absolute; top: 200px; left: 660px; width: 540px; height: 432px; overflow: hidden; list-style-type: none; border: 0 !important; padding: 0; margin-top: 2px; background: transparent !important; }
#tilesMenu ul.chMenu li.chMenuButtons { display: inline-block; margin-right: 8px; margin-bottom: 8px; width: 164px; font-size: 24px; height: 94px; background: #000000; text-align: center; vertical-align: middle; border: 3px solid #000000; }
#tilesMenu ul.chMenu li.chMenuButtons.active { border: 3px solid #ff0000; }
#tilesMenu ul.chMenu li.chMenuButtons a { color: #efefef; line-height: 4; padding: 0px; height: 94px; }
#tilesMenu ul.chMenu li.chMenuButtons a:focus { outline: none; }
#tilesMenu ul.chMenu li.chMenuButtons a div { width: 100%; height: 100%; position: relative; background-size: cover; background-position: center center; background-repeat: no-repeat; }

/* For config div
--------------------------------*/
#config select:hover, #config input[type="text"]:hover { border: 1px solid blue;}
#config div.config { display: none; }
#config div.config li { height: 24px; }
#config div.config div { margin: 5px; }
#config div.config .section-box, #config div.config table { border: 1px solid; }
#config div.config div.list {
    border: 1px solid;
    margin: 0px;
}
#config div.config .section-title { font-weight: bold; text-decoration: underline; margin-left: 5px; margin-right: 5px; }
#config div.config .more-section { border-left: 1px solid; }
#config div.config .hls-client-asset-name { display: inline-block; min-width: 250px; }
#config div.config table th { text-align: left; padding-left: .5em; }
#config input { margin: 5px; }
#config p.desc { font-size: .8em; }
#config p.caution { color: red; font-weight: bold; }
#config-tabs {
    display: inline-table;
    padding: 0px;
}
#config-tabs input { margin: 1px; }

#config #config-dtv > .list > div{
    margin: 0px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#config-dtv > .list > div:nth-child(even) {background: #EEE}
#config-dtv > .list > div:nth-child(odd) {background: #FFF}
#dialog-dtv-config .fieldTitle{
    text-align: right;
    display: inline-block;
    width: 135px;
    padding-right: 10px;
}
#dialog-dtv-config input{
    width: 350px;
}

/* For video div
--------------------------------*/
/* tabular form */
#info { display: none; width: 100%; background: transparent url(../images/bg.png) repeat; color: gray; overflow: hidden; box-sizing: border-box; list-style: none; }
#info.mini { background: none; text-shadow: 1px 0px black; }
#info li { width: 35%; height: 1.6em; float: left; }
#info.mini li { float: none;}
#info .row-1 { height: 1.8em; font-size: 1.4em; color: #CCC; }
#info .text-addr { width: 70%; }
#info .text-name { width: 20%; }
#info .text-channel { width: 10%; text-align: right; }
#info .text-currentTime { width: 90%; color: #5c81bb; }
#info .text-type { width: 10%; text-align: right; }
#info .text-level { width: 30%; }

#input_digit {display: none; text-align: right; color: #CCC; font-size: 1.2em; padding: 2% 8% 0 0; }

#progress { display: none; width: 100%; background: transparent url(../images/bg.png) repeat; color: white; }
#progress { position: absolute; bottom: 0; font: bold 1.2em; }

#web { width: 0px; height: 0px; visibility: hidden; }

/*
 * jQuery UI Dialog 1.8.14
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Dialog#theming
 */
.ui-dialog {
    font: 90%;
}
.ui-dialog button.ui-state-default {
    color: #007dba;
}
.ui-dialog button.ui-state-focus {
    color: white;
}

#config-hdmi table td,
#config-scart table td{
	padding: 0px 6px;
}
table.conax-menu-list {
    float: none;
}
table.conax-token-credit {
	border-width: 1px;
	border-spacing: 3px;
	border-style: outset;
	border-color: black;
	border-collapse: collapse;
	background-color: white;
}
table.conax-token-credit th {
	border-width: 1px;
	padding: 3px;
	border-style: solid;
	border-color: gray;
	background-color: white;
	-moz-border-radius: ;
}
table.conax-token-credit td {
	border-width: 1px;
	padding: 3px;
	border-style: solid;
	border-color: gray;
	background-color: white;
	-moz-border-radius: ;
}

table.conax-token-debit {
	border-width: 1px;
	border-spacing: 3px;
	border-style: outset;
	border-color: black;
	border-collapse: collapse;
	background-color: white;
}

table.conax-token-debit th {
	border-width: 1px;
	padding: 3px;
	border-style: solid;
	border-color: gray;
	background-color: white;
	-moz-border-radius: ;
}

table.conax-token-debit td {
	border-width: 1px;
	padding: 3px;
	border-style: solid;
	border-color: gray;
	background-color: white;
	-moz-border-radius: ;
}



/* config tab horizontal scrolling */
#config-tabs{
    height: 44px; /* 37px + 5px + 2px */
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    display: block;
    white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li{
    display: inline-block;
    float: none;
}
::-webkit-scrollbar {
    width: 0px;
    height: 5px;
}
::-webkit-scrollbar-thumb {
    background: #fff; 
}

#config-tabs .ui-state-default a {
    color: #007dba;
}
#config-tabs .ui-state-active a,
#config-tabs .ui-state-focus a {
    color: #fff;
}
#config-tabs li a {
    outline: none;
}
.fullWidth {
    width: 100%;
}
.fullWidth > button{
    width: 20%;
}

#guideCanvas{
    position: absolute;
    top: 0px;
    left: 0px;
}
