/** Yahoo's fonts CSS reset. Included here to build in to the TFW bundle. */

/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
/**
 * Percents could work for IE, but for backCompat purposes, we are using keywords.
 * x-small is for IE6/7 quirks mode.
 */
body {
	font:13px/1.231 arial,helvetica,clean,sans-serif;
	*font-size:small; /* for IE */
	*font:x-small; /* for IE in quirks mode */
}

/**
 * Nudge down to get to 13px equivalent for these form elements
 */
select,
input,
button,
textarea {
	font:99% arial,helvetica,clean,sans-serif;
}

/**
 * To help tables remember to inherit
 */
table {
	font-size:inherit;
	font:100%;
}

/**
 * Bump up IE to get to 13px equivalent for these fixed-width elements
 */
pre,
code,
kbd,
samp,
tt {
	font-family:monospace;
	*font-size:108%;
	line-height:100%;
}
html {
  margin: 0;
  padding: 0;
  text-align: center;
  background: #f4f4f4;
  height: 100%; /* FIX: Webkit HTML background height rendering */
}
body {
  margin: 0;
  padding: 0;
  text-align: left;
  direction: ltr;

  background: #fff;
  background: #fff -moz-linear-gradient(-90deg, #E9F5FF, #ffffff 100px);
  background: #fff -webkit-linear-gradient(#E9F5FF, #ffffff 100px);
  background: #fff linear-gradient(#E9F5FF, #ffffff 100px);
  background-repeat: repeat-x;
}

body.nofooter {
  border-bottom: 1px solid #EBEBEB;
}

/* Variable width */
.bar,
#bd,
#ft,
#promo .inner {
  min-width: 240px;
  max-width: 640px;
  width: auto;
  _width: 520px;
  margin: 0 auto;
}

body.session .bar,
body.session #bd,
body.session #ft,
body.session #promo .inner {
  max-width: 300px;
  _width: 300px;
}

form {
  clear:none;
  margin:0;
  padding:0;
}

a img {
  border:0;
}

p, ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

body,
select,
input,
button,
textarea {
  font-family: sans-serif;
  color: #333;
}

a:link,
a:visited,
a:active,
input.textual.link,
button.textual.link {
  color: #2276bb;
  text-decoration: none;
}

/* Fix rendering issues caused by the worst mark-up ever: */
a s {
  text-decoration: none;
  opacity: 0.6;
}

a b {
  font-weight: normal;
}

a:hover,
input.textual.link:hover,
input.textual.link:focus {
  text-decoration: underline;
  cursor: pointer;
}

fieldset {
  margin: 10px 0;
  padding: 0;
  border: 0;
}

/* By default, legends are hidden. */
fieldset legend {
  display: none;
}

/* Abstracted form styles */

/* Smooth transition for form field focus glow: */
input[type=text],
input[type=password],
textarea {
  -moz-transition: border linear .2s, -moz-box-shadow linear .2s;
  -webkit-transition: border linear .2s, -webkit-box-shadow linear .2s;
  -o-transition: border linear .2s, box-shadow linear .2s;
  transition: border linear .2s, box-shadow linear .2s;
}

/* default input styles for borders and text colors on fields */
input[type=text],
input[type=password],
textarea {
  border: 1px solid #ccc;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.selected.button:focus,
input[type=text]:focus,
input[type=password]:focus,
textarea:focus {
  outline: none;
  border-color: #55bef1;
  -moz-box-shadow: 0 0 8px rgba(82,168,236,.75);
  -webkit-box-shadow: 0 0 8px rgba(82,168,236,.75);
  box-shadow: 0 0 8px rgba(82,168,236,.75);
}

body a.button { color: #000 }

small { font-size: 100%;}

.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#bd {
  padding: 20px 20px;
}

#bd::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#logged-in-status {
  text-align: right;
  font-size: 93%;
  color: #666;
  padding: 0;
  margin: 0 0 10px 0;
}

#signup-msg {
  text-align: right;
  font-size: 93%;
  color: #666;
  padding: 0;
  margin: 0 0 10px 0;
}

#signup-msg a {
  font-weight: bold;
}

#logged-in-status input {
  background: transparent;
  overflow: visible;
  border: 0;
  padding: 0;
  color: #5ea2c3;
}

/** Section: Common Dialog Styles */

.action-information {
  font-size: 108%;
  line-height: 140%;
  font-weight: normal;
  color: #666;
  text-shadow: #fff 0 1px 0;
  margin: 0 0 15px;
}

h2.action-information {
  font-weight: bold;
  font-size: 140%;
}

.action-information a.launch:after {
  content: " →";
}

#bd h3 {
  font-size: 110%;
  color: #777;
  border-bottom: 1px solid #EBEBEB;
  margin: 10px -20px;
  padding: 0 20px 4px;
}

form.flow,
form.flow div {
  display: inline;
}

input.textual,
button.textual {
  display: inline;
  border: none; padding: 0; margin: 0; background: none;
  font: inherit;
  text-shadow: inherit;
  color: inherit;
}

/** Section: Login Form */
fieldset.sign-in {
  border: none;
  padding: 0;
  margin: 0 0 10px 0;
  width: 100%;
  max-width: 300px;
  _width: 300px;
}

fieldset.sign-in legend {
  display: none;
}

.sign-in .row {
  position: relative;
  display: inline-block;
  overflow: hidden;

  background-color: #eee;
  background-color: rgba(200, 200, 200, 0.15);
  padding: 1px 4px;
  margin: 4px 0px 0px -4px;

  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;

  line-height: 36px;
  zoom: 1;
}

/* New-style, whizzbang inline form labels */
/* Noscript default: */
.sign-in .row label {
  display: block;
  font-size: 80%;
  line-height: 180%;
}

/* The label overlays the form field. Associated script handles class switching on the .row
   based on content being present. When content is present, the class switch hides the label
   with some CSS transitions, and _display: none hack for non-opacity supporting IE */
.noloki.js .sign-in .row {
   background-color: #eaeaea;
   background-color: rgba(200, 200, 200, 0.3);
}

.noloki.js .sign-in .row label {
  position: absolute;
  top: 0;
  left: 12px;
  line-height: 39px;
  font-size: 100%;
  color: #777;
}

.noloki.js .sign-in .content label {
  display: none;
}

.sign-in input.text {
  padding: 6px;
  width: 288px;
  background-color: #fff;
}

.sign-in p {
  line-height: 150%;
  padding-top: 6px;
  clear: both;
  color: #777;
}

.sign-in .error .row,
#update-form div.error {
  background: rgb(171, 41, 32);
  background: rgba(171, 41, 32, .50);
}

.sign-in .error input.text,
#update-form .error textarea {
  border: 1px solid #ab2920
}

#login-form {
  width: 300px;
  margin: 0 auto;
}

#login-form div.submit {
  margin-top: 10px;
  *margin-left: 6em; /* IE6+7 margin doubling fix */
}

#login-form div.submit .button {
  vertical-align: top;
}

/** Section: Sign in Promo banner  */

#promo {
  background: #eef7ff;
  border-top: 1px solid #eaeaea;
  padding: 0 0 1em;
  overflow: hidden;
  clear: both;
}
#promo .inner {
  padding: 0 20px;
}

