Bug 25242: Improve column wrapping and overflow for tables
[srvgit] / koha-tmpl / opac-tmpl / bootstrap / css / src / opac.scss
index 29fc16c..e59ab8d 100644 (file)
@@ -17,17 +17,29 @@ $footer-height: 45px;
     .selections-toolbar {
         display: none;
     }
+
+    #sortsubmit {
+        display: inline;
+    }
 }
 
 .js {
-    .dateformat {
+    .dateformat,
+    #sortsubmit,
+    #sorting-form {
         display: none;
     }
 }
 
-.fa.fa-icon-black,
-.fa.fa-icon-white {
-    color: #000;
+.fa {
+    &.fa-icon-black,
+    &.fa-icon-white {
+        color: #000;
+    }
+
+    &.danger {
+        color: #C00;
+    }
 }
 
 .popup {
@@ -46,14 +58,18 @@ $footer-height: 45px;
 }
 
 a {
-    color: $links;
+    &:link,
+    &:visited {
+        color: $links;
+    }
 
-    &.cancel {
-        padding-left: 1em;
+    &:hover,
+    &:active {
+        color: $links-hover;
     }
 
-    &:visited {
-        color: $links;
+    &.cancel {
+        padding-left: 1em;
     }
 
     &.title {
@@ -61,40 +77,22 @@ a {
         font-weight: bold;
     }
 
-    &.btn {
-        &:visited {
-            color: #333;
-        }
-    }
-
-    &.btn-primary {
-        &:visited {
-            color: #FFF;
+    &.btn-link {
+        &:focus,
+        &:hover {
+            text-decoration: none;
         }
     }
 
     &.login-link {
         color: #005580;
         font-weight: bold;
+
         &.loginModal-trigger {
             color: #85ca11;
         }
     }
 
-    &.listmenulink {
-        &:link,
-        &:visited {
-            color: #0076B2;
-            font-weight: bold;
-        }
-
-        &:hover,
-        &:active {
-            color: #FFF;
-            font-weight: bold;
-        }
-    }
-
     .idreambooksrating {
         color: #29ADE4;
         font-size: 30px;
@@ -115,148 +113,45 @@ a {
     }
 
     &.addtocart {
-        @extend %initial_icon;
-        background-position: -5px -262px; /* Cart */
-        padding-left: 35px;
-    }
-
-    &.addtoshelf {
-        @extend %initial_icon;
-        background-position: -5px -222px; /* 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;
+        padding-right: 0;
     }
 
-    &.editshelf {
-        @extend %initial_icon;
-        background-position: 2px -348px; /* List edit */
-        padding-left: 26px;
-    }
+    &.cartRemove {
+        color: #900;
+        font-size: 90%;
+        padding-left: 0;
 
-    &.empty {
-        @extend %initial_icon;
-        background-position: 2px -598px; /* Trash */
-        padding-left: 30px;
+        &:hover {
+            color: #c60000;
+        }
     }
 
-    &.hide {
-        @extend %initial_icon;
-        background-position: -3px -814px; /* Close */
-        padding-left: 26px;
-    }
 
     &.highlight_toggle {
-        @extend %initial_icon;
-        background-position: -5px -836px; /* 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-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;
+    &.remove {
+        &:hover {
+            color: #900;
 
-        &.disabled {
-            @extend %initial_icon;
-            background-position: 2px -712px; /* Delete disabled */
+            i {
+                .fa {
+                    color: #c60000
+                }
+            }
         }
     }
-
-    &.reserve {
-        @extend %initial_icon;
-        background-position: -6px -141px; /* 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 {
+    color: #727272;
     font-size: 140%;
     line-height: 150%;
-    color: #727272;
 
     &#libraryname {
         background: transparent url( "../images/logo-koha.png" ) no-repeat scroll 0%;
@@ -297,8 +192,8 @@ h4 {
 }
 
 h5 {
-    font-size: 100%;
     color: #727272;
+    font-size: 100%;
 }
 
 caption {
@@ -319,18 +214,27 @@ textarea {
 }
 
 legend {
+    color: #727272;
     font-size: 110%;
     font-weight: bold;
-    color: #727272;
 }
 
 table {
     font-size: 90%;
+    table-layout: fixed;
 }
 
 table,
 td {
     background-color: #FFF;
+    word-wrap: break-all;
+    word-wrap: break-word;
+}
+
+tr {
+    &.outstanding {
+        font-style: italic;
+    }
 }
 
 td {
@@ -342,7 +246,7 @@ td {
         color: #CC3333;
     }
 
-    .sum {
+    &.sum {
         background-color: #FFFFE5;
         font-weight: bold;
     }
@@ -350,20 +254,18 @@ td {
     .btn {
         white-space: nowrap;
     }
-
-    .btn-link {
-        padding: 0;
-    }
 }
 
 th {
     background-color: #E2E8E8;
+    word-wrap: break-all;
+    word-wrap: break-word;
 
     &.sum {
         text-align: right;
     }
 
-    &[scope=row] {
+    &[scope="row"] {
         background-color: transparent;
         text-align: right;
     }
@@ -394,6 +296,69 @@ th {
     }
 }
 
+.dropdown-menu-right {
+    left: auto;
+    right: 0;
+}
+
+.navbar {
+    .nav {
+        margin-right: 0;
+
+        & > li {
+            & > a {
+                color: #777777;
+                float: none;
+                padding: 10px 15px 10px;
+                text-decoration: none;
+                text-shadow: 0 1px 0 #FFFFFF;
+            }
+
+            & > .dropdown-menu {
+                &.dropdown-menu-right {
+                    &::after {
+                        left: unset;
+                        right: 10px;
+                    }
+
+                    &::before {
+                        left: unset;
+                        right: 9px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.navbar-inverse {
+    .navbar-inner {
+        #members {
+            ul {
+                &.dropdown-menu {
+                    a {
+                        &:hover {
+                            color: #005580;
+                            text-decoration: underline;
+
+                            &.logout {
+                                &:hover {
+                                    color: #E8583C;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .divider-vertical {
+                border-left-color: #CCC;
+                border-right-color: #FCF9FC;
+                margin: 0 5px;
+            }
+        }
+    }
+}
 
 #members {
     display: block;
@@ -406,9 +371,35 @@ th {
         &.logout {
             color: #E8583C;
             font-weight: bold;
-            padding: 0 .3em;
+
+            &:hover {
+                color: #E8583C;
+            }
         }
     }
+
+    .search_history {
+        a {
+            display: inline-block;
+            padding: 10px 0;
+
+            &.logout {
+                font-size: 80%;
+                font-weight: normal;
+            }
+        }
+
+        .divider-vertical {
+            border-left-color: #CCC;
+            border-right-color: #FCF9FC;
+            margin: 0 5px;
+        }
+    }
+}
+
+#loggedinuser-menu {
+    min-width: 300px;
+    padding: .5em 1em;
 }
 
 #moresearches {
@@ -527,51 +518,64 @@ th {
     background: #e2e8e8 none;
 }
 
-.actions {
-    a {
-        background-repeat: no-repeat;
-        margin-right: 1em;
-        text-decoration: none;
-        white-space: nowrap;
+.actions-menu {
+    padding-top: 5px;
+}
 
-        &.hold {
-            background-image: url( "../images/sprite.png" ); /* Place hold small */
-            background-position: -5px -539px;
-            padding-left: 21px;
-        }
+.view,
+.actions,
+.toolbar,
+#action {
+    a,
+    button {
 
-        &.article_request {
-            background-image: url( "../images/sprite.png" ); /* Place hold small */
-            background-position: -2px -26px;
-            padding-left: 21px;
+        &:hover {
+            i {
+                &.fa {
+                    color: #44AE89;
+                }
+            }
         }
 
-        &.addtocart {
-            background-image: url( "../images/sprite.png" ); /* Cart small */
-            background-position: -5px -570px;
-            padding-left: 20px;
+        i {
+            &.fa {
+                color: #4466AE;
+            }
         }
 
-        &.addtoshelf {
-            background-image: url( "../images/sprite.png" ); /* MARC view */
-            background-position: -5px -24px;
-            padding-left: 20px;
-        }
+        &.remove {
+            &:hover {
+                color: #900;
 
-        &.addtolist {
-            background-position: -5px -27px;
-            padding-left: 20px;
+                i {
+                    &.fa {
+                        color: #c60000;
+                    }
+                }
+            }
         }
 
-        &.tag_add {
-            background-position: -5px -1110px;
-            padding-left: 20px;
+        &.disabled,
+        &[disabled] {
+            color: #333;
+
+            &:hover {
+                i {
+                    &.fa {
+                        color: #333;
+                        filter: alpha(opacity=65);
+                        opacity: 0.65;
+                    }
+                }
+            }
         }
+    }
+}
 
-        /* List contents remove from list link */
-        &.removefromlist {
-            background-position: -8px -690px; /* Delete */
-            padding-left: 15px;
+.actions {
+    &:first-child {
+        .btn-link {
+            padding-left: 0;
         }
     }
 }
@@ -607,6 +611,29 @@ th {
     color: #333;
 }
 
+/* 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;
+}
+
+.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%;
@@ -617,13 +644,31 @@ th {
 }
 
 .buttons-print {
-    @extend %initial_icon;
     background-color: transparent;
-    background-position: 0 -184px; /* Toolbar print */
     border: 0;
-    color: #0076B2;
-    font-size: 100%;
-    padding-left: 35px;
+    color: #0088cc;
+    display: inline-block;
+    font-size: 14px;
+    line-height: 20px;
+    padding: 4px 12px;
+    text-align: center;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    vertical-align: middle;
+
+    &:hover {
+        color: #005580;
+        &::before {
+            color: #44AE89;
+        }
+    }
+
+    &::before {
+        color: #4466AE;
+        content: "\f02f";
+        font-family: FontAwesome;
+        display: inline-block;
+        padding-right: .5em;
+    }
 }
 
 .form-inline {
@@ -716,6 +761,7 @@ input[type="text"]:focus {
 #toolbar.toolbar {
     background-color: #f0f3f3;
     border: 1px solid #f0f3f3;
+
     &.clearfix {
         background-color: #f0f3f3;
     }
@@ -792,8 +838,6 @@ ul {
 
     .ui-state-default {
         a {
-            color: #006699;
-
             &:link {
                 color: #006699;
             }
@@ -805,8 +849,6 @@ ul {
     }
 
     .ui-state-hover a {
-        color: #990033;
-
         &:link {
             color: #990033;
         }
@@ -955,10 +997,14 @@ ul {
     border: 1px solid #AAA;
     color: #222222;
 
-    a,
+    a:link,
     a:visited {
         color: $links;
     }
+    a:hover,
+    a:active {
+        color: $links-hover;
+    }
 }
 
 .ui-widget-header {
@@ -1047,6 +1093,12 @@ ul {
     }
 }
 
+.custom_cover_image {
+    img {
+        max-width: 140px;
+    }
+}
+
 .required {
     color: #C00;
 }
@@ -1317,13 +1369,6 @@ div {
         width: auto;
     }
 
-    .hold,
-    #tagsel_tag {
-        font-size: 97%;
-        font-weight: bold;
-        padding-left: 28px;
-    }
-
     #tagsel_form {
         margin-top: .5em;
     }
@@ -1341,6 +1386,10 @@ div {
                 border-left: 0;
             }
         }
+
+        &.dropdown-header {
+            display: block;
+        }
     }
 
     ul {
@@ -1357,7 +1406,7 @@ div {
 #selections-toolbar,
 .selections-toolbar {
     background: linear-gradient( #B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100% );
-    margin: 0 0 1em;
+    margin: 0;
     padding-left: 10px;
     padding-top: .5em;
 }
@@ -1366,96 +1415,6 @@ div {
     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;
-
-    &.disabled {
-        background-position: -1px -667px;
-    }
-}
-
-#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;
-        }
-    }
-}
-
-#tagsel_span input {
-    &.submit {
-        @extend %tag_button_default;
-    }
-
-    &:hover {
-        @extend %tag_button_hover;
-    }
-
-    &.disabled {
-        @extend %tag_button_disabled;
-
-        &:hover {
-            @extend %tag_button_disabled;
-        }
-    }
-
-    &.hold.disabled {
-        @extend %tag_button_disabled;
-
-        &:hover {
-            @extend %tag_button_disabled;
-        }
-    }
-}
-
-.selections-toolbar a.disabled {
-    @extend %tag_button_disabled;
-
-    &:hover {
-        @extend %tag_button_disabled;
-    }
-}
-
 .results_summary {
     color: #707070;
     display: block;
@@ -1494,17 +1453,20 @@ div {
     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%;
         font-weight: normal;
-        padding-left: 15px;
+        display: inline-block;
+        padding: 4px 12px;
+        margin-bottom: 0;
+        font-size: 14px;
+        line-height: 20px;
+        text-align: center;
         text-decoration: none;
+        vertical-align: middle;
     }
 }
 
@@ -1519,25 +1481,22 @@ div {
     font-weight: bold;
 }
 
-#MARCview {
-    background-position: -9px -28px;
-}
-
-#ISBDview {
-    background-position: -10px -56px;
-}
+/* pagination */
 
-#Normalview {
-    background-position: -8px 1px;
+.pagination {
+    display: inline-block;
+    margin: 10px 0 0 10px;
 }
 
-#Fullhistory,
-#Briefhistory {
-    background:  transparent none;
-    padding-left: 0;
+.pagination {
+    li {
+        &.page-first,
+        &.page-last {
+            display: none;
+        }
+    }
 }
 
-/* pagination */
 .results-pagination {
     background-color: #F3F3F3;
     display: none;
@@ -1690,6 +1649,28 @@ div {
 }
 
 /* nav */
+
+nav {
+    &.libraries {
+        li {
+            list-style-type: none;
+            padding: .3em .5em;
+
+            a {
+                display: block;
+            }
+        }
+
+        i.fa {
+            color:  #7cbc0f;
+        }
+
+        .fa-li {
+            top:  unset;
+        }
+    }
+}
+
 .nav_pages {
     border-top: 1px solid #DDD;
     padding: .6em;
@@ -1718,17 +1699,18 @@ div {
     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;
+        padding: .2em 0;
     }
 
     a {
         font-weight: bold;
         text-decoration: none;
+        text-align: left;
     }
 }
 
@@ -1748,94 +1730,30 @@ 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;
+    margin-top: 3px;
 }
 
 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 */
+
         }
     }
 
     &.editshelf {
-        @extend %initial_icon;
-        background-color: transparent;
-        background-position: 2px -734px; /* List edit */
-        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 -761px; /* 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 */
-    }
-}
-
-.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;
-    }
 
     &.disabled {
-        background-position: 0 -712px; /* Delete */
     }
 }
 
@@ -1847,14 +1765,6 @@ input {
     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;
@@ -1892,12 +1802,20 @@ input {
 }
 
 #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 {
@@ -1907,32 +1825,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;
     }
 }
 
@@ -2013,25 +1926,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: 5px;
+    }
 }
 
 .authref {
@@ -2129,8 +2029,7 @@ input {
 
 #cartDetails,
 #cartUpdate,
-#holdDetails,
-#listsDetails {
+#holdDetails {
     background-color: #FFF;
     border: 1px solid rgba( 0, 0, 0, .2 );
     border-radius: 6px;
@@ -2162,7 +2061,7 @@ input {
         margin: 0;
     }
 
-    h4 {
+    h2 {
         font-size: 90%;
         margin: 0 0 .6em 0;
         text-align: center;
@@ -2177,6 +2076,10 @@ input {
         }
     }
 
+    h3 {
+        font-size: 80%;
+    }
+
     li {
         font-size: 90%;
         font-weight: bold;
@@ -2200,7 +2103,6 @@ input {
 
     a {
         font-weight: normal;
-        text-decoration: underline;
     }
 
     .facet-count {
@@ -2255,15 +2157,6 @@ input {
 }
 
 /* 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 {
@@ -2275,17 +2168,6 @@ input {
         }
     }
 
-    a {
-        &.highlight_toggle {
-            background-image: url( "../images/sprite.png" ); /* Highlight */
-            background-position: -11px -837px;
-            background-repeat: no-repeat;
-            display: none;
-            font-weight: normal;
-            padding: 0 10px 0 21px;
-        }
-    }
-
     .commentline {
         @include border-radius-all( 3px );
         @include shadowed;
@@ -2329,7 +2211,6 @@ input {
 .CheckNone {
     font-weight: normal;
     margin: 0 .5em;
-    text-decoration: underline;
 }
 
 .sep {
@@ -2430,7 +2311,7 @@ input {
 }
 
 .close:hover {
-    color: #538200;
+    color: #005580;
     filter: inherit;
     font-size: inherit;
     opacity: inherit;
@@ -2460,11 +2341,57 @@ input {
     }
 }
 
-button.closebtn {
-    background: transparent;
-    border: 0;
-    cursor: pointer;
-    padding: 0;
+button {
+    &.btn-link {
+        color: $links;
+        &:focus,
+        &:hover {
+            color: $links-hover;
+            text-decoration: none;
+        }
+    }
+
+    &.closebtn {
+        background: transparent;
+        border: 0;
+        cursor: pointer;
+        padding: 0;
+    }
+
+    &.remove {
+        &:hover {
+            color: #900;
+
+            i {
+                &.fa {
+                    color: #c60000;
+                }
+            }
+        }
+    }
+}
+
+.btn-link {
+    &.btn-lg {
+        font-size: 100%;
+    }
+}
+
+.btn.disabled,
+.btn[disabled] {
+    &:hover {
+        color: #333;
+        filter: alpha(opacity=65);
+        opacity: 0.65;
+    }
+    i {
+        &.fa,
+        &.fa:hover {
+            color: #333;
+            filter: alpha(opacity=65);
+            opacity: 0.65;
+        }
+    }
 }
 
 .modal {
@@ -2544,6 +2471,14 @@ button.closebtn {
     color: #990033;
 }
 
+.ItemSummary .LabelCallNumber::before {
+    content: " [";
+}
+
+.ItemSummary .CallNumber::after {
+    content: "]";
+}
+
 .waiting,
 .intransit,
 .notforloan,
@@ -2636,6 +2571,7 @@ button.closebtn {
 .floating {
     box-shadow: 0 3px 2px 0 rgba( 0, 0, 0, .4 );
     margin-top: 0;
+    z-index: 5;
 }
 
 .tdlabel {
@@ -2728,8 +2664,7 @@ button.closebtn {
     float: right;
 }
 
-#subjectsList,
-#authorSearch {
+#termsList {
     label {
         display: inline;
         vertical-align: middle;
@@ -2783,6 +2718,12 @@ button.closebtn {
     th {
         padding: 3px 5px;
         width: 20%;
+
+        &.nav-cell {
+            padding: 0;
+            vertical-align: middle;
+            width: 1em;
+        }
     }
 
     a {
@@ -2790,32 +2731,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;
+            }
+        }
     }
 }
 
@@ -3008,6 +2951,15 @@ button.closebtn {
     .dropdown:hover .dropdown-menu.nojs {
         display: block;
     }
+
+}
+
+.ill_availability_sourcename {
+    margin-top: 20px;
+}
+
+#continue-request-row {
+    text-align: center;
 }
 
 #dc_fieldset {
@@ -3180,5 +3132,139 @@ $star-selected: #EDB867;
 
 /* END jQuery Bar Rating plugin for star ratings */
 
+#qrcode {
+    margin-left: 35px;
+
+    img,
+    canvas {
+        margin-top: 1em;
+    }
+}
+
+/*opac browse search*/
+#browse-search {
+
+    form {
+        label {
+            display: inline-block;
+            margin-right:5px;
+        }
+
+        [type=submit] {
+            margin-top: 10px;
+        }
+    }
+
+    #browse-resultswrapper {
+       margin-top: 4em;
+
+        @media (min-width: 768px) and (max-width: 984px) {
+            margin-top: 2em;
+        }
+
+        @media (max-width: 767px) {
+            margin-top: 1em;
+        }
+    }
+    #browse-searchresults, #browse-selectionsearch {
+        border: 1px solid #E3E3E3;
+        border-radius: 4px;
+        padding: 0;
+        overflow-y: auto;
+        max-height: 31em;
+        margin-bottom: 2em;
+    }
+    #browse-searchresults {
+        max-height: 31em;
+        list-style: none;
+        padding: 10px;
+
+        a {
+            display: block;
+            margin-bottom: 5px;
+
+            &.selected {
+                background-color:#EEE;
+            }
+        }
+
+        li:last-child a {
+            margin-bottom: 0;
+        }
+
+        @media (max-width: 767px) {
+            max-height: 13em;
+        }
+    }
+    #browse-selection {
+        margin-top: -40px;
+        padding-top: 0;
+
+        @media (max-width: 767px) {
+            margin-top: 0;
+        }
+    }
+    #browse-selectionsearch ol {
+        list-style: none;
+        margin: 0;
+
+        li {
+            padding: 1em;
+
+            &:nth-child(odd) {
+                background-color: #F4F4F4;
+            }
+        }
+    }
+   #browse-selectionsearch p.subjects {
+        font-size: 0.9em;
+        margin-bottom: 0;
+    }
+    #browse-selectionsearch h4 {
+        margin: 0;
+    }
+    .error, .no-results {
+        background-color: #EEE;
+        border: 1px solid #E8E8E8;
+        text-align: left;
+        padding: 0.5em;
+        border-radius: 3px;
+    }
+    .loading {
+        text-align: center;
+
+        img {
+            margin:0.5em 0;
+            position: relative;
+            left: -5px;
+        }
+    }
+}
+/*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;
+    }
+}
 
 @import "responsive";