/* ////////////////////////////////////////////////////////////////////////////////////////////////////// * * tourenguide.ch - style.css * aquaverde GmbH, 2013 [ts] * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * colors * * blue: #006DB1 * black: #262626 * grey navigation: #7F7F7F * grey lines: #CCCCCC * grey hover: #F5F5F5 * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * import google fonts * */ @import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|Sanchez:400italic,400'); @import url('https://fonts.googleapis.com/css?family=Montserrat:700'); /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * body settings * */ html, body { height: 100%; } body { background: #EEEDE9 url('../interface/bg.jpg') repeat; font-family: 'PT Sans', sans-serif; font-size: 16px; line-height: 26px; color: #262626; } .clear { clear: both; } [class^="icon-"], [class*=" icon-"] { background-image: url("../interface/glyphicons-halflings.png"); vertical-align: baseline; } .wrapper { min-height: 100%; height: auto !important; height: 100%; } .video-container { position: relative; padding-bottom: 60.25%; padding-top: 10px; height: 0; overflow: hidden; } .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * default heading settings * */ h1, span.h1 { font-family: 'PT Sans', serif; font-size: 36px; margin: 0 0 20px 0; color: #000000; font-weight: bold; line-height: 42px; margin-top: 20px; } h2, span.h2 { font-family: 'PT Sans', serif; font-size: 28px; margin: 0 0 20px 0; color: #006DB1; line-height: 38px; font-weight: bold; } h3, span.h3 { font-family: 'PT Sans', serif; font-size: 22px; margin: 0 0 10px 0; color: #005CA0; line-height: 32px; font-weight: bold; } h4, span.h4 { font-family: 'PT Sans', serif; font-size: 16px; margin: 0 0 10px 0; color: #006DB1; line-height: 21px; font-weight: bold; } h5, span.h5 { font-family: 'PT Sans', serif; font-size: 14px; margin: 0 0 5px 0; color: #262626; line-height: 21px; font-weight: bold; } h7, span.h7 { font-family: 'PT Sans', serif; font-size: 8px; margin: 0 0 5px 0; color: #262626; line-height: 16px; font-weight: normal; } h8, span.h8 { font-family: 'PT Sans', serif; font-size: 12px; margin: 0 0 5px 0; color: #262626; line-height: 16px; font-weight: normal; } h9, span.h9 { font-family: 'PT Sans', serif; font-size: 14px; margin: 0 0 0 0; color: #ffffff; line-height: 16px; font-weight: bold; } h10, span.h10 { font-family: 'PT Sans', serif; font-size: 14px; margin: 0 0 5px 0; color: #262626; line-height: 14px; font-weight: normal; } h11, span.h11 { font-family: 'PT Sans', serif; font-size: 108px; margin: 0 0 0 0; color: #006DB1; line-height: 112px; font-weight: bold; text-shadow: 5px 5px #CCCCCC; } h12, span.h12 { font-family: 'PT Sans', serif; font-size: 60px; margin: 0 0 0 0; color: #006DB1; line-height: 76px; font-weight: bold; text-shadow: 5px 5px #CCCCCC; } h13, span.h13 { font-family: 'PT Sans', serif; font-size: 26px; margin: 0 0 0 0; color: #006DB1; line-height: 32px; font-weight: bold; text-shadow: 3px 3px #CCCCCC; } span.h1, span.h2, span.h3, span.h4, span.h5, span.h7, span.h8, span.h9, span.h10, span.h11, span.h12, span.h13 { display: block; } span.bold { font-weight: bold; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * default link settings * */ a { color: #006DB1; text-decoration: none; font-weight: bold; } a:hover { color: #262626; text-decoration: none; } a:focus { text-decoration: none; } a.btn { text-decoration: none; width: 100%; } h1 a, h2 a, h3 a, h4 a, h5 a { text-decoration: none; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * default color settings * */ .blue { color: #006DB1; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * default button settings * */ button.btn.blue, button.btn.btn-primary, input.btn.btn-primary { background-color: #006FB1; background-image: none; color: #ffffff; text-shadow: none; box-shadow: none; border: 1px solid #0368a2; } button.btn.blue:hover, button.btn.btn-primary:hover, input.btn.btn-primary:hover { background-color: #007ABE; background-image: none; color: #ffffff; text-shadow: none; box-shadow: none; border: 1px solid #0368a2; } button.btn.reset { margin-right: 10px; } .accordion-heading .accordion-toggle { text-decoration: none; font-weight: bold;} button.btn.blue:active, button.btn.btn-primary:active, input.btn.btn-primary:active { background-color: #004f7a; background-image: none; color: #ffffff; text-shadow: none; box-shadow: none; border: 1px solid #00111b; } button.btn.ostschweiz, button.btn.btn-primary, input.btn.btn-primary { background-color: #fabb00; background-image: none; color: #ffffff; text-shadow: none; box-shadow: none; border: 1px solid #fabb00; } button.btn.ostschweiz:hover, button.btn.btn-primary:hover, input.btn.btn-primary:hover { background-color: #fabb00; background-image: none; color: #ffffff; text-shadow: none; box-shadow: none; border: 1px solid #fabb00; } .buttonthemes { float: left; font-size: 16px; color: #ffffff; border-radius: 4px; background-color: #7F7F7F; margin-right: 10px; margin-bottom: 16px; border: 2px solid #7F7F7F; padding-top: 3px; padding-bottom: 3px; } .buttonfeatures { float: right; font-size: 16px; color: #006FB1; border-radius: 4px; background-color: #ffffff; margin-left: 10px; margin-bottom: 10px; margin-top: 10px; border: 1px solid #006FB1; padding-top: 3px; padding-bottom: 3px; } .buttonfb { float: right; font-size: 16px; color: #006FB1; border-radius: 4px; background-color: #ffffff; margin-left: 10px; margin-bottom: 10px; border: 1px solid #006FB1; padding-top: 3px; padding-bottom: 3px; } .buttonback { font-size: 16px; color: #006FB1; border-radius: 4px; background-color: #ffffff; margin-right: 10px; margin-bottom: 10px; margin-top: 10px; border: 1px solid #006FB1; padding-top: 3px; padding-bottom: 3px; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * banner settings * */ #bannerTop { width: 100%; z-index: -1; margin-bottom: 20px; } #banner { margin: 0; padding: 10px 0; } .bannerContent { float: none; text-align: center; margin: 20px 0px 20px 0px; } .bannerContent2 { float: none; margin: 20px 0px 20px 0px; } .outstream { margin: 0px 0px 0px 0px; } article.banner .bannerContent { float: none; margin: 5px 0 5px 0; text-align: center; } .bannerButton { padding-top: 20px; } .sitebar-container { left: calc( (100% - 970px) / 2 - 160px / 2 + 970px + 12px) !important; position: fixed; right: 0; bottom: 0; top: 0; z-index: 8900; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * back to top button * */ .backToTop { background: url("../interface/pageUpIcon.png") #006DB1; height: 60px; width: 46px; position: fixed; bottom: 0; display: none; z-index: 999999; right: 20px; } .backToTop:hover { background-color: #7F7F7F; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * calculate nesting of span10 * Formula: * x = 100 / 97 * One col has a width of 7x * The space between the cols is 3x * e.g. 3 cols = 3 * (col width) + 2 * (space with) = 3(7x)+2(3x) = 27.835051546404% * 1 space = 3 * space with = 3x = 3.092783505156 * space to next maincol | col | space | col | space | col | * -> width: 27.835051546404%; margin-left: 3.092783505156%; * */ .span10 .span3 { width: 27.835051546404%; margin-left: 3.092783505156%; } .span10 .span7 { width: 69.072164948484%; } .span10 .row-fluid section#content { float: left; margin: 0; } .span10 .row-fluid section#rightCol { float: right; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * Pictos * */ .picto-wrap { position: absolute; top: 0; right: 0; display: flex; justify-content: flex-end; align-items: flex-start; flex-direction: row-reverse; z-index: 1000; } .picto-box { border-right: 0; border-left: 1px #E3E2DC solid; background-color: #fff; } .picto-box:last-child { border-left: none; } .picto-box a { display: flex; text-decoration: none; } .picto-box .popover { width: 250px; } figure.picto { display: flex; height: 40px; width: 40px; background-size: cover; margin: 0; background-position: center; } figure.picto.grading { cursor: pointer; justify-content: center; align-items: flex-end; line-height: 31px; } figure.picto.grading::before { content: "1..6"; color: #006DB1; font-weight: 700; font-size: 18px; line-height: 38px; font-family: 'Montserrat', sans-serif; } figure.picto.grading.grading-::before { font-size: 18px; line-height: 38px; } figure.picto.grading.grading-1::before { content: "1/6"; } figure.picto.grading.grading-2::before { content: "2/6"; } figure.picto.grading.grading-3::before { content: "3/6"; } figure.picto.grading.grading-4::before { content: "4/6"; } figure.picto.grading.grading-5::before { content: "5/6"; } figure.picto.grading.grading-6::before { content: "6/6"; } figure.picto.grading.grading-graded { cursor: default; } figure.picto.grading.grading-graded::before { color: #262626; } figure.picto-like figcaption, figure.picto-dislike figcaption { font-size: 25px; line-height: 38px; } .picto-winterhike { background-image: url("../interface/icons/snowHike.svg"); cursor: default; } .picto-snowshoeing { background-image: url("../interface/icons/snowShoeing.svg"); cursor: default; } .picto-hike { background-image: url("../interface/icons/hike.svg"); cursor: default; } .picto-town { background-image: url("../interface/icons/cityHike.svg"); cursor: default; } .picto-certified { background-image: url("../interface/icons/cetrified.svg"); cursor: default; } .picto-best-of { background-image: url("../interface/icons/specialTour.svg"); cursor: default; } .picto-favour { background-image: url("../interface/icons/favour.svg"); cursor: pointer; } .picto-favour-active { background-image: url("../interface/icons/favourActive.svg"); cursor: pointer; } .picto-edit { background-image: url("../interface/icons/edit.svg"); cursor: pointer; } .picto-bicycle { background-image: url("../interface/icons/bike.svg"); cursor: pointer; } .picto-bike { background-image: url("../interface/icons/mountainBike.svg"); cursor: pointer; } .picto-like { background-image: url("../interface/icons/like.svg"); cursor: pointer; } .picto-dislike { background-image: url("../interface/icons/dislike.svg"); cursor: pointer; } .picto-like.helpful-rating-active { background-image: url("../interface/icons/likeActive.svg"); cursor: pointer; } .picto-dislike.helpful-rating-active { background-image: url("../interface/icons/dislikeActive.svg"); cursor: pointer; } .picto-comment { background-image: url("../interface/icons/comment.svg"); cursor: pointer; } figure.picto-calendar { background-image: url("../interface/icons/calendar.svg"); cursor: pointer; background-size: auto; background-repeat: no-repeat; } figure.picto-calendar-active { background-image: url("../interface/icons/calendarActive.svg"); cursor: pointer; background-size: auto; background-repeat: no-repeat; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * header * */ .span10 header { position: relative; height: 135px; z-index: 5000; } .span10 header a { font-family: 'PT Sans', serif; } .span10 header .span3 { width: 27.835051546404%; margin-left: 0; position: relative; height: 30px; } .span10 header .span7 { width: 69.072164948484%; margin-left: 3.092783505156%; height: 30px; } .span10 header .span3 figure#logo { margin: 0; position: absolute; left: 0; top: 5px; width: 139%; } .span10 header .span3 nav#language { position: absolute; left: 110px; top: 0; text-transform: uppercase; z-index: 1; top: 5px } .span10 header .span3 nav#language a { color: #262626; margin: 0 10px; font-size: 16px; text-decoration: none; } .span10 header .span3 nav#language a:hover, .span10 header .span3 nav#language a.on { color: #006DB1; } .span10 header .span7 nav#meta { float: right; margin: 5px 0 0 0; } .span10 header .span7 nav#meta li { list-style: none; display: inline; } .span10 header .span7 nav#meta li a { color: #262626; font-size: 15px; padding: 0 8px 10px 8px; text-decoration: none;} .span10 header .span7 nav#meta li a:hover { color: #006DB1; } .span10 header .span7 nav#meta li.on a, .span10 header .span7 nav#meta li a.on, .span10 header .span7 nav#meta li.active a { color: #006DB1; } .span10 header .span7 nav#meta li ul.dropdown-menu { margin: 0; } .span10 header .span7 nav#meta .dropdown-menu { border-radius: 0px; border: none; margin: 6px 0 0;} .span10 header .span7 nav#meta .dropdown .caret { margin-top: 12px; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background-image:none; } .span10 header .span7 nav#meta .dropdown-menu li { display: block; margin: 1px 0; } .span10 header .span7 nav#meta .dropdown-menu li a { padding: 4px 10px; } .span10 header .span7 nav#meta .dropdown-menu li.active a, .span10 header .span7 nav#meta .dropdown-menu li a:hover { color: #fff; } .span10 header .span7 a.btn { float: right; font-size: 12px; text-decoration: none; width: auto; } .span10 header h1, .span10 header .h1 { position: relative; left: -205px; top: 45px; width: 300px; float: left;} .span10 header #search { position: relative; right: 0px; top: 40px; float: right; } .span10 header #search .input-large { width: 200px; } .headerpic { margin-bottom: 15px; } form#search-field { margin-top: 45px; } .form-search .input-append .btn { border-radius: 0 4px 4px 0; } .form-search span { display: block; margin-bottom: 10px; text-align: right; } .form-search .input-append .search-query { border-radius: 4px 0 0 4px; } .affiliate-title { position: absolute; left: auto; right: 0; top: 50px; display: block; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * main navigation * */ .span10 nav#mainNav { height: 40px; width: 100%; margin-bottom: 30px; position: relative; z-index: 3000; transition: background-color 100ms ease-in-out; } body.sticky .span10 nav#mainNav { position: fixed; top: 0; background: white; z-index: 1000; height: auto; left: 0; right: 0; } .span10 nav#mainNav div.navbar { margin: 0; } body.sticky .span10 nav#mainNav div.navbar { max-width: 1170px; margin: 0 auto; } .span10 nav#mainNav #navWrapper { position: absolute; top: 0; left: -5px; right: -5px; margin: 0; } body.sticky .span10 nav#mainNav #navWrapper { position: relative; top: auto; left: auto; right: auto; margin: 0; padding: 10px 0; max-width: 980px; margin-left: -5px; } .span10 nav#mainNav #navWrapper.open { overflow: visible !important; } .span10 nav#mainNav #navWrapper #navTable { display: table; border-spacing: 5px 0; width: 100%; } .span10 nav#mainNav #navWrapper #navTable ul.firstLevel { display: table-row; width: 100%; } .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li { width: auto; background-color: #7F7F7F; display: table-cell; position: relative; } .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li:first-child { margin: 0; width: auto; } .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li a { padding: 10px 0; font-family: 'PT Sans', serif; font-size: 16px; color: #ffffff; display: block; text-align: center; text-decoration: none; } .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li.active { background-color: #006DB1; } .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li:hover { background-color: #006DB1; } .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown ul.secondLevel { display: none; margin: 0; border-spacing: 0; z-index: 2000; padding: 10px 0; background-color: #ffffff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); max-width: 210px; } .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown ul.secondLevel li { position: relative; padding: 0; float: none; display: inline-block; background-color: #ffffff; width: 100%; } .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown ul.secondLevel li:hover { background-color: #006DB1; } .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown ul.secondLevel li a { position: relative; z-index: 500; height: auto; padding: 9px 20px 9px 20px; text-align: left; font-size: 14px; color: #262626; display: block; background: transparent; } .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown ul.secondLevel li a:hover { color: #ffffff; } .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown.open ul.secondLevel { display: block; position: absolute; top: 40px; } .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown ul.thirdLevel { display: none; position: absolute; top: 0; left: 200px; margin: 0; border-spacing: 0; z-index: 2000; padding: 10px 0; background-color: #ffffff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); width: 240px; z-index: 1000;} .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown ul.thirdLevel li a { padding: 3px 20px 3px 20px; font-size: 14px; } .span10 nav#mainNav #navWrapper #navTable ul.secondLevel li.subOpen > a { color: #fff !important; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * breadcrumb navigation * */ .span10 .row-fluid section#content nav#breadcrumb { margin-bottom: 10px; width: 100%; } .span10 .row-fluid section#content nav#breadcrumb a { text-decoration: none; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * content - bodytext * */ #content { position: relative; z-index: inherit; } body.sticky #content.row-fluid { margin-top: 88px; } .span10 .row-fluid section#content .bodytext .back-to-list { width: auto; margin: 20px 0 30px 0; } .span10 .row-fluid section#content .bodytext ul li { list-style: disc; padding-left: 15px; padding-bottom: 10px; line-height: 150%; } .span10 .row-fluid section#content .bodytext table tr td { padding: 20px; } .span10 .row-fluid section#content .bodytext table.table-condensed tr td { padding: 10px 10px; } .span10 .row-fluid section#content .bodytext div.table-bordered { background-color: #fff; padding: 20px; border-left: 1px solid #DDDDDD; } .span10 .row-fluid section#content .bodytext .legend { font-size: 13px; line-height: 125%;} .span10 .row-fluid section#content .bodytext object.sf_weather { width: 538px; height: 329px; } .span10 .row-fluid section#content #autor.table { display: table; } .span10 .row-fluid section#content #autor.table .tr { display: table-row; } .span10 .row-fluid section#content #autor.table .tr .td.col1 { width: 190px; } .span10 .row-fluid section#content #autor.table .tr .td.col2 { width: 160px; } .span10 .row-fluid section#content #autor.table .tr .td.col3 { width: 160px; } .span10 .row-fluid section#content #autor.table .tr .td.header { font-weight: bold; vertical-align: top; } .span10 .row-fluid section#content #autor.table .tr.header { background-color: #7F7F7F; color: #ffffff; } .span10 .row-fluid section#content #autor.table .tr .td { padding: 10px 30px 10px 20px; display: table-cell; } .span10 .row-fluid section#content #autor.table .tr .td a { text-decoration: underline; color: #0070AD; } /* .span10 .row-fluid section#content #form .btn { width: auto; }*/ .span10 .row-fluid section#content #form .remove_image input[type="checkbox"] { margin-top: -2px; margin-right: 6px; } .span10 .row-fluid section#content .button-wrapper { display: flex; justify-content: space-between; align-items: center; width: 50%; float: right; } .span10 .row-fluid section#content #my-contact .button-wrapper { width: 80%; } .span10 .row-fluid section#content #my-contact .button-wrapper .change-password { width: 40%; } .span10 .row-fluid section#content .button-wrapper .btn { width: 100%; margin: 0 0 0 10px; } .span10 .row-fluid section#content .button-wrapper .btn:first-child { margin: 0; } .span10 .row-fluid section#content #my-contact-edit input[type="file"] { line-height: 0; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * content - slideshow * */ .gallery { padding: 10px 0; } .span10 .row-fluid section#content div#slideshow { position: relative; margin-top: 0; margin-bottom: 0;} .span10 .row-fluid section#content div#slideshow a.carousel-control { background-color: none; width: 31px; height: 66px; margin-top: 0px; border: none; border-radius: 0; background-image: url("../interface/sliderControl.png"); background-size: auto 100%; } .span10 .row-fluid section#content div#slideshow a.carousel-control:hover { opacity: none; background-color: none; } .span10 .row-fluid section#content div#slideshow a.carousel-control.left, a.carousel-control.left:visited { background-position: 0 0; left: 0; top: 153px; } .span10 .row-fluid section#content div#slideshow a.carousel-control.right { background-position: 31px 0; right: 0; top: 153px; } .span10 .row-fluid section#content div#slideshow a.carousel-control.left:hover { background-position: 0 0; left: 0; top: 153px; } .span10 .row-fluid section#content div#slideshow a.carousel-control.right:hover { background-position: -31px 0; right: 0; top: 153px; } .span10 .row-fluid section#content div#slideshow .carousel-indicators-wrapper { position: absolute; bottom: 45px; width: 100%; text-align: center; } .span10 .row-fluid section#content div#slideshow ol.carousel-indicators { position: relative; top: auto; right: auto; left: auto; display: inline-block; } .span10 .row-fluid section#content div#slideshow ol.carousel-indicators li { border-radius: 6px 6px 6px 6px; width: 12px; height: 12px; margin: 0; border: 1px solid #ffffff; background: none; } .span10 .row-fluid section#content div#slideshow ol.carousel-indicators li+li { margin-left: 9px; } .span10 .row-fluid section#content div#slideshow ol.carousel-indicators li.active { background: #ffffff; } .span10 .row-fluid section#content div#slideshow ol.carousel-indicators li:hover { background: #ffffff; cursor: pointer;} .span10 .row-fluid section#content div#slideshow .carousel-inner { height: 410px; } .span10 .row-fluid section#content div#slideshow .carousel-inner a { text-decoration: none; } .span10 .row-fluid section#content div#slideshow .carousel-inner .item .carousel-caption { top: 140px; padding: 0 70px; background: none; } .span10 .row-fluid section#content div#slideshow .carousel-inner .item div { position: absolute; bottom: -35px; height: 20px; float: left; background: none; font-size: 14px; color: #7F7F7F; border: none; display: block; z-index: 12; } .span10 .row-fluid section#content div#slideshow .carousel-inner .item .carousel-caption h2 { color: #ffffff; line-height: 26px; text-shadow: 1px 1px 3px #000000; } .span10 .row-fluid section#content div#slideshow .carousel-inner .item .carousel-caption h1 { color: #ffffff; line-height: 40px; text-shadow: 1px 1px 3px #000000; } .span10 .row-fluid section#content div#slideshow .carousel-inner .item .carousel-caption p { font-size: 24px; margin: 0 0 10px 0; font-weight: normal; font-family: 'PT Sans', serif; color: #ffffff; line-height: 36px; text-shadow: 1px 1px 3px #000000; } .span10 .row-fluid section#content div#slideshow h4 { position: absolute; width: 100%; top: 0; background: rgba(0,0,0,0.25); color: white; font-weight: normal; text-align: center; line-height: 30px; font-family: 'PT Sans',serif; font-size: 15px; } .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 670px; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * content - youtube * */ .youtube-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin-bottom: 30px; width: 100%; } .youtube-container iframe, .youtube-container object, .youtube-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * content - article list * */ .span10 .row-fluid section#content div#title { background-color: #ffffff; padding: 14px 23px; position: relative; display: flex; justify-content: flex-end; } .span10 .row-fluid section#content div#title h3 { margin: 0; } .span10 .row-fluid section#content .pagination { margin: 25px 0 65px 0; } .span10 .row-fluid section#content .pagination ul li a { color: #006DB1; padding: 9px 14px; border-color: #cccccc; font-family: 'Helvetica', sans-serif; } .span10 .row-fluid section#content .pagination ul li a:hover { background-color: #F5F5F5; color: #999999; } a.more { padding-top: 1em; display: block; } .date { font-weight: bold; padding-bottom: 3px;} article.infobox { background-color: #ffffff; position: relative; display: flex; justify-content: space-between; margin: 10px 0; flex-direction: column; } article.infobox.grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 20px; grid-row-gap: 20px; } article.infobox figure.image { margin: 0; width: 100%; display: flex; } article.infobox figure.image a { display: inline-block; width: 100%; height: 100%; } article.infobox figure.image a .infobox-desktop-image { background-size: cover; padding-bottom: 56%; width: 100%; } article.infobox figure.image a > img { padding: 0; width: 100%; } article.infobox figure.image .img-placeholder { width: 100%; padding-bottom: 40px; /*background-image: url('../interface/icons/placeholderImage.svg');*/ background-position: center center; background-repeat: no-repeat; background-size: 35%; background-color: #fff; } article.infobox section.text { padding: 10px 25px; position: relative; } article.infobox section.text a { text-decoration: none; } article.infobox section.text a h2 { padding-right: 120px; margin-bottom: 10px; } article.infobox section.text h3 { font-size: 18px; line-height: 28px; color: #5D5D5D; margin-bottom: 15px; } article.infobox section.text .statistics { display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 10px; right: 0; } article.infobox section.text .statistics .statistic { margin-right: 20px; display: flex; justify-content: flex-start; align-items: center; } article.infobox section.text .statistics .statistic img, article.infobox section.text .statistics .statistic span { display: inline-block; } article.infobox section.text .statistics .statistic > div { height: 100%; } article.infobox section.text .statistics .statistic img { width: 20px; margin-right: 10px; } article.infobox section.text .statistics .statistic.statistic-comments img { width: 30px; } article.infobox section.text .comment { padding-left: 40px; position: relative; } article.infobox section.text .comment:before { content: ""; position: absolute; background-image: url('../interface/icons/commentLarge.svg'); background-size: cover; width: 25px; height: 25px; left: 0; top: 0; } article.infobox { padding: 20px; } article.infobox.fullsize { padding: 0; } article.infobox.basic .text { padding: 0; } article.infobox.fullsize.basic .text { padding: 10px 25px; } .span10 .row-fluid section#content article.infobox.basic section.text > h3 { margin-bottom: 15px; } article.commercials { margin: 10px 0; padding: 20px 20px; } .icons { float: right; margin: 0px; position: absolute; top: 0px; right: 0px; width: 156px; height: 30px; } .icons .popover { width: 250px; } .icons .popover-title { width: 223px; margin: 0 !important; } .icons .iconRight { display: block; width: 32px; height: 30px; float: right; } .icons .iconRight.append { width: 31px; } .icons figure { background-image: url("../interface/iconsArticle.png"); width: 32px; height: 30px; margin: 0; cursor: default; } .icons figure.hike { background-position: 0 0px; } .icons figure.winterhike { background-position: 0 -30px; } .icons figure.bicycle { background-position: 0 -60px; } .icons figure.bike { background-position: 0 -90px; } .icons figure.snowshoeing { background-position: 0 -120px; } .icons figure.town { background-position: 0 -270px; } .icons figure.certified { background-position: 0 -150px; } .icons figure.best-of { background-position: 0 -300px; } .icons figure.favourite_unset { background-position: 0 -180px; width: 31px; cursor: pointer; } .icons figure.favourite_set { background-position: 0 -210px; width: 31px; cursor: pointer; } .icons figure.edit { background-position: 0 -240px; width: 31px; cursor: pointer; } article.infobox section.textCol h4 { width: 320px; margin-right: 0; } article.infobox.no-ratings { display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: center; padding: 20px; } .span10 .row-fluid section#content #loadmore { display: flex; justify-content: center; align-items: center; } .span10 .row-fluid section#content #loadmore .spinner { width: 60px; height: 60px; } .span10 .row-fluid section#content #loadmore .more { display: none; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * content - article single * */ .span10 .row-fluid section#content a.backLink { float: right; text-decoration: none; } .span10 .row-fluid section#content p.leadin, .span10 .row-fluid section#content h2.leadin { font-family: 'PT Sans', serif; font-size: 20px; margin-bottom: 20px; color: #5D5D5D; line-height: 200%; font-weight: bold; } .span10 .row-fluid section#content div.publish { float: left; font-family: 'PT Sans', serif; font-size: 16px; margin-top: 6px; margin-bottom: 6px; } .span10 .row-fluid section#content div.publish a { font-weight: bold; text-decoration: none; } .span10 .row-fluid section#content div.sozialmedia { background-color: white; padding: 20px 20px 15px 20px; margin-bottom: 20px; } .span10 .row-fluid section#content div.sozialmedia .fb-like { margin-top: 5px; display:block; width: 110px !important; float: left; margin-right: 20px;} .span10 .row-fluid section#content div.sozialmedia .tw-like { display:block; float: left; margin-top: 5px; width: 105px !important; margin-right: -20px;} .span10 .row-fluid section#content .leadtext { font-family: 'PT Sans', serif; font-size: 20px; margin-top: 15px; color: #5D5D5D; line-height: 200%; font-weight: bold; clear: both} .span10 .row-fluid section#content .bodytext { font-family: 'PT Sans', serif; font-size: 18px; margin-top: 15px; color: #262626; line-height: 180%; font-weight: normal; clear: both} .span10 .row-fluid section#content .bodytext a img { float: right; margin: 0 0 10px 20px; } .span10 .row-fluid section#content article { background-color: #ffffff; /*margin: 1px 0 0 0;*/ position: relative; } .span10 .row-fluid section#content article .row-fluid .span4 p { font-family: 'PT Sans', serif; font-size: 16px; color: #262626; line-height: 24px; font-weight: bold; margin: 0; padding: 0; } .span10 .row-fluid section#content article .row-fluid .span6 p { font-family: 'PT Sans', serif; font-size: 16px; color: #262626; line-height: 24px; font-weight: normal; margin: 0; padding: 0; } .span10 .row-fluid section#content article.routeninfos { padding-left: 30px; padding-right: 30px; padding-top: 20px; padding-bottom: 10px; } .span10 .row-fluid section#content article.routeninfos .picto-box { border-bottom: 1px #E3E2DC solid; } .span10 .row-fluid section#content article.routeninfos .picto-box:last-child { border-left: 1px #E3E2DC solid; } .span10 .row-fluid section#content article .table { display: table; } .span10 .row-fluid section#content article .table .tr { display: table-row; } .span10 .row-fluid section#content article .table .tr.sep { } .span10 .row-fluid section#content article .table .tr .td.col1 { font-weight: bold; vertical-align: top; width: 180px; } .span10 .row-fluid section#content article .table .tr .td.col1.middle { vertical-align: middle; } .span10 .row-fluid section#content article .table .tr .td { padding: 1px 30px 2px 0; display: table-cell; } .span10 .row-fluid section#content article .table .tr.sep .td { padding-bottom: 3px; height: 20px; } .span10 .row-fluid section#content article .table .tr .td a { color: #0070AD; } .span10 .row-fluid section#content article .table .tr .td a.sbb { margin-left: 10px; } .span10 .row-fluid section#content article .table .tr .td a img { margin-left: 15px; } .span10 .row-fluid section#content article .table .tr .td a:hover { color: black; } .span10 .row-fluid section#content article .table .tr .td .rating-stars { display: inline-block; margin-top: 5px; } .span10 .row-fluid section#content article .table .tr .td figure { background-image: url("../interface/icons/cetrifiedMatrix.svg"); width: 160px; height: 19px; background-size: cover; margin: 0; } .span10 .row-fluid section#content article .table .tr .td figure.level-1 { background-position: 0 0; } .span10 .row-fluid section#content article .table .tr .td figure.level-2 { background-position: 0 -19px; } .span10 .row-fluid section#content article .table .tr .td figure.level-3 { background-position: 0 -39px; } .span10 .row-fluid section#content article .table .tr .td figure.level-4 { background-position: 0 -58px; } .span10 .row-fluid section#content article .table .tr .td figure.level-5 { background-position: 0 -77px; } .span10 .row-fluid section#content article .table .tr .td figure.level-6 { background-position: 0 -97px; } .span10 .row-fluid section#content article .table .tr .td .tooltip table .tr .td { padding: 3px 5px; } .span10 .row-fluid section#content article .table .tr .td .tooltip table .tr .td.txt { width: 400px; } .span10 .row-fluid section#content article .table .tr .td .tooltip table .tr .td figure { margin: 0; } .span10 .row-fluid section#content div.map { margin: 30px 0 0 0; width: 100%; height: auto; display: block; position: relative; } .span10 .row-fluid section#content div.#map_canvas label { width: auto; display:inline; } .span10 .row-fluid section#content div.#map_canvas img { max-width: none; } .span10 .row-fluid section#content div.map a { font-family: 'PT Sans', serif; font-size: 13px; color: #0070AE; line-height: 21px; text-decoration: underline; margin: 0; padding: 0; } .span10 .row-fluid section#content div.map a:hover { text-decoration: none; } .span10 .row-fluid section#content div.map iframe.google { border: 1px solid #262626; margin: 0; } .span10 .row-fluid section#content .bodytext .print-button { width: auto; } .span10 .row-fluid section#content section > h3 { margin: 0 0 30px 0; } .span10 .row-fluid section#content section p { font-family: 'PT Sans', serif; font-size: 14px; color: #262626; line-height: 24px; } .span10 .row-fluid section#content article.likes { padding:0; } .span10 .row-fluid section#content article.facebook { margin-top: 30px; padding:0; } .span10 .row-fluid section#content article.user_images { margin-top: 30px; padding:0; } .fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe { width: 100% !important; } .table { background-color: rgba(255,255,255,1); } hr { border-color: #EEEEEE -moz-use-text-color #ccc} .span10 .row-fluid section#content #private_public_profil #contactform { background-color: #ffffff; padding: 20px 20px 50px 20px; position: relative; } .span10 .row-fluid section#content #private_public_profil #contactform h5 { margin-bottom: 10px; } .span10 .row-fluid section#content #private_public_profil #contactform label.error { color: red; font-size: 12px; margin: 10px 0 10px 0px; } .span10 .row-fluid section#content #private_public_profil #contactform input { margin-left: 20px; } .span10 .row-fluid section#content #private_public_profil #contactform textarea { margin-left: 28px; width: 80%; height: 100px; } h3.facebook_title.pictures { margin-top: 20px; background-repeat: no-repeat; background-size: 29px; padding-left: 0px; line-height:29px; } .span10 .row-fluid section#content #title .picto-box { border-bottom: 1px #E3E2DC solid; } .span10 .row-fluid section#content #title .picto-box:last-child { border-left: 1px #E3E2DC solid; } /* h3.facebook_title.pictures { margin-top: 20px; background-image: url("../interface/icon-Touren-Kalender.png"); background-repeat: no-repeat; background-size: 29px; padding-left: 39px; line-height:29px; } */ .blueimp-gallery > .description { position: absolute; bottom: 50px; left: 15px; color: #fff; display: none; } .blueimp-gallery-controls > .description { display: block; } .span10 .row-fluid section#content #rightCol { float: none; } #tour_header h1, #tour_header .h1 { padding-right: 0px; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * content - mobile accordion * */ .span10 .row-fluid section#content .accordion-mobile { margin: 20px 0; } .span10 .row-fluid section#content .accordion-inner-mobile { padding: 0px; } .span10 .row-fluid section#content .accordion-group-mobile { background: transparent; } .span10 .row-fluid section#content .accordion-group .accordion-heading-mobile .label { float: right; margin-top: 1px; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * content - form new tour * */ .span10 .row-fluid section#content form .btn { float: right; margin: 0 0 20px 20px; } .span10 .row-fluid section#content form .btn.btn-file { float: left; margin: 0 15px 0 0; } .span10 .row-fluid section#content form .thumbnail { margin: 0 10px 20px 0; } .span10 .row-fluid section#content form .legend { margin-top: 10px; } .span10 .row-fluid section#content .accordion { margin: 20px 0; } .span10 .row-fluid section#content .accordion-inner { padding: 20px; } .span10 .row-fluid section#content .accordion-group { background-color: #ffffff; } .span10 .row-fluid section#content .accordion-group .control-group { float: left; width: 100%; } .span10 .row-fluid section#content .accordion-group .control-group textarea { resize: vertical; min-height: 150px; min-width: 424px; max-width: 424px; } .span10 .row-fluid section#content .accordion-group .control-group .control-label { float: left; width: 100%; } .span10 .row-fluid section#content .accordion-group .control-group .control-label h5 { float: left; margin-right: 10px; } .span10 .row-fluid section#content .accordion-group .control-group .controls[class*="span6"], .controls[class*="span7"] { margin-left: 0; } .span10 .row-fluid section#content .accordion-group .control-group .controls input, select[class*="span"] { float: left; margin-left: 0; } .span10 .row-fluid section#content .accordion-group .control-group .controls .checkbox { float: left; margin: 0; padding: 0; } .span10 .row-fluid section#content .accordion-group .control-group .controls .checkbox input[type="checkbox"] { margin-right: 10px; } .span10 .row-fluid section#content .accordion-group .control-group .controls input, select[class*="span3"] { margin-right: 0 /*4.2%*/; } .span10 .row-fluid section#content .accordion-group .control-group .controls .span10 { float: left; } .span10 .row-fluid section#content .accordion-group .control-group .controls .popoverHelp { margin: 4px 0 0 10px; float: left; } .span10 .row-fluid section#content .accordion-group .control-group .controls option { padding: 3px 0 3px 10px; } .span10 .row-fluid section#content .accordion-group .control-group .controls .error { border: 1px red solid; color: red; } .span10 .row-fluid section#content .accordion-group .control-group .remove_image { position: relative; top: 7px; } .span10 .row-fluid section#content .accordion-group .control-group input[type="checkbox"] { margin-top: 0px; position: relative; top: -2px; } .span10 .row-fluid section#content .accordion-group .control-group .remove_image label { display: inline; margin-left: 6px; } .span10 .row-fluid section#content .accordion-group .control-group .help-block { float: right; } .span10 .row-fluid section#content .accordion-group .control-group .help-block ul { margin-bottom: 0; } .span10 .row-fluid section#content .accordion-group .control-group.warning .control-label, .control-group.warning .help-block, .control-group.warning .help-inline { color: #CC002B; } .span10 .row-fluid section#content .accordion-group .control-group.warning input, .control-group.warning select, .control-group.warning textarea { color: #CC002B; border-color: #CC002B; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; } .span10 .row-fluid section#content .accordion-group .accordion-heading .label { float: right; margin-top: 1px; } .filebox { padding-top: 3px; } .required_for_certify { background-image: url("../interface/icon_required_for_certify.png"); width: 14px; height: 13px; display: inline-block; margin: 4px 4px 0 0;} .message { border-left: 1px solid #DDDDDD; background-color: #ffffff !important; padding: 20px; margin-top: 20px; } .message .fb-like { margin-top: 20px; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * right col - my tourenguide login * */ .span10 .row-fluid section#rightCol #myTourenguide { background-color: #006DB1; padding: 20px; color: #ffffff; margin-bottom: 30px; } .span10 .row-fluid section#rightCol #myTourenguide h3 { color: #ffffff; } .span10 .row-fluid section#rightCol #myTourenguide label { color: #ffffff; margin-bottom: 8px; font-size: 12px; } .span10 .row-fluid section#rightCol #myTourenguide form { margin: 0 0 10px 0; } .span10 .row-fluid section#rightCol #myTourenguide form fieldset input[type="text"], .span10 .row-fluid section#rightCol #myTourenguide form input[type="password"] { display: block; width: 100%; padding: 4px 0; text-indent: 6px; } .span10 .row-fluid section#rightCol #myTourenguide .checkbox { float: left; } .span10 .row-fluid section#rightCol #myTourenguide button { float: right; margin-top: 5px; padding: 4px 8px; font-size: 12px; } .span10 .row-fluid section#rightCol #myTourenguide label.checkbox { margin: 10px 0 0 0; } .span10 .row-fluid section#rightCol #myTourenguide p { margin: 0 0 5px; line-height: 110%;} .span10 .row-fluid section#rightCol #myTourenguide a { color: #ffffff; text-decoration: underline; font-size: 13px; line-height: 100%; } .span10 .row-fluid section#rightCol #myTourenguide a:hover { color: #a3cbe2; text-decoration: underline; } .span10 .row-fluid section#rightCol #myTourenguide .alert-error { background: transparent; border-color: #fff; color: #fff; text-shadow: none; } .span10 .row-fluid section#rightCol #myTourenguide .alert .close { top: -12px; right: -34px; color: #fff; text-shadow: none; opacity: 1; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * right col - neuer account login * */ .span10 .row-fluid section#rightCol #newAccount { background-color: #fff; padding: 20px; color: #000; margin-bottom: 30px; } .span10 .row-fluid section#rightCol #newAccount h3 { color: #000; } .span10 .row-fluid section#rightCol #newAccount label { color: #000; margin-bottom: 8px; font-size: 12px; } .span10 .row-fluid section#rightCol #newAccount form { margin: 0 0 10px 0; } .span10 .row-fluid section#rightCol #newAccount form fieldset input[type="text"], .span10 .row-fluid section#rightCol #newAccount form input[type="password"] { display: block; width: 100%; padding: 4px 0; text-indent: 6px; } .span10 .row-fluid section#rightCol #newAccount form fieldset input[type="text"].marketing_email, .span10 .row-fluid section#rightCol #newAccount form input[type="password"].marketing_email { display: none; } .span10 .row-fluid section#rightCol #newAccount .checkbox { float: left; } .span10 .row-fluid section#rightCol #newAccount button { float: right; margin-top: 5px; padding: 4px 8px; font-size: 12px; } .span10 .row-fluid section#rightCol #newAccount label.checkbox { margin: 10px 0 0 0; } .span10 .row-fluid section#rightCol #newAccount a { color: #000; text-decoration: underline; } .span10 .row-fluid section#rightCol #newAccount a:hover { text-decoration: none; } /* smartphone */ .span10 .row-fluid #newAccount.smartphone { background-color: #fff; padding: 20px; color: #000; margin-bottom: 30px; } .span10 .row-fluid #newAccount.smartphone h3 { color: #000; } .span10 .row-fluid #newAccount.smartphone label { color: #000; margin-bottom: 8px; font-size: 14px; } .span10 .row-fluid #newAccount.smartphone form { margin: 0 0 10px 0; } .span10 .row-fluid #newAccount.smartphone form fieldset input[type="text"], .span10 .row-fluid #newAccount.smartphone form input[type="password"] { display: block; width: 100%; padding: 4px 0; text-indent: 6px; } .span10 .row-fluid #newAccount.smartphone form fieldset input[type="text"].marketing_email, .span10 .row-fluid section#rightCol #newAccount form input[type="password"].marketing_email { display: none; } .span10 .row-fluid #newAccount.smartphone .checkbox { float: left; } .span10 .row-fluid #newAccount.smartphone button { float: right; margin-top: 5px; padding: 4px 8px; font-size: 12px; } .span10 .row-fluid #newAccount.smartphone label.checkbox { margin: 10px 0 0 0; } .span10 .row-fluid #newAccount.smartphone a { color: #000; text-decoration: underline; } .span10 .row-fluid #newAccount.smartphone a:hover { text-decoration: none; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * right col - subnavig * */ .span10 .row-fluid section#rightCol #subnavig { background-color: #ffffff; padding: 20px; margin-bottom: 20px; } .span10 .row-fluid section#rightCol #subnavig h3 { color: #262626; } .span10 .row-fluid section#rightCol #subnavig ul { margin: 0; list-style: none; } .span10 .row-fluid section#rightCol #subnavig li { margin: 5px 0; } .span10 .row-fluid section#rightCol #subnavig a { color: #006DB1; text-decoration: none; } .span10 .row-fluid section#rightCol #subnavig a.active { color: #262626; font-weight: bold; } .span10 .row-fluid section#rightCol #subnavig a:hover { text-decoration: underline; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * right col - tourenfinder * */ #tourenfinder { background-color: #ffffff; padding: 20px; margin-bottom: 20px; z-index: 10000 } #tourenfinder section { border-top: 1px solid #E3E2DC; padding-top: 13px; } #tourenfinder section#activities label.checkbox { display: flex; justify-content: flex-start; align-items: center; } #tourenfinder section#activities label.checkbox figure.picto { width: 24px; height: 24px; display: inline-block; margin: 0 10px; cursor: pointer; } #tourenfinder section#activities label.checkbox input[type="checkbox"] { margin-top: 0; } #tourenfinder section#activities .picto-winterhike { background-image: url("../interface/icons/snowHikeNegative.svg"); cursor: pointer; } #tourenfinder section#activities .picto-snowshoeing { background-image: url("../interface/icons/snowShoeingNegative.svg"); cursor: pointer; } #tourenfinder section#activities .picto-hike { background-image: url("../interface/icons/hikeNegative.svg"); cursor: pointer; } #tourenfinder section#activities .picto-town { background-image: url("../interface/icons/cityHikeNegative.svg"); cursor: pointer; } #tourenfinder section#activities .picto-bicycle { background-image: url("../interface/icons/bikeNegative.svg"); cursor: pointer; } #tourenfinder section#activities .picto-bike { background-image: url("../interface/icons/mountainBikeNegative.svg"); cursor: pointer; } #tourenfinder section#locations .areas { display: none; font-size: 12px; } #tourenfinder section#locations .areas label { font-size: 12px; margin: 0 0 2px 18px; } #tourenfinder section#additional { margin: 0; } #tourenfinder section#additional h3 { position: relative; } #tourenfinder section#additional h3 .caret { position: absolute; top: 9px; margin-left: 7px; } #tourenfinder section#additional a.collapsed .caret { transform: rotate(270deg); } #tourenfinder section#additional select { width: 100%; } #tourenfinder section#additional select.couple { margin-bottom: 2px; } #tourenfinder button { margin-top: 10px; float: right; display: block; font-size: 11px; } #tourenfinder #location_string.span10 { width: 100%; } #tourenfinder section#location { margin-top: 10px; } #tourenfinder button.location-search { position: relative; margin-top: 0px; float:right ; display: inline-block; text-align: center;} #tourenfinder button.location-search i { position: absolute; top: 6px; left: 28%; right: 62%; } #tourenfinder section#additional select { width: 100%; padding: 2px 4px; height: 24px; font-size: 13px; } /*#tourenfinder .radio input[type="radio"], .checkbox input[type="checkbox"] { margin-top: 2px; }*/ #tourenfinder #tourencount { font-size: 12px; margin: 0 0 5px 0; line-height: 120%; } #tourenfinder #locations_selection { display: none;} #tourenfinder ul#locations_select { list-style: none; padding:0; margin:0;} #tourenfinder ul#locations_select span { background:none; float:none; height:auto; width:auto; } #tourenfinder .finder_error { display: none; font-size: smaller; } #tourenfinder .finder_error i { margin-bottom: -2px; margin-right: 2px; } #tourenfinder a.jumpToMap { font-size: 12px; } #tourenfinder #minimap-wrapper { padding-top: 13px; } #tourenfinder .button-wrapper { display: flex; justify-content: space-between; align-items: center; } #tourenfinder .button-wrapper .btn + #tourenfinder .button-wrapper .btn { margin-left: 10px;} /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * right col - booking * */ .span10 .row-fluid section#rightCol div#booking { background-color: #ffffff; padding: 20px; margin-bottom: 30px; float: left; } .span10 .row-fluid section#rightCol div#booking form { margin: 0px; } .span10 .row-fluid section#rightCol div#booking form fieldset input[type="text"] { display: block; width: 100%; padding: 4px 0; text-indent: 6px; } .span10 .row-fluid section#rightCol div#booking form fieldset select.day { width: 30%; float: left; } .span10 .row-fluid section#rightCol div#booking form fieldset select.month { width: 60%; float: right; } .span10 .row-fluid section#rightCol div#booking form fieldset input[type="checkbox"] { display: inline; float: left; } .span10 .row-fluid section#rightCol div#booking form fieldset img { margin: 15px 0 0 0; float: left; } .span10 .row-fluid section#rightCol div#booking form fieldset button.btn.blue { margin: 10px 0 0 0; float: right; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * right col - blank * */ .span10 .row-fluid section#rightCol div.teaser_blank { background-color: #ffffff; padding: 20px; margin-bottom: 20px; float: left; width: 230px; } .span10 .row-fluid section#rightCol div.teaser_blank img { width:100%; margin-bottom:20px; margin-top:10px; } .span10 .row-fluid section#rightCol div.teaser_blank h3.center { text-align:center; } .span10 .row-fluid section#rightCol div.teaser_blank .teaser_trophy_logo { width: 75px; height: 59px; margin: 5px auto 10px auto; display: block; } .span10 .row-fluid section#rightCol div.teaser_blank #teaser_count { margin-bottom: 10px; text-align: center; color: #262626; font-family: 'Sanchez',serif; font-size: 20px; font-weight: bold; } .span10 .row-fluid section#rightCol div.teaser_blank .teaser_middle_count { font-size: 16px; } .span10 .row-fluid section#rightCol div.teaser_blank .teaser_small_count { font-size: 12px; font-weight: normal; } .span10 .row-fluid section#rightCol div.teaser_blank .fb-like { float: right; } .span10 .row-fluid section#rightCol div.teaser_blank.blue { background-color: #006DB1; color: #fff; } .span10 .row-fluid section#rightCol div.teaser_blank.blue h3, .span10 .row-fluid section#rightCol div.teaser_blank.blue a { color: #fff; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * banner right * */ #bannerRight { position: fixed; top: 27px; left: 50%; margin-left: 330px } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * sitemap * */ .span10 .row-fluid section#content .bodytext .sitemap ul li { list-style: none; padding-left: 0;} .span10 .row-fluid section#content .bodytext .sitemap ul.level0 { margin: 0;} /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * map * */ #map { position: absolute; z-index: 0; top: 0; height: 100%; width: 100%; } #map.hasBanner { top: 110px; } #map .leaflet-popup-close-button { z-index: 1; padding: 6px 6px 0 0; } #map .leaflet-popup-content-wrapper { padding: 0; } #map .leaflet-popup-content { width: 320px; margin: 0; } #map article.infobox { margin: 0; } #map article.infobox section.textCol { width: 100%; font-family: 'PT Sans',sans-serif; } #map article.infobox section.text { padding: 50px 25px 25px 25px; font-family: 'PT Sans', sans-serif; } #map article.infobox section.text a h2 { padding-right: 0; font-size: 18px; line-height: 22px; } #map article.infobox section.text h3 { padding-right: 0; font-size: 14px; color: #5D5D5D; line-height: 22px; } #map article.infobox section.textCol h4 { width: 100%; margin-bottom: 4px; } #map article.infobox .icons { width: auto; } #map article.infobox .icons .iconRight { padding-right: 32px; overflow: hidden; } #map article.infobox .icons .iconRight.append { padding-right: 0; } #map .leaflet-popup-content p { margin:0; } #map .leaflet-div-icon { background: none; border: none; } #mapfinder #tourenfinder { font-size: 13px; margin-bottom: 0;} #mapfinder #tourenfinder button { font-size: 13px;} #mapfinder { position: absolute; top: 20px; right: 20px; width: 340px; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);} .hasBanner #mapfinder { top: 130px;} #mapNavig { position: absolute; top: 130px; left: 30%; width: 400px; background-color: white; } #map .leaflet-control-container .leaflet-top { position: absolute; top: 11px; } #map .leaflet-control-container .leaflet-top.leaflet-left { position: absolute; top: 160px; } #map .leaflet-control-container .leaflet-right { position: absolute; right: 290px; } #map .leaflet-control-container .leaflet-bottom { position: absolute; bottom: 30px; } #map .leaflet-control-attribution.leaflet-control { display: none; } #map .leaflet-control-zoom.leaflet-bar.leaflet-control { position: absolute; top: 11px; left: 11px; } /* #backToHome { position: absolute; bottom: 20px; left: 20px; } */ #showFinder { position: absolute; bottom: 5px; left: 5px; } .btn a.btn-link { text-decoration: none; color: black; } #bannerTop.map { margin: 0; z-index: 99; position: absolute; } .headerMap { position: absolute; left: 20px; top: 0; z-index: 10; } .hasBanner .headerMap { top: 110px; } .headerMap header { background-color: #ffffff; height: auto; position: relative; margin-top: 20px; padding: 15px 15px 0 15px; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2); } .headerMap header .logoArea { border-bottom: 1px solid #E3E2DC; } .headerMap header .span6 { position: relative; } .headerMap header figure#logo { width: 100%; margin: 0 0 10px 0; } .headerMap header nav#language { text-transform: uppercase; text-align: right; } .headerMap header nav#language a { color: #262626; margin: 0 10px; font-size: 16px; text-decoration: none; font-family: 'PT Sans', serif; } .headerMap header nav#language a:hover, .headerMap header .span6 nav#language a.on { color: #006DB1; } .headerMap nav#mainNav { height: 33px; width: 100%; margin-bottom: 0; position: relative; z-index: 3000; } .headerMap nav#mainNav div.navbar { margin: 0; } .headerMap nav#mainNav #navWrapper { margin: 0; } .headerMap nav#mainNav #navWrapper.open { overflow: visible !important; } .headerMap nav#mainNav #navWrapper #navTable { display: block; width: 100%; } .headerMap nav#mainNav #navWrapper #navTable ul.firstLevel { margin: 0; width: 100%; } .headerMap nav#mainNav #navWrapper #navTable ul.firstLevel li { width: auto; margin-left: 20px; list-style: none; float: left; } .headerMap nav#mainNav #navWrapper #navTable ul.firstLevel > li:first-child { margin: 0; width: auto; } .headerMap nav#mainNav #navWrapper #navTable ul.firstLevel li a { padding: 6px 0; font-family: 'PT Sans', serif; font-size: 14px; color: #262626; display: block; text-align: left; text-decoration: none; } .headerMap nav#mainNav #navWrapper #navTable ul.firstLevel li.active a { color: #006DB1; } .headerMap nav#mainNav #navWrapper #navTable ul.firstLevel li a:hover { color: #006DB1; } .headerMap nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown.open a { color: #006DB1; } .headerMap nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown ul.secondLevel { display: none; margin: 0; border-spacing: 0; z-index: 2000; padding: 6px 0; background-color: #ffffff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); max-width: 210px; } .headerMap nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown ul.secondLevel li { position: relative; padding: 0; float: none; display: inline-block; background-color: #ffffff; width: 100%; } .headerMap nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown ul.secondLevel li:hover { background-color: #006DB1; } .headerMap nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown ul.secondLevel li a { position: relative; z-index: 500; height: auto; padding: 6px 20px 6px 20px; text-align: left; font-size: 13px; color: #262626; display: block; background: transparent; } .headerMap nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown ul.secondLevel li a:hover { color: #ffffff; } .headerMap nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown.open ul.secondLevel { display: block; position: absolute; top: 34px; margin: 0; padding: 0; } .headerMap nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown.open ul.secondLevel li { margin: 0; } .headerMap nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown ul.thirdLevel { display: none; position: absolute; top: 0; left: 200px; margin: 0; border-spacing: 0; z-index: 2000; padding: 6px 0; background-color: #ffffff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); width: 240px; z-index: 1000;} .headerMap nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown ul.thirdLevel li a { padding: 6px 20px 6px 20px; font-size: 13px; } .headerMap nav#mainNav #navWrapper #navTable ul.secondLevel li.subOpen > a { color: #fff !important; } .map-preview { position: absolute; z-index: 0; top: 0; height: 100%; width: 100%; background-image: url('../interface/map-preview.png'); background-position: center center; background-size: cover; } .map-layer { position: absolute; z-index: 5; top: 0; bottom: 0; right: 0; left: 0; background-color: #ffffff; opacity: 0.4; } .map-message { position: absolute; z-index: 6; left: 20px; top: 170px; width: 300px; height: auto; background: white; border: 2px solid #006DB1; border-radius: 5px; padding: 30px; } .map-message .btn { display: none; float: right; width: auto; margin-left: 20px; } .map-message .blue { display: block; background-color: #006FB1; background-image: none; color: #ffffff; text-shadow: none; box-shadow: none; border: 1px solid #0368a2; } @media only screen and (max-width: 870px) { .map-message .btn { display: block; } .map-message { right: 30px; top: 30px; width: auto; } .map-message .btn { margin-bottom: 10px; } } .map-wrapper { width: 100%; position: relative; } .map-wrapper > .map-message { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: none; border-radius: 0; background-color: rgba(255, 255, 255, 0.8); width: auto; padding: 60px; } @media only screen and (max-width: 768px) { .map-wrapper > .map-message { padding: 0 20px; } .map-wrapper > .map-message p { font-size: 12px !important; line-height: 16px !important; } .map-wrapper > .map-message h2 { font-size: 16px; margin: 10px 0; line-height: 20px; } } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * tour rating * */ #tour-rating .infobox { position: relative; display: flex; justify-content: space-between; margin: 10px 0; flex-direction: column; } #tour-rating .infobox.not-listed, #more-ratings.not-listed { display: none; } #tour-rating article.infobox figure.image a { display: inherit; } .span10 .row-fluid section#content #more-ratings .infobox { background-color: #ffffff; transition: background-color 200ms ease-in-out; } .span10 .row-fluid section#content #more-ratings:hover .infobox { background-color: #fff; } .span10 .row-fluid section#content #more-ratings .infobox section.text { color: #006DB1; display: block; transition: color 200ms ease-in-out; } .span10 .row-fluid section#content #more-ratings:hover .infobox section.text { color: #006DB1; } .modal { z-index: 12000; border-radius: 8px; width: 320px; left: calc(50% + 160px); } .modal.loading:before { position: absolute; left: 0; right: 0; top: 0; bottom: 0; content:""; z-index: 1000; background-color: rgba(255, 255, 255, 0.8); background-image: url('../interface/loader.gif'); background-position: center center; background-repeat: no-repeat; } .modal form { margin: 0; } .modal .modal-header h3 { background-repeat: no-repeat; background-size: 29px; padding-left: 0px; } .modal .modal-header a.close { text-decoration: none; } .modal .modal-body .controls input.span4 { float:left; margin-bottom: 7px; } .modal .modal-body .controls .control-label { margin: 5px 0 0 20px; float: left; } .modal .modal-body .controls textarea { resize: none; } .modal .modal-body .datepicker { padding-left: 0; padding-top: 0; margin-bottom: 3px; } /*.modal .modal-body .fileupload-exists { display: none; }*/ .datepicker { z-index: 13000; padding: 0; } .modal-footer { display: flex; justify-content: space-between; align-items: center; } .modal-footer .btn { width: 100%; } /*.modal-footer { width: 100%; }*/ .modal-backdrop { z-index: 11000; } .modal .errorMessage { color: red; font-size: 11px; } .popover { z-index: 30000 !important; } .calendar_month { width: 100%; background-color: none; font-family: 'PT Sans', serif; font-size: 20px; font-weight: normal; } .calendar_month .calender_header { padding: 15px; background-color: white; border-bottom: 1px solid #DDDDDD; margin-bottom: 0px !important; text-align: center; } .calendar_month article.infobox { padding: 0; font-family: 'PT Sans', serif; font-size: 16px; border-bottom: 1px solid #DDDDDD; margin: 0 !important; } .calendar_month article.infobox .infobox_day { position: absolute; left: 0; top: 0; background-color: #006DB1; height: 40px; width: 40px; display: flex; justify-content: center; align-items: center; font-weight: bold; color: white; } .calendar_month article.infobox .infobox_text a { text-decoration: none; font-weight: bold; } .calendar_month article.infobox .infobox_text { padding: 30px; } .calendar_month article.infobox .bike, .calendar_month article.infobox .bicycle, .calendar_month article.infobox .hike, .calendar_month article.infobox .winterhike, .calendar_month article.infobox .snowshoeing, .calendar_month article.infobox .town { height: 29px; } #user_images_wrapper { width: 100%; display: inline-block; } #user_images_wrapper .user_image { float: left; margin: 0 10px 10px 0; } .modal-body .fileupload { width: 275px; } .modal-body .fileupload .thumbnail { width: 60px; height: 60px; margin-bottom: 0 !important;} .modal-body .fileupload .thumbnailWrapper { float: left; } .modal-body .fileupload .filebtn { width: 195px; float: left; display: block; } .modal-body .fileupload .filebox { width: 275px; height: auto; min-height: 30px; margin-top: 10px; margin-bottom: 5px; } .modal-body .fileupload .legend { width: 275px; margin-top: 0; } .modal-body .fileupload input[type="file"] { margin-bottom: 10px; } .modal-body .fileupload .remove_image label input { margin-top: -5px; margin-right: 5px; } /* overwrite */ .modal-body input[type="password"] { padding: 4px 6px; } /* .modal-body .control-group { position: relative; } .modal-body .fileupload-new, .modal-body .fileupload-preview { width: 60px; height: 60px; top: 15px; left: 0; position: absolute; } .modal-body .fileupload .btn-file { top: 15px; left: 80px; position: absolute; } .modal-body .remove_image { position: absolute; top: 110px; left: 80px; width: 195px; height: 20px; } */ /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * shop * */ #shop_modal.modal { margin: 0; width: 90%; max-width: 400px; left: 50%; transform: translateX(-50%); } #shop_modal.modal input[type="text"], #shop_modal.modal input[type="password"] { width: calc(100% - 15px); } #checkoutform > .modal-body { max-height: 60vh; } .cart-teaser { display: none; padding: 20px; background-color: #006DB1; float: none; margin-bottom: 20px; } .cart-teaser a { display: flex; justify-content: space-between; text-decoration: none; color: white; width: 100%; } .cart-teaser a:hover { color: white; } .cart-teaser .text { display: flex; align-items: center; } .cart-teaser .text p { margin: 0; } .cart-teaser .icon { display: flex; align-items: center; margin-right: 25px; } .cart-teaser .text h2 { margin: 0; line-height: 1; color: white; } .cart-teaser .icon svg { fill: white; } #cart ul { list-style: none; margin: 0; } #cart ul .cart-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } #cart ul .cart-row.total { border-top: 1px solid black; padding-top: 10px; } #cart ul .cart-row .title { width: 65%; display: inline-block; } #cart ul .cart-row .price { width: 25%; display: inline-block; text-align: right; margin-right: 20px; } #cart ul .cart-row .controls { width: 32px; display: flex; justify-content: center; align-items: center; height: 32px; } #cart ul .cart-row .controls .btn { margin: 0 !important; padding: 0 !important; float: none !important; } #cart .rc { width: 6em; } .span10 .row-fluid section#content .bodytext .subscriptions { display: none; justify-content: space-between; margin: 80px 0; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription { display: flex; justify-content: space-between; flex-direction: column; width: 100%; position: relative; margin: 0 4px; } .span10 .row-fluid section#content .bodytext .subscriptions #subscription-type { display: none; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription .info { padding: 25px 15px; height: 100%; box-sizing: border-box; text-align: center; background-color: white; color: #262626; text-shadow: none; white-space: normal; line-height: 18px; border-radius: 5px; font-size: 13px; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription.blue .info { color: white; background-color: #006DB1; margin-top: 0; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription:before { content: ""; position: absolute; left: 0; top: -15px; width: 100%; height: 20px; background-color: white; border-radius: 5px; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription.blue:before { content: ""; position: absolute; left: 0; top: -35px; width: 100%; height: 40px; background-color: #006DB1; border-radius: 5px; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription.single-tour:before { content: none; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription .info h3 { font-size: 24px; margin-bottom: 30px; line-height: 26px; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription .info h4 { font-weight: normal; color: #262626; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription .info p { margin-bottom: 0; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription .info p+p { margin-top: 20px; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription.blue .info h3 { font-size: 26px; color: white; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription.blue .info h4 { color: white; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription .button { transition: box-shadow 600ms ease, background-color 600ms ease, color 600ms ease; background-color: white; padding: 6px 15px 5px 50px; position: relative; border-radius: 5px; margin-top: 10px; display: inline-block; width: 100%; box-sizing: border-box; text-decoration: none; text-transform: uppercase; border: none; font-size: 13px; color: #006DB1; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription .button:hover { color: #006DB1; box-shadow: inset 0 0 0 2px #006DB1; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription.blue .button:hover { background-color: white; color: #006DB1; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription.blue .button:hover svg > g > g { fill: #006DB1; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription .button.loadModal { height: auto; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription .button > svg { position: absolute; width: 17px; height: 15px; top: 14px; left: 18px; fill: #006DB1; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription .button > svg > g > g { fill: #006DB1; transition: fill 600ms ease; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription.blue .button { color: white; background-color: #006DB1; } .span10 .row-fluid section#content .bodytext .subscriptions .subscription.blue .button svg > g > g { fill: white; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * helpful rating * */ .helpful-rating .picto-wrap a { display: flex !important; justify-content: flex-end; align-items: flex-start; } .helpful-rating .picto-wrap .popover { width: 600px; } .helpful-rating .picto-wrap a .picto-box figure.picto { padding-left: 40px; position: relative; border-bottom: 1px #E3E2DC solid; background-position: right; background-size: 40px; background-repeat: no-repeat; height: 40px; width: 40px; } .helpful-rating .picto-wrap a .picto-box { border-left: 1px #E3E2DC solid; } .helpful-rating .picto-wrap a .picto-box figure.picto figcaption { width: 40px; position: absolute; height: 40px; top: 0; left: 0; display: block; text-align: center; line-height: 43px; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * grading * */ #grading-modal .control-group { margin: 0; } #grading-modal select { margin: 0; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * public profil * */ #private_public_profil figure.avatar { margin: 0; position: relative; } #private_public_profil figure.avatar img { width: 100%; border-radius: 50%; } #private_public_profil figure.avatar figcaption { transition: opacity 300ms ease-in-out; position: absolute; left: 0; top: 0; width: 100%; background-image: url("../interface/iconUserEditOverlay.png"); background-repeat: no-repeat; padding-bottom: 100%; border-radius: 50%; background-position: center; background-color: rgba(255, 255, 255, 0.5); opacity: 0; } #private_public_profil figure.avatar.avatar-no-user figcaption { background-image: url("../interface/iconUserNewOverlay.png"); } #private_public_profil figure.avatar figcaption:hover { opacity: 1; } #private_public_profil .leveltext { margin-top: 15px; } .levelbadges { height: auto; width: 100%; display: inline-block; } .levelbadges figure { margin: 0; background-image: url("../interface/iconsLevelBadge.png"); height: 120px; width: 120px; background-size: cover; } .levelbadges figure.level-1 { background-position: 0 0; } .levelbadges figure.level-2 { background-position: 0 -120px; } .levelbadges figure.level-3 { background-position: 0 -240px; } .levelbadges figure.level-4 { background-position: 0 -360px; } .levelbadges figure.level-5 { background-position: 0 -480px; } .levelbadges figure.level-6 { background-position: 0 -600px; } .publish > .levelbadges { width: 13px; } .publish > .levelbadges figure { height: 13px; width: 13px; display: inline-block; } .publish > .levelbadges figure.level-2 { background-position: 0 -13px; } .publish > .levelbadges figure.level-3 { background-position: 0 -26px; } .publish > .levelbadges figure.level-4 { background-position: 0 -39px; } .publish > .levelbadges figure.level-5 { background-position: 0 -52px; } .publish > .levelbadges figure.level-6 { background-position: 0 -65px; } .publish { display: block; width: 100%; } #private_public_profil table tr td { padding: 10px 20px 10px 0 !important; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * hikebook * */ #hikebook .loadModal { z-index: 1; position: absolute; right: 10px; top: 0; width: 145px; height: auto; } #hikebook .loadModal h1, #hikebook .loadModal .h1 { font-size: 28px; } /*.icons figure.comment { background-position: 0 -826px; width: 31px; cursor: pointer; } .icons .iconRight.append.iconLong { width: 61px; } .icons .iconRight.append.iconLong .like { margin-left: 30px; position: relative; } .icons .iconRight.append.iconLong .like > span { position: absolute; left: -31px; top: 0; height: 28px; width: 37px; border-bottom: 1px #E3E2DC solid; border-left: 1px #E3E2DC solid; border-top: 1px #E3E2DC solid; border-right: 1px white solid; font-size: 13px; text-align: center; line-height: 30px; background-color: white; }*/ #hikebook-modal textarea { resize:vertical; height: 150px; } #hikebook-modal button { margin: 0 5px 0 0; } #hikebook-teaser ul { list-style: none; margin: 0; } #hikebook-teaser ul li { position: relative; margin-bottom: 10px; } #hikebook-teaser ul li svg { position: absolute; top: 5px; left: 0; height: 20px; width: 20px; fill: #006DB1; } #hikebook-teaser ul li a { text-decoration: none; display: inline-block; margin-left: 25px; } #hikebook-teaser ul li a:hover h2 { color: #262626; } #hikebook-teaser ul li a:hover svg { fill: #262626; } #hikebook-teaser ul li a h2 { font-size: 18px; line-height: 30px; margin-bottom: 4px; font-weight: bold; } .hikebook-post .picto-wrap a .picto-box figure.picto { padding-left: 40px; position: relative; border-bottom: 1px #E3E2DC solid; background-position: right; background-size: 40px; background-repeat: no-repeat; height: 40px; width: 40px; } .hikebook-post .picto-wrap a .picto-box { border-left: 1px #E3E2DC solid; } .hikebook-post .picto-wrap a .picto-box figure.picto figcaption { width: 40px; position: absolute; height: 39px; top: 0; left: 0; display: block; text-align: center; line-height: 43px; } .hikebook-post .picto-wrap .picto-box.edit-box { border-bottom: 1px #E3E2DC solid; border-left: 1px #E3E2DC solid; } .hikebook-post .picto-wrap .picto-box.comment-box { border-bottom: 1px #E3E2DC solid; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * buttons * */ .rating-box { background: none; border-radius: 7px; background-color: #fff; border: 4px solid #006DB1; box-shadow: 0 0 10px #bfbfbf; width: 150px; height: 115px; float: right; position: relative; padding: 10px 15px; margin-top: 10px; } .rating-box:focus { outline: none; } .rating-box:hover { background-color: #fff; } .rating-box.rated { border-color: #29A152; } .rating-box h1, .rating-box .h1 { margin: 0; font-size: 40px; text-align: left; line-height: 100%; } .rating-box p { margin: 0; width: 100px; font-size: 11px; text-align: left; font-family: 'PT Sans', sans-serif; line-height: 100%; } .rating-box .rating-status { width: 100px; height: 30px; margin-top: 5px; text-decoration: none; font-size: 13px; font-family: 'PT Sans',sans-serif; font-weight: bold; color: #006DB1; background-image: url("../interface/icons/tourcheck.svg"); background-repeat: no-repeat; background-size: 29px; padding-left: 0; text-align: left; padding-left: 35px; line-height: 100%; } .rating-box.rated .rating-status { background-image: url("../interface/icons/tourcheckActive.svg"); color: #009F4D; text-decoration: none; padding-top: 3px; width: 60px; } .rating-box .edit-rating { height: 15px; width: 15px; position: absolute; bottom: 17px; right: 15px; } .rating-box .rating-icon { position: absolute; width: 67px; height: 60px; top: -23px; right: -13px; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * footer * */ .clearDiv { clear: both; height: 140px; padding: 70px 0 0; } footer { width: 100%; height: 100px; display: block; background: #262626; padding: 20px 0; margin: -140px 0 0; } footer .span12 #footerText { color: #EEEDE9; font-size: 12px; } footer .span12 #footerText a { color: white; } footer .span12 #footerText a:hover { color: #8e8e8e; } footer .span12 #footerNav { padding: 5px 0 20px; display: inline-block; } footer .span12 #footerNav ul { margin: 0; } footer .span12 #footerNav li { margin: 0 20px 0 0; list-style: none; display: inline; } footer .span12 #footerNav li a { font-size: 15px; margin-right: 25px; color: #ffffff; font-family: 'PT Sans', serif; font-size: 18px; font-weight: normal; text-decoration: none;} footer .span12 #footerNav li a:hover, footer .span12 #footerNav li.on a { color: #8e8e8e; } footer .span12 #footerIcons { float: right; } footer .span12 #footerIcons a+a { margin-left: 10px; } a.toplink { color: white; margin-right: 10px; text-decoration: none; } a.toplink:hover { color: #8e8e8e; text-decoration: none; } a.icnSocial img { width: 24px; height: 24px; vertical-align: bottom; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * cookie banner * */ #cookie-banner { display: none; position: fixed; bottom: 0; left: 0; right: 0; background-color: #006DB1; color: white; font-size: 12px; line-height: 18px; z-index: 9999999; } #cookie-banner .span10 .text-wrapper { align-items: center; display: flex; height: 60px; } #cookie-banner .span10 p, #cookie-banner .span10 a { margin: 0; color: white; } #cookie-banner .button, #cookie-message .button { transition: box-shadow 200ms ease, background-color 600ms ease, color 600ms ease; box-shadow: inset 0 0 0 1px #006DB1; background-color: white; padding: 10px 30px; text-align: center; position: relative; border-radius: 5px; display: inline-block; width: 100%; box-sizing: border-box; text-decoration: none; text-transform: uppercase; border: none; font-size: 13px; color: #006DB1; cursor: pointer; font-weight: bold; line-height: 18px; } #cookie-banner .button:hover, #cookie-message .button:hover { color: #006DB1; box-shadow: inset 0 0 0 0px #006DB1; } #cookie-banner .close { color: #ffffff; opacity: 1; position: absolute; right: 20px; top: 18px; } .show-on-adblock { display: none; } #adblock-message { background-color: #f89406; color: white; font-size: 12px; line-height: 18px; padding: 20px; } #cookie-message { background-color: #006DB1; color: white; font-size: 12px; line-height: 18px; padding: 20px; } button.tg-fb-share { display: inline-block; /* zoom: 1; */ background-color: #ffffff; /* font-family: Helvetica, Arial, sans-serif; */ /* line-height: 1.28; */ /* font-weight: bold; */ border: 1px solid #006DB1; color: #006DB1; /* cursor: pointer; */ /* font-family: Helvetica, Arial, sans-serif; */ /* -webkit-font-smoothing: antialiased; */ /* margin: 0; */ /* -webkit-user-select: none; */ /* white-space: nowrap; */ border-radius: 4px; font-size: 16px; /* height: 28px; */ /* padding: 0 4px 0 6px; */ margin-bottom: 10px; margin-top: 10px; margin-left: 10px; padding-top: 3px; padding-bottom: 3px; /* line-height: 1; */ /* float: right; */ } button.tg-fb-share span { vertical-align: middle; padding: 0 4px; padding-left: 2px; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * sorting * */ #title h3 { display: inline; flex-grow: 1; line-height: 34px; } .sorting-wrapper { display: flex; margin-top: 0; } #sorting { display: flex; align-items: center; } #sorting form { margin: 0; } #sorting h5 { margin: 0 20px 0 0; } #sorting select { margin: 0; width: auto; } .map-icon { width: 50px; line-height: 1; display: inline-block; float: right; margin-left: 20px; } #sorting .select-wrapper { position: relative; } #sorting .select-wrapper:after { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid black; position: absolute; top: calc(50% - 1px); right: 10px; pointer-events: none; } #sorting select { -webkit-appearance: none; -moz-appearance: none; line-height: 20px; padding-right: 30px; } .mitarbeitende { background: #fff; padding: 20px; margin-top: 30px; } .mitarbeitende .alt-row { display: flex; justify-content: flex-start; align-items: center; } .alt-row + .alt-row { border-top: 1px #7F7F7F solid; } .mitarbeitende .alt-heading { font-weight: bold; margin-bottom: 20px; } .mitarbeitende .alt-row .alt-span3 { width: 23%; margin-right: 2%; margin-left: 0; hyphens: auto; } .mitarbeitende .alt-row .alt-span6 { width: 48%; margin-right: 2%; margin-left: 0; } .mitarbeitende .sortby { padding-right: 20px; position: relative; display: inline-block; } .mitarbeitende .sortby:after { content: ""; position: absolute; top: calc(50% - 3px); right: 0; width: 0; height: 0; } .mitarbeitende .sortby.asc:after { border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #006DB1; } .mitarbeitende .sortby.asc:hover:after { border-bottom: 5px solid #262626; } .mitarbeitende .sortby.desc:after { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #006DB1; } .mitarbeitende .sortby.desc:hover:after { border-top: 5px solid #262626; } .mitarbeitende .levelbadges { display: inline-block; margin-bottom: -4px; width: 30px; } .mitarbeitende .levelbadges figure { width: 20px; height: 20px; } .mitarbeitende .levelbadges figure.level-1 { background-position: 0 0; } .mitarbeitende .levelbadges figure.level-2 { background-position: 0 -20px; } .mitarbeitende .levelbadges figure.level-3 { background-position: 0 -40px; } .mitarbeitende .levelbadges figure.level-4 { background-position: 0 -60px; } .mitarbeitende .levelbadges figure.level-5 { background-position: 0 -80px; } .mitarbeitende .levelbadges figure.level-6 { background-position: 0 -100px; } .load-helpful-modal { opacity: 0; } .helpfulRatings { font-size: 14px; } #blue-box { display: block; padding: 20px; background-color: #e6eff5; border: 2px solid #006DB1; border-radius: 10px; margin-bottom: 30px; } #tour-messages { display: block; padding: 20px; background-color: #d5ffd7; border: 2px solid #25a351; border-radius: 10px; margin-bottom: 30px; } #tour-messages ul { margin: 0; } #tour-messages ul > li { list-style: none; position: relative; padding-left: 40px; } #tour-messages ul > li:before { content: ""; position: absolute; background-image: url("../interface/icon_tourcheck_green.png"); background-position: center center; background-repeat: no-repeat; width: 32px; height: 32px; top: 0; left: 0; background-size: cover; } #tour-messages ul > li.notok:before { background-image: url("../interface/icon_tourcheck_notok.png"); } #tour-messages ul > li.info:before { background-image: url("../interface/icon_tourcheck_info.png"); } #tour-messages ul > li + li { margin-top: 10px; } #tour-messages ul li p { margin-bottom: 0; color: #25a351; line-height: 2; font-weight: bold; } #tour-messages ul li.notok p { color: #ff0000; } #tour-messages ul li.info p { color: #0079C0; } #grey_checkmarks { display: block; padding: 0px; /* background-color: #ffffff; */ /* border: 2px solid #25a351; */ /* border-radius: 10px; */ margin-bottom: 30px; } #grey_checkmarks ul { margin: 0; } #grey_checkmarks ul > li { list-style: none; position: relative; padding-left: 40px; } #grey_checkmarks ul > li:before { content: ""; position: absolute; background-image: url("../interface/icon_checkmark_grey.png"); background-position: center center; background-repeat: no-repeat; width: 25px; height: 25px; top: 5px; left: 0; background-size: cover; } #grey_checkmarks ul > li + li { margin-top: 10px; } #grey_checkmarks ul li p { margin-bottom: 0; color: #4f4f4f; line-height: 2; font-weight: normal; } .made-facebookpost { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ffffffed; justify-content: center; align-items: center; display: none; } /* * * ////////////////////////////////////////////////////////////////////////////////////////////////////// * * challenge * */ .challenge-ranking .ranking-table { display: grid; grid-template-columns: 3fr 10fr 5fr 3fr; grid-row: auto; grid-gap: 1px; background-color: #ffffff; } .challenge-ranking .ranking-table.header { font-weight: bold; background-color: #7F7F7F; color: #ffffff; } .challenge-ranking .ranking-table .col { padding: 5px 10px; display: flex; align-items: center; min-height: 50px; } .challenge-ranking .ranking-table .badge-image { width: 60px; } .table-profile { width: 100%; } .challenges-list-profile { width: 100%; } .challenges-list-profile .badge-image { width: 140px; padding: 10px; } .ac-widget { z-index: 9999; background-color: white; } #cboxTitle { font-size: 12px; margin-bottom: 10px; top: -26px; }