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

	Client: SpecialK
	
	This stylesheet should contain styles only
	being used in the promotions pages on 
    the Special K project!
	
	REMEMBER TO KEEP IT CLEAN, EASY TO READ,
	AND IN THE DOCUMENT FLOW!
	
	Thanks!

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

/****** H1 Blue Headers *****/

div.bodycontent h1{
	height: 90px;
    margin: 0 0 8px;
    width: 980px;
}

h1#h1-save-on-products {
    background: url(../i/blue-headers/couponsheader.jpg) no-repeat;
}

h1#h1-ten-minutes {
    background: url(../i/blue-headers/promodvdheader.jpg) no-repeat;
}

h1#h1-try-these-on {
    background: url(../i/blue-headers/jeanspromoheader.jpg) no-repeat;
}

/******** Coupons Page ********/
#coupon-left-col{
	float: left;
	display: inline;
	width: 433px;
	position: relative;
	background: url(../i/coupons/left-product-bg.gif) left top no-repeat;
	height: 352px;
}

#left-drop-shadow{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 381px;
	width: 459px;
	background: url(../i/coupons/left-drop-shadow.png) left top no-repeat;
}

#white-box-overlay{
	position: absolute;
	left: 0px;
	bottom: -10px;
	height: 65px; /*85 - padding*/
	width: 348px; /*369 - padding*/
	padding: 20px 20px 0px 0px;
	background: url(../i/coupons/white-box-overlay.png) left top no-repeat;
}

#white-box-overlay #sign-up-news-promotions{
	background: url(../i/coupons/sign-up-news-promotions.gif) left top no-repeat;
	height: 21px;
	width: 321px;
	float: right;
	margin-bottom: 4px;
}

#white-box-overlay #sign-up-now-btn{
	background: url(../i/coupons/sign-up-now-btn.gif) left top no-repeat;
	display: block;
	height: 30px;
	width: 137px;
	float: right;
}

#white-box-overlay #sign-up-now-btn:hover{
	background-position: left bottom;
}

#coupon-right-col{
	float: left;
	display: inline;
	width: 547px;
}

.coupon{
	height: 117px;
	background-color: #f7f9fc;
}

.coupon.alt{
	background-color: #e9f0f7;
}

.coupon .coupon-image{
	float: left;
	padding: 0px 20px;
}

.coupon .coupon-text{
	float: left;
	padding: 20px;
	width: 365px;
}

.coupon .coupon-text .coupon-title{
	font-size: 12px;
	color: #363636;
	margin-bottom: 0px;
}

.coupon .coupon-text .coupon-description{
}

.coupon .coupon-text .print-now-btn{
	display: block;
	height: 25px;
	width: 112px;
	background: url(../i/coupons/print-now-btn.gif) left top no-repeat;
}

.coupon .coupon-text .print-now-btn:hover{ background-position: left bottom; }


/******** DVD Page ***********/

#dvd-left-col{
	width: 432px;
	height: 345px;
	float: left;
	display: inline;
	background: url(../i/coupons/promo-large-left.jpg) left top no-repeat;
	position: relative;
}

#dvd-left-col-dropshadow{
	background: url(../i/coupons/promo-left-dropshadow.png) left top no-repeat;
	position: absolute;
	height: 360px;
	width: 449px;
	z-index: 10;
}

#dvd-right-col{
	width: 548px;
	height: 345px;
	float: left;
	display: inline;
	background: url(../i/coupons/free-dvd-bg.gif) left top no-repeat;
	position: relative;
	z-index: 5;
}

#promo-videos{
	position: absolute;
	right: 40px;
	top: 100px;
	height: 60px;
	width: 258px;
}

#promo-videos a#promo-video-1, #promo-videos a#promo-video-2{
	display: inline;
	float: left;
	height: 79px;
	width: 122px;
	background: left top no-repeat;
	margin: 0 3px 8px 0;
}

#promo-videos a#promo-video-1{background-image: url(../i/coupons/promo-video-1.jpg);}

#promo-videos a#promo-video-2{background-image: url(../i/coupons/promo-video-2.jpg);}

#promo-videos p{
	font-size: 11px;
	color: #666666;
	margin-bottom: 0;
}
#promo-videos p span{ font-size: 16px; }
#promo-videos a {
	font-size: 8px;
	color: #4e86bb;
	text-decoration: underline;
}
#promo-videos a:hover{ text-decoration: none; }

#promo-videos p.tiny{ font-size: 8px; }

#download-mail-in-order-form-btn{
	display: block;
	height: 39px;
	width: 379px;
	position: absolute;
	right: 70px;
	bottom: 50px;
	background: url(../i/coupons/download-mail-in-order-form-btn.gif) left top no-repeat;
}

#download-mail-in-order-form-btn:hover{ background-position: left bottom; }





/******** Jeans Page ***********/

#jeans-left-col{
	width: 432px;
	height: 345px;
	float: left;
	display: inline;
	background: url(../i/coupons/jeans-large-left.jpg) left top no-repeat;
	position: relative;
}

#jeans-left-col-dropshadow{
	background: url(../i/coupons/promo-left-dropshadow.png) left top no-repeat;
	position: absolute;
	height: 360px;
	width: 449px;
	z-index: 10;
}

#jeans-right-col{
	width: 548px;
	height: 345px;
	float: left;
	display: inline;
	background: url(../i/coupons/jeans-bg.gif) left top no-repeat;
	position: relative;
	z-index: 5;
}

#jeans-right-col #download-mail-in-order-form-btn{
	display: block;
	height: 39px;
	width: 379px;
	position: absolute;
	right: 70px;
	bottom: 50px;
	background: url(../i/coupons/download-mail-in-order-form-btn.gif) left top no-repeat;
}

#jeans-right-col #download-mail-in-order-form-btn:hover{ background-position: left bottom; }