/* -----------------------------------------------------------------
	Common styles for all tabs.
   ----------------------------------------------------------------- */

body {
	background-color: #FFFFE8; /* Very light yellow */
	width:            100%;
	height:           100%;
}

a:active, a:hover {
	outline:          0;
}


.tabs {
	border-bottom: solid 2px #4b8886;
	padding-top: 10px;
	padding-bottom: 0px;
}

.tab, .right_tab {
	font-family:      Arial, sans-serif;
	text-decoration:  none;
	color:            #166e6b;
	width:            120px;
	padding:          11px 0px 0px 0px;
	text-align:       center;
	border-top:       solid 1px #4b8886;
	border-left:      solid 1px #4b8886;
	border-right:     solid 2px #4b8886;
	background:       #F4F4D8;
}

.tab {
	float:            left;
	margin:           5px 5px 0px 20px;
}

.right_tab {
	float:            right;
	margin:           5px 20px 0px 0px;
}

a.tab:hover, a.right_tab:hover {
	text-decoration: underline;
}


.selected_tab {
	font-weight:      bold;
	color:            #4b8886;
	position:         relative;
	top:              2px;
	border-bottom:    solid 2px #FFFFE8;
	background:       #FFFFE8;
}


.spacer {
	clear:            both;
}


.username_div {
	text-align:      right;
	color:           #4b8886;
	font-size:       small;
	margin-right:    33px;
}


.content {
	width: 100%;
	font-family: Arial, sans-serif;
	margin: auto;
}



.header-table {
	background:     #f0eeee;
	width:          80%;
	margin:         auto;
	border:         outset 1px #166e6b;
}

.header-title-1 {
	font-family:    Arial, sans-serif;
	font-size:      175%;
	font-weight:    bold;
	text-align:     center;
	color:          #4b8886;
}

.header-title-2 {
	font-family:    Arial, sans-serif;
	font-size:      200%;
	font-style:     italic;
	font-weight:    bold;
	text-align:     center;
	color:          #166e6b;
}

footer {
	clear:        both;
	display:      block;
	height:       52px;
	width:        100%;
	/* Text parameters */
	font-family:  Arial, sans-serif;
	color:        #808080;
	font-size:    80%;
	font-style:   italic;
	/* Stuck on the bottom of the window */
	position:     absolute;
	bottom:       0;
	/* Light gray top border */
	border-top:   1px solid #C0C0C0;
	z-index:      -1;
}

.footer-img {
	vertical-align: text-top;
}

#devices-table {
	margin:           auto;
}

#global-table {
	margin:           auto;
}

.header-version {
	font-family:  Arial, sans-serif;
	color:        #808080;
	font-size:    75%;
}


.header-languages {
	font-family:  Arial, sans-serif;
	color:        #808080;
	text-decoration:  none;
}

a.header-languages {
	text-decoration:  none;
}

a.header-languages:hover {
	text-decoration: underline;
}



/* -----------------------------------------------------------------
    "Devices" tab specific styles.
   ----------------------------------------------------------------- */

.dev-table {
	background:       #D0D0FF;
	margin:           auto;

	border:           2px solid;
	border-radius:    5px;
	border-color:     #F0F0FF #9A9ABA #9A9ABA #F0F0FF;
}


.dev-name, .dev-value {
	width:            4em;
	text-align:       center;
	vertical-align:   bottom;
	font-weight:      bold;
	font-family:      Arial, sans-serif;
	font-size:        12pt;
}


.dev-name {
	color:            #404040;
}


.dev-value {
	color:            #000000;
}


.dev-cnv {
	border:       inset 1px #166e6b;
	z-index:      2;
}


.dev-cnv, .dev-bkg, .dev-txt {
	margin:           0px;
	position:         absolute;
	left:             0;
	top:              0;
}


.dev-bkg {
	border:       inset 1px #166e6b;
	z-index:      1;
	background:   #D0D0FF;
}

.dev-txt {
	border:       inset 1px #166e6b;
	z-index:      3;
}

.cnv-div, .matrix-div {
	position: relative;
	height:   500px;
}


.matrix-cnv {
	border:       inset 1px #166e6b;
	z-index:      2;
	margin:       0px;
	position:     absolute;
	left:         0;
	top:          0;
}


.devices-side-buttons
{
	border:           outset  1px;
}



.devices-side-buttons:active
{
	border:           inset  1px;
 	position:         relative;
	left:             1px;
	top:              1px;
}


.group_name, .group_name_selected
{
	width:            4em;
	height:           3em;
	text-align:       center;
	background:       #EBE4E4;
	font-family:      Arial, sans-serif;
	font-size:        12pt;

	border:           1px solid;
	border-radius:    5px;
	border-color:     #F0F4F4 #9A9A9A #9A9A9A #F0F4F4;
}

.group_name_selected
{
	font-weight:      bold;
	background:       #FFFFA0;
	border-color:     #9A9A9A #F0F4F4 #F0F4F4 #9A9A9A;
}

.group_name_separator
{
	height:          1px;
}

