From 962ddb3c3ae7ebc43fc091b9a0dde5564c86340d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20S=C3=BC=C3=9F?= <dominik.suess@outlook.at>
Date: Fri, 14 Oct 2016 20:27:03 +0200
Subject: [PATCH] Adopted Bootstrap classes everywhere

---
 hledger-web/Foundation.hs                     |  38 ++-
 hledger-web/Handler/AddForm.hs                |   1 -
 hledger-web/Handler/Common.hs                 |  89 +++----
 hledger-web/Handler/JournalR.hs               |  49 ++--
 hledger-web/Handler/RegisterR.hs              |  29 ++-
 hledger-web/static/hledger.css                | 231 +++++-------------
 .../templates/default-layout-wrapper.hamlet   |   4 +-
 7 files changed, 140 insertions(+), 301 deletions(-)

diff --git a/hledger-web/Foundation.hs b/hledger-web/Foundation.hs
index 675d5ded0..df09ff46e 100644
--- a/hledger-web/Foundation.hs
+++ b/hledger-web/Foundation.hs
@@ -337,23 +337,20 @@ addform _ vd@VD{..} = [hamlet|
 
   });
 
-<form#addform method=POST style="position:relative;">
-  <table.form style="width:100%; white-space:nowrap;">
-   <tr>
-    <td colspan=4>
-     <table style="width:100%;">
-      <tr#descriptionrow>
-       <td>
-        <input #date        .typeahead .form-control .input-lg type=text size=15 name=date placeholder="Date" value="#{defdate}">
-       <td>
-        <input #description .typeahead .form-control .input-lg type=text size=40 name=description placeholder="Description">
-   $forall n <- postingnums
-    ^{postingfields vd n}
-  <span style="padding-left:2em;">
-   <span .small>
-     Tab in last field for
-     <a href="#" onclick="addformAddPosting(); return false;">more
-     (or ctrl +, ctrl -)
+<form#addform method=POST .form>
+ <div .form-group>
+  <div .row>
+   <div .col-md-2 .col-xs-2 .col-sm-2>
+    <input #date        .typeahead .form-control .input-lg type=text size=15 name=date placeholder="Date" value="#{defdate}">
+   <div .col-md-10 .col-xs-10 .col-sm-10>
+    <input #description .typeahead .form-control .input-lg type=text size=40 name=description placeholder="Description">
+ $forall n <- postingnums
+   ^{postingfields vd n}
+ <span style="padding-left:2em;">
+  <span .small>
+    Tab in last field for
+    <a href="#" onclick="addformAddPosting(); return false;">more
+    (or ctrl +, ctrl -)
 |]
  where
   defdate = "" :: String -- #322 don't set a default, typeahead(?) clears it on tab. See also hledger.js
@@ -366,10 +363,11 @@ addform _ vd@VD{..} = [hamlet|
   postingnums = [1..numpostings]
   postingfields :: ViewData -> Int -> HtmlUrl AppRoute
   postingfields _ n = [hamlet|
-<tr .posting>
- <td style="padding-left:2em;">
+<div .form-group .row>
+ <div .col-md-8 .col-xs-8 .col-sm-8>
   <input ##{acctvar} .account-input .typeahead .form-control .input-lg style="width:100%;" type=text name=#{acctvar} placeholder="#{acctph}">
- ^{amtfieldorsubmitbtn}
+ <div .col-md-4 .col-xs-4 .col-sm-4>
+  ^{amtfieldorsubmitbtn}
 |]
    where
     islast = n == numpostings
diff --git a/hledger-web/Handler/AddForm.hs b/hledger-web/Handler/AddForm.hs
index 80588c692..54f2c6e10 100644
--- a/hledger-web/Handler/AddForm.hs
+++ b/hledger-web/Handler/AddForm.hs
@@ -44,7 +44,6 @@ postAddForm = do
                     $forall e<-errs
                      \#{e}<br>
                    |]
