/*

	KILL THE CAN
	-------------

	@file 		home.css
	@version 	1.0.0b
	@date 		2010-01-08 00:07:10 -0500 (Fri, 8 Jan 2010)
	@author 	Jacob Wadenpfuhl <jacob@klosstudio.com>

	Copyright (c) 2010 klos <http://klosstudio.com>

*/
/*************************************
	WELCOME TEXT
**************************************/
#welcomeText {
	float:left;
	padding:0 20px;
	margin:2em 0;
	width:942px;
}
#welcomeText h2 {margin:0 0 .3em 0;}
p.welcomeText {font-size:1.2em !important;line-height:1.5em;}

/*************************************
	COLUMNS
**************************************/
#columnContainer {
	float:left;
	padding:0 20px;
	width:942px;
}
.column {
	float:left;
	min-height:100px;
	height:auto !important;
	height:100px;
	padding:32px 20px 0 20px;
	width:188px;
}
.column a {color:#3b3630  !important;}
.column ul {list-style: none;margin:0 !important;}
.column li {
	background:url(../images/bgColumnListItem.png) bottom no-repeat;
}
.column h2 {
	display: block;
	height:0px;
	text-indent:-9999px;
}
.spacer {
	float:left;
	width:10px;
}
#community {background:url(../images/bgCommunityColumn.jpg) no-repeat;}
#yourQuit {background:url(../images/bgYourQuitColumn.jpg) no-repeat; }
#factsFigures {background:url(../images/bgFactsFigures.jpg) no-repeat; }
#aboutUs {background:url(../images/bgAboutUsColumn.jpg) no-repeat;}
/*************************************
	MIDDLE CONTAINER
**************************************/
#middleContainer {
	float:left;
	margin:2em 0 0 0;
	padding:0 20px;
	width:942px;	
}
/*-------------------------------------
	GRAY ROUNDED
-------------------------------------*/
.grayRounded {
	float:left;
	width:380px;
}
.grayRoundedTop {
	background:url(../images/bgGrayRoundedTop.jpg) no-repeat;
	float:left;
	height:3px;
	overflow:hidden;
	width:380px;
}
.grayRoundedMiddle {
	background:url(../images/bgGrayRoundedMiddle.jpg) repeat-x;
	float:left;
	width:380px;
}
/*-------------------------------------
	TWITTER
-------------------------------------*/
.twitter {padding:0 0 0 0;position: relative;}
.twitter h2 {
	background:url(../images/headingBgTwitter.jpg) no-repeat;
	border-bottom:1px solid #dddddd;
	display:block;
	height:10px;
	margin:1.2em 0 0 0;
	padding:0 0 1em 0;
	text-indent:-9999px;
	width:380px;
}
.tweet_list {list-style: none; margin:0 0 3em 0 !important;}
.tweet_list li {
	border-bottom:1px solid #dddddd;
	line-height:1.7em;
	margin:0;
	padding:1.2em 2em;
}
.tweet_list li span {
	display: block;
/* 	margin:0 0 0 2em; */
}
.tweet_list li a {
	background:0;
	display: inline;
	font-weight:bold;
	margin: 0;
	padding:0;
}
a.tweetDate {
	color:#847c72 !important;
	font-weight: normal !important;
}
a.moreUpdates {
	bottom:12px;
	color:#847c72 !important;
	position:absolute;
	right:12px;
	text-align: right;
}
ul.facebook {
	bottom:-6px;
	left:12px;
	list-style: none;
	margin:0 !important;
	position:absolute;
	width:200px;
}
ul.facebook li img {display:inline;float:left;vertical-align: middle;}
ul.facebook li a {background:none;display: inline;}
p.loading {
	padding:0 2em 1.2em 2em;
}
/*-------------------------------------
	CAROUSEL
-------------------------------------*/
#merchCarousel {
	float:left;
	position:relative;
	width:180px;
}
#merchCarousel h2 {
	background:url(../images/bgMerchCarouselHeader.jpg) no-repeat;
	display:block;
	height:22px;
	text-indent: -9999px;
	position:relative;
	width:180px;
	z-index:51;
}
#merchCarousel li,#merchCarousel li a {
	background:none !important;
	padding:0 !important;
}
#whiteGradientTop {
	background:url(../images/bgWhiteGradientTop.png) repeat-x;
	height:50px;
	position:absolute; 
	top:61px;
	width:180px;
	z-index:10;
}
#whiteGradientBottom {
	background:url(../images/bgWhiteGradientBottom.png) repeat-x;
	bottom:40px;
	height:50px;
	position:absolute; 
	width:180px;
	z-index:10;
}
/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}
.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}
.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 150px;
    height: 150px;
}
/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 11;
    display: none;
}
.jcarousel-prev {
    z-index:11;
    display: none;
}
/**CAROUSEL SKIN**/
.jcarousel-skin-tango .jcarousel-container {}
.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 180px;
    height: 257px;
    padding: 40px 0px;
}
.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  180px;
    height: 257px;
}
.jcarousel-skin-tango .jcarousel-item {
	text-align: center !important;
    width: 180px;
    height: 150px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 34px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}
