Make navigation header size adaptive

See http://www.w3.org/TR/css3-mediaqueries/

1 files changed, 18 insertions, 4 deletions

diff --git a/style/style.css b/style/style.css
index 367fc3a..002fc94 100644
--- a/style/style.css
+++ b/style/style.css
@@ -35,7 +35,6 @@ body
   {
     position: relative;
     top: 0em ! important;
-    
   }
   /* this is needed so that the local anchors are displayed below the naviagtion */
   div.footnote a[name], div.refnamediv a[name], div.refsect1 a[name], div.refsect2 a[name], div.index a[name], div.glossary a[name], div.sect1 a[name]
@@ -56,12 +55,11 @@ body
   {
     padding-top: 5em;
     padding-bottom: 500px;
-    max-width: 800px;
-    margin: auto;
+    max-width: 60em;
   }
   p
   {
-    max-width: 800px
+    max-width: 60em;
   }
   /* style and size the navigation bar */
   table.navigation#top
@@ -98,6 +96,22 @@ body
     color: #babdb6;
   }
 }
+@media screen and (min-width: 60em) {
+  /* screen larger than 60em */
+  body { margin: auto; }
+}
+@media screen and (max-width: 60em) {
+  /* screen less than 60em */
+  #nav_hierarchy { display: none; }
+  #nav_interfaces { display: none; }
+  #nav_prerequisites { display: none; }
+  #nav_derived_interfaces { display: none; }
+  #nav_implementations { display: none; }
+  #nav_child_properties { display: none; }
+  #nav_style_properties { display: none; }
+  #nav_index { display: none; }
+  #nav_glossary { display: none; }
+}
 @media print {
   table.navigation {
     visibility: collapse;