/*********************************/
/*                               */
/* HEADER MENU DROPDOWNS         */
/*                               */
/*********************************/

/* Header menu container */

#header-menu-container {
	margin-left: 9px;
	margin-top: 5px;
}

#header-menu {
	height: 36px;
	z-index: 100;
	float: left;
	position: relative;
	width: 980px;
	background: url(images/menu-bg.png) no-repeat;
}

/* Header items */

#header-menu li {
	height: 36px;
	float: left;
	position: relative;
	list-style: none;
	outline: 0;
}

#header-menu li:hover {
	visibility: inherit; /* fixes IE7 'sticky bug' */
}

#header-menu a {
	height: 36px;
	background: url(images/menu-bg.png) no-repeat;
	line-height: 36px;
	text-indent: -9999px;
	display: block;
	position: relative;
	outline: 0;
}

/* Header item specific links */
/* Each link uses the same image, but the width and background position are adjusted to fit. As such, some form of ID will need to be generated with the menu and changed here as well. */

/* "Home" */

#menu-home a {
	width: 73px;
}

#menu-home a:hover, #menu-home.current a, #menu-home.sfHover a {
	background-position: 0 bottom;
}

/* "Why join Sunsuper" */

#menu-about-ocean a {
	width: 185px;
	background-position: -73px 0;
}

#menu-about-ocean a:hover, #menu-about-ocean.current a, #menu-about-ocean.sfHover a {
	background-position: -73px bottom;
}

/* "Grow your super" */

#menu-loans a {
	width: 105px;
	background-position: -275px 0;
}

#menu-loans a:hover, #menu-loans.current a, #menu-loans.sfHover a {
	background-position: -275px bottom;
}

/* "Access your super" */

#menu-mortgages a {
	width: 177px;
	background-position: -600px 0;
}

#menu-mortgages a:hover, #menu-mortgages.current a, #menu-mortgages.sfHover a {
	background-position: -400px bottom;
}

/* "Forms and tools" */

#menu-existing-customers1 a {
	width: 140px;
	background-position: -577px 0;
}

#menu-existing-customers1 a:hover, #menu-existing-customers.current a, #menu-existing-customers.sfHover a {
	background-position: -577px bottom;
}

/* "Employers" */

#menu-key-documents1 a {
	width: 114px;
	background-position: -717px 0;
}

#menu-key-documents1 a:hover, #menu-key-documents.current a, #menu-key-documents.sfHover a {
	background-position: -717px bottom;
}

/* Dropdown boxes */

#header-menu ul {
	position: absolute;
	top: -999em;
	z-index: 99;
	margin-top: 6px;
	width: 668px;
	background: url(images/shadow-header-menu.png) no-repeat 0 bottom;
	border-top: 0px;
	/*margin-left: -6px;*/
	padding: 10px 25px;
	padding-bottom: 15px;
	padding-right: 0px;
}

#header-menu li:hover ul,
#header-menu li.sfHover ul {
	top: 2.5em; /* match top ul list item height */
}

#header-menu ul a {
	text-indent: 0px;
	font-size: 11px;
	margin: 0px;
	height: auto;
	line-height: 18px;
	background: none;
	color:#FFF;
	margin-bottom: 5px;
}

/* Hide currently active menu to prevent duplication */

/*
#header-menu .current ul {
	display: none !important;
}
*/
/* Four column dropdown layout */

#header-menu ul li {
	float: left;
	width: 21%;
	margin-right: 10px;
	padding-right: 10px;
	font-weight: bold;
	height: auto;
	font-size: 11px;
}

/* Individual column */

#header-menu ul li div {
	font-weight: normal;
}

#header-menu ul li a {
	color: #333;
	width: auto;
}

/* Make column links into arrow links */

#header-menu li.sfHover div a {
	color: #006bb3;
	background: url(images/arrow-light-blue.png) no-repeat 0px 0.5em !important;
	padding-left: 10px !important;
}

#header-menu li.sfHover div a:hover {
	background: url(images/arrow-dark-blue.png) no-repeat 0px 0.5em !important;
}

/* Shift some of the right most menus left so they're not off the screen. Fix some of the individual margins on for the left most menus. */

#menu-why-join-sunsuper ul {
	margin-left: 1px;
}

#menu-grow-your-super ul {
	margin-left: 0px;
}

#menu-access-your-super ul {
	margin-left: -240px;
}

#menu-forms-and-tools ul {
	margin-left: -535px;
}

#menu-employers ul {
	margin-left: -556px;
}

/* Make "Employers" and "Why join Sunsuper" three column layout instead */

#menu-employers ul li, #menu-why-join-sunsuper ul li {
	width: 29%;
}

/*********************************/
/*                               */
/* "LOG INTO..." MENU            */
/*                               */
/*********************************/

#log-into {
	float: right;
	clear: both;
	margin-top: -16px;
	position: relative;
	z-index: 1000;
	left: -156px;
}

#log-into li {
	list-style: none;
}

/* "Log into..." button */

#log-into a.parent-link {
	display: block;
	width: 129px;
	height: 23px !important;
	background: url(images/log-into.png) no-repeat;
	text-indent: -9999px;
	position: absolute;
	z-index: 2;
	cursor: pointer;
	cursor: hand;
}

#log-into a.parent-link:hover, #log-into .sfHover a.parent-link {
	background-position: bottom;
}

/* Drop down with space for form */

#log-into ul {
	margin-left: -103px;
	margin-top: -14px;
	height: 374px;
	position: absolute;
	background: url(images/shadow-log-into.png) no-repeat 0 bottom;
	width: 250px;
	display: none;
}

#log-into .form-spacer {
	padding: 20px;
	margin: 10px;
	margin-left: 7px;
	margin-top: 37px;
	height: 235px;
}

#log-into .form-spacer-bottom {
	margin: 25px;
}

#log-into h3 {
	margin-bottom: 15px;
}

#log-into .form-item, #log-into .form-submit {
	margin-bottom: 5px;
	border-top: 1px solid white; /* Fix IE display */
}
