@charset "utf-8";

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

	 Pricer Pricing Grid | v1.1
	    Created by pixelboi8 

	     v1.0 - 16/02/2011
	     v1.1 - 17/04/2011

	    All rights reserved.
	Contact: pixelboi8@gmail.com
	
***********************************/

.pricer {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	height:350px;
	line-height:18px;
	letter-spacing:-0.5px;
	margin:auto;
	padding:10px;
	width:200px;
}
.pricer.p2cols { width:400px; }
.pricer.p3cols { width:290px;}
.pricer.p4cols { width:800px; }
.pricer.p5cols { width:1000px; }

/* column */

.pricer .col {
	background:#202020;
	background:-moz-linear-gradient(top, #202020 0%, #202020 30%, #292929 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #202020), color-stop(30%, #202020), color-stop(100%, #292929));
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
	border-bottom:solid 1px #131313;
	border-left:solid 1px #242424;
	border-right:solid 1px #131313;
	border-top:solid 1px #242424;
	-moz-box-shadow:2px 2px 6px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow:2px 2px 6px rgba(0, 0, 0, 0.4);
	box-shadow:2px 2px 6px rgba(0, 0, 0, 0.4);
	float:left;
	margin-left:340px;
	margin-top: -361px;
	position:relative;
	width:282px;
	height:350px;
	/* CSS animations */		
    -moz-transition:-moz-box-shadow 0.4s ease-out;
	-o-transition:box-shadow 0.4s ease-out;
	-webkit-transition:-webkit-box-shadow 0.4s ease-out;
	transition:box-shadow 0.4s ease-out;
}

.pricer .col:before {
	background:-moz-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0.3) 100%);
	background:-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(5%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.3)));
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
	content:'';
	height:100%;
	left:0;
	margin:0;
	position:absolute;
	top:0;
	width:100%;
}
.pricer .col:after {
	background:-moz-radial-gradient(50% 150% 180deg, ellipse farthest-side, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 100%);
	background:-webkit-gradient(radial, 50% 150%, 0, 50% 150%, 70, from(rgba(255, 255, 255, 0.10)), to(rgba(255, 255, 255, 0)));
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
	bottom:0;
	content:'';
	position:absolute;
	-webkit-transform:scale(1.3, 1);
	width:100%;
}


/* header */

.pricer .col .header {
	-moz-box-shadow:0 2px 5px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.5);
	box-shadow:0 2px 5px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.5);
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
	font-weight:bold;
	height:90px;
	margin:auto;
	position:relative;
	text-align:center;
	text-shadow:1px 1px 3px rgba(0, 0, 0, 0.3), 1px 1px 0 rgba(0, 0, 0, 0.6);
	width:282px;
	z-index:2;
}
.pricer .col:hover .header,
.pricer .selected .header {
	height:90px;
	width:282px;
}
.pricer .col .header:before {
	background:-moz-linear-gradient(right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 42%, rgba(0, 0, 0, 0.05) 46%, rgba(255, 255, 255, 0.20) 47%, rgba(255, 255, 255, 0.10) 53%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0) 70%);
	background:-webkit-gradient(linear, right bottom, left top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(42%, rgba(0, 0, 0, 0.02)), color-stop(46%, rgba(0, 0, 0, 0.05)), color-stop(47%, rgba(255, 255, 255, 0.20)), color-stop(53%, rgba(255, 255, 255, 0.15)), color-stop(60%, rgba(255, 255, 255, 0.1)), color-stop(70%, rgba(255, 255, 255, 0)));
	content:'';
	height:100%;
	left:0;
	position:absolute;
	top:1px;
	width:100%;
	z-index:-1;
}
.pricer .col .header .product {
	background:-moz-linear-gradient(top, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.06) 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(70%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.06)));	
	-moz-border-radius-topleft:6px;	
	-moz-border-radius-topright:6px;
	-webkit-border-top-left-radius:6px;
	-webkit-border-top-right-radius:6px;
	border-top-left-radius:6px;	
	border-top-right-radius:6px;
	color:#212121;
	font-size:20px;
	height:40px;
	line-height:40px;
	margin:0;
	padding:0;
	position:relative;
	text-shadow:1px 1px 0 rgba(255, 255, 255, 0.4), 1px 1px 3px rgba(255, 255, 255, 0.2);
	width:100%;
	z-index:3;
}
.pricer .col:hover .header .product,
.pricer .selected .header .product {
	height:40px;
	line-height:40px;
}
.pricer .col .header .product:before {
	background:-moz-radial-gradient(50% 150% 180deg, ellipse farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0) 100%);
	background:-webkit-gradient(radial, 50% 150%, 0, 50% 150%, 70, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));
	content:'';
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:-1;
}
.pricer .col .header .product:after {
	background:-moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
	background:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.2)), color-stop(100%, rgba(0, 0, 0, 0)));
	bottom:-1px;
	content:'';
	height:1px;
	left:0;
	position:absolute;
	width:100%;
}
.pricer .col .header .price {
	color:#FFF;
	font-size:46px;
	height:45px;
	line-height:40px;
	margin:0;
	padding-top:5px;
	position:relative;
	width:100%;
	z-index:3;
}
.pricer .col .header .price:before {
	background:-moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
	background:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0)));
	content:'';
	height:1px;
	left:0;
	position:absolute;
	top:-1px;
	width:100%;
}
.pricer .col .header .price:after {
	content:'';
	height:45px;
	left:0;
	position:absolute;
	top:0;
	-webkit-transform:scale(1.7, 1);
	width:100%;
	z-index:-1;
}
.pricer .col .header .price span {
	display:inline-block;
	font-size:20px;
	vertical-align:text-top;
}
.pricer .col .header .payment {
	font-size:15px;
	height:35px;	
	letter-spacing:-1px;
	margin:0;	
	padding:0;
	position:relative;
	width:100%;
}

