body {font-family: "Lucida Grande", Verdana, Arial, sans-serif; margin: 0 auto; text-align: center; background: url(../images/body-bg.png) top left repeat-x #000; color: #222; font-size: 12px; min-width: 1000px;}
body.alt {background: url(../images/bg_alt.png) top left repeat-x;}
body.none {background:none;}
a {text-decoration:none; color: #cc2e2e; outline:none;}
button {cursor:pointer;}


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

#header_wrapper {height: 80px; width: 100%; margin: 0 auto; text-align: center;background: url(../images/bg.png) top center repeat-y;}
#header {background: none; width: 1000px; height: 80px; margin: 0 auto; position: relative;}

#header h1 {margin: 0 auto; position: absolute; top: 10px; left: 35px; float: left;}
#header h1 a {display: block; height: 35px; width: 195px; padding: 0;}
#header h1 a span {display: none;}

#nav {float: right; position: relative; top: 38px; right:20px;}
#nav li {float: left; margin: 0 20px 0 0; width:100px; height:24px;}
#nav li.last {margin-right: 0;}
#nav li a {display: block;}
#nav li a span {display: none;}

#back {float: right; position: relative; top: 10px; right:25px;}
#back li {float: left; margin: 0 0px 0 0;}
#back li.last {margin-right: 0;}
#back li a {display: block;}
#back li a span {display: none;}

#nav li.phones a {background-position: 0px 0px; width: 76px;}
#nav li.phones a:hover {background-position: 0px -25px;}
#nav li.phones a:active {background-position: 0px -50px;}

#nav li.account a {background-position: 0px -75px; width: 125px;}
#nav li.account a:hover {background-position: 0px -100px;}
#nav li.account a:active {background-position: 0px -125px;}

#nav li.support a {background-position: 0px -150px; width: 89px;}
#nav li.support a:hover {background-position: 0px -175px;}
#nav li.support a:active {background-position: 0px -200px;}

#nav ul.subnav {position: absolute;}
#nav ul.subnav li {}
#nav ul.subnav li a {}

#nav li.phones ul.subnav {position: absolute; top: 25px; left: -15px; background: #FFF; width: 150px; padding: 20px 10px 5px 10px; z-index: 2; display: none;}
#nav li.phones ul.subnav li {margin: 0; padding: 0;}
#nav li.phones ul.subnav li a {width: 150px; height: 35px; background: none;}
#nav li.phones ul.subnav li a span {display: block; font-size: 13px; line-height: 35px; color: #444; border-bottom: 1px solid #EEE; padding: 0 5px 0 5px;}
#nav li.phones ul.subnav li a:hover span {color: #87CC2E;}
#nav li.phones ul.subnav li a:active span {color: #222;}
#nav li.phones ul.subnav li.last a span {border: none;}


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

.col2-set { padding:20px; }
.col2-1 { float:left; width:58%; padding:5px; }
.col2-2 { float:right; width:38%; padding:5px; }

.heading1 { font-size:24px; padding:20px 0 35px 10px; }
.heading2 { font-size:18px; padding:5px; }

p { padding:5px; line-height:18px; }

.col2-set ul { padding:5px; }
.col2-set li { margin-left:20px; list-style:circle;  padding:5px; line-height:18px;}

.redbg { background:#99383b; color:white; padding:5px; margin:5px;}

#content_wrapper {margin: 0 auto; overflow: hidden;background: url(../images/bg.png) top center repeat-y;}

#content {width: 980px; margin: 0 auto; min-height: 400px; position:relative; /*z-index:0;*/}
#content.alt {min-height: 220px; background: url(../images/content_bg_alt.png) top center no-repeat;}
#content.none {min-height: 220px; background: none;}


.columns {float: left;}
.columns .column {float: left; position: relative; width: 300px; margin: 0 50px 0 0; position: relative;}
.columns .column.wide {width: 650px;}
.columns .column.last {margin-right: 0;}

.columns h3 {color: #87CC2E; font-size: 18px; margin: 0 0 30px 0;}
.columns h3.short {margin-bottom: 10px;}
.columns p {color: #999; font-size: 12px; margin: 0 0 30px 0; line-height: 18px;}
.columns p.last {margin: 0;}

#content .divider {background: #D9E1CE; height: 1px; width: 100%; margin: 40px 0 40px 0; clear: both;}

#banner {}
#banner.home {height: 600px; position: relative; width: 1000px;}

#banner.home .graphic {width: 1000px; height: 600px; position: absolute;}
#banner.home .graphic.g1 {background: url(../images/banner_g1.png) top right no-repeat; width: 725px; height: 600px; position: absolute; top: 0px; right: -50px;}

#banner.home .message {width: 300px; position: absolute; bottom: 240px; left: 0px; float: left;}
#banner.home .message h3 {}
#banner.home .message h3 span {display: none;}
#banner.home .message p {color: #FFF; font-size: 12px; line-height: 20px; margin: 0 0 40px 0;}
#banner.home .message.m1 h3 {width: 171px; height: 94px; background: url(../images/banner_m1.gif) top left no-repeat; margin: 0 0 10px 0;}

#banner.home .mobileAvailability {width: 450px; position: absolute; bottom: 40px; left: 0px; float: left;}
#banner.home .mobileAvailability .middle {height: 50px; text-align: center; background: url(../images/mobileAvailability.png) center 30px no-repeat;}
#banner.home .mobileAvailability .middle h4 {text-align: center; color: #A3AA9B;}

#banner.home .quote {width: 650px; height: 200px; position: absolute; top: 400px; left: 0px; float: left;}
#banner.home .quote li {list-style: none; display:none;}
#banner.home .quote li.active {display: block;}
#banner.home .quote li span {display: none;}
#banner.home .quote li.q1 a {display: block; width: 460px; height: 128px; background: url(../images/banner_q1.gif) top left no-repeat; position: absolute; top: 25px; left: -25px;}

#banner ul.subnav {}
#banner ul.subnav li {float: left; margin: 0 5px 0 0;}
#banner ul.subnav li.last {margin-right: 0;}
#banner ul.subnav li a {display: block; height: 30px;}
#banner ul.subnav li a span {background: url(../images/header_subnav.png) top right no-repeat; display: block; height: 30px; float: left; line-height: 30px; padding: 0 15px 0 0; color: #FFF;}
#banner ul.subnav li a span.cap {background: url(../images/header_subnav.png) top left no-repeat; display: block; width: 15px; height: 30px; float: left; padding: 0;}
#banner ul.subnav li a:hover span {background-position: right -35px; color: #FFF;}
#banner ul.subnav li a:hover span.cap {background-position: left -35px;}
#banner ul.subnav li a:active span {background-position: right -70px; color: #FFF;}
#banner ul.subnav li a:active span.cap {background-position: left -70px;}
#banner ul.subnav li.active a span {background-position: right -105px; color: #111;}
#banner ul.subnav li.active a span.cap {background-position: left -105px;}

.borderedButton {display: block; background: url(../images/borderedButton.gif) top left no-repeat; height: 30px; width: 100px;}
.borderedButton span {display: none;}
.borderedButton.download {background-position: 0px 0px; width: 127px;}
.borderedButton.download:hover {background-position: 0px -30px;}
.borderedButton.download:active {background-position: 0px -60px;}
.borderedButton.findYourPhone {background-position: 0px -90px; width: 161px;}
.borderedButton.findYourPhone:hover {background-position: 0px -120px;}
.borderedButton.findYourPhone:active {background-position: 0px -150px;}
.borderedButton.downloadGrooveshark {background-position: 0px -180px; width: 223px;}
.borderedButton.downloadGrooveshark:hover {background-position: 0px -210px;}
.borderedButton.downloadGrooveshark:active {background-position: 0px -240px;}

.block {border-top: 1px solid #D9E1CE; padding: 40px 0 0 0; margin: 0 0 40px 0;}
.block.first {border: none;}
.paddedblock {border-top: 1px solid #D9E1CE; padding: 40px 0 0 40px; margin: 0 0 40px 0;}

.multiphone {float: left; margin: 0 40px 0 0; padding: 0 40px 0 150px; height: 190px; background: url(../images/border_dotted_vertical.gif) top right repeat-y; width: 470px; position: relative;}
.multiphone .phone {background: url(../images/multiphone.png) top left no-repeat;}
.multiphone .phone.palm {background-position: 0px 0px; position: absolute; top: 0px; left: -12px; width: 130px; height: 220px;}
.multiphone h3 {display: block; width: 318px; height: 34px; background: url(../images/multiphone_title.gif) top left no-repeat; margin: 15px 0 15px 0;}
.multiphone h3 span {display: none;}
.multiphone p {color: #999; font-size: 13px; font-weight: normal; line-height: 18px;}
.multiphone p.subtitle {color: #333; font-size: 13px; font-weight: normal; margin: 0 0 10px 0; line-height: 18px;}

.greenbox {background: #F7F9F4; margin: 0;}
.greenbox .cap {background: url(../images/greenbox_cap.gif) top left no-repeat; width: 10px !important; height: 10px !important; display: block;}
.greenbox .cap.left {float: left !important;}
.greenbox .cap.right {float: right !important;}
.greenbox .top {display: block; width: 100%; height: 10px;}
.greenbox .top .cap.left {background-position: top left;}
.greenbox .top .cap.right {background-position: top right;}
.greenbox .bottom {display: block; width: 100%; height: 10px;}
.greenbox .bottom .cap.left {background-position: bottom left;}
.greenbox .bottom .cap.right {background-position: bottom right;}
.greenbox .middle {padding: 10px 20px 10px 20px;}

.greenbox.errors {background: #fbeaea; display: none; margin: 0 0 30px 0;}
.greenbox.errors.show {display: block;}
.greenbox.errors .cap {background-image: url(../images/greenbox_errors_cap.gif);}
.greenbox.errors .middle {padding: 10px 20px 10px 20px;}
.greenbox.errors h3 {color: #9E4444 !important; margin: 0 0 10px 0 !important;}
.greenbox.errors p {color: #C98888 !important; margin: 0 !important;}
.greenbox.errors ul {margin: 20px 0 0 0;}
.greenbox.errors ul li {font-size: 11px; line-height: 14px; margin: 0 0 5px 0; color: #9E4444; padding: 0 0 0 20px; background: url(../images/bullet_red_5.gif) 0px 5px no-repeat;}
.greenbox.errors ul li.last {margin: 0;}

.greenbox.pricing {float: left; width: 300px; margin:0; position: relative;}
.greenbox.pricing .middle {height: 170px; background: url(../images/greenbox_pricing_bg.gif) center 35px no-repeat; padding:0;}
.greenbox.pricing .middle h4 {text-transform: uppercase; text-align: center; padding: 12px 0 0 0; font-size: 13px; letter-spacing: 1px;}
.greenbox.pricing .buttons {position: absolute; bottom: 20px; width: 100%;}

.greenbox.pricing.vip .middle {background: url(../images/greenbox_pricing_vip_bg.gif) center 35px no-repeat;}

.greenbox.style_a {float: left; width: 300px; position: relative;}
.greenbox.style_a .middle {padding: 10px 20px 10px 20px;}
.greenbox.style_a h5 {font-size: 15px; line-height: 22px; margin: 0 0 20px 0;}
.greenbox.style_a h5.short {margin-bottom: 5px;}
.greenbox.style_a p {font-size: 13px; line-height: 20px; margin: 0 0 20px 0;}
.greenbox.style_a p.last {margin-bottom: 0px;}

.features.home  {padding: 0 0 0 25px;}
.features.home li {float: left; width: 240px; margin: 0 40px 0 0; padding: 0 0 30px 40px; position: relative;}
.features.home li.last {margin-right: 0px;}
.features.home li h4 {color: #222; font-size: 18px; font-weight: normal; margin: 3px 0 15px 0; line-height:25px;}
.features.home li p {color: #999; font-size: 12px; font-weight: normal; margin: 0 0 30px 0; line-height: 18px;}
.features.home li a {color: #cc2e2e; font-size: 13px; border-bottom: 1px dotted #cc2e2e;}
.features.home li .icon {display: block; width: 24px; height: 24px; background: url(../images/icons_features.gif) top left no-repeat; float: left; position: absolute; top: 0px; left: 0px;}
.features.home li .icon.search {background-position: 0px 0px;}
.features.home li .icon.heart {background-position: 0px -24px;}
.features.home li .icon.play {background-position: 0px -48px;}

.directory  {margin: 20px 0 0 0; padding: 0 0 0 25px;}
.directory {float: left; width: 840px; margin: 0 40px 0 0; padding: 0 0 30px 40px; position: relative;}
.directory h4 {display:inline; color: #222; font-size: 18px; font-weight: normal; margin: 3px 0 15px 0; line-height:25px;}
.directory p {display:inline; color: #999; font-size: 12px; font-weight: normal; margin: 0 0 30px 0; line-height: 18px;}
.directory a {color: #cc2e2e; font-size: 13px; border-bottom: 1px dotted #cc2e2e;}
.directory .icon {display: block; width: 24px; height: 24px; background: url(../images/icons_features.gif) top left no-repeat; float: left; position: absolute; top: 0px; left: 0px;}

.buttons {float:right; text-align: center; margin: 0 auto;}
.buttons.left {text-align: left; margin: 0 auto;}
.buttons.alignLeft {text-align: left;}
.buttons a.smallButton {display: inline-block; height: 32px; background: url(../images/smallButton.png) top left no-repeat;}
.buttons a.largeButton {display: inline-block; height: 52px; background: url(../images/largeButton.png) top left no-repeat;}
.buttons a span {display: none;}

.buttons a.smallButton.upgrade {background-position: 0px 0px; width: 113px;}
.buttons a.smallButton.upgrade:hover {background-position: 0px -32px;}
.buttons a.smallButton.upgrade:active {background-position: 0px -64px;}

.buttons a.smallButton.tryIt {background-position: 0px -96px; width: 135px;}
.buttons a.smallButton.tryIt:hover {background-position: 0px -128px;}
.buttons a.smallButton.tryIt:active {background-position: 0px -160px;}

.buttons a.largeButton.download {background-position: 0px 0px; width: 260px;}
.buttons a.largeButton.download:hover {background-position: 0px -52px;}
.buttons a.largeButton.download:active {background-position: 0px -104px;}

.buttons button.inactive {opacity: .3; filter: alpha(opacity = .3);}


/* -------------------------------------------------- */
/* --------------------- FORMS ---------------------- */
/* -------------------------------------------------- */

form .columns.one .column {float: left; width: 650px; margin: 0; position: relative;}

form .columns.two .column {float: left; width: 300px; margin: 0 50px 0 0; position: relative;}
form .columns.two .column.last {margin: 0;}

form .label {font-size: 13px; color: #666; margin: 0 0 8px 0;}
form .label.error {color:#ff0000;}
form .field {font-family: "Lucida Grande", Verdana, Arial, sans-serif; line-height: 35px; font-size: 16px; color: #222; margin: 0 0 25px 0;}
form .field.last {margin: 0;}
form .field.error {color: #FF0000;}
form .fakeLabel {clear:both; font-size: 13px; color: #666; margin: 25px 0 8px 0;}
form .fakeLabel.error {color:#ff0000;}

form h3 {color: #87CC2E; font-size: 18px; margin: 0 0 30px 0;}
form h3.short {margin-bottom: 10px;}

form p {color: #999; font-size: 12px; margin: 0 0 30px 0; line-height: 18px;}
form p.last {margin: 0;}

form .sublabel {font-size: 11px; color: #999; margin: 5px 0 25px 0; line-height: 14px;}
form .sublabel.last {margin-bottom: 0;}

.input_wrapper {background: url(../images/form_inputwrapper_bg.png) top right no-repeat; height: 35px;}
.input_wrapper .cap {background: url(../images/form_inputwrapper_cap.png) top left no-repeat; height: 25px; padding: 5px 8px 5px 8px;}
.input_wrapper input {border: none; background: none; font-size: 16px; color: #999; margin: 0; height: 22px; padding: 3px 0 0 0; line-height: 25px; width: 100%; font-family: "Lucida Grande", Verdana, Arial, sans-serif; }
.input_wrapper input:hover {color: #666;}
.input_wrapper input:focus {color: #111;}
.input_wrapper.multiline {margin: 0 0 5px 0;}
.input_wrapper.active {background-position: right -35px;}
.input_wrapper.active .cap {background-position: 0 -35px;}
.input_wrapper.active input {color: #494420;}
.input_wrapper.error {background-position: right -70px;}
.input_wrapper.error .cap {background-position: 0 -70px;}
.input_wrapper.error input {color: #b85353;}
.input_wrapper.error input:hover {color: #ab2929;}
.input_wrapper.error input:focus {color: #931414;}
.input_wrapper.var_size {float: left; margin: 0 10px 0 0;}
.input_wrapper.extra {margin: 0;}
.input_wrapper.last {margin: 0;}

.input_wrapper.selectbox {position: relative; background-image: url(../images/form_selectbox_bg.png);}
.input_wrapper.selectbox:hover {background-position: right -35px;}
.input_wrapper.selectbox:active {background-position: right -70px;}
.input_wrapper.selectbox select {width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: none; -moz-opacity:0; filter:alpha(opacity:0); opacity:0; position: absolute; top: 0px; left: 0px; font-size: 25px; line-height: 25px; color: #222; font-family: "Lucida Grande", Verdana, Arial, sans-serif;}
.input_wrapper.selectbox select option {padding: 10px 6px 10px 6px; font-size: 16px; background: #FFF;}
.input_wrapper.selectbox span {font-size: 16px; color: #999; margin: 0; height: 22px; padding: 3px 0 0 0; line-height: 25px; width: 100%;}
.input_wrapper.selectbox:hover span {color: #666;}
.input_wrapper.selectbox:active span {color: #111;}
.input_wrapper.selectbox.active .cap {background-position: 0 0;}

.input_wrapper.selectbox.error {background-position: right -105px;}
.input_wrapper.selectbox.error:hover {background-position: right -140px;}
.input_wrapper.selectbox.error:active {background-position: right -175px;}
.input_wrapper.selectbox.error span {color: #b85353;}
.input_wrapper.selectbox.error:hover span {color: #ab2929;}
.input_wrapper.selectbox.error:active span {color: #931414;}

.textarea_wrapper {width: 100%; font-family: "Lucida Grande", Verdana, Arial, sans-serif;}
.textarea_wrapper .top {background: url(../images/form_inputwrapper_bg.png) top right no-repeat; height: 8px;}
.textarea_wrapper .top .cap {background: url(../images/form_inputwrapper_cap.png) top left no-repeat; height: 8px;}
.textarea_wrapper .bottom {background: url(../images/form_inputwrapper_bg.png) right -28px no-repeat; height: 7px;}
.textarea_wrapper .bottom .cap {background: url(../images/form_inputwrapper_cap.png) 0 -28px no-repeat; height: 7px;}
.textarea_wrapper .inner {background: url(../images/form_textarea_normal_bg.png) top right;}
.textarea_wrapper .inner .cap {background: url(../images/form_textarea_normal_cap.png) top left repeat-y; height: 100px; padding: 0 8px 0 8px;}
.textarea_wrapper .inner textarea {font-family: "Lucida Grande", Verdana, Arial, sans-serif; border: none; background: none; font-size: 16px; color: #999; margin: 0; height: 22px; padding: 0; line-height: 25px; width: 100%; height: 100%;}
.textarea_wrapper .inner textarea:hover {color: #666;}
.textarea_wrapper .inner textarea:focus {color: #111;}
.textarea_wrapper.active .top {background-position: right -35px;}
.textarea_wrapper.active .top .cap {background-position: left -35px;}
.textarea_wrapper.active .bottom {background-position: right -63px;}
.textarea_wrapper.active .bottom .cap {background-position: left -63px;}
.textarea_wrapper.active .inner {background-image: url(../images/form_textarea_active_bg.png);}
.textarea_wrapper.active .inner .cap {background-image: url(../images/form_textarea_active_cap.png);}
.textarea_wrapper.active .inner textarea {color: #494420;}
.textarea_wrapper.error .top {background-position: right -70px;}
.textarea_wrapper.error .top .cap {background-position: left -70px;}
.textarea_wrapper.error .bottom {background-position: right -98px;}
.textarea_wrapper.error .bottom .cap {background-position: left -98px;}
.textarea_wrapper.error .inner {background-image: url(../images/form_textarea_error_bg.png);}
.textarea_wrapper.error .inner .cap {background-image: url(../images/form_textarea_error_cap.png);}
.textarea_wrapper.error .inner textarea {color: #b85353;}
.textarea_wrapper.error .inner textarea:hover {color: #ab2929;}
.textarea_wrapper.error .inner textarea:focus {color: #931414;}
.textarea_wrapper.last {margin: 0;}

.radio_wrapper {height: 35px;}
.radio_wrapper li {float: left;}
.radio_wrapper li .label {display: block; height: 35px; width: 20px; margin: 0 5px 0 0 !important; float: left;}
.radio_wrapper li .value {display: block; height: 35px; margin: 0 30px 0 0; float: left; line-height: 35px; font-size: 14px; color: #666;}
.radio_wrapper li.last {margin: 0 !important;}
.radio_wrapper li input {width: 15px; height: 15px; margin: 10px 0 0 0; padding: 0;}

.checkbox_wrapper {height: 35px;}
.checkbox_wrapper li {float: left;}
.checkbox_wrapper li .label {display: block; height: 35px; width: 20px; margin: 0 5px 0 0 !important; float: left;}
.checkbox_wrapper li .value {display: block; height: 35px; margin: 0 30px 0 0; float: left; line-height: 35px; font-size: 14px;}
.checkbox_wrapper li.last {margin: 0;}
.checkbox_wrapper li input {width: 15px; height: 15px; margin: 9px 0 0 0; padding: 0;}

.buttons .middle {text-align: center; margin: 0 auto;}
.buttons.left {text-align: left; margin: 0 auto;}
.buttons.alignLeft {text-align: left;}
.buttons button {border: none; background: none; overflow: visible; padding: 0;}
.buttons button div {display: block; float: left; height: 32px; padding: 0 16px 0 0; white-space: nowrap; background: url(../images/form_button.png) top right no-repeat; font-size: 14px; font-family: "Lucida Grande", Verdana, Arial, sans-serif; white-space:nowrap;}
.buttons button span {background: url(../images/form_button.png) top left no-repeat #FFF; font-size: 13px; display: block; padding: 0 0 0 17px; height: 32px; line-height: 29px; font-weight: bold; float: left; white-space:nowrap; clear:none; color: #FFF; text-shadow: 0px -1px 0px #2273a8;}
.buttons button:hover div {background-position: right -32px;}
.buttons button:hover span {background-position: 0 -32px; color: #FFF;}
.buttons button:active, .buttons button:focus {outline: none;}
.buttons button:active div {background-position: right -64px;}
.buttons button:active span {background-position: 0 -64px; color: #FFF;}
.buttons button.inactive {opacity: .3; filter: alpha(opacity = .3);}

.buttons button.green div {background-position: right -96px;}
.buttons button.green span {background-position: left -96px; text-shadow: 0px -1px 0px #56831c;}
.buttons button.green:hover div {background-position: right -128px;}
.buttons button.green:hover span {background-position: left -128px;}
.buttons button.green:active div {background-position: right -160px;}
.buttons button.green:active span {background-position: left -160px;}

.buttons button.red div {background-position: right -192px;}
.buttons button.red span {background-position: left -192px; text-shadow: 0px -1px 0px #9c1717;}
.buttons button.red:hover div {background-position: right -224px;}
.buttons button.red:hover span {background-position: left -224px;}
.buttons button.red:active div {background-position: right -256px;}
.buttons button.red:active span {background-position: left -256px;}

.buttons button.thinandtall span {font-weight: normal; text-transform: uppercase; line-height: 30px;}

.greenbox.buttons .middle {padding: 5px 20px 3px 20px;}
.greenbox button span {background-color: #F7F9F4;}

/* -------------------------------------------------- */
/* ------------------ PHONES PAGE ------------------- */
/* -------------------------------------------------- */

#banner.phones {height: 220px; position: relative; width: 1000px;}

#banner.phones .graphic {width: 450px; height: 300px; position: absolute; display: none;}
#banner.phones .graphic.g1 {background: red; width: 450px; height: 300px; position: absolute; top: 0px; right: -50px;}

#banner.phones .message {width: 550px; position: absolute; bottom: 40px; left: 0px; float: left;}
#banner.phones .message h3 {}
#banner.phones .message h3 span {display: none;}
#banner.phones .message p {color: #FFF; font-size: 12px; line-height: 20px; margin: 0;}
#banner.phones .message.m1 h3 {width: 237px; height: 34px; background: url(../images/phones_m1.gif) top left no-repeat; margin: 0 0 6px 0;}

ul.phoneSpread {margin: 0 0 40px 0;}
ul.phoneSpread li {float: left; margin: 0 33px 0 0; position: relative;}
ul.phoneSpread li.last {margin-right: 0px;}
ul.phoneSpread li a {display: block; width: 225px; height: 400px;}
ul.phoneSpread li a span {display: none;}
ul.phoneSpread li.empty {display: block; background: url(../images/phoneSpread_bg.png) top left no-repeat; width: 225px; height: 400px;}

ul.phoneSpread li .comingSoon {display: block; width: 103px; height: 103px; position: absolute; top: -3px; right: -3px; background: url(../images/comingSoon.png) top right no-repeat;}
ul.phoneSpread li .comingSoon span {display: none;}

ul.phoneSpread li.iphone a {background: url(../images/phoneSpread_iphone.png) top left no-repeat;}
ul.phoneSpread li.android a {background: url(../images/phoneSpread_android.png) top left no-repeat;}
ul.phoneSpread li.blackberry a {background: url(../images/phoneSpread_blackberry.png) top left no-repeat;}
ul.phoneSpread li.palmpre a {background: url(../images/phoneSpread_palmPre.png) top left no-repeat;}
ul.phoneSpread li a:hover {background-position: bottom left;}

/* -------------------------------------------------- */
/* --------------- SINGLE PHONE PAGE ---------------- */
/* -------------------------------------------------- */

.phoneViewer {display: block; float: left; position: relative; /*z-index:-2;*/}
.phoneViewer.iphone {background: url(../images/phoneViewer_iphone.png) top left no-repeat; width: 370px; height: 610px; top: 20px; left: -50px;}
.phoneViewer.android {background: url(../images/phoneViewer_android.png) top left no-repeat; width: 370px; height: 660px; top: 20px; left: -50px;}
.phoneViewer.blackberry {background: url(../images/phoneViewer_blackberry.png) top left no-repeat; width: 370px; height: 610px; top: 20px; left: -50px;}
.phoneViewer.palm {background: url(../images/phoneViewer_palm.png) top left no-repeat; width: 370px; height: 580px; top: 20px; left: -50px;}

.phoneViewer .screencast {position: relative; background: red; display: block; /*z-index:-1;*/}
.phoneViewer.iphone .screencast {width: 227px; height: 340px; top: 87px; left: 72px;}

#content .columns.phoneDetails {width: 650px; margin: 40px 0 0 0;}

#banner.phoneDetails {height: 400px; position: relative;}
#banner.phoneDetails .message {width: 650px; position: absolute; bottom: 40px; left: 0px; float: left;}
#banner.phoneDetails .message h3 {margin: 0 0 10px 0;}
#banner.phoneDetails .message h3 span {display: none;}
#banner.phoneDetails .message p {color: #FFF; font-size: 12px; line-height: 20px; margin: 0 0 40px 0;}
#banner.phoneDetails .borderedButton {float: left; margin: 0 10px 0 0;}
#banner.phoneDetails .images {background: url(../images/square_white_15.png) top left repeat-x; width: 650px; margin: 25px 0 0 0; padding: 25px 0 0 0;}

#banner.phoneDetails .images ul.thumbnails {}
#banner.phoneDetails .images ul.thumbnails li {float: left; margin: 0 10px 0 0;}
#banner.phoneDetails .images ul.thumbnails li a {display: block; width: 75px; height: 75px; padding: 4px; background: url(../images/thumbnails_bg.png) top left no-repeat;}
#banner.phoneDetails .images ul.thumbnails li a:hover {background-position: 0 -83px;}
#banner.phoneDetails .images ul.thumbnails li a:active {background-position: 0 -166px;}
#banner.phoneDetails .images ul.thumbnails li.last {margin: 0;}

#banner.phoneDetails.iphone .message h3 {width: 338px; height: 25px; background: url(../images/phoneDetails_iPhone_message_h3.gif) top left no-repeat; margin: 0 0 15px 0;}
#banner.phoneDetails.android .message h3 {width: 356px; height: 26px; background: url(../images/phoneDetails_android_message_h3.gif) top left no-repeat; margin: 0 0 14px 0;}
#banner.phoneDetails.blackberry .message h3 {width: 389px; height: 34px; background: url(../images/phoneDetails_blackberry_message_h3.gif) top left no-repeat; margin: 0 0 6px 0;}
#banner.phoneDetails.palm .message h3 {width: 307px; height: 26px; background: url(../images/phoneDetails_palm_message_h3.gif) top left no-repeat; margin: 0 0 14px 0;}

#banner.phoneDetails span.comingSoon {font-family: Helvetica, Verdana, Arial, sans-serif; display: block; font-size: 14px; margin: 0; color: #FF2929; display: none;}

#banner.phoneDetails.iphone span.comingSoon {margin: 0 0 0 300px;}


#content .greenbox.phoneDetails {float: left; width: 300px; position: relative;}
#content .greenbox.phoneDetails .middle {padding: 10px 20px 10px 20px;}
#content .greenbox.phoneDetails p.p1 {text-align: center; font-size: 12px; line-height: 16px; margin: 20px 0 10px 0; color: #5D6059;}
#content .greenbox.phoneDetails .divider {background: #D9E1CE; height: 1px; width: 100%; margin: 20px 0 20px 0;}
#content .greenbox.phoneDetails .requirements {background: #FFF; padding: 15px;}
#content .greenbox.phoneDetails .requirements h5 {color: #666; font-size: 13px; text-align: center; margin: 5px 0 15px 0;}
#content .greenbox.phoneDetails .requirements ul li {font-size: 11px; line-height: 14px; margin: 0 0 15px 0; color: #999; padding: 0 0 0 20px; background: url(../images/bullet_green_5.gif) 0px 5px no-repeat;}
#content .greenbox.phoneDetails .requirements ul li.last {margin: 0;}
#content .greenbox.phoneDetails .sneakPeek {display: block; background: url(../images/phoneDetails_sneakPeek.png) top right no-repeat; position: absolute; top: -3px; right: -3px; width: 103px; height: 103px;}
#content .greenbox.phoneDetails .sneakPeek span {display: none;}

#content .columns .features.phoneDetails {}
#content .columns .features.phoneDetails li {margin: 0 0 25px 0; position: relative;}
#content .columns .features.phoneDetails li.last {margin: 0px;}
#content .columns .features.phoneDetails li h4 {color: #444; font-size: 14px; font-weight: normal; margin: 0 0 10px 30px; padding: 1px 0 0 0;}
#content .columns .features.phoneDetails li p {color: #AAA; font-size: 11px; font-weight: normal; margin: 0; line-height: 16px;}

#content .columns .features.phoneDetails li .icon.small {float: left; position: absolute; top: 0px; left: 0px;}

#content .icon.small {display: block; width: 16px; height: 16px; background: url(../images/icons_16x16.png) top left no-repeat #CCC;}
#content .icon.small.help {background-position: 0 0;}
#content .icon.small.play {background-position: 0 -16px;}
#content .icon.small.playlist {background-position: 0 -32px;}
#content .icon.small.radio {background-position: 0 -48px;}
#content .icon.small.offline {background-position: 0 -64px;}
#content .icon.small.world {background-position: 0 -80px;}
#content .icon.small.phone {background-position: 0 -96px;}
#content .icon.small.note {background-position: 0 -112px;}


/* -------------------------------------------------- */
/* ------------------- LOGIN PAGE ------------------- */
/* -------------------------------------------------- */

#banner.login {height: 220px; position: relative; width: 1000px;}
#banner.login .graphic {width: 450px; height: 300px; position: absolute; display: none;}
#banner.login .graphic {background: red; width: 450px; height: 300px; position: absolute; top: 0px; right: -50px;}

#banner.login .message {width: 550px; position: absolute; bottom: 40px; left: 0px; float: left;}
#banner.login .message h3 {}
#banner.login .message h3 span {display: none;}
#banner.login .message p {color: #FFF; font-size: 12px; line-height: 20px; margin: 0;}
#banner.login .message h3 {width: 559px; height: 26px; background: url(../images/login_m1.gif) top left no-repeat; margin: 0 0 14px 0;}


/* -------------------------------------------------- */
/* ------------------ SIGNUP PAGE ------------------- */
/* -------------------------------------------------- */

#banner.signup {height: 220px; position: relative; width: 1000px;}
#banner.signup .graphic {width: 450px; height: 300px; position: absolute; display: none;}
#banner.signup .graphic {background: red; width: 450px; height: 300px; position: absolute; top: 0px; right: -50px;}

#banner.signup .message {width: 550px; position: absolute; bottom: 40px; left: 0px; float: left;}
#banner.signup .message h3 {}
#banner.signup .message h3 span {display: none;}
#banner.signup .message p {color: #FFF; font-size: 12px; line-height: 20px; margin: 0;}
#banner.signup .message h3 {width: 435px; height: 34px; background: url(../images/upgrade_m1.gif) top left no-repeat; margin: 0 0 6px 0;}


/* -------------------------------------------------- */
/* ----------------- UPGRADE PAGE ------------------- */
/* -------------------------------------------------- */

#banner.upgrade {height: 220px; position: relative; width: 1000px;}
#banner.upgrade .graphic {width: 450px; height: 300px; position: absolute; display: none;}
#banner.upgrade .graphic {background: red; width: 450px; height: 300px; position: absolute; top: 0px; right: -50px;}

#banner.upgrade .message {width: 550px; position: absolute; bottom: 40px; left: 0px; float: left;}
#banner.upgrade .message h3 {}
#banner.upgrade .message h3 span {display: none;}
#banner.upgrade .message p {color: #FFF; font-size: 12px; line-height: 20px; margin: 0;}
#banner.upgrade.step1 .message h3 {width: 435px; height: 34px; background: url(../images/upgrade_vip_m1.gif) top left no-repeat; margin: 0 0 6px 0;}
#banner.upgrade.step2 .message h3 {width: 435px; height: 34px; background: url(../images/upgrade_vip_m2.gif) top left no-repeat; margin: 0 0 6px 0;}

.greenbox.ordersummary {float: left; width: 300px; position: relative;}
.greenbox.ordersummary .middle {padding: 10px 20px 10px 20px;}
.greenbox.ordersummary .summary {background: #FFF; padding: 15px;}
.greenbox.ordersummary .summary h5 {color: #333; font-size: 15px; text-align: right; margin: 5px 0 30px 0;}
.greenbox.ordersummary .summary ul li {font-size: 11px; line-height: 14px; margin: 0 0 15px 0; color: #999; padding: 0 0 0 20px; background: url(../images/bullet_green_5.gif) 0px 5px no-repeat;}
.greenbox.ordersummary .summary ul li.last {margin: 0;}

.greenbox.ordersummary .summary  table {width: 100%; margin: 0 0 30px 0;}
.greenbox.ordersummary .summary  table td {border-top: 1px solid #D9E1CE; padding: 10px 0 10px 0; text-align: right; font-size: 13px;}
.greenbox.ordersummary .summary  table td.description {color: #9fb286;}
.greenbox.ordersummary .summary  table td.amount {width: 65px;}
.greenbox.ordersummary .summary  table td.negative {color: #b85353;}
.greenbox.ordersummary .summary  table tr.last td {border-top: 3px solid #D9E1CE; padding-top: 20px;}
.greenbox.ordersummary .summary  table tr.last td.description {color: #333;}

.radio_wrapper.paymentOptions li {width: 300px; margin: 0 50px 0 0;}
.radio_wrapper.paymentOptions li.paypal {background: url(../images/paymentOptions_paypal.png) right -1px no-repeat;}
.radio_wrapper.paymentOptions li.creditcard {background: url(../images/paymentOptions_creditcards.png) right -1px no-repeat;}


/* -------------------------------------------------- */
/* ----------------- COMPLETE PAGE ------------------ */
/* -------------------------------------------------- */

#banner.complete {height: 400px; position: relative; width: 1000px; margin: 0 0 40px 0;}

#banner.complete .message {width: 800px; position: absolute; bottom: 110px; left: 100px; float: left;}
#banner.complete .message h3 {width: 436px; height: 26px; background: url(../images/complete_m2.gif) top left no-repeat; margin: 0 auto; margin-bottom: 14px;}
#banner.complete .message h3 span {display: none;}
#banner.complete .message p {color: #FFF; font-size: 12px; line-height: 20px; margin: 0 0 50px 0; text-align: center;}
#banner.complete .message .borderedButton {margin: 0 5px 0 5px; display: inline-block;}


/* -------------------------------------------------- */
/* ------------------ ACCOUNT PAGE ------------------ */
/* -------------------------------------------------- */

#banner.account {height: 220px; position: relative; width: 1000px;}

#banner.account .message {width: 550px; position: absolute; bottom: 70px; left: 0px; float: left;}
#banner.account .message h3 {}
#banner.account .message h3 span {display: none;}
#banner.account .message p {color: #FFF; font-size: 12px; line-height: 20px; margin: 0;}
#banner.account .message h3 {width: 435px; height: 34px; background: url(../images/account_m1.gif) top left no-repeat; margin: 0 0 6px 0;}

#banner.account .subnav {position: absolute; bottom: 0px; left: 0px; float: left;}

table.transactions {width: 100%;}
table.transactions tr {}
table.transactions tr td {height: 30px; line-height: 30px; border-top: 1px solid #D9E1CE; color: #666;}
table.transactions tr td.date {width: 130px;}
table.transactions tr td.description {color: #87CC2E;}
table.transactions tr td.sign {text-align: right;}
table.transactions tr td.amount {width: 50px; text-align: right;}
table.transactions tr td.negative {color: #b85353;}

/* -------------------------------------------------- */
/* ------------------ SUPPORT PAGE ------------------ */
/* -------------------------------------------------- */

#banner.support {height: 220px; position: relative; width: 1000px;}

#banner.support .message {width: 550px; position: absolute; bottom: 40px; left: 0px; float: left;}
#banner.support .message h3 {}
#banner.support .message h3 span {display: none;}
#banner.support .message p {color: #FFF; font-size: 12px; line-height: 20px; margin: 0;}
#banner.support .message h3 {width: 435px; height: 34px; background: url(../images/support_m1.gif) top left no-repeat; margin: 0 0 6px 0;}

ul.faq {}
ul.faq li {font-size: 13px; margin: 0 0 20px 0; line-height: 22px; padding: 0 0 0 30px; position: relative;}
ul.faq li.last {margin: 0;}
ul.faq li .icon.small {float: left; position: absolute; top: 3px; left: 0px;}
ul.faq li .topic {color: #222; font-size: 14px; line-height: 20px; margin: 0 0 15px 0;}
ul.faq li .answer {font-size: 12px; margin: 0 0 45px 0;}
ul.faq li .answer p {line-height: 18px; margin: 0 0 15px 0; color: #999;}
ul.faq li .answer p.last {margin: 0;}

a.helpforum {display: block; width: 100%; height: 150px; background: url(../images/helpforum.png) top left no-repeat #FFF;}
a.helpforum span {display: none;}

.textarea_wrapper.support .inner .cap {height: 150px !important;}


/* -------------------------------------------------- */
/* --------------------- LIGHTBOX ------------------- */
/* -------------------------------------------------- */

.lbContainer {display: none;}

.lbOverlay {position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #000; z-index:1001; -moz-opacity: 0.3; opacity:.30; filter: alpha(opacity=30);}

.lbWrapper {position: absolute; top: 300px; z-index: 1002; margin: 0 auto; text-align: center; width: 100%;}

.lbClose {position: absolute; top: -14px; left: -15px; display: block; width: 30px; height: 30px; background: url(../images/lb/close.png) top left no-repeat;}
.lbClose span {display: none;}

.lb {width: 620px; font-family: "Lucida Grande", Verdana, Arial, sans-serif; margin: 0 auto; position: relative;}
.lb table {border:none; width: 100%; height: 100%;}
.lb table td {padding: 0; margin: 0; border: 0; float: none !important;}
.lb table td.left, td.right {display: table-cell;}
.lb table thead, .lb table tbody, .lb table tfoot {background: transparent;}
.lb table tr {background: transparent;}

.lb table thead tr.header td.left {width: 10px; height: 10px; background: url(../images/lb/corners_black.png) top left no-repeat transparent;}
.lb table thead tr.header td.right {width: 10px; height: 10px; background: url(../images/lb/corners_black.png) top right no-repeat transparent;}
.lb table thead tr.header td.middle {background: url(../images/lb/edge_hor_black.png) top left repeat-x transparent;}
.lb table tbody tr.content td.left {background: url(../images/lb/edge_ver_black.png) top left repeat-y transparent; width: 10px;}
.lb table tbody tr.content td.right {background: url(../images/lb/edge_ver_black.png) top right repeat-y transparent; width: 10px;}
.lb table tbody tr.content td.middle {background: url(../images/lb/bg.png);}
.lb table tfoot tr.footer td.left {width: 10px; height: 10px; background: url(../images/lb/corners_black.png) bottom left no-repeat transparent;}
.lb table tfoot tr.footer td.right {width: 10px; height: 10px; background: url(../images/lb/corners_black.png) bottom right no-repeat transparent;}
.lb table tfoot tr.footer td.middle {background: url(../images/lb/edge_hor_black.png) bottom left repeat-x transparent;}

.lb table td.middle .content {padding: 25px; background: #FFF;}
.lb table td.middle .content .header {margin: 0 0 30px 0;}
.lb table td.middle .content .header.noMargin {margin: 0;}
.lb table td.middle .content .header h3 {font-size: 22px; margin: 0 0 15px 0; color: #87CC2E;}
.lb table td.middle .content p {font-size: 13px; line-height: 18px; margin: 0 0 15px 0; color: #666;}
.lb table td.middle .content p.last {margin-bottom: 0px;}

.lb table td.middle .content .columns.one .column {width: 550px;}
.lb table td.middle .content .columns.two .column {width: 250px;}

.lb table td.middle .footer {padding: 15px 25px 13px 25px; background-color: #F7F9F4; border-top: 1px solid #D9E1CE;}
.lb table td.middle .footer.buttons button span {background-color: #F7F9F4;}


/* -------------------------------------------------- */
/* --------------------- FOOTER --------------------- */
/* -------------------------------------------------- */

#footer {border-top: 1px solid #D9E1CE; padding: 20px 0 0 0; width: 980px; margin: 0 auto; margin-bottom: 20px;}
#footer p {color: #CCC; margin: 0;}

#footer .logo {float: right; display: block; width: 148px; height: 22px; position: relative; top: -3px; right: -10px;}
#footer .logo span {display: none;}
#footer .logo:hover {background-position: 0 -22px;}
#footer .logo:active {background-position: 0 -44px;}

#footer .links {margin: 0 0 80px 0;}
#footer .links .group {float: left; width: 200px;}
#footer .links .group h5 {font-size: 13px; color: #eee; margin: 0 0 15px 0;}
#footer .links .group ul li {margin: 0 0 6px 0;}


/* -------------------------------------------------- */
/* --------------------- EXTRAS --------------------- */
/* -------------------------------------------------- */

.clear {clear:both;}
.hide {display:none;}
.show {display:block;}
.showInline {display:inline;}
.strong {font-weight: bold;}