#promo h2 {
  font-size: 110%;
  line-height: 200%;
  margin: 0.5em 0;
}

#promo .sign-up.button {
  float: right;
  margin-right: -4px;
}

#promo p {
  margin-top: 1px;
  margin: 0.5em 0;
}

#promo.thumbnail p {
  position: relative;
  margin-left: 58px;
}

#promo.thumbnail img {
  position: absolute;
  top: 0px; left: -58px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.error p,
.error a,
.error {
  color: #ab2920;
}

/* Share/Tweet/Reply styles */

#update-form .bd {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #EAEAEA;
  background: rgba(200, 200, 200, 0.3);
  padding: 4px;
  margin: 15px -4px 0;
}

#update-form {
  display: block;
}

#update-form textarea {
  display: block;

  background: #fff;
  resize: vertical;
  font-size: 108%;

  padding: 4px;
  width: 100%;
  height: 65px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

#update-form .url-tweet {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #96bacb;
  padding: 6px;
  width: 444px;
  height: 65px;
  overflow-y: auto;
}

#update-form .hd label {
  position: absolute;
  left: -999em;
}

#update-form .ft {
  position: relative;
  _position: static;
  padding-bottom: 15px;
}

#update-form .ft .btn {
  margin-right: 5px;
}

#update-form .ft .btn,
#update-form .ft #char-count {
  display: inline-block;
  vertical-align: baseline;
}

#char-count {
  border: none;
  background: #fff;
  padding: 4px 0;
  color: #999;
  margin-right: 8px;
  font-size: 108%;
  width: 2em;
  text-align: right;
}
#char-count.warn {
  color: #5C0002;
}
#char-count.superwarn {
  color: #C00;
  font-weight: bold;
}

/** Form styles */

form.indent-buttons {
  display: block;
  clear: left;
  margin: 10px 0 0 0;
}

form.indent-buttons .button {
  vertical-align: top;
}

/* Align buttons with avatar indentation. */
.logged-in form.indent-buttons {
  margin-left: 58px;
}

.logged-out #update-form fieldset.sign-in,
.logged-out form.indent-buttons fieldset.sign-in {
  float: left;
  text-align: left;
  width: 250px;
}

.logged-out #update-form fieldset.sign-in input.text,
.logged-out form.indent-buttons fieldset.sign-in input.text {
  width: 200px;
}

.logged-out #update-form fieldset.submit,
.logged-out form.indent-buttons fieldset.submit {
  margin: 0 0 6px 10px;
  padding-top: 8px;
}

#update-form fieldset.submit,
form.indent-buttons fieldset.submit {
  text-align: right;
}

form.indent-buttons fieldset.submit {
  direction: rtl;
}

form.indent-buttons fieldset.submit .button {
  margin-left: 6px;
}

.logged-out #update-form fieldset.submit .button {
  margin-right: -4px;
}

/* Canonical Tweet this link */
span.canonical-tweet-link {
  display: block;
  clear: right;
  padding-top: 10px;
}

/* Share success/complete styles */

/* Related Users/Tweets/etc. */

.related {
  clear:left;
}

.related h2 {
  margin: 20px 0 6px 0;
  font-weight: normal;
  font-size: 120%;
}

/* Neg/Pad margin trick to extend related item borders to window width */
.related ul {
  margin: 0 -20px;
  list-style-type: none;
}
.related li {
  padding: 10px 20px;
/*  font-size: 93%;*/
  border-top: 1px solid #EBEBEB;
  zoom: 1;
}

.related li:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.related li p.related-description {
  margin: -5px 0 2px;
}

.related form {
  display: block;
}

.user-list a {
  font-size: 108%;
  font-weight: bold;
  color: #000;
}

.user-list .name {
  font-size: 100%;
  color: #999;
}

.user-list .name-verified {
  padding-right: 20px;
  background: url(../../images/share/verified.png) right center no-repeat;
}

.user-list .description {
  display: block;
  font-family: Georgia,Palatino,serif;
  font-style: italic;
  color: #666;
  margin: 5px 100px 5px 0;
}

.related-users .stats {
  font-size: 80%;
  color: #999;
}

.related-users .stats a {
  color: #999;
  font-weight:normal;
}

.related-users .stats a.user {
  color: #333;
}

.user-list img {
  float: left;
  margin: 0 8px 0 0;
}

.user-list .follow-button {
  float: right;
  text-align: right;
  *margin-top: -1.1em;
}
.user-list .btn input {
  font-weight: bold;
}

.user-list .following-ctrls {
  float: right;
  text-align: right;
  *margin-top: -1.1em;
}

.user-list .btn-follow input {
  padding-left: 18px;
  line-height: 16px;
  background: url(../images/share/add_follow.png) left center no-repeat;
}

.user-list .following-msg,
.user-list .follow-pending-msg {
  font-weight: bold;
  font-style: normal;
}

.user-list .following-msg {
  float: left;
  padding: 0 0 0 15px;
  background: url(../images/share/green-check-sm.png) left center no-repeat;
}

.user-list .btn-unfollow {
  float: none;
  clear: both;
  display: block;
  _display: inline-block;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
}

.user-list .btn-unfollow input {
  font-size: 85%;
  color: #2276BB;
}

.user-list .btn-unfollow-hover input {
  text-decoration: underline;
}

.wait-msg {
  background: url(../../images/spinner.gif) left center no-repeat;
  padding-left: 20px;
}

.recent-tweets .more-link,
.related-tweets .more-link {
  clear: both;
  float: right;
  margin: 10px 15px 0 20px;
}

/* Footer Elements */

.footer {
  display: block;
  background: #f4f4f4;
  border-top: 1px solid #EBEBEB;
}

#ft {
  padding: 5px 15px;
  overflow: hidden;
}

#ft a {
  display: inline-block;
  *float: left; /* IE6 can't stack horizontally properly. */
  padding: 5px 0;
}

#ft a.return-link:before {
  content: "← ";
}

#ft a.supplemental-link {
  float: right;
  margin-left: 20px;
}

/** Section: Error page toolbar */
#ft p {
  *clear: both;
  margin: 0.5em 0;
}
#ft p a {
  display: inline;
  padding: 0;
  float: none; /* Undo said floating for links within text blocks */
}


/* Error page toolbar */
#toolbar {
  margin-top: 20px;
}

/** Section: Auto-close notification */
#auto-close {
  overflow:hidden;
}
#auto-close p {
  color: #333;
  background: #f4f4f4;
  padding: 15px 15px 15px 15px;
  margin: 20px 0;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

/** Section: Notices and Error Banners */
.notice {
  position: relative;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid #333;
}

.notice.with-action {
  padding-right: 85px;
}

.notice.with-action .button {
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -14px;
}

.notice em {
  font-weight: bold;
  font-style: normal;
}

.notice a::after {
  content: "→";
}

.notice h2 {
  font-size: 100%;
  margin: 0 0 3px;
  font-weight: bold;
}

.notice, .notice p {
  color: #333;
}
.notice a {
  color: #333;
  text-decoration: underline;
}

.notice.happy {
  border-color: #C4E6C1;
  background: #D5EEDD;
}

.notice.concerned {
  border-color: #F8DFBA;
  background: #FFF4DB;
}

.notice.error {
  border-color: #E4BAB6;
  background: #EFD4D2;
}

