/* ==========================================================================
   San Marin Institute (Async-style) — style.css (organized + fully annotated)
   --------------------------------------------------------------------------
   How to navigate this file:
   01) Global / base styles
   02) Page container
   03) Header banner (image + contact/careers + search)
   04) Info strip (location + phone/fax)
   05) Main layout (nav column + content column + divider)
   06) Navigation UI (buttons, split lines, boxes)
   07) Content panels (titles + padding)
   08) Feature block (top story)
   09) News list (Institute News)
   10) Publications list
   11) Education + Visitor blocks (icons + banner image)
   12) Bottom area (seals + affiliation + security links)
   13) Footer
   14) Not Found page helpers

   Tip: if something looks “off”, search for the nearest section header above.
   ========================================================================== */


/* --------------------------------------------------------------------------
   01) Global / base styles
   -------------------------------------------------------------------------- */

body{
  /* Background texture: small dotted GIF (late-90s look). */
  background: #dfeaf7 url("images/bg_dots_blue.gif");
  color: #111;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;

  /* Center the page visually with top/bottom breathing room. */
  margin: 0;
  padding: 18px 0;
}

/* Default link behavior */
a{
  color: #003a73;
  text-decoration: underline;
}
a:hover{
  color: #001f3d;
}


/* --------------------------------------------------------------------------
   02) Page container
   -------------------------------------------------------------------------- */

.page{
  /* “Site width” — adjust if you want a wider layout. */
  width: 860px;

  background: #f7fbff;
  border: 1px solid #3e5f7e;
}

.page-pad{
  /* Internal padding inside the main centered page box */
  padding: 10px;
}


/* --------------------------------------------------------------------------
   03) Header banner (image + contact/careers + search)
   -------------------------------------------------------------------------- */

.banner{
  width: 100%;
  border: 1px solid #2c4f73;
}

.banner-cell{
  /* Height controls how tall your banner area is. */
  height: 110px;

  /* Banner image (replace this file to change the header). */
  background: #2c6aa6 url("images/banner_sanmarin.png") no-repeat left top;
}

/* Contact | Careers row (top-right of banner) */
.banner-links-right{
  /* Adds space so links don’t sit right on top of the search box. */
  padding: 3px 8px 6px 0;
  font-size: 11px;
  color: #ffffff;
}
.banner-links-right a{
  color: #ffffff;
}

/* Search form (bottom-right of banner) */
.search-form{
  margin: 0 8px 8px 0;
  display: inline;
  white-space: nowrap; /* keeps input + GO button on one line */
}

.search-input{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  width: 150px;

  padding: 2px 3px;
  border: 1px solid #ffffff;
}

.search-go{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;

  padding: 2px 6px;
  border: 1px solid #0b2032;
  background: #cfe7ff;
  cursor: pointer;
}


/* --------------------------------------------------------------------------
   04) Info strip (location + phone/fax)
   -------------------------------------------------------------------------- */

.strip{
  margin-top: 8px;
  border: 1px solid #2c4f73;
  background: #cfe7ff;
}

.strip-left,
.strip-right{
  padding: 5px 8px;
  font-size: 11px;
  color: #0f2f4a;

  /* Keeps each side on one line (prevents wrapping into a second line). */
  white-space: nowrap;
}

.strip-left{ width: 70%; }
.strip-right{ width: 30%; }

.strip-sep{
  color: #0f2f4a;
  padding: 0 6px;
}


/* --------------------------------------------------------------------------
   05) Main layout (nav column + content column + divider)
   -------------------------------------------------------------------------- */

.layout{
  margin-top: 10px;
}

/* Left column (Navigation) */
.nav{
  padding-right: 12px;

  /* Thin dashed divider between nav and main content */
  border-right: 1px dashed #7da3c6;
}

/* Right column (Main content area) */
.content{
  padding-left: 12px;
}


/* --------------------------------------------------------------------------
   06) Navigation UI (buttons, split lines, boxes)
   -------------------------------------------------------------------------- */

.nav-title{
  font-weight: bold;
  background: #cfe7ff;
  border: 1px solid #2c4f73;
  padding: 6px 8px;
  margin-bottom: 8px;
  color: #0f2f4a;
}

/* Dashed split used inside nav */
.nav-split{
  margin: 8px 0;
  border-top: 1px dashed #7da3c6;
}

