+* {
+ 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; }
+