.notice.app {
  border-color: #bbb;
  background: #e9e9e9;
}

p.notice {
  color: #fff;
  border: none;
}
p.notice a {
  color: #fff;
  text-decoration: underline;
}

p.notice.happy {
  background: #2DAA55;
  background: -webkit-gradient(linear, left top, left bottom, from(#2DAA55), to(#28924A));
  background: -moz-linear-gradient(top, #28924A, #2DAA55);
  background: transparent\9; /* HACK: Clear background for IE, apply filter instead: */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#28924A', endColorstr='#2DAA55');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#28924A', endColorstr='#2DAA55')";
}

p.notice.concerned {
  background: #FEC649;
  background: -webkit-gradient(linear, left top, left bottom, from(#FEC649), to(#DCA83D));
  background: -moz-linear-gradient(top, #DCA83D, #FEC649);
  background: transparent\9; /* HACK: Clear background for IE, apply filter instead: */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCA83D', endColorstr='#FEC649');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCA83D', endColorstr='#FEC649')";
}

p.notice.error {
  background: #AC2A1E;
  background: -webkit-gradient(linear, left top, left bottom, from(#AC2A1E), to(#96251A));
  background: -moz-linear-gradient(top, #96251A, #AC2A1E);
  background: transparent\9; /* HACK: Clear background for IE, apply filter instead: */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#96251A', endColorstr='#AC2A1E');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#96251A', endColorstr='#AC2A1E')";
}

@media (max-width: 31em) {

  div.suggested .user-list .description {
    display:none;
  }

  .logged-out #update-form fieldset.submit,
  .logged-out form.indent-buttons fieldset.submit,
  .logged-out form.indent-buttons fieldset.submit .button {
    clear: left;
    float: none;
    text-align: left;
    margin-left: 0;
  }

  .logged-out #char-count {
    position: absolute;
    top: 6px;
    right: 0px;
  }

  span.canonical-tweet-link {
    display: inline-block;
    padding-top: 0;
    padding-left: 5px;
    vertical-align: -5px;
  }

  #promo .inner {
    padding: 0 10px;
  }

  #promo .sign-up.button {
    margin-right: 0;
  }

  #ft {
    padding: 5px 10px;
  }

  #bd h3 {
    margin: 10px -10px;
    padding: 0 10px;
  }
  .notice {
    margin: -10px -10px 10px -10px;
    border-radius: 0;
    border-width: 1px 0;
  }
}
/* Web Intents toolbar */

html {
  padding-top: 40px; /* Use padding: Margin causes scrolling because we do html { height: 100% elsewhere } */
  *padding-top: 0; /* IE6 doesn't support position: fixed so just scroll */
  padding-top: 0\9; /* IE8/9. TODO: Fix fixed position menu in other IE versions. Something crack-fueled is going on with z-index and overflow. */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#header {
  position: fixed;
  *position: static; /* IE6 won't do fixed. IE7 will crop the drop-down. */
  position: static\9; /* TODO: Fix fixed position menu in other IE versions. */
  top: 0; left: 0;
  min-height: 40px;
  width: 100%;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);

  text-align: center; /* IE centering */

  z-index: 1500;

  color: #fff;
  background: #111;
  background: -moz-linear-gradient(top, #333, #111);
  background: -webkit-linear-gradient(#333, #111);
  background: linear-gradient(#333, #111);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#111111');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#111111')";

  _filter: none; /* Not in IE6 */
  _background: #111;

  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: default;
}

#header .bar {
  position: relative;
  margin: 0 auto;
  text-align: left;
  padding: 0 20px;
}

#header .logo {
  margin: 0; padding: 0;
  height: 40px;

  position: absolute;
  top: 0; left: 0;
}

#header .logo a {
  display: block;
  height: 40px;
  width: 24px;
  margin: 0 0 0 10px;
  padding: 0 10px;
  color: transparent;
  text-indent: -999em; /* offscreen for IE */
  background: transparent url(../../img/t1/bird-topbar-blue.png) no-repeat 10px 9px;
  _background-image: url(../../img/t1/bird-topbar-blue.gif);
}

#session, #session h2, #session h3, #session a, #session input, #session button {
  margin: 0; padding: 0;
  font-size: 100%;
  color: #bababa;
  font-weight: normal;
  white-space: nowrap;

  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -o-box-sizing: content-box;
  -ms-box-sizing: content-box;
  box-sizing: content-box;
}

#session, #not-logged-in {
  float: right;
  width: 400px;
  margin-right: 0;
  _margin-right: 0px;
  position: relative;
}

#header a:focus, #header a:hover {
  text-decoration: none;
  background-color: #333;
  background-color: rgba(255, 255, 255, 0.095);
  outline: 0;
}

/* Light grey highlighting of selected menu items */
#session.show h2 a, #session.show h2 a:focus,
#session a:focus, #session a:hover, #session a:active
#session button:focus, #session button:hover,
#session input:focus, #session input:hover {
  color: #fff;
  text-decoration: none;
  background-color: #333;
  background-color: rgba(255, 255, 255, 0.095);
  outline: 0;
  cursor: pointer;
}

/* Use a higher contrast keyboard focus colour. */
#session h2 a:focus, #header a:focus, #session a:focus, #session button:focus, #session input:focus {
  background-color: #547198;
  background-color: rgba(71, 180, 253, 0.5);
}

#session h2 { text-align: right; line-height: 40px; }
#session h2 a {
  padding: 0 10px 0 45px;
  position: relative;
  display: inline-block;
  vertical-align: top;
  min-height: 40px;
  line-height: 40px;
}
.js #session h2 a {
  padding-right: 25px;
  background: url(../img/down-arrow.png) no-repeat 90% center;
}
.js.rtl #session h2 a {
  background-position: 5% center;
}

#session h2 img {
  position: absolute;
  left: 10px; top: 7px;
  width: 24px; height: 24px;
}

/* General styles, and sizing for the JS-less mode where just 'sign out' shows as a nib */
#session .user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  padding: 0;
  background: #111;
  width: auto;

  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;

  -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);

  z-index: 1500;
}

/* With JS off, reduced menu padding so as not to obscure too much of the page */
#session .user-menu input { padding: 2px 10px; }
.user-menu h3, .user-menu ul, .user-menu li { display: none; }
.user-menu ul.session, .user-menu .session li.signout { display: block; }

/* Engage full menu with JS on */
.js #session .user-menu {
  background: #333;
  min-width: 180px;
  width: 8em;
}

.js .user-menu h3, .js .user-menu ul, .js .user-menu li { display: block; }

.js #session .user-menu button,
.js #session .user-menu input,
.js #session .user-menu a {
  text-align: left;
  display: inline-block;
  width: 150px;
  padding: 6px 15px;
}
.js #session .user-menu { display: none; }
.js #session.show .user-menu { display: block; }

.js #session .user-menu h3 {
  padding: 6px 15px;
  background: #222;
  color: #666;
  border-top: 1px solid black;
}

/* This heading is in for structural integrity and accessibility */
.user-menu h3.session { display: none; }

/* Menu options hidden behing OPT/ALT */
.user-menu li.new, .user-menu li.settings, .user-menu li.help { display: none; }
.opt .user-menu li.new, .opt .user-menu li.settings, .opt .user-menu li.help { display: block; }