#groups-table-unused
{
	border-radius:   5px;
	background:      #B8B0B0;
	margin:          auto;

}


/* -----------------------------------------------------------------
      Factory Setup specific styles.
   ----------------------------------------------------------------- */

.factory-setup-pad
{
	background:       #bdbfbc;
	margin:           auto;
	border:           outset 1px;

	border:           2px solid;
	border-radius:    5px;
	border-color:     #FFF8F8 #9A9A9A #9A9A9A #FFF8F8;

	padding:   10px;

	width:  30em;
}


.factory-ok-cancel-table
{
	background:       #bdbfbc;
	margin:           10px auto;

	border:           2px solid;
	border-radius:    5px;
	border-color:     #FFF8F8 #9A9A9A #9A9A9A #FFF8F8;

	padding:   10px;
}


/* -----------------------------------------------------------------
      SSH tab specific styles.
   ----------------------------------------------------------------- */

.ssh-background
{
	width: 100%;
	font-family: Arial, sans-serif;
	margin: auto;
	background:  #EEEEEE;
}

.ssh-setup-pad
{
	background:       #bdbfbc;
	margin:           auto;
	border:           outset 1px;

	border:           2px solid;
	border-radius:    5px;
	border-color:     #FFF8F8 #9A9A9A #9A9A9A #FFF8F8;

	padding:   10px;

	width:  30em;
}


.ssh-account-description
{
	background:       #cdcfcc;
}


.ssh_tab_button
{
	border:           outset  1px;
	border-radius:    5px;
	-webkit-border-radius:  5px;

	padding: 15px;
}

.ssh_tab_button:active
{
	border:           inset  1px;
}


/* -----------------------------------------------------------------
     Sequence player tab specific styles.
   ----------------------------------------------------------------- */


#devices_table
{
	margin:           auto;
}

.players-table
{
	border-spacing: 0px 10px;
}

.player-td {
	padding:          1px 1px 0px 1px; /* top right bottom left */
	vertical-align:   middle;
}

.player-tr {
	box-shadow:       1px 1px 1px 1px #202020;
	border-radius:    2px;
	background-color: #adafac;/* Same as the buttons drawn by Logilin */
	color:            #C0C0C0;
	height:           40px;
	vertical-align:   middle;
}

.player-title-td {
	padding:          1px 1px 0px 1px; /* top right bottom left */
	vertical-align:   middle;
	text-align:       center;
	height:           100%;
}

.player-title-tr {
	box-shadow:       1px 1px 1px 1px #202020;
	border-radius:    2px;
	background-color: #adafac;/* Same as the buttons drawn by Logilin */
	color:            #404040;
	font-family:      Arial, sans-serif;
	font-size:        11pt;
	font-weight:      normal;
}


.player-buttons {
}

.player-dev-num, .player-dev-name
{
	text-align:       center;
	color:            #000000;
	display:          inline-block;
	font-family:      Arial, sans-serif;
	font-size:        10pt;
	font-weight:      normal;
	vertical-align:   middle;
	height:           100%;
}

.player-dev-num
{
	width:            2em;
}

.player-dev-name 
{
	width:            4em;
	font-weight:      bold;
	font-size:        12pt;
}

.player-synchros
{
	box-shadow:       0px 0px 1px #303030;
	color:            #808080;
	position:         relative;
	left:             1px;
	top:              0px;
}

.player-sequences {
	box-shadow:       0px 0px 1px #303030;
	color:            #808080;
	position:         relative;
	left:             1px;
	top:              0px;
}

.player-button:active 
{
	box-shadow:       0px 0px 1px #303030;
	color:            #808080;
	position:         relative;
	left:             1px;
	top:              1px;
}




/* -----------------------------------------------------------------
      Sequence manager tab specific styles.
   ----------------------------------------------------------------- */

#sequence_manager_table
{
	background:       #adafac;
	margin:           10px auto;
	border:           outset 1px;
}



.sequence_manager_action
{
	margin:           10px;
	padding:          10px;
}


#sequence_select
{
	background:       #ffffe8;
	border:           inset 1px;
}


#upload_form
{
	border:           inset 1px #166e6b;
	padding:          10px;
	background:       #FFFFE8;
}

.manager_button
{
	border:           outset  1px;
	border-radius:    5px;
	-webkit-border-radius:  5px;
}

.manager_button:active
{
	border:           inset  1px;
}

/* -----------------------------------------------------------------
      Users manager tab specific styles.
   ----------------------------------------------------------------- */

#users_manager_table
{
	background:       #adafac;
	margin:           10px auto;
	border:           outset 1px;
}


.users-dev-table {
	background:       #D0D0FF;
	margin:           auto;

	border:           2px solid;
	border-radius:    5px;
	border-color:     #F0F0FF #9A9ABA #9A9ABA #F0F0FF;
}


.users_manager_action
{
	margin:           10px;
	padding:          10px;
}


.users_devices_table
{
	background:       #adafac;
	margin:           10px auto;
	border:           outset 1px;
}



.users_device_action
{
	margin:           10px;
	padding:          10px;
}


