/*
===================================================
AUTHOR:LeafCode (www.leafcode.net) 
DATE:12 April, 2013 
VERSION:1.02. 
DESCRIPTION:Responsive CSS3 Pricing tables
COLOR:Blue
===================================================
CSS Content
===================================================
0.   Reset and Clearing
1.   Base Pricing tables style - Blue 
1.1. Columns 
1.2. First column (Choose your plan) 
1.3. Blue pricing table 
1.4. Button
1.5. Tooltip
2.   Tablet Landscape Size
3.   Mobile Landscape Size and Tablet Portrait Size
4.   Mobile Portrait Size
===================================================
0. Reset and Clearing
===================================================
*/ 
.pricing-tables ol,
.pricing-tables ul,
.pricing-tables li,
.pricing-tables h3,
.pricing-tables h4,
.pricing-tables h5 {
	list-style:none;
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}
.clearfix:before,
.clearfix:after {
	content:'\0020';
	display:block;
	overflow:hidden;
	visibility:hidden;
	width:0;
	height:0;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	zoom:1;
}
/*
===================================================
1. Base Pricing tables style - Blue
===================================================
1.1. Columns
===================================================
*/ 
ul.pricing-tables {
	width:960px; /* Set width of your container */
	padding:40px 0;
	margin:0 auto;
	display:block;
	position:relative;
}
ul.pricing-tables li.one-fifth,
ul.pricing-tables li.one-fourth,
ul.pricing-tables li.one-third,
ul.pricing-tables li.one-half {
	float:left;
	display:inline-block;
	position:relative;
}
ul.pricing-tables li.one-fifth {
	width:20%;
}
ul.pricing-tables li.one-fourth {
	width:25%;
}
ul.pricing-tables li.one-third {
	width:33.333333333333%;
}
ul.pricing-tables li.one-half {
	width:50%;
}
ul.pricing-tables li.one-fifth ul,
ul.pricing-tables li.one-fourth ul,
ul.pricing-tables li.one-third ul,
ul.pricing-tables li.one-half ul {
	float:left;
	display:inline-block;
	margin:0;
	padding:0;
	position:relative;
}
ul.pricing-tables li.one-fifth ul {
	width:100%;
}
ul.pricing-tables li.one-fourth ul {
	width:100%;
}
ul.pricing-tables li.one-third ul {
	width: 100%;
}
ul.pricing-tables li.one-half ul {
	width: 100%;
}
/*
===================================================
1.2. First column (Choose your plan)
===================================================
*/
ul.pricing-tables li.plan ul li {
	border-left:1px solid #e2e2e2;
}
ul.pricing-tables li.plan ul li.name {
	border-left:1px solid #e2e2e2;
	border-bottom:1px solid #fff;
	border-top:1px solid #e2e2e2;
	height:48px;
}
ul.pricing-tables li.plan ul li.price {
	background:#f8f8f8;
	background:-moz-linear-gradient(top,#f8f8f8 0%,#f4f4f4 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f8f8f8),color-stop(100%,#f4f4f4));
	background:-webkit-linear-gradient(top,#f8f8f8 0%,#f4f4f4 100%);
	background:-o-linear-gradient(top,#f8f8f8 0%,#f4f4f4 100%);
	background:-ms-linear-gradient(top,#f8f8f8 0%,#f4f4f4 100%);
	background:linear-gradient(top,#f8f8f8 0%,#f4f4f4 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8',endColorstr='#f4f4f4',GradientType=0 );
	border:1px solid #e2e2e2;
	border-right:0;
	padding:0;
	height:72px;
	-webkit-box-shadow:inset 0px 0px 5px 0px #fff;
	-moz-box-shadow:inset 0px 0px 5px 0px #fff;
	box-shadow:inset 0px 0px 5px 0px #fff;
}
ul.pricing-tables li.plan ul li.name h3 {
	text-shadow:0px 1px 1px #fff;
	color:#0a8db2;
	padding:17px 10px 17px;
}
ul.pricing-tables li.plan ul li.price h4 {
	padding:28px 15px;
	font:normal 16px/18px Arial,Helvetica,sans-serif;
	height:18px;
	text-align:center;
	text-shadow:0px 1px 1px #fff;
	color:#585858;
}
ul.pricing-tables li.plan ul li.even {
	border-left:1px solid #e2e2e2;
}
ul.pricing-tables li.plan ul li.odd {
	border-left:1px solid #e2e2e2;
}
ul.pricing-tables li.plan ul:hover {
	position:relative;
	margin-top:0;
	-webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
	-moz-box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
	box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
}
/* 
===================================================
1.3. Blue pricing table
===================================================
*/ 
ul.pricing-tables li ul li {
	padding:15px 10px;
	text-align:center;
	border-right:1px solid #e2e2e2;
	border-bottom:1px solid #e2e2e2;
	border-left:1px solid #fff;
	border-top:1px solid #fff;
	background:#f4f4f4;
	color:#585858;
	display:block;
	font:normal 12px/20px Arial,Helvetica,sans-serif;
}
ul.pricing-tables li ul li h5 {
	text-align:center;
	padding:0 10px 15px;
	font:bold 12px/20px Arial,Helvetica,sans-serif;
	color:#0a8db2;
	display:none;
}
ul.pricing-tables li ul li.name {
	background:#ffffff;
	background:-moz-linear-gradient(top,#ffffff 0%,#f4f4f4 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#f4f4f4));
	background:-webkit-linear-gradient(top,#ffffff 0%,#f4f4f4 100%);
	background:-o-linear-gradient(top,#ffffff 0%,#f4f4f4 100%);
	background:-ms-linear-gradient(top,#ffffff 0%,#f4f4f4 100%);
	background:linear-gradient(top,#ffffff 0%,#f4f4f4 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#f4f4f4',GradientType=0 );
	height:48px;
	border-top:1px solid #e2e2e2;
	border-bottom:1px solid #fff;
}
ul.pricing-tables li ul li.price {
	height:72px;
	padding:0;
	background:#3fa6c3;
	background:-moz-linear-gradient(top,#3fa6c3 0%,#0a8db2 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3fa6c3),color-stop(100%,#0a8db2));
	background:-webkit-linear-gradient(top,#3fa6c3 0%,#0a8db2 100%);
	background:-o-linear-gradient(top,#3fa6c3 0%,#0a8db2 100%);
	background:-ms-linear-gradient(top,#3fa6c3 0%,#0a8db2 100%);
	background:linear-gradient(top,#3fa6c3 0%,#0a8db2 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3fa6c3',endColorstr='#0a8db2',GradientType=0 );
	border-left:1px solid #0ca2cc;
	border-top:1px solid #097a99;
	border-right:1px solid #097a99;
	border-bottom:1px solid #097a99;
	-webkit-box-shadow:inset 0px 0px 5px 0px #108aac;
	-moz-box-shadow:inset 0px 0px 5px 0px #108aac;
	box-shadow:inset 0px 0px 5px 0px #108aac;
}
ul.pricing-tables li ul li.name h3 {
	margin:0;
	text-align:center;
	padding:17px 10px 17px;
	font:normal 16px/16px Verdana,Arial,Helvetica,sans-serif;
	color:#585858;
	text-shadow:0px 1px 1px #fff;
}
ul.pricing-tables li ul li.price h4 {
	padding:27px 10px;
	font:normal 18px/18px Arial,Helvetica,sans-serif;
	height:18px;
	text-align:center;
	color:#fff;
	text-shadow:0px -1px 1px #888;
}
ul.pricing-tables li ul li.price h4 small {
    font-size: 0.7em;
}
ul.pricing-tables li ul {
   -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
/*ul.pricing-tables li ul:hover {*/
	/*position:relative;*/
	/*-webkit-box-shadow:0px 0px 5px 0px rgba(0,0,0,0.2);*/
	/*-moz-box-shadow:0px 0px 5px 0px rgba(0,0,0,0.2);*/
	/*box-shadow:0px 0px 5px 0px rgba(0,0,0,0.2);*/
	/*z-index:10;*/
	/*display:block;*/
	/*margin-top:-20px;*/
/*}*/
ul.pricing-tables li ul li.even {
	background:#f4f4f4;
}
ul.pricing-tables li ul li.odd {
	background:#f8f8f8;
}
ul.pricing-tables li ul li.button-row {
	padding:15px 10px;
	text-align:center;
	height:26px;
	background:#3fa6c3;
	background:-moz-linear-gradient(top,#3fa6c3 0%,#0a8db2 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3fa6c3),color-stop(100%,#0a8db2));
	background:-webkit-linear-gradient(top,#3fa6c3 0%,#0a8db2 100%);
	background:-o-linear-gradient(top,#3fa6c3 0%,#0a8db2 100%);
	background:-ms-linear-gradient(top,#3fa6c3 0%,#0a8db2 100%);
	background:linear-gradient(top,#3fa6c3 0%,#0a8db2 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3fa6c3',endColorstr='#0a8db2',GradientType=0 );
	border-left:1px solid #0ca2cc;
	border-top:1px solid #097a99;
	border-right:1px solid #097a99;
	border-bottom:1px solid #097a99;
}

ul.pricing-tables li ul li.button-row span {
    color: white;
}

ul.pricing-tables li ul li.button-row .choose-another-plan {
    position: relative;
    top: -10px;
}
/* 
=================================================== 
1.4. Button
===================================================
*/ 
ul.pricing-tables a.button {
	font:normal 12px/12px Verdana,Arial,Helvetica,sans-serif;
	text-decoration:none;
	color:#333;
	display:inline-block;
	text-align:center;
	height:12px;
	padding:6px 14px 8px 14px;
	border:1px solid #d9d9d9;
	background:#ffffff;
	background:-moz-linear-gradient(top,#ffffff 0%,#eeeeee 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#eeeeee));
	background:-webkit-linear-gradient(top,#ffffff 0%,#eeeeee 100%);
	background:-o-linear-gradient(top,#ffffff 0%,#eeeeee 100%);
	background:-ms-linear-gradient(top,#ffffff 0%,#eeeeee 100%);
	background:linear-gradient(top,#ffffff 0%,#eeeeee 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#eeeeee',GradientType=0 );
	-webkit-box-shadow:inset 0px 0px 0px 1px #fff;
	-moz-box-shadow:inset 0px 0px 0px 1px #fff;
	box-shadow:inset 0px 0px 0px 1px #fff;
	-moz-border-radius-topleft:4px;
	-moz-border-radius-topright:4px;
	-moz-border-radius-bottomright:4px;
	-moz-border-radius-bottomleft:4px;
	-webkit-border-radius:4px 4px 4px 4px;
	border-radius:4px 4px 4px 4px;
}
ul.pricing-tables a.button:hover {
	background:#eeeeee;
	background:-moz-linear-gradient(top,#eeeeee 0%,#ffffff 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#eeeeee),color-stop(100%,#ffffff));
	background:-webkit-linear-gradient(top,#eeeeee 0%,#ffffff 100%);
	background:-o-linear-gradient(top,#eeeeee 0%,#ffffff 100%);
	background:-ms-linear-gradient(top,#eeeeee 0%,#ffffff 100%);
	background:linear-gradient(top,#eeeeee 0%,#ffffff 100%);
	filter:progid: DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee',endColorstr='#ffffff',GradientType=0 );
}
/* 
=================================================== 
1.5. Tooltip
===================================================
*/
a.tooltip {
    position:relative;
	color:#333;
}
a.tooltip span {
    display:none;
    position: absolute; 
    bottom: 30px;
    min-width:150px;
    left:-10px;
	color:#333;
    padding:20px;
    border:1px solid #d9d9d9;
	background:#ffffff;
	background:-moz-linear-gradient(top,#ffffff 0%,#eeeeee 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#eeeeee));
	background:-webkit-linear-gradient(top,#ffffff 0%,#eeeeee 100%);
	background:-o-linear-gradient(top,#ffffff 0%,#eeeeee 100%);
	background:-ms-linear-gradient(top,#ffffff 0%,#eeeeee 100%);
	background:linear-gradient(top,#ffffff 0%,#eeeeee 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#eeeeee',GradientType=0 );
	-webkit-box-shadow:inset 0px 0px 0px 1px #fff;
	-moz-box-shadow:inset 0px 0px 0px 1px #fff;
	box-shadow:inset 0px 0px 0px 1px #fff;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
} 
a.tooltip span:before {
    content: "";
    position: absolute;
    z-index:100;
    bottom: -7px;
    left: 15px;
    border-top: 8px solid #eee;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;        
    border-bottom: 0;  
}
a.tooltip span:after {
    content: "";
    position: absolute;
    z-index:99;
    bottom: -8px;
    left: 14px;
    border-top: 9px solid #ccc;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;        
    border-bottom: 0;  
}
a.tooltip:hover span {
    display:block;
} 
/*
===================================================
2. Tablet Landscape Size
===================================================
*/
@media only screen and (min-width:768px) and (max-width:959px) {
	ul.pricing-tables {
		width:720px;
	}
	ul.pricing-tables li.one-fifth {
		width:20%;
	}
	ul.pricing-tables li.one-fourth {
		width:25%;
	}
	ul.pricing-tables li.one-third {
		width:33.333333333333%;
	}
	ul.pricing-tables li.one-half {
		width:50%;
	}
}
/*
===================================================
End Tablet Landscape Size
===================================================
3. Mobile Landscape Size and Tablet Portrait Size
===================================================
*/
@media only screen and (min-width:480px) and (max-width:767px) {
	ul.pricing-tables li ul li h5 {
		display:block;
	}
	ul.pricing-tables li.one-fifth.plan,
	ul.pricing-tables li.one-fourth.plan,
	ul.pricing-tables li.one-third.plan,
    ul.pricing-tables li.one-half.plan	{
		display:none;
	}
	ul.pricing-tables {
		width:540px;
	}
	ul.pricing-tables li.one-fifth {
		width:25%;
	}
	ul.pricing-tables li.one-fourth {
		width:33.333333333333%;
	}
	ul.pricing-tables li.one-third {
		width:50%;
	}
	ul.pricing-tables li.one-half {
		width:100%;
	}
	ul.pricing-tables li ul li {
		border-left: 1px solid #e2e2e2;
	}
}
/*
=================================================== 
End Mobile Landscape Size and Tablet Portrait Siz
=================================================== 
4. Mobile Portrait Size
===================================================
*/
@media only screen and (max-width:479px) {
	ul.pricing-tables li ul li h5 {
		display:block;
	}
	ul.pricing-tables li.one-fifth.plan,
	ul.pricing-tables li.one-fourth.plan,
	ul.pricing-tables li.one-third.plan,
    ul.pricing-tables li.one-half.plan { 
		display:none;
	}
	ul.pricing-tables {
		width:300px;
	}
	ul.pricing-tables li.one-fifth {
		width:50%;
	}
	ul.pricing-tables li.one-fourth {
		width:100%;
	}
	ul.pricing-tables li.one-third {
		width:50%;
	}
	ul.pricing-tables li.one-half {
		width:100%;
	}
	ul.pricing-tables li ul li {
		border-left: 1px solid #e2e2e2;
	}
}
/*
===================================================
End Mobile Portrait Size
===================================================
*/