/* The 2006-2007 kriskhaira.com design, kept as a second hidden theme.
   Scoped to html[data-theme="2007"], which js/theme.js sets.
   Values come from the site's own stylesheets as the Wayback Machine archived them
   (/skin/styles/layout.css and sections.css, March 2007); bg.gif and header.jpg
   are the original images (July 2007). 760px cream column on teal stripes. */
html[data-theme="2007"]{color-scheme:light;background:#1d97a5}
html[data-theme="2007"] body{
  display:block;
  padding:0;
  background:#1d97a5 url(/img/2007/bg.gif);
  color:#333;
  font:11px/1.6 "Lucida Grande","Lucida Sans Unicode",Geneva,Verdana,Helvetica,sans-serif;
  -webkit-font-smoothing:auto;
}
html[data-theme="2007"] .card{
  position:relative;
  width:min(760px,100%);
  min-height:100vh;
  margin:0 auto;
  padding-top:30px;
  background:#e9ecd7;
  border:0;
  border-radius:0;
  overflow:hidden;
}
html[data-theme="2007"] .masthead{
  display:block;
  height:117px;
  margin:0 0 20px;
  background:url(/img/2007/header.jpg) right top no-repeat;
  overflow:hidden;
  text-indent:-5000px;
  white-space:nowrap;
}
html[data-theme="2007"] .portrait,
html[data-theme="2007"] .tags{display:none}
html[data-theme="2007"] .name{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
html[data-theme="2007"] .meta{margin:0 10px 0 230px;padding:0}

/* links: the old blue, inverting to white on charcoal */
html[data-theme="2007"] a,
html[data-theme="2007"] .about a,
html[data-theme="2007"] .prose a,
html[data-theme="2007"] .lede a,
html[data-theme="2007"] .list a,
html[data-theme="2007"] .grid a,
html[data-theme="2007"] .pager a{
  color:#007faa;font-weight:bold;text-decoration:none;border:0;
}
html[data-theme="2007"] a:hover,
html[data-theme="2007"] .grid a:hover .t{color:#fff;background-color:#333;text-decoration:none}

/* the nav sat ABOVE the banner: bold Helvetica sections, then lighter "side" links */
html[data-theme="2007"] .nav{
  position:absolute;top:0;left:100px;margin:0;gap:0;
  font:bold 14px Helvetica,Arial,sans-serif;letter-spacing:0;text-transform:none;
}
html[data-theme="2007"] .nav a{display:block;padding:8px 11px;color:#000;border:0}
html[data-theme="2007"] .nav a:hover,
html[data-theme="2007"] .nav a[aria-current]{background:#333;color:#fff}
html[data-theme="2007"] .nav .out{margin-left:24px;gap:0}
html[data-theme="2007"] .nav .out a{font-weight:normal}

html[data-theme="2007"] .role{
  margin:0 0 14px;font-size:11px;letter-spacing:0;text-transform:none;color:#333;
}
html[data-theme="2007"] .about,
html[data-theme="2007"] .cv,
html[data-theme="2007"] .page,
html[data-theme="2007"] .pager{border-top:0;color:#333;font-size:11px;letter-spacing:0}
html[data-theme="2007"] .about,
html[data-theme="2007"] .page,
html[data-theme="2007"] .cv{margin-top:0;padding-top:0}
html[data-theme="2007"] p{line-height:1.9em}

/* section bars: "ABOUT ME" white-on-charcoal strips */
html[data-theme="2007"] .section-title,
html[data-theme="2007"] .cv h2,
html[data-theme="2007"] .year{
  margin:22px 0 10px;
  color:#eee;background:#333;
  font:bold 12px/26px Helvetica,Arial,sans-serif;
  text-transform:uppercase;letter-spacing:0;text-indent:9px;
}
html[data-theme="2007"] .title{
  margin:0 0 8px;
  font:bold 24px/1.2 Helvetica,Arial,sans-serif;color:#666;letter-spacing:0;
}
html[data-theme="2007"] .cv h3,
html[data-theme="2007"] .prose h3,
html[data-theme="2007"] .prose h4{font:bold 12px "Lucida Grande",Geneva,Verdana,sans-serif;color:#333;margin:16px 0 0}
html[data-theme="2007"] .cv .org{color:#333}
html[data-theme="2007"] .when,
html[data-theme="2007"] .cv .when,
html[data-theme="2007"] .list time,
html[data-theme="2007"] .grid .y,
html[data-theme="2007"] .pager small{
  color:#333;font-size:11px;font-weight:bold;letter-spacing:0;text-transform:none;
}
html[data-theme="2007"] .about em{color:#666}
html[data-theme="2007"] .list li{border-top:1px solid #ccc;padding:6px 0}
html[data-theme="2007"] .list li:first-child{border-top:0}

/* images wore a grey mat with a hairline border */
html[data-theme="2007"] .prose img,
html[data-theme="2007"] .shot{background:#eee;border:1px solid #ccc;border-radius:0;padding:9px}
html[data-theme="2007"] .grid .tn{background:#eee;border:1px solid #ccc;border-radius:0;padding:4px}
html[data-theme="2007"] .grid a:hover .tn{background:#ccc;border-color:#aaa}
html[data-theme="2007"] .grid a:hover .t{background:none;color:#007faa}
html[data-theme="2007"] .prose blockquote{border:1px solid #ccc;padding:14px 14px 0;color:#333}
html[data-theme="2007"] .pager{margin-top:20px;padding-top:10px;border-top:1px solid #ccc;font-size:12px}

/* the grey footer bar ran the full width of the column */
html[data-theme="2007"] .foot{
  margin:30px -10px 0 -230px;padding:0 14px;border:0;
  background:#a7a7a7;color:#666;
  font:bold 12px/35px Helvetica,Arial,sans-serif;letter-spacing:0;
}

html[data-theme="2007"] .themes{margin:0 -10px 0 -230px;padding:0 14px 8px;background:#a7a7a7;color:#666;font:bold 12px/24px Helvetica,Arial,sans-serif;letter-spacing:0}
html[data-theme="2007"] .themes button{color:#666;border:0;text-decoration:underline}
html[data-theme="2007"] .themes button:hover,
html[data-theme="2007"] .themes button[aria-pressed="true"]{color:#000;background:none}

@media (max-width:700px){
  html[data-theme="2007"] .card{padding-top:34px}
  html[data-theme="2007"] .masthead{height:88px;background-size:auto 88px;background-position:center top}
  html[data-theme="2007"] .nav{left:0;right:0;flex-wrap:nowrap;font-size:12px}
  html[data-theme="2007"] .nav a{padding:9px 7px}
  html[data-theme="2007"] .nav .out{margin-left:auto}
  html[data-theme="2007"] .meta{margin:0 14px}
  html[data-theme="2007"] .foot{margin:30px -14px 0}
  html[data-theme="2007"] .themes{margin:0 -14px}
}