/*
 * structure layout
 *

  div.all
     +-- div.kwk
     +-- div.logo
     +-- div.chapter
     |      +-- div.left
     |      +-- div.right
     +-- div.head
     |      +-- div.menu
     +-- div.content
     |      +-- div.shadow-left-right-top
     |      +-- div.info
     |      +-- div.headlines
     |      +-- div.clear
     +-- div.push
  div.footerall
    +-- div.footer

*/

/*
 * used colors
 *    rrggbb
 * ------------------------------------
 *   #10427a      KWK blue (dark blue)
 *   #6e85b5      --"--    (+  white)
 *   #a1aed0      --"--    (++ white)
 *   #d3d3d3      grey     (83% white)
 */


/*
 * margin, padding width etc
 */

body {
  margin:           0;
  text-align:       center;
  min-width:        50.75em;  /* = 812px when 1em = 16px */
  /*background-color: #f7f7f7;*/
  background-color: #f0f0f0;
}

div.all,
div.kwk,
div.logo,
div.chapter,
div.menu,
div.right,
div.left,
div.head,
div.content,
div.info,
div.footer,
div.shadow-left-right-top {
  margin:  0;
  border:  0;
  padding: 0;
}

.clear {
  clear: both;
}

div.all {
  margin:     0 auto;
  text-align: left;
  width:      50.75em;  /* = 812px when 1em = 16px */
  background:    #10427a url('../images/shadow-top-down-left.png') repeat-y 50em 0;
}

div.top {
  /*background-color: #10427a;*/
}

div.top a {
  text-decoration: none;
}

/* for FireFox */
div.top a:-moz-any-link img {
  outline-style: none;
  outline-width: 0;
  border:        none;
}

div.kwk, div.logo {
  float:      right;
  margin-top: 6em;  /* = 96px when 1em = 16px */
}

div.kwk {
  /*width: 45.5em;*/
  text-align: right;
  margin-bottom: -1.1em;
}

div.kwk span {
  color:       white;
  font-size:   3em; /* 2.7em; */
  font-weight: 600;
  line-height: 1.2em; /* 1em; */
  overflow:    visible;
  position:    relative;
  top:         -0.2em;
}

div.logo {
  width:        4.75em;
  height:       3.3em;  /* 4.0em; */
  margin-right: 0.6em;
}

div.logo img {
  margin-left: 0.4em;
  margin-top:  -0.05em; /* 0.2em; */ 
  width:       3.125em;  /* 3.125em * 16px = 50px */
}

div.chapter,
div.menu {
  float: left;
}

div.chapter {
  position: relative;
  z-index:  1;
  width:    45.25em;
}

div.right {
  float:       right;
  clear:       right;
}

div.left {
  float:       left;
  clear:       left;
  margin-left: 1em;
}

div.head {
  position:         relative;
  clear:            both;
  background-color: #d3d3d3;
  width:            50em;       /* = 800px when 1em = 16px */
  height:           10.5625em;  /* = 169px when 1em = 16px */
}

div.head img {
  position: absolute;
  top:     0;
  left:    0;
  width:   100%;
  margin:  0;
  border:  0;
  padding: 0;
}

div.menu {
  position:         absolute;
  z-index:          2;
  top:              0;
  overflow:         hidden;
  width:            45.55em; /* 45.8em; */
  padding-right:    4.3em;
  /*background-color: white;
  opacity:          0.6;                /* CSS3 standard */
  /*filter:           alpha(opacity=60);  /* for IE */
  /*-moz-opacity:     0.6;                /* for Mozilla */
}

div.menu div.right {
  background-color: white;
  opacity:          0.6;                /* CSS3 standard */
  filter:           alpha(opacity=60);  /* for IE */
  -moz-opacity:     0.6;                /* for Mozilla */
  padding-left:     0.3em;
  padding-right:    0.3em;
}

div.content {
  /*position:      relative;*/
  width:         49.937em;
  background:    white url('../images/content-columne.png') repeat-y 64% 0px;
  /*overflow:      hidden;*/
  border-left:   0.063em solid #606060; /* = 1.008px when 1em = 16px */
  /*border-right:  0.063em solid #ffffff; /* = 1.008px when 1em = 16px */
  /*border-bottom: 0.063em solid #ffffff; /* = 1.008px when 1em = 16px */
}

