@charset "UTF-8";
@media screen
{
    /* ################################################################################################## */
    /*                                         BEGIN RESET STYLES                                         */

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
    acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong,
    sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
    thead, tr, th, td
    {
        margin : 0;
        padding : 0;
        border : 0;
        outline : 0;
        font-weight : inherit;
        font-style : inherit;
        font-size : 100%;
        font-family : inherit;
        /* vertical-align: baseline; */
        background : transparent;
    }
    a:link, a:visited, a:focus, a:hover, a:active
    {
        font-weight:bold;
        text-decoration:none;
    }
    a:focus, a:hover, a:active
    {
        color:#fb8;
    }

    /*                                         END RESET STYLES                                           */
    /* ################################################################################################## */
    /*                                         BEGIN PAGE                                               */

    html {height:100%;}
    body {
        margin:0;
        padding:0;
        height:100%;
        background-color:#fff;
        font-family: Tahoma, Verdana, Helvetica, Lucida Console, sans-serif;
        font-size:85%;
        font-weight:300;
        line-height:1.5em;
        /* word-spacing:0.3em;
        letter-spacing:0.05em; */
    }
    #wrap {
        min-height:100%;
        width:100%;
        max-width:1600px;
        position:relative;
        margin:0;
        padding:0;
        border:0;
    }

    /*                                         END PAGE                                                   */
    /* ################################################################################################## */
    /*                                         BEGIN HEADER                                               */

    #header
    {
        position:relative;
        width:100%;
        top:0px;
        min-height:500px;
        height:500px;
        overflow:visible;
        z-index:1;
    }
    #left_outer
    {
        position:absolute;
        width:100%;
        height:500px;
        left:0px;
        top:0px;
        background-image: url( '../images/horizontalGradient_1280x10-01.png' ) ;
        background-repeat:repeat-y ;
        background-position:right top;
        background-color:transparent;
        z-index:0;
    }
    #left
    {
        top:0px;
        left:0px;
        width:500px;
        height:500px;
        position:absolute;
        /* border:1px solid teal; */
    }
    #right
    {
        top:-24px;
        right:-30px;
        margin-right:30px;
        position:absolute;
        width:864px;
        height:703px;
        background-image: url( '../images/harderWorks_864x703-01.png' ) ;
        background-position:right top;
        background-repeat:no-repeat ;
        z-index:1;
    }
    /*                                         - top navigation -                                         */
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    #topnav_outer
    {
        position:relative;
        top:1em;
        width:80%;
        height:30px;
        z-index:2;
        /* border:1px dotted cyan; */
    }
    /*
    #topnav_inner
    {
        position:relative;
        float:right;
        top:1em;
        right:0em;
        width:80%;
        height:20px;
        z-index:2;
    }
    */
    .topnav
    {
        float:right;
        width:auto;
        height:20px;
        display:inline;
        z-index:2;
        color:#ddd;
        /* border:1px solid green; */
    }
    .topnav span
    {
        float:right;
    }
    .topnav a#imprint
    {
        color:#fff;
    }
    .topnav a#imprint:hover
    {
        text-decoration:underline;
    }
    a#lang_ON.lang_DE, a#lang_ON.lang_EN
    {
        position:relative;
        background-position: 0px 0px ;
        overflow:hidden;
    }
    a#lang_OFF.lang_DE, a#lang_OFF.lang_EN
    {
        position:relative;
        background-position: 0px -17px ;
        overflow:hidden;
    }
    .lang_DE
    {
        float:right;
        position:relative;
        display: block;
        width: 17px;
        height: 17px;
        background-image: url( '../images/de17.png') ;
        background-repeat:no-repeat ;
        text-indent: -9999px;
        letter-spacing: -9999px;
        font-size:0;
        overflow:hidden;
    }
    .lang_EN
    {
        position:relative;
        width: 17px;
        height: 17px;
        background-image: url( '../images/en17.png' ) ;
        float:right;
        display: block;
        background-repeat:no-repeat ;
        text-indent: -9999px;
        letter-spacing: -9999px;
        font-size:0;
        overflow:hidden;
    }
    a#lang_ON.lang_DE:hover, a#lang_ON.lang_EN:hover
    {
        background-position: 0px -34px ;
        overflow:hidden;
    }
    #lang_OFF.lang_DE:hover, #lang_OFF.lang_EN:hover
    {
        background-position: 0px 0px ;
        overflow:hidden;
    }
    .topnavmargin
    {
        display: inline;
        width:17px;
        margin-left:0.5em;
    }
    /*                                         - main navigation -                                        */
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    #nav_outer
    {
        z-index:7;
        position:relative;
        top:24px;
        width:100%;
        height:55px;
        background-color:transparent;
        background-image:url( '../images/horiz_nav_bg_904x55-01.png' ) ;
        background-repeat:no-repeat;
        background-position:right top;
        /* border:2px dotted yellow ; */
    }
    #nav
    {
        z-index:7;
        position:relative;
        top:5px;
        width:80%;
        height:55px;
        /* border:2px dotted olive ; */
    }
    #hlist
    {
        width:904px;
        /* height:55px; */
        height:85px;
        overflow: hidden;
        float: right;
        display: inline;
        position:relative;
        right:0px;
        z-index:8;
        background:transparent ;
        /* border:2px dotted orange ; */
    }
    #hlist>ul
    {
        display:inline;
        float:right;
    }
    #hlist ul li a:focus, #hlist ul li a:hover, #hlist ul li a:active
    {
        background-color: transparent;
    }
    #hlist>ul li
    {
        float:right;
        position:relative;
        display:inline;
        margin-left:1.5em;
        list-style-type: none;
        z-index:9;
        /* border:1px solid red; */
    }
    .homeButton
    {
        background-image: url( '../images/button_home_124x140-01.png' ) ;
        background-position:0px 0px;
        display: block;
        width: 124px;
        height: 35px;
        background-repeat:no-repeat ;
        text-indent: -9999px;
        letter-spacing: -9999px;
        font-size:0;
        z-index:9;
    }
    .heimButton
    {
        background-image: url( '../images/button_heim_124x140-01.png' ) ;
        background-position:0px 0px;
        display: block;
        width: 124px;
        height: 35px;
        background-repeat:no-repeat ;
        text-indent: -9999px;
        letter-spacing: -9999px;
        font-size:0;
        z-index:9;
    }
    #nHome
    {
        width: 124px;
        float:right;
        position:relative;
        display:inline;
        margin-left:1.5em;
        list-style-type: none;
        z-index:9;
    }
    .animButton
    {
        background-image: url( '../images/button_animation_121x140-01.png' ) ;
        background-position:0px 0px;
        display: block;
        width: 120px;
        height: 35px;
        background-repeat:no-repeat ;
        text-indent: -9999px;
        letter-spacing: -9999px;
        font-size:0;
        z-index:9;
    }
    #nAni
    {
        width: 120px;
        float:right;
        position:relative;
        display:inline;
        margin-left:1.5em;
        list-style-type: none;
        z-index:9;
    }
    .melButton
    {
        background-image: url('../images/button_MEL_56x140-01.png' ) ;
        background-position:0px 0px;
        display: block;
        width: 56px;
        height: 35px;
        background-repeat:no-repeat ;
        text-indent: -9999px;
        letter-spacing: -9999px;
        font-size:0;
        z-index:9;
    }
    #nMel
    {
        width: 56px;
        float:right;
        position:relative;
        display:inline;
        margin-left:1.5em;
        list-style-type: none;
        z-index:9;
    }
    .contactButton
    {
        background-image: url( '../images/button_contact_102x140-01.png' ) ;
        background-position:0px 0px;
        display: block;
        width: 102px;
        height: 35px;
        background-repeat:no-repeat ;
        text-indent: -9999px;
        letter-spacing: -9999px;
        font-size:0;
        z-index:9;
    }
    .kontaktButton
    {
        background-image: url( '../images/button_kontakt_102x140-01.png' ) ;
        background-position:0px 0px;
        display: block;
        width: 102px;
        height: 35px;
        background-repeat:no-repeat ;
        text-indent: -9999px;
        letter-spacing: -9999px;
        font-size:0;
        z-index:9;
    }
    #nCont
    {
        width: 102px;
        float:right;
        position:relative;
        display:inline;
        margin-left:1.5em;
        list-style-type: none;
        z-index:9;
    }
    .melButton:hover, .contactButton:hover,
    .animButton:hover, .homeButton:hover,
    .kontaktButton:hover, .heimButton:hover
    {
        background-position:0px -35px;
    }
    .melButton:active, .contactButton:active,
    .animButton:active, .homeButton:active
    .kontaktButton:active, .heimButton:active
    {
        background-position:0px -70px;
    }
    #activeMenue
    {
        background-position:0px -70px;
        /* border:1px solid crimson; */
    }
    #activeMenue:hover
    {
        background-position:0px -105px;
    }
    #activeMenue.animButton:hover > ul,
    #activeMenue.melButton:hover > ul
    {
        display:block;
        z-index:10;
    }
    li#nAni:focus>ul,
    li#nMel:focus>ul,
    li#nAni:hover>ul,
    li#nMel:hover>ul,
    li#nAni:active>ul,
    li#nMel:active>ul
    {
        display:block;
        z-index:8;
    }
    li#nAni>ul,
    li#nMel>ul
    {
        /* display:none; */
        display:none;
        z-index:8;
        margin:0;
        padding:0;
        width:1024px;
        height:24px;
        position:absolute;
        top:35px;
    }
    li#nAni>ul
    {
        left:-725px;
    }
    li#nMel>ul
    {
        left:-855px;
    }
    ul li#nAni>ul li,
    ul li#nMel>ul li
    {
        /* float:none; */
        overflow:visible;
        display:inline;
        position:relative;
        margin: 0;
        padding: 1em 0 0 1em;
        text-align: left;
        /* border:1px solid crimson; */
        z-index:8;
        height:24px;
    }
    ul li#nAni>ul li>a,
    ul li#nMel>ul li>a
    {
        font-size:75%;
    }
    a.subMenue
    {
        background: transparent url('../images/bg_subMenue_a2.png') no-repeat top right;
        background-position:right -2px;
        color: #444;
        display: block;
        float: left;
        height: 49px;
        margin: -2em 0 0 -1em;
        margin-right: 6px;
        padding-right: 20px; /* sliding doors padding */
        padding-top:2em;
        text-decoration: none;
        color:#ccc;
        text-align:center;
    }
    a.subMenue span
    {
        background: transparent url('../images/bg_subMenue_span2.png') no-repeat;
        background-position:left -2px;
        display: block;
        line-height:49px;
        /* line-height: 14px; */
        margin: -2em 0 0 -1em;
        padding: 0em 0 0.5em 20px;
    }
    a.subMenue:active
    {
        outline: none; /* hide dotted outline in Firefox */
    }
    a.subMenue:hover span
    {
        color:#fff;
    }
    a.subMenue:active span
    {
        color: #fb8;
    }

    /*                                         END HEADER                                                 */
    /* ################################################################################################## */
    /*                                         BEGIN CONTENT                                              */

    #content_wrap
    {
        z-index:2;
        padding-top:0px;
        padding-bottom:60px;
        position:relative;
        margin-top:-280px;
    }
    #content_wrap:after {
        content:" ";
        display:block;
        clear: both;
    }
    #main
    {
        z-index:3;
        background-color:Transparent;
        background-image: url( '../images/horizontalGradient_1200x5-01.png' ) ;
        background-position:right top;
        background-repeat:repeat-y;
        min-height:370px;
        /* border:1px solid fuchsia; */
    }
    .teaser
    {
        font-family: Tahoma, Verdana, Helvetica, Lucida Console, sans-serif;
        font-size:100%;
        font-weight:300;
        line-height:1.5em;
        padding-top:1em;
        padding-left:1.5em;
        padding-right:1.0em;
        color:#666;
        /*
        word-spacing:0.3em;
        letter-spacing:0.05em;
        font-family:Georgia, serif ;
        font-size:1.1em;
        line-height:2.0em;
        font-style:italic;*/
    }
    #contact_teaser
    {
        min-height:100px;
    }
    .teaser:first-letter
    {
        font-size:180%;
        font-style:italic;
        letter-spacing:0.15em;
    }
    .teaser a
    {
        font-weight:bold;
        text-decoration: none;
        color: #af896d;
    }
    .teaser a:hover,
    .teaser a:active
    {
        font-weight:bold;
        text-decoration: underline;
        font-style:italic;
    }
    .subcr
    {
        position:relative;
        padding:10px ;
        margin-left:auto;
        margin-right:auto;
        /* border:1px dashed #888 ; */
    }
    .subcr a img
    {
        position:relative;
        text-align:center;
        margin-left:auto;
        margin-right:auto;
        /* border:1px dashed #888 ; */
    }
    .subcl
    {
        padding:10px ;
        /* border:1px dashed #888 ; */
    }
    .subc  { padding: 0 0.5em; }
    .subcl { padding: 0 1em 0 0; }
    .subcr { padding: 0 0 0 1em; }
    .c65l
    {
        width: 65%;
        float: left;
    }
    .c35r
    {
        width: 35%;
        float: right;
        margin-left: -5px;
    }
    .c35l
    {
        width: 35%;
        float: left;
    }
    .c65r
    {
        width: 65%;
        float: right;
        margin-left: -5px;
    }
    .c50l
    {
        width: 55%;
        float: left;
    }
    .c50r
    {
        width: 45%;
        float: right;
        margin-left: -5px;
    }
    .c50l
    {
        /* border:1px dotted cyan ;
        margin:0.1em; */
    }
    .subcolumns
    {
	    width: 100%;
	    overflow: hidden;
        /* border:1px dotted magenta ;   */
    }
    .subcol_outer
    {
        padding:1em;
        margin:0;
        /* border:1px solid blue ; */
    }
    span.subnav
    {
        color:#888;
        margin-left:9px;
        border-top:3px dotted #ccc ;
    }
    p.subnav
    {
        font-size:85%;
        margin-left:65%;
        margin-right:9px;
        text-align:right;
        /* border-top:3px dotted #ccc ; */
    }
    .icaption
    {
        background-color:#edd;
        font-size:85% ;
        text-align:left;
    }
    .box_divider
    {
        position:relative;
        background-image: url( '../images/horizontalLine_804x12-01.png' ) ;
        background-repeat:no-repeat;
        background-position:center center;
        background-color:transparent;
        margin:0;
        padding:0;
        margin-top:0em;
        height: 10px;
        width:100%;
        z-index:9;
        border:none;
        /* background-color:cyan; */
    }
    .float_left_outer
    {
        float: left;
        width:50px ;
        height:40px;
        margin-right:10px;
        /* border:1px solid darkgreen ; */
    }
    .float_left_inner
    {
        overflow:hidden ;
        width:32px;
        height:32px ;
        margin-left:9px;
        /* margin-top:10px;
        border: 4px solid #ddd ;
        padding:2px ;*/
    }
    .float_icon
    {
        display:block ;
        width:32px ;
        height:32px;
        background-repeat: no-repeat ;
        background-position: 0px 0px ;
	    text-indent: -9999px;
	    letter-spacing: -9999px;
	    font-size:0;
    }
    .float_icon:hover
    {
        background-position: 0px -32px ;
    }
    .content_box
    {
        background-color:transparent;
        margin:1em;
        padding:1em;
        z-index:4;
        /* border:2px dashed fuchsia ; */
    }
    .content_box p
    {
        z-index:4;
        background-color:transparent;
        margin-bottom:1em;
    }

    /*                                           - mel & anim -                                           */
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    .anim_text
    {
        padding:4px 9px 9px 9px ;
    }
    .anim_header
    {
        padding:4px 9px 9px 9px ;
        display:inline ;
        font-size:115%;
        font-weight:bold ;
        /* text-indent:60px ;
        border:1px dotted red ; */
    }
    .mel_text
    {
        padding:4px 9px 9px 9px ;
    }
    .mel_dl
    {
        margin: 4px 0px 4px 3em;
    }
    .mel_header
    {
        display:inline ;
        font-size:115%;
        font-weight:bold ;
        /*
        padding:4px 9px 9px 9px ;
        text-indent:60px ;
        border:1px dotted red ; */
    }
    .mel_code
    {
        color:#008080;
        background-color:#cfe7e7;
        border:1px solid #008080;
        margin:0 auto 2em auto;
        width:90%;
        padding:1em 3em 1em 3em;
    }
    .h_code
    {
        padding-left:3em;
        font-weight:bold;
        font-size:85%;
    }
    .h_dl
    {
        padding-left:3em;
        font-weight:bold;
        font-size:85%;
    }

    /*                                             - contact -                                            */
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    .contact_box
    {
        position:relative;
        bottom:0px;
        right:0px;
        margin-top:0px;
        /* border:2px dotted olive; */
    }
    .inpRow
    {
        clear: both;
        padding-top: 5px;
    }
    .inputLabel
    {
        width:300px;
        float: left;
        text-align: left;
        /* border:1px dotted olive;  */
    }
    .mailLabel
    {
        float: left;
        width:100px;
        font-weight:bold;
        color:#888;
        letter-spacing:-0.05em;
        /* border:1px dotted red;   */
    }
    .inpSpacer
    {
        clear: both;
    }
    .emailSent
    {
        position:relative;
	    width:500px;
	    top:100px;
	    /* margin-top:100px; */
	    margin-left:35%;
	    margin-right:auto;
	    padding:20px;
	    border:4px dotted #ccc;
	    background-color:#eee;
	    text-align:center;
    }
    .emailSent h3
    {
        font-family:Georgia, Serif;
        font-weight:bold;
        font-style:italic;
        font-size:140%;
        color:#555;
    }
    .emailSent h3:first-letter
    {
        font-family:Verdana, Sanserif;
        font-weight:bolder;
        font-style:italic;
        font-size:180%;
        color:#888;
    }
    .emailH1
    {
        font-weight:bold;
        font-size:120%;
        color:#555;
        letter-spacing:-0.05em;
    }
    .impr_text
    {
        padding:1em 1em 0em 1em;
    }

    /*                                         - images & icons -                                         */
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    #mel_script_id
    {
        background-image: url( '../images/mel_script.png' ) ;
    }
    #pelt_id
    {
        background-image: url( '../images/pelt.png' ) ;
    }
    #whatIs_id
    {
        background-image: url('../images/whatIs.png' ) ;
    }
    #shFindUnknownNodesWindow_id
    {
        background-image: url('../images/shFindUnknownNodesWindow.png' ) ;
    }
    #shMakeSlideTextUVWindow_id
    {
        background-image: url('../images/shMakeSlideTextUVWindow.png' ) ;
    }
    #vsLogo_id
    {
        background-image: url('../images/vsLogo_32x64.png' ) ;
    }


    /*                                         END CONTENT                                                */
    /* ################################################################################################## */
    /*                                         BEGIN FOOTER                                               */

    #footer {
        position:absolute;
        bottom:0;
        height:60px;
        width:100%;
        z-index:9;
    }
    #footer_inner
    {
        background-color: #333333;
    }
    .footmargin
    {
        width:80%;
        height:100%;
        margin:0 auto;
        padding:0;
        z-index:3;
        clear: both;
        /* visibility: hidden;
        border:1px dotted orange; */
    }
    #foot_span
    {
        float:right;
        margin-right:2em;
        margin-top:2em;
        /* border:1px dotted yellow ; */
    }
    #foot_span a#mailMe
    {
        color:#555;
        position:relative;
        width:100px;
        z-index:9;
    }
    #foot_span a#mailMe:hover
    {
        text-decoration:underline;
    }
    #validity
    {
        position:relative;
        margin-left:2em;
        margin-top:2em;
        width:120px;
        height:16px;
        display:inline;
        float:left;
        z-index:9;
        /* overflow:hidden;
        border:1px dotted yellow ;*/
    }
    #vhtm
    {
        float:left;
        position:relative;
        display: block;
        width:50px;
        height:16px;
        background-image:url( '../images/valid-xhtml.png' ) ;
        background-repeat:no-repeat;
        background-position: 0px 0px;
        text-indent: -9999px;
        letter-spacing: -9999px;
        font-size:0;
        margin-left:0.5em;
        z-index:9;
        overflow:hidden;
        /* border:1px dotted purple ; */
    }
    #vcss
    {
        float:left;
        position:relative;
        display: block;
        width:50px;
        height:16px;
        background-image:url( '../images/valid-css.png' ) ;
        background-repeat:no-repeat;
        background-position: 0px 0px;
        text-indent: -9999px;
        letter-spacing: -9999px;
        font-size:0;
        z-index:9;
        overflow:hidden;
        /* border:1px dotted red ; */
    }
    a#vcss:hover, a#vhtm:hover
    {
        background-position: 0px -16px ;
    }

    /*                                         END FOOTER                                                 */
    /* ################################################################################################## */
    /*                                         BEGIN MISC STYLES                                          */

    .clearfix
    {
        display: block;
    }
    .clearfix:after
    {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    a, strong
    {
        color:#af896d;
    }
    strong
    {
        font-weight:bold;
    }
    b
    {
        font-weight:bold;
        color:#555;
    }
    #dummy
    {
        float:left;
        position:relative;
        width:27%;
        height:120px;
    }
    .margin
    {
        width:80%;
        height:100%;
        margin:0 auto;
        padding:0;
        z-index:3;
        /* border:1px dotted orange; */
    }
    span.top
    {
        position:relative;
        float:right;
        margin:0;
        margin-right:1em;
        right:0px;
        padding:0;
        padding-right:1em;
        margin-bottom:1em;
        border-bottom:1px dashed #ccc;
        width:75px;
        text-align:right;
    }
    span.top > a
    {
        font-size:75%;
        color:#aaa;
    }
    span.impress
    {
        display:block;
    }
    span.impress em
    {
        font-size:85%;
        color:#222;
    }
    .mel_code, kbd
    {
        font-family:Courier New, monospace;
        font-size:100%;
        color:#af896d;
    }
    kbd:before
    {
        content:"<";
        color:#af896d;
    }
    kbd:after
    {
        content:">";
        color:#af896d;
    }
    samp
    {
        font-style:italic;
        font-size:100%;
        color:#af896d;
    }
    samp.titl
    {
        font-style:oblique;
        font-weight:bold;
    }
    samp:before
    {
        content:"'";
        color:#af896d;
    }
    samp:after
    {
        content:"'";
        color:#af896d;
    }
    .impr_table
    {
	    border-collapse:collapse;
	    empty-cells:show;
    }
    .impr_table tr
    {
	    border-collapse:collapse;
        border-bottom:1px solid #bbb ;
    }
    .impr_table tr td
    {
        padding-top:6px ;
        padding-bottom:4px ;
    }

    /*                                         END MISC STYLES                                            */
    /* ################################################################################################## */
}