/* The Flizz, circa 2006.
   One stylesheet. Fixed-width, centered, pale blue, Lucida Grande.
   The colors are the old default profile palette. */

:root {
  --sky: #9ae4e8;
  --text: #000;
  --link: #0000ff;
  --sidebar-fill: #e0ff92;
  --sidebar-border: #87bc44;
  --muted: #999;
  --rule: #d2dada;
}

* { box-sizing: border-box; }

html { background: var(--sky); }

body {
  margin: 0;
  padding: 0 0 20px;
  background: var(--sky);
  color: var(--text);
  font: 12px/1.35 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); }
a:visited { color: var(--link); }
a:hover { text-decoration: underline; }

img { border: 0; }

h1, h2, h3 { margin: 0; font-weight: normal; }

code { font-family: Monaco, "Courier New", monospace; font-size: 11px; }

#container {
  width: 780px;
  margin: 0 auto;
}

/* ---------- header ---------- */

#header {
  position: relative;
  height: 76px;
}

#logo {
  position: absolute;
  left: 6px;
  top: 16px;
  font: bold 40px/1 "Arial Rounded MT Bold", "Helvetica Rounded", "Trebuchet MS", Arial, sans-serif;
  letter-spacing: -2px;
  color: #1f5f8b;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
#logo:visited { color: #1f5f8b; }
#logo:hover { text-decoration: none; }
#logo .zz { color: #f47b20; }

#logo .beta {
  font: normal 10px "Lucida Grande", Verdana, sans-serif;
  letter-spacing: 0;
  color: #4d8aa6;
  text-shadow: none;
  vertical-align: top;
  margin-left: 4px;
}

#navigation {
  position: absolute;
  right: 4px;
  top: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}
#navigation li { display: inline; margin-left: 12px; }
#navigation a.current { color: #000; font-weight: bold; text-decoration: none; }

/* ---------- flash notice ---------- */

#flash {
  margin: 0 0 8px;
  padding: 7px 10px;
  background: #ffffcc;
  border: 1px solid #e6db55;
  border-radius: 5px;
  text-align: center;
  font-size: 13px;
}
#flash.error { background: #ffebe8; border-color: #dd3c10; }
#flash[hidden] { display: none; }

/* ---------- page ---------- */

#wrapper {
  display: flex;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  min-height: 300px;
}

#content {
  flex: 1;
  min-width: 0;
  padding: 16px 20px 20px;
}

#side {
  width: 205px;
  flex: none;
  padding: 12px 12px 20px;
  background: var(--sidebar-fill);
  border-left: 1px solid var(--sidebar-border);
  font-size: 11px;
}
#side:empty { display: none; }

#footer {
  margin: 12px 0 0;
  text-align: center;
  font-size: 11px;
  color: #333;
}

.loading, .empty, .subtitle, .small { color: #666; }
.loading { padding: 20px 0; }
.empty { font-size: 13px; padding: 12px 0; }
.subtitle { margin: 2px 0 10px; }

.page-heading {
  font-size: 20px;
  margin-bottom: 8px;
}

.timeline-heading {
  font-size: 12px;
  font-weight: bold;
  color: #666;
  margin: 12px 0 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}

.notice-page { padding: 20px 0 40px; }
.notice-page h2 { font-size: 20px; margin-bottom: 10px; }

.noscript { text-align: center; }

/* ---------- forms and buttons ---------- */

input, textarea, button { font-family: inherit; }

input[type=text], input[type=email], input[type=password], input:not([type]), textarea {
  font-size: 13px;
  padding: 3px;
  border: 1px solid #aaa;
  border-top-color: #888;
  background: #fff;
  border-radius: 0;
}

input[type=submit], button {
  font-size: 12px;
  padding: 3px 10px;
  color: #000;
  background: linear-gradient(#fff, #ddd);
  border: 1px solid #999;
  border-radius: 3px;
  cursor: pointer;
}
input[type=submit]:hover:not(:disabled), button:hover:not(:disabled) { border-color: #666; }
input[type=submit]:disabled, button:disabled { color: #999; cursor: default; }

button.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  text-decoration: underline;
  font-size: inherit;
}

/* ---------- "What are you doing?" ---------- */

#status_update_form { margin: 0 0 8px; }

#status_update_form .bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 4px;
}

#status_update_form h3 {
  font: 22px/1.1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.5px;
}

#status-field-char-counter {
  font: 24px/1 Georgia, "Times New Roman", serif;
  color: #ccc;
}
#status-field-char-counter.soon { color: #5c0002; }
#status-field-char-counter.warn { color: #d40d12; }
#status-field-char-counter.over { color: #d40d12; font-weight: bold; }

