# HG changeset patch
# User domruf <dominikruf@gmail.com>
# Date 2016-09-18 20:00:46
# Node ID 80a15e10857adcb1794cb5a8b27131d13f0e7378
# Parent  b7654d1675daf7464eff45e32c5baf8543ac1c5a

style: in preparation for bootstrap, replace kallithea box with bootstrap compatible panel

This is a subset of a bigger changeset. The subset was extracted by Mads Kiilerich, mostly by:

sed -i \
        -e 's,<div\(.*\) class="box",<div\1 class="panel panel-primary",g' \
        `hg mani`

diff --git a/kallithea/public/css/style.css b/kallithea/public/css/style.css
--- a/kallithea/public/css/style.css
+++ b/kallithea/public/css/style.css
@@ -523,7 +523,7 @@ div.header img {
     margin: 0 60px 10px 290px;
 }
 
-#content div.box {
+#content div.panel {
     clear: both;
     background: #fff;
     margin: 0 0 10px;
@@ -532,21 +532,7 @@ div.header img {
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
 }
 
-#content div.box-left {
-    width: 49%;
-    clear: none;
-    float: left;
-    margin: 0 0 10px;
-}
-
-#content div.box-right {
-    width: 49%;
-    clear: none;
-    float: right;
-    margin: 0 0 10px;
-}
-
-#content div.box div.title {
+#content div.panel div.title {
     clear: both;
     overflow: hidden;
     background-color: #577632;
@@ -557,7 +543,7 @@ div.header img {
     border-radius: 4px 4px 0 0;
 }
 
-#content div.box div.title h5 {
+#content div.panel div.title h5 {
     float: left;
     border: none;
     color: #fff;
@@ -565,22 +551,22 @@ div.header img {
     padding: 11px 0 11px 10px;
 }
 
-#content div.box div.title .link-white {
+#content div.panel div.title .link-white {
     color: #FFFFFF;
 }
 
-#content div.box div.title .link-white.current {
+#content div.panel div.title .link-white.current {
     color: #BFE3FF;
 }
 
-#content div.box div.title ul.links li {
+#content div.panel div.title ul.links li {
     list-style: none;
     float: left;
     margin: 0;
     padding: 0;
 }
 
-#content div.box div.title ul.links li a {
+#content div.panel div.title ul.links li a {
     font-size: 13px;
     font-weight: 700;
     height: 1%;
@@ -588,43 +574,43 @@ div.header img {
     text-decoration: none;
 }
 
-#content div.box div.title ul.links.nav-tabs li a {
+#content div.panel div.title ul.links.nav-tabs li a {
     float: left;
     color: #fff;
     margin: 0;
     padding: 11px 10px 11px 10px;
 }
 
-#content div.box div.title ul.links.icon-only-links li a {
+#content div.panel div.title ul.links.icon-only-links li a {
     float: left;
     color: #fff;
     margin: 0;
     padding: 11px 10px 11px 10px;
 }
 
-#content div.box h1,
-#content div.box h2,
-#content div.box h3,
-#content div.box h4,
-#content div.box h5,
-#content div.box h6,
-#content div.box div.h1,
-#content div.box div.h2,
-#content div.box div.h3,
-#content div.box div.h4,
-#content div.box div.h5,
-#content div.box div.h6 {
+#content div.panel h1,
+#content div.panel h2,
+#content div.panel h3,
+#content div.panel h4,
+#content div.panel h5,
+#content div.panel h6,
+#content div.panel div.h1,
+#content div.panel div.h2,
+#content div.panel div.h3,
+#content div.panel div.h4,
+#content div.panel div.h5,
+#content div.panel div.h6 {
     clear: both;
     overflow: hidden;
     margin: 8px 20px 3px;
     padding-bottom: 2px;
 }
 
-#content div.box div.normal-indent {
+#content div.panel div.normal-indent {
     margin: 0 20px 10px 20px;
 }
 
-#content div.box p {
+#content div.panel p {
     color: #5f5f5f;
     font-size: 12px;
     line-height: 150%;
@@ -632,7 +618,7 @@ div.header img {
     padding: 0;
 }
 
-#content div.box blockquote {
+#content div.panel blockquote {
     border-left: 4px solid #DDD;
     color: #5f5f5f;
     font-size: 11px;
@@ -641,70 +627,70 @@ div.header img {
     padding: 0 0 0 14px;
 }
 
-#content div.box blockquote p {
+#content div.panel blockquote p {
     margin: 10px 0;
     padding: 0;
 }
 
-#content div.box dl {
+#content div.panel dl {
     margin: 10px 0px;
 }
 
-#content div.box dt {
+#content div.panel dt {
     font-size: 12px;
     margin: 0;
 }
 
-#content div.box dd {
+#content div.panel dd {
     font-size: 12px;
     margin: 0;
     padding: 8px 0 8px 15px;
 }
 
-#content div.box li {
+#content div.panel li {
     font-size: 12px;
     padding: 4px 0;
 }
 
-#content div.box ul.disc,
-#content div.box ul.circle {
+#content div.panel ul.disc,
+#content div.panel ul.circle {
     margin: 10px 24px 10px 38px;
 }
 
-#content div.box ul.square {
+#content div.panel ul.square {
     margin: 10px 24px 10px 40px;
 }
 
-#content div.box img.left {
+#content div.panel img.left {
     border: none;
     float: left;
     margin: 10px 10px 10px 0;
 }
 
-#content div.box img.right {
+#content div.panel img.right {
     border: none;
     float: right;
     margin: 10px 0 10px 10px;
 }
 
-#content div.box div.messages {
+#content div.panel div.messages {
     clear: both;
     overflow: hidden;
     margin: 0 20px;
     padding: 0;
 }
 
-#content div.box div.message {
+#content div.panel div.message {
     float: left;
     overflow: hidden;
     margin: 0;
     padding: 5px 0;
     white-space: pre-wrap;
 }
-#content div.box #changeset_content div.message {
+#content div.panel #changeset_content div.message {
     padding: 15px 0;
 }
-#content div.box div.expand {
+#content div.panel div.expand {
     width: 110%;
     height: 14px;
     font-size: 10px;
@@ -715,52 +701,52 @@ div.header img {
     display: none;
     overflow: hidden;
 }
-#content div.box div.expand .expandtext {
+#content div.panel div.expand .expandtext {
     background-color: #ffffff;
     padding: 2px;
     border-radius: 2px;
 }
 
-#content div.box div.message a {
+#content div.panel div.message a {
     font-weight: 400 !important;
 }
 
-#content div.box div.message div.image {
+#content div.panel div.message div.image {
     float: left;
     margin: 9px 0 0 5px;
     padding: 6px;
 }
 
-#content div.box div.message div.image img {
+#content div.panel div.message div.image img {
     vertical-align: middle;
     margin: 0;
 }
 
-#content div.box div.message div.text {
+#content div.panel div.message div.text {
     float: left;
     margin: 0;
     padding: 9px 6px;
 }
 
