/**
 * inputEx.Field
 */
div.inputEx-fieldWrapper {
   margin-bottom:0.2em;
}

div.inputEx-label {
   float: left;
   color: #505050;
   text-align: right;
   padding: 0.2em 0.5em 0 0;
}

div.inputEx-Group div.inputEx-label {
   width: 130px;
}

div.inputEx-Field {
   float: left;
}

div.inputEx-description {
   clear:both;
   color: #505050;
   font-size: 75%;
   margin-top: 2px;
}

div.inputEx-message {
   float: left;
   margin: 4px;
   font-size: 85%;
}

div.inputEx-clear-div {
	clear: both;
}


/**
 * VALID, INVALID, EMPTY states (and focused)
 */

div.inputEx-invalid > div.inputEx-message {
   color:#C00E0C;
   font-weight:bold;
}

div.inputEx-invalid > div.inputEx-label {
   color:#C00E0C;
   font-weight:bold;
}

div.inputEx-invalid > div.inputEx-label label {
   background:transparent url(?CLIENT_RESOURCE=inputex/images/error_bang.gif) no-repeat scroll 0 1px;
   padding-left:20px;
}

div.inputEx-valid > div.inputEx-message {
   color:#505050;
   font-weight: normal;
}

div.inputEx-valid > div.inputEx-label {
   color:#505050;
   font-weight:normal;
}

/* Properties set by an invalid higher hierarchy field are disabled for valid or empty subfields */
div.inputEx-valid > div.inputEx-label label,
div.inputEx-empty > div.inputEx-label label {
   background: none;
   padding-left: inherit;
   font-weight:normal;
   color: #505050;
}


div.inputEx-typeInvite > div.inputEx-Field input, div.inputEx-typeInvite > div.inputEx-Field textarea {
   color: #aaa;
}
div.inputEx-empty div.inputEx-valid div.inputEx-Field input, div.inputEx-empty div.inputEx-valid div.inputEx-Field textarea {
   color: black;
}

/**
 * inputEx.StringField
 */
div.inputEx-StringField-wrapper {
   float: none;
}

/**
 * inputEx.Group
 */

legend.inputEx-Group-legend {
   color:#63126B;
   font-weight: bold;
}

div.inputEx-Group div.inputEx-Group-collapseImg {
   width: 14px;
   height: 14px;
   background-image: url(?CLIENT_RESOURCE=inputex/images/sprite-menu.gif);
   background-color: transparent;
   background-repeat: no-repeat;
   background-attachment: scroll;
   float: left;
}

div.inputEx-Group fieldset.inputEx-Expanded legend ,
div.inputEx-Group fieldset.inputEx-Collapsed legend {
   cursor: pointer;
}

div.inputEx-Group fieldset.inputEx-Expanded legend div.inputEx-Group-collapseImg {
   background-position: -8px 2px;
}

div.inputEx-Group fieldset.inputEx-Expanded legend:hover div.inputEx-Group-collapseImg {
   background-position: -8px -78px;
}

div.inputEx-Group fieldset.inputEx-Collapsed legend div.inputEx-Group-collapseImg {
   background-position: -8px -317px;
}

div.inputEx-Group fieldset.inputEx-Collapsed legend:hover div.inputEx-Group-collapseImg {
   background-position: -8px -397px;
}

div.inputEx-Group fieldset.inputEx-Collapsed div.inputEx-fieldWrapper {
   display: none;
}


/**
 * inputEx.Form
 */

div.inputEx-Form-buttonBar {
   margin: 3px 0 0 137px;
}

.inputEx-Button { margin:0 4px 0 0; }

div.inputEx-Form-Mask {
   height:275px;
   left:0pt;
   position:absolute;
   top:0pt;
   width:180px;
}

div.inputEx-Form-Mask div.inputEx-Form-Mask-bg {
   background-color:#FFFFFF;
   height:100%;
   left:0pt;
   opacity:0.9;
   position:absolute;
   top:0pt;
   width:100%;
}
div.inputEx-Form-Mask div.inputEx-Form-Mask-spinner {
   width: 36px;
   height: 36px;
   background-image: url(?CLIENT_RESOURCE=inputex/images/spinner.gif);
}
div.inputEx-Form-Mask span {
   color:#666666;
}




/**
 * UrlField
 */
 
/* position relative to position:absolute favicon inside */
div.inputEx-UrlField {position:relative;}

div.inputEx-UrlField input { padding-left: 20px; }

div.inputEx-UrlField input.nofavicon {
   padding-left: 0px;
}

div.inputEx-UrlField img {
   position: absolute;
   top: 3px;
   left: 2px;
   width: 16px;
   height: 16px;
}


/**
 * inputEx-ListField
 */

/* Buttons */
img.inputEx-ListField-addButton {
    background: transparent url(?CLIENT_RESOURCE=inputex/images/add.png) no-repeat scroll 0%;
    width: 16px;
    height: 16px;
    cursor: pointer;
 }

