First stab at CSS file for handhelds. Pretty much the same as the normal

CSS file, except the left menu now appears below the body text (with the
text shifted to the left edge) and some images have been removed.

diff --git a/www/styles/handheld.css b/www/styles/handheld.css
new file mode 100644 (file)
index 0000000..c2cfbb0
--- /dev/null
+++ b/www/styles/handheld.css
@@ -0,0 +1,152 @@
+html,body {
+       background: #ffffff;
+       color: #000000;
+       font-family: sans-serif;
+       font-size: small;
+       margin: 0px;
+       padding: 0px;
+}
+
+/* Contains the entire of the page */
+#container {
+       padding: 0px;
+}
+
+/* Contains the menu */
+#menu {
+       margin: 5px;
+       background: #eeeeFF;
+       color: #000000;
+       border: 1px solid #000066;
+}
+#menu .cornerlogo {
+       display: none;
+}
+#menu .heading {
+       background: #000066;
+       color: #ffffff;
+       margin: 0px;
+       padding: 3px;
+}
+#menu .logo {
+       display: none;
+}
+#menu ul {
+        margin: 5px;
+       padding: 5px 0px 5px 0px;
+       text-align: center;
+        list-style: none;
+}       
+
+/* Contains the main page - including header and footer */
+#main {
+       padding: 0px;
+}
+
+/* Contains the header */
+#header {
+       padding: 0px;
+       display: none;
+}
+
+/* Contains the footer */
+#footer {
+       padding: 10px 0px 10px 0px;
+}
+#footer p {
+       text-align: center;
+       font-size: x-small;
+}
+
+/* Contains the body text of the page */
+#contents {
+       padding: 0px 15px 0px 15px;
+}
+#contents .top {
+       margin-top: 0px;
+}
+#contents h1 {
+       padding: 5px;
+       margin: 30px -15px 20px -15px;
+       background: #eeeeff;
+       border-bottom: 5px solid #000066;
+       color: #000066;
+}
+#contents h2 {
+       padding: 4px;
+       margin: 20px -10px 20px -10px;
+       background: #eeeeff;
+       color: #000000;
+       border-bottom: 2px solid #000066;
+}
+#contents h3 {
+       padding-top: 5px;
+       margin: 10px -5px 10px -5px;
+       border-bottom: 1px solid #000066;
+}
+#contents pre {
+       border-left: 2px solid #ff0000;
+       margin-left: 5px;
+       padding-left: 5px;
+       background: #f0f0f0;
+       color: #000000;
+       /*font-size: larger;*/
+}
+#topnav {
+       margin: -15px -10px 0px 0px;
+       padding: 0px;
+       background: transparent;
+       color: #000000;
+}
+#topnav ul {
+       padding-left: 0px;
+       margin-left: 0px;
+       display: inline;
+}
+#topnav li {
+       padding: 3px;
+       list-style: none;
+       display: inline;
+}
+#cvslog div {
+       border: 2px solid #000066;
+       margin: 15px 0px 15px 0px;
+}
+#cvslog div.logitemfirst {
+       margin: 0px;
+       padding: 5px 0px 5px 0px;
+       border: 0px;
+}
+#cvslog div.logitem {
+       margin: 0px;
+       padding: 5px 0px 5px 0px;
+       border: 0px;
+       border-top: 1px dashed #000066;
+}
+#cvslog h3 {
+       background: #000066;
+       color: #ffffff;
+       margin: 0px;
+       padding: 3px;
+}
+#cvslog a.cvsloghead {
+       color: #ffffff;
+}
+#cvslog p {
+       margin: 0px;
+       padding: 5px;
+}
+#cvslog pre {
+       padding: 5px;
+       margin: 10px;
+}
+
+/* All images have no border */
+img {
+       border: 0px;
+}
+
+/* For when we want to hide something to CSS browsers */
+.invisible {
+       display: none;
+}