Bug 28101: Update breadcrumb markup in the OPAC for consistency and accessibility
[srvgit] / koha-tmpl / opac-tmpl / bootstrap / css / src / opac.scss
index 30e1ca4..58acbc3 100644 (file)
@@ -1,15 +1,4 @@
-@import "mixins";
-
-body {
-    background-color: #EAEAE6;
-}
-
-/* Sticky footer styles */
-html,
-body {
-    height: 100%;
-    /* The html and body elements cannot have any padding or margin. */
-}
+@import "common";
 
 .no-js {
     .dateformat {
@@ -21,40 +10,37 @@ body {
         padding: 0;
     }
 
-    .selections-toolbar {
+    .selections-toolbar,
+    #renewall_js {
         display: none;
     }
-}
 
-.js {
-    .dateformat {
-        display: none;
+    #sortsubmit {
+        display: inline;
+        padding-left: 0;
+        padding-right: 0;
+    }
+    .dropdown-toggle::after {
+        border: 0;
     }
-}
 
-/* Wrapper for page content to push down footer */
-#wrap {
-    height: auto !important;
-    height: 100%;
-    min-height: 100%;
-    /* Negative indent footer by it's height */
-    // margin: 0 auto -60px;
-}
+    #listsmenu,
+    #user-menu,
+    .nav-item .login-link {
+        color: $links;
 
-.fa.fa-icon-black,
-.fa.fa-icon-white {
-    color: #FFF;
+        &:hover {
+            color: $links-hover;
+        }
+    }
 }
 
