/* navigation.css - Information specific to the MZ Online web site navigation system */

/* NAVIGATION IMAGES */

a.home, span.home {
  background: url(/images/home.png);
}

a.homeselect, span.homeselect {
  background: url(/images/home.png);
  background-position: -110px 0;
}

a.services, span.services {
  background: url(/images/services.png);
}

a.servicesselect, span.servicesselect {
  background: url(/images/services.png);
  background-position: -110px 0;
}

a.portfolio, span.portfolio {
  background: url(/images/portfolio.png);
}

a.portfolioselect, span.portfolioselect {
  background: url(/images/portfolio.png);
  background-position: -110px 0;
}

a.links, span.links {
  background: url(/images/links.png);
}

a.linksselect, span.linksselect {
  background: url(/images/links.png);
  background-position: -110px 0;
}

a.about, span.about {
  background: url(/images/about.png);
}

a.aboutselect, span.aboutselect {
  background: url(/images/about.png);
  background-position: -110px 0;
}

a.blog, span.blog {
  background: url(/images/blog.png);
}

a.blogselect, span.blogselect {
  background: url(/images/blog.png);
  background-position: -110px 0;
}

a.contact, span.contact{
  background: url(/images/contact.png);
}

a.contactselect, span.contactselect {
  background: url(/images/contact.png);
  background-position: -110px 0;
}

/* NAVIGATION IMAGE ROLLOVERS */

.rollover {
  height: 39px;
  width: 110px;
  display: block;
  text-decoration: none;
}

.rollover:hover {
  background-position: -330px 0;
}

.selectrollover {
  height: 39px;
  width: 110px;
  display: block;
  text-decoration: none;
}

.selectrollover:hover {
  background-position: -220px 0;
}

/* NAVIGATION MENU LIST STYLES */

#mainNav, #mainNav ul {
  margin: 0;
  padding: 0 0 0 5px;
  list-style: none;
}

#mainNav li {
  float: left;
  position: relative;
}

#mainNav li:hover ul, li.over ul {
  display: block;
}

.primaryItems {
  border: 0px;
  font-size: 14px;
  font-weight: bold;
  color: white;
}

.secondaryItems {
  border: 1px solid black;
  width: 160px;
  position: absolute;
  top: 38px;
  left: 0;
  display: none;
  font-size: 12px;
  background-color: #437744;
}

.secondaryItems li {
  border-bottom: 1px dashed yellow;
  width: 100%;
  text-align: left;
}

.secondaryItems li:hover {
  background-color: #284729;
}

.secondaryItems a {
  width: 100%;
  padding: 5px 0 2px 4px;
  font-weight: bold;
  color: white;
  text-decoration: none;
}

#special {
  padding-left: 4px;
  background-color: #284729;
}