/* @import url("reset.css"); */



/*=========================General Table Styles===========================*/

div.price-tbl
{
    position: relative;/*--This is to position columns relative to table body--*/
    float: left;
    left: 0; /*--Position the table as per your requirements--*/
    width: 100%; /*--Width of parent--*/
    height: 620px; /*--You need to mention height as per your need, so that contents of page below the table could be positioned as per the requirements--*/
    margin: 5em 0; /*--Give some space above and below the table--*/
}

/*===========================Position and Width of Table Columns as per Requirements====================*/

/*==========================================================================================================================================

This section of CSS is for the width of table columns and their respective positions in the Pricing Table. In this template we have five columns each with a width of 180px. We have kept the width of the featured column as 188px.

Now, if you want to change the width of the columns of your pricing table then simply change the value of width and position of each column, and thats it, your new table will adopt the new look in no time.

For example, suppose we want to change the column width from 180px to 190px and therefore, the width of the featured column would be 198px.

So, new CSS:

div.price-tbl div.data-column
{
    position: absolute;
    width: 190px;
}

div.price-tbl div.feature-column
{
    left: 0;
}

div.price-tbl div.data-col-1
{
    left: 190px;
}

div.price-tbl div.data-col-2
{
    left: 380px;
}

div.price-tbl div.data-col-3
{
    left: 570px;
}

div.price-tbl div.data-col-4
{
    left: 760px;
}

div.price-tbl div.featured
{
    width: 198px;
}

====================================================================================================================================================== */

div.price-tbl div.feature-column, div.price-tbl div.data-column
{
    position: absolute; /*--Position columns relative to the parent table div (div.price-tbl)--*/
    width: 220px; /*--Each column width. Change this value as per your requirements--*/
}

div.price-tbl div.feature-column
{
    left: 0;
}

div.price-tbl div.data-col-1
{
    left: 40px;
}

div.price-tbl div.data-col-2
{
    left: 260px;
}

div.price-tbl div.data-col-3
{
    left: 480px;
}

div.price-tbl div.data-col-4
{
    left: 700px;
}

div.price-tbl div.featured
{
    width: 235px;
}

/*=====================General styles for each column====================*/
div.price-tbl div.feature-column div.col-header,
div.price-tbl div.feature-column div.col-body,
div.price-tbl div.data-column div.col-header,
div.price-tbl div.data-column div.col-body,
div.price-tbl div.data-column div.col-footer
{
    display: inline-block;
    width: 100%;
}

/*==============================General Styles and Typography for Column Header======================*/

/*--CSS3 @font-face has been used for the text in "div.plan-price strong" and  "div.plan-user span". However, if you want, you can use them for the texts in other sections or replace them with other fonts of your choice or delete them as per your requirements--*/

/*
@font-face {
    font-family: 'OpenSansRegular';
    src: url('../fontface/OpenSans-Regular-webfont.eot');
    src: url('../fontface/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fontface/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fontface/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fontface/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PTSerifRegular';
    src: url('PTF55F-webfont.eot');
    src: url('PTF55F-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTF55F-webfont.woff') format('woff'),
         url('PTF55F-webfont.ttf') format('truetype'),
         url('PTF55F-webfont.svg#PTSerifRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/

div.price-tbl div.data-column div.col-header div.plan-name
{
    position: relative;
    z-index: 100; /*--So that box-shadow of this div stays above div.col-header-BG--*/
    width: 100%;
    height: 34px; /*--Change this height as per your requirement--*/
    text-align: center;

    /*--Border radius--*/
    -webkit-border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    border-radius:6px 6px 0px 0px;
}

div.price-tbl div.data-column div.col-header div.col-header-BG
{
    height: 96px;/*--Change this height as per your requirements--*/
    width: 100%;
    text-align: center;
}

/*--Here goes the typography for plan name at the top--*/
div.price-tbl div.data-column div.plan-name span
{
    display: inline-block;
    color: #fff;
    text-shadow: 0px 1px 1px #000;
    text-transform: uppercase;
    font: 400 1.2em/32px Verdana, Geneva, Tahoma, sans-serif;/*--You can change the fonts or their other values like size, weight, etc. as per your requirements--*/
}

