/* Start reset html elements */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, big, cite, code, address,
article, aside, footer, header, nav, section, time,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
box-sizing:border-box;
}
address,article,aside,audio,canvas,command,datalist,
details,embed,figcaption,figure,footer,header,
hgroup,keygen,mark,meter,nav,ouput,progress,
section,source,summary,time,video,wbr {
display: block;
}
input:focus, textarea:focus, select:focus {
outline: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
padding: 0;
border: 0;
}
table td, table th {
padding: 0;
}
a:active, label:active {
outline: none;
ie-dummy: expression(this.hideFocus=true);
}
a:focus, label:focus {
-moz-outline-style: none;
outline: none;
ie-dummy: expression(this.hideFocus=true);
}
input[type=checkbox] {
border-width: 0;
}
/* End reset html elements */
/* Start generic elements */
html {
overflow-y: scroll;
height: 100%;
}
body {
background-image: url(/images/demoshop_bg.png);
height: 100%;
}
td, p, div, span, ol, ul, input, textarea, select {
font-family:Arial,Helvetica,Verdana,sans-serif;
font-size: 16px;
line-height: 150%;
box-sizing:border-box;
/*color: #000;*/
}
input[type=text],
input[type=password],
input[type=button],
input[type=submit],
textarea,
select {
border:1px solid #B0CCFF;
border:none;
line-height: 120%;
color:#FFF;
background-color:rgba(100,100,100,0.8);
height: 28px;
margin-bottom:8px;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
padding:0px 5px;
resize:none;
}
select {
*behavior: none;
padding:3px 5px;
background-image:url('/images/dropdown_arrow.png');
background-position:right 5px center;
background-repeat:no-repeat;
background-size:14px;
position: relative;
}
textarea {
padding:5px;
}
input[type=checkbox] {
border-width: 0px;
background-color: transparent;
width: 20px !important;
#margin-top: -1px;
margin-left: -3px;
}
input[type=submit] {
padding-left: 20px;
padding-right: 20px;
}
input[type=submit]:hover {
/*background:#B0CCFF;*/
background:rgba(50,50,50,0.8);
}
input[type=submit],
article a.button {
cursor: pointer;
position: relative; /* prevent element from disappearing in ie */
}
/* span is to cope for protected emails */
a, a:visited, a:visited span, a:link span {
color: #8099CC;
text-decoration: none;
}
a:hover, a:hover span {
color: #B0CCFF;
}
ul {
list-style-type: none;
list-style-position: outside;
}
ul li {
list-style-type: none;
background: url(/images/bullet.gif) no-repeat 0px 7px;
padding-left: 14px;
}
hr {
color: #ccc;
background-color: #ccc;
height: 1px;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
*zoom: 1;
}
/* End generic elements */
/* Start Freshpage elements (these classes are defined in Freshpage and setable) */
.small {
font-size: 14px
}
.big {
font-size: 20px
}
table[tbltype=Standard]{
}
#oContentTable tr td {
}
/* End Freshpage elements */
/* Start Layout */
body#frontend {
background:url('/images/bf_bg_1920.jpg') no-repeat fixed center center;
background-size:cover;
}
#wrapper {
max-width: 1160px;
min-width: 1000px; /* 640px;*/
margin: 0 auto;
background-color:rgba(0,0,0,0.6);
padding: 0 20px;
/*box-shadow: 0px 0px 32px 8px #000000;*/
min-height: 100%;
height: auto !important;
height: 100%;
}
#wrapper img:not([width]) {
width:100%;
}
#wrapper .fpmain table {
width:auto !important;
}
/* Start Layout Header */
#wrapper header {
margin-bottom: 30px;
}
#wrapper header #logo {
display:block;
padding:30px;
}
#wrapper header #navbar-background {
width:calc(100% + 40px);
margin-left:-20px;
background:url('/images/dmplate.jpg');
}
#wrapper header #navbar {
border-top:1px solid #333;
padding:0 6px;
border-bottom:1px solid #333;
background:rgba(0,0,0,0.4);
}
#wrapper aside.column #currencynav {
border-top:1px solid #8099CC;
border-bottom:1px solid #8099CC;
}
#wrapper header #navbar #toplvlnav {
display:inline-block;
text-align:left;
float:left;
}
#wrapper header #navbar #langnav,
#wrapper aside.column #currencynav {
display:inline-block;
text-align:right;
float:right;
}
#wrapper header #navbar #toplvlnav a,
#wrapper header #navbar #langnav a {
display:inline-block;
padding:8px 15px 12px 15px;
font-family:'Meta Serif Offc W01 Bold',Arial,Helvetica,Verdana,sans-serif;
letter-spacing:1px;
font-size:21px;
line-height:21px;
color:#FFF;
text-shadow:0px 0px 20px #000, 0px 0px 15px #000, 0px 0px 10px #000, 2px 2px 4px #000;
text-transform:uppercase;
-webkit-transition:color 0.15s;
transition:color 0.15s;
}
#wrapper header #navbar #toplvlnav a {
padding-right:12px;
}
#wrapper aside.column #infonav a,
#wrapper aside.column #currencynav a {
display:inline-block;
padding:8px 0px;
font-size:18px;
line-height:18px;
/*text-transform:uppercase;*/
}
#wrapper header #navbar #langnav a {
font-size:18px;
}
#wrapper aside.column #infonav a {
display:block;
width:100%;
border-top:1px solid #8099CC;
}
#wrapper aside.column #currencynav {
display:block;
width:100%;
font-weight:bold;
margin-bottom:20px;
}
#wrapper header #navbar #toplvlnav a.active,
#wrapper header #navbar #langnav a.active,
#wrapper header #navbar #toplvlnav a:hover,
#wrapper header #navbar #langnav a:hover {
color:#68C;
}
#wrapper aside.column #infonav a.active,
#wrapper aside.column #currencynav a.active {
color:#B0CCFF;
}
#wrapper nav .separator {
display:inline-block;
/*padding:0 10px;*/
color:#FFF;
text-shadow:0px 0px 20px #000, 0px 0px 15px #000, 0px 0px 10px #000, 2px 2px 4px #000;
}
#wrapper #currencynav .separator { padding: 0 10px; }
/* End Layout Header */
/* Start Layout Content */
#wrapper #content {
position:relative;
color:#FFF;
}
#wrapper #content span.error,
#wrapper #content span.important {
display:block;
color: #ff0000;
font-weight: bold;
}
#wrapper #content #footer-links {
margin:20px 0;
}
#wrapper #content #footer-links .tz_logo,
#wrapper #content #footer-links #ak_logo {
display:inline-block;
width:21.75%;
float:left;
}
#wrapper #content #footer-links .tz_logo {
width:15%;
}
#wrapper #content #footer-links #banner_bottom {
display:inline-block;
width:77%;
float:right;
}
#wrapper #content #footer-links .sm-icon {
width:calc((100% - 30px) / 4);
padding-bottom:calc((100% - 30px) / 4);
margin-left:10px;
background-size:cover;
transition:background 0.2s;
float:left;
}
#wrapper #content #footer-links .sm-icon:first-child {
margin-left:0;
}
#wrapper #content #footer-links .sm-icon.facebook { background-image:url('/images/fb.png'); }
#wrapper #content #footer-links .sm-icon.facebook:hover { background-image:url('/images/fb-hover.png'); }
#wrapper #content #footer-links .sm-icon.twitter { background-image:url('/images/twitter.png'); }
#wrapper #content #footer-links .sm-icon.twitter:hover { background-image:url('/images/twitter-hover.png'); }
#wrapper #content #footer-links .sm-icon.instagram { background-image:url('/images/instagram.png'); }
#wrapper #content #footer-links .sm-icon.instagram:hover { background-image:url('/images/instagram-hover.png'); }
#wrapper #content #footer-links .sm-icon.youtube { background-image:url('/images/youtube.png'); }
#wrapper #content #footer-links .sm-icon.youtube:hover { background-image:url('/images/youtube-hover.png'); }
/* Start Layout Content RightColumn */
#wrapper #content aside.column {
position:relative;
width:25%;
float: left;
padding:0px 0px 20px 20px;
}
#wrapper aside.column #tzr_iframe {
border:none;
transform:scale(0.8125);
transform-origin:0 0;
}
/* End Layout Content RightColumn */
/* Start Layout Content LeftColumn/RightColumn Boxes */
#wrapper #content aside ul#articlenav {
padding: 10px 15px;
background-color: #dedede;
margin-bottom: 10px;
}
#wrapper #content aside ul#articlenav li,
#wrapper #content aside ul#infonav li {
background: none;
padding-left: 0px;
font-size: 14px;
line-height: 180%;
text-transform: uppercase;
}
#wrapper #content aside ul#articlenav li li,
#wrapper #content aside ul#infonav li li{
background: none;
padding-left: 15px;
}
#wrapper #content aside ul#articlenav li a,
#wrapper #content aside ul#infonav li a {
color: #fff;
text-decoration: none;
}
#wrapper #content aside ul#articlenav li a:hover,
#wrapper #content aside ul#articlenav li a.active,
#wrapper #content aside ul#infonav li a:hover,
#wrapper #content aside ul#infonav li a.active {
color: #8099CC
}
#wrapper #content aside > div.boxtitle {
text-transform: uppercase;
font-size: 20px;
line-height:24px;
font-family:Arial,Helvetica,Verdana,sans-serif;
margin-bottom:20px;
}
#wrapper #content aside > div.box > a,
#wrapper #content aside > div.box > a:visited {
color: #8099CC;
}
#wrapper #content aside > div.box > a:hover {
color: #8099CC;
}
#wrapper #content aside > div.box > form > select {
width: 160px;
}
#wrapper #content form[name=searchform] > input#search,
#wrapper #content form[name=newsletterform] > input#newsletteremail {
margin-right: 5px;
width:135px;
}
#wrapper #content aside > div.box > form[name=searchform] > input#searchbutton,
#wrapper #content aside > div.box > form[name=newsletterform] > input#newsletterbutton {
width: 50px;
}
#wrapper #content aside > div.box > form[name=loginform] > label {
float: left;
display: block;
width: 65px;
}
#wrapper #content aside > div.box > form[name=loginform] > input[type=text],
#wrapper #content aside > div.box > form[name=loginform] > input[type=password]{
margin-bottom: 5px;
width: 120px;
}
#wrapper #content aside > div.box > form[name=loginform] > input[type=submit]{
margin-bottom: 5px;
width: 110px;
}
#wrapper #content aside > div.box > form[name=loginform] > br {
clear: both;
}
#wrapper #content aside > div.box > table#merkliste {
width: 100%;
}
#wrapper #content aside > div.box > table#merkliste tr > td {
padding-right: 10px;
line-height: 120%;
vertical-align: top;
padding-bottom: 4px;
}
#wrapper #content aside > div.box > table#merkliste tr > td.right {
white-space: nowrap;
text-align: right;
padding-right: 0px;
}
#wrapper #content aside > div.box > table#minibasket {
width: 100%;
border-top:1px solid #8099CC;
}
#wrapper #content aside > div.box > table#minibasket a,
#wrapper #content aside > div.box > table#minibasket a:visited {
color: #8099CC;
}
#wrapper #content aside > div.box > table#minibasket a:hover {
color: #B0CCFF;
}
#wrapper #content aside > div.box > table#minibasket tr {
border-bottom:1px solid #8099CC;
}
#wrapper #content aside > div.box > table#minibasket tr > td {
padding: 6px 0;
padding-right: 10px;
line-height: 120%;
vertical-align: top;
}
#wrapper #content aside > div.box > table#minibasket tr > td.left {
white-space: nowrap;
text-align: right;
}
#wrapper #content aside > div.box > table#minibasket tr > td.right {
white-space: nowrap;
text-align: right;
padding-right: 0px;
}
#wrapper #content aside > div.box > table#minibasket tr.total td {
font-weight: bold;
}
#wrapper #content aside > div.box > form[name=logoutform] > input[type=submit] {
margin-top: 5px;
}
#wrapper #content aside > div.box > form[name=logoutform] > a#customerarealink,
#wrapper #content aside > div.box > form[name=logoutform] > a#customerarealink:visited {
color: #8099CC;
}
#wrapper #content aside > div.box > form[name=logoutform] > a#customerarealink:hover {
color: #8099CC;
}
/* End Layout Content LeftColumn/RightColumn Boxes */
/* Start Layout Content Article */
#wrapper #content article {
width:75%;
float: left;
padding: 0px 0px 10px 0px;
}
#wrapper #content article > h1.entrytitle {
color: #fff;
font-size: 20px;
text-transform: uppercase;
font-family:Arial,Helvetica,Verdana,sans-serif;
margin-bottom: 20px;
line-height: 24px;
}
#wrapper #content article > h1.entrytitle a {
font-size: 12px;
text-transform: none;
}
/* Start Layout Content Article Forms */
#wrapper #content article form label br,
#wrapper #content article form label + a + br,
#wrapper #content article form label + select + br,
#wrapper #content article form label + textarea + br,
#wrapper #content article form label + input + input + br {
clear: both;
}
#wrapper #content article form input.error,
#wrapper #content article form select.error,
#wrapper #content article form textarea.error {
border: 1px solid #f00;
background-color: #FFE6E6;
color:#000;
}
#wrapper #content article form input[type=text],
#wrapper #content article form input[type=password],
#wrapper #content article form textarea,
#wrapper #content article form select {
width: 75%;
}
#wrapper #content article form input[type=submit] {
width:auto;
min-width:25%;
}
#wrapper #content article form textarea {
height: 120px;
}
#wrapper #content article form label {
margin-top: 3px;
margin-bottom: 2px;
height: 17px;
float: left;
}
#wrapper #content article form input + label {
float:none;
}
#wrapper #content article form[name=contactform] label,
#wrapper #content article form[name=freshguest_addentry] label {
width: 25%;
padding-right:20px;
text-align:right;
}
#wrapper #content article form#registerform {
margin-top:18px;
}
#wrapper #content article form#addressform label,
#wrapper #content article form#registerform label {
width: 25%;
}
#wrapper #content article form label.long.spacing {
margin-top: 15px;
}
#wrapper #content article form input#plz,
#wrapper #content article form input#lieferungplz {
width: 60px;
margin-right: 8px;
}
#wrapper #content article form input#ort,
#wrapper #content article form input#lieferungort {
width: calc(75% - 68px);
}
#wrapper #content article form#addressform input#passwortwiederholen{
width: 40%;
margin-right: 4px;
}
#wrapper #content article form div#different_delivery_box {
display: none;
}
#wrapper #content article form#passwordforgottenform label {
display: block;
width: 40px;
}
/* End Layout Content Article Forms */
/* Start Layout Content Article Overview */
#wrapper #content article > div.pagenav {
width: 100%;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
padding: 3px 0px 1px 0px;
}
#wrapper #content article > div.pagenav > span {
display: inline-block;
float: left;
}
#wrapper #content article > div.pagenav > span.left {
width: 270px;
}
#wrapper #content article > div.pagenav > span.left > a:link,
#wrapper #content article > div.pagenav > span.left > a:visited,
#wrapper #content article > div.pagenav > span.left > a:hover {
display: inline-block;
margin-left: 5px;
}
#wrapper #content article > div.pagenav > span.left > a.active {
font-weight: bold;
}
#wrapper #content article > div.pagenav > span.center {
width: 170px;
text-align: center;
}
#wrapper #content article > div.pagenav > span.right {
width: 270px;
text-align: right;
font-weight: bold;
}
#wrapper #content article > div.pagenav > span.right > a.forward {
display: inline-block;
margin-left: 10px;
}
#wrapper #content article > div.articlerow,
#wrapper #content article > div.categoryrow,
#wrapper #content article > div.manufacturerrow {
margin-bottom: 12px;
}
#wrapper #content article > div.articlerow > div *,
#wrapper #content article > div.categoryrow > div *,
#wrapper #content article > div.manufacturerrow > div * {
line-height: 120% !important;
}
#wrapper #content article > div.articlerow > div.article,
#wrapper #content article > div.categoryrow > div.category,
#wrapper #content article > div.manufacturerrow > div.manufacturer {
float: left;
margin-left: 10px;
width: 230px;
}
#wrapper #content article > div.articlerow > div.article:first-child,
#wrapper #content article > div.categoryrow > div.category:first-child,
#wrapper #content article > div.manufacturerrow > div.manufacturer:first-child {
margin-left: 0px;
}
#wrapper #content article > div.articlerow > div.article a,
#wrapper #content article > div.categoryrow > div.category a,
#wrapper #content article > div.manufacturerrow > div.manufacturer a {
color: #fff;
}
#wrapper #content article > div.articlerow > div.article a:hover,
#wrapper #content article > div.categoryrow > div.category a:hover,
#wrapper #content article > div.manufacturerrow > div.manufacturer a:hover,
#wrapper #content article > div.articlerow > div.article a:hover span,
#wrapper #content article > div.manufacturerrow > div.manufacturer a:hover span {
color: #8099CC !important;
text-decoration: none;
}
#wrapper #content article > div.articlerow > div.article a.left,
#wrapper #content article > div.categoryrow > div.category a.left,
#wrapper #content article > div.manufacturerrow > div.manufacturer a.left {
float: left;
display: inline-block;
width: 140px;
}
#wrapper #content article > div.categoryrow > div.category a.left {
width: 230px;
}
#wrapper #content article > div.articlerow a.right,
#wrapper #content article > div.manufacturerrow a.right {
float: right;
display: inline-block;
width: 90px;
text-align: right;
}
#wrapper #content article > div.articlerow > div.article > a.right span {
white-space: nowrap;
text-decoration: line-through;
color: #fff;
}
#wrapper #content article > div.articlerow > div.article > a.right span:first-child {
text-decoration: none;
}
#wrapper #content article > div.articlerow > div.article > a.articleimage > img,
#wrapper #content article > div.categoryrow > div.category > a.articleimage > img {
width: 228px;
height: 228px;
border: 1px solid #fff;
float: left;
margin-bottom: 3px;
}
#wrapper #content article > div.articlerow > div.article > a > img.icon {
width: 16px;
height: 16px;
margin-bottom: 10px;
vertical-align:top;
}
#wrapper #content article > div.manufacturerrow > div.manufacturer div.imgbox {
width: 228px;
height: 228px;
border: 1px solid #fff;
float: left;
display: table;
#position: relative;
overflow: hidden;
margin-bottom: 3px;
}
#wrapper #content article > div.manufacturerrow > div.manufacturer div.imgbox div {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
text-align: center;
#width:100%;
}
#wrapper #content article > div.manufacturerrow > div.manufacturer div.imgbox a {
#display:block;
#position: relative;
#top: -50%;
}
/* End Layout Content Article Overview */
/* Start Layout Content Article Detailview */
#wrapper #content article > div.articlenav {
width: 100%;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
margin-bottom: 10px;
padding: 3px 0px 1px 0px;
text-align: right;
font-weight: bold;
}
#wrapper #content article > div.articlenav > a {
display: inline-block;
margin-left: 10px;
}
#wrapper #content article > div#articledetail {
padding-top:20px;
border-top:1px solid #FFF;
padding-bottom:20px;
}
#wrapper #content article > div#articledetail > div.images {
float: left;
width:33.3333333333%;
padding-right:20px;
line-height: 0;
font-size: 0;
}
#wrapper #content article > div#articledetail > div.images > a > img#main {
width: 100%;
border: 1px solid #fff;
}
#wrapper #content article > div#articledetail > div.images > a > img.thumbnail {
border: 1px solid #fff;
margin-top: 5px;
margin-right: 5px;
width:calc((100% - 15px)/4);
}
#wrapper #content article > div#articledetail > div.images > a:nth-child(4n + 1) > img.thumbnail {
margin-right: 0px;
}
#wrapper #content article > div#articledetail > div.description {
float: left;
width:66.6666666667%;
}
#wrapper #content article > div#articledetail > div.description > span.artnr {
color: #999;
}
#wrapper #content article > div#articledetail > div.description > span.lieferzeit,
#wrapper #content article > div#articledetail > div.description > span.lieferzeit > span,
#wrapper #content article > div#articledetail > div.description > span.lagerbestand,
#wrapper #content article > div#articledetail > div.description > span.lagerbestand > span {
color: #999;
}
#wrapper #content article > div#articledetail > div.description > div.price {
font-size: 16px;
font-weight: bold;
}
#wrapper #content article > div#articledetail > div.description > table.blockprices tr > td {
border: 1px solid #fff;
padding: 2px;
white-space: nowrap;
}
#wrapper #content article > div#articledetail > div.description > table.blockprices tr > td.firstrow {
font-weight: bold;
text-transform: uppercase;
}
#wrapper #content article > div#articledetail > div.description > table.blockprices tr > td.right {
text-align: right;
font-weight: bold;
padding-left: 10px;
}
#wrapper #content article > div#articledetail > div.description > form[name=inbasket] {
margin-top: 20px;
}
#wrapper #content article > div#articledetail > div.description > form[name=inbasket] > div.merkmale {
margin-top: 10px;
}
#wrapper #content article > div#articledetail > div.description > form[name=inbasket] > div.merkmale label {
float: left;
display: block;
padding-right: 10px;
}
#wrapper #content article > div#articledetail > div.description > form[name=inbasket] > div.merkmale select {
margin-bottom: 10px;
width:250px;
}
#wrapper #content article > div#articledetail > div.description > form[name=inbasket] > div.merkmale br {
clear: both;
}
#wrapper #content article > div#articledetail > div.description > form[name=inbasket] > span#inbasket label {
font-weight: bold;
padding-right: 10px;
}
#wrapper #content article > div#articledetail > div.description > form[name=inbasket] > span#inbasket > input {
margin: 0 0 0 10px;
padding:0;
width:180px;
}
#wrapper #content article > div#articledetail > div.description > form[name=inbasket] > span#inbasket > select {
margin:0;
width:60px;
}
#wrapper #content article > div#articledetail > div.description > form[name=inbasket] > span#inbasket_not_available {
color:red;
}
#wrapper #content article > div#articledetail > div.description > a#manufacturerlink {
display: block;
margin-top: 12px;
}
#wrapper #content article > h3#crosssellingtitle {
margin-top: 16px;
margin-bottom: 6px;
font-weight: bold;
font-size: 14px;
}
#wrapper #content article > div.crossselling {
margin-bottom: 10px;
}
#wrapper #content article > div.crossselling > div *{
line-height: 120% !important;
margin-bottom: 10px;
}
#wrapper #content article > div.crossselling > div.article {
float: left;
margin-left: 10px;
width: 134px;
}
#wrapper #content article > div.crossselling > div.article:first-child {
margin-left: 0px;
}
#wrapper #content article > div.crossselling > div.article a,
#wrapper #content article > div.crossselling > div.article a:visited,
#wrapper #content article > div.crossselling > div.article a span,
#wrapper #content article > div.crossselling > div.article a:visited span {
color:#000;
}
#wrapper #content article > div.crossselling > div.article a:hover,
#wrapper #content article > div.crossselling > div.article a:hover span {
color: #8099CC;
text-decoration:none;
}
#wrapper #content article > div.crossselling > div.article > a.left {
float: left;
display: inline-block;
width: 64px;
word-wrap: break-word;
}
#wrapper #content article > div.crossselling > div.article > a.right {
float: right;
display: inline-block;
width: 70px;
text-align: right;
}
#wrapper #content article > div.crossselling > div.article > a.right > span {
white-space: nowrap;
text-decoration: line-through;
}
#wrapper #content article > div.crossselling > div.article > a.right > span:first-child {
text-decoration: none;
}
#wrapper #content article > div.crossselling > div.article > a > img {
width: 132px;
height: 132px;
border: 1px solid #fff;
float: left;
margin-bottom: 3px;
}
/* End Layout Content Article Detailview */
/* Start Layout Content Article Customerarea */
#wrapper #content article > ul#customernavigation {
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#wrapper #content article > ul#customernavigation > li {
background: url(/images/spacer.gif) no-repeat 0px 0px;
padding: 0;
margin: 0 1px 0 0;
min-width: 100px;
float:left;
}
#wrapper #content article > ul#customernavigation > li > a:link,
#wrapper #content article > ul#customernavigation > li > a:visited {
background-color: #dedede;
height: 100%;
display: inline-block;
padding: 6px 30px 6px 10px;
text-decoration: none;
}
#wrapper #content article > ul#customernavigation > li > a:hover,
#wrapper #content article > ul#customernavigation > li > a.active {
background-color: #999;
color: #fff;
text-decoration: none;
}
#wrapper #content article > table#orderheader {
width: 100%;
}
#wrapper #content article > table#orderheader tr > td {
padding: 2px 0px 2px 0px;
}
#wrapper #content article > table#orderheader tr > td.firstCol {
font-weight: bold;
}
#wrapper #content article > table#orderheader tr > td.secondCol {
text-align: right;
}
#wrapper #content article > table#ordertable {
width: 100%;
}
#wrapper #content article > table#ordertable tr:first-child > td {
font-weight: bold;
}
#wrapper #content article > table#ordertable tr > td {
padding: 2px 20px 2px 0px;
border-bottom: 1px solid #ccc;
}
#wrapper #content article > table#ordertable tr > td.secondCol,
#wrapper #content article > table#ordertable tr > td.fifthCol {
text-align: right;
}
#wrapper #content article > table#ordertable tr > td.fifthCol {
padding-right: 0px;
}
/* End Layout Content Article Customerarea */
/* Start Layout Content Article Basket */
#wrapper #content article > div.basketnav {
width: 100%;
}
#wrapper #content article > div.basketnav > form {
float:left;
}
#wrapper #content article > div.basketnav > form:first-child input,
#wrapper #content article > div.basketnav > form.voucher input {
width:auto;
}
#wrapper #content article > div.basketnav > form.voucher {
padding-left:30px;
position:relative;
}
#wrapper #content article > div.basketnav > form.voucher > div {
position:absolute;
top:30px;
left:30px;
width:230px;
padding: 15px;
background-color: #dedede;
display: none;
}
#wrapper #content article > div.basketnav > form.voucher > div > div {
margin-bottom:5px;
}
#wrapper #content article > div.basketnav > form.voucher > div label {
padding-right:10px;
}
#wrapper #content article > div.basketnav > form.voucher > div input[type=text] {
width:70px;
margin-right:2px;
}
#wrapper #content article > div.basketnav > form.voucher > div input[type=submit] {
width:40px;
}
#wrapper #content article > div.basketnav form.continue {
float: right;
}
#wrapper #content article div#basketprogressbar {
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
text-align:justify;
-ms-text-justify: distribute-all-lines;
width:100%;
font-size: 0;
}
#wrapper #content article div#basketprogressbar:after {
content:"";
display: inline-block;
width: 100%;
}
#wrapper #content article div#basketprogressbar div.item {
color: #666;
display:inline-block;
}
#wrapper #content article > div#basketprogressbar div.item.active {
color: #fff;
font-weight: bold;
}
#wrapper #content article > table.baskettable {
width: 100%;
}
#wrapper #content article > table.baskettable tr > td {
border-bottom: 1px solid #ccc;
padding: 2px 0px;
vertical-align: top;
}
#wrapper #content article > table.baskettable tr > td.right {
text-align: right;
}
#wrapper #content article > table.baskettable tr > td.center {
text-align: center;
}
#wrapper #content article > table.baskettable tr.header > td {
font-weight: bold;
}
#wrapper #content article > table.baskettable tr.items > td img.articleimage {
width: 80px;
float: left;
margin-right: 10px;
}
#wrapper #content article > table.baskettable tr.items > td > a.articletitle {
font-weight: bold;
}
#wrapper #content article > table.baskettable tr.items > td span.alert_reset {
background:#FFE6E6;
color:#f00;
border:1px solid #f00;
padding:1px 3px;
font-size:10px;
line-height:230%;
}
#wrapper #content article > table.baskettable tr.items > td > form[name=refresh] > input#count {
border: 1px solid #fff;
padding:0;
height:auto;
margin-right: 3px;
width: 30px;
text-align: center;
line-height: 110%;
}
#wrapper #content article > table.baskettable tr.items > td > form[name=refresh] > input#refreshbutton {
border: 0px;
width: 16px;
height: 16px;
padding: 0px;
margin: 0px;
vertical-align: -3px;
}
#wrapper #content article > table.baskettable tr.items > td > a.deletebutton > img.icon {
height:16px;
width:16px;
}
#wrapper #content article > table.baskettable tr.total > td {
font-weight: bold;
}
/* End Layout Content Article Basket */
/* Start Layout Content Article Basket Login */
#wrapper #content article > div.loginbox {
width: 100%;
}
#wrapper #content article > div.loginbox > div.title {
width: 250px;
float: left;
font-weight: bold;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
#wrapper #content article > div.loginbox > div.title.left {
width: 291px;
}
#wrapper #content article > div.loginbox form {
float: left;
width: 270px;
margin-right: 20px;
border-right: 1px solid #ccc;
}
#wrapper #content article > div.loginbox form label {
width: 70px;
float: left;
}
#wrapper #content article > div.loginbox form input[type=submit]{
float: left;
width:auto;
}
/* End Layout Content Article Basket Login */
/* Start Layout Content Article Basket Checkout Steps */
#wrapper #content article > #paymentmethodform label,
#wrapper #content article > #deliverymethodform label {
float:left;
width:calc((100% - 30px)/4);
text-align:center;
padding-top:20px;
height:120px;
border:1px solid #ccc;
margin:0 0 10px 10px;
cursor:pointer;
background:rgba(100,100,100,0.8);
}
#wrapper #content article > #paymentmethodform label:first-child,
#wrapper #content article > #deliverymethodform label:first-child {
margin-left:0px;
}
#wrapper #content article > #paymentmethodform label:hover,
#wrapper #content article > #deliverymethodform label:hover,
#wrapper #content article > #paymentmethodform label.active,
#wrapper #content article > #deliverymethodform label.active {
background:rgba(50,50,50,0.8);
}
#wrapper #content article > #paymentmethodform label img,
#wrapper #content article > #deliverymethodform label img {
width:auto;
max-height:45px;
padding-top:5px;
}
/* End Layout Content Article Basket Checkout Steps */
/* Start Layout Content Article Basket Summary */
#wrapper #content article > div#summary_address > div.leftCol,
#wrapper #content article > div#summary_address > div.rightCol {
float: left;
width: 355px;
}
#wrapper #content article > div#summary_address > div.leftCol > span,
#wrapper #content article > div#summary_address > div.rightCol > span {
display: inline-block;
width: 110px;
}
/* End Layout Content Article Basket Summary */
/* Start Layout Content Article Basket Checkout */
#wrapper #content article > div.contentbox {
width: 500px;
}
#wrapper #content article > div.contentbox > img.paypal {
width: 178px;
height: 72px;
border: 0;
}
#wrapper #content article > div.contentbox > img.postfinance {
height: 55px;
border: 0;
}
#wrapper #content article > div.contentbox > img.saferpay {
width: 178px;
height: 60px;
border: 0;
}
#wrapper #content article > div.contentbox > span.addresslabel {
display: inline-block;
width: 60px;
}
#wrapper #content article > div.contentbox > span.important {
color: #ff0000;
font-weight: bold;
}
#wrapper #content article > div.contentbox > form > input.paymentButton,
#wrapper #content article > div.contentbox > form > a.paymentButton {
font-weight: bold;
font-size: 15px;
width:auto;
}
/* End Layout Content Article Basket Checkout */
/* Start Layout Content Article Errorbox */
#wrapper #content article > div.errorbox {
width: 324px;
border: 1px solid #f00;
padding: 10px;
margin-bottom: 12px;
background-color: #FFE6E6;
}
/* End Layout Content Article Errorbox */
/* Start Layout Content Entrytype Bildtext */
#wrapper #content article > div.bildtextbox {
width: 100%;
}
#wrapper #content article > div.bildtextbox > a,
#wrapper #content article > div.bildtextbox > img,
#wrapper #content article > div.bildtextbox > div.content {
float: left;
}
#wrapper #content article > div.bildtextbox > div.content {
width:490px;
}
#wrapper #content article > div.bildtextbox > a > img,
#wrapper #content article > div.bildtextbox > img {
margin-right: 20px;
}
/* End Layout Content Entrytype Bildtext */
/* End Layout Content Article */
/* Start Entrytypes */
#wrapper #content h2 {
font-size:20px;
line-height:24px;
letter-spacing:1px;
}
/* Start News */
.news {
margin-bottom:40px;
}
.news .news-date {
width:18%;
padding-right:20px;
float:left;
}
.news .news-date .month,
.news .news-date .day,
.news .news-date .year {
text-align:center;
font-weight:bold;
}
.news .news-date .month {
font-size:16px;
line-height:36px;
letter-spacing:1px;
background:#666;
}
.news .news-date .day {
font-size:80px;
padding-top:2%;
line-height:1.1;
background:#8099CC;
}
.news .news-date .year {
font-size:24px;
padding-bottom:8%;
line-height:1;
background:#8099CC;
letter-spacing:2px;
}
.news .news-content {
width:82%;
float:left;
}
.news .news-content .news-title {
padding:8px 0 4px 0;
font-weight:bold;
border-bottom:1px solid #FFF;
margin-bottom:5px;
}
/* End News */
/* Start Shows / Konzerte */
h2.show-caption {
padding:5px 0;
}
.show {
border-top:1px solid #FFF;
padding:2px 0 8px 0;
cursor:pointer;
}
.show > div {
font-size:14px;
float:left;
}
.show .show-date { width:90px; }
.show .show-location { width:calc((100% - 100px) * 0.3); color:#8099CC; }
.show .show-title { width:calc((100% - 100px) * 0.7); margin-left:10px; }
.show .show-details {
position:absolute;
width:calc(25% - 20px);
right:0;
/*padding-left:20px;*/
border:1px solid #FFF;
margin-top:-3px;
opacity:0;
-webkit-transition:opacity 0.4s;
transition:opacity 0.4s;
}
.show:hover .show-details {
opacity:1;
}
.show .show-details .show-info {
padding:10px;
word-wrap:break-word;
overflow-wrap:break-word;
}
/*.show .show-info { width:calc((100% - 125px) * 0.15); }*/
/* End Shows / Konzerte */
/* Begin Gallery */
.bildergalerie .bild {
display:block;
position:relative;
width:calc((100% - 60px) / 4);
height:0;
padding-bottom:calc((100% - 60px) / 4);
overflow:hidden;
margin-right:20px;
margin-bottom:20px;
border:1px solid #666;
float:left;
}
.bildergalerie .bild:nth-child(4n) {
margin-right:0px;
}
.bildergalerie .bild .bild-text {
position:absolute;
width:100%;
padding:10px 5px;
bottom:0;
background:rgba(0,0,0,0.8);
text-align:center;
color:#FFF;
text-transform:uppercase;
-ms-transform: translate(0,100%);
-webkit-transform: translate(0,100%);
transform: translate(0,100%);
-webkit-transition:all 0.2s;
transition:all 0.2s;
}
.bildergalerie .bild:hover .bild-text {
-ms-transform: translate(0,0);
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
/* End Gallery */
/* start video */
.video {
position:relative;
width:100%;
height:0;
padding-bottom:56.25%;
}
.video iframe {
position:absolute;
width:100%;
height:100%;
}
/* end video */
aside h2 { margin-bottom:20px; }
/* begin member */
aside .member {
display:block;
position:relative;
width:100%;
height:0;
padding-bottom:calc(100% * 3 / 4);
overflow:hidden;
margin-bottom:20px;
background-size:cover;
float:left;
}
aside .member > span {
position:absolute;
width:100%;
bottom:0;
padding:5px 10px;
background-color:rgba(0,0,0,0.4) !important;
color:#FFF;
font-size:20px;
text-align:center;
line-height:1.2;
text-shadow:0px 0px 20px #000, 0px 0px 15px #000, 0px 0px 10px #000;
-ms-transform: translate(0,100%);
-webkit-transform: translate(0,100%);
transform: translate(0,100%);
-webkit-transition:all 0.2s;
transition:all 0.2s;
}
aside .member:hover > span {
-ms-transform: translate(0,0);
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
/* end member */
/* freshguest */
.freshguest_pagenav {
padding:10px 0px;
}
.freshguest_pagenav a {
display:inline-block;
text-align:center;
padding:0 5px;
margin-right:3px;
}
.freshguest_pagenav a.active {
background:rgba(100,100,100,0.8);
}
.freshguest .freshguest_entry .freshguest_entry_header {
background:rgba(100,100,100,0.8);
}
.freshguest .freshguest_entry .freshguest_entry_content {
margin-bottom:20px;
}
.freshguest .freshguest_entry .freshguest_entry_header,
.freshguest .freshguest_entry .freshguest_entry_content {
padding:10px;
}
/* end freshguest */
/* End Entrytypes */
/* End Layout Content */
/* End Layout */
@media screen and (max-width: 1920px) and (max-height: 1200px) {
body#frontend {
background-size:1920px 1200px;
background-position:center center;
}
}
@media screen and (max-width: 1279px) {
#wrapper { max-width:1000px; }
.news .news-date { width:22%; }
.news .news-content { width:78%; }
#wrapper header #navbar #toplvlnav a,
#wrapper header #navbar #langnav a {
padding-top:6px;
padding-bottom:10px;
font-size:18px;
}
#wrapper header #navbar #toplvlnav a {
padding-right:10px;
}
#wrapper aside.column #infonav a,
#wrapper aside.column #currencynav a {
font-size:16px;
line-height:16px;
}
#wrapper aside.column #tzr_iframe {
transform:scale(0.6875);
}
#wrapper header #navbar #langnav a {
font-size:16px;
}
}
@media screen and (max-width:1023px) {
#wrapper #content article {
width:66.6666666667%;
}
#wrapper #content aside.column {
width:33.333333333%;
}
#wrapper aside.column #tzr_iframe {
transform:scale(0.9375);
}
}