/**********************************************************************************************

	CSS on Sails
	Title	: Eyezone Emporium
	Author	: XHTMLized (http://www.xhtmlized.com/)
	Date	: June 2009

***********************************************************************************************

	1. BASE
			1.1 Reset
			1.2 Accessibility Navigation & Hide
			1.3 Clearfix
			1.4 Default Styles

	2. LAYOUT
			2.1 Structure
			2.2 Header
			2.3 Navigation
			2.4 Content
			2.5 Sidebar
			2.6 Footer

***********************************************************************************************/


/* 	1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/


/* 	1.1 Reset
-----------------------------------------------------------------------------------------------*/

	html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
	q { quotes: none; }
	q:before, q:after { content: ""; content: none; }
	a, ins, del { text-decoration: none; }
	table { border-collapse: collapse; border-spacing: 0; }
	th, td { vertical-align: top; }
	th { text-align: left; }
	
	
/* 	1.2 Accessibility Navigation & Hide
-----------------------------------------------------------------------------------------------*/
	
	ol#accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; }
	
	
/* 	1.3 Clearfix
-----------------------------------------------------------------------------------------------*/
	
	#content-inner:after,
	.contact li:after,
	.post-content:after,
	#sidebar-navigation:after,
	#footer:after,
	#footer .right:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	
	
