#container-menu-main {
	width:  100%;
	height: 40px;
	
	background: transparent url('bg-container-menu-main.gif') repeat-x scroll top left;
	color:      #ffffff;
	
	position: absolute;
	left:     0px;
	top:      -40px;
	
	z-index: 5;
}

#container-menu-main-left {
	width:  10px;
	height: 100%;
	
	background: transparent url('bg-container-menu-main-left.gif') no-repeat scroll top left;
	
	position: absolute;
	left:     0px;
	top:      0px;
}

#container-menu-main-right {
	width:  10px;
	height: 100%;
	
	background: transparent url('bg-container-menu-main-right.gif') no-repeat scroll top left;
	
	position: absolute;
	right:    0px;
	top:      0px;
}

#container-menu-main-buttons {
	position: relative;
	z-index:  2;
}

.menu-main-button-container {
	height: 40px; /* Cannot simply be 100%, or Netscape refuses to display the edge graphics. */
	float:  left;
	
	position: relative;
}

.menu-main-button-link, .menu-main-button, .menu-main-button-hl {
	color:           #ffffff;
	text-decoration: none;
	
	cursor: pointer;
}

.menu-main-button, .menu-main-button-hl {
	height: 40px; /* Cannot simply be 100%, or Netscape refuses to display the edge graphics. */
	float:  left; /* IE 6 needs this, otherwise it stretches the button to 100% width. */
	position: relative;
}

.menu-main-button-left {
	width:  11px;
	float:  left;
	
	height: 40px; /* Height value required, or Firefox causes the area to expand to much and stretch the link area. */
}

.menu-main-button-left-home {
	width:  8px;
	float:  left;
	position: relative;
	
	height: 40px; /* Height value required, or Firefox causes the area to expand to much and stretch the link area. */	
}

.menu-main-button-right {
	width:  11px;
	float:  left;
	position: relative;
	
	height: 40px; /* Height value required, or Firefox causes the area to expand to much and stretch the link area. */	
}

.menu-main-button-hl                             { background: transparent url('bg-container-menu-main-button.gif') repeat-x scroll top left; }
.menu-main-button-hl .menu-main-button-left      { background: transparent url('bg-container-menu-main-button-left.gif') no-repeat scroll top left; }
.menu-main-button-hl .menu-main-button-left-home { background: transparent url('bg-container-menu-main-button-left-home.gif') no-repeat scroll top left; }
.menu-main-button-hl .menu-main-button-right     { background: transparent url('bg-container-menu-main-button-right.gif') no-repeat scroll top right; }

.menu-main-button-content {
	float:  left;
	height: 20px; /* Height value required, or Firefox causes the area to expand to much and stretch the link area. */	
	
	padding: 10px 6px 10px 6px;
	cursor: pointer; /* Required or Firefox will flicker to the text cursor. */
}

.menu-main-sub {
	width:  200px;
	
	position: relative;
	z-index:  8;
}

.menu-main-sub-effect-wrapper {
	overflow: hidden; 
	
	width:  170px;	
	-width: 172px; /* IE 6 */
	
	position: absolute; 
	top:      40px; 
	left:     4px;

	z-index:  8;
}

.menu-main-sub-block {
	background-color: #E60E0A;	
	width: 162px;
	
	-width: 170px; /* IE 6 */
	
	padding-left:  4px;
	padding-right: 4px;
	
	clear: both;
}

.menu-main-sub-top, .menu-main-sub-bottom {
	background-color: #E60E0A;

	width:  162px;
	height: 5px;
	
	float: left;
	
	font-size:   1px; /* IE 6 */
	line-height: 1px; /* IE 6 */
}

.menu-main-sub-topleft {
	background-color: #E60E0A;
	
	width:  4px;
	height: 5px;
	
	float: left;
	
	font-size:   1px; /* IE 6 */
	line-height: 1px; /* IE 6 */
}

.menu-main-sub-topright {
	background: transparent url('bg-container-menu-main-sub-corner-topright.gif') no-repeat scroll top right;
	
	width:  4px;
	height: 5px;
	
	float: left;
	
	font-size:   1px; /* IE 6 */
	line-height: 1px; /* IE 6 */
}

.menu-main-sub-bottomleft {
	background: transparent url('bg-container-menu-main-sub-corner-bottomleft.gif') no-repeat scroll bottom left;
	
	width:  4px;
	height: 5px;
	
	float: left;
	
	font-size:   1px; /* IE 6 */
	line-height: 1px; /* IE 6 */
}

.menu-main-sub-bottomright {
	background: transparent url('bg-container-menu-main-sub-corner-bottomright.gif') no-repeat scroll bottom right;
	
	width:  4px;
	height: 5px;
	
	float: left;
	
	font-size:   1px; /* IE 6 */
	line-height: 1px; /* IE 6 */
}

.menu-main-sub-item, .menu-main-sub-item-hl {
	padding:  4px 6px 4px 6px;	
	position: relative;
}

/* Hover element is for Opera, which messes with the parent button layout when a re-draw of the elements is caused. */
.menu-main-sub-item-hl, .menu-main-sub-block A:hover .menu-main-sub-item {
	background-color: #d00c09;
}

.menu-main-sub-item-corner-topleft {
	width:  3px;
	height: 3px;
	
	position: absolute;
	top:      0px;
	left:     0px;
	
	-left: -6px; /* IE 6 */
}

.menu-main-sub-item-corner-topright {
	width:  3px;
	height: 3px;
	
	position: absolute;
	top:      0px;
	right:    0px;
	
	-right:  4px; /* IE 6 */
}

.menu-main-sub-item-corner-bottomleft {
	width:  3px;
	height: 3px;
	
	position: absolute;
	bottom:   0px;
	left:     0px;	
	
	-left:   -6px; /* IE 6 */
	-bottom: 23px; /* IE 6 */
}

.menu-main-sub-item-corner-bottomright {
	width:  3px;
	height: 3px;
	
	position: absolute;
	bottom:   0px;
	right:    0px;
	
	-right:  4px; /* IE 6 */
	-bottom: 23px; /* IE 6 */
}

/* Hover element is for Opera, which messes with the parent button layout when a re-draw of the elements is caused. */
.menu-main-sub-item-hl .menu-main-sub-item-corner-topleft,     .menu-main-sub-block A:hover .menu-main-sub-item-corner-topleft     { background: transparent url('bg-container-menu-main-sub-item-corner-topleft.gif') no-repeat scroll top left; }
.menu-main-sub-item-hl .menu-main-sub-item-corner-topright,    .menu-main-sub-block A:hover .menu-main-sub-item-corner-topright    { background: transparent url('bg-container-menu-main-sub-item-corner-topright.gif') no-repeat scroll top right; }
.menu-main-sub-item-hl .menu-main-sub-item-corner-bottomleft,  .menu-main-sub-block A:hover .menu-main-sub-item-corner-bottomleft  { background: transparent url('bg-container-menu-main-sub-item-corner-bottomleft.gif') no-repeat scroll bottom left; }
.menu-main-sub-item-hl .menu-main-sub-item-corner-bottomright, .menu-main-sub-block A:hover .menu-main-sub-item-corner-bottomright { background: transparent url('bg-container-menu-main-sub-item-corner-bottomright.gif') no-repeat scroll bottom right; }

.menu-main-button-hl, .menu-main-sub-block A:hover, .menu-main-sub-block A:hover {
	color: #ffffff;	
}