/*
Stylesheet for Panama Hat Company of the Pacific, designed for Screen Media

Author: Christopher Werby of Pipsqueak Productions, LLC
http://www.pipsqueak.com/

Last Updated: 2008-10-28


*/

div#logo
{
	position: absolute;
	top: 0;
	margin-left: 250px;
}

div#navigation2
{
	position: absolute;
	top: 85px;
}

body.black div#topMenu ul { }
div#pageHeadline { margin-top: 150px; }

/*home page link*/
div#navigation2 p a
{
	font-size: .8em;
	position: relative;
	left: -80px;
	top: 38px;
}

div#navigation2 div.shoppingCartButton { visibility: hidden; }

div#navigation2 div.shoppingCartButton
{
	float: right;
	margin-right: -.4in;
	margin-top: 30px;
	width: 40px;
	height: 58px;
}

/* @group SHOPPING CART BUTTON GENERALLY */
div.shoppingCartButton
{
	width: 40px;
	height: 58px;
	background-image: url(../images/_elements/Icon_Shopping_Cart.gif);
	visibility: hidden;
}

body.black div.shoppingCartButton { background-image: url(../images/_elements/Icon_Shopping_Cart_Black.gif); }

div.shoppingCartButton a
{
	display: block;
	width: 40px;
	height: 58px;
}

/* @end SHOPPING CART BUTTON GENERALLY */
div#navigation2 { margin-top: -40px; }
div#logo { padding-bottom: 0in; }

/*home page link*/
body.black div#navigation2 p a { color: #FBF3C7; }
body#home div#navigation2 p a { visibility: hidden; }
body#home div#topMenu ul li.home { display: none; }

/*body#home div#topMenu {margin-left:0px;}*/

/* ================================================================ 
	This copyright notice must be untouched at all times.
	
	The original version of this stylesheet and the associated (x)html
	is available at http://www.cssplay.co.uk/menus/final_drop2.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.
	=================================================================== */

div#topMenu { margin-left: -30px; }

/* style the outer div to give it width */
#topMenu
{
	position: absolute;
	top: 70px;
	width: 810px;
	font-size: 0.85em;
	padding-bottom: 50px;
}

/* remove all the bullets, borders and padding from the default list styling */
#topMenu ul
{
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#topMenu ul ul { width: 150px; }

#topMenu ul li.aboutUs ul ul { margin-left: 21px; }
body#home #topMenu ul li.aboutUs ul ul { margin-left: 24px; }


/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#topMenu li
{
	float: left;
	width: 150px;
	/*was 150*/
	position: relative;
}

#topMenu li#navHome { width: 70px; }

/*new style for BBB*/
/* style the links for the top level */
#topMenu a, #topMenu a:visited
{
	display: block;
	font-size: 13px;
	text-decoration: none;
	color: #fff;
	width: 149px;
	/*was 139*/
	height: 30px;
	border: 1px solid #fff;
	border-width: 1px 1px 0 0;
	padding-left: 0px;
	/*was 10*/
	line-height: 29px;
	text-align: center;
	/*added for BBB*/
	/*text-indent:-10px;*/
	/*added for BBB*/
	background-color: #630;
	/*was 758279*/
}

body.black #topMenu a, body.black #topMenu a:visited
{
	border-top: 1pt black solid;
	border: 1px solid #630;
}

#topMenu li#navHome a, #topMenu li#navHome a:visited { width: 59px; }

/*new style for BBB*/
/* a hack so that IE5.5 faulty box model is corrected */
* html #topMenu a, * html #topMenu a:visited
{
	width: 150px;
	w\idth: 149px;
}

#topMenu li.home { width: 60px; }
#topMenu li.home a { width: 59px; }

/* style the second level background */
#topMenu ul ul a.drop, #topMenu ul ul a.drop:visited { background: #949e7c; }

/* style the second level hover */
#topMenu ul ul a.drop:hover { background: #c9ba65; }
#topMenu ul ul :hover > a.drop { background: #c9ba65; }

/* style the third level background */
#topMenu ul ul ul a, #topMenu ul ul ul a:visited { background: #e2dfa8; }

/* style the third level hover */
#topMenu ul ul ul a:hover { background: #b2ab9b; }
#topMenu ul ul ul :hover > a { background: #b2ab9b; }

/* hide the sub levels and give them a positon absolute so that they take up no room */
#topMenu ul ul
{
	visibility: hidden;
	position: absolute;
	height: 0;
	top: 31px;
	left: 0;
	width: 150px;
}

/* another hack for IE5.5 */
* html #topMenu ul ul
{
	top: 30px;
	t\op: 31px;
}

/* position the third level flyout menu */
#topMenu ul ul ul
{
	left: 150px;
	top: 0;
	width: 150px;
}

/* position the third level flyout menu for a left flyout */
#topMenu ul ul ul.left { left: -150px; }

/* style the table so that it takes no part in the layout - required for IE to work */
#topMenu table
{
	position: absolute;
	top: 0;
	left: 0;
}

/* style the second level links */
#topMenu ul ul a, #topMenu ul ul a:visited
{
	background: #d4d8bd;
	color: #000;
	height: auto;
	line-height: 1em;
	padding: 5px 10px;
	/* yet another hack for IE5.5 */
	width: 129px;
}

* html #topMenu ul ul a
{
	width: 150px;
	w\idth: 129px;
}

/* style the top level hover */
#topMenu a:hover, #topMenu ul ul a:hover
{
	color: #fff;
	background: #949e7c;
}

#topMenu :hover > a, #topMenu ul ul :hover > a
{
	color: #fff;
	background: #949e7c;
}

#topMenu :hover > a { color: #ffc62c; }

/* make the second level visible when hover on first level list OR link */
#topMenu ul li:hover ul,
	#topMenu ul a:hover ul { visibility: visible; }

/* keep the third level hidden when you hover on first level list OR link */
#topMenu ul :hover ul ul { visibility: hidden; }

/* keep the fourth level hidden when you hover on second level list OR link */
#topMenu ul :hover ul :hover ul ul { visibility: hidden; }

/* make the third level visible when you hover over second level list OR link */
#topMenu ul :hover ul :hover ul { visibility: visible; }

/* make the fourth level visible when you hover over third level list OR link */
#topMenu ul :hover ul :hover ul :hover ul { visibility: visible; }