/* CSS Document */

/* delete all browser presets for border, margin and padding: */
* {padding: 0; border: 0; margin: 0;}

/* define appearance of necessary standard block level elements: */
body{
        background-color: #198EEE; /*#cc0000;*/ /*#FD0000;*/
        color:#FFFFFF;
        font-family:Arial, Helvetica, sans-serif; font-size:4.2mm;
        margin:0; padding:0; border:0px solid black; bottom:0;
        scrollbar-DarkShadow-Color:#333333;        scrollbar-Track-Color:white;        scrollbar-Face-Color:black;        scrollbar-Shadow-Color:#333333;
        scrollbar-Highlight-Color:#999999;        scrollbar-3dLight-Color:#333333; scrollbar-Arrow-Color:white;
        }
body.Pro{
        background-color:#FFFFFF; /*#FD0000;*/
        color:#000000;
        font-family:Arial, Helvetica, sans-serif; font-size:4.2mm;
        margin:0; padding:0; border:0px solid black; bottom:0;
        scrollbar-DarkShadow-Color:#333333;        scrollbar-Track-Color:white;        scrollbar-Face-Color:black;        scrollbar-Shadow-Color:#333333;
        scrollbar-Highlight-Color:#999999;        scrollbar-3dLight-Color:#333333; scrollbar-Arrow-Color:white;
        }
p{
        margin:0;
        border:0;
        padding:0;
        }
address{
        position:absolute; top:90%; left:200px; width:50em;
        font-family:Arial, Helvetica, sans-serif; font-size:90%; font-style:normal;
        }

/* define appearance of necessary standard inline elements: */
img{
        margin:0; border:0; padding:0;
        z-index:3;
        }

/* define appearance of elements with ID: */
#wrapper {
        height:100%; width:100%;
        }
#text{
        position:absolute; top:-2000px; left:-3000px; width:0px; height:0px;
        overflow:hidden; display:inline;
        }
#titleband{
        position:absolute; left:503px; top:21px; width:100%; height:72px; color:black;
}
#title{
        position:absolute; top:7%; left:373px; width:500px;
        }
#titletext{
        float:right; font-size:140%; color:white; text-align:right;
        }
#dedication{        /* style span element #location of title line: */
        font-size:70%;
        }
#location{        /* style span element #location of title line: */
        font-size:70%;
        }
#navigation{
        position:absolute; top:-17px; left:200px; width:674px;height:20px; /* top:-48px; */
        z-index:1000; margin:0; border:0; padding:0;
        }
#navigationband{
        position:absolute; top:0px; left:0px; width:670px;height:20px;
        margin:0; border:0; padding:0; background-color:black;
        }
#foreign{
        position:absolute; top:-17px; left:851px; width:23px; height:248px; padding-top:20px;
        text-align:left; font-size:80%;
        background-color:black; z-index:200;
        visibility:hidden;
        }
#band {
        position:absolute; bottom:18%; left:0; width:100%; height:351px;
        }
#black{
        position:absolute; bottom:0; width:100%; height:135px;
        background-color:black;
        }
#back{
        position:absolute; bottom: 60px; left: 60px;
        }
#imageframe{
        position:absolute; bottom:-32px; margin-left:200px; width:670px; height:400px;
        background-color:black;
        }
#images{
        white-space:nowrap; overflow:auto;
        position:absolute; bottom:-32px; margin-left:220px; width:630px; height:383px;
        font-size:90%;
        z-index:5;
        }

.textframe{
        display:inline-block;
        float:right;
        width:500px;
        height:150px;
        font-size:16px;
        line-height:1.5em;
        background-color:white;
}

.textframe p{
white-space:normal;
}

/* define band, black and imageframe again under different names to allow positioning of bling-bling images: */
#band2 {
        position:absolute; bottom:18%; left:0; width:100%; height:351px;
        }
#blingbling{
        position:absolute; bottom:-32px; margin-left:200px;
        }
#blingbling2{
        position:absolute; bottom:-32px; margin-left:850px;
        }

/* define distance of images in image frame #images: */
#images img{
margin-right:20px;
}

/* style elements of address: */
address span{
        display:block;
        float:left;
        width:9.0em;
        }
address span#Tel{
        width:13.5em;
        }
address span#eMail{
        width:30em;
        }

/* define appearance of elements of a certain class: */
.skiplink{        /* style skiplink for disabled persons: */
        position:absolute; top:-2000px; left:-3000px; width:0px; height:0px;
        overflow:hidden; display:inline;
        }
.menuitem{        /* menu divs in navigation list */
        width:6.9em; text-align:left;
/*        width:7em; text-align:left; */
        }
.submenu{        /* submenu divs in navigation list */
        width:8.2em; text-align:left;
        z-index:1000;
/*        width:7em; text-align:left;*/
        }

/* define appearance of normal links: */
a{
        margin:0; border:0; padding:0; color:white; text-decoration:underline;
        }
        a:link{
        text-decoration:underline;
        }
        a:visited{
/*        color:silver;*/
        text-decoration:none;
        }
        a:hover, a:focus {
        color:#FFD920;
        }
        a:active{
        color:black;
        }
/* define appearance of image links: */
a img{
        margin:0; border:0; padding:0; color:white;
        }
/*        a:link{
        text-decoration:underline;
        }
        a:visited{
        text-decoration:none;
        }
        a:hover, a:focus{
        color:#FFD920;
        }
        a:active{
        color:black;
        }*/

