/*-----------------------
RESETS
-----------------------*/

.sectionBorder {
    margin-bottom: 20px;
    padding: 20px;
}

section.package-details.content ul.extras-list {
    width: auto;
}

.content p,
.content ol,
.content dd,
.content ul,
.content address {
    font-size: 1em;
}

.cta-panel,
.cta-price {
    float: none !important;
}

.planBox {
    border: 3px solid #CCCCCC;
    margin-bottom: 20px;
}

.planBox img {
    margin: 0 auto;
}

.planPrice {
    background-color: #FFF;
}

.planPrice h3 span {
    font-size: 18px;
}

#plan-features {
    margin-bottom: 0;
    border-radius: 5px 5px 0 0
}

.more-options {
    margin-bottom: 20px;
}

/*-----------------------
GENERIC
-----------------------*/

.inner-wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 10px;
}

.content-wrapper {
    padding: 30px 0;
}

.content-wrapper p {
    margin: 0 0 10px;
    line-height: normal;
}

.content-wrapper h3 {
    line-height: normal;
    margin-bottom: 20px;
}
.content-wrapper .planBox h3 {
    margin-bottom: 0px;
}
.content-wrapper h3 .iii {
    margin-right: 5px;
    font-size: 32px;
}

.content-wrapper ul li {
    margin-bottom: 10px;
}

a.call-link,
a.call-link:hover {
    text-decoration: none;
    cursor: default;
}

ul.list-icon {
}

ul.list-icon li {
    padding-left: 20px;
    position: relative;
}
ul.list-icon li .iii-list {
    overflow: hidden;
    position: absolute;
    z-index: 1;
    left: 0px;
    top: -8px;
}

/*-----------------------
HEADER
-----------------------*/

.content-header {
    overflow: hidden;
    font-family: Pluto, Arial, Helvetica, sans-serif;
}

/*Header Title*/

.header-title {
    background-color: #FFF;
    padding: 15px 0;
}

.header-title h1 {
    margin-bottom: 0;
    font-size: 3.2em
}

.header-title .subtitle {
    font-size: 30px;
    line-height: normal;
    margin-bottom: 20px;
}

.header-title .tagline {
    font-weight: 700;
    font-size: 18px;
    margin-top: 10px;
}

.header-title ul li {
    font-weight: 200;
    margin-bottom: 10px;
}


/*Header Bar*/

.header-bar {
    background-color: #000093;
    position: relative;
    padding: 15px 0;
    color: #FFF;
}

.img-parent {
    position: relative;
}

.header-img {
    position: absolute;
    right: -80px;
    bottom: 20px;
    width: 40%;
    z-index: 0;
}
.resources-page .header-img {
    right: 0;
    bottom: -10px;
    width: 40%;
} 

.handset-splash {
    max-width: 250px;
    margin: 0 auto;
    color: #FFF;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
}

.handset-splash .iii {
    float:left; 
    margin-right: 10px;
}
.handset-splash .title-icon {
    float: left;
    display: block;
    max-width: 150px;
    padding-top: 10px;
}

/*-----------------------
CONTENT
-----------------------*/

.title-phone h3 {
    font-weight: 200;
    font-weight: 200;
    display: none;
}

.terms {
    font-size: 15px;
    line-height: 1.1em;
}

#more-features {
    border-radius: 0 0 5px 5px;
    font-family: Pluto, Arial, Helvetica, sans-serif;
}

#more-features h5 {
    margin-bottom: 3px;
}

#more-features p {
    margin-bottom: 15px;
}

a.more-link {
    display: block;
    padding: 15px 20px;
    background-color: #000093;
    color: #FFF;
    letter-spacing: -1px;
    font-family: Pluto;
    font-weight: 700;
    font-size: 1.4em;
    line-height: 1.3em;
    text-decoration: none;
}
a.more-link:hover {
    text-decoration: none;
    background-color: #ff8200;
}

