html
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0px;
  text-align: left;
  text-decoration: none;
  color: #767676;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  border-width: 0;
  border-style: none;
  background-color: #E6E6E6;
  background-position: left;
  height: 100%;
  
  /* Fix ie limitation when hovering on a component other than an anchor.  */
  /*behavior: url(css/csshover.htc);*/

  color: #767676;
  
}

/* Subtitles that can appears at multiple times in the detailContent panel. */
h1 {
  font-size: 15px;
  color: #2D3551;
  font-weight: bold;
  margin-bottom: 0.5em;
  text-align: left;
  text-indent: 2em;
}

h2 {
  font-size: 12px;
  color: #2D3551;
  font-weight: bold;
  margin-bottom: 0.5em;
  text-align: left;
  text-indent: 2em;
  padding-left:20px;
}

em {
  padding-left: 2.5em;
  text-indent: 2.5em;
}

img {
  border: 0px;
}

p {
  text-align: left;
}

.centered {
  text-align: center;
}

table.data {
  text-align: left;
  border-collapse: collapse;
  border: 2px solid #E6E6E6; /** hide the table border */
  width: 100%;
}

table.data thead {
  color: white;
  background-color: #838693;
}

table.data tbody {
  background-color: #d2d4d9;
  color: black;
}

table.data th, table.data td {
  font-weight: normal;
  padding-left: 0.5em; 
  padding-right: 0.5em; 
  border: 1px solid white;
}

.nicinitialized{
  color: black;
}

.nicinitializing{
  color: gray;
}

.nicuninitialized{
  color: red;
}
	
table.nics_warning {
  border-collapse: collapse;
  white-space: nowrap;
  border-style:groove;
  border-width:thin;
  margin-left: auto;
  margin-right: auto;
}

table.nics_warning th{
  color: white;
  background-color: #838693;
  padding: 4px;
}

table.nics_warning td{
  color: red;
  background-color:#e4e4e8;
  padding: 4px;
}

table.nics_warning td.labelColumn {
  text-align: right;
  padding-left: 6em;
}

table.nics_warning td.fieldColumn {
  text-align: left;
  padding-right: 6em;
}

table.nics_warning td.button {
  background-color:#838693;
  text-align:center;
  padding: 4px;
}

table.editionPart {
  border-collapse: collapse;
  white-space: nowrap;
  border-style:none;
  border-width:thin;
  margin-left: auto;
  margin-right: auto;
}

table.editionPart td {
  font-weight: normal;
  background-color:#e4e4e8;
  valign: center;
  margin-bottom: 0.3em;
  padding: 2px;
}

table.editionPart td.labelColumn {
  text-align: right;
  padding-left: 6em;
}

.labelColumnTableEditionPart {
  text-align: right;
  padding-right: 1em;
}

.fieldColumnTableEditionPart {
  text-align: left;
}

table.editionPart td.fieldColumn {
  text-align: left;
  padding-right: 6em;
}

table.editionPart td.button {
  text-align:center;
  padding: 12px;
}

.noWrap {
	white-space: nowrap;
}

.allowWrap {
	white-space: normal;
}

a:link,
a:visited,
a:hover,
a:active,
a:focus {
  font-size: 12px;
  letter-spacing: +0px;
  color: #2D35FF;
  text-decoration: none;
}

a.editionLink:link,
a.editionLink:visited,
a.editionLink:hover,
a.editionLink:active,
a.editionLink:focus {
  font-size: 12px;
  color: black;
  text-decoration: underline;
}

.editionLink {
  font-size: 12px;
  color: black;
  text-decoration:underline;
}

.disablededitionLink {
  font-size: 12px;
  color: red;
  text-decoration: underline;
} 

.disablededitionLinkInitializing {
  font-size: 12px;
  color: grey;
  text-decoration: none;
} 

input {
  color: #18234E; 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0px;
}

input[type=text] {
  padding-left: 3px;  
  padding-right: 3px;  
}

input[type=password] {
  padding-left: 3px;  
  padding-right: 3px;  
}

input.button {
  color: #18234E;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0px;
}

.buttonLink {
  color: #18234E;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0px;
  border-width: 1px;
  border-style: solid;
  border-top-color: white;
  border-left-color: white;
  border-bottom-color: #222222;
  border-right-color: #222222;
  padding-top:1px;
  padding-left:10px;
  padding-bottom:1px;
  padding-right:10px;
  background-color: rgb(212,208,200);
}

