@charset "UTF-8";
/* settings */

/* Profile Navigation */

.settings #leftColumn {
   width: 200px;
   margin-right: 30px;
}

.settings #mainColumn {
   width: 740px;
}

#subNav h3.pageHeader {
	font-size: 28px;
	color: #444;
	font-weight: bold;
	position: relative;
	top: -9px;
	z-index: 10;
	padding-bottom: 12px;
	margin-left: 4px;
	border-bottom: none;
	float: left;
}

#subNav .pageIcon {
	float: left;
	width: 25px;
	height: 25px;
	position: relative;
	margin: 0 3px 0 3px;
	top: -7px;
}

#subNav .breadcrumb {
	font-size: 16px;
	font-weight: bold;
	color: #999;
	position: relative;
	top: 2px;
	margin: 0 6px;
	float: left;
}

#subNav .breadcrumb.right {
	float: right;
}

#settingsNav .divider {
	width: 198px;
	border-bottom: 1px solid #EEE;
	font-size: 0.1em;
	height: 1px;
}

#settingsNav .mainText {
	color: #333;
	top: 7px;
}

#settingsNav .menuItem.selected .mainText {
	color: #FFF;
}

.settings input[type="text"],
.settings input[type="password"] {
   font-size: 18px;
   font-weight: normal;
   color: #000;
   float: left;
   text-align: left;
   width: 220px;
}

.settings .settingsRow .settingsRight {
   float: left;
   text-align: left;
   width: 420px;
}

.settings label {
   font-size: 18px;
   font-weight: bold;
   color: #333;
   float: left;
   text-align: right;
   margin-right: 20px;
   width: 300px;
   position: relative;
   top: 5px;
}

.settings .settingsRow {
   margin: 24px auto;
}

.settings h3 {
   font-size: 13px;
   color: #333;
   width: 714px;
   padding: 0 3px 6px 3px;
   margin: 30px auto 20px auto;
}

.settings #settingsPicture {
   margin: 0 auto 20px auto;
}

.settings .label {
   font-size: 18px;
   font-weight: bold;
   color: #333;
   float: left;
   text-align: right;
   margin-right: 20px;
   width: 300px;
   position: relative;
   top: 5px;
}

.settings .info {
   width: 420px;
   margin: 10px 0 4px 320px;
   font-size: 12px;
   color: #666;
   float: left;
   clear: both;
   line-height: 130%;
}

.settings #settingsBirthday .dropdownLarge {
   display: block;
   float: left;
   margin-right: 8px;
}

.settings .saveSettingsButtonPanel{
   margin: 40px 0 0 0;
   padding-top: 20px;
   border-top: 1px solid #CCC;
}

.settings .menuItem,
.settings .menuItem.selected:hover,
.settings .menuItem.selected:active {
	width: 198px;
}

.settings .menuItem .highlight {
	background: url(../images/menuHighlight.png) no-repeat -30px 0;
	width: 210px;
}

#picturePreviewBox {
   float: left;
   width: 239px;
   margin-right: 20px;
   border-right: 1px dotted #CCC;
}

#picturePreviewBox .currentPhotoHeadline {
   text-align: center;
   font-size: 14px;
   color: #666;
   font-weight: bold;
   margin-top: 6px;
}

#picturePreviewBox .currentPhoto {
   width: 202px;
   margin: 10px auto;
   position: relative;
}

#picturePreviewBox .currentPhoto img {
   border: 1px solid #CCC;
}

#picturePreviewBox .currentPhoto .icon-elite img {
   border: none;
}

#pictureSelectionBox {
   float: left;
   width: 480px;
}

input[type="file"] {
   cursor: pointer;
}

#userPictureBox {
   margin-bottom: 20px;
}

#settingsComments span {
   font-size: 13px;
   color: #333;
   position: relative;
   top: 3px;
}

#settingsComments span.uploadText {
   top: 6px;
}

#currentEmail {
   font-size: 18px;
   color: #666;
   position: relative;
   top: 5px;
}

.photoSelection span.uploadText {
   font-size: 18px;
   font-weight: bold;
   color: #333;
   position: relative;
   top: 2px;
}

.settings .photoBox {
   display: block;
   float: left;
   width: 50px;
   height: 50px;
   margin: 20px 20px 20px 0;
}

