/**
 * This file defines CMS-specific customizations to the jQuery UI theme.
 * Every rule in this file should be wrapped in the '.cms' selector (to make it more specific),
 * and 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
 */

.cms {	
	.ui-tabs {
		padding: 0;
		background: none;
		
		.ui-widget-header {
			border: 0;
			background: none;
		}
	 	
		.ui-tabs-nav {
			margin: 0;
			padding: 0;
			
			li {
				top: 0;
				border-bottom: 0 !important;
				
				a {
					padding: 0 15px;
				}
			}
			
			&.ui-state-active {
				border-color: $color-medium-separator;
			}
		}
		
		.ui-tabs-panel {
			background: transparent; // default it's white
		}
		.cms-panel-padded .ui-tabs-panel {
			padding: 0;	// Removes double paddle around main pages page, does not effect other areas of the site from what I can tell
		}
	}

	.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 0;
			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;
		}
	}
}
