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

	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: https://www.adipurdila.com
	Version: 1.0.0
	
**********************************************************************************/


.cl { clear: left; }



/* ---------- Temporary (this is for the page wrapper only; delete this when 
including the pricing table into your own website) ---------- */






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

	font-family: "PT Sans", "Arial", sans-serif;
	color: #31b4b6;
}

	div.priceContainer span {
		position:absolute;
		margin:-19px 0px 0px -23px;
		font-size: 12px;
		color: #a1a7b0;font-family: "Oswald","Arial",sans-serif;
	}
	
div.price1 {
	background: url("img/price1BG.png") top center no-repeat;
	width: 112px;
	height: 112px;
	font-family: "Oswald","Arial",sans-serif;
	margin-top: 36px;
	margin-left:54px;
	font-size: 24px;
}

	div.price1 p { padding-top: 13px; font-family: "Oswald","Arial",sans-serif;}

div.price2 {
	background: url("img/price2BG.png") top center no-repeat;
	width: 122px;
	height: 122px;
	margin-left:49px;
	margin-top: 31px;
	font-family: "PT Sans", "Arial", sans-serif;
	font-size: 28px;
}

	div.price2 p { padding-top: 35px; font-family: "Oswald","Arial",sans-serif;}

div.price3 {
	background: url("img/price3BG.html") top center no-repeat;
	width: 132px;
	height: 132px;
font-family: "PT Sans", "Arial", sans-serif;
	margin-top: 26px;
	
	font-size: 32px;
}

	div.price3 p { padding-top: 40px; font-family: "Oswald","Arial",sans-serif;}

div.price4 {
	background: url("img/price4BG.png") top center no-repeat;
	width: 142px;
	height: 142px;
font-family: "Oswald","Arial",sans-serif;
	margin-top: 21px;
	margin-left:39px;
	font-size: 36px;
}

	div.price4 p { padding-top: 45px;font-family: "Oswald","Arial",sans-serif; }





/* ---------- Pricing Table Styles ---------- */
div#tableContainer {
	border: 1px solid #e2e7eb;
	padding: 1px;
	font-family: "PT Sans", "Arial", sans-serif;
	background: url("img/tableBottomBG.html") left bottom repeat-x;
	border-right:0px;
	width:925px;
	margin:auto;
}

div.tableCell {
	border-right: 1px solid #E2E7EB;
	width: 227px;
	float: left;
	font-family: "PT Sans", "Arial", sans-serif;
	text-align: center;	
	height:81px;
}
div.recommended{
	height:81px;
}

table.pricingTableContent { width: 100%; font-family: "PT Sans", "Arial", sans-serif;}

	table.pricingTableContent td {
		text-align: center;
		vertical-align: middle;
		width: 238px;
		font-family: "PT Sans", "Arial", sans-serif;
		border-right: 1px solid #e2e7eb;
		
		color: #333;
	}
	
	.noBorder { border-right: none; }
	
div.tableHeading {
	background: #FBFBFB url("img/headingPattern7.png");
	font-family: "PT Sans", "Arial", sans-serif;
	padding-top: 7px;
	height: 81px;
}

	div.tableHeading h2 {
		font-family: "Oswald","Arial",sans-serif;
		font-size: 20px;
		font-family: "Oswald","Arial",sans-serif;
		color: #fff;
	}
