/**
 * This file defines CMS-specific customizations to the jQuery UI theme.
 * Every rule should contain ONLY overwritten jQuery UI rules (with 'ui-' prefix).
 * 
 * This file should be fairly short, as we're using our own custom jQuery UI theme already.
 * TODO Add theme reference
 * 
 * Use _style.scss to add more generic style information,
 * and read the jQuery UI theming API: http://jqueryui.com/docs/Theming/API
 */

.ui-widget-content,
.ui-widget {
	color: $color-text;
	font-size: $font-base-size;
	font-family: $font-family;
	border: 0;
}


.ui-widget-header {			
	background-color: darken($color-widget-bg, 20%);
	padding: 8px 8px 6px 8px;	
	border-bottom: 2px solid darken($color-widget-bg, 35%);
	@include background-image(
		linear-gradient(darken($color-widget-bg, 5%), darken($color-widget-bg, 30%))
		);
	border-bottom: 3px solid darken($color-widget-bg, 50%);
	padding: 8px;	
	@include border-radius(0);
		
	& .ui-dialog-title {
		padding: 6px 10px;
		text-shadow: lighten($color-base, 10%) 1px 1px 0;
	}
	
	
	
	& a.ui-dialog-titlebar-close {
		position:  absolute;
		top: -8px;
		right: -15px;
		width: 30px;
		height:  30px;
		z-index: 100000;
	}
	
	a.ui-state-hover {
		border-color: transparent;
		background: transparent;
		
		.ui-icon-closethick {
			background: sprite($sprites32, dialog-close-over) no-repeat;
		}
	}
	
	.ui-icon-closethick {
		background: sprite($sprites32, dialog-close) no-repeat;
		width: 30px;
		height:  30px;
	}
}

.ui-state-hover {
	cursor: pointer;
}

.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
	color: $color-text;
	font-size: $font-base-size;
	font-family: $font-family;
}

.ui-accordion {
	.ui-accordion-header {
		border-color: $color-button-generic-border;
		margin-bottom: 0;
	}
	.ui-accordion-content {
		border: 1px solid $color-button-generic-border;
		border-top: none;
	}
}

.ui-autocomplete {
	max-height: 240px;
	overflow-x: hidden;
	overflow-y: auto;

	/** sorry about the !important but the specificity of other selectors mandates it over writing out very specific selectors **/
	&-loading {
		background-image: url(../images/throbber.gif) !important;
		background-position: 97% center !important;
		background-repeat: no-repeat !important;
		background-size: auto !important;
	}
}
