/* 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; /*padding: 1em;*/ width: 100%; } header.frontpage { height: 100vh; } header.content { display: none; } #login { position: absolute; width: 18em; left: calc(50% - 9em); bottom: 5em; } #login p { background-color: #ffffff; text-align: center; padding: 0.2em; border-radius: 0.2em; } nav { vertical-align: middle; text-align: left; background-color: #9b0000; position: sticky; top: 0; z-index: 100; /*width: 100vw;*/ } nav ul { padding: 0 0.5em; margin: 0; list-style: none; } nav a { color: #ffffff; } nav li { display: inline-block; padding: 0.5em 0.75em; font-weight: bold; margin: 0; border-top-left-radius: 0.2em; border-top-right-radius: 0.2em; } nav li:hover { background-color: #ff0000; } nav a.current li { background-color: #ffffff; color: #9b0000; } main { padding: 0 1.75em; } footer { padding: 0 2em; background-color: #ffff00; } 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,button,select { font-size: 1em; width: 12em; } input[type="radio"],input[type="checkbox"] { width: auto; } input[type="submit"] { background-color: #9b0000; color: #ffffff; } input.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 { /* background-color: #eeeeee;*/ padding: 0.2em; /* border-radius: 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; } @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: 0px; height: 1em; } }