@charset "utf-8";

/*
    Document   : global
    Created on : 10.07.2012, 17:22:16
    Author     : k-kombinat
    Description:
        Purpose of the stylesheet follows.
*/

/*
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/**
WEBFONT
*/
.Arial {
    font-family: Arial;font-weight: normal;font-style: normal;color: #2b2b2b;
    font-size: 13px;line-height: 19px;
}
.Arial-Bold {
    font-family: Arial;font-weight: bold;font-style: normal;color: #2b2b2b;
    font-size: 16px;line-height: 18px;
}
.Geogrotesque-UltraLight {
    font-family: Geogrotesque-UltraLight;font-weight: normal;font-style: normal;
}
.Geogrotesque-SemiBold {
    font-family: Geogrotesque-SemiBold;font-weight: normal;font-style: normal;
}
.Geogrotesque-Regular {
    font-family: Geogrotesque-Regular;font-weight: normal;font-style: normal;
}
.Geogrotesque-Bold {
    font-family: Geogrotesque-Bold;font-weight: normal;font-style: normal;
}
.Geogrotesque-Thin {
    font-family: Geogrotesque-Thin;font-weight: normal;font-style: normal;
}
.Geogrotesque-Light {
    font-family: Geogrotesque-Light;font-weight: normal;font-style: normal;
}
.Geogrotesque-Medium {
    font-family: Geogrotesque-Medium;font-weight: normal;font-style: normal;
}
.Geogrotesque-ThinItalic {
    font-family: Geogrotesque-ThinItalic;font-weight: normal;font-style: normal;
}
.Geogrotesque-RegularItalic {
    font-family: Geogrotesque-RegularItalic;font-weight: normal;font-style: normal;
}
.Geogrotesque-UltraLightItalic {
    font-family: Geogrotesque-UltraLightItalic;font-weight: normal;font-style: normal;
}
.Geogrotesque-SemiBoldItalic {
    font-family: Geogrotesque-SemiBoldItalic;font-weight: normal;font-style: normal;
}
.Geogrotesque-MediumItalic {
    font-family: Geogrotesque-MediumItalic;font-weight: normal;font-style: normal;
}
.Geogrotesque-LightItalic {
    font-family: Geogrotesque-LightItalic;font-weight: normal;font-style: normal;
}
.Geogrotesque-BoldItalic {
    font-family: Geogrotesque-BoldItalic;font-weight: normal;font-style: normal;
}

/**
 * General
*/
html, body, div, h1, h2, h3, h4, h5, h6, span, applet, object, iframe,
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,
li, dd, dl, dt, fieldset, form, label, legend, table, tbody, tfoot,
thead, tr, th, td, caption
{
    margin: 0;padding: 0;text-align: left;vertical-align: baseline; border: 0;
    outline: 0;font-weight: inherit;font-style: inherit; font-family: inherit;font-size:100%;
    font-family: Geogrotesque-Regular;font-weight: normal;font-style: normal;
    font-size: 18px;line-height: 19px;
}

a {
    text-decoration: none;
}

table {border-collapse: collapse; border-spacing: 0;}


th, tr, td {
    vertical-align: top;
}

:focus{
    outline-style: none;outline-width: 0;
}

fieldset {
    border:1px solid #BBBFBF;padding: 10px 10px 20px 10px;
}

p {
    margin: 0;padding: 0;
}

a img {border:none;}

u {
    cursor: pointer;
}

input, textarea, select {

}

.center {
    text-align: center;
}

.error {
    color:red;
}

.success {
    color:green;
}

div {
    text-align: left;position:relative;
}

body {
    /* background-color:#c0c0c0;*/
    text-align: left;background-color: #ededed;
    overflow: hidden;
}

button  {
    border:0px;padding: 0px;
}

.clearleft {
    clear:left;height: 0;
}

.clearright {
    clear:right;height: 0;
}

.clearboth {
    clear:both;height: 0;
}

.bold {
    font-weight: bold;
}

.fleft {
    float: left;
}

.fright {
    float: right;
}

.show0, .hide1 {
    display: none;
}

