/* CSS Document 
*
*	@developer:		Jake Plummer
*	@designer:		Jake Mize
*	@date:			11/19/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;}

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

body { background: url(../images/paper-bg.jpg) repeat-y center top fixed #000000; font: normal normal 11px/1.5em Verdana, Geneva, sans-serif; color: #43433d;}
p { margin-bottom: 1.25em;}
h1 { font-style: italic; font-size: 28px; line-height: 28px; color: #000000; margin-bottom: 1em;}
h2 { font-style: italic; font-size: 22px; line-height: 22px; color: #000000; margin: 1em 0 0.5em;}
h3 { font-style: italic; font-size: 16px; line-height: 16px; color: #000000; margin-bottom: 0.5em;}
.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;}
.img-fix { font-size: 1px;} /* what do you know, a fix for IE!! this fixes the extra space created between an img and the element directly after it */

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

#wrapper { width: 985px; margin: auto;}
.content { width: 960px; padding: 20px 0 0; margin: auto;}
#product-page .left-column { float: left; display: inline; width: 310px; margin-right: 40px;}
#product-page .right-column { float: right; display: inline; width: 610px;}
.content-page .left-column { float: left; display: inline; width: 620px; margin-right: 40px;}
.content-page .right-column { float: right; display: inline; width: 300px;}

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

#header { padding: 20px 0 10px; position: relative;}
#logo { float: left; display: inline; margin-right: 30px;}
#header-graphic { float: left; display: inline;}
#shopping-cart-tab { position: absolute; right: -31px; top: 20px;}

/********************************************************************************
			MAIN NAVIGATION & SEARCH BOX
********************************************************************************/

/* -- main nav -- */
#main-nav-search-box { width: 985px; height: 98px; background: url(../images/main-nav-bg.png) no-repeat;}
#main-nav { padding-left: 15px;}	
	#main-nav li { float: left; display: block;}
		#main-nav a { display: block; font: normal normal 18px/98px Verdana, Geneva, sans-serif; color: #414141; text-decoration: none; padding: 0 30px;}
		#main-nav a:hover, #main-nav a#active { color: #2f92b0;}
		
/* -- search box -- */
#search { float: right; display: inline; padding: 27px 0 0; margin-right: 20px;}
	#search label { float: left; font-size: 14px; line-height: 100%; color: #ffffff; text-transform: uppercase; padding: 15px 0; margin: 0 10px 0 0;}
	#search .corners { float: left; width: 160px; background: #ffffff; padding: 5px; margin: 7px 10px 0 0;}
		#search input { width: 100%; background: #ffffff; border: 0; padding: 5px 0 4px;}
	#search .submit { float: left; display: block; width: 50px; height: 44px; background: url(../images/search-go-button.png) no-repeat; padding: 0; margin: 0;}

/********************************************************************************
			GENERAL CONTENT
********************************************************************************/

