/***
CSS Reset
***/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, p, blockquote, th, td, sup {
margin: 0; 
padding: 0;
outline: 0;
vertical-align: baseline;
}
:focus,
param,
param:hover,
object,
object:hover,
:hover
{
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0 none;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
caption, th {
text-align: left;
}
ol, ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, input, select, th, td {
font-size: 1em;
}

q:before, q:after {
content: '';
}
body
{
font-size: 62.5%;
font-family: Verdana, Helvetica, sans-serif;
color: #656565;
background-color: #ededed;
line-height: 1.3em;
text-align: center;/*for quirksmode*/
-webkit-text-size-adjust: none;/*required to fix text sizing issues on the iphone*/
}
body div
{
text-align: left;/*reset text altered above for quirksmode*/
}
#content ul,
#popupContent ul
{
list-style-type: none;
}
#ie6 #content ul,
#ie6 #popupContent ul
{
width: 100%;
}
#content li,
#popupContent li
{
list-style-type: none;
background: url(https://www.att.com/Common/indc/images/bullet_square_10x7.gif) 0 0 no-repeat;
margin: 2px 0;
padding: 1px 10px;
}
#content ol li,
#popupContent ol li
{
list-style-type: decimal;
background: none;
margin: 2px 0 2px 2.5em;
padding: 1px 0;
}
#content ul.nobullet li,
#popupContent ul.nobullet li
{
list-style-type: none;
background: none;
margin: 2px 0;
padding: 1px 0;
}
.imgRep
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: left top;
background-repeat: no-repeat;
}
.mute { color: #999; }
.hide { display: none; }
.notice
{
color: #999;
font-style: italic;
}
.invisible { visibility: hidden; }
.clear { clear: both; }
.nowrap { white-space: nowrap; }
.rel { position: relative; }
form
{
margin: 0;
padding: 0;
}
input,
textarea,
select
{
border: 1px solid #ccc;
vertical-align: middle;
background-color: #fff;
color: #656565;
}
button
{
margin: 0;
padding: 0;
vertical-align: middle;
}
#content input,
#content textarea,
#content select,
#content button
{
/*margin: 2px 0;*/ /*breaks some box heights. this design team request is on back burner for now.*/
}
#ie input,
#ie textarea,
#ie select
{
vertical-align: top;
}
legend.accent1
{
margin: 0;
display: block; /*for opera and safari 3*/
padding: 0 0 8px 0; /*for opera and safari 3*/
font-size: 1.4em;
color: #f27d00;
font-weight: bold;
}
#ie legend.accent1
{
margin: 0 0 4px -8px; /*IE indents legend and there is no way to zero it out.*/
padding: 0; /*reset for IE*/
}
#searchForm label,
#quicklinks label,
#ask_att label,
#ask_question label,
#drop_links label
{
display: none;
}
#searchForm input
{
border: 1px solid #8cbbd8;
text-indent: 5px;
}
#searchForm input.btnGo
{
border: none;
}
#drop_links select
{
width: 190px;
margin-right: 0;
}
#droplinksSubmit
{
border: none;
}
#ask_question input
{
width: 226px;
margin-right: 0;
}
#ie #ask_question input
{
vertical-align: middle;
}
#ask_question input.askSubmit,
#ie #ask_question input.askSubmit
{
width: 15px;
height: 15px;
cursor: pointer;
border: 0;
}
legend span a.askTips
{ 
font-weight: normal;
font-size: .7em;
padding-left: 35px;
}
#ask_question p
{
font-size: 1em;
color: #a8a8a8;
}
input[type=text]:hover,
input[type=text]: focus, 
input[type=password]:hover,
input[type=password]: focus
{
background-color: #f1f6f9;
}
/* "The Ever Popular (Heath?) Ledger Effect" */
/* Hides from IE-Mac \*/
* html #content table.ledger
{
border-collapse: collapse;
margin-bottom: 1em;
}
/* End hide from IE-Mac */
#content table.ledger tr td:first-child,
#content table.ledger tr th:first-child
{
border-left: 0 !important;
}
#content table.ledger tr td
{
border-left: 1px solid #fff !important;/*interior borders*/
border-bottom: 0 !important;
vertical-align: top;
padding: 4px;
}
#content table.ledger tr th
{
vertical-align: middle;
text-align: left;
background-color: #0a94d6;
color: #fff;
border: none !important;
border-left: 1px solid #fff !important;/*interior borders*/
padding: 4px;
}
#content table.ledger tr td:first-child,
#content table.ledger tr th:first-child
{
border-left: 0 !important;
}
#content table tr.odd td,
#content table tr td.odd,
#content table.ledger tr.odd td { background-color: #f2f7fb; }
#content table tr.even td,
#content table tr td.even
#content table.ledger tr.even td { background-color: #e3eef4; }
/* Highlight */
#content table tr.sfhover,
#content table tr.sfhover td
{
background-color: #b5dff3;
color: #000;
}
/* Selected */
/* This always takes precedence over highlight color! */
#content table.ledger tr.selected td,
#content table tr.selected td
{
background-color: #4775d1;
color: #fff;
border-left: 1px solid #346dbe;
border-bottom: 1px solid #7daaea;
}
h1, h2, h3, h4, h5, h6
{
margin: 0;
}
h1
{ 
font-size: 2.2em;
line-height: 1em;
margin-bottom: 1em;
font-weight: normal;
}
h2 { font-size: 1.3em; margin-bottom: .5em; } 

h3 { font-size: 1.6em; margin-bottom: 1em; }

h4 { font-size: 1.2em; }

h5 { font-size: 1em; }

h6 { font-size: 1.4em; }

p, a, li, span, td, th, strong
{
font-size: 1.1em;
}
p a, p strong, li a, li span, a span, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 span, h2 span, h3 span, h4 span, h5 span, h6 span, td p, td a, td span, td li,
td h2, td h3, td h4, li li, th p, th a, th span, th li, th h2, th h3, th h4, td strong
{
font-size: 1em;
}
p span a, legend span a
{
font-size: .9em;
}
a:link
{
text-decoration: none;
color: #0a94d6;
}
a:active
{
outline: none;
}

a:visited
{
text-decoration: none;
color: #0a94d6;
}
a:hover
{
text-decoration: underline;
color: #0a94d6;
}
p { margin: 0 0 1em 0; }
strong { font-weight: bold; margin: 0 0 1em 0; }
em { background: #ff9; }
a img, a:link img, a:visited img { border: 0; }
ul, ol, dl { margin: 0 0 1em 0; }
ol { list-style-type: decimal; }
dt { font-weight: bold; }
table {	font-size: 1.1em; }
th { font-weight: bold; }
td { font-size: 1.1em; }
sup
{
vertical-align: top;
font-size: .7em;
padding: 0 0 0 1px;
position: relative;
top: -3px;
}
#ie sup { font-size: 1.1em; }
#ie table sup {	position: static; }
sup.sm
{
font-size: 1.4em;
line-height: .7em;
top: -1px;
}
#ie sup.sm,
sup.ieSM
{
display: none;
}
#ie sup.ieSM
{
display: inline;
font-size: .9em;
line-height: 1.1em;
top: -1px;
}
h1 sup,
#ie h1 sup,
h6 sup,
#ie h6 sup
{
font-size: .6em;
}
.accent1
{
color: #f27d00; /*orange*/
margin-bottom: 6px;
font-weight: bold;
}
.accent2
{
color: #f27d00; /*orange*/
}
.accent3
{
color: #59af17; /*green*/
}
.accent4
{
color: #f27d00; /*orange*/
font-weight: normal;
}
.accent5
{
color: #023f72; /*dark blue*/
margin: 10px 0 5px 0;
}
.accent6
{
color: #f27d00; /*orange*/
font-size: 2.1em;
margin-bottom: 0;
padding-bottom: 0;
line-height: 0.9em;
}
.caps
{
text-transform: uppercase;
}
p.tight
{
margin: 7px 0 6px 0;
}
/********************
Universal Navigation
*********************/
ul#universalNav
{
position: relative;
right: 0;
float: right;
margin: 0;
background: url(https://www.att.com/Common/indc/images/page_topSlice.gif) 0 bottom no-repeat transparent;
line-height: 30px;
width: 985px;
text-align: right;
}
ul#universalNav li
{
display: inline;
font-size: .95em;
}
ul#universalNav li a
{
padding: 0 10px;
border-right: 1px solid #ccc;
}
ul#universalNav li a:visited
{
text-decoration: none;
}
ul#universalNav li a:hover
{
text-decoration: underline;
}
ul#universalNav li a.currentSubSite, ul#universalNav li a.currentSubSite:hover, ul#universalNav li a.currentSubSite:visited 
{
color: #f47e00;
}
ul#universalNav li.last a
{
padding: 0 5px 0 6px;
border: 0;
}
ul#universalNav li.language
{
padding-left: 23px;
}
ul#universalNav li.accessibility a
{
color: #ededed;
border-right: 1px solid #ededed;
}
ul#universalNav li.accessibility a:hover
{
color: #ededed;
}
/********************
Header Navigation
*********************/
.topNav
{
padding: 0;
margin: 15px 0 0 0;
float: right;
}
ul.topNav li
{
display: block;
float: left;
vertical-align: bottom;
line-height: 1.6em;
vertical-align: middle;
}
ul.topNav li a
{
padding: 0 10px;
border-right: 1px solid #ccc;
}
ul.topNav li.last a
{
border: 0;
margin-right: 10px !important;
}
#ie .topNav #searchForm
{
width: 29%;/*IE will not float the navigation to the right. Have to force it to right side. thus add items to nav list and will need to edit this.*/
white-space: nowrap;
}
.topNav #searchForm legend
{
display: none;
}
.topNav #search
{
margin-right: 5px;
}
#header div#toolbar
{
clear: right;
text-align: right;
padding: 25px 0 0 0;
}			
#header span#viewCart
{
background: url(https://www.att.com/Common/indc/images/ico_shop_cart.gif) 0 0 no-repeat;
padding: 5px 40px 3px 25px;
}
#header span.localization a
{
border: 0;
padding: 0;
}
/********************
Primary Navigation
*********************/	
#PrimaryNav
{
z-index: 1;
margin: 0 0 15px 0;
width: 950px;
position: relative;
}
#PrimaryNav,
#noimg_PrimaryNav
{
height: 72px;
background: url(https://www.att.com/Common/indc/images/nav/primarysecondarybkgrd.gif) 0 0 repeat-x;
line-height: 1.5em;
}
#PrimaryNav li,
#noimg_PrimaryNav li
{
float: left;
}
#PrimaryNav li#first
{
background: url(https://www.att.com/Common/indc/images/nav/primarybkgrdleft.gif) 0 bottom no-repeat;
width: 2px;
height: 72px;
}
#PrimaryNav li#last
{
background: url(https://www.att.com/Common/indc/images/nav/primarybkgrdright.gif) right top no-repeat;
width: 2px;
height: 72px;
float: right;
}
#PrimaryNav li a,
#noimg_PrimaryNav li a
{
text-decoration: none;
display: block;
white-space: nowrap;
}
#PrimaryNav li a:hover,
#PrimaryNav li.selected a,
#noimg_PrimaryNav li a:hover,
#noimg_PrimaryNav li.selected a
{
color: #f27d00;
background: #fff;
}
/* GRAPHICAL NAVIGATION BUTTONS */
#PrimaryNav li #pn-explore,
#PrimaryNav li #pn-shop,
#PrimaryNav li #pn-support,
#PrimaryNav li #pn-account
{
position: absolute;
}
#PrimaryNav li #pn-explore,
#noimg_PrimaryNav li #noimg-explore
{
background: url(https://www.att.com/Common/indc/images/nav/primaryexplore.png) left center no-repeat;
text-indent: -9000px;
width: 126px;
height: 31px;
}
#PrimaryNav li #pn-explore:hover
{
background: url(https://www.att.com/Common/indc/images/nav/primaryexplore_h.png) no-repeat;
}
#PrimaryNav li.selected #pn-explore,
#PrimaryNav li.selected #pn-explore:hover
{
background: url(https://www.att.com/Common/indc/images/nav/primaryexplore_s.png) no-repeat;
}
#PrimaryNav li #pn-shop,
#noimg_PrimaryNav li #noimg-shop
{
left: 126px;
background: url(https://www.att.com/Common/indc/images/nav/primaryshop.png) center no-repeat;
text-indent: -9000px;
width: 125px;
height: 31px;
}
#ie #PrimaryNav li #pn-shop /*for all IE versions!*/
{
left: 126px;
}
#PrimaryNav li #pn-shop:hover
{
background: url(https://www.att.com/Common/indc/images/nav/primaryshop_h.png) no-repeat;
}
#PrimaryNav li.selected #pn-shop,
#PrimaryNav li.selected #pn-shop:hover
{
background: url(https://www.att.com/Common/indc/images/nav/primaryshop_s.png) no-repeat;
}
#PrimaryNav li #pn-support,
#noimg_PrimaryNav li #noimg-support
{
left: 251px;
background: url(https://www.att.com/Common/indc/images/nav/primarysupport.png) center no-repeat;
text-indent: -9000px;
width: 125px;
height: 31px;
}
#ie #PrimaryNav li #pn-support /*for all IE versions!*/
{
left: 251px;
}
#PrimaryNav li #pn-support:hover
{
background: url(https://www.att.com/Common/indc/images/nav/primarysupport_h.png) no-repeat;
}
#PrimaryNav li.selected #pn-support,
#PrimaryNav li.selected #pn-support:hover
{
background: url(https://www.att.com/Common/indc/images/nav/primarysupport_s.png) no-repeat;
}
#PrimaryNav li #pn-account,
#noimg_PrimaryNav li #noimg-account
{
left: 376px;
border: none;
background: url(https://www.att.com/Common/indc/images/nav/primaryaccount.png) center no-repeat;
text-indent: -9000px;
width: 125px;
height: 31px;
}
#ie #PrimaryNav li #pn-account /*for all IE versions!*/
{
left: 376px;
}
#PrimaryNav li #pn-account:hover
{
background: url(https://www.att.com/Common/indc/images/nav/primaryaccount_h.png) no-repeat;
}
#PrimaryNav li.selected #pn-account,
#PrimaryNav li.selected #pn-account:hover
{
background: url(https://www.att.com/Common/indc/images/nav/primaryaccount_s.png) no-repeat;
}
/* SYSTEM TEXT TOP NAVIGATION LINKS */
#PrimaryNav li #pn-login,
#PrimaryNav li #pn-register
{
color: #fff;
z-index: 1;
text-align: right;
position: absolute;
top: 0;
line-height: 1.1em;
}
#PrimaryNav li #pn-login
{
border-right: 1px solid #fff;
right: 6.2em;
margin: 9px 0;
padding: 0 1em;
}
#PrimaryNav li #pn-register
{
right: 0;
padding: 9px 1em;
}
#PrimaryNav li #pn-login:hover,
#PrimaryNav li #pn-register:hover
{
background: none;
color: #fff;
text-decoration: underline;
}
/* Hidden primary nav that displays if images are off as primary nav will disappear otherwise */
#noimg_PrimaryNav
{
background-color: #023f72;
position: absolute;
top: 8.3em;
width: 946px;
margin-left: 2px;
height: 31px;
}
#noimg_PrimaryNav a
{
color: #fff;
font: bold 1.2em Verdana,sans-serif;
display: block;
}
#noimg_PrimaryNav li #noimg-explore,
#noimg_PrimaryNav li #noimg-shop,
#noimg_PrimaryNav li #noimg-support,
#noimg_PrimaryNav li #noimg-account
{
text-indent: 1.5em;
text-transform: uppercase;
line-height: 2.2em;
}
#noimg_PrimaryNav li #noimg-account
{
border: 0;
}
#noimg_PrimaryNav li #noimg-explore:hover,
#noimg_PrimaryNav li #noimg-shop:hover,
#noimg_PrimaryNav li #noimg-support:hover,
#noimg_PrimaryNav li #noimg-account:hover
{
background-color: #fff;
}
/* SECOND LEVEL */
.secondaryNav,
.secondaryNav div
{
display: none; /*javascript needed to set to display on hover states*/
}
#PrimaryNav li.selected .secondaryNav li.onHover a:hover
{
background-color: transparent !important;
}
#PrimaryNav li.selected .secondaryNav
{
display: block;
position: relative;
top: 35px;
left: 0;
width: 927px;
overflow: hidden;
background: url(https://www.att.com/Common/indc/images/nav/secondarybtmbrdr.gif) 0 0 repeat-x !important;
line-height: 2.8em;
padding-left: 19px;
}
#ie #PrimaryNav li.selected .secondaryNav
{
width: 946px;
}
#PrimaryNav li.selected #exploreSecondaryNav
{
left: 2px;
}
#PrimaryNav li.selected .secondaryNav li
{
padding: 0 .35em; /*keeps white hover bg from overlapping left gradient goalpost*/
}
#PrimaryNav li.selected .secondaryNav li a
{
color: #0a94d6;
display: block;
background: none;
padding: 0 1.6em 0 .8em; /*spaces out link list and provides padding for hover arrow and space between the goal posts and text*/
}
#PrimaryNav li.selected .secondaryNav li.first a
{
background: none;
}
#PrimaryNav li.selected #shopSecondaryNav li       a:hover,
#PrimaryNav li.selected #shopSecondaryNav li.first a:hover
{
background: url(https://www.att.com/Common/indc/images/nav/orange_arrow.png) right 50% no-repeat;
}
#PrimaryNav li.selected #supportSecondaryNav li a:hover,
#PrimaryNav li.selected #exploreSecondaryNav li a:hover
{
background: none !important;
}
#PrimaryNav li.selected #shopSecondaryNav li a#hoverbox_offers
{
background: none !important;
}
#PrimaryNav li.selected .secondaryNav li a:hover
{
text-decoration: underline;
background: url(https://www.att.com/Common/indc/images/nav/secondarybtmbrdr_s.gif) repeat-x;
}
#PrimaryNav li.selected .secondaryNav li.selected,
#PrimaryNav li.selected .secondaryNav li.onHover
{
position: relative;
}
#PrimaryNav li.selected #shopSecondaryNav li.selected a,
#PrimaryNav li.selected #shopSecondaryNav li.selected a:hover
{
background: url(https://www.att.com/Common/indc/images/nav/orange_arrow.png) right 50% no-repeat !important;
}
#PrimaryNav li.selected .secondaryNav li.selected a
{
color: #f27d00;
padding-right: 1.6em;
}
#PrimaryNav li.selected .secondaryNav li.selected a:hover
{
color: #f27d00 !important;
}
#PrimaryNav li.selected .secondaryNav li.onHover /*added via javascript*/
{
background: #fff url(https://www.att.com/Common/indc/images/nav/secondaryleftbrdr_s.gif) left 2px no-repeat;
position: relative;
}
#PrimaryNav li.selected .secondaryNav li.onHover a:hover
{
color: #0a94d6;
text-decoration: underline;
background: url(https://www.att.com/Common/indc/images/nav/blue_arrow.png) right 50% no-repeat;
padding-right: 1.6em;
}
#ie #PrimaryNav li.selected .secondaryNav li.onHover a:hover
{
margin: 0;
}
#PrimaryNav li.selected .secondaryNav li #rightPost/*added via javascript*/
{
background: url(https://www.att.com/Common/indc/images/nav/secondaryrghtbrdr_s.gif) right 0 no-repeat !important;
width: 4px;
position: absolute;
bottom: -3px;
right: 0;
}
#ie #PrimaryNav li.selected .secondaryNav li #rightPost
{
right: -1px;
bottom: -4px;
}
/*  TERTIARY NAV WITH JAVASCRIPT  */
/* uses prototype control.modal to move and redraw tertiary nav to maintain the secondary nav link positions, does not show for those without javascript */
#modal_container
{
border-left: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
font-size: .9em;
background: #fff;
overflow: hidden;
padding: 15px 0;
}
#ie #modal_container
{
margin-left: -1px;
margin-top: 3px;
}
#modal_container ul
{
line-height: 1.5em;
z-index: 9999;
background: #fff;
}
#modal_container .tertiaryNav
{
padding: 0;
margin: 0 15px;
z-index: 9999;
overflow: hidden;
}	
#ie #modal_container #bundleTertiaryNav
{
width: 63.6em;
}
#ie #modal_container #addservTertiaryNav
{
width: 20em;
}
#ie #modal_container .col5
{
width: 76.5em;
}
/*one column and base for multiple columns*/
#modal_container .tertiaryNav li
{
color: #666;
margin: 0 15px .5em 0;/*15px to right of border seperator*/
padding: 0 15px 0 0;
z-index: 9999;
}
#modal_container .col2 li,
#modal_container .col3 li,
#modal_container .col4 li,
#modal_container .col5 li
{
float: left;
z-index: 9999;
border-right: 1px solid #dbdee4;
height: 7em;
}
#modal_container .col2 li
{
height: 9em;
}
#modal_container .col2 li.last,
#modal_container .col3 li.last,
#modal_container .col4 li.last,
#modal_container .col5 li.last
{
border: none;
margin: 0 0 .5em 0 !important;
}
#ie #modal_container #bundleTertiaryNav li.last li,
#modal_container #bundleTertiaryNav li.last,
#modal_container #bundleTertiaryNav li.last li
{
width: 21em !important;
}
#ie #modal_container #bundleTertiaryNav li.last li
{
margin: 0;
}
#modal_container .tertiaryNav li a
{
margin: 0;
padding: 0;
color: #0a94d6;
background: none;
}
#modal_container .tertiaryNav li.selected a
{
color: #f27d00;
}
#modal_container .tertiaryNav li .quadNav
{
margin: 0;
padding: 0;
min-height: 6.5em;
}
#modal_container .tertiaryNav li .quadNav li,
#ie #modal_container .tertiaryNav li .quadNav li
{
margin: 0;
float: none;
height: auto;
border: none;
line-height: 1.8em;
}
/* TERTIARY NAV & CONTEXT OF ENTIRE NAV WITHOUT JAVASCRIPT */
#navNoscript,
#sitemap
{
margin: 15px 3px 0 3px;
clear: both;
width: 985px;
}
#sitemap
{
width: 930px;
}
#navNoscript li,
#sitemap li
{
float: left;
width: 25%;
}
#navNoscript li a,
#sitemap li a
{
font-weight: bold;
font-size: 1.1em;
}
#navNoscript li li,
#sitemap li li
{
width: 100%;
float: none;
margin: 0 0 0 5px;
}
#navNoscript li li a,
#sitemap li li a
{
font-size: 1em;
}
#navNoscript li li li,
#sitemap li li li
{
float: none;
margin: 0 0 0 5px;
}
#navNoscript li li li a,
#sitemap li li li a
{
font-weight: normal;
font-size: 1em;
}
/**************************
MISC.
**************************/
#welcome /*welcome message pulled from cookie and/or logging in*/
{
position: absolute;
top: 90px;
right: 200px;
z-index: 5;
color: #fff;
font-size: 1.1em;
}
.colMargTop
{
margin-top: 41px;
}
#ie .colMargTop
{
margin-top: 30px;
}
.centerDiv
{
margin: 0 auto;
text-align: center;
}
.floatLft
{
float: left;
}
.floatRght
{
float: right;
}
p.noBotMarg /* removing 1em margin established for all paragraphs */
{
margin-bottom: 0;
}
p.reducedBotMarg /* removing 1em margin established for all paragraphs */
{
margin-bottom: 3px;
}
.btmPad3
{
padding-bottom: 3px;
}
#sitemap li
{
background: none !important;
}
.blueGradient
{
height: 114px;
background: url(https://www.att.com/Common/indc/images/blue_mod_gradientSlice.gif) 0 100% repeat-x transparent;
margin: 0 0 10px 0 !important;
}
div.blueGradient h4, div.blueGradient2 h4
{
padding-top: 14px;
padding-bottom: 4px;
}
.blueGradient2
{
height: 124px;
background: url(https://www.att.com/Common/indc/images/blueTall_mod_gradientSlice.gif) 0 100% repeat-x transparent;
margin: 0 0 10px 0 !important;
}
/***
GRID TEMPLATES
All Columns
***/
.first_150
{
float: left;
width: 150px;
clear: left;
}
.col_150
{
float: left;
width: 150px;
margin-left: 10px;
}
.first_204
{
float: left;
width: 204px;
clear: left;
}
.col_203
{
float: left;
width: 203px;
margin-left: 10px;
}
.col_229
{
float: left;
width: 229px;
margin-left: 10px;
}
.first_230
{
float: left;
width: 230px;
clear: left;
}
.col_230
{
float: left;
width: 230px;
margin-left: 10px;
}
.first_264
{
float: left;
width: 264px;
clear: left;
}
.col_264
{
float: left;
width: 264px;
margin-left: 10px;
}
.first_270
{
float: left;
width: 270px;
clear: left;
}
.col_270
{
float: left;
width: 270px;
margin-left: 10px;
}
.col_273
{
float: left;
width: 273px;
margin-left: 10px;
}
.first_310
{
float: left;
width: 310px;
clear: left;
}
.col_310
{
float: left;
width: 310px;
margin-left: 10px;
}
.first_350
{
float: left;
width: 350px;
clear: left;
}
.col_350
{
float: left;
width: 350px;
margin-left: 10px;
}
.first_428
{
float: left;
width: 428px;
clear: left;
}
.col_460
{
float: left;
width: 460px;
margin-left: 10px;
}
.first_470
{
float: left;
width: 470px;
clear: left;
}
.first_480
{
float: left;
width: 480px;
clear: left;
}
.col_550
{
float: left;
width: 550px;
margin-left: 10px;
}
.first_630
{
float: left;
width: 630px;
clear: left;
}
.col_630
{
float: left;
width: 630px;
margin-left: 10px;
}
.first_668
{
width: 668px;
clear: left;
}
.first_710
{
float: left;
width: 710px;
clear: left;
}
.col_710
{
float: left;
width: 710px;
margin-left: 10px;
}
.col_790
{
float: left;
width: 790px;
margin-left: 10px;
}
.first_950
{
width: 950px;
}
/**************************
CONTAINER
**************************/
#wrapper,
#ie /*fix to center page for IE in quirksmode*/
{
margin: 0 auto;
width: 985px;
background-color: #ededed;
}
#container
{
clear: both;
background: #fff url(https://www.att.com/Common/indc/images/page_midSlice.gif) 0 0 repeat-y;
padding-bottom: 39px;
}
#page
{
margin: 0 17px;/*changed from auto due to quirksmode*/
width: 950px;
position: relative;
}
#content
{
clear: both;
overflow: hidden;/*this causes the nav jump yet take out, the page background is not matching height*/
position: relative;
width: 100%;
height: 100%;
}
#content #pageID,
#popupContent #pageID
{
display: none;
}
#btmContainer
{
height: 47px;
background: url(https://www.att.com/Common/indc/images/page_btmSlice.gif) 0 0 no-repeat transparent;
}
/**************************
POPUP CONTAINER
**************************/
#iePopup
{
margin: 0 auto;
background-color: #ededed;
}
#popupWrapper
{
padding: 0 10px;
min-width: 695px;
width: auto;
}
#iePopup #popupWrapper
{
width: 780px;
}
#topContainerPopup
{
margin: 0 3px;
background: url(https://www.att.com/Common/indc/images/popupPage_topSlice2.gif) 0 bottom repeat-x transparent;
height: 5em;
}
#popupContainer
{
background: url(https://www.att.com/Common/indc/images/popupPage_midSliceL.gif) left 0 repeat-y #fff;
}
#iePopup #popupContainer
{
width: 100%;
}
#popupContainer #popupContent
{
background: url(https://www.att.com/Common/indc/images/popupPage_midSliceR.gif) right 0 repeat-y;
padding: 15px;
height: 100%;
}
#btmContainerPopup
{
clear: both;
height: 3em;
margin: 0 3px;
background: url(https://www.att.com/Common/indc/images/popupPage_btmSlice2.gif) 0 0 repeat-x transparent;
}
/**************************
HEADER
**************************/
#header
{
height: 82px;
clear: both;
font-size: .95em;
}
.logo
{
float: left;
margin-top: 16px;
}
.logo img
{
margin-left: 21px;
}
/**************************
FOOTER
**************************/
#legalFtr
{
margin: 15px 0 10px 0;
float: left;
line-height: 1.2em;
}
#legalFtr li
{
float: left;
padding: 0 15px;
border-right: 1px solid #999;
}
#legalFtr li a
{
color: #999;
}
#legalFtr li a:visited
{
text-decoration: none;
color: #999;
}
#legalFtr li a:hover
{
text-decoration: underline;
color: #999;
}
#legalFtr li a .updated
{
color: #810238;
}
#legalFtr li.first
{
padding-left: 5px;
}
#legalFtr li.last
{
border: 0;
}
#btmContainer .copyright
{
clear: both;
margin: 0 3px;
width: 680px;
line-height: 1.3em;
}
#btmContainer .copyright a,
#btmContainer .copyright a:visited
{
color: #999;
font-size: 1em;
}    
#btmContainer .yellowPagesLogo
{
float: right;
margin: 15px 3px 0 3px;
}
/**************************
PRICING - superscript portions found in typography.css
**************************/
.pricing
{
position: relative;
margin: -3px 10px 0 0;
height: 4.7em;
}
.pricing span
{
color: #ccc;
font-size: .9em;
}
.pricing div
{
color: #74b727;
font-size: 3.3em;
margin: 10px 0 0 0;
}
#ie .pricing div
{
margin: 12px 0 0 0;
}
.pricing div sup
{
font-size: .6em;
padding: 0;
vertical-align: baseline;
top: -.6em;
}
#ie .pricing div sup
{
font-size: .7em;
}
.pricing div sup.cents
{
position: relative;
left: -.3em;
}
.pricing span.reoccurrence
{
position: absolute;
bottom: 0;
}
.pricing span.oneDigit
{
left: 5em;
}
.pricing span.twoDigit
{
left: 7.3em;
}
.pricing span.threeDigit
{
left: 9.5em;
}
.pricing .footnote
{
position: absolute;
bottom: 0;
}
/*offerPricing is much larger. based off pricing class but altered for height. both pricing and offerPricing classes will be needed in html*/
.offerPricing
{
color: #ccc;
font-size: 7em;
line-height: 1;
position: relative;
top: -.3em;
margin: 0 0 -.3em 0;
}
.offerPricing div
{
color: #74b727;
}
.offerPricing div sup
{
vertical-align: baseline;
padding: 0;
position: relative;
top: -.75em;
font-size: .5em;
}
#ie .offerPricing div sup
{
font-size: .6em;
}
.offerPricing div sup.cents
{
position: relative;
left: -.3em;
}
.offerPricing span.oneDigit
{
left: 4.7em;
}
.offerPricing span.twoDigit
{
left: 7.9em;
}
.offerPricing span.threeDigit
{
left: 8.9em;
}
.offerPricing span.reoccurrence
{
font-size: .25em;
position: absolute;
top: 2.7em;
}
#ie .offerPricing span.reoccurrence
{
top: 3.3em;
}

/*bundle pricing*/
.bundlePricing
{
float: right;
position: absolute;
right: 45px;
height: 3.7em;
text-align: right;
margin: 30px 0 0 0;
}
#ie .bundlePricing
{
margin: 20px 0;
}
.bundlePricing div
{
font-size: 3.8em;
color: #b3b3b3;
right: .5em;
position: relative;
}
.bundleTotal
{
margin: 15px 0;
}
#ie .bundleTotal
{
margin: 0;
}
.bundleTotal div
{
color: #74b727;
}
.pricing div sup
{
font-size: .55em;
}
#ie .pricing div sup
{
font-size: .67em;
}
.bundlePricing span.reoccurrence
{
position: absolute;
left: auto;
right: -.4em;
bottom: .2em;
color: #b3b3b3;
}
#ie .bundlePricing span.reoccurrence
{
right: -.5em;
bottom: 0;
}
/*hero pricing*/
#hero .pricing
{
position: absolute;
top: 38px;
left: 320px;
}
#hero span.reoccurrence
{
bottom: 14px;
white-space: nowrap;
}
#ie #hero span.reoccurrence
{
bottom: 12px;
}
/**************************
BUTTONS
**************************/
.printLink
{
background: url(https://www.att.com/Common/indc/images/ico_print.gif) right 50% no-repeat;
padding-right: 25px;
text-align: right;
}
a.btnBigBlue
{
margin: 10px 0;
display: block;
}
.btnGo /* White GO Button */
{
width: 31px;
height: 18px;
border: 0;
cursor: pointer;
}
.btnBlueGo /* Blue GO Button */
{
width: 47px;
height: 18px;
cursor: pointer;
border: 0;
background-image: url(https://www.att.com/Common/indc/images/btn_blue_go.gif);
position: relative;
}
a.btnContinueShopping
{
width: 155px;
height: 26px;
}
a.btnOrderNow
{
float: left;
width: 107px;
height: 26px;
margin: 3px 0 0 120px;
}
.btnOnlineOnlyOffer
{
margin: 0 0 5px 0;
}
.btnShopBundles
{
margin: 13px 0 0 405px;
}
.btnShopBundles button, .btnOrderNow button
{
width: 128px;
height: 18px;
border: 0;
background: url(https://www.att.com/Common/indc/images/btn_shop_bundles.gif) 0 0 no-repeat transparent;
cursor: pointer;
font-size: 0.5em;
margin: 13px 0 0 405px;
text-indent: -9000px;
}
.btnOrderNow button
{
float: left;
width: 107px;
height: 26px;
background: url(https://www.att.com/Common/indc/images/btn_blue_orderNow.gif) 0 0 no-repeat transparent;
margin: 3px 0 0 120px;
}
#ie .btnShopBundles,
#ie .btnOrderNow
{
position: relative;
}
#ie .btnShopBundles button,
#ie .btnOrderNow button
{
position: absolute;
}
.btnBlueArrow a
{
width: 4px;
height: 8px;
border: 0;
background: url(https://www.att.com/Common/indc/images/btn_blue_arrow.gif) 100% 65% no-repeat transparent;
cursor: pointer;
padding-right: 10px;
}
.btnBlueCagedArrow,
.btnWhiteCagedArrow /* white arrow blue cage, blue arrow white cage to the left of blue link */
{
background: url(https://www.att.com/Common/indc/images/btn_blue_caged_arrow.gif) 0 50% no-repeat transparent;
cursor: pointer;
padding: 5px 0 5px 20px;
}
.btnWhiteCagedArrow
{
background: url(https://www.att.com/Common/indc/images/btn_white_caged_arrow.gif) 0 50% no-repeat transparent;
}
.col_230 .btnWhiteCagedArrow
{
display: block;
}
/**************************
MODULES - CONTENT BOXES
**************************/
.grayBorder /* To be used to surround mod_a, mod_a2, mod_a3, mod_a4, mod_a5, mod_a6 div's. */
{
border: 1px solid #ccc;
margin-bottom: 10px;
}
.grayBorderNoBotMarg /* To be used to surround mod_a, mod_a2, mod_a3, mod_a4, mod_a5, mod_a6 div's. */
{
border: 1px solid #ccc;
}
.mod_a /* 1px white inner border box with tall gradient background and 12px padding */
{
border: 1px solid #fff;
background: url(https://www.att.com/Common/indc/images/tall_mod_gradientSlice.gif) 0 100% repeat-x transparent;
padding: 12px;
}
.mod_a2,
.mod_a6 /* NO PADDING 1px white inner border box with tall gradient background */
{
border: 1px solid #fff;
background: url(https://www.att.com/Common/indc/images/tall_mod_gradientSlice.gif) 0 100% repeat-x transparent;
}
.mod_a3 /* NO PADDING 1 px white border with orange Tab Top background */
{
border: 1px solid #fff;
background: url(https://www.att.com/Common/indc/images/orangeTabTop.gif) 0 0 repeat-x transparent;
}
.mod_a4 /* NO PADDING 1px white inner border box with tallest gradient background */
{
border: 1px solid #fff;
background: url(https://www.att.com/Common/indc/images/tallest_mod_gradientSlice.gif) 0 100% repeat-x transparent;
}
.mod_a5 /* NO PADDING 1px white inner border box with TALL BLUE gradient background */
{
border: 1px solid #fff;
background: url(https://www.att.com/Common/indc/images/tallBlue_mod_gradientSlice.gif) 0 100% repeat-x transparent;	
}
.mod_b /* NO INNER PADDING 1px gray box with 10px margin at the bottom for mods to be placed underneath. */
{
border: 1px solid #ccc;
margin-bottom: 10px;
position: relative;
top: 0;
left: 0;
}
#ie .mod_b
{
width: 100%;
}
.mod_b_btm /*  NO BOTTOM MARGIN, NO INNER PADDING 1px gray box. */
{
border: 1px solid #ccc;
margin-bottom: 0;
}
.mod_c /* (for min186 mod)  1px gray outer border box with blue white gradient background and 14px top btm padding, Inline content center*/
{
border: 1px solid #ccc;
padding: 14px 0;
background: url(https://www.att.com/Common/indc/images/blueWhtBtmGradientSlice.gif) 0 100% repeat-x transparent;
margin-bottom: 10px;
text-align: center;
}
.mod_c_btm /* (for min186 mod)  NO BOTTOM MARGIN 1px gray outer border box with blue white gradient background and 14px top btm padding, Inline content center*/
{
border: 1px solid #ccc;
padding: 14px 0;
background: url(https://www.att.com/Common/indc/images/blueWhtBtmGradientSlice.gif) 0 100% repeat-x transparent;
margin-bottom: 0;
text-align: center;
}
.mod_d /* NO INNER PADDING 1px gray border box with short gradient background */
{
border: 1px solid #ccc;
margin-bottom: 10px;
background: url(https://www.att.com/Common/indc/images/short_mod_gradientSlice.gif) 0 100% repeat-x transparent;
}
.mod_d_btm /*  NO INNER PADDING NO BOTTOM MARGIN 1px gray border box with short gradient background */
{
border: 1px solid #ccc;
background: url(https://www.att.com/Common/indc/images/short_mod_gradientSlice.gif) 0 100% repeat-x transparent;
position: relative;
top: 0;
left: 0;
}
.mod_d2,
.mod_d3 /* 14px top btm padding, 10 left right,  1px gray border box with short gradient background */
{
border: 1px solid #ccc;
padding: 14px 10px;
margin-bottom: 10px;
background: url(https://www.att.com/Common/indc/images/short_mod_gradientSlice.gif) 0 100% repeat-x transparent;
position: relative;
top: 0;
left: 0;
}
.mod_d2_btm,
.mod_d3_btm /*  14px top btm padding, 10 left right, NO BOTTOM MARGIN 1px gray border box with short gradient background */
{
border: 1px solid #ccc;
padding: 14px 10px;
background: url(https://www.att.com/Common/indc/images/short_mod_gradientSlice.gif) 0 100% repeat-x transparent;
}
.mod_d3,
.mod_d3_btm
{
padding: 14px 5px 14px 10px;
}
.mod_e, /* NO INNER PADDING 1px BLUE box with 10px margin at the bottom for mods to be placed underneath. */
.mod_e_flash
{
border: 1px solid #66a5d0;
margin-bottom: 10px;
}
#ie .mod_e,
#ie .mod_e_flash
{
width: 100%;
}
.mod_e_flash
{
border: none;
background: url(https://www.att.com/Common/indc/images/explore_home_noscript_bg.png) repeat-x;
}
.mod_f
{
border: 1px solid #ccc;
padding: 12px;
margin-bottom: 10px;
}
.mod_f2 /* 40px padding, no border with 10px margin at the bottom for mods to be placed underneath. used for heroNoBrdr */
{
margin-bottom: 10px;
padding: 30px 40px 0 40px;
position: relative;
}
.mod_g /*module without right border and top margin  */
{
border-right: 1px solid #ccc;
margin-top: 20px;
padding: 0 15px 0 0;
position: relative;
top: 0;
left: 0;
}
.mod_g_last /*goes with mod_g but is last floated module thus no right border*/
{
border: none;
}
.mod_a6 p
{
width: 200px;
}
.mod_a6 .btnBlueArrow
{
font-size: 1em;
}
p.mod_d_wrap
{
width: 130px;
}
/**************************
MODULES - min-height
**CLASS NAMES are Based on Actual Pixel Height of Module in comp
**Heights declared inside the class are based on markup and browser box models
**************************/
/* used with the mod_a grayBorder class series. this value is 60px due to the white border and less the 24px padding in the mod that it's coupled with. Also less the 2px that comes with the .grayBorder surrounding div.  should have been named "dblBrdr" to be consistent */
.min88 {min-height: 60px;}
/* used with the mod_a grayBorder class series. this value is 84px due to the white border and less the 2px with the .grayBorder surrounding div. should have been named "noPadDblBrdr" to be consistent */

.min88noPad {min-height: 84px;}
.min100noPad {min-height: 96px; }
.min120noPad {min-height: 116px;}
.min133noPad /* come back to this one - TriplePack */
{
min-height: 132px;
}
.min133 /* come back to this one - TriplePack */
{
min-height: 106px; 
}
/* this value is 146px due to the 1px border and the 12px padding in the mod class. */
.min172 /* use this one when there IS padding in the "mod" class that it is coupled with. */
{
min-height: 146px; 
}
.min173 /* use this one when there IS padding in the "mod" class that it is coupled with. */
{
min-height: 147px; 
}
.min186 /* use this one when there IS padding in the "mod" class that it is coupled with. */
{
min-height: 156px;
}
.min186noPad /* "noPad" means there is no padding in the "mod" class that is coupled with this class. */
{
min-height: 184px;
}
.min186noPadDblBrdr /* used with the mod_a / grayBorder class series. this value is 182px due to the double border */
{
min-height: 182px;
}
.min186noBrdr /* used on heros without a border with padding of 30px */
{
min-height: 156px;
}
.min234 
{
min-height: 204px; 
}
.min234noPad 
{
min-height: 232px;
}
.min234noPadDblBrdr 
{
min-height: 230px;
}
.min276 
{
min-height: 246px; 
}
.min276noPad 
{
min-height: 274px;
}
.min276noPadDblBrdr 
{
min-height: 272px;
}
.min347noPad
{
min-height: 347px;
}
.min355 
{
min-height: 329px;
}
.min363noPad 
{
min-height: 361px;
}
.min368
{
min-height: 342px;	
}
.min368noPad
{
min-height: 368px;
}
.min416noPad 
{
min-height: 414px;
}
/* conditional workaround for IE ignoring min-height. */
#ie .min88,
#ie .min88noPad,
#ie .min100noPad,
#ie .min120noPad,
#ie .min133noPad,
#ie .min133,
#ie .min172,
#ie .min173,
#ie .min186,
#ie .min186noPad,
#ie .min186noPadDblBrdr,
#ie .min186noBrdr,
#ie .min234,
#ie .min234noPad,
#ie .min234noPadDblBrdr,
#ie .min276,
#ie .min276noPad,
#ie .min276noPadDblBrdr,
#ie .min347,
#ie .min347noPad,
#ie .min355,
#ie .min363noPad,
#ie .min368,
#ie .min368noPad,
#ie .min416noPad
{
height: auto;
}
#ie .min88,      /* used with the mod_a / grayBorder class series. this value is 86px due to the double border, should have been named "noPadDblBrdr" to be consistent */
#ie .min88noPad  /* "noPad" means there is no padding in the "mod" class that is coupled with this class. */
{
height: 86px;
}
/* used with the mod_a / grayBorder class series. this value is 98px due to the double border, should have been named "noPadDblBrdr" to be consistent  */
#ie .min100noPad /* "noPad" means there is no padding in the "mod" class that is coupled with this class. */
{
height: 98px;
}
/* used with the mod_a / grayBorder class series. this value is 118px due to the double border, should have been named "noPadDblBrdr" to be consistent  */
#ie .min120noPad /* "noPad" means there is no padding in the "mod" class that is coupled with this class. */
{
height: 118px;
}
#ie .min133noPad /* come back to this one - TriplePack */
{
height: 134px;
}
#ie .min133 /* come back to this one - TriplePack */
{
height: 132px;
}
#ie .min172 /* use this one when there IS padding in the "mod" class that it is coupled with. */
{
height: 172px;
}
#ie .min173 /* use this one when there IS padding in the "mod" class that it is coupled with. */
{
height: 173px;
}
#ie .min186,     /* use this one when there IS padding in the "mod" class that it is coupled with. */
#ie .min186noPad /* "noPad" means there is no padding in the "mod" class that is coupled with this class. */
{
height: 186px;
}
/* used with the mod_a / grayBorder class series. this value is 184px due to the double border */
#ie .min186noPadDblBrdr /* "noPad" means there is no padding in the "mod" class that is coupled with this class. */
{
height: 184px;
}
#ie .min186noBrdr
{
height: 186px;
}
#ie .min234,     /* use this one when there IS padding in the "mod" class that it is coupled with. */
#ie .min234noPad /* "noPad" means there is no padding in the "mod" class that is coupled with this class. */
{
height: 234px;
}
/* used with the mod_a / grayBorder class series. this value is 98px due to the double border */
#ie .min234noPadDblBrdr /* "noPad" means there is no padding in the "mod" class that is coupled with this class. */
{
height: 230px;
}
#ie .min276,     /* use this one when there IS padding in the "mod" class that it is coupled with. */
#ie .min276noPad /* "noPad" means there is no padding in the "mod" class that is coupled with this class. */
{
height: 276px;
}
/* used with the mod_a / grayBorder class series. this value is 98px due to the double border */
#ie .min276noPadDblBrdr /* "noPad" means there is no padding in the "mod" class that is coupled with this class. */
{
height: 274px;
}
#ie .min347noPad /* "noPad" means there is no padding in the "mod" class that is coupled with this class. */
{
height: 347px;
}
#ie .min355 /* use this one when there IS padding in the "mod" class that it is coupled with. */
{
height: 355px;
}
#ie .min363noPad{min-height: 363px;}
#ie .min368,     /* use this one when there IS padding in the "mod" class that it is coupled with. */
#ie .min368noPad /* "noPad" means there is no padding in the "mod" class that is coupled with this class. */
{
height: 368px;	
}
#ie .min416noPad /* "noPad" means there is no padding in the "mod" class that is coupled with this class. */
{
height: 416px;
}
/**************************
MODULES - TABBED
**************************/
#content ul.tabs,
#popupContent ul.tabs
{
margin: 0;
padding: 0;
}
#content ul.tabs li,
#popupContent ul.tabs li
{
float: left;
position: relative;
z-index: 9999;
padding: 4px 0 0 0;
background: none;
margin: 0;
}
ul.tabs a
{
display: block;
padding: 5px 12px;
color: #0a94d6;
}
#content ul.tabs .active,
#popupContent ul.tabs .active
{
border: 1px solid #ccc;
border-bottom: 1px solid #fff;
background-color: #fff;
padding: 0;
}
ul.tabs .active a
{
color: #f27d00;
margin: 1px 1px 0 1px;
border-top: 2px solid #f27d00;
}
div.tabs div.tabs div.tabs
{
padding: 14px;
color: #666;
border: 1px solid #ccc;
clear: both;
position: relative;
top: -1px;
left: 0;
width: 680px;
overflow: auto;
}
#ie div.tabs div.tabs div.tabs,
#iePopup div.tabs div.tabs div.tabs
{
z-index: -1;
width: 100%;
}
.ProductDetail
{
width: 710px;
overflow: auto;
height: 100%;
}
.ProductDetail div.tabs div.tabs div.tabs
{
min-height: 535px;
height: auto;
}
#ie .ProductDetail div.tabs div.tabs div.tabs
{
height: 600px;/* IE fix for min-height */
}
.triplePackDetail
{
width: 710px;
overflow: auto;
height: 100%;
}
.triplePackDetail div.tabs div.tabs div.tabs
{
min-height: 535px;
height: auto;
}
#ie .triplePackDetail div.tabs div.tabs div.tabs
{
height: 600px;/* IE fix for min-height */
}
.popupDetail
{
overflow: auto;
height: 100%;
}
.popupDetail div.tabs div.tabs div.tabs
{
width: 95.53%;
min-height: 385px;
height: auto;
}
#ie .popupDetail div.tabs div.tabs div.tabs
{
width: 100%;
height: 400px;/* IE fix for min-height */
}
/**************************
INTERIOR CONTAINERS
**************************/
.manageContainer,
.shortManageContainer,
.mediumManageContainer
{
position: relative;
top: 0;
left: 0;
width: 100%;
min-height: 272px;
height: auto;
}
#ie .manageContainer
{
height: 272px;
}
.shortManageContainer
{
min-height: 182px;
}
#ie .shortManageContainer
{
height: 182px;
}
.mediumManageContainer
{
min-height: 230px;
}
#ie .mediumManageContainer
{
height: 230px;
}
.promoContainer
{
position: relative;
top: 0;
left: 0;
width: 100%;
}
.promoContent /*title, body copy, cta on top of png*/
{
position: relative;
padding: 12px 0 12px 12px;
z-index: 2;
}
.promoContent .footnote
{
color: #ccc;
position: absolute;
bottom: -1.5em;
right: 10px;
text-align: right;
width: 40px !important;
font-size: .9em;
line-height: 1.2em;
padding: 0;
margin: 0;
float: none;
}
.paddedModContent
{
padding: 12px;
}
.paddedModContentNoTop
{
padding: 0 12px 12px 12px;
}
/****
HERO
****/
.rotateHero
{
position: absolute;
bottom: 1px;
right: 1px;
}
#heroNoBrdr .rotateHero
{
bottom: 3px;
right: 3px;
}
.rotateHero .counter
{
background: #fff;
line-height: 19px;
height: 21px;
display: block;
float: left;
padding: 0 5px;
font-size: .9em;
color: #666;
}
.rotateHero .back,
.rotateHero .next
{
float: left;
}
#hero h1
{
margin: 23px 0 0 0;
}
#hero p
{
float: left;
margin: 5px 0 0 0;
width: 15em;
}
.heroCta
{
display: block;
clear: both;
margin: 10px 0 0 0;
}
/**************************
CONTENT VARIATION PAGE
**************************/
.varyContainer
{
position: relative;
top: 0;
left: 0;
min-height: 184px;
height: auto;
width: 100%;
}
.varyContainer
{
height: 184px;
}
.varyContent /*title, body copy, cta on top of png*/
{
position: relative;
padding: 12px 0 12px 12px;
z-index: 2;
}
p.vary
{
margin-top: 10px;
}
.varyOrderNow
{
display: block;
margin-top: 10px;
}
.splitContainerLft
{
float: left;
width: 145px;
padding: 12px 0 12px 12px;
}
#ie .splitContainerLft
{
width: 157px;
}
.splitContainerRgt
{
float: left;
width: 44px;
padding: 12px 0 12px 0;
}
#ie .splitContainerRgt
{
width: 44px;
}
/**************************
POPUP
***************************/
.popupTitle
{
float: left;
margin-left: 5px;
margin-bottom: 0;
padding: 15px 0;
}
#popupWrapper .printLink
{
padding: 14px 25px 14px 0;
position: absolute;
right: 15px;
top: 10px;
}
.popupClose
{
background: url(https://www.att.com/Common/indc/images/btn_close_x.gif) 0 0 no-repeat;
line-height: 3em;
padding: 2px 0 2px 20px;
}
/**************************
FAQ
**************************/
.linkbar
{
position: relative;
margin: -1.8em 0 0 0;
right: 320px;
float: right;
}
#content .linkbar li
{
float: left;
border-right: 1px solid #ccc;
padding: 0 10px;
background: none;
}
#content .linkbar li.last
{
border: none;
}
#content .linkbar .printLink
{
background: url(https://www.att.com/Common/indc/images/ico_print.gif) right 50% no-repeat;
padding: 0 25px 0 0;
}
#content #faqList li
{
background: none;
margin: 0;
padding: 0;
}
#faqList p.q
{
display: block;
width: 100%;
height: 2em;
line-height: 2em;
font-weight: bold;
color: #0a94d6;
cursor: pointer;
text-indent: 30px;
}
#faqList li.open p.q
{
background: #e3eef4 url(https://www.att.com/Common/indc/images/toggle_minus.png) 10px 50% no-repeat;
}
#faqList li.open div.a
{
display: block;
}
#faqList li.close p.q
{
background: #eee url(https://www.att.com/Common/indc/images/toggle_plus.png) 10px 50% no-repeat;
}
#faqList li.close div.a
{
display: none;
}




@media print
{
/*All print styles are here to reduce server hits.*/

	/* Styles listed below will potentially affect all pages when printed. Measures have been taken to limit the affect on non print styled pages as much as possible. */
	
	body
	{
	font-family: 'Times New Roman', serif;
	}
	p
	{
	font-size: 10pt;
	line-height: 10pt;
	}
	
	a
	{
	text-decoration: none;
	color: #000;
	}
	
	h1
	{
	font-size: 15pt;
	line-height: 15pt;
	}
	
	#wrapper,
	#container,
	#page,
	#content
	{
	overflow: visible;
	position: static;
	}
	
	ul#universalNav,
	#header,
	#PrimaryNav,
	#noimg_PrimaryNav,
	#pageID,
	.col_310,
	#btmContainer,
	.printLink
	{
	display: none;
	}
	
	/**************************
	   FAQ & Compare
	**************************/
	#btnChat,
	.linkbar,
	.btnViewAllPlans,
	.footnote a
	{
	display: none;
	}
	
	#page_FAQ .first_630
	{
	width: 100%;
	float: none;
	}
	
	#page_FAQ .grayBorder
	{
	border: 0;
	}
	
	#page_FAQ .paddedModContent
	{
	padding: 0;
	}
	
	#content #faqList li
	{
	
	}
	
	#faqList p.q
	{
	text-indent: 0;
	height: 12pt;
	line-height: 12pt;
	margin: 0 0 10px 0;
	}
	
	#faqList li.close div.a
	{
	display: block;
	}
	
	
	#compare
	{
	border: none;
	}
	
	#pd_price,
	#pd_offers,
	#pd_speed,
	#pd_email,
	#pd_emailsize,
	#pd_storage,
	#pf_1,
	#pf_2,
	#pf_3,
	#eq_1,
	#eq_2
	{
	display: table-row !important; /*block does not align the top headings properly in Firefox but IE does not support this. thus IE is set as block below.*/
	}
	
	#ie #pd_price,
	#ie #pd_offers,
	#ie #pd_speed,
	#ie #pd_email,
	#ie #pd_emailsize,
	#ie #pd_storage,
	#ie #pf_1,
	#ie #pf_2,
	#ie #pf_3,
	#ie #eq_1,
	#ie #eq_2
	{
	display: block !important;
	}
	
	#compare table
	{
	border-collapse: collapse;
	}
	
	#compare td,
	#compare th
	{
	padding: 4pt;
	font-size: 10pt;
	line-height: 11pt;
	text-align: left;
	}
	
	#compare th
	{
	padding-left: 10pt;
	}
	
	#compare td.more
	{
	font-weight: bold;
	font-size: 12pt;
	line-height: 12pt;
	padding: 5pt 0 0 0;
	text-indent: 0;
	color: #0a94d6;
	}
	
	#compare tr.packages th h2
	{
	font-size: 12pt;
	line-height: 12pt;
	padding: 0;
	margin: 0;
	}
	
	#compare th h2 a
	{
	color: #0a94d6;
	}
	
	#compare .packages th
	{
	padding-left: 2pt;
	}
	
	#compare tr.packages th div.greatDeal
	{
	color: #f27d00;
	padding: 0;
	margin: 0;
	}
	
	#compare .packages th img
	{
	display: none;
	}
	
	#compare table th ul,
	#compare table th li
	{
	margin: 0 5pt;
	padding: 0;
	text-align: left;
	list-style-type: square;
	}
	
	#compare table ul,
	#compare table li
	{
	margin: 0 8pt;
	padding: 0;
	text-align: left;
	list-style-type: square !important;
	}
	
	#compare a
	{
	color: #000;
	text-decoration: none;
	}
}