header,footer,nav,section,aside,main,article,figure,figcaption{display:block}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}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px} body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both} @media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%} .download-element a{padding:3px 6px 3px 22px;background:url(../../assets/contao/images/iconPLAIN.svg) left center no-repeat}ul.enclosure{padding-left:0}li.download-element{list-style-type:none}.ext-xl a{background-image:url(../../assets/contao/images/iconXL.svg)}.ext-xls a{background-image:url(../../assets/contao/images/iconXLS.svg)}.ext-xlsx a{background-image:url(../../assets/contao/images/iconXLSX.svg)}.ext-hqx a{background-image:url(../../assets/contao/images/iconHQX.svg)}.ext-cpt a{background-image:url(../../assets/contao/images/iconCPT.svg)}.ext-bin a{background-image:url(../../assets/contao/images/iconBIN.svg)}.ext-doc a{background-image:url(../../assets/contao/images/iconDOC.svg)}.ext-docx a{background-image:url(../../assets/contao/images/iconDOCX.svg)}.ext-word a{background-image:url(../../assets/contao/images/iconWORD.svg)}.ext-cto a{background-image:url(../../assets/contao/images/iconCTO.svg)}.ext-dms a{background-image:url(../../assets/contao/images/iconDMS.svg)}.ext-lha a{background-image:url(../../assets/contao/images/iconLHA.svg)}.ext-lzh a{background-image:url(../../assets/contao/images/iconLZH.svg)}.ext-exe a{background-image:url(../../assets/contao/images/iconEXE.svg)}.ext-class a{background-image:url(../../assets/contao/images/iconCLASS.svg)}.ext-so a{background-image:url(../../assets/contao/images/iconSO.svg)}.ext-sea a{background-image:url(../../assets/contao/images/iconSEA.svg)}.ext-dll a{background-image:url(../../assets/contao/images/iconDLL.svg)}.ext-oda a{background-image:url(../../assets/contao/images/iconODA.svg)}.ext-pdf a{background-image:url(../../assets/contao/images/iconPDF.svg)}.ext-ai a{background-image:url(../../assets/contao/images/iconAI.svg)}.ext-eps a{background-image:url(../../assets/contao/images/iconEPS.svg)}.ext-ps a{background-image:url(../../assets/contao/images/iconPS.svg)}.ext-pps a{background-image:url(../../assets/contao/images/iconPPS.svg)}.ext-ppt a{background-image:url(../../assets/contao/images/iconPPT.svg)}.ext-pptx a{background-image:url(../../assets/contao/images/iconPPTX.svg)}.ext-smi a{background-image:url(../../assets/contao/images/iconSMI.svg)}.ext-smil a{background-image:url(../../assets/contao/images/iconSMIL.svg)}.ext-mif a{background-image:url(../../assets/contao/images/iconMIF.svg)}.ext-odc a{background-image:url(../../assets/contao/images/iconODC.svg)}.ext-odf a{background-image:url(../../assets/contao/images/iconODF.svg)}.ext-odg a{background-image:url(../../assets/contao/images/iconODG.svg)}.ext-odi a{background-image:url(../../assets/contao/images/iconODI.svg)}.ext-odp a{background-image:url(../../assets/contao/images/iconODP.svg)}.ext-ods a{background-image:url(../../assets/contao/images/iconODS.svg)}.ext-odt a{background-image:url(../../assets/contao/images/iconODT.svg)}.ext-wbxml a{background-image:url(../../assets/contao/images/iconWBXML.svg)}.ext-wmlc a{background-image:url(../../assets/contao/images/iconWMLC.svg)}.ext-dmg a{background-image:url(../../assets/contao/images/iconDMG.svg)}.ext-dcr a{background-image:url(../../assets/contao/images/iconDCR.svg)}.ext-dir a{background-image:url(../../assets/contao/images/iconDIR.svg)}.ext-dxr a{background-image:url(../../assets/contao/images/iconDXR.svg)}.ext-dvi a{background-image:url(../../assets/contao/images/iconDVI.svg)}.ext-gtar a{background-image:url(../../assets/contao/images/iconGTAR.svg)}.ext-inc a{background-image:url(../../assets/contao/images/iconINC.svg)}.ext-php a{background-image:url(../../assets/contao/images/iconPHP.svg)}.ext-php3 a{background-image:url(../../assets/contao/images/iconPHP3.svg)}.ext-php4 a{background-image:url(../../assets/contao/images/iconPHP4.svg)}.ext-php5 a{background-image:url(../../assets/contao/images/iconPHP5.svg)}.ext-phtml a{background-image:url(../../assets/contao/images/iconPHTML.svg)}.ext-phps a{background-image:url(../../assets/contao/images/iconPHPS.svg)}.ext-js a{background-image:url(../../assets/contao/images/iconJS.svg)}.ext-psd a{background-image:url(../../assets/contao/images/iconPSD.svg)}.ext-rar a{background-image:url(../../assets/contao/images/iconRAR.svg)}.ext-fla a{background-image:url(../../assets/contao/images/iconFLA.svg)}.ext-swf a{background-image:url(../../assets/contao/images/iconSWF.svg)}.ext-sit a{background-image:url(../../assets/contao/images/iconSIT.svg)}.ext-tar a{background-image:url(../../assets/contao/images/iconTAR.svg)}.ext-tgz a{background-image:url(../../assets/contao/images/iconTGZ.svg)}.ext-xhtml a{background-image:url(../../assets/contao/images/iconXHTML.svg)}.ext-xht a{background-image:url(../../assets/contao/images/iconXHT.svg)}.ext-zip a{background-image:url(../../assets/contao/images/iconZIP.svg)}.ext-m4a a{background-image:url(../../assets/contao/images/iconM4A.svg)}.ext-mp3 a{background-image:url(../../assets/contao/images/iconMP3.svg)}.ext-wma a{background-image:url(../../assets/contao/images/iconWMA.svg)}.ext-mpeg a{background-image:url(../../assets/contao/images/iconMPEG.svg)}.ext-wav a{background-image:url(../../assets/contao/images/iconWAV.svg)}.ext-ogg a{background-image:url(../../assets/contao/images/iconOGG.svg)}.ext-mid a{background-image:url(../../assets/contao/images/iconMID.svg)}.ext-midi a{background-image:url(../../assets/contao/images/iconMIDI.svg)}.ext-aif a{background-image:url(../../assets/contao/images/iconAIF.svg)}.ext-aiff a{background-image:url(../../assets/contao/images/iconAIFF.svg)}.ext-aifc a{background-image:url(../../assets/contao/images/iconAIFC.svg)}.ext-ram a{background-image:url(../../assets/contao/images/iconRAM.svg)}.ext-rm a{background-image:url(../../assets/contao/images/iconRM.svg)}.ext-rpm a{background-image:url(../../assets/contao/images/iconRPM.svg)}.ext-ra a{background-image:url(../../assets/contao/images/iconRA.svg)}.ext-bmp a{background-image:url(../../assets/contao/images/iconBMP.svg)}.ext-gif a{background-image:url(../../assets/contao/images/iconGIF.svg)}.ext-jpeg a{background-image:url(../../assets/contao/images/iconJPEG.svg)}.ext-jpg a{background-image:url(../../assets/contao/images/iconJPG.svg)}.ext-jpe a{background-image:url(../../assets/contao/images/iconJPE.svg)}.ext-png a{background-image:url(../../assets/contao/images/iconPNG.svg)}.ext-tiff a{background-image:url(../../assets/contao/images/iconTIFF.svg)}.ext-tif a{background-image:url(../../assets/contao/images/iconTIF.svg)}.ext-svg a{background-image:url(../../assets/contao/images/iconSVG.svg)}.ext-svgz a{background-image:url(../../assets/contao/images/iconSVGZ.svg)}.ext-webp a{background-image:url(../../assets/contao/images/iconWEBP.svg)}.ext-avif a{background-image:url(../../assets/contao/images/iconAVIF.svg)}.ext-heic a{background-image:url(../../assets/contao/images/iconHEIC.svg)}.ext-jxl a{background-image:url(../../assets/contao/images/iconJXL.svg)}.ext-eml a{background-image:url(../../assets/contao/images/iconEML.svg)}.ext-asp a{background-image:url(../../assets/contao/images/iconASP.svg)}.ext-css a{background-image:url(../../assets/contao/images/iconCSS.svg)}.ext-scss a{background-image:url(../../assets/contao/images/iconSCSS.svg)}.ext-less a{background-image:url(../../assets/contao/images/iconLESS.svg)}.ext-html a{background-image:url(../../assets/contao/images/iconHTML.svg)}.ext-htm a{background-image:url(../../assets/contao/images/iconHTM.svg)}.ext-md a{background-image:url(../../assets/contao/images/iconMD.svg)}.ext-shtml a{background-image:url(../../assets/contao/images/iconSHTML.svg)}.ext-txt a{background-image:url(../../assets/contao/images/iconTXT.svg)}.ext-text a{background-image:url(../../assets/contao/images/iconTEXT.svg)}.ext-log a{background-image:url(../../assets/contao/images/iconLOG.svg)}.ext-rtx a{background-image:url(../../assets/contao/images/iconRTX.svg)}.ext-rtf a{background-image:url(../../assets/contao/images/iconRTF.svg)}.ext-xml a{background-image:url(../../assets/contao/images/iconXML.svg)}.ext-xsl a{background-image:url(../../assets/contao/images/iconXSL.svg)}.ext-mp4 a{background-image:url(../../assets/contao/images/iconMP4.svg)}.ext-m4v a{background-image:url(../../assets/contao/images/iconM4V.svg)}.ext-mov a{background-image:url(../../assets/contao/images/iconMOV.svg)}.ext-wmv a{background-image:url(../../assets/contao/images/iconWMV.svg)}.ext-webm a{background-image:url(../../assets/contao/images/iconWEBM.svg)}.ext-qt a{background-image:url(../../assets/contao/images/iconQT.svg)}.ext-rv a{background-image:url(../../assets/contao/images/iconRV.svg)}.ext-avi a{background-image:url(../../assets/contao/images/iconAVI.svg)}.ext-ogv a{background-image:url(../../assets/contao/images/iconOGV.svg)}.ext-movie a{background-image:url(../../assets/contao/images/iconMOVIE.svg)} .mod_visitors .invisible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; float: left; width:0px; height:0px; } .rsts-main,.rsts-main *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.rsts-header,.rsts-footer,.rsts-thumbs-header,.rsts-thumbs-footer{overflow:hidden}.rsts-view,.rsts-thumbs-view{position:relative}@media print{.rsts-view,.rsts-thumbs-view{position:static}}.rsts-crop,.rsts-thumbs-crop{position:relative;overflow:hidden}@media print{.rsts-crop,.rsts-thumbs-crop{position:static;overflow:visible;width:auto !important;height:auto !important;transform:none !important}}.rsts-slides,.rsts-slide,.rsts-thumbs-slides,.rsts-thumbs-slide{position:absolute;left:0;top:0}@media print{.rsts-slides,.rsts-slide,.rsts-thumbs-slides,.rsts-thumbs-slide{position:static;width:auto !important;height:auto !important;transform:none !important}.rsts-slides.rsts-slide-image img,.rsts-slides.rsts-slide-video img,.rsts-slides.rsts-thumbs-slide-image img,.rsts-slides.rsts-thumbs-slide-video img,.rsts-slide.rsts-slide-image img,.rsts-slide.rsts-slide-video img,.rsts-slide.rsts-thumbs-slide-image img,.rsts-slide.rsts-thumbs-slide-video img,.rsts-thumbs-slides.rsts-slide-image img,.rsts-thumbs-slides.rsts-slide-video img,.rsts-thumbs-slides.rsts-thumbs-slide-image img,.rsts-thumbs-slides.rsts-thumbs-slide-video img,.rsts-thumbs-slide.rsts-slide-image img,.rsts-thumbs-slide.rsts-slide-video img,.rsts-thumbs-slide.rsts-thumbs-slide-image img,.rsts-thumbs-slide.rsts-thumbs-slide-video img{width:100% !important;height:auto !important;margin:0 !important}}.rsts-slide,.rsts-thumbs-slide{overflow:hidden}@media print{.rsts-slide,.rsts-thumbs-slide{position:static}}.rsts-video-iframe,.rsts-thumbs-video-iframe{position:absolute;top:0;left:0;width:100%;height:100%}.rsts-type-slide .rsts-view,.rsts-thumbs-type-slide .rsts-thumbs-view{cursor:url("../../bundles/rocksolidslider/img/openhand.cur"),default;cursor:-webkit-grab;cursor:-moz-grab;cursor:-ms-grab;cursor:-o-grab;cursor:grab}.rsts-type-slide.rsts-dragging .rsts-view,.rsts-thumbs-type-slide.rsts-thumbs-dragging .rsts-thumbs-view{cursor:url("../../bundles/rocksolidslider/img/closedhand.cur"),default;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:-ms-grabbing;cursor:-o-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rsts-type-slide.rsts-dragging-disabled .rsts-view,.rsts-thumbs-type-slide.rsts-thumbs-dragging-disabled .rsts-thumbs-view{cursor:auto}@media print{.rsts-nav,.rsts-prev,.rsts-next,.rsts-overlay-prev,.rsts-overlay-next,.rsts-progress,.rsts-thumbs-nav,.rsts-thumbs-prev,.rsts-thumbs-next,.rsts-thumbs-overlay-prev,.rsts-thumbs-overlay-next,.rsts-thumbs-progress{display:none !important}} .rsts-skin-default.rsts-main{position:relative}.rsts-skin-default.rsts-type-fade .rsts-slide{background-color:#fff}.rsts-skin-default .rsts-caption{position:absolute;top:20px;left:20px;margin-right:20px;padding:5px 10px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#fff;background-color:#000;background-color:rgba(0,0,0,0.4);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transform:translate(0, -20px);-moz-transform:translate(0, -20px);-ms-transform:translate(0, -20px);-o-transform:translate(0, -20px);transform:translate(0, -20px);-webkit-transition:opacity 0.5s,-webkit-transform 0.5s;-moz-transition:opacity 0.5s,-moz-transform 0.5s;-o-transition:opacity 0.5s,-o-transform 0.5s;transition:opacity 0.5s,transform 0.5s}.rsts-skin-default .rsts-active .rsts-caption{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-webkit-transform:translate(0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0)}.rsts-skin-default .rsts-prev,.rsts-skin-default .rsts-next,.rsts-skin-default .rsts-video-play,.rsts-skin-default .rsts-video-stop,.rsts-skin-default .rsts-thumbs-prev,.rsts-skin-default .rsts-thumbs-next{position:absolute;right:55px;bottom:15px;overflow:hidden;width:30px;height:30px;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.1);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;outline:none;line-height:0;text-align:center;text-decoration:none;text-indent:-9999px;-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding-box;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAilBMVEUHBwg/QEF5enp5ensCAwQHCAhzdHUAAQEGBwh8fX37+/svMDBub3COjo9yc3NtbW709fWvsLDm5uba2trR0dEuLi6Pj4/Q0NDl5eXZ2toFBgfz8/MuLy/09PT29vb8/Pz6+vp7e3x0dXZzdHT4+Pj39/f9/v3+/v79/f3///8EBQb5+fkAAAD19fVMP6q+AAAALnRSTlOAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8hTP8QAAAJ1JREFUeNrV0lkPwiAMAOB53zrva2xOxQm0///vWZ4a1o3EN20gNPnSlFASRKVQIS2KFHPKaPvcH8St8WesXYzddVMIZn3NZ1tTZ9Y7QLa7MdfVWlgYZqk9lzML7VZPbGCdDsFekpI14GoN/fGoY6aqkbVaUvVg0lKN7v3wvcuwt/Tg5tIPRjA77I/i1dhX2dnEJnYq4vP+2a/4FX8AsSOXytKixMYAAAAASUVORK5CYII=');-webkit-box-shadow:0 0 2px rgba(0,0,0,0.1);-moz-box-shadow:0 0 2px rgba(0,0,0,0.1);box-shadow:0 0 2px rgba(0,0,0,0.1);background-position:50% 50%;-webkit-transition:opacity 0.05s linear;-moz-transition:opacity 0.05s linear;-o-transition:opacity 0.05s linear;transition:opacity 0.05s linear}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default .rsts-prev,.rsts-skin-default .rsts-next,.rsts-skin-default .rsts-video-play,.rsts-skin-default .rsts-video-stop,.rsts-skin-default .rsts-thumbs-prev,.rsts-skin-default .rsts-thumbs-next{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAIVBMVEWhoaE7PD15enqVlpaTk5N2d3h0dHVoaWpmZmcGBwj19fXsWX/bAAAAC3RSTlOAgICAgICAgICAgMiF55wAAAB9SURBVHja7dUxEoAgFANRFBTw/ge2YythEivHn/6VmU3XiwUOHPhPuGYf196zjLHPOi0tWsBYtICx/Zxgw4INCzYs2LBgw4INC55ZFadhN+NVbeh9jhf6mGJDgw0NNjTY0GBDgz0NXusiYDRWwGisgNHFL0Yrnwxd4MCBtd3+EosAicYyWQAAAABJRU5ErkJggg==');background-size:30px,30px}}.rsts-skin-default .rsts-prev:hover,.rsts-skin-default .rsts-next:hover,.rsts-skin-default .rsts-video-play:hover,.rsts-skin-default .rsts-video-stop:hover,.rsts-skin-default .rsts-thumbs-prev:hover,.rsts-skin-default .rsts-thumbs-next:hover{background-color:#eee;background-color:rgba(238,238,238,0.7)}.rsts-skin-default .rsts-next,.rsts-skin-default .rsts-thumbs-next{right:20px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAkFBMVEUBAQLPz9AlJiYlJifS0tIsLS0nJyjQ0dDR0tIBAQElJSYrLC2tra39/PwFBQYFBgf6+fmBgYKCgoL9/f339vZBQULIycnIyMiCg4PR0dEmJycmJyjMzMz8/Pzl5eXj4+MCAwQGBwghIiP09PT7+/shIiL6+vrNzs7Nzc0iIyP29vb39/cHCAkAAAD////19fV/WdL3AAAAMHRSTlOAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICRnvRdAAAAnklEQVR42tXSxw7CMAwG4LL3XqUtLdRQqNPY7/92WEJVDhkSN7B8iPTpl6M4ETMAA0t/ChmwPTELe+uPGKsQKywWflYUJxn5eI9xpOsneXidp7pp3Wa+dHrGbWY6d43bLD673nR9vLsZaL5cNfoAyp0eDyRdntxp6icy+/Ei981HqVGLq3xo1GaFm4kuRb1vvp1mFNzYLrzvn/2KX/MbXNOe099MDj0AAAAASUVORK5CYII=')}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default .rsts-next,.rsts-skin-default .rsts-thumbs-next{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAHlBMVEWhoaE7PD2VlpaTk5N2d3h0dHVoaWpmZmcGBwj19fXtfGSSAAAACnRSTlOAgICAgICAgICAXdxslAAAAHxJREFUeNrt1TEOgDAMxdDSAi33vzBbPVUoZkLE+1O2/HK9KHHixH/A9fS4jnGGMfZZl6VFBzAWHcLHQD9gocFCg4UGCw0WGiw0WGjwum3qEsb7tH1xWViwsGBhwcKChQULC5Z2jRs2itHdfc+GjWB094vR+ieHLnHixK4bjyV89TB6vlgAAAAASUVORK5CYII=');background-size:30px,30px}}.rsts-skin-default .rsts-thumbs-prev,.rsts-skin-default .rsts-thumbs-next{position:absolute;top:50%;right:10px;margin-top:-15px}.rsts-skin-default .rsts-thumbs-prev{right:auto;left:10px}.rsts-skin-default.rsts-direction-y .rsts-prev{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAbFBMVEUgISLDw8MgICGUlZaIiImSk5PCwsP9/f39/PyHh4iUlJWSkpLX2NgAAQIoKSkGBwgdHR7Ly8skJSYEBAXHyMj+/v739/ciIyMhIiImJyfNzc3S0tL8/Pz7+/v29vYHCAnNzs4AAAD////19fVh+HN2AAAAJHRSTlOAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC401waAAAAiUlEQVR42uXRyQ7CMAwE0LC2QHfaQkji1sP//yNR1csEiXMlfPFI7zCWbN7JCCVmnj9i738x2hbMpHPTzCAmfag+XyAmrWt2QzqV5URuSLWqdHXmsDMRbFHYuPbnkPBw0rtaBzgbw21IWPKjdg6xxHV68ZJ2j9mhXyrRX/34fblgLQyQLf57S/wBI9V2nx3O9QoAAAAASUVORK5CYII=')}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default.rsts-direction-y .rsts-prev{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAG1BMVEWjpKQ5OTqVlpaTk5NmZmdoaWp2d3gGBwj19fXoTOf7AAAACXRSTlOAgICAgICAgIC7HeZcAAAAeUlEQVR42u3UMQ6AMAzF0A8BmvufGHVpyOIOFRJI8f5WyxcqXLhw4U9jLeCznYzRNtYi2zsIs2UttqzFlrXYshZb1mLLWmg31iJ7+YVaaJ210GY9x/awWdsc+z5s1uaEQ4cNbY449LChzQFn3W3S9qsBFi5cuPDr+AYQcW8C6kiUiAAAAABJRU5ErkJggg==');background-size:30px,30px}}.rsts-skin-default.rsts-direction-y .rsts-next{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAbFBMVEUwMTKKi4suLzAGBwja2trR0dEwMDEuLi/Q0NDZ2dmJiYp7e3x6e3t/gIEAAQL09PTn5+f6+vr8/Px0dHVwcHH8/f329vYFBgdzdHT+/v79/v339/f9/f3///90dXb4+Pj5+fkEBQYAAAD19fUC5l8BAAAAJHRSTlOAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC401waAAAAnElEQVR42uXSyQ4CIQwG4HEddRZmZUSEQnn/d7RkSAi4HI2Jf6AlfIceoHCOMcccrTXcMR5OtInf5k/YyLVL84qHjoHvwLrhmdW+0AJIhT6eVc79YYtYCQBRIZanPmO1QWuxVqr2/aIylqD9fdP4OoLMZ5sb+dK2i8Xr3cTZie+CRk49aOTUcSRNOfo8TXPUnB1QPj0J5z/5Hb7OD7UPdeTEuFeXAAAAAElFTkSuQmCC')}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default.rsts-direction-y .rsts-next{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAG1BMVEWjpKQ5OTqVlpaTk5NmZmdoaWp2d3gGBwj19fXoTOf7AAAACXRSTlOAgICAgICAgIC7HeZcAAAAg0lEQVR42u3UMQ6EMAxE0WVDYu5/YhpLXzBSRkAF8i9tvXZ+24MKFy5c+HP4P06H0RzGRoyjjWgOY1Nj0YLFpsaip7hFNrBog3ug02brDKsWK3imxQqe6EWsxWi1HqOxHqONBTuN9RiN9Vg11mPVWI9V99tL0rEe6/dVA1i4cOHCl9oBak1vAkBKLfwAAAAASUVORK5CYII=');background-size:30px,30px}}.rsts-skin-default.rsts-video-playing .rsts-nav,.rsts-skin-default.rsts-video-playing .rsts-prev,.rsts-skin-default.rsts-video-playing .rsts-next{display:none}.rsts-skin-default.rsts-video-playing .rsts-nav-thumbs{display:block}.rsts-skin-default.rsts-touch .rsts-nav-numbers,.rsts-skin-default.rsts-touch .rsts-nav-tabs{display:none}.rsts-skin-default .rsts-nav{position:absolute;right:95px;bottom:12px;left:10px;text-align:right}.rsts-skin-default .rsts-nav ul{margin:0 !important;padding:0 !important}.rsts-skin-default .rsts-nav li{display:inline}.rsts-skin-default .rsts-nav-numbers a,.rsts-skin-default .rsts-nav-tabs a{display:inline-block;height:30px;min-width:30px;padding:0.65em 0.5em 0.5em;margin:0 2px 3px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;outline:none;font-size:12px;text-align:center;text-decoration:none;color:#fff;background-color:#555;background-color:rgba(85,85,85,0.6);-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 0 2px rgba(0,0,0,0.2);-moz-box-shadow:0 0 2px rgba(0,0,0,0.2);box-shadow:0 0 2px rgba(0,0,0,0.2);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transition:opacity 0.2s ease-in;-moz-transition:opacity 0.2s ease-in;-o-transition:opacity 0.2s ease-in;transition:opacity 0.2s ease-in}.rsts-skin-default .rsts-nav-numbers a:hover,.rsts-skin-default .rsts-nav-numbers a.active,.rsts-skin-default .rsts-nav-tabs a:hover,.rsts-skin-default .rsts-nav-tabs a.active{color:#333;background-color:#fff;background-color:rgba(255,255,255,0.5)}.rsts-skin-default:hover .rsts-nav-numbers a,.rsts-skin-default:hover .rsts-nav-tabs a{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}.rsts-skin-default .rsts-nav-bullets{line-height:0}.rsts-skin-default .rsts-nav-bullets a{display:inline-block;width:9px;height:9px;overflow:hidden;margin:12px 4px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;outline:none;text-align:left;text-indent:-999px;background-color:#fff;background-color:rgba(255,255,255,0.8);-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 0 2px #777;-moz-box-shadow:0 0 2px #777;box-shadow:0 0 2px #777}.rsts-skin-default .rsts-nav-bullets a:hover,.rsts-skin-default .rsts-nav-bullets a.active{background-color:#777;-webkit-box-shadow:inset 0 2px 0 -1px rgba(255,255,255,0.5),inset 0 -2px 0 -1px rgba(0,0,0,0.3),0 0 0 1px #555;-moz-box-shadow:inset 0 2px 0 -1px rgba(255,255,255,0.5),inset 0 -2px 0 -1px rgba(0,0,0,0.3),0 0 0 1px #555;box-shadow:inset 0 2px 0 -1px rgba(255,255,255,0.5),inset 0 -2px 0 -1px rgba(0,0,0,0.3),0 0 0 1px #555}.rsts-skin-default .rsts-nav-thumbs{position:static;padding-top:5px}.rsts-skin-default .rsts-nav .rsts-nav-prev,.rsts-skin-default .rsts-nav .rsts-nav-next{display:none}.rsts-skin-default .rsts-video-play{top:50%;right:auto;bottom:auto;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAAb1BMVEU4ODgGBgbx8fGurq7i4uIODg5QUFD7+/vBwcEUFBQYGBggICC1tbXNzc0JCQkVFRWsrKwTExPExMTS0tImJibv7+9KSkozMzP4+PhYWFj+/v6Dg4MDAwPl5eVycnKenp4MDAza2toPDw////8AAACZ5/RyAAAAJXRSTlOAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAwmBGiwAAALNJREFUeNrt1kcOwkAQRFFyxsYmBxtDc/8zIrGpA/xaWKhnO9KT5ncvZvCxnGSSSSaZv2GK0sIsFzMHM53MWwPzfkU8OwsT9cHCRHOyMHFpLYwCIUaBEKNAiFEgxCgQYhSIMQrEGAXijAJxJrZrC7NZGZjb/WF41PHqSLw/Owa+q9D6KQthlAUwykIYZSGMsiBGWRCjLIhRFsQoC2Ga0S8LZMqx7gAzLPr0aUsmmWSS6SXzBf8cqwAv1zglAAAAAElFTkSuQmCC')}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default .rsts-video-play{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAMAAACZHrEMAAAARVBMVEUJCQlOTk4nJyddXV1gYGD29vbh4eGTk5PAwMA2NjYYGBgGBga3t7dUVFQtLS0SEhKHh4fb29sDAwPz8/NaWlr///8AAACZTZFgAAAAF3RSTlOAgICAgICAgICAgICAgICAgICAgICAgCZn8kAAAAFfSURBVHja7dpZUsMwFAVR5gDRLMT+l8r1Cqjih/5oLyB1kurYlp4evkGXGDFixIgRI0aMGDFixIgRI0aMGDFifseQvsBfPvjrdgdhzvsnCHPePkCY8/oCwpxzu4MwCQeESTggTMIBYa5wQJiEA8IkHBAm4YAwVzggTMIBYRIOCJNwQJgrHBAm4YAwCQeESTggzBUOCJNwQJiEA8IkHBDmCgeESTggTMIBYRIOCHOFA8IkHBAm4YAw5/UZhDn7iYOZjfPLlM5pZizMv2lXzk1vNs4duHTOs2kszFN7V87L1WycN73SOe/AY2FWB7tyFnGzcVaUpXPW2mNhdiF25WwWzcbZuSqds6c3Fma3c1fOpvRsnB3y0jmzg7EwU5VdOcOv2TiTuNI5M8qxMNPbXTlD9tk4E//SOWchxsKcEnmsoMM8qGNOYsRgLjFixIgRI0aMGDFixIgRI0aMGDH/e/0Ai4OJ2+ZcrkwAAAAASUVORK5CYII=');background-size:70px,70px}}.rsts-skin-default .rsts-video-stop{top:20px;right:20px;left:auto;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAbFBMVEWnp6dOTk7x8fHv7+9HR0fw8PDu7u7e3t5NTU3f398UFBQTExP4+PhLS0tvb29xcXH09PRJSUn39/fn5+cWFhampqb29vZISEhMTExLS0ukpKT////r6+sAAAD///8AAABKSkr19fUAAAD///8df9PJAAAAJHRSTlN6e35+e35+e3t7fX1/fHl5fXt/e315fnt7e3p/foGBfnt9gIDdofLFAAAAk0lEQVR42u2SSQ7DIAxF03nKPBEC2Ni9/x3jsMXqsuqiljxITx/8EcX7Y/wxuOmUhmPhIMdlg4akzxGbMscrBu4IyHLANce+Ymb7WKRWPsdyqpCnZJzVzUmUEgvpxmAYA4dxAB3TIanvupqisJdkRwr2O403K9V43bdpgaLuu6/x3KY7sO7VN7+m4TI5+K3v8H28AYM7doAzbo6MAAAAAElFTkSuQmCC')}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default .rsts-video-stop{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAALVBMVEXo6OjGxsZjY2PKysq3t7ewsLCOjo7f39+Pj4/l5eVfX19hYWHj4+NRUVH///80A/15AAAAD3RSTlOGkL2PlZemiKWHvr2HyICcCOzTAAAAv0lEQVR42u3VSQ7DIAxA0bRJSBjs+x83mzYfNnatLqpKeM0THmRY9IuYeOKJJ7bwlsdTWwCfUpsS+Smni7EipfVW5PQwtte5iqAdvIvcGiuy25gs0e1ta7YwuqJ76+NRr6P1MbkSTM7HaKyP0QXK1HyMxgaxrjde1cBe1TV4MzZeMxYdm7OvF9OWR7H0YtpDG/ojnDurnc6hfT7Iw9tnImE7ney00bdFJ3Uw+mXpQoq822Nv8/Yf383EE0/8G3wBfh3Bcn7dsMIAAAAASUVORK5CYII=');background-size:30px,30px}}.rsts-skin-default .rsts-video-youtube>.rsts-video-stop{top:25px}.rsts-skin-default .rsts-video-vimeo>.rsts-video-stop{top:10px;right:auto;left:10px}.rsts-skin-default .rsts-progress{position:absolute;top:0;right:0;width:100%;height:2px;background-color:#000;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;-o-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.rsts-skin-default .rsts-progress div{height:100%;background-color:#fff}.rsts-skin-default .rsts-progress.rsts-progress-active{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);opacity:0.3}.rsts-skin-default .rsts-thumbs-slide{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);opacity:0.8}.rsts-skin-default .rsts-thumbs-slide.rsts-thumbs-active-thumb{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1} .rs-columns { clear: both; display: inline-block; width: 100%; } .rs-column { float: left; width: 100%; margin-top: 7.69231%; margin-right: 7.69231%; } .rs-column.-large-first { clear: left; } .rs-column.-large-last { margin-right: -5px; } .rs-column.-large-first-row { margin-top: 0; } .rs-column.-large-col-1-1 { width: 100%; } .rs-column.-large-col-2-1 { width: 46.15385%; } .rs-column.-large-col-2-2 { width: 100%; } .rs-column.-large-col-3-1 { width: 28.20513%; } .rs-column.-large-col-3-2 { width: 64.10256%; } .rs-column.-large-col-3-3 { width: 100%; } .rs-column.-large-col-4-1 { width: 19.23077%; } .rs-column.-large-col-4-2 { width: 46.15385%; } .rs-column.-large-col-4-3 { width: 73.07692%; } .rs-column.-large-col-4-4 { width: 100%; } .rs-column.-large-col-5-1 { width: 13.84615%; } .rs-column.-large-col-5-2 { width: 35.38462%; } .rs-column.-large-col-5-3 { width: 56.92308%; } .rs-column.-large-col-5-4 { width: 78.46154%; } .rs-column.-large-col-5-5 { width: 100%; } .rs-column.-large-col-6-1 { width: 10.25641%; } .rs-column.-large-col-6-2 { width: 28.20513%; } .rs-column.-large-col-6-3 { width: 46.15385%; } .rs-column.-large-col-6-4 { width: 64.10256%; } .rs-column.-large-col-6-5 { width: 82.05128%; } .rs-column.-large-col-6-6 { width: 100%; } @media screen and (max-width: 900px) { .rs-column { margin-top: 7.69231%; margin-right: 7.69231%; } .rs-column.-large-first { clear: none; } .rs-column.-large-last { margin-right: 7.69231%; } .rs-column.-large-first-row { margin-top: 7.69231%; } .rs-column.-medium-first { clear: left; } .rs-column.-medium-last { margin-right: -5px; } .rs-column.-medium-first-row { margin-top: 0; } .rs-column.-medium-col-1-1 { width: 100%; } .rs-column.-medium-col-2-1 { width: 46.15385%; } .rs-column.-medium-col-2-2 { width: 100%; } .rs-column.-medium-col-3-1 { width: 28.20513%; } .rs-column.-medium-col-3-2 { width: 64.10256%; } .rs-column.-medium-col-3-3 { width: 100%; } .rs-column.-medium-col-4-1 { width: 19.23077%; } .rs-column.-medium-col-4-2 { width: 46.15385%; } .rs-column.-medium-col-4-3 { width: 73.07692%; } .rs-column.-medium-col-4-4 { width: 100%; } .rs-column.-medium-col-5-1 { width: 13.84615%; } .rs-column.-medium-col-5-2 { width: 35.38462%; } .rs-column.-medium-col-5-3 { width: 56.92308%; } .rs-column.-medium-col-5-4 { width: 78.46154%; } .rs-column.-medium-col-5-5 { width: 100%; } .rs-column.-medium-col-6-1 { width: 10.25641%; } .rs-column.-medium-col-6-2 { width: 28.20513%; } .rs-column.-medium-col-6-3 { width: 46.15385%; } .rs-column.-medium-col-6-4 { width: 64.10256%; } .rs-column.-medium-col-6-5 { width: 82.05128%; } .rs-column.-medium-col-6-6 { width: 100%; } } @media screen and (max-width: 599px) { .rs-column { margin-top: 7.69231%; margin-right: 7.69231%; } .rs-column.-large-last { margin-right: 7.69231%; } .rs-column.-large-first-row { margin-top: 7.69231%; } .rs-column.-medium-first { clear: none; } .rs-column.-medium-last { margin-right: 7.69231%; } .rs-column.-medium-first-row { margin-top: 7.69231%; } .rs-column.-small-first { clear: left; } .rs-column.-small-last { margin-right: -5px; } .rs-column.-small-first-row { margin-top: 0; } .rs-column.-small-col-1-1 { width: 100%; } .rs-column.-small-col-2-1 { width: 46.15385%; } .rs-column.-small-col-2-2 { width: 100%; } .rs-column.-small-col-3-1 { width: 28.20513%; } .rs-column.-small-col-3-2 { width: 64.10256%; } .rs-column.-small-col-3-3 { width: 100%; } .rs-column.-small-col-4-1 { width: 19.23077%; } .rs-column.-small-col-4-2 { width: 46.15385%; } .rs-column.-small-col-4-3 { width: 73.07692%; } .rs-column.-small-col-4-4 { width: 100%; } .rs-column.-small-col-5-1 { width: 13.84615%; } .rs-column.-small-col-5-2 { width: 35.38462%; } .rs-column.-small-col-5-3 { width: 56.92308%; } .rs-column.-small-col-5-4 { width: 78.46154%; } .rs-column.-small-col-5-5 { width: 100%; } .rs-column.-small-col-6-1 { width: 10.25641%; } .rs-column.-small-col-6-2 { width: 28.20513%; } .rs-column.-small-col-6-3 { width: 46.15385%; } .rs-column.-small-col-6-4 { width: 64.10256%; } .rs-column.-small-col-6-5 { width: 82.05128%; } .rs-column.-small-col-6-6 { width: 100%; } } table.sortable thead th{background-image:url(../../assets/tablesorter/images/default.svg);background-repeat:no-repeat;background-position:center right}table.sortable thead th.tablesorter-headerAsc{background-image:url(../../assets/tablesorter/images/asc.svg)}table.sortable thead th.tablesorter-headerDesc{background-image:url(../../assets/tablesorter/images/desc.svg)} #mbOverlay{position:fixed;z-index:9998;top:0;left:0;width:100%;height:150%;background-color:#000;cursor:pointer}#mbOverlay.mbOverlayOpaque{background:url(../../assets/mediabox/images/80.png)}#mbOverlay.mbOverlayAbsolute{position:absolute}#mbCenter,#mbOverlay.mbMobile{position:absolute;background-color:transparent}#mbBottom.mbMobile{line-height:24px;font-size:16px}#mbCenter{z-index:9999;left:50%;padding:10px;background-color:#000;-webkit-border-radius:10px;-khtml-border-radius:10px;-moz-border-radius:10px;border-radius:10px;filter:progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000');-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000')";-webkit-box-shadow:0 5px 20px rgba(0,0,0,.5);-khtml-box-shadow:0 5px 20px rgba(0,0,0,.5);-moz-box-shadow:0 5px 20px rgba(0,0,0,.5);box-shadow:0 5px 20px rgba(0,0,0,.5)}#mbCenter.mbLoading{background:#000 url(../../assets/mediabox/images/loading-dark.gif)no-repeat center;-webkit-box-shadow:none;-khtml-box-shadow:none;-moz-box-shadow:none;box-shadow:none}#mbBottom,#mbMedia{line-height:20px;font-size:12px;font-family:Myriad,Verdana,Arial,Helvetica,sans-serif;text-align:left}#mbMedia{position:relative;left:0;top:0;padding-right:20px;color:#fff;background-position:center center;background-repeat:no-repeat}#mbBottom{color:#999;min-height:20px;padding:10px 0 0}#mbTitle{font-weight:700}#mbCloseLink,#mbNextLink,#mbPrevLink,#mbTitle{display:inline;color:#fff}#mbCaption,#mbNumber{color:#999;font-size:.8em}#mbNumber{display:inline;margin:auto 10px}#mbCaption{display:block;line-height:1.6em}#mbCloseLink,#mbNextLink,#mbPrevLink{float:right;outline:0;margin:0 0 0 10px;font-weight:400}#mbCloseLink b,#mbNextLink b,#mbPrevLink b{color:#eee;font-weight:700;text-decoration:underline}#mbCloseLink big,#mbNextLink big,#mbPrevLink big{color:#eee;font-size:1.4em;font-weight:700}#mbBottom a,#mbBottom a:link,#mbBottom a:visited{text-decoration:none;color:#ddd}#mbBottom a:active,#mbBottom a:hover{text-decoration:underline;color:#fff}#mbError{position:relative;font-family:Myriad,Verdana,Arial,Helvetica,sans-serif;line-height:20px;font-size:12px;color:#fff;text-align:center;border:10px solid #700;padding:10px;margin:20px;-webkit-border-radius:5px;-khtml-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#mbError a,#mbError a:active,#mbError a:hover,#mbError a:link,#mbError a:visited{color:#d00;font-weight:700;text-decoration:underline} table.sortable thead th{background-image:url(../../assets/tablesort/images/default.svg);background-repeat:no-repeat;background-position:center right}table.sortable thead th a.pointer{display:block;margin-right:9px;cursor:pointer}table.sortable thead th.unsortable{background-image:none}table.sortable thead th.asc{background-image:url(../../assets/tablesort/images/asc.svg)}table.sortable thead th.desc{background-image:url(../../assets/tablesort/images/desc.svg)} .content-slider{overflow:hidden;visibility:hidden;position:relative}.slider-wrapper{overflow:hidden;position:relative}.slider-wrapper>*{float:left;width:100%;position:relative}.slider-control{height:30px;position:relative}.slider-control a,.slider-control .slider-menu{position:absolute;top:9px;display:inline-block}.slider-control .slider-prev{left:0}.slider-control .slider-next{right:0}.slider-control .slider-menu{top:0;width:50%;left:50%;margin-left:-25%;font-size:27px;text-align:center}.slider-control .slider-menu b{color:#bbb;cursor:pointer}.slider-control .slider-menu b.active{color:#666} /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : layout1_webfonts-montserrat.css Media : screen ErstDate: 17.07.2025 AendDate: 05.09.2025 16:06 Editor : Rapid CSS 2025 Vermerke: Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @media print, screen { /* Sourcecode: https://gwfh.mranftl.com/fonts/montserrat?subsets=latin */ /* in layout1_basis.css eintragen: Montserrat */ /* montserrat-300 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-300italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 300; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 400; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-500italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 500; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 600; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-600italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 600; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-600italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-700italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 700; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-800 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 800; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-800italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 800; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-900 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 900; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-900italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: italic; font-weight: 900; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-900italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat/montserrat-v30-latin-900italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } } /* @media print, screen */ /* EOF */ /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : layout1_webfonts-montserrat-alternates.css Media : screen ErstDate: 18.07.2025 AendDate: 18.07.2025 08:22 Editor : Rapid CSS 2025 Vermerke: Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @charset "utf-8"; @media print, screen { /* Sourcecode: https://gwfh.mranftl.com/fonts/montserrat-alternates?subsets=latin */ /* in layout1_basis.css eintragen: Montserrat Alternates */ /* montserrat-alternates-300 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat Alternates'; font-style: normal; font-weight: 300; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-alternates-300italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat Alternates'; font-style: italic; font-weight: 300; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-alternates-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat Alternates'; font-style: normal; font-weight: 400; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-alternates-italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat Alternates'; font-style: italic; font-weight: 400; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-alternates-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat Alternates'; font-style: normal; font-weight: 500; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-alternates-500italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat Alternates'; font-style: italic; font-weight: 500; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-alternates-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat Alternates'; font-style: normal; font-weight: 600; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-alternates-600italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat Alternates'; font-style: italic; font-weight: 600; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-600italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-alternates-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat Alternates'; font-style: normal; font-weight: 700; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-alternates-700italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat Alternates'; font-style: italic; font-weight: 700; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-alternates-800 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat Alternates'; font-style: normal; font-weight: 800; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-alternates-800italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat Alternates'; font-style: italic; font-weight: 800; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-alternates-900 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat Alternates'; font-style: normal; font-weight: 900; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* montserrat-alternates-900italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat Alternates'; font-style: italic; font-weight: 900; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-900italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/montserrat-alternates-v17-latin-900italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } } /* @media print, screen */ /* EOF */ /* ===================================================== Projekt : contao4_local2025 WebSite : contzao4.local Name : layout1_webfonts-open-sans.css Media : screen ErstDate: 12.07.2025 AendDate: 05.09.2025 15:55 Editor : Rapid CSS 2025 Vermerke: Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @media print, screen { /* Sourcecode: https://gwfh.mranftl.com/fonts/open-sans?subsets=latin */ /* in layout1_basis.css eintragen: Open Sans */ /* open-sans-300 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-300italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-regular 400 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-italic 400 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 500; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-500italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 500; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-600italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 600; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-600italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-700italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-800 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* open-sans-800italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 800; src: url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('../../files/contao5_bluepages2025/themes/theme1/fonts/open-sans/open-sans-v43-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } } /* @media print, screen */ /* EOF */ /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : layout1_basis.css Media : screen ErstDate: 06.06.2025 AendDate: 30.09.2025 22:04 Editor : Rapid CSS 2025 Vermerke: Übernahme von contao4_bluepages2021 und angepasst Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @media screen { /* Layoutbereich innerhalb von html */ html { overflow-y: scroll; scroll-behavior: smooth; } /* Open Sans oder Montserrat */ /* Fließtext innerhalb von body Standard-Schrift */ body { font-family: Montserrat, sans-serif; font-size: 100%; /* 100% 1.75em = 16px */ line-height: 1.75; font-weight: 400; color: #444444; background-color: #FFFFFF; } /* Fließtext innerhalb von body Fett */ body strong { font-weight: 600; } /* Fließtext innerhalb von body automatische Silbentrennung */ body p { hyphens: auto; } /* Box-Modell auf border-box umstellen */ *, *::before, *::after { box-sizing: border-box; } /* Textelemente - Vermeidung von Collapsing Margins */ h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote { margin-top: 0; } /* eigener Bereich logo-top Abmessungen, Abstände, Logo-Grafik einbinden */ #logo-top { width: 100%; max-width: 2000px; margin-left: auto; margin-right: auto; padding: 0; background-color: #0000CC; background-image:url("../../files/contao5_bluepages2025/themes/theme1/grafik/bluepages2021-logo2_1x150.png"); background-repeat: repeat-x; /*border: solid 1px #FF0000;*/ } /* Grafik-Logo mit Text "the-bluepages.de" */ img.logo-bluepages2021 { display:block; } /* Layout-Bereich wrapper (umschließendes Element nach nav-main) */ #wrapper { width: 100%; max-width: 2000px; /* 1920px acer Aspire 7 */ margin: 0; padding: 0; } /* Layoutbereich innerhalb von header */ #header { width: 100%; margin: 0; padding: 0; } /* Bild der Seite - Position display:block (Rand 0.5rem unten entfernen) */ #header .mod_pageimage img { display: block; } /* Layoutbereich innerhalb von container Abstände */ #container { margin: 0; } /***** Seitenspalten #lef, #right */ /* Layoutbereich innerhalb von aside#left */ #left .inside { margin: 0; padding: 0.5rem; font-size: 0.875em; /* 0.875em */ line-height: 1.5; font-weight: 400; } /* Layoutbereich innerhalb von aside rechts */ #right .inside { margin: 0; padding: 0.25rem; font-size: 1.0em; line-height: 1.5; font-weight: 400; } /* #main (rot) Standard Schriftgröße, Linienhöhe, Farben */ #main { min-height: 30rem;/* minimale Höhe von main festlegen */ font-size: 1.0em; /* Standard 16px */ line-height: 1.50; /* Standard für body 1.75 */ background-color: #FFFFFF; /*border: solid 1px #FF0000;*/ } /* #main .inside (blau) Bereich innerhalb von #main - Abstände .inside außen */ #main > .inside { margin: 1.0rem; /*border: solid 1px #0000FF;*/ } /****** Listen ****** */ /* alle Listen ul mit Symbol, margin links und unten */ ul { margin-bottom: 1.5em; margin-left: 1.5em; list-style-type: disc; } /* alle Listen ol mit Nummern, margin links und unten */ ol { margin-bottom: 1.5em; margin-left: 1.5em; list-style-type: decimal; } /* verschachtelte Listen ul, ol in der Navigation */ ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; list-style-type: circle; } } /* @media screen */ /* EOF */ /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : layout1_variablen.css Media : screen ErstDate: 25.08.2025 AendDate: 05.09.2025 15:26 Editor : Rapid CSS 2025 Vermerke: Info von ChatGBT 25.08.2025 Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @media screen { /***************** 1. Beispiel Variablen für Textboxen *********************/ /* ======================= 1. Variablen definieren ======================= */ :root { --color-textbox-bg: #e6f0ff; /* Hintergrundfarbe hellblau */ --color-textbox-border: #3366cc; /* Rahmen blau */ --color-textbox-text: #003366; /* Text dunkelblau */ --spacing-textbox: 1rem; /* Innenabstand */ --radius-textbox: 8px; /* abgerundete Ecken */ } /* ======================= 2. Textbox-Design ======================= */ .textbox { background-color: var(--color-textbox-bg); border: 2px solid var(--color-textbox-border); color: var(--color-textbox-text); padding: var(--spacing-textbox); border-radius: var(--radius-textbox); font-size: 1rem; line-height: 1.5; max-width: 800px; margin: 1rem 0; } /*************** 2.Beispiel mit Textboxen *******************/ /* ======================= 3. Varianten (optional) ======================= */ .textbox.info { --color-textbox-bg: #e6f0ff; --color-textbox-border: #3366cc; --color-textbox-text: #003366; } .textbox.success { --color-textbox-bg: #eaffea; --color-textbox-border: #339933; --color-textbox-text: #003300; } .textbox.error { --color-textbox-bg: #ffeaea; --color-textbox-border: #cc3333; --color-textbox-text: #660000; } /****************** 3. Beispiel mit globalen Variablen und einem lokalen Override in einem Container: *************/ /* 🌍 Globale Definition */ _:root { --main-color: #444444; /* #3366cc Standard: Blau */ --text-size: 1rem; /* Standard-Schriftgröße */ } /* Anwendung global */ _body { font-size: var(--text-size); color: var(--main-color); } /* 🔄 Überschreiben innerhalb eines Containers */ _.container-warning { --main-color: #cc0000; /* innerhalb dieses Containers wird Rot verwendet */ --text-size: 1.2rem; /* und die Schrift etwas größer */ } _.container-warning p { color: var(--main-color); /* greift jetzt auf das "rote" main-color zurück */ font-size: var(--text-size); } /* Zum Vergleich: anderer Container */ _.container-info { --main-color: #009966; /* Grün als Override */ } _.container-info p { color: var(--main-color); } } /* @media screen */ /*EOF*/ /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : layout1_inhalte.css Media : screen ErstDate: 06.06.2025 AendDate: 27.10.2025 14:37 Editor : Rapid CSS 2025 Vermerke: Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @media screen { /* Inhaltselemente #main h1 bis h6 Abstände, Zeilenhöhe, Schriftstärke */ #main h1, h2, h3, h4, h5, h6 { margin-top:1rem; margin-bottom:1rem; line-height:1.3; font-weight:600; } /* Inhaltselemente #main h1 */ #main h1 { font-size:1.728em; } /* Inhaltselemente #main h2 */ #main h2 { font-size:1.440em; } /* Inhaltselemente #main h3 */ #main h3 { font-size:1.200em; } /* Inhaltselemente #main h4 (100% = 16px) */ #main h4 { font-size:1.000em; } /* Inhaltselemente #main h5 (100% = 14px) */ #main h5 { font-size:0.875em; } /* Inhaltselemente #main h6 (100% = 12px) */ #main h6 { font-size:0.750em; } /* Inhaltselemente #main h1 - h6 Spezial bearb. 21.06.2025 */ /* Headline für Seitentitel - Rahmenlinie unten OK */ /* Achtung ändern in: h1.headline1_seitentitel-linie - dann alle Seiten mit H1 blau korrigieren */ #main h1.headline1_seitentitel-linie { padding-bottom: 0.5rem; /* 0.25rem */ margin-bottom: 1.5rem; /* Neu 22.05.2025 */ border-bottom: 0.15rem; /* 0.15rem */ border-bottom-style: solid; border-bottom-color: #000088; font-weight: 500; color: #000088; } /* Headline für Seitentitel Fotogalerie - Rahmenlinie unten OK */ #main h1.headline1_seitentitel-linie-ws { padding-bottom: 0.5rem; /* 0.25rem */ margin-bottom: 1.5rem; /* Neu 22.05.2025 */ margin-left: 1rem; margin-right: 1rem; border-bottom: 0.15rem; /* 0.15rem */ border-bottom-style: solid; border-bottom-color: #FFFFFF; font-weight: 500; color: #FFFFFF; } /* Inhaltselemente #main h2 - für Untertitel Typ 1, Schriftgröße wie H3 */ #main h2.headline2_subtitel1 { font-size: 1.200em; } /* Inhaltselemente #main ce_text mit h2 - für Untertitel Typ 2, Schriftgröße wie H3 */ #main .content-text.text_headline2_subtitel1 h2 { font-size: 1.200em; } /* Inhaltselemente #main h2 - für Untertitel Typ 2, Schriftgröße wie H4 */ #main h2.headline2_subtitel2 { font-size: 1.000em; } /* Inhaltselemente #main ce_text mit h2 - für Untertitel Typ 2, Schriftgröße wie H4 */ #main .content-text.text_headline2_subtitel2 h2 { font-size: 1.000em; } /* Inhaltselemente #main h3 - für Untertitel Typ 2, Schriftgröße wie H4 */ #main h3.headline3_subtitel3 { font-size: 1.000em; } /* Inhaltselemente #main ce_text mit h3 - für Untertitel Typ 2, Schriftgröße wie H4 */ #main .content-text.text_headline3_subtitel3 h3 { font-size: 1.000em; } /* Inhaltselemente #main h3 Spezial bearb. 21.06.2025 */ /* Neu 01.07.2025 */ #main h2.headline2_subtitel1-rot { font-size: 1.200em; color: #CC0000; } /* Headline für Artikelanfang - Rahmenlinie unten */ #main h3.headline_artikel-linie { padding-bottom: 0.25rem; border-bottom: 0.15rem; border-bottom-style: solid; border-bottom-color: #000088; font-weight:500; color: #000088; } /* Inhaltselemente #main h3 - für Untertitel Typ 1, Schriftgröße wie H4 */ #main h3.headline3_subtitel1 { font-size:1.000em; } /* H3 Impressum Seiteninfo Aufbau */ #main h3.headline3-rot { color: #CC0000; } /* H3 Startseite Home für interne Links Contao CMS */ #main h2.headline2-contao { padding: 0.5rem; color: #F47C01; border: solid 1px #F47C01; border-radius: 6px; } /* Inhaltselemente aside#left h1 - für Seitentitel Typ 2, Schriftgröße wie H3 */ /* Inhaltselemente Seitenspalte links, rechts h2 */ #left h2, #right h2 { margin-bottom:1.0rem; font-size:1.200rem; font-weight:500; line-height:1.3; } /************************** Styles für Inhaltselemente Text usw. **************************/ /* Inhaltselement Text, Absatz im Bereich #main Standard */ /* Absatz Text Abstände Vorgaben für font in basis.css */ #main p { margin-bottom:1.0rem; } /* neu 16.07.2025 */ /* Inhaltselement Text, Absatz im Bereich #main alternativ */ /* Webfont Montserrat */ #main .montserrat { font-family: Montserrat, sans-serif; } /* Webfont Montserrat Alternates */ #main .montserrat-alternates { font-family: Montserrat Alternates, sans-serif; } /* Webfont Open Sans */ #main .open-sans { font-family: Open Sans, sans-serif; } /* Inhaltselement Text im Bereich #main - Fließtext mit Abstand oben (1.0rem) */ #main .abstand-oben, #main .abstand-oben1 { margin-top:1.0rem; } /* Inhaltselement Text im Bereich #main - Fließtext mit Abstand oben (2.0rem) */ #main .abstand-oben2 { margin-top:2.0rem; } /* Inhaltselement Text im Bereich #main - Fließtext mit Abstand oben (3.0rem) */ #main .abstand-oben3 { margin-top:3.0rem; } /* Inhaltselement Text im Bereich #main - Fließtext mit Abstand oben (4.0rem) */ #main .abstand-oben4 { margin-top:4.0rem; } /* Inhaltselement Text im Bereich #main - Infotext 14px (.875em) */ #main .infotext14 { font-size:0.875em; } /* Inhaltselement Text im Bereich #main - Infotext 12px (.750em) */ #main .infotext12 { font-size:0.750em; } /* Fülltext weiß Neu 24.08.2025 */ #main .text-weiss { color: #FFFFFF; } /* Fülltext dunkelgrau Fotogalerie RS-Columns Neu 24.08.2025 */ #main .text-dgrau { color: #444444; } /*********** Info-Textbox Website inBearbeitung *********************/ #main .text-bearbeitung { margin: 0; margin-top: 2rem; margin-bottom: 2rem; padding-top: 3.0rem; padding-bottom: 0rem; padding-top: 0.5rem; line-height: 2.5; font-weight: 600; text-align: center; /*border: solid 1px #FF0000;*/ color: #FFFFFF; background-color: #0063C7; } /********************** Styles für Artikel *****************************/ /* Seiten-Artikel Hintergrund dunkel*/ #main .artikel-fotos { background-color: #444444; /* #444444 */ } /****************************** Sonstiges ******************************/ /* Zusätzlicher Header-Code */ .header-code { font-size: 1.0em; font-weight: 500; color: #FFCC00; text-align: center; background-color: #444444; } /* Zusätzlicher Footer-Code */ .footer-code { font-size: 1.0em; font-weight: 600; color: #FFCC00; text-align: center; background-color: #444444; } /* Textelemente Blindtext lang, Info Headline */ #main .blindtext-kurz h2, #main .blindtext-lang h2, #main .blindtext-info h2, #main .blindtext-spezial h2 { margin-top: 0; font-size: 1.2em; color: #000088; } /******************** Artikel Seiten-Symbole ***************************/ /* Layout-Bereich für Symbole */ .syndication { float: right; display: flow-root; /*border-style: solid; border-width: 1px; border-color: #DD0000;*/ } /* Symbole facebook, twitter-x, Print Position, Abstände */ a.facebook { float: right; margin-left: 1rem; } a.twitter { float: right; } a.print { float: right; margin-left: 1rem; } /**************** FAQ Contao - Layout-Anpassungen ******************/ /* Modul FAQ-Leser OK */ #main .mod_faqreader { padding: 0 1rem 1rem 1rem; background-color: #F8F8F8; border-style: none; border-radius: 6px; } /* Modul FAQ-Leser Headline Thema OK */ #main .mod_faqreader h1 { font-size: 1.2em; color: #000088; } /* Modul FAQ-Leser Headline Koomentare OK */ #main .mod_faqreader h6 { font-size: 1.0em; color: #000088; /* #000088 */ } /* Modul FAQ-Leser Fließtext OK */ #main .mod_faqreader .ce_text, #main .mod_faqreader .info, #main .mod_faqreader .ce_comments { color: #000000; /* #444444 Standard */ } /* Modul FAQ-Leser Hilfstext Form-Kommentar OK */ #main .mod_faqreader .help-text { font-size: 0.875em; font-weight: 400; color: #000000; } /****************************************/ /* Modul FAQ-Liste Übersicht OK */ #main .mod_faqlist { padding: 0 1rem 1rem 1rem; border-style: none; border-radius: 6px; background-color: #F8F8F8; } /* Modul FAQ-Liste Headline über Liste OK */ #main .mod_faqlist h2 { font-size: 1.2em; color: #000088; } /* Modul FAQ-Liste Liste OK */ #main .mod_faqlist ul { list-style-type: decimal; font-weight: 600; } /* Modul FAQ-Liste Hyperlinks OK */ #main .mod_faqlist li a { font-weight: 400; /* 400 = Standard */ margin-left: 0.25rem; } /* Modul FAQ-Seite alle Einträge OK */ #main .mod_faqpage { padding: 0 1rem 1rem 1rem; border-style: none; border-radius: 6px; background-color: #F8F8F8; } /* Modul FAQ-Seite Headline über Text OK */ #main .mod_faqpage h2 { font-size: 1.2em; color: #000088; } /***************** Newsletter - Layout-Anpassungen **********************/ /* Modul Newsletterliste */ .mod_newsletterlist { padding: 0 1rem 1rem 1rem; border-style: solid; border-width: 1px; border-color: #000088; border-radius: 6px; color: #000000; /* #444444 Standard */ background-color: #F8F8F8; } /* Modul Newsletterliste Liste ul */ .mod_newsletterlist ul { margin-top: 1.75rem; margin-bottom: 1.0rem; list-style: square; } /* Modul Newsletterliste Liste li */ .mod_newsletterlist li { margin-bottom: 1.0rem; } /* Seitenlayout für Fotogalerie Basics */ /* Seite - Artikel Fotogalerie Hintergrund dunkelgrau */ .artikel-galerie { padding-left: 1.5rem; margin-top: 1rem; padding-bottom: 1rem; color: #FFFFFF; /* Headlines, Linien, Text weiß */ background-color: #444444; /* #444444 */ } /* Seite - Artikel Fotogalerie Bild-Text weiß */ .artikel-galerie figcaption { color: #FFFFFF; } /* Fotogalerie Headline H1 weiß*/ h1.headline1-galerie-linie-ws { padding-bottom: 0.5rem; margin-bottom: 1.5rem; margin-right: 1.5rem; border-bottom: 0.15rem; border-bottom-style: solid; border-bottom-color: #FFFFFF; color: #FFFFFF; } /*********************** ab hier Event Kalender ************************/ /* Modul Kalender Container */ .mod_calendar { padding: 1.0rem 1.0rem 0.25rem 1.0rem; border-style: none; border-radius: 6px 6px 6px 6px; /*border-color: #444444;*/ background-color: #F4F4F4; } /* Modul Kalender Tabelle Layout, sichtbar machen */ table.calendar { width: 100%; /*border-style: solid; border-width: 1px; border-color: #000088;*/ background-color: #FFFFFF; } /* Modul Kalender Tabelle Hyperlinks */ table.calendar a { font-weight: 500; } /* Tabelle Kopfzeile Layout */ table.calendar thead { border-style: solid; border-width: 0 0 1px 0; /* linie unten */ border-color: #000088; background-color: #F4F4F4; } /* Tabelle Kopfzeile Spalten Abstände */ table.calendar th { padding-left: 0.5rem; padding-bottom: 0.25rem; font-size: 1.0em; font-weight: 600; color: #000088; } /* Tabelle Inhalt Spalten Abstände */ table.calendar td { padding: 0.5rem 0 0.5rem 0.5rem; } /*********************** ab hier Event Liste Menü ************************/ /* Modul Eventliste Menü Container */ .mod_eventmenu { padding: 0.5rem; border-style: solid; border-width: 0; border-radius: 6px 6px 6px 6px; border-color: #444444; background-color: #F4F4F4; } /* Hyperlinks für Listen */ ul.level_1, ul.level_2 { list-style: none; } /************************** Trennlinien **************************/ /* Trennlinien 0 bis 3 Layout*/ .trennlinie0, .trennlinie1, .trennlinie2, .trennlinie3 { border: 1 px 0 0 0; /* Linie oben */ border-style: dotted; border-color: #888888; } /* Trennlinie 0rem ohne Abstand unten, zwischen Text-Elementen - Standard */ .trennlinie0 { margin-bottom: 0; } /* Trennlinie 1rem Abstand unten, zwischen Text-Elementen - Optional*/ .trennlinie1 { margin-bottom: 1rem; } /* Trennlinie 2rem Abstand unten, zwischen Text-Elementen - Text mit Bilder */ .trennlinie2 { margin-bottom: 2rem; } /* Trennlinie 2rem Abstand unten, zwischen Text-Elementen - Text mit Bilder */ .trennlinie3 { margin-bottom: 3rem; } /*********************Inhaltselemnte Spezial **********************/ /* Inhaltselemente Text Spezial-Styles */ /* alle Inhalts-Elemente und Text horizontal zentrieren */ .element_container-center { text-align:center; } /* Alternative für zentrieren*/ .element_container_center { /*margin-right: auto; margin-left: auto; text-align: center;*/ } /****** Textelemente und Headlibes zentrieren *******/ /* Headlines H1 - H6 horizontal zentrieren */ .content-headline.text-center { text-align: center; } /* Inhaltstyp Text horizontal zentrieren Neu 20.08.2025 */ .content-text.text-center { text-align: center; } /* Absatz mit Rahmenlinien */ /* Absatz mit Rahmenlinie links */ .absatzrahmen-links { padding-left: 0.5rem; border-left: 6px solid #0000EE; } /* Absatz mit Rahmenlinie links und Hintergrundfarbe */ .absatzrahmen-links-background { margin-bottom: 0.75rem; padding-right: 0.5rem; padding-left: 0.5rem; color: #000000; background-color: #F8F8F8; border-left: 6px solid #FF9900; /* #DD0000 */ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /************************** Inhaltselemnt Video ****************************/ /* YouTube Videos */ .video-youtube { margin-bottom: 1rem; border-style: solid; border-width: 2px; border-color: #000088; border-radius: 6px; background-color: #000000; color: #FFFFFF; } .video-youtube h4 { padding-left: 1rem; color: #FFFFFF; } /* YouTube Videos für Fotogalerie */ .video-youtube-fg { margin-bottom: 1rem; border-style: solid; border-width: 2px; border-color: #FFFFFF; border-radius: 6px; background-color: #000000; color: #FFFFFF; } .video-youtube-fg h4 { padding-left: 1rem; color: #FFFFFF; } } /* @media screen */ /* EOF */ /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : layout1_hyperlinks.css Media : screen ErstDate: 06.06.2025 AendDate: 24.10.2025 10:58 Editor : Rapid CSS 2025 Vermerke: Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @media screen { /* Hyperlink Status inaktiv */ a { color: #0000FF; text-decoration: underline; } /* Hyperlink Status visited */ a:visited { color: #0000FF; } /* Links ohne Umrisslinien outline: none */ /* Hyperlink - Status TAB/Focus, hover */ a:focus, a:hover { color: #FF0000; outline: none; } /* Hyperlink Status aktiv */ a:active { color: #FF0000; outline: none; } /********** ab hier Hyperlinks für spezielle Layoutbereiche *************/ /* Hyperlink Logout-Abmelden Unterseiten Layout*/ .link-logout a { display: inline-block; margin-bottom: 1rem; padding:0.5rem 1rem; border-radius:4px; font-size:0.875em; font-weight:600; color: #FFFFFF; text-decoration:none; cursor:pointer; } /* Hyperlink Logout Abmelden Status inaktiv, visited */ .link-logout a, .link-logout a:visited { background-color:#000088; } /* Hyperlink Logout Abmelden Status TAB/focus, hover*/ .link-logout a:focus, .link-logout a:hover { background-color: #0000CC; } /* Hyperlink Button blau Status aktiv */ .link-logout a:active { background-color: #0000CC; } /* Hyperlink Button Neu 18.06.2025 */ /* Hyperlink Button rot - Layout Referenz Reihenfolge Status */ .link-rot a { display: inline-block; margin-bottom: 1rem; padding:0.5rem 1rem; border-radius:4px; font-size:0.875em; font-weight:600; color: #FFFFFF; text-decoration:none; cursor:pointer; } /* Hyperlink Button rot - Status inaktiv, visited */ .link-rot a, .link-rot a:visited { background-color: #DD0000; } /* Hyperlink Button rot- Status TAB/focus, hover */ .link-rot a:focus, .link-rot a:hover { background-color: #FF0033; } /* Hyperlink Button rot - Status aktiv */ .link-rot a:active { background-color: #FF0033; } /* Hyperlink Button blau - Layout */ .link-blau a { display: inline-block; margin-bottom: 1rem; padding:0.5rem 1rem; border-radius:4px; font-size:0.875em; font-weight:600; color: #FFFFFF; text-decoration:none; cursor:pointer; } /* Hyperlink Button blau - Status inaktiv, visited */ .link-blau a, .link-blau a:visited { background-color: #000088; } /* Hyperlink Button blau - Status TAB/focus, hover */ .link-blau a:focus, .link-blau a:hover { background-color: #0000CC; } /* Hyperlink Button blau - Status Seite aktiv */ .link-blau a:active { background-color: #0000CC; } /* Hyperlink Button grün - Layout */ .link-gruen a { display: inline-block; margin-bottom: 1rem; padding:0.5rem 1rem; border-radius:4px; font-size:0.875em; font-weight:600; color: #FFFFFF; text-decoration:none; cursor:pointer; } /* Hyperlink Button grün - Status inaktiv, visited */ .link-gruen a, .link-gruen a:visited { background-color: #009900; } /* Hyperlink Button grün Status TAB/focus, hover */ .link-gruen a:focus, .link-gruen a:hover { background-color: #00CC00; } .link-gruen a:active { background-color: #00CC00; } /* Hyperlink Button orange Layout */ .link-orange a, .link-orange-upload a { display: inline-block; margin-bottom: 1rem; padding:0.5rem 1rem; border-radius:4px; font-size:0.875em; font-weight:600; color: #FFFFFF; text-decoration:none; cursor:pointer; } /* Hyperlink Button grauschwarz - Layout */ .link-grauschwarz a { display: block; margin-bottom: 1rem; padding:0.75rem 1rem; border-radius: 4px; font-size: 1.0em; font-weight: 600; text-align: center; color: #FFFFFF; text-decoration: none; cursor: pointer; } /* Hyperlink Button grün - Status inaktiv, visited */ .link-grauschwarz a, .link-grauschwarz a:visited { background-color: #444444; } /* Hyperlink Button grün Status TAB/focus, hover */ .link-grauschwarz a:focus, .link-grauschwarz a:hover { background-color: #777777; } .link-grauschwarz a:active { background-color: #777777; } /* Hyperlink Button orange unter Formular Upload - Position */ .link-orange-upload { float: left; margin-right: 1rem; } /* Hyperlink Button orange Status inaktiv, visited */ .link-orange a, .link-orange a:visited, .link-orange-upload a, .link-orange-upload a:visited { background-color: #FF9900; } /* Hyperlink Button orange Status TAB/focus, hover */ .link-orange a:focus, .link-orange-upload a:focus, .link-orange a:hover, .link-orange-upload a:hover { background-color: #FFCC00; } .link-orange a:active, .link-orange-upload a:active { background-color: #FFCC00; } /* Hyperelink Button orange unter Formular Upload */ .form-upload { float: left; /*margin-left: 1rem;*/ margin-right: 1rem; } /********* Hyperlinks-Button contao academy ********/ /* Layout, Status inaktiv, visited */ .button-orange a { display: block; margin: 0.5rem 0 1.5rem 0; padding: 0.75rem 0.5rem 0.75rem 0.5rem; font-size: 1.0em; font-weight: 600; text-align: center; text-decoration: none; border: 0; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); transition: all 0.3s ease 0s; } /* Status inaktiv, visited */ .button-orange a, .button-orange a:visited { color: #FFFFFF; background-color: #F47C01; /* Contao orange #F47C01 */ } /* Status TAB/Focus hover */ .button-orange a:focus, .button-orange a:hover { background-color: #FF9900; } /* Button optional zentrieren */ .button-center { text-align: center; } /****************** NEU Ende ***********************/ /* wird ab hier für bluepages2025 aktuell nicht verwendet 18.06.2025 */ /* Linkbox für Hyperlinks intern - Basislayout alle Zustände */ #linkbox_unterseite a, #linkbox_unterseite a:visited, #linkbox_unterseite a:focus, #linkbox_unterseite a:hover, #linkbox_unterseite a:active { width:12.0rem; position:relative; display:inline-block; margin-bottom:2.0rem; padding:.25rem .25rem .25rem 1.0rem; text-align:center; border:1px solid #444444; border-radius:6px; } /* Linkbox für Hyperlinks intern - Hyperlink inaktiv */ #linkbox_unterseite a { background-color:#444444; text-decoration:none; color:#FFF; font-weight:500; } /* Linkbox für Hyperlinks intern - TAB/Focus, hover */ #linkbox_unterseite a:focus, #linkbox_unterseite a:hover { background-color:#DDDDDD; color:#F50; } /* Linkbox für Hyperlinks intern - Link aktiviert */ #linkbox_unterseite a:active { background-color:#AAA; color:#F50; } } /* @media screen */ /* EOF */ /* ===================================================== Projekt : contao5_bluepages2025-echt WebSite : the-bluepages.de Name : layout1_images.css Media : screen ErstDate: 20.08.2025 AendDate: 25.08.2025 12:42 Editor : Rapid CSS 2025 Vermerke: Übernahme von contao4_owainfo2019-neu Neusetup: StyleSheets überarbeitet und ergänzt Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @media screen { /********************** Inhaltselemnte Images und responsive Images Basics von chatgbt **********************/ /* Contao Responsive Bilder CSS Für saubere Skalierung und Layout */ /* Basis-Style für alle Bilder */ img { display: block; /* verhindert extra Leerraum unter dem Bild */ max-width: 100%; /* Bild passt sich responsiv max. der Containerbreite an */ height: auto; /* Seitenverhältnis bleibt erhalten */ vertical-align: middle; /* optional, für Inline-Kontexte */ border-style: none; /* Standard: keine Rahmen */ } /* Spezifische Klasse für Contao Bildgrößen (nach Bedarf anpassen) */ img.img--width-auto, /* Klasse wird in Contao-Bildgrößen verwendet */ img.contao-image, /* Contao n.v. */ img.responsive-image { /* Contao n.v. */ display: block; max-width: 100%; height: auto; } /* Container für Bilder (falls benötigt) */ figure.image_container, /* Contao n.v.*/ .contao-image-container { /* Contao n.v. */ max-width: 100%; overflow: hidden; text-align: center; /*Optional: zentriert Bilder, wenn kleiner als Container */ } /*********** Optional: Bilder in Links etwas interaktiv gestalten **************/ /* Wirkung im Bild der Seite sichtbar -> weich einblenden */ a img { transition: opacity 0.3s ease; /* 0.3s */ } /* Wirkung ?? */ a img:hover, a img:focus { opacity: 0.85; /* ?? */ outline: none; } /* Responsive Galerien oder mehrere Bilder nebeneinander */ /* selector wird noch nicht verwendet */ .image-gallery, .contao-gallery { display: flex; flex-wrap: wrap; gap: 1rem; } /* selector wird noch nicht verwendet */ .image-gallery img, .contao-gallery img { flex: 1 1 auto; max-width: 100%; height: auto; } /* Alternative Text sichtbar machen, wenn Bild nicht lädt */ img[alt]:not([alt=""]) { /* keine Styles nötig, Alt wird vom Browser gezeigt */ } /* Barrierefreiheit: Fokus sichtbar machen */ img:focus { outline: 2px solid #FF0000; outline-offset: 2px; } /* Für sehr große Bilder, die volle Breite einnehmen */ /* selector wird noch nicht verwendet */ .full-width-image { width: 100vw; /* volle Viewport-Breite */ margin-left: calc(-50vw + 50%); max-width: 100vw; height: auto; display: block; } /* Für Bilder mit fest definierter max-Höhe */ /* selector wird noch nicht verwendet */ .img-fixed-height { max-height: 400px; width: auto; height: auto; max-width: 100%; object-fit: contain; } /* Achtung: funktioniert nur, wenn JavaScript Lazy Loading - loaded-Klasse nach dem Laden hinzufügen im Seitenlayout hinzugefügt wird */ /* Lazy Loading verwenden: in Bildgrößen aktivieren */ img[loading="lazy"] { opacity: 0; transition: opacity 0.1s ease-in; } /* selector wird noch nicht verwendet */ img[loading="lazy"].loaded { opacity: 1; } /* Optional: Rahmen und Schatten für Hervorhebung */ /* selector wird noch nicht verwendet */ .img-highlight figure img{ border: 1px solid rgba(0, 0, 204, 1); box-shadow: 4px 4px 12px 0 #808080; border-radius: 6px; } /* Bilder ohne Abstand */ figure { margin: 0; /* Standard-Abstand entfernen */ } /* Bildtext Titel Abstände, Schrift, Ausrichtung Links ist Standardvorgabe! */ figcaption { margin-top: 0.5rem; /* Abstand zum Bild oben */ margin-bottom: 1.0rem; /* Abstand unten zum nächsten Inhatselement */ line-height: 1.0; font-size: 0.875em; font-weight: 400; color: #000000; /* schwarz besser lesbar bei 0.875em = 14px*/ } /* Verhindert, dass Bilder im Formular z.B. zu groß werden */ form img { max-width: 100%; height: auto; } /* Verhindert, dass Bilder beim Drucken zu groß sind */ @media print { img { max-width: 100%; height: auto; page-break-inside: avoid; } } /* Styles für Headerbild -> Bild der Seite Info von chatgbt am 28.07.2025 */ .mod_pageimage .image_container img { width: 100%; /* Bild füllt die Containerbreite */ height: auto; /* Höhe proportional */ display: block; /* Verhindert Lücken unter Bild */ max-width: 100%; /* Nicht größer als Container */ object-fit: contain; /* Optional: skaliert das Bild proportional */ } .mod_pageimage { /*width: 100vw;*/ /* Volle Viewport-Breite Fehler -> ragt rechts heraus */ overflow: hidden; /* Keine Scrollbars */ margin: 0; /* Optional: Rand entfernen */ padding: 0; /* Optional: Innenabstand entfernen */ } /********************** Inhaltselemnte Images und responsive Images Basics Ende **********************/ /********************* eigene Styles für Bilder - ACHTUNG: content-image, content-text -> Contao 5 !! *************************/ /* Elementtyp Bild horizontal zentrieren mit Flexbox 25.08.2025 */ .content-image.bild-center { display: flex; /* Macht den Container zu einem Flex-Container OK */ justify-content: center; /* Zentriert das Bild horizontal */ align-items: center; /* Zentriert das Bild vertikal */ } /* Elementtyp Bild - mit Rahmen Neu 19.08.2025 O.K. */ .content-image.bild-rahmen img { border-width: 1px; border-style: solid; border-color: #444444; } /* Elementtyp Text mit Bild - mit Rahmen Neu 19.08.2025 OK */ .content-text.bild-rahmen img { border-width: 1px; border-style: solid; border-color: #444444; } /* Elementtyp Bild - Ecken rund Neu 19.08.2025 O.K. */ .content-image.ecken-rund img { border-radius: 6px; } /* Elementtyp Text mit Bild - Ecken rund 19.08.2025 OK*/ .content-text.ecken-rund img { border-radius:6px; } /************ Bildunterschrift Text *****************/ /* Inhaltselemente Bildtext sichtbar machen */ .content-image figcaption { /*border: solid 1px #CC0000;*/ } /* Bild mit Bildtext zentriert */ .content-image.bild-text-center figure { display: inline-block; /* passt sich der Bildbreite an */ text-align: center; /* Beschriftung zentriert */ } /* Bild mit Bildtext Ausrichtung rechts*/ .content-image.bild-text-right figure { display: inline-block; /* passt sich der Bildbreite an */ text-align: right; /* Beschriftung rechtsbündig */ } /* Bild mit Bildtext Farbe weiß */ .content-image.bild-text-ws figcaption { color: #FFFFFF; /* wird in layout1_inhalte.css -> .artikel-galerie bereits als Standard gesetzt */ } /* Bild Abstand oben 1rem */ .content-image.bild-abstand-top { margin-top: 2rem; } /* Bild Abstand unten 1rem */ .content-image.bild-abstand-bottom { margin-bottom: 2rem; } /**************** eigene Styles für Icons SVG ****************/ /* SVG-Icons von pixabay */ /* Icon Haken grün => Contao CMS Text*/ img.icon-haken-gn { float: left; margin:0; margin-right: 0.25rem; height: 1.5em; width: 1.5em; /*border-style: solid; border-width: 1px; background-color: #FFFFFF;*/ } img.icon-house, img.icon-phone { float: left; margin-right: 0.25rem; height: 1.5em; width: 1.5em; /*border-style: solid; border-width: 1px; background-color: #FFFFFF;*/ } } /* @media screen */ /*EOF*/ /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : layout1_formular.css Media : screen ErstDate: 06.06.2025 AendDate: 02.11.2025 15:45 Editor : Rapid CSS 2025 Vermerke: xxx Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @charset "utf-8"; @media screen { /* gilt für alle Formulare Neu 19.06.2025 contao5_bluepages2025 */ /* Formular Basis-Styles - Layout Abmessungen, Rahmen, Hintergrund usw. OK */ form { width:100%; padding:1.0rem; border:1px solid #000088; border-radius:6px; background-color:#F4F4F4; } /* Label neben-oberhalb Textfeld - Position, Abstand, Schrift, Mauszeiger hover OK */ form label { display:block; margin-top:0.5rem; font-size:0.875em; font-weight:500; color: #000088; cursor:pointer; } /* Auswahlmenü Anrede - Abstände, Rahmen, Schrift OK */ form select.anrede { padding:0.15rem 0.25rem; border:2px solid #000088; border-radius:4px; font-size:0.875em; background-color: #F4F4F4; cursor:pointer; } /* Auswahlmenü Anrede Option - Hintergrundfarbe OK */ form select.anrede option { background-color: #FFFFFF; } /* Eingabefelder Abmessungen, Abstände, Rahmen, Schrift OK */ form input[type="text"], form input[type="email"], form input[type="tel"], form input[type="url"], form input[type="password"], form textarea { width:100%; padding:0.3rem; /* 0.25 */ border:1px solid; border-color: #AAAAAA; border-radius:4px; font-size:0.875em; outline:none; background-color: #FFFFFF; } /* Eingabefelder Hintergrundfarbe ändern - Status :focus, :hover OK */ form input[type="text"]:focus, form input[type="email"]:focus, form input[type="tel"]:focus, form input[type="url"]:focus, form input[type="password"]:focus, form textarea:focus, form input[type="text"]:hover, form input[type="email"]:hover, form input[type="tel"]:hover, form input[type="url"]:hover, form input[type="password"]:hover, form textarea:hover { outline: solid; outline-width: 1px; outline-color: #AAAAAA; } /* Formulartext - Erklärung OK */ form .erklaerung { font-size:0.875em; font-weight:600; color: #BB0000; } /* Formularfelder Hilfstext Schrift */ form .widget-text p.help { font-size: 0.875em; } /* Checkbox Set - Abstände OK */ form .checkbox_container { margin-top:0.5rem; /*margin-bottom:1.0rem;*/ } /* Checkbox Set - legend nur Style für Text OK */ form .checkbox_container legend { margin-bottom: 0.5rem; font-size:0.875em; font-weight:500; color: #000088; } /* Checkbox Set - Checkbox Position OK */ form .checkbox_container input.checkbox { position:relative; display:block; cursor:pointer; } /* Checkbox Set - Label Position, Abstände OK */ form .checkbox_container label { top:-1.25rem; position:relative; display:inline; margin-bottom:1rem; margin-left:1.25rem; font-size:0.875em; font-weight:400; color: #000088; cursor:pointer; } /* Checkbox Datenschutz - Zusatztext OK */ form .checkbox-zusatztext { margin-top: -0.875rem; margin-bottom: 0.875rem; position:relative; padding-left:0.5rem; background-color: #FFFFFF; border:1px solid #AAAAAA; border-radius:4px; font-size:0.875em; color: #000088; } /* Formular-Element ALCHA Antispam OK */ form .altcha { background-color: #FFFFFF; margin-bottom: 0.75rem; } /* Formular-Element ALCHA Antispam OK */ form .altcha-label label { top:-0.25rem; position: relative; font-weight: 500; } /* Button [Senden] Layout - Abmessungen, Abstände, Hintergrund, Rahmen usw. OK */ form .submit, input[type="submit"] { padding:0.5rem 0.75rem; border: hidden; border-radius:4px; font-size:0.875em; font-weight:600; color: #FFFFFF; background-color: #000088; cursor:pointer; outline:none; } /* Formular Upload Spezial Button */ form#upload .submit, input[type="submit"] { padding:0.5rem 0.75rem; border: hidden; border-radius:4px; font-size:0.875em; font-weight:600; color: #FFFFFF; background-color: #009900; cursor:pointer; outline:none; } /* Button [Senden] - Hintergrundfarbe ändern Status focus OK */ form#upload .submit:hover, input[type="submit"], form#upload .submit:focus, input[type="submit"] { background-color: #00CC00; } /* Ab hier Login Formulare */ /* ***************************************************** */ /* Modul Login Abstand oben Korrektur */ .mod_login { margin-top: -0.5rem; } /* Formular Login, Fehlermeldung Eingaben OK */ form#tl_login_20 .error { font-size:0.875em; /* Schriftgröße Fehler OK */ font-weight:500; color: #CC0000; } /* Formular Login Zwei-Faktor-Authentifizierung Korrektur Position*/ .widget:nth-child(7) label { margin-top: -0.20rem; color: #000088; } /* Formular Login Zwei-Faktor-Authentifizierung Button Abbruch */ .widget:nth-child(8) a{ margin-left: 0.5rem; } /* Formular Login Infotext angemeldet */ form#tl_logout_20 .login_info { font-size:0.875em; /* Schriftgröße Fehler OK */ font-weight:500; color: #000000; } /* *************************************************** */ /* Formular Login Label OK */ .mod_login form label { display:block; font-size: 0.875em; font-weight:500; color: #000088; cursor:pointer; } /* Formular Login, Registrierung Button [Anmelden] - zusätzliche Abstände OK */ .mod_login button.submit, .mod_lostPassword button.submit, .mod_registration button.submit, .mod_changePassword button.submit, .mod_personalData button.submit, .mod_closeAccount button.submit, input[type="submit"] { margin-top: 0.875rem; } /* Button [Senden] - Hintergrundfarbe ändern Status hover OK */ form .submit:hover, input[type="submit"] { background-color: #0000CC; } /* Button [Senden] - Hintergrundfarbe ändern Status focus OK */ form .submit:focus, input[type="submit"] { background-color: #009900; } /* Formular Login, Registrierung Button [Anmelden] Status focus- Hintergrundfarbe OK */ .mod_login form button.submit:focus, .mod_lostPassword button.submit:focus, .mod_registration button.submit:focus, .mod_changePassword button.submit:focus, .mod_personalData button.submit:focus, .mod_closeAccount button.submit:focus, input[type="submit"] { background-color: #0000FF; } /* Formular Login nach Anmeldung Abstand unten OK */ .mod_login, .mod_changePassword, .mod_personalData, .mod_closeAccount { margin-bottom: 1.0rem; } /* Formular Login, Link Passwort vergessen OK*/ .password-reset, .mod_login form, .login_info { margin-top: 0.5rem; } /* Formular Register, Personendaten Feldgruppe OK*/ .mod_registration legend, .mod_personalData legend { margin-top: 0.5rem; font-size:0.875em; font-weight:500; color: #000000; } /* ************ Formular Kontakt, Upload Betätigungsseite **********/ /* Formular Upload Zusätzliche Styles Neu ab 20.06.2025 */ /* Container Formular - Abstand unten für Button [Seite Mitglieder] */ /* Content Element Formular Abstände */ .ce_form { margin-bottom: 1rem; } /* Formular Upload Layout */ form#upload .upload { font-size: 0.875em; font-weight: 500; color: #000088; } /* Formular Upload Hinweise */ form#upload .form-help-message { margin-left: 0.5rem; font-size: 0.875em; font-weight: 500; color: #DD0000; } /* Tabelle Label Username Abstand oben */ form#upload label.mandatory { margin-top: 0.5rem; } /* Fineuploader Label-Text: Hinweise zum Upload */ form#upload .widget-fineuploader label.mandatory { margin-bottom: 0.75rem; } /* Tabelle Seite Kontakt, Upload Bestätigung - Container für Tabelle*/ .content-table.form-upload-ok { margin: 0; padding: 0; /*border: solid 1px #FF0000;*/ /*background-color: #FFFFCC;*/ } /* Tabelle Seite Kontakt, Upload Bestätigung - Tabelle OK */ .form-kontakt-ok table, .form-upload-ok table { width: 100%; margin: 0; margin-bottom: 1.5rem; /* Abstand zur Tabelle 2 nur fpr Test */ /*border: solid 1px #009900;*/ /*background-color:#F4F4F4;*/ } /* Tabelle Kopfzeile Layout */ .form-kontakt-ok table thead, .form-upload-ok table thead { border-block: solid 1px #444444; background-color: #444444; } /* Tabelle Kopfzeile */ .form-kontakt-ok table th, .form-upload-ok table th { padding: 0.5rem; font-weight: 600; color: #FFFFFF; /*border: solid 1px #FFFFFF;*/ } /*Tabelle 1 Upload Kopfzeile Spalte 0 */ .form-upload-ok table th.col_0 { width: 16%; } /*Tabelle 1 Upload Kopfzeile Spalte 1 */ .form-upload-ok table th.col_1 { width: 84%; } /*Tabelle 1 Zeilen, Zeilen, Spalten */ .form-kontakt-ok table tr, .form-upload-ok table tr, .form-kontakt-ok table td, .form-upload-ok table td { border: solid 1px #DDDDDD; } /* Tabelle 1 Seite Kontakt Bestätigung - Spalten */ .form-kontakt-ok table td, .form-upload-ok table td { padding: 0.5rem; } /* Tabelle 1 Spalte 0 Layout */ .form-kontakt-ok table td.col_0, .form-upload-ok table td.col_0 { font-weight: 600; background-color: #F4F4F4; } /* Tabelle 1 Spalte 1 Layout */ .form-kontakt-ok table td.col_1, .form-upload-ok table td.col_1 { background-color: #FFFFFF; } /* ************************* Twig-Template Test **************************/ /* Twig-Tabelle nur für Ausgabe der Upload-Dateien */ /* Twig-Tabelle 2 einzeilig Upload Dateien */ table.upload-confirm { width: 100%; margin: 0; margin-top: 1rem; margin-bottom: 0rem; /*border: solid 1px #009900;*/ } /* Twig-Tabelle 2 einzeilig Upload Dateien Spalten */ table.upload-confirm td { padding: 0.5rem; border: solid 1px #444444; } /* Twig-Tabelle 2 einzeilig Upload Dateien Spalte 0 */ table.upload-confirm td.col_0 { width: 25%; } /* Twig-Tabelle 2 einzeilig Upload Dateien Spalte 1 */ table.upload-confirm td.col_1 { width: 75%; } } /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : layout1_tabellen.css Media : screen ErstDate: 28.06.2025 AendDate: 09.07.2025 15:07 Editor : Rapid CSS 2025 Vermerke: Layout Fußzeile Neu dunkelgrau Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @charset "utf-8"; @media screen { /* Layoutbereich innerhalb von footer Abstände, Schrift */ #footer { display: flow-root; /* neu hinzu 03.07.2025 */ /*min-height: 14rem;*/ /* height nicht mehr erfoderlich! s. display:flow-root */ padding-bottom: 1rem; /* kleiner Abstand zum Seitenende */ background-color: #444444; } /* Styles Neu ab 03.07.2025 - nach Layout-Fehler in Fußzeile */ /* Footer Headlines H4 Spalten 1-4 Text */ .headline-footer1, .headline-footer2, .headline-footer3, .headline-footer4, .headline-footer5 { font-size: 0.875em; color: #FFFFFF; } /* Footer Headlines H4 Spalten 1-4 */ .headline-footer1, .headline-footer2, .headline-footer3, .headline-footer4, .headline-footer5 { margin-left: 0.25rem; /* 0.5rem */ } /********************** Footer RS-Spalten *************************/ /* RS-Spalten 0-4 sichtbar machen Inhalt */ .footer-rs-spalte0, .footer-rs-spalte1, .footer-rs-spalte2, .footer-rs-spalte3, .footer-rs-spalte4, .footer-rs-spalte5 { /*background-color: #999999;*/ } /* RS-Spalte 0 sichtbar machen Border */ .footer-rs-spalte0 { /*border-style: solid; border-width: 0px 1px 0px 1px; border-color: #FFFFFF; color: #FFFFFF;*/ } /* RS-Spalte 1 sichtbar machen Border */ .footer-rs-spalte1 { /*border-style: solid; border-width: 0px 1px 0px 1px; border-color: #FFFFFF;*/ } /* RS-Spalte 2 sichtbar machen Border */ .footer-rs-spalte2 { /*border-style: solid; border-width: 0px 1px 0px 1px; border-color: #FFFFFF;*/ } /* RS-Spalte 3 sichtbar machen Border */ .footer-rs-spalte3 { /*border-style: solid; border-width: 0px 1px 0px 1px; border-color: #FFFFFF;*/ } /* RS-Spalte 4 sichtbar machen Border */ .footer-rs-spalte4 { /*border-style: solid; border-width: 0px 1px 0px 1px; border-color: #FFFFFF;*/ } /* RS-Spalte 5 sichtbar machen Border */ .footer-rs-spalte5 { /*border-style: solid; border-width: 0px 1px 0px 1px; border-color: #FFFFFF;*/ } /* RS-Spalte 0 Hilfsspalte für Abstand links */ .footer-rs-spalte0 { max-width: 2.0rem; /*Korrektur für horizontale Zentrierung */ color: #444444; } } /* @media screen */ /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : layout1_tabellen.css Media : screen ErstDate: 06.06.2025 AendDate: 18.07.2025 23:14 Editor : Rapid CSS 2025 Vermerke: Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @charset "utf-8"; @media screen { /* Tabellen Styles Neu 28.06.2025 */ /********************* Tabelle Test **********************/ /* Container für Tabelle Test */ #test.content-table { /*border-style: solid; border-width: 1px; border-color: #FF0000;*/ /* background-color: #F8F8F8;*/ } /* Tabelle im Container Breite, Layout */ #test table.liste { width:100%; margin: 0px; /* alle Abstände reset */ border-style: solid; border-width: 1px; border-color: #000088; } /* Tabelle Kopfzeile Layout */ #test table.liste > thead { border-style: solid; border-width: 0 0 1px 0; /* unten */ border-color: #000088; background-color: #000088; } /* Tabelle Kopzzeile-Spalten Layout, Text */ #test table.liste th.spalte1, #test table.liste th.spalte2 { padding-left: 0.5rem; border-style: solid; border-width: 0 1px 0 0; /* rechts */ border-color: #000088; font-size: 1.0em; font-weight: 600; color: #FFFFFF; } /* Tabelle Kopfzeile Spalte 1 */ #test table.liste th.spalte1 { width: 20%; /* Breite für Spalte 1 */ } /* Tabelle Zeilen Layout */ #test table.liste tr { border-style: solid; border-width: 0 0 1px 0; /* unten */ border-color: #000088; } /* Tabelle Inhalt-Spalten Layout, Text */ #test table.liste td { padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.5rem; border-style: solid; border-width: 1px; border-color: #000088; font-size: 1.0em; } /********************* Tabelle tab_custom Twig-Templates Download Audio O.K. *****************/ /* Tabelle download-audio Container */ .content-table.download-audio { margin-bottom: 0rem; /*border: solid 1px #FF0000;*/ } /* Tabelle download-audio wrapper */ .content-table.download-audio .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; margin-bottom: 0rem; /* 1rem */ /*border: solid 1px #0033FF;*/ } /* Tabelle Download Audio Abmessungen, Layout */ .content-table.download-audio table.custom { width: 100%; margin: 0; /*border: solid 1px #FF0000;*/ /* Tabelle sichtbar machen */ color: #000000; } /* Tabelle Kopfzeile Layout */ .content-table.download-audio table.custom thead { background-color: #DDDDDD; border: solid 1px #DDDDDD; } /* Tabelle Kopfzeile Spalten Layout */ .content-table.download-audio table.custom th { padding: 0.5rem; font-size: 1.0em; font-weight: 500; } /* Tabelle Kopfzeilen-Spalte 1 */ .content-table.download-audio table.custom th.spalte1 { width: 35%; /* Breite Spalte links */ } /* Tabelle Kopfzeilen-Spalte 2 */ .content-table.download-audio table.custom th.spalte2 { width: 65%; /* Breite Spalte rechts */ } /* Tabelle Spalten Inhalt Layout */ .content-table.download-audio table.custom td { padding: 0.5rem 0.5rem 0rem 0.5rem; border: solid 1px #DDDDDD; color: #000000; background-color: #F9F9F9; } /********************* Test/Tabellen/tab_custom Twig-Templates ********************/ /* Tabelle Test 1 Container */ .content-table.test1 { margin-bottom: 4rem; /*border: solid 1px #FF0000;*/ } /* Tabelle Test 1 wrapper */ .content-table.test1 .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; margin-bottom: 0rem; /* 1rem */ /*border: solid 1px #0033FF;*/ } /* Tabelle Test 1Abmessungen, Layout */ .content-table.test1 table.custom { width: 100%; margin: 0; border: solid 1px #CCCCCC; color: #000000; } /* Tabelle Test 1 Zusammenfassung Layout caption fehlt im Twig-Template */ .content-table.test1 table.custom caption { /* padding: 0.5rem; font-size: 1.0em; font-weight: 500;*/ } /* Tabelle Kopfzeile Layout */ .content-table.test1 table.custom thead { background-color: #DDDDDD; } /* Tabelle Fußzeile Layout tfoot fehlt im Twig-Template */ .content-table.test1 table.custom tfoot { /* background-color: #F9F9F9;*/ } /* Tabelle Kopfzeile Spalten Layout */ .content-table.test1 table.custom th { padding: 0.5rem; font-size: 1.0em; font-weight: 500; } /* Tabelle Kopfzeilen-Spalte 1 */ .content-table.test1 table.custom th.spalte1 { width: 20%; /* 20% */ } /* Tabelle Kopfzeilen-Spalte 2 */ .content-table.test1 table.custom th.spalte2 { width: 80%; /* 80% */ } /* Tabelle Spalten Inhalt Layout */ .content-table.test1 table.custom td { padding: 0.5rem; border: solid 1px #CCCCCC; color: #000000; background-color: #F9F9F9; } /* Tabelle Test 2, Test 3 für mobile Geräte von chatgbt neu 13.07.2025 */ /* Container für Tabelle sichtbar machen HS */ .content-table.test2 { margin-bottom: 4em; /*border: solid 1px #FF0000;*/ } /* ab hier Code chatgbt */ .content-table.test2 .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; margin-bottom: 0rem; /* 1rem */ /*border: solid 1px #0033FF;*/ } /* Tabelle Layout, Abstände */ .content-table.test2 table.custom { width: 100%; border-collapse: collapse; min-width: 600px; /* Optional, je nach Layout */ margin: 0; /*border: solid 1px #009900;*/ } /* Tabelle Kopfspalten, Zellen Layout */ .content-table.test2 table.custom th, .content-table.test2 table.custom td { padding: 0.5rem; border: 1px solid #DDDDDD; text-align: left; } /* Tabelle Spalte 1 Layout (optionales Styling) */ .content-table.test2 table.custom th.spalte1, .content-table.test2 table.custom td.spalte1 { background-color: #F0F8FF; width: 20%; } /* Tabelle Spalte 2 Layout (optionales Styling) */ .content-table.test2 table.custom th.spalte2, .content-table.test2 table.custom td.spalte2 { background-color: #FAFAFA; width: 80%; } /* Container für Tabelle 3 sichtbar machen HS */ .content-table.test3 { margin-bottom: 4em; /* border: solid 1px #FF0000;*/ } /* ab hier Code chatgbt */ .content-table.test3 .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; margin-bottom: 0rem; /* 1rem */ /*border: solid 1px #0033FF;*/ } /* Tabelle Layout, Abstände */ .content-table.test3 table.custom { width: 100%; border-collapse: collapse; min-width: 600px; /* Optional, je nach Layout */ margin: 0; /*border: solid 1px #009900;*/ } /* Tabelle Kopfspalten, Zellen Layout */ .content-table.test3 table.custom th, .content-table.test3 table.custom td { padding: 0.5rem; border: 1px solid #DDDDDD; text-align: left; } /* Tabelle Spalte 1 Layout (optionales Styling) */ .content-table.test3 table.custom th.spalte1, .content-table.test3 table.custom td.spalte1 { background-color: #F0F8FF; width: 15%; } /* Tabelle Spalte 2 Layout (optionales Styling) */ .content-table.test3 table.custom th.spalte2, .content-table.test3 table.custom td.spalte2 { background-color: #FAFAFA; width:70%; } /* Tabelle Spalte 3 Layout (optionales Styling) */ .content-table.test3 table.custom th.spalte3, .content-table.test3 table.custom td.spalte3 { background-color: #FFFFCC; width: 15%; } /*********** Tabelle Projekte Webdesign ****************/ /* Container für Tabelle Projekte */ #projekte.content-table { /*border-style: solid; border-width: 1px; border-color: #FF0000;*/ background-color: #F8F8F8; } /* Tabelle im Container Breite, Layout */ #projekte table.liste { width:100%; margin: 0px; /* alle Abstände reset */ border-style: solid; border-width: 1px; border-color: #000088; } /* Tabelle Kopfzeile Layout */ #projekte table.liste > thead { border-style: solid; border-width: 0 0 1px 0; /* unten */ border-color: #000088; background-color: #000088; } /* Tabelle Kopzzeile-Spalten Layout, Text */ #projekte table.liste th.spalte1, #projekte table.liste th.spalte2 { padding-left: 0.5rem; border-style: solid; border-width: 0 1px 0 0; /* rechts */ border-color: #000088; font-size: 1.0em; font-weight: 600; color: #FFFFFF; } /* Tabelle Kopfzeile Spalte 1 */ #projekte table.liste th.spalte1 { width: 20%; /* Breite für Spalte 1 */ } /* Tabelle Zeilen Layout */ #projekte table.liste tr { border-style: solid; border-width: 0 0 1px 0; /* unten */ border-color: #000088; } /* Tabelle Inhalt-Spalten Layout, Text */ #projekte table.liste td { padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.5rem; border-style: solid; border-width: 1px; border-color: #000088; font-size: 1.0em; } /*********************************************************/ /********************* Tabelle Musik **********************/ /* Container für Tabelle Test */ #musik.content-table { /*border-style: solid; border-width: 1px; border-color: #FF0000;*/ background-color: #F8F8F8; } /* Tabelle im Container Breite, Layout */ #musik table.liste { width:100%; margin: 0px; /* alle Abstände reset */ border-style: solid; border-width: 1px; border-color: #000088; } /* Tabelle Kopfzeile Layout */ #musik table.liste > thead { border-style: solid; border-width: 0 0 1px 0; /* unten */ border-color: #000088; background-color: #000088; } /* Tabelle Kopzzeile-Spalten Layout, Text */ #musik table.liste th.spalte1, #musik table.liste th.spalte2 { padding-left: 0.5rem; border-style: solid; border-width: 0 1px 0 0; /* rechts */ border-color: #000088; font-size: 1.0em; font-weight: 600; color: #FFFFFF; } /* Tabelle Kopfzeile Spalte 1 */ #musik table.liste th.spalte1 { width: 20%; /* Breite für Spalte 1 */ } /* Tabelle Zeilen Layout */ #musik table.liste tr { border-style: solid; border-width: 0 0 1px 0; /* unten */ border-color: #000088; } /* Tabelle Inhalt-Spalten Layout, Text */ #musik table.liste td { padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.5rem; border-style: solid; border-width: 1px; border-color: #000088; font-size: 1.0em; } /*********************************************************/ /************ Tabelle Downloads neu 27.06.2025 **************/ /* Container für Tabelle Projekte */ #download.content-table { /*border-style: solid; border-width: 1px; border-color: #FF0000;*/ background-color: #F8F8F8; } /* Tabelle im Container Breite, Layout */ #download table.liste { width:100%; margin: 0px; /* alle Abstände reset */ border-style: solid; border-width: 1px; border-color: #000088; } /* Tabelle Kopfzeile Layout */ #download table.liste > thead { border-style: solid; border-width: 0 0 1px 0; /* unten */ border-color: #000088; background-color: #000088; } /* Tabelle Kopzzeile-Spalten Layout, Text */ #download table.liste th.spalte1, #download table.liste th.spalte2 { padding-left: 0.5rem; border-style: solid; border-width: 0 1px 0 0; /* rechts */ border-color: #000088; font-size: 0.875em; font-weight: 600; color: #FFFFFF; } /* Tabelle Kopfzeile Spalte 1 */ #download table.liste th.spalte1 { width: 22%; /* width: 24%;*/ /* Breite für Spalte 1 */ } /* Tabelle Zeilen Layout */ #download table.liste tr { border-style: solid; border-width: 0 0 1px 0; /* unten */ border-color: #000088; } /* Tabelle Inhalt-Spalten Layout, Text */ #download table.liste td { padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.5rem; border-style: solid; border-width: 1px; border-color: #000088; font-size: 0.875em; } /*********************************************************/ /**********Seite Kontakt Bestätigung Tabelle *************/ /* Container für Tabelle kontakt-ok */ #kontakt-ok.content-table { margin-top: 0.5rem; margin-bottom: 1rem; /*border-style: solid; border-width: 1px; border-color: #FF0000;*/ /*background-color: #F8F8F8;*/ } /* Tabelle im Container Breite, Layout */ #kontakt-ok table.liste { width:100%; margin: 0px; /* alle Abstände reset */ } /* Tabelle Kopfzeile Layout */ #kontakt-ok table.liste thead { border-style: solid; border-width: 0 0 1px 0; /* unten */ } /* Tabelle Kopzzeile-Spalten Layout, Text */ #kontakt-ok table.liste th.spalte1, #kontakt-ok table.liste th.spalte2 { padding-left: 0.5rem; font-size: 1.0em; font-weight: 600; color: #444444; } /* Tabelle Kopfzeile Spalte 1 */ #kontakt-ok table.liste th.spalte1 { width: 20%; /* width: 20%;*/ /* Breite für Spalte 1 */ border-style: solid; border-width: 0 1px 0 0; /* rechts */ } /* Tabelle Zeilen Layout - Letzte Zeile nur Rahmenlinie unten */ #kontakt-ok table.liste tr.letzte { border-style: solid; border-width: 0 0 1px 0; /* unten */ } /* Tabelle Inhalt-Spalten Layout, Text */ #kontakt-ok table.liste td { padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.5rem; font-size: 1.0em; color: #444444; } #kontakt-ok table.liste td.spalte_1 { border-style: solid; border-width: 0 1px 0 0; } /* border-color für alle Tabellenelemnte */ #kontakt-ok table.liste thead, #kontakt-ok table.liste th.spalte1, #kontakt-ok table.liste tr.letzte, #kontakt-ok table.liste td.spalte_1 { border-color: #AAAAAA; } #kontakt-ok.bild { margin-top: 2rem; } } /* @media screen */ /* EOF */ /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : layout1_rs-spalten.css Media : screen ErstDate: 02.07.2025 AendDate: 03.11.2025 11:40 Editor : Rapid CSS 2025 Vermerke: xxx Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @media screen { /* Rocksolid Spalten sichtbar machen */ .rs-spaltenumschlag, .rs-columns-wrapper { display: flow-root; margin-right: 1.5rem; /*margin-top: 5rem; padding-top: 0rem; padding-right: 1rem; padding-left: 1rem;*/ /*border-style: solid; border-width: 1px 1px 1px 1px; border-color: #FF0000;*/ /*background-color: #EEEEEE;*/ } .rs-spalte1 { /*margin-right: 3rem; padding-left: 1rem;*/ /*border-style: solid; border-width: 1px 1px 1px 1px; border-color: #CCCCCC*/; /*background-color: #FFFFCC;*/ } .rs-spalte2 { /*margin-right: 3rem; padding-left: 1rem; padding-right: 1rem;*/ /*border-style: solid; border-width: 1px 1px 1px 1px; border-color: #CCCCCC;*/ /*background-color: #FFFFCC;*/ } .rs-spalte3 { /*margin-right: 3rem; padding-left: 1rem; padding-right: 1rem;*/ /*border-style: solid; border-width: 1px 1px 1px 1px; border-color: #CCCCCC;*/ /*background-color: #FFFFCC;*/ } .rs-spalte4 { /*margin-right: 3rem; padding-left: 1rem; padding-right: 1rem;*/ /*border-style: solid; border-width: 1px 1px 1px 1px; border-color: #CCCCCC;*/ /*background-color: #FFFFCC;*/ } .rs-spalte5 { /*margin-right: 3rem; padding-left: 1rem; padding-right: 1rem;*/ /*border-style: solid; border-width: 1px 1px 1px 1px; border-color:*/ /*background-color: #FFFFCC;*/ } .rs-spalte6 { /*margin-right: 3rem; padding-left: 1rem; padding-right: 1rem;*/ /*border-style: solid; border-width: 1px 1px 1px 1px; border-color: #CCCCCC;*/ /*background-color: #FFFFCC;*/ } .rs-spaltentext { /*font-size: 0.875rem;*/ } .rs-bildtext { /*font-size: 0.875rem;*/ } /*************************** Neu ab 03.07.2025**************************/ .rs-columns-wrapper.gap-flex { display: flex; flex-wrap: nowrap; /* wrap geändert in nowrap = kein Spaltenumbruch */ margin-left: auto; margin-right: auto; --gap: 1rem; gap: var(--gap); } /* Varianten */ /* alte Werte Abstand-Varianten */ .rs-columns-wrapper.gap-flex.gap-none { --gap: 0rem; } /* 0rem Abstand ohne */ .rs-columns-wrapper.gap-flex.gap-xs { --gap: 1.0rem; } /* 0.5rem Abstand extra klein */ .rs-columns-wrapper.gap-flex.gap-small { --gap: 2.0rem; } /* 1.0rem Abstand klein */ .rs-columns-wrapper.gap-flex.gap-medium { --gap: 3.0rem; } /* 2.0rem Abstand mittel */ .rs-columns-wrapper.gap-flex.gap-large { --gap:4.0rem; } /* 3.0rem Abstand groß */ .rs-columns-wrapper.gap-flex.gap-xl { --gap: 5.0rem; } /* 4.0rem Abstand extra groß */ .rs-columns-wrapper.gap-flex.gap-xxl { --gap: 6.0rem; } /* 6.0rem Abstand super groß */ /* Spaltenbreite ohne Reduzierung um Gap */ .rs-columns-wrapper.gap-flex > .rs-column { flex: 1 1 33.3333%; max-width: 33.3333%; box-sizing: border-box; min-width: 0; margin: 0; padding: 0; } } /* @media screen */ /*EOF*/ /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : layout1_erweiterungen.css Media : screen ErstDate: 15.09.2025 AendDate: 03.11.2025 12:14 Editor : Rapid CSS 2025 Vermerke: Übernahme von contao5_2025-local Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @media screen { /* Erweiterung Hintergründe für Artikel von heart-bits */ /* The extension does not deliver any CSS! So the positioning has to be done manually (See example below) */ /* eigene Styles für Auswahl-Menü */ /* globale Variablen für alle Farben - außen, innen */ :root { --outside-bg-white: #FFFFFF; --outside-bg-l-gray: #E0E0E0; /* #F0F0F0 */ --outside-bg-m-gray: #AAAAAA; --outside-bg-d-gray: #909090; --outside-bg-black: #444444; --outside-bg-yellow: #FFFD00; --outside-bg-owa-yellow:#FFE600; --outside-bg-contao-orange: #F47C01; --outside-bg-blue: #007FFF; /* #1E90FF */ --outside-bg-pages-blue: #000088; --outside-bg-green: #009900; --outside-bg-l-red: #FF5555 ; --outside-bg-red: #BB0000; --outside-bg-owa-red: #990000; --inside-bg-white: #FFFFFF; --inside-bg-l-gray: #F8F8F8; /* #F4F4F4 */ --inside-bg-m-gray: #AAAAAA; --inside-bg-d-gray: #505050; --inside-bg-black: #222222; --inside-bg-yellow: #FFFFCC; --inside-bg-owa-yellow: #FFE600; --inside-bg-contao-orange: #F47C01; --inside-bg-blue: #CCE6FF; /*#0000FF */ --inside-bg-pages-blue: #000088; --inside-bg-green: #AAFF7F; /* #BDFFBD */ --inside-bg-l-red: #FF5555; --inside-bg-red: #BB0000; --inside-bg-owa-red: #990000; } /* mod_article Ecken-Radius */ .mod_article.radius { border-radius: 8px; /*border: solid 1px #FF0000;*/ } /**** Hintergrundfarben, außen ***/ /* weiß */ .mod_article.bg-white { background-color: var(--outside-bg-white); } /* hellgrau */ .mod_article.bg-light-gray { background-color: var(--outside-bg-l-gray); } /* mittelgrau */ .mod_article.bg-middle-gray { background-color: var(--outside-bg-m-gray); } /* dunkelgrau */ .mod_article.bg-dark-gray { background-color: var(--outside-bg-d-gray); } /* schwarz */ .mod_article.bg-black { background-color: var(--outside-bg-black); } /* gelb */ .mod_article.bg-yellow { background-color: var(--outside-bg-yellow); } /* owa-gelb */ .mod_article.bg-owa-yellow { background-color: var(--outside-bg-owa-yellow); } /* Contao orange */ .mod_article.bg-contao-orange { background-color: var(--outside-bg-contao-orange); } /* blau */ .mod_article.bg-pages-blue { background-color: var(--outside-bg-pages-blue); } /* blau */ .mod_article.bg-blue { background-color: var(--outside-bg-blue); } /* grün */ .mod_article.bg-green { background-color: var(--outside-bg-green); } /* hellrot */ .mod_article.bg-l-red { background-color: var(--outside-bg-l-red); } /* rot */ .mod_article.bg-red { background-color: var(--outside-bg-red); } /* rot */ .mod_article.bg-owa-red { background-color: var(--outside-bg-owa-red); } /**** Hintergrundfarben innen ****/ /* Farben einzeln */ /* weiß */ .mod_article .inside.bg-white { background-color: var(--inside-bg-white); } /* hellgrau */ .mod_article .inside.bg-light-gray { color: #000000; background-color: var(--inside-bg-l-gray); } /* dunkelgrau */ .mod_article .inside.bg-dark-gray { color: #FFFFFF; background-color: var(--inside-bg-d-gray); } /* mittelgrau */ .mod_article .inside.bg-middle-gray { color: #FFFFFF; background-color: var(--inside-bg-m-gray); } /* schwarz */ .mod_article .inside.bg-black { color: #FFFFFF; background-color: var(--inside-bg-black); } /* gelb */ .mod_article .inside.bg-yellow { color: #000000; background-color: var(--inside-bg-yellow); } /* owa-gelb */ .mod_article .inside.bg-owa-yellow { color: #000000; background-color: var(--inside-bg-owa-yellow); } /* Contao orange */ .mod_article .inside.bg-contao-orange { color: #000000; background-color: var(--inside-bg-contao-orange); } /* blau */ .mod_article .inside.bg-blue { color: #000000; background-color: var(--inside-bg-blue); } /* pages-blau */ .mod_article .inside.bg-pages-blue { color: #000000; background-color: var(--inside-bg-pages-blue); } /* grün */ .mod_article .inside.bg-green { color: #000000; background-color: var(--inside-bg-green); } /* hellrot */ .mod_article .inside.bg-l-red { color: #FFFFFF; background-color: var(--inside-bg-l-red); } /* rot */ .mod_article .inside.bg-red { color: #FFFFFF; background-color: var(--inside-bg-red); } /* owa-rot */ .mod_article .inside.bg-owa-red { color: #FFFFFF; background-color: var(--inside-bg-owa-red); } /* Artikel innen - Abstände alle */ .mod_article .inside.bg-white, .mod_article .inside.bg-light-gray, .mod_article .inside.bg-middle-gray, .mod_article .inside.bg-dark-gray, .mod_article .inside.bg-black, .mod_article .inside.bg-yellow, .mod_article .inside.bg-owa-yellow, .mod_article .inside.bg-contao-orange, .mod_article .inside.bg-blue, .mod_article .inside.bg-pages-blue, .mod_article .inside.bg-green, .mod_article .inside.bg-l-red, .mod_article .inside.bg-red, .mod_article .inside.bg-owa-red { margin: 1.0rem; padding-left: 1.0rem; padding-right: 1.0rem; padding-bottom: 0.125rem; border-radius: 4px; } /* Artikel innen - Inhalts-Element Text Abstände alle */ .mod_article .inside.bg-white .content-text, .mod_article .inside.bg-light-gray .content-text, .mod_article .inside.bg-middle-gray .content-text, .mod_article .inside.bg-dark-gray .content-text, .mod_article .inside.bg-black .content-text, .mod_article .inside.bg-yellow .content-text, .mod_article .inside.bg-owa-yellow .content-text, .mod_article .inside.bg-contao-orange .content-text, .mod_article .inside.bg-blue .content-text, .mod_article .inside.bg-pages-blue .content-text, .mod_article .inside.bg-green .content-text, .mod_article .inside.bg-l-red .content-text, .mod_article .inside.bg-red .content-text, .mod_article .inside.bg-owa-red .content-text { /*padding: 0 1.0rem 0 0rem;*/ } /* Artikel innen - Inhaltselement Text -> H2 Abstände alle */ .mod_article .inside.bg-white .content-text h2, .mod_article .inside.bg-light-gray .content-text h2, .mod_article .inside.bg-middle-gray .content-text h2, .mod_article .inside.bg-dark-gray .content-text h2, .mod_article .inside.bg-black .content-text h2, .mod_article .inside.bg-yellow .content-text h2, .mod_article .inside.bg-owa-yellow .content-text h2, .mod_article .inside.bg-contao-orange .content-text h2, .mod_article .inside.bg-blue .content-text h2, .mod_article .inside.bg-pages-blue .content-text h2, .mod_article .inside.bg-green .content-text h2, .mod_article .inside.bg-l-red .content-text h2, .mod_article .inside.bg-red .content-text h2, .mod_article .inside.bg-owa-red .content-text h2{ padding-top: 1.0rem; } /* Artikel innen - Inhaltselement Text -> Text Abstände alle */ .mod_article .inside.bg-white .content-text .rte, .mod_article .inside.bg-light-gray .content-text .rte, .mod_article .inside.bg-middle-gray .content-text .rte, .mod_article .inside.bg-dark-gray .content-text .rte, .mod_article .inside.bg-black .content-text .rte, .mod_article .inside.bg-yellow .content-text .rte, .mod_article .inside.bg-owa-yellow .content-text .rte, .mod_article .inside.bg-contao-orange .content-text .rte, .mod_article .inside.bg-blue .content-text .rte, .mod_article .inside.bg-pages-blue .content-text .rte, .mod_article .inside.bg-green .content-text .rte, .mod_article .inside.bg-l-red .content-text .rte, .mod_article .inside.bg-red .content-text .rte, .mod_article .inside.bg-owa-red .content-text .rte { /* padding-bottom: 0.125rem;*/ /* 0.125rem */ /*border: solid 1px #FFFFFF;*/ } /***** Hintergrund Art - noch deaktiviert!! ******/ /*** hell - Konbination außen und innen ***/ /* außen */ _.mod_article.bg-light { background-color: #BBBBBB; } /* innen - margin = Breite Rahmen */ _.mod_article.bg-light .inside { margin: 1.0rem; color: #000000; background-color: #FFFFFF; } /* innen - Inhalts-Element Text Abstände */ _.mod_article.bg-light .content-text, _.mod_article.bg-dark .content-text { padding: 0 1rem 0 1rem; } /* innen - Inhaltselement Text -> H2 Abstände */ _.mod_article.bg-light .content-text h2, _.mod_article.bg-dark .content-text h2 { padding-top: 0.5rem; } /* innen - Inhaltselement Text -> Text Abstände */ _.mod_article.bg-light .content-text .rte, _.mod_article.bg-dark .content-text .rte { padding-bottom: 0.125rem; } /*** dunkel - Konbination außen und innen ***/ /* außen */ _.mod_article.bg-dark { background-color: #444444; } /* innen - margin = Breite Rahmen */ _.mod_article.bg-dark .inside { margin: 1.0rem; color: #000000; background-color: #FBFBFB; } /******** Styles für Bilder einbinden *******/ .mod_article { position: relative; } .mod_article > .article-image { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden } .mod_article > .inside { position: relative; z-index: 3; } .mod_article > .article-image.float-right { left: auto; right: 0; width: 50% } .mod_article > .article-image.float-left { left: 0; width: 50% } .mod_article > .article-image .image_container, .mod_article > .article-image picture { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .mod_article > .article-image .image_container img, .mod_article > .article-image .picture img { position: absolute; top: 50%; left: 50%; max-width: none; min-width: 100%; min-height: 100%; width: auto; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } /******** Erweiterung Gallery Creator für Fotogalerie ********/ /* Gallery Seite Übersicht Container für Bild und Info-Text */ .content-gallery-creator { display: inline-block; margin-right: 3rem; margin-bottom: 2rem; /*border: solid 1px #FF0000;*/ } /* Fotogalerie Übersicht RS-Spalten - 3 Spalten */ .fotogalerie-uebersicht { margin-right: 0rem; /*border: solid 1px #FF0000;*/ } /* Gallery Seite Übersicht Sub-Headline */ .content-gallery-creator h2 { padding-bottom: 0.5rem; margin-bottom: 1.5rem; font-size:1.440em; font-weight: 600; color: #FFFFFF; } /* Galerie Hyperlinks */ #galerie-creator a, #galerie-creator a:visited { display:block; color: #FFFFFF; } /* Galerie Hyperlinks Status TAB/focus, hover OK */ #galerie-creator a:focus, #galerie-creator a:hover { text-decoration:underline; color: #FF9900; } /* Galerie Hyperlinks Status Seite aktiv OK */ #galerie-creator a:active, #galerie-creator a:active { color: #FFCC00; } /* Galerie Container OK */ #galerie-creator .gc-album-list-view { margin: 0; padding: 0; } /* Galerie Übersicht Liste für Vorschaubild, Beschreibung OK */ #galerie-creator ul.gc-album-list { margin: 0; padding: 0; } /* Galerie Übersicht Listen-Container für Vorschaubild, Beschreibung OK */ #galerie-creator li.gc-album-list-item { float: left; margin-right: 1.5rem; margin-bottom: 1.5rem; list-style: none; } /* Galerie Einzelfotos Liste */ #galerie-creator .gc-breadcrumb-nav li { float: left; list-style: none; } /* Galerie Einzelfotos Link zur Fotogalerie, zurück OK */ #galerie-creator .gc-breadcrumb-nav a, #galerie-creator .gc-breadcrumb-nav a:visited, #galerie-creator .gc-album-detail-back-link a { font-weight: 600; } /* Galerie Einzelfotos Aktive Galerie */ #galerie-creator li.active { display: none; /*font-size: 0.875em;*/ /*font-weight: 600;*/ /*color: #FF9900;*/ } #galerie-creator .gc-album-detail-date { margin-bottom: 0.5rem; font-weight: 600; /*border: solid 1px #FF0000*/ } #galerie-creator .gc-album-detail-location { margin-bottom: 1.5rem; font-weight: 600; } #galerie-creator .gc-album-detail-caption { margin: 0.5rem 1.75rem 0 0; /*border: solid 1px #FF0000*/ } #galerie-creator .gc-album-detail-caption p { /*line-height: 1.25;*/ /*border: solid 1px #FF0000;*/ } /* Galerie Einzelfotos Liste */ #galerie-creator ul.gc-album-detail-picture-list { margin: 0; padding: 0; } /* Galerie Einzelfotos Liste Abstände rechts, oben */ #galerie-creator li.gc-album-detail-picture-list-item { display: inline-block; margin-right: 1.45rem; margin-top: 1.25rem; list-style: none; /*border: solid 1px #FF0000;*/ } #galerie-creator li.gc-album-detail-picture-list-item img { border-style: none; border-width: 0px; border-radius: 4px; } /************ Copyright-Liste **************/ /* Modul Copyright-Liste sichtbar nachen */ .mod_image_copyright_list { margin-bottom: 1rem; padding: 0 0 0 1.0rem; /* padding links */ border-style: solid; border-width: 1px; border-radius: 6px 6px 6px 6px; border-color: #000088; background-color: #F4F4F4; } /* Modul Copyright-Liste Headline 2 */ #main .mod_image_copyright_list h2 { font-size: 1.0em; } /* copyright Bild */ img.copyright-image { margin-bottom: 0.5rem; } /* copyright Text */ p.copyright-text { margin-right: 0rem; } /* Linktext */ p.copyright-text a { font-size: 0.875em; } /****** Visitors Besucherzähler Übernahme von contao4_owainfo2021-neu ******/ /* Modul Besucherzähler */ .mod_visitors { margin: 5.5rem 0 0 0; border: solid 1px #000088; font-size: 0.875em; /*border: solid 1px #FF0000;*/ } /* Modul H3 owainfo.de */ .mod_visitors h3 { margin: 0.5rem 0 0.5rem 0.5rem; font-size: 1.0em; color: #000088; } /* Text: Besucherzähler */ .mod_visitors .visitor_name { margin: 0 0.5rem 0.25rem 0.5rem; padding-bottom: 0.125rem; font-weight: 600; color: #000088; border-bottom: 1px solid #00088; } /* Text: Online */ .mod_visitors .visitor_useronline { margin: 0 0.5rem 0 0.5rem; padding: 0 0.25rem 0 0.25rem; font-weight: 400; } /* Text: Besucher heute */ .mod_visitors .visitor_visitstoday { margin: 0.25rem 0.5rem 0 0.5rem; padding: 0 0.25rem 0 0.25rem; font-weight: 400; } /* Text: Besucher heute */ .mod_visitors .visitor_visitstotal { margin: 0.25rem 0.5rem 0 0.5rem; padding: 0 0.25rem 0 0.25rem; font-weight: 500; color: #000088; } /* Text: Besucher gesamt */ .mod_visitors .visitor_visitstotal #TotalVisitCountLegend { float: left; } /* Text: Besucher gesamt - Wert*/ .mod_visitors .visitor_visitstotal #TotalVisitCount { text-align: right; } .mod_visitors .visitor_count { width:0; height:0; } .mod_visitors .visitor_name #VisitorsNameLegend { float: left; } .mod_visitors .visitor_name #VisitorsName { text-align: left; } .mod_visitors .visitor_useronline #VisitorsOnlineCountLegend { float: left; } .mod_visitors .visitor_useronline #VisitorsOnlineCount { text-align: right; } .mod_visitors .visitor_visitstoday #TodayVisitCountLegend { float: left; } .mod_visitors .visitor_visitstoday #TodayVisitCount { text-align: right; } .mod_visitors .visitor_hitstoday { margin: 0px 10px 0px 10px; } .mod_visitors .visitor_hitstoday #TodayHitCountLegend { float: left; } .mod_visitors .visitor_hitstoday #TodayHitCount { text-align: right; } .mod_visitors .visitor_visitsyesterday { margin: 0px 10px 0px 10px; } .mod_visitors .visitor_visitsyesterday #YesterdayVisitCountLegend { float: left; } .mod_visitors .visitor_visitsyesterday #YesterdayVisitCount { text-align: right; } .mod_visitors .visitor_hitsyesterday { margin: 0px 10px 0px 10px; } .mod_visitors .visitor_hitsyesterday #YesterdayHitCountLegend { float: left; } .mod_visitors .visitor_hitsyesterday #YesterdayHitCount { text-align: right; } .mod_visitors .visitor_hitstotal { margin: 0px 10px 0px 10px; } .mod_visitors .visitor_hitstotal #TotalHitCountLegend { float: left; } .mod_visitors .visitor_hitstotal #TotalHitCount { text-align: right; } .mod_visitors .visitor_average { margin: 0px 10px 0px 10px; } .mod_visitors .visitor_average #AverageVisitsLegend { float: left; } .mod_visitors .visitor_average #AverageVisits { text-align: right; } .mod_visitors .visitor_pagehits { margin: 0px 10px 0px 10px; } .mod_visitors .visitor_pagehits #PageHitCountLegend { float: left; } .mod_visitors .visitor_pagehits #PageHitCount { text-align: right; } /* Text: Zählung seit: 21.05.2018 */ .mod_visitors .visitor_countsince { margin: 0.25rem 0.5rem 0.75rem 0.5rem; /* 6px 10px */ padding: 0 0.25rem 0 0.25rem; font-size: 0.825em; font-weight: 600; } .mod_visitors .visitor_countsince #VisitorsStartDateLegend { float: left; } .mod_visitors .visitor_countsince #VisitorsStartDate { text-align: right; } /****** Erweiterung Rock Solid Custom Elements ab 02.10.2025 *****/ /***** rsce_boxes Container ****/ section.ce_rsce_boxes { /*border: solid 1px #FF0000;*/ } .ce_rsce_boxes h2 { padding: 0.25rem 1.0rem 0.25rem 1.0rem; color: #FFFFFF; background-color: #444444; /*border: solid 1px #FF0000;*/ } .ce_rsce_boxes section.box { margin: 0 0 1.0rem 0; padding: 0.25rem 1.0rem 0.25rem 1.0rem; background-color: #CCE6FF; /*border: solid 1px #FF0000;*/ } /**** rsce_icon_boxes mit Icon-Picker ******/ @font-face { font-family: "RockSolid Icons"; src: url("../../files/contao5_bluepages2025/themes/theme1/fonts/rocksolid/rocksolid-icons.woff2") format('woff2'); } *[data-icon]:before { content: attr(data-icon); font: 1.5em/1 "RockSolid Icons"; /*border: solid 1px #FF0000;*/ } /*Mrsce_icon_boxes Container */ section.ce_rsce_icon_boxes { /*border: solid 1px #FF0000;*/ } .ce_rsce_icon_boxes h2 { margin: 0; padding: 0 1.0rem 0.25rem 1.0rem; color: #FFFFFF; background-color: #FF6600; /*border: solid 1px #FF0000;*/ } .ce_rsce_icon_boxes section.box { margin: 0 0 1.0rem 0; padding: 0.25rem 1.0rem 0.25rem 1.0rem; background-color: #FFFF99; /*border: solid 1px #FF0000;*/ } .ce_rsce_icon_boxes section.box p { margin: 0.5rem 0 0 0; /*border: solid 1px #FF0000;*/ } } /* @media screen */ /*EOF*/ /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : layout1_test.css Media : screen ErstDate: 06.06.2025 AendDate: 12.09.2025 22:20 Editor : Rapid CSS 2025 Vermerke: Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @media screen { /* 12.09.2025 Test Anpasung dca tl_content.php und Twig-Tempalte HTML in Headlines zulassen */ .test-dca { color: #0000FF; /*border: solid 1px #FF0000;*/ } /* Test Stylesheets Neu contao5_bluepages2025 */ #test-custom { /*width: 2000px; height: 150px; border-style: solid; border-width: 1px; background-color: #0000CC; background-image:url("../../files/contao5_bluepages2025/themes/theme1/grafik/bluepages2021-logo2_1x150.png");*/ } /* ************************ Test Images Start ***************************/ /* RockSolid-Slider Test */ .mod_rocksolid_slider.rs-slider-test { /*border-style: ridge; border-width: 4px; border-color: #DDDDDD; background-color: #888888; padding:0.25rem; margin-left: auto; margin-right: auto;*/ } /****************************** SVG Icons *******************************/ /* test/images/images-svg SVG-Symbol */ .svg-symbole { width: 200px; /*200x50*/ height: 50px; background-image: url("../../files/contao5_bluepages2025/themes/theme1/icons/sprite.svg"); background-size: contain; background-repeat: no-repeat; } /* ../icons/sprite.svg */ #svg-container { background-image: url("../../files/contao5_bluepages2025/themes/theme1/icons/sprite.svg"); } /* SVG-Bildateien einbinden Test */ .svg-symbol { width: 50px; height: 50px; background-image: url("../../files/contao5_bluepages2025/themes/theme1/icons/info--blue.svg"); /* 24x24px */ background-size: contain; background-repeat: no-repeat; } /* SVG-Sprite einbinden Test */ .icon { display: inline-block; width: 50px; height: 50px; background-image: url(../../files/contao5_bluepages2025/themes/theme1/icons/sprite.svg); background-repeat: no-repeat; background-size: 200px 50px; /* Gesamtgröße des Sprites */ } .icon.info { background-position: 0 0; } .icon.warning { background-position: -50px 0; } .icon.check { background-position: -100px 0; } .icon.close { background-position: -150px 0; } /* SVG-Sprite Sichtbarkeit per Klasse steuern */ .icon { display: inline-block; width: 50px; height: 50px; background-image: url(../../files/contao5_bluepages2025/themes/theme1/icons/sprite.svg); background-repeat: no-repeat; background-size: 200px 50px; } /* Standard-Icons */ .icon.info { background-position: 0 0; } .icon.warning { background-position: -50px 0; } .icon.check { background-position: -100px 0; } .icon.close { background-position: -150px 0; } /* Sichtbarkeit steuern */ .hidden { display: none !important; } /* Icon mit Text Position Test */ .icon-svg { float: left; margin-right: 0.5rem; /*margin-bottom: 0.15rem;*/ } .icon-svg-text { font-weight: 600; } /* skalierbare Icons */ .icon-svg-info { display: inline-block; float: left; width: 36px; height: 36px; margin-right: 0.5rem; background-image: url(../../files/contao5_bluepages2025/themes/theme1/icons/info--blue.svg); background-repeat: no-repeat; background-size: 36px 36px; } .icon-svg-info-text { padding-top: 0.5rem; font-weight: 600; } /************** Projekte Webdesign Listen statt Tabellen Test **************/ .liste-hyperlink { /*float: left; clear: left; width: 20rem; line-height: 2.0; padding-left: 0.75rem; padding-top: 0.25rem;*/ /*border-style: solid; border-width: 1px; border-color: #CCCCCC;*/ } .liste-text { /*display: flex; padding-left: 0.75rem; padding-top: 0.5rem;*/ /*border-style: solid; border-width: 1px; border-color: #CCCCCC;*/ } /*************************** Test Tabellen **********************************/ /***************** Contao Erweiterung Nodes Test 02.07.2025 *****************/ /* Wrapper für Nodes - TEST */ .node_wrapper.nodes-kontakt-test { width: 30%; margin-bottom: 1rem; padding: 0rem 1rem 0rem 1rem; border-style: solid; border-width: 1px 1px 1px 1px; background-color: #EEEEEE; } /* Nodes Kontakt Headline */ .node_wrapper.nodes-kontakt-test h4 { color: #000088; font-size: 1em; } /* Nodes Kontakt Fließtext */ .node_wrapper.nodes-kontakt-test.rte { font-size: 1.0em; color: #444444; } /* Nodes Kontakt HS */ #main .node_wrapper.nodes-kontakt h2 { margin-top: 0rem; font-size: 1.20em; } /*********************** Modul Auflistung Test 10.07.2025 *****************/ /* Modul Auflistung Layout */ .mod_listing { padding: 0rem 0.5rem 0rem 0.5rem; border: solid 1px #000088; border-radius: 6px; background-color: #FFFFFF; } /* Modul Auflistung Tabelle */ .mod_listing table.all_records { /*background-color: #FFFFCC;*/ } /* Modul Auflistung Tabelle Kopfzeile */ .mod_listing table.all_records thead { border: solid #000088; border-width: 0 0 1px 0; /*background-color: #FFFFCC;*/ } /* Modul Auflistung Tabelle Kopfzeile Spalten */ .mod_listing table.all_records th { padding-top: 0.25rem; padding-right: 0.5rem; padding-bottom: 0.25rem; padding-left: 0rem; } /* Modul Auflistung Tabelle Spalten */ .mod_listing table.all_records td { padding-top: 0.25rem; padding-right: 0.5rem; padding-bottom: 0.25rem; padding-left: 0rem; } /* Modul Auflistung Mithglied Detail Tabelle */ .mod_listing table.single_record { border: solid 1px #000088; background-color: #FFFFFF; background-color: #F9F9F9; } /* Modul Auflistung Mithglied Detail Tabelle Spalten */ .mod_listing table.single_record td { padding-right: 0.5rem; padding-left: 0.5rem; } /************************** Modul Zufallsbild ******************************/ /* Modul Zufallsbild Breite, Position, Text, sichtbar machen */ #main .mod_randomImage { max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; /*border: solid #FFFFFF; border-width: 1px;*/ } /***************************************************************************/ /*************************'** Contao GLightbox *****************************/ #glightbox-slider .gslide-image { /* border-style: solid; border-width: 0px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px border-color: #444444;*/ } #glightbox-slider .gslide-description { /* border-style: solid; border-width: 4px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-color: #444444;*/ } } /* @media screen */ /* EOF */ /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : layout1_test2.css Media : screen ErstDate: 28.06.2025 AendDate: 10.07.2025 23:40 Editor : Rapid CSS 2025 Vermerke: Export von contao4_bluepages2021 Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @charset "utf-8"; @media screen { /************************* Test Akordeon *************************/ /* Akkordeon Toggler Kopfzeile */ .ce_accordion .toggler { margin-bottom: 0.125rem; /* dünne Linie unterhalb von Kopfzeile */ padding: 0.5rem 0.5rem 0.5rem 0.5rem; border-style: none; border-radius: 6px 6px 6px 6px; background-color: #444444; color: #FFFFFF; font-weight: 500; } /* Akkordeon Toggler Inhalt */ .ce_accordion .toggler-inhalt { position: relative; padding: 0.5rem 0.5rem 0.5rem 0.5rem; border: 1px solid #444444; border-radius: 6px; font-size: 0.875em; font-weight: 400; color: #444444; background-color: #FFFFFF; /* margin-bottom: 0.125rem;*/ /*padding-top: 1rem;*/ /* padding-right: 1rem;*/ /* padding-left: 1rem;*/ /* background-color: #f4f4f4;*/ } } /* @media screen */ /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : nav1_meta-top.css Media : screen ErstDate: 06.06.2025 AendDate: 04.07.2025 21:06 Editor : Rapid CSS 2025 Vermerke: Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @charset "utf-8"; @media screen { /* Nav-Meta oben max. Breite, zentrieren*/ /* Layoutbereich oben für individuuelle Navigation OK */ #nav-meta-top { max-width: 2000px; margin: 0; padding: 0; /*border-style: solid; border-width: 1px 1px 1px 1px; border-color: #FF0000;*/ background-color: #444444; } /* Modul Nav oben Container - Abmessungen, Abstände */ .mod_customnav.top { margin : 0; padding: 0.5rem 0 0.5rem 0; /*border-style: solid; border-width: 1px 1px 1px 1px; border-color: #DD0000;*/ } /* Modul Nav oben Liste ul - Position, Abstände */ .mod_customnav.top ul { float:right; margin: 0; margin-right: 1.0rem; /* ul Abstand rechts */ padding: 0; /*border-style: solid; border-width: 1px 1px 1px 1px; border-color: #444444;*/ } /* Modul Nav-Meta oben Liste alle li - Position, Rahmenlinie rechts */ .mod_customnav.top li { float:left; display: block; margin: 0; padding: 0.25rem 1rem 0.25rem 1rem; /*border-style: solid; border-width: 0 0px 0 0; border-color: #FFFFFF;*/ font-size:0.875em; font-weight: 600; line-height: 1.0; list-style-type: none; } /* Modul Nav-Meta oben Liste letzte li - ohne Rahmenlinie | rechts */ /*.mod_customnav.top li:last-child { border-right: none; }*/ /* Modul Nav-Meta oben - Hyperlinks Layout inaktiv a */ .mod_customnav.top a, .mod_customnav.top span { color: #FFFFFF; text-decoration: none; } /* Modul Nav-Meta oben - Hyperlinks Status visited */ .mod_customnav.top a:visited { color: #FFFFFF; } /* Modul Nav-Meta oben - Hyperlinks Status TAB/focus, hover */ .mod_customnav.top a:focus, .mod_customnav.top a:hover { color: #FF9900; text-decoration:underline; } /* Nav-Meta oben - Hyperlinks Status aktiv */ .mod_customnav.top a:active { color: #FFCC00; } /* Nav-Meta oben - Liste li Status aktuelle Seite aktiv */ .mod_customnav.top li.active { color: #444444; background-color: #FFFFFF; } } /* @media screen */ /* EOF */ /* ===================================================== Projekt : contao5_bluepages2025-neu WebSite : neu.the-bluepages.de Name : nav1_nav-main.css Media : screen ErstDate: 06.06.2025 AendDate: 06.07.2025 15:53 Editor : Rapid CSS 2025 Vermerke: Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @charset "utf-8"; @media screen { /* Haupt-Navigation Layoutbereich nav-main Breite, sichtbar machen HS */ #nav-main { max-width: 2000px; /* maximale Seitenbereite */ /*border-style: solid; border-width: 1px; border-color: #FF0000;*/ } /* Modul nav-main Abmessungen, Abstände, mit border sichtbar machen HS*/ .mod_navigation.main { width: 100%; /*border-style: solid; border-width: 1px; border-color: #FF0000;*/ background-color: #000088; /* #000088 */ z-index: 100; /* chatgpt ergänzt Basis-Stacking für Menüs */ } /* level_1 */ /* Liste ul Position, Abstände, list-style, mit bordersichtbar machen HS */ .mod_navigation.main ul { margin: 0; padding: 0; /*border-style: solid; border-width: 1px; border-color: #FF0000;*/ list-style-type: none;/* gilt für alle Menüebenen */ } /* level_1 */ /* Liste li Position, Abmessung, Position Text, mit bordersichtbar machen Menübreite HS */ .mod_navigation.main li { float:left; width:9.0rem; /* Menübreite level_1 */ text-align: center; /*border-style: solid; border-width: 1px; border-color: #000000;*/ } /* ergänzt chatgbt */ .mod_navigation.main > ul > li > a, .mod_navigation.main > ul > li > span, .mod_navigation.main > ul > li > strong { line-height: 2.125; font-size: 1.0em; /* optional: Schrift etwas größer */ } /* Modul nav-main - Hyperlinks Layout a inaktiv HS */ .mod_navigation.main a, .mod_navigation.main span { display: block; margin: 0; font-weight:500; color: #FFFFFF; text-decoration:none; transition: background-color 0.3s ease; /* Zeit Menüwechsel HS */ } /* Modul nav-main - Hyperlinks a visited HS */ .mod_navigation.main a:visited { color: #FFFFFF; } /* Modul nav-main - Hyperlinks ohne Umrisslinien, Status TAB/focus, hover HS */ .mod_navigation.main a:focus, .mod_navigation.main a:hover { color: #444444; background-color: #FFCC00; outline:none; } /* Modul nav-main - Hyperlinks Status aktiv HS */ .mod_customnav.main a:active { color: #FFCC00; } /* Modul nav-main - Hyperlinks Status aktiv und übergeordneten Menüpunkt hervorheben HS */ .mod_navigation.main .active, .mod_navigation.main .trail { /*padding: 0.125rem 0 0.125rem 0;*/ /* Abstand innen für Menühöhe Seite active HS */ background-color:#444444; color: #FFFFFF; } /* durch chatgbt ersetzt */ /******************** ab hier ergänzt chatgbt *************************/ /* Basis: alle Submenüs standardmäßig eingeklappt */ .mod_navigation.main li > ul { max-height: 0; opacity: 0; overflow: hidden; visibility: hidden; transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s ease; /* ergänzt chatgbt */ } /* Wenn Hover: aufklappen */ .mod_navigation.main li:hover > ul { max-height: 1000px; /* ausreichend groß für Inhalte */ opacity: 1; visibility: visible; } /************************************************************/ /* level_2 */ /* Zweite Navigations-Ebene ausblenden, wenn nicht gewählt HS */ .mod_navigation.main ul.level_2 { float: none; /* chatcpt ergänzt */ position: absolute; overflow: visible; /* chatcpt ergänzt */ z-index: 2000; /* chatcpt ergänzt */ } /* ergänzt chatgbt */ .mod_navigation.main ul.level_2 { position: absolute; z-index: 2000; top: auto; left: auto; width: 9.0rem; background-color: #444444; border-radius: 0px 0px 6px 6px; overflow: hidden; max-height: 0; opacity: 0; visibility: hidden; transition: max-height 0.4s ease, opacity 0.4s ease; /* ergänzt chatgbt */ } /* Listenelemente zweite Navigations-Ebene untereinander HS*/ .mod_navigation.main ul.level_2 li { float: none; /* chatgbt ergänzt */ clear:both; position: relative; /* chatgbt ergänzt */ } /* chatgpt ergänzt Positionierung für li.level_2 */ .mod_navigation.main li.level_2 { position: relative; /* Referenz für ul.level_3 (absolut) */ } /* Listenelemnte zweite Ebene bei hover einblenden, Menübreite HS */ .mod_navigation.main li:hover ul.level_2 { /*display:block;*/ width:9.0rem; /* Menübreite level_2 */ height:auto; left:auto; top:auto; overflow: visible; /* chatgpt geändert: overflow:auto - DAS kann das Problem sein */ border:hidden; border-radius: 0px 0px 6px 6px; /* border unten */ background-color:#444444; } /* Hyperlinks und span gestalten Ebene 2 HS */ .mod_navigation.main li:hover ul.level_2 a, .mod_navigation.main li:hover ul.level_2 span { line-height:2.0; font-size:1.0em; font-weight:400; } /* Aktiven Menüpunkt hervorheben bei hover HS */ .mod_navigation.main ul.level_2 li:hover { font-weight:400; background-color: #444444; color: #FFFFFF; } /* level_3 chatgpt ergänzt */ /* Debug-Trick - Füge testweise hinzu: */ /* Wenn du das rote Kästchen nie siehst, dann liegt es am falschen Hover-Ziel. */ .mod_navigation.main ul.level_3 { /*border: 1px solid red;*/ /* Test OK wird angezeigt */ } /* level_3 – Verstecken initial */ .mod_navigation.main ul.level_3 { /*display: none;*/ position: absolute; overflow: visible; width: 9.0rem; /*Menübreite level_3 */ top: 0; left: 100%; border-radius: 0px 6px 6px 0px; /* border rechts */ background-color: #666666; z-index: 3000; /* hoch, damit es über allem liegt */ } /* level_4 chatgpt ergänzt */ /* level_4 – Verstecken initial */ .mod_navigation.main ul.level_4 { position: absolute; overflow: visible; width: 9.0rem; /*Menübreite Ebene*/ top: 0; left: 100%; border-radius: 0px 6px 6px 0px; /* border rechts */ background-color: #666666; z-index: 4000; /* hoch, damit es über allem liegt */ } /************************* TEST chatgbt ***************************/ /* Pfeile anzeigen */ /* ▼ für Menüpunkte mit Submenu ab Ebene 1 */ .mod_navigation.main li > a::after { content: ""; } /* ▼ ab Ebene 1 */ .mod_navigation.main li > ul.level_2, .mod_navigation.main li > ul.level_3, .mod_navigation.main li > ul.level_4 { /*display: none;*/ } .mod_navigation.main li:has(> ul.level_2) > a::after { content: "▼"; font-size: 0.875em; margin-left: 5px; } /* ► ab Ebene 2 */ .mod_navigation.main ul.level_2 li:has(> ul.level_3) > a::after, .mod_navigation.main ul.level_3 li:has(> ul.level_4) > a::after { content: "►"; float: right; margin-right: 5px; font-size: 0.875em; } /*******************************************************************/ } /* @mediascreen ende */ /********************* Mobile Navigation **************************/ /* Steuer-Checkbox verstecken */ .nav-toggle { display: none; } /* Hamburger-Label standardmäßig ausblenden */ .nav-toggle-label { display: none; cursor: pointer; padding: 1rem; } /* Hamburger-Striche */ .nav-toggle-label span { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: #fff; transition: all 0.3s ease; } /* Mobile Darstellung */ @media screen and (max-width: 768px) { /* Hamburger sichtbar machen geänerdt von chatgbt 06.07.2025 */ .nav-toggle-label { display: block; background-color: #0000CC; width: 3rem; height: auto; padding: 1rem; text-align: center; position: absolute; top: 1rem; right: 1rem; z-index: 5000; /* sicher über dem restlichen Inhalt */ } /* bleibt unverändert 06.07.2025 */ /* Navigation standardmäßig ausblenden */ #nav-main .mod_navigation.main ul { display: none; } /* Menü anzeigen, wenn Checkbox aktiv ist – alle Ebenen neu mit .nav-wrapper */ .nav-wrapper #nav-toggle:checked ~ .mod_navigation.main ul.level_1, .nav-wrapper #nav-toggle:checked ~ .mod_navigation.main ul.level_2, .nav-wrapper #nav-toggle:checked ~ .mod_navigation.main ul.level_3, .nav-wrapper #nav-toggle:checked ~ .mod_navigation.main ul.level_4 { display: block; } /* Hamburger in X verwandeln */ .nav-toggle:checked + .nav-toggle-label span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav-toggle:checked + .nav-toggle-label span:nth-child(2) { opacity: 0; } .nav-toggle:checked + .nav-toggle-label span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } } /* @media screen and (max-width: 768px) */ /* EOF */ /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : nav1_breadcrumb.css Media : screen ErstDate: 06.06.2025 AendDate: 28.06.2025 15:13 Editor : Rapid CSS 2025 Vermerke: Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @charset "utf-8"; @media screen { /* Navigationspfad - Liste ul Abstände, Schrift */ .mod_breadcrumb ul { margin-top:0rem; margin-left:0; font-size:0.875em; color:#000088; } /* Navigationspfad - Liste li Position, Listensymbol */ .mod_breadcrumb li { float:left; display:inline-block; margin-left:0.25rem; } /* Navigationspfad - Liste li aktive Seite Schrift */ .mod_breadcrumb li.active { margin-left: 0.5rem; font-weight:600; } } /* @media screen */ /* EOF */ /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : nav1_meta-left.css Media : screen ErstDate: 06.06.2025 AendDate: 28.06.2025 15:16 Editor : Rapid CSS 2025 Vermerke: Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @charset "utf-8"; @media screen { /* Nav-Meta aside#left alle Unterseiten Neu ab 21.06.2025 */ #nav-left.unterseiten h5 { text-align: right; } #nav-left.unterseiten li { list-style: none; } /* Hyperlink Button Layout */ #nav-left.unterseiten a, #nav-left.unterseiten a:visited, #nav-left.unterseiten a:focus, #nav-left.unterseiten a:active, #nav-left.unterseiten a:hover { width: 100%; display: inline-block; margin-bottom: 0.25rem; padding:0.15rem 0 0.15rem 0; /* ob re un li */ border-radius:0px; /* 4px */ font-size:1.0em; font-weight:500; text-align: center; color: #FFFFFF; text-decoration:none; cursor:pointer; } /* Hyperlink Button Status: alle ohne hover */ #nav-left.unterseiten a, #nav-left.unterseiten a:visited, #nav-left.unterseiten a:focus, #nav-left.unterseiten a:active { background-color: #444444; /* #666666 */ } /* Hyperlink Button Status: hover */ #nav-left.unterseiten a:hover { background-color: #FF9900; } } /* @media screen */ /* EOF */ /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : nav1_meta-footer.css Media : screen ErstDate: 28.06.2025 AendDate: 09.07.2025 15:24 Editor : Rapid CSS 2025 Vermerke: Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @charset "utf-8"; @media screen { /******************** Fußzeile neu 28.06.2025 **********************/ /* Nav-Meta footer - ALLGEMEIN, KONTAKT, NEWSLETTER Container sichtbar machen */ #footer nav.mod_customnav.allgemein, #footer nav.mod_customnav.kontakt, #footer nav.mod_customnav.newsletter { /*border-style: solid; border-width: 1px 1px 1px 1px; border-color: #FFFFFF;*/ } /* Nav-Meta footer - ALLGEMEIN Container */ #footer nav.mod_customnav.allgemein { float: left; margin-left: 0.25rem; /* 0.5rem */ } /* Nav-Meta footer - KONTAKT Container */ #footer nav.mod_customnav.kontakt { float:left; margin-left: 0.25rem; /* 0.5rem */ } /* Nav-Meta footer - NEWSLETTER Container */ #footer nav.mod_customnav.newsletter { float:left; margin-left: 0.25rem; /* 0.5rem */ } /* Nav-Meta footer - ALLGEMEIN, KONTAKT, NEWSLETTER Container-Inhalt Layout */ #footer nav.mod_customnav.allgemein, #footer nav.mod_customnav.kontakt, #footer nav.mod_customnav.newsletter { /*display:block;*/ /*padding:0;*/ line-height: 2.0; font-size: 0.875em; font-weight: 500; text-align: left; } /* Nav-Meta footer - ALLGEMEINES, KONTAKT ul Position */ #footer nav.mod_customnav.allgemein ul, #footer nav.mod_customnav.kontakt ul, #footer nav.mod_customnav.newsletter ul { display: inline-block; margin: 0; } /* Nav-Meta footer - ALLGEMEINES, KONTAKT li Layout */ #footer nav.mod_customnav.allgemein li, #footer nav.mod_customnav.kontakt li, #footer nav.mod_customnav.newsletter li { margin: 0; list-style-type: none; } /* HINWEIS: Um Links entsprechend zu formatieren, platzieren Sie die Regel :visited nach der Regel :link, aber vor den Regeln :hover und :active, wie in der LVHA-Reihenfolge definiert: :link — :visited — :hover — :active . Die Pseudoklassen :visited und :link schließen sich gegenseitig aus. */ /* korrekte Reihenfolge: a, link oder visited, focus mit hover, active*/ /* Nav-Meta footer - ALLGEMEINES, KONTAKT, NEWSLETTER Hyperlinks Layout */ /* Nav-Meta footer - ALLGEMEINES, KONTAKT, NEWSLETTER Hyperlinks inaktiv a */ #footer nav.mod_customnav.allgemein a, #footer nav.mod_customnav.kontakt a, #footer nav.mod_customnav.newsletter a { color: #FFFFFF; text-decoration: none; } /* Nav-Meta footer - ALLGEMEINES, KONTAKT, NEWSLETTER Hyperlinks Status visited */ #footer nav.mod_customnav.allgemein a:visited, #footer nav.mod_customnav.kontakt a:visited, #footer nav.mod_customnav.newsletter a.visited { color: #FFFFFF; } /* Nav-Meta footer - ALLGEMEINES, KONTAKT, NEWSLETTER Hyperlinks Status TAB/focus, hover */ #footer nav.mod_customnav.allgemein a:focus, #footer nav.mod_customnav.kontakt a:focus, #footer nav.mod_customnav.newsletter a:focus, #footer nav.mod_customnav.allgemein a:hover, #footer nav.mod_customnav.kontakt a:hover, #footer nav.mod_customnav.newsletter a:hover { color: #FF9900; text-decoration: underline; } /* Nav-Meta footer - ALLGEMEINES, KONTAKT, NEWSLETTER Hyperlinks Status Seite aktiv */ #footer nav.mod_customnav.allgemein a:active, #footer nav.mod_customnav.kontakt a:active, #footer nav.mod_customnav.newsletter a:active { color: #FFCC00; } /* Nav-Meta footer - Liste li Status aktuelle Seite aktiv */ #footer nav.mod_customnav.allgemein li.active, #footer nav.mod_customnav.kontakt li.active, #footer nav.mod_customnav.newsletter li.active { color: #FFCC00; } /* Nav-Meta footer - ADMINISTRATION Container für Hyperlinks Layout, sichtbar machen */ #footer .links-admin { margin-top: 0; margin-left: 0.25rem; /* 0.5rem */ padding: 0; line-height: 1.75em; font-size: 0.875em; font-weight: 500; text-align: left; /*border-style: solid; border-width: 1px 1px 1px 1px; border-color: #FFFFFF;*/ } /* Nav-Meta footer - ADMINISTRATION Hyperlinks Status Inaktiv */ #footer .links-admin a { color: #FFFFFF; text-decoration: none; } /* Nav-Meta footer - ADMINISTRATION Hyperlinks Status visited */ #footer .links-admin a:visited { color: #FFFFFF; } /* Nav-Meta footer - ADMINISTRATION Hyperlinks Status TAB/focus, hover */ #footer .links-admin a:focus, #footer .links-admin a:hover { color: #FF9900; text-decoration: underline; } /* Nav-Meta footer - ADMINISTRATION Hyperlinks Status Seite aktiv */ #footer .links-admin a:active { color: #FFCC00; } /* Nav-Mdeta footer - WEBSITE INFO Container für Text, Hyperlinks Layout, sichtbar machen */ #footer .text-siteinfo { margin: 0rem; margin-left: 0.25rem; /* 0.5rem */ line-height: 1.5rem; font-size: 0.875em; font-weight: 500; text-align: left; color: #FFFFFF; /*border-style: solid; border-width: 1px 1px 1px 1px; border-color: #FFFFFF;*/ } /* Nav-Meta footer - WEBSITE INFO Hyperlinks Status Inaktiv */ #footer .text-siteinfo a { color: #FFFFFF; /* #FF9900 */ text-decoration: none; } /* Nav-Meta footer - WEBSITE INFO Hyperlinks Status TAB/focus, hover */ #footer .text-siteinfo a:focus, #footer .text-siteinfo a:hover { color: #FF9900; } #footer .text-siteinfo a:active { color: #FFCC00; text-decoration:underline; } /* Nav-Meta footer - WEBSITE INFO Hyperlinks Status Seite aktiv */ #footer .links-admin a:active { color: #FFCC00; } /************************************************************************/ } /* @media screen */ /* EOF */ /* ===================================================== Projekt : contao5_bluepages2025 WebSite : the-bluepages.de Name : nav1_sitemap.css Media : screen ErstDate: 06.06.2025 AendDate: 20.07.2025 13:03 Editor : Rapid CSS 2025 Vermerke: Autor : Hartmut Schneider - hs-designteam.de ===================================================== */ @charset "utf-8"; @media screen { .mod_sitemap { padding: 0; padding-top: 1rem; padding-left: 1rem; padding-bottom: 1rem; border: solid 1px #AAAAAA; background-color: #F8F8F8; } /* Hyperlinks Level 1 */ /* Sitemap Liste ul Level 1 - Abstände */ .mod_sitemap ul.level_1 { margin:0; } /* Sitemap Liste li Listensymbol Typ */ .mod_sitemap li { list-style-type: none; } /* Sitemap Hyperlink Layout Status inaktiv */ .mod_sitemap a { font-size:1.0em; font-weight:500; text-decoration:none; color: #444444; } /* Sitemap Hyperlink Status visited */ .mod_sitemap a:visited { color: #444444; } /* Sitemap Hyperlink Status TAB/focus, hover */ .mod_sitemap a:focus, .mod_sitemap a:hover { text-decoration:underline; color: #FF0000; } /* Sitemap Hyperlink Status aktiv */ .mod_sitemap a:active { text-decoration:underline; color: #009900; } /* Hyperlinks Level_2 */ /* Sitemap Liste li Level 2 Listensymbol Typ */ .mod_sitemap .level_2 li { list-style-type: square; color: #FF0000; } /* Sitemap Hyperlink level_2 Layout Status inaktiv */ .mod_sitemap .level_2 a { font-size: 1.0em; font-weight: 400; color: #444444; } /* Sitemap Hyperlink level_2 Status visited */ .mod_sitemap .level_2 a:visited { color: #444444; } /* Sitemap Hyperlink level_2 Status TAB/focus, hover */ .mod_sitemap .level_2 a:focus, .mod_sitemap .level_2 a:hover { text-decoration:underline; color: #FF0000; } /* Sitemap Hyperlink level_2 Status aktiv */ .mod_sitemap .level_2 a:active { text-decoration:underline; color: #009900; } /* Hyperlinks Level_3 */ /* Sitemap Liste li Level 3 Listensymbol Typ */ .mod_sitemap .level_3 li { list-style-type: square; color: #0000FF; } /* Sitemap Hyperlink level_3 Layout Status inaktiv */ .mod_sitemap .level_3 a { font-size: 1.0em; font-weight: 400; color: #444444; } /* Sitemap Hyperlink level_3 Status visited */ .mod_sitemap .level_3 a:visited { color: #444444; } /* Sitemap Hyperlink level_3 Status TAB/focus, hover */ .mod_sitemap .level_3 a:focus, .mod_sitemap .level_3 a:hover { text-decoration:underline; color: #FF0000; } /* Sitemap Hyperlink level_3 Status aktiv */ .mod_sitemap .level_3 a:active { text-decoration:underline; color: #009900; } /* Hyperlinks Level_4 */ /* Sitemap Liste li Level 4 Listensymbol Typ */ .mod_sitemap .level_4 li { list-style-type: square; color: #009900; } /* Sitemap Hyperlink level_3 Layout Status inaktiv */ .mod_sitemap .level_4 a { font-size: 1.0em; font-weight: 400; color: #444444; } /* Sitemap Hyperlink level_3 Status visited */ .mod_sitemap .level_4 a:visited { color: #444444; } /* Sitemap Hyperlink level_3 Status TAB/focus, hover */ .mod_sitemap .level_4 a:focus, .mod_sitemap .level_4 a:hover { text-decoration:underline; color: #FF0000; } /* Sitemap Hyperlink level_3 Status aktiv */ .mod_sitemap .level_4 a:active { text-decoration:underline; color: #009900; } } /* @media screen */ /* EOF */