-#content div.box div.message div.text h1,
-#content div.box div.message div.text h2,
-#content div.box div.message div.text h3,
-#content div.box div.message div.text h4,
-#content div.box div.message div.text h5,
-#content div.box div.message div.text h6 {
+#content div.panel div.message div.text h1,
+#content div.panel div.message div.text h2,
+#content div.panel div.message div.text h3,
+#content div.panel div.message div.text h4,
+#content div.panel div.message div.text h5,
+#content div.panel div.message div.text h6 {
     border: none;
     margin: 0;
     padding: 0;
 }
 
-#content div.box div.message div.text span {
+#content div.panel div.message div.text span {
     height: 1%;
     display: block;
     margin: 0;
     padding: 5px 0 0;
 }
 
-#content div.box div.message-error {
+#content div.panel div.message-error {
     height: 1%;
     clear: both;
     overflow: hidden;
@@ -769,11 +755,11 @@ div.header img {
     color: #860006;
 }
 
-#content div.box div.message-error h6 {
+#content div.panel div.message-error h6 {
     color: #860006;
 }
 
-#content div.box div.message-warning {
+#content div.panel div.message-warning {
     height: 1%;
     clear: both;
     overflow: hidden;
@@ -782,11 +768,11 @@ div.header img {
     color: #5f5200;
 }
 
-#content div.box div.message-warning h6 {
+#content div.panel div.message-warning h6 {
     color: #5f5200;
 }
 
-#content div.box div.message-notice {
+#content div.panel div.message-notice {
     height: 1%;
     clear: both;
     overflow: hidden;
@@ -795,11 +781,11 @@ div.header img {
     color: #003863;
 }
 
-#content div.box div.message-notice h6 {
+#content div.panel div.message-notice h6 {
     color: #003863;
 }
 
-#content div.box div.message-success {
+#content div.panel div.message-success {
     height: 1%;
     clear: both;
     overflow: hidden;
@@ -808,11 +794,11 @@ div.header img {
     color: #4e6100;
 }
 
-#content div.box div.message-success h6 {
+#content div.panel div.message-success h6 {
     color: #4e6100;
 }
 
-#content div.box div.form div.fields div.field {
+#content div.panel div.form div.fields div.field {
     height: 1%;
     min-height: 12px;
     border-bottom: 1px solid #DDD;
@@ -821,15 +807,15 @@ div.header img {
     padding: 10px 0;
 }
 
-#content div.box div.form div.fields div.field-first {
+#content div.panel div.form div.fields div.field-first {
     padding: 0 0 10px;
 }
 
-#content div.box div.form div.fields div.field-noborder {
+#content div.panel div.form div.fields div.field-noborder {
     border-bottom: 0 !important;
 }
 
-#content div.box div.form div.fields div.field span.error-message {
+#content div.panel div.form div.fields div.field span.error-message {
     height: 1%;
     display: inline-block;
     color: red;
@@ -837,7 +823,7 @@ div.header img {
     padding: 0;
 }
 
-#content div.box div.form div.fields div.field span.success {
+#content div.panel div.form div.fields div.field span.success {
     height: 1%;
     display: block;
     color: #316309;
@@ -845,7 +831,7 @@ div.header img {
     padding: 0;
 }
 
-#content div.box div.form div.fields div.field div.label {
+#content div.panel div.form div.fields div.field div.label {
     left: 70px;
     width: 155px;
     position: absolute;
@@ -853,7 +839,7 @@ div.header img {
     padding: 5px 0 0 0px;
 }
 
-#content div.box div.form div.fields div.field div.label-summary {
+#content div.panel div.form div.fields div.field div.label-summary {
     left: 30px;
     width: 155px;
     position: absolute;
@@ -861,68 +847,38 @@ div.header img {
     padding: 0px 0 0 0px;
 }
 
-#content div.box-left div.form div.fields div.field div.label,
-#content div.box-right div.form div.fields div.field div.label,
-#content div.box-left div.form div.fields div.field div.label,
-#content div.box-left div.form div.fields div.field div.label-summary,
-#content div.box-right div.form div.fields div.field div.label-summary,
-#content div.box-left div.form div.fields div.field div.label-summary {
-    clear: both;
-    overflow: hidden;
-    left: 0;
-    width: auto;
-    position: relative;
-    margin: 0;
-    padding: 0 0 8px;
-}
-
-#content div.box div.form div.fields div.field div.label-select {
+#content div.panel div.form div.fields div.field div.label-select {
     padding: 5px 0 0 5px;
 }
 
-#content div.box-left div.form div.fields div.field div.label-select,
-#content div.box-right div.form div.fields div.field div.label-select {
-    padding: 0 0 8px;
-}
-
-#content div.box-left div.form div.fields div.field div.label-textarea,
-#content div.box-right div.form div.fields div.field div.label-textarea {
-    padding: 0 0 8px !important;
-}
-
-#content div.box div.form div.fields div.field div.label label,
+#content div.panel div.form div.fields div.field div.label label,
 div.label label {
     color: #393939;
     font-weight: 700;
 }
-#content div.box div.form div.fields div.field div.label label,
+#content div.panel div.form div.fields div.field div.label label,
 div.label-summary label {
     color: #393939;
     font-weight: 700;
 }
-#content div.box div.form div.fields div.field div.input {
-    margin: 0 0 0 200px;
-}
-
-#content div.box div.form div.fields div.field div.input.summary {
-    margin: 0 0 0 110px;
-}
-#content div.box div.form div.fields div.field div.input.summary-short {
-    margin: 0 0 0 110px;
-}
-#content div.box div.form div.fields div.field div.file {
+#content div.panel div.form div.fields div.field div.input {
     margin: 0 0 0 200px;
 }
-#content div.box div.form div.fields div.field div.editor {
+
+#content div.panel div.form div.fields div.field div.input.summary {
+    margin: 0 0 0 110px;
+}
+#content div.panel div.form div.fields div.field div.input.summary-short {
+    margin: 0 0 0 110px;
+}
+#content div.panel div.form div.fields div.field div.file {
     margin: 0 0 0 200px;
 }
-
-#content div.box-left div.form div.fields div.field div.input,
-#content div.box-right div.form div.fields div.field div.input {
-    margin: 0 0 0 0px;
-}
-
-#content div.box div.form div.fields div.field div.input input,
+#content div.panel div.form div.fields div.field div.editor {
+    margin: 0 0 0 200px;
+}
+
+#content div.panel div.form div.fields div.field div.input input,
 .reviewer_ac input {
     background: #FFF;
     border-top: 1px solid #b3b3b3;
@@ -935,14 +891,14 @@ div.label-summary label {
     padding: 7px 7px 6px;
 }
 
-#content div.box div.form div.fields div.field div.input input#clone_url,
-#content div.box div.form div.fields div.field div.input input#clone_url_id
+#content div.panel div.form div.fields div.field div.input input#clone_url,
+#content div.panel div.form div.fields div.field div.input input#clone_url_id
 {
     font-size: 14px;
     padding: 0 2px;
 }
 
-#content div.box div.form div.fields div.field div.file input {
+#content div.panel div.form div.fields div.field div.file input {
     background: none repeat scroll 0 0 #FFFFFF;
     border-color: #B3B3B3 #EAEAEA #EAEAEA #B3B3B3;
     border-style: solid;
@@ -958,23 +914,23 @@ input.disabled {
     background-color: #F5F5F5 !important;
 }
 
-#content div.box div.form div.fields div.field div.input input.small {
+#content div.panel div.form div.fields div.field div.input input.small {
     width: 30%;
 }
 
