html, body {
	height: 100%;
}

html {
    width: 100%;
    height: 100%;
}

body {
	font-size: 11px;
	font-family: Arial, Verdana, SunSans-Regular, Sans-Serif;
	color: #FFF;
}

* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

br.clear { clear: both; }

img {  border: none; }

h1 { font-size: 26px; color: #f37a1f; font-weight: bold; }
h2 { font-size: 13px; color: #ffffff; font-weight: bold; }
h3 { font-size: 13px; color: #ffffff; font-weight: bold; }
h4 { font-size: 20px; color: #f37a1f; font-weight: bold; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

#header a {
    float: left;
}

#header {
    width:  782px;
    height: 45px;
    padding: 10px 0 0 10px;
    background: url('../images/header_bg.gif') top left repeat-x;
}

/* NAVIGATION TOP */
#header ul {
    float: left;
    width: 635px;
    height: 29px;
    padding: 0 0 0 15px;
    list-style-type: none;
}

#header ul li {
    float: right;
}

#header ul li a {
    height: 29px;
    color: #656565;
    text-decoration: none;
    font-weight: bold;
    font-size: 11px;
    line-height: 29px;
    padding: 0 8px 0px 13px;
    background: url('../images/navi_li.gif') 0px 10px no-repeat;
}

#header ul li a:hover,
#header ul li.selected a {
    color: #f37a1f;
}

/* NAVIGATION */

ul#navigation {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 480px;
    height: 29px;
    padding: 0 0 0 15px;
    list-style-type: none;
    background: url('../images/navi_bg.gif') top left no-repeat;
}

ul#navigation li {
    float: left;
}

ul#navigation li a {
    height: 29px;
    color: #656565;
    text-decoration: none;
    font-weight: bold;
    font-size: 11px;
    line-height: 29px;
    padding: 0 8px 0 10px;
    background: url('../images/navi_li.gif') 0px 3px no-repeat;
}

ul#navigation li a:hover,
ul#navigation li.selected a {
    color: #f37a1f;
}

ul#navigation li#first a {
    background: url('../images/navi_li_first.gif') 0px 3px no-repeat;
}

/* Navigation Franzoesisch */

ul#navigation_fr {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 480px;
    height: 29px;
    padding: 0 0 0 15px;
    list-style-type: none;
    background: url('../images/navi_bg.gif') top left no-repeat;
}

ul#navigation_fr li {
    float: left;
}

ul#navigation_fr li a {
    height: 29px;
    color: #656565;
    text-decoration: none;
    font-weight: bold;
    font-size: 11px;
    line-height: 29px;
    padding: 0 8px 0 10px;
    background: url('../images/navi_li.gif') 0px 3px no-repeat;
}

ul#navigation_fr li a:hover,
ul#navigation_fr li.selected a {
    color: #f37a1f;
}

ul#navigation_fr li#first a {
    background: url('../images/navi_li_first.gif') 0px 3px no-repeat;
}


/* SUBLINKS */
ul#sublinks {
    position: absolute;
    right: 10px;
    width: 100px;
    padding: 0;
    margin:  0;
    bottom: 0;
    list-style-type: none;
    overflow: hidden;
}

ul#sublinks li {
    float: left;
    width: 27px;
    height: 37px;
    margin: 0 6px 0 0;
}

ul#sublinks li a {
    height: 37px;
    width: 27px;
    display: block;
    position: relative;
}

ul#sublinks li#pk {
    background: url('../images/btn_produktkatalog_b.gif') top left no-repeat;
}

ul#sublinks li#pk a:hover {
    background: url('../images/btn_produktkatalog_b.gif') bottom left no-repeat;
}

ul#sublinks li#pk_white {
    background: url('../images/btn_produktkatalog_w.gif') top left no-repeat;
}

ul#sublinks li#pk_white a:hover {
    background: url('../images/btn_produktkatalog_w.gif') bottom left no-repeat;
}

ul#sublinks li#pk_grey {
    background: url('../images/btn_produktkatalog_g.gif') top left no-repeat;
}

ul#sublinks li#pk_grey a:hover {
    background: url('../images/btn_produktkatalog_g.gif') bottom left no-repeat;
}

