/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/pro_drop4.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.prodrop4 
{
	padding:0 0 0 0px;
	margin:0;
	list-style:none;
	height:25px;
	font-weight: bold;
	font-family: verdana, sans-serif;
	font-size: 14px;
	position:relative;
	z-index:500;
	font-size:14px;
	font-family: Verdana, Arial, sans-serif;
	background-color: #FF9966;
}

.prodrop4 li.top 
{
	display:block;
	float:left;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #663300;
}

.prodrop4 li a.top_link 
{
	display:block; 
	float:left; 
	height:25px; 
	line-height:24px; 
	text-decoration:none; 
	color: #FFF;
	/*padding:0 0 0 20px;*/ /*====Used for spacing buttons if desired ('professional' tab style used this)*/
	cursor:pointer;
	/*background: #8899BA; ===Background was specified here when buttons spaced apart but don't think necessary now*/
}

.prodrop4 li a.top_link span 
{
	float:left;
	display:block;
	padding:0 10px 0 10px; /*Padding of top buttons done here*/
	height:25px;
	background-color: #FFCC66;
}

.prodrop4 li a.top_link span.currentPage 
{
	color: #663333;
	background-color: #FF9966;
}

.prodrop4 li a.top_link:hover /* affects IE */
{
	/*color:#FFF; */
	/*background: pink;
	/*line-height:24px; changing line height to smaller number makes text shift up on RO- useful for 
						if wanting to create a 'tab' effect*/
}

.prodrop4 li:hover > a.top_link /* affects Firefox */
{
	/*color:#FFF; */
	/*background: brown;*/
	/*line-height:25px;&*/
}

.prodrop4 li:hover > a.top_link span 
{
	background-color: #FF9966;
}

.prodrop4 li:hover > a.top_link span.currentPage  
{
	background: #DBE2F1;
	color: #576A8F;
}

.prodrop4 li a.top_link:hover span 
{
	background-color: #FF9966;
}

.prodrop4 li a.top_link:hover span.currentPage 
{
	color: #333333;
	background-color: #FF9966;
}

.prodrop4 table 
{
	border-collapse: collapse; 
	width: 0; 
	height:0; 
	position:absolute; 
	top:0; 
	left:0;
}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.prodrop4 a:hover 
{
	visibility:visible; 
	position:relative; 
	z-index:200;
}

.prodrop4 li:hover 
{
	position:relative; 
	z-index:200;
}

/* keep the 'next' level invisible by placing it off screen. */
.prodrop4 ul 
{
	position:absolute; 
	left:-9999px; 
	top:-9999px; 
	width:0; 
	height:0; 
	margin:0; 
	padding:0; 
	list-style:none;
	font-weight: bold;
	font-family: verdana, sans-serif;
	font-size: 14px;
}

/* ===========Set desired widths for the drop down boxes - called in the 'ul' tag of drop down ul.
 NOTE: WIDTH NEEDS TO BE SUFFICIENTLY WIDER THAN THE TEXT GOING INSIDE IT, OTHERWISE BORDER LINES WILL STUFF UP IN IE
(Also, Ffox needs these, but for diff reason: drop down widths will be screwed up otherwise)*/
.prodrop4 ul.sub1 {width:125px;}
.prodrop4 ul.sub2 {width:132px;} 

.prodrop4 :hover ul 
{
	left:0;
	top: 25px;
	padding:0px;
	border:1px solid #021A2E;
	border-width:0px 1px 1px 1px;
	white-space:nowrap;
	height:auto;
	z-index:300;
	background-color: #FF9966;
}

.prodrop4 :hover ul li 
{
	display:block; 
	height:20px; 
	position:relative; 
	/*font-weight:normal; */
	width:auto;
	border-top:1px solid #021A2E; /*=====unfortunately in IE the width would go across all of 
					containing div so having a line seperating ea. item doens't work properly :( */
}

.prodrop4 :hover ul li a 
{
	display:block; 
	height:20px; 
	line-height:20px; 
	width:auto; 
	padding:0 10px; 
	color:#FFF; 
	text-decoration:none;
}

.prodrop4 :hover ul li a:hover 
{
	background:#576A8F; 
	color:#FFF;
}