/* Standard Links (div#navigation ul li a.main) */

#navigation ul .home a.main {
	background-position: 0 0;
	width: 102px;
	z-index: 1;
	height: 65px;
	}

#navigation ul .services a.main {
	background-position: -102px 0;
	width: 102px;
	z-index: 2;
	}

#navigation ul .portfolio a.main {
	background-position: -217px 0;
	width: 102px;
	z-index: 3;
	}


#navigation ul .about a.main {
	background-position: -337px 0;
	width: 100px;
	z-index: 4;
	}

#navigation ul .contact a.main {
	background-position: -437px 0;
	width: 102px;
	z-index: 5;
	height: 65px;
	}

/* Active States (Body tag matchup) (Sprite Level 2) ( y = -70px ) */

.home #navigation .home a.main {
	background-position: 0 -70px;
	z-index: 6;
	height: 65px;
}
.services #navigation .services a.main {
	background-position: -102px -70px;
	z-index: 6;
	height: 65px;
}
.portfolio #navigation .portfolio a.main {
	background-position: -217px -70px;
	z-index: 6;
	width: 102px;
	height: 65px;
}
.about #navigation .about a.main {
	background-position: -337px -70px;
	z-index: 6;
	height: 65px;
}
.contact #navigation .contact a.main {
	background-position: -437px -70px;
	z-index: 6;
	height: 65px;
}

/*
.home #navigation .home a.main { background-position: 0 -210px; z-index: 6; }
.services #navigation .services a.main { background-position: -102px -210px; z-index: 6; }
.portfolio #navigation .portfolio a.main { background-position: -217px -210px; z-index: 6; }
.about #navigation .about a.main { background-position: -337px -210px; z-index: 6; }
.contact #navigation .contact a.main { background-position: -437px -210px; z-index: 6; }
*/

/* Active State Right Adjacents (Body tag matchup staggered 1 right) ( y = -140px ) */

.home #navigation .services a.main {
	background-position: -102px -140px;
	height: 65px;
}
.services #navigation .portfolio a.main { background-position: -217px -140px; }
.portfolio #navigation .about a.main { background-position: -337px -140px;  }
.about #navigation .contact a.main { background-position: -437px -140px; }

/* Hovers (blues) (1px wider to the left) ( y = -280px ) */

#navigation a.main span.hover {
	background: url(images/sprite.jpg) no-repeat top left;
	cursor: pointer !important;
	display: block !important;
	position: absolute;
	top: 0;
	right: 0;
	height: 65px;
	width: 102%;
	z-index: 100;
	padding-top: 0;
	padding-right: 1px;
	padding-bottom: 0;
	padding-left: 0;
	}

#navigation .home a.main .hover {
	background-position: 0 -280px;
	padding: 0;
	height: 65px;
	width: 102px;
	}

#navigation .services a.main .hover {
	background-position: -103px -280px;
	background-position: -102px -280px;
	height: 65px;
	width: 102px;
	}

#navigation .portfolio a.main .hover {
	background-position: -219px -280px;
	background-position: -218px -280px;
	}

#navigation .about a.main .hover {
	background-position: -340px -280px;
	background-position: -339px -280px;

	}
.portfolio.projects.professor.mocha #navigation .level_0 .about.stingray {
}


#navigation .contact a.main .hover {
	background-position: -441px -280px;
	background-position: -440px -280px;
	}

/* Active State Hovers (oranges) (y = - 210px ) */

.home #navigation .home a.main .hover {
	background-position: 0 -210px;
	padding: 0;
	height: 65px;
	width: 102px;
}
.services #navigation .services a.main .hover {
	background-position: -102px -210px;
	padding: 0;
	height: 65px;
}
.portfolio #navigation .portfolio a.main .hover { background-position: -217px -210px;  padding: 0; }
.about #navigation .about a.main .hover { background-position: -337px -210px; padding: 0; }
.contact #navigation .contact a.main .hover { background-position: -437px -210px; padding: 0; }

/* Subnavs (Level 1) */

#navigation .stingray {
	position: relative;
	height: 65px;
}

#navigation ul.level_1 {
	background: transparent;
	display: none;
	list-style: none;
	margin: 0;
	position: absolute;
	top: 60px;
	left: 0;
	width: 175px;
	}

#navigation ul.level_1 li {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 0;
	}

#navigation ul.level_1 a {
	background: #ccc;
	color: #333;
	display: block;
	font: 12px/22px "lucida grande",verdana,sans-serif;
	padding: 5px 10px;
	text-decoration: none;
	}
	

/* Subnavs (Level 2) */

#navigation ul.level_2 { display:none; }

 

.home #subnavigation .identity a {
	background-position: 0 0;
	height: 65px;
}
.home #subnavigation .design a {
	background-position: 0 -88px;
	height: 65px;
}
.home #subnavigation .code a {
	background-position: 0 -175px;
	height: 65px;
}

.home #subnavigation .identity a .hover {
	background-position: -232px 0px;
	height: 65px;
}
.home #subnavigation .design a .hover {
	background-position: -232px -88px;
	height: 65px;
}
.home #subnavigation .code a .hover { background-position: -232px -175px; }

.services #subnavigation .identity a { background-position: 0 0; }
.services #subnavigation .design a { background-position: 0 -88px; }
.services #subnavigation .code a { background-position: 0 -175px; }