.show1, .hide0 {
    display: block;
}

.visible1 {
    visibility: visible;
}

.visible0 {
    visibility: hidden;
}

.icon {
    width:16px;height:16px;cursor: pointer;margin-right: 5px;
}

#MainBorder {
    width: 100%; height: 100%;position: relative;
}

#MainDiv {
    margin: 5px auto;width: 960px;height: 660px;
    background-color: #ededed;overflow: hidden;
}

.noscript {
    font-family: Geogrotesque-Light;font-weight: normal;font-style: normal;
    position: fixed;top:5px;color: #FFFFFF;text-shadow: 1px 1px #888;
    z-index: 100;background-color: #58C1D5;border: 2px solid #FFFFFF;
    padding:20px 50px;left: 30%;top: 25%;
}

/**
BOX MAIN
**/
#box-content-border {
    background: url(../media/design/bg_maincontainer2.png) no-repeat transparent;
    width: 890px; height: 560px;background-color:#fafeff; position: relative;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px
        -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    moz-box-shadow: 4px 4px 4px #888;
    -webkit-box-shadow: 4px 4px 4px #888;
    box-shadow: 4px 4px 4px #888;
    margin:12px 0 0 12px;
}

/**
BOX NAVIGATION HEADER
**/
#content-navigation {
    position: absolute;top: 10px;left: 10px;
    width: 232px;height: 490px;
}
#nav-selbox {
    margin:15px 0 0 21px;width: 200px;height: 29px;cursor: pointer;
}
#nav-selbox span.hl {
    font-size: 18px;color: #ffffff;padding: 5px 0 0 10px;display: block;
}
#nav-selbox #nav-arrow {
    position: absolute;right: 0;top: 0;
    width: 34px; height: 28px;
}
#nav-selbox #nav-arrow.navarrow_down {
    background: url(../media/design/btn-navarrow-down.png) no-repeat;
}
#nav-selbox #nav-arrow.navarrow_up {
    background: url(../media/design/btn-navarrow-up.png) no-repeat;
}
#nav-selbox #nav-infobox {
    background-color: #fff;left: -1px;padding: 0 10px;position: absolute;
    top: 29px;width: 179px;display: none;z-index: 1;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    moz-box-shadow: 4px 4px 5px #000;
    -webkit-box-shadow: 4px 4px 5px #000;
    box-shadow: 4px 4px 5px #000;
}
#nav-selbox #nav-infobox #nav-infobox-text {
    line-height: 15px;font-size: 12px;margin-top: 12px;
}
#nav-selbox #nav-infobox #nav-infobox-text p{
    font-size: 15px; line-height: 19px;
}
#nav-selbox #nav-infobox a.help {
    background: url(../media/design/btn-help.png) no-repeat;margin: 10px 0;
    display: block;width: 73px; height: 25px;float: right;
}
#nav-selbox #nav-infobox a.help span.btn {
    font-size: 12px;color: #fff;padding: 3px 0 0 8px;display: block;
    line-height: 14px;
}
#nav-selbox #nav-infobox a.help:hover {
    background: url(../media/design/btn-help-active.png) no-repeat;
}


/**
BOX NAVIGATION CONTENT
**/
#nav-box {
    width: 200px;height: 364px;position: absolute;top: 66px;left: 20px;
}
#nav-box span.hl {
    font-size: 18px;color: #ffffff;padding: 7px 0 0 10px;display: block;
}
#mcs_container {
    border: 0;
    height: 320px;
    left: 0;
    margin: 0;
    position: absolute;
    padding: 0;
    top: 32px;
    width: 200px;
}
#mcs_container .dragger {
    background: none repeat scroll 0 0 #555555;
    border-radius: 18px 18px 18px 18px;
    cursor: pointer;
    height: 9px;
    margin-left: -5px;
    overflow: hidden;
    position: absolute;
    text-align: center;
    width: 9px;
}
#mcs_container .customScrollBox {
    width: 200px;
}
#mcs_container .customScrollBox .container{
    width: 190px;
}
#mcs_container .dragger_container {
    border-left: 1px dotted #555555;
    cursor: pointer;
    float: left;
    height: 300px;
    margin: 10px 0 0 0;
    position: relative;
    width: 0;
}
#mcs_container h1 {
    margin: 10px 0;text-align: center;
}
#mcs_container ol {
    color:#19afcc;list-style-type: decimal; margin:10px 10px 10px 28px;
}
#mcs_container li {
    font-size: 15px;line-height: 13px;margin-bottom: 10px;
}
#mcs_container li span {
    font-size: 15px; line-height: 19px;
    color: #000000;
}