ul#sublinks li#tipp {
    background: url('../images/btn_tipp_b.gif') top left no-repeat;
}

ul#sublinks li#tipp a:hover {
    background: url('../images/btn_tipp_b.gif') bottom left no-repeat;
}

ul#sublinks li#tipp_white {
    background: url('../images/btn_tipp_w.gif') top left no-repeat;
}

ul#sublinks li#tipp_white a:hover {
    background: url('../images/btn_tipp_w.gif') bottom left no-repeat;
}

ul#sublinks li#tipp_grey {
    background: url('../images/btn_tipp_g.gif') top left no-repeat;
}

ul#sublinks li#tipp_grey a:hover {
    background: url('../images/btn_tipp_g.gif') bottom left no-repeat;
}

ul#sublinks li#fh {
    background: url('../images/btn_fh_b.gif') top left no-repeat;
}

ul#sublinks li#fh a:hover {
    background: url('../images/btn_fh_b.gif') bottom left no-repeat;
}

ul#sublinks li#fh_white {
    background: url('../images/btn_fh_w.gif') top left no-repeat;
}

ul#sublinks li#fh_white a:hover {
    background: url('../images/btn_fh_w.gif') bottom left no-repeat;
}

ul#sublinks li#fh_grey {
    background: url('../images/btn_fh_g.gif') top left no-repeat;
}

ul#sublinks li#fh_grey a:hover {
    background: url('../images/btn_fh_g.gif') bottom left no-repeat;
}

div#pk_tip,
div#tipp_tip,
div#fh_tip {
    display: none;
    position: absolute;
    color: #FFF;
    font-size: 12px;
    bottom: 40px; 
    right: 26px;
}

div#pk_tip.black,
div#tipp_tip.black,
div#fh_tip.black {
    color: #000;
}

/* LITHIUM ICON */
img#lithium_icon {
    position: absolute;
    right: 10px;
    top: 10px;
}

/* 360 GRAD ICON */
img#grad360_icon {
    position: absolute;
    right: 10px;
    top: 20px;
}

/* CONTENT 0 */
#content0 {
    width: 792px;
    height: 468px;
    background: #000000;
    position: relative;
}

    #content0 #intro {
        position: absolute;
        top: 0;
        left: 0;
        width: 792px;
        height: 468px;
    }

/* CONTENT 1 */
#content1 {
    width: 792px;
    height: 468px;
    background: url('../images/main_bg_1.jpg') top left no-repeat;
    position: relative;
}

    #content1 p#subline {
        position: absolute;
        top: 84px;
        left: 38px;
        width: 300px;
    }

    #content1 div a {
        font-size: 12px;
        text-decoration: none;
        font-weight: bold;
    }

    #content1 div#btn1 a,
    #content1 div#btn2 a { color: #FFF; }

    #content1 div#btn3 a,
    #content1 div#btn4 a { color: #000; }

    #content1 div#btn1{
        position: absolute;
        top: 55px;
        left: 426px;
    }

    #content1 div#btn1 a {
        width: 120px;
        height: 80px;
        display: block;
        background: url(../images/btn_overlay.gif) top left repeat;
    }

    #content1 div#btn1_tooltip{
        position: absolute;
        top: 75px;
        left: 426px;
        background: url(../images/tooltip.gif) top left no-repeat;
        width: 169px;
        height: 67px;
        display: none;
    }

    #content1 div#btn2{
        position: absolute;
        top: 45px;
        left: 569px;
    }

    #content1 div#btn2 a {
        width: 120px;
        height: 70px;
        display: block;
        background: url(../images/btn_overlay.gif) top left repeat;
    }

    #content1 div#btn2_tooltip{
        position: absolute;
        top: 65px;
        left: 569px;
        background: url(../images/tooltip_2.gif) top left no-repeat;
        width: 169px;
        height: 44px;
        display: none;
    }

    #content1 div#btn3{
        position: absolute;
        top: 354px;
        left: 380px;
    }

    #content1 div#btn3 a {
        width: 140px;
        height: 80px;
        display: block;
        background: url(../images/btn_overlay.gif) top left repeat;
    }

    #content1 div#btn3_tooltip{
        position: absolute;
        top: 374px;
        left: 380px;
        background: url(../images/tooltip.gif) top left no-repeat;
        width: 169px;
        height: 67px;
        display: none;
    }

    #content1 div#btn4{
        position: absolute;
        top: 268px;
        left: 608px;
    }

    #content1 div#btn4 a {
        width: 140px;
        height: 100px;
        display: block;
        background: url(../images/btn_overlay.gif) top left repeat;
    }

    
    #content1 div#btn4_tooltip{
        position: absolute;
        top: 288px;
        left: 608px;
        background: url(../images/tooltip.gif) top left no-repeat;
        width: 169px;
        height: 67px;
        display: none;
    }
    
        #content1 div#btn4_tooltip{
        position: absolute;
        top: 288px;
        left: 608px;
        background: url(../images/tooltip.gif) top left no-repeat;
        width: 169px;
        height: 67px;
        display: none;
    }

    #content1 div.showTooltip {
        display: block !important;
    }

    #content1 div#btn1_tooltip p,
    #content1 div#btn2_tooltip p,
    #content1 div#btn3_tooltip p,
    #content1 div#btn4_tooltip p {
        color: #FFF;
        font-size: 10px;
        padding: 10px;
        width: 149px;
        height: 47px;
    }

    #content1 h1 {
        position: absolute;
        top: 52px;
        left: 36px;
        font-size: 20px;
    }
        
    #content1 h4 {
        position: absolute;
        top: 52px;
        left: 36px;
        font-size: 18px;
    }

    #content1 h3 {
        position: absolute;
        top: 34px;
        left: 38px;
        font-weight: normal;
        font-size: 10px;
    }
    