-#content div.box div.form div.fields div.field div.input input.medium {
+#content div.panel div.form div.fields div.field div.input input.medium {
     width: 55%;
 }
 
-#content div.box div.form div.fields div.field div.input input.large {
+#content div.panel div.form div.fields div.field div.input input.large {
     width: 85%;
 }
 
-#content div.box div.form div.fields div.field div.input input.date {
+#content div.panel div.form div.fields div.field div.input input.date {
     width: 177px;
 }
 
-#content div.box div.form div.fields div.field div.input input.button {
+#content div.panel div.form div.fields div.field div.input input.button {
     background: #D4D0C8;
     border-top: 1px solid #FFF;
     border-left: 1px solid #FFF;
@@ -985,7 +941,7 @@ input.disabled {
     padding: 4px 8px;
 }
 
-#content div.box div.form div.fields div.field div.textarea {
+#content div.panel div.form div.fields div.field div.textarea {
     border-top: 1px solid #b3b3b3;
     border-left: 1px solid #b3b3b3;
     border-right: 1px solid #eaeaea;
@@ -994,12 +950,12 @@ input.disabled {
     padding: 7px 7px 6px;
 }
 
-#content div.box div.form div.fields div.field div.textarea-editor {
+#content div.panel div.form div.fields div.field div.textarea-editor {
     border: 1px solid #ddd;
     padding: 0;
 }
 
-#content div.box div.form div.fields div.field div.textarea textarea {
+#content div.panel div.form div.fields div.field div.textarea textarea {
     width: 100%;
     height: 220px;
     overflow-y: auto;
@@ -1012,42 +968,36 @@ input.disabled {
     padding: 0;
 }
 
-#content div.box-left div.form div.fields div.field div.textarea textarea,
-#content div.box-right div.form div.fields div.field div.textarea textarea {
-    width: 100%;
-    height: 100px;
-}
-
-#content div.box div.form div.fields div.field div.textarea table {
+#content div.panel div.form div.fields div.field div.textarea table {
     width: 100%;
     border: none;
     margin: 0;
     padding: 0;
 }
 
-#content div.box div.form div.fields div.field div.textarea table td {
+#content div.panel div.form div.fields div.field div.textarea table td {
     background: #DDD;
     border: none;
     padding: 0;
 }
 
-#content div.box div.form div.fields div.field div.textarea table td table {
+#content div.panel div.form div.fields div.field div.textarea table td table {
     width: auto;
     border: none;
     margin: 0;
     padding: 0;
 }
 
-#content div.box div.form div.fields div.field div.textarea table td table td {
+#content div.panel div.form div.fields div.field div.textarea table td table td {
     font-size: 11px;
     padding: 5px 5px 5px 0;
 }
 
-#content div.box div.form div.fields div.field input[type=text]:focus,
-#content div.box div.form div.fields div.field input[type=password]:focus,
-#content div.box div.form div.fields div.field input[type=file]:focus,
-#content div.box div.form div.fields div.field textarea:focus,
-#content div.box div.form div.fields div.field select:focus,
+#content div.panel div.form div.fields div.field input[type=text]:focus,
+#content div.panel div.form div.fields div.field input[type=password]:focus,
+#content div.panel div.form div.fields div.field input[type=file]:focus,
+#content div.panel div.form div.fields div.field textarea:focus,
+#content div.panel div.form div.fields div.field select:focus,
 .reviewer_ac input:focus {
     background: #f6f6f6;
     border-color: #666;
@@ -1061,11 +1011,11 @@ div.form div.fields div.field div.button
     margin: 0;
     padding: 0 0 0 8px;
 }
-#content div.box table.noborder {
+#content div.panel table.noborder {
     border: 1px solid transparent;
 }
 
-#content div.box table {
+#content div.panel table {
     width: 100%;
     border-collapse: separate;
     margin: 0;
@@ -1074,63 +1024,63 @@ div.form div.fields div.field div.button
     border-radius: 4px;
 }
 
-#content div.box table th {
+#content div.panel table th {
     background: #eee;
     border-bottom: 1px solid #ddd;
     padding: 5px 0px 5px 5px;
     text-align: left;
 }
 
-#content div.box table th.left {
+#content div.panel table th.left {
     text-align: left;
 }
 
-#content div.box table th.right {
+#content div.panel table th.right {
     text-align: right;
 }
 
-#content div.box table th.center {
+#content div.panel table th.center {
     text-align: center;
 }
 
-#content div.box table th.selected {
+#content div.panel table th.selected {
     vertical-align: middle;
     padding: 0;
 }
 
-#content div.box table td {
+#content div.panel table td {
     background: #fff;
     border-bottom: 1px solid #cdcdcd;
     vertical-align: middle;
     padding: 5px;
 }
 
-#content div.box table td.compact {
+#content div.panel table td.compact {
     padding: 0;
 }
 
-#content div.box table tr.selected td {
+#content div.panel table tr.selected td {
     background: #FFC;
 }
 
-#content div.box table td.selected {
+#content div.panel table td.selected {
     width: 3%;
     text-align: center;
     vertical-align: middle;
     padding: 0;
 }
 
-#content div.box table td.action {
+#content div.panel table td.action {
     width: 45%;
     text-align: left;
 }
 
-#content div.box table td.date {
+#content div.panel table td.date {
     width: 33%;
     text-align: center;
 }
 
-#content div.box div.action {
+#content div.panel div.action {
     float: right;
     background: #FFF;
     text-align: right;
@@ -1138,17 +1088,17 @@ div.form div.fields div.field div.button
     padding: 0;
 }
 
-#content div.box div.action select {
+#content div.panel div.action select {
     font-size: 11px;
     margin: 0;
 }
 
-#content div.box div.action .ui-selectmenu {
+#content div.panel div.action .ui-selectmenu {
     margin: 0;
     padding: 0;
 }
 
-#content div.box div.pagination {
+#content div.panel div.pagination {
     height: 1%;
     clear: both;
     overflow: hidden;
@@ -1156,14 +1106,14 @@ div.form div.fields div.field div.button
     padding: 0;
 }
 
-#content div.box div.pagination ul.pager {
+#content div.panel div.pagination ul.pager {
     float: right;
     text-align: right;
     margin: 0;
     padding: 0;
 }
 
-#content div.box div.pagination ul.pager li {
+#content div.panel div.pagination ul.pager li {
     height: 1%;
     float: left;
     list-style: none;