img.inputEx-ListField-delButton {
   background: transparent url(?CLIENT_RESOURCE=inputex/images/delete.png) no-repeat scroll 0%;
   width: 16px;
   height: 16px;
   float: left;
   cursor: pointer;
}

/* Arrows */
div.inputEx-ListField-Arrow {
   width: 16px;
   height: 16px;
   float: left;
   cursor: pointer;
}

div.inputEx-ListField-ArrowUp {
   background: transparent url(?CLIENT_RESOURCE=inputex/images/bullet_arrow_up.png) no-repeat scroll 0%;
}
div.inputEx-ListField-ArrowDown {
   background: transparent url(?CLIENT_RESOURCE=inputex/images/bullet_arrow_down.png) no-repeat scroll 0%;
}

div.inputEx-ListField-subFieldEl {
  float:left;
  margin-left:4px;
}

a.inputEx-List-link {
   color: blue;
   cursor: pointer;
   margin-left: 10px;
}

a.inputEx-List-link:hover {
   text-decoration: underline;
}


/**
 * inputEx.InPlaceEdit
 */
div.inputEx-InPlaceEdit-visu { cursor: pointer; padding: 3px; }

.inputEx-InPlaceEdit-editor .inputEx-InPlaceEdit-editorDiv {
  float: left;
  margin-bottom:0; /* remove 0.2em bottom margin because no need to cumulate field and editor-field margins */
}

.inputEx-InPlaceEdit-OkButton { margin-left: 5px; }


/**
 * inputEx.AutoComplete
 */
.yui-skin-sam div.inputEx-AutoComplete .yui-ac-input {
   width: auto;
   position: relative;
}
.yui-skin-sam div.inputEx-AutoComplete .yui-ac-content {
   width: auto;
}
div.inputEx-AutoComplete div.yui-ac-container {
   margin-bottom:2em;
   width:25em;
}

/**
 * DateField
 */

div.inputEx-DateField {
   background: transparent url(?CLIENT_RESOURCE=inputex/images/calendar.gif) no-repeat scroll left center;
   padding-left: 20px;
}

div.inputEx-DateField input {
   width: 75px;
}

/**
 * Picker fields
 */
div.inputEx-PickerField, div.inputEx-PickerField input {
   vertical-align: top;
}

div.inputEx-PickerField {
   background: none;
   padding-left: 0;
}

div.inputEx-PickerField .yui-menu-button button {
    background-position: center center;
    background-repeat: no-repeat;
    padding:0;
    width:20px;
    height:18px;
    min-height:0; /* reset "min-height:2em" that prevented "height:18px" to be applied */
}

div.inputEx-PickerField .yui-overlay {
	-moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.2), -2px 2px 4px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.2), -2px 2px 4px rgba(0, 0, 0, 0.2);
}

/*
* Date Picker
*/
div.inputEx-DatePickerField .yui-menu-button button {
    background-image: url(?CLIENT_RESOURCE=inputex/images/calendar.gif);
}


/**
 * Color Field
 */

div.inputEx-ColorField div.yui-overlay div.bd {
   background:white no-repeat scroll 5px 5px;
   border:1px solid #AAAAAA;
}

div.inputEx-ColorField .yui-menu-button button {
    background-image: url(?CLIENT_RESOURCE=inputex/images/palette.png);
}

div.inputEx-ColorField-button {
	height: 19px;
	width: 100px;
	border: 1px solid #B5B8C8;
	margin-left: 0px;
	cursor: pointer;
	float:left; /* to display color picker icon on the right */
}

.inputEx-ColorField-square {
   float:left;
   cursor: pointer;
   width:15px;
   height:15px;
   margin:2px;
}

.inputEx-ColorField-square.selected {
	width:13px;
	height:13px;
	border-width:1px;
	border-style:solid;
	border-color:#666666;
	border-color:rgba(0,0,0,0.5);
}

.inputEx-ColorField-square:hover {
	width:13px;
	height:13px;
	border-width:1px;
	border-style:solid;
	border-color:#666666;
	border-color:rgba(0,0,0,0.5);
}

.inputEx-ColorField-Grid { padding:5px; }


/**
 * ColorPicker Field (YUI ColorPicker)
 */

.inputEx-ColorPicker-Button { vertical-align: baseline; }
.inputEx-ColorPicker-Button button { 
	outline: none;  /* Safari */
	line-height: 1.5;
}

/* Style the Button instance's label as a square whose background color 
	represents the current value of the ColorPicker instance. */
.inputEx-ColorPicker-Label {
	display: block;
	display: inline-block;
	*display: block;    /* For IE */
	*margin: .25em 0;    /* For IE */
	width: 1em;
	height: 1em;
	overflow: hidden;
	text-indent: 1em;
	background-color: #fff;
	white-space: nowrap;
	border: solid 1px #000;
}


