/****
		dijit.form.TextBox
		dijit.form.ValidationTextBox
		dijit.form.SerializableTextBox
		dijit.form.RangeBoundTextBox
		dijit.form.NumberTextBox
		dijit.form.CurrencyTextBox
		dijit.form.NumberSpinner
		dijit.form.ComboBox (partial)
 ****/

/* Main types: dijitTextBox is one of a kind. dijitDateTextBox and
dijitNumberTextbox are similar (need spacing around the validation
icon). dijitSpinner is different from those two despite having a
validation icon because the button is *inside* the field. It ends up
being more like the combobox. */

.dijitInputField INPUT,
.dijitTextBox,
.dijitComboBox,
.dijitSpinner {
	margin: 0;
	color: #333;
	background-color: #FFF;
	width: 165px; /* Override dijit default 15em - em does not translate for all components */
}

.dj_ie .dijitInputField INPUT {
	font-family: arial, helvetica, sans-serif !important;
	font-size: 11px !important;
}

.dijitTextBox,
.dijitComboBox,
.dijitSpinner,
.dijitTextArea {
	font-size: 11px;
}

.dijitTextBox {
	height: 20px;
}

.dijitTextArea,
.dijitTextBox,
.dijitSpinner input{
	color: #333;
}

input.dijitTextBox {
	padding: 4px 0 0 7px;
	height: 22px;
	width: 167px; /* Override dijit default 15em, which is shorter than 15em above */
}

.dj_webkit input.dijitTextBox {
	padding-top: 0;
}

.dj_ff36 input.dijitTextBox {
	padding-top: 0px;
}

.dj_ff36_mac input.dijitTextBox {
	padding-top: 1px;
}

.dj_ie input.dijitTextBox {
	padding-top: 3px;
	height: 17px;
}

.dijitTextBox input {
	padding: 4px 0 0 7px;
	height: 18px;
}

.dj_ff36 .dijitTextBox input {
	padding-top: 2px;
}

/*
.dj_ff36_mac .dijitTextBox input {
	padding-top: 3px;
}
*/
.dijitSpinner input {
	padding: 4px 0 0 7px;
	height: 16px;
}

.dj_webkit .dijitTextBox input,
.dj_webkit .dijitSpinner input{
	padding-top: 0;
	height: 18px;
}

.dijitTextBox,
.dijitComboBox,
.dijitSpinner,
.dijitTextArea,
.dijitInlineEditor input {
	/* 	For all except dijit.form.NumberSpinner:  the actual input element.
		For TextBox, ComboBox, Spinner: the div that contains the input.
		Otherwise the actual input element.
	*/
	line-height: normal;
}

.dijitTextBox .dijitValidationIcon {
	padding: 1px 2px 0 0;
}

.dijitDateTextBox,
.dijitNumberTextBox {
	width: 8em;
	padding: 0;
}

.dijitNumberTextBox {
	width: 50px;
}

.dijitDateTextBox .dijitInputField,
.dijitNumberTextBox .dijitInputField,
.dijitSpinner .dijitInputField {
        background: none;
}

.dj_webkit .dijitDateTextBox .dijitInputField,
.dj_webkit .dijitNumberTextBox .dijitInputField,
.dj_webkit .dijitSpinner .dijitInputField {
        padding-top: 1px;
}

.dijitDateTextBox .dijitInputField input,
.dijitNumberTextBox .dijitInputField input,
.dijitSpinner .dijitInputField input{
		color: #333;
}

.dj_ff36 .dijitDateTextBox .dijitInputField input {
	padding-top: 1px;
}

.dj_ff36 .dijitNumberTextBox .dijitInputField input {
	padding-top: 2px;
}

.dj_ff36 .dijitSpinner .dijitInputField input {
	padding-top: 2px;
}

.dj_ie .dijitTextBox .dijitInputField input {
		font-family: arial, helvetica, sans-serif !important;
}

.dijitTextBoxDisabled,
.dijitComboBoxDisabled,
.dijitSpinnerDisabled,
.dijitTextAreaDisabled {
	background: #EEE;
}

.dijitTextBox .dijitTextBoxDisabled,
.dijitComboBox .dijitComboBoxDisabled,
.dijitSpinner .dijitSpinnerDisabled,
.dijitTextArea .dijitTextAreaDisabled {
	border-color: #B5C5D3; /* NOT THEMED */
}


/* ComboBox specifix rules*/
.dijitComboBox .dijitInputField {
	padding: 4px 4px 0px 7px;
	height: 14px;
}

.dj_ie .dijitComboBox .dijitInputField {
	padding: 5px 4px 3px 7px;
	height: 13px !important;
}

.dijitComboBox .dijitButtonNode {
	padding: 4px 0px 1px 0px;
	height: 16px;
}

.dijitComboButtonDisabled .dijitButtonNode,
.dijitComboBoxDisabled,
.dijitSpinnerDisabled,
.dijitSpinnerDisabled .dijitButtonNode {
	/* disabled state - inner */
	opacity: .6;
	border-color: #B5C5D3; /* NOT THEMED */
	background-color: #EEE;
}

.dijitComboBox .dijitButtonNode,
.dijitSpinner .dijitButtonNode {
	/* line between the input area and the drop down button, color set in theme */
	border-width: 0px 0px 0px 1px;
	border-style: solid;
}

.dijitSpinnerButtonContainer {
	line-height: 20px;
	border-width: 0 0 0 1px;
	border-style: solid;
}

