/* Theme Name: Weltkarte Theme URI: Description: twentysixteen Child Theme Author: Max Eichner Author URI: http://www.o8design.de Template: twentysixteen Version: 1.0.0 */ /* =Theme customization starts here -------------------------------------------------------------- */ /* red red #e10716; red:hover #b70612; rose tablePRess #f8c5d8 sidebar margin-left:26px; content: width: 513px; */ @import url(../twentysixteen/style.css); @import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,300,400italic,300italic,700italic,700); :root { --text-color: black; --hilite-color: red; --hilite-color2: #b40000; --hilite-colorh: #d10000; --hilite-color2h: #940000; --head-color: black; --bg-header-col: rgb(0,0,0,0.0); --bg-layer-col: rgb(63,66,72,1.0); --xxxbg-layer-col: rgb(49,53,0,1.0); --dst: -1px; } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(iconfont/MaterialIcons-Regular.woff) format('woff'), url(iconfont/MaterialIcons-Regular.ttf) format('truetype'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } .material-icons.button {position: absolute; font-size: 5.5em; z-index: 5; color: white; cursor: pointer; left: calc(50% - 8px); top: 50%; transform: scale(0.8) translate(-50%, -50%);} i.material-icons.button.close {left: 0; top: 100px; transform: none; background: #1c1c1c; margin-left: -100px; height: 100px; width: 100px; font-size: 6.2em; box-shadow: -12px -12px 20px rgba(0,0,0,0.2);} .hidden i.material-icons.button.close {margin-left: 0; left: auto; right: 0; top:0;} .black {background-color: black;} .widget {border:0;} .audio .material-icons.button {transform: scale(1) translate(-50%, -50%);} .audioimg .material-icons.button {transform: scale(0.5); left:-20px; top: -20px;} html, body {height: 100%; margin: 0; padding: 0; font-size: 1em;} body {background: #31353b; color:#aaa; overflow-x:hidden;} body:not(.custom-background-image)::before, body:not(.custom-background-image)::after {height: 0} * {font-family: "Titillium Web"; line-height: 1.2} p {font-size: 1.2rem;} .storycontainer p {font-size: inherit} .fs8 .storycontainer p, .fs8 .storycontainer h3 {font-size: 0.8rem} .fs10 .storycontainer p, .fs10 .storycontainer h3 {font-size: 1.0rem} .fs12 .storycontainer p, .fs12 .storycontainer h3 {font-size: 1.2rem} .fs14 .storycontainer p, .fs14 .storycontainer h3 {font-size: 1.4rem} .fs16 .storycontainer p, .fs16 .storycontainer h3 {font-size: 1.6rem} .fs18 .storycontainer p, .fs18 .storycontainer h3 {font-size: 1.8rem} .fs20 .storycontainer p, .fs20 .storycontainer h3 {font-size: 2.0rem} .fs22 .storycontainer p, .fs22 .storycontainer h3 {font-size: 2.2rem} .fs24 .storycontainer p, .fs24 .storycontainer h3 {font-size: 2.4rem} .fs26 .storycontainer p, .fs26 .storycontainer h3 {font-size: 2.6rem} .fs28 .storycontainer p, .fs28 .storycontainer h3 {font-size: 2.8rem} .fs30 .storycontainer p, .fs30 .storycontainer h3 {font-size: 3.0rem} .fs8 .map .gm-style-iw .map_layer p {font-size: 0.9rem} .fs10 .map .gm-style-iw .map_layer p {font-size: 0.9rem} .fs12 .map .gm-style-iw .map_layer p {font-size: 0.9rem} .fs14 .map .gm-style-iw .map_layer p {font-size: 1.0rem} .fs16 .map .gm-style-iw .map_layer p {font-size: 1.1rem} .fs18 .map .gm-style-iw .map_layer p {font-size: 1.2rem} .fs20 .map .gm-style-iw .map_layer p {font-size: 1.3rem} .fs22 .map .gm-style-iw .map_layer p {font-size: 1.3rem} .fs24 .map .gm-style-iw .map_layer p {font-size: 1.3rem} .fs26 .map .gm-style-iw .map_layer p {font-size: 1.3rem} .fs28 .map .gm-style-iw .map_layer p {font-size: 1.3rem} .fs30 .map .gm-style-iw .map_layer p {font-size: 1.3rem} .fs32 .map .gm-style-iw .map_layer p {font-size: 1.3rem} .page-kontakt p {font-size: 1.8rem !important;} .site-header {padding: 20px 0;} .test {display: none; position: absolute; width: 100%px; height: 200px; background: yellow; border: 1px solid yellow; z-index: 10000; left. 0; top: 0; overflow: auto; scrollbar-color: red cyan; scrollbar-width: default; } #story {position: absolute; right:0px; top:42px; width:0%; height: calc(100% - 41px); background: rgba(0,0,0,0.7); border-left:0px solid black; z-index: 10; padding: 0px; color: white; opacity: 0; transition: opacity 1.5s; box-shadow: -12px -12px 20px rgba(0,0,0,0.2);} .grid {position: relative; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; background-size: cover !important;} .grid div {width: 3.33333333%; background: transparent; height: calc(20% - var(--dst)); float: left; z-index: 3; position: relative; overflow:hidden; user-select: none;} .grid .d12 {width: calc(8.33333333% - var(--dst))} .grid .d8 {width: calc(12,5% - var(--dst))} .grid .d6 {width: calc(16.66666666% - var(--dst))} .grid .d5 {width: calc(20% - var(--dst))} .grid .d4 {width: calc(25% - var(--dst))} .grid .d3 {width: calc(33.33333333% - var(--dst))} .grid .d2 {width: calc(50% - var(--dst))} .grid .d1 {width: calc(100% - var(--dst))} /* fuer Overlays */ div.o1 {width: calc(100% - var(--dst))} div.o2 {width: calc(50% - var(--dst))} div.o3 {width: calc(33.33333333% - var(--dst))} div.o4 {width: calc(25% - var(--dst))} div.o5 {width: calc(20% - var(--dst))} div.o6 {width: calc(16.66666666% - var(--dst))} div.o8 {width: calc(12.5% - var(--dst))} div.o10 {width: calc(10% - var(--dst))} div.o12 {width: calc(8.33333333% - var(--dst))} div.h1 {height: calc(20% - var(--dst))} div.h2 {height: calc(40% - var(--dst))} div.h3 {height: calc(60% - var(--dst))} div.h4 {height: calc(80% - var(--dst))} div.h5 {height: calc(100% - var(--dst))} /* .grid {border-top: 1px solid black;} .grid div {border-right: 1px solid rgba(0,0,0, 1); border-bottom: 1px solid rgba(0,0,0, 1); } .grid {height:500px;} .grid .overlay {float: none; position: absolute; text-align: center; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: 100; padding: 0px;} .grid .overlay2 {left: 33.33333%} .grid .overlay1 {height: 25%} .grid .overlay3 {height: 25%; left:16.666%; top: 25%;} .grid .overlay4 {background-color: #222; height: auto; right:0; text-align: left; height: 100%;} .grid .overlay5 {height: 25%; left:16.666%;} .grid .overlay6 {height: 25%; left:33.33333%; top:75%} .grid .overlay7 {height: 25%; left:0%; top:25%} .grid .overlay8 {height: 25%; left:16.666%; top:75%} */ .grid {border-top: 1px solid black;} .grid div {border: 1px solid black; margin: -1px 0 0 -1px;} .grid {height:500px;} /* .grid .overlay2 {left: 33.33333%} .grid .overlay1 {height: 20%} .grid .overlay3 {height: 20%; left:16.666%; top: 20%;} .grid .overlay5 {height: 20%; left:16.666%;} .grid .overlay6 {height: 20%; left:33.33333%; top:60%} .grid .overlay7 {height: 20%; left:0%; top:20%} .grid .overlay8 {height: 20%; left:16.666%; top:60%} */ .grid .overlay-wrapper {position: absolute; top:0; left:0; width:100%; height: 100%; z-index: 4; float: none; border:0; margin:0;} .grid .overlay {float: left; position: relative; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: 100; cursor: pointer; border: 1px solid black; margin:-1px 0 0 -1px; } .grid .overlayS {width: 41.666666%; background-color: #1c1c1c; height: auto; right:0; text-align: left; height: 100%; margin-left: 0; border-left: transparent;} .grid .overlayS {scrollbar-color: #444 #1c1c1c; scrollbar-width: default;} .grid .overlayS h3 {color: #6a6a6a;} .grid h1 {color: white; font-size: 200%; font-weight: normal; margin: 40px 0 20px 0;} .grid .overlay video {height:100%; width: 100%; background: black; pointer-events: none;} .grid .storycontainer {width:100%; height: 100%; padding:30px; overflow: auto; float: none; border:0; margin:0; font-size: 1.3rem; color: #fff;} .grid .storycontainer h2 {font-size: 100%; color: red; font-weight: normal;} .grid .storycontainer h3 {color: #888; font-weight: normal;} .grid .overlay .audiowrap {height: 100%; width: 100%; background: #151515; position: absolute; border:0; margin:0;} .grid .overlay audio {width: 100%; transition: all 2s; opacity: 0; width: 100%; } .grid .overlay:hover audio {opacity: 1;} .grid i.material-icons {} .grid .caption {opacity: 0; color: white; background: black; transition: all 1s; bottom: 0; position: absolute; margin: 0; padding: 5px; text-align: left; z-index: 3; font-size: 0.8em; pointer-events: none;} .grid .video .caption {top: 0; bottom: auto;} .grid .overlay:hover .caption {opacity: 1} .grid .overlay:after {content: ""; position: absolute; top:0; left:0; width: 100%; height: 100%; background: transparent; pointer-events: none;} .grid .overlay:hover:after {background: rgba(0,0,0,0.2); transition: all 1s;} .logocontainer {display: none; position: absolute; pointer-events: none; right: 10px; bottom: 90px; z-index: 9; border: 1px solid black; padding: 15px; background: rgba(255,255,255,1); background:;} .logocontainer div {float: left; box-sizing: content-box;} .logocontainer .krawatte {width: 80px; padding-left: 20px;} .logocontainer .region {width: 80px; padding-right: 20px;} .logocontainer .divider {width: 1px; border-right: 1px dotted #000; height: 40px; top: 5px; position: relative;} .logocontainer img {width: 100%} .page-map .logocontainer {display: block;} .grid .overlay.audio.audioimg .audiowrap {background: rgba(0,0,0,0.1);} .slide video {width: 100%; height:100%;} .slide audio {width: 100%; height:100%; bottom: 0; position: absolute;} #story.full {width: 0%; opacity: 0;} #story.half {width: 50%; opacity: 1;} #story.third {width: 75%; opacity: 1;} #story.hidden {width: 100%;} /* hidden = map hidden */ #map.full {width: 100%;} #story.full .button.close {display: none} /* #map.third h1 {display: none;} #map.third h2 {display: none; font-size: 1em} #map.third .date-begin, #map.third .date-end {display: none;} #map.hidden h1, #map.hidden h2, #map.hidden .date-begin, #map.hidden .date-end {display: none;} */ body .owl-carousel, body .owl-carousel .owl-stage-outer, body .owl-carousel .owl-item, body .owl-carousel .owl-stage, body .owl-carousel .grid {height:100% !important} body .owl-carousel {position: relative; box-sizing: content-box; width: 100%; height: 100% !important;} body .owl-carousel .owl-nav {position: absolute; top: 0%; left: 0px; height: 100%; width: 100%; pointer-events: none;} body .owl-carousel .owl-nav button.owl-next, body .owl-carousel .owl-nav button.owl-prev {font-size: 130px !important; height: 20%; border:0px solid red; width:50px; padding: 0px !important; background: rgba(255,255,255,0.0 ); margin: 0px; position: absolute; pointer-events: auto; display: none;} body .owl-carousel .owl-nav button.owl-next {right: 0; } body .owl-carousel .owl-nav button span {line-height: 0 !important; top: -15px !important; position: relative; color: rgba(0,0,0,1);} body .owl-carousel .owl-dots {position: absolute; left:20px; z-index: 100; width: 8%; xxxborder:1px solid black;} body .owl-carousel .owl-dots button {border-radius: 10px !important; background: #009c7e; width: 8px; height: 8px; margin: 0 0 0 8px; position: relative;} body .owl-carousel .owl-dots button.active {background: black;} .aa_loginForm a {color: #9ce7ff;} .page-dateneingabe h2, .page-stories h2 {margin-bottom: 0;} .fa {color: #aaa; text-decoration:none;} .entry-content a, .entry-summary a, .taxonomy-description a, .logged-in-as a, .comment-content a, .pingback .comment-body > a, .textwidget a, .entry-footer a:hover, .site-info a:hover, .post-list-tab-nav a {box-shadow: none !important; color:#aaa;} h1.entry-title {margin-bottom: 0.5em; margin-top: 30px; font-size: 3em; color: red;} .entry-content h2 {margin-top: 2em;} .entry-content h2.toggle {background: url(images/arrow-right.png) 0px 0.5rem no-repeat;margin-top:1em; margin-bottom: 1em; margin-left: -20px; padding-left: 20px; cursor:pointer; } .entry-content h2.toggle.open {background: url(images/arrow-down.png) 0px 0.5rem no-repeat;} .site {margin: 0px; background:none; border:1px solid rgba(0,0,0,0.3);} .map {width: 100%; height: 100%; transition: opacity 5s; transition-delay: 3s; z-index: 1;} .map .gm-style {z-index: auto !important;} .map .gm-style > div {z-index: auto !important;} /* wenn aktiv, dann ist der Mapytye Switch nicht erreichbar */ .xxxmap .gm-style div:nth-child(1) {z-index: auto !important;} /* Bedienelemente erreichbar! */ .map .gm-style > div > div {z-index: auto !important;} .map .gm-style > div > div > div div[style="position: absolute; left: 0px; top: 0px;"] {display: none;} .map .gm-style-iw { width: 100% !important; left:0 !important; top: 0 !important; background-color: rgba(255,0,0,0.6); border: 1px solid rgba(0 0,0,1); border-radius: 0; font-size: 1.5em; z-index: 1000; } .map .gm-style .gm-style-iw-d {overflow: hidden !important;} /* keine Scrollbars auf Markern */ .map .gm-style-mtc {z-index: 500 !important; display: none;} /* Select Satellit, Karte */ .map .gm-style .wp-post-image {width: 100px} /* Portrait Bild Marker */ .map .gm-style-cc {display: none;} /* Maßstab raus */ .map .gm-style .gm-style-iw-c {padding: 16px; border-radius: 16px; max-width: 250px !important; width: auto; z-index: 1000 !important;} /* rote outline, Breite des Layers */ .map .gm-style-iw .map_layer {width: auto !important; padding: 10px !important; padding-right: 30px !important;} .map .gm-style-iw .map_layer h4 {margin: -4px 0 6px 0; cursor: pointer; color: var(--head-color); font-size: 1.4em; font-weight: normal;} .map .gm-style-iw .map_layer p {margin: 10px 0 0 0; color: var(--text-color); font-size: 0.8rem;} .map .gm-style-iw {user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .map .gm-style .gm-style-iw-t::after {z-index: 1000; top: -16px;} /* Ausrichtung der Dreicke an den Infofeldern */ .map .gm-ui-hover-effect {top:10px !important; right: 10px !important; width: 40px !important; height: 40px !important;} .map .gm-ui-hover-effect img {width:24px !important; height:24px !important;} .map .gm-control-active.gm-fullscreen-control {display: none;} /* fullscreen Button */ .map .gm-svpc {display: none;} /* Streetview Button */ .map .gmnoprint {display: none;} /* +- Buttons Zoom */ .map .map_layer img {border: 1px solid black} #map2 {position: absolute; z-index:auto; left:0px; top:0px; width:100%; height:100%; opacity: 1; pointer-events: none;} /* makerlayer ohne alles */ .map .gm-style .gm-style-iw-c {padding: 0px; border-radius: 0px; max-width: 250px !important; width: auto; z-index: 1000 !important; border: 1px solid black;} /* rote outline, Breite des Layers */ .map .gm-ui-hover-effect {top:0px !important; right: 0px !important; width: 40px !important; height: 40px !important;} .map .gm-style .gm-style-iw-t::after {top: -1px; background: url(images/marker_arrow.png) 0 0 no-repeat !important; transform: none; width: 25px; left: -12px;} /* Ausrichtung der Dreicke an den Infofeldern */ .header-right {position: absolute; right: 0; display: none;} .page-map .header-right {display: block;} .user-info {position: relative; padding: 12px 20px; right: 0; height: 42px; top:0; font-size: 0.9rem; background: var(--bg-layer-col); z-index: 1000; float: right;} .user-info span {color: var(--hilite-color)} .modes {background: var(--bg-layer-col); position: relative; height: 42px; z-index: 100; float: right;} .modes .mode {background: var(--hilite-color) url(images/icon-world.png) center center no-repeat; margin-left: 0px; float:right; xxxwidth:68px; height:100%; padding: 0px 45px; cursor: pointer; position: relative; user-select: none;} .modes .mode:hover {background-color: #d40000} .modes .mode span {background: rgba(0,0,0,0.3); display: block; height: 100%; width: 0; position: absolute; right: 0;} .modes .mode.full {} .modes .mode.half span {width: 30%; border-left: 1px solid rgba(0,0,0,0.3);} .modes .mode.third span {width: 65%; border-left: 1px solid rgba(0,0,0,0.3);;} .modes .mode.hidden span {width: 100%;} .modes .mode.half {xxxbackground-size: 50%; xxxbackground-position: 0 center;} .modes .mode.third {xxxbackground-size: 30%; xxxbackground-position: 0 center;} .xxxmodes .mode:hover .m {background: rgba(0,0,0, 0.4);} .modes .mode:hover span {xxxbackground-color: var(--hilite-color2h); xxxopacity: 0.4;} .modes .fontsize {width:41px; background: var(--hilite-color); color: white; font-size: 1.6rem; padding: 4px;} .modes .fontsize.min {font-size: 1rem;} .modes .mode .m {position: absolute; width: 100%; height: 4px; left:0; bottom: 0; background: transparent;} .modes .mode.active .m {background: white;} #mapoverlayDither {mix-blend-mode: overlay; background: url(images/map_overlay_dither.png), url(images/map_overlay_light_small_50b.png) center center; width:100%; height:100%; background-size: auto, cover; xxxborder:10px solid red; z-index: 0; position: absolute; pointer-events: none;} #mapoverlay {width:100%; height:100%; background-size: auto, cover; border:0px solid red; z-index: 1;} #mapoverlay {position: absolute; xxxleft:0px; xxxtop: 0px; pointer-events: none;} .map .headings {position: absolute; xxxz-index: 1; top: 40px; pointer-events: none; background: none !important; xxxmix-blend-mode: normal; width: 100%; height:100%; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);} .map .headings h1 {display: none; position: absolute; font-size: 8rem; font-weight: normal; color:#bbb; margin:40px 0 0 120px; line-height:0.6; opacity:.6; z-index: 1;} .map .headings h2 {position: relative; font-size: 2.0rem; opacity: 1; font-weight: normal; color:red; margin:10px 0 0 10px; } .map .headings h2 span {font-size: 4rem;} .map .date-begin {position: relative; font-size: 2rem; xxxfont-family: georgia; color:red; left: 10px; } .map .date-end {position: relative; font-size: 4rem; xxxfont-family: georgia; color:red; left: 103px; top: -48px; } .map h2, .map .date-begin, .map .date-end {xxxtext-shadow: 0px 0px 3px rgba(0,0,0,0.3);} .map .headings .fathead {mix-blend-mode: soft-light; background-blend-mode: soft-light; position: absolute; z-index: 1; pointer-events: none; background: url(images/fathead.png) 0 0 no-repeat; background-size: 100%; width: 80%; height: 50%; top:0; left:0; opacity: 0.5;} .widget_nav_menu {padding:0; margin:0} #sidebar-header {z-index: 1000; position: fixed; background: var(--bg-header-col);xxx width:100%; xxxborder-bottom: 1px solid rgba(0,0,0,0.2);} #sidebar-header h3 {display:none;} #sidebar-header .nav {margin-right: 200px;} .entry-title {font-family: "Titillium Web"; line-height: 1.2; font-weight: normal;} .entry-content .frontend-item-container .js-validated-field {border:1px solid black; box-shadow: none;} .frontend-item-container label {font-size:0.9rem; color: #aaa;} button, input[type=file], button:hover {font-family: "Titillium Web" !important; font-weight: normal !important; text-transform: none !important; font-size: 0.9rem; font-weight:normal; } .wp-core-ui .button {box-shadow: none !important; border-color:none !important; border-radius: 0 !important;} #frontend-form-1-post-data-custom-field-lon {width:200px;} #frontend-form-1-post-data-custom-field-lat {width:200px;} #xxxfrontend-form-1-main-submit-button {cursor: pointer; margin-top: 50px;} #xxxfrontend-form-1-main-submit-button {position: fixed !important; top: 20px; left: 80px;} .xxxsubmit-button {cursor: pointer; margin-top: 50px;} .xxxsubmit-button {position: fixed !important; top: 20px; left: 80px;} #frontend-form-1-post-data-custom-field-interview-place {margin-bottom: 20px;} #frontend-form-1-post-data-custom-field-submit-button #frontend-form-1-secondary-submit-button {cursor: pointer;} h1 {color: #aaa;} select > option {color: black;} input {background: white !important; color: #333 !important;} #timeslider {position: absolute; left:0%; right:0%; bottom: 0%; z-index: 1; pointer-events: none; padding: 0 5%; background: rgba(255,0,0,0.6); } #timeslider #slider-range {border:0px solid red; height:50px; background: none; width:100%; pointer-events: auto; border-radius: 0;} #timeslider .ui-slider-range {background: rgba(255,0,0,0.2) url(images/stripes.png);} #timeslider .ui-slider-handle {height:100%; overflow: visible;} #timeslider input#amount1, #timeslider input#amount2 {border: 0px solid black !important; height: 50px; top: -50px; pointer-events: none; font-family: "Titillium Web"; font-size: 2.5em; background: rgba(255, 255, 255, 0.0) !important; color: red !important;} #timeslider input#amount1 {width:120px; padding:0; display: block; position: absolute; max-width: none; left: -90px; text-align: right;} #timeslider input#amount2 {width:120px; padding:0; display: block; position: absolute; max-width: none; left: 10px; } #timeslider .ui-slider-handle {border: 0; border-left:1px solid black; border-right:1px solid black; border-radius: 0; background: red; cursor:pointer; top:0;} #timeslider p {margin:0 0 0 0;} #timeslider label {color: white; top: 18px; left: 100px; position: relative; display: block; z-index: 2;} /* .cs_grau-rot #timeslider input#amount1, .cs_grau-rot #timeslider input#amount2 {color: red !important;} */ #timeslider input#amount1, #timeslider input#amount2 {height: 40px; width: 100px; xxxcolor: black !important; top: -44px; font-size: 2em; padding: 5px; xxxbox-shadow: 5px 5px 5px rgba(0,0,0,0.2);} .edit-link {display: none;} /* http://www.wproots.com/how-to-style-wordpress-menus-dropdowns/ */ nav { height: 42px; /* set to the height you want your menu to be */ margin: 0 0 0px; /* just to give some spacing */ background: none; position: fixed; z-index: 10; } nav ul { margin: 0; padding: 0; /* only needed if you have not done a CSS reset */ color: #000; background: rgba(255,0,0,1); } nav li { display: block; float: left; line-height: 42px; /* this should be the same as your #nav_menu-3 height */ height: 42px; /* this should be the same as your #nav_menu-3 height */ margin: 0; padding: 0; /* only needed if you don't have a reset */ position: relative; /* this is needed in order to position sub menus */ background: var(--bg-layer-col); } nav li a { display: block; height: 42px; line-height: 42px; padding: 0 15px; color: white; } nav .current-menu-item a, nav .current_page_item a, nav a:hover {color: #000; background: rgba(255,0,0,0.9);} nav ul ul { display: none; /* hide all sub menus from view */ position: absolute; top: 42px; /* this should be the same height as the top level menu -- height + padding + borders */ z-index: 10; } nav ul ul li { /* this targets all submenu items */ float: none; /* overwriting our float up above */ width: 220px; /* set to the width you want your sub menus to be. This needs to match the value we set below */ } nav ul li:hover > ul { display: block; /* show sub menus when hovering over a parent */ } nav ul ul li ul { /* target all second, third, and deeper level sub menus */ left: 150px; /* this needs to match the sub menu width set above -- width + padding + borders */ top: 0; /* this ensures the sub menu starts in line with its parent item */ } .post-list-table tr td:nth-child(2) {display: none !important} .post-list-table tr:nth-child(even) {background: rgba(255,255,255,0.2)} .post-list-table tr td, .post-list-table {border: 0;} .site-header {padding:0;} h2.post-list-tab-nav {margin-bottom:0 !important;} h2.post-list-tab-nav a {background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0 !important; xxxborder:1px solid #d1d1d1 !important; display: block; float:left; padding:5px; height:20px; } .post-list-interface .post-list-container h2.post-list-tab-nav {display:block !important;} .post-list-interface .post-list-container h2.post-list-tab-nav a.post-list-tab-nav-item {display:block !important; height:35px !important; margin-right:5px;} .post-list-tab-nav-item-active {border-top:1px solid !important;} #colorsheme {position: absolute; width: 300px; xxxheight:100px; left:100px; top: 100px; background: rgba(0,0,0,0.75); border:1px solid #000; z-index: 900; padding:20px; display: none;} #colorsheme h4 {margin-bottom:10px; font-weight:normal;} #colorsheme #colorsheme_close {position: absolute; top:5px; right:5px; color: white;} input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea { color: black; } #loginform input {margin-top: 4px !important; position: relative;} .frontend-item-container .frontend-item-success {text-shadow: none !important} .frontend-item-container label {margin-top:20px; margin-bottom: 4px !important; position: relative;} .frontend-item-container .hidden {display: none;} #frontend-form-1 {max-width: 900px; xxxbackground: rgb(0,0,0, 1); xxxpadding: 30px; xxxborder: 1px dotted white; xxxbox-shadow: 20px 20px 20px rgb(0,0,0,.2);} #frontend-form-1 .frontend-item-container:nth-child(1) label, #frontend-form-1 .frontend-item-container:nth-child(1) input, #frontend-form-1 .frontend-item-container:nth-child(2) label, #frontend-form-1 .frontend-item-container:nth-child(2) input, #frontend-form-1 .frontend-item-container:nth-child(14) label, #frontend-form-1-post-data-custom-field-test, #frontend-form-1-post-data-custom-field-origin, #frontend-form-1-post-data-custom-field-media, #frontend-form-1-post-data-custom-field-divider-origin, #frontend-form-1-post-data-custom-field-divider-departure, #frontend-form-1-post-data-custom-field-divider-arrival, #frontend-form-1-post-data-custom-field-divider-now-tomorrow, #frontend-form-1-post-data-custom-field-divider-materials, #frontend-form-1-post-data-custom-field-text-eintrag {display: none;} #frontend-form-1 .frontend-item-container label[for*="divider"] {display: none !important;} #frontend-form-1 .frontend-item-container[data-element-key*="_caption"] {position:relative; top:-62px; left: 310px; border: 0px solid red; height:60px; overflow:visible; width: 60%; } #frontend-form-1 .frontend-item-container[data-element-key*="thumbnail_caption"] {top:-108px;} #frontend-form-1 .frontend-item-container[data-element-key*="_caption"] textarea {height:48px; width: 300px; max-width: 300px; font-size: 0.9em;} #frontend-form-1 .frontend-form-field-container {margin-top: 4px;} #frontend-form-1 .frontend-item-container label {font-size:0.9rem; color: #aaa; margin: 16px 0 0 0 !important;} #frontend-form-1 .frontend-item-container[data-element-key*="media"] {margin: -26px 0 0 0 !important;} #frontend-form-1 .frontend-item-container .text {font-size: 1.2em;} #frontend-form-1.frontend-item-container {font-size: 0.8rem;} #frontend-form-1.frontend-form-success-links {font-size: 1.5em;} #frontend-form-1 .submit-button {padding: 20px 80px; background: #5ab035;} a.frontend-form-post-link {display: none !important;} .frontend-form-success-links {color: #5ab035;} a.frontend-form-continue-editing {text-decoration: underline !important; border-bottom: none!important; font-size: 2em} .slider {z-index: 1000; width:75%; height:85%; overflow: hidden; position: absolute; display: flex; align-items: center; justify-content: center; top:8%; left: 12%; z-index: 1000; padding: 50px; background: #191919; visibility: hidden; box-shadow: 30px 30px 30px rgba(0,0,0,0.4);} .slider .slides {position: relative; width:100%; height: 100%; xxxoverflow: hidden;} .slider .slide .overlay {} .slider .slide {background-position: center center; background-size: cover; /* contain*/ background-repeat: no-repeat; position: absolute; width:100%; height: 100%; display: block; opacity: 1.0; xxxborder: 1px dotted white; left:50%; margin-left: -50%; overflow:visible;} .slider .slide.xxxslide-right {animation-name: slide-right; animation-duration: 1.5s; animation-timing-function: ease; animation-fill-mode: forwards;} .slider .slide.xxxslide-left {animation-name: slide-left; animation-duration: 1.5s; animation-timing-function: ease; animation-fill-mode: forwards;} .slider a.arrow {position: absolute; width:100px; height: 100%; top:0px; cursor: pointer; z-index: 3; border: 0px solid red;} .slider a.arrow.next {background: url(/wp-content/themes/weltkarte/images/arrow_next.png) right 0.5% center no-repeat; right: 0%; background-size: 60%;} .slider a.arrow.prev {background: url(/wp-content/themes/weltkarte/images/arrow_prev.png) left 0.5% center no-repeat; left: 0%; background-size: 60%;} .slider .dots {position: absolute; bottom: 8px; margin: auto auto; z-index: 10001;} .slider .dots .dot {float:left; position: relative; width: 12px; height: 12px; margin-left:8px; cursor:pointer; xxoutline: 1px solid #666; border-radius: 0px; background: rgba(255,255,255,0.3);} .slider .dots .dot.active {xxxoutline: 2px solid white; background: rgba(255,255,255,1);} .slider .txt {position: absolute; width:100%; top: 100%; font-size: 1em; color: white; padding: 6px 0px 0px 0px;text-align: left; left: 0; z-index: 2;} .slider .txt {} .slider .txt span {color: red; font-weight: 600; text-transform: uppercase; font-size: 0.9rem;} .slider .txt a {color: white;} .slider .close {position: absolute; top:-10px; left:-10px; width: 100px; height: 100px; background: url(/wp-content/themes/weltkarte/images/icon-close.png) center center no-repeat; background-size: 70%; cursor: pointer; z-index: 4;} .slider .slide {opacity: 0; transition: opacity 2s;} .slider .slide.active {opacity: 1;} .slider .slide.hidden {visibility: hidden} /* rgba(0, 200, 205, 1) */ @keyframes slide-right { 0% {left: -100%; xxxopacity:0; xxxfilter:blur(20px)} 100% {left: 0%; xxxopacity:1; xxxfilter:blur(0px)} } @keyframes slide-left { 0% {left: 100%; xxxopacity:0; xxxfilter:blur(20px)} 100% {left: 0%; xxxopacity:1; xxxfilter:blur(0px)} } .slider .slide.audiodummy {background-size: 50%} .home .slider .txt .sliderbutton {background-color: rgb(0,0,0,0.05); display: inline-block; border:1px solid white; color: white; padding: 5px 20px 5px 20px; margin: 10px 10px 10px 0; font-size: 0.8rem; font-weight: 400; } .home .slider .txt .sliderbutton:hover {background-color: rgb(0,0,0,0.1);} @media only screen and (max-width: 720px) { #frontend-form-1 .frontend-item-container[data-element-key*="media"] {margin: 0px 0 0 0 !important;} #frontend-form-1 .frontend-item-container[data-element-key*="_caption"] {position: static;} }