margin: 0 auto;
max-width: calc(50em + 2*11em); /* content width plus 2*navi width */
}
-#page {
+
+/* The inner box */
+#title, #content {
border: solid #121212 1px;
background-color: #252525;
margin: 0 11.0em; /* navi width */
- border-radius: 10px;
padding: 0;
}
-#page h1 {
+#title {
+ border-bottom: none;
+ border-radius: 10px 10px 0px 0px;
+}
+#title h1 {
border-bottom: solid #08f 2px;
text-align: center;
padding: 0 0.7em;
+ margin-bottom: 0;
}
#content {
+ border-top: none;
+ border-radius: 0px 0px 10px 10px;
display: block;
- margin: 0.7em;
+ padding: 0.7em;
+ padding-top: 1px; /* If we use 0 here, things get ugly. What?!? */
}
+
/* Navigation menu */
#navi {
/* No border, no padding, so all the width computations become easy. */
width: 11.0em; /* navi width */
padding: 0;
margin: 0;
- margin-top:2.7em;
}
#navi ul {
margin: 0px;
}
#navi li {
/* Border around the links */
- margin-top:0.1em;
+ margin-bottom:0.1em;
background-color: #252525;
border-left: solid #36ff00 2px;
border-right: solid #36ff00 2px;
#navi li:hover a {
color: #DDD;
}
+
/* Small screens */
@media screen and (max-width:60em) {
- #frame, #page, #navi {
+ #frame, #title, #content, #navi {
margin: 0;
width: auto;
max-width: none;
clear: both;
}
- #page {
- /* the navi will be added above this */
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
#navi {
/* Place navi above the title */
float: none;
- border-top-left-radius: 10px;
- border-top-right-radius: 10px;
- border-bottom: solid #36ff00 2px;
+ border: solid #121212 1px;
+ border-bottom: none;
background-color: #252525;
- padding: 0.7em;
+ padding: 0;
}
#navi ul, #navi ul ul, #navi li, #navi li a {
margin: 0;
padding: 0;
display: inline;
}
+ #navi > ul {
+ padding: 0.3em;
+ display: block;
+ border-bottom: solid #36ff00 2px;
+ }
/* Display only parent and children, and deocare them appropriately */
#navi li {
display:inline-block;
text-decoration: underline;
}
}
+
/* Printing */
@media print {
- #frame, #page {
+ #frame, #title, #content {
margin: 0;
+ padding: 0;
width: auto;
max-width: none;
border: none;
}
- #page h1 {
+ #title h1 {
border: none;
}
#navi {