

/*--------------------------------------------------

	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#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: 338px;
	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 -7px 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.jpg) left top no-repeat;
	position: relative;
	z-index: 5;
}

#promo-videos{
	position: absolute;
	right: 14px;
	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: 12px;
	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: 65px;
	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; }


/*Questionary Page */

#questionnaire-content{
    color:#7E7E7E;
    width:506px;
    font-family:arial,helvetica,sans-serif;
}

#questionnaire-content h1{
    font-size:16px;
    font-weight:bold;
}
#questionnaire-content h2{
    font-size:12px;
    font-weight:bold;
    border-bottom:1px solid #F2F2F2;
    padding: 8px;
}

#questionnaire-content p{
    line-height:1.3em;
    margin:0 0 0.8em;
    font-size:12px;
}
#questionnaire-content label{
    font-size:12px;
}
#questionnaire-content ul{
    padding:0 0 0 20px;
}
#questionnaire-content ul li{
    margin:5px 0 5px 0;
}
#questionnaire-content #disclaimer, 
#questionnaire-content .instructions{
    background-color:#F2F0F1;
    padding:5px;    
}
#questionnaire-content #disclaimer a{
    text-decoration: underline;
    color: #f00;
}
#questionnaire-content p.input{
    width:490px;
    height: 10px;
    padding:5px;

}
#questionnaire-content p.input input{
    float: right;
}
#questionnaire-content ul#first-items li label{
    width:120px;
    display:block;
    float:left;
}

/**
* Welcome page
*/
#welcome-left
{
    width:400px;
    height:195px;
    float:left;
}
#welcome-left h2
{
    background: url(/_res/i/wwyg/welcome.title.png) top left no-repeat;
    text-indent: -1000em; 
    width:258px;
    height:49px;
    float:right;
    margin: 0 10px 0 0;
}
#welcome-left p
{
    background: url(/_res/i/wwyg/welcome.text.png) top left no-repeat;
    text-indent: -1000em; 
    width:258px;
    height:50px;
    float:right;
    margin: 0 10px 0 0;
}
#welcome-left img
{
    float:left;
}
    
#welcome-features
{
    width:270px;
    height:80px;
    float:right;
}
#welcome-features li
{
    float:left;
    height:80px;
    width:50px;
    margin:0 14px 0 0;
    text-indent: -1000em; 
}
#welcome-features-easy
{
     background: url(/_res/i/wwyg/welcome.easy.png) top left no-repeat;
}
#welcome-features-tasty
{
     background: url(/_res/i/wwyg/welcome.tasty.png) top left no-repeat;
}
#welcome-features-helpful
{
     background: url(/_res/i/wwyg/welcome.helpful.png) top left no-repeat;
}
#welcome-features-progress
{
     background: url(/_res/i/wwyg/welcome.progress.png) top left no-repeat;
}

#welcome-border
{
    clear:both;
    width:416px;
    height:40px;
    margin: 30px 0 0 0;
    background: url(/_res/i/wwyg/welcome.border.png) bottom left no-repeat;
}

#welcome-right
{
    width:500px;
    height:300px;
    float:right;
}
#welcome-right-content > img
{
    float:left;
}
#welcome-right-content h3
{
    font-weight:bold;
    font-size:16px;
    color:#767676;
    width:100%;
}
#welcome-right-content div
{
    float:right;
    width:315px;
    height:350px;
}
#welcome-right-content p
{
    margin:0 0 15px 0;
}
#welcome-right-content .welcome-text1
{
    font-size:12px;
    color:#000;
    font-weight:bold;
}
#welcome-right-content .welcome-text2
{
    font-size:11px;
    color:#767676;
    font-weight:bold;
    width:205px;
}
#welcome-right-content .welcome-text3
{
    font-size:11px;
    color:#000;
}
#welcome-right-content .welcome-text3 a:link
{
     color:#767676;
     text-decoration:underline;   
}
#no-coupon-text {
 position:relative;
 top:180px;
 left:30px;
}

