body, html {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: 100%; 
    font-family: Arial;
    background: #F0F0F0;         
}

/* Header 
#########################
*/

.header {
    width: inherit;
    height: 8%;       
}

.header div {
    float: left;    
    height: 100%;      
}

.header img {
    height: 70%;
}

.headerLeft {
    width: 25%;
    text-align: center;
}

.header p {
    position: relative;
    top: -10px;
}

.headerCenter, .headerRight {
    width: 37.5%;       
}

.headerRight {
    text-align: center;
    cursor: pointer;
}

.headerImage {
    width: 100%;
    text-align: center;
    padding-bottom: 25px;
    padding-top: 15px;
}

/* Content 
########################
*/

.content {
    width: inherit;
    height: 78.5%;
    clear: both; 
}

.content div {
    float: left;
}

.pageContent {
    width: 75%;
    height: 100%;
    font-size: 10pt;
    overflow-y: auto;        
}

.pageContentItem {
    width: 100%;   
    outline: 1px solid grey;    
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0); 
}

.pageContentItemRight {
    width: 55.4%;       
    float: left;                
}

.pageContentItemLeft {
    width: 44.5%;      
    float: left;      
}

.templateContent {
    width:100%;
}

/*
index.html
*/

.pageContentHome {
    width: 100%;
    height: 100%;
    font-size: 8pt;  
}

.pageContentItemStart {
    width: 100%;
}

.boxContentStartRight {
    border: 1px solid grey;
    height: 15em;
    width: 80%;
    float: right !important;
}

.boxContentStartRight p {
    position: relative;
    left: 7%;
    width: 90%;
}

.boxContentStart {
    border: 1px solid grey;
    height: 15em;
    width: 80%;
}

.boxContentStart p {
    position: relative;
    left: 7%;
    width: 90%;
}

/*BOXEN*/

.navContent {
    width: 100%;
}

.navContentLeft {
    float: left;
    width: 44.5%;
    height: 4em;
    outline: 1px solid grey;
    font-size: 10pt; 
}

.navContentRight {
    float: left;
    width: 55.4%;
    height: 4em;
    outline: 1px solid grey;
    font-size: 10pt; 
}

.boxContent {    
    height: 10.2em;
    width: 100%;      
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);      
}

.boxContent p {
    position: relative;
    left: 7%;
    width: 90%;
}

.InfoImg {
    position: relative;
    left: 7%;
    width: 90%;
    cursor: pointer;
}

.boxContentSmall {
    outline: 1px solid grey;  
    height: 5.1em;
    width: 100%;  
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);  
}

.textBox {
    padding-top: 10px;
    width: 100%;
    border-bottom: 1px solid grey;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0); 
}

.textBox p {
    padding-left: 10px;
}

.fullBox {
    width: 100%;
    height: 5em;
    color: white;
    border-bottom: 1px white solid;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0); 
}

.fullBox label {
    position: relative;
    left: 2%;
    width: 90%;
    top: 10%;
}

/* Footer 
###########################
*/

.footer {
    width: 100%;
    height: 13%;
    font-size: 8pt;
}

.footer div {
    float: left;
}

.footerLeft {
    width: 25%;
    text-align: center;
    height: 100%;
}

.footerLeft p {
    position: relative;
    width: 90%;
    bottom: 15%;
}

.footerRight {
    width: 42%; 
    height: 100%;
}

.footerRight p {
    position: relative;
    left: 3%;
    width: 90%;
    bottom: 12%;
}

.footerCenter {
    width: 33%;
    text-align: center;
    height: 100%;
}

.footerCenter span {
    font-size: 6pt;
}

.footerRightTop, .footerRightBottom {
    width: 100%;  
    height: 50% !important;
}

.footerPreis {
    font-size: 16pt;
}

/* elemente 
###########################
*/

button {
    width: 100%;
    height: 100%;
    font-size: 16pt;
}

.navigation button {
    font-size: 8pt;
}

.inputText {
    height: 5em;
    width: 100%;
    font-size: 2em;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0); 
}

.inputTextContent {
    height: 5.55em;
    width: 100%;
    font-size: 2em;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);  
}

input[type="text"], input[type="email"], input[type="number"], button {
    border: 0; 
    text-align: center;  
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0); 
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #0053a1 inset;
    -webkit-text-fill-color: white !important;
}

.inputTextBig {
    width: 75%;
    float: right;
    height: 3em;
}

