/* css/header.css for Priority Management
   styles for header and main navigation bar */

/** header **/
#header {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 999;
	}
#logo {
  float: left;
  margin: 30px 0 0 20px;
	}
#logo a,
#logo span {
  background-image: url(/_/img/bg_logo.png);
	background-position: 0 0;
	height: 91px;
	width: 173px;
	}
	
/* main navigation */
#navigation-main {
  display: none;
	float: right;
  font-size: 14px;
	height: 29px;
	margin: 90px 0 10px 0;
	}
#navigation-main > ul {
	display: inline-block;
  }
#navigation-main ul li.open > ul {
	/*display: block !important;*/
  }

/* first tier - includes Menu's sub-list */
#navigation-main ul.tier1 > li {
  float: left;
  height: 27px;
	margin: 1px;
  position: relative;
  }
#navigation-main ul.tier1 > li > a,
#navigation-main ul.tier1 > li > span {
  display: block;
  color: #444;
	padding: 0 20px;
  }
#navigation-main ul.tier1 > li.current-ancestor > a {
	color: #fff;
  }
#navigation-main ul.tier1 > li:hover > a,
#navigation-main ul.tier1 > li:hover > span {
  color: #f00;
	}
	
/* all non-first tier */
#navigation-main ul.non-tier1 {
	display: none;
  margin: 0;
	}
#navigation-main ul.non-tier1 li {
	position: relative;
	width: 100%;
	}
#navigation-main ul.non-tier1 li a {
	display: block;
	padding: 10px 30px 10px 5px;
  }
#navigation-main ul.non-tier1 li a,
#navigation-main ul.non-tier1 li a:hover {
	color: #fff;
	}
#navigation-main ul.non-tier1 li span {
  background: url(/_/img/sprites.png) 100% -817px no-repeat;
  height: 38px;
  position: absolute;
  right: 0;
  top: 5px;
  width: 30px;
  }
#navigation-main ul.non-tier1 li.open > a {
	background-color: #999;
  }
#navigation-main ul.non-tier1 li.open > span {
	background-position: 100% -205px;
  }

/* second tier */
#navigation-main ul.tier2 {
  padding: 2px 3px 10px 3px;
	position: absolute;
	}
#navigation-main ul.tier1 > li:hover > ul,
#navigation-main ul.tier1 > li.hover > ul {
	display: block;
  }
#navigation-main ul.tier2 > li {
  border-bottom: 1px solid #fff;
	}
#navigation-main ul.tier2 > li > a {
	padding-left: 10px;
  }

/* third and fourth tiers */
#navigation-main ul.tier3,
#navigation-main ul.tier4 {
  border-top: 1px dashed #fff;
	padding-left: 15px;
  }
#navigation-main ul.tier3 > li,
#navigation-main ul.tier4 > li {
  border-bottom: 1px dotted #fff;
	line-height: 20px;
	}
#navigation-main ul > li.last {
  border-bottom: 0 none;
  }

/* special "Menu" item - hide it's contents but not the list it contains */
#navigation-main li#nav-menu-item {
	margin: 0;
	}
#navigation-main li#nav-menu-item > span {
	display: none;
	}
#navigation-main li#nav-menu-item > ul {
	display: block;
	}
#navigation-main ul.tier2 {
	left: 0;
	top: 27px;
	width: 200px;
	}

/* 786px < width < 1024px */
@media screen and (min-width : 768px) and (max-width : 1043px) {
  #logo {
		margin: 38px 0 0 15px;
		}
	#logo a {
		background-position: 0 -100px;
		height: 71px;
		width: 134px;
    }
	#navigation-main {
    font-family: 'prioritysanscondensedregular', sans-serif;
	  margin-top: 85px;
	  }
	#navigation-main ul.tier1 > li > a,
	#navigation-main ul.tier1 > li > span {
		padding-left: 10px;
		padding-right: 10px;
		}
}

/* width < 786px */
@media screen and (max-width : 767px) {
  #logo {
		margin: 18px 0 0 15px;
		}
	#logo a {
    background-position: 0 -200px;
		height: 68px;
		width: 130px;
    }
	#navigation-main {
    font-size: 18px;
		margin-top: 41px;
	  }
	#navigation-main li#nav-menu-item {
		margin: 1px;
		}
	#navigation-main li#nav-menu-item.hover {
	  height: 31px;
    }
	#navigation-main li#nav-menu-item.open > ul {
		display: block;
	  }
	#navigation-main li#nav-menu-item > span {
		display: inherit;
		}
	#navigation-main li#nav-menu-item > ul {
		display: none;
		}
	#navigation-main ul.tier2 {
		left: auto;
		right: 0;
		top: 31px;
		width: 447px;
		}
	#navigation-main li.mobile-header {
		background: #999;
		color: #fff;
		margin-left: 0 !important;
		padding: 10px 30px 10px 60px;
  	width: 360px !important;
		}
  #navigation-main li.mobile-header span {
    background-position: 0 -140px !important;
    left: 20px;
	  }
	#navigation-main ul.non-tier1 {
		padding: 3px 4px 5px 5px;
	  }
	#navigation-main ul.non-tier1 li a {
	  margin: 10px 50px 10px 5px;
		padding: 0;
    }
  #navigation-main ul.non-tier1 li span {
    background: url(/_/img/sprites.png) 100% -140px no-repeat;
    right: 15px;
	  }
	#navigation-main ul.tier2 ul {
		display: none;
		height: auto;
		position: absolute;
		right: 0;
		top: 0;
		width: 0;
	  }
	#navigation-main ul.tier3,
	#navigation-main ul.tier4 {
		border-top: 0 none;
	  }
	#navigation-main ul.tier3 > li,
	#navigation-main ul.tier4 > li {
    border-bottom-style: dashed;
		margin-left: 65px;
	  width: 384px;
		}
	#navigation-main .open-ancestor > ul {
		padding: 0 !important;
	  }
	#navigation-main .open-ancestor > ul > li {
		border: 0 none !important;
	  }
	#navigation-main .open-ancestor > ul > li.mobile-header,
	#navigation-main .open-ancestor > ul > li > a,
	#navigation-main .open-ancestor > ul > li > span {
 		display: none !important;
	  }
}