.settings .photoBox img {
   border: 1px solid #CCC;
}

.settings .photoInfoBox {
   display: block;
   float: left;
   margin: 20px 0;
}

.settings .photoInfoBox .statusText {
   position: relative; 
   top: 26px;
   width: 364px;
}

.photoInfoBox .statusText span {
   color: red;
}

.photoInfoBox .footnote {
   margin-bottom: 10px;
}

.settings #fileToUpload {
   display: block;
}

.settings #buttonUpload {
   position: relative;
   top: 8px;
}

.settingsTableContainer {
   border-width: 0 1px 1px 0;
   border-style: solid;
   border-color: #CCC;
   width: 739px;
   margin-bottom: 40px;
}

.settingsTableContainer .settingsTableRow {
   background: #FFF;
   width: 739px;
}

.settingsTableContainer .settingsTableRow.facebook.success .linkedSite,
.settingsTableContainer .settingsTableRow.facebook.success .linkedStatus {
   height: 70px;
}

.settingsTableContainer .settingsTableRow.header {
   background: url(../images/tableHeader.png) repeat-x 0 0;
   height: 29px;
   width: 739px;
}

.settingsTableContainer .settingsTableRow > div {
   background: #FFF;
   border-width: 1px 0 0 1px;
   border-style: solid;
   border-color: #CCC;
   margin: 0;
   padding: 5px;
   text-align: center;
   position: relative;
   display: block;
   float: left;
   height: 50px;
}

.settingsTableContainer .settingsTableRow.rklive > div {
   height: 80px;
}

.settingsTableContainer .settingsTableRow.header div {
   background: transparent;
   height: 18px;
   color: #FFF;
   text-shadow: #000 1px 1px 1px;
   font-weight: bold;
   font-size: 13px;
   border-left: 1px solid #888;
}

.settingsTableContainer .settingsTableRow.subHeader div {
   height: 19px;
   color: #FFF;
   text-shadow: #000 1px 1px 1px;
   font-weight: bold;
   font-size: 13px;
}

.settingsTableRow div:first-child {
   text-align: left;
}

.settingsTableRow div.disabled {
   background-color: #EEE;
}

.settingsTableRow div.postType {
   width: 385px;
   padding-left: 10px;
}

.settingsTableRow div.shareWith {
   width: 125px;
}

.settingsTableRow div.shareWith .selectBoxContainer {
   position: absolute;
   top: 50%;
   margin: -16px 0 0 4px;
   width: 130px;
}

.settingsTableRow div.shareWith .selectBoxContainer .toggleItem.left {
   width: 72px;
   text-align: left;
}

.settingsTableRow div.autoPost {
   width: 190px;
}

.settingsTableRow.subHeader div.autoPostTwitter {
   width: 90px;
   background: url(../images/twitter-bg.png) repeat-x 0 0;
}

.settingsTableRow.subHeader div.autoPostFacebook {
   width: 90px;
   background: url(../images/facebook-bg.png) repeat-x 0 0;
}

.settingsTableRow div.autoPostTwitter,
.settingsTableRow div.autoPostFacebook {
   width: 90px;
   background: #FFF;
}

.settingsTableRow div.autoPostTwitter.disabled,
.settingsTableRow div.autoPostFacebook.disabled {
   background: #EEE;
}

.settingsTableRow .postType .icon {
   width: 27px;
   height: 24px;
   float: left;
   margin: 0 10px 24px 0;
}

.settingsTableRow .cellHeader {
   font-size: 18px;
   color: #000;
   margin-bottom: 3px;
   font-weight: bold;
}

.settingsTableRow .cellText {
   font-size: 11px;
   color: #666;
   margin-bottom: 5px;
   font-weight: normal;
   line-height: 120%;
}

.settingsTableRow .cellHeader.sub {
   font-size: 16px;
   color: #333;
}

.settingsTableRow .cellText.sub {
   color: #666;
}

.settingsTableRow .settingsToggle {
   width: 90px;
   height: 49px;
   position: absolute;
}

.settingsTableContainer .settingsTableRow.rklive > div .settingsToggle {
   height: 79px;
}

.settingsTableRow .settingsToggle:hover {
   cursor: pointer;
}

