/*
layout.css
==================================================================================
Contains all styles for all microformats that developers can make use of.  It will
contains many, many utility classes for different purposed, both for inline use
and for larger, page-level layout needs.  Also contains many classes specifically
for forms.
----------------------------------------------------------------------------------
*/


/*
Global search styles
------------------------------------------------------------------------------- */

#child_search_results table tbody td.initial_message {background-color: Transparent;}

td.center, th.center {text-align: center;}
td.left, th.left {text-align: left;}
td.right, th.right {text-align: right;}

form.inline_search_form {padding: 6px 0 0 0 !important; margin: 0 0 0 1em !important; float: left;}
form.inline_search_form * {float: left;}
form.inline_search_form .inline_search_id {width: 7em;}
form.inline_search_form .inline_search_button {margin-left: .5em;}


/*
ul.UI_expandable_list
------------------------------------------------------------------------------- */

.UI_expandable_list li {margin-bottom: 1px; position: relative;}
.UI_expandable_list li div.header {overflow: auto; background-color: White; padding: 10px;}
.UI_expandable_list li div.header > * {float: left;}

.UI_expandable_list li h4 {
    font-weight: bold;
    margin-bottom: 1px;
    line-height: 1.25em;
}

.UI_expandable_list li div.header:hover {background-color: #D6EFFF; cursor: pointer;}
.UI_expandable_list li div.selected {background-color: #D6EFFF; border-top: 4px silver solid;}

.UI_expandable_list li div img {float: left; margin-right: 10px;}
.UI_expandable_list li div a.anchor {color: Black; text-decoration: none; display: block;}

.UI_expandable_list li div.content {padding-left: 36px; display: none; border-bottom: 4px silver solid; background-color: white;}



/*
CSS3 formatting, under development
------------------------------------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="checkbox"],
textarea,
select {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    background-color: #D6EFFF;
}


/*
Paging navigation
------------------------------------------------------------------------------- */

.paging_navigation {margin: 10px 0 0;}

.paging_navigation ul * {float: left;}

.paging_navigation ul.navigation_links {overflow: hidden;  margin: 0 auto;}
.paging_navigation ul.navigation_links li.back_button {margin-right: 10px;  width: 24px !important;}
.paging_navigation ul.navigation_links li.forward_button {margin-left: 10px;  width: 24px !important;}

.paging_navigation ul.navigation_links li.page_link a,
.paging_navigation ul.navigation_links li.current_page {
	display: block;
	width: 30px;  height: 24px;
	line-height: 24px;  text-align: center;
	font-size: 1.2em;  font-weight: bold;
	border: 1px solid transparent;
}

.paging_navigation ul.navigation_links li.page_link:hover a,
.paging_navigation ul.navigation_links li.current_page {border-color: silver;  background-color: White;}

.paging_navigation table.navigation_summary {margin: 0 auto 10px;}
.paging_navigation table.navigation_summary th {padding-right: 5px;}
.paging_navigation table.navigation_summary td {padding-right: 15px;}
.paging_navigation table.navigation_summary td.last {padding-right: 0px;}



/*
Form Titles
------------------------------------------------------------------------------- */

form h2 {font-size: 1.5em; margin : 1em 0 .5em;}
form h4,
fieldset legend {font-size: 1.2em;  font-weight: bold;  margin-bottom: 1em;}



/*
Form Titles
------------------------------------------------------------------------------- */

/* Rows layout */
/* 
   This microformat is good for items like rows of checkboxes or rows of text 
   and select fields that appear inline with their labels. 
*/

form .rows p {overflow: visible;  position: relative; float: left;  margin-right: 10px;  line-height: 1.25em;  padding: 4px 0;}
form .rows p * {display: block;  float: left;}
form .rows p input,
form .rows p select {margin-right: 3px;}
form .rows p input,
form .rows p label {width: auto !important; line-height: 1.25em; margin-right: 10px;}

form .textboxrows p {overflow: visible;  position: relative; float: left;  margin-right: 10px;  line-height: 1.25em;  padding: 4px 0;}
form .textboxrows p * {display: block;  float: left;}
form .textboxrows p input,
form .textboxrows p select {margin-right: 3px;}
form .textboxrows p input,
form .textboxrows p label {width: auto !important; line-height: 1.75em; margin-right: 10px;}



/* Stacked rows where the labels appear atop their paired inputs. */
/*
   A microformat similar to the "rows" format, except this will stack the
   labels ontop of the fields.
*/

form .stacked_rows {position: relative;  overflow: auto;}
form .stacked_rows p {float: left;  position: relative;  margin-right: 5px; overflow: visible ;}
form .stacked_rows p * {display: block;}
form .stacked_rows p label {line-height: 1.5em;}
form .stacked_rows p.icon {padding-top: 15px;}
form .stacked_rows p.has_icon {margin-right: 25px;}
form .stacked_rows p.has_icon input {float: left;}


/* Columns formatting */
/* 
   This set of microformats allows you to arrange groups of fields into columns
   of varying percentage-based widths.  It can be configured for two, three or
   four columns of fields.  Each group of fields is then further divided into two
   columns, one for the labels on the right and another for the fields.
*/

.column_row {overflow: auto;  margin-bottom: 1em;}
.column_row .one_column {width: 100%;  float: left;  position: relative;}
.column_row .two_columns {width: 50%;  float: left;  position: relative;}
.column_row .three_columns {width: 33.3%;  float: left;  position: relative;}
.column_row .four_columns {width: 25%;  float: left;  position: relative;}

.column_row .two_thirds {width: 66.6%;  float: left;  position: relative;}
.column_row .two_thirds .three_columns {width: 49%;  position: relative;}
.column_row .two_thirds .two_thirds {width: 100%;  position: relative;}

.column_row .first_column {float: left;  position: relative;}
.column_row .succeeding_column {float: right;  position: relative; padding-left:15px;}

.column_row p {
	position: relative;  overflow: auto;
	padding: 1px;  margin: 0;  padding-right: 40px;
}

.column_row p * {display: block;  float: left;}

.column_row label {line-height: 16px;  width: 40%;}
.column_row .checkboxes label {width: 90%;}



.column_row input {width: 57%;}
.column_row .one_column p.has_icon input {width: 57.5%;}
.column_row .two_columns p.has_icon input {width: 53.5%;}
.column_row .three_columns p.has_icon input {width: 50.5%;}
.column_row .four_columns p.has_icon input {width: 48.5%;}



.column_row .checkboxes input {width: 10%;}
.column_row select {width: 59%;}
.column_row textarea {width: 58%;}

.column_row span.data_label {padding: 0 3px !important;}

.column_row .no_gutter p {margin-right: 10px !important;}


/* Field box */
/*
   A container for fields with a 1px-outlined box.  Can be used with
   columns formatting for having multiple boxes in a single row.
*/

.fieldbox {
    display: block;
    border: 2px groove white;
    padding: 10px;  margin-right: 5px;
}

.fieldbox legend {
    display: block;
    margin-bottom: 0 !important;
    padding: 0 5px;
}




/*
.field_table
------------------------------------------------------------------------------- */

table.field_table {border-collapse: separate !important;  width: auto;}
table.field_table th,
table.field_table td {font-size: 1em;  padding: 2px;}
table.field_table input[type='text'] {width: 95%;}
table.field_table input.nogrow[type='text'] {width: auto;}

.column_row table.field_table {margin-right: 40px;}




/* Formatting for ranges */

form p.range {}
form p.range input {width: 24.5% !important;}
form p.range span {line-height: 16px;  font-weight: bold;  display: block;  width: 6%;  text-align: center;}

/* Structure for multi-select groups (as seen in R&R!) */

form .multiselect_group select {width: 100%;}
form .multiselect_group .selected_options {height: 100px;  margin-bottom: 5px;}
form .multiselect_group p input,
form .multiselect_group p span {display: block;  float: left;  line-height: 20px;  margin-right: 5px;  color: gray;}

/* Miscellaneous doodads */

.button_row {clear: both;  padding-bottom: 1px;  overflow: auto;  position: relative;}

form .undo_button {display: none;}
form .close_button {position: absolute;  top: 0; right: 0;}

/* Formatting for specific types of fields */
.id_field {width: 50px;}



input.date[type='text'] {width: 7em !important;}
input.integer[type='text'] {width: 4em !important;}
input.money[type='text'] {width: 7em !important;}



/*
.html_dialog_confirm
-------------------------------------------------------------------------------
Layout for use with the .html_dialog widget.  This will arrange a message and
buttons used on the control.
*/

.html_dialog_confirm .message {text-align: center;  font-size: 1.2em;}
.html_dialog_confirm .buttons {position: relative;  overflow: auto;}



/*
.html_panel utility classes
-------------------------------------------------------------------------------
Layout for use with the .html_panel widget.  The following classes have various
uses but all should be used in html_panels.
*/

/* Panel content pieces */

.html_panel .html_panel_overlay,
.html_panel_shadow .html_panel_overlay {position: relative;  clear: both;  margin: 0 -8px 0 -9px;  padding: 9px 9px 0 9px;  background-color: White;  overflow: hidden;}

.html_panel .html_panel_divider,
.html_panel_shadow .html_panel_divider {clear: both;  height: 0;  margin: 9px -9px;  border-top: #B5B2B5 1px solid;  border-bottom: white 1px solid;}

.html_panel .html_panel_notice,
.html_panel_shadow .html_panel_notice {
	margin: -9px -8px 9px -9px;
	padding: 9px;
	border-bottom: 1px solid silver;
	background-color: white;
}

/* .html_panel .error_type */

.html_panel .error_type,
.html_panel_shadow .error_type {border: 1px solid red;}

.html_panel .html_panel_error,
.html_panel_shadow .html_panel_error {
	margin: -10px -9px 1em -9px;
	padding: 9px;
	border-bottom: 1px #888850 solid;
	background-color: #FFFFAA;
}


/* .html_panel form styles */

/*
this is required otherwise we start seeing weirdness on forms in panels.
overlow: visible (default for all forms) will cause button_rows, in some
cases, to appear sitting half-way off the bottom of the form
*/

.html_panel form,
.html_panel_shadow form {
	overflow: auto;
	display: block;
	margin: auto -8px auto -9px;
	padding: 0 9px 0 8px;
}

.html_panel form.inline,
.html_panel_shadow form.inline {display: inline; margin: 0;  padding: 0;}


/* .panel_data table styles */

table.panel_data { width: 96%;}

table.panel_data th,
table.panel_data td {padding: 2px 4px;  height: 28px; padding-left:15px; vertical-align: middle; border-right:1px solid lightgray; }

table.panel_data th {font-size: 1.2em;  font-weight: bold; text-align:center;}
table.panel_data td {
    background-color: White;
    border-bottom: 1px solid #eeeeee;
}

table.panel_data th.icon,
table.panel_data td.icon {width: 16px;  padding: 6px 4px 6px 9px !important;}
table.panel_data td.remove_link {text-align: right;}

table.panel_data th.shade {background-color: Silver;}
table.panel_data th.center {text-align: center;}

table.panel_data th.inline,
table.panel_data td.inline {padding: 0;}
table.panel_data td.inline table {width: 100%;}
table.panel_data td.inline table td {background-color: transparent; border: 0;}

table.panel_data thead th {
    background-color: Gray; color: White;
}

table.panel_data thead th:first-child {
    -webkit-border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    -o-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
}

table.panel_data thead th:last-child {
    -webkit-border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    -o-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
}

table.panel_data td.action_buttons {
    width: 52px;  padding-right: 10px;
}

table.panel_data td.action_buttons .inline_button {
    float: left;  margin-right: 2px;
}


/* .panel_list table styles */

.listing_container {margin-bottom: 0;}

ul.editable_list,
ul.inline_editable_list {width: 100%;  overflow: hidden;  position: relative;}

ul.editable_list li,
ul.inline_editable_list li {
    background-color: White;
    margin-bottom: 1px;
    padding: 2px 4px;
    vertical-align: middle;
}

ul.editable_list li.header,
ul.inline_editable_list li.header {
    background-color: transparent;
    padding: 0;
}

ul.editable_list li.loading_background,
ul.inline_editable_list li.loading_background {
	position: absolute;
	top: 0;  right: 0;  bottom: 0;  left: 0;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.35;
	opacity:.35;
	filter: alpha(opacity=35);
	margin: 0; padding: 0;  height: auto;
}

ul.editable_list li.loading_message,
ul.inline_editable_list li.loading_message {
	position: absolute;  top: 5px;  left: 5px;
	z-index:1002;
	padding: 10px;  background-color: white;
	font-size: 10pt;  font-weight: bold;
	vertical-align: middle;
	text-align: center;
	border: 1px solid black;
	margin: 0; height: auto;
}

ul.inline_editable_list li.add_entity {background-color: #FFFFCE !important;}
ul.inline_editable_list li.edit_entity {background-color: #FFFFCE !important;}
ul.inline_editable_list li.new_entity {background-color: #D4FFD4 !important;}

ul.editable_list li table,
ul.inline_editable_list li table {width: 100%;}

ul.editable_list li table th,
ul.inline_editable_list li table th {font-size: 1.2em;}

ul.editable_list li table th,
ul.editable_list li table td,
ul.inline_editable_list li table th,
ul.inline_editable_list li table td {
    height: 28px;
    line-height: 1.4em;
    vertical-align: middle;
    position: relative;
    padding-right: 20px;
}

ul.editable_list li.header th,
ul.inline_editable_list li.header th {
    background-color: Gray; color: White;
}

ul.editable_list li.header th:first-child,
ul.inline_editable_list li.header th:first-child {
    -webkit-border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    -o-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
}

ul.editable_list li.header th:last-child,
ul.inline_editable_list li.header th:last-child {
    -webkit-border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    -o-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
}

th.checkmark,
td.checkmark {
    padding-left: 2px !important; padding-right: 2px !important; width: 16px !important;
    text-align: center;
}

ul.editable_list li table .action_buttons,
ul.inline_editable_list li table .action_buttons {width: 52px;  padding-right: 10px;}

ul.editable_list li table td.action_buttons .inline_button,
ul.inline_editable_list li table td.action_buttons .inline_button {float: left;  margin-right: 2px;}

ul.editable_list li table select,
ul.editable_list li table input[type=text],
ul.inline_editable_list li table select,
ul.inline_editable_list li table input[type=text] {width: 75%;}

ul.editable_list li.add_entity,
ul.editable_list li.edit_entity,
ul.inline_editable_list li.add_entity,
ul.inline_editable_list li.edit_entity {display: none;}

ul.editable_list li .confirm_delete,
ul.inline_editable_list li .confirm_delete {
    position: absolute; top: 0; left: 0;  right: 0; bottom: 0;
    background-color: #FFFFAA;
}

ul.memo_list td {
    vertical-align: top !important;
    padding-top: 7px;
}

ul.memo_list td.action_buttons {
    padding-top: 3px !important;
}

ul.memo_list td textarea {
    width: 80%;
    height: 100px;
}






/* .html_panel record summary microformat */

/*
this is used on most of the major forms, like the family and provider forms.  It formats the
panels of summary information at the top.
*/

.html_panel .record_summary .summary_header {overflow: visible;  position: relative;  height: 32px;  margin-top: -5px;}
.html_panel .record_summary .summary_header p {float: left;  margin: 0;  line-height: 31px;}
.html_panel .record_summary .summary_header p.record_name {font-size: 1.5em;  font-weight: bold;  margin-right: 3em;}
.html_panel .record_summary .summary_header p.record_id label {font-weight: bold;}

.html_panel .record_summary .summary_header .record_id,
.html_panel .record_summary .summary_header .inline_search_form {
    font-size: 1.25em !important;
}



.html_panel .record_summary .button_row {
	position: absolute;  top: 0;  right: 0;
	margin-bottom: 0;  overflow: visible;
}

.html_panel .record_summary .button_row form {display: inline;}

.html_panel .record_summary .html_panel_overlay {margin-top: 5px;}
.html_panel .record_summary .html_panel_overlay .columns {float: left;  width: 25%;}
.html_panel .record_summary .html_panel_overlay .columns label {font-weight: bold;}

.html_panel .record_summary .meta_information table {width: 100%;}


/* .html_panel record summary microformat */

/* for granular placement */
.col-1 {float:left;width:30px;}
.col-2 {float:left;width:70px;}
.col-3 {float:left;width:110px;}
.col-4 {float:left;width:150px;}
.col-5 {float:left;width:190px;}
.col-6 {float:left;width:230px;}
.col-7 {float:left;width:270px;}
.col-8 {float:left;width:310px;}
.col-9 {float:left;width:350px;}
.col-10 {float:left;width:390px;}
.col-11 {float:left;width:430px;}
.col-12 {float:left;width:470px;}
.col-13 {float:left;width:510px;}
.col-14 {float:left;width:550px;}
.col-15 {float:left;width:590px;}
.col-16 {float:left;width:630px;}
.col-17 {float:left;width:670px;}
.col-18 {float:left;width:710px;}
.col-19 {float:left;width:750px;}
.col-20 {float:left;width:790px;}
.col-21 {float:left;width:830px;}
.col-22 {float:left;width:870px;}
.col-23 {float:left;width:910px;}
.col-24 {float:left;width:950px;}


/*
Validation and error formatting
------------------------------------------------------------------------------- */

.medium_error,
.severe_error {margin: auto 1em; border: orange 1px solid; background-color: White;}
.medium_error {border-color: Orange;}
.severe_error {border-color: Red;}

span.data_label {background-color: White;  line-height: 1.25em;  padding: 3px 6px;}

/* Notice display formatting */
#notice {display: none;}

/* Field background colors */
form .changed {background-color: #ffffcc;}
form .invalid {background-color: #ffdead;}
form .highlight {background-color: #D6EFFF;}

.validation_error_summary {margin-bottom: 10px; display: none;}

.validation_error_summary p {margin-bottom: 10px;}
.validation_error_summary ul li {padding: 4px 0; line-height: 16px; vertical-align: middle; overflow: auto;}
.validation_error_summary ul li span,
.validation_error_summary ul li img {float: left;}
.validation_error_summary ul li img {margin: 0 5px;}

.validation_error {display: none;}
.two_columns p > .validation_error,
.three_columns p > .validation_error,
.four_columns p > .validation_error {position: absolute;  top: 2px;  right: 30px; display: none;}

.validation_error_summary ul li:hover {cursor: pointer;}

.validation_error_summary ul li.changed {background-color: #ffffcc;}
.validation_error_summary ul li.invalid {background-color: #FFEBCE;}
.validation_error_summary ul li.highlight {background-color: #D6EFFF;}

#errorSummary {margin-bottom: 10px;}