/* “Today at …” image button */
.today-wrap{
  margin: 0 0 8px 0;
}

/* CSS background so the link is clickable across the whole image. */
.today-at{
  display: block;

  /* Set to the *actual* image size for best results */
  width: 202px;
  height: 30px;

  background: url("images/today_at_sanmarin_200x27.png") no-repeat left top;
}
.today-at:hover{
  background-image: url("images/today_at_sanmarin_hover_200x27.png");
}

/* Screen-reader-only text */
.sr{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Beveled nav buttons */
.nav-btn{
  display: block;
  margin: 0 0 6px 0;
  padding: 6px 8px;

  color: #0b2032;
  text-decoration: none;

  background: #e8f4ff;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #2c4f73;
  border-bottom: 1px solid #2c4f73;
}

.nav-btn:hover{
  background: #d1dfeb;
  color: #000;
}

.nav-btn:active{
  border-top: 1px solid #2c4f73;
  border-left: 1px solid #2c4f73;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.nav-btn-lock{
  font-weight: bold;
}

/* Side boxes (Quick Access / Featured Links / Site Notes) */
.box{
  margin-top: 10px;
  border: 1px solid #2c4f73;
  background: #ffffff;
}

.box-title{
  background: #cfe7ff;
  padding: 5px 8px;
  border-bottom: 1px solid #2c4f73;
  font-weight: bold;
  color: #0f2f4a;
}

.small{
  padding: 8px;
  font-size: 11px;
  line-height: 1.35;
}

.muted{ color: #3f5870; }

.counter{
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
}

.linklist{
  margin: 6px 0 0 0;
  padding: 0 0 8px 22px;
}

.thumbs{
  padding: 8px;
}
.thumbs img{
  display: block;
  margin: 0 0 8px 0;
  border: 1px solid #2c4f73;
  background: #fff;
  padding: 2px;
}


/* --------------------------------------------------------------------------
   07) Content panels (titles + padding)
   -------------------------------------------------------------------------- */

.panel{
  border: 1px solid #2c4f73;
  background: #ffffff;
  margin-bottom: 10px;
}

.panel-title{
  border-bottom: 1px solid #2c4f73;
  padding: 6px 8px;
  font-weight: bold;
  letter-spacing: 0.4px;
  color: #0f2f4a;
}

.panel-title-blue{ background: #cfe7ff url("images/bar_blue.gif"); }
.panel-title-green{ background: #d6f3d9 url("images/bar_green.gif"); color: #13451a; }
.panel-title-amber{ background: #fff0c8 url("images/bar_amber.gif"); color: #5a3c00; }

.panel-title-link{
  color: inherit;
  text-decoration: underline;
}

.pad{
  padding: 10px;
}



/* --------------------------------------------------------------------------
   07.5) About section (ONLY affects the About panel near the bottom of index.html)
   -------------------------------------------------------------------------- */

/* About paragraph: adds breathing room so the block doesn't feel jammed. */
.about{
  padding: 10px;
  line-height: 1.55;
  margin: 0 0 10px 0;
}

/* About links: styled as late-90s “tiles” with clear spacing. */
.about-tiles{
  padding: 0 10px 10px 10px; /* matches the general panel interior rhythm */
}

.about-tiles .tile{
  border: 1px solid #2c4f73;
  background: #f3faff;
  padding: 9px 10px;
  vertical-align: top;
}

.about-tiles .tile-title{
  font-weight: bold;
  margin-bottom: 4px;
}

.about-tiles .tile-text{
  font-size: 11px;
  color: #2d2d2d;
  line-height: 1.4;
}

/* Gap row between the two tile rows */
.about-tiles .tile-spacer-row{
  height: 10px;
  font-size: 1px;
  line-height: 1px;
}

/* Wide tile (the third link) spans the full width to avoid the “three tiny columns” problem */
.about-tiles .tile-wide{ width: 100%; }
/* --------------------------------------------------------------------------
   08) Feature block (top story)
   -------------------------------------------------------------------------- */

.featured{
  padding: 10px;
  background: #f3faff;
}

.featured-img{
  border: 1px solid #2c4f73;
  background: #fff;
  padding: 2px;
}

.featured-head{
  font-size: 11px;
  margin-bottom: 6px;
}

.featured-tag{
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  background: #fff;
  border: 1px solid #2c4f73;
  font-size: 10px;
  letter-spacing: 1px;
}

.featured-title{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 6px;
}

.featured-text{
  line-height: 1.4;
  margin-bottom: 8px;
}

.featured-more{
  font-size: 11px;
}


/* --------------------------------------------------------------------------
   09) News list (Institute News)
   -------------------------------------------------------------------------- */

.mid{
  margin-bottom: 10px;
}
.mid-left,
.mid-right{
  width: 50%;
}

/* Each story row */
.news-item{
  padding: 8px 10px;
  border-top: 1px solid #b7cfe6;
  margin: 0;
}
.news-item:first-child{
  border-top: 0;
}

.news-line{
  margin-bottom: 3px;
}

.date{
  font-family: "Courier New", Courier, monospace;
  color: #294a66;
  margin-right: 8px;
}

.news-link{
  font-weight: bold;
  text-decoration: underline;
}

.news-summary{
  font-size: 11px;
  color: #2d2d2d;
}

.new-flag{
  margin-left: 8px;
  font-size: 10px;
  color: #b00000;
  font-weight: bold;
}

.more-link{
  padding: 8px 10px;
  text-align: right;
  font-size: 11px;
}

/* Institute News panel tuning:
   - min-height controls the bottom alignment with the right column
   - “More News…” is pinned to the bottom-right */
.panel-news{
  min-height: 373px; /* if alignment drifts, adjust this one number */
  position: relative;
  padding-bottom: 22px;
}

.panel-news .news-item{
  padding: 12px 10px; /* extra breathing room between stories */
}
.panel-news .news-summary{
  margin-top: 2px;
}

.panel-news .more-link{
  position: absolute;
  bottom: 6px;
  right: 10px;
  padding: 0;
  margin: 0;
  text-align: right;
}


/* --------------------------------------------------------------------------
   10) Publications list
   -------------------------------------------------------------------------- */

.pubs{
  padding: 10px;
}

.pub-code{
  font-family: "Courier New", Courier, monospace;
  color: #294a66;
  padding: 4px 0;
  vertical-align: top;
}

.pub-title{
  padding: 4px 0;
}

.pub-links{
  display: block; /* forces link bracket onto its own line if needed */
  font-size: 11px;
  color: #3f5870;
  margin-top: 2px;
  margin-left: 0;
}


/* --------------------------------------------------------------------------
   11) Education + Visitor blocks
   -------------------------------------------------------------------------- */

.callout{
  line-height: 1.4;
  margin-bottom: 8px;
}

.icon{
  vertical-align: middle;
  margin-right: 6px;
}

.bullets{
  margin: 0;
  padding: 0 0 0 18px;
  line-height: 1.5;
}

/* Education banner image box */
.mini-photo{
  width: 242px;
  margin: 10px auto 0 auto;
  padding: 0;
  border: 1px solid #2c4f73;
  background: #fff;
}
.mini-photo img{
  display: block;
  margin: 0;
}


/* --------------------------------------------------------------------------
   12) Bottom area (seals + affiliation + security links)
   -------------------------------------------------------------------------- */

.bottom{
  margin-top: 10px;
  border-top: 1px solid #2c4f73;
  padding-top: 10px;
}

.seals{
  padding: 2px 0 6px 0;
  text-align: center;
}

.seals img{
  margin: 0 10px;
  border: 0;
  background: none;
}

.affiliation{
  font-size: 11px;
  color: #2b3f52;
  line-height: 1.35;
  max-width: 520px;
  text-align: center;
  margin: 0 auto;
}

.security-links{
  text-align: right;
  padding-top: 6px;
}
.security-main{
  font-weight: bold;
  text-decoration: underline;
}
.security-sub{
  font-size: 11px;
  color: #3f5870;
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   13) Footer
   -------------------------------------------------------------------------- */

.footer{
  margin-top: 10px;
  border-top: 1px solid #2c4f73;
  padding-top: 8px;
}

.footer-left,
.footer-right{
  font-size: 11px;
  color: #2b3f52;
  padding: 6px 2px;
}


/* --------------------------------------------------------------------------
   14) Not Found page helpers
   -------------------------------------------------------------------------- */
/* If you add a special 404 header later, keep it down here. */