/* CONTENT 2 */
#content2 {
    width: 792px;
    height: 468px;
    background: #000;
    position: relative;
}

    #content2 div#prod_viewer {
        width: 792px;
        height: 225px;
        text-align: center;
        padding: 200px 0 0 0;
        color: #666;
        background: url('../images/vorteile_noflash.jpg') top left no-repeat;
    }

/* CONTENT 3 */
#content3 {
    width: 792px;
    height: 468px;
    background: #000 url('../images/main_bg_3.jpg') top left no-repeat;
    position: relative;
}

    #content3 h2 {
        font-size: 16px;
        color: #FFF;
        position: absolute;
        font-weight: normal;
        left: 323px;
        top: 56px;
    }
    
    #content3 div#vergleichsliste {
        position: absolute;
        top: 80px;
        right: 10px;
        height: 310px;
        width: 440px;
        overflow: auto;
        overflow-x: hidden;
        border: none;
        padding: 20px 0 0 0;
    }

    #content3 div#vergleichsliste table {
        width:  400px;
    }

    #content3 div#vergleichsliste table tr th {
        font-size: 11px;
        color: #656565;
        font-weight: bold;
        white-space: nowrap;
        background: #e2e2e2 url('../images/navi_li.gif') 0px 7px no-repeat;
        padding: 5px 0 5px 8px;
    }
    
    #content3 div#vergleichsliste table tr th.cursor { cursor: pointer; }
    
    #content3 div#vergleichsliste table tr th#nobg { background-image: none; }

    #content3 div#vergleichsliste table tr td {
        font-size: 11px;
        border-bottom: 1px solid #656565;
        padding: 4px 8px 4px 0;
    }

    #content3 div#vergleichsliste table tr td#col_1 { width: 180px; }
    #content3 div#vergleichsliste table tr td#col_2 { width: 110px; }
    #content3 div#vergleichsliste table tr td#col_3 { width: 110px; }
    
    #content3 div#hsa85_large,
    #content3 div#hsa65_large {
        position: absolute;
        top: 80px;
        left: 10px;
        width: 770px;
        height: 328px;
        background: #FFF;
        border: 1px solid #656565;
        display: none;
    }
    
    #content3 div#hsa85_large span.closebtn,
    #content3 div#hsa65_large span.closebtn {
        position: absolute;
        right: 10px;
        bottom: 10px;
        text-decoration: none;
        color: #656565;
        font-size: 11px;
        font-weight: bold;
        padding: 0 0 0 14px;
        cursor: pointer;
        background: url('../images/navi_li.gif') 0px 3px no-repeat;
    }
    
