/**************************************************************\
 *  TTTTT EEEE CCCC H  H N   N III K  K U  U M   M    222   999   *
 *    T   E    C    H  H NN  N  I  K K  U  U MM MM   2   2 9   9  *
 *    T   EEE  C    HHHH N N N  I  KK   U  U M M M      2  99999  *
 *    T   E    C    H  H N  NN  I  K K  U  U M   M     2      9   *
 *    T   EEEE CCCC H  H N   N III K  K UUUU M   M   22222   9    *
 *                                                                *
 *                     technikum29.de - Design                    *
 *                       S C R E E N    C S S                     *
 *                                                                *
 *  ab Version v5.7 ist fresh.css das neue Standardcss fuer Bild- *
 *  schirmanzeige. Das Screen-Design ist zwar fuer "kleine"       *
 *  Anzeigebereiche (Breite < 900px) besser geeignet, soll jedoch *
 *  nicht mehr benutzt werden. Trotzdem steht es als mehr oder    *
 *  weniger "gleichwertige" Alternative dank XHTML-Quelltext-     *
 *  kompatibilitaet zur Verfuegung und laesst sich mit der        *
 *  Browserfunktion zum CSS-Wechseln aktivieren.                  *
 *  Internet Explorer der Version 5 werden automatisch auf dieses *
 *  Design umgestellt (Anteil der IE5s im Jahr 2008 an den        *
 *  Homepagebesuchern: 0% IE5 25% IE6, 25% IE7).                  *
 *                                                                *
 *  fuer v5.7 wurde diese Datei so angepasst, dass sie sowohl fuer*
 *  alte Quelltexte als auch neue gleichzeitig nutzbar ist. In der*
 *  Uebergangsphase, wo /en noch alt ist, war dies noetig.        *
 *                                       12.07.07 2:15 v5.7BETA   *
 *  $Id:: screen.css 33 2008-08-22 01:38:18Z sven              $  *
  \**************************************************************/

/*
** Changelog seit v5.7:
**   v5.7FINAL: Changelog gestartet
**   v5.7.5:    Diverse Anpassungen für besseres Aussehen
**   v5.8:      Einige Fixes, damit das Design zumindest noch
**              benutzbar waere.
**
**
**
*/

body {
    margin: 0; padding: 0; color: #000;
    font: 13px Verdana,Tahoma,Helvetica,Arial,sans-serif;
}

.hidden { display: none; }
img     { border: none; }
.center { text-align: center; }
.left   { text-align: left; }
.block, .justify  { text-align: justify; }
.clear  { /* clearendes element, inhalt egal */
          display: block; clear: both;
          height: 2px; overflow: hidden; }

/***** HEAD *****/

h1 {
    margin: 0; padding: 0;
    height: 67px; /* real height: 67px */
    text-align: center;
    background-color: #5E7FAD;

    z-index: 12;
}

html > body h1 {
    /* For intelligent browsers */
    height: 67px;
}

h1 a {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -380px;
    z-index: 11;
    display: block;

    /* background-image: multilangual, so look at h1.[lang] a */    
    background-position: top center;
    background-repeat: no-repeat;
    width: 760px;
    height: 67px;
}

h1.de a {
    /* Deutscher Banner */
    background-image: url(../img/banner/big.de-old.jpg);
}

h1.en a {
    /* English banner */
    background-image: url(../img/banner/big.en-old.jpg);
}

h1.int a {
    /* International banner (Deutsch grosse Schrift, englisch klein drunter) */
    background-image: url(../img/banner/int.jpg);
}

h1.none a {
    /* Banner with no subtitle in any language */
    /* Banner mit ueberhaupt keinem Subtitel */
    background-image: url(../img/banner/logo.jpg);
}

h1 a span {
    display: none;
}

h1 span.old, h1 span.d {
    /* span.d war der alte Name, span.old ist der neue */
    background-color: #0C377A;
    display: block;
    width: 50%;
    height: 67px;
    position: absolute;
    top: 0; left: 0;
    z-index: 10;
}

h2 {
    font: bold 140% Verdana,Arial,Helvetica,sans-serif;
    margin: 30px 0 10px 0;
    padding: 0;
}

