body { font-family: sans-serif; } /* ids generally in document order */ /* Overall container div, holds all content of page. Yes, I know it shouldn't have fixed width */ #main-container{ clear: both; width:80%; margin: 0 10%; padding: 0; padding-top: 12em; padding-bottom: 2em; } /* footer of the document, within #main-container */ #footer { clear: both; font-size: smaller; padding: 0 2em; text-align: center; color:white; background:rgba(196,196,196,0.95); width: 100%; margin: 0; bottom:0; position:fixed; z-index:150; _position:absolute; _top:expression(eval(document.documentElement.scrollTop+ (document.documentElement.clientHeight-this.offsetHeight))); } #header { width:100%; margin: -10px; padding: 0.25em 10%; position: fixed; z-index: 149; background-color: black; background-repeat: no-repeat; color: white; } #header h1 { background-color: transparent; } #header-logo { float: left; padding-right: 2.5em; } #nav{ float: left; margin: 0; min-height: 56px; width: 60%; } #nav ul li { padding: 0; margin: 0; display: inline; } #nav ul li a { color: white; text-decoration: none; font-weight: bold; padding: 0.25em 0.75em; margin: 0; } #nav ul li.active a { background: silver;} li.nav-item a:hover { background: rgb( 240, 240, 240) } li.nav-item a:active { background: gray; color: white; } .error { background-color: #663399;; color: white; } .widget { margin: 0; padding: 0.25em 1em; border: thin solid white; } .world { font-size: 8pt; } div.error { width: 100%; } form { width: 100%; background-color: silver; border: thin solid silver; } h1 { font-size: 300%; } h1, h2, h3, h4, h5 { background-color: black; color: white; padding-left: -20px; } input { background-color: white; } input.submit { background-color: green; } input.required:after { content: " \*"; color: red; } label, input { width: 45%; padding: 0.25em 1em; margin: 0 0.5em; } label { border-right: thin solid gray; }