/* CONTENT 4 */
#content4 {
    width: 792px;
    height: 468px;
    background: #000 url('../images/main_bg_4.jpg') top left no-repeat;
    position: relative;
}

#content4_2 {
    width: 792px;
    height: 468px;
    background: #000 url('../images/main_bg_4_2.jpg') top left no-repeat;
    position: relative;
}

#content4_3 {
    width: 792px;
    height: 468px;
    background: #000 url('../images/main_bg_4_3.jpg') top left no-repeat;
    position: relative;
}

    #content4 ul#detaillinks,
    #content4_2 ul#detaillinks,
    #content4_3 ul#detaillinks {
        position: absolute;
        top: 16px;
        left: 10px;
        list-style-type: none;
    }
    
    #content4 ul#detaillinks li,
    #content4_2 ul#detaillinks li,
    #content4_3 ul#detaillinks li {
        padding: 0 0 0 26px;
        margin: 0;
    }
    
    #content4 ul#detaillinks li a,
    #content4_2 ul#detaillinks li a,
    #content4_3 ul#detaillinks li a {
        font-size: 11px;
        color: #FFF;
        font-weight: bold;
        text-decoration: none;
        display: block;
        padding: 4px 0 3px 0;
    }
    
    #content4 ul#detaillinks li.selected a,
    #content4 ul#detaillinks li a:hover,
    #content4_2 ul#detaillinks li.selected a,
    #content4_2 ul#detaillinks li a:hover,
    #content4_3 ul#detaillinks li.selected a,
    #content4_3 ul#detaillinks li a:hover {
        color: #f37a1f;
    }
    
    #content4 h2,
    #content4_2 h2,
    #content4_3 h2 {
        font-size: 16px;
        color: #FFF;
        position: absolute;
        font-weight: normal;
        left: 323px;
        top: 56px;
    }

    #content4 div#details,
    #content4_2 div#details,
    #content4_3 div#details {
        position: absolute;
        top: 80px;
        right: 10px;
        height: 310px;
        width: 440px;
        overflow: auto;
        overflow-x: hidden;
        border: none;
        padding: 20px 0 0 0;
    }
        
    div div#details img {
        margin: 0 8px 10px 0;
    }
    
    div div#details table {
        width: 400px;
        text-align: left;
        margin: 0 0 15px 0;
    }
    
    div div#details table tr th {
        color: #656565;
        background: #e2e2e2;
        padding: 4px;
        font-size: 10px;
    }
    
    div div#details table tr td {
        border-bottom: 1px solid #656565;
        padding: 4px;
        font-size: 10px;
    }
    
    div div#details p {
        font-size: 10px;
        margin: 0 0 10px 0;
        width: 400px;
    }
    
    div div#details span.orange {
        color: #f37a1f;
        font-weight: bold;
    }
    
    div div#details p a {
        color: #f37a1f;
        font-weight: bold;
    }
    
/* CONTENT 5 */
#content5 {
    width: 792px;
    height: 468px;
    background: #000 url('../images/main_bg_5.jpg') top left no-repeat;
    position: relative;
}

    #content5 h2 {
        font-size: 16px;
        color: #FFF;
        position: absolute;
        font-weight: normal;
        left: 483px;
        top: 56px;
		width: 260px;
    }
    
    #content5 div#textarea {
        position: absolute;
        top: 80px;
        right: 10px;
        height: 310px;
        width: 280px;
        overflow: auto;
        overflow-x: hidden;
        border: none;
        padding: 20px 0 0 0;
    }
    
    #content5 div#textarea p {
        font-size: 10px;
        margin: 0 0 10px 0;
        width: 260px;
    }

    #content5 div#textarea a {
        font-size: 10px;
        color: #f37a1f;
        text-decoration: none;
    }
    
    #content5 div#textarea a:hover { text-decoration: underline; }

    #content5 #puzzle {
        position: absolute;
        top: 10px;
        left: 65px;
    }