div.shadow-left-right-top {
  position:   relative;
  z-index:    1;
  clear:      both;
  height:     0.5em;  /* = 8px when 1em = 16px */
  background: transparent url('../images/shadow-left-right-top.png') repeat-x 0.3em 0em;
}

div.info {
  float:         left;
  width:         26.104em;  /* = 422.992px = 64% * 50em - 0.063em - 4.5em - 1.333em */
  padding-left:  4.5em;
}

div.headlines {
  float:         right;
  width:         12.436em; /* = 198.992px = 36% * 50em - 0.063em - 1em - 4.5em */
  padding-right: 4.5em;    /* = 72px */
}

div.info,
div.headlines {
  margin-top:    0.39em;
  margin-bottom: 3em;
}


div.footer {
  width:            49em;
  color:            white;
  clear:            both;
  /*margin:           0 auto;*/
  /*height:           0.75em;*/
  background-color: #10427a;
  padding-left:     1em;
  padding-top:      0.63em;
  padding-bottom:   1.5em;
  /*text-align:       left;*/
}

div.footer span {
  /*margin-top:   0.84em;*/
  font-size:    0.75em;
  font-weight:  400;
}





/* this is for my special friend IE
   this stupid thing doubles the left-margin of div.left
   - don't know why - do you Bill? - do you? hello...
*/
/*???* /
* html div.left {
  margin-left: 48px;
}*/

/* MS did not read the css specifications... */
/***
* html td.content {
  width: 61%;
}

* html td.headlines {
  width: 39%;
}
***/



/*
 * fonts
 */

div.content {
  font-family: Verdana, Arial, sans-serif;
}

div.kwk,
div.logo,
div.chapter,
div.menu,
div.footer,
div.content h1,
div.content h2,
div.content h3,
div.content a,
div.content p.slogan {
  font-family: Helvetica, Arial, sans-serif;
}

/*
 * colors & text formating
 */


/*
 * font sizes of content
 */

div.content p,
/*div.content dd,*/
/*div.content dt,*/
div.content ul,
div.content dl,
div.content table {
  font-size: 0.7em;
}

div.content p table {
  font-size: 1em;
}

div.content h1,
div.content h2,
div.content h3,
div.content p.slogan {
  font-size: 0.77em;
}

div.content ul ul {
  font-size: 1em;
}

h1,
div.chapter,
div.menu,
div.footer {
  text-transform: uppercase;
}

div.content p,
div.content dd {
  text-align: justify;
}

div.content p.slogan {
  font-style:   italic;
  font-weight:  400;
  color:        #10427a;
  margin-left:  1em;
  margin-right: 1em;
  text-align:   left;
}

div.content ul {
  padding-left: 2em;
}

div.content li {
  margin-bottom: 0.35em;
}

div.content h1, h2, h3 {
  font-weight: 600;
}

div.content h1 {
  margin-top:    0.875em;
  margin-bottom: 0.875em;
}

div.content h2, h3 {
  margin-top:    2em;
  margin-bottom: 0.875em;
}


/*
div.content h2 {
}

div.content h3 {
}
*/

div.content dt {
  clear:       left;
  width:       auto;
  font-weight: 600;
}

div.content dd {
  clear: right;
}

div.content ul,
div.content dd {
  margin-bottom: 0.5em;
}


div.content img {
  /*display:        inline;*/
  /*clear:          both;*/
  vertical-align: text-top;
  border:         0;
  margin:         0;
  padding:        0;
  margin-right:   1em;
  margin-bottom:  0.5em;
}

div.content img.map {
  width:   25em;
  margin:  0;
  border:  0;
  padding: 0;
}

div.content p.map {
  /*font-size: 0.7em;*/
  margin: 0;
  text-align: center;
}

div.content img.flow {
  clear: none;
  float: left;
  width: 14.3em;
}


a.img-enlarge {
  position:        relative;
  text-decoration: none;
}

a.img-enlarge img {
  /*z-index:         0;*/
  clear: none;
  float: left;
  width: 14.3em;
}

a.img-enlarge img.portrait {
  width: 10.725em;
}

a.img-enlarge img.wide {
  width: 28.6em;
  clear: right;
}

a.img-enlarge span {
  position:        absolute;
  float:           left;
  border:          0;
  padding:         0;
  margin:          6px 0 0 6px;
  left:            -1300px;
  visibility:      hidden;
  text-decoration: none;
  background:      transparent url('../images/shadow-right-bottom.png') no-repeat bottom right;
  /*border:    1px dashed red; /* */
}

