/*---------------------*/
/*    input styles     */
/*---------------------*/


/* Inputs positioning */

div[data-inputcontainer] {
	position: relative;
	margin: 25px;
}

div[data-inputcontainer] label {
	float: left;
	width: 200px;
}

div[data-inputcontainer] input,
div[data-inputcontainer] select,
div[data-inputcontainer] textarea,
div[data-inputcontainer] label.checkbox,
div[data-inputcontainer] div.options {
	position: relative;
	float: right;
	z-index: 15;
}

div[data-inputcontainer] input,
div[data-inputcontainer] textarea {
	width: 300px;
}

div[data-inputcontainer] label,
div[data-inputcontainer] input,
div[data-inputcontainer] textarea,
div[data-inputcontainer] ul.errordetails {
	padding: 5px;
}
div[data-inputcontainer] label.checkbox {
	padding: 0;
}

div[data-inputcontainer] select {
	width: 312px;
	padding: 4px;
}

div[data-inputcontainer] textarea {
	min-height: 5em;
}

div[data-inputcontainer] input[type=checkbox],
div[data-inputcontainer] input[type=radio] {
	float: left;
	width: 15px;
	margin: 8px 5px;
}
div[data-inputcontainer] input[type=checkbox] {
	margin: 7px 5px;
}
.ie div[data-inputcontainer] input[type=checkbox],
.ie div[data-inputcontainer] input[type=radio] {
	margin: 3px 0 0 0;
}


div[data-inputcontainer] label.checkbox,
div[data-inputcontainer] div.options {
	width: 310px; /* no padding! */
}

div[data-inputcontainer] div.options label {
	float: right;
	width: 270px;
	padding: 5px;
}

div[data-inputcontainer] [data-inputtabs] {
	position: absolute;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 10;
}

div[data-inputcontainer] [data-inputtab] {
	position: relative;
	display: none;
}

div[data-inputcontainer] [data-inputpopups] {
	position: absolute;
	margin: 0 !important;
	padding: 0 !important;
	max-height: 300px;
	z-index: 10;
	clear: both;
}

div[data-inputcontainer] [data-inputpopup] {
	position: relative;
	display: none;
	clear: both;
}

div[data-inputcontainer] [data-inputicon] {
	position: absolute;
	z-index: 15;
}

div[data-inputcontainer] br {
	clear: both;
}



/* Inputs styling */

div[data-inputcontainer] label {
	border: 1px solid transparent;
	cursor: pointer;
	font-weight: bold;
}

div[data-inputcontainer] input,
div[data-inputcontainer] select,
div[data-inputcontainer] textarea,
div[data-inputcontainer] label.checkbox,
div[data-inputcontainer] div.options {
	font: inherit;
	border: 1px solid rgba(0,0,0,0.2);
}
div[data-inputcontainer] input:hover,
div[data-inputcontainer] select:hover,
div[data-inputcontainer] textarea:hover,
div[data-inputcontainer] label.checkbox:hover,
div[data-inputcontainer] div.options:hover {
	border: 1px solid rgba(0,0,0,0.4);
}
div[data-inputcontainer] input:focus,
div[data-inputcontainer] select:focus,
div[data-inputcontainer] textarea:focus {
	border: 1px solid rgba(0,0,0,1);
	outline: none;
}

div[data-inputcontainer] input[type=radio],
div[data-inputcontainer] input[type=checkbox]
{
	border: none;
}

div[data-inputcontainer] div.options label {
	font-weight: normal;
}

div[data-inputcontainer] input[readonly=readonly],
div[data-inputcontainer] select[readonly=readonly],
div[data-inputcontainer] textarea[readonly=readonly] {
	color: #777;
	background: #EEE;
}




/* Tabs positioning */


/* Icons */

div[data-inputcontainer] [data-inputicon] { 
	position: absolute;
	width: 25px;
	height: 25px;
	top: 1px;
	background-repeat: no-repeat;
	border: none;
	opacity: .5;
	cursor: pointer;
}

div[data-inputcontainer] [data-inputicon]:hover,
div[data-inputcontainer] [data-inputicon].active { 
	opacity: 1;
}

div[data-inputcontainer] [data-inputicon="info"] {
	left: -23px;
	background-image: url(../images/input_info.png);
}

div[data-inputcontainer] [data-inputicon="error"] {
	right: -30px;
	background-image: url(../images/input_error.png);
}

div[data-inputcontainer] [data-inputicon="helper"] {
	right: 4px;
	background-image: url(../images/input_helper.png);
}


/* tabs */

div[data-inputcontainer] [data-inputtab] {
	padding: 2px 8px;
	cursor: pointer;
	min-width: 50px;
	text-align: center;
	border: 1px solid black;
	border-bottom: none;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	margin-right: -8px;
}
div[data-inputcontainer] [data-inputtab]:hover,
div[data-inputcontainer] [data-inputtab].active {
	z-index: 5;
}

div[data-inputcontainer] [data-inputtab].minimized {
	min-width: 0;
}
div[data-inputcontainer] [data-inputtab].minimized .inputtab_text {
	display: none;
}
div[data-inputcontainer] [data-inputtab] .inputtab_icon {
	position: relative;
	display: inline-block;
	width: 13px;
	height: 13px;
	top: 1px;
}
div[data-inputcontainer] [data-inputtab] .inputtab_text {
	position: relative;
	margin-left: 5px;
	font-size: 13px;
	top: -1px;
}