-#changelanguage {
-    /* Set the fixed height of the footer here */
-    // height: 60px;
-    .nav {
-        > .active {
-            > p {
-                padding: 0 15px;
-            }
-        }
+.js {
+    .dateformat,
+    #sortsubmit,
+    #sorting-form,
+    .js-hide {
+        display: none;
     }
 }
 
@@ -74,14 +60,21 @@ body {
 }
 
 a {
-    color: $links;
+    &:link,
+    &:visited {
+        &.cartRemove {
+            color: #900;
+            font-size: 90%;
+            padding-left: 0;
 
-    &.cancel {
-        padding-left: 1em;
+            &:hover {
+                color: #c60000;
+            }
+        }
     }
 
-    &:visited {
-        color: $links;
+    &.cancel {
+        padding-left: 1em;
     }
 
     &.title {
@@ -89,37 +82,11 @@ a {
         font-weight: bold;
     }
 
-    &.btn {
-        &:visited {
-            color: #333;
-        }
-    }
-
-    &.btn-primary {
-        &:visited {
-            color: #FFF;
-        }
-    }
-
     &.login-link {
-        color: #A6D8ED;
+        color: #005580;
         font-weight: bold;
     }
 
-    &.listmenulink {
-        &:link,
-        &:visited {
-            color: #0076B2;
-            font-weight: bold;
-        }
-
-        &:hover,
-        &:active {
-            color: #FFF;
-            font-weight: bold;
-        }
-    }
-
     .idreambooksrating {
         color: #29ADE4;
         font-size: 30px;
@@ -135,197 +102,35 @@ a {
         text-decoration: none;
     }
 
-    &.addtocart {
-        @extend %initial_icon;
-        background-position: -5px -265px; /* Cart */
-        padding-left: 35px;
-    }
-
-    &.addtoshelf {
-        @extend %initial_icon;
-        background-position: -5px -225px; /* Virtual shelf */
-        padding-left: 35px;
-    }
-
-    &.brief {
-        @extend %initial_icon;
-        background-position: -2px -868px; /* Zoom out */
-        padding-left: 27px;
-    }
-
-
-
-    &.detail {
-        @extend %initial_icon;
-        background-position: -2px -898px; /* Zoom in */
-        padding-left: 27px;
-    }
-
-    &.download {
-        @extend %initial_icon;
-        background-position: -5px -348px; /* Download */
-        padding-left: 20px;
-    }
-
-    &.editshelf {
-        @extend %initial_icon;
-        background-position: 2px -348px; /* List edit */
-        padding-left: 26px;
-    }
-
-    &.empty {
-        @extend %initial_icon;
-        background-position: 2px -598px; /* Trash */
-        padding-left: 30px;
+    &.OpenURL img {
+        vertical-align: middle;
     }
 
-    &.hide {
-        @extend %initial_icon;
-        background-position: -3px -814px; /* Close */
-        padding-left: 26px;
+    &.addtocart {
+        padding-right: 0;
     }
 
     &.highlight_toggle {
-        @extend %initial_icon;
-        background-position: -5px -841px; /* Highlight */
         display: none;
-        padding-left: 35px;
-    }
-
-    &.hold {
-        @extend %initial_icon;
-        background-position: -2px -453px; /* Toolbar place hold */
-        padding-left: 23px;
-
-        &.disabled {
-            @extend %initial_icon;
-            background-position: -5px -621px; /* Place hold disabled */
-        }
     }
 
     &.incart {
-        @extend %initial_icon;
-        background-position: -5px -265px; /* Cart */
         color: #666;
-        padding-left: 35px;
-    }
-
-    &.new {
-        @extend %initial_icon;
-        background-image: url( "../images/sprite.png" ); /* New */
-        background-position: -4px -922px;
-        padding-left: 23px;
-    }
-
-    &.print-small {
-        @extend %initial_icon;
-        background-position: 0 -423px; /* Toolbar print */
-        padding-left: 30px;
-    }
-
-    &.print-large {
-        @extend %initial_icon;
-        background-position: 0 -187px; /* Toolbar print */
-        padding-left: 35px;
-    }
-
-    &.removeitems {
-        @extend %initial_icon;
-        background-position: 2px -690px; /* Delete */
-        padding-left: 25px;
-
-        &.disabled {
-            @extend %initial_icon;
-            background-position: 2px -712px; /* Delete disabled */
-        }
-    }
-
-    &.reserve {
-        @extend %initial_icon;
-        background-position: -6px -144px; /* Place hold */
-        padding-left: 35px;
-    }
-
-    &.article_request {
-        @extend %initial_icon;
-        background-position: 0 -24px; /* Place article request */
-        padding-left: 35px;
-    }
-
-    &.send {
-        @extend %initial_icon;
-        background-position: 2px -386px; /* Email */
-        padding-left: 28px;
     }
 
-    &.sharelist {
-        @extend %initial_icon;
-        background-position: 2px -1148px; /* List share */
-        padding-left: 26px;
-    }
-
-    &.tag_add {
-        @extend %initial_icon;
-        background-position: 3px -1111px; /* Tag results */
-        padding-left: 27px;
-    }
-
-    &.removefromlist {
-        @extend %initial_icon;
-    }
-}
-
-h1 {
-    font-size: 140%;
-    line-height: 150%;
-
-    &#libraryname {
-        background: transparent url( "../images/logo-koha.png" ) no-repeat scroll 0%;
-        border: 0;
-        float: left !important;
-        margin: 0;
-        padding: 0;
-        width: 120px;
+    &.remove {
+        &:hover {
+            color: #900;
 
-        a {
-            border: 0;
-            cursor: pointer;
-            display: block;
-            height: 0 !important;
-            margin: 0;
-            overflow: hidden;
-            padding: 40px 0 0;
-            text-decoration: none;
-            width: 120px;
+            i {
+                .fa {
+                    color: #c60000
+                }
+            }
         }
     }
 }
 
-h2 {
-    font-size: 130%;
-    line-height: 150%;
-}
-
-h3 {
-    font-size: 120%;
-    line-height: 150%;
-}
-
-h4 {
-    font-size: 110%;
-}
-
-h5 {
-    font-size: 100%;
-}
-
-caption {
-    font-size: 120%;
-    font-weight: bold;
-    margin: 0;
-    text-align: left;
-}
-
 input,
 textarea {
     width: auto;
@@ -336,6 +141,7 @@ textarea {
 }
 
 legend {
+    color: #727272;
     font-size: 110%;
     font-weight: bold;
 }
@@ -349,6 +155,12 @@ td {
     background-color: #FFF;
 }
 
+tr {
+    &.outstanding {
+        font-style: italic;
+    }
+}
+
 td {
     img {
         max-width: none;
@@ -358,8 +170,8 @@ td {
         color: #CC3333;
     }
 
-    .sum {
-        background-color: #FFC;
+    &.sum {
+        background-color: #FFFFE5;
         font-weight: bold;
     }
 
@@ -367,24 +179,39 @@ td {
         white-space: nowrap;
     }
 
-    .btn-link {
-        padding: 0;
+    &.selectcol {
+        width: 1ch;
+    }
+
+    &.numcol {
+        width: 3ch;
+    }
+
+    &.hidden {
+        display: none;
     }
 }
 
 th {
-    background-color: #ECEDE6;
+    background-color: #E2E8E8;
 
     &.sum {
         text-align: right;
     }
 
-    &[scope=row] {
+    &[scope="row"] {
         background-color: transparent;
         text-align: right;
     }
 }
 
+#advsearch {
+    input,
+    select {
+        max-width: 100%;
+    }
+}
+
 #advsearches,
 #booleansearch {
     label {
@@ -392,6 +219,60 @@ th {
     }
 }
 
+#booleansearch {
+    width: 80%;
+}
+
+#advsearch_limits,
+#subtypes {
+    label {
+        color: #727272;
+        display: block;
+        font-size: 110%;
+        font-weight: bold;
+    }
+
+    &.row {
+        margin-bottom: 15px;
+    }
+}
+
+.advanced-search-terms {
+    &.extended {
+        .search-term-row {
+            grid-template-columns: 25% 35% 35% 5%;
+            margin: 5px 0;
+        }
+    }
+}
+
+.actions {
+    white-space: nowrap;
+}
+
+.advsearch_limit {
+    border: 1px solid #EEE;
+    font-size: 90%;
+    height: 100%;
+    margin-bottom: 15px;
+    padding: 15px;
+}
+
+.search_operator {
+    text-align: right;
+
+    label {
+        font-style: italic;
+    }
+}
+
+.ButtonPlus,
+.ButtonLess {
+    i {
+        font-size: 125%;
+    }
+}
+
 #basketcount {
     display: inline;
     margin: 0;
@@ -399,9 +280,10 @@ th {
 
     span {
         @include border-radius-all( 3px );
-        background-color: #FFC;
-        color: #000;
+        background-color: #85ca11;
+        color: #FFF;
         display: inline;
+        font-family: 'NotoSans';
         font-size: 80%;
         font-weight: normal;
         margin: 0 0 0 .9em;
@@ -411,35 +293,78 @@ th {
 
 
 #members {
-    display: block;
-
     p {
-        color: #EEE;
+        color: #727272;
     }
 
     a {
+        &:link,
+        &:visited,
+        &:hover,
+        &:active {
+            text-decoration: none;
+        }
+
         &.logout {
             color: #E8583C;
             font-weight: bold;
-            padding: 0 .3em;
+
+            &:hover {
+                color: #E8583C;
+            }
+        }
+
+        &.clearsh {
+            color: #D43C00;
+            font-size: 80%;
+            font-weight: normal;
+            padding-bottom: .6rem;
+            padding-top: .6rem;
+
+            &:hover {
+                color: #E8583C;
+            }
+        }
+    }
+
+    .dropdown-menu {
+        a {
+            &:hover {
+                color: #005580;
+                text-decoration: underline;
+
+                &.logout {
+                    &:hover {
+                        color: #E8583C;
+                    }
+                }
+            }
         }
     }
+
+    .divider-vertical {
+        border: 1px solid #EEE;
+        border-right-color: #FCF9FC;
+        margin: 5px 0;
+    }
 }
 
-#koha_url {
-    p {
-        color: #666666;
-        float: right;
-        margin: 0;
+#loggedinuser-menu {
+    min-width: 300px;
+    padding: .5em 1em;
+
+    .divider-vertical {
+        margin: 5px 5px;
     }
 }
 
 #moresearches {
-    margin: .5em 0;
-    padding: 0 .8em;
+    margin: .5em 30px;
+    padding: 0 15px;
 
     li {
-        display: inline;
+        display: inline-block;
+        padding-right: 5px;
         white-space: nowrap;
 
         &::after {
@@ -461,488 +386,234 @@ th {
 
 #news {
     margin: .5em 0;
+    padding: 1em;
+
+    .newsitem {
+        &:last-child {
+            .newsfooter {
+                border-bottom: 0;
+            }
+        }
+    }
 }
 
 .newscontainer {
     border: 1px solid #DDD;
-    border-bottom-width: 0;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
 }
 
 .newsheader {
-    background-color: #ECEDE6;
-    border-bottom: 1px solid #DDD;
     margin: 0;
-    padding: 8px;
+    padding: 8px 0;
 }
 
 .newsbody {
-    padding: 8px;
+    padding: 8px 0;
 }
 
 .newsfooter {
-    border-bottom: 1px solid #DDD;
-    font-style: italic;
-    padding: 4px 8px;
-}
-
-#opacheader {
-    background-color: #DDD;
-}
-
-#selections,
-.selections {
-    font-weight: bold;
-}
-
-.actions {
-    a {
-        background-repeat: no-repeat;
-        margin-right: 1em;
-        text-decoration: none;
-        white-space: nowrap;
-
-        &.hold {
-            background-image: url( "../images/sprite.png" ); /* Place hold small */
-            background-position: -5px -542px;
-            padding-left: 21px;
-        }
-
-        &.article_request {
-            background-image: url( "../images/sprite.png" ); /* Place hold small */
-            background-position: -2px -26px;
-            padding-left: 21px;
-        }
-
-        &.addtocart {
-            background-image: url( "../images/sprite.png" ); /* Cart small */
-            background-position: -5px -572px;
-            padding-left: 20px;
-        }
-
-        &.addtoshelf {
-            background-image: url( "../images/sprite.png" ); /* MARC view */
-            background-position: -5px -27px;
-            padding-left: 20px;
-        }
-
-        &.addtolist {
-            background-position: -5px -27px;
-            padding-left: 20px;
-        }
-
-        &.tag_add {
-            background-position: -5px -1110px;
-            padding-left: 20px;
-        }
-
-        /* List contents remove from list link */
-        &.removefromlist {
-            background-position: -8px -690px; /* Delete */
-            padding-left: 15px;
-        }
-    }
-}
-
-/* Override Bootstrap alert */
-.alert {
-    background: linear-gradient( to bottom, #FFFBE5 0%, #FFF0B2 9%, #FFF1A8 89%, #F7E665 100% );
-    border-color: #D6C43B;
-    color: #333;
-
-    /* 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;
-        right: -21px;
-        top: -2px;
-    }
-}
-
-/* Override Bootstrap alert.alert-info */
-.alert-info {
-    background: linear-gradient( to bottom, #F4F6FA 0%, #EAEEF5 4%, #E8EDF6 96%, #CDDBF2 100% );
-    border-color: #C5D1E5;
-    color: #333;
-}
-
-/* Override Bootstrap alert.alert-success */
-.alert-success {
-    background: linear-gradient( to bottom, #F8FFE8 0%, #E3F5AB 4%, #DCF48D 98%, #9EBF28 100% );
-    border-color: #9FBA35;
-    color: #333;
-}
-
-.breadcrumb {
-    @include border-radius-all( 7px );
-    background-color: #F2F2EF;
-    font-size: 85%;
-    list-style: none outside none;
-    margin: 10px 20px;
-    padding: 5px 10px;
-}
-
-.buttons-print {
-    @extend %initial_icon;
-    background-color: transparent;
-    background-position: 0 -184px; /* Toolbar print */
-    border: 0;
-    color: #0076B2;
-    font-size: 100%;
-    padding-left: 35px;
-}
-
-.form-inline {
-    display: inline;
-    margin: 0;
-    padding: 0;
-
-    fieldset {
-        margin: .3em 0;
-        padding: .3em;
-    }
-}
-
-.main {
-    @include border-radius-all( 7px );
-    @include shadowed;
-    background-color: #FFF;
-    border: 1px solid #D2D2CF;
+    border-bottom: 1px solid #EEE;
+    color: #727272;
+    font-size: 90%;
     margin-bottom: .5em;
-    margin-top: .5em;
+    padding-bottom: .5em;
 }
 
-.mastheadsearch {
-    @include border-radius-all( 7px );
-    background: linear-gradient( to bottom, #C7C7C1 38%, #A7A7A2 100% );
-    margin: .5em 0;
-    padding: .8em;
-
-    label {
-        font-size: 115%;
-        font-weight: bold;
-    }
+#rssnews-container {
+    color: #727272;
+    font-size: 90%;
 }
 
-.navbar-inverse {
-    .brand {
-        color: #9FE1FF;
-        font-weight: bold;
-    }
-
-    .nav {
-        > li {
-            > a {
-                color: #9FE1FF;
-                font-weight: bold;
-            }
-        }
-    }
+#rssnews-container {
+    font-size: 90%;
+    padding: .5em 0;
 }
 
-.navbar-fixed-bottom {
-    &.navbar-static-bottom {
-        margin-top: .5em;
-        position: static;
+.rsssearchlink {
+    &:hover {
+        text-decoration: none;
     }
 }
 
-.table-striped tbody > tr:nth-child(odd) > td,
-.table-striped tbody > tr:nth-child(odd) > th {
-    background-color: #F4F4F4;
-}
-
+.fa {
+    &.fa-rss {
+        background: rgb(240, 109, 52) none;
+        border-radius: 3px;
+        color: #FFF;
+        margin: 0 2px;
+        padding: 2px 4px;
+        text-shadow: 1px 0 1px rgba(0, 0, 0, .25);
 
-/* jQuery UI standard tabs */
-.ui-tabs-nav .ui-tabs-active a,
-.ui-tabs-nav a:hover,
-.ui-tabs-nav a:focus,
-.ui-tabs-nav a:active,
-.ui-tabs-nav span.a {
-    background: none repeat scroll 0 0 transparent;
-    outline: 0 none;
-}
-
-.ui-widget,
-.ui-widget input,
-.ui-widget select,
-.ui-widget textarea,
-.ui-widget button {
-    font-family: inherit;
-    font-size: inherit;
-}
-
-ul {
-    &.ui-tabs-nav {
-        li {
-            list-style: none;
+        &.rsssearchicon {
+            font-size: 70%;
         }
     }
-}
-
-.ui-tabs {
-    .ui-tabs-nav {
-        li {
-            background: #F3F3F3 none;
-            border-color: #D8D8D8;
-            margin-right: .4em;
-
-            &.ui-tabs-active {
-                background-color: #FFF;
-                border: 1px solid #D8D8D8;
-                border-bottom: 0;
-
-                a {
-                    color: #000;
-                    font-weight: bold;
-                }
-
-                &.ui-state-hover {
-                    background: #FFF none;
-                }
-            }
-
-            &.ui-state-default.ui-state-hover {
-                background: #F3F3F3 none;
-            }
-        }
-    }
-
-    .ui-tabs-panel {
-        border: 1px solid #D8D8D8;
-        margin-bottom: 1em;
-    }
-
-    &.ui-widget-content {
-        background: transparent none;
-        border: 0;
-    }
-
-    .ui-state-default {
-        a {
-            color: #006699;
-
-            &:link {
-                color: #006699;
-            }
-
-            &:visited {
-                color: #006699;
-            }
-        }
-    }
-
-    .ui-state-hover a {
-        color: #990033;
-
-        &:link {
-            color: #990033;
-        }
-
-        &:visited {
-            color: #990033;
-        }
-    }
-}
-
-.ui-tabs-nav {
-    &.ui-widget-header {
-        background: none;
-        border: 0;
-    }
-}
-
-.statictabs {
-    ul {
-        background: none repeat scroll 0 0 transparent;
-        border: 0 none;
-        border-bottom-left-radius: 4px;
-        border-bottom-right-radius: 4px;
-        border-top-left-radius: 4px;
-        border-top-right-radius: 4px;
-        color: #222222;
-        font-size: 100%;
-        font-weight: bold;
-        line-height: 1.3;
-        list-style: none outside none;
-        margin: 0;
-        outline: 0 none;
-        padding: .2em .2em 0;
-        text-decoration: none;
+}
 
-        &::before {
-            content: "";
-            display: table;
-        }
+#numresults {
+    color: #727272;
+}
 
-        &::after {
-            clear: both;
-            content: "";
-            display: table;
+.actions-menu {
+    padding-top: 5px;
+}
+
+.view,
+.actions,
+.toolbar,
+#action {
+    a,
+    button {
+
+        &:hover {
+            i {
+                &.fa {
+                    color: #44AE89;
+                }
+            }
         }
-    }
 
-    li {
-        background: none repeat scroll 0 0 #E6F0F2;
-        border: 1px solid #B9D8D9;
-        border-bottom: 0 none !important;
-        border-top-left-radius: 4px;
-        border-top-right-radius: 4px;
-        color: #555555;
-        float: left;
-        font-weight: normal;
-        list-style: none outside none;
-        margin-bottom: 0;
-        margin-right: .4em;
-        padding: 0;
-        position: relative;
-        top: 1px;
-        white-space: nowrap;
+        i {
+            &.fa {
+                color: #4466AE;
+            }
+        }
 
-        &.active {
-            background-color: #FFFFFF;
-            color: #212121;
-            font-weight: normal;
-            padding-bottom: 1px;
+        &.remove {
+            &:hover {
+                color: #900;
 
-            a {
-                background: none repeat scroll 0 0 transparent;
-                color: #000000;
-                cursor: text;
-                font-weight: bold;
-                outline: 0 none;
+                i {
+                    &.fa {
+                        color: #c60000;
+                    }
+                }
             }
         }
 
-        a {
-            color: #004D99;
-            cursor: pointer;
-            float: left;
-            padding: .5em 1em;
-            text-decoration: none;
+        &.disabled,
+        &[disabled] {
+            color: #333;
+            filter: alpha(opacity=65);
+            opacity: 0.65;
 
             &:hover {
-                background-color: #EDF4F5;
-                border-top-left-radius: 4px;
-                border-top-right-radius: 4px;
-                color: #538200;
+                i {
+                    &.fa {
+                        color: #333;
+                        filter: alpha(opacity=65);
+                        opacity: 0.65;
+                    }
+                }
             }
         }
     }
+}
 
-    .tabs-container {
-        background: none repeat scroll 0 0 transparent;
-        border: 1px solid #B9D8D9;
-        border-bottom-left-radius: 4px;
-        border-bottom-right-radius: 4px;
-        color: #222222;
-        display: block;
-        padding: 1em 1.4em;
+.actions {
+    &:first-child {
+        .btn-link {
+            padding-left: 0;
+        }
     }
 }
 
-/* End jQueryUI tab styles */
-
-/* jQuery UI Datepicker */
-
-.ui-datepicker {
-    @include shadowed;
-    table {
-        border: 0;
-        border-collapse: collapse;
-        font-size: .9em;
-        margin: 0 0 .4em;
-        width: 100%;
-    }
+/* Override Bootstrap alert */
+.alert {
+    /* Redefine a new style for Bootstrap's class "close" since we use that already */
+    /* Use <a class="closebtn" href="#">&times;</a> */
 
-    th {
-        background: transparent none;
-        border: 0;
-        font-weight: bold;
-        padding: .7em .3em;
-        text-align: center;
+    .closebtn {
+        line-height: 20px;
+        position: relative;
+        right: -21px;
+        top: -2px;
     }
 }
 
-.ui-datepicker-trigger {
-    margin: 0 3px;
-    vertical-align: middle;
+/* Add style for Bootstrap dropdown-header class */
+.dropdown-header {
+    border-top: 1px solid #eee;
+    color: #000;
+    display: block;
+    font-size: 90%;
+    font-weight: 700;
+    line-height: 1.42857143;
+    padding: 3px 20px;
+    padding-left: 10px;
+    white-space: nowrap;
 }
 
-/* End jQueryUI datepicker styles */
+.btn-group.open {
+    .btn-link {
+        &.dropdown-toggle {
+            background-image: none;
+            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
+        }
+    }
+}
 
+.breadcrumb {
+    background-color: #F0F3F3;
+    font-size: 85%;
+    list-style: none outside none;
+    margin: 15px;
+    padding: 5px 10px;
+    border-radius: 0px;
+}
 
-/* jQueryUI Core */
+.breadcrumb-item {
+    &.active {
+        a:link,
+        a:visited,
+        a:hover,
+        a:active {
+            color: #666;
+            cursor: text;
+            text-decoration: none;
+        }
+    }
+}
 
-.ui-widget-content {
-    background: #FFFFFF none;
-    border: 1px solid #AAA;
-    color: #222222;
+#opac-main-search {
+    background: #f0f3f3;
+    margin: 7px 0;
+    padding: 15px;
 
-    a,
-    a:visited {
-        color: $links;
+    label {
+        color: $high-contrast-grey;
+        font-size: 115%;
+        font-weight: bold;
+        margin: 0;
     }
 }
 
-.ui-widget-header {
-    background: #E6F0F2 none;
-    border: 1px solid #AAA;
-    color: #222222;
-    font-weight: bold;
+#cart-list-nav {
+    flex-grow: 2;
 }
 
-.ui-state-default,
-.ui-widget-content .ui-state-default,
-.ui-widget-header .ui-state-default {
-    background: #F4F8F9 none;
-    border: 1px solid #AAA;
-    color: #555555;
-    font-weight: normal;
+.table-striped tbody > tr:nth-child(odd) > td,
+.table-striped tbody > tr:nth-child(odd) > th {
+    background-color: #F0F3F3;
 }
 
-.ui-state-hover,
-.ui-widget-content .ui-state-hover,
-.ui-widget-header .ui-state-hover,
-.ui-state-focus,
-.ui-widget-content .ui-state-focus,
-.ui-widget-header .ui-state-focus {
-    background: #E6F0F2 none;
-    border: 1px solid #AAA;
-    color: #212121;
-    font-weight: normal;
+#availability_facet {
+    color: #727272;
 }
 
-.ui-state-active,
-.ui-widget-content .ui-state-active,
-.ui-widget-header .ui-state-active {
-    background: #FFFFFF none;
-    border: 1px solid #AAAAAA;
-    color: #212121;
-    font-weight: normal;
+#facet-holdings-library {
+    color: #727272;
 }
 
-.ui-state-highlight,
-.ui-widget-content .ui-state-highlight,
-.ui-widget-header .ui-state-highlight {
-    background: #FBF9EE;
-    border: 1px solid #FCEFA1;
-    color: #363636;
-}
+#toolbar {
+    background-color: #f0f3f3;
+    border: 1px solid #f0f3f3;
+    margin: 0;
 
-.ui-state-error,
-.ui-widget-content .ui-state-error,
-.ui-widget-header .ui-state-error {
-    background: #FEF1EC;
-    border: 1px solid #CD0A0A;
-    color: #CD0A0A;
+    &.clearfix {
+        background-color: #f0f3f3;
+    }
 }
 
-/* end jQueryUI core */
-
 .item-thumbnail {
     max-width: none;
 }
@@ -959,10 +630,11 @@ ul {
     width: 75px;
 }
 
-#bookcover {
+.bookcover {
     float: left;
     margin: 0;
     padding: 0;
+    text-align: center;
 
     .no-image {
         margin-bottom: 10px;
@@ -970,12 +642,91 @@ ul {
     }
 
     img {
-        margin: 0 1em 1em 0;
+        margin: 1em;
+    }
+}
+
+.custom_cover_image {
+    img {
+        max-width: 140px;
+    }
+}
+
+#biblio-cover-slider {
+    background-color: #fff;
+    border: 1px solid #b9d8d9;
+    border-radius: 3px;
+    margin: 0 1em .5em 0;
+    padding: 10px 5px 5px 5px;
+    min-height: 175px;
+}
+
+.cover-slides {
+    background: #FFF url("../img/spinner-small.gif") center center no-repeat;
+
+    .hint {
+        font-size: 80%;
+        padding: .5em 0;
+    }
+
+    a {
+        &.nav-active {
+            &:link,
+            &:visited {
+                color: #85ca11;
+            }
+        }
+    }
+}
+
+td {
+    &.bookcover {
+        background: #FFF url("../img/spinner-small.gif") center center no-repeat;
+        min-width: 120px;
+        text-align: center;
+    }
+
+    .cover-slides {
+        background: transparent none;
+        border: 0;
+        margin: 0;
+        min-height: unset;
+        padding: 0;
+    }
+}
+
+.cover-image {
+    display: none;
+
+    img {
+        height: auto;
+        max-width: 100%;
+    }
+}
+
+.cover-nav {
+    display: inline-block;
+    padding: 3px 4px;
+}
+
+div {
+    &.required_label {
+        display: none;
+
+        &.required {
+            color: #C00;
+            display: block;
+            font-size: 95%;
+            margin-left: 10rem;
+            margin-top: 3px;
+        }
     }
 }
 
 .required {
-    color: #C00;
+    &.valid {
+        color: #000;
+    }
 }
 
 
@@ -1032,16 +783,41 @@ fieldset {
             font-weight: bold;
         }
 
+        div.label {
+            display: inline-block;
+            width: 9rem;
+            margin-right: 1rem;
+            float: none;
+        }
+
         label,
         .label {
             float: left;
             font-weight: bold;
-            margin-right: 1em;
+            margin-right: 1rem;
             text-align: right;
-            width: 9em;
+            width: 9rem;
+        }
+
+        label.checkbox-label {
+            float: none;
+            margin-right: 0;
+            font-weight: normal;
+            text-align: left;
+            width: auto;
         }
 
         label {
+            &.error {
+                color: #C00;
+                float: none;
+                display: inline;
+                font-style: italic;
+                font-weight: normal;
+                margin-left: 1rem;
+                text-align: left;
+                width: auto;
+            }
             &.lradio {
                 float: none;
                 margin: inherit;
@@ -1073,6 +849,7 @@ fieldset {
             }
         }
 
+
         li {
             clear: left;
             float: left;
@@ -1081,20 +858,22 @@ fieldset {
             width: 100%;
 
             &.lradio {
-                padding-left: 8.5em;
                 width: auto;
 
                 label {
                     float: none;
-                    margin: 0 0 0 1em;
+                    margin: 0;
                     width: auto;
                 }
+                input {
+                    margin-right: 1rem;
+                }
             }
         }
 
         .hint {
             display: block;
-            margin-left: 11em;
+            margin-left: 10rem;
         }
     }
 
@@ -1134,7 +913,7 @@ div {
                 font-weight: bold;
                 margin-right: 1em;
                 text-align: left;
-                width: 9em;
+                width: 9rem;
             }
         }
 
@@ -1219,11 +998,14 @@ div {
 .toolbar {
     background-color: #EEEEEE;
     border: 1px solid #E8E8E8;
-    font-size: 85%;
+    font-size: .9rem;
     padding: 3px 3px 5px 5px;
     vertical-align: middle;
 
-    a {
+    a:link,
+    a:hover,
+    button {
+        font-size: .9rem;
         white-space: nowrap;
     }
 
@@ -1231,24 +1013,10 @@ div {
         display: inline;
         font-size: 100%;
         font-weight: bold;
-        margin-left: .5em;
     }
 
     select {
-        font-size: 97%;
-        height: auto;
-        line-height: inherit;
-        margin: 0;
-        padding: 0;
-        white-space: nowrap;
-        width: auto;
-    }
-
-    .hold,
-    #tagsel_tag {
-        font-size: 97%;
-        font-weight: bold;
-        padding-left: 28px;
+        max-width: 100%;
     }
 
     #tagsel_form {
@@ -1256,17 +1024,8 @@ div {
     }
 
     li {
-        display: inline;
-        list-style: none;
-
-        a {
-            border-left: 1px solid #E8E8E8;
-        }
-
-        &:first-child {
-            a {
-                border-left: 0;
-            }
+        &.dropdown-header {
+            display: block;
         }
     }
 
@@ -1281,110 +1040,64 @@ div {
     }
 }
 
-#selections-toolbar,
-.selections-toolbar {
-    background: linear-gradient( top, #B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100% );
-    margin: 0 0 1em;
-    padding-left: 10px;
-    padding-top: .5em;
-}
-
-.list-actions {
-    display: inline;
-}
-
-%tag_button_default {
-    background-color: transparent;
-    background-image: url( "../images/sprite.png" );
-    background-position: 1px -643px;
-    background-repeat: no-repeat;
-    border: 0;
-    color: #0076B2;
-    cursor: pointer;
-    font-size: 100%;
-    padding-left: 25px;
-    text-decoration: none;
-}
-
-%tag_button_hover {
-    color: #005580;
-    text-decoration: underline;
-}
-
-%tag_button_disabled {
-    color: #888888;
-    padding-left: 23px;
-    text-decoration: none;
-}
-
-#tagsel_tag {
-    @extend %tag_button_default;
+.selections {
+    color: #727272;
+    font-weight: bold;
 
-    &.disabled {
-        background-position: -1px -667px;
+    &::before {
+        color: #6c757d;
+        content: "|";
+        display: inline-block;
+        font-weight: normal;
+        padding: 0 .5rem;
+        text-shadow: 1px 1px 0 #fff;
     }
 }
 
-#selections-toolbar {
-    input.hold {
-        &:hover {
-            @extend %tag_button_hover;
-        }
-
-        &.disabled {
-            @extend %tag_button_disabled;
-
-            &:hover {
-                @extend %tag_button_disabled;
-            }
-        }
-    }
-
-    a.disabled {
-        @extend %tag_button_disabled;
-
-        &:hover {
-            @extend %tag_button_disabled;
-        }
+.check_control {
+    &::before {
+        color: #6c757d;
+        content: "|";
+        display: inline-block;
+        font-weight: normal;
+        padding: 0 .5rem;
+        text-shadow: 1px 1px 0 #fff;
     }
 }
 
-#tagsel_span input {
-    &.submit {
-        @extend %tag_button_default;
-    }
-
-    &:hover {
-        @extend %tag_button_hover;
-    }
-
-    &.disabled {
-        @extend %tag_button_disabled;
+.selections-toolbar {
+    background: linear-gradient(#B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100%);
+    border-bottom: none;
+    margin-top: 3px;
+    display: flex;
+    margin: 0;
+    padding-left: 10px;
+    padding-top: .5em;
 
-        &:hover {
-            @extend %tag_button_disabled;
-        }
+    > div:first-child::before {
+        content: "";
+        padding: 0;
     }
 
-    &.hold.disabled {
-        @extend %tag_button_disabled;
-
-        &:hover {
-            @extend %tag_button_disabled;
-        }
+    a,
+    button,
+    input {
+        font-size: .9rem;
     }
 }
 
-.selections-toolbar a.disabled {
-    @extend %tag_button_disabled;
+.list-actions {
+    display: inline;
 
-    &:hover {
-        @extend %tag_button_disabled;
+    a,
+    button,
+    input {
+        font-size: .9rem;
     }
 }
 
 .results_summary {
-    color: #707070;
+    color: #202020;
     display: block;
     font-size: 85%;
     padding: 0 0 .5em;
@@ -1402,7 +1115,7 @@ div {
     }
 
     .label {
-        color: #202020;
+        color: $high-contrast-grey;
     }
 
     a {
@@ -1416,24 +1129,25 @@ div {
 }
 
 .view {
-    background-color: #F3F3F3;
+    background-color: #F0F3F3;
     border: 1px solid #C9C9C9;
     border-radius: 4px;
+    color: #727272;
     display: inline-block;
-    padding: .2em .5em;
-    white-space: nowrap;
+    margin-right: .4em;
 
     a,
     span {
-        background-image: url( "../images/sprite.png" );
-        background-repeat: no-repeat;
         font-size: 87%;
-        padding-left: 15px;
-        text-decoration: none;
-    }
-
-    a {
         font-weight: normal;
+        display: inline-block;
+        padding: 4px 12px;
+        margin-bottom: 0;
+        font-size: 14px;
+        line-height: 20px;
+        text-align: center;
+        text-decoration: none;
+        vertical-align: middle;
     }
 }
 
@@ -1448,19 +1162,6 @@ div {
     font-weight: bold;
 }
 
-#MARCview {
-    background-position: -9px -27px;
-}
-
-#ISBDview {
-    background-position: -10px -56px;
-}
-
-#Normalview {
-    background-position: -8px 3px;
-}
-
-/* pagination */
 .results-pagination {
     background-color: #F3F3F3;
     display: none;
@@ -1489,7 +1190,7 @@ div {
     li {
         border-top: 1px solid #DDDDDD;
         color: #999;
-        float: bottom;
+        font-size: 90%;
         list-style: none;
         padding: 4px;
 
@@ -1512,6 +1213,12 @@ div {
     }
 }
 
+nav {
+    .pagination {
+        margin: 0;
+    }
+}
+
 .pagination_footer {
     background-color: #E1E1E1;
     text-align: center;
@@ -1548,13 +1255,13 @@ div {
 .pg_menu {
     background-color: #F3F3F3;
     border-top: 1px solid #D0D0D0;
+    display: flex;
     margin: 0;
     white-space: nowrap;
 
-    li {
+    .pg_link {
         color: #B2B2B2;
-        display: inline-block;
-        float: left;
+        flex-grow: 1;
         list-style: none;
         margin: 0;
 
@@ -1569,11 +1276,9 @@ div {
         span {
             background-color: #F3F3F3;
             display: block;
-            float: left;
             font-weight: normal;
             padding: .4em .5em;
             text-align: center;
-            text-decoration: none;
         }
 
         span {
@@ -1613,6 +1318,65 @@ div {
 }
 
 /* nav */
+
+nav {
+    &.libraries {
+        li {
+            list-style-type: none;
+            padding: .3em .5em;
+
+            a {
+                display: block;
+            }
+        }
+
+        i.fa {
+            color:  #7cbc0f;
+        }
+
+        .fa-li {
+            top:  unset;
+        }
+    }
+
+    background: transparent none;
+    border: 0;
+
+    &.breadcrumb {
+        background-color: #F0F3F3;
+        font-size: 85%;
+        list-style: none outside none;
+        margin: 15px;
+        padding: 5px 10px;
+        border-radius: 0px;
+
+        ol {
+            margin: 0;
+            padding-left: 0;
+            list-style: none;
+        }
+
+                                                                                             li {
+            display: inline;
+
+            &+li::before {
+                background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1yaWdodCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNy4zNyAwbDUuMzUgNy4zYy4yLjIuMi41MSAwIC43bC01LjM4IDhoLTQuMmw1LjY0LTguMzVMMy4xMy4wMXoiLz48L3N2Zz4=") 50% 50% no-repeat;
+                background-size: 8px;
+                content: '';
+                display: inline-block;
+                height: .8em;
+                width: .8em;
+            }
+        }
+
+        [aria-current="page"] {
+            color: #000;
+            font-weight: 700;
+            text-decoration: none;
+        }
+    }
+}
+
 .nav_pages {
     border-top: 1px solid #DDD;
     padding: .6em;
@@ -1638,20 +1402,19 @@ div {
 
 /* action buttons */
 #action {
-    background-color: #F3F3F3;
+    background-color: #F0F3F3;
     border: 1px solid #E8E8E8;
     margin: .5em 0 0 0;
-    padding-bottom: 3px;
+    padding: .5em;
 
     li {
         list-style: none;
-        margin: .2em;
-        padding: .3em 0;
     }
 
     a {
         font-weight: bold;
         text-decoration: none;
+        text-align: left;
     }
 }
 
@@ -1669,141 +1432,47 @@ div {
             }
         }
     }
-}
-
-#format,
-#furthersearches {
-    padding-left: 35px;
-}
-
-.highlight_controls {
-    float: left;
-}
-
-%initial_icon {
-    background-image: url( "../images/sprite.png" );
-    background-repeat: no-repeat;
-    text-decoration: none;
-}
-
-input {
-    &.hold {
-        @extend %initial_icon;
-        background-color: transparent;
-        background-position: -2px -453px; /* Toolbar place hold */
-        border: 0;
-        color: #0076B2;
-        font-weight: bold;
-        padding-left: 23px;
-        text-decoration: none;
 
-        &.disabled {
-            @extend %initial_icon;
-            background-position: -5px -621px; /* Place hold disabled */
-        }
+    .dropdown-header {
+        border-bottom: 1px solid #EEE;
+        border-top: 0;
     }
 
-    &.editshelf {
-        @extend %initial_icon;
-        background-color: transparent;
-        background-position: 2px -734px; /* List edit */
+    .dropdown-menu a {
+        display: block;
+        width: 100%;
+        padding: .25rem 1.5rem;
+        clear: both;
+        text-align: inherit;
+        white-space: nowrap;
         border: 0;
-        color: #006699;
-        cursor: pointer;
-        filter: none;
-        font-size: 100%;
-        padding-left: 29px;
-        text-decoration: none;
-
-        &:active {
-            border: 0;
-        }
-    }
+     }
 }
 
-.newshelf {
-    @extend %initial_icon;
-    background-position: 2px -764px; /* List new */
-    border: 0;
-    color: #006699;
-    cursor: pointer;
-    filter: none;
-    font-size: 100%;
-    padding-left: 28px;
-
-    &.disabled {
-        @extend %initial_icon;
-        background-position: -4px -791px; /* List new disabled */
-    }
+.hint {
+    color: #727272;
+    font-size: 90%;
 }
 
-.deleteshelf {
-    @extend %initial_icon;
-    background-color: transparent;
-    background-position: 2px -687px; /* Delete */
-    border: 0;
-    color: #006699;
-    cursor: pointer;
-    filter: none;
-    font-size: 100%;
-    padding-left: 25px;
-    text-decoration: none;
-
-    &:active {
-        border: 0;
-    }
-
-    &:hover {
-        color: #990033;
-    }
+.links {
+    flex-grow: 1;
 
-    &.disabled {
-        background-position: 0 -712px; /* Delete */
+    a {
+        font-weight: bold;
     }
 }
 
-.links a {
-    font-weight: bold;
-}
-
-#tagslist li {
-    display: inline;
-}
-
-#login4tags {
-    background-image: url( "../images/sprite.png" ); /* Tag results disabled */
-    background-position: -6px -1130px;
-    background-repeat: no-repeat;
-    padding-left: 20px;
-    text-decoration: none;
-}
-
-.tag_results_input {
-    font-size: 12px;
-    margin-left: 1em;
-    padding: .3em;
-
-    input[type="text"] {
-        font-size: inherit;
-        margin: 0;
-        padding: 0;
-    }
+#tagslist {
+    padding-left: 0;
 
-    label {
+    li {
         display: inline;
     }
 }
 
-.tagsinput {
-    input[type="text"] {
-        font-size: inherit;
-        margin: 0;
-        padding: 0;
-    }
-
-    label {
-        display: inline;
-    }
+#tagsel_form input,
+.tag_results_input input {
+    margin: 0 2px;
 }
 
 .branch-info-tooltip {
@@ -1814,13 +1483,32 @@ input {
     margin: .3em 0;
 }
 
+.ui-widget-content {
+    a {
+        &:link,
+        &:visited {
+            &.btn-default,
+            &.btn-secondary {
+            }
+        }
+    }
+}
+
 #social_networks {
+    margin-top: .5em;
+
     a {
-        background: transparent url( "../images/social-sprite.png" ) no-repeat;
-        display: block;
-        height: 20px !important;
-        text-indent: -999em;
-        width: 20px;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        display: inline-block;
+        min-width: 1em;
+        padding: .5em;
+        text-align: center;
+    }
+
+    a:hover,
+    a:active {
+        border: 1px solid #EEE;
     }
 
     span {
@@ -1830,32 +1518,27 @@ input {
         font-size: 85%;
         font-weight: bold;
         line-height: 2em;
-        margin: .5em 0 .5em .5em !important;
+        margin: .5em;
     }
 
     div {
-        float: left !important;
-        margin: .5em 0 .5em .2em !important;
+        float: left;
     }
 
     #facebook {
-        background-position: -7px -35px;
+        color: #4267B2;
     }
 
     #twitter {
-        background-position: -7px -5px;
+        color: #1DA1F2;
     }
 
     #linkedin {
-        background-position: -7px -95px;
-    }
-
-    #delicious {
-        background-position: -7px -66px;
+        color: #0073b0;
     }
 
     #email {
-        background-position: -7px -126px;
+        color: #666;
     }
 }
 
@@ -1909,6 +1592,11 @@ input {
     font-size: 90%;
 }
 
+.patronimage {
+    float: right;
+    margin-left: 1em;
+}
+
 #plainmarc {
     table {
         border: 0;
@@ -1936,25 +1624,12 @@ input {
 #renewcontrols {
     float: right;
     font-size: 66%;
-
-    a {
-        background-repeat: no-repeat;
-        padding: .1em .4em;
-        padding-left: 18px;
-        text-decoration: none;
-    }
-}
-
-#renewselected_link {
-    background-image: url( "../images/sprite.png" );
-    background-position: -5px -986px;
-    background-repeat: no-repeat;
 }
 
 #renewall_link {
-    background-image: url( "../images/sprite.png" );
-    background-position: -8px -967px;
-    background-repeat: no-repeat;
+    i:first-child {
+        left: 9px;
+    }
 }
 
 .authref {
@@ -1991,6 +1666,10 @@ input {
     font-style: italic;
 }
 
+#daily-quote {
+    margin-bottom: 1em;
+}
+
 #didyoumean {
     @include border-radius-all( 3px );
     background-color: #EEE;
@@ -2020,6 +1699,8 @@ input {
 }
 
 #hierarchies {
+    margin: 1em 0;
+
     a {
         color: #069;
         font-weight: normal;
@@ -2031,22 +1712,11 @@ input {
     }
 }
 
-#top-pages {
-    margin: 0 0 .5em;
-}
 
-.dropdown-menu {
-    > li {
-        > a {
-            font-size: 90%;
-        }
-    }
-}
 
 #cartDetails,
 #cartUpdate,
-#holdDetails,
-#listsDetails {
+#holdDetails {
     background-color: #FFF;
     border: 1px solid rgba( 0, 0, 0, .2 );
     border-radius: 6px;
@@ -2065,9 +1735,7 @@ input {
     white-space: nowrap;
 }
 
-#search-facets,
-#menu {
-    @include border-radius-all( 7px );
+#search-facets {
     border: 1px solid #D2D2CF;
 
     ul {
@@ -2079,22 +1747,24 @@ input {
         margin: 0;
     }
 
-    h4 {
+    h2 {
         font-size: 90%;
         margin: 0 0 .6em 0;
         text-align: center;
 
         a {
-            background-color: #F2F2EF;
+            background-color: #F0F3F3;
             border-bottom: 1px solid #D8D8D8;
-            border-radius: 8px 8px 0 0;
             display: block;
             font-weight: bold;
             padding: .7em .2em;
-            text-decoration: none;
         }
     }
 
+    h3 {
+        font-size: 80%;
+    }
+
     li {
         font-size: 90%;
         font-weight: bold;
@@ -2118,7 +1788,6 @@ input {
 
     a {
         font-weight: normal;
-        text-decoration: underline;
     }
 
     .facet-count {
@@ -2130,59 +1799,45 @@ input {
 #menu {
     font-size: 94%;
 
+    ul {
+        padding-left: 0;
+    }
+
     li {
         list-style-type: none;
 
-        a {
-            background: #EEEEEE;
-            border: 1px solid #D8D8D8;
-            border-bottom-color: #999;
-            border-radius: 5px 0 0 5px;
-            display: block;
-            font-size: 111%;
-            margin: .4em 0;
-            margin-right: -1px;
-            padding: .4em .6em;
-            text-decoration: none;
-
-            &:hover {
-                background: #EAEEF5;
+        &:last-child {
+            a {
+                border-bottom-width: 1px;
             }
         }
 
         &.active {
             a {
                 background-color: #FFF;
-                background-image: none;
-                border-right-width: 0;
-                font-weight: bold;
-
-                &:hover {
-                    background-color: #FFF;
-                }
+                border-top: 1px solid #999;
             }
         }
-    }
 
-    h4 {
-        display: none;
+        a {
+            background-color: #f0f3f3;
+            border: 1px solid #d8d8d8;
+            border-bottom-width: 0;
+            display: block;
+            margin: 0;
+            padding: .4em .6em;
+            text-decoration: none;
+        }
+
     }
 }
 
 #addto {
+    display: inline-block;
     max-width: 10em;
 }
 
 /* Search results add to cart (lists disabled) */
-.addto {
-    .addtocart {
-        background-image: url( "../images/sprite.png" ); /* Cart */
-        background-position: -5px -266px;
-        background-repeat: no-repeat;
-        padding-left: 33px;
-        text-decoration: none;
-    }
-}
 
 .searchresults {
     p {
@@ -2194,17 +1849,6 @@ input {
         }
     }
 
-    a {
-        &.highlight_toggle {
-            background-image: url( "../images/sprite.png" ); /* Highlight */
-            background-position: -11px -841px;
-            background-repeat: no-repeat;
-            display: none;
-            font-weight: normal;
-            padding: 0 10px 0 21px;
-        }
-    }
-
     .commentline {
         @include border-radius-all( 3px );
         @include shadowed;
@@ -2218,6 +1862,11 @@ input {
             background-color: rgba( 239, 254, 213, .4 );
         }
     }
+
+    .commenter {
+        color: #666;
+        font-size: 85%;
+    }
 }
 
 .commentline .avatar {
@@ -2238,15 +1887,6 @@ input {
     font-style: italic;
 }
 
-#CheckAll,
-#CheckNone,
-.CheckAll,
-.CheckNone {
-    font-weight: normal;
-    margin: 0 .5em;
-    text-decoration: underline;
-}
-
 .sep {
     color: #888;
     padding: 0 .2em 0 .5em;
@@ -2312,86 +1952,30 @@ input {
         @extend %page-middle-child;
     }
 
-    a[rel='last'] {
-        border-bottom-right-radius: 3px;
-        border-top-right-radius: 3px;
-    }
-}
-
-.hold-message {
-    @include border-radius-all( 3px );
-    background-color: #FFF0B1;
-    display: inline-block;
-    margin: .5em;
-    padding: .2em .5em;
-}
-
-.reserve_date,
-.expiration_date {
-    white-space: nowrap;
-}
-
-.close {
-    color: #0088CC;
-    filter: none;
-    float: none;
-    font-size: inherit;
-    font-weight: normal;
-    opacity: inherit;
-    position: inherit;
-    right: auto;
-    text-shadow: none;
-    top: auto;
-}
-
-.close:hover {
-    color: #538200;
-    filter: inherit;
-    font-size: inherit;
-    opacity: inherit;
-}
-
-/* Redefine a new style for Bootstrap's class "close" since we use that already */
-/* Use <a class="closebtn" href="#">&times;</a> */
-
-.modal-header .closebtn {
-    margin-top: 2px;
-}
-
-.closebtn {
-    color: #000000;
-    float: right;
-    font-size: 20px;
-    font-weight: bold;
-    line-height: 20px;
-    opacity: .2;
-    text-shadow: 0 1px 0 #FFFFFF;
-
-    &:hover {
-        color: #000000;
-        cursor: pointer;
-        opacity: .4;
-        text-decoration: none;
+    a[rel='last'] {
+        border-bottom-right-radius: 3px;
+        border-top-right-radius: 3px;
     }
 }
 
-button.closebtn {
-    background: transparent;
-    border: 0;
-    cursor: pointer;
-    padding: 0;
+.hold-message {
+    @include border-radius-all( 3px );
+    background-color: #FFF0B1;
+    display: inline-block;
+    margin: .5em;
+    padding: .2em .5em;
 }
 
-.modal {
-    form {
-        margin: 0;
-    }
+.reserve_date,
+.expiration_date {
+    white-space: nowrap;
 }
 
-#loginModal {
-    margin-left: -200px;
-    width: 400px;
+#login {
+    max-width: 300px;
+}
 
+#loginModal {
     input {
         box-sizing: border-box;
         display: block;
@@ -2401,13 +1985,12 @@ button.closebtn {
         width: 100%;
 
         &[type='submit'] {
-            background: #006DCC none;
             font-size: 100%;
             padding: .5em;
             transition: background-color .5s ease;
 
             &:hover {
-                background: #0088CC none;
+                background: #77b50f none;
             }
         }
     }
@@ -2435,6 +2018,20 @@ button.closebtn {
     padding-top: 1em;
 }
 
+.registration-label {
+    display: inline-block;
+    font-weight: bold;
+    padding: 5px;
+}
+
+.registration-value {
+    background-color: #ebf8ff;
+    border-radius: 5px;
+    display: inline-block;
+    font-family: monospace;
+    padding: 5px 10px;
+}
+
 .btn-group {
     label,
     select {
@@ -2442,10 +2039,6 @@ button.closebtn {
     }
 }
 
-.span2 select {
-    width: 100%;
-}
-
 .item-status {
     display: block;
     font-size: 95%;
@@ -2460,6 +2053,14 @@ button.closebtn {
     color: #990033;
 }
 
+.ItemSummary .LabelCallNumber::before {
+    content: " [";
+}
+
+.ItemSummary .CallNumber::after {
+    content: "]";
+}
+
 .waiting,
 .intransit,
 .notforloan,
@@ -2478,53 +2079,18 @@ button.closebtn {
 }
 
 .suggestion {
-    @include border-radius-all( 3px );
-    background-color: #EEEEEB;
-    border: 1px solid #DDDED3;
+    background-color: #F0F3F3;
+    border: 1px solid #F0F3F3;
+    color: $high-contrast-grey;
     margin: 1em auto;
     padding: .5em;
     width: 35%;
 }
 
-.librarypulldown .transl1 {
-    width: auto;
-}
-
-.nolibrarypulldown {
-    width: 68%;
-
-    .transl1 {
-        width: 87%;
-    }
-}
-
-#opac-main-search {
-    select {
-        max-width: 12em;
-        width: auto;
-    }
+.transl1 {
+    width: 100%;
 }
 
-#logo {
-    background: transparent url( "../images/koha-logo-navbar.png" ) no-repeat scroll 0%;
-    border: 0;
-    float: left !important;
-    margin: 0;
-    padding: 0;
-    width: 100px;
-
-    a {
-        border: 0;
-        cursor: pointer;
-        display: block;
-        height: 0 !important;
-        margin: 0;
-        overflow: hidden;
-        padding: 40px 0 0;
-        text-decoration: none;
-        width: 100px;
-    }
-}
 
 #user-menu-trigger {
     display: none;
@@ -2545,6 +2111,7 @@ button.closebtn {
 .floating {
     box-shadow: 0 3px 2px 0 rgba( 0, 0, 0, .4 );
     margin-top: 0;
+    z-index: 5;
 }
 
 .tdlabel {
@@ -2570,42 +2137,33 @@ button.closebtn {
     margin: 0 auto;
 }
 
-.table {
-    .sorting_asc {
-        background: url( "../images/asc.gif" ) no-repeat scroll right center #ECEDE6;
-        padding-right: 19px;
-    }
-
-    .sorting_desc {
-        background: url( "../images/desc.gif" ) no-repeat scroll right center #ECEDE6;
-        padding-right: 19px;
-    }
-
-    .sorting {
-        background: url( "../images/ascdesc.gif" ) no-repeat scroll right center #ECEDE6;
-        padding-right: 19px;
-    }
-
-    .nosort,
-    .nosort.sorting_asc,
-    .nosort.sorting_desc,
-    .nosort.sorting {
-        background: #ECEDE6 none;
-        padding-right: 19px;
+.table-bordered {
+    border-radius: 0;
+    thead:first-child tr:first-child > th {
+        &:last-child {
+        border-radius: 0;
+        }
+        &:first-child {
+        border-radius: 0;
+        }
     }
-
-    th,
-    td {
-        line-height: 135%;
+    tbody:last-child tr:last-child > td {
+        &:last-child {
+        border-radius: 0;
+        }
+        &:first-child {
+        border-radius: 0;
+        }
     }
 }
 
 .tags,
 .shelves {
     ul {
-        display: inline;
+        display: inline-block;
         list-style: none;
-        margin-left: 0;
+        margin: 0;
+        padding: 0;
 
         li {
             display: inline;
@@ -2617,45 +2175,7 @@ button.closebtn {
     float: right;
 }
 
-#i18nMenu {
-    margin-left: 1em;
-
-    li {
-        font-size: 85%;
-
-        li {
-            font-size: 100%;
-
-            > a {
-                font-size: 100%;
-            }
-
-            &:hover {
-                color: #FFF;
-            }
-        }
-
-        a {
-            color: $links;
-        }
-    }
-
-    .dropdown-menu {
-        li {
-            p {
-                clear: both;
-                display: block;
-                font-weight: normal;
-                line-height: 20px;
-                padding: 3px 20px;
-                white-space: nowrap;
-            }
-        }
-    }
-}
-
-#subjectsList,
-#authorSearch {
+#termsList {
     label {
         display: inline;
         vertical-align: middle;
@@ -2677,6 +2197,7 @@ button.closebtn {
 
 
 #overdrive-results,
+#recordedbooks-results,
 #openlibrary-results {
     font-weight: bold;
     padding-left: 1em;
@@ -2691,6 +2212,14 @@ button.closebtn {
     overflow: auto;
 }
 
+#holdingst {
+    table-layout: fixed;
+
+    td {
+        overflow-wrap: break-word;
+    }
+}
+
 #shelfbrowser {
     table {
         margin: 0;
@@ -2708,6 +2237,12 @@ button.closebtn {
     th {
         padding: 3px 5px;
         width: 20%;
+
+        &.nav-cell {
+            padding: 0;
+            vertical-align: middle;
+            width: 1em;
+        }
     }
 
     a {
@@ -2715,32 +2250,34 @@ button.closebtn {
         font-size: 110%;
         font-weight: bold;
         text-decoration: none;
-    }
-
-    #browser_next,
-    #browser_previous {
-        background-image: url( "../images/sprite.png" );
-        background-repeat: no-repeat;
-        width: 16px;
 
-        a {
-            cursor: pointer;
-            display: block;
-            height: 0 !important;
-            margin: 0;
-            overflow: hidden;
-            padding: 50px 0 0;
-            text-decoration: none;
-            width: 16px;
+        &.shelfbrowser_cover {
+            min-height: 80px;
+            min-width: 80px;
+            display: inline-block;
         }
     }
 
     #browser_previous {
-        background-position: -9px -1007px;
+        a {
+            transform: rotate(-90deg);
+            white-space: nowrap;
+
+            i {
+                padding: 0 .5em;
+            }
+        }
     }
 
     #browser_next {
-        background-position: -9px -1057px;
+        a {
+            transform: rotate(90deg);
+            white-space: nowrap;
+
+            i {
+                padding: 0 .5em;
+            }
+        }
     }
 }
 
@@ -2838,11 +2375,7 @@ button.closebtn {
 .contents {
     width: 75%;
 
-    .t:first-child::before {
-        content: "→ ";
-    }
-
-    .t::before {
+    .newline::after {
         content: "\A → ";
         white-space: pre;
     }
@@ -2862,7 +2395,10 @@ button.closebtn {
     font-size: 95%;
     line-height: 135%;
     margin-left: 2em;
-    position: relative;
+
+    :first-child::before {
+        content: "→ ";
+    }
 }
 
 .m880 {
@@ -2876,14 +2412,11 @@ button.closebtn {
 #memberentry-form {
     input.error {
         border-color: #C00;
-        box-shadow: 0 1px 1px #C00 inset, 0 0 8px #C00;
-        color: #F00;
         outline: 0 none;
 
         &:focus {
             border-color: #C00;
-            box-shadow: 0 1px 1px #C00 inset, 0 0 8px #C00;
-            color: #F00;
+            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(204, 0, 0, .6);
             outline: 0 none;
         }
 
@@ -2933,6 +2466,15 @@ button.closebtn {
     .dropdown:hover .dropdown-menu.nojs {
         display: block;
     }
+
+}
+
+.ill_availability_sourcename {
+    margin-top: 20px;
+}
+
+#continue-request-row {
+    text-align: center;
 }
 
 #dc_fieldset {
@@ -2989,30 +2531,240 @@ button.closebtn {
 
 #user_summary {
     border: 1px solid #EAEAE6;
-    border-radius: 7px;
     margin-bottom: 1em;
     padding-bottom: .5em;
 
-    h3 {
-        background-color: #EAEAE6;
-        border-top-left-radius: 6px;
-        border-top-right-radius: 6px;
-        box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .2 );
+    h2 {
+        background-color: #E2E8E8;
+        color: $high-contrast-grey;
+        font-size: 1.1rem;
         margin-top: 0;
-        padding: .2em 0;
+        padding: 5px;
         text-align: center;
     }
 
     ul {
         list-style-type: none;
-        margin: 0 0 .2em 0;
+        margin: 0;
+        padding: 0;
 
         a {
             display: block;
             font-weight: bold;
-            padding: .2em 1em;
+            padding: .2em 15px;
+        }
+    }
+}
+
+/* jQuery Bar Rating plugin for star ratings */
+
+$star-default: #D2D2D2;
+$star-active: #C24A4A;
+$star-selected: #EDB867;
+
+.br-wrapper {
+    display: inline-block;
+}
+
+.br-theme-fontawesome-stars {
+
+    .br-widget {
+        height: 28px;
+        white-space: nowrap;
+
+        a {
+            -webkit-font-smoothing: antialiased;
+            font: normal normal normal 20px/1 FontAwesome;
+            margin-right: 2px;
+            text-decoration: none;
+            text-rendering: auto;
+
+            &::after {
+                color: $star-default;
+                content: "\f005";
+            }
+
+            &.br-active {
+                &::after {
+                    color: $star-active;
+                }
+            }
+
+            &.br-selected {
+                &::after {
+                    color: $star-selected;
+                }
+            }
+        }
+
+
+        .br-current-rating {
+            display: none;
+        }
+    }
+
+    .br-readonly {
+        a {
+            cursor: default;
+        }
+    }
+
+}
+
+#cancel_rating_text {
+    a {
+        color: #C24A4A;
+    }
+}
+
+@media print {
+    .br-theme-fontawesome-stars {
+
+        .br-widget {
+            a {
+                &::after {
+                    color: #000000;
+                    content: "\f006";
+                }
+
+                &.br-active::after,
+                &.br-selected::after {
+                    color: #000000;
+                    content: "\f005";
+                }
+            }
+
+        }
+
+    }
+}
+
+/* END jQuery Bar Rating plugin for star ratings */
+
+#qrcode {
+    margin-left: 35px;
+
+    img,
+    canvas {
+        margin-top: 1em;
+    }
+}
+
+/*opac browse search*/
+
+#browse-resultswrapper {
+    margin-top: 15px;
+}
+#browse-searchfuzziness {
+    padding: 15px 0;
+}
+
+#browse-searchresults, #browse-selectionsearch {
+    border: 1px solid #E3E3E3;
+    border-radius: 4px;
+    padding: 0;
+    margin-bottom: 2em;
+}
+
+#browse-selectionsearch p.subjects {
+    font-size: 0.9em;
+    margin-bottom: 0;
+}
+
+#browse-selectionsearch h4 {
+    margin: 0;
+}
+
+#browse-suggestionserror {
+    margin-top: 1rem;
+}
+
+#browse-search {
+    .loading {
+        text-align: center;
+
+        img {
+            margin:0.5em 0;
+            position: relative;
+            left: -5px;
+        }
+    }
+}
+
+#card_template {
+    display: none;
+}
+
+.result-title {
+    margin-bottom: .4rem;
+    margin-left: 1rem;
+}
+/*end browse search*/
+
+/* Skip to content link. CSS adapted from https://webaim.org/ */
+#scrolltocontent {
+    background: #c60000;
+    border: 1px solid white;
+    border-radius: 0 0 4px 0;
+    border-width: 0 1px 1px 0;
+    color: white;
+    left: 0px;
+    padding: 6px 12px;
+    position: absolute;
+    text-decoration: none;
+    text-shadow: 0 -1px 0 rgba(58, 0, 0, 0.75);
+    top: -40px;
+    transition: top .5s ease-out;
+    z-index: 100;
+
+    &:focus {
+        left: 0px;
+        outline-color: transparent;
+        position: absolute;
+        top: 0px;
+        transition: top .1s ease-in;
+    }
+}
+
+.accordion {
+    .card-header {
+        padding: 0;
+
+        a {
+            display: block;
+            padding: .75rem 1.25rem;
+
+            &[aria-expanded="true"] { font-weight: bold; }
+            &[aria-expanded="false"] { font-weight: normal; }
+
+            &:hover {
+                background-color: rgba(255, 255, 204, 0.8);
+                text-decoration: none;
+            }
         }
     }
+
+    .collapse {
+        &.show {
+            border-top: 1px solid #888;
+        }
+    }
+}
+
+.branchaddress {
+    margin-bottom: 1rem;
+}
+
+#openid_connect {
+    background-color: #fff;
+    border: 1px solid #AAA;
+    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
+    margin: .5em 0;
+
+    i {
+        color: #b53329;
+        margin: 0 .5em;
+    }
 }
 
 @import "responsive";