.background-icon {
    position: relative;
    overflow: hidden;
}
.background-icon .iii-background {
    overflow: hidden;
    color: #eee;
    font-size: 200px;
    position: absolute;
    z-index: -1;
    right: 30px;
    bottom: -55px;
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

.cta-phone {
    padding: 30px 0 40px;
}
.cta-phone h1 {
    font-weight: 200;
}


/*-----------------------
PRICE POINT
-----------------------*/

.banner-price {
    max-width: 250px;
    margin: 0 auto;
    position: relative;
    z-index: 999;
    margin-bottom: 10px;
}

.price-title {
    font-size: 25px;
    letter-spacing: -1px;
    line-height: 30px;
    margin-bottom: 10px;
    padding-left: 40px;
}

.price-details {
    height: 90px;
    display: inline-block;
}

.price-figure {
    font-size: 100px;
    line-height: 100px;
    letter-spacing: -5px;
}

.price-figure sup {
    font-size: 60px !important;
    line-height: 60px;
    letter-spacing: -3px;
    top: -0.46em;
    position: relative;
}

.price-month {
    display: block;
    font-size: 20px;
    letter-spacing: -1px;
    line-height: 25px;
    margin-top: -38px;
    text-align: right;
}

.price-terms {
    text-align: center;
    margin-top: 10px;
}

.price-extras {
    font-size: 18px;
}

.price-mincost {
    font-size: 16px;
    line-height: normal;
    display: block;
    font-weight: 200;
}


/*-----------------------
TABLE FEATURES LIST
-----------------------*/

.table-features-list {
    margin-bottom: 0;
    font-family: Pluto, Arial, Helvetica, sans-serif;
    font-weight: 200;
}

.table-features-list td {
    vertical-align: middle !important;
}

.table-features-list>tbody>tr>th {
    background-color: #ccc;
    text-align: center;
    padding: 12px 10px;
    width:60px;
}



/*-----------------------
TABLE FEATURES
-----------------------*/

.tableFeatures {
    font: 200 1.6em Pluto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0px;
    padding: 0px;
    width: auto;
    text-align: center;
    background-color: #F7F7F7
}

.tableFeatures table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.tableFeatures .tick {
    background: url(/business/art/bullet-grey.png) no-repeat center;
}

.tableFeatures .accordPlus {
    background: url(/business/art/accordion-plus.png) no-repeat 10px center;
}

.tableFeatures .accordMinus {
    background: url(/business/art/accordion-minus.png) no-repeat 10px center;
}

.tableFeatures .accordNull {
    background: url(/business/art/accordion-null.png) no-repeat 10px center;
}

.tableFeatures .accordSubPlus {
    background: url(/business/art/accordion-sub-plus.png) no-repeat 10px center;
}

.tableFeatures .accordSubMinus {
    background: url(/business/art/accordion-sub-minus.png) no-repeat 10px center;
}

.tableFeatures .accordSubNull {
    background: url(/business/art/accordion--sub-null.png) no-repeat 10px center;
}

.tableFeatures tr {
    background-color: #FFFFFF;
    border: 2px solid #F7F7F7;
}

.tableFeatures th {
    vertical-align: middle;
    text-align: center;
    padding: 15px;
    font-size: 14px;
    line-height: 1.3em;
}
.tableFeatures tr th:first-child {
    text-align: left;
}

.tableFeatures td {
    vertical-align: middle;
    text-align: center;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 200;
    line-height: 1.3em;
}

.tableFeatures tbody tr td:first-child {
    text-align: left;
    padding-left: 40px;
    font-weight: 700;
}
.tableFeatures .innerTables tbody tr td:first-child {
    padding-left: 15px;
    font-weight: 200;
}

.tableFeatures tr.toolTips p {
    font-family: Arial, sans-serif!important;
    color: #777 !important;
    font-size: 14px;
    line-height: 1.5em !important;
}

.tableFeatures tr.toolTips {
    position: relative;
    display: none;
    overflow: hidden;
    background: none !important;
    border: 0px solid transparent !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important;
    font-weight: 400 !important;
    font-size: 14px;
    line-height: 1.7em !important;
    background: none !important;
    margin-left: 10px;
}

.tableFeatures tr.toolTips > td {
    padding-left: 15px;
    line-height: normal;
}
.tableFeatures tr.toolTips > td,
.tableFeatures tr.toolTips > td > ul > li {
    background: none !important;
    border: 0px solid transparent !important;
    font-family: Arial, sans-serif!important;
    color: #777 !important;
    font-size: 14px;
    line-height: 1.5em !important;
    background: none !important;
}

.tableFeatures tr.toolTips > td > ul > li {
    list-style-type: square;
    margin-left: 40px;
}

.tableFeatures table.innerTables {
    margin-top: 10px;
}

.toolClicker {
    cursor: pointer;
}

/*-----------------------
MEDIA QUERIES
-----------------------*/

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    
    .inner-wrapper {
        padding: 0 20px;
    }
    
    .content-wrapper h3 .iii {
        font-size: 48px;
    }
    
    .planBox {
        margin-bottom: 0 !important;
    }
    
    .title-phone h3 {
        display: block;
    }
    
    .handset-splash {
        margin-top: 30px;
        margin-bottom: 20px;
    }
    
    .tableFeatures tbody tr td:first-child {
        font-weight: 200;
    }

}

/* Small devices (tablets, 768px and up) */
@media (min-width: 990px) {
    
    .header-img {
        width: 50%;
    }
    
}

/*-----------------------
RESPONSIVE TABLE
-----------------------*/

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 760px)  {

	/* Force table to not be like tables anymore */
	.tableFeatures table, 
    .tableFeatures thead,
    .tableFeatures tbody, 
    .tableFeatures th, 
    .tableFeatures td, 
    .tableFeatures tr { 
		display: block; 
	}
    tableFeatures tr { 
		display: none; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.tableFeatures thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.tableFeatures td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
    .tableFeatures .innerTables td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	.tableFeatures td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 16px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
    .tableFeatures .innerTables td:before {
		top: 6px;
	}
	
	/*
	Label the data
	*/
	.tableFeatures td:nth-of-type(1):before { content: ""; }
    .tableFeatures td:nth-of-type(2):before { content: "Softphone"; }
	.tableFeatures td:nth-of-type(3):before { content: "Standard"; }
	.tableFeatures td:nth-of-type(4):before { content: "Cordless"; }
	.tableFeatures td:nth-of-type(5):before { content: "Premium"; }
    
    
    /*
	Label the data
	*/
	.tableFeatures .innerTables td:nth-of-type(1):before { content: ""; }
    .tableFeatures .innerTables td:nth-of-type(2):before { content: "0 month term"; }
	.tableFeatures .innerTables td:nth-of-type(3):before { content: "12 month term"; }
	.tableFeatures .innerTables td:nth-of-type(4):before { content: "24 month term"; }
    
}