a.img-enlarge span img {
  /*z-index:         1;*/
  display:  block;
  width:    30em;
  position: relative;
  right:    6px;
  bottom:   6px;
  margin:   0;
  border:   0;
  padding:  0;
}

a.img-enlarge span img.portrait {
  width: 22.5em;
}

a.img-enlarge span img.wide {
  width: 60em;
}

/*
a.img-enlarge:link,
a.img-enlarge:visited,
a.img-enlarge:hover,
a.img-enlarge:active,
a.img-enlarge:link span,
a.img-enlarge:visited span,
a.img-enlarge:hover span,
a.img-enlarge:active span,
a.img-enlarge:link span img,
a.img-enlarge:visited span img,
a.img-enlarge:hover span img,
a.img-enlarge:active span img {
  border: 0;
}
*/

/* for FireFox */
a.img-enlarge:-moz-any-link:focus {
  outline-style: none;
  outline-width: 0;
  border:        none;
}

a.img-enlarge:hover {
  background-color: transparent;
  z-index:          3;
  border:           none;
}

a.img-enlarge:hover span {
  visibility: visible;
  top:        -1.5em;
  left:       -16em;
}

a.img-enlarge:hover > img {
  visibility: hidden;
}


a.img-enlarge:hover span.portrait {
  left: -12.425em;
}

a.img-enlarge:hover span.wide {
  top:  -1.1em;
  left: -32em;
}

div.content hr {
  margin-top:    0em;
  /*border-top:    0.1em solid #d3d3d3;*/
  border: none;
  background: none;
  margin-bottom: 2em;
}

.red {
  text-align: center;
  font-size:  0.75em;
  color:      red;
}

table.form {
  width: 100%;
  border-spacing: 0;
  padding-right: 4px;
}

/* table without any space */
table.woas,
table.woas100 {
  border-collapse: collapse;
  border-spacing:  0;
}

table.woas100 {
  width: 100%;
}

table.woas td,
table.woas100 td {
  padding: 0;
}

/*
table.form tr {
  position: relative;
}
*/

td.input {
  margin-right: 4px;
}


input.w100,
textarea.w100 {
  width: 100%;
}

/*
input.right {
  /*position: absolute;
  right: 0;* /
}
*/

div.left a {
  font-weight: 400;
}

div.right a {
  font-weight: 900;
}

div.chapter a:link,
div.chapter a:visited,
div.chapter a:hover,
div.chapter a:active,
div.head    a:link,
div.head    a:visited,
div.head    a:hover,
div.head    a:active {
  text-decoration: none;
}

div.info      a:link,
div.headlines a:link {
  color: #10427a;
}

div.chapter a:link,
div.chapter a:visited,
div.chapter a:hover,
div.chapter a:active,
div.chapter {
  color: #a1aed0;
}

div.head a:link,
div.head a:visited,
div.head a:hover,
div.head a:active,
div.head {
  color:  #6e85b5;
}

div.chapter a.light:link,
div.chapter a.light:visited,
div.chapter a.light:hover,
div.chapter a.light:active {
  color: #ffffff;
}

div.head a.light:link,
div.head a.light:visited,
div.head a.light:hover,
div.head a.light:active {
  color:  #10427a;
}

div.chapter a:hover,
div.chapter a:active {
  color: #ffffff;
}

div.head    a:hover,
div.head    a:active {
  color: #10427a;
}

div.footer a:link,
div.footer a:visited,
div.footer a:hover,
div.footer a:active,
div.footer {
  color: white;
}

/*
div.chapter a:hover,
div.head    a:hover,
div.footer  a:hover {
  text-decoration: underline;
}*/

/*
 * headlines styles...
 */

a.pdf {
  background:   transparent url('../images/icons/pdf.png') no-repeat left 4px;
  padding-left: 16px;
}

a.gmaps {
  background:   transparent url('../images/icons/gmaps.png') no-repeat left 4px;
  padding-left: 16px;
}

div.headlines p {
  display: block;
  text-align:   left;
}

div.headlines p a img {
  border:  0 none;
  margin:  0;
  padding: 0 0.5em 0.25em 0;
  float:   left;
}


/*
 * start-debuging
 * to stop debug remove this end-comment ---> * /

div.info {
  border: 1px dashed green;
}

div.headlines {
  border: 1px dashed red;
}

/* end-debugging */