/* CSS Document */

/* NAV STYLE
---------------------------------------------*/

/*
	• Set padding to nav div (navHome)
	• Strip all other margins and padding so elements fit snugly
	• Remove list styling
	• Float list left
	• Display links as blocks so they act as buttons
	• Set generic widths and heights for buttons (even though these will be redefined by individual classes)
	• Indent text -999px so the text does not show

*/

#navHome{
	padding-left		: 26px;
	width				: 308px;
	color				: #CC00CC;
	background			: #fff;
}

#navHome ul{
	margin				: 0;
	padding				: 0;
	width				: 308px;
	list-style-image	:none;
}

#navHome ul li{
	margin				: 0;
	padding				: 0;
	list-style			: none;
	list-style-type		: none;
	float				: left;
}

#navHome a, #navHome #navHome a.visited{
	margin				: 0;
	padding				: 0;
	display				: block;
	height				: 227px;
	width				: 44px;
	text-indent			: -999px;
	text-size			: 0em;
}

/* SET BUTTON CLASSES
---------------------------------------------*/

/*

	Each nav button has a different width and background (3 states: up, hover and down).
	We've already defined constants for the nav links, so here we create classes to declare the different widths and BG attributes of the buttons.
	
*/

/* 01 - Home Button
--------------------------------------------*/
#navHome a.navHome, #navHome a.navHome:visited{
	width				: 34px;
	background			: url(images/nav/01_home_up.jpg) top left no-repeat;
}

#navHome a.navHome:hover{
	background			: url(images/nav/01_home_hover.jpg) top left no-repeat;
}

#navHome a.navHomeDown{
	width				: 34px;
	height				: 311px;
	background			: url(images/nav/01_home_down.jpg) top left no-repeat;
}

/* 02 - Corporate Button
--------------------------------------------*/
#navHome a.navCorporate, #navHome a.navCorporate:visited{
	width				: 46px;
	background			: url(images/nav/02_corporate_up.jpg) top left no-repeat;
}

#navHome a.navCorporate:hover{
	background			: url(images/nav/02_corporate_hover.jpg) top left no-repeat;
}

#navHome a.navCorporateDown{
	width				: 46px;
	height				: 311px;
	background			: url(images/nav/02_corporate_down.jpg) top left no-repeat;
}

/* 03 - Web Button
--------------------------------------------*/
#navHome a.navWeb, #navHome a.navWeb:visited{
	width				: 55px;
	background			: url(images/nav/03_web_up.jpg) top left no-repeat;
}

#navHome a.navWeb:hover{
	background			: url(images/nav/03_web_hover.jpg) top left no-repeat;
}

#navHome a.navWebDown{
	width				: 55px;
	height				: 311px;
	background			: url(images/nav/03_web_down.jpg) top left no-repeat;
}

/* 04 - Creative Button
--------------------------------------------*/
#navHome a.navCreative, #navHome a.navCreative:visited{
	width				: 42px;
	background			: url(images/nav/04_creative_up.jpg) top left no-repeat;
}

#navHome a.navCreative:hover{
	background			: url(images/nav/04_creative_hover.jpg) top left no-repeat;
}

#navHome a.navCreativeDown{
	width				: 42px;
	height				: 311px;
	background			: url(images/nav/04_creative_down.jpg) top left no-repeat;
}

/* 05 - Poetry Button
--------------------------------------------*/
#navHome a.navPoetry, #navHome a.navPoetry:visited{
	width				: 47px;
	background			: url(images/nav/05_poetry_up.jpg) top left no-repeat;
}

#navHome a.navPoetry:hover{
	background			: url(images/nav/05_poetry_hover.jpg) top left no-repeat;
}

#navHome a.navPoetryDown{
	width				: 47px;
	height				: 311px;
	background			: url(images/nav/05_poetry_down.jpg) top left no-repeat;
}

/* 06 - About Button
--------------------------------------------*/
#navHome a.navAbout, #navHome a.navAbout:visited{
	width				: 38px;
	background			: url(images/nav/06_about_up.jpg) top left no-repeat;
}

#navHome a.navAbout:hover{
	background			: url(images/nav/06_about_hover.jpg) top left no-repeat;
}

#navHome a.navAboutDown{
	width				: 38px;
	height				: 311px;
	background			: url(images/nav/06_about_down.jpg) top left no-repeat;
}

/* 07 - Contact Button
--------------------------------------------*/
#navHome a.navContact, #navHome a.navContact:visited{
	width				: 46px;
	background			: url(images/nav/07_contact_up.jpg) top left no-repeat;
}

#navHome a.navContact:hover{
	background			: url(images/nav/07_contact_hover.jpg) top left no-repeat;
}

#navHome a.navContactDown{
	width				: 46px;
	height				: 311px;
	background			: url(images/nav/07_contact_down.jpg) top left no-repeat;
}


