/* 
    Document   : new
    Created on : 15.07.2011, 10:11:27
    Author     : dets
    Description: blaues Thema für ReTCon
*/

:root { 
  display: block;
}

body {
  padding: 0;
  /* für IE8: */
  /* font-size: 12px;
  font-family: Arial, Helvetica, Sans-serif; */
  color: #404040;
  margin: 0; 
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
}

#topdiv {
  background-color: rgba(208, 208, 208, 0.85);
  position: fixed;
  width: 100%;  
  top: 0;
  box-shadow: 2px 2px 10px #b0b0b0;      
}

#clientdiv {
  padding-top: 10px;
}

h4, h3, h2, h1 {
  margin: 10px 0 5px 7px;
  color: #404040;
}

p {
  margin: 0 0 5px 7px;
}

.floating {
  float: left;
}

table.borderless td {
  border-width: 0;
  border-style: none;
}

tr.disabled > td {
  background-color: #d0d0d0 !important;
  color: #ffffff;
  border-width: 1px 0 0 0 !important;
  border-style: solid !important;
  border-color: #c0c0c0;
}

/* workaround für Weimar, damit Zellen nicht transparent sind */
td {
  background-color: #fffff0;   
}


/* neu: Style über even/odd -Selektor, nur wenn im TBODY */
table.displaygrid > tbody > tr:nth-child(even) > td, 
table.displaylist > tbody > tr:nth-child(even) > td,
table.subgrid > tbody > tr:nth-child(even) > td,
span.even {
  background-color: #f8f8f8;    
}

table.displaygrid > tbody > tr:nth-child(odd) > td, 
table.displaylist > tbody > tr:nth-child(odd) > td,
table.subgrid > tbody > tr:nth-child(odd) > td,
span.odd {
  background-color: #d0fff0;    
}

table.displaygrid tr.gridnav > td, 
table.displaylist tr.gridnav > td {
  background-color: #f0f0f0;   
}

table.displaylist td.title, 
table.displaylist tr.title > td, 
table.displaygrid td.title, 
table.displaygrid tr.title > td, div.title {
  text-align: left;
  font-weight: bold;
  background-color: #406380 !important;
  color: #f0f0f0;
  padding: 2px 3px;
}

tr.softred > td {
  background-color: #ffb0b0 !important;
}

tr.yellow > td {
  background-color: #ffff80 !important;
}

tr.orange > td {
  background-color: #ffc080 !important;
}

tr.red > td {
  background-color: #ff8080 !important;  
}

td.marked, 
th.marked, 
tr.marked > td {
  background-color: #ffe4b4 !important;
}

td.head, 
tr.head {
  background-color: #c0c0c0;
}

.orangetext {
  color: #ff6000;
  font-weight: bold;
}

.redtext {
  color: #e00000;
  font-weight: bold;
}

.greentext {
  color: #00a000;
  font-weight: bold;
}

.aquatext {
  color: #404080;
  font-weight: bold;
}

table.displaylist, table.displaygrid, div.dragDiv {
/* Tabelle als Liste bzw. Grid darstellen */
  background-color: #f0f0f0;
  border-style: solid;
  border-width: 2px;
  border-color: #a0a0a0;  
  border-collapse: collapse;
  box-shadow: 2px 2px 10px #b0b0b0;    
  margin: 0 3px 10px 7px;
}

table.displaylist th, 
table.displaylist tr.footer > td {
  color: #404040;
  font-weight: normal;
  text-align: left;
  border-style: none;
  border-width: 0;
  background-color: #e0e0e0 !important;
  padding: 1px 3px 1px 3px;
}

table.displaygrid th, table.displaygrid tr.footer td {
  color: #404040 !important;
  font-weight: normal;
  text-align: left;
  border-width: 0;
  background-color: #e0e0e0 !important;
  padding: 1px 3px 1px 3px;
  border-color: #c0c0c0;
}

table.displaylist td {
  border-width: 0px;
  border-style: none;
  padding: 1px 3px 1px 3px;    
} 

table.displaygrid td {
  border-style: solid;
  border-width: 0px 0px 1px 1px;
  border-color: #c0c0c0;
  padding: 1px 3px 1px 3px;
}

table.displaygrid td.head {
  background-color: #e0e0e0;
  color: #404040;
  font-weight: normal;  
}

table.subgrid {
  width: 100%;
  border-width: 0;
  border-style: solid;
  border-collapse: collapse;
  border-color: #c0c0c0;
}

table.subgrid td {
  padding: 1px 3px;  
  border-width: 0 0 1px 1px;
  border-style: solid;
  border-color: #c0c0c0;
}

table.subgrid td:first-child {
  border-width: 0 0 1px 0;  
}

table.subgrid tr:last-child td {
  border-bottom-width: 0px;  
}

