/*
 * Customer Care CSS
 */

#main,
#main article.main {
    background: none;
    padding: 0;
}

#quick-links {
    margin-bottom: 118px;
}

.feature-contents {
    padding: 0 0 0 25px;
    width: 640px;
}

.feature-contents h1,
.feature-contents h2 {
    line-height: 1em;
}

.feature-contents h1 {
    font-size: 46px;
    font-style: italic;
}

.feature-contents h1 mark {
    display: block;
    font-family: MetaBlack,"Trebuchet MS",sans-serif;
    font-size: 64px;
    font-style: normal;
    text-transform: uppercase;
}

.feature-contents h2 {
    font-size: 150%;
    line-height: 1.2em;
    margin: 15px 200px 0 0;
}

#speech-bubbles {
    background: transparent url(../img/customercare/bubbles.png) no-repeat 0 25px;
    min-height: 100px;
    padding: 60px 0 15px 25px;
}

#speech-bubbles li {
    color: #fff;
    float: left;
    font-size: 20px;
    font-style: italic;
    margin: 0 0 0 25px;
    padding: 5px 0 0;
    width: 200px;
}

#speech-bubbles li mark {
    display: block;
    font-family: MetaBlack,"Trebuchet MS",sans-serif;
    font-size: 21px;
    font-style: normal;
    text-transform: uppercase;
}

#tweetcontainer {
    border: 1px solid #f5f5f5;
    clear: left;
    float: left;
    padding: 2px;
}

#tweetcontainer h2 {
    background: none;
    float: left;
    font-size: 20px;
    font-weight: bold;
    line-height: 3em;
    margin: 0px;
    padding: 0px;
}

#tweetcontainer #twitter-icon {
    float: left;
    padding: 4px;
}

#refresh-busy {
    display: none;
    height: 10px;
    padding-left: 10px;
    width: 10px;
}

#infinite-scroll {
    text-align: center;
}
#scroll-busy {
    display: none;
    margin: 10px 0;
}

.avatar img {
    height: 48px;
    width: 48px;
}

.tweets-header {
    padding: 0 15px;
}

div.warning-box {
    margin: 10px 20px;
}

#tweets {
    margin: 0 10px;
}

#tweets ul {
    margin: 0px;
}

#tweets li {
    list-style-type: none;
}

#tweets div.tweet-contents {
    border-top: 1px solid #ccc;
    cursor: pointer;
    margin-bottom: 0px;
    overflow: auto;
    padding: 10px;
    width: 690px;
}
#tweets div.replies div.tweet-contents {
    padding-left: 70px;
    width: 570px;
}
#tweets div.alt {
    background: -moz-linear-gradient(top, #fff, #f5f5f5);
    background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#f5f5f5));
}

#tweets div.replies {
    clear: left;
    display: none;
}

#tweets div.tweet-contents:hover {
    background: -moz-linear-gradient(top, #fffffd, #fdefa6);
    background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#fdefa6));
    border-top: 1px solid #fef1ad;
}

#tweets li img {
    border: solid 1px #cacccb;
    float: left;
    height: 48px;
    margin-right: 1em;
    padding: 0px;
    width: 48px;
}

#tweets li .twittername {
    color: #307fc1;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.4em;
    text-decoration: none;
}

#tweets li time,
#initial-tweet time {
    color: #afaba3;
    float: right;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
}

#tweets li time:hover,
#initial-tweet time:hover {
    text-decoration: underline;
}

#tweets li .text {
    color: #69645b;
    font-size: 14px;
    font-weight: normal;
    width: 550px;
}

#tweets li .reply_count {
    clear: right;
    float: right;
    font-family: Verdana, sans-serif;
    font-size: 11px;
}
#tweets li .reply_count.you {
    font-weight: bold;
}
#tweets li a.reply_count {
    color: #0ba643;
}
#tweets li a.reply_count:before {
    content: '\25B6\A0';
}
#tweets li a.reply_count.opened:before {
    content: '\25BC\A0';
}
#tweets li a.reply_count:hover {
    text-decoration: underline;
}

.tweets-buttons {
    float: right;
    line-height: 4em;
    padding-right: 15px;
}

.tweet a, .tweet a:hover {
    color: #69645b;
    text-decoration: none;
}

.hidden {
    display: none;
}

/* reply page styling */

#reply-container {
    background-color: #fff;
    font-family: Verdana, sans-serif;
    margin: 0 auto;
    text-align: left;
    top: 86px;
}

#reply-container,
#reply-container #replies {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

#initial-tweet img {
    border: 1px solid #bbb;
    float: left;
}

#initial-tweet .box {
    background: #fff;
    border: 1px solid #aaa;
    color: #69645b;
    display: block;
    font-size: 80%;
    margin-left: 70px;
    padding: 6px 9px 10px 9px;
    text-align: left;
}