.buttonLinkPushed {
  color: #18234E;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0px;
  border-width: 1px;
  border-style: solid;
  border-top-color: #222222;
  border-left-color: #222222;
  border-bottom-color: white;
  border-right-color: white;
  padding-top:1px;
  padding-left:10px;
  padding-bottom:1px;
  padding-right:10px;
  background-color: rgb(242,248,240);
}

.buttonLinkDisabled {
  color: #18234E;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0px;
  border-width: 1px;
  border-style: solid;
  border-top-color: Silver;
  border-left-color: Silver;
  border-bottom-color: Silver;
  border-right-color: Silver;
  padding-top:1px;
  padding-left:10px;
  padding-bottom:1px;
  padding-right:10px;
  background-color: rgb(253,245,230); 
}

.switchLogicalNic, .switchSource {
    width: 16px;
    height: 16px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 3px;
    margin-bottom: 3px;
    padding-top:1px;
    padding-left:10px;
    padding-bottom:1px;
    padding-right:10px;
    cursor: pointer;
}

.switchedLogicalNic {
    color: #18234E;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 3px;
    margin-bottom: 3px;
    padding-top:1px;
    padding-left:10px;
    padding-bottom:1px;
    padding-right:10px;
    cursor: wait;
}

.disableSwitchLogicalNic {
    width: 16px;
    height: 16px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 3px;
    margin-bottom: 3px;
    padding-top:1px;
    padding-left:10px;
    padding-bottom:1px;
    padding-right:10px;
    cursor:default;
}

/*input[type=text]:focus, input[type=password]:focus, textarea:focus {
  background: #FFCC99;
}
*/
/*
input:focus {
    background: #FFCC99;
}
*/
.spacer {
    clear:both;
}

/* 
 * Show to the user that he can click on a label 
 * to put the focus on the associated control. 
 */
label:hover {
    cursor: pointer;
}

/* Div containing several formLine sub-divs */
.formGroup {
    margin-top: 2.5em;
    text-align: left; /* do not remove! Else IE7 centers formLine divs */
}

/* Div containing several formLine sub-divs */
.formGroupTab {
    margin-top: 1.5em;
    text-align: left; /* do not remove! Else IE7 centers formLine divs */
}


/* Line of labels + controls */
.formLine {
    margin-bottom: 0.3em;
    text-align: left;
    height: 21px;
    clear: both;
}

div[id^="hlsPublishingTab"] .formLine,
div[id^="ServiceSpecific"] .formLine{
    height: auto;
}

div[id^="hlsPublishingTab"] .noteText,
div[id^="ServiceSpecific"] .noteText{
    white-space: nowrap;
}

div[id^="hlsPublishingTab"] .formLabel,
div[id^="ServiceSpecific"] .formLabel{
    white-space: nowrap;
}

/**
 * Label that appears at the first column of a form.
 */
.formLabel {
    clear: both;
    float: left;
    margin-top: 3px;
    margin-right: 0.4em;
    width: 16em;
    text-align: right;
}

.formValue {
    margin-top: 3px;
    float: left;
}

.formLabelTitle {
    font-weight: bold;
    clear: both;
    float: left;
    margin-top: 3px;
    margin-right: 0.4em;
    width: 16em;
    text-align: right;
    color: #2D3551;
}

.formInfo {
	color: #9B9B9B;
    margin-top: 3px;
    float: left;
    text-align: left;
  	font-size: 11px;
    margin-left: 0.4em;
}

.formIcon {
    float: left;
    margin-left: 5px;
    margin-top: 2px;
    width: 16px;
    height: 16px;
}

.formLink:hover{
    cursor: pointer;
}

input.formValue,
select.formValue {
	margin-top: 1px;
}

/** 
 * Check box that appears at the first column of a form.
 */
.formCheckbox {
    margin-right: 0.4em;
    width: 12.5em;
    text-align: right;
    vertical-align: middle;
}

.hidden {
  display: none;
}

.setting {
  color: #18234E;
}

/**
 * Units specified at the right of an input text as in:
 * Target bit rate: [____] kbps
 */
.unit {
    margin-left: 0.25em;
}

.unitConversion {
    margin-right: 0.5em;
}
	
.whiteText1 {
  color: #FFFFFF;
  font-size: 12px;
  letter-spacing: 0px;
}

