/* HUI Default styles, can be included as a base for overriding or just used as examples */

.inputerror { border: 1px solid #ff0000 }
.inputerrorflag { text-align:center; width: 150px; padding: 2px; border: 1px solid #ff0000; background-color: #ffffaa; color: #cc0000; font-size: 10px }

/* EFFECTS */
.fx_hovering { background-color: #ffffdd }
.fx_focussed { background-color: #ffffdd }
/* */

/* Hide AJAX templates by default so the incomplete template isn't flashed on page load. The AJAX code shows them when results are displayed */ 
.AJAXTEMPLATE { visibility:hidden }
/* */

/* MOVABLE WINDOWS / DIALOGS */
/* Generic class for all movable windows - you must set the position to absolute yourself */
.hui_movablewindow {
 position:absolute; width:200px; height: 100px; 
 border:1px solid #ccccff; border-bottom: 1px solid #aaaacc; border-right: 1px solid #aaaacc; background: #eeeeff
}

.hui_movablewindow .content { padding: 3px }

/* I'm using this class to set up title bars on all movable windows, but it's only necessary to call it this on automatic dialogs */
.hui_dialogtitle { 
	border-bottom: 1px solid #aaaacc; background: #4040aa; color: white; font-weight: bold; padding: 3px 
}

.hui_ephemeraldialog .content { margin-top: 8px; margin-bottom: 8px  }

/* Classes specifically for popup dialogs - apply both this AND the hui_movablewindow class to use these example styles */
/* Set a high z-index so they appear over other elements. Dialogs should probably be just after tool tips */
/* Hide them yourself so they don'y appear in Javascript disabled browsers */
.hui_popupdialog { visibility: hidden; z-index: 200 } 
.hui_dialogclose { float: right; border: 1px solid white; padding: 0px 2px 0px 2px; color: white; text-decoration:none }
.hui_dialogclose:hover { text-decoration:none }
.hui_modalmask { background: url('transparent.png') }
/* */

/* Other windows */
.hui_flashmessage { position:absolute; border:1px solid #000000; background-color: #ffffaa; color: #000000; padding: 8px; font-weight: bold }
/* */

/* TOOL TIPS - you must mark tooltips invisible yourself so they don't appear in non-JS browsers */
/* Set a high z-index so they appear over other elements. Tooltips should probably be the highest */
.hui_tooltip { 
	position:absolute; visibility: hidden; display: block; z-index: 300; 
	border: 1px solid #aaaa00; background: #ffffdd; color: #0000bb; font-size: 11px; width: 200px; height: auto; padding: 4px
} 
/* */

/* MENUS */
.hui_menu { font-size: 14px; padding: 4px 10px 4px 4px;  }
.hui_popup { 
	display:none;
	border: 1px solid #cccccc; background-color: #ffffff; padding: 0px; 
	list-style-type: none; margin: 0px 
}
.hui_popup { width:160px; z-index: 100 } /* Set a high z-index so they appear over other elements */
.hui_popup li { display: inline }
.hui_popup li a { display:block; padding: 2px 12px 2px 12px; font-size: 12px; color: #000000; text-decoration:none }
.hui_popup li a:hover { background: #ffffdd; text-decoration:none }

.hui_menusep span { display: block; overflow: hidden; height: 2px; border-bottom: 1px dotted #cccccc; }
/* */

/* CONTROLS */

/* PrettySelect */
.PrettySelect label { display:block }
.PrettySelect .hui_ps_trigger { border: 1px solid #cccccc; padding: 2px 20px 2px 6px; background: #ffffff url(../cli_hui/arrow-d.gif) no-repeat center right; display:block; }
.PrettySelect .hui_ps_options { border: 1px solid #cccccc; background: #ffffff }
/* */

/* AutoComplete */
.autocomplete_template { visibility: hidden; position:absolute; border: 1px solid #cccccc; background: #ffffff }
/* */