/@charset "utf-8";
html { min-height: 100%; margin-bottom: 1px; }
html, body { margin: 0 0 0 0; padding: 0 0 0 0; }
dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, address, table, th, td, img, a img,
address, caption, cite, code, dfn, th, var { text-align: left; font: normal 12px Arial, Helvetica, sans-serif; margin: 0; padding: 0; list-style: none; border: 0; }
a { color: #003366; text-decoration: none; }
.hide-me, hr, #level-1 h2, #level-1 img { display: none; }
.show-inline { display: inline; }
.clean { clear: both; }
#level-3 form dl { float: left; margin: 0 10px 10px 0; }
.input-text, p select, .input-select { border: 1px solid #dddddd; border-top: 2px groove; padding: 2px; font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif; }
#level-1 h1 a { display: block; position: absolute; width: 290px; height: 55px; top: 30px; left: 24px; }
.level { width: 760px; margin: 0 auto; clear: both; }
#level-1 { background: url(/assets/images/level-1.gif) left top repeat-x #1f496c; }
#level-1 ul { position: absolute; top: 10px; right: 40px; }
#level-1 li { float: left; margin: 0 0 0 7px; font: 10px "Trebuchet MS", Arial, sans-serif; color: #d3e6f6; }
#level-1 li a { color: #9bbfde; }
#level-1 li a:hover { color: #d3e6f6; }
#update-box { padding: 10px; background: #C6E0ED; border: 1px solid #99CCFF; margin: 0 0 10px 0; font: 11px Arial, Helvetica, sans-serif; color: #0099CC; }
#level-3 #update-box h3 { color: #336699; float: none; display: block; margin: 0 0 0 0; padding: 0 0 0 0; }
#level-3 #update-box p { margin: 0 0 10px 0; }
#level-1 .level { position: relative; width: 812px; margin: 0 auto; background: url(images/masthead.gif) left top no-repeat; height: 103px; display: block; }
#level-2 { background: url(images/level-2.gif) left top repeat-x #133653; color: #87b4cc; }
#level-2 .level { }
/*.hide-menu, .show-menu { margin: 0 -15px 0 0; }*/
#more { position: relative; }
#more h3 { text-align: right; display: block; float: right; margin: 0 0 0 0; padding: 0 0 0 0;}
#more h3 a { padding: 12px 15px 7px 15px; display: block; font: bold 14px Arial, sans-serif; text-transform: uppercase; }
.hide-menu #menus { visibility: hidden; }
.hide-menu h3 a { color: #85a4bd; }
.show-menu h3 { background: url(images/nav-current.gif) left top no-repeat #d6dce1; }
.show-menu h3 a { background: url(images/nav-current-right.gif) right top no-repeat; color: #003366; }
#menus { clear: both; background: #eeefef; border: 10px solid #D6DCE1; padding: 10px; width: 400px; position: absolute; z-index: 999; right: 0px; top: 35px;}
#menus dl { width: 180px; margin: 0 10px 10px 0; float: left; }
#menus dt, #more dd { font: 11px Arial, Helvetica, sans-serif; }
#menus dt { color: #4d95bc; text-transform: uppercase; font-weight: bold; margin: 0 0 5px 0; }
#menus dd { margin: 0 0 3px 0; background: url(images/bullet.gif) 5px 4px no-repeat; padding: 0 0 0 18px; }
#menus dd a:hover { text-decoration: underline; color: #4d95bc; }
.small-screenshot { text-align: center; padding: 10px 6px 5px 6px; background: #ffffff; border: 1px dashed #C2DDEF; float: left; margin: 0 10px 10px 0; }
.small-screenshot p { text-transform: uppercase; font: bold 11px Arial, Helvetica, sans-serif; color: #4d95bc; text-align: center; padding: 5px 0 0 0; }
.small-screenshot p.green { color: #009900; }
#nav-main { margin-right: -12px; }
#nav-main, #nav-sub { float: none; }
#nav-main li { float: left; margin: 0 0 0 0; padding: 0 0 0 0; }
#nav-main li a { padding: 12px 15px 7px 15px; display: block; margin: 0 0 0 0; color: #FFFFFF; font: bold 14px Arial, sans-serif; text-transform: uppercase;}
#nav-main li.current { background: url(images/nav-current.gif) left top no-repeat #d6dce1; }
#nav-main li.current a { background: url(images/nav-current-right.gif) right top no-repeat; color: #003366; }
#nav-main li.current a:hover { color: #003366; }
#nav-main li a:hover { color: #d1efff; }
#nav-sub { text-align: left; padding-bottom: 10px; float: left; }
#nav-sub li { display: inline; margin: 0 25px 0 0px; color: #003366; font: bold 12px Arial, sans-serif;}
#nav-sub li a { color: #4d95bc; }
#nav-sub li a:hover { color: #76b2d3; }
#level-3 { background: url(images/level-3.gif) left top repeat-x #ffffff; padding: 12px 0; }
h3 { font: bold 18px Arial, Helvetica, sans-serif; color: #3C719F; margin: 0 0 5px 0; }
.a-phone { clear: both; background: url(images/phone-head.jpg) left top no-repeat #113451; margin: 0 0 20px 0; width: 760px; display: block; z-index: 1; }
.a-phone-base { background: url(images/phone-base.gif) left bottom no-repeat; padding: 20px; display: block; width: 740px;}
.a-phone-base h1 { font: bold 24px Arial, Helvetica, sans-serif; color: #FFFFFF; padding: 0 0 4px 0; float: left; margin-top: -8px; letter-spacing: -0.06em; }
.a-phone h3 { font: bold 16px Arial, sans-serif; color: #9dbbd5; float: right; margin: -10px 0px 0pt 0pt; text-align: center; width: 160px; }
.cost { clear: left; color: #003366; clear: both; padding: 0 0 0 0; display: block; margin: 0 0 0 0; float: left; }
.cost dt { font: bold 34px Arial, sans-serif; letter-spacing: -.05em; margin: 0 0 0 0; text-align: left; }
.cost dd { font: bold 11px Arial, sans-serif; margin: 0 10px 10px 0; text-align: left; float: left; color: #999999; }
.cost em { text-decoration: line-through; font-weight: bold; }
.cost strong { font-weight: bold; }
.a-phone blockquote { font: bold italic 24px Arial, sans-serif; color: #5da5cc; letter-spacing: -0.01em; text-align: center; margin: 0 0 10px 0; }
.about-mid { background: url(images/about-mid.gif) left top repeat-y; clear: both; width: 720px; display: block; }
.about-head { background: url(images/about-head.gif) left top no-repeat; }
.about-base { background: url(images/about-base.gif) left bottom no-repeat; padding: 0 0 0 0; }
.screenshot { padding: 10px 10px 10px 13px; text-align: center; display: block; float: left; width: 146px; clear: both; }
.photo { display: block; padding: 10px 0 15px 0; }
.photo img { background: url(images/photoloading.gif) left top no-repeat; width: 116px; height: 267px; }
.screenshot p { text-align: center; }
.float-left { float: left; }
.float-right { float: right; }
.details { width: 500px; float: right; padding: 20px; display: block; }
.details h2 { font: bold 34px Arial, sans-serif; letter-spacing: -.05em; margin: 0 0 0 0; text-align: left; color: #003366; line-height: 1.2em; }
.details p { font: bold 11px Arial, Helvetica, sans-serif; color: #77a0c2; padding: 0 0 10px 0; }
.details h3 { float: right; margin: 0 0; text-align: center; display: block; width: 218px; height: 49px; }
.details h3 a { padding: 7px 0 0 0; font: bold 20px Tahoma, Arial, Helvetica, sans-serif; letter-spacing: -0.04em; color: #ffffff; background: url(images/addtocart.gif) left top no-repeat #ff8c0f; display: block; width: 218px; height: 49px; text-transform: uppercase; }
.details h3 a:hover { background: url(images/addtocart.gif) left -56px no-repeat #ff8c0f; }
.details h3 em { font: italic normal 12px Arial, Helvetica, sans-serif; letter-spacing: -0.04em; color: #ffffff; text-align: center; text-transform: none; }
.features { background: url(images/features.gif) right top no-repeat; padding: 15px 20px 0 20px; width: 460px; }
.more-features { padding: 15px 10px; }
.features h2, .more-features h2 { font: bold 14px Arial, sans-serif; text-transform: uppercase; color: #245c8c; margin: 0 0 10px 0; letter-spacing: -0.04em; }
.more-features h2 { clear: left; }
.features li, .more-features li { color: #2f5e86; margin: 0 0 10px 0; padding: 0 0 0 15px; background: url(images/bullet.gif) left 3px no-repeat; font-size: 11px; }
.more-features p { color: #2f5e86; margin: 0 0 10px 0; font-size: 11px; }
.features .float-left { width: 227px; }
.features .float-right { width: 198px; }
.features .float-right ul { margin: 0 0 10px 0; }
.features .float-right li { background: none; padding: 0 0 0 0; margin: 0 0 3px 0; }
.features .float-right li a { background: #77a0c2; padding: 6px 0; text-align: center; font: italic 12px Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none; display: block; }
.features .float-right li a:hover { background: #638aab; }
#level-3 p { margin: 0 0 6px 0; }
.myOnPageContent .features { background: none; }
.carrier-mid { display: block; background: url(images/carrier-mid.gif) left repeat-y; width: 201px; }
.carrier-head { background: url(images/carrier-head.gif) left top no-repeat; }
.carrier { display: block; background: url(images/carrier-base.gif) left bottom no-repeat; width: 201px; text-align: center; padding: 10px 0 15px 0;}
#welcome h3 { font: bold 14px Arial, Helvetica, sans-serif; color: #3E74A1; text-align: center; margin: 0 0 0 0; padding: 0 0 4px 0; }
#welcome h4 { font: bold 18px Arial, Helvetica, sans-serif; color: #3E74A1; text-align: center; margin: 0 0 0 0; padding: 0 0 10px 0; }
#welcome span { color: #80B6E3; text-transform: uppercase; }
.more .features .highlights, .more .features .techspecs { float: none; width: auto; margin: 0 0 20px 0; }
.features-and-more { }
.features p { color: #003366; margin: 0 0 10px 0; font: bold 11px Arial, sans-serif; }
.features dd.view-more { background: none;}
.features a, .order-phone p a, .overview li a { color: #339966; text-decoration: underline; padding: 0 0 0 0; margin: 0 0 0 0; }
.features a:hover, .order-phone p a:hover, .overview li a:hover { color: #5ec592; }
.features-base { min-height: 145px; width: 451px; display: block; overflow: auto; }
#details .features-base { width: 100%; padding: 0 0 0 0; }
.more .features-base { height: 250px; overflow: auto; }
.highlights { text-align: left; width: 220px; float: left; display: block; clear: left; margin: 0 0 10px 0; }
#details .highlights { width: auto; float: none; }
.right { float: right; }
.techspecs { width: 200px; display: block; float: right; }
.desc { padding-top: 10px; }
.desc dd { background: none; padding: 0 0 0 0; }
.more-details img, .more-photos img { margin: 0 5px -3px 0; }
.order-phone { display: block; text-align: center; }
.order-phone p { text-align: center; font: bold 11px Arial, Helvetica, sans-serif; color: #336699; padding: 0 5px 10px 5px; }
.order-phone h1 { font: bold 18px Arial, sans-serif; color: #336699; text-align: center; margin: 0 0 10px 0; padding: 10px 5px 0 5px; line-height: 1.2em; letter-spacing: -0.03em; }
.order-phone h1 em { font: bold italic 22px Arial, sans-serif; color: #4989ca; }
.order-phone dl { text-align: center; }
.order { letter-spacing: -0.03em; display: block; background: url(images/button.gif) left top no-repeat; width: 215px; height: 44px; padding: 12px 15px; }
.order:hover { background: url(images/button.gif) left -68px no-repeat; }
.order dt { text-align: center; margin: 0 0 3px 0; padding: 0 0 0 0; }
.order dt, .order dd, .order strong { color: #ffffff; text-decoration: none; font: bold 14px Arial, sans-serif;}
.order dd { font: bold 11px Arial, sans-serif; color: #99b2cd; text-align: center; }
.order-left { margin: 0 0 15px 0; float: left; }
.order-right { margin: 0 0 15px 0; float: right; }
#quickfind { float: right; margin: -5px 0px 10px 0; }
#quickfind select { font: bold 11px Arial, Helvetica, sans-serif; }
.a-head { font: bold 20px Arial, Helvetica, sans-serif; color: #336699; margin: 0 0 5px 0; }
#signup { border: 10px solid #D9D9D9; padding: 20px; }
#signup .input-button { background: url(images/signup.gif) left top no-repeat; display: block; width: 89px; height: 26px; cursor: pointer; }
#signup dt { font: 11px Arial, Helvetica, sans-serif; margin: 0 0 0 0; line-height: 1.8em; }
#signup em { font: italic 11px Georgia, "Times New Roman", Times, serif; color: #777777; margin: 0 0 0 3px; }
#signup dd { margin: 0 0 15px 0; font: bold 14px Arial, Helvetica, sans-serif; color: #333333; }
#signup .input-text { background:#F3F3F3; border-color: #BBBBBB rgb(187, 187, 187) rgb(221, 221, 221); border-style:solid; border-width:2px 1px 1px; font: bold 14px Arial, Helvetica, sans-serif; letter-spacing: -0.04em; color: #AAAAAA; padding: 5px; }
#signup select { background: #F3F3F3; padding: 0 0 0 0; font: bold 14px Arial, Helvetica, sans-serif; letter-spacing: -0.04em; color: #AAAAAA;}
#signup .input-check { margin: 0 5px 0 0; }
#already { background: #EEEEEE; font: italic 12px Arial, Helvetica, sans-serif; padding: 2px; margin: 0 0 10px 0; }
#already a { color: #4d95bc; font-weight: bold; }
#already a:hover { text-decoration: underline; }
.page h2 { font: bold 20px Arial, Helvetica, sans-serif; color: #336699; margin: 0 0 5px 0; }
.page blockquote { background: #EEEEEE; font: italic 12px Arial, Helvetica, sans-serif; padding: 2px; margin: 0 0 10px 0; }
.page blockquote a { color: #4d95bc; font-weight: bold; }
.page blockquote a:hover { text-decoration: underline; }
.page h3 { font: bold 16px Arial, Helvetica, sans-serif; color: #336699; margin: 0 0 5px 0; }
.page ul { margin: 0 0 10px 0; }
.page ul li { font: 12px Arial, Helvetica, sans-serif; line-height: 2em; background: url(images/bullet.gif) 10px 8px no-repeat; padding: 0 0 0 25px; }
table
{
width: 100%;
padding: 0;
margin: 0 auto 1.5em auto;
border-left: 1px solid #C1DAD7;
border-collapse:collapse;
}
.cs1
{
width:30em;
}
.cs2
{
width:20em;
}
.cs1 td,
.cs2 td,
#scientificNotation
{
text-align:right;
}
caption
{
padding: 0 0 5px 0;
margin:0 auto;
width:auto;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th
{
font: bold 10px/22px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 1px;
text-transform: uppercase;
text-align: left;
padding: 8px 12px 4px 12px;
background: #CAE8EA url(/affiliates/assets/images/bg_header.jpg) no-repeat;
vertical-align:middle;
}
td.total
{
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
text-align:right;
font-weight:bold;
text-transform:uppercase;
letter-spacing:1px;
}
th.sortable,
th.sortable-text,
th.sortable-date,
th.sortable-keep,
th.sortable-date-dmy,
th.sortable-numeric,
th.sortable-currency,
th.sortable-sortByTwelveHourTimestamp,
th.sortable-sortIPAddress,
th.sortable-sortEnglishLonghandDateFormat,
th.sortable-sortScientificNotation,
th.sortable-sortImage,
th.sortable-sortFileSize
{
cursor:pointer;
background: #CAE8EA url(/affiliates/assets/images/bg_header_sortable.jpg) no-repeat;
padding: 8px 12px 4px 16px;
}
th.forwardSort
{
background:#CAE8EA url(/affiliates/assets/images/bg_header_down.jpg) no-repeat 0 0;
}
th.reverseSort
{
background:#CAE8EA url(/affiliates/assets/images/bg_header_up.jpg) no-repeat 0 0;
}
table thead th.forwardSort a,
table thead th.reverseSort a
{
color:#000;
text-decoration:none;
}
/*
These styles should be added when very long tables are expected
th.sort-active
{
background:#CAE8EA url(../media/bg_header_sorting.jpg) no-repeat 0 0;
cursor:wait;
}
th.sort-active a
{
color:#a80000 !important;
cursor:wait;
}
*/
th a
{
text-decoration:none;
color: #4f6b72;
background:transparent;
}
td a
{
text-decoration:none;
color:#239;
background:transparent;
}
td img
{
margin:0 auto;
border:3px solid #ddd;
}
td a:hover
{
color:#a84444;
border-bottom:1px dotted #a80000;
background:transparent;
}
td
{
font: normal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
padding: 6px 12px 6px 12px;
color: #4f6b72;
}
td.lft
{
text-align:left;
}
tr.alt
{
background: #F5FAFA;
color: #797268;
}
/* Poor old Internet Explorer has a bug that means we can't use background images for the table rows
as it trys to download the image each and every time that it is used (which means a 1000 row table
will produce 1000 http requests for the image in question) */
tr[class="alt"] td
{
background: #F5FAFA url(/affiliates/assets/images/td_alt.jpg) no-repeat;
}
td[class~="alt"]
{
background: #edf3f3 url(/affiliates/assets/images/col_alt.jpg) no-repeat !important;
}
/* Poor old Internet Explorer won't see the next two rules either */
tbody tr.alt td:first-child
{
background: #F5FAFA url(/affiliates/assets/images/bullet2.gif) no-repeat;
font-weight:bold;
}
tbody tr td:first-child
{
background: #fff url(/affiliates/assets/images/bullet1.gif) no-repeat;
font-weight:bold;
}
/* Image free rules for Internet Explorer < 7 */
* html tr.alt td
{
background-color:#F5FAFA;
}
* html tr td.alt,
* html tr.alt td.alt
{
background-color:#edf3f3;
}