/*--Here goes the typography for price values--*/
div.price-tbl div.data-column div.plan-price em,
div.price-tbl div.data-column div.plan-price strong,
div.price-tbl div.data-column div.plan-price b
{
    display: inline-block;
    text-shadow: 0px 1px 1px #000;
}

/*--This is for the '$' symbol--*/
div.price-tbl div.data-column div.plan-price em
{
    vertical-align: top;
    margin: 10px -2px 0px 0px;
    color: #fff;
    font: normal 1.4em/14px Verdana, Geneva, Tahoma, sans-serif;
}

/*--This for the price value--*/
div.price-tbl div.data-column div.plan-price strong
{
    margin: 6px -2px 0px 0px;
    color: #fff;
    font: normal 2.8em/21px Arial, Helvetica, sans-serif;
}

/*--This for "/mo"--*/
div.price-tbl div.data-column div.plan-price b
{
    color: #fff;
    font: normal 1.2em/12px Verdana, Geneva, Tahoma, sans-serif;
}

/*--This is for plan-user text line--*/
div.price-tbl div.data-column div.plan-user span
{
    display: inline-block;
    color: #fff;
    margin-top: 5px;
    font: normal 1.1em/12px Georgia, serif;
}

/*=====================General Styles and Typography for Column Body=====================*/

/*--General typography for rows--*/
div.price-tbl div.feature-column div.col-body span,
div.price-tbl div.data-column div.col-body span
{
    display: block;
    width: 100%;
    height: 40px;
    text-align: center;
    color: #33362b;
    font: normal 1em/40px Tahoma, Arial, Helvetica, sans-serif;
}

/*--Replace "tick" and "cross" with images--*/
div.price-tbl div.data-column div.col-body span em.tick,
div.price-tbl div.data-column div.col-body span em.cross
{
    display: inline-block;
    width: 19px;
    text-indent: -9999px; /*--Indent text for screen readers--*/
}

div.price-tbl div.data-column div.col-body span em.tick
{
    background: url(../images/tick.png) no-repeat 0px 10px;
}

div.price-tbl div.data-column div.col-body span em.cross
{
    background: url(../images/cross.png) no-repeat 0px 10px;
}

/*============================General Styles for Column Footer===========================*/

div.price-tbl div.data-column div.col-footer
{
    height: 48px;/*--This is the height of each footer of non-featured columns. Change this as per your requirements--*/
    line-height: 48px; /*--Change this value if you have changed the height of the div.col-footer--*/
    text-align: center;
}

/*=====================General Styles and Typography for Sign Up Buttons at the Top and Bottom of the Data Columns====================*/

