/*--------->Top level: the tiles<--------------*/
/*This is the first list, and its elements appear as the menu 'tiles'. Hovering over them will trigger the drop-down. The #tiles nor its children should show any list style*/
#tiles, #tiles ul {
	list-style: none;
	padding: 0;
	margin: 0;
	}

/*The left float makes the tiles appear next to each other. 
The left padding refers to the background image, which is exactly 9 pixels wide. It should not be covered nor can its edge be visible.The left margin refers to the border of the background image, which is a black line. 
The background image also receives a color. The width can be chosen, I personally prefer it in ems. The 'simplified box model hack' (cf. http://www.doxdesk.com/personal/posts/css/20020212-bmh.html): IE only reads the line without the backslash, standard browsers also read the line with the backslash. I will use this hack *a lot* so in order to resolve the measuring differences in IE5.*/
#tiles li {
	float: left;
	padding-left: 3px;
	background: url("/portals/6/skins/common/images/menu-seperator.gif") no-repeat left top;
	}

#tiles li.first { padding-left: 0; background-image: url('/images/blank10.gif'); }

/*This is in fact the right side of the tile, with the bigger background-image.
The text-color is white, the anchors should not be underlined.
The background-color is also specified in case the background image is not rendered.*/

#tiles a 
{
	text-align: center;
	display: block;
	color: #6d6e71;
	text-decoration: none;
	font-size: 12px;
	line-height: 37px;
	height: 37px;
}

/*Changing backgrounds in case of rollover. The backgrounds move down 148px*/
#menu li:hover { background-position: 0; }
#menu li:hover a, #menu li.sel a { background-position: 0; color: #5fa5c7; }
/*#menu li:hover a, #menu li.sel a { background-position: 0; color: #f47920; }
#menu li#business-support:hover a, #menu li#business-support.sel a { color: #739f50; }
#menu li#business-environment:hover a, #menu li#business-environment.sel a { color: #5fa5c7; }*/

		
/*------------->Second level: the drop-down list<--------------*/
/*First, we hide all the lists of the second level: we give them an absolute position at -999em, far away from the screen*/
#tiles li ul {
	position: absolute;
	left: -999em;
	background: transparent;
	background-image: url('/portals/6/skins/common/images/menu-sub-bottom.gif');
	background-repeat: no-repeat;
	background-position: bottom;
	padding-bottom: 5px;
	}


/*Menu level 2*/
#tiles li ul li {
	background: transparent;
	background-image: url('/portals/6/skins/common/images/menu-item-back.gif');
	background-position: left bottom;
	background-repeat: no-repeat;
	float: none;
	padding-left: 0;
	}

#tiles li ul li:hover { background-position: left bottom; }
#tiles li ul li.sublast { background-position: left top; }

#tiles li ul li a {
	text-align: left;
	padding: 4px 8px;
	line-height: 14px;
	height: auto;
}

#tiles li ul li.subfirst a { background-image: url('/portals/6/skins/common/images/menu-sub-top.gif'); background-position: top; background-repeat: no-repeat; padding-top: 10px; }

	
/*Dropdown in case of hover*/
#tiles li:hover ul ul, #tiles li:hover ul ul ul {
	left: -999em;
}
#tiles li:hover ul, #tiles li li:hover ul, #tiles li li li:hover ul {
	left: auto;
}
#tiles li:hover ul a, #tiles li li:hover ul a, #tiles li li li:hover ul a  { color: #6d6e71 !important; }
#menu #tiles li ul li:hover {
}
#menu #tiles li ul li:hover a {
	color: #2e2d30 !important;
}
#menu #tiles li ul li:hover ul li {
	background: #F1F1F1;	
}
#menu #tiles li ul li:hover ul li a {
	color: #000 !important;
}
#menu #tiles li ul li ul li:hover {
	background: #06c;
}
#menu #tiles li ul li ul li:hover a {
	color: #fff;
}

/*http://www.ibloomstudios.com/article1/*/
#tiles li ul{margin-left: -2px;}