.ui-widget {
    font-size: 15px !important; /* In some situations, jqueryui.js applies ui-widget twice, which trumps this value */
}

.ui-widget-overlay {
    height: 150%;
    background: #655a34 url('../jquery-ui/images/ui-bg_fine-grain_100_655a34_60x60.png') 50% 50% repeat;
    opacity: .5;
}

.ui-selectmenu-button {
    height: 34px;
    margin-top: 3px;
    margin-bottom: -3px;
}

.ui-selectmenu-button .ui-selectmenu-text {  /* bold sticks out too much in the middle of a bunch of text boxes, resized to be closer to the size of input boxes */
    font-weight: normal;
}

.ui-button {
    margin-top: 6px;
    margin-right: 0px;
    border-radius: 24px;  /* rounded sides on buttons */
}

.editPanel input, .editPanel textarea, span.ui-selectmenu-button, .ui-button {
    outline-color: #67b021;
    outline-width: medium;
}

.ui-button .ui-icon.ui-custom-icon-edit { /* Custom icons for change, view, edit, home */
    background-image: url('../jquery-ui/images/create-edit-icon.png');
    margin-top: -8px;
    margin-left: -7px;
}

.ui-button .ui-icon.ui-custom-icon-eye { 
    background-image: url('../jquery-ui/images/view-icon.png');
}

.ui-button.ui-state-hover .ui-icon.ui-custom-icon-eye {
    background-image: url('../jquery-ui/images/view-icon.png');
}

.ui-button .ui-icon.ui-custom-icon-quote { 
    background-image: url('../jquery-ui/images/quote3-icon.png');
    height: 18px;
    width: 18px;
    margin-left: -0.6em;
    margin-top: -9px;
}

.ui-button .ui-icon.ui-custom-icon-pencil {
    background-image: url('../jquery-ui/images/edit-icon.png');
}

.ui-button.ui-state-hover .ui-icon.ui-custom-icon-pencil {
    background-image: url('../jquery-ui/images/edit-icon.png');
}

.ui-button .ui-icon.ui-custom-icon-home {
    background-image: url('../jquery-ui/images/home-icon.png');
}

.ui-button.ui-state-hover .ui-icon.ui-custom-icon-home {
    background-image: url('../jquery-ui/images/home-icon-focus.png');
}

.ui-dialog-buttonset {
    margin-right: -1px;
    margin-bottom: -6px;
    margin-top: 1px;
}

.ui-dialog :not(.buttonPanel .ui-button) .ui-button {
    outline: none;
}

.buttonPanel .ui-button {
    float: right;
    margin-top: 6px;
    margin-right: 8px;
}

.ui-accordion .ui-accordion-header.ui-accordion-header-active {
    cursor: auto;
}

.ui-accordion-header.ui-state-active .ui-icon {
    background-image: url('../jquery-ui/images/ui-icons_ffffff_256x240.png');
}

.ui-accordion-header .uiAccordionButtons {
    position: relative;
    float: right;
    margin-top: -29px;
    width: 64px;
}

.ui-accordion-header .uiAccordionButtons button:last-child {
    float: right;
    margin-left: 3px;
}

.ui-accordion-header .ui-button, .uiTableHeaderButtons .ui-button, .editPanel .ui-button, .viewPanel .ui-button {
    width: 28px;
    height: 28px;
}

.ui-accordion-header .ui-button {
    margin-top: 4px;
}

body {
    position: relative;
    min-width: 1300px;
    background-image: none !important;
    background-color: #d2d2d2;
}

body, body table, body input, body keygen, body select, body button {  /* undoing user agent override of "body" selector on tables and inputs  */
	font-family: segoe ui,Arial,sans-serif;
	font-size: 15px;
}

body textarea {
    font-family: IBM Plex mono,Courier New;
    font-size: 14px;
}

form {
    margin: 0; /* user agent likes to stick some margin under each form */
}

span label {
    white-space: nowrap;
}