/* ******************************* */
/* define appearance of link list: */
/* ******************************* */
        ul{
                padding: 0; margin: 0; /* entfernt: position:relative; - Eigenschaft war UNNÖTIG UND führt zu einem ungewollten float:left beim IE (neben Fernseherbox) */
                list-style-type:none;
                }

        li{
                display:inline; /*margin-right:2px;*/
                        font-weight:bold;
                list-style-type:none;
/*                                float:left;*/
                }

/* define appearance of links in main menu: */
li a{
        display:block;
        padding-left:5px; padding-top:2px; padding-bottom:2px; padding-right:5px;
        color:white; font-size:82%; font-style:normal; background-color:black;
        }
        li a:link{
        display:block; background-color:black;
                text-decoration:none;
                }
        li a:visited{
                color:white;
                }
        li a:hover, li a:focus{
                background-color:white;
/*                border:2px solid white;*/
                color:black;
                }
        li a:active{
                background-color:#198EEE;
                color:white;
                }

/* define appearance of photography-item: */
#photography {position:absolute;width:7.2em;left:-7.2em;height:19px;background-color:white;color:black;}

        #photography a{
        display:block;
        padding-left:5px; padding-top:2px; padding-bottom:2px; padding-right:5px;
        color:black; font-size:82%; font-style:normal; background-color:white;
        font-weight:bold;
        }
        #photography a:link{
        display:block; background-color:white;
                text-decoration:none;
                }
        #photography a:visited{
                color:black;
                }
        #photography a:hover, li a:focus{
                background-color:black;
/*                border:2px solid white;*/
                color:white;
                }
        #photography a:active{
                background-color:red;
                color:white;
                }

/* define appearance of theater-item: */
#theater {position:absolute;width:10em;left:-10em;height:19px;background-color:white;color:black; visibility:hidden;}

        #theater a{
        display:block;
        padding-left:5px; padding-top:2px; padding-bottom:2px; padding-right:5px;
        color:black; font-size:82%; font-style:normal; background-color:white;
        font-weight:bold;
        }
        #theater a:link{
        display:block; background-color:white;
                text-decoration:none;
                }
        #theater a:visited{
                color:black;
                }
        #theater a:hover, li a:focus{
                background-color:black;
                color:white;
                }
        #theater a:active{
                background-color:red;
                color:white;
                }

/* define appearance of submenus: */
li div{
        position:relative; float:left;
        }
        li ul {
                position: relative; left:0px; top:0px;
                text-align:left;
                display: none;
        }
        li ul li{
                font-weight:normal; font-size:100%; /* display:block; width:100%; */
                list-style-type:none;
        }
        li:hover ul, li.over ul {
                display: block;
        }
/* end of definition: appearance of submenus */

/* define appearance of links in submenu: */
li ul li a{
        display:block;
                                        z-index:10000;
/*                width:100%;*/
        }
li ul li a:link{
        color:white;
        background-color:black;
        border:1px solid white;
/*        width:100%;*/
        }
li ul li a:visited{
        color:white;
        background-color:black;
        border:1px solid white;
        text-decoration:none;
        }
        li ul li a:hover, li ul li a:focus {
        color:black;
        background-color:white;
        border:1px solid white;
        }
li ul li a:active{
        color:white;
        background-color:#198EEE;
        border:1px solid white;
        }

/* Definition für Link bei Bannertext (kein Unterstrich!): */
#titletext a{
        text-decoration:none;
        }
#titletext a:hover{
        text-decoration:blink;
        }

/* define submenu to appear when main menu items are hovered: */
li#sub1:hover ul#nav1, li#sub1.over ul#nav1,
li#sub2:hover ul#nav2, li#sub2.over ul#nav2,
li#sub3:hover ul#nav3, li#sub3.over ul#nav3,
li#sub4:hover ul#nav4, li#sub4.over ul#nav4,
li#sub5:hover ul#nav5, li#sub5.over ul#nav5 {
        display: block; }

/* style links of momentary shown page: */
/*    in main menu: */
        .Arb #Arbeiten a,
        .Pro #Projekte a,
        .Cur #Curriculum a,
        .Mat #Material a,
        .The #Theorie a,
        .Pho #photos a{
        color:white;
        background-color:#198EEE;
        }
/*    in submenu: */
        #Orest #nav11 a,
        #WEIN #nav12 a,
        #schwarz #nav13 a,
        #Kino #nav14 a,
        #Destillation #nav15 a,
        #Ueberfluessiges #nav16 a,
        #Matrosen #nav17 a,
        #KlimaX #nav18 a,
        #Klima #nav31 a,
        #KiLi #nav32 a,
        #Presse #nav51 a,
        #vidOrest #nav52 a,
        #vidWEIN #nav55 a,
        #Video #nav56 a,
        #AudioMatrosen #nav58 a,
        #AudioMatrosenkurz #nav59 a,
        #Links #nav53 a,
        #Design #nav54 a,
        #Rhyth #nav21 a,
        #Raum #nav22 a,
        #body #nav23 a,
        #matter #nav24 a,
        #install #nav25 a,
        #umwl #nav26 a,
        #eden #nav101 a,
        #traces #nav102 a,
        #Welt #nav103 a,
        #versetzung #nav104 a,
        #RealityBreeds #nav105 a,
        #Spuren #nav106 a{
        color:white;
        background-color:#198EEE;
        }

/* hacks: */
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

/* change title text color for "Projekte"-section (white background!): */
.Pro #titletext{
        color:black;
        }
.Pro a{
        color:silver;
        }
.Pro a:hover{
        color:#198EEE;
        }

/* do not show symbol images in "Material" section: */
#images div a img {
display:none;
}