/* ################################################################## */
/* Global Definitions                                                 */
/* ################################################################## */

html {
  margin : 2 1 2 1;
  color: #000000;
  font-size:12px;
}

table {
  font-size: 12px;
}

body {
  background-color:#FFFFFF;
  overflow:hidden;
}

div {
  position:absolute;
}

/* ################################################################## */
/* These Definitions are for Browser Compatibility                    */
/* ################################################################## */

div {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

/* ################################################################## */
/* Elemente in den einzelnen Containern                               */
/* Für die Übersichtsbrowser und die Detailbrowser sind dies          */
/*                                                                    */
/* .heading                                                           */
/* .datatable                                                         */
/* .toolbar                                                           */
/*                                                                    */
/* Diese Anordnung ist hier zunächst mal allgemein definiert.         */
/* Für einzelne Container kann diese dann aber auch mit Stlyes der    */
/* Art .ContainerClass .datatable gezielt überschrieben werden -      */
/*                                                                    */
/* ################################################################## */

.heading {
    background-color:blue;
    color:#FFFFFF;
    height:16px;
    padding-left:5px;
    position:relative;
    width:100%;
}

.toolbar {
    position:absolute;
    right: 15px;
    top:2px;
}

.datatable {
    position:relative;
    top:2px;
    width:98%;
    align:left;
}

.buttonbar {
  z-index:99;
}

/* ################################################################## */
/* Klassen innerhalb der Datentabelle                                 */
/* Folgende Klassen stehen hier zur Verfügung:                        */
/*                                                                    */
/* .oddrow                                                            */
/* .evenrow                                                           */
/* .highlightedRow                                                    */
/* .colhead / .rowlabel (Übersichtsbrowser / Detailansicht)           */
/* .sortLink                                                          */
/*                                                                    */
/* ################################################################## */

.sortLink {
  color:white;
  cursor:hand
}

.datatable td {
  border-right-color: #017BD7;
  border-right:1px solid;
}

.colhead td {
  border:none;
}

th {
  text-align:left;
}

.colhead, .rowlabel {
  color:#FFFFFF;
  background-color:#0A7BD7;
  text-align:left;
}

.evenrow {
  background-color:#F0F0F0;
}

.oddrow {
 background-color:#A2CDF0;
}

.highlightedRow {
  background-color:01589D;
  color:white;
}

.alarm {
  background-color:#00FF00;
}

/* ################################################################## */
/* Anordnung der Container auf dem Bildschirm                         */
/* In der b2b - Demoapplikation sind alle Container gleichberechtigt  */
/* auf oberster Ebene innerhalb des Containers mit der Klasse .top    */
/* ################################################################## */

.top {
  background-color:#FFFFFF;
  cursor:default;
  font-family: Tahoma, Arial;
}

/* ###################################################################*/
/* Menüs                                                              */
/* ###################################################################*/

.menubar {
 width:100%;
 height:92px;
 left: 5px;
 top: 5px;
 right: 5px;
 margin-right: 5px;
 background-image: url(../images/banner.bmp);
 background-repeat: no-repeat;
}


.nav01 {
 position:absolute;
 top:100px;
 white-space:nowrap;
 width:112px;
 background-color:#0176D6;
 height:250px;
 z-index:100;
 border: solid;
 border-width: 1px;
 border-color: #69787F;
 left: 5px;
}

.nav02 {
 top:354px;
 white-space:nowrap;
 width:112px;
 background-color:#0176D6;
 height:250px;
 left: 5px;
 border: solid;
 border-width: 1px;
 border-color: #69787F;
}

/* ################################################################## */
/* One Container only                                             */
/* ################################################################## */

.no-group {
    padding:3px;
    top:100px;
    left:120px;
    width:895px;
    height:500px;
    overflow:auto;
    border: solid #69787F 1px;
    background-color: #F0F0F0;
}

/* ################################################################## */
/* 3 Container                                                        */
/* ################################################################## */

.a-group-1 {
        padding:3px;
 top:100px;
 left:120px;
 width:550px;
 height:250px;
 overflow:auto;
 border: solid #69787F 1px;
 background-color: #F0F0F0;
}

.a-group-2 {
        padding:3px;
 top:354px;
 left:120px;
 width:550px;
 height:250px;
 overflow:auto;
 border: solid #69787F 1px;
 background-color: #F0F0F0;
}

.a-group-3 {
 padding:3px;
 top:100px;
 left:673px;
 width:340px;
 height:504px;
 overflow:auto;
 border: solid #69787F 1px;
 background-color: #F0F0F0;
}

/* ################################################################## */
/* Two Containers Horizontal                                          */
/* ################################################################## */

.b-group-1 {
    background-color:#F0F0F0;
    border:1px solid #69787F;
    height:250px;
    left:120px;
    overflow:auto;
    padding:3px;
    top:100px;
    width:893px;
}

.b-group-2 {
    background-color:#F0F0F0;
    border:1px solid #69787F;
    height:250px;
    left:120px;
    overflow:auto;
    padding:3px;
    top:354px;
    width:893px;
}


/* ################################################################## */
/* Two Containers Vertical                                            */
/* ################################################################## */

.c-group-1 {
    background-color:#F0F0F0;
    border:1px solid #69787F;
    height:504px;
    left:120px;
    overflow:auto;
    padding:3px;
    top:100px;
    width:402px;
}

.c-group-2 {
    background-color:#F0F0F0;
    border:1px solid #69787F;
    height:504px;
    left:524px;
    overflow:auto;
    padding:3px;
    top:100px;
    width:490px;
}


/* ################################################################## */
/* Four Containers, 3 in first row and 1 in second row                */
/* ################################################################## */

.d-group-1 {
    padding:3px;
    top:100px;
    left:120px;
    width:295;
    height:250px;
    overflow:auto;
    border: solid #69787F 1px;
    background-color: #F0F0F0;
}

.d-group-2 {
    padding:3px;
    top:100px;
    left:417px;
    width:295px;
    height:250px;
    overflow:auto;
    border: solid #69787F 1px;
    background-color: #F0F0F0;
}

.d-group-3 {
    padding:3px;
    top:100px;
    left:714px;
    width:300px;
    height:250px;
    overflow:auto;
    border: solid #69787F 1px;
    background-color: #F0F0F0;
}

.d-group-4 {
    padding:3px;
    top:354px;
    left:120px;
    width:895px;
    height:250px;
    overflow:auto;
    border: solid #69787F 1px;
    background-color: #F0F0F0;
}

/* ################################################################## */
/* Five Containers, 2 + 2 + 1                                         */
/* ################################################################## */

.e-group-1 {
    background-color:#F0F0F0;
    border:1px solid #69787F;
    height:250px;
    left:120px;
    overflow:auto;
    padding:3px;
    top:100px;
    width:442px;
}

.e-group-2 {
    background-color:#F0F0F0;
    border:1px solid #69787F;
    height:252px;
    left:564px;
    overflow:auto;
    padding:3px;
    top:100px;
    width:450px;
}

.e-group-3 {
    background-color:#F0F0F0;
    border:1px solid #69787F;
    height:250px;
    left:120px;
    overflow:auto;
    padding:3px;
    top:354px;
    width:442px;
}

.e-group-4 {
    padding:3px;
    top:354px;
    left:564px;
    width:450px;
    height:250px;
    overflow:auto;
    border: solid #69787F 1px;
    background-color: #F0F0F0;
}

.e-group-5 {
    padding:3px;
    top:609px;
    left:120px;
    width:895px;
    height:250px;
    overflow:auto;
    border: solid #69787F 1px;
    background-color: #F0F0F0;
}

.e-group-6 {
    background-color:#F0F0F0;
    border:1px solid #69787F;
    height:310px;
    left:120px;
    overflow:auto;
    padding:3px;
    top:354px;
    width:894px;
}

/* ################################################################## */
/* Four Containers                                                    */
/* ################################################################## */

.v-group-1 {
    background-color:#F0F0F0;
    border:1px solid #69787F;
    height:100px;
    left:120px;
    overflow:auto;
    padding:3px;
    top:100px;
    width:920px;
}

.v-group-2 {
    background-color:#F0F0F0;
    border:1px solid #69787F;
    height:250px;
    left:564px;
    overflow:auto;
    padding:3px;
    top:100px;
    width:450px;
}

.v-group-3 {
    background-color:#F0F0F0;
    border:1px solid #69787F;
    height:186px;
    left:120px;
    overflow:auto;
    padding:3px;
    top:202px;
    width:440px;
}

.v-group-4 {
    background-color:#F0F0F0;
    border:1px solid #69787F;
    height:215px;
    left:120px;
    overflow:auto;
    padding:3px;
    top:390px;
    width:440px;
}

.v-group-5 {
    background-color:#F0F0F0;
    border:1px solid #69787F;
    height:403px;
    left:562px;
    overflow:auto;
    padding:3px;
    top:202px;
    width:478px;
}

.v-group-6 {
    background-color:#F0F0F0;
    border:1px solid #69787F;
    height:450px;
    left:120px;
    overflow:auto;
    padding:3px;
    top:202px;
    width:920px;
}


/* ################################################################## */
/* ShoppingCart                                                       */
/* ################################################################## */

.shoppingCart {
    padding:3px;
    top:354px;
    left:120px;
    width:895px;
    height:250px;
    overflow:auto;
    border: solid #69787F 1px;
    background-color: #F0F0F0;
}

.shoppingCart .datatable {
  top:30px;
}

/* ################################################################## */
/* Menü Styles                                                        */
/* ################################################################## */

/* level 0 inner */

.m0l0iout {
  text-decoration: none;
  padding: 4px;
  color: #FFFFFF;
}

.m0l0iover {
 text-decoration: underline;
 padding: 4px;
 color: #FFFFFF;
}

/* level 0 outer */

.m0l0oout {
 text-decoration : none;
 background: #01589D;
 border-top: 1px solid #FFFFFF;
 border-bottom: 1px solid #FFFFFF;
}

.m0l0oover {
 text-decoration : none;
 background: #01589D;
 border-top: 1px solid #FFFFFF;
 border-bottom: 1px solid #FFFFFF;
}

/* level 1 inner menu left*/

.m0l1iout {
  text-decoration: none;
  padding: 4px;
  color: #000000;
  z-index:100;
}

.m0l1iover {
  text-decoration : none;
  padding: 4px;
  color: #000000;
  z-index:100;
}

/* level 1 outer menu left*/

.m0l1oout {
  text-decoration : none;
  border : 1px solid #FFFFFF;
  background: #80C6FF;
  z-index:100;
}

.m0l1oover {
  text-decoration : none;
  border : 1px solid #FFFFFF;
  background: #01589D;
  z-index:100;
}

/* level 2 inner */

.m0l2iover {
  text-decoration : none;
  padding: 4px;
  color: #000000;
}

/* level 2 outer */

.m0l2oout {
  text-decoration : none;
  border : 1px solid #FFFFFF;
  background: #B44646;
}

.m0l2oover {
  text-decoration : none;
  border : 1px solid #FFFFFF;
  background: #E55A5A;
}

.menubar-style1 {
 background-color: #000066;
 border: thin solid #666666;
 position: absolute;
 height: 30px;
 left: 5px;
 width: 100px;
}