body {
  background: #213b57 url(../images/bg.jpg);
}

h1, h2, h3, h4, h5, h6 { color: #0b3059; }

a { color: #f85204; text-decoration: none;}
a:hover { text-decoration: underline; }

#header, #footer { color: #b7c6d6; }
#header a, #footer a { color: #fff; }
#header h1 a, #footer h1 a { color: #fff; }

#logo, #credit { padding: 10px 0 10px 0; max-height: 120px;}
#logo {
  padding-bottom: 5px;
  padding-top: 30px;
  max-height: none;      /* title is longer than "Look at Cook"; don't clip/overlap */
}
#logo img {
  max-height: 80px;
  display: inline;
}
#logo a {
  display: inline;
  font-size: 2.2em;
  vertical-align: bottom;
  font-family: Georgia, serif;
  color: #FEFEFE;
  font-weight: bold;
}

#nav-upper { margin-top: 50px;}

#footer .btn { color: #fff; }

.btn-primary {
  background-color: #7d9abb;
  border-color: #7d9abb;
}

.btn-primary:hover {
  background-color: #1f3a71;
  border-color: #1f3a71;
}

.btn-info {
  background-color: #264870;
  border-color: #264870;
}

.btn-info:hover {
  background-color: #305f98;
  border-color: #305f98;
}

.btn-warning {
  background-color: #7C99BC;
  border-color: #7C99BC;
}

.btn-warning:hover {
  background-color: #7C99BC;
  border-color: #7C99BC;
}

#readme {
  display: none;
  left: 0px;
  position: absolute;
  top: 320px;
}

#timeline-chart { height: 300px; }

#main-chart {
    min-height: 300px;
}

#breadcrumbs { font-weight: bold; font-size: 20px; }

/* Breakdown table */
#breakdown a { cursor: pointer; }
#breakdown .num { text-align: right; }
#breakdown td, #breakdown th { border: 1px solid #ddd; font-size: 14px; padding: 0.3em 10px; }
#breakdown th { background: #dddddd; font-size: 12px; font-weight: bold; text-align: left; }
#breakdown th.charts { width: 50%; }
#breakdown th.controls { width: 20px; }
#breakdown th span { color: #7d9abb; cursor: pointer; }

#breakdown th.sorting_asc span {
  background: url(../images/sort-up.png) no-repeat 100% 50%;
  padding-right: 10px;
}

#breakdown th.sorting_desc span {
  background: url(../images/sort-down.png) no-repeat 100% 50%;
  padding-right: 10px;
}

/* Bars */
  .bars span { border-style: solid; border-width: 5px 0; display: block; height: 1px; margin: 1px 0; text-indent: -5000px;}

.bars .budgeted {
    background: none repeat scroll 0 0 #264870;
    border-color: #264870;
}
.bars .spent {
    background: none repeat scroll 0 0 #7d9abb;
    border-color: #7d9abb;
}

  /* Colors */
  .appropriations { color: #264870; }
  .expenditures { color: #7d9abb; }
  .bars .appropriations { background: #264870; border-color: #264870; }
  .bars .expenditures { background: #7d9abb; border-color: #7d9abb; }

/* Expanded rows */
#breakdown .expanded-content td {
  border-top: 0;
  padding-top: 20px;
}

#breakdown .expanded-head td {
  border-top: 2px solid #7f7f7f;
  font-weight: bold;
}

.expanded-primary { float: left; width: 48%; margin-left: 10px; }
.expanded-secondary { float: left; width: 48%; }

/* Nav */
#breakdown-nav { margin-top: -1px;}
#breakdown-nav a { display: block; padding: 0.4em 1em 0.3em; }
#breakdown-nav li { float: left; padding: 0.4em 1em 0.3em; }
#breakdown-nav li.current { background: #264870; color: #fff; }
#breakdown-nav li.current a {  color: #fff; }
#breakdown-nav ul { list-style: none; margin: 0; }

#department-search { margin: 50px 0 10px 0; }
#department-search a { color: #fff; }

/* Scorecard */
#scorecard { border-top: 3px solid #dddddd; margin: 0; }
#scorecard h2 { font-size: 20px; }
#scorecard h2, #scorecard p { margin: 0; }
#scorecard td { border: 1px solid #ddd; border-bottom: 0; padding: 0.8em 10px; width: 25%; }
#scorecard td#scorecard-desc { width: 50%; }

/* Stats */
.stats { list-style: none; margin: 0 0 0.5em 0; }
.stats { padding: 0; }
.stats li { display: inline; margin-right: 1em; white-space: nowrap; padding: 0;}
.stats strong { font-size: 25px; }

/* Sparklines */
.sparkline { height: 120px; margin-bottom: 10px; }

.well {
  background-color: #fff;
}

.about { font-size: 16px;}

/* ---------------------------------------------------------------------------
   Mobile responsiveness (phones, ≤ 640px).
   The look-at-cook toolkit is desktop-first: on a phone the data tables were
   wider than the viewport and pushed the whole page sideways. These rules keep
   the tables inside the phone screen instead of overflowing it.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Safety net: any residual table width scrolls inside its own white card,
     so the page body itself never scrolls horizontally. */
  .well { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Scorecard summary: stack the three cells (title + the two dollar figures)
     vertically so each big number gets full width instead of being clipped. */
  #scorecard, #scorecard tbody, #scorecard tr, #scorecard td { display: block; }
  #scorecard td,
  #scorecard td#scorecard-desc { width: auto; padding: 0.6em 10px; border-bottom: 1px solid #ddd; }
  #scorecard tr td:last-child { border-bottom: 0; }
  #scorecard h2 { font-size: 18px; }

  /* Breakdown table: hide the redundant "Adopted vs. Itemized" bar column
     (the two dollar columns already carry those numbers) and tighten the cells
     so Category + Adopted + Itemized fit a phone width. */
  #breakdown thead th:nth-child(4),
  #breakdown tbody > tr > td:nth-child(4),
  #breakdown th.charts { display: none; }
  #breakdown td, #breakdown th { font-size: 12px; padding: 0.3em 6px; }

  #breadcrumbs { font-size: 16px; }
}