Bug 21943: (follow-up) Fix float error with sidebar menu
[koha-equinox.git] / koha-tmpl / intranet-tmpl / prog / css / src / staff-global.scss
index e4bd5f1..2844424 100644 (file)
@@ -2,9 +2,10 @@
 
 $font-main: Arial, Verdana, Helvetica, sans-serif;
 $font-monospace: "Courier New", Courier, monospace;
+$language-footer-min-height: 20px;
 
 @mixin default-button {
-    background: linear-gradient(to bottom, #FFFFFF 0%, #F7F7F7 35%, #E0E0E0 100%); /* W3C */
+    background: linear-gradient(to bottom, #FFFFFF 0%, #F7F7F7 35%, #E0E0E0 100%);
     border: 1px outset #999999;
     border-left-color: #666;
     border-top-color: #666;
@@ -20,7 +21,7 @@ $font-monospace: "Courier New", Courier, monospace;
 
 ::selection {
     background: #538200;
-    color: #FFFFFF; /* Safari and Opera */
+    color: #FFFFFF;
 }
 
 a {
@@ -30,16 +31,6 @@ a {
         text-decoration: none;
     }
 
-    &.btn {
-        color: #004D99;
-        text-decoration: none;
-
-        &:link,
-        &:visited {
-            color: #333333;
-        }
-    }
-
     &:hover,
     &:active {
         color: #538200;
@@ -52,18 +43,24 @@ a {
         }
     }
 
-    .btn-link {
+    &.btn {
         &:link,
         &:visited {
-            color: #004D99;
+            color: #333333;
         }
 
-        &:hover {
-            color: #538200;
+        &.btn-link {
+            &:link,
+            &:visited {
+                color: #004D99;
+            }
+
+            &:hover {
+                color: #538200;
+            }
         }
     }
 
-
     &.cancel {
         padding-left: 1em;
     }
@@ -94,11 +91,6 @@ a {
         color: #666;
     }
 
-    &.overdue,
-    &.debit {
-        color: #CC0000;
-    }
-
     &.popup {
         background: transparent url("../img/pop-up-link.png") center right no-repeat;
         padding-right: 15px;
@@ -111,6 +103,8 @@ a {
     &.document {
         background-position: left middle;
         background-repeat: no-repeat;
+        display: inline-block;
+        min-height: 20px;
         padding-left: 20px;
     }
 
@@ -153,6 +147,78 @@ a {
 
 }
 
+aside {
+    h5 {
+        font-size: 100%;
+        margin: .5em 0;
+    }
+
+    fieldset {
+        &.brief {
+            margin: 0;
+            padding: .4em .7em;
+
+            fieldset {
+                margin: 0;
+                padding: .5em 0;
+
+                legend {
+                    font-size: 85%;
+                }
+            }
+
+            li {
+                &.checkbox {
+                    label {
+                        display: inline;
+                    }
+                }
+
+                &.dateinsert {
+                    label {
+                        display: inline;
+                    }
+
+                    span {
+                        &.label {
+                            display: inline;
+                        }
+                    }
+                }
+
+                &.radio {
+                    padding: .7em 0;
+
+                    input {
+                        padding: .3em 0;
+                    }
+
+                    label {
+                        display: inline;
+                    }
+
+                    span {
+                        &.label {
+                            display: inline;
+                        }
+                    }
+                }
+            }
+
+            ol {
+                font-size: 85%;
+                margin: 0;
+                padding: 0;
+            }
+
+            select,
+            [type="text"] {
+                width: 100%;
+            }
+        }
+    }
+}
+
 button {
     @include default-button;
 
@@ -172,6 +238,25 @@ button {
     }
 }
 
+main {
+    &::after {
+        clear: both;
+        content: " ";
+        display: table;
+    }
+
+    .yui-b {
+        fieldset {
+            &.brief {
+                [type="text"],
+                select {
+                    width: auto;
+                }
+            }
+        }
+    }
+}
+
 table {
     border-collapse: collapse;
     border-right: 1px solid #BCBCBC;
@@ -192,7 +277,7 @@ table {
         }
     }
 
-    & > caption {
+    > caption {
         span {
             &.actions {
                 font-size: 66%;
@@ -210,6 +295,10 @@ table {
             border: 0;
         }
     }
+
+    + table {
+        margin-top: 1em;
+    }
 }
 
 td,
@@ -260,13 +349,9 @@ th {
     }
 }
 
-table + table {
-    margin-top: 1em;
-}
-
 body {
     font-family: $font-main;
-    padding: 0 0 4em 0;
+    padding: 0 0 4em;
     text-align: left;
 }
 
@@ -333,8 +418,13 @@ h6 {
     margin: .3em 0;
 }
 
+hr {
+    clear: both;
+    margin: 1em 0;
+}
+
 p {
-    margin: .5em 0 .5em 0;
+    margin: .5em 0;
 }
 
 strong {
@@ -392,7 +482,7 @@ input {
         }
 
         &:disabled {
-            @include disabled-button
+            @include disabled-button;
         }
     }
 
@@ -401,6 +491,16 @@ input {
         border-color: #900;
     }
 
+    &.hasDatepicker {
+        background-image: url("../img/famfamfam/silk/calendar.png");
+        background-position-x: right;
+        background-position-y: center;
+        background-repeat: no-repeat;
+        border-style: inset outset outset inset;
+        border-width: 1px;
+        padding-right: 18px;
+    }
+
     &.submit {
         @include default-button;
 
@@ -409,7 +509,7 @@ input {
         }
 
         &:disabled {
-            @include disabled-button
+            @include disabled-button;
         }
     }
 
@@ -443,19 +543,6 @@ label,
         font-weight: bold;
     }
 
-    /* Permissions Labels */
-    &.permissioncode {
-        font-style: italic;
-
-        &::before {
-            content: "(";
-        }
-
-        &::after {
-            content: ")";
-        }
-    }
-
     &.required {
         color: #C00;
     }
@@ -483,6 +570,10 @@ label,
 
         a {
             text-decoration: none;
+
+            &.current {
+                font-weight: bold;
+            }
         }
     }
 }
@@ -495,10 +586,11 @@ label,
 }
 
 .main {
+    margin-bottom: $language-footer-min-height * 1.5;
     margin-top: 1em;
 }
 
-#login_controls  {
+#login_controls {
     padding: .4em .5em;
     position: absolute;
     right: .5em;
@@ -561,7 +653,7 @@ ul {
         }
     }
 
-    /* For Font Awesome icon bullets */
+    // For Font Awesome icon bullets
     &.fa-ul {
         li {
             list-style-type: none;
@@ -585,22 +677,6 @@ ol {
     &.bibliodetails {
         float: left;
         margin: 0 0 1em 1em;
-
-        li {
-            border-bottom: 1px solid #E8E8E8;
-            list-style-type: none;
-            padding: .1em;
-        }
-
-        span {
-            &.label {
-                border-right: 1px solid #E8E8E8;
-                float: left;
-                font-weight: bold;
-                margin-right: 1em;
-                width: 12em;
-            }
-        }
     }
 }
 
@@ -611,16 +687,9 @@ ol {
     width: 100%;
 }
 
-.clearfix {
-    display: inline-block;
-
-    &::after {
-        clear: both;
-        content: ".";
-        display: block;
-        height: 0;
-        visibility: hidden;
-    }
+.cart-controls {
+    border-top: 1px solid #E8E8E8;
+    padding: 7px 0;
 }
 
 #editions {
@@ -635,6 +704,12 @@ ol {
     background-color: #FFD000 !important;
 }
 
+.warned-row,
+.warned-row td { background-color: #FF9000 !important }
+
+.high-warned-row,
+.high-warned-row td { background-color: #FF0000 !important }
+
 tbody {
     tr {
         &:nth-child(odd) {
@@ -647,13 +722,14 @@ tbody {
     }
 }
 
-.overdue {
-    td {
-        &.od {
-            color: #CC0000;
-            font-weight: bold;
-        }
-    }
+.overdue,
+.debit {
+    color: #CC0000;
+    font-weight: bold;
+}
+
+.strong {
+    font-weight: bold;
 }
 
 tr {
@@ -760,6 +836,7 @@ tfoot {
     td {
         background-color: #F3F3F3;
         font-weight: bold;
+        vertical-align: middle;
     }
 }
 
@@ -784,25 +861,33 @@ fieldset {
     margin: 1em 1em 1em 0;
     padding: 1em;
 
-    & + fieldset {
+    + fieldset {
         &.action {
             padding-top: 20px;
         }
     }
 
-    .lastchecked {
+    &.lastchecked {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
         border-bottom-width: 0;
         margin-bottom: 0;
     }
 
+    .standard {
+        background-color:#f4f8f9 !important;
+    }
+
+    .contrast {
+        background-color:#F3F3F3 !important;
+    }
+
     &.action {
         background-color: transparent;
         border: 0;
         clear: both;
         float: none;
-        margin: .9em 0 0 0;
+        margin: .9em 0 0;
         padding: .4em;
         width: auto;
     }
@@ -811,7 +896,7 @@ fieldset {
         border: 2px solid #B9D8D9;
 
         div {
-            .hint {
+            &.hint {
                 margin-bottom: .4em;
             }
         }
@@ -840,6 +925,13 @@ fieldset {
                 margin-left: 1em;
                 width: auto;
             }
+
+            &.radio,
+            &.checkbox {
+                label {
+                    display: inline;
+                }
+            }
         }
 
         ol,
@@ -852,6 +944,7 @@ fieldset {
                 display: block;
                 font-weight: bold;
                 padding: .3em 0;
+                text-align: left;
             }
         }
     }
@@ -862,7 +955,7 @@ fieldset {
         clear: left;
         float: left;
         font-size: 90%;
-        margin: .9em 0 0 0;
+        margin: .9em 0 0;
         padding: 0;
         width: 100%;
 
@@ -907,7 +1000,7 @@ fieldset {
             border-top-right-radius: 0;
             margin: 0;
             padding: 0;
-            width: auto;
+            width: 100%;
 
             table {
                 margin: 0;
@@ -925,9 +1018,9 @@ fieldset {
         }
 
         div {
-            .hint {
+            &.hint {
                 margin-bottom: .4em;
-                margin-left: 7.5em;
+                margin-left: 10.5em;
             }
         }
 
@@ -936,9 +1029,9 @@ fieldset {
             font-weight: bold;
             margin-right: 1em;
             text-align: right;
-            width: 6em;
+            width: 9em;
 
-            .error {
+            &.error {
                 float: none;
                 margin-left: 1em;
                 width: auto;
@@ -950,7 +1043,14 @@ fieldset {
                 margin-left: 1em;
             }
 
-            .yesno {
+            &.radio {
+                display: inline-block;
+                margin: 0 1em 0 0;
+                padding: 0;
+                width: auto;
+            }
+
+            &.yesno {
                 float: none;
                 width: auto;
             }
@@ -997,7 +1097,7 @@ fieldset {
 
         ol {
             list-style-type: none;
-            padding: 1em 1em 0 1em;
+            padding: 1em 1em 0;
 
             &.radio {
                 label {
@@ -1035,7 +1135,7 @@ fieldset {
                 font-weight: bold;
                 margin-right: 1em;
                 text-align: right;
-                width: 6em;
+                width: 9em;
             }
         }
 
@@ -1063,16 +1163,26 @@ fieldset {
             margin: 1em 0 0 11em;
         }
 
-        &+h3 {
+        + h3 {
             clear: both;
             padding-top: .5em;
         }
     }
 }
 
+#multi_receiving {
+    fieldset {
+        &.rows {
+            label {
+                width: 50%;
+            }
+        }
+    }
+}
+
 .yui-u {
     div {
-        .hint {
+        &.hint {
             margin-bottom: .4em;
         }
     }
@@ -1120,6 +1230,34 @@ legend {
     width: auto;
 }
 
+details {
+    > summary {
+        cursor: pointer;
+
+        &::before {
+            content: "\f0da";
+            display: inline-block;
+            font-family: FontAwesome;
+            width: 1em;
+        }
+
+        &.checkouts-by-itemtype {
+            li {
+                display: inline-block;
+            }
+        }
+    }
+}
+
+details[open] {
+    > summary {
+        &::before {
+            content: "\f0d7";
+        }
+    }
+}
+
+
 #floating-save {
     background-color: rgba(185, 216, 217, .6);
     bottom: 3%;
@@ -1136,12 +1274,14 @@ legend {
     padding: .2em .5em .4em 10px;
 }
 
-#header + #breadcrumbs {
-    margin-top: 1em;
-}
+#header {
+    + #breadcrumbs {
+        margin-top: 1em;
+    }
 
-#header > .container-fluid {
-    padding: 0;
+    > .container-fluid {
+        padding: 0;
+    }
 }
 
 div {
@@ -1150,27 +1290,20 @@ div {
         border: 0;
         clear: both;
         float: none;
-        margin: .9em 0 0 0;
+        margin: .9em 0 0;
         padding: .4em;
         width: auto;
     }
 
     .circmessage {
         margin-bottom: .3em;
-        padding: 0 .4em .4em .4em;
+        padding: 0 .4em .4em;
 
         &:first-child {
             margin-top: 1em;
         }
     }
 
-    &.error {
-        background-color: #FFFF99;
-        border: 2px dashed #990000;
-        margin: 1em;
-        padding: .5em;
-    }
-
     &.first {
         fieldset {
             margin-right: 0;
@@ -1178,7 +1311,7 @@ div {
     }
 
     &.help {
-        margin: .9em 0 0 0;
+        margin: .9em 0 0;
     }
 
     &.justify {
@@ -1186,7 +1319,7 @@ div {
     }
 
     &.message {
-        background: linear-gradient(to bottom, #ffffff 0%, #f4f6fa 2%, #eaeef5 23%, #e8edf6 94%, #cddbf2 100%);
+        background: linear-gradient(to bottom, #FFFFFF 0%, #F4F6FA 2%, #EAEEF5 23%, #E8EDF6 94%, #CDDBF2 100%);
         border: 1px solid #BCBCBC;
         text-align: center;
         width: 55%;
@@ -1203,7 +1336,7 @@ div {
     }
 
     &.note {
-        background: linear-gradient(to bottom, #F4F6FA 0%, #E8EDF6 100%); /* W3C */
+        background: linear-gradient(to bottom, #F4F6FA 0%, #E8EDF6 100%); // W3C
         border: 1px solid #BCBCBC;
         margin: .5em 0;
         padding: .5em;
@@ -1217,7 +1350,7 @@ div {
         }
     }
 
-    /* Tools > automatic_item_modification_by_age */
+    // Tools > automatic_item_modification_by_age
     &.rules {
         display: block;
     }
@@ -1246,13 +1379,13 @@ div {
     }
 
     &.listgroup {
-        clear:  left;
+        clear: left;
 
         h4 {
             font-style: italic;
 
             a {
-                font-size:  80%;
+                font-size: 80%;
             }
         }
 
@@ -1281,23 +1414,22 @@ div {
     &.rows {
         clear: left;
         float: left;
-        margin: 0 0 0 0;
+        margin: 0;
         padding: 0;
         width: 100%;
 
-        & + div {
+        + div {
             &.rows {
                 margin-top: .6em;
             }
         }
 
         li {
-            border-bottom:  1px solid #EEE;
+            border-bottom: 1px solid #EEE;
             clear: left;
             float: left;
             list-style-type: none;
-            padding-bottom: .2em;
-            padding-top: .1em;
+            padding: .275em;
             width: 100%;
         }
 
@@ -1312,6 +1444,10 @@ div {
             }
         }
 
+        p {
+            margin-left: 10em;
+        }
+
         span {
             &.label {
                 float: left;
@@ -1329,7 +1465,7 @@ div {
 
         a {
             font-weight: bold;
-            padding: 1px 5px 1px 5px;
+            padding: 1px 5px;
             text-decoration: none;
 
             &:link,
@@ -1349,14 +1485,14 @@ div {
             background-color: #E6FCB7;
             color: #666;
             font-weight: bold;
-            padding: 1px 5px 1px 5px;
+            padding: 1px 5px;
         }
 
         .inactive {
             background-color: #F3F3F3;
             color: #BCBCBC;
             font-weight: bold;
-            padding: 1px 5px 1px 5px;
+            padding: 1px 5px;
         }
     }
 
@@ -1369,7 +1505,7 @@ div {
     background-position: .5em .5em;
     background-repeat: no-repeat;
     float: left;
-    margin: .3em 0 .5em 0;
+    margin: .3em 0 .5em;
 
     input {
         font-size: 1.3em;
@@ -1383,7 +1519,7 @@ div {
         &.residentsearch {
             border: 0;
             border-bottom: 1px solid #85CA11;
-            padding: 0 0 .2em 0;
+            padding: 0 0 .2em;
         }
     }
 
@@ -1421,11 +1557,11 @@ div {
         border-radius: 0 0 4px 4px;
     }
 
-    & > div,
-    & > ul {
+    > div,
+    > ul {
         display: none;
 
-        & > li {
+        > li {
             display: none;
 
             &:first-of-type {
@@ -1481,7 +1617,18 @@ dd {
     border: 1px solid #E6F0F2;
     border-radius: 5px 5px 0 0;
     margin: 0;
-    padding: 5px 5px 5px 5px;
+    padding: 5px;
+
+    .dropdown-menu {
+        border-top-width: 1px;
+        font-size: 13px;
+    }
+
+    &.floating {
+        border-radius: 0;
+        margin-top: 0;
+        z-index: 300;
+    }
 }
 
 #disabled {
@@ -1530,34 +1677,68 @@ dd {
         }
     }
 
-    & + #menu {
+    + #menu {
         margin-right: 0;
     }
-}
 
-#patronbasics {
-    div {
-        background: transparent url("../img/patron-blank.min.svg") 10px 5px no-repeat;
-        border: 1px solid #CCCCCC;
-        height: 125px;
-        margin: .3em 0 .3em .3em;
-        padding: 0;
-        width: 105px;
+    > div {
+        border-right: 1px solid #B9D8D9;
+        width: 100%;
     }
 }
 
-#patronimage {
-    border: 1px solid #CCCCCC;
-    margin: .3em 0 .3em .3em;
-    max-width: 140px;
+/* Patron image */
+
+.patronimage-container {
     padding: .2em;
+    position: relative;
+
+    &:hover {
+        .patronimage {
+            opacity: .8;
+        }
+
+        .patronimage-controls {
+            opacity: 1;
+        }
+    }
 }
 
+.patronimage {
+    border: 1px solid #EEE;
+    display: block;
+    max-width: 160px;
+    margin: auto;
+    opacity: 1;
+    transition: .2s ease;
+
+    &.empty {
+        background: transparent url( "../img/patron-blank.min.svg" ) center 5px no-repeat;
+        height: 125px;
+        padding: 0;
+        width: 80%;
+    }
+}
+
+.patronimage-controls {
+    left: 50%;
+    opacity: 0;
+    position: absolute;
+    text-align: center;
+    top: 80%;
+    transform: translate( -50%, -50% );
+    transition: .5s ease;
+}
+
+.patronimage-control {
+    padding: 1em 2em;
+ }
+
 .patronviews {
-    border-right:  1px solid #000;
+    border-right: 1px solid #000;
     border-top: 1px solid #000;
     margin-bottom: .5em;
-    padding: .5em 0 .5em 0;
+    padding: .5em 0;
 }
 
 .column-tool {
@@ -1647,8 +1828,9 @@ dd {
                 padding: 0;
             }
 
-            select {
-                width: 12em;
+            select,
+            [type=text] {
+                width: 100%;
             }
         }
 
@@ -1659,16 +1841,6 @@ dd {
                 }
             }
 
-            label {
-                width: 9em;
-            }
-
-            span {
-                &.label {
-                    width: 9em;
-                }
-            }
-
             td {
                 label {
                     width: auto;
@@ -1684,6 +1856,25 @@ dd {
     }
 }
 
+#yui-main {
+    .yui-b {
+        fieldset {
+            &.brief {
+                select,
+                [type=text] {
+                    width: auto;
+                }
+            }
+        }
+    }
+}
+
+.dropdown-menu {
+    li {
+        list-style-type: none;
+    }
+}
+
 .btn-toolbar {
     fieldset {
         &.action {
@@ -1713,35 +1904,29 @@ dd {
 
 .content_hidden {
     display: none;
-    visibility: hidden; /* you propably don't need to change this one */
+    visibility: hidden; // you propably don't need to change this one
 }
 
-/* the property for the displayed tab */
+// the property for the displayed tab
 .content_visible {
     display: block;
-    visibility: visible; /* you propably don't need to change this one */
+    visibility: visible; // you propably don't need to change this one
 }
 
 #z3950searcht {
     table {
-        /* doesn't have desired effect in catalogue/results.tmpl - I'll leave this here for now but there do seem to be casscading CSS errors in this and other CSS fiels - RICKW 20081118 */
         border: 0;
         padding: 20px;
     }
 }
 
 #z3950_search_targets {
-    height:     338px;
+    height: 338px;
     overflow-y: auto;
 }
 
 #z3950_search_targets_acq {
-    height:     308px;
-    overflow-y: auto;
-}
-
-#z3950_search_targets_auth {
-    height:     348px;
+    height: 308px;
     overflow-y: auto;
 }
 
@@ -1761,7 +1946,7 @@ dd {
     background-color: #FF0000;
 }
 
-/* Font Awesome icons */
+// Font Awesome icons
 i {
     &.error {
         color: #CC0000;
@@ -1897,7 +2082,7 @@ i {
 }
 
 .alert {
-    background: linear-gradient(to bottom, #FEF8D3 0%, #FFEC91 9%, #FFED87 89%, #F9DC00 100%); /* W3C */
+    background: linear-gradient(to bottom, #FEF8D3 0%, #FFEC91 9%, #FFED87 89%, #F9DC00 100%);
     border: 1px solid #E0C726;
     color: inherit;
     text-align: center;
@@ -1907,8 +2092,8 @@ i {
         color: #900;
     }
 
-    /* Redefine a new style for Bootstrap's class "close" since we use that already */
-    /* Use <a class="closebtn" href="#">&times;</a> */
+    // Redefine a new style for Bootstrap's class "close" since we use that already
+    // Use <a class="closebtn" href="#">&times;</a>
     .closebtn {
         line-height: 20px;
         position: relative;
@@ -1955,9 +2140,8 @@ i {
     color: #990000;
 }
 
-/* style for shelving location in catalogsearch */
+// style for shelving location in catalogsearch
 .shelvingloc {
-    display: block;
     font-style: italic;
 }
 
@@ -1969,19 +2153,19 @@ i {
 
     li {
         a {
-            background: linear-gradient(to bottom, #e8f0f6 0%, #e8f0f6 96%, #c1c1c1 100%);
+            background: linear-gradient(to bottom, #E8F0F6 0%, #E8F0F6 96%, #C1C1C1 100%);
             border: 1px solid #B9D8D9;
             border-bottom-left-radius: 5px;
             border-top-left-radius: 5px;
             display: block;
             font-size: 111%;
             margin: .5em 0;
-            margin-right:  -1px;
+            margin-right: -1px;
             padding: .4em .3em;
             text-decoration: none;
 
             &:hover {
-                background: linear-gradient(to bottom, #fafafa 0%, #ffffff 96%, #e6e6e6 97%, #cccccc 99%, #c1c1c1 100%);
+                background: linear-gradient(to bottom, #FAFAFA 0%, #FFFFFF 96%, #E6E6E6 97%, #CCCCCC 99%, #C1C1C1 100%);
                 border-bottom: 1px solid #85CA11;
                 border-left: 1px solid #85CA11;
                 border-top: 1px solid #85CA11;
@@ -2001,7 +2185,7 @@ i {
 
                 &:hover {
                     background-color: #FFFFFF;
-                    color:  #538200;
+                    color: #538200;
                 }
             }
         }
@@ -2016,7 +2200,7 @@ i {
 
 
 #logo {
-    background: transparent url("../img/koha-logo-medium.gif") no-repeat scroll 0%;
+    background: transparent url("../img/koha-logo-medium.png") no-repeat scroll 0%;
     margin: .75em .3em .75em .7em;
 
     a {
@@ -2042,7 +2226,7 @@ i {
 }
 
 .barcode {
-    font-size:  200%;
+    font-size: 200%;
     vertical-align: middle;
 }
 
@@ -2057,7 +2241,7 @@ li {
 .patronbriefinfo {
     li {
         &.email {
-            font-size:  87%;
+            font-size: 87%;
             padding: 0 10px 0 0;
             width: 90%;
         }
@@ -2070,6 +2254,10 @@ li {
 
 .address {
     font-size: 110%;
+
+    li {
+        list-style-type: none;
+    }
 }
 
 .title {
@@ -2086,10 +2274,28 @@ li {
 .thumbnail {
     display: block;
     margin: auto;
+}
 
-    & > li {
+.thumbnails {
+    li {
+        display: inline-block;
         list-style-type: none;
     }
+
+    .remove {
+        border-top: 1px solid #EEE;
+        display: block;
+        font-size: 90%;
+        margin: 4px -4px 2px -4px;
+        padding-top: .5em;
+        text-align: center;
+    }
+
+    & + p {
+        border-top: 1px solid #eee;
+        margin-top: 1em;
+        padding-top: 1em;
+    }
 }
 
 #searchresults {
@@ -2170,6 +2376,14 @@ li {
             padding: 5px 25em 0 0;
         }
     }
+
+    .dropdown-header {
+        border-top: 1px solid #EEE;
+        color: #000;
+        font-weight: bold;
+        padding-left: 10px;
+    }
+
 }
 
 #search-facets {
@@ -2234,10 +2448,6 @@ li {
     vertical-align: top;
 }
 
-#toplevelmenu {
-    padding: 0;
-}
-
 #CheckAll,
 #CheckNone,
 #CheckPending {
@@ -2293,7 +2503,7 @@ li {
         border: 0;
         font-family: $font-monospace;
         font-size: 95%;
-        margin: .7em 0 0 0;
+        margin: .7em 0 0;
     }
 
     tbody {
@@ -2332,13 +2542,6 @@ li {
     }
 }
 
-@media (max-width: 767px) {
-    #marcPreview {
-        margin: 0;
-        width: auto;
-    }
-}
-
 #cartDetails {
     background-color: #FFFFFF;
     border: 1px solid #739ACF;
@@ -2374,7 +2577,7 @@ li {
     color: #707070;
     display: block;
     font-size: 85%;
-    padding: 0 0 .5em 0;
+    padding: 0 0 .5em;
 
     a {
         font-weight: normal;
@@ -2393,7 +2596,8 @@ li {
     font-size: 105%;
     line-height: 200%;
 
-    a {
+    a,
+    span {
         background-color: #E4ECF5;
         border: 1px solid #A4BEDD;
         border-radius: 4px;
@@ -2453,7 +2657,7 @@ li {
         }
     }
 
-     .importing {
+    .importing {
         background: none;
         padding: inherit;
     }
@@ -2530,7 +2734,7 @@ li {
         display: block;
         font-size: 160%;
         font-weight: bold;
-        padding: 0 .7em .2em .7em;
+        padding: 0 .7em .2em;
         text-decoration: none;
         text-shadow: 0 -1px 0 #666;
 
@@ -2540,6 +2744,27 @@ li {
     }
 }
 
+#printclearscreen {
+    position: absolute;
+    right: 43px;
+    top: 0;
+
+    a {
+        background-color: #EEE;
+        border-radius: 0 0 0 5px;
+        color: #CCC;
+        display: block;
+        font-size: 160%;
+        font-weight: bold;
+        padding: 0 .7em .2em;
+        text-decoration: none;
+        text-shadow: 0 -1px 0 #666;
+
+        &:hover {
+            color: #CC0000;
+        }
+    }
+}
 .pager {
     background-color: #E8E8E8;
     border: 1px solid #BCBCBC;
@@ -2547,7 +2772,7 @@ li {
     display: inline-block;
     font-size: 85%;
     margin: .4em 0;
-    padding: .3em .5em .3em .5em;
+    padding: .3em .5em;
 
     img {
         vertical-align: middle;
@@ -2584,20 +2809,20 @@ li {
 }
 
 #acqui_order_supplierlist {
-    & > div {
+    > div {
         &.supplier {
             border: 1px solid #EEEEEE;
             margin: .5em;
             padding: 1em;
         }
 
-        & > div {
-            & > .baskets {
+        > div {
+            > .baskets {
                 margin-top: .5em;
             }
         }
 
-        & > span {
+        > span {
             &.action {
                 margin-left: 5em;
             }
@@ -2611,10 +2836,6 @@ li {
     }
 }
 
-.supplier-contact-details {
-    float: left;
-}
-
 #ADD-contact {
     margin: 0 0 8px 8px;
 }
@@ -2623,7 +2844,7 @@ li {
     display: none;
 }
 
-/* Override core jQueryUI widgets */
+// Override core jQueryUI widgets
 .ui-widget-content {
     background: #FFFFFF none;
     border: 1px solid #B9D8D9;
@@ -2669,7 +2890,7 @@ li {
 
 .ui-state-highlight,
 .ui-widget-content .ui-state-highlight,
-.ui-widget-header .ui-state-highlight  {
+.ui-widget-header .ui-state-highlight {
     background: #FFF4C6;
     border: 1px solid #FED22F;
     color: #363636;
@@ -2678,12 +2899,12 @@ li {
 .ui-state-error,
 .ui-widget-content .ui-state-error,
 .ui-widget-header .ui-state-error {
-    border: 1px solid #CD0A0A;
     background: #FEF1EC;
+    border: 1px solid #CD0A0A;
     color: #CD0A0A;
 }
 
-/* Override jQuery Autocomplete */
+// Override jQuery Autocomplete
 .ui-autocomplete {
     box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
     cursor: default;
@@ -2703,7 +2924,7 @@ li {
     background: #FFF url("../img/spinner-small.gif") right center no-repeat;
 }
 
-/* jQuery UI standard tabs */
+// jQuery UI standard tabs
 .ui-menu {
     li {
         list-style: none;
@@ -3003,7 +3224,7 @@ li {
     }
 }
 
-/* jQuery UI Datepicker */
+// jQuery UI Datepicker
 .ui-datepicker {
     box-shadow: 1px 1px 3px 0 #666;
 
@@ -3029,7 +3250,7 @@ li {
     vertical-align: middle;
 }
 
-/* css for timepicker */
+// css for timepicker
 .ui-timepicker-div {
     dl {
         text-align: left;
@@ -3066,7 +3287,7 @@ li {
     display: none;
 }
 
-/* jQuery UI Accordion */
+// jQuery UI Accordion
 .ui-accordion-header,
 .ui-widget-content .ui-accordion-header {
     font-size: 110%;
@@ -3077,7 +3298,51 @@ video {
     width: 480px;
 }
 
-/* Bootstrap overrides */
+// Bootstrap overrides
+
+nav {
+    background: #E6F0F2 none;
+    border: 0;
+}
+
+.navbar-collapse {
+    background: #E6F0F2 none;
+    box-shadow: none;
+}
+
+.navbar-nav {
+    li {
+        list-style: none;
+
+        &.open {
+            li {
+                a {
+                    font-weight: normal;
+                }
+            }
+        }
+
+        a {
+            font-weight: bold;
+            padding-bottom: .4em;
+            padding-top: .4em;
+        }
+    }
+}
+
+.nav .open > a,
+.nav .open > a:hover,
+.nav .open > a:focus {
+    background-color: transparent;
+    border: 0;
+}
+
+.nav > li > a:hover,
+.nav > li > a:focus {
+    background-color: transparent;
+    text-decoration: none;
+}
+
 button,
 .btn {
     border-color: #ADADAD #ADADAD #949494;
@@ -3106,77 +3371,11 @@ button,
     }
 }
 
-.dropdown-menu {
-    border-color: rgba(0, 0, 0, .2);
-    border-top: 0;
-    font-size: 12px;
-
-    li {
-        list-style: none outside none;
-
-        > a {
-            padding: 4px 20px;
-
-            &:hover,
-            &:focus {
-                background-image: linear-gradient(to bottom, #0088CC, #0077B3);
-                background-repeat: repeat-x;
-                color: #FFFFFF;
-                text-decoration: none;
-            }
-        }
-    }
-}
-
-.navbar {
-    color: #333;
-    min-height: 20px;
-
-    .nav {
-        > li {
-            list-style: none outside none;
-            padding: 0 .6em;
-
-            > a {
-                color: #004D99;
-                font-weight: bold;
-                padding: .4em .2em;
-
-                &:focus,
-                &:hover {
-                    color: #538200;
-                }
-            }
-        }
-
-        li {
-            .dropdown {
-                &.open > .dropdown-toggle:focus,
-                &.active > .dropdown-toggle:focus,
-                &.open.active > .dropdown-toggle:focus {
-                    background: #E6F0F2 none;
-                    box-shadow: none;
-                }
-            }
-        }
-    }
-
-
-}
-
-#header {
-    &.navbar {
-        margin-bottom: 0;
-    }
-
-    &.navbar-default {
-        background: #E6F0F2;
-        border: 0;
-        box-shadow: none;
-    }
-}
-
 #changelanguage {
+    background: #FFF none;
+    border-top: 1px solid #EEE;
+    min-height: $language-footer-min-height;
+
     .dropdown-menu {
         > li {
             > a,
@@ -3194,6 +3393,14 @@ button,
             line-height: 20px;
         }
     }
+
+    .navbar-nav {
+        li {
+            a {
+                line-height: 20px;
+            }
+        }
+    }
 }
 
 .loggedout {
@@ -3202,16 +3409,6 @@ button,
     padding: .4em .2em;
 }
 
-.navbar-static-top {
-    .navbar-inner {
-        background: #E6F0F2 none;
-        border: 0;
-        box-shadow: none;
-        min-height: 0;
-        padding-left: 0;
-    }
-}
-
 .navbar-fixed-bottom {
     .navbar-inner {
         min-height: 0;
@@ -3313,7 +3510,7 @@ label {
 
 .closebtn {
     color: #000;
-    filter: alpha(opacity=20);
+    filter: alpha(opacity = 20);
     float: right;
     font-size: 21px;
     font-weight: bold;
@@ -3325,14 +3522,27 @@ label {
     &:focus {
         color: #000;
         cursor: pointer;
-        filter: alpha(opacity=50);
+        filter: alpha(opacity = 50);
         opacity: .5;
         text-decoration: none;
     }
 }
 
 .modal-body {
+    background-color: #FFF;
     overflow-y: auto;
+
+    fieldset,
+    ol {
+        background-color: transparent;
+        border: 0;
+        margin: 0;
+        padding: 0;
+    }
+}
+
+.modal-content {
+    background-color: #EDF4F6;
 }
 
 .btn-group {
@@ -3373,7 +3583,7 @@ code {
     font-weight: bold;
 }
 
-/* End Bootstrap overrides */
+// End Bootstrap overrides
 
 .waiting {
     cursor: wait;
@@ -3445,10 +3655,11 @@ progress {
     }
 }
 
-/* Class to be added to toolbar when it starts being fixed at the top of the screen*/
+// Class to be added to toolbar when it starts being fixed at the top of the screen
 
 .floating {
     box-shadow: 0 3px 2px 0 rgba(0, 0, 0, .5);
+    z-index: 100;
 }
 
 .inline {
@@ -3479,16 +3690,26 @@ progress {
 }
 
 #browse-return-to-results {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
+    background-color: #E8F0F6;
+    border: 1px solid #B9D8D9;
+    border-bottom-width: 0;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
     display: block;
+    padding: .5em;
     text-align: center;
 }
 
 .browse-button {
+    background-color: #FFF;
+    border: 1px solid #B9D8D9;
     color: #004D99;
-    display: inline-block;
+    display: block;
+    overflow: hidden;
     padding: .4em .6em;
+    text-align: center;
+    white-space: nowrap;
+    width: 100%;
 
     &:hover {
         background: #FAFAFA;
@@ -3516,10 +3737,6 @@ span {
         font-weight: bold;
     }
 
-    &.permissiondesc {
-        font-weight: normal;
-    }
-
     &.required {
         color: #C00;
         font-style: italic;
@@ -3527,34 +3744,28 @@ span {
     }
 }
 
-.browse-label,
-.browse-prev-next {
-    border: 1px solid #B9D8D9;
-}
 
-.browse-label {
-    background-color: #E8F0F6;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-}
+.result-biblio-itemtype {
+    float: right;
+    font-size: 85%;
+    margin: .5em;
+    padding: .5em;
+    text-align: center;
 
-.browse-prev-next {
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    border-top-width: 0;
+    img {
+        display: block;
+        margin: auto;
+        margin-bottom: 2px;
+    }
 }
 
 #browse-previous {
-    border-bottom-left-radius: 5px;
-    border-right: 1px solid #B9D8D9;
-    padding-right: 1em;
+    border-bottom-width: 0;
 }
 
 #browse-next {
     border-bottom-right-radius: 5px;
-    border-top-width: 0;
-    float: right;
-    padding-right: 1em;
+    border-bottom-left-radius: 5px;
 }
 
 .loading-overlay {
@@ -3588,7 +3799,7 @@ span {
 }
 
 #merge {
-    margin: .5em 0 0 0;
+    margin: .5em 0 0;
 }
 
 #merge_table {
@@ -3722,6 +3933,15 @@ span {
     }
 }
 
+
+.form-message {
+    background-color: #FFF;
+    border: 1px solid #A4BEDD;
+    border-radius: 5px;
+    margin: 1em;
+    padding: .5em;
+}
+
 .modal-textarea {
     width: 98%;
 }
@@ -3739,7 +3959,7 @@ span {
     }
 }
 
-#fixedlengthbuilderaction  {
+#fixedlengthbuilderaction {
     border: 3px solid #E6F0F2;
     left: 80%;
     padding: 5px;
@@ -3748,50 +3968,14 @@ span {
     width: 12%;
 }
 
-.navbar-default {
-    .navbar-nav {
-        > .open {
-            > a {
-                &:hover,
-                &:focus {
-                    background: #E6F0F2 none;
-                    box-shadow: none;
-                }
-            }
-        }
-    }
-
-    &.navbar-fixed-bottom {
-        .navbar-nav {
-            > .open {
-                > a {
-                    &:hover,
-                    &:focus {
-                        background: transparent none;
-                        box-shadow: none;
-                    }
-                }
-            }
-        }
+#interlibraryloans {
+    #dataPreviewLabel {
+        margin: .3em 0;
     }
-}
 
-#interlibraryloans {
-    h1 {
-        margin: 1em 0;
-    }
-
-    h2 {
-        margin-bottom: 20px;
-    }
-
-    h3 {
-        margin-top: 20px;
-    }
-
-    .bg-info {
-        overflow: auto;
-        position: relative;
+    .bg-info {
+        overflow: auto;
+        position: relative;
     }
 
     .format {
@@ -3842,35 +4026,151 @@ span {
     }
 }
 
-#ill-view-panel {
+.ill-view-panel {
     margin-top: 15px;
 
-    h3 {
-        margin-bottom: 10px;
+    .notesopac {
+        display: inline-block;
     }
+}
 
-    h4 {
-        margin-bottom: 20px;
-    }
+#illfilter_dateplaced_start,
+#illfilter_datemodified_start,
+#illfilter_dateplaced_end,
+#illfilter_datemodified_end {
+    width: 80%;
+}
 
-    .rows {
-        div {
-            height: 1em;
-            margin-bottom: 1em;
+#requestattributes {
+    font-family: monospace;
+    line-height: 1.3em;
+}
+
+#ill-requests {
+    width: 100% !important;
+}
+
+#stockrotation {
+    h3 {
+        margin: 30px 0 10px 0;
+    }
+    .dialog {
+        h3 {
+            margin: 10px 0;
         }
+        margin-bottom: 20px;
     }
+    .highlight_stage {
+        font-weight: bold;
+    }
+}
+
+#catalog_stockrotation .highlight_stage {
+    font-weight: bold;
+}
 
-    #requestattributes {
-        .label {
+#stockrotation {
+    #rota_form {
+        textarea {
+            width: 300px;
+            height: 100px;
+        }
+        #name {
+            width: 300px;
+        }
+        fieldset {
             width: auto;
         }
     }
+    #stage_form fieldset, #add_rota_item_form fieldset {
+        width: auto;
+    }
+    .dialog.alert {
+        ul {
+            margin: 20px 0;
+        }
+        li {
+            list-style-type: none;
+        }
+    }
 }
 
-#ill-requests {
-    width: 100% !important;
+#catalog_stockrotation {
+    .item_select_rota {
+        vertical-align: middle;
+    }
+    h1 {
+        margin-bottom: 20px;
+    }
+}
+
+#stockrotation td.actions, #catalog_stockrotation td.actions {
+    vertical-align: middle;
+}
+
+#stockrotation .stage, #catalog_stockrotation .stage {
+    display: inline-block;
+    padding: 5px 7px;
+    margin: 3px 0 3px 0;
+    border-radius: 5px;
+    background-color: rgba(0, 0, 0, 0.1);
 }
 
+#stage_list_headings {
+    font-weight: bold;
+    span {
+        padding: 3px;
+    }
+}
+
+#manage_stages {
+    ul {
+        padding-left: 0;
+    }
+    li {
+        list-style: none;
+        margin-bottom: 5px;
+        span {
+            padding: 6px 3px;
+        }
+    }
+    .stagename {
+        width: 15em;
+        display: inline-block;
+    }
+    .stageduration {
+        width: 10em;
+        display: inline-block;
+    }
+    .stageactions {
+        display: inline-block;
+    }
+    li:nth-child(odd) {
+        background-color: #F3F3F3;
+    }
+    .drag_handle {
+        margin-right: 6px;
+        cursor: move;
+    }
+    .drag_placeholder {
+        height: 2em;
+        border: 1px dotted #aaa;
+    }
+    h3 {
+        display: inline-block;
+    }
+    #ajax_status {
+        display: inline-block;
+        border: 1px solid #bcbcbc;
+        border-radius: 5px;
+        padding: 5px;
+        margin-left: 10px;
+        background: #f3f3f3;
+    }
+    #manage_stages_help {
+        margin: 20px 0;
+    }
+}
 
 #helper {
     span {
@@ -3899,64 +4199,376 @@ span {
     }
 }
 
+.lastborrower {
+    background-color: #E6F0F2;
+    border: 1px solid #95C6D0;
+    box-shadow: 1px 1px 1px 0 #999;
+    color: #CC0000;
+    margin: .4em 0;
+    padding: .3em .5em .3em .5em;
+}
+
+#lastborrower-ref {
+    border-radius: 5px 0px 0px 5px;
+    float: left;
+}
+
+#lastborrower-remove {
+    border-radius: 0px 5px 5px 0px;
+    cursor: pointer;
+    float: right;
+}
+
+#lastborrower-window {
+    display: none;
+    position: absolute;
+    right: 5px;
+    top: 100px;
+}
+
+/* ==== MODULE LINKS - Start ==== */
+.buttons-list {
+    // List containing the module links
+    margin-bottom: 30px;
+    padding: 0;
+
+    li {
+        // Standard attributes for the list elements
+        list-style-type: none;
+
+        a {
+            &.circ-button {
+                // Class used for each module link
+                background-color: #F4F8F9;
+                background-position: 5px 3px;
+                background-repeat: no-repeat;
+                border: 2px solid #B9D8D9;
+                border-radius: 6px;
+                box-sizing: content-box;
+                color: #000000;
+                display: block;
+                font-size: 110%;
+                font-weight: bold;
+                margin: .5em 0;
+                max-width: 260px;
+                padding: 8px;
+                text-decoration: none;
+
+                &:hover {
+                    // Class used for each module link hover state
+                    border-color: #538200;
+                    color: #538200;
+                }
+            }
+        }
+    }
+}
+
+.about h2 {
+    border-bottom: 1px solid #B9D8D9;
+    padding: .5em .2em;
+    margin:  .5em 0;
+}
+
+.columns-3 {
+    columns: 3 auto;
+    column-gap: 2.5em;
+}
+
+.columns-4 {
+    columns: 4 auto;
+    column-gap: 2em;
+}
+
+// ==== MODULE LINKS - End ====
+
+#catalog-search-link {
+    border-right: 1px solid lighten( #E6F0F2, 15% );
+    padding-right: .3em;
+}
+
+#catalog-search-dropdown {
+    padding: 0;
+
+    & > a {
+        border-left: 1px solid darken( #B4D2D8, 5% );
+        margin-right: .6em;
+        padding: .4em .6em;
+
+        &:hover,
+        &.catalog-search-dropdown-hover {
+            background-color: darken( #E6F0F2, 5% );
+            border-left: 1px solid darken( #B4D2D8, 15% );
+        }
+    }
+}
+
+.adlibris-cover {
+    max-height: 120px;
+}
+
+.adlibris-cover-big {
+    max-height: 200px;
+}
+
+#tools_holidays {
+    .radio,
+    .checkbox {
+        label {
+            margin-left: 0;
+        }
+    }
+}
+
+/* Permissions */
+
+#permissionstree {
+    display: inline-block;
+
+    label {
+        cursor: pointer;
+
+        &:hover {
+            color: #004d99;
+        }
+    }
+}
+
+.main_permission {
+    font-size: 110%;
+    font-weight: bold;
+}
+
+.permissioncode {
+    color: #666;
+    font-style: italic;
+}
+
+.permission-highlight {
+    background-color: #FFC !important;
+}
+
+.togglechildren_on,
+.togglechildren_off {
+    float: right;
+}
+
+.togglechildren_off,
+.children {
+    display: none;
+}
+
+.open {
+    .togglechildren_off {
+        display: inline;
+    }
+
+    .togglechildren_on {
+        display: none;
+    }
+}
+
+.parent {
+    border: 1px solid #DDD;
+    border-bottom-width: 0;
+    padding: 5px;
+
+    &:last-child {
+        border-bottom-width: 1px;
+    }
+
+    &:nth-child(odd) {
+        background-color: #F8F8F8;
+    }
+}
+
+
+.superlibrarian-hint {
+    color: #000;
+    padding: .2em 0;
+    text-indent: 2em;
+}
+
+.child-flags {
+    background-color: #FFF;
+    border: 1px solid #DDD;
+    border-bottom-width: 0;
+    margin: 0 5px 0 20px;
+    padding: 5px;
+
+    &:first-child {
+        margin-top: 10px;
+    }
+
+    &:last-child {
+        border-bottom-width: 1px;
+    }
+
+    &:nth-child(odd) {
+        background-color: #EEE;
+    }
+}
+
+.header-menu-link {
+    display: none;
+    font-weight: bold;
+    padding: .4em .6em;
+}
+
+#user-menu {
+    position: absolute;
+    right: 5px;
+    top: 0;
+}
+
 @media (min-width: 200px) {
-    .navbar-nav > li {
-        float: left;
+
+}
+
+@media (max-width: 767px) {
+    .header-menu-link {
+        display: inline-block;
+    }
+
+    #catalog-search-link {
+        display: none;
+        padding: 0;
     }
 
-    .navbar-right {
-        float: right !important;
-        margin-right: -15px;
+    #cartmenulink {
+        background: transparent none;
+        padding-left: 1.5em;
     }
 
-    .navbar-nav {
-        float: left;
-        margin: 0;
+    #changelanguage {
+        li {
+            float: left;
+
+            li {
+                float: none;
+            }
+        }
 
         .open {
             .dropdown-menu {
-                background-color: #fff;
-                border: 1px solid rgba(0, 0, 0, .15);
-                box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
-                float: left;
+                background-color: #FFF;
+                border: 1px solid #ccc;
                 position: absolute;
-                width: auto;
+            }
+        }
+    }
 
-                &.dropdown-menu-left {
-                    left: auto;
-                    right: 0;
-                }
+    #header {
+        background-color: #FFF;
+        border: 1px solid #CCC;
+        margin-bottom: 1em;
 
-                &.dropdown-menu-right {
-                    right: auto;
-                }
+        a {
+            font-weight: normal;
+            padding-left: 1.5em;
+
+            &:hover {
+                background-color: #0070A9;
+                color: #FFF;
             }
         }
-    }
 
-    .navbar-default {
-        .navbar-nav {
-            .open {
-                .dropdown-menu {
-                    > li {
-                        > a {
-                            &:hover,
-                            &:focus {
-                                background-color: #0081c2;
-                                background-image: linear-gradient(to bottom, #0088cc, #0077b3);
-                                background-repeat: repeat-x;
-                                color: #ffffff;
-                                text-decoration: none;
-                            }
-                        }
+        ul {
+            border: 0;
+            box-shadow: unset;
+            float: none;
+            left: auto;
+            position: relative;
+            right: auto;
+
+            &.dropdown-menu {
+                display: block;
+            }
+        }
+
+        .dropdown-menu {
+            li {
+                a {
+                    color: #004D99;
+
+                    &:hover {
+                        color: #FFF;
                     }
                 }
             }
         }
+
+        .dropdown-toggle {
+            display: none;
+        }
+    }
+
+    h1#logo {
+        float: none;
+        margin: auto;
+    }
+
+    #marcPreview {
+        margin: 0;
+        width: auto;
+    }
+
+    .navbar-fixed-bottom .nav > li {
+        border-right: 0;
+    }
+
+    #user-menu {
+        .open {
+            .dropdown-menu {
+                background-color: #FFF;
+                border: 1px solid #ccc;
+                position: absolute;
+            }
+        }
+
+        li {
+            float: left;
+
+            li {
+                float: none;
+            }
+        }
+    }
+}
+
+@media (max-width: 768px) {
+    .navbar-nav {
+        li {
+
+            a {
+                padding: .4em .6em;
+            }
+        }
+    }
+}
+
+@media only screen and ( max-width: 768px ) {
+    .browse-button {
+        display: inline-block;
+        width: 50%;
+    }
+
+    #browse-previous {
+        border-bottom-left-radius: 5px;
+        border-bottom-width: 1px;
+        border-right-width: 0;
+    }
+
+    #browse-next {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 5px;
     }
 }
 
 @media (min-width: 800px) {
+
+
+
     #helper {
         i {
             display: none;
@@ -3979,3 +4591,26 @@ span {
         display: none;
     }
 }
+
+div#makechart ol li {
+    list-style: none;
+}
+
+@media only screen and ( min-width: 1200px ) {
+    .browse-button {
+        display: inline-block;
+        width: 50%;
+    }
+
+    #browse-previous {
+        border-bottom-left-radius: 5px;
+        border-bottom-width: 1px;
+        border-right-width: 0;
+    }
+
+    #browse-next {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 5px;
+        text-align: right;
+    }
+}