body { font-size: 18px; padding: .8em; overflow: hidden; color: #222; font-family: Tahoma; } a { text-decoration: none; color: #44f; } /* Login form */ #logo { display: block; margin: 0 auto; margin-bottom: .5em; width: 80%; } button, input, select { font-size: 1em; } #fields { max-width: 11em; margin: 0 auto; } #inputs > div { margin-top: 1em; } #inputs > div > * { display: block; } label { font-weight: normal; font-size: .9em; } #inputs label { color: #666; font-size: .8em; } input[type='text'], input[type='password'] { width: 100%; border: none; border-bottom: 1px solid #888; font-size: .9em; color: #333; padding: .3em; max-width: auto; } #checkbox { margin-top: 1em; } #submit { margin-top: 1em; } #clean { margin-top: .5em; font-size: .8em; } #submit, #clean { text-align: center; } button { border: none; color: white; background-color: #f7931e; padding: .3em; text-transform: uppercase; } button:hover { background-color: #f7b33e; cursor: pointer; } /* Message */ #message { z-index: 2; position: absolute; top: 2em; left: 50%; width: 16em; padding: .5em; margin-left: -8.25em; border: 1px solid #644; background-color: #EBB; color: #644; text-align: center; font-size: .9em; display: none; } #message.error { border-color: #644; background-color: #EBB; color: #644; } #message.notice { border-color: #446; background-color: #bbe; color: #446; } /* Spinner */ #background { z-index: 1; position: absolute; width: 100%; height: 100%; background-color: black; opacity: 0.7; filter: alpha(opacity=70); top: 0; left: 0; display: none; } #spinner { z-index: 2; position: absolute; padding: .8em; width: 10em; height: 2em; margin-top: -1.4em; margin-left: -5.4em; top: 50%; left: 50%; background-color: white; display: none; text-align: center; border: 1px solid black; } #spinner * { vertical-align: middle; } #spinner img { width: 1.8em; height: 1.8em; margin-right: .5em; } #loading-message { font-size: .9em; }