/**********************************************************************************

	Project Name: How to design and code a modern pricing table
	Project Description: A video tutorial made exclusively for WebdesignTuts+
	File Name: master.css
	Author: Adi Purdila
	Author URI: http://www.adipurdila.com
	Version: 1.0.0
	
**********************************************************************************/

/* ---------- General Styles ---------- */
body {
	font-family: "PT Sans", "Arial", sans-serif;
	font-size: 14px;
	line-height: 1.3em;
}

.cl { clear: left; }



/* ---------- Temporary (this is for the page wrapper only; delete this when 
including the pricing table into your own website) ---------- */
div#pageContainer {
	width: 960px;
	margin: 0 auto;
	
	padding-top: 100px;
}





/* ---------- Price Container Styles ---------- */
div.priceContainer {
	margin: 0 auto;

	font-family: "Oswald", "Arial", sans-serif;
	color: #990000;
}

	div.priceContainer span {
		font-size: 12px;
		color: #a1a7b0;
	}
	
div.price1 {
	background: url("img/price1BG.png") top center no-repeat;
	width: 112px;
	height: 112px;
	
	margin-top: 36px;
	
	font-size: 24px;
}

	div.price1 p { padding-top: 30px; }

div.price2 {
	background: url("img/price2BG.png") top center no-repeat;
	width: 122px;
	height: 122px;

	margin-top: 31px;
	
	font-size: 28px;
}

	div.price2 p { padding-top: 35px; }

div.price3 {
	background: url("img/price3BG.png") top center no-repeat;
	width: 132px;
	height: 132px;

	margin-top: 26px;
	
	font-size: 32px;
}

	div.price3 p { padding-top: 40px; }

div.price4 {
	background: url("img/price4BG.png") top center no-repeat;
	width: 142px;
	height: 142px;

	margin-top: 21px;
	
	font-size: 36px;
}

	div.price4 p { padding-top: 45px; }





/* ---------- Pricing Table Styles ---------- */
div#tableContainer {
	border: 1px solid #e2e7eb;
	padding: 1px;
	
	background: url("img/tableBottomBG.png") left bottom repeat-x;
}

div.tableCell {
	border-right: 1px solid #616365;
	width: 238px;
	float: left;
	
	text-align: center;	
}

table.pricingTableContent { width: 100%; }

	td {
		text-align: center;
		vertical-align: middle;
		width: 238px;
		
		border-right: 1px solid #e2e7eb;
		
		color: #77808a;
	}
	
	.noBorder { border-right: none; }
	
div.tableHeading {
	background: #3a3c3f url("img/headingPattern.png");
	
	padding-top: 25px;
	height: 111px;
}

	div.tableHeading h2 {
		font-family: "Oswald", "Arial", sans-serif;
		font-size: 20px;
		
		color: white;
	}

table.pricingTableContent tr td { padding: 10px 0; }

table.pricingTableContent tr.altRow td { background-color: #f5f5f5; }

table.pricingTableContent tr.signUpRow td { padding: 75px 0 20px 0; }

table.pricingTableContent td strong { color: #424447; }


table.pricingTableContent tfoot td {
	border-top: 1px solid #e2e7eb;
	padding: 25px 0;
}

	table.pricingTableContent tfoot td h4 {
		color: #3a3c3f;
		font-size: 18px;
	}

	table.pricingTableContent tfoot td span {
		display: block;
		font-size: 12px;
		color: #a1a7b0;
		margin-bottom: 15px;
	}	





/* ---------- Recommended Plan Styles ---------- */
div.recommended .tableHeading, td.recommended {
	background: #3a3c3f;
	color: #b4bac4;
}

	div.recommended .tableHeading {
		background: #3a3c3f url("img/recommendationBadge.png") top left no-repeat;
		margin-top: -20px;
		padding-top: 45px;
	}
	/*----       --------*/
	table.pricingTableContent tr.altRow td.recommended { background-color: #46494c; }
	
	table.pricingTableContent td.recommended strong, table.pricingTableContent tfoot td.recommended h4 { color: white; }
	
	table.pricingTableContent tfoot td.recommended { border-top: 1px solid #4f5357; }
	
div.recommended .price1 { background: url("img/price1BGRecommended.png") top center no-repeat; }
div.recommended .price2 { background: url("img/price2BGRecommended.png") top center no-repeat; }
div.recommended .price3 { background: url("img/price3BGRecommended.png") top center no-repeat; }
div.recommended .price4 { background: url("img/price4BGRecommended.png") top center no-repeat; }



/* ---------- Button Styles ---------- */
a.signUpButton {
	color: white;
	border: 1px solid #000000;
	font-weight: bold;
	
 	padding: 8px 20px;
 	
 	display: inline-block; 

	background-color: #990000; /* Fallback Color */
	background: -moz-linear-gradient(top, #990000, #480000); /* FF 3.6+ */
	background: -webkit-linear-gradient(top, #990000, #480000); /* Safari 5.1+, Chrome 10+ */
}

a.signUpButton:hover {
	background-color: #c80000; /* Fallback Color */
	background: -moz-linear-gradient(top, #C80000, #990000); /* FF 3.6+ */
	background: -webkit-linear-gradient(top, #c80000, #990000); /* Safari 5.1+, Chrome 10+ */
}





/* ---------- Browser Compatibility Fixes ---------- */
.ie7 .price1 p { padding-top: 25px; }
.ie7 .price2 p { padding-top: 30px; }
.ie7 .price3 p { padding-top: 30px; }
.ie7 .price4 p { padding-top: 35px; }

.ie7 .priceContainer span { display: inline-block; }

.ie7 div.recommended .tableHeading {
	z-index: 100;
	position: relative;
}

.ie7 table.pricingTableContent tr.signUpRow td.recommended { z-index: 10; }