-                                
   -- 1. process the fixed fields with yesod-form
 
   VD{..} <- getViewData
diff --git a/hledger-web/Handler/Common.hs b/hledger-web/Handler/Common.hs
index ea24cc51e..cef07c884 100644
--- a/hledger-web/Handler/Common.hs
+++ b/hledger-web/Handler/Common.hs
@@ -34,29 +34,19 @@ hledgerLayout vd title content = do
   defaultLayout $ do
       setTitle $ toHtml $ title ++ " - hledger-web"
       toWidget [hamlet|
-        <div#content>
-         $if showsidebar vd
-          <div#sidebar>
-           <div#sidebar-spacer>
-           <div#sidebar-body>
-            ^{sidebar vd}
-         $else
-          <div#sidebar style="display:none;">
-           <div#sidebar-spacer>
-           <div#sidebar-body>
-         <div#main>
-          ^{topbar vd}
-          <div#maincontent>
-           ^{searchform vd}
-           ^{content}
+         ^{topbar vd}
+         ^{sidebar vd}
+         <div .col-md-8 .col-xs-12 .col-sm-12>
+          ^{searchform vd}
+          ^{content}
       |]
 
 -- | Global toolbar/heading area.
 topbar :: ViewData -> HtmlUrl AppRoute
 topbar VD{..} = [hamlet|
-<nav class="navbar" role="navigation">
- <div#topbar>
-  <h1>#{title}
+<div#spacer .col-md-4 .hidden-xs .hidden-sm>
+<div#topbar .col-md-8 .col-sm-12 .col-xs-12>
+ <h1>#{title}
 |]
   where
     title = takeFileName $ journalFilePath j