/* 	1.4 Default Styles
-----------------------------------------------------------------------------------------------*/
		
	body { font: 62.5%/1.3 Helvetica, Arial, sans-serif; text-align: center; color: #fff; background: #2c2c2c; }
	hr { display: none; }
	strong { font-weight: bold; }
	em { font-style: italic; }
	del { text-decoration: line-through; }
	th { font-weight: normal; }
	address, cite, dfn { font-style: normal; }
	li { list-style: none; }
	abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
	input, textarea, select { font-family: Helvetica, Arial, sans-serif; }
	a, a:visited { text-decoration: none; color: #333; cursor: pointer; }
	a:hover, a:active { text-decoration: none; color: #f60; }
	
		
	
/* 	2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/
	
	
/* 	2.1 Structure
-----------------------------------------------------------------------------------------------*/
		
	.container { position: relative; width: 960px; margin: 0 auto; font-size: 1em; text-align: left; color: #333; background: #fff; }
	#header { position: relative; width: 960px; height: 172px; overflow: hidden; }
	#content { width: 960px; }
	#content-inner { width: 728px; padding: 38px 20px 30px 20px; background: #f9f9f9; }
	#main-content { float: left; width: 556px; margin: 0; padding: 0; }
	#sidebar { float: left; width: 152px; margin: 0; padding: 0 20px 0 0; }
	#footer { clear: both; width: 920px; height: 155px; margin: 0; padding: 18px 20px; color: #989898; background: #090909; }
	
	.left { float: left; }
	.right { float: right; }
	
	
/* 	2.2 Header
-----------------------------------------------------------------------------------------------*/
	
	#header .eyezone,
	#header .eyezone span { display: block; position: absolute; top: 0; left: 0; width: 210px; height: 70px; overflow: hidden; background: none; cursor: default; }
	#header .eyezone { top: 15px; left: 16px; }
	#header .eyezone span { z-index: 10; background: url(../images/logo.png) no-repeat 0 0; }
	#header a.eyezone span { cursor: pointer; }
	
	
/* 	2.3 Navigation
-----------------------------------------------------------------------------------------------*/
	
	#navigation { position: absolute; top: 15px; left: 789px; width: 152px; }
	#navigation li { font-size: 1.2em; line-height: 1.6667em; font-weight: bold; font-style: italic; text-transform: lowercase; color: #999; }
	#navigation li a { text-decoration: none; color: #999; }
	#navigation li a:hover,
	#navigation li a.active { text-decoration: none; color: #f60; }

	#navigation li a.section { text-decoration: none; color: #f60; }
	
	
	#navigation li a.current { text-decoration: none; color: #f60; }
	
	
/* 	2.4 Content
-----------------------------------------------------------------------------------------------*/
	
	/* Content : default style */
	#content h1 { width: 533px; height: 86px; overflow: hidden; padding: 34px 20px 0 19px; font-size: 6.4em; line-height: 1.125em; font-weight: normal; font-style: italic; text-transform: lowercase; letter-spacing: -1px; color: #fff; background: #f60; }
	#content h2,
	#content p,
	#content li { padding: 0 0 15px 0; font-size: 1.2em; line-height: 1.5em; font-weight: normal; color: #333; }
	#content h2 { font-weight: bold; }
	#content h3 { padding: 16px 0 4px 0; font-size: 2.2em; line-height: 1.5em; font-weight: bold; font-style: italic; }
	#content img { float: left; margin: 0; padding: 5px 0 15px 0; }
	#content ol,
	#content ul { padding: 0 0 15px 0; }
	#content li { padding: 0; }
	
	/* Content : Intro text */
	#content .intro { font-weight: bold; }
	
	/* Content : Map */
	#content #map { width: 556px; height: 397px; overflow: hidden; margin: 0 0 15px 0; padding: 0; }
	#content #map img { float: left; margin: 0; padding: 0; }
	
	
	/* Post */
	.post { padding: 0 0 5px 0; border-bottom: 1px solid #d0d0d0; }
	.post-info { padding: 15px 0; }	
	.first-post .post-info { padding-top: 0; }
	#content .post-info h3 { margin: 0 0 -2px 0; padding: 0; }
	#content .post-info p { padding: 0; font-style: italic; }
	#content .post-info p.meta { font-weight: bold; }
	#content .post-info p.date { color: #999; }
	
	/* Post : post icon */
	#content .post-info p.meta a { color: #333; }
	#content .post-info p.meta a:hover { color: #f60; }	
	#content .post-info p.meta .glitz { padding: 0 0 0 23px; background: url(../images/ico-glitz.gif) no-repeat 5px 1px; }
	#content .post-info p.meta .glitz:hover { background-position: 5px -61px; }
	#content .post-info p.meta .geek { padding: 0 0 0 35px; background: url(../images/ico-geek.gif) no-repeat 5px 2px; }
	#content .post-info p.meta .geek:hover { background-position: 5px -59px; }
	#content .post-info p.meta .vintage { padding: 0 0 0 25px; background: url(../images/ico-vintage.gif) no-repeat 5px 0; }
	#content .post-info p.meta .vintage:hover { background-position: 5px -65px; }
	#content .post-info p.meta .sports { padding: 0 0 0 32px; background: url(../images/ico-sports.gif) no-repeat 5px 1px; }
	#content .post-info p.meta .sports:hover { background-position: 5px -61px; }
	#content .post-info p.meta .limited { padding: 0 0 0 25px; background: url(../images/ico-limited.gif) no-repeat 5px 0; }
	#content .post-info p.meta .limited:hover { background-position: 5px -64px; }
	
	/* Post : pagination */
	#content .post-pagination { width: 556px; height: 25px; overflow: hidden; margin: 0; padding: 20px 0; }
	#content .post-pagination ul { height: 25px; }
	#content .post-pagination ul li { float: left; width: 110px; height: 25px; line-height: 2.0833em; font-weight: bold; }
	#content .post-pagination ul li.next { float: right; }
	#content .post-pagination ul li a { display: block; float: left; width: 82px; height: 25px; color: #fff; background-color: #666; background-repeat: no-repeat; }
	#content .post-pagination ul li.prev a { padding: 0 8px 0 20px; background-image: url(../images/ico-arrow-button-left.png); background-position: 0 50%; }
	#content .post-pagination ul li.next a { padding: 0 20px 0 8px; background-image: url(../images/ico-arrow-button.png); background-position: 100% 50%; }
	#content .post-pagination ul li a:hover { text-decoration: none; background-color: #f60; }
	
	
	/* Products */
	.products { padding: 36px 0 0 0; }
	#content .products h2 { width: 748px; margin: 0; padding: 0 0 24px 20px; }
	
	
	/* Feature : structure */
	#feature { position: relative; width: 960px; height: 597px; overflow: hidden; margin: 0; padding: 0; }
	#feature-inner { z-index: 10; position: absolute; top: 0; left: 0; width: 576px; height: 597px; overflow: hidden; }
	.feature-intro,
	.feature-title,
	.feature-content,
	.feature-products { float: left; clear: both; width: 576px; overflow: hidden; margin: 0 0 1px 0; padding: 0; }
	.products .feature-products { width: 960px; margin: 0; padding: 0 !important; }
	
	/* Feature : default */
	#feature h1 { width: auto; height: auto; margin: 0; padding: 0 0 17px 0; font-size: 6.4em; line-height: 1.125em; font-weight: normal; font-style: italic; text-transform: none; letter-spacing: -1px; color: #fff; background: none; }
		
	/* Feature : carousel */
	#feature-slider { z-index: 1; position: absolute; top: 20px; left: 0; width: 960px; height: 577px; overflow: hidden; }
	#feature-slider img { display: block; position: absolute; left:0; top:0; margin:0; padding: 0;}
	#feature-slider a { display: none;}
	#feature-slider .carousel-next { display: block; z-index: 10; position: absolute; top: 40px; left: 877px; float: left; clear: both; width: 30px; height: 25px; margin: 0; padding: 0 23px 0 10px; font-size: 1.2em; line-height: 2.0833em; font-weight: bold; text-align: left; text-decoration: none; color: #fff; background-color: #666; background-image: url(../images/ico-arrow-button.png); background-repeat: no-repeat; background-position: 100% 50%; cursor: pointer; }
	#feature-slider .carousel-next:hover { text-decoration: none; background-color: #f60; }
		
	/* Feature : intro */
	.feature-intro,
	.feature-title { width: 536px; height: 243px; overflow: hidden; padding: 14px 20px 15px 20px; background: #f60; }
	.feature-title { height: 82px; padding: 34px 20px 0 20px; }	
	.feature-intro .find-out { display: block; float: left; clear: both; width: 90px; height: 25px; overflow: hidden; margin: 0; padding: 0 13px 0 7px; font-size: 1.2em; line-height: 2.0833em; font-weight: bold; text-align: left; text-decoration: none; color: #333; background-color: #fff; background-image: url(../images/ico-arrow-button-02.png); background-repeat: no-repeat; background-position: 100% 0; }
	.feature-intro .find-out:hover { text-decoration: none; color: #fff; background-color: #333; background-position: 100% 100%; }
	#feature .feature-title h1 { margin: 0; }
	#feature .feature-intro h2 { color: #fff; }
	
	/* Feature : products */
	.feature-products li,
	.feature-products li a { position: relative; float: left; width: 192px; height: 192px; overflow: hidden; margin: 0; padding: 0; }
	#content .feature-products li img { margin: 0; padding: 0; }
	.feature-products li .caption { display: block; position: absolute; z-index: 2; top: 152px; left: 0; width: 162px; height: 35px; overflow: hidden; padding: 5px 10px 0 20px; font-size: 1em; line-height: 1.1667em; font-weight: bold; font-style: italic; text-decoration: none; color: #333; background: url(../images/bg-feature-caption.png) no-repeat 0 0; }
	.feature-products li .caption strong { display: block; }
	.feature-products li a,
	.feature-products li a:hover { text-decoration: none; }
	.feature-products li a:hover .caption { text-decoration: none; color: #fff; background: #f60; cursor: pointer; }
	
	/* Feature : content */
	.feature-content { width: 546px; height: 250px; margin: -1px 0 0 0; padding: 38px 10px 0 20px; background: #fff; }
	
	
	/* Form : contact */
	.contact { padding: 0 0 100px 0; }	
	.contact ul { clear: both; }
	#content .contact li { height: 1%; margin: 0; padding: 0 0 15px 0; }
	#content .contact li.submit { margin-top: -5px; padding-left: 192px; }	
	.contact .required { font-weight: bold; color: #f60; }
	.contact li .required { display: block; float: left; padding: 5px 0 0 5px; }
	.contact label { display: block; float: left; width: 182px; margin: 0; padding: 0 10px 0 0; line-height: 2.0833em; font-weight: bold; }	
	.contact .text,
	.contact textarea { float: left; width: 333px; margin: 0; padding: 4px 5px 0 5px; border: 1px solid #ccc; font-size: 1em; color: #333; background: none; }
	.contact .text { height: 19px; background: url(../images/bg-wrapper-text-02.png) repeat-x 0 0; }
	.contact textarea { height: 146px; overflow: auto; border-color: #d5d5d5; background: url(../images/bg-wrapper-textarea.png) repeat-x 0 0; }
	
	/* Form : error state */
	.error input,
	.error textarea,
	.contact input.error,
	.contact textarea.error { border: 1px solid #f60 !important; }
	.contact label.error { width: 489px; height: 32px; overflow: hidden; margin: 0 0 15px 0; padding: 0 10px 0 38px; font-size: 1.2em; line-height: 2.6667em; font-weight: bold; color: #f9f9f9; background: #f60 url(../images/ico-error.png) no-repeat 0 0; }
	
	
/* 	2.5 Sidebar
-----------------------------------------------------------------------------------------------*/
	
	#sidebar-navigation { border-top: 1px solid #e4e4e4; }
	#sidebar-navigation li { float: left; clear: both; width: 152px; border-bottom: 1px solid #e4e4e4; }
	#sidebar-navigation li a { display: block; float: left; width: 122px; height: 31px; overflow: hidden; margin: 0; padding: 0 0 0 30px; font-size: 1em; line-height: 2.5833em; font-weight: bold; font-style: italic; text-decoration: none; color: #999; background-repeat: no-repeat; background-position: 0 0; }
	#sidebar-navigation li a:hover,
	#sidebar-navigation li a.current { text-decoration: none; color: #f60; background-position: 0 100%; }
	#sidebar-navigation li a#sn-all { background-image: url(../images/ico-sidebar-navigation-all.png); }
	#sidebar-navigation li a#sn-geek { background-image: url(../images/ico-sidebar-navigation-geek.png); }
	#sidebar-navigation li a#sn-vintage { background-image: url(../images/ico-sidebar-navigation-vintage.png); }
	#sidebar-navigation li a#sn-sports { background-image: url(../images/ico-sidebar-navigation-sports.png); }
	#sidebar-navigation li a#sn-glitz { background-image: url(../images/ico-sidebar-navigation-glitz.png); }
	#sidebar-navigation li a#sn-limited { background-image: url(../images/ico-sidebar-navigation-limited.png); }
	
	
/* 	2.6 Footer
-----------------------------------------------------------------------------------------------*/
	
	/* Footer : default style */
	#footer .left { width: 365px; }
	#footer .right { width: 535px; }	
	#footer h3,
	#footer p,
	#footer li { margin: 0; padding: 0; font-size: 1.1em; line-height: 1.4545em; font-weight: bold; color: #989898; }
		
	/* Footer : subscribe */
	#footer .subscribe { float: left; width: 365px; }
	#footer .subscribe h3 { text-transform: lowercase; }
	#footer .subscribe p { font-weight: normal; }
	#footer .subscribe li { float: left; height: 1%; overflow: hidden; margin: 0; padding: 7px 7px 0 0; }
	#footer .subscribe form span.wrapper-text { float: left; width: 188px; height: 18px; overflow: hidden; margin: 0; padding: 4px 9px 1px 9px; border: 1px solid #ccc; background: url(../images/bg-wrapper-text.png) repeat-x 0 0; }
	#footer .subscribe form input.text,
	#footer .subscribe form input.action { float: left; margin: 0; padding: 0; }
	#footer .subscribe form input.input-text { width: 188px; height: 18px; border: none; font-size: 1.0909em; font-weight: normal; color: #bbb; background: none; }
	input.action { width: 70px; height: 25px; margin: 0; padding: 0 0 3px 5px !important; border: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 25px; font-weight: bold; text-align: left; color: #fff; background: #666 url(../images/ico-arrow-button.png) no-repeat 100% 50%; cursor: pointer; }
	input.action:hover { background: #f60 url(../images/ico-arrow-button.png) no-repeat 100% 50%; }
	
	/* Footer : navigation */
	#footer .navigation { float: right; width: 152px; }
	#footer .navigation li { font-style: italic; text-transform: lowercase; }
	#footer .navigation li a { text-decoration: none; color: #989898; }
	#footer .navigation li a:hover { text-decoration: none; color: #fff; }