/*--------------------------------------------------------------
	SHOP STYLES
	This is the shophousingworks.com style sheet. Here are the
	styles for the unique layout/pages of shophousingworks.
	
	COLORS
	magenta			#cf1974
	gray			#5e6a71
	medGray			#9b9b9b
	darkGray		#3f3f3f
	ltGray			#bfc3cd
	white			#ffffff
--------------------------------------------------------------*/

/*--------------------------------------------------------------
	GENERAL STRUCTURE
	This is the revised structure for the shophousingworks pages
	that have a sidebar.
	
	#primary.fullCol
	shop defaults to always have a left column this will
	allow primary to go full column. Currently only used
	for the checkout pages.
--------------------------------------------------------------*/

#wrapper { margin: 0px auto; width: 960px; }

	#container { width: 960px; float: left; clear: both; background: #fff url(../i/org-sidebarbg.jpg) repeat-y 0 0; }
		#mainNav { width: 960px; clear: both; float: left; }
		#subNav { width: 960px; clear: both; float: left; }
		
		#primary { width: 770px; margin: 10px 0 50px 0; padding: 0; clear: both; float: right; }
			#primary.fullCol { width: 960px; padding:0; margin: 20px 0 0 0; float: left;}
			#standard-col { width: 540px; }
			#minor-col { margin-right: 10px; width: 210px; float: right; }
			
		#secondary { width: 180px; margin: 0; float:left; }
		#footer { clear: both; background: #3f3f3f; }
		
		
		/*--------------------------------------------------------------
			STANDARD TABLE SETTINGS
			For any table that is created it will take on these styles
		--------------------------------------------------------------*/
		
		table {
			background-color: #e3e5ea;
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			clear:both; }
			table p { font-size:100%; }
			table td, th { padding:10px; border-bottom: solid #fff 1px; color: #929ca3; }
			table th { text-transform: uppercase; text-align: left; vertical-align: middle; }
			table img { vertical-align: top; display:inline; }
			
		/*--------------------------------------------------------------
			NAV DROPDOWN
			Drop down menu styles
		--------------------------------------------------------------*/
		
		/* 
			LEVEL ONE
		*/
		#mainNav ul.dropdown						{ margin: 2px 0 0 20px; padding: 0; z-index: 1; position: relative; }
			#mainNav ul.dropdown a:hover			{ color: #3f3f3f; }
			#mainNav ul.dropdown a:active           { color: #3f3f3f; }
			
		#mainNav ul.dropdown li                     { margin: 0 10px 0 0; color: #5e6a71; float: left; zoom: 1; font-family: "Fedra Sans Screen"; font-weight: bold; font-size: 9px; text-transform: uppercase; }
			#mainNav ul.dropdown li a               { padding: 9px 12px 9px; display: block; color: #6a5e5e; cursor: hand; }
			#mainNav ul.dropdown li:hover 			{ background: #78104c; color: #ee77b2; position: relative; }
				#mainNav ul.dropdown li.hover a     { color: #fff; background: none; }
		
		
		/* 
			LEVEL TWO
		*/
		#mainNav ul.dropdown ul 						{ margin: 0; padding: 0 0 5px 0; background: #78104c; width: 170px; visibility: hidden; position: absolute; color: #fff; }
			#mainNav ul.dropdown ul li 					{ margin: 0 12px 0 25px; padding: 0 0 6px 0; cursor: hand; font-family: "Fedra Sans Screen"; list-style: square; color: #fff; font-size: 9px; font-weight: normal; float: none; text-transform: none; }
			#mainNav ul.dropdown ul li:hover 			{ background: none; }
			#mainNav ul.dropdown ul li a				{ margin: 0; padding: 0; width: 100%; display: inline-block; cursor: pointer; color: #fff; } 
			#mainNav ul.dropdown ul li a:hover			{ color: #ee77b2; background: transparent; } 
		
		/* 
			LEVEL THREE
		*/
		ul.dropdown ul ul 					{ left: 100%; top: 0; }
		ul.dropdown li:hover > ul 			{ visibility: visible; }
		
			/*--------------------------------------------------------------
				CART
			--------------------------------------------------------------*/
			
			#mainNav > ul > li.cart { margin: 0; float:right;}

/*--------------------------------------------------------------
	HOME PAGE (index.cfm)
	These are the styles for the shop homepage.
--------------------------------------------------------------*/
	
	#container.home { background: none #fff; }
	#bannerHold { float: left; }
	
	.shwevents h4 { font-size: 11px; }
	.shwevents h5 { font-size: 11px; }
	.minor-box .text .shwevents ul li { font-size: 11px; }
	
	/* for the feature image/slideshow */
	#slider { 
		margin: 0px 0 10px 0;
		width: 760px; height: 300px; 
		background: #000; 
		float: left; }
		
	/*--------------------------------------------------------------
		HOME SIDEBAR (#home-sidebar)
		This is the unique style for the pink listing of categories
		on the main shop homepage.
	--------------------------------------------------------------*/
	
	ul#home-sidebar { 
		position: relative;
		left: -5px;
		margin: 10px 0 0 0;
		padding: 7px 10px 5px 10px;
		background: #cf1974;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px; }
		
		ul#home-sidebar { margin: 10px 0; }
		ul#home-sidebar li { 
			margin: 3px 0 3px 0;
			padding: 3px 0 3px 20px;
			background: transparent url(../i/shw-smArrow.png) no-repeat .5em 5px;
			border-bottom: 1px dotted #db2e84; }
			ul#home-sidebar li a { color: #fff; }
			ul#home-sidebar li a:hover { color: #78104c; }
	
		/*--------------------------------------------------------------
			MINOR-COL DIV (#minor-col)
			On the shop homepage this is the "HAPPENINGS TODAY" module.
			On other pages it contains right side content, 
			like related products.
		--------------------------------------------------------------*/
			
		.minor-box { width: 210px; }
		
			#minor-col.product ul li { width: 98px; margin: 0 0 10px 0; clear: both; }
				#minor-col.product img { margin-bottom: 3px; }
				#minor-col.product ul li > img { margin: -16px 0 0 0; }
				#minor-col.product h6 { margin: 0; font-family: "Fedra Sans Screen"; font-weight: bold; font-size: 11px; }
				#minor-col.product ul li p { margin: 0; font-size: 11px; }
			
	
	/*--------------------------------------------------------------
		NEW ITEMS DIV (#newItems)
		This is the new items module on the shop homepage.
	--------------------------------------------------------------*/
				
	#newItems {
		padding: 10px 0 10px 10px;
		margin: 0 0 1.5em 0;
		width: 520px;
		border: 1px solid #ccc;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		float: left; }
		
		#itemsIntro { width: 85px; height: 100px; float: left; border-right: 1px solid #cdcdcd; }
			#primary #itemsIntro h3 { margin-bottom: 0; background: none; }
			#primary #itemsIntro p { display: block; width: 85px; margin: 5px 0; font-size: 11px; }
		
		#newItems ul li { margin: 0 0 0 7px; float: left; }
			#newItems ul li img { margin-bottom: 4px; }
			#newItems ul li h7 { margin: 0; font-family: "Fedra Sans Screen"; font-weight: bold; font-size: 11px; line-height: 1.2em; }
			#newItems ul li p { margin: 0; font-size: 11px; }
			
			
		/* jcarousel */
		.jacarousel-skin-tango { margin: 0; padding: 0; width: 420px; float: left; }
		.jcarousel-container { margin: 0; padding: 0; width: 420px; height: 105px; display: block; position: relative; }
		.jcarousel-clip { margin: 0; padding: 0;  width: 420px; height: 105px; z-index: 2; overflow: hidden; position: relative; }
		.jcarousel-list { z-index: 1; overflow: hidden; position: relative; }
		.jcarousel-list li, .jcarousel-item { float: left; width: 98px; height: 105px; }
			
	/*--------------------------------------------------------------
		WINDOW SHOPPING DIV (#)
		This is the window shopping/auctions ending soon module.
	--------------------------------------------------------------*/
	
	#windowAuctions { clear: both; margin: 0 0 20px 0; float: left; }
	#windowAuctions h3 { width: 510px; }
	#windowAuctions ul { float: left; width: 538px; }
		#windowAuctions ul li {  width: 98px; margin: 0 12px 0 0; float: left; }
			#windowAuctions ul li + li + li + li + li { margin: 0; }
			#windowAuctions ul li h6 { font-family: "Fedra Sans Screen"; font-weight: bold; margin: -10px 0 0 0; font-size: 11px; }
			#windowAuctions ul li p { margin: 0; font-size: 11px; }
			#windowAuctions ul li img { margin: 0; padding: 0; }
			
			.auction-location-overlay { position:relative; top:-13px; left:0; display:block; }

			
