Fix layout and CSS to duplicate www.mathjax.org in all browsers

docs/source/mjtheme/layout.html

@@ -148,6 +148,7 @@
     {% if for_site %}
     <div id="wrapper">
       <div id="header">
+        <div id="masthead">
           <div id="branding" role="banner">
             <h1 id="site-title">
               <span>
@@ -202,7 +203,7 @@
                 </li>
                 <li id="menu-item-848" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/resources/">Resources</a>
                   <ul class="sub-menu">
-                  <li id="menu-item-1262" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/download/">Download</a></li>
+                    <li id="menu-item-1262" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/download/">Get MathJax</a></li>
                     <li id="menu-item-1151" class="menu-item menu-item-type-custom"><a href="http://www.mathjax.org/resources/docsindex/">Documentation</a></li>
                     <li id="menu-item-1257" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/resources/articles-and-presentations/">Articles, Presentations, and Tutorials</a></li>
                     <li id="menu-item-860" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/resources/browser-compatibility/">Browser Compatibility</a></li>
@@ -218,11 +219,14 @@
                 </li>
                 <li id="menu-item-853" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/sponsors/">Sponsors</a></li>
                 <li id="menu-item-854" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/contact/">Contact</a></li>
-              <li id="menu-item-1167" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/download/">Download</a></li>
+                <li id="menu-item-1167" class="menu-item menu-item-type-post_type"><a href="http://www.mathjax.org/download/">Get MathJax</a></li>
               </ul>
             </div>
           </div>
         </div>
+      </div>
+      <div class="clear"></div>
+
     {% endif %}
 {%- block header %}{% endblock %}
 

docs/source/mjtheme/static/mj.css_t

@@ -7,85 +7,91 @@
 
 {% if for_site %}
 
-/* style copied over from http://mathjax.org/ for the header */
+/******************************************
+ *  CSS configuration from www.mathjax.org
+ ******************************************/
 
+/*
+ *  Culled from twentyten style.css
+ */
+ *
+#access .menu-header,
+#branding,
+#wrapper {
+	margin: 0 auto;
+	width: 940px;
+}
+#wrapper {
+	margin-top: 20px;
+	background: #fff;
+	padding: 0 20px;
+}
+
+#site-info {
+	float: left;
+	width: 700px;
+	font-weight: bold;
+	font-size: 14px;
+}
 body {
 	background: #D2D3D3 ! important;
 }
-#wrapper {
-    background: white;
-    padding: 0;
-    margin: 20px auto;
-    width: 980px;
-}
 
-/* deal with sphinx css not reseting anything */
 
-.widget_search fieldset {
+#header {
-    border: 0;
+	padding: 30px 0 0 0;
-    margin: 0;
-    padding: 0;
 }
-.icon-list {
+#site-title {
-    margin: 0; padding: 0;
+	float: left;
+	margin: 0 0 18px 0;
+	width: 700px;
+	font-size: 30px;
+	line-height: 36px;
+}
+#site-title a {
+	color: #000;
+	font-weight: bold;
+	text-decoration: none;
+}
+#site-description {
+	clear: right;
+	float: right;
+	font-style: italic;
+	margin: 14px 0 18px 0;
+	width: 220px;
 }
-
-/* from wp twentyten */
 
 #branding img {
+	clear: both;
+	border-top: 4px solid #000;
 	display: block;
+	border-bottom: 1px solid #000;
 }
 
-.widget_search label {
-    display: none;
-}
-.screen-reader-text {
-    left: -9000px;
-    position: absolute;
-}
-.widget_search input {
-    color: #666;
-    font-size: 12px;
-    line-height: 18px;
-}
-
-.widget_search input[type="text"] {
-    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px inset;
-    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
-    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
-    background: #F9F9F9;
-    border: 1px solid #CCC;
-    padding: 2px;
-}
 
 #access {
-    font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
 	background: #000;
-    margin: 20px auto 0;
+	margin: 0 auto;
 	width: 940px;
 	display:block;
 	float:left;
 }
-#access .menu-header,
+#access .menu-header {
-div.menu {
 	font-size: 13px;
 	margin-left: 12px;
 }
-#access .menu-header ul,
+#access .menu-header ul {
-div.menu ul {
 	list-style: none;
 	margin: 0;
 }
-#access .menu-header li,
+#access .menu-header li {
-div.menu li {
 	float:left;
 	position: relative;
 }
 #access a {
 	display:block;
 	text-decoration:none;
-    color: #DDD;
+	color:#aaa;
-    font-weight: bold;
 	padding:0 10px;
 	line-height:38px;
 }
