stattbuchung_php_open/style/srhb.css

1164 lines
20 KiB
CSS

/*
Created on : 16.09.2015, 12:14:36
Author : Oliver Stradins
*/
@import url(https://fonts.googleapis.com/css?family=Dosis:400,500,600);
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-size: 100%;
background-color: #fff;
-webkit-text-size-adjust: none;
}
img {
border: none;
width: 100%;
max-width: 100%;
height: auto;
}
a {
text-decoration: none;
color: #e40083;
transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
}
a:hover {
text-decoration: underline;
}
div, img, a {
display: block;
}
p {
margin: 0 0 1.35em;
font-size: 1.125em;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
p:last-child {
margin-bottom: 0;
}
p a {
display: inline-block;
}
p strong {
font-weight: 600;
}
p em {
font-style: normal;
white-space: nowrap;
}
input.powermail_input, input.powermail_date, input.powermail_submit, select, textarea, .content-box .csc-uploads ul, .tx-tw-tourguide .input-wrapper input, .tx-tw-tourguide .input-wrapper select, .tour-submit, .filter-submit {
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
-webkit-border-radius: 0;
border-radius: 0;
font-family: Dosis, serif;
font-weight: 400;
line-height: 1.5;
font-size: .75em;
border: none;
background-color: transparent;
}
.clear {
clear: both;
}
.viewport {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
#navigation ul, #footer ul, #banner ul {
list-style: none;
margin: 0;
padding: 0;
}
/* CSS Sprite */
.touchnav-trigger, #Cat_right_Header span, .info_icon, #id-12 .content-left .inner p, #cart a, .cal_table_tourbook a, .Cal_right_table th span {
background-image: url('/tm/nfbg/fileadmin/templates/images/stattreisen-sprite.svg');
background-color: transparent;
background-repeat: no-repeat;
}
/* H-Tags */
h1, h2, h3, h4 {
margin: 0 0 1em;
font-size: 1em;
font-weight: 600;
text-transform: uppercase;
line-height: 1.25;
letter-spacing: 0.05em;
}
.content-box h2 {
margin-top: 2em;
}
#id-76 h2 {
margin-bottom: 0.25em;
}
/* Main Wrapper */
#outer-wrapper {
min-height: 100%;
position: relative;
font-family: Dosis, serif;
font-weight: 400;
line-height: 1.35;
overflow: hidden;
letter-spacing: 0.025em;
color: #000;
padding: 3em 0;
}
#inner-wrapper {
overflow: hidden;
padding-bottom: 20em;
position: relative;
}
/* Logo */
#logo {
margin: 0 auto;
width: 5.25em;
z-index: 3;
background-color: #fff;
}
/* Newsbox */
.newsbox {
background-color: #e5e5e5;
cursor: default;
margin: 0 0.4em 0.25em;
padding: 0.5em 0.5em 0.5em 0.75em;
position: relative;
}
.newsbox.open {
background-color: #e5e5e5;
border-color: #fff;
}
.newsbox .info {
float: left;
margin-left: 1em;
}
.newsbox ul {
list-style: none;
margin: 0.85em 0 0;
padding: 0;
font-size: 0.875em;
}
.newsbox li {
margin: 0.25em 1em 0.5em 0;
font-weight: 500;
color: #e40083;
}
.newsbox-trigger {
background-color: #cbd400;
color: #fff;
float: left;
font-size: 2.25em;
font-weight: 600;
height: 1.15em;
line-height: 1.15;
text-align: center;
width: 1.15em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
/* Warenkorb Link */
#cart {
display: inline-block;
vertical-align: middle;
}
#cart a {
width: 40px;
height: 35px;
background-position: -205px 6px;
text-indent: 9999px;
overflow: hidden;
}
#navigation .cart-link {
display: none;
}
/* Navigation */
#navigation {
text-align: center;
margin: 0.75em 0 1.75em;
}
#navigation li {
display: inline-block;
}
#navigation a {
color: #000;
text-transform: uppercase;
font-size: 1.125em;
font-weight: 500;
padding: .25em;
line-height: 2;
margin: 0 0.75em;
letter-spacing: 0.1em;
}
#navigation a:hover, #navigation .act a {
color: #e40083;
text-decoration: none;
}
#subnav-block {
display: none;
}
/* Content */
#content-wrapper {
margin: 0 auto;
max-width: 1000px;
}
.content-left {
float: left;
width: 33%;
}
.content-right {
float: right;
width: 65%;
}
.content-left .header, .content-right .header {
background-color: #e40083;
height: 3.5em;
margin-bottom: 1.75em;
position: relative;
}
.content-left .inner, .content-right .inner, #Cat_left .inner {
padding: 0 1.25em;
}
#id-12 .content-right .inner, #id-10 .content-right .inner, #id-69 .content-right .inner, #id-73 .content-right .inner {
padding: 0;
}
.content-left .header h3 {
bottom: 0.6em;
color: #fff;
font-size: 1.125em;
font-weight: 400;
left: 1em;
margin: 0;
position: absolute;
text-transform: uppercase;
}
.content-right .header h1 {
bottom: 0.3em;
color: #fff;
font-size: 1.75em;
font-weight: 400;
left: 0.65em;
margin: 0;
position: absolute;
text-transform: uppercase;
}
.content-right .cols2 {
column-count: 2;
column-gap: 1em;
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap : 1em;
column-rule-width: 0;
-moz-column-rule-width: 0;
-webkit-column-rule-width: 0;
-moz-column-fill: balance;
column-fill: balance;
overflow: hidden;
}
.content-right .cols2 p, .content-right .cols2 .csc-textpic {
/*-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
break-inside: avoid;
display: inline-block;*/
width: 100%;
}
.content-right .cols2 .csc-textpic {
margin-bottom: 1.35em;
}
#id-11 .content-right .cols2 .csc-textpic {
border: 1px solid #000;
}
.content-left .inner ul {
padding-left: 1.25em;
margin: -1em 0 0;
font-size: 1.125em;
}
/* Banner */
#banner {
background-color: #e5e5e5;
margin-bottom: 3em;
position: relative;
}
#id-15 #banner {
display: none;
}
#banner h2 {
background-color: rgba(229,0,131,0.8);
bottom: 18%;
color: #fff;
cursor: default;
font-size: 2.25em;
font-weight: 500;
left: 3%;
letter-spacing: 0.12em;
line-height: 1;
margin: 0;
padding: 0.5em;
position: absolute;
text-transform: uppercase;
z-index: 2;
}
#banner .mobile {
display: none;
}
/* Start Kacheln */
.start-tiles {
margin-right: -1%;
}
.start-tiles .item, .grid-sizer {
float: left;
width: 33%;
}
.start-tiles .item.double {
width: 66%;
}
.start-tiles .item.full, .start-tiles .item.big {
width: 99%;
}
.start-tiles .item.special h2 {
background-color: transparent;
top: 27% !important;
left: 0 !important;
right: 0 !important;
bottom: inherit !important;
text-align: center;
font-size: 1.75em !important;
}
.start-tiles .item.special .image {
display: none;
}
.start-tiles .item.special.color-1 .inner {
background-color: #cbd400;
}
.start-tiles .item.special .inner a:hover {
text-decoration: none;
}
.start-tiles .item .bumper {
padding: .4em;
}
.start-tiles .item .inner {
padding-bottom: 100%;
position: relative;
overflow: hidden;
}
.start-tiles .item.double .inner {
padding-bottom: 49%;
}
.start-tiles .item.full .inner {
padding-bottom: 32.4%;
}
.start-tiles .item.big .inner {
padding-bottom: 53.5%;
}
.start-tiles .item h2 {
position: absolute;
background-color: rgba(229,0,131,0.6);
padding: 0.5em 0.75em;
color: #fff;
text-transform: uppercase;
z-index: 2;
font-size: 0.9375em;
font-weight: 500;
letter-spacing: 0.12em;
margin: 0;
}
.start-tiles .item .image {
position: absolute;
z-index: 1;
}
.start-tiles .item .image .mobile {
display: none;
}
/* Tour Extension */
#jump-menu {
text-align: center;
margin-bottom: 4em;
}
#jump-menu select {
background-color: #f6d0e2;
color: #000;
font-size: 0.85em;
width: 16em;
margin-right: 1em;
padding: 0.35em 0.75em;
display: inline-block;
}
#jump-menu option {
background-color: #fff;
}
/* Tipps */
.tipp-item {
padding-bottom: 3em;
}
.tipp-item .image {
margin-bottom: 1em;
}
.tipp-item h2 {
color: #e40083;
font-size: 1.75em;
font-weight: 400;
letter-spacing: 0.01em;
line-height: 1;
margin-bottom: 0.25em;
}
.tipp-item h4 {
color: #e40083;
font-size: 1.125em;
font-weight: 400;
margin-bottom: 0;
}
/* Kundenmeinungen */
.tx-os-opinions .content-right .inner {
padding: 1em 1.25em;
background-color: #edeeef;
}
.tx-os-opinions .content-right .inner p {
font-size: 1.5em;
margin-bottom: 0.25em;
}
.tx-os-opinions .content-right .inner h2 {
font-size: 1.5em;
text-transform: uppercase;
margin: 0;
color: #e40083;
}
.opinion-item {
padding-bottom: 3em;
}
/* Linke Spalte Link */
#Cat_left p a strong {
background-color: #cbd400;
color: #fff;
font-weight: 400;
padding: 0.25em 1em;
text-transform: uppercase;
transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-webkit-transition: background 0.2s linear;
border: none;
}
#Cat_left p a strong:hover {
background: #b7bf00;
}
#Cat_left p a:hover {
text-decoration: none;
}
.Cat_left_infobox select {
background-color: #d9d9d9;
margin-bottom: 1em;
padding: 0.75em 1em;
width: 100%;
font-size: 1em;
}
.filter-submit, .filter-reset {
background-color: #cbd400;
color: #fff;
font-size: 1em;
height: 1.5em;
text-transform: uppercase;
}
.filter-submit {
padding: 0.25em 1em 1.9em;
cursor: pointer;
}
.filter-reset {
display: inline-block;
line-height: 1.5;
margin-left: 1em;
padding: 0.3em 1em;
}
/* Kontakt */
.tx-powermail h3, .tx-powermail legend {
display: none;
}
.tx-powermail fieldset {
border: none;
padding: 0;
margin: 0;
clear: both;
}
.tx-powermail label, .tx-powermail .powermail_fieldwrap_input input, .tx-powermail .powermail_fieldwrap_check legend, .tx-powermail .powermail_fieldwrap_textarea textarea, .powermail_fieldwrap_submit input, .tx-powermail .powermail_fieldwrap_typoscript select, .tx-powermail .powermail_fieldwrap_select select, .tx-powermail .powermail_fieldwrap_date input, .tx-tw-tourguide .label-wrapper label, .tx-tw-tourguide .input-wrapper input, .tx-tw-tourguide .input-wrapper select, .tx-tw-tourguide .input-wrapper .input-bumper, .tour-submit {
font-size: 1.125em;
margin: 0.25em auto;
width: 90%;
line-height: 1.5;
display: block;
border: none;
padding: 0;
}
.tx-powermail .powermail_fieldwrap_date input {
height: 1.5em;
}
.tx-powermail label {
width: 80%;
}
.powermail_fieldwrap_submit input, .tour-submit {
width: auto;
background-color: #cbd400;
color: #fff;
padding: 0.25em 1em;
margin: 0.25em 0 0.25em 20%;
cursor: pointer;
transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-webkit-transition: background 0.2s linear;
}
.powermail_fieldwrap_submit input:hover, .tour-submit:hover {
background: #b7bf00;
}
#id-69 .powermail_fieldwrap_submit input, #id-73 .powermail_fieldwrap_submit input {
margin-left: 35%;
}
.tour-submit {
padding: 0.75em 2em;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
margin-left: 35%;
}
.tx-powermail .label-wrapper, .tx-tw-tourguide .label-wrapper {
background-color: #e40083;
width: 20%;
float: left;
clear: both;
color: #fff;
font-weight: 400;
text-transform: uppercase;
margin-bottom: 0.5em;
}
.tx-tw-tourguide .label-wrapper, #id-69 .tx-powermail .label-wrapper, #id-73 .tx-powermail .label-wrapper {
width: 35%;
}
.tx-tw-tourguide .label-wrapper {
margin-bottom: 1.25em;
}
.tx-tw-tourguide .label-wrapper.special-label {
background-color: #e5e5e5;
color: #000;
}
.tx-powermail .input-wrapper, .tx-tw-tourguide .input-wrapper {
background-color: #e5e5e5;
width: 80%;
float: left;
margin-bottom: 0.5em;
}
.tx-tw-tourguide .input-wrapper, #id-69 .tx-powermail .input-wrapper, #id-73 .tx-powermail .input-wrapper {
width: 65%;
}
.tx-tw-tourguide .input-wrapper {
margin-bottom: 1.25em;
}
.tx-tw-tourguide .input-wrapper.no-text, .tx-tw-tourguide .input-wrapper.no-text input {
cursor: default;
}
.tx-powermail .powermail_fieldwrap_input input, .powermail_check_outer, .tx-powermail .powermail_fieldwrap_textarea textarea, .tx-powermail .powermail_fieldwrap_typoscript select, .tx-powermail .powermail_fieldwrap_select select, .tx-tw-tourguide .input-wrapper input, .tx-tw-tourguide .input-wrapper select {
background-color: transparent;
}
.powermail_fieldwrap.powermail_fieldwrap_typoscript.powermail_fieldwrap_16 {
clear: both;
}
.tx-powermail .powermail_fieldwrap_textarea textarea {
margin-top: 0;
max-height: 24em;
min-height: 12em;
resize: vertical;
}
.tx-powermail .powermail_fieldwrap_check legend {
display: inherit;
}
.powermail_check_outer {
background-color: transparent;
width: 70%;
margin-bottom: 0.5em;
}
.tx-powermail .powermail_fieldwrap_check label {
float: none;
background-color: transparent;
color: inherit;
font-weight: 400;
padding-left: 0;
display: inline-block;
width: auto;
}
.powermail_checkbox {
display: inline-block;
margin-left: 2em;
}
#id-12 .content-left .inner {
background-color: #e5e5e5;
padding-top: 1em;
padding-bottom: 1em;
text-transform: uppercase;
}
#id-12 .content-left .inner strong {
color: #e40083;
display: inline-block;
padding-bottom: 0.25em;
}
#id-12 .content-left .inner p {
line-height: 1.15;
padding-left: 2.5em;
padding-top: 0.25em;
font-size: 0.875em;
background-position: -770px -350px;
min-height: 27px;
}
#id-12 .content-left .inner p:nth-child(2) {
background-position: -770px -430px;
}
#id-12 .content-left .inner p:nth-child(3) {
background-position: -770px -510px;
}
#id-12 .content-left .inner p:nth-child(4) {
background-position: -770px -590px;
}
/* Footer */
#footer-wrapper {
background-color: #e5e5e5;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1em 0;
z-index: 0;
font-weight: 500;
text-transform: uppercase;
cursor: default;
}
#footer {
max-width: 1000px;
}
#footer a {
color: #000;
text-transform: uppercase;
font-size: .75em;
}
#footer h4 {
color: #e40083;
font-size: .75em;
}
#footer .footer-info {
font-size: .75em;
}
.footer-col {
float: left;
vertical-align: top;
}
.legal-nav{
margin-top: 1em !important;
margin-bottom: 0.75em !important;
}
.sigel {
margin-top: 1em;
width: 132px;
}
.fb-icon img {
width: 34px;
height: 34px;
}
@media screen and (max-width: 1180px) {
body {
font-size: 90%;
}
.viewport {
max-width: none;
}
/* Navigation */
#navigation a {
margin: 0 0.25em;
}
/* Content */
#content-wrapper {
max-width: 96%;
}
/* Tour Detail */
#Cat_right_info {
padding: 1em 1.25em !important;
}
/* Footer */
#footer {
width: 94%;
}
}
@media screen and (max-width: 980px) {
#Cat_right_info {
font-size: 1em !important;
}
}
@media screen and (max-width: 900px) {
#outer-wrapper {
padding-bottom: 0;
}
#inner-wrapper {
padding-bottom: 8em;
}
/* Footer */
#footer-wrapper {
position: static;
}
.footer-col {
width: 50%;
}
.mobile-col {
float: left;
width: 66.66666666666666666666666666666666666666667%
}
#footer-col-3, #footer-col-4 {
padding-top: 2em;
}
#footer-col-5 {
float: right;
width: 33.33333333333333333333333333333333333333333%;
}
}
@media screen and (max-width: 750px) {
#outer-wrapper {
padding: 0 0 0;
}
/* Logo */
#logo {
left: 0;
position: fixed;
top: 0;
}
/* Jump Menu */
#jump-menu {
display: none;
}
/* Navigation */
#navigation {
position: fixed;
width: 60%;
top: 0;
right: 0;
display: none;
margin: 0;
overflow-x: hidden;
overflow-y: scroll;
text-align: left;
background-color: #e40083;
z-index: 3;
}
#navigation li {
display: block;
}
#navigation a {
color: #fff;
border-top: 1px solid #fff;
margin: 0;
padding: 0.25em 0.5em;
font-size: 1.5em;
}
#navigation a:hover {
color: #fff;
}
#navigation .act a {
color: #000;
}
#navigation ul#nav-block {
padding-top: 4em;
}
#subnav-block {
display: block;
}
.touchnav-trigger {
width: 5em;
height: 5em;
position: fixed;
top: 0;
right: 0;
background-color: transparent;
background-position: 16px 20px;
z-index: 3;
}
.touchnav-trigger.close {
z-index: 4;
background-position: -88px 17px;
background-color: transparent;
width: 3.55em;
height: 4.05em;
}
#navigation .cart-link {
display: inherit;
}
/* Banner */
#banner h2 {
bottom: 8%;
left: 0;
}
/* Newsbox */
.newsbox {
margin: 0 0 1em;
padding-top: 6em;
}
/* Content */
#content-wrapper {
max-width: 100%;
}
}
@media screen and (max-width: 680px) {
.tx-powermail .label-wrapper {
width: 30%;
}
.tx-powermail .input-wrapper {
width: 70%;
}
/* Banner */
#banner .desktop {
display: none;
}
#banner .mobile {
display: inherit;
}
}
@media screen and (max-width: 640px) {
/* Footer */
.footer-col {
width: 100%;
}
.mobile-col, #footer-col-5 {
width: 50%
}
#footer-col-2 {
padding-top: 2em;
}
}
@media screen and (max-width: 540px) {
/* Content */
.content-left, .content-right, #Cat_left, #Cat_right {
float: none !important;
width: auto !important;
margin-bottom: 2em;
}
.content-left .header, .content-right .header {
height: auto;
}
.content-right .header h1 {
padding: 0.25em 0.5em;
position: static;
}
.content-left .header h3 {
padding: 0.75em;
position: static;
}
/* Banner */
#banner h2 {
font-size: 1.75em;
}
/* Startkacheln */
.start-tiles .item .image .mobile {
display: inherit;
}
.start-tiles .item .image .desktop {
display: none;
}
.start-tiles .item, .grid-sizer, .start-tiles .item.double, .start-tiles .item.full, .start-tiles .item.big {
float: none;
width: 100%;
margin-bottom: 1em;
}
.grid-sizer {
display: none;
margin-bottom: 0;
}
.start-tiles .item .bumper {
padding: 0;
}
.start-tiles .item .inner, .start-tiles .item.double .inner, .start-tiles .item.big .inner {
padding-bottom: 0;
}
.start-tiles .item .image {
position: static;
}
.start-tiles .item h2 {
bottom: 12% !important;
left: 0 !important;
right: inherit !important;
top: inherit !important;
}
.start-tiles {
margin-right: 0;
}
.start-tiles .item.special h2 {
padding: 3em 0;
position: static;
}
}
@media screen and (max-width: 480px) {
/* Navigation */
#navigation {
left: 0;
top: 0;
right: 0;
width: auto;
}
.touchnav-trigger.close {
right: inherit;
left: 0;
}
/* Banner */
#banner h2 {
font-size: 1.5em;
}
/* Content */
.content-right .cols2 {
column-count: 1;
-moz-column-count: 1;
-webkit-column-count: 1;
}
}
@media screen and (max-width: 340px) {
/* Banner */
#banner h2 {
font-size: 1.25em;
}
}