/* -------- General layout: -------- */

.topMargin0 { margin-top: 0px; }
.topMargin6 { margin-top: 6px; }
.topMargin12 { margin-top: 12px; }
.topMargin24 { margin-top: 24px; }
.topMargin48 { margin-top: 48px; }

.bottomMargin0 { margin-bottom: 0px; }
.bottomMargin6 { margin-bottom: 6px; }
.bottomMargin12 { margin-bottom: 12px; }
.bottomMargin24 { margin-bottom: 24px; }
.bottomMargin48 { margin-bottom: 48px; }

.rightMargin0 { margin-right: 0px; }
.rightMargin12 { margin-right: 12px; }
.rightMargin24 { margin-right: 24px; }

.leftMargin0 { margin-left: 0px; }
.leftMargin12 { margin-left: 12px; }
.leftMargin24 { margin-left: 24px; }

.rightPad0 { padding-right: 0px; }
.rightPad12 { padding-right: 12px; }
.rightPad24 { padding-right: 24px; }

.leftPad0 { padding-left: 0px; }
.leftPad8 { padding-left: 8px; }
.leftPad12 { padding-left: 12px; }
.leftPad16 { padding-left: 12px; }
.leftPad24 { padding-left: 24px; }

.topPad0 { padding-top: 0px; }
.topPad6 { padding-top: 6px; }
.topPad12 { padding-top: 12px; }
.topPad24 { padding-top: 24px; }

.bottomPad0 { padding-bottom: 0px; }
.bottomPad12 { padding-bottom: 12px; }
.bottomPad24 { padding-bottom: 24px; }

.pad3 { padding: 3px; }

.width80px { width: 80px; }
.width90px { width: 90px; }
.width100px { width: 100px; }
.width110px { width: 110px; }
.width120px { width: 120px; }
.width160px { width: 160px; }

.alignLeft { text-align: left; }
.alignRight { text-align: right; }
.alignCenter { text-align: center; }

.floatLeft {
  float: left;
}

.floatRight {
  float: Right;
}

.indent4 {
  margin-left: 4px;
  margin-bottom: 3px;
}
.indent10 {
  margin-left: 10px;
}
.indent20 {
  margin-left: 40px;
  text-indent: -20px;
}
.indent40 {
  margin-left: 60px;
  text-indent: -20px;
}
.indent60 {
  margin-left: 60px;
  text-indent: -20px;
}

/* -------- Colors: -------- */

