* { font-family: sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 0; } body { background: #EEE; margin: 0; padding: 0; padding-top: 2.5em; position: absolute; min-height: 100%; width: 100%; padding-bottom: 2em; } .NAVIGATION { position: fixed; top: 0; display: inline-block; border-style: none solid solid solid; border-width: 0 1px 1px 1px; border-radius: 0 0 4px 4px; margin: 0 2em; padding: .5em 1ex; background: #FFF; z-index: 1; } .NAVIGATION label, .NAVIGATION a { color: #008; border: solid 1px #BBF; margin: .5em .5ex .25em .5ex; padding: .2em 3ex .2em 3ex; background: #EFF; } .NAVIGATION label:hover, .NAVIGATION a:hover { border-width: 2px 1px; background: #F3FFFF; } #CONFIGURE label[for="navigationconfig"] { display: none; } #CONFIGURE:target label[for="navigationconfig"] { display: inline; } .NAVIGATION input#navigationconfig { display: none; } .NAVIGATION input + form.config { position: static; display: none; } .NAVIGATION .config a { display: block; } .NAVIGATION .config a:hover { border-width: 1px 2px; } .NAVIGATION input:checked + form.config { display: block; } .NAVIGATION .config input[type=text], .NAVIGATION .config button { font-size: .875em; line-height: 1.5em; height: 1.75em; padding: 0 .25em; vertical-align: bottom; border: 1px solid #000; background-color: #FFF; } .NAVIGATION .config input[type=text] { margin: .25em 0 0 .375em; border-right: none; width: 70%; } .NAVIGATION .config button { min-width: 2.5em; text-align: center; max-width: 30%; } .NAVIGATION .config button[value=del] { background: #FCC; } .trailbtn { display: none; } .trailbtn + .trailbox { display: none; } .trailbtn:checked + .trailbox { display: inline-block; } .trailbtn:checked + .trailbox + .trailbtn { display: block; } .trailbtn:checked + .trailbox + .trailbtn:before { display: block; content: '+'; width: 3ex; text-align: center; margin-top: .25em; padding: .25em 0; background-color: #FFF; border-width: 1px; border-style: solid; } .trailbtn:checked + .trailbox + .trailbtn:checked, .trailbtn:checked { display: none; } #footer { width: 100%; background-color: #FFF; border-top: 1px solid #BBF; margin: 0; padding: .5em 2em; position: absolute; bottom: 0; }