/* Hide default colors for the ColorPicker instance. */
.inputEx-ColorPicker-Container-nocontrols .yui-picker-controls,
.inputEx-ColorPicker-Container-nocontrols .yui-picker-swatch,
.inputEx-ColorPicker-Container-nocontrols .yui-picker-websafe-swatch {
	display: none;
}


/* Size the body element of the Menu instance to match the dimensions of the ColorPicker instance. */
.inputEx-ColorPicker-Container {
	width: 370px;
	height: 190px; 
}

.inputEx-ColorPicker-Container-nocontrols {
	width: 220px;
	height: 190px; 
}


/**
 * SliderField
 */
div.inputEx-SliderField {
}

div.inputEx-SliderField div.inputEx-SliderField-bg {
   position: relative;
   background:url(?CLIENT_RESOURCE=inputex/css/'../images/slider-bg-h.gif') 5px 0 no-repeat;
   height:28px;
   width:112px;
   float: left;
}

div.inputEx-SliderField div.inputEx-SliderField-thumb {
   background: url(?CLIENT_RESOURCE=inputex/css/'../images/thumb-n.gif') 0px 0px no-repeat;
   cursor: pointer;
   position: absolute;
   top: 4px;
   width: 17px;
   height: 21px;
}

div.inputEx-SliderField div.inputEx-SliderField-value {
   float: left;
   margin-top:6px;
   margin-left: 5px;
}


/**
 * Password Field
 */

div.inputEx-PasswordField input {
   float: left;
}

div.inputEx-PasswordField div.capsLockWarning {
   float: left;
   margin:3px 4px;
   color: #505050;
   font-size: 85%;
}

div.inputEx-Password-StrengthIndicator {
    float: left;
    color: #505050;
    font-size: 70%;
    margin-left:10px;
    width:83px;
}

div.inputEx-Password-StrengthIndicator div.inputEx-Password-StrengthIndicatorBlock {
   background-color: white;
   width: 1.4em;
   height: 7px;
   border: 1px solid #aaaaaa;
   float: left;
   margin-left: 2px;
}

/**
 * Checkbox
 */
 
/* Common css */
div.inputEx-CheckBox { padding-top:0.2em; }
div.inputEx-CheckBox input { margin-right: 0.2em; }
label.inputExForm-checkbox-rightLabel { cursor:pointer; }

/* Awful hack to target IE < 8 */
div.inputEx-CheckBox { *padding-top:0; }

/* Awful hack to target webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) { div.inputEx-CheckBox input {position:relative; top:1px;} }


/**
 * Radio Field
 */
label.inputEx-RadioField-rightLabel { cursor: pointer; }

div.inputEx-RadioField-choice { float: left; margin-right: 10px; padding-top:0.2em; }
div.inputEx-RadioField-choice input[type="radio"] { margin-right:0.2em; }

/* Vertical display */
.inputEx-RadioField-Vertically .inputEx-RadioField-choice { float: none; }

/**
 * CombineField
 */

div.inputEx-CombineField-separator {
   float: left;
   margin-top:2px;
}

/**
 * DDList
 */
.inputEx-DDList-item {
   padding: 5px;
   background-color: #DDDDDD;
   cursor: move;
   border: 1px solid #BBBBBB;
   width: 300px;
   position: relative;
}

.inputEx-DDList-item span.inputEx-DDList-label {
}

.inputEx-DDList-item a {
   color:#D05D00;
   padding: 3px 5px;
   position:absolute;
   right:0;
   top:0;
   cursor: pointer;
}

.inputEx-DDList-item a:hover {
   text-decoration: underline;
}


/**
 * inputEx.TypeField
 */
div.inputEx-TypeField-EditButton {
   width: 16px;
   height: 16px;
   background-image: url(?CLIENT_RESOURCE=inputex/images/pencil.png);
   cursor: pointer;
   float: left;
   margin-left:4px;
   position: relative;
}

div.inputEx-TypeField-EditButton.opened {
   background-image: url(?CLIENT_RESOURCE=inputex/images/pencil_delete.png);
}

div.inputEx-TypeField-FieldValueWrapper {
   float: left;
   margin-left: 4px;
}

div.inputEx-TypeField-PropertiesPanel {
   border: 1px solid #aaa;
   padding: 3px;
   background-color: white;
   position: absolute;
   top: 0px;
   left: 16px;
   z-index:1;
   width: 380px;
}

/**
 * inputEx.MenuField
 */