div#lang a {
    /* <div> mit Sprachauswahl (z.b. "englische Version") */
    position: absolute;
    top: 70px; left: 0;
    display: block; text-align: center;
    width: 160px; height: 13px;
    margin: 0; padding: 1px;
}

div#lang ul, div#lang li {
    list-style: none;
    display: inline;
    margin: 0;
    padding: 0;
}

div#lang span, div#lang strong {
    display: none;
}

div#lang a {
    color: #416397;
    font-size: 90%;
}

div#lang a .de, div#lang a br {
    display: none;
}

#h1-subtitle {
    /* <h1> border-hilfsmittel, ehemals #h1border */
    background-color: #C8C8C8;
    color: #C8C8C8; /* damit beschriftung nicht stoert */
    position: absolute; z-index: 10;
    border-top: 1px solid #3A6198;
    top: 67px; left: 0;
    display: block; overflow: hidden;
    height: 3px; /* fuer IE: 2px inhalt + 1px rahmen */
    width: 100%;
    margin: 0; padding: 0;
}

/* fuer intelligente browser: 2px inhalt + rahmen */
html>body #h1-subtitle { height: 2px; }



/***** GENERAL *****/

#menu {
    /* Menue-<div> */
    position: absolute;
    left: 0; top: 81px;
    width: 160px;
    padding-top: 10px;
}

#content {
    /* Inhalt (nur in Zusammenhang mit #menu nutzen!) */
    margin-left: 160px;
    padding: 10px;

    min-height: 900px;
    height: 900px; /* IE workaround */
    overflow: visible;
}

html>body #content { height: auto; }

#page {
    /* Fuer seiten ohne #menu */
    margin: 10px;
}


/***** MENU *****/

#menu ul, #menu li {
    list-style: none;
    margin: 0; padding: 0;
    display: inline;
    line-height: 100%;
}

#menu a {
    text-decoration: none;
}

#menu a span {
    /* <span>&nbsp;</span>-Teile, die in screen.css nicht gebraucht werden */
    display: none;
}

#menu em.l1 span.hidden {
    /* kleine Notloesung, um "Kommunikations-<br/>technik" mit screen.css
       darzustellen, mit fresh.css aber nur "Kommunikationstechnik" */
    display: inline;
}

/* oben: Name mit alten quelltexten, unten Kompatibilitaet */
#menu li .t,
#menu li.l1 a, #menu li em { /* #menu li a.on */
    /* Meneintrag obersten Levels */
    color: #000;
    margin: 1.1em 0 2px 1px;
    display: block;
    border-width: 1px 1px 1px 0;
    border-style: solid;
    border-color: #305992;
    padding: 1px 1px 1px 3px;
    text-align: center;
    font-style: normal;
}

#menu li a.t:link, #menu li a.t:visited,
#menu li.l1 a:link, #menu li.l1 a:visited {
    color: #92A2B9; border-color: #97ABC8;
}

#menu li a.t:hover, #menu li a.t:active, #menu li a.t:focus,
#menu li.l1 a:hover, #menu li.l1 a:active, #menu li.l1 a:focus {
    color: #000; border-color: #305992;
}

#menu li.on a.t, #menu li.on span.t,
#menu li.l1 a.on, #menu li em {
    /* Meneintrag oberstes Level, das selektiert ist */
    color: #000; border-color: #305992;
    /* Achtung wegen Ueberschreibung unten... */
}

#menu li li a {
    /* Submenueeintraege */
    display: block;
    margin: 10px 10px 1px 10px;
    color: #224B88;

    background-position: 0 2px;
    background-repeat: no-repeat;
    padding-left: 13px;
}

#menu li li a:link, #menu li li a:visited {
    background-image: url(../img/double.a.png);
}

#menu li li a:hover {
    color: #882224;
    background-image: url(../img/double-hot.a.png);
}

#menu li li a.on {
    /* selektierter Submenueneintrag */
    color: #112544;
    background-image: url(../img/screen.design/square.a.png) !important;
    border: none;
}

/* Es folgen kurze Loesungen fuer die zweite (dritte) Gliederungsebene */
#menu li.l3 ul a {
    margin-left: 20px;
}

