/*
 * The Kuali Financial System, a comprehensive financial management system for higher education.
 *
 * Copyright 2005-2016 The Kuali Foundation
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 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 Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
/*
Generic containers for columns and layouts
=============================================
 */

/* Container Utilities*/
.fl-fix {
    overflow: auto;
    zoom: 1;
}

.fl-push {
    clear: both;
}

/* Container alignment */
/* IE 6 needs inline display to prevent double margin bug (other browsers ignore it) */
.fl-force-right {
    float: right;
    display: inline;
}

.fl-force-left {
    float: left;
    display: inline;
}

.fl-centered {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Generic container, proxy for other container effects */
.fl-container {
}

/* Fixed width containers */
.fl-container-50 {
    width: 50px;
}

.fl-container-100 {
    width: 100px;
}

.fl-container-150 {
    width: 150px;
}

.fl-container-200 {
    width: 200px;
}

.fl-container-250 {
    width: 250px;
}

.fl-container-300 {
    width: 300px;
}

.fl-container-350 {
    width: 350px;
}

.fl-container-400 {
    width: 400px;
}

.fl-container-450 {
    width: 450px;
}

.fl-container-500 {
    width: 500px;
}

.fl-container-550 {
    width: 550px;
}

.fl-container-600 {
    width: 600px;
}

.fl-container-650 {
    width: 650px;
}

.fl-container-700 {
    width: 700px;
}

.fl-container-750 {
    width: 750px;
}

.fl-container-800 {
    width: 800px;
}

.fl-container-850 {
    width: 850px;
}

.fl-container-900 {
    width: 900px;
}

.fl-container-950 {
    width: 950px;
}

.fl-container-1000 {
    width: 1000px;
}

/* Flex width containers */
.fl-container-auto {
    width: auto;
}

.fl-container-flex {
    width: 100%;
    clear: both;
}

.fl-container-flex10 {
    width: 10%;
}

.fl-container-flex20 {
    width: 20%;
}

.fl-container-flex25 {
    width: 25%;
}

.fl-container-flex30 {
    width: 30%;
}

.fl-container-flex33 {
    width: 33%;
}

.fl-container-flex40 {
    width: 40%;
}

.fl-container-flex50 {
    width: 50%;
}

.fl-container-flex60 {
    width: 60%;
}

.fl-container-flex66 {
    width: 66%;
}

.fl-container-flex75 {
    width: 75%;
}

/* linearizable containers & columns */
.fl-layout-linear *,
.fl-layout-linear .fl-linearEnabled {
    overflow: visible !important;
    clear: both !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.fl-layout-linear .fl-container,
.fl-layout-linear .fl-container-100,
.fl-layout-linear .fl-container-150,
.fl-layout-linear .fl-container-200,
.fl-layout-linear .fl-container-250,
.fl-layout-linear .fl-container-300,
.fl-layout-linear .fl-container-400,
.fl-layout-linear .fl-container-750,
.fl-layout-linear .fl-container-950,
.fl-layout-linear .fl-container-auto,
.fl-layout-linear .fl-container-flex25,
.fl-layout-linear .fl-container-flex30,
.fl-layout-linear .fl-container-flex33,
.fl-layout-linear .fl-container-flex50,
.fl-layout-linear .fl-col,
.fl-layout-linear .fl-col-side,
.fl-layout-linear .fl-col-flex,
.fl-layout-linear .fl-col-main,
.fl-layout-linear .fl-col-fixed,
.fl-layout-linear .fl-col-justified {
    width: 100% !important;
    margin: auto;
    padding: 0 !important;
}

.fl-layout-linear .fl-force-left,
.fl-layout-linear .fl-force-right,
.fl-layout-linear li {
    display: block !important;
    float: none !important;
}

.fl-layout-linear .fl-linearEnabled {
    width: 100% !important; /*position:relative;*/
    display: block;
}

/* linearization opt in for special cases */

.fl-layout-linear .fl-button-left,
.fl-layout-linear .fl-button-right {
    padding: 1em;
}

/*
Layout Helpers
=============================================
*/
/* Columns: A quick column grid system */
/* Flex width columns (containers with margins and padding) */
.fl-col-justified {
    float: left;
    display: inline;
    overflow: auto;
    text-align: justify;
}

/* redundant: text alignment now in fluid.text.css */

.fl-col-flex2, .fl-col-flex3, .fl-col-flex4, .fl-col-flex5 {
    overflow: auto;
    zoom: 1;
}

.fl-col {
    float: left;
    display: inline;
}

.fl-col-flex5 .fl-col {
    width: 18.95%;
    margin-left: 0.25%;
    margin-right: 0.25%;
    padding-left: 0.25%;
    padding-right: 0.25%
}

.fl-col-flex4 .fl-col {
    width: 24%;
    margin-left: 0.25%;
    margin-right: 0.25%;
    padding-left: 0.25%;
    padding-right: 0.25%
}

.fl-col-flex3 .fl-col {
    width: 32.33%;
    margin-left: 0.25%;
    margin-right: 0.25%;
    padding-left: 0.25%;
    padding-right: 0.25%
}

.fl-col-flex2 .fl-col {
    width: 48.85%;
    margin-left: 0.25%;
    margin-right: 0.25%;
    padding-left: 0.25%;
    padding-right: 0.25%
}

/* CHANGE TO LAYOUT not COL since this will become a layout helper */
.fl-col-mixed,
.fl-col-mixed2,
.fl-col-mixed3 {
    overflow: auto;
    zoom: 1;
}

/* Old System */
.fl-col-mixed .fl-col-side {
    width: 200px;
}

.fl-col-mixed .fl-col-side,
.fl-col-mixed .fl-col-main {
    padding: 0 10px;
}

.fl-col-mixed2 .fl-col-side {
    width: 200px;
    padding: 0 10px;
    float: left;
}

.fl-col-mixed2 .fl-col-main {
    margin-left: 220px;
    padding: 0 10px;
}

/* margin goes on whichever side the fixed column goes */

.fl-col-mixed3 .fl-col-main {
    margin: 0 220px;
}

/* margin goes on whichever side the fixed column goes */

/* New System, requires fl-force-XX on the fixed column, provides some basic numbers to start with */
.fl-col-fixed, .fl-col-flex {
    padding: 0 10px;
}

.fl-col-mixed .fl-col-fixed {
    width: 200px;
    padding: 0 10px;
}

.fl-col-mixed .fl-col-flex {
    margin-left: 220px;
    padding: 0 10px;
}

.fl-col-mixed-100 .fl-col-fixed {
    width: 100px;
}

.fl-col-mixed-100 .fl-col-flex {
    margin-left: 120px;
}

.fl-col-mixed-150 .fl-col-fixed {
    width: 150px;
}

.fl-col-mixed-150 .fl-col-flex {
    margin-left: 170px;
}

.fl-col-mixed-200 .fl-col-fixed {
    width: 200px;
}

.fl-col-mixed-200 .fl-col-flex {
    margin-left: 220px;
}

.fl-col-mixed-250 .fl-col-fixed {
    width: 250px;
}

.fl-col-mixed-250 .fl-col-flex {
    margin-left: 270px;
}

.fl-col-mixed-300 .fl-col-fixed {
    width: 300px;
}

.fl-col-mixed-300 .fl-col-flex {
    margin-left: 320px;
}

/*
 * Tabs: a quick tab system
 * Dependency: list-based markup ?
 */
.fl-tabs {
    margin: 10px 0 0 0;
    border-bottom: 1px solid #000;
    text-align: center;
    padding-bottom: 2px;
}

.fl-tabs li {
    list-style-type: none;
    display: inline;
}

/* star hack to get IE 6+7 to behave perfectly */
.fl-tabs li a {
    padding: 3px 16px 2px;
    background-color: #fff;
    margin-left: -5px;
    *margin-bottom: -6px;
    zoom: 1;
    border: 1px solid #000;
    color: #999;
}

.fl-tabs li a:hover {
}

.fl-tabs-center {
    text-align: center;
}

.fl-tabs-left {
    text-align: left;
    padding-left: 10px;
}

.fl-tabs-right {
    text-align: right;
    padding-right: 15px;
}

.fl-tabs .fl-reorderer-dropMarker {
    padding: 0 3px;
    background-color: #c00;
    margin: 0 5px 0 -5px;
    zoom: 1;
}

.fl-tabs .fl-tabs-active a {
    padding: 3px 16px;
    border-bottom: none;
    color: #000;
}

.fl-tabs-content {
    padding: 5px;
}

/* get webkit to behave perfectly -
 * unfortunately, Chrome gets caught in this too even though it applied the original padding values fine
 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .fl-tabs li a {
        padding: 3px 16px 3px;
    }

    .fl-tabs .fl-tabs-active a {
        padding: 3px 16px 4px;
    }
}

/*
 * Menus: quick horizontal and vertical menu
 * Requires list items with anchors
 */
.fl-listmenu, /* <=== fl-listmenu is DEPRECATED! */
.fl-list-menu {
    padding: 0px;
    margin: 0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.fl-listmenu li, /* <=== fl-listmenu is DEPRECATED! */
.fl-list-menu li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-width: 1px;
    border-style: solid;
    border-bottom: none;
    overflow: auto;
}

.fl-listmenu a, /* <=== fl-listmenu is DEPRECATED! */
.fl-list-menu a {
    padding: 5px 5px;
    display: block;
    zoom: 1;
    overflow: auto;
    outline: none;
}

/* list item needs layout (http://www.brunildo.org/test/IEWlispace.php) */

/*
 * Picture Grid: a quick picture grid layout
 * Dependency: list-based markup
 */
ul.fl-grid, .fl-grid ul {
    padding: 0;
    margin: 0;
    overflow: auto;
}

.fl-grid li {
    list-style-type: none;
    display: inline;
}

.fl-grid li {
    float: left;
    width: 19%;
    margin: 0.5%;
    height: 150px;
    overflow: hidden;
    position: relative;
    display: inline;
}

.fl-grid li img {
    display: block;
    margin: 5px auto;
}

.fl-grid li .caption, /*<=== DEPRECATED SYNTAX */
.fl-grid li .fl-grid-caption {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    text-align: center;
    height: 1em;
    padding: 3px 0;
}

/*
 * Icons: quick accessible icon helper
 */
.fl-icon {
    text-indent: -5000px;
    overflow: hidden;
    cursor: pointer;
    display: block;
    height: 16px;
    width: 16px;
    margin-left: 5px;
    margin-right: 5px;
    background-position: center center;
    background-repeat: no-repeat;
}

input.fl-icon {
    padding-left: 16px;
}

/*
 * Buttons: quick sliding door buttons
 * requires a container with a sub container
 */
.fl-button-left {
    float: left;
    margin-right: 10px;
    padding: 0 0 0 16px;
    background-position: left center;
    background-repeat: no-repeat;
}

.fl-button-right {
    float: right;
    margin-left: 10px;
    padding: 0 0 0 16px;
    background-position: left center;
    background-repeat: no-repeat;
}

.fl-button-inner {
    float: left;
    padding: 5px 16px 5px 0;
    cursor: pointer;
    background-position: right center;
    background-repeat: no-repeat;
}

/*
 * Widgets: modelled after the mycamtools widget model
 */
.fl-widget {
    padding: 5px;
    margin-bottom: 10px;
}

.fl-widget .button {
    margin: 0 5px;
}

.fl-grabbable .fl-widget-titlebar {
    background-position: center top;
    background-repeat: no-repeat;
    cursor: move;
}

.fl-widget .fl-widget-titlebar {
}

.fl-widget .fl-widget-titlebar h2 {
    padding: 0;
    margin: 0;
    font-size: 105%;
}

.fl-widget .fl-widget-titlebar .fl-button-inner {
    font-size: 0.8em;
    padding-bottom: 0.2em;
    padding-top: 0.2em;
}

.fl-widget .fl-widget-controls {
    margin: -1.3em 0 1.5em 0;
}

.fl-widget .fl-widget-options {
    margin-top: 5px;
    padding: 0px 10px;
}

.fl-widget .fl-widget-options ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    zoom: 1;
}

.fl-widget .fl-widget-options li {
    list-style-type: none;
    float: left;
    display: inline;
    padding: 0 5px 0 5px;
    margin-left: -5px;
}

.fl-widget .fl-widget-options a {
    margin-right: 5px;
}

.fl-widget .fl-widget-content {
    zoom: 1;
    margin: 5px 0 0 0;
    overflow: auto;
}

.fl-widget .fl-widget-content ul {
}

.fl-widget .empty * {
    padding-top: 10px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Common widget sub-components */
.fl-widget .menu {
    margin: 0;
}

.fl-widget .toggle {
    width: 32px;
}

.fl-widget .on {
    background-position: left top;
}

.fl-widget .off {
    background-position: left bottom;
}

/*
 * Forms and Form Controls
 * Common arrangements for form inputs in a list
 * Alignment requires list of fl-label elements placed before the control
 */
.fl-controls-left li {
    list-style-type: none;
    text-align: left;
}

.fl-controls-left .fl-label {
    float: left;
    text-align: left;
    width: 50%;
    margin-right: 5px;
}

.fl-controls-right li {
    list-style-type: none;
    display: block;
    text-align: left;
}

.fl-controls-right .fl-label {
    float: left;
    text-align: right;
    width: 50%;
    margin-right: 5px;
}

.fl-controls-centered li {
    list-style-type: none;
    display: block;
    text-align: left;
}

.fl-controls-centered .fl-label {
    float: left;
    text-align: center;
    width: 50%;
    margin-right: 5px;
}

/**
 * Knockout Background Images
 */
.fl-noBackgroundImages, .fl-noBackgroundImages * {
    background-image: none !important;
}

.fl-noBackgroundImages .fl-icon {
    text-indent: 0 !important;
    width: auto !important;
    background-color: transparent !important;
}

/* Progressive Enhancement: JS will reverse the display setup if it is enabled */
.fl-ProgEnhance-enhanced, /* << syntax breaks conventions and is Deprecated*/
.fl-progEnhance-enhanced {
    display: none
}

.fl-ProgEnhance-basic, /* << syntax breaks conventions and is Deprecated*/
.fl-progEnhance-basic {
}

/* hide text for screen readers. */
.fl-offScreen-hidden {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
