* { box-sizing: border-box; } header, nav, main, footer { display: block; } body, button { padding: 0; margin: 0; font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size:1em; line-height:100%; background:#ffffff; color:#444444; } input, textarea { font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; } header { background-color: #ffffff; width: 100%; height:80px; padding-top:1em; } nav ul { margin: 0; height: 0; max-height: 0; overflow: hidden; transition: max-height 1s; } /* LINK: */ a, a.link { color:#3183b5; text-decoration:none; } a:hover { opacity:0.7; } /* HEADLINES: */ /* h1 { font-size:1.8em; font-family: 'Poppins', sans-serif; color:#ff8d00; margin-bottom:0.4em; margin-top:0; font-weight:normal; line-height:1; hyphens: auto; } h1.headline { text-align:center; font-size:2em; hyphens: none; } h2 { font-size:1.5em; font-family: 'Poppins', sans-serif; color:#3183b5; margin-bottom:0.4em; font-weight:normal; line-height:1; hyphens: auto; } h3 { font-size:1.3em; font-family: 'Poppins', sans-serif; color:#ff8d00; margin-bottom:0.4em; font-weight:normal; line-height:1; hyphens: auto; } h4 { font-size:1.1em; font-family: 'Poppins', sans-serif; font-weight:bold; color:#3183b5; margin-bottom:0.4em; font-weight:normal; line-height:1; hyphens: auto; } */ h1 { font-size:1.8em; font-family: 'poppinsregular', sans-serif; color:#ff8d00; margin-bottom:0.4em; margin-top:0; font-weight:normal; line-height:1; hyphens: auto; } h1.headline { text-align:center; font-size:2em; hyphens: none; } h2 { font-size:1.6em; font-family: 'poppinsregular', sans-serif; color:#3183b5; margin-bottom:0.4em; margin-top:0; font-weight:normal; line-height:1; hyphens: auto; } h3 { font-size:1.4em; font-family: 'poppinsregular', sans-serif; color:#ff8d00; margin-bottom:0.4em; margin-top:0; font-weight:normal; line-height:1; hyphens: auto; } h4 { font-size:1.2em; font-family: 'poppinsregular', sans-serif; font-weight:bold; color:#3183b5; margin-bottom:0.4em; margin-top:0; font-weight:normal; line-height:1; hyphens: auto; } h5 { font-size:1.1em; font-family: 'poppinsregular', sans-serif; font-weight:bold; color:#ff8d00; margin-bottom:0.4em; margin-top:0; font-weight:normal; line-height:1; hyphens: auto; } #alertNo { padding:0.5em; border:double 7px #ff0033; color:#ff0033; font-size:120%; background:#ffffff; } #alertYa { padding:0.5em; border:double 7px #1CAD33; color:#1CAD33; font-size:120%; background:#ffffff; } .alertNo { padding:0.5em; color:#ffffff; font-size:120%; background:#ff0033; } .alertYaX { padding:0.5em; color:#ffffff; font-size:120%; background:#1CAD33; -webkit-animation-name: hideit; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes hideit { 0% { opacity: 0; } 100% { opacity: 0; } } .clear { clear:both; } .CONTENT { display: block; margin:0 auto; padding-left:20px; padding-right:20px; font-size:0.8em; margin-left: auto; margin-right: auto; max-width: 95%; margin: 2em auto; /* hyphens - Silbentrennung */ /* -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; */ } .CONTENT ul li { list-style-image:url(../images/content/LeLa.Icon.white.svg)} .reframe-X { margin-left: auto; margin-right: auto; max-width: 94%; margin: 0.5em auto; } .teaser { overflow:hidden; background-color: #fafafa; height:180px; margin-bottom:1ex; box-shadow:0px 7px 7px 0px #cccccc; border:solid 1px #cccccc; border-radius: 7px; padding:1em; text-align:center; /* ex = Höhe der Kleinbuchstaben des verwendeten Fonts. h-shadow v-shadow blur spread */ display: block; margin-left: auto; margin-right: auto; /* zentriert bilder */ } .teaser { position:relative; } .teaser h1 { color:#ffffff; font-size:1.5em; } .teaser p { color:#ffffff; } .teaser .PLUS { position:absolute; left:0; bottom:0; width:1.1em; height:1.1em; line-height:1.1em; background:#ffffff; color:#ff8d00; font-size:2em; } .showDomains { float:right; font-size:80%; line-height:1.3em; } .menu { overflow:hidden; margin-bottom:1ex; padding:1em; /* ex = Höhe der Kleinbuchstaben des verwendeten Fonts. h-shadow v-shadow blur spread */ display: block; margin-left: auto; margin-right: auto; /* zentriert bilder */ } .lines p { height: 16px; background-color: silver; border-radius: 8px; } .largeblock { height: 100px; background-color: hsl(145,50%,80%); margin-top: 1em; } /* IMAGES: */ .img-responsive { max-width:100%; height:auto; } .img-teaser { max-width:100%; height:auto; } .img-header { display: block; margin-left: auto; margin-right: auto; } /* zentriert bilder */ .img-icon { max-width:4.4em; display: block; margin-left: auto; margin-right: auto; margin-bottom:1em; } /* zentriert bilder */ .logo { max-width:100px; } .teaser-portale { box-shadow:0px 7px 7px 0px #cccccc; } .img-plakat { box-shadow: 5px 5px 10px #888888; } .puenktchen hr { height:4px; border:0; margin-top:1.2em; margin-bottom:1.2em; background:transparent url('../images/puenktchen.png') repeat-x; } #PRAXISBEISPIELE img { box-shadow: 5px 5px 10px #888888; } /* FOOTER */ footer { background-color:#ff8d00; color:#ffffff; } footer .footCONTENT { margin:0 auto; max-width:1100px; } footer a:link { color: #ffffff; text-decoration: underline; } footer a:visited { color: #ffffff; text-decoration: underline; } footer a:hover { opacity:0.7; text-decoration: underline; } .footer { overflow:hidden; font-size:1.2em; line-height:1.3em; text-align:center; margin:1em; } .right { text-align:right; } /* ~~~~~~~~~~~~~ FORMS ~~~~~~~~~~~~~~~~ */ input[type=text], select, textarea, input[type=password] { width: 100%; padding: 12px; border: 1px solid #cccccc; border-radius: 4px; box-sizing: border-box; resize: vertical; font-size:1em; } label { padding: 6px 12px 12px 0; display: inline-block; } /* top right bottom left */ input[type=submit] { background-color: #ff8d00; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: left; font-size:1em; } .container { border-radius: 7px; border:solid 1px #cccccc; background-color: #f2f2f2; padding: 20px; } .col-25 { float: left; width: 25%; margin-top: 6px; } .col-75 { float: left; width: 75%; margin-top: 6px; } .col-50 { float: left; width: 49%; margin-top: 6px; } .col-10 { float: left; width: 10%; margin-top: 6px; } .col-90 { float: left; width: 89%; margin-top: 6px; } .row:after { content: ""; display: table; clear: both; } /* Clear floats after the columns */ .formLableLogin { font-size:120%; } input[type=submit].SubmitMitglied { margin:auto; width:50%; background-color:#ffffff; border:solid 1px #ff8d00; color:#ff8d00; font-size:2em; padding:1em; text-align:center; } input[type=submit].SubmitMitglied:hover { margin:auto; width:50%; background-color:#ff8d00; color:#ffffff; font-size:2em; padding:1em; text-align:center; } input[type=submit].small { background-color: #ff8d00; color: white; padding: 6px 10px; border: none; border-radius: 3px; cursor: pointer; float: left; font-size:1em; } /* ~~~~~~~~~~~~~ TABLES ~~~~~~~~~~~~~~~~ */ .memberFrame { border-bottom:solid 1px #aaaaaa; margin-bottom:10px; } .memberLeft { float: left; width: 40%; color:#ff8d00; } .memberRight { float: left; width: 59%; } .memberLeft3 { float: left; width: 30%; color:#ff8d00; } .memberMiddle3 { float: left; width: 30%; } .memberRight3 { float: left; width: 39%; } .memberLeft4 { float: left; width: 20%; color:#ff8d00; } .memberMiddleL4 { float: left; width: 30%; } .memberMiddleR4 { float: left; width: 20%; } .memberRight4 { float: left; width: 20%; } .memberLeft3 { float: left; width: 30%; color:#ff8d00; } .memberMiddle3 { float: left; width: 30%; } .memberRight3 { float: left; width: 30%; } .adminLeft5 { float: left; width: 15%; color:#ff8d00; } .adminMiddleL5 { float: left; width: 15%; } .adminMiddleM5 { float: left; width: 15%; } .adminMiddleR5 { float: left; width: 20%; } .adminRight5 { float: left; width: 20%; } ul.table { padding-left:-40px; } .tagungLeftLeft { float: left; width: 10%; } .tagungLeft { float: left; width: 20%; } .tagungRight { float: left; width: 25%; } .tagungRightRight { float: left; width: 44%; } .highlight { background:#ff00ff; color:#ffffff; padding:0.5em; } .likeH3 { font-size:1.4em; font-family: 'Poppins', sans-serif; color:#ff8d00; line-height:1; hyphens: auto; } /* ~~~~~~~~~~~~~ ADMIN ~~~~~~~~~~~~~~~~ */ .memberlist { float:left; padding:5px; } #TOPBAR { position: fixed; margin:0 auto; top: 80px; width: 100%; max-height:180px; z-index:1000; background-color:#ff00ff; padding:20px; color:#ffffff; opacity:0.97; } h1.topbar,h2.topbar,h3.topbar,h4.topbar,a.topbar { color:#ffffff; } /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] { width: 100%; margin-top: 0; } } /* ~~~~~~~~~~~~~ NAVBAR ~~~~~~~~~~~~~~ */ /* #navbar { height:90px; } */ nav, #navbar { z-index:700; } #navbar { margin: 0 auto; max-width: 95%; height:80px; padding-top:1em; } .navbar-fixed { position: fixed; top: -3em; opacity:0.8; } nav { position: fixed; /* keine Animation beim Scrollen ! */ top: 0em; width: 100%; color: #777777; background: #ffffff; opacity:0.9; font-weight: normal; font-size: 1em; border-bottom:solid 1px #cccccc; /* border-top:solid 1px #ffffff; */ } /* h-shadow v-shadow blur spread color */ nav ul { text-align: center; margin: 0; line-height:4em; vertical-align:bottom } /* line-heigt, damit logo und text bottom aligned sind */ nav ul li { display: inline-block; padding: 0 1em; line-height: 1em; color:#333333; /* font-size:1em; */ } /* line-heigt für den blauen strich drunter */ nav ul li:hover { -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms; -ms-transition: all 500ms; transition: all 300ms; /* color:#3183b5; */ color:#ff8d00; } nav ul li.on { color:#ff8d00; border-bottom: 2px solid #3183b5; } .filler { width: 100%; height: 20px; background: #ffffff; opacity:0.85; } .two { height: 0px; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #MENU_ICON { width: 100%; margin-left: auto; } /* MENU-Icon */ .menu_icon { width: 35px; height: 3px; background-color:#000000; margin: 6px 0; } /* top/bottom, right/left */ .ul-2 { margin-left:1em; } /* SIDENAV */ .sidenav { height: 100%; width: 0; position: fixed; z-index: 2000; top: 0; right: 0; background-color: #333333; overflow-x: hidden; transition: 0.5s; padding-top: 60px; opacity:0.85; margin-left:4em; line-height:100%; } .sidenav a { /* padding: 8px 8px 8px 32px; */ text-decoration: none; font-size: 25px; color: #ffffff; display: block; transition: 0.3s; font-size:0.8em; line-height:100%; margin:1em; } .sidenav a:hover { color: #ffffff; opacity:0.6; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } /* ALLES GRÖßER SMART-PHONE AUFLÖSUNG: */ @media screen and (max-height: 399px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } @media screen and (max-width: 499px) { footer {padding-top:0.5em; padding-bottom:0.5em; font-size:0.8em; } } @media (min-width: 1024px) { #MENU_ICON { display:none } nav { margin-top: 0; font-size: 1.3em; margin-bottom: 1ex; } nav ul { margin: 0; height: auto; overflow: visible; display: flex; flex-wrap: wrap; justify-content: space-between; list-style-type: none; padding-left: 0; /* line-height:5.5em; */ } nav ul li { text-align: center; text-transform: uppercase; font-size:0.7em; line-height:1.8em; } #navbar { padding-top:0.3em; } } @media (min-width: 400px) { .reframe-X { max-width: 100%; } .CONTENT { max-width: 100%; } .flex-2 { } .teaser { max-width: 100%; margin:1em; padding:1em; } .lines p:nth-child(2) { width: 70%} .largeblock { height: 90px; } .sidenav a { font-size:120%; margin-left:30%; } } @media (min-width: 500px) { .flex-2 { display: flex; justify-content: space-between; max-width: 100%; } .flex-content-2 { display: flex; } .teaser { width: 48%; height: 250px; margin:0.5em; padding:1em; } .menu { width: 48%; margin:0.5em; padding:1em; } .lines p:nth-child(2) { width: 50%} .CONTENT { /* text-align:justify; */ font-size:1em; line-height:130%; } .CONTENT li { text-align:left; } .footer { width: 48%; height: 250px; margin:0.5em; padding:1em; font-size:1em; line-height:1.3em; } .sidenav a { font-size:100%; } .ul-2-li { line-height:0.5em; } .teaser h1 { font-size:1em; } .teaser p { font-size:0.8em; line-height:1.2em; } .footer { overflow:hidden; font-size:0.8em; line-height:1.3em; height:auto; } .footerRight { text-align:right; } } @media (min-width: 768px) { .teaser h1 { font-size:1.2em; } .teaser p { font-size:1em; line-height:1.4em; } } @media (min-width: 800px) { .reframe-X { max-width: 1100px; width: 90%; margin-left: auto; margin-right: auto; } .footer { /* width: 32%; font-size:1.1em; line-height:1.4em; */ } /* .teaser { height: 350px; margin:1em; padding:1.5em; overflow: hidden; } */ .menu { margin:1em; padding:1.5em; overflow: hidden; } .lines p:nth-child(2) { display: none } /* VORSICHT, DIESE ZEILE WIRD AUSGEBLENDET !!! */ .CONTENT { max-width: 1100px; width: 90%; /* text-align:justify; */ font-size:1.2em; line-height:150%; } .sidenav a { font-size:120%; } .teaser h1 { font-size:1em; } .teaser p { font-size:0.8em; line-height:1.2em; } } @media (min-width: 1024px) { .teaser { height: 350px; margin:1em; padding:1.5em; overflow: hidden; } .footer { margin:1em; padding:1.5em; overflow: hidden; } .teaser h1 { font-size:1.5em; } .teaser p { font-size:1em; line-height:1.4em; } } @media (min-width: 1100px) { #navbar { max-width: 1100px; width:95%; } .footer { font-size:1em; line-height:1.6em; } } /* to top with jquery fading */ .back-to-top { position:fixed; bottom:100px; right:20px; background:url(../images/arrows.svg) left top no-repeat; width:27px; height:50px; } .back-to-top a { text-indent:-9999px; display: block; } .back-to-top:hover { background:url(../images/arrows.svg) left -24px no-repeat; } .small { font-size:60%; } #LITERATURE .frame { border-bottom:solid 5px #ff8d00; } #LITERATURE .image-frame { float:left; width:20%; padding:0.5em; text-align:right; } #LITERATURE .text-frame { float:left; width:75%; padding:0.5em; } #LITERATURE .teaser-image { overflow:hidden; width:100px; } div.Button { margin:auto; width:80%; border:solid 1px #ff8d00; font-size:2em; padding:1em; text-align:center; } div.Button:hover { color:#ffffff; background:#ff8d00; } div.ButtonPreis { margin:auto; width:80%; border:solid 1px #ff8d00; font-size:2em; padding:1em; text-align:center; color:#ffffff; background:#ff8d00; } div.ButtonPreis:hover { color:#ff8d00; background:#ffffff; } /* TOOLTIP: */ .tooltip { position: relative; display: inline-block; text-decoration:underline; /* border-bottom: 1px dotted black; */ } .tooltip .tooltiptext { visibility: hidden; width: 200px; background-color: #3183b5; color: #ffffff; text-align: center; border-radius: 6px; padding: 5px 0; font-size:12px; line-height:15px; text-align:left; padding: 5px; /* Position the tooltip */ position: absolute; z-index: 1; top: 100%; left: 50%; margin-left: -60px; } .tooltip:hover .tooltiptext { visibility: visible; } /* ---------------- ACCORDION ohne Indes ---------------- */ p.accordions { padding:0.1em; } .accordion { background-color: #ff8d00; color:#ffffff; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; font-size:1em; } .active, .accordion:hover { background-color: #3183b5; } .accordion:after { content: '\002B'; color: #ffffff; float: right; margin-left: 5px; font-size:2em; } .active:after { content: "\2212"; color: #ffffff; font-size:2em; /* content: "\2212" URL("https://development.lernortlabor.de/images/LeLa_Logo.gif"); */ } .panel { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; border:solid 1px #eeeeee; } .panel_DBU { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; border:solid 5px green; } .accordionWhite { background-color: #ffffff; color:#ff8d00; border-bottom:solid 1px #cccccc; } .accordionWhite:hover { background-color: #ffffff; opacity:0.5; } .accordionWhite:after { color: #ff8d00; } #mailFrame { margin:15px; padding:20px; max-width:900px; border:solid 1px #dddddd; } /* --------------- FIXED BUTTON START ------------------*/ .fixedButton1 { position: fixed; top: 25%; left: 0px; padding: 0px; box-shadow:0px 0px 5px 5px #dddddd; /* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */ } .roundedFixedBtn1 { height: 110px; width: 140px; padding: 7px; font-size:250%; /* font-family: 'Architects Daughter'; */ font-size: 1.4em; line-height: 1em; border-radius: 2%; background-color: #ff8d00; color: white; text-align: center; cursor: pointer; } .fixedButton2 { position: fixed; top: 15%; left: 0px; padding: 0px; box-shadow:0px 0px 5px 5px #dddddd; /* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */ } .roundedFixedBtn2 { height: 202px; width: 300px; padding: 5px; border-radius: 2%; background-color: #ffffff; text-align: center; cursor: pointer; } .fixedButton4 { position: fixed; top: 25%; left: 0px; padding: 0px; /* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */ } .roundedFixedBtn4 { height: 110px; width: 140px; padding: 7px; font-size:250%; /* font-family: 'Architects Daughter'; */ font-size: 1.4em; line-height: 1em; border-radius: 2%; color: white; text-align: center; cursor: pointer; } /* --------------- FIXED BUTTON END ------------------*/ /* ---------------- TAB SLIDE ---------------- */ .tablink { background:#f3f3f3; padding:15px; border:none; width:80%; margin-bottom:10px; border-radius: 4px; text-align:left; cursor: pointer; } .tablink:hover { opacity:0.8; } .AdminOn { background:#014d88; padding:15pxpx; border:none; width:80%; margin-bottom:10px; color:#ffffff; } /* W3.CSS 4.13 June 2019 by Jan Egil and Borge Refsnes */ /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */ .w3-sidebar.w3-collapse{display:block!important}} .w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%} .w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)} .w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0} .w3-bar .w3-button{white-space:normal} .w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important} .w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before, .w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both} /* animations */ .w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}} .w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} .w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}} .w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} .w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} .w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}