.whiteText2 {
  color: #FFFFFF;
  font-size: 10px;
  letter-spacing: 0px;
}

.greyText {
  color: #D2D4D9;
  font-size: 12px;
  letter-spacing: 0px;
}

.normalText {
  font-size: 12px;
  letter-spacing: 0px;
  font-weight: normal;
}

.normalGreyText {
  font-size: 12px;
  letter-spacing: 0px;
  color: #18234E;
  font-weight: normal;
}

.boldText {
  font-size: 12px;
  letter-spacing: 0px;
  font-weight: bold;
  color: #18234E;
}

.noteText {
  color: #9B9B9B;
  text-align: left;
  font-size: 11px;
}

.errorText {
  font-weight: bold;
  font-size: 13px;
  color: #FF0000;
}

.disabledText {
  color: #CBCBD1;
}

.asterisk {
  color: red;
  font-size: 12px;
  font-weight: normal;
}

.checkbox {
  color: #18234E;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
}

select {
  color: #18234E;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0px;
}

#header {
    
  position: absolute;
  top: 0px;
  left: 0px;
  height: 70px;
  width: 100%;

  background-image: url('/Muse/atoll/static/images/bgHeader.gif');
  background-repeat: repeat-x;
  color: #000000;
  z-index: 1;
}

#contentLoading {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  color: #29304B;
  margin-top: 6em;
}

#mainFrame {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0;
  width: 100%;
  padding-top: 150px;
}

#leftPanel {
  position: absolute;
  top: 43px;
  left: 0px;
  bottom:0;
  width: 45%;
  padding-top: 22px;
  border-right: 1px;
  border-right-style: solid;
  border-right-color: #2D3551;
  background-color: #D2D4D9;
  //overflow-y: auto;
}

#rightPanel {
  position: absolute;
  top: 43px;
  left: 45%;
  bottom: 0;
  width: 55%;
  padding-top: 22px;
  overflow-y: auto;
}

#loading, #badLicense, #missingLicense, #resetConfig, #licenseFatalError, #initializationFailed, #rebootInProgress ,#incompatibleLicenseHardware, #loadingLicense, #loadingConfig, #configinprogress, #guirefresh, #loadingPreset{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  padding-top: 100px;
  background-color: #D2D4D9;
  vertical-align: middle;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
}

#comFailure{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  padding-top: 150px;
  z-index: 1999;
  filter : alpha(opacity=70); 
  opacity: 0.70;
  -moz-opacity:0.70;
  background: #6F6F6F;
  vertical-align: middle;
  text-align: center;
  font-size: 50px;
  color: #FF0000;
  font-weight: bold;
}

/* Panel included in the detail panel below the detailTitle panel. */
.detailContainer {
  margin: 2.5em 1em 1em 1em;
  text-align: center;
}

/* Header displayed on the top of the right panel. */
.detailTitle {
  font-size: 15px;
  letter-spacing: -0.25px;
  color: #FFFFFF;
  background-color: #2D3551;
  padding: 7px 5px 5px 5px;
  height: 20px;
  vertical-align: middle;
  margin-top: 4px;
}

.itemTitle {
  color: #767676;
  text-align: left;
}

.info {
  position: relative;
  font-style: italic;
  width: 100%;
  color: #000000;
  height: 60px;
  padding: 5px;
  display: none;
}

/* Used */
.alarmStart {
  color: #D90000;
}

/* Used */
.alarmStop {
  color: #0F8700;
}

.encodingStart {
  color: #32D71E;
}

.encodingStop {
  color: #FF0000;
}

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

.leftBlock {
  float: left;
  text-align: left;
}
 
.right {
  float: right;
  text-align: right;
}

/**
 * Styles for videoInput.htm 
 */

.sliderObject {
  float:left; 
}

.sliderScale {
  float: left;
  margin-top: 4px;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 11px;
}

.sliderInput {
  float: left; 
  margin-right: 1em;    
  width: 2em;
}

/**
 * Styles for streams.htm
 */

.videoStreamVbiLine {
  margin-left: 5em;
  margin-right: auto;
}

.videoStreamVbiCheckBoxLine {
  margin-left: 9em;
  margin-right: auto;
}

/**
 * Styles for about.htm
 */
.aboutValue {
  color: #18234E;
    float: left;
    margin-top: 3px;
}