@@ -138,26 +144,110 @@ div.menu li {
 	color:#fff;
 }
 
-/* HEADER */
+.navigation {
-
+	font-size:  12px;
-#header {
+	line-height: 18px;
-    background: #ffffff;
+	overflow: hidden;
-    padding: 20px;
+	color: #888;
-    height: 95px;
 }
-#branding {
+.navigation a:link,
+.navigation a:visited {
+	color: #888;
+	text-decoration: none;
+}
+.navigation a:active,
+.navigation a:hover {
+	color: #FF4B33;
+}
+
+.widget_search #s { /* This keeps the search inputs in line */
+	width: 60%;
+}
+.widget_search label {
+	display:none;
+}
+.widget-container {
+	margin: 0 0 18px 0;
+}
+
+#site-info {
+	font-weight: bold;
+}
+#site-info a {
+	color: #000;
+	text-decoration: none;
+}
+
+#access,
+.navigation {
+	-webkit-text-size-adjust: 120%;
+}
+#site-description {
+	-webkit-text-size-adjust: none;
+}
+
+
+@media print {
+	body {
+		background:none !important;
+	}
+	#wrapper {
+		float: none !important;
+		clear: both !important;
+		display: block !important;
+		position: relative !important;
+	}
+	#header {
+		border-bottom: 2pt solid #000;
+		padding-bottom: 18pt;
+	}
+	#site-title,
+	#site-description {
+		float: none;
+		margin: 0;
+		padding:0;
+		line-height: 1.4em;
+	}
+	#access,
+	#branding img,
+	#respond,
+	.navigation {
+		display: none !important;
+	}
+	#header {
+		width: 100%;
+		margin: 0;
+	}
+	#site-info {
+		float: none;
+		width: auto;
+	}
+}
+
+/*
+ *  from mathjax style.css
+ */
+
+.clear {
+    clear: both;
+}
+
+/* HEADER */
+#header {
+	padding: 20px 0 0;
 }
 #site-title {
-    float: left;
     margin: 0;
     width: 300px;
 }
+
 #branding img {
 	border: 0;
 }
+
 #site-description {
     margin: 36px 0 0;
-    font-size: 18px; line-height: 18px;
+    font-size: 18px;
     float: left;
     width: auto;
     font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
@@ -191,13 +281,13 @@ div.menu li {
     height: 16px;
     float: left;
 }
-.widget_search input[type="text"] {
+input[type="text"], textarea {
     border: 2px solid #b5bfb8;
     background-color: #eaeaea;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
 }
-.widget_search input[type="text"]:focus {
+input[type="text"]:focus, textarea:focus{
     outline-width: 0;
     border-color: #169538;
 }
@@ -210,9 +300,8 @@ div.menu li {
 /* NAVIGATION */
 
 #access {
-    margin: 20px 0px 0px;
+    margin: 20px 0 10px;
 }
-#access ul { padding: 0; }
 #access li { min-width: 20px; }
 #access a { color: #dddddd; font-weight: bold; }
 #access a:hover, #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a,
@@ -229,6 +318,7 @@ div.menu li {
 }
 
 #menu-item-1167 {
+    margin-right: 12px;
     float: right !important;
     background: #E18B16 !important;
 }
@@ -239,15 +329,74 @@ div.menu li {
     color: #ffffff !important;
 }
 
-/* modify layout to match mathjax site */
 
-.related, .document { 
+
-    width: 940px !important;
+/*
-    margin: 0 auto;
+ *  Adjustementst to www.mathjax.org settings to work with
+ *  to match the global settings from www.mathjax.org
+ */
+
+#access {
+  margin-bottom: 1px;
 }
 
+fieldset {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
+#header {
+ font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
+ line-height:18px;
+}
+
+#header-box-right {
+  line-height: 18px;
+  font-size: 12px;
+  border: 0;
+  padding: 0;
+}
+#header-box-right ul, #header-box-right form {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+#header-box-right .icon-list {
+  margin-left: 93px
+}
+
+#header input {
+  font-family: Georgia, "Bitstream Charter", serif;
+}
+#header input[type="text"] {
+  padding: 2px;
+  background-color: #eaeaea;
+  border: 2px solid #b5bfb8;
+  box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
+  -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+}
+#header input[type="text"]:focus {
+    outline-width: 0;
+    border-color: #169538;
+}
+
+.menu-header ul, .menu-header li {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+/***************************************
+ *  End of site-specific configuration
+ ***************************************/
+
 {% endif %}
 
+
 /* -- page layout ----------------------------------------------------------- */
 
 body {