/*
 * PWG customizations of Bootstrap CSS.
 *
 * Colors:
 *
 * - PWG logo color: #4b5aa8
 * - PWG hover color: #394ba8
 * - Highlight color: #b8c3ff
 * - Highlight hover color: #94a4ff
 * - Lowlight color: #262d54
 * - Navigation background: #181814 or rgba(24, 24, 20, 0.9)
 * - Navigation text: #ccccc0
 *
 * Fonts:
 *
 * - Regular text: Arial
 * - Monospace text: Courier New
 */

body {
  font-family: arial, helvetica, sans-serif;
  font-weight: 300;
}
pre, code, kbd, samp, tt {
  font-family: courier new, courier, monospace;
}

code, kbd, samp, tt {
  color: inherit;
  font-size: 100%;
}

a {
  color: #4b5aa8;
}
a:hover {
  color: #394ba8;
}

.badge-pill {
  padding: 3px 11px;
  font-family: times, serif;
  font-style: italic;
}

.btn-primary, .badge-primary {
  color: #fff;
  background-color: #4b5aa8;
  border-color: #4b5aa8;
}

.btn-primary:hover, .badge-primary[href]:hover, .badge-primary[href]:focus {
  color: #fff;
  background-color: #394ba8;
  border-color: #394ba8;
}

.dropdown-menu {
  background: #181814;
  color: #ccccc0;
}
.dropdown-header {
  color: #aaaaa0;
}
.dropdown-menu .dropdown-item {
  color: #ccccc0;
}
.dropdown-menu .dropdown-item:hover {
  background: #303028;
  color: #fffff0;
}
h2.card-title {
  font-size: 125%;
  margin-top: 0px;
}
h3 {
  margin-top: 20px;
}
h3 .badge {
  font-size: 50%;
  margin-left: 10px;
  vertical-align: 5px;
  white-space: nowrap;
}
.navbar {
  background: rgba(24,24,20,.9);
}
.navbar-dark .navbar-nav .nav-link {
  color: #ccccc0;
}
footer {
  background: #181814;
  color: #ccccc0;
  font-size: 80%;
  margin: 0px;
  padding: 10px;
}
footer a {
  color: #b8c3ff;
}
footer a:hover {
  color: #94a4ff;
}
blockquote {
  border-left: solid 2px #505152;
  background: #e7eef1;
  color: black;
  padding: 10px 20px 10px;
}
pre, p.summary {
  border-left: solid 2px #4b5aa8;
  padding-left: 20px;
}
.bg-medium {
  background: #f0f1f2;
}
.jumbotron {
  border: 1px solid rgba(0,0,0,.125);
  padding: 40px 40px 30px;
}
.pwg-logo { float: right; height: 320px; margin-left: 20px; }
.pwg-logo-xs { float: right; height: 80px; margin-left: 10px; }
.pwg-logo-sm { float: right; height: 160px; margin-left: 20px; }
.pwg-logo-md { float: right; height: 240px; margin-left: 20px; }
.pwg-panel { background: white; font-size: 125%; margin: 0px -20px; padding: 30px 10px; }
.pwg-panel h1 { font-size: 250%; }
.pwg-panel:first-child { padding-top: 85px; }
.pwg-note { font-size: 80%; font-style: italic; margin-bottom: 1em; margin-top: 1em; }
ul.nav-pills li { background: #525dbf; border-radius: 5px; color: #ffffff; font-size: 90%; margin-bottom: 5px; margin-right: 5px; }
ul.nav-pills li a { color: #ffffff; }
ul.nav-pills li a:hover { background: #8a8fbf; color: #ffffff; }
.pwg-table { margin-left: auto; margin-right: auto; width: 90%; }
.pwg-table caption { caption-side: top; font-style: italic; font-weight: bold; margin: 10px; text-align: center; }
.pwg-table td { border-bottom: solid 1px #303132; padding: 5px 10px; }
.pwg-table th { border-bottom: solid 2px #303132; padding: 2px 10px; }
.pwg-table-centered td { text-align: center; }
.pwg-base { background: #e0e2ef; color: black; }
.pwg-alt-0 { background: #e7eef1; color: black; }
.pwg-alt-0 .pwg-table { background: #f0f7fa; color: black; }
.pwg-alt-0 .pwg-table caption { color: #505152; }
.pwg-alt-0 .pwg-table td { border-bottom: solid 1px #909192; }
.pwg-alt-0 .pwg-table th { border-bottom: solid 2px #909192; }
.pwg-alt-1 { background: #373e80; color: #ffffff; }
.pwg-alt-1 a:link, .pwg-alt-1 a:hover, .pwg-alt-1 a:visited { color: #cacfff; }
.pwg-alt-1 a.btn, .pwg-alt-1 a.nav-link, .pwg-alt-1 a.badge { color: #fff; }
.pwg-alt-1 .pwg-table { background: #8a8fbf; color: white; }
.pwg-alt-1 .pwg-table caption { color: #cacfef; }
.pwg-alt-1 .pwg-table td { border-bottom: solid 1px #aaafcf; }
.pwg-alt-1 .pwg-table th { border-bottom: solid 2px #aaafcf; }
.pwg-alt-2 { background: #e6e8ff; color: black; }
.pwg-alt-2 .pwg-table { background: #f2f3ff; color: black; }
.pwg-alt-2 .pwg-table caption { color: #505152; }
.pwg-alt-2 .pwg-table td { border-bottom: solid 1px #909192; }
.pwg-alt-2 .pwg-table th { border-bottom: solid 2px #909192; }
.pwg-figure { width: 100%; }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px),
       only screen and (min-device-width: 320px) and (max-device-width: 568px) {
  .pwg-panel { font-size: 100%; padding: 30px 20px; }
  .pwg-panel h1 { font-size: 200%; padding: 30px 20px; }
}

@media print {
  a:link { text-decoration: none; }
  blockquote, footer {
    background: #eee;
    color: #000;
  }
}