.internalmessage {
    text-align: center;
    margin-top: 10%;
    width: 60%;
    height: 200px;
    color: #FF0000;
    font-weight: bold;
	  font-size: 13px;
    background-color: #FFFFCC;
    border: 3px solid #FF0000;
}
.internalmessagetext {
    color: #FF0000;
    font-weight: bold;
    font-size: 13px;
}

table.tableNoBorder {
    border-spacing:0px;
    padding:0px;
    margin:0px;
    border:0px;
    border-collapse:collapse;
}

table.tableNoBorder td{
    padding:0px;
}

table.configEntry {
  white-space: nowrap;
}

table.configEntry th {
  color: white;
  background-color: #838693;
}

table.configEntry td {
  color: black;
  background-color: #c0c0c0;
}

table.configEntry td.link {
  border: 0px;
  background-color: transparent;
}

#setConfigLoaderAnim {
    display: none;
}

.unsupportedPids {
	font-style:italic;
}

.configurationBlock {
	height: 20px;
}

.configurationBlock form {
	display: inline;
}

.configurationGroup  {
    text-align: left;
}

.configurationGroup table td.configurationLabel {
	text-align: right;
	width : 200px;
}

.ProductMode_Demo {
	background-image: url('/Muse/atoll/static/images/demonstration_version.gif');
	background-repeat:  repeat;
}

.ProductMode_Alpha {
	background-image: url('/Muse/atoll/static/images/alpha_version.gif');
	background-repeat:  repeat;
}

.ProductMode_Beta {
	background-image: url('/Muse/atoll/static/images/beta_version.gif');
	background-repeat:  repeat;
}

.ProductMode_InternalUse {
	background-image: url('/Muse/atoll/static/images/internal_version.gif');
	background-repeat:  repeat;
}

/** Licesing styles */
/** Main style for licensing section*/
table.licensingSection {
	border-collapse: collapse;
	border: 2px solid white; /** hide the table border */
	white-space: nowrap;
	width: 600px;
	margin-left: 50px;
}

/** Licensing  title */
table.licensingSection th {
	font-weight: bold;
	font-size:12px;
	color:white;
	text-align: left;
	
	padding-left:5px;
	padding-right:5px;
	border: 1px solid white;
	
	height: 20px;
	
	background-color:#838693;
} 

table.licensingSection td {
  font-weight: normal;
  text-align: left;
  padding-left:5px;
  padding-right:5px;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  height: 20px;
  vertical-align: middle;
}
/** Allow to rightly align bullet images */
table.licensingSection td img {
	vertical-align: middle;
	text-align: center;
}

table.licensingSection td.licensingSector {
	border: 1px solid white;
	background-color: #CCCCCC;
	text-align: center;
}

table.licensingSection td.licensingCategory {
	border-right: 1px solid white;
	background-color: #CCCCCC;
	text-align: right;
	width:120px;
	text-align: right;
}

table.licensingSection td.licensingStatusEmptyCell {
	border: 1px solid white;
	text-align: center;
}

table.licensingSection td.licensingStatusTrue {
	border: 1px solid white;
	color: #18234E;
	text-align: center;
}

table.licensingSection td.licensingStatusFalse {
	border: 1px solid white;
	text-align: center;
}
table.licensingSection td.licensingSingleLineLeft {
	width: 30%;
}
table.licensingSection td.licensingSingleLineRight {
	width: 70%;
}


.dynamicSubMenuSection {
	margin:0px;
	padding:0px;
	border-style: solid;
	border-width: 1px;
	border-color: #D2D4D9;
}

.genericOutputTable {
	width: 610px;
}

.genericOutputStreamType {
	width: 90px;
}

/*CSS to handle full screen mode for elements*/
.fullscreen{
	position: absolute;
	top: 0;
	left: 0;	
	width: 100%;
	height: 100%;	
	z-index: 99;	
}

.invisiblescreen
{
	position: absolute;
	top: -10000;
	left: -10000;	
	width: 100%;
	height: 100%;	
	z-index: -99;
}

/*end CSS block for fullscreen mode*/

/**
* charts legend text-color size
*/
div#legend div#legendholder td.legendLabel
{
	color: #767676;
	font-size: 12px;
    font-style: normal;
    font-weight: normal;
}

.tabContainer {
	z-index: 10;
}

.titleActions{
	float:right;
	font-size: 12px;
	color: #FFFFFF;
}

.titleActions .actionSep{
	color: #AAAAAA;
}