table.apwerte td {
  overflow: hidden;
  max-width: 75px;
}

.w1 {
  width: 250px;
}

.w1a {
  width: 275px;    
}

.w2 {
  width: 510px;
}

.w3 {
  width: 770px;
}

.w4 {
  margin-right: 8px !important;
}

.w5 {
  width: 1030px;
}

.fullsize {
  margin: 0 0 10px 0!important;
  width: 100%;
}


table.dialog {
  border-width: 2px;
  border-style: solid;
  border-color: #a0a0a0;
  /* margin-bottom: 5px; */
  box-shadow: 2px 2px 10px #b0b0b0;      
  margin: 0 3px 10px 7px;  
}

table.dialog th {
  text-align: left;
  font-weight: normal;
}

table.dialog tr.title td {
  background-color: #c0e0c0;
}

input[type=checkbox] {
  margin-top: 0;
  vertical-align: middle;
} 

/* wg Tests mit Chromium und Epiphany
select {
  background-color: #ffffff;
  border-width: 1px;
  border-color: #808080;
  border-style: solid;
  border-radius: 4px;
} */
/*
button {
  background-color: #d0d0d0;
  color: #000000;
  border-style: groove;
  border-radius: 4px;
} 

div.GroupHeader {
  border-width: 1px 0 1px 0;
  border-style: solid;
  border-color: #808080;
  background-color: #e0ffe0;  
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  padding: 10px;  
  box-shadow: 2px 2px 10px #b0b0b0;
  margin-bottom: 5px;
}

div.DeviceHeader {
  border-width: 1px 0 1px 0;
  border-style: solid;
  border-color: #808080;
  background-color: #e0f0e0;  
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  padding: 7px 0 0 0;  
  box-shadow: 2px 2px 10px #b0b0b0;    
  margin-bottom: 5px;
} 

div.CharacteristicsHeader {
  border-width: 0px;
  border-style: none;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  padding: 4px;  
} */

div.explorer {
  width: 240px;
  top: 0px;
  left: 0px;
  background-color: #ffffe0;
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color: #c0c0c0;  
  overflow: scroll;
  height: 100%;
  position: absolute;
}

ul {
  padding: 0 0 0 15px;
  font-size: 12px;
  white-space: nowrap;
  margin: 0 10px 10px 7px;
}

/* List-Styles für die Baumanzeige */
ul.treeview {
  list-style-type: none;
  padding: 0;
  margin-top: 10px;  
  margin-right: 0px;  
}

ul.treeview ul {
  margin: 0 0 0 1px;
}

ul.treeview li {
  list-style-type: none; 
  margin-top: -1px;
  margin-bottom: -1px;
}

ul.treeview li img {
  padding: 0;
  margin: 0;
  vertical-align: -1px;
}

ul.treeview img.node {
  cursor: pointer;
}

ul.treeview input[type=checkbox], input[type=radio] {
  vertical-align: text-bottom;
  margin: 1px 2px 1px 2px;
}

div.infopanel ul li {
  white-space:normal;    
}


li.directory {
  list-style-image:url(/grafik/folder-documents.png);
  margin-left: 10px;
}

li.counterfile {
  list-style-image:url(/grafik/text-x-generic.png);
  margin-left: 10px;  
}

li.gzfile {
  list-style-image:url(/grafik/package-x-generic.png);
  margin-left: 10px;  
}

li img {
  margin-right: 5px;  
}

li span {
/*  cursor: pointer; */
}

.btnTable {
  font-size: 12px;
  width: 100px;
  height: 22px;
}

/* Tests für neue Buttondesigns */
/* erstmal auskommentiert, da Webkit eigene CSS-Parameter dafür hat
.btnTable {
  border-width: 1px;
  border-style: solid;
  border-color: #a0a0a0;
  border-radius: 3px 3px 3px 3px;  
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 5px rgba(0, 0, 0, 0.25);    
  background-image: linear-gradient(to bottom, #e0e0e0, #b0b0b0);      
}

.btnTable:hover {
  background-image: linear-gradient(to bottom, #f0f0f0, #c0c0c0);      
}

.delete {
  background-color: #ff8080;
  background-image: linear-gradient(to bottom, #e0c0c0, #e08080);  
}

.delete:hover {
  background-image: linear-gradient(to bottom, #ffd0d0, #ff9090);    
}

.add {
  background-color: #8080ff;
  background-image: linear-gradient(to bottom, #c0c0e0, #a0a0e0);    
}

.add:hover {
  background-image: linear-gradient(to bottom, #d0d0ff, #9090ff);    
}

.btnTable:disabled {
  color: #e0e0e0;
  background-image: linear-gradient(to bottom, #e0e0e0, #c0c0c0);  
} */
/* Ende Tests */


