/* bitter-regular - latin */ @font-face { font-family: 'Bitter'; font-style: normal; font-weight: 400; src: url('/fonts/bitter-v28-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/bitter-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/bitter-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/bitter-v28-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/fonts/bitter-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/bitter-v28-latin-regular.svg#Bitter') format('svg'); /* Legacy iOS */ } /* bitter-italic - latin */ @font-face { font-family: 'Bitter'; font-style: italic; font-weight: 400; src: url('/fonts/bitter-v28-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/bitter-v28-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/bitter-v28-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/bitter-v28-latin-italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/bitter-v28-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/bitter-v28-latin-italic.svg#Bitter') format('svg'); /* Legacy iOS */ } /* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('/fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-700 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('/fonts/open-sans-v34-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */ url('/fonts/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url('/fonts/open-sans-v34-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/open-sans-v34-latin-italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/open-sans-v34-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/open-sans-v34-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-700italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: url('/fonts/open-sans-v34-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/open-sans-v34-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/open-sans-v34-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/open-sans-v34-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/open-sans-v34-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/open-sans-v34-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* Grundeinstellungen ____________________________________________________ */ @media all { html { overflow-x: hidden;} body { position: relative; color: #211F1F; background: #FFFFFF; font-family: 'Open Sans', sans-serif; font-size: 0.875em; line-height: 1.466em; text-align: center; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } /*body.mobilemenuopen div.wpbodybox { overflow: hidden; }*/ address { font-style: normal; } table { border: 0px; border-collapse: collapse; } table td, form { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } a { color: #7F7F7F; cursor: pointer; text-decoration: none; } /*a:hover { color: #211F1F; }*/ img { border: 0px; } p { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } h1, .h1style, h1 a { font-family: 'Bitter', serif; color: #211F1F; font-size: 3.214em; line-height: 1.111em; font-weight: normal; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: left; } h2, .h2style, h2 a { color: #211F1F; font-size: 1.785em; line-height: 1.2em; font-weight: normal; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: left; } h3, .h3style, h3 a { font-family: 'Bitter', serif; color: #00BDF2; font-size: 1.5em; line-height: 1.2em; font-weight: normal; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: left; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-size: 0.9em; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-decoration: none; } ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type: none; } ul li { background: url(../images/pfeil.png) no-repeat 0px 0.285em; margin: 0px 0px 0.142em 0px; padding: 0px 0px 0px 1.142em; } ul li ul { float: none; } a.button { background-color: #9B9B9B; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: white; cursor: pointer; padding: 0.5em 1em 0.5em 1em; display: inline-block; font-weight: bold; font-family: 'Open Sans', sans-serif; text-transform: uppercase; -webkit-box-shadow: 1px 1px 0px 1px rgb(220, 220, 220); box-shadow: 1px 1px 0px 1px rgb(220, 220, 220);} div.button { background-color: #9B9B9B; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: white; cursor: pointer; padding: 0.5em 1em 0.5em 1em; display: inline-block; font-weight: bold; font-family: 'Open Sans', sans-serif; text-transform: uppercase; -webkit-box-shadow: 1px 1px 0px 1px rgb(220, 220, 220); box-shadow: 1px 1px 0px 1px rgb(220, 220, 220);} div.buttongrey { background-color: #9B9B9B; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: white; cursor: pointer; padding: 0.5em 1em 0.5em 1em; display: inline-block; font-weight: bold; font-family: 'Open Sans', sans-serif; text-transform: uppercase; -webkit-box-shadow: 1px 1px 0px 1px rgb(220, 220, 220); box-shadow: 1px 1px 0px 1px rgb(220, 220, 220);} div.buttongreen { background-color: #359400; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: white; cursor: pointer; padding: 0.5em 1em 0.5em 1em; display: inline-block; font-weight: bold; font-family: 'Open Sans', sans-serif; text-transform: uppercase; -webkit-box-shadow: 1px 1px 0px 1px rgb(220, 220, 220); box-shadow: 1px 1px 0px 1px rgb(220, 220, 220);} a.buttongreen { background-color: #359400; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: white; cursor: pointer; padding: 0.5em 1em 0.5em 1em; display: inline-block; font-weight: bold; font-family: 'Open Sans', sans-serif; text-transform: uppercase; -webkit-box-shadow: 1px 1px 0px 1px rgb(220, 220, 220); box-shadow: 1px 1px 0px 1px rgb(220, 220, 220);} /*a.button:hover { background-color: #C5C52C; }*/ a.button.btngrau { color: #FFFFFF; background-color: #808080; } /*a.button.btngrau:hover { background-color: #ACACAC; }*/ .fontsize35 { font-size: 2.15em; line-height: 1.142em; } .fontBitter { font-family: 'Bitter', serif; } .fontOpenSans { font-family: 'Open Sans', sans-serif; } .contentcenter { max-width: 980px; width: 94%; margin: 0 auto; text-align: left; } .forusPanelWarenkorb { height: 40px; width: 40px;} .borderRed { height: 34px; width: 34px; border: 3px solid red;} .borderRedCalendar { border: 2px solid red;} .borderGreyCalendar { border: 2px solid #9B9B9B;} .promocodeBox {border: 2px solid grey; padding: 30px; background: white;} .promocodeBox .gwt-Button {width: 5em; padding: 5px; margin-right: 1em;} .promocodeBox .gwt-TextBox {width: 11em; padding: 5px; border: 2px solid gray; margin-top: 1em;} } @media (max-width: 900px) { h1, .h1style, h1 a { font-size: 2.857em; line-height: 1.125em; } h2, .h2style, h2 a { font-size: 1.428em; line-height: 1.25em; } .fontsize35 { font-size: 2.142em; line-height: 1.166em; } } @media (max-width: 760px) { .contentcenter { width: 92.105%; } } @media (max-width: 480px) { h1, .h1style, h1 a { font-size: 2.142em; line-height: 1.166em; } h2, .h2style, h2 a { font-size: 1.285em; line-height: 1.277em; } .fontsize35 { font-size: 1.785em; line-height: 1.2em; } body { overflow-x: hidden; } } /* Header ________________________________________________________________ */ @media all { .gwt-PopupPanelGlass { background-color: #000; opacity: 0.3; filter: alpha(opacity=30);} div.wpheader { position: relative; z-index: 5; color: #808080; background-color: #2B2627; } div.wpheader div.innen { height: 7.857em; text-align: center; position: relative; } div.wpheader div.innen div.openmenu { display: none; } div.wpheader div.innen div.sprache { position: relative; width: 28.571%; height: 1.666em; max-width: 250px; margin: 4em 0px 0px 0px; float: left; display: inline; font-size: 0.857em; text-transform: uppercase; text-align: left; } div.wpheader div.innen div.sprache a.selected { padding-right: 1.416em; float: left; display: inline; background: url(../images/pfeil-smal-down.png) no-repeat right 7px; } /*div.wpheader div.innen div.sprache a.selected:hover { color: #FFFFFF; }*/ div.wpheader div.innen div.sprache div.sprachbox { display: none; width: 100%; position: absolute; left: 0px; top: 2.083em; background-color: #FFFFFF; border: solid 3px #D3D2D2; } div.wpheader div.innen div.sprache.openbox div.sprachbox { display: block; } div.wpheader div.innen div.sprache div.sprachbox a { padding: 8px 1.428em 7px 1.428em; border-top: solid 1px #D3D2D2; display: block; } div.wpheader div.innen div.sprache div.sprachbox a:first-child { border: 0px; } /*div.wpheader div.innen div.sprache div.sprachbox a:hover { color: #00BDF2; background-color: #FFFF00; }*/ div.wpheader div.innen div.logo { width: 18.142em; position: absolute; left: 50%; top: 1.428em; margin-left: -9.071em; } div.wpheader div.innen div.logo img { max-width: 100%; } div.wpheader div.innen div.boxrechts { width: 28.571%; max-width: 250px; margin: 1em 0px 0px 0px; float: right; display: inline; } div.wpheader div.innen div.boxrechts div.linkbox { margin: 0px 0px 0.833em 0px; font-size: 0.857em; text-align: right; text-transform: uppercase; } /*div.wpheader div.innen div.boxrechts div.linkbox a:hover { color: #FFFFFF; }*/ div.wpheader div.innen div.boxrechts div.linkbox a.faq { margin: 0px 0px 0px 0.833em; padding: 0px 0px 0px 0.833em; border-left: solid 1px #464444; } div.wpheader div.innen div.boxrechts div.linkbox div { margin: 0px 0px 0px 0.833em; padding: 0px 0px 0px 0.833em; display: inline-block; } div.wpheader div.innen div.boxrechts div.suchebox { position: relative; height: 2.571em; } div.wpheader div.innen div.boxrechts div.suchebox div.warenkorb { position: relative; width: 2.571em; height: 2.571em; float: left; display: inline; background: url(../images/icon-warenkorb.png) no-repeat center center; background-color: rgba(0, 0, 0, 0.6);cursor: pointer;} div.wpheader div.innen div.boxrechts div.suchebox div.warenkorb div.nr { width: 1.727em; height: 1.818em; position: absolute; right: -0.181em; top: -0.636em; text-align: center; font-weight: bold; font-size: 0.785em; line-height: 1.818em; color: #211F1F; background: url(../images/bg-warenkorb-nr.png) no-repeat 0px 0px; } div.wpheader div.innen div.boxrechts div.suchebox.warenkorbopen div.warenkorb { background-color: #D3D2D2; } div.warenkorbbox { color: #2B2626; padding: 0em 0px 1em 0px; text-align: left; display: none; position: absolute; left: 0px; top: 2.574em; width: 300px; background-color: #EEEEEE; border: solid 3px #D3D2D2; z-index: 1000;} div.warenkorbbox { display: block; } div.warenkorbbox div.info {padding: 0.571em 1.428em 0.571em 1.428em; background-color: #eeeeee;} div#overlayBackground { position: fixed; left: 0px; background-color: black; opacity:0.5;width: 100%; height: 100%;} div.warenkorbbox div.produkt { padding: 0.571em 1.428em 0.5em 1.428em; border-top: solid 1px #D3D2D2; background-color: white;} /*div.warenkorbbox div.produkt:first-child { margin-top: 0px; border: 0px; }*/ div.warenkorbbox div.produkt div.person { font-weight: bold; } div.warenkorbbox div.produkt div.price { color: #7F7F7F; } div.warenkorbbox div.produkt div.ski { } div.warenkorbbox div.produkt div.ski img {max-width:250px;} div.warenkorbbox div.produkt div.delete span { text-decoration: underline; cursor: pointer; } div.warenkorbbox div.btnbox { padding: 1.642em 1.428em 0px 1.428em; border-top: solid 1px #D3D2D2; } div.warenkorbbox div.btnbox a.button, div.warenkorbbox div.btnbox div.button { padding-left: 0px; padding-right: 0px; display: block; text-align: center;} div.warenkorbbox div.btnboxcontinue { padding: 1.642em 1.428em 1.6em 1.428em; } div.warenkorbbox div.btnboxcontinue a.button { padding-left: 0px; padding-right: 0px; display: block; text-align: center; } div.warenkorbbox div.btnbox a.addperson, div.warenkorbbox div.btnbox div.addperson { margin-top: 1.142em; float: left; display: inline; padding: 0.142em 0px 0.142em 3.214em; background: url(../images/addperson.png) no-repeat 0px 0px; cursor: pointer;} div.wpheader div.innen div.boxrechts div.suchebox div.suche { position: relative; margin: 0px 0px 0px 4.285em; height: 2.571em; background-color: #1C1718; } div.wpheader div.innen div.boxrechts div.suchebox.onsearch div.suche { background-color: #FFFFFF; -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4); box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4); } div.wpheader div.innen div.boxrechts div.suchebox div.suche div.input { height: 100%; margin: 0px 2.571em 0px 0px; display: block; position: relative; } div.wpheader div.innen div.boxrechts div.suchebox div.suche div.input label.bglabel { cursor: text; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } div.wpheader div.innen div.boxrechts div.suchebox div.suche div.input div.inputinnen { margin-left: 0.714em; height: 100%; position: relative; } div.wpheader div.innen div.boxrechts div.suchebox div.suche div.input input { font-size: 1em;text-shadow: absolute; left: 0px; top: 0px; line-height: 2.571em; color: #7F7F7F; background: transparent; width: 100%; height: 100%; display: block; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 0px; outline: none;} div.wpheader div.innen div.boxrechts div.suchebox div.suche label.btnsuchen { cursor: pointer; width: 2.142em; height: 2.142em; margin: 0.214em 0.214em 0px 0px; background: url(../images/icon-lupe.png) no-repeat center center #FFFF00; float: right; display: inline; -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4); box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4); } div.wpheader div.innen div.boxrechts div.suchebox div.searchresult { text-align: left; display: none; position: absolute; left: 0px; top: 2.574em; margin-left: -3px; margin-top: 3px; width: 100%; background-color: #FFFFFF; border: solid 3px #D3D2D2; } div.wpheader div.innen div.boxrechts div.suchebox.onsearch div.searchresult { display: block; } div.wpheader div.innen div.boxrechts div.suchebox div.searchresult ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } div.wpheader div.innen div.boxrechts div.suchebox div.searchresult ul li { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background: transparent; } div.wpheader div.innen div.boxrechts div.suchebox div.searchresult ul li a { padding: 1.142em 1.428em 1.142em 1.428em; border-top: solid 1px #D3D2D2; display: block; } /*div.wpheader div.innen div.boxrechts div.suchebox div.searchresult ul li a:hover { color: #00BDF2; background-color: #FFFF00; }*/ div.wpheader div.innen div.boxrechts div.suchebox div.searchresult ul li a img { margin-right: 0.357em; } div.wpheader div.innen div.boxrechts div.suchebox div.searchresult ul li a span { color: #00BDF2; } div.wpheader div.innen div.boxrechts div.suchebox div.searchresult ul li:first-child a.group { border: 0px; } div.wpheader.headsmal { /*border-bottom: solid 10px #00BEF2;*/} div.wpheader.headsmal div.innen { height: auto; } div.wpheader.headsmal div.innen div.infotext { margin-top: 0.68em; margin-bottom: 0.56em; color: #7F7F7F; font-size: 1.785em; line-height: 1.2em; } div.wpheader.headsmal div.innen a.hompabelink { margin-top: 0.44em; margin-bottom: 0.4em; padding: 0.16em 0px 0.08em 2em; float: left; display: inline; font-size: 1.785em; line-height: 1.2em; background: url(/images/icon-home.png) no-repeat 0px 0px; color: #7F7F7F;} /*div.wpheader.headsmal div.innen a.hompabelink:HOVER { color: #FFFFFF; }*/ div.wpheader.headsmal div.innen div.sprache { margin-top: 1.5em; float: right; width: auto; max-width: none; } div.wpheader.headsmal div.innen div.boxrechts { margin-top: 0.785em; margin-bottom: 0.857em; width: auto; max-width: none; } div.wpheader.headsmal div.innen div.boxrechts div.linkbox { margin-top: 0.583em; float: left; display: inline; } div.wpheader.headsmal div.innen div.boxrechts div.suchebox { margin-left: 1.714em; float: left; display: inline; } } @media (max-width: 1024px) { div.wpheader.headsmal div.innen div.infotext { margin-top: 1em; margin-bottom: 0.85em; font-size: 1.428em; line-height: 1.25em; } } @media (max-width: 760px) { div.wpheader { border-bottom: solid 10px #00BDF2; position: relative; z-index: 3; } body.mobilemenuopen div.wpheader { width: 100%; margin-left: 17.142em; } div.wpheader div.innen { height: 5.357em; } div.wpheader div.innen div.sprache { display: none; } div.wpheader div.innen div.boxrechts div.suchebox div.suche { display: none; } div.wpheader div.innen div.boxrechts div.suchebox.onsearch div.searchresult { display: none; } div.wpheader div.innen div.boxrechts div.suchebox div.warenkorbbox { left: auto; right: 0px; width: 240px; } body.mobilemenuopen div.wpheader div.innen div.boxrechts div.suchebox div.warenkorbbox { display: none; } div.wpheader div.innen div.boxrechts div.linkbox { display: none; } div.wpheader div.innen div.logo { width: 11.428em; margin-left: -5.714em; } div.wpheader div.innen div.openmenu { cursor: pointer; width: 2.571em; height: 2.571em; margin-top: 1.428em; background: url(../images/icon-menu.png) no-repeat center center #1C1718; float: left; display: inline; } div.wpheader div.innen div.boxrechts { width: auto; margin-top: 1.428em; } div.wpheader div.innen div.boxrechts div.suchebox div.warenkorb { float: right; } div.wpheader.headsmal div.innen div.infotext { margin-top: 1em; font-size: 1.428em; line-height: 1.25em; } div.wpheader.headsmal div.innen div.boxrechts div.linkbox a.faq { margin-left: 0px; border: 0px; } } @media (max-width: 580px) { div.wpheader.headsmal div.innen a.hompabelink { margin-top: 0.75em; margin-bottom: 0.812em; padding: 0.5em 0px 0.375em 2.812em; font-size: 1.142em; line-height: 1.312em; } } /* Menu Oben _____________________________________________________________ */ @media all { div.mainmenu { background-color: #00BDF2; } div.mainmenu div.suchebox { display: none; } div.mainmenu nav ul { width: 100%; float: left; display: inline; margin: 1.142em 0px 1.071em 0px; padding: 0px 0px 0px 0px; } div.mainmenu nav ul li { float: left; display: inline; margin: 0px 0px 0px 0px; text-align: center; padding: 0px 0px 0px 0px; background: transparent; } div.mainmenu nav ul li:first-child { margin-left: 0px; } div.mainmenu nav ul li a { color: #FFFFFF; display: inline-block; } div.mainmenu nav ul li a span { display: block; } div.mainmenu nav ul li a span.text { font-size: 1.2em; line-height: 1.222em; font-family: 'Bitter', serif; } div.mainmenu nav ul li a span.subtext { padding: 0.214em 0px 0px 0px; color: #B2EBFA; } /*div.mainmenu nav ul li a:hover span.text { color: #B2EBFA; }*/ div.mainmenu nav ul li.menu1 {margin-right: 2%; max-width: 20.2%; min-width: 14%;} div.mainmenu nav ul li.menu2 { width: 19.361%; } div.mainmenu nav ul li.menu3 { width: 20.531%; } div.mainmenu nav ul li.menu4 { width: 18.936%; } div.mainmenu nav ul li.menu5 { width: 23.085%; } div.mainmenu nav ul li.menu6, div.mainmenu nav ul li.menu7 { display: none; } } @media (max-width: 1000px) { div.mainmenu nav ul li a span.subtext { display: none; } div.mainmenu nav ul li a span.text {font-size: 1em;} div.mainmenu nav ul li.menu2 { width: 18.285%; } div.mainmenu nav ul li.menu3 { width: 21.714%; } div.mainmenu nav ul li.menu4 { width: 18.285%; } div.mainmenu nav ul li.menu5 { width: 16%; text-align: right; } } @media (max-width: 760px) { div.mainmenu { display: none; } body.mobilemenuopen div.mainmenu { display: block; background-color: #FFFFFF; border-right: solid 3px #1D1819; position: absolute; left: 0px; top: 0px; z-index: 10; width: 240px; height: 100%; } div.mainmenu div.suchebox { display: block; height: 5.5em; background-color: #2B2728; } div.mainmenu div.suchebox.onsearch { height: auto; } div.mainmenu div.suchebox div.suche { margin: 1.428em 0.714em 0px 0.714em; height: 2.571em; background-color: #1C1718; } div.mainmenu div.suchebox.onsearch div.suche { background-color: #FFFFFF; -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4); box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4); } div.mainmenu div.suchebox div.suche div.input { height: 100%; margin: 0px 2.571em 0px 0px; display: block; position: relative; } div.mainmenu div.suchebox div.suche div.input label.bglabel { cursor: text; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } div.mainmenu div.suchebox div.suche div.input div.inputinnen { margin-left: 0.714em; height: 100%; position: relative; } div.mainmenu div.suchebox div.suche div.input input { position: absolute; left: 0px; top: 0px; line-height: 2.571em; color: #7F7F7F; background: transparent; width: 100%; height: 100%; display: block; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 0px; } div.mainmenu div.suchebox div.suche label.btnsuchen { cursor: pointer; width: 2.142em; height: 2.142em; margin: 3px 0.214em 0px 0px; background: url(../images/icon-lupe.png) no-repeat center center #FFFF00; float: right; display: inline; -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4); box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4); } div.mainmenu div.suchebox div.searchresult { margin: 0.357em 0.714em 0.714em 0.714em; text-align: left; display: none; background-color: #FFFFFF; border: solid 3px #D3D2D2; } div.mainmenu div.suchebox.onsearch div.searchresult { display: block; } div.mainmenu div.suchebox div.searchresult ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } div.mainmenu div.suchebox div.searchresult ul li { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background: transparent; } div.mainmenu div.suchebox div.searchresult ul li a { padding: 1.142em 1.428em 1.142em 1.428em; border-top: solid 1px #D3D2D2; display: block; } /*div.mainmenu div.suchebox div.searchresult ul li a:hover { color: #00BDF2; background-color: #FFFF00; }*/ div.mainmenu div.suchebox div.searchresult ul li a img { margin-right: 0.357em; } div.mainmenu div.suchebox div.searchresult ul li a span { color: #00BDF2; } div.mainmenu div.suchebox div.searchresult ul li:first-child a.group { border: 0px; } div.mainmenu nav.contentcenter { width: auto; margin: 0px 0.714em 0px 0.714em; } div.mainmenu nav ul li { float: none; display: block; border-bottom: solid 1px #918F8F; } div.mainmenu nav ul li a { display: block; color: #2B2627; margin: 0.357em 0px 0.357em 0px; } div.mainmenu nav ul li a span.subtext { color: #918E8E; display: block; } /*div.mainmenu nav ul li a:hover span.text { color: #918E8E; }*/ div.mainmenu nav ul li.menu1, div.mainmenu nav ul li.menu2, div.mainmenu nav ul li.menu3, div.mainmenu nav ul li.menu4, div.mainmenu nav ul li.menu5 { width: auto; text-align: left; max-width:100%;} div.mainmenu nav ul li.menu6, div.mainmenu nav ul li.menu7 { display: block; text-align: left; } div.mainmenuoverlay { display: none; } body.mobilemenuopen div.mainmenuoverlay { display: block; position: absolute; left: 0px; top: 0px; z-index: 2; width: 100%; height: 100%; background-color: #2B2728; opacity: 0.8; filter: alpha(opacity = 80); } } /* Inhalt ________________________________________________________________ */ @media all { nav.breadcrumb { padding: 1em 0px 1em 0px; } nav.breadcrumb ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } nav.breadcrumb ul li { color: #D2D2D2; margin: 0px 0px 0px 0.714em; padding: 0px 0px 0px 1.071em; background: url(../images/pfeil-smal.png) no-repeat 0px 0.428em; float: left; display: inline; } nav.breadcrumb ul li.text { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background: transparent; } nav.breadcrumb ul li a { color: #D2D2D2; } /*nav.breadcrumb ul li a:hover { color: #211F1F; }*/ } @media (max-width: 760px) { body.mobilemenuopen article.inhalt { width: 100%; margin-left: 17.142em; } body.mobilemenuopen nav.breadcrumb { width: 100%; margin-left: 17.142em; } } @media (max-width: 560px) { nav.breadcrumb { display: none; } } /* Footer ________________________________________________________________ */ @media all { div.markenbox { border-bottom: solid 1px #8C8A8B; border-top: solid 1px #DDDDDD; background: #eeeeee; background: -moz-linear-gradient(top, #eeeeee 0%, #d6d6d6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#d6d6d6)); background: -webkit-linear-gradient(top, #eeeeee 0%,#d6d6d6 100%); background: -o-linear-gradient(top, #eeeeee 0%,#d6d6d6 100%); background: -ms-linear-gradient(top, #eeeeee 0%,#d6d6d6 100%); background: linear-gradient(to bottom, #eeeeee 0%,#d6d6d6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#d6d6d6',GradientType=0 ); }div.de.markenbox div.innen { margin-top: 1.428em; margin-bottom: 1.428em; } div.markenbox div.innen div.text { color: #7F7F7F; font-size: 1.785em; line-height: 1.2em; float: left; display: inline; } div.markenbox div.innen div.scrollbox { float: right; display: inline; } div.markenbox div.innen div.scrollbox a.scrollbtn { width: 1.785em; height: 1.785em; float: left; display: inline; margin: 0.142em 0px 0px 0px; } div.markenbox div.innen div.scrollbox a.scrollbtn.prev { background: url(../images/btn-prev.png) no-repeat 0px 0px; } div.markenbox div.innen div.scrollbox a.scrollbtn.next { background: url(../images/btn-next.png) no-repeat 0px 0px; } div.markenbox div.innen div.scrollbox div.gallery { margin: 0px 0.714em 0px 0.714em; height: 2.142em; float: left; display: inline; } div.markenbox div.innen div.scrollbox div.gallery div.logo { vertical-align: middle; width: 10em; float: left; display: inline; text-align: center; } div.markenbox div.innen div.scrollbox div.gallery div.logo img { max-width: 100%; } div.markenbox div.innen div.scrollbox div.gallery div.logo.head { margin-top: 0.428em; } div.markenbox div.innen div.scrollbox div.gallery div.logo.atomic { margin-top: 0.285em; } div.markenbox div.innen div.scrollbox div.gallery div.logo.fischer { margin-top: 0.428em; } div.markenbox div.innen div.scrollbox div.gallery div.logo.rossignol { margin-top: 0.428em; } } @media (max-width: 1000px) { div.markenbox div.innen div.scrollbox div.gallery div.logo.rossignol { display: none; } } @media (max-width: 790px) { div.markenbox div.innen div.scrollbox div.gallery div.logo.fischer { display: none; } } @media (max-width: 760px) { body.mobilemenuopen div.markenbox { width: 100%; margin-left: 17.142em; } } @media (max-width: 680px) { div.markenbox div.innen div.scrollbox div.gallery div.logo.atomic { display: none; } } @media (max-width: 520px) { div.markenbox div.innen div.scrollbox { margin: 0.571em 0px 0px 0px; } div.markenbox div.innen div.text { max-width: 8.571em; width: 40%; font-size: 1.285em; line-height: 1.222em; } div.markenbox div.innen div.scrollbox div.gallery div.logo { width: 7.142em; } div.markenbox div.innen div.scrollbox div.gallery div.logo.atomic { display: none; } } @media all { div.wpfooter { color: #7F7F7F; background-color: #231F20; } div.wpfooter div.innen { margin-top: 3.928em; margin-bottom: 1em; } div.wpfooter div.box { width: 30.425%; float: left; display: inline; } div.wpfooter div.box div.titel { color: #FFFFFF; font-size: 1.785em; line-height: 1.2em; } div.wpfooter div.box div.text { margin: 1em 0px 0px 0px; } div.wpfooter div.box.links { margin: 0px 4.255% 0px 0px; } div.wpfooter div.box.links ul { margin: 1em 0px 0px 0px; } div.wpfooter div.box.links ul li { padding: 0px 0px 0px 0px; background: transparent; } div.wpfooter div.box.links ul li a { display: inline-block; color: #7F7F7F; background: url(../images/pfeil.png) no-repeat 0px 0.285em; padding: 0px 0px 0px 1.142em; } /*div.wpfooter div.box.links ul li a:hover { color: #FFFFFF; }*/ div.wpfooter div.box.newsletter form { margin: 1.071em 0px 0px 0px; } div.wpfooter div.box.newsletter div.input { position: relative; height: 2.142em; border: solid 1px #D4D4D4; } div.wpfooter div.box.newsletter div.input label.bglabel { cursor: text; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } div.wpfooter div.box.newsletter div.input div.bgbox { width: 100%; height: 100%; background-color: #FFFFFF; -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4); box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4); } div.wpfooter div.box.newsletter div.input div.inputinnen { margin-left: 0.714em; position: relative; height: 100%; } div.wpfooter div.box.newsletter div.input input { position: absolute; left: 0px; top: 0px; line-height: 2.142em; color: #B4B4B4; width: 100%; height: 100%; border: 0px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background: transparent; } div.wpfooter div.box.newsletter div.checkbox { margin: 1em 0px 0px 0px; float: left; display: inline; } div.wpfooter div.box.newsletter a.button { margin: 0.714em 0px 0px 0px; float: right; display: inline; } div.wpfooter div.box.zahlung { float: right; } div.wpfooter div.box.zahlung div.image { margin: 1.071em 0px 0px 0px; padding: 1.071em 0.714em 0.714em 0.714em; background-color: #FFFFFF; border: solid 1px #D4D4D4; text-align: center; -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4); box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4); } div.wpfooter div.box.zahlung div.image img { float: none; } div.wpfooter div.sprachebox { display: none; } div.wpfooter div.copyrightbox { margin: 2.142em 0px 0px 0px; padding: 0.583em 0px 0px 0px; border-top: solid 1px #4D4D4D; font-size: 0.857em; line-height: 1.166em; } div.wpfooter div.copyrightbox a { color: #7F7F7F; } /*div.wpfooter div.copyrightbox a:hover { color: #FFFFFF; }*/ div.wpfooter div.copyrightbox span.copyright { float: left; display: inline; margin: 0.285em 0px 0px 0px; } div.wpfooter div.copyrightbox span.mwstnr { float: left; display: inline; border-left: solid 1px #7F7F7F; margin: 0.285em 0px 0px 0.428em; padding: 0px 0px 0px 0.428em; } div.wpfooter div.copyrightbox nav a { float: left; display: inline; border-left: solid 1px #7F7F7F; margin: 0.285em 0px 0px 0.428em; padding: 0px 0px 0px 0.428em; } div.wpfooter div.copyrightbox a.publisher { float: right; display: inline; } div.wpfooter div.copyrightbox a.publisher img { vertical-align: text-bottom; margin: 0px 0px -0.357em 0px; } } @media (max-width: 760px) { body.mobilemenuopen div.wpfooter { width: 100%; margin-left: 17.142em; } div.wpfooter div.box { border-bottom: solid 1px #4D4D4D; width: auto; float: none; display: block; margin-top: 2.142em; padding: 0px 0px 2.142em 0px; } div.wpfooter div.box.links { margin: 0px 0px 0px 0px; } div.wpfooter div.box.links ul { width: 100%; float: left; display: inline; } div.wpfooter div.box.links ul li { width: 50%; float: left; display: inline; } div.wpfooter div.box.zahlung { float: none; } div.wpfooter div.sprachebox { font-size: 0.857em; margin-top: 2.142em; display: block; } div.wpfooter div.sprachebox div.sprache { height: 1.428em; width: 23.333em; background-color: #1C1718; padding: 0.666em 0px 0.666em 0px; } div.wpfooter div.sprachebox div.sprache label { float: left; display: inline; margin: 0px 0px 0px 1.25em; text-transform: uppercase; } div.wpfooter div.sprachebox div.sprache div.select { width: 16.25em; float: left; display: inline; } div.wpfooter div.sprachebox div.sprache div.select select { font-size: 1em; text-transform: uppercase; color: #7F7F7F; width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 0px; background-color: #1C1718; } div.wpfooter div.copyrightbox nav { clear: both; } div.wpfooter div.copyrightbox nav a { margin-top: 0.571em; border-right: solid 1px #7F7F7F; padding-right: 0.428em; } div.wpfooter div.copyrightbox nav a:first-child { border: 0px; margin-left: 0px; padding-left: 0px; padding-right: 0px; } div.wpfooter div.copyrightbox a.publisher { float: left; margin-top: 0.285em; margin-left: 0.428em; } } /* Sonstiges _____________________________________________________________ */ @media all { div.image a { display: block; } div.image img { max-width: 100%; float: left; display: inline; } br.clear { clear: both; line-height: 0px; font-size: 0px; height: 0px; } div.clear { clear: both; line-height: 0px; font-size: 0px; height: 0px; overflow: hidden; text-indent: -100px; } } /* Shop V01 ____________________________________________________ */ @media all { /*div.shopintro { padding: 3.529em 0px 6.428em 0px; background-size: 100% auto; }*/ div.shopintro { padding: 3.529em 0px 1.428em 0px; background-size: 100% auto; } div.shopintro div.contentcenter { position: relative; } div.shopintro div.shieldbox { width: 16.857em; height: 19.142em; position: absolute; left: 50%; top: 0px; margin: 0px 0px 0px -8.428em; background: url(../images/shield.png) no-repeat 0px 0px; } div.shopintro div.shieldbox div.image { margin: 4em 2em 0px 2em; text-align: center; } div.shopintro div.shieldbox div.image img { float: none; } div.shopintro div.introbox { margin: 4.285em 0px 0px 0px; padding: 2.142em 2.142em 2.142em 2.142em; background-color: #FFFFFF; border: solid 1px #E5E5E6; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); } div.shopintro div.introbox div.textbox { width: 24.285em; float: left; display: inline; } div.shopintro div.introbox div.textbox div.text { margin: 1.571em 0px 0px 0px; } div.shopintro div.introbox div.addressbox { width: 21.428em; float: right; display: inline; background-color: #EEEEEE; } div.shopintro div.introbox div.addressbox div.innen { margin: 1.071em 1.071em 1.071em 1.428em; } div.shopintro div.introbox div.addressbox .icon { margin: 0px 0px 0.714em 0px; padding: 0px 0px 0px 1.428em; display: block; } div.shopintro div.introbox div.addressbox div.address { background: url(../images/icon-address.png) no-repeat 0.214em 0.285em; } div.shopintro div.introbox div.addressbox div.tel { background: url(../images/icon-tel.png) no-repeat 0px 0.357em; } div.shopintro div.introbox div.addressbox div.mail { color: #2B2626; background: url(../images/icon-mail.png) no-repeat 0px 0.357em; } /*div.shopintro div.introbox div.addressbox .mail:hover { color: #7F7F7F; }*/ div.shopintro div.introbox div.addressbox div.time { margin-bottom: 0px; background: url(../images/icon-time.png) no-repeat 0.142em 0.285em; } div.shopintro div.introbox div.addressbox div.bookNowButton { float:left; color: white; margin: 15px 1em; padding: 0.6em;cursor: pointer;font-size: 1.2em;font-weight: bold; width: 60%;} div.shopintro div.introbox div.addressbox div.googleMapIcon { float:left; margin: 15px 0; cursor: pointer;} div.shopintro div.bild { width: 100%; position:absolute; left: 0px; top: 170px; overflow: hidden; z-index:-20;} div.shopintro div.bild img { width: 100%;} div.shopintro div.bildIntegrated { width: 100%; position:absolute; left: 0px; top: 60px; overflow: hidden; z-index:-20;} div.shopintro div.bildIntegrated img { width: 100%;} } @media (max-width: 1500px) { div.shopintro { background-size: auto auto; } } @media (max-width: 1000px) { div.shopintro div.shieldbox { right: 1.571em; left: auto; margin-left: 0px; } div.shopintro div.introbox div.textbox { margin-right: 17.857em; width: auto; float: none; display: block; } div.shopintro div.introbox div.addressbox { margin-top: 1.428em; margin-right: 17.857em; width: auto; float: none; display: block; } div.shopintro div.bild { top: 160px;} div.shopintro div.bildIntegrated { top: 60px;} } @media (max-width: 760px) { div.shopintro div.bild, div.shopintro div.bildIntegrated { top: 60px;} } @media (max-width: 680px) { div.shopintro div.introbox { margin: 1.428em 0px 0px 0px; } div.shopintro div.shieldbox { margin: 0 auto; position: relative; right: auto; } div.shopintro div.introbox div.textbox { margin-right: 0px; } div.shopintro div.introbox div.addressbox { margin-right: 0px; } div.shopintro div.bild, div.shopintro div.bildIntegrated { top: 60px;} } @media (max-width: 440px) { div.shopintro div.introbox { padding: 1.071em 1.071em 1.071em 1.071em; } div.shopintro div.shieldbox { margin: 0 auto; position: relative; right: auto; } div.shopintro div.introbox div.textbox { margin-right: 0px; } div.shopintro div.introbox div.addressbox { margin-right: 0px; } div.shopintro div.bild, div.shopintro div.bildIntegrated {top: 60px;} } @media all { div.shopnav { background-color: #EEEEEE; z-index: 500;} div.shopnav ul { margin-top: -1.2em; width: 100%; float: left; display: inline; background-color: #2B2627; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); } div.shopnav ul li { color: #7F7F7F; padding: 0.6em 0px 0.6em 0px; text-align: center; float: left; display: inline; background: transparent; margin: 0px 0px 0px 0px; } div.shopnav ul li.activ { /*background-color: #00BDF2;*/ color: #FFFFFF; } div.shopnav ul li.nr1 { width: 32.978%; cursor: pointer;} div.shopnav ul li.nr2 { width: 43.617%; cursor: pointer;} div.shopnav ul li.nr3 { width: 23.404%; } } @media (max-width: 780px) { div.shopnav ul li { border-bottom: solid 1px #3C3536; float: none; display: block; } div.shopnav ul li.nr1, div.shopnav ul li.nr2, div.shopnav ul li.nr3 { width: auto; } } @media all { div.shopdauer { padding: 1.571em 0px 1.5em 0px; background-color: #EEEEEE; } div.shopdauer div.input { height: 2.714em; display: block; border: solid 1px #D4D4D4; background-color: #FFFFFF; position: relative; } div.shopdauer div.input label.bglabel { cursor: text; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } div.shopdauer div.input div.inputinnen { margin-left: 0.714em; height: 100%; position: relative; } div.shopdauer div.input input { font-size: 16px;position: absolute; left: 0px; top: 0px; line-height: 2.714em; color: black; background: transparent; width: 100%; height: 100%; display: block; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 0px; } div.shopdauer div.dauerbox { padding: 0px 0px 1.5em 0px; } div.shopdauer div.dauerbox div.titel { margin: 0px 0px 0.48em 0px; } div.shopdauer div.dauerbox div.kalenderbox { position: relative; } div.shopdauer div.dauerbox div.kalenderbox a.icon { width: 1.928em; height: 2em; position: absolute; right: 0.357em; top: 0.428em; background: url(../images/icon-kalender.png) no-repeat 0px 0px; } div.shopdauer div.dauerbox div.erstertag { width: 15.142em; float: left; display: inline; margin: 0px 1.428em 0px 0px; } div.shopdauer div.dauerbox div.letztertag { width: 15.142em; float: left; display: inline; margin: 0px 1.428em 0px 0px; } div.shopdauer div.dauerbox div.erstertag label, div.shopdauer div.dauerbox div.letztertag label { display: block; margin: 0px 0px 0.428em 0px; } div.shopdauer div.dauerbox div.text { margin: 2.5em 0px 0px 33.142em; max-width: 20em; } div.produktcatbox input[type=checkbox]{ /* Double-sized Checkboxes */ -ms-transform: scale(1.5); /* IE */ -moz-transform: scale(1.5); /* FF */ -webkit-transform: scale(1.5); /* Safari and Chrome */ -o-transform: scale(1.5); /* Opera */ padding: 10px; margin-right: 10px;} } @media (max-width: 780px) { div.shopdauer div.dauerbox div.text { margin: 2.5em 0px 0px 27.1em; max-width: 20em; } } @media (max-width: 680px) { div.shopdauer div.dauerbox div.erstertag, div.shopdauer div.dauerbox div.letztertag { margin-bottom: 0.714em; } div.shopdauer div.dauerbox div.text { margin-top: 0px; margin-left: 0px; max-width: none; clear: both; } } @media (max-width: 440px) { div.shopdauer div.dauerbox div.erstertag, div.shopdauer div.dauerbox div.letztertag { width: auto; float: none; display: block; margin-left: 0px; } } @media (max-width: 370px) { div.shopdauer div.produktcatbox div.checkbox { width: auto; float: none; display: block; } } @media all { div.productsCategoryWidget {background-color: white;min-height: 650px;} div.shopprodukte { padding: 1.382% 0px 2.285em 0px;} div.shopprodukte div.produktcatbox { margin: 1.714em 0px 0px 0px; } div.shopprodukte div.produktcatbox span.gwt-CheckBox { margin-right: 3em; float: left; display: inline; } div.shopprodukte div.hk { margin: 1.382% 0px 0px 0px; padding: 0px 0px 0.5em 0px; border-bottom: solid 1px #CCCCCC; } div.shopprodukte div.hk.first { padding-top: 2.142em; border-top: solid 1px #CCCCCC; } div.shopprodukte div.hk div.hkinfobox { padding: 1em 1em 0em 1em; } div.shopprodukte div.hk div.hkinfobox div.titel { margin: 0px 0px 0.4em 0px; } div.shopprodukte div.hk div.hkinfobox div.text { margin: 0px 0px 0em 0px; } div.shopprodukte div.hk div.hkinfobox div.skibox div.ski { float:left; margin: 0px 0px 0px 0px; position: relative; left: 0px; overflow: hidden; width: 410px;min-height:50px;} div.shopprodukte div.hk div.hkinfobox div.skibox div.ski img { display: inline; max-width: 500px;} div.shopprodukte div.hk div.hkinfobox div.skibox div.pricebox { float: right; display: inline; width: 300px; margin-top: 15px;} div.shopprodukte div.hk div.hkinfobox div.skibox div.pricebox div.priceinfo { color: #7F7F7F; float: left; display: inline; margin: 0px 1.785em 0px 0px; } div.shopprodukte div.hk div.hkinfobox div.skibox div.pricebox div.priceinfo s { display: block; } div.shopprodukte div.hk div.hkinfobox div.skibox div.pricebox div.price { font-size: 1.785em; line-height: 1.2em; float: right; display: inline; margin: 0px 1em 0px 0px; } div.shopprodukte div.hk div.hkinfobox div.skibox a.button { float: right; display: inline;} div.shopprodukte div.hk a.button .buttonopen span { display: inline-block; padding: 0px 1.428em 0px 0px; background: url(../images/arrow-down.png) no-repeat right 0.214em; } div.shopprodukte div.hk a.button .buttonclose span { display: inline-block; padding: 0px 1.428em 0px 0px; background: url(../images/arrow-up.png) no-repeat right 0.214em; } /*div.shopprodukte div.hk.ukopen div.hkinfobox div.skibox div.pricebox .buttonclose a.button { background: url(../images/pfeil-dunkel-up.png) no-repeat right 0.214em; }*/ /*div.shopprodukte div.hk div.uk { display: none; margin: 3.571em 0px 0px 0px; }*/ div.shopprodukte div.hk div.highlited { background-color: #cccccc; border-top: 5px solid white;} div.shopprodukte div.hk .gwt-DisclosurePanel {width:100%;} div.shopprodukte div.hk .gwt-DisclosurePanel-closed {background-color: white;} div.shopprodukte div.hk .gwt-DisclosurePanel-closed .category {min-height:90px;} div.shopprodukte div.hk .gwt-DisclosurePanel-closed .showbuttonclose {display: none;} div.shopprodukte div.hk .gwt-DisclosurePanel-closed .showbuttonopen {float: right; display: inline; margin-left: 2em;} div.shopprodukte div.hk .gwt-DisclosurePanel-open {background-color: #eeeeee !important;min-height: 200px;} div.shopprodukte div.hk .gwt-DisclosurePanel-open .showbuttonopen {display:none;} div.shopprodukte div.hk .gwt-DisclosurePanel-open .showbuttonclose { float:right;} div.shopprodukte div.hk .gwt-DisclosurePanel-open div.categoryImage { display: none;} div.shopprodukte div.hk .gwt-DisclosurePanel-open div.infoImage { display: none;} div.shopprodukte div.hk .gwt-DisclosurePanel-open div.priceWrapper { display:none;} div.shopprodukte div.hk div.priceWrapper { margin-bottom: 0.4em; text-align: right;} div.shopprodukte div.hk div.uk .gwt-DisclosurePanel {width:100%; padding: 0.571em 0px 0.5em 0px;border-bottom:5px solid white;} div.shopprodukte div.hk div.uk .gwt-DisclosurePanel-closed {background-color: white;} div.shopprodukte div.hk div.uk .gwt-DisclosurePanel-open {background-color: white !important; border: 8px solid #808080;} div.shopprodukte div.hk div.uk .gwt-DisclosurePanel-open span { /*color: #FFFFFF;*/} div.shopprodukte div.hk div.uk { display: block; padding: 1.5em 1em 0.5em 1em;border-bottom: 5px solid white;} div.shopprodukte div.hk div.uk div.ukinfobox { max-width: 100%; margin-botton:1em;} div.shopprodukte div.hk div.uk div.ukinfobox div.titel { font-weight: bold; font-size: 1.25em; } div.shopprodukte div.hk div.uk div.ukinfobox div.pricebox { float: right; display: block; margin-top: 1.2em;} div.shopprodukte div.hk div.uk div.ukinfobox div.pricebox .priceinfo { color: #7F7F7F; margin: 0px 1.5em 0px 0px; } /*div.shopprodukte div.hk div.uk div.ukinfobox div.pricebox .priceinfo s { display: inline; }*/ div.shopprodukte div.hk div.uk div.ukinfobox div.pricebox .price { font-size: 1.5em; line-height: 1.2em; margin: 0px 0px 0.5em 0em; } div.shopprodukte div.hk div.uk div.produktbox { padding: 0px 0px 0.714em 0px; margin-top: 0em;} div.shopprodukte div.hk div.uk div.produktbox div.produkt { margin: 0px 2.142em 0px 2.142em; padding: 0 0px 0.714em 0px; border-top: solid 1px #CCCCCC; } div.shopprodukte div.hk div.uk div.produktbox div.produkt:first-child { border: 0px; } /*div.shopprodukte div.hk div.uk div.produktbox .gwt-DisclosurePanel-open div.produkt:first-child { border-top: 1px solid grey; }*/ div.shopprodukte div.hk div.uk div.produktbox div.produkt div.ski { width: 44.943%; float: left; display: inline; position: relative; left: 0px; overflow: hidden; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.ski img { float: left; display: inline; max-width:100%;} div.shopprodukte div.hk div.uk div.produktbox div.produkt div.productDescription { margin-bottom: 2em;} div.shopprodukte div.hk div.uk div.produktbox div.produkt div.infotext { width: 50.561%; min-height: 1.785em; float: right; display: inline; position: relative; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.infotext div.name { margin: 0.357em 5em 0px 0px; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.infotext a.wahrenkorb { width: 1.571em; height: 1.5em; position: absolute; right: 2.142em; top: 0px;} div.shopprodukte div.hk div.uk .gwt-DisclosurePanel-closed div.infotext a.wahrenkorb {background: url(../images/icon-warenkorb.png) no-repeat center center; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.infotext a.open { width: 1.428em; height: 1.428em; position: absolute; right: 0px; top: 0.214em; } div.shopprodukte div.hk div.uk .gwt-DisclosurePanel-closed .buttonClose {display:none;} div.shopprodukte div.hk div.uk .gwt-DisclosurePanel-open .buttonOpen {display:none;} /*div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox { display: none; }*/ div.shopprodukte div.hk div.uk div.produktbox div.produkt.personboxopen { padding-right: 2.142em; padding-left: 2.142em; margin-right: 0px; margin-left: 0px; /*color: #FFFFFF; background-color: #808080;*/ background-color: white; border:0px !important;} div.shopprodukte div.hk div.uk .gwt-DisclosurePanel-open div.infotext a.wahrenkorb { background: none; } div.shopprodukte div.hk div.uk .gwt-DisclosurePanel-open div.infotext a.open { background: url(../images/pfeil-weiss-up.png) no-repeat center center; } div.shopprodukte div.hk div.uk div.produktbox div.produkt.personboxopen div.personbox { display: block; /*margin-top: 1.428em; */} div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.inputbox label { display: block; margin: 0px 0px 0.214em 0px; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.inputbox div.input { height: 2.142em; border: solid 1px gray; background-color: #FFFFFF; position: relative; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.inputbox div.input label.bglabel { cursor: text; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.inputbox div.input div.inputinnen { margin-left: 0.714em; height: 100%; position: relative; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.inputbox div.input input { position: absolute; left: 0px; top: 0px; line-height: 1.142em; color: #7F7F7F; background: transparent; width: 100%; height: 100%; display: block; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 0px; outline:none;font-size:1.4em;} div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.selectbox label { display: block; margin: 0px 0px 0.214em 0px; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.selectbox div.select { height: 2.142em; border: solid 1px grey; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.selectbox div.selectbirthday { height: 2.142em; border: solid 1px grey; float: left; margin-right: 3%; width: 28%;} div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.selectbox div.selectbirthdayyear { height: 2.142em; border: solid 1px grey; float: right; width: 33%;} div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.selectbox div.select select, div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.selectbox div.selectbirthday select, div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.selectbox div.selectbirthdayyear select { color: #7F7F7F; width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 0px; background-color: #FFFFFF; font-size: 1.4em; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.checkbox input { float: left; display: inline; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.checkbox div.label { margin: 0px 0px 0px 1.785em; display: block; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.formbox div.inputbox { margin-right: 2%; margin-bottom: 1.428em; width: 31%; float: left; display: inline; height:55px;} /*div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.formbox div.inputbox.name { margin-left: 0px; }*/ div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.formbox div.selectbox { margin-right: 2%; margin-bottom: 1.428em; width: 31%; float: left; display: inline; height: 55px;} /*div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.formbox div.selectbox.schuhgosse { margin-left: 0px; }*/ div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.zusatzbox div.element { margin-bottom: 1.428em; width: 24.487%; height:7.5em; float: left; display: inline; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.zusatzbox div.element div.image { width: 4.285em; float: left; display: inline; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.zusatzbox div.element div.checkbox { margin: 1.071em 0px 0px 5em; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.pricebox { padding: 1.785em 0px 1.785em 0px; /*border-bottom: solid 1px #979797;*/ position: relative; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.pricebox div.produktinfo { min-height: 8.214em; margin-right: 21.428em; float:left;} div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.pricebox div.produktprice { width: 20em; float:right; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.pricebox div.produktprice div.oldprice { margin-bottom: 1.785em; float: left; display: inline; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.pricebox div.produktprice div.oldprice div { display: block; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.pricebox div.produktprice div.price { margin-bottom: 1.785em; text-align: right; float: right; display: inline; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.pricebox div.produktprice div.price div { font-size: 1.785em; line-height: 1.2em; display: block; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.pricebox div.produktprice a.button { clear: both; padding-top: 0.714em; padding-bottom: 0.714em; text-align: center; display: block; } div.checkin div.shopprodukte div.hk div.uk .gwt-DisclosurePanel-open {background-color: rgb(238, 238, 238) !important; border: none;} div.checkin div.shopprodukte div.hk div.uk div.produktbox div.produkt.personboxopen { padding-right: 0px; padding-left: 0px; margin-right: 0px; margin-left: 0px; /*color: #FFFFFF; background-color: #808080;*/ background-color: rgb(238, 238, 238); border:0px !important;} div.checkin div.shopprodukte div.hk div.uk {border-bottom:none; padding:0px;} div.checkin div.shopprodukte div.hk {border:none;margin:0px; padding:0px;} div.checkin div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.pricebox {display:none;} } @media (max-width: 1000px) { div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.zusatzbox div.element { width: 50%; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.zusatzbox div.element.tabletfirst { clear: both; } div.shopprodukte div.hk div.uk div.ukinfobox div.titel { font-weight: bold; font-size: 1em; } } @media (max-width: 850px) { div.shopprodukte div.hk div.hkinfobox div.skibox div.ski { width: 500px; margin-right: 0px; } div.shopprodukte div.hk div.hkinfobox div.skibox div.pricebox { margin-top: 1.428em; float: none; display: block; } div.shopprodukte div.hk div.hkinfobox div.skibox div.pricebox div.priceinfo { float: left; } div.shopprodukte div.hk div.hkinfobox div.skibox div.pricebox div.price { float: right; } div.shopprodukte div.hk div.hkinfobox div.skibox div.pricebox a.button { float: left; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.ski { width: auto; max-width: 28.571em; float: none; display: block; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.infotext { margin-top: 0.714em; width: auto; float: none; display: block; } div.shopprodukte div.produktcatbox span.gwt-CheckBox { min-width: 10em; float: left; display: inline; } div.shopprodukte div.hk .gwt-DisclosurePanel-open .showbuttonclose { margin:0px !important;} } @media (max-width: 680px) { div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.formbox div.inputbox, div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.formbox div.selectbox { margin-right: 3%; width: 47%; height:55px;} /*div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.formbox div.selectbox.schuhgosse { margin-left: 3.642%; clear: none; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.formbox div.selectbox.gewicht, div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.formbox div.selectbox.korpergrosse { margin-left: 0px; clear: both; }*/ } @media (max-width: 640px) { div.shopprodukte div.hk div.hkinfobox div.skibox div.ski { width: 350px; margin-right: 0px; } div.shopprodukte div.hk div.hkinfobox div.skibox div.ski img { display: inline; max-width: 350px;} div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.pricebox div.produktinfo { min-height: 0px; margin-right: 0px; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.pricebox div.produktprice { margin-top: 1.428em; width: 100%; position: relative; top: auto; } } @media (max-width: 540px) { div.shopprodukte div.hk div.hkinfobox div.skibox div.pricebox { text-align: left; width: auto;} div.shopprodukte div.hk div.hkinfobox div.skibox div.pricebox div.priceinfo { float: left; display: inline; margin-bottom: 0.714em; margin-right: 0px; } div.shopprodukte div.hk div.hkinfobox div.skibox div.pricebox div.price { float: right; display: inline; margin-bottom: 0.714em; margin-right: 0px; } div.shopprodukte div.hk div.hkinfobox div.skibox div.pricebox a.button { float: none; display: block; clear: both; } div.shopprodukte div.hk div.hkinfobox div.skibox div.pricebox a.button span.innen { display: block; } div.shopprodukte div.hk div.uk div.produktbox { border: 0px; } div.shopprodukte div.hk div.uk div.produktbox div.produkt { margin-right: 0px; margin-left: 0px; } div.shopprodukte div.hk div.uk div.produktbox div.produkt.personboxopen { padding-right: 1.071em; padding-left: 1.071em; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.zusatzbox div.element { width: auto; float: none; display: block; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.ski { width: auto; max-width: 25.571em; float: none; display: block; } div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.zusatzbox div.element { height:auto !important; } } @media (max-width: 540px) { div.shopprodukte div.hk div.hkinfobox div.skibox div.ski { width: 280px; margin-right: 0px; } div.shopprodukte div.hk div.hkinfobox div.skibox div.ski img { display: inline; max-width: 280px;} div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.formbox div.formItem {overflow: auto;} div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.formbox div.inputbox, div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.formbox div.selectbox { width: 100%; margin-right: 0px;} /*div.shopprodukte div.hk div.ukinfobox div.text { display:none;}*/ /*div.shopprodukte div.hk div.uk div.produktbox div.produkt div.personbox div.formbox div.selectbox.schuhgosse*/ div.shopprodukte div.hk div.uk div.produktbox div.produkt div.ski { width: auto; max-width: 19.571em; float: none; display: block; } } @media (max-width: 340px) { div.shopprodukte div.hk div.hkinfobox div.skibox div.ski { width: 240px; margin-right: 0px; } div.shopprodukte div.hk div.hkinfobox div.skibox div.ski img { display: inline; max-width: 240px;} div.shopprodukte div.hk div.uk div.produktbox div.produkt div.ski { width: auto; max-width: 15.571em; float: none; display: block; } } /** * RESPONSIVE PRODUCT CATEGORY */ .categoryContainer {} .categoryContainer .slogan {padding-bottom: 0.5em; width: 83%;} .categoryContainer .category {position: relative;} .categoryContainer .categoryImage img {width:100%;max-width: 500px;} .categoryContainer .infoImage img {max-width: 500px;} .categoryContainer .priceWrapper .price {font-size:1.5em;} .categoryContainer .priceWrapper .price .startingFrom {font-size:0.5em;} .categoryContainer .button, .categoryContainer .showbuttonopen, .categoryContainer .showbuttonclose { float: right; } .categoryContainer .clear {clear:both;} @media screen and (max-width: 850px) { .categoryContainer .categoryImage img {width: auto; max-width:100%;} .categoryContainer .slogan {width: 100%;} .categoryContainer .clearS {clear:both;} .categoryContainer .priceButtonWrapper {clear:both;float:right;} .categoryContainer .priceWrapper .duration {display:inline-block; vertical-align:middle; margin-right:1em;} .categoryContainer .priceWrapper .defaultPrice {display:inline-block;vertical-align:middle; margin-right:1em;} .categoryContainer .priceWrapper .price {display:inline-block; vertical-align:middle;} } @media screen and (max-width: 900px) and (min-width: 781px) { .categoryContainer .categoryImage {float:left; } .categoryContainer .button {float: right;margin-top:5px;} div.shopprodukte div.hk .gwt-DisclosurePanel-closed .categoryContainer .priceButtonWrapper {text-align:right;position: absolute;bottom: 8px;right: 0px;} div.shopprodukte div.hk .gwt-DisclosurePanel-open .categoryContainer .priceButtonWrapper {text-align:right;position: absolute;top: -8px;right: 0px;} } @media screen and (min-width:900px) { .categoryContainer .categoryImage {float:left; } .categoryContainer .imageWrapper {position: relative;} .categoryContainer .button {float: right;margin-top:5px;} div.shopprodukte div.hk .gwt-DisclosurePanel-closed .categoryContainer .priceButtonWrapper {text-align:right;position: absolute;bottom: 8px;right: 0px;} div.shopprodukte div.hk .gwt-DisclosurePanel-open .categoryContainer .priceButtonWrapper {text-align:right;position: absolute;top: -8px;right: 0px;} } /** * RESPONSIVE PRODUCT */ .productContainer {padding: 0 1em 0 1em;} .productContainer .product {position: relative; top:-1;border-top: 1px solid #EEEEEE; margin-bottom:1em; padding-top:1em;} .productContainer .productImage img {max-width: 500px; margin-bottom: 0.1em;} .productContainer .button {clear:both; float: right; padding: 0.2em 1em 0.2em 1em; font-size: 0.8em;} .productContainer .clear {clear:both;} .productContainer .iconWrapper {display:inline-block;} .productContainer .iconWrapper img {max-height: 18px; margin-right:1em; vertical-align:middle} .productContainer .nameWrapper {margin-bottom:0.5em;} .productContainer .nameWrapper .name {margin-right:1em;} .productContainer .nameWrapper div {display:inline-block;} .productContainer .productSingle {max-width: 85%;} .productContainer .productSingle .availability {clear:both;position:relative;top:5px;} @media screen and (max-width: 500px) { .productContainer .productImage img {max-width: 100%;} .productContainer .productSingle .availability {clear:both;position:relative;top:0px;} } @media screen and (max-width: 649px) { .productContainer .productImage img {max-width: 100%;} .productContainer .productSingle {max-width: 100%;} .productContainer .clearS {clear:both;} .productContainer .nameWrapper {float:left;} .productContainer .button {clear:both;float:right;margin-top:0.5em;} } @media screen and (max-width: 900px) and (min-width: 650px) { .productContainer .button {text-align:right; position: absolute; bottom: 0px; right: 0px;} .productContainer .productImage img {float:left;} } @media screen and (min-width: 900px) { .productContainer .button {text-align:right; position: absolute; bottom: 0px; right: 0px;} .productContainer .productImage img {float:left;} } /* Shop V02 ____________________________________________________ */ @media all { div.shopintro { padding: 3.529em 0px 1.428em 0px; background-size: 100% auto; } div.shopintro div.contentcenter { position: relative; } div.shopintro div.shieldbox { width: 16.857em; height: 19.142em; position: absolute; left: 50%; top: 0px; margin: 0px 0px 0px -8.428em; background: url(../images/shield.png) no-repeat 0px 0px; } div.shopintro div.shieldbox div.image { margin: 2.714em 1.428em 0px 1.428em; text-align: center; } div.shopintro div.shieldbox div.image img { float: none; } div.shopintro div.introbox { margin: 4.285em 0px 0px 0px; padding: 2.142em 2.142em 2.142em 2.142em; background-color: #FFFFFF; border: solid 1px #E5E5E6; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); } div.shopintro div.introbox div.textbox { width: 24.285em; float: left; display: inline; } div.shopintro div.introbox div.textbox div.text { margin: 1.571em 0px 0px 0px; } div.shopintro div.introbox div.addressbox { width: 21.428em; float: right; display: inline; background-color: #EEEEEE; } div.shopintro div.introbox div.addressbox div.innen { margin: 1.071em 1.071em 1.071em 1.428em; } div.shopintro div.introbox div.addressbox .icon { margin: 0px 0px 0.714em 0px; padding: 0px 0px 0px 1.428em; display: block; } div.shopintro div.introbox div.addressbox div.address { background: url(../images/icon-address.png) no-repeat 0.214em 0.285em; } div.shopintro div.introbox div.addressbox div.tel { background: url(../images/icon-tel.png) no-repeat 0px 0.357em; } /*div.shopintro div.introbox div.addressbox a.mail { color: #2B2626; background: url(../images/icon-mail.png) no-repeat 0px 0.357em; } div.shopintro div.introbox div.addressbox a.mail:hover { color: #7F7F7F; }*/ div.shopintro div.introbox div.addressbox div.time { margin-bottom: 0px; background: url(../images/icon-time.png) no-repeat 0.142em 0.285em; } div.shopintroCustomerform { padding: 1.529em 0px 3em 0px;} } @media (max-width: 1500px) { div.shopintro { background-size: auto auto; } } @media (max-width: 1000px) { div.shopintro div.shieldbox { right: 1.571em; left: auto; margin-left: 0px; } div.shopintro div.introbox div.textbox { margin-right: 17.857em; width: auto; float: none; display: block; } div.shopintro div.introbox div.addressbox { margin-top: 1.428em; margin-right: 17.857em; width: auto; float: none; display: block; } } @media (max-width: 680px) { div.shopintro div.introbox { margin: 1.428em 0px 0px 0px; } div.shopintro div.shieldbox { margin: 0 auto; position: relative; right: auto; } div.shopintro div.introbox div.textbox { margin-right: 0px; } div.shopintro div.introbox div.addressbox { margin-right: 0px; } } @media (max-width: 440px) { div.shopintro div.introbox { padding: 1.071em 1.071em 1.071em 1.071em; } div.shopintro div.shieldbox { margin: 0 auto; position: relative; right: auto; } div.shopintro div.introbox div.textbox { margin-right: 0px; } div.shopintro div.introbox div.addressbox { margin-right: 0px; } } @media all { div.shopnav { background-color: #EEEEEE; z-index:50;} div.shopnav ul { margin-top: -1.2em; width: 100%; float: left; display: inline; background-color: #2B2627; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); } div.shopnav ul li { color: #7F7F7F; padding: 0.6em 0px 0.6em 0px; text-align: center; float: left; display: inline; background: transparent; margin: 0px 0px 0px 0px; } div.shopnav ul li.activ { /*background-color: #00BDF2;*/ color: #FFFFFF; } div.shopnav ul li.nr1 { width: 32.978%; cursor: pointer;} div.shopnav ul li.nr2 { width: 43.617%; cursor: pointer;} div.shopnav ul li.nr3 { width: 23.404%; } } @media (max-width: 780px) { div.shopnav ul li { border-bottom: solid 1px #3C3536; float: none; display: block; } div.shopnav ul li.nr1, div.shopnav ul li.nr2, div.shopnav ul li.nr3 { width: auto; } } @media all { div.shopcart { padding-top: 1.785em;padding-bottom: 1.785em; background-color: #EEEEEE;} div.shopcart .gwt-DisclosurePanel-closed .showbuttonclose {display:none;} div.shopcart .gwt-DisclosurePanel-open .showbuttonopen {display:none;} div.shopcart div.cartBookingDates a.button {margin-left: 25px; -webkit-box-shadow: 0px 0px 0px 0px white; box-shadow: 0px 0px 0px 0px white;} div.shopcart div.cartBookingDates {padding:1em; background-color: #808080; color:white;} div.shopcart div.cartBookingDates .h2style {color:white;} div.shopcart div.cartBookingDates .title {color:white;} div.shopcart div.cartBookingDates div.shopdauer {padding:0px; background-color: #808080;} div.shopcart div.produkt { margin-top: 1.428em; position: relative; background-color: white; padding: 1em;} div.shopcart div.produkt div.skibox { width: 72.34%; float: left; display: inline; } div.shopcart div.produkt div.skibox div.daten { width: 48.529%; margin-bottom: 1.071em; color: #7F7F7F; float: left; display: inline; } div.shopcart div.produkt div.skibox div.daten div.name { font-weight: bold; color: #2B2626; } div.shopcart div.produkt div.skibox div.daten span { color: #2B2626; } div.shopcart div.produkt div.skibox div.buttonbox { width: 48.529%; margin-bottom: 1.071em; float: right; display: inline; } div.shopcart div.produkt div.skibox div.buttonbox a.loschen { float: left; display: inline; margin: 0px 1.428em 0px 0px; padding: 0.071em 0px 0px 2.142em; background: url(../images/loschen.png) no-repeat 0px 0px; } div.shopcart div.produkt div.skibox div.buttonbox a.addperson,div.shopcart div.produkt div.skibox div.buttonbox a.addperson { float: left; display: inline; padding: 0.142em 0px 0.142em 3.214em; background: url(../images/addperson.png) no-repeat 0px 0px; } div.shopcart div.produkt div.skibox div.ski { clear: both; max-width: 28.571em; overflow: hidden; } div.shopcart div.produkt div.skibox div.ski img { float: left; display: inline; max-width:100%;} div.shopcart div.produkt div.priceinfo { width: 27.659%; float: right; display: inline; } div.shopcart div.produkt div.priceinfo div.oldprice { float: left; display: inline; } div.shopcart div.produkt div.priceinfo div.price { text-align: right; float: right; display: inline; } div.shopcart div.produkt div.priceinfo div.price span { display: block; font-size: 1.785em; line-height: 1.2em; } div.checkin div.shopcart div.produkt div.skibox { width: 100%; float: left; display: inline; } div.checkin div.shopcart div.produkt div.skibox div.daten { width: 80%; margin-bottom: 1.071em; color: #7F7F7F; float: left; display: inline; } div.checkin div.shopcart div.produkt div.skibox div.buttonbox { width: 20%; margin-bottom: 1.071em; float: right; display: inline; } div.shopcart div.shopzusatzdienste { margin-top: 2.142em; padding-top: 1.785em; padding-bottom: 1.785em; border-top: solid 1px #DDDDDD; } div.shopcart div.shopzusatzdienste div.element { margin-top: 2.142em; } div.shopcart div.shopzusatzdienste div.element div.icon { width: 4.714em; height: 4.642em; float: left; display: inline; } div.shopcart div.shopzusatzdienste div.element div.icon.sportssafety { background: url(../images/icon-sportssafety.png) no-repeat 0px 0px; } div.shopcart div.shopzusatzdienste div.element div.icon.bookingcancellation { background: url(../images/icon-bookingcancellation.png) no-repeat 0px 0px; } div.shopcart div.shopzusatzdienste div.element div.icon.skidepot { background: url(../images/icon-skidepot.png) no-repeat 0px 0px; } div.shopcart div.shopzusatzdienste div.element div.checkbox { margin-left: 6.071em; } div.shopcart div.shopzusatzdienste div.element div.checkbox input { float: left; display: inline; } div.shopcart div.shopzusatzdienste div.element div.checkbox div.label { margin-left: 2.142em; color: #7F7F7F; } div.shopcart div.shopzusatzdienste div.element div.checkbox div.label label { color: #2B2626; } div.shopcartpricebox { padding-top: 2.142em; padding-bottom: 1.428em; background-color: white;} div.shopcartpricebox div.titel { float: left; display: inline; } div.shopcartpricebox div.pricebox { color: #7F7F7F; width: 28.571em; float: right; display: inline; } div.shopcartpricebox div.pricebox div.info { text-align: right; width: 57.5%; float: left; display: inline; } div.shopcartpricebox div.pricebox div.price { text-align: right; width: 40%; float: right; display: inline; } div.shopcartpricebox div.pricebox div.price.summe { color: #201F1F; font-size: 1.785em; line-height: 1.2em; } div.shopcartpricebox div.pricebox div.linie { margin-top: 0.357em; margin-bottom: 0.714em; width: 65%; height: 1px; float: right; display: inline; background-color: #DDDDDD; } } @media (max-width: 1000px) { div.shopcart div.produkt div.skibox { margin-right: 18.571em; min-height: 4.285em; width: auto; float: none; display: block; } div.shopcart div.produkt div.skibox div.daten { width: auto; float: none; display: block; } div.shopcart div.produkt div.skibox div.buttonbox { width: auto; float: none; display: block; } div.shopcart div.produkt div.priceinfo { width: 18.571em; position: absolute; right: 1em; top: 1em; } } @media (max-width: 760px) { div.shopcart div.cartBookingDates .h2style {font-size:1em;} div.shopcart div.cartBookingDates a.button {margin-left: 0px;} div.shopcart div.produkt div.skibox { margin-bottom: 1.428em; margin-right: 0px; min-height: 0px; width: auto; float: none; display: block; } div.shopcart div.produkt div.priceinfo { width: auto; float: none; display: block; position: relative; } } @media (max-width: 520px) { div.shopcartpricebox div.titel { float: none; display: block; } div.shopcartpricebox div.pricebox { width: auto; margin-top: 1.071em; float: none; display: block; } div.checkin div.shopcart div.produkt div.skibox div.daten { width: 100%; margin-bottom: 1.071em; color: #7F7F7F; float: left; display: inline; } div.checkin div.shopcart div.produkt div.skibox div.buttonbox { width: 100%; margin-bottom: 0px; float: right; display: inline; } } @media (max-width: 420px) { div.shopcart div.produkt div.skibox div.daten span { display: block; } div.shopcart div.produkt div.skibox div.daten div.name { margin-bottom: 0.285em; } div.shopcart div.produkt div.skibox div.daten div.skiname { margin-bottom: 0.285em; } div.shopcart div.produkt div.skibox div.buttonbox a.loschen { clear: both; margin-bottom: 0.357em; } div.shopcart div.produkt div.skibox div.buttonbox a.addperson,div.shopcart div.produkt div.skibox div.buttonbox div.addperson { clear: both; } div.shopcart div.shopzusatzdienste div.element div.icon { margin: 0 auto; float: none; display: block; } div.shopcart div.shopzusatzdienste div.element div.checkbox { margin-left: 0px; margin-top: 1.071em; } } @media all { div.shopform { padding-top: 1.785em; padding-bottom: 2.857em; background-color: #EEEEEE; } div.shopform div.inputbox { max-width: 15.714em; width: 31.428%; margin-left: 2.142%; margin-top: 0.857em; float: left; display: inline; } .contentNotValid { border: 1px solid red !important;} .checkboxNotValid { border: 1px solid red !important;} div.shopform div.inputbox label { display: block; margin: 0px 0px 0.214em 0px; } div.shopform div.inputbox div.input { height: 2.142em; border: solid 1px #D4D4D4; background-color: #FFFFFF; position: relative; } div.shopform div.inputbox div.input label.bglabel { cursor: text; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } div.shopform div.inputbox div.input div.inputinnen { margin-left: 0.714em; height: 100%; position: relative; } div.shopform div.inputbox div.input input { position: absolute; left: 0px; top: 0px; line-height: 1.142em; color: #7F7F7F; background: transparent; width: 100%; height: 100%; display: block; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 0px; outline: none;font-size: 1.4em;} div.shopform div.textarea { max-width: 50em; margin-top: 0.857em; } div.shopform div.textarea label { display: block; margin: 0px 0px 0.214em 0px; } div.shopform div.textarea textarea { color: #7F7F7F; text-indent: 0.714em; width: 100%; display: block; margin: 0px 0px 0px 0px; border: solid 1px #D4D4D4; } div.shopform div.selectbox { max-width: 15.714em; width: 31.428%; margin-left: 2.142%; margin-top: 0.857em; float: left; display: inline; } div.shopform div.selectbox label { display: block; margin: 0px 0px 0.214em 0px; } div.shopform div.selectbox div.select { height: 2.142em; border: solid 1px #D4D4D4; } div.shopform div.selectbox div.select select { color: #7F7F7F; width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 0px; background-color: #FFFFFF; font-size:1.4em;} div.shopform div.checkbox { max-width: 50em; width: 74.468%; margin-left: 2.142%; margin-top: 0.857em; float: left; display: inline; } div.shopform div.checkbox input { float: left; display: inline; } div.shopform div.checkbox div.label { margin: 0px 0px 0px 1.785em; display: block; } div.shopform div.linie { margin-top: 2.142em; margin-bottom: 0.714em; height: 1px; background-color: #DDDDDD; } div.shopform div.selectbox div.selectbirthday { height: 2.142em; border: solid 1px #D4D4D4; float: left; margin-right: 3%; width: 28%;} div.shopform div.selectbox div.selectbirthdayyear { height: 2.142em; border: solid 1px #D4D4D4; float: right; width: 33%;} div.shopform div.selectbox div.selectbirthday select, div.shopform div.selectbox div.selectbirthdayyear select { color: #7F7F7F; width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 0px; background-color: #FFFFFF; font-size: 1.4em; } div.shopform div.inputbox.vorname, div.shopform div.inputbox.strasse, div.shopform div.inputbox.telefon, div.shopform div.inputbox.unterkunft, div.shopform div.selectbox.land, div.shopform div.selectbox.anrede { margin-left: 0px; } div.shopform div.inputbox.steuernummer { max-width: 32.857em; width: 65.714%; } div.shopform div.inputbox.unterkunft { float: right; } div.shopform div.checkboxgroup div.text { float: left; display: inline; } div.shopform div.checkboxgroup div.checkbox { margin-left: 17.142em; width: auto; float: none; display: block; } div.shopform div.checkboxgroup div.checkbox.privacy a { color: #2B2626; font-weight: bold; } div.shopform div.checkboxgroup div.kreditkarteinfo { } div.shopform div.checkboxgroup div.kreditkarteinfo div.inputbox, div.shopform div.checkboxgroup div.kreditkarteinfo div.selectbox { margin-left: 2.857%; width: 47.826%; } div.shopform div.checkboxgroup div.kreditkarteinfo div.selectbox.kreditkarte { margin-left: 0px; } div.shopform div.checkboxgroup div.kreditkarteinfo div.inputbox.kreditkartennummer { margin-left: 0px; width: 100%; max-width: 32.857em; } div.shopform div.checkboxgroup div.kreditkarteinfo div.selectbox.gultigkeitmonat { margin-left: 0px; width: 22.826%; max-width: 7.5em; } div.shopform div.checkboxgroup div.kreditkarteinfo div.selectbox.gultigkeitjahr { margin-left: 1.142%; width: 22.826%; max-width: 7.5em; } div.shopform div.checkboxgroup div.kreditkarteinfo div.clearmobile { display: none; } div.shopform a.button { margin-top: 1.428em; float: right; display: inline;} div.shopform a.buttongreen { margin-top: 1.428em; float: right; display: inline;} div.shopform a.button.btngrau { float: left; margin-top: 1.785em; } div.shopform a.button.weiter { padding-top: 0.714em; padding-bottom: 0.714em; } div.shopform a.buttongreen.weiter { padding-top: 0.714em; padding-bottom: 0.714em; } div.shopform div.button { margin-top: 1.428em; float: right; display: inline;} div.shopform div.buttongreen { margin-top: 1.428em; float: right; display: inline;} div.shopform div.button.btngrau { float: left; margin-top: 1.785em; } div.shopform div.button.weiter { padding-top: 0.714em; padding-bottom: 0.714em; } div.shopform div.buttongreen.weiter { padding-top: 0.714em; padding-bottom: 0.714em; } } @media (max-width: 1000px) { div.shopform div.inputbox.unterkunft { clear: both; float: left; } } @media (max-width: 680px) { div.shopform div.checkboxgroup div.text { float: none; display: block; } div.shopform div.checkboxgroup div.checkbox { margin-left: 0px; width: auto; float: none; display: block; } } @media (max-width: 580px) { div.shopform div.inputbox, div.shopform div.inputbox.steuernummer, div.shopform div.inputbox.unterkunft, div.shopform div.selectbox { width: auto; max-width: none; float: none; display: block; margin-left: 0px; } div.shopform div.checkboxgroup div.kreditkarteinfo div.inputbox, div.shopform div.checkboxgroup div.kreditkarteinfo div.selectbox { margin-left: 2.857%; width: 47.826%; float: left; display: inline; max-width: 15.714em; } } @media (max-width: 420px) { div.shopform div.checkboxgroup div.kreditkarteinfo div.inputbox, div.shopform div.checkboxgroup div.kreditkarteinfo div.selectbox { margin-left: 0px; width: auto; float: none; display: block; max-width: none; } div.shopform div.checkboxgroup div.kreditkarteinfo div.selectbox.gultigkeitmonat { width: 47.091%; max-width: none; float: left; display: inline; } div.shopform div.checkboxgroup div.kreditkarteinfo div.selectbox.gultigkeitjahr { width: 47.091%; max-width: none; float: right; display: inline; } div.shopform div.checkboxgroup div.kreditkarteinfo div.clearmobile { display: block; } div.shopform a.button.weiter { text-align: center; float: none; display: block; } div.shopform a.buttongreen.weiter { text-align: center; float: none; display: block; } } /* Landing V02 ____________________________________________________ */ @media all { div.ortdetail { padding: 2.857em 0px 0px 0px; } div.ortdetail h2 { margin-bottom: 2.285em; } div.ortdetail div.infotext { width: 48.936%; float: left; display: inline; } div.ortdetail div.entfernungbox { width: 48.936%; float: right; display: inline; background-color: #EEEEEE; } div.ortdetail div.entfernungbox div.innen { padding: 0px 7.142em 0px 0px; margin: 1.785em 2.142em 1.428em 2.142em; min-height: 6.428em; background: url(../images/entfernung-icon.png) no-repeat right 0px; } div.ortdetail div.entfernungbox a.weiter { margin: 0.714em 0px 0px 0px; padding: 0px 0px 0px 2.142em; background: url(../images/pfeil-gelb.png) no-repeat 0px 0px; float: left; display: inline; } div.ortdetail div.trenlinie { margin: 4.285em 0px 0px 0px; width: 100%; height: 1px; background-color: #CCCCCC; position: relative; } div.ortdetail div.trenlinie div.berge { width: 2.857em; height: 1.5em; position: absolute; left: 50%; top: -1.071em; margin: 0px 0px 0px -1.428em; background: url(../images/trenlinie.png) no-repeat center 0px #FFFFFF; } } @media (max-width: 1000px) { div.ortdetail div.infotext { width: auto; float: none; display: block; } div.ortdetail div.entfernungbox { margin-top: 1.428em; width: auto; float: none; display: block; } } @media (max-width: 460px) { div.ortdetail div.entfernungbox div.innen { margin: 0.714em 1.071em 1.071em 1.071em; padding: 0px 0px 0px 0px; background: transparent; } } @media all { div.skiverleihbox { padding: 0px 0px 4.285em 0px; background: url(../images/bg-piste.jpg) no-repeat center bottom; background-size: 100% auto; } div.skiverleihbox h1 { text-align: center; } div.skiverleihbox h2 { text-align: center; } div.skiverleihbox div.ortbox .rentalListBox { width: 48.936%; float: left;} div.skiverleihbox div.ortbox div.googlemapLocation { float: right; display: inline; width: 48.936%; height: 36.285em; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); } div.skiverleihbox div.ortbox .rentalListBox div.ort { margin: 0px 0px 1.428em 0px; width:100%; position: relative; display: block; background-color: #FFFFFF; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); cursor:pointer;} div.skiverleihbox div.ortbox .rentalListBox div.ort.first { margin-top: 0px; } div.skiverleihbox div.ortbox .rentalListBox div.ort div.marker { color: #FFFFFF; width: 2.065em; height: 3.125em; font-size: 1.142em; line-height: 2.125em; text-align: center; position: absolute; left: -1em; top: -1.062em; background: url(../images/map-marker.png) no-repeat 0px 0px; font-family: 'Bitter', serif; } div.skiverleihbox div.ortbox .rentalListBox div.ort div.innen { padding: 0.714em; border: solid 1px #E5E5E6; } div.skiverleihbox div.ortbox .rentalListBox div.ort div.innen div.image { width: 9.785em; float: left; display: inline; } div.skiverleihbox div.ortbox .rentalListBox div.ort div.innen div.textbox { margin: 0px 0px 0px 11.214em; } div.skiverleihbox div.ortbox .rentalListBox div.ort div.innen div.text { margin: 0px 0px 0.714em 0px; } div.skiverleihbox div.ortbox .rentalListBox div.ort div.innen a.weiter { padding: 0px 0px 0px 2.142em; background: url(../images/pfeil-gelb.png) no-repeat 0px 0px; float: left; display: inline; } } @media (max-width: 1500px) { div.skiverleihbox { background-size: auto auto; } } @media (max-width: 1000px) { div.skiverleihbox div.ortbox div.googlemapLocation { width: 100%; margin-bottom: 2em;} div.skiverleihbox div.ortbox .rentalListBox { width: 100%; float: left;} div.skiverleihbox div.ortbox div.googlemap { margin: 0px 0px 1.428em 0px; width: auto; /*height: 36.285em;*/ float: none; display: block; } div.skiverleihbox div.ortbox div.ort { width: auto; float: none; display: block; } } @media (max-width: 520px) { div.skiverleihbox div.ortbox div.ort div.innen div.image { width: auto; float: none; display: block; } div.skiverleihbox div.ortbox div.ort div.innen div.textbox { margin-left: 0px; margin-top: 1.428em; } } /*Suggest Box*/ .gwt-SuggestBoxPopup { text-align: left; background-color: #FFFFFF; border: solid 3px #D3D2D2; max-height: 250px; min-width: 350px; overflow: auto !important; z-index: 1000; } .gwt-SuggestBoxPopup table{ width: 100%; } .gwt-SuggestBoxPopup .item { padding: 1.142em 1.428em 1.142em 1.428em; border-top: solid 1px #D3D2D2; } .gwt-SuggestBoxPopup img { margin-right: 0.357em; } .gwt-SuggestBoxPopup span { margin-left: 0.5em; color: #00BDF2; } .gwt-SuggestBoxPopup .item-selected { color: #00BDF2; background-color: #FFFF00; } /*CALENDAR*/ .dateBoxPopup{ z-index:10000; } .gwt-DatePicker { border: 1px solid black; cursor: default; } .gwt-DatePicker td, .datePickerMonthSelector td:focus { outline: none } .datePickerDays { width: 100%; background: white; } .datePickerDay, .datePickerWeekdayLabel, .datePickerWeekendLabel { font-size: 100%; text-align: center; padding: 8px; outline: none; } .datePickerWeekdayLabel, .datePickerWeekendLabel { background: #C3D9FF; padding: 0px 4px 2px; cursor: default; } .datePickerDay { padding: 7px 12px 7px 12px; cursor: hand; cursor: pointer; } .datePickerDayIsToday { border: 1px solid black; padding: 3px; } .datePickerDayIsWeekend { background: #EEEEEE; } .datePickerDayIsFiller { color: #888888; } .datePickerDayIsValue { background: #00bdf2; } .datePickerDayIsDisabled { color: rgb(237, 51, 59); font-style: italic; } .datePickerDayIsHighlighted { background: #ffff00; } .datePickerDayIsValueAndHighlighted { background: #bbddd9; } .datePickerMonthSelector { background: #00bdf2; width: 100%; border-spacing: 10px; border-collapse: separate; } td.datePickerMonth { text-align: center; vertical-align: center; white-space: nowrap; font-size: 150%; font-weight: bold; color: white; } .datePickerPreviousButton, .datePickerNextButton { font-size: 200%; line-height: 1em; color: white; cursor: hand; cursor: pointer; padding: 4px 8px 8px 8px; } /*.datePickerPreviousButton input, .datePickerNextButton input { opacity: 1000 !important; height: 35px !important; width: 30px !important; z-index: 20000 !important; overflow: hidden; position: absolute; cursor: pointer; }*/ @media (max-width: 640px) { .datePickerDay { padding: 7px 7px; } } /*Skiverleih 2*/ /* Skiverleih V02 ____________________________________________________ */ @media all { div.landingheadcompany { background-color: #EEEEEE; min-height: 29.5em; position: relative; } div.landingheadcompany div.bild { width: 100%; height: 29.5em; position: absolute; left: 0px; top: 0px; overflow: hidden; } div.landingheadcompany div.bild img { width: 100%; float: left; display: inline; position:absolute;left:0;} div.landingheadcompany div.contentcenter { margin-top: 4.285em; margin-bottom: 4.285em; position: relative; } div.landingheadcompany div.shieldbox { width: 16.857em; height: 19.142em; position: absolute; right: 5em; top: 0px; background: url(/images/shield.png) no-repeat 0px 0px; } div.landingheadcompany div.shieldbox div.logo { width: 10em; position: absolute; left: 50%; top: 5em; margin: 0px 0px 0px -5em; } div.landingheadcompany div.shieldbox div.logo img { max-width: 100%; } div.landingheadcompany div.textbox { margin: 5.357em 0px 0px 0px; background-color: #FFFFFF; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); } div.landingheadcompany div.textbox div.innen { padding: 2.785em 21.428em 2.714em 2.142em; border: solid 1px #E5E5E6;} div.landingheadcompany div.textbox div.titel { font-size: 2.5em; line-height: 1.142em; } div.landingheadcompany div.textbox div.untertitel { max-width: 20em; } } @media (max-width: 1500px) { div.landingheadcompany div.bild img { width: auto; position: absolute; left: 50%; top: 0px; margin: 0px 0px 0px -53.571em; } } @media (max-width: 900px) { div.landingheadcompany div.textbox div.titel { font-size: 2.142em; line-height: 1.166em; } } @media (max-width: 780px) { div.landingheadcompany { min-height: 0em; } div.landingheadcompany div.bild { display: none; } div.landingheadcompany div.contentcenter { margin-top: 3.571em; margin-bottom: 0px; position: relative; } div.landingheadcompany div.shieldbox { margin: 0em auto 0px auto; position: relative; left: auto; right: auto; } div.landingheadcompany div.textbox { margin-top: 1.428em; width: auto; } div.landingheadcompany div.textbox div.innen { padding: 1em 1.071em 1em 1.071em; } div.landingheadcompany div.textbox div.untertitel { max-width: none; } } @media (max-width: 480px) { div.landingheadcompany div.textbox div.titel { font-size: 1.785em; line-height: 1.2em; } } @media all { div.skiverleihbox { padding: 0em 0px 4.285em 0px; background-size: 100% auto; } div.skiverleihbox h1 { text-align: center; } div.skiverleihbox h2 { text-align: center; } div.skiverleihbox div.ortbox div.ort { cursor: pointer; margin: 3em 1% 0px 2%; position: relative; width: 46%; float: left; display: inline; background-color: #FFFFFF; border: 2px solid #E5E5E6;padding-bottom:1em;} div.skiverleihbox div.ortbox div.ort.firstline { margin-top: 0px; } div.skiverleihbox div.ortbox div.ort.first { float: left; clear: both; } div.skiverleihbox div.ortbox div.ort div.marker { color: #FFFFFF; width: 2.065em; height: 3.125em; font-size: 1.142em; line-height: 2.125em; text-align: center; position: absolute; left: -1em; top: -1.062em; background: url(/images/map-marker.png) no-repeat 0px 0px; font-family: 'Bitter', serif; } div.skiverleihbox div.ortbox div.ort div.innen { padding: 0.714em 0.714em 0.857em 0.714em; height: 10.7em;} div.skiverleihbox div.ortbox div.ort div.innen.withicon { padding-right: 5em; } div.skiverleihbox div.ortbox div.ort div.innen div.image { width: 9.785em; float: left; display: inline; } div.skiverleihbox div.ortbox div.ort div.innen div.textbox { margin: 0px 0px 0px 11.214em; } div.skiverleihbox div.ortbox div.ort div.innen div.icon { position: absolute; right: 0.714em; top: 0.714em; } div.skiverleihbox div.ortbox div.ort div.innen div.icon.qualitativ { width: 3.571em; height: 3.571em; background: url(/images/qualitativ.png) no-repeat 0px 0px; } div.skiverleihbox div.ortbox div.ort div.innen div.icon.rentandgo { width: 4.285em; height: 1.642em; background: url(/images/rentandgo.png) no-repeat 0px 0px; } div.skiverleihbox div.ortbox div.ort div.innen div.text { margin: 0px 0px 1em 0px; } div.skiverleihbox div.ortbox div.ort div.innen a.button { float: left; display: inline; position:absolute; bottom: 1em;right: 1em;} div.skiverleihbox div.googlemap { max-width: 980px; margin-top: 2.857em; width: 100%; /*height: 36.714em;*/ -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); } div.skiverleihbox div.googlemap img.gwt-Image { max-width: 100%;} } @media (max-width: 1500px) { div.skiverleihbox { background-size: auto auto; } } @media (max-width: 1000px) { div.skiverleihbox div.ortbox div.ort { width: auto; float: none; display: block; } div.skiverleihbox div.ortbox div.ort.first { float: none; clear: both; } div.skiverleihbox div.ortbox div.ort.firstline { margin-top: 1.428em; } div.skiverleihbox div.ortbox div.ort.firstline.first { margin-top: 0px; } div.skiverleihbox div.ortbox div.googlemap { margin-top: 2.857em; } } @media (max-width: 520px) { div.skiverleihbox div.ortbox div.ort div.innen div.image { width: auto; float: none; display: block; } div.skiverleihbox div.ortbox div.ort div.innen div.textbox { margin-left: 0px; margin-top: 1.428em; } div.skiverleihbox div.ortbox div.ort div.innen a.button { position:relative; bottom: 0em;right: 0em;} } @media all { /* Reset css _________________________________________________________________ */ /* body { position: relative; color: #211F1F; background: #FFFFFF; font-family: 'Open Sans', sans-serif; font-size: 0.875em; line-height: 1.466em; text-align: center; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } .noscroll { overflow: hidden !important; height: 100% !important; margin: 0; } body.mobilemenuopen div.wpbodybox { width: 100%; overflow-x: hidden; } address { font-style: normal; } table { border: 0px; border-collapse: collapse; } table td, form { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } */ a { /*color: #211F1F;*/ cursor: pointer; text-decoration: none; } a:hover { /*color: #211F1F;*/ } img { border: 0px; } /* p { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }*/ h1, .h1style, h1 a { font-family: 'Bitter', serif; color: #211F1F; font-size: 2.554em; line-height: 1.111em; font-weight: normal; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: left; } h2, .h2style, h2 a { color: #211F1F; font-size: 1.785em; line-height: 1.2em; font-weight: normal; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: left; } h3, .h3style, h3 a { font-family: 'Bitter', serif; color: #2B2626; font-size: 1.785em; line-height: 1.2em; font-weight: normal; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: left; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-size: 1em; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-decoration: none; } /* ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type: none; } ul li { margin: 0px 0px 0.142em 0px; padding: 0px 0px 0px 1.142em; } ul li ul { float: none; } body { position: relative;color: #211F1F; background: #FFFFFF; font-family: 'Open Sans', sans-serif; font-size: 0.875em; line-height: 1.466em; text-align: center; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } */ .contentcenter { max-width: 980px; width: 94%; margin: 0 auto; text-align: left; } div.overlayer { text-align: left; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 100; } div.popupContent iframe { width: 100% !important; margin: 0px 0px 0px 0px; } div.popupContent span.close { cursor: pointer; float: right; font-size: 35px; color: #807D7D; margin-bottom: 15px; } div.popupContent div.overflowwrapper { width: 100%; max-height: 225px; overflow: auto; } div.popupContent div.overflowwrapper div.table, div.popupContent div.overflowwrapper table { width: 100%; } div.popupContent div.overflowwrapper table.date:first-child { border-top: 1px solid #C3C2BF; } div.popupContent div.overflowwrapper table.date { border-bottom: 1px solid #C3C2BF; } div.popupContent div.overflowwrapper table.date td { padding: 0px 0px 12px 0px; } div.popupContent div.overflowwrapper table.date tr:first-child td { padding: 12px 0px 12px 0px; } div.popupContent a.button { float: right; margin-top: 20px; } /*div.popupContent div.button { float: right; margin-top: 20px; }*/ div.clear { clear: both; line-height: 0px; font-size: 0px; height: 0px; overflow: hidden; text-indent: -100px; } /*div.buttongrey { width: 15.142em; height: 2.714em; text-indent: 5px; line-height: 2.714em; background-color: #D8D8D8; border: 1px solid #AAAAAA; color: #2B2626; cursor: pointer; display: inline-block; font-weight: normal; font-family: 'Open Sans', sans-serif; }*/ .trafficlight { position: relative; margin-left: 18px; } .trafficlight:before { content: ''; width: 10px; height: 10px; background-color: #85B200; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; left: -18px; top: 6px; } .trafficlight.orange:before { background-color: #FFC926; } .trafficlight.red:before { background-color: #B20000; } .select-style { padding: 0; margin: 0; border: 1px solid #999999; height: 36px; overflow: hidden; background-color: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } .select-style:after { content: "\25BC"; color: #797979; position: absolute; right: 5px; top: 8px; font-size: 10px; z-index: 0; } .select-style select { padding: 5px 8px; width: 100%; height: 100%; border: none; box-shadow: none; background-color: transparent; background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; z-index: 1; } div.table { border: 1px solid #7D7D7D; display: inline-block; width: 95%; max-width:700px; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #ececec;} div.table div.row { height: 30px;} div.table div.rowDouble { height: 50px;} div.tablegroup { width: 99% !important;} div.table div { -webkit-box-sizing: border-box; box-sizing: border-box; } div.table>div { width: 100%; height: auto; clear: both; position: relative; } div.table>div:after { content: ' '; display: block; clear: both; line-height: 0px; font-size: 0px; height: 0px; overflow: hidden; text-indent: -100px; } div.table>div + div { border-top: 1px solid #7D7D7D; } div.table>div>div { display: inline-block; float: left; padding: 5px; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; display: table-cell; text-align: center; } div.table>div>div:nth-child(2) { margin-left: 22px; width: 28%;} div.table>div>div:nth-child(3) { width: 23%; } div.table>div>div:nth-child(4) { /*margin-right: 27px;*/ width: 30%; text-align: left; } div.table>div>div + div { border-left: 1px solid #7D7D7D; } div.table>div>div.trafficlight { width: 22px; margin-left: 0px; position: absolute; left: 0px; top: 0px; } div.table>div>div.trafficlight:before { left: 6px; top: 9px; } /*add the same negative margin to the last element*/ div.table>div>div.remove { width: 27px; float: right; font-size: 24px; color: #7D7A7A; position: absolute; right: 0px; top: 0px; cursor: pointer;} div.table>div>div.remove input { position: relative; left: -2px; top: -3px; } input[type="text"] { border: 1px solid #999999; background-image: none; background-color: #FFFFFF; -webkit-border-radius: 0px; border-radius: 0px; height: 36px; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; -webkit-appearance: none; -moz-appearance: none; } div.tablegroup>div>div:nth-child(1) { width: 50%; } div.tablegroup>div>div:nth-child(2) { width: 33%; } } /* Menu _______________________________________________________________ */ @media all { div.menu { width: 100%; height: 60px; position: relative; z-index: 10; background-color: #2B2627; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); } div.menu ul { width: 100%; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; list-style-type: none; cursor: pointer; } div.menu ul li { width: 33.2%; background: none; border-left: 1px solid #3C3536; float: left; line-height: 60px; max-height: 60px; text-align: center; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } div.menu ul li:nth-child(1) { border-left: 1px solid #3C3536; } div.menu ul li.active { background-color: #00BDF2; border-left: 1px solid #00BDF2; } div.menu ul li.active a { color: #FFFFFF; } div.menu ul li:hover a { color: #FFFFFF; } div.menu ul li a { font-family: Bitter; font-size: 26px; color: #7F7F7F; } } @media (max-width: 1000px) { div.menu ul li { width: 24.787234%; } } /* Holiday Period __________________________________________________________ */ @media all { /* div.shopdauer { margin: 20px 0px 0px 0px; background-color: #F8F8F8; } div.shopdauer div.input { height: 2.714em; display: block; border: solid 1px #D4D4D4; background-color: #FFFFFF; position: relative; } div.shopdauer div.input label.bglabel { cursor: text; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } div.shopdauer div.input div.inputinnen { margin-left: 0.714em; height: 100%; position: relative; } div.shopdauer div.input input { font-size: 16px;position: absolute; left: 0px; top: 0px; line-height: 2.714em; color: black; background: transparent; width: 100%; height: 100%; display: block; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 0px; } div.shopdauer div.dauerbox { padding: 3% 2% 3% 2%; } div.shopdauer div.dauerbox div.titel { margin: 0px 0px 1% 0px; } div.shopdauer div.dauerbox div.kalenderbox { position: relative; } div.shopdauer div.dauerbox div.kalenderbox a.icon { width: 1.928em; height: 2em; position: absolute; right: 0.357em; top: 0.428em; background: url(images/icon-kalender.png) no-repeat 0px 0px; } div.shopdauer div.dauerbox div.erstertag { width: 15.142em; float: left; display: inline; margin: 0px 1.428em 0px 0px; } div.shopdauer div.dauerbox div.letztertag { width: 15.142em; float: left; display: inline; margin: 0px 1.428em 0px 0px; } div.shopdauer div.dauerbox div.erstertag label, div.shopdauer div.dauerbox div.letztertag label { display: block; margin: 0px 0px 0.428em 0px; } div.shopdauer div.dauerbox div.buttongrey { float: left; display: inline; } div.shopdauer div.dauerbox div.text { margin: 0.5em 0px 0px 0px; }*/ div.produktcatbox input[type=checkbox]{ /* Double-sized Checkboxes */ -ms-transform: scale(1.5); /* IE */ -moz-transform: scale(1.5); /* FF */ -webkit-transform: scale(1.5); /* Safari and Chrome */ -o-transform: scale(1.5); /* Opera */ padding: 10px; margin-right: 10px;} } @media (max-width: 780px) { div.shopdauer div.dauerbox div.erstertag { width: 12em; } div.shopdauer div.dauerbox div.letztertag { width: 12em; } div.shopdauer div.dauerbox div.buttongrey { width: 10em; } } @media (max-width: 680px) { div.shopdauer div.dauerbox div.erstertag, div.shopdauer div.dauerbox div.letztertag { margin-bottom: 0.714em; } div.shopdauer div.dauerbox div.text { margin-top: 0px; margin-left: 0px; max-width: none; clear: both; } } @media (max-width: 530px) { div.shopdauer div.dauerbox div.erstertag, div.shopdauer div.dauerbox div.letztertag, div.shopdauer div.dauerbox div.buttongrey { width: auto; float: none; display: block; margin-left: 0px; margin: 0px 0px 2% 0px; } } @media (max-width: 370px) { div.shopdauer div.produktcatbox div.checkbox { width: auto; float: none; display: block; } } /* Spacer with text __________________________________________________________ */ @media all { div.spacerwithtext { padding: 4.2% 0px 3.2% 0px; } } /* Courses list css __________________________________________________________ */ @media all { div.courseslist div.course { margin-bottom: 30px; } div.courseslist div.maincourse { padding: 10px; margin: 0px 0px 1.06% 0px; background-color: #DBDBDB; } div.courseslist div.maincourse div.image { float: left; display: inline; width: 26.6%; } div.courseslist div.maincourse div.image img { width: 100%; } div.courseslist div.maincourse div.contentbox { float: left; display: inline; width: 38%; margin: 0px 0px 0px 2%; } div.courseslist div.maincourse div.contentbox h3.headline { font-family: 'Bitter', serif; font-size: 25px; line-height: 40px; color: #2B2626; } div.courseslist div.maincourse div.contentbox h3.textbox { font-family: 'Open Sans'; font-size: 14px; line-height: 22px; color: #2B2626; } div.courseslist div.maincourse div.infobox { float: right; display: inline; width: 31.3%; margin-bottom:10px;} div.courseslist div.maincourse div.infobox span.amount { float: right; font-family: 'Bitter', serif; font-size: 14px; line-height: 19px; color: #7F7F7F; margin-top:10px;} div.courseslist div.maincourse div.infobox span.status { float: right; clear: right; position: relative; } div.courseslist div.maincourse div.infobox a.button { margin: 70px 0px 0px 0px; float: right; text-transform: uppercase; } div.courseslist div.maincourse div.infobox div.button { margin: 70px 0px 0px 0px; float: right; text-transform: uppercase; } div.courseslist div.maincourse.active { margin: 0px 0px 1.06% 0px; padding: 10px 10px 10px 10px; } /* Button css */ a.button { background-color: #00BDF2; color: #FFFFFF; cursor: pointer; padding: 0.5em 1em 0.5em 1em; display: inline-block; font-family: 'Open Sans', sans-serif; min-width: 130px; text-align: center; text-transform: uppercase; } /* div.button { background-color: #00BDF2; color: #FFFFFF; cursor: pointer; padding: 0.5em 1em 0.5em 1em; display: inline-block; font-family: 'Open Sans', sans-serif; min-width: 130px; text-align: center; text-transform: uppercase; }*/ div.courseslist a.button.addtocart { float: right; clear: right; } div.courseslist div.button.addtocart { float: right; clear: right; } div.courseslist a.button div.buttonopen span { display: inline-block; padding: 0px 1.028em 0px 0px; background: url(/images/lesson-arrow-down.png) no-repeat right center; } div.courseslist a.button div.buttonclose span { display: inline-block; padding: 0px 1.028em 0px 0px; background: url(/images/lesson-arrow-up.png) no-repeat right center; } div.courseslist div.button div.buttonopen span { display: inline-block; padding: 0px 1.028em 0px 0px; background: url(/images/lesson-arrow-down.png) no-repeat right center; } div.courseslist div.button div.buttonclose span { display: inline-block; padding: 0px 1.028em 0px 0px; background: url(/images/lesson-arrow-up.png) no-repeat right center; } div.courseslist div.maincourse div.booking div.lessons { background-color: #F8F8F8; } div.courseslist div.maincourse div.booking div.lessons div.lesson { padding: 2.1% 4.1% 0 4.1%; margin-bottom: px; } div.courseslist div.maincourse div.booking div.lessons div.lesson.active { background-color: #FFFFFF; } div.courseslist div.maincourse div.booking div.lessons div.lesson:after { content: ''; border-bottom: 1px solid #DDDDDD; width: 100%; display: block; margin: 0 auto; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.image { float: left; display: inline; width: 24.6%; margin-bottom: 2.1%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.numberofpersons div.select-style { display: inline-block; width: 43px; height: 30px; /*top: 11px;*/ left: 2px; line-height: 24px; vertical-align: middle;} div.courseslist div.maincourse div.booking div.lessons div.lesson div.numberofpersons div.select-style:after { top: 4px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.dayselection div.select-style { display: inline-block; width: 165px; height: 30px; /*top: 11px;*/ left: 2px; line-height: 24px; vertical-align: middle;} div.courseslist div.maincourse div.booking div.lessons div.lesson div.dayselection div.select-style:after { top: 4px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.contentbox { float: left; display: inline; width: 50%; margin: 0px 0px 0px 3%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.contentbox h3.headline { float: none; display: block; line-height: 20px; margin-bottom: 5px; font-size: 20px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.contentbox div.textbox { float: none; display: block; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.infobox { float: right; display: inline; width: 21%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.infobox a.button { margin-top: 20px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.infobox div.button { margin-top: 20px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.additionalinfobox { padding-bottom: 55px; display: none; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.upperinfos { position: relative; /*margin-bottom: 45px; */ margin-top:25px;} div.courseslist div.maincourse div.booking div.lessons div.lesson div.upperinfos span.legend { float: left; font-size: 12px; font-family: "Open-Sans", sans-serif; color: #000000; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.upperinfos table { width: 100%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.upperinfos div.infoselectedlessons { width: 100%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.upperinfos div.infoselectedlessons div.numberofpersons { display: block; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.upperinfos div.infoselectedlessons div.numberofpersons:after { } div.courseslist div.maincourse div.booking div.lessons div.lesson div.upperinfos span.legend + span.legend { margin-left: 30px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.upperinfos a.button { margin: 10px 0; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.upperinfos div.button { margin: 10px 0; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.additionalinfobox.active { display: block; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.calendarbox { width: 50%; float: right; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.info div.dateranges { position: relative; width: 100%; height: 33px; line-height: 33px; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #00BDF2; color: white; font-weight: bold;} div.courseslist div.maincourse div.booking div.lessons div.lesson div.info span.back { left: 5px; border-right: 3px solid white; padding-right:4px;} div.courseslist div.maincourse div.booking div.lessons div.lesson div.info span.back, div.courseslist div.maincourse div.booking div.lessons div.lesson div.info span.forward { position: absolute; top: 0; cursor: pointer; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.info span.forward { right: 5px; border-left: 3px solid white; padding-left:4px;} div.courseslist div.maincourse div.booking div.lessons div.lesson div.info span.back img, div.courseslist div.maincourse div.booking div.lessons div.lesson div.info span.forward img { width: 8px; height: 13px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.info span.forward img { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } div.courseslist div.maincourse div.booking div.lessons div.lesson div.info div.dateranges { overflow: hidden; margin-bottom: 18px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.info div.daterange { width: 80%; margin: 0 10%; text-align: center; font-family: 'Bitter', serif; font-size: 14px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.calendarbox div.dates { width: 100%; position: relative; overflow: hidden; margin-top: 8px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.calendarbox div.dates div.innerdates { width: 300%; float: left; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.calendarbox table.date { width: 33.33333%; float: left; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.calendarbox table.date, div.courseslist div.maincourse div.booking div.lessons div.lesson div.calendarbox table.date td, div.courseslist div.maincourse div.booking div.lessons div.lesson div.calendarbox table.date tr { border: 1px solid #C7C7C7; border-collapse: collapse; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.calendarbox table.date td { padding: 8px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.info { float: left; width: 44%; /*padding-left: 15px;*/ margin-bottom:20px;} div.courseslist div.maincourse div.booking div.lessons div.lesson div.calendarbox + div.info { /*margin-top: 80px; margin-left: 4.571428571428571%;*/ } div.courseslist div.maincourse div.booking div.lessons div.lesson span.meetingpoint { cursor: pointer; line-height: 35px; } div.courseslist div.maincourse div.booking div.lessons div.lesson span.meetingpoint img { position: relative; top: 6px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.info div.numberofpersons { clear:both; padding-top: 23px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.individualprice { font-size: 18px; color: #2b2626; font-family: 'Bitter', serif; float: right; clear: right; margin: 20px 0 0; font-weight: 500; text-align: right;} div.courseslist div.maincourse div.booking div.lessons div.lesson div.individualprice.fullprice { margin: 20px 0; text-align: right;} div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant { background-color: #FFFFFF; width: 100%; /*padding: 37px 13px 20px 13px;*/ -webkit-box-sizing: border-box; box-sizing: border-box; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant + div.participant { margin-top: 20px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant>strong { display: block; text-align: left; margin-bottom: 5px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant input, div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant input { padding: 8px 8px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant input.topinput, div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant div.select-style { margin-bottom: 25px; width: 100%; float: left; -webkit-box-sizing: border-box; box-sizing: border-box; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.personalinfobox:first-child input { width: 100% !important; margin-left: 0px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant .personalinfobox { width: 24%; margin: 0px 1% 0px 0px; float: left; display: inline-block; font-family: "Open-Sans", sans-serif; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant .personalinfobox + .personalinfobox { width: 24%; margin-right: 1%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant .personalinfobox img { float: left; width: 16%; margin-left: 2%; margin-right: 3%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant .personalinfobox .text { float: left; width: 75%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant .personalinfobox label { float: left; width: 68%; margin-left: 3%; padding-right: 5%; border-right: 1px solid #E5E5E5; -webkit-box-sizing: border-box; box-sizing: border-box; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant .personalinfobox input.checkbox { float: left; width: auto; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant .personalinfobox label.checkbox span.price { clear: both; display: block; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.participant div.additionals div.addition { width: 50%; min-height:9em; margin: 0px 0px 0px 0px; float: left; display: inline-block; font-family: "Open-Sans", sans-serif; -webkit-box-sizing: border-box; box-sizing: border-box; /*border-right: 1px solid #E5E5E5;*/ padding: 0px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.participant div.additionals div.addition img { float: left; width: 15%; cursor: pointer;} div.courseslist div.maincourse div.booking div.lessons div.lesson div.participant div.additionals div.addition .checkbox { float: left; width: 7%; margin: 0; margin-left: 5%; margin-top: 3px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.participant div.additionals div.addition .labelcheckbox { float: right; width: 73%; cursor: pointer;} div.courseslist div.maincourse div.booking div.lessons div.lesson div.participant div.additionals div.addition span.price { display: block; clear: both; } /* Booking css */ div.courseslist div.maincourse.active div.booking { margin: 20px 0px 0px 0px; padding-top: 0px; /*width: 104.5%;*/ background-color: #F8F8F8; position: relative; /*padding-top: 10px;*/ } div.courseslist div.maincourse.active div.booking:before { content: ''; position: absolute; left: 50%; margin-left: -10.5px; width: 0px; height: 0px; border-style: solid; top: 0px; border-width: 10px 10.5px 0 10.5px; border-color: #DBDBDB transparent transparent transparent; } div.courseslist div.maincourse.active div.booking div.contentbox { width: 95%; margin: 0px 0px 0px 0px; } div.courseslist div.maincourse.active div.booking div.contentbox h3.headline { float: left; font-family: 'Bitter', serif; font-size: 25px; line-height: 40px; color: #2B2626; } div.courseslist div.maincourse.active div.booking div.contentbox span.amount { float: right; font-family: 'Bitter', serif; font-size: 25px; line-height: 40px; color: #2B2626; } div.courseslist div.maincourse.active div.booking div.kalendarhead { margin: 15px 0px 0px 0px; background-color: #D8EAED; text-align: center; } div.courseslist div.maincourse.active div.booking div.kalendarhead a.back { margin: 13px 0px 0px 13px; float: left; width: 12px; height: 13px; background: url(images/back.png) no-repeat 0px 0px; } div.courseslist div.maincourse.active div.booking div.kalendarhead a.forward { margin: 13px 13px 0px 0px; float: right; width: 12px; height: 13px; background: url(images/forward.png) no-repeat 0px 0px; } div.courseslist div.maincourse.active div.booking div.kalendarhead span.date { font-family: 'Open Sans'; font-weight: bold; font-size: 18px; line-height: 40px; color: #2B2626; } div.courseslist div.maincourse.active div.booking div.calendarfields { margin-top: 30px; width: 100%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn { font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 22px; color: #2B2626; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn { float: left; display: inline; width: 11.05%; margin-left: 10px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn:nth-child(1) { margin-left: 0px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem { width: 100%; height: 30px; margin-bottom: 8px; text-align: center; position: relative; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem span.time { display: none; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem label.free { background-color: #D2E4B1; display: inline-block; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem label.limited { background-color: #FFD7AE; display: inline-block; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem label.not { background-color: #EEEEEE; display: inline-block; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem span.free { height: 30px; background-color: #D2E4B1; position: relative; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem span.free label { width: 19px; height: 19px; background-color: #FFFFFF; border: 1px solid #808080; position: absolute; left: 0px; top: 0px; z-index: 2; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem input { opacity: 0.0; filter: alpha(opacity = 0); position: absolute; left: 0px; top: 0px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem label { display: none; width: 100%; height: 30px; background-color: #D8EAED; position: relative; -webkit-border-radius: 5px; border-radius: 5px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem label.free span { background-color: transparent; border: none; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem label.limited span { background-color: transparent; border: none; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem label.not span { background-color: transparent; border: none; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem label span { display: inline-block; width: 19px; height: 19px; margin-top: 5px; background-color: #FFFFFF; border: 1px solid #808080; position: relative; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem.active label span:after { content: '\f00c'; color: #221F1F; position: absolute; left: 2px; top: 0px; font-family: 'FontAwesome'; font-size: 14px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem.active label.free span:after { color: #698C00; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem.active label.limited span:after { color: #D96D00; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem.active label.not span:after { color: #A8A8B7; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem label.active span:after { content: '\f00c'; color: #221F1F; position: absolute; left: 2px; top: 0px; font-family: 'FontAwesome'; font-size: 14px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem label.active.free span:after { color: #698C00; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem label.active.limited span:after { color: #D96D00; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem label.active.not span:after { color: #A8A8B7; } /* div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem input:checked ~ label span:after { content: '\f00c'; color: #221F1F; position: absolute; left: 2px; top: 0px; font-family: 'FontAwesome'; font-size: 14px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem input:checked ~ label.free span:after { color: #698C00; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem input:checked ~ label.limited span:after { color: #D96D00; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem input:checked ~ label.not span:after { color: #A8A8B7; } */ div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendardate { width: 100%; text-align: center; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendardate { width: 100%; height: 30px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendardate span.date { font-size: 12px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumntimes { float: left; display: inline; width: 14.4%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumntimes div.calendaritem { width: 100%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumntimes div.calendaritem.spacer { height: 30px; margin-bottom: 0px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumntimes div.calendaritem span.time { display: block; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem.checkbox label { display: inline-block; } /* OLD STUFF div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem { width: 11.46%; margin-left: 10px; float: left; text-align: center; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem:nth-child(1) { margin-left: 0px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem span { display: block; margin: 0px 0px 10px 0px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem span.time { font-family: 'Open Sans'; font-size: 14px; line-height: 22px; color: #2B2626; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem span.free { height: 40px; background-color: #D2E4B1; position: relative; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem span.free label { width: 19px; height: 19px; background-color: #FFFFFF; border: 1px solid #808080; position: absolute; left: 0px; top: 0px; z-index: 2; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label.free { background-color: #D2E4B1; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label.limited { background-color: #FFD7AE; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label.not { background-color: #EEEEEE; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem span.checkbox { height: 40px; background-color: #D8EAED; } Calendar checkbox css div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem { position: relative; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem input { opacity: 0.0; filter: alpha(opacity = 0); position: absolute; left: 0px; top: 0px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label { display: inline-block; width: 100%; height: 40px; background-color: #D8EAED; margin-bottom: 10px; position: relative; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label.free span { background-color: transparent; border: none; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label.limited span { background-color: transparent; border: none; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label.not span { background-color: transparent; border: none; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label span { display: inline-block; width: 19px; height: 19px; margin-top: 10px; background-color: #FFFFFF; border: 1px solid #808080; position: relative; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem input:checked ~ label span:after { content: '\f00c'; color: #221F1F; position: absolute; left: 2px; top: 0px; font-family: 'FontAwesome'; font-size: 14px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem input:checked ~ label.free span:after { color: #698C00; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem input:checked ~ label.limited span:after { color: #D96D00; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem input:checked ~ label.not span:after { color: #A8A8B7; } */ div.courseslist div.maincourse.active div.booking div.infobox { width: 60%; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 30px 0px; } div.courseslist div.maincourse.active div.booking div.infobox ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } div.courseslist div.maincourse.active div.booking div.infobox ul li { display: inline-block; width: 36%; font-family: 'Open Sans'; font-size: 14px; line-height: 19px; color: #2B2626; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } div.courseslist div.maincourse.active div.booking div.infobox ul li span { display: inline-block; } div.courseslist div.maincourse.active div.booking div.infobox ul li div.color { height: 17px; width: 17px; position: relative; top: 3px; margin-right: 5px; display: inline-block; } div.courseslist div.maincourse.active div.booking div.infobox ul li.free { margin-left: 26%; } div.courseslist div.maincourse.active div.booking div.infobox ul li.free div.color { background-color: #D2E4B1; } div.courseslist div.maincourse.active div.booking div.infobox ul li.limited div.color { background-color: #FFD7AE; } div.courseslist div.maincourse.active div.booking div.kalendarspacer { display: block; width: 100%; height: 40px; } div.courseslist div.maincourse.active div.booking div.bookingstepopenbutton { margin: 30px 0px 30px 0px; } div.courseslist div.maincourse.active div.booking div.bookingstepopenbutton a.button { float: right; text-transform: uppercase; } div.courseslist div.maincourse.active div.booking div.bookingstepopenbutton div.button { float: right; text-transform: uppercase; } div.courseslist div.maincourse.active div.booking div.bookingstepopenbutton a.button span { padding: 0px 2.428em 0px 0px } div.courseslist div.maincourse.active div.booking div.bookingstepopenbutton div.button span { padding: 0px 2.428em 0px 0px } div.courseslist div.maincourse.active div.booking div.buchungsstepformular { margin-top: 20px; display: none; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular.active { margin-top: 20px; display: block; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.teilnehmer { font-family: 'Open Sans'; font-weight: bold; font-size: 18px; line-height: 40px; color: #2B2626; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox { margin-top: 15px; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox label { font-family: 'Open Sans'; font-size: 14px; line-height: 22px; color: #2B2626; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.inputbox { width: 25%; margin-right: 20px; float: left; display: inline; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.inputbox div.input { height: 2.142em; border: solid 1px gray; background-color: #FFFFFF; position: relative; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.inputbox div.input input { text-indent: 10px; position: absolute; left: 0px; top: 0px; line-height: 1.142em; color: #7F7F7F; background: transparent; width: 100%; height: 100%; display: block; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 0px; outline: none; font-size: 1.4em; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.selectbox.alter { width: 14%; margin-right: 20px; float: left; display: inline; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.selectbox.alter div.select { height: 2.142em; border: solid 1px grey; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.selectbox.fahrkoennen { width: 28.8%; float: left; display: inline; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.selectbox.fahrkoennen div.select { height: 2.142em; border: solid 1px grey; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.zusatzbox { margin: 20px 0px 0px 0px; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.zusatzbox div.element { margin: 0px 0px 1.428em 0px; padding: 0px 0px 0px 0px; width: 24.487%; height: 7.5em; float: left; display: inline; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.zusatzbox div.element div.image { width: 4.285em; float: left; display: inline; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.zusatzbox div.element div.image img { width: 100%; float: left; display: inline; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.zusatzbox div.element div.checkbox { margin: 1.071em 0px 0px 5em; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.zusatzbox div.element div.checkbox span.checkbox input { float: left; display: inline; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.zusatzbox div.element div.checkbox div.label { margin: 0px 0px 0px 1.785em; display: block; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.addcourseperson { float: left; display: inline; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.addcourseperson a { padding-left: 25px; background: url(images/add-person.png) no-repeat 0px 2px; font-family: 'Open Sans'; font-weight: bold; font-size: 14px; line-height: 22px; color: #00BDF2; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.courseamoutn { float: right; display: inline; text-align: right; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.courseamoutn span.description { display: block; margin-bottom: 10px; font-family: 'Open Sans'; font-size: 14px; line-height: 22px; color: #2B2626; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.courseamoutn span.amount { display: block; margin-bottom: 10px; font-family: 'Bitter', serif; font-size: 25px; line-height: 40px; color: #2B2626; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.courseamoutn a.button { text-transform: uppercase; padding: 0.7em 1.75em 0.7em 1.75em; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.courseamoutn div.button { text-transform: uppercase; padding: 0.7em 1.75em 0.7em 1.75em; } } @media (max-width: 1005px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn { width: 11%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumntimes { width: 14.4%; } } @media (max-width: 1020px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem { width: 11.2%; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.selectbox.fahrkoennen { width: 28%; } } @media (max-width: 968px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn { width: 10.8%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumntimes { width: 14.4%; } } @media (max-width: 955px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem { width: 11.3%; } } @media (max-width: 1005px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn { width: 10.8%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumntimes { width: 15.5%; } } @media (max-width: 940px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn { width: 10.6%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumntimes { width: 15.5%; } } @media (max-width: 930px) { div.courseslist div.maincourse.active div.booking div.infobox { width: 100%; /*margin-bottom: 30px;*/ } div.courseslist div.maincourse.active div.booking div.infobox ul li.free { margin-left: 17%; } div.courseslist div.maincourse.active div.booking div.bookingstepopenbutton { width: 100%; } div.courseslist div.maincourse div.contentbox, div.courseslist div.maincourse.active div.contentbox, div.courseslist div.maincourse div.image, div.courseslist div.maincourse div.booking div.lessons div.lesson div.image, div.courseslist div.maincourse div.booking div.lessons div.lesson div.contentbox { width: 50%; float: left; display: inline-block; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.contentbox, div.courseslist div.maincourse div.contentbox, div.courseslist div.maincourse.active div.contentbox { width: 47%; margin-left: 3%; float: left; display: inline-block; } div.courseslist div.maincourse div.infobox div.button {margin: 20px 0px 0px 0px;} } @media (max-width: 905px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem { width: 11.1%; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.selectbox.fahrkoennen { width: 26%; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.zusatzbox div.element { width: 50%; margin: 0px 0px 0px 0px;} } @media (max-width: 890px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem { width: 11%; } } @media (max-width: 870px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn { width: 10.5%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumntimes { width: 16.5%; } div.courseslist div.maincourse.active div.booking div.infobox ul li.free { margin-left: 18%; } div.courseslist div.additionalinfobox div.table { /*width: 70%;*/ } } @media (max-width: 850px) { div.courseslist div.maincourse.active { position: relative; } /*div.courseslist div.maincourse.active div.contentbox { width: 76%; }*/ div.courseslist div.maincourse div.infobox, div.courseslist div.maincourse.active div.infobox { float: right; width: 45%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn { width: 10.1%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumntimes { width: 17%; } } @media (max-width: 830px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem { width: 11%; } } @media (max-width: 800px) { div.selectAvailabilityPopup {width: 85%;} div.mapPopup {width: 85%;} div.popupContent { max-width: 700px; height: 90%; margin-top: 20px; } div.popupContent div.overflowwrapper { height: 80%; max-height: none; } div.popupContent iframe { height: 80%; width: auto; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn { width: 9.4%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumntimes { width: 22%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.participant div.additionals div.addition, div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant .personalinfobox { width: 48%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.participant div.additionals div.addition + .addition, div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant .personalinfobox + .personalinfobox { width: 48%; margin-left: 2%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.participant div.additionals div.addition:nth-child(2n + 1), div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant .personalinfobox:nth-child(2n + 1) { margin-left: 0px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.contentbox { width: 45%; } div.courseslist div.maincourse.active div.booking div.infobox ul li.free { margin-left: 24%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.upperinfos div.infoselectedlessons { width: 100%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant input, div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant select { /*width: 96%;*/ float: left; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.calendarbox { width: 100%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.calendarbox + div.info { width: 100%; margin-top: 20px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.info span.forward img, div.courseslist div.maincourse div.booking div.lessons div.lesson div.info span.back img { height: 26px; width: 16px; margin-top: 4px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.info { width: 95%; padding-left: 0px;} } @media (max-width: 775px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem { width: 11%; } } @media (max-width: 760px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn { width: 9.4%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumntimes { width: 22%; } } @media (max-width: 750px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem { width: 10.8%; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.selectbox.fahrkoennen { width: 24%; } div.courseslist div.maincourse.active div.booking div.infobox ul li { width: 25%; } div.courseslist div.additionalinfobox div.table { width: 90%; } } @media (max-width: 730px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem { width: 10.8%; } } @media (max-width: 715px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn { width: 8.8%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumntimes { width: 24%; } div.courseslist div.maincourse.active div.booking div.infobox ul li.free { margin-left: 26%; } div.courseslist div.maincourse.active div.booking div.infobox ul li { width: 30%; } } @media (min-width: 701px) { div.menu ul li.block { display: block; } div.menu ul li.hidden { display: block; } } @media (max-width: 700px) { div.table { border: 1px solid #7D7D7D; display: inline-block; width: 95%; -webkit-box-sizing: border-box; box-sizing: border-box; } div.menu ul li.block { display: block; } div.menu ul li.hidden { display: none; } div.menu { margin: 30px 0px 30px 0px; height: auto; } div.menu ul li { width: 100%; background-color: #2B2627; float: none; border-bottom: 1px solid #3C3536; display: none; } div.menu ul li.active { display: block; border-bottom: 1px solid #00BDF2; } } @media (max-width: 680px) { div.popupContent { width: 100%; height: 100%; margin-top: 0px; } div.popupContent div.overflowwrapper { height: 80%; max-height: none; } } @media (max-width: 670px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem { width: 10.6%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.infobox, div.courseslist div.maincourse div.infobox, div.maincourse div.lessons div.lesson div.infobox, div.courseslist div.maincourse.active div.infobox { width: 100%; } div.courseslist div.maincourse.active div.infobox a.button, div.courseslist div.maincourse.active div.infobox a.button, div.courseslist div.maincourse.active div.infobox a.button, div.courseslist div.maincourse div.infobox a.button, div.courseslist div.maincourse.active div.infobox div.button, div.courseslist div.maincourse.active div.infobox div.button, div.courseslist div.maincourse.active div.infobox div.button, div.courseslist div.maincourse div.infobox div.button { width: 80%; margin: 0 auto; margin-top: 20px; float: none; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; } } @media (max-width: 640px) { div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.selectbox.fahrkoennen { width: 22%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem { width: 10.4%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.participant div.additionals div.addition, div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant .personalinfobox { width: 100%; margin-bottom: 30px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant .personalinfobox { width: 48%; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.participant div.additionals div.addition + div.addition, div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant .personalinfobox, div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant .personalinfobox + .personalinfobox { width: 100%; margin-left: 0px; margin-bottom: 15px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant .personalinfobox .select-style, div.courseslist div.maincourse div.booking div.lessons div.lesson div.lowerinfos div.participant .personalinfobox input { margin-bottom: 0px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.image { width: 100%; margin: 0 auto; float: none; display: inline-block; margin-bottom: 20px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.contentbox h3.headline, div.courseslist div.maincourse div.booking div.lessons div.lesson div.contentbox { width: 95%; } div.courseslist div.additionalinfobox div.table { width: 95%; } } @media (max-width: 620px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumntimes { display: none; display: inline; float: left; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn { width: 100%; margin-left: 0px;} div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendardate { height: 40px; background-color: #00BDF2; border: 1px solid #04A2CE; margin-bottom: 8px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendardate span.date { color: #FFFFFF; font-size: 17px; line-height: 40px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem span.time { width: 40%; float: left; display: inline; margin: 0px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem label { width: 25%; margin-left: 5%; float: left; display: inline; border-radius: 0px; -webkit-border-radius: 0px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem.checkbox { width: 55%; margin-left: 45%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem.checkbox label { margin: 0px; width: 100%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem.checkbox label span { margin: 5px 42% 5px 42%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn.calendarcolumntimes div.calendaritem { display: none; } } @media (max-width: 600px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem { width: 10.4%; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.inputbox { width: 100%; margin: 0px 0px 5% 0px; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.selectbox.alter { width: 100%; margin: 0px 0px 5% 0px; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.selectbox.fahrkoennen { width: 100%; margin: 0px 0px 5% 0px; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.personbox div.formbox div.zusatzbox div.element { width: 100%; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.addcourseperson { width: 100%; padding: 5% 0px 5% 0px; border-top: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.courseamoutn { width: 100%; padding: 5% 0px 0px 0px; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.courseamoutn span.description { float: left; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.courseamoutn span.amount { float: right; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.courseamoutn a.button { width: 100%; text-align: center; float: none; text-align: center; padding-left: 0px; padding-right: 0px; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.courseamoutn div.button { width: 100%; text-align: center; float: none; text-align: center; padding-left: 0px; padding-right: 0px; } div.courseslist div.maincourse.active div.booking div.infobox ul li { width: 100%; margin: 0px 0px 5px 0px; display: block; } div.courseslist div.maincourse.active div.booking div.infobox ul li.free { margin-left: 0px; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.individualprice { width: 100%; text-align: right; margin-top: 15px; } .hideMobile {display:none;} } @media (max-width: 570px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem { width: 10.2%; } div.table div.row { height: 50px;} div.table div.rowDouble { height: 85px;} } @media (max-width: 515px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem { width: 10%; } div.courseslist div.maincourse.active div.booking div.infobox ul li { width: 45%; } div.courseslist div.maincourse div.image { width: 100%; float: none; display: block; } div.courseslist div.maincourse div.booking div.lessons div.lesson div.contentbox { width: 95%; float: none; display: block; } div.courseslist div.maincourse div.contentbox, div.courseslist div.maincourse.active div.contentbox { width: 95%; margin: 0px 0px 0px 0px; } } @media (max-width: 490px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem span.time { width: 40%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem label { margin-right: 0px; line-height: 30px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label.free span, div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label.not span, div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label.limited span { margin-top: 0px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem.active label span:after { top: -4px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem label.active span:after { top: -4px; } /* div.courseslist div.maincourse.active div.booking div.calendarfields div.calendarcolumn div.calendaritem input:checked ~ label span:after { top: -4px; } */ } @media (max-width: 485px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem { width: 100%; margin: 0px 0px 2% 0px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem span { margin: 0px 0px 0px 0px; float: left; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label { margin: 0px 0px 0px 0px; float: left; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem span.time { width: 38%; margin-right: 2%; line-height: 30px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label.free, div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label.not, div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label.limited { width: 28%; margin-right: 2%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label { width: 30%; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label span { margin: 10px 39% 10px 39%; } } @media (max-width: 450px) { div.courseslist div.maincourse div.image, div.courseslist div.maincourse.active div.image { width: 100%; } div.courseslist div.maincourse.active div.booking div.contentbox h3.headline { font-size: 20px; } div.courseslist div.maincourse.active div.booking div.contentbox span.amount { font-size: 20px; } div.courseslist div.maincourse.active div.booking div.infobox ul li { width: 60%; float: right; display: block; margin-bottom: 10px; } div.courseslist div.maincourse.active div.booking div.infobox ul li { width: 100%; margin: 0px 0px 5px 0px; display: block; } div.courseslist div.maincourse.active div.booking div.infobox ul li.free { margin-left: 0px; } } @media (max-width: 400px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label span { margin: 10px 36% 10px 36%; } } @media (max-width: 360px) { div.courseslist div.maincourse.active div.booking div.contentbox h3.headline { font-size: 16px; } div.courseslist div.maincourse.active div.booking div.contentbox span.amount { font-size: 16px; } } @media (max-width: 350px) { div.courseslist div.maincourse.active div.booking div.kalendarhead span.date { font-size: 16px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem span.time { font-size: 12px; } div.courseslist div.maincourse.active div.booking div.infobox ul li { width: 100%; float: right; display: block; margin-bottom: 10px; } div.courseslist div.maincourse.active div.booking div.bookingstepopenbutton a.button { text-align: center; } div.courseslist div.maincourse.active div.booking div.bookingstepopenbutton a.button span { padding: 0px 0px 0px 0px; background: none; } div.courseslist div.maincourse.active div.booking div.bookingstepopenbutton div.button { text-align: center; } div.courseslist div.maincourse.active div.booking div.bookingstepopenbutton div.button span { padding: 0px 0px 0px 0px; background: none; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label span { margin: 10px 34% 10px 34%; } } @media (max-width: 320px) { div.courseslist div.maincourse.active div.booking div.kalendarhead span.date { font-size: 14px; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.courseamoutn span.description { display: block; float: left; width: 100%; text-align: left; } div.courseslist div.maincourse.active div.booking div.buchungsstepformular div.courseamoutn span.amount { display: block; float: left; width: 100%; text-align: left; } } @media (max-width: 305px) { div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem span.time { line-height: 20px; } div.courseslist div.maincourse.active div.booking div.calendarfields div.calendaritem label span { margin: 10px 30% 10px 30%; } } .selectAvailabilityPopup{ width: 700px; padding: 15px; background-color: white; text-align: left;z-index: 100; } .mapPopup{ width: 700px; padding: 15px; background-color: white; text-align: left; z-index: 100;/*position:fixed !important;*/} .selectAvailabilityContainer { max-height: 200px; overflow-y: auto; overflow-x :hidden; z-index: 100; margin-bottom:8px; } .inlineblock{ display: inline-block; } ::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); } /* Remove FF Click Border */ a,div { outline: none!important; } .overflowHidden {overflow: hidden;}