Styling header and footer (includes images)

2010-02-19 14:57:19 -08:00 · 2010-02-19 14:57:19 -08:00 · 7feb020acd
--- a/media/css/main.css
+++ b/media/css/main.css
@ -0,0 +1,966 @@
+/*
+Copyright (c) 2008, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.net/yui/license.txt
+version: 2.5.1 (concatenated manually)
+*/
+/*** RESET-FONTS-GRIDS ***/
+html
+{
+  color:#000;
+  background:#FFF;
+}
+
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
+{
+  margin:0;
+  padding:0;
+}
+
+table
+{
+  border-collapse:collapse;
+  border-spacing:0;
+}
+
+fieldset,img
+{
+  border:0;
+}
+
+address,caption,cite,code,dfn,em,strong,th,var
+{
+  font-style:normal;
+  font-weight:normal;
+}
+
+li
+{
+  list-style:none;
+}
+
+caption,th
+{
+  text-align:left;
+}
+
+h1,h2,h3,h4,h5,h6
+{
+  font-size:100%;
+  font-weight:normal;
+}
+
+q:before,q:after
+{
+  content:'';
+}
+
+abbr,acronym
+{
+  border:0;
+  font-variant:normal;
+}
+
+sup
+{
+  vertical-align:text-top;
+}
+
+sub
+{
+  vertical-align:text-bottom;
+}
+
+input,textarea,select
+{
+  font-family:inherit;
+  font-size:inherit;
+  font-weight:inherit;
+}
+
+input,textarea,select
+{
+  font-size:100%;
+}
+
+legend
+{
+  color:#000;
+}
+
+body
+{
+  font:13px/1.231 arial,helvetica,clean,sans-serif;
+  font-size:small;
+  font:x-small;
+}
+
+table
+{
+  font-size:inherit;
+  font:100%;
+}
+
+pre,code,kbd,samp,tt
+{
+  font-family:monospace;
+  font-size:108%;
+  line-height:100%;
+}
+
+body
+{
+  text-align:center;
+}
+
+#ft
+{
+  clear:both;
+}
+
+#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7
+{
+  margin:auto;
+  text-align:left;
+  width:57.69em;
+  width:56.25em;
+  min-width:750px;
+}
+
+#doc2
+{
+  width:73.076em;
+  width:71.25em;
+}
+
+#doc3
+{
+  margin:auto 10px;
+  width:auto;
+}
+
+#doc4
+{
+  width:74.923em;
+  width:73.05em;
+}
+
+.yui-b
+{
+  position:relative;
+}
+
+.yui-b
+{
+  _position:static;
+}
+
+#yui-main .yui-b
+{
+  position:static;
+}
+
+#yui-main
+{
+  width:100%;
+}
+
+.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main
+{
+  float:right;
+  margin-left:-25em;
+}
+
+.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main
+{
+  float:left;
+  margin-right:-25em;
+}
+
+.yui-t1 .yui-b
+{
+  float:left;
+  width:12.30769em;
+  width:12em;
+}
+
+.yui-t1 #yui-main .yui-b
+{
+  margin-left:13.30769em;
+  margin-left:13.05em;
+}
+
+.yui-t2 .yui-b
+{
+  float:left;
+  width:13.8461em;
+  width:13.5em;
+}
+
+.yui-t2 #yui-main .yui-b
+{
+  margin-left:14.8461em;
+  margin-left:14.55em;
+}
+
+.yui-t3 .yui-b
+{
+  float:left;
+  width:23.0769em;
+  width:22.5em;
+}
+
+.yui-t3 #yui-main .yui-b
+{
+  margin-left:24.0769em;
+  margin-left:23.62em;
+}
+
+.yui-t4 .yui-b
+{
+  float:right;
+  width:13.8456em;
+  width:13.5em;
+}
+
+.yui-t4 #yui-main .yui-b
+{
+  margin-right:14.8456em;
+  margin-right:14.55em;
+}
+
+.yui-t5 .yui-b
+{
+  float:right;
+  width:18.4615em;
+  width:18em;
+}
+
+.yui-t5 #yui-main .yui-b
+{
+  margin-right:19.4615em;
+  margin-right:19.125em;
+}
+
+.yui-t6 .yui-b
+{
+  float:right;
+  width:23.0769em;
+  width:22.5em;
+}
+
+.yui-t6 #yui-main .yui-b
+{
+  margin-right:24.0769em;
+  margin-right:23.62em;
+}
+
+.yui-t7 #yui-main .yui-b
+{
+  display:block;
+  margin:0 0 1em;
+}
+
+#yui-main .yui-b
+{
+  float:none;
+  width:auto;
+}
+
+.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u
+{
+  float:left;
+}
+
+.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u
+{
+  float:right;
+}
+
+.yui-g div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first,.yui-g .yui-gc div.first,.yui-g .yui-ge div.first,.yui-gc div.first div.first
+{
+  float:left;
+}
+
+.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf
+{
+  width:49.1%;
+}
+
+.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u
+{
+  width:32%;
+  margin-left:1.99%;
+}
+
+.yui-gb .yui-u
+{
+  margin-left:1.9%;
+  width:31.9%;
+}
+
+.yui-gc div.first,.yui-gd .yui-u
+{
+  width:66%;
+}
+
+.yui-gd div.first
+{
+  width:32%;
+}
+
+.yui-ge div.first,.yui-gf .yui-u
+{
+  width:74.2%;
+}
+
+.yui-ge .yui-u,.yui-gf div.first
+{
+  width:24%;
+}
+
+.yui-g .yui-gb div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first
+{
+  margin-left:0;
+}
+
+.yui-g .yui-g .yui-u,.yui-gb .yui-g .yui-u,.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u,.yui-ge .yui-g .yui-u,.yui-gf .yui-g .yui-u
+{
+  width:49%;
+  width:48.1%;
+  margin-left:0;
+}
+
+.yui-g .yui-gb div.first,.yui-gb .yui-gb div.first
+{
+  margin-right:0;
+  width:32%;
+  _width:31.7%;
+}
+
+.yui-g .yui-gc div.first,.yui-gd .yui-g
+{
+  width:66%;
+}
+
+.yui-gb .yui-g div.first
+{
+  margin-right:4%;
+  _margin-right:1.3%;
+}
+
+.yui-gb .yui-gc div.first,.yui-gb .yui-gd div.first
+{
+  margin-right:0;
+}
+
+.yui-gb .yui-gb .yui-u,.yui-gb .yui-gc .yui-u
+{
+  margin-left:1.8%;
+  _margin-left:4%;
+}
+
+.yui-g .yui-gb .yui-u
+{
+  _margin-left:1%;
+}
+
+.yui-gb .yui-gd .yui-u
+{
+  width:66%;
+  _width:61.2%;
+}
+
+.yui-gb .yui-gd div.first
+{
+  width:31%;
+  _width:29.5%;
+}
+
+.yui-g .yui-gc .yui-u,.yui-gb .yui-gc .yui-u
+{
+  width:32%;
+  _float:right;
+  margin-right:0;
+  _margin-left:0;
+}
+
+.yui-gb .yui-gc div.first
+{
+  width:66%;
+  float:left;
+  margin-left:0;
+}
+
+.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf .yui-u
+{
+  margin:0;
+}
+
+.yui-gb .yui-gb .yui-u
+{
+  _margin-left:.7%;
+}
+
+.yui-gb .yui-g div.first,.yui-gb .yui-gb div.first
+{
+  margin-left:0;
+}
+
+.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u
+{
+  width:48.1%;
+  margin-left:0;
+}
+
+s .yui-gb .yui-gd div.first
+{
+  width:32%;
+}
+
+.yui-g .yui-gd div.first
+{
+  _width:29.9%;
+}
+
+.yui-ge .yui-g
+{
+  width:24%;
+}
+
+.yui-gf .yui-g
+{
+  width:74.2%;
+}
+
+.yui-gb .yui-ge div.yui-u,.yui-gb .yui-gf div.yui-u
+{
+  float:right;
+}
+
+.yui-gb .yui-ge div.first,.yui-gb .yui-gf div.first
+{
+  float:left;
+}
+
+.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf div.first
+{
+  width:24%;
+  _width:20%;
+}
+
+.yui-gb .yui-ge div.first,.yui-gb .yui-gf .yui-u
+{
+  width:73.5%;
+  _width:65.5%;
+}
+
+.yui-ge div.first .yui-gd .yui-u
+{
+  width:65%;
+}
+
+.yui-ge div.first .yui-gd div.first
+{
+  width:32%;
+}
+
+#bd:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after
+{
+  content:".";
+  display:block;
+  height:0;
+  clear:both;
+  visibility:hidden;
+}
+
+#bd,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf
+{
+  zoom:1;
+}
+
+/*** CONTAINER ***/
+.yui-overlay,.yui-panel-container
+{
+  visibility:hidden;
+  position:absolute;
+  z-index:2;
+}
+
+.mask
+{
+  z-index:1;
+  display:none;
+  position:absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+}
+
+.mask.block-scrollbars
+{
+  overflow:auto;
+}
+
+.masked select,.drag select,.hide-select select
+{
+  _visibility:hidden;
+}
+
+.yui-panel-container select
+{
+  _visibility:inherit;
+}
+
+.hide-scrollbars,.hide-scrollbars *
+{
+  overflow:hidden;
+}
+
+.hide-scrollbars select
+{
+  display:none;
+}
+
+.show-scrollbars
+{
+  overflow:auto;
+}
+
+.yui-panel-container.show-scrollbars,.yui-tt.show-scrollbars
+{
+  overflow:visible;
+}
+
+.yui-panel-container.show-scrollbars .underlay,.yui-tt.show-scrollbars .yui-tt-shadow
+{
+  overflow:auto;
+}
+
+.yui-panel-container.shadow .underlay.yui-force-redraw
+{
+  padding-bottom:1px;
+}
+
+.yui-effect-fade .underlay
+{
+  display:none;
+}
+
+.yui-tt-shadow
+{
+  position:absolute;
+}
+
+/*** MENU ***/
+.yuimenubar
+{
+  visibility:visible;
+  position:static;
+}
+
+.yuimenu .yuimenu,.yuimenubar .yuimenu
+{
+  visibility:hidden;
+  position:absolute;
+  top:-10000px;
+  left:-10000px;
+}
+
+.yuimenubar li,.yuimenu li
+{
+  list-style-type:none;
+}
+
+.yuimenubar ul,.yuimenu ul,.yuimenubar li,.yuimenu li,.yuimenu h6,.yuimenubar h6
+{
+  margin:0;
+  padding:0;
+}
+
+.yuimenuitemlabel,.yuimenubaritemlabel
+{
+  text-align:left;
+  white-space:nowrap;
+}
+
+.yuimenubar ul
+{
+  zoom:1;
+}
+
+.yuimenubar .yuimenu ul
+{
+  zoom:normal;
+}
+
+.yuimenubar>.bd>ul:after
+{
+  content:".";
+  display:block;
+  clear:both;
+  visibility:hidden;
+  height:0;
+  line-height:0;
+}
+
+.yuimenubaritem
+{
+  float:left;
+}
+
+.yuimenubaritemlabel,.yuimenuitemlabel
+{
+  display:block;
+}
+
+.yuimenuitemlabel .helptext
+{
+  font-style:normal;
+  display:block;
+  margin:-1em 0 0 10em;
+}
+
+.yui-menu-shadow
+{
+  position:absolute;
+  visibility:hidden;
+  z-index:-1;
+}
+
+.yui-menu-shadow-visible
+{
+  top:2px;
+  right:-3px;
+  left:-3px;
+  bottom:-3px;
+  visibility:visible;
+}
+
+.hide-scrollbars *
+{
+  overflow:hidden;
+}
+
+.hide-scrollbars select
+{
+  display:none;
+}
+
+.yuimenu.show-scrollbars,.yuimenubar.show-scrollbars
+{
+  overflow:visible;
+}
+
+.yuimenu.hide-scrollbars .yui-menu-shadow,.yuimenubar.hide-scrollbars .yui-menu-shadow
+{
+  overflow:hidden;
+}
+
+.yuimenu.show-scrollbars .yui-menu-shadow,.yuimenubar.show-scrollbars .yui-menu-shadow
+{
+  overflow:auto;
+}
+
+/*** END YAHOO! INC. COPYRIGHT / BSD LICENSE ***/
+
+
+body {
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    font-family: georgia, freeserif, serif;
+    /*background: #fff url(../img/background-tile.png) 50% 0 repeat-x;*/
+}
+body {
+    background: #fff url(../img/background-feature.jpg) 50% 0 repeat-x;
+    background-position: 50% -225px;
+}
+
+body.html-rtl {
+    text-align: right;
+}
+
+.clear {
+    clear: both;
+}
+
+/*----------------------------------
+    Header
+----------------------------------*/
+
+#nav-access {
+    display: none;
+}
+
+#header {
+    width: 920px;
+    height: 56px;
+    margin: auto;
+    text-align: left;
+    position: relative;
+    z-index: 1;
+    background: #1e4262 url(../img/header-background.png) bottom left no-repeat;
+    font-family: verdana;
+}
+
+#header h1 {
+    margin: 0;
+    float: left;
+}
+
+#header h1 a:link,
+#header h1 a:visited {
+    color: #fff;
+}
+
+
+/*----------------------------------
+    Header navigation
+----------------------------------*/
+
+#nav-main {
+    float: right;
+    padding-right: 200px;
+}
+
+#nav-main ul {
+    float: left;
+    z-index: 99;
+    left: auto;
+}
+
+#nav-main ul,
+#nav-main ul li {
+    height: 56px;
+    background: none;
+    position: relative;
+}
+
+#nav-main ul {
+    background: transparent url(../img/header-nav-divider.png) top left no-repeat;
+    padding-left: 2px;
+}
+
+#nav-main ul li a,
+#nav-main ul li span {
+    padding: 20px 20px 0 20px;
+    height: 35px;
+    display: block;
+    float: left;
+    font-weight: bold;
+    font-size: 95%;
+    color: #fff;
+    background: transparent url(../img/header-nav-divider.png) top right no-repeat;
+}
+
+#nav-main ul li a:link,
+#nav-main ul li a:visited {
+    color: #fff;
+    text-decoration: none;
+}
+
+#nav-main ul li span,
+#nav-main ul li a:hover,
+#nav-main ul li a:active,
+#nav-main ul li a.yuimenubaritemlabel-selected {
+    color: #fff;
+    background: #31526f url(../img/header-nav-menu-backgrounds.png) top right no-repeat;
+}
+
+#nav-main ul ul,
+#nav-main ul ul li {
+    height: auto;
+    border: 0;
+}
+
+#nav-main ul ul {
+    border-top: 0;
+    background: url(../img/header-nav-menu-backgrounds.png) bottom left no-repeat;
+    padding: 8px 0;
+    width: 190px;
+}
+
+
+#nav-main ul li ul li a,
+#nav-main ul li ul li a:link,
+#nav-main ul li ul li a:visited,
+#nav-main ul li ul li span {
+    padding: 4px 20px;
+    margin: 0 1px 1px 1px;
+    height: auto;
+    float: none;
+    display: block;
+    font-size: 85%;
+    font-weight: normal;
+    border: 0;
+    background-image: none;
+    position: relative;
+}
+
+#nav-main ul li ul li a:hover,
+#nav-main ul li ul li a:active {
+    background: #3d5b74;
+}
+
+/*----------------------------------
+    Breadcrumbs
+----------------------------------*/
+
+#breadcrumbs {
+    margin: -10px 0 10px 0;
+    font-family: verdana;
+}
+
+#breadcrumbs ul {
+    margin: 0;
+    padding: 0;
+}
+
+#breadcrumbs ul li {
+    display: inline;
+    margin: 0;
+    color: #4b4742;
+    font-size: 10px;
+}
+
+#breadcrumbs ul li.divider {
+    padding: 0 3px 0 0;
+    color: #807970;
+    font-size: 11px;
+}
+
+#breadcrumbs span,
+#breadcrumbs a {
+    color: #0489b7;
+    font-weight: bold;
+    text-decoration: none;
+    margin: 0;
+    padding: 0;
+    display: inline;
+}
+
+#breadcrumbs a:hover,
+#breadcrumbs a:active {
+    text-decoration: underline;
+}
+
+/*----------------------------------
+    Footer
+----------------------------------*/
+
+#footer {
+    background: #fff url(../img/footer-border.png) top center repeat-x;
+    text-align: center;
+    color: #898378;
+    margin-top: 100px;
+    clear: both;
+    font-family: verdana;
+    font-size: 90%;
+    min-height: 345px;
+    min-width: 950px;
+    clear: both;
+}
+
+* html #footer {
+    height: 345px;
+}
+
+#footer a:link,
+#footer a:visited {
+    color: #898378;
+    text-decoration: none;
+}
+
+#footer a:hover,
+#footer a:active {
+    color: #69645c;
+    text-decoration: underline;
+}
+
+#footer-contents {
+    width: 880px;
+    text-align: left;
+    margin: auto;
+    padding: 35px;
+}
+
+#footer-menu,
+#footer-menu ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    left: auto;
+}
+
+#footer-menu li {
+    margin: 0 15px 0 0;
+    padding: 0;
+    list-style-type: none;
+    float: left;
+    display: inline;
+    font-weight: bold;
+    background: none;
+    position: relative;
+    width: 105px;
+}
+
+#footer-menu li ul {
+    margin: 0.5em 0 2em 0;
+}
+
+#footer-menu ul li {
+    float: none;
+    font-size: 85%;
+    padding: 0 0 0.4em 0;
+    margin: 0;
+    font-weight: normal;
+    display: block;
+    width: auto;
+}
+
+#footer #cc-license {
+    clear: both;
+    background: url(../img/cc.png) top left no-repeat;
+    padding-top: 40px;
+    font-size: 85%;
+}
+
+#footer #cc-license p {
+    padding-top: 20px;
+    margin-bottom: 3px;
+}
+
+#footer #cc-license p:first-child {
+    padding-top: 0;
+}
+
+#footer #cc-license a {
+    font-weight: bold;
+    font-size: 100%;
+}
+
+#cc-license ul li {
+    display: inline;
+    margin-right: 1em;
+}
+
+/*----------------------------------
+    Footer language form
+----------------------------------*/
+
+#footer form, #footer #lang_form {
+    float: right;
+}
+
+#footer #lang_form label {
+    color: #898378;
+    display: block;
+    font-weight: bold;
+    padding-bottom: 5px;
+}
+
+#footer #lang_form div {
+    display: inline;
+}
--- a/media/img/background-feature.jpg
+++ b/media/img/background-feature.jpg
--- a/media/img/background-tile.png
+++ b/media/img/background-tile.png
--- a/media/img/cc-ie6.png
+++ b/media/img/cc-ie6.png
--- a/media/img/cc.png
+++ b/media/img/cc.png
--- a/media/img/footer-border.png
+++ b/media/img/footer-border.png
--- a/media/img/header-background.png
+++ b/media/img/header-background.png
--- a/media/img/header-nav-divider.png
+++ b/media/img/header-nav-divider.png
--- a/media/img/header-nav-menu-backgrounds.png
+++ b/media/img/header-nav-menu-backgrounds.png
--- a/templates/layout/footer.html
+++ b/templates/layout/footer.html
@ -1,4 +1,4 @@
-{# start #footer #}
+</div><!-- /#content -->
 <div id="footer">
 <div id="footer-contents" role="contentinfo">

@ -64,7 +64,7 @@
            <li><a href="http://www.mozilla.com/about/contact.html">Contact Us</a></li>
        </ul>
    </li>
-</ul>
+</ul><!-- /#footer-menu -->

 <div id="cc-license">
    <p>Except where otherwise <a href="http://www.mozilla.com/en-US/about/legal.html#site">noted</a>, content on this site is licensed under the<br><strong><a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-Alike License v3.0</a></strong> or any later version.</p>
@ -77,14 +77,13 @@

    <p class="disclaimer">Mozilla is providing links to any applications as a courtesy, and makes no representations regarding the applications or any information related there to. Any questions, complaints or claims regarding the applications must be directed to the appropriate software vendor.</p>

-<p>Powered by <a href="http://www.djangoproject.com/">The Django Framework</a></p>
+    <p>Powered by <a href="http://www.djangoproject.com/">The Django Framework</a></p>
 </div>

-</div>
-</div>
-{# end #footer #}
+</div><!-- /#footer-contents -->
+</div><!-- /#footer -->
+

 <script type="text/javascript" src="http://support.mozilla.com/minify.php/js_main"></script>
-
 </body>
 </html>
--- a/templates/layout/header.html
+++ b/templates/layout/header.html
@ -1,79 +1,51 @@
 <!DOCTYPE html>
-<html lang="{{ locale }}">
+<html lang="{{ locale }}" dir="ltr">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
-<title>{% block title %}{% endblock %} | Firefox Support</title>
+<title>{% block title %}{% endblock %}{% print _("| Firefox Support") %}</title>

 <link rel="shortcut icon" type="image/x-icon" href="{{ MEDIA_URL}}img/favicon.ico">
+<meta charset="utf-8">
+
+<link rel="stylesheet" href="{{ MEDIA_URL}}css/main.css">

-<link rel="stylesheet" type="text/css" href="http://support.mozilla.com/minify.php/css_styles_mozcommon;css_styles_mozkb" />
 </head>
-<body class="mini">
-<div id="wrap" class="mini"{% if rtl %} dir="rtl"{% endif %}>
-<div id="doc">
+<body>

-{# start #nav-access #}
 <ul id="nav-access">
    <li><a href="#nav-main">skip to navigation</a></li>
    <li><a href="#switch">switch language</a></li>
 </ul>
-{# end #nav-access #}

-{# start #header #}
 <div id="header" role="banner">
-
-<h1><a href="http://www.mozilla.com/" title="{tr}Back to Mozilla.com{/tr}"><img src="http://support.mozilla.com/styles/mozcommon/mozilla-logo.png" height="56" width="145" alt="Mozilla" /></a></h1>
-<div id="nav-main" class="yuimenubar yuimenubarnav" role="navigation">
-  <div class="bd">
-
-    <ul class="first-of-type">
-<li id="menu_products" class="yuimenubaritem"><a href="http://www.mozilla.com/en-US/products/">Products</a>
-      <div class="yuimenu">
-        <div class="bd">
-          <ul>
-<li id="submenu_firefox" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/products/firefox/">Firefox</a></li><li id="submenu_thunderbird" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/products/thunderbird/">Thunderbird</a></li></ul>
+    <h1><a href="http://www.mozilla.com/" title="{% print _("Back to Mozilla.com") %}"><img src="http://support.mozilla.com/styles/mozcommon/mozilla-logo.png" height="56" width="145" alt="Mozilla" /></a></h1>
+    <div id="nav-main" class="yuimenubar yuimenubarnav" role="navigation">
+        <div class="bd"><ul class="first-of-type">
+            <li id="menu_products" class="yuimenubaritem"><a href="http://www.mozilla.com/products/">Products</a>
+                <div class="yuimenu"><div class="bd">
+                    <ul><li id="submenu_firefox" class="yuimenuitem"><a href="http://www.mozilla.com/products/firefox/">Firefox</a></li><li id="submenu_thunderbird" class="yuimenuitem"><a href="http://www.mozilla.com/products/thunderbird/">Thunderbird</a></li></ul>
+                </div></div>
+            </li>
+            <li id="menu_addons" class="yuimenubaritem"><a href="https://addons.mozilla.org/">Add-ons</a>
+                <div class="yuimenu"><div class="bd">
+                    <ul><li id="submenu_addons_all" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/">All Add-ons</a></li><li id="submenu_addons_recommended" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/recommended">Recommended</a></li><li id="submenu_addons_popular" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/browse/type:1/cat:all?sort=popular">Popular</a></li><li id="submenu_addons_themes" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/browse/type:2">Themes</a></li><li id="submenu_addons_search" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/browse/type:4">Search Engines</a></li><li id="submenu_addons_plugins" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/browse/type:7">Plugins</a></li></ul>
+                </div></div>
+            </li>
+            <li id="menu_support" class="yuimenubaritem"><span class="current">Support</span>
+                <div class="yuimenu"><div class="bd">
+                    <ul><li id="submenu_support_kb" class="yuimenuitem"><a href="http://support.mozilla.com/{if isset($currentLocale)}{$currentLocale}/{/if}kb/">Firefox Support</a></li><li id="submenu_support_mobile" class="yuimenuitem"><a href="http://mobile.support.mozilla.com/{if isset($currentLocale)}{$currentLocale}/{/if}kb/">Mobile Support</a></li><li id="submenu_support_thunderbird" class="yuimenuitem"><a href="http://www.mozilla.org/support/thunderbird/">Thunderbird Support</a></li></ul>
+                </div></div>
+            </li><li id="menu_community" class="yuimenubaritem"><a href="http://www.mozilla.com/manyfaces/">Community</a>
+                <div class="yuimenu"><div class="bd">
+                    <ul><li id="submenu_community_addons" class="yuimenuitem"><a href="https://addons.mozilla.org/">Add-ons</a></li><li id="submenu_community_bugzilla" class="yuimenuitem"><a href="https://bugzilla.mozilla.org/">Bugzilla</a></li><li id="submenu_community_devmo" class="yuimenuitem"><a href="http://developer.mozilla.org/">Mozilla Developer Center</a></li><li id="submenu_community_labs" class="yuimenuitem"><a href="http://labs.mozilla.com/">Mozilla Labs</a></li><li id="submenu_community_mozillaorg" class="yuimenuitem"><a href="http://www.mozilla.org/">Mozilla.org</a></li><li id="submenu_community_mozillazine" class="yuimenuitem"><a href="http://www.mozillazine.org/">MozillaZine</a></li><li id="submenu_community_planet" class="yuimenuitem"><a href="http://planet.mozilla.org/">Planet Mozilla</a></li><li id="submenu_community_qmo" class="yuimenuitem"><a href="http://quality.mozilla.org/">QMO</a></li><li id="submenu_community_spreadfirefox" class="yuimenuitem"><a href="http://www.spreadfirefox.com/">SpreadFirefox</a></li><li id="submenu_community_support" class="yuimenuitem"><span class="current">Support</span></li></ul>
+                </div></div>
+            </li><li id="menu_aboutus" class="yuimenubaritem"><a href="http://www.mozilla.com/about/">About</a>
+                <div class="yuimenu"><div class="bd">
+                    <ul><li id="submenu_about" class="yuimenuitem"><a href="http://www.mozilla.com/about/whatismozilla.html">What is Mozilla?</a></li><li id="submenu_getinvolved" class="yuimenuitem"><a href="http://www.mozilla.com/about/get-involved.html">Get Involved</a></li><li id="submenu_press" class="yuimenuitem"><a href="http://www.mozilla.com/press/">Press Center</a></li><li id="submenu_careers" class="yuimenuitem"><a href="http://www.mozilla.com/about/careers.html">Careers</a></li><li id="submenu_partnerships" class="yuimenuitem"><a href="http://www.mozilla.com/about/partnerships.html">Partnerships</a></li><li id="submenu_licensing" class="yuimenuitem"><a href="http://www.mozilla.com/about/licensing.html">Licensing</a></li><li id="submenu_blog" class="yuimenuitem"><a href="http://blog.mozilla.com/">Blog</a></li><li id="submenu_store" class="yuimenuitem"><a href="http://store.mozilla.org/">Store</a></li><li id="submenu_contact" class="yuimenuitem"><a href="http://www.mozilla.com/about/contact.html">Contact Us</a></li></ul>
+                </div></div>
+            </li></ul>
        </div>
-      </div>
-
-      </li><li id="menu_addons" class="yuimenubaritem"><a href="https://addons.mozilla.org/">Add-ons</a>
-      <div class="yuimenu">
-        <div class="bd">
-          <ul>
-<li id="submenu_addons_all" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/">All Add-ons</a></li><li id="submenu_addons_recommended" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/recommended">Recommended</a></li><li id="submenu_addons_popular" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/browse/type:1/cat:all?sort=popular">Popular</a></li><li id="submenu_addons_themes" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/browse/type:2">Themes</a></li><li id="submenu_addons_search" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/browse/type:4">Search Engines</a></li><li id="submenu_addons_plugins" class="yuimenuitem"><a href="https://addons.mozilla.org/firefox/browse/type:7">Plugins</a></li></ul>
-        </div>
-
-      </div>
-      </li><li id="menu_support" class="yuimenubaritem"><span class="current">Support</span>
-      <div class="yuimenu">
-        <div class="bd">
-          <ul>
-<li id="submenu_support_kb" class="yuimenuitem"><a href="http://support.mozilla.com/{if isset($currentLocale)}{$currentLocale}/{/if}kb/">Firefox Support</a></li><li id="submenu_support_mobile" class="yuimenuitem"><a href="http://mobile.support.mozilla.com/{if isset($currentLocale)}{$currentLocale}/{/if}kb/">Mobile Support</a></li><li id="submenu_support_thunderbird" class="yuimenuitem"><a href="http://www.mozilla.org/support/thunderbird/">Thunderbird Support</a></li></ul>
-        </div>
-
-      </div>
-      </li><li id="menu_community" class="yuimenubaritem"><a href="http://www.mozilla.com/en-US/manyfaces/">Community</a>
-      <div class="yuimenu">
-        <div class="bd">
-          <ul>
-<li id="submenu_community_addons" class="yuimenuitem"><a href="https://addons.mozilla.org/">Add-ons</a></li><li id="submenu_community_bugzilla" class="yuimenuitem"><a href="https://bugzilla.mozilla.org/">Bugzilla</a></li><li id="submenu_community_devmo" class="yuimenuitem"><a href="http://developer.mozilla.org/">Mozilla Developer Center</a></li><li id="submenu_community_labs" class="yuimenuitem"><a href="http://labs.mozilla.com/">Mozilla Labs</a></li><li id="submenu_community_mozillaorg" class="yuimenuitem"><a href="http://www.mozilla.org/">Mozilla.org</a></li><li id="submenu_community_mozillazine" class="yuimenuitem"><a href="http://www.mozillazine.org/">MozillaZine</a></li><li id="submenu_community_planet" class="yuimenuitem"><a href="http://planet.mozilla.org/">Planet Mozilla</a></li><li id="submenu_community_qmo" class="yuimenuitem"><a href="http://quality.mozilla.org/">QMO</a></li><li id="submenu_community_spreadfirefox" class="yuimenuitem"><a href="http://www.spreadfirefox.com/">SpreadFirefox</a></li><li id="submenu_community_support" class="yuimenuitem"><span class="current">Support</span></li></ul>
-
-        </div>
-      </div>
-      </li><li id="menu_aboutus" class="yuimenubaritem"><a href="http://www.mozilla.com/en-US/about/">About</a>
-      <div class="yuimenu">
-        <div class="bd">
-          <ul>
-<li id="submenu_about" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/about/whatismozilla.html">What is Mozilla?</a></li><li id="submenu_getinvolved" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/about/get-involved.html">Get Involved</a></li><li id="submenu_press" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/press/">Press Center</a></li><li id="submenu_careers" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/about/careers.html">Careers</a></li><li id="submenu_partnerships" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/about/partnerships.html">Partnerships</a></li><li id="submenu_licensing" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/about/licensing.html">Licensing</a></li><li id="submenu_blog" class="yuimenuitem"><a href="http://blog.mozilla.com/">Blog</a></li><li id="submenu_store" class="yuimenuitem"><a href="http://store.mozilla.org/">Store</a></li><li id="submenu_contact" class="yuimenuitem"><a href="http://www.mozilla.com/en-US/about/contact.html">Contact Us</a></li></ul>
-
-        </div>
-      </div>
-      </li></ul>
-  </div>
+    </div>
 </div>
+<br class="clear"/>

-    <hr class="hide" />
-</div>
-{# end #header #}
-
-<hr class="hide" />
+<div id="content">