/**
 * Copyright (C) 2009 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
 */

/* NOTE: IE em factor: 0.9759 */

/* ***** Utilities ************************************************************************************************** */

.fr-clear { clear: both }

.fr-layout-table { padding: 0; margin: 0 }
.fr-layout-table tr td { width: auto; vertical-align: top }

/* ***** XForms Controls ******************************************************************************************** */

/* Make sure disabled items take precedence over display: block on other classes */
#fr-view .xforms-disabled { display: none }
#fr-view .xforms-template { display: none }
#fr-view .xforms-repeat-template { display: none }
#fr-view span.xforms-alert-inactive { display: none }
#fr-view .xforms-disabled .xforms-label { display: none }
#fr-view .xforms-case-deselected { display: none }
#fr-view .xforms-case-deselected .xforms-label { display: none }
#fr-view .fr-hidden { display: none }
.fr-grid .fr-grid-td .fr-grid-content .fr-hidden { display: none } /* for users of .fr-hidden without #fr-view */

/* Nicely position the help image */
.xforms-help-image {
    vertical-align: middle;
    display: inline;
    margin: 0 .5em 0 -1px;/* move icon to the left a bit to align it better */
    *margin-top: .25em;   /* help IE 6 position icon relatively to the label */
    padding: 0;
    float: left; /* HACK: Without the "float: left" on FF2/3 the mouseover event arrive on the label, not the help
                    image at the left of the label. */
}

.xforms-noscript .xforms-help-image {
    /* NOTE: In noscript mode, help appears last in a control for accessibility reasons */
    display: block;
    margin: 0 0 0 .5em;
}

.xforms-noscript .fr-section-title .xforms-help-image {
    display: inline;
}

/* Display alerts under each control */
.xforms-alert-active {
    display: none;
    margin-top: .2em;
    margin-left: 0;/* used to have margin here but with new colors no margin seems better */
    height: auto;
    width: auto;/*width: 100%;*/
    padding: 1px;
    font-size: inherit;/* override xforms.css */
    text-indent: 0;/* override xforms.css */
    background-image: none;/* override xforms.css */
    white-space: normal;/* override xforms.css to allow for multiline alert messages */
}

.xforms-alert-active-visited {
    display: block;
    clear: both;
}

.xforms-alert-inactive {
    display: none;/* Otherwise inactive alerts take vertical space because of defaults in xforms.css */
}

/* Display hints under each control */
.xforms-hint {
    display: block;
    margin-top: .2em;
    margin-left: 0;/* used to have margin here but with new colors no margin seems better */
    width: 100%;
}

.xforms-noscript .xforms-hint {
    /* NOTE: In noscript mode, help appears last in a control for accessibility reasons */
    float: left;
    width: auto;
}

/* Make sure text in trigger does not wrap (leads to non-native widget being used on Firefox) */
button.xforms-trigger, input.xforms-trigger, .xforms-trigger button, .xforms-trigger input { white-space: nowrap }
button.xforms-trigger img, .xforms-trigger button img { margin-right: 10px }

/* Make the button look like a link for noscript mode */
/* TODO: add *zoom: 1 for IE? */
.xforms-trigger-appearance-xxforms-minimal, .xforms-trigger-appearance-xxforms-minimal button {
    display: -moz-inline-box; display: inline-block;
    text-decoration: underline;
    font-size: inherit;
    padding: 0;
    /*vertical-align: middle;*/ /* removing this for better alignment of top links/buttons */
}

/* But for boolean inputs, no background and border (for IE) */
.xforms-type-boolean input { background: none; border: none }

/* Radio buttons */
.xforms-select1-appearance-full span { display: block; clear: both }
.xforms-select1-appearance-full span label { margin-left: .5em; margin-right: 1em }

/* Checkboxes */
.xforms-select-appearance-full span { display: block; clear: both }
.xforms-select-appearance-full span label { margin-left: .5em; margin-right: 1em }