/* Contributors icon alignment */
#session .user-menu button.switch-user {
  position: relative;
  line-height: 20px;
  padding-left: 40px;
  width: 130px;
}

.user-menu button.switch-user img {
  display: inline-block;
  vertical-align: bottom;
  margin-left: -25px;
  width: 20px; height: 20px;
}

/* Vertical Rule */
hr.vr {
  border-left: 1px solid #040404;
  border-right: 1px solid #2F2F2F;
  border-width: 0 1px;
  width: 0;
  display: inline-block;
  vertical-align: middle;
  height: 26px;
  margin: 0 3px;
  *display: none; /* Hidden in IE6 and IE7 as <hr> cannot be displayed inline */
}

/** Section: Sign In/Join */
#not-logged-in {
  text-align: right;
  line-height: 40px;
}
#not-logged-in a.register,
#not-logged-in a.sign-in {
  color: #FFAA22;
  font-weight: bold;
  line-height: 40px;
  display: inline-block;
  padding: 0 5px;
}

#not-logged-in a.sign-in {
  color: #FFF;
}

#not-logged-in a.register::after,
#not-logged-in a.sign-in::after {
  content: ' ›';
  font-family: Arial; /* The Helvetica version of the > too light */
}

/* Every language apart from English has a longer blurb, so we hide it earlier */
@media (max-width: 470px) {
  .blurb {
    display: none;
  }
  .en .blurb {
    display: inline;
  }
}

@media (max-width: 400px) {
  #header .bar {
    padding: 0 10px;
  }

  #session h2 a {
    padding: 0 25px 0 35px;
  }
  #session h2 .name {
    display: none;
    overflow: hidden;
    visibility: hidden;
    width: 1px;
  }
  #not-logged-in {
    float: right;
    width: 300px;
  }
  .blurb {
    display: none;
  }

  #bd {
    padding: 10px;
  }
  #header .logo a {
    margin: 0;
    background-position: 10px 9px;
  }
}
/** Section: Profile Detail */

.profile {
  position: relative;
  margin-top: 5px;
}

.profile .subject {
  padding-left: 83px;
  min-height: 73px;
  _height: 73px;
}

.subject h2 {
  font-size: 140%;
  line-height: 100%;
  margin: 0 0 2px;
  display: inline;
}

.subject .nickname {
  font-weight: bold;
}

.subject h2 a {
  color: #000;
}
.subject h2 .nickname {
  font-size: 70%;
  color: #777;
  font-weight: normal;
  white-space: nowrap; /* Wrap the whole name on small screens */
}

.subject .note {
  font: italic normal normal 110%/120% Georgia, serif;
  color: #777;
  margin: 2px 0 4px;
  max-width: 30em;
}

