﻿
/* Non-branding-specific menu functionality */

.menu-bar div.one-menu {
	padding: 0px 0px 0px 0px;
	margin: 1px -5px 0px 0px;
}

/* Always-open headers become a line */
.menu-bar div.one-menu.always-open div.heading {
	height: 1px;
	border-style: none;
	border-top: 1px solid #999;
	margin-top: 10px;
}

/* Chop out corners on always-open headers */
.menu-bar div.one-menu.always-open div.heading div {
	display: none;
}

.one-menu div.heading {
	padding: 0px 0px 0px 0px; 
	position: relative;	/* Allow corners to position */
	text-align: right;
	vertical-align: middle;
	color: #99e;
	background-color: #135;	/*overridden by the themed background image overlay*/
}

.one-menu div.heading .topleft-corner {
	background-image: url(../Images/tab-corner-topleft.png);
	background-position: left top;
	background-repeat: no-repeat;
	width: 10px;
	height: 10px;
	left: 0px;
	top: 0px;
	overflow: hidden;
	position:absolute;
	z-index: 20;
}

.one-menu div.heading .bottomleft-corner {
	background-image: url(../Images/tab-corner-bottomleft.png);
	background-position: left bottom;
	background-repeat: no-repeat;
	width: 13px;	/*this is larger than the image is, for whatever reason ie7 shrinks it otherwise. this renders fine in ie7/8/ff/chrome*/
	height: 13px;
	left: 0px;
	bottom: 0px;
	overflow: hidden;
	position:absolute;
	z-index: 20;
}

.one-menu div.heading a.heading {
	cursor: pointer;
	margin: 0px 0px 0px 0px;
	padding: 5px 10px 5px 4px;
	color: #99e;
	background-image: url(../Images/menu-header-fade.png); /* needs to be in the a section for ie7 hovering */
	background-repeat: repeat-x;
}

.one-menu.selected div.heading a.heading {
	color: #fff;
}

.one-menu.selected div.heading.opened a.heading {
	color: #fff;
}

.one-menu div.heading.opened a.heading {
	background-color: #255; /*overridden by the themed background image overlay*/
	color: #ddd;
}

.one-menu div.heading.opened .bottomleft-corner {
	display: none;
}

.one-menu div.heading a.heading:hover {
	background-color: #255; /*overridden by the themed background image overlay*/
	color: #eee;
}

/* Get rid of the header link entirely for always-open top-levels */
.menu-bar div.one-menu.always-open div.heading a {
	display: none;
}

.menu-bar div.bottom {
	width: 100%;
	margin: 5px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
	border: none 1px #aaa;
	border-top-style: solid;
	text-align: center;
}

/* Fancy tree menus */
.one-menu ul {
	padding: 0px 0px 0px 0px;
	cursor: default;
	
	/* overridden by level0 */
	display: none;
	border-left: solid 1px #169;		/*leaving the border slightly lighter than the heading to keep the demarcation clear*/
	border-bottom: solid 1px #169;
	margin: 0px 0px 0px 0px;
}
.one-menu li {
	list-style-type: none;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	display: block;
	position: relative;
	color: #fff;
}
.one-menu a {
	display: block;
	padding: 4px 4px 4px 15px;
	margin: 0px 0px 0px 0px;
	overflow: hidden; /* needed for ie7 to properly render the menus, otherwise they become oversized*/
	text-decoration: none;
	color: inherit;
	cursor: default;
	outline-style: none;
	background: url(../Images/blank.gif); /* needed for ie7 hover to work on non text area of link */
}
.one-menu a.open {
	font-weight: bolder;
	background-color: #158;
}
.one-menu a:link { color: inherit; }
.one-menu a:visited { color: inherit; }
.one-menu a:active { color: inherit; }
.one-menu a:hover {
	color: #000;
	background-color: #eee;
}

/* Always-open sub-menus just become an in-tab header */
.one-menu li.always-open a.open {
	font-style: italic;
	color: #bbe;
	background-color: transparent;
	position: relative;
	left: -10px;
}

.one-menu li.selected a {
	background-color: #fff;
	color: #000;
}
.one-menu li.selected a:hover {
	background-color: #fff;
	color: #000;
}
.one-menu li div.arrow {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 15px;
	height: 24px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	overflow: hidden; 
	background-image: url(../Images/arrow-right.gif);
	background-position: left center;
	background-repeat: no-repeat;
	z-index: 100;
}
.one-menu li div.arrow.opening {
	background-image: url(../Images/animated-arrow-opening.gif);
}
.one-menu li div.arrow.closing {
	background-image: url(../Images/animated-arrow-closing.gif);
}
.one-menu li div.arrow.open {
	background-image: url(../Images/arrow-down.gif);
}
.one-menu li.always-open div.arrow {
	background-image: none;
}

/* the width changes at different levels are needed for ie7, padding changes indent stuff */
.one-menu ul.level0 {
	width: 195px; 
	display: block;		/* Opens the top level by default */
	border-style: none;
	margin: 0px 0px 0px 0px;
}
.one-menu ul.level0.closed {
	display: none;
}
.one-menu ul.always-open {
	display: block;
}

.one-menu ul.level1 { width:194px; }
.one-menu a.level1  { padding-left: 20px; }

.one-menu ul.level2 { width:193px; }
.one-menu a.level2 { padding-left: 25px; }

.one-menu li.always-open ul {
	display: block;
	border-style: none;
	margin-left: 1px;
}

.menu-bar div.sel-lower {
	background-image: url(../Images/sel-menu-corner-bot.png);
	background-position: left top;
	background-repeat: no-repeat;
	width: 11px;
	height: 11px;
	right: 0px;
	bottom: -11px;
	overflow: hidden;
	position:absolute;
	z-index: 20;
}

.menu-bar div.sel-upper {
	background-image: url(../Images/sel-menu-corner-top.png);
	background-position: left top;
	background-repeat: no-repeat;
	width: 11px;
	height: 11px;
	right: 0px;
	top: -11px;
	overflow: hidden;
	position: absolute;
	z-index: 20;
}