.users_devices_button
{
	width:            6em;
	border:           outset  1px;
	border-radius:    5px;
	-webkit-border-radius:  5px;
}

/* -----------------------------------------------------------------
      Devices Setup specific styles.
   ----------------------------------------------------------------- */

#dev-names-table
{
	background:       #adafac;
	margin:           auto;
	border:           outset 1px;

	border:           2px solid;
	border-radius:    5px;
	border-color:     #FFF8F8 #9A9A9A #9A9A9A #FFF8F8;
}

#ok-cancel-table
{
	background:       #adafac;
	margin:           10px auto;

	border:           2px solid;
	border-radius:    5px;
	border-color:     #FFF8F8 #9A9A9A #9A9A9A #FFF8F8;
}

#reboot-table
{
	background:       #ff8080;
	margin:           10px auto;
	padding:          25px;
	border-spacing:   10px;

	border:           2px solid;
	border-radius:    5px;
	border-color:     #FFF8F8 #9A9A9A #9A9A9A #FFF8F8;
}

.version
{
	float:            left;
	text-align:       left;
}


.setup-dev-name
{
	border-radius:    5px;
	margin:           3px;
	padding:          3px;
}

.dev-num
{
	color:            #303030;
	text-align:       right;
}

/* -----------------------------------------------------------------
	Sequence editor specific styles.
   ----------------------------------------------------------------- */

.editor-table-div
{
	background:    #DDFFDD;
}

.editor-graph-div
{
	display:      block;
	position:     fixed;
	height:       120px;
	bottom:       52px;
	width:        90%;
	margin-left: 5%; 
}

.editor-graph-cnv
{
	width:       100%;
	height:      100%;
	background:  #FFFFFF;
	border:      1px solid #808080;
}

.editor-help-line
{
	display:     block;
	position:    fixed;
	bottom:      182px;
	width:       90%;
	margin-left: 5%;
	text-align:  right;
	font-family: Arial, sans-serif;
	font-size:   10pt;
	font-weight: normal;
	color:       #404040;
}

.editor-buttons-div
{
	height:       52px;
	position:     fixed;
	bottom:       0;
	width:        100%;
	text-align:   center;
	display:      table;
}

.editor-buttons-childdiv
{
	display:      table-cell;
	vertical-align: middle;
	height:       32px;
}


.editor-buttons-bt
{
	height:       32px;
}


#edit-filename
{
	display:     block;
	position:    absolute;
	top:         150px;
	margin-left: 5%;
	text-align:  left;
	font-family: Arial, sans-serif;
	font-size:   10pt;
	font-weight: normal;
	color:       #404040;
}

.edit-scroll-pane
{
	display:      block;
	position:     absolute;
	bottom:       180px;
	top:          170px;

 	background:      #ADAFAC;
	overflow: auto;
	width: 90%;
 	margin-left:5%;
	border:1px solid gray;
 	margin-bottom:25px;
}

.edit-step-num
{
	text-align:       center;
	font-family:      Arial, sans-serif;
	font-size:        10pt;
	font-weight:      normal;
}

.edit-step-args
{
	font-family:      Arial, sans-serif;
	font-size:        10pt;
	font-weight:      normal;
}


.edit-step-value
{
	font-family:      Arial, sans-serif;
	font-size:        10pt;
	font-weight:      normal;
	width:            4em;
}


.edit-step-duration
{
	font-family:      Arial, sans-serif;
	font-size:        10pt;
	font-weight:      normal;
	width:            10em;
}

.edit-step-duration-txt
{
	font-family:      Arial, sans-serif;
	font-size:        10pt;
	font-weight:      normal;
	width:            4em;
}

.edit-step-line
{
}


.edit-step-button
{
	background-color: #FFFFFF;
}

.edit-step-button:active 
{
	box-shadow:       0px 0px 1px #303030;
	position:         relative;
	left:             1px;
	top:              1px;
}



.edit-sequence-table
{
	padding:         1px;
	spacing:         1px;
}

.edit-step-selected-line
{
	background:      #FFFF00;
}


.edit-empty-sequence-table
{
	font-family:      Arial, sans-serif;
	font-size:        10pt;
	font-weight:      normal;
	color:            #505050;
}


/* -----------------------------------------------------------------
                       Update tab
   ----------------------------------------------------------------- */

#update_form
{
	border:           inset 1px #166e6b;
	padding:          10px;
	background-color:       #adafac;
}

.update_action
{
	margin:           10px;
	padding:          10px;
}


/* -----------------------------------------------------------------
                       Factory tab styles.
   ----------------------------------------------------------------- */


.top-pad
{
	font-family:      Arial, sans-serif;
	border:           2px solid;
	border-radius:    5px;
	border-color:     #F0F0FF #9A9ABA #9A9ABA #F0F0FF;
}


.factory-input
{
	border-radius:    5px;
	padding:          2px;
	font-family:      Arial, sans-serif;
	font-size:        10pt;
}


/* -----------------------------------------------------------------
                       Add user popup
   ----------------------------------------------------------------- */

.add_user_dialog
{
	background: #FFFF00;
}


/* ----------------------------------------------------------------- */