/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
.body {
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Chrome Frame prompt
========================================================================== */
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
##################### DESKTOP STYLING #############################
========================================================================== */
/* BASE STYLING START */
.body {
font-family: "Delivery_regular", sans-serif;
font-size: 15px;
color: #333;
}
/* IMPORTANT: Always use Frutiger Bold instead of font weight bold!!! */
strong, b {
font-family: "Delivery_bold", sans-serif;
font-weight: normal;
}
h1, h2, h3, h4 {
font-weight: normal;
}
h1 {
font-size: 18px;
margin: 0;
color: #000;
text-transform: uppercase;
}
h2 {
line-height: 36px;
font-size: 30px;
margin: 0 0 18px 0;
position: relative;
}
.stripe.black h2 {
color: #fff;
}
h3 {
line-height: 23px;
font-size: 18px;
margin: 0 0 8px 0;
position: relative;
}
.stripe.black h3 {
color: #fc0;
}
h2 + h3 {
margin-top: -8px;
}
h4 {
font-family: "Delivery_bold", sans-serif;
font-size: 15px;
margin: 0 0 4px 0;
position: relative;
}
.stripe.black h4 {
color: #fc0;
}
h2.borderBottom,
h3.borderBottom,
h4.borderBottom {
border-bottom: 1px solid #ccc;
padding-bottom: 13px;
}
.stripe.yellow h2.borderBottom,
.stripe.yellow h3.borderBottom,
.stripe.yellow h4.borderBottom {
border-bottom: 1px solid #CCAE39;
}
p {
line-height: 23px;
margin: 0 0 8px 0;
}
.stripe.black p {
color: #fff;
}
a {
color: #333;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
}
a:link {
}
a:visited {
text-decoration: none;
}
a:focus {
outline: 0;
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
a:active {
}
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
ol li,
ul li {
margin-bottom: 9px;
}
ol li:last-child,
ul li:last-child { /* TODO IE8 */
margin-bottom: 0;
}
figure {
position: relative;
}
/* BASE STYLING END */
/* PUBLIC CLASSES START */
/* Custom Grid */
.container {
position: relative;
margin: 0 auto;
padding: 0;
max-width: 984px;
}
.lt-ie9 .container {
width: 984px;
}
.lt-ie9 .nesting .container {
width: auto;
}
.container:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container .column {
float: left;
display: inline;
margin: 0 1.524390243902439% 30px; /* 15/984 */
}
.container.nomb .column {
margin-bottom: 0;
}
.gridtest .column {
background: rgba(100,100,100,.5);
-pie-background: rgba(100,100,100,.5);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.container .whole {
width: 96.95121951219512%; /* 954/984 */
max-width: 96.95121951219512%;
}
.container .one-half {
width: 46.95121951219512%; /* 462/984 */
max-width: 46.95121951219512%;
}
.container .one-third {
width: 30.28455284552846%; /* 298/984 */
max-width: 30.28455284552846%;
}
.container .one-fourth {
width: 21.95121951219512%; /* 216/984 */
max-width: 21.95121951219512%;
}
.container .two-thirds {
width: 63.61788617886179%; /* 626/984 */
max-width: 63.61788617886179%;
}
.container .three-fourth {
width: 71.95121951219512%;
max-width: 71.95121951219512%; /* 708/984 */
}
/* 2x2 nesting */
.nesting .container .one-half {
width: 46.75324675324675%; /* 216/462 */
max-width: 46.75324675324675%;
margin: 0;
}
.nesting .container .one-half:first-child {
margin-right: 6.493506493506494%;
}
/* container with lines */
.container.withlines {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.container.withlines .column {
position: relative;
}
.container.withlines .column:before {
display: block;
background: #ccc;
content: "";
position: absolute;
width: 1px;
top: 0;
bottom: 0;
}
.stripe.yellow .container.withlines .column:before {
background: #CCAE39;
}
.container.withlines .column:first-child:before,
.container.withlines .column.whole:before {
content: none;
width: 0;
background: transparent;
}
.container.withlines .column.one-half:before {
left: -3.25%;
}
.nesting.withlines .container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.nesting.withlines .container .column.one-half:before {
left: -7%;
}
.container.withlines .column.one-third:before {
left: -5.25%;
}
.container.withlines .column.one-fourth:before {
left: -7%;
}
.container.withlines .column.two-thirds:before {
left: -2.25%;
}
.container.withlines .column.three-fourth:before {
left: -2%;
}
/* Stripes */
.stripe {
position: relative;
padding: 38px 20px 0 20px;
}
.stripe.yellow {
background: #fc0;
background: -moz-linear-gradient(top, #ffe680 0%, #fc0 100%);
background: -webkit-linear-gradient(top, #ffe680 0%, #fc0 100%);
background: -o-linear-gradient(top, #ffe680 0%, #fc0 100%);
background: linear-gradient(to bottom, #ffe680 0%, #fc0 100%);
-pie-background: linear-gradient(top, #ffe680 0%, #fc0 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.stripe.white {
background: #fff;
background: -moz-linear-gradient(top, #fff 0%, #fff 100%);
background: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
background: -o-linear-gradient(top, #fff 0%, #fff 100%);
background: linear-gradient(to bottom, #fff 0%, #fff 100%);
-pie-background: linear-gradient(top, #fff 0%, #fff 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.stripe.white:not(.stage):not(.borderBottom) + .stripe.white {
border-top: 1px solid #ccc;
}
.stripe.borderBottom {
border-bottom: 1px solid #ccc;
}
.stripe.white.errorbox:not(.stage):not(.borderBottom) + .stripe.white,
.stripe.errorbox {
border-bottom: none;
border-top: none;
}
.stripe.grey {
background: #F3F3F3;
background: -moz-linear-gradient(top, #F3F3F3 0%, #F3F3F3 100%);
background: -webkit-linear-gradient(top, #F3F3F3 0%, #F3F3F3 100%);
background: -o-linear-gradient(top, #F3F3F3 0%, #F3F3F3 100%);
background: linear-gradient(to bottom, #F3F3F3 0%, #F3F3F3 100%);
-pie-background: linear-gradient(top, #F3F3F3 0%, #F3F3F3 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.stripe.black {
background: #000;
background: -moz-linear-gradient(top, #4D4D4D 0%, #000 100%);
background: -webkit-linear-gradient(top, #4D4D4D 0%, #000 100%);
background: -o-linear-gradient(top, #4D4D4D 0%, #000 100%);
background: linear-gradient(to bottom, #4D4D4D 0%, #000 100%);
-pie-background: linear-gradient(top, #4D4D4D 0%, #000 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.stripe .background {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.stripe .background div {
background-repeat: no-repeat;
background-position: right bottom;
max-width: 984px;
margin: 0 auto;
height: 100%;
}
.stripe div.jumpmark {
position: relative;
margin: 0 auto;
max-width: 984px;
}
.stripe div.jumpmark a {
position: absolute;
display: block;
background: #ccc url("../resources/img/sprite.png") no-repeat -636px -44px;
bottom: -29px;
right: 1.524390243902439%; /* 15/984 */
width: 42px;
height: 29px;
text-indent: -9999px;
overflow: hidden;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
z-index: 800;
}
/* Content */
#content {
position: relative;
z-index: 1;
}
/* Overflow Hidden */
.overflowHidden {
overflow: hidden;
}
/* Those Images are going to be replaced via js */
.responsive {
display: none;
}
/* Textlink */
.textblock a,
.textlink {
position: relative;
padding-left: 10px;
display: inline-block;
line-height: 22px;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
}
.stripe .textblock a,
.stripe .textblock .textlink {
font-family: "Delivery_bold", sans-serif;
}
.stripe.black .textblock a,
.stripe.black .textlink {
color: #fc0;
font-family: "Delivery_regular", sans-serif;
}
.stripe.black .textblock ul a,
.stripe.black ul .textlink {
color: #fff;
}
.textblock a:before,
.textlink:before {
content: "";
position: absolute;
display: block;
background: url("../resources/img/sprite.png") no-repeat -20px -20px;
height: 9px;
width: 6px;
top: 6px;
left: 0;
}
.textblock .jumptarget:before {
height: 0px;
}
.stripe.black .textblock a:before,
.stripe.black .textlink:before {
background-position: -20px -40px;
}
.stripe.black .textblock ul a:before,
.stripe.black ul .textlink:before {
background-position: -40px -20px;
}
.textblock a:link
.textlink:link {
}
.textblock a:visited,
.textlink:visited {
text-decoration: none;
}
.textblock a:focus,
.textlink:focus {
text-decoration: underline;
outline: none;
}
.textblock a:hover,
.textlink:hover {
}
.textblock a:active,
.textlink:active {
}
/* Downloadlink */
.downloadlink {
position: relative;
padding-left: 15px;
display: inline-block;
line-height: 22px;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
}
.stripe.black ul .downloadlink {
color: #fff;
}
.downloadlink:before {
content: "";
position: absolute;
display: block;
background: url("../resources/img/sprite.png") no-repeat -520px -20px;
height: 13px;
width: 10px;
top: 5px;
left: 0;
}
.stripe.black ul .downloadlink:before {
background-position: -540px -20px;
}
.downloadlink:link {
}
.downloadlink:visited {
text-decoration: none;
}
.downloadlink:focus,
.downloadlink:hover {
text-decoration: none;
outline: none;
}
.downloadlink:visited span:not(.dln-meta) {
text-decoration: none;
}
.downloadlink:focus span:not(.dln-meta),
.downloadlink:hover span:not(.dln-meta) {
text-decoration: underline;
outline: none;
}
.downloadlink .dln-meta {
color: #999;
}
/* Textblock */
.textblock {
position: relative;
}
.textblock p {
margin: 0 0 20px 0;
}
.textblock p:last-child { /* TODO IE8 */
margin: 0;
}
.textblock .zoom {
display: block;
position: relative;
}
.textblock .zoom img {
cursor: pointer;
}
.textblock .zoom .icon {
position: absolute;
background: url("../resources/img/sprite.png") no-repeat -594px -44px;
background-color: #ccc;
background-color: rgba(255, 255, 255, .8);
display: block;
width: 30px;
height: 30px;
right: 0;
bottom: 10px;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
}
.textblock a.action-btn {
line-height: 130%;
font-family: "Delivery_regular", sans-serif;
}
.textblock a.action-btn:before {
background-position: -9999px -9999px;
}
.textblock a.action-btn.blank:before {
background-position: -20px -20px;
}
.stripe.black .textblock a.action-btn.blank:before {
background-position: -20px -40px;
}
/* Scaling */
.resize {
width: 100%;
}
.resize img {
width: 100%;
height: auto;
margin-bottom: 10px;
}
.resize.half {
width: 50%;
}
.resize.half.left {
float: left;
margin: 7px 20px 10px 0;
}
.resize.half.right {
float: right;
margin: 7px 0 10px 20px;
}
/* Linklist */
.linklist .heading {
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
margin-bottom: 10px;
font-family: "Delivery_regular", sans-serif;
font-size: 18px;
display: block;
line-height: 23px;
}
.stripe.yellow .linklist .heading {
border-bottom: 1px solid #CCAE39;
}
.stripe.black .linklist .heading,
.stripe.black .linklist .textblock a,
.stripe.black .linklist .textlink {
color: #fff;
}
.stripe.black .linklist .textblock a:before,
.stripe.black .linklist .textlink:before {
background-position: -40px -20px;
}
.stripe.black .linklist .downloadlink {
color: #fff;
}
.stripe.black .linklist .downloadlink:before {
background-position: -540px -20px;
}
/* Action Button */
.action-btn {
position: relative;
display: block;
float: left;
min-width: 32px;
max-width: 310px;
min-height: 20px;
margin: 0 15px 15px 0;
padding: 5px 10px 5px 10px;
line-height: 130%;
border: 1px solid #fc0;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
background: #fc0;
background: -moz-linear-gradient(top, #FFF0B3 0%, #ffe680 1px, #fc0 100%);
background: -webkit-linear-gradient(top, #FFF0B3 0%, #ffe680 1px, #fc0 100%);
background: -o-linear-gradient(top, #FFF0B3 0%, #ffe680 1px, #fc0 100%);
background: linear-gradient(to bottom, #FFF0B3 0%, #ffe680 1px, #fc0 100%);
-pie-background: linear-gradient(top, #FFF0B3 0%, #ffe680 1px, #fc0 100%);
-webkit-border-radius: 4px;
border-radius: 4px;
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.textblock .action-btn:focus,
.textblock .action-btn:hover,
.action-btn:focus,
.action-btn:hover {
border: 1px solid #ffe580;
text-decoration: none;
outline: none;
background: #fee280;
background: -moz-linear-gradient(top, #fff4c4 0%, #fee280 100%);
background: -webkit-linear-gradient(top, #fff4c4 0%, #fee280 100%);
background: -o-linear-gradient(top, #fff4c4 0%, #fee280 100%);
background: linear-gradient(to bottom, #fff4c4 0%, #fee280 100%);
-pie-background: linear-gradient(top, #fff4c4 0%, #fee280 100%);
}
.action-btn.grey {
border: 1px solid #e1e1e1;
background: #e3e3e3;
background: -moz-linear-gradient(top, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
background: -webkit-linear-gradient(top, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
background: -o-linear-gradient(top, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
background: linear-gradient(to bottom, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
-pie-background: linear-gradient(top, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
}
.action-btn.grey:focus,
.action-btn.grey:hover {
border: 1px solid #f0f0f0;
background: #f1f1f1;
background: -moz-linear-gradient(top, #fefefe 0%, #f1f1f1 100%);
background: -webkit-linear-gradient(top, #fefefe 0%, #f1f1f1 100%);
background: -o-linear-gradient(top, #fefefe 0%, #f1f1f1 100%);
background: linear-gradient(to bottom, #fefefe 0%, #f1f1f1 100%);
-pie-background: linear-gradient(top, #fefefe 0%, #f1f1f1 100%);
}
.action-btn.red {
color: #fff;
border: 1px solid #D52F2F;
background: #BD0C1D;
background: -moz-linear-gradient(top, #eca1a1 0%, #c61111 1px, #BD0C1D 100%);
background: -webkit-linear-gradient(top, #eca1a1 0%, #c61111 1px, #BD0C1D 100%);
background: -o-linear-gradient(top, #eca1a1 0%, #c61111 1px, #BD0C1D 100%);
background: linear-gradient(to bottom, #eca1a1 0%, #c61111 1px, #BD0C1D 100%);
-pie-background: linear-gradient(top, #eca1a1 0%, #c61111 1px, #BD0C1D 100%);
}
.action-btn.red:focus,
.action-btn.red:hover {
border: 1px solid #e47878;
background: #d4616c;
background: -moz-linear-gradient(top, #dc7f88 0%, #d4616c 100%);
background: -webkit-linear-gradient(top, #dc7f88 0%, #d4616c 100%);
background: -o-linear-gradient(top, #dc7f88 0%, #d4616c 100%);
background: linear-gradient(to bottom, #dc7f88 0%, #d4616c 100%);
-pie-background: linear-gradient(top, #dc7f88 0%, #d4616c 100%);
}
.action-btn.blank {
border: 1px solid transparent;
background: transparent;
-pie-background: transparent;
}
.action-btn.blank:before {
content: "";
position: absolute;
display: block;
background: url("../resources/img/sprite.png") no-repeat -20px -20px;
height: 9px;
width: 6px;
top: 10px;
left: 0;
}
.action-btn.blank:hover,
.action-btn.blank:focus {
text-decoration: underline;
background: none;
border-color: transparent;
}
/* Teaser Button */
.teaser-btn {
position: relative;
display: block;
float: left;
min-width: 171px;
max-width: 310px;
min-height: 46px;
margin: 0 15px 15px 0;
padding: 9px 10px 7px 10px;
border: 1px solid #fc0;
font-size: 18px;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
background: #fc0;
background: -moz-linear-gradient(top, #FFF0B3 0%, #ffe680 1px, #fc0 100%);
background: -webkit-linear-gradient(top, #FFF0B3 0%, #ffe680 1px, #fc0 100%);
background: -o-linear-gradient(top, #FFF0B3 0%, #ffe680 1px, #fc0 100%);
background: linear-gradient(to bottom, #FFF0B3 0%, #ffe680 1px, #fc0 100%);
-pie-background: linear-gradient(top, #FFF0B3 0%, #ffe680 1px, #fc0 100%);
-webkit-border-radius: 4px;
border-radius: 4px;
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
/** wenn disabled="true", dann wird ein anstelle eines gerendert -> disabled="true" hat nun also keinen hover-Effekt */
a.teaser-btn:focus,
a.teaser-btn:hover {
text-decoration: none;
border: 1px solid #ffe580;
outline: none;
background: #fee280;
background: -moz-linear-gradient(top, #fff4c4 0%, #fee280 100%);
background: -webkit-linear-gradient(top, #fff4c4 0%, #fee280 100%);
background: -o-linear-gradient(top, #fff4c4 0%, #fee280 100%);
background: linear-gradient(to bottom, #fff4c4 0%, #fee280 100%);
-pie-background: linear-gradient(top, #fff4c4 0%, #fee280 100%);
}
a.teaser-btn.grey {
font-weight: bold;
}
.teaser-btn.grey {
border: 1px solid #e1e1e1;
background: #e3e3e3;
background: -moz-linear-gradient(top, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
background: -webkit-linear-gradient(top, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
background: -o-linear-gradient(top, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
background: linear-gradient(to bottom, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
-pie-background: linear-gradient(top, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
}
/** wenn disabled="true", dann wird ein anstelle eines gerendert -> disabled="true" hat nun also keinen hover-Effekt */
a.teaser-btn.grey:focus,
a.teaser-btn.grey:hover {
border: 1px solid #f0f0f0;
background: #f1f1f1;
background: -moz-linear-gradient(top, #fefefe 0%, #f1f1f1 100%);
background: -webkit-linear-gradient(top, #fefefe 0%, #f1f1f1 100%);
background: -o-linear-gradient(top, #fefefe 0%, #f1f1f1 100%);
background: linear-gradient(to bottom, #fefefe 0%, #f1f1f1 100%);
-pie-background: linear-gradient(top, #fefefe 0%, #f1f1f1 100%);
}
.teaser-btn span {
position: relative;
z-index: 1;
display: block;
margin: 1px 0 4px 0;
line-height: 120%;
}
.teaser-btn span.small {
display: block;
margin: 0;
font-size: 12px;
}
.teaser-btn img {
position: absolute;
bottom: -1px;
right: 0;
z-index: 0;
}
/* Swiper Pagination */
.pagination {
position: absolute;
display: inline-block;
}
.swiper-pagination-switch {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 10px;
background: #fff;
margin: 0 3px;
cursor: pointer;
border: 1px solid #999;
position: relative;
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.swiper-active-switch,
.swiper-visible-switch {
box-shadow: 0px 2px 3px #fff inset;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
}
.swiper-active-switch,
.swiper-visible-switch {
background: #fc0;
}
/* Half Transparent Box */
.half-transparent-box {
position: absolute;
left: 0;
bottom: 0;
z-index: 10;
background: rgba(255, 255, 255, .85);
background: #fff;
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
-pie-background: linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.stripe .half-transparent-box p,
.stripe .half-transparent-box h2,
.stripe .half-transparent-box h3 {
color: #333;
}
/* Overlay Image */
.image_overlay {
position: absolute;
}
/* Native Swipeable */
.native-swipeable {
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.lt-ie9 .native-swipeable {
overflow: visible;
}
/* Lightbox */
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 480;
background: #fff;
background: rgba(255, 255, 255, .85);
-pie-background: rgba(255, 255, 255, .85);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
#overlay_content {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 500;
}
#overlay_content .close {
position: absolute;
background: #fff url("../resources/img/sprite.png") no-repeat -955px -15px;
width: 30px;
height: 30px;
text-indent: -9999px;
overflow: hidden;
top: 15px;
right: 15px;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
z-index: 2;
cursor: pointer;
}
#overlay_content > div {
position: relative;
background: #fff;
width: 100%;
max-width: 994px;
margin: 210px auto 50px auto;
padding: 0;
border: 1px solid #ccc;
overflow: hidden;
}
#overlay_content .stripe {
padding: 38px 0 0;
}
#overlay_content .image {
padding: 20px;
}
#overlay_content .image img {
width: 100%;
}
/* Tooltip */
.infotext {
display: inline-block;
width: 30px;
height: 30px;
right: 0;
top: 0;
background: url("../resources/img/sprite.png") no-repeat -800px -20px;
position: absolute;
font-size: 15px;
line-height: 23px;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
z-index: 300;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.infotext:focus {
outline: 1px dotted;
}
}
h2 .infotext {
top: 3px;
}
h3 .infotext {
top: -4px;
}
h4 .infotext {
top: -7px;
}
.stripe.yellow .infotext {
background-position: -850px -20px;
}
.infotext span {
display: none;
position: absolute;
top: 5px;
right: 5px;
min-width: 178px;
padding: 18px 19px;
font-family: "Delivery_regular", sans-serif;
background: #fc0;
background: -webkit-linear-gradient(top, #ffe680 0%, #fc0 100%);
background: linear-gradient(to bottom, #ffe680 0%, #fc0 100%);
background: -moz-linear-gradient(top, #ffe680 0%, #fc0 100%);
background: -o-linear-gradient(top, #ffe680 0%, #fc0 100%);
}
.infotext span.right {
left: 5px;
}
.stripe.yellow .infotext span {
background: #F3F3F3;
background: -webkit-linear-gradient(top, #F3F3F3 0%, #F3F3F3 100%);
background: linear-gradient(to bottom, #F3F3F3 0%, #F3F3F3 100%);
background: -moz-linear-gradient(top, #F3F3F3 0%, #F3F3F3 100%);
background: -o-linear-gradient(top, #F3F3F3 0%, #F3F3F3 100%);
}
.infotext.show {
z-index: 301;
}
.infotext.show span {
display: inline-block;
}
.infotext span:after {
content: "";
display: inline-block;
width: 30px;
height: 30px;
background: url("../resources/img/sprite.png") no-repeat -800px -20px;
position: absolute;
top: -5px;
right: -5px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.infotext span:after {
outline: 1px dotted;
}
}
.infotext span.right:after {
left: -5px;
}
.stripe.yellow .infotext span:after {
background-position: -850px -20px;
}
.stripe .infotext .textblock a,
.stripe .infotext .textlink {
font-family: "Delivery_regular", sans-serif;
}
.infotext img {
width: 250px;
margin-bottom: 10px;
}
/* Line Seperator */
.line_seperator {
border-bottom: 1px solid #ccc;
margin-top: 5px;
margin-bottom: 5px;
}
.stripe.yellow .line_seperator {
border-bottom: 1px solid #CCAE39;
}
.line_seperator div.jumpmark a {
right: 0;
}
/* PUBLIC CLASSES END */
/* HEADER START */
.header.stripe {
border-bottom: 1px solid #e5cb60;
z-index: 499;
padding-top: 0;
padding-bottom: 0;
height: 95px;
}
.header .container {
margin-top: 24px;
}
.header .whole {
margin-bottom: 0;
position: relative;
}
.header .userinfo {
display: inline-block;
overflow: hidden;
width: 550px;
height: 90px;
position: absolute;
top: 4px;
right: -155px;
padding-top: 4px;
text-align: right;
}
.header .logo {
display: inline-block;
text-indent: -9999px;
overflow: hidden;
width: 93px;
height: 90px;
background: url("../resources/img/sprite.png") no-repeat -20px -70px;
position: absolute;
top: -11px;
left: -5px;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
}
.header .logo:focus {
outline: 1px dotted;
}
.header .right {
float: right;
margin-left: 107px;
}
.header nav {
float: left;
height: 95px;
position: relative;
}
.header .withoutSearchBox nav {
margin-right: 3px;
}
.header nav:after {
content: "";
position: absolute;
display: block;
background: url("../resources/img/sprite.png") no-repeat -370px -70px;
height: 90px;
width: 3px;
top: 0;
right: -3px;
}
.header nav li {
float: left;
}
.header nav a {
height: 25px;
font-size: 18px;
padding: 35px 30px 35px 32px;
display: inline-block;
position: relative;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
-pie-background: linear-gradient(top, #ffe680 0%, #fc0 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.header nav a:before {
content: "";
position: absolute;
display: block;
background: url("../resources/img/sprite.png") no-repeat -370px -70px;
height: 90px;
width: 3px;
top: 0;
left: 0;
}
.header nav a:focus,
.header nav a:hover {
text-decoration: none;
outline: none;
background: #fc0;
background: -moz-linear-gradient(top, #FFF9DF 0%, #fc0 100%);
background: -webkit-linear-gradient(top, #FFF9DF 0%, #fc0 100%);
background: -o-linear-gradient(top, #FFF9DF 0%, #fc0 100%);
background: linear-gradient(to bottom, #FFF9DF 0%, #fc0 100%);
-pie-background: linear-gradient(top, #FFF9DF 0%, #fc0 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.header nav a.active {
padding-bottom: 42px;
padding-left: 30px;
margin-left: 2px;
margin-right: -1px;
width: 50px;
position: relative;
z-index: 2;
background: #fff;
background: -moz-linear-gradient(top, #F3F3F3 0%, #fff 100%);
background: -webkit-linear-gradient(top, #F3F3F3 0%, #fff 100%);
background: -o-linear-gradient(top, #F3F3F3 0%, #fff 100%);
background: linear-gradient(to bottom, #F3F3F3 0%, #fff 100%);
-pie-background: linear-gradient(top, #F3F3F3 0%, #fff 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
/* Webkit Hack */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.header nav a.active {
width: 49px;
}
}
header .header nav a.active:before {
left: -2px;
}
.header nav a.menue {
padding-right: 60px;
}
.header nav a.menue:after {
content: "";
position: absolute;
display: block;
background: url("../resources/img/sprite.png") no-repeat -70px -20px;
height: 16px;
width: 17px;
top: 40px;
right: 30px;
}
/* Webkit Hack */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.header nav a.menue:after {
top: 39px;
}
}
.header nav a.menue.active:after {
right: 31px;
}
.header .search,
.header .searchbox {
float: right;
position: relative;
}
.header .search:after {
content: "";
position: absolute;
display: block;
background: url("../resources/img/sprite.png") no-repeat -370px -70px;
height: 90px;
width: 3px;
top: 0;
right: 0;
}
.header .search a {
display: none;
}
.header .search .searchfield {
width: 201px;
margin: 32px 0 0 24px;
float: left;
}
.header .search .searchbutton {
border: none;
background: none;
background: url("../resources/img/sprite.png") no-repeat -115px -15px;
text-indent: -9999px;
overflow: hidden;
height: 30px;
width: 30px;
padding: 0;
min-width: 30px;
max-width: 30px;
margin: 32px 12px 0 5px;
behavior: none;
}
.header .search .searchbutton:focus,
.header .search .searchbutton:hover {
border: none;
background: url("../resources/img/sprite.png") no-repeat -115px -15px;
}
.header .search .searchbutton:focus {
outline: 1px dotted;
}
.header .suggest {
display: none;
position: absolute;
top: 61px;
left: 24px;
background: #fff;
width: 179px;
padding: 5px 10px;
border: 1px solid #ccc;
}
.header .suggest .linklist a {
display: block;
}
/* Flyout */
.flyout {
display: none;
margin-bottom: 30px;
}
.flyout.locnav {
margin-bottom: 40px;
}
.no-js .flyout {
display: block;
}
.flyout .stripe.last {
border-bottom: 1px solid #ccc;
}
.flyout a.close {
display: inline-block;
position: absolute;
border: 1px solid #ccc;
border-top: none;
text-indent: -9999px;
overflow: hidden;
width: 92px;
height: 28px;
bottom: -29px;
left: 50%;
margin-left: -46px;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
z-index: 99;
}
.flyout .stripe.grey a.close {
background: #F3F3F3 url("../resources/img/sprite.png") no-repeat -184px -12px;
}
.flyout .stripe.white a.close { /* TODO IE8 */
background: url("../resources/img/sprite.png") no-repeat -184px -12px, linear-gradient(to bottom, #fff 0%, #F3F3F3 100%);
background: url("../resources/img/sprite.png") no-repeat -184px -12px, -webkit-linear-gradient(top, #fff 0%, #F3F3F3 100%);
}
/* HEADER END */
/* IMGLIST START */
.imglist {
margin-top: -6px;
}
.imglist .swiper-container {
height: 172px;
margin-bottom: -24px;
}
.imglist .swiper-wrapper {
display: inline-block;
width: auto;
}
.imglist .swiper-slide {
float: left;
}
.imglist .swiper-slide a {
position: relative;
height: 172px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.imglist .swiper-slide a span {
position: absolute;
left: 0;
bottom: -81px;
}
.imglist .swiper-slide a:visited {
text-decoration: none;
}
.imglist .swiper-slide a:focus span,
.imglist .swiper-slide a:hover span {
text-decoration: underline;
}
.imglist .swiper-container .pagination {
bottom: 4px;
left: 0;
right: 0;
text-align: center;
display: inline-block;
}
/* IMGLIST END */
/* LOCAL NAVIGATION START */
#locnav {
border-bottom: 1px solid #ccc;
z-index: 2;
padding-top: 0;
padding-bottom: 0;
}
#locnav .column {
margin-top: 14px;
margin-bottom: -1px;
padding-bottom: 1px;
overflow: hidden;
}
#locnav h1 {
float: left;
margin: 14px 42px 17px 0;
color: #000;
position: relative;
z-index: 21;
}
#locnav .withSubnav h1 {
margin-bottom: 0;
}
#locnav h1 a {
display: block;
}
#locnav h1.brand a:focus {
outline: 1px dotted;
}
#locnav h1 a:hover {
text-decoration: none;
}
#locnav h1.home {
font-family: "Delivery_bold", sans-serif;
text-transform: none;
padding-bottom: 17px;
margin-bottom: 0;
}
#locnav h1.brand {
margin-top: 18px;
margin-left: 1px;
padding-bottom: 6px;
margin-bottom: 7px;
}
#locnav .withSubnav h1.brand {
padding-bottom: 0;
margin-bottom: -4px;
}
#locnav .brand img {
height: 16px;
margin-top: -13px;
margin-right: -3px;
}
/* Swiper */
#locnav .swiper-container {
margin: 0;
overflow: visible;
}
#locnav .swiper-container:after {
content: "";
width: 55px;
height: 30px;
right: -10px;
bottom: 0;
position: absolute;
z-index: 20;
display: none;
background: #fff;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 68%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 68%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 68%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 68%);
-pie-background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 68%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
#locnav .swiper-container.showafter:after {
display: block;
}
#locnav .swiper-wrapper {
display: inline-block;
width: auto;
margin-left: -19px;
}
#locnav .swiper-slide {
display: inline-block;
margin-bottom: -4px;
}
#locnav .swiper-slide a {
padding: 17px 19px;
display: inline-block;
white-space: nowrap;
}
#locnav .swiper-slide.current a {
font-family: "Delivery_bold", sans-serif;
color: #000;
}
#locnav .swiper-slide a.active {
margin-bottom: -2px;
padding-bottom: 19px;
position: relative;
background: #F3F3F3;
background: -moz-linear-gradient(top, #fff 0%, #F3F3F3 100%);
background: -webkit-linear-gradient(top, #fff 0%, #F3F3F3 100%);
background: -o-linear-gradient(top, #fff 0%, #F3F3F3 100%);
background: linear-gradient(to bottom, #fff 0%, #F3F3F3 100%);
-pie-background: linear-gradient(top, #fff 0%, #F3F3F3 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
/* Webkit Hack */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#locnav .swiper-slide a.active {
margin-bottom: -3px;
padding-bottom: 20px;
}
}
#locnav .swiper-slide a.active:before,
#locnav .swiper-slide a.active:after {
content: "";
position: absolute;
display: block;
width: 1px;
height: 100%;
top: 0;
background: #ccc;
background: -moz-linear-gradient(top, #fff 0%, #ccc 100%);
background: -webkit-linear-gradient(top, #fff 0%, #ccc 100%);
background: -o-linear-gradient(top, #fff 0%, #ccc 100%);
background: linear-gradient(to bottom, #fff 0%, #ccc 100%);
-pie-background: linear-gradient(top, #fff 0%, #ccc 100%);
}
#locnav .swiper-slide a.active:before {
left: 0;
}
#locnav .swiper-slide a.active:after {
right: 0;
}
/* local navigation fixed scrolling */
#locnav_fixed.active {
position: fixed;
border-bottom: 1px solid #ccc;
top: 0;
left: 0;
right: 0;
z-index: 99999;
background: #fff;
background: rgba(255, 255, 255, .95);
-pie-background: rgba(255, 255, 255, .95);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.locnav.flyout.active {
position: fixed;
left: 0;
right: 0;
top: 71px;
z-index: 99999;
}
/* LOCAL NAVIGATION END */
/* STAGE START */
.stripe.stage {
padding: 0;
clear: both;
}
#stage {
position: relative;
margin: 0 auto;
max-width: 1280px;
z-index: 0;
}
#stage .swiper-container,
#stage .swiper-slide {
width: 100%;
height: 310px;
background-position: center 0;
background-repeat: no-repeat;
}
#stage .swiper-slide > div {
position: relative;
width: 100%;
}
#stage .wrapper {
position: relative;
max-width: 1024px;
margin: 0 auto;
height: 310px;
}
#stageEdit .half-transparent-box,
#stage .half-transparent-box {
width: 375px;
height: 228px;
padding: 22px 30px 0 35px;
}
#stageEdit .half-transparent-box h2,
#stage .half-transparent-box h2 {
margin-bottom: 21px;
}
#stageEdit .half-transparent-box h2 img,
#stage .half-transparent-box h2 img {
margin-bottom: 5px;
height: 24px;
}
#stageEdit .half-transparent-box p,
#stage .half-transparent-box p {
line-height: 150%;
margin: 0 0 24px 0;
}
/* Stage Teaser Lists */
#stage .half-transparent-box li {
margin-bottom: 4px;
}
#stageEdit .half-transparent-box .action-btn,
#stage .half-transparent-box .action-btn {
position: absolute;
bottom: 25px;
display: inline-block;
padding: 8px 13px 5px;
margin-bottom: 0;
font-size: 18px;
}
/* Pagination */
#stage .pagination {
bottom: 6px;
left: 49%;
z-index: 11;
}
/* Controls */
#stage .controls {
position: relative;
display: none;
height: 310px;
margin: -310px auto 0;
max-width: 1024px;
}
#stage:hover .controls {
display: block;
}
#stage .controls .prev,
#stage .controls .next {
position: absolute;
background: url("../resources/img/sprite.png") no-repeat 0px -400px;
width: 35px;
height: 55px;
top: 130px;
cursor: pointer;
z-index: 10;
}
#stage .controls .prev {
left: 0;
}
#stage .controls .next {
background: url("../resources/img/sprite.png") no-repeat -50px -400px;
right: 0;
}
#stage .stage-focus-nav li {
margin: 0;
}
#stage .stage-focus-nav a {
position: absolute;
display: inline-block;
background: white;
padding: 4px;
left: -10000px;
}
#stage .stage-focus-nav a:focus {
text-decoration: none;
left: 0px;
z-index: 10000;
}
/* STAGE END */
/* MINIPK START */
.minipk.dp-form .select_wrapper {
width: 100%;
}
.minipk.dp-form .select_wrapper select {
width: 100%;
}
.minipk .options {
margin: 5px 0;
}
.minipk ul,
.minipk .option {
border: 1px solid #E1E1E1;
border-radius: 0 0 4px 4px;
cursor: pointer;
}
.minipk .option {
float: left;
margin-left: 1.4%;
padding: 6px 3% 19px;
height: 80px;
position: relative;
cursor: default;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #e3e3e3;
background: -moz-linear-gradient(top, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
background: -webkit-linear-gradient(top, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
background: -o-linear-gradient(top, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
background: linear-gradient(to bottom, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
-pie-background: linear-gradient(top, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.minipk .option:after {
position: absolute;
content: "";
background: url("../resources/img/sprite.png") no-repeat -600px -100px;
display: block;
width: 16px;
height: 9px;
bottom: 6px;
left: 50%;
margin-left: -8px;
}
.minipk .format {
width: 45%;
margin-left: 0;
}
.minipk .height {
width: 25.1%;
}
.minipk .weight {
width: 27.1%;
}
.minipk .alone {
width: 53.6%;
}
.minipk .cardweight {
display: none;
width: 53.6%;
}
.minipk .cardweight:after {
content: none;
width: 0;
background: transparent;
}
.minipk h4 {
font-family: "Delivery_regular", sans-serif;
margin-bottom: 1px;
}
.minipk p {
font-size: 12px;
}
.minipk ul {
display: none;
position: absolute;
left: -1px;
right: -1px;
top: 33px;
z-index: 200;
margin: 0;
padding: 0;
border-top: 0;
background: #F5F5F5;
background: -moz-linear-gradient(top, #f2f2f2 0%, #F5F5F5 100%);
background: -webkit-linear-gradient(top, #f2f2f2 0%, #F5F5F5 100%);
background: -o-linear-gradient(top, #f2f2f2 0%, #F5F5F5 100%);
background: linear-gradient(to bottom, #f2f2f2 0%, #F5F5F5 100%);
-pie-background: linear-gradient(top, #f2f2f2 0%, #F5F5F5 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.minipk li {
border-top: 1px solid #ccc;
padding: 11px 6.5% 0;
margin-bottom: 0;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
}
.minipk .height li,
.minipk .weight li {
padding-top: 9px;
}
.minipk.default .bia,
.minipk.bia .default,
.dp-form.minipk .hide {
display: none;
}
.minipk li:hover {
background: #fc0;
background: -moz-linear-gradient(top, #FFE680 0%, #fc0 100%);
background: -webkit-linear-gradient(top, #FFE680 0%, #fc0 100%);
background: -o-linear-gradient(top, #FFE680 0%, #fc0 100%);
background: linear-gradient(to bottom, #FFE680 0%, #fc0 100%);
-pie-background: linear-gradient(top, #FFE680 0%, #fc0 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.minipk .height li p,
.minipk .weight li p {
margin-bottom: 8px;
}
.minipk .result {
font-size: 15px;
margin: 12px 0 14px;
border-bottom: 1px solid #ccc;
padding-bottom: 9px;
}
.minipk .result span {
font-size: 18px;
line-height: 21px;
font-family: "Delivery_bold", sans-serif;
float: right;
margin-right: 3px;
}
/* MINIPK END */
/* TEASER START */
.teaser {
overflow: hidden;
}
.teaser h3 {
margin-top: 8px;
}
.teaser.imgleft h3,
.teaser.imgright h3,
.nesting .one-half .one-half .teaser h3,
.one-fourth .teaser h3 {
font-family: "Delivery_bold", sans-serif;
font-size: 15px;
margin-top: -2px;
margin-bottom: 4px;
line-height: 21px;
}
.nesting .one-half .one-half .teaser.imgtop h3,
.one-fourth .teaser.imgtop h3 {
margin-top: 1px;
}
.teaser .last {
margin-left: 20px;
}
.teaser.imgtop .first {
margin-bottom: 11px;
}
.teaser.imgtop .first,
.teaser.imgtop .last {
max-width: 100%;
width: 100%;
margin-left: 0;
float: left;
}
.teaser.imgleft .first,
.teaser.imgright .last,
.teaser.imgleft .last,
.teaser.imgright .first {
min-height: 120px;
float: left;
}
.teaser.imgleft .first,
.teaser.imgright .last {
max-width: 120px;
}
.one-third .teaser.imgleft .last,
.one-third .teaser.imgright .first {
max-width: 157px;
}
.one-half .teaser.imgleft .last,
.one-half .teaser.imgright .first {
max-width: 321px;
}
.teaser .action-btn {
margin: 15px 0 0 0;
}
.teaser .textblock p {
margin: 0 0 8px;
}
.stripe .textblock .teaser .textlink {
font-family: "Delivery_regular", sans-serif;
}
/* Promo Teaser */
.teaser-promo {
position: relative;
}
.teaser-promo figure:first-child {
background-position: right 0;
background-repeat: no-repeat;
height: 250px;
}
.one-half .teaser-promo figure:first-child {
height: 210px;
}
.teaser-promo .half-transparent-box {
width: 360px;
height: 170px;
padding: 20px;
}
.one-half .teaser-promo .half-transparent-box {
height: 145px;
width: 260px;
}
.teaser-promo .action-btn {
position: absolute;
bottom: 20px;
margin: 0;
}
/* TEASER END */
/* FLAPS START */
.flaps dl { margin: 0; }
.flaps dt {
position: relative;
margin: 10px 0 0 0;
padding: 3px 180px 3px 10px;
font-size: 18px;
line-height: 130%;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
background: #CFCFCF;
background: -moz-linear-gradient(top, #E7E7E7 0%, #CFCFCF 100%);
background: -webkit-linear-gradient(top, #E7E7E7 0%, #CFCFCF 100%);
background: -o-linear-gradient(top, #E7E7E7 0%, #CFCFCF 100%);
background: linear-gradient(to bottom, #E7E7E7 0%, #CFCFCF 100%);
-pie-background: linear-gradient(top, #E7E7E7 0%, #CFCFCF 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.flaps dt:first-child {
margin-top: 0px;
}
.flaps dt:after {
position: absolute;
display: block;
background: url("../resources/img/sprite.png") no-repeat -922px center;
width: 25px;
top: 3px;
right: 9px;
bottom: 3px;
content: "";
}
.flaps dt.flap-open:after {
background-position: -972px center;
}
.flaps dd {
background: #fff;
margin: 0;
padding: 10px 10px 10px 10px;
}
.stripe.black dd p,
.flaps dd p {
color: #000;
}
.stripe.black .flaps .textblock a,
.stripe.black .flaps .textlink {
color: #333;
padding-left: 9px;
font-family: "Delivery_bold", sans-serif;
}
.stripe.black .flaps .textlink:before {
background-position: -20px -20px;
}
/* FLAPS END */
/* TABS START */
.tabset {
position: relative;
}
.tabset:before {
position: absolute;
width: 10000px;
left: -5000px;
top: 47px;
border-bottom: 1px solid #ccc;
content: "";
}
.tabset .swiper-container {
height: auto;
overflow: visible;
position: relative;
}
.tabset .tabs {
display: inline-block;
position: relative;
width: auto;
height: 48px !important;
margin: 0;
padding: 0;
overflow: hidden;
}
.tabset .tabs .swiper-slide {
height: auto;
}
.tabset .tabs li {
position: relative;
display: inline-block;
margin: 0 4px -1px 0;
margin: 0 0 -1px 0;
color: #333;
font-size: 18px;
cursor: pointer;
z-index: 10;
}
.tabset .tabs li span {
white-space: nowrap;
display: inline-block;
margin-right: 4px;
padding: 12px 20px 10px 20px;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
background: #ccc;
background: -moz-linear-gradient(top, #e7e7e7 0%, #ccc 100%);
background: -webkit-linear-gradient(top, #e7e7e7 0%, #ccc 100%);
background: -o-linear-gradient(top, #e7e7e7 0%, #ccc 100%);
background: linear-gradient(to bottom, #e7e7e7 0%, #ccc 100%);
-pie-background: linear-gradient(top, #e7e7e7 0%, #ccc 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.tabset .tabs .tab-open span {
color: #000;
border: 1px solid #ccc;
border-bottom: none;
cursor: default;
padding: 11px 19px 11px 19px;
background: #fff;
background: -moz-linear-gradient(top, #fff 0%, #fff 100%);
background: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
background: -o-linear-gradient(top, #fff 0%, #fff 100%);
background: linear-gradient(to bottom, #fff 0%, #fff 100%);
-pie-background: linear-gradient(top, #fff 0%, #fff 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.tabset .tab-content {
display: block !important;
position: absolute;
top: -10000px;
padding: 48px 0 0 0;
width: 400px;
height: 10px;
}
.tabset .tab-content.open {
position: relative;
top: auto;
width: auto;
height: auto;
}
/* TABS END */
/* FORMS START */
/* form fields */
.dp-form input[type=text],
.dp-form input[type=url],
.dp-form input[type=email],
.dp-form input[type=password],
.dp-form input[type=datetime-local],
.dp-form input[type=number],
.dp-form input[type=tel],
.dp-form input[type=datetime],
.dp-form input[type=date],
.dp-form input[type=month],
.dp-form input[type=search],
.dp-form input[type=range],
.dp-form select,
.dp-form textarea {
font-family: "Delivery_regular", sans-serif;
color: #333;
padding: 0 4px;
height: 30px;
border-color: #909090 #ccc #E4E4E4;
border-style: solid;
border-width: 1px;
background: #fff;
outline: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-box-shadow: inset 0 1px 1px -1px #000;
-webkit-box-shadow: inset 0 1px 1px -1px #000;
box-shadow: inset 0 1px 1px -1px #000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-appearance:none;
-webkit-appearance:none;
appearance:none;
}
.dp-form input[type=text]:focus,
.dp-form input[type=url]:focus,
.dp-form input[type=email]:focus,
.dp-form input[type=password]:focus,
.dp-form input[type=datetime-local]:focus,
.dp-form input[type=number]:focus,
.dp-form input[type=tel]:focus,
.dp-form input[type=datetime]:focus,
.dp-form input[type=date]:focus,
.dp-form input[type=month]:focus,
.dp-form input[type=search]:focus,
.dp-form input[type=range]:focus,
.dp-form select:focus,
.dp-form textarea:focus {
box-shadow: 0 0 3px #999;
}
.dp-form select {
padding: 4px 8px 0 1px;
display: inline-block;
}
.lt-ie9 .dp-form select {
padding: 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.dp-form select {
padding-right: 30px;
}
}
.dp-form option {
padding-right: 35px;
font-size: 14px;
}
.dp-form select[multiple=multiple] {
height: auto;
}
.dp-form textarea {
height: auto;
padding-left: 0;
height: 110px;
padding: 5px 4px;
}
/* customized radios & checkboxes including labels and errors */
.dp-form input[type=radio],
.dp-form input[type=checkbox] {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.dp-form input[type=radio] + label.rlabel,
.dp-form input[type=checkbox] + label.cblabel {
display: inline-block;
padding-left: 24px;
cursor: pointer;
position: relative;
line-height: 130%;
margin-top: 17px;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
}
.dp-form input[type=radio]:focus + label.rlabel,
.dp-form input[type=checkbox]:focus + label.cblabel {
text-decoration: underline;
}
.dp-form input[type=radio] + label.rlabel {
margin-right: 40px;
}
.dp-form .error input[type=checkbox] + label.cblabel {
padding-right: 25px;
}
.dp-form input[type=radio] + label.rlabel:before,
.dp-form input[type=checkbox] + label.cblabel:before {
position: absolute;
left: 0;
top: 2px;
content: "";
height: 16px;
width: 16px;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
background: url("../resources/img/sprite.png") no-repeat;
}
.dp-form input[type=radio] + label.rlabel:before {
background-position: -20px -560px;
}
.dp-form input[type=radio]:checked + label.rlabel:before {
background-position: -20px -600px;
}
.dp-form input[type=checkbox] + label.cblabel:before {
content: " ";
background-position: -20px -480px;
}
.dp-form .error input[type=checkbox] + label.cblabel:before {
background-position: -60px -480px;
}
.dp-form input[type=checkbox]:checked + label.cblabel:before {
content: " ";
background-position: -20px -520px;
}
.lt-ie9 .dp-form input.data-cb-checked + label.cblabel:before {
content: " ";/* l�st IE-8 Checkbox Problem*/
background-position: -20px -520px;
}
.dp-form .error input[type=checkbox]:checked + label.cblabel:before {
background-position: -60px -520px;
}
.dp-form .error input[type=checkbox] + label.cblabel:after {
position: absolute;
background: url("../resources/img/sprite.png") no-repeat -978px -978px;
content: "";
width: 20px;
height: 20px;
top: 0px;
right: 0;
}
/* customized select */
.dp-form .block .select_wrapper,
.dp-form .select_wrapper {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
}
.dp-form .select_wrapper:before {
content: '';
width: 27px;
right: 1px;
margin-top: 2px;
height: 27px;
background: #fff url("../resources/img/sprite.png") -149px -399px no-repeat;
position: absolute;
display: block;
z-index: 1;
pointer-events: none;
}
/* form buttons */
.search-result-submit,
.dp-form input[type=submit],
.dp-form input[type=reset],
.dp-form input[type=button],
.dp-form button {
position: relative;
display: block;
float: left;
min-width: 55px;
max-width: 310px;
margin: 0 15px 15px 0;
padding: 5px 10px 5px 10px;
line-height: 120%;
border: 1px solid #fc0;
font-family: "Delivery_regular", sans-serif;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
background: #fc0;
background: -moz-linear-gradient(top, #FFF0B3 0%, #ffe680 1px, #fc0 100%);
background: -webkit-linear-gradient(top, #FFF0B3 0%, #ffe680 1px, #fc0 100%);
background: -o-linear-gradient(top, #FFF0B3 0%, #ffe680 1px, #fc0 100%);
background: linear-gradient(to bottom, #FFF0B3 0%, #ffe680 1px, #fc0 100%);
-pie-background: linear-gradient(top, #FFF0B3 0%, #ffe680 1px, #fc0 100%);
-webkit-border-radius: 4px;
border-radius: 4px;
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
/* Mozilla Hack */
@-moz-document url-prefix() {
.search-result-submit,
.dp-form input[type=submit],
.dp-form input[type=reset],
.dp-form input[type=button],
.dp-form button {
padding-bottom: 6px;
}
}
.search-result-submit:focus,
.search-result-submit:hover,
.dp-form input[type=submit]:focus,
.dp-form input[type=submit]:hover,
.dp-form input[type=reset]:focus,
.dp-form input[type=reset]:hover,
.dp-form input[type=button]:focus,
.dp-form input[type=button]:hover,
.dp-form button:focus,
.dp-form button:hover {
border: 1px solid #ffe580;
text-decoration: none;
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
background: #fee280;
background: -moz-linear-gradient(top, #fff4c4 0%, #fee280 100%);
background: -webkit-linear-gradient(top, #fff4c4 0%, #fee280 100%);
background: -o-linear-gradient(top, #fff4c4 0%, #fee280 100%);
background: linear-gradient(to bottom, #fff4c4 0%, #fee280 100%);
-pie-background: linear-gradient(top, #fff4c4 0%, #fee280 100%);
}
.dp-form input.grey {
border: 1px solid #e1e1e1;
background: #fee280;
background: -moz-linear-gradient(top, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
background: -webkit-linear-gradient(top, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
background: -o-linear-gradient(top, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
background: linear-gradient(to bottom, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
-pie-background: linear-gradient(top, #fff 0%, #fdfdfd 1px, #e3e3e3 100%);
}
.dp-form input.grey:focus,
.dp-form input.grey:hover {
border: 1px solid #f0f0f0;
background: #f1f1f1;
background: -moz-linear-gradient(top, #fefefe 0%, #f1f1f1 100%);
background: -webkit-linear-gradient(top, #fefefe 0%, #f1f1f1 100%);
background: -o-linear-gradient(top, #fefefe 0%, #f1f1f1 100%);
background: linear-gradient(to bottom, #fefefe 0%, #f1f1f1 100%);
-pie-background: linear-gradient(top, #fefefe 0%, #f1f1f1 100%);
}
.dp-form input.red {
color: #fff;
border: 1px solid #D52F2F;
background: #BD0C1D;
background: -moz-linear-gradient(top, #eca1a1 0%, #CA3A48 1px, #BD0C1D 100%);
background: -webkit-linear-gradient(top, #eca1a1 0%, #CA3A48 1px, #BD0C1D 100%);
background: -o-linear-gradient(top, #eca1a1 0%, #CA3A48 1px, #BD0C1D 100%);
background: linear-gradient(to bottom, #eca1a1 0%, #CA3A48 1px, #BD0C1D 100%);
-pie-background: linear-gradient(top, #eca1a1 0%, #CA3A48 1px, #BD0C1D 100%);
}
.dp-form input.red:focus,
.dp-form input.red:hover {
border: 1px solid #e47878;
background: #d4616c;
background: -moz-linear-gradient(top, #dc7f88 0%, #d4616c 100%);
background: -webkit-linear-gradient(top, #dc7f88 0%, #d4616c 100%);
background: -o-linear-gradient(top, #dc7f88 0%, #d4616c 100%);
background: linear-gradient(to bottom, #dc7f88 0%, #d4616c 100%);
-pie-background: linear-gradient(top, #dc7f88 0%, #d4616c 100%);
}
/* error */
.dp-form .error textarea,
.dp-form .error input,
.dp-form .error select {
padding: 1px 3px 1px 3px;
border: 2px solid #c61111;
background: #fff url("../resources/img/sprite.png") no-repeat right -975px;
box-shadow: none;
height: 30px;
}
.dp-form .error textarea { height: auto; }
.dp-form .error input,
.dp-form .error label {
color: #c61111;
}
/* blocks */
.dp-form .block {
width: 100%;
margin-bottom: -10px;
padding-right: 40px;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.dp-form .one-third .block {
padding-left: 0;
}
.dp-form .block label {
width: 19%;
line-height: 20px;
display: inline-block;
margin-top: 5px;
}
.dp-form .block label.select_wrapper {
display: inline;
}
.dp-form .block label.select_wrapper:before {
margin-top: -28px;
}
@-moz-document url-prefix() {
.dp-form .block label.select_wrapper:before {
bottom: -4px;
}
}
.dp-form .one-half .block label {
width: 29%;
}
.dp-form .one-third .block label {
margin-top: 0;
margin-bottom: 5px;
width: 100%;
}
.dp-form .block select,
.dp-form .block textarea,
.dp-form .block input {
width: 80%;
vertical-align: top;
}
.dp-form .one-half .block select,
.dp-form .one-half .block textarea,
.dp-form .one-half .block input {
width: 70%;
}
.dp-form .one-third .block select,
.dp-form .one-third .block textarea,
.dp-form .one-third .block input {
width: 100%;
}
.dp-form .block .infotext {
position: absolute;
right: 0;
top: 0;
}
.dp-form .one-third .block .infotext {
top: 26px;
}
.dp-form .one-third .block label.select_wrapper {
display: inline-block;
}
.dp-form .one-third .block label.select_wrapper:before {
margin-top: 2px;
}
@-moz-document url-prefix() {
.dp-form .one-third .block label.select_wrapper:before {
bottom: 1px;
}
}
.dp-form .line_seperator {
margin: 7px 0 30px;
}
.dp-form .action-btn.right,
.dp-form input[type="submit"].right {
float: right;
margin: 0;
}
.dp-form .action-btn.left {
float: left;
margin: 0;
}
/* fieldsets */
.dp-form fieldset {
display: none;
}
.dp-form fieldset.active {
display: block;
}
/* FORMS END */
/* SUBPAGE DROPDOWN START */
.subpagedropdown select {
margin-bottom: 10px;
width: 50%;
}
.subpagedropdown-content {
margin: 0 -1.572327044025157%;
}
.subpagedropdown-content .stripe {
padding-left: 0;
padding-right: 0;
}
.subpagedropdown .button {
display: none;
}
/* SUBPAGE DROPDOWN END */
/* STEP NAVIGATION START */
.step-nav {
margin: 28px 0 -10px 0;
padding: 0;
width: 100%;
table-layout: fixed;
display: table;
}
.step-nav li {
display: table-cell;
text-align: center;
}
.step-nav p {
position: relative;
}
.step-nav p:after {
margin-left: 20px;
position: absolute;
content: "";
height: 9px;
width: 95%;
top: 15px;
left: 50%;
background: #d7d7d7;
background: -moz-linear-gradient(top, #e3e3e3 0%, #d7d7d7 100%);
background: -webkit-linear-gradient(top, #e3e3e3 0%, #d7d7d7 100%);
background: -o-linear-gradient(top, #e3e3e3 0%, #d7d7d7 100%);
background: linear-gradient(to bottom, #e3e3e3 0%, #d7d7d7 100%);
-pie-background: linear-gradient(top, #e3e3e3 0%, #d7d7d7 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.step-nav p.finished:after {
content: " ";
background: #fc0;
background: -moz-linear-gradient(top, #ffe680 0%, #fc0 100%);
background: -webkit-linear-gradient(top, #ffe680 0%, #fc0 100%);
background: -o-linear-gradient(top, #ffe680 0%, #fc0 100%);
background: linear-gradient(to bottom, #ffe680 0%, #fc0 100%);
-pie-background: linear-gradient(top, #ffe680 0%, #fc0 100%);
}
.step-nav .last p:after {
content: none;
width: 0;
background: transparent;
}
.step-nav a {
display: block;
}
.step-nav a:focus,
.step-nav a:hover {
text-decoration: none;
}
.step-nav .label {
display: inline-block;
margin-top: 8px;
color: #333;
}
.step-nav .active .label {
font-family: "Delivery_bold", sans-serif;
}
.stripe.black .step-nav .label {
color: #fff;
}
.step-nav a:focus .label,
.step-nav a:hover .label {
text-decoration: underline;
}
.step-nav .bubble {
display: block;
margin: 0 auto;
width: 40px;
height: 32px;
padding-top: 8px;
text-align: center;
font-size: 26px;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
background: url("../resources/img/sprite.png") no-repeat -850px -120px;
}
.stripe .step-nav .bubble {
color: #333;
}
.step-nav a .bubble,
.step-nav .active .bubble {
background-position: -800px -120px;
}
/* STEP NAVIGATION END */
/* SEARCH RESULT PAGE START */
.nfas .dp-form .searchfield {
float: left;
width: 382px;
margin-right: 10px;
}
.nfas .dp-form .teaser-btn {
font-size: 15px;
width: 100%;
max-width: 100%;
min-height: 77px;
padding-right: 55px;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.nfas .dp-form .teaser-btn:after {
content: "";
position: absolute;
height: 40px;
width: 25px;
right: 15px;
top: 50%;
margin-top: -20px;
background: url("../resources/img/sprite.png") no-repeat -100px -400px;
}
.nfas .dp-form .select_wrapper:before {
margin-top: 7px;
}
.nfas .dp-form .teaser-btn select {
margin-top: 5px;
max-width: 100%;
}
/* SEARCH RESULT PAGE END */
/* TABLE START */
.dp-table table {
border: none;
margin-left: -10px;
width: 100%;
}
.whole .dp-table table {
min-width: 964px;
}
.one-half .dp-table table {
min-width: 472px;
}
.one-third .dp-table table {
min-width: 308px;
}
.one-fourth .dp-table table {
min-width: 226px;
}
.dp-table tbody,
.dp-table tr,
.dp-table th,
.dp-table td {
border: none;
}
.dp-table th {
padding-bottom: 4px;
text-align: left;
font-weight: normal;
color: #000;
font-family: "Delivery_bold", sans-serif;
vertical-align: bottom;
white-space: nowrap;
}
.dp-table th,
.dp-table td {
border-bottom: 1px solid #ccc;
border-left: 10px solid transparent;
}
.whole .dp-table th,
.whole .dp-table td {
min-width: 120px;
}
.dp-table td {
padding: 10px 0;
vertical-align: top;
}
.dp-table td.grey {
background-color: #F3F3F3;
padding: 10px 10px;
}
.dp-table td.noborder {
border-bottom: none;
}
.dp-table tr:last-child td { /* TODO IE8 */
border-bottom: none;
}
.dp-table td.img {
text-align: center;
vertical-align: middle;
}
.dp-table th > div,
.dp-table td > div {
position: relative;
}
.stripe .dp-table .textblock td a {
font-family: "Delivery_regular", sans-serif;
}
.dp-table td b {
display: block;
margin-bottom: 10px;
font-size: 18px;
font-family: "Delivery_regular", sans-serif;
}
/* TABLE START */
/* NEWSLIST START */
.newslist {
margin-bottom: 20px;
}
.newslist h2 {
display: inline-block;
margin-right: 20px;
font-family: "Delivery_bold", sans-serif;
font-size: 15px;
font-weight: normal;
float: left;
line-height: 22px;
}
.newslist ul li {
display: none;
line-height: 130%;
}
.newslist ul li.active {
display: block;
}
.newslist .textlink:before {
height: 10px;
background-position: -20px -19px;
}
/* NEWSLIST END */
/* LISTEN START */
.stripe .textblock ul li a.textlink {
font-family: "Delivery_regular", sans-serif;
}
.textblock ul.checkmark {
margin: 0 0 20px 0;
}
.textblock ul.checkmark li {
position: relative;
margin-bottom: 4px;
padding-left: 22px;
margin-left: 0;
list-style: none;
}
.textblock ul.checkmark li:after {
position: absolute;
background: url("../resources/img/sprite.png") no-repeat -600px -15px;
content: " ";
width: 16px;
height: 16px;
top: 0;
left: 0;
}
.textblock ul.bulletlist {
margin: 0 0 20px 0;
}
.textblock ul.bulletlist li {
margin-left: 15px;
margin-bottom: 4px;
padding-left: 4px;
list-style: square;
}
.textblock ol,
.textblock ol.orderedlist {
margin: 0 0 20px 0;
padding-left: 20px;
}
.textblock ol li,
.textblock ol.orderedlist li {
list-style: decimal;
margin: 0 0 4px 0;
/*font-family: "Delivery_bold", sans-serif;*/
}
.textblock ol li span,
.textblock ol.orderedlist li span {
font-family: "Delivery_regular", sans-serif;
font-weight: normal;
}
.stripe.black .textblock ul,
.stripe.black .textblock ul.checkmark,
.stripe.black .textblock ul.bulletlist,
.stripe.black .textblock ol,
.stripe.black .textblock ol.orderedlist {
color: #fff;
}
.stripe.black ul.checkmark li:after {
background-position: -650px -15px;
}
/* LISTEN END */
/* HINWEIS START */
.clue {
min-height: 71px;
padding: 20px 20px 26px 115px;
position: relative;
background: #fc0;
background: -moz-linear-gradient(top, #ffe680 0%, #fc0 100%);
background: -webkit-linear-gradient(top, #ffe680 0%, #fc0 100%);
background: -o-linear-gradient(top, #ffe680 0%, #fc0 100%);
background: linear-gradient(to bottom, #ffe680 0%, #fc0 100%);
-pie-background: linear-gradient(top, #ffe680 0%, #fc0 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
.clue.success {
padding-bottom: 10px;
}
.clue:after {
position: absolute;
width: 75px;
height: 77px;
background: url("../resources/img/sprite.png") no-repeat;
content: "";
}
.clue.success:after {
top: 16px;
left: 16px;
background-position: 0px -743px;
}
.clue.error:after {
top: 20px;
left: 20px;
background-position: 0px -650px;
}
.clue h2 {
font-family: "Delivery_bold", sans-serif;
margin-bottom: 5px;
font-size: 18px;
line-height: 20px;
}
.clue.error .textlink {
color: #C61111;
font-family: "Delivery_regular", sans-serif;
}
.clue.error .textlink:before {
background-position: -40px -40px;
}
.clue.error .links a { display: block; }
/* HINWEIS END */
/* ISOTOPE START */
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/*
#isotope * {
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
*/
#isotope_wrapper {
width: 100%;
max-width: 1620px;
margin: 0 auto;
overflow: hidden;
}
#isotope {
width: 100%;
margin: 0 auto;
}
#isotope .item {
position: relative;
overflow: hidden;
width: 298px;
height: 185px;
margin: 0 0 30px 0;
float: left;
-webkit-tap-highlight-color: rgba(0,0,0,.25);
background: #e7e7e7;
background: -moz-linear-gradient(top, #ffe680 0%, #e7e7e7 100%);
background: -webkit-linear-gradient(top, #ffe680 0%, #e7e7e7 100%);
background: -o-linear-gradient(top, #ffe680 0%, #e7e7e7 100%);
background: linear-gradient(to bottom, #ffe680 0%, #e7e7e7 100%);
-pie-background: linear-gradient(top, #ffe680 0%, #e7e7e7 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
#isotope .item:hover {
cursor: pointer;
}
#isotope .item.expanded:hover {
cursor: default;
}
#isotope .item.height2 {
height: 400px;
}
#isotope .item.expanded {
width: 626px;
height: 400px;
}
#isotope .item h2 {
display: block;
position: absolute;
background:
width: 100%;
margin: 0;
padding: 7px 14px;
font-size: 18px;
left: 0;
right: 0;
bottom: 0;
font-size: 18px;
z-index: 2;
background: #fff;
background: rgba(255, 255, 255, .85);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
-pie-background: linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
#isotope .item.expanded h2 {
display: none;
}
#isotope .item h2:after {
background: url("../resources/img/sprite.png") no-repeat -700px -50px;
width: 17px;
height: 17px;
content: " ";
position: absolute;
top: 17px;
right: 17px;
}
#isotope .item img {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: auto;
}
#isotope .item .back {
display: none;
}
#isotope .item.expanded .front {
display: none;
}
#isotope .item.expanded .back {
display: block;
}
#isotope .item .textblock {
position: absolute;
display: none;
width: 370px;
height: 214px;
padding: 25px 0 10px 30px;
bottom: 0;
left: 0;
z-index: 0;
background: #fff;
background: rgba(255, 255, 255, .85);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
-pie-background: linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
behavior: url("/etc/designs/dpag_multiscreen/pie.htc");
}
#isotope .item.expanded .textblock {
display: block;
z-index: 2;
}
#isotope .item.expanded .textblock h3 {
font-size: 30px;
line-height: 120%;
}
#isotope .close {
position: absolute;
display: none;
background: #fff url("../resources/img/sprite.png") no-repeat -743px -43px;
width: 30px;
height: 30px;
text-indent: -9999px;
top: 0px;
right: 0px;
z-index: 2;
cursor: pointer;
}
#isotope .expanded .close {
display: block;
}
@media only screen and (max-width: 1666px) {
#isotope_wrapper {
max-width: 1290px;
margin: 0 auto;
}
}
@media only screen and (max-width: 1390px) {
#isotope_wrapper {
max-width: 960px;
margin: 0 auto;
}
}
@media only screen and (max-width: 1023px) {
#isotope_wrapper {
}
}
@media only screen and (max-width: 990px) {
#isotope_wrapper {
max-width: 636px;
margin: 0 auto;
}
}
@media only screen and (max-width: 640px) {
#isotope_wrapper {
max-width: 300px;
margin: 0 auto;
}
#isotope .item.expanded {
width: 298px;
height: 350px;
}
#isotope .item.height2 {
height: 350px;
}
#isotope .item .textblock {
width: 260px;
height: 154px;
padding: 15px 20px 10px 20px;
}
#isotope .item.expanded .textblock h3 {
font-size: 18px;
}
#isotope .item.expanded .textblock p {
line-height: 130%;
}
#isotope .expanded .close {
display: none;
}
#isotope .item.expanded .front {
display: block;
}
#isotope .item.expanded .back {
display: none;
}
#isotope .item h2:after {
top: 10px;
}
}
/* ISOTOPE END */
/* PRODUKTE START */
.productsaz .teaser-btn {
height: 93px;
width: 244px;
z-index: 44;
}
.productsaz .line_seperator {
margin: 0;
}
.productsaz .selector {
width: 100%;
display: table;
table-layout: fixed;
margin-top: 15px;
}
.productsaz .selector .mobileopener {
display: none;
}
.productsaz .selector li {
font-size: 30px;
color: #CCAC39;
display: table-cell;
text-align: center;
}
.productsaz .azsection {
width: 100%;
position: relative;
}
.productsaz .azsection:before {
position: absolute;
height: 200px;
width: 200px;
right: 0;
bottom: -49px;
color: #E1E1E1;
font-family: "FrutigerLTW01-67BoldCn", sans-serif;
font-size: 130px;
text-align: right;
z-index: 0;
}
.productsaz #product_A:before { content: "A"; }
.productsaz #product_B:before { content: "B"; }
.productsaz #product_C:before { content: "C"; }
.productsaz #product_D:before { content: "D"; }
.productsaz #product_E:before { content: "E"; }
.productsaz #product_F:before { content: "F"; }
.productsaz #product_G:before { content: "G"; }
.productsaz #product_H:before { content: "H"; }
.productsaz #product_I:before { content: "I"; }
.productsaz #product_J:before { content: "J"; }
.productsaz #product_K:before { content: "K"; }
.productsaz #product_L:before { content: "L"; }
.productsaz #product_M:before { content: "M"; }
.productsaz #product_N:before { content: "N"; }
.productsaz #product_O:before { content: "O"; }
.productsaz #product_P:before { content: "P"; }
.productsaz #product_Q:before { content: "Q"; }
.productsaz #product_R:before { content: "R"; }
.productsaz #product_S:before { content: "S"; }
.productsaz #product_T:before { content: "T"; }
.productsaz #product_U:before { content: "U"; }
.productsaz #product_V:before { content: "V"; }
.productsaz #product_W:before { content: "W"; }
.productsaz #product_X:before { content: "X"; }
.productsaz #product_Y:before { content: "Y"; }
.productsaz #product_Z:before { content: "Z"; }
/* PRODUKTE END */
/* FOOTER START */
footer {
margin-bottom: 30px;
color: #999;
}
footer a {
color: #999;
}
footer a:hover,
footer a:focus {
outline: none;
text-decoration: underline;
}
footer p {
margin-bottom: 3px;
}
footer li {
position: relative;
display: inline-block;
margin-bottom: 10px;
}
footer li:after {
position: absolute;
top: 0;
right: 4px;
content: " | ";
}
footer li + li.last:after {
content: "";
}
footer .container .column {
margin-bottom: 0;
}
footer .left a,
footer .right a {
display: inline-block;
padding-right: 16px;
padding-bottom: 3px;
}
.lt-ie9 footer .left li,
.lt-ie9 footer .right li {
float: left;
}
.lt-ie9 footer .left li {
margin-top: 1px;
}
footer .footer-logo {
display: block;
margin-top: 5px;
margin-bottom: -3px;
width: 160px;
height: 42px;
background: url("../resources/img/DHL_Group_logo_rgb_black.svg") no-repeat;
text-indent: -9999px;
overflow: hidden;
}
footer .footer-logo:focus {
border-bottom: 1px solid #333;
margin-bottom: -4px;
}
footer .footer-logo:after {
clear: both;
}
footer .whole .footer-nav-extended {
margin-bottom: 14px;
border-bottom: 1px solid #ccc;
}
footer .footer-nav-extended,
footer .footer-nav-extended a.textlink {
color: #333;
}
footer .footer-nav-extended li {
padding-right: 32px;
}
footer .footer-nav-extended li:after {
content: "";
}
footer .footer-nav-extended li .size-13 {
font-family: "Delivery_bold", sans-serif;
}
footer .left {
float: left;
}
footer .right {
float: right;
}
footer .footnote {
margin-top: 15px;
}
/* footnotes */
.stripe .footnote {
color: #999;
font-size: 12px;
}
.stripe .footnote p {
margin-bottom: 0;
font-size: 12px;
line-height: 150%;
color: #999;
}
.stripe .footnote a {
color: #999;
padding-left: 7px;
font-family: "Delivery_bold", sans-serif;
}
.stripe .footnote a:before {
background-position: -60px -40px;
width: 5px;
height: 7px;
top: 8px;
}
/* FOOTER END */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
#stage.singleslide .half-transparent-box:before,
#stage.singleslide .half-transparent-box:after,
.textblock p:after,
.cl:before,
.cl:after {
content: " "; /* 1 */
display: table; /* 2 */
}
#stage.singleslide .half-transparent-box:after,
.textblock p:after,
.cl:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
#stage.singleslide .half-transparent-box,
.textblock p,
.cl {
*zoom: 1;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
/* Startseite */
.ax_image {
font-family:'Frutiger Regular', 'Frutiger';
font-weight:400;
font-style:normal;
font-size:13px;
color:#000000;
text-align:center;
line-height:normal;
}
#u309 {
position:absolute;
left:254px;
top:358px;
width:310px;
height:93px;
font-family:'Frutiger Bold', 'Frutiger';
font-weight:700;
font-style:normal;
}
#u309_img {
position:absolute;
left:0px;
top:0px;
width:312px;
height:95px;
}
#u309_img.mouseOver {
}
#u309.mouseOver {
opacity:0.5;
}
#u310 {
position:absolute;
left:2px;
top:36px;
width:306px;
word-wrap:break-word;
}
#u311 {
position:absolute;
left:591px;
top:358px;
width:310px;
height:93px;
font-size:15px;
}
#u311_img {
position:absolute;
left:0px;
top:0px;
width:312px;
height:95px;
}
#u311_img.mouseOver {
}
#u311.mouseOver {
opacity:0.5;
}