@charset "utf-8";
/* CSS Document */

/* GENERAL ELEMENTS*/
.storeFront #content { width: 970px; margin: 0 auto;}

/* Sprites map*/
/*Low Resolution sprites*/
.squeezebox.info,.gold-star,.hbo-logo,.starz-logo,.cinemax-logo,.showtime-logo,.tmc-logo:before,.encore-logo,.epix-logo,.tv-select-icon,.computer-internetplus-icon,.phone-internetplus-icon{background-image:url('../images/CharterSpritesMapPng8.png');}
/*Hige Resolution sprites*/
.chat-icon,.phone-icon,.small-gray-line,.medium-gray-line,.large-gray-line{ background-image:url('../images/CharterSpritesMapPng24.png');}
.storeFront .package:first-child { background: none;}
.storeFront .package { background :url('../images/accordion-sub-shadow.png') 50% top no-repeat;}

/* Icons sprite */
.gold-star{width:20px;height:20px;display:inline-block;background-position: -314px -21px;}

/* Default images*/
.large-tv{background-position:0px 0px;}

.small-phone {width: 69px; height: 120px; vertical-align: -3px; background-position: -330px -65px;}
.large-phone{background-position:0px -322px;}
.img-small-package-prop{width: 129px;height: 72px;display:inline-block;}
.img-small-prop{width: 104px;height: 62px;display:inline-block;}
.img-medium-prop{width: 104px;height: 62px;display:inline-block;}
.img-tv-large-prop{width:190px;height:125px;display:inline-block;margin: auto;}
.img-phone-large-prop{height:177px;width:130px;display:inline-block;margin:auto;}

.small-gray-line{width: 271px;height: 10px; display:inline-block; background-position: -720px -300px;}
.medium-gray-line{width: 430px;height: 10px; display:inline-block; background-position: -8px -587px;}
.large-gray-line{width: 460px; height: 10px; display:inline-block; background-position: -8px -603px;}

/* Logos */
.hbo-logo{ background-position: -70px -207px; }
.starz-logo{ background-position: -415px -280px;width:80px;}
.cinemax-logo{ background-position: -110px -258px; width:88px; }
.showtime-logo{ background-position: -10px -265px;  width:88px;}
.tmc-logo{position:relative;width:91px;}
.tmc-logo:before{ background-position: -418px -188px; width:91px; height:39px; display:block; position:absolute; top:0; left:0; content:' ';}
.encore-logo{ background-position: -415px -150px; padding-bottom:4px; width:91px;}
.epix-logo{ background-position: -428px -103px;}