div.price-tbl div.data-column div.col-header div.plan-signup a,
div.price-tbl div.data-column div.col-footer div.plan-signup a
{
    display: inline-block;
    width: auto;
    height: 24px;
    padding: 4px 16px;
    color: #fff;
    font: 500 1.1em/24px Arial, Helvetica, sans-serif;
	font-weight:normal;
    border: 1px solid #4c88bc;
	text-decoration:none;
    /*--Border radius--*/
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;


    /*--Gradient--*/
	
	text-shadow: 0px -1px 0px #941010; 
	background-color: #B22E2E; 
	background-image: -moz-linear-gradient(top, #d04c4c, #941010); 
	background-image: -ms-linear-gradient(top, #d04c4c, #941010); 
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d04c4c), to(#941010)); 
	background-image: -webkit-linear-gradient(top, #d04c4c, #941010); 
	background-image: -o-linear-gradient(top, #d04c4c, #941010); 
	background-image: linear-gradient(top, #d04c4c, #941010); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d04c4c', endColorstr='#941010', GradientType=0); 
	border-color: #B22E2E #941010 #941010 #B22E2E; 		
	border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.25);

}

div.price-tbl div.data-column div.col-header div.plan-signup a
{
    margin-top: 7px;
}

/*--CSS for :hover state--*/
div.price-tbl div.data-column div.col-header div.col-header-BG div.plan-signup a:hover,
div.price-tbl div.data-column div.col-footer div.plan-signup a:hover
{
   text-decoration: none;
   /*
    background: #1266c1;
    background: -moz-linear-gradient(#2f90d5, #0351b7);
    background: -webkit-linear-gradient(#2f90d5, #0351b7);
    background: -o-linear-gradient(#2f90d5, #0351b7);
    background: linear-gradient(#2f90d5, #0351b7);
	*/
	background-color: #941010; 
	

	-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
	-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
	border-color: #B22E2E #941010 #941010 #B22E2E; 
	border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.25); 
}
	


/*--CSS for :active state--*/
div.price-tbl div.data-column div.col-header div.col-header-BG div.plan-signup a:active,
div.price-tbl div.data-column div.col-footer div.plan-signup a:active
{
      box-shadow: 0 1px 0 white,
                inset 0 0 9px rgba(0,0,0,.5);
}

/*============================================General Styles for First Column: It is the Column which Contains Feature List for All Plans===============================================*/

/*--Header--*/
div.price-tbl div.feature-column div.col-header
{
    height: 60px;
    padding-top: 20px;
    margin-top: 34px;
    color: #535652;
    font: normal 1.5em/1.3em Arial, Helvetica, sans-serif;
    text-align: center;
    background: #edf3f5;

    /*--Border radius--*/
    -webkit-border-radius: 6px 0px 0px 0px;
    -moz-border-radius: 6px 0px 0px 0px;
    border-radius: 6px 0px 0px 0px;
}

/*--Body--*/
div.price-tbl div.feature-column div.col-body
{
/*--    margin-top: 134px;  --*/ /*--If you do not need column header for the first column then unhide this and delete above CSS for "div.price-tbl div.col-1 div.col-header"--*/
    background: #edf3f5;
}

div.price-tbl div.feature-column div.col-body span.highlight
{
    background: #d9dee0; /*--Fallback background color--*/
    background: rgba(136, 137, 138, 0.2);
}

div.price-tbl div.feature-column div.col-body span
{
    position: relative;
    text-align: left;
    padding-left: 10px;
    width: auto;
    color: #666e70;
}

/*--CSS for Popup box--*/
div.price-tbl div.feature-column div.col-body span img.info-icon
{
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
}

div.price-tbl div.feature-column div.col-body span img.info-icon:hover
{
    cursor: pointer;
}

div.price-tbl div.feature-column div.col-body span em.popup-box
{
    position: absolute;
    display: none; /*--Hide pop-up box--*/
    bottom: 46px;
    width: 90%;
    padding: 5%;
    color: #fff;
    font: normal 0.9em/16px Arial, Helvetica, sans-serif;
    text-shadow: 0px 1px 1px #000;
    background: #202a30; /*--Fallback background color--*/
    background: rgba(22, 32, 38, .9);

    /*--Border radius--*/
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

div.price-tbl div.feature-column div.col-body span em.popup-box b.corner
{
    position: absolute;
    width: 25px;
    height: 11px;
    bottom: -11px;
    left: 5px;
    background: url(../images/popup-corner.png) no-repeat 0 0;
}

div.price-tbl div.feature-column div.col-body span:hover em.popup-box
{
    display: block;/*--Show pop-up box--*/
    left: 0;
}

/*============================================General Styles for Four Columns with Four Different Plans: Data Column 1, Data Column 2, Data Column 3, and Data Column 4===============================================*/

/*==================CSS for Data Column 1 and Data Column 3=================*/

/*--Header--*/
div.price-tbl div.data-col-1 div.col-header div.plan-name, div.price-tbl div.data-col-3 div.col-header div.plan-name
{
    /*--Box shadow--*/
    -webkit-box-shadow: 0px 1px 0px #000, 0px -1px 0px #404040 inset;
    -moz-box-shadow: 0px 1px 0px #000, 0px -1px 0px #404040 inset;
    box-shadow: 0px 1px 0px #000, 0px -1px 0px #404040 inset;

    /*--Gradient--*/
    background: url(../images/black-light-top-bg.png) repeat-x 0 0; /*--Fallback for IE and other non-CSS3 and buggy browsers--*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#404040), to(#262626)); /*--For older webkit browsers--*/
    background-image: -webkit-linear-gradient(top, #404040, #262626); /*--For newer webkit and iOS5+--*/
    background-image: -moz-linear-gradient(top, #404040, #262626); /*--For mozilla--*/
    background-image: -o-linear-gradient(top, #404040, #262626); /*--For Opera 11.10+--*/
    background-image: -ms-linear-gradient(top, #404040, #262626); /*--For IE10--*/
}

div.price-tbl div.data-col-1 div.col-header div.col-header-BG
{
    background: #3b3b3b;
}

div.price-tbl div.data-col-3 div.col-header div.col-header-BG
{
    background: #3b3b3b;
}

div.price-tbl div.data-col-4 div.col-header div.col-header-BG
{
    background: #542615;
}


/*--Body--*/
div.price-tbl div.data-col-1 div.col-body
{
    background: #d2d7d9;
}

div.price-tbl div.data-col-3 div.col-body
{
    background: #d2d7d9;
}

div.price-tbl div.data-col-4 div.col-body
{
    background: #D6B4A9;
}

div.price-tbl div.data-col-1 div.col-body span.highlight, div.price-tbl div.data-col-3 div.col-body span.highlight
{
    background: #c1c5c7; /*--Fallback background color--*/
    background: rgba(124, 127, 128, 0.2);
}

/*--Footer--*/
div.price-tbl div.data-col-1 div.col-footer, div.price-tbl div.data-col-3 div.col-footer
{
   background: #a3a7a8;
}

/*==================CSS for Data Column 2 and Data Column 4=================*/

/*--Header--*/
div.price-tbl div.data-col-2 div.col-header div.plan-name, div.price-tbl div.data-col-4 div.col-header div.plan-name
{
    /*--Box shadow--*/
    -webkit-box-shadow: 0px 1px 0px #000, 0px -1px 0px #363636 inset;
    -moz-box-shadow: 0px 1px 0px #000, 0px -1px 0px #363636 inset;
    box-shadow: 0px 1px 0px #000, 0px -1px 0px #363636 inset;

    /*--Gradient--*/
    background: url(../images/black-dark-top-bg.png) repeat-x 0 0; /*--Fallback for IE and other non-CSS3 and buggy browsers--*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3a3a3a), to(#191919)); /*--For older webkit browsers--*/
    background-image: -webkit-linear-gradient(top, #3a3a3a, #191919); /*--For newer webkit and iOS5+--*/
    background-image: -moz-linear-gradient(top, #3a3a3a, #191919); /*--For mozilla--*/
    background-image: -o-linear-gradient(top, #3a3a3a, #191919); /*--For Opera 11.10+--*/
    background-image: -ms-linear-gradient(top, #3a3a3a, #191919); /*--For IE10--*/
}

div.price-tbl div.data-col-2 div.col-header div.col-header-BG, div.price-tbl div.data-col-4 div.col-header div.col-header-BG
{
    background: #2e2e2e;
}

/*--Body--*/
div.price-tbl div.data-col-2 div.col-body, div.price-tbl div.data-col-4 div.col-body
{
    background: #c3c8c9;
}

div.price-tbl div.data-col-2 div.col-body span.highlight, div.price-tbl div.data-col-4 div.col-body span.highlight
{
    background: #b5b9ba; /*--Fallback background color--*/
    background: rgba(124, 127, 128, 0.2);
}

/*--Footer--*/
div.price-tbl div.data-col-2 div.col-footer, div.price-tbl div.data-col-4 div.col-footer
{
   background: #8e9192;
}

/*===================================================General Styling and Typography for Featured Column=======================================================*/

div.price-tbl div.featured
{
    z-index: 300;
    margin: 0 0 0 -4px;
    top: -12px;

    /*--Border radius--*/
    -webkit-border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;

    /*--Box shadow--*/
    -webkit-box-shadow: 0px 0px 4px #1c1c1c;
    -moz-box-shadow: 0px 0px 4px #1c1c1c;
    box-shadow: 0px 0px 4px #1c1c1c;
}

/*=========CSS for Header========*/

div.price-tbl div.featured div.col-header div.plan-name
{
    /*--Box shadow--*/
    -webkit-box-shadow: 0px 1px 0px #013d50, 0px -1px 0px #8c0000 inset;
    -moz-box-shadow: 0px 1px 0px #013d50, 0px -1px 0px #8c0000 inset;
    box-shadow: 0px 1px 0px #013d50, 0px -1px 0px #8c0000 inset;

	background: url(/images/red2-top-bg.png) repeat-x 0 0; /*--Fallback for IE and other non-CSS3 and buggy browsers--*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#943918), to(#63250e)); /*--For older webkit browsers--*/
    background-image: -webkit-linear-gradient(top, #943918, #63250e); /*--For newer webkit and iOS5+--*/
    background-image: -moz-linear-gradient(top, #943918, #63250e); /*--For mozilla--*/
    background-image: -o-linear-gradient(top, #943918, #63250e); /*--For Opera 11.10+--*/
    background-image: -ms-linear-gradient(top, #943918, #63250e); /*--For IE10--*/
}

div.price-tbl div.featured div.col-header div.col-header-BG
{
    height: 118px;
    background: ##7a371f;
}

/*--Red corner tag--*/
div.price-tbl div.featured span.featured-red-corner
{
    position: absolute;
    z-index: 300;
    width: 63px;
    height: 61px;
    right: -6px;
    top: -3px;
    background: url(../images/featured-col-red-corner.png) no-repeat 0 0;
}

/*--Here goes the typography for plan name at the top--*/
div.price-tbl div.featured div.plan-name span
{
    font-size: 1.6em;
    line-height: 30px;
}

/*====Here goes the typography for price values=====*/

/*--This is for the '$' symbol--*/
div.price-tbl div.featured div.plan-price em
{
    font-size: 1.6em;
    line-height: 16px;
    margin-top: 12px;
}

/*--This for the price value--*/
div.price-tbl div.featured div.plan-price strong
{
    font-size: 4em;
    line-height: 40px;
    margin-top: 7px;
}

/*--This for "/mo"--*/
div.price-tbl div.featured div.plan-price b
{
    font-size: 1.4em;
    line-height: 14px;
}

/*--This is for plan-user text line--*/
div.price-tbl div.featured div.plan-user span
{
    font-size: 1.2em;
    line-height: 12px;
    margin-top: 4px;
}

/*--This is for top sign up button--*/
div.price-tbl div.featured div.col-header div.plan-signup a
{
    margin-top: 7px;
}

/*==========CSS for Column Body============*/

div.price-tbl div.featured div.col-body
{
    background: #D6B4A9;
}

div.price-tbl div.featured div.col-body span
{
    color: #1b566a;
    font-weight: bold;
}

div.price-tbl div.featured div.col-body span.highlight
{
   
   /* background: #5eb9d6;*/ /*--Fallback background color--*/
   /* background: rgba(51, 148, 180, 0.4); */
}

/*==========CSS for Column Footer============*/

div.price-tbl div.featured div.col-footer
{
   height: 60px;
   line-height: 60px;
   background: #542615;
}

/*================General Styling and Typography for Cufon Replaced Texts. Any Change of Styles Here will be Reflected on Cufon-Replaced Texts====================*/

/*----Styles for the class Name "cufon". These Styles of Cufon-replaced texts at the Column Header are initially loaded by JQuery on page load----*/
div.price-tbl div.data-column div.plan-name span.cufon
{
    font: normal 1em/32px;
}

div.price-tbl div.data-column div.plan-price em.cufon
{
    font: normal 1.4em/14px;
    margin-top: 9px;
}

div.price-tbl div.data-column div.plan-price strong.cufon
{
    font: normal 2em/26px;
    margin-top: 5px;
}

div.price-tbl div.data-column div.plan-price b.cufon
{
    font: normal 1.2em/12px;
}

div.price-tbl div.data-column div.plan-user span.cufon
{
    font: normal 1.1em/12px;
    margin-top: 2px;
}

/*--Styles for Featured Column--*/
div.price-tbl div.featured div.plan-name span.cufon
{
    font: normal 1.2em/30px;
	
}

div.price-tbl div.featured div.plan-price em.cufon
{
    font: normal 1.6em/16px;
    margin: 10px -2px 0px 0px;
	
}

div.price-tbl div.featured div.plan-price strong.cufon
{
    font: normal 3em/30px;
    margin: 5px -2px 0px 0px;
}

div.price-tbl div.featured div.plan-price b.cufon
{
    font: normal 1.4em/14px;
}

div.price-tbl div.featured div.plan-user span.cufon
{
    margin-top: 0px;
    font: normal 1.2em/12px;
}