.classDownloadAngebotPDF, .classDownloadOrderPDF {
    font-size: 14pt !important;
}

.btn-default {
    height: 2.3em;
}

/* Navigation 
###############################
*/

.navigation {
    width: 25%;
    height: 100%;           
}

.navigation div {
    width: 100%;
    height: 12.5%;
    word-wrap: break-word; 
}

.imgNavi {
    padding-top: 2px;
    height: 45% !important;
}

.borderBottom {
    border-bottom: 1px solid white;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0); 
}

.active {
    background-color: grey !important;
    color: #7CC212;
}

/*
Übersicht
*/

.tblUebersicht {
    width: 100%;
    border: none; 
    border-collapse: collapse;
    font-size: 10pt;
}

.tblUebersicht th {
    padding-bottom: 10px;
    font-size: 12pt;
}

.tblUebersicht td {
    padding-left: 15px;
    padding-bottom: 10px;
}

/* Farben und Schriftgrößen 
############################
*/

.bgDarkBlue {
    background-color: #032C52 !important;
    color: #032C52 !important;  
}

.bgGrey2 {
    background-color: #D0D0D0;
}

.bgGrey3 {
    background-color: #E0E0E0;
}

.bgDarkGrey4 {
    background-color: #3A3A3A;
    color: white;    
}

.bgDarkGrey3 {
    background-color: #525252;
    color: white;    
}

.bgDarkGrey2 {
    background-color: #808080;
    color: white;    
}

.bgBlue {
    background-color: #0053a1;
    color: white;
}

.bgGreen {
    background-color: #95c121;
}

.bgRed {
    background-color: #AA2828;
    color: white;
}

.fontSize18 {
    font-size: 18pt;
}

.fontSize12 {
    font-size: 12pt !important;
}

.fontSize16 {
    font-size: 16pt;
}

.fontColorRed {
    color: #AA2828;
}

.fontColorGrey {
    color: #D0D0D0;
    background-color: #969696 !important;
}

.fontColorWhite {
    color: #FFFFFF;
}

.colorBlack {
    color: #000000;
}

.pixGif {
    height: 1px;
    width: 1px;
}

/* Sprites */

.auflage_a, .auflage_b, .auflage_i, .bindung_a, .bindung_b, .bindung_i, .dauer_a, .dauer_b, .dauer_i, .euro, .extras_a, .extras_b, .extras_i, .format_a, .format_b, .format_i, .info_button, .inhalt_a, .inhalt_b, .inhalt_i, .achtung_button, .angebot_a, .angebot_b, .angebot_i, .umschlag_a, .umschlag_b, .umschlag_i, .logo, .lupe, .menue, .produktinfo, .go, .info_button, .close{
    background: url(sprites.png) no-repeat;
}

.auflage_a{
    background-position: -500px -50px ;
    width: 26px;
    height: 25px;
}

.auflage_b{
    background-position: -450px -51px ;
    width: 26px;
    height: 25px;
}

.auflage_i{
    background-position: -401px -48px ;
    width: 26px;
    height: 25px;
}

.bindung_a{
    background-position: -352px -49px ;
    width: 28px;
    height: 25px;
}

.bindung_b{
    background-position: -302px -51px ;
    width: 28px;
    height: 25px;
}

.bindung_i{
    background-position: -251px -48px ;
    width: 28px;
    height: 25px;
}

.dauer_a{
    background-position: -204px -53px ;
    width: 25px;
    height: 25px;
}

.dauer_b{
    background-position: -151px -50px ;
    width: 25px;
    height: 25px;
}

.dauer_i{
    background-position: -101px -51px ;
    width: 25px;
    height: 25px;
}

.euro{
    background-position: -49px -49px ;
    width: 30px;
    height: 30px;
}

.extras_a{
    background-position: 0 -49px ;
    width: 25px;
    height: 25px;
}

.extras_b{
    background-position: -600px 0;
    width: 25px;
    height: 25px;
}

.extras_i{
    background-position: -549px 0;
    width: 25px;
    height: 25px;
}

.format_a{
    background-position: -497px 0;
    width: 20px;
    height: 25px;
}

.format_b{
    background-position: -448px 0;
    width: 20px;
    height: 25px;
}

.format_i{
    background-position: -399px 0;
    width: 19px;
    height: 25px;
}

.info_button{
    background-position: -351px 0;
    width: 25px;
    height: 25px;
}

