/**
 * core.css
 * CSS File for the Holiday 2009 Web Site.
 * @package merrycrimbo
 * @author Tony Collings
 * @version 1.0 
 * @date Oct 2009
 */

 
/* Notes : Z-INDEX ORDERS

1 - Fancy background
2 - Global wrapper
10 - Footer (Only to allow shadow effect)
200 - Overlay popups (email, quick view etc...)


/*	HTML OVERRIDES
	------------------------------------------------------------- */

	body {margin: 0px; padding: 0px; text-align: center; color: #34505c; /* Blue/Green */
		background: #fafafa url('img/bk-gradient.jpg') top left repeat-x;
		font: 12px/18px Arial, Verdana, sans-serif;
	}
	a {color: #942b27; text-decoration: none; }
	a:hover {color: #942b27; text-decoration: underline; }
	h1,h2,h3 {}
	ul, ol, li, form { margin: 0px; padding: 0px; }
	

 
/*	MODIFIERS
	------------------------------------------------------------- */
	.clear {clear: both; line-height: 1px; height: 1px; font-size: 1px; }
	.red-text {color: #942b27; }
	.slategrey-text {color: #3d3f3e; }
	span.dotted-rule {display: block; border: 0px; height: 5px; background: #e3ebed url('img/dotted-rule.gif') top left repeat-x; 
		margin: 12px 0px; clear: both; margin-left: 2px; 
	}
	div.retail-price span.dotted-rule {background: #fff url('img/qv_dots.gif') top left repeat-x; }
	img.icon {vertical-align: middle; margin-right: 5px;  }
	h1.title-bar { display: block; padding: 0px 10px; margin: 0px; font-size: 14px; cursor: pointer; height: 23px; line-height: 23px; vertical-align: middle; background: #cdced0 url('img/title-bar-gradient.jpg') top left repeat-x; }
	
	h1.disabled {cursor:auto; color: #d5d5d5; text-shadow: #fff 1px 1px 0px; /* Requires CSS3 aware browsers FF/Safari/Chrome etc.., sorry IE ! *evil* */ }
	h1.disabled a{color: #d5d5d5; text-decoration: none; }
	h1.disabled a:hover{color: #942b27; text-decoration: underline; text-shadow: none;}
	
	
	/* The Halo effect on Quick View (Will not show on IE6 (_background: none) this is deliberate) */
	.halo-bg{
		position:				absolute;
		width:					33px;
		height:					40px;
	}
	
	.halo-bg-n{
		left:					0;
		top:					-40px;
		width:					100%;
		background:				url("img/halo/bg_n.png") repeat-x;
		_background: none; 
	
	}
	.halo-bg-ne{
		right:					-33px;
		top:					-40px;
		background:				url("img/halo/bg_ne.png") no-repeat;
		_background: none; 
	
	}
	.halo-bg-e{
		right:					-33px;
		top:					0;
		height:					100%;
		background:				url("img/halo/bg_e.png") repeat-y;
		_background: none; 
	
	}
	.halo-bg-se{
		right:					-33px;
		bottom:					-40px;
		background:				url("img/halo/bg_se.png") no-repeat;
		_background: none; 
	}
	.halo-bg-s{
		left:					0;
		bottom:					-40px;
		width:					100%;
		background:				url("img/halo/bg_s.png") repeat-x;
		_background: none; 
	}
	.halo-bg-sw{
		left:					-33px;
		bottom:					-40px;
		background:				url("img/halo/bg_sw.png") no-repeat;
		_background: none; 
	}
	.halo-bg-w{
		left:					-33px;
		top:					0;
		height:					100%;
		background:				url("img/halo/bg_w.png") repeat-y;
		_background: none; 
	}
	.halo-bg-nw{
		left:					-33px;
		top:					-40px;
		background:				url("img/halo/bg_nw.png") no-repeat;
		_background: none; 
	
	}


/*	LAYOUT
	------------------------------------------------------------- */

	/* Fancy Backgrounds */
	div#background-wrapper{
		position: absolute; 
		z-index: 1; 
		left: 50%; margin-left: -492.5px; /* 991px graphic.width / 2 */
		background:#8abecc url('img/static-flash-bk.jpg') top left repeat-x; 
		width: 991px; height: 374px; 
	}

	/*
	div#background-wrapper .background {
		position: absolute; 
		width: 991px; 
		height: 374px; 
	}
	*/
	div#background_0 {background: #8fc0d1 url('img/backgrounds/bk_image1.jpg') top left no-repeat; }
	div#background_1 {background: #8fc0d1 url('img/backgrounds/bk_image2.jpg') top left no-repeat; }
	div#background_2 {background: #8fc0d1 url('img/backgrounds/bk_image3.jpg') top left no-repeat; }
	div#background_3 {background: #8fc0d1 url('img/backgrounds/bk_image4.jpg') top left no-repeat; }
	div#background_4 {background: #8fc0d1 url('img/backgrounds/bk_image5.jpg') top left no-repeat; }
	/* END Fancy Backgrounds */


	#global-wrapper {
		text-align: left; 
		position: absolute; 
		z-index: 2; /* z-index floated to allow for background */
		left: 50%; margin-left: -305px; /* Positions center */
		width: 610px;  _border: 1px solid #7997a5; /* For IE6 ONLY since it has no PNG support (fancy shadows); */
	}
	

	
	
	
	#cookie-warning {padding: 8px; color: #fff; background-color:  #942b27; border: 1px solid #fff; margin: 10px 0px;  }
	
	#header {background-color: #3c606e; height: 51px; padding: 8px; /* 51 + 8 = 69px height */  }
	
	#header .header-left {float: left; text-align: left; padding: 5px 0px 0px 10px; }
	#header .header-right {float: right; text-align: right;  _margin-bottom: -10px;  }
	#header a#conair-logo {display: block; clear: both; }
	#header ul#site-nav {display: block; margin: 0px;
		margin-top: 21px; /* Adjust to fake bottom align */ 
		padding: 0px; 
		float: right; 
		list-style-type: none; 
		font-weight: bolder;
		font-size: 11px; 
	}
	ul#site-nav li {display: block; margin-left: 2px; float: left; height: 20px; width: 102px; line-height: 20px; vertical-align: middle;  background: #fff url('img/tab.jpg') top left repeat-x; text-align: center;   }
	ul#site-nav li.selected {background: #fff url('img/tab-selected.jpg') top left repeat-x; }

	
	#footer {
		z-index: 10; 
		position: absolute; /* Has to be 'lifted' to allow shadow to drop in behind */ 
		width: 600px; 
		color: #8096a1; 
		text-align: right; 
		padding-top:10px; 
		text-shadow: #e0e9ec 1px 1px 0px; /* Requires CSS3 aware browsers FF/Safari/Chrome etc.., sorry IE ! *evil* */  
	}
	#content {margin: 0px; padding: 16px; background-color: #fff; }
	

	

	/* Gift Finder */

	body#index #content{padding-top: 0px; }
	body#index .skip-link {padding: 2px 0px; text-align: right; font-size: 11px; font-weight: bolder; }
	
	div#finder-wrapper {background-color: #e3ebed; padding: 10px; margin: 0px;  }
	div#finder-wrapper h2 {font-size: 12px; margin: 0px;}
	div#finder-wrapper p {margin: 0px; margin-top: 5px; line-height: 15px; width: 540px;  }
	div#finder-columns {clear: both; width: 558px; /* 610 -32padding -20 padding */margin: 0px; }
	.finder-left {float: left; width: 250px; padding-left: 20px; text-align: left; }
	.finder-right {float: right; width: 265px; padding-right: 10px; text-align: right; }
	
	
	ul.gender-choices {display: block; clear: both; margin: 0px; padding: 0px; list-style-type: none; margin-left: -5px;  }
	ul.gender-choices li {display: inline; margin: 0px; padding: 0px; padding-right: 10px;  }
	ul.gender-choices li input {vertical-align: middle; margin-top: 0px; }
	
	ul.prices {display: block; clear: both; height: 20px; /* Height of corner gfx */ }
	ul.prices li {display: block; height: 20px; line-height: 20px; vertical-align: middle; float: left; background-color: #5c7381; color: #fff; padding: 0px; margin: 0px; width: 75px; text-align: center;  }
	ul.prices li.firstitem {border-right: 1px solid #fff; background: #5c7381 url('img/price-left.jpg') top left no-repeat;  }
	ul.prices li.lastitem {border-left: 1px solid #fff; background: #5c7381 url('img/price-right.jpg') top right no-repeat;}
	ul.prices li.selected {background-color:#920f14;}
	ul.prices li#option_1.selected {background: #920f14 url('img/price-left-over.jpg') top left no-repeat;}
	ul.prices li#option_3.selected {background: #920f14 url('img/price-right-over.jpg') top right no-repeat;} 
	ul.prices li:hover {background-color:#920f14;}
	ul.prices li#option_1:hover {background: #920f14 url('img/price-left-over.jpg') top left no-repeat;}
	ul.prices li#option_3:hover {background: #920f14 url('img/price-right-over.jpg') top right no-repeat;}
	
	input#find-button{display: block; clear: both; margin: 8px 0px 0px 152px;  /* Fake right align */}
	
	/* Product Results */
	body#index div#products {margin-top: 8px; }
	div#products .product {float: left; }
	div#products .product span.product-image {display: block; border: 1px solid #9ab2be; margin-right: 9px; margin-bottom: 12px; }
	div#results-wrapper {background-color: #e3ebed; padding: 10px 0px 10px 15px;  min-height: 250px; /* So it ALWAYS sits below the 'fold' in the bg-graident */}
	
	

	/* View All */
	body#view-all #products {padding: 8px 0px 8px 12.5px; background-color: #e3ebed; min-height: 250px; /* So it ALWAYS sits below the 'fold' in the bg-graident */ }

	
	/* Gift List */
	body#gift-list div#gift-col-wrapper{margin-top: 8px; min-height: 250px; /* So it ALWAYS sits below the 'fold' in the bg-graident */ }
	body#gift-list div.gift-left-col{float: left; width: 303px; padding: 10px; } 
	body#gift-list div.gift-right-col{float: right; width: 235px; background-color:#e3ebed; padding: 10px;  }
	body#gift-list #products {}
	body#gift-list #products .product {border-bottom: 1px solid #eaeaea; width: 303px; padding: 10px 0px;  }
	body#gift-list #products div.first-product {padding-top: 0px; }

	body#gift-list .product-left-col {float: left; width: 69px; margin-right: 10px; /* width of image */}
	body#gift-list .product-right-col {float: left; width: 224px; /*  #products .product.width - 69px - 10px margin-right */ }
	body#gift-list div.product-description {display: block; clear: both; margin-bottom: 10px; font-weight: bolder; }
	body#gift-list div.product-model {color: #456f7f;}

	body#gift-list div.price-more {margin-bottom: 10px;   }
	body#gift-list div.price-more span {display: block; float: left; }
	body#gift-list a#learn-more-button {display: block; float: right; height: 15px; margin-top: 3px; width: 72px; /* Dimensions are size of graphic */ }
	
	body#gift-list input#email-submit-button {display: block; clear: both; float: right; margin-top: 10px; }
	body#gift-list input#email-address {width: 223px; }
	
	a.remove-link {color: #3d3f3e; font-size: 10px; }
	a.remove-link:hover {color: #3d3f3e;}
	

	
/*	FORMS	
	--------------------------------------------------------------- */
	form {margin: 10px 0px; clear: both; }
	form dl {clear: both; margin: 0px; padding: 0px; }
	form dl dt {display: block; clear: both; margin: 0px; padding: 0px; }
	label {display: block; }
	input,select,textarea {padding: 3px; font-family: Arial, Helvetica, sans-serif; color: #8c8e8d; }
	
	input.form-button {clear: both; }	
	span.form-error {display: block; clear: both; margin: 8px 0px; color:#942b27; }
	
	
	/*	Form Specific 
		------------------------------ */
		
	/* Gift Finder */
	input#receipient {width: 228px; }
	form#product-selector label {font-weight: bold; color:  #942b27; margin-bottom: 5px; }

/*	OVERLAYS
	--------------------------------------------------------- */
	
	div#bow {position: absolute; top: -15px; left: -15px; }
	div#close-banner {background: #fff url('img/close-gradient.jpg') top left repeat-x; height: 24px; /* height of graphic */; cursor: move; }
	a#close-button {float: right; clear: both; padding-top: 4px; padding-right: 5px; cursor: pointer; }
	div#qv-overlay-wrapper {
		background-color:#fff;
		width: 530px; 
		text-align: left; 
		padding: 0px;
		position:absolute; /* !important */
		top: 100px; 
		left: 50%; margin-left: -265px; /* Puts it in the middle of the page */
		border: 1px solid #668a98;
		z-index:200;
	}
	div.ajaxLoading {margin: 20px; }
	div#qv-overlay-content {  /* Temporary */}
	div#ajax-content .title {background-color: #eef8fa; padding: 5px 15px; margin-top: 10px; color: #456f7f; }
	
	
	div#ajax-content .ajax-left {width: 235px; float: left; padding: 0px 10px 0px 20px; line-height: 14px;  }

	
	div.retail-price {color: #456f7f; font-weight: bolder; margin: 30px 0px;  }
	span.price { color: #942b27; font-weight: normal; font-size: 20px; vertical-align: middle; padding-left: 10px; } 
	
	div#ajax-content .ajax-right {width: 265px; float: right; padding: 10px 0px 20px 0px; }
	span.add-gift {display: block; margin: 0px 0px 5px 0px; }
	

	/* Email Success Overlay */
	div#email-content {padding: 20px; }