@import url("reset.css");



/* Layout
---------------------------------------------------------------------- */

body
{
	background: black url("../images/page-background.gif") repeat;
}

.page
{
	position: relative;
	width: 920px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}



/* Header
---------------------------------------------------------------------- */

.header
{
	position: relative;
	z-index: 2;
	width: 100%;
	height: 249px;
}

.header .shelf
{
	position: absolute;
	left: 0px;
	top: 224px;
	width: 896px;
	height: 26px;
	background: url("../images/shelf.png") no-repeat;
}

.header .couple
{
	position: absolute;
	left: 455px;
	top: 0px;
	width: 420px;
	height: 249px;
	background: url("../images/couple.png") no-repeat;
}

.header .branch
{
	position: absolute;
	left: -150px;
	top: 0px;
	width: 480px;
	height: 250px;
	background: url("../images/branch.png") no-repeat;
}

.header .logo
{
	position: absolute;
	left: 69px;
	top: 62px;
	width: 340px;
	height: 105px;
	text-indent: -9999px;
	background: url("../images/logo.png") no-repeat;
}

.header .arm
{
	position: absolute;
	left: 598px;
	top: 224px;
	width: 128px;
	height: 62px;
	background: url("../images/arm.png") no-repeat;
}



/* Nav
---------------------------------------------------------------------- */

ul.nav
{
	position: absolute;
	left: 30px;
	top: 209px;
	list-style-type: none;
}

ul.nav li
{
	display: inline;
}

ul.nav a
{
	display: block;
	position: relative;
	height: 42px;
	float: left;
	padding-left: 10px;
	padding-right: 9px;
	text-indent: -9999px;
}

.nav .home       { width: 61px;  background: url("../images/nav/home.png") 10px 0px no-repeat; }
.nav .about      { width: 61px;  background: url("../images/nav/about.png") 10px 0px no-repeat; }
.nav .products   { width: 89px;  background: url("../images/nav/products.png") 10px 0px no-repeat; }
.nav .resources  { width: 97px;  background: url("../images/nav/resources.png") 10px 0px no-repeat; }
.nav .photos     { width: 71px;  background: url("../images/nav/photos.png") 10px 0px no-repeat; }
.nav .contact    { width: 75px;  background: url("../images/nav/contact.png") 10px 0px no-repeat; }

.nav :hover      { background-position: 10px -42px; }
.nav :active     { background-position: 10px -84px; }

.nav-selected *
{
	display: none;
	position: absolute;
	top: 173px;
	height: 77px;
}

.nav-selected .home       { display: block;  left: -1px;   width: 111px;  background: url("../images/nav/selected/home.png") no-repeat; }
.nav-selected .about      { display: block;  left: 105px;  width: 87px;   background: url("../images/nav/selected/about.png") no-repeat; }
.nav-selected .products   { display: block;  left: 185px;  width: 117px;  background: url("../images/nav/selected/products.png") no-repeat; }
.nav-selected .resources  { display: block;  left: 294px;  width: 126px;  background: url("../images/nav/selected/resources.png") no-repeat; }
.nav-selected .photos     { display: block;  left: 413px;  width: 97px;   background: url("../images/nav/selected/photos.png") no-repeat; }
.nav-selected .contact    { display: block;  left: 504px;  width: 102px;  background: url("../images/nav/selected/contact.png") no-repeat; }



/* Body
---------------------------------------------------------------------- */

.body
{
	position: relative;
	width: 896px;
	height: auto;
	background: #650000 url("../images/body-background.png") repeat;
	zoom: 1;   /* IE fix */
}

.body:after
{
	display: block;
	clear: both;
	height: 0;
	content: ".";
	visibility: hidden;
}

.body .content em
{
	font-style: italic;
}

.body .content a
{
	text-decoration: none;
	color: #ffe066;
	border-bottom: 1px dotted #ffe066;
}

.body .content a:visited
{
	color: #99873d;
	border-bottom-color: #99873d;
}

