/* Online Designer */
.online-designer h1 {
}
.online-designer h2 {
    color: #898989;
    padding: 10px 0 0 0 !important;
}
.designer-main-label {
    color: #003565;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    padding: 0 0 20px 0;
}
.designs-options {
    height: 40px;
    display: block;
    padding: 0 !important;
}
.designs-options li {
    height: 20px;
    padding: 10px;
    color: #b5b7b7;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    background-color: #f0f0f0;
}
.designs-options li:hover {
    color: #003565;
    position: relative;
}
.designs-options li.active {
    color: #003565;
    position: relative;
    background-color: #ffffff;
}
.designer-slide-show {
    z-index: 5;
    width: 860px;
    height: 400px;
    margin: 35px auto 0;
}
.slideshow-steps {
    z-index: 10;
    width: 860px;
    height: 7px;
    margin: 0 auto;
    position: relative;
}
.designer-slide-show .slideshow-steps span {
    width: 65px;
    height: 7px;
    position: absolute;
    display: inline-block;
    border-left: 1px solid #ffffff;
}
.slideshow-steps span.active {
    top: -22px;
    width: 64px;
    z-index: 10;
    height: 28px;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
}
.slideshow-steps span.slider_start {
    left: 0;
    width: 340px;
    cursor: default;
    border-left: none;
    background: #fecb96; /* Old browsers */
    background: -moz-linear-gradient(left, #fecb96 0%, #946e49 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #fecb96 0%,#946e49 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #fecb96 0%,#946e49 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.slideshow-steps span.slider_end {
    left: 795px;
    cursor: default;
    background-color: #c0d1e5;
}
.slideshow-steps span.slider_1 {
    left: 340px;
    background: #936e4a; /* Old browsers */
    background: -moz-linear-gradient(left, #936e4a 0%, #616e71 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #936e4a 0%,#616e71 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #936e4a 0%,#616e71 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.slideshow-steps span.slider_2 {
    left: 405px;
    background: #5f6e73; /* Old browsers */
    background: -moz-linear-gradient(left, #5f6e73 0%, #416e94 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #5f6e73 0%,#416e94 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #5f6e73 0%,#416e94 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.slideshow-steps span.slider_3 {
    left: 470px;
    background: #416e95; /* Old browsers */
    background: -moz-linear-gradient(left, #416e95 0%, #4479ab 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #416e95 0%,#4479ab 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #416e95 0%,#4479ab 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.slideshow-steps span.slider_4 {
    left: 535px;
    background: #447aac; /* Old browsers */
    background: -moz-linear-gradient(left, #447aac 0%, #5f90bf 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #447aac 0%,#5f90bf 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #447aac 0%,#5f90bf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.slideshow-steps span.slider_5 {
    left: 600px;
    background: #6091c0; /* Old browsers */
    background: -moz-linear-gradient(left, #6091c0 1%, #87abd0 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #6091c0 1%,#87abd0 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #6091c0 1%,#87abd0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.slideshow-steps span.slider_6 {
    left: 665px;
    background: #88acd0; /* Old browsers */
    background: -moz-linear-gradient(left, #88acd0 0%, #acc3dd 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #88acd0 0%,#acc3dd 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #88acd0 0%,#acc3dd 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.slideshow-steps span.slider_7 {
    left: 730px;
    background: #adc4dd; /* Old browsers */
    background: -moz-linear-gradient(left, #adc4dd 0%, #c0d1e5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #adc4dd 0%,#c0d1e5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #adc4dd 0%,#c0d1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.slide-nav {
    top: 0;
    width: 860px;
    margin: 0 auto;
    position: relative !important;
}
.slide-scroll-button {
    z-index: 10;
    width: 23px;
    height: 42px;
    position: absolute;
}
.slide-scroll-button-prev {
    left: 20px;
    top: -230px;
    background: url(/load/images/slide-prev-weiss.png) no-repeat scroll 0 0;
}
.slide-scroll-button-prev:hover {
    background: url(/load/images/slide-prev-blau.png) no-repeat scroll 0 0;
}
.slide-scroll-button-next {
    right: 20px;
    top: -230px;
    background: url(/load/images/slide-next-weiss.png) no-repeat scroll 0 0;
}
.slide-scroll-button-next:hover {
    background: url(/load/images/slide-next-blau.png) no-repeat scroll 0 0;
}
.designer-process-preview {
    display: none;
    width: 860px;
    margin: 35px auto 0;
    border: 1px solid #898989;
}
.designer-process-preview img {
    display: block;
}
.designer-container {
    padding: 25px;
    margin: 35px 0 0 0;
    background-color: #f0f0f0;
}
.designer-form-options {
    display: none;
}
.designer-container div.designer-container-content {
    padding: 30px 15px;
    margin: 0 0 20px 0;
    position: relative;
    background-color: #ffffff;
}
.designer-container img.designer-product-image {
    width: auto;
    height: 153px;
    display: block;
    padding: 0 56px 0 0;
    position: absolute;
}
.designer-container img.designer-product-image.top-0 {
    top: 0;
}
.designer-container img.designer-product-image.top-1 {
    top: 45px;
}
.designer-container img.designer-product-image.top-2 {
    top: 55px;
}
.designer-container div.designer-product {
    left: 209px;
    width: 560px;
    position: relative;
    background-color: #ffffff;
}
.designer-button {
    float: right;
    width: 180px;
    height: 36px;
    border: none;
    outline: none;
    display: block;
    font-size: 16px;
    text-align: left;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 5px 10px;
    color: #ffffff !important;
    background: url(/load/images/next.png) no-repeat scroll 170px 13px #003565;
}
a.designer-button {
    line-height: 36px;
}
.designer-button-product-1 {
    width: 220px;
    padding: 0 0 0 30px;
    float: left !important;
    color: #003565 !important;
    background: url(/load/images/back.png) no-repeat scroll 5px 13px transparent;
}
.designer-button-product-1:hover,
.designer-button-product-1:focus {
    text-decoration: underline;
}
.designer-button-product-2 {
    width: 230px;
    background: url(/load/images/next.png) no-repeat scroll 205px 13px #003565;
}
.designer-container div .iradio {
    margin: 0;
    padding: 0;
    float: left;
    width: 30px;
}
.online-designer-tipp {
    color: #fd7f0e;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 0 0 30px 0;
}
.designer-option {
    display: none;
    line-height: 22px !important;
    margin: 6px 0 12px !important;
}
.designer-container b {
    font-size: 16px;
    line-height: 25px;
    display: inline-block;
}
.designer-container-product b.top {
    display: block;
    font-size: 18px;
    text-align: center;
    padding: 0 0 30px 0;
}
.designer-container-product .designer-product div.designer-product-option {
    display: block;
    padding: 0 0 5px 0;
}
.designer-container-product .designer-product.format-float div.designer-product-option {
    float: left;
    width: 240px;
    display: block;
    padding: 0 0 2px 0;
}
.designer-container-product div.format {
    float: left;
    line-height: 14px;
}
.designer-container-product div.format b {
    float: left;
    line-height: 14px;
    padding: 0 5px 0 0;
    display: inline-block;
}
.designer-iframe-wrapper {
    height: 600px;
}
.designer-iframe-wrapper .fullscreen-button {
    top: 0px;
    right: 0px;
    width: 40px;
    height: 40px;
    color: #003565;
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    position: absolute;
    background: url(/load/images/designer-fullscreen-buttons.png) top left;
}
.designer-iframe-wrapper .fullscreen-button:hover {
    background-position: bottom left;
}
.designer-iframe-wrapper.fullscreen .fullscreen-button {
    background-position: top right;
}
.designer-iframe-wrapper.fullscreen .fullscreen-button:hover {
    background-position: bottom right;
}
/* Navi */
.template-notemplatesfound {
    display: none;
}
.template-search-container {
    padding: 15px;
    border-bottom: 15px solid #ffffff;
}
.template-search {
    width: 213px;
    padding: 5px;
    margin: 5px 0px 0px;
    border: 1px solid #ffffff;
    background: url(/load/images/search_50x50.png) no-repeat 180px 0 #ffffff;
}
.template-navi {
    width: 255px;
    cursor: pointer;
    position: relative;
    vertical-align: top;
    display: inline-block;
    background-color: #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}
.template-navi .template-label {
    display: block;
    cursor: pointer;
    margin: 15px 15px 0;
    background-color: #ffffff;
    padding: 5px 5px 5px 15px;
}
.template-navi .template-label:hover {
    color: #fd7f0e;
}
.template-navi .category-group {
    margin: 5px 15px 15px;
    background-color: #ffffff;
}
.template-navi div.category-label {
    width: 200px;
    padding: 5px 0;
    margin: 0 15px;
    display: block;
    cursor: pointer;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}
.template-navi div.category-label.last {
    border-bottom: none;
}
.template-navi .category-group .category-group {
    display: none;
}
.template-navi .active > div.category-label {
    font-weight: bold;
}
.template-navi .active > ul.category-group {
    display: block;
}
.template-navi .child-indicator {
    display: none;
    color: #fd7f0e;
    font-weight: normal;
}
.template-navi .child-indicator.has-childs {
    top: 0;
    right: 0;
    width: 20px;
    font-size: 16pt;
    line-height: 18px;
    position: absolute;
    display: inline-block;
}
.template-navi .category-group div:hover {
    color: #fd7f0e;
}
.format-group {
    background-color: #f0f0f0;
}
#category-label_all {
    display: block;
}
#kategorieGruppe_0_all {
    display: block;
}
/* Templates */
.template-wrapper {
    width: 580px;
    margin: 0 0 0 20px;
    vertical-align: top;
    display: inline-block;
}
.template-wrapper .designs-infos {
    padding: 30px 0 0;
}
.template-wrapper .format-label {
    display: block;
    font-weight: bold;
    padding: 10px 15px;
    background: #f0f0f0;
    border: solid #ffffff;
    border-width: 30px 0px 5px;
}
.template-wrapper .format-group {
    padding-top: 30px !important;
}
.template-container {
    background-color: #ffffff;
}
.template-container ul {
    padding: 0 !important;
}
.template-container h1 {
    margin: 0;
    padding: 0;
    text-align: center;
}
.template-container h2,
.template-container h3,
.template-container h4 {
    text-align: left;
    margin: 0 !important;
    padding-bottom: 15px;
    text-transform: none !important;
}
.template-container .back {
    display: block;
    padding-top: 15px;
}
.template-container .template-box {
    width: 150px;
    min-height: 75px;
    text-align: left;
    position: relative;
    vertical-align: top;
    display: inline-block;
    text-align: center !important;
    display: inline-block !important;
    padding: 0 0 30px 30px !important;
}
.template-box img {
    float: left;
    height: auto;
    width: 150px;
}
.template-container .template-box.hidden {
    display: none !important;
}
.template-container .design-preview-0 {
    width: 150px;
    text-align: left;
    /*line-height: 0px;*/
    display: inline-block;
    /*vertical-align: bottom;*/
}
.template-container .design-preview-0 .lack-preview-wrap {
    overflow: hidden;
    position: relative;
    border: solid 1px #ddd;
    border-width: 1px 0 0 1px;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3) !important;
}
/* Zoom */
.template-container .template-box .zoomlink {
    width: 40px;
    height: 40px;
    display: none;
    background: url(/load/images/search-icon-40x40.png);
}
.template-container .template-box:hover .zoomlink {
    right: -15px;
    bottom: 15px;
    position: absolute;
    display: inline-block;
}
.template-container .design-preview-0.half-bottom img {
    width: 150px;
    margin-top: -50%;
}
.template-container .design-preview-0.half-bottom.r7 img {
    width: 150px;
    margin-top: -71%;
}
.template-container .template-box:hover .design-preview-0.half-bottom {
    transform-origin: 0 0;
    transform: skewX(-3deg) scaleY(0.95);
}
.template-container .template-box:hover .design-preview-0.half-bottom::before {
    z-index: -1;
    content: "";
    height: 90%;
    width: 148px;
    position: absolute;
    background: #eeeeee;
    transform: skewX(6deg);
    transform-origin: 0 0;
    border: solid 1px #dddddd;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
}
.template-container .template-box:hover .design-preview-0.half-right {
    transform-origin: 0 0;
    transform: skewY(3deg) scaleX(0.95);
}
.template-container .template-box:hover .design-preview-0.half-right::before {
    z-index: -1;
    content: "";
    height: 90%;
    width: 140px;
    position: absolute;
    background: #eeeeee;
    transform: skewY(-6deg);
    transform-origin: 0 0;
    border: solid 1px #dddddd;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
}
.template-container .design-preview-0.half-right img {
    width: 300px;
    margin-left: -150px;
}
.template-container li {
    padding: 0;
    list-style: none;
}
/* Preview */
.preview-container {
    text-align: center;
}
.designer-buttons {
    bottom: 0;
    position: absolute;
}
.preview-buttons,
.designer-buttons {
    text-align: center;
}
.designer-buttons .button,
.preview-buttons .button,
.template-button {
    padding: 0;
    float: none;
    width: 240px;
    height: 36px;
    border: none;
    outline: none;
    font-size: 16px;
    line-height: 36px;
    font-weight: bold;
    text-align: center;
    background: #003565;
    letter-spacing: 1px;
    display: inline-block;
    text-decoration: none;
    color: #ffffff !important;
}
.designer-buttons .button {
    margin: 0px 20px;
}
.designer-buttons .button_back,
.designer-buttons .button_back:hover {
    text-align: right;
    padding: 0 25px 0 0;
    background: url(/load/images/back.png) no-repeat scroll 10px 13px #003565;
}
.designer-buttons .button_next,
.designer-buttons .button_next:hover {
    text-align: left;
    padding: 0 0 0 25px;
    background: url(/load/images/next.png) no-repeat scroll 245px 13px #003565;
}
.preview-buttons .button {
    width: 220px;
}
.preview-buttons .button-back,
.preview-buttons .button-back:hover {
    text-align: right;
    padding: 0 25px 0 0;
    background: url(/load/images/back.png) no-repeat scroll 10px 13px #003565;
}
.preview-buttons .button-next,
.preview-buttons .button-next:hover {
    text-align: left;
    padding: 0 0 0 25px;
    background: url(/load/images/next.png) no-repeat scroll 225px 13px #003565;
}
.preview-buttons .button-saved {
    margin: 0 25px;
}
.template-button {
    text-align: left;
    margin: 25px 0 0 0;
    padding: 0 0 0 25px;
    background: url(/load/images/next.png) no-repeat scroll 245px 13px #003565;
}
.design-preview-1 {
    margin: 20px;
    line-height: 0px;
    overflow: hidden;
    position: relative;
    text-align: center;
    display: inline-block;
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
}
/* Favorits */
.template-container .template-box .designer-unstore-link {
    top: -10px;
    right: -15px;
    width: 25px;
    height: 25px;
    display: none;
    color: #003565;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    line-height: 25px;
    text-align: center;
    position: absolute;
    background: #ffffff;
    border: solid 1px #003565;
}
.template-container .template-box:hover .designer-unstore-link {
    display: inline-block;
}
.template-container .template-box .designer-unstore-link:hover {
    color: #fd7f0e;
    border: solid 1px #fd7f0e;
}
.template-container .template-box .favorite-marker {
    top: -10px;
    left: 15px;
    width: 30px;
    height: 30px;
    display: none;
    cursor: pointer;
    position: absolute;
    background: url(/load/images/favorite-star.png) no-repeat;
}
.template-container .template-box:hover .favorite-marker {
    display: inline-block;
}
.template-container .template-box.favorite .favorite-marker {
    display: inline-block;
    background-position: 0 -30px;
}
/* Save Templates */
.design-preview-2 b {
    display: block;
    font-size: 18px;
    padding: 10px 0;
    line-height: 20px;
}
.design-preview-2 img {
    width: 400px;
    height: auto;
    border: 1px solid #f0f0f0;
}
.template-line {
    position: relative;
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    border-bottom: 1px solid #f0f0f0;
}
.template-line.last {
    margin: 0;
    padding: 0;
    position: relative;
    border-bottom: none;
}
.template-infos-1 {
    float: left;
    width: 250px;
    min-height: 175px;
    padding: 0 20px 0 0;
}
.template-image {
    width: 240px;
    height: auto;
    display: block;
    margin: 0 0 10px 0;
    border: 1px solid #f0f0f0;
}
.template-infos-2 {
    float: left;
    width: 250px;
    min-height: 175px;
}
.dd {
    width: 262px !important;
}
.dd .ddTitle {
    width: 262px !important;
    border: 1px solid #898989 !important;
}
.ddChild {
    overflow: auto;
    max-height: 200px;
    width: 262px !important;
    border-left: 1px solid #898989 !important;
    border-right: 1px solid #898989 !important;
    border-bottom: 1px solid #898989 !important;
}
.template-buttons {
    bottom: 52px;
    position: absolute;
}
.template-line.last .template-buttons {
    bottom: 32px;
    position: absolute;
}
/* UV-Lack */
.lack-preview-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}
.lack-preview-wrap.half-bottom {
    bottom: 0px;
    height: 50%;
}
.lack-preview-wrap.half-right {
    width: 50%;
    right: 0px;
}
.animated-lackpreview {
    top: 0px;
    width: 2500%;
    height: 100%;
    left: -2500%;
    opacity: 0.8;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top left;
}
.design-preview-0:hover .animated-lackpreview {
    animation: lackpreview 2.5s steps(25) infinite;
    -webkit-animation: lackpreview 2.5s steps(25) infinite;
}
.design-preview-1 .animated-lackpreview {
    animation: lackpreview 4s steps(25) infinite;
    -webkit-animation: lackpreview 4s steps(25) infinite;
}
.fancybox-inner.animate .animated-lackpreview {
    animation: lackpreview 3s steps(25) infinite;
    -webkit-animation: lackpreview 3s steps(25) infinite;
}
@keyframes lackpreview {
    100% { left: 0px; top: 0px; }
}