/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 14px;
    left: 80px;
    width: 12px;
    height: 6px;
    cursor: pointer;
    background: transparent url(../images/next-vertical.jpg) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 14px;
    left: 80px;
    width: 12px;
    height: 6px;
    cursor: pointer;
    background: transparent url(../images/prev-vertical.jpg) no-repeat 0 0;
}
/*-------------------------------------
	FEATURED ARTICLES
-------------------------------------*/
.featuredArticles h2 {
	background:url(../images/headingBgFeaturedArticles.jpg) no-repeat;
	display:block;
	height:10px;
	margin:26px 0;
	text-indent:-9999px;
	width:380px;
}
.featuredArticles .grayRoundedMiddle {padding:0 0 2em 0;}
.featuredArticles .grayRoundedMiddle p {
	padding:0 28px;
}
.featuredArticles .grayRoundedMiddle ul {
	list-style: none;
	margin:1em 0 0 0 !important;
	padding:0 38px;
}
.featuredArticles .grayRoundedMiddle li {
	margin:0;
}
.featuredArticles li {font-weight:bold;}
/*************************************
	BOTTOM CONTAINER
**************************************/
#bottomContainer {
	float:left;
	margin:2em 0 0 0;
	padding:0 20px;
	width:942px;	
}
/*-------------------------------------
	GRAY ROUNDED SMALL
-------------------------------------*/
.grayRoundedSmall {
	float:left;
	width:270px;
}
.grayRoundedSmallTop {
	background:url(../images/bgGrayRoundedSmallTop.jpg) no-repeat;
	float:left;
	height:3px;
	overflow:hidden;
	width:270px;
}
.grayRoundedSmallMiddle {
	background:url(../images/bgGrayRoundedMiddle.jpg) repeat-x;
	float:left;
	width:270px;
}
/*-------------------------------------
	YOUR QUIT DATE
-------------------------------------*/
.quitDate h2 {
	background:url(../images/headingBgQuitDate.jpg) no-repeat;
	display:block;
	height:10px;
	margin:26px 0;
	text-indent:-9999px;
	width:270px;
}
/*-------------------------------------
	YOUR NUMBERS
-------------------------------------*/
#yourNumbers {
	color:#e31e25;
	float:left;
	font-size:1.5em;
	font-weight:bold;
	text-align: center;
	width:400px;
}
#yourNumbers h2 {
	background:url(../images/headingBgYourNumbers.jpg) no-repeat;
	display:block;
	height:10px;
	margin:26px 0;
	text-indent:-9999px;
	width:400px;
}
#yourNumbers p {color:#444444;font-size:.7em !important;font-weight:normal !important;margin:2em 0 0 0;}
/*-------------------------------------
	YOUR USAGE
-------------------------------------*/
.yourUsage h2 {
	background:url(../images/headingBgYourUsage.jpg) no-repeat;
	display:block;
	height:10px;
	margin:26px 0;
	text-indent:-9999px;
	width:270px;
}
.formList {margin:0 0 0 2em !important;list-style:none;float:left;}
.formList li {float:left;}
.formList li input {float:left;vertical-align: middle;}
.formList li.divider {margin:8px 5px 0 5px;}
.formList li.text {font-weight:bold;margin:5px 5px 0 5px !important;width:150px;}
.quitday,.quitmo,.quityr,.amount,.cost {
	background: url(../images/bgInputYourQuit.png) no-repeat;
	border:0;
	height:17px;
	padding:6px;
	text-align:center;
	width:47px;
}
.formList li .calcbutton {
	background:url(../images/btnCalcDaysQuit.png) no-repeat;
	border:0;
	cursor:pointer;
	height:29px;
	width:146px;
}
.yourUsage .formList li {margin:0 5px 0 0;}
.formList li .calcbutton2 {
	background:url(../images/btnCalcMoneySaved.png) no-repeat;
	border:0;
	cursor:pointer;
	height:29px;
	width:140px;
}