# HG changeset patch
# User Tuomo Valkonen <tuomov@iki.fi>
# Date 1516212897 0
# Node ID bbf5bbd72f48ce1b694f1843e9a464fced710416
# Parent  5886bf51708bc86aa0d7d17349486a2f8ced0c46
Improved CSS for different display sizes

diff -r 5886bf51708b -r bbf5bbd72f48 example/src/style/default.css
--- a/example/src/style/default.css	Tue Jan 16 17:25:50 2018 +0000
+++ b/example/src/style/default.css	Wed Jan 17 18:14:57 2018 +0000
@@ -1,140 +1,133 @@
 
 body {
 	font-family: Optima, Linux Biolinum, Candara, sans-serif;
-        #font-weight: 300;
-        background: #ffffff; 
-	color: #000000;   
-	margin: 10px 40px 40px 40px;
-        max-width: 80ex;
-        text-align: left;
-	}
+    #font-weight: 300;
+    background: #ffffff; 
+    color: #000000;   
+    margin: 10px 40px 40px 40px;
+    max-width: 80ex;
+    text-align: left;
+}
 
 
-a 		{ color: #3399ee; text-decoration: none;  }
+a 		    { color: #3399ee; text-decoration: none;  }
 a:link		{ color: #3399ee;  }
 a:visited	{ color: #2288dd;  }
 a:active	{ color: #2288dd;  }
 a:hover		{ color: #2288dd;  }
 
 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .header a
-                { text-decoration: none; }
+{ text-decoration: none; }
 
 
 h1 {
-        margin: 1em 0em;
-        /*color: #45a9b0;*/
-	border-bottom: 1px solid #000000;
-        font-weight: bolder;
-        color: #000000;
-        font-size: xx-large;
-        /*font-variant: small-caps;*/
-        text-align: left;
-        }
+    margin: 1em 0em;
+    /*color: #45a9b0;*/
+    border-bottom: 1px solid #000000;
+    font-weight: bolder;
+    color: #000000;
+    font-size: xx-large;
+    /*font-variant: small-caps;*/
+    text-align: left;
+}
 
 h2, .inlinepage h1 {
-        /*color: #84c7c0;*/
-        color: #3399ee;
-	margin-bottom: 1em;
-	margin-top: 1.5em;
-	padding: 0;
-        /*text-transform: uppercase;*/
-	font-size: large;
-        font-variant: normal;
-	font-weight: bolder;
-	}
+    /*color: #84c7c0;*/
+    color: #3399ee;
+    margin-bottom: 1em;
+    margin-top: 1.5em;
+    padding: 0;
+    /*text-transform: uppercase;*/
+    font-size: large;
+    font-variant: normal;
+    font-weight: bolder;
+}
 
 h3, h4, h5, h6 {
 	margin-top: 1em;
 	margin-bottom: 0.05em;
 	font-size: medium;
 	color: #ffffff;
-	}
+}
 
 blockquote {
-        /*font-style: italic;*/
-        padding: 0 1ex;
-	border-left: 1px solid #3399ee;
-	}
+    /*font-style: italic;*/
+    padding: 0 1ex;
+    border-left: 1px solid #3399ee;
+}
 
 blockquote p {
-        margin: 0.9ex 0;
-        }
+    margin: 0.9ex 0;
+}
 
 blockquote em {
-        font-style: normal;
-        }
+    font-style: normal;
+}
 
 pre {
-        /*background-color: #a0a0a0;*/
-	padding: 0 1ex;
-	border-left: 2px dashed #3399ee;
-	}
-
-/*p.note {
-        font-size: small;
-        }*/
+    /*background-color: #a0a0a0;*/
+    padding: 0 1ex;
+    border-left: 2px dashed #3399ee;
+}
 
 hr {
-        border: none 0;
-        border-top: 2px dashed #84c7c0;
-        height: 1px;
-        width: 10ex;
-        margin: 1ex auto 1ex 0;
+    border: none 0;
+    border-top: 2px dashed #84c7c0;
+    height: 1px;
+    width: 10ex;
+    margin: 1ex auto 1ex 0;
 }
 
 table {
-        /*border: none 0;*/
-        border-collapse: collapse;
-	padding: 0.5ex;
+    /*border: none 0;*/
+    border-collapse: collapse;
+    padding: 0.5ex;
 }
 
 thead {
-	border-bottom: 2px dashed #84c7c0;
+ border-bottom: 2px dashed #84c7c0;
 }
 
 tr, td {
-        border: 0px solid #aaaac0;
-        padding: 0ex 1ex;
+    border: 0px solid #aaaac0;
+    padding: 0ex 1ex;
 }
 
 table[border="1"] tr, table[border="1"] tr td {
-        border: 1px solid #aaaac0;
+    border: 1px solid #aaaac0;
 }
 