div.childData.ui-accordion {
    width: 100%;
}

div.childData.ui-accordion > span {
    text-align: center;
}

span.label {
    line-height:40px;
    text-align: right;
    margin-left: 1.25%;
    margin-right: .75%;
}

fieldset span.label {
    line-height: 38px;
    margin-top: 3px;
    margin-bottom: -2px;
}

form div.secondaryHeader > span:first-child {
    margin-left: inherit;
}
/* accordion settings */
.ui-accordion .ui-accordion-content {
    padding: 12px;
}

.ui-accordion .ui-accordion-header {
    outline: none;
    margin: 0;
}

/*
    The functional specification when viewing is for accordion tabs containing empty tables to be disabled if they contain no child records.  However, on the right of each such tab, we want a button allowing the user
    to add records.  This brings up a common problem: disabling is indicated by reducing the opacity, and one of the limitations of the CSS model is that opacity levels must be inherited by contained elements.  So,
    while the button can be enabled even if the container is disabled, it still looks disabled.
    
    A common workaround is to create the button outside of the header and position it over the header, but that's difficult in light of the number of elements that the jquery-ui code creates when calling the accordion()
    method.  So, another solution is to work out a color value that at full opacity mimics the disabled color at reduced opacity.  (This can't be exactly calcluated because opacity is obtained by dithering a foreground
    and background color, and this solution works by manipulating RGB values).  In this case, the color of the enabled accordion header is #459e04.  #bbda92 has an appearance nearly indistinguishable from
    #459e04 with an opacity of .7.  Also, the border color of the enabled accordion header is #327e04, and #b0d594 mimics #327e04 with an opacity of .7.  Finally, the color #f5fbe9 mimics #ffffff (white, which is
    the foreground color for enabled tabs in this case) with an opacity of .7.
*/
.ui-accordion .ui-accordion-header.ui-state-disabled {
    opacity: 1;
    background-color: #bbda92;
    border-color: #b0d594;
    color: #f5fbe9;     
}

.ui-accordion h3 {
    font-size: 100%;
    width: 96%; /* to account for the arrow icon on the left when centering text */
    padding: 1px;
}

#topMenuDiv {
    display: inline-flex;
    width: 100%; /* Extends menu bar all the way across page, rather than ending it at the end of the last item */
}

#topMenu {
    height: 26px;
    width: 100%;
    white-space: nowrap;
    margin-top: -1px;
    margin-bottom: -1px;
    padding-top: 3px;
}

#topMenu > li {
    float: left; /* Converts menu from vertical to horizontal */
}

/* These individual settings for top-level menu items are to eliminate jitter when moving through selections.  On hovering over an item, the theme changes its font to bold, which widens the selection and
    pushes the following selections to the right.  The margin settings correct for this.  However, these corrections cause the inactive menu settings to be unevenly spaced; the larger the word, the greater
    the discrepancy between the bold and normal renderings of the word.  The padding changes correct this to some degree.  However, when we vary the padding, some words are closer to the left edge
    of their container than others when in hover mode.  if we use padding to space the selections exactly, this difference becomes noticeable: Vendors, following RFQs, has more padding than NSNs, which
    follows Vendors, for example.  So, the padding fudges between minimizing uneven spacing of inactive items and minimizing uneven spacing of active items with the left side of their containers.
*/

#topMenu > li:nth-of-type(1) {
    padding: 3px 10px 1px 10px;    /* Sizing the space around the home icon to match the text items */
    margin-right: 1px;
}

#topMenu > li:nth-of-type(1).ui-state-focus {
    margin-right: 0;
}

#topMenu > li:nth-of-type(2) {
    margin-right: 10.2px;
    padding-left: 8px;
}

#topMenu > li:nth-of-type(3) {
    margin-right: 1.8px;
    padding-left: 5px;
}

#topMenu > li:nth-of-type(4) {
    margin-right: 3.5px;
    padding-left: 11px;
}

