Bug 31028: (follow-up) Consistently style help-block
[koha-ffzg.git] / koha-tmpl / intranet-tmpl / prog / css / src / staff-global.scss
index 790b436..be6cfda 100644 (file)
 .btn-success,
 .btn-info,
 .btn-warning,
-.btn-danger {
+.btn-danger,
+button {
+    box-shadow: unset;
     text-shadow: unset;
 }
 
 .page-section {
     @include card;
 
-    padding: .5em 1em;
-
     & + .page-section {
         margin-top: 1em;
     }
@@ -69,12 +69,12 @@ a {
     }
 
     &.clear_date {
-        color: $green-text-color;
+        color: $warning-text-color;
         font-size: 130%;
         vertical-align: middle;
 
         &:hover {
-            color: $green-text-color;
+            color: lighten( $warning-text-color, 35% );
             text-decoration: none;
         }
     }
@@ -196,110 +196,52 @@ a {
 
 
 aside {
-    fieldset {
-        @include card;
-        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);
 
+            input[type="text"],
+            select {
+                height: calc(1.5em + .75rem + 2px);
+            }
 
-                    &[type="checkbox"],
-                    &[type="radio"] {
-                        width: auto;
-                        margin: 0;
-                        vertical-align: middle;
-                    }
-                }
-
+            label {
+                color: #696969;
+                display: block;
+                margin: .5em 0 0 0;
+            }
 
+            li {
+                margin-top: 0;
+                padding: 0;
 
                 &.checkbox {
                     label {
@@ -321,6 +263,8 @@ aside {
                 }
 
                 &.radio {
+                    padding: .7em 0;
+
                     input {
                         padding: .3em 0;
                     }
@@ -334,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;
             }
         }
     }
@@ -429,6 +359,17 @@ aside {
     }
 }
 
+#admin_preferences #menu{
+
+    ul {
+
+        ul {
+            background-color: #f3f4f4;
+            font-size: 85%;
+        }
+    }
+}
+
 div {
     display: block;
 
@@ -593,10 +534,6 @@ h4,
 h5,
 h6 {
     margin: .5em 0;
-
-    a, a:link, a:visited {
-        color: #000;
-    }
 }
 
 hr {
@@ -642,38 +579,35 @@ textarea {
 }
 
 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 {
@@ -690,11 +624,10 @@ label,
     max-width: inherit;
     padding: 0;
     vertical-align: middle;
+    white-space: normal;
 
     input {
         &[type="checkbox"],
-        &[type="radio"],
-        &[type="checkbox"],
         &[type="radio"] {
             margin-top: 0;
         }
@@ -709,7 +642,7 @@ label,
     }
 
     &.required {
-        color: #C00;
+        color: $warning-text-color;
     }
 }
 
@@ -770,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;
@@ -841,7 +769,7 @@ ol {
 
 .overdue,
 .debit {
-    color: #CC0000;
+    color: $warning-text-color;
     font-weight: bold;
 }
 
@@ -857,14 +785,11 @@ ol {
 fieldset {
     + fieldset {
         &.action {
-            padding-top: 20px;
+            margin-top: -1em;
         }
     }
 
     &.lastchecked {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        border-bottom-width: 0;
         margin-bottom: 0;
         margin-right: 0;
     }
@@ -880,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 {
@@ -896,8 +825,12 @@ fieldset {
             }
         }
 
-        label {
+        label,
+        span.label {
+            display: block;
+            font-weight: bold;
             padding: .3em 0;
+            text-align: left;
 
             &.inline {
                 display: inline;
@@ -908,7 +841,7 @@ fieldset {
         }
 
         li {
-            margin-top: 1em;
+            margin-top: .5em;
 
             &:first-child {
                 margin-top: 0;
@@ -936,28 +869,36 @@ 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;
         }
     }
+
+    div {
+        &.help-block {
+            display: block;
+            margin-top: 5px;
+            margin-bottom: 10px;
+            color: #737373;
+
+            li {
+                list-style-type: unset;
+                list-style-position: inside;
+            }
+        }
+    }
 }
 
 details {
@@ -1082,14 +1023,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;
             }
@@ -1118,9 +1058,8 @@ div {
     }
 
     &.lastchecked {
+        background-color: #FFF;
         border: 2px solid #BCDB89;
-        border-bottom-left-radius: 5px;
-        border-bottom-right-radius: 5px;
         padding: .2em 1em;
     }
 
@@ -1134,11 +1073,6 @@ div {
                 font-size: 80%;
             }
         }
-
-        input {
-            font-size: 90%;
-            padding: .2em .6em;
-        }
     }
 
     &.sysprefs {
@@ -1198,6 +1132,7 @@ div {
                 margin-right: 1em;
                 padding-top: 0;
                 text-align: left;
+                vertical-align: top;
                 width: 9em;
                 white-space: normal;
             }
@@ -1245,11 +1180,6 @@ div {
     }
 }
 
-#reserves,
-#checkouts {
-    padding: 1em;
-}
-
 #sales {
     display: none;
 }
@@ -1341,8 +1271,6 @@ dd {
 }
 
 .patroninfo-section {
-    padding: .5em;
-    margin: .5em 0;
     @include card;
 }
 
@@ -1442,11 +1370,13 @@ dd {
 
 .dropdown-menu {
     background-color: #F3F4F4;
+
     li {
         list-style-type: none;
 
         a {
             color: #000;
+            padding: .4em 20px;
 
             &:hover {
                 background-color: #DADADA;
@@ -1520,13 +1450,13 @@ 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 {
@@ -1539,12 +1469,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 {
@@ -1554,6 +1487,7 @@ i {
 }
 
 .circ-settings {
+    border-top: 2px solid #EEE;
     border-radius: 0;
     display: none;
     margin-left: -1em;
@@ -1623,16 +1557,10 @@ i {
     @include card;
 }
 
-#circ_needsconfirmation {
-    margin: auto;
-}
-
 .dialog {
-    border-radius: 2px;
     margin: 1em auto;
     padding: .5em;
     text-align: center;
-    display: table;
     width: 65%;
     max-width: 600px;
 
@@ -1645,9 +1573,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;
@@ -1754,7 +1680,7 @@ i {
     }
 
     &.message {
-        background-color: #ffffff;
+        background-color: #CFE2FF;
         text-align: center;
 
         ul,
@@ -1770,7 +1696,7 @@ i {
 
     &.alert,
     &.error {
-        background-color: rgb(255, 237, 135);
+        background-color: rgb( 255, 237, 135 );
         color: inherit;
         text-align: center;
         text-shadow: none;
@@ -1806,7 +1732,7 @@ i {
 .deny {
     i {
         &.fa {
-            color: #CC0000;
+            color: $warning-text-color;
         }
     }
 }
@@ -2098,9 +2024,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;
@@ -2170,12 +2096,6 @@ li {
     text-align: center;
 }
 
-.custom_cover_image {
-    img {
-        max-width: 140px;
-    }
-}
-
 #biblio-cover-slider {
     border: 1px solid #bfd9b9;
     border-radius: 3px;
@@ -2203,6 +2123,9 @@ li {
 }
 
 td {
+    &.actions {
+        white-space: nowrap;
+    }
     &.bookcoverimg {
         background: #FFF url("../img/spinner-small.gif") center center no-repeat;
         min-width: 120px;
@@ -2252,6 +2175,12 @@ td {
     }
 }
 
+.custom_cover_image {
+    img {
+        max-width: 140px;
+    }
+}
+
 .cover-nav {
     display: inline-block;
     padding: 3px 4px;
@@ -2428,7 +2357,6 @@ td.bundle {
 .results_summary {
     color: #202020;
     display: block;
-    font-size: 85%;
     padding: 0 0 .5em;
 
     a {
@@ -2454,15 +2382,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 )
         }
     }
 }
@@ -2586,7 +2514,7 @@ td.bundle {
         text-shadow: 0 -1px 0 #666;
 
         &:hover {
-            color: #CC0000;
+            color: $warning-text-color;
         }
     }
 }
@@ -2609,7 +2537,7 @@ td.bundle {
         text-shadow: 0 -1px 0 #666;
 
         &:hover {
-            color: #CC0000;
+            color: $warning-text-color;
         }
     }
 }
@@ -2715,6 +2643,7 @@ td.bundle {
     box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
     cursor: default;
     position: absolute;
+    z-index: 2000;
 
     &.ui-menu {
         li {
@@ -2738,6 +2667,9 @@ td.bundle {
 
                 .ui-state-active,
                 .ui-state-focus {
+                    background: #e3f1df none;
+                    color: #212121;
+                    font-weight: normal;
                     margin: 0;
                 }
             }
@@ -2834,104 +2766,13 @@ td.bundle {
     }
 }
 
-.statictabs {
-    @include card;
-
-    margin-top: 20px;
-    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 {
-        line-height: 1.3;
-        margin: 0;
-        outline: 0 none;
-        padding: .2em .2em 0;
-        text-decoration: none;
-        display: flex;
-
-        li {
-            list-style-type: none;
-            margin-right: .4em;
-
-            a {
-                background-color: $background-color-secondary;
-                border-radius: 4px 4px 0 0;
-                color: #111;
-                display: inline-block;
-                padding: .5em 1em;
-                text-decoration: none;
-                white-space: nowrap;
-            }
-
-            &.active,
-            &:hover {
-                a {
-                    background-color: $background-color-primary;
-                    color: #fff;
-                }
-            }
-
-        }
-    }
-
-    .tabs-container {
-        border: 2px solid $background-color-primary;
-        border-radius: 4px;
-        display: block;
-        padding: 1em 1.4em;
-    }
-}
-
 .toptabs {
     margin-top: 5px;
-    .ui-tabs-panel {
-        fieldset {
-            box-shadow: none;
-        }
-    }
+}
+
+fieldset > .toptabs {
+    background-color: #F3F4F4;
+    padding: 1em;
 }
 
 .authref {
@@ -2998,7 +2839,7 @@ td.bundle {
     margin-bottom: 1em;
 
     a {
-        color: #069;
+        color: $green-text-color;
         font-weight: normal;
         text-decoration: underline;
 
@@ -3006,7 +2847,7 @@ td.bundle {
             &.jstree-hovered {
                 background: transparent none;
                 box-shadow: none;
-                color: #005580;
+                color: darken( $green-text-color, 5 );
             }
 
             &.jstree-clicked {
@@ -3102,7 +2943,9 @@ nav {
                 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;
@@ -3147,31 +2990,41 @@ nav {
 
 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,
@@ -3183,11 +3036,11 @@ button,
 /* Bootstrap Collapse */
 
 .panel {
-    background: #F4F8F9 none;
+    background: #F7F9F6 none;
     box-shadow: none;
 
     &:hover {
-        background: #e3f1df none;
+        background: #E3F1DF none;
     }
 }
 
@@ -3289,12 +3142,6 @@ button,
     }
 }
 
-.loggedout {
-    color: #004D99;
-    font-weight: bold;
-    padding: .4em .2em;
-}
-
 .navbar-fixed-bottom {
     .navbar-inner {
         min-height: 0;
@@ -3337,7 +3184,7 @@ button,
 }
 
 .separator {
-    color: #666;
+    color: #bfbfbf;
     padding: 0 .2em;
 }
 
@@ -3398,28 +3245,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;
+    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;
     }
 }
 
@@ -3437,24 +3289,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;
@@ -3484,28 +3348,35 @@ code {
 
 .tab-content {
     background-color: #fff;
-    border: 2px solid $background-color-primary;
-    border-radius: 4px;
+    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: $background-color-secondary;
-            border-radius: 4px 4px 0 0;
-            border-color: $background-color-secondary;
-            color: #111;
+            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: $background-color-primary;
-                border-color: $background-color-primary;
+                border: 2px solid $background-color-primary;
+                border-bottom: 0;
                 padding: .5em 1em;
                 text-decoration: none;
-                color: #FFFFFF;
             }
         }
 
@@ -3513,9 +3384,11 @@ code {
             a,
             a:hover,
             a:focus {
-                background-color: $background-color-primary;
-                color: #FFFFFF;
+                background-color: #FFF;
+                border: 2px solid #FFF;
+                color: #111;
                 cursor: default;
+                padding: .5em 1em;
             }
         }
     }
@@ -3665,7 +3538,7 @@ span {
     }
 
     &.circ-hlt {
-        color: #CC0000;
+        color: $warning-text-color;
         font-weight: bold;
     }
 
@@ -3680,7 +3553,7 @@ span {
     }
 
     &.required {
-        color: #C00;
+        color: $warning-text-color;
         font-style: italic;
         margin-left: .5em;
     }
@@ -3820,7 +3693,7 @@ input.renew {
 }
 
 .onsite_checkout {
-    color: #CC0000;
+    color: $warning-text-color;
 }
 
 .onsite-checkout-only {
@@ -4291,7 +4164,7 @@ input.renew {
         cursor: pointer;
 
         &:hover {
-            color: #004d99;
+            color: $green-text-color;
         }
     }
 }