X-Git-Url: http://git.shiar.nl/sheet.git/blobdiff_plain/8da111b671c9914450077a1ec506964e70dceb40..aba1357633e2f377e38961d379cf072aa7462afd:/base.css

diff --git a/base.css b/base.css
index 40d0cb1..366499e 100644
--- a/base.css
+++ b/base.css
@@ -1,3 +1,11 @@
+/* media features */
+
+@import url(terse.css) all and (max-width: 80em);
+
+@import url(mono.css) all and (monochrome);
+
+/* general */
+
 body {
 	background: #FFF;
 	color: #000;
@@ -21,6 +29,20 @@ h2 {
 	margin-bottom: -4ex;
 }
 
+/* footer */
+
+hr {
+	clear: both;
+	visibility: hidden;
+	height: 2ex;
+	margin: 0;
+}
+
+p.footer {
+	margin: 0;
+	text-align: center;
+}
+
 /* "keyboard" (list of keys) */
 
 ul {
@@ -68,7 +90,7 @@ ul.keys li b {
 	line-height: 2.5ex; /* inherits otherwise */
 	padding-left: 2px;
 }
-ul.keys.omni li {
+ul.keys.omni li { /* omni-present esc */
 	width: 8.5em;
 }
 
@@ -96,6 +118,7 @@ ul.keys.ctrl li b small { /* meta key indicator */
 .po {background: #DFA}   /* window */
 .co {background: #FFA}   /* command */
 .ci {background: #BFE}   /* info */
+.cp {background: #FDA}   /* TODO */
 .mi {background: #FCA}   /* insert mode */
 .mo {background: #FCC}   /* mode */
 .mv {background: #ECE}   /* visual mode */
@@ -105,6 +128,7 @@ ul.keys.ctrl li b small { /* meta key indicator */
 .mo[onclick]:hover {background: #F88}
 .me[onclick]:hover {background: #99F}
 .mv[onclick]:hover {background: #D9D}
+.co[onclick]:hover {background: #EE4}
 
 .no {
 	background: #EEE;
@@ -125,20 +149,6 @@ ul.keys li.vim7 {
 	-moz-border-radius: 0;
 }
 
-/* footer */
-
-hr {
-	clear: both;
-	visibility: hidden;
-	height: 2ex;
-	margin: 0;
-}
-
-p.footer {
-	margin: 0;
-	text-align: center;
-}
-
 /* l/r help columns */
 
 .help {
@@ -148,13 +158,14 @@ p.footer {
 .help > * {
 	display: table-cell;
 	width: 20%;
+	vertical-align: top;
 }
 
 .left dl.legend {
-	margin-left: 6.2em;
+	margin-left: 6.4em; /* a bit over 6.2em to allow for borders+padding (border-sizing would work too) */
 }
 .left dl.legend dt {
-	margin-left: -6.2em; /* msie<=6 multiply this by two for some reason */
+	margin-left: -6.4em; /* msie<=6 multiply this by two for some reason */
 	float: left;
 	clear: left;
 }
@@ -162,10 +173,10 @@ p.footer {
 	float: left; /* align next to dt (except msie<=7 does just the opposite) */
 }
 .right dl.legend {
-	margin-right: 6.2em;
+	margin-right: 6.4em;
 }
 .right dl.legend dt {
-	margin-right: -6.2em;
+	margin-right: -6.4em;
 	float: right;
 	clear: right;
 }
@@ -201,7 +212,10 @@ ul.legend-set li {
 
 /* printing hints */
 
-@page {size: landscape}
+@page {
+	size: landscape;
+	margin: 0;
+}
 
 @media print {
 	ul.legend-set {display: none}