pre {
    position: absolute;
    right: 0;
    top: 0;
    background: #c1c1c1;
    color: red;
    padding: 10px;
    z-index: 1000;
}

/* 
    Author     : Thomas Rothe <t.rothe@netz-giraffe.de>
*/
body, input {
    font-size: 12px;
}

html, body {
    height: 100%;
    min-height: 100%;
}
body#iCGenerator1 {
    background: url('/app/images/background/sky-GOT-background-generator-icg.jpg') no-repeat center center #000000;
    background-size: cover;
    background-attachment: fixed;
}
.container {
    z-index: 1000;
}
header h1 {
    color: #FFFFFF;
    font-size: 65px;
}
header p {
    color: #FFFFFF;
    font-size: 16px;
}
#firstNotice {
    margin: 0 0 20px 0;
    background-color: rgba(252, 248, 227, 0.7);
    color: #000000;

}
.steps h2 {
    text-align: right;
    color: #FFFFFF;
    font-size: 30px;
}
.idolcardPreview {
    width: 19%;
    margin: 3%;
    float: left;
    position: relative;
}

.idolcardPreview:last-child {
    margin-right: 0;
}
.idolcardPreview .idolcard-select {
    position: absolute;
    right: 0px;
    bottom: 0px;
    background: url('/app/images/idolcard-select-icon.png') no-repeat 0 0 transparent;
    width: 38px;
    height: 39px;
    display: none;
}
.idolcardPreview img {
    opacity: 0.4;
    cursor: pointer;
}
.idolcardPreview img.active {
    opacity: 1;
}
.appItem.alert-info {
    background-color: rgba(217, 237, 247, 0.7);
    border-color: rgba(217, 237, 247, 0.3);
}
.appItem h3 {
    margin-top: 0px;
    font-size: 30px;
    color: #FFFFFF;
}
.valid {
    background-color: #46b8da;
}
.invalid, .invalid a {
    background-color: #FF0000;
    color: #FFFFFF;
}
img.security-image, .inputTermsWrapper {
    margin-top: 20px;
    text-align: left;
}
label {
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
}
.btn-primary {
    color: #000;
    background-color: #ffffff;
    border-color: #e1e1e1;
}
#footerNav a {
    color: #000;
    font-size: 16px;
}
#footerNav div.pull-right a {
    font-size: 30px;
}
/* iCheck plugin Minimal skin, black
----------------------------------- */
.icheckbox_minimal,
.iradio_minimal {
    display: block;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    background: url(checkbox_minimal.png) no-repeat;
    border: none;
    cursor: pointer;
    float: left;
}

.icheckbox_minimal {
    background-position: 0 0;
    margin-right: 10px;
}
    .icheckbox_minimal.hover {
        background-position: -20px 0;
    }
    .icheckbox_minimal.checked {
        background-position: -40px 0;
    }
    .icheckbox_minimal.disabled {
        background-position: -60px 0;
        cursor: default;
    }
    .icheckbox_minimal.checked.disabled {
        background-position: -80px 0;
    }

.iradio_minimal {
    background-position: -100px 0;
}
    .iradio_minimal.hover {
        background-position: -120px 0;
    }
    .iradio_minimal.checked {
        background-position: -140px 0;
    }
    .iradio_minimal.disabled {
        background-position: -160px 0;
        cursor: default;
    }
    .iradio_minimal.checked.disabled {
        background-position: -180px 0;
    }

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-moz-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (min-device-pixel-ratio: 1.5) {
    .icheckbox_minimal,
    .iradio_minimal {
        background-image: url(checkbox_minimal@2x.png);
        -webkit-background-size: 200px 20px;
        background-size: 200px 20px;
    }
}

/*
#generatorApp nav {
    margin: 30px 0 10px;
}
#generatorApp nav .navItem {
    cursor: pointer;
}
#generatorApp nav .navItem span {
    display: block;
    padding: 7px 10px;
    background-color: rgba(245,245,245, 0.6);
    font-size: 24px;
    color: #000000;
    line-height: 30px;
}
#generatorApp nav .navItem.active span {
    color: #FFFFFF;
}
#generatorApp #firstNotice {
    margin: 0px;
}
#generatorApp 
*/



/* classes */
.t03ease {
    -webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.t03opa {
    -webkit-transition:opacity 0.3s ease 0s;
	-moz-transition:opacity 0.3s ease 0s;
	-o-transition:opacity 0.3s ease 0s;
	transition:opacity 0.3s ease 0s;
}
.opa1 {
    opacity: 1 !important;
}

body#iCGenerator2 {
    background: #FFFFFF url('/app/images/background/Antenne-background-generator_Ansicht.jpg') no-repeat center center ;
    background-size: 100% 100%;
    position: relative;
}
#iCGenerator2 .idolcardPreview {
    width: 45%;
}
#iCGenerator2 #footerBox.appItem.alert-info {
    background-color: transparent;
    border-color: transparent;
}
#iCGenerator2 #customerBranding {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 337px;
    height: 178px;
    background: transparent url('/app/images/background/Logo_Pausenhof-Konzert.png') no-repeat 0 0;
}
body#iCGenerator3 {
    background: url("/app/images/wrapper/vox_cdrb/background/VOX-Rotes-Band-Hintergrund-1920.jpg") no-repeat 0 0 transparent;
    background-size: 100% 100%;
}
@media (max-width : 1388px)  {
  body#iCGenerator3 {
    background: url("/app/images/wrapper/vox_cdrb/background/VOX-Rotes-Band-Hintergrund-1388.jpg") no-repeat 0 0 transparent;
    background-size: 100% 100%;
  }
}
@media (max-width : 1024px)  {
  body#iCGenerator3 {
    background: url("/app/images/wrapper/vox_cdrb/background/VOX-Rotes-Band-Hintergrund-1024.jpg") no-repeat 0 0 transparent;
    background-size: 100% 100%;
  }
}
@media (orientation: portrait)  {
  body#iCGenerator3 {
    background-image: url("/app/images/wrapper/vox_cdrb/background/VOX-Rotes-Band-Hintergrund-440-mobil.jpg");
    background-size: 100% 100%;
  }
  .img-responsive { width: 100% !important; }
}

@media only screen and (max-width:1100px) {
    body#iCGenerator2 {
        padding-top: 190px;
    }
    #iCGenerator2 #customerBranding {
        left: 30%;
    }

}
@media only screen and (max-width:550px) {
    #iCGenerator2 #customerBranding {
        left: 10%;
    }

}