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

	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
	
**********************************************************************************/

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

    font-family: "Oswald", "Arial", sans-serif;
    color: #31b4b6;
    line-height: 1.3em;
}

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: 39px;
    font-size: 24px;
    margin: 0px;
}

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; */
    line-height: 1.3em;

}

div.tableCell {
    border-right: 1px solid #616365;
    width: 25%;
    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: 136px;
}

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

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

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: 0px;
}

table.pricingTableContent tfoot td .btn {
    margin: 15px;
}

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;
    height: 156px;
}

div.popular .tableHeading {
    background: #3a3c3f url("img/recommendationBadge.png") top left no-repeat;
}

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 #63b13d;
    font-weight: bold;

    padding: 8px 20px;

    display: inline-block;

    background-color: #72ce3f; /* Fallback Color */
    background: -moz-linear-gradient(top, #72cf3f, #60bb2d); /* FF 3.6+ */
    background: -webkit-linear-gradient(top, #72cf3f, #60bb2d); /* Safari 5.1+, Chrome 10+ */
}

a.signUpButton:hover {
    background-color: #79db43; /* Fallback Color */
    background: -moz-linear-gradient(top, #79db43, #66c730); /* FF 3.6+ */
    background: -webkit-linear-gradient(top, #79db43, #66c730); /* 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;
}