/* CSS for Main, Achim Stößer, Apr. 2000 *****************************************/

body {color:#000040;background-color:#d0d0e0;text-align:justify}
BODY {
SCROLLBAR-ARROW-COLOR: #808080; 
SCROLLBAR-BASE-COLOR: #d0d0e0; 
}

html, body {
    height: 100%;
}
html {
    margin: 0px;
    padding: 0px;
}
body {
    margin: 10px;
    padding: 0px;
}

/* Bilder in Texten und Pressemittelungen */  
article#maincontent img[align=right] {
  margin-left: 8px;
}
article#maincontent img[align=left] {
  margin-right: 8px;
}

@media (max-width: 1000px) {
  article#maincontent img[align=left], article#maincontent img[align=right] {
        /*transform: scale(0.5) translateX(-40px);*/
    width: 100px;
    height: auto;
    transition-property: scale translateX;
    transition-duration: 0.5s;
    transition-timing-function: linear;
  }
  article#maincontent img[align=left]:hover{
    transform: scale(3.5) translateX(40px);
  }
  article#maincontent img[align=right]:hover {
    transform: scale(3.5) translateX(-40px);
  }
}

/* sidebar (links) */

#sidebar {
  float: left;
  height: 100%;
  width: 150px;
  position: fixed;
}
#sidebar table {
   width: 150px;  padding: 0px; margin-left:10px;
}
#sidebar td {
  border: none;
}
#sidebar tr:nth-child(3) {
  position: absolute;
  bottom: 40px;
  vertical-align: bottom;
}

#sidebar img {
  -moz-box-shadow: 5px 5px 10px rgba(0,0,0,.5);
  -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.5);
  box-shadow: 5px 5px 10px  rgba(0,0,0,.5);
}

/* Der Hauptteil muss um die Breite von "sidebar" nach rechts verschoben werden. */
@media (min-width: 1000px) {
   html>body>section { margin-left: 170px; }
}
@media (max-width: 1000px) {
  #sidebar, #sidebar table  { width: 50px; }
  #sidebar img { 
    width: 50px;  height: auto; 
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,.5);
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,.5);
    box-shadow: 2px 2px 5px rgba(0,0,0,.5);
  }
  html>body>section { margin-left: 65px; }
}
@media (max-width: 800px) {
  #sidebar { display:none; }
  html>body>section { margin-left: 2px; }
}

/** menu */
@media (min-width: 800px) and (min-height: 600px) {
  /** Bei grösserem Bildschirm immer anzeigen: */
  #menu { position: fixed; bottom: 3px; right: 5px;  }
}
#menu { background: rgb(208, 208, 224); box-shadow: 0px 0px 10px rgb(208, 208, 224); }
#menu A {text-decoration:none;color:#8080a0;}
#menu A:link {}
#menu A:visited {}
#menu A:active {color:#000040;background-color:#ffffff}
#menu A:hover {color:#ffffff;background-color:#8080a0;}
#menu table {text-align:left;}
#menu th {text-align:center;vertical-align:center;background-color:#ffffff;border:1px solid #8080a0;padding:1px}
#menu th {background-image:url(../img/button.jpg)}
#menu td {text-align:left;vertical-align:top;background-color:#d0d0e0}

/** section */
html>body>section {
    height: 100%;
}
/* Hauptinhalt */
#maincontent {  
    margin: 0px 5px 5px 5px;
}

/* navigation */
body>section>nav {
    height: 50px;
    margin-left: auto;
    display:table;
}
body>section>nav>a {
  float:left;
  margin-right:10px;
}

/* Der Footer */
body>footer {
  position: relative; 
  height: 50px;
}

/* font types */

body,table,th,td,p{font-family:Verdana;} 
h1,h2,h3,h4{font-family:Verdana} 
pre {font-family:Courier New,Letter Gothic MT, Lucida Console}

/* links */

A {text-decoration:none;color:#8080a0;}
A:link {}
A:visited {}
A:active {color:#000040;background-color:#8080a0}
A:hover {color:#ffffff;background-color:#8080a0;}

/* tables */

table {text-align:left;}
.std {border-color:#ffffff;border-style:solid;border-width:0px;border-right-width:1px;border-top-width:1px}
.frame {width:25%;}
.wideframe {font-size:12px;line-height:"110%";}
th {text-align:left;vertical-align:top;color:#ffffff;background-color:#8080a0;border-color:#ffffff;border-style:solid;border-width:0px;border-left-width:1px;border-bottom-width:1px}
td {text-align:left;vertical-align:top;border-color:#ffffff;border-style:solid;border-width:0px;border-left-width:1px;border-bottom-width:1px}
.foot {font-size:10pt;line-height:12pt}
.nof {border-width:0px;}

 
/* headings */

h1,h2,h3,h4,h5,h6 {text-align:left;color:#ffffff}
h1 {text-align:right;color:#d0d0e0;border-color:#8080a0;background-color:#ffffff;border-style:solid;border-width:1px;padding:4px;padding-right:12px}
h1 {font-size:24px;line-height:29px}
h2 {font-size:20px;line-height:27px}
h3 {font-size:16px;line-height:22px}
body, table, h4, p {font-size:14px;line-height:19px}

/* misc */

.blink {background-image:url(../img/blink.gif)}
em {font-style:normal;background-color:#c0c0c0}
ul {text-align:left;list-style-type:circle;list-style-image:url(../img/bullet.jpg);} 
input.field {background-color:white;border:1px solid #8080a0;padding:2px}
input.button {color:#8080a0;font-weight:bold;font-size:14px;background-image:url(../img/button.jpg);border:1px solid #8080a0};