/**
BOX NAVIGATION BUTTONBAR
**/
#nav-buttonbar {
    position: absolute;bottom: 6px;left: 16px;
}
#nav-buttonbar .ul-buttonbar{

}
#nav-buttonbar .li-buttonbar {
    float: left;margin-right: 7px;margin-bottom: 4px;
}
#nav-buttonbar .li-buttonbar a {
    background: url(../media/design/btn-btnbar.png) no-repeat;
    display: block;width: 65px;height:28px;
}
#nav-buttonbar .li-buttonbar a:hover {
    background: url(../media/design/btn-btnbar-active.png) no-repeat;
}
#nav-buttonbar .li-buttonbar a.check {
    background: url(../media/design/btn-check.png) no-repeat;
}
#nav-buttonbar .li-buttonbar a.check:hover {
    background: url(../media/design/btn-check-active.png) no-repeat;
}
#nav-buttonbar .li-buttonbar a span {
    color: #fff;font-size: 12px;line-height: 12px;display: block;
    text-align: center;padding-top: 7px;height: 28px;width: 65px;

}
#nav-buttonbar .li-buttonbar a.check span {
    color: #000;
}

/**
INFOBOX
*/
div.infoborder {
    width: 450px;z-index: 1;cursor: move;position: absolute;
    border: 6px solid #1eb1db;top: 25%;left: 40%;background-color: #ffffff;

    -moz-border-radius: 10px;
    -webkit-border-radius:10px;
    border-radius: 10px;

    moz-box-shadow:
        inset 1px 1px 1px , /* Inset shadow */
        4px 4px 4px, /* Outset shadow */
        inset -999px 0 0 #fff; /* The background color */
    -webkit-box-shadow:
        inset 1px 1px 1px , /* Inset shadow */
        4px 4px 4px, /* Outset shadow */
        inset -999px 0 0 #fff; /* The background color */
    box-shadow:
        inset 1px 1px 1px , /* Inset shadow */
        4px 4px 4px, /* Outset shadow */
        inset -999px 0 0 #fff; /* The background color */

}
div.infoborder .infobox_close {
    width: 16px;height: 16px; background: url(../media/design/btn_infobox_close.png) no-repeat;
    position: absolute;right: -1px;top:0;z-index: 2;cursor: pointer;
}
div.infoborder h1 {
    color: #19AFCC;text-transform: uppercase;
    padding: 15px 20px 0px 20px;font-weight: bold;
}
div.infoborder h2 {
    color: #19AFCC;text-transform: uppercase;
    padding: 30px;font-weight: bold;
}
div.infoborder p {
    padding: 10px 20px;line-height: 21px;
}
div.msgbox h2{
    font-size: 15px; line-height: 19px;text-align: center;
}


