/* Hello, why are you looking at this?! It's vaguely competent at best but I have organised it neatly :) */

#nav {
    width: 644px;
	height: 153px;
    background: url(images/nav-sprite.jpg);
    margin-right: 50px;
	float: right;
	padding: 0;
    position: relative;
}
#nav li, #subnav li, #endnav01 li, #endnav02 li, #endnav03 li, #endnav04 li {
    margin: 0;
	padding: 0;
	list-style: none;
    position: absolute;
	top: 0;
}
#nav li, #nav a {
    height: 153px;
	display: block;
}
#hello {
	left: 0;
	width: 148px;
}
#projects {
	left: 148px;
	width: 202px;
}
#blog {
	left: 350px;
	width: 146px;
}
#shop {
	left: 497px;
	width: 148px;
}
#hello a:hover {
    background: transparent url(images/nav-sprite.jpg)
    0 -153px no-repeat;
}
#projects a:hover {
    background: transparent url(images/nav-sprite.jpg)
    -148px -153px no-repeat;
}
#blog a:hover {
    background: transparent url(images/nav-sprite.jpg)
    -350px -153px no-repeat;
}
#shop a:hover {
    background: transparent url(images/nav-sprite.jpg)
    -497px -153px no-repeat;
}

#nav span, #subnav span, #endnav01 span, #endnav02 span, #endnav03 span, #endnav04 span {
	display: none;
}

#subnavcontainer {
	width: 852px;
	height: 49px;
	border-top: #E1E4E2 2px solid;
	border-bottom: #E1E4E2 2px solid;
	padding-top: 12px;
	float: left;
	display: inline;
	margin-left: 51px; /*15px for bg image + 36px margin*/
	margin-top: 24px;
	margin-bottom: 8px;
}
#endnavcontainer {
	width: 852px;
	height: 96px;
}
#subnav {
    width: 609px;
	height: 37px;
    background: url(images/subnav-sprite.jpg);
	padding: 0;
    position: relative;
}
#subnav li, #subnav a, #endnav01 li, #endnav01 a, #endnav02 li, #endnav02 a, #endnav03 li, #endnav03 a, #endnav04 li, #endnav04 a {
    height: 37px;
	display: block;
}
#selected {
	left: 0;
	width: 196px;
}
#web {
	left: 196px;
	width: 143px;
}
#type {
	left: 339px;
	width: 141px;
}
#illustration {
	left: 480px;
	width: 129px;
}
#selected a:hover {
    background: transparent url(images/subnav-sprite.jpg)
    0 -37px no-repeat;
}
#web a:hover {
    background: transparent url(images/subnav-sprite.jpg)
    -196px -37px no-repeat;
}
#type a:hover {
    background: transparent url(images/subnav-sprite.jpg)
    -339px -37px no-repeat;
}
#illustration a:hover {
    background: transparent url(images/subnav-sprite.jpg)
    -480px -37px no-repeat;
}

/* ------ ENDNAV 01 - WEB, TYPE, ILLUSTRATION ------- */
#endnav01 {
    width: 414px;
	height: 37px;
    background: url(images/subnav-sprite.jpg) -196px 0px;
	padding: 0;
    position: relative;
}
#web01 {
	left: 0px;
	width: 143px;
}
#type01 {
	left: 143px;
	width: 141px;
}
#illustration01 {
	left: 284px;
	width: 129px;
}
#web01 a:hover {
    background: transparent url(images/subnav-sprite.jpg)
    -196px -37px no-repeat;
}
#type01 a:hover {
    background: transparent url(images/subnav-sprite.jpg)
    -339px -37px no-repeat;
}
#illustration01 a:hover {
    background: transparent url(images/subnav-sprite.jpg)
    -480px -37px no-repeat;
}

/* ------ ENDNAV 02 - TYPE, ILLUSTRATION ------- */
#endnav02 {
    width: 270px;
	height: 37px;
    background: url(images/subnav-sprite.jpg) -339px 0px;
	padding: 0;
    position: relative;
}
#type02 {
	left: 0px;
	width: 141px;
}
#illustration02 {
	left: 141px;
	width: 129px;
}
#type02 a:hover {
    background: transparent url(images/subnav-sprite.jpg)
    -339px -37px no-repeat;
}
#illustration02 a:hover {
    background: transparent url(images/subnav-sprite.jpg)
    -480px -37px no-repeat;
}

/* ------ ENDNAV 03 - WEB, ILLUSTRATION ------- */
#endnav03 {
    width: 272px;
	height: 37px;
    background: url(images/endnavtype-sprite.jpg);
	padding: 0;
    position: relative;
}
#web03 {
	left: 0px;
	width: 143px;
}
#illustration03 {
	left: 143px;
	width: 129px;
}
#web03 a:hover {
    background: transparent url(images/endnavtype-sprite.jpg)
    0px -37px no-repeat;
}
#illustration03 a:hover {
    background: transparent url(images/endnavtype-sprite.jpg)
    -143px -37px no-repeat;
}

/* ------ ENDNAV 04 - WEB, TYPE ------- */
#endnav04 {
    width: 286px;
	height: 37px;
    background: url(images/subnav-sprite.jpg) -196px 0px;
	padding: 0;
    position: relative;
}
#web04 {
	left: 0px;
	width: 143px;
}
#type04 {
	left: 143px;
	width: 141px;
}
#web04 a:hover {
    background: transparent url(images/subnav-sprite.jpg)
    -196px -37px no-repeat;
}
#type04 a:hover {
    background: transparent url(images/subnav-sprite.jpg)
    -339px -37px no-repeat;
}