/* The 30 soft_blue pages link ONLY this stylesheet - they never reference
   global.css (measured: zero overlap between the two sets). Without this
   import they get no base typography, no link colours, and none of the
   missing-image handling, so the decorative "Blue Boxes" gifs and attachment
   icons render as broken-image placeholders. Must stay the first rule in the
   file: @import is only valid before any other statement. */
@import url("/repository/designs/baseLegos/ELEMENTS/global.css");

/* ---------------------------------------------------------------------------
   softblue.css - RECONSTRUCTION.
   Skin for the earlier (2007-2010) MELF template: 30 restored pages.

   Never archived - see global.css header. Unlike the later template this one
   left a lot of evidence behind in presentational attributes, so most of the
   palette here is literal rather than inferred:

     <body link="#B5C4DD" alink="#F9C480" vlink="#F9C480">
     <td width="61" bgcolor="#5276B1">          left margin rail
     <td class="navbar" bgcolor="#6484B9">      nav cells
     <td width="1" bgcolor="#F9C480">           tan accent stripe beside nav
     <div class="title">Minnesota Early Learning Foundation</div>

   The three decorative "Blue Boxes" gifs (topleft, tiptop, leftmargin) carried
   the header's blue; they are hidden by global.css, so the blue is restored
   here with background colour on the cells that held them.

   Fixed width in the original was 770px.
   --------------------------------------------------------------------------- */

body.normal {
  background: var(--shell);
}

/* ---- outer shell: centre the 770px table ------------------------------- */

body.normal > table {
  margin: 20px auto !important;
  background: var(--page);
  box-shadow: 0 1px 4px rgba(32, 44, 60, 0.14);
}

body.normal > table table {
  border-collapse: collapse;
}

/* ---- masthead ---------------------------------------------------------- */

/* The title cell sat between the two decorative blue gifs; with those hidden
   the cell itself carries the blue. */
td.title {
  background: var(--blue-deep) !important;
  color: #fff !important;
  padding: 26px 14px 14px !important;
  border-right: 0 !important;
}

td.title div.title,
div.title {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 24px;
  line-height: 1.15;
  color: #fff;
}

td.title .slogan,
.slogan {
  color: var(--tan);
  font-size: 13px;
}

/* The masthead's blue came entirely from topleft.gif + tiptop.gif, which sat in
   two unclassed <td>s with no bgcolor of their own. With the gifs hidden those
   cells render white and punch a gap out of the header, so the cell that held
   each one carries the blue instead. */
td:has(> img[alt="Blue Boxes"]) {
  background: var(--blue-deep);
}

/* The 61px rail already carries bgcolor="#5276B1" inline; make sure it does
   not collapse now that leftmargin.gif is hidden. */
td[bgcolor="#5276B1"],
td[bgcolor="#5276b1"] {
  min-width: 22px;
  background: var(--blue-deep) !important;
}

/* ---- navigation -------------------------------------------------------- */

.navbar {
  padding: 0 !important;
}

.navbar a,
a.navbar {
  display: block;
  padding: 7px 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #fff !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.navbar a:hover {
  background: var(--blue-deep);
  color: #fff !important;
}

.navCell {
  padding: 0 !important;
  vertical-align: top;
}

/* Sub-navigation under the current section. */
.subnavbar,
.subnavDivTag {
  background: #eaeff7;
}

.subnavbar a,
.subnavDivTag a,
.subSectionLink {
  display: block;
  padding: 5px 10px 5px 18px;
  font-size: 11px;
  color: var(--blue-deep) !important;
  text-decoration: none;
  border-bottom: 1px solid #dbe3ef;
}

.subnavbar a:hover,
.subnavDivTag a:hover,
.subSectionLink:hover {
  background: #dce5f3;
  text-decoration: underline;
}

/* ---- main content region ---------------------------------------------- */

.allButTop {
  background: var(--page);
  padding: 18px 20px 24px;
  vertical-align: top;
}

.allButTop p {
  margin: 0 0 1em;
}

.searchboxheader {
  background: var(--blue-mid);
  color: #fff;
  font-weight: bold;
  font-size: 11px;
  padding: 5px 8px;
}

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 820px) {
  body.normal > table,
  body.normal > table > tbody > tr > td {
    width: auto !important;
    max-width: 100%;
  }

  body.normal > table {
    margin: 0 auto !important;
  }

  td[bgcolor="#5276B1"],
  td[bgcolor="#5276b1"] {
    display: none;
  }

  td.title {
    padding: 18px 14px 12px !important;
  }

  td.title div.title,
  div.title {
    font-size: 19px;
  }
}