/* All the different type of headers */
/*Store front Header*/
.header{width:100%;}
.header .contact{float:right;font-weight: 700;font-size: 14px;margin: 0px 10px 20px 0px;}
.header .contact li{display:inline;}
.header .chat, .header .phone{position:relative;}
.header .chat{background-position: -942px -138px;width: 43px;height: 43px;display: inline-block;top: 23px;}
.chat-icon{float:left; background-position: -942px -138px;width: 43px;height: 43px;display: inline-block;top: 23px;}
.phone-icon{float:left; background-position: -842px -90px;width: 43px;height: 43px;display: inline-block;top: 23px;}
.header .number{color:#333333;}
.header .phone{background-position: -890px -90px;width: 43px;height: 43px;display: inline-block;top: 18px;}

/*Gray Header*/
.header.gray{background-position: -1px -235px;overflow: hidden;}
.header .logo{background-position: -159px 0px;width: 145px;height: 34px;display:inline-block;margin: 5px 25px 0px 20px;}

/*Tab Header*/
.header.tab ul, .header.tab li{display: inline-block;}
.header.tab a,.header.tab a:visited{color: #858585;font-size: 12px;font-weight: bold;}
.header.tab li.selected{background-color: #ffffff;padding: 5px 10px 3px 10px;border-radius: 5px 5px 0px 0px;margin-right: 15px;box-shadow: 0px -1px 20px #d8d8d8;}
.header.tab li.selected a {font-size: 18px;text-decoration: none;}
.header.tab .selected a,.header.tab .selected a:visited{color: #006699;}

/* ----- CHANGE ADDRESS ----- */
#content-header { margin: 20px 0 10px 0; overflow: hidden;}
#content-header .change-address { float: right;}

/* Package Expandable */
.package-list { border-radius: 15px; box-shadow: 0px 0px 5px 2px #d8d8d8; margin: 10px auto; overflow: hidden; width: 940px;}
.package-list li{list-style:none;}
.package-list .package{padding: 1px 0px 0px 0px;position: relative;}
.package-list li.package:first-child:before{display:none;}
.package-list .package:before{background-color:transparent;}
.package-list .package:before{ background-position:-14px -287px;position: absolute;top: 0;z-index: 10; content:' '; display:block; height:10px; width:100%; }


.package-list .summary>li{ display:inline-block; margin-right: 20px; vertical-align: middle;}
.package-list .summary li.detail{ display: none;}
.package-list .summary>li:first-child { margin-right: 0; }
.package-list .summary { margin: 10px 20px 0 20px; font-size: 25px;}
.package-list .detail{ margin-left: 146px; padding-bottom: 20px; display: block; position: relative; top: -30px;}
.package-list .detail .slide-margin{margin: 10px 10px 10px 20px;}
.package-list .detail .slide-margin > ul {margin: -30px 0 -10px; }
.package-list .description{margin: 0px 0px 10px 0px;}
.package-list .description ul{margin:10px 0px 10px 0px;}
.package-list .special,.package-list .offer h3 { color:#333333; font-size: 0.61em; font-family: "Open Sans CondBold", arial, sans-serif;}
.package-list .offer h3 { font-size: 0.72em; margin-bottom: 10px;}
.package-list .offer{width: 354px;float:left;}
.package-list .offer:first-child { margin-right: 25px;}
.package-list .offer ul{margin-left:20px;}
.package-list .offer li { list-style:disc; font-size:5px; line-height: 16px;}
.package-list .offer li span{font-size:13px;vertical-align: -15%;}
.package-list .offer .description{font-size:13px;}
.package-list .main-description
{
	max-width: 360px;
	margin-bottom: 28px;
	font-size: 0.575em;
}
.package-list .pic{width:124px;}
.package-list .desc{ font: normal 35px 'Open Sans CondLight', Arial, sans-serif; width: 280px; line-height:94px; height:100px; color:#666; text-indent: 15px;}
.package-list .price { width: 270px;}
.package-list .price .display-price{float: none; display:inline-block;}
.package-list .price .right-group{ line-height:0.4em; }
.package-list .reg {font-size: 20px;position: relative;bottom: 20px;right: 5px;}
.package-list .equal { position: relative;}
.package-list .plus, .package-list .equal {color:#006699; bottom: 15px;}
.package-list .plus{ bottom: 0;font-weight: bolder; font-family: "Open Sans CondBold", arial, sans-serif;}
.package-list .equal{margin: 0px 20px 0px 0px;}
.package-list .img-small-prop{margin-right: 18px;}
.package-list .toggle.less,.package-list .toggle.see{display:none;}
.package-list .toggle.closed.less,.package-list .toggle.open.see{display: inline-block;}
.package-list .buttons{ width:137px;}
.package-list .buttons button, .package-list .buttons a, .package-list .buttons input{ width:100%; }
.mozilla .package-list .buttons button { width:119%; }
.package-list .special { font-size: 14px; font-family: "Open Sans Regular", arial, sans-serif; margin-bottom: 6px; text-align: right; margin-right: 15px;}

/*BROWSER STYLE for PACKAGE DETAIL EXPANDABLE*/
.mozilla .package-list .plus,.msie .package-list .plus{position:static;}


/* PAGE STYLES */
.storeFront h4.bundles
{
	font-size: 1.65em;
	font-weight:normal;
	color: #005781;
	font-family: "Open Sans Regular", arial, sans-serif;
	float: left;
	padding: 4px 20px 0 20px;
	max-width: 500px;
}
.storeFront h4.offers
{
	font-size: 1.65em;
	font-weight:normal;
	padding: 25px 20px 8px 20px;
	clear: left;
	color: #005781;
	font-family: "Open Sans Regular", arial, sans-serif;
}

/* STOREFRONT SUBHEADER */
.change-address .simple{float:right;}
.single-feature .change-address .simple,
.double-feature .change-address .simple { display: none; }


/* SQUEEZEBOX */
/* GENERAL */
.squeezebox {width:940px ;margin:20px auto; line-height: 1.1em;}
.squeezebox h3 {font-family:'Open Sans CondBold', Arial, sans-serif; font-size: 2em; color:#005781;}
.squeezebox h4 { margin-bottom: 5px;}
.squeezebox h3 sup, .squeezebox h4 sup { font-size: 0.65em; vertical-align: top; position: relative; top: 0;}
.squeezebox .copy-area p { margin-bottom: 10px; line-height: 16px;}
.squeezebox .copy-area ul { margin-bottom: 15px;}
.squeezebox ul {font-size: 1.2em; font-family:'Open Sans CondLight', Arial, sans-serif;}
/* dimensions styling -- note that IE8/9 is overridden for Javascript animations */
.squeezebox>li 
{
	border-radius: 10px; 
	box-shadow:0 0 9px 3px #E1E1E1; 
	margin-left:20px; 
	float:left; 
	background:url(../images/sprite-waves-h.png) no-repeat -988px -35px #FFF; 
	overflow:hidden; 
	position:relative;
	padding:20px 25px; 
	width:250px;
	min-height:445px;
}

.squeezebox>li.gold-bundle{background-position:-3084px -35px;}
.squeezebox>li.silver-bundle{background-position: -1991px -35px;}
.squeezebox button.green-medium-point-right{ display:block; width:175px; text-transform: uppercase; margin-top:20px; padding-right:25px;}
.squeezebox .price-block{ margin: 0 20px 20px 20px; position: absolute; bottom: 0; width: 210px;}
.squeezebox .price-block .preamble{ position:relative; top:-33px; font: normal 14px 'Open Sans Condensed', 'Arial Narrow', 'Helvetica Condensed', sans-serif; }
.squeezebox .display-price{ opacity:1; top:auto; right:auto; display:inline-block; float: none;}
.squeezebox .display-price .months{ line-height:1em; font-size:12px; width:70px; right:-19px; top:27px; position:absolute;}

.squeezebox .gfx{width:169px; height:105px;margin:30px auto 20px;}
.squeezebox .feature-list{padding-left:10px;}
.hr-text{ border-top:1px solid #CCC; text-align:center; margin:13px 13px 0;}
.hr-text b{ position:relative; top:-10px;  padding:0 3px; background:#FFF; display: inline-block; text-transform: uppercase; font-size: 10px;}
.squeezebox .feature-list li{ position:relative; line-height: 18px;}
.squeezebox .feature-list li:before{color:#333; content:'•'; position:absolute; top:0; left:-9px;}
.squeezebox .feature-list b{font: bold inherit 'Open Sans Condensed', 'Arial Narrow', 'Helvetica Condensed', sans-serif; color: #333;}

.squeezebox li{
-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.squeezebox>li:first-child{margin-left:0;}

/* dimensions styling -- note that IE8/9 is overridden for Javascript animations */
.squeezebox>li{ padding:20px 25px; width:250px; height:445px; }



/* minimized styling -- collapsed modules */
.squeezebox.expanded>li{ width:57px; padding:20px 15px;}
.squeezebox.expanded>li .minified{ display:block;}
.squeezebox.expanded>li .preview, .squeezebox.expanded>li .full-content{ display:none;}
h3.minified {text-align: center;}

/* expanded styling  -- expanded module*/
.squeezebox.expanded>li.expanded{ width: 695px;  overflow:hidden; 	}
.squeezebox.expanded>li.expanded .preview, .squeezebox.expanded>li.expanded .minified{ display:none;}
.squeezebox.expanded>li.expanded .trigger{ text-indent:-300em; font-size:1px; display:block; overflow:hidden; width:50px; height:40px; background:url(../images/CharterSpritesMapPng24.png) no-repeat -824px -179px #FFF; position:absolute; right:0; top:45%;}
.squeezebox.expanded>li.expanded .full-content{display:block;}
.squeezebox.expanded>li.expanded .full-content .preamble{ display:none;}
.squeezebox.expanded>li.expanded .title{width:200px; float:left;}
.squeezebox.expanded>li.expanded .copy-area{ padding:60px 0; margin-right:60px; max-width: 380px;}
.squeezebox.expanded>li.expanded .price-block{position:static;}
.squeezebox.expanded>li.expanded .green-medium-point-right { margin: 50px 0 0 0;}
.squeezebox .fader{ opacity:1; }

/* preview styling -- initial state */
.squeezebox>li .minified, .squeezebox>li .full-content{ display:none;}
.squeezebox .trigger {cursor:pointer; font-size: 1.095em;}
.squeezebox>li .preview{display:block;}
.squeezebox .trigger{ line-height:15px; margin-top:15px; } /* position: absolute; bottom: 125px; */
.squeezebox .trigger:before
{
	content:' ';
	background: url("../images/info-icon.png") right 0 no-repeat;
	display: inline-block;
	height: 11px;
	width: 11px;
	margin-right: 4px;
	position: relative;
	top: 1px;
}
.squeezebox.expanded>li .trigger
{
	text-indent:-300em;
	font-size:1px;
	display:block;
	overflow:hidden;
	width:50px;
	height:38px;
	background:url(../images/CharterSpritesMapPng24.png) no-repeat -834px -144px #FFF;
}

/* faders */
.squeezebox>li .fader{width:250px}
.squeezebox.expanded>li .fader{width:57px;}
.squeezebox.expanded>li.expanded .fader{ width:674px;}

.bundle-builder.expanded>li.expanded .fader{ width:650px !important; }
.bundle-builder.expanded>li .fader{ width:95px !important; }
.bundle-builder>li .fader{ width:95px !important; }


/* ANIMATION */
.squeezebox.ready>li{
    transition: width 1s, height 1s, padding-left 1s, padding-right 1s;
    -webkit-transition: width 1s, height 1s, padding-left 1s, padding-right 1s;
    -firefox-transition: width 1s, height 1s, padding-left 1s, padding-right 1s;
    -o-transition: width 1s, height 1s, padding-left 1s, padding-right 1s;
}
@-webkit-keyframes fade{
    0% { opacity:0;}
    100% { opacity:1;}
}
@-moz-keyframes fade{
    0% { opacity:0;}
    100% { opacity:1;}
}
@-o-keyframes fade{
    0% { opacity:0;}
    100% { opacity:1;}
}
@keyframes fade{
    0% { opacity:0;}
    100% { opacity:1;}
}
.squeezebox.ready>li .fader.go{
    -webkit-animation: fade 1s ease-in 0 1 normal forwards;
    -moz-animation: fade 1s ease-in 0 1 normal forwards;
    -o-animation: fade 1s ease-in 0 1 normal forwards;
    animation: fade 1s ease-in 0 1 normal forwards;
}

/* up-2 styles */
.up-2 .gfx{width: auto; text-align: center;}
.up-2 .section { margin-bottom: 20px;}
.squeezebox.up-2>li{ padding: 20px 25px; width: 410px; min-height: 430px;}
.squeezebox.up-2>li .copy-area { margin: 28px 0 10px 0; width:160px; display:inline-block; float: left;}
.squeezebox.up-2>li .user-area { float: right; display: inline-block; margin: 38px 0 10px 0;}
.squeezebox.up-2>li .price-block { position: inherit; width: auto; margin: 0; float: left;}
.squeezebox.up-2>li .green-medium-point-right { margin: 35px 35px 0 0; float: left;}

/* up-1 styles */
.up-1 .gfx, .up-1 .copy-area { float: left; display: inline-block;} 
.up-1 .gfx { width:162px; margin: 0 30px 0 0;}
.up-1 .user-area { float: right;}
.up-1 .section { margin-bottom: 20px;}
.squeezebox.up-1 .img-phone-internet-medium { width:200px; height:119px;}
.squeezebox.up-1 h3 { margin-bottom: 20px;}
.squeezebox.up-1 h4 { margin: 0 0 10px 10px;}
.squeezebox.up-1 .feature-list { font-size: 1.57em;}
.squeezebox.up-1 .feature-list li { margin-bottom: 4px; line-height: 22px;}
.squeezebox.up-1 .copy-area { width: 430px; margin-right: 30px;}
.squeezebox.up-1 .price-block { position: inherit; width: auto; margin: 30px 0 0 0;}
.storeFront .squeezebox.up-1 .btn-choose { margin: 0 35px 0 0;}
.squeezebox.up-1>li { padding:20px 25px; width:891px; min-height: 430px;}

/* common style for up-1 and up-2 */
.storeFront .squeezebox.up-1 .add-info,
.storeFront .squeezebox.up-2 .add-info
{ 
	font-size: 1.1em; top: -8px;
}

/* bundle builder styles */
.bundle-builder.expanded>li.expanded{width:650px;}
.bundle-builder.expanded>li.expanded .trigger{display:none;}
.bundle-builder.expanded>li{width:95px; padding:20px 10px;}
.bundle-builder.expanded>li .trigger{ position: absolute;  top: 160px; left: 30px;}

.hidden-form{ position:absolute; left: -20000px; }
.tv-option-select-list{padding-top: 29px;}
.tv-option-select-list:after{ content:' '; clear:both; display:block; height:0; width: 0; font-size: 0;text-align:-2000px;}
.tv-option-select-list li {display:block; float:left; margin-left:15px; width:115px;}
.tv-option-select-list li:first-child{ margin-left: 0;vertical-align: 100%;}
.tv-option-select-list li button{display:block; width:88px; font-size: 10px; line-height: 13px;}
.squeezebox.expanded>li.expanded.tv-section .title{width:143px;}
.squeezebox.expanded>li.expanded.tv-section table {clear:both;border-radius: 10px;box-shadow: 0 0 9px 3px #E1E1E1;overflow:hidden;}
.tv-option-select-list .display-price{ padding-top:17px; min-width:98px; margin-right:0;}
.tv-option-select-list .display-price .dollars{ font-size:38px; }
.tv-option-select-list .display-price sup{ font-size:1em; }
.tv-option-select-list .disclaimer{ padding-top:9px; }
.tv-option-select-list h4, .squeezebox.bundle-builder.expanded>li.web-section .full-content h4, .squeezebox.bundle-builder.expanded>li.phone-section .full-content h4{ font-size:23px; font-family: 'Open Sans CondBold', arial, sans-serif; color:#005781;}
.tv-section tr th,.tv-section tr td{ text-align:center; width: 130px; }
.tv-section tr th:first-child,.tv-section tr td:first-child{ width:250px; padding-left: 10px; text-align:left; }
.web-section .title, .web-section .price-block, .web-section .full-content,
.phone-section .title, .phone-section .price-block, .phone-section .full-content{ float:left; margin-left:10px;}
.web-section .title,
.phone-section .title { margin-left:0; width:200px; }
.web-section>.fader>.full-content,
.phone-section>.fader>.full-content{width:290px;}
.squeezebox.bundle-builder.expanded>li.web-section .price-block,
.squeezebox.bundle-builder.expanded>li.phone-section .price-block{ width:190px !important; padding-top:29px; }
.squeezebox.bundle-builder.expanded>li.web-section .title,
.squeezebox.bundle-builder.expanded>li.phone-section .title{width:88px; text-align: center;}
.squeezebox.bundle-builder.expanded>li.expanded.web-section .title,
.squeezebox.bundle-builder.expanded>li.expanded.phone-section .title{width:146px; text-align: left;}
.squeezebox.bundle-builder.expanded>li.web-section .full-content h4,
.squeezebox.bundle-builder.expanded>li.phone-section .full-content h4{ padding: 41px 0 15px; }

/*--------------- PRICE BLOCK --------------*/
.storeFront .price { font-family: "Open Sans CondBold", Arial, sans-serif; display: block; color: #005781; }
.storeFront .price.expanded { position: absolute; top: 0; left: 200px; }

.storeFront .add-info
{
	font-family: "Open Sans Regular", Arial, sans-serif;
    margin-right: 10px;
	vertical-align: top;
	position: relative;
	color: #333333;
}
.storeFront .price .base { display: inline-block; float: left;}
.storeFront .price .change { position: relative; float: left;}
.storeFront .exponent { float: left;}
.storeFront .price .footnote
{
	clear: left;
    color: #333333;
    display: block;
    font-family: "Open Sans Regular",Arial,sans-serif;
    position: relative;
}

/*--------- PRICE BLOCK SQUEEZEBOX ---------*/
.storeFront .squeezebox .add-info { font-size: 0.278em; top: 15px;}
.storeFront .squeezebox .price .base { font-size: 3.25em;}
.storeFront .squeezebox .price .change { font-size: 1.65em;	top: 0;}
.storeFront .squeezebox .price .timeline { font-size: 0.62em;}
.storeFront .squeezebox .price .footnote { font-size: 0.82em; top: 2px; width: 85px;}
.storeFront .squeezebox .btn-choose
{
	display: inline-block;
	margin-left: 10px;
	margin-top: 20px;
	width: 116px;
	font-family: "Open Sans Regular",Arial,sans-serif;
	font-size: 1.4em;
	text-shadow: 0 0.07em 0.05em #404243;
}

/*--------- PRICE BLOCK ACCORDION ---------*/
.storeFront .package-list .add-info { font-size: 0.23em; top: 18px;}
.storeFront .package-list .price .base { font-size: 1.6em;}
.storeFront .package-list .price .change { font-size: 0.85em; top: 0;}
.storeFront .package-list .price .timeline { font-size: 0.62em;}
.storeFront .package-list .price .footnote { font-size: 0.46em; top: 0;}
.storeFront .package-list .btn-choose { margin-bottom: 2px;}
.storeFront .package-list .btn-choose,
.storeFront .package-list .toggle
{
	width: 116px;
	font-family: "Open Sans Regular",Arial,sans-serif;
	font-size: 0.6em;
	text-shadow: 0 0.07em 0.05em #404243;
}