@charset "UTF-8";
/* CSS Document */

.submenu {
	width: 180px;
	margin:	20px 0 15px 10px;
	padding: 0;
}

.submenu div:first-child {
	width: 100%;
	height: 8px;
	background: url('../img/sub_menu_top.png') no-repeat;
}
.submenu div:last-child {
	width: 100%;
	height: 8px;
	background: url('../img/sub_menu_bottom.png') no-repeat;
}

.submenu div:first-child span {
	position: relative;
	top: -12px;
	left: 15px;
	font-size: 18px;
	font-weight: bold;
	margin: 0;
	padding: 0;
	color: #3b7297;
}

/* first level */
.submenu > ul {	
	margin: 0;
	padding: 5px 0px 5px 0px;
	background: url('../img/sub_menu_back.png') repeat-y;
	list-style-type: none;
}

.submenu > ul > li 
{	margin: 0 1px 0 1px;
	padding: 3px 0 3px 0;
	border-bottom: 1px solid #eee; 
}

.submenu > ul > li:hover {
	background: url('../img/menu_arrow.png') no-repeat;
}

.submenu > ul > li:last-child {
	border-bottom: 0px; 
}

.submenu > ul > li > a, .submenu > ul > li > span {
	text-decoration: none;
	display: block;
	margin: -2px 0 0 15px;
}

.submenu > ul > li > a.hold, .submenu > ul > li > a:hover {
	color: #ff7c00;
}

/* second level */
.submenu > ul > li >.sub_submenu {
	display: none;
	position: absolute;
	left: -202px;	/* while hidden, always keep them at the top left corner, */
	top: 0;			/* 		to avoid scrollbars as much as possible */
}

.submenu > ul > li:hover > .sub_submenu {
	display: block;
	position: relative;
	width: 211px;
	top: -18px;
	left: 55px;
	background: none;
	float: left;	/* Prevent space from appearing whilst hovering item */
	z-index: 777;
}

.sub_submenu > div:first-child {
	width: 100%;
	height: 8px;
	background: url('../img/sub_sub_menu_top.png') no-repeat;
}

div.sub_submenu > div:last-child {
	width: 100%;
	height: 8px;
	background: url('../img/sub_sub_menu_bottom.png') no-repeat;
}

.sub_submenu ul {
	background: url('../img/sub_sub_menu_back.png') repeat-y;
	margin: 0;
	padding: 5px 15px 5px 15px;
	list-style-type: none;
}

.sub_submenu ul > li {
	padding: 3px 0 3px 0;
	border-bottom: 1px solid #eee; 
}

.sub_submenu ul > li:last-child {
	border: 0px;
}

.sub_submenu > ul > li > a {
	text-decoration: none;
}

.sub_submenu > ul > li > a.hold, .sub_submenu > ul > li > a:hover {
	color: #ff7c00;
	background: url('../img/menu_arrow.png') no-repeat;
	position: relative;
	left: -15px;
	padding: 0 0 0 15px;
}