.inhalt_a{
    background-position: -302px 0;
    width: 39px;
    height: 25px;
}

.inhalt_b{
    background-position: -250px 0;
    width: 39px;
    height: 25px;
}

.inhalt_i{
    background-position: -201px 0;
    width: 39px;
    height: 25px;
}

.achtung_button{
    background-position: -149px 0;
    width: 25px;
    height: 25px;
}

.angebot_a{
    background-position: -99px 0;
    width: 20px;
    height: 25px;
}

.angebot_b{
    background-position: -50px 0;
    width: 19px;
    height: 25px;
}

.angebot_i{
    background-position: 0 0;
    width: 19px;
    height: 25px;
}

.umschlag_a{
    background-position: -451px -97px ;
    width: 22px;
    height: 25px;
}

.umschlag_b{
    background-position: -399px -99px ;
    width: 22px;
    height: 25px;
}

.umschlag_i{
    background-position: -349px -98px ;
    width: 22px;
    height: 25px;
}

.logo{
    background-position: 0 -102px ;
    width: 200px;
    height: 73px;
}

.lupe{
    background-position: -301px -96px ;
    width: 31px;
    height: 30px;
}

.menue{
    background-position: -221px -94px ;
    width: 30px;
    height: 30px;
}

.produktinfo{
    background-position: -266px -101px ;
    width: 14px;
    height: 30px;
}

.go{
    background-position: -551px -45px ;
    width: 30px;
    height: 30px;
}

.info_button{
    background-position: -601px -47px ;
    width: 25px;
    height: 25px;
}

.close{
    background-position: -500px -98px ;
    width: 16px;
    height: 16px;
}

[role="button"] {
    cursor: pointer;
}
.fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}
.fade.in {
    opacity: 1;
}
.collapse {
    display: none;
}
.collapse.in {
    display: block;
}
.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000000;
    text-shadow: 0 1px 0 #ffffff;
    opacity: 0.2;
    filter: alpha(opacity=20);
}
.close:hover,
.close:focus {
    color: #000000;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.5;
    filter: alpha(opacity=50);
}
button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}

/* Popup */

.modal-open {
    overflow: hidden;
}
.modal {
    display: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.modal.fade .modal-dialog {
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
.modal-content {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #999999;
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    outline: 0;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000000;
}
.modal-backdrop.fade {
    opacity: 0;
    filter: alpha(opacity=0);
}
.modal-backdrop.in {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
    margin-top: -2px;
}
.modal-title {
    margin: 0;
    line-height: 1.42857143;
}
.modal-body {
    position: relative;
    padding: 15px;
}
.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
    margin-left: 5px;
    margin-bottom: 0;
}
.modal-footer .btn-group .btn + .btn {
    margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
    margin-left: 0;
}
.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}
@media (min-width: 768px) {
    .modal-dialog {
        width: 600px !important;
        margin: 30px auto;
    }
    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
    .modal-sm {
        width: 300px;
    }
}
@media (min-width: 992px) {
    .modal-lg {
        width: 900px !important;
    }
}
.clearfix:before,
.clearfix:after,
.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
    content: " ";
    display: table;
}
.clearfix:after,
.modal-header:after,
.modal-footer:after {
    clear: both;
}

.modal-title {
    text-align: center;
}

.textDisplay {
    text-align: center;
    font-size: 14pt;
}

/* Ladebalken */

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../images/ajaxloader.gif) center no-repeat #fff;
}

@media (max-width: 320px) { 

    .footerCenter {
        width: 33%;
        text-align: center;
        height: 100%;
    }

    .footerCenter span {
        font-size: 4pt;
    }

    .navigation button {         
        font-size: 6pt !important;           
    }

    .header {
        width: inherit;
        height: 6%;       
    }

    .footer {
        width: 100%;
        height: 15%;
        font-size: 8pt;
    }

    .content {
        width: inherit;
        height: 78%;
        clear: both; 
    }
}

@media only screen and (min-width: 90.063em) {
    .footer {
       height: 10.5% !important;
    }

    .footerCenter {
        font-size: 10pt !important;
    }

    .content {
        height: 84.3% !important;
    }

    .header {
        height: 5% !important;
    }

    .footerLeft p {
        bottom: 3% !important;
    }

    .navigation div {
        width: 100%;
        height: 12.7%;
        word-wrap: break-word;
    }
} /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */