@font-face {
  font-family: "Linux Libertine";
  src: url("fonts/LinLibertine_RZ.woff") format("woff");
}

:root {
  --link: #0645ad;
  --border: #a2a9b1;
  --panel-bg: #f8f9fa;
  --tab-border: #a7d7f9;
  --serif: "Linux Libertine", Georgia, Times, serif;
}

/* Base */
html {
  font-family: sans-serif;
  color: #222;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: url(img/body-top.png) repeat-x top left #f6f6f6;
}
img { border: 0; max-width: 100%; vertical-align: middle; }
ul { list-style: none; margin: 0; padding: 0.3em 0 0; }
a, a:visited { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: #b3d4fc; }
.clearfix::after { content: ""; display: table; clear: both; }

h1, h2, h3 {
  color: #000;
  font-weight: normal;
  margin: 0;
  overflow: hidden;
  padding: 0.5em 0 0.17em;
}

/* Fake link: looks like a link, isn't one */
.fakelink {
  color: var(--link);
  cursor: pointer;
}
.fakelink:hover {
  text-decoration: underline;
}

a, a:visited, .fakelink { color: var(--link); text-decoration: none; }
a:hover, .fakelink:hover { text-decoration: underline; }

/* Sidebar */
.sidebar {
  position: absolute;
  width: 9em;
  padding: 3px 1.5em 10px 1.3em;
}
.logo { margin-bottom: 20px; }
.navigation { padding: 0.15em 0 0 0.45em; }
.sidebar h3 {
  font-size: 0.75em;
  color: #4d4d4d;
  margin: 0.5em 0 0;
  padding: 0.25em 0;
  cursor: default;
  border-bottom: 1px solid #d8d8d8;
}
.sidebar li {
  font-size: 0.75em;
  line-height: 1.125em;
  padding: 0.25em 0;
  word-wrap: break-word;
}

/* Header + tabs */
.mainsection { margin-left: 11em; }
.headerLinks {
  text-align: right;
  padding: 0.8em 1.4em;
  font-size: 0.72em;
  color: #777;
  letter-spacing: 0.017em;
}
.headerLinks a { display: inline-block; margin-left: 0.5em; }
.user {
  background: url(img/user-ico.png) no-repeat left top;
  padding-left: 15px;
}

.tabsLeft  { float: left;  line-height: 0; }
.tabsRight { float: right; line-height: 0; }
.tabs ul {
  display: inline-block;
  background: url(img/tab-separator.png) repeat-x top left;
  margin: 0;
  padding: 0 1px 0 0;
}
.tabs li {
  float: left;
  display: inline-block;
  margin: 0 1px 0 0;
  white-space: nowrap;
}
.tabs li a {
  display: block;
  position: relative;
  top: 1px;
  left: 1px;
  padding: 1em 0.5em 0;
  font-size: 0.85em;
  line-height: 2em;
  background: url(img/blue-gradient.png) bottom left repeat-x;
  border-bottom: 1px solid var(--tab-border);
}
.tabs li a.active { background: #fff; border-bottom-color: transparent; }

#simpleSearch {
  float: right;
  width: 267px;
  height: 23px;
  margin: 1em 1em 0 0.5em;
  padding-left: 3px;
  overflow: hidden;
  border: 1px solid #aaa;
  background: linear-gradient(to bottom, #f6f6f6, #fff);
}
#searchInput {
  width: 239px;
  height: 23px;
  vertical-align: top;
  font-size: 0.8em;
  background: transparent;
  border: none;
}
#submitSearch {
  display: inline-block;
  width: 23px;
  height: 23px;
  background: url(img/search.png) center no-repeat;
  cursor: pointer;
}

/* Article */
.article {
  padding: 1.25em 1.5em 1.5em;
  font-size: 0.875em;
  line-height: 1.6;
  background: #fff;
  border: 1px solid var(--tab-border);
  border-right: 0;
}
.article p { margin: 0.5em 0; line-height: inherit; }
.article h1, .article h2 {
  font-family: var(--serif);
  border-bottom: 1px solid var(--border);
}
.article h1 { font-size: 2.3em; line-height: 1.3; margin-bottom: 0.25em; padding: 0; }
.article h2 { font-size: 1.6em; line-height: 1.4em; margin: 0.5em 0; padding-bottom: 0; }
.article h3 { font-size: 1.2em; font-weight: bold; }
.siteSub { font-size: 92%; }
.roleNote { padding: 1em 0 0 1.6em; font-style: italic; }