div.inputEx-MenuField div.inputEx-Result {background-color:#FFFFFF; border:1px solid #CCCCCC; padding:2px 25px 2px 5px; cursor:pointer}
div.inputEx-MenuField div.inputEx-RightArrow {background-image:url(?CLIENT_RESOURCE=inputex/images/menu-right-arrow.png);background-position:right center;background-repeat:no-repeat;}
div.inputEx-MenuField div.inputEx-DownArrow {background-image:url(?CLIENT_RESOURCE=inputex/images/menu-down-arrow.png);background-position:right center;background-repeat:no-repeat;}


/**
 * inputEx-JsonTreeInspector
 */
ul.inputEx-JsonTreeInspector li {
   padding-left: 20px;
   list-style-type: none;
}
 
ul.inputEx-JsonTreeInspector li.collapsed {
   background:transparent url(?CLIENT_RESOURCE=inputex/images/plus.gif) no-repeat scroll 0 0;
   cursor: pointer;
}

ul.inputEx-JsonTreeInspector li.expanded {
   background:transparent url(?CLIENT_RESOURCE=inputex/images/minus.gif) no-repeat scroll 0 0;
   cursor: pointer;
}

ul.inputEx-JsonTreeInspector li span {
   padding-left: 20px;
   color: green;
}

ul.inputEx-JsonTreeInspector li span.type-number,
ul.inputEx-JsonTreeInspector li span.type-boolean {
   color: blue;
}

ul.inputEx-JsonTreeInspector li span.type-null {
   color: red;
}


/**
 * Datatable
 */
.yui-skin-sam .inputex-datatable-columnsDlg {visibility:hidden;border:1px solid #808080;background-color:#E3E3E3;}
.yui-skin-sam .inputex-datatable-columnsDlg .hd {font-weight:bold;padding:1em;background:none;background-color:#E3E3E3;border-bottom:0;}
.yui-skin-sam .inputex-datatable-columnsDlg .ft {text-align:right;padding:.5em;background-color:#E3E3E3;}
.yui-skin-sam .inputex-datatable-columnsDlg .bd {height:10em;margin:0 1em;overflow:auto;border:1px solid black;background-color:white;}
.yui-skin-sam .inputex-datatable-columnsDlg .dt-dlg-pickercol {clear:both;padding:.5em 1em 3em;border-bottom:1px solid gray;}
.yui-skin-sam .inputex-datatable-columnsDlg .dt-dlg-pickerkey {float:left;}
.yui-skin-sam .inputex-datatable-columnsDlg .dt-dlg-pickerbtns {float:right;}
/* Container workarounds for Mac Gecko scrollbar issues */
.yui-skin-sam .yui-panel-container.hide-scrollbars .inputex-datatable-columnsDlg .bd {
    /* Hide scrollbars by default for Gecko on OS X */
    overflow: hidden;
}
.yui-skin-sam .yui-panel-container.show-scrollbars .inputex-datatable-columnsDlg .bd {
    /* Show scrollbars for Gecko on OS X when the Panel is visible  */
    overflow: auto;
}

/**
 * inputEx-dtInPlaceEdit
 */
tbody.yui-dt-data td.yui-dt-editable div.inputEx-dtInPlaceEdit-onModifyItem{
	background-color: #FFAFAF;
}

tbody.yui-dt-data div.inputEx-dtInPlaceEdit-deleteLinkSpinner{
	width:16px;
	height:16px;
	background:transparent url(?CLIENT_RESOURCE=inputex/images/ajax-loader.gif) no-repeat scroll 20px 4px;
}

.yui-dt-editor .yui-dt-button button {
  width: auto;
}

/**
 * StringAvailability
 */
div.inputEx-fieldWrapper div.availabilityDiv { 
	display:none;
	float:left;
	height:20px;
}

div.inputEx-fieldWrapper div.availabilityDiv div.icon {
	float:left;
	display:none;
	height:20px;
	width:16px;
	margin-left:5px;
}

div.inputEx-fieldWrapper div.availabilityDiv.loading div.icon {
	display:block;
	background: transparent url(?CLIENT_RESOURCE=inputex/images/ajax-loader.gif) no-repeat 0 3px;
}

div.inputEx-fieldWrapper div.availabilityDiv.available div.icon {
	display:block;
	background: transparent url(?CLIENT_RESOURCE=inputex/images/tick.gif) no-repeat 0 3px;
}

div.inputEx-fieldWrapper div.availabilityDiv.unavailable div.icon {
	display:block;
	background: transparent url(?CLIENT_RESOURCE=inputex/images/exclamation.gif) no-repeat 0 3px;
}


div.inputEx-fieldWrapper div.availabilityDiv div.text {
	float:left;
	height:20px;
	padding:4px 5px 0;
	font-size:85%;
	font-weight:bold;
}

div.inputEx-fieldWrapper div.availabilityDiv.unavailable div.text,
div.inputEx-fieldWrapper div.availabilityDiv.required div.text{
	color:#C00E0C;
}

div.inputEx-fieldWrapper div.availabilityDiv.available div.text{
	color:#2C811D;
}