/* 
    Document   : widgets
    Created on : 23.07.2012, 14:46:43
    
    Description:
        Styles the input elements available in js/widgets.
*/



/* multi select combobox */
.ui-multiselect-menu {
    width: auto !important;

    /*height: 100px;*/
}
.actions .ui-multiselect.ui-widget{
    width: 100% !important;
    min-height:  30px;
}
.ui-multiselect.ui-widget{
    width: auto !important;
    margin: 0 1px;
}
.ui-multiselect-hasfilter ul { position:relative; top:2px }
.ui-multiselect-filter { float:left; margin-right:10px; font-size:11px }
.ui-multiselect-filter input { width:100px; font-size:16px; margin-left:5px; height:20px; padding:2px; border:1px solid #292929; -webkit-appearance:textfield; -webkit-box-sizing:content-box; }
.ui-multiselect { padding:2px 0 2px 4px; text-align:left }
.ui-multiselect span.ui-icon { float:right }
.ui-multiselect-single .ui-multiselect-checkboxes input { position:absolute !important; top: auto !important; left:-9999px; }
.ui-multiselect-single .ui-multiselect-checkboxes label { padding:5px !important }

.ui-multiselect-header { margin-bottom:3px; padding:3px 0 3px 4px }
.ui-multiselect-header ul { font-size:0.9em }
.ui-multiselect-header ul li { float:left; padding:0 10px 0 0 }
.ui-multiselect-header a { text-decoration:none }
.ui-multiselect-header a:hover { text-decoration:underline }
.ui-multiselect-header span.ui-icon { float:left }
.ui-multiselect-header li.ui-multiselect-close { float:right; text-align:right; padding-right:0 }

.ui-multiselect-menu { display:none; padding:3px; position:absolute; z-index:10000; text-align: left }
.ui-multiselect-checkboxes { position:relative /* fixes bug in IE6/7 */; overflow-y:scroll }
.ui-multiselect-checkboxes label { cursor:default; display:block; border:1px solid transparent; padding:3px 1px }
.ui-multiselect-checkboxes label input { position:relative; top:5px }
.ui-multiselect-checkboxes li { clear:both; font-size:1em; padding-right:3px }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label { text-align:center; font-weight:bold; border-bottom:1px solid }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a { display:block; padding:3px; margin:1px 0; text-decoration:none }

.ui-progressbar .ui-progressbar-value{
    background-image: url("../img/ui-darkness/ui-bg_inset-soft_30_f58400_1x100") !important;
}

/*jQuery ui css for datepicker*/
table.ui-datepicker-calendar{
    background: inherit;
    color: inherit;
}
.ui-datepicker-trigger{
    width: 32px;
    height: 32px;
    background-image: url(../img/icons/calendar.png);
    position: relative;
    top: 10px;
}
#ui-datepicker-div{
    z-index: 2 !important;
}

/* css for timepicker */
.ui-timepicker-div .ui-slider-horizontal {
    height: .8em !important
}
.ui-timepicker-div dl{
    line-height: 1em !important;
    width: 100% !important;
}
.ui-timepicker-div dd{
}
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 95px; }
.ui-timepicker-div td { font-size: 100%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

/* slider */

/*jQuery ui css for combobox widget*/
span.ui-combobox{
    width: 100%;
}
.ui-combobox {
    position: relative;
    display: inline-block;
}
.ui-combobox-toggle {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    margin-left: -1px !important;
    padding: 0 !important;
    /* adjust styles for IE 6/7 */
    *height: 1.7em;
    *top: 0.1em;
}

ul.ui-autocomplete{
    max-height : 200px;
    overflow:auto;
}

#collapse-button{
    /*background-color: #22558e;*/
    left: -40px;
    top: -20px;
    padding: 3px;
    position: absolute; 
}

#collapse-button div{
    background-image: url(../img/icons/collapse-small.png);
    background-color: #59473a /*#22558e*/;
    width: 30px;
    height: 30px;
}
.content-expanded #collapse-button div{
    background-color: #59473a /*#22558e*/;
    
    background-image: url(../img/icons/expand-small.png);
}