@@ -1178,11 +1128,11 @@ div.form div.fields div.field div.button
     padding: 0;
 }
 
-#content div.box div.pagination ul.pager li.separator {
+#content div.panel div.pagination ul.pager li.separator {
     padding: 6px;
 }
 
-#content div.box div.pagination ul.pager li.current {
+#content div.panel div.pagination ul.pager li.current {
     background: #b4b4b4 url("../images/pager_selected.png") repeat-x;
     border-top: 1px solid #ccc;
     border-left: 1px solid #bebebe;
@@ -1192,7 +1142,7 @@ div.form div.fields div.field div.button
     padding: 6px;
 }
 
-#content div.box div.pagination ul.pager li a {
+#content div.panel div.pagination ul.pager li a {
     height: 1%;
     display: block;
     float: left;
@@ -1202,8 +1152,8 @@ div.form div.fields div.field div.button
     padding: 6px;
 }
 
-#content div.box div.pagination ul.pager li a:hover,
-#content div.box div.pagination ul.pager li a:active {
+#content div.panel div.pagination ul.pager li a:hover,
+#content div.panel div.pagination ul.pager li a:active {
     background: #b4b4b4 url("../images/pager_selected.png") repeat-x;
     border-top: 1px solid #ccc;
     border-left: 1px solid #bebebe;
@@ -1212,11 +1162,11 @@ div.form div.fields div.field div.button
     margin: -1px;
 }
 
-#content div.box div.pagination-right {
+#content div.panel div.pagination-right {
     float: right;
 }
 
-#content div.box div.pagination-wh {
+#content div.panel div.pagination-wh {
     height: 1%;
     overflow: hidden;
     text-align: right;
@@ -1224,21 +1174,21 @@ div.form div.fields div.field div.button
     padding: 0;
 }
 
-#content div.box div.pagination-wh > :first-child {
+#content div.panel div.pagination-wh > :first-child {
     border-radius: 4px 0px 0px 4px;
 }
 
-#content div.box div.pagination-wh > :last-child {
+#content div.panel div.pagination-wh > :last-child {
     border-radius: 0px 4px 4px 0px;
     border-right: 1px solid #cfcfcf;
 }
 
-#content div.box div.pagination-wh a,
-#content div.box div.pagination-wh span.pager_dotdot,
-#content div.box div.pagination-wh span.yui-pg-previous,
-#content div.box div.pagination-wh span.yui-pg-last,
-#content div.box div.pagination-wh span.yui-pg-next,
-#content div.box div.pagination-wh span.yui-pg-first {
+#content div.panel div.pagination-wh a,
+#content div.panel div.pagination-wh span.pager_dotdot,
+#content div.panel div.pagination-wh span.yui-pg-previous,
+#content div.panel div.pagination-wh span.yui-pg-last,
+#content div.panel div.pagination-wh span.yui-pg-next,
+#content div.panel div.pagination-wh span.yui-pg-first {
     height: 1%;
     float: left;
     background: #ebebeb url("../images/pager.png") repeat-x;
@@ -1250,7 +1200,7 @@ div.form div.fields div.field div.button
     padding: 6px;
 }
 
-#content div.box div.pagination-wh span.pager_curpage {
+#content div.panel div.pagination-wh span.pager_curpage {
     height: 1%;
     float: left;
     background: #b4b4b4 url("../images/pager_selected.png") repeat-x;
@@ -1262,8 +1212,8 @@ div.form div.fields div.field div.button
     padding: 6px;
 }
 
-#content div.box div.pagination-wh a:hover,
-#content div.box div.pagination-wh a:active {
+#content div.panel div.pagination-wh a:hover,
+#content div.panel div.pagination-wh a:active {
     background: #b4b4b4 url("../images/pager_selected.png") repeat-x;
     border-top: 1px solid #ccc;
     border-left: 1px solid #bebebe;
@@ -1271,7 +1221,7 @@ div.form div.fields div.field div.button
     text-decoration: none;
 }
 
-#content div.box div.traffic div.legend {
+#content div.panel div.traffic div.legend {
     clear: both;
     overflow: hidden;
     border-bottom: 1px solid #ddd;
@@ -1279,14 +1229,14 @@ div.form div.fields div.field div.button
     padding: 0 0 10px;
 }
 
-#content div.box div.traffic div.legend h6 {
+#content div.panel div.traffic div.legend h6 {
     float: left;
     border: none;
     margin: 0;
     padding: 0;
 }
 
-#content div.box div.traffic div.legend li {
+#content div.panel div.traffic div.legend li {
     list-style: none;
     float: left;
     font-size: 11px;
@@ -1294,29 +1244,29 @@ div.form div.fields div.field div.button
     padding: 0 8px 0 4px;
 }
 
-#content div.box div.traffic div.legend li.visits {
+#content div.panel div.traffic div.legend li.visits {
     border-left: 12px solid #edc240;
 }
 
-#content div.box div.traffic div.legend li.pageviews {
+#content div.panel div.traffic div.legend li.pageviews {
     border-left: 12px solid #afd8f8;
 }
 
-#content div.box div.traffic table {
+#content div.panel div.traffic table {
     width: auto;
 }
 
-#content div.box div.traffic table td {
+#content div.panel div.traffic table td {
     background: transparent;
     border: none;
     padding: 2px 3px 3px;
 }
 
-#content div.box div.traffic table td.legendLabel {
+#content div.panel div.traffic table td.legendLabel {
     padding: 0 3px 2px;
 }
 
-#content div.box #summary {
+#content div.panel #summary {
     margin-right: 200px;
     min-height: 240px;
 }
@@ -1382,17 +1332,17 @@ div.form div.fields div.field div.button
     border-radius: 5px;
 }
 
-#content div.box #summary p {
+#content div.panel #summary p {
     margin-bottom: -5px;
     width: 600px;
     white-space: pre-wrap;
 }
 
-#content div.box #summary p:last-child {
+#content div.panel #summary p:last-child {
     margin-bottom: 9px;
 }
 
-#content div.box #summary p:first-of-type {
+#content div.panel #summary p:first-of-type {
     margin-top: 9px;
 }
 
@@ -2734,14 +2684,14 @@ table.code-browser i[class^='icon-'] {
     padding-right: .3em;
 }
 
