body { color: #d2def0; background: #303643; font-family: sans-serif; margin-left: 2em; margin-right: 2em; text-shadow: black 2px 2px 2px; padding-top: 8em; } a:link, a:visited { color: #7799bb; text-decoration: none; } a:active, a:hover { color: #99ccff; text-decoration: underline; } h1, h2, h3, h4 { color: #78889c; font-family: sans-serif; margin-top: 1.2em; margin-bottom: 1em; } p, dt { margin-top: .5em; margin-bottom: .5em; margin-left: 2em; } ol, ul, dd { margin-top: .5em; margin-bottom: 1em; margin-left: .5em; } li { margin-bottom: .5em; margin-left: .5em; } pre, blockquote { background: #2c3038; padding: 1em; } code { font-family: monospace; font-weight: bold; } big { color: #d2def0; font-size: 140%; text-shadow: black 4px 4px 8px; } small { font-size: 80%; } #header { background: linear-gradient(to bottom, #1c2028 0%, #303643 100%); margin: -2.5em; padding: 2em; position: fixed; top: 0; height: 8em; width: 100%; } #header h1 { margin-bottom: .5em; } #header img { padding-right: 2.2em; position: absolute; right: 0; z-index: +1; } #footer { background: linear-gradient(to bottom, #303643 0%, #1c2028 100%); margin: -2em; padding: 2em; } #menu { background: linear-gradient(to bottom, #303643 0%, #1c2028 100%); position: relative; width: 100%; height: 2.5em; line-height: 2.5em; margin-left: -2.5em; margin-right: -2.5em; padding-left: 2em; padding-right: 2em; border-width: 1px; border-bottom-style: solid; border-bottom-color: #595f6c; display: inline-block; } #menu a { float: left; text-decoration: none; padding-left: .8em; padding-right: .8em; } #menu a:hover { background: linear-gradient(to bottom, #595f6b 0%, transparent 100%); } #menu a.current { background: linear-gradient(to bottom, #595f6b 0%, #303643 50%); font-weight: bold; border-width: 1px; border-top-style: solid; border-top-color: #595f6b; border-top-left-radius: 4px; border-top-right-radius: 4px; border-left-style: solid; border-left-color: #595f6b; border-right-style: solid; border-right-color: #1c2028; border-bottom-style: none; } #menu ul { background: linear-gradient(to bottom, #303643 0%, #1c2028 100%); margin: 0; padding: 0; position: absolute; display: none; top: 2.5em; box-shadow: 1px 2px 4px 0 black; } #menu li { float: left; list-style: none; position: relative; } #menu li:hover > ul { display: block; } #menu ul li { float: none; margin: 0; padding: 0; display: block; border-width: 1px; border-top-style: none; border-left-style: solid; border-left-color: #595f6b; border-right-style: solid; border-right-color: #1c2028; border-bottom-style: none; min-width: 9em; } #menu ul li:last-child { border-bottom-style: solid; border-bottom-color: #1c2028; } #menu ul a { float: none; padding: 1em; display: block; height: auto; line-height: 4px; white-space: nowrap; text-transform: none; } #menu ul a:hover { background: linear-gradient(to bottom, #595f6b 0%, #1c2028 100%); } #menu ul li:first-child a:after { content: ''; position: absolute; left: 1em; top: -.5em; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #303643; } :target:before { content: ''; display: block; height: 9em; margin-top: -9em; } ::-moz-selection { color: #000033; background: #99ccff; text-shadow: none; } ::selection { color: #000033; background: #99ccff; text-shadow: none; }