/*defending ui themes against cake.generic.css (I know its ugly)*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { 
    border: 1px solid #909090;
    /*background: #555555 url(ui-darkness/images/ui-bg_glass_20_555555_1x400.png) 50% 50% repeat-x;*/
    font-weight: normal;
    color: #eeeeee;
}
/*.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 1px solid #FFAF0F !important;
    background: #F58400 url(images/ui-bg_inset-soft_30_f58400_1x100.png) 50% 50% repeat-x !important;
    font-weight: bold !important;
    color: white !important;
}*/
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 6px !important; -webkit-border-top-left-radius: 3px !important; -khtml-border-top-left-radius: 3px !important; border-top-left-radius: 3px !important; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 6px !important; -webkit-border-top-right-radius: 3px !important; -khtml-border-top-right-radius: 3px !important; border-top-right-radius: 3px !important; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 6px !important; -webkit-border-bottom-left-radius: 3px !important; -khtml-border-bottom-left-radius: 3px !important; border-bottom-left-radius: 3px !important; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 6px !important; -webkit-border-bottom-right-radius: 3px !important; -khtml-border-bottom-right-radius: 3px !important; border-bottom-right-radius: 3px !important; }
.ui-button { display: inline-block !important; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
.ui-combobox a.ui-button{
    min-width: 0px;
    opacity: 1;
    border-radius: 0px;
}
.ui-combobox a.ui-button:hover{
    opacity: 1;
}
.ui-combobox-input {
    margin: 0;
    padding: 0.3em;
    width:85%;
    font-size:1em;
}
/*custom fixes to combobox widget*/
.zIndexHigh{
    z-index: 50 !important;
}
ui-slider-horizontal{
    width: 78%;
}
strong{
    color:#B8CDE6/*orange*/;
}

.ui-slider-range{
    padding: 0; /* form div has a default padding which makes its height explode*/
    background: #d4c9be /*#B8CDE6*//*orange*/ none;
}
.ui-slider-horizontal{
    /*height: auto;*/
}
/*  colorpicker */
.colorpicker {
	width: 356px;
	height: 176px;
	overflow: hidden;
	position: absolute;
	background: url(/img/colorpicker/colorpicker_background.png);
	font-family: Arial, Helvetica, sans-serif;
	display: none;
}
.colorpicker_color {
	width: 150px;
	height: 150px;
	left: 14px;
	top: 13px;
	position: absolute;
	background: #f00;
	overflow: hidden;
	cursor: crosshair;
}
.colorpicker_color div {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 150px;
	background: url(/img/colorpicker/colorpicker_overlay.png);
}
.colorpicker_color div div {
	position: absolute;
	top: 0;
	left: 0;
	width: 11px;
	height: 11px;
	overflow: hidden;
	background: url(/img/colorpicker/colorpicker_select.gif);
	margin: -5px 0 0 -5px;
}
.colorpicker_hue {
	position: absolute;
	top: 13px;
	left: 171px;
	width: 35px;
	height: 150px;
	cursor: n-resize;
}
.colorpicker_hue div {
	position: absolute;
	width: 35px;
	height: 9px;
	overflow: hidden;
	background: url(/img/colorpicker/colorpicker_indic.gif) left top;
	margin: -4px 0 0 0;
	left: 0px;
}
.colorpicker_new_color {
	position: absolute;
	width: 60px;
	height: 30px;
	left: 213px;
	top: 13px;
	background: #f00;
}
.colorpicker_current_color {
	position: absolute;
	width: 60px;
	height: 30px;
	left: 283px;
	top: 13px;
	background: #f00;
}
.colorpicker input {
	background-color: transparent;
	border: 1px solid transparent;
	position: absolute;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #898989;
	top: 4px;
	right: 11px;
	text-align: right;
	margin: 0;
	padding: 0;
	height: 11px;
}
.colorpicker_hex {
	position: absolute;
	width: 72px;
	height: 22px;
	background: url(/img/colorpicker/colorpicker_hex.png) top;
	left: 212px;
	top: 142px;
}
.colorpicker_hex input {
	right: 6px;
}
.colorpicker_field {
	height: 22px;
	width: 62px;
	background-position: top;
	position: absolute;
}
.colorpicker_field span {
	position: absolute;
	width: 12px;
	height: 22px;
	overflow: hidden;
	top: 0;
	right: 0;
	cursor: n-resize;
}
.colorpicker_rgb_r {
	background-image: url(/img/colorpicker/colorpicker_rgb_r.png);
	top: 52px;
	left: 212px;
}
.colorpicker_rgb_g {
	background-image: url(/img/colorpicker/colorpicker_rgb_g.png);
	top: 82px;
	left: 212px;
}
.colorpicker_rgb_b {
	background-image: url(/img/colorpicker/colorpicker_rgb_b.png);
	top: 112px;
	left: 212px;
}
.colorpicker_hsb_h {
	background-image: url(/img/colorpicker/colorpicker_hsb_h.png);
	top: 52px;
	left: 282px;
}
.colorpicker_hsb_s {
	background-image: url(/img/colorpicker/colorpicker_hsb_s.png);
	top: 82px;
	left: 282px;
}
.colorpicker_hsb_b {
	background-image: url(/img/colorpicker/colorpicker_hsb_b.png);
	top: 112px;
	left: 282px;
}
.colorpicker_submit {
	position: absolute;
	width: 22px;
	height: 22px;
	background: url(/img/colorpicker/colorpicker_submit.png) top;
	left: 322px;
	top: 142px;
	overflow: hidden;
}
.colorpicker_focus {
	background-position: center;
}
.colorpicker_hex.colorpicker_focus {
	background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
	background-position: bottom;
}
.colorpicker_slider {
	background-position: bottom;
}