/************************************************************************************

This CSS file is for customization of the ProScan Web Server page.

This file must be named 'style1.css' and reside in the executable file folder.
If not then the default style will be used.

For CSS(Cascading Style Sheet) help, visit http://www.w3schools.com/css/default.asp

View the web page source for matching the elements & selectors with this file.

************************************************************************************/

html, body {
    height:100%;
}

#body {
    background:#ECECEC;
    margin:0 auto;
    text-align:center;
}

#innerbody {
    font-family:Arial,Verdana,Helvetica,'Trebuchet MS',Sans-Serif;
    font-size:100%;
    background:#ECECEC;
    margin:0 auto;
    text-align:center;
    padding:10px;
    width:800px;    
    position:relative;
}

#div1 {
    font-size:120%;
    font-weight:bold;
}

#div_container {
}

#div_login {
    text-align:Left;
    float:right;
    position:relative;
    top:10px;
    height:55px;
    padding-top:8px;
    padding-bottom:8px;
    padding-right:8px;
    padding-left:8px;
    border:1px solid silver;
    border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
}

#div_listen_Live {
    width:340px;    
    padding-top:8px;
    padding-bottom:8px;
    padding-right:8px;
    padding-left:8px;
    border:1px solid silver;
    border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
}

#div_listen_Live_1 {
    float:left;
}

#div_listen_Live_2 {
}

#div_listen_Live_3 {
    font-size:80%;
}

#div_player_1 {
    text-align:left;
}

#div_player_2 {
    text-align:center;
    position:relative;    
}

#audio_player {
    width: 320px;
    height: 32px;
}

#span1 {
    font-size:80%;
}

#span2 {
    font-size:80%;
}

#span3 {
    font-size:80%;
}

#span4 {
    font-size:80%;
    color:blue;
}

#span5 {
    font-size:80%;
}

#span6 {
}

#span7 {
}

#span8 {
}

#span9 {
    font-size:90%;
    position:relative;
    left:18px;
}

#span10 {
    font-size:90%;
    position:relative;
    left:18px;
}

#span11 {
    font-size:80%;
    position:relative;
    left:34px;
}

#table1 {
    width:100%;
    text-indent:5px;
    text-align:left;
    background-color:#dadada;
    border-radius:10px;
    box-shadow:0px 3px 7px #333;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-box-shadow:0px 3px 7px #333;
}

#tr1-1 {
    text-align:center;
    font-weight:bold
}

#tr1-2 {
    font-weight:bold;
}

#tr1-3 {
    font-weight:bold;
}

#tr1-4 {
}

#td1-1 {
}

#td1-2 {
text-align:center;
}

#td1-3 {
    width:160px;
}

#td1-4 {
    width:160px;
}

#td1-5 {
}

#td1-6 {
    text-align:left;
    width:95px;
}

#td1-7 {
}

#td1-8 {
}

#td1-9 {
}

#td1-10 {
}

#table2 {
    width:100%;
    text-indent:5px;
    text-align:left;
    background-color:#dadada;
    border-radius:10px;
    box-shadow:0px 3px 7px #333;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-box-shadow:0px 3px 7px #333;
}

#tr2-1 {
}

#td2-1 {
    width:160px;
    font-weight:bold;
}

#td2-2 {
}

hr {
    background-color:gray;
    height:1px;
    border:0px;
    width:99%;
}


a:link {
}


a:visited {
}


a:hover {
}


a:active {
}


img1 {
}

#input1 {
    width:80px;
}

#span12 {
    font-size:80%;
    color:transparent;
}

#buttons_wrapper {
    position:relative;
    top:5px;
}

.buttons{
    height:21px;
    float:left;
    padding-top:2px;
    padding-bottom:4px;
    padding-right:2px;
    padding-left:2px;
    position:relative;
}

.button_span {
    font-size:80%;
    padding-right:4px;
    padding-left:4px;
}

#button_1 {
    top:3px;
}

#button_4 {
	   top:3px;
}

#button_7 {
    top:3px;
}

.down_button {
    position:relative;
    margin:0px;
    padding:0px;
    height:22px;
    width:50px;
}

.down_button:before {
    content:'';
    position:absolute;
    width:0;
    height:0;
    border-left:10px solid transparent;
    border-top:10px solid orange;
    border-right:10px solid transparent;
    left:14px;
    top:4px;
}

.up_button {
    position:relative;
    margin:0px;
    padding:0px;
    height:22px;
    width:50px;
}

