@import "compass/css3";
@import "settings/gradient";
/*@import "settings/box-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;

/* ===================== */
/* = Main Window Frame = */
/* ===================== */
.clear {
	clear: both;
}

div.ebaFrame {
	margin: 0 auto 10px auto;
	min-width: 760px;
	background: #FFF;
}

/* Main Container with Left / Right Borders*/
div.ebaContentContainer {
	border-left: 1px solid $windowBorder;
	border-right: 1px solid $windowBorder;
	border-bottom: 1px solid $windowBorder;
	@include border-radius(0 0 6px 6px);
	overflow: hidden;
}

/* ==================================== */
/* = Window Frame Heading and Buttons = */
/* ==================================== */
div.ebaFrameHeader {
	@include background-gradient-ie(#EEEEEE,#CCCCCC);
	@include border-radius($frameBorderRadius $frameBorderRadius 0 0);
	@include box-shadow(0 1px 0 $white75 inset);
	border: 1px solid $windowBorder;
	border-bottom: 1px solid $dividerBorder;
	position: relative;
}
div.ebaFrameHeader h1 {
	margin: 0;
	font: bold 14px/40px $fontFamily;
	padding: 0 10px;
	text-shadow: 0 1px 0 $white75;
	color: $black75;
	color: $black75hex;
}

/* Right side of Heading */
div.ebaFrameHeader div.ebaButtons {
	position: absolute;
	right: 0;
	top: 0;
}

/* Heading Buttons */
div.ebaFrameHeader div.ebaButtons a {
	display: block;
	float: left;
	font: bold 11px/12px $fontFamily;
	padding: 6px 10px;
	@include background-gradient-ie(#F8F8F8,#D8D8D8);
	margin: 7px 7px 7px 3px;
	border: 1px solid $buttonBorder;
	@include border-radius($buttonBorderRadius);
	color: $black75;
	text-shadow: 0 1px 0 $white75;
	text-decoration: none;
	@include box-shadow(0 1px 0 $white75, 0 1px 0 #FFF inset)
}
div.ebaFrameHeader div.ebaButtons a.ebaHotButton {
	border: 1px solid #822024;
	@include background-gradient-ie(#EB0014,#C3000F);
	color: #FFF;
	text-shadow: 0 -1px 0 rgba(0,0,0,.35);
	@include box-shadow(0 1px 0 $white75, 0 1px 0 $white50 inset)
}
div.ebaFrameHeader div.ebaButtons a.ebaHotButton:active {
	@include background-gradient-ie(#CE0014,#A2000D);
	@include box-shadow(0 1px 0 $white75, 0 1px 2px $black50 inset)
}
div.ebaFrameHeader div.ebaButtons a.ebaBlackButton {
	border: 1px solid #222;
	@include background-gradient-ie(#555555,#222222);
	color: #FFF;
	text-shadow: 0 -1px 0 $black75;
	@include box-shadow(0 1px 0 $white75, 0 1px 0 $white25 inset)
}
div.ebaFrameHeader div.ebaButtons a.ebaBlackButton:active {
	@include background-gradient-ie(#444444,#111111);
	@include box-shadow(0 1px 0 $white75, 0 1px 2px $black50 inset)
}
div.ebaFrameHeader div.ebaButtons a:active {
	@include background-gradient-ie(#D0D0D0,#AAAAAA);
	@include box-shadow(0 1px 0 $white75, 0 1px 2px $black50 inset)
}

/* ============================= */
/* = Window Frame Content Body = */
/* ============================= */
div.ebaContent {
	display: table;
	width: 100%;
	min-height: 600px;
	}
	div.ebaContent div.ebaMainCol,
	div.ebaContent div.ebaSideCol {
		display: table-cell;
		vertical-align: top;
		padding: 0 0 5px 0;
		}
div.ebaContent div.ebaMainCol {
	@include border-radius(0 0 0 5px);
	}

div.ebaContent div.ebaSideCol {
	width: 200px;
	border-left: 1px solid #AAA;
	background: #F0F0F0;
	@include border-radius(0 0 5px 0);
	}

/* ================================= */
/* = Window Frame Content Sections = */
/* ================================= */

/* Main Section */
div.contentSectionMain {
	position: relative;
	}


/* Edit Link */
div.contentSection h3 span {
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	a {
		position: relative;
		float: left;
	}
}

div.contentSection h3 a,
a.ebaEditLink {
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	margin: 7px 7px 0 0;
	font: normal 11px/14px $fontFamily;
	text-decoration: none;
	color: #666;
	padding: 2px 8px;
	@include border-radius(4px);
	border: 1px solid #EEE;
	@include multi-transition(background .2s linear, border .2s linear, color .2s linear);
	&:hover {
		border: 1px solid #BBB;
		color: #333;
		background-color: #F0F0F0;
	}
	img {
		border: none;
		vertical-align: baseline;
	}
	img.editIcon {
		width: 9px;
		height: 9px;
		background: url(../img/ws_control_icons.png) -30px -9px no-repeat;
		margin-right: 4px;
	}
	&:hover img.editIcon {
		background: url(../img/ws_control_icons.png) -30px 0 no-repeat;
	}
	img.addIcon {
		width: 9px;
		height: 9px;
		background: url(../img/ws_control_icons.png) -39px -9px no-repeat;
		margin-right: 4px;
	}
	&:hover img.addIcon {
		background: url(../img/ws_control_icons.png) -48px -9px no-repeat;
	}

}



/* Value Attribute Pair Table */
/* VAP Table */
div.ebaContent table.ebaVAPTable {
	width: 100%;
	padding: 10px 0 5px 0;
	}
	div.ebaContent table.ebaVAPTable th,
	div.ebaContent table.ebaVAPTable td {
		padding: 0 10px 5px 10px;
		font: normal 12px/16px Arial, sans-serif;
		color: $black75hex;
		vertical-align: top;
		}
	div.ebaContent table.ebaVAPTable th {
		font-weight: bold;
		text-align: left;
		width: 120px;
		}

/* ============================ */
/* = Content Section Headings = */
/* ============================ */
/* Section Headings */
div.contentSection h2 {
	@include background-gradient-ie(#F0F0F0,#E0E0E0);
	margin: 0;
	padding: 0 0 0 30px;
	font: bold 12px/30px Arial, sans-serif;
	color: $black75hex;
	text-shadow: 0 1px 0 $white75;
	border-top: 1px solid #D8D8D8;
	border-bottom: 1px solid #BBB;
	position: relative;
	}

/* Smaller Heading */
div.contentSection h2.secondaryHeading {
	background: none #FFF;
	margin: 0;
	padding: 0 10px 0 30px;
	font: bold 11px/30px Arial, sans-serif;
	color: $black75;
	color: $black75hex;
	text-shadow: none;
	border-top: none;
	border-bottom: none;
	position: relative;
	}

/* Collapsing Icons */
div.contentSection h2 a.contentSectionControl,
div.contentSection h2 a.contentSectionControl.collapsed {
	position: absolute;
	top: 0;
	left: 0;
	}
	div.contentSection h2 a.contentSectionControl img,
	div.contentSection h2 a.contentSectionControl.collapsed img {
		width: 18px;
		height: 18px;
		display: block;
		margin: 6px;
		border: none;
	}
	div.contentSection h2 a.contentSectionControl img {
		background: url(../img/eba_details_page_icons.png) 0 -46px no-repeat;
	}
	div.contentSection h2 a.contentSectionControl.collapsed img {
		background: url(../img/eba_details_page_icons.png) 0 -28px no-repeat;
	}

/* Heading Right Buttons */
div.contentSection h2 > span {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	&.leftButtons {
		position: relative;
		float: left;
		margin-right: 10px;
		a.ebaTitleButton {
			border-left: none;
			border-right: 1px solid lighten($windowBorder,10);
			border-right: 1px solid rgba(0,0,0,.10);
		}
	}
}
div.contentSection h2 a.ebaTitleButton {
	display: block;
	float: left;
	text-decoration: none;
	margin: 0;
	padding: 0 0 0 5px;
	border-left: 1px solid lighten($windowBorder,10);
	border-left: 1px solid rgba(0,0,0,.10);
	}
	div.contentSection h2 a.ebaTitleButton span {
		display: block;
		float: left;
		font: normal 11px/30px Arial, sans-serif;
		padding-left: 5px;
		padding-right: 2px;
		color: #666;
		text-shadow: 0 1px 0 $white75;
		}
	div.contentSection h2 a.ebaTitleButton img.addIcon {
		width: 13px;
		height: 14px;
		display: block;
		float: left;
		margin: 8px 10px 8px 5px;
		background: url(../img/eba_details_page_icons.png) 0 0 no-repeat;
		border: none;
		}
	div.contentSection h2 a.ebaTitleButton:hover img.addIcon {
		background: url(../img/eba_details_page_icons.png) 0 -14px no-repeat;
		}
	div.contentSection h2 a.ebaTitleButton img.viewAllButton {
		width: 7px;
		height: 14px;
		display: block;
		float: left;
		margin: 8px 13px 8px 8px;
		background: url(../img/eba_details_page_icons.png) 0 -64px no-repeat;
		border: none;
		}
	div.contentSection h2 a.ebaTitleButton:hover img.viewAllButton {
		background: url(../img/eba_details_page_icons.png) 0 -78px no-repeat;
		}
	div.contentSection h2 a.ebaTitleButton img.backIcon {
		width: 7px;
		height: 14px;
		display: block;
		float: left;
		margin: 8px 13px 8px 8px;
		background: url(../img/eba_details_page_icons.png) -7px -64px no-repeat;
		border: none;
		}
	div.contentSection h2 a.ebaTitleButton:hover img.backIcon {
		background: url(../img/eba_details_page_icons.png) -7px -78px no-repeat;
		}
	div.contentSection h2 a.ebaTitleButton img.showIcon {
		width: 11px;
		height: 18px;
		display: block;
		float: left;
		margin: 6px 12px 6px 7px;
		background: url(../img/eba_details_page_icons.png) -18px -28px no-repeat;
		border: none;
		}
	div.contentSection h2 a.ebaTitleButton:hover img.showIcon {
		background: url(../img/eba_details_page_icons.png) -18px -46px no-repeat;
		}
	div.contentSection h2 a.ebaTitleButton img.hideIcon {
		width: 11px;
		height: 18px;
		display: block;
		float: left;
		margin: 6px 12px 6px 7px;
		background: url(../img/eba_details_page_icons.png) -29px -28px no-repeat;
		border: none;
		}
	div.contentSection h2 a.ebaTitleButton:hover img.hideIcon {
		background: url(../img/eba_details_page_icons.png) -29px -46px no-repeat;
		}
	div.contentSection h2 a.ebaTitleButton img.optionsIcon {
		width: 14px;
		height: 14px;
		display: block;
		float: left;
		margin: 8px 10px 8px 4px;
		background: url(../img/eba_details_page_icons.png) -27px 0 no-repeat;
		border: none;
		}
	div.contentSection h2 a.ebaTitleButton:hover img.optionsIcon {
		background: url(../img/eba_details_page_icons.png) -27px -14px no-repeat;
		}
	div.contentSection h2 a.ebaTitleButton img.commentButton {
		width: 13px;
		height: 14px;
		display: block;
		float: left;
		margin: 8px 10px 8px 5px;
		background: url(../img/eba_details_page_icons.png) -14px 0 no-repeat;
		border: none;
		}
	div.contentSection h2 a.ebaTitleButton:hover img.commentButton,
	div.contentSection h2 a.activeButton img.commentButton {
		background: url(../img/eba_details_page_icons.png) -14px -14px no-repeat;
		border: none;
		}
	div.contentSection h2 a.ebaTitleButton:hover {
		@include background-gradient-ie(#E8E8E8,#D8D8D8);
		}
	div.contentSection h2 a.ebaTitleButton:hover span {
		color: $black75hex;
		}
	div.contentSection h2 a.activeButton,
	div.contentSection h2 a.activeButton:hover {
		@include background-gradient-ie(#999999,#BBBBBB);
		border-left: 1px solid lighten($windowBorder,10);
		}
		div.contentSection h2 a.activeButton span,
		div.contentSection h2 a.activeButton:hover span {
			color: $black75 !important;
		}
		
/* ============================= */
/* = Section Sub Headings (h3) = */
/* ============================= */
/* Stylized H3 for DSBody Only */
div.contentSection div.sectionBody > h3 {
	@include background-gradient-ie(#F0F0F0,#FFFFFF);
	margin: 0;
	padding: 10px 10px 5px 10px;
	font: bold 12px/12px Arial, sans-serif;
	color: #666;
	text-shadow: 0 1px 0 $white75;
	border-top: 1px solid #CCC;
	position: relative;
	}
div.contentSection div.sectionBody > h3.ebaBordered {
	padding: 10px;
	border-bottom: 1px solid #EEE;
	}
/* Hide Top Border if it is the first heading */
div.contentSection div.sectionBody > h3:first-child {
	border-top: none !important;
	}
div.contentSection div.sectionBody {
	position: relative;
	padding: 0 0 5px 0;
	}
div.contentSection div.sectionBody div.ebaNoData {
	padding: 10px;
	font: normal 11px/12px Arial, sans-serif;
	color: $black50;
	}
div.contentSection div.sectionBodyPadded {
	padding: 10px;
	}
div.contentSection table.ebaVAPTable {
	width: 100%;
	padding: 0 0 10px 0;
	}
	div.contentSection table.ebaVAPTable th,
	div.contentSection table.ebaVAPTable td {
		padding: 5px 10px 0 10px;
		font: normal 11px/16px Arial, sans-serif;
		color: #333;
		}
	div.contentSection table.ebaVAPTable th {
		font-weight: bold;
		text-align: left;
		width: 120px;
		}

/* ======================================= */
/* = Table List View (Files, Links, etc) = */
/* ======================================= */
table.ebaReportView {
	width: 100%;
	padding: 0;
	}
table.ebaReportView thead tr th {
	@include background-gradient-ie(#F0F0F0,#FFFFFF);
	margin: 0;
	padding: 0 10px;
	font: normal 11px/24px Arial, sans-serif;
	color: #333;
	text-shadow: 0 1px 0 $white75;
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #DDD;
	/* Removing text-align because APEX uses align="" attribute applied to cell*/
	/*text-align: left;*/
	}
	table.ebaReportView thead tr th.firstCol,
	table.ebaReportView thead tr th.editCol,
	table.ebaReportView thead tr th.deleteCol {
		border-right: none;
		padding: 0;
		width: 24px;
		}
	table.ebaReportView thead tr th:last-child {
		border-right: none;
		}
	table.ebaReportView .ebaRightAligned {
		text-align: right;
		}
table.ebaReportView tbody tr td {
	font: normal 12px/16px Arial, sans-serif;
	padding: 5px 10px;
	color: #333;
	}
	table.ebaReportView tbody tr td a {
		color: #333;
		text-decoration: underline;
		}
	table.ebaReportView tbody tr td.editCol {
		padding: 0 0 0 8px;
		vertical-align: middle;
		text-align: middle;
		}
		table.ebaFiles tbody tr td img {
			display: block;
			}
table.ebaReportView tbody tr:nth-child(2n) td {
	background-color: #F8F8F8;
	}

/* ================== */
/* = Right Side Bar = */
/* ================== */
div.ebaContent div.ebaSideCol div.uniqueKey {
	padding: 3px 10px;
	margin: 10px auto;
	width: 100px;
	text-align: center;
	font: normal 11px/12px Arial, sans-serif;
	border: 1px solid #CCC;
	background: #FFF;
	@include border-radius(20px);
	color: #444;
	}
	div.ebaContent div.ebaSideCol div.uniqueKey span {
		font-weight: bold;
		}
div.ebaContent div.ebaSideCol div.buttonPadding {
	margin: 10px;
	a {
		margin: 10px 0;
	}
	}
div.ebaContent div.ebaSideCol h3 {
	@include background-gradient-ie(#F0F0F0,#D0D0D0);
	margin: 0;
	padding: 5px 10px;
	font: bold 12px/12px Arial, sans-serif;
	color: #333;
	text-shadow: 0 1px 0 rgba(255,255,255,.75);
	border-top: 1px solid #D8D8D8;
	border-bottom: 1px solid #BBB;
	}
/* Any div after a H3 in the side will have a slightly lighter bg and bottom border */
div.ebaContent div.ebaSideCol h3 + div {
	background: #F8F8F8;
	border-bottom: 1px solid #CCC;
	}
	
div.ebaContent div.ebaSideCol h3 + div + h3 {
	border-top: none;
}
	
div.ebaSideCol a.ebaButton,
div.ebaSideCol a.ebaHotButton {
	display: block;
	font: normal 12px/12px Arial, sans-serif;
	padding: 6px 10px;
	text-align: center;
	@include background-gradient-ie(#F8F8F8,#D8D8D8);
	margin: 0 0 10px 0;
	border: 1px solid $buttonBorder;
	@include border-radius($buttonBorderRadius);
	color: #333;
	text-shadow: 0 1px 0 rgba(255,255,255,.75);
	text-decoration: none;
	@include box-shadow(0 1px 0 $white75, 0 1px 0 #FFF inset);
	}
	div.ebaSideCol a.ebaButton:active {
	@include background-gradient-ie(#D0D0D0,#AAAAAA);
	@include box-shadow(0 1px 0 $white75, 0 1px 2px $black50 inset);
	}

div.ebaSideCol a.ebaHotButton {
	border: 1px solid #822024;
	@include background-gradient-ie(#EB0014,#C3000F);
	color: #FFF;
	text-shadow: 0 -1px 0 rgba(0,0,0,.35);
	@include box-shadow(0 1px 1px $white75, 0 1px 0 $white50 inset);
	font-weight: bold;
}
	div.ebaSideCol a.ebaHotButton:active {
	@include background-gradient-ie(#CE0014,#A2000D);
	@include box-shadow(0 1px 0 $white75, 0 1px 2px $black50 inset)
	}

		
/* Badge */
div.sideBadge {
	position: relative;
	padding: 10px 10px 0 10px;
	}
	div.sidebadge + h3 {
		border-top: none !important;
		}

div.sideBadge div.badgeTotal,
div.sideBadge div.badgeStats {
	float: left;
	overflow: hidden;
	padding-bottom: 10px;
}
div.sideBadge div.badgeTotal {
	width: 60px;
	a {
		padding: 0;
		margin-left: 0;
		display: block;
		font: normal 36px/36px Arial, sans-serif;
		color: #333;
		text-decoration: none;
		letter-spacing: -2px;
		span {
			display: block;
			font: normal 11px/12px Arial,sans-serif;
			color: #888;
			letter-spacing: 0px;
			padding: 0;
			text-decoration: none;
		}
	}
}

div.sideBadge div.badgeTotal a:hover {
	color: #EA0000;
}
div.sideBadge div.badgeStats {
	width: 120px;
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			padding: 0;
			margin: 0 0 5px 0;
			clear: both;
			position: relative;
			height: 12px;
			span, strong {
				font: normal 11px/12px Arial,sans-serif;
				display: block;
				color: #666;
				float: left;
			}
			span {
				width: 95px;
				text-align: right;
			}
			strong {
				text-align: right;
				font-weight: bold;
				color: #333;
				width: 25px;
			}
		}
	}
}

/* ===================== */
/* = Text Comment Box  = */
/* ===================== */
div.textBox {
	@include background-gradient-ie(#BBBBBB,#DDDDDD);
	padding: 5px !important;
	border-bottom: 1px solid #BBB;
	display: none;
}
div.textBoxContainer {
	display: block;
	border: 1px solid #AAA;
	padding: 5px;
	background: #FFF;
}
div.textBox textarea {
	display: block;
	border: none;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 40px;
	font: normal 12px/16px Arial, sans-serif;
	color: #333;
	background: #FFF;
}

/* ======================= */
/* = Wizard Progress Bar = */
/* ======================= */
ul.ebaProgressWizard {
	margin: 0;
	list-style: none;
	padding: 0;
	li {
		padding: 0;
		float: left;
		min-width: 50px;
		span {
			min-width: 50px;
			display: block;
			height: 24px;
			@include background-gradient-ie(#DDDDDD,#FFFFFF);
			@include box-shadow(0 1px 0 $white75, 0 1px 0 $white25 inset);
			border-top: 1px solid $buttonBorder;
			border-bottom: 1px solid $buttonBorder;
			border-right: 1px solid rgba(0,0,0,.15);
		}
		&:last-child span {
			border-right: 1px solid $buttonBorder;
		}
		em {
			display: block;
			padding: 1px 20px 0 0;
			font: normal 11px/11px $fontFamily;
			color: $black75;
			text-shadow: 0 1px 0 $white75;
			white-space: nowrap;
		}
	}
	li:first-child span {
		@include border-radius(4px 0 0 4px);
		border-left: 1px solid $buttonBorder;
	}
	li:last-child span {
		@include border-radius(0 4px 4px 0);
		border-right: 1px solid $buttonBorder;
	}
	li.currentStep span,
	li.completedStep span {
/*		background: url(../img/eba_wizard_progress.gif) 0 0 repeat-x;*/
		@include background-gradient-ie(#999,#666);
		@include box-shadow(0 1px 0 $white75, 0 1px 0 $white50 inset);
		border-color: $buttonBorder;
		}
	li.currentStep em {
		font-weight: bold;
	}
}

/* Wizard Container in Header */
div.ebaProgressBar {
	padding: 10px;
	position: absolute;
	right: 0;
	top: 0;
}

/* Make progress bar gray / black so that it does not steal focus from submit / next buttons */
div.ebaWizardFrame {
	&.ebaSmallWizard {
		width: 760px;
	}
	&.ebaLoginWizard {
		width: 760px;
		div.ebaContentContainer div.ebaContent {
			min-height: 200px;
		}
	}
	width: 960px;
	margin: 20px auto;
	@include box-shadow(0 2px 10px rgba(0,0,0,.15));
	@include border-radius($frameBorderRadius);
	ul.ebaProgressWizard li {
		min-width: 40px;
		span {
			height: 18px;
			min-width: 40px;
		}
	}
	div.ebaFrameHeader {
		h1.oracleLogo {
			font: normal 18px/20px $fontFamily;
			padding: 0;
			margin: 20px 0 20px 14px;
			background: url(../img/eba_header.png) -29px 1px no-repeat;
			text-indent: 150px;
			span {
				font: normal 18px/20px $fontFamily;
			}
		}
		div.ebaProgressBar {
			padding: 20px 14px;
		}
		span.ebaButtons {
			position: absolute;
			right: 0;
			top: 0;
			display: block;
			padding: 14px 4px 14px 0;
		}
	}
	div.ebaContentContainer {
		@include border-radius(0);
		border-bottom: none;
		div.ebaContent {
			display: block;
			width: auto;
			min-height: 260px;
			border-bottom: 1px solid #EEE;
			padding: 10px;
			div.loadingRegion {
				margin: 40px auto;
				padding: 20px;
				width: 480px;
				@include border-radius(4px);
				background-color: #F0F0F0;
				border: 1px solid #AAA;
				@include box-shadow(0 0 2px rgba(0,0,0,.5) inset);
				text-align: center;
				h2 {
					margin: 0 0 10px 0;
					font: bold 16px/20px Arial, sans-serif;
					color: #333;
				}
			}
			div.successRegion {
				background: url(../img/icons/checkmark_success_96.png) 20px 50% no-repeat;
				padding: 20px 20px 20px 120px;
				h1 {
					font: normal 18px/24px Arial, sans-serif;
					margin: 0 10px 10px 10px;
					color: #333;
				}
				h1 strong {
					font-weight: bold 18px/24px Arial, sans-serif
				}
				table {
					border-spacing: 0;
					border-collapse: collapse;
					margin: 0;
					br {
						display: none;
					}
				}
				p {
					font: normal 13px/18px Arial, sans-serif;
					color: #333;
					margin: 0 10px 10px 10px;
					a {
						text-decoration: underline;
						color: #333;
						&:hover {
							color: #888;
						}
					}
				}
			}
		}
	}
	div.ebaWizardFrameContainer {
		border: 1px solid #AAA;
		border-top: none;
		border-bottom: none;
		div.ebaTwoColPane {
			border-bottom: 1px solid #EEE;
			div.ebaSideCol {
				@include border-radius(0);
			}
		}
	}
	div.ebaFrameFooter {
		background-color: #F8F8F8;
		@include border-radius(0 0 $frameBorderRadius $frameBorderRadius);
		height: 32px;
		border: 1px solid $windowBorder;
		border-bottom: 1px solid $windowBorder;
		border-top: none;
		position: relative;
		padding: 14px 14px;
		span {
			position: absolute;
			right: 0;
			top: 0;
			display: block;
			padding: 14px 4px 0 14px;
		}
	}	
	a.ebaButton,
	a.ebaHotButton {
		display: block;
		float: left;
		@include background-gradient-ie(#F8F8F8,#D8D8D8);
		font: normal 14px/24px Arial, sans-serif;
		padding: 3px 15px;
		height: 24px;
		text-align: center;
		margin: 0 10px 0 0;
		border: 1px solid $buttonBorder;
		@include border-radius($buttonBorderRadius);
		color: #333;
		text-shadow: 0 1px 0 rgba(255,255,255,.75);
		text-decoration: none;
		@include box-shadow(0 1px 0 $white75, 0 1px 0 #FFF inset);
		}
	a.ebaButton:active {
		@include background-gradient-ie(#D0D0D0,#AAAAAA);
		@include box-shadow(0 1px 0 $white75, 0 1px 2px $black50 inset);
		}
	a.ebaButton:focus,
	a.ebaHotButton:focus {
		outline: 1px dotted #666;
	}
	a.ebaHotButton {
		border: 1px solid #822024;
		@include background-gradient-ie(#EB0014,#C3000F);
		color: #FFF;
		text-shadow: 0 -1px 0 rgba(0,0,0,.35);
		@include box-shadow(0 1px 1px $white75, 0 1px 0 $white50 inset);
		font-weight: bold;
	}
	a.ebaHotButton:active {
		@include background-gradient-ie(#CE0014,#A2000D);
		@include box-shadow(0 1px 0 $white75, 0 1px 2px $black50 inset)
		}
	a.ebaNextButton {
		padding: 3px 0 3px 15px;
		img {
			width: 22px;
			height: 24px;
			background: url(../img/ws_control_icons.png) -24px -57px no-repeat;
			vertical-align: top;
			border: 0;
			margin: 0 5px 0 0;
		}
	}
	a.ebaPrevButton {
		padding: 3px 15px 3px 0;
		img {
			width: 22px;
			height: 24px;
			background: url(../img/ws_control_icons.png) -24px -33px no-repeat;
			vertical-align: top;
			border: 0;
			margin: 0 0 0 5px;
		}
	}
	a.ebaDisabledButton {
		@include opacity(0.5);
		cursor: default;
	}
	div.ebaWizardText {
		margin: 10px 0;
		h1 {
			font: normal 18px/24px Arial, sans-serif;
			margin: 0 10px 10px 10px;
			color: #333;
		}
		ul {
			list-style: none;
			margin: 0 0 10px 0;
			padding: 0;
			li {
				margin: 0 0 10px 0;
				text-indent: 30px;
				strong {
					font: bold 13px/14px Arial, sans-serif;
					color: #333;
				}
				span {
					display: block;
					font: normal 12px/12px Arial, sans-serif;
					color: #999;
				}
				a {
					color: #333;
				}
			}
		}
		p {
			font: normal 13px/18px Arial, sans-serif;
			color: #333;
			margin: 0 10px 10px 10px;
			a {
				text-decoration: underline;
				color: #333;
				&:hover {
					color: #888;
				}
			}
		}
	}
}

/* ====================== */
/* = APEX Forms Styling = */
/* ====================== */

/* Override FCK Editor's Padding */
span.cke_skin_kama {
	padding: 0 !important;
}
div.formNoHighlight tr:hover td {
	background: none !important;
}
.ebaFormTable table.formlayout {
	border-spacing: 0 0;
	border-collapse: collapse;
	& > tbody > tr {
		& > td {
			@include border-radius(4px);
			background-color: #FFF;
			@include multi-transition(background-color .1s linear);
		}
		& > td:first-child {
			@include border-radius(4px 0 0 4px);
		}
		& > td:last-child {
			@include border-radius(0 4px 4px 0);
		}
		&:hover > td {
			background-color: #F8F8F8;
		}
		&.rowHighlight > td { 
			background-color: #F0F0F0;
		}
	}
	td.lov input.popup_lov {
		border: 1px solid $dividerBorder;
		padding: 6px;
		font: normal 14px/16px Arial, sans-serif;
		@include border-radius(3px);
		@include box-shadow(0 1px 2px $black25);
		background-color: #F8F8F8;
		@include opacity(0.75);
		color: #333;
		@include multi-transition(background-color .1s linear, border .1s linear);
	}
	& > tbody > tr > td {
		padding: 5px 10px;
		&.ebaLabelTop {
			padding: 10px;
		}
		input.text_field,
		select.selectlist,
		textarea {
			border: 1px solid $dividerBorder;
			padding: 6px;
			font: normal 14px/16px Arial, sans-serif;
			@include border-radius(3px);
			@include box-shadow(0 1px 2px $black25);
			background-color: #F8F8F8;
			color: #333;
			@include multi-transition(background-color .1s linear, border .1s linear);
			&:focus {
				background-color: #FFF;
				border: 1px solid #666;
			}
		}
		textarea.codeTextarea {
			font: normal 11px/14px monospace;
		}
		select.selectlist {
			/* Add extra margin to get cell height same as single text field*/
			margin: 6px 0 7px 0;
		}
		span.display_only,
		span.display_only a {
			font: normal 14px/16px Arial, sans-serif;
			color: #333;
		}
		fieldset label {
			display: inline;
		}
		label {
			display: block;
			min-width: 120px;
			padding: 3px 40px 3px 0;
			font: normal 14px/16px Arial, sans-serif;
			color: #666;
			a {
				font: normal 14px/16px Arial, sans-serif;
				color: #666;
				text-decoration: none;
			}
			&.ebaRequired,
			&.ebaRequired a {
				color: #EA0000;
				font-weight: bold;
			}
			&.ebaNoLabel {
				display: none;
				& + br {
					display: none;
				}
			}
		}
		span.ebaLabelError {
			font: normal 11px/12px Arial, sans-serif;
			color: #666;
		}
	}
}

/* ========================== */
/* =  Two Column Pane View  = */
/* ========================== */
div.ebaTwoColPane {
	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;
			color: #666;
			&.leftButtons {
				padding-left: 0;
			}
		}
	}
	div.ebaSideCol {
		width: 320px;
		border-right: 1px solid $dividerBorder;
		@include border-radius(0 0 0 5px);
		background: #F8F8F8;
		&.ebaSideColCollapsed {
			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;
					height: 40px;
					display: block;
/*					@include multi-transition(background-color .1s linear);
*/					&.active {
						@include background-gradient(#E6E6E6,#C6C6C6);
						border-bottom: 1px solid #AAA;
						text-shadow: 0 1px 0 $white75;
						color: #222;
					}
					h3 {
						float: left;
						width: 270px;
						margin: 0;
						padding: 8px 0;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font: bold 12px/12px $fontFamily;
						em {
							display: block;
							font: normal 11px/12px $fontFamily;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
		ul.sectionList.noSubLine a {
			height: 30px;
			h3 {
				padding: 3px 10px;
				font: bold 12px/24px Arial, sans-serif;
			}
		}
	}
	div.ebaMainCol {
		div.ebaMainColContentContainer {
			padding: 10px;
		}
		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: 5px;
			border-bottom: 1px solid $windowBorder;
			height: 30px;
			float: none;
			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 11px/12px Arial, sans-serif;
						float: left;
						padding: 4px 8px;
						text-decoration: none;
						span {
							font: bold 11px/12px Arial, sans-serif;
							color: #666;
						}
						&:hover {
							background: none;
							border: none;
							span {
								color: #333 !important;
							}
						}
					}
					&.apex-rds-selected a,
					&.apex-rds-selected a:hover {
						color: #333;
						@include background-gradient-ie(#777,#888);
						@include border-radius(3px);
						@include box-shadow(0 1px 2px rgba(0,0,0,.5) inset);
						span {
							color: #FFF !important;
							text-shadow: 0 -1px 0 rgba(0,0,0,.25);
						}
					}
				}
			}
		}
	}
}

/* =================== */
/* = Content Regions = */
/* =================== */
/* Section Container */
div.ebaRegion {
	margin: 0 0 10px 0;
	h1 {
		margin: 0;
		padding: 0;
		font: bold 14px/30px $fontFamily;
		color: #333;
		border-bottom: 1px solid #DDD;
		position: relative;
		/* Collapse / Expand Control */
		a.ebaRegionControl {
			display: block;
			float: left;
			img {
				width: 18px;
				height: 18px;
				display: block;
				margin: 6px 6px 6px 0;
				background: url(../img/eba_details_page_icons.png) 0 -46px no-repeat;
				border: none;
			}
			&.ebaRegionControl img {
				background: url(../img/eba_details_page_icons.png) 0 -28px no-repeat;
			}
		}
		/* Buttons Container */
		span {
			position: absolute;
			right: 0;
			top: 0;
			a.ebaRegionLink {
				display: block;
				float: left;
				margin: 6px 0 0 4px;
				font: normal 11px/14px $fontFamily;
				text-decoration: none;
				color: #666;
				padding: 2px 8px;
				@include border-radius(4px);
				border: 1px solid #EEE;
				@include multi-transition(background .2s linear, border .2s linear, color .2s linear);
				&:hover {
					border: 1px solid #BBB;
					color: #333;
					background-color: #F0F0F0;
				}
				img {
					border: none;
					vertical-align: baseline;
				}
				img.editIcon {
					width: 9px;
					height: 9px;
					background: url(../img/ws_control_icons.png) -30px -9px no-repeat;
					margin-right: 4px;
				}
				&:hover img.editIcon {
					background: url(../img/ws_control_icons.png) -30px 0 no-repeat;
				}
				&.ebaTopLink {
					padding: 3px 6px 1px 6px;
				}
				img.topIcon {
					width: 9px;
					height: 9px;
					background: url(../img/ws_control_icons.png) -39px 0 no-repeat;
				}
				&:hover img.topIcon {
					background: url(../img/ws_control_icons.png) -48px 0 no-repeat;
				}
			}
		}
	}
	div.ebaRegionContent {
		margin: 10px 0 0 0;
		& > a {
			color: #000;
			font: normal 12px/16px $fontFamily;
		}
		pre {
			font: normal 11px/14px 'Menlo', 'Consolas', monospace;
			color: #666;
		}
	}
	div.ebaTextRegion {
		font: normal 12px/16px $fontFamily;
		p {
			margin: 0 0 10px 0;
			font: normal 12px/16px $fontFamily;
			}
		h3, b {
			margin: 0;
			font: bold 13px/18px $fontFamily;
			color: #333;
		}
		a {
			color: #888;
			}
		& > ul,
		& > ol {
			margin: 10px 0 10px 25px;
			padding: 0;
			}
		& > ul {
			list-style: square outside;
			li {
				font: normal 12px/16px;
			}
			ul {
				list-style: square outside;
				margin: 2px 0 2px 20px;
				padding: 0;
			}
		}
	}
}

/* ==================== */
/* = Large Icons List = */
/* ==================== */
table.ebaLargeIcons {
	padding-bottom: 4px;
	width: 100%;
	td {
		vertical-align: middle;
		text-align: center;
		a {
			display: block;
			@include transition(background-color border, .2s);
			@include border-radius(3px);
			padding: 0;
			text-decoration: none;
			border: 1px solid transparent;
			&:hover {
				background-color: #F0F0F0;
				border: 1px solid #DDD;
				color: #333;
				span.iconLabel {
					color: #333;
				}
			}
			span.largeIcon {
				display: block;
				margin: 0 auto;
				img {
					border: none;
				}
			}
			span.iconLabel {
				display: block;
				margin: 0 auto 10px auto;
				font: normal 13px/13px Arial, sans-sreif;
				text-decoration: none;
				color: #666;
				color: rgba(0,0,0,.75);
			}
		}
	}
}