/* Navigation  
-------------------------------------------------------------- */ 
ul#navigation {
	height: 42px;
	width: 944px;
	margin-left: 20px;
	background: url(../images/nav_bg.jpg) repeat-x;
}
ul#navigation li:hover {
	visibility:	inherit; /* fixes IE7 'sticky bug' */
}
ul#navigation li {
	float: left;
	position: relative;
}
ul#navigation li a {
	display: block;
	position: relative;
	font-weight: bold;
	font-size: 1.1em;
	padding: 8px 43px 0 10px;
	height: 25px;
	color: #777777;
}

ul#navigation li a.header {
	border-top: 5px solid #ffffff;
}
ul#navigation li a.header:hover {
	color: #333333;
}
ul#navigation li#first-nav-item a {
	padding-left: 35px;
}
ul#navigation li#last-nav-item a {
	padding-right: 53px;
}
ul#navigation a:focus, ul#navigation a:hover, ul#navigation a:active {
	outline: 0;
}
ul#navigation li:hover, ul#navigation li.sfHover,
ul#navigation li a.active {
	color: #333333;
}

/* Navigation dropdown
-------------------------------------------------------------- */
ul#navigation li:hover ul, 
ul#navigation li.sfHover ul {
	left: 0;
	top: 37px;				/* position dropdown */
	z-index: 2;
}
ul#navigation li ul {
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 1;	
	background: #a3a0a2;	
	display: none;			/* hides dropdown while page is loading */
}
ul#navigation li ul li a {	
	margin: 0;
	padding: 7px 10px 10px 10px;
	height: 10px;
	color: #ffffff;
}
ul#navigation li ul li a.two-line {	
	height: 25px;
}
ul#navigation li a:hover.header {	
	color: #000000;
}
ul#navigation li ul {
	width: 172px;
}
ul#navigation li ul li a {
	width: 152px;
}

/* widths */
ul#navigation li#products ul {
	width: 105px;
}
ul#navigation li#products ul li a {		/* 20px difference for some reason */
	width: 85px;	
}
ul#navigation li#design-solutions ul {
	width: 152px;
}
ul#navigation li#design-solutions ul li a {
	width: 132px;
}
ul#navigation li#specifiers ul {
	width: 132px;
}
ul#navigation li#specifiers ul li a {
	width: 112px;
}



ul#navigation li ul li a:hover {	
	background: #535353;
}
ul#navigation li ul li.top {
	margin-top: 10px;
}
ul#navigation li ul li.bottom {
	margin-bottom: 10px;
}



/* sub nav  
-------------------------------------------------------------- */
#sub-nav.no-header {
	background: url(../images/info_box_bg.gif) no-repeat;
	height: 225px;
	width: 214px;
}
#sub-nav.no-header ul {		/* for single links */
	background: none;
}
#sub-nav.no-header ul li#first-sub-nav-item {
	padding-top: 8px;
}
.technical #sub-nav.no-header {
	height: auto;
}


#sub-nav {
	margin: 0 0 14px 32px;	
}
#sub-nav ul {
	/* top background has an extended height so when you drop down the nav, there are no blank spaces */
	background: url(../images/subnav_top_bg.gif) no-repeat top left;
}
#sub-nav ul li {
	padding-left: 8px;
	font-size: 1.2em;
	background: url(../images/subnav_li_bg.gif) repeat-y;
}
#sub-nav ul li ul li {
	font-size: 1em;
}

/* sections */
#sub-nav ul li h4,
#sub-nav ul li h3 {
	color: #666666;
	font-size: 1em;
	font-weight: bold;
	background: #b0b0b0;
	padding: 4px 0 4px 4px;
	width: 194px;
	display: block;
	cursor: pointer;
}
.in-use #sub-nav ul li h4.section {
	background: #bfbfbf;
}
.in-use #sub-nav ul li h4.section.hover {
	background: #808080;
}
#sub-nav ul li h3 {
	font-weight: bold;
	background: none;
	cursor: default;
}
#sub-nav ul li h4.selected {
	color: #ffffff;
}
#sub-nav ul li h4.section {
	color: #ffffff;
	padding: 0;
}

.design-solutions #sub-nav ul li h4.section,
.in-use #sub-nav ul li h4.section {
	padding: 4px 0 4px 4px;		/* no link in h4 */
}

#sub-nav ul li h4.hover {
	background: #666666;
}
/* sub headers */
#sub-nav ul li ul li h4 {
	background: #efefef;
}
#sub-nav ul li ul li h4.hover {
	background: none;
}
#sub-nav ul li ul li h4:hover,
#sub-nav ul li ul li h4.selected,
#sub-nav ul li ul li h4.clicked {
	color: #000000;
}

/* links */
#sub-nav ul li a {
	padding: 4px 0 4px 4px;
	width: 194px;
	display: block;
	color: #ffffff;
	background: #bfbfbf;
}
#sub-nav ul li a:hover,
#sub-nav ul li a.selected,
.gallery #sub-nav ul li h4.selected {
	background: #808080;
}
.product #sub-nav ul li a,
.design-solutions #sub-nav ul li a {
	color: #666666;
	background: #efefef;
}
.product #sub-nav ul li a:hover,
.product #sub-nav ul li a.selected,
.design-solutions #sub-nav ul li a:hover,
.design-solutions #sub-nav ul li a.selected {
	color: #ffffff;
	background: #666666;
}
#sub-nav ul li#first-sub-nav-item {
	padding-top: 5px;
	background: none;		/* so the ul background (top bg image) shows through */
}
#sub-nav ul li#first-sub-nav-item h4 {
	font-size: 1em;
	background: #ffffff;
	padding: 7px 3px 7px 4px;
}
#sub-nav ul li#last-sub-nav-item {		/* last sub-nav item has the bottom border graphic */
	padding-bottom: 79px;
	background: url(../images/subnav_btm_bg.gif) no-repeat bottom left;
}

/* dropdown */
#sub-nav ul li ul {
	width: 198px;	
}
#sub-nav ul li ul,
#sub-nav ul li ul li {
	background: #efefef;
	font-size: 1em;	
}
#sub-nav ul li ul li {
	margin: 0;
	padding: 0;
	font-size: 1em;
}
#sub-nav ul li ul li ul li {
	padding-left: 16px;
}

/* third sub header links */
#sub-nav ul li ul li ul li a {
	padding-left: 0;
	width: 181px;
	line-height: 14px;
	font-weight: normal;
}
.design-solutions #sub-nav ul li ul li a:hover {
	color: #000000;
	background: #efefef;
}
.design-solutions #sub-nav ul li ul li a.selected,
.in-use #sub-nav ul li ul li a.selected {
	color: #e24536;
	background: #efefef;
}

#sub-nav ul li ul li a {
	color: #666666;
	background: #f2f2f2;
}
#sub-nav ul li ul li a:hover,
#sub-nav ul li ul li a.selected {
	color: #000000;
	background: #f2f2f2;
}

.installation #sub-nav ul li h4.section.selected {
	background: #808080;
}
.installation #sub-nav ul li ul li ul li.last {
	padding-bottom: 5px;
}

.gallery #sub-nav ul li ul li a.selected {
	color: #000000;
}

h4#commercial.selected,
h4#residential.selected {
	background: #808080;
}