-.box .search {
+.panel .search {
     clear: both;
     overflow: hidden;
     margin: 0;
     padding: 0 20px 10px;
 }
 
-.box .search div.search_path {
+.panel .search div.search_path {
     background: none repeat scroll 0 0 #EEE;
     border: 1px solid #CCC;
     color: blue;
@@ -2749,12 +2699,12 @@ table.code-browser i[class^='icon-'] {
     padding: 10px 0;
 }
 
-.box .search div.search_path div.link {
+.panel .search div.search_path div.link {
     font-weight: 700;
     margin-left: 25px;
 }
 
-.box .search div.search_path div.link a {
+.panel .search div.search_path div.link a {
     color: #577632;
     cursor: pointer;
     text-decoration: none;
@@ -3107,11 +3057,11 @@ div.gravatar img {
     padding: 55px 10px 14px 10px !important;
 }
 
-#content div.box div.title div.search {
+#content div.panel div.title div.search {
     border-left: 1px solid #576622;
 }
 
-#content div.box div.title div.search div.input input {
+#content div.panel div.title div.search div.input input {
     border: 1px solid #576622;
 }
 
@@ -3246,7 +3196,7 @@ ins, div.options a:hover {
 
 img,
 #header #header-inner #quick li a:hover span.normal,
-#content div.box div.form div.fields div.field div.textarea table td table td a,
+#content div.panel div.form div.fields div.field div.textarea table td table td a,
 #clone_url,
 #clone_url_id
 {
@@ -3258,9 +3208,9 @@ img.icon, .right .merge img {
 }
 
 #header ul#logged-user,
-#content div.box div.title ul.links,
-#content div.box div.message div.dismiss,
-#content div.box div.traffic div.legend ul {
+#content div.panel div.title ul.links,
+#content div.panel div.message div.dismiss,
+#content div.panel div.traffic div.legend ul {
     float: right;
     margin: 0;
     padding: 0;
@@ -3268,8 +3218,8 @@ img.icon, .right .merge img {
 
 #header #header-inner #home,
 #header #header-inner #logo,
-#content div.box ul.left,
-#content div.box ol.left,
+#content div.panel ul.left,
+#content div.panel ol.left,
 div#commit_history,
 div#legend_data, div#legend_container, div#legend_choices {
     float: left;
@@ -3327,24 +3277,24 @@ div#legend_data, div#legend_container, d
     height: 450px;
 }
 
-#content div.box ol.lower-roman,
-#content div.box ol.upper-roman,
-#content div.box ol.lower-alpha,
-#content div.box ol.upper-alpha,
-#content div.box ol.decimal {
+#content div.panel ol.lower-roman,
+#content div.panel ol.upper-roman,
+#content div.panel ol.lower-alpha,
+#content div.panel ol.upper-alpha,
+#content div.panel ol.decimal {
     margin: 10px 24px 10px 44px;
 }
 
-#content div.box div.form,
-#content div.box div.table,
-#content div.box div.traffic {
+#content div.panel div.form,
+#content div.panel div.table,
+#content div.panel div.traffic {
     position: relative;
     clear: both;
     margin: 0;
     padding: 0 20px 10px;
 }
 
-#content div.box div.form div.fields,
+#content div.panel div.form div.fields,
 #login div.form-horizontal,
 #login div.form-horizontal div.form-group,
 #register div.form,
@@ -3355,7 +3305,7 @@ div#legend_data, div#legend_container, d
     padding: 0;
 }
 
-#content div.box div.form div.fields div.field div.label span,
+#content div.panel div.form div.fields div.field div.label span,
 #login div.form div.form-horizontal div.form-group div.label span,
 #register div.form div.fields div.field div.label span {
     height: 1%;
@@ -3365,7 +3315,7 @@ div#legend_data, div#legend_container, d
     padding: 2px 0 0;
 }
 
-#content div.box div.form div.fields div.field div.input input.error,
+#content div.panel div.form div.fields div.field div.input input.error,
 #login div.form div.form-horizontal div.form-group div.input input.error,
 #register div.form div.fields div.field div.input input.error {
     background: #FBE3E4;
@@ -3375,7 +3325,7 @@ div#legend_data, div#legend_container, d
     border-bottom: 1px solid #FBC2C4;
 }
 
-#content div.box div.form div.fields div.field div.input input.success,
+#content div.panel div.form div.fields div.field div.input input.success,
 #login div.form div.form-horizontal div.form-group div.input input.success,
 #register div.form div.fields div.field div.input input.success {
     background: #E6EFC2;
@@ -3385,59 +3335,47 @@ div#legend_data, div#legend_container, d
     border-bottom: 1px solid #c6d880;
 }
 
-#content div.box-left div.form div.fields div.field div.textarea,
-#content div.box-right div.form div.fields div.field div.textarea,
-#content div.box div.form div.fields div.field div.select select,
-#content div.box table th.selected input,
-#content div.box table td.selected input {
+#content div.panel div.form div.fields div.field div.select select,
+#content div.panel table th.selected input,
+#content div.panel table td.selected input {
     margin: 0;
 }
 
-#content div.box-left div.form div.fields div.field div.select,
-#content div.box-left div.form div.fields div.field div.checkboxes,
-#content div.box-left div.form div.fields div.field div.radios,
-#content div.box-right div.form div.fields div.field div.select,
-#content div.box-right div.form div.fields div.field div.checkboxes,
-#content div.box-right div.form div.fields div.field div.radios {
-    margin: 0 0 0 0px !important;
-    padding: 0;
-}
-
-#content div.box div.form div.fields div.field div.select,
-#content div.box div.form div.fields div.field div.checkboxes,
-#content div.box div.form div.fields div.field div.radios {
+#content div.panel div.form div.fields div.field div.select,
+#content div.panel div.form div.fields div.field div.checkboxes,
+#content div.panel div.form div.fields div.field div.radios {
     margin: 0 0 0 200px;
     padding: 0;
 }
 
-#content div.box div.form div.fields div.field div.select a:hover,
-#content div.box div.form div.fields div.field div.select a.ui-selectmenu:hover,
-#content div.box div.action a:hover {
+#content div.panel div.form div.fields div.field div.select a:hover,
+#content div.panel div.form div.fields div.field div.select a.ui-selectmenu:hover,
+#content div.panel div.action a:hover {
     color: #000;
     text-decoration: none;
 }
 
-#content div.box div.form div.fields div.field div.select a.ui-selectmenu-focus,
-#content div.box div.action a.ui-selectmenu-focus {
+#content div.panel div.form div.fields div.field div.select a.ui-selectmenu-focus,
+#content div.panel div.action a.ui-selectmenu-focus {
     border: 1px solid #666;
 }
 
-#content div.box div.form div.fields div.field div.checkboxes div.checkbox,
-#content div.box div.form div.fields div.field div.radios div.radio {
+#content div.panel div.form div.fields div.field div.checkboxes div.checkbox,
+#content div.panel div.form div.fields div.field div.radios div.radio {
     clear: both;
     overflow: hidden;
     margin: 0;
     padding: 8px 0 2px;
 }
 
-#content div.box div.form div.fields div.field div.checkboxes div.checkbox input,
-#content div.box div.form div.fields div.field div.radios div.radio input {
+#content div.panel div.form div.fields div.field div.checkboxes div.checkbox input,
+#content div.panel div.form div.fields div.field div.radios div.radio input {
     float: left;
     margin: 0;
 }
 
-#content div.box div.form div.fields div.field div.checkboxes div.checkbox label,
-#content div.box div.form div.fields div.field div.radios div.radio label {
+#content div.panel div.form div.fields div.field div.checkboxes div.checkbox label,
+#content div.panel div.form div.fields div.field div.radios div.radio label {
     height: 1%;
     display: block;
     float: left;