.services #subnavigation .identity a .hover { background-position: -232px 0px; }
.services #subnavigation .design a .hover { background-position: -232px -88px; }
.services #subnavigation .code a .hover { background-position: -232px -175px; }

.about #subnavigation .company a { background-position: 0 -271px; }
.about #subnavigation .timeline a { background-position: 0 -359px; }
.about #subnavigation .faq a { background-position: 0 -446px; }

.about #subnavigation .company a .hover { background-position: -232px -271px; }
.about #subnavigation .timeline a .hover { background-position: -232px -359px; }
.about #subnavigation .faq a .hover { background-position: -232px -446px; }

.contact #subnavigation .general a { background-position: 0 -542px; }
.contact #subnavigation .questions a { background-position: 0 -630px; }
.contact #subnavigation .book a { background-position: 0 -717px; }

.contact #subnavigation .general a .hover { background-position: -232px -542px; }
.contact #subnavigation .questions a .hover { background-position: -232px -630px; }
.contact #subnavigation .book a .hover { background-position: -232px -717px; }

.portfolio #subnavigation .project a { background-position: 0 -813px; }
.portfolio #subnavigation .type a { background-position: 0 -901px; }

.portfolio #subnavigation .project a .hover { background-position: -232px -813px; }
.portfolio #subnavigation .type a .hover { background-position: -232px -901px; }

/* Active Buttons (body class matchup) */ /*" +4px for the topping "*/

.services.identity #subnavigation .identity a { background-position: -462px 0; padding-top: 4px; margin-top: -4px; }
.services.identity #subnavigation .design a .cap { display: block; background-position: bottom right; }
.services.identity #subnavigation .design a .hover { border-top: 0 none; top: 0; }

.services.design #subnavigation .design a { background-position: -462px -92px; }
.services.design #subnavigation .identity a .cap { display: block; background-position: top right; top: auto; bottom: 0; }
.services.design #subnavigation .code a .cap { display: block; background-position: bottom right; }
.services.design #subnavigation .code a .hover { border-top: 0 none; top: 0; }

.services.code #subnavigation .code a { background-position: -462px -179px; padding-top: 4px; }
.services.code #subnavigation .design a .cap { display: block; background-position: top right; top: auto; bottom: 0;  }

.services.identity .identity .hover,
.services.design .design .hover,
.services.code .code .hover {
	display: none !important;
	height: 0px;
	}

.about.company #subnavigation .company a { background-position: -462px -271px; padding-top: 4px; margin-top: -4px; }
.about.company #subnavigation .timeline a .cap { display: block; background-position: bottom right; }
.about.company #subnavigation .timeline a .hover { border-top: 0 none; top: 0; }

.about.timeline #subnavigation .timeline a { background-position: -462px -363px; }
.about.timeline #subnavigation .company a .cap { display: block; background-position: top right; top: auto; bottom: 0; }
.about.timeline #subnavigation .faq a .cap { display: block; background-position: bottom right; }
.about.timeline #subnavigation .faq a .hover { border-top: 0 none; top: 0; }

.about.faq #subnavigation .faq a { background-position: -462px -451px; padding-top: 4px; }
.about.faq #subnavigation .timeline a .cap { display: block; background-position: top right; top: auto; bottom: 0;  }

.about.company .company .hover,
.about.timeline .timeline .hover,
.about.faq .faq .hover {
	display: none !important;
	height: 0px;
	}

.contact.general #subnavigation .general a { background-position: -462px -542px; padding-top: 4px; margin-top: -4px; }
.contact.general #subnavigation .questions a .cap { display: block; background-position: bottom right; }
.contact.general #subnavigation .questions a .hover { border-top: 0 none; top: 0; }

.contact.questions #subnavigation .questions a { background-position: -462px -600px; }
.contact.questions #subnavigation .questions a { background-position: -462px -634px; }
.contact.questions #subnavigation .general a .cap { display: block; background-position: top right; top: auto; bottom: 0; }
.contact.questions #subnavigation .book a .cap { display: block; background-position: bottom right; }
.contact.questions #subnavigation .book a .hover { border-top: 0 none; top: 0; }

.contact.book #subnavigation .book a { background-position: -462px -721px; padding-top: 4px; }
.contact.book #subnavigation .questions a .cap { display: block; background-position: top right; top: auto; bottom: 0;  }

.contact.general .general .hover,
.contact.questions .questions .hover,
.contact.book .book .hover {
	display: none !important;
	height: 0px;
	}

.portfolio.projects #subnavigation .project a { background-position: -462px -813px; padding-top: 4px; margin-top: -4px; }
.portfolio.projects #subnavigation .type a .cap { display: block; background-position: bottom right; }
.portfolio.projects #subnavigation .type a .hover { border-top: 0 none; top: 0; }

.portfolio.type #subnavigation .type a { background-position: -462px -905px; padding-top: 4px; }
.portfolio.type #subnavigation .project a .cap { display: block; background-position: top right; top: auto; bottom: 0;  }

.portfolio.projects .project .hover,
.portfolio.type .type .hover {
	display: none !important;
	height: 0px;
	}


/* Markup Sample */
/*" "*//* Dragon Interactive -- Core Stylesheet */
/*" Rev 0.1 -- Last Updated December 21, 2007 "*/

* {
	margin: 0;
	padding: 0; 
	}