Fix dropdown items wider than dropdown itself, after #4583

// Copyright (C) 2012 Orbeon, Inc.
//
// This program is free software; you can redistribute it and/or modify it under the terms of the
// GNU Lesser General Public License as published by the Free Software Foundation; either version
// 2.1 of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
// without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
// See the GNU Lesser General Public License for more details.
//
// The full text of the license is available at http://www.gnu.org/copyleft/lesser.html

@import (reference) "form-runner-common";

body.orbeon {
    margin: 0;
    background-color: @bodyBackground;
}

.orbeon {
    font-family: @baseFontFamily;
    font-size: @frFontSize;         // Use our own preferred font size
    line-height: @baseLineHeight;
    color: @textColor;
    position: relative; // For correct positioning of the date picker

    label, button, .btn  {
        font-size: @frLabelSize;
    }

    a {
        text-decoration: underline;     // Don't remove the underline for anchors; this is an important web convention
    }

    .alert {
        margin-bottom: @baseLineHeight / 2;
        border-radius: 0;
    }

    .row-fluid [class*="span"] {
        min-height: 1px; // Bootstrap has 30px, which is different from `.row` where it is 1px
    }

    .navbar-inverse {
        .navbar-inner {
            #gradient > .vertical(@gray, @grayDarker);
            border: none;
            border-radius: 0;
            .container {
                line-height: @navbarHeight;             // Get the content of the navbar to be vertically aligned
                img, h1 { vertical-align: middle }      // See: http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Center-content-vertically-inside-a-box
                img { max-height: @navbarHeight }       // So the navbar height isn't increased if users select a larger logo image
                h1 {
                    margin: 0 0 0 15px;                 // Space between image and title
                    padding: 0;
                    font-size: 16px;
                    font-weight: normal;
                    color: @frNavBarTextColor;
                    text-shadow: none;
                    text-decoration: none;
                    display: inline;
                }
            }
        }
        margin: 10px 0;                 // Space before and after the navbar
    }

    // For fields and wrapping, see also:
    //
    // - https://github.com/orbeon/orbeon-forms/issues/1822
    // - https://github.com/orbeon/orbeon-forms/issues/3804
    // - https://github.com/orbeon/orbeon-forms/issues/3583
    // - https://github.com/orbeon/orbeon-forms/issues/4004

    // For now `.xforms-field` means "show this as a field, meaning with a border". So we only
    // cover field-ish aspects here.
    // See https://github.com/orbeon/orbeon-forms/issues/4004
    .xforms-field {
        border: 1px solid @inputBorder;
        .border-radius(@inputBorderRadius);
        .transition(~"border linear .2s, box-shadow linear .2s");
        .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
        background-color: darken(@inputBackground, 5%);
        cursor: not-allowed;
    }

    // This applies to fields, but also to the minimal appearance which doesn't show a border but acts as a textbox
    // See also `.uneditable-input`.
    .xforms-field,
    .xforms-output.xforms-output-appearance-minimal output[role = textbox],
    .xforms-output.xforms-static output
    {

        display: inline-block;
        box-sizing: border-box;         // So width: 100% works with the padding added by Bootstrap
        width: 100%;

        padding: 4px 6px;
        margin-bottom: 0;               // Override default 9px bottom margin added by Bootstrap

        line-height: @baseLineHeight;
        font-size: @frFontSize;         // Use our own preferred font size

        color: black;                   // Make text inside the fields stand out, as this is the most important information
        background-image: none;         // Liferay adds background images which don't mix well with Bootstrap

        // Let content wrap otherwise the user has no option to see the content
        white-space: normal;
        word-wrap: break-word;          // Called `overflow-wrap` as of 2013 (http://www.w3.org/TR/css3-text/#overflow-wrap-property)
        min-height: @controlsHeight;
        height: auto;
    }

    select,
    textarea,
    input[type="text"],             // Like Bootstrap, use all the specific types to exclude checkbox/radio
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="color"],
    .uneditable-input {                 // NOTE: .uneditable-input is removed from Bootstrap 3
        font-size: @frFontSize;         // Use our own preferred font size
        margin-bottom: 0;               // Override default 9px bottom margin added by Bootstrap
        color: black;                   // Make text inside the fields stand out, as this is the most important information
        box-sizing: border-box;         // So width: 100% works with the padding added by Bootstrap
        height: @controlsHeight;
        background-image: none;         // Liferay adds background images which don't mix well with Bootstrap
    }

    input:-ms-input-placeholder {
        color: #777 !important;         // On IE11, the above color overrides the color of the placeholder,
                                        // reset it to a value similar the initial value (IE11 doesn't support initial)
    }

    .xforms-output label {
        cursor: default;
    }

    // Liferay adds background images which don't mix well with Bootstrap
    input[type="submit"],
    input[type="reset"],
    input[type="button"] {
        background-image: none;
        &:hover {
            background-image: none;
        }
    }

    input[type="file"] {
        height: auto;                   // Don't specify a height because with FF the button is not native
        line-height: normal;            // Fix alignment of the "Choose file" button and "No file chosen" text on Chrome

        // Reset these as Liferay adds its own stuff and we don't look good
        //border: 0 none;               // If specified, field is not native with FF
        background-image: none;
        background-color: none;         // So that with FF field is native
        padding: 0;
    }

    // Don't set height for textarea
    textarea {
        height: @textareaHeight;
    }

    label.radio, label.checkbox {
        margin-bottom: @controlsBottomMargin;
        input[type="radio"],
        input[type="checkbox"] {
            margin-top: 3px;    // override Bootstrap
            margin-top: 0px\9;  // IE8-9
        }
    }

    select[multiple],
    .xforms-select1-appearance-compact select,
    .xforms-select-appearance-compact select {
        height: @multipleSelectHeight;
    }

    // Adapt pagination to use of xf:trigger
    .pagination ul > li {
        &> .xforms-trigger { cursor: pointer }
        &> .xforms-trigger.xforms-readonly { cursor: auto; }
        .btn-link { text-decoration: none; }

        // NOTE: Updated for Bootstrap 2.3.2
        >.btn-link, >span {
            padding: 8px 12px;
        }

        // Reset rules that can be applied by external Bootstrap .pagination a rule
        span .btn-link {
            padding: 0;
            border: none;
            line-height: normal;
        }
    }

    .input-append .add-on, .input-prepend .add-on {
        height: @baseLineHeight - 2px;
    }

    .input-append, .input-prepend {
        margin-bottom: 0;                   // Not sure why Bootstrap adds a @baseLineHeight / 2 margin here
    }

    .fr-grid tr th .xforms-label {
        margin: 0;                          //  No margin on label inside table headers as they are not next to a control
    }

    .table {
        margin: 0;                          // Bootstrap adds a bottom margin of 20px
        th {
            font-weight: normal;            // Set to bold in Bootstrap
        }
    }

    // Used in Form Builder in particular and we probably never want the humongous legends anywhere
    fieldset {
        padding-left: 0;
        padding-right: 0;

        &> legend {
            line-height: inherit;
            font-size: @frFontSize;
            margin-bottom: 10px;
        }
    }

    // Style static readonly plain text and rich text the same as Bootstrap's pre (see code.less)
    .fr-grid .xforms-static.xforms-readonly {
        &.xforms-textarea pre, &.xforms-output.xforms-mediatype-text-html {
            color: @grayDark;
            display: block;
            padding: (@baseLineHeight - 1) / 2; // We override these in form-runner-base.less, do we need this here?
            margin: 0 0 @baseLineHeight / 2;    // We override these in form-runner-base.less, do we need this here?
            font-size: @baseFontSize - 1;       // 14px to 13px
            line-height: @baseLineHeight;
            background-color: darken(@inputBackground, 5%);
            border: 1px solid @inputBorder;
            .border-radius(@inputBorderRadius);
        }

        // See https://github.com/orbeon/orbeon-forms/issues/3988
        // Use `:not(.xforms-text)` above instead once supported by the PDF renderer.
        &.xforms-output.xforms-mediatype-text-html.xforms-text {
            color: @textColor;
            padding: 0;
            margin: 0;
            background-color: @bodyBackground;
            border: none;
        }
    }

    // Force white icons
    .btn-danger,
    .btn-warning,
    .btn-primary,
    .btn-inverse,
    .xforms-trigger-appearance-xxforms-danger,
    .xforms-trigger-appearance-xxforms-warning,
    .xforms-trigger-appearance-xxforms-primary,
    .xforms-trigger-appearance-xxforms-inverse {

        i[class ^= "icon-"] {
            background-image: url(bootstrap/img/glyphicons-halflings-white.png);
        }

        i.fa {
            color: white;
        }

    }

    .navbar-inverse i { color: white }

    // Make disabled icons a bit opaque
    .disabled[class^="icon-"],
    .disabled [class^="icon-"],
    .xforms-trigger.xforms-readonly .fa,
    .fa.disabled {
        opacity: 0.4;
    }

    .xforms-trigger .fa {
        color: @textColor;
    }

    // NAV LIST
    // --------

    // Copy Bootstrap rules but add span between li and a
    // Make links block level
    .nav > li > span > .btn-link {
      display: block;
    }
    .nav > li > span > .btn-link:hover {
      text-decoration: none;
      background-color: @grayLighter;
    }

    .nav-list {
      padding: 0;
    }
    .nav-list > li > span > .btn-link,
    .nav-list .nav-header {
      width: 100%;
      text-align: left;
      margin-bottom: 1px; // so that when 2 highlighted .nav-headers are on top of each other there is some space between them
      text-shadow: 0 1px 0 rgba(255,255,255,.5);
    }
    .nav-list > li > span > .btn-link {
      padding: 6px 15px;
    }
    .nav-list > .active > span > .btn-link,
    .nav-list > .active > span > .btn-link:hover {
      color: @white;
      text-shadow: 0 -1px 0 rgba(0,0,0,.2);
      background-color: @linkColor;
    }

    // Gray out text
    .nav > .disabled > span > .btn-link {
      color: @grayLight;
    }
    // Nuke hover effects
    .nav > .disabled > span > .btn-link:hover {
      text-decoration: none;
      background-color: transparent;
      cursor: default;
    }

    // Dropdowns
    // ---------

    .dropdown-menu {

        z-index: 2000; // because YUI dialogs are > 1000

        // <a> nested one more level
        > li > span > a,
        > li > span > .btn-link {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: @baseLineHeight;
            color: @dropdownLinkColor;
            white-space: nowrap;
            text-decoration: none;
        }

        a,
        .btn-link {
            text-decoration: none;
            text-align: left;
        }

        .btn-link {
            width: 100%;
        }

        // Restore regular icons for disabled menu items (they are opacified instead, see .opacity() above)
        > li.disabled > a:hover > [class^="icon-"],
        > li.disabled > .btn-link:hover > [class^="icon-"] {
            background-image: url(/apps/fr/style/bootstrap/img/glyphicons-halflings.png);
        }
    }

    // Hover state
    // -----------
    .dropdown-menu > li > span > a:hover,
    .dropdown-menu > li > span > .btn-link:hover,
    .dropdown-menu > li > span > a:focus,
    .dropdown-menu > li > span > .btn-link:focus,
    .dropdown-submenu:hover > a,
    .dropdown-submenu:hover > .btn-link {
      text-decoration: none;
      color: @dropdownLinkColorHover;
      background-color: @dropdownLinkBackgroundHover;
      #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
    }

    // Active state
    // ------------
    .dropdown-menu > .active > span > a,
    .dropdown-menu > .active > span > .btn-link,
    .dropdown-menu > .active > span > a:hover,
    .dropdown-menu > .active > span > .btn-link:hover {
      color: @dropdownLinkColorHover;
      text-decoration: none;
      outline: 0;
      background-color: @dropdownLinkBackgroundActive;
      #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
    }

    // Disabled state
    // --------------
    // Gray out text and ensure the hover state remains gray
    .dropdown-menu > .disabled > span > a,
    .dropdown-menu > .disabled > span > .btn-link,
    .dropdown-menu > .disabled > span > a:hover,
    .dropdown-menu > .disabled > span > .btn-link:hover {
      color: @grayLight;
    }
    // Nuke hover effects
    .dropdown-menu > .disabled > span > a:hover,
    .dropdown-menu > .disabled > span > .btn-link:hover {
      text-decoration: none;
      background-color: transparent;
      background-image: none;
      cursor: default;
    }

    .xforms-trigger-appearance-xxforms-primary .btn {
      .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
    }
    .xforms-trigger-appearance-xxforms-warning .btn {
      .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
    }
    .xforms-trigger-appearance-xxforms-danger .btn {
      .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
    }
    .xforms-trigger-appearance-xxforms-success .btn {
      .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
    }
    .xforms-trigger-appearance-xxforms-info .btn {
      .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
    }
    .xforms-trigger-appearance-xxforms-inverse .btn {
      .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
    }
}

