/*
	Styles in this file should be used with App_Code/UI/Navigation/DropDownMenu.cs control.
*/

.dropdownmenu {
	
	font-size: 12px;
	line-height: 1;
	margin-left : 40px;
	clear:both;
	padding-top : 1px;
}

.picture 
{
	float : left;
	width : 150px;
}


/* First level 
----------------------------------------------------------------------*/
.dropdownmenu  ul {
	list-style: none;
	padding: 0;
	margin: 0;
	line-height: 1;
	
}

.dropdownmenu ul li {
	display: inline;
	float: left;
	list-style: none;
	padding: 0;
	margin: 0;
	line-height: 25px;
	border:solid 1px #900500;
	border-bottom: solid 0px #FFF;
	width : 150px;
	background:transparent url(../images/menu-title-bg.gif) repeat-x scroll 0 0;
	border-left : solid 0px #FFF;
	border-right : solid 0px #FFF;
	
}

.dropdownmenu ul li:hover
{
	background:transparent url(../images/menu-hover-bg.gif) repeat-x scroll 0 0;
}

.dropdownmenu ul span {
	float: left;
	width : 100%;
	background:transparent url(../images/devider-bg.gif) no-repeat scroll right 0;
	background-image : url(../images/devider-bg.gif);
	background-color : Transparent;
	background-repeat : no-repeat;
	background-position : right top;
}

.dropdownmenu ul span.last
{
	background-image : none;
}

.dropdownmenu ul li span.active {
	font-weight: bold;
	background:transparent url(../images/menu-hover-bg.gif) repeat-x scroll 0 0;
}

.dropdownmenu ul a {
	float: left;
	padding: 0px 0px;
	text-decoration: none;
	color: #FFF;
	font-weight : bold;
	text-transform : uppercase;
	text-align : center;
	width : 148px;

}

.dropdownmenu .devider
{
	float:left;
	width:1px;
	background:url(../images/devider-bg.gif) no-repeat;
	height:177px;
}

/* Reset almost everything provided by first level 
----------------------------------------------------------------------*/
.dropdownmenu ul ul, 
.dropdownmenu ul ul li, 
.dropdownmenu ul ul span,
.dropdownmenu ul ul a
{
	border : solid 0px #FFF;	
	margin: 0px;
	padding: 0px;
	display: block;
	line-height: 1 !important; 
	list-style: none;
	float: none;
	font-size: 12px;
	background-image : none;
}

.dropdownmenu ul ul {
	position: absolute;
	display: none;
	background-color: #FFF;
	border: solid 0px #FFF;	
	min-width: 150px;
}

.dropdownmenu ul ul li:hover, .dropdownmenu ul ul li a:hover
{
	color : #f91810;
	background-image : none;
}

.dropdownmenu ul ul li .active a
{
	color : #f91810 !important;
}

.dropdownmenu ul ul li span.active{
	background-image : none;
}

.dropdownmenu ul ul li span
{
	border-bottom: solid 0px #FFF;
}

.dropdownmenu ul ul li span.last 
{
	border: 0;
}

.dropdownmenu ul ul a {
	padding: 5px;
	color : #900500;
}

/* Hacks section
-------------------------------------------------------------------------*/
/* This one is needed because IE6 does not understands min-width property but it treats width as min-width*/
* html .dropdownmenu ul ul {
	width: 150px !important;
}

/* If you remove this rule weird things start happening in IE6 like sudden extension of the element's height 
   If you need to remove bottom border, just make it color of background */
* html .dropdownmenu ul ul li {
	border-bottom: 1px solid #FFF;
}

* html .dropdownmenu ul ul span.last
{
	border-bottom: 1px solid #FFF;
}