/* CSS Document 
*
*	@developer:		Jake Plummer
*	@designer:		Jake Mize
*	@date:			01/09/2009
*	@desc:			E-Commerce Frame Layout
*/

/********************************************************************************
			RESETS
********************************************************************************/

body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, label, p, strong, em, table, td { margin: 0; padding: 0;}
ul, ol { list-style: none;}
h1, h2, h3, h4, h5, h6 { font-size: 100%;}
img { border: 0;}
textarea { overflow: hidden;}
*:focus { outline: none;}
* { vertical-align:  baseline;}

/********************************************************************************
			GLOBAL STYLES
********************************************************************************/

body {
	background: #000000 url(../images/circles-bg.jpg) no-repeat center top fixed;
	color: #CCCCCC;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: 1.5;
	font-weight: normal;
	font-variant: normal;
}
.float-right { float: right; display: inline; margin: 0 0 10px 10px;}
.clear { clear: both;}
.clearfix { display: block; height: 1px; font-size: 1px; line-height: 1px; clear: both;}
hr { width: 660px; height: 1px; border: none; border-top: #cccccc solid 1px; margin: 5px auto 35px auto;}

/* typography */
p { padding-bottom: 1.25em;}
h1 { font-size: 32px; line-height: 1.15; color: #b6000e; padding: 0 20px .5em 20px;}
h2 { font-size: 18px; line-height: 1.15; color: #343132; padding: 0 0 .75em 30px;}
h3 { font-size: 16px; line-height: 1.15; color: #343132; padding: 0 0 1em 30px;}
h4 { font-size: 14px; line-height: 1.15; color: #343132; padding: 0 0 1em 30px;}
h5 { font-size: 12px; line-height: 1.15; color: #343132; padding: 0 0 1em 30px;}

/* links */
a { color: #b6000e; text-decoration: underline;}
a:hover { color: #b6000e; text-decoration: none;}

/********************************************************************************
			WRAPPERS
********************************************************************************/

#wrapper { width: 960px; margin: auto;}
.content { width: 960px; margin: 20px auto 0 auto;}
.slider-wrapper { width: 960px; margin: auto;}
.left-column { float: left; display: inline; width: 720px; background: #ffffff url(../images/left-column-gradient.png) no-repeat; padding: 20px 0; margin: 10px 0; position: relative;}
.right-column { float: right; display: inline; width: 240px; background: url(../images/transparent-bg.png); padding: 20px 0; margin: 10px 0; position: relative;}
#cart-page .left-column { width: 960px; background: #ffffff url(../images/left-column-gradient-large.png) no-repeat;}
.inside-left { float: left; display: inline; width: 320px; margin: 0 20px 0 30px;} /* on single product page */
.inside-right { float: right; display: inline; width: 320px; margin-right: 30px;} /* on single product page */

/********************************************************************************
			HEADER
********************************************************************************/

#header { padding: 20px 0 10px; position: relative;}
#logo { float: left; display: inline;}

/* coda slider (layout styles are in coda-slider-2.0.css */
.panel-wrapper .title { display: block; font-size: 23px; line-height: 1.05; color: #ffffff; padding-left: 30px; margin-bottom: 10px;}
.panel-wrapper p { font-size: 13px; line-height: 1.75; padding-left: 35px; color: #6b6b6b;}
.panel-wrapper a { color: #b6000e; text-decoration: none;}
.panel-wrapper img.item { float: right; display: inline; margin-right: 20px;}

/********************************************************************************
			MAIN NAVIGATION
********************************************************************************/

/* -- main nav -- */
#main-nav-wrapper { float: right; display: inline; width: 710px; margin: 20px 0;}
#nav-top { width: 710px; height: 10px; background: url(../images/nav-corners.png) no-repeat 0 0; overflow: hidden;}
#nav-bottom { width: 710px; height: 10px; background: url(../images/nav-corners.png) no-repeat 0 -10px; overflow: hidden;}
#main-nav { width: 710px; background: url(../images/transparent-bg.png); text-align: center; padding: 10px 0;}
	#main-nav li { display: inline; padding: 0 20px;}
		#main-nav a { font: normal normal 22px/100% "Helvetica Neue", Helvetica, Arial, sans-serif; color: #424242; text-decoration: none; text-transform: uppercase;}
		#main-nav a:hover, #main-nav a#active { color: #b6000e;}

/********************************************************************************
			LEFT COLUMN CONTENT
********************************************************************************/

/* left column rounded corners */
#left-column-top { width: 720px; height: 10px; background: url(../images/left-column-top.png) no-repeat; position: absolute; left: 0; top: -10px;}
#left-column-bottom { width: 720px; height: 10px; background: url(../images/left-column-bottom.png) no-repeat; position: absolute; left: 0; bottom: -10px;}

/* left column rounded corners - no sidebar */
#cart-page #left-column-top { width: 960px; height: 10px; background: url(../images/left-column-top-large.png) no-repeat; position: absolute; left: 0; top: -10px;}
#cart-page #left-column-bottom { width: 960px; height: 10px; background: url(../images/left-column-bottom-large.png) no-repeat; position: absolute; left: 0; bottom: -10px;}


.left-column ul { list-style: disc; margin: 0 0 1.25em 65px;}
.left-column ol { list-style: decimal; margin: 0 0 1.25em 65px;}
.left-column ol.faq { margin-left: 55px;}
.left-column p { padding-left: 30px; padding-right: 30px;}
.left-column .callout { width: 630px; background: #e5e5e5; font-size: 24px; color: #424242; text-align: center; padding: 15px; margin: 0 auto 15px;}
.left-column ol.faq .callout { width: 590px; font-size: 12px; text-align: left; margin: 10px 0;}

/* content table */
.left-column .content-table { margin: auto;}
.left-column .content-table .alt-row { background: #f1f1f1;}
.left-column .content-table td { padding: 5px;}

/* -- contact us form (contact page only) -- */
.left-column #contact { padding: 0 30px 30px;}
	.left-column #contact label { font-size: 14px; color: #343132; padding-left: 15px;}
	.left-column #contact label.error { font-style: normal; font-weight: normal; font-size: 9px; color: #fe0000; position: absolute; left: 0; bottom: -25px;}
	.left-column #contact div.textarea label.error { bottom: -95px;}
	.left-column #contact .input.corners { width: 648px; height: 23px; background: #ffffff; border: #000000 solid 1px; padding: 5px; margin: 5px 0 20px;}
	.left-column #contact div.two-column { float: left; display: inline; margin-right: 10px;}
	.left-column #contact div.two-column .input.corners { width: 313px;}
	.left-column #contact div.three-column { float: left; display: inline; margin-right: 10px;}
	.left-column #contact div.three-column .input.city.corners { width: 275px;}
	.left-column #contact div.three-column .input.state.corners { width: 225px;}
	.left-column #contact div.three-column .input.zip.corners { width: 104px;}
	.left-column #contact .textarea.corners { width: 648px; height: 150px; background: #ffffff; border: #000000 solid 1px; padding: 5px; margin: 5px 0 20px;}
		.left-column #contact input, #contact textarea { width: 100%; background: #ffffff; border: 0; font-size: 14px; padding-top: 2px;}
		.left-column #contact textarea { height: 75px;}
	.left-column #contact .submit { display: block; width: 172px; height: 43px; background: url(../images/contact-us-submit.png) no-repeat; border: 0; padding: 0; margin: 0 0 0 5px;}
	.left-column #contact .submit:hover { background-position: 0 -43px;}

/********************************************************************************
			RIGHT COLUMN CONTENT
********************************************************************************/

/* right column rounded corners */
#right-column-top { width: 240px; height: 10px; background: url(../images/right-column-corners.png) no-repeat 0 0; position: absolute; left: 0; top: -10px;}
#right-column-bottom { width: 240px; height: 10px; background: url(../images/right-column-corners.png) no-repeat 0 -10px; position: absolute; left: 0; bottom: -10px;}

/* this controls the sidebar section headers */
.right-column span {
	display: block;
	font-size: 18px;
	line-height: 100%;
	color: #FF0000;
	padding-top: 0;
	padding-right: 5px;
	padding-bottom: 1.25em;
	padding-left: 10px;
}

.right-column p { padding: 0 20px;}
.right-column ul { font-size: 13px; line-height: 2; color: #ffffff; padding: 0 0 30px 25px;}
	.right-column ul a { color: #ffffff; text-decoration:  none;}
	.right-column ul a:hover { text-decoration: underline;}
#required { font-size: 9px; color: #b6000e; position: relative; top: -25px;}

/* -- search box -- */
#search { padding: 0 20px 30px;}
	#search .corners { float: left; width: 112px; height: 23px; background: #ffffff; border: 0; padding: 5px; margin: 5px 0 0 5px;}
		#search input { width: 100%; background: #ffffff; border: 0; font-size: 14px; padding-top: 2px;}
	#search .submit { float: left; display: block; width: 42px; height: 33px; background: url(../images/search-submit.png) no-repeat; border: 0; padding: 0; margin: 5px 0 0 8px;}
	#search .submit:hover { background-position: 0 -33px;}

/* -- contact us form -- */
#contact { padding: 0 20px 30px;}
	#contact label { font-size: 14px; color: #ffffff; padding-left: 15px;}
	#contact label.error { font-style: normal; font-weight: normal; font-size: 9px; color: #fe0000; position: absolute; left: 0; bottom: -25px;}
	#contact div.textarea label.error { bottom: -20px;}
	#contact .input.corners { width: 162px; height: 23px; background: #ffffff; border: 0; padding: 5px; margin: 5px 0 20px 5px;}
	#contact .textarea.corners { width: 162px; height: 75px; background: #ffffff; border: 0; padding: 5px; margin: 5px 0 20px 5px;}
		#contact input, #contact textarea { width: 100%; background: #ffffff; border: 0; font-size: 14px; padding-top: 2px;}
		#contact textarea { height: 75px;}
	#contact .submit { display: block; width: 172px; height: 43px; background: url(../images/contact-us-submit.png) no-repeat; border: 0; padding: 0; margin: 0 0 0 5px;}
	#contact .submit:hover { background-position: 0 -43px;}
	
/********************************************************************************
			BLOG CONTENT
********************************************************************************/

.post { padding: 0 30px; margin-bottom: 35px; position: relative;}
.post h2 { padding-left: 0;}
.post p { padding-left: 0; padding-right: 0;}
.date-icon { margin-right: 5px; position: relative; bottom: -3px;}
.comment-icon { margin-right: 5px; position: relative; bottom: -5px;}
.tweet { position: absolute; right: 30px; top: -4px;}
.post-image { border: #000000 solid 5px; margin: 10px 0;}
.read-more { height: 25px; border-bottom: #cccccc solid 1px; line-height: 26px; padding-bottom: 6px;}
	.read-more span { width: 250px; background: #cccccc; padding: 8px 10px;}
	.read-more span:hover { background: #333333; color: #ffffff;}
	.read-more a { color: #343132; text-decoration: none;}
		.read-more span img { position: relative; left: 2px; top: 6px;}

/********************************************************************************
			PRODUCT DISPLAY
********************************************************************************/

/* store page */
.products { padding-left: 15px;}
.product-wrapper { float: left; display: inline; width: 210px; margin: 0 0 25px 15px; position: relative;} /* wraps all product info (image, info, price, sale tag) */
	.product-wrapper .corners { width: 190px; background: #000000; padding: 10px;}
	.product-wrapper .product-image { border: #940005 solid 4px;}
	.product-info { display: block; width: 190px; font-weight: bold; font-size: 14px; color: #940005; text-align: center; padding: 5px 10px 0;}
		.product-info h4 { display: inline; font-weight: normal; color: #000000; padding: 0;} /* product name is wrapped in h4 tag */
	.sale { position: absolute; left: -10px; top: -10px;} /* positions sale tag relative to .product-wrapper */
		
/* latest items (on home page) */
.latest-items.corners { width: 655px; background: #e6e6e6; border: #424242 solid 1px; padding: 15px 0 15px 5px; margin: 0 auto 15px auto;}
.latest-items .product-wrapper { width: 190px; margin: 0 0 0 20px;}
	.new-item { position: absolute; left: -10px; top: -10px;} /* positions new item tag relative to .product-wrapper */

/********************************************************************************
			SINGLE PRODUCT PAGE
********************************************************************************/

/* -- inside-left (left column) -- */
#slider { border: #000000 solid 5px; position: relative;}
#slider ul { list-style: none; margin: 0; padding: 0; font-size: 1px; line-height: 1px;}
#controls { width: 320px; background: #000000; padding: 10px 0; margin: 10px 0 0; text-align: center;}
 	#controls li { display: inline; margin-right: 20px;}
	#controls li:last-child { border-right: none; padding-right: none;}
	#controls a { color: #ffffff; text-decoration: none;}
#additional-images { padding-top: 20px;}
#additional-images span { display: block; font-weight: bold; font-size: 16px; color: 000000; padding-bottom: 5px;}
#additional-images ul { list-style: none; margin: 0; padding: 0;}
	#additional-images li { float: left; display: inline; margin-right: 10px;}
	#additional-images img { border: #000000 solid 5px;}

/* -- inside-right (right column) -- */
.inside-right h1 { padding-left: 0;}
.inside-right span { display: block; font-size: 18px; margin-bottom: 15px;} /* product price */
	.inside-right span span { display: inline; color: #b6000e;} /* On Sale */
.inside-right p { padding-left: 0; padding-right: 0;}
#add-to-cart .submit { display: block; width: 282px; height: 43px; background: url(../images/add-to-cart-button.png) no-repeat;
					   border: 0; padding: 0; margin: 0;}
#add-to-cart .submit:hover { background-position: 0 -43px;}


/********************************************************************************
			SHOPPING CART PAGE
********************************************************************************/

/* -- cart titles section -- */
#cart-titles { width: 900px; background: #000000; padding: 10px 0; margin: 0 auto 15px auto;}
#cart-titles { font: normal normal 16px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; text-align: center;}
#cart-titles div { float: left; display: inline; text-align: center;}
#cart-titles .item { width: 56%;}
#cart-titles .price { width: 11%;}
#cart-titles .quantity { width: 10%;}
#cart-titles .total { width: 11%;}
#cart-titles .remove { width: 14%;}

/* -- cart items -- */
#cart-items { margin: auto;}
#cart-items .alt-row { background: #f1f1f1;}
#cart-items td { border-right: #cccccc solid 1px; padding: 15px 0; vertical-align: middle;}
#cart-items td.remove { border: 0;}
#cart-items img { float: left; display: inline; border: #000000 solid 5px; margin: 0 20px 0 15px;}

/* -- cart item typography */
#cart-items .item-info  { font-weight: bold; font-size: 16px; line-height: 18px; color: #000000;}
	#cart-items .item-info span { font-weight: normal; font-size: 14px;}
	#cart-items .price, #cart-items .quantity, #cart-items .total { font-size: 18px;}
	#cart-items .price, #cart-items .total { color: #b6000e;}
	#cart-items .item-info a { font-weight: bold; font-size: 12px; color: #b6000e; text-transform: uppercase; text-decoration: none;}

/* -- cart total price -- */
#cart-price { float: right; display: inline; font-size: 16px; color: #000000; margin: 15px 160px 0 0;}
	#cart-price span { font-weight: bold; font-size: 18px; color: #b6000e; padding-left: 25px;}

/* -- update cart section -- */
#update-cart { float: right; width: 20%; background: #000000; text-align: center; padding: 10px; margin: 15px 30px 0 0; clear: both;}
#update-cart a { font: normal bold 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #b6000e; text-transform: uppercase; text-decoration: none;}
#update-cart a:hover { color: #fe0000;}

/* -- proceed to checkout -- */
#proceed-to-checkout { float: right; display: inline; width: 450px; font-size: 16px; line-height: 43px; margin: 15px 30px 0 0; clear: both;}
	#proceed-to-checkout a { color: #b6000e; text-decoration: none;}
	#proceed-to-checkout a:hover { text-decoration: underline;}
button#checkout { float: right; display: block; width: 272px; height: 43px; background: url(../images/proceed-to-checkout-button.png) no-repeat;
				  border: 0; text-indent: -999em; border: 0; margin-left: 10px;}
button#checkout:hover { background-position: 0 -43px;} 

		
/********************************************************************************
			FOOTER
********************************************************************************/

#footer-top { width: 960px; height: 10px; background: url(../images/footer-corners.png) 0 0; margin-top: 20px; clear: both;}
#footer-bottom { width: 960px; height: 10px; background: url(../images/footer-corners.png) 0 -10px; margin-bottom: 20px;}
#footer { width: 960px; background: url(../images/transparent-bg.png); font: normal normal 12px/1.5 Helvetica, Arial, sans-serif; color: #ffffff; text-align: center; padding: 5px 0;}
	#secondary-nav { margin-bottom: 10px;}
		#secondary-nav li { display: inline; border-right: #ffffff solid 1px; padding-right: 5px; margin-right: 5px;}
		#secondary-nav li#last { border: none;}
		#secondary-nav a { color: #ffffff; text-decoration: none;}
		#secondary-nav a:hover { text-decoration: underline;}
	#footer p { padding: 0 20px;}
	#legal { font-size: 10px; line-height: 12px;}
	
/********************************************************************************
			CLEARING ELEMENTS THAT CONTAIN FLOATED ELEMENTS
********************************************************************************/

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

/* Hides from IE-mac \*/

* html .clear-float { height: 1%;}

.clear-float { display: block;}

/* End hide from IE-mac */