@media print {
    .orbeon {

        #xforms-form { // make contained rules strong

            // Flying Saucer doesn't like `display: table` for :before and :after
            .clearfix:before, .clearfix:after,
            .row:before, .row:after,
            .row-fluid:before, .row-fluid:after,
            .container:before, .container:after,
            .container-fluid:before, .container-fluid:after,
            .dl-horizontal:before, .dl-horizontal:after,
            .controls-row:before, .controls-row:after,
            .form-actions:before, .form-actions:after,
            .form-horizontal .control-group:before,
            .form-horizontal .control-group:after,
            .nav-tabs:before, .nav-pills:before,
            .nav-tabs:after, .nav-pills:after,
            .tabbable:before, .tabbable:after,
            .navbar-inner:before, .navbar-inner:after,
            .navbar-form:before, .navbar-form:after,
            .pager:before, .pager:after,
            .modal-footer:before, .modal-footer:after,
            .thumbnails:before, .thumbnails:after,
            .navbar-inner:before, .navbar-inner:after {
                display: block;
            }

            // Flying Saucer doesn't like `0` font sizes
            .input-append,
            .input-prepend,
            .btn-group,
            .btn-toolbar {
                font-size: .5px;
            }
        }
    }
}

// Copyright (C) 2012 Orbeon, Inc.
//
// This program is free software; you can redistribute it and/or modify it under the terms of the
// GNU Lesser General Public License as published by the Free Software Foundation; either version
// 2.1 of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
// without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
// See the GNU Lesser General Public License for more details.
//
// The full text of the license is available at http://www.gnu.org/copyleft/lesser.html