#initial-tweet a.twittername {
    color: #2276bb;
    font-weight: bold;
    text-decoration: none;
}

#initial-tweet a.avatar {
    display: inline;
}

#initial-tweet .text {
    padding-top: 4px;
}

#initial-tweet #arrow {
    border: 0;
    left: 75px;
    position: absolute;
    top: 60px;
}

#reply-container h4 {
    color: #4b4740;
    font-family: Verdana, sans-serif;
    font-size: 125%;
    font-weight: normal;
    margin-bottom: 15px;
}

#reply-container #replies {
    background: #8fc1da;
    background: -moz-linear-gradient(center top, #8fc1da, #e5f1f7) repeat;
    background: -webkit-gradient(linear, center top, center bottom, from(#8fc1da), to(#e5f1f7));
    margin-top: 20px;
    padding: 15px 20px;
}

#reply-container h3.ui-accordion-header {
    background: #f0f0f0 url('../img/customercare/expander-closed.png') 8px 50% no-repeat;
    border: 1px solid #b2b2b2;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font-family: Verdana, sans-serif;
    font-size: 12px;
    margin: 0 0 9px 0;
    padding: 4px 0 5px 24px;
}

#reply-container h3.ui-accordion-header a {
    color: #69645b;
    display: block;
}

#reply-container h3.ui-accordion-header a:hover {
    text-decoration: none;
}

#reply-container #replies ul {
    list-style-type: none;
    margin: 0 0 10px 24px;
}

#reply-container #replies li a {
    color: #0489b7;
    display: block;
    padding-bottom: 2px;
}

#reply-container #no-responses a {
    color: #447BC4;
}

#reply-container h3.ui-accordion-header.ui-state-default {
    background: #f0f0f0 url('../img/customercare/expander-closed.png') 8px 50% no-repeat;
}

#reply-container h3.ui-accordion-header.ui-state-active {
    background: #f0f0f0 url('../img/customercare/expander-open.png') 8px 50% no-repeat;
}

#reply-container h3.ui-accordion-header.ui-state-default a {
    color: #69645b;
    font-weight: normal;
}

#reply-container h3.ui-accordion-header.ui-state-active a {
    color: #69645b;
    font-weight: bold;
}

#accordion .ui-widget-content {
    background: none;
    border: none;
}

.topics .snippet {
    display: none;
}

#reply {
    padding-bottom: 34px;
}
#reply .desc {
    color: #69645B;
    font-size: 85%;
    margin-bottom: 10px;
    width: 340px;
}

#reply-message {
    background: #fff;
    border: 1px solid #aaa;
    height: 65px;
    font-size: .9em;
    padding: 10px 15px;
    width:325px;
}

#reply #reply-arrow {
    display: inline;
    left: 30px;
    position: relative;
    top: 5px;
}

#error-message,
#submit-message {
    color: #4b4740;
    display: none;
    float: left;
    font-weight: bold;
    height: 21px;
    margin-top: 14px;
}

#submit-message {
    background: url('../img/customercare/reply-check.png') right top no-repeat;
    padding-right: 23px;
    padding-top: 3px;
}

#error-message {
    background: url('../img/customercare/notification-error.png') right 4px no-repeat;
    padding-right: 20px;
}

#reply .container {
    position: relative;
    top: -12px;
}

#reply .submitButton {
    background: -moz-linear-gradient(center top, #eed052 15px, #ebb04f 18px, #e79f30, #e0752b);
    /* color-stop percentages according to height */
    background: -webkit-gradient(linear, center top, center bottom, color-stop(.417, #eed052), color-stop(.5, #ebb04f), color-stop(.75, #e79f30), to(#e0752b));
    border-left: 1px solid #d4661a;
    border-right: 1px solid #d4661a;
    border-top: 1px solid #d19f7c;
    border-bottom: 1px solid #ba5c1c;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 0 5px #777;
    -moz-box-shadow: 0 0 5px #777;
    color: #b01a04;
    cursor: pointer;
    float: right;
    height: 36px;
    line-height: 36px;
    margin-top: 10px;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
    width: 140px;
}

#submit-busy {
    display: none;
    height: 13px;
    padding-left: 5px;
    width: 13px;
}

#reply .submitButton.busy {
    background: -moz-linear-gradient(center top, #ccc 15px, #ccc 18px, #aaa, #aaa);
    background: -webkit-gradient(linear, center top, center bottom, color-stop(.417, #ccc), color-stop(.5, #ccc), color-stop(.75, #aaa), to(#aaa));
    border-color: #aaa;
    color: #666;
}

#reply .submitButton.busy #submit-busy {
    display: inline;
}

#reply .character-counter {
    color: #fff;
    float: right;
    font-weight: bold;
    font-size: 24px;
    position: relative;
    top: 33px;
    width: 50px;
}

.hrbreak {
    background: url('../img/customercare/hr-line.png') center 20px no-repeat;
    height: 50px;
}
/* end of reply page styling */

.notice {
    background-color:#FFFFCC;
    border:2px solid orange;
    float: left;
    margin:1em 0;
    padding:1em;
    text-align:center;
}

.input-placeholder {
    color: #69645b;
}

.header-button,
#twitter-logout input.header-button {
    background: -moz-linear-gradient(center top , #F9F9F9, #E3E3E3) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, center top, center bottom, from(#f9f9f9), to(#e3e3e3));
    border: 1px solid #BBBBBB;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    color: #000000;
    cursor: default;
    float: right;
    margin: 15px 5px 0 0;
    padding: 3px 8px;
    text-align: center;
    text-shadow: none;
}

.header-button:hover,
a.header-button:hover {
    color: #307FC1;
}
.header-button:visited {
    color: #000;
}
a.header-button {
    color: #000;
    padding: 4px 8px;
}

#twitter-modal {
    color: #69645b;
    font-family: Verdana, sans-serif;
    text-align: left;
}

