/* 
file: tfb.css 
author: Andreas Bosshard, 2004-12-12
Styles for toolsforblinds.ch homepage

Note: This style sheet works with absolutely positioned elements.
This allows to have a 'visual order' that is different from an 'aural
order'. With the div elements in the correct order, a screenreader
will first read the content, then the navigation. Visually the
navigation is on the left and the content on the right, with a header
on top of both. The browser must support CSS 2 to properly display the
pages.

Note: The px positioning is ugly. But I could not get consistency
between browsers with em or %.

*/

/* Body formatting
   Change background color with each page - So Stefan can see if something happened */

body {
  border: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  font-size: 100.01%;
  font-family: verdana, geneva, arial, helvetica, sans-serif;
}

p {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 100%;
  margin: 0px 0px 0px 0px;
}
/* The three absolutely positioned div elements that build the page:
   header, navigation, content */

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 75px;
  overflow: hidden;
}

#navi {
  position: absolute;
  top: 100px;
  left: 0px;
  margin: 10px;
  border: 2px solid black;
  padding: 8px;
  width: 210px;
  background: white;
  line-height: 1.1;
  overflow: hidden;
  list-style-type: none;
}

#navi ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
} 
/* steuert ganzen Navigationsbereich */
#navi li {
        padding: 5px 0 2px 2px; 
        font-size: 95%;
        font-family: verdana, arial, helvetica, sans-serif;
        color: #333333; /* dunkelgrau */
        text-decoration: none;   
}
/* steuert Eigenschaften jedes einzelnen Links*/
#navi li a:link {
        background-color: #FFFFFF; /* weiss */
        color: #333333; /*dunkelgrau */
        font-weight: normal;   
} 

#navi li a:visited  {
         background-color: #FFFFFF; /* weiss */
       color: #333333; /*dunkelgrau */
         font-weight: normal;   
}


#navi li a:hover {
        background-color: #333333; /* dunkelgrau */
        color: #ffffff; /* weiss */ 
        font-weight: bolder;
        text-decoration: none;
} 

#navi li.CUR a{
      background-color: #FFFFFF; /* weiss */
      color: #333333; /*dunkelgrau*/
      font-weight: bolder;
}

/* zweite Navigations-Ebene*/
#navi ul ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
} 
#navi li li {
        padding: 5px 0 2px 15px; 
        font-size: 90%;
        font-family: verdana, arial, helvetica, sans-serif;
        color: #ffffff; /* dunkelgrau */
        text-decoration: none;
}
#navi li li a:link {
        background-color: #FFFFFF; /* weiss */
        color: #333333; /*dunkelgrau */
        font-weight: normal; 
}

#navi li li a:visited {
         background-color: #FFFFFF; /* weiss */
       color: #333333; /*dunkelgrau */
         font-weight: normal;   
}

#navi li li a:hover {
        background-color: #ffffff; /* weiss */
        color: #333333; /* dunkelgrau */ 
        font-weight: bolder;   
}

#navi li li.CUR a{
      background-color: #ffffff; /* weiss */  
      color: #333333; /* dunkelgrau */ 
      font-weight: bolder;
} 

/* dritte Navigations-Ebene*/
#navi ul ul ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
} 
#navi li li li{
        padding: 5px 0 2px 15px; 
        font-size: 90%;
        font-family: verdana, arial, helvetica, sans-serif;
        color: #ffffff; /* dunkelgrau */
        text-decoration: none;
}
#navi li li li a:link {
        background-color: #FFFFFF; /* weiss */
        color: #333333; /*dunkelgrau */
        font-weight: normal; 
}

#navi li li li a:visited  {
         background-color: #FFFFFF; /* weiss */
         color: #333333; /*dunkelgrau */
         font-weight: normal;   
}

#navi li li li a:hover {
          background-color: #ffffff; /* weiss */
          color: #333333; /* dunkelgrau */ 
          font-weight: bolder;   
} 

#navi li li li.CUR a{
      background-color: #ffffff; /* weiss */  
      color: #333333; /* dunkelgrau */ 
      font-weight: bolder;
}

#content {
  position: absolute;
  top: 75px;
  left: 250px;
  margin: 0px;
  padding: 20px;
  width: auto;
  /*border: thin solid red;*/
}

label {
  width: 150px ;
  float: left;
}


.csc-mailform {
  width: 750px;
}

/* Stuff that goes into the header */

.logoheader {
  position: absolute;
  top: 17px;
  left: 20px;
  font-weight: bold;
  font-size: 20px;
}

img.wave {
  position: absolute;
  top: 20px;
  right: 0px;
}

.moddate {
    position: absolute;
    left: 20px;
    bottom: 10px;
    font-size: 10px;
}


/* Information for screen readers that should not be visible on the screen */

.hideaway {
  position: absolute;
  left: -300%;
}

/* some formatting for elements in content div */

h1 { font-family: verdana, arial, helvetica, sans-serif; font-size: 150%; font-weight: bolder;
}
h2 { font-family: verdana, arial, helvetica, sans-serif; font-size: 140%; font-weight: bolder;
}
h3 { font-family: verdana, arial, helvetica, sans-serif; font-size: 125%; font-weight: bolder;
}
h4 { font-family: verdana, arial, helvetica, sans-serif; font-size: 115%; font-weight: bolder;
}
h5 { font-family: verdana, arial, helvetica, sans-serif; font-size: 105%; font-weight: bolder;
}

li {
  margin-top: 0.5em;
}

/* format address on confirmation page */

p.address {
  font-family: courier, monospace;
}

a:link {
    font-size: 100%;
    font-weight: bold;
    color: #003399;  /*königsblau*/
    text-decoration: none;
}
a:visited {
    font-size: 100%;
   font-weight: bold;
   color: #000066; /*dunkelblau*/
   text-decoration: none;
}
a:active {
    font-size: 100%;
   font-weight: bolder;
   color: #6699CC; /*mittelblau"*/
   text-decoration: none; 
}
a:hover { 
   font-size: 100%;
   font-weight: bold;
   color: #6699CC;   /*mittelblau"*/
   text-decoration: underline; 
}
.normal {
    color: #003399;   /*königsblau*/
}
.aktiv {
    font-size: 100%;
    color: #6699CC;  /*mittelblau*/
    font-weight: bolder;
}

/* guestbook */

h2.gbentryheader {
  margin-top: 0.5em;
  font-size: small;
  font-weight: bold;
  margin-bottom: 0px;
}

div.gbentry {
  margin-top: 0px;
  width: 100%;
  background: white;
  font-family: courier, monospace;

  border: 2px solid black;
  padding: 0.5em;
}