.titleActions .actionLink
{
	font-size: 12px;
	text-decoration: underline;
	color: #FFFFFF; 
	outline: none;
}

.titleActions .actionLinkDisabled{
	text-decoration: none;
	color: #AAAAAA;
	font-size: 12px;
    outline: medium none;
}

/* filter icon */
.formIcon.filter.on {
    background-image: url('/Muse/atoll/static/images/filter_on.png');
}
.formIcon.filter.off {
    background-image: url('/Muse/atoll/static/images/filter_off.png');
}

/* handle alignement of Checkbox and Label in formValue */
.formValue input[type=checkbox].cb{
    position:relative;
    bottom:1px;
}

.formValue span.cb_label
{
    position:relative;
    bottom:3px;
}

/* Estimated Performance cost color */
.redText {
    color:#A52A2A;
}

.greenText {
    //color:green;
}

.orangeText {
    color:#FF8C00; 
}

hr.hidden {
   clear:both;
   visibility:hidden;
   margin:0px;
   padding:0px;
}

.eventheader
 {
  padding-top: 2px;
  padding-bottom: 3px;  
  height: 22px;
  text-align: left;
  border: none;
  font-size: 12px;
  vertical-align: middle;
}

.headerTitles
 {
  padding-top: 2px;
  padding-bottom: 3px;  
  height: 22px;
  text-align: left;
  border: none;
  font-size: 12px;
  vertical-align: middle;
  
}

.eventfoot {
  padding-top: 3px;
  padding-bottom: 2px;  
  height: 12px;
  text-align: right;
  border: none;
  font-size: 12px;
  vertical-align: middle;
  clear: both;
}

.eventActionLink {
  font-size: 12px;
  color: black;
  text-decoration: underline;
  cursor: pointer;
}

.eventSetting {
    text-align: left;
    height: 18px;
    clear: both;
}
.eventLabel {
    clear: both;
    float: left;
    margin-right: 0.4em;
    width: 12em;
    text-align: right;
    color: #767676;
}

.eventLabelRight {
    float: left;
    margin-right: 0.4em;
    text-align: right;
    width: 5em;
    color: #767676;
}

.eventValue {
    float: left;
    width: 14em;
}

.eventLabelLeft {
	text-align: right;
}

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

.eventright {
  float: right;
  text-align: right;
}

.loader-small{
    width:16px;
    height:16px;
    background-image: url("/Muse/atoll/static/images/ajax-loader-circle-small.gif");
    background-repeat: no-repeat;
    position:fixed;
    margin-left:5px;
}

.formtoggle {
    float: left;
    margin-top: 3px;
    margin-right: 0.4em;
    width: 16em;
    text-align: left;
}

.switchLogicalBoard {
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 3px;
    margin-bottom: 3px;
    padding-top:1px;
    padding-left:10px;
    padding-bottom:1px;
    padding-right:10px;
    cursor: pointer;
}

.disableSwitchLogicalBoard {
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 3px;
    margin-bottom: 3px;
    padding-top:1px;
    padding-left:10px;
    padding-bottom:1px;
    padding-right:10px;
    cursor:default;
}

table#mountpointslist tr.inactive td {
	color: gray;
	font-style: italic;
}

.icon {
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 16px;
    margin: 3px 2px;
    width: 16px;
}

.icon.trash {
	background-image: url("../images/object_delete.png");
}

.icon.mount {
	background-image: url("../images/mount.png");
}

.icon.unmount {
	background-image: url("../images/unmount.png");
}

.icon.folder {
    background-image: url("../images/folder.png");
}
.icon.folder_disabled {
	background-image: url("../images/folder_grey.png");
}

/* jQuery dialog style */
.ui-dialog{
	border-radius: 0px !important;
	padding: 0 !important;
}
.ui-dialog .ui-dialog-titlebar{
	border: none;
	background: #2D3551 none;
	color: white;
	border-radius: 0;
}
.ui-dialog .ui-dialog-buttonpane{
    text-align:center !important;
	border: none;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{
	float: none !important;
}
.no-close .ui-dialog-titlebar-close{
  display: none;
}

.inlineFlexGrid{
	display: inline-block;
	vertical-align: top;
}

.inlineFlexGrid h1{
text-align: center;
text-indent: 0;
}

.inlineFlexGrid .formLabel{
width: 13em;
}

div[id^="ServiceSpecific"]{
    text-align: left;
}