/* Infobox (floats right, like Wikipedia's person/topic box) */
.infobox {
  float: right;
  clear: right;
  width: 22em;
  margin: 0.5em 0 1em 1.4em;
  border: 1px solid var(--border);
  border-spacing: 0;
  background: var(--panel-bg);
  font-size: 88%;
  line-height: 1.5;
}
.infobox caption {
  caption-side: top;
  padding: 0.3em;
  font-size: 125%;
  font-weight: bold;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-bottom: 0;
}
.infobox th, .infobox td { padding: 0.25em 0.5em; text-align: left; vertical-align: top; }
.infobox th { width: 30%; font-weight: bold; }
.infobox .media { padding: 0.4em; text-align: center; }
.infobox .media img { display: block; margin: 0 auto 0.3em; }
.infobox .section { padding-top: 0.6em; text-align: center; font-weight: bold; }
.infobox ul { padding: 0; }
.infobox .inline li { display: inline; }
.infobox .inline li + li::before { content: " \00b7  "; }

/* Quote box */
.quotebox {
  margin: 1em 2em;
  padding: 0.8em 1em;
  background: var(--panel-bg);
  border: 1px solid var(--border);
}
.quotebox p { margin: 0 0 0.6em; }
.quotebox .source { margin: 0; }
.quotebox .source::before { content: "\2014\00a0"; }
sup.ref a { font-size: 85%; }

/* Contents panel */
.contentsPanel {
  position: relative;
  width: 280px;
  padding: 5px;
  font-size: 95%;
  line-height: 1.7em;
  background: var(--panel-bg);
  border: 1px solid var(--border);
}
.contentsHeader { font-weight: bold; text-align: center; }
.contentsPanel ul { padding: 0 0 5px 5px; }
.contentsPanel ul ul li { padding-left: 25px; }
.contentsPanel li span { display: inline-block; margin-right: 8px; }
.panelToggle {
  position: absolute;
  top: 4px;
  right: 20px;
  padding: 0;
  font: inherit;
  color: var(--link);
  background: none;
  border: 0;
  cursor: pointer;
}
.contentsPanel.minimizedPanel { width: 130px; }
.minimizedPanel ul { display: none; }
.minimizedPanel .contentsHeader { text-align: left; }

/* Link boxes */
.lavenderBox {
  clear: both;
  margin: 1em auto 0;
  padding: 3px;
  font-size: 88%;
  line-height: 1.7em;
  text-align: center;
  background: #fdfdfd;
  border: 1px solid var(--border);
}
.lavenderBox .header {
  margin-bottom: 3px;
  padding: 0.25em 1em;
  font-size: 115%;
  font-weight: bold;
  line-height: 1.5em;
  color: var(--link);
  background: #ccf;
}
.lavenderBox .subtitle { background: #ddf; }
.categories {
  clear: both;
  margin-top: 1em;
  padding: 5px;
  font-size: 1.1em;
  background: var(--panel-bg);
  border: 1px solid var(--border);
}
.linklist a { white-space: nowrap; }
.linklist a::after { content: " · "; font-weight: bold; }
.categories a::after { content: " | "; font-weight: bold; }
.linklist a:last-child::after,
.categories a:last-child::after { content: ""; }

/* Footer */
.pagefooter { padding: 1.5em 1.3em 2em; font-size: 75%; line-height: 2em; }
.pagefooter a { display: inline-block; margin-right: 1em; }

/* Responsive */
@media (max-width: 850px) {
  #searchInput { width: 110px; }
  #simpleSearch { width: 138px; }
}
@media (max-width: 700px) {
  .tabsRight { display: none; }
}
@media (max-width: 550px) {
  .sidebar { width: 6em; padding: 3px 0.5em 10px; }
  .mainsection { margin-left: 7em; }
  .contentsPanel { width: auto; }
  .infobox { float: none; width: auto; margin: 1em 0; }
  .quotebox { margin: 1em 0; }
}
@media (max-width: 400px) {
  #simpleSearch { display: none; }
}

@media print {
  .sidebar, .tabs, .headerLinks, .panelToggle { display: none; }
  .mainsection { margin-left: 0; }
}