@font-face { font-family: 'Source Sans Pro'; font-weight: 600; font-style: normal; src: url('sourcesanspro-semibold-webfont.woff2') format('woff2'), url('sourcesanspro-semibold-webfont.woff') format('woff');} @font-face { font-family: 'Source Sans Pro'; font-weight: 400; font-style: normal; src: url('sourcesanspro-regular-webfont.woff2') format('woff2'), url('sourcesanspro-regular-webfont.woff') format('woff');} @font-face { font-family: 'Source Sans Pro'; font-weight: 300; font-style: normal; src: url('sourcesanspro-light-webfont.woff2') format('woff2'), url('sourcesanspro-light-webfont.woff') format('woff');} @font-face { font-family: 'Source Serif Pro'; font-weight: 300; font-style: italic; src: url('sourceserifpro-lightit-webfont.woff2') format('woff2'), url('sourceserifpro-lightit-webfont.woff') format('woff');} @font-face { font-family: 'Source Serif Pro'; font-weight: 400; font-style: italic; src: url('sourceserifpro-it-webfont.woff2') format('woff2'), url('sourceserifpro-it-webfont.woff') format('woff');} @font-face { font-family: 'Source Serif Pro'; font-weight: 600; font-style: italic; src: url('sourceserifpro-semiboldit-webfont.woff2') format('woff2'), url('sourceserifpro-semiboldit-webfont.woff') format('woff');} /* main css shortened!!! */ * { box-sizing: border-box; /*vertical-align: baseline; / not working!!! */ margin: 0; padding: 0; border: 0; } body { -webkit-text-size-adjust: none; font: normal 300 18pt/1.65em 'Source Sans Pro', sans-serif; color: #000; background: #f0f4f4; vertical-align: baseline; } i { font: italic 300 1em/1.65em 'Source Serif Pro', serif; } /* 'Lucida Console', Georgia, 'Times New Roman', Times */ a { color: inherit; text-decoration: underline; cursor:pointer; -webkit-text-decoration-color: #ef8376; text-decoration-color: #ef8376; transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; } a:hover { color: #ef8376; text-decoration: none; } h1, h2, h3, h4, h5, h6 { color: #f2000c; font-weight: 400; line-height: 1.25em; } h1 { font-size: 3em;} h2 { font-size: 2.1em;} h3 { font-size: 1.25em; } h4 { font-size: 1em; } h5 { font-size: .8em; } h6 { font-size: .6em; } li { margin-left: 1em;} header { margin: 0 0 1em 0; } #header { position: relative; margin: 0; padding: 1em 0; cursor: default; text-align: center; color: #fff; background: #999; } #header h2 { color: #fff; } #header h2 a { color: inherit; text-decoration: none; } #header img { height: 80px; background: #fff; } nav { position:sticky; top:0; height:3em; text-align:center; background: #f0f4f4;} nav button { width:100px; margin:1em calc(12.5% - 55px); padding:0; } input, button, .button, select, textarea {-webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; font-size: 0.8em; border-radius: 3px; } input, select, textarea { padding: .3em .3em; line-height: 130%; color: #33475b; background-color: #f5f8fa; border: 1px solid #cbd6e2; transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out; } label.required { padding-right:0; } label.required::after { content:"*"; color:red; } input[required], select[required], textarea[required]{ border-color:#fcc; } input:focus, select:focus, textarea:focus { background: #fff; border-color: green; } input[type="button"], input[type="submit"], input[type="reset"], button, .button { /*position: relative;*/ padding: 5px 24px; line-height: 1.75em; font-weight: 600; text-align: center; color: #fff; background-color: #ff7a59; cursor: pointer; border: 1px solid #ff7a59; border-radius: 3px; transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out; } input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover, .button:hover { background-color: #ff8f73;border-color: #ff8f73; } .wrapper { margin: 0 0 1em 0; padding: 2em 0; background: #fff; text-align:center; } .container { margin: 0 auto; width: 100%; max-width: 1400px; padding: 0 10px; } #footer { position: fixed; bottom:0; width:100%; overflow: hidden; padding:0; color: #000; background: #fff; } #footer .copyright { font-size: 0.8em; text-align: center; color: rgba(128, 128, 128, 0.75); cursor: default; } #footer li { display: inline-block; } /* form special */ form { display: grid; width:100%; grid: auto/100px auto; grid-gap: 2px 10px; text-align:left; } form label { text-align:right; font-size: 18pt; line-height: 1.5em; padding:2px 0; } form div { min-width: 100%; grid-column: 1/-1; justify-self: left; text-align:left; } form button { width:100px; } input[type="radio"] { -webkit-appearance: radio; -moz-appearance: radio; appearance: radio; margin:12px; width:30px; height:20px; margin-left:70px; } form[name='login'] { width:50%; } /* TIS special */ c,#tis div { text-align:right; padding:2px 5px; border-bottom:#999 dotted thin; /*outline:#000 dotted thin;*/ } #tislist { display:inline-block; text-align:left; } #tis { display: grid; grid: auto/2em 2em auto fit-content(20em); grid-gap: 0; } /* 5px fit-content(12em) */ #tis.full { grid: auto/1.5em 2em minmax(150px, 400px) auto; } #tis div { min-width:100%; grid-column: 1/-1; justify-self: left; text-align:left; } #tis div.I6 { border-top:#fff solid 2px; margin-top: -2px; padding-left:3em; } #tis textarea, #tis input[type="text"] { width:calc(100% - 60px); font-size:0.8em; vertical-align:top; } #tis button { float:right; width: 20px; padding:0; } #tis input[type="text"] { max-width:300px; } /* for old iPad: */ u { font-size:0.6em; } .allr { display:block; float:left; } .l { text-align:left; } .s { font-size:0.8em; line-height: 130%; } .rd { background:#faa; } .gr { background:#afa; } .or { background:#fda; } .st { text-decoration:line-through; } .sl { background:#f1f0ee; } c.l { display:block; } #prev { float:left; } #next { float:right; } #prev,#next { text-decoration:none; } #prev:hover, #next:hover { color:black; } #legend { position:fixed; top:0; bottom:0; left:0; width:100%; /*z-index:10;*/ padding:150px 100px; background-color:rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(3px); /*Safari only*/ display:none; } #legend div { width:500px; margin:auto; padding:20px; border-radius:10px; color:#000; background-color:#fff; text-align:left; } #legend c { display:inline-block; width:4em; } /*#legend a:first-child { float:right; font-size:2em; color:black; background-color:#ccc; margin:5px; padding:3px 4px 6px 5px; border-radius:3px; }*/ .show { display:block !important; } #index { position:fixed; top:50; right:0; width:20px; /*z-index:5;*/ } a[name] { position:absolute; margin-top:-75px; z-index:-1; } /* for sticky nav */ #plist { display:grid; grid:auto/2em 5em 3em auto;} #plist c { text-align:left;} #penalty { display:none; position:absolute; top: 160px; left:0; bottom:20px; width:100%; overflow:auto; padding:20px; background-color:#eee; } input[type="submit"] {width:min(100%,200px);} /* Upload */ #UPLOAD { display:none; position:absolute; top:0; bottom: 0; left:0; right:0; z-index:10; padding-top:10vh; background-color:rgba(200,200,200,0.9); -webkit-backdrop-filter:blur(3px); } #UPLOAD input { display:inline; width:200px; padding:0; border:none; background-color:white; } #UPLOAD>div:first-child { width:100%; margin:auto; max-width:1400px; padding:20px; background-color:white; } #UPLOAD button:first-child { float:right; margin:-19px -19px 0 0; width:40px; height:40px; padding:4px 5px 7px 6px; font-size:30px; line-height:20px; } @media screen and (max-width: 1680px){ #UPLOAD>div:first-child { max-width: 1200px; } } #f { padding: 10px 0; } #f input { width:100%; border: 1px solid #f00; padding:0 10px 10px 10px; } input[type="file"]::-webkit-file-upload-button { margin-top:12px; } #f input:after { content:"(drop file here)"; float:right; margin-top:8px; } #f div { margin-bottom: 5px; } img, canvas { vertical-align: top; border: 1px solid #ffffff; } #UP { position: relative; margin-top:-150px; width:100%; height:100% ; background-color:#fff; text-align:right; display: none; } #proc { float:left; width:80px; text-align:right; } #pBar { float:left; width:calc(100% - 100px); height: 6px; margin:15px 10px; -webkit-appearance: none; } #pBar::-webkit-progress-bar { background-color: #eee; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; } #pBar::-webkit-progress-value { background-color: red; } #resFrame { display:grid; grid:auto/auto auto auto; width: 100%; height: calc(100% - 20px); padding: 10px; overflow:auto; text-align:left; outline: 1px solid #aaa; } #resFrame div { grid-column:1/-1;} #small { font-size:8px; color:grey; } /*#plist button {float:right;}*/ /* not realy needed when no font-size change */ @media screen and (max-width: 1680px) { .container { max-width: 1280px; } } /* small special */ @media screen and (max-height: 600px) { #legend { zoom: 75%; line-height: 130%; } } /* mobile special */ @media screen and (max-width: 800px) { #header img { height: 70px; } } @media screen and (max-width: 600px) { .wrapper { padding: 1em 0; } #header { padding: 1em 0; font-size:.5em; } #header img { height: 40px; } h2 { font-size:1.4em; } input[type="submit"], form button { width:100%; } form label { text-align:left; } form { grid: auto/auto; width:100%;} form[name='login'] {width:100%;} #tis { grid: auto/auto auto; width:100%;} #tis.full { grid: auto/auto auto; } /*grid: auto/1.5em 1em 6em auto;*/ #tis div.I6 { padding-left:0; } c { text-align:left; } #plist { grid:auto/3em auto; } #penalty { top:80px; padding:5px; } #legend div { zoom: 60%; line-height: 150%; } }