X-Git-Url: http://koha-dev.rot13.org:8081/gitweb/?a=blobdiff_plain;ds=sidebyside;f=koha-tmpl%2Fintranet-tmpl%2Fprog%2Fcss%2Fsrc%2Fstaff-global.scss;h=e9840301d484e238d9af0499b75b1a0b3fe3a43a;hb=dcf7688b9456b207f29c47c7d627fdcc2683af4b;hp=383dc039b62cd0b0f7e4d81bc0a5ef5c6bb8262d;hpb=5cfc3e3513be1e2169cc2c15d6c499949c7439df;p=srvgit

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index 383dc039b6..e9840301d4 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -5,29 +5,34 @@
 @import "fonts";
 
 ::selection {
-    background: #418940;
+    background: $background-color-primary;
     color: #FFFFFF;
 }
 
-a {
-    &:link,
-    &:visited {
-        color: $green-text-color;
-        border: 0;
-        background-color: transparent;
-        box-shadow: none;
-        font-size: 100%;
+.btn-default,
+.btn-primary,
+.btn-success,
+.btn-info,
+.btn-warning,
+.btn-danger,
+button {
+    box-shadow: unset;
+    text-shadow: unset;
+}
+
+.page-section {
+    @include card;
+
+    & + .page-section {
+        margin-top: 1em;
     }
+}
 
+a {
     &:hover,
     &:active,
     &:focus {
         text-decoration: underline;
-        color: $green-text-color;
-        border: 0;
-        background-color: transparent;
-        box-shadow: none;
-        font-size: 100%;
     }
 
     &:hover {
@@ -44,21 +49,6 @@ a {
         padding: 2px 4px;
     }
 
-    &.btn {
-        &.btn-link {
-            &:link,
-            &:visited {
-                color: $green-text-color;
-            }
-
-            &:hover {
-                text-decoration: underline;
-                font-weight: bold;
-            }
-        }
-
-    }
-
     &.edit-patronimage {
         color: #333;
         background-color: #e6e6e6;
@@ -79,12 +69,12 @@ a {
     }
 
     &.clear_date {
-        color: #418940;
+        color: $warning-text-color;
         font-size: 130%;
         vertical-align: middle;
 
         &:hover {
-            color: $green-text-color;
+            color: lighten( $warning-text-color, 35% );
             text-decoration: none;
         }
     }
@@ -93,7 +83,7 @@ a {
         i, img {
             text-align: center;
             color: $green-text-color;
-            border: solid 3px #71B443;
+            border: solid 3px $background-color-secondary;
             border-radius: 50%;
             background-color: transparent;
             width: 40px;
@@ -110,14 +100,14 @@ a {
         }
 
         &:hover {
-            color: #418940;
+            color: $green-text-color;
             text-decoration: none;
             font-weight: bold;
 
             i, img {
-                border-color: #418940;
+                border-color: $background-color-primary;
                 background-color: transparent;
-                color: #418940;
+                color: $green-text-color;
             }
 
         }
@@ -206,110 +196,52 @@ a {
 
 
 aside {
-    fieldset {
-        box-shadow: 8px 8px 12px rgba(170, 170, 170, .356);
-        padding: .9em;
-
-        button + button,
-        input + input {
-            margin-left: 5px;
-        }
+    h5 {
+        font-size: 100%;
+        margin: .5em 0;
+    }
 
-        fieldset.brief {
-            width: 100%;
+    fieldset {
+        &.brief {
+            padding: .4em .7em;
 
-            legend {
-                color: #696969;
-                font-weight: bold;
-                font-size: 13px;
-                margin: 0;
-                border-bottom: 0;
+            button + button,
+            input + input {
+                margin-left: 5px;
             }
 
-            li {
-                margin-top: 0;
-                padding: 0;
-
-                &.radio {
-                    padding: 0;
-                }
+            fieldset {
+                border-left: 2px solid #CCC;
+                border-radius: 0;
+                margin: .5em 0;
+                padding: .5em;
 
-                label {
-                    color: #696969;
-                    font-size: 13px;
-                    padding: .5em .3em 0 0;
+                legend {
+                    font-size: 95%;
                     margin: 0;
-                    font-weight: normal;
                 }
 
-                input, select {
-                    height: calc(1.5em + .75rem + 2px);
-                    width: calc(100% - 20px);
+                &.action {
+                    border: 0;
+                    margin-left: 0;
+                    padding: .5em 0;
                 }
             }
-        }
-
-        ol {
-            padding: 0;
-            li {
-                list-style: none;
-                left: 0;
-                flex-direction: row;
-                width: 100%;
 
-                fieldset {
-                    width: 100%;
-
-                    legend {
-                        color: #696969;
-                        font-weight: bold;
-                        font-size: 13px;
-                        margin: 0;
-                        border-bottom: 0;
-                    }
-
-                    li {
-                        margin-top: 0;
-                        padding: 0;
-
-                        label {
-                            color: #696969;
-                            font-size: 13px;
-                            padding: .5em .3em 0 0;
-                            margin: 0;
-                            font-weight: normal;
-                        }
-
-                        input,
-                        select {
-                            height: calc(1.5em + .75rem + 2px);
-                            width: calc(100% - 20px);
-                        }
-                    }
-
-                }
-
-                label {
-                    color: #696969;
-                    padding: .5em .3em 0 0;
-                    margin: 0;
-                }
-
-                input,
-                select {
-                    height: calc(1.5em + .75rem + 2px);
-                    width: calc(100% - 20px);
-
-
-                    &[type="checkbox"],
-                    &[type="radio"] {
-                        width: auto;
-                        margin: 0;
-                        vertical-align: middle;
-                    }
-                }
+            input[type="text"],
+            select {
+                height: calc(1.5em + .75rem + 2px);
+            }
 
+            label {
+                color: #696969;
+                display: block;
+                margin: .5em 0 0 0;
+            }
 
+            li {
+                margin-top: 0;
+                padding: 0;
 
                 &.checkbox {
                     label {
@@ -331,6 +263,8 @@ aside {
                 }
 
                 &.radio {
+                    padding: .7em 0;
+
                     input {
                         padding: .3em 0;
                     }
@@ -344,41 +278,27 @@ aside {
                             display: inline;
                         }
                     }
+                }
+            }
 
-                    select,
-                    [type="text"] {
-                        width: 100%;
-                    }
-
-                    .flatpickr-input {
-                        margin-right: 3px;
-                        width: calc(100% - 20px);
-                    }
-
-                    &+.action {
-                        margin-left: 0;
-                        padding: 0;
-                    }
-
-                    .radio, .checkbox {
-                        margin: 0;
-                    }
+            ol {
+                margin: 0;
+                padding: 0;
+            }
 
-                    select,
-                    [type="text"] {
-                        width: 100%;
-                    }
+            select,
+            [type="text"] {
+                width: 100%;
+            }
 
-                    .flatpickr-input {
-                        margin-right: 3px;
-                        width: calc(100% - 20px);
-                    }
+            .flatpickr-input {
+                margin-right: 3px;
+                width: calc(100% - 20px);
+            }
 
-                    &.action {
-                        margin-left: 0;
-                        padding: 0;
-                    }
-                }
+            &+.action {
+                margin-left: 0;
+                padding: 0;
             }
         }
     }
@@ -387,15 +307,14 @@ aside {
 #menu, #navmenulist {
     background-color: #e6e6e6;
     display: block;
+    padding: 1em 0 1em 0;
 
     h5 {
-        margin: .5em 0;
         padding-left: .5em;
-        padding-bottom: .2em;
-        color: #696969;
-        border-bottom: 1px solid #696969;
-        font-weight: normal;
-        font-size: 1.2em;
+        color: #666;
+        font-weight: bold;
+        font-size: 1.3em;
+        margin-top: 0;
     }
 
     ul {
@@ -410,23 +329,47 @@ aside {
             list-style: none;
 
             a {
+                border-left: 5px solid #E6E6E6;
                 color: #000;
                 display: block;
                 text-decoration: none;
                 padding: .7em .3em .7em 1.2em;
             }
 
-            &.active > a, a:hover, a.current {
+            &.active > a,
+            a:hover,
+            a.current {
                 background-color: #F3F4F4;
                 text-decoration: none;
-                color: #418940;
-                border-left: solid 5px #418940;
+                color: $green-text-color;
+                border-left: solid 5px $background-color-primary;
+                font-weight: bold;
+            }
+
+            a:hover {
+                border-left: solid 5px $background-color-secondary;
+                font-weight: normal;
+            }
+
+            &.active > a:hover {
+                border-left: solid 5px $background-color-primary;
                 font-weight: bold;
             }
         }
     }
 }
 
+#admin_preferences #menu{
+
+    ul {
+
+        ul {
+            background-color: #f3f4f4;
+            font-size: 85%;
+        }
+    }
+}
+
 div {
     display: block;
 
@@ -467,11 +410,6 @@ div {
 button {
     @include default-button;
 
-    &:active,
-    &:hover {
-        border: 1px inset #999999;
-    }
-
     &:disabled {
         @include disabled-button;
     }
@@ -501,7 +439,7 @@ main {
 }
 
 body {
-    font-family: "poppins", "Arial", "sans-serif";
+    font-family: $font-family-sans-serif;
     font-size: 13px;
     line-height: 1.22;
     padding: 0 0 4em;
@@ -596,10 +534,6 @@ h4,
 h5,
 h6 {
     margin: .5em 0;
-
-    a, a:link, a:visited {
-        color: #000;
-    }
 }
 
 hr {
@@ -639,44 +573,41 @@ cite {
 input,
 textarea {
     &:focus {
-        border-color: #418940;
+        border-color: $background-color-primary;
         border-radius: 4px;
     }
 }
 
 input {
-    &[type="checkbox"],
-    &[type="radio"] {
-        margin: 0;
-        vertical-align: middle;
+    &[type="submit"] {
+        @include primary-button;
+        padding: .5em 1em;
     }
 
-    &[type="submit"],
     &[type="reset"],
     &[type="button"] {
         @include default-button;
+        padding: .5em 1em;
 
         &:disabled {
             @include disabled-button;
         }
     }
 
+    &[type="checkbox"],
+    &[type="radio"] {
+        height: unset;
+        margin: 3px 3px 0 5px;
+    }
+
     &.submit {
-        @include default-button;
+        @include primary-button;
+        padding: .5em 1em;
 
         &:disabled {
             @include disabled-button;
         }
     }
-
-    &[type="submit"], &.submit {
-        background-color: #FEC32C;
-        border: 0;
-
-        &:hover {
-            background-color: #fec22c9f;
-        }
-    }
 }
 
 .input-warning {
@@ -693,18 +624,17 @@ label,
     max-width: inherit;
     padding: 0;
     vertical-align: middle;
+    white-space: normal;
 
     input {
         &[type="checkbox"],
-        &[type="radio"],
-        &[type="checkbox"],
         &[type="radio"] {
             margin-top: 0;
         }
     }
 
     &.circ_barcode {
-        display: inline-block;
+        display: block;
         font-size: 105%;
         font-weight: bold;
         margin-bottom: 1rem;
@@ -712,7 +642,7 @@ label,
     }
 
     &.required {
-        color: #C00;
+        color: $warning-text-color;
     }
 }
 
@@ -731,13 +661,7 @@ label,
 }
 
 #area-news, #area-userblock {
-    background-color: #FFF;
-    border: 0;
     color: #696969;
-    margin: 0 0 1em 0;
-    box-shadow: 8px 8px 12px rgba(170, 170, 170, .356);
-    display: block;
-    padding: 1em;
 
     h3{
         background-color: #FFFFFF;
@@ -765,7 +689,7 @@ ul {
     padding-left: 1.1em;
 
     li {
-        list-style-type: none;
+        list-style-type: disc;
 
         input {
             &.submit {
@@ -779,11 +703,6 @@ ul {
         }
     }
 
-    &.nav-tabs {
-        border-bottom: 1px solid transparent;
-        padding: .2em 1.4em 0 1.4em;
-    }
-
     &.budget_hierarchy {
         margin-left: 0;
         padding-left: 0;
@@ -850,7 +769,7 @@ ol {
 
 .overdue,
 .debit {
-    color: #CC0000;
+    color: $warning-text-color;
     font-weight: bold;
 }
 
@@ -864,37 +783,13 @@ ol {
 }
 
 fieldset {
-    width: 100%;
-    color: $green-text-color;
-    background-color: #FFF;
-    position: relative;
-    color: #696969;
-    left: 0;
-    top: 0;
-    margin: 0 1em 1em 0;
-    box-shadow: 8px 8px 12px rgba(170, 170, 170, .356);
-    padding: 1em;
-
     + fieldset {
         &.action {
-            padding-top: 20px;
+            margin-top: -1em;
         }
     }
 
-    legend {
-        position: relative;
-        top: 1.5em;
-        margin: .5em 0;
-        font-size: 131%;
-        font-weight: bold;
-        color: #696969;
-        border-bottom: none;
-    }
-
     &.lastchecked {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        border-bottom-width: 0;
         margin-bottom: 0;
         margin-right: 0;
     }
@@ -910,14 +805,18 @@ fieldset {
     &.action {
         background-color: transparent;
         border: 0;
-        clear: both;
         box-shadow: none;
+        clear: both;
         float: none;
-        margin: .9em 0 0;
-        padding: .4em;
+        padding: 1rem;
         width: auto;
-    }
 
+        a {
+            &.cancel {
+                padding-left: 1em;
+            }
+        }
+    }
 
     &.brief {
         div {
@@ -926,8 +825,12 @@ fieldset {
             }
         }
 
-        label {
+        label,
+        span.label {
+            display: block;
+            font-weight: bold;
             padding: .3em 0;
+            text-align: left;
 
             &.inline {
                 display: inline;
@@ -938,7 +841,7 @@ fieldset {
         }
 
         li {
-            margin-top: 1em;
+            margin-top: .5em;
 
             &:first-child {
                 margin-top: 0;
@@ -966,32 +869,22 @@ fieldset {
         ol,
         li {
             list-style-type: none;
-        }
-
-        span {
-            .label {
-                display: block;
-                font-weight: bold;
-                padding: .3em 0;
-                text-align: left;
-            }
+            padding-left: 0;
         }
 
         .action {
-            margin-left: 1em;
+            margin: 0;
+            padding: 1em 0 0 0;
         }
     }
 
+
     ol {
         li {
             list-style-type: none;
             padding: .3em 0;
         }
     }
-
-    fieldset {
-        box-shadow: none;
-    }
 }
 
 details {
@@ -1094,11 +987,10 @@ div {
     }
 
     .circmessage {
-        margin-bottom: .3em;
-        padding: 0 .4em .4em;
+        padding: .4em;
 
-        &:first-child {
-            margin-top: 1em;
+        .circmessage {
+            margin-bottom: .3em;
         }
     }
 
@@ -1117,14 +1009,13 @@ div {
     }
 
     &.note {
-        background: linear-gradient(to bottom, #F4F6FA 0%, #E8EDF6 100%); // W3C
-        border: 1px solid #BCBCBC;
+        background-color: #CFE2FF;
         margin: .5em 0;
         padding: .5em;
 
         i {
             &.fa-exclamation {
-                color: #CC0000;
+                color: $warning-text-color;
                 font-style: italic;
                 padding: 0 .3em;
             }
@@ -1153,9 +1044,8 @@ div {
     }
 
     &.lastchecked {
+        background-color: #FFF;
         border: 2px solid #BCDB89;
-        border-bottom-left-radius: 5px;
-        border-bottom-right-radius: 5px;
         padding: .2em 1em;
     }
 
@@ -1169,11 +1059,6 @@ div {
                 font-size: 80%;
             }
         }
-
-        input {
-            font-size: 90%;
-            padding: .2em .6em;
-        }
     }
 
     &.sysprefs {
@@ -1194,8 +1079,6 @@ div {
     }
 
     &.rows {
-        clear: left;
-        float: left;
         margin: 0;
         padding: 0;
         width: 100%;
@@ -1208,8 +1091,6 @@ div {
 
         li {
             border-bottom: 1px solid #EEE;
-            clear: left;
-            float: left;
             list-style-type: none;
             padding: .275em;
             width: 100%;
@@ -1232,11 +1113,12 @@ div {
 
         span {
             &.label {
-                float: left;
+                display: inline-block;
                 font-weight: bold;
                 margin-right: 1em;
                 padding-top: 0;
                 text-align: left;
+                vertical-align: top;
                 width: 9em;
                 white-space: normal;
             }
@@ -1284,11 +1166,6 @@ div {
     }
 }
 
-#reserves,
-#checkouts {
-    padding: 1em;
-}
-
 #sales {
     display: none;
 }
@@ -1337,6 +1214,7 @@ dd {
     margin-right: .5em;
     padding-top: 1em;
     background-color: #e6e6e6;
+    color: #000;
     left: -10px;
     width: 100%;
     padding-bottom: 25px;
@@ -1379,8 +1257,7 @@ dd {
 }
 
 .patroninfo-section {
-    padding: .5em;
-    margin: .5em;
+    @include card;
 }
 
 .patroninfo-heading {
@@ -1479,11 +1356,13 @@ dd {
 
 .dropdown-menu {
     background-color: #F3F4F4;
+
     li {
         list-style-type: none;
 
         a {
             color: #000;
+            padding: .4em 20px;
 
             &:hover {
                 background-color: #DADADA;
@@ -1557,17 +1436,17 @@ input[type='text']:read-only:focus {
 }
 
 .error {
-    color: #CC0000;
+    color: $warning-text-color;
 }
 
 // Font Awesome icons
 i {
     &.error {
-        color: #CC0000;
+        color: $warning-text-color;
     }
 
     &.success {
-        color: #418940;
+        color: $green-text-color;
     }
 
     &.warn {
@@ -1576,12 +1455,15 @@ i {
 }
 
 .circ-setting {
-    font-size: 85%;
-    padding-top: .9em;
-    padding-bottom: .9em;
+    font-size: 95%;
+    padding: .3em 0;
 
     input {
         vertical-align: middle;
+
+        &.flatpickr-input {
+            max-width: 11em;
+        }
     }
 
     label {
@@ -1591,6 +1473,7 @@ i {
 }
 
 .circ-settings {
+    border-top: 2px solid #EEE;
     border-radius: 0;
     display: none;
     margin-left: -1em;
@@ -1655,16 +1538,15 @@ i {
     }
 }
 
-#circ_needsconfirmation {
-    margin: auto;
+#circmessages,
+#patron_messages {
+    @include card;
 }
 
 .dialog {
-    border-radius: 2px;
     margin: 1em auto;
     padding: .5em;
     text-align: center;
-    display: table;
     width: 65%;
     max-width: 600px;
 
@@ -1677,9 +1559,7 @@ i {
     button,
     a.approve {
         background: #FFF none;
-        border: 1px outset #999999;
-        border-left-color: #666;
-        border-top-color: #666;
+        border: 1px solid #555;
         margin: .4em;
         padding: .4em;
         white-space: pre-line;
@@ -1715,7 +1595,6 @@ i {
             &.approve {
                 background-color: #FEC32C;
                 color: #000;
-                text-shadow: 0 1px 0 #FFFFFF;
                 border: 0;
                 background-image: none;
                 margin-top: 5px;
@@ -1787,7 +1666,7 @@ i {
     }
 
     &.message {
-        background-color: #ffffff;
+        background-color: #CFE2FF;
         text-align: center;
 
         ul,
@@ -1803,7 +1682,7 @@ i {
 
     &.alert,
     &.error {
-        background-color: rgb(255, 237, 135);
+        background-color: rgb( 255, 237, 135 );
         color: inherit;
         text-align: center;
         text-shadow: none;
@@ -1831,7 +1710,7 @@ i {
     background-color: #FEC32C;
     i {
         &.fa {
-            color: #418940;
+            color: $green-text-color;
         }
     }
 }
@@ -1839,7 +1718,7 @@ i {
 .deny {
     i {
         &.fa {
-            color: #CC0000;
+            color: $warning-text-color;
         }
     }
 }
@@ -1925,7 +1804,7 @@ li {
 }
 
 .empty {
-    color: #CCC;
+    color: #666;
 }
 
 .address {
@@ -1999,27 +1878,6 @@ li {
     }
 
     td {
-        border: 0;
-
-
-        button, a {
-            &.btn-default {
-                color: $green-text-color;
-                padding: .3em;
-                border: 0;
-                background-color: transparent;
-                border: 0;
-                box-shadow: none;
-                font-size: 100%;
-
-                &:hover, &:active, &:focus, &:active:hover, &:active:focus {
-                    background-color: transparent;
-                    color: $green-text-color;
-                    text-decoration: underline;
-                }
-            }
-        }
-
         ul {
             li {
                 clear: left;
@@ -2107,9 +1965,8 @@ li {
 }
 
 .searchheader {
-    background-color: transparent;
-    border: 1px solid #696969;
-    border-radius: 5px 5px 5px 5px;
+    background-color: #f3f4f4;
+    box-shadow: 0 0 2px 1px rgba(0,0,0,.2);
     font-size: 80%;
     margin-top: .5em;
     margin-bottom: .5em;
@@ -2120,7 +1977,10 @@ li {
 
     &.floating {
         border-radius: 0;
+        box-shadow: 0 0 2px 1px rgba(0,0,0,.4);
         margin-top: 0;
+        margin-bottom: 0;
+        z-index: 100;
     }
 
     .btn-group {
@@ -2150,9 +2010,9 @@ li {
 }
 
 #patron_search_selected {
-    background-color: #F9FEFF;
-    border: 1px solid #B9D8D9;
-    border-color: #A2CBCC #CEE0E3 #CEE0E3 #A2CBCC;
+    background-color: lighten( $background-color-primary, 60 );
+    border: 1px solid $background-color-primary;
+    border-color: lighten( $background-color-primary, 30 ) lighten( $background-color-primary, 50 ) lighten( $background-color-primary, 50 ) lighten( $background-color-primary, 30 );
     border-radius: 3px;
     color: #333;
     display: inline-block;
@@ -2177,12 +2037,13 @@ li {
 
 
 #search-facets {
+    background-color: #e6e6e6;
+
     h4 {
-        background-color: #71B443;
-        border-bottom: 1px solid #71B443;
-        border-radius: 4px 4px 0 0;
-        font-size: 90%;
+        background-color: $background-color-primary;
+        border-radius: 0 4px 0 0;
         color: #FFFFFF;
+        font-size: 100%;
         margin: 0;
         padding: .4em .2em;
         text-align: center;
@@ -2190,7 +2051,7 @@ li {
 
     ul {
         margin: 0;
-        padding: .3em;
+        padding: 6px 12px;
 
         li {
             font-weight: bold;
@@ -2221,12 +2082,6 @@ li {
     text-align: center;
 }
 
-.custom_cover_image {
-    img {
-        max-width: 140px;
-    }
-}
-
 #biblio-cover-slider {
     border: 1px solid #bfd9b9;
     border-radius: 3px;
@@ -2254,6 +2109,9 @@ li {
 }
 
 td {
+    &.actions {
+        white-space: nowrap;
+    }
     &.bookcoverimg {
         background: #FFF url("../img/spinner-small.gif") center center no-repeat;
         min-width: 120px;
@@ -2303,6 +2161,12 @@ td {
     }
 }
 
+.custom_cover_image {
+    img {
+        max-width: 140px;
+    }
+}
+
 .cover-nav {
     display: inline-block;
     padding: 3px 4px;
@@ -2479,7 +2343,6 @@ td.bundle {
 .results_summary {
     color: #202020;
     display: block;
-    font-size: 85%;
     padding: 0 0 .5em;
 
     a {
@@ -2505,15 +2368,15 @@ td.bundle {
 
     a,
     span {
-        background-color: #E4ECF5;
-        border: 1px solid #A4BEDD;
+        background-color: lighten( $background-color-secondary, 50 );
+        border: 1px solid lighten( $background-color-secondary, 15 );
         border-radius: 4px;
         font-weight: bold;
         padding: .1em .4em;
         text-decoration: none;
 
         &:hover {
-            background-color: #EBEFF7;
+            background-color: lighten( $background-color-secondary, 40 )
         }
     }
 }
@@ -2604,6 +2467,10 @@ td.bundle {
     }
 }
 
+#advsearches {
+    margin-bottom: 1em;
+}
+
 #circ_circulation_issue {
     position: relative;
 }
@@ -2633,7 +2500,7 @@ td.bundle {
         text-shadow: 0 -1px 0 #666;
 
         &:hover {
-            color: #CC0000;
+            color: $warning-text-color;
         }
     }
 }
@@ -2656,7 +2523,7 @@ td.bundle {
         text-shadow: 0 -1px 0 #666;
 
         &:hover {
-            color: #CC0000;
+            color: $warning-text-color;
         }
     }
 }
@@ -2710,7 +2577,7 @@ td.bundle {
 .ui-widget-content {
     background: #FFFFFF none;
     border-radius: 4px;
-    border: 3px solid #418940;
+    border: 3px solid $background-color-primary;
     color: #222222;
 }
 
@@ -2762,6 +2629,7 @@ td.bundle {
     box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
     cursor: default;
     position: absolute;
+    z-index: 2000;
 
     &.ui-menu {
         li {
@@ -2785,6 +2653,9 @@ td.bundle {
 
                 .ui-state-active,
                 .ui-state-focus {
+                    background: #e3f1df none;
+                    color: #212121;
+                    font-weight: normal;
                     margin: 0;
                 }
             }
@@ -2824,7 +2695,7 @@ td.bundle {
     .ui-tabs-panel {
         background: #FFF none;
         border-radius: 4px;
-        border: 3px solid #418940;
+        border: 2px solid $background-color-primary;
 
         fieldset {
             box-shadow: none;
@@ -2832,23 +2703,21 @@ td.bundle {
     }
     .ui-tabs-nav {
         li {
-            background: #71B443;
+            background: $background-color-secondary;
             border: 0;
             margin-right: .4em;
             border-radius: 4px 4px 0 0;
 
+            a {
+                color: #111;
+            }
+
             &.ui-tabs-active, &.ui-state-hover {
-                background-color: #418940;
-                border-radius: 4px 4px 0 0;
-                border: 0;
-                border-bottom-width: 0;
-                padding-bottom: 0;
+                background-color: $background-color-primary;
 
                 a {
-                    color: #FFF;
+                    color: #fff;
                 }
-
-
             }
         }
     }
@@ -2858,24 +2727,14 @@ td.bundle {
         border: 0;
     }
 
-    .ui-state-default {
-        a {
-            color: #FFFFFF;
-
-            &:link,
-            &:visited {
-                color: #FFFFFF;
-            }
-        }
-    }
 
     .ui-state-hover {
         a {
-            color: #418940;
+            color: $green-text-color;
 
             &:link,
             &:visited {
-                color: #418940;
+                color: $green-text-color;
             }
         }
     }
@@ -2893,148 +2752,13 @@ td.bundle {
     }
 }
 
-.statictabs {
-
-    background-color: #FFFFFF;
-    margin-top: 20px;
-    box-shadow: 8px 8px 12px rgba(170, 170, 170, .356);
-    padding: 20px;
-
-    h3{
-        padding-bottom: .7em;
-        margin: 0;
-        color: #696969;
-    }
-
-    td {
-        border: 0;
-
-        ul {
-            li {
-                clear: left;
-                font-size: 90%;
-                list-style: url("../img/item-bullet.svg");
-                padding: .2em 0;
-
-                &.result_itype_image {
-                    list-style: none;
-                    list-style-type: none;
-                }
-
-                img {
-                    float: left;
-                    margin: 3px 5px 3px -5px;
-                    max-width: 25px;
-                }
-            }
-        }
-    }
-
-    span {
-        &.status {
-            clear: left;
-            color: #900;
-            display: block;
-        }
-
-        &.unavailable {
-            clear: left;
-            display: block;
-        }
-    }
-
-
-    > ul {
-        background: none repeat scroll 0 0 transparent;
-        border: 0 none;
-        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;
-
-        &::after {
-            clear: both;
-        }
-
-        &::before,
-        &::after {
-            content: "";
-            display: table;
-        }
-
-        li {
-            border-top-left-radius: 4px;
-            border-top-right-radius: 4px;
-            border-bottom-right-radius: 0;
-            border-bottom-left-radius: 0;
-            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;
-            background: #71B443;
-
-            &.active, &:hover {
-                font-weight: normal;
-                padding-bottom: 1px;
-
-                background-color: #418940;
-                border: 0;
-                border-bottom-width: 0;
-
-                a {
-                    background: none repeat scroll 0 0 transparent;
-                    color: #FFFFFF;
-                    outline: 0 none;
-                    top: 1px;
-                }
-            }
-
-            a {
-                color: #FFFFFF;
-                cursor: pointer;
-                float: left;
-                padding: .5em 1em;
-                text-decoration: none;
-
-                &:hover {
-                    border-top-left-radius: 4px;
-                    border-top-right-radius: 4px;
-                }
-            }
-        }
-    }
-
-    .tabs-container {
-        background: none repeat scroll 0 0 transparent;
-        border: 3px solid #418940;
-        border-radius: 4px;
-        color: #222222;
-        display: block;
-        padding: 1em 1.4em;
-    }
-}
-
 .toptabs {
     margin-top: 5px;
-        .ui-tabs-panel {
-            background: #FFF none;
-            border-radius: 4px;
-            border: 3px solid #418940;
+}
 
-            fieldset {
-                box-shadow: none;
-            }
-        }
+fieldset > .toptabs {
+    background-color: #F3F4F4;
+    padding: 1em;
 }
 
 .authref {
@@ -3101,7 +2825,7 @@ td.bundle {
     margin-bottom: 1em;
 
     a {
-        color: #069;
+        color: $green-text-color;
         font-weight: normal;
         text-decoration: underline;
 
@@ -3109,7 +2833,7 @@ td.bundle {
             &.jstree-hovered {
                 background: transparent none;
                 box-shadow: none;
-                color: #005580;
+                color: darken( $green-text-color, 5 );
             }
 
             &.jstree-clicked {
@@ -3201,11 +2925,13 @@ nav {
 
             li {
                 display: inline;
-                color : #418940;
+                color : $green-text-color;
                 font-style: italic;
 
                 &+li::before {
-                    content: '/';
+                    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;
@@ -3226,6 +2952,7 @@ nav {
 
 .navbar {
     background-color: #352C2E;
+    border: 0;
 }
 
 .nav .open > a,
@@ -3244,60 +2971,46 @@ nav {
 }
 
 .pagination {
-    margin:.5em .8em;
-
-    .active {
-        a {
-            background-color: #6daa5a;
-            border-color: #6daa5a;
-
-            &:hover,
-            &:focus {
-                background-color: #6daa5a;
-                border-color: #6daa5a;
-            }
-        }
-
-        span {
-            background-color: #6daa5a;
-            border-color: #6daa5a;
-
-            &:hover,
-            &:focus {
-                background-color: #6daa5a;
-                border-color: #6daa5a;
-            }
-        }
-    }
+    margin: .5em 0;
 }
 
 button,
 .btn {
-    display: inline-block;
-    margin-bottom: 0;
-    font-weight: normal;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
-    touch-action: manipulation;
-    cursor: pointer;
-    background-image: none;
-    font-size: 12px;
-    line-height: 1.42857143;
-    border-radius: 4px;
-    user-select: none;
+    @include default-button;
+
+    &.btn-default {
+        color: #555;
+    }
 
     &.btn-link {
+        background: transparent none;
         border: 0;
     }
-}
 
-#merge-patrons {
-    padding: 0 25px;
-}
+    &.btn-primary {
+        @include primary-button;
+
+        &.dropdown-toggle {
+            border-left: 1px solid darken( saturate( $btn-primary, 15 ), 15 );
+        }
+    }
 
-#patronlist-menu {
-    padding: 0 25px;
+    &.btn-danger {
+        background-color: #CC3333;
+        border-color: #9B2323;
+        color: #fff;
+    }
+
+    &.btn-danger:hover {
+        color: #fff;
+        background-color: #c82333;
+        border-color: #a81c29;
+    }
+
+    &.btn-danger:not( :disabled ):not( .disabled ).active,
+    &.btn-danger:not( :disabled ):not( .disabled ):active {
+        box-shadow: inset 0 0 0 1px #a81c29;
+    }
 }
 
 .btn-xs,
@@ -3309,11 +3022,11 @@ button,
 /* Bootstrap Collapse */
 
 .panel {
-    background: #F4F8F9 none;
+    background: #F7F9F6 none;
     box-shadow: none;
 
     &:hover {
-        background: #e3f1df none;
+        background: #E3F1DF none;
     }
 }
 
@@ -3415,12 +3128,6 @@ button,
     }
 }
 
-.loggedout {
-    color: #004D99;
-    font-weight: bold;
-    padding: .4em .2em;
-}
-
 .navbar-fixed-bottom {
     .navbar-inner {
         min-height: 0;
@@ -3463,7 +3170,7 @@ button,
 }
 
 .separator {
-    color: #666;
+    color: #bfbfbf;
     padding: 0 .2em;
 }
 
@@ -3524,29 +3231,33 @@ label {
     }
 }
 
-.modal-header {
-    .closebtn {
-        margin-top: 4px;
-    }
-}
-
 .closebtn {
     color: #000;
-    filter: alpha(opacity = 20);
+    cursor: pointer;
     float: right;
     font-size: 21px;
     font-weight: bold;
     line-height: 1;
-    opacity: .2;
-    text-shadow: 0 1px 0 #FFFFFF;
+    margin-top: 4px;
+    text-decoration: none;
+    text-shadow: 0 1px 0 rgba( 255, 255, 255, .4 );
 
-    &:hover,
-    &:focus {
+    &:focus,
+    &:hover {
+        text-shadow: 0 1px 0 rgba( 255, 255, 255, .6 );
+    }
+
+    &:active {
+        box-shadow: none;
+        text-shadow: 0 1px 0 rgba( 255, 255, 255, .9 );
+    }
+}
+
+.modal-header {
+    border-bottom: 1px solid $background-color-secondary;
+
+    h3 {
         color: #000;
-        cursor: pointer;
-        filter: alpha(opacity = 50);
-        opacity: .5;
-        text-decoration: none;
     }
 }
 
@@ -3564,24 +3275,36 @@ label {
 }
 
 .modal-content {
-    background-color: rgb(211, 223, 204);
+    background-color: $background-color-modal;
 
     fieldset {
         box-shadow: none;
     }
 }
 
+.modal-footer {
+    border-top: 1px solid $background-color-secondary;
+}
+
 .btn-group {
     label,
     select {
         font-size: 13px;
     }
+
+    > .btn:first-child:not( :last-child ):not( .dropdown-toggle ) {
+        border-right: 1px solid darken( saturate( $btn-primary, 15 ), 15 );
+    }
 }
 
 .tooltip-inner {
     white-space: pre-wrap;
 }
 
+.wrapfix {
+    white-space: pre-wrap;
+}
+
 pre {
     background-color: transparent;
     border: 0;
@@ -3610,27 +3333,36 @@ code {
 }
 
 .tab-content {
-    border: 3px solid #418940;
-    border-radius: 4px;
+    background-color: #fff;
+    border: 0;
+    border-radius: 0;
     padding: 1em;
 }
 
 .nav-tabs {
+    border-bottom: 0;
+    padding: .2em 1.4em 0 0;
+
     > li {
+        margin-bottom: -2px;
+
         > a {
-            background-color: #71B443;
-            color: #FFFFFF;
-            line-height: 1.42857143;
+            background-color: $background-color-primary;
+            border: 2px solid $background-color-primary;
+            border-bottom: 0;
+            border-radius: 0;
+            color: #FFF;
+            font-weight: bold;
+            line-height: 1.3;
             margin-right: .4em;
             padding: .5em 1em;
 
             &:hover, &:focus, &:active {
-                background-color: #418940;
-                border-radius: 4px 4px 0 0;
-                border: 1px solid #418940;
+                background-color: $background-color-primary;
+                border: 2px solid $background-color-primary;
+                border-bottom: 0;
                 padding: .5em 1em;
                 text-decoration: none;
-                color: #FFFFFF;
             }
         }
 
@@ -3638,11 +3370,11 @@ code {
             a,
             a:hover,
             a:focus {
-                background-color: #418940;
-                border-radius: 4px 4px 0 0;
-                color: #FFFFFF;
+                background-color: #FFF;
+                border: 2px solid #FFF;
+                color: #111;
                 cursor: default;
-                font-weight: bold;
+                padding: .5em 1em;
             }
         }
     }
@@ -3757,8 +3489,8 @@ progress {
 }
 
 #browse-return-to-results {
-    background-color: #E8F0F6;
-    border: 1px solid #bfd9b9;
+    background-color: #e6e6e6;
+    border: 1px solid lighten($background-color-primary, 30%);
     border-bottom-width: 0;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
@@ -3768,29 +3500,31 @@ progress {
 }
 
 .browse-button {
-    background-color: #FFF;
-    border: 1px solid #bfd9b9;
-    color: #004D99;
+    background-color: transparent;
+    border: 1px solid lighten($background-color-primary, 30%);
     display: block;
     overflow: hidden;
     padding: .4em .6em;
     text-align: center;
     white-space: nowrap;
     width: 100%;
+}
+
+a.browse-button {
+    color: $green-text-color;
 
     &:hover {
-        background: #FAFAFA;
+        background: #fff;
     }
 }
 
 span {
     &.browse-button {
-        background: #FAFAFA;
-        color: #222;
+        color: #999;
     }
 
     &.circ-hlt {
-        color: #CC0000;
+        color: $warning-text-color;
         font-weight: bold;
     }
 
@@ -3805,7 +3539,7 @@ span {
     }
 
     &.required {
-        color: #C00;
+        color: $warning-text-color;
         font-style: italic;
         margin-left: .5em;
     }
@@ -3945,7 +3679,7 @@ input.renew {
 }
 
 .onsite_checkout {
-    color: #CC0000;
+    color: $warning-text-color;
 }
 
 .onsite-checkout-only {
@@ -4327,15 +4061,29 @@ input.renew {
 /* ==== MODULE LINKS - Start ==== */
 .buttons-list {
     /* List containing the module links */
-    margin: 30px 0;
     padding: 0;
-    margin-left: 15px;
+    max-width: 260px;
 
     li {
         /* Standard attributes for the list elements */
         list-style-type: none;
-        display: table;
         margin-bottom: 15px;
+
+        a {
+            padding: 10px;
+            background-color: #e0e0e0;
+            border-radius: 6px;
+            color: #101010;
+            display: block;
+            font-size: 110%;
+            font-weight: bold;
+
+            &:hover {
+                background-color: $background-color-primary;
+                color: white;
+                text-decoration: none;
+            }
+        }
     }
 }
 
@@ -4362,12 +4110,26 @@ input.renew {
 
 /* ==== MODULE LINKS - End ==== */
 
-#catalog-search-link a {
-    padding-right: .2em;
+#catalog-search-link {
+    border-right: 1px solid $background-color-primary;
+    padding-right: .3em;
 }
 
-#catalog-search-dropdown a.dropdown-toggle {
-    padding-left: .2em;
+
+#catalog-search-dropdown {
+    padding: 0;
+
+    & > a {
+        border-left: 1px solid darken( $green-text-color, 5% );
+        margin-right: .6em;
+        padding: .4em .6em;
+
+        &:hover,
+        &.catalog-search-dropdown-hover {
+            background-color: darken( $background-color-primary, 5% );
+            border-left: 1px solid lighten( $green-text-color, 15% );
+        }
+    }
 }
 
 #tools_holidays {
@@ -4388,7 +4150,7 @@ input.renew {
         cursor: pointer;
 
         &:hover {
-            color: #004d99;
+            color: $green-text-color;
         }
     }
 }