/* label */

.pricer .col .header .label {
	background:-moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), color-stop(70%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
	background-color:#E4E4E4;
	border: solid 1px #8C8C8C;
	border-bottom: solid 1px #5F5F5F;	
	border-right: solid 1px #5F5F5F;
	-moz-border-radius-bottomleft:0px;	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-left-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-left-radius:0px;	
	border-bottom-right-radius:0px;
	-moz-box-shadow:0 2px 5px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.5);
	box-shadow:0 2px 5px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.5);	
	color:#444;
	font-size:12px;
	height:20px;
	line-height:19px;
	margin-top:-10px;
	margin-left:-1px;
	text-shadow:1px 1px 0 rgba(255, 255, 255, 0.8);
	text-transform:uppercase;
	font-weight:bold;
	width:140px;
	z-index:4;
}
.pricer .col:hover .header .label,
.pricer .selected .header .label { width:150px; }
.pricer .col .header .label span {
	-moz-border-radius-bottomleft:0px;	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-left-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-left-radius:0px;	
	border-bottom-right-radius:0px;
	display:block;
	border-top:solid 1px #FFF;
	height:18px
}

/* details */

.pricer .col .details ul {
	margin:0;
	padding:0;
	padding-top:5px;
	padding-bottom:2px;
	position:relative;
}
.pricer .col:hover .details ul,
.pricer .selected .details ul { padding-bottom:2px; }
.pricer .col .details ul:before {
	background:-moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
	background:-webkit-gradient(linear, right bottom, left top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.1)), color-stop(100%, rgba(255, 255, 255, 0)));
	content:'';
	height:100%;
	left:-1px;
	position:absolute;
	top:30%;
	width:1px;
}
.pricer .col .details ul:after {
	background:-moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0) 100%);
	background:-webkit-gradient(linear, right bottom, left top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.1)), color-stop(100%, rgba(255, 255, 255, 0)));
	content:'';
	height:100%;
	right:-1px;
	position:absolute;
	top:30%;
	width:1px;
}
.pricer .col .details ul li {
	border-bottom:solid 1px #141414;
	border-top:solid 1px #2C2C2C;
	color:#EEE;
	font-size:14px;
	list-style-type:none !important;
	margin-left:15px;
	margin-right:15px;
	padding:10px;
	padding-left:8px;
	padding-right:8px;
	text-align:center;
	text-shadow:1px 1px 0 #000;	
	font-family: 'Droid Sans', sans-serif;
}
.pricer .col .details ul li:first-child { border-top:transparent; }
.pricer .col .details ul li:last-child { border-bottom:transparent; }
.pricer .col .details ul li.last { border-bottom:transparent; }
.pricer .col .details ul li strong { color:#FFF; }

/* tooltip */

.pricer .col .details ul li.tooltop-container { 
	position:relative;
	z-index:inherit !important;
	z-index:2; /* IE7 FIX */
}
.pricer .col .details ul li.tooltop-container:hover { 
	z-index:inherit !important;
	z-index:3; /* IE7 FIX */
}
.pricer .col .details ul li.tooltop-container .tooltip {
	background:-moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), color-stop(70%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
	background-color:#E4E4E4;
	border-bottom:solid 1px #ABABAB;
	border-left:solid 1px #FFF;
	border-right:solid 1px #ABABAB;
	border-top:solid 1px #FFF;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.5);
	box-shadow:2px 2px 4px rgba(0, 0, 0, 0.5);
	color:#444;
	font-size:12px;
	left:190px;
	letter-spacing:normal;
	opacity:0;
	padding:8px;
	position:absolute;
	text-align:left;
	text-shadow:1px 1px 0 rgba(255, 255, 255, 0.8);
	top:-6px;
	visibility:hidden;
	width:150px;
	z-index:20;	
	/* CSS animations */		
	-moz-transition-property:opacity, visibility, left;
	-moz-transition-duration:0.3s, 0.3s, 0.3s;
	-moz-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
	-o-transition-property:opacity, visibility, left;
	-o-transition-duration:0.3s, 0.3s, 0.3s;
	-o-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
	-webkit-transition-property:opacity, visibility, left;
	-webkit-transition-duration:0.3s, 0.3s, 0.3s;
	-webkit-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
	transition-property:opacity, visibility, left;
	transition-duration:0.3s, 0.3s, 0.3s;
	transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
}





/* signup */

.pricer .col .signup {
	height:50px;
	position:relative;
	margin-top:10px;
}

.pricer .col .signup a {	
	border:0 none;
	color:#FFF !important;
	display:block;
	font-size:15px;
	font-weight:bold;
	height:50px;
	line-height:50px;
	margin:auto;
	outline:none;
	overflow:hidden;
	padding:0px;
	position:relative;
	text-align:center;
	text-decoration:none !important;
	text-shadow:1px 1px 5px rgba(0, 0, 0, 0.3), 1px 1px 0 rgba(0, 0, 0, 0.5);
	width:130px;
	z-index:1;	
}




/**** 3 color styles (v1.0): blue, green, red ****/

/* blue */

/*.pricer .blue:hover,
.pricer .blue.selected {
	-moz-box-shadow:0 0 12px rgba(86, 176, 206, 0.8), 0px 0px 1px #c815c6, 0px 0px 3px #c815c6;
	-webkit-box-shadow:0 0 12px rgba(86, 176, 206, 0.8), 0px 0px 1px #c815c6, 0px 0px 3px #c815c6;
	box-shadow:0 0 12px rgba(86, 176, 206, 0.8), 0px 0px 1px #c815c6, 0px 0px 3px #c815c6;
}*/
.pricer .blue .header {
	background:#b643c0;
	background:-moz-linear-gradient(top, #8d2e93 0%, #c735c9 50%, #d770d3 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #8d2e93), color-stop(50%, #c735c9), color-stop(100%, #d770d3));
	border-bottom:solid 1px #552b58;
	border-left:solid 1px #b07dc1;
	border-right:solid 1px #552b58;
	border-top:solid 1px #b07dc1;
}
.pricer .blue .header .product { 
	background-color:#c02fbe;
	border-bottom:solid 1px #802696; 
}
.pricer .blue .header .price { border-top:solid 1px #bb7dc1; }
.pricer .blue .header .payment { color:#fde5fd; }
.pricer .blue .signup a {
	background:#c735c9;
	background:-ms-linear-gradient(bottom, #8d2e93 0%, #c735c9 50%, #d770d3 100%);
	background:-moz-linear-gradient(bottom, #8d2e93 0%, #c735c9 50%, #d770d3 100%);
	background:-webkit-gradient(linear, left bottom, left top, color-stop(0, #8d2e93), color-stop(50%, #c735c9), color-stop(100%, #d770d3));
	border-bottom:solid 1px #552b58;
	border-left:solid 1px #bb88dc;
	border-right:solid 1px #552b58;
	border-top:solid 1px #bb88dc;
}
.pricer .blue .signup a:hover {
	background:#8d2e93;
	background:-moz-linear-gradient(top, #8d2e93 0%, #c735c9 50%, #d770d3 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #8d2e93), color-stop(50%, #c735c9), color-stop(100%, #d770d3));	
	border-bottom:solid 1px #bb88dc;
	border-left:solid 1px #552b58;
	border-right:solid 1px #bb88dc;
	border-top:solid 1px #552b58;
}