﻿/*
©2010 Jay Hollywood
www.jayhollywood.com.au

Description : Navigation Stylesheet

*/

#nav {
	width:960px;
	position: absolute;
	bottom: 0;
	height: 51px;
	background: url(../art/nav.gif) no-repeat 0 0;
}

#nav ul {
	float: left;
	padding: 9px 10px 0;
	margin: 0;
	list-style: none;
}

#nav li {
	float: left;
	width: auto;
	padding: 0 5px 10px 0;
	margin: 0 3px 0 0;
	display: inline;
	height: 32px;
	}
	
#nav li.active, #nav li:hover {
	background: url(../art/nav-item-bg.gif) top right no-repeat;
}

#nav li.active a, #nav li:hover a{
	background: url(../art/nav-item-bg.gif) top left no-repeat;
}

#nav li:hover a {
	color: #777;
}

#nav a {
	display: block;
	width: auto;
	font-size: 1.1em;
	padding: 10px 11px 0 16px;
	color: #555;
	text-shadow: 0px 1px 0px #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: -1px;
}

#nav li ul {
	position: absolute;
	left: -999em;
	width: 479px;
	background: url(../art/navul.png) bottom left;
}

#nav li:hover ul, #nav li.sfHover ul {
	left: auto;
	margin: 16px 0 0 -1px;
	width: 439px;
	padding: 0 20px 20px 20px;
}

#nav li#glassware:hover ul, #nav li#glassware.sfHover ul {
	margin: 16px 0 0 -361px;
}

#nav li li {
	background: 0;
	display: block;
	height: auto;
	width: 140px;
	float: left;
	padding: 0;
	margin: 0;
}

#nav li li.item-heading {
	width: 100%;
	display: block;
	background: url(../art/divider.gif) repeat-x left bottom;
	color: #0195d3;
	padding: 4px 0 6px;
	font-size: 1.2em;
	margin: 0 0 15px 0;
}

#nav li#glassware li#item-heading {
	text-align: right;
	padding: 4px 5px 6px 0;
}

#nav li:hover li {
	background: none;
}

#nav li:hover li a,#nav li li a {
	text-indent: 0;
	height: auto;
	float: left;
	font-size: 1em;
	color: #686868;
	text-decoration: none;
	background: url(../art/list-style.gif) no-repeat;
	padding: 0 0 8px 15px;
	text-transform: none;
	letter-spacing: 0;
}

#nav li li a:hover {
	color: #0195d3; 
	text-decoration: underline;
}

#nav li li a img {
	padding: 0 5px 0 0;
}

#nav li:hover ul ul, #nav li.sfHover ul ul {
	left: 226px;
	margin: -55px 0 0 0;
	background: url(../art/drop-down-bg-sub.png) bottom left;
	padding: 0 5px 15px;
	width: 217px;
}

#nav li li li a {
	text-transform:none;
	color: #fff;
	height: auto;
	padding: 10px 30px;
	width: 157px;
	background: url(../art/drop-arrow.gif) no-repeat 0 2px #424242;
}

#nav li li li a:hover {
	background: url(../art/drop-arrow.gif) no-repeat -217px 2px #262626;
}
	
#nav ul.sf-shadow-off, #nav ul ul ul.sf-shadow-off {
	background: transparent;
}

#side-nav {
	position: relative;
	float: left;
	width: 224px;
	background: #f3f3f3;
	border: solid 2px #f3f3f3;
	-moz-border-radius-topright: 4px;
	-webkit-border-radius: 4px;
	border-bottom: 0;
	font-size: 110%;
	border-left: 0;
	border-right: 0;
	margin: 0 15px 0 0;
}

#side-nav h2 {
	font-size: 1.3em;
	color: #616161;
	padding: 10px;
	display: block;
}

#side-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#side-nav ul li {
	width: 224px;
	padding: 0;
	margin: 0;
}

#side-nav ul li a {
	width: 204px;
	background: url(../art/side-nav.gif) no-repeat #5f5f5f;
	display: block;
	padding: 5px 5px 5px 15px;
	color: #fff;
	text-decoration: none;
	border-top: #c2c2c2 solid 1px;
	border-bottom: #494949 solid 1px;
}

#side-nav ul li a:hover {
	background: url(../art/side-nav.gif) no-repeat #ccc -224px 0;
	color: #444;
	border-top: #eee solid 1px;
	border-bottom: #aaa solid 1px;
}
	
#side-nav ul li a.active {
	background: url(../art/side-nav.gif) no-repeat #ccc -448px 0;
	color: #fff;
	border-top: #8dd7f6 solid 1px;
	border-bottom: #007fb2 solid 1px;
}