@@ -3445,39 +3383,32 @@ div#legend_data, div#legend_container, d
 }
 
 div.form div.fields div.field div.button input,
-#content div.box div.form div.fields div.buttons input
+#content div.panel div.form div.fields div.buttons input
 div.form div.fields div.buttons input,
-#content div.box div.action div.button input {
+#content div.panel div.action div.button input {
     font-size: 11px;
     font-weight: 700;
     margin: 0;
 }
 
 div.form div.fields div.field div.highlight,
-#content div.box div.form div.fields div.buttons div.highlight {
+#content div.panel div.form div.fields div.buttons div.highlight {
     display: inline;
 }
 
-#content div.box div.form div.fields div.buttons,
+#content div.panel div.form div.fields div.buttons,
 div.form div.fields div.buttons {
     margin: 10px 0 0 200px;
     padding: 0;
 }
 
-#content div.box-left div.form div.fields div.buttons,
-#content div.box-right div.form div.fields div.buttons,
-div.box-left div.form div.fields div.buttons,
-div.box-right div.form div.fields div.buttons {
-    margin: 10px 0 0;
-}
-
-#content div.box table td.user,
-#content div.box table td.address {
+#content div.panel table td.user,
+#content div.panel table td.address {
     width: 10%;
     text-align: center;
 }
 
-#content div.box div.action div.button,
+#content div.panel div.action div.button,
 #login div.form div.form-horizontal div.form-group div.input div.link,
 #register div.form div.fields div.field div.input div.link {
     text-align: right;
@@ -3485,16 +3416,16 @@ div.box-right div.form div.fields div.bu
     padding: 0;
 }
 
-#content div.box div.pagination div.results,
-#content div.box div.pagination-wh div.results {
+#content div.panel div.pagination div.results,
+#content div.panel div.pagination-wh div.results {
     text-align: left;
     float: left;
     margin: 0;
     padding: 0;
 }
 
-#content div.box div.pagination div.results span,
-#content div.box div.pagination-wh div.results span {
+#content div.panel div.pagination div.results span,
+#content div.panel div.pagination-wh div.results span {
     height: 1%;
     display: block;
     float: left;
@@ -3509,8 +3440,8 @@ div.box-right div.form div.fields div.bu
     padding: 6px 8px;
 }
 
-#content div.box div.pagination ul.pager li.disabled,
-#content div.box div.pagination-wh a.disabled {
+#content div.panel div.pagination ul.pager li.disabled,
+#content div.panel div.pagination-wh a.disabled {
     color: #B4B4B4;
     padding: 6px;
 }
diff --git a/kallithea/templates/about.html b/kallithea/templates/about.html
--- a/kallithea/templates/about.html
+++ b/kallithea/templates/about.html
@@ -11,7 +11,7 @@
 </%block>
 <%def name="main()">
 
-<div class="box">
+<div class="panel panel-primary">
   <!-- box / title -->
   <div class="title">
     <h5>${_('About')} Kallithea</h5>
diff --git a/kallithea/templates/admin/admin.html b/kallithea/templates/admin/admin.html
--- a/kallithea/templates/admin/admin.html
+++ b/kallithea/templates/admin/admin.html
@@ -19,7 +19,7 @@
     ${self.menu('admin')}
 </%block>
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/auth/auth_settings.html b/kallithea/templates/admin/auth/auth_settings.html
--- a/kallithea/templates/admin/auth/auth_settings.html
+++ b/kallithea/templates/admin/auth/auth_settings.html
@@ -16,7 +16,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/defaults/defaults.html b/kallithea/templates/admin/defaults/defaults.html
--- a/kallithea/templates/admin/defaults/defaults.html
+++ b/kallithea/templates/admin/defaults/defaults.html
@@ -16,7 +16,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/gists/edit.html b/kallithea/templates/admin/gists/edit.html
--- a/kallithea/templates/admin/gists/edit.html
+++ b/kallithea/templates/admin/gists/edit.html
@@ -23,7 +23,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/gists/index.html b/kallithea/templates/admin/gists/index.html
--- a/kallithea/templates/admin/gists/index.html
+++ b/kallithea/templates/admin/gists/index.html
@@ -27,7 +27,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/gists/new.html b/kallithea/templates/admin/gists/new.html
--- a/kallithea/templates/admin/gists/new.html
+++ b/kallithea/templates/admin/gists/new.html
@@ -23,7 +23,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/gists/show.html b/kallithea/templates/admin/gists/show.html
--- a/kallithea/templates/admin/gists/show.html
+++ b/kallithea/templates/admin/gists/show.html
@@ -15,7 +15,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/my_account/my_account.html b/kallithea/templates/admin/my_account/my_account.html
--- a/kallithea/templates/admin/my_account/my_account.html
+++ b/kallithea/templates/admin/my_account/my_account.html
@@ -14,7 +14,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box" style="overflow:auto">
+<div class="panel panel-primary" style="overflow:auto">
     <div class="title">
         ${self.breadcrumbs()}
     </div>
diff --git a/kallithea/templates/admin/notifications/notifications.html b/kallithea/templates/admin/notifications/notifications.html
--- a/kallithea/templates/admin/notifications/notifications.html
+++ b/kallithea/templates/admin/notifications/notifications.html
@@ -14,7 +14,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/notifications/show_notification.html b/kallithea/templates/admin/notifications/show_notification.html
--- a/kallithea/templates/admin/notifications/show_notification.html
+++ b/kallithea/templates/admin/notifications/show_notification.html
@@ -16,7 +16,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/permissions/permissions.html b/kallithea/templates/admin/permissions/permissions.html
--- a/kallithea/templates/admin/permissions/permissions.html
+++ b/kallithea/templates/admin/permissions/permissions.html
@@ -17,7 +17,7 @@
 
 
 <%def name="main()">
-<div class="box" style="overflow:auto">
+<div class="panel panel-primary" style="overflow:auto">
     <div class="title">
         ${self.breadcrumbs()}
     </div>
diff --git a/kallithea/templates/admin/repo_groups/repo_group_add.html b/kallithea/templates/admin/repo_groups/repo_group_add.html
--- a/kallithea/templates/admin/repo_groups/repo_group_add.html
+++ b/kallithea/templates/admin/repo_groups/repo_group_add.html
@@ -18,7 +18,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/repo_groups/repo_group_edit.html b/kallithea/templates/admin/repo_groups/repo_group_edit.html
--- a/kallithea/templates/admin/repo_groups/repo_group_edit.html
+++ b/kallithea/templates/admin/repo_groups/repo_group_edit.html
@@ -28,7 +28,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box" style="overflow:auto">
+<div class="panel panel-primary" style="overflow:auto">
     <div class="title">
         ${self.breadcrumbs()}
         ${self.breadcrumbs_side_links()}
