/* tpl/main.css */ body { font-family: arial; font-size: 20px; width: 100%; height: 100%; margin: 0; padding: 0; } header { background: #ffffff url(../frontpage.jpg) center no-repeat; background-size: cover; width: 100%; height: 100vh; } #loginbox { position: absolute; width: 18em; left: calc(50% - 9em); bottom: 5em; } #loginbox p { background-color: #ffffff; text-align: center; padding: 0.2em; border-radius: 0.2em; } ul { list-style: none; padding: 0; margin: 0; } li { display: inline-block; padding: 0.2em; margin: 0.2em; background-color: #eeeeee; border-radius: 0.2em; } li img {height: 0.8em;} nav { vertical-align: middle; text-align: left; background-color: #9b0000; position: sticky; top: 0; z-index: 100; } nav ul { padding: 0 0.5em; } nav a { color: #ffffff; } nav li { padding: 0.5em 0.75em; font-weight: bold; margin: 0; background-color: #9b0000; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } nav li img { height: 0.9em; } nav li:hover { background-color: #ff0000; } nav .current li { background-color: #ffffff; color: #9b0000; } main { padding: 0 1.75em; } article { margin: 0 0 2em 0; max-width: 60em; } article:first-of-type { margin: 2em 0 2em 0; } article img { max-width: 100%; } article h1 img { height: 0.8em; } /*input[type="radio"],input[type="checkbox"] { width: auto; }*/ input[type="submit"] { background-color: #9b0000; color: #ffffff; } .login { width: 12em; text-align: center; border: 0.1em solid #000000; padding: 0.2em; margin: 0.1em; box-sizing: content-box; font-size: 100%; } a { color: #9b0000; text-decoration: underline; } a.toggleVisibility { text-decoration: none; color: #000000; } a.toggleVisibility > * { background-color: #eeeeee; display: inline; padding: 0.2em; border-radius: 0.2em; } div.toggleVisibility { padding: 0.2em; } div.toggleVisibility > * { margin-top: 1em; } table { font-family: arial; border-collapse: collapse; border: 1px solid #000000; width: 100%; } table table { width: auto; } td,th { border-bottom: 1px solid #c0c0c0; padding: 0.3em; } th { border-top: 1px solid #000000; background-color: #9b0000; border-color: #000000; color: #ffffff; text-align: left; } .important { color: #ff0000; font-weight: bold; } .hidden { display: none; } .list_entry_row { border-bottom: 0; border-left: 2px solid #000000; border-right: 2px solid #000000; border-top: 1px dashed #d0d0d0; padding: 0.2em; } .list_entry:last-of-type .list_entry_row:last-of-type { border-bottom: 0.1em solid #000000; padding: 0.2em; } .list_entry_title { border-bottom: 0; border-left: 2px solid #000000; border-right: 2px solid #000000; padding: 0.2em; border-top: 0.1em solid #000000; background-color: #d0d0d0; } .list_entry ul a { text-decoration: none; color: #000000; } .list_entry li a { padding: 0em 0.1em; background-color: #ffffff; border-radius: 0.2em; border: 1px solid #000000; } .list_entry_title li {background-color: #ffffff;} .list_entry a li {border: 1px solid #000000;} @media only screen and (orientation: portrait) { body { font-size: 5vw; } nav { font-size: 5vw; } main { padding: 0 1em; } nav li { padding: 1em 0.35em; } table { font-size: 5vw; } input,button,select { font-size: 5vw; } input[type=radio] { border: 0; height: 1em; } }