@font-face {
    font-family: 'Arial';
    src: url('fonts/arial-webfont.eot');
    src: url('fonts/arial-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/arial-webfont.woff') format('woff'),
         url('fonts/arial-webfont.ttf') format('truetype'),
         url('fonts/arial-webfont.svg#ArialRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DINPro-Medium';
    src: url('fonts/dinpromedium.eot');
    src: url('fonts/dinpromedium.eot?#iefix') format('embedded-opentype'),
         url('fonts/dinpromedium.woff') format('woff'),
         url('fonts/dinpromedium.ttf') format('truetype'),
         url('fonts/dinpromedium.svg#dinpromedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DINPro-Regular';
    src: url('fonts/dinproregular.eot');
    src: url('fonts/dinproregular.eot?#iefix') format('embedded-opentype'),
         url('fonts/dinproregular.woff') format('woff'),
         url('fonts/dinproregular.ttf') format('truetype'),
         url('fonts/dinproregular.svg#dinproregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


* {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

h1, h2, h3, h4, p, #detaildescription {
    font-family: 'DINPro-Regular';
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    height: 100%;
}

.wrapper {
    width: 1201px;
    height: 698px;
    position: relative;
    left: 50%;
    top: 50%;
    margin: -349px 0 0 -600.5px;
}

.prewrapper {
    width: 1280px;
    height: 752px;
    left: 50%;
    top: 50%;
    margin: -376px 0 0 -640px;
    position: relative;
    border: 0;
}

.prewrapper a, .prewrapper img {
    border: 0;
}

header {
    height: 95px;
    width: 100%;
    overflow: hidden;
}

.productsnav {
    float: left;
}

.langnav {
    float: right;
    margin-right: 15px;
}

.productsnav li, .langnav li {
    float: left;
    background: transparent url(../gfx/navigation.png) left top no-repeat;
    height: 29px;
    width: 130px;
    z-index: 6;
    position: relative;
    font-family: 'DINPro-Regular';
    font-size: 12px;
    text-align: center;
    line-height: 34px;
    color: #FFF;
    margin-left: -12px;
}

.langnav li {
    width: 72px;
    background: transparent url(../gfx/navigation_sprache.png) left top no-repeat;
}

.productsnav li a, .langnav li a {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

.productsnav li span, .langnav li span {
    text-decoration: none;
    color: #FFF;
    text-transform: uppercase;
}

.productsnav li.optimass1000 {
    z-index: 6;
    background-position: -10px 0;
    margin-left: 20px;
}

.productsnav li.optimass2000 {
    z-index: 5;
    background-position: -159px 0;
}

.productsnav li.optimass3000 {
    z-index: 4;
    background-position: -308px 0;
}

.productsnav li.optimass6000 {
    z-index: 3;
    background-position: -457px 0;
}

.productsnav li.optimass7000 {
    z-index: 2;
    background-position: -606px 0;
}

.productsnav li.active {
    z-index: 10;
    padding-left: 11px;
    margin-left: -23px;
}

.productsnav li.active.optimass1000 {
    margin-left: 20px;
    padding-left: 0;
    background-position: -10px -31px;
}

.productsnav li.active.optimass2000 {
    /* background-position: -159px -31px; */
    background-position: -148px -31px;
}

.productsnav li.active.optimass3000 {
    background-position: -297px -31px;
}

.productsnav li.active.optimass6000 {
    background-position: -446px -31px;
}

.productsnav li.active.optimass7000 {
    background-position: -595px -31px;
}

.langnav li.de {
    z-index: 7;
    background-position: -6px 0;
}

.langnav li.en, .langnav li.es, .langnav li.cn, .langnav li.ru, .langnav li.fr {
    z-index: 5;
    background-position: -99px 0;
}

.langnav li.es {
	z-index: 4;
}

.langnav li.cn {
	z-index: 3;
}

.langnav li.ru {
	z-index: 2;
}

.langnav li.fr {
	z-index: 1;
}

.langnav li.active.de {
    background-position: -6px -31px;
}

.langnav li.active.en, .langnav li.active.es, .langnav li.active.cn, .langnav li.active.ru, .langnav li.active.fr {
    background-position: -99px -31px;
}

.langnav li.active {
    z-index: 10;
}


.langnav li {
    float: left;
}

.converternav {
    clear: both;
    padding-top: 11px;
    height: 54px;
    background: transparent url(../gfx/navi_bg.png) left top no-repeat;
    line-height: 54px;
    color: #575759;
}

.converternav li {
    float: left;
    background: transparent url(../gfx/trennlinie_navi.png) right top no-repeat;
    font-family: 'DINPro-Medium';
    text-transform: uppercase;
    font-weight: normal;
    font-size: 13px;
    position: relative;
}

.converternav li:first-child {
    padding: 0 15px 0 20px;
    width: 145px;
    text-align: center;
}

.converternav a {
    text-decoration: none;
    display: block;
    padding: 0 15px;
    cursor: pointer;
}

.converternav span {
    color: #575759;
    text-decoration: none;
    padding: 10px 55px 10px 0;
    position: relative;
    z-index: 2;
}

.converternav .mfc300c span {
    background: transparent url(../gfx/icons/ico_mfc300c.png) right center no-repeat;
}

.converternav .mfc300f span {
    background: transparent url(../gfx/icons/ico_mfc300f.png) right center no-repeat;
}

.converternav .mfc300r span {
    background: transparent url(../gfx/icons/ico_mfc300r.png) right center no-repeat;
}

.converternav .mfc300w span {
    background: transparent url(../gfx/icons/ico_mfc300w.png) right center no-repeat;
}

.converternav .s100-s250 span {
    background: transparent url(../gfx/icons/ico_OM2000_s100-s250.png) right center no-repeat;
}

.converternav .s400 span {
    background: transparent url(../gfx/icons/ico_OM2000_s400.png) right center no-repeat;
}

.converternav .active:before {
    content: "";
    width: 100%;
    height: 100%;
    background: transparent url(../gfx/navi_bg.png) -200px bottom no-repeat;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}


footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 51px;
    background: transparent url(../gfx/footer_bg.png) left top no-repeat;
}

.bottomnav {
    display: block;
    width: 100%;
}

.bottomnav li {
    float: left;
    width: 20%;
    text-align: center;
    line-height: 51px;
    font-family: 'DINPro-Medium';
    text-transform: uppercase;
    font-weight: normal;
    background: transparent url(../gfx/trennlinie_footer.png) left top no-repeat;
    font-size: 14px;
    position: relative;
}

.bottomnav li.active:before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0;
    width: 239px;;
    height: 100%;
    background: transparent url(../gfx/footer_bg.png) -100px -53px no-repeat;
    z-index: 1;
}

.bottomnav li.active.first:before {
    background-position: 0 -53px;
}

.bottomnav li.active.last:before {
    background-position: right -53px;
}

.bottomnav li:first-child {
    background: none;
}

.bottomnav li a {
    display: block;
    text-decoration: none;
}

.bottomnav li span {
    text-decoration: none;
    color: #58585A;
    padding: 6px 55px 6px 0;
    position: relative;
    z-index: 2;
}

.bottomnav li.inactive a {
    cursor: default;
}

.bottomnav li.inactive span {
    color: #A2A2A4;
    cursor: default;
}


.bottomnav .details span {
    background: transparent url(../gfx/icons/ico_detail.png) right center no-repeat;
}

.bottomnav .highlights span {
    background: transparent url(../gfx/icons/ico_highlights.png) right center no-repeat;
}

.bottomnav .media span {
    background: transparent url(../gfx/icons/ico_media.png) right center no-repeat;
}

.bottomnav .application span {
    background: transparent url(../gfx/icons/ico_application.png) right center no-repeat;
}

.bottomnav .specification span {
    background: transparent url(../gfx/icons/ico_spezifikation.png) right center no-repeat;
}


.bottomnav .inactive.details span {
    background: transparent url(../gfx/icons/ico_detail_inaktiv.png) right center no-repeat;
}

.bottomnav .inactive.highlights span {
    background: transparent url(../gfx/icons/ico_highlights_inaktiv.png) right center no-repeat;
}

.bottomnav .inactive.media span {
    background: transparent url(../gfx/icons/ico_media_inaktiv.png) right center no-repeat;
}

.bottomnav .inactive.application span {
    background: transparent url(../gfx/icons/ico_application_inaktiv.png) right center no-repeat;
}

.bottomnav .inactive.specification span {
    background: transparent url(../gfx/icons/ico_spezifikation_inaktiv.png) right center no-repeat;
}


.content {
    overflow: hidden;
    position: relative;
    height: 552px;
    width: 100%;
}

.content aside {
    position: relative;
    margin: 100px 0 0 65px;
    z-index: 2;
    width: 330px;
    height: 452px;
}

.content aside h1 {
    color: #575759;
    font-size: 20px;
    margin: 34px 0;
    font-family: 'DINPro-Regular';
    font-weight: normal;
    line-height: 24px;
}

.content aside h2 {
    color: #575759;
    font-size: 20px;
    font-family: 'DINPro-Regular';
    font-weight: normal;
}

.content aside p {
    color: #575759;
    font-size: 20px;
    font-family: 'DINPro-Regular';
    font-weight: normal;
    line-height: 28px;
}


.content .viewer {
    position: absolute;
    right: 0;
    top: -10px;
    z-index: 1;
    width: 900px;
    height: 580px;
}

.content aside.details {
    margin: 35px 0 0 20px;
    height: 517px;
    display: relative;
}

.content aside.details h2 {
    font-size: 13px;
}

.content aside.details .switcher {
    position: absolute;
    left: 0;
    bottom: 30px;
    z-index: 9;
}

.content .levelofdetail {
    font-size: 14px;
    margin-bottom: 20px;
}

.content .buttonleft, .content .buttonright {
    background: transparent url(../gfx/bt_previous.png) left top no-repeat;
    width: 30px;
    height: 30px;
    overflow: hidden;
    text-indent: -200px;
    display: block;
    float: left;
    margin: 0 10px 0 0;
    cursor: pointer;
}

.content .siteof {
    font-size: 14px;
    line-height: 32px;
    height: 30px;
    display: block;
    float: left;
    font-family: 'DINPro-Regular';
    color: #575759;
}

.content .buttonright {
    background: transparent url(../gfx/bt_next.png) left top no-repeat;
    margin: 0 10px 0;
}

.content .close {
    font-size: 14px;
    line-height: 32px;
    height: 30px;
    float: left;
    background: transparent url(../gfx/bt_close.png) right top no-repeat;
    padding: 0 40px 0 0;
    font-family: 'DINPro-Regular';
    color: #575759;
    cursor: pointer;
    text-transform: uppercase;
}

.viewer .highlight {
    position: absolute;
    width: 32px;
    height: 32px;
    background: transparent url(../gfx/icons/ico_highlight_big.png) left top no-repeat;
    cursor: pointer;
}

.viewer .highlight.active {
    background: transparent url(../gfx/icons/ico_highlight_big_active.png) -1px -1px no-repeat;
}

.content .medialist li {
    clear: both;
    height: 60px;
    margin-bottom: 10px;
    cursor: pointer;
}

.content .medialist img {
    float: left;
    margin: 0 15px 0 0;
}

.content .medialist p {
    font-size: 14px;
    margin: 0;
    line-height: 19px;
}

.viewer.media img {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -187.5px 0 0 -140px;
    transition: opacity 1s;
    -moz-transition: -moz-opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    opacity: 0;
    -moz-opacity: 0;
    width: 500px;
    height: 375px;
}

.viewer.media video, .viewer.media .ieel8video {
    position: absolute;
    right: 90px;
    top: 50%;
    transition: opacity 1s;
    -moz-transition: -moz-opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    opacity: 0;
    -moz-opacity: 0;
}

.viewer.media video:-moz-full-screen, .viewer.media video:-webkit-full-screen {
    margin-top: 0 !important;
}

.viewer.media .blendout {
    opacity: 0;
    -moz-opacity: 0;
}

.viewer.media .blendin {
    opacity: 1;
    -moz-opacity: 1;
}

.content .application .medialist {
    overflow: auto;
    clear: both;
}

.content .application .medialist li {
    float: left;
    clear: none;
}

.content .application h1 {
    margin-bottom: 5px;
    font-size: 20px;
    line-height: 24px;
}

.content .application h3.subheadline {
    margin: 0;
    font-family: 'DINPro-Regular';
    color: #575759;
    font-weight: normal;
    font-size: 14px;
    margin-bottom: 30px;
    line-height: 25px;
}

.content .application .description {
    font-size: 14px;
    margin-top: 20px;
    line-height: 19px;
}

.content .specification {
    width: 450px;
}

.content .specification h1 {
    font-size: 20px;
    line-height: 24px;
}

.speclist li {
    margin: 0;
}

.speclist span {
    font-family: 'DINPro-Regular';
    color: #575759;
    display: table-cell;
    font-size: 14px;
    line-height: 19px;
}

.speclist li > span:nth-child(1) {
    width: 180px;
}

.speclist li > span span:first-child {
    padding-right: 7px;
}

#detaildescription {
    font-family: 'DINPro-Regular';
    font-size: 14px;
    color: #575759;
    clear: both;
    line-height: 19px;
}

#detailtitle {
    margin-bottom: 0;
}

#maintitle {
    font-size: 32px;
    margin: 41px 0;
	line-height: 40px;
}

#imglist {
    margin-top: 36px;
    position: relative;
    overflow: visible;
    z-index: 10;
}

#imglist li {
    float: left;
    width: 80px;
    height: 60px;
    margin-right: 10px;
}

.progressbar {
    position: absolute;
    bottom: 100px;
    border: 1px solid #005EA7;
    left: 50%;
    margin-left: -100px;
    width: 200px;
    height: 10px;
    padding: 1px;
}

.progressbarinner {
    background: #005EA7;
    width: 0;
    height: 10px;
}

.highlights {
    cursor: pointer;
}

.highlights.inactive {
    cursor: default;
}

aside.application {
    width: 400px;
}