-/*.note {
-        font-size: small;
-}*/
 
 
 key {
-        font-family: monospace;
+    font-family: monospace;
 }
 
 code {
-        font-family: monospace;
-        font-size: medium;
+    font-family: monospace;
+    font-size: medium;
 }
 
 li {
-	margin-top: 1em;
+ margin-top: 1em;
 }
 
 .illustr-left {
-        float: left;
-        padding-right: 1ex;
-        padding-bottom: 1ex;
-        padding-top: 1ex;
+    float: left;
+    padding-right: 1ex;
+    padding-bottom: 1ex;
+    padding-top: 1ex;
 }
 
 .illustr-right {
-        float: right;
-        padding-left: 1ex;
-        padding-bottom: 1ex;
-        padding-top: 1ex;
+    float: right;
+    padding-left: 1ex;
+    padding-bottom: 1ex;
+    padding-top: 1ex;
 }
 
 b{
-        font-weight: bolder;
+    font-weight: bolder;
 }
 
 .bibtex2html td {
@@ -163,22 +156,22 @@
 body {
 	margin: 0;
 	padding: 0;
-        max-width: none;
-        background-image: url('banner2x.jpg');
-        background-repeat: no-repeat;
-        background-size: 100%;
-	}
+    max-width: none;
+    background-image: url('banner2x.jpg');
+    background-repeat: no-repeat;
+    background-size: 100%;
+}
 
 body> .header {
 	margin: 0px;
-        margin-left: 60px;
-	padding: 120px 0px 20px 0px;
-        font-size: large;
-        font-weight: bolder;
-	line-height: 1em;
-	display: block;
-        /*height: 130px;*/
-	}
+    margin-left: 60px;
+    padding: 120px 0px 20px 0px;
+    font-size: large;
+    font-weight: bolder;
+    line-height: 1em;
+    display: block;
+    /*height: 130px;*/
+}
 
 body> .header a,
 body> .header a:link,
@@ -186,115 +179,127 @@
 body> .header a:active,
 body> .header a:hover {
 	/*color: #3377ee;*/
-        color: #000000;
-        text-decoration: none;
-        }
+    color: #000000;
+    text-decoration: none;
+}
 
 
 #content {
-        margin: 0; /*1em 40px 10px 40px;*/
-        padding: 0;
-        margin-left: 36ex;
-        max-width: 80ex;
-        text-align: left;
-        display: block;
+    margin: 0;
+    padding: 0;
+    margin-left: auto;/*30ex;*/
+    margin-right: auto;/*10ex;*/
+    max-width: 80ex;
+    text-align: left;
+    display: block;
 }
 
 #sidebar {