diff --git a/kallithea/templates/admin/repo_groups/repo_groups.html b/kallithea/templates/admin/repo_groups/repo_groups.html
--- a/kallithea/templates/admin/repo_groups/repo_groups.html
+++ b/kallithea/templates/admin/repo_groups/repo_groups.html
@@ -15,7 +15,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/repos/repo_add.html b/kallithea/templates/admin/repos/repo_add.html
--- a/kallithea/templates/admin/repos/repo_add.html
+++ b/kallithea/templates/admin/repos/repo_add.html
@@ -24,7 +24,7 @@
 </%block>
 
 <%def name="main()">
-    <div class="box">
+    <div class="panel panel-primary">
         <!-- box / title -->
         <div class="title">
             ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/repos/repo_creating.html b/kallithea/templates/admin/repos/repo_creating.html
--- a/kallithea/templates/admin/repos/repo_creating.html
+++ b/kallithea/templates/admin/repos/repo_creating.html
@@ -17,7 +17,7 @@
     ${self.menu('repositories')}
 </%block>
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/repos/repo_edit.html b/kallithea/templates/admin/repos/repo_edit.html
--- a/kallithea/templates/admin/repos/repo_edit.html
+++ b/kallithea/templates/admin/repos/repo_edit.html
@@ -18,7 +18,7 @@
 
 <%def name="main()">
 ${self.repo_context_bar('options')}
-<div class="box" style="overflow:auto">
+<div class="panel panel-primary" style="overflow:auto">
     <!--<div class="title">-->
         <!--${self.breadcrumbs()}-->
     <!--</div>-->
diff --git a/kallithea/templates/admin/repos/repos.html b/kallithea/templates/admin/repos/repos.html
--- a/kallithea/templates/admin/repos/repos.html
+++ b/kallithea/templates/admin/repos/repos.html
@@ -12,7 +12,7 @@
     ${self.menu('admin')}
 </%block>
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
 
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/settings/settings.html b/kallithea/templates/admin/settings/settings.html
--- a/kallithea/templates/admin/settings/settings.html
+++ b/kallithea/templates/admin/settings/settings.html
@@ -16,7 +16,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box" style="overflow:auto">
+<div class="panel panel-primary" style="overflow:auto">
     <div class="title">
         ${self.breadcrumbs()}
     </div>
diff --git a/kallithea/templates/admin/user_groups/user_group_add.html b/kallithea/templates/admin/user_groups/user_group_add.html
--- a/kallithea/templates/admin/user_groups/user_group_add.html
+++ b/kallithea/templates/admin/user_groups/user_group_add.html
@@ -17,7 +17,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/user_groups/user_group_edit.html b/kallithea/templates/admin/user_groups/user_group_edit.html
--- a/kallithea/templates/admin/user_groups/user_group_edit.html
+++ b/kallithea/templates/admin/user_groups/user_group_edit.html
@@ -18,7 +18,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box" style="overflow:auto">
+<div class="panel panel-primary" style="overflow:auto">
     <div class="title">
         ${self.breadcrumbs()}
     </div>
diff --git a/kallithea/templates/admin/user_groups/user_groups.html b/kallithea/templates/admin/user_groups/user_groups.html
--- a/kallithea/templates/admin/user_groups/user_groups.html
+++ b/kallithea/templates/admin/user_groups/user_groups.html
@@ -15,7 +15,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/users/user_add.html b/kallithea/templates/admin/users/user_add.html
--- a/kallithea/templates/admin/users/user_add.html
+++ b/kallithea/templates/admin/users/user_add.html
@@ -17,7 +17,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/admin/users/user_edit.html b/kallithea/templates/admin/users/user_edit.html
--- a/kallithea/templates/admin/users/user_edit.html
+++ b/kallithea/templates/admin/users/user_edit.html
@@ -18,7 +18,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box" style="overflow:auto">
+<div class="panel panel-primary" style="overflow:auto">
     <div class="title">
         ${self.breadcrumbs()}
     </div>
diff --git a/kallithea/templates/admin/users/users.html b/kallithea/templates/admin/users/users.html
--- a/kallithea/templates/admin/users/users.html
+++ b/kallithea/templates/admin/users/users.html
@@ -14,7 +14,7 @@
 </%block>
 
 <%def name="main()">
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/base/base.html b/kallithea/templates/base/base.html
--- a/kallithea/templates/base/base.html
+++ b/kallithea/templates/base/base.html
@@ -103,7 +103,7 @@
     %>
 
   <!--- CONTEXT BAR -->
-  <div id="context-bar" class="box">
+  <div id="context-bar" class="panel panel-primary">
       <h2>
         ${repotag(c.db_repo)}
 
diff --git a/kallithea/templates/changelog/changelog.html b/kallithea/templates/changelog/changelog.html
--- a/kallithea/templates/changelog/changelog.html
+++ b/kallithea/templates/changelog/changelog.html
@@ -27,7 +27,7 @@
 
 <%def name="main()">
 ${self.repo_context_bar('changelog', c.first_revision.raw_id if c.first_revision else None)}
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/changeset/changeset.html b/kallithea/templates/changeset/changeset.html
--- a/kallithea/templates/changeset/changeset.html
+++ b/kallithea/templates/changeset/changeset.html
@@ -18,7 +18,7 @@
 
 <%def name="main()">
 ${self.repo_context_bar('changelog', c.changeset.raw_id)}
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/changeset/changeset_range.html b/kallithea/templates/changeset/changeset_range.html
--- a/kallithea/templates/changeset/changeset_range.html
+++ b/kallithea/templates/changeset/changeset_range.html
@@ -18,7 +18,7 @@
 
 <%def name="main()">
 ${self.repo_context_bar('changelog')}
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/compare/compare_diff.html b/kallithea/templates/compare/compare_diff.html
--- a/kallithea/templates/compare/compare_diff.html
+++ b/kallithea/templates/compare/compare_diff.html
@@ -19,7 +19,7 @@
 
 <%def name="main()">
 ${self.repo_context_bar('changelog')}
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/files/diff_2way.html b/kallithea/templates/files/diff_2way.html
--- a/kallithea/templates/files/diff_2way.html
+++ b/kallithea/templates/files/diff_2way.html
@@ -25,7 +25,7 @@
 
 <%def name="main()">
 ${self.repo_context_bar('changelog')}
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/files/file_diff.html b/kallithea/templates/files/file_diff.html
--- a/kallithea/templates/files/file_diff.html
+++ b/kallithea/templates/files/file_diff.html
@@ -14,7 +14,7 @@
 
 <%def name="main()">
 ${self.repo_context_bar('changelog')}
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/files/files.html b/kallithea/templates/files/files.html
--- a/kallithea/templates/files/files.html
+++ b/kallithea/templates/files/files.html
@@ -20,7 +20,7 @@
 
 <%def name="main()">
 ${self.repo_context_bar('files', c.revision)}
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/files/files_add.html b/kallithea/templates/files/files_add.html
--- a/kallithea/templates/files/files_add.html
+++ b/kallithea/templates/files/files_add.html
@@ -23,7 +23,7 @@
 
 <%def name="main()">
 ${self.repo_context_bar('files')}
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/files/files_delete.html b/kallithea/templates/files/files_delete.html
--- a/kallithea/templates/files/files_delete.html
+++ b/kallithea/templates/files/files_delete.html
@@ -14,7 +14,7 @@
 
 <%def name="main()">
 ${self.repo_context_bar('files')}
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/files/files_edit.html b/kallithea/templates/files/files_edit.html
--- a/kallithea/templates/files/files_edit.html
+++ b/kallithea/templates/files/files_edit.html
@@ -23,7 +23,7 @@
 
 <%def name="main()">
 ${self.repo_context_bar('files')}
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/followers/followers.html b/kallithea/templates/followers/followers.html
--- a/kallithea/templates/followers/followers.html
+++ b/kallithea/templates/followers/followers.html
@@ -15,7 +15,7 @@
 
 <%def name="main()">
 ${self.repo_context_bar('followers')}
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/forks/fork.html b/kallithea/templates/forks/fork.html
--- a/kallithea/templates/forks/fork.html
+++ b/kallithea/templates/forks/fork.html
@@ -15,7 +15,7 @@
 
 <%def name="main()">
 ${self.repo_context_bar('createfork')}
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     ${h.form(url('repo_fork_create_home',repo_name=c.repo_info.repo_name))}
     <div class="form">
