body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both} @media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%} legend{width:100%;display:block;font-weight:700;border:0}input[type=text],input[type=password],input[type=date],input[type=datetime],input[type=email],input[type=number],input[type=search],input[type=tel],input[type=time],input[type=url],input:not([type]),textarea{width:100%;display:inline-block;padding:3px 6px;background:#fff;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:inset 0 1px 1px #eee;-webkit-box-shadow:inset 0 1px 1px #eee;box-shadow:inset 0 1px 1px #eee;-moz-transition:all .15s linear;-webkit-transition:all .15s linear;-o-transition:all .15s linear;transition:all .15s linear;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}input[type=text]:focus,input[type=password]:focus,input[type=date]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=number]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=time]:focus,input[type=url]:focus,input:not([type]):focus,textarea:focus{outline:0;background:#fcfcfc;border-color:#bbb}input[type=file]{cursor:pointer}select,input[type=file]{display:block}form button,input[type=file],input[type=image],input[type=submit],input[type=reset],input[type=button],input[type=radio],input[type=checkbox]{width:auto}textarea,select[multiple],select[size]{height:auto}input[type=radio],input[type=checkbox]{margin:0 3px 0 0}input[type=radio],input[type=checkbox],label{vertical-align:middle}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{cursor:not-allowed;background:#eee}input[type=radio][disabled],input[type=checkbox][disabled],input[type=radio][readonly],input[type=checkbox][readonly]{background:0 0}form button,input[type=submit],.button{display:inline-block;padding:4px 15px 4px 14px;margin-bottom:0;text-align:center;vertical-align:middle;line-height:16px;font-size:11px;color:#000;cursor:pointer;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#ececec;background-image:-moz-linear-gradient(top,#fff,#ececec);background-image:-webkit-linear-gradient(top,#fff,#ececec);background-image:-ms-linear-gradient(top,#fff,#ececec);background-image:-o-linear-gradient(top,#fff,#ececec);background-image:linear-gradient(to bottom,#fff,#ececec);background-repeat:repeat-x;-moz-transition:background .15s linear;-webkit-transition:background .15s linear;-o-transition:background .15s linear;transition:background .15s linear}form button:hover,input[type=submit]:hover,.button:hover{text-decoration:none;background-position:0 -15px!important}form button:active,input[type=submit]:active,.button:active{background-color:#e6e6e6;background-position:0 -30px!important}form button.blue,input[type=submit].blue,.button.blue{background-color:#2f96b4;background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);background-image:-ms-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:linear-gradient(to bottom,#5bc0de,#2f96b4);border-color:#2f96b4;color:#fff}form button.blue:active,input[type=submit].blue:active,.button.blue:active{background-color:#2e95b3}form button.green,input[type=submit].green,.button.green{background-color:#51a351;background-image:-moz-linear-gradient(top,#62c462,#51a351);background-image:-webkit-linear-gradient(top,#62c462,#51a351);background-image:-ms-linear-gradient(top,#62c462,#51a351);background-image:-o-linear-gradient(top,#62c462,#51a351);background-image:linear-gradient(to bottom,#62c462,#51a351);border-color:#51a351;color:#fff}form button.green:active,input[type=submit].green:active,.button.green:active{background-color:#4f9f4f}form button.orange,input[type=submit].orange,.button.orange{background-color:#f89406;background-image:-moz-linear-gradient(top,#fbb450,#f89406);background-image:-webkit-linear-gradient(top,#fbb450,#f89406);background-image:-ms-linear-gradient(top,#fbb450,#f89406);background-image:-o-linear-gradient(top,#fbb450,#f89406);background-image:linear-gradient(to bottom,#fbb450,#f89406);border-color:#f89406;color:#fff}form button.orange:active,input[type=submit].orange:active,.button.orange:active{background-color:#f28f04}form button.red,input[type=submit].red,.button.red{background-color:#bd362f;background-image:-moz-linear-gradient(top,#ee5f5b,#bd362f);background-image:-webkit-linear-gradient(top,#ee5f5b,#bd362f);background-image:-ms-linear-gradient(top,#ee5f5b,#bd362f);background-image:-o-linear-gradient(top,#ee5f5b,#bd362f);background-image:linear-gradient(to bottom,#ee5f5b,#bd362f);border-color:#bd362f;color:#fff}form button.red:active,input[type=submit].red:active,.button.red:active{background-color:#be322b}.widget{margin-bottom:12px}.widget>label{display:block;margin-bottom:6px;font-weight:700}.inline-form .widget{display:inline-block;margin-bottom:0;vertical-align:middle}.horizontal-form .widget:after{content:"";display:table;clear:both}.horizontal-form .widget>label{width:20%;float:left;padding:3px 2% 0 0;text-align:right}.horizontal-form .widget>input,.horizontal-form .widget>textarea{width:78%;float:left}.horizontal-form .widget>fieldset{margin-left:20%} #colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center} /* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../../files/Standard/gwf/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../../files/Standard/gwf/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/Standard/gwf/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/Standard/gwf/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../../files/Standard/gwf/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/Standard/gwf/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-700 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('../../files/Standard/gwf/open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */ src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../../files/Standard/gwf/open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/Standard/gwf/open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/Standard/gwf/open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */ url('../../files/Standard/gwf/open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/Standard/gwf/open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* roboto-condensed-300 - latin */ @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 300; src: url('../../files/Standard/gwf/roboto-condensed-v16-latin-300.eot'); /* IE9 Compat Modes */ src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'), url('../../files/Standard/gwf/roboto-condensed-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/Standard/gwf/roboto-condensed-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/Standard/gwf/roboto-condensed-v16-latin-300.woff') format('woff'), /* Modern Browsers */ url('../../files/Standard/gwf/roboto-condensed-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/Standard/gwf/roboto-condensed-v16-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'icomoon'; src:url('../../files/Standard/fonts/icomoon.eot?-re1q0p'); src:url('../../files/Standard/fonts/icomoon.eot?#iefix-re1q0p') format('embedded-opentype'), url('../../files/Standard/fonts/icomoon.woff?-re1q0p') format('woff'), url('../../files/Standard/fonts/icomoon.ttf?-re1q0p') format('truetype'), url('../../files/Standard/fonts/icomoon.svg?-re1q0p#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-calendar:before { content: "\e953"; } .icon-undo2:before { content: "\e967"; } .icon-zoom-in:before { content: "\e987"; } .icon-info:before { content: "\ea0c"; } /* Copyright by Phillip Heller, neXus Webentwicklung und Design www.nexus-webentwicklung.de */ /* FARBEN */ /* ANTHRAZIT #3d3d3d */ /* ROT #df4949 */ /* BLAU #334d5c */ /* TÜRKIS #45b29d */ /* LIGHTGREY #dadada */ /* GREY #c1c1c1 */ /* Allgemeine Formatierungen */ /*------------------------------------------------------------*/ * { padding: 0; margin: 0; } html, body { color: #000; min-height: 100%; height: 100%; width: 100%; font-size :13px; font-family: 'Open Sans', sans-serif; } a:link { color: #df4949; text-decoration: none;} a:visited { color: #df4949;; text-decoration: none; } a:hover { color: #c1c1c1; text-decoration: none; } a img { border-style: none; border-width: 0px; } ul { list-style-type: none; } .invisible { display: none; } .clr { clear: both; height: 1px; } h1, h2, h3, h4 { font-family: 'Roboto Condensed', sans-serif; font-weight: 300; color: #df4949; } h1 { font-size: 26px; margin-bottom: 1%; } h2 { font-size: 26px; margin-bottom: 1%; } h3 { font-size: 22px; margin-bottom: 1%; } h4 { font-size: 18px; } fieldset { border: none; } form input { font-size :13px; font-family: 'Open Sans', sans-serif; } form .submit_container { text-align: center; } form .widget { margin-bottom: 5px; } form input[type=submit] { width: 40%; font-size :13px; font-family: 'Open Sans', sans-serif; } form textarea { resize: none; font-size :13px; font-family: 'Open Sans', sans-serif; } form p.error { color: #df4949; } .float_left { float: left; margin-right: 2%; } .float_right { float: right; margin-left: 2%; } .float_above { margin-bottom: 2%; } .float_below { margin-top: 2%; } div[class*="ce_"],div[class*="content-"], div[class*="mod_"] { margin-bottom: 2%; } .content-text ul, .ce_list ul { list-style-type: square; margin: 10px 0px; padding-left: 30px; } .content-text ul li, .ce_list ul li { margin: 5px 0px; } .ce_list ol { padding-left: 30px; } #mitgliederbereich_links { text-align: center; } #mitgliederbereich_links #tl_logout { margin-top: 10px } #mitgliederbereich_links #tl_logout input.submit { margin-top: 20px; } #mitgliederbereich_links .logout a { display: block; margin-top: 15px; } #footer a:hover { color: #000; } /* Chronik */ #chronik table td:nth-child(1) { width: 150px; text-align: right; padding-right: 5px; vertical-align: top; } #chronik table td:nth-child(2) { width: 70%; padding-left: 5px; vertical-align: top; } #chronik table .row_1 td, #chronik table .row_2 td, #chronik table .row_4 td, #chronik table .row_6 td, #chronik table .row_9 td, #chronik table .row_10 td, #chronik table .row_11 td, #chronik table .row_14 td, #chronik table .row_16 td, #chronik table .row_18 td, #chronik table .row_22 td, #chronik table .row_24 td, #chronik table .row_26 td, #chronik table .row_28 td, #chronik table .row_29 td, #chronik table .row_32 td, #chronik table .row_35 td, #chronik table .row_37 td, #chronik table .row_40 td, #chronik table .row_42 td { padding-bottom: 15px; } #privacy h2 { margin-top: 1rem; } #privacy h3 { margin-top: 0.8rem; } iframe, .mejs-container { width: 100%; max-width: 600px; height: auto; min-height: 350px; margin-bottom: 2rem; } /* Desktop und Tablet - Allgemein */ @media only screen and (min-width: 768px) { #wrapper { min-height: 100%; width: 100%; position: relative; } #header { height: 345px; position: relative; } #header .bg { height: 50px; width: 100%; background: #3d3d3d; display: block; } #header #banner { background: #334d5c; height: 200px; margin-top: 40px; } #header #banner .inner { position: relative; width: 960px; margin: 0px auto; } #header #banner img { height: 118px; width: 226px; margin-top: 41px; } #header #banner #header_img { background: url(../../files/Standard/images/Banner.png); width: 713px; height: 234px; position: absolute; top: -17px; right: 0px; } nav ul { position: relative; margin: 0 auto; width: 92%; } nav ul li { font-family: 'Roboto Condensed', sans-serif; font-size: 24px; position: relative; font-weight: 300; } nav ul li.sibling { overflow: hidden; } nav ul li a:link, nav ul li span { color: #fff; display: block; padding: 0px 20px; height: 100%; } nav ul li span { cursor: default; } nav ul li a:visited { color: #fff; } nav ul li a:before { content: " "; display: block; width: 100%; height: 10px; background: #fff; position: absolute; top: 0px; left: 0px; -ms-transform:translateY(-100%); /* IE 9 */ -webkit-transform:translateY(-100%); /* Chrome, Safari, Opera */ transform:translateY(-100%); transition:all 0.2s linear; } nav ul li:hover a:before { -ms-transform: translateY(0%); /* IE 9 */ -webkit-transform: translateY(0%); /* Chrome, Safari, Opera */ transform: translateY(0%); } nav ul li.active span:after { content: " "; display: block; width: 50px; height: 30px; margin: 0 auto; background: url(../../files/Standard/images/menu_active.png); background-size: contain; position: absolute; bottom: -15px; left: 50%; -ms-transform: translateX(-50%); /* IE 9 */ -webkit-transform: translateX(-50%); /* Chrome, Safari, Opera */ transform: translateX(-50%); } #container { width: 100%; position: relative; padding-top: 20px; padding-bottom: 130px; } #container #main { padding: 0% 3%; } body.layout_2_col_left #container #main { float: right; width: 56%; } body.layout_2_col_left #container #left { float: left; width: 36%; margin-left: inherit; } #footer { position: absolute; height: 80px; width: 100%; bottom: 0px; left: 0px; } #footer .bg { height: 80px; width: 100%; background: #dadada; display: block; } #footer .inner { height: 100px; background: #c1c1c1; margin: 0 auto; position: relative; top: -100px; margin-bottom: -100px; } #footer address { font-style: normal; position: absolute; top: 20px; right: 20px; text-align: right; } #footer #link_impressum { position: absolute; top: 50px; right: 20px; text-align: right; } #footer a#link_newsletter { position: absolute; top: 20px; left: 40px; text-align: right; } /* .ce_gallery ul li { float: left; margin: 10px 5px; } */ .content-gallery ul { display: flex; flex-wrap: wrap; } .content-gallery ul li { margin: 5px 5px; } .content-gallery ul li img { width: 200px; } .mod_article .media--left>figure { margin-right: 2%; } .mod_article .media--right>figure { margin-left: 2%; } /* Nächstes Konzert - Startseite */ #left .mod_article>div { margin-bottom: 30px; } #left .mod_eventlist { } #left h2 { text-align: center; height: 45px; line-height: 45px; color: #fff; background: #45b29d; } #left h3 { margin: 10px 0px 5px; } #left .mod_eventlist .layout_teaser { background: #dadada; margin-top: 5px; padding: 10px; } #left .mod_eventlist .layout_teaser h3 { font-size: 20px; margin-bottom: 10px; } #left .mod_eventlist .layout_teaser .info { font-size: 14px; } #left .mod_eventlist .layout_teaser .teaser { margin: 20px 0px; } #left .mod_eventlist .layout_teaser .more { text-align: right; margin-top: 15px; } #left .mod_eventlist .layout_teaser p.more a:link { font-family: 'Roboto Condensed', sans-serif; font-size: 18px; color: #df4949; } #left .mod_eventlist .layout_teaser p.more a:hover { color: #000; } #left .mod_eventlist .empty { text-align: center; } /* Konzerte */ #main .mod_eventlist { } #main .mod_eventlist .event { float: left; width: 46%; margin: 2% 2%; height: 250px; overflow: hidden; position: relative; box-sizing: border-box; border: solid 2px #dadada; padding: 10px; } #main .mod_eventlist .event .wrap { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #main .mod_eventlist .event h3 { text-align: center; margin-bottom: 0; } #main .mod_eventlist .event .datetime, #main .mod_eventlist .event .location { text-align: center; margin-top: 20px; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; } #main .mod_eventlist .event .datetime span { display: block; margin: 5px 0px; color: #3d3d3d; } #main .mod_eventlist .event .datetime span:nth-child(2) { display: none; } #main .mod_eventlist .event .datetime .date { font-size: 25px; } #main .mod_eventlist .event .datetime .time { font-size: 20px; } #main .mod_eventlist .event .location span { font-size: 20px; } #main .mod_eventlist .event .teaser { display: none; } #main .mod_eventlist .event a.cover_link { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 100; } #main .mod_eventlist .event .cover { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 50; text-align: center; -ms-transform: translateY(-100%); /* IE 9 */ -webkit-transform: translateY(-100%); /* Chrome, Safari, Opera */ transform: translateY(-100%); transition: transform 0.2s; -webkit-transition: all 0.2s linear 0s; } #main .mod_eventlist .event:hover .cover { -ms-transform: translateY(0%); /* IE 9 */ -webkit-transform: translateY(0%); /* Chrome, Safari, Opera */ transform: translateY(0%); } #main .mod_eventlist .event .cover [class*="icon-"]:before { color: #3d3d3d; z-index: 50; position: relative; display: block; text-align: center; line-height: 250px; font-size: 80px; } #main .mod_eventlist .event .cover div.background { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #c1c1c1; z-index: 20; -moz-opacity: 0.90; opacity: 0.90; } /* konzert-leser */ .mod_eventreader p.back { width: 250px; border: solid 2px #dadada; text-align: center; height: 40px; line-height: 40px; margin-bottom: 20px; } .mod_eventreader p.back a:link { display: block; width: 100%; height: 100%; color: #df4949; } .mod_eventreader p.back a:hover { background: #c1c1c1; color: #fff; } .mod_eventreader p.back a [class*="icon-"]:before { font-size: 18px; line-height: 40px; margin-right: 10px; } .mod_eventreader p.back a span.text { font-family: 'Roboto Condensed', sans-serif; font-size: 18px; text-transform: uppercase; } .mod_eventreader .event { position: relative; min-height: 230px; } .mod_eventreader .event h2.title { margin-top: 30px; margin-bottom: 10px; width: 66.6%; } .mod_eventreader .event>div { width: 66.6%; } .mod_eventreader .event>div:nth-of-type(3) { min-height: 200px; } .mod_eventreader .event>div:nth-of-type(n+4) { width: 100%; } .mod_eventreader .event>div.datetime { width: 25%; position: absolute; top: 0px; right: 0px; border: solid; border-color: #3d3d3d; border-width: 0px 0px 0px 2px; padding: 10px 0px 10px 10px; } .mod_eventreader .event>div.location { width: 25%; position: absolute; top: 120px; right: 0px; border: solid; border-color: #3d3d3d; border-width: 0px 0px 0px 2px; padding: 10px 0px 10px 10px; } .mod_eventreader .event>div.rechts { float: right; width: 25%; } /* Archiv */ #main #archiv .mod_eventlist .event { width: 29.3%; } #main #archiv #filter-controls { height: 50px; border: solid 2px #df4949; line-height: 50px; padding: 0px 20px; display: none; margin-bottom: 10px; } #main #archiv #filter-controls h3 { float: left; display: inline; margin-right: 30px; margin-bottom: 0; } #main #archiv #filter-controls label { float: left; line-height: 50px; margin-right: 10px; } #main #archiv #filter-controls input[type="text"] { float: left; width: 60px; height: 30px; margin-top: 10px; margin-right: 20px; } #main #archiv #filter-controls input#control_title { width: 250px; } #main #archiv #filter-controls p#results { display: none; } #main #archiv #no_results { width: 96%; display: none; } #main #archiv #no_results h3 { position: relative; } /* Kontakt */ #kontakt div.member { float: left; width: 40%; text-align: center; margin: 10px 5%; display: flex; flex-direction: column; min-height: 285px; } #kontakt div.member h3 { margin-bottom: 10px; } #kontakt div.member a.cboxElement { display: inline-block; height: 185px;} /* Newsletter */ #newsletter input[type="text"] { width: 250px; } #newsletter .mod_subscribe { margin-bottom: 20px; } #newsletter p.confirm, #newsletter p.error { font-size: 14px; margin-bottom: 10px; color: #df4949; } } /* Desktop */ @media only screen and (min-width: 1025px) { nav ul li { float: left; height: 80px; line-height: 80px; } nav { width: 960px; height: 80px; background: #df4949; margin: 0px auto -50px auto; position: relative; top: -50px; } #container { width: 960px; margin: 0px auto; } #footer .inner { width: 960px; } } /* Tablets */ @media only screen and (min-width: 768px) and (max-width: 1024px) { html, body { font-size: 14px; } nav ul { width: 720px; } nav ul li { float: left; height: 80px; line-height: 80px; font-size: 19px; } nav { width: 100%; height: 80px; background: #df4949; margin: 0px auto -50px auto; position: relative; top: -50px; } nav ul li a:link, nav ul li span { padding: 0px 17px; } #header { height: 260px; position: relative; } #banner { height: 130px !important; margin: } #banner .inner { width: 730px !important; } #header #banner #header_img { background: url(../../files/Standard/images/Banner.png); background-size: cover; width: 500px; height: 164px; position: absolute; top: -17px; right: 10px; } #header #banner img { height: 80px; width: 153px; margin-top: 25px; margin-left: 10px; } #container { width: 97%; margin: 0px auto; } #footer .inner { width: 100%; } #kontakt { padding-right: 3%; } #kontakt div.member a { font-size: 0.9em; word-wrap:break-word; } #main .mod_eventlist .event .cover { display: none; } /* Overlay ausblenden */ .mod_eventreader p.back a:hover { background: none; color: #df4949; } #left .mod_eventlist .layout_teaser p.more a:hover { color: #df4949; } /* Newsletter */ #newsletter input[type="text"] { width: 200px; } } @media only screen and (max-width: 1024px) and (orientation:portrait) { #main #archiv #filter-controls p#results { font-size: 12px; } } /* Smartphone */ @media only screen and (max-width: 767px) { html, body { font-size: 14px; } .float_left, .float_right { float: none; width: 100%; text-align: center; margin-bottom: 10px; } div[class*="ce_"], div[class*="mod_"] { margin-bottom: 20px; } h1 { margin-bottom: 10px; } h2 { margin-bottom: 10px; } h3 { margin-top: 10px; } .content-text p { text-align: justify; } #impressum .content-text p { text-align: left; } .content-gallery ul li { width: 100%; text-align: center; } .content-gallery ul li img { width: 80%; } nav { margin-top: 150px; } nav ul { width: 100%; } nav ul li { text-align: center; width: 90%; margin: 5px auto;} nav ul li a, nav ul li span.active { display: block; height: 100%; width: 100%; padding: 10px 0px; font-size: 16px; } nav ul li a:link,nav ul li a:visited,nav ul li a:hover { background: #df4949; color: #fff; } nav ul li span.active { border: solid 1px #000; } #banner { width: 100%; background: #334d5c; position: absolute; top: 0px; left: 0px; text-align: center; padding: 10px 0px; } #header { border-style: solid; border-width: 0px 0px 1px 0px; border-color: #df4949; } #container { padding: 20px 0px 30px; width: 90%; margin: 0 auto; } #main { margin-bottom: 50px; } #footer { height: 100px; width: 100%; } #footer .bg { height: 80px; width: 100%; background: #dadada; display: block; } #footer .inner { height: 160px; background: #c1c1c1; margin: 0 auto; position: relative; top: -100px; margin-bottom: -100px; } #footer address { font-style: normal; position: absolute; top: 20px; right: 20px; text-align: right; } #footer address span { display: block; } #footer address span.seperator { display: none; } #footer #link_impressum { position: absolute; top: 120px; right: 20px; text-align: right; } #footer a#link_newsletter { position: absolute; top: 90px; right: 20px; text-align: right; } /* Nächstes Konzert - Startseite */ #left .mod_article>div { margin-bottom: 30px; } #left .mod_eventlist { } #left h2 { text-align: center; height: 45px; line-height: 45px; color: #fff; background: #45b29d; } #left .mod_eventlist .layout_teaser { background: #dadada; margin-top: 5px; padding: 10px; } #left .mod_eventlist .layout_teaser h3 { font-size: 20px; margin-bottom: 10px; } #left .mod_eventlist .layout_teaser .info { font-size: 14px; } #left .mod_eventlist .layout_teaser .teaser { margin: 20px 0px; } #left .mod_eventlist .layout_teaser .more { text-align: right; margin-top: 15px; } #left .mod_eventlist .layout_teaser p.more a:link { font-family: 'Roboto Condensed', sans-serif; font-size: 18px; color: #df4949; } #left .mod_eventlist .layout_teaser p.more a:hover { color: #000; } #left .mod_eventlist .empty { text-align: center; } /* Konzerte */ #main .mod_eventlist { } #main .mod_eventlist .event { float: left; width: 100%; margin: 2% 0%; height: 220px; overflow: hidden; position: relative; box-sizing: border-box; border: solid 2px #dadada; padding: 10px; } #main .mod_eventlist .event .wrap { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #main .mod_eventlist .event h3 { text-align: center; margin-bottom: 0; } #main .mod_eventlist .event .datetime, #main .mod_eventlist .event .location { text-align: center; margin-top: 20px; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; } #main .mod_eventlist .event .datetime span { display: block; margin: 5px 0px; color: #3d3d3d; } #main .mod_eventlist .event .datetime span:nth-child(2) { display: none; } #main .mod_eventlist .event .datetime .date { font-size: 25px; } #main .mod_eventlist .event .datetime .time { font-size: 20px; } #main .mod_eventlist .event .location span { font-size: 20px; } #main .mod_eventlist .event .teaser { display: none; } #main .mod_eventlist .event a.cover_link { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 100; } #main .mod_eventlist .event .cover { display: none; } /* konzert-leser */ .mod_eventreader p.back { width: 100%; border: solid 2px #dadada; text-align: center; height: 40px; line-height: 40px; margin-bottom: 20px; } .mod_eventreader p.back a:link { display: block; width: 100%; height: 100%; color: #df4949; } .mod_eventreader p.back a:hover { background: none; } .mod_eventreader p.back a [class*="icon-"]:before { font-size: 18px; line-height: 40px; margin-right: 10px; } .mod_eventreader p.back a span.text { font-family: 'Roboto Condensed', sans-serif; font-size: 18px; text-transform: uppercase; } .mod_eventreader h1 { margin-bottom: 30px; } .mod_eventreader .event>div.datetime, .mod_eventreader .event>div.location { width: 100%; border: solid 2px #dadada; text-align: center; padding: 10px 0px; margin: 10px 0px; } .mod_eventreader .event>div.datetime h2, .mod_eventreader .event>div.location h2 { font-size: 20px; } /* Archiv */ #main #archiv #filter-controls { border: solid 2px #df4949; padding: 10px 20px; display: none; margin-bottom: 20px; } #main #archiv #filter-controls h3 { margin-bottom: 0; } #main #archiv #filter-controls label { display: block; margin: 10px 0px 10px; } #main #archiv #filter-controls input[type="text"] { width: 60px; height: 30px; margin-top: 5px; } #main #archiv #filter-controls input#control_title { width: 250px; } #main #archiv #filter-controls p#results { display: none; margin-top: 20px; text-align: center; } #main #archiv #no_results { display: none; } #main #archiv #no_results h3 { position: relative; } /* Kontakt */ #kontakt div.member { width: 100%; text-align: center ; margin-bottom: 20px; } #kontakt div.member p { text-align: center !important; } #kontakt div.member h3 { margin-bottom: 10px; } #kontakt div.member a { font-size: 0.9em; word-wrap:break-word; } input[type="text"], input[type="email"], textarea { font-size: 16px; margin-top: 5px; } input[type="submit"] { padding: 10px 20px; font-size: 16px; width: 80%; } /* Newsletter */ #newsletter form { text-align: center; } #newsletter input[type="submit"] { margin-top: 10px; } #newsletter p.confirm, #newsletter p.error { margin-bottom: 10px; color: #df4949; } }