/*
 * bartik.css — a hand-written reproduction of the Drupal 7 "Bartik" theme as it
 * was configured on nationbuildingteam.org (2011-2012).
 *
 * Values here were measured from the live server with getComputedStyle rather
 * than guessed, so the copy matches the original at a 960px content width.
 * See docs/notes/theme-reference.md for the measurement table.
 *
 * Bartik's own CSS was served as five minified Drupal aggregates; this file
 * replaces them with only the rules the archived pages actually need.
 */

/* ------------------------------------------------------------------ reset  */
*,
*::before,
*::after { box-sizing: content-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 87.5%;                 /* 14px */
  line-height: 1.5;                 /* 21px */
  color: #4a4a4a;
  word-wrap: break-word;
}

img { border: 0; max-width: 100%; height: auto; }
table { border-collapse: collapse; }

/* --------------------------------------------------------------- helpers  */
.clearfix::after { content: ''; display: table; clear: both; }

.element-invisible,
.element-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
}

/* Bartik's centred 960px column, repeated inside each full-bleed band. */
.section {
  width: 960px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------ page  */
#page-wrapper { background: #24272c; }
#main-wrapper { background: #fff; }

#main {
  padding: 20px 0 40px;
  overflow: hidden;
}

/* Measured on the original: .section is 960px, split 240 / 720, and both columns
   carry 15px of inner gutter — hence 210+30 and 690+30 with content-box sizing.
   The sidebar comes first in the source order (Drupal's "sidebar-first"), so
   both columns simply float left. */
.column.sidebar {
  float: left;
  width: 210px;
  padding: 0 15px;
}

#content {
  float: left;
  width: 690px;
  padding: 0 15px;
}

/* ---------------------------------------------------------------- header  */
#header {
  background: #c2c4c5 linear-gradient(to bottom, #d0d0d0 0%, #c2c4c5 100%);
}

#header .section {
  overflow: hidden;
  padding: 0;
}

/* Padding rather than margin: the original's #logo box measured 75px wide
   (10 + 50px image + 15), which is what positions the site name at x=250. */
#logo {
  display: block;
  float: left;
  margin: 15px 0 0;
  padding: 0 15px 0 10px;
}

#logo img {
  width: 50px;
  height: 82px;
  display: block;
}

#name-and-slogan {
  float: left;
  margin-left: 15px;
  padding-top: 34px;               /* puts #site-name's baseline where the original had it */
}

#site-name {
  margin: 0;
  font-size: 1.821em;              /* ~25.5px */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.2;
}

#site-name a {
  color: #000;
  text-decoration: none;
}

#site-slogan {
  margin: 2px 0 0;
  font-size: 0.929em;              /* ~13px */
  font-style: italic;
  color: #000;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

/* The (now purely decorative) user-login block that sat in the header. */
.region-header { overflow: hidden; }

.block-user {
  float: right;
  width: 264px;
  margin: 15px 15px 0 0;
  font-size: 0.857em;              /* 12px */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Username and Password sat side by side; the fields measured 120px. */
.block-user .form-item {
  display: inline-block;
  margin: 0 6px 4px 0;
  vertical-align: top;
}

.block-user label { display: block; font-weight: bold; color: #000; }

/* border-box here so the pair actually fits the 264px block: two 120px fields
   plus the 6px gutter is 246px. With content-box the padding pushed them to
   272px and Password dropped onto a second row. */
.block-user .form-text { width: 120px; box-sizing: border-box; }
.block-user .item-list ul { margin: 2px 0 0; padding: 0; list-style: none; }
.block-user .item-list li { margin: 0; padding: 0; line-height: 1.4; }
.block-user a { color: #6b3f1e; }
.block-user .form-actions { margin-top: 4px; }

/* Drupal's openid.js revealed the identifier field and swapped these two links
   on click. With no JS here, the block rests in its initial state: the OpenID
   field and the "Cancel OpenID login" link stay hidden. */
.block-user .form-item-openid-identifier,
.block-user .openid-links .user-link { display: none; }

.block-user .openid-links .openid-link a {
  padding-left: 20px;
  background: url('/assets/misc/openid-login-bg.png') no-repeat 0 -2px;
}

/* ------------------------------------------------------------- main menu  */
#main-menu {
  clear: both;
}

#main-menu-links {
  margin: 0;
  padding: 0 15px;                 /* same 15px gutter as the columns below */
  list-style: none;
  overflow: hidden;
}

#main-menu-links li {
  float: left;
  margin: 0 1px;
  padding: 0 1px;
  list-style: none;
}