@import (reference) "form-runner-common";

body.orbeon {
    margin: 0;
    background-color: @bodyBackground;
}

.orbeon {
    font-family: @baseFontFamily;
    font-size: @frFontSize;         // Use our own preferred font size
    line-height: @baseLineHeight;
    color: @textColor;
    position: relative; // For correct positioning of the date picker

    label, button, .btn  {
        font-size: @frLabelSize;
    }

    a {
        text-decoration: underline;     // Don't remove the underline for anchors; this is an important web convention
    }

    .alert {
        margin-bottom: @baseLineHeight / 2;
        border-radius: 0;
    }

    .row-fluid [class*="span"] {
        min-height: 1px; // Bootstrap has 30px, which is different from `.row` where it is 1px
    }

    .navbar-inverse {
        .navbar-inner {
            #gradient > .vertical(@gray, @grayDarker);
            border: none;
            border-radius: 0;
            .container {
                line-height: @navbarHeight;             // Get the content of the navbar to be vertically aligned
                img, h1 { vertical-align: middle }      // See: http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Center-content-vertically-inside-a-box
                img { max-height: @navbarHeight }       // So the navbar height isn't increased if users select a larger logo image
                h1 {
                    margin: 0 0 0 15px;                 // Space between image and title
                    padding: 0;
                    font-size: 16px;
                    font-weight: normal;
                    color: @frNavBarTextColor;
                    text-shadow: none;
                    text-decoration: none;
                    display: inline;
                }
            }
        }
        margin: 10px 0;                 // Space before and after the navbar
    }

    // For fields and wrapping, see also:
    //
    // - https://github.com/orbeon/orbeon-forms/issues/1822
    // - https://github.com/orbeon/orbeon-forms/issues/3804
    // - https://github.com/orbeon/orbeon-forms/issues/3583
    // - https://github.com/orbeon/orbeon-forms/issues/4004

    // For now `.xforms-field` means "show this as a field, meaning with a border". So we only
    // cover field-ish aspects here.
    // See https://github.com/orbeon/orbeon-forms/issues/4004
    .xforms-field {
        border: 1px solid @inputBorder;
        .border-radius(@inputBorderRadius);
        .transition(~"border linear .2s, box-shadow linear .2s");
        .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
        background-color: darken(@inputBackground, 5%);
        cursor: not-allowed;
    }

    // This applies to fields, but also to the minimal appearance which doesn't show a border but acts as a textbox
    // See also `.uneditable-input`.
    .xforms-field,
    .xforms-output.xforms-output-appearance-minimal output[role = textbox],
    .xforms-output.xforms-static output
    {

        display: inline-block;
        box-sizing: border-box;         // So width: 100% works with the padding added by Bootstrap
        width: 100%;

        padding: 4px 6px;
        margin-bottom: 0;               // Override default 9px bottom margin added by Bootstrap

        line-height: @baseLineHeight;
        font-size: @frFontSize;         // Use our own preferred font size

        color: black;                   // Make text inside the fields stand out, as this is the most important information
        background-image: none;         // Liferay adds background images which don't mix well with Bootstrap

        // Let content wrap otherwise the user has no option to see the content
        white-space: normal;
        word-wrap: break-word;          // Called `overflow-wrap` as of 2013 (http://www.w3.org/TR/css3-text/#overflow-wrap-property)
        min-height: @controlsHeight;
        height: auto;
    }

    select,
    textarea,
    input[type="text"],             // Like Bootstrap, use all the specific types to exclude checkbox/radio
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="color"],
    .uneditable-input {                 // NOTE: .uneditable-input is removed from Bootstrap 3
        font-size: @frFontSize;         // Use our own preferred font size
        margin-bottom: 0;               // Override default 9px bottom margin added by Bootstrap
        color: black;                   // Make text inside the fields stand out, as this is the most important information
        box-sizing: border-box;         // So width: 100% works with the padding added by Bootstrap
        height: @controlsHeight;
        background-image: none;         // Liferay adds background images which don't mix well with Bootstrap
    }

    input:-ms-input-placeholder {
        color: #777 !important;         // On IE11, the above color overrides the color of the placeholder,
                                        // reset it to a value similar the initial value (IE11 doesn't support initial)
    }

    .xforms-output label {
        cursor: default;
    }

    // Liferay adds background images which don't mix well with Bootstrap
    input[type="submit"],
    input[type="reset"],
    input[type="button"] {
        background-image: none;
        &:hover {
            background-image: none;
        }
    }

    input[type="file"] {
        height: auto;                   // Don't specify a height because with FF the button is not native
        line-height: normal;            // Fix alignment of the "Choose file" button and "No file chosen" text on Chrome

        // Reset these as Liferay adds its own stuff and we don't look good
        //border: 0 none;               // If specified, field is not native with FF
        background-image: none;
        background-color: none;         // So that with FF field is native
        padding: 0;
    }

    // Don't set height for textarea
    textarea {
        height: @textareaHeight;
    }

    label.radio, label.checkbox {
        margin-bottom: @controlsBottomMargin;
        input[type="radio"],
        input[type="checkbox"] {
            margin-top: 3px;    // override Bootstrap
            margin-top: 0px\9;  // IE8-9
        }
    }

    select[multiple],
    .xforms-select1-appearance-compact select,
    .xforms-select-appearance-compact select {
        height: @multipleSelectHeight;
    }

    // Adapt pagination to use of xf:trigger
    .pagination ul > li {
        &> .xforms-trigger { cursor: pointer }
        &> .xforms-trigger.xforms-readonly { cursor: auto; }
        .btn-link { text-decoration: none; }

        // NOTE: Updated for Bootstrap 2.3.2
        >.btn-link, >span {
            padding: 8px 12px;
        }

        // Reset rules that can be applied by external Bootstrap .pagination a rule
        span .btn-link {
            padding: 0;
            border: none;
            line-height: normal;
        }
    }

    .input-append .add-on, .input-prepend .add-on {
        height: @baseLineHeight - 2px;
    }

    .input-append, .input-prepend {
        margin-bottom: 0;                   // Not sure why Bootstrap adds a @baseLineHeight / 2 margin here
    }

    .fr-grid tr th .xforms-label {
        margin: 0;                          //  No margin on label inside table headers as they are not next to a control
    }

    .table {
        margin: 0;                          // Bootstrap adds a bottom margin of 20px
        th {
            font-weight: normal;            // Set to bold in Bootstrap
        }
    }

    // Used in Form Builder in particular and we probably never want the humongous legends anywhere
    fieldset {
        padding-left: 0;
        padding-right: 0;

        &> legend {
            line-height: inherit;
            font-size: @frFontSize;
            margin-bottom: 10px;
        }
    }

    // Style static readonly plain text and rich text the same as Bootstrap's pre (see code.less)
    .fr-grid .xforms-static.xforms-readonly {
        &.xforms-textarea pre, &.xforms-output.xforms-mediatype-text-html {
            color: @grayDark;
            display: block;
            padding: (@baseLineHeight - 1) / 2; // We override these in form-runner-base.less, do we need this here?
            margin: 0 0 @baseLineHeight / 2;    // We override these in form-runner-base.less, do we need this here?
            font-size: @baseFontSize - 1;       // 14px to 13px
            line-height: @baseLineHeight;
            background-color: darken(@inputBackground, 5%);
            border: 1px solid @inputBorder;
            .border-radius(@inputBorderRadius);
        }

        // See https://github.com/orbeon/orbeon-forms/issues/3988
        // Use `:not(.xforms-text)` above instead once supported by the PDF renderer.
        &.xforms-output.xforms-mediatype-text-html.xforms-text {
            color: @textColor;
            padding: 0;
            margin: 0;
            background-color: @bodyBackground;
            border: none;
        }
    }

    // Force white icons
    .btn-danger,
    .btn-warning,
    .btn-primary,
    .btn-inverse,
    .xforms-trigger-appearance-xxforms-danger,
    .xforms-trigger-appearance-xxforms-warning,
    .xforms-trigger-appearance-xxforms-primary,
    .xforms-trigger-appearance-xxforms-inverse {

        i[class ^= "icon-"] {
            background-image: url(bootstrap/img/glyphicons-halflings-white.png);
        }

        i.fa {
            color: white;
        }

    }

    .navbar-inverse i { color: white }

    // Make disabled icons a bit opaque
    .disabled[class^="icon-"],
    .disabled [class^="icon-"],
    .xforms-trigger.xforms-readonly .fa,
    .fa.disabled {
        opacity: 0.4;
    }

    .xforms-trigger .fa {
        color: @textColor;
    }

    // NAV LIST
    // --------

    // Copy Bootstrap rules but add span between li and a
    // Make links block level
    .nav > li > span > .btn-link {
      display: block;
    }
    .nav > li > span > .btn-link:hover {
      text-decoration: none;
      background-color: @grayLighter;
    }

    .nav-list {
      padding: 0;
    }
    .nav-list > li > span > .btn-link,
    .nav-list .nav-header {
      width: 100%;
      text-align: left;
      margin-bottom: 1px; // so that when 2 highlighted .nav-headers are on top of each other there is some space between them
      text-shadow: 0 1px 0 rgba(255,255,255,.5);
    }
    .nav-list > li > span > .btn-link {
      padding: 6px 15px;
    }
    .nav-list > .active > span > .btn-link,
    .nav-list > .active > span > .btn-link:hover {
      color: @white;
      text-shadow: 0 -1px 0 rgba(0,0,0,.2);
      background-color: @linkColor;
    }

    // Gray out text
    .nav > .disabled > span > .btn-link {
      color: @grayLight;
    }
    // Nuke hover effects
    .nav > .disabled > span > .btn-link:hover {
      text-decoration: none;
      background-color: transparent;
      cursor: default;
    }

    // Dropdowns
    // ---------

    .dropdown-menu {

        z-index: 2000; // because YUI dialogs are > 1000

        // <a> nested one more level
        > li > span > a,
        > li > span > .btn-link {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: @baseLineHeight;
            color: @dropdownLinkColor;
            white-space: nowrap;
            text-decoration: none;
        }

        a,
        .btn-link {
            text-decoration: none;
            text-align: left;
        }

        // Restore regular icons for disabled menu items (they are opacified instead, see .opacity() above)
        > li.disabled > a:hover > [class^="icon-"],
        > li.disabled > .btn-link:hover > [class^="icon-"] {
            background-image: url(/apps/fr/style/bootstrap/img/glyphicons-halflings.png);
        }
    }

    // Hover state
    // -----------
    .dropdown-menu > li > span > a:hover,
    .dropdown-menu > li > span > .btn-link:hover,
    .dropdown-menu > li > span > a:focus,
    .dropdown-menu > li > span > .btn-link:focus,
    .dropdown-submenu:hover > a,
    .dropdown-submenu:hover > .btn-link {
      text-decoration: none;
      color: @dropdownLinkColorHover;
      background-color: @dropdownLinkBackgroundHover;
      #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
    }

    // Active state
    // ------------
    .dropdown-menu > .active > span > a,
    .dropdown-menu > .active > span > .btn-link,
    .dropdown-menu > .active > span > a:hover,
    .dropdown-menu > .active > span > .btn-link:hover {
      color: @dropdownLinkColorHover;
      text-decoration: none;
      outline: 0;
      background-color: @dropdownLinkBackgroundActive;
      #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
    }

    // Disabled state
    // --------------
    // Gray out text and ensure the hover state remains gray
    .dropdown-menu > .disabled > span > a,
    .dropdown-menu > .disabled > span > .btn-link,
    .dropdown-menu > .disabled > span > a:hover,
    .dropdown-menu > .disabled > span > .btn-link:hover {
      color: @grayLight;
    }
    // Nuke hover effects
    .dropdown-menu > .disabled > span > a:hover,
    .dropdown-menu > .disabled > span > .btn-link:hover {
      text-decoration: none;
      background-color: transparent;
      background-image: none;
      cursor: default;
    }

    .xforms-trigger-appearance-xxforms-primary .btn {
      .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
    }
    .xforms-trigger-appearance-xxforms-warning .btn {
      .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
    }
    .xforms-trigger-appearance-xxforms-danger .btn {
      .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
    }
    .xforms-trigger-appearance-xxforms-success .btn {
      .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
    }
    .xforms-trigger-appearance-xxforms-info .btn {
      .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
    }
    .xforms-trigger-appearance-xxforms-inverse .btn {
      .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
    }
}

