/* Desktop */
@media only screen and (min-width: 986px) {

  .result-header {
    min-height: 58px;
    padding: 2px 10px 2px 10px;
  }

  .result-controls {
    float: right;
  }

  #result-title-name {
    float: left;
    margin-top: 7px;
  }

  .result-title .image {
    float: left;
    margin-top: 10px;
    margin-right: 10px;
  }

  .result-controls .result-control-root.vertical-align-normal {
    margin-top: 15px;
  }

  .result-control-root.vertical-align-small {
    margin-top: 20px;
  }
}

/* Tablets */
@media only screen and (max-width: 985px) {

  .result-header {
    min-height: 50px;
    padding: 2px 0 2px 0;
  }

  .result-title {
    margin-left: 9px;
  }

  .result-controls {
    float: left;
  }

  #exception .result-header,
  .objekt-seite .result-header {
    width: auto;
  }

  #exception .result-controls {
    float: none;
  }

  /* Title-Image bei kleinen Seiten nicht anzeigen. */
  .result-title .image,
  #result-title-name .category {
    display: none;
  }

  #result-title-name {
    margin-top: 16px;
  }

  .result-controls .result-control-root.vertical-align-normal {
    margin-top: 9px;
  }

  .result-control-root.vertical-align-small {
    margin-top: 14px;
  }
}

.result-header {
  clear: both;
  overflow: hidden;
  max-width: 976px;
  margin: 0px;
}

.objekt-seite .result-header {
  background-color: #7FC6CC;
}

/* Sonderlocke Objektseite (z.B. Einzeltierseite, Eutergesundheit, ...). */
/* Die Einzeltierseite besitzt im Gegensatz zu anderen Seiten eine tuerkise */
/* Result-Header-Backgroundcolor. Beim Aufklappen eines Tabs wird die Einzeltierseite */
/* breiter als die ansonsten gesetze max-width und die tuerkise Hintergrundfarbe */
/* wuerde nicht den gesammten Bereich ausfuellen. Durch Zuruecksetzen der max-width */
/* fuellt der result-header den gesammten Bereich aus. */
/* TODO-strenkel-17-01-2014: Alternativ koennte man um den result-header ein weiteres */
/* div gelegen, dass die Hintergrundfarbe traegt und sich in der Weite anpasst. */
.objekt-seite .result-header {
  max-width: 100%;
}

.objekt-seite .einzeltier-result-header {
  max-width: 976px;
}

.result-title {
  float: left;
}

.result-title .category {
  font-size: 14px;
  display: block;
  margin-bottom: 5px;
}

.result-title .term {
  font-size: 20px;
}

.blaetterfunktion {
  float: left;
  margin-right: 10px;
}

.blaetterfunktion .imageBlaettern {
  display: block;
}

.result-title .categoryEinzeltier {
  font-size: 14px;
}

.result-title .categoryEinzeltierExtension {
  font-size: 14px;
  color: #ba8700;
  font-weight: bold;
}

.block {
  display: block;
  margin-bottom: 5px;
}

.result-title .subterm {
  font-size: 14px;
  height: 18px;
  padding-left: 5px;
}

.result-title .ui-panelgrid-cell.title-icon,
.result-title .ui-panelgrid-cell.title-info {
  padding: 0;
}

.result-controls .result-control {
  font-size: 13px;
  min-width: 100px;
}

.result-control-root {
  float: left;
  margin-left: 10px;
}

.result-control-root.new-group {
  margin-right: 20px;
}

.result-controls .min-control {
  margin-top: 2px;
}

.result-controls .max-control {
  margin-top: 4px;
}

.result-controls .minmax-label {
  float: left;
  width: 35px;
}

.result-controls .ui-selectonemenu {
  margin-top: 2px;
}

/* Mobile Sortier-Selectbox */
.result-controls .sort-select {
  width: 120px;
  height: 31px;
}

/* Mobile Sortier-Selectbox: Option-Höhe vergroessern. */
.result-controls .sort-select option {
  margin-top: 6px;
  margin-bottom: 6px;
}

.result-controls .sort-select-direction {
  height: 29px;
}

.result-controls .sort-select-direction .ui-button-text {
  padding: 0.3em 1em 0.3em 1.3em;
}

/* Farblich Hervorhebung eines DataTable-Textes orange. */
/* Es muss dazu im im p:column - tag die styleclass 'orangefont' angegeben werden. */
.einzeltier-result-header .orangefont {
  color: #ba8700;
}