/*
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 {padding:0px; margin:0; border-bottom-width:1px; border-bottom-style:solid;}
.fl-listmenu li {margin:0; padding:0; list-style-type:none; border-width:1px; border-style:solid; border-bottom:none;}
.fl-listmenu a {padding:5px 5px; display:block; zoom:1;} /* list item needs layout (http://www.brunildo.org/test/IEWlispace.php) */

.fl-vert-menu {
}
.fl-horz-menu {
}

/*
 * Picture Grid: a quick picture grid layout
 * Dependency: list-based markup
 */
ul.fl-grid, .fl-grid ul {padding:0; margin:0;}
.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 {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;}