/* ************************************************************************** *
File        : tipSpot.account.css
Copyright   : TipSpot, 2008
* ************************************************************************** */

/* friends/subscription streams */

.streams-container .column-wrapper {margin: 20px 0 0 0;width: 100%;min-width: 500px;}
ul.streams {margin: 0 0 10px 0;width:100%;overflow:hidden;}
ul.streams li {float:left;width:32%;margin-right:1%;overflow:hidden;height:60px;}
ul.streams li .truncate-container{width:200%;}
ul.streams li img {display:inline;float:left;margin: 1px 10px 0 0;}
ul.streams li h3 {margin: 0 0 6px 0;color:#4e7000;font-size:13px;}
ul.streams li h3 a {color:#4e7000;}

.no-streams,
.empty ul.streams{display:none;}
.empty .no-streams{display:block;}
.streams-container .empty {margin-top:0;}

.streams a.remove {padding: 0 0 0 13px;background:transparent url(../img/icon/add.gif) no-repeat 0 -32px;color: #777;outline:none;}
.streams a.remove:hover {background-position:0 -92px;}
.streams li a.wait{background-position:0 -63px !important;}

.no-friends,
.no-streams,
.no-subscriptions,
.no-tags {padding: 20px 0 20px 0;color:#000;font-size:14px;line-height:17px;font-weight:bold;}

/* subscription categories */
#category-list {width:100%;overflow:hidden;}
#category-list .col {float: left;margin: 8px 5px 10px 0;width: 185px;}
#category-list .col h3{padding:0 0 15px 0;font-size:11px;}
#category-list li{padding:0 0 5px 0;}
#category-list a{display:block;padding-left:20px;background:transparent url(../img/icon/checkbox.gif) no-repeat 0 0;text-decoration:none;outline:none;}
#category-list a.checked{background-position:0 -32px;}
#category-list a.changed{color:#000;font-weight:bold;}

#category-list  a.wait{background-position:0 -64px;}

/* subscription tags */
.tag-listing {margin: 20px 0 10px 0;width: 100%;overflow:hidden;}
#tag-list {float:left;min-width: 140px;width:66%;}
#tag-list ul {width:100%;}
#tag-list li {float:left;padding: 0 0 11px 0;width:48%;margin-right:1%;font-weight:bold;overflow:hidden;}
#tag-list li .truncate-container{width:200%;}
#tag-list li a {display:inline;float:left;width:12px;height:12px;margin-right:4px;background:transparent url(../img/icon/remove.gif) 0 2px no-repeat;font-weight:normal;text-indent:-9999px;outline:none;}
#tag-list li a:hover {background-position:0 -14px;}
#tag-list li strong {display:block;float:left;white-space:nowrap;}
#tag-list li a.wait{background:transparent url(../img/icon/wait_small.gif) no-repeat 0 0;}

.add-tag{float:left;width:33%;} 
.add-tag .field,
.add-tag input.text{width:92%;}
.add-tag input.inner-label{color:#999;}
.add-tag .field label.error{display:block;padding:6px 0 0 2px;color:#8f0100;}
.add-tag .footer{text-align:left;}

.tag-listing .no-tags{display:none;}
.empty .no-tags{display:block;}

.no-tags {padding:0 50px 0 0;}

/* streams page */
.tag-count {padding-left: 3px;color: #666;font-size: 10px;}
a:hover .tag-count {color: #fff;}
.all-tags-link {display: block;margin: 9px 0 0 15px;color: #40413b;}

/* privacy & permissions */
#privacy-permissions-form .col-left{float:left;padding-bottom:20px;margin-right:20px;width:200px;}
#privacy-permissions-form .col-right{float:left;padding-top:30px;width:200px;}
#privacy-permissions-form h3{font-size:14px;color:#000;padding:10px 0;}
#privacy-permissions-form h4{padding: 0 0 7px 0;font-weight:bold;}
#privacy-permissions-form em,
#privacy-permissions-form em a{color: #777;}

/* email notifications */
.input-set{padding:10px 0;}
#email-notifications-form .input-row {margin: 0;}
#email-notifications-form  h3 {padding: 0 0 2px 0;font-size:14px;color:#000;}
#email-notifications-form  p {padding: 0 0 15px 0;color:#666;}
#email-notifications-form  label{font-weight:bold;}
#email-notifications-form  .field label{font-weight:normal}

#email-notifications-form label {width:280px;}
#email-notifications-form .field {width:120px;}

/* account -form */
.account-form {width:420px;}
.account-form h4 {padding:4px 0 0 0;color:#40413b;font-weight:bold;}
.account-form h4 span {color:#777;font-weight:normal;font-style:italic;}
.account-form .input-row {padding:0 0 7px 0;}
.account-form .input-row label {float:left;margin-right:10px;padding:4px 0 0 0;width:170px;text-align:right;}
.account-form .input-row .field {float:left;width:200px;}
.account-form .input-row label.error,
.account-form .input-row .field label {display:inline;float:none;padding:0 2px 0 0;width:auto;color:#40413b;font-size:10px;text-align:left;vertical-align:middle;}

.account-form .input-row input.text {padding: 2px 4px;border:1px solid #cbcbcb;width:190px;height:15px;}
.account-form .input-row textarea {border: 1px solid #cbcbcb;padding:2px 4px;width:190px;height:65px;}

.account-form .input-row .validation {float:left;padding: 0 0 0 0;width:18px;height:20px;background-image:none;}
.account-form .input-row .validation .inline-help{display:block;margin:4px 0 0 0;width:14px;}

/* create account */
.account-form .input-row input#screen-name {float:left;width:118px;}
.account-form .checkboxes input {float:left;}
.account-form .checkboxes label {float:left;width:280px;padding:2px 5px 6px 4px;}

.account-form .checkbox {padding-left:180px;}
.account-form .checkbox .field {float:none;width:100%;}
.account-form .checkbox .field input {float:left;}
.account-form .checkbox .field label {display:block;margin-left:25px;float:none;padding:4px 0 0 0 !important;}
.account-form .checkbox .field label.error{}

/* account & profile */
.account-form .input-row input.website{float:left;width:153px;}

.account-form select {margin-right:5px;}
.account-form select.gender {width:128px;margin-right:0;}
.account-form select.month {width:70px;}
.account-form select.day {width:50px;}
.account-form select.year {width:55px;}

div.user-data {padding:4px 0 4px 0;font-weight:bold;}
div.user-data em,
div.user-data span,
div.user-data span a {color:#666;font-weight:normal;} 
div.user-data em{display:block;font-size:10px;}

.not-validated {margin-right:-30px;padding-bottom:5px;}
.not-validated strong{font-weight:normal;color:#8f0100;}

div.screen-name-example {float:left;width:70px;padding:4px 0 0 2px;text-align:left;}
div.website-prefix {float:left;padding:4px 0 0 2px;width:35px;text-align:left;}
span.max-chars {display:block;color:#666;font-style:italic;font-size:10px;}

div.user-data.password{padding-top:0;}
div.user-data.password span{vertical-align:middle;}
div.user-data.password span.password{color:#40413b;font-family:Verdana;font-size:14px;line-height:19px;}

.account-form .profile-image{float:left;margin-right:10px;border:1px solid #999;width:50px;height:50px;}
#change-profile-image-form .profile-image {background-repeat:no-repeat;background-position:50% 50%;width:150px;height:150px;}
div.user-data ul{float:left;}
div.user-data li{font-weight:normal;padding-bottom:2px;}

.forgot-password {padding:0 0 5px 2px;}

/* error states */
.account-form .input-row.validation-valid .validation{background:transparent url(../img/icon/success.gif) no-repeat -2px -2px;}

.account-form .input-row label.error{display:none;padding:6px 0 0 2px;color:#8f0100;}
.account-form .input-row.validation-error .field label.error {display: block;}
.account-form .input-row.validation-error .validation{background-image:none !important;}
.account-form .input-row.validation-error .text {border: 1px solid #f0aaaa;background: #fee;}

.account-form .input-row.validation-wait .validation{background:transparent url(../img/icon/wait.gif) no-repeat 2px 2px !important;}

.focus {background: #f0f7ff;}

/* invite friends */
#invite-friends-form h4 {font-weight:bold;padding-bottom:20px;line-height:17px;}
#invite-friends-form span.remaining-invites {color:#4E7000;font-weight:bold;font-style:normal;font-size:14px;vertical-align:bottom;}
#invite-friends-form span.inline-help{margin-left:10px;font-style:normal;}

.invitation-list {margin: 0 0 15px 0;}
.invitation-list li {padding: 2px 0px 4px 0;}
.invitation-list li input.text{margin:0 0 0 10px;}
.invitation-list li span {padding-left: 10px;}
.invitation-list li.label {padding-bottom:8px;}

.component .info{padding:2px 0 0 18px;background:transparent url(../img/icon/lock.gif) no-repeat 0 0;text-align:left;color:#666;}
.component .info a{margin:0;padding:0;float:none;background-image:none;color:#666;}

#invite-friends .message-container{margin-bottom:15px;}

#invite-friends .account-form{width:480px;}

#invite-friends .component-container{margin-bottom:30px;}

#invite-friends-form .email{padding-top:10px;width:490px;margin-right:-10px;} 
#invite-friends-form label{display:block;padding-bottom:3px;}
#invite-friends-form input.text{width:225px;}
#invite-friends-form .input-row{float:left;width:235px;margin-right:10px;}
#invite-friends-form .right{margin-right:0;}
#invite-friends-form .input-row label.error{display:block;padding-top:2px;}

#invite-friends-form .message{padding:10px 0 20px 0;}
#invite-friends-form textarea#email-message{margin:0;width:470px;}

#preview-email{display:none;}

#preview-email-dialog dl{width:100%;overflow:hidden;padding:10px 0;}
#preview-email-dialog dt{float:left;margin-right:20px;width:20%;text-align:right;font-weight:bold;}
#preview-email-dialog dd{float:left;width:70%;}
#preview-email-dialog dd u{color:#00f;}

.invitation-list {margin: 0 0 15px 0;}
.invitation-list li {padding: 2px 0px 4px 0;}
.invitation-list li input.text{margin:0 0 0 10px;}
.invitation-list li span {padding-left: 10px;}
.invitation-list li.label {padding-bottom:8px;}

div.more-invites,
div.preview-email,
div.go-back {float:right;margin-top:15px;width:200px;text-align:right;}
div.back-to-signin {margin: 10px 0 30px 0;}

/* friend finder */

.component .select-all{padding:5px 20px 5px 10px;}
.component .select-all label {font-weight:bold;}

#contact-list{height:265px;overflow:auto;border:1px solid #e3eccc;border-bottom:0;border-top:0;background-color:#fff;}

.component .select-all label,
#contact-list li,
#contact-list li *{cursor:pointer;}

/* #contact-list li.even{background-color:#f1f6e6;} */
#contact-list li.hover{background-color:#f6f6f6;}
#contact-list li.checked{background-color:#f1f6e6;color:#4d7000;}
#contact-list li.hover{color:#000;}

#contact-list .network li{height:60px;overflow:hidden;}

#contact-list .contact{padding:5px 9px;}

#contact-list .input{float:left;padding-top:13px;}
#contact-list img{float:left;margin:0 10px 0 10px;}
#contact-list .label{float:left;padding-top:10px;}
#contact-list .label strong{font-size:14px;padding-bottom:3px;display:block;}
#contact-list .invite li{border-bottom:1px solid #e3eccc;}

.component .buttons{padding:15px 20px 15px 10px;}

.component .buttons .message{padding-bottom:10px;}
.component .buttons .message label{display:block;}
.component .buttons .message textarea{width:100%;height:50px;margin-right:-10px;}

.component .buttons .next-step{float:right;} 
.component .buttons .next-button,
.component .buttons .preview-email{margin:0;padding:0;float:left;width:auto;margin-right:10px;}
.component .buttons .next-step,
.component .buttons .preview-email{padding-top:3px;}

/* lost password */
#lost-password .message-container{margin-bottom:20px;}
#lost-password-form .input-row{padding-bottom:15px;}
#lost-password-form .text {float:left;width:200px;}
#lost-password-form .inner-label{color:#999;}
#lost-password-form .next-button {float:left;padding-top:0;margin-bottom:5px;}

/* streams - subscriptions */
.subscriptions-form {width: 100%;}
.subscriptions-form .box1 {float:left;width: 49%;margin-right:2%;}
.subscriptions-form .box2 {float:left;width: 49%;}
.subscriptions-form .box1 .ruler,
.subscriptions-form .box2 .ruler{margin-bottom:15px;}
.subscriptions-form .box1 .ruler{margin-right:-10px;}

.subscriptions-form h3 {padding:0 0 10px 0;color: #000;font-weight:bold;font-size:14px;line-height:17px;}
.subscriptions-form h3 .inline-help {margin-left:8px;}
.subscriptions-form h4 {font-weight:bold;padding-bottom:10px;}
.subscriptions-form .input-row {margin-bottom: 9px;}
.subscriptions-form .input-row img {float:right;margin: 2px 9px 0 3px;}
.subscriptions-form .input-row strong {display:block;padding-bottom:2px;color:#4e7000;font-size:13px;}
.subscriptions-form .input-row label {display:block;width:100%;height:100%;}
.subscriptions-form .input-row .col1 {display:block;float:left;width:86px;}
.subscriptions-form .input-row .col2 {display:block;float:left;width:65%;}
.subscriptions-form .box2 .col1,
.subscriptions-form .box2 .col2 {float:left;padding-bottom:15px;width:49%;margin-right:1%;}

/* global content-box with dark background (like tip box) */
.contentbox-wrapper {margin:0 0 16px 0;background:#e8e3cd url(../img/dialog/contentbox_corner.gif) no-repeat 0 0;}
.contentbox-header {height:1px;line-height:1px;background:transparent url(../img/dialog/contentbox_corner.gif) no-repeat 100% 0;}
.contentbox {background: transparent url(../img/dialog/contentbox_corner.gif) 0 100% no-repeat;}
.contentbox p {padding:2px;}
.contentbox-footer {height:1px;line-height: 1px;background:transparent url(../img/dialog/contentbox_corner.gif) no-repeat 100% 100%;}

/* global content-box tip box */
.contentbox .tip {padding-left:40px;padding-right:20px;background:transparent url("../img/icon/tip.gif") no-repeat 10px 3px;}

/* delete account */
#delete-account .block-container {margin-left:auto;margin-right:auto;}
#delete-account  .block-container h3 {text-align: center;color:#d00;font-size:17px;line-height:1.2em;padding-bottom:10px;}

#delete-account .account-form {padding:15px 0 20px 0;border-top:1px solid #b3b3b1;text-align:center;}
#delete-account .tip{margin-bottom:15px;}
#delete-account-form .input-row{text-align:left;}
#delete-account-form label{width:98px}
#delete-account-form label.error{width:auto;}
#delete-account-form .text {margin-right:15px;}
#delete-account-form .button {margin: 10px auto 15px auto;}
#delete-account-form .button a,
#delete-account-form .button a span{background:#e8e3cd url(../img/dialog/delete_account_button_face.gif) no-repeat 0 0;}
#delete-account-form .button a{margin:0 auto;display:block;float:left;padding-left:30px;color:#fff;font-size:14px;font-weight:bold;text-decoration:none;}
#delete-account-form .button a span{display:block;padding:7px 30px 7px 0;background-position:100% 0;}

/* change profile image */
#change-profile-image-form .validation{width:10px;}
#change-profile-image-form .field {width:auto;margin-right:5px;}
.image-types {padding: 4px 0;font-size:10px;font-style:italic;}