div.recommended .tableHeading h2{color:#fff;margin-top:0px;}
table.pricingTableContent tr td {font-size:14px; padding: 6px 0; font-family: "PT Sans", "Arial", sans-serif;}

table.pricingTableContent tr.altRow td { background-color:rgba(242, 242, 242, 0.3);font-family: "PT Sans", "Arial", sans-serif; }

table.pricingTableContent tr.signUpRow td { padding: 17px 0 20px 0;font-family: "PT Sans", "Arial", sans-serif; }

table.pricingTableContent td strong { color: #000; font-family: "PT Sans", "Arial", sans-serif;}


table.pricingTableContent tfoot td {
	border-top: 1px solid #e2e7eb;
	padding: 25px 0;font-family: "PT Sans", "Arial", sans-serif;
}

	table.pricingTableContent tfoot td h4 {
		color: #3a3c3f;
		font-size: 18px;font-family: "PT Sans", "Arial", sans-serif;
	}

	table.pricingTableContent tfoot td span {
		display: block;
		font-size: 12px;font-family: "PT Sans", "Arial", sans-serif;
		color: #a1a7b0;
		margin-bottom: 15px;
	}	





/* ---------- Recommended Plan Styles ---------- */
div.recommended .tableHeading, td.recommended {
	background: #889DB3;
	color: #fff !important;font-family: "PT Sans", "Arial", sans-serif;
}

	div.recommended .tableHeading {
		background: #889DB3 url("img/recommendationBadge_hide.png") top left no-repeat;
		margin-top: -20px;
		padding-top: 45px;font-family: "PT Sans", "Arial", sans-serif;
		padding-bottom:56px;
	}
	
	table.pricingTableContent tr.altRow td.recommended { background-color: #6D8ACD; font-family: "PT Sans", "Arial", sans-serif;}
	
	table.pricingTableContent td.recommended strong, table.pricingTableContent tfoot td.recommended h4 { color: #fff; font-family: "PT Sans", "Arial", sans-serif;}
	
	table.pricingTableContent tfoot td.recommended { border-top: 1px solid #4f5357; font-family: "PT Sans", "Arial", sans-serif;}
	
div.recommended .price1 { background: url("img/price1BGRecommended.html") top center no-repeat;font-family: "PT Sans", "Arial", sans-serif; }
div.recommended .price2 { background: url("img/price2BGRecommended.html") top center no-repeat;font-family: "PT Sans", "Arial", sans-serif; }
div.recommended .price3 { background: url("img/price3BGRecommended.png") top center no-repeat; font-family:"Oswald","Arial",sans-serif;margin-left:44px;}
div.recommended .price4 { background: url("img/price4BGRecommended.html") top center no-repeat; font-family: "PT Sans", "Arial", sans-serif;}



/* ---------- Button Styles ---------- */
a.signUpButton {
	color: white;
	border: 1px solid #F5772A;
	font-weight: bold;
	margin-top:62px;
 	padding: 8px 20px;
 	font-family: "PT Sans", "Arial", sans-serif;
 	display: inline-block; 

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

a.signUpButton:hover {font-family: "PT Sans", "Arial", sans-serif !important;
	background-color: #F5772A !important; /* Fallback Color */
	background: -moz-linear-gradient(top, #F5772A, #F1971F) !important; /* FF 3.6+ */
	background: -webkit-linear-gradient(top, #F5772A, #F1971F) !important; /* Safari 5.1+, Chrome 10+ */
}
div.hidecell{height:81px;}
div.hideheading{height:81px;padding-top:2px !important;}
.recommendedheading{padding-bottom:79px !important;margin-top:0px !important;padding-top:25px !important;
background:url("img/recommendationBadge_hide.png") no-repeat scroll left top #889DB3 !important;
}


.fourtablecell{width:184px !important;}
.fourtableheading{}

.fourtablecell1{width:192px !important;}
.fourtablecell2{width:176px !important;}
.fourtablecell3{width:180px !important;}
.fourtablecell4{width:189px !important;}
.fourtablecell5{width:185px !important;}
.hideprice{
font-family: "PT Sans", "Arial", sans-serif !important;
	background-color: #F5772A !important; /* Fallback Color */
	background: -moz-linear-gradient(top, #F5772A, #F1971F) !important; /* FF 3.6+ */
	background: -webkit-linear-gradient(top, #F5772A, #F1971F) !important; /* Safari 5.1+, Chrome 10+ */
	padding:8px 10px;
	border-radius:4px;
	border:1px solid #F5772A;
	font-size:14px;
	float:left;
	margin:9px 0px 0px 29px;
}
.hidebusinessprice{margin-left:34px;}
.hideenterprise{padding:8px 26px;}
.hideheading h2{margin-top:21px !important;}


/* ---------- Browser Compatibility Fixes ---------- */
.ie7 .price1 p { padding-top: 25px;font-family: "PT Sans", "Arial", sans-serif; }
.ie7 .price2 p { padding-top: 30px;font-family: "PT Sans", "Arial", sans-serif; }
.ie7 .price3 p { padding-top: 30px;font-family: "PT Sans", "Arial", sans-serif; }
.ie7 .price4 p { padding-top: 35px;font-family: "PT Sans", "Arial", sans-serif; }

.ie7 .priceContainer span { display: inline-block;font-family: "PT Sans", "Arial", sans-serif; }

.ie7 div.recommended .tableHeading {font-family: "PT Sans", "Arial", sans-serif;
	z-index: 100;
	position: relative;
}

.ie7 table.pricingTableContent tr.signUpRow td.recommended { z-index: 10;font-family: "PT Sans", "Arial", sans-serif; }

@media only screen and (max-width: 1169px) {
	.fourtablecell2, .fourtablecell3, .fourtablecell4, .fourtablecell {width:100% !important;}	
	div.tableCell {height:auto;}
	.hideprice {float:none; margin:0px;}
	table.pricingTableContent tr td {width:100%; float:left;}
	div.recommended .tableHeading {margin-top:0px;}
	table.pricingTableContent td strong {color:#888888;}
	div.tableHeading h2 {margin-bottom: 22px;}
	div.recommended .tableHeading {padding-top:24px;}
	
}

@media only screen and (max-width: 979px) {
	.fourtablecell2, .fourtablecell3, .fourtablecell4, .fourtablecell {width:100% !important;}	
	div.tableCell {height:auto;}
	.hideprice {float:none; margin:0px;}
	table.pricingTableContent tr td {width:100%; float:left;}
	div.recommended .tableHeading {margin-top:0px;}
	table.pricingTableContent td strong {color:#888888;}
	div.tableHeading h2 {margin-bottom: 22px;}
	div.recommended .tableHeading {padding-top:24px;}
}

@media only screen and (max-width: 769px) {
	.fourtablecell2, .fourtablecell3, .fourtablecell4, .fourtablecell {width:100% !important;}	
	div.tableCell {height:auto;}
	.hideprice {float:none; margin:0px;}
	table.pricingTableContent tr td {width:100%; float:left;}
	div.recommended .tableHeading {margin-top:0px;}
	table.pricingTableContent td strong {color:#888888;}
	div.tableHeading h2 {margin-bottom: 22px;}
	div.recommended .tableHeading {padding-top:24px;}
}

@media only screen and (max-width: 479px) {
	.fourtablecell2, .fourtablecell3, .fourtablecell4, .fourtablecell {width:100% !important;}	
	div.tableCell {height:auto;}
	.hideprice {float:none; margin:0px;}
	table.pricingTableContent tr td {width:100%; float:left;}
	div.recommended .tableHeading {margin-top:0px;}
	table.pricingTableContent td strong {color:#888888;}
	div.tableHeading h2 {margin-bottom: 22px;}
}

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