Attachment 73478 Details for Bug 20427 – Bug 20427: Convert OPAC LESS to SCSS

[patch] Bug 20427: Convert OPAC LESS to SCSS

Bug-20427-Convert-OPAC-LESS-to-SCSS.patch (text/plain), 154.65 KB, created by Katrin Fischer on 2018-03-30 13:02:33 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Katrin Fischer

Created: 2018-03-30 13:02:33 UTC

Size: 154.65 KB

patch

obsolete

>From 8d65e92ac3b2eed41e1099f210c3615e65f32dd8 Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Thu, 15 Mar 2018 16:14:09 +0000
>Subject: [PATCH] Bug 20427: Convert OPAC LESS to SCSS
>
>This patch converts the OPAC LESS files to SCSS. In the process of
>converting opac.less (and other .less files) to .scss, I have improved
>the completeness of the nesting, reordered properties, and in general
>done cleanup based on rules in .scss-lint.yml. All of these changes
>should have no impact on the style of the OPAC.
>
>This patch modifies the commands used to compile CSS so that OPAC and
>staff assets can be processed separately:
>
>'yarn build' <-- Builds the staff client assets by default
>'yarn build --view opac' <-- Builds OPAC assets
>
>To test, apply the patch and compile the CSS by running the command
>above (or apply the follow-up patch with compiled CSS).
>
>Do a thorough review of the OPAC, taking care to cover as many pages as
>possible and checking responsive behavior at the same time. There should
>be no visual differences in the OPAC before and after applying the
>patch.
>
>Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>
>
>Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
>---
> .gitignore                                         |    1 +
> .scss-lint.yml                                     |  245 ++
> gulpfile.js                                        |   18 +-
> koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss |   10 +
> .../responsive.less => css/src/_responsive.scss}   |  327 ++-
> koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss    | 2977 ++++++++++++++++++++
> koha-tmpl/opac-tmpl/bootstrap/css/src/print.scss   |  251 ++
> .../src/right-to-left.scss}                        |  346 +--
> koha-tmpl/opac-tmpl/bootstrap/less/mixins.less     |   12 -
> koha-tmpl/opac-tmpl/bootstrap/less/opac.less       | 2641 -----------------
> koha-tmpl/opac-tmpl/bootstrap/less/print.less      |  245 --
> 11 files changed, 3853 insertions(+), 3220 deletions(-)
> create mode 100644 .scss-lint.yml
> create mode 100644 koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss
> rename koha-tmpl/opac-tmpl/bootstrap/{less/responsive.less => css/src/_responsive.scss} (56%)
> create mode 100644 koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
> create mode 100644 koha-tmpl/opac-tmpl/bootstrap/css/src/print.scss
> rename koha-tmpl/opac-tmpl/bootstrap/{less/right-to-left.less => css/src/right-to-left.scss} (63%)
> delete mode 100644 koha-tmpl/opac-tmpl/bootstrap/less/mixins.less
> delete mode 100644 koha-tmpl/opac-tmpl/bootstrap/less/opac.less
> delete mode 100644 koha-tmpl/opac-tmpl/bootstrap/less/print.less
>
>diff --git a/.gitignore b/.gitignore
>index 2a3d1d7a08..c70d94a1dd 100644
>--- a/.gitignore
>+++ b/.gitignore
>@@ -3,4 +3,5 @@
> /Makefile
> /pm_to_blib
> node_modules/
>+koha-tmpl/opac-tmpl/bootstrap/css/maps/
> koha-tmpl/intranet-tmpl/prog/css/maps/
>diff --git a/.scss-lint.yml b/.scss-lint.yml
>new file mode 100644
>index 0000000000..aec327331d
>--- /dev/null
>+++ b/.scss-lint.yml
>@@ -0,0 +1,245 @@
>+# Default application configuration that all configurations inherit from.
>+
>+scss_files: "**/*.scss"
>+plugin_directories: ['.scss-linters']
>+
>+# List of gem names to load custom linters from (make sure they are already
>+# installed)
>+plugin_gems: []
>+
>+# Default severity of all linters.
>+severity: warning
>+
>+linters:
>+  BangFormat:
>+    enabled: true
>+    space_before_bang: true
>+    space_after_bang: false
>+
>+  BemDepth:
>+    enabled: false
>+    max_elements: 1
>+
>+  BorderZero:
>+    enabled: true
>+    convention: zero # or `none`
>+
>+  ChainedClasses:
>+    enabled: false
>+
>+  ColorKeyword:
>+    enabled: false
>+
>+  ColorVariable:
>+    enabled: false
>+
>+  Comment:
>+    enabled: false
>+    style: silent
>+
>+  DebugStatement:
>+    enabled: true
>+
>+  DeclarationOrder:
>+    enabled: true
>+
>+  DisableLinterReason:
>+    enabled: false
>+
>+  DuplicateProperty:
>+    enabled: true
>+
>+  ElsePlacement:
>+    enabled: true
>+    style: same_line # or 'new_line'
>+
>+  EmptyLineBetweenBlocks:
>+    enabled: true
>+    ignore_single_line_blocks: true
>+
>+  EmptyRule:
>+    enabled: true
>+
>+  ExtendDirective:
>+    enabled: false
>+
>+  FinalNewline:
>+    enabled: true
>+    present: true
>+
>+  HexLength:
>+    enabled: false
>+    style:  short # or 'long'
>+
>+  HexNotation:
>+    enabled: true
>+    style: uppercase # or 'lowercase'
>+
>+  HexValidation:
>+    enabled: true
>+
>+  IdSelector:
>+    enabled: false
>+
>+  ImportantRule:
>+    enabled: true
>+
>+  ImportPath:
>+    enabled: true
>+    leading_underscore: false
>+    filename_extension: false
>+
>+  Indentation:
>+    enabled: true
>+    allow_non_nested_indentation: false
>+    character: space # or 'tab'
>+    width: 4
>+
>+  LeadingZero:
>+    enabled: true
>+    style: exclude_zero # or 'include_zero'
>+
>+  MergeableSelector:
>+    enabled: true
>+    force_nesting: true
>+
>+  NameFormat:
>+    enabled: true
>+    allow_leading_underscore: true
>+    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
>+
>+  NestingDepth:
>+    enabled: true
>+    max_depth: 4
>+    ignore_parent_selectors: false
>+
>+  PlaceholderInExtend:
>+    enabled: true
>+
>+  PrivateNamingConvention:
>+    enabled: false
>+    prefix: _
>+
>+  PropertyCount:
>+    enabled: false
>+    include_nested: false
>+    max_properties: 10
>+
>+  PropertySortOrder:
>+    enabled: true
>+    ignore_unspecified: false
>+    min_properties: 2
>+    separate_groups: false
>+
>+  PropertySpelling:
>+    enabled: true
>+    extra_properties: []
>+    disabled_properties: []
>+
>+  PseudoElement:
>+    enabled: true
>+
>+  QualifyingElement:
>+    enabled: true
>+    allow_element_with_attribute: false
>+    allow_element_with_class: false
>+    allow_element_with_id: false
>+
>+  SelectorDepth:
>+    enabled: true
>+    max_depth: 4
>+
>+  SelectorFormat:
>+    enabled: false
>+    convention: hyphenated_lowercase # or 'classic_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
>+
>+  Shorthand:
>+    enabled: true
>+    allowed_shorthands: [1, 2, 3, 4]
>+
>+  SingleLinePerProperty:
>+    enabled: true
>+    allow_single_line_rule_sets: false
>+
>+  SingleLinePerSelector:
>+    enabled: true
>+
>+  SpaceAfterComma:
>+    enabled: true
>+    style: one_space # or 'no_space', or 'at_least_one_space'
>+
>+  SpaceAfterComment:
>+    enabled: false
>+    style: one_space # or 'no_space', or 'at_least_one_space'
>+    allow_empty_comments: true
>+
>+  SpaceAfterPropertyColon:
>+    enabled: true
>+    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
>+
>+  SpaceAfterPropertyName:
>+    enabled: true
>+
>+  SpaceAfterVariableColon:
>+    enabled: false
>+    style: one_space # or 'no_space', 'at_least_one_space' or 'one_space_or_newline'
>+
>+  SpaceAfterVariableName:
>+    enabled: true
>+
>+  SpaceAroundOperator:
>+    enabled: true
>+    style: one_space # or 'at_least_one_space', or 'no_space'
>+
>+  SpaceBeforeBrace:
>+    enabled: true
>+    style: space # or 'new_line'
>+    allow_single_line_padding: false
>+
>+  SpaceBetweenParens:
>+    enabled: true
>+    spaces: 1
>+
>+  StringQuotes:
>+    enabled: true
>+    style: double_quotes # or single_quotes
>+
>+  TrailingSemicolon:
>+    enabled: true
>+
>+  TrailingWhitespace:
>+    enabled: true
>+
>+  TrailingZero:
>+    enabled: false
>+
>+  TransitionAll:
>+    enabled: false
>+
>+  UnnecessaryMantissa:
>+    enabled: true
>+
>+  UnnecessaryParentReference:
>+    enabled: true
>+
>+  UrlFormat:
>+    enabled: true
>+
>+  UrlQuotes:
>+    enabled: true
>+
>+  VariableForProperty:
>+    enabled: false
>+    properties: []
>+
>+  VendorPrefix:
>+    enabled: true
>+    identifier_list: base
>+    additional_identifiers: []
>+    excluded_identifiers: []
>+
>+  ZeroUnit:
>+    enabled: true
>+
>+  Compass::*:
>+    enabled: false
>diff --git a/gulpfile.js b/gulpfile.js
>index 2a868e10c8..ecc87b1460 100644
>--- a/gulpfile.js
>+++ b/gulpfile.js
>@@ -26,28 +26,36 @@ var sassOptions = {
>     precision: 3
> }
> 
>+if( gutil.env.view == "opac" ){
>+    var css_base = OPAC_CSS_BASE;
>+    var js_base = OPAC_JS_BASE;
>+} else {
>+    var css_base = STAFF_JS_BASE;
>+    var js_base = STAFF_CSS_BASE;
>+}
>+
> gulp.task( "default", ['watch'] );
> 
> // CSS processing for development
> gulp.task('css', function() {
>-    return gulp.src( STAFF_CSS_BASE + "/src/**/*.scss" )
>+    return gulp.src( css_base + "/src/**/*.scss" )
>       .pipe(sourcemaps.init())
>       .pipe(sass( sassOptions ).on('error', sass.logError))
>       .pipe(autoprefixer())
>       .pipe(sourcemaps.write('./maps'))
>-      .pipe(gulp.dest( STAFF_CSS_BASE ));
>+      .pipe(gulp.dest( css_base ));
> });
> 
> // CSS processing for production
> 
> gulp.task('build', function() {
>-    return gulp.src( STAFF_CSS_BASE + "/src/**/*.scss" )
>+    return gulp.src( css_base + "/src/**/*.scss" )
>       .pipe(sass( sassOptions ).on('error', sass.logError))
>       .pipe(autoprefixer())
>       .pipe(cssnano())
>-      .pipe(gulp.dest( STAFF_CSS_BASE ));
>+      .pipe(gulp.dest( css_base ));
> });
> 
> gulp.task('watch', function(){
>-    gulp.watch( STAFF_CSS_BASE + "/src/**/*.scss", ['css'] );
>+    gulp.watch( css_base + "/src/**/*.scss", ['css'] );
> });
>\ No newline at end of file
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss
>new file mode 100644
>index 0000000000..73ee84cf1d
>--- /dev/null
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss
>@@ -0,0 +1,10 @@
>+$color: #999999;
>+$links: #0076B2;
>+
>+@mixin shadowed {
>+    box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .2 );
>+}
>+
>+@mixin border-radius-all( $radius: 3px ) {
>+    border-radius: $radius;
>+}
>\ No newline at end of file
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/less/responsive.less b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
>similarity index 56%
>rename from koha-tmpl/opac-tmpl/bootstrap/less/responsive.less
>rename to koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
>index 2df6bf56a7..832bbf3594 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/less/responsive.less
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
>@@ -1,60 +1,48 @@
>-@import "mixins.less";
>-@media only screen and (min-width: 0px) and (max-width: 304px) {
>+@import "mixins";
>+
>+@media only screen and ( min-width: 0 ) and ( max-width: 304px ) {
>     /* Screens bewteen 0 and 304 pixels wide */
>-    #oh:after {
>-            content: "(min-width: 0px) and (max-width: 304px)";
>-    }
>     input,
>     select,
>     textarea {
>-        width : auto;
>-        max-width : 11em;
>+        max-width: 11em;
>+        width: auto;
>     }
> }
> 
>-@media only screen and (min-width: 0px) and (max-width: 390px){
>+@media only screen and ( min-width: 0 ) and ( max-width: 390px ){
>     /* Screens bewteen 0 and 390 pixels wide */
>-    #oh:after {
>-            content: "(min-width: 0px) and (max-width: 390px)";
>-    }
>     .ui-tabs .ui-tabs-nav li a,
>     .statictabs li a {
>         padding: .1em .5em;
>     }
>-    .input-fluid {
>-        width : 90%;
>-    }
>-}
> 
>-@media only screen and (min-width: 305px) and (max-width: 341px) {
>-    /* Screens bewteen 305 and 341 pixels wide */
>-    #oh:after {
>-            content: "(min-width: 305px) and (max-width: 341px)";
>+    .input-fluid {
>+        width: 90%;
>     }
> }
> 
>-@media only screen and (min-width: 342px) and (max-width: 479px) {
>+@media only screen and ( min-width: 342px ) and ( max-width: 479px ) {
>     /* Screens bewteen 342 and 479 pixels wide */
>-    #oh:after {
>-            content: "(min-width: 342px) and (max-width: 479px)";
>-    }
>     .input-fluid {
>-        width : 75%;
>+        width: 75%;
>     }
>+
>     .searchsuggestion {
>         display: block;
>     }
> }
> /* Override Bootstrap Responsive CSS fixed navbar */
>-@media (max-width: 979px) {
>-  .navbar-fixed-top,
>-  .navbar-fixed-bottom {
>-      position: fixed;
>-      margin-left: 0px;
>-      margin-right: 0px;
>-  }
>+@media ( max-width: 979px ) {
>+    .navbar-fixed-top,
>+    .navbar-fixed-bottom {
>+        margin-left: 0;
>+        margin-right: 0;
>+        position: fixed;
>+    }
> }
>-@media only screen and (max-width: 608px) {
>+
>+@media only screen and ( max-width: 608px ) {
>     /* Screens below 608 pixels wide */
>     fieldset {
>         &.rows {
>@@ -63,30 +51,38 @@
>                 float: none;
>                 text-align: left;
>             }
>+
>             li {
>-                padding-bottom : .5em;
>+                padding-bottom: .5em;
>             }
>+
>             ol {
>-                margin-left : 0;
>+                margin-left: 0;
>             }
>+
>             .hint {
>                 margin-left: 0;
>             }
>         }
>     }
>+
>     body {
>         padding: 0;
>     }
>+
>     .tdlabel {
>         display: inline;
>     }
>+
>     .navbar-fixed-top,
>     .navbar-static-top {
>-        margin : 0;
>+        margin: 0;
>     }
>+
>     .navbar-inner {
>-        padding : 0;
>+        padding: 0;
>     }
>+
>     .checkall,
>     .clearall,
>     .highlight_controls,
>@@ -96,388 +92,423 @@
>     #remove-selected {
>         display: none;
>     }
>+
>     .table td.bibliocol {
>         padding-left: 1.3em;
>     }
>+
>     .actions {
>         display: block;
>-        a, #login4tags {
>+
>+        a,
>+        #login4tags {
>+            @include border-radius-all( 4px );
>             background-color: #F2F2EF;
>-            border : 1px solid #DDD;
>-            .border-radius-all(4px);
>-            font-weight: bold;
>+            border: 1px solid #DDD;
>             display: block;
>             font-size: 120%;
>+            font-weight: bold;
>             margin: 2px 0;
>         }
>+
>         .label {
>             display: block;
>             font-weight: bold;
>         }
>+
>         #login4tags {
>             margin-right: 1em;
>         }
>     }
>+
>     #opac-main-search {
>         button,
>         input,
>         select,
>         .librarypulldown .transl1,
>         .input-append {
>+            @include border-radius-all( 5px );
>             box-sizing: border-box;
>             display: block;
>             height: 120%;
>-            width : 97%;
>+            margin: .5em 0;
>             max-width: 100%;
>-            margin : .5em 0;
>-            .border-radius-all(5px);
>+            width: 97%;
>         }
>+
>         .input-append {
>-            margin : 0;
>+            margin: 0;
>             width: 100%;
>         }
>+
>         .librarypulldown .transl1 {
>-            width : 94.5%;
>+            width: 94.5%;
>         }
>     }
>+
>     #toolbar .resort {
>-        font-size : 14px;
>+        @include border-radius-all( 5px );
>+        font-size: 14px;
>+        margin: .5em 0;
>         max-width: 100%;
>-        margin : .5em 0;
>-        padding : 4px 6px;
>-        .border-radius-all(5px);
>+        padding: 4px 6px;
>     }
>+
>     .mastheadsearch {
>-        margin : 0;
>-        .border-radius-all(0px);
>+        @include border-radius-all( 0 );
>+        margin: 0;
> 
>     }
>+
>     .main {
>-        margin : .5em 0;
>-        padding : 15px;
>-        .border-radius-all(0px);
>+        @include border-radius-all( 0 );
>+        margin: .5em 0;
>+        padding: 15px;
>     }
>+
>     .breadcrumb {
>-        margin : 10px 0;
>+        margin: 10px 0;
>     }
>+
>     #moresearches {
>         text-align: center;
>     }
>+
>     #searchsubmit {
>         font-weight: bold;
>     }
>+
>     .ui-tabs-panel,
>     .tabs-container,
>     #topissues,
>     #usertags,
>     #usersuggestions {
>         .item-thumbnail {
>-            margin : .5em 0 0 .5em;
>+            margin: .5em 0 0 .5em;
>         }
>+
>         .table-bordered {
>-            border : none;
>+            border: 0;
>         }
>+
>         .table {
>             th,
>             thead {
>                 display: none;
>             }
>+
>             td {
>-                border-right : 1px solid #dddddd;
>-                border-left : 1px solid #dddddd;
>-                border-top : 0;
>-                display : block;
>-                padding : .2em;
>+                border-left: 1px solid #DDDDDD;
>+                border-right: 1px solid #DDDDDD;
>+                border-top: 0;
>+                display: block;
>+                padding: .2em;
>             }
>+
>             p {
>-                margin-bottom : 2px;
>+                margin-bottom: 2px;
>             }
>         }
>+
>         tr {
>             display: block;
>-            margin-bottom : .6em;
>+            margin-bottom: .6em;
>+
>             td:first-child {
>-                border-top : 1px solid #dddddd;
>                 border-radius: 5px 5px 0 0;
>+                border-top: 1px solid #DDDDDD;
>             }
>+
>             td:last-child {
>+                border-bottom: 2px solid #CACACA;
>                 border-radius: 0 0 5px 5px;
>-                border-bottom : 2px solid #CACACA;
>             }
>         }
>     }
>+
>     .no-image {
>-        display : none;
>+        display: none;
>     }
> }
> 
>-@media only screen and (max-width: 700px) {
>+@media only screen and ( max-width: 700px ) {
>     /* Screens below 700 pixels wide */
>     #opac-main-search {
>         label {
>             display: none;
>         }
>     }
>+
>     #logo {
>-        background: transparent url("../lib/bootstrap/img/glyphicons-halflings-white.png") no-repeat;
>+        background: transparent url( "../lib/bootstrap/img/glyphicons-halflings-white.png" ) no-repeat;
>         background-position: 0 -24px;
>         margin: 14px 14px 0 14px;
>         width: 14px;
>+
>         a {
>-            padding:14px 0 0;
>-            width:14px;
>+            padding: 14px 0 0;
>+            width: 14px;
>         }
>     }
>+
>     #user-menu-trigger {
>         display: inline;
>-        margin-right : 12px;
>+        margin-right: 12px;
>     }
>+
>     #members {
>+        clear: both;
>         display: none;
>-        clear : both;
>+
>         li {
>+            border-bottom: 1px solid #555;
>             padding-right: 20px;
>             text-align: right;
>-            border-bottom : 1px solid #555;
>+
>             &:first-child {
>-                border-top : 1px solid #555;
>+                border-top: 1px solid #555;
>             }
>+
>             &:last-child {
>-                border-bottom : none;
>+                border-bottom: 0;
>             }
>         }
>+
>         .nav {
>             float: none;
>+
>+            > li {
>+                float: none;
>+            }
>+
>             &.pull-right {
>                 float: none;
>             }
>         }
>-        .nav>li {
>-            float: none;
>-        }
>+
>         .divider-vertical {
>-            border : 0;
>-            height : 0;
>-            margin : 0;
>+            border: 0;
>+            height: 0;
>+            margin: 0;
>         }
>     }
> }
> 
>-@media only screen and (min-width: 480px) and (max-width: 608px) {
>+@media only screen and ( min-width: 480px ) and ( max-width: 608px ) {
>     /* Screens between 480 and 608 pixels wide */
>-    #oh:after {
>-            content: " Between 480 pixels and 608 pixels. ";
>-    }
>     .input-fluid {
>-        width : 75%;
>+        width: 75%;
>     }
> }
> 
>-@media only screen and (min-width: 608px) {
>+@media only screen and ( min-width: 608px ) {
>     #views {
>-        border-bottom : 1px solid #D6D6D6;
>+        border-bottom: 1px solid #D6D6D6;
>         margin: 0;
>         padding: 0;
>-        white-space : nowrap;
>+        white-space: nowrap;
>     }
>+
>     .view {
>+        border-bottom-width: 0;
>         border-radius: 0;
>         border-right-width: 0;
>         border-top-width: 0;
>-        border-bottom-width: 0;
>     }
> 
>     .current-view {
>         border: 0;
>-        -webkit-box-shadow: none;
>-        -moz-box-shadow:    none;
>-        box-shadow:         none;
>+        box-shadow: none;
>     }
> }
> 
>-@media only screen and (min-width: 608px) and (max-width: 767px) {
>+@media only screen and ( min-width: 608px ) and ( max-width: 767px ) {
>     /* Screens between 608 and 767 pixels wide */
>-    #oh:after {
>-            content: " Between 608 pixels and 767 pixels. ";
>-    }
>     .main {
>-        padding: 0.8em 20px;
>+        padding: .8em 20px;
>     }
>+
>     .breadcrumb {
>-        margin : 10px 0;
>+        margin: 10px 0;
>     }
>+
>     .navbar-static-bottom {
>-        margin-left : -20px;
>-        margin-right : -20px;
>+        margin-left: -20px;
>+        margin-right: -20px;
>     }
>+
>     .row-fluid input.span6 {
>         width: 48.9362%;
>     }
> }
> 
>-@media only screen and (max-width: 767px) {
>+@media only screen and ( max-width: 767px ) {
>     /* Screens below 767 pixels wide */
>     a {
>         &.title {
>             font-size: 120%;
>         }
>     }
>+
>     #userresults {
>-        margin : 0 -20px;
>+        margin: 0 -20px;
>     }
>+
>     .breadcrumb,
>     #top-pages,
>     .menu-collapse {
>         display: none;
>     }
>+
>     #search-facets,
>     #menu {
>         margin-bottom: .5em;
>+
>         h4 {
>             display: block;
>-            margin : 0;
>-            padding : 0;
>+            margin: 0;
>+            padding: 0;
>+
>             a {
>-                .border-radius-all(7px);
>+                @include border-radius-all( 7px );
>                 border-bottom: 0;
>                 font-weight: normal;
>                 padding: .7em .2em;
>             }
>         }
>+
>         ul {
>             padding: 0;
>         }
>     }
>+
>     #menu {
>         li {
>             a {
>-                .border-radius-all(0px);
>-                border : 0;
>+                @include border-radius-all( 0 );
>+                border: 0;
>+                border-bottom: 1px solid #D8D8D8;
>                 display: block;
>                 font-size: 120%;
>-                text-decoration: none;
>-                border-bottom: 1px solid #D8D8D8;
>                 margin: 0;
>+                text-decoration: none;
>             }
>+
>             &.active {
>                 a {
>-                    border-top: 1px solid #D8D8D8;
>                     border-right-width: 1px;
>+                    border-top: 1px solid #D8D8D8;
>                 }
>             }
>+
>             &:last-child {
>                 a {
>-                    -webkit-border-radius: 0 0 7px 7px;
>-                       -moz-border-radius: 0 0 7px 7px;
>-                            border-radius: 0 0 7px 7px;
>+                    border-radius: 0 0 7px 7px;
>                 }
>             }
>         }
>     }
>+
>     #search-facets {
>         li {
>-            padding : .4em;
>+            padding: .4em;
>         }
>+
>         h5 {
>             margin: .2em;
>         }
>     }
>+
>     #menu h4 a.menu-open,
>     #search-facets h4 a.menu-open {
>-        -webkit-border-radius: 7px 7px 0 0;
>-           -moz-border-radius: 7px 7px 0 0;
>-                border-radius: 7px 7px 0 0;
>         border-bottom: 1px solid #D8D8D8;
>+        border-radius: 7px 7px 0 0;
>     }
> }
> 
>-@media only screen and (max-width: 800px) {
>+@media only screen and ( max-width: 800px ) {
>     /* Screens below 800 pixels wide */
>     .cartlabel,
>     .listslabel {
>         display: none;
>     }
>+
>     .navbar {
>         .divider-vertical {
>-            margin : 0 2px;
>+            margin: 0 2px;
>         }
>+
>         #members {
>             .divider-vertical {
>-                margin : 0 9px;
>+                margin: 0 9px;
>             }
>         }
>     }
> }
> 
>-@media only screen and (min-width: 768px) {
>+@media only screen and ( min-width: 768px ) {
>     /* Screens above 768 pixels wide */
>     .main {
>         margin-left: 20px;
>         margin-right: 20px;
>     }
>+
>     #menu {
>-        border : 0;
>-        .border-radius-all(0px);
>-        border-right : 1px solid #D8D8D8;
>+        @include border-radius-all( 0 );
>+        border: 0;
>+        border-right: 1px solid #D8D8D8;
>+
>         h4 {
>             display: none;
>         }
>+
>         ul {
>             padding: 1em 0 1em 0;
>         }
>     }
>+
>     #didyoumean {
>         margin: 0;
>     }
>+
>     .searchsuggestion {
>         white-space: nowrap;
>     }
> }
> 
>-@media only screen and (min-width: 768px) and (max-width: 984px) {
>+@media only screen and ( min-width: 768px ) and ( max-width: 984px ) {
>     /* Screens between 768 and 984 pixels wide */
>-    #oh:after {
>-            content: " Between 768 and 984 pixels. ";
>-    }
>     .librarypulldown .transl1 {
>-        width : 38%;
>+        width: 38%;
>     }
> }
> 
>-@media only screen and (max-width: 984px) {
>-    /* Screens up to 984 pixels wide */
>-    // #oh:after {
>-    //         content: " Below 984 pixels. ";
>-    // }
>-}
>-
>-@media only screen and (min-width: 984px) {
>+@media only screen and ( min-width: 984px ) {
>     /* Screens above 969 pixels wide */
>-    #oh:after {
>-            content: " Above 984 pixels. ";
>-    }
>     .librarypulldown .transl1 {
>-        width : 53%;
>+        width: 53%;
>     }
> 
> }
> 
>-@media only screen and (max-width: 1040px) {
>+@media only screen and ( max-width: 1040px ) {
>     .pg_menu {
>         li {
>             a {
>                 float: none;
>-                text-align : left;
>+                text-align: left;
>             }
>+
>             &.back_results {
>                 a {
>-                    border : 1px solid #D0D0D0;
>-                    border-width : 1px 0 1px 0;
>+                    border: 1px solid #D0D0D0;
>+                    border-width: 1px 0 1px 0;
>                 }
>             }
>         }
>     }
>+
>     #ulactioncontainer {
>-        min-width : 0;
>+        min-width: 0;
>     }
> }
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>new file mode 100644
>index 0000000000..dec30075b3
>--- /dev/null
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>@@ -0,0 +1,2977 @@
>+@import "mixins";
>+
>+body {
>+    background-color: #EAEAE6;
>+}
>+
>+/* Sticky footer styles */
>+html,
>+body {
>+    height: 100%;
>+    /* The html and body elements cannot have any padding or margin. */
>+}
>+
>+.no-js {
>+    .dateformat {
>+        display: inline;
>+        white-space: nowrap;
>+    }
>+
>+    .modal-body {
>+        padding: 0;
>+    }
>+
>+    .selections-toolbar {
>+        display: none;
>+    }
>+}
>+
>+.js {
>+    .dateformat {
>+        display: none;
>+    }
>+}
>+
>+/* Wrapper for page content to push down footer */
>+#wrap {
>+    height: auto !important;
>+    height: 100%;
>+    min-height: 100%;
>+    /* Negative indent footer by it's height */
>+    // margin: 0 auto -60px;
>+}
>+
>+#changelanguage {
>+    /* Set the fixed height of the footer here */
>+    // height: 60px;
>+    .nav {
>+        > .active {
>+            > p {
>+                padding: 0 15px;
>+            }
>+        }
>+    }
>+}
>+
>+.popup {
>+    padding-left: 0;
>+    padding-right: 0;
>+
>+    .main {
>+        font-size: 90%;
>+        padding: 0 1em;
>+    }
>+
>+    legend {
>+        line-height: 1.5em;
>+        margin-bottom: .5em;
>+    }
>+}
>+
>+a {
>+    color: $links;
>+
>+    &.cancel {
>+        padding-left: 1em;
>+    }
>+
>+    &:visited {
>+        color: $links;
>+    }
>+
>+    &.title {
>+        font-size: 108%;
>+        font-weight: bold;
>+    }
>+
>+    &.btn {
>+        &:visited {
>+            color: #333;
>+        }
>+    }
>+
>+    &.btn-primary {
>+        &:visited {
>+            color: #FFF;
>+        }
>+    }
>+
>+    &.login-link {
>+        color: #A6D8ED;
>+        font-weight: bold;
>+    }
>+
>+    &.listmenulink {
>+        &:link,
>+        &:visited {
>+            color: #0076B2;
>+            font-weight: bold;
>+        }
>+
>+        &:hover,
>+        &:active {
>+            color: #FFF;
>+            font-weight: bold;
>+        }
>+    }
>+
>+    .idreambooksrating {
>+        color: #29ADE4;
>+        font-size: 30px;
>+        line-height: 30px;
>+        padding-left: 85px;
>+        text-decoration: none;
>+    }
>+
>+    &.reviewlink,
>+    &.reviewlink:visited {
>+        color: black;
>+        font-weight: normal;
>+        text-decoration: none;
>+    }
>+
>+    &.addtocart {
>+        @extend %initial_icon;
>+        background-position: -5px -265px; /* Cart */
>+        padding-left: 35px;
>+    }
>+
>+    &.addtoshelf {
>+        @extend %initial_icon;
>+        background-position: -5px -225px; /* Virtual shelf */
>+        padding-left: 35px;
>+    }
>+
>+    &.brief {
>+        @extend %initial_icon;
>+        background-position: -2px -868px; /* Zoom out */
>+        padding-left: 27px;
>+    }
>+
>+    &.deleteshelf {
>+        @extend %initial_icon;
>+
>+        &.disabled {
>+            @extend %initial_icon;
>+        }
>+    }
>+
>+    &.detail {
>+        @extend %initial_icon;
>+        background-position: -2px -898px; /* Zoom in */
>+        padding-left: 27px;
>+    }
>+
>+    &.download {
>+        @extend %initial_icon;
>+        background-position: -5px -348px; /* Download */
>+        padding-left: 20px;
>+    }
>+
>+    &.editshelf {
>+        @extend %initial_icon;
>+        background-position: 2px -348px; /* List edit */
>+        padding-left: 26px;
>+    }
>+
>+    &.empty {
>+        @extend %initial_icon;
>+        background-position: 2px -598px; /* Trash */
>+        padding-left: 30px;
>+    }
>+
>+    &.hide {
>+        @extend %initial_icon;
>+        background-position: -3px -814px; /* Close */
>+        padding-left: 26px;
>+    }
>+
>+    &.highlight_toggle {
>+        @extend %initial_icon;
>+        background-position: -5px -841px; /* Highlight */
>+        display: none;
>+        padding-left: 35px;
>+    }
>+
>+    &.hold {
>+        @extend %initial_icon;
>+        background-position: -2px -453px; /* Toolbar place hold */
>+        padding-left: 23px;
>+
>+        &.disabled {
>+            @extend %initial_icon;
>+            background-position: -5px -621px; /* Place hold disabled */
>+        }
>+    }
>+
>+    &.incart {
>+        @extend %initial_icon;
>+        background-position: -5px -265px; /* Cart */
>+        color: #666;
>+        padding-left: 35px;
>+    }
>+
>+    &.new {
>+        @extend %initial_icon;
>+        background-image: url( "../images/sprite.png" ); /* New */
>+        background-position: -4px -922px;
>+        padding-left: 23px;
>+    }
>+
>+    &.print-small {
>+        @extend %initial_icon;
>+        background-position: 0 -423px; /* Toolbar print */
>+        padding-left: 30px;
>+    }
>+
>+    &.print-large {
>+        @extend %initial_icon;
>+        background-position: -5px -186px; /* Toolbar print */
>+        padding-left: 35px;
>+    }
>+
>+    &.removeitems {
>+        @extend %initial_icon;
>+        background-position: 2px -690px; /* Delete */
>+        padding-left: 25px;
>+
>+        &.disabled {
>+            @extend %initial_icon;
>+            background-position: 2px -712px; /* Delete disabled */
>+        }
>+    }
>+
>+    &.reserve {
>+        @extend %initial_icon;
>+        background-position: -6px -144px; /* Place hold */
>+        padding-left: 35px;
>+    }
>+
>+    &.article_request {
>+        @extend %initial_icon;
>+        background-position: 0 -24px; /* Place article request */
>+        padding-left: 35px;
>+    }
>+
>+    &.send {
>+        @extend %initial_icon;
>+        background-position: 2px -386px; /* Email */
>+        padding-left: 28px;
>+    }
>+
>+    &.tag_add {
>+        @extend %initial_icon;
>+        background-position: 3px -1111px; /* Tag results */
>+        padding-left: 27px;
>+    }
>+
>+    &.removefromlist {
>+        @extend %initial_icon;
>+    }
>+}
>+
>+h1 {
>+    font-size: 140%;
>+    line-height: 150%;
>+
>+    &#libraryname {
>+        background: transparent url( "../images/logo-koha.png" ) no-repeat scroll 0%;
>+        border: 0;
>+        float: left !important;
>+        margin: 0;
>+        padding: 0;
>+        width: 120px;
>+
>+        a {
>+            border: 0;
>+            cursor: pointer;
>+            display: block;
>+            height: 0 !important;
>+            margin: 0;
>+            overflow: hidden;
>+            padding: 40px 0 0;
>+            text-decoration: none;
>+            width: 120px;
>+        }
>+    }
>+}
>+
>+h2 {
>+    font-size: 130%;
>+    line-height: 150%;
>+}
>+
>+h3 {
>+    font-size: 120%;
>+    line-height: 150%;
>+}
>+
>+h4 {
>+    font-size: 110%;
>+}
>+
>+h5 {
>+    font-size: 100%;
>+}
>+
>+caption {
>+    font-size: 120%;
>+    font-weight: bold;
>+    margin: 0;
>+    text-align: left;
>+}
>+
>+input,
>+textarea {
>+    width: auto;
>+}
>+
>+.input-fluid {
>+    width: 50%;
>+}
>+
>+legend {
>+    font-size: 110%;
>+    font-weight: bold;
>+}
>+
>+table {
>+    font-size: 90%;
>+}
>+
>+table,
>+td {
>+    background-color: #FFF;
>+}
>+
>+td {
>+    img {
>+        max-width: none;
>+    }
>+
>+    &.overdue {
>+        color: #CC3333;
>+    }
>+
>+    .sum {
>+        background-color: #FFC;
>+        font-weight: bold;
>+    }
>+
>+    .btn {
>+        white-space: nowrap;
>+    }
>+
>+    .btn-link {
>+        padding: 0;
>+    }
>+}
>+
>+th {
>+    background-color: #ECEDE6;
>+
>+    &.sum {
>+        text-align: right;
>+    }
>+
>+    &[scope=row] {
>+        background-color: transparent;
>+        text-align: right;
>+    }
>+}
>+
>+#advsearches,
>+#booleansearch {
>+    label {
>+        display: inline;
>+    }
>+}
>+
>+#basketcount {
>+    display: inline;
>+    margin: 0;
>+    padding: 0;
>+
>+    span {
>+        @include border-radius-all( 3px );
>+        background-color: #FFC;
>+        color: #000;
>+        display: inline;
>+        font-size: 80%;
>+        font-weight: normal;
>+        margin: 0 0 0 .9em;
>+        padding: 0 .3em;
>+    }
>+}
>+
>+
>+#members {
>+    display: block;
>+
>+    p {
>+        color: #EEE;
>+    }
>+
>+    a {
>+        &.logout {
>+            color: #E8583C;
>+            font-weight: bold;
>+            padding: 0 .3em;
>+        }
>+    }
>+}
>+
>+#koha_url {
>+    p {
>+        color: #666666;
>+        float: right;
>+        margin: 0;
>+    }
>+}
>+
>+#moresearches {
>+    margin: .5em 0;
>+    padding: 0 .8em;
>+
>+    li {
>+        display: inline;
>+        white-space: nowrap;
>+
>+        &::after {
>+            content: " | ";
>+        }
>+
>+        &:last-child {
>+            &::after {
>+                content: "";
>+            }
>+        }
>+
>+    }
>+
>+    ul {
>+        margin: 0;
>+    }
>+}
>+
>+#news {
>+    margin: .5em 0;
>+}
>+
>+.newscontainer {
>+    border: 1px solid #DDD;
>+    border-bottom-width: 0;
>+    border-top-left-radius: 5px;
>+    border-top-right-radius: 5px;
>+}
>+
>+.newsheader {
>+    background-color: #ECEDE6;
>+    border-bottom: 1px solid #DDD;
>+    margin: 0;
>+    padding: 8px;
>+}
>+
>+.newsbody {
>+    padding: 8px;
>+}
>+
>+.newsfooter {
>+    border-bottom: 1px solid #DDD;
>+    font-style: italic;
>+    padding: 4px 8px;
>+}
>+
>+#opacheader {
>+    background-color: #DDD;
>+}
>+
>+#selections,
>+.selections {
>+    font-weight: bold;
>+}
>+
>+.actions {
>+    a {
>+        background-repeat: no-repeat;
>+        margin-right: 1em;
>+        text-decoration: none;
>+        white-space: nowrap;
>+
>+        &.hold {
>+            background-image: url( "../images/sprite.png" ); /* Place hold small */
>+            background-position: -5px -542px;
>+            padding-left: 21px;
>+        }
>+
>+        &.article_request {
>+            background-image: url( "../images/sprite.png" ); /* Place hold small */
>+            background-position: -2px -26px;
>+            padding-left: 21px;
>+        }
>+
>+        &.addtocart {
>+            background-image: url( "../images/sprite.png" ); /* Cart small */
>+            background-position: -5px -572px;
>+            padding-left: 20px;
>+        }
>+
>+        &.addtoshelf {
>+            background-image: url( "../images/sprite.png" ); /* MARC view */
>+            background-position: -5px -27px;
>+            padding-left: 20px;
>+        }
>+
>+        &.addtolist {
>+            background-position: -5px -27px;
>+            padding-left: 20px;
>+        }
>+
>+        &.tag_add {
>+            background-position: -5px -1110px;
>+            padding-left: 20px;
>+        }
>+
>+        /* List contents remove from list link */
>+        &.removefromlist {
>+            background-position: -8px -690px; /* Delete */
>+            padding-left: 15px;
>+        }
>+    }
>+}
>+
>+/* Override Bootstrap alert */
>+.alert {
>+    background: linear-gradient( to bottom, #FFFBE5 0%, #FFF0B2 9%, #FFF1A8 89%, #F7E665 100% );
>+    border-color: #D6C43B;
>+    color: #333;
>+
>+    /* Redefine a new style for Bootstrap's class "close" since we use that already */
>+    /* Use <a class="closebtn" href="#">&times;</a> */
>+
>+    .closebtn {
>+        line-height: 20px;
>+        position: relative;
>+        right: -21px;
>+        top: -2px;
>+    }
>+}
>+
>+/* Override Bootstrap alert.alert-info */
>+.alert-info {
>+    background: linear-gradient( to bottom, #F4F6FA 0%, #EAEEF5 4%, #E8EDF6 96%, #CDDBF2 100% );
>+    border-color: #C5D1E5;
>+    color: #333;
>+}
>+
>+/* Override Bootstrap alert.alert-success */
>+.alert-success {
>+    background: linear-gradient( to bottom, #F8FFE8 0%, #E3F5AB 4%, #DCF48D 98%, #9EBF28 100% );
>+    border-color: #9FBA35;
>+    color: #333;
>+}
>+
>+.breadcrumb {
>+    @include border-radius-all( 7px );
>+    background-color: #F2F2EF;
>+    font-size: 85%;
>+    list-style: none outside none;
>+    margin: 10px 20px;
>+    padding: 5px 10px;
>+}
>+
>+.form-inline {
>+    display: inline;
>+    margin: 0;
>+    padding: 0;
>+
>+    fieldset {
>+        margin: .3em 0;
>+        padding: .3em;
>+    }
>+}
>+
>+.main {
>+    @include border-radius-all( 7px );
>+    @include shadowed;
>+    background-color: #FFF;
>+    border: 1px solid #D2D2CF;
>+    margin-bottom: .5em;
>+    margin-top: .5em;
>+}
>+
>+.mastheadsearch {
>+    @include border-radius-all( 7px );
>+    background: linear-gradient( to bottom, #C7C7C1 38%, #A7A7A2 100% );
>+    margin: .5em 0;
>+    padding: .8em;
>+
>+    label {
>+        font-size: 115%;
>+        font-weight: bold;
>+    }
>+}
>+
>+.navbar-inverse {
>+    .brand {
>+        color: #9FE1FF;
>+        font-weight: bold;
>+    }
>+
>+    .nav {
>+        > li {
>+            > a {
>+                color: #9FE1FF;
>+                font-weight: bold;
>+            }
>+        }
>+    }
>+}
>+
>+.navbar-fixed-bottom {
>+    &.navbar-static-bottom {
>+        margin-top: .5em;
>+        position: static;
>+    }
>+}
>+
>+.table-striped tbody > tr:nth-child(odd) > td,
>+.table-striped tbody > tr:nth-child(odd) > th {
>+    background-color: #F4F4F4;
>+}
>+
>+
>+/* jQuery UI standard tabs */
>+.ui-tabs-nav .ui-tabs-active a,
>+.ui-tabs-nav a:hover,
>+.ui-tabs-nav a:focus,
>+.ui-tabs-nav a:active,
>+.ui-tabs-nav span.a {
>+    background: none repeat scroll 0 0 transparent;
>+    outline: 0 none;
>+}
>+
>+.ui-widget,
>+.ui-widget input,
>+.ui-widget select,
>+.ui-widget textarea,
>+.ui-widget button {
>+    font-family: inherit;
>+    font-size: inherit;
>+}
>+
>+ul {
>+    &.ui-tabs-nav {
>+        li {
>+            list-style: none;
>+        }
>+    }
>+}
>+
>+.ui-tabs {
>+    .ui-tabs-nav {
>+        li {
>+            background: #F3F3F3 none;
>+            border-color: #D8D8D8;
>+            margin-right: .4em;
>+
>+            &.ui-tabs-active {
>+                background-color: #FFF;
>+                border: 1px solid #D8D8D8;
>+                border-bottom: 0;
>+
>+                a {
>+                    color: #000;
>+                    font-weight: bold;
>+                }
>+
>+                &.ui-state-hover {
>+                    background: #FFF none;
>+                }
>+            }
>+
>+            &.ui-state-default.ui-state-hover {
>+                background: #F3F3F3 none;
>+            }
>+        }
>+    }
>+
>+    .ui-tabs-panel {
>+        border: 1px solid #D8D8D8;
>+        margin-bottom: 1em;
>+    }
>+
>+    &.ui-widget-content {
>+        background: transparent none;
>+        border: 0;
>+    }
>+
>+    .ui-state-default {
>+        a {
>+            color: #006699;
>+
>+            &:link {
>+                color: #006699;
>+            }
>+
>+            &:visited {
>+                color: #006699;
>+            }
>+        }
>+    }
>+
>+    .ui-state-hover a {
>+        color: #990033;
>+
>+        &:link {
>+            color: #990033;
>+        }
>+
>+        &:visited {
>+            color: #990033;
>+        }
>+    }
>+}
>+
>+.ui-tabs-nav {
>+    &.ui-widget-header {
>+        background: none;
>+        border: 0;
>+    }
>+}
>+
>+.statictabs {
>+    ul {
>+        background: none repeat scroll 0 0 transparent;
>+        border: 0 none;
>+        border-bottom-left-radius: 4px;
>+        border-bottom-right-radius: 4px;
>+        border-top-left-radius: 4px;
>+        border-top-right-radius: 4px;
>+        color: #222222;
>+        font-size: 100%;
>+        font-weight: bold;
>+        line-height: 1.3;
>+        list-style: none outside none;
>+        margin: 0;
>+        outline: 0 none;
>+        padding: .2em .2em 0;
>+        text-decoration: none;
>+
>+        &::before {
>+            content: "";
>+            display: table;
>+        }
>+
>+        &::after {
>+            clear: both;
>+            content: "";
>+            display: table;
>+        }
>+    }
>+
>+    li {
>+        background: none repeat scroll 0 0 #E6F0F2;
>+        border: 1px solid #B9D8D9;
>+        border-bottom: 0 none !important;
>+        border-top-left-radius: 4px;
>+        border-top-right-radius: 4px;
>+        color: #555555;
>+        float: left;
>+        font-weight: normal;
>+        list-style: none outside none;
>+        margin-bottom: 0;
>+        margin-right: .4em;
>+        padding: 0;
>+        position: relative;
>+        top: 1px;
>+        white-space: nowrap;
>+
>+        &.active {
>+            background-color: #FFFFFF;
>+            color: #212121;
>+            font-weight: normal;
>+            padding-bottom: 1px;
>+
>+            a {
>+                background: none repeat scroll 0 0 transparent;
>+                color: #000000;
>+                cursor: text;
>+                font-weight: bold;
>+                outline: 0 none;
>+            }
>+        }
>+
>+        a {
>+            color: #004D99;
>+            cursor: pointer;
>+            float: left;
>+            padding: .5em 1em;
>+            text-decoration: none;
>+
>+            &:hover {
>+                background-color: #EDF4F5;
>+                border-top-left-radius: 4px;
>+                border-top-right-radius: 4px;
>+                color: #538200;
>+            }
>+        }
>+    }
>+
>+    .tabs-container {
>+        background: none repeat scroll 0 0 transparent;
>+        border: 1px solid #B9D8D9;
>+        border-bottom-left-radius: 4px;
>+        border-bottom-right-radius: 4px;
>+        color: #222222;
>+        display: block;
>+        padding: 1em 1.4em;
>+    }
>+}
>+
>+/* End jQueryUI tab styles */
>+
>+/* jQuery UI Datepicker */
>+
>+.ui-datepicker {
>+    @include shadowed;
>+    table {
>+        border: 0;
>+        border-collapse: collapse;
>+        font-size: .9em;
>+        margin: 0 0 .4em;
>+        width: 100%;
>+    }
>+
>+    th {
>+        background: transparent none;
>+        border: 0;
>+        font-weight: bold;
>+        padding: .7em .3em;
>+        text-align: center;
>+    }
>+}
>+
>+.ui-datepicker-trigger {
>+    margin: 0 3px;
>+    vertical-align: middle;
>+}
>+
>+/* End jQueryUI datepicker styles */
>+
>+
>+/* jQueryUI Core */
>+
>+.ui-widget-content {
>+    background: #FFFFFF none;
>+    border: 1px solid #AAA;
>+    color: #222222;
>+
>+    a,
>+    a:visited {
>+        color: $links;
>+    }
>+}
>+
>+.ui-widget-header {
>+    background: #E6F0F2 none;
>+    border: 1px solid #AAA;
>+    color: #222222;
>+    font-weight: bold;
>+}
>+
>+.ui-state-default,
>+.ui-widget-content .ui-state-default,
>+.ui-widget-header .ui-state-default {
>+    background: #F4F8F9 none;
>+    border: 1px solid #AAA;
>+    color: #555555;
>+    font-weight: normal;
>+}
>+
>+.ui-state-hover,
>+.ui-widget-content .ui-state-hover,
>+.ui-widget-header .ui-state-hover,
>+.ui-state-focus,
>+.ui-widget-content .ui-state-focus,
>+.ui-widget-header .ui-state-focus {
>+    background: #E6F0F2 none;
>+    border: 1px solid #AAA;
>+    color: #212121;
>+    font-weight: normal;
>+}
>+
>+.ui-state-active,
>+.ui-widget-content .ui-state-active,
>+.ui-widget-header .ui-state-active {
>+    background: #FFFFFF none;
>+    border: 1px solid #AAAAAA;
>+    color: #212121;
>+    font-weight: normal;
>+}
>+
>+.ui-state-highlight,
>+.ui-widget-content .ui-state-highlight,
>+.ui-widget-header .ui-state-highlight {
>+    background: #FBF9EE;
>+    border: 1px solid #FCEFA1;
>+    color: #363636;
>+}
>+
>+.ui-state-error,
>+.ui-widget-content .ui-state-error,
>+.ui-widget-header .ui-state-error {
>+    background: #FEF1EC;
>+    border: 1px solid #CD0A0A;
>+    color: #CD0A0A;
>+}
>+
>+/* end jQueryUI core */
>+
>+/* jQueryUI autocomplete */
>+
>+.ui-autocomplete {
>+    @include shadowed;
>+    cursor: default;
>+    position: absolute;
>+
>+    &.ui-widget-content .ui-state-hover {
>+        background: #E6F0F2 none;
>+        border: 1px solid #AAA;
>+        color: #212121;
>+        font-weight: normal;
>+    }
>+}
>+
>+.ui-autocomplete-loading {
>+    background: #FFF url( "../../img/loading-small.gif" ) right center no-repeat;
>+}
>+
>+.ui-menu li {
>+    list-style: none;
>+}
>+
>+/* end jQueryUI autocomplete */
>+
>+.item-thumbnail {
>+    max-width: none;
>+}
>+
>+.no-image {
>+    @include border-radius-all( 3px );
>+    background-color: #FFF;
>+    border: 1px solid #AAA;
>+    color: #979797;
>+    display: block;
>+    font-size: 86%;
>+    font-weight: bold;
>+    text-align: center;
>+    width: 75px;
>+}
>+
>+#bookcover {
>+    float: left;
>+    margin: 0;
>+    padding: 0;
>+
>+    .no-image {
>+        margin-bottom: 10px;
>+        margin-right: 10px;
>+    }
>+
>+    img {
>+        margin: 0 1em 1em 0;
>+    }
>+}
>+
>+.required {
>+    color: #C00;
>+}
>+
>+
>+.label {
>+    background-color: transparent;
>+    color: inherit;
>+    display: inline;
>+    font-weight: normal;
>+    padding: 0;
>+    text-shadow: none;
>+}
>+
>+.blabel {
>+    background-color: #999999;
>+    border-radius: 3px;
>+    color: #FFFFFF;
>+    display: inline-block;
>+    font-weight: bold;
>+    padding: 2px 4px;
>+    text-shadow: 0 -1px 0 rgba( 0, 0, 0, .25 );
>+}
>+
>+.label-important {
>+    background-color: #B94A48;
>+}
>+
>+.label-warning {
>+    background-color: #F89406;
>+}
>+
>+.label-success {
>+    background-color: #468847;
>+}
>+
>+.label-info {
>+    background-color: #3A87AD;
>+}
>+
>+.label-inverse {
>+    background-color: #333333;
>+}
>+
>+fieldset {
>+    &.rows {
>+        clear: left;
>+        float: left;
>+        font-size: 90%;
>+        margin: .9em 0 0;
>+        padding: 0;
>+        width: 100%;
>+
>+        legend {
>+            font-size: 130%;
>+            font-weight: bold;
>+        }
>+
>+        label,
>+        .label {
>+            float: left;
>+            font-weight: bold;
>+            margin-right: 1em;
>+            text-align: right;
>+            width: 9em;
>+        }
>+
>+        label {
>+            &.lradio {
>+                float: none;
>+                margin: inherit;
>+                width: auto;
>+            }
>+        }
>+
>+        fieldset {
>+            margin: 0;
>+            padding: .3em;
>+        }
>+
>+        ol {
>+            list-style-type: none;
>+            padding: 1em 1em 0 1em;
>+
>+            &.lradio {
>+                label {
>+                    float: none;
>+                    margin-right: 0;
>+                    width: auto;
>+
>+                    &.lradio {
>+                        float: left;
>+                        margin-right: 1em;
>+                        width: 12em;
>+                    }
>+                }
>+            }
>+        }
>+
>+        li {
>+            clear: left;
>+            float: left;
>+            list-style-type: none;
>+            padding-bottom: 1em;
>+            width: 100%;
>+
>+            &.lradio {
>+                padding-left: 8.5em;
>+                width: auto;
>+
>+                label {
>+                    float: none;
>+                    margin: 0 0 0 1em;
>+                    width: auto;
>+                }
>+            }
>+        }
>+
>+        .hint {
>+            display: block;
>+            margin-left: 11em;
>+        }
>+    }
>+
>+    &.action {
>+        border: 0;
>+        clear: both;
>+        float: none;
>+        margin: 0;
>+        padding: 1em 0 .3em;
>+        width: auto;
>+
>+        p {
>+            margin-bottom: 1em;
>+        }
>+    }
>+
>+    table {
>+        font-size: 100%;
>+    }
>+}
>+
>+div {
>+    &.rows {
>+        float: left;
>+        clear: left;
>+        margin: 0;
>+        padding: 0;
>+        width: 100%;
>+
>+        + div.rows {
>+            margin-top: .6em;
>+        }
>+
>+        span {
>+            &.label {
>+                float: left;
>+                font-weight: bold;
>+                margin-right: 1em;
>+                text-align: left;
>+                width: 9em;
>+            }
>+        }
>+
>+        ol {
>+            list-style-type: none;
>+            margin-left: 0;
>+            padding: .5em 1em 0 0;
>+
>+            li {
>+                li {
>+                    border-bottom: 0;
>+                }
>+            }
>+        }
>+
>+        li {
>+            border-bottom: 1px solid #EEE;
>+            clear: left;
>+            float: left;
>+            list-style-type: none;
>+            padding-bottom: .2em;
>+            padding-top: .1em;
>+            width: 100%;
>+        }
>+
>+        ul {
>+            li {
>+                margin-left: 7.3em;
>+
>+                &:first-child {
>+                    clear: none;
>+                    float: none;
>+                    margin-left: 0;
>+                }
>+            }
>+        }
>+    }
>+}
>+
>+/* different sizes for different tags in opac-tags.tt */
>+
>+.tagweight0 {
>+    font-size: 12px;
>+}
>+
>+.tagweight1 {
>+    font-size: 14px;
>+}
>+
>+.tagweight2 {
>+    font-size: 16px;
>+}
>+
>+.tagweight3 {
>+    font-size: 18px;
>+}
>+
>+.tagweight4 {
>+    font-size: 20px;
>+}
>+
>+.tagweight5 {
>+    font-size: 22px;
>+}
>+
>+.tagweight6 {
>+    font-size: 24px;
>+}
>+
>+.tagweight7 {
>+    font-size: 26px;
>+}
>+
>+.tagweight8 {
>+    font-size: 28px;
>+}
>+
>+.tagweight9 {
>+    font-size: 30px;
>+}
>+
>+.toolbar {
>+    background-color: #EEEEEE;
>+    border: 1px solid #E8E8E8;
>+    font-size: 85%;
>+    padding: 3px 3px 5px 5px;
>+    vertical-align: middle;
>+
>+    a {
>+        white-space: nowrap;
>+    }
>+
>+    label {
>+        display: inline;
>+        font-size: 100%;
>+        font-weight: bold;
>+        margin-left: .5em;
>+    }
>+
>+    select {
>+        font-size: 97%;
>+        height: auto;
>+        line-height: inherit;
>+        margin: 0;
>+        padding: 0;
>+        white-space: nowrap;
>+        width: auto;
>+    }
>+
>+    .hold,
>+    #tagsel_tag {
>+        font-size: 97%;
>+        font-weight: bold;
>+        padding-left: 28px;
>+    }
>+
>+    #tagsel_form {
>+        margin-top: .5em;
>+    }
>+
>+    li {
>+        display: inline;
>+        list-style: none;
>+
>+        a {
>+            border-left: 1px solid #E8E8E8;
>+        }
>+
>+        &:first-child {
>+            a {
>+                border-left: 0;
>+            }
>+        }
>+    }
>+
>+    ul {
>+        padding-left: 0;
>+    }
>+}
>+
>+#basket {
>+    .toolbar {
>+        padding: 7px 5px 9px 9px;
>+    }
>+}
>+
>+#selections-toolbar,
>+.selections-toolbar {
>+    background: linear-gradient( top, #B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100% );
>+    margin: 0 0 1em;
>+    padding-left: 10px;
>+    padding-top: .5em;
>+}
>+
>+.list-actions {
>+    display: inline;
>+}
>+
>+%tag_button_default {
>+    background-color: transparent;
>+    background-image: url( "../images/sprite.png" );
>+    background-position: 1px -643px;
>+    background-repeat: no-repeat;
>+    border: 0;
>+    color: #0076B2;
>+    cursor: pointer;
>+    font-size: 100%;
>+    padding-left: 25px;
>+    text-decoration: none;
>+}
>+
>+%tag_button_hover {
>+    color: #005580;
>+    text-decoration: underline;
>+}
>+
>+%tag_button_disabled {
>+    color: #888888;
>+    padding-left: 23px;
>+    text-decoration: none;
>+}
>+
>+#tagsel_tag {
>+    @extend %tag_button_default;
>+
>+    &.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;
>+    font-size: 85%;
>+    padding: 0 0 .5em;
>+
>+    .results_summary {
>+        font-size: 100%;
>+    }
>+
>+    &.actions {
>+        margin-top: .5em;
>+    }
>+
>+    &.tagstatus {
>+        display: inline;
>+    }
>+
>+    .label {
>+        color: #202020;
>+    }
>+
>+    a {
>+        font-weight: normal;
>+    }
>+}
>+
>+#views {
>+    margin-bottom: .5em;
>+    padding: 0 2em .2em .2em;
>+}
>+
>+.view {
>+    background-color: #F3F3F3;
>+    border: 1px solid #C9C9C9;
>+    border-radius: 4px;
>+    display: inline-block;
>+    padding: .2em .5em;
>+    white-space: nowrap;
>+
>+    a,
>+    span {
>+        background-image: url( "../images/sprite.png" );
>+        background-repeat: no-repeat;
>+        font-size: 87%;
>+        padding-left: 15px;
>+        text-decoration: none;
>+    }
>+
>+    a {
>+        font-weight: normal;
>+    }
>+}
>+
>+#bibliodescriptions,
>+#isbdcontents {
>+    clear: left;
>+    margin-top: .5em;
>+}
>+
>+.current-view {
>+    background-color: #FFF;
>+    font-weight: bold;
>+}
>+
>+#MARCview {
>+    background-position: -9px -27px;
>+}
>+
>+#ISBDview {
>+    background-position: -10px -56px;
>+}
>+
>+#Normalview {
>+    background-position: -8px 3px;
>+}
>+
>+/* pagination */
>+.results-pagination {
>+    background-color: #F3F3F3;
>+    border: 1px solid #D0D0D0;
>+    display: none;
>+    height: auto;
>+    left: -1px;
>+    padding-bottom: 10px;
>+    position: absolute;
>+    top: 32px;
>+    width: 100%;
>+    z-index: 100;
>+}
>+
>+
>+.back {
>+    float: right;
>+
>+    input {
>+        background: none !important;
>+        color: #999 !important;
>+    }
>+}
>+
>+.pagination_list {
>+    ul {
>+        padding-left: 0;
>+        padding-top: 40px;
>+    }
>+
>+    li {
>+        color: #999;
>+        float: bottom;
>+        list-style: none;
>+        padding: 4px;
>+
>+        &.highlight {
>+            background-color: #F3F3F3;
>+            border-bottom: 1px solid #DDDDDD;
>+            border-top: 1px solid #DDDDDD;
>+        }
>+
>+        a {
>+            padding-left: 0;
>+        }
>+    }
>+
>+    .li_pag_index {
>+        color: #999999;
>+        float: left;
>+        font-size: 15px;
>+        font-weight: bold;
>+        padding-right: 10px;
>+        text-align: right;
>+        width: 13px;
>+    }
>+}
>+
>+.nav_results {
>+    background-color: #F3F3F3;
>+    border: 1px solid #D0D0D0;
>+    font-size: 95%;
>+    font-weight: bold;
>+    margin-top: .5em;
>+    position: relative;
>+
>+    .l_Results {
>+        a {
>+            background: #E1E1E1 url( "../images/sprite.png" ) no-repeat 0 -504px; /* Browse results menu */
>+            color: #006699;
>+            display: block;
>+            padding: 8px 28px;
>+            text-decoration: none;
>+        }
>+
>+        &:hover {
>+            background-color: #D9D9D9;
>+        }
>+    }
>+}
>+
>+.pg_menu {
>+    border-top: 1px solid #D0D0D0;
>+    margin: 0;
>+    white-space: nowrap;
>+
>+    li {
>+        color: #B2B2B2;
>+        display: inline;
>+        list-style: none;
>+        margin: 0;
>+
>+        &.back_results {
>+            a {
>+                border-left: 1px solid #D0D0D0;
>+                border-right: 1px solid #D0D0D0;
>+            }
>+        }
>+
>+        a,
>+        span {
>+            background-color: #F3F3F3;
>+            display: block;
>+            float: left;
>+            font-weight: normal;
>+            padding: .4em .5em;
>+            text-align: center;
>+            text-decoration: none;
>+        }
>+
>+        span {
>+            color: #B2B2B2;
>+        }
>+    }
>+}
>+
>+#listResults {
>+    li {
>+        background-color: #999999;
>+        color: #C5C5C5;
>+        display: block;
>+        font-size: 80%;
>+        font-weight: normal;
>+        margin-right: 1px;
>+        min-width: 18px;
>+        padding: 0;
>+        text-align: center;
>+
>+        &:hover {
>+            background-color: #006699;
>+        }
>+
>+        a {
>+            color: #FFFFFF;
>+            font-weight: normal;
>+        }
>+    }
>+}
>+
>+/* nav */
>+.nav_pages {
>+    .close_pagination {
>+        padding-right: 10px;
>+        position: absolute;
>+        right: 3px;
>+        top: -25px;
>+
>+        a {
>+            text-decoration: none !important;
>+        }
>+    }
>+
>+    ul {
>+        padding-top: 10px;
>+    }
>+
>+    li {
>+        color: #999;
>+        float: left;
>+        list-style: none;
>+        padding: 4px;
>+
>+        a {
>+            text-decoration: none !important;
>+
>+            &:hover {
>+                text-decoration: underline;
>+            }
>+        }
>+
>+        ul {
>+            float: left;
>+        }
>+    }
>+}
>+
>+/* action buttons */
>+#action {
>+    background-color: #F3F3F3;
>+    border: 1px solid #E8E8E8;
>+    margin: .5em 0 0 0;
>+    padding-bottom: 3px;
>+
>+    li {
>+        list-style: none;
>+        margin: .2em;
>+        padding: .3em 0;
>+    }
>+
>+    a {
>+        font-weight: bold;
>+        text-decoration: none;
>+    }
>+}
>+
>+#export,
>+#moresearches_menu {
>+    li {
>+        margin: 0;
>+        padding: 0;
>+
>+        a {
>+            font-weight: normal;
>+
>+            &.menu-inactive {
>+                font-weight: bold;
>+            }
>+        }
>+    }
>+}
>+
>+#format,
>+#furthersearches {
>+    padding-left: 35px;
>+}
>+
>+.highlight_controls {
>+    float: left;
>+}
>+
>+%initial_icon {
>+    background-image: url( "../images/sprite.png" );
>+    background-repeat: no-repeat;
>+    text-decoration: none;
>+}
>+
>+input {
>+    &.hold {
>+        @extend %initial_icon;
>+        background-color: transparent;
>+        background-position: -2px -453px; /* Toolbar place hold */
>+        border: 0;
>+        color: #0076B2;
>+        font-weight: bold;
>+        padding-left: 23px;
>+        text-decoration: none;
>+
>+        &.disabled {
>+            @extend %initial_icon;
>+            background-position: -5px -621px; /* Place hold disabled */
>+        }
>+    }
>+
>+    &.editshelf {
>+        @extend %initial_icon;
>+        background-color: transparent;
>+        background-position: 2px -735px; /* 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 -764px; /* List new */
>+    border: 0;
>+    color: #006699;
>+    cursor: pointer;
>+    filter: none;
>+    font-size: 100%;
>+    padding-left: 28px;
>+
>+    &.disabled {
>+        @extend %initial_icon;
>+        background-position: -4px -791px; /* List new disabled */
>+    }
>+}
>+
>+.deleteshelf {
>+    @extend %initial_icon;
>+    background-color: transparent;
>+    background-position: 2px -688px; /* Delete */
>+    border: 0;
>+    color: #006699;
>+    cursor: pointer;
>+    filter: none;
>+    font-size: 100%;
>+    padding-left: 25px;
>+    text-decoration: none;
>+
>+    &:active {
>+        border: 0;
>+    }
>+
>+    &:hover {
>+        color: #990033;
>+    }
>+}
>+
>+.links a {
>+    font-weight: bold;
>+}
>+
>+#tagslist li {
>+    display: inline;
>+}
>+
>+#login4tags {
>+    background-image: url( "../images/sprite.png" ); /* Tag results disabled */
>+    background-position: -6px -1130px;
>+    background-repeat: no-repeat;
>+    padding-left: 20px;
>+    text-decoration: none;
>+}
>+
>+.tag_results_input {
>+    font-size: 12px;
>+    margin-left: 1em;
>+    padding: .3em;
>+
>+    input[type="text"] {
>+        font-size: inherit;
>+        margin: 0;
>+        padding: 0;
>+    }
>+
>+    label {
>+        display: inline;
>+    }
>+}
>+
>+.tagsinput {
>+    input[type="text"] {
>+        font-size: inherit;
>+        margin: 0;
>+        padding: 0;
>+    }
>+
>+    label {
>+        display: inline;
>+    }
>+}
>+
>+.branch-info-tooltip {
>+    display: none;
>+}
>+
>+.ui-tooltip-content p {
>+    margin: .3em 0;
>+}
>+
>+#social_networks {
>+    a {
>+        background: transparent url( "../images/social-sprite.png" ) no-repeat;
>+        display: block;
>+        height: 20px !important;
>+        text-indent: -999em;
>+        width: 20px;
>+    }
>+
>+    span {
>+        color: #274D7F;
>+        display: block;
>+        float: left;
>+        font-size: 85%;
>+        font-weight: bold;
>+        line-height: 2em;
>+        margin: .5em 0 .5em .5em !important;
>+    }
>+
>+    div {
>+        float: left !important;
>+        margin: .5em 0 .5em .2em !important;
>+    }
>+
>+    #facebook {
>+        background-position: -7px -35px;
>+    }
>+
>+    #twitter {
>+        background-position: -7px -5px;
>+    }
>+
>+    #linkedin {
>+        background-position: -7px -95px;
>+    }
>+
>+    #delicious {
>+        background-position: -7px -66px;
>+    }
>+
>+    #email {
>+        background-position: -7px -126px;
>+    }
>+}
>+
>+#marc {
>+    td,
>+    th {
>+        background-color: transparent;
>+        border: 0;
>+        padding: 3px 5px;
>+        text-align: left;
>+    }
>+
>+    td:first-child {
>+        text-indent: 2em;
>+    }
>+
>+    p {
>+        padding-bottom: .6em;
>+
>+        .label {
>+            font-weight: bold;
>+        }
>+    }
>+
>+    ul {
>+        padding-bottom: .6em;
>+    }
>+
>+    .results_summary {
>+        clear: left;
>+
>+        ul {
>+            clear: none;
>+            display: inline;
>+            float: none;
>+            list-style: none;
>+            margin: 0;
>+            padding: 0;
>+        }
>+
>+        li {
>+            display: inline;
>+        }
>+    }
>+}
>+
>+#items,
>+#items td,
>+#items th {
>+    border: 1px solid #EEE;
>+    font-size: 90%;
>+}
>+
>+#plainmarc {
>+    table {
>+        border: 0;
>+        font-family: monospace;
>+        font-size: 95%;
>+        margin: .7em 0 0;
>+    }
>+
>+    th {
>+        background-color: #FFF;
>+        border: 0;
>+        padding: 2px;
>+        text-align: left;
>+        vertical-align: top;
>+        white-space: nowrap;
>+    }
>+
>+    td {
>+        border: 0;
>+        padding: 2px;
>+        vertical-align: top;
>+    }
>+}
>+
>+#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;
>+}
>+
>+.authref {
>+    text-indent: 2em;
>+
>+    .label {
>+        font-style: italic;
>+    }
>+}
>+
>+.authstanza {
>+    margin-top: 1em;
>+
>+    li {
>+        margin-left: .5em;
>+    }
>+}
>+
>+.authstanzaheading {
>+    font-weight: bold;
>+}
>+
>+.authorizedheading {
>+    font-weight: bold;
>+}
>+
>+.authres_notes,
>+.authres_seealso,
>+.authres_otherscript {
>+    padding-top: .5em;
>+}
>+
>+.authres_notes {
>+    font-style: italic;
>+}
>+
>+#didyoumean {
>+    @include border-radius-all( 3px );
>+    background-color: #EEE;
>+    border: 1px solid #E8E8E8;
>+    box-sizing: border-box;
>+    margin: .5em 1.5em;
>+    padding: .5em;
>+    text-align: left;
>+
>+    &.dym-loaded {
>+        background-color: #FFFBEA;
>+        border-color: #F4ECBE;
>+    }
>+}
>+
>+.suggestionlabel {
>+    font-weight: bold;
>+}
>+
>+.searchsuggestion {
>+    display: inline-block;
>+    padding: .2em .5em;
>+}
>+
>+.authlink {
>+    padding-left: .25em;
>+}
>+
>+#hierarchies {
>+    a {
>+        color: #069;
>+        font-weight: normal;
>+        text-decoration: underline;
>+
>+        &:hover {
>+            color: #990033;
>+        }
>+    }
>+}
>+
>+#top-pages {
>+    margin: 0 0 .5em;
>+}
>+
>+.dropdown-menu {
>+    > li {
>+        > a {
>+            font-size: 90%;
>+        }
>+    }
>+}
>+
>+#cartDetails,
>+#cartUpdate,
>+#holdDetails,
>+#listsDetails {
>+    background-color: #FFF;
>+    border: 1px solid rgba( 0, 0, 0, .2 );
>+    border-radius: 6px;
>+    box-shadow: 0 5px 10px rgba( 0, 0, 0, .2 );
>+    color: black;
>+    display: none;
>+    font-size: 90%;
>+    margin: 0;
>+    padding: 8px 20px;
>+    text-align: center;
>+    width: 180px;
>+    z-index: 2;
>+}
>+
>+#cartmenulink {
>+    white-space: nowrap;
>+}
>+
>+#search-facets,
>+#menu {
>+    @include border-radius-all( 7px );
>+    border: 1px solid #D2D2CF;
>+
>+    ul {
>+        margin: 0;
>+        padding: .3em;
>+    }
>+
>+    form {
>+        margin: 0;
>+    }
>+
>+    h4 {
>+        font-size: 90%;
>+        margin: 0 0 .6em 0;
>+        text-align: center;
>+
>+        a {
>+            background-color: #F2F2EF;
>+            border-bottom: 1px solid #D8D8D8;
>+            border-radius: 8px 8px 0 0;
>+            display: block;
>+            font-weight: bold;
>+            padding: .7em .2em;
>+            text-decoration: none;
>+        }
>+    }
>+
>+    li {
>+        font-size: 90%;
>+        font-weight: bold;
>+        list-style-type: none;
>+
>+        li {
>+            font-size: 95%;
>+            font-weight: normal;
>+            line-height: 125%;
>+            margin-bottom: 2px;
>+            padding: .1em .2em;
>+        }
>+
>+        &.showmore {
>+            a {
>+                font-weight: bold;
>+                text-indent: 1em;
>+            }
>+        }
>+    }
>+
>+    a {
>+        font-weight: normal;
>+        text-decoration: underline;
>+    }
>+
>+    .facet-count {
>+        display: inline-block;
>+    }
>+
>+}
>+
>+#menu {
>+    font-size: 94%;
>+
>+    li {
>+        list-style-type: none;
>+
>+        a {
>+            background: #EEEEEE;
>+            border: 1px solid #D8D8D8;
>+            border-bottom-color: #999;
>+            border-radius: 5px 0 0 5px;
>+            display: block;
>+            font-size: 111%;
>+            margin: .4em 0;
>+            margin-right: -1px;
>+            padding: .4em .6em;
>+            text-decoration: none;
>+
>+            &:hover {
>+                background: #EAEEF5;
>+            }
>+        }
>+
>+        &.active {
>+            a {
>+                background-color: #FFF;
>+                background-image: none;
>+                border-right-width: 0;
>+                font-weight: bold;
>+
>+                &:hover {
>+                    background-color: #FFF;
>+                }
>+            }
>+        }
>+    }
>+
>+    h4 {
>+        display: none;
>+    }
>+}
>+
>+#addto {
>+    max-width: 10em;
>+}
>+
>+/* Search results add to cart (lists disabled) */
>+.addto {
>+    .addtocart {
>+        background-image: url( "../images/sprite.png" ); /* Cart */
>+        background-position: -5px -266px;
>+        background-repeat: no-repeat;
>+        padding-left: 33px;
>+        text-decoration: none;
>+    }
>+}
>+
>+.searchresults {
>+    p {
>+        margin: 0;
>+        padding: 0 0 .6em 0;
>+
>+        &.details {
>+            color: #979797;
>+        }
>+    }
>+
>+    a {
>+        &.highlight_toggle {
>+            background-image: url( "../images/sprite.png" ); /* Highlight */
>+            background-position: -11px -841px;
>+            background-repeat: no-repeat;
>+            display: none;
>+            font-weight: normal;
>+            padding: 0 10px 0 21px;
>+        }
>+    }
>+
>+    .commentline {
>+        @include border-radius-all( 3px );
>+        @include shadowed;
>+        background-color: rgba( 255, 255, 204, .4 );
>+        border: 1px solid #CCC;
>+        display: inline-block;
>+        margin: .3em;
>+        padding: .4em;
>+
>+        .yours {
>+            background-color: rgba( 239, 254, 213, .4 );
>+        }
>+    }
>+}
>+
>+.commentline .avatar {
>+    float: right;
>+    padding-left: .5em;
>+}
>+
>+/* style for search terms in catalogsearch */
>+.term {
>+    /* color: blue; */
>+    background-color: #FFFFCC;
>+    color: #990000;
>+}
>+
>+/* style for shelving location in catalogsearch */
>+.shelvingloc {
>+    display: block;
>+    font-style: italic;
>+}
>+
>+#CheckAll,
>+#CheckNone,
>+.CheckAll,
>+.CheckNone {
>+    font-weight: normal;
>+    margin: 0 .5em;
>+    text-decoration: underline;
>+}
>+
>+.sep {
>+    color: #888;
>+    padding: 0 .2em 0 .5em;
>+    text-shadow: 1px 1px 0 #FFF;
>+}
>+
>+%page-first-child {
>+    border-bottom-left-radius: 3px;
>+    border-top-left-radius: 3px;
>+    border-width: 1px;
>+}
>+
>+%page-last-child {
>+    border-bottom-right-radius: 3px;
>+    border-top-right-radius: 3px;
>+    border-width: 1px 1px 1px 0;
>+}
>+
>+%page-middle-child {
>+    background-color: #FFFFFF;
>+    border-color: #DDDDDD;
>+    border-image: none;
>+    border-style: solid;
>+    border-width: 1px 1px 1px 0;
>+    float: left;
>+    font-size: 11.9px;
>+    line-height: 20px;
>+    padding: 4px 12px;
>+    text-decoration: none;
>+}
>+
>+.pages {
>+    margin: 20px 0;
>+
>+    span {
>+        &:first-child {
>+            @extend %page-first-child;
>+        }
>+
>+        &:last-child {
>+            @extend %page-last-child;
>+        }
>+    }
>+
>+    a {
>+        @extend %page-middle-child;
>+
>+        &:first-child {
>+            @extend %page-first-child;
>+        }
>+
>+        &:last-child {
>+            @extend %page-last-child;
>+        }
>+    }
>+
>+    .inactive {
>+        @extend %page-middle-child;
>+        background-color: #F5F5F5;
>+    }
>+
>+    .currentPage {
>+        @extend %page-middle-child;
>+    }
>+
>+    a[rel='last'] {
>+        border-bottom-right-radius: 3px;
>+        border-top-right-radius: 3px;
>+    }
>+}
>+
>+.hold-message {
>+    @include border-radius-all( 3px );
>+    background-color: #FFF0B1;
>+    display: inline-block;
>+    margin: .5em;
>+    padding: .2em .5em;
>+}
>+
>+.reserve_date,
>+.expiration_date {
>+    white-space: nowrap;
>+}
>+
>+.close {
>+    color: #0088CC;
>+    filter: none;
>+    float: none;
>+    font-size: inherit;
>+    font-weight: normal;
>+    opacity: inherit;
>+    position: inherit;
>+    right: auto;
>+    text-shadow: none;
>+    top: auto;
>+}
>+
>+.close:hover {
>+    color: #538200;
>+    filter: inherit;
>+    font-size: inherit;
>+    opacity: inherit;
>+}
>+
>+/* Redefine a new style for Bootstrap's class "close" since we use that already */
>+/* Use <a class="closebtn" href="#">&times;</a> */
>+
>+.modal-header .closebtn {
>+    margin-top: 2px;
>+}
>+
>+.closebtn {
>+    color: #000000;
>+    float: right;
>+    font-size: 20px;
>+    font-weight: bold;
>+    line-height: 20px;
>+    opacity: .2;
>+    text-shadow: 0 1px 0 #FFFFFF;
>+
>+    &:hover {
>+        color: #000000;
>+        cursor: pointer;
>+        opacity: .4;
>+        text-decoration: none;
>+    }
>+}
>+
>+button.closebtn {
>+    background: transparent;
>+    border: 0;
>+    cursor: pointer;
>+    padding: 0;
>+}
>+
>+.btn-group {
>+    label,
>+    select {
>+        font-size: 13px;
>+    }
>+}
>+
>+.span2 select {
>+    width: 100%;
>+}
>+
>+.item-status {
>+    display: block;
>+    font-size: 95%;
>+    margin-bottom: .5em;
>+}
>+
>+.available {
>+    color: #006600;
>+}
>+
>+.unavailable {
>+    color: #990033;
>+}
>+
>+.waiting,
>+.intransit,
>+.notforloan,
>+.checkedout,
>+.lost,
>+.notonhold {
>+    display: block;
>+}
>+
>+.notforloan {
>+    color: #900;
>+}
>+
>+.lost {
>+    color: #666;
>+}
>+
>+.suggestion {
>+    @include border-radius-all( 3px );
>+    background-color: #EEEEEB;
>+    border: 1px solid #DDDED3;
>+    margin: 1em auto;
>+    padding: .5em;
>+    width: 35%;
>+}
>+
>+.librarypulldown .transl1 {
>+    width: auto;
>+}
>+
>+.nolibrarypulldown {
>+    width: 68%;
>+
>+    .transl1 {
>+        width: 87%;
>+    }
>+}
>+
>+#opac-main-search {
>+    select {
>+        max-width: 12em;
>+        width: auto;
>+    }
>+}
>+
>+#logo {
>+    background: transparent url( "../images/koha-logo-navbar.png" ) no-repeat scroll 0%;
>+    border: 0;
>+    float: left !important;
>+    margin: 0;
>+    padding: 0;
>+    width: 100px;
>+
>+    a {
>+        border: 0;
>+        cursor: pointer;
>+        display: block;
>+        height: 0 !important;
>+        margin: 0;
>+        overflow: hidden;
>+        padding: 40px 0 0;
>+        text-decoration: none;
>+        width: 100px;
>+    }
>+}
>+
>+#user-menu-trigger {
>+    display: none;
>+
>+    .icon-user {
>+        background: transparent url( "../lib/bootstrap/img/glyphicons-halflings-white.png" ) no-repeat;
>+        background-position: -168px 0;
>+        background-repeat: no-repeat;
>+        height: 14px;
>+        line-height: 14px;
>+        margin: 12px 0 0;
>+        vertical-align: text-top;
>+        width: 14px;
>+    }
>+
>+    .caret {
>+        border-bottom-color: #999999;
>+        border-top-color: #999999;
>+        margin-top: 18px;
>+    }
>+}
>+
>+/* Class to be added to toolbar when it starts being fixed at the top of the screen*/
>+.floating {
>+    box-shadow: 0 3px 2px 0 rgba( 0, 0, 0, .4 );
>+    margin-top: 0;
>+}
>+
>+.tdlabel {
>+    display: none;
>+    font-weight: bold;
>+}
>+
>+#ulactioncontainer {
>+    min-width: 16em;
>+}
>+
>+.notesrow {
>+    label {
>+        font-weight: bold;
>+    }
>+
>+    span {
>+        display: block;
>+    }
>+}
>+
>+.thumbnail-shelfbrowser span {
>+    margin: 0 auto;
>+}
>+
>+.table {
>+    .sorting_asc {
>+        background: url( "../images/asc.gif" ) no-repeat scroll right center #ECEDE6;
>+        padding-right: 19px;
>+    }
>+
>+    .sorting_desc {
>+        background: url( "../images/desc.gif" ) no-repeat scroll right center #ECEDE6;
>+        padding-right: 19px;
>+    }
>+
>+    .sorting {
>+        background: url( "../images/ascdesc.gif" ) no-repeat scroll right center #ECEDE6;
>+        padding-right: 19px;
>+    }
>+
>+    .nosort,
>+    .nosort.sorting_asc,
>+    .nosort.sorting_desc,
>+    .nosort.sorting {
>+        background: #ECEDE6 none;
>+        padding-right: 19px;
>+    }
>+
>+    th,
>+    td {
>+        line-height: 135%;
>+    }
>+}
>+
>+.tags,
>+.shelves {
>+    ul {
>+        display: inline;
>+        list-style: none;
>+        margin-left: 0;
>+
>+        li {
>+            display: inline;
>+        }
>+    }
>+}
>+
>+.coverimages {
>+    float: right;
>+}
>+
>+#i18nMenu {
>+    margin-left: 1em;
>+
>+    li {
>+        font-size: 85%;
>+
>+        li {
>+            font-size: 100%;
>+
>+            > a {
>+                font-size: 100%;
>+            }
>+
>+            &:hover {
>+                color: #FFF;
>+            }
>+        }
>+
>+        a {
>+            color: $links;
>+        }
>+    }
>+
>+    .dropdown-menu {
>+        li {
>+            p {
>+                clear: both;
>+                display: block;
>+                font-weight: normal;
>+                line-height: 20px;
>+                padding: 3px 20px;
>+                white-space: nowrap;
>+            }
>+        }
>+    }
>+}
>+
>+#subjectsList,
>+#authorSearch {
>+    label {
>+        display: inline;
>+        vertical-align: middle;
>+    }
>+
>+    ul {
>+        border-bottom: 1px solid #EEE;
>+        list-style-type: none;
>+        margin: 0;
>+        padding: .6em 0;
>+    }
>+
>+    li {
>+        list-style-type: none;
>+        margin: 0;
>+        padding: 0;
>+    }
>+}
>+
>+
>+#overdrive-results,
>+#openlibrary-results {
>+    font-weight: bold;
>+    padding-left: 1em;
>+}
>+
>+.throbber {
>+    vertical-align: middle;
>+}
>+
>+#overdrive-results-list .star-rating-control {
>+    display: block;
>+    overflow: auto;
>+}
>+
>+#shelfbrowser {
>+    table {
>+        margin: 0;
>+    }
>+
>+    table,
>+    td,
>+    th {
>+        border: 0;
>+        font-size: 90%;
>+        text-align: center;
>+    }
>+
>+    td,
>+    th {
>+        padding: 3px 5px;
>+        width: 20%;
>+    }
>+
>+    a {
>+        display: block;
>+        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;
>+        }
>+    }
>+
>+    #browser_previous {
>+        background-position: -9px -1007px;
>+    }
>+
>+    #browser_next {
>+        background-position: -9px -1057px;
>+    }
>+}
>+
>+#holds {
>+    margin: 0 auto;
>+    max-width: 800px;
>+}
>+
>+.holdrow {
>+    border-bottom: 1px solid #CCC;
>+    clear: both;
>+    margin-bottom: .5em;
>+    padding: 0 1em 1em 1em;
>+
>+    fieldset {
>+        border: 0;
>+        float: none;
>+        margin: 0;
>+
>+        .label {
>+            font-size: 14px;
>+        }
>+    }
>+
>+    label {
>+        display: inline;
>+    }
>+}
>+
>+.hold-options {
>+    clear: both;
>+}
>+
>+.toggle-hold-options {
>+    background-color: #EEE;
>+    clear: both;
>+    display: block;
>+    font-weight: bold;
>+    margin: 1em 0;
>+    padding: .5em;
>+}
>+
>+.copiesrow {
>+    clear: both;
>+}
>+
>+#idreambooksreadometer {
>+    float: right;
>+}
>+
>+.idreambookslegend {
>+    font-size: small;
>+}
>+
>+.idreambookssummary {
>+    a {
>+        color: #707070;
>+        text-decoration: none;
>+    }
>+
>+    img {
>+        vertical-align: middle;
>+    }
>+}
>+
>+.idbresult {
>+    color: #29ADE4;
>+    margin: .5em;
>+    padding: .5em;
>+    text-align: center;
>+
>+    img {
>+        padding-right: 6px;
>+        vertical-align: middle;
>+    }
>+
>+    a,
>+    a:visited {
>+        text-decoration: none;
>+        color: #29ADE4;
>+    }
>+}
>+
>+.js-show {
>+    display: none;
>+}
>+
>+.modal-nojs {
>+    .modal-header,
>+    .modal-footer {
>+        display: none;
>+    }
>+}
>+
>+.contents {
>+    width: 75%;
>+
>+    .t:first-child::before {
>+        content: "â ";
>+    }
>+
>+    .t::before {
>+        content: "\A â ";
>+        white-space: pre;
>+    }
>+
>+    .t {
>+        font-weight: bold;
>+        display: inline;
>+    }
>+
>+    .r {
>+        display: inline;
>+    }
>+}
>+
>+
>+.contentblock {
>+    font-size: 95%;
>+    line-height: 135%;
>+    margin-left: 2em;
>+    position: relative;
>+}
>+
>+.m880 {
>+    display: block;
>+    float: right;
>+    padding-left: 20px;
>+    text-align: right;
>+    width: 50%;
>+}
>+
>+#memberentry-form {
>+    input.error {
>+        border-color: #C00;
>+        box-shadow: 0 1px 1px #C00 inset, 0 0 8px #C00;
>+        color: #F00;
>+        outline: 0 none;
>+
>+        &:focus {
>+            border-color: #C00;
>+            box-shadow: 0 1px 1px #C00 inset, 0 0 8px #C00;
>+            color: #F00;
>+            outline: 0 none;
>+        }
>+
>+        label.error {
>+            color: #C00;
>+            float: none;
>+            font-size: 90%;
>+        }
>+    }
>+}
>+
>+
>+#illrequests {
>+    .illrequest-actions {
>+        margin-bottom: 20px;
>+        padding-top: 20px;
>+
>+        .btn,
>+        .cancel {
>+            margin-right: 5px;
>+        }
>+    }
>+
>+    #illrequests-create-button {
>+        margin-bottom: 20px;
>+    }
>+
>+    .bg-info {
>+        overflow: auto;
>+        position: relative;
>+
>+        #search-summary {
>+            position: absolute;
>+            top: 50%;
>+            transform: translateY( -50% );
>+        }
>+
>+    }
>+
>+    #freeform-fields .custom-name {
>+        float: left;
>+        margin-right: 1em;
>+        text-align: right;
>+        width: 8em;
>+    }
>+
>+    .dropdown:hover .dropdown-menu.nojs {
>+        display: block;
>+    }
>+}
>+
>+#dc_fieldset {
>+    border: 1px solid #DDDDDD;
>+    border-radius: 10px;
>+    border-width: 1px;
>+    padding: 5px;
>+}
>+
>+.label_dc {
>+    cursor: pointer;
>+    display: inline;
>+    margin: 0;
>+    padding: 0;
>+}
>+
>+.btn-danger {
>+    color: white !important;
>+}
>+
>+.count_label {
>+    $base: #369;
>+    background-color: $base;
>+    border-radius: 5px;
>+    color: #FFF;
>+    display: inline-block;
>+    font-weight: bold;
>+    min-width: 1.5em;
>+    padding: .2em;
>+    text-align: center;
>+    text-shadow: 0 -1px 0 rgba( 0, 0, 0, .25 );
>+
>+    &:hover {
>+        background-color: lighten( $base, 20% );
>+    }
>+}
>+
>+.user_overdues_count,
>+.user_fines_count {
>+    background-color: #990000;
>+
>+    &:hover {
>+        background-color: lighten( #990000, 10% );
>+    }
>+}
>+
>+.user_holds_waiting_count {
>+    background-color: #538200;
>+
>+    &:hover {
>+        background-color: lighten( #538200, 10% );
>+    }
>+}
>+
>+#user_summary {
>+    border: 1px solid #EAEAE6;
>+    border-radius: 7px;
>+    margin-bottom: 1em;
>+    padding-bottom: .5em;
>+
>+    h3 {
>+        background-color: #EAEAE6;
>+        border-top-left-radius: 6px;
>+        border-top-right-radius: 6px;
>+        box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .2 );
>+        margin-top: 0;
>+        padding: .2em 0;
>+        text-align: center;
>+    }
>+
>+    ul {
>+        list-style-type: none;
>+        margin: 0 0 .2em 0;
>+
>+        a {
>+            display: block;
>+            font-weight: bold;
>+            padding: .2em 1em;
>+        }
>+    }
>+}
>+
>+@import "responsive";
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/print.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/print.scss
>new file mode 100644
>index 0000000000..9636cac381
>--- /dev/null
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/print.scss
>@@ -0,0 +1,251 @@
>+a:link {
>+    color: #000066;
>+    text-decoration: none;
>+}
>+
>+a:visited {
>+    color: #000066;
>+    text-decoration: none;
>+}
>+
>+a:hover {
>+    color: #993300;
>+    text-decoration: none;
>+}
>+
>+body {
>+    background-color: #FFF;
>+    color: #333333;
>+    font-family: arial, geneva, sans-serif;
>+    font-size: 14px;
>+    margin: 0;
>+    word-wrap: break-word;
>+}
>+
>+caption {
>+    color: #000066;
>+    font-size: 18px;
>+    font-weight: bold;
>+    margin-top: 5px;
>+    text-align: left;
>+}
>+
>+.table {
>+    width: 100%;
>+}
>+
>+form {
>+    margin: 0;
>+    padding: 0;
>+}
>+
>+h1 {
>+    color: #000066;
>+    font-size: 22px;
>+    font-weight: bold;
>+    margin-bottom: 3px;
>+    margin-top: 3px;
>+}
>+
>+h2 {
>+    color: #000066;
>+    font-size: 20px;
>+    font-weight: bold;
>+    margin-bottom: 3px;
>+    margin-top: 3px;
>+}
>+
>+h3 {
>+    color: #000066;
>+    font-size: 18px;
>+    font-weight: bold;
>+    margin-bottom: 3px;
>+    margin-top: 3px;
>+}
>+
>+h4 {
>+    color: #000066;
>+    font-size: 16px;
>+    font-weight: bold;
>+    margin-bottom: 3px;
>+    margin-top: 3px;
>+}
>+
>+h5 {
>+    color: #000066;
>+    font-size: 15px;
>+    font-weight: bold;
>+    margin-bottom: 1px;
>+    margin-top: 1px;
>+}
>+
>+h6 {
>+    color: #000066;
>+    font-size: 14px;
>+    font-weight: bold;
>+    margin-bottom: 1px;
>+    margin-top: 1px;
>+}
>+
>+p {
>+    margin-top: 0;
>+}
>+
>+table {
>+    background-color: #FFFFFF;
>+    border-bottom: 0 solid #CCCCCC;
>+    border-collapse: collapse;
>+    border-left: 0 solid #CCCCCC;
>+    margin: 3px 0 5px 0;
>+    padding: 0;
>+    width: 99%;
>+}
>+
>+td {
>+    background-color: #FFF;
>+    border-bottom: 1px solid #CCCCCC;
>+    border-right: 1px solid #CCCCCC;
>+    padding: 5px;
>+    vertical-align: top;
>+}
>+
>+td:last-child {
>+    background-color: #FFF;
>+    border-bottom: 1px solid #CCCCCC;
>+    border-right: 0 solid #CCCCCC;
>+    padding: 5px;
>+    vertical-align: top;
>+}
>+
>+th {
>+    background-color: #E9E9E9;
>+    border-bottom: 1px solid #CCCCCC;
>+    border-right: 1px solid #CCCCCC;
>+    font-weight: bold;
>+    padding: 5px;
>+}
>+
>+th:last-child {
>+    background-color: #E9E9E9;
>+    border-bottom: 1px solid #CCCCCC;
>+    border-right: 0 solid #CCCCCC;
>+    font-weight: bold;
>+    padding: 5px;
>+}
>+
>+tr.highlight {
>+    background-color: #E9E9E9;
>+}
>+
>+body#basket tr.highlight {
>+    background-color: transparent;
>+}
>+
>+body#basket a {
>+    font-weight: bold;
>+}
>+
>+body#basket table {
>+    border-left: 1px solid #EEE;
>+    border-top: 1px solid #EEE;
>+}
>+body#basket td,
>+body#basket th {
>+    background-color: transparent;
>+    padding: 2px;
>+}
>+
>+body#basket th {
>+    background-color: #EEE;
>+}
>+
>+body#basket th,
>+body#basket th[scope=col] {
>+    text-align: center;
>+    vertical-align: middle;
>+}
>+
>+body#basket th[scope=row] {
>+    font-size: 89%;
>+    text-align: right;
>+    vertical-align: top;
>+    width: 10%;
>+}
>+
>+body#basket p {
>+    font-size: 85%;
>+    margin: .2em 0;
>+    text-indent: .5em;
>+}
>+
>+.error {
>+    font-weight: bold;
>+}
>+
>+.ex {
>+    font-family: "Courier New", Courier, monospace;
>+}
>+
>+.inline {
>+    display: inline;
>+}
>+
>+#bookcover {
>+    float: left;
>+    margin: 0;
>+    padding: 0;
>+}
>+
>+#userresults {
>+    display: block;
>+    position: absolute;
>+    right: 0;
>+    word-wrap: break-word;
>+}
>+
>+#userupdate input,
>+#userupdate textarea {
>+    border: 0;
>+    display: inline;
>+}
>+
>+#action,
>+#addshelf,
>+#bibliodescriptions .ui-tabs-nav,
>+#export,
>+#facetcontainer,
>+#members,
>+#navigation,
>+#opac-main-search,
>+#opac-user-views .ui-tabs-nav,
>+#remove-selected,
>+#selections-toolbar,
>+#toolbar,
>+.actions,
>+.breadcrumb,
>+.ft,
>+.koha_url,
>+.list-actions,
>+.navbar,
>+.noprint,
>+.pages,
>+.results_summary.actions,
>+.screen,
>+.suggestion,
>+.views,
>+a[href]:after,
>+fieldset.action,
>+h2 span.hint,
>+input,
>+td.resultscontrol {
>+    display: none;
>+}
>+
>+.row-fluid {
>+    margin-top: 30px;
>+}
>+
>+#views,
>+#ulactioncontainer {
>+    display: none;
>+}
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/less/right-to-left.less b/koha-tmpl/opac-tmpl/bootstrap/css/src/right-to-left.scss
>similarity index 63%
>rename from koha-tmpl/opac-tmpl/bootstrap/less/right-to-left.less
>rename to koha-tmpl/opac-tmpl/bootstrap/css/src/right-to-left.scss
>index d2d75b8bcd..fba7f5baa7 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/less/right-to-left.less
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/right-to-left.scss
>@@ -1,11 +1,57 @@
> .popup {
>-    padding-right : 0;
>     padding-left: 0;
>+    padding-right: 0;
> }
> 
> a {
>     &.cancel {
>-        padding-right : 1em;
>+        padding-right: 1em;
>+    }
>+
>+    &.addtocart,
>+    &.addtoshelf,
>+    &.highlight_toggle,
>+    &.incart,
>+    &.print-large,
>+    &.reserve {
>+        padding-right: 35px;
>+    }
>+
>+    &.brief,
>+    &.tag_add,
>+    &.detail {
>+        padding-right: 27px;
>+    }
>+
>+    &.download {
>+        padding-right: 20px;
>+    }
>+
>+    &.editshelf {
>+        padding-right: 26px;
>+    }
>+
>+    &.hide {
>+        padding-right: 26px;
>+    }
>+
>+    &.empty,
>+    &.print-small {
>+        padding-right: 30px;
>+    }
>+
>+    &.hold,
>+    &.new {
>+        padding-right: 23px;
>+    }
>+
>+    &.removeitems,
>+    &.deleteshelf {
>+        padding-right: 25px;
>+    }
>+
>+    &.send {
>+        padding-right: 28px;
>     }
> }
> 
>@@ -14,66 +60,85 @@ h1 {
>         float: right !important;
>     }
> }
>+
>+input.hold {
>+    padding-right: 23px;
>+}
>+
> caption {
>     text-align: right;
> }
> 
> #basketcount {
>     span {
>-        margin : 0 .9em 0 0;
>+        margin: 0 .9em 0 0;
>     }
> }
> 
> #koha_url p {
>-        float : left;
>+    float: left;
> }
> 
> .actions {
>     a {
>         &.hold {
>-            margin-left : 1em;
>-            padding-right : 21px;
>+            margin-left: 1em;
>+            padding-right: 21px;
>         }
>+
>         &.addtocart {
>-            margin-left : 1em;
>-            padding-right : 20px;
>+            margin-left: 1em;
>+            padding-right: 20px;
>         }
>+
>         &.addtoshelf {
>-            margin-left : 1em;
>-            padding-right : 20px;
>+            margin-left: 1em;
>+            padding-right: 20px;
>         }
>+
>         &.addtolist {
>-            margin-left : 1em;
>-            padding-right : 20px;
>+            margin-left: 1em;
>+            padding-right: 20px;
>         }
>+
>         &.tag_add {
>-            margin-left : 1em;
>-            padding-right : 20px;
>+            margin-left: 1em;
>+            padding-right: 20px;
>         }
>+
>         /* List contents remove from list link */
>-        &.removefromlist  {
>-            margin-left : 1em;
>-            padding-right : 15px;
>+        &.removefromlist {
>+            margin-left: 1em;
>+            padding-right: 15px;
>         }
>     }
> }
> 
> .ui-tabs .ui-tabs-nav li {
>-    margin-left : .4em;
>+    margin-left: .4em;
> }
> 
> .statictabs {
>     li {
>         float: right;
>-        margin-left: 0.4em;
>+        margin-left: .4em;
>+
>         a {
>             float: right;
>         }
>     }
> }
> 
>-#bookcover .no-image {
>-    margin-left : 10px;
>+#bookcover {
>+    float: right;
>+
>+    img {
>+        margin: 0 0 1em 1em;
>+    }
>+
>+     .no-image {
>+        margin-left: 10px;
>+    }
> }
> 
> th.sum {
>@@ -81,37 +146,43 @@ th.sum {
> }
> 
> th[scope=row] {
>-    text-align : left;
>+    text-align: left;
> }
> 
> fieldset {
>     &.rows {
>-        float : right;
>-        clear : right;
>+        clear: right;
>+        float: right;
>+
>         label,
>         .label {
>             float: right;
>             margin-left: 1em;
>             text-align: left;
>         }
>+
>         ol {
>             &.lradio {
>                 label {
>-                    margin-left : 0;
>+                    margin-left: 0;
>+
>                     &.lradio {
>-                        float : right;
>-                        margin-left : 1em;
>+                        float: right;
>+                        margin-left: 1em;
>                     }
>                 }
>             }
>         }
>+
>         li {
>-            float : right;
>-            clear : right;
>+            clear: right;
>+            float: right;
>+
>             &.lradio {
>                 padding-right: 8.5em;
>+
>                 label {
>-                    margin : 0 1em 0 0;
>+                    margin: 0 1em 0 0;
>                 }
>             }
>         }
>@@ -119,25 +190,30 @@ fieldset {
> }
> 
> div.rows {
>-    float : right;
>-    clear : right;
>-    span.label {
>+    float: right;
>+    clear: right;
>+
>+    .label {
>         float: right;
>         margin-left: 1em;
>         text-align: right;
>     }
>+
>     ol {
>-        margin-right : 0;
>+        margin-right: 0;
>         padding: .5em 0 0 1em;
>     }
>+
>     li {
> 
>-        float : right;
>-        clear : right;
>+        clear: right;
>+        float: right;
>     }
>+
>     ul {
>         li {
>-            margin-right : 7.3em;
>+            margin-right: 7.3em;
>+
>             &:first-child {
>                 margin-right: 0;
>             }
>@@ -146,26 +222,31 @@ div.rows {
> }
> 
> .toolbar {
>-    padding:3px 5px 5px 3px;
>+    padding: 3px 5px 5px 3px;
>+
>     label {
>-        margin-right : .5em;
>+        margin-right: .5em;
>     }
>+
>     .hold,
>     #tagsel_tag {
>         padding-right: 28px;
>     }
>+
>     li {
>         a {
>-            border-right : 1px solid #e8e8e8;
>+            border-right: 1px solid #E8E8E8;
>         }
>+
>         &:first-child {
>             a {
>-                border-right : 0;
>+                border-right: 0;
>             }
>         }
>     }
>+
>     ul {
>-        padding-right : 0;
>+        padding-right: 0;
>     }
> }
> 
>@@ -174,12 +255,12 @@ div.rows {
> }
> 
> #selections-toolbar {
>-    padding-right : 10px;
>+    padding-right: 10px;
> }
> 
> #tagsel_span input.submit,
> #tagsel_tag {
>-    padding-right : 25px;
>+    padding-right: 25px;
> }
> 
> #tagsel_span input.disabled,
>@@ -190,26 +271,16 @@ div.rows {
> #selections-toolbar input.hold.disabled:hover,
> #selections-toolbar a.disabled,
> #selections-toolbar a.disabled:hover {
>-    padding-right : 23px;
>+    padding-right: 23px;
> }
> 
> #views {
>-    padding : 0 0.2em 0.2em 2em;
>+    padding: 0 .2em .2em 2em;
> }
> 
> #bibliodescriptions,
> #isbdcontents {
>-    clear : right;
>-}
>-
>-#bookcover {
>-    float : right;
>-    .no-image {
>-        margin-left : 10px;
>-    }
>-    img {
>-        margin : 0 0 1em 1em;
>-    }
>+    clear: right;
> }
> 
> /* pagination */
>@@ -219,18 +290,20 @@ div.rows {
> 
> 
> .back {
>-    float:left;
>+    float: left;
> }
> 
> .pagination_list {
>     ul {
>-        padding-right:0px;
>+        padding-right: 0;
>     }
>+
>     li {
>         a {
>-            padding-right:0px;
>+            padding-right: 0;
>         }
>     }
>+
>     .li_pag_index {
>         float: right;
>         padding-left: 10px;
>@@ -242,134 +315,63 @@ div.rows {
>     li {
>         &.back_results {
>             a {
>-                border-right: 1px solid #D0D0D0;
>                 border-left: 1px solid #D0D0D0;
>+                border-right: 1px solid #D0D0D0;
>             }
>         }
>+
>         a,
>         span {
>-            float:right;
>+            float: right;
>         }
>     }
> }
> 
> #listResults{
>     li {
>-        margin-left:1px;
>+        margin-left: 1px;
>     }
> }
> 
> /* nav */
> .nav_pages {
>     .close_pagination {
>-        padding-left: 10px;
>         left: 3px;
>+        padding-left: 10px;
>     }
>+
>     li {
>-        float:right;
>+        float: right;
>+
>         ul {
>-            float:right;
>+            float: right;
>         }
>     }
> }
> 
> #format,
> #furthersearches {
>-    padding-right : 35px;
>+    padding-right: 35px;
> }
> 
> .highlight_controls {
>     float: right;
> }
> 
>-a.addtocart {
>-    padding-right : 35px;
>-}
>-
>-a.addtoshelf {
>-    padding-right : 35px;
>-}
>-
>-a.brief {
>-    padding-right : 27px;
>-}
>-
>-a.detail {
>-    padding-right : 27px;
>-}
>-
>-a.download {
>-    padding-right : 20px;
>-}
>-
>-a.editshelf {
>-    padding-right : 26px;
>-}
>-
>-a.empty {
>-    padding-right : 30px;
>-}
>-
>-a.hide {
>-    padding-right : 26px;
>-}
>-
>-a.highlight_toggle {
>-    padding-right : 35px;
>-}
>-
>-a.hold,
>-input.hold {
>-    padding-right : 23px;
>-}
>-
>-a.incart {
>-    padding-right : 35px;
>-}
>-
>-a.new {
>-    padding-right : 23px;
>-}
>-
>-a.print-small {
>-    padding-right : 30px;
>-}
>-
>-a.print-large {
>-    padding-right : 35px;
>-}
>-
>-a.removeitems,
>-a.deleteshelf {
>-    padding-right : 25px;
>-}
>-
>-a.reserve {
>-    padding-right : 35px;
>-}
>-
>-a.send {
>-    padding-right : 28px;
>-}
>-
>-a.tag_add {
>-    padding-right : 27px;
>-}
>-
> input.editshelf {
>-    padding-right : 29px;
>+    padding-right: 29px;
> }
> 
> .newshelf {
>-    padding-right : 28px;
>+    padding-right: 28px;
> }
> 
> .deleteshelf {
>-    padding-right : 25px;
>+    padding-right: 25px;
> }
> 
> #login4tags {
>-    padding-right : 20px;
>+    padding-right: 20px;
> }
> 
> .tag_results_input {
>@@ -378,27 +380,27 @@ input.editshelf {
> 
> #social_networks {
>     span {
>-        float : right;
>-        margin : .5em .5em .5em 0 !important;
>+        float: right;
>+        margin: .5em .5em .5em 0 !important;
>     }
>     div {
>-        float : right !important;
>-        margin : .5em .2em .5em 0 !important;
>+        float: right !important;
>+        margin: .5em .2em .5em 0 !important;
>     }
> }
> 
> #marc {
>     td,
>     th {
>-        text-align : right;
>+        text-align: right;
>     }
>     .results_summary {
>-        clear :  right;
>+        clear:  right;
>     }
> }
> 
> #plainmarc th {
>-    text-align:right;
>+    text-align: right;
> }
> 
> #renewcontrols {
>@@ -427,13 +429,15 @@ input.editshelf {
> }
> 
> #menu {
>-    border : 0 solid #D8D8D8;
>+    border: 0 solid #D8D8D8;
>     border-left-width: 1px;
>+
>     li {
>         a {
>             border-radius: 0 5px 5px 0;
>             margin-left: -1px;
>         }
>+
>         &.active {
>             a {
>                 border-left-width: 0;
>@@ -445,20 +449,20 @@ input.editshelf {
> 
> /* Search results add to cart (lists disabled) */
> .addto a.addtocart {
>-    padding-right : 33px;
>+    padding-right: 33px;
> }
> 
> .searchresults {
>     a {
>         &.highlight_toggle {
>-            padding : 0 21px 0 10px;
>+            padding: 0 21px 0 10px;
>         }
>     }
> }
> 
> .commentline .avatar {
>-    float : left;
>-    padding-right : .5em;
>+    float: left;
>+    padding-right: .5em;
> }
> 
> span.sep {
>@@ -475,9 +479,9 @@ span.sep {
> 
> .pages span:last-child,
> .pages a:last-child {
>-    border-width: 1px 0 1px 1px;
>     border-bottom-left-radius: 3px;
>     border-top-left-radius: 3px;
>+    border-width: 1px 0 1px 1px;
> }
> 
> .pages .inactive,
>@@ -493,7 +497,7 @@ span.sep {
> }
> 
> .close {
>-    left : auto;
>+    left: auto;
> }
> 
> /* Redefine a new style for Bootstrap's class "close" since we use that already */
>@@ -501,34 +505,37 @@ span.sep {
> .alert .closebtn {
>     left:-21px;
> }
>+
> .closebtn {
>-    float:left;
>+    float: left;
> }
> 
> #logo {
>-    float : right !important;
>+    float: right !important;
> }
> 
> /* Class to be added to toolbar when it starts being fixed at the top of the screen*/
> .floating {
>-    -webkit-box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, .4);
>-    box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, .4);
>+    box-shadow: 0 0 2px 3px rgba( 0, 0, 0, .4 );
> }
> 
> 
> .table {
>     .sorting_asc {
>-        padding-left: 19px;
>         background: url("../images/asc.gif") no-repeat scroll left center #ECEDE6;
>+        padding-left: 19px;
>     }
>+
>     .sorting_desc {
>         padding-left: 19px;
>         background: url("../images/desc.gif") no-repeat scroll left center #ECEDE6;
>     }
>+
>     .sorting {
>         padding-left: 19px;
>         background: url("../images/ascdesc.gif") no-repeat scroll left center #ECEDE6;
>     }
>+
>     .nosort,
>     .nosort.sorting_asc,
>     .nosort.sorting_desc,
>@@ -536,18 +543,19 @@ span.sep {
>         padding-left: 19px;
>     }
> }
>+
> .tags {
>     ul {
>-        margin-right : 0;
>+        margin-right: 0;
>     }
> }
> 
> .coverimages {
>-    float : left;
>+    float: left;
> }
> 
> #i18nMenu {
>-    margin-right : 1em;
>+    margin-right: 1em;
> }
> 
> #overdrive-results {
>@@ -556,6 +564,6 @@ span.sep {
> 
> .navbar {
>     .pull-right {
>-        float : left;
>+        float: left;
>     }
>-}
>\ No newline at end of file
>+}
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/less/mixins.less b/koha-tmpl/opac-tmpl/bootstrap/less/mixins.less
>deleted file mode 100644
>index ef5c5f8be1..0000000000
>--- a/koha-tmpl/opac-tmpl/bootstrap/less/mixins.less
>+++ /dev/null
>@@ -1,12 +0,0 @@
>-@links : #0076B2;
>-@color : #999999;
>-.shadowed {
>-    -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .2);
>-       -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .2);
>-            box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .2);
>-}
>-.border-radius-all(@radius: 3px) {
>-    -webkit-border-radius: @radius;
>-       -moz-border-radius: @radius;
>-            border-radius: @radius;
>-}
>\ No newline at end of file
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/less/opac.less b/koha-tmpl/opac-tmpl/bootstrap/less/opac.less
>deleted file mode 100644
>index 3cbfdb81e8..0000000000
>--- a/koha-tmpl/opac-tmpl/bootstrap/less/opac.less
>+++ /dev/null
>@@ -1,2641 +0,0 @@
>-@import "mixins.less";
>-body {
>-    background-color: #EAEAE6;
>-}
>-
>- /* Sticky footer styles */
>-html,
>-body {
>-    height: 100%;
>-    /* The html and body elements cannot have any padding or margin. */
>-}
>-
>-.no-js {
>-    .dateformat {
>-        display: inline;
>-        white-space: nowrap;
>-    }
>-    .modal-body {
>-        padding: 0;
>-    }
>-    .selections-toolbar {
>-        display: none;
>-    }
>-}
>-
>-.js {
>-    .dateformat {
>-        display: none;
>-    }
>-}
>-
>-/* Wrapper for page content to push down footer */
>-#wrap {
>-    min-height: 100%;
>-    height: auto !important;
>-    height: 100%;
>-    /* Negative indent footer by it's height */
>-    // margin: 0 auto -60px;
>-}
>-
>-/* Set the fixed height of the footer here */
>-#changelanguage {
>-    // height: 60px;
>-}
>-
>-.popup {
>-    padding-left : 0;
>-    padding-right: 0;
>-}
>-
>-a {
>-    color: @links;
>-    &.cancel {
>-        padding-left : 1em;
>-    }
>-    &:visited {
>-        color: @links;
>-    }
>-    &.title {
>-        font-weight: bold;
>-        font-size : 108%;
>-    }
>-    &.btn {
>-        &:visited {
>-            color : #333;
>-        }
>-    }
>-    &.btn-primary {
>-        &:visited {
>-            color : #FFF;
>-        }
>-    }
>-    &.login-link {
>-        color: #A6D8ED;
>-        font-weight: bold;
>-    }
>-}
>-
>-.ui-widget-content a,
>-.ui-widget-content a:visited {
>-    color: @links;
>-}
>-
>-h1 {
>-    font-size : 140%;
>-    line-height: 150%;
>-    &#libraryname {
>-        background: transparent url(../images/logo-koha.png) no-repeat scroll 0%;
>-        border: 0;
>-        float: left !important;
>-        margin: 0;
>-        padding: 0;
>-        width: 120px;
>-        a {
>-            border: 0;
>-            cursor: pointer;
>-            display: block;
>-            height: 0px !important;
>-            margin: 0;
>-            overflow: hidden;
>-            padding: 40px 0 0;
>-            text-decoration: none;
>-            width: 120px;
>-        }
>-    }
>-}
>-
>-h2 {
>-
>-    font-size : 130%;
>-    line-height: 150%;
>-}
>-h3 {
>-
>-    font-size : 120%;
>-    line-height: 150%;
>-}
>-h4 {
>-
>-    font-size : 110%;
>-}
>-h5 {
>-
>-    font-size : 100%;
>-}
>-
>-caption {
>-    font-size: 120%;
>-    font-weight: bold;
>-    margin : 0;
>-    text-align: left;
>-}
>-
>-input,
>-textarea {
>-    width: auto;
>-}
>-
>-.input-fluid {
>-    width : 50%;
>-}
>-
>-legend {
>-    font-size: 110%;
>-    font-weight: bold;
>-}
>-
>-table, td {
>-    background-color: #FFF;
>-}
>-
>-td {
>-    .btn {
>-        white-space: nowrap;
>-    }
>-    .btn-link {
>-        padding: 0;
>-    }
>-}
>-
>-#advsearches,
>-#booleansearch {
>-    label {
>-        display: inline;
>-    }
>-}
>-
>-#basketcount {
>-    display : inline;
>-    margin : 0;
>-    padding : 0;
>-    span {
>-        background-color : #FFC;
>-        color : #000;
>-        display : inline;
>-        font-size : 80%;
>-        font-weight : normal;
>-        margin : 0 0 0 .9em;
>-        padding : 0 .3em 0 .3em;
>-        .border-radius-all(3px);
>-    }
>-}
>-
>-
>-#members {
>-    display: block;
>-    p {
>-        color : #EEE;
>-    }
>-    a {
>-        &.logout {
>-            color : #E8583C;
>-            font-weight: bold;
>-            padding : 0 .3em 0 .3em;
>-        }
>-    }
>-}
>-
>-#koha_url p {
>-        color: #666666;
>-        float : right;
>-        margin: 0;
>-}
>-
>-#moresearches {
>-    margin: .5em 0;
>-    padding: 0 .8em;
>-    li {
>-        display: inline;
>-        white-space: nowrap;
>-        &:after {
>-            content : " | ";
>-        }
>-
>-    }
>-    ul {
>-        margin : 0;
>-    }
>-}
>-
>-#moresearches li:last-child:after {
>-    content : "";
>-}
>-
>-#news {
>-    margin : .5em 0;
>-}
>-
>-.newscontainer {
>-    border: 1px solid #ddd;
>-    border-bottom-width: 0;
>-    border-top-left-radius: 5px;
>-    border-top-right-radius: 5px;
>-}
>-
>-.newsheader {
>-    background-color: #ecede6;
>-    border-bottom: 1px solid #ddd;
>-    margin: 0;
>-    padding: 8px;
>-}
>-
>-.newsbody {
>-    padding: 8px;
>-}
>-
>-.newsfooter {
>-    border-bottom: 1px solid #ddd;
>-    font-style: italic;
>-    padding: 4px 8px;
>-}
>-
>-#opacheader {
>-    background-color: #DDD;
>-}
>-
>-#selections,
>-.selections {
>-    font-weight : bold;
>-}
>-
>-.actions {
>-    a {
>-        white-space: nowrap;
>-        &.hold {
>-            background-image : url("../images/sprite.png"); /* Place hold small */
>-            background-position : -5px -542px;
>-            background-repeat: no-repeat;
>-            margin-right : 1em;
>-            padding-left : 21px;
>-            text-decoration : none;
>-        }
>-        &.article_request {
>-            background-image : url("../images/sprite.png"); /* Place hold small */
>-            background-position : -2px -26px;
>-            background-repeat: no-repeat;
>-            margin-right : 1em;
>-            padding-left : 21px;
>-            text-decoration : none;
>-        }
>-        &.addtocart {
>-            background-image : url("../images/sprite.png"); /* Cart small */
>-            background-position : -5px -572px;
>-            background-repeat: no-repeat;
>-            margin-right : 1em;
>-            padding-left : 20px;
>-            text-decoration : none;
>-        }
>-        &.addtoshelf {
>-            background-image : url("../images/sprite.png"); /* MARC view */
>-            background-position: -5px -27px;
>-            background-repeat: no-repeat;
>-            margin-right : 1em;
>-            padding-left : 20px;
>-            text-decoration : none;
>-        }
>-        &.addtolist {
>-            background-position: -5px -27px;
>-            margin-right : 1em;
>-            padding-left : 20px;
>-            text-decoration : none;
>-        }
>-        &.tag_add {
>-            background-position: -5px -1110px;
>-            margin-right : 1em;
>-            padding-left : 20px;
>-            text-decoration : none;
>-        }
>-        /* List contents remove from list link */
>-        &.removefromlist  {
>-            background-position : -8px -690px; /* Delete */
>-            margin-right : 1em;
>-            text-decoration : none;
>-            padding-left : 15px;
>-        }
>-    }
>-}
>-
>-/* Override Bootstrap alert */
>-.alert {
>-    background: #fffbe5; /* Old browsers */
>-    background: -moz-linear-gradient(top,  #fffbe5 0%, #fff0b2 9%, #fff1a8 89%, #f7e665 100%); /* FF3.6+ */
>-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffbe5), color-stop(9%,#fff0b2), color-stop(89%,#fff1a8), color-stop(100%,#f7e665)); /* Chrome,Safari4+ */
>-    background: -webkit-linear-gradient(top,  #fffbe5 0%,#fff0b2 9%,#fff1a8 89%,#f7e665 100%); /* Chrome10+,Safari5.1+ */
>-    background: -o-linear-gradient(top,  #fffbe5 0%,#fff0b2 9%,#fff1a8 89%,#f7e665 100%); /* Opera 11.10+ */
>-    background: -ms-linear-gradient(top,  #fffbe5 0%,#fff0b2 9%,#fff1a8 89%,#f7e665 100%); /* IE10+ */
>-    background: linear-gradient(to bottom,  #fffbe5 0%,#fff0b2 9%,#fff1a8 89%,#f7e665 100%); /* W3C */
>-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffbe5', endColorstr='#f7e665',GradientType=0 ); /* IE6-9 */
>-    border-color : #D6C43B;
>-    color: #333;
>-}
>-
>-/* Override Bootstrap alert.alert-info */
>-.alert-info {
>-    background: #f4f6fa; /* Old browsers */
>-    background: -moz-linear-gradient(top,  #f4f6fa 0%, #eaeef5 4%, #e8edf6 96%, #cddbf2 100%); /* FF3.6+ */
>-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f6fa), color-stop(4%,#eaeef5), color-stop(96%,#e8edf6), color-stop(100%,#cddbf2)); /* Chrome,Safari4+ */
>-    background: -webkit-linear-gradient(top,  #f4f6fa 0%,#eaeef5 4%,#e8edf6 96%,#cddbf2 100%); /* Chrome10+,Safari5.1+ */
>-    background: -o-linear-gradient(top,  #f4f6fa 0%,#eaeef5 4%,#e8edf6 96%,#cddbf2 100%); /* Opera 11.10+ */
>-    background: -ms-linear-gradient(top,  #f4f6fa 0%,#eaeef5 4%,#e8edf6 96%,#cddbf2 100%); /* IE10+ */
>-    background: linear-gradient(to bottom,  #f4f6fa 0%,#eaeef5 4%,#e8edf6 96%,#cddbf2 100%); /* W3C */
>-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f6fa', endColorstr='#cddbf2',GradientType=0 ); /* IE6-9 */
>-    border-color : #C5D1E5;
>-    color: #333;
>-}
>-
>-/* Override Bootstrap alert.alert-success */
>-.alert-success {
>-    background: #f8ffe8; /* Old browsers */
>-    background: -moz-linear-gradient(top,  #f8ffe8 0%, #e3f5ab 4%, #dcf48d 98%, #9ebf28 100%); /* FF3.6+ */
>-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(4%,#e3f5ab), color-stop(98%,#dcf48d), color-stop(100%,#9ebf28)); /* Chrome,Safari4+ */
>-    background: -webkit-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 4%,#dcf48d 98%,#9ebf28 100%); /* Chrome10+,Safari5.1+ */
>-    background: -o-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 4%,#dcf48d 98%,#9ebf28 100%); /* Opera 11.10+ */
>-    background: -ms-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 4%,#dcf48d 98%,#9ebf28 100%); /* IE10+ */
>-    background: linear-gradient(to bottom,  #f8ffe8 0%,#e3f5ab 4%,#dcf48d 98%,#9ebf28 100%); /* W3C */
>-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#9ebf28',GradientType=0 ); /* IE6-9 */
>-    border-color : #9FBA35;
>-    color: #333;
>-}
>-
>-.breadcrumb {
>-    background-color: #F2F2EF;
>-    font-size: 85%;
>-    list-style: none outside none;
>-    margin: 10px 20px;
>-    padding: 5px 10px;
>-    .border-radius-all(7px);
>-}
>-
>-.form-inline {
>-    display : inline;
>-    padding: 0;
>-    margin: 0;
>-    fieldset {
>-        margin: 0.3em 0;
>-        padding: 0.3em;
>-    }
>-}
>-
>-.main {
>-    background-color: #FFF;
>-    border: 1px solid #D2D2CF;
>-    .border-radius-all(7px);
>-    .shadowed;
>-    margin-top : 0.5em;
>-    margin-bottom: 0.5em;
>-}
>-
>-.mastheadsearch {
>-    .border-radius-all(7px);
>-    padding: .8em;
>-    margin: .5em 0;
>-    background: #c7c7c1;
>-    /* Old browsers */
>-    background: -moz-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);
>-    /* FF3.6+ */
>-    background: -webkit-gradient(linear, left top, left bottom, color-stop(38%,#c7c7c1), color-stop(100%,#a7a7a2));
>-    /* Chrome,Safari4+ */
>-    background: -webkit-linear-gradient(top, #c7c7c1 38%,#a7a7a2 100%);
>-    /* Chrome10+,Safari5.1+ */
>-    background: -o-linear-gradient(top, #c7c7c1 38%,#a7a7a2 100%);
>-    /* Opera 11.10+ */
>-    background: -ms-linear-gradient(top, #c7c7c1 38%,#a7a7a2 100%);
>-    /* IE10+ */
>-    background: linear-gradient(to bottom, #c7c7c1 38%,#a7a7a2 100%);
>-    /* W3C */
>-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7c7c1', endColorstr='#a7a7a2',GradientType=0 );
>-    /* IE6-9 */
>-    label {
>-        font-size: 115%;
>-        font-weight: bold;
>-    }
>-}
>-
>-.navbar-inverse .brand, .navbar-inverse .nav > li > a {
>-    color: #9FE1FF;
>-    font-weight: bold;
>-}
>-
>-.navbar-fixed-bottom.navbar-static-bottom {
>-    margin-top : .5em;
>-    position: static;
>-}
>-
>-#changelanguage .nav > .active > p {
>-    padding : 0 15px;
>-}
>-
>-.table-striped tbody > tr:nth-child(odd) > td,
>-.table-striped tbody > tr:nth-child(odd) > th {
>-  background-color: #F4F4F4;
>-}
>-
>-
>-/* jQuery UI standard tabs */
>-.ui-tabs-nav .ui-tabs-active a,
>-.ui-tabs-nav a:hover,
>-.ui-tabs-nav a:focus,
>-.ui-tabs-nav a:active,
>-.ui-tabs-nav span.a {
>-    background: none repeat scroll 0 0 transparent;
>-    outline: 0 none;
>-}
>-
>-.ui-widget,
>-.ui-widget input,
>-.ui-widget select,
>-.ui-widget textarea,
>-.ui-widget button {
>-    font-family : inherit;
>-    font-size : inherit;
>-}
>-
>-ul.ui-tabs-nav li {
>-    list-style : none;
>-}
>-.ui-tabs.ui-widget-content {
>-    background : transparent none;
>-    border : 0;
>-}
>-
>-.ui-tabs .ui-tabs-panel {
>-    border : 1px solid #D8D8D8;
>-    margin-bottom: 1em;
>-}
>-.ui-tabs-nav.ui-widget-header {
>-    border : 0;
>-    background : none;
>-}
>-.ui-tabs .ui-tabs-nav li {
>-    background: #F3F3F3 none;
>-    border-color: #D8D8D8;
>-    margin-right : .4em;
>-}
>-
>-.ui-tabs .ui-tabs-nav li.ui-tabs-active {
>-    background-color : #FFF;
>-    border : 1px solid #D8D8D8;
>-    border-bottom: 0;
>-}
>-.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
>-    color : #000;
>-    font-weight : bold;
>-}
>-
>-.ui-tabs .ui-tabs-nav li.ui-state-default.ui-state-hover {
>-    background : #F3F3F3 none;
>-}
>-
>-.ui-tabs .ui-tabs-nav li.ui-tabs-active.ui-state-hover {
>-    background : #FFF none;
>-}
>-
>-.ui-tabs .ui-state-default a,
>-.ui-tabs .ui-state-default a:link,
>-.ui-tabs .ui-state-default a:visited {
>-    color: #006699;
>-}
>-
>-.ui-tabs .ui-state-hover a,
>-.ui-tabs .ui-state-hover a:link,
>-.ui-tabs .ui-state-hover a:visited {
>-    color: #990033;
>-}
>-
>-.statictabs {
>-    ul {
>-        background: none repeat scroll 0 0 transparent;
>-        border: 0 none;
>-        margin: 0;
>-        padding: 0.2em 0.2em 0;
>-        border-bottom-right-radius: 4px;
>-        border-bottom-left-radius: 4px;
>-        border-top-right-radius: 4px;
>-        border-top-left-radius: 4px;
>-        color: #222222;
>-        font-weight: bold;
>-        font-size: 100%;
>-        line-height: 1.3;
>-        list-style: none outside none;
>-        outline: 0 none;
>-        text-decoration: none;
>-        &:before {
>-            content: "";
>-            display: table;
>-        }
>-        &:after {
>-            clear: both;
>-            content: "";
>-            display: table;
>-        }
>-    }
>-    li {
>-        background: none repeat scroll 0 0 #E6F0F2;
>-        border: 1px solid #B9D8D9;
>-        border-bottom: 0 none !important;
>-        border-top-right-radius: 4px;
>-        border-top-left-radius: 4px;
>-        float: left;
>-        list-style: none outside none;
>-        margin-bottom: 0;
>-        margin-right: 0.4em;
>-        padding: 0;
>-        position: relative;
>-        white-space: nowrap;
>-        top: 1px;
>-        color: #555555;
>-        font-weight: normal;
>-        &.active {
>-            background-color: #FFFFFF;
>-            color: #212121;
>-            font-weight: normal;
>-            padding-bottom: 1px;
>-        }
>-        a {
>-            color: #004D99;
>-            cursor: pointer;
>-            float: left;
>-            padding: 0.5em 1em;
>-            text-decoration: none;
>-            &:hover {
>-                background-color : #EDF4F5;
>-                border-top-right-radius: 4px;
>-                border-top-left-radius: 4px;
>-                color : #538200;
>-            }
>-        }
>-        &.active {
>-            a {
>-                color: #000000;
>-                font-weight: bold;
>-                cursor: text;
>-                background: none repeat scroll 0 0 transparent;
>-                outline: 0 none;
>-            }
>-        }
>-    }
>-    .tabs-container {
>-        border: 1px solid #B9D8D9;
>-        background: none repeat scroll 0 0 transparent;
>-        display: block;
>-        padding: 1em 1.4em;
>-        border-bottom-right-radius: 4px;
>-        border-bottom-left-radius: 4px;
>-        color: #222222;
>-    }
>-}
>-
>-/* End jQueryUI tab styles */
>-
>-/* jQuery UI Datepicker */
>-.ui-datepicker table {width: 100%; font-size: .9em; border : 0; border-collapse: collapse; margin:0 0 .4em; }
>-.ui-datepicker th { background : transparent none; padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
>-
>-.ui-datepicker-trigger {
>-    vertical-align: middle;
>-    margin : 0 3px;
>-}
>-.ui-datepicker {
>-    .shadowed;
>-}
>-/* End jQueryUI datepicker styles */
>-
>-
>-/* jQueryUI Core */
>-
>-.ui-widget-content {
>-    border: 1px solid #AAA;
>-    background: #ffffff none;
>-    color: #222222;
>-}
>-.ui-widget-header {
>-    border: 1px solid #AAA;
>-    background: #E6F0F2 none;
>-    color: #222222;
>-    font-weight: bold;
>-}
>-.ui-state-default,
>-.ui-widget-content .ui-state-default,
>-.ui-widget-header .ui-state-default {
>-    border: 1px solid #AAA;
>-    background: #F4F8F9 none;
>-    font-weight: normal;
>-    color: #555555;
>-}
>-.ui-state-hover,
>-.ui-widget-content .ui-state-hover,
>-.ui-widget-header .ui-state-hover,
>-.ui-state-focus,
>-.ui-widget-content .ui-state-focus,
>-.ui-widget-header .ui-state-focus {
>-    border: 1px solid #AAA;
>-    background: #E6F0F2 none;
>-    font-weight: normal;
>-    color: #212121;
>-}
>-.ui-state-active,
>-.ui-widget-content .ui-state-active,
>-.ui-widget-header .ui-state-active {
>-    border: 1px solid #aaaaaa;
>-    background: #ffffff none;
>-    font-weight: normal;
>-    color: #212121;
>-}
>-.ui-state-highlight,
>-.ui-widget-content .ui-state-highlight,
>-.ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1;
>-    background: #fbf9ee;
>-    color: #363636;
>-}
>-.ui-state-error,
>-.ui-widget-content .ui-state-error,
>-.ui-widget-header .ui-state-error {border: 1px solid #cd0a0a;
>-    background: #fef1ec;
>-    color: #cd0a0a;
>-}
>-
>-/* end jQueryUI core */
>-
>-/* jQueryUI autocomplete */
>-
>-.ui-autocomplete {
>-    position: absolute;
>-    cursor: default;
>-    .shadowed;
>-}
>-.ui-autocomplete.ui-widget-content .ui-state-hover {
>-    border: 1px solid #AAA;
>-    background: #E6F0F2 none;
>-    font-weight: normal;
>-    color: #212121;
>-}
>-.ui-autocomplete-loading {
>-    background: #FFF url("../../img/loading-small.gif") right center no-repeat;
>-}
>-.ui-menu li {
>-    list-style:none;
>-}
>-
>-/* end jQueryUI autocomplete */
>-
>-
>-
>-th {
>-    background-color: #ECEDE6;
>-}
>-
>-.item-thumbnail {
>-    max-width: none;
>-}
>-
>-.no-image {
>-    background-color : #FFF;
>-    border: 1px solid #AAA;
>-    color : #979797;
>-    display:block;
>-    font-size : 86%;
>-    font-weight : bold;
>-    text-align : center;
>-    width : 75px;
>-    .border-radius-all(3px);
>-}
>-
>-#bookcover .no-image {
>-    margin-right : 10px;
>-    margin-bottom : 10px;
>-}
>-
>-td.overdue {
>-    color : #cc3333;
>-}
>-table {
>-    font-size: 90%;
>-}
>-th.sum {
>-    text-align: right;
>-}
>-
>-td.sum {
>-    background-color: #FFC;
>-    font-weight: bold;
>-}
>-
>-th[scope=row] {
>-    background-color: transparent;
>-    text-align : right;
>-}
>-
>-.required {
>-    color : #C00;
>-}
>-
>-.label {
>-    background-color: transparent;
>-    color: inherit;
>-    display: inline;
>-    font-weight: normal;
>-    padding : 0;
>-    text-shadow: none;
>-}
>-
>-.blabel {
>-    background-color: #999999;
>-    border-radius: 3px;
>-    color: #ffffff;
>-    display: inline-block;
>-    font-weight: bold;
>-    padding: 2px 4px;
>-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
>-}
>-
>-.label-important {
>-  background-color: #b94a48;
>-}
>-.label-warning {
>-  background-color: #f89406;
>-}
>-.label-success {
>-  background-color: #468847;
>-}
>-.label-info {
>-  background-color: #3a87ad;
>-}
>-.label-inverse {
>-  background-color: #333333;
>-}
>-
>-fieldset {
>-    &.rows {
>-        float : left;
>-        font-size : 90%;
>-        clear : left;
>-        margin: .9em 0 0 0;
>-        padding: 0;
>-        width: 100%;
>-        legend {
>-            font-weight: bold;
>-            font-size : 130%;
>-        }
>-        label,
>-        .label {
>-            float: left;
>-            font-weight : bold;
>-            width: 9em;
>-            margin-right: 1em;
>-            text-align: right;
>-        }
>-        label {
>-            &.lradio {
>-                float: none;
>-                margin: inherit;
>-                width: auto;
>-            }
>-        }
>-        fieldset {
>-            margin : 0;
>-            padding : .3em;
>-        }
>-        ol {
>-            padding: 1em 1em 0 1em;
>-            list-style-type: none;
>-            &.lradio {
>-                label {
>-                    width : auto;
>-                    float : none;
>-                    margin-right : 0;
>-                    &.lradio {
>-                        float : left;
>-                        width : 12em;
>-                        margin-right : 1em;
>-                    }
>-                }
>-            }
>-        }
>-        li {
>-            float : left;
>-            clear : left;
>-            padding-bottom: 1em;
>-            list-style-type: none;
>-            width: 100%;
>-            &.lradio {
>-                padding-left: 8.5em;
>-                width : auto;
>-                label {
>-                    float : none;
>-                    width : auto;
>-                    margin : 0 0 0 1em;
>-                }
>-            }
>-        }
>-        .hint {
>-            display: block;
>-            margin-left : 11em;
>-        }
>-    }
>-    &.action {
>-        clear : both;
>-        float : none;
>-        border : none;
>-        margin : 0;
>-        padding : 1em 0 .3em 0;
>-        width : auto;
>-        p {
>-            margin-bottom : 1em;
>-        }
>-    }
>-    table {
>-        font-size: 100%;
>-    }
>-}
>-
>-div.rows+div.rows {
>-    margin-top : .6em;
>-}
>-
>-div.rows {
>-    float : left;
>-    clear : left;
>-    margin: 0 0 0 0;
>-    padding: 0;
>-    width: 100%;
>-    span.label {
>-        float: left;
>-        font-weight : bold;
>-        width: 9em;
>-        margin-right: 1em;
>-        text-align: left;
>-    }
>-    ol {
>-        list-style-type: none;
>-        margin-left : 0;
>-        padding: .5em 1em 0 0;
>-    }
>-    li {
>-        border-bottom :  1px solid #EEE;
>-        float : left;
>-        clear : left;
>-        padding-bottom: .2em;
>-        padding-top: .1em;
>-        list-style-type: none;
>-        width: 100%;
>-    }
>-    ul {
>-        li {
>-            margin-left : 7.3em;
>-            &:first-child {
>-                float: none;
>-                clear: none;
>-                margin-left: 0;
>-            }
>-        }
>-    }
>-    ol li li {
>-        border-bottom: 0;
>-    }
>-}
>-
>-/* different sizes for different tags in opac-tags.tt */
>-.tagweight0 {
>-    font-size: 12px;
>-}
>-
>-.tagweight1 {
>-    font-size: 14px;
>-}
>-
>-.tagweight2 {
>-    font-size: 16px;
>-}
>-
>-.tagweight3 {
>-    font-size: 18px;
>-}
>-
>-.tagweight4 {
>-    font-size: 20px;
>-}
>-
>-.tagweight5 {
>-    font-size: 22px;
>-}
>-
>-.tagweight6 {
>-    font-size: 24px;
>-}
>-
>-.tagweight7 {
>-    font-size: 26px;
>-}
>-
>-.tagweight8 {
>-    font-size: 28px;
>-}
>-
>-.tagweight9 {
>-    font-size: 30px;
>-}
>-
>-.toolbar {
>-    background-color : #EEEEEE;
>-    border : 1px solid #E8E8E8;
>-    font-size : 85%;
>-    padding:3px 3px 5px 5px;
>-    vertical-align : middle;
>-    a {
>-        white-space: nowrap;
>-    }
>-    label {
>-        display: inline;
>-        font-size: 100%;
>-        font-weight : bold;
>-        margin-left : .5em;
>-    }
>-    select {
>-        font-size: 97%;
>-        height: auto;
>-        line-height: inherit;
>-        padding: 0;
>-        margin: 0;
>-        width : auto;
>-        white-space: nowrap;
>-    }
>-    .hold,
>-    #tagsel_tag {
>-        padding-left: 28px;
>-        font-size: 97%;
>-        font-weight: bold;
>-    }
>-    #tagsel_form {
>-        margin-top : .5em;
>-    }
>-    li {
>-        display : inline;
>-        list-style : none;
>-        a {
>-            border-left : 1px solid #e8e8e8;
>-        }
>-        &:first-child {
>-            a {
>-                border-left : 0;
>-            }
>-        }
>-    }
>-    ul {
>-        padding-left : 0;
>-    }
>-}
>-
>-#basket .toolbar {
>-    padding: 7px 5px 9px 9px;
>-}
>-
>-#selections-toolbar,
>-.selections-toolbar {
>-    background: -moz-linear-gradient(top, #b2b2b2 0%, #e0e0e0 14%, #e8e8e8 100%); /* FF3.6+ */
>-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(14%,#e0e0e0), color-stop(100%,#e8e8e8)); /* Chrome,Safari4+ */
>-    background: -webkit-linear-gradient(top, #b2b2b2 0%,#e0e0e0 14%,#e8e8e8 100%); /* Chrome10+,Safari5.1+ */
>-    background: -o-linear-gradient(top, #b2b2b2 0%,#e0e0e0 14%,#e8e8e8 100%); /* Opera 11.10+ */
>-    background: -ms-linear-gradient(top, #b2b2b2 0%,#e0e0e0 14%,#e8e8e8 100%); /* IE10+ */
>-    background: linear-gradient(top, #b2b2b2 0%,#e0e0e0 14%,#e8e8e8 100%); /* W3C */
>-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */
>-    margin : 0 0 1em 0;
>-    padding-top : .5em;
>-    padding-left : 10px;
>-}
>-
>-.list-actions {
>-    display : inline;
>-}
>-
>-#tagsel_span input.submit,
>-#tagsel_tag {
>-    border : 0;
>-    background-color: transparent;
>-    font-size : 100%;
>-    color: #0076B2;
>-    cursor : pointer;
>-    background-image : url("../images/sprite.png"); /* Tags */
>-    background-position : 1px -643px;
>-    background-repeat : no-repeat;
>-    padding-left : 25px;
>-    text-decoration: none;
>-}
>-
>-#tagsel_tag.disabled {
>-    background-position : -1px -667px;
>-}
>-
>-
>-#tagsel_span input:hover,
>-#selections-toolbar input.hold:hover {
>-    color: #005580;
>-    text-decoration: underline;
>-}
>-
>-#tagsel_span input.disabled,
>-#tagsel_span input.disabled:hover,
>-#tagsel_span input.hold.disabled,
>-#tagsel_span input.hold.disabled:hover,
>-#selections-toolbar input.hold.disabled,
>-#selections-toolbar input.hold.disabled:hover,
>-#selections-toolbar a.disabled,
>-#selections-toolbar a.disabled:hover,
>-.selections-toolbar a.disabled,
>-.selections-toolbar a.disabled:hover {
>-    color: #888888;
>-    text-decoration: none;
>-    padding-left : 23px;
>-}
>-
>-.results_summary {
>-    display: block;
>-    font-size : 85%;
>-    color: #707070;
>-    padding : 0 0 .5em 0;
>-    .results_summary {
>-        font-size : 100%;
>-    }
>-    &.actions {
>-        margin-top : .5em;
>-    }
>-    &.tagstatus {
>-        display: inline;
>-    }
>-    .label {
>-        color: #202020;
>-    }
>-    a {
>-        font-weight: normal;
>-    }
>-}
>-
>-#views {
>-    margin-bottom : .5em;
>-    padding : 0 2em 0.2em 0.2em;
>-}
>-
>-.view {
>-    background-color : #F3F3F3;
>-    border: 1px solid #C9C9C9;
>-    border-radius: 4px;
>-    display: inline-block;
>-    padding: 0.2em 0.5em;
>-    white-space: nowrap;
>-}
>-
>-#bibliodescriptions,
>-#isbdcontents {
>-    clear : left;
>-    margin-top : .5em;
>-}
>-
>-.view {
>-    a,
>-    span {
>-        background-image: url("../images/sprite.png");
>-        background-repeat : no-repeat;
>-        font-size : 87%;
>-        padding-left: 15px;
>-        text-decoration: none;
>-    }
>-}
>-
>-.view {
>-    a {
>-        font-weight : normal;
>-    }
>-}
>-
>-.current-view {
>-    background-color: #fff;
>-    font-weight: bold;
>-}
>-
>-#MARCview {
>-    background-position: -9px -27px;
>-}
>-#ISBDview {
>-    background-position: -10px -56px;
>-}
>-#Normalview {
>-    background-position: -8px 3px;
>-}
>-
>-#bookcover {
>-    float : left;
>-    margin : 0;
>-    padding : 0;
>-    .no-image {
>-        margin-right : 10px;
>-        margin-bottom : 10px;
>-    }
>-    img {
>-        margin : 0 1em 1em 0;
>-    }
>-}
>-
>-/* pagination */
>-.results-pagination {
>-    position: absolute;
>-    top:32px;
>-    left: -1px;
>-    width: 100%;
>-    height:auto;
>-    border: 1px solid #D0D0D0;
>-    display: none;
>-    background-color:#F3F3F3;
>-    padding-bottom:10px;
>-    z-index: 100;
>-}
>-
>-
>-.back {
>-    float:right;
>-    input {
>-        background:none!important;
>-        color:#999!important;
>-    }
>-}
>-
>-.pagination_list {
>-    ul {
>-        padding-top: 40px;
>-        padding-left:0px;
>-    }
>-    li {
>-        list-style:none;
>-        float:bottom;
>-        padding:4px;
>-        color:#999;
>-        &.highlight {
>-           background-color : #F3F3F3;
>-           border-top : 1px solid #DDDDDD;
>-           border-bottom : 1px solid #DDDDDD;
>-        }
>-        a {
>-            padding-left:0px;
>-        }
>-    }
>-    .li_pag_index {
>-        color: #999999;
>-        float: left;
>-        font-size: 15px;
>-        font-weight: bold;
>-        padding-right: 10px;
>-        text-align: right;
>-        width: 13px;
>-    }
>-}
>-
>-.nav_results {
>-    background-color: #F3F3F3;
>-    border: 1px solid #D0D0D0;
>-    font-size: 95%;
>-    font-weight: bold;
>-    margin-top: 0.5em;
>-    position:relative;
>-    .l_Results {
>-        a {
>-            background:#E1E1E1 url("../images/sprite.png") no-repeat 0px -504px; /* Browse results menu */
>-            color:#006699;
>-            display:block;
>-            padding:8px 28px;
>-            text-decoration:none;
>-        }
>-        &:hover {
>-            background-color:#D9D9D9;
>-        }
>-    }
>-}
>-
>-.pg_menu {
>-    margin: 0;
>-    border-top: 1px solid #D0D0D0;
>-    white-space : nowrap;
>-    li {
>-        color:#B2B2B2;
>-        display:inline;
>-        list-style:none;
>-        margin: 0;
>-        &.back_results {
>-            a {
>-                border-left: 1px solid #D0D0D0;
>-                border-right: 1px solid #D0D0D0;
>-            }
>-        }
>-        a,
>-        span {
>-            background-color: #F3F3F3;
>-            display : block;
>-            float:left;
>-            padding:.4em .5em;
>-            text-decoration:none;
>-            font-weight:normal;
>-            text-align:center;
>-        }
>-        span {
>-            color : #B2B2B2;
>-        }
>-    }
>-}
>-
>-#listResults{
>-    li {
>-        background-color:#999999;
>-        color:#C5C5C5;
>-        font-weight:normal;
>-        display:block;
>-        margin-right:1px;
>-        font-size: 80%;
>-        padding: 0;
>-        text-align:center;
>-        min-width:18px;
>-        &:hover {
>-            background-color:#006699;
>-        }
>-        a {
>-            color:#FFFFFF;
>-            font-weight:normal;
>-        }
>-    }
>-}
>-
>-/* nav */
>-.nav_pages {
>-    .close_pagination {
>-        padding-right: 10px;
>-        position: absolute;
>-        right: 3px;
>-        top: -25px;
>-    }
>-    .close_pagination a {
>-        text-decoration:none!important;
>-    }
>-    ul {
>-        padding-top: 10px;
>-    }
>-    li {
>-        list-style:none;
>-        float:left;
>-        padding:4px;
>-        color:#999;
>-        a {
>-            text-decoration:none!important;
>-            &:hover {
>-            text-decoration:underline;
>-            }
>-        }
>-        ul {
>-            float:left;
>-        }
>-    }
>-}
>-
>-/* action buttons */
>-#action {
>-    margin : .5em 0 0 0;
>-    background-color : #F3F3F3;
>-    border : 1px solid #E8E8E8;
>-    padding-bottom : 3px;
>-    li {
>-        list-style : none;
>-        margin : .2em;
>-        padding : .3em 0;
>-    }
>-    a {
>-        font-weight: bold;
>-        text-decoration : none;
>-    }
>-}
>-
>-#export,
>-#moresearches_menu {
>-    li {
>-        padding : 0;
>-        margin : 0;
>-        a {
>-            font-weight: normal;
>-            &.menu-inactive {
>-                font-weight: bold;
>-            }
>-        }
>-    }
>-}
>-
>-#format,
>-#furthersearches {
>-    padding-left : 35px;
>-}
>-.highlight_controls {
>-    float: left;
>-}
>-a.addtocart,
>-a.addtoshelf,
>-a.brief,
>-a.deleteshelf,
>-a.deleteshelf.disabled,
>-a.detail,
>-a.download,
>-a.editshelf,
>-a.empty,
>-a.hide,
>-a.highlight_toggle,
>-a.hold,
>-a.hold.disabled,
>-a.incart,
>-a.new,
>-a.print-small,
>-a.print-large,
>-a.removeitems,
>-a.removeitems.disabled,
>-a.reserve,
>-a.article_request,
>-a.send,
>-a.tag_add,
>-a.removefromlist,
>-input.hold,
>-input.hold.disabled,
>-input.editshelf,
>-.newshelf,
>-.newshelf.disabled,
>-.deleteshelf {
>-    background-image: url("../images/sprite.png");
>-    background-repeat: no-repeat;
>-}
>-
>-
>-a.addtocart {
>-    background-position: -5px -265px; /* Cart */
>-    padding-left : 35px;
>-}
>-
>-a.addtoshelf {
>-    background-position: -5px -225px; /* Virtual shelf */
>-    padding-left : 35px;
>-}
>-
>-a.brief {
>-
>-    background-position : -2px -868px; /* Zoom out */
>-    text-decoration : none;
>-    padding-left : 27px;
>-}
>-
>-a.cartRemove {
>-    color: #cc3333;
>-    font-size : 90%;
>-    margin : 0;
>-    padding: 0;
>-}
>-
>-a.detail {
>-    background-position : -2px -898px; /* Zoom in */
>-    text-decoration : none;
>-    padding-left : 27px;
>-}
>-
>-a.download {
>-    background-position : -5px -348px; /* Download */
>-    padding-left : 20px;
>-    text-decoration : none;
>-}
>-
>-a.editshelf {
>-    background-position : 2px -348px; /* List edit */
>-    padding-left : 26px;
>-    text-decoration : none;
>-}
>-
>-a.empty {
>-    background-position : 2px -598px; /* Trash */
>-    text-decoration : none;
>-    padding-left : 30px;
>-}
>-
>-a.hide {
>-    background-position: -3px -814px; /* Close */
>-    text-decoration : none;
>-    padding-left : 26px;
>-}
>-
>-a.highlight_toggle {
>-    background-position: -5px -841px; /* Highlight */
>-    display: none;
>-    padding-left : 35px;
>-}
>-
>-a.hold,
>-input.hold {
>-    background-position : -2px -453px; /* Toolbar place hold */
>-    text-decoration : none;
>-    padding-left : 23px;
>-}
>-
>-a.hold.disabled,
>-input.hold.disabled {
>-    background-position : -5px -621px; /* Place hold disabled */
>-}
>-
>-a.incart {
>-    background-position: -5px -265px; /* Cart */
>-    color : #666;
>-    padding-left : 35px;
>-}
>-
>-a.new {
>-    background-image : url("../images/sprite.png"); /* New */
>-    background-position : -4px -922px;
>-    padding-left : 23px;
>-    text-decoration : none;
>-}
>-
>-a.print-small {
>-    background-position : 0px -423px; /* Toolbar print */
>-    text-decoration : none;
>-    padding-left : 30px;
>-}
>-
>-a.print-large {
>-    background-position : -5px -186px; /* Toolbar print */
>-    text-decoration : none;
>-    padding-left : 35px;
>-}
>-
>-a.removeitems,
>-a.deleteshelf {
>-    background-position : 2px -690px; /* Delete */
>-    text-decoration : none;
>-    padding-left : 25px;
>-}
>-
>-a.removeitems.disabled,
>-a.deleteshelf.disabled {
>-    background-position : 2px -712px; /* Delete disabled */
>-}
>-
>-a.reserve {
>-    background-position: -6px -144px; /* Place hold */
>-    padding-left : 35px;
>-}
>-
>-a.article_request {
>-    background-position: 0px -24px; /* Place article request */
>-    padding-left : 35px;
>-}
>-
>-a.send {
>-    background-position : 2px -386px; /* Email */
>-    text-decoration : none;
>-    padding-left : 28px;
>-}
>-
>-a.tag_add {
>-    background-position: 3px -1111px; /* Tag results */
>-    padding-left : 27px;
>-    text-decoration: none;
>-}
>-
>-input.hold {
>-    background-color: transparent;
>-    border : 0;
>-    color: #0076B2;
>-    font-weight: bold;
>-}
>-
>-input.editshelf {
>-    background-color: transparent;
>-    background-position : 2px -736px; /* List edit */
>-    border : 0;
>-    color : #006699;
>-    cursor : pointer;
>-    filter: none;
>-    font-size : 100%;
>-    padding-left : 29px;
>-    text-decoration : none;
>-}
>-
>-.newshelf {
>-    background-position: 2px -764px; /* List new */
>-    border : 0;
>-    color : #006699;
>-    cursor : pointer;
>-    filter: none;
>-    font-size : 100%;
>-    padding-left : 28px;
>-    text-decoration : none;
>-}
>-
>-.newshelf.disabled {
>-    background-position: -4px -791px; /* List new disabled */
>-}
>-
>-.deleteshelf {
>-    background-color: transparent;
>-    background-position : 2px -690px; /* Delete */
>-    border : 0;
>-    color : #006699;
>-    cursor : pointer;
>-    filter: none;
>-    font-size : 100%;
>-    padding-left : 25px;
>-    text-decoration : none;
>-}
>-
>-.links a {
>-    font-weight : bold;
>-}
>-
>-.deleteshelf:hover {
>-    color: #990033;
>-}
>-
>-
>-.editshelf:active,
>-.deleteshelf:active {
>-    border : 0;
>-}
>-
>-#tagslist li { display : inline; }
>-
>-#login4tags {
>-    background-image: url("../images/sprite.png"); /* Tag results disabled */
>-    background-position: -6px -1130px;
>-    background-repeat: no-repeat;
>-    padding-left : 20px;
>-    text-decoration: none;
>-}
>-
>-.tag_results_input {
>-    margin-left: 1em;
>-    padding: 0.3em;
>-    font-size: 12px;
>-    input[type="text"] {
>-        font-size: inherit;
>-        margin : 0;
>-        padding : 0;
>-    }
>-    label {
>-        display : inline;
>-    }
>-}
>-
>-.tagsinput {
>-    input[type="text"] {
>-        font-size: inherit;
>-        margin : 0;
>-        padding : 0;
>-    }
>-    label {
>-        display : inline;
>-    }
>-}
>-
>-.branch-info-tooltip {
>-    display: none;
>-}
>-
>-.ui-tooltip-content p {
>-        margin: 0.3em 0;
>-}
>-
>-#social_networks {
>-    a {
>-        background: transparent url("../images/social-sprite.png") no-repeat;
>-        display: block;
>-        height : 20px !important;
>-        width : 20px;
>-        text-indent : -999em;
>-    }
>-    span {
>-        color: #274D7F;
>-        display : block;
>-        float : left;
>-        font-size: 85%;
>-        font-weight: bold;
>-        line-height: 2em;
>-        margin : .5em 0 .5em .5em !important;
>-    }
>-    div {
>-        float : left !important;
>-        margin : .5em 0 .5em .2em !important;
>-    }
>-    #facebook {
>-        background-position : -7px -35px;
>-    }
>-    #twitter {
>-        background-position : -7px -5px;
>-    }
>-    #linkedin {
>-        background-position : -7px -95px;
>-    }
>-    #delicious {
>-        background-position : -7px -66px;
>-    }
>-    #email {
>-        background-position : -7px -126px;
>-    }
>-}
>-
>-#marc {
>-    td,
>-    th {
>-        background-color : transparent;
>-        border : 0;
>-        padding: 3px 5px;
>-        text-align : left;
>-    }
>-    td:first-child {
>-        text-indent : 2em;
>-    }
>-    p {
>-        padding-bottom: .6em;
>-        .label {
>-            font-weight : bold;
>-        }
>-    }
>-    ul {
>-        padding-bottom: .6em;
>-    }
>-    .results_summary {
>-        clear :  left;
>-        ul {
>-            display : inline;
>-            float :  none;
>-            clear :  none;
>-            margin: 0;
>-            padding: 0;
>-            list-style : none;
>-        }
>-        li {
>-            display: inline;
>-        }
>-    }
>-}
>-
>-#items,
>-#items td
>-#items th {
>-    border : 1px solid #EEE;
>-    font-size : 90%;
>-}
>-
>-#plainmarc table { border: 0; margin: .7em 0 0 0; font-family: monospace; font-size: 95%; }
>-#plainmarc th { background-color : #FFF; border: 0; white-space: nowrap; text-align:left; vertical-align: top; padding: 2px; }
>-#plainmarc td { border: 0; padding : 2px; vertical-align: top; }
>-
>-#renewcontrols {
>-     float: right;
>-     font-size: 66%;
>-}
>-
>-#renewcontrols a {
>-    background-repeat : no-repeat;
>-    text-decoration:none;
>-    padding : .1em .4em;
>-    padding-left : 18px;
>-}
>-
>-#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;
>-}
>-
>-.authref {
>-    text-indent: 2em;
>-}
>-
>-.authref .label {
>-    font-style: italic;
>-}
>-
>-.authstanza {
>-    margin-top: 1em;
>-}
>-
>-.authstanzaheading {
>-    font-weight: bold;
>-}
>-.authorizedheading {
>-    font-weight: bold;
>-}
>-.authstanza li {
>-    margin-left: 0.5em;
>-}
>-.authres_notes, .authres_seealso, .authres_otherscript {
>-  padding-top: .5em;
>-}
>-.authres_notes {
>-  font-style: italic;
>-}
>-
>-#didyoumean {
>-    background-color: #EEE;
>-    border: 1px solid #E8E8E8;
>-    box-sizing: border-box;
>-    margin: .5em 1.5em;
>-    text-align: left;
>-    padding: 0.5em;
>-    .border-radius-all(3px);
>-
>-    &.dym-loaded {
>-        border-color: #F4ECBE;
>-        background-color: #FFFBEA;
>-    }
>-}
>-
>-.suggestionlabel {
>-    font-weight: bold;
>-}
>-
>-.searchsuggestion {
>-    padding: 0.2em 0.5em;
>-    display: inline-block;
>-}
>-
>-.authlink {
>-    padding-left: 0.25em;
>-}
>-#hierarchies a {
>-    font-weight: normal;
>-    text-decoration: underline;
>-    color: #069;
>-}
>-
>-#hierarchies a:hover {
>-    color: #990033;
>-}
>-
>-#top-pages {
>-    margin: 0 0 0.5em;
>-}
>-.dropdown-menu > li > a {
>-    font-size: 90%;
>-}
>-a.listmenulink:link,
>-a.listmenulink:visited {
>-    color : #0076B2;
>-    font-weight: bold;
>-}
>-a.listmenulink:hover,
>-a.listmenulink:active {
>-    color : #FFF;
>-    font-weight: bold;
>-}
>-#cartDetails,
>-#cartUpdate,
>-#holdDetails,
>-#listsDetails {
>-    background-color : #FFF;
>-//    border: 1px solid #739acf;
>-    border: 1px solid rgba(0, 0, 0, 0.2);
>-    border-radius: 6px 6px 6px 6px;
>-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
>-    color : black;
>-    display : none;
>-    font-size: 90%;
>-    margin : 0;
>-    padding : 8px 20px;
>-    text-align : center;
>-    width : 180px;
>-    z-index: 2;
>-}
>-#cartmenulink {
>-    white-space: nowrap;
>-}
>-
>-#search-facets,
>-#menu {
>-    border : 1px solid #D2D2CF;
>-    .border-radius-all(7px);
>-    ul {
>-       margin : 0;
>-        padding : .3em;
>-    }
>-    form {
>-       margin : 0;
>-    }
>-    h4 {
>-        font-size : 90%;
>-        margin : 0 0 .6em 0;
>-        text-align : center;
>-        a {
>-            background-color : #F2F2EF;
>-            border-radius: 8px 8px 0 0;
>-            border-bottom : 1px solid #D8D8D8;
>-            display: block;
>-            font-weight: bold;
>-            padding : .7em .2em;
>-            text-decoration: none;
>-        }
>-    }
>-    li {
>-        font-size: 90%;
>-        font-weight : bold;
>-        list-style-type : none;
>-        li {
>-            font-weight : normal;
>-            font-size : 95%;
>-            line-height: 125%;
>-            margin-bottom : 2px;
>-            padding : .1em .2em;
>-        }
>-        &.showmore {
>-            a {
>-                font-weight : bold;
>-                text-indent : 1em;
>-            }
>-        }
>-    }
>-    a {
>-        font-weight : normal;
>-        text-decoration: underline;
>-    }
>-    .facet-count {
>-        display: inline-block;
>-    }
>-
>-}
>-
>-#menu {
>-    font-size : 94%;
>-    li {
>-        list-style-type : none;
>-        a {
>-            background: #eeeeee;
>-            text-decoration : none;
>-            display : block;
>-            border : 1px solid #D8D8D8;
>-            border-radius: 5px 0 0 5px;
>-            border-bottom-color:  #999;
>-            font-size : 111%;
>-            padding : .4em .6em;
>-            margin : .4em 0;
>-            margin-right: -1px;
>-            &:hover {
>-                background: #eaeef5;
>-            }
>-        }
>-        &.active {
>-            a {
>-                background-color : #FFF;
>-                background-image : none;
>-                border-right-width: 0;
>-                font-weight : bold;
>-                &:hover {
>-                    background-color : #fff;
>-                }
>-            }
>-        }
>-    }
>-    h4 {
>-        display: none;
>-    }
>-}
>-
>-#addto {
>-    max-width : 10em;
>-}
>-
>-/* Search results add to cart (lists disabled) */
>-.addto a.addtocart {
>-    background-image: url("../images/sprite.png"); /* Cart */
>-    background-position: -5px -266px;
>-    background-repeat: no-repeat;
>-    text-decoration : none;
>-    padding-left : 33px;
>-}
>-
>-.searchresults {
>-    p {
>-        margin: 0;
>-        padding: 0 0 .6em 0;
>-        &.details {
>-           color : #979797;
>-        }
>-    }
>-    a {
>-        &.highlight_toggle {
>-            background-image: url("../images/sprite.png"); /* Highlight */
>-            background-position: -11px -841px;
>-            background-repeat: no-repeat;
>-            display: none;
>-            font-weight: normal;
>-            padding : 0 10px 0 21px;
>-        }
>-    }
>-    .commentline {
>-        background-color : rgb(255, 255, 204);
>-        background-color : rgba(255, 255, 204, 0.4);
>-        border : 1px solid #CCC;
>-        display: inline-block;
>-        .border-radius-all(3px);
>-        .shadowed;
>-        margin : .3em;
>-        padding : .4em;
>-    }
>-    .commentline.yours {
>-        background-color : rgb(239, 254, 213);
>-        background-color : rgba(239, 254, 213, 0.4);
>-    }
>-}
>-
>-.commentline .avatar {
>-    float : right;
>-    padding-left : .5em;
>-}
>-
>-/* style for search terms in catalogsearch */
>-.term {
>-    /* color : blue; */
>-    color : #990000;
>-    background-color : #FFFFCC;
>-}
>-
>-/* style for shelving location in catalogsearch */
>-.shelvingloc {
>-    display : block;
>-    font-style : italic;
>-}
>-#CheckAll,
>-#CheckNone,
>-.CheckAll,
>-.CheckNone {
>-    font-weight : normal;
>-    margin : 0 .5em;
>-    text-decoration: underline;
>-}
>-
>-span.sep {
>-    color: #888;
>-    padding: 0 .2em 0 .5em;
>-    text-shadow: 1px 1px 0 #FFF;
>-}
>-
>-/* style for PM-generated pagination bar */
>-.pages {
>-    margin: 20px 0;
>-}
>-.pages span:first-child,
>-.pages a:first-child {
>-    border-width: 1px 1px 1px 1px;
>-    border-bottom-left-radius: 3px;
>-    border-top-left-radius: 3px;
>-}
>-
>-.pages span:last-child,
>-.pages a:last-child {
>-    border-width: 1px 1px 1px 0;
>-    border-bottom-right-radius: 3px;
>-    border-top-right-radius: 3px;
>-}
>-
>-.pages .inactive,
>-.pages .currentPage,
>-.pages a {
>-    -moz-border-bottom-colors: none;
>-    -moz-border-left-colors: none;
>-    -moz-border-right-colors: none;
>-    -moz-border-top-colors: none;
>-    background-color: #FFFFFF;
>-    border-color: #DDDDDD;
>-    border-image: none;
>-    border-style: solid;
>-    border-width: 1px 1px 1px 0;
>-    float: left;
>-    font-size: 11.9px;
>-    line-height: 20px;
>-    padding: 4px 12px;
>-    text-decoration: none;
>-}
>-
>-.pages .inactive {
>-    background-color: #F5F5F5;
>-}
>-
>-.pages a[rel='last'] {
>-    border-bottom-right-radius: 3px;
>-    border-top-right-radius: 3px;
>-}
>-
>-.hold-message {
>-    background-color: #FFF0B1;
>-    display: inline-block;
>-    margin: 0.5em;
>-    padding: 0.2em 0.5em;
>-    .border-radius-all(3px);
>-}
>-.reserve_date,
>-.expiration_date {
>-    white-space: nowrap;
>-}
>-.close {
>-    color: #0088CC;
>-    position: inherit;
>-    top: auto;
>-    right : auto;
>-    filter : none;
>-    float : none;
>-    font-size: inherit;
>-    font-weight: normal;
>-    opacity: inherit;
>-    text-shadow: none;
>-}
>-
>-.close:hover {
>-    color: #538200;
>-    filter: inherit;
>-    font-size: inherit;
>-    opacity: inherit;
>-}
>-
>-/* Redefine a new style for Bootstrap's class "close" since we use that already */
>-/* Use <a class="closebtn" href="#">&times;</a> */
>-.alert .closebtn{position:relative;top:-2px;right:-21px;line-height:20px;}
>-.modal-header .closebtn{margin-top:2px;}
>-.closebtn{float:right;font-size:20px;font-weight:bold;line-height:20px;color:#000000;text-shadow:0 1px 0 #ffffff;opacity:0.2;filter:alpha(opacity=20);}.closebtn:hover{color:#000000;text-decoration:none;cursor:pointer;opacity:0.4;filter:alpha(opacity=40);}
>-button.closebtn{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;}
>-.btn-group label,
>-.btn-group select {
>-    font-size: 13px;
>-}
>-
>-.span2 select {
>-    width: 100%;
>-}
>-
>-.popup .main {
>-    font-size: 90%;
>-    padding: 0 1em;
>-}
>-
>-.popup legend {
>-    line-height: 1.5em;
>-    margin-bottom : .5em;
>-}
>-
>-.item-status {
>-    display: block;
>-    font-size: 95%;
>-    margin-bottom: .5em;
>-}
>-
>-.available {
>-    color : #006600;
>-}
>-
>-.unavailable {
>-    color: #990033;
>-}
>-
>-.waiting,.intransit,.notforloan,.checkedout,.lost,.notonhold {
>-    display : block;
>-}
>-
>-.notforloan {
>-    color : #900;
>-}
>-
>-.lost {
>-    color : #666;
>-}
>-
>-.suggestion {
>-    background-color : #EEEEEB;
>-    border : 1px solid #DDDED3;
>-    margin : 1em auto;
>-    padding : .5em;
>-    width : 35%;
>-    .border-radius-all(3px);
>-}
>-
>-.librarypulldown .transl1 {
>-    width : auto;
>-}
>-
>-.nolibrarypulldown {
>-    width : 68%;
>-}
>-
>-.nolibrarypulldown .transl1 {
>-    width : 87%;
>-}
>-
>-#opac-main-search {
>-    select {
>-        width : auto;
>-        max-width: 12em;
>-    }
>-}
>-
>-#logo {
>-    background:transparent url("../images/koha-logo-navbar.png") no-repeat scroll 0%;
>-    border: 0;
>-    float : left !important;
>-    margin:0;
>-    padding:0;
>-    width:100px;
>-    a {
>-        border:0;
>-        cursor:pointer;
>-        display:block;
>-        height:0px !important;
>-        margin:0;
>-        overflow:hidden;
>-        padding:40px 0 0;
>-        text-decoration:none;
>-        width:100px;
>-    }
>-}
>-
>-#user-menu-trigger {
>-    display: none;
>-    .icon-user {
>-        background: transparent url("../lib/bootstrap/img/glyphicons-halflings-white.png") no-repeat;
>-        background-position: -168px 0;
>-        background-repeat: no-repeat;
>-        height: 14px;
>-        line-height: 14px;
>-        margin : 12px 0 0;
>-        vertical-align: text-top;
>-        width: 14px;
>-    }
>-    .caret {
>-        border-bottom-color: #999999;
>-        border-top-color: #999999;
>-        margin-top: 18px;
>-    }
>-}
>-
>-/* Class to be added to toolbar when it starts being fixed at the top of the screen*/
>-.floating {
>-    -webkit-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, .4);
>-    box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, .4);
>-    margin-top: 0;
>-}
>-
>-.tdlabel {
>-    font-weight: bold;
>-    display: none;
>-}
>-
>-td img {
>-    max-width: none;
>-}
>-
>-#ulactioncontainer {
>-    min-width: 16em;
>-}
>-
>-.notesrow {
>-    label {
>-        font-weight: bold;
>-    }
>-    span {
>-        display: block;
>-    }
>-}
>-
>-.thumbnail-shelfbrowser span {
>-    margin: 0px auto;
>-}
>-
>-.dropdown-menu > li > a.menu-inactive:hover {
>-    background : #FFF none;
>-    color : #000;
>-}
>-
>-.table {
>-    .sorting_asc {
>-        padding-right: 19px;
>-        background: url("../images/asc.gif") no-repeat scroll right center #ECEDE6;
>-    }
>-    .sorting_desc {
>-        padding-right: 19px;
>-        background: url("../images/desc.gif") no-repeat scroll right center #ECEDE6;
>-    }
>-    .sorting {
>-        padding-right: 19px;
>-        background: url("../images/ascdesc.gif") no-repeat scroll right center #ECEDE6;
>-    }
>-    .nosort,
>-    .nosort.sorting_asc,
>-    .nosort.sorting_desc,
>-    .nosort.sorting {
>-        padding-right: 19px;
>-        background: #ECEDE6 none;
>-    }
>-    th,
>-    td {
>-        line-height: 135%;
>-    }
>-}
>-.tags, .shelves {
>-    ul {
>-        display: inline;
>-        list-style: none;
>-        margin-left : 0;
>-        li {
>-            display: inline;
>-        }
>-    }
>-}
>-.coverimages {
>-    float : right;
>-}
>-#i18nMenu {
>-    margin-left : 1em;
>-    li {
>-        font-size : 85%;
>-        li {
>-            font-size: 100%;
>-        }
>-        li > a {
>-            font-size : 100%;
>-            &:hover {
>-                color : #FFF;
>-            }
>-        }
>-        a {
>-            color : @links;
>-        }
>-    }
>-    .dropdown-menu {
>-        li {
>-            p {
>-                clear: both;
>-                display: block;
>-                font-weight: normal;
>-                line-height: 20px;
>-                padding: 3px 20px;
>-                white-space: nowrap;
>-            }
>-        }
>-    }
>-}
>-
>-#subjectsList,
>-#authorSearch {
>-    label {
>-        display :inline;
>-        vertical-align: middle;
>-    }
>-    ul {
>-        border-bottom: 1px solid #EEE;
>-        list-style-type: none;
>-        margin: 0;
>-        padding: .6em 0;
>-    }
>-    li {
>-        list-style-type: none;
>-        margin: 0;
>-        padding: 0;
>-    }
>-}
>-
>-
>-#overdrive-results, #openlibrary-results {
>-    font-weight: bold;
>-    padding-left: 1em;
>-}
>-
>-.throbber {
>-    vertical-align: middle;
>-}
>-
>-#overdrive-results-list .star-rating-control {
>-    display: block;
>-    overflow: auto;
>-}
>-
>-#shelfbrowser {
>-    table {
>-        margin : 0;
>-    }
>-    table,
>-    td,
>-    th {
>-        border : 0;
>-        font-size : 90%;
>-        text-align : center;
>-    }
>-    td,
>-    th {
>-        padding: 3px 5px;
>-        width : 20%;
>-    }
>-    a {
>-        display : block;
>-        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;
>-        }
>-    }
>-    #browser_previous {
>-        background-position: -9px -1007px;
>-    }
>-    #browser_next {
>-        background-position: -9px -1057px;
>-    }
>-}
>-
>-#holds {
>-    margin : 0 auto;
>-    max-width: 800px;
>-}
>-.holdrow {
>-    clear : both;
>-    padding: 0 1em 1em 1em;
>-    border-bottom:1px solid #CCC;
>-    margin-bottom:.5em;
>-    fieldset {
>-        border : 0;
>-        margin : 0;
>-        float: none;
>-        .label {
>-            font-size: 14px;
>-        }
>-    }
>-    label {
>-        display: inline;
>-    }
>-}
>-.hold-options {
>-    clear : both;
>-}
>-.toggle-hold-options {
>-    background-color: #eee;
>-    clear : both;
>-    display : block;
>-    font-weight : bold;
>-    margin: 1em 0;
>-    padding: .5em;
>-}
>-.copiesrow {
>-    clear : both;
>-}
>-
>-#idreambooksreadometer {
>-    float: right;
>-}
>-
>-a.idreambooksrating {
>-    font-size: 30px;
>-    color: #29ADE4;
>-    padding-left: 85px;
>-    line-height: 30px;
>-    text-decoration: none;
>-}
>-
>-.idreambookslegend {
>-    font-size: small;
>-}
>-
>-a.reviewlink,
>-a.reviewlink:visited {
>-    text-decoration: none;
>-    color: black;
>-    font-weight: normal;
>-}
>-
>-.idreambookssummary a {
>-    color: #707070;
>-    text-decoration: none;
>-}
>-
>-.idreambookssummary img,
>-.idbresult img {
>-    vertical-align: middle;
>-}
>-
>-.idbresult {
>-    color: #29ADE4;
>-    text-align: center;
>-    margin: 0.5em;
>-    padding: 0.5em;
>-}
>-
>-.idbresult a,
>-.idbresult a:visited {
>-    text-decoration: none;
>-    color: #29ADE4;
>-}
>-
>-.idbresult img {
>-    padding-right: 6px;
>-}
>-
>-.js-show {
>-    display: none;
>-}
>-
>-.modal-nojs {
>-    .modal-header,
>-    .modal-footer {
>-        display: none;
>-    }
>-}
>-
>-.contents {
>-    width: 75%;
>-}
>-
>-
>-.contentblock {
>-    font-size : 95%;
>-    line-height: 135%;
>-    position: relative;
>-    margin-left: 2em;
>-}
>-
>-.contents {
>-    .t:first-child:before {
>-        content: "â ";
>-    }
>-    .t:before {
>-        content: "\A â ";
>-        white-space: pre;
>-    }
>-    .t {
>-        font-weight: bold;
>-        display: inline;
>-    }
>-    .r {
>-        display: inline;
>-    }
>-}
>-
>-.m880 {
>-    display:block;
>-    text-align:right;
>-    float:right;
>-    width:50%;
>-    padding-left:20px;
>-}
>-
>-#memberentry-form input.error {
>-    border-color: #c00;
>-    box-shadow: 0 1px 1px #c00 inset, 0 0 8px #c00;
>-    color: red; outline: 0 none;
>-}
>-
>-#memberentry-form input.error:focus {
>-    border-color: #c00;
>-    box-shadow: 0 1px 1px #c00 inset, 0 0 8px #c00;
>-    color: red; outline: 0 none;
>-}
>-
>-#memberentry-form label.error {
>-    color: #c00; float: none;
>-    font-size: 90%;
>-}
>-
>-#illrequests {
>-    .illrequest-actions {
>-        .btn,
>-        .cancel {
>-            margin-right: 5px;
>-        }
>-        padding-top: 20px;
>-        margin-bottom: 20px;
>-    }
>-    #illrequests-create-button {
>-        margin-bottom: 20px;
>-    }
>-    .bg-info {
>-        overflow: auto;
>-        position: relative;
>-    }
>-    .bg-info {
>-        #search-summary {
>-            -webkit-transform: translateY(-50%);
>-            -ms-transform: translateY(-50%);
>-            -o-transform: translateY(-50%);
>-            transform: translateY(-50%);
>-            position: absolute;
>-            top: 50%;
>-        }
>-
>-    }
>-    #freeform-fields .custom-name {
>-        float: left;
>-        width: 8em;
>-        margin-right: 1em;
>-        text-align: right;
>-    }
>-    .dropdown:hover .dropdown-menu.nojs {
>-        display: block;
>-    }
>-}
>-
>-#dc_fieldset {
>-    border: 1px solid #dddddd;
>-    border-width: 1px;
>-    padding: 5px;
>-    border-radius: 10px
>-}
>-
>-.label_dc{
>-    display: inline;
>-    padding: 0px;
>-    margin: 0px;
>-    cursor: pointer;
>-}
>-
>-.btn-danger {
>-    color: white !important;
>-}
>-
>-.count_label {
>-    @base: #369;
>-    background-color: @base;
>-    border-radius: 5px;
>-    color: #FFF;
>-    display: inline-block;
>-    font-weight: bold;
>-    min-width: 1.5em;
>-    padding: .2em;
>-    text-align: center;
>-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
>-
>-    &:hover {
>-        background-color: lighten( @base, 20% );
>-    }
>-}
>-
>-.user_checkouts_count {
>-
>-}
>-
>-.user_overdues_count,
>-.user_fines_count {
>-    background-color: #990000;
>-    &:hover {
>-        background-color: lighten( #990000, 10% );
>-    }
>-}
>-
>-.user_holds_pending_count {
>-
>-}
>-
>-.user_holds_waiting_count {
>-    background-color: #538200;
>-    &:hover {
>-        background-color: lighten( #538200, 10% );
>-    }
>-}
>-
>-#user_summary {
>-    border: 1px solid #EAEAE6;
>-    border-radius: 7px;
>-    margin-bottom: 1em;
>-    padding-bottom: .5em;
>-
>-    h3 {
>-        background-color: #EAEAE6;
>-        border-top-left-radius: 6px;
>-        border-top-right-radius: 6px;
>-        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
>-        margin-top: 0;
>-        padding: .2em 0;
>-        text-align: center;
>-    }
>-
>-    ul {
>-        list-style-type: none;
>-        margin: 0 0 .2em 0;
>-
>-        a {
>-            display: block;
>-            font-weight: bold;
>-            padding: .2em 1em;
>-        }
>-    }
>-}
>-
>-
>-
>-@import "responsive.less";
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/less/print.less b/koha-tmpl/opac-tmpl/bootstrap/less/print.less
>deleted file mode 100644
>index 92153cc04c..0000000000
>--- a/koha-tmpl/opac-tmpl/bootstrap/less/print.less
>+++ /dev/null
>@@ -1,245 +0,0 @@
>-.noprint {
>-	display : none;
>-}
>-
>-a:link {
>-	color : #000066;
>-	text-decoration: none;
>-}
>-
>-a:visited {
>-	color : #000066;
>-	text-decoration: none;
>-}
>-
>-a:hover {
>-	color : #993300;
>-	text-decoration: none;
>-}
>-
>-a[href]:after { display:none; }
>-
>-body {
>-	background-color : #FFF;
>-	color : #333333;
>-	font-family : arial, geneva, sans-serif;
>-	font-size : 14px;
>-	margin : 0px 0px 0px 0px;
>-    word-wrap : break-word;
>-}
>-
>-caption {
>-	color : #000066;
>-	font-size : 18px;
>-	font-weight : bold;
>-	margin-top : 5px;
>-	text-align : left;
>-}
>-
>-div.table {
>-	width : 100%;
>-}
>-
>-form {
>-	margin : 0px;
>-	padding : 0px;
>-}
>-
>-h1
>-	{
>-	color : #000066;
>-	font-size : 22px;
>-	font-weight : bold;
>-	margin-bottom : 3px;
>-	margin-top : 3px;
>-}
>-
>-h2 {
>-	color : #000066;
>-	font-size : 20px;
>-	font-weight : bold;
>-	margin-bottom : 3px;
>-	margin-top : 3px;
>-}
>-
>-h3 {
>-	color : #000066;
>-	font-size : 18px;
>-	font-weight : bold;
>-	margin-bottom : 3px;
>-	margin-top : 3px;
>-}
>-
>-h4 {
>-	color : #000066;
>-	font-size : 16px;
>-	font-weight : bold;
>-	margin-bottom : 3px;
>-	margin-top : 3px;
>-}
>-
>-h5 {
>-	color : #000066;
>-	font-size : 15px;
>-	font-weight : bold;
>-	margin-bottom : 1px;
>-	margin-top : 1px;
>-}
>-
>-h6 {
>-	color : #000066;
>-	font-size : 14px;
>-	font-weight : bold;
>-	margin-bottom : 1px;
>-	margin-top : 1px;
>-}
>-
>-p {
>-	margin-top : 0px;
>-}
>-
>-table {
>-	background-color : #FFFFFF;
>-	border-bottom : 0px solid #CCCCCC;
>-	border-collapse : collapse;
>-	border-left : 0px solid #CCCCCC;
>-	margin : 3px 0px 5px 0px;
>-	padding : 0px;
>-	width : 99%;
>-}
>-
>-td {
>-	background-color : #FFF;
>-	border-bottom : 1px solid #CCCCCC;
>-	border-right : 1px solid #CCCCCC;
>-	padding : 5px 5px 5px 5px;
>-	vertical-align : top;
>-}
>-
>-td:last-child {
>-	background-color : #FFF;
>-	border-bottom : 1px solid #CCCCCC;
>-	border-right : 0px solid #CCCCCC;
>-	padding : 5px 5px 5px 5px;
>-	vertical-align : top;
>-}
>-
>-th {
>-	background-color : #E9E9E9;
>-	border-bottom : 1px solid #CCCCCC;
>-	border-right : 1px solid #CCCCCC;
>-	font-weight : bold;
>-	padding : 5px 5px 5px 5px;
>-}
>-
>-th:last-child {
>-	background-color : #E9E9E9;
>-	border-bottom : 1px solid #CCCCCC;
>-	border-right : 0px solid #CCCCCC;
>-	font-weight : bold;
>-	padding : 5px 5px 5px 5px;
>-}
>-
>-tr.highlight {
>-	background-color: #e9e9e9;
>-}
>-
>-body#basket tr.highlight {
>-	background-color : transparent;
>-}
>-
>-body#basket a {
>-	font-weight : bold;
>-}
>-
>-body#basket table {
>-	border-top : 1px solid #EEE;
>-	border-left : 1px solid #EEE;
>-}
>-body#basket td,
>-body#basket th {
>-	background-color : transparent;
>-	padding : 2px;
>-}
>-
>-body#basket th {
>-	background-color : #EEE;
>-}
>-
>-body#basket th,
>-body#basket th[scope=col] {
>-	text-align : center;
>-	vertical-align : middle;
>-}
>-
>-body#basket th[scope=row] {
>-	font-size : 89%;
>-	text-align : right;
>-	vertical-align : top;
>-	width : 10%;
>-}
>-
>-body#basket p {
>-	font-size : 85%;
>-	margin : .2em 0;
>-	text-indent : .5em;
>-}
>-
>-.error {
>-	font-weight: bold;
>-}
>-
>-.ex {
>-	font-family : "Courier New", Courier, monospace;
>-}
>-.inline {
>-	display : inline;
>-}
>-
>-.screen {
>-	display : none;
>-}
>-
>-#bookcover {
>-	float:left;
>-	margin:0pt;
>-	padding:0pt;
>-}
>-
>-#members,#opac-main-search,#opac-user-views .ui-tabs-nav,input,h2 span.hint,td.resultscontrol,.pages,.suggestion,.views,#action,#export,#bibliodescriptions .ui-tabs-nav,#addshelf,fieldset.action, .list-actions, .ft, #facetcontainer,.results_summary.actions,.koha_url,.yui-b {
>-	display : none;
>-}
>-
>-#userresults {
>-    position : absolute;
>-    right : 0px;
>-    word-wrap : break-word;
>-	display : block;
>-}
>-
>-div#userupdate input,div#userupdate textarea {
>-	display : inline;
>-	border : 0;
>-}
>-
>-#yui-main,
>-#yui-main .yui-b,
>-.yui-t1 #yui-main .yui-b {
>-    display : block !important;
>-    margin : 0 !important;
>-    padding : 0 !important;
>-    width : auto !important;
>-    float : none !important;
>-}
>-
>-.navbar, #navigation, .pages, .actions, #toolbar, #selections-toolbar, #remove-selected, .breadcrumb, #members,#opac-main-search,#opac-user-views .ui-tabs-nav,input,h2 span.hint,td.resultscontrol,.pages,.suggestion,.views,#action,#export,#bibliodescriptions .ui-tabs-nav,#addshelf,fieldset.action, .list-actions, .ft, #facetcontainer,.results_summary.actions,.koha_url,.yui-b {
>-    display : none;
>-}
>-.row-fluid {
>-    margin-top: 30px;
>-}
>-
>-#views,
>-#ulactioncontainer {
>-    display: none;
>-}
>-- 
>2.14.1

Actions: View | Diff | Splinter Review

Attachments on bug 20427: 73002 | 73003 | 73033 | 73034 | 73099 | 73100 | 73473 | 73474 | 73477 | 73478 | 77192 | 77193 | 77628