.textLightGray { color: #DDDDDD; }
.textMediumGray { color: #999999; }
.textDarkGray { color: #666666; }

.borderLightColor {
  border-color: #CCCCCC;
}

.borderDefaultColor {
  border-color: #666666;
}

/* -------- General Text styles: -------- */

p { text-align: justify; margin:0.75em 0em 0.75em 0em; }

.header1 {
  font-size: 1.6em;
  font-weight: bold;
  font-family: Century Gothic,Arial,sans;
}
.header2 {
  font-size: 1.4em;
  font-weight: bold;
  font-family: Century Gothic,Arial,sans;
}
.header3 {
  font-size: 1.2em;
  font-weight: bold;
  font-family: Century Gothic,Arial,sans;
}
.header4 {
  font-size: 1em;
  font-weight: bold;
  font-family: Century Gothic,Arial,sans;
}
.smallText  {
  font-size: 0.9em;
}

/* -------- Miscellaneous styles: -------- */

.headerBar {
  width: 100%;
  padding-top: 6px;
  padding-bottom: 6px;
  border-top: 1px solid #666666;
  border-bottom: 1px solid #666666;
}

.dottedDivider {
  display: block;
  border-top-width: 3px;
  border-top-style: dotted;
  margin: 30px 0px 20px 0px;
}

.dottedTopBorder {
  display: block;
  border-top-width: 3px;
  border-top-style: dotted;
}

.dottedBottomBorder {
  display: block;
  border-bottom-width: 3px;
  border-bottom-style: dotted;
}

.thinTopBorder {
  display: block;
  border-top-width: 1px;
  border-top-style: solid;
}

.warning {
  font: 100% Century Gothic,Arial,sans;
  font-weight: bold;
  color: #DD0000;
}

.grayBox {
  display: block;
  border: 1px solid #666666;
  background-color: #F6F6F6;
}

.outlineBox {
  clear: both;
  position: relative;
  display: block;
  border-width: 1px;
  border-style: solid;
}

.outlineBoxCaption {
  position: absolute;
  top: -14px;
  left: 14px;
  padding: 0px 12px 0px 12px;
  background-color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.showMoreBox {
  display: none;
  max-width: 240px;
  margin: 24px auto 24px auto;
  padding: 12px 36px 12px 36px;
  border: 1px solid #666666;
  background-color: #EEEEEE;
  text-align: center;
  cursor: pointer;
}

.showMoreLabel {
  font-size: 14pt;
  white-space: nowrap;
  overflow: hidden;
}

.pagination {
  margin: 24px 0px 24px 0px;
  text-align: center;
  font-weight: bold;
}

/* -------- Icon-only buttons: -------- */

.iconButton {
  float: left;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 16px 16px;
  cursor: pointer;
}
.iconButton:hover {
  background-color: #FFFFEE;
}
.iconButtonDisabled {
  float: left;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 16px 16px;
  opacity: 0.5;
  filter: alpha(opacity=5);
}

.iconButtonEdit {
  background: url(../graphics/edit.png);
}
.iconButtonDelete {
  background: url(../graphics/delete.png);
}
.iconButtonSwap {
  background: url(../graphics/swap.png);
}

/* -------- Generic text buttons with icon on left: -------- */

.textButton {
  display: inline;
  height: 26px;
  padding: 0px 9px 0px 29px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  line-height: 26px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  background-repeat: no-repeat;
  background-position: 6px 5px;
  background-size: 16px 16px;
}

.textButtonSmall {
  height: 20px;
  padding: 2px 6px 2px 22px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  line-height: 20px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  background-repeat: no-repeat;
  background-position: 3px 2px;
  background-size: 16px 16px;
}

.textButtonRightPad {
  margin-right: 24px;
}

.textButtonEnabled {
  background-color: #EEEEEE;
  border: 1px solid #666666;
  cursor: pointer;
}

.textButtonDisabled {
  background-color: #EEEEEE;
  border: 1px solid #666666;
  cursor: default;
  opacity: 0.6;
}

.textButtonEnabled:hover {
  background-color: #FDF8A5;
  border: 1px solid #4C77FF;
}

.textButtonSelected {
  background-color: #FDF8A5;
  border: 1px solid #4C77FF;
}

.textButtonPause {
  background-image: url(../graphics/pause.png);
}

.textButtonResume {
  background-image: url(../graphics/go.png);
}

.textButtonEdit {
  background-image: url(../graphics/edit.png);
  background-position: 3px 3px;
}

.textButtonSave {
  background-image: url(../graphics/save.png);
}

.textButtonCancel {
  background-image: url(../graphics/cancel.png);
}

.textButtonClose {
  width: 50px;
  background-image: url(../graphics/cross.png);
}

.textButtonDelete {
  background-image: url(../graphics/delete.png);
  background-position: 3px 4px;
}

.textButtonAdd {
  background-image: url(../graphics/add.png);
}

.textButtonSwap {
  background-image: url(../graphics/swap.png);
}

.textButtonYes {
  background-image: url(../graphics/go.png);
}

.textButtonNo {
  background-image: url(../graphics/stop.png);
}

.textButtonCounterclockwise {
  background-image: url(../graphics/rotate_anticlockwise.png);
}

.textButtonClockwise {
  background-image: url(../graphics/rotate_clockwise.png);
}

.textButtonLoading {
  background-image: url(../graphics/ajax-loader.gif);
}

/* -------- literature tooltip: -------- */

#tooltip {
    padding: 3px;
    background-color: #FFF1B2;
    border: 1px solid #000000;
    font-size: 0.9em;
}

span.refcode:hover { cursor: default; color: #801A1A; font-weight: bold;}

/* -------- Statistics tables: -------- */

.stat_Table {
  display: table;
  margin: 24px 0px 0px 0px;
  border-top: 1px solid #CCCCCC;
  border-left: 1px solid #CCCCCC;
}
.stat_TableRow {
  display: table-row;
}
.stat_TableCell {
  display: table-cell;
  vertical-align: top;
  border-bottom: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
  padding: 3px 5px 3px 5px;
  background-color: #F3F3F3;
}
.stat_TableHeaderCell {
  display: table-cell;
  vertical-align: top;
  border-bottom: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
  padding: 3px 5px 3px 5px;
  background-color: #6385A6;
  color: #FFFFFF;
}

.stat_TableNumber { width: 70px; text-align: center; }
.stat_TableMin { width: 50px; text-align: center; }
.stat_TableMax { white-space: no-wrap; }
.stat_TableMean { width: 50px; text-align: center; }

@media (min-width: 621px)
{
  /* -------- General layout: -------- */

  /* To show items that should only appear on wide screens: */
  .showIfWide {}

  /* To show items that should only appear on narrow screens: */
  .showIfNarrow {
    display: none;
  }
  
  .contentBlock {
    margin: 24px 12px 24px 12px;
  }
  
  .padIfNarrow {}

  .hMarginAll {
    margin-left: 12px;
    margin-right: 12px;
  }

  .hMarginWide {
    margin-left: 12px;
    margin-right: 12px;
  }

  .vMarginAll {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .vMarginWide {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .topMarginWide {
    margin-top: 24px;
  }

  .layoutTableWide {
    display: table;
    width: 100%;
  }
  .layoutTableCellWide {
    display: table-cell;
    vertical-align: top;
  }

  .layoutTableAll {
    display: table;
    width: 100%;
  }

  .layoutTableCellAll {
    display: table-cell;
    width: 50%;
    vertical-align: top;
  }

  .layoutTableFullWidth {
    display: table;
    width: 100%;
  }

  .layoutTableCell {
    display: table-cell;
    vertical-align: top;
  }

  .layoutTableCell2columns {
    display: table-cell;
    width: 50%;
    vertical-align: top;
  }

  .layoutTableCellLeft {
    margin-right: 36px;
  }

  .layoutTableCellRight {
    margin-left: 36px;
  }

  .highlightBorderLeft {
    padding-left: 16px;
    border-left-width: 3px;
    border-left-style: solid;
  }

  .oneColumn {
    width: 100%;
  }

  .twoColumns {
    float: left;
    width: 50%;
  }

  .font16 {
    font-size: 1.6em;
  }
  .font14 {
    font-size: 1.4em;
  }
  .font12 {
    font-size: 1.2em;
  }
  .font10 {
    font-size: 1.0em;
  }
  .font07 {
    font-size: 0.7em;
  }
  
  /* -------- Tabs: -------- */

  .tabs {
    display: block;
    position: relative;
    width: 100%;
    height: 30px;
    margin-top: 20px;
    border-bottom: 1px solid #666666;
  }

  .tab {
    float: left;
    padding: 0px 8px 0px 8px;
    border-top: 1px solid #666666;
    border-left: 1px solid #666666;
    border-right: 1px solid #666666;
    font-size: 12pt;
    font-weight: bold;
    line-height: 29px;
    text-align: center;
  }
  .tabFirst {
    margin-left: 24px;
  }
  .tabNext {
    margin-left: 8px;
  }
  .tabDefault {
    height: 29px;
    background-color: #DDDDDD;
    cursor: pointer;
  }
  .tabDefault:hover {
    background-color: #FFFFFF;
  }
  .tabSelected {
    height: 30px;
  }
  .tabBar {
    display: block;
    width: 100%;
    height: 6px;
    border-bottom: 1px solid #666666;
  }

  .tabBox {
    display: none;
  }

  .tabBoxSelected {
    display: block;
    width: 100%;
    padding-bottom: 24px;
  }
  
  /* -------- Intro page: -------- */
  
  .intro_Table2Col {
    display: table;
    width: 100%;
  }
  .intro_TableLeftcol {
    display: table-cell;
    vertical-align: top;
    padding-right: 24px;
  }
  .intro_TableRightcol {
    display: table-cell;
    vertical-align: top;
    width: 210px;
  }
  
  .intro_SeeAlso {
    width: 210px;
    margin: 0px 0px 20px 0px;
    border: 1px solid #CCCCCC;
  }
  
  .intro_SeeAlsoHeader {
    padding: 2px 0px 2px 5px;
    background-color: #6385A6;
    text-align: left;
    color: #FFFFFF;
    font-weight: bold;
  }
  
  .intro_SeeAlsoItem {
    padding: 2px 0px 2px 5px;
    background-color: #EEEEEE;
    border-top: 1px solid #CCCCCC;
    text-align: left;
    color: #004080;
  }
  
  /* -------- Informational table: -------- */
  
  .data_Table {
    display: table;
    margin: 12px;
    border-top: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
  }
  .data_TableRow {
    display: table-row;
    width: 100%;
  }
  .data_TableCell {
    display: table-cell;
    vertical-align: top;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    padding: 3px;
  }
  .data_TableHeaderCell {
    display: table-cell;
    vertical-align: top;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    padding: 3px;
    background-color: #6385A6;
    color: #FFFFFF;
  }
  .data_TableWhite {
    background-color: #FFFFFF;
  }
  .data_TableLtBlue {
    background-color: #F3F3FF;
  }
  .data_TableGray {
    background-color: #F3F3F3;
  }
  .data_TableRefLabel {
    display: none;
  }
  .data_TableRefValue {
  }
  
  .data_TableFieldName {}
  .data_TableDataType {}
  .data_TableRequired {}
  .data_TableExplanation {}
}

@media (max-width: 620px)
{
  /* -------- General layout: -------- */

  /* To show items that should only appear on wide screens: */
  .showIfWide {
    display: none;
  }

  /* To show items that should only appear on narrow screens: */
  .showIfNarrow {}
  
  .padIfNarrow {
    padding-left: 12px;
    padding-right: 12px;
  }

  .contentBlock {
    margin: 12px 12px 12px 12px;
  }

  .hMarginAll {
    margin-left: 12px;
    margin-right: 12px;
  }

  .hMarginWide {
    margin-left: 0px;
    margin-right: 0px;
  }

  .vMarginAll {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .vMarginWide {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .topMarginWide {
    margin-top: 0px;
  }

  .layoutTableWide {
    display: block;
    width: 100%;
  }
  .layoutTableCellWide {
    display: block;
  }

  .layoutTableAll {
    display: table;
    width: 100%;
  }

  .layoutTablecellAll {
    display: table-cell;
    width: 50%;
    vertical-align: top;
  }

  .layoutTableFullWidth {
    display: block;
    width: 100%;
  }

  .layoutTablecell {
    display: block;
  }

  .layoutTablecell2columns {
    display: block;
  }

  .layoutTablecellLeft {
    margin-right: 0px;
  }

  .layoutTablecellRight {
    margin-left: 0px;
  }

  .highlightBorderleft {
    padding-left: 16px;
    border-left-width: 3px;
    border-left-style: solid;
  }

  .oneColumn {
    width: 100%;
  }

  .twoColumns {
    width: 100%;
  }

  .font16 {
    font-size: 2.0em;
  }
  .font14 {
    font-size: 1.8em;
  }
  .font12 {
    font-size: 1.6em;
  }
  .font10 {
    font-size: 1.4em;
  }
  .font07 {
    font-size: 1.0em;
  }
  
  /* -------- Tabs: -------- */

  .tabs {
    display: block;
    position: relative;
    width: 100%;
    height: 30px;
    margin-top: 20px;
    border-bottom: 1px solid #666666;
  }

  .tab {
    float: left;
    padding: 0px 8px 0px 8px;
    border-top: 1px solid #666666;
    border-left: 1px solid #666666;
    border-right: 1px solid #666666;
    font-size: 12pt;
    font-weight: bold;
    line-height: 29px;
    text-align: center;
  }
  .tabFirst {
    margin-left: 24px;
  }
  .tabNext {
    margin-left: 8px;
  }
  .tabDefault {
    height: 29px;
    background-color: #DDDDDD;
    cursor: pointer;
  }
  .tabDefault:hover {
    background-color: #FFFFFF;
  }
  .tabSelected {
    height: 30px;
  }
  .tabBar {
    display: block;
    width: 100%;
    height: 6px;
    border-bottom: 1px solid #666666;
  }

  .tabBox {
    display: none;
  }

  .tabBoxSelected {
    display: block;
    width: 100%;
    padding-bottom: 24px;
  }
  
  /* -------- Intro page: -------- */
  
  .intro_Table2Col {
    display: block;
    width: 100%;
  }
  .intro_TableLeftcol {
    display: block;
    width: 100%;
  }
  .intro_TableRightcol {
    display: block;
    width: 100%;
    margin-top: 24px;
  }
  
  .intro_SeeAlso {
    display: block;
    margin: 0px 0px 0px 0px;
    border: 1px solid #CCCCCC;
  }
  
  .intro_SeeAlsoHeader {
    padding: 2px 0px 2px 5px;
    background-color: #6385A6;
    text-align: left;
    color: #FFFFFF;
    font-weight: bold;
  }
  
  .intro_SeeAlsoItem {
    padding: 2px 0px 2px 5px;
    background-color: #EEEEEE;
    border-top: 1px solid #CCCCCC;
    text-align: left;
    color: #004080;
  }
  
  /* -------- Informational table: -------- */
  
  .data_Table {
    display: block;
    margin: 12px;
    border-top: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
  }
  .data_TableRow {
    display: block;
    width: 100%;
    padding: 6px 0px 6px 0px;
    border-bottom: 1px solid #CCCCCC;
  }
  .data_TableCell {
    display: block;
    padding: 3px 6px 0px 6px;
  }
  .data_TableHeaderCell {
    display: none;
  }
  .data_TableWhite {
    background-color: #FFFFFF;
  }
  .data_TableLtBlue {
    background-color: #F3F3FF;
  }
  .data_TableGray {
    background-color: #F3F3F3;
  }
  .data_TableRefLabel {
    float: left;
    width: 70px;
    text-align: right;
    font-weight: bold;
  }
  .data_TableRefValue {
    margin-left: 80px;
  }
  
  .data_TableFieldName {
    
  }
  .data_TableDataType {
    margin-left: 12px;
    font-size: 0.9em;
  }
  .data_TableRequired {
    margin-left: 12px;
    font-size: 0.9em;
  }
  .data_TableExplanation {
    margin-left: 12px;
    font-size: 0.9em;
  }
}