* { 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: 2.5em 0 0 0; } .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 auto auto 3%; padding: .5em 1ex .5em 1ex; background: #FFF; z-index: 1; } .NAVIGATION a { color: #008; border: solid 1px #BBF; margin: .5em .5ex .25em .5ex; padding: .2em 3ex .2em 3ex; background: #EFF; } .NAVIGATION a:hover { border-width: 2px 1px 2px 1px; background: #F3FFFF; } .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; }