/* 14K Classics - Table of Contents 

&&> A. Basics
&&&&&> 1. Type
&&&&&> 2. Container

&&> B. Header
&&&&&> 1. Header Navigation
&&&&&> 2. Bar Navigation

&&> C. Main Content
&&&&&> 1. Splash
&&&&&> 2. Boxes
&&&&&> 3. Textarea
&&&&&> 4. Sidebar

&&> D. Footer
&&&&&> 1. Ending

*//* Let the games begin! */

* {
	margin: 0;
	padding: 0;
	}

.left {
	float: left;
	}

.right {
	float: right;
	}

body {
	background: #002337 url(../i/body_bg.jpg) repeat-x top;
	}

/* A - Basics */

/* A2 - Container */

#container {
	margin: 0 auto;
	background: url(../i/content_bg.jpg) repeat-y top center;
	width: 770px;
	}

/* B - Header */

#header {
	margin: 0 auto;
	background: url(../i/header.jpg) no-repeat top center;
	position: relative;
	height: 193px;
	width: 770px;
	}	

/* B1 - Header Navigation (#hnav) */

#hnav {
	display: block;
	position: absolute;
	top: 45px;
	left: 475px;
	padding: 0;
	list-style: none;
	width: 275px;
	}

#hnav li {
	float: left;
	width: 135px;
	height: 30px;
	}

#hnav a {
	display: block;
	height: 23px;
	margin: 4px 0 0 0;
	}

#hnav a:hover {
	background: url(../i/header_hover.jpg) no-repeat -475px -19px;
	}

#hnav .about:hover {
	background-position: -620px -19px;
	}

#hnav .shopping:hover {
	background-position: -475px -49px;
	}

#hnav .contact:hover {
	background-position: -620px -49px;
	}

#hnav .wish:hover {
	background-position: -475px -79px;
	}

#hnav .help:hover {
	background-position: -620px -79px;
	}

#hnav a span {
	display: none;
	}

#hnav .about,#hnav .contact,#hnav .help {
	margin-left: 10px;
	}
	
/* B2 - Bar Navigation (#bnav) */

#bnav {
	background: url(../i/bar_navigation.jpg) no-repeat top center;
	position: absolute;
	display: block;
	top: 150px;
	left: 11px;
	padding: 0 0 0 150px;
	height: 43px;
	width: 600px;
	}

#bnav li {
	list-style: none;
	float: left;
	height: 43px;
	}

#bnav li a {
	font: 11px/39px "lucida grande",verdana,sans-serif !important;
	display: block;
	text-decoration: none;
	}

#bnav li a.necklaces {
	width: 140px;
	}

#bnav li a.rings {
	width: 65px;
	}

#bnav li a.bracelets {
	width: 80px;
	}

#bnav li a.earrings {
	width: 70px;
	}

#bnav li a.gift {
	width: 95px;
	}

#bnav li a:hover {
	background: url(../i/bar_navigation_hover.jpg) no-repeat -150px 0;
	}

#bnav li a.rings:hover {
	background-position: -290px 0;
	}

#bnav li a.bracelets:hover {
	background-position: -355px 0;
	}

#bnav li a.earrings:hover {
	background-position: -435px 0;
	}

#bnav li a.gift:hover {
	background-position: -505px 0;
	}

#bnav li a span {
	visibility: hidden;
	}

/* B3 - Logo */

#logo {
	position: absolute;
	top: 60px;
	left: 120px;
	height: 60px;
	width: 210px;
	}

#logo a {
	display: block;
	width: 100%;
	height: 100%;
	}

#logo a:hover {
	background: url(../i/header_hover.jpg) no-repeat -120px -30px;
	}

#logo a span {
	display: none;
	}

/* C - Main Content */

#splash {
	background: url(../i/splash.jpg) no-repeat top;
	height: 254px;
	width: 750px;
	margin: 2px 0 0 11px;
	}

#boxes {
	background: url(../i/boxes.jpg) no-repeat top;
	margin: 4px 0 0 16px;
	height: 140px;
	width: 739px;
	}

#boxes a {
	background: url(../i/boxes_hover.jpg) no-repeat -5px 0;
	float: left;
	margin: 0 0 0 5px;
	display: block;
	height: 140px;
	width: 179px;
	}

#boxes .rings {
	background-position: -190px 0;
	}

#boxes .bracelets {
	background-position: -372px 0;
	}

#boxes .earrings {
	background-position: -557px 0;
	margin-right: 0;
	}

#boxes a:hover {
	background-image: url(../i/boxes.jpg)
	}

#boxes a span {
	display: none;
	}

/* D - Footer */

#footer {
	background: url(../i/footer.jpg) no-repeat top center;
	height: 88px;
	width: 770px;
	margin: 0 auto;
	}

#footer p {
	font: 11px "lucida grande",verdana,sans-serif;
	visibility: hidden;
	text-align: center;
	}