.settingsTableRow .settingsToggle:active {
   cursor: pointer;
}

.settingsTableRow .settingsToggleCheckbox {
   width: 29px;
   height: 29px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -14.5px 0 0 -14.5px;
   background: url(../images/settingsToggle.png) no-repeat 0 -87px;
}

.settingsTableRow .settingsToggle:hover .settingsToggleCheckbox {
   background: url(../images/settingsToggle.png) no-repeat 0 -116px;
}

.settingsTableRow .settingsToggle:active .settingsToggleCheckbox {
   background: url(../images/settingsToggle.png) no-repeat 0 -145px;
}

.settingsTableRow .settingsToggle.selected .settingsToggleCheckbox {
   background: url(../images/settingsToggle.png) no-repeat 0 0;
}

.settingsTableRow .settingsToggle.selected:hover .settingsToggleCheckbox {
   background: url(../images/settingsToggle.png) no-repeat 0 -29px;
}

.settingsTableRow .settingsToggle.selected:active .settingsToggleCheckbox {
   background: url(../images/settingsToggle.png) no-repeat 0 -58px;
}

.settingsTableContainer.linkedAccounts .settingsTableRow.header > div {
   height: 18px;
}

.linkedAccounts .settingsTableRow div.linkedActive {
   width: 60px;
}

.linkedAccounts .settingsTableRow div.linkedSite {
   width: 110px;
}

.linkedAccounts .settingsTableRow div.linkedStatus {
   width: 607px;
   position: relative;
}

.linkedAccounts .settingsTableRow div.linkedActions {
   width: 80px;
}

.linkedAccounts .settingsTableRow div.linkedActions a {
   display: block;
   position: absolute;
   top: 50%;
   margin-top: -8px;
   text-align: center;
   width: 80px;
}

.linkedAccounts .settingsTableRow div:first-child {
   text-align: center;
}

.linkedAccounts .settingsTableRow .settingsToggle {
   width: 60px;
   height: 50px;
}

.linkedAccounts .settingsTableRow div.linkedSite .logo {
   position: absolute;
   top: 50%;
   margin-top: -20px;
   left: 10px;
}

.linkedAccounts .settingsTableRow div.linkedStatus .icon {
   width: 200px;
   height: 31px;
   float: right;
   margin: 5px 5px 0 15px;
   position: relative;
   top: 0;
}

.linkedAccounts .settingsTableRow div.linkedStatus .icon a {
   position: relative;
   top: 4px;
}

.linkedAccounts .settingsTableRow div.linkedStatus.success {
   background: #E0F1E5;
}

.linkedAccounts .settingsTableRow div.linkedStatus.success .icon {
   background: url(../images/icon-linkedSuccess.png) no-repeat 0 0;
   width: 40px;
   height: 40px;
}

.linkedAccounts .settingsTableRow div.linkedStatus.error {
   background: #FBE7E5;
}

.linkedAccounts .settingsTableRow div.linkedStatus.error .icon {
   background: url(../images/icon-linkedError.png) no-repeat 0 0;
   width: 40px;
   height: 40px;
}

#twitterUrl,
#facebookUrl,
#unameUrl {
   color: #2A5DB0;
   font-weight: bold;
}

.settings .menuItem .mainText {
	width: 180px;
	padding-left: 2px;
}

.settings .statusText {
   font-size: 12px;
   color: #666;
   position: absolute;
   top: 50%;
   margin: -16px 0 0 6px;
   text-align: left;
   width: 374px;
   line-height: 124%;
}

.settings .success .statusText {
   margin-top: -6px;
   width: 540px;
}

.settings #twitterStatus.success .statusText,
.settings #facebookStatus.success .statusText,
.settings #foursquareStatus.success .statusText {
   margin-top: -18px;
   width: 540px;
   line-height: 150%;
   text-align: left;
}

.settings #facebookStatus.success .statusText {
   margin-top: -33px;
}

.settings #facebookStatus.success .statusText .autoFBFriendContainer {
   margin-top: 4px;
}

.settings #facebookStatus.success .statusText .autoFBFriendContainer label {
   font-size: 12px;
   font-weight: bold;
   color: #555;
   float: left;
   text-align: left;
   margin-left: 3px;
   width: inherit;
   position: relative;
   top: 1px;
}