-        line-height: 3ex;
-        float: left;
-        margin: 0;
-        padding: 4ex 0px;
-        margin-left: 11ex;
-        padding-top: 2ex;
-        line-height: 150%;
+    line-height: 3ex;
+    float: left;
+    margin: 0;
+    max-width: 50ex;
+    padding: 4ex 0px;
+    margin-left: 8ex;
+    padding-top: 2ex;
+    line-height: 150%;
 }
 
 .sidetitle {
-	color: #000000;
-	margin-top: 3ex;
-        font-weight: bolder;
-        /*margin-left: -1.5ex;*/        
-	}
-
-.extra {
-        color: #ffffff !important;
-        display: inline;
-}
-
-.extra a {
-        color: #ffffff !important;
-}
-
-#sidebar a {
-        text-decoration: none;
-        font-weight: bolder;
-        color: #3388ee;
-}
-
-#sidebar ul {
-        list-style-type: none;
-}
-
-#sidebar LI {
-        display: block;
+    color: #000000;
+    margin-top: 3ex;
+    font-weight: bolder;
 }
 
 .side {
-	padding-left: 1.5ex;
-	text-align: left;
-	font-size: medium; /* feed to compliant browsers */
-	}
+    padding-left: 1.5ex;
+    text-align: left;
+    font-size: medium; /* feed to compliant browsers */
+}
 
-
-@media only screen and (max-device-width: 480px) {
+@media screen and (max-width: 140ex) {
 
     body> .header {
         padding: 0px;
     }
-    
-    .sidetitle {
-        font-size: x-large;
-    }
-    
+
     .side {
-	padding-left: 1.5ex;
-	padding-top: 2ex;
-	text-align: left;
-	font-size: x-large; /* feed to compliant browsers */
-        line-height: 300%;
-    }
-    
+        padding-top: 2ex;
+        text-align: left;
+        /*font-size: x-large; 
+        line-height: 300%;*/
+     }
+
     #sidebar {
-            margin: 1ex 2ex;
-            padding: 0ex 2ex;
-            float: none;
+        margin-left: 8ex;
+        padding: 0ex 2ex;
+        float: none;
     }
 
     #content {
-            margin: 1ex 2ex;
-            padding: 0ex 2ex;
-            max-width: none;
-            display: block;
+        margin-left: 8ex;
+        margin-right: 8ex;
+        padding: 0ex 2ex;
+        /*max-width: none;*/
+        display: block;
     }
 }
 
+@media screen and (max-device-width: 480px) {
+    .side {
+        font-size: large;
+        line-height: 200%;
+    }
+
+    #sidebar {
+        margin-left: 1ex;
+        font-size: large;
+    }
+
+    #content {
+        margin-left: 1ex;
+        margin-right: 1ex;
+    }
+}
+
+.extra {
+    color: #ffffff !important;
+    display: inline;
+}
+
+.extra a {
+    color: #ffffff !important;
+}
+
+#sidebar a {
+    text-decoration: none;
+    font-weight: bolder;
+    color: #3388ee;
+}
+
+#sidebar ul {
+    list-style-type: none;
+}
+
+#sidebar LI {
+    display: block;
+}
 
 .inlinepage {
 	padding: 0px 0px;
 	border: none;
 	/*border-top: 1px solid #aaaac0;*/
-        padding-top: 2ex;
-        margin-top: 2ex;
-        margin-bottom: 4ex;
+    padding-top: 2ex;
+    margin-top: 2ex;
+    margin-bottom: 4ex;
 }
 
 .inlinepage .header {
-        color: red;
-        font-size: large;
-        font-weight: bolder;
-        text-transform: uppercase;
-	}
+    color: red;
+    font-size: large;
+    font-weight: bolder;
+    text-transform: uppercase;
+}
 
 .posted-header {
 	color: #000;
@@ -304,27 +309,27 @@
 	font-weight: bolder;
 	/*font-size: small;*/ /* for compliant browsers */
 	border-bottom: 1px solid #000000;
-	}
+}
 
 .posted {
 }
 
 body> #footer .tags {
-        margin: 1em 0ex;
+    margin: 1em 0ex;
 }
 
 body> #footer #backlinks {
-        margin: 1em 0ex;
+    margin: 1em 0ex;
 }
 
 body> #footer .pageinfo {
-        margin: 1em 0ex;
+    margin: 1em 0ex;
 }
 
 body> #footer {
 	padding: 4ex 0ex;
-        margin: 1em 0ex;
-        clear: both;
+    margin: 1em 0ex;
+    clear: both;
 }
 
 .pageinfo {