/**
 * Element styles
 */
html {}
img { border: 0; }
form { padding: 0; margin: 0; }
table { font-size: 1.0em; }


/**
 * Unscoped styles
 */
.clear { clear: both; }
.clear_left { clear: left; }
.clear_right { clear: right; }
.half_left { width: 50%; float: left; }
.half_right { width: 50%; float: right; }


/**
 * JS components - these selectors activate some kind of functionality in global.js
 */
.default_input_text { /* Text inputs and textareas with this class will have a default value when idle */ }
.default_input_text_idle { /* The idle state for ".default_input_text" */ color: gray; }
input.jqueryui_datepicker { /* Select any date with current date as starting point */ width: 90px !important; background: url('icons/16x16/calendar.png') no-repeat 98% 50% #FFFFFF; }
input.jqueryui_datepicker_past { /* Only select dates in the past with current date as starting point */ width: 90px !important; background: url('icons/16x16/calendar.png') no-repeat 98% 50% #FFFFFF; }
input.jqueryui_datepicker_future { /* Only select dates in the future with current date as starting point */ width: 90px !important; background: url('icons/16x16/calendar.png') no-repeat 98% 50% #FFFFFF; }
input.autoformat_money { /* Auto parses a number in this field to 2 decimal places on change */ width: 50px; text-align: right; }
input.autoformat_integer { /* Auto parses a number in this field to an integer on change */ width: 40px !important; text-align: center; }
fieldset.collapsible { /* A fieldset with this class will toggle between collapsed and open when the (first) legend is clicked */ overflow: hidden; background: #FFFFFF; }
fieldset.collapsible legend { cursor: pointer; }
fieldset.collapsible span.collapsible_show_hide { font-weight: normal; }
fieldset.collapsible_collapsed { /* Extends "fieldset.collapsible" - collapsed state (add this class if you want it to be collapsed onload) */ }
fieldset.collapsible_collapsed_slow { /* Extends "fieldset.collapsible" - collapsed state (add this class if you want it collapse slowly onload - so people know the functionality is there) */ }
dl.collapsible { /* A definition list with this class will have it's dd's collapsed and toggled by clicking the dt */ }
dl.collapsible dt { cursor: pointer; background-image: url('icons/16x16/add.png'); background-position: right; background-repeat: no-repeat; padding-right: 20px; }
dl.collapsible dt.opened { background-image: url('icons/16x16/delete.png'); }
dl.collapsible dd { display: none; margin-left: 0px; }
table.check_all { /* If a table has this classname, checking a checkbox in the thead will check all in the same column within tbody */ }
table.sortable { /* If a table has this classname, the rows in tbody are sortable by dragging */ }
table.sortable tbody tr { cursor: move; }
table.sortable input.sortable_order { width: 30px; text-align: center; }
table.sortable_reversed { /* Extends "table.sortable" - reverses the order */ }


/**
 * PHP form messages
 */
ul.messages { font-weight: bold; margin: 0px 0px 10px 0px; padding: 6px 8px 6px 60px; min-height: 32px; background-position: 6px 6px; background-repeat: no-repeat; float: none; font-size: 12px; }
ul.messages li { margin: 0px; padding: 0px; }
ul.messages_errors { /* Extends "ul.messages" */ color: #CC0000; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; background-image: url('icons/32x32/Error.png'); background-color: #E6C0C0; }
ul.messages_success { /* Extends "ul.messages" */ color: #0055BB; border-top: 3px solid #84A7DB; border-bottom: 3px solid #84A7DB; background-image: url('icons/32x32/Ok.png'); background-color: #C3D2E5; }
ul.messages_info { /* Extends "ul.messages" */ color: #CC0000; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E; background-image: url('icons/32x32/Info.png'); background-color: #EFE7B8; }
ul.messages_warning { /* Extends "ul.messages" */ color: #CC0000; border-top: 3px solid #FFBB00; border-bottom: 3px solid #FFBB00; background-image: url('icons/32x32/Warning.png'); background-color: #E6C8A6; }


/**
 * Tooltips
 * 
 * Usage: <span class="tooltip">Text<span class="classic">Tooltip text</span></span>
 */
.tooltip { color: #000000; outline: none; cursor: help; text-decoration: none; position: relative; vertical-align: bottom; }
.tooltip span { margin-left: -999em; position: absolute; }
.tooltip:hover span { border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); font-family: Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px; text-align: left; line-height: 1.1em; font-size: 11px; }
.tooltip:hover em { font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold; display: block; padding: 0.2em 0 0.6em 0; }
.tooltip .classic { padding: 0.8em 1em; }
.tooltip .custom { padding: 0.5em 0.8em 0.8em 2em; }
.tooltip .classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.tooltip .critical { background: #FFCCAA; border: 1px solid #FF3334;	}
.tooltip .help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.tooltip .info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.tooltip .warning { background: #FFFFAA; border: 1px solid #FFAD33; }