#menu li.l3 em {
    border-left-width: 1px;
    margin-left: 10px;
}

#sidebar-footnote {
    /* Fußnoten, die eigentlich nur das freshdesign betreffen sollten */
    display: none;
}


/***** CONTENT *****/

p { text-align: justify; }
p.text-left { text-align: left; }

ul.text-left li, li.text-left { text-align: left; }

a:link, a:visited {
    color: #224B88;
    text-decoration: underline;
}

a:hover, a:active, a:focus {
    color: #882224;
    text-decoration: underline;
}

/*
  Links mit Pfeilen: a.go & a.arrow:
  Momentan noch kein IE-Workaround gefunden
  (Bei mehrzeiligen Links pfeile im text) -
  daher momentan nur intelligenten Browsern
  vorenthalten
  Siehe auch /CHANGELOG, /TODO
*/

html>body a.arrow,
html>body a.go {
    background-position: bottom left;
    background-repeat: no-repeat;
    padding-left: 13px;
}

html>body a.arrow:link,
html>body a.arrow:visited,
html>body a.go:link,
html>body a.go:visited {
    background-image: url(../img/double.a.png);
}

html>body a.arrow:hover,
html>body a.arrow:active,
html>body a.arrow:focus,
html>body a.go:hover,
html>body a.go:active,
html>body a.go:focus {
    background-image: url(../img/double-hot.a.png);
}

/*  Navigationslisten: <ul class="nav">/<ul id="nav"> */

ul.nav, ul#nav {
    list-style: none;
    padding: 0;
}

ul.nav li, ul#nav li {
    margin: 0; padding: 0;
}

ul.nav li a, ul#nav li a {
    padding-left: 13px;
    background-position: bottom left;
    background-repeat: no-repeat;
}

ul.nav li a:link, ul#nav li a:link,
ul.nav li a:visited, ul#nav li a:visited {
    background-image: url(../img/double.a.png);
}

ul.nav li a:hover, ul#nav li a:hover,
ul.nav li a:active, ul#nav li a:active,
ul.nav li a:focus, ul#nav li a:focus {
    background-image: url(../img/double-hot.a.png);
}

/* Definitionslisten */
dt { font-weight: bold; }
dt em, dt i { font-weight: normal; }




/****** FOOTER *****/

/* Kompatibiltaet: Alt #rel, neu #footer! */
#footer {
    /* seitenrelationenleiste ganz unten */
    clear: both; padding: 0;
    height: 40px;
    position: relative; /* für IEs #footer .border */

    border-top: 2px solid #C8C8C8; color: #eee;
    background: #5F80AE url(../img/screen.design/body.bg.png) repeat-y top left;
}

#footer .border {
    /* Rahmen-hilfsmittel, welches als Doppelfunktion das ehemalige .space
       übernimmt, um IE eine richtige Höhe anzuzeigen  */
    border-top: 1px solid #3A6198;
    overflow: hidden; height: 1px;
}

* html #footer .border {
    position: absolute;
    width: 100%; height: 40px;
}

#footer b {
    font-weight: normal; /* Kompensierung des neuen Fettdrucks */
    text-decoration: underline; /* Nur die erste Zeile war damals Link */
}

div#footer ul, div#footer li {
    list-style: none;
    margin: 0; padding: 0;
}

div#footer li a {
    color: #FFF;
    text-decoration: none;
}

div#footer li {
    background-repeat: no-repeat;
}

div#footer li.up, div#footer li.prev {
    background-position: 0 5px;
    padding-left: 13px;
}

div#footer li.up {
    float: left; width: 160px; margin: 1px;
    background-image: url(../img/screen.design/up.rel.gif);
}

div#footer li.next {
    float: right; width: 30%;
    text-align: right;
    padding-right: 13px;
    background-image: url(../img/screen.design/next.rel.gif);
    background-position: right top;
/*  background-position: right 2px; nicht valide? */
}

div#footer li.prev {
    float: left; width: 30%;
    text-align: left;
    background-image: url(../img/screen.design/prev.rel.gif);
}

#copyright {
    /* Wer wirklich auf Screen umschaltet, ist kein Idiot, der einen Copyright-Vermerk braucht */
    display: none;
}

/* EOF */