#status {
  display: block;
  width: 100%;
  height: 3.2em;
  font-size: 14px;
  line-height: 1.3;
  resize: none;
}

#status_update_form .submit { text-align: right; margin-top: 5px; }
#update-submit { font-size: 13px; padding: 3px 14px; }

#currently {
  font-size: 11px;
  color: #666;
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
#currently .entry-date { color: var(--muted); }

/* ---------- timelines ---------- */

ol.statuses, ol.people {
  list-style: none;
  margin: 0;
  padding: 0;
}

.status {
  display: flow-root;
  padding: 8px 0 8px;
  border-bottom: 1px dashed var(--rule);
}

.status .thumb { float: left; margin-right: 10px; }
.status .status-body { display: block; overflow: hidden; min-height: 36px; }
.status.u .status-body { min-height: 0; }

.status .entry-content { font-size: 13px; overflow-wrap: anywhere; }

.status .meta, .latest-status .meta, .permalink .meta, .person .meta {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: var(--muted);
}
.meta a.entry-date, .meta a.entry-date:visited { color: var(--muted); text-decoration: none; }
.meta a.entry-date:hover { text-decoration: underline; }
.meta .reply, .meta .del { margin-left: 6px; }
.meta .del, .meta .del:visited { color: #c00; }

img.avatar { display: block; background: #eee; }
img.avatar.s24 { width: 24px; height: 24px; }
img.avatar.s48 { width: 48px; height: 48px; }
img.avatar.s73 { width: 73px; height: 73px; }

.pagination { padding: 12px 0 0; font-size: 12px; }
.pagination a { margin-right: 12px; }

.more-link { margin: 10px 0 0; }

/* ---------- front page ---------- */

.intro h2 {
  font: 20px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 10px;
}
.intro h2 em { font-style: normal; font-weight: bold; }
.intro p { font-size: 13px; color: #333; margin: 0 0 10px; }

.join-big { margin: 16px 0 18px !important; }
a.join-button, a.join-button:visited {
  display: inline-block;
  padding: 7px 22px;
  font: bold 18px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(#ffac4d, #f47b20);
  border: 1px solid #d0661a;
  border-radius: 5px;
}
a.join-button:hover { background: linear-gradient(#ffb866, #f58a36); }

/* ---------- profile ---------- */

.profile-head {
  display: flow-root;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.profile-head img.avatar { float: left; margin: 0 12px 4px 0; }
.profile-info { overflow: hidden; }
.profile-head h2 {
  font: bold 26px/1.1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

ul.about { list-style: none; margin: 0; padding: 0; font-size: 11px; }
ul.about li { margin: 1px 0; overflow-wrap: anywhere; }
ul.about .label { color: #666; }

.follow-control { margin: 8px 0 0; font-size: 11px; }
.follow-control button[data-action=follow] { font-size: 12px; padding: 3px 14px; }
.follow-control.following { color: #333; }

.latest-status {
  padding: 12px 0 10px;
  border-bottom: 1px dashed var(--rule);
}
.latest-status .entry-content {
  margin: 0;
  font: 20px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow-wrap: anywhere;
}
.latest-status .meta { margin: 4px 0 0; font-size: 11px; }

/* ---------- permalink ---------- */

.permalink { padding: 10px 0 0; }
.permalink .entry-content {
  margin: 0 0 8px;
  font: 26px/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
}
.permalink .meta { font-size: 11px; margin: 0 0 14px; }
.permalink-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.permalink-user .screen-name { font-weight: bold; font-size: 14px; }
.permalink-user .fn { color: #666; }

/* ---------- people ---------- */

.find-people { margin: 0 0 10px; }
.find-people input[type=text] { width: 180px; }

.person {
  display: flow-root;
  padding: 8px 0;
  border-bottom: 1px dashed var(--rule);
}
.person .thumb { float: left; margin-right: 10px; }
.person-body { overflow: hidden; }
.person .screen-name { font-weight: bold; font-size: 13px; }
.person .fn { color: #333; margin-left: 4px; }
.person .adr { color: #666; margin-left: 4px; font-size: 11px; }
.person .adr::before { content: "\2014\00a0"; }
.person .bio { margin: 2px 0 0; overflow-wrap: anywhere; }

/* ---------- sidebar ---------- */

#side .section {
  padding: 0 0 10px;
  margin: 0 0 10px;
  border-bottom: 1px solid #c5e47a;
}
#side .section:last-child { border-bottom: 0; }
#side h1 { font-size: 12px; font-weight: bold; margin: 0 0 5px; }
#side p { margin: 0 0 6px; }

.user-box { display: flex; gap: 8px; align-items: center; }
.user-box .screen-name { font-weight: bold; font-size: 13px; }
.user-box .fn { color: #333; }

ul.stats { list-style: none; margin: 0; padding: 0; font-size: 11px; }
ul.stats li { margin: 2px 0; }
ul.stats a { text-decoration: none; color: #000; }
ul.stats a:hover .label { text-decoration: underline; }
ul.stats .label { color: var(--link); }
ul.stats .num { font-weight: bold; }

.friends { display: flex; flex-wrap: wrap; gap: 2px; }
.view-all { display: block; margin-top: 4px; }

.signin-box input[type=email], .signin-box input[type=password] { width: 100%; font-size: 12px; }
.signin-box label { font-weight: bold; }
.join-small { margin-top: 8px !important; }

/* ---------- settings / sign in / sign up ---------- */

ul.tabs {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 0 4px;
  border-bottom: 1px solid #aaa;
  display: flex;
  gap: 3px;
}
ul.tabs li { margin-bottom: -1px; }
ul.tabs a {
  display: block;
  padding: 3px 12px;
  background: #eee;
  border: 1px solid #aaa;
  border-radius: 4px 4px 0 0;
  text-decoration: none;
}
ul.tabs li.active a { background: #fff; border-bottom-color: #fff; color: #000; font-weight: bold; }
.tab-body { padding-top: 12px; }

.settings-form table { border-collapse: collapse; }
.settings-form th {
  width: 120px;
  padding: 5px 8px 5px 0;
  text-align: right;
  vertical-align: top;
  font-weight: bold;
  font-size: 12px;
  line-height: 22px;
}
.settings-form td { padding: 5px 0; vertical-align: top; line-height: 22px; }
.settings-form td input[type=text], .settings-form td input[type=email],
.settings-form td input[type=password], .settings-form td input:not([type]) { width: 240px; }
.settings-form small { display: block; line-height: 1.3; color: #666; font-size: 11px; margin-top: 2px; }

#username-check.available { color: #390; font-weight: bold; }
#username-check.taken { color: #c00; font-weight: bold; }

/* ---------- narrow screens ----------
   Not a mobile redesign: just the same old page, allowed to be narrow. */

@media (max-width: 800px) {
  #container { width: auto; margin: 0 8px; }
}

@media (max-width: 640px) {
  #header { height: auto; padding: 10px 0 8px; }
  #logo { position: static; font-size: 36px; display: inline-block; }
  #navigation { position: static; margin-top: 8px; }
  #navigation li { margin: 0 10px 0 0; line-height: 1.8; }

  #wrapper { display: block; }
  #content { padding: 12px; }
  #side { width: auto; border-left: 0; border-top: 1px solid var(--sidebar-border); }

  #status { font-size: 16px; } /* keeps iOS from zooming in */
  input[type=text], input[type=email], input[type=password], input:not([type]) { font-size: 16px; }

  .settings-form table, .settings-form tbody, .settings-form tr,
  .settings-form th, .settings-form td { display: block; width: auto; }
  .settings-form th { text-align: left; padding: 6px 0 0; }
  .settings-form td input[type=text], .settings-form td input[type=email],
  .settings-form td input[type=password], .settings-form td input:not([type]) { width: 100%; }

  .permalink .entry-content { font-size: 22px; }
  .latest-status .entry-content { font-size: 17px; }
}