diff --git a/kallithea/templates/forks/forks.html b/kallithea/templates/forks/forks.html
--- a/kallithea/templates/forks/forks.html
+++ b/kallithea/templates/forks/forks.html
@@ -15,7 +15,7 @@
 
 <%def name="main()">
 ${self.repo_context_bar('showforks')}
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/index_base.html b/kallithea/templates/index_base.html
--- a/kallithea/templates/index_base.html
+++ b/kallithea/templates/index_base.html
@@ -1,5 +1,5 @@
 <%page args="parent,group_name=''" />
-    <div class="box">
+    <div class="panel panel-primary">
         <!-- box / title -->
         <div class="title">
             %if c.authuser.username != 'default':
diff --git a/kallithea/templates/journal/journal.html b/kallithea/templates/journal/journal.html
--- a/kallithea/templates/journal/journal.html
+++ b/kallithea/templates/journal/journal.html
@@ -23,7 +23,7 @@
 </%block>
 
 <%def name="main()">
-    <div class="box">
+    <div class="panel panel-primary">
         <!-- box / title -->
         <div class="title">
          ${self.breadcrumbs()}
diff --git a/kallithea/templates/journal/public_journal.html b/kallithea/templates/journal/public_journal.html
--- a/kallithea/templates/journal/public_journal.html
+++ b/kallithea/templates/journal/public_journal.html
@@ -15,7 +15,7 @@
 </%block>
 <%def name="main()">
 
-<div class="box">
+<div class="panel panel-primary">
   <!-- box / title -->
   <div class="title">
     <h5>${_('Public Journal')}</h5>
diff --git a/kallithea/templates/pullrequests/pullrequest.html b/kallithea/templates/pullrequests/pullrequest.html
--- a/kallithea/templates/pullrequests/pullrequest.html
+++ b/kallithea/templates/pullrequests/pullrequest.html
@@ -14,7 +14,7 @@
 
 <%def name="main()">
 ${self.repo_context_bar('showpullrequest')}
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/pullrequests/pullrequest_show.html b/kallithea/templates/pullrequests/pullrequest_show.html
--- a/kallithea/templates/pullrequests/pullrequest_show.html
+++ b/kallithea/templates/pullrequests/pullrequest_show.html
@@ -17,7 +17,7 @@
 <%def name="main()">
 <% editable = not c.pull_request.is_closed() and (h.HasPermissionAny('hg.admin')() or h.HasRepoPermissionAny('repository.admin')(c.repo_name) or c.pull_request.owner_id == c.authuser.user_id) %>
 ${self.repo_context_bar('showpullrequest')}
-<div class="box">
+<div class="panel panel-primary">
   <!-- box / title -->
   <div class="title">
     ${self.breadcrumbs()}
@@ -300,7 +300,7 @@ ${self.repo_context_bar('showpullrequest
   ${h.end_form()}
 </div>
 
-<div class="box">
+<div class="panel panel-primary">
     <div class="title">
       <div class="breadcrumbs">${_('Pull Request Content')}</div>
     </div>
diff --git a/kallithea/templates/pullrequests/pullrequest_show_all.html b/kallithea/templates/pullrequests/pullrequest_show_all.html
--- a/kallithea/templates/pullrequests/pullrequest_show_all.html
+++ b/kallithea/templates/pullrequests/pullrequest_show_all.html
@@ -21,7 +21,7 @@
 <%def name="main()">
 ${self.repo_context_bar('showpullrequest')}
 
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/pullrequests/pullrequest_show_my.html b/kallithea/templates/pullrequests/pullrequest_show_my.html
--- a/kallithea/templates/pullrequests/pullrequest_show_my.html
+++ b/kallithea/templates/pullrequests/pullrequest_show_my.html
@@ -16,7 +16,7 @@
 
 <%def name="main()">
 
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/search/search.html b/kallithea/templates/search/search.html
--- a/kallithea/templates/search/search.html
+++ b/kallithea/templates/search/search.html
@@ -32,7 +32,7 @@
 %if c.repo_name:
 ${self.repo_context_bar('options')}
 %endif
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/summary/statistics.html b/kallithea/templates/summary/statistics.html
--- a/kallithea/templates/summary/statistics.html
+++ b/kallithea/templates/summary/statistics.html
@@ -22,7 +22,7 @@ ${self.repo_context_bar('summary')}
     <%
     summary = lambda n:{False:'summary-short'}.get(n)
     %>
-    <div class="box">
+    <div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
diff --git a/kallithea/templates/summary/summary.html b/kallithea/templates/summary/summary.html
--- a/kallithea/templates/summary/summary.html
+++ b/kallithea/templates/summary/summary.html
@@ -59,7 +59,7 @@ ${self.repo_context_bar('summary')}
 <%
 summary = lambda n:{False:'summary-short'}.get(n)
 %>
-<div class="box">
+<div class="panel panel-primary">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
@@ -177,7 +177,7 @@ summary = lambda n:{False:'summary-short
 </div>
 
 
-<div class="box">
+<div class="panel panel-primary">
     <div class="title">
         <div class="breadcrumbs">
         %if c.repo_changesets:
@@ -196,7 +196,7 @@ summary = lambda n:{False:'summary-short
 
 %if c.readme_data:
 <div id="readme" class="anchor">
-<div class="box" style="background-color: #FAFAFA">
+<div class="panel panel-primary" style="background-color: #FAFAFA">
     <div class="title" title="${_('Readme file from revision %s:%s') % (c.db_repo.landing_rev[0], c.db_repo.landing_rev[1])}">
         <div class="breadcrumbs">
             <a href="${h.url('files_home',repo_name=c.repo_name,revision='tip',f_path=c.readme_file)}">${c.readme_file}</a>