/*
 * Nifty Corners with borders is tricky. we must use multiple divs (tab_container_* styles) to accomplish what we want.
 * This consists of three concentric rectangles (outer = tab_container, middle = tab_container_spacer, inner = tab_container_content).
 * The outer defines a background color for the "border" color (dark yellow) and is rounded on the top (see /_js/roundedTabs.js).
 * The middle overlays this with the interior color (light yellow) and is rounded on the top (see /_js/roundedTabs.js)..
 * The inner provides padding so the tab separators do not span the full height of the parent components.
 */
.tab_container {
	float: right;
	margin-right: 20px; /* to make right-aligned with 'GO' button in header */
	_margin-right: 10px;
	width: 930px;
}
.tab_container .panel {
	height: 35px;
	padding: 10px 0;
}
.tab_container .panel {
	background-color: #FFFEE9 !important; /* light yellow */
}
.tab_container .ui-panel-footer {
	/* as per spec, truncate bottom of tabs */
	display: none;
}

.tab_container_spacer {
	/* this style is required to ensure that padding does not interfere with nifty corners */
	float: left;
	width: 914px; /* (tab_container.width=920) - 6 */
	position: relative;
	margin-top: -1px;
	left: 3px;
	background-color: #FFFEE9; /* light yellow */
	padding-bottom: 10px;
}
.tab_container_content {
	padding: 10px 0;
}
.tab_container a {
	color: #69A800; /* light green */
	text-decoration: none;
}
.tab_container a:hover {
	color: #006CC8; /* matches blue in adjacent arrow */
}

.tab {
	float: left;
	border-left: 1px solid #EFEBC8; /* dark yellow */
	width: 160px; /* minimum size to avoid automatic wrapping */
	padding-left: 20px; /* (bg.position=5) + (bgimage.width=9) + extra */
	color: #69A800; /* light green */
	font-family: Arial, Helvetica;
	font-size: 13px;
	font-weight: bold;
	
	background-image: url('/_img/arrows/arrow-blue.gif');
	background-repeat: no-repeat;
	background-position: 5px 7px;
}
.lefttab {
	border-left: none;
	margin-left: 5px;
}
.righttab {
	border-right: none;
}