@media print {
    .orbeon {

        #xforms-form { // make contained rules strong

            // Flying Saucer doesn't like `display: table` for :before and :after
            .clearfix:before, .clearfix:after,
            .row:before, .row:after,
            .row-fluid:before, .row-fluid:after,
            .container:before, .container:after,
            .container-fluid:before, .container-fluid:after,
            .dl-horizontal:before, .dl-horizontal:after,
            .controls-row:before, .controls-row:after,
            .form-actions:before, .form-actions:after,
            .form-horizontal .control-group:before,
            .form-horizontal .control-group:after,
            .nav-tabs:before, .nav-pills:before,
            .nav-tabs:after, .nav-pills:after,
            .tabbable:before, .tabbable:after,
            .navbar-inner:before, .navbar-inner:after,
            .navbar-form:before, .navbar-form:after,
            .pager:before, .pager:after,
            .modal-footer:before, .modal-footer:after,
            .thumbnails:before, .thumbnails:after,
            .navbar-inner:before, .navbar-inner:after {
                display: block;
            }

            // Flying Saucer doesn't like `0` font sizes
            .input-append,
            .input-prepend,
            .btn-group,
            .btn-toolbar {
                font-size: .5px;
            }
        }
    }
}


Made the controls visible again in the extended fact

@import "bootstrap/variables";
@import "bootstrap/mixins";

