@media screen {
	
	.packages {
		width: 100%;
		margin-top: 30px;
		padding: 0;
	}
	
	.packages li, .packages ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.packages li.first {
		position: relative;
		border: 1px solid #ccc;
		padding: 0;
		margin: 30px 10px 0 0;
	}
	
	.packages li.first .content {
		padding: 0 0 10px 0;
		text-align: center;
	}
	
	.packages li.first .packageicon {
		position: absolute;
		width: 64px;
		height: 59px;
		background: transparent url(img/package.png) no-repeat scroll 0 0;
		margin-top: -30px;
	}
	
	.packages li.first.current_package .packageicon {
		position: absolute;
		margin-top: -70px;
		left: 20px;		
	}	
	
	.packages li.first, .packages li.first.current_package {
		float: left;
		width: 23%;	
	}	
	
	.packages li.first.current_package {
		background: transparent url(img/a-r.png) repeat-y scroll top right;
		padding: 0 20px 0 0;
		border: 0;
		margin: 0 10px 0 0;
	}
	
	.packages li.first.current_package .topright {
		background: transparent url(img/a-tr.png) no-repeat scroll top right;
		height: 26px;
		margin-right: -20px;
	}	
	
	.packages li.first.current_package .topleft {
		background: transparent url(img/a-tl.png) no-repeat scroll top left;
		height: 26px;
		margin: 0;
	}
	
	.packages li.first.current_package .content {
		background: transparent url(img/a-l.png) repeat-y scroll top left;
		padding: 20px 0 20px 20px;
	}	
	
	.packages li.first.current_package .bottomright {
		background: transparent url(img/a-br.png) no-repeat scroll bottom right;
		height: 26px;
		margin-right: -20px;
	}
	
	.packages li.first.current_package .bottomleft {
		background: transparent url(img/a-bl.png) no-repeat scroll bottom left;
		height: 26px;
		margin: 0;
	}	
	
	.packages li.first.current_package h2 {
		font-size: 2em;
	}
		
	.packages .button {
		width: 50%;
		margin: 10px auto 0 auto;
	}
	
	.packages li span {

	}
	
	.packages li span.label {
		color: #333;
	}
	
	.packages li span.value {
		margin-left: 0.5em;
		color: #000;
	}
	
	.packages li.price {
		margin-top: 1em;
	}
	
	.packages li.price + li {
		margin-bottom: 1em;
	}

	.packages .price .label {
		display: block;
		font-size: 1em;
	}
	
	.packages .price .value {
		font-size: 1.5em;
		color: #e60;
	}
	
	.packages .priceval {
		display: block;
		font-size: 1.5em;
		color: #e60;
	}
	
	table.Grid {
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
		width: 100%;
	}
	
	table.Grid td.feature {
		background: #eee;
	}
	
	table.Grid tr.Caption th {
		background: #eee;
		font-size: 1.6em;
		font-weight: normal;
	}
	
	table.Grid tr.Caption th:first-child {
		text-align: left;		
	}
	
	table.Grid td, table.Grid th {
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;	
		padding: 0.5em	
	}
	
	table.Grid td {
		padding: 0.8em;	
		width: 20%;
	}	
	
	table.Grid .data {
		text-align: center;
	}
	
	table.Grid .data .button {
		display: block;
		width: 50%;
		margin: 0 auto;
	}
	
	.packagetabs {
		position: relative;
		width: 645px;
	}
	
	.packagetabs .names {
		clear: both;
		display: none;
	}
	
	.packagetabs .names .name {
		float: left;
		width: 25%;
		text-align: center;
		text-transform: uppercase;
		font-size: 2.5em;
		color: #999;
		cursor: pointer;
	}
	
	.packagetabs .invisible {
		display: none;
	}
	
	.packagetabs .names .name.active {
		color: #000;
	}

	.packagetabs .infobubble-top {
		background: #ccc url(img/ccc-tr.png) no-repeat scroll top right;
		height: 20px;
	}
	
	.packagetabs .bubble-top-inside {
		background: #ccc url(img/ccc-tl.png) no-repeat scroll top left;
		width: 20px;
		height: 20px;
	}	
	
	.packagetabs .arrowarea {
		position: relative;
		height: 20px;
	}
	
	.packagetabs .arrowarea .arrow {
		position: relative;
		width: 25px;
		height: 20px;
		left: 0;
		top: 0;
		background: transparent url(img/ccc-arrow-up.png) no-repeat scroll 0 0;
		display: none;
	}	
	
	.packagetabs .infobubble {

	}
	
	.packagetabs .infobubble .bubble-inside {
		background: #ccc;
		padding: 0 20px;
	}
	
	.packagetabs h2.nonjs-heading {
		padding-top: 20px;
	}
	
	.packagetabs .packageframe {
		overflow: hidden;
	}
	
	.packagetabs .packageframe .package-info {
		width: 33%;
		float: left;
		display: block;
		padding: 0 0 1000px 0;
		margin-bottom: -1000px;
	}
	
	.packagetabs .packageframe .package-info.general,
	.packagetabs .packageframe .package-info.price {
		border-right: 1px solid #fff;
	}
	
	.packagetabs .packageframe .package-info.price,
	.packagetabs .packageframe .package-info.go {
		text-align: center;
	}
	
	.packagetabs .packageframe .package-info.go .arrow-order {
		position: relative;
		width: 188px;
		height: 138px;
		background: transparent url(img/arrow-order.png) no-repeat scroll 0 0;
		margin: 30px auto;
	}
	.packagetabs .packageframe .package-info.go .arrow-order a {
		position: relative;
		top: 48px;
		height: 34px;		
		padding-right: 10px;
		font-size: 30px;
		color: #000;
		text-shadow: 0 1px 2px rgba(255, 204, 153, 0.8);
		text-decoration: none;
		text-transform: uppercase;
	}
/* ======================================================= */	
/* arrow upgrade, downgrade added by Femi */	
.packagetabs .packageframe .package-info.go .arrow-upgrade {
		position: relative;
		width: 188px;
		height: 138px;
		background: transparent url(img/arrow-upgrade.png) no-repeat scroll 0 0;
		margin: 30px auto;
	}
.packagetabs .packageframe .package-info.go .arrow-downgrade {
		position: relative;
		width: 188px;
		height: 138px;
		background: transparent url(img/arrow-downgrade.png) no-repeat scroll 0 0;
		margin: 30px auto;
	}
	.packagetabs .packageframe .package-info.go .arrow-upgrade a,
	.packagetabs .packageframe .package-info.go .arrow-downgrade a,
.packagetabs .packageframe .package-info.go .change-period a
	 {
		position: relative;
		top: 58px;
		height: 24px;		
		padding-right: 10px;
		font-size: 20px;
		color: #000;
		text-shadow: 0 1px 2px rgba(255, 204, 153, 0.8);
		text-decoration: none;
		text-transform: uppercase;
	}	
/* end arrows upgrade, downgrade */
/* ======================================================= */	
	.packagetabs .packageframe .package-info.price p.price {
		margin-top: 10px;
		font-size: 30px;
		text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
		border: 0;
	}	
	
	.packagetabs .packageframe .package-info > div {
		padding: 0 20px;
	}
	
	.packagetabs .infobubble-bottom {
		background: #ccc url(img/ccc-br.png) no-repeat scroll bottom right;
		height: 20px;
	}
	
	.packagetabs .bubble-bottom-inside {
		background: #ccc url(img/ccc-bl.png) no-repeat scroll bottom left;
		width: 20px;
		height: 20px;
	}	
	
}