/* These are all EXAMPLES -- they are meant to be updated/changed/modified */
body {
    /*font-size: 11px;*/
    /*font-family:"Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";*/
}



/* Standard HTML Form Controls */
input.button { border: 1px solid #4c4f72; font: 11px 'Arial', 'Helvetica'; font-weight: bold; background-color: #e5e5eb;}
input.button:hover { background-color: #fff; }

input.textbox, textarea.textbox { font: 12px 'Arial', 'Helvetica'; width: 200px; background-color: #dae8f5; border: 1px solid #4c4f72; padding: 2px 3px 2px 3px;}
textarea.textbox { height: 120px; }
input.textbox:focus, textarea.textbox:focus {background-color: #fff; border-color: #4c4f72;}

select.listbox { font: 12px 'Arial', 'Helvetica'; width: 100px; background-color: #dae8f5; border: 1px solid #4c4f72; }
select.listbox:focus { background-color: #fff; border-color: #4c4f72;}
a.listboxReset { font-family: verdana, arial, helvetica; font-size: 8pt; text-decoration: none; color: #337; }
a.listboxReset:hover { text-decoration: underline; }



/**
	 * Various QControl-specific Styles
	 */

/* QFileAsset */
div.fileassetDbox { border: 4px solid #333; background-color: #fff; padding: 20px; width: 400px; overflow: auto; }
div.fileassetDbox h1 { margin: 0; }
div.fileassetDbox input { padding: 3px; margin-right: 5px; }

/* QDialogBox */
div.dialogbox { border: 4px solid #333; background-color: #fff; padding: 20px; width: 400px; overflow: auto; }

/* QDateTimePicker */
span.datetimepicker { }
span.datetimepicker select { font: 12px 'Arial', 'Helvetica'; background-color: #eef; border: 1px solid #4c4f72; }
span.datetimepicker select:focus { background-color: #fff; border-color: #4c4f72; }
span.datetimepicker select.month { width: 55px; }
span.datetimepicker select.day { width: 45px; margin-left: 8px; }
span.datetimepicker select.year { width: 60px; margin-left: 8px; }
span.datetimepicker select.hour { width: 65px; margin-left: 12px; margin-right: 2px; }
span.datetimepicker select.minute { width: 45px; margin-left: 2px; margin-right: 2px; }
span.datetimepicker select.second { width: 45px; margin-left: 2px; }

/* QDataGrid */
/*table.datagrid { border: 1px solid #4c4f72; }*/
table.datagrid { border: 1px solid #4c4f72; }
table.datagrid caption, table.datagrid tfoot { 
    padding-bottom: 4px;
    overflow: auto;
    -moz-box-sizing:border-box;
    display:table-caption;
    text-align:center;
}
table.datagrid span.left { float: left; font-size: 10px; display: block; }
table.datagrid span.right { float: right; font-size: 10px; display: block; }
table.datagrid tr { background-color: #fff; }
table.datagrid tr.alternate { background-color: #eef; }
table.datagrid th { background-color: #4c4f72; padding: 3px 5px 3px 5px; text-align: left; }
table.datagrid th a { color: #000; text-decoration: none; }
table.datagrid th a:hover { color: #000; text-decoration: underline;}
table.datagrid td { padding: 5px; }
table.datagrid td a { color: #000; }
table.datagrid td a:hover { color: #000; text-decoration: none; }
table.datagrid tfoot { border-top: 1px solid #4c4f72;}

/* QPaginator */
span.paginator { margin: 0; padding: 0; }
span.paginator span { list-style-type:none; display: inline; padding: 0; margin: 0; }
span.paginator span.page a { text-decoration: none; color: #000000; padding: 0 3px 0 3px; margin: 0 2px 0 2px;}
span.paginator span.page a:hover { background-color: #ccf; }
span.paginator span.arrow { font-weight: bold; color: #ccc; margin: 0; padding: 0 3px 0 3px; }
span.paginator span.arrow a { font-weight: bold; color: #000; text-decoration: none; }
span.paginator span.selected { font-weight: bold; background-color: #ccf; padding: 0 3px 0 3px; margin: 0 2px 0 2px; border: 1px; border-style: solid; }
span.paginator span.break { color: #666; margin: 0 5px 0 5px; }
span.paginator span.ellipsis { color: #666; }

/* QCalendar */
div.calendar { width: 200px; border: 1px solid #337; background-color: #ccf; }
div.calendar div.navigator { background-color: #337; overflow: auto; _height: 100%; color: #fff; padding: 2px 6px 2px 6px; }
div.calendar div.navigator div.left { float: left; }
div.calendar div.navigator div.month { float: left; width: 80px; text-align: center; font-weight: bold; font-size: 11px; }
div.calendar div.navigator div.year { float: right; }
div.calendar div.navigator div.year span { font-size: 11px; font-weight: bold; margin-left: 6px; margin-right: 6px; }
div.calendar div.navigator a { color: #fff; text-decoration: none; }
div.calendar div.navigator a:hover { text-decoration: underline; }
div.calendar table { border: 0; margin-left: auto; margin-right: auto;}
div.calendar th { text-align: center; border: 0; padding: 4px 2px 4px 2px; font-weight: bold; font-size: 10px;}
div.calendar td { text-align: center; border-width: 0 0 1px 0; border-style: solid; border-color: black; padding: 0;}
div.calendar td.lastRow { border-width: 0;}
div.calendar td a { text-decoration: none; color: #000; display: block; padding: 2px 6px 2px 6px; }
div.calendar td.today { background-color: #bbd; }
div.calendar td.nonMonth a { color: #4c4f72; }
div.calendar td.selected { background-color: #c9a; font-weight: bold; }
div.calendar td a:hover { background-color: #eef; color: #000; }
div.calendar div.options { text-align: center; background-color: #337; }
div.calendar div.options a { color: #fff; font-size: 10px; text-decoration: none;}
div.calendar div.options a:hover { text-decoration: underline; }

/**
	 * Styles for Custom Render Functions as defined in QControl.class.php
	 */

div.renderWithName { padding: 2px 0; height: 100%; clear: both; _zoom: 1; }
div.renderWithName:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
div.renderWithName div.left { float: left; width: 100%; margin-right: 25px; margin-top: -5px; }
div.renderWithName div.required:after { font-weight:900; font: bolder; content: ' *'; color: red;}
div.renderWithName div.left span.instructions { font: 10px 'Verdana', 'Arial', 'Helvetica'; color: #999; font-style: italic; text-transform: none;}

div.renderWithName div.right { float: left; }
div.renderWithName div.right span.error { margin-left: 15px; font: 10px 'Verdana', 'Arial', 'Helvetica'; color: #600;}



/**
	 * Form and Dashboard Draft-Specific Styles
	 * NOTE: because these are page specific, we use element IDs instead of element classes for most items here
	 * (e.g. we will never have more than one titleBar per page)
	 */

div#titleBar { border: 1px solid #337; margin-bottom: 18px; }
div#titleBar h2 { background-color: #337; font: 12px 'Georgia', 'Times New Roman', 'Times'; font-style: italic; font-weight: bold; color: #fff; margin: 0; padding: 2px 5px 2px 5px; float: none; }
div#titleBar h2#right { float: right; font: 10px 'Verdana', 'Arial', 'Helvetica'; font-style: normal; font-weight: normal; }
div#titleBar h2#right a { color: #fff; text-decoration: none; }
div#titleBar h2#right a:hover { text-decoration: underline; }
div#titleBar h1 { font: 28px 'Georgia', 'Times New Roman', 'Times'; color: #337; margin: 0; padding: 2px 0 2px 5px; font-weight: bold; }

p.create { }
p.create a { text-decoration: none; color: #337; font-weight: bold; }
p.create a:hover { text-decoration: underline; }

div#draftList { }
div#draftList h1 { margin: 0; font: 20px 'Georgia', 'Times New Roman', 'Times'; font-weight: bold; }
div#draftList p { margin-top: 6px; margin-bottom: 18px;}

div#formControls { padding: 0 0 0 20px; }

div#formActions { background-color: #4c4f72; padding: 10px; height: 20px; margin-top: 18px; }
div#formActions div#save { float: left; }
div#formActions div#cancel { margin-left: 10px; float: left; }
div#formActions div#delete { float: right; }

div#dashboard { }
div#dashboard div#left { float: left; width: 200px; height: 100px; font-size: 10px; background-color: #eef; border: 1px solid #000; padding: 5px; }
div#dashboard div#right { float: left; margin-left: 10px; width: 760px;}
div#dashboard div#right div#pnlList { margin-bottom: 10px; border: 1px solid #000; padding: 5px; height: 300px; overflow: auto; }
div#dashboard div#right div#pnlEdit { border: 1px solid #000; padding: 5px; background-color: #eef; height: 240px; overflow: auto; }