.settings .error .statusText {
   margin-top: -22px;
   width: 540px;
}

.settings .error .statusText span {
   font-size: 13px;
   color: red;
   font-weight: bold;
   text-align: left;
   display: block;
   margin-bottom: 3px;
}

.settings .statusText span {
   font-size: 15px;
   color: #666;
   font-weight: bold;
   text-align: left;
   display: block;
   margin-bottom: 5px;
}

#twitterStatus,
#foursquareStatus {
   height: 50px;
   padding: 5px;
}

#twitterStatus .icon a {
   display: block;
   width: 200px;
   height: 31px;
   background: url(../images/connect-twitter.png) no-repeat 0 0;
}

#twitterStatus .icon a:hover {
   background: url(../images/connect-twitter.png) no-repeat 0 -31px;
}

#twitterStatus .icon a:active {
   background: url(../images/connect-twitter.png) no-repeat 0 -62px;
}

.settings .success#twitterStatus .icon a {
   display: none;
}

.settings .error#twitterStatus .icon a {
   display: none;
}

#facebookStatus .icon a {
   display: block;
   width: 200px;
   height: 31px;
   background: url(../images/connect-facebook.png) no-repeat 0 0;
}

#facebookStatus .icon a:hover {
   background: url(../images/connect-facebook.png) no-repeat 0 -31px;
}

#facebookStatus .icon a:active {
   background: url(../images/connect-facebook.png) no-repeat 0 -62px;
}

.settings .success#facebookStatus .icon a {
   display: none;
}

.settings .error#facebookStatus .icon a {
   display: none;
}

#withingsStatus .icon a {
   display: block;
   width: 200px;
   height: 31px;
   background: url(../images/connect-withings.png) no-repeat 0 0;
}

#withingsStatus .icon a:hover {
   background: url(../images/connect-withings.png) no-repeat 0 -31px;
}

#withingsStatus .icon a:active {
   background: url(../images/connect-withings.png) no-repeat 0 -62px;
}

.settings .success#withingsStatus .icon a {
   display: none;
}

.settings .error#withingsStatus .icon a {
   display: none;
}

#foursquareStatus .icon a {
   display: block;
   width: 200px;
   height: 31px;
   background: url(../images/connect-foursquare.png) no-repeat 0 0;
}

#foursquareStatus .icon a:hover {
   background: url(../images/connect-foursquare.png) no-repeat 0 -31px;
}

#foursquareStatus .icon a:active {
   background: url(../images/connect-foursquare.png) no-repeat 0 -62px;
}

.settings .success#foursquareStatus .icon a {
   display: none;
}

.settings .error#foursquareStatus .icon a {
   display: none;
}

#zeoStatus .icon a {
   display: block;
   width: 200px;
   height: 31px;
   background: url(../images/connect-zeo.png) no-repeat 0 0;
}

#zeoStatus .icon a:hover {
   background: url(../images/connect-zeo.png) no-repeat 0 -31px;
}

#zeoStatus .icon a:active {
   background: url(../images/connect-zeo.png) no-repeat 0 -62px;
}

.settings .success#zeoStatus .icon a {
   display: none;
}

.settings .error#zeoStatus .icon a {
   display: none;
}

#facebookLightbox {
   width: 470px;
   height: 207px;
   padding: 100px 15px 15px 15px;
   background: url(../images/lightbox-facebook-bg.png) no-repeat 0 -15px;
}

#twitterLightbox {
   width: 470px;
   height: 187px;
   padding: 120px 15px 15px 15px;
   background: url(../images/lightbox-twitter-bg.png) no-repeat 0 -15px;
}

.withingsLightboxContainer {
   width: 470px;
   height: 267px;
   padding: 100px 15px 15px 15px;
   background: url(../images/lightbox-withings-bg.png) no-repeat 0 -15px;
}

.withingsLightboxContainer h3 {
   border-bottom: none;
   color: #333;
   text-align: center;
   width: 470px;
   font-size: 17px;
   margin-bottom: 15px;
}

.withingsLightboxContainer .icon {
   float: right;
   margin-left: 15px;
}

.withingsLightboxContainer p {
   color: #666;
   line-height: 130%;
}

#withingsUserPickerTable {
   width: 450px;
   margin: 20px auto;
   border-top: 1px solid #EEE;
}

