body{margin:0;font-family:"SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;background:#fff;}
@media (prefers-color-scheme: dark) {
    body{background:#222;color:#aaa;}
}
input[type="submit"],input[type="button"],button{padding:10px;border:1px solid #00509c;background:#00aeef;color:#fff;-moz-appearance: none;-webkit-appearance: none;}
input[type="submit"],input[type="button"]{margin:10px 0;}
table tr{line-height:30px;}
.w300{width:300px;}
/* iPads (portrait and landscape) ----------- */
@media only screen and (max-width : 1000px) {
    td{display:block;min-height:3em;font-size:1em;}
    input[type]{display:block;width:100%;height:2em;font-size:1em;padding:0;margin:0;}
    #logo{margin:0 auto;text-align:center;}
    #logo img{width:auto;max-height:6em;max-width:100%;height:auto;}
    #content{width:calc(100% - 20px);min-height:30em;margin:0 auto 6em auto;padding:20px 0;}
}
@media only screen and (min-width : 1000px) {
    #main{height:400px;}
    #logo{float:left;width:400px;border-right:1px solid #ccc;height:400px;}
    #loginbox{max-width:600px;margin:0 auto 0 auto;text-align:center;}
    #loginbox table{width:100%;}
    #loginbox input{width:300px;text-align:center;}
    #loginbox td:first-child{width:150px;}
    #content{width:80%;min-height:30em;margin:0 auto 6em auto;padding:0 20px 20px 20px;}
}