/***************************
 *  MAIN STRUCTURE         *
 ***************************/

#wrapper {
    position:absolute;
    left:0;
    top:0;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,1);
    background-image:url(../img/BG_H0.png);
    background-repeat: repeat-x;
}

#header {
    position:relative;
    margin:0 auto;
    width:1024px;
    height:100px;
    /*background-color:rgba(255,255,255, 1);*/
}

#container {
    position:relative;
    width:100%;
    min-height:110vh;
    height:auto;
    /*background-color:rgba(255,255,255, 1);*/
}

#container #main {
    position:relative;
    margin: 0 auto;
    width:1024px;
    max-width:100%;
    min-height:400px;
    height:auto;
    font-size:14px;
}

#container #main p {
    font-size:14px;
    line-height:1.5em;
}

#footer {
    position:fixed;
    bottom:0;
    margin:0 auto;
    width:100%;
    height:60px;
    background-image:url(../img/footer_BG_60.png);
    color:#ffffff;
}

/*********************************
 * HEADER                        *
 *********************************/
#header .inside {
    width:156px;
    margin: 0 auto;
    padding:0;
}

#breadcrumb {
    position:relative;
    width:100%;
    height:auto;
}

#breadcrumb .crumb {
    list-style-type:none;
    width:100%;
    margin:12px 0 0 0;
    height:20px;
    text-transform: uppercase;
}

#breadcrumb .crumb li {
    float:left;
    padding-right:5px;
}

#breadcrumb .crumb li:last-child {
    cursor:pointer;
}

#breadcrumb .crumb li:not(:last-child):after {
    content: "  |";
}
/*********************************
 * FOOTER                        *
 *********************************/
#footer .inside {
    width:100%;
    margin:20px auto;
    position:relative
}

#footer .inside .text_ts{
    width:200px;
    margin:0 auto;
    text-align:center;
    font-size:20px;
}

#footer .inside .text_ip{
    position:absolute;
    left:20px;
    top:6px;
}

#footer .inside .text_cr{
    position:absolute;
    right:20px;
    top:6px;
}

/**********************************
 * CONTAINER / LEFT               *
 **********************************/
#container #left {
    position: relative;
    left:0;
    top:0;
    width:100%;
    height: 300px;
    /*-webkit-box-shadow: 0 -8px 6px -6px #ababab;
       -moz-box-shadow: 0 -8px 6px -6px #ababab;
            box-shadow: 0 -8px 6px -6px #ababab;
    */
}
#container #left .camera_wrap {
    height:300px;
}

#container #left #site_nav {
    position:relative;
    height:100px;
    width:1024px;
    margin:0 auto;
    top: 30px;
}

#container #left #site_nav ul {
    width:150px;
    height:300px;
    position:absolute;
    list-style-type: none;
    cursor: pointer;
}

#container #left #site_nav li {
    width:150px;
    height: 36px;
    /*text-transform: uppercase;*/
    font-weight:bold;
    margin-bottom: 5px;
    padding:0;
    color: #FFFFFF;
    background-color: rgba(0, 0, 105, 0.4);
}

#container #left #site_nav li > div {
    width:140px;
    height: 26px;
    padding: 10px 0 0 10px;
    margin:0;
}

#container #left #site_nav li.mDual > div {
    height: 33px;
    padding: 3px 0 0 10px;
}

#container #left #site_nav li.active {
    background-color: rgba(0, 0, 105, 1);
}

#container #left #site_nav li.active > ul {

}


#container #left #site_nav ul.nav_l2,
#container #left #site_nav ul.nav_l3,
#container #left #site_nav ul.nav_l4,
#container #left #site_nav ul.nav_l5 {left:155px; top:0;}

/*
#container #left #site_nav li.active > ul.nav_l2,
#container #left #site_nav li.active > ul.nav_l3,
#container #left #site_nav li.active > ul.nav_l4,
#container #left #site_nav li.active > ul.nav_l5 {
    -webkit-animation-name: subMenuAnimation;
    -webkit-animation-duration: 2s;

    animation-name: subMenuAnimation;
    animation-duration: 2s;
    height:300px;
    top:0;
}

@-webkit-keyframes subMenuAnimation {
    0%   {height:0px;}
    100% {height:300px;overflow:visible;}
}

@keyframes subMenuAnimation {
    0%   {height:0px;}
    100% {height:300px;overflow:visible;}
}
*/
/**********************************
 * CONTAINER MAIN - HEAD          *
 **********************************/
#main .content-menu {
    position:relative;
    width:100%;
    display:block;
    height:45px;
}

#main .content-menu.dsh {
    height:90px;
}

#main .mainHead {
    position:relative;
    width:1046px;
    background-color:rgba(222,0,222, .0);
    margin:0;
    display:none;
    list-style-type: none;
}

#main .mainHead.active {
    display:block;
}


#main .mainHead .mButton {
    position:relative;
    background-color:rgba(255,255,255, 0.9);
    background-image:url(../img/BG_white.png);
    background-position: -10px;
    float:left;
    width: 220px;
    height: 12px;
    padding: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #000069;
    margin:5px 18px 5px 0;
    border: 1px solid #000069;
    cursor:pointer;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
}

#main .mainHead .mButton span {
        text-transform: uppercase;
}