.withingsTableRow {
   width: 450px;
   padding: 8px 0;
   border-bottom: 1px solid #EEE;
}

.withingsTableRow .blueButton-small .m .mainText {
   top: 4px;
}

.withingsTableRow .userName {
   float: left;
   position: relative;
   top: 3px;
   font-size: 15px;
   font-weight: bold;
   color: #333;
}

#foursquareLightbox {
   width: 470px;
   height: 207px;
   padding: 100px 15px 15px 15px;
   background: url(../images/lightbox-foursquare-bg.png) no-repeat 0 -15px;
}

#zeoLightbox {
   width: 470px;
   height: 207px;
   padding: 100px 15px 15px 15px;
   background: url(../images/lightbox-zeo-bg.png) no-repeat 0 -15px;
}

#twitterStatusView,
#foursquareStatusView {
   padding: 0;
   height: 60px;
}

.photoInfoBox .statusText {
   width: 364px;
   margin: 0;
}

.settingsTableRow #facebookStatus .fb_button {
   float:right;
   margin-right:12px;
   position:relative;
   top:13px;
   display: block;
}

.settingsTableRow #facebookStatus .footnote {
   display: none;
}

.withingsFormContainer {
	margin: 30px auto 0 auto;
	border-top: 1px solid #CCC;
	padding-top: 10px;
	width: 470px;
	position: relative;
}

.withingsFormRow {
	margin: 14px auto;
	width: 274px;
	position: relative;
}

.withingsFormContainer label {
	font-size: 18px;
	font-weight: bold;
	color: #333;
	position: relative;
	top: 7px;
	width: 100px;
	float: left;
	margin-right: 8px;
	text-align: right;
}

.withingsFormContainer input[type="text"],
.withingsFormContainer input[type="password"] {
	font-size: 14px;
	font-weight: normal;
	position: relative;
	top: 4px;
	width: 160px;
	float: left;
}

.settings .settingsTableRow div.checker {
   margin: -12px 0 0 -13px;
   position: absolute;
   top: 50%;
   left: 50%;
   width: 23px;
   float: none;
}

.settings .settingsTableRow.facebook.success div.checker {
   margin: 0;
   position: relative;
   top: 0;
   left: 0;
   width: 23px;
   float: left;
}

#subscriptionsPanel .settingsTableContainer .headerStatus {
   width: 40px;
}

#subscriptionsPanel .settingsTableContainer .headerProductName {
   width: 200px;
}

#subscriptionsPanel .settingsTableContainer .headerBillingDates {
   width: 224px;
}

#subscriptionsPanel .settingsTableContainer .headerPaymentMethod {
   width: 160px;
}

#subscriptionsPanel .settingsTableContainer .headerActions {
   width: 60px;
}

#subscriptionsPanel .settingsTableContainer .productStatus {
   width: 41px;
}

#subscriptionsPanel .settingsTableContainer .productStatus img {
   position: relative;
   top: 6px;
}

#subscriptionsPanel .settingsTableContainer .productName {
   width: 201px;
}

#subscriptionsPanel .settingsTableContainer .productBillingDates {
   width: 225px;
}

#subscriptionsPanel .settingsTableContainer .productPaymentMethod {
   width: 161px;
}

#subscriptionsPanel .settingsTableContainer .productActions {
   width: 61px;
}

#subscriptionsPanel .settingsTableContainer .productActions .actionsContainer {
   width: 25px;
   height: 25px;
   margin: 0 auto;
   float: left;
}

#subscriptionsPanel .settingsTableContainer .productActions .actionsContainer.cc {
   width: 35px;
   height: 25px;
   margin: 0 auto;
}

#subscriptionsPanel .settingsTableContainer .productActions .actionsContainer div {
   width: 25px;
   height: 25px;
   float: left;
}

#subscriptionsPanel .settingsTableContainer .productActions .actionsContainer.cc div {
   margin-left: 4px;
}

#subscriptionsPanel .settingsTableContainer .productActions .actionsContainer.cc div:first-child {
   margin-left: 0;
}

#subscriptionsPanel .settingsTableContainer {
   border-width: 0;
   border-style: none;
   border-color: transparent;
}

