/* 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 {
	font: normal normal 11px/1.5em Verdana, Geneva, sans-serif;
}
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;}
a {
	color: #003366;
	text-decoration: none;
}
a:hover {
	color: #333366;
	text-decoration: none;
	text-height: font-size;
}
.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: 1300px;
	margin: 24;
	left: 25px;
	top: 300px;
	position: relative;
}
.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 label.error { font-style: normal; font-weight: normal; font-size: 9px; color: #fe0000; position: relative; top: 2px;}
	#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 20px;}
	#contact .corners.last { margin: 5px 0 10px;}
		#contact input { width: 100%; background: #ffffff; border: 0; font-size: 14px; padding-top: 2px;}
	#contact #required { font-size: 9px; color: #2f92b0;}
	#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: 980;
	position:
	left: -8px;
	top: 0px;
	margin-left: 30px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 20px;
} /* 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: #99FF66;
	text-align: center;
	margin-top: 2px;
}

		.product-info deep {
	width: 220px;
	height: 58px;
	background: url(../images/product-info-bg.png) no-repeat;
	font-weight: bold;
	font-size: 14px;
	line-height: 27px;
	color: #99FF66;
	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: 696px;
	top: -75px;
	width: 191px;
	height: 86px;
	bottom: 417px;
} /* positions sale tag relative to .product-wrapper */

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

/* -- left-column -- */
#slider { border: #000000 solid 8px; padding: 2px; position: relative;}
#slider ul { list-style: none; margin: 0; padding: 0; font-size: 1px; line-height: 1px;}
#controls { 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;}
 	#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 ul { list-style: none; margin: 0; padding: 0;}
	#additional-images li { display: inline; margin-right: 10px;}
	#additional-images img { border: #000000 solid 3px;}

/* -- 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: 20px; 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; border-right: #000000 solid 1px; padding-right: 5px; margin-right: 5px;}
		#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;
	position: absolute;
	left: 190px;
	top: -435px;
	width: 639px;
	height: 274px;
}

/* Hides from IE-mac \*/

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

.clear-float { display: block;}

/* End hide from IE-mac */.tabhead {
	color: #FFF;
}
.images {
	height: 190px;
	width: 190px;
}
.shopallzazzle {
	text-align: center;
	height: 100px;
	width: 600px;
	background-color: #06F;
	color: #FFF;
	font-size: 24px;
}
.tunelist {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	font-style: normal;
	color: #306;
}