/**
FOOTER
*/
a.footerlink {
    display: block;outline: none;
}
#box-footer {
    position: absolute;top: 512px;left: 12px;width: 890px; height: 60px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    /**for webkit brosers*/
    -webkit-box-reflect: below 14px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0, transparent), to(white));

}
/**for firefox*/
#box-footer-reflection {
    -moz-transform: scale(1, -1);
    background: -moz-linear-gradient(to top, rgba(255, 255, 255, 0) 0%, #EDEDED 100%) repeat scroll 0 0%, -moz-element(#box-footer) no-repeat scroll 0 0 transparent;
    height: 60px;
    left: 12px;
    opacity: 0.8;
    overflow: hidden;
    position: absolute;
    top: 587px;
    width: 890px;
}
#box-footer .footer-menu {
    background: url(../media/design/bg-footer-cross.png) no-repeat;
    width: 151px;height:58px;
}
#box-footer .ul-footer-menu{
    margin-left: 27px;padding-top: 7px;
}
#box-footer .li-footer-menu{
    float: left;margin-right: 7px;margin-bottom: 4px;
}
#box-footer .li-footer-menu span {
    display: block;width: 46px;height:22px;
}
#box-footer .li-footer-menu span.movie {
    background: url(../media/design/btn-movie.png) no-repeat;
}
#box-footer .li-footer-menu span.audio {
    background: url(../media/design/btn-audio.png) no-repeat;
}
#box-footer .li-footer-menu span.pictures {
    background: url(../media/design/btn-pictures.png) no-repeat;
}
#box-footer .li-footer-menu span.extra {
    background: url(../media/design/btn-extras.png) no-repeat;
}
#box-footer #footer-headline {
    position: absolute;left: 160px;top:20px;line-height: 15px;
    font-size: 24px;color: #000;
}
#box-footer #footer-logo {
    width: 231px; height: 41px;position: absolute;top: 9px;right: 12px;
    background: url(../media/design/logo.png) no-repeat;
}

/**
MENU-RIGHT
*/
#menu-right {
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    position: absolute;
    right: -251px;
    top: 285px;
}
#menu-right .ul-menu-right {
    list-style-type: none;
}
#menu-right .li-menu-right {
    float: left;margin-left: 12px;height: 20px;
}
#menu-right .li-menu-right a {
    background-color: #EDEDEC;
    color: #ffffff;font-size: 17px;height: 20px;
    background: url(../media/design/btn-menu-right.png) no-repeat;
    display: block;width: 123px;padding-top: 9px;
    text-align: center;letter-spacing: 1px;
}
#menu-right .li-menu-right a.on,
#menu-right .li-menu-right a:hover {
    background: url(../media/design/btn-menu-right-active.png) no-repeat;
}

/**
Layer
**/
#layer {
    width: 100%; height: 100%;
}
#layer #mcs_container {
    width: 100%;height: 515px;
}
#layer #mcs_container .customScrollBox {
    width: 100%;
}
#layer #mcs_container .customScrollBox .container{
    width: 97%;
}
#layer #mcs_container .dragger_container{
    height: 505px;
}
#layer #mcs_container .customScrollBox .content h2  {
    font-family: Geogrotesque-Regular;font-weight: bold;font-style: normal;
    color: #19AFCC;padding:0 30px;text-transform: uppercase;
}
#layer #mcs_container .customScrollBox .content p strong  {
    color: #19AFCC;text-transform: uppercase;
}
#layer #mcs_container .customScrollBox .content p {
    font-family: Geogrotesque-Regular;font-weight: normal;font-style: normal;
    font-size: 18px;line-height: 24px;
    color: #000;padding:0 30px;
}
#layer #mcs_container .customScrollBox .content p a {
    color: #19AFCC;
}
#layer #mcs_container .customScrollBox img {
    moz-box-shadow: 4px 4px 4px #888;
    -webkit-box-shadow: 4px 4px 4px #888;
    box-shadow: 4px 4px 4px #888;
}
#layer #mcs_container .customScrollBox img.doc {
    border: none;
}
#layer #mcs_container .customScrollBox div.layerimage {
    float:left;padding:0 30px;
}
#layer #mcs_container .customScrollBox div.layerimage img {
    width: 250px;
}
#layer #mcs_container .customScrollBox div.layertext {
    float: left;
}
#sb-title, #sb-info {
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 50;
    width: 100%;
}
#sb-nav-close {
    width: 16px;height: 16px;background: url(../media/design/btn_infobox_close.png) no-repeat;
}

/**
OVERWRITE SHADOWBOX
*/
#sb-wrapper-inner {
    border: 6px solid #1EB1DB; border-radius: 10px 10px 10px 10px;
    box-shadow: 1px 1px 1px inset, 4px 4px 4px, -999px 0 0 #FFFFFF inset;
}