.col-one {float:left; width:20%;}
.col-two {float:left; width:75%;}

.basket-left-col {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}

.holder {background:#fff; padding:20px; margin-bottom:15px; -webkit-border-radius: 3px; border-radius: 3px; border:1px solid #eee;}
.holder h2, .holder h3, .holder h4, .holder h5 {margin-top:0; padding:0;}
.holder p {font-size:80%;}
.smallprint {font-size:12px;}
.stage {display:none;}




/* ========== Buttons ========= */

a.proceed, .proceed {
    -webkit-transition: all ease-in-out .15s;
    -moz-transition: all ease-in-out .15s;
    margin: 0px 20px;
    text-decoration: none;
    letter-spacing: .03em;
    text-align: center;
    font-size: 80%;
    line-height: normal;
    color: #fff;
    display: inline-block;
    padding: 12px 35px;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: #aac687;
    background-image: -webkit-linear-gradient(#aed72e, #94b743);
    background-image: -moz-linear-gradient(#aed72e, #94b743);
    background-image: -o-linear-gradient(#aed72e, #94b743);
    background-image: linear-gradient(#aed72e, #94b743);
}
a.proceed:hover {
    background-color: #1a9abc;
    color: #fff;
}

/* ========== Progressbar ========== */

#progressbar {height:20px; border:1px solid #f8f8f8; border-radius:4px; position:relative; line-height:20px;}
.ui-progressbar .ui-progressbar-value {margin: -1px; height: 100%;}
#progressbar .ui-widget-header, .next, .checkoutBtn {
       background-color: #aac687;
	/*-pie-background:linear-gradient(#aed72e, #94b743);*/
	background-image:-webkit-linear-gradient(#aed72e, #94b743);
	background-image:-moz-linear-gradient(#aed72e, #94b743);
	background-image:-o-linear-gradient(#aed72e, #94b743);
	/*background-image:-ms-linear-gradient(#aed72e, #94b743);*/
	background-image:linear-gradient(#aed72e, #94b743);
}
.progress-label {
    position: absolute;
    left: 50%;
    top:-2px;
    font-weight: normal;
    font-size:11px;
    text-shadow: 1px 1px 0 #fff;
    color: rgb(133, 167, 92);
}


/* ============== stage 1 ============== */

#category-tabs { display:block; background:#9DC8E2; padding:10px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;}
#category-tabs span {font-size:75%; font-weight:lighter;}


.prefix-tabs ul li {list-style:none; display:inline-block; position:relative; z-index:99;}
.prefix-tabs ul li a {display:block; padding:10px 30px; border-radius: 5px 5px 0 0; border:1px solid #eee; border-bottom:none; background:#f5f5f5; color: #8AA8BD;}
.prefix-tabs li a:hover, .prefix-tabs .selected {background:#fff; font-weight:bold; text-decoration:none; margin-bottom:-1px; padding:11px 30px;}
.prefix-class {margin:0px 30px 10px;background:#f5f5f5; font-weight:normal; padding:15px 10px; border-radius:5px;}
.prefix-class li {width:25%; padding:0; float:left; list-style:none;}
.prefix-class li a {display:block; text-align:center;}
.prefix-class .bronzeSelected, 
.prefix-class .silverSelected, 
.prefix-class .goldSelected,
.prefix-class .platinumSelected  { -webkit-border-radius: 3px; border-radius:3px;}
.boss-container {padding:15px; border:1px solid #eee; border-radius:0px 4px 4px 4px; background:#fff; margin:15px 0;}

.boss-container .feature-block {width:25%!important;}

#packageTableContainer h3, #twerp h3 {display:block; height:55px; line-height:55px; padding:0 15px; margin:0 0 10px 0;}
.package-white {background:#fff; padding:10px!important; border:1px solid #eee; margin-bottom:10px;}

#numbersContainer {float:right; width:100%;}
#numbersContainer a {
	font-size:14px;
	letter-spacing:0px;
	display:block;
	width:25%;
	float:left;
	text-align:center;
	padding:19px 0px;
	text-decoration:none;
	color:#6e6e6e;
}
#numbersContainer a.odd
{
	
	background-color:#fff;
}
#numbersContainer a.even
{
	background-color:#f8f8f8;
}
#numbersContainer a:hover {
    font-weight: bold;
}
.backPage,
.nextPage {margin:0px; cursor:pointer;}
.backPage {float:left!important;}
.nextPage {float:right!important}


/* ============== stage 2 ============== */

.grey-box {background:#f8f8f8; padding:0px 10px; display:block; position:relative; border-radius:5px; margin:5px;}
.grey-box p {font-size:80%; width:60%; float:left; padding:0 0 0 10px;}
.grey-box .DirectToNumber_input {border-radius:4px; border:1px solid #ccc; padding:5px; position:absolute; top:25px; right:40px; width:30%;}

.packageTable {font-size:75%; margin-top:25px;}

.number_alert_message { margin-right:5px;}

.packageTable td {width:14.285714%; text-align:center;}
.bb {height:30px; border-top:1px solid #cdcdcd!important;}

#packageTableContainer .selecticks a,
#packageTableContainer .selecticks  a:hover,
#packageTableContainer .selecticks  a.selected 
{
    background-image:url(../img/sprite-package-tick.png);
    height:40px;
	width:40px;
	display:block;
	text-indent:-9999px;
}
.selecticks td {padding:15px 0px;}	
#packageTableContainer .selecticks a {background-position: top left;}
#packageTableContainer .selecticks  a:hover {background-position:top center;}      
#packageTableContainer .selecticks  a.selected {background-position: top right;}

.packageContainer tr.selected a {
    background-image: url("../img/packagetickselected.png");
    display: block;
    height: 40px;
    width: 40px;
}
.packageContainer a.selected {
    background-image: url("../img/packagetickselected.png");
    display: block;
    height: 40px;
    width: 40px;
}

/* ============== stage 3 ============== */

.feature-wrapper {width:auto;}
.feature-wrapper span {clear:both; display:block;}
.feature-wrapper .feature {width:12.50%; float:left; text-align:center; font-size:70%;}

/* ============== stage 4 ============== */

#form-wrap {
    position: relative;
    display: block;
    min-height: 400px;
}/* margin-left:45px;}*/

#form-wrap label {position:absolute; width:130px; padding:5px 0; display:block; font-size:80%; font-weight:bold;}
#namelbl     {top:25px; left:0; }
#businesslbl {top:60px; left:0;}
#emaillbl    {top:95px; left:0;}
#phonelbl    {top:130px; left:0;}
#add1lbl     {top:165px; left:0;}
#add3lbl     {top:235px; left:0;}
#add4lbl     {top:270px; left:0;}
#postlbl     {top:305px; left:0;}


.namebox     {position:absolute; top:25px; left:140px;}
.businessbox {position:absolute; top:60px; left:140px;}
.emailbox    {position:absolute; top:95px; left:140px;}
.phonebox    {position:absolute; top:130px; left:140px;}
.add1box     {position:absolute; top:165px; left:140px;}
.add2box     {position:absolute; top:200px; left:140px;}
.add3box     {position:absolute; top:235px; left:140px;}
.add4box     {position:absolute; top:270px; left:140px;}
.postbox     {position:absolute; top:305px; left:140px;}

.nameerror  {position:absolute; top:25px; left:450px;}
.emailerror {position:absolute; top:95px; left:550px;}
.phoneerror {position:absolute; top:130px; left:450px;}
.add1error  {position:absolute; top:165px; left:450px;}
.posterror  {position:absolute; top:305px; left:450px;}

.error {color:Red; font-size:78%; width:200px; padding:5px 0; display:block;}
.details {padding:5px 10px; width:280px; border:2px solid rgb(230,230,230);}

/* ============== stage 5 ============== */

.cart-row {display:block; position:relative;}
.cart-row li:nth-child(1) {width:57%; padding-left:3%;}
.cart-row li:nth-child(2),.cart-row li:nth-child(3), .cart-row li:nth-child(4)  {width:13.333333%; text-align:right;}
        
.number-wrapper {padding:10px 0px; min-height:80px;}
.number-wrapper:nth-child(odd) {background:#f8f8f8;}
.number-wrapper ul {margin:0; padding:0;}
ul#cart-row  {display:block; clear:both; margin:0; padding:0;}
#cart-header 
{
    background:#198FCB;
    -webkit-border-radius: 3px 3px 0px 0px;
    border-radius: 3px 3px 0px 0px; 
    color:#fff;
    font-weight:bold;
    height:60px;
    line-height:60px;
    padding:0;
    margin:0;
}
li.cart-col 
{
    display:block;
    float:left;
    margin:0;
    padding:0;
}
#snapshot {background:#f8f8f8; border:2px dashed #ccc; padding:10px; margin-top:30px; position:relative;}
#snapshot h4 {font-size:95%; margin:0; padding:0;}
#snapshot p {font-size:80%;}
.checkoutBtn {position:absolute; 
                right:30px; 
                top:25%;                      
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            padding: 10px 25px;
            border: 0px solid #0b7942;
            border-radius: 2px;
            text-shadow: #074c29 1px 1px 1px;
            font: normal normal bold 14px arial;
            color: #ffffff;
            text-decoration: none;
}
.checkoutBtn:hover,
.checkoutBtn:focus {
    border: 0px solid #0e9752;
    background: #992828;
    background: -webkit-gradient(linear, left top, left bottom, from(#16eb80), to(#0d914f));
    background: -moz-linear-gradient(top, #16eb80, #0d914f);
    background: linear-gradient(to bottom, #16eb80, #0d914f);
    color: #ffffff;
    text-decoration: none;
}
.checkoutBtn:active {
    background: #982727;
    background: -webkit-gradient(linear, left top, left bottom, from(#0b7942), to(#0b7942));
    background: -moz-linear-gradient(top, #0b7942, #0b7942);
    background: linear-gradient(to bottom, #0b7942, #0b7942);

}
.package {color:#999999; font-size:80%;}

/* ============ #cart =========== */

#cart {background:#fff; padding:20px; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; border:1px solid #eee;}
#cart h3 {margin:0; padding:0;}
#cart h4, #progress h4 {margin:10px 0; padding-top:5px; font-family:'Oswald'; text-transform:uppercase; font-size:85%;}
#cart ul {margin:0; padding:0;}
#cart #monthlyTotals, #cart #oneOffTotals {background:#f8f8f8; padding:5px; font-size:13px; font-weight:bold; margin:7px 0px; border-radius:4px; clear:both;}
#cart #monthlyTotals {margin-top:15px}
#cart table, #totals table {width:100%;}
	
#totals {background:#eee; margin:0 0 15px 0; padding: 10px 20px; font-size:14px; font-weight:bold; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}

.itemOneOff, .itemMonthly {display:inline-block; clear:both!important; font-size:12px; width:100%} /* the backup of this line is above */
.itemOneOff .itemWrap {display:block; padding-bottom:4px;}
.itemOneOff .itemWrap .itemName {float:left; width:60%; display:block;}
.itemOneOff .itemWrap .itemPrice{float:left; width:20%; display:block;}
.itemOneOff .itemWrap .cartRemove {float:left; width:20%;color: rgb(63, 114, 155)!important; text-decoration:none; font-weight:bold; display:block; text-align:right;}

.itemMonthly .itemWrap {display:block; }
.itemMonthly .itemWrap .itemName {float:left; width:60%;}
.itemMonthly .itemWrap .itemPrice {float:left; width:40%; text-align:left;}

.cartPackageName {color:#666;}


/* ========== accordion ========= */

.accordion h3 { cursor:pointer; display:block; font-size:1em; font-weight:bold;}
.accordion h3 span:nth-last-child(2) {display:none;}
.accordion h3 span .hide {display:none;}
.accordion h3.ui-accordion-header {color:rgb(255,255,255); background:#198FCB; height:35px; line-height:35px; border:1px solid #fff; border-top:0; padding:5px 10px; border-radius:4px;}
.accordion h3.ui-state-active, 
.accordion h3.ui-state-active:hover,
.accordion h3.ui-accordion-header:hover {}
.accordion h3 .icon-plus-sign {float:right; display:block; font-size:2em; padding-top:3px;}
.accordion div {padding:0px;}


/* IPADS - LANDSCAPE */
@media 
only screen and (min-device-width: 768px) 
            and (max-device-width: 1024px) 
            and (orientation: landscape) 
            {
.prefix-tabs li a:hover, .prefix-tabs .selected {
    padding: 11px 20px;
}
.prefix-tabs ul li a {
    padding: 10px 20px;
}
                
}


/* IPADS - PORTRAIT */
@media 
only screen and (min-device-width: 768px) 
            and (max-device-width: 1024px) 
            and (orientation: portrait) 
            {
.prefix-tabs li a:hover, .prefix-tabs .selected {
    padding: 11px 20px;
}
.prefix-tabs ul li a {
    padding: 10px 20px;
}    
.wrapper-dropdown {width:150px;}
.prefix-class {margin:0px 0px 10px 0px; padding:10px 6px;}
}

/* SMARTPHONES - PORTRAIT & LANDSCAPE */
@media
only screen and (min-device-width: 320px) and (max-device-width: 480px),
only screen and (min-width: 320px) and (max-width: 480px) 
{
	
}