#topMenu > li:nth-of-type(5) {
    margin-right: 5.1px;
    padding-left: 10px;
}

#topMenu > li:nth-of-type(6) {
    margin-right: 1.9px;
    padding-left: 8px;
}

#topMenu > li:nth-of-type(7) {
    margin-right: 6.8px;
    padding-left: 11px;
}

#topMenu > li:nth-of-type(8) {
    padding-left: 7px;
}

#topMenu > li.ui-state-active, #topMenu > li.ui-state-focus {
    margin-right: inherit;    
}

/*
The next three selectors set up toggle of home icon from black to white during focus.  Menu text is white when a selection is in focus and black when it isn't.  This mimics the behavior with the Home icon,
showing the white icon and hiding the black one when the user focuses on it, and vice versa when the user quits focusing on it.  The first selector hides the white icon when not in focus (the black icon shows
by default when not in focus, as any icon would).  The other two show the white icon and hide the black, respectively, during focus.
*/
#topMenu > li > span.menu-item-icon-focus {
    display: none;
}

#topMenu > li.ui-state-focus > span.menu-item-icon-focus {
    display: inline;
}

#topMenu > li.ui-state-focus > span.menu-item-icon-nonfocus {
    display: none;
}

#topMenu li ul {
    margin-top: -3px;
    margin-left: 1px;
}