@@ -65,21 +55,14 @@ topbar VD{..} = [hamlet|
 sidebar :: ViewData -> HtmlUrl AppRoute
 sidebar vd@VD{..} =
  [hamlet|
- <a href=@{JournalR} title="Go back to top">
-  hledger-web
-
- <p>
- <!--
- <a#sidebartogglebtn role="button" style="cursor:pointer;" onclick="sidebarToggle()" title="Show/hide sidebar">
-  <span class="glyphicon glyphicon-expand"></span>
- -->
- <br>
- <div#sidebar-content>
-  <p style="margin-top:1em;">
-   <a href=@{JournalR} .#{journalcurrent} title="Show general journal entries, most recent first" style="white-space:nowrap;">Journal
-  <div#accounts style="margin-top:1em;">
+ <div #sidebar-menu .col-md-4 .hidden-xs .hidden-sm>
+  <ul .main-menu .nav .nav-stacked .affix-top>
+   <li .top>
+    <a href=@{JournalR} title="Show general journal entries, most recent first">Journal
    ^{accounts}
 |]
+--   <a href=@{JournalR} .#{journalcurrent} title="Show general journal entries, most recent first" style="white-space:nowrap;">Journal
+--  <p style="margin-top:1em;">
  where
   journalcurrent = if here == JournalR then "current" else "" :: String
   accounts = balanceReportAsHtml opts vd $ balanceReport (reportopts_ $ cliopts_ opts){empty_=True} am j
@@ -105,17 +88,12 @@ sidebar vd@VD{..} =
 -- | Search form for entering custom queries to filter journal data.
 searchform :: ViewData -> HtmlUrl AppRoute
 searchform VD{..} = [hamlet|
-<div#searchformdiv>
- <form#searchform.form method=GET>
-  <table width="100%">
-   <tr>
-    <td width="99%" style="position:relative;">
-     $if filtering
-      <a role=button .btn .close style="position:absolute; right:0; padding-right:.1em; padding-left:.1em; margin-right:.1em; margin-left:.1em; font-size:24px;" href="@{here}" title="Clear search terms">&times;
-     <input .form-control style="font-size:18px; padding-bottom:2px;" name=q value=#{q} title="Enter hledger search patterns to filter the data below">
-    <td width="1%" style="white-space:nowrap;">
-     <button .btn .btn-default style="font-size:18px;" type=submit title="Apply search terms">Search
-     <button .btn .btn-default style="font-size:18px;" type=button data-toggle="modal" data-target="#helpmodal" title="Show search and general help">?
+<div#searchformdiv .row>
+ <form#searchform .form-inline method=GET>
+  <div .form-group .col-md-12>
+   <input .form-control name=q value=#{q} title="Enter hledger search patterns to filter the data below" placeholder="Search">
+   <button .btn .btn-default type=submit title="Apply search terms">Search
+   <button .btn .btn-default type=button data-toggle="modal" data-target="#helpmodal" title="Show search and general help">?
 |]
  where
   filtering = not $ null q
@@ -184,17 +162,10 @@ nulltemplate = [hamlet||]
 balanceReportAsHtml :: WebOpts -> ViewData -> BalanceReport -> HtmlUrl AppRoute
 balanceReportAsHtml _ vd@VD{..} (items',total) =
  [hamlet|
- <table.balancereport>
-  <tr>
-   <td>Account
-   <td style="padding-left:1em; text-align:right;">Balance
   $forall i <- items
    ^{itemAsHtml vd i}
-  <tr.totalrule>
-   <td colspan=2>
-  <tr>
-   <td>
-   <td.balance>#{mixedAmountAsHtml total}
+  <li .total>
+    <span .balance>#{mixedAmountAsHtml total}
 |]
  where
    l = ledgerFromJournal Any j
@@ -202,16 +173,12 @@ balanceReportAsHtml _ vd@VD{..} (items',total) =
    items = items' -- maybe items' (\m -> filter (matchesAccount m . \(a,_,_,_)->a) items') showacctmatcher
    itemAsHtml :: ViewData -> BalanceReportItem -> HtmlUrl AppRoute
    itemAsHtml _ (acct, adisplay, aindent, abal) = [hamlet|
-<tr.item.#{inacctclass}>
- <td.account.#{depthclass}>
-  \#{indent}
-   <a href="@?{acctquery}" title="Show transactions affecting this account and subaccounts">#{adisplay}
-   <span.hoverlinks>
-    $if hassubs
-     &nbsp;
-     <a href="@?{acctonlyquery}" title="Show transactions affecting this account but not subaccounts">only
-
- <td.balance>#{mixedAmountAsHtml abal}
+<li>
+ \#{indent}
+ <a href="@?{acctquery}" title="Show transactions affecting this account and subaccounts">#{adisplay}
+ $if hassubs
+  <a href="@?{acctonlyquery}" .only title="Show transactions affecting this account but not subaccounts">only
+ <span .balance>#{mixedAmountAsHtml abal}
 |]
      where
        hassubs = not $ maybe False (null.asubs) $ ledgerAccount l acct
diff --git a/hledger-web/Handler/JournalR.hs b/hledger-web/Handler/JournalR.hs
index 179bdacc0..716c97429 100644
--- a/hledger-web/Handler/JournalR.hs
+++ b/hledger-web/Handler/JournalR.hs
@@ -34,10 +34,12 @@ getJournalR = do
                   s2 = if filtering then ", filtered" else ""
       maincontent = journalTransactionsReportAsHtml opts vd $ journalTransactionsReport (reportopts_ $ cliopts_ opts) j m
   hledgerLayout vd "journal" [hamlet|
-       <h2#contenttitle>#{title}
-       <!-- p>Journal entries record movements of commodities between accounts. -->
-       <a#addformlink role="button" style="cursor:pointer; margin-top:1em;" data-toggle="modal" data-target="#addmodal" title="Add a new transaction to the journal" >Add a transaction
-       ^{maincontent}
+       <div .row>
+        <h2#contenttitle>#{title}
+        <!-- p>Journal entries record movements of commodities between accounts. -->
+        <a#addformlink role="button" style="cursor:pointer; margin-top:1em;" data-toggle="modal" data-target="#addmodal" title="Add a new transaction to the journal" >Add a transaction
+       <div .table-responsive>
+        ^{maincontent}
      |]
 
 postJournalR :: Handler Html
@@ -46,11 +48,10 @@ postJournalR = postAddForm
 -- | Render a "TransactionsReport" as html for the formatted journal view.
 journalTransactionsReportAsHtml :: WebOpts -> ViewData -> TransactionsReport -> HtmlUrl AppRoute
 journalTransactionsReportAsHtml _ vd (_,items) = [hamlet|
-<table.transactionsreport>
- <tr.headings>
+<table .transactionsreport .table .table-condensed>
+ <thead>
   <th.date style="text-align:left;">
    Date
-   <span .glyphicon .glyphicon-chevron-up>
   <th.description style="text-align:left;">Description
   <th.account style="text-align:left;">Account
   <th.amount style="text-align:right;">Amount
@@ -61,26 +62,20 @@ journalTransactionsReportAsHtml _ vd (_,items) = [hamlet|
 -- .#{datetransition}
    itemAsHtml :: ViewData -> (Int, Bool, Bool, Bool, TransactionsReportItem) -> HtmlUrl AppRoute
    itemAsHtml VD{..} (n, _, _, _, (torig, _, split, _, amt, _)) = [hamlet|
-<tbody ##{tindex torig}>
-  <tr .item.#{evenodd}.#{firstposting} style="vertical-align:top;" title="#{show torig}">
-   <td.date>#{date}
-   <td.description colspan=2>#{textElideRight 60 desc}
-   <td.amount style="text-align:right;">
-    $if showamt
-     \#{mixedAmountAsHtml amt}
-  $forall p' <- tpostings torig
-   <tr .item.#{evenodd}.posting title="#{show torig}">
-    <td.date>
-    <td.description>
-    <td.account>
-     &nbsp;
-     <a href="@?{acctlink (paccount p')}##{tindex torig}" title="#{paccount p'}">#{elideAccountName 40 $ paccount p'}
-    <td.amount style="text-align:right;">#{mixedAmountAsHtml $ pamount p'}
-  <tr.#{evenodd}>
-   <td>&nbsp;
-   <td>
-   <td>
-   <td>
+<tr .title>
+ <td .date>#{date}
+ <td .description colspan=2>#{textElideRight 60 desc}
+ <td .amount style="text-align:right;">
+  $if showamt
+   \#{mixedAmountAsHtml amt}
+$forall p' <- tpostings torig
+ <tr .item.#{evenodd}.posting title="#{show torig}">
+  <td .nonhead>
+  <td .nonhead>
+  <td .nonhead>
+   &nbsp;
+   <a href="@?{acctlink (paccount p')}##{tindex torig}" title="#{paccount p'}">#{elideAccountName 40 $ paccount p'}
+  <td.amount .nonhead style="text-align:right;">#{mixedAmountAsHtml $ pamount p'}
 |]
      where
        acctlink a = (RegisterR, [("q", T.pack $ accountQuery a)])
diff --git a/hledger-web/Handler/RegisterR.hs b/hledger-web/Handler/RegisterR.hs
index 634463b0c..444523edc 100644
--- a/hledger-web/Handler/RegisterR.hs
+++ b/hledger-web/Handler/RegisterR.hs
@@ -48,24 +48,27 @@ postRegisterR = postAddForm
 -- Generate html for an account register, including a balance chart and transaction list.
 registerReportHtml :: WebOpts -> ViewData -> TransactionsReport -> HtmlUrl AppRoute
 registerReportHtml opts vd r = [hamlet|
- ^{registerChartHtml $ transactionsReportByCommodity r}
+ <div .hidden-xs>
+  ^{registerChartHtml $ transactionsReportByCommodity r}
  ^{registerItemsHtml opts vd r}
 |]
 
 -- Generate html for a transaction list from an "TransactionsReport".
 registerItemsHtml :: WebOpts -> ViewData -> TransactionsReport -> HtmlUrl AppRoute
 registerItemsHtml _ vd (balancelabel,items) = [hamlet|
-<table.registerreport>
- <tr.headings>
-  <th.date style="text-align:left;">
-   Date
-   <span .glyphicon .glyphicon-chevron-up>
-  <th.description style="text-align:left;">Description
-  <th.account style="text-align:left;">To/From Account(s)
-  <th.amount style="text-align:right; white-space:normal;">Amount Out/In
-  <th.balance style="text-align:right; white-space:normal;">#{balancelabel'}
- $forall i <- numberTransactionsReportItems items
-  ^{itemAsHtml vd i}
+<div .table-responsive>
+ <table.registerreport .table .table-striped .table-condensed>
+  <thead>
+   <tr>
+    <th style="text-align:left;">
+     Date
+     <span .glyphicon .glyphicon-chevron-up>
+    <th style="text-align:left;">Description
+    <th style="text-align:left;">To/From Account(s)
+    <th style="text-align:right; white-space:normal;">Amount Out/In
+    <th style="text-align:right; white-space:normal;">#{balancelabel'}
+  $forall i <- numberTransactionsReportItems items
+   ^{itemAsHtml vd i}
  |]
  where
    insomeacct = isJust $ inAccount $ qopts vd
@@ -107,7 +110,7 @@ registerChartHtml percommoditytxnreports =
  -- is hidden, eg with add form toggled
  [hamlet|
 <label#register-chart-label style=""><br>
-<div#register-chart style="width:85%; height:150px; margin-bottom:1em; display:block;">
+<div#register-chart style="height:150px; margin-bottom:1em; display:block;">
 <script type=text/javascript>
  \$(document).ready(function() {
    var $chartdiv = $('#register-chart');
diff --git a/hledger-web/static/hledger.css b/hledger-web/static/hledger.css
index 7b95994aa..0ad6bb4fa 100644
--- a/hledger-web/static/hledger.css
+++ b/hledger-web/static/hledger.css
@@ -4,182 +4,6 @@
 /* 1. colours */
 
 /* green */
-body                                                                 { background-color:white; color:black; }
-.registerreport .odd                                                 { background-color:#ded; }
-/* .transactionsreport .odd                                             { background-color:#eee; } */
-.filtering                                                           { background-color:#e0e0e0; }
-a:link, a:visited { color:#00e !important; }
-/* a:link:hover, a:visited:hover { color:red; } */
-/* #main                                                                { border-color:#e0e0e0; } see below */
-/* .journalreport td                                                    { border-color:thin solid #e0e0e0; } see below */
-
-/* white */
-/* body                                                                 { background-color:#fff; } */
-/* .registerreport .odd                                                 { background-color:#eee; } */
-/* .filtering                                                           { background-color:#ddd; } */
-/* #main                                                                { border-color:#eee; } see below */
-/* .journalreport td                                                    { border-color:thin solid #eee; } see below */
-
-#message                                                             { color:red; background-color:#fee; }
-/* #addform input.textinput, #addform .dhx_combo_input, .dhx_combo_list { /\*background-color:#eee;*\/ } */
-#editform textarea                                                   { background-color:#eee; }
-.negative                                                            { color:#800; }
-.help                                                                {  }
-.highlighted {
-  background-color: #F4F466 !important;
-}
-
-#sidebar .hoverlinks { visibility:hidden; }
-/* #sidebar .mouseover { background-color:rgba(208,208,208,0.5); } */
-#sidebar .mouseover .hoverlinks { visibility:visible; }
-
-#sidebar .balancereport .hoverlinks { margin-left:0em; font-weight:normal; /*font-size:smaller;*/ display:inline-block; text-align:right; }
-#sidebar .balancereport .hoverlinks a { margin-left:0.5em; }
-/* #sidebar .notinacct, .notinacct :link, .notinacct :visited { color:#888; } */
-#sidebar .notinacct .negative { color:#b77; }
-#sidebar .balancereport .inacct { font-weight:bold; }
-/* #sidebar .balancereport .inacct { background-color:#e0e0e0; } */
-#sidebar .balancereport .numpostings                                          { padding-left:1em; color:#aaa; }
-#sidebar .current { font-weight:bold; }
-
-/*------------------------------------------------------------------------------------------*/
-/* 2. font families & sizes */
-/* overspecified for cross-browser robustness */
-body { font-size:16px; }
-/*
-body                                               { font-family:helvetica,arial,sans-serif; }
-pre                                                { font-family:courier,"courier new",monospace; }
-.dhx_combo_input, .dhx_combo_list { font-size:small; }
-#editform textarea                                 { font-family:courier,"courier new",monospace; font-size:small; }
-.nav2                                              { font-size:small; }
-#searchform                                        { font-size:small; }
-.topleftlink                                       { font-size:small; }
-.toprightlink                                      { font-size:small; }
-#journaldesc                                       { font-size:small; }
-.togglelink                                        { font-size:smaller; white-space:nowrap }
-.help                                              { font-size:smaller; }
-.form                                              { font-size:small; }
-.transactionsreport                                { font-size:small; }
-.entriesreport                                     { font-size:small; }
-.balancereport                                     { font-size:small; }
-.registerreport                                    { font-size:small; }
-.showall                                           { font-size:small; }
-*/
-/* #addformlink                                    { font-size:small; } */
-/* #editformlink                                   { font-size:small; } */
-/*
-#contenttitle                                    { font-size:1.2em; }
-*/
-
-/*------------------------------------------------------------------------------------------*/
-/* 3. layout */
-
-body                        { margin:0; }
-
-
-#topbar                     { padding:2px; }
-.topleftlink                { float:left; margin-right:1em; padding:2px; }
-.toprightlink               { float:right; margin-left:1em; padding:2px; }
-#topbar h1                  { display:inline-block; vertical-align:top; margin:0; }
-#journalinfo                { vertical-align:middle; margin:0; }
-/* #topbar                  { padding:4px; border-bottom:2px solid #ddd; } */
-
-#message                    { margin:0.5em;}
-.help                       { font-style: italic; }
-.helprow td                 { padding-bottom:8px; }
-
-#outermain { overflow:auto; }
-#main { overflow:auto; padding-left:1em; }
-
-#sidebar {
-  float:left;
-  padding-right:1em; 
-  border-right:thin solid #e0e0e0;
-  margin-bottom:5em;
-}
-/* #sidebar.affix { */
-/*     position: fixed; */
-/*     top: 20px; */
-/* } */
-
-.balancereport .item { border-top:thin solid #e0e0e0; }
-
-#navlinks                   { margin-bottom:1em; }
-.navlink                    { }
-.navlinkcurrent             { font-weight:bold; }
-.form                       { margin:0em; }
-
-#searchformdiv              { margin:0 0 1em 0; }
-#searchform                 { margin:0; }
-#searchform span            { padding:4px; }
-#stopfilterlink             { font-weight:bold; }
-.filtering                  { font-weight:bold; }
-
-#main .journal { }
-#main .register { }
-.current                    { font-weight:bold; }
-.date                       { padding-left:0em; }
-.description                { padding-left:1em; white-space:normal; }
-.account                    { padding-left:1em; white-space:normal; }
-.amount                     { padding-left:1em; white-space:nowrap; }
-.balance                    { padding-left:1em; white-space:nowrap; }
-tr td:last-child { padding-right:0.3em; }
-tr td:first-child { padding-left:0.3em; }
-.amount, .balance { width:2em; }  /* minimise width */
-.positive                   { }
-
-td.balance, td.numpostings {
-  text-align: right;
-}
-/* table.transactionsreport         { border-spacing: 0; } */
-/* .transactionsreport td           {  } */
-/* .transactionsreport pre          { margin-top:0; } */
-
-/* table.entriesreport         { border-spacing: 0; } */
-/* .entriesreport td           {  } */
-/* .entriesreport pre          { margin-top:0; } */
-
-.balancereport              { border-spacing:0; }
-.balancereport tr           { vertical-align:bottom; border-spacing:0; }
-.balancereport .title       { white-space:nowrap; }
-.balancereport .item        { }
-/* .balancereport .depth0      { padding-top:1em; } */
-.balancereport td           { padding:0; }
-.totalrule td               { border-top:thin solid black; }
-.balancereport .account     { white-space:nowrap; }
-
-.hidden { display:none; }
-table.registerreport        { border-spacing:0; }
-table.registerreport tr     { vertical-align:top; }
-table.registerreport td     { padding-bottom:0.2em; }
-table.registerreport .date  { white-space:nowrap; }
-table.registerreport tr.posting { font-size:smaller; }
-table.registerreport tr.posting .account  { padding-left:1.5em; }
-table.registerreport tr.posting .amount  { padding-right:0.5em; }
-tr.firstposting td          { }
-/* tr.newday td                { border-top: 1px solid #797; } */
-/* tr.newday .date             { font-weight:bold; } */
-/* tr.newmonth td              { border-top: 2px solid #464; } */
-/* tr.newyear td               { border-top: 3px solid black; } */
-#accountsheading            { white-space:nowrap; }
-
-
-#addform {
-  /* margin:0 0 2em; */
-  /* padding:.5em 0; */
-  /* border-top:thin solid #e0e0e0; */
-  /* border-bottom:thin solid #e0e0e0; */
-}
-#addform tr {
-  vertical-align:top;
-}
-/* #addform input.textinput, #addform .dhx_combo_input, .dhx_combo_list   { padding:4px; } */
-/* #addform table              { } */
-/* #addform #addbuttonrow      { text-align:right; } */
-/* #editform                   { width:95%; } */
-#editform textarea          { width:100%; padding:4px; }
-/* #searchform table           { border-spacing:0; padding-left:0em; } */
-
 ::-moz-placeholder {
   font-style:italic;
 }
@@ -273,3 +97,58 @@ code {
   font-weight: bold;
   color: black;
 }
+ul {
+    list-style-type: none;
+	  padding: 0;
+}
+
+#sidebar-menu .main-menu li {
+    border-top: 1px solid #ebebeb;
+}
+#sidebar-menu .main-menu .top {
+    border: none !important;
+}
+
+#sidebar-menu .main-menu a {
+    display: inline;
+	  font-size: 13px;
+	  font-weight: 500;
+	  color: #999;
+	  padding: 4px 20px;
+}
+
+#sidebar-menu .main-menu a:hover {
+	  color: #11427D;
+	  text-decoration: none;
+	  background-color: transparent;
+}
+
+#sidebar-menu .main-menu .only{
+    visibility: hidden;
+}
+
+#sidebar-menu .main-menu li:hover > .only {
+    visibility: visible;
+}
+
+#sidebar-menu .main-menu .only:hover{
+    border-left: none;
+}
+#sidebar-menu .main-menu .balance {
+    float: right;
+}
+
+#sidebar-menu .main-menu .total {
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+    border-top: 1px solid black;
+}
+
+.transactionsreport .nonhead {
+    border: none !important;
+}
+
+.negative {
+    color: #a94442;
+}
diff --git a/hledger-web/templates/default-layout-wrapper.hamlet b/hledger-web/templates/default-layout-wrapper.hamlet
index 8407e5e3f..ca4aff393 100644
--- a/hledger-web/templates/default-layout-wrapper.hamlet
+++ b/hledger-web/templates/default-layout-wrapper.hamlet
@@ -26,9 +26,7 @@ $newline never
 
     <body>
         <div class="container">
-            <header>
-            <div id="outermain" role="main">
-              ^{pageBody pc}
+            ^{pageBody pc}
             <footer>
                 #{extraCopyright $ appExtra $ settings master}