.up_button:before {
    content:'';
    position:absolute;
    width:0;
    height:0;
    border-left:10px solid transparent;
    border-bottom:10px solid green;
    border-right:10px solid transparent;
    left:14px;
    top:4px;
}

#div_option1 {
    font-size:80%;
    position: absolute;
    padding-top:4px;
    padding-bottom:3px;
    padding-right:4px;
    padding-left:4px;
    border:1px solid silver;
    border-radius:6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
}

#cb1 {
    width:100px;
    background:transparent;
}

#option2 {
    font-size:80%;
}

#cb2 {
    width:100px;
    background:transparent;
}



#div_poll_push {
    font-size:80%;
    position: absolute;
    right:10px;
    padding-top:4px;
    padding-bottom:5px;
    padding-right:4px;
    padding-left:4px;
    border:1px solid silver;
    border-radius:6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
}

#admin_box {
    font-size:80%;
    position: absolute;
    left:10px;
    padding-top:4px;
    padding-bottom:5px;
    padding-right:4px;
    padding-left:4px;
    border:1px solid transparent;
    border-radius:6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
}

#checkbox1 {
}

#div_websocket_status1 {
}

#div_websocket_status2 {
}

#div_update_interval1 {
}

#div_update_interval2 {
}


/************************************************************************************

Below this line Is the Parameters page.

************************************************************************************/

#param_body {
    background:#ECECEC;
    margin:0px auto;
    text-align:center; /* WORKAROUND for IE not centering */
}

#param_innerbody {
    font-family:Arial,Verdana,Helvetica,"Trebuchet MS",Sans-Serif;
    font-size:100%;
    background-color:#dadada;
    margin:50px auto;
    padding:10px;
    width:800px;
    text-align:left;
    border-radius:10px;
    box-shadow:0px 3px 7px #333;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-box-shadow:0px 3px 7px #333;
}

#param_span1 {
}

#param_span2 {
}

#param_span3 {
}

#param_span4 {
}

#param_span5 {
}

#param_span6 {
}

#param_span7 {
}

#param_span8 {
}

#param_span9 {
}

#param_span10 {
}

#param_span11 {
}

#param_span12 {
}

#param_span13 {
}

#param_span14 {
}

#param_span15 {
}

#param_span16 {
}

#param_span17 {
}

#param_span18 {
}

#param_span19 {
}

#param_span20 {
}

#param_span21 {
}

#param_span22 {
}

#param_span23 {
}

.tooltip{
    position: absolute;
    top: -1000px;
    right: 0px;
    text-align: center;
    background-color: #99bfe6;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 14px;
    cursor: default;
}
 
.tooltip:before{
	position: relative;
    top: 1px; 
	left: 0px; 
    content:'?';	
    font-weight: bold;
    color: #484848;
}

.tooltip:hover p{
    display:block;	
}
 
.tooltip p{    
    display: none;
    text-align: left;
    background-color: #e6ecff;
    padding: 4px;
    width: 500px;
    position: absolute;
    right: -4px;
    color: black;
    font-size: 12px;   
    border:1px solid silver;
    border-radius:8px;
    -webkit-border-radius:8px;
    -khtml-border-radius:8px;
}
 
.tooltip p:before{ 
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color: black;
    right:8px;
    top:-12px;
} 

#span13 {
    font-size:80%;
    color:blue;
}


#span14 {
    color:blue;
	font-size:80%;			
	position:relative;
	top:2px;
	float:left;
	left:20px;
	width:150px;
	text-align:left;
}


#pre1 {
    display: inline;  
	position:relative;
    top:-2px;    
    font-size:120%;
    font-weight:bold;
}


#button_mute {
    color:black;
}


#button_mute.active {
    color:red;
}


#button_mute.disabled {
    pointer-events: none;
}


#div_button_mute {
    margin-left: 70%;
}


.tooltip1 {
    position: absolute;
    top: -1000px;
    right: 0px;
    text-align: center;
    background-color: #99bfe6;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 14px;
    cursor: default;
}


.tooltip1:before {
    position: relative;
    top: 1px;
    left: 0px;
    content: '?';
    font-weight: bold;
    color: #484848;
}


.tooltip1:hover p {
    display: block;
}


.tooltip1 p {
    display: none;
    text-align: left;
    background-color: #e6ecff;
    padding: 4px;
    width: 350px;
    position: absolute;
    left: -120px;
    color: black;
    font-size: 12px;
    border: 1px solid silver;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
}


.tooltip1 p:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom-color: black;
    left: 120px;
    top: -12px;
}


#metadata_span {
    font-size: 80%;
}