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

	CSS on Sails
	Title: Site Name
	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; outline: 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 & Image relacement & corner
-----------------------------------------------------------------------------------------------*/

ol#accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; }
.ir span { display: block; width: 100%; height: 100%; position: absolute; top:0; left:0; }
span.tl, span.tr, span.bl, span.br { position: absolute; display: block; overflow: hidden; }
/* 1.3 Clearfix
-----------------------------------------------------------------------------------------------*/

.clearfix:after, .container:after, .breadcrumb:after, .first-column:after, .third-column .content:after, .third-column .grid-list:after, #footer ol:after, #copyright ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/* 1.4 Default Styles
-----------------------------------------------------------------------------------------------*/

body { background: #AD0606; color: #5E5B5B; font: 62.5%/1.3 "Arial", "Helvetica", sans-serif; text-align: center; }
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: "Arial", "Helvetica", sans-serif; }
a, a:visited { color: #00f; text-decoration: none; }
a:hover, a:active { color: #f00; text-decoration: none; }


/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/


/* 2.1 Structure
-----------------------------------------------------------------------------------------------*/

.container { width: 944px; position: relative; margin: 0 auto; text-align: left;}
#content { background: url(../images/bg_content.jpg) repeat-x 0 0;}
#footer { clear: both; }


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

#header { background: url(../images/bg_header.jpg) repeat-x 0 0; min-height: 71px; border-bottom: 1px solid #D9BD8A; }
#header #logo { display: block; text-indent: -999em; position: absolute; width: 513px; height: 106px; top:0; left:-127px; }
#header #logo span { background: url(../images/logo.png) no-repeat 0 0; cursor: pointer; }
#header p { font-family: Verdana; font-size: 1.2em;  height: 22px; text-align: right; }
#header p.welcome { color: #545454; padding: 12px 0 0 0; }
#header p.welcome span.user { color: #005399; font-weight: bold; }
#header p.cart { color: #2A261E; background: url(../images/ico_cart.png) no-repeat 0 0; padding: 3px 0 0 28px; float: right }
#header p.cart a { color: #005399; text-decoration: underline; }
#header p.cart a:hover { text-decoration: none; }
/* 2.3 Navigation
-----------------------------------------------------------------------------------------------*/
#navigation { background: url(../images/bg_nav.jpg) repeat-x 0 0; min-height: 45px;}
#navigation ul { float: left; padding: 0 0 0 72px; }
#navigation li { float: left; }
#navigation li a {  font-size: 1.4em; color: #545454; font-weight: bold; text-transform: uppercase; 
	vertical-align: middle; height: 45px; line-height: 45px; float: left; background: url(../images/bg_nav-arrow.jpg) no-repeat top right;
	padding: 0 20px 0 16px;
 }
#navigation li.first a { margin-left: 5px; }
#navigation li.last a { background: transparent; }
#navigation li a.current { color: #AA0404; }
#navigation li a:hover { background: url(../images/bg_nav-hover.jpg) repeat-x 0 0; color: #AA0404;}
/* search */
#navigation .search { float: right; }
#navigation .search label { float: right; }
#navigation .search label img { float: left; padding: 12px 8px 0 0; } 
#navigation .search label input { float: left; margin-top: 9px; padding: 7px 0 0 6px; background: url(../images/bg_input.png) no-repeat 0 0; width: 195px; height: 21px; border: 0; font-size: 1.2em; }
#navigation .search button { float: right; border: 0; background: transparent; padding: 11px 0 0 4px; cursor: pointer; }
/* 2.4 Content
-----------------------------------------------------------------------------------------------*/
/* BREADCRUMB */
div.breadcrumb {
	 z-index: 8;
	 position: relative;
}
.breadcrumb h1 { color: #FFFFFF; font-size: 2.4em; float: left; padding: 30px 0 0 10px; }
.breadcrumb .browse { float: right; padding: 23px 12px 9px 0;  }
.breadcrumb .browse h2 { color: #626262; font-size: 1.1em; margin-bottom: 4px; text-transform: uppercase; font-weight: normal; text-align: center; }
.breadcrumb .browse p { float: left; height: 29px; background: url(../images/bg_dropdownlist-m.jpg) repeat-x 0 0; }
.breadcrumb .browse p a { float: left; height: 29px; color: #363636; font-size: 1.4em; background: url(../images/bg_dropdownlist-l.jpg) no-repeat top left;}
.breadcrumb .browse p a span { float: left; vertical-align: middle; line-height: 29px; height: 29px; background: url(../images/bg_dropdownlist-r.jpg) no-repeat top right; padding-right: 48px; padding-left: 10px; }
.margin_bottom {
	margin-bottom: 5px;
}
/* FIRST COLUMN */

.first-column { background: #EDEDED; position: relative; width: 944px; overflow: hidden; padding: 0 0 13px 0; z-index: 8; }
.first-column span.tl, .first-column span.tr, .first-column span.bl, .first-column span.br { background: url(../images/bg_corner-1.gif) no-repeat 0 0; width: 5px; height: 5px; z-index: 9; }
.first-column span.tl { background-position: 0 0; top:0px; left:0px; }
.first-column span.tr { background-position: -5px 0; top:0px; right:0px; }
.first-column span.bl { background-position: 0 -5px; bottom:0px; left:0px; }
.first-column span.br { background-position: -5px -5px; bottom:0px; right:0px; }
.carousel { position: relative; }
.carousel .carousel-box { overflow: hidden; }
.carousel li { float: left; text-align: center; display: inline;  }
.carousel .prev, .first-column .carousel .next { display: block;  position: absolute; z-index: 100; cursor: pointer; }
#selection-strip { background: #FBFEC1 url(../images/bg_dot.gif) repeat-x bottom left; overflow: hidden; }
#selection-strip .carousel-box { height: 102px; padding: 0 36px;  }
#selection-strip ul { width: 2000px; height: 102px; }
#selection-strip li { margin: 16px 19px 0 19px; height: 86px; }
#selection-strip li.selected { background: url(../images/bg_carousel-selected.gif) no-repeat 14px bottom; }
#selection-strip .prev, #selection-strip .next { width: 13px; height: 24px; }
#selection-strip .prev { background: url(../images/btn_prev.gif) no-repeat 0 0; top: 40px; left: 17px; }
#selection-strip .next { background: url(../images/btn_next.gif) no-repeat 0 0; top: 40px; right: 17px; }

#sample-type { clear: both; padding-top: 14px; width: 326px; overflow: hidden; }
#sample-type .carousel-box { height: 86px; padding: 0 26px 0 31px; }
#sample-type ul { width: 1000px; height: 86px; }
#sample-type li { margin: 0 1px 0 2px; }
#sample-type li img { border: 1px solid #B0B0B0; padding: 1px; cursor: pointer; }
#sample-type .prev, #sample-type .next { width: 12px; height: 21px; }
#sample-type .prev { background: url(../images/btn_prev2.gif) no-repeat 0 0; top: 51px; left:3px;}
#sample-type .next { background: url(../images/btn_next2.gif) no-repeat 0 0; top: 51px; right:0px;}
#sample-type .disable { background-position: 0 -21px; }

#sample-color { clear: both; width: 324px;}
#sample-color .carousel-box {  padding: 15px 0 0 4px; margin: 0 14px;  height: 20px; width: 292px;  background: url(../images/bg_sample-color.gif) no-repeat 0 10px; }
#sample-color ul { background: #fff;  width: 1000px; height: 15px;  }
#sample-color li { margin: 0 1px 0 2px; width: 10px; position: relative; height: 12px; }
#sample-color li span { display: block; text-indent: -999em; width: 8px; height: 12px; border: 1px solid #E1E1E1; cursor: pointer; }
#sample-color li.selected { z-index: 9; }
#sample-color li.selected span { position: absolute; top:-8px; left:-4px; width:18px; height: 30px; }
#sample-color .prev, #sample-color .next { width: 8px; height: 11px; }
#sample-color .prev { background: url(../images/btn_prev3.gif) no-repeat 0 0; top: 16px; left:3px;}
#sample-color .next { background: url(../images/btn_next3.gif) no-repeat 0 0; top: 16px; right:3px;}

.carousel-content { padding: 0 0 0 23px; }
.carousel-content .detail-content { float: left; width: 584px; }
.carousel-content .video-side { float: right; width: 300px; padding: 14px 13px 0 0; }
.carousel-content h3 { font-size: 2.4em; color: #404040; font-weight: normal; float: left; padding-top: 12px; }
.carousel-content p.rating, .carousel-content p.store { float: left; color: #B1B1B1; text-transform: uppercase; padding: 5px 0 0 26px; text-align: center; }
.carousel-content p.rating { padding-right: 32px; }
.carousel-content p.store a {color: #1B6EA3; font-size: 1.4em; text-transform:none; text-decoration: underline; }
.carousel-content p.store a:hover { text-decoration: none; }
.carousel-content p.tip { clear: both; color: #6B6B6B; font-size: 1.2em; padding-top: 4px; }

.carousel-content .detail-content img.snapshot { float: left; padding: 59px 0 0 25px; }

/*  func */
.func { float: right; width: 324px; padding: 48px 0 0 0;}
.func img.sample { padding: 0 0 0 32px; float: left; }
.func #size-slider { float: right; padding-right: 16px; }
.carousel-content .behavior { margin: 0 auto; background: url(../images/bg_hr.jpg) no-repeat 0 0; margin-top: 22px;width: 288px; }
.carousel-content .behavior label { line-height: 18px; padding-left: 18px; padding-right: 14px; text-align: center;  float: left; font-size: 1.1em; color: #A4A4A4; text-transform: uppercase; }
.carousel-content .behavior label input#qty { height: 18px; width: 40px; padding-top: 4px; text-align: center; border: 1px solid #999; color: #404040; font-size: 1.2em; }
.carousel-content .behavior label input#price { font-size: 1em; color: #474747;width: 66px; height: 22px; border: 0; background: transparent;  }
.carousel-content .behavior label em { font-style: normal; font-size: 2em; color: #AAAAAA;  }
.carousel-content .behavior button { margin-top: 12px; }
button.btn-redbox { font-size: 1.24em; font-weight: bold; background: url(../images/btn_add-to-cart.gif) no-repeat 0 0; border: 0; color: #fff; width: 90px; height: 31px; line-height: 31px; vertical-align: middle; text-align: center; padding: 0; cursor: pointer;  }

/* video side */
.video-side p { text-align: right; text-transform: uppercase; color: #A7A7A7; }
.video-side .video-box { margin-top: 6px; }


/* SECOND COLUMN */
.second-column { width: 695px; height: 261px; border: 1px solid #000; margin: 0 auto; position: relative; z-index: 8; }
.second-column span.l, .second-column span.r { display: block; position: absolute; width: 93px; height: 263px; }
.second-column span.l { background: url(../images/bg_leftside.jpg) no-repeat 0 0; top:-1px; left: -93px; }
.second-column span.r { background: url(../images/bg_rightside.jpg) no-repeat 0 0; top:-1px; right: -93px;  }
.second-column ul.flow-list { position: absolute; bottom: 0; left: 112px; }
.second-column ul.flow-list li { float: left; }

/* THIRD COLUMN */
.third-column { width: 942px; position: relative; margin: 0 auto; border: 1px solid #820404; padding: 1px; background: #fff; z-index: 8;  }
.third-column span.tl, .third-column span.tr, .third-column span.bl, .third-column span.br { background: url(../images/bg_corner-2.gif) no-repeat 0 0; width: 5px; height: 5px; z-index: 9; }
.third-column span.tl { background-position: 0 0; top:-1px; left:-1px; }
.third-column span.tr { background-position: -5px 0; top:-1px; right:-1px; }
.third-column span.bl { background-position: 0 -5px; bottom:-1px; left:-1px; }
.third-column span.br { background-position: -5px -5px; bottom:-1px; right:-1px; }
.third-column .content { background: #FDFFDB url(../images/bg_thirdcol.gif) repeat-y 0 0; padding-bottom: 18px; }
.third-column .content .left-column { float: left; width: 522px; padding: 32px 0 0 18px; background: #EDEDED url(../images/bg_thirdleft.gif) repeat-x 0 0; }
.third-column .left-column p { font-size: 1.4em; color: #5E5B5B; margin: -8px 0 20px 15px; line-height: 20px; }
.third-column .content .right-column { float: right; width: 401px; padding: 14px 0 0 0; background: url(../images/bg_thirdright.gif) repeat-x 0 0; }
.third-column .right-column h3 { height: 55px; vertical-align: middle; line-height: 50px; margin-left: 16px; padding-left: 56px; color: #B2B18A; background: url(../images/bg_headline2.jpg) no-repeat 0 0; font-size: 3em; font-weight: normal; }
.third-column .grid-list { background: url(../images/bg_gridlist.jpg) no-repeat 0 0; margin: 8px 0 0 10px; }
.third-column .grid-list li { float: left; padding: 9px 0 6px 6px; position: relative; }
.third-column .grid-list li .zoom { display: none; }
.third-column .grid-list li.selected { z-index: 9; }
.third-column .grid-list li.selected .zoom { display: block; position: absolute; z-index: 9; top:-22px; left: -14px; background: url(../images/bg_grid-zoombox.png) no-repeat 0 0; width: 129px; height: 117px; text-align: center; padding-top: 10px; }
.third-column .grid-list li.selected .zoom span { display: block; height: 82px; }
.third-column .grid-list li.selected p.rating { padding-top: 9px;  }
.first-column, .second-column, .third-column { margin-bottom: 14px; }
/* 2.6 Footer
-----------------------------------------------------------------------------------------------*/
#footer { width: 942px; position: relative; margin: 0 auto; border: 1px solid #820404; padding: 1px; background: #D1B179 url(../images/bg_footer.jpg) repeat-x 0 0; overflow: hidden; padding-bottom: 12px; z-index: 8; }
#footer span.tl, #footer span.tr { background: url(../images/bg_corner-3.gif) no-repeat 0 0; width: 5px; height: 5px; z-index: 9; }
#footer span.tl { background-position: 0 0; top:-1px; left:-1px; }
#footer span.tr { background-position: -5px 0; top:-1px; right:-1px; }
#footer ol { padding: 14px 0 0 33px; }
#footer ol li { float: left; padding-right: 43px; text-align: left; }
#footer li h4 { color:  #222222; font-weight: bold; font-size: 1.4em; text-transform: uppercase; margin-bottom: 14px; }
#footer li ul li  { float: none; padding:0; padding-left: 4px; line-height: 20px; }
#footer li ul li a { font-size: 1.4em; color: #6A0101; font-weight: bold; }
#footer li.home ul li { margin-left: -6px; }
#footer li.search { padding-right: 0; }
#footer li.search li { padding-left:0; position: relative; width: 160px; }
#footer li.search label { background: url(../images/bg_search-b.png) no-repeat 0 0; width: 150px; height: 28px; display: block; padding: 0 4px; padding-top: 4px; }
#footer li.search input { border: 0; width: 126px; font-size: 1.2em; background: transparent; } 
#footer li.search button { border: 0; background: transparent; position: absolute; top:2px; right:8px; height: 20px; width: 28px; cursor: pointer; }
#copyright { width: 944px; background: #4E473A; margin: 0 auto; z-index: 8; position:relative }
#copyright ul { padding: 0 0 0 144px; }
#copyright li { float: left; padding: 12px 24px 12px 0; }
#copyright li.last { padding-right: 0; }
#copyright li a { font-size: 1.2em; color: #CAB794; font-weight: bold; }