@import "compass/css3";
@import "settings/gradient";
@import "settings/multi-shadow";
@import "settings/multi-transition";
@import "settings/vars";

/* Set up Variable Colors */
$windowBorder: #AAA;
$dividerBorder: #888;

$white75: rgba(255,255,255,.75);
$black75: rgba(0,0,0,.75);
$black75hex: #404040;

$white50: rgba(255,255,255,.50);
$black50: rgba(0,0,0,.50);
$black50hex: #7f7f7f;

$white25: rgba(255,255,255,.25);
$black25: rgba(0,0,0,.25);
$black25hex: #bfbfbf;

$fontFamily: Arial, sans-serif;

$frameBorderRadius: 6px;

$buttonBorderRadius: 4px;
$buttonBorder: #666;

div.contentSection > h2 {
	@include background-gradient-ie(#F4F4F4,#DBDBDB);
	margin: 0;
	padding: 0 0 0 30px;
	font: bold 12px/30px Arial, sans-serif;
	color: #444;
	text-shadow: 0 1px 0 $white75;
	border-top: 1px solid #D8D8D8;
	border-bottom: 1px solid #BBB;
	position: relative;
	}

/* ========================== */
/* =  Two Column Pane View  = */
/* ========================== */
div.wsTwoColPane {
	display: table;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	& > div {
		display: table-cell;
		vertical-align: top;
		& > h2 {
			border-top: none;
			padding-left: 10px;
			border-bottom: 1px solid $windowBorder;
			&.leftButtons {
				padding-left: 0;
			}
		}
	}
	div.wsSideCol {
		width: 320px;
		border-right: 1px solid $dividerBorder;
		@include border-radius(0 0 0 5px);
		background: #F8F8F8;
		&.wsSideColCollapsed {
			width: 35px !important;
			h2 {
				width: 35px !important;
				overflow: hidden;
				height: 30px;
				span {
					display: none;
				}
				span.leftButtons {
					display: block;
				}
				a.ebaTitleButton {
					border-right: none;
				}
				a.ebaTitleButton img.showIcon {
/*					margin-left: 11px;
					margin-right: 16px;*/
				}
			}
			ul {
				width: 35px !important;
				overflow: hidden;
				li h3 {
					display: none;
				}
				li a span img {
					margin-left: 5px !important;
				}
			}
		}
		ul.sectionList {
			/* Give this a width so the table cell does not collapse */
			width: 320px;
			margin: 0;
			padding: 0 0 10px 0;
			list-style: none;
			li {
				margin: 0;
				padding: 0;
				clear: left;
				a {
					border-bottom: 1px solid #DDD;
					background-color: #FFF;
					text-decoration: none;
					color: #333;
					text-shadow: 0 1px 0 #FFF;
					padding: 0 10px;
					height: 40px;
					display: block;
/*					@include multi-transition(background-color .1s linear);
*/					&.active {
						@include background-gradient(#99B0D4,#5872AB);
						border-bottom: 1px solid #374466;
						text-shadow: 0 -1px 0 $black25;
						color: #FFF;
					}
					&:hover {
/*						background-color: #F0F0F0;*/
					}
					h3 {
						float: left;
						width: 270px;
						margin: 0;
						padding: 8px 0;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font: bold 12px/12px Arial, sans-serif;
						em {
							display: block;
							font: normal 11px/12px Arial, sans-serif;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
		ul.sectionList.noSubLine a {
			height: 30px;
			h3 {
				padding: 3px 0;
				font: bold 12px/24px Arial, sans-serif;
			}
		}
	}
	div.wsMainCol {
		div.apex-rds-container {
			@include background-gradient-ie(#F4F4F4,#DBDBDB);
			margin: 0;
			font: bold 12px/30px Arial, sans-serif;
			color: #444;
			text-shadow: 0 1px 0 $white75;
			border-bottom: 1px solid #BBB;
			position: relative;
			padding-left: 4px;
			border-bottom: 1px solid $windowBorder;
			height: 30px;
			ul.apex-rds {
				margin: 0;
				padding: 0;
				list-style: none;
				li {
					float: left;
					display: block;
					padding: 5px 0;
					a {
						background: none;
						height: auto;
						border: none;
						display: block;
						font: bold 12px/12px Arial, sans-serif;
						float: left;
						padding: 4px 8px;
						text-decoration: none;
						span {
							font: bold 12px/12px Arial, sans-serif;
							color: #666;
						}
						&:hover {
							background: none;
							border: none;
							span {
								color: #333 !important;
							}
						}
					}
					&.apex-rds-selected a,
					&.apex-rds-selected a:hover {
						@include background-gradient-ie(#777,#888);
						@include border-radius(3px);
						@include multi-shadow(0 1px 2px rgba(0,0,0,.5) inset);
						span {
							color: #FFF !important;
							text-shadow: 0 -1px 0 rgba(0,0,0,.25);
						}
					}
				}
			}
		}
		div.wsMainColContentContainer {
			padding: 10px;
		}
	}
}