/* Upload control information */
.xforms-upload-info {
    display: block;
    width: 100%;
    padding: 2px 2px 2px 18px;
    background: url( images/silk/attach.png ) no-repeat left center;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.xforms-upload-mediatype, .xforms-upload-size { padding-left: 1em }
.xforms-upload-remove { vertical-align: top }

/* No default highlight for repeated items */
.xforms-repeat-selected-item-1 { background-color: transparent }
.xforms-repeat-selected-item-2 { background-color: transparent }
.xforms-repeat-selected-item-3 { background-color: transparent }
.xforms-repeat-selected-item-4 { background-color: transparent }

/* Noscript help section */

.xforms-noscript .xforms-help-panel { display: block; width: auto; padding: 0 1em }
/*.xforms-noscript .xforms-help-panel dt { list-style-type: square }*/
/*.xforms-noscript .xforms-help-panel dd { display: inline  }*/
/*.xforms-noscript .xforms-help-panel dl { margin-top: 0; margin-bottom: 0 }*/
.xforms-noscript .xforms-help-panel .xforms-help-group { margin: 0 0 .5em }
.xforms-noscript .xforms-help-panel .xforms-label { display: inline }
.xforms-noscript .xforms-help-panel .xforms-help { display: inline }
.xforms-noscript .xforms-help-panel .xforms-help-anchor { display: none }
.xforms-noscript .xforms-help-panel .xforms-help-image { display: none }
.xforms-noscript .fr-help-back { margin-left: .5em }

/* ***** General Layout ********************************************************************************************* */

/* Main layout blocks */
.fr-container { *width: 100% }/* For IE6: otherwise the container can be narrower than the containing doc */
.fr-separator { clear: both }
.fr-body { padding: 0 }
.fr-footer { clear: both }

#fr-form-group {
    display: block;
    margin: .5em 1em 1em;
}

/* Language and mode selectors */
.fr-goto-content, .fr-language-choice, .fr-noscript-choice, .fr-doc-links { margin-right: 1em }
.fr-language-choice { margin-right: 0 }
.fr-doc-links { float: right }
.fr-doc-links a { margin-left: 1em }

.fr-goto-content .xforms-trigger-appearance-xxforms-minimal,
    .fr-language-choice .xforms-trigger-appearance-xxforms-minimal,
    .fr-noscript-choice .xforms-trigger-appearance-xxforms-minimal { *font-size: 100% }/* IE 6 HACK to fix the font size */
.fr-goto-content .xforms-label, .fr-language-choice .xforms-label, .fr-noscript-choice .xforms-label { display: inline; margin-right: .5em }

/* Top area */
.fr-top { display: block }