.body .content a:hover
{
	color: #ffe066;
	border-bottom-color: #ffe066;
	border-bottom-style: solid;
}

.body .content a:active
{
	color: white;
	border-bottom-color: white;
}



/* Main
---------------------------------------------------------------------- */

.body .main
{
	position: relative;
	float: left;
	width: 535px;
	height: auto;
	padding: 50px;
	padding-right: 0px;
}

.body .main .content
{
	position: relative;
	font: normal 0.9em/1.2em "lucida sans unicode", "lucida grande", verdana, arial, sans-serif;
	color: #c99;
}

.body .main .content h1
{
	margin-left: -20px;
	font: normal 1.8em georgia, serif;
	color: #ffce00;
}

.body .main .content h1 em
{
	font-style: italic;
}

.body .main .content p
{
	position: relative;
	padding-top: 1.2em;
}

.body .main .content .border
{
	border-top: 1px solid #2e0000;
	border-right: 1px solid #7e0000;
	border-bottom: 1px solid #7e0000;
	border-left: 1px solid #2e0000;
}



/* Aside
---------------------------------------------------------------------- */

.body .aside
{
	position: relative;
	float: right;
	left: 20px;
	width: 307px;
	height: auto;
	margin-top: 50px;
	margin-bottom: 50px;
	background: url("../images/aside.png") repeat-y;
}

.body .aside .top
{
	position: relative;
	top: -14px;
	width: 326px;
	height: 14px;
	background: url("../images/aside-top.png") no-repeat;
}

.body .aside .bottom
{
	position: relative;
	top: 24px;
	width: 326px;
	height: 24px;
	background: url("../images/aside-bottom.png") no-repeat;
}

.body .aside .content
{
	position: relative;
	padding-top: 5px;
	margin-left: 42px;
	font: normal 0.8em/1.2em "lucida sans unicode", "lucida grande", verdana, arial, sans-serif;
	color: #ad86bf;
}

.body .aside .content h1
{
	position: relative;
	padding: 10px;
	text-align: center;
	font: normal 1.1em "lucida sans unicode", "lucida grande", verdana, arial, sans-serif;
	color: white;
}

.body .aside .content h1 b
{
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: white;
	
	filter: alpha(opacity=5);
	-moz-opacity: 0.05;
	-khtml-opacity: 0.05;
	opacity: 0.05;
}

.body .aside .content p,
.body .aside .content ul,
.body .aside .content ol
{
	position: relative;
	padding-right: 20px;
	padding-top: 1.2em;
	text-align: justify;
}

.body .aside .content li
{
	padding: 0.2em 0;
}

.body .aside .content .icon
{
	float: left;
	padding-right: 5px;
	vertical-align: middle;
	
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
}

.body .aside .content a:hover .icon
{
	filter: alpha(opacity=100);
	-moz-opacity: 1.00;
	-khtml-opacity: 1.00;
	opacity: 1.00;
}



/* Footer
---------------------------------------------------------------------- */

.footer
{
	position: relative;
	clear: both;
	width: 896px;
	height: 100px;
	padding-bottom: 50px;
	background: url("../images/footer.png") no-repeat;
}

.footer .pixelchefs
{
	position: absolute;
	left: 673px;
	top: 43px;
	width: 146px;
	height: 46px;
	text-indent: -9999px;
	background: url("../images/pixelchefs.png") no-repeat;
}

.footer .pixelchefs:hover
{
	background-position: 0px -46px;
}

.footer .text
{
	position: absolute;
	z-index: 1;
	
	font: normal 0.7em "lucida sans unicode", "lucida grande", verdana, arial, sans-serif;
	text-transform: lowercase;
	color: #ad86bf;
	
	filter: alpha(opacity=50);
	-moz-opacity: 0.50;
	-khtml-opacity: 0.50;
	opacity: 0.50;
}

.footer .copyright
{
	bottom: 80px;
	left: 90px;
}

.footer .author
{
	top: 45px;
	right: 230px;
}