div[data-inputcontainer] [data-inputtab="info"] {
	border-color: #0095da;
	background: #a5e3ff;
}
div[data-inputcontainer] [data-inputtab="info"]:hover,
div[data-inputcontainer] [data-inputtab="info"].active {
	background: #d8f3ff;
}
div[data-inputcontainer] [data-inputtab="info"] .inputtab_icon {
	background: url(../images/icon_tab_info.png);
}

div[data-inputcontainer] [data-inputtab="errors"] {
	border-color: #ff7474;
	background: #ffbfbf;
}
div[data-inputcontainer] [data-inputtab="errors"]:hover,
div[data-inputcontainer] [data-inputtab="errors"].active {
	background: #ffe2e2;
}
div[data-inputcontainer] [data-inputtab="errors"] .inputtab_icon {
	background: url(../images/icon_tab_errors.png);
}

div[data-inputcontainer] [data-inputtab="warnings"] {
	border-color: #ff9933;
	background: #ffdfbf;
}
div[data-inputcontainer] [data-inputtab="warnings"]:hover,
div[data-inputcontainer] [data-inputtab="warnings"].active {
	background: #fff1e4;
}
div[data-inputcontainer] [data-inputtab="warnings"] .inputtab_icon {
	background: url(../images/icon_tab_warnings.png);
}

div[data-inputcontainer] [data-inputtab="helper"] {
	border-color: #6c00e6;
	background: #f1e5ff;
}
div[data-inputcontainer] [data-inputtab="helper"]:hover,
div[data-inputcontainer] [data-inputtab="helper"].active {
	background: #f8f2ff;
}
div[data-inputcontainer] [data-inputtab="helper"] .inputtab_icon {
	background: url(../images/icon_tab_helper.png);
}


/* popups */

div[data-inputcontainer] [data-inputpopup] > * {
	margin: 0;
	padding: 10px;
	background: white;
	line-height: 150%;
}

div[data-inputcontainer] [data-inputpopup="info"] p {
	border: 1px solid #0095da;
}

div[data-inputcontainer] [data-inputpopup="helper"] div.content {
	border: 1px solid #6c00e6;
}

div[data-inputcontainer] [data-inputpopup="warnings"] ul {
	border: 1px solid #ff9933;
}
div[data-inputcontainer] [data-inputpopup="errors"] ul {
	border: 1px solid #ff7474;
}
div[data-inputcontainer] [data-inputpopup="warnings"] li,
div[data-inputcontainer] [data-inputpopup="errors"] li {
	margin: 5px !important;
	list-style-type: none !important;
	white-space: pre-wrap !important;
	text-indent: 0 !important;
}

div[data-inputcontainer] [data-inputpopup="cache"] ul,
div[data-inputcontainer] [data-inputpopup="search"] ul {
	position: relative;
	padding: 0;
	border: 1px solid #aaa;
	z-index: 20;
	overflow-y: auto;
}
div[data-inputcontainer] [data-inputpopup="cache"] li,
div[data-inputcontainer] [data-inputpopup="search"] li{
	padding: 5px;
	cursor: pointer;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	margin: 0;
}
div[data-inputcontainer] [data-inputpopup="cache"] li.current,
div[data-inputcontainer] [data-inputpopup="search"] li.current,
div[data-inputcontainer] [data-inputpopup="cache"] li:hover,
div[data-inputcontainer] [data-inputpopup="search"] li:hover {
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	background: #eaffe0;
}

/* TODO: check these styles */
/* Vertical layout */

div[data-inputcontainer].vertical label {
	margin: 0;
}

div[data-inputcontainer].vertical label,
div[data-inputcontainer].vertical input,
div[data-inputcontainer].vertical select,
div[data-inputcontainer].vertical textarea {
	width: auto;
	min-width: 98%;
}

div[data-inputcontainer].vertical textarea {
	height: 300px;
}

div[data-inputcontainer].vertical img.error {
	top: 1px;
	right: 0;
}


/* Some default AJAX check colors */

div[data-inputcontainer] [data-inputstatus="checking"] {
	border: 1px solid rgb(203,203,0) !important;
	background: rgb(255,255,203);
	background-image: url(../images/icon_ajax_checking.gif);
	background-repeat: no-repeat;
	background-position: center center;
}

div[data-inputcontainer] [data-inputstatus="getting"] {
	border: 1px solid rgb(59,179,0) !important;
	background: rgb(212,255,191);
	background-image: url(../images/icon_ajax_getting.gif);
	background-repeat: no-repeat;
	background-position: center center;
}

div[data-inputcontainer] [data-inputstatus="helping"] {
	border: 1px solid rgb(108,0,230) !important;
	background: rgb(241,229,255);
	background-image: url(../images/icon_ajax_helping.gif);
	background-repeat: no-repeat;
	background-position: center center;
}

div[data-inputcontainer] [data-inputstatus="invalid"] {
	background: #ffe2e2;
}

div[data-inputcontainer] [data-inputstatus="warning"] {
	background: #fff1e4;
}

div[data-inputcontainer] [data-inputstatus="valid"] {
	background: #eaffe0;
}