.content ul { list-style: disc; margin: 0 0 1.25em 25px;}
img.float-right { border: #000000 solid 4px; margin-top: 4px;}
.content .callout { background: #000000; padding: 10px; font-style: italic; font-size: 20px; line-height: 135%; color: #188866; clear: both;}

/* -- contact us form -- */
#contact { width: 240px; background: url(../images/contact-us-repeat.png) repeat-y; padding: 0 30px 100px;}
	#contact span { display: block; font-style: italic; font-weight: bold; font-size: 23px; line-height: 100%; color: #ffffff; margin-bottom: 0.5em;}
	#contact p { color: #188866;}
	#contact label { font-size: 14px; color: #2f92b0;}
	#contact .two-column { float: left; width: 115px;}
	#contact .two-column.margin-right { margin-right: 10px;}
		#contact .two-column .corners { width: 105px;}
	#contact .corners { background: #ffffff; height: 21px; border: 0; padding: 5px; margin: 5px 0 15px 0;}
		#contact input { width: 100%; background: #ffffff; border: 0; font-size: 14px; padding-top: 2px;}
	#contact .submit { display: block; width: 150px; height: 44px; background: url(../images/contact-us-submit.png) no-repeat; border: 0; padding: 0; margin: 0;}

/********************************************************************************
			MAIN PRODUCT PAGE
********************************************************************************/

.product-wrapper { float: left; display: inline; width: 220px; margin: 0 0 20px 20px; position: relative;} /* wraps all product info (image, info, price, sale tag) */
	.product-image-frame { width: 220px; height: 220px; background: url(../images/product-image-frame.png) no-repeat;}
		.product-image-frame img { margin: 15px 0 0 15px;} /* centers 190px x 190px image in 220px x 220px frame */
		.product-info { width: 220px; height: 29px; background: url(../images/product-info-bg.png) no-repeat;
						font-weight: bold; font-size: 14px; line-height: 27px; color: #74ce73; text-align: center; margin-top: 2px;}
			.product-info h4 { display: inline; font-weight: normal; color: #ffffff;} /* product name is wrapped in h4 tag */
		.sale { position: absolute; left: -10px; top: 30px;} /* positions sale tag relative to .product-wrapper */

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

/* -- left-column -- */
#single-product-image { border: #000000 solid 8px; padding: 2px;}
#image-slider { width: 310px; height: 75px; background: url(../images/image-slider-bg.png) no-repeat; margin: 10px 0 20px;
			    font-size: 16px; line-height: 75px; color: #ffffff; text-align: center; position: relative;}
	#image-slider #previous { position: absolute; left: 30px; top: 32px;}
	#image-slider #next { position: absolute; right: 30px; top: 32px;}
#additional-images img { border: #000000 solid 3px; margin-right: 10px;}

/* -- right-column -- */
h1 span { color: #188966;}
#product-availability { background: #000000; padding: 15px; margin-bottom: 10px;}
	#product-availability span { display: block; font-size: 19px; color: #ffffff; margin-bottom: 1em;}
	#product-availability p { font-style: italic; color: #ffffff; margin-bottom: 0;}
	#product-availability #bar-1 { height: 2px; background: #464646; border-left: #2f92b2 solid 250px; margin: 5px 0;}
	#product-availability #bar-2 { height: 2px; background: #464646; border-left: #2f92b2 solid 450px; margin: 5px 0;}
	#product-availability #bar-3 { height: 2px; background: #464646; border-left: #2f92b2 solid 175px; margin: 5px 0;}
	#product-availability #bar-4 { height: 2px; background: #464646; border-left: #2f92b2 solid 350px; margin: 5px 0;}
#add-to-cart .submit { display: block; width: 230px; height: 44px; background: url(../images/add-to-cart-button.png) no-repeat;
					   border: 0; padding: 0; margin: 0;}


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

/* -- cart titles section -- */
#cart-titles, #update-cart { width: 985px; height: 78px; background: url(../images/cart-section-bg.png) no-repeat;}
#cart-titles { font: normal normal 14px/78px Verdana, Geneva, sans-serif; color: #ffffff; text-transform: uppercase;}

/* -- cart item layout -- */
.item { float: left; display: inline; width: 455px; padding-left: 45px;}
.price { float: left; display: inline; width: 110px;}
.quantity { float: left; display: inline; width: 110px;}
.total { float: left; display: inline; width: 110px;}
.remove { float: left; display: inline; width: 110px; padding-right: 45px;}
#cart-items { width: 940px; margin: auto;}
	#cart-items .item { padding-left: 22px;}
	#cart-items .remove { padding-right: 23px;}
	#cart-items .item-info { border-bottom: #bcbaa6 solid 1px; padding: 15px 0;}
	#cart-items .item-info.last { border-bottom: none;}

/* -- cart item typography */
#cart-items .item-info  { font-size: 16px; line-height: 18px; color: #43433d;}
	#cart-items .item-info a { font-weight: bold; font-size: 12px; color: #a30000; text-transform: uppercase; text-decoration: none;}
#cart-items .quantity { position: relative; left: 30px;} /* this creates a "padding" effect without having to change the width of .quantity */

/* -- update cart section -- */
#update-cart { text-align: right;}
#update-cart a { font: normal bold 14px/78px Verdana, Geneva, sans-serif; color: #75cf73; text-transform: uppercase; text-decoration: none; padding-right: 45px;} 

/* -- checkout form -- */
#checkout { float: right; display: inline; text-align: right; margin: 0 45px 10px 0;}
	#checkout label { display: block; font-size: 16px; color: #43433d; margin: 15px 0;}
	#checkout input { width: 90px; border: #000000 solid 3px; padding: 10px 5px; margin-left: 10px;}
	 #checkout select { font-size: 16px; margin-left: 10px;}
	#checkout .total-price { float: right; display: inline; width: 175px; background: #000000; padding: 10px;}
		#checkout .total-price { font-size: 16px; color: #ffffff;}
		#checkout .total-price span { font-size: 23px; color: #73cc70; padding-left: 5px;}
	#checkout .submit { width: 150px; height: 44px; background: url(../images/checkout-button.png) no-repeat; border: 0; padding: 0; margin: 15px 0 0;}

/********************************************************************************
			FOOTER CATEGORIES
********************************************************************************/

#categories { width: 985px; height: 198px; background: url(../images/categories-bg.png) no-repeat;
			  font-size: 12px; line-height: 150%; color: #414141; margin: 30px 0 0; padding-bottom: 25px; clear: both;}
	#categories ul li.column { float: left; display: inline; border-right: #212121 solid 1px; padding-right: 35px; margin: 40px 0 0 35px;}
		#categories #last { border: 0; padding-right: 0;}
	#categories h2 { font-weight: normal; font-size: 16px; line-height: 105%; color: #2f92b0; margin: 0;}
	#categories ul { margin: 5px 0 0 10px; line-height: 2em;}
		#categories a { color: #414141; text-decoration: none;}
		#categories a:hover { color: #2f92b0;}
		
/********************************************************************************
			FOOTER
********************************************************************************/
 
#footer { width: 960px; font: normal normal 12px/100% Helvetica, Arial, sans-serif; color: #000000; text-align: center; padding: 0;clear: both;}
	#secondary-nav { margin-bottom: 10px;}
		#secondary-nav li { display: inline; padding: 0 5px; border-right: #000000 solid 1px;}
		#secondary-nav li#last { border: none;}
		#secondary-nav a { color: #000000; text-decoration: none;}
		#secondary-nav a:hover { text-decoration: underline;}
	#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 */