/* file KLEIDER/web/src/sitestyle/ixdesk.css */
/*
  Regeln für die Startseite,
  Darstellung mit Navigationsbaum
  2012-09-14 Herbert Schiemann <h.schiemann@herbaer.de>
  2013-08-08 Anpassungen für "tellabout"
  2015-07-28 span[class~="btn"]
*/
body {
    margin:                0px;
    background-image:      url(start.png);
    background-repeat:     no-repeat;
    background-attachment: fixed;
    background-position:   center center;
    width:    800px;   /* JS: doppelte Mindestmaße */
    height:   600px;
    overflow: hidden;
}

/* Logo */
div#div_logo {
    position: absolute;
    left:       0px;
    top:        0px;
    /* Javascript: das Logofeld, die Überschrift (#div_head) und der Klangschalter */
    /* werden gleich hoch dargestellt.                                             */
    /* Die gemeinsame Höhe ist das Maximum der Höhen von #div_logo und #div_head   */
    height:    68px;
    width:    300px;
    background-image:    url(logo.png);
    background-position: center center;
    background-repeat:   no-repeat;
    color:               transparent;
    background-color:    transparent;
    overflow:            hidden;
}

/* Titel (Überschrift) */
#div_head      {
    position: absolute;
    left:         300px;
    top:           20px;
    text-indent: 10px;
    overflow: hidden;
    white-space: nowrap;
    font-family: sans-serif;
}

/* die Überschrift wird in ihrem Feld vertikal zentriert */
h1 {
    height: 1em;
    margin: auto;
    padding-bottom: 0.2em;
}

/* Menüfeld in der Titelleiste */
div#div_links     {
    position: absolute;
    top:        0px;
    left:     300px;
}
div#div_links p   {
    display: inline;
    padding: 0 5px 0 10px;
    margin:  0;
}
div#div_links div { padding: 0.2em 0; }

p[class~="btn"]       { text-decoration: underline; }
p[class~="btn"]:hover { cursor: pointer; }

/* Schaltflächen für Ton */
/* ===================== */
div#div_sound     {
    position: absolute;
    top:   0px;
    left:  0px;
    font-size: 200%;
    width: 3em;
    cursor: pointer;
}
/* Die Verschachtelung ermöglicht die vertikale Zentrierung */
div#div_sound div {
    position: absolute;
    margin-top:    auto;
    margin-bottom: auto;
    top:    0;
    bottom: 0;
    height: 1em;
    width: 100%;
    text-align: center;
}

/* "Stop-Taste" */
div#div_sound[class~="playing"] div:after { content: " \25FC"; }

/* "Play-Taste" */
div#div_sound[class~="paused"]  div:after { content: " \25B6"; }

/* Der Inhaltsbereich */
/* ================== */
div#div_content {
    position: absolute;
    left: 300px;
    top:   64px;
    overflow: auto;
}

div#div_content > div {
    padding-left:  10px;
    padding-right:  5px;
}

div[class~="hidden"] { display: none; }

/* Verweise im Inhaltsbereich */
a:focus {
    outline:          none; 
    color:            #000000;
    background-color: #92C2CA;
}

/* Kein Rahmen um Bilder, die als Verweise dienen */
a img { border: none; }

h1, h2, h3 { font-family: sans-serif; }

iframe[class~="hidden"] { visibility: hidden; }
iframe {
    position: absolute;
    border: none;
    left: 300px;
    top:   64px;
    overflow: auto;
}

/* Der Navigationsbaum */
/* =================== */
div#div_navig {
    position: absolute;
    left:       0px;
    top:       64px;
    width:    300px;
    overflow: auto;
}

/* Verschachtelte Einträge werden eingerückt */
div#div_navig div                    { padding-left:  1em; }

/* Untereinträge eines "gefalteten" Eintrags werden nicht dargestellt */
div#div_navig div[class~="head"] div { display: none; }

/* Der obere Rand hält einen Abstand zwischen den Einträgen */
div#div_navig p {
    margin:     0;
    padding:    0;
    margin-top: 0.5ex;
}

div#div_navig p[class~="machine"] { padding-left: 1em; }

/* keine "Ameisen" im Verweis auf den Übersetzer */
a[class="machine_link"]:focus { outline: none; }

/* Ein Symbol vor dem Text des Eintrags */
/* 25c6 black diamond */
div#div_navig span[class~="end"]:before  { content: "\25c6  ";}
/* 25b6 black right-pointing triangle */
div#div_navig span[class~="head"]:before { content: "\25b6  ";}
/* 25bc black down-pointing triangle */
div#div_navig span[class~="exp"]:before  { content: "\25bc  ";}

/* Kenntlich machen, dass die Einträge auf Mausklicks reagieren */
div#div_navig span[class~="head"],
div#div_navig span[class~="exp"],
div#div_navig span[class~="navig_text"] {
    cursor: pointer;
}

/* der aktuelle Eintrag wird durch die Hintergrundfarbe hervorgehoben */
div#div_navig div[class~="current"] > p {
    background-color: #92C2CA;
    color: #000000;
}

/* Die Wurzel definiert besondere Innenabstände */
div#div_navig > div                  {
    padding-top:    2ex;
    padding-bottom: 1ex;
    padding-left:   0em;
    padding-right:  1em;
}

/* Popup - Fenster */
/* =============== */
div[class~="popup"] {
    position: absolute;
    background-color: #d9cd84;
    color: #000000;
    border-style: solid;
    border-width: 1px;
    padding: 1em;
}

div[class~="popact"]   { display: block; }
div[class~="popinact"] { display: none;  }
div#help_frame         { width: 40em; }

/* Tabellen in Aufklappfenstern */
td + td            { padding-left: 1em;}
td                 { vertical-align: top;}
span[class~="btn"] { cursor: pointer; }
/* end of file KLEIDER/web/src/sitestyle/ixdesk.css */