.dijitSpinner .dijitInputLayoutContainer .dijitArrowButton  {
	width: 18px;
}

.dijitSpinner .dijitArrowButtonInner {
	display: block;  /* inline just isnt going to work for us here IMO */
	position:absolute;
	top: 50%;
	margin-top: -4px; /* half its height */
	left: 50%;
	margin-left: -3px; /* half its width */
	line-height: 2px;
}

/* TODO: fix this! Use the same image as we do for dojoxdropdownselect! */
.dijitComboBox .dijitArrowButton {
	width: 16px;
}

.dijitComboBox  .dijitButtonNode .dijitArrowButtonInner {
	margin: 3px 5px 0px 5px;
}

.dj_ie .dijitComboBox .dijitArrowButtonInner {
	margin: 7px 5px 0px 5px;
}

.dj_ie .dijitComboBox input {
	font-family: Arial, Helvetica, Sans-serif !important;
	margin: 0;
}

/* FOCUS */
.dijitTextBoxFocused,
.dijitComboBoxFocused,
.dijitSpinnerFocused, .dijitSpinnerUpArrowActive, .dijitSpinnerDownArrowActive,
.dijitTextAreaFocused {
	/* TODO FOCUS */
}

.dijitComboBoxFocused .dijitButtonNode,
.dijitSpinnerFocused .dijitButtonNode,
.dijitSpinnerUpArrowActive .dijitButtonNode,
.dijitSpinnerDownArrowActive .dijitButtonNode {
	/* border-left-color:#366dba;  FIXME */
}
.dijitSpinnerFocused .dijitDownArrowButton,
.dijitSpinnerUpArrowActive .dijitDownArrowButton,
.dijitSpinnerDownArrowActive .dijitDownArrowButton {
	/* border-top-color:#366dba; FIXME */
}

.dijitError {
	background-image:none;
}

.dijitErrorFocused {
	background-image:none;
}

/* inline edit boxen */
.dijitInlineValue {
	/* span around an inline-editable value when NOT in edit mode */
	padding:3px;
	margin:4px;
}


/* MOW: trying to get this to look like a mini-dialog.  Advised? */
.dijitInlineEditor {
	/* fieldset surrounding an inlineEditor in edit mode */
	display: inline-block;
	display: -moz-inline-stack;
	/*display:inline;*/
	/* TODO: don't we need an IE rule with display: inline to get the correct alignment on IE? */
}

.dijitInlineEditor .saveButton,
.dijitInlineEditor .cancelButton {
	margin:3px 3px 3px 0px;
}

.RichTextEditable {
	border:1px solid;
	border-top:0;
}

/*
 * IE6: can't display PNG images with gradient transparency.
 * Want to use filter property for those images, but then need to specify a path relative
 * to the main page, rather than relative to this file... using gifs for now
 */

.dijitFocusedLabel {
	/* for checkboxes or radio buttons, hatch border around the corresponding label, to indicate focus */
	outline: 1px dotted #666;
}

.dojoxTimeSpinner {
        width: 8em;
}

.dijitTextBoxFocused,
.dijitComboBoxFocused,
.dijitSpinnerFocused, .dijitSpinnerUpArrowActive, .dijitSpinnerDownArrowActive,
.dijitTextAreaFocused {
	outline: none;
}

/* Tooltip and TooltipDialog */

.dijitTooltip,
.dijitTooltipDialog {
	/* the outermost dom node, holding the connector and container */
	background: transparent;	/* make the area on the sides of the arrow transparent */
}

.dj_webkit .dijitPopup .dijitTooltipContainer {
	/* -webkit-border-radius: 5px; */
	-webkit-box-shadow: 0px 5px 10px #999; /* FIXME */
}

.dijitTooltipConnector {
	width:16px;
	height:14px;
}

.dijitTooltipBelow {
	/* leave room for arrow above content */
	padding-top: 13px;
}

.dijitTooltipAbove {
	/* leave room for arrow below content */
	padding-bottom: 13px;
}

.dijitTooltipContainer {
	/*
		The part with the text.
	*/
	border: 1px solid;
	padding: 3px;
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	-webkit-border-radius: 3px;
}

.dj_ff3 .dijitTooltipContainer {
	/* only do this for FF3, because FF2 has problems with glitches */
	-moz-border-radius: 3px;
}
.dijitTooltipConnector {
	/* the arrow piece */
	border:0px;
	z-index: 2;
}
.dijitTooltipABRight .dijitTooltipConnector {
	/* above or below tooltip, but the arrow appears on the right,
		and the right edges of target and tooltip are aligned rather than the left */
	left: auto !important;
	right: 3px;
}

.dijitTooltipBelow .dijitTooltipConnector {
	/* the arrow piece for tooltips below an element */
	top: 0px;
	left: 3px;
}

.dijitTooltipAbove .dijitTooltipConnector {
	/* the arrow piece for tooltips above an element */
	bottom: 0px;
	left: 3px;
}

.dijitTooltipLeft {
	padding-right: 14px;
}

.dijitTooltipLeft .dijitTooltipConnector {
	/* the arrow piece for tooltips to the left of an element, bottom borders aligned */
	right: 0px;
	bottom: 3px;
}

.dijitTooltipConnector {
	/* the arrow piece for tooltips to the left of an element, bottom borders aligned */
	right: 0px;
	bottom: 3px;
}

.dijitTooltipRight {
	padding: 0 0 0 14px;
}