#subscriptionsPanel .settingsTableContainer .settingsTableRow.content > div {
   background: none;
   border-width: 0;
   border-style: none;
   border-color: transparent;
   margin: 0;
   padding: 10px 5px;
   text-align: center;
   position: relative;
   display: block;
   float: left;
}

#subscriptionsPanel .settingsTableContainer .settingsTableRow div:first-child {
   text-align: center;
}

.settings .productNameTitle {
   font-weight: bold;
   font-size: 16px;
   color: #000;
}

.settings .productNameTitle span {
   font-weight: normal;
   color: #666;
}

.settings .productPurchaseDate {
   font-weight: normal;
   font-size: 12px;
   font-style: italic;
   color: #666;
   margin-top: 6px;
}

.settings .productBillingLabel {
   font-weight: normal;
   color: #666;
}

.settings .productBillingNext {
   font-weight: bold;
   font-size: 16px;
   color: #000;
}

.settings .productBillingPrevious {
   font-weight: normal;
   font-size: 12px;
   color: #111;
   margin-top: 6px;
}

.settings .productPaymentMethod {
   font-weight: bold;
   font-size: 16px;
   color: #000;
}

.settings .ccDetails {
   font-weight: normal;
   font-size: 12px;
   color: #333;
   margin-top: 6px;
}

#content.subscriptionChange {
   margin-top: 40px;
}

#content.subscriptionChange h3 {
   text-align: center;
   border-bottom: none;
   margin-bottom: 30px;
}

#content.subscriptionChange p {
   text-align: center;
}

#content.subscriptionChange #creditCardFormContainer {
   width: 300px;
   margin: 0 auto;
}

#content.subscriptionChange #creditCardFormContainer h3 {
   text-align: left;
   margin-bottom: 0;
}

#content.subscriptionCancel {
   width: 600px;
   margin-top: 40px;
}

#content.subscriptionCancel h3 {
   font-size: 32px;
   border-bottom: none;
}

#content.subscriptionCancel p {
   font-size: 14px;
   color: #333;
   line-height: 130%;
   margin-bottom: 40px;
}

.subscriptionCancelRow input[type="submit"] {
   position: absolute;
   top: -5000px;
}

.subscriptionCancelRow {
	position: relative;
	margin: 8px 0;
}

.subscriptionCancelRow textarea {
	font-size: 13px;
	width: 488px;
	height: 80px;
	float: left;
}

.subscriptionCancelRow select {
   float: left;
}

.subscriptionCancelRow label {
   float: left;
   font-size: 18px;
   font-weight: bold;
   text-align: right;
   width: 100px;
   margin-right: 10px;
   color: #333;
   position: relative;
   top: 4px;
}

.subscriptionCancelRow a {
   display: block; 
   float: left;
   position: relative;
   left: 110px;
   width: 300px;
   line-height: 130%;
}

.settingsTableRow div.linkedStatus#emailStatus > span {
   float: left;
   position: relative;
   top: 17px;
   left: 6px;
   font-size: 14px;
   color: #666;
   font-weight: normal;
}

.settingsTableRow div.linkedStatus#emailStatus > span span {
   color: #111;
   font-weight: bold;
}

.settings .fitnessAlerts .settingsTableRow div.checker {
   margin: 0 0 0 -12px;
   position: absolute;
   top: 30px;
   left: 50%;
   width: 23px;
   float: none;
}

.settings .fitnessAlerts .settingsTableRow .linkedSite.email {
   background: url(../images/notification-bg-email.png) no-repeat 0 0;
}

.settings .fitnessAlerts .settingsTableRow .linkedSite.facebook {
   background: url(../images/notification-bg-facebook.png) no-repeat 0 0;
}

.settings .fitnessAlerts .settingsTableRow .linkedSite.twitter {
   background: url(../images/notification-bg-twitter.png) no-repeat 0 0;
}

#notificationSettingsPanel .sectionTitle {
   font-size: 16px;
   color: #000;
   font-weight: bold;
   margin: 5px auto 10px;
   width: 736px;
   padding-bottom: 5px;
   border-bottom: 1px solid #EEE;
}

#notificationSettingsPanel .sectionDesc {
   font-size: 12px;
   color: #666;
   font-weight: normal;
   margin: 5px auto 15px;
   width: 736px;
   line-height: 130%;
}