/* Avatar */
.subject .photo {
  position: absolute;
  top: 0; left: 0;
  width: 73px;
  height: 73px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

/* Verification/Protection Icons */
.badges {
  display: inline-block;
  *display: inline; *zoom: 1; /* IE6/7 inline-block */
  vertical-align: bottom;
  cursor: default;
}

.badges li {
  width: 23px; height: 23px;
  overflow: hidden;
  color: transparent;
  text-indent: -20em;
  display: inline-block;
  *float: left; /* IE6/7 inline-block. For some raison, doing *display:inline again makes the icons invisible. Thanks, Microsoft. */
  vertical-align: middle;
}

.badges .verified {
  background-image: url(../img/verified.png);
}

.badges .protected {
  background-image: url(../img/sprite-icons.png);
  background-position: -256px -16px;
  height: 10px;
  width: 8px;
  margin-bottom: 3px;

  font-size: 0; /* for IE6, which fills the whole line and doesn't respect the height:10px above */
}

/* Follow Button placement. See tfw-buttons for actual follow button styles. */
.profile .follow-button {
  float: right;
  margin: 0 0 15px 15px;
}

.profile .follow-button button {
  margin-top: -1px; /* Text baseline align with username headline */
}

.profile .follow-button .self,
.profile .follow-button .blocked, {
  line-height: 195%;
}

/** Section: User Stats */
.stats {
  display: block;
}

/* TODO: body class to size profile margin in micro mode based on the number of faces in the pile
   (poss also follow count? > 5 figs, > 7 figs?) */

.stats dl {
  margin: 0; padding: 0;
}

.stats dt {
  display: inline;
  color: #444;
  font-size: 105%;
}
.stats dd {
  display: inline;
  margin: 0;
}
.stats .count {
  color: #444;
  font-weight: bold;
  font-size: 110%;
}

.facepile {
  margin-top: 2px;
}

.facepile li {
  display: inline-block;
  *display: inline; zoom: 1; /* Inline block hack for IE6/7 */
  overflow: hidden;
  width: 24px; height: 24px;
  margin-right: 2px;
}

.facepile li img {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

/** Section: Summary variations */
.profile.summary .stats {
  margin: 20px 0;
}
.profile.summary .stats dl {
  display: inline-block;
  *display: inline; zoom: 1; /* Inline block hack for IE6/7 */
  vertical-align: top;
  width: 190px;
}

/** Section: Protected Tweets */
.protected-box {
  background: #f4f4f4 url(../img/profile_lock.png) no-repeat right bottom;
  color: #333;
  padding: 15px;
  margin: 20px 0;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  min-height: 60px;
  _height: 60px;
}

.protected-box h2 {
  font-size: 120%;
  margin: 0 0 10px 0;
}

.protected-box p {
  width: 85%;
}

.protected-box img {
  float: left;
  margin: 20px 10px 0;
}

/** Section: Small Screen */
@media (max-width: 400px) {
  /** Section: Summary variations */
  .profile.summary .stats {
    margin: 10px 0;
  }
  .profile.summary .stats dl {
    display: inline-block;
    vertical-align: top;
    width: 145px;
  }
  .profile.summary .stats .facepile {
    width: 120px;
    height: 24px;
    overflow: hidden;
  }
}
.button {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background: #ddd url(../img/buttons/bg-btn.gif) repeat-x 0 0;
  border-color: #bbb #bbb #999;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  font: bold 12px/15px Helvetica Neue, Arial, "Lucida Grande", Sans-serif;
  margin: 0;
  overflow: visible;
  padding: 5px 9px 5px 9px;
  text-shadow: 0 1px #F0F0F0;
  color: #333;
  -moz-box-shadow: 0 1px 0 #f8f8f8;
  -wekbit-box-shadow: 0 1px 0 #f8f8f8;
  box-shadow: 0 1px 0 #f8f8f8;
  *display: inline;
  *zoom: 1;
}

.button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.button:focus {
  outline: none;
}

.tweet-button {
  font-weight: 300;
  font-size: 15px;
  padding: 6px 9px;
}

/* =Hover/focus/active
----------------------------------------------- */
.button:hover, .button:focus {
  background-position: 0 -6px;
  border-color: #999 #999 #666;
  color: #000;
  text-decoration: none;
}

.button:active {
  background-image: none;
  text-shadow: none;
  outline: none;
}

.button.selected {
  background-color: #39d;
  background-image: url(../img/buttons/bg-btn-blue.gif);
  background-position: 0 0;
  border-color: #39d #39d #28c;
  color: #fff !important;
  text-shadow: -1px -1px 0 #39d;
}

.button.selected:hover,
.button.selected:focus {
  background-position: 0 -210px !important;
  border-color: #28c;
  -moz-box-shadow: 0 0 8px rgba(82,168,236,.75);
  -webkit-box-shadow: 0 0 8px rgba(82,168,236,.75);
  box-shadow: 0 0 8px rgba(82,168,236,.75);
}

.button.selected:active {
  background-image: none;
}

/* signup button */
.button.sign-up {
  font-weight: bold;
  background-color: #fa2;
  background-image: url(../img/buttons/bg-btn-signup.png);
  background-position: 0 0;
  border: 1px solid #fa2;
  color: #333 !important;
  text-shadow: 0 1px 0 #fe6;
}

.button.sign-up:hover,
.button.sign-up:focus {
  background-position: 0 -5px;
  color: #111;
  text-decoration: none;
  -moz-box-shadow: 0 0 5px #fa2;
  -webkit-box-shadow: 0 0 5px #fa2;
  box-shadow: 0 0 5px #fa2;
}

.button.sign-up:active {
  background-image: none;
}

.button span {
  background-image: url(../img/sprite-icons.png);
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: bottom;
  height: 13px;
  outline: medium none;
  overflow: hidden;
  width: 13px;
  margin-bottom: 2px;
}

.button .trashcan {
  background-position: -128px 0px;
  margin: 0 3px 2px -3px !important;
}

.button .checkmark {
  background-position: -144px 16px;
}

.button .down-arrow {
  background-position:-47px -64px;
  width:7px;
  margin: 0 -1px 0px 3px;
}

.button .down-sprite {
  background-position: -160px -80px;
  height: 9px;
  margin-bottom: 5px;
  width: 10px;
}

.button .up-sprite {
  background-position: -176px -80px;
  height: 9px;
  margin-bottom: 5px;
  width: 10px;
}

.button-active {
  background-image: none;
  text-shadow: none;
}

/** Section: Miscillaneous button icons (Phoenix-style) */
.icon {
  background-image: url(../img/sprite-icons.png);
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: bottom;
  height: 13px;
  width: 13px;
  outline: medium none;
  overflow: hidden;
  margin-bottom: 2px;
}

.delete-icon {
  background-position: -112px 0;
}

.person-icon {
  background-position: -240px -32px;
}

.list-icon {
  background-position: -96px -64px;
  margin-bottom:2px;
}

.blocking-icon {
  background-position: -209px -16px;
  margin-bottom: 4px;
}

.photo-icon {
  background-position: 0 -96px;
  width: 16px;
  height: 14px;
}

.video-icon {
  background-position: -16px -96px;
  width: 16px;
  height: 14px;
}

.reply-icon {
  background-position: -32px -96px;
  width: 14px;
  height: 14px;
}

.device-notifications {
  width: 16px;
  height: 16px;
  background-position: -160px -48px;
  vertical-align: top;
  margin-left: 3px;
  margin-top: 6px;
  cursor: pointer;
}

.device-notifications.notifying {
  width: 16px;
  height: 16px;
  background-position: -48px -48px;
  vertical-align: top;
  margin-left: 3px;
  margin-top: 6px;
  cursor: pointer;
}

.retweet-setting {
  width: 16px;
  height: 16px;
  background-position: -176px -48px;
  vertical-align: top;
  margin-left: 4px;
  margin-top: 6px;
  cursor: pointer;
}

.retweet-setting.including {
  width: 16px;
  height: 16px;
  background-position: -96px -48px;
  vertical-align: top;
  margin-left: 4px;
  margin-top: 6px;
  cursor: pointer;
}

/* loading states */
.protected-box .button {
  margin: 8px;
  padding: 3px 12px 3px 12px;
}

.button.loading {
  color: transparent;
  text-shadow: none !important;
}

.button.loading i {
  display: inline-block;
  margin: 0 4px 0 4px;
  width: 20px;
  background: transparent url(../img/spinner.gif) no-repeat center center;
}

/** Section: Promotional buttons (e.g. sign-up) */
a.promotional,
input.promotional {
  background: #fa2 url(../img/fronts/bg-btn-signup.png) repeat-x 0 0;
  display: block;
  padding: 4px 8px;
  border: 1px solid #fa2;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  color: #333;
  text-shadow: 0 1px 0 #fe6;
  font: bold 16px Helvetica Neue, Arial, Sans-serif;
  cursor: pointer;
  -moz-box-shadow: 0 1px 0 #fff;
  -webkit-box-shadow: 0 1px 0 #fff;
  box-shadow: 0 1px 0 #fff;;
}

a.promotional:hover,
a.promotional:focus,
input.promotional:hover,
input.promotional:focus {
  background-position: 0 -5px;
  color: #111;
}

a.promotional:active,
input.promotional:active {
  background-image: none;
}

/** Section: Disabled button */
.button.disabled,
.button.disabled:hover,
.button.disabled:focus {
  background: #ddd url(../img/buttons/bg-btn.gif) repeat-x 0 0;
  border-color: #ccc;
  cursor: default;
  color: #aaa !important;
}

/** Section: Follow button */

/* Follow and unfollow buttons are both rendered for full compatibility. Only display the relevant version. */
.follow-button form.disabled { display:none; }

.follow-button b {
  display: inline-block;
  vertical-align: bottom;
  width: 15px; height: 15px;
  background: transparent url(../img/sprite-icons.png) no-repeat;
  margin-right: 4px;
  overflow: hidden;
}

/* Blocked */
.follow-button .blocked {
  font-weight: bold;
  color: #000;
}
.follow-button .blocked b {
  background-position: -208px -16px;
}

/* Follow/Request */
.follow-button .follow b {
  background-position: -64px -16px;
}

/* Following/Unfollow */
.follow-button .unfollow .button,
.follow-button.followed .unfollow .button:hover,
.follow-button.followed .unfollow .button:focus {
  background: #00AE3E url(../img/bg-btn-follow.png) left top repeat-x;
  border-color: #393 #393 #277827;
  color: #fff;
  text-shadow: -1px -1px 1px #272;
  text-align: left;
}

.follow-button .unfollow .button,
.follow-button.followed .unfollow .button {
  white-space: nowrap;
}

.follow-button .unfollow .button:hover,
.follow-button .unfollow .button:focus {
  background-color: #C63738;
  background-position: 0 -68px;
  border-color: #a33 #a33 #962C2C;
  color: #fff;
  text-shadow: -1px -1px 1px #77110F;
}

.follow-button .unfollow .button b,
.follow-button.followed .unfollow .button:hover b,
.follow-button.followed .unfollow .button:focus b {
  background-position: -288px -96px;
}

.follow-button .unfollow .button:hover b,
.follow-button .unfollow .button:focus b {
  background-position: -270px -96px;
}
/* Hide the "unfollow" label unless hovering */
.follow-button .unfollow .unfollow,
.follow-button.followed .unfollow .button:hover .unfollow,
.follow-button.followed .unfollow .button:focus .unfollow {
  display: none;
}

.follow-button.followed .unfollow .button:hover .following,
.follow-button.followed .unfollow .button:focus .following {
  display: inline-block;
}

/** Unfollow button focus behavior: "Following" -> "Unfollow" label */
.follow-button .unfollow .button:hover .following,
.follow-button .unfollow .button:focus .following {
  display: none;
}

.follow-button .unfollow .button:hover .unfollow,
.follow-button .unfollow .button:focus .unfollow {
  display: inline-block;
}

.follow-button .cancel-request em {
  font-style: normal; font-weight: bold;
}
.tweet {
  font-size: 15px;
  position: relative;
  zoom: 1; /* booyah!  fix that shit in IE6 */
}

.tweet a:hover,
.tweet a:focus {
  text-decoration: underline;
}

.tweet:last-child {
  border-bottom: none;
}

.tweet-image {
  float: left;
  overflow: hidden;
  margin-top: 3px;
  margin-right: 10px;
}

.tweet-image img {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.tweet-content {
  margin-left: 58px;
  min-height: 48px;
}

.tweet-row {
  display: block;
  position: relative;
  line-height: 15px;
}

.tweet-corner {
  display: inline-block;
  margin-right: 10px;
}

.tweet-full-name {
  color: #999;
  font-size: 12px;
}

a.tweet-screen-name {
  font-weight: bold;
  color: #333;
}
.stream-item a.tweet-screen-name:hover {
  text-decoration: underline;
}

.tweet-user-block-image {
  width: 32px;
  height: 32px;
  float: left;
}

.tweet-user-block-name {
  margin-left: 40px;
  min-height: 36px;
  line-height: 14px;
  padding-top: 2px;
}

.tweet-user-block-screen-name {
  display: inline-block;
  color: #333;
  font-weight: bold;
  margin-top:-1px;
}

.tweet-user-block-full-name {
  display: block;
  font-size: 12px;
  margin-top: 1px;
  color: #999;
}

.tweet hr {
  margin: 20px 0;
}

.tweet .speech-bubble {
  position: absolute;
  margin: -22px 0 0 32px;
  width: 11px;
  height: 6px;
  background: url(../img/divot-bubble.gif) no-repeat;
}

a.tweet-timestamp,
a.tweet-contributors {
  color: #999;
  font-size: 11px;
}
.stream-item a.tweet-timestamp:hover {
  text-decoration: underline;
}

.details-pane-tweet .tweet-timestamp {
 line-height: 1.9;
}

.tweet-source, .tweet-source a {
  color: #999;
  font-size: 11px;
}

.tweet-geo-text {
  color: #999 !important;
  font-size: 11px;
}

span.inlinemedia-icons {
  display: inline-block;
  margin-right: 0 !important;
}

a .geo-pin {
  background: #999 url(../img/sprite-icons.png) no-repeat -305px -97px;
  display: inline-block;
  height: 11px;
  width: 7px;
}

span.geo-pin {
  background: transparent url(../img/sprite-icons.png) no-repeat -224px -64px;
  display: inline-block;
  height: 11px;
  width: 7px;
  margin-right: 3px !important;
  margin-top: 1px !important;
}

.tweet:hover span.geo-pin,
.tweet:focus span.geo-pin {
  background-color: transparent !important;
}

.tweet.with-verbs:hover .tweet-screen-name,
.tweet.with-verbs:hover .tweet-timestamp,
.tweet.with-verbs:hover .tweet-geo-text,
.tweet.with-verbs:hover .user-profile-link {
  color: #2276bb;
  text-decoration: none;
}

.tweet-text {
  padding: 0px 0 0px 0;
  font-family: Arial, "Helvetica Neue", sans-serif;
  line-height: 19px;
  word-wrap: break-word;
}
.tweet-meta {
  color: #999;
  font-size: 11px;
  font-style: normal;
}

.tweet-meta i.at {
  color: #999;
  font-style: normal;
  font-size: 12px;
}

.favorited-icon {
  display: inline-block;
  background:url(../img/sprite-icons.png) no-repeat scroll 0 0 transparent;
  background-position:-64px 0;
  height:15px;
  margin:0 2px 0;
  outline:medium none;
  text-indent:-99999px;
  width:15px;
  display: none;
}

.tweet-meta .reply-icon {
  margin-right: -3px !important;
  margin-bottom: -3px !important;
  text-indent: -9999px;
  vertical-align: baseline;
}

.extra-icons {
  position: absolute;
  top: 0;
  right: 5px;
}

.retweet-icon {
  display: inline-block;
  background: url(../img/sprite-icons.png) no-repeat scroll -32px -96px transparent;
  overflow: hidden;
  width: 15px;
  height: 12px;
  margin-right: -2px !important;
  margin-bottom:-3px !important;
}

.tweet-meta em,
.tweet-meta i {
  font-style: normal;
}

.tweet-meta .photo,
.tweet-meta .video,
.tweet-meta .song,
.tweet-meta .generic {
  position: relative;
  top: 1px;
  width: 16px;
  margin-right: 3px;
  margin-bottom: -3px;
  height: 14px;
  background: url(../img/sprite-icons.png) no-repeat;
  display: inline-block;
  vertical-align: top;
}

.tweet-meta .photo {
  background-position: 0 -96px;
}

.tweet-meta .video {
  background-position: -16px -96px;
}

.tweet-meta .generic {
  width: 12px;
  background-position: -48px -96px;
}

.tweet-meta .song {
  background-position: -128px -96px;
}

.tweet-meta .icons * {
  margin: 0 2px;
}

/* Not crazy about the way this hover state is accomplished */
.tweet .tweet-actions  {
  display: inline-block;
  visibility: hidden;
  _display: none; /* IE6 has issues. Hide these until redesign. */
}

.tweet:hover .tweet-actions,
.tweet:focus .tweet-actions  {
  visibility: visible;
}

.tweet-actions {
  font-size: 11px;
}

.tweet-actions a {
  display: inline-block;
  outline: none !important;
}

.tweet-actions a:hover,
.tweet-actions a:focus {
  text-decoration: none;
}

.tweet-actions a span b {
  font-weight: normal;
}

.tweet-actions a:hover span b,
.tweet-actions a:focus span b {
  text-decoration: underline;
}

.tweet-actions a span i {
  text-indent: -99999px;
  outline: none;
  background: transparent url(../img/sprite-icons.png) no-repeat;
  width: 15px;
  height: 15px;
  margin: 0px 2px 0 2px;
  display: block;
}

.tweet-actions a span i {
  display: inline-block;
  vertical-align: baseline;
  margin-bottom: -3px;
  margin-right: 3px;
  position: relative;
}

/*.tweet-actions {
  display: inline-block;
}
*/
.details-pane-tweet .tweet-user-block-screen-name {
  margin-top: 1px;
}

/* reply */
.tweet-actions .reply-action span i {
  background-position: 0px 0;
  margin-right: 0px;
  margin-left: 3px;
}
.tweet-actions .reply-action:hover span i,
.tweet-actions .reply-action:focus span i {
  background-position: -16px 0;
}

/* delete */
.tweet-actions .delete-action span i {
  background-position: -112px 0;
}

.tweet-actions .delete-action:hover span i,
.tweet-actions .delete-action:focus span i {
  background-position: -128px 0;
}

/* retweet */
.tweet-actions a.unretweet-action {
  display: none;
}
.retweeted .tweet-actions a.unretweet-action {
  display: inline-block;
}
.retweeted .tweet-actions a.retweet-action {
  display: none;
}

.tweet-actions .retweet-action span i {
  background-position: -176px 0;
}

.tweet-actions .retweet-action:hover span i,
.tweet-actions .retweet-action:focus span i {
  background-position: -192px 0;
}

.tweet-actions .unretweet-action span i,
.tweet-actions .unretweet-action:hover span i,
.tweet-actions .unretweet-action:focus span i {
  background-position: -240px 0;
}

/* favorite */
.tweet-actions a.unfavorite-action {
  display: none;
}
.favorited .tweet-actions .unfavorite-action {
  display: inline-block;
}
.favorited .tweet-actions .favorite-action {
  display: none;
}

.tweet-actions .favorite-action span i {
  background-position: -32px 0;
}
.tweet-actions .favorite-action:hover span i,
.tweet-actions .favorite-action:focus span i {
  background-position: -48px 0;
}

.tweet-actions .unfavorite-action span i,
.tweet-actions .unfavorite-action:hover span i,
.tweet-actions .unfavorite-action:focus span i {
  background-position: -64px 0;
}

.favorite-icon,
.retweet-icon {
  text-indent: -99999px;
  outline: none;
  background: transparent url(../img/sprite-icons.png) no-repeat;
  width: 14px;
  height: 14px;
  margin: 0px 2px -1px 2px;
  display: inline-block;
}

.favorite-icon {
  background-position: -48px 0;
}

.retweet-icon {
  background-position: -192px 0;
  width: 15px;
}

.tweet .tweet-corner .tweet-meta .retweet-icon {
  margin-bottom: -2px !important;
}

.tweet:hover .tweet-label,
.tweet:focus .tweet-label {
  opacity: 1;
}

/* Tweet Badges */
.tweet-label {
  background-color: #999;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ccc), to(#aaa));
  background-image: -moz-linear-gradient(top, #ccc, #aaa);
  color: #444;
  margin: 0 10px 0 0;
  padding: 2px 5px;
  text-shadow: 0 1px 1px rgba(255,255,255,.5);
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.25);
  -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.25);
  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.25);
  color: #fff;
  font-size: 11px;
  line-height: 15px;
}
.tweet .tweet-label {
  font-size: 11px;
  display: inline-block;
  margin: 4px 0 0 0;
}
/* Promoted Badge */
.promoted-label {
  background: #ffebbe url(../../images/commercial/garuda-overlay.gif) repeat-x 0 0;
  background-color: #ffebbe;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff39b), to(#ffca7d));
  background: -moz-linear-gradient(top, #fff39b, #ffca7d);
  color: #333 !important;
  box-shadow: inset 0 -1px 0 #e4b775;
  -moz-box-shadow: inset 0 -1px 0 #e4b775;
  -webkit-box-shadow: inset 0 -1px 0 #e4b775;
  text-decoration: none;
}
a.promoted-label:hover,
a.promoted-label:focus {
  text-decoration: none;
}
.tweet:hover .promoted-label,
.tweet:focus .promoted-label {
  background-color: #ffebbe;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffed65), to(#ffad37));
  background: -moz-linear-gradient(top, #ffed65, #ffad37);
  box-shadow: inset 0 -1px 0 #d6902b;
  -moz-box-shadow: inset 0 -1px 0 #d6902b;
  -webkit-box-shadow: inset 0 -1px 0 #d6902b;
}
/* Top Tweets Badge */
.top-tweet-label {
  /* background: #ffebbe url(../images/commercial/garuda-overlay.gif) repeat-x 0 0; */
  background-color: #d7eaf5;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#d7eaf5), to(#b6d8ea));
  background: -moz-linear-gradient(top, #d7eaf5, #b6d8ea);
  color: #333;
  box-shadow: inset 0 -1px 0 #99c5e2;
  -moz-box-shadow: inset 0 -1px 0 #99c5e2;
  -webkit-box-shadow: inset 0 -1px 0 #99c5e2;
}

.simple-tweet-content {
  font-size: 14px;
}
.simple-tweet-content.mini {
  margin-left: 34px;
}
.simple-tweet-content.normal {
  margin-left: 58px;
}
.simple-tweet-content.bigger {
  margin-left: 82px;
}


/* Dog Ear.  So soft. */
.tweet-dogear {
  background: url(../img/tweet-dogear.png) no-repeat 24px 25px;
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 25px;
}

.tweet-dogear-fav {
  background-position: 0 0;
}

.tweet-dogear-rt {
  background-position: 0 -50px;
}

.tweet-dogear-fav.tweet-dogear-rt {
  background-position: 0 -25px;
}
/* This gets added back in only when tweets are displayed in a list. */
.dogear .tweet {
  padding: 0 15px;
}

.recent-tweets {
  margin: 0 -20px;
}
.recent-tweets h2 {
  padding-left: 20px;
}
.recent-tweets .tweet {
  padding: 10px 10px 10px 20px;
  border-top: 1px solid #ebebeb;
}
.recent-tweets .tweet:last-child {
  margin-bottom: -15px;
}
.recent-tweets .tweet-content {
  margin-left: 42px;
}
.tweet-actions form {
  display: inline-block;
}

@media (max-width: 400px) {
  .recent-tweets {
    margin: 0 -10px;
  }

  .recent-tweets h2,
  .recent-tweets .tweet {
    padding-left: 10px;
  }

  .tweet .tweet-actions  {
    visibility: visible;
    float: right;
  }

  .tweet .tweet-actions b {
    display: none;
  }

  .tweet .tweet-actions a  {
    padding: 0 3px;
  }
}
/** Section: OAuth dialog container */

.auth {
  position: relative;
  padding-right: 20px;
  border-right: 1px solid #d6d6d6;
  margin-right: 250px;
  font-size: 110%;
}

.auth h2 {
  font-size: 180%;
  margin-top: 0;
}

/** Section: Application Information Sidebar */

.app-info {
  position: absolute;
  top: 0;
  right: -250px;
  _right: 20px; /* IE6 */
  width: 230px;
  color: #666;

  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: default;

  font-size: 90%;
}

.app-info:hover,
.app-info:focus {
  -webkit-user-select: text;
  -ms-user-select: text;
  -moz-user-select: text;
  -o-user-select: text;
  user-select: text;
  cursor: text;
}

/* Remove focus outline from app-info in all contexts; provide subtler feedback */
.app-info:focus {
  outline: none;
  background: #eee;
  background: rgba(0,0,0,0.02);
}

#bd .app-info h3, .app-info dl {
  margin: 0;
  border: 0;
  padding: 0;
}

.app-info h3 img {
  display: block;
  margin-bottom: 4px;
}

.app-info dt { display: none; }
.app-info dd {
  margin: 3px 0;
  width: 100%;
  overflow-x: hidden;
  overflow: ellipsis;
  text-overflow: ellipsis;
}

.app-info dd p {
  margin: 6px 0;
}

.app-info a.deny::before {
  content: "← ";
}

/** Section: Permission Listings */

.permissions,
.return-links {
  margin: 10px 0;
}

.permissions ul {
  margin: 5px 0 0;
}

.return-links li,
.permissions li {
  list-style: disc outside;
  margin-left: 1.2em;
  line-height: 160%;
}

.permissions.allow strong {
  color: #6cac50;
}

.permissions.deny {
  color: #666;
}
.permissions.deny strong {
  color: #9b3919;
}

/** Section: Auth Form */
#oauth_form {
  display: block;
}

.oauth fieldset {
  padding: 0;
  margin: 10px 0;
  border: 0;
}
.oauth fieldset.buttons input,
.oauth fieldset.buttons a {
  font-size: 130%;
  *font-size: 100%; /* IE6 gets upset about big butt…ons and wraps aggressively. */
  padding: 10px;
  _overflow: visible; /* IE7s button padding goes off for like, no reason */
  margin: 0 10px 5px 0;
  font-weight: bold;
}
.oauth fieldset.buttons {
  margin: 20px 0 15px;
}

.oauth fieldset.buttons,
.oauth fieldset.buttons input[type=submit],
.oauth fieldset.buttons a {
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/* Smaller buttons in some languages */
.oauth.es fieldset.buttons,
.oauth.fr fieldset.buttons {
  font-size: 80%;
}

.oauth legend {
  position: absolute;
  left: -999em;
  padding: 10px 0;
}

#oauth_pin p {
  background-color: #f4f4f4;
  background-color: rgba(200, 200, 200, 0.2);
  padding: 15px 15px 15px 15px;
  margin: 10px 0;

  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: default;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#oauth_pin code {
  display: block;
  margin: 10px 0 0;
  text-align: center;
  font: monospace;
  font-size: 500%;
  font-weight: bold;

  -webkit-user-select: text;
  -ms-user-select: text
  -moz-user-select: text;
  -o-user-select: text;
  user-select: text;
  cursor: text;
}

/** Section: Delay display of manual callback link until after a script delay */
.js .notice.callback h2 {
  background: transparent url(../../images/spinner.gif) right top no-repeat;
  padding-right: 20px;
  margin: 0;
}
.js .notice.callback p {
  _visibility: hidden;
  overflow: hidden;
  opacity: 0;
  height: 0;
  margin: 0;
  -moz-transition: height linear .2s, opacity linear .5s;
  -webkit-transition: height linear .2s, opacity linear .5s;
  -o-transition: height linear .2s, opacity linear .5s;
  transition: height linear .2s, opacity linear .5s;
}

.js.redirect-timeout .notice.callback h2 {
  margin: 0 0 3px;
  background: none; /* Hide the spinner */
}
.js.redirect-timeout .notice.callback p {
  visibility: visible;
  height: auto;
  opacity: 1;
}

/** Section: Narrow Mode */
@media (max-width: 42em) {
  .auth h2 {
    font-size: 130%;
  }
  .oauth fieldset.buttons input,
  .oauth fieldset.buttons a {
    font-size: 110%;
  }

  .auth {
    margin-right: 170px;
  }

  .app-info {
    position: absolute;
    top: 0;
    right: -170px;
    width: 150px;
    font-size: 90%;
  }
  .oauth .sign-in input.text {
    width: 150px;
  }
}
/** Section: Landscape Mobile */
@media (max-height: 320px) {
  .permissions {
    margin: 5px 0;
  }

  .oauth fieldset {
    margin: 0 0 5px;
  }
}

/** Section: Portrait Mobile */
@media (max-width: 400px) {
  .auth {
    margin: 0;
    padding: 0;
    border: 0;
  }
  .auth h2 {
    margin-bottom: 10px;
  }
  .app-info {
    float: none;
    position: static;
    width: auto;
    min-height: 48px;
    margin: 0 -10px;
    padding: 10px 10px 10px 67px;
    border: 1px solid #d6d6d6;
    border-width: 1px 0;
    cursor: pointer;
  }

  .app-info:hover, .app-info:focus {
    cursor: pointer;
  }

  .app-info h3 img {
    width: 48px; height: 48px;
    float: left;
    margin-left: -57px;
  }

  .app-info dd p {
    margin-bottom: 0;
  }

  .app-info .durl,
  .app-info .notes {
    display: none;
  }

  .app-info.expanded dd.durl,
  .app-info.expanded dd.notes {
    display: block;
  }

  .oauth .sign-in input.text {
    width: 260px;
    max-width: 100%;
  }

  .oauth fieldset {
    margin: 0 0 5px;
  }

  .oauth fieldset.buttons input,
  .oauth fieldset.buttons a {
    font-size: 100%;
    padding: 10px;
  }

  .oauth fieldset.buttons {
    margin: 5px 0;
  }
}

/* Windows 8 Authentication Broker Overrides */
.win8-auth {
  background: #fff;
  padding-top: 0;
}
.win8-auth body {
  background: none;
  padding-bottom: 100px;
}
.win8-auth #header { display: none; }
.win8-auth .footer {
  background: #fff;
  border-top: none;
}

.win8-auth body,
.win8-auth button,
.win8-auth .button {
  font-family: "Segoe UI";
}

.win8-auth .auth {
  border: none;
}

@media (min-width: 400px) {
  .win8-auth .app-info {
    margin-top: 110px;
  }
}

.win8-auth .permissions p {
  font-size: 120%;
  margin-bottom: 10px;
}

.win8-auth .permissions.deny {
  margin-top: 40px;
}

.win8-auth .auth h2 {
  font-weight: 300;
  font-size: 220%;
}

.win8-auth fieldset.buttons,
.win8-account-options {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}
.win8-auth fieldset.buttons {
  text-align: right;
  direction: rtl;
  padding: 5px;
  z-index: 1;
}

.win8-account-options {
  position: fixed;
  background: #fff;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 18px 10em 18px 10px;
  z-index: 0;
  border-top: 1px solid #d6d6d6;
}

.win8-account-options a.register {
  padding: 8px;
}

.win8-account-options a.register:link,
.win8-account-options a.register:visited,
.win8-account-options a.register:active,
.win8-account-options a.register:hover {
  background-color: #f6ae0a;
  border: none;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

.win8-auth fieldset.buttons .button,
.win8-auth fieldset.buttons a {
  display: inline-block;
  font-size: 100%;
  padding: 8px;
}

.win8-auth .button {
  border-radius: 0;
  background: #ddd;
  border-color: none;
  text-shadow: none;
  color: #333;
  box-shadow: none;
  font-size: 10px;
}

.win8-auth .button:hover,
.win8-auth .button:focus {
  box-shadow: none;
}

.win8-auth .button.selected {
  background: #39d;
  border-color: none;
  text-shadow: none;
}

@media (max-width: 280px) {
  .bar, #bd, #ft, #promo .inner { min-width: 0; }
  .oauth .sign-in input.text { width: auto; }
  .win8-auth .auth { font-size: 100%; }
  .win8-auth .auth h2 { font-size: 140%; }
  .win8-account-options { height: 70px; }
  .win8-auth fieldset.buttons,
  .win8-account-options { padding: 10px; }
  .win8-auth .permissions { font-size: 100%; }
  .win8-auth .permissions.deny { margin-top: 20px; }
  .win8-account-options a.register,
  .win8-auth fieldset.buttons .button {
    display: block;
    padding: 8px 0;
    margin: 0;
    width: 100%;
    text-align: center;
  }
  .win8-auth .footer { font-size: 80%; }
}