#container #main-wrapper header#single-factlink-header {
  padding-top: 0;  padding-bottom: 0;
  white-space: nowrap;
  height: 45px;

  .tabs {
    margin-top: -27px;
  }

  span.header-wrap {
    .ellipsis();
    width: 585px;
    display: inline-block;
    overflow: hidden;

    a.site {
      color: @linkColor;
      font-weight: bold;
      background: image-url("header-separator.png") no-repeat right;
      display: inline-block;
      line-height: 45px;
      padding-right: 20px;
    }

    span.title {
      white-space: nowrap;
      line-height: 45px;
      display: inline-block;
    }
  }
}

#extended_factlink {
  .fact-block {
    margin-left: 20px;
    border: none;

    .controls li {
      .opacity(100);
    }
  }

  h3 {
    margin: 20px 0 10px 75px;
  }

  .fact-body {
    div {
      padding: 0 0 10px;

      h2 {
        display: inline;
        font-size: 18px;
        color: #555;
        line-height: 26px;
        font-weight: normal;
      }

      .scroll-to-container {
        white-space: nowrap;
      }
    }

    sub {
      color: #888;
      font-weight: normal;
      font-size: 11px;
    }
  }

  article.fact > ul {
    margin: 0 0 0 75px;
    border-top: 1px solid #E1E1E1;

    > li {
      margin: 10px 0 0 0;
      display: inline-block;
      border-right: 1px solid #E1E1E1;

      h6 {
        color: #555555;
        font-size: 13px;
        text-transform: capitalize;
        padding: 0 12px;
      }

      div {
        text-align: center;
        font-size: 18px;
      }

      &.agree div { color: #91ad45; }
      &.disagree div { color: #d6663c; }
      &.unsure div { color: #2099e6; }
      &.interacting div {
        > ul {
          float: none;
          margin: 0;

          > li {
            text-align: left;
            display: inline-block;

            img {
              .border-radius(2px);
            }

            div {
              font-size: 12px;
              text-align: left;
            }
          }
        }
      }
      &.authority {
        padding: 0;

        div {
          span { font-size: 11px; }

          color: #333;
          vertical-align: middle;

          img {
            vertical-align: middle;
          }

          span {
            vertical-align: middle;
          }
        }
      }

      &.last {
        border: none;
      }
    }
  }
}

@import "bootstrap/variables";
@import "bootstrap/mixins";

#container #main-wrapper header#single-factlink-header {
  padding-top: 0;  padding-bottom: 0;
  white-space: nowrap;
  height: 45px;

  .tabs {
    margin-top: -27px;
  }

  span.header-wrap {
    .ellipsis();
    width: 585px;
    display: inline-block;
    overflow: hidden;

    a.site {
      color: @linkColor;
      font-weight: bold;
      background: image-url("header-separator.png") no-repeat right;
      display: inline-block;
      line-height: 45px;
      padding-right: 20px;
    }

    span.title {
      white-space: nowrap;
      line-height: 45px;
      display: inline-block;
    }
  }
}

#extended_factlink {
  .fact-block {
    margin-left: 20px;
    border: none;

    .controls {
      .opacity(100);
    }
  }

  h3 {
    margin: 20px 0 10px 75px;
  }

  .fact-body {
    div {
      padding: 0 0 10px;

      h2 {
        display: inline;
        font-size: 18px;
        color: #555;
        line-height: 26px;
        font-weight: normal;
      }

      .scroll-to-container {
        white-space: nowrap;
      }
    }

    sub {
      color: #888;
      font-weight: normal;
      font-size: 11px;
    }
  }

  article.fact > ul {
    margin: 0 0 0 75px;
    border-top: 1px solid #E1E1E1;

    > li {
      margin: 10px 0 0 0;
      display: inline-block;
      border-right: 1px solid #E1E1E1;

      h6 {
        color: #555555;
        font-size: 13px;
        text-transform: capitalize;
        padding: 0 12px;
      }

      div {
        text-align: center;
        font-size: 18px;
      }

      &.agree div { color: #91ad45; }
      &.disagree div { color: #d6663c; }
      &.unsure div { color: #2099e6; }
      &.interacting div {
        > ul {
          float: none;
          margin: 0;

          > li {
            text-align: left;
            display: inline-block;

            img {
              .border-radius(2px);
            }

            div {
              font-size: 12px;
              text-align: left;
            }
          }
        }
      }
      &.authority {
        padding: 0;

        div {
          span { font-size: 11px; }

          color: #333;
          vertical-align: middle;

          img {
            vertical-align: middle;
          }

          span {
            vertical-align: middle;
          }
        }
      }

      &.last {
        border: none;
      }
    }
  }
}