#main .mainHead .mButton > .mMessage {
    position:absolute;
    top:32px;
    left:0;
    padding:10px;
    display:none;
    background-color: rgba(255,255,255, 0.9);
    color: #000069;
    border:1px solid #000069;
    font-weight: normal;
    z-index:100;
}

#main .mainHead .mButton:hover > .mMessage {

}

/**********************************
 * CONTAINER MAIN CONTENT         *
 **********************************/
#main #content .toggledContent.active {
    position:relative;
    min-height:280px;
}

#main #content {
    padding-bottom:80px;
    position:relative;
}

#main #content h1,
#main #content p {
    color: #000069;
    padding:10px;
    margin:10px 0;
}

#main #content h1 {
    background-image:url(../img/BG_white.png);
    border:1px solid #000069;
    font-size: 18px;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
}

#main #content p {
    -webkit-column-width: 220px;
    -moz-column-width: 220px;
    column-width: 220px;
}

#main #content .imgContainer {
    width:240px;
    height:180px;
    overflow:hidden;
    border: 1px solid #000069;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
}

#main #content .imgContainer.img_1 { float:left; margin:15px 20px 15px 0; }
#main #content .imgContainer.img_2 { float:right; margin:15px 0 15px 20px; }
#main #content .imgContainer.img_3 { float:left; margin:15px 20px 15px 0; }
#main #content .imgContainer.img_4 { float:right; margin:15px 0 15px 20px; }
#main #content .imgContainer.img_5 { float:left; margin:15px 20px 15px 0; }
#main #content .imgContainer.img_6 { float:right; margin:15px 0 15px 20px; }
#main #content .imgContainer.img_7 { float:left; margin:15px 20px 15px 0; }
#main #content .imgContainer.img_8 { float:right; margin:15px 0 15px 20px; }

#main #content .go-top { position: absolute; bottom:20px; right:-20px; font-weight:bold; cursor:pointer; color:#000069; display:none;}

#main #content .toolBarRight {
    position:absolute;
    right:0px;
    top:0;
    height:46px;
    width:400px;
}
#main #content .toolBarRight .toolIcon {
    background-image: url(../img/icon/1x1.png);
    width:26px;
    height:26px;
    float:right;
    margin-top:10px;
    margin-right:10px;
    background-size: 26px 26px;
    background-repeat: no-repeat;
    overflow:hidden;
    text-ident:-9999px;
    cursor: pointer;
}

#main #content .toolBarRight .toolIcon.show3D,
#main #content .toolBarRight .toolIcon.show3Da {  background-image: url(../img/icon/icon3D_.png); }
#main #content .toolBarRight .toolIcon.showPDF {  background-image: url(../img/icon/iconPD_.png); }
#main #content .toolBarRight .toolIcon.showPIG {  background-image: url(../img/icon/iconIG_.png); }
#main #content .toolBarRight .toolIcon.showINF {  background-image: url(../img/icon/iconI_.png); }
#main #content .toolBarRight .toolIcon.showVID {  background-image: url(../img/icon/iconV_.png); }
#main #content .toolBarRight .toolIcon.showGRAF {  background-image: url(../img/icon/iconGR_.png); }

#main #content .toolBarRight .toolIcon.show3D:hover,
#main #content .toolBarRight .toolIcon.show3Da:hover {  background-image: url(../img/icon/icon3D.png); }
#main #content .toolBarRight .toolIcon.showPDF:hover {  background-image: url(../img/icon/iconPD.png); }
#main #content .toolBarRight .toolIcon.showPIG:hover {  background-image: url(../img/icon/iconIG.png); }
#main #content .toolBarRight .toolIcon.showINF:hover {  background-image: url(../img/icon/iconI.png); }
#main #content .toolBarRight .toolIcon.showVID:hover {  background-image: url(../img/icon/iconV.png); }
#main #content .toolBarRight .toolIcon.showGRAF:hover {  background-image: url(../img/icon/iconGR.png); }

#info-field_1 {
    background-color:red;
}

#info-field_2 {
    background-color:blue;
}

.info-close {
    position:absolute;
    top:10px;
    right:10px;
    height:18px;
    width:18px;
}

#gototop {
    position:fixed;
    bottom:80px;
    right:20px;
    height: 26px;
    width: 26px;
    cursor:pointer;
}

/**********************************
 * EFECTS & OVERRODES             *
 **********************************/
.border_shadow {
    border:1px solid #000069;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,105,105,0.7);
       -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,105,0.7);
            box-shadow: 1px 1px 5px 0px rgba(105,105,105,0.7);
}



/**********************************
 * HELPER CLASS                   *
 **********************************/
.shadow_inset {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

.shadow_bottom {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

.camera_overlayer {
    background-image:url(../img/BG_H2_.png);
}


/*** ANPASSUNG ***/
@media (max-width: 1024px) {

.cameraContents {  width:100%; }
.cameraContent.cameracurrent { left:20%; }
.camera_wrap .camera_pag { width:100%; }
#main .mainHead { width : 100%; }
#header { width:100%; }


@-webkit-keyframes cameraCaptionLeft {
    0%   {left:300%;}
    90%  {left:25%; }
    100% {left:20%; }
}

/* Standard syntax */
@keyframes cameraCaptionLeft {
    0%   {left:300%;}
    90%  {left:25%; }
    100% {left:20%; }
}

}