.fr-top .fr-logo img { margin-right: 1em }
.fr-top .fr-form-title {
    float: left;
    margin: 0;
    padding: 0;
    /*white-space: nowrap;*/
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.fr-top .fr-form-description {
    float: right;
    text-align: right;
    margin: 0;
    padding: .5em;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

/* Status icons */
.fr-status-icons { margin-bottom: .5em; float: left }
.fr-status-icons img { margin-right: .5em }

/* Enable noscript icon when in noscript mode */
.fr-noscript-icon { display: none }
.xforms-noscript .fr-noscript-icon { display: inline }

/* Messages */
.fr-message-success { color: green  }
.fr-message-validation-error { color: #DF731B }
.fr-message-fatal-error { color: red }
.fr-unsaved-data { color: red }
.fr-message-fatal-error .xforms-trigger { margin-left: .5em }

/* Error summary */
.xbl-fr-error-summary .fr-error-title { margin: 10px 10px 0 }
.xbl-fr-error-summary .fr-error-summary-body { padding: 0 10px 10px }

/* Table of contents */
.fr-toc { }

/* Explanation message if present */
.fr-explanation { padding: 10px }

/* Buttons */

.fr-buttons {
    float: right;
    text-align: right;
}

.fr-buttons .xforms-trigger, .fr-buttons .xforms-trigger button, .fr-buttons .xforms-trigger input {
    width: 9.5em; *width: 9em
}

/* Special sizing for expand/collapse buttons */
.fr-buttons #fr-collapse-all-button .xforms-trigger, .fr-buttons #fr-expand-all-button .xforms-trigger,
    .fr-buttons #fr-collapse-all-button .xforms-trigger button, .fr-buttons #fr-expand-all-button .xforms-trigger button {

    min-width: 2em;
    width: 2em;
    padding: 0;
}

.fr-buttons #fr-collapse-all-button img, .fr-buttons #fr-expand-all-button img {
    margin-right: 0
}

.fr-not-found p {
    margin: 2em
}

/* ***** Repeats **************************************************************************************************** */

/* Repeats: all */
.fr-repeat td { vertical-align: top; padding: 0.2em }
/* First column of the table with the number displayed */
.fr-repeat .fr-repeat-column { width: auto }
.fr-repeat {
    background-color: #EEEEEE;
    /* Fix for Firefox in cases where the top and left borders of the table are not displayed */
    margin: 1px 0 0 1px;
}

/* Repeats: shows as sections (can have multiple lines per iteration; repeated field labels) */
.fr-repeat-sections th { display: none }
.fr-repeat-sections .xforms-label { margin-top: 0 }
.fr-repeat-sections .xforms-control { display: block } /* Otherwise control shows on same line as label in certain cases */

/* Repeats: shows as table (1 line per iteration; labels used as header of table) */
.fr-repeat-table {
    border-collapse: collapse;
    width: 100%
}
.fr-repeat-table td , .fr-repeat-table th { border: 1px solid #ddd; padding: .2em .5em .2em .5em }
/* Styling for last dummy line added so IE displays the bottom border of the table */
.fr-repeat-table .fr-repeat-last-line td { border: none; padding: 0 }
.fr-repeat-table .fr-repeat-last-line { display: none }
.fr-repeat-table th { background-color: #ddd }
/* Don't show label, help, hint for controls inside a repeat-table (they are shown in the column header) */
.fr-repeat-table td .xforms-label { display: none }
.fr-repeat-table td .xforms-help-image { display: none }
.fr-repeat-table td .xforms-help { display: none }
.fr-repeat-table td .xforms-hint { display: none }
/* But if there is a nested table, show those in the label in the column header of that table */
.fr-repeat-table tr th .xforms-label { display: block; }


.fr-repeat-table .fr-repeat-column-number { width: 1.5em; text-align: right }
.fr-repeat-table .fr-repeat-column-trigger { width: 1.5em; text-align: center }
.fr-grid .fr-grid-content .fr-repeat-table .fr-repeat-column-trigger .xforms-trigger { margin-top: 0 }/* because there is a margin set for triggers in grids below */

/* ***** Dialogs **************************************************************************************************** */

/* Dialogs */
.fr-dialog { width: 400px }
.fr-dialog ol { padding-left: 3em }
.fr-dialog li { list-style-type: decimal }/* overrides YUI reset so numbers in enumeration do show */
.fr-dialog .bd p { margin: .5em 0 .5em 0 }
.fr-dialog .hd { background-color: #666699 }
.fr-dialog .bd { margin: 0 .5em .5em .5em }
.fr-dialog-icon { float: left; margin-right: 2em; margin-left: 1em; padding-bottom: 1em }
.fr-dialog-message { margin-top: .5em; padding-top: 0.5em }
.fr-dialog-buttons { text-align: right; padding-right: .5em; padding-top: .5em; padding-bottom: .5em; margin-top: .5em; border-top: 2px solid #DDDDEE; clear: both }

#fr-submission-result-dialog { width: 800px }

/* Hide header bar or minimal appearance dialogs as YUI adds one to panels */
.xforms-dialog-appearance-minimal .hd { display: none }

/* ***** Sections *************************************************************************************************** */

/* Sections */
.fr-section-container { display: block; clear: both }
.fr-section-container p { margin-top: 1em }
.fr-section-container .fr-section-open-close img { margin-right: 0 }
.fr-section-container .fr-section-open-close {
    /* Padding is designed to make the <a> box around the section open/close images a square */
    padding: 0 7px 0 7px;
}
/*.fr-section-container .fr-section-open-close:hover { background-color: #FFFFDD; border: 1px solid #FFFF88 }*/

/* For collapsible sections so that YUI animations work */
.fr-section-container div.fr-collapsible {
    overflow: hidden;
    margin-left: 22px;
    padding-bottom: .25em;
}

.fr-section-title .xforms-help-image {
    float: none;
    vertical-align: middle
}

/* ***** Grids ****************************************************************************************************** */

.fr-grid {
    width: 100%;
    border-collapse: separate;
    clear: both;
    margin: 0; /* We used to add space before grid, so grid is not right below title or previous grid, but it's better like this now right? */
}
.fr-grid tr th { text-align: left }
.fr-grid .fr-grid-content { *overflow: hidden }/* IE HACK so that scrollable images work in the table */

.fr-grid .fr-layout-table tr td { width: auto }

/* Cell content */
.fr-grid-content {
    padding: 0 0.5em 0 0.5em;      /* Add some space around control */
    *padding-right: 6px; /* To help IE move back controls within .fr-grid-content */
}

.fr-grid-content .xforms-label {
    margin-top: .25em;      /* Space between control and the one on top of this one */
    margin-bottom: 0;       /* Space between label control and control "field" */
    display: block;         /* So the margin has an effect */
}

/* Style controls or component groups */
.fr-grid-content .xforms-control, .fr-grid-content .fr-component-group {
    display: block;     /* So control is not displayed next to the help icon but on a new line */
    margin-top: 0.3em;  /* Insert some space between the label / help and the control */
    clear: both;
}

/* Restore defaults for controls within component */
.fr-grid-content .xbl-component .xforms-control { display: inline; clear: none }

.fr-grid .fr-inplace-edit .xforms-input input { width: 100% }

/* Styling common to all HTML form controls */
/* NOTE: This doesn't work well with IE 6/7, see below hand-tuned widths for IE */
.fr-grid .xforms-input input,
    .fr-grid .xforms-upload input,
    .xforms-layout-nospan .fr-grid .xforms-textarea, .xforms-layout-span .fr-grid .xforms-textarea textarea,
    .xforms-layout-nospan .fr-grid .xforms-secret, .xforms-layout-span .fr-grid xforms-secret input,
    .xforms-layout-nospan .fr-grid .xforms-select1-appearance-minimal, .xforms-layout-span .fr-grid .xforms-select1-appearance-minimal select,
    .xforms-layout-nospan .fr-grid .xforms-select1-appearance-compact, .xforms-layout-span .fr-grid .xforms-select1-appearance-compact select,
    .xforms-layout-nospan .fr-grid .xforms-select-appearance-compact, .xforms-layout-span .fr-grid .xforms-select-appearance-compact select {
    width: 100%;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

/* Make HTML editor shorter by default */
.fr-grid textarea.xforms-mediatype-text-html { height: 10em }

/* Set this again as default is 100% above */
/* NOTE: This doesn't work well with IE 6/7, see below hand-tuned widths for IE */
.fr-grid .xforms-input input.xforms-type-date,
    .fr-grid .xforms-input input.xforms-type-time {
    width: 7.5em;
}

/* Radio buttons */
.fr-grid .xforms-select1-appearance-full span input { float: left }
.fr-grid .xforms-select1-appearance-full span label { float: left; margin-right: 0 }
/* Size of text for radio button; needs to be set for every page width / columns number combination */
#doc .fr-grid-2-columns .xforms-select1-appearance-full span label { width: 21em; *width: 20.5em }

#doc4 .fr-grid-1-columns .xforms-select1-appearance-full span label { width: 68em; *width: 66em }
#doc4 .fr-grid-2-columns .xforms-select1-appearance-full span label { width: 32em; *width: 31em  }
#doc4 .fr-grid-3-columns .xforms-select1-appearance-full span label { width: 20em; *width: 19em }
#doc4 .fr-grid-4-columns .xforms-select1-appearance-full span label { width: 14.5em; *width: 13.5em }

/* Checkboxes */
.fr-grid .xforms-select-appearance-full span input { float: left }
.fr-grid .xforms-select-appearance-full span label { float: left; margin-right: 0 }

/* Size of text for checkboxes; needs to be set for every page width / columns number combination */
#doc .fr-grid-1-columns .xforms-select-appearance-full span label { width: 50em; *width: 48.8em }
#doc .fr-grid-2-columns .xforms-select-appearance-full span label { width: 22.5em; *width: 21.9em }

#doc4 .fr-grid-1-columns .xforms-select-appearance-full span label { width: 68em; *width: 66em }
#doc4 .fr-grid-2-columns .xforms-select-appearance-full span label { width: 32.2em; *width: 31em }
#doc4 .fr-grid-3-columns .xforms-select-appearance-full span label { width: 20.2em; *width: 19em }
#doc4 .fr-grid-4-columns .xforms-select-appearance-full span label { width: 14.5em; *width: 13.5em }

/* But for boolean inputs, don't size (for IE) */
.fr-grid .xforms-type-boolean input {
    width: auto;
}

.fr-grid .xforms-upload input { width: auto } /* The upload field responds to 100% width on IE, which gives strange result */
.fr-grid .xforms-select1-appearance-compact, .fr-grid .xforms-select-appearance-compact { height: 6em }

/* Image output */
.fr-grid .xforms-mediatype-image { width: 100%; overflow: auto; display: block }
.fr-grid .xforms-mediatype-image { *padding-bottom: 17px; *overflow-y: hidden }/* IE HACK */
.fr-grid .xforms-mediatype-image img { display: block }

/*  Buttons */
.fr-grid .fr-grid-content button.xforms-trigger, .fr-grid .fr-grid-content input.xforms-trigger,
    .fr-grid .fr-grid-content .xforms-trigger button, .fr-grid .fr-grid-content .xforms-trigger input { margin-top: 1.72em } /* hand-tuned so it appears at about the same pos as input fields*/
.fr-grid .fr-grid-content button.xforms-trigger, .fr-grid .fr-grid-content .yui-button input.xforms-trigger,
    .fr-grid .fr-grid-content .xforms-trigger button, .fr-grid .fr-grid-content .yui-button .xforms-trigger input { margin-top: 0 } /* except YUI buttons don't appear right with top margin! */

/* Cell widths */
.fr-grid-td { width: auto; vertical-align: top; overflow: hidden }
.fr-grid-td .fb-grid-content { width: 64em; *width: 62.4576em }

.fr-grid-2-columns .fr-grid-td { width: 50% }
#doc .fr-grid-2-columns .fr-grid-td .fr-grid-content { width: 25em; *width: 24.4em }
#doc4 .fr-grid-2-columns .fr-grid-td .fr-grid-content { width: 34em; *width: 33.1806em }

.fr-grid-3-columns .fr-grid-td { width: 33.3% }
#doc .fr-grid-3-columns .fr-grid-td .fr-grid-content { width: 16em; *width: 15.6em }
#doc4 .fr-grid-3-columns .fr-grid-td .fr-grid-content { width: 22em; *width: 21.4698em }

.fr-grid-4-columns .fr-grid-td { width: 25% }
#doc .fr-grid-4-columns .fr-grid-td .fr-grid-content { width: 11.5em; *width: 11.2em }
#doc4 .fr-grid-4-columns .fr-grid-td .fr-grid-content { width: 16.5em; *width: 15.5em }

/* Hand-tuned control widths for IE <= 7 */
/* TODO: more controls */
#doc4 .fr-grid-td .fr-grid-content .xforms-textarea { *width: 98% }
#doc4 .fr-grid-2-columns .fr-grid-td .fr-grid-content .xforms-input-input { *width: 99.5% }
#doc4 .fr-grid-3-columns .fr-grid-td .fr-grid-content .xforms-input-input { *width: 95% }
#doc4 .fr-grid-4-columns .fr-grid-td .fr-grid-content .xforms-input-input { *width: 95% }

#doc4 .fr-grid .fr-grid-td .fr-grid-content img.xforms-input-input { *width: auto } /* Undo effect of previous rule for image in minimal date picker */

#doc4 .fr-grid-td .fr-grid-content .xforms-input input.xforms-type-date,
    #doc4 .fr-grid-td .fr-grid-content .xforms-input input.xforms-type-time { *width: 7.3em }

/* ***** Print and PDF ********************************************************************************************** */

/* Textarea in output mode can contain line breaks so keep them (works w/ IE 6, Firefox) */

span.xforms-textarea { white-space: -moz-pre-wrap; white-space: pre-wrap }

.fr-print-mode .fr-section-title img { display: none }
.fr-print-mode .xforms-help-image { display: none }
.xforms-noscript .fr-print-mode .xforms-help-image { display: none }

/* This is also used for PDF generation */
@media print {
    /* Don't hide as there is no script running */
    html body form.xforms-initially-hidden { display: block }
    .fr-header { display: none }
    .fr-shadow { display: none }
    .fr-bottom { display: none }
    .fr-status-icons { display: none }
    .fr-footer { display: none }
    .fr-section-container .fr-section-open-close { display: none }
    /* Upload remove button */
    .xforms-upload-remove { display: none }
    /* Remove background attachment image */
    .xforms-upload-info { background: transparent none repeat scroll 0 0; padding-left: 2px }
    /* Don't show download link */
    .xbl-fr-attachment .xforms-output-appearance-xxforms-download { display: none }
    /* There should not be a <style> element in the body, but if there is hide it for Flying Saucer */
    style { display: none }
    /* This must now show in the PDF */
    noscript { display: none }
    /* Since only value is shown, no need for special height */
    .fr-grid .xforms-select1-appearance-compact, .fr-grid .xforms-select-appearance-compact { height: auto }
}