/*--------------------------------------------------------------
	LISTING PAGE (listing.cfm, etc.)
	These are the styles for a listing page.
--------------------------------------------------------------*/

	#primary h3 {
			height: 30px;
			font-family: "Fedra Sans Screen";
			font-weight: bold;
			font-size: 13px;
			text-transform: uppercase;
			background: url(../i/org-shadowrule.png) no-repeat center 20px;
			clear: both; }

	p.more { clear: both; }
	
	/* this should prob be on global... we'll see */
	ul#breadcrumb { font-size: 11px; margin: 5px 0 5px 0; float: left; }
		ul#breadcrumb li { float: left; }
		
	/*bread crumb specific to listing pages*/
	#breadcrumb.listing { width:780px; height: 25px; margin: 0 0 10px -10px; font-size: 11px; border-bottom: solid 1px #e6e6e6; }
		ul#breadcrumb.listing li { padding: 0px 5px 0 10px; }
		ul#breadcrumb.listing li + li { padding: 0px 5px 0 10px; background: #fff url(../i/shw-smArrowGrey.gif) no-repeat 0em 0.9em ; }
		
	/* listing text/sale event info etc. */
	.listingText { width: 780px; margin: 10px 0 0 0; clear: both; float: left; }
	.listingText h3 { margin: 0 0 0.4em 0; line-height: 1.3em; }
		
	/*--------------------------------------------------------------
		LISTING SIDEBAR
		These styles control the side nav, side modules
		that reside in the secondary column.
		ie. search module, social media module, category nav
	--------------------------------------------------------------*/
	
	.listing-sidebar { 
		padding: 10px 10px 10px 20px; 
		border-bottom: solid #eaeaea 1px;
		background: transparent url(../i/shw-listingSideBack.jpg) repeat-y; }
		div.listing-sidebar + div { border-top: solid #fff 1px; }
		.listing-sidebar h4,h5 { font-size: 11px; margin: 0 0 0.6em; }
		.listing-sidebar h6 { text-transform: uppercase; color: #3f3f3f; }
		.listing-sidebar a { text-decoration: none; color: #3f3f3f; }
			.listing-sidebar a:hover { text-decoration: none; color: #5e6a71; }
		.listing-sidebar > p { margin: 0.3em 0 0 0; }
		
		/*--------------------------------------------------------------
			CATEGORY NAVIGATION
		--------------------------------------------------------------*/
		
		.listing-sidebar ul { list-style: none;  }
			.listing-sidebar ul li { margin: 0 0 0.3em 0; padding: 0 0 0 10px; background: url(../i/shw-smArrowGrey.gif) no-repeat left 2px;  }
				.listing-sidebar ul li ul { margin: 0; background: none; list-style: none; }
				.listing-sidebar ul li ul li { margin: 0; background: none; list-style: none; }
		
			.books ul li { font-size: 10px; }
		
		
		/*--------------------------------------------------------------
			SEARCH MODULE
		--------------------------------------------------------------*/
				
		.listing-sidebar input[type="text"] { 
			width:120px;
			height: 14px;
			margin-left: -10px;
			padding: 3px 15px 3px 10px;
			border: solid 1px #eaeaea;
			border-radius: 10px;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			background-color: #ffffff;
			color: #5e6a71;
			display: inline; }
		
		.listing-sidebar input.search-btn { 
			width: 10px;
			height: 18px;
			margin: 0 0 0 -20px;
			display: inline;
			border: none;
			background: #fff url(../i/shw-smArrowGrey.gif) no-repeat center;
			cursor: pointer; }
			
			/* search results */
			h3.sorrySearch { margin-top: 1em; }
			
		/*--------------------------------------------------------------
		BOOKLISTING SIDEBAR (.booklisting)
		This controls the booklisting sidebar 
		--------------------------------------------------------------*/
		
		.booklisting ul li { margin: 0; font-size: 11px; }
		.bookColumn { width: 130px; margin-right: 30px; float: left; }
		.bookColumn li { margin: 0 0 5px 0; }

		
	

	/*--------------------------------------------------------------
		SORT BY / PAGINATION (.view)
		This is a class because it's used multiple times on a page.
		This is the sort by/paging bar on listing pages.
	--------------------------------------------------------------*/
		
	.view a {font-size: 11px; text-decoration: none;}
	.view {
	    height: auto;
	    width: 760px;
	    margin: 10px 0 10px 0;
	    padding: 17px 0 10px 0;
	    background: url(../i/shw-listingRule.jpg) no-repeat top;
	    border-bottom: solid #e6e6e6 1px;
	    float:left;
	    clear: both; }
	
	.sort {width:auto; margin: 4px 0 0 0; float:left;}
		.sort a { display: inline; margin: 0px 0 0 5px;}
		.sort img{display: inline; vertical-align: middle; margin: -5px 0 0 0;}
	
	.viewingNum {width: auto; margin: 3px 0 0 0; text-align: right; float: right;}
		.viewingNum a, .viewingNum p, ul.pageNumbers, ul.pageNumbers li { display: inline; }

		
	/*--------------------------------------------------------------
		PRODUCT LISTING (.productListing)
		This is the class for all the products on a listing page.
	--------------------------------------------------------------*/
	ul.productListing { width: 760px; clear: both; float: left; }
		ul.productListing li { 
			height: 220px;
			width: 180px;
			margin: 0px 10px 10px 0;
			float:left; }
			ul.productListing img { margin-bottom: 8px; }
			ul.productListing > li > img { margin: -26px 0 0 0; }
			ul.productListing li h5 { margin: 8px 0 0 0; font-family: "Fedra Sans Screen"; font-weight: bold; font-size: 13px; }
			ul.productListing li p { margin: 0; font-size: 11px; }
			
	/*--------------------------------------------------------------
		NOTIFICATION
	--------------------------------------------------------------*/

		

/*--------------------------------------------------------------
	ITEM PAGE
	These are the styles for auction and regulart item
	detail pages.
--------------------------------------------------------------*/

#container.product { background: none #fff; }
#primary.product { width:640px; margin: 10px 0 0 0;}
#secondary.product { width: 290px; margin: 20px 10px 50px 20px; background: none;}
#standard-col.product { width: 510px; margin: 0 10px 0 0; }
#minor-col.product { width: 110px; margin: 0; padding: 0 0 0 10px; background: transparent url(../i/shw-relProductsbg.jpg) repeat-y 0 0; }
		
		/*--------------------------------------------------------------
			PRODUCT INFORMATION
			Inside of the secondary column, holds all the information
			about the selected product, including order or biding
			information.
		--------------------------------------------------------------*/
		
		#secondary.product h2 { margin: 0 0 0.4em 0; line-height: 1.2em; } /* item name */
		#secondary.product h3 { font-size: 13px; } /* author */
		
		#productInfo {
			padding: 10px 0  20px 0;
			border-bottom: 3px solid #e6e6e6; }
			#productInfo ul { margin: 0 0 0 5px; }
			#productInfo ul li { list-style: square; margin: 5px 0 0 10px; }
			#productInfo table {width: 290px; }
				#productInfo table th { width: 100px; text-transform: uppercase; text-align: right; vertical-align: middle; }
				#productInfo input[type="text"] { width: 50px; height: 20px; margin: 0 5px 0 0; border: solid 1px #bfc3cd; }
				.currentPrice { display: block; color:#cf1974; }
				.oldPrice { text-decoration: line-through; }
			#productInfo h5 {
				margin: 15px 0 3px 0;
				text-transform: uppercase;
				color: #929ca3; }


		/*--------------------------------------------------------------
			PRODUCT BREADCRUMB
			These are styles for the bread crumb that are specific
			to a product, bid or confirm bid page.
			
		--------------------------------------------------------------*/
			
		#secondary.product #breadcrumb { width:290px; height: 25px; margin: 0 0 0 -10px; }
			#secondary.product #breadcrumb li { padding: 0px 5px 0 10px; }
			#secondary.product #breadcrumb li + li { padding: 0px 5px 0 10px; background: #fff url(../i/shw-smArrowGrey.gif) no-repeat 0em 0.3em; }
		
		/*--------------------------------------------------------------
			ITEM ERROR MESSAGE (.item-errormsg)
		--------------------------------------------------------------*/
		
		.item-errormsg { clear: both; }
		.item-errormsg h3 { font-family: "Fedra Sans Screen"; font-weight: bold; padding: 10px; background: #78104c; color: #fff; }
		
		/*--------------------------------------------------------------
			PRODUCT SOCIAL (.productSocial)
			Contains all social media conections concerning a product.
			ie. 'like' on facebook, tweet it, user reviews
		--------------------------------------------------------------*/
		
		#productSocial { margin: 10px 0 10px 0;}
			#productSocial img { vertical-align:middle; display:inline; }
			#productSocial p a { float: right; }
		
		/*--------------------------------------------------------------
			PRODUCT BANNER (.productBanner)
			Contains banner that is currently featured on a product
			information page. For free shipping, gift cards etc.
		--------------------------------------------------------------*/
		
		#productBanner a img { margin: 10px 0 20px 0; }
		
		
		/*--------------------------------------------------------------
			PRODUCT IMAGES (#productImgs)
			Styles for the large product image and its thumbnails.
		--------------------------------------------------------------*/
		#productImgs {}
			#productMain { margin: 0 0 10px 0; float: left; position: relative; }
			#productImgs ul { margin: 10px 0 0 0; }
			#productImgs li{ float: left; margin: 0 6px 0 0; }
			
			.main-auction-overlay { margin: -24px 0 0 0; position: relative; z-index: 9999;}
			
		/*--------------------------------------------------------------
			Questions (#questions)
			Styles for questions and comments form
		--------------------------------------------------------------*/
		#questions { float: left; margin: 20px 0; width: 510px; }
		
		
		/*--------------------------------------------------------------
			BID NOTICE
			These are the styles for a bid notice, ie. what you see
			after you make the highest bid or raise your bid.	
		--------------------------------------------------------------*/
		#standard-col.bidNotice {  width: 740px; margin: 0; }
			#standard-col.bidNotice table { margin: 20px 0 20px 0; }
			
			#standard-col.bidNotice h5 { margin: 40px 0 5px 0; }
			#standard-col.bidNotice h2 { margin: 20px 0 .8em 0; }
			
		/*--------------------------------------------------------------
			AUCTION WINDOW
			These are the styles for a bid notice, ie. what you see
			after you make the highest bid or raise your bid.	
		--------------------------------------------------------------*/
			
		div.auction-window { margin: 20px 0; clear: both; width: 510px; float: left; }
		div.auction-loc { float: left; margin-left: 15px; width: 200px; }
		
/*--------------------------------------------------------------
	BID (bid.cfm)

--------------------------------------------------------------*/
ul.std li { margin: 0 0 6px 15px; list-style: square; }


/*--------------------------------------------------------------
	HELP (help.cfm)

--------------------------------------------------------------*/
.standard-col { margin: 0 100px 0 50px; }
	.standard-col p { margin: 0 0 0.8em 0; line-height: 1.3em; }
	.standard-col h2 { margin: 20px 0 8px 0; }
	.standard-col h4 { margin: 20px 0 8px 0; }
	.standard-col ol { margin: 0 0 0.8em 0; line-height: 1.3em; }
	.standard-col ol li { margin: 0 0 0.8em 0; line-height: 1.3em; }
	.standard-col ul li { margin: 0 0 0.8em 0; line-height: 1.3em; }


			
/*--------------------------------------------------------------
	Current Auctions (currentAuctions.cfm)

--------------------------------------------------------------*/

div.auction-locations {}
	div.auction-locations ul { }
	div.auction-locations ul li { margin: 10px 10px 10px 0; width: 240px; float: left; }
	div.auction-locations img { margin-bottom: 10px; }
	div.auction-locations h5 { margin: 0 0 5px 0; font-family: "Fedra Sans Screen"; font-weight: bold; font-size: 14px; }


/*--------------------------------------------------------------
	CHECK OUT
	These are the styles for the check out page.		
--------------------------------------------------------------*/
	
	#standard-col.checkout { width: 800px; margin: 0px 0 60px 20px; }
		#standard-col.checkout table {width: 800px;	}
			#standard-col.checkout h5 { font-size:11px; padding: 0; margin: 0px 0 3px 0; text-transform: uppercase; color: #929ca3; }
			#standard-col.checkout table tr td > p { margin: 0 0 3px 0; padding: 0; }
			#standard-col.checkout table th.currentPrice { margin: 0 0 0 10px; display: inline; }
			#standard-col.checkout table input { width: 40px; height: 20px; margin: 0 5px 0 0; border: solid 1px #bfc3cd; vertical-align: middle; }
			#standard-col.checkout table input[type="image"] { width: auto; height:auto; margin: 0 0 0 5px; }
			#standard-col.checkout table select { width: 60px; }
				
		#standard-col.checkout #googleCheckout { width: 165px; float: right; text-align: left; }
			#standard-col.checkout #googleCheckout p { padding: 0 5px; font-size: 11px; line-height: 1em; color: #5e6a71; }
			#standard-col.checkout #googleCheckout table { width:165px; float:right; }
			#standard-col.checkout #googleCheckout table img { margin: 5px 0 0 0; }
			#standard-col.checkout #googleCheckout table input[type="image"] { width: 145px; height:auto; border: none; }


		#checkoutInfo { width:620px; margin: 10px 0 30px 0; float: left; }
			#checkoutInfo ul { margin: 0 0 20px 0; }
			#checkoutInfo li {  width:260px; margin: 0 20px 40px 0; float:left; }
			#checkoutInfo h3 { height: auto; background: none; margin: 0 0 10px 0; padding:0; clear:both; }
			
			#checkoutInfo ul.recent { width: 545px; margin: 0; float:left; }
				#checkoutInfo ul.recent li { width: 98px;; margin: 0 12px 0 0; float: left;  }
				#checkoutInfo ul.recent li + li + li + li + li { margin: 0; }
				#checkoutInfo ul.recent li h6 { margin: 0; font-size: 11px; }
				#checkoutInfo ul.recent li p { margin: 0; padding: 0; font-size: 11px; }