div.topHeader, div.editPanel > div, div.viewPanel > div, div.buttonPanel {
    position: relative;
    height: 59px;
/*    line-height: 40px; */
	background:#f3f3f3;
	background:-webkit-gradient(linear, left top, left bottom, from(#f5f3e5), to(#ece8da));
    margin: auto;
    min-width: 800px;
}

div.topHeader {
    text-align: center;
    line-height: 42px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

div.topHeader.dashboardHeader {
    margin-top: -4px;
    border-radius: 0px 0px 6px 6px;
    font-size: 18px;
    font-weight: bold;
    height: 37px;
    color: #429900;
}

div.topHeader.dashboardHeader span {
    margin-top: -2px;
    padding: 0;
}

div.buttonPanel {
    border-radius: 0 0 6px 6px;
}

form div.secondaryHeader {
    height: 44px;
    line-height: 26px;
    color: white;
    background:-webkit-gradient(linear, left top, left bottom, from(#459e00), to(#429900));
    border-radius: 6px 6px 0px 0px;
    border-color: #327e04;
    border-width: 1px;
    border-style: solid;
}

div.viewPanel > div > label {
    line-height: 41px;
}

div.viewPanel > div .data label {  
    line-height: 38px;
}

div.viewPanel > div .data.centered {
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}

div.viewPanel .ui-button, div.dataTable .ui-button {
    outline: none;
}

input, span > h1, span > h2, span > h3 {
    margin: 0px;
}

.headerIcon {
    float:left;
}

#headerHomeButton {
    height: 32px;
    width: 32px;
    margin: 6px 5px 0px -4px;
    outline: none;
    border-width: 2px;
    border-color: #d4ccb0;
    background-image: url('../jquery-ui/images/ui-bg_highlight-hard_15_f7f7ee_1x100.png');
}

#headerHomeButton .ui-icon {
    margin-left: -8px;
    margin-top: -9px;
    height: 24px;
    width: 24px;
}

#headerHomeButton.ui-state-hover {
    border-color: #327e04;
    background-image: url('../jquery-ui/images/ui-bg_highlight-hard_15_459e00_1x100.png');
}

div.textareaDiv {
    position: relative;
}

.editPanel .textareaDiv textarea {
    z-index: 1;
}

.editPanel .textareaDiv.twoRows textarea {
    height: 100px;
}

.editPanel .textareaDiv.threeRows textarea {
    height: 157px;
}

.editPanel > div, .viewPanel > div {
    padding-right: 10px;
    padding-left: 10px;
}

.editPanel > div span.data, .viewPanel > div > span.data {
    position: relative;
    height: 36px;
    line-height: 37px;
    top: 11px;
    margin-right: -3px;
    padding: 0;
}

div > span.data > label {
    position: absolute;
    height: 100%;
    width: 98%;
    padding-left: 11px;
    background-color: #f7f7ee;
}

.viewPanel .textareaDiv textarea {
    height: 141px;
    margin-top: 2px;
    background-color: #f7f7ee;
    outline: none;
    padding: 6px 6px 8px 6px;
    border-width: 0px;
    z-index: 1;
}

.viewPanel .textareaDiv.twoRows textarea {
    height: 81px;
}

.viewPanel .textareaDiv.threeRows textarea {
    height: 157px;
}

input[type=text], textarea {
    width: 100%;
    padding: 9px;
    margin-top: 2px;
    border-style: solid;
    border-width: 1px;
    border-color: #dcdabc;
}

input[type=text].required, textarea.required {
    border-width: 2px;
}

.editPanel textarea {
    padding: 6px 6px 8px 6px;
}

.editPanel input:not(.required):not(:focus), .editPanel textarea:not(.required):not(:focus) {
    background-color: #f8f8ee;
}

textarea {
    position: absolute;
    resize: none;
}

.alignRight {
    text-align: right;
}

.alignCenter {
    text-align: center;
}

.highlightRed {
    color: #fb0800;
    font-weight: bold;
}

::selection {
  background: #d8f3be; /* WebKit/Blink Browsers */
}

::-moz-selection {
  background: #d8f3be; /* Gecko Browsers */
}

/* 24-cell grid system (class applied to span within a div, one visible element per span)  */
.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12,.g13,.g14,.g15,.g16,.g17,.g18,.g19,.g20,.g21,.g22,.g23,.g24 {
	display:inline;
    position:relative;
	float:left;
	margin-left:1%;
	margin-right:1%;
	padding:9px 0;
	min-height:10px;
}

.alpha{margin-left:0;}
.omega{margin-right:0;}

.g1{width:2.167%}
.g2{width:6.333%;}
.g3{width:10.5%}
.g4{width:14.667%;}
.g5{width:18.833%}
.g6{width:23.0%;}
.g7{width:27.167%}
.g8{width:31.333%;}
.g9{width:35.5%}
.g10{width:39.667%;}
.g11{width:43.833%}
.g12{width:48.0%;}
.g13{width:52.167%}
.g14{width:56.333%;}
.g15{width:60.5%}
.g16{width:64.667%;}
.g17{width:68.833%}
.g18{width:73.0%;}
.g19{width:77.167%}
.g20{width:81.333%;}
.g21{width:85.5%}
.g22{width:89.667%;}
.g23{width:93.833%}
.g24{width:98.0%;}

/* When those 24 sizes just won't let you fit things in the way you want them...set the width inline as a % value */
span.spacer {
    float: left;
    min-height: .1px;
}

.ui-state-default .ui-button-icon-primary {
    background-image: url('../jquery-ui/images/ui-icons_ffffff_256x240.png');
}

/* Hacking the "chosen" combobox to make it look consistent with the theme */

select.chosen + div.chosen-container a {
    width: inherit;
    height: 37px;
    margin-top: 2px;
    padding-top: 3px;
    padding-left: 0px;
    border-radius: 6px;
    font-weight: normal;
    text-align: left;
    box-shadow: none;
}

select.chosen + div.chosen-container a:hover, select.chosen + div.chosen-container.chosen-container-active a { /* Emulate the hover and active behavior of a selectmenu widget, mainly slightly lighter color */ 
	border: 1px solid #327E04;
	background: #67b021 ;
	color: #ffffff;
}

select.chosen + div.chosen-container span {
    margin-right: 0px;
}

select.chosen + div.chosen-container .chosen-search {
    border-width: 0;
}

select.chosen + div.chosen-container div > b { /* Hide chosen's triangle icon, which is shaped differently (adding the jquery ui one with code) */
    display: none;
}

select.chosen + div.chosen-container a > span.ui-icon { /* Use code to append the jquery ui triangle icon to the a element; position it with this */
    float: right;
    margin-top: -22px; 
    margin-right: 9px;
}

select.chosen + div.chosen-container .chosen-single { /* Match the inactive panel to the selectmenu widgets */
    background: #459e00 url("images/ui-bg_highlight-hard_15_459e00_1x100.png") 50% 50% repeat-x;
    color: #ffffff;
    border-color: #327E04;
}

select.chosen + div.chosen-container.chosen-container-active .chosen-single { /* Match the outline */
    outline-color: #67b021;
    outline-width: medium;
    outline-style: auto;
}

select.chosen + div.chosen-container .chosen-search input {
    background-image: none !important;  /* overriding  same setting specified as important in chosen.css; this background-image has all the arrow icons */
    background: #ffffff;
}

select.chosen + div.chosen-container .chosen-drop {       /* position the drop window, set border radius, get rid of shadow */
    border: 1px solid #dfd9c3;
    border-radius: 0 0 6px 6px;
    box-shadow: none;
}

select.chosen + div.chosen-container .chosen-results {    /* keep positioning drop window; set border-radius to one less than container, so the corners will line up properly */
    max-height: 180px;
    margin: 0;
    padding-left: 0;
    border-width: 0;
    border-radius: 0 0 5px 5px;
}

select.chosen + div.chosen-container .chosen-results li.highlighted {  /* emulate highlighted selection in the theme */
  	border: 1px solid #327E04;
	background: #67b021 url("images/ui-bg_highlight-soft_25_67b021_1x100.png") 50% 50% repeat-x;
	font-weight: bold;
	color: #ffffff;
    margin-left: -1px;
}

select.chosen + div.chosen-container .chosen-results li:first-child { /* run a border between the search window and the right scrollbar */
    border-top: 1px solid #dfd9c3;
}

select.chosen + div.chosen-container.chosen-container-active.chosen-with-drop .chosen-single {  /* clear background image, use code to attach ui-widget and ui-widget-content classes; */
    background-image: none;                                                                     /*  applies the theme background to the drop window */
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    box-shadow: none;
}

/* settings for dialog boxes */

.ui-dialog .ui-dialog-content {
    padding: 8px 5px 5px 5px;
}

.ui-dialog .ui-dialog-title {
    color: #459900;
}

.ui-dialog .editPanel > div:first-of-type, .ui-dialog .viewPanel > div:first-of-type {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.ui-dialog .ui-dialog-buttonpane {
    margin-top: 4px;
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: 6px 8px 6px 0;
}

.ui-dialog.msgBox .ui-dialog-buttonpane button {
    height: 28px;
    margin: 2px -4px 3px 12px;
}

.ui-dialog.msgBox .ui-button-text-only .ui-button-text {
    padding: 3px 12px 4px 12px;
}

.ui-dialog > button[title='Close'] {
    margin-top: -.56em;
}

label.checkBox.ui-button {
    border-radius: 6px;
    height: 18px;
    width: 18px;
    margin-top: 10px;
    border-width: 2px;
    background-color: #459e00;
    background-image: none;
    border-color: #327e04;
}

label.checkBox.ui-button.ui-state-focus {
    outline-color: #9cce6b;
    outline-width: medium;
    outline-style: solid;
}

label.checkBox.ui-button:not(.ui-state-active) {
    background-color: #ffffff;
    border-color: #dcdabc;
}

label.checkBox.ui-button .ui-icon {
    left: 1px;
    top: 8px;
}

label.checkBox.ui-button:not(.ui-state-active) .ui-icon.ui-button-icon-primary {
    display: none;
}

label.checkBox .ui-button-text {
    text-align: left;
    padding: 1px 0 0 32px;
    font-weight: normal;
    color: black;
}