@font-face { font-family: "Roboto"; src: url("/_fonts/Roboto-Regular.ttf") format("truetype"); font-weight:normal; } @font-face { font-family: "Montserrat"; src: url("/_fonts/Montserrat-VariableFont_wght.ttf") format("truetype"); font-weight:normal; } * { margin:0px; padding:0px;color:white; position:relative; font-family: "Roboto",sans-serif; box-sizing:border-box; } @keyframes vorliebJa { from { width:1px; left:30px; } to { width:60px; left:0px; } } html { height:100%;width:100%; } body { background:url(../_pics/metal_bg.jpg) no-repeat fixed center/cover; height:100%;width:100%; max-width:1024px; margin:auto auto; } /* Alles innerhalb von */ /* Allgemeines */ h1 { margin-bottom:18px; font-family: "Montserrat",sans-serif; font-size:28px; } img { max-width:100%; } div.section { padding:16px 24px; border: 1px solid #888; box-shadow: 0 0 16px #aaa; margin:0 8px 8px; } .section:before { content:""; display:block; position:absolute; width:100%; height:100%; top:0;left:0; background:black; opacity:0.5; z-index:-1; } .about { width:100%; } .about div.section { margin-left:1%; margin-right:1%; width:48%; float:left; } .about > div:first-child { width:43%; } .about > div:last-child { width:53%; } @media screen and (max-width: 639px) { div.about div.section { width:auto; margin-left:8px; margin-right:8px; float:none; } } .about h5 { font-size:16px; } .about h4 { padding-left:69px; font-size:16px; font-weight:normal; width:50%; float:left; } @media screen and (max-width: 1023px) { .about h4 { float:none; width:auto; } .about > div.section { width:48%; } } .about h4 div { overflow:hidden; height:14px; display:block; position:absolute; left:0px; border:1px solid white; } .about h4 div:before { content:""; display:block; position:absolute; width:60px; height:14px; top:0px;left:0px; background:linear-gradient(90deg, red, green, green,green); animation-name:vorliebJa; animation-duration:2s; } .about h4.unknown div:before { font-size:10px; content:"keine Erf."; line-height:10px; text-align:center; } .about p { padding-left:8px; padding-bottom:4px; } .toys .itemCont { display:flex; flex-wrap:wrap; } .toys .item { text-align:center; flex:max-content; margin-bottom:20px; } .toys .item img { height:200px; } a img { border:0px solid red; } a:hover { color:#08d;/*#80c0FF;*/ } ul { list-style-position:inside; } div.links div.section a { line-height:26px; } input { background:transparent; border:1px solid white; } /* Header */ #header { width:100%; padding-bottom:8px; padding-top:8px; } .banner { display:block; margin:0 auto; } #checkbox2 + label { display:none; background:rgba(255,255,255,0.8); padding:8px; width:34px; margin:0 auto 4px; box-sizing:content-box; } #mainMenu { list-style:outside none none; display:flex; background:rgba(255,255,255,0.9); margin-top:8px; border:1px solid #444; border-radius:8px; box-shadow:0 0 16px white; padding:4px; } #mainMenu li { width:110px; border-radius:6px; } #mainMenu a,#mainMenu .selected { display:block; text-align:center; text-decoration:none;font-size:16px; color:#ff8100;cursor:default;padding:0px 2px; border-radius:3px; margin:3px; font-weight:800; margin-left:6px;} #mainMenu a>span,#mainMenu .selected>span { color:#048; line-height:32px; } #mainMenu .selected { background:rgba(140,150,160,0.8); box-shadow:0px 0px 4px #468; } #mainMenu .selected>span { color:#eee; } #mainMenu a:hover span { color:white; } #mainMenu a:hover { background:rgba(0, 44, 109,0.7); box-shadow:0px 0px 4px #000; } @media screen and (max-width: 1023px) { #mainMenu { border-radius:0; border-left-width:0; border-right-width:0; } } @media screen and (max-width: 719px) { #mainMenu { flex-direction:column; position:absolute; left:-120%; top:50px; width:100%; box-sizing:border-box; transition:all .6s ease; -webkit-transition:all .6s ease; z-index:10; } #checkbox2 + label { display:block; } #checkbox2:checked ~ #mainMenu { left:0; } #mainMenu li { width:100%; } } /* Hamburger Symbol */ .visuallyHidden { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .hamburger { margin: 0 auto; width: 30px; height: 30px; position: relative; } .hamburger .bar { padding: 0; width: 30px; height: 4px; background-color: black; display: block; border-radius: 4px; transition: all 0.4s ease-in-out; position: absolute; } .bar1 { top: 0; } .bar2, .bar3 { top: 13px; } .bar3 { right: 0; } .bar4 { bottom: 0; } .checkbox2:checked + label > .hamburger2 > .bar1{ transform: translateX(40px); background-color: transparent; } .checkbox2:checked + label > .hamburger2 > .bar2{ transform: rotate(45deg); } .checkbox2:checked + label > .hamburger2 > .bar3{ transform: rotate(-45deg); } .checkbox2:checked + label > .hamburger2 > .bar4{ transform: translateX(-40px); background-color: transparent; } /* Main */ #main { width:100%; } .inhalt { padding:16px 24px; border:1px solid #888; box-shadow:0 0 16px #aaa; margin:0 8px 8px; } @media screen and (max-width: 450px) { .inhalt { margin:0 0 8px; border-right:0; border-left:0; padding:8px 12px; } } .inhalt:before { content:""; display:block; position:absolute; width:100%; height:100%; top:0;left:0; background:black; opacity:0.5; z-index:-1; } .inhalt .inhalt { margin:10px; } .cal_empty, .cal_day_empty ,.cal_day_event, .cal_title{ float:left; margin:1px; height:70px; border:1px solid gray; color:silver; text-align:center; font-size:13px; width:13.7%; } .cal_day_event, .cal_day_empty, .cal_title{ border:1px solid white; color:white; } .cal_day_event { font-weight:bold; color:#0080ff; } .cal_title { height:24px; font-size:16px; } .cal_buttonL , .cal_buttonR{ width:22.5%;/*170px;*/ font-size:13px; float:left; } .cal_buttonM { width:55%;/*400px;*/ font-size:26px; float:left; text-align:center; height:40px; } .cal_buttonR { text-align:right; } .cal_buttonL a, .cal_buttonR a { text-decoration:none; } .ja,.ja2,.leer,.unbek,.nein { padding-left:24px;float:left;width:170px; } .ja:before,.ja2:before,.leer:before,.unbek:before,.nein:before { border:1px solid white; } .ja:before,.ja2:before,.leer:before,.unbek:before,.nein:before,.ja2:after,.unbek:after { content:""; display:block; position:absolute; width:18px; height:18px; left:0px;top:2px; } .ja:before { background:green; animation-name:vorliebJa; animation-duration:2s; } .nein:before {background:red; animation-name:vorliebJa; animation-duration:2s; } .leer:before {background:#aaa; animation-name:vorliebJa; animation-duration:2s; } .ja2:after { width:9px; left:1px;top:3px; background:green; animation-name:vorliebJa; animation-duration:2s; } .unbek:after { width:0px; height:0px; left:1px;top:3px; border-left:18px solid transparent; border-bottom:18px solid green; } /*Über mich*/ .stat_name,.stat_val { display:block; } .stat_name { font-weight:bold; } .stat_val { margin-left:20px } div.stats { margin-bottom:8px; } div.pref{ height:22px; line-height:22px; margin-bottom:4px; } .pref_name { width:200px; } .pref_name:before { width:22px; height:22px; display:inline-block; margin-right:4px; text-align:center; color:white; } .pref_Jaaa:before { content:"+"; border:1px solid white; background:green; } .pref_Neinnn:before { content:"-"; border:1px solid red; background:red; } .pref_Ja:before { content:""; border:1px solid white; background:green; } .pref_Nein:before { content:""; border:1px solid white; background:red; } .pref_Unbekannt:before { content:"?"; border:1px solid green; } .pref_Neutral:before { content:""; border:1px solid gray; } .pref_descr { margin-left:8px; } .pref_descr:before { content:"("; } .pref_descr:after { content:")"; } /* Kontakt */ a.post::after { content:"@wehrlos.at"; } p.contact { margin-bottom:8px; } p.contact a,p.contact span { display:block; } p.contact span { margin-left:20px; } /* Login */ form.login { border:1px solid white;padding:18px;margin:24px auto;width:282px; } @media screen and (max-width: 359px) { form.login { border:0;width:100%; padding:0; } } input.login { margin-left:8px;display:block;width:244px;padding:4px 8px; margin-bottom:16px; margin-top:4px; } @media screen and (max-width: 299px) { input.login { margin-left:1%; width:98%; box-sizing:border-box; } } p.buttonBoard { text-align: right; margin-top:24px;' } input[type=submit] { padding:4px 8px; } input[type=submit]:hover { background:rgba(65, 95, 142,0.7); box-shadow:0 0 18px white; } /*Toys*/ .sub div:nth-child(2n) img { float:left; } .sub div:nth-child(2n+1) img { float:right; } .item img, .item p { margin:0 8px 8px; } .item img { border:1px solid white; padding:8px; } /*Gallery*/ .thumbPnlCont { height:90px; overflow-x:scroll; } .thumbPnl { display:flex; height:100%; position:absolute; } .thumb { display:block; padding:2px; border:1px solid white; margin:2px; width:64px;height:64px; background-size:cover; } .picPnl { } div.galPic { margin:10px 0; display:none; text-align:center; } div.galPic:target { display:block; } img.galPic{ border:1px solid white; padding:8px; } a.arrowLeft, a.arrowRight { display:block; position:absolute; top:8px;left:8px; width:32px;height:32px; background:white; opacity:0.4; border-radius:50%; line-height:29px; text-align:center; } a.arrowLeft:hover, a.arrowRight:hover { opacity:0.8; } a.arrowRight { right:8px; left:auto; } .arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; } .right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .left { transform: rotate(135deg); -webkit-transform: rotate(135deg); } a.closeGalery { display:block; position:absolute; top:8px;right:8px; width:32px;height:32px; background:white; opacity:0.4; border-radius:50%; z-index:1; } a.closeGalery:hover { opacity: 0.8; } a.closeGalery:before, a.closeGalery:after { position: absolute; left: 15px; content: ' '; height: 24px; width: 2px; background-color: #333; top:4px; } a.closeGalery:before { transform: rotate(45deg); } a.closeGalery:after { transform: rotate(-45deg); }