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}.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%} .mod_jamp_googlemaps { position: relative; } .mod_jamp_googlemaps .iframeBlocker { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: gray; color: white; padding: 1rem; } #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} /* ============================================================================= * reset & defaults * ========================================================================== */ /* reset ------------------------------------------------- */ * {margin: 0; padding: 0; border: 0; outline: 0; background-repeat: no-repeat;} #wrapper * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #colorbox *, #wrapper .mejs-container * {-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;} ol, ul {list-style: none;} table {border-spacing: 0; border-collapse: collapse;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} b,strong {font-weight: bold;} input {outline: 0 none;} figure { line-height: 0; } /* lightbox link height ------------------------------------------------- */ .image_container a {line-height: 0;} /* lightbox width ------------------------------------------------- */ #mbCenter img {width: auto; max-width: 100%; height: auto; vertical-align: middle;} /* mod_navigation (mainmenu) ------------------------------------------------- */ #mainmenu .level_1, #mainmenu .level_2 {margin: 0; padding: 0;} /* ============================================================================= * general styles & page setup * ========================================================================== */ html,body {height: 100%;} a {outline: none; -moz-outline-style: none; -webkit-outline-style: none;} iframe {max-width: 100%;} code, pre {font-family: monospace;} hr {padding: 0; border: none; background-color: #dfdfdf; text-align: center; height: 1px; margin: 20px 0;} #container .image_container img {} .image_container img:after {content: ""; clear: both; display: block;} p {margin-bottom: 14px;} p.more {margin-bottom: 0;} blockquote {font-style: italic; font-size: 16px; margin-bottom: 20px;} blockquote p {line-height: 22px;} .float-left { float: left; } .float-right { float: right; } .rot { color: #e32523; font-size: 14px; text-transform: uppercase; } .grau { color: #828282; font-size: 14px; } .sr-only { display: none !important; } /* ============================================================================= * * & html & body * ========================================================================== */ html, body {} body {overflow-x: hidden; background-repeat: repeat;} body.ie8 {overflow: auto;} /* ============================================================================= * ============================================================================= * ============================================================================= * ============================================================================= * ============================================================================= * ============================================================================= * ============================================================================= * ============================================================================= * ========================================================================== */ /* ============================================================================= * default stylesheet * ========================================================================== */ /* body, headlines ------------------------------------------------- */ body, #wrapper {background: #f0f1ec;} body, input, select, textarea {font-size: 12px;} body, input, select, textarea, a, p, span {line-height: 1.3;} body, input, select, textarea {font-family: "Arial", sans-serif; color: #777777;} h1, h2, h3, h4, h5, h6 {font-family: "Arial", sans-serif; font-weight: normal;text-transform:uppercase; margin-bottom:10px !important;} h1, h2, h4, h5, h6, .color {color: #0780ee;} h3 {color:#000;} h4 {} a {color: #000000; text-decoration: underline;} a:hover {text-decoration: none;} #startseite .ce_headline {margin-top:30px;padding-right:10px;} /* a (special) ------------------------------------------------- */ #header div.logo a, #header div#logo a, #header ul.level_1 a,#header ul.level_1 a span, #left ul.level_1 a, #right ul.level_1 a, #footer ul.level_1 a, #main ul.level_1 a {text-decoration: none;} /* headlines ------------------------------------------------- */ h1, h2, h3, h4, h5, h6 {line-height: 1.3;} h1, h1 a {font-size: 17px; padding: 0; margin: 0;} h2, h2 a {font-size: 17px; padding: 0; margin: 0;} h3, h3 a {font-size: 15px; padding: 0; margin: 0;} h4, h4 a {font-size: 14px; padding: 0; margin: 0;} h5, h5 a {font-size: 12px; padding: 0; margin: 0;} h6, h6 a {font-size: 11px; padding: 0; margin: 0;} #header div.logo a, #header div#logo a, #header ul.level_1 a,#header ul.level_1 a span, #left ul.level_1 a, #right ul.level_1 a, #footer ul.level_1 a, #main ul.level_1 a {color: inherit; background: none; padding: 0; margin: 0;} /* cols & widths ------------------------------------------------- */ .col24, .col25, .col33, .col38, .col50, .col75, .col76 {float: left;} .col24 {width: 24%;} .col25 {width: 25%;} .col33 {width: 33.3333333%;margin-bottom:15px;} .col38 {width: 38%;} .col50 {width: 50%;} .col75 {width: 75%;} .col76 {width: 76%;} .col100 {width: 100%;} .col30 {width: 30.333333333%; margin-right: 3%;} /* ol,ul,li ------------------------------------------------- */ #main ol, #main ul {padding: 0 0 0 20px; margin: 10px 0 10px 0; list-style-type: none;} #main ol li, #main ul li {padding: 0 0 0 10px; margin: 0;} #main ol li {list-style-type: decimal;} #main ul li {list-style-type: disc;} /*#main li {list-style: url(../../files/layout/bg-li.png);}*/ /* image_container floats ------------------------------------------------- */ #main .image_container.float-right {margin: 0 0 3% 5%;} #main .image_container.float-left {margin: 0 5% 3% 0;} /* ce_form ------------------------------------------------- */ #main .captcha-container {background: #ecd0d0;} input.button, input.reset, input[type="submit"], input.submit, button.submit {color: #ffffff; background: #1388ef; padding: 10px;} #main input[type="text"], #main input[type="email"], #main input.captcha, #main select.select, #main textarea {float: left; width: 297px; margin-bottom: 5px; border: 1px #000000 solid;} #main textarea {height: 60px;} #main input.captcha {width: 100px;} #main label {display: block; float: left; width: 150px;} input.text.error, input.captcha.error, input[type="checkbox"].error, input.radio.error, select.error, textarea.error {margin-left: 150px;} input.password.confirm.error {margin-left: 0;} #main .formbody br {clear: both;} #main .submit_container {clear: both;} /* mod_breadcrumb ------------------------------------------------- */ .mod_breadcrumb, .mod_breadcrumb h6, .mod_breadcrumb li, .mod_breadcrumb li a {font-size: 12px; line-height: 1;} .mod_breadcrumb h6 {padding: 0 20px 0 0; margin: 0 5px 0 0;} .mod_breadcrumb ul {padding: 0; margin: 0;} .mod_breadcrumb li {padding-right: 20px; margin-right: 5px;} .mod_breadcrumb li:before {margin-right: 5px;} /* mod_randomImage ------------------------------------------------- */ .mod_randomImage, #header .mod_article .ce_image {height: auto; padding-top: 200px;} #header .map {padding-top: 200px; margin-bottom: 20px;height:550px;} #header .map .iframeBlocker {margin-top: 200px;} /* mod_navigation (mainmenu-mobile) ------------------------------------------------- */ #menu-mobile {position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; overflow: hidden; display: none;} #menu-mobile.clicked {display: block;} #menu-mobile-button {display: none; position: absolute; top: 10px; left: 10px; z-index: 100;} #menu-mobile-button a {display: block;} #mainmenu-mobile {width: 250px;} #mainmenu-mobile .level_1 > li > a, #mainmenu-mobile .level_1 > li > span, #mainmenu-mobile .level_1 > li > strong {display: block; min-height: 10px; line-height: 1; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; font-size: 12px; color: #676767; border-bottom: 1px #efefee solid; text-decoration: none;} #mainmenu-mobile .level_1 > li > a:hover, #mainmenu-mobile .level_1 > li > span, #mainmenu-mobile .level_1 > li > strong, #mainmenu-mobile .level_1 > li.trail > a, #mainmenu-mobile .level_1 > li > a.active {color: #fff; background: #1388ef;} #mainmenu-mobile .level_2 > li > a, #mainmenu-mobile .level_2 > li > span, #mainmenu-mobile .level_2 > li > strong {display: block; min-height: 10px; line-height: 1; padding-top: 10px; padding-bottom: 10px; padding-left: 40px; padding-right: 20px; font-size: 12px; color: #676767; border-bottom: 1px #efefee solid; text-decoration: none;} #mainmenu-mobile .level_2 > li > a:hover, #mainmenu-mobile .level_2 > li > span, #mainmenu-mobile .level_2 > li > strong, #mainmenu-mobile .level_2 > li.trail > a, #mainmenu-mobile .level_2 > li > a.active {color: #fff; background: #1388ef;} /* mod_navigation (mainmenu) ------------------------------------------------- */ #mainmenu {position: absolute; height: 54px; top: 144px; background: #f6f7f3; width: 100%; border-bottom: 6px solid #1388ef;} #mainmenu .level_1 {height: 54px;} #mainmenu .level_1 > li {float: left; border-right: 1px solid #efefee;} #mainmenu .level_1 > li.last {border:none;} #mainmenu .level_1 > li > a, #mainmenu .level_1 > li > span, #mainmenu .level_1 > li > strong{display: block; height: 54px; padding: 0 12px; font-size: 12px; line-height: 54px; color: #676767; text-transform: uppercase; text-align: center; } #mainmenu .level_1 > li > a:hover, #mainmenu .level_1 > li > span, #mainmenu .level_1 > li > strong, #mainmenu .level_1 > li.trail > a, #mainmenu .level_1 > li > a.active {color: #fff; background: #1388ef;} #mainmenu .level_1 > li > a.last, #mainmenu .level_1 > li > span.last, #mainmenu .level_1 > li > strong.last {margin-right: 0;} #mainmenu .menu-layer {width: 100%; height: 300px;} #mainmenu .level_2 {} #mainmenu .level_2 > li {} #mainmenu .level_2 > li > a, #mainmenu .level_2 > li > span, #mainmenu .level_2 > li > strong {display: block; font-size: 12px; line-height: 1; color: #000000;} #mainmenu .level_2 > li > a:hover, #mainmenu .level_2 > li > span, #mainmenu .level_2 > li > strong, #mainmenu .level_2 > li.trail > a, #mainmenu .level_2 > li > a.active {color: #000000;} /*#mainmenu .level_2 > li > a.last, #mainmenu .level_2 > li > span.last {padding-right: 0; margin-right: 0;}*/ /* wrapper ------------------------------------------------- */ #wrapper {width:945px; margin:0 auto; padding-bottom: 130px;} /* header ------------------------------------------------- */ #header {background: #ffffff; height: auto;margin-bottom: 20px;} #header .inside {} #header .header {} #header .header > div:not(.map), #header .header > nav { z-index: 100; } #header .map-mobile {display: none;} #header .map-mobile .dlh_googlemap {width: 100%; height: 350px;} /* logorandom ------------------------------------------------- */ #logo {position: absolute; top: 26px; left: 36px; width: 214px;} /* topnavigation ------------------------------------------------- */ #topnavigation {position:absolute;right:12px;width:230px;top:26px;} #topnavigation .mod_customnav li {float: left; margin-left:15px !important;} #topnavigation .mod_customnav a, #topnavigation .mod_customnav span {display:block;} #topnavigation .mod_customnav a:hover, #topnavigation .mod_customnav span {text-decoration:underline;} /* container ------------------------------------------------- */ #container {} /* main Startseite ------------------------------------------------- */ #main {} #main .inside {} /* main Standard ------------------------------------------------- */ body.standard #main .inside {width: 752px; background: #fff; padding:20px;} body.standard #main h2, body.standard #main h3 {text-transform: none;} body.standard #main h3 {font-size:14px;} body.standard #main table {width:100%;margin:15px 0;border:1px solid #dfdfdf;} body.standard #main table thead th {background:#8d8d8d;color:#fff;text-align:left;padding:10px;} body.standard #main table tr.odd {background:#dfdfdf;} body.standard #main table td {padding:10px;vertical-align:top;} body.standard #main .ce_downloads {margin:5px 0 15px;} body.standard #main .ce_downloads ul {margin-left:20px;} body.standard #main .ce_downloads li {padding:5px 0 0;list-style-image: url("../../files/layout/list.png");} body.standard #main li {padding:5px 0 0;list-style-image: url("../../files/layout/list.png");} /* Linke Spalte Standard ------------------------------------------------- */ body.standard #left .inside {width: 173px; margin-right:20px;} body.standard #left .inside .mod_article {background:#fff;margin-bottom:20px;padding:10px;} body.standard #left .inside .mod_article h2 {text-transform:none;font-size:16px;} body.standard #left .mod_customnav {margin-bottom:20px;} body.standard #left .mod_customnav ul {background:#fff; padding-left:10px;} body.standard #left .mod_customnav li {list-style-image: url("../../files/layout/list.png"); margin-left:20px;} body.standard #left .mod_customnav li.last {border:none;} body.standard #left .mod_customnav li strong {font-weight: normal;} body.standard #left .mod_customnav li span, body.standard #left .mod_customnav li strong, body.standard #left .mod_customnav li a {display:block; height:38px; background:#fff; padding: 10px 7px; font-size:15px;} body.standard #left .mod_customnav li a { display: block; } body.standard #left .mod_customnav li a, body.standard #left .mod_customnav li a span {color:#000;} body.standard #left .mod_customnav li strong, body.standard #left .mod_customnav li a:hover span {color:#0780ee;} body.standard #left .zaehlerstand_linke_spalte {margin-bottom:20px;} body.standard #left .zaehlerstand_linke_spalte a {display:block;text-transform:uppercase;text-decoration:none;color:#fff;background:#18cdaa;width: 100%; height: 48px; line-height: 48px; text-align: center;} body.standard #left .zaehlerstand_linke_spalte a:hover {} body.standard #left .rot {text-transform:none;} body.standard #left .notfall {background:#fff;padding:10px;} /* border ------------------------------------------------- */ .border {width:100%; height:1px; background: #dfdfdf;margin:20px 0;} /* zählerstanderfassung --------------------------------------------------*/ #header .zaehlerstand {position:absolute;top:144px;right:0;} #header .zaehlerstand a {display:block; width: 195px; height: 48px; text-transform:uppercase;text-decoration:none;color:#fff;background:#18cdaa;padding:0; text-align: center; line-height: 48px;} #header .zaehlerstand a:hover {} /* boxen --------------------------------------------------*/ #boxen {border-top: 1px solid #dfdfdf; padding-top: 20px; border-bottom: 1px solid #dfdfdf; padding-bottom: 20px; text-transform: uppercase; margin-bottom: 15px;} /* .box {display: block; position: relative; float: left; width: 173px; height: 238px; overflow: hidden; font-size: 20px; margin-right: 20px; background-color: #fff;}*/ #boxen .ce_text {float:left;margin-right:20px;} #boxen a {display: block; width: 173px; height: 238px; padding: 207px 0 0 20px; text-decoration:none;} #boxen .verwaltung a {background: url("../../files/layout/sprite_verwaltung.jpg") no-repeat;} #boxen .verwaltung a:hover {background: url("../../files/layout/sprite_verwaltung.jpg") no-repeat 0 -238px; color:#0780ee;} #boxen .wasser a {background: url("../../files/layout/sprite_wasser.jpg") no-repeat;;} #boxen .wasser a:hover {background: url("../../files/layout/sprite_wasser.jpg") no-repeat 0 -238px; color:#0780ee;} #boxen .abwasser a {background: url("../../files/layout/sprite_abwasser.jpg") no-repeat;} #boxen .abwasser a:hover {background: url("../../files/layout/sprite_abwasser.jpg") no-repeat 0 -238px; color:#0780ee;} #boxen .baubetriebshof a {background: url("../../files/layout/sprite_baubetriebshof.jpg") no-repeat;} #boxen .baubetriebshof a:hover {background: url("../../files/layout/sprite_baubetriebshof.jpg") no-repeat 0 -238px; color:#0780ee;} #boxen .schwimmhalle {margin:0;} #boxen .schwimmhalle a {background: url("../../files/layout/sprite_schwimmhalle.jpg") no-repeat;} #boxen .schwimmhalle a:hover {background: url("../../files/layout/sprite_schwimmhalle.jpg") no-repeat 0 -238px; color:#0780ee;} /*.box h2 {font-size: 15px; text-align: center; vertical-align: middle; color: #777777; position: absolute; bottom: 10px; width: 100%;} .box img{margin-top: 47px;} .box .image_container {text-align: center; height: 193px; background: #f6f7f2;} .box .image_container a {display: block;} .box.schwimmhalle {margin-right: 0px;} .box .image_container:hover {color: #fff; background: #1388ef;} */ /* notruf ------------------------------------------------- */ .notruf { background: #fff; padding: 10px;} /* footer ------------------------------------------------- */ #footer {min-height: 220px; background: #5c5a5a; color: #fff; margin-top: 34px;} #footer .inside {} #footer .footer {padding: 26px 26px;} #footer p {line-height: 22px;} #footer a {color: white;} #footer .ce_text {float: left; } #footer h3 {text-transform: uppercase; font-size: 13px; color: white;} #footer .ce_text.last p {line-height: 1;} /* ============================================================================= * "ce_" & "mod_" - elements * ========================================================================== */ /* ce_gallery ------------------------------------------------- */ #main .ce_gallery ul, #main .ce_gallery ul li {padding: 0; margin: 0; list-style: none;} #main .ce_gallery ul li {margin-right: 2%;} /* ce_downloads ------------------------------------------------- */ #main .ce_downloads ul, #main .ce_downloads ul li {padding: 0; margin: 0;} /* mod_search ------------------------------------------------- */ .mod_search form {display: none;} #search {position: absolute; top: 17px; right: 250px; width: 270px;} #search br {display: none;} #search label {float: left; height: 30px; line-height: 30px;} #search input[type="text"] {float: left; width: 200px; height: 30px; border: 1px #0780ee solid;} #search .submit_container, #search .widget-submit {float: left; margin-top: 0;} #search .submit_container input.submit, #search .widget-submit button.submit {height: 30px; padding: 0 10px;} /* mod_subscribe ------------------------------------------------- */ #main .mod_subscribe p.error {float: none;} #main .mod_subscribe input.text {float: none;} #main .mod_subscribe input.submit {display: block;} /* mod_subscribe ------------------------------------------------- */ #main .mod_article a.more {display:block;height:38px;width:174px;background:#0780ee;color:#fff;text-decoration:none;padding:13px 33px;text-transform:uppercase;} #main .mod_article a.more:hover {text-decoration:underline;} /* mod_newslist (Startseite) ------------------------------------------------- */ #main .mod_newslist {padding-right:20px;} #main .mod_newslist .info {color:#0780ee;text-transform:uppercase;float:left;width:30px;margin-right:12px;} #main .mod_newslist .tag {font-size:24px;} #main .mod_newslist .monat {font-size:14px;} #main .mod_newslist .jahr {font-size:13px;} #main .mod_newslist .teaser {float:left;width:250px;} #main .mod_newslist h2 {margin-bottom:5px;} #main .mod_newslist h2 a {font-size:18px;text-transform:uppercase;text-decoration:none;line-height:1.3;color:#0780ee;} #main .mod_newslist .more {clear: both;} #main .mod_newslist .more a {display:block;height:38px;width:174px;background:#0780ee;color:#fff;text-decoration:none;padding:13px 33px;text-transform:uppercase;} #main .mod_newslist .more a:hover {text-decoration:underline;} /* mod_newslist (Standard) ------------------------------------------------- */ body.standard #main .mod_newslist .teaser {width:90%;margin-bottom:10px;} body.standard #main .mod_newslist .more {margin-bottom:20px;} /* ============================================================================= * ============================================================================= * ============================================================================= * ============================================================================= * ============================================================================= * ============================================================================= * ============================================================================= * ============================================================================= * ========================================================================== */ /* ============================================================================= * * Responsive webdesign * * ========================================================================== */ /* ============================================================================= * tablet * ========================================================================== */ /* iPad - Landscape 1024x768px */ @media only screen and (max-width: 1024px) { } @media only screen and (max-width: 1000px) { } @media only screen and (max-width: 945px) { #wrapper {width: 100%;} #main .inside {} body.standard #main .inside {width: auto;} #startseite .ce_headline {padding-left: 10px; padding-right: 10px;} #startseite .ce_text.col78 {padding-left: 10px; padding-right: 10px;} #startseite .mod_newslist {padding-left: 10px; padding-right: 10px;} #boxen .ce_text {margin-right: 3%; width: 30%;} #boxen a {width: 100%;} .ce_headline.col24 {float: none; width: 100%;} .ce_text.col78 {float: none;} #main .mod_newslist {} #main .mod_newslist .tag, #main .mod_newslist .monat, #main .mod_newslist .jahr {float: left; line-height: 1; font-size: 18px; margin-right: 5px;} #main .mod_newslist .info {width: auto;} #main .mod_newslist .teaser {width: auto;} } @media only screen and (max-width: 880px) { #header .zaehlerstand {top: 60px;} } /* iPad - Portrait 768x1024px */ @media only screen and (max-width: 768px) { #mainmenu {top: 184px;} #search {top: 130px;} .mod_randomImage, #header .map, #header .mod_article .ce_image {padding-top: 240px;} #header .map {height:auto;} #boxen .ce_text {width: 173px; margin: 0 auto; float: none;} .col38 {width: 100%; margin-bottom: 15px;} .col33 {width: 100%; margin-bottom: 15px;} body.standard #main .inside {width: 100%; margin-bottom: 15px;} #main .image_container {width: 100%;} body.standard #left .inside {width: 100%;} body.standard #main .ce_table, body.standard #main.mod_article table {overflow: scroll;} body.standard #main.mod_article table thead th {width:auto;} body.standard #left .zaehlerstand_linke_spalte {display: none;} #footer .col30 {width: 50%; margin-right: 0;} #footer .col30.last {width: 100%;} } @media only screen and (max-width: 735px) { #logo {left: 76px;} #mainmenu {display: none;} #menu-mobile-button {display: block;} #search {top: 160px; right: 50%; margin-right: -131px;} } @media only screen and (max-width: 550px) { #footer .col30 {width: 100%; float: none; text-align: center;} #header .zaehlerstand {position: static;} #header .zaehlerstand a {margin: 10px auto 0 auto;} #topnavigation {position: static; padding-top: 10px; width: auto;} #topnavigation .level_1 {float: left; position: relative; left: 50%;} #topnavigation .level_1 li {float: left; position: relative; right: 50%;} #logo {position: static; text-align: center; margin: 0 auto; padding-top: 26px;} .mod_randomImage, #header .map, #header .mod_article .ce_image {padding-top: 10px;} #search {position: static; margin: 15px auto 5px auto;} } /* ============================================================================= * phone * ========================================================================== */ /* Small tablet 480x640px */ @media only screen and (max-width: 480px) { #main input.text, #main input[type="text"], #main input[type="email"], #main input.captcha, #main select.select, #main textarea {width: 100%;} } /* iPhone 320x480px */ @media only screen and (max-width: 320px) { #main input.text, #main input[type="text"], #main input[type="email"], #main input.captcha, #main select.select, #main textarea {width: 100%;} input.text.error, input.captcha.error, input[type="checkbox"].error, input.radio.error, select.error, textarea.error {margin-left: 0;} #main label {float: none;} p.error {float: none;} #header .map {display: none;} #header .map-mobile {display: block;} } /* Small phone 240x320px */ @media only screen and (max-width: 240px) { } .cookiebar__button{ background-color: #18cdaa; margin-top: 9px; } /* ============================================================================= * forms * ========================================================================== */ .ce_form {margin-bottom: 15px;} .ce_form .widget {overflow:hidden;} /* fieldset+legend ------------------------------------------------- */ fieldset {padding: 0.5em; margin-bottom: 20px;} legend {display: none;} /* input, select, textarea ------------------------------------------------- */ input.text,input[type="text"],input[type="email"],input.captcha,input[type="checkbox"],input.radio, select, textarea {width: 100%; padding: 5px; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} input[type="search"] {-webkit-appearance: none; border-radius: 0;} select {height: 31px; padding: 8px;} textarea {height: 200px;} /* radio-buttons ------------------------------------------------- */ .radio_container {margin-top: 1px;} .radio_container legend span {margin-bottom: 5px; display: inline;} .radio_container label {float: none;} .radio_container input {width: 20px; border: none; padding: 0; box-shadow: none; -webkit-box-shadow: none;} .radio_container legend {display: block; overflow: hidden;} .radio_container span {display: block;} /* checkboxes ------------------------------------------------- */ .widget-checkbox {margin-top: 1px;} .widget-checkbox legend span {margin-bottom: 5px; display: inline;} .widget-checkbox label {float: none;} .widget-checkbox input {width: 20px!important; border: none!important; padding: 0; box-shadow: none; -webkit-box-shadow: none;} .widget-checkbox legend {display: block; overflow: hidden;} .widget-checkbox span {display: block;} /* submit-button ------------------------------------------------- */ .submit_container, .widget-submit {float: left;margin-top: 20px;} .submit_container input, .widget-submit button {width: auto!important;} .submit {-webkit-appearance:none; cursor: pointer;} /* errors ------------------------------------------------- */ label.error {color: red;} input.error {border: 1px solid red;} p.error {color: red; /*clear: both;*/} p.error {float: none;} input.text.error, input.captcha.error, input[type="checkbox"].error, input.radio.error, select.error, textarea.error {} .ce_form .captcha_text.error {width: auto; float: left; display: block;} /* captcha ------------------------------------------------- */ .ce_form .captcha {width: 20%; margin-right: 2%;} .ce_form .captcha_text {width: 70%; line-height: 33px;} .ce_form .captcha_container {padding: 2%; background: #ecd0d0;} .ce_form .captcha_container label {display: block;} /* custom ------------------------------------------------- */ .ce_form .required.mandatory {float: right; margin-top: 20px;} .datenschutz input{float: left; margin-top: 2px;} #main .datenschutz > label span {display: inline;} #main .datenschutz .custom-controls-stacked label {width: auto;}