#twitter-modal .inner-container {
    background: #fff;
    border: 10px solid #9fcce1;
    font-size: 90%;
    padding: 20px 18px;
}

#twitter-modal h4 {
    color: #4b4740;
    font-family: Verdana, sans-serif;
    font-size: 135%;
    font-weight: bold;
    margin-bottom: 5px;
}

#twitter-modal .cancel,
#twitter-modal .signin {
    background: -moz-linear-gradient(center top, #f1f1f1 15px, #eee 18px, #ddd, #ccc);
    background: -webkit-gradient(linear, center top, center bottom, color-stop(.417, #f1f1f1), color-stop(.5, #eee), color-stop(.75, #ddd), to(#ccc));
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    color: #5a5a5a;
    display: block;
    float: left;
    height: 36px;
    line-height: 35px;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
    width: 140px;
}

#twitter-modal .cancel {
    margin: 15px 15px 0px 48px;
}

#twitter-modal .signin {
    color: #10a2c6;
    margin: 15px 0px 0px 0;
}

#twitter-modal .inner-container div {
    height: 50px;
}

.ui-corner-all {
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
}

.ui-widget-header {
    background: none;
    border: none;
}

.ui-dialog {
    box-shadow: 0 0 10px #aaa;
    -moz-box-shadow: 0 0 10px #aaa;
}

.ui-widget-content {
    background: #fff;
    border: none;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.ui-dialog-titlebar-close {
    background-color: #fff;
}
.ui-dialog-titlebar-close .ui-icon {
    background-image: url("jqueryui/images/ui-icons_222222_256x240.png");
}
.ui-dialog-titlebar-close.ui-state-hover {
    background: none;
}

/*----------------------------------
    AoA Sidebar
----------------------------------*/

#side-stats {
    padding: 10px;
}

#side-stats h1 {
    padding: 10px;
}

#side-stats .unavailable {
    color: #b41b00;
    margin-top: 10px;
    text-align: center;
}

#side-stats .bubble {
    background-color: #E6F0F9;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    margin-top: 10px;
    text-align: center;
}

#side-stats .speech {
    background: transparent url(../img/customercare/bubble.png) no-repeat 50px bottom;
    height: 20px;
    width: 100%;
}

#side-stats .bubble div {
    font-variant: small-caps;
}

#side-stats .perc,
#side-stats .numbers {
    color: #669be1;
    font-family: MetaBlack,"Trebuchet MS",sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    padding: 10px 0 0;
}

#side-stats .perc mark,
#side-stats .numbers mark {
    color: #666;
    font-family: Georgia, freeserif, serif;
    font-size: 28px;
    font-style: italic;
    font-weight: normal;
    text-align: center;
}
#side-stats .numbers {
    font-size: 13px;
}
#side-stats .numbers mark {
    display: block;
    font-size: 20px;
}

#side-stats .numbers .replies,
#side-stats .numbers .tweets {
    text-align: center;
    width: 44%;
}

#side-stats .numbers .replies {
    float: left;
}

#side-stats .numbers .separator {
    color: #4B4742;
    float: left;
    font-family: Georgia, freeserif, serif;
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    margin-left: .25em;
}

#side-stats .numbers .tweets {
    float: right;
}

#side-stats select {
    font-family: Arial,Helvetica,sans-serif;
    margin: 10px 0 20px;
    text-align: center;
    width: 80%;
}

#side-stats .contribs {
    clear: both;
    padding: 10px;
    width: 160px;
}

#side-stats .avatar {
    margin: 2px;
    width: 32px;
}

#side-stats .contribs .contributors {
    display: none;
}

#side-stats .contribs .contributors:first-child {
    display: block;
}

#next-level {
    background: -moz-radial-gradient(center -40%, circle, rgba(255,255,255,1), rgba(255,255,255,0) 50%);
    background: -webkit-gradient(radial, center -40%, 0, center -40%, 175, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
}
