/* The 2009 kriskhaira.com design, kept as a hidden alternate theme.
   Everything is scoped to html[data-theme="2009"], which js/theme.js sets.
   Wood header, mint page and silhouette are the original template images. */
html[data-theme="2009"]{color-scheme:light;background:#2b0c12}
html[data-theme="2009"] body{
  display:block;
  padding:0;
  background:#2b0c12 url(/img/2009/bg.gif) center top repeat-y;
  color:#222;
  font:12px/1.65 "Lucida Grande","Lucida Sans Unicode",Verdana,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:auto;
}
html[data-theme="2009"] .card{
  position:relative;
  width:min(960px,100%);
  min-height:100vh;
  margin:0 auto;
  background:transparent;   /* the mint column is painted by bg.gif, so the silhouette's own mint matches */
  border:0;
  border-radius:0;
  overflow:visible;
}
html[data-theme="2009"] .masthead{
  display:block;
  height:107px;
  margin:0 0 20px;
  background:#d9a65a url(/img/2009/hd.jpg) left top no-repeat;
  overflow:hidden;
  text-indent:-5000px;
  white-space:nowrap;
}
html[data-theme="2009"] .portrait,
html[data-theme="2009"] .tags{display:none}
html[data-theme="2009"] .name{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
html[data-theme="2009"] .meta{
  max-width:700px;
  min-height:200px;
  padding:0 30px 50px 100px;
  background:url(/img/2009/kris-khaira.jpg) left top no-repeat;
}
html[data-theme="2009"] a,
html[data-theme="2009"] .role a,
html[data-theme="2009"] .nav a,
html[data-theme="2009"] .prose a,
html[data-theme="2009"] .list a,
html[data-theme="2009"] .grid a,
html[data-theme="2009"] .pager a{
  color:#c30;font-weight:bold;text-decoration:none;border:0;
}
html[data-theme="2009"] a:hover,
html[data-theme="2009"] .grid a:hover .t{color:#000;text-decoration:none}

html[data-theme="2009"] .role,
html[data-theme="2009"] .nav{
  font-size:12px;letter-spacing:0;text-transform:none;color:#222;
}
html[data-theme="2009"] .role{margin:0 0 6px}
html[data-theme="2009"] .nav{
  position:absolute;top:34px;right:38px;margin:0;gap:0 16px;
  font:bold 15px "Trebuchet MS",Trebuchet,Helvetica,Arial,sans-serif;text-transform:lowercase;
}
html[data-theme="2009"] .nav .out{margin-left:14px;gap:0 16px}
html[data-theme="2009"] .nav a{color:#3a1408}
html[data-theme="2009"] .nav a:hover,
html[data-theme="2009"] .nav a[aria-current]{color:#c30}

html[data-theme="2009"] .about,
html[data-theme="2009"] .cv,
html[data-theme="2009"] .page,
html[data-theme="2009"] .pager,
html[data-theme="2009"] .foot{border-top:0;color:#222;font-size:12px;letter-spacing:0}
html[data-theme="2009"] .about,
html[data-theme="2009"] .page{margin-top:14px;padding-top:0}
html[data-theme="2009"] .cv{margin-top:18px;padding-top:0}

html[data-theme="2009"] .title,
html[data-theme="2009"] .cv h2,
html[data-theme="2009"] .cv h3,
html[data-theme="2009"] .section-title,
html[data-theme="2009"] .prose h3,
html[data-theme="2009"] .prose h4{
  font-family:"Trebuchet MS",Trebuchet,Helvetica,Arial,sans-serif;
  color:#222;letter-spacing:0;text-transform:none;font-weight:bold;
}
html[data-theme="2009"] .title{font-size:1.6em;margin-bottom:4px}
html[data-theme="2009"] .cv h2,
html[data-theme="2009"] .section-title{font-size:1.2em;margin:20px 0 6px}
html[data-theme="2009"] .cv h3{font-size:1.05em}
html[data-theme="2009"] .cv .org{color:#222}
html[data-theme="2009"] .when,
html[data-theme="2009"] .cv .when,
html[data-theme="2009"] .year,
html[data-theme="2009"] .list time,
html[data-theme="2009"] .grid .y,
html[data-theme="2009"] .pager small{
  color:#666;font-size:11px;font-weight:bold;letter-spacing:0;text-transform:none;
}
html[data-theme="2009"] .list li{border-top:1px dotted #9aa;padding:6px 0}
html[data-theme="2009"] .list li:first-child{border-top:0}

html[data-theme="2009"] .prose img,
html[data-theme="2009"] .shot,
html[data-theme="2009"] .grid .tn{border:5px solid #fff;border-radius:0;background:#fff}
html[data-theme="2009"] .grid a:hover .tn{border-color:#eee}
html[data-theme="2009"] .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
html[data-theme="2009"] .grid .tn.none{color:#9aa}
html[data-theme="2009"] .prose blockquote{border:1px solid #ccc;padding:14px 14px 0;color:#222}
html[data-theme="2009"] .pager{margin-top:30px;padding-top:0;font-size:12px}
html[data-theme="2009"] .foot{color:#666;font-weight:bold;margin-top:34px}

@media (max-width:640px){
  html[data-theme="2009"] .masthead{height:84px;background-size:auto 84px;margin-bottom:12px}
  html[data-theme="2009"] .nav{position:static;margin:0 0 14px;font-size:14px}
  html[data-theme="2009"] .meta{padding:0 18px 40px 70px;background-size:40px auto}
}