/* MediaElement.js, (c) 2010-2014 John Dyer, MIT license */ .mejs-offscreen{clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);clip-path:polygon(0 0,0 0,0 0,0 0);position:absolute!important;height:1px;width:1px;overflow:hidden}.mejs-container{position:relative;background:#000;font-family:Helvetica,Arial;text-align:left;vertical-align:top;text-indent:0}.mejs-audio{margin-top:18px}.mejs-container:focus{outline:none}.me-plugin{position:absolute}.mejs-embed,.mejs-embed body{width:100%;height:100%;margin:0;padding:0;background:#000;overflow:hidden}.mejs-fullscreen{overflow:hidden!important}.mejs-container-fullscreen{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;z-index:1000}.mejs-container-fullscreen .mejs-mediaelement,.mejs-container-fullscreen video{width:100%;height:100%}.mejs-clear{clear:both}.mejs-background{position:absolute;top:0;left:0}.mejs-mediaelement{position:absolute;top:0;left:0;width:100%;height:100%}.mejs-poster{position:absolute;top:0;left:0;background-size:contain;background-position:50% 50%;background-repeat:no-repeat}:root .mejs-poster img{display:none}.mejs-poster img{border:0;padding:0;border:0}.mejs-overlay{position:absolute;top:0;left:0}.mejs-overlay-play{cursor:pointer}.mejs-overlay-button{position:absolute;top:50%;left:50%;width:100px;height:100px;margin:-50px 0 0 -50px;background:url(../../assets/jquery/mediaelement/2.21.2/images/bigplay.svg) no-repeat}.no-svg .mejs-overlay-button{background-image:url(../../assets/jquery/mediaelement/2.21.2/images/bigplay.png)}.mejs-overlay:hover .mejs-overlay-button{background-position:0 -100px}.mejs-overlay-loading{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;background:#333;background:url(../../assets/jquery/mediaelement/2.21.2/images/background.png);background:rgba(0,0,0,.9);background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(50,50,50,.9)),to(rgba(0,0,0,.9)));background:-webkit-linear-gradient(top,rgba(50,50,50,.9),rgba(0,0,0,.9));background:-moz-linear-gradient(top,rgba(50,50,50,.9),rgba(0,0,0,.9));background:-o-linear-gradient(top,rgba(50,50,50,.9),rgba(0,0,0,.9));background:-ms-linear-gradient(top,rgba(50,50,50,.9),rgba(0,0,0,.9));background:linear-gradient(rgba(50,50,50,.9),rgba(0,0,0,.9))}.mejs-overlay-loading span{display:block;width:80px;height:80px;background:url(../../assets/jquery/mediaelement/2.21.2/images/loading.gif) 50% 50% no-repeat}.mejs-container .mejs-controls{position:absolute;list-style-type:none;margin:0;padding:0;bottom:0;left:0;background:url(../../assets/jquery/mediaelement/2.21.2/images/background.png);background:rgba(0,0,0,.7);background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(50,50,50,.7)),to(rgba(0,0,0,.7)));background:-webkit-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-moz-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-o-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-ms-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:linear-gradient(rgba(50,50,50,.7),rgba(0,0,0,.7));height:30px;width:100%}.mejs-container .mejs-controls div{list-style-type:none;background-image:none;display:block;float:left;margin:0;padding:0;width:26px;height:26px;font-size:11px;line-height:11px;font-family:Helvetica,Arial;border:0}.mejs-controls .mejs-button button{cursor:pointer;display:block;font-size:0;line-height:0;text-decoration:none;margin:7px 5px;padding:0;position:absolute;height:16px;width:16px;border:0;background:url(../../assets/jquery/mediaelement/2.21.2/images/controls.svg) no-repeat}.no-svg .mejs-controls .mejs-button button{background-image:url(../../assets/jquery/mediaelement/2.21.2/images/controls.png)}.mejs-controls .mejs-button button:focus{outline:dotted 1px #999}.mejs-container .mejs-controls .mejs-time{color:#fff;display:block;height:17px;width:auto;padding:10px 3px 0 3px;overflow:hidden;text-align:center;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.mejs-container .mejs-controls .mejs-time a{color:#fff;font-size:11px;line-height:12px;display:block;float:left;margin:1px 2px 0 0;width:auto}.mejs-controls .mejs-play button{background-position:0 0}.mejs-controls .mejs-pause button{background-position:0 -16px}.mejs-controls .mejs-stop button{background-position:-112px 0}.mejs-controls div.mejs-time-rail{direction:ltr;width:200px;padding-top:5px}.mejs-controls .mejs-time-rail span,.mejs-controls .mejs-time-rail a{display:block;position:absolute;width:180px;height:10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;cursor:pointer}.mejs-controls .mejs-time-rail .mejs-time-total{margin:5px;background:#333;background:rgba(50,50,50,.8);background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(30,30,30,.8)),to(rgba(60,60,60,.8)));background:-webkit-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-moz-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-o-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-ms-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:linear-gradient(rgba(30,30,30,.8),rgba(60,60,60,.8))}.mejs-controls .mejs-time-rail .mejs-time-buffering{width:100%;background-image:-o-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(.25,rgba(255,255,255,.15)),color-stop(.25,transparent),color-stop(.5,transparent),color-stop(.5,rgba(255,255,255,.15)),color-stop(.75,rgba(255,255,255,.15)),color-stop(.75,transparent),to(transparent));background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-ms-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);-webkit-background-size:15px 15px;-moz-background-size:15px 15px;-o-background-size:15px 15px;background-size:15px 15px;-webkit-animation:buffering-stripes 2s linear infinite;-moz-animation:buffering-stripes 2s linear infinite;-ms-animation:buffering-stripes 2s linear infinite;-o-animation:buffering-stripes 2s linear infinite;animation:buffering-stripes 2s linear infinite}@-webkit-keyframes buffering-stripes{0%{background-position:0 0}to{background-position:30px 0}}@-moz-keyframes buffering-stripes{0%{background-position:0 0}to{background-position:30px 0}}@-ms-keyframes buffering-stripes{0%{background-position:0 0}to{background-position:30px 0}}@-o-keyframes buffering-stripes{0%{background-position:0 0}to{background-position:30px 0}}@keyframes buffering-stripes{0%{background-position:0 0}to{background-position:30px 0}}.mejs-controls .mejs-time-rail .mejs-time-loaded{background:#3caac8;background:rgba(60,170,200,.8);background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(44,124,145,.8)),to(rgba(78,183,212,.8)));background:-webkit-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));background:-moz-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));background:-o-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));background:-ms-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));background:linear-gradient(rgba(44,124,145,.8),rgba(78,183,212,.8));width:0}.mejs-controls .mejs-time-rail .mejs-time-current{background:#fff;background:rgba(255,255,255,.8);background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,.9)),to(rgba(200,200,200,.8)));background:-webkit-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-moz-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-o-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-ms-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:linear-gradient(rgba(255,255,255,.9),rgba(200,200,200,.8));width:0}.mejs-controls .mejs-time-rail .mejs-time-handle{display:none;position:absolute;margin:0;width:10px;background:#fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;border:solid 2px #333;top:-2px;text-align:center}.mejs-controls .mejs-time-rail .mejs-time-float{position:absolute;display:none;background:#eee;width:36px;height:17px;border:solid 1px #333;top:-26px;margin-left:-18px;text-align:center;color:#111}.mejs-controls .mejs-time-rail .mejs-time-float-current{margin:2px;width:30px;display:block;text-align:center;left:0}.mejs-controls .mejs-time-rail .mejs-time-float-corner{position:absolute;display:block;width:0;height:0;line-height:0;border:solid 5px #eee;border-color:#eee transparent transparent transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;top:15px;left:13px}.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float{width:48px}.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current{width:44px}.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner{left:18px}.mejs-controls .mejs-fullscreen-button button{background-position:-32px 0}.mejs-controls .mejs-unfullscreen button{background-position:-32px -16px}.mejs-controls .mejs-mute button{background-position:-16px -16px}.mejs-controls .mejs-unmute button{background-position:-16px 0}.mejs-controls .mejs-volume-button{position:relative}.mejs-controls .mejs-volume-button .mejs-volume-slider{display:none;height:115px;width:25px;background:url(../../assets/jquery/mediaelement/2.21.2/images/background.png);background:rgba(50,50,50,.7);-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;top:-115px;left:0;z-index:1;position:absolute;margin:0}.mejs-controls .mejs-volume-button:hover{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total{position:absolute;left:11px;top:8px;width:2px;height:100px;background:#ddd;background:rgba(255,255,255,.5);margin:0}.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current{position:absolute;left:11px;top:8px;width:2px;height:100px;background:#ddd;background:rgba(255,255,255,.9);margin:0}.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle{position:absolute;left:4px;top:-3px;width:16px;height:6px;background:#ddd;background:rgba(255,255,255,.9);cursor:N-resize;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;margin:0}.mejs-controls a.mejs-horizontal-volume-slider{height:26px;width:56px;position:relative;display:block;float:left;vertical-align:middle}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total{position:absolute;left:0;top:11px;width:50px;height:8px;margin:0;padding:0;font-size:1px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#333;background:rgba(50,50,50,.8);background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(30,30,30,.8)),to(rgba(60,60,60,.8)));background:-webkit-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-moz-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-o-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-ms-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:linear-gradient(rgba(30,30,30,.8),rgba(60,60,60,.8))}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current{position:absolute;left:0;top:11px;width:50px;height:8px;margin:0;padding:0;font-size:1px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#fff;background:rgba(255,255,255,.8);background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,.9)),to(rgba(200,200,200,.8)));background:-webkit-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-moz-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-o-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-ms-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:linear-gradient(rgba(255,255,255,.9),rgba(200,200,200,.8))}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle{display:none}.mejs-controls .mejs-captions-button{position:relative}.mejs-controls .mejs-captions-button button{background-position:-48px 0}.mejs-controls .mejs-captions-button .mejs-captions-selector{visibility:hidden;position:absolute;bottom:26px;right:-51px;width:85px;height:100px;background:url(../../assets/jquery/mediaelement/2.21.2/images/background.png);background:rgba(50,50,50,.7);border:solid 1px transparent;padding:10px 10px 0 10px;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.mejs-controls .mejs-captions-button:hover .mejs-captions-selector{visibility:visible}.mejs-controls .mejs-captions-button .mejs-captions-selector ul{margin:0;padding:0;display:block;list-style-type:none!important;overflow:hidden}.mejs-controls .mejs-captions-button .mejs-captions-selector ul li{margin:0 0 6px 0;padding:0;list-style-type:none!important;display:block;color:#fff;overflow:hidden}.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px}.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label{width:55px;float:left;padding:4px 0 0 0;line-height:15px;font-family:helvetica,arial;font-size:10px}.mejs-controls .mejs-captions-button .mejs-captions-translations{font-size:10px;margin:0 0 5px 0}.mejs-chapters{position:absolute;top:0;left:0;-xborder-right:solid 1px #fff;width:10000px;z-index:1}.mejs-chapters .mejs-chapter{position:absolute;float:left;background:#222;background:rgba(0,0,0,.7);background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(50,50,50,.7)),to(rgba(0,0,0,.7)));background:-webkit-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-moz-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-o-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-ms-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:linear-gradient(rgba(50,50,50,.7),rgba(0,0,0,.7));filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232,endColorstr=#000000);overflow:hidden;border:0}.mejs-chapters .mejs-chapter .mejs-chapter-block{font-size:11px;color:#fff;padding:5px;display:block;border-right:solid 1px #333;border-bottom:solid 1px #333;cursor:pointer}.mejs-chapters .mejs-chapter .mejs-chapter-block-last{border-right:none}.mejs-chapters .mejs-chapter .mejs-chapter-block:hover{background:#666;background:rgba(102,102,102,.7);background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(102,102,102,.7)),to(rgba(50,50,50,.6)));background:-webkit-linear-gradient(top,rgba(102,102,102,.7),rgba(50,50,50,.6));background:-moz-linear-gradient(top,rgba(102,102,102,.7),rgba(50,50,50,.6));background:-o-linear-gradient(top,rgba(102,102,102,.7),rgba(50,50,50,.6));background:-ms-linear-gradient(top,rgba(102,102,102,.7),rgba(50,50,50,.6));background:linear-gradient(rgba(102,102,102,.7),rgba(50,50,50,.6));filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666,endColorstr=#323232)}.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title{font-size:12px;font-weight:700;display:block;white-space:nowrap;text-overflow:ellipsis;margin:0 0 3px 0;line-height:12px}.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan{font-size:12px;line-height:12px;margin:3px 0 4px 0;display:block;white-space:nowrap;text-overflow:ellipsis}.mejs-captions-layer{position:absolute;bottom:0;left:0;text-align:center;line-height:20px;font-size:16px;color:#fff}.mejs-captions-layer a{color:#fff;text-decoration:underline}.mejs-captions-layer[lang=ar]{font-size:20px;font-weight:400}.mejs-captions-position{position:absolute;width:100%;bottom:15px;left:0}.mejs-captions-position-hover{bottom:35px}.mejs-captions-text{padding:3px 5px;background:url(../../assets/jquery/mediaelement/2.21.2/images/background.png);background:rgba(20,20,20,.5);white-space:pre-wrap}.me-cannotplay a{color:#fff;font-weight:700}.me-cannotplay span{padding:15px;display:block}.mejs-controls .mejs-loop-off button{background-position:-64px -16px}.mejs-controls .mejs-loop-on button{background-position:-64px 0}.mejs-controls .mejs-backlight-off button{background-position:-80px -16px}.mejs-controls .mejs-backlight-on button{background-position:-80px 0}.mejs-controls .mejs-picturecontrols-button{background-position:-96px 0}.mejs-contextmenu{position:absolute;width:150px;padding:10px;border-radius:4px;top:0;left:0;background:#fff;border:solid 1px #999;z-index:1001}.mejs-contextmenu .mejs-contextmenu-separator{height:1px;font-size:0;margin:5px 6px;background:#333}.mejs-contextmenu .mejs-contextmenu-item{font-family:Helvetica,Arial;font-size:12px;padding:4px 6px;cursor:pointer;color:#333}.mejs-contextmenu .mejs-contextmenu-item:hover{background:#2c7c91;color:#fff}.mejs-controls .mejs-sourcechooser-button{position:relative}.mejs-controls .mejs-sourcechooser-button button{background-position:-128px 0}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector{visibility:hidden;position:absolute;bottom:26px;right:-10px;width:130px;height:100px;background:url(../../assets/jquery/mediaelement/2.21.2/images/background.png);background:rgba(50,50,50,.7);border:solid 1px transparent;padding:10px;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul{margin:0;padding:0;display:block;list-style-type:none!important;overflow:hidden}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li{margin:0 0 6px 0;padding:0;list-style-type:none!important;display:block;color:#fff;overflow:hidden}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label{width:100px;float:left;padding:4px 0 0 0;line-height:15px;font-family:helvetica,arial;font-size:10px}.mejs-postroll-layer{position:absolute;bottom:0;left:0;width:100%;height:100%;background:url(../../assets/jquery/mediaelement/2.21.2/images/background.png);background:rgba(50,50,50,.7);z-index:1000;overflow:hidden}.mejs-postroll-layer-content{width:100%;height:100%}.mejs-postroll-close{position:absolute;right:0;top:0;background:url(../../assets/jquery/mediaelement/2.21.2/images/background.png);background:rgba(50,50,50,.7);color:#fff;padding:4px;z-index:100;cursor:pointer}div.mejs-speed-button{width:46px!important;position:relative}.mejs-controls .mejs-button.mejs-speed-button button{background:0 0;width:36px;font-size:11px;line-height:normal;color:#fff}.mejs-controls .mejs-speed-button .mejs-speed-selector{display:none;position:absolute;top:-100px;left:-10px;width:60px;height:100px;background:url(../../assets/jquery/mediaelement/2.21.2/images/background.png);background:rgba(50,50,50,.7);border:solid 1px transparent;padding:0;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.mejs-controls .mejs-speed-button:hover>.mejs-speed-selector{display:block}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected{color:#21f8f8}.mejs-controls .mejs-speed-button .mejs-speed-selector ul{margin:0;padding:0;display:block;list-style-type:none!important;overflow:hidden}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li{margin:0 0 6px 0;padding:0 10px;list-style-type:none!important;display:block;color:#fff;overflow:hidden}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px;display:none}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label{width:60px;float:left;padding:4px 0 0 0;line-height:15px;font-family:helvetica,arial;font-size:11.5px;color:#fff;margin-left:5px;cursor:pointer}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover{background-color:#c8c8c8!important;background-color:rgba(255,255,255,.4)!important}.mejs-controls .mejs-button.mejs-jump-forward-button{background:url(../../assets/jquery/mediaelement/2.21.2/images/jumpforward.png) no-repeat;background-position:3px 3px}.mejs-controls .mejs-button.mejs-jump-forward-button button{background:0 0;font-size:9px;line-height:normal;color:#fff}.mejs-controls .mejs-button.mejs-skip-back-button{background:url(../../assets/jquery/mediaelement/2.21.2/images/skipback.png) no-repeat;background-position:3px 3px}.mejs-controls .mejs-button.mejs-skip-back-button button{background:0 0;font-size:9px;line-height:normal;color:#fff} /*==================================================================================================================== #00 Inhaltsverzeichnis ---------------------------------------------------------------------------------------------------------- #00-01 Farbwerte #00-02 Schriften -------------------------------------------------------------------------------------------------------------------- #01-00 Normalisierung ---------------------------------------------------------------------------------------------------------- #01-01 Individuelle Erweiterung der Normalisierung #01-02 Reduzierte Konfiguration YAML Base (Spalten und Grid) -------------------------------------------------------------------------------------------------------------------- #02-00 Basis Auszeichnungen ---------------------------------------------------------------------------------------------------------- #02-01 Überschriften #02-02 Texte #02-03 Links #02-04 Listen #02-05 Bilder #02-06 Tabellen #02-07 Formulare #02-08 Helfer Klassen für Positionierung #02-09 Helfer Klassen für Sichtbarkeit und Float Clearing #02-10 Meldungen für Javascript Aktivierung und Browserupdate -------------------------------------------------------------------------------------------------------------------- #03-00 Basis Layout ---------------------------------------------------------------------------------------------------------- #03-01 Hauptelemente (Wrapper, Header, Content, Sidebar, Footer und Eigene Layoutbereiche) #03-02 YAML Grid (Subcolumns) Konfiguration -------------------------------------------------------------------------------------------------------------------- #04-00 Navigation ---------------------------------------------------------------------------------------------------------- #04-01 Navigation (Primär) #04-02 Navigation (Sekundär) #04-03 Navigation (Sitemap) #04-04 Navigation (Pagnination) #04-05 Navigation (Navigationspfad) #04-06 Navigation (Quicknavigation) -------------------------------------------------------------------------------------------------------------------- #05-00 Inhaltselemente (Contao Core) ---------------------------------------------------------------------------------------------------------- #05-01 Text Elemente #05-02 Akkordeon #05-03 Link Elemente #05-04 Media Elemente #05-05 Datei Elemente ---------------------------------------------------------------------------------------------------------- #05-06 Colorbox ---------------------------------------------------------------------------------------------------------- #05-07 Syndication (Facebook und Co.) -------------------------------------------------------------------------------------------------------------------- #06-00 Frontend-Module (Contao Core) ---------------------------------------------------------------------------------------------------------- #06-01 Nachrichten #06-02 Events #06-03 FAQ #06-04 Suche #06-05 Kommentare #06-06 Mitglieder -------------------------------------------------------------------------------------------------------------------- #07-00 Frontend-Module (Erweiterungen) ---------------------------------------------------------------------------------------------------------- #07-01 Slider (Caroufredsel) #07-02 DLH Google Maps #07-03 ... -------------------------------------------------------------------------------------------------------------------- #08-00 Individuelle Klassen #08-01 Modal Demo Switch -------------------------------------------------------------------------------------------------------------------- #09-00 Media Queries ---------------------------------------------------------------------------------------------------------- #09-01 @media screen and (max-width: 900px) - linearize-level-1 #09-02 @media screen and (max-width: 640px) - linearize-level-2 #09-03 @media screen and (max-width: 480px) - linearize-level-3 #09-04 @media screen and (max-width: 360px) - linearize-level-4 -------------------------------------------------------------------------------------------------------------------- #10-00 Druckausgabe ====================================================================================================================*/ /*==================================================================================================================== #00-01 Farbwerte -------------------------------------------------------------------------------------------------------------------- Farbcode Verwendung #222 Basis Schriftfarbe #FAF3E9 Hintergrund Container #094b70 Hintergrund Header, Navigation #1ea3c4 Hintergrund Slider Textfeld, Navigation #164103 Hintergrund Footer #86a31a ... #e1dbd1 Hintergrund Galerie ====================================================================================================================== #00-02 Schriften -------------------------------------------------------------------------------------------------------------------- google.com/fonts Open+Sans:400,600 | Standard Schrift google.com/fonts Cookie:400 | Headlines typekit.com ./. fonts.com ./. fontsquirrel.com ./. ====================================================================================================================*/ /* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local(''), url('../../files/theme/fonts/open-sans-v34-latin-regular.woff2') format('woff2'), url('../../files/theme/fonts/open-sans-v34-latin-regular.woff') format('woff'); } /* open-sans-600 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: local(''), url('../../files/theme/fonts/open-sans-v34-latin-600.woff2') format('woff2'), url('../../files/theme/fonts/open-sans-v34-latin-600.woff') format('woff'); } /* cookie-regular - latin */ @font-face { font-family: 'Cookie'; font-style: normal; font-weight: 400; src: local(''), url('../../files/theme/fonts/cookie-v17-latin-regular.woff2') format('woff2'), url('../../files/theme/fonts/cookie-v17-latin-regular.woff') format('woff'); } /*==================================================================================================================== #01-00 Normalisierung -------------------------------------------------------------------------------------------------------------------- normalize.css | Version: 3.0.3 | Lizenz: MIT Link: https://github.com/necolas/normalize.css/ ====================================================================================================================*/ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} /*==================================================================================================================== #01-01 Individuelle Erweiterung der Normalisierung ====================================================================================================================*/ body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea { margin: 0; padding:0; border: none; } ul, ol, dl { list-style-type: none; } /*------------------------------------------------------------------------------------------------------------------*/ .toggler { cursor: pointer; } a:hover, a:focus { outline: 0; } img { max-width: 100%; height: auto; } /*------------------------------------------------------------------------------------------------------------------*/ table,table tr { width: 100%; text-align: left; } /* PF: Text Align hier korrekt?! */ table td { vertical-align: top; } /*------------------------------------------------------------------------------------------------------------------*/ textarea { resize: vertical; } legend { width: 100%; display: block; } label, input[type="radio"], input[type="checkbox"] { vertical-align: middle; } input[type="reset"] { display: none!important; visibility: hidden; } /*-------------------------------------------------------------------------------------------------------------------- Vermeidung sichtbarer Outline-Rahmen in Webkit-Browsern. --------------------------------------------------------------------------------------------------------------------*/ h1:target, h2:target, h3:target, h4:target, h5:target, h6:target, div:target { outline: 0 none; } /*-------------------------------------------------------------------------------------------------------------------- Entfernung der Lücke zwischen den Elementen und der Unterseite ihrer Container. Link: https://github.com/h5bp/html5-boilerplate/issues/440 --------------------------------------------------------------------------------------------------------------------*/ img, svg, video, audio, canvas, iframe { vertical-align: middle; } /*-------------------------------------------------------------------------------------------------------------------- Entfernung "text-shadow" bei Selection Hervorhebung. Anm: Beide Anweisungen müssen separat vorgenommen werden. Hintergrundfarbe kann an Design angepasst werden. Link: https://twitter.com/miketaylr/status/12228805301 --------------------------------------------------------------------------------------------------------------------*/ ::-moz-selection { color: #fff; background: #094b70; text-shadow: none; } ::selection { color: #fff; background: #094b70; text-shadow: none; } /*==================================================================================================================== #01-02 Reduzierte Konfiguration YAML Base (Spalten und Grid) -------------------------------------------------------------------------------------------------------------------- Lizenz: Creative Commons Attribution 2.0 License (CC-BY 2.0) | http://creativecommons.org/licenses/by/2.0/ Link: http://www.yaml.de/ ====================================================================================================================*/ .page-column-wrapper{display:table;table-layout:fixed;width:100%}.ce_grid{display:table;table-layout:fixed;width:100%;margin:0;list-style-type:none}.ym-gl{float:left;margin:0}.ym-gr{float:right;margin:0 0 0 -5px}.ym-g16{width:16.66666666666667%}.ym-g20{width:20%}.ym-g25{width:25%}.ym-g33{width:33.333%}.ym-g38{width:38.2%}.ym-g40{width:40%}.ym-g50{width:50%}.ym-g60{width:60%}.ym-g62{width:61.8%}.ym-g66{width:66.666%}.ym-g75{width:75%}.ym-g80{width:80%}.grid-equalize{overflow:hidden}.grid-equalize>[class*=ym-g]{display:table-cell;float:none;margin:0;vertical-align:top}.grid-equalize>[class*=ym-g]>[class*=ym-gbox]{padding-bottom:10000px;margin-bottom:-10000px} /*==================================================================================================================== #02-00 Basis Auszeichnungen ====================================================================================================================*/ /*-------------------------------------------------------------------------------------------------------------------- 1. Alle Schriftgrößen auf theoretische Browser Standardgröße von 16 Pixel setzen. 2. Erzwingung der Anzeige der Browser Scrolleiste zur Vermeidung von horizontalen Verschiebungen beim Seitenwechsel. 3. Aktivierung CSS3 Box Model für alle HTML Elemente. Link: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ --------------------------------------------------------------------------------------------------------------------*/ html { font-size: 100%; /* 1 */ overflow-y: scroll; /* 2 */ -webkit-box-sizing: border-box; /* 3 */ -moz-box-sizing: border-box; /* 3 */ box-sizing: border-box; /* 3 */ -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* Disable Tab Highlight Color on Webkit Engines */ } *, *:before, *:after { box-sizing: inherit; } /* 3 */ body { color: #222; background: #fff; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif; font-weight: 400; font-size: 14px; font-size: 0.875rem; line-height: 1.5; word-wrap: break-word; } /*==================================================================================================================== #02-01 Überschriften ====================================================================================================================*/ h1, h2, h3, h4, h5, h6 { color: inherit; line-height: 1.25; text-align:inherit; font-size: inherit; font-weight: inherit; font-family: 'Cookie', cursive; margin: 0 0 0.5em 0; } h1 { color: #094b70; font-size: 55px; font-size: 3.438rem; line-height: 0.9; } h2 { color: #094b70; font-size: 36px; font-size: 2.25rem; line-height: 0.9; } h3 { font-size: 25px; font-size: 1.563rem; } h4, h5, h6 { font-size: 18px; font-size: 1.125rem; } .ce_headline { margin-bottom: 0; } /*PF: Sinnvoll?*/ /*==================================================================================================================== #02-02 Texte ====================================================================================================================*/ p { margin: 0 0 1.5em 0; } p:last-of-type { margin-bottom: 0; } .ce_text p { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } q, cite, blockquote { position: relative; margin:15px 12.5%; padding: 0 40px; font-family: 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 18px; font-size: 1.125rem; font-style: italic; text-align: center; background: transparent; } blockquote:before { position: absolute; bottom: 0; left: 0; content: url("../../files/theme/img/icon-quote-left.png"); } blockquote:after { position: absolute; top: 0; right: 0; content: url("../../files/theme/img/icon-quote-right.png"); } @media screen and (max-width: 900px) { blockquote { margin:15px 0; padding: 0 40px; } } hr { display: block; height: 1px; padding:0; border: 0; border-top: 1px solid #ccc; } /*==================================================================================================================== #02-03 Links ====================================================================================================================*/ a { color: #1ea3c4; text-decoration: none; } figure a { border: none; } a:hover, a:focus { color: #094b70; } /*------------------------------------------------------------------------------------------------------------------*/ figure a:hover, figure a:focus { color: transparent; background: transparent; text-decoration: none; } /*------------------------------------------------------------------------------------------------------------------*/ a.skiplink { display: block; padding: 10px 20px; } a.skiplink:hover, a.skiplink:focus { color: #fff; background: #1ea3c4; text-decoration: none; border: none; } /*------------------------------------------------------------------------------------------------------------------*/ .ce_text p a { padding: 0px 5px; color: #1ea3c4; border: 1px solid #1ea3c4; } .ce_text p a:hover, .ce_text p a:focus { color: #fff; background: #1ea3c4; /*border: 1px solid #094b70;*/ } .page-header .ce_text p a, .page-header .ce_text p a:hover, .page-header .ce_text p a:focus { padding-left: 0; border: 0; background: none; } .ce_hyperlink a { padding: 2px 5px; color: #1ea3c4; border: 1px solid #1ea3c4; } .ce_hyperlink a:hover, .ce_hyperlink a:focus { color: #fff; background: #1ea3c4; /*border: 1px solid #094b70;*/ } .back a, .more a { color: #1ea3c4; border: 1px solid #1ea3c4; padding: 0px 5px; } .back a:hover, .back a:focus, .more a:hover, .more a:focus { color: #fff; background: #1ea3c4; /*border: 1px solid #094b70;*/ } .page-footer .ce_text a { border: 1px solid #f5edd6; color: #f5edd6; } .page-footer .ce_text a:hover, .page-footer .ce_text a:focus { color: #fff; background: #1ea3c4; /*border: 1px solid #094b70;*/ } /*==================================================================================================================== #02-04 Listen ====================================================================================================================*/ /*==================================================================================================================== #02-05 Bilder ====================================================================================================================*/ figcaption { padding: 5px; line-height: 1.2; background: #86a31a; max-width: 100%; color: #fff; text-align: center; display: inline-block; } .home figcaption { background: none; color: #222; } /*==================================================================================================================== #02-06 Tabellen ====================================================================================================================*/ table th { padding: 3px 8px; color: #fff; font-weight: 600; background: #86a31a; border-bottom: 2px solid #58584f; } table td { padding: 5px 8px; border-bottom: 1px solid #58584f; } table tbody th { color: #58584f; font-weight: 600; background: none; border-bottom: 1px solid #58584f; } table tfoot tr { background-color: #fff; } table tfoot td { color: #58584f; font-weight: 600; border-bottom: none; border-top: 2px solid #58584f; } /*==================================================================================================================== #02-07 Formulare ====================================================================================================================*/ select, textarea, input:not([type]), input[type="tel"], input[type="url"], input[type="text"], input[type="date"], input[type="time"], input[type="email"], input[type="number"], input[type="search"], input[type="button"], input[type="submit"], input[type="password"], input[type="datetime"] { width: 100%; margin:0 0 0.75em 0; padding: 5px; display: block; color: inherit; font-size: inherit; font-family: inherit; background-color: #fafafa; border: 1px solid #d9d9d9; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; } select:focus, textarea:focus, input:not([type]):focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="text"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="password"]:focus, input[type="datetime"]:focus { outline: 0; border-color: rgba(4, 57, 110, 0.8); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 136, 164, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 136, 164, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 136, 164, 0.6); } select:hover, textarea:hover, input:not([type]):hover, input[type="tel"]:hover, input[type="url"]:hover, input[type="text"]:hover, input[type="date"]:hover, input[type="time"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="search"]:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="password"]:hover, input[type="datetime"]:hover { outline: 0; border-color: rgba(4, 57, 110, 0.8); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 136, 164, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 136, 164, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 136, 164, 0.6); } /*-------------------------------------------------------------------------------------------------------------------- Fix some width and height settings --------------------------------------------------------------------------------------------------------------------*/ input[type="file"] { display: block; cursor: pointer; } input[type="file"], input[type="image"], input[type="radio"], input[type="checkbox"] { width: auto; } textarea, select[size], select[multiple] { height: auto; } /*-------------------------------------------------------------------------------------------------------------------- Handle disabled and read-only --------------------------------------------------------------------------------------------------------------------*/ input[disabled], input[readonly], select[disabled], select[readonly], textarea[disabled], textarea[readonly] { cursor: not-allowed; background: #eee; } input[type="radio"][disabled], input[type="radio"][readonly], input[type="checkbox"][disabled], input[type="checkbox"][readonly] { background: transparent; } /*-------------------------------------------------------------------------------------------------------------------- Buttons --------------------------------------------------------------------------------------------------------------------*/ input[type="button"], input[type="submit"] { margin-bottom: 0; color: #fff; background: #1ea3c4; } input[type="button"]:focus, input[type="button"]:hover, input[type="submit"]:focus, input[type="submit"]:hover { background: #094b70; border-color: rgba(192, 71, 96, 0.8); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(192, 71, 96, 0.8); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(192, 71, 96, 0.8); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(192, 71, 96, 0.8); } /*-------------------------------------------------------------------------------------------------------------------- Checkboxes and radio buttons --------------------------------------------------------------------------------------------------------------------*/ input[type="radio"], input[type="checkbox"] { margin: 0 0.25em 0 0; } .widget-radio, .widget-checkbox { margin: 0 0 0.75em 0; } .widget-radio span, .widget-checkbox span { display: block; } /*-------------------------------------------------------------------------------------------------------------------- Error Messages in older Browsers --------------------------------------------------------------------------------------------------------------------*/ p.error { font-size: 12px; font-size: 0.75rem; font-weight: bold; color: #fff; background: #cc0000; padding: 3px 5px 5px 5px; } /*.widget-captcha { margin-top: -22px; }*/ /* PF: Generell notwendig? -> CHECKEN! */ /*==================================================================================================================== #02-08 Helfer Klassen für Positionierung ====================================================================================================================*/ .float_above { margin: 0 0 20px 0; margin: 0 0 1.25rem 0; } .float_below { margin: 20px 0 0 0; margin: 1.25rem 0 0 0; } .float-left, .float_left { float: left; display: inline; margin: 0 20px 10px 0; margin: 0 1.25rem 0.625rem 0; } .float-right, .float_right { float: right; display: inline; margin: 0 0 10px 20px; margin: 0 0 0.625rem 1.25rem; } .image_container.float_left, .image_container.float_right { max-width: 35%; } .center { display: block; text-align: center; } /*==================================================================================================================== #02-09 Helfer Klassen für Sichtbarbeit und Float Clearing ====================================================================================================================*/ /*-------------------------------------------------------------------------------------------------------------------- Hide visually and from screen readers Link: http://juicystudio.com/article/screen-readers-display-none.php --------------------------------------------------------------------------------------------------------------------*/ .invisible { display: none !important; visibility: hidden; } /*-------------------------------------------------------------------------------------------------------------------- Hide visually and from screen readers, but maintain layout --------------------------------------------------------------------------------------------------------------------*/ .invisible-maintain-layout { visibility: hidden; } /*-------------------------------------------------------------------------------------------------------------------- Hide only visually, but have it available for screen readers http://snook.ca/archives/html_and_css/hiding-content-for-accessibility --------------------------------------------------------------------------------------------------------------------*/ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /*-------------------------------------------------------------------------------------------------------------------- Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard https://www.drupal.org/node/897638 --------------------------------------------------------------------------------------------------------------------*/ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /*-------------------------------------------------------------------------------------------------------------------- 1. The space content is one way to avoid an Opera bug when the "contenteditable" attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that receive the "clearfix" class. 2. The use of 'table' rather than 'block' is only necessary if using ':before' to contain the top-margins of child elements. --------------------------------------------------------------------------------------------------------------------*/ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /*==================================================================================================================== #02-10 Meldungen für Javascript Aktivierung und Browserupdate ====================================================================================================================*/ .alert-no-javascript, .alert-browser-update { color: #222; z-index: 9999; line-height:1.5; font-size: 14px; font-size:0.875rem; padding: 10px 20px; text-align: center; background:#ffff00; border-bottom: 1px solid #222; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Tahoma, sans-serif; } .alert-no-javascript a, .alert-browser-update a { text-decoration: none; color: #222; padding-bottom: 1px; border-bottom: 1px solid #222; } .alert-no-javascript a:hover, .alert-browser-update a:hover { text-decoration: none; color: #222; border-bottom: none; } /*==================================================================================================================== #03-00 Basis Layout -------------------------------------------------------------------------------------------------------------------- YAML Spalten Konfiguration Link: http://www.yaml.de/docs/index.html#yaml-columns ====================================================================================================================*/ .page-column-wrapper { position: relative; } /*-------------------------------------------------------------------------------------------------------------------- Layout: 0-1-0 -------------------------------------------------------------------------------------------------------------------- page-column-1 = main content --------------------------------------------------------------------------------------------------------------------*/ .layout-0-1-0 .page-column-1 { float: none; width: 100%; margin: 0; } /*-------------------------------------------------------------------------------------------------------------------- Layout: 3-1-0 | Unit-Mix: No | Allowed Units: % | px |(r)em If linearized, the sidebar content drops below the main content. -------------------------------------------------------------------------------------------------------------------- page-column-1 => main content | page-column-3 => sidebar content (left) --------------------------------------------------------------------------------------------------------------------*/ .layout-3-1-0 .page-column-1 { float: right; width: 66.666%; } .layout-3-1-0 .page-column-3 { margin: 0 66.666% 0 0; } /*.layout-3-1-0 .main-content { margin-left: 20px; } .layout-3-1-0 .sidebar { margin-right: 20px; } @media screen and (max-width: 900px) { .layout-3-1-0 .main-content { margin-left: 0; } .layout-3-1-0 .sidebar { margin-right: 0; } }*/ .layout-3-1-0 .page-column-1:before { content: ''; position: absolute; top: 0; bottom: 0; left: 33.333%; margin-left: -5px; border-left: 10px solid #fff; } /*-------------------------------------------------------------------------------------------------------------------- Layout variant with fixed sidebar. -------------------------------------------------------------------------------------------------------------------- This layout variant requires that .page-column-1 isn't completely empty. IE needs at least dummy content ( ), otherwise it doesn't render the element and the alignment of the sidebar within the parents padding area fails. --------------------------------------------------------------------------------------------------------------------*/ /*.layout-3-1-0 .page-column-wrapper { width: auto; display: block; overflow: hidden; padding-left: 250px; // column width } .layout-3-1-0 .page-column-1 { float: left; width: 100%; position: relative; } .layout-3-1-0 .page-column-3 { float: left; width: 250px; // column width right: 250px; // column width position: relative; margin:0 0 0 -100%; } .layout-3-1-0 .main-content { margin-left: 20px; } .layout-3-1-0 .sidebar { margin-right:20px; } @media screen and (max-width: 900px) { .layout-3-1-0 .main-content { margin-left: 0; } .layout-3-1-0 .sidebar { margin-right: 0; } }*/ /*-------------------------------------------------------------------------------------------------------------------- Layout: 0-1-3 | Unit-Mix: No | Allowed Units: % | px |(r)em If linearized, the sidebar content drops below the main content. -------------------------------------------------------------------------------------------------------------------- page-column-1 => main content | page-column-3 => sidebar content (right) --------------------------------------------------------------------------------------------------------------------*/ .layout-0-1-3 .page-column-1 { float: left; width: 66.666%; } .layout-0-1-3 .page-column-3 { margin: 0 0 0 66.666%; } /*.layout-0-1-3 .main-content { margin-right: 20px; } .layout-0-1-3 .sidebar { margin-left: 20px; } @media screen and (max-width: 900px) { .layout-0-1-3 .main-content { margin-left: 0; } .layout-0-1-3 .sidebar { margin-right: 0; } }*/ .layout-0-1-3 .page-column-1:before { content: ''; position: absolute; top: 0; bottom: 0; right: 33.333%; margin-right: -5px; border-right: 10px solid #fff; } /*-------------------------------------------------------------------------------------------------------------------- Layout variant with fixed sidebar. -------------------------------------------------------------------------------------------------------------------- This layout variant requires that .page-column-1 isn't completely empty. IE needs at least dummy content ( ), otherwise it doesn't render the element and the alignment of the sidebar within the parents padding area fails. --------------------------------------------------------------------------------------------------------------------*/ /*.layout-0-1-3 .page-column-wrapper { width: auto; display: block; overflow: hidden; padding-right: 250px; // column width } .layout-0-1-3 .page-column-1 { float: left; width: 100%; position: relative; } .layout-0-1-3 .page-column-3 { float: left; width: 250px; // column width position: relative; margin: 0 -250px 0 0; // column width } .layout-0-1-3 .main-content { margin-right: 20px; } .layout-0-1-3 .sidebar { margin-left: 20px; } @media screen and (max-width: 900px) { .layout-0-1-3 .main-content { margin-left: 0; } .layout-0-1-3 .sidebar { margin-right: 0; } }*/ /*-------------------------------------------------------------------------------------------------------------------- Layout: 1-3-0 | Unit-Mix: No | Allowed Units: % | px |(r)em If linearized, the main content drops below the sidebar content. -------------------------------------------------------------------------------------------------------------------- page-column-1 => sidebar content (left) | page-column-3 => main content --------------------------------------------------------------------------------------------------------------------*/ /*.layout-1-3-0 .page-column-1 { float: left; width: 33.333%; } .layout-1-3-0 .page-column-3 { margin: 0 0 0 33.333%; } .layout-1-3-0 .main-content { margin-left: 20px; } .layout-1-3-0 .sidebar { margin-right:20px; } @media screen and (max-width: 900px) { .layout-1-3-0 .main-content { margin-left: 0; } .layout-1-3-0 .sidebar { margin-right: 0; } }*/ /*-------------------------------------------------------------------------------------------------------------------- Layout: 0-3-1 | Unit-Mix: No | Allowed Units: % | px |(r)em If linearized, the main content drops below the sidebar content. -------------------------------------------------------------------------------------------------------------------- page-column-1 => sidebar content (right) | page-column-3 => main content --------------------------------------------------------------------------------------------------------------------*/ /*.layout-0-3-1 .page-column-1 { float: right; width: 33.333%; } .layout-0-3-1 .page-column-3 { margin: 0 33.333% 0 0; } .layout-0-3-1 .main-content { margin-right: 20px; } .layout-0-3-1 .sidebar { margin-left: 20px; } @media screen and (max-width: 900px) { .layout-0-3-1 .main-content { margin-left: 0; } .layout-0-3-1 .sidebar { margin-right: 0; } }*/ /*-------------------------------------------------------------------------------------------------------------------- Layout: 2-1-3 | Unit-Mix: No | Allowed Units: % | px If linearized, the sidebar content drops below the main content. -------------------------------------------------------------------------------------------------------------------- page-column-1 => main content | page-column-2 => sidebar content (left) | page-column-3 => sidebar content (right) --------------------------------------------------------------------------------------------------------------------*/ /*.layout-2-1-3 .page-column-1 { width: 50%; float:left; margin-left: 25%; } .layout-2-1-3 .page-column-2 { width: 25%; float:left; margin-left: -75%;} .layout-2-1-3 .page-column-3 { width: 25%; float:right; margin-left: -5px; margin-right: 0%; } .layout-2-1-3 .main-content { margin: 0 20px; } .layout-2-1-3 .sidebar { margin-right:20px; } .layout-2-1-3 .sidebar.-right { margin-left:20px; } @media screen and (max-width: 900px) { .layout-2-1-3 .main-content { margin: 0 0; } .layout-2-1-3 .sidebar { margin-right: 0; } .layout-2-1-3 .sidebar.-right { margin-left: 0; } }*/ /*==================================================================================================================== #03-01 Hauptelemente (Wrapper, Header, Content, Sidebar, Footer) ====================================================================================================================*/ /*-------------------------------------------------------------------------------------------------------------------- Wrapper --------------------------------------------------------------------------------------------------------------------*/ .page-wrapper { width: 100%; margin: 30px auto; max-width: 80em; background: #fff; border: 10px solid #fff; -webkit-box-shadow: 0 0 17px 0 #666; -moz-box-shadow: 0 0 17px 0 #666; box-shadow: 0 0 17px 0 #666; } /*-------------------------------------------------------------------------------------------------------------------- Header --------------------------------------------------------------------------------------------------------------------*/ .page-header { } .page-header .mod_boxes4ward { } .page-header .boxes4ward_article { } .page-header .boxes4ward_article { background: #094b70; } .page-header .boxes4ward_article .ce_image { text-align: right; padding: 20px 40px 10px 40px; } /*-------------------------------------------------------------------------------------------------------------------- Content --------------------------------------------------------------------------------------------------------------------*/ .content-wrapper { background: #FAF3E9; } /*------------------------------------------------------------------------------------------------------------------*/ .main-content { } .main-content .mod_article { } .main-content .mod_article > * { padding: 0 40px 40px 40px; } .main-content .mod_article > *:first-child { padding-top: 40px; } .layout-3-1-0 .main-content .ce_text { padding-bottom: 40px; } .layout-3-1-0 .main-content .ce_headline { padding-bottom: 20px; } .layout-3-1-0 .main-content section .ce_text:last-child, .layout-3-1-0 .main-content .ce_headline:last-child { padding-bottom: 0; } .layout-0-1-0 .main-content .mod_article > * { padding: 40px; border-bottom: 10px solid #fff; } .layout-0-1-0 .main-content .mod_article > *:last-child { border-bottom: none; } .layout-0-1-0 .main-content .mod_article > .ce_grid { padding: 0; } /*-------------------------------------------------------------------------------------------------------------------- Sidebar --------------------------------------------------------------------------------------------------------------------*/ .sidebar { } .sidebar .mod_boxes4ward { } .sidebar .boxes4ward_article { } .sidebar .mod_boxes4ward > * { border-bottom: 10px solid #fff; } .sidebar .mod_boxes4ward > *:last-child { border-bottom: none; } .sidebar .boxes4ward_article > * { padding: 40px; border-bottom: 10px solid #fff; } .sidebar .boxes4ward_article > *:last-child { border-bottom: none; } /*------------------------------------------------------------------------------------------------------------------*/ /* Aktivierung bei Bedarf im Sonderfall Layout 2-1-3 - Start */ /*.sidebar.-right { } .sidebar.-right .mod_boxes4ward { } .sidebar.-right .boxes4ward_article { }*/ /* Aktivierung bei Bedarf im Sonderfall Layout 2-1-3 - Ende /*-------------------------------------------------------------------------------------------------------------------- Footer --------------------------------------------------------------------------------------------------------------------*/ .page-footer { } .page-footer .mod_boxes4ward { } .page-footer .boxes4ward_article { } .page-footer { color: #f5edd6; background: #164103; border-top: 10px solid #fff; font-size: 12px; font-size: 0.75rem; } /*==================================================================================================================== #03-02 YAML Grid (Subcolumns) Konfiguration -------------------------------------------------------------------------------------------------------------------- Standard Abstände können global oder für einzelne Layout Bereiche überschrieben werden. ====================================================================================================================*/ .page-footer [class*="ym-gbox"] > *, .layout-0-1-0 [class*="ce_colset"] [class*="ym-gbox"] > * { padding: 40px; } .page-footer .ym-gbox, .layout-0-1-0 [class*="ce_colset"] .ym-gbox { border-left: 5px solid #fff; border-right: 5px solid #fff; } .page-footer .ym-gbox-left, .layout-0-1-0 [class*="ce_colset"] .ym-gbox-left { border-right: 5px solid #fff; } .page-footer .ym-gbox-right, .layout-0-1-0 [class*="ce_colset"] .ym-gbox-right { border-left: 5px solid #fff; } /*==================================================================================================================== #04-00 Navigation ====================================================================================================================*/ .navigation-wrapper { } /*==================================================================================================================== #04-01 Navigation (Primär) -------------------------------------------------------------------------------------------------------------------- Die ID (Nur für Skiplink Navigation!) + Klasse 'main-navigation' muss an FE und CE Modul vorhanden sein. ====================================================================================================================*/ .main-navigation { padding: 0 40px; border-bottom: 10px solid #fff; } .main-navigation ul li { position: relative; display: inline-block; text-align: left; text-transform: uppercase; } .main-navigation ul li a, .main-navigation ul li span.trail, .main-navigation ul li span.active { display: block; padding: 5px; color: #fff; border: 1px solid transparent; } .main-navigation ul li a.trail, .main-navigation ul li span.trail, .main-navigation ul li span.active { border: 1px solid #fff; } .main-navigation ul li a:hover, .main-navigation ul li span.trail:hover, .main-navigation ul li span.active:hover { border: 1px solid #fff; } /*------------------------------------------------------------------------------------------------------------------ Navigation Ebene 01 --------------------------------------------------------------------------------------------------------------------*/ .main-navigation ul.level_1 li { margin-right: 0.5em; padding-bottom: 10px; font-size: 16px; font-size: 1rem; } .main-navigation ul.level_1 li:last-of-type { margin-right: 0; } /*-------------------------------------------------------------------------------------------------------------------- Navigation Ebene 02 --------------------------------------------------------------------------------------------------------------------*/ .main-navigation ul.level_2 { display: none; position: absolute; left: 0; top: 100%; z-index: 999; width: 250px; } .main-navigation ul.level_2 li { text-transform: none; width: 100%; padding-bottom: 2px; font-size: 14px; font-size: 0.875rem; } .main-navigation ul.level_2 li a, .main-navigation ul.level_2 li span.trail, .main-navigation ul.level_2 li span.active { background: #1ea3c4; border: 1px solid #fff; } .main-navigation ul.level_2 li a:hover, .main-navigation ul.level_2 li span.trail:hover, .main-navigation ul.level_2 li span.active:hover { background: #094b70; } /*-------------------------------------------------------------------------------------------------------------------- Navigation Ebene 03 --------------------------------------------------------------------------------------------------------------------*/ .main-navigation ul.level_3 { display: none; position: absolute; left: 100%; top: 0; z-index: 999; width: 100%; } .main-navigation ul.level_3 li { padding-left: 2px; } /*-------------------------------------------------------------------------------------------------------------------- Navigation Toggle-/Collapser-Button (Primär) --------------------------------------------------------------------------------------------------------------------*/ .menu-collapser { } .collapse-button { padding: 20px; cursor: pointer; background: transparent url("../../files/theme/img/button-toggle-menu.png") no-repeat center center; border-bottom: 1px solid rgba(0, 0, 0, 0.075); } .collapse-button:hover,.collapse-button:focus { } /*-------------------------------------------------------------------------------------------------------------------- Navigation Toggle-/Collapser-Button (Sekundär) --------------------------------------------------------------------------------------------------------------------*/ .main-navigation ul li .sub-collapser { position: absolute; top: 0; right: 0; z-index: 999; height: 100%; width: 48px; cursor: pointer; text-align: center; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.075); } .main-navigation ul li .sub-collapser:before { height: 100%; margin-right: -0.25em; display: inline-block; vertical-align: middle; content: ''; } .main-navigation ul li .sub-collapser > i { display: inline-block; color: #fff; font-size: 20px; font-size: 1.25rem; font-style: normal; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif; /* PF: Nicht ändern */ } /*------------------------------------------------------------------------------------------------------------------*/ .main-navigation ul.collapsed li { display: block; width: 100%; } .main-navigation ul.collapsed li a, .main-navigation ul.collapsed li span.trail, .main-navigation ul.collapsed li span.active { display: block; border-bottom: 1px solid rgba(0, 0, 0, 0.075) } .main-navigation ul.collapsed li .sub-collapser { height: 46px; } .main-navigation ul.collapsed li > ul { display: none; position: static; } /*------------------------------------------------------------------------------------------------------------------*/ .main-navigation ul li .sub-collapser { display: none; } .main-navigation ul.collapsed li .sub-collapser { display: block; } /*==================================================================================================================== #04-02 Navigation (Sekundär) -------------------------------------------------------------------------------------------------------------------- Die Klasse 'sub-navigation' muss an FE und CE Modul vorhanden sein. ====================================================================================================================*/ .sub-navigation ul li { display: block; font-weight: 300; margin-bottom: 0.2em; } .sub-navigation ul li a, .sub-navigation ul li span.trail, .sub-navigation ul li span.active { display: block; padding: 5px; color: #164103; border: 1px solid #164103; } .sub-navigation ul li a.trail, .sub-navigation ul li span.trail, .sub-navigation ul li span.active { background: #1ea3c4; color: #fff; border: 1px solid #1ea3c4; } .sub-navigation ul li a:hover, .sub-navigation ul li span.trail:hover, .sub-navigation ul li span.active:hover { background: #094b70; color: #fff; border: 1px solid #094b70; } /*------------------------------------------------------------------------------------------------------------------*/ .sub-navigation ul.level_2 li a, .sub-navigation ul.level_2 li span.trail, .sub-navigation ul.level_2 li span.active { padding-left: 30px; } /*==================================================================================================================== #04-03 Navigation (Sitemap) ====================================================================================================================*/ .mod_sitemap > ul > li { margin-bottom: 15px; } .mod_sitemap ul li.trail { background: none; } .mod_sitemap ul li a, .mod_sitemap ul li a:hover { display: block; border-top: none; } .mod_sitemap ul li a:hover, .mod_sitemap ul li.trail a:hover { color: #fff; background: #094b70;} .mod_sitemap > ul > li > a, .mod_sitemap > ul > li > a.trail { background: #86a31a; color: #fff; border: none; padding: 5px 5px 2px 5px; font-weight: bold; } /*------------------------------------------------------------------------------------------------------------------*/ .mod_sitemap ul.level_2 { margin: 0 0 0 45px; } .mod_sitemap ul.level_2 li:first-of-type { border-top: none; } .mod_sitemap ul ul li a, .mod_sitemap ul ul li a:hover { display: block; font-size: 0.875rem; padding: 5px; border-top: none; } .mod_sitemap ul li li { width: auto; padding: 0; } .mod_sitemap ul li li a { display: block; background: none; border: none; color: #222; border-bottom: 1px solid #222; } /*------------------------------------------------------------------------------------------------------------------*/ .mod_sitemap ul.level_3, .mod_sitemap ul.level_4 { margin: 0 0 0 45px; } /*==================================================================================================================== #04-04 Navigation (Pagnination) ====================================================================================================================*/ /* PF: Genau gleich wie bei Demo 02 (inkl. Farben) // Warum Float? // Alles checken - Start */ .pagination p { float: right; } .pagination ul li { float: left; } .pagination ul li:hover { background: none; } .pagination ul li a, .pagination ul li span { background: #000; border: 2px solid #000; border-radius: 100px; width: 2em; height: 2em; display: inline-block; color: #fff; text-align: center; margin-right: 0.5em; color: #fff; } .pagination ul li span, .pagination ul li a:hover { background: #00a2bc; border: #00a2bc; padding-top: 0.2em; } .pagination .next, .pagination .previous, .pagination .last, .pagination .first { border-radius: 0; border: none; width: auto; background: none; } .pagination .next a, .pagination .previous a, .pagination .last a, .pagination .first a { color: #000; border-bottom: 2px dotted #000; height: auto; line-height: 1;} .pagination .next a:hover, .pagination .previous a:hover, .pagination .last a:hover, .pagination .first a:hover { color: #00a2bc; border-bottom: 2px dotted #00a2bc; background: none; } /* PF: Genau gleich wie bei Demo 02 (inkl. Farben) // Warum Float? // Alles checken - Ende */ /*==================================================================================================================== #04-05 Navigation (Navigationspfad) ====================================================================================================================*/ .mod_breadcrumb { } /*==================================================================================================================== #04-06 Navigation (Quicknavigation) ====================================================================================================================*/ .mod_quicknav { } /*==================================================================================================================== #05-00 Inhaltselemente (Contao Core) -------------------------------------------------------------------------------------------------------------------- #05-01 Text Elemente ====================================================================================================================*/ .ce_headline { } /*------------------------------------------------------------------------------------------------------------------*/ .ce_text ul, .ce_list ul { margin-left: 1.4em; list-style-type: disc; margin-bottom: 1em;} .ce_text ol, .ce_list ol { margin-left: 1.4em; list-style-type: decimal; } .ce_text ul ul, .ce_list ul ul { list-style-type: circle; } .ce_text ol ol, .ce_list ol ol { list-style-type: lower-latin; } .ce_text ol ul, .ce_list ol ul { list-style-type: circle; } /*.ce_text li, .ce_list li { margin-bottom: 0.25em; } .ce_text li:last-child, .ce_list li:last-child { margin-bottom: 0.25em; }*/ /*------------------------------------------------------------------------------------------------------------------*/ .ce_table { } /*------------------------------------------------------------------------------------------------------------------*/ .ce_html { } /*------------------------------------------------------------------------------------------------------------------*/ .ce_code { } /*------------------------------------------------------------------------------------------------------------------*/ .ce_markdown { } /*==================================================================================================================== #05-02 Akkordeon ====================================================================================================================*/ .ce_accordion .toggler { outline: 0; cursor: pointer; } .ce_accordion { margin-bottom: 2px; padding-bottom: 0 !important; } /* PF: Notwendig?! */ .ce_accordion .toggler { background: #86a31a; padding: 5px; color: #fff; } .ce_accordion .toggler:hover { background: #094b70; } .ce_accordion .ui-accordion-header-active { background: #1ea3c4; } .ce_accordion .accordion { padding: 30px; border-left: 1px solid #c3c3b8; border-right: 1px solid #c3c3b8; } .ce_accordion.last .accordion { border-bottom: 1px solid #c3c3b8; } .ce_accordion .accordion div { display: inline-block; max-width: 100%; } /*==================================================================================================================== #05-03 Link Elemente ====================================================================================================================*/ .ce_hyperlink { } /*------------------------------------------------------------------------------------------------------------------*/ .ce_toplink { } /*==================================================================================================================== #05-04 Media Elemente ====================================================================================================================*/ .ce_image { } .main-content .ce_text img, .main-content .ce_image img { border: 2px solid #000; } /*------------------------------------------------------------------------------------------------------------------*/ .ce_gallery { display: block;} .ce_gallery > ul:before { content: ""; display: table; } .ce_gallery > ul:after { clear: both; content: ""; display: table; } .ce_gallery > ul { list-style: none; margin: 0 0 0 -1.5%; padding: 0; } .ce_gallery > ul > li { margin: 1.5% 0 0 1.5%; width: 31.8%; float: left; } .ce_gallery > ul > li img { border: 2px solid #000; } /*------------------------------------------------------------------------------------------------------------------*/ .ce_gallery.icon-gallery { background: #e1dbd1 !important; } .ce_gallery.icon-gallery > ul > li { margin: 1.5% 0 0 1.5%; width: 15%; float: left; } .ce_gallery.icon-gallery > ul > li img { border: none; } .ce_gallery figcaption { display: none; visibility: hidden; } .home .ce_gallery.icon-gallery figcaption { display: block; visibility: visible; } /*------------------------------------------------------------------------------------------------------------------*/ .ce_player .mejs-video { border: 1px solid #000; } .ce_player .mejs-overlay-button { display: none !important; visibility: hidden; } /*------------------------------------------------------------------------------------------------------------------*/ .ce_youtube { } /* Dieses Wrapper Element muss im Template "ce_player.html5" vorhanden sein! - Start */ .youtube-wrapper { height: 0; overflow: hidden; position: relative; padding-bottom: 56.25%; /* ratio 16 to 9 */ } .youtube-wrapper iframe, .youtube-wrapper object, .youtube-wrapper embed { position: absolute; top: 0; left:0; width: 100%; height:100%; border: 1px solid #000; /* PF: Erzeugt in Chrome auf Desktop 1-2 Pixelversatz */ } /* Dieses Wrapper Element muss im Template "ce_player.html5" vorhanden sein! - Ende */ /*==================================================================================================================== #05-05 Datei Elemente ====================================================================================================================*/ .ce_download { } /*------------------------------------------------------------------------------------------------------------------*/ .ce_downloads ul { border: 1px solid #222; padding: 20px; } .ce_downloads ul li { margin-bottom: 3px; } .ce_downloads ul a { border: none; color: #222; padding: 2px 6px; } .ce_downloads ul a:hover { color: #094b70; border: 1px solid #094b70; padding: 2px 5px; } /*==================================================================================================================== #05-06 ColorBox -------------------------------------------------------------------------------------------------------------------- ColorBox Style: Core ====================================================================================================================*/ #colorbox, #cboxOverlay, #cboxWrapper { position:absolute; top:0; left:0; z-index:9999; overflow:hidden; } #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; } #colorbox, #cboxContent, #cboxLoadedContent{ box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; } /*-------------------------------------------------------------------------------------------------------------------- ColorBox Style: Projekt --------------------------------------------------------------------------------------------------------------------*/ #cboxOverlay{ background: rgba(34, 34, 34, 0.85); } #colorbox { outline:0; } #cboxError { padding: 50px; /*border: 1px solid rgba(255, 255, 255, 0.85);*/ } #cboxLoadedContent { margin-bottom: 40px; background: #fff; /*border: 1px solid rgba(255, 255, 255, 0.85);*/ } #cboxTitle { position: absolute; left:0; bottom:0px; width: 100%; color: #fff; background: #1ea3c4; height: 40px; padding: 10px 10px 10px 10px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; /*border-left: 1px solid rgba(255, 255, 255, 0.85); border-right:1px solid rgba(255, 255, 255, 0.85);*/ } #cboxCurrent { display: none !important; visibility: hidden; text-indent: -9999em; } #cboxClose, #cboxClose:hover { position:absolute; top:0; right:0; outline: 0; height:40px; width: 40px; border: none; text-indent: -9999em; background-size: 16px 16px; background: #1ea3c4 url("../../files/theme/img/icon-colorbox-close.svg") no-repeat center center; } #cboxPrevious, #cboxPrevious:hover { position: absolute; left:0; bottom:50%; height:40px; width: 40px; outline: 0; border: none; text-indent: -9999em; background-size: 16px 16px; background: #1ea3c4 url("../../files/theme/img/icon-colorbox-arrow-left.svg") no-repeat 50% 50%; } #cboxNext, #cboxNext:hover { position: absolute; right:0; bottom:50%; height:40px; width: 40px; outline: 0; border: none; text-indent: -9999em; background-size: 16px 16px; background: #1ea3c4 url("../../files/theme/img/icon-colorbox-arrow-right.svg") no-repeat 50% 50%; } /*==================================================================================================================== #05-07 Syndication (Facebook und Co.) ====================================================================================================================*/ .syndication { } /*==================================================================================================================== #06-00 Frontend-Module (Contao Core) -------------------------------------------------------------------------------------------------------------------- #06-01 Nachrichten ====================================================================================================================*/ .mod_newslist { } .mod_newslist .layout_latest { border-bottom: 1px solid #000; padding-bottom: 20px; margin-bottom: 20px; } .mod_newslist .layout_latest.last { border-bottom: none; margin:0; padding: 0; } .mod_newslist .layout_latest .teaser { margin-bottom: 1em; } .mod_newslist .layout_latest h2 a { color: #222; border: none; padding: 0 6px; } .mod_newslist .layout_latest h2 a:hover { color: #094b70; border: 1px solid #094b70; background: none; padding: 0 5px; } .mod_newslist .layout_latest .news-date { color: #000; } .mod_newslist .layout_latest .info { margin: 0; color: #999; } .mod_newslist .layout_latest .image_container.float_left, .mod_newslist .layout_latest .image_container.float_right { max-width: 50%; } /*------------------------------------------------------------------------------------------------------------------*/ .mod_newsreader { } .mod_newsreader .layout_full p.info { margin-bottom: 1.2em; } .mod_newsreader .layout_full { margin-bottom: 1.5em;} /*------------------------------------------------------------------------------------------------------------------*/ .mod_newsarchive { } /*------------------------------------------------------------------------------------------------------------------*/ .mod_newsmenu { } /*==================================================================================================================== #06-02 Events ====================================================================================================================*/ .mod_eventlist { } .mod_eventlist .header { background: #86a31a; color: #fff; padding: 3px; } .mod_eventlist .layout_list { padding: 1.5em 0; } .mod_eventlist .layout_list:last-of-type { padding-bottom: 0; } .mod_eventlist .location { font-weight: bold; margin-bottom: 1em; } /*------------------------------------------------------------------------------------------------------------------*/ .mod_eventreader { } .mod_eventreader .header { padding-bottom: 1em; font-weight: bold; } .mod_eventreader .layout_full { padding-bottom: 1.5em; } /*------------------------------------------------------------------------------------------------------------------*/ .mod_eventmenu { } /*------------------------------------------------------------------------------------------------------------------*/ .mod_calendar { } .mod_calendar { padding: 40px; background: #faf3e9; border-bottom: 10px solid #fff; } .mod_calendar .head { background: #1ea3c4; width: 33.33%; } .mod_calendar .head a { color: #fff; border: none; } .mod_calendar th.current { text-align: center; } .mod_calendar .next { text-align: right; } .mod_calendar th { width: 14.29%; } .mod_calendar .next a { background: url("../../files/theme/img/icon-calendar-arrow-right.svg") no-repeat right center; padding-right: 20px;} .mod_calendar .previous a { background: url("../../files/theme/img/icon-calendar-arrow-left.svg") no-repeat left center; padding-left: 20px;} .mod_calendar .header { font-weight: bold; } .mod_calendar td { border-right: 1px solid #58584f; } .mod_calendar td.col_last { border-right: none; } .mod_calendar td a:hover { border: 1px solid #094b70; } /*==================================================================================================================== #06-03 FAQ ====================================================================================================================*/ .mod_faqlist { } /*------------------------------------------------------------------------------------------------------------------*/ .mod_faqreader { } /*------------------------------------------------------------------------------------------------------------------*/ .mod_faqpage { } /*==================================================================================================================== #06-04 Suche ====================================================================================================================*/ .mod_search { } /*==================================================================================================================== #06-05 Kommentare ====================================================================================================================*/ .mod_comments { } .ce_comments { margin-top: 30px;} /* PF: Sinnvoll? */ .ce_comments .form { padding-top: 20px; } .comment_default { background: url("../../files/theme/img/icon_comment.png") no-repeat; margin: 1.5em 0 1.5em 3em; padding-left: 45px; } .comment_default .info { color: #000; font-weight: bold; background: none; margin-bottom: 0;} /*==================================================================================================================== #06-05 Mitglieder ====================================================================================================================*/ /*==================================================================================================================== #07-00 Frontend-Module (Erweiterungen) -------------------------------------------------------------------------------------------------------------------- #07-01 Slider (Caroufredsel) ====================================================================================================================*/ .ce_caroufredsel [class*="float_"] { margin: 0; } .dlh_googlemap input[type="submit"] { text-transform: capitalize; } .caroufredsel figcaption { display: none !important; visibility: hidden; } .caroufredsel_skin, .caroufredsel .slider { position: relative; } /*------------------------------------------------------------------------------------------------------------------*/ .ce_caroufredsel { border-bottom: 10px solid #fff; } .caroufredsel .slider-inside { position: absolute; left: 0; bottom: 30px; width: 50%; min-height: 165px; padding: 30px 40px; color: #fff; background: #1ea3c4; background: rgba(30, 163, 196, 0.8); } .caroufredsel h1 { margin-bottom: 0.1em; color: #fff; } .caroufredsel p { font-size: 16px; font-size: 1rem; } .caroufredsel .ce_text a { } .caroufredsel .ce_text a:hover { } /*------------------------------------------------------------------------------------------------------------------*/ .caroufredsel_controls { } .caroufredsel_navi { } .caroufredsel_prev { } .caroufredsel_next { } .caroufredsel_pagi { position: absolute; top: 20px; right: 40px; } .caroufredsel_pagi a { text-indent: -9999em; background: url("../../files/theme/img/slider-pagination.png") no-repeat; width: 14px; display: inline-block; margin-right: 5px; border: none; } .caroufredsel_pagi a.selected { text-indent: -9999em; background: url("../../files/theme/img/slider-pagination-active.png") no-repeat; width: 14px; } /*------------------------------------------------------------------------------------------------------------------*/ .caroufredsel_bar_wrapper { height: 10px !important; background: #164103 !important; } .caroufredsel_bar { height: 8px !important; background: #1ea3c4 !important; margin-top: -2px !important; } /*==================================================================================================================== #07-02 DLH Google Maps ====================================================================================================================*/ .dlh_googlemap img { max-width: none; } .ce_dlh_googlemaps { height: 350px; margin: 0 auto; } /*==================================================================================================================== #08-00 Individuelle Klassen ====================================================================================================================*/ .teaser-blue { background: #86a31a; color: #fff; } .teaser-blue h2 { color: #fff; } .ce_gallery.no-bordered img { border: none; } .teaser { text-align: center; } .teaser .ym-g33 .ce_image { padding-bottom: 0;} .page-footer .facebook { padding-top: 0 !important; } /*PF: Sinnvoll?*/ /*==================================================================================================================== #09-00 Media Queries -------------------------------------------------------------------------------------------------------------------- #09-01 @media screen and (max-width: 900px) - linearize-level-1 ====================================================================================================================*/ @media screen and (max-width: 900px) { /*------------------------------------------------------------------------------------------------------------------*/ .linearize-level-1, .linearize-level-1 > [class*="page-col"], .linearize-level-1 > [class*="ym-g"] { display: block; float: none; margin: 0; padding:0; width: 100% !important; } /* Rücknahme der Equal Hight Columns Technik. Bei Bedarf Methode für 'containing floats' einfügen. */ .linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"] { margin: 0; padding: 0; } /* Die Klasse "grid-empty" muss an "Spaltenset Start Element" vergeben werden, wenn die letzte Spalte im Set ohne Inhalt ist! */ .grid-empty > [class*="ym-g"], .main-content .ce_form .ce_grid [class*="ym-g"] { margin: 0; } /*------------------------------------------------------------------------------------------------------------------*/ .backstretch, .mod_calendar { display: none !important; visibility: hidden; } /*------------------------------------------------------------------------------------------------------------------*/ .layout-3-1-0 .page-column-1:before, .layout-0-1-3 .page-column-1:before { position: absolute; left:-10000px; top: -10000px; width: 0; height:0; overflow:hidden; display: inline; } .page-wrapper { margin: 0; box-shadow: none; } .page-header .boxes4ward_article .ce_image { text-align: center; padding: 20px 20px 0 20px; } .main-content .mod_article > * { padding: 0 20px 20px 20px; } .main-content .mod_article > *:first-child { padding-top: 20px; } .layout-0-1-0 .main-content .mod_article > * { padding: 20px; } /* PF: Ggf. löschen bei neuen Kundenprojekten (Dummy Klasse an Seite vergeben) - Start */ .layout-3-1-0.accordion-page .main-content { padding-bottom: 20px; } /* PF: Ggf. löschen bei neuen Kundenprojekten (Dummy Klasse an Seite vergeben) - Ende */ .sidebar .mod_boxes4ward > *:first-child { border-top: 10px solid #fff; } .sidebar .boxes4ward_article > * { padding: 20px; } /* PF: Ausblendung der Inhaltsbox mit der Subnavigation */ .sidebar > .mod_boxes4ward:first-child { display: none !important; visibility: hidden; } /*------------------------------------------------------------------------------------------------------------------*/ .page-footer [class*="ym-gbox"] > *, .layout-0-1-0 [class*="ce_colset"] [class*="ym-gbox"] > * { padding: 20px; } .page-footer .ym-gbox, .layout-0-1-0 [class*="ce_colset"] .ym-gbox { border-left: none; border-right: none; border-bottom: 10px solid #fff; } .page-footer .ym-gbox-left, .layout-0-1-0 [class*="ce_colset"] .ym-gbox-left { border-right: none; border-bottom: 10px solid #fff; } .page-footer .ym-gbox-right, .layout-0-1-0 [class*="ce_colset"] .ym-gbox-right { border-left: none; } .main-content [class*="ym-g"] > [class*="ym-gbox"] { margin-bottom: 30px; } .main-content .ce_form [class*="ym-g"] > [class*="ym-gbox"], .main-content [class*="ce_colset"].last > [class*="ym-gbox"] { margin-bottom: 0; } /*------------------------------------------------------------------------------------------------------------------*/ .main-navigation { padding: 0; } .main-navigation ul li a, .main-navigation ul li span.trail, .main-navigation ul li span.active { padding: 12px 64px 12px 12px; border-top: none; border-left: none; border-right: none; } .main-navigation ul li a.trail, .main-navigation ul li span.trail, .main-navigation ul li span.active { border-top: none; border-left: none; border-right: none; } .main-navigation ul li a:hover, .main-navigation ul li span.trail:hover, .main-navigation ul li span.active:hover { border-top: none; border-left: none; border-right: none; } .main-navigation ul.level_1 li { margin-right: 0; padding-bottom: 0; font-size: 14px; font-size: 0.875rem; } .main-navigation ul.level_2 li { padding-bottom: 0; } .main-navigation ul.level_3 li { padding-left: 0; } .main-navigation ul.level_2 { width: 100%; } .main-navigation ul.level_2 li a, .main-navigation ul.level_2 li span.trail, .main-navigation ul.level_2 li span.active { padding-left: 30px; border-top: none; border-left: none; border-right: none; } .main-navigation ul.level_3 li a, .main-navigation ul.level_3 li span.trail, .main-navigation ul.level_3 li span.active { padding-left: 60px; } .main-navigation ul li .sub-collapser { display: block; } /*------------------------------------------------------------------------------------------------------------------*/ .caroufredsel .slider-inside { position: relative; min-height: 0; width: 100%; bottom: 0; left: 0; padding: 20px; } .caroufredsel_pagi { right: 20px; } /*------------------------------------------------------------------------------------------------------------------*/ .mod_eventlist { padding-top: 0 !important; } /* PF Sinnvoll? */ /*------------------------------------------------------------------------------------------------------------------*/ /*==================================================================================================================*/ } /* Ende - @media screen and (max-width: 900px) ====================================================================================================================*/ /*==================================================================================================================== #09-02 @media screen and (max-width: 640px) - linearize-level-2 ====================================================================================================================*/ @media screen and (max-width: 640px) { /*------------------------------------------------------------------------------------------------------------------*/ .linearize-level-2, .linearize-level-2 > [class*="page-col"], .linearize-level-2 > [class*="ym-g"] { display: block; float: none; margin: 0; padding:0; width: 100% !important; } /* Rücknahme der Equal Hight Columns Technik. Bei Bedarf Methode für 'containing floats' einfügen. */ .linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"] { margin: 0; padding: 0; } .linearize-level-2 > [class*="ym-g"] { margin: 40px 0; } .linearize-level-2 > [class*="ym-g"]:first-child { margin-top: 0; } .linearize-level-2 > [class*="ym-g"]:last-child {margin-bottom:0; } /* Die Klasse "grid-empty" muss an "Spaltenset Start Element" vergeben werden, wenn die letzte Spalte im Set ohne Inhalt ist! */ .grid-empty > [class*="ym-g"], .main-content .ce_form .ce_grid [class*="ym-g"] { margin: 0; } /*------------------------------------------------------------------------------------------------------------------*/ /*==================================================================================================================*/ } /* Ende - @media screen and (max-width: 640px) ====================================================================================================================*/ /*==================================================================================================================== #09-03 @media screen and (max-width: 480px) - linearize-level-3 ====================================================================================================================*/ @media screen and (max-width: 480px) { /*------------------------------------------------------------------------------------------------------------------*/ .linearize-level-3, .linearize-level-3 > [class*="page-col"], .linearize-level-3 > [class*="ym-g"] { display: block; float: none; margin: 0; padding:0; width: 100% !important; } /* Rücknahme der Equal Hight Columns Technik. Bei Bedarf Methode für 'containing floats' einfügen. */ .linearize-level-3 > [class*="ym-g"] > [class*="ym-gbox"] { margin: 0; padding: 0; } .linearize-level-3 > [class*="ym-g"] { margin: 40px 0; } .linearize-level-3 > [class*="ym-g"]:first-child { margin-top: 0; } .linearize-level-3 > [class*="ym-g"]:last-child {margin-bottom:0; } /* Die Klasse "grid-empty" muss an "Spaltenset Start Element" vergeben werden, wenn die letzte Spalte im Set ohne Inhalt ist! */ .grid-empty > [class*="ym-g"], .main-content .ce_form .ce_grid [class*="ym-g"] { margin: 0; } /*------------------------------------------------------------------------------------------------------------------*/ .image_container.float_left, .image_container.float_right { float: none; display: block; max-width: 100%; margin: 0 0 20px 0; margin: 0 0 1.25rem 0; } /*------------------------------------------------------------------------------------------------------------------*/ .caroufredsel .slider-headline { font-size: 20px; font-size: 1.25rem; } /*------------------------------------------------------------------------------------------------------------------*/ .main-content .ce_gallery > ul { margin: 0 0 0 0; } .main-content .ce_gallery > ul > li { margin: 0 0 1.5% 0; width: 100%; float: none; } .main-content .ce_gallery.icon-gallery > ul { margin: 0 0 0 -6%; } .main-content .ce_gallery.icon-gallery > ul > li { margin: 0 0 6% 6%; width: 44%; float: left; } /*==================================================================================================================*/ } /* Ende - @media screen and (max-width: 480px) - - linearize-level-4 ====================================================================================================================*/ /*==================================================================================================================== #09-04 @media screen and (max-width: 360px) ====================================================================================================================*/ @media screen and (max-width: 360px) { /*------------------------------------------------------------------------------------------------------------------*/ .linearize-level-4, .linearize-level-4 > [class*="page-col"], .linearize-level-4 > [class*="ym-g"] { display: block; float: none; margin: 0; padding:0; width: 100% !important; } /* Rücknahme der Equal Hight Columns Technik. Bei Bedarf Methode für 'containing floats' einfügen. */ .linearize-level-4 > [class*="ym-g"] > [class*="ym-gbox"] { margin: 0; padding: 0; } .linearize-level-4 > [class*="ym-g"] { margin: 40px 0; } .linearize-level-4 > [class*="ym-g"]:first-child { margin-top: 0; } .linearize-level-4 > [class*="ym-g"]:last-child {margin-bottom:0; } /* Die Klasse "grid-empty" muss an "Spaltenset Start Element" vergeben werden, wenn die letzte Spalte im Set ohne Inhalt ist! */ .grid-empty > [class*="ym-g"], .main-content .ce_form .ce_grid [class*="ym-g"] { margin: 0; } /*------------------------------------------------------------------------------------------------------------------*/ /*==================================================================================================================*/ } /* Ende - @media screen and (max-width: 360px) ====================================================================================================================*/ /*==================================================================================================================== #10-00 Druckausgabe -------------------------------------------------------------------------------------------------------------------- Inlined to avoid a additional HTTP request. Link: http://www.phpied.com/delay-loading-your-print-css/ ====================================================================================================================*/ @media print { /*-------------------------------------------------------------------------------------------------------------------- HTML5 Boilerplate - Print Base | Version: 5.0.0 | Lizenz: MIT Link: http://h5bp.com/ /*------------------------------------------------------------------------------------------------------------------*/ *,:after,:before{color:#000!important;box-shadow:none!important;text-shadow:none!important;background:0 0!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid} img { width: auto !important; } /* Chrome druckt keine Bilder mit Viewporteinheit */ /*-------------------------------------------------------------------------------------------------------------------- Individuelle Erweiterung der Druckausgabe /*------------------------------------------------------------------------------------------------------------------*/ /*==================================================================================================================*/ } /* Ende - @media print ====================================================================================================================*/