/* Theme Name: AdL 2015 Theme URI: http://art-des-lebens.de Description: 2015er-Weblayout des Vereins ART des Lebens e.V. Version: 170711-lz1 Author: Lars Zimmer Author URI: http://art-des-lebens.de Tags: portfolio, responsive, clean, minimal, white, two-columns, fixed-width, custom-background //////////////////////////////////////////////////////////////////////// // 00 - TABLE OF CONTENTS //////////////////////////////////////////////////////////////////////// 01 - Reset 02 - Global 03 - General Layout 04 - Header 04.1 - Hauptmenue 05 - Content 06 - Slideshow 07 - Buttons 08 - Sidebar 09 - Widgets 10 - Teaser 11 - Pagination 12 - Footer 13 - Backgrounds 14 - Media Queries 15 - Seiten 15.1 - Seite HOME 15.2 - Seite NEWS 15.3 - Seite THEMEN 15.4 - Seite PROJEKTE 15.5 - Seite VERANSTALTUNGEN 15.5.1 - Seite VERANSTALTUNGEN > BENEFIZ 15.5.2 - Seite VERANSTALTUNGEN > TALK&ART 15.5.3 - Seite VERANSTALTUNGEN > GOTTESDIENSTE 15.6 - Seite UEBER UNS 15.6.1 - Seite UBEBER UNS > STECKBRIEFE 15.7 - Seite SPENDEN 15.8 - Seite KONTAKT 16 - Archivseiten 17 - Videos 18 - Suchergebnisse /* ///////////////////////////////////////////////////////////////////// // 01 - Reset /////////////////////////////////////////////////////////////////////*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; vertical-align: baseline; background: transparent; } body { line-height: 1; } h1, h2, h3, h4, h5, h6 { clear: both; } ul { list-style: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } html {height: 101%;} input[type="submit"]::-moz-focus-inner {border:0;} input[type="submit"]::-webkit-focus-inner {border:0;} .homeSection img, .post p img, .page p img, .project p img, .postThumb, div.wp-caption img { max-width: 100% !important; height: auto; } .wp-caption { max-width: auto !important; } .wp-caption-text { padding: 5px 0 0 0; font-style: italic; } /* ///////////////////////////////////////////////////////////////////// // 02 - Global /////////////////////////////////////////////////////////////////////*/ @font-face { /* 170711 lz: Font 'Intro Bold' einbinden */ font-family: 'intro-bold'; src: url('fonts/intro/342F83_0_0.eot'); src: url('fonts/intro/342F83_0_0.eot?#iefix') format('embedded-opentype'), url('fonts/intro/342F83_0_0.woff2') format('woff2'), url('fonts/intro/342F83_0_0.woff') format('woff'), url('fonts/intro/342F83_0_0.ttf') format('truetype'); } @font-face { /* 170711 lz: Font 'Intro Light' einbinden */ font-family: 'intro-light'; src: url('fonts/intro/342F83_1_0.eot'); src: url('fonts/intro/342F83_1_0.eot?#iefix') format('embedded-opentype'), url('fonts/intro/342F83_1_0.woff2') format('woff2'), url('fonts/intro/342F83_1_0.woff') format('woff'), url('fonts/intro/342F83_1_0.ttf') format('truetype'); } @font-face { /* 170711 lz: Font 'Intro Regular' einbinden */ font-family: 'intro-regular'; src: url('fonts/intro/342F83_2_0.eot'); src: url('fonts/intro/342F83_2_0.eot?#iefix') format('embedded-opentype'), url('fonts/intro/342F83_2_0.woff2') format('woff2'), url('fonts/intro/342F83_2_0.woff') format('woff'), url('fonts/intro/342F83_2_0.ttf') format('truetype'); } * { /* ALLE INHALTE */ -o-transition: all .4s ease-out; /* 170220 lz: Uebergangsanimation ergaenzen */ -ms-transition: all .4s ease-out; /* 170220 lz: Uebergangsanimation ergaenzen */ -moz-transition: all .4s ease-out; /* 170220 lz: Uebergangsanimation ergaenzen */ -webkit-transition: all .4s ease-out; /* 170220 lz: Uebergangsanimation ergaenzen */ transition: all .4s ease-out; /* 170220 lz: Uebergangsanimation ergaenzen */ } body { color: #CCCCCC; font-size: 100%; font-family: intro-regular, Helvetica, Arial, sans-serif; height: auto; padding: 1% 0 2% 0; margin: 0; width: auto; } p { line-height: 1.5em; font-size: 14px; margin: 0 0 20px 0; } ul { list-style: none; margin: 0; padding: 0; } #content ol {font-size: 0.75em;} li { margin: 0 0 0 0; padding: 0; } img { margin: 0; } img.noBorder{ padding: 0; background: none; border: none; } img.left { margin: 0 15px 15px 0; float: left; } a { text-decoration: none; outline: none; } a{ color: #FFFFFF; } a:hover { color: #aa0000; } a img { border:none; } h1, h2, h3, h4, h5, h6{ font-family: intro-regular, sans-serif; color: #fff; font-weight: normal; text-transform: uppercase; text-align: center; } h1 { font-size: 26px; line-height: 1.1em; margin: 30px 0 20px 0; letter-spacing: -0.5px; } h2 { font-size: 22px; line-height: 1.1em; margin: 30px 0 15px 0px; letter-spacing: -0.4px; } h3 { font-size: 18px; line-height: 22px; margin: 20px 0px 15px 0px; letter-spacing: -0.3px; text-align: left; } h6 { color: #cccccc; line-height: 1.5em; margin: 3% 0px 6% 0; text-align: left; } address, blockquote { font-family: "Droid Serif", Georgia, Times, "Times New Roman", serif; font-style: italic; font-size: 1.2em; margin: 0 0 30px 0; padding: 0 30px 0 30px; } .zitat { font-family: "Droid Serif", Georgia, Times, "Times New Roman", serif; font-size: 22px; line-heigt: 22px; text-align: center; margin: 30px 0 5px 0; } .zitat_quelle { font-family: intro-regular, sans-serif; font-size: 12px; color: #fff; font-weight: normal; text-transform: uppercase; text-align: center; } code { font-family: "Courier New", Courier, serif; overflow: auto; padding: 2px; background: #fff; } pre code { background: none; } pre { margin: 0 0 20px; padding: 10px; background: #fff; overflow: auto; border: 1px solid #e4e4e4; } .left { float: left; } .right { float: right; } .meta { font-size: 12px; text-align: center; color: #b0b0ad; margin: 10px 0 30px 0; padding-top: 10px; border-top: 1px solid #e4e4e4; } .meta a:hover{ color: #aa0000 !important; } input[type="email"], input[type="text"], textarea { background-color: #ebebeb; border: none; padding: 10px; font-family: "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #6a6a6a; } input[type="email"]:focus {outline: none; background: #f4f4f4;} input[type="text"]:focus {outline: none; background: #f4f4f4;} textarea:focus {outline: none; background: #f4f4f4;} textarea { width: 100%; font-size: 1em; } .wp-caption {max-width: 100%;} /* Clearfix ----------- */ .clearfix:after { content: " "; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } a.action { font-style: italic; font-family: "Droid Serif", Georgia, Times, "Times New Roman", serif; } /* Isotope ----------- */ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /* ////////////////////////////////////////////////////////////////////// // 03 - General Layout //////////////////////////////////////////////////////////////////////*/ #metacontainer { max-width: 960px; margin: 0 auto; padding: 0 0 0 0; border: none; } #container { max-width: 960px; margin: 0 auto; padding: 0 0 0 0; border: none; } #main { /* SEITENINHALT > CONTENTSPALTE */ max-width: 960px; margin: 0 auto; padding-top: 1px; /* 170721 lz: Satzspiegel-Abstand nicht hier generieren */ background: #666666; } #main.full { /* SEITENCONTAINER */ background: #888; /* 170719 lz: = Startseite */ } #content { padding: 0 2%; /* 170721 lz: Satzspiegel-Abstand hier generieren */ margin: 0 auto; /* 170529 lz: Inhaltscontainer zentrieren */ position: relative; } .trennlinie { border-top: 1px solid #d4d4d4; } .oneThird { width: 30.7%; } .twoThird { width: 58%!important; } .full { width: 100%; } .beitrag_contentspalte { } #beitragsuebersicht { width: 105%; } #beitragsuebersicht ul li { float: left; overflow: hidden; width: 280px; margin-right: 27px; list-style-type: none; } #beitragsuebersicht ul li h3 a { margin-bottom: 19px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #beitrag_datum { font-size: 12px; padding: 5px 0 2px 0; margin: 0 0 8px 0; border-bottom: 1px solid #d4d4d4; } #beitrag_edit { font-size: 12px; font-family: "Droid Serif", Georgia, Times, "Times New Roman", serif; font-style: italic; margin: 30px 0 20px 0; padding: 10px 0 10px 0; background: #777777; text-align: center; } .centered { text-align: center; } .headbanner { /* BEITRAGSHEADER */ background-position: center center; background-repeat: no-repeat; background-size: 100% auto; display: block; padding-bottom: 100%; position: relative; width: 100%; } #headbanner { /* BEITRAGSHEADER */ background-position: center center; background-repeat: no-repeat; background-size: 100% auto; display: block; padding-bottom: 41.66%; position: relative; width: 100%; } #headbanner-inner { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } /*///////////////////////////////////////////////////////////////////// // 3.0 - HEADER ////////////////////////////////////////////////////////////////////*/ nav, section { display: block; } header { /* SEITENHEADER */ background-color: #fff; /* 170218 lz: Ueberfaerbung durch aktive Lightbox vermeiden */ display: inline-block; /* 170219 lz: Abstand über Header in Mobilansicht (<480px) vermeiden */ height: 50px !important; /* 170610 lz: Fixe Hoehe fuer Sticky Header */ margin: 0 auto; /* 160815 lz: Header hor. zentrieren */ position: relative !important; /* 160823 lz: wichtig fuer Sticky Menu */ width: 100% !important; /* 160823 lz: Header ueber volle Contentspalte erstrecken */ z-index: 10 !important; /* 160823 lz: Header vor Content halten */ } #header-sticky { height: 100%; /* 170219 lz: Wichtig, damit Sticky Header auch mobil stabil bleibt */ margin: 0 auto; /* 170204 lz: Element hor. zentrieren */ max-width: 960px; /* 170529 lz: Max. Breite == Contentspalte (Desktop) */ } header nav { /* 160823 lz: HAUPTMENUE */ background-color: #fff; /* 160823 lz: Hintergrundfarbe fuer spaeteres Sticky Menu */ bottom: 0px; /* 160823 lz: Navi an unterer Headerkante verankern */ box-shadow: -4px 4px 5px 0 rgba(0, 0, 0, 0.2); /* 160823 lz == Vorgabe 160822 ab */ display: block; /* 160823 lz: wichtig fuer Sticky Menu */ height: 50px; /* 160823 lz: Feste Hoehe definieren */ width: 100%; /* 170206 lz: hor. Schatten ueber komplette Browserbreite erstrecken */ } .fixed-navi { /* 160823 lz: HAUPTMENUE > STICKY MENU STYLE */ position: fixed !important; /* 160823 lz: Im Browserfenster fixieren */ top: 0; /* 160823 lz: An oberer Browserkante orientieren */ width: 100%; /* == 100% Browserbreite */ } .menu-main-container { /* STICKY-HEADER bei Herunterscrollen > HAUPTMENUE */ height: 100%; /* 170529 lz: Volle 50px einnehmen */ } /* MAX. SIZE OF 1150px (DESKTOP > Kleiner als Content-Spalte inkl. Button-Raender) ----------------------------------------------------------------*/ @media screen and (max-width: 1150px) { #header-sticky { /* STICKY-HEADER */ max-width: none; /* 170206 lz: Breitenbeschraenkung aufheben */ } .fixed-navi #header-sticky { /* STICKY-HEADER bei Herunterscrollen */ padding: 0; /* 170206 lz: Headerraender ausgleichen */ } } /* MAX. SIZE OF 1024px (MOBILE > iPad LANDSCAPE) ----------------------------------------------------------------*/ @media screen and (max-width: 1024px) { #header-sticky { /* STICKY-HEADER */ padding: 0; /* 170206 lz: Randausgleich */ } } /* MAX. FENSTERBREITE 480px (MOBILE > iPhone LANDSCAPE) ----------------------------------------------------------------*/ @media screen and (max-width: 480px) { } /*///////////////////////////////////////////////////////////////////// // 3.1 - MENUE MAIN ////////////////////////////////////////////////////////////////////*/ body.logged-in .fixed-navi { /* HAUPTMENUE > STICKY MENU NACH WP-ADMINBAR */ top: 32px !important; /* 160823 lz: Ueberlappung Content durch WP-Adminbar verhindern */ } #btn-home { /* HAUPTMENUE > HOME-LINK */ display: inline-block; /* 170204 lz: Zeile teilen mit DIV 'menu-main-container' */ height: 100%; /* 170219 lz: Wichtig, damit Mobilmenue ausgeklappt nicht Sticky Header ueberlappt */ } #btn-home a { /* HAUPTMENUE > HOME-LINK > LINK */ height: 100%; /* 170219 lz: Wichtig, damit Schriftzug im Mobilmenue vertikal zentriert bleibt */ margin-left: -18px; /* 170206 lz: Link linksbuendig zu Contentspalte setzen */ } #btn-mobilmenu { /* HAUPTMENUE > TOGGLE-BUTTON */ display: none; /* 170204 lz: In Desktop-Ansicht ausblenden */ } .main-navigation { /* HAUPTMENUE */ font-family: intro-light, sans-serif; /* 170711 lz: Font aktualisiert */ font-weight: normal; /* 170711 lz: = Headlines */ position: relative; /* 170204 lz: Element rel. zu Eltern-DIV positionieren */ text-transform: uppercase; /* 170711 lz: = Headlines */ } .main-navigation .primary-menu { /* HAUPTMENUE > LISTEN-CONTAINER 'UL' */ text-align: right; /* 160816 lz: Listenpunkte rechtsbuendig anordnen */ width: 100% !important; /* 160816 lz: Element auf volle Containerbreite strecken */ } .main-navigation li { /* HAUPTMENUE > LISTENPUNKTE */ list-style-type: none; /* 170429 lz: Bulletpoints entfernen */ margin: 0; /* 170518 lz: Abstaende normaler Aufzaehlungen aushebeln */ position: relative; } .main-navigation a { /* HEADER > HAUPTMENUE > LISTENPUNKTE > LINKS */ color: #777; /* 170711 lz: = Fliesstext */ display: block; letter-spacing: 0.06em; /* 160815 lz: Finetuning Spationierung */ line-height: 1.3125; outline-offset: -1px; padding: 14px 18px 15px; /* 170610 lz: Linktexte vert. in Header zentrieren */ text-align: left; } .main-navigation .primary-menu li a:hover, /* HEADER > HAUPTMENUE > LISTENPUNKTE > LINKS (MouseOver) */ .menu-main-container ul li:hover > a, /* 160824 lz: HAUPTMENUE > EBENE 2 > LINKS (MouseOver) */ #btn-home a:hover { /* 170529 lz: HEADER > HAUPTMENUE > BUTTON 'HOME' > LINK (MouseOver) */ background-color: #B20412; /* 160824 lz: CI-Gruen hervorheben */ color: #fff !important; /* 160815 lz: Weiss faerben */ } .main-navigation li:first-child a { /* HEADER > HAUPTMENUE > LETZTER LINK */ margin-left: -18px !important; /* 170610 lz: Randausgleich links */ } .main-navigation li:last-child a { /* HEADER > HAUPTMENUE > LETZTER LINK */ margin-right: -18px !important; /* 170206 lz: Randausgleich rechts */ } /* Menue-Ebene 2 */ .sub-menu { /* HEADER > HAUPTMENUE > SUBMENUE (CONTAINER) */ box-shadow: -4px 4px 5px 0 rgba(0, 0, 0, 0.2); } .sub-menu li a { /* HEADER > HAUPTMENUE > SUBMENUE > LINK */ color: #88888b !important; /* 170204 lz: = Hauptmenue faerben */ height: 42px; padding: 10px 18px 11px; } .main-navigation li li:first-child a { /* HEADER > HAUPTMENUE > SUBMENUE > ERSTER LINK */ -webkit-box-shadow: inset 0px 3px 4px -2px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 3px 4px -2px rgba(0,0,0,0.3); box-shadow: inset 0px 3px 4px -2px rgba(0,0,0,0.3); margin-left: 0 !important; /* 160824 lz: Randausgleich Elternelement aushebeln */ } .main-navigation li li:last-child a { /* HEADER > HAUPTMENUE > SUBMENUE > LETZTER LINK */ margin-right: 0 !important; /* 160824 lz: Randausgleich aus Menue-Ebene 1 aushebeln */ } .main-navigation .current-menu-ancestor > a { /* HAUPTMENUE > MENUEPUNKT AKTUELLE ELTERN-SEITE */ color: #B20412; /* 160824 lz: LOGO-GRUEN faerben */ } .main-navigation .current-menu-item a { /* 160824 lz: HAUPTMENUE > MENUEPUNKT AKTUELLE SEITE */ color: #B20412; /* 160824 lz: LOGO-GRUEN faerben */ } .site-header .main-navigation + .social-navigation { margin-top: 1.75em; } .menu-toggle { background-color: transparent; border: 1px solid #d1d1d1; color: #1a1a1a; font-size: 13px; font-size: 0.8125rem; margin: 1.076923077em 0; padding: 0.769230769em; } .no-js .menu-toggle { display: none; } .menu-toggle:hover, .menu-toggle:focus { background-color: transparent; border-color: #007acc; color: #007acc; } .menu-toggle.toggled-on, .menu-toggle.toggled-on:hover, .menu-toggle.toggled-on:focus { background-color: #1a1a1a; border-color: #1a1a1a; color: #fff; } .menu-toggle:focus { outline: 0; } .menu-toggle.toggled-on:focus { outline: thin dotted; } .header-image { clear: both; margin: 0.875em 0; } .header-image a { display: block; } .header-image a:hover img, .header-image a:focus img { opacity: 0.85; } /* HAUPTMENUE */ .site-header-menu { margin: 0; /* Aussenabstaende entfernen */ width: 100%; /* 160815 lz: Hauptmenue ueber volle Inhaltsspalte strecken */ } html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } hr { /* TRENNLINIEN */ background-color: #ccc; /* 170514 lz: Linienstil = Tabellenkoepfe */ border: 0; height: 2px; /* 170514 lz: Linienstil = Tabellenkoepfe */ margin: 0 0 1.75em; } .site-header-main { -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .wp-custom-logo .site-header-main { -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .site-header-menu { display: block; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } .main-navigation .primary-menu, /* HAUPTMENUE */ .main-navigation .primary-menu > ul > li { /* 160815 lz: HAUPTMENUE > MENUEPUNKTE */ border: 0; display: inline-block; /* 160815 lz: Menuepunkte neben- statt untereinander anordnen */ } .sub-menu { /* HAUPTMENUE > SUBMENUE */ background-color: #fff; /* 170620 lz: Hintergrund weiss faerben */ display: block; /* 160824 lz: Element einblenden */ left: -999em; /* 160824 lz: Untermenue ausserhalb der Bildflaeche verstecken */ margin: 0; /* 160824 lz: Aussenabstaende entfernen */ position: absolute; /* 160824 lz: Element unabhaengig von Eltern-DIV positionieren */ z-index: 99999; /* 160824 lz: Untermenue auf oberster Ebene anordnen */ transition: none !important; /* 160824 lz: Animation entfernen */ } .sub-menu a { /* HAUPTMENUE > SUBMENUE > LINKS */ font-weight: normal; /* 170204 lz: Schriftstaerke zuruecksetzen */ } .main-navigation li:hover > ul { /* HAUPTMENUE (HOVER) > EBENE 2 */ left: 0; /* 160824 lz: Dropdown links am Elternelement ausrichten */ right: auto; /* 160824 lz: Dropdown rechts nicht einschraenken */ } .main-navigation ul ul li:hover > ul, /* HAUPTMENUE > EBENE 2 > LISTENPUNKT (HOVER) > EBENE 3 */ .main-navigation ul ul li.focus > ul { /* HAUPTMENUE > EBENE 2 > LISTENPUNKT (FOCUS) > EBENE 3 */ left: auto; right: 100%; } .dropdown-toggle { /* MOBILMENUE > TOGGLE-BUTTONS (ZUM AUSKLAPPEN VON UNTERMENUES) */ display: none; /* 170204 lz: In Desktop-Ansicht verstecken */ } .header_logo { /* HAUPTMENUE > LOGO */ background-image: url("http://art-des-lebens.de/wordpress/wp-content/themes/filtered/includes/kompaktlogo_rot.svg"); /* 170610 lz: Icon einbinden */ background-position: center center; /* 170610 lz: Icon in DIV zentrieren */ background-repeat: no-repeat; /* 170610 lz: Hintergrund nicht wiederholen */ opacity: 1; /* 170610 lz: Logo bei MouseOver abblenden */ } .header_logo:hover { /* HAUPTMENUE > LOGO (MOUSEOVER) */ opacity: 0.5; /* 170610 lz: Logo bei MouseOver abblenden */ } .header_logo a { /* HAUPTMENUE > LOGO > LINK' */ background-repeat: no-repeat; /* 170203 lz: Hintergrund nicht wiederholen */ height: 50px; /* 170610 lz: = Header */ padding: 0; /* 170610 lz: Abstaende reg. Menuelinks aushebeln */ opacity: 0; /* 170610 lz: Linktext verstecken */ overflow: hidden; /* 170610 lz: Linktext verstecken */ width: 36px; /* 170610 lz: Groesse Icon + klickbare Flaeche definieren */ } /* MAX. SIZE OF 1150px (DESKTOP > Kleiner als Content-Spalte inkl. Button-Raender) ----------------------------------------------------------------*/ @media screen and (max-width: 1150px) { #btn-home { /* STICKY-HEADER bei Herunterscrollen > BUTTON 'HOME' */ margin-left: 3%; /* 170206 lz: == Contentspalte */ } .fixed-navi #btn-home { /* STICKY-HEADER bei Herunterscrollen > BUTTON 'HOME' */ left: 3%; /* 170206 lz: Randausgleich */ } .menu-main-container { /* STICKY-HEADER bei Herunterscrollen > HAUPTMENUE */ margin-right: 3%; /* 170206 lz: == Contentspalte */ } } /* MIN. SIZE OF 1024px (MOBILE > iPad LANDSCAPE) ----------------------------------------------------------------*/ @media screen and (min-width: 1024px) { #menu-main { display: flex; justify-content: space-between; } } /* MAX. SIZE OF 1024px (MOBILE > iPad LANDSCAPE) ----------------------------------------------------------------*/ @media screen and (max-width: 1024px) { .main-navigation, .main-navigation ul, .main-navigation li, .main-navigation a, .main-navigation ul li, .main-navigation ul li a, .main-navigation ul ul, .main-navigation ul ul li, .main-navigation ul ul li a, .main-navigation li:last-child a { /* HAUPTMENUE */ transition: all .3s ease-out !important; /* 170213 lz: Uebergangsanimation in Mobilansicht erlauben */ } .main-navigation { /* HAUPTMENUE */ padding: 0; /* 170204 lz: Menue randlos gestalten */ } .main-navigation .menu-main-container { /* HAUPTMENUE > CONTAINER */ float: none; /* 170206 lz: Floating aushebeln */ left: -3%; /* 170213 lz: linken Rand ausgleichen */ padding: 0 3%; /* 170213 lz: Hor. Raender ausgleichen */ position: relative; /* 170204 lz: noetig, damit z-index #mobilmenue_btn funktioniert */ width: 106%; /* 170206 lz: Bildschirm ueberbreit ausfuellen fuer optimalen Schatteneffekt */ z-index: 2; /* 170204 lz: Element unter Mobilmenue-Button legen */ } .main-navigation .menu-main-container > ul { /* HAUPTMENUE > CONTAINER > LISTE */ padding-left: 3%; /* 170216 lz: links buendig zu Contentspalte anordnen */ padding-right: 3%; /* 170216 lz: rechts buendig zu Contentspalte anordnen */ } .main-navigation .primary-menu { /* HAUPTMENUE CONTAINER (DEAKTIV) */ display: none !important; /* 170204 lz: in Mobilansicht standardmaessig ausblenden */ } .main-navigation .primary-menu.active { /* HAUPTMENUE > CONTAINER (AKTIV) */ background-color: #fff; /* 170610 lz: Weiss faerben */ display: block !important; /* 170204 lz: Nach Button-Klick einblenden */ padding: 0 !important; /* 170610 lz: Links randlos in Mobilmenue einbinden */ width: 100%; /* 170206 lz: Navi auf volle Contentspalte strecken */ } .main-navigation .primary-menu li { /* HAUPTMENUE > MENUEPUNKTE */ border-bottom: 1px solid rgba(255, 255, 255, 0.25); /* 170216 lz: Trennlinien definieren */ display: block !important; /* 170204 lz: Menuepunkte untereinander anordnen */ text-align: left; /* 170216 lz: Inhalte links anordnen */ } .main-navigation .primary-menu li:last-child { /* HAUPTMENUE > LETZTER MENUEPUNKT */ border-bottom: none; /* 170216 lz: Keine Trennlinie am Menue-Ende */ } .main-navigation .primary-menu a, /* HAUPTMENUE > MENUEPUNKTE > LINKS */ .submenue a { display: block !important; /* 170204 lz: Menuepunkte untereinander anordnen */ height: 50px !important; /* 170219 lz: Menuepunkte mit fixer Hoehe stabiliseren */ padding: 14px 6% 15px; /* 170216 lz: Menuetexte hor. responsiv einruecken */ } .main-navigation .primary-menu li:first-child a { /* HEADER > HAUPTMENUE > LETZTER LINK */ margin-left: 0 !important; /* 170610 lz: Randausgleich aus Desktopansicht aushebeln */ } .main-navigation .primary-menu li li { /* HAUPTMENUE > LINKS */ border: none; /* 170216 lz: Trennlinien unterbinden */ padding-left: 0; /* 170214 lz: links buendig zu Contentspalte anordnen */ padding-right: 0; /* 170214 lz: rechts buendig zu Contentspalte anordnen */ } .main-navigation li li:first-child a { /* SUBMENUE > MENUEPUNKT > ERSTER LINK */ box-shadow: none; /* 170213 lz: Randschatten entfernen */ } .main-navigation li li:last-child a { /* SUBMENUE > MENUEPUNKT > LETZTER LINK */ padding-bottom: 18px; /* 170216 lz: Abstand angleichen an restl. vert. Abstaende */ } .menu-main-container ul li:hover > a { /* SUBMENUE > LINKS */ background-color: transparent; /* 170213 lz: HG-Verlauf Nav-Container nicht stoeren */ } .sub-menu { /* SUBMENUE */ left: 0; /* 170610 lz: Submenu mobil in Textfluss einbinden */ position: relative; /* 170610 lz: Submenu mobil in Textfluss einbinden */ } .main-navigation li.header_logo { /* HAUPTMENUE > LOGO */ display: none !important; /* 170610 lz: Logo innerhalb d. Menues verstecken */ } #mobile-menu-toggle { /* MOBILMENUE > BURGER-BUTTON */ cursor: pointer; height: 50px; position: fixed; /* 170324 lz: Icon beim Scrollen mitwandern lassen */ right: 0; /* 170324 lz: in der rechten oberen Browserecke positionieren */ transform: rotate(0deg); transition: all 0.5s ease-in-out 0s; width: 50px; z-index: 999; } #mobile-menu-toggle span { /* MOBILMENUE > BURGER-BUTTON > EINZELTEILE */ background: #777777; /* 160611 lz: = Fliesstext */ border-radius: 78px; display: block; height: 5px; left: 22%; opacity: 1; position: absolute; width: 58%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #mobile-menu-toggle span:nth-child(1) { /* MOBILMENUE > BURGER-BUTTON > EINZELTEIL 1 VON 4 */ top: 14px; } #mobile-menu-toggle span:nth-child(2), /* MOBILMENUE > BURGER-BUTTON > EINZELTEIL 2 VON 4 */ #mobile-menu-toggle span:nth-child(3) { /* MOBILMENUE > BURGER-BUTTON > EINZELTEIL 3 VON 4 */ top: 23px; } #mobile-menu-toggle span:nth-child(4) { /* MOBILMENUE > BURGER-BUTTON > EINZELTEIL 4 VON 4 */ top: 32px; } #mobile-menu-toggle.open span:nth-child(1) { /* MOBILMENUE > BURGER-BUTTON (GEKLICKT) > EINZELTEIL 1 VON 4 */ top: 23px; width: 0%; left: 50%; } #mobile-menu-toggle.open span:nth-child(2) { /* MOBILMENUE > BURGER-BUTTON (GEKLICKT) > EINZELTEIL 2 VON 4 */ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #mobile-menu-toggle.open span:nth-child(3) { /* MOBILMENUE > BURGER-BUTTON (GEKLICKT) > EINZELTEIL 3 VON 4 */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #mobile-menu-toggle.open span:nth-child(4) { /* MOBILMENUE > BURGER-BUTTON (GEKLICKT) > EINZELTEIL 4 VON 4 */ top: 32px; width: 0%; left: 50%; } #lightbox { /* MOBILMENUE > LIGHTBOX (AKTIV) */ background-color: rgba(51, 51, 51, 0.75); /* 170218 lz: Fuellfarbe definieren */ float: left; /* 170218 lz: Restl. Content mit freifliegendem Container verbergen */ height: 200%; /* 170218 lz: Lightbox ueber volle Fensterhoehe erstrecken + unter kompl. Header erweitern */ opacity: 0; /* 170218 lz: Ebene standardmaessig ausblenden */ position: fixed; /* 170218 lz: Lightbox verdeckt Content auch bei Scrollen */ top: -50%; /* 170218 lz: unter kompl. Header erweitern */ width: 100%; /* 170218 lz: Lightbox ueber volle Fensterbreite erstrecken */ z-index: 1; /* 170218 lz: Mit Lightbox auch Full-Width-Banner ueberdecken */ pointer-events: none; /* 170218 lz: Ebene standardmaessig 'klickdurchlaessig' machen */ } #lightbox.active { /* MOBILMENUE > LIGHTBOX (AKTIV) */ opacity: 1; /* 170218 lz: Ebene einblenden */ pointer-events: auto; /* 170218 lz: Ebene 'klickundurchlaessig' machen */ } } /* MAX. SIZE OF 782px (MOBILE > WP-HEADERMENUE SCHALTET UM AUF MOBILSTUFE 2) ----------------------------------------------------------------*/ @media screen and (max-width: 782px) { body.logged-in .fixed-navi { /* 170211 lz: HAUPTMENUE > STICKY MENU NACH WP-ADMINBAR */ top: 46px !important; /* 170211 lz: Ueberlappung Content durch WP-Adminbar verhindern */ } } /* MAX. FENSTERBREITE 480px (MOBILE > iPhone LANDSCAPE) ----------------------------------------------------------------*/ @media screen and (max-width: 480px) { #btn-home { /* MOBILMENUE > BUTTON 'HOME' */ margin-left: 6%; /* 170218 lz: Abstand verdoppeln */ } .fixed-navi #btn-home { /* STICKY-HEADER bei Herunterscrollen > BUTTON 'HOME' */ left: 6%; /* 170218 lz: Randabstand verdoppeln */ } #btn-mobilmenu { /* HAUPTMENUE > TOGGLE-BUTTON */ margin: 0 6% 0 0; /* 170218 lz: Randabstand verdoppeln */ } } /*//////////////////////////////////////////////////////////////////// // 05 - Content ////////////////////////////////////////////////////////////////////*/ #content .post { margin-bottom: 20px; position: relative; border-bottom: 1px solid #d4d4d4; padding-bottom: 15px; } .page #content .post { margin-bottom: 20px; border: none; float: left; max-width: 70%; } #content .post.withThumb .inside { margin-left: 130px; } #content .post .inside { margin-right: 4%; } #content .post.lastPost { border-bottom: none; } #content h1 a, #content h2 a, #content h3 a, #content h4 a, #content h5 a{ color: #fff; } #content h1 a:hover, #content h2 a:hover, #content h3 a:hover, #content h4 a:hover, #content h5 a:hover{ color: #aa0000; } #content .postThumb{ position: absolute; left: 0; } #pageHead { border-bottom: 1px solid #FF0000; background: #666666; padding: 14px 3.5% 16px 3.5%; max-width: 960px; margin: 0 auto; } #pageHead h1 { font-size: 1.8em; line-height: 1.2em; margin-bottom: 0; font-family: "Droid Serif", Georgia, Times, "Times New Roman", serif; text-transform: uppercase; } /*Project Filter Navigation------------------*/ #content #filterNav{ padding: 0!important; margin: 0 0 20px 0!important; } #content #filterNav li{ padding: 1px 0 0 0; background: none; margin: 0 5px 5px 0; display: block; float: left; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } #filterNav li a{ font-size: 14px; text-transform: uppercase; background: #a1a1a1; display: inline-block; color: #fff!important; text-decoration: none; position: relative; cursor: pointer; padding: 0 6px 0 !important; border: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; line-height: 20px; } #filterNav li a:hover { background: #aa0000; } #filterNav .selected { background: #aa0000; } #filterNav .selected:hover { background: #aa0000; } /*Projects------------------*/ #projects { margin: 0 0 0 0; padding: 0; float: left; display: block; position: relative; } #projects .thumbs { margin: 0 auto; } #content .project.small { width: 31.5217%; display: block; margin: 0 1.18% 1.08695% 0; opacity: 0; padding-bottom: 5px; cursor: pointer; float: left; background: #666666; height: auto; } #content .project.small{ position: relative; display: block; zoom: 1; } #content .project.small img{ max-width: 100%; height: auto; } .masonry img { margin-top: 4px; border-bottom: 0px solid #aa0000; } .masonry img:hover { border-bottom: 5px solid #aa0000; opacity: 0.75; background: #EEEEEE; } .project blockquote { padding: 20px 0 15px 0; } .project h1 { padding-bottom: 10px; border-bottom: 1px solid #d4d4d4; } .project h2 { margin-top: 40px; } .project h3 { margin-top: 20px; } .project_content h1 { margin-left: 5px; /*WEGEN SHOWCASE-THUMBNAIL-ABSTAND (lz | 150221)*/ } .project_content h2 { margin-left: 5px; /*WEGEN SHOWCASE-THUMBNAIL-ABSTAND (lz | 150221)*/ } .project_content h3 { margin-left: 5px; /*WEGEN SHOWCASE-THUMBNAIL-ABSTAND (lz | 150221)*/ } .project_content h4 { padding-left: 5px; /*WEGEN SHOWCASE-THUMBNAIL-ABSTAND (lz | 150221)*/ } .project_content h5 { margin-left: 5px; /*WEGEN SHOWCASE-THUMBNAIL-ABSTAND (lz | 150221)*/ } .project_content h6 { margin: 0; padding-left: 5px; /*WEGEN SHOWCASE-THUMBNAIL-ABSTAND (lz | 150221)*/ } .project_content p { margin-left: 5px; /*WEGEN SHOWCASE-THUMBNAIL-ABSTAND (lz | 150221)*/ } .project_content { float: left; margin-bottom: 20px; } #content .skillList{ padding: 0!important; margin: 0 0 20px 0 !important; } .skillList li{ padding: 1px 0 0 0; background: none; margin: 0 5px 5px 0 !important; display: inline-block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .skillList li a{ font-size: 11px; text-transform: uppercase; background: #a1a1a1; display: inline-block; color: #fff!important; text-decoration: none; position: relative; padding: 0 6px 0 !important; border: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; line-height: 20px; } .skillList li a:hover { background: #aa0000; } .projectNav { padding-top: 20px; border-top: 1px solid #d4d4d4; } .projectNav a{ display: block!important; width: 28px; height: 28px; text-indent: -9999px; } .projectNav div { float: left; margin-right: 10px; width: 28px; height: 28px; } .projectNav .next a{ background: transparent url(images/project_nav_arrow_left.png) no-repeat; background-position: 0 -28px; } .projectNav .next a:hover { background-position: 0 0; } .projectNav .next.inactive{ background: transparent url(images/project_nav_arrow_left.png) no-repeat; background-position: 0 -56px; } .projectNav .previous a{ background: transparent url(images/project_nav_arrow_right.png) no-repeat; background-position: 0 -28px; } .projectNav .previous a:hover { background-position: 0 0; } .projectNav .previous.inactive{ background: transparent url(images/project_nav_arrow_right.png) no-repeat; background-position: 0 -56px; } /*Images------------------*/ #content .alignleft, #content img.alignleft { display: inline; float: left; margin-right: 24px; margin-top: 4px; } #content .alignright, #content img.alignright { display: inline; float: right; margin-left: 24px; margin-top: 4px; } #content .aligncenter, #content img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } #content img.alignleft, #content img.alignright, #content img.aligncenter { margin-bottom: 12px; } /*Gallery------------------*/ .gallery { padding-top: 5px; margin-bottom: 20px!important; } .gallery-item { margin-top: 0px!important; margin-bottom: 25px!important; } .gallery img { border: none!important; } dt img { max-width: 100% !important; height: auto; } /*Lists------------------*/ #content ul{ font-size: 14px; line-height: 1.5em; margin-bottom: 20px; margin-right: 0%; list-style-type: disc; } #content ul li{ margin-bottom: 10px; } #content ol li{ margin: 0 0 10px 0; } #content ol{ margin: 0 0 20px 20px; } #content ul ul, #content ol ul, #content ul ol, #content ol ol { padding-top: 10px; } /*Columns------------------*/ .one_half{ width:48%; } .one_third{ width:30%; } .two_third { width:65.33%; } .one_half,.one_third,.two_third{ position: relative; margin-right: 4%; float:left; } .last { margin-right:0 !important; clear:right; } .clearboth { clear:both; display:block; font-size:0; height:0; line-height:0; width:100%; } /*//////////////////////////////////////////////////////////////////// // 06 - Slideshow ////////////////////////////////////////////////////////////////////*/ /* PLUGIN 'META SLIDER PRO' */ .metaslider .caption { padding: 10px 3.5% !important; /* 170326 lz: Angleichen an Contentspalte */ } .metaslider-1524 .flexslider .flex-control-paging { margin: 15px !important; /* 170326 lz: Angleichen an Contentspalte */ } ol.flex-control-nav.flex-control-paging li:last-child a { margin-right: 0 !important; /* 170426 lz: Slidernavi rechtsbuendig anordnen */ } /*//////////////////////////////////////////////////////////////////// // 07 - Buttons ////////////////////////////////////////////////////////////////////*/ .icons { font-family: 'fontawesome', sans serif; } #searchform { } #searchform .button, #searchform searchsubmit, #searchform input[type="submit"] { border: none; color: #fff !important; background-color: rgba(34, 34, 34, 0.75); font-family: 'fontawesome', sans serif; font-size: 16px; text-decoration: none; height: 30px; width: 30px; cursor: pointer; float: right; } .button:hover, #searchsubmit:hover, input[type="submit"]:hover { background-color: #aa0000!important; } #s { width: 150px; height: 20px; margin: 0; padding: 5px 10px 5px 10px !important; border: none; float: right; line-height: normal!important; color: #CCCCCC; background-color: rgba(34, 34, 34, 0.75); } /*SEITE »KONTAKT«*/ .post-147 h2 { text-align: left; margin-bottom: 20px; } .projektlink a { float: left; margin: 0px 10px 30px 0px; } .wpcf7-textarea { width: 96.6%; } .wpcf7-text { width: 96.6%; margin-bottom: 10px; line-height: 1.5em; } .wpcf7-submit { color: #fff; background: #777; border: none; width: 100%; cursor: pointer; display: inline-block; float: left; font-family: intro-regular, sans-serif; font-size: 14px; line-height: 14px; text-decoration: none; text-transform: uppercase; text-align: center; padding: 10px 0 10px 0; position: relative; } .roundbutton { /* RUNDE BUTTONS */ align-items: center; /* 170419 lz: Icons vert. zentrieren */ background-color: #555; /* 170420 lz: Buttons dezent von Seiten-HG abheben */ color: #fff; /* 170420 lz: Inhalte weiss */ border-radius: 40px; /* 170419 lz: Runden Button kreieren */ display: flex; /* 170419 lz: Wichtig fuer absolute Zentrierung der Icons */ font-size: 18px; /* 170419 lz: Icon vergroessern */ height: 35px; /* 170419 lz: Wichtig, damit Element eigene Abmessungen erhaelt */ justify-content: center; /* 170419 lz: Icons hor. zentrieren */ margin: 5px; /* 170419 lz: Abstand zw. Icons */ position: relative; /* 170419 lz: Wichtig, damit Element eigene Abmessungen erhaelt */ width: 35px; /* 170419 lz: Wichtig, damit Element eigene Abmessungen erhaelt */ } .roundbutton:hover, /* RUNDE BUTTONS (MOUSEOVER) */ .roundbutton a:hover { /* RUNDE BUTTONS > LINK (MOUSEOVER) */ background-color: #aa0000; /* 170420 lz: CI-Rot faerben */ color: #fff; /* 170419 lz: Icon weiss belassen */ } .roundbutton.inactive { /* RUNDE BUTTONS (INAKTIV) */ display: none; /* 170420 lz: Ausblenden */ } .roundbutton.next { /* /* RUNDE BUTTONS 'WEITER' */ padding-left: 2px; /* 170420 lz: Icon opt. in Button zentrieren */ width: 33px; /* 170420 lz: Icon opt. in Button zentrieren */ } .roundbutton.overview { /* /* RUNDE BUTTONS 'ZURUECK ZUR UEBERSICHT' */ padding-left: 1px; /* 170420 lz: Icon opt. in Button zentrieren */ width: 34px; /* 170420 lz: Icon opt. in Button zentrieren */ } .roundbutton.prev { /* /* RUNDE BUTTONS 'ZURUECK' */ padding-right: 2px; /* 170420 lz: Icon opt. in Button zentrieren */ width: 33px; /* 170420 lz: Icon opt. in Button zentrieren */ } /*//////////////////////////////////////////////////////////////////// // 08 - Sidebar ////////////////////////////////////////////////////////////////////*/ #sidebar { float: right; width: 180px; margin: 0; padding: 0; } #sidebar h3 { float: right; width: 180px; margin: 33px 0 20px 0; padding: 0; } .sidebarBox { position: relative; margin: 0; } #sidebar p { line-height: 1.5em; margin-bottom: 12px; } .avatar { float: left; margin: 0 20px 20px 0; padding-top: 3px; } /*///////////////////////////////////////////////////////////////////// // 09 - Widgets ////////////////////////////////////////////////////////////////////*/ .textwidget { margin: 0 3.5% 0 3.5%; padding-top: 20px; /* 170414 lz: Abstand zu vorigem Element erhoehen */ } .textwidget .one_third { margin-right: 4.3%; } .widgetBox h3, #footer .widgetBox h3 { margin: 30px 0 20px 0; font-family: intro-regular, sans serif; } #sidebar .widgetBox .meta { text-align: left; font-size: 12px; color: #b0b0ad; margin: 5px 0 0 0; padding: 6px 0 0 0; border-top: 1px solid #e4e4e4; } #sidebar ul { margin: 0 0 0 0; padding: 0px 0 0 0; line-height: 1em; background: none; position: relative; } #sidebar ul li { padding: 0px 0 0px 0; margin: 0 0 15px 0; line-height: 1em; background: none; font-size: .75em; } #sidebar ul li p{ line-height: 1.3em; margin: 0; } #sidebar ul li h2 { font-size: 13px; margin: 0 0 0px 0 ; padding: 0 !important; line-height: 1em; font-weight: normal; } #sidebar .widget_nav_menu ul, #footer .widget_nav_menu ul, #sidebar .widget_pages ul, #footer .widget_pages ul, #sidebar .widget_categories ul, #footer .widget_categories ul { background: none; margin: 0; padding: 0; border: none; } #sidebar .widget_nav_menu li, #footer .widget_nav_menu li, #sidebar .widget_pages li, #footer .widget_pages li, #sidebar .widget_categories li, #footer .widget_categories li { padding: 0 0 0 0; margin: 10px 0 0 0; border: none; } /*Recent Posts Widget------------------*/ #sidebar .ttrust_recent_posts .meta, #footer .ttrust_recent_posts .meta { display: block; } #sidebar .ttrust_recent_posts h2, #footer .ttrust_recent_posts h2 { font-size: 13px !important; margin-bottom: 5px; } .firstPost { width: 175px; padding: 0; } .firstPost p { display: none; } .secondaryPost { width: 175px; padding: 0; } /*Calendar Widget--------------------*/ table#wp-calendar { width: 280px; } table#wp-calendar td, table#wp-calendar th{ text-align: left; } table#wp-calendar td { color: #b0b0ad; padding-top: 10px; } table#wp-calendar td a{ font-weight: bold; } #wp-calendar caption { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #dbdad8; font-size: 14px; font-weight: bold; } /*Tag Widget--------------------*/ .widget_tag_cloud a { position: relative; display: inline-block; float: left; font-size: 11px !important; line-height: 12px; text-decoration: none; text-transform: uppercase; margin: 0 5px 5px 0; padding: 7px 7px 5px 7px; color: #fff !important; background: none repeat scroll 0 0 #777; border: medium none; border-radius: 0; cursor: pointer; } .widget_tag_cloud a:hover { color: #fff; background: #aa0000; } .widget_tag_cloud:after { content: " "; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .widget_tag_cloud { display: inline-block; } html[xmlns] .widget_tag_cloud { display: block; } * html .widget_tag_cloud { height: 1%; } /*Twitter Widget--------------------*/ #twitterBox{ margin: 0 0 10px 0; } ul#twitter_update_list li{ line-height: 1.4em !important; } .twitterLink a{ font-style: italic; } /*Flickr Widget--------------------*/ #flickrBox .flickrImage { float: left; margin: 0 10px 10px 0; padding: 3px; background: #686868; border: 1px solid #575746; } #sidebar #flickrBox .flickrImage { float: left; margin: 0 12px 12px 0; padding: 3px; background: #f0f0f0; border: 1px solid #e1e1e1; } #footer.light #flickrBox .flickrImage { background: #fff; border: 1px solid #e1e1e1; } #flickrBox .flickrImage img { width: 50px; height: 50px; } /*///////////////////////////////////////////////////////////////////// // 10 - Teaser ////////////////////////////////////////////////////////////////////*/ #teaser-grid { /* TEASERLISTE */ display: flex; /* 170221 lz: Flexbox definieren */ flex-direction: row; /* 170221 lz: Flex-Items zeilenweise anordnen */ flex-wrap: wrap; /* 170221 lz: Flex-Items Zeilenumbruch erlauben */ justify-content: space-between; /* Flex-Items gleichmaessig ueber Zeile verteilen */ list-style-type: none; /* 170221 lz: Bulletpoints entfernen */ } .teaser { /* TEASERLISTE > EINZELTEASER */ list-style-type: none; /* 170414 lz: Bulletpoints entfernen */ margin: 0 0 20px 0; /* 170221 lz: Abstand zwischen Tabzeilen definieren */ width: 31%; /* 170221 lz: Dreispaltiges Raster inkl. Zwischenraendern erstellen */ } .teaser-pic { /* TEASERLISTE > EINZELTEASER > TEASERBILD */ background-blend-mode: multiply; /* 170220 lz: Ueberblendeffekt anwenden */ background-color: #fff; /* 170220 lz: Farbe fuer weichen Ueberblendeffekt vorbereiten */ background-position: center center; /* 170220 lz: Teaserbild in Container absolut zentrieren */ background-repeat: no-repeat; /* 170220 lz: Teaserbild nicht wiederholen */ background-size: cover; /* 170220 lz: Thumbnail fuellt Eltern-DIV nach kurzer Seite proportional aus */ border-bottom: 5px solid #888; /* 170511 lz: an Seiten-HG angleichen */ display: block; /* 170220 lz: Teaserbilder einblenden */ padding-bottom: 57.14%; /* 170220 lz: Seitenverhaeltnis 280:160 definieren */ position: relative; /* 170220 lz: Wichtig fuer festes Seitenverhaeltnis */ width: 100%; /* 170220 lz: Teaserbild fuellt volle Teaserbreite */ } .teaser-pic:hover { /* TEASERLISTE > EINZELTEASER > TEASERBILD (MOUSEOVER) */ background-color: #666; /* 170220 lz: Auf HG-Farbe abdunkeln */ border-bottom: 5px solid #aa0000; /* 170220 lz: Markierungslinie sichtbar faerben */ opacity: 0.75; /* 170220 lz: Teaserbild 25% transparent abblenden */ } .teaser-pic-content { /* TEASERLISTE > EINZELTEASER > TEASERBILD > INHALT */ position: absolute; /* 170220 lz: Wichtig fuer festes Seitenverhaeltnis */ top: 0; /* 170220 lz: Wichtig fuer festes Seitenverhaeltnis */ left: 0; /* 170220 lz: Wichtig fuer festes Seitenverhaeltnis */ bottom: 0; /* 170220 lz: Wichtig fuer festes Seitenverhaeltnis */ right: 0; /* 170220 lz: Wichtig fuer festes Seitenverhaeltnis */ } .teaser-meta { /* TEASERLISTE > EINZELTEASER > INFOZEILE */ border-bottom: 1px solid #ccc; /* 170220 lz: Sandwich-Linie unten erzeugen */ border-top: 1px solid #ccc; /* 170220 lz: Sandwich-Linie oben erzeugen */ font-size: 11px; /* 170220 lz: Typo verkleinern */ line-height: 1.9em; /* 170414 lz: Vert. Textabstand definieren */ margin: 0 0 15px 0; /* 170220 lz: Abstand darunter sync. Abstand darueber */ } .teaser h3 { /* TEASERLISTE > EINZELTEASER > HEADLINE */ margin: 10px 0 15px; /* 170220 lz: Vert. Abstaende definieren */ } .teaser > p, /* TEASERLISTE > EINZELTEASER > ABSAETZE */ .teaser-bild p { /* TEASERLISTE > EINZELTEASER > TEASERBILD > ABSAETZE */ display: none; /* 170422 lz: Unnoetige Absaetze entfernen */ } a.weiterlesen .fa, /* TEASER > ICON 'WEITERLESEN' */ #masonry-homemore .fa { /* HOME > BTN 'WEITERLESEN' > ICON 'WEITERLESEN' */ display: inline; /* Zeilenumbruch zw. Teasertext und Icon verhindern */ margin: 0 0 0 2px; /* 170222 lz: Abstand Icon zu Linktext */ } a.weiterlesen:hover .fa { /* TEASER (MOUSEOVER) > ICON 'WEITERLESEN' */ margin: 0 0 0 7px; /* 170222 lz: Icon animieren */ } @media only screen and (max-width: 768px) { /* iPad Portrait */ .teaser { /* TEASERLISTE > EINZELTEASER */ width: 100%; /* 170421 lz: Dreispaltigkeit aufheben */ } } /*//////////////////////////////////////////////////////////////////// // 11 - Pagination ////////////////////////////////////////////////////////////////////*/ .pagination { width: 96%; padding: 0 0 0; clear: both; margin: 0 0 15px 0; } .pagination-prev a, .pagination-next a, .wp-pagenavi a, .wp-pagenavi .current, .wp-pagenavi .pages, .older-comments, .newer-comments { display: block; float: left; width: auto; height: 24px; line-height: 24px; margin: 0 5px 0 0; padding: 0 8px; text-align: center; text-decoration: none; } .pagination-prev a:hover, .pagination-next a:hover, .wp-pagenavi a:hover, .wp-pagenavi .current { } .pagination-prev a, .pagination-next a { float: none; margin: 0px; } .pagination-prev, .pagination-next { float: left; width: auto; margin: 0px; } .pagination-prev { float: right; } .wp-pagenavi .pages { float: right; margin: 0px; } .wp-pagenavi { font-size: .75em; } /*//////////////////////////////////////////////////////////////////// // 12 - Footer ////////////////////////////////////////////////////////////////////*/ #footer { margin: 0 auto; max-width: 960px; color: #fff; background: #fff; font-family: intro-regular, sans-serif; font-size: 12px; font-weight: normal; text-transform: uppercase; } #footer .widgetBox h3 { color: #FFFFFF; } #footer .meta { color: #919191; } #footer .main { padding: 30px 0 1% 0; margin: 0 3.5% 0 3.5%; } .footerBox { margin: 15px 1.4% 15px 3.5%; float: left; position: relative; width: 27%; } .footerBox p { padding: 0; } #footer .secondary { margin: 0 3.5% 0; } .menu-footer-menu-container { clear: both; float: left; width: 100%; overflow: hidden; } #menu-footer-menu { float: left; position: relative; left: 50%; margin: 0 auto; padding: 0; list-style-type: none; } #menu-footer-menu li { float: left; position: relative; right: 50%; } #menu-footer-menu a { width: auto; display: block; padding: 12px 12px; line-height: 1.5em; color: #222; text-decoration: none; } #menu-footer-menu a:hover { background: #aa0000; color: #fff; } /*//////////////////////////////////////////////////////////////////// // 13 - Backgrounds ////////////////////////////////////////////////////////////////////*/ body.bkgTest { background: #dadbdb url(images/bkg_test.jpg); } body.bkgGrid { background: #dadbdb url(images/bkg_grid.jpg); } body.bkgScratches { background: #dadbdb url(images/bkg_scratches.jpg); } body.bkgNoise { background: #dadbdb url(images/bkg_noise.jpg); } /*//////////////////////////////////////////////////////////////////// // 14 - Media Queries ////////////////////////////////////////////////////////////////////*/ /* iPad Portrait */ @media only screen and (max-width: 768px) { body { padding: 0; } #metacontainer { border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #container { max-width: 960px; margin: 0 auto; border: none; } #footer { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #homeMessage p { font-size: 30px; line-height: 1em; } #content.twoThird { width: 94% !important; float: none; } .single-projects #content { width: 93%; } #content .project.small { width: 30.50%; margin: 0 10px 20px 0 !important; } #content .project.small h1{ font-size: 11px !important; } #content .project.small img { max-width: 100%; height: auto; } .project_text { float: none; width: 100%; margin: 0 !important; } .project_content { float: none; width: 100%; } .videoContainer { margin: 0px auto; } #sidebar { float: none; width: 96%; margin-left: 2%; padding-bottom: 30px!important; padding-top: 10px; } .widgetBox { width: 45% !important; position:relative; float:left; margin: 0px 2% 2%; } #footer .main{ margin-left: 2%; } #comments { width: 100%;} } /* iPad Landscape */ @media only screen and (max-width: 1024px) { } @media only screen and (max-width: 940px) { } /*layouts smaller than 600px, iPhone and mobiles*/ @media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) { html { -webkit-text-size-adjust: none; } #pageHead h1 { font-size: 1.2em;} #pageHead { padding: 10px 0 10px 0; margin-bottom: 5px; } .flex-direction-nav, .flex-control-nav, .flex-caption { display: none !important;} #mainNav { clear: both; z-index: 2; } #mainNav li{ margin: 0 3% 0 0; } #mainNav ul{ margin: 0 0 0 10px; } #projects .full {width: 100%;} #homeMessage p { margin-bottom: -10px; font-size: 20px; } #content .post { margin-bottom: 20px; padding-bottom: 5px!important; } #content .post h1{ font-size: 1em; line-height: 1.3em; } #content .post .meta{ line-height: 1.5em; } .post .moreLink { display: none; } #content .project.small { margin-bottom: 20px !important; } .pagination { margin-bottom: 30px !important; padding-top: 10px !important; } #projects { margin-left: 5px; width: 96%; } #footer .oneThird{ width: 48%; float: left; margin: 0 2% 2%; } #footer { padding: 0 !important;} #footer #flickrBox .flickrImage { margin: 0 5px 5px 0; } #footer .secondary{ text-align: center; margin-bottom: 0!important; } #footer .secondary p{ margin: 0px; padding: 0px; } #footer .inside { } #footer .secondary .left, #footer .secondary .right{ float: none; padding-bottom: 5px; } .gallery-item img{ width: 90%; } .gallery-item a:hover{ opacity: 0.75; } /*Column Shortcodes------------------*/ .one_half{ width:100%; } .one_third{ width:100%; } .two_third{ width:100%; } .one_half,.one_third,.two_third{ position:relative; margin-right:0%; float:none; } .last{ margin-right:0 !important; clear:right; } .clearboth {clear:both;display:block;font-size:0;height:0;line-height:0;width:100%;} } /* iPhone Landscape */ @media screen and (max-width: 480px) and (orientation: landscape) { .widgetBox { width: 43%; float: left; } #mainNav ul{ margin: 0 0 0 17px; } .page-template-page-portfolio-php #content.full, .home #content.full{ margin-left: 10px!important; margin-right: 0px!important; width: 98% !important; } #content #filterNav { margin-left: 1% !important;} #content .project.small { width: 30.0%; margin-bottom: 10px!important; } #content .thumbs { margin-left: -1px !important; } .widgetBox { width: 94%; float: none; margin: 0 0 20px 2%; } } /* iPhone Portrait */ @media screen and (max-width: 480px) and (orientation: portrait) { #mainNav { margin-left: 2%; width: 96%; } .thumbs.masonry { margin-left: 0; } #content .project.small { width: 100%; } #homeMessage p { padding-top: 0px; font-size: 16px !important; } .post.small { margin-right: 10px !important; } #content .post.withThumb .inside { margin-left: 0px!important; } #content .post.withThumb .postThumb { display: none; } .widgetBox { width: 94% !important; float: none; margin: 0 2% 20px 2% !important; } .page-template-page-portfolio-php #content.full, .home #content.full { margin-left: 15px!important; margin-right: 0px!important; width: 95% !important; } #commentForm input[type="text"], #comments input[type="text"] { width: 40% !important; margin-right: 5px !important; } #commentForm label, #comments label { font-size: .75em; } } /* ///////////////////////////////////////////////////////////////////// // 15 - Seiten /////////////////////////////////////////////////////////////////////*/ /* ///////////////////////////////////////////////////////////////////// // 15.1 - Seite HOME /////////////////////////////////////////////////////////////////////*/ .page-id-1487 #main { /* HOME > SECTION 'TEASER' */ background-color: #888; /* 170511 lz: Schriftkontrast optimieren */ padding-left: 0; /* 170719 lz: Hor. Seitenraender aushebeln fuer randlose Sections */ padding-right: 0; /* 170719 lz: Hor. Seitenraender aushebeln fuer randlose Sections */ } #projekte h1, #projekte h2, #projekte h3, #projekte p, #projekte a, #projekte .teaser-meta, #projekte .teaser-meta a { color: #fff !important; } p:empty { /* LEERE ABSAETZE Z.B. DURCH SPALTEN-SHORTCODES */ display: none !important; /* 170426 lz: Entfernen */ } .page-id-1487 section { /* SEITE 'HOME' > SECTIONS ALLG. */ border-top: 1px solid #d4d4d4; /* 170426 lz: Trennlinien zw. Sections */ margin: 20px 3.5%; /* 170426 lz: Raender angleichen an Contentspalte */ } .page-id-1487 section:last-child { /* SEITE 'HOME' > LETZTE SECTION */ margin-bottom: 0px; /* 170426 lz: Kein weiterer Abstand */ } section.slider { /* SEITE 'HOME' > SECTION 'SLIDER' */ border-top: none !important; /* 170426 lz: Trennlinie entfernen */ margin: 0 0 -40px; /* 170426 lz: Abstand nach unten verringern */ } .page-id-1487 #intro { /* SEITE 'HOME' > SECTION 'INTRO' */ background: #b30412; /* 170427 lz: HG rot faerben */ border: none !important; margin: 0; /* 170427 lz: Section randlos gestalten */ max-width: 960px; padding: 20px 3.5% 20px 4%; /* 170427 lz: Vert. Abstaende feinjustieren */ display: flex; /* 170427 lz: Vert. Flexbox erstellen fuer mehrspaltige Gestaltung */ flex-flow: row wrap; /* 170427 lz: Vert. Flexbox erstellen fuer mehrspaltige Gestaltung */ justify-content: space-between; /* 170427 lz: Vert. Flexbox erstellen fuer mehrspaltige Gestaltung */ } #intro-text { width: 68%; } #intro-text p { /* SEITE 'HOME' > SECTION 'INTRO' > INTROTEXT */ color: #fff; margin: 0 6% 5px 6.5%; } #logo, /* SEITE 'HOME' > SECTION 'INTRO' > SPALTE 'LOGO' */ #claim { /* SEITE 'HOME' > SECTION 'INTRO' > SPALTE 'CLAIM' */ background-image:url("http://art-des-lebens.de/wordpress/wp-content/themes/filtered/images/claim.svg"); /* 170427 lz: Claim-Grafik definieren */ background-position: center center; /* 170427 lz: HG-Bild absolut zentrieren */ background-repeat: no-repeat; /* 170427 lz: HG-Bild nicht wiederholen */ background-size: contain; /* 170427 lz: HG-Bild soll HG proportional ausfuellen ohne anzuschneiden */ position: relative; /* 170427 lz: Seitenverhaeltnis 4:3 responsive beibehalten */ width: 18%; } #logo { /* SEITE 'HOME' > SECTION 'INTRO' > SPALTE 'LOGO' */ background-image:url("http://art-des-lebens.de/wordpress/wp-content/themes/filtered/images/logo.svg"); /* 170427 lz: Claim-Grafik definieren */ width: 14%; } #logo-inner, #claim-inner { bottom: 0; /* 170410 lz: Seitenverhaeltnis 4:3 responsive beibehalten */ left: 0; /* 170410 lz: Seitenverhaeltnis 4:3 responsive beibehalten */ position: absolute; /* 170410 lz: Seitenverhaeltnis 4:3 responsive beibehalten */ right: 0; /* 170410 lz: Seitenverhaeltnis 4:3 responsive beibehalten */ top: 0; /* 170410 lz: Seitenverhaeltnis 4:3 responsive beibehalten */ } .page-id-1487 #home-content { /* SEITE 'HOME' > SECTION 'home-content' */ background-color: #fff; border: none; /* 170427: Trennlinie entfernen */ margin: 0; /* 170427 lz: Section randlos gestalten */ } .page-id-1487 #home-content p, .page-id-1487 #home-content h1, .page-id-1487 #home-content h4 { /* SEITE 'HOME' > SECTION 'home-content' */ color: #777 !important; } .page-id-1487 #home-content h1 { /* SEITE 'HOME' > SECTION 'home-content' */ color: #B30412 !important; margin-top: 10px; } .page-id-1487 #home-content h4 { /* SEITE 'HOME' > SECTION 'home-content' */ border-bottom: 1px solid #777; border-top: 1px solid #777; line-height: 1.2em; margin: 0 0 20px 0; padding: 10px 0; text-align: left; } .page-id-1487 #home-content .full { /* SEITE 'HOME' > SECTION 'home-content' */ width: 93%; padding: 20px 3.5% 30px; /* 170426 lz: Raender angleichen an Contentspalte */ } .page-id-1487 #home-content .one_third p { /* SEITE 'HOME' > SECTION 'home-content' > TEXTSPALTEN */ margin-bottom: 0; /* 170426: Abstand entfernen */ } .page-id-1487 #home-content .one_third p:last-child { /* SEITE 'HOME' > SECTION 'home-content' > LEERZEILE AM ENDE JEDER SPALTE */ display: none; /* 170426: Durch Spalten-Shortcode generierte Leerspalten ausblenden */ } #projekte { border: none; margin-top: 0; } #text-6 { display: none; } .home-teaser-projects .teaser-pic + p { /* HOME > PROJEKTE > GEDOPPELTE TEASERBILDER */ display: none; /* 170414 lz: Ausblenden, da ueberfluessig/buggy */ } .home-teaser-projects .teaser { /* HOME > PROJEKTE > TEASER */ margin-bottom: 10px; /* 170414 lz: Abstand reduzieren */ } #masonry-homemore { /* HOME > WEITERLINKS */ background-color: #555; /* 170414 lz: Button dezent hervorheben */ font-size: 14px; max-width: 960px; text-align: center; vertical-align: middle; clear: both; } #masonry-homemore a { /* HOME > WEITERLINKS */ display: block; padding: 12px; /* 170422 lz: Text in Button zentrieren */ } #masonry-homemore:hover, #masonry-homemore:hover a { /* HOME > WEITERLINKS (MOUSEOVER) */ background-color: #aa0000; /* 170414 lz: Button rot faerben */ color: #fff !important; /* 170414 lz: Text weiss belassen */ } /* ///////////////////////////////////////////////////////////////////// // 15.2 - Seite NEWS /////////////////////////////////////////////////////////////////////*/ /* ///////////////////////////////////////////////////////////////////// // 15.3 - Seite THEMEN /////////////////////////////////////////////////////////////////////*/ .page-id-46 #content img { margin: 0; width: 100%; } /* ///////////////////////////////////////////////////////////////////// // 15.4 - Seite PROJEKTE /////////////////////////////////////////////////////////////////////*/ .page-id-140 #content #filterNav li a { background: #777777; border: none; color: #fff !important; cursor: pointer; display: inline-block; float: left; font-size: 12px !important; line-height: 12px; margin: 0 5px 5px 0; padding: 7px 7px 5px !important; position: relative; text-decoration: none; text-transform: uppercase; } .page-id-140 #content #filterNav li a:hover { background: #aa0000; } /* ///////////////////////////////////////////////////////////////////// // 15.5 - Seite VERANSTALTUNGEN /////////////////////////////////////////////////////////////////////*/ .page-id-138 h2 { text-align: left; } .page-id-138 #content img.alignleft, .page-id-138 #content img.alignright, .page-id-138 #content img.aligncenter { margin: 0; width: 100%; } /* ///////////////////////////////////////////////////////////////////// // 15.5.1 - Seite VERANSTALTUNGEN > BENEFIZ /////////////////////////////////////////////////////////////////////*/ .page-id-302 #content img.alignleft, .page-id-302 #content img.alignright, .page-id-302 #content img.aligncenter { margin-bottom: 30px; width: 100%; } /* ///////////////////////////////////////////////////////////////////// // 15.5.2 - Seite Seite VERANSTALTUNGEN > TALK&ART /////////////////////////////////////////////////////////////////////*/ .page-id-311 #content img.alignleft, .page-id-311 #content img.alignright, .page-id-311 #content img.aligncenter { margin-bottom: 30px; width: 100%; } /* ///////////////////////////////////////////////////////////////////// // 15.5.3 - Seite VERANSTALTUNGEN > GOTTESDIENSTE /////////////////////////////////////////////////////////////////////*/ .page-id-313 #content img.alignleft, .page-id-313 #content img.alignright, .page-id-313 #content img.aligncenter { margin-bottom: 30px; width: 100%; } /* ///////////////////////////////////////////////////////////////////// // 15.6 - Seite UEBER UNS /////////////////////////////////////////////////////////////////////*/ #content ul { margin: 0 0 0 0; } .team-social { text-align: center; height: 20%; margin-bottom: 6%; } .page-template-team #teaser-grid { /* SEITE 'TEAM' > TEAMRASTER */ margin-top: 15px; /* 170420 lz: Abstand = Video zu Headline */ } .page-template-team #content ul li.teaser { /* SEITE 'TEAM' > TEAMMITGLIED */ background-color: #555; /* 170418 lz: Teaser von HG absetzen */ margin-bottom: 30px; /* 170420 lz: == Abstand hor. */ padding-bottom: 50px; /* 170420 lz: Leerraum fuer absolut pos. Kontaktlinks schaffen */ position: relative; /* 170420 lz: Wichtig fuer hor. Zentrierung der absolut pos. Kontaktlinks */ text-align: center !important; /* 170418 lz: Alle Texte zentrieren */ } .page-template-team .teaser h3 { /* SEITE 'TEAM' > TEAMMITGLIED > TITEL */ margin: 15px 10px 10px; /* 170423 lz: vert. Abstaende opt. = 20px */ text-align: center !important; /* 170418 lz: Alle Texte zentrieren */ } .team-funktion { /* SEITE 'TEAM' > TEAMMITGLIED > FUNKTION */ line-height: 1.4em; /* 170423 lz: Zeilenabstand ggue. Fliesstext verringern */ margin: 0 10px 20px; /* 170423 lz: vert. Abstaende opt. = 20px */ } .page-template-team .teaser-pic { /* SEITE 'TEAM' > TEAMMITGLIED > PORTRAIT */ background-position: top center; /* Portraits vert. oben anordnen */ border: none; /* 170418 lz: Raender entfernen */ padding-bottom: 100%; /* 170418 lz: Portraits quadratisch proportionieren */ } .page-template-team .contact { /* SEITE 'TEAM' > TEAMMITGLIED > KONTAKTLINKS */ bottom: 0; /* 170420 lz: Kontaktlinks an unterer Containerkante andocken */ left: 50%; /* 170420 lz: Absolut pos. Kontaktlinks hor. zentrieren */ position: absolute; /* 170420 lz: Wichtig fuer Unten-Anordnung der Kontaktlinks */ } .page-template-team .contact-inner { /* SEITE 'TEAM' > TEAMMITGLIED > KONTAKTLINKS (INNENCONAINER) */ align-self: flex-end; /* 170420 lz: Kontaktlinks an unterer Containerkante anheften */ display: flex; /* 170419 lz: Wichtig fuer absolute Zentrierung der Icons */ justify-content: center; /* 170419 lz: Icons hor. zentrieren */ left: -50%; /* 170420 lz: Absolut pos. Kontaktlinks hor. zentrieren */ margin-bottom: 15px; /* 170419 lz: == Teaser oben */ position: relative; /* 170420 lz: Wichtig fuer hor. Zentrierung der absolut pos. Kontaktlinks */ } .page-template-team .roundbutton { /* SEITE 'TEAM' > TEAMMITGLIED > KONTAKTLINKS ALLG. */ background-color: #666; /* 170419 lz: == Seiten-HG */ } .page-template-team .contact .mail:hover { /* SEITE 'TEAM' > TEAMMITGLIED > KONTAKTLINK 'E-MAIL' (MOUSEOVER) */ background-color: #FF7900; /* 170420 lz: == Selbstausgedachte Mailfarbe */ } .page-template-team .contact .facebook:hover { /* SEITE 'TEAM' > TEAMMITGLIED > KONTAKTLINK 'FACEBOOK' (MOUSEOVER) */ background-color: #29487D; /* 170420 lz: == Facebook */ } .page-template-team .contact .instagram:hover { /* SEITE 'TEAM' > TEAMMITGLIED > KONTAKTLINK 'INSTAGRAM' (MOUSEOVER) */ background-color: #BC39A7; /* 170420 lz: == Instagram */ } .page-template-team .contact .xing:hover { /* SEITE 'TEAM' > TEAMMITGLIED > KONTAKTLINK 'XING' (MOUSEOVER) */ background-color: #005A5F; /* 170420 lz: == XING */ } .page-template-team .contact .website { /* SEITE 'TEAM' > TEAMMITGLIED > KONTAKTLINK 'WEBSITE' */ padding: 0 0 0 4px; /* 170420 lz: == Opt. Iconverschiebung ausgleichen */ width: 31px; /* 170420 lz: == Opt. Iconverschiebung ausgleichen */ } .page-template-team .contact .website:hover { /* SEITE 'TEAM' > TEAMMITGLIED > KONTAKTLINK 'WEBSITE' (MOUSEOVER) */ background-color: #ffd800; /* 170420 lz: == Selbstausgedachte Website-Farbe */ } /* ///////////////////////////////////////////////////////////////////// // 15.6.1 - Seite UEBER UNS > STECKBRIEFE /////////////////////////////////////////////////////////////////////*/ .single-team #content { /* PORTRAITSEITE > INHALTSCONTAINER */ margin-bottom: 0; /* 170420 lz: Abstand von Paginierung zu unterem Seitenrand entf. */ } #team-portrait { /* PORTRAITSEITE > ZWEISPALTEN-CONTENT */ align-items: flex-start; /* 170420 lz: Spalten an gemeinsamer Oberkante ausrichten */ display: flex; /* 170420 lz: Flexibleres Layout ermoeglichen */ flex-wrap: wrap; /* 170421 lz: Elemente (mobil) untereinander anordnen */ } #team-portrait h1 { /* PORTRAITSEITE > HEADLINE */ border-bottom: 1px solid #d4d4d4; /* 170420 lz: Trennlinie oben */ margin-bottom: 25px; /* 170420 lz: Abstand nach == Abstand vor */ order: 1; /* 170421 lz: Flex-Element in Desktopansicht Position 1/3 stellen */ padding-bottom: 20px; /* 170420 lz: Abstand Trennlinie zu h1 */ width: 100%; /* 170421 lz: Flex-Element auf volle Zeile verbreitern */ } #team-image { /* PORTRAITSEITE > SPALTE 'BILD' */ display: inline-block; /* 170420 lz: Spalten nebeneinander anordnen */ margin-top: 4px; /* 170420 lz: Vert. buendig zu Textspalte setzen */ order: 2; /* 170421 lz: Flex-Element in Desktopansicht Position 2/3 stellen */ width: 33%; /* 170420 lz: Spalte auf 1/3 Seite skalieren */ } #team-image .teaser-pic { /* STECKBRIEF > SPALTE 'BILD' > BILD */ padding-bottom: 133%; /* 170421 lz: Seitenverhaeltnis == Originalbildformat 480x640px */ } #team-text { /* PORTRAITSEITE > SPALTE 'TEXT' */ display: inline-block; /* 170420 lz: Spalten nebeneinander anordnen */ margin-bottom: 8px; /* 170421 lz: Abstand zu Seitennavi opt. == 35px */ order: 3; /* 170421 lz: Flex-Element in Desktopansicht Position 3/3 stellen */ padding: 0 0 0 5%; /* 170420 lz: Abstand zu Bildspalte ergaenzen */ width: 61%; /* 170420 lz: Spalte auf 2/3 Seite skalieren */ } #team-text h3:first-child { /* PORTRAITSEITE > SPALTE 'TEXT' > ERSTE SUBHEADLINE */ margin-top: 0; /* 170421 lz: Abstand zu Beginn der Textspalte ausgleichen */ } #team-portrait-nav { /* PORTRAITSEITE > SEITENNAVIGATION */ border-top: 1px solid #d4d4d4; /* 170420 lz: Trennlinie unten */ justify-content: center; /* 170420 lz: Fuer responsive Zentrierung der Buttons */ display: flex; /* 170420 lz: Fuer responsive Zentrierung der Buttons */ padding-top: 15px; /* 170420 lz: Abstand Trennlinie zu Buttons opt. == 20px */ } .single-team .roundbutton.next a, /* PAGINIERUNG 'ZURUECK' */ .single-team .roundbutton.prev a { /* PAGINIERUNG 'ZURUECK' */ align-items: center; /* 170420 lz: Icon vert. zentrieren */ border-radius: 40px; /* 170420 lz: Link rund gestalten */ display: flex; /* 170420 lz: Wichtig fuer absolute Zentrierung des Icons */ height: 100%; /* 170420 lz: Link auf volle Groesse des Eltern-DIV erweitern */ justify-content: center; /* 170420 lz: Icon hor. zentrieren */ width: 100%; /* 170420 lz: Link auf volle Groesse des Eltern-DIV erweitern */ } @media only screen and (max-width: 768px) { /* iPad Portrait */ .single-team #team-portrait, /* STECKBRIEF > PORTRAIT */ #team-text { /* STECKBRIEF > SPALTE 'TEXT' */ padding: 0; /* 170421 lz: Spaltensteg entfernen */ width: 100%; /* 170421 lz: Dreispaltigkeit aufheben */ } #team-portrait h1 { /* STECKBRIEF > HEADLINE */ margin-top: 20px; /* 170421 lz: Headline zw. Bild und Trennlinie vert. zentrieren */ } #team-image { /* STECKBRIEF > SPALTE 'BILD' */ margin: 0 -4%; /* 170421 lz: Bild zu randlosem Header umformen */ order: 0; /* 170421 lz: Flex-Element in Mobilansicht direkt unter Hauptmenue verschieben */ width: 108%; /* 170421 lz: Bild zu randlosem Header umformen */ } #team-image .teaser-pic, /* STECKBRIEF > SPALTE 'BILD' > BILD */ #team-image .teaser-pic:hover { /* STECKBRIEF > SPALTE 'BILD' > BILD (MOUSEOVER) */ background-color: #fff; /* 170421 lz: Hover-Effekt in Mobilansicht aushebeln */ background-position: 0 20%; /* 170421 lz: Bildausschnitt korrigieren */ border-bottom: none; /* 170421 lz: Hover-Effekt in Mobilansicht aushebeln */ opacity: 1; /* 170421 lz: Hover-Effekt in Mobilansicht aushebeln */ padding-bottom: 70%; /* 170421 lz: Seitenverhaeltnis auf ca. 4zu3 verbreitern */ } #team-image .teaser-pic:hover { /* STECKBRIEF > SPALTE 'BILD' > BILD */ opacity: 1; /* 170421 lz: Darstellung bei MouseOver nicht veraendern */ } } /* ///////////////////////////////////////////////////////////////////// // 15.7 - Seite SPENDEN /////////////////////////////////////////////////////////////////////*/ .page-id-2 h3 { margin-top: 30px; } /* ///////////////////////////////////////////////////////////////////// // 15.8 - Seite KONTAKT /////////////////////////////////////////////////////////////////////*/ /* ///////////////////////////////////////////////////////////////////// // 16 - Archivseiten /////////////////////////////////////////////////////////////////////*/ .archive #content .post a img { position: relative; float: left; margin-right: 20px; margin-bottom: 10px; } .archive #content { width: 93%; text-align: left; } .archive #content h3 { clear: none; line-height: 14px; margin-bottom: 10px; } .archive #content .meta { text-align: left !important; border: none; padding: 0; margin: 0 0 25px 0; } .archive #content .inside p { margin-bottom: 0px; } /* ///////////////////////////////////////////////////////////////////// // 17 - Videos /////////////////////////////////////////////////////////////////////*/ /* VIDEO-IFRAMES AUF UNTERSEITEN ///////////////////////////////////////////*/ .video { /* VIDEO-CONTAINER */ display: block; /* 170418 lz: Teaserbilder einblenden */ padding-bottom: 57.14%; /* 170418 lz: Seitenverhaeltnis 16:9 definieren */ position: relative; /* 170418 lz: Wichtig fuer festes Seitenverhaeltnis */ width: 100%; /* 170418 lz: Teaserbild fuellt volle Teaserbreite */ } .video iframe { /* VIDEO-CONTAINER > EINGEBETTETES VIDEO */ height: 100%; /* 170418 lz: Umgebenden Container komplett fuellen */ position: absolute; /* 170418 lz: Wichtig fuer festes Seitenverhaeltnis */ top: 0; /* 170418 lz: Wichtig fuer festes Seitenverhaeltnis */ left: 0; /* 170418 lz: Wichtig fuer festes Seitenverhaeltnis */ bottom: 0; /* 170418 lz: Wichtig fuer festes Seitenverhaeltnis */ right: 0; /* 170418 lz: Wichtig fuer festes Seitenverhaeltnis */ width: 100%; /* 170418 lz: Umgebenden Container komplett fuellen */ } /* PLUGIN 'YOURCHANNEL' > VIDEOTEASER ///////////////////////////////////////////*/ .yrc-item-meta, /* VIDEOTEASER > TEXTBOX */ .yrc-name-date.yrc-nd-pie { /* VIDEOTEASER > TEXTBOX (INNER) */ padding: 0 !important; /* 170422 lz: Volle Teaserbreite einnehmen */ width: 100% !important; /* 170422 lz: Volle Teaserbreite einnehmen */ } .yrc-video-title.yrc-item-title { /* VIDEOTEASER > TEXTBOX > HEADLINE */ font-family: intro-regular, sans-serif; /* 170422 lz: == Teaser */ font-size: 18px; /* 170422 lz: == Teaser */ font-weight: normal; /* 170422 lz: == Teaser */ letter-spacing: -0.3px; /* 170422 lz: == Teaser */ line-height: 22px; /* 170422 lz: == Teaser */ margin: 10px 0 15px; /* 170422 lz: == Teaser */ text-align: left; /* 170422 lz: == Teaser */ text-transform: uppercase; /* 170422 lz: == Teaser */ width: 100% !important; /* 170422 lz: Volle Teaserbreite einnehmen */ } .yrc-video-date, /* VIDEOTEASER > META 'DATUM' */ .yrc-video-views, /* VIDEOTEASER > META 'VIEWS' */ .yrc-sub-section-name { /* LIGHTBOX > META > TITEL */ display: none !important; /* 170422 lz: Entfernen */ } .yrc-full-scale.yrc-item, /* VIDEOTEASER */ .yrc-full-scale.yrc-thumb, /* VIDEOTEASER */ .yrc-full-scale.yrc-thumb.yrc-thumb { /* VIDEOTEASER */ border-bottom: 5px solid #888; /* 170511 lz: == Teaser */ transform: none !important; /* 170222 lz: Hover-Effekte YRC-Plugin aushebeln */ transition: all 0.4s ease-out 0s !important; /* 170422: Weich animieren */ } .yrc-item-open:hover .yrc-thumb, /* VIDEOTEASER (MOUSEOVER) */ .yrc-item-adjacent:hover .yrc-thumb, /* VIDEOTEASER (MOUSEOVER) */ .yrc-item-none:hover .yrc-thumb { /* VIDEOTEASER (MOUSEOVER) */ background-color: #666; /* 170220 lz: Auf HG-Farbe abdunkeln */ border-bottom: 5px solid #aa0000; /* 170220 lz: Markierungslinie sichtbar faerben */ opacity: 0.75; /* 170220 lz: Teaserbild 25% transparent abblenden */ transform: none !important; /* 170222 lz: Hover-Effekte YRC-Plugin aushebeln */ transition: all 0.4s ease-out 0s; /* 170422: Weich animieren */ } #yrc-shell-0 .yrc-item { /* VIDEOTEASER */ margin-bottom: 0 !important; /* 170422 lz: Abstand Teaser zu Weiterbutton entfernen */ } .yrc-core .yrc-video:nth-child(n+4) { /* VIDEOTEASER (ALLE AB DEM VIERTEN ELEMENT) */ display: none !important; /* 170717 lz: Verstecken */ } /* PLUGIN 'YOURCHANNEL' > LIGHTBOX ///////////////////////////////////////////*/ .yrc-lightbox .yrc-player { /* LIGHTBOX */ height: 100% !important; /* 170422 lz: Ueber gesamte Seite skalieren */ width: 100% !important; /* 170422 lz: Ueber gesamte Seite skalieren */ } .yrc-lightbox .yrc-player .yrc-player-frame { /* LIGHTBOX > ABSPIELFENSTER */ position: relative; /* 170422 lz: Player vert. zentrieren */ top: 50%; /* 170422 lz: Player vert. zentrieren */ -webkit-transform: translateY(-50%); /* 170422 lz: Player vert. zentrieren */ -ms-transform: translateY(-50%); /* 170422 lz: Player vert. zentrieren */ transform: translateY(-50%); /* 170422 lz: Player vert. zentrieren */ } .yrc-section-action.yrc-player-top-title.yrc-player-bar, /* LIGHTBOX > META */ .yrc-player-bar .yrc-close, /* LIGHTBOX > META > BTN 'CLOSE' */ .yrc-player-bar .yrc-close span { /* LIGHTBOX > META > BTN 'CLOSE' > INHALT */ background-color: rgba(0,0,0,0) !important; /* 170422 lz: HG unsichtbar schalten */ position: fixed; /* 170422 lz: Icons ueber alle anderen Inhalte legen */ z-index: 999 !important; /* 170422 lz: Icons ueber alle anderen Inhalte legen */ } .yrc-close:before { /* LIGHTBOX > BTN 'CLOSE' > ICON */ background-image:url("http://art-des-lebens.de/wordpress/wp-content/themes/filtered/images/icon_close.svg"); /* 170422 lz: Eigenes Icon definieren */ background-size: contain; /* 170422 lz: Eigenes Icon skalieren */ background-position: center center; /* 170422 lz: Eigenes Icon positionieren */ content: " "; /* 170422 lz: Noetig, damit Icon angezeigt wird */ height: 30px; /* 170422 lz: Eigenes Icon skalieren */ opacity: 0.6; /* 170422 lz: == Navi-Pfeile */ position: fixed; /* 170422 lz: Eigenes Icon positionieren */ right: 15px; /* 170422 lz: Eigenes Icon positionieren */ top: 15px; /* 170422 lz: Eigenes Icon positionieren */ transition: all 0.4s ease-out 0s; /* 170422: Lightbox-Steuerelemente animieren */ width: 30px; /* 170422 lz: Eigenes Icon skalieren */ } .yrc-close span { /* LIGHTBOX > BTN 'CLOSE' > LINK */ height: 30px; /* 170422 lz: Link ueber eigenes Icon positionieren */ right: 15px; /* 170422 lz: Link ueber eigenes Icon positionieren */ top: 15px; /* 170422 lz: Link ueber eigenes Icon positionieren */ width: 30px; /* 170422 lz: Link ueber eigenes Icon positionieren */ opacity: 0; /* 170422 lz: Link ueber eigenes Icon positionieren */ } .yrc-page-nav { /* LIGHTBOX > PLAYER > NAVI-PFEILE */ background-color: rgba(0,0,0,0) !important; /* 170422 lz: HG ausblenden */ background-image:url("http://art-des-lebens.de/wordpress/wp-content/themes/filtered/images/icon_arrow.svg") !important; /* 170422 lz: Eigenes Icon definieren */ background-repeat: no-repeat !important; /* 170422 lz: Icon nicht wiederholen */ background-size: contain !important; /* 170422 lz: Eigenes Icon skalieren */ background-position: center center !important; /* 170422 lz: Eigenes Icon positionieren */ display: block !important; /* 170422 lz: Fuer weiches Ein- und Ausfaden der Icons */ height: 35px; /* 170422 lz: Eigenes Icon skalieren */ opacity: 0 !important; /* 170422 lz: Fuer weiches Ein- und Ausfaden der Icons */ padding: 0 50px 0 0 !important; /* 170422 lz: Opt. vert. zentriert zu BTN 'CLOSE' */ position: relative; /* 170422 lz: Icon vert. zentrieren */ text-indent: -1000em; /* 170422 lz: Urspr. Icon verstecken */ width: 19px; /* 170422 lz: Eigenes Icon skalieren */ transition: all 0.4s ease-out 0s; /* 170422: Weich animieren */ } .yrc-player-frame:hover .yrc-page-nav { /* LIGHTBOX > PLAYER (MOUSEOVER) > NAVI-PFEILE */ opacity: 0.6 !important; /* 170422 lz: Fuer weiches Ein- und Ausfaden der Icons */ transition: all 0.4s ease-out 0s; /* 170422: Weich animieren */ } .yrc-close:hover::before, /* LIGHTBOX > BTN 'CLOSE' > ICON (MOUSEOVER) */ .yrc-player-frame .yrc-page-nav:hover { /* LIGHTBOX > PLAYER > NAVI-PFEILE (MOUSEOVER) */ opacity: 1 !important; /* 170422 lz: Fuer weiches Ein- und Ausfaden der Icons */ transition: all 0.4s ease-out 0s; /* 170422: Weich animieren */ } .yrc-prev { /* LIGHTBOX > PLAYER > BTN 'PREV' */ padding: 0 0 0 50px !important; /* 170422 lz: Abstand zu linkem statt rechtem Seitenrand */ transform: rotate(180deg); /* 170422 lz: Icon "spiegeln" */ } @media only screen and (max-width: 768px) { /* iPad Portrait */ .yrc-player-frame:hover .yrc-page-nav { /* LIGHTBOX > PLAYER > NAVI-PFEILE */ opacity: 0 !important; /* 170422 lz: In Mobilansicht entfernen */ } .yrc-close:before, /* LIGHTBOX > BTN 'CLOSE' > ICON */ .yrc-close span { /* LIGHTBOX > BTN 'CLOSE' > LINK */ height: 20px; /* 170422 lz: Mobil verkleinern */ right: 10px; /* 170422 lz: Mobil verringern */ top: 10px; /* 170422 lz: Mobil verringern */ width: 20px; /* 170422 lz: Mobil verkleinern */ } } /* ///////////////////////////////////////////////////////////////////// // 18 - Suchergebnisse /////////////////////////////////////////////////////////////////////*/ .search #content .post a img { position: relative; float: left; margin-right: 20px; margin-bottom: 10px; } .search #content { width: 93%; text-align: center; } .search #content .post .suchergebnis { text-align: left; } .search #content .post .suchergebnis h3 { clear: none; line-height: 14px; } .search #content .post .suchergebnis-keins, .search #content .post .suchergebnis-keins h3 { text-align: center; }