/* ============================================================================================================================================================================================================================================================================================================================ S P D - H U : T H E M E S T Y L E S H E E T ========================================================================================================================================================================================================================== (c) 2014-15 Marc Brasch fuer die SPD Henstedt-Ulzburg ===========================================================================================================================================================================*/ @charset "utf-8"; /*======== T Y P O G R A F I E ========*/ /* Schriftart */ body { font-family: 'Open Sans', sans-serif !important; } /* Schriftfarben */ body { color:#333; } .teaser { color:#fff !important; } /* Schriftabstände */ h1, .h1, h2, .h2, h3, .h3, h4, h5, h6 { margin:0px; padding:0px; } /* Schriftgroessen */ body { font-size: 16px; line-height:28px; } h1, h2 {position:relative; padding:0px 10px; font-size:46px; line-height: 56px; font-weight:bold; text-transform:uppercase;} h2 { padding-top:0px 10px !important;font-style:italic; font-weight:400; } h3 { margin-bottom:20px; font-size:32px; line-height:42px; text-transform:uppercase; } h4 { display:block; text-align:left; font-style:italic; font-size:22px; line-height:26px; } /* Links */ a, a span { color:#60bed4; font-weight:bold; text-decoration:none;} a:hover { text-decoration:underline;} a:visited, a:focus { color:#60bed4; text-decoration:none; } .ein_beitrag a { color:#60bed4; } .aehnlicheartikel a { color:#60bed4;} /*Begruessung*/ .willkommen { padding: 30px 30px 0 10px; } .willkommen h4 { display:block; padding-left:0px !important; font-size:34px; line-height:38px; font-weight:bolder; } .willkommen h4 i { display:block;font-size:32px; line-height:36px; color:#555; font-style:normal; font-weight:600; opacity:0.6;} /*Initiale*/ .ein_beitrag .entry-content p:nth-child(2):first-letter { font-size:70px; font-weight:600; line-height:58px; } /* Singlepage */ .ein_beitrag p { font-size:18px; line-height:30px; text-align:justify; } .ein_beitrag h1 { text-align:center; font-weight:600; font-size:20px; line-height:30px;} .ein_beitrag h2 { text-align:center; font-size:38px; line-height:46px; font-style:normal; font-weight:bolder; } /* Aehnliche Artikel */ .aehnlicheartikel h1 { font-size:18px; line-height:26px; text-transform:uppercase; color:#60bed4 !important; } .aehnlicheartikel h2 { font-size:18px; line-height:26px; font-weight:400; text-transform:none; } .aehnlicheartikel h3 { text-align:center; } .aehnlicheartikel h4 { font-size:14px !important; line-height:20px !important; color:#222; font-style:normal; text-align:center; font-weight:600; letter-spacing:0.2em; } /* Events */ .event p { font-size:16px; line-height:28px; } /* Anzeigecontainer */ /* Eventkalender */ .anzeigecontainer .kalender h4 { } .kal li table tr td tag { font-weight:bolder; color:#666; } .kal li table tr td monat { font-weight:bolder; color:#666; text-transform:uppercase; } .kal li table tr td uhrzeit { font-size:15px; font-weight:500 !important; color:#666; display:block;} .kal li table tr td h2 { color:#60bed4; font-size:16px; font-weight:bold; font-style:normal; line-height:24px; } /* Mitglied werden */ .anzeigecontainer .mitglied h4 { } .anzeigecontainer .mitglied .info { line-height:22px; text-align:justify; } .anzeigecontainer .mitglied ul li span { text-align:center !important; font-size:14px; line-height:18px; } /* Kontakt */ .anzeigecontainer .kontakt h4 { } .anzeigecontainer .info { display:block; margin:-20px 0 35px; padding:0px; font-size:14px; line-height:18px; text-align:center; color:#aaa;} /* Archiv */ .archiv h1, .archiv h2 { font-size:50px; line-height:54px; } .archiv h3 { text-transform:uppercase; } .arch-teaser h1, .arch-teaser h2 { color:#111; font-size:20px; line-height:26px; text-shadow:0 0 10px #fff; text-align:center; } .arch-teaser h1 { font-weight:bold; } .arch-teaser h2 { font-weight:500; } .arch-teaser subhead { font-size:14px; line-height:20px; text-align:center; font-weight:400; color:#111; text-shadow: 0px 0px 3px #fff; } .pagination { clear:both; display:block; padding:15px 5px; } .pagination .page-numbers { vertical-align:bottom; display:inline-block; padding:4px 7px; margin:2.5px; height:35px; width:35px; background-color:#ccc; color:#222; cursor:pointer; font-weight:700; background-size:200%; opacity:0.6; } .pagination .page-numbers:hover { opacity:1; } .pagination .page-numbers.current { background-color:#ed1c24; color:#fff; font-weight:bold; opacity:1; } .pagination .prev { background-image:url(../img/pfeilegrau.png); background-position:left; } .pagination .next { background-image:url(../img/pfeilegrau.png); background-position:right; } .pagination .float-right { margin-right:10px; } /* Suche */ .suche h1, .suche h3 { text-align:center; } .no-results p { font-size:18px; } .no-results .entry-content p:first-child { font-weight:400; } /* Fraktion und Ortsverein */ .fraktion h1.entry-title { font-size:60px; line-height:60px; font-weight:bolder; } .mitglied .mitgliedbeschreibung h5 { font-size:24px; line-height:26px;font-weight:bold; font-variant:normal !important; } .mitglied .mitgliedbeschreibung b { font-size:18px; line-height:20px; color: #60bed4; font-weight:600; } .mitglied .mitgliedbeschreibung i { font-size:16px; line-height:24px; text-transform:none; font-style:normal; } .mitglied .mitgliedbeschreibung .kontaktinfo { font-size:14px; line-height:20px; color:#aaa; text-transform:none; font-style:normal; } .ortsverein h1.entry-title { margin:0px; padding:0px !important; font-size:60px;line-height:60px; font-weight:bolder; } .ortsverein .entry-title i { font-size:28px; line-height:32px; font-style:normal; font-weight:bold; color:#222; text-transform:uppercase; } /* Thema des Monats */ .thema h1.entry-title { font-size:60px; line-height:58px; font-weight:bolder; } /*======== G E N E R E L L E S ========*/ *{ -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; } .clearfix { display:block; } #wrapper { position: relative; min-height: 100vh; } #content { padding-bottom:120px; } html { margin-top:0px !important; } ol, ul { margin:0px; padding:0px; list-style:none; } li { margin:0px; padding:0px; } .abstandnull { margin:0px !important; padding:0px; } .text-left { text-align:left !important; } .padding {padding:20px; } .padding-right { padding-right:40px; } .padding-20 { padding:0 20px; } .float-right { float:right; } .hyphenate { text-align:justify;} .kategorie { position:relative; } .video { width:100%; height:408px; margin:30px 0;} .transparent { background-color:transparent;} img { margin:5px 0 10px; } img.quer { width:100%; height:auto; } img.hoch { width:40%; height:auto; float:left; margin-top:10px; margin-right:25px; } /* Image Slider */ .ppt { background-image:none !important; } /*======== H E A D E R ========*/ /* Header */ header { position:relative; display:block; margin:40px auto 10px; padding:0 50px; width:100%; height: 100px; } header.entry-header { z-index:28; background-color:transparent; } header .logo { position:relative; display:block; margin:0px auto; width:98px; height:98px; background-image:url(../img/logo_sm.jpg); background-size:100%; cursor:pointer; } /* Navigation */ nav { position:absolute; bottom:0px; left:0px; display:block; width:100%; height:40px; text-align:center; font-size:14px; font-weight:bold; text-transform:uppercase; } nav ul { position:relative; float:left; } nav ul.nav_rechts { float:right; } nav ul li { float:left; padding:8px 10px 0; height:40px; cursor:pointer; color:#ed1c24;} nav ul li:hover { background-color:#ed1c24; color:#fff;} nav ul:first-child li:first-child { padding:0px 15px; width:40px; background-image:url(../img/home.png); background-size:200%; background-position:left; } nav ul:first-child li:first-child:hover { background-position:right; background-color:inherit; } nav ul.nav_rechts li:nth-child(3) { padding:5px; padding-right:0px; margin-left:5px; } nav ul.nav_rechts li:nth-child(3):hover { background-color:inherit; } nav ul.nav_rechts form { margin-top:-3px;} nav ul.nav_rechts #nav_suchleiste input { padding:0px 5px 0px; width:180px; height:30px; border:2px solid #ed1c24; outline:0px; background-color:transparent; font-weight:normal; font-style:italic; color:#ed1c24; } nav ul.nav_rechts li #suchbutton { margin:5px 0px 5px; width:30px; height:30px; background-image:url(../img/search.png); background-size:200%; background-position:right; color:transparent; } nav ul.nav_rechts li #suchbutton:hover { background-color:inherit; background-position:right; } /*======== B U R G E R M E N U ========*/ /* Burgerfunktion */ #burgerbutton { position:fixed; display:inline-block; z-index:100; top:20px; left:20px; height:30px; width:30px; background-size:200%; background-position:left; background-image:url(../img/burgerbutton.png); opacity:1; cursor:pointer; } #burgerbutton:hover { -webkit-animation: icons 0.7s linear; -moz-animation: icons 0.7s linear; -ms-animation: icons 0.7s linear; -os-animation: icons 0.7s linear; animation: icons 0.7s linear; } .burgermenu { position:fixed; display:block; z-index:100; top:0px; left:-200px; padding:70px; height:110vh; width:610px; background-color:#60bed4; background-image:-webkit-linear-gradient(top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%); background-image:-moz-linear-gradient(top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%); background-image:-ms-linear-gradient(top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%); background-image:-o-linear-gradient(top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%); background-image:linear-gradient(top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%); box-shadow:0px 0px 50px rgba(0,0,0,0.5); -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -ms-transition:0.5s ease-in-out; -o-transition:0.5s ease-in-out; transition:0.5s ease-in-out; visibility:hidden; opacity:0;} .burgermenu.active { left:0px; visibility:visible; opacity:1; } .burgermenu #closeburger { position:absolute; display:inline-block; top:32px; right:30px; height:20px; width:20px; cursor:pointer; background-size:100%; background-image:url(../img/close4.png); opacity:0.5; -webkit-animation: leuchten 2s ease-in-out infinite alternate; -moz-animation: leuchten 2s ease-in-out infinite alternate; -ms-animation: leuchten 2s ease-in-out infinite alternate; -o-animation: leuchten 2s ease-in-out infinite alternate; animation: leuchten 2s ease-in-out infinite alternate; } .burgermenu #closeburger:hover { -webkit-animation: icons 0.7s linear; -moz-animation: icons 0.7s linear; -ms-animation: icons 0.7s linear; -o-animation: icons 0.7s linear; animation: icons 0.7s linear; opacity:0.8; } /* Burgericons */ #iconlist { position:relative; left:0px; width:100%; margin:10px auto 0; -webkit-transition:1s ease-in-out; -moz-transition:1s ease-in-out; -ms-transition:1s ease-in-out; -o-transition:1s ease-in-out; transition:1s ease-in-out;} #iconlist.scale { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5);transform: scale(0.5);} #iconlist li { position:relative; float:left; padding:20px; margin:8px; width:140px; height:140px; background-color:#fff; cursor:pointer; -webkit-transition:0.1s ease-in-out; -moz-transition:0.1s ease-in-out; -ms-transition:0.1s ease-in-out; -o-transition:0.1s ease-in-out; transition:0.1s ease-in-out; background-size:100%; opacity:0.7; background-image:-webkit-linear-gradient(top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.07) 100%); background-image:-moz-linear-gradient(top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.07) 100%); background-image:-ms-linear-gradient(top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.07) 100%); background-image:-o-linear-gradient(top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.07) 100%); background-image:linear-gradient(top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.07) 100%); } #iconlist li.spd { opacity:1 !important; background-color:#ed1c24; } #iconlist li:hover { opacity:0.9;} #iconlist li span { position:absolute; bottom:0px; left:0px; padding:12px 15px; text-align:left; line-height:20px; font-weight:600; color:#555; } #iconlist li img { position:absolute; top:10px; right:15px; width:45%; opacity:0.5; } #iconlist li:hover img { -webkit-animation: icons 0.7s linear; -moz-animation: icons 0.7s linear; -ms-animation: icons 0.7s linear; -o-animation: icons 0.7s linear; animation: icons 0.7s linear; opacity:0.8; } /* Burgersuchleiste */ .burgermenu .suchleiste { position:absolute; bottom:15vh;} .burgermenu .suchleiste input { padding: 6px; width:95%; border:none; outline:none; font-size:40px; line-height:60px; font-weight:400; background-color:transparent; color:rgba(0,0,0,0.8); } .burgermenu .suchleiste input::-webkit-input-placeholder { color:rgba(0,0,0,0.8); } .burgermenu .suchleiste input::-moz-input-placeholder { color:rgba(0,0,0,0.8); } .burgermenu .suchleiste input::-ms-input-placeholder { color:rgba(0,0,0,0.8); } .burgermenu .suchleiste input::-o-input-placeholder { color:rgba(0,0,0,0.8); } .burgermenu .suchleiste input::input-placeholder { color:rgba(0,0,0,0.8); } .burgermenu .suchleiste .burgermenu_suchuntertext { display:block; margin-top:-15px; padding:6px; font-size:18px; color:rgba(0,0,0,0.8);} /*======== A N I M A T I O N E N ========*/ /* Wippen */ @-webkit-keyframes icons { 0% { margin-top:0px; } 20% { margin-top:5px;} 30% { margin-top:-3px;} 50% { margin-top:2px; } 80% { margin-top:0px;} } @-moz-keyframes icons { 0% { margin-top:0px; } 20% { margin-top:5px;} 30% { margin-top:-3px;} 50% { margin-top:2px; } 80% { margin-top:0px;} } @-ms-keyframes icons { 0% { margin-top:0px; } 20% { margin-top:5px;} 30% { margin-top:-3px;} 50% { margin-top:2px; } 80% { margin-top:0px;} } @-o-keyframes icons { 0% { margin-top:0px; } 20% { margin-top:5px;} 30% { margin-top:-3px;} 50% { margin-top:2px; } 80% { margin-top:0px;} } @keyframes icons { 0% { margin-top:0px; } 20% { margin-top:5px;} 30% { margin-top:-3px;} 50% { margin-top:2px; } 80% { margin-top:0px;} } /* Leuchten */ @-webkit-keyframes leuchten { 0% { opacity:0.5; } 70% {opacity:0.5; } 100% { opacity: 0.8; } } @-moz-keyframes leuchten { 0% { opacity:0.5; } 70% {opacity:0.5; } 100% { opacity: 0.8; } } @-ms-keyframes leuchten { 0% { opacity:0.5; } 70% {opacity:0.5; } 100% { opacity: 0.8; } } @-o-keyframes leuchten { 0% { opacity:0.5; } 70% {opacity:0.5; } 100% { opacity: 0.8; } } @keyframes leuchten { 0% { opacity:0.5; } 70% {opacity:0.5; } 100% { opacity: 0.8; } } /*======== T E A S E R B I L D ========*/ /* Contentslider */ .artikel { position:relative; margin-top:5px; width:100%; height:600px; overflow:hidden; } .teaser { position:absolute; display:block; clear:both; top:0px; left:0px; height:100%; margin-bottom:100px; padding:40px; width:100%; background-color:#ed1c24; background-size:cover; background-position:center; cursor:pointer; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out;} .teaser:nth-child(1) { z-index:2;} .teaser:nth-child(2) { left:100%; z-index:0; } .teaser:nth-child(3) { left:-200%; z-index:0; } .teaser:nth-child(4) { left:-100%; z-index:1; } .teaser:nth-child(even) { background-color:#990066; } .teaserbgbild { display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; cursor:pointer; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out;} .teaser:hover .teaserbgbild { -webkit-filter:grayscale(1) contrast(1.5); -moz-filter:grayscale(1) contrast(1.5); -ms-filter:grayscale(1) contrast(1.5); -o-filter:grayscale(1) contrast(1.5); filter:grayscale(1) contrast(1.5); } .teaser header { position:relative; display:block; z-index:100; z-index:100; margin:0px !important; padding:0px !important; } .teaser article { margin:0px !important; padding:0px !important;} .teaser h1, .teaser h2 { position:relative; z-index:100; width:70%; text-shadow: 0px 1px 2px rgba(0,0,0,0.8); } .teaser h2 { width:80%; } .tags { position:absolute; visibility:hidden; z-index:10; bottom:30px; right:40px; width:80%; text-align:right; font-size:26px; line-height:36px; color:#fff; } .tags a { position:relative; visibility:visible; z-index:10; float:right; margin-left:18px; color:#fff; opacity:0.6; cursor:pointer; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; font-weight:500; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .blende { position:absolute; bottom:0; left:0; width:100%; height:70%; background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5)); -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5)); -ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5)); -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5)); linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5)); } .tags a:before { content:'#'; } .tags a:hover { opacity:1; } #beitrag .tags a:hover { color:#fff; } /* Pfeilnavigation */ .pfeile { position:absolute; top:0px; left:0px; width:100%; height:600px; } .pfeile span#pfeil_links, .pfeile span#pfeil_rechts { position:absolute; display:block; top:50%; margin:-20px 0 0 -10px; width:50px; height:50px; cursor:pointer; background-image:url(../img/pfeile.png); background-size:200%; background-position:left; z-index:10 !important; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out;} .pfeile span#pfeil_rechts { right:0px; margin-right:-10px; background-position:right;} .pfeile span:hover { width:60px !important; height:60px !important; margin-top:-25px !important; box-shadow:0px 0px 2px #000; } .pfeile span#pfeil_links:hover { margin-left:-15px !important; } .pfeile span#pfeil_rechts:hover { margin-right:-15px !important; } /*======== T O U C H R E I T E R ========*/ /* Touch-Reiter */ #touch-reiter { margin-top:15px; } #touch-reiter ul { margin:0px 0 14px 0px; padding:0px; width:100%; } #touch-reiter ul li { position:relative; float:left; cursor:pointer; width:25%; height:90px; background-color:rgba(0,0,0,0.05); z-index:2; -webkit-transition:0.1s ease-in-out; -moz-transition:0.1s ease-in-out; -ms-transition:0.1s ease-in-out; -o-transition:0.1s ease-in-out; transition:0.1s ease-in-out; } #touch-reiter ul li .img { display:block; position:absolute; right:10px; top:30px; height:65px; width:65px; background-size:200%; background-repeat:no-repeat; background-position: right; opacity:0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: top opacity 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #touch-reiter ul li.select .img { opacity:1; top:8px; } #touch-reiter ul li:nth-child(even) { background-color:rgba(0,0,0,0.1); } #touch-reiter ul li:hover p { color:#fff; } #touch-reiter ul li.select:hover p { color:#fff; } #touch-reiter ul li.select, #touch-reiter ul li.select:hover { background-color:#990066; } #touch-reiter ul li:hover { background-color:rgba(153,0,102,0.6); } #touch-reiter ul li p { display:block; position:absolute; bottom:0px; left:0px; margin:10px 0; padding:4px 17px 25px; width:100%; font-size:14px; line-height:18px; text-transform:uppercase; font-weight:bold; text-align:left; color:#777; text-align:left; -webkit-transition:padding 0.2s ease-in-out; -moz-transition: padding 0.2s ease-in-out; -ms-transition: padding 0.2s ease-in-out; -o-transition:padding 0.2s ease-in-out; transition: padding 0.2s ease-in-out; } #touch-reiter ul li.select p { color:#fff; opacity:1; padding-bottom:40px; } #touch-reiter li:after { content:''; position:absolute; opacity:1; z-index:-1; bottom:-10px; left:35%; margin-left:-10px; width:20px; height:20px; background-color:#990066; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); -webkit-transition:0s ease-in-out; -moz-transition:0s ease-in-out; -o-transition:0s ease-in-out; -ms-transition:0s ease-in-out; transition:0s ease-in-out; opacity:0;} #touch-reiter ul li.select:after { opacity:1; z-index:100; -webkit-transition:0.2s ease-in-out; -moz-transition:0.2s ease-in-out; -ms-transition:0.2s ease-in-out; -o-transition:0.2s ease-in-out; transition:0.2s ease-in-out; } /* Anzeigecontainer */ .anzeigecontainer { position:relative; margin-bottom:20px; } .anzeigecontainer article { display:none; opacity:0; visibility:hidden; width:100%; -webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -ms-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; } .anzeigecontainer article.active { visibility:visible; opacity:1; } .anzeigecontainer select { padding:5px; width:20%; } .anzeigecontainer .mitglied, .anzeigecontainer .kontakt { margin-top:60px; } .mitglied h3, .kontakt h3 { color:#222; } .mitglied h4 { width:60%; color:#222; } .mitglied p { margin-bottom:30px; } .klappmenu { padding:45px; } .kontakt h3 { margin-top:30px; } .kontakt p { padding-right:60px; margin-bottom:30px; } .anzeigecontainer .kontakt, .anzeigecontainer .mitglied { padding:0px 0px;} .anzeigecontainer p { display:block; } .anzeigecontainer dl { margin:0px; } .anzeigecontainer dd { display:block; margin:5px 0; width:100%; outline:none; } .anzeigecontainer dd input { padding:15px; margin-top:11px; width:100%; border: 2px solid #990066; outline:none; } .anzeigecontainer dd textarea { margin-top: 14px; padding:15px; width:100%; height:200px; border: 2px solid #990066; outline:none;} .anzeigecontainer input[type=checkbox] { visibility: hidden; } .anzeigecontainer dd.name,.anzeigecontainer dd.mail { float:left; margin:0 7px 0px 0; width:-webkit-calc(50% - 7px); width:-moz-calc(50% - 7px); width:-ms-calc(50% - 7px); width:-o-calc(50% - 7px); width:calc(50% - 7px); } .anzeigecontainer dd.mail { margin-right:0px; margin-left:7px; } .anzeigecontainer dd.nachricht { display:block; width:100%; margin-top:15px; height:250px; } .anzeigecontainer dd.nachricht.sm { margin-bottom:30px; clear:both; height:100px; } .anzeigecontainer .check { display:table; margin:5px 0; width:100%; } .anzeigecontainer .check .checkbox { float:left; margin-right:10px; width:20px; } .anzeigecontainer .check input { display:block; float:left; width:-webkit-calc(100% - 40px); width:-moz-calc(100% - 40px); width:-ms-calc(100% - 40px); width:-o-calc(100% - 40px); width:calc(100% - 40px);} .anzeigecontainer text { display:block; width:90%; margin:-3px 0 0 25px; } .anzeigecontainer input.submit { display:block; margin-top:30px; right:10px; float:right; padding:13px 20px; font-weight:600; border:none; background-color:#990066; color:#fff; } .anzeigecontainer input.submit:hover { opacity:0.9; } .kalender dl { display:none;} .kalender_teaser { display:block; position:relative; height:500px; background-color:#fff; cursor:pointer; } .kalender_teaser .bild-overflow { position:absolute; display:block; top:0; left:0; height:100%; width:100%; overflow:hidden; } .kalender_bild { display:block; position:absolute; top:0px; left:0; width:100%; height:100%; background-size:cover; background-position:center; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out;} .kalender_bild:hover, .kalender_bild.hover { -webkit-filter:grayscale(1) contrast(1.5); -moz-filter:grayscale(1) contrast(1.5); -ms-filter:grayscale(1) contrast(1.5); -o-filter:grayscale(1) contrast(1.5); filter:grayscale(1) contrast(1.5); } .bild-overflow:after { content:''; position:absolute; bottom:-15px; left:50%; margin-left:-15px; height:30px; width:30px; background-color:#fff; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .kalender_teaser.slim .datum_kasten { display:block; position:absolute; bottom:0px; left:0px; padding-bottom:35px; width: 100%; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; } .kalender_teaser.slim:nth-child(odd) .datum_kasten { } .kalender_teaser .datum_rahmen { position:relative; display:block; border-right:3px solid #333; padding-right:30px; width:180px; height:120px; float:left; } .kalender_teaser .datum { display:block; position:absolute; padding:0 10px; width:100%; height:100%; margin-left:10px; } .datum { text-align:center; font-size:16px; line-height:26px;font-weight:500; text-transform:uppercase; letter-spacing:0.1em; color:#222; } .tag { display:block; font-size:30px; line-height:40px; font-weight:600; } .mon { margin-top:2px; display:block; font-weight:600; } .ort { margin-top:2px; display:block; } .zeit { display:blocK; font-weight:500;} .veranstaltung { display:block; font-size:30px; line-height:40px; font-weight:600; text-transform:uppercase; } .kalender_teaser .title_rahmen { display:block; position:relative; padding-left:30px; float:left; width:60%; color:#222; font-size:16px; line-height:26px; text-transform:uppercase; font-weight:500; } .kalender_teaser.slim { height:180px; margin-bottom:0; background-color:transparent; } .kalender_teaser:hover .veranstaltung, .kalender_teaser.hover .veranstaltung { text-decoration:underline; } .kalender_teaser.bg .datum_rahmen {display:none; } .kalender_teaser.bg { margin-bottom:50px; } .kal_marg { margin-top:50px; } .kalender_teaser.slim { padding-top:20px; height:160px; border-left:0px solid transparent;} .kalender_teaser.slim.margin-top { padding-top:20px; } .kalender_teaser.slim .datum, .kalender_teaser.slim .title_rahmen { color:#222; text-shadow:none; } .kalender_teaser b { font-weight:600; } #veranstaltung { position:relative; } #veranstaltung h1 { padding:0; } #veranstaltung .kalender_teaser { position:relative; margin-top:10px; margin-bottom:5px; height:500px; background-color:rgba(96,190,212,0.4); cursor:default; } #veranstaltung .kalender_teaser.bg .datum_kasten { bottom:25px; background-image:none;} #veranstaltung .kalender_teaser.bg .datum_rahmen { border-color:#fff; } #veranstaltung .kalender_teaser.bg .datum_kasten .datum, #veranstaltung .kalender_teaser.bg .title_rahmen { color:#fff; } #veranstaltung .kalender_teaser.bg .tag, #veranstaltung .kalender_teaser.bg .mon, #veranstaltung .kalender_teaser.bg .jah, #veranstaltung .kalender_teaser.bg .veranstaltung, #veranstaltung .kalender_teaser.bg .ort, #veranstaltung .kalender_teaser.bg .zeit { text-shadow: 0 2px 2px rgba(0,0,0,0.5); } #veranstaltung .kalender_teaser.slim { height:200px; } #veranstaltung .datum_kasten { padding-bottom:10px; } .kalender_teaser.bg .datum_kasten { display:block; } #veranstaltung .datum_rahmen { margin-left:20px; background-color:transparent; border-right:thin solid #222; } #veranstaltung .datum_kasten { padding-bottom:32px; } #veranstaltung .kalender_teaser.bg .datum_kasten { width: 100%; padding-top:10px; padding-bottom:10px; } #veranstaltung .datum_kasten { position:absolute; bottom:0px; left:0px; width:100%; } #veranstaltung .kalender_teaser:hover .veranstaltung { text-decoration:none; } #veranstaltung .kalender_teaser.detailveranstaltung .tag, #veranstaltung .kalender_teaser.detailveranstaltung .mon, #veranstaltung .kalender_teaser.detailveranstaltung .jah, #veranstaltung .kalender_teaser.detailveranstaltung .veranstaltung, #veranstaltung .kalender_teaser.detailveranstaltung .ort, #veranstaltung .kalender_teaser.detailveranstaltung .zeit { color:#fff; } #veranstaltung .detailveranstaltung .datum_rahmen { border-color:#fff; } #veranstaltung .veranstaltung, #veranstaltung .tag { font-weight:700; } #veranstaltung ul { padding-top:10px; } #veranstaltung ul li { padding-bottom:10px; } .aehnlicheartikel ul li ul, .aehnlicheartikel ul li ul li { margin:0; padding:0; } #veranstaltung b {font-weight:600; } #veranstaltung .aehnlicheartikel { margin-top:0px; } #veranstaltung .mehrinfos { width:80%; margin:-8px auto 0px; text-align:center; } #veranstaltung .aehnlicheartikel ul li p { margin-bottom:35px; } #veranstaltung .text ul li:first-child:first-letter { position:relative; display:inline; float:left; margin:0px 0 0 -1px; padding: 0 3px 0 0; text-align:center; color:#60bed4; shape-outside: ellipse(60% 50%); font-size:63px; font-weight:600; line-height:55px; } #veranstaltung .kalender_teaser.detailveranstaltung .kalender_bild:after { background-color:#fff; } #beitrag .teaserbild { display:block; position:relative; margin-top:15px; width:100%; height:400px; background-color:#ddd; background-size:cover; background-position:top center;} #beitrag .teaserbild.bg { height:550px; } #beitrag .teasershadow { position:absolute; display:block; height:100%; width:100%; background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); background: -ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); background: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); } #beitrag .teaserbild:after { content:''; position:absolute; bottom:-25px; background-color:#fff; left:25%; margin-left:-10px; width:40px; height:40px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } #beitrag .headl { position:absolute; text-align:left; display:block; margin:40px auto auto 70px; width:60%; } #beitrag h1 { display:inline; padding:10px 5px; background-color:#990066; color:#fff;line-height:60px; box-shadow: 20px 0 0 #990066, -20px 0 0 #990066; } #beitrag .rotate { margin-top:14px; margin-left:20px; -webkit-transform:rotate(-1.5deg); -moz-transform:rotate(-1.5deg); -ms-transform:rotate(-1.5deg); -webkit-o:rotate(-1.5deg); transform:rotate(-1.5deg); } #beitrag .rotate-min { margin-top:10px; -webkit-transform:rotate(0.2deg); -moz-transform:rotate(0.2deg); -ms-transform:rotate(0.2deg); -webkit-o:rotate(0.2deg); transform:rotate(0.2deg); } #beitrag h2 { float:none; display:inline; padding:6px 0px; background-color:#ed1c24; color:#fff; font-size:36px; line-height:50px; box-shadow: 20px 0 0 #ed1c24, -20px 0 0 #ed1c24; text-align:left; } #beitrag .tags a { opacity:1; } .relatedposts ul, .lastposts ul { margin-top:7px; } .relatedposts li, .lastposts li { margin:10px 0; font-weight:500; font-size:16px; line-height:24px; color:#222; } .relatedposts li b, .lastposts li b { color:#60bed4;text-transform:uppercase; } .taglist .veranstaltung { font-size:inherit; line-height:inherit; text-transform:none; } #tag .name { display:block; margin:50px 0 30px; width:65%; } #tag h4 { display:inline; margin-left:10px;font-weight:600; font-size:18px; font-style:normal;} #tag h1 { display:block; width:90%; margin-left:-3px; margin-top:12px; font-weight:600; font-size:46px; line-height:56px; text-transform:none; } #tag .erklaerung { display:block; padding:0px 10px; } #tag .erklaerung p { margin:10px 0 40px; padding:0; } #tag ul { padding:0 7px; } #tag ul li { display:inline-block;position:relative; width:-webkit-calc(50% - 14px); width:-moz-calc(50% - 14px); width:-ms-calc(50% - 14px); width:-o-calc(50% - 14px); width:calc(50% - 14px); height:350px; float:left; margin-right: 14px; margin-bottom:25px; overflow:hidden; cursor:pointer; background-size:cover; background-position:center;} #tag ul li:nth-child(even) { margin-left:14px; margin-right:0;} #tag .datum_rahmen { zoom:0.8; position:absolute; z-index:3; bottom:0; padding:10px 10px 14px; width:20%; background-color:#fff; } #tag .datum_rahmen .datum { bottom:0; color:#222; } #tag h1 { text-align:left; } #tag .mon { margin-top:-3px; } #tag .ueber { position:absolute; left:20%; bottom:0px; height:86px; width:80%; } #tag .h2-margin { display:block; height:42px; } #tag h2 { display:inline-block; padding:9px 14px; background-color:#990066; color:#fff; font-size:16px; line-height:26px; font-style:normal; font-weight:700; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition:4s; -moz-transition:4s;-ms-transition:4s;-o-transition:4s;transition:4s; } #tag h3 { display:inline-block; margin-bottom:0; padding:9px 14px; background-color:#ed1c24; color:#fff; font-size:16px; line-height:26px; font-style:italic; font-weight:600; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition:4s; -moz-transition:4s;-ms-transition:4s;-o-transition:4s;transition:4s; } #tag h3.long { display:block; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; width:90%; } #tag h3.long { margin-top:2px; margin-bottom:3px; } #tag h2:hover, #tag h3:hover { text-decoration:underline; } #tag .bg { position:absolute; display:block; top:-5%; left:-5%; width:105%; height:105%; background-size:cover; background-position:center; -webkit-transition:0.3s ease-in-out; -ms-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; } #tag ul li:hover .bg { -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -ms-filter: grayscale(1); -o-filter: grayscale(1); filter: grayscale(1); } #tag ul li.nobg .blende { display:none; } #tag li.nobg .datum_rahmen, #tag li.nobg .ueber { bottom:35%; } .allekategorien { border-top:1px solid #ccc; margin-top:30px; padding:30px 10px; } .allekategorien .taglist { margin-top:5px; margin-left:4px; list-style:none; } #tag.suche h1.entry-title { display:inline-block; margin: 0 auto; text-align:center; } #tag.suche .no-results { margin-top:80px; } #tag.suche #searchform.searchform { margin-top:20px; margin-bottom:150px;} #tag.suche #searchform.searchform input:focus { outline:none; } #tag h5 { margin-bottom:30px; padding-left:10px; width:100%; font-size:22px; color:#60bed4; font-weight:600; } .fraktion h5 { display: block; margin: 10px 0 3px; padding-top: 0px !important; text-transform: uppercase; font-size: 14px; line-height: 24px; } .fraktion i { display:block; font-weight:600; } .fraktion .headl { position:relative; text-align:center; display:block; top:50px; margin:0px auto auto auto; width:100%; } .fraktion h1 { display:inline; padding:9px 5px; background-color:#990066; color:#fff;font-size:30px; line-height:40px; box-shadow: 15px 0 0 #990066, -15px 0 0 #990066; font-weight:500; font-style:italic;} .fraktion .rotate { margin-top:18px; margin-left:20px; -webkit-transform:rotate(-1.5deg); -moz-transform:rotate(-1.5deg); -ms-transform:rotate(-1.5deg); -webkit-o:rotate(-1.5deg); transform:rotate(-1.5deg); } .fraktion .rotate-min { margin-top:10px; -webkit-transform:rotate(0.2deg); -moz-transform:rotate(0.2deg); -ms-transform:rotate(0.2deg); -webkit-o:rotate(0.2deg); transform:rotate(0.2deg); } .fraktion h2 { float:none; display:inline; margin-top:-3px; padding:6px 0px; background-color:#ed1c24; color:#fff; font-size:48px; line-height:58px; box-shadow: 20px 0 0 #ed1c24, -20px 0 0 #ed1c24; text-align:left; font-style:normal; font-weight:bold; } .fraktion.ortsverein .headl { margin-top:20px; } .fraktion h3 { padding-left:40px; font-size:20px; line-height:28px; } .fraktion h3 p { margin-top:0; margin-bottom:20px; } .fraktion .column-2 { margin-top:30px; padding-right:50px;} .buergerlich { margin: 70px 0 0px; } .fraktion h3.buergerlich p { margin-bottom:0; } .buergerlich h3 p { margin:0px 0 0px; } .fraktion h3.buergerlich p { font-size:20px; line-height:28px; margin-bottom:20px; } #beitrag.thema .teaserbild { background-color:#990066; } #beitrag.thema h5 { display: block; margin: 10px 0 3px; padding-top: 0px !important; text-transform: uppercase; font-size: 14px; line-height: 24px; } #beitrag.thema i { font-weight:600; } #beitrag.thema .headl { position:absolute; text-align:left; display:block; margin:50px auto auto 70px; width:60%; } #beitrag.thema h1 { display:inline; padding:9px 5px; background-color:#60bed4; color:#fff;font-size:24px; line-height:34px; box-shadow: 15px 0 0 #60bed4, -15px 0 0 #60bed4; font-weight:500; font-style:italic;} #beitrag.thema .rotate { margin-top:18px; margin-left:20px; -webkit-transform:rotate(-1.5deg); -moz-transform:rotate(-1.5deg); -ms-transform:rotate(-1.5deg); -webkit-o:rotate(-1.5deg); transform:rotate(-1.5deg); } #beitrag.thema .rotate-min { margin-top:10px; -webkit-transform:rotate(0.2deg); -moz-transform:rotate(0.2deg); -ms-transform:rotate(0.2deg); -webkit-o:rotate(0.2deg); transform:rotate(0.2deg); } #beitrag.thema h2 { float:none; display:inline; margin-top:-3px; margin-left:-15px; padding:6px 0px; background-color:#ed1c24; color:#fff; font-size:48px; line-height:58px; box-shadow: 20px 0 0 #ed1c24, -20px 0 0 #ed1c24; text-align:left; font-style:normal; font-weight:bold; } #beitrag.thema .lastposts { margin-top:7px; } .teaser.bg .teaserbild { display:block; position:relative; margin-top:15px; width:100%; height:400px; background-color:#ddd; background-size:cover; } .teaser.bg .teasershadow { position:absolute; display:block; height:100%; width:100%; background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); background: -ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); background: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); } .teaser.bg .teaserbild:after { content:''; position:absolute; bottom:-25px; background-color:#fff; left:25%; margin-left:-10px; width:40px; height:40px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .teaser.bg .headl { position:absolute; text-align:left; display:block; margin:40px auto auto 70px; width:80%; } .teaser.bg h1 { display:inline; margin-left:15px; padding:10px 5px; background-color:#990066; color:#fff;line-height:70px; box-shadow: 20px 0 0 #990066, -20px 0 0 #990066; } .teaser.bg .rotate { margin-top:14px; margin-left:20px; -webkit-transform:rotate(-1.5deg); -moz-transform:rotate(-1.5deg); -ms-transform:rotate(-1.5deg); -o-transform:rotate(-1.5deg); transform:rotate(-1.5deg); } .teaser.bg .rotate-min { margin-top:10px; -webkit-transform:rotate(0.2deg); -moz-transform:rotate(0.2deg); -ms-transform:rotate(0.2deg); -o-transform:rotate(0.2deg); transform:rotate(0.2deg); } .teaser.bg h2 { float:none; display:inline; padding:6px 0px; background-color:#ed1c24; color:#fff; box-shadow: 20px 0 0 #ed1c24, -20px 0 0 #ed1c24; text-align:left; } .teaser.bg .tags a { margin-left:12px; color:#fff; text-shadow: 0 2px 2px rgba(0,0,0,0.5); opacity:1; } /* Pfeilnavigation */ .artikelpfeile, .pfeile { position:absolute; top:0px; left:0px; width:100%; height:100%; } .artikelpfeile span { position:absolute; display:block; top:150px; margin:-20px 0 0 30px; width:50px; height:50px; cursor:pointer; opacity:1; background-image:url(../img/pfeileblau.png); background-size:200%; background-position:left; background-repeat:no-repeat; z-index:10 !important; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out;} .artikelpfeile span#artikelpfeil_rechts { right:0px; margin-right:-20px; background-position:right;} .artikelpfeile span#artikelpfeil_links{ left:0px; margin-left:-20px; background-position:left;} .artikelpfeile span#artikelpfeil_rechts:hover { height:60px; width:60px; margin-right:-25px; top:145px; } .artikelpfeile span#artikelpfeil_links:hover { height:60px; width:60px; margin-left:-25px; top:145px; } #veranstaltung .kalender_teaser.slim .artikelpfeile span { top:95px; } #veranstaltung .kalender_teaser.slim .artikelpfeile span#artikelpfeil_links:hover, #veranstaltung .kalender_teaser.slim .artikelpfeile span#artikelpfeil_rechts:hover { top:90px; } #veranstaltung .kalender_teaser.detailveranstaltung .artikelpfeile span { top:240px; } #veranstaltung .kalender_teaser.detailveranstaltung .artikelpfeile span#artikelpfeil_links:hover, #veranstaltung .kalender_teaser.detailveranstaltung .artikelpfeile span#artikelpfeil_rechts:hover { top:235px; } #beitrag .artikelpfeile span { top:180px; } #beitrag .artikelpfeile span#artikelpfeil_rechts:hover { top:175px; } #beitrag .artikelpfeile span#artikelpfeil_links:hover { top:175px; } #beitrag .teaserbild.bg .artikelpfeile span { top:280px; } #beitrag .teaserbild.bg .artikelpfeile span#artikelpfeil_rechts:hover { top:275px; } #beitrag .teaserbild.bg .artikelpfeile span#artikelpfeil_links:hover { top:275px; } .ein_beitrag .entry-content span { font-family:'Open Sans' !important; font-size:18px; line-height:30px; } #flaeche_sm, #flaeche_lg, #flaeche_md { display:block; position:relative; margin-top:15px; height:300px; background-color:#990066; cursor:pointer; background-image: -webkit-linear-gradient(left, #990066 , #ed1c24); -moz-linear-gradient(left, #990066 , #ed1c24); -ms-linear-gradient(left, #990066 , #ed1c24); -o-linear-gradient(left, #990066 , #ed1c24); linear-gradient(left, #990066 , #ed1c24); -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out;} #flaeche_sm, #flaeche_md { float:left; margin-right:15px; width:-webkit-calc(33.3333% - 15px); width:-moz-calc(33.3333% - 15px); width:-ms-calc(33.3333% - 15px); width:-o-calc(33.3333% - 15px); width:calc(33.3333% - 15px); background-color:#ed1c24; background-image:none; } #flaeche_lg{ float:left; width:33.3333%;} #flaeche_sm div.img, #flaeche_lg div.img, #flaeche_md div.img { position:relative; width:100%; height:100%; background-size:cover; background-position:right; background-repeat:no-repeat;} #flaeche_sm div.img { background-position:center 70%; background-size:90%; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; } #flaeche_lg h3, #flaeche_md h3 { margin-bottom:0px; color:#fff; text-shadow:0 2px 2px rgba(0,0,0,0.5); } #flaeche_lg h3 i, #flaeche_sm .text h3 i, #flaeche_md .text h3 i { font-weight:500; } #flaeche_lg .text span, #flaeche_sm .text span, #flaeche_md .text span { color:#fff; font-size:16px; line-height:26px; } #flaeche_lg .text { display:block; position:absolute; left:28px; bottom:20px; width:80%;} #flaeche_sm:hover, #flaeche_lg:hover, #flaeche_md:hover { opacity:0.9; } #flaeche_sm:hover div.img, #flaeche_lg:hover div.img, #flaeche_md:hover div.img { background-position:center -100px; opacity:0; } #flaeche_sm .text, #flaeche_md .text { display:block; position:absolute; left:30px; bottom:15px; width:80%; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; } #flaeche_sm .text h3, #flaeche_lg .text h3, #flaeche_md .text h3 { margin-bottom:7px; color:#fff; font-size:24px; line-height:34px; } #flaeche_lg .text h3, #flaeche_md .text h3, #flaeche_md .text h3 { margin-bottom:0; } #flaeche_sm .text span, #flaeche_lg .text span, #flaeche_md .text span { display:block; visibility:hidden; opacity:0; height:1px; overflow:hidden; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; } #flaeche_sm:hover .text span, #flaeche_lg:hover .text span, #flaeche_md:hover .text span { visibility:visible; opacity:1; height:213px; -webkit-transition:all 0.5s 0.2s ease-in-out; -moz-transition:all 0.5s 0.2s ease-in-out; -ms-transition:all 0.5s 0.2s ease-in-out; -o-transition:all 0.5s 0.2s ease-in-out; transition:all 0.5s 0.2s ease-in-out; } /* #flaeche_md .text { top:30px; } #flaeche_md .text h3 { margin-bottom:9px; } */ /* SQUARED FOUR */ .squaredFour { width: 14px; margin: 0px auto; position: relative; float:left;} .squaredFour label { cursor: pointer; position: absolute; width: 14px; height: 14px; top: 0; border-radius: 2px; -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); background: #fcfff4; background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );} .squaredFour label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; content: ''; position: absolute; width: 9px; height: 5px; background: transparent; top: 4px; left: 4px; border: 3px solid #333; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .squaredFour label:hover::after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.5; } .squaredFour input[type=checkbox]:checked + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } /*======== F O O T E R ========*/ .footer { position:relative; bottom:0px; display:block; padding-top:30px; width:100%; height:330px; background-color:#ddd; } .footer ul li { font-size:14px; line-height:24px; cursor:pointer;} /*======== S I N G L E P A G E ========*/ .entry-content { margin-top:20px; } .entry-content p {} .entry-content p:first-child { margin-bottom:30px; font-weight:bold; text-indent: 0em !important; color:#666; } .attachment-post-thumbnail { display:none;} .wp-post-image { display:none; } .ein_beitrag header.entry-header { height:auto; margin-bottom:0px; } .ein_beitrag .entry-header { position:relative; display:block; margin:80px 0px; padding:0px; width:100%; } .ein_beitrag .comments-link { display:none;} .ein_beitrag .entry-content p:nth-child(2):first-letter { position:relative; display:inline-block; float:left; margin:0px 0 0 -1px; padding: 0 7px 0 0; text-align:center; color:#60bed4; shape-outside: ellipse(60% 80%); } .ein_beitrag .entry-title { display:block;} .ein_beitrag .datum { display:block; float:right; margin-top:35px; margin-bottom:10px; width:100%; text-align:right; font-style:italic; color:#888; text-transform:none; } .ein_beitrag h1, .ein_beitrag h2 { display:block; margin:0px auto !important; padding:0px !important; width:85%; color:#444; } .ein_beitrag subhead { display:block; margin:14px 0 0 0; padding-bottom:20px; text-align:center; font-size:16px; line-height:24px; } .ein_beitrag a { margin:0px; font-weight:bold; } .ein_beitrag subhead b a { padding:4px 7px 4px 8px; border-radius:2px; font-weight:600; opacity:0.5; background-color: #ccc; -webkit-transition:0.2s ease-in-out; -moz-transition:0.2s ease-in-out; -ms-transition:0.2s ease-in-out; -o-transition:0.2s ease-in-out; transition:0.2s ease-in-out; color: #000; } .ein_beitrag subhead b a:hover { opacity:1;} .ein_beitrag dl { display:block; margin:30px 0; width:auto; } .ein_beitrag dd { display:block; margin:15px 10px; text-align:right; font-style:italic; } /*======== E V E N T P A G E ========*/ .entry-title.event { font-size:38px; line-height:46px; font-style:normal; text-align:left !important; font-weight:bolder; } h1.entry-title.event { margin:0px !important; text-align:left !important; } .event .entry-header { text-align:left !important; } .event ul { overflow:visible;} .event ul li { background-color:transparent; height:auto; } .event .sub { display:block; padding-bottom:30px; width:100%; } h1.entry-title.event { margin: 0 auto !important; text-align:center !important; } .event table.info { margin-left:auto !important; margin-right:auto !important; } .event table.info tag { margin-left:2px; } .event table.info jahr { margin-right:2px; } .event table.info uhrzeit { margin-left:2px; } .event table.info { margin:18px 0 0px;} .event table.info tr { display:block; margin-bottom:8px; vertical-align:top; } .event table.info tr td:first-child:before { content:''; display:block; margin-top:4px; width:20px; height:20px; background-size:100%; } .event table.info tr:first-child td:first-child:before { background-image:url(../../../../img/uhr.png); } .event table.info tr:nth-child(2) td:first-child:before { background-image:url(../../../../img/weg.png); } .event table.info tr td:nth-child(2) { padding-left:15px;} .event jahr, .event monat, .event tag, .event uhrzeit { font-weight:bold; } .event .post-meta { margin:0px; padding:0px; font-weight:bold; background-color:rgba(250,250,250,1.00); } .event .post-meta li:nth-child(even) { background-color:transparent; } .event .post-meta li:hover { background-color:transparent; } .event .post-meta-key { display:none; } .event strasse { font-weight:bold; color:#333;} .event .route { padding:0px; color:#60bed4; line-height:6px; font-weight:bold; cursor:pointer;} .event .route a { color:#60bed4; font-weight:bold; cursor:pointer;} .event .route span { display:none;} .event .route span.active { display:block; } .event .route:hover { text-decoration:underline; } .event .entry-content p { font-weight:500; color:#333;} .map { position:relative; margin-top:5px; width:100%; height:300px; background-color:#ccc; } .event p { padding-bottom:0px; } .event .entry-content p:first-child { margin:0px; } /*======== E V E N T K A L E N D E R ========*/ .kal { height:100%; overflow-y: scroll; } .kal li { width:100%; height:80px; overflow:hidden; background-color:#f7f7f7; -webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -ms-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; } .kal li:nth-child(even) { background-color:#efefef; } .kal li:hover { background-color:#fff;} .kal li table, .kal li table tr { width:100%;} .kal li table tr td { padding:15px 10px; line-height:24px; vertical-align:top; } .kal li table tr td:first-child { padding-right:3px; width:85px; text-align:right; } .kal li table tr td b { color:#60bed4; text-transform:uppercase;} .kal li table tr td h1 { display:none; } .kal li table tr td h2 { padding:0px !important; } .kal li td info { display:block; width:100%; font-weight:400; } .kal li .beschreibung { display:none; } .kal info { display:block; margin:0px; padding:0px; width:280px; overflow:hidden; white-space:nowrap; } .kal p { display:block; margin:0px; padding:0px; width:280px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} /*======== A R C H I V ========*/ .archiv { position:relative; } .archiv .descr { position:relative; display:blocK; clear:both; padding:15px 13px 0px; width:60%; } .archive-meta { position:relative; display:blocK; clear:both; padding:5px 13px 10px; width:60%;} .archiv h1, .archiv h2 { margin-left:10px !important;} .archiv h3 { position:relative; display:block; margin: 90px 0 0 13px !important; } .archiv .kategorien { width:100%; } .archiv .kategorien ul { display:block; position:relative; margin: 10px 0 0 13px; padding-bottom:25px; } .archiv .kategorien ul li { display: inline-block; margin:0 7px 7px 0; padding:5px 9px; background-color:#ddd; } .archiv .kategorien ul li:hover { background-color:#990066; color:#fff;} .archiv .archivposts { position:relative; display:block; clear:both; padding:0px; width:100%; border-left:8px solid transparent; } .arch-teaser { position:relative; display:block; float:left; margin:2.5px; width:32%; width:-webkit-calc(33.33% - 5px); width:-moz-calc(33.33% - 5px); width:-ms-calc(33.33% - 5px); width:-o-calc(33.33% - 5px); height:300px; overflow:hidden; border:3px solid #efefef; background-color:#efefef; background-image:none; cursor:pointer; -webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -ms-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; } .arch-teaser .bg-image { position:absolute; display:block; z-index:0; width:100%; height:100%; -webkit-filter:grayscale(1); -moz-filter:grayscale(1); -ms-filter:grayscale(1); -o-filter:grayscale(1); filter:grayscale(1); background-size:cover; -webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -ms-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; opacity:0.2; } .archiv .arch-teaser:hover { background-color:#efefef; -webkit-transition:0.7s ease-in-out; -moz-transition:0.7s ease-in-out; -ms-transition:0.7s ease-in-out; -o-transition:0.7s ease-in-out; transition:0.7s ease-in-out; } .archiv .arch-teaser:hover .bg-image { -webkit-filter:grayscale(0.5); -moz-filter:grayscale(0.5); -ms-filter:grayscale(0.5); -o-filter:grayscale(0.5); filter:grayscale(0.5); } .arch-teaser .bg_beitrag { position:absolute; display:block !important; z-index:0; top:0px; left:0px; width:100%; height:100%; background-size:cover; background-repeat:no-repeat; background-position: center top; -webkit-transition:1s ease-in-out; -moz-transition:1s ease-in-out; -ms-transition:1s ease-in-out; -o-transition:1s ease-in-out; transition:1s ease-in-out; opacity:0.05; -webkit-filter: grayscale(0.9); -moz-filter: grayscale(0.9); -ms-filter: grayscale(0.9); -o-filter: grayscale(0.9); filter: grayscale(0.9);} .arch-teaser h1, .arch-teaser h2 { z-index:3; margin:0px !important; width:100%; -webkit-transition:0.7s ease-in-out; -moz-transition:0.7s ease-in-out; -ms-transition:0.7s ease-in-out; -o-transition:0.7s ease-in-out; transition:0.7s ease-in-out; } .arch-teaser h1 { margin: 105px 0 0 !important; font-weight:bold;} .arch-teaser h1:hover { color:#990066; -webkit-transition:0.1s ease-in-out; -moz-transition:0.1s ease-in-out; -ms-transition:0.1s ease-in-out; -o-transition:0.1s ease-in-out; transition:0.1s ease-in-out; } .arch-teaser:hover h1 { margin-top:80px !important; -webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -ms-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; opacity:1; } .arch-teaser subhead { position:relative; display:block; z-index:2; margin-top:80px; padding:0px; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -ms-transition:0.5s ease-in-out; -o-transition:0.5s ease-in-out; transition:0.5s ease-in-out; visibility:hidden; opacity:0;} .arch-teaser subhead .arch-category { display:inline-block; margin: 0 3px 3px 0; padding:4px 7px; background-color:#990066; opacity:0.7; -webkit-transition:0.2s ease-in-out; -moz-transition:0.2s ease-in-out; -ms-transition:0.2s ease-in-out; -o-transition:0.2s ease-in-out; transition:0.2s ease-in-out;color:#fff; } .arch-teaser subhead .arch-category:hover { opacity:1; } .arch-teaser:hover .bg_beitrag { opacity:0.2; -webkit-transition:7s ease-in-out; -moz-transition:7s ease-in-out; -ms-transition:7s ease-in-out; -o-transition:7s ease-in-out; transition:7s ease-in-out;} .arch-teaser:hover subhead { z-index:5; margin-top:30px; visibility:visible; opacity:1; -webkit-transition:0.5s 0.2s ease-in-out; -moz-transition:0.5s 0.2s ease-in-out; -ms-transition:0.5s 0.2s ease-in-out; -o-transition:0.5s 0.2s ease-in-out; transition:0.5s 0.2s ease-in-out; } /*======== S U C H E R G E B N I S ========*/ .suchergebnisse { margin-top:30px; border-left:10px solid transparent; } .suche, .suche header { position:relative; } .suche h1, .suche h3 { display:block; margin:0 auto; margin-left:0px !important;} .no-results { margin:70px auto 0; width:45%; text-align:center; } .no-results .entry-header { margin-bottom:0px; height:auto; } .no-results p { margin:15px 0 20px;} .suche #searchform { margin-top:30px;} .suche #searchform input { padding:4px 9px; border-color:#990066; border-style:solid; } .suche #searchform #searchsubmit { margin-left:-5px; border-color:#990066; border-style:solid; background-color:#990066; color:#fff; } /*======== F R A K T I O N ========*/ .fraktion header { margin-top:40px !important; padding:0px !important;} .fraktion .bilder { margin:10px 0 0; padding:0px; clear:both; } .fraktion .bilder li { float:left; margin:5px; width:22%; width:-webkit-calc(25% - 10px); width:-moz-calc(25% - 10px); width:-ms-calc(25% - 10px); width:-o-calc(25% - 10px); height:300px; background-position:center 20%; background-size:180%; background-color:#efefef; -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -ms-filter: grayscale(1); -o-filter: grayscale(1); filter: grayscale(1); opacity:0.8; -webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -ms-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; cursor:pointer;} .fraktion .bilder li:hover { opacity:1; } .fraktion .entry-header { position:absolute; top:120px; left:30%; width:40%; text-align:center; color:#60bed4;} .fraktion h1.entry-title { padding:15px 20px !important; } .fraktion .aehnlicheartikel .lastposts { margin-top:15px;} .mitglieder { margin-top:0px; width:100%; } .mitglieder li { padding:40px 0 0; width:100%;} .mitglieder li .mitglied .bild:first-child { display:block; width:200px; height:250px; background-color:#efefef; background-size:cover; background-position:center;} .mitglied .mitgliedbeschreibung { position:relative; padding:10px 25px; vertical-align:top; } .mitglied .mitgliedbeschreibung p { margin:0px; padding:0px; } .mitglied .mitgliedbeschreibung b, .mitglied .mitgliedbeschreibung i { display:block; margin-top:3px; margin-bottom:10px;} .mitglied .mitgliedbeschreibung .kontaktinfo { display:block; margin-top:15px; padding-top:10px; border-top:thin solid #ccc; width:80%; -webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -ms-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; } .mitglied .mitgliedbeschreibung .kontaktinfo:hover { color:#222;} /*======== O R T S V E R E I N ========*/ .ortsverein .headerbox { position:relative; display:block; margin-top:10px; width:100%; height:500px; opacity:1; background-size:cover; background-repeat:no-repeat; background-color:#eee; -webkit-filter:grayscale(1) brightness(1.5) contrast(80%); -moz-filter:grayscale(1) brightness(1.5) contrast(80%); -ms-filter:grayscale(1) brightness(1.5) contrast(80%); -o-filter:grayscale(1) brightness(1.5) contrast(80%); filter:grayscale(1) brightness(1.5) contrast(80%); background-position:center; } .ortsverein .entry-header { position:absolute; top:80px; left:25%; width:50%; color:#60bed4; text-align:center; } .ortsverein h1.entry-title { margin:0px; padding:0px !important; } .ortsverein .entry-title i { display:block; margin-bottom:3px; opacity:0.6; } .ortsverein .entry-header h3 { display:block; margin:10px auto 0px !important; width:70%; } .ortsverein .entry-content p:first-child { font-weight:inherit; color:inherit;} .ortsverein h3 p { padding:0px; margin:0px; text-align:center;} .ortsverein .mitglieder { margin-top:0px;} .ortsverein .lastposts { margin-top:40px;} /*======== T H E M A D E S M O N A T S ========*/ .thema .headerbox { position:relative; display:block; margin-top:10px; width:100%; height:500px; opacity:0.2; background-size:cover; background-repeat:no-repeat; background-color:#eee; -webkit-filter:grayscale(1) brightness(1.5) contrast(80%); -moz-filter:grayscale(1) brightness(1.5) contrast(80%); -ms-filter:grayscale(1) brightness(1.5) contrast(80%); -o-filter:grayscale(1) brightness(1.5) contrast(80%); filter:grayscale(1) brightness(1.5) contrast(80%); background-position:center; } .thema .entry-header { position:absolute; top:115px; left:15%; width:70%; text-align:center; color:#60bed4;} .thema h1.entry-title { margin:0px; padding:0px !important; } .thema i { display:block; margin-bottom:3px; opacity:0.6; } .thema .lastposts { margin-top:53px;} .thema .entry-header h3 { display:block; margin:10px auto 0px !important; width:60%; } .thema h3 p { margin:0px; padding:0px;text-align:center;} /*======== S I D E B A R ========*/ /* Aehnliche Artikel */ .aehnlicheartikel h2 { padding-bottom:0px !important; } .aehnlicheartikel h4 { padding: 15px 6px 15px; margin:0px; opacity:0.5; text-transform:uppercase; } .aehnlicheartikel ul { display:block; margin-top:0px; } .aehnlicheartikel ul li { display:block; text-align:center; margin:0px; padding:15px 10px; -webkit-transition:0.1s ease-in-out; -moz-transition:0.1s ease-in-out; -ms-transition:0.1s ease-in-out; -o-transition:0.1s ease-in-out; transition:0.1s ease-in-out; } .aehnlicheartikel ul a:last-child li { border-bottom:none !important; } /* Last Posts */ .lastposts { margin: 7px 0 50px;} /* Aehnliche Artikel */ .relatedposts ul li:last-child { border-bottom:none !important; } /* Ausschussposts */ .ausschussposts { margin:0 0 80px;} /* Eventposts */ .eventposts { margin-top:105px;} .eventposts .kal { margin-top:10px; height:auto; overflow:visible; } .eventposts .kal li { padding:0px; height:70px !important; background-color:transparent !important;} .eventposts ul li { padding:15px 0 !important; height:83px;} .eventposts li td { padding:0px !important; text-align:left;} .eventposts li table tr td:first-child { width:52px !important; } .eventposts li td:nth-child(2) { padding-left:15px !important; } .eventposts li td info { display:block; width:300px; font-weight:500; overflow:hidden !important; white-space:nowrap; text-overflow: ellipsis;} .eventposts li td info p { font-size:15px; line-height:24px;} .eventposts li td time { font-weight:400;} .eventposts li table tr td b { text-transform: none !important;} .eventposts h1, .eventposts h2 { width:100%; text-align:left; } .eventposts img { display:none;} /* Newsletter */ #foot_news { cursor:pointer; } .newsletterbestellen { z-index:98; position:absolute; top:20px; right:20px; text-align:right; cursor:pointer;} .newsletterbestellen .button { color:#60bed4; } .lightbox { cursor:pointer; z-index:99; visibility:hidden; opacity:0; position:fixed; top:0px; left:0px; width:100vw; height:100vh; background-color:rgba(0,0,0,0.8); -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -ms-transition:0.5s ease-in-out; -o-transition:0.5s ease-in-out; transition:0.5s ease-in-out; } .lightbox.active { visibility:visible; opacity:1;} .newsletter { z-index:100; display:block; position:fixed; left:50%; top:20%; margin-left:-200px; width:400px; padding:16px 26px 25px; background-color:#fff; box-shadow:0 7px 10px rgba(0,0,0,0.3); border-radius:7px; visibility:hidden; opacity:0; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -ms-transition:0.5s ease-in-out; -o-transition:0.5s ease-in-out; transition:0.5s ease-in-out;} .newsletter.active { visibility:visible; opacity:1;} .newsletter h4 { padding:0px !important; margin-top:15px; } .newsletter .eemail_button .eemail_textbox_button { padding:10px 9px 8px; width:100%; border:none; color:#fff; background-color:#60bed4; font-weight:bold; } .newsletter .eemail_textbox_class { padding:4px 8px; width:100%; } .newsletter .eemail_caption { padding-bottom:0; color:#60bed4; } .newsletter span { display:block; margin:10px 0; } .newsletter p { display:none; } .newsletter .closenews { position:absolute; right:20px; top:20px; width:18px; height:18px; background-image:url(../img/closeblue.png); background-size:100%; opacity:0.5;} .newsletter .closenews:hover { opacity:1; cursor:pointer;} footer #impressum { display:none; visibility:hidden; opacity:0; padding-top:40px; padding-bottom:80px; height:0px; overflow:hidden; margin-top:100px; text-align:left; background-color:#ddd;} footer #impressum.active { display:block; visibility:visible; opacity:1; height:auto; } footer #impressum ul { text-align:left; } footer #impressum li { width:100%; margin:10px 0; height: auto; } footer #impressum span { display:block; } footer #impressum b, .footer #impressum strong { display:block; font-weight:600; }