#main-menu-links a {
  display: block;
  height: 31px;
  line-height: 31px;
  padding: 0 0.743em;              /* ~10.4px */
  font-size: 0.929em;              /* 13px */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #333;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px 8px 0 0;
  text-shadow: 0 1px 0 #eee;
}

#main-menu-links a:hover,
#main-menu-links a:focus { background: rgba(255, 255, 255, 0.85); }

#main-menu-links a.active,
#main-menu-links li.active-trail a { background: #fff; color: #333; }

/* ------------------------------------------------------------ breadcrumb  */
.breadcrumb {
  margin: 0;
  padding: 0 0 0.464em;
  font-size: 0.929em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #4a4a4a;
}

.breadcrumb a { color: #019dc6; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* --------------------------------------------------------- sidebar blocks */
.sidebar .block {
  margin: 0 0 20px;
  padding: 15px 20px;
  background: #fff;
  border: 1px solid #ccc;
  width: 168px;
}

.sidebar .block h2 {
  margin: 0 0 0.535em;
  padding: 0 0 5px;
  font-size: 1.071em;              /* ~15px */
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: normal;
  color: #4a4a4a;
  border-bottom: 1px solid #d6d6d6;
}

.sidebar ul.menu {
  margin: 0;
  padding: 0 0 0 15px;
}

.sidebar ul.menu ul { padding-left: 15px; }

.sidebar ul.menu li {
  margin: 0;
  padding: 0.183em 0.457em 0 0;
  list-style: square url('/assets/misc/menu-leaf.png') outside;
}

/* Drupal marks branch nodes with different bullets; reproduce all three. */
.sidebar ul.menu li.expanded { list-style-image: url('/assets/misc/menu-expanded.png'); }
.sidebar ul.menu li.collapsed { list-style-image: url('/assets/misc/menu-collapsed.png'); }
.sidebar ul.menu li.leaf { list-style-image: url('/assets/misc/menu-leaf.png'); }

.sidebar ul.menu a {
  font-size: 0.914em;              /* ~12.8px */
  line-height: 1.4;
  color: #009cbf;
  text-decoration: none;
}

.sidebar ul.menu a:hover { text-decoration: underline; }
.sidebar ul.menu a.active { color: #000; }

/* ---------------------------------------------------------------- titles  */
h1#page-title,
h1.title {
  margin: 28px 0 14px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 2em;                  /* 28px */
  font-weight: normal;
  line-height: 1.1;
  color: #000;
}

/* Bartik removes the top margin when a breadcrumb precedes the title. */
.breadcrumb + h1#page-title { margin-top: 18px; }

#content h2 {
  margin: 20px 0 10px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.429em;
  font-weight: normal;
  color: #4a4a4a;
}

#content h3 { font-size: 1.17em; font-weight: bold; margin: 1em 0 0.5em; }

/* --------------------------------------------------------------- content  */
.region-content { font-size: 1em; }

.region-content p {
  margin: 0 0 1.286em;
  font-size: 1.071em;              /* ~15px */
  line-height: 1.5;
}

.region-content a { color: #009cbf; text-decoration: none; }
.region-content a:hover,
.region-content a:focus { text-decoration: underline; }

.region-content ul,
.region-content ol { margin: 0 0 1.286em; padding-left: 2em; }

.region-content li { margin: 0 0 0.25em; }

/* Byline: "Submitted by uttam on Mon, 08/22/2011 - 13:14" */
.submitted {
  margin: 0 0 -5px;
  padding: 0;
  font-size: 0.857em;              /* 12px */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #68696b;
}

.submitted a { color: #009cbf; text-decoration: none; }

.node { margin-bottom: 1em; }

.node-teaser {
  padding-bottom: 1em;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 1.5em;
}

.node-teaser h2 {
  margin-top: 0;
  font-size: 1.571em;
}

.node-teaser h2 a { color: #009cbf; text-decoration: none; }

.field-label { font-weight: bold; }
.field-name-taxonomy-forums,
div.field-type-taxonomy-term-reference {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.929em;
  margin: 0.5em 0;
}

ul.links {
  margin: 0.5em 0;
  padding: 0;
  list-style: none;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.929em;
}

ul.links li { display: inline; padding: 0 0.5em 0 0; }

/* ------------------------------------------------------- book navigation  */
.book-navigation {
  margin: 2em 0 1em;
}

.book-navigation .page-links {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  border-top: 1px solid #d3d7d9;
  border-bottom: 1px solid #d3d7d9;
  padding: 0.5em 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.929em;
}

.book-navigation .page-links a { color: #009cbf; text-decoration: none; }
.book-navigation .page-previous { text-align: left; flex: 1; }
.book-navigation .page-up { text-align: center; flex: 0 0 auto; }
.book-navigation .page-next { text-align: right; flex: 1; }

/* -------------------------------------------------------------- comments  */
#comments { margin: 15px 0 0; }

#comments h2.title {
  margin: 1.429em 0 0.714em;
  font-size: 1.429em;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: normal;
  color: #4a4a4a;
}

.comment {
  display: table;
  width: 100%;
  margin-bottom: 20px;
  vertical-align: top;
}

.comment .attribution {
  display: table-cell;
  padding: 0 30px 0 0;
  vertical-align: top;
  overflow: hidden;
}

.comment .attribution .username { white-space: nowrap; color: #009cbf; text-decoration: none; }
.comment .submitted p { margin: 4px 0; font-size: 1.071em; line-height: 1.2; }
.comment .submitted .comment-time { font-size: 0.786em; color: #68696b; }
.comment .submitted .comment-permalink { font-size: 0.786em; }

.comment .comment-text {
  display: table-cell;
  width: 100%;
  padding: 10px 25px;
  border: 1px solid #d3d7d9;
  vertical-align: top;
  position: relative;
}

/* The little speech-bubble notch pointing back at the author column. */
.comment .comment-arrow {
  background: url('/assets/themes/bartik/images/comment-arrow.gif') 0 center no-repeat transparent;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  height: 40px;
  width: 20px;
  margin-left: -47px;
  margin-top: 10px;
  position: absolute;
}

.comment .comment-text h3 {
  margin: 1.17em 0 0.585em;
  padding: 0;
  font-size: 1.17em;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: normal;
}

.comment .comment-text h3 a { color: #009cbf; text-decoration: none; }
.comment .content { font-size: 0.929em; line-height: 1.6; }
.comment .content p { font-size: 1em; margin: 0 0 1em; }
.comment .indented { margin-left: 40px; }

/* ------------------------------------------------------------------ poll  */
.poll { margin: 1em 0; }
.poll .text { margin-top: 0.5em; font-size: 1.071em; }
.poll .bar {
  height: 1em;
  margin: 0.25em 0;
  background: #ddd;
  border: 1px solid #ccc;
}
.poll .bar .foreground { height: 1em; background: #009cbf; }
.poll .percent {
  font-size: 0.857em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #68696b;
}
.poll .total {
  margin-top: 1em;
  font-weight: bold;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.929em;
}

/* ----------------------------------------------------------------- forum  */
table {
  width: 100%;
  margin: 0.5em 0 1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.929em;
}

table th {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #b8bcbf;
  background: #e6e8e9;
  font-weight: bold;
  color: #4a4a4a;
}

table td {
  padding: 8px 10px;
  border-bottom: 1px solid #e5e5e5;
  vertical-align: top;
}

table tr.odd { background: #fff; }
table tr.even { background: #f6f6f6; }

#forum td.container {
  background: #e6e8e9;
  font-weight: bold;
}

#forum td.container .name a { font-size: 1.077em; }
#forum .name a { color: #009cbf; text-decoration: none; }
#forum .description { font-weight: normal; color: #68696b; margin-top: 2px; }
#forum .indent { margin-left: 20px; }
#forum td.topics,
#forum td.posts,
#forum td.replies { text-align: center; white-space: nowrap; }
#forum td.last-reply { white-space: nowrap; color: #68696b; }

/* Drupal serves all forum/topic state icons from one sprite. */
#forum .icon,
.topic-status-default {
  float: left;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  background: url('/assets/misc/forum-icons.png') no-repeat 0 0;
}

#forum .icon.forum-status-default { background-position: -24px 0; }

/* ----------------------------------------------------------------- forms  */
/* The original forms POSTed to Drupal. In this static copy they are inert;
   `.archived-form` exists so that is visually obvious. */
.form-item { margin: 0 0 1em; }
.form-item label { display: block; font-weight: bold; margin-bottom: 2px; }
.form-required { color: #c00; }

.form-text,
.form-textarea,
.form-select {
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.929em;
  color: #4a4a4a;
  background: #fff;
}

/* Scoped to #content on purpose: the original's 500px field width applied to
   in-page forms (comment, contact), not the narrow login block in the header. */
.one-sidebar #content .form-text { width: 500px; max-width: 100%; }
.form-textarea { width: 100%; }

.form-submit {
  padding: 4px 1.5em;
  border: 1px solid #b8bcbf;
  border-radius: 15px;
  background: #f3f4ee linear-gradient(to bottom, #fefefe, #e3e3e3);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.929em;
  color: #3a3a3a;
  cursor: pointer;
}

.archived-form :disabled { background: #f5f5f5; color: #999; cursor: not-allowed; }

.archived-form .description,
.form-item .description {
  font-size: 0.786em;
  line-height: 1.2;
  color: #68696b;
}

fieldset {
  margin: 1em 0;
  padding: 0.5em 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

fieldset legend { font-weight: bold; }

/* Banner marking a form that cannot submit in the static copy. */
.archived-notice {
  margin: 0 0 1.5em;
  padding: 10px 15px;
  border: 1px solid #f0c36d;
  background: #fdf5d9;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.857em;
  line-height: 1.5;
  color: #66512c;
}

.archived-notice a { color: #66512c; text-decoration: underline; }

/* --------------------------------------------------------------- profile  */
.profile { margin: 1em 0; }
.profile h3 {
  margin: 1em 0 0.25em;
  border-bottom: 1px solid #e5e5e5;
  font-size: 1.071em;
}
.profile dt { font-weight: bold; margin-top: 0.5em; }
.profile dd { margin: 0 0 0.5em; }
.user-picture img { border: 1px solid #d3d7d9; }

/* Drupal's "Read more"/pager list markup used by the blog + poll listings. */
.item-list ul { margin: 0.5em 0; padding: 0 0 0 1.5em; }
.item-list ul li { margin: 0 0 0.25em; }

/* ---------------------------------------------------------------- footer  */
#footer-wrapper {
  padding: 35px 5px 30px;
  background: #24272c;
  color: rgba(255, 255, 255, 0.65);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.857em;
}

#footer-wrapper a { color: #fff; }

.region-footer { text-align: center; line-height: 1.6; }

/* ------------------------------------------------------- narrow screens  */
/* Bartik 7 shipped no mobile breakpoints; these are additive only, so the
   desktop rendering above stays byte-for-byte faithful at >=960px. */
@media (max-width: 979px) {
  .section { width: auto; padding: 0 15px; }

  /* The sidebar comes first in the source (Drupal's sidebar-first layout), which
     stacked on a phone would put the whole menu tree above the article. Flex
     ordering moves the content up without touching the desktop DOM. */
  #main {
    display: flex;
    flex-direction: column;
    padding: 15px 0 25px;
  }

  .column.sidebar,
  #content { float: none; width: auto; padding: 0; }

  #content { order: 1; }
  .column.sidebar { order: 2; margin-top: 2em; }

  .sidebar .block { width: auto; }

  /* The login block is 264px of dead form. Drop it below the logo and site name
     rather than letting it squeeze into whatever those two floats leave over.
     The clear has to go on .region-header: its `overflow: hidden` makes it a
     block formatting context, which sidesteps the floats instead of clearing
     them, leaving the block ~50px wide. */
  .region-header { clear: both; overflow: visible; }

  .block-user {
    float: none;
    width: auto;
    margin: 10px 0 0;
    padding-top: 10px;
  }

  #name-and-slogan { padding-top: 20px; }

  #main-menu-links { display: flex; flex-wrap: wrap; padding: 0; }

  .comment,
  .comment .attribution,
  .comment .comment-text { display: block; width: auto; }

  .comment .attribution { padding: 0 0 6px; }
  .comment .comment-arrow { display: none; }

  .one-sidebar .form-text { width: 100%; }

  /* Wide Drupal tables (the forum index) scroll instead of breaking layout. */
  .table-scroll { overflow-x: auto; }
}