/** Theme Name: ML Author: MEDIEN MIT LEIDENSCHAFT Author URI: http://www.medien.ml */ @import url('content.css'); /* globals */ html,body { font-size:16px; height:100%; } html { } body { display:table; table-layout:fixed; width:100%; } @-webkit-keyframes fadein { 0% {opacity:0;} 50% {opacity:0;} 100% {opacity:1;} } @keyframes fadein { 0% {opacity:0;} 50% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fadeout { 0% {opacity:1;} 50% {opacity:1;} 100% {opacity:0;} } @keyframes fadeout { 0% {opacity:1;} 50% {opacity:1;} 100% {opacity:0;} } #frame { position:relative; animation:fadein 2s; -webkit-animation:fadein 2s; animation:none; height:100%; } .mm-page { height:100%; } #frame { background:#fff; display:table; table-layout:fixed; width:100%; } #frame > .page { display:table-row; height:100%; width:100%; padding-bottom:2rem; } #frame > footer { display:table-row; height:auto; background:#fff url(img/deko-bottom.svg) no-repeat left bottom; } #frame > .page #panorama + .inner { padding-bottom:2rem; } body.search #frame,body.search footer { animation:none; } .inner { max-width:1280px; width:100%; margin:0 auto; padding:0 20px; position:relative; } .print, .md, .ld, .sd { display:none; } .xs { display:block; } /* header */ header { position:absolute; width:100%; background:rgba(255,255,255,1.0) url(img/deko-top.png?v2) no-repeat; background-size:80%; z-index:100; transition:none; /* box-shadow:0px 3px 7px rgba(67,115,46,0.1); */ } #logo { width:12.5rem; height:6.875rem; margin:4rem auto 2rem; } /* main */ /* panorama */ #head-spacer { height:0; transition:height .3s ease-in-out; } #panorama { width:100%; background:#F1F5E5; position:relative; margin-bottom:0.5em; } #panorama .ms-view { background:transparent !important; } #panorama:after { content:''; position:absolute; bottom:0px; width:100%; height:32px; background:url(img/panorama-bottom.svg) no-repeat; background-size:100% 100%; z-index:1; } .ms-skin-default .ms-nav-prev::before { text-shadow: 0px 2px 5px rgba(67,115,46,0.2) !important; } .ms-skin-default .ms-nav-next::before { text-shadow: 0px 2px 5px rgba(67,115,46,0.2) !important; } .ms-skin-default .ms-nav-next, .ms-skin-default .ms-nav-prev { top:40% !important; } .ms-skin-default .ms-nav-next { right:0 !important; } .ms-skin-default .ms-nav-prev { left:0 !important; } #panorama .ms-layer { position:absolute; bottom:7.75rem; font-size:1.8rem; } #panorama .ms-slide.left .ms-layer { left:0; } #panorama .ms-slide.right .ms-layer { right:0; } #panorama .ms-layer a { font-family:'Roboto Condensed'; text-decoration:none; color:#BE653E; display:inline-block; padding:0 0.5rem 0.125rem 0.5rem; border-radius:0.5rem; letter-spacing:0.05em; background-color:rgba(241,245,229,0.85); margin-left:3em; } #panorama .ms-layer.text { bottom:6rem; left:0; font-size:1rem; letter-spacing:0; } #panorama .ms-layer.text span { color:#fff; display:inline-block; border-radius:0.5rem; background-color:rgba(67,115,46,0.85); padding:0.125rem 0.5rem; margin-left:5.4em; } #panorama .ms-layer.bild { bottom:5.5rem; } #panorama .ms-layer.bild a { display:block; width:2.75em; height:2.75em; padding:0; background:none; border-radius:0; margin:0; } #panorama .ms-layer.bild a img { width:2.75em; height:2.75em; } @media only screen and (max-width:1220px) { #panorama .ms-slide.right .ms-layer, .ms-skin-default .ms-nav-next { right:30px !important; } #panorama .ms-slide.left .ms-layer, .ms-skin-default .ms-nav-prev { left:30px !important; } } /* breadcrumb */ #breadcrumb { font-size:0.8rem; margin-bottom:1rem; } #breadcrumb * { color:#BE653E; } /* sidebar */ aside.sidebar { font-size:1rem; margin-top:1.5rem; } aside.sidebar > div.wrap { padding:0 1rem 1rem; background:#F1F5E5; border-radius:7px; } .sidebar-width .textwidget { padding:0 1rem 1rem; } .sidebar-width .textwidget *, aside.sidebar * { color:#BE653E; } aside.sidebar p.fax, aside.sidebar p.fon { margin-bottom:0; overflow:hidden; } aside.sidebar p.mail { margin-bottom:1em; } aside.sidebar a { color:#BE653E; text-decoration:none; border-bottom:1px dotted #BE653E; transition:all 0.3s ease-in-out; text-decoration:none; } aside.sidebar p.mail:hover, aside.sidebar p.mail:hover a, aside.sidebar a:hover { color:#222; border-color:#222; } aside.sidebar p.mail:hover { border:none; } aside.sidebar p.fon::before { content:""; display:block; width:1.2rem; float:left; font-size:1em; margin-top:0.05em } aside.sidebar p.fax::before { content:""; display:block; width:1.2rem; float:left; font-size:0.9em; margin:0; } aside.sidebar p.mail::before { content:""; display:block; width:1.2rem; float:left; font-size:0.9em; transition:all 0.3s ease-in-out; margin:0 0.1em; } .sidebar-width .textwidget ul { min-height:7.4rem; } .sidebar-width .textwidget ul li { margin-bottom:0.7em; padding-left:1.1em; line-height:1.6em; } .sidebar-width .textwidget ul li { margin-bottom:0; } .sidebar-width .textwidget ul li::before { content:""; display:block; margin:0.2em 0 0 -2.2em; font-size:0.45em; color:#BE653E; float:left; transition:all 0.3s ease-in-out; } .sidebar-width .textwidget ul li:hover::before { color:#222 } aside.sidebar ul.aktuell li,aside.sidebar ul.aktuell li a { line-height:1.4rem; } aside.sidebar ul.aktuell li a:first-child { border:none; display:block; float:left; width:60px; height:60px; border-radius:30px; margin:0 8px 10px 0; } aside.sidebar ul.aktuell li img { width:60px; height:60px; border-radius:30px; margin:5px 0 0 0; border:1px solid #D0DEA5; transition:border-color .3s ease-in-out; } aside.sidebar ul.aktuell li:hover img { border-color:#BE653E; } aside.sidebar ul.aktuell li a { color:#BE653E; border-color:#BE653E; } aside.sidebar ul.aktuell li { margin-bottom:1rem; } aside.sidebar .navigation ul li span, aside.sidebar .navigation h3 { color:#ff0000; } aside.sidebar .navigation ul li span { font-size:0.79em; display:block; margin-bottom:; text-transform:uppercase; } /* mobile */ #mobile-nav { background:rgba(67,115,46,0.95); box-shadow:0px 2px 5px rgba(0,0,0,0.2); text-align:center; } #mobile-nav ul { font-size:0.83em; } #mobile-nav img.logo { max-height:31px; max-width:31px; margin:5px 0 0; } #mobile-nav .phone::before, #mobile-nav .mobile::before, #mobile-nav .mail::before, #mobile-nav .facebook::before, #mobile-nav .twitter::before { color:#fff !important;; } #mmenu-button:before,#mmenu-button:after,#mmenu-button span { background:#fff; } .mm-opening #mm-blocker { background: rgba(0, 0, 0, 0.2); } #mm-nav #mm-submit::before { color:#222; } #mm-nav li { height:auto !important; } /* content footer */ #content-footer { clear:both; margin-top:1.5em; display:none } #content-footer li { padding-left:0; display:block; float:left; text-align:center; margin-bottom:1%; height:100% } #content-footer li div, #content-footer li a { color:#BE653E; background:#BE653E; display:block; width:100%; height:100%; padding:0.7em 0; text-decoration:none; border-radius:7px; } #content-footer li a:hover { color:#fff; background:#BE653E; } #content-footer li:before { display:none; } #content-footer li.top { width:100%; } #content-footer li.post_back { width:60% } #content-footer li.post_prev { width:19%; margin-right:1%; } #content-footer li.post_next { width:19%; margin-left:1%; } #content-footer li.post_prev span, #content-footer li.post_next span { display:none; } #content-footer li.post_prev a:before,#content-footer li.post_next a:before { text-decoration:underline; border-bottom:none; } #content-footer li.post_prev div:before, #content-footer li.post_prev a:before { content:''; border:none; text-decoration:none; } #content-footer li.post_next div:before, #content-footer li.post_next a:before { content:''; border:none; text-decoration:none; } #content-footer li div { opacity:0.3; } #content-footer li.printer { display:none; } /* footer */ footer { height:auto; } #footer-content { padding-top:1em; padding-bottom:2rem; } /* misc */ span.relevanssi-query-term { background:#BE653E; color:#fff; text-shadow:none; } ::selection { background:#BE653E; color:#fff; text-shadow:none; } ::-webkit-selection { background:#BE653E; color:#fff; text-shadow:none; } ::-moz-selection { background:#BE653E; color:#fff; text-shadow:none; } *::-webkit-input-placeholder { color:#b4c8a5; opacity:1; } *::-moz-placeholder { color:#b4c8a5; opacity:1; } *:-ms-input-placeholder { color:#b4c8a5; opacity:1; } #showsearch { display:none; } @media only screen and (min-width:640px) { .xs { display:none; } .sd { display:block; } } /* mobile */ /* md */ @media only screen and (min-width:960px) { .inner { padding:0 30px; } /* visibility */ .sd { display:none; } .md { display:block; } /* panorama */ #panorama { margin-top:0px; } /* scroll */ header { background-size:40%; } header.fixed { position:fixed; background:rgba(255,255,255,9.5) url(img/deko-top.png) no-repeat; background-size:273px 46px !important; visibility:hidden; opacity:0; display:none; } header.fixed.fadeout { display:block; } header.fixed.fadein { visibility:visible; opacity:1; } header.fixed.fadeout #logo { width:6.5rem; height:3.5rem; margin:1.1rem 0 0; } header.fixed.fadeout #nav.logo { padding-left:9rem; margin-left:-6.5em; margin-top:3em; } header.fixed.fadeout #searchform { top:0.75rem; } header.fixed.fadeout #searchbutton:after { top:-0.75rem; } header.fixed.fadeout .claim { margin-left:-1px; } header .claim { position:absolute; top:1.5em; left:18rem; margin-left:-3px; } header.fixed .claim { left:11rem; top:1.1em; } header .claim h1 { color:#be653e; font-family:'Roboto Condensed'; letter-spacing:0.03em; font-weight:normal; font-size:1.8em; line-height:1em; } header.fixed .claim h1 { font-size:1.2em; } header.fixed .mlp-language-box { top:1.05rem; transition:all .3 ease-in-out; } header .mlp-language-box { position:absolute; right:2rem; top:1.8rem; height:18px; width:18px; border-radius:50%; overflow:hidden; } header .mlp-language-box ul li, header .mlp-language-box ul li a { display:block; margin:0; line-height:1px; } header .mlp-language-box ul li img { max-width:27px; height:18px; margin-left:-25%; } /* columns */ #searchform.md, aside.md, nav, main, aside, #searchform { } .main-width { padding:0 20em 0 0; margin:0 -20em 0 0; width:100%; float:left; } .sidebar-width { width:18em; float:right } .main-width, .sidebar-width { } #content { padding-top:0; } /* logo */ #logo { width:12.5rem; height:6.875rem; float:left; margin:1.5rem 0 2rem; position:absolute; } #nav.logo { padding-left:16em; margin-left:-12.5em; margin-top:6.6em; float:right; } /* search */ /* #searchform { width:25%; position:absolute; top:1.5em; left:18rem; margin-right:0; overflow:visible; transition:max-width 300ms ease-in-out,box-shadow 300ms ease-in-out; box-shadow:none; } form.search { width:100%; position:relative; transition:none; } form.search button { display:block; float:right; width:2em; position:relative; border:none; background:transparent; } form.search button:after { content:''; width:1.7em; border:none; font-size:1.2em; line-height:1.52em; display:block; position:absolute; top:0px; right:0px; bottom:0px; cursor:pointer; color:#b4c8a5; background:transparent; opacity:1; transition:color .3s ease-in-out; } form.search button:hover:after { color:#BE653E; } form.search input[type=search] { width:100%; padding:0 3em 0 0.5em; margin:0 -4em 0 0; color:#BE653E; float:left; height:100%; display:block; background:#F0F5E5; border:none; } form.search input[type=search]::-webkit-input-placeholder { color:#b4c8a5; opacity:1; } form.search input[type=search]::-moz-placeholder { color:#b4c8a5; opacity:1; } form.search input[type=search]:-ms-input-placeholder { color:#b4c8a5; opacity:1; } form.search { height:2em; } */ #showblock { display:none;} form.search { width:18em; float:right; margin-top:0.9em; position:relative; font-size:1rem; transition:none; } form.search button { font-family:"FontAwesome"; content:''; border:none; font-size:1.2em; display:block; position:absolute; top:0; right:0; transition:all 0.3s ease-in-out; cursor:pointer; color:#BE653E; padding-top:0.15em; background:#F1F5E5; border-radius:7px; } form.search button:hover::after { color:#BE653E; } form.search input[type=search] { width:100%; box-sizing:border-box; padding:0 2em 0 1em; height:2em; background:#F1F5E5; border:none; font-size:0.9em; color:#BE653E; border-radius:7px; } #searchbutton { font-size:1em; position:absolute; width:30px; height:30px; top:1.7rem; right:4rem; } #searchbutton:after { font-family:"FontAwesome"; content:''; border:none; font-size:1.2em; display:block; position:absolute; top:0; right:0; cursor:pointer; color:#BE653E; } #showblock:checked + #searchbutton:after { content:''; } #searchform { position:absolute; top:1.5rem; right:6rem; max-width:0; overflow:hidden; transition:max-width 300ms ease-in-out,box-shadow 300ms ease-in-out; box-shadow:0px 2px 5px rgba(0,0,0,0); } #showblock:checked + label + #searchform { max-width:500px; } #searchform form.search { margin-top:0; } form.search { width:16em; } /* navigations */ /* main-nav */ #nav { margin-right:0; padding-right:0; } #nav ul li, #nav ul li a { display:block; position:relative; text-decoration:none; } #nav[class*="offset"] > ul > li > a:first-child, #nav ul li a { padding:0.5rem 0.5rem; min-height:2.5rem } #nav ul li a { background-color:rgba(255,255,255,0.9); background-color:transparent; } #nav > ul ul > li > a { padding:0.25rem 0.75rem; min-height:0; } #nav[class*="nav-h"] > ul > li, #nav[class*="nav-h"] > ul > li > a { float:left; } #nav[class*="nav-h"] > ul > li:first-child, #nav[class*="nav-h"] > ul > li:first-child > a { padding-left:0; margin-left:0; } #nav[class*="nav-h"] > ul > li:last-child, #nav[class*="nav-h"] > ul > li:last-child > a { float:right; margin-right:0; padding-right:0; } #nav[class*="nav-h"] > ul > li:last-child:after { right:0; } #nav[class*="nav-h"] > ul > li:hover:last-child > ul, #nav[class*="nav-h"] > ul > li:last-child > ul { left:-6rem; right:0; text-align:right; } #nav[class*="nav-h"] > ul > li { } #nav[class*="nav-h"] > ul > li > a { font-family:'Roboto Condensed'; letter-spacing:0.05em; color:#bbca92; } #nav > ul { font-size:1.1em; width:100%; } #nav > ul > li > a, #nav > ul > li, #nav > ul { min-height:3.9rem; } #nav > ul > li { line-height:1.65rem; } #nav > ul:after { content:' '; display:table; clear:both; } #nav > ul:before { content:' '; } #nav > ul ul { padding:1em 0; font-size:0.85em; visibility:hidden; opacity:0; clear:both; transition:opacity .5s ease-in-out,height .5s ease-in-out,top .5s ease-in-out,left .5s ease-in-out,visibility 0s ease-in-out .5s; z-index:10; white-space:nowrap; } #nav > ul ul ul { z-index:20; font-size:1em; } #nav[class*="nav-h-"] > ul ul { position:absolute; } #nav[class*="nav-h-"] > ul a:after { margin:0 0 0 1px; content:''; font-size:0.85em; vertical-align:middle; line-height:1.6em; } #nav[class*="nav-h-"] > ul a:only-child:after { margin-left:0; content:''; } #nav[class*="nav-h-v-v"] > ul > li > ul > li > a:after { margin-left:8px; content:''; } #nav[class*="h-v-v"] > ul > li > ul > li > ul, #nav[class*="h-h"] > ul > li > ul { left:80%; top:0; } #nav[class*="h-v"] > ul > li > ul, #nav[class*="h-h-v"] > ul > li > ul > li > ul { top:80%; left:0; } #nav[class*="nav"] li.hover > ul, #nav[class*="nav"] > ul > li > ul > li:hover > ul, #nav[class*="nav"] > ul > li:hover > ul { visibility:visible !important; opacity:1 !important; transition-delay:0s; } #nav[class*="h-v"] > ul > li:hover > ul, #nav[class*="h-v-v"] > ul > li > ul > li:hover > ul { top:0; left:100%; } #nav[class*="h-v"] > ul > li:hover > ul { top:100%; left:0; } header.border:before, #nav[class*="border"] > ul > li:after { position:absolute; height:2px; bottom:0; left:0; right:0; background-color:transparent; content:' '; z-index:100; transition:none; } header.border:before { background-color:#d0dea5; } #nav[class*="border"] > ul > li:hover:after { background-color:#be653e; z-index:110; transition:none; } #nav[class*="borderin"] > ul > li:first-child:after { left:0; } #nav[class*="borderin"] > ul > li:after { xleft:1rem; xright:1rem; } #nav[class*="h-v"][class*="borderin"] > ul > li > ul, #nav[class*="h-h-v"][class*="borderin"] > ul > li > ul > li > ul { } #nav[class*="shadow"] > ul ul { box-shadow:3px 3px 3px rgba(0,0,0,0.1); } #nav[class*="inset"] { overflow:hidden; } #nav[class*="inset"] > ul > li { transition:height .5s ease-in-out; } #nav[class*="inset"] > ul > li > ul > li > a:after, #nav[class*="inset"] > ul > li > ul ul { display:none; } #nav[class*="inset"] > ul > li > ul, #nav[class*="inset"] > ul > li:hover > ul { top:2.5rem; } #nav > ul > li.current-post-ancestor:after, #nav > ul > li.current-post-ancestor:hover:after, #nav > ul > li.current_page_ancestor:after, #nav > ul > li.current-page-parent:after, #nav > ul > li.current-page-ancestor:after, #nav > ul > li.current_page_parent:hover:after, #nav > ul > li.current_page_ancestor:hover:after, #nav > ul > li.current-page-parent:hover:after, #nav > ul > li.current-page-ancestor:hover:after, #nav > ul > li.current-menu-item:after, #nav > ul > li.current-menu-item:hover:after { background-color:#be653e; } #nav > ul ul > li > a, #nav > ul > li.hover > a, #nav > ul > li:hover > a, #nav > ul > li > a:hover, #nav > ul ul > li > a:hover, #nav ul li.current-post-ancestor > a, #nav ul li.current-post-ancestor > a:hover, #nav ul li.current_page_parent > a, #nav ul li.current_page_parent > a:hover, #nav ul li.current-page-ancestor > a, #nav ul li.current-page-ancestor > a:hover, #nav ul li.current_page_parent > a, #nav ul li.current_page_ancestor > a, #nav ul li.current_page_parent > a:hover, #nav ul li.current_page_ancestor > a:hover, #nav > ul > li > ul > li.current-menu-item > a, #nav > ul > li.current-menu-item > a:hover, #nav > ul > li.current-menu-item > a, #nav > ul > li.current-menu-item:hover { color:#be653e; } #nav > ul ul > li > a:hover, #nav > ul ul > li.current-menu-item > a { text-decoration:underline; } /* top-nav */ #menu-top-nav { position:absolute; top:1rem; right:30px; } #menu-top-nav li { display:block; float:left; } #menu-top-nav li a { color:#bbca92; text-decoration:none; display:block; float:left; font-size:0.85rem; padding:0.2rem 0.5rem; } #menu-top-nav li a:hover { color:#be653e; } /* main */ /* content footer */ #content-footer { border-top:1px solid #BE653E; font-size:0.85rem; margin-top:3em; } #content-footer li { padding-left:0; display:block; float:left; text-align:center; margin-bottom:1%; height:100% } #content-footer li div, #content-footer li span, #content-footer li a { display:inline-block; width:auto; height:auto; padding:0; text-decoration:none; background:none; color:#BE653E; } #content-footer li span:hover, #content-footer li a:hover { text-decoration:underline; background:none; color:#bbca92; } #content-footer li:before { display:none; } #content-footer li.top { text-align:left; } #content-footer li.top, #content-footer li.post_prev, #content-footer li.post_next, #content-footer li.printer, #content-footer li.post_back { width:20% } #content-footer li.post_prev { margin-right:0; } #content-footer li.post_next { margin-left:0; } #content-footer li.post_prev span, #content-footer li.post_next span { display:inline; } #content-footer li.post_prev a:before,#content-footer li.post_next a:before { } #content-footer li.post_next a:before, #content-footer li.post_prev div:before, #content-footer li.post_next div:before { display:none; } #content-footer li.top a:before { content:' '; } #content-footer li.post_prev a:before { content:' '; } #content-footer li.post_next a:after { content:' '; } #content-footer li.printer a:after { content:' '; } #content-footer li.printer { display:block; text-align:right; } } @media only screen and (min-width:1200px) { .md { display:none; } .ld { display:block; } header.fixed { background:rgba(255,255,255,1.0) url(img/deko-top.png) no-repeat; } /* navigations */ #nav { } #nav ul li a { padding:0.5rem 0.75rem; min-height:2.5rem } #nav[class*="nav-h"] > ul > li > a { letter-spacing:0.1em; } #menu-top-nav li#menu-item-208 { display:none; } #nav ul li#menu-item-50 { display:block; } /* search */ }