/* Sortierbutton */
th button.btnSort {
  width: 14px;
  height: 18px;
  padding: 0;
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
  border-color: #adadad;
  margin: 0 0 0 2px;  
  background-image: linear-gradient(to bottom, #e4e4e4, #c8c8c8);
  box-shadow: inset 0px 0px 2px #ffffff;  
} 

/* Grafik im Sortierbutton */
th button.btnSort img {
  padding: 0;
  position: relative;
  top: -3px;  
  left: 2px;
} 


th button.btnSort:hover {
  background-image: linear-gradient(to bottom, #fbfcfd, #d0d8df);
}

th button.btnSort:disabled {
  background-color: #f0fff0;
  background-image: none;
  box-shadow: none;  
} 

.edTimepicker, .edTimeEdit {
  width: 60px;    
}

/* JQuery-Tooltip ------------------------------------------------------------*/
.ui-tooltip { /* Klasse des Tooltip-Popups */
  border-color: #406380 !important; 
  /* border-color: #ffd000 !important; */
  /* border-color: #40805c !important; */
}

a.tooltip { /* Klasse des Tooltip-Links */
  color: #000000;
  text-decoration: none;
  vertical-align: middle;
}

a.tooltip:visited {
  color: #000000;
  text-decoration: none;
}

a.tooltip img {
  margin-left: 3px;
  vertical-align: middle;
  border-width: 0;
}

/*----------------------------------------------------------------------------*/
.divInfo {
  background-color: #ffffc0;
  border-width: 2px;
  border-color: #a0a0a0;  
  border-style: solid;
  box-shadow: 2px 2px 10px #b0b0b0;    
  float: left; 
  padding: 5px 20px 5px 25px;
  margin: 0 3px 10px 7px;
  display: none; 
  background-image: url(/grafik/dialog-information.png);
  min-height: 20px;
  background-repeat: no-repeat;
  background-position: left center;
}

/* passt die Breite für DIVs an die von Tabellen mit Breite w2 an */
div.w2 {
  width: 461px;    
}

.divAlert {
  background-color: #ff8080;
  border-width: 2px;
  border-color: #a0a0a0;  
  border-style: solid;
  box-shadow: 2px 2px 10px #b0b0b0;    
  text-align: center;
  clear: left;
  padding: 5px;
  margin: 0 3px 10px 7px;
}

/* div für Inhalte mit Klasse fullsize */
div.fullwidth {
  margin: 0 10px 0 7px;   
}

.ui-tooltip h4 {
  margin: 0 0 3px 0;
  font-size: 11px;
}

/* klickbare Spans */
.clickable {
  color: #004080;
  cursor: pointer;
}

.clickable:hover {
  text-decoration: underline;
}

/* Text, der den Namen eines Elements beinhaltet */
em {
  font-style: italic;
  color: #000000;
}

tr.title em {
  color: #ffffff;
}

img.info {
  margin-left: 3px;
  cursor: pointer;
  vertical-align: bottom;
  opacity: 0.5;
  width: 16px;
  height: 16px;  
}

img.info:hover {
  opacity: 1;
}

img.details, img.allsubrows {
  margin: 0 3px 0 0;
  background-color: #ffffff;
  border-style: solid;
  border-color: #808080;
  border-width: 1px;
  cursor: pointer;
  vertical-align: bottom;    
  opacity: 0.5;
}

img.details:hover, img.allsubrows:hover {
  opacity: 1;  
}

img.icon {
  width: 16px;
  height: 16px;
  margin-bottom: -3px;
}

/* zur unterschiedlichen Darstellung von Elementen in einer Tabellenzelle */
span.item {
  float: left;
  border-style: solid;
  border-width: 1px 0 0 1px;
  border-color: #e0e0e0;
  width: 118px;  
  padding: 1px;
}

.btnTool {
  width: 50px;
  height: 20px;
  font-size: 11px;
}

/* Paragraph zur Anzeige von Hilfstexten, die per jQuery eingeblendet werden */
p.infopanel {
  background-color: #fffff0;
  padding: 3px;
  display: none;
  border-style: solid;
  border-width: 1px;
  border-color: #a0a0a0;
  width: 502px;
}

/* DIV für Hilfetexte, die immer eingeblendet sind */
div.infopanel {
  background-color: #fffff0;
  padding: 2px 3px;
  margin: 0 3px 10px 7px;
  border-style: solid;
  border-width: 1px;
  border-color: #a0a0a0;  
}

div.infopanel > h4 {
  margin-left: 0;
  margin-top: 1px;
  color: #808080;
}

/* OpenLayers: Popup-Fenster schattieren und leicht nach rechts verschieben */
.olPopup {
  margin-left: 5px;
  box-shadow: 2px 2px 10px #404040;      
}

.olPopupContent {
  background-color: #ffffe0;
}

.olPopupContent h4 {
  margin: 2px 0 2px 0;
  cursor: pointer;
}

.olPopupContent h4:hover {
  text-decoration: underline;  
}

.olPopupContent button {
  position: absolute; 
  top: 3px; 
  right: 3px; 
  padding: 0; 
  font-size: 10px; 
  height: 18px; 
  width: 18px;
}

polyline {
  box-shadow: 2px 2px 10px #404040;        
}

/* selbstdefinierte Klassen für LayerSwitcher */
/*
.layerSwitcher {
  width: 170px;
  top: 30px;
  right: 0;
  font-size: 12px;
  font-family: Arial, Helvetica, Sans-serif;  
  font-weight: normal;
  color: #ffffff;
  background-color: #606060;
  opacity: 0.8;
  border-radius: 5px 0 0 5px;    
  padding: 3px 0 5px 0;    
  position: absolute;
  display: none;
  overflow: hidden;
} */

/* Titel des LayerSwitchers */
/*
.layerSwitcher h4 {
  margin: 0 0 5px 2px;
  color: #ffffff;      
} */

/* Icon zum Verbergen */
/*
.layerSwitcher h4 img {
  margin: 2px 2px 0 0;
} */

/* Anlagengruppenliste */
/*
.layersList {
  font-weight: bold;
  margin: 0 0 0 2px;
  overflow-y: auto;
  overflow-x: hidden;
  color: #d0d0d0;
  padding-left: 5px;  
  width: 160px;
  position: absolute;
} */

/* einzelne Anlagengruppe */
/*
.layersList li {
  font-weight: normal;
  list-style-type: none;
  color: #ffffff;
} */

/* Checkbox der Anlagengruppe */
/*
.layersList li input {
  margin-left: 0;     
} */

/* Steuerelement zum Anzeigen des LayerSwitchers */
/*
.layerSwitcherHandle {
  top: 30px;
  right: 0;
  height: 21px;
  width: 20px;
  position: absolute;
  background-color: #606060;
  opacity: 0.8;
  border-radius: 5px 0 0 5px;    
} */

/* Icon zum Vergrößern des layerSwitchers */
/*
.layerSwitcherHandle img {
  margin: 4px 3px 3px 3px;    
} */

/* Kalender *******************************************************************/
div.calendar {
  border-style: none;
  border-width: 0;
  height: 185px;
}

table.calendar {
  border-style: solid;
  border-width: 2px;
  border-color: #a0a0a0;  
  border-collapse: collapse;
  box-shadow: 2px 2px 10px #b0b0b0;    
  margin: 7px 3px 10px 7px;
  font-size: 12px;
}

table.calendar>thead>tr>td {
  background-image: linear-gradient(to bottom, #e0e0e0, #b0b0b0);
  background-repeat: repeat no-repeat;
  /*background-color: #c0c0c0;*/
  color: #f0f0f0;
  font-weight: bold;
  height: 20px;
}

/* Wochentagsnamen */
table.calendar tr.days > td {
  background-color: #808080;
  font-size: 8px;      
  height: 12px;
  color: #e0e0e0;
  border-color: #a0a0a0;
}

table.calendar td {
  text-align: center;  
  border-width: 1px;
  border-style: solid;
  border-color: #d0d0d0;
  font-weight: bold;
  color: #606060;
}

table.calendar > tbody > tr > td:hover {
  background-color: #ffffff;    
  color: #406380;
  border-color: #808080;
}

table.calendar tr.days > td:hover {    
  background-color: #808080;
  color: #e0e0e0;
  border-color: #a0a0a0;
}

table.calendar > tbody td {
  width: 22px;
  height: 18px;
  vertical-align: middle;
}

/*
table.calendar > tbody > tr > td:nth-child(1) {
  color: #e04040;  
} */

.startSun > tbody > tr > td:nth-child(1) {
  color: #e04040;      
}

.startMon > tbody > tr > td:nth-child(7) {
  color: #e04040;      
}

table.calendar > tbody > tr > td.marked {
  background-color: #d0fff0 !important;  /* der Tag besitzt Daten */
}

/* benutzt für Kalender in Anlagengrid */
.innerTable {
  margin: 0;
  padding: 0;
  width: 100%;
  border-collapse: collapse;
}
  
table.innerTable > body > tr > td {
  margin: 0;
  text-align: center;
  vertical-align: top;
}


/* Link "mehr..." */
a.linkMore {
  color: #000080;    
  text-decoration: none;
}

a.linkMore:hover {
  text-decoration: underline;    
}

/* Tabellenzeile bei Revision */
tr.revision {
  color: #808080;   
}

tr.revision .clickable {
  color: #808080;  
}

tr.revision .clickable:hover {
  color: #408040 !important;  
}


/* Seitenmenü */
#dlgPageSettings li:hover {
  background-color: #87abc9;
  cursor: pointer;
}