@charset "UTF-8";
/* ================ reset.scss ================================================================ */
/* derived from */
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,300,400,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);
@import url(https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i);
html, body, div, span, applet, object, iframe,
h1,
main p.subtitle, h2, main .front-grid .contents h3, main .front-grid .pattern-list h3, main #SignificantRevisions summary, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

/* remember to define focus styles! */
:focus {
  outline: 0; }

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none; }

del {
  text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0; }

div.clear {
  clear: both; }

/* ................ */
/*
tw-grey is hsl(145, 5%, 52%)
*/
@font-face {
  font-family: 'Marydale';
  src: url("/fonts/marydale/marydale-webfont.eot");
  src: url("/fonts/marydale/marydale-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/marydale/marydale-webfont.woff") format("woff"), url("/fonts/marydale/marydale-webfont.ttf") format("truetype"), url("/fonts/marydale/marydale-webfont.svg#marydaleregular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'FontAwesome';
  src: url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot");
  src: url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.woff") format("woff"), url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.ttf") format("truetype"), url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.svgfontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }

.icon-twitter:before {
  content: "";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased; }

.icon-rss:before {
  content: "";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased; }

.icon-bars:before {
  content: "";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased; }

.icon-help:before {
  content: "";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased; }

.icon-close:before, .navmenu .close:before {
  content: "⨉"; }

.icon-tag:before {
  content: "";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased; }

table.dark-head {
  font-family: Open Sans, sans-serif;
  border: solid thin #070D4A; }
  table.dark-head tbody {
    font-size: 80%; }
  table.dark-head td {
    vertical-align: middle;
    padding: 5px 2em; }
  table.dark-head th {
    background-color: #070D4A;
    color: white;
    padding: 1em 1.6em;
    text-align: left; }
  table.dark-head tr:nth-child(even) {
    background-color: #F7F8FE; }

table.borders {
  background-color: #F7F8FE;
  font-family: Open Sans, sans-serif;
  font-size: 90%;
  padding: 0.5em 1em;
  border: 2px solid #0f1872; }
  table.borders th, table.borders td {
    padding: 0.5em;
    border: thin solid #cad0f8; }
  table.borders th {
    border-bottom: 2px solid #0f1872; }

/* ==== global ================================ */
main .photo, main div.fullPhoto, main .figure, main .photo-right {
  font-size: 80%;
  font-style: italic;
  max-width: 100%; }
  main .photo p.credit, main div.fullPhoto p.credit, main .figure p.credit, main .photo-right p.credit {
    color: #808080;
    font-size: 80%;
    text-align: right; }
  main .photo p.photoCaption, main div.fullPhoto p.photoCaption, main .figure p.photoCaption, main .photo-right p.photoCaption {
    min-height: 1em; }

main div.fullPhoto, main .figure {
  float: none;
  margin: 1em 0; }

main .photo-right {
  float: right;
  margin: 1em -250px 1em 1em; }

main img {
  max-width: 100%; }

main img.full-size {
  max-width: none; }

main .article-card {
  font-size: 80%; }
  @media (max-width: 599px) {
    main .article-card {
      font-size: 19px; } }
  main .article-card h3 {
    font-size: 130%;
    font-weight: bold; }
    main .article-card h3 a {
      border: none; }
      main .article-card h3 a:hover {
        text-decoration: underline; }
  main .article-card summary h3 {
    display: inline; }
  main .article-card:before {
    display: block;
    background-color: #070D4A;
    height: 3px;
    border-right: 3px solid #ef5ba1;
    content: ""; }
  main .article-card .meta {
    font-family: Open Sans, sans-serif;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "cr tp" "cr ln" "cr dt" "mo mo" "tg tg"; }
    main .article-card .meta p {
      margin: 0; }
  main .article-card .credits {
    grid-area: cr;
    font-weight: bold; }
  main .article-card .date {
    grid-area: dt;
    font-weight: 600;
    color: #A9A7A7;
    font-family: Open Sans, sans-serif; }
  main .article-card .type {
    grid-area: tp;
    font-weight: 600;
    color: #A9A7A7;
    font-family: Open Sans, sans-serif;
    text-transform: uppercase; }
  main .article-card .length {
    grid-area: ln;
    font-weight: 600;
    color: #A9A7A7;
    font-family: Open Sans, sans-serif; }
  main .article-card a.more {
    font-family: Open Sans, sans-serif;
    font-weight: bold;
    color: #ef5ba1;
    border: none; }
    main .article-card a.more:hover {
      text-decoration: underline; }
  main .article-card p.more {
    margin: 1em 0;
    grid-area: mo;
    font-family: Open Sans, sans-serif;
    font-weight: bold;
    color: #ef5ba1; }
    main .article-card p.more a {
      border: none; }
      main .article-card p.more a:hover {
        text-decoration: underline; }
    main .article-card p.more a:hover {
      color: #ef5ba1; }
  main .article-card .tags {
    grid-area: tg; }
    main .article-card .tags a {
      border: none; }
      main .article-card .tags a:hover {
        text-decoration: underline; }
  main .article-card .picture p {
    font-style: italic; }
  main .article-card .book-cover {
    max-height: 250px; }

html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

body {
  font-size: 16px; }

main {
  line-height: 1.5;
  font-family: Open Sans, sans-serif; }

.error {
  background-color: rgba(253, 147, 151, 0.34); }

.todo {
  background-color: rgba(255, 255, 0, 0.3); }

.draft-notice {
  border: thin solid red;
  font-family: sans-serif;
  margin: 1em 10%;
  padding: 0.5em;
  text-align: center; }
  .draft-notice h1, .draft-notice main p.subtitle, main .draft-notice p.subtitle {
    font-size: 120%;
    color: black; }
  .draft-notice p {
    color: red; }

.clickable, a:hover, a.permalink {
  text-decoration: underline;
  cursor: pointer; }

a {
  color: inherit;
  text-decoration: none; }

a:hover {
  color: #3546E5; }

a.button {
  color: white;
  background: #9ca9f3;
  font-family: Open Sans, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  padding: 5px;
  border-radius: 5px;
  margin: 2px;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  vertical-align: middle; }
  a.button:hover {
    background: #6f81ed; }

a.permalink {
  color: #3546E5;
  border: none !important;
  text-decoration: none !important; }
  a.permalink:before {
    content: "#"; }

.tag-link {
  color: #3546E5;
  text-transform: uppercase; }
  .tag-link:before {
    content: " ";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased; }

/* ................................................................ */
@font-face {
  font-family: 'FontAwesome';
  src: url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot");
  src: url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.woff") format("woff"), url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.ttf") format("truetype"), url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.svgfontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }

.icon-twitter:before {
  content: "";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased; }

.icon-rss:before {
  content: "";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased; }

.icon-bars:before {
  content: "";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased; }

.icon-help:before {
  content: "";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased; }

.icon-close:before, .navmenu .close:before {
  content: "⨉"; }

.icon-tag:before {
  content: "";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased; }

/* ==== banner ================ */
#banner {
  border-right: 30px solid #ef5ba1;
  display: grid;
  background-color: #070D4A;
  background-position: left 60px top;
  height: 100px;
  font-family: Open Sans, sans-serif;
  color: white;
  grid-template-columns: 2fr 2fr 60px;
  grid-template-areas: "lg sh nb" "tm tm .";
  grid-template-rows: 1fr 1.5em; }
  #banner .search {
    grid-area: sh;
    text-align: right;
    padding-top: 10px;
    padding-right: 30px; }
    #banner .search .button {
      cursor: pointer;
      background-color: transparent;
      color: white;
      width: 24px;
      font-size: 100%;
      border: none; }
      #banner .search .button:before {
        content: "";
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
        text-decoration: inherit;
        -webkit-font-smoothing: antialiased; }
    #banner .search input.field {
      width: 15em; }
  #banner .name-logo {
    grid-area: lg;
    padding-left: 10px; }
  #banner .navmenu-button {
    grid-area: nb;
    font-size: 36px;
    padding-right: 5px; }
  #banner .icon:hover {
    text-decoration: none; }
  #banner a:hover {
    color: #ef5ba1; }
  #banner .top-menu {
    font-family: Lora, serif;
    grid-area: tm;
    text-align: right;
    font-size: 16px; }
    #banner .top-menu ul {
      float: right;
      list-style-image: none;
      list-style-position: outside;
      list-style-type: none;
      margin: 0;
      padding: 0; }
    #banner .top-menu ul li {
      float: left;
      padding-right: 18px; }
  @media screen and (max-width: 600px) {
    #banner {
      grid-template-columns: 1fr 60px;
      grid-template-areas: "lg nb"; }
      #banner .search, #banner .top-menu {
        display: none; } }

/* ................................................................ */
/* ==== footer ================ */
#page-footer {
  font-family: Open Sans, sans-serif;
  border-right: 30px solid #ef5ba1;
  position: relative;
  background-color: #070D4A;
  color: white;
  min-height: 80px; }
  #page-footer a {
    color: white;
    text-decoration: none; }
  #page-footer div.copyright {
    display: block;
    font-size: 80%;
    position: absolute;
    bottom: 5px;
    left: 5px; }
    #page-footer div.copyright a:hover {
      padding-top: 5px;
      color: #ef5ba1;
      text-decoration: underline; }
  @media screen and (min-width: 600px) {
    #page-footer {
      min-height: 60px; }
      #page-footer div.copyright {
        left: auto;
        right: 60px; } }
  #page-footer .tw-logo {
    position: absolute;
    left: 5px;
    top: 15px; }
    #page-footer .tw-logo img {
      width: 200px; }
  #page-footer .menu-button {
    position: absolute;
    right: 30px;
    top: 5px;
    font-size: 200%; }

/* ................................................................ */
.navmenu {
  border-right: 30px solid #ef5ba1;
  padding: 5px;
  color: white;
  background-color: #070D4A;
  font-size: 16px;
  font-family: Open Sans, sans-serif;
  line-height: 36px; }
  .navmenu .nav-head {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-areas: ".  sh  cl"; }
  .navmenu .nav-body {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "tp ab ct fd  tw"; }
  .navmenu h2, .navmenu main .front-grid .contents h3, main .front-grid .contents .navmenu h3, .navmenu main .front-grid .pattern-list h3, main .front-grid .pattern-list .navmenu h3, .navmenu main #SignificantRevisions summary, main #SignificantRevisions .navmenu summary {
    column-span: all;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px; }
  .navmenu .search {
    grid-area: sh; }
  .navmenu .closediv {
    grid-area: cl;
    text-align: right; }
  .navmenu .topics {
    grid-area: tp;
    column-count: 2; }
    .navmenu .topics p {
      font-family: Lora, serif; }
  .navmenu .about {
    grid-area: ab; }
  .navmenu .content {
    grid-area: ct; }
  .navmenu .tw {
    grid-area: tw; }
  .navmenu .feeds {
    grid-area: fd; }
  .navmenu a:hover {
    color: #ef5ba1; }
  .navmenu .search {
    display: block; }
    .navmenu .search .button {
      cursor: pointer;
      background-color: transparent;
      color: white;
      width: 24px;
      font-size: 100%;
      border: none; }
      .navmenu .search .button:before {
        content: "";
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
        text-decoration: inherit;
        -webkit-font-smoothing: antialiased; }
    .navmenu .search input.field {
      width: 10em; }
  .navmenu .close {
    color: white;
    cursor: pointer;
    padding-right: 0.5em; }
    .navmenu .close:hover {
      color: #ef5ba1; }
  .navmenu .icon-close, .navmenu .close {
    font-size: 200%; }
  @media screen and (min-width: 600px) {
    .navmenu .search {
      display: none; } }
  @media screen and (max-width: 800px) {
    .navmenu .nav-head {
      grid-template-areas: "sh  sh  cl"; }
    .navmenu .nav-body {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "sh cl" "tp tp" "ab ct" "fd  tw"; } }

/* ==== framing ================ */
main, #banner, #page-footer, .navmenu {
  margin-left: 5px;
  margin-right: 5px;
  max-width: 960px; }
  @media screen and (min-width: 750px) {
    main, #banner, #page-footer, .navmenu {
      margin-left: 20px; } }

main {
  background-color: white;
  min-height: 500px;
  margin-bottom: 1em; }
  main::after {
    clear: both;
    content: "";
    display: block; }

#top-navmenu {
  display: none; }

#bottom-navmenu {
  display: block; }

.navmenu-button {
  cursor: pointer; }

/* ................................................................ */
.short-front {
  font-family: Open Sans, sans-serif;
  width: 400px;
  float: left;
  margin-bottom: 3em; }
  .short-front p {
    font-size: 90%;
    margin: 0.5em 0; }
  .short-front .author .photo, .short-front .author main div.fullPhoto, main .short-front .author div.fullPhoto, .short-front .author main .figure, main .short-front .author .figure, .short-front .author main .photo-right, main .short-front .author .photo-right {
    float: left;
    margin-right: 10px;
    width: 60px; }
    .short-front .author .photo img, .short-front .author main div.fullPhoto img, main .short-front .author div.fullPhoto img, .short-front .author main .figure img, main .short-front .author .figure img, .short-front .author main .photo-right img, main .short-front .author .photo-right img {
      width: 60px; }
  .short-front p.date {
    font-weight: bold; }

main h1, main p.subtitle {
  font-size: 200%;
  font-weight: normal;
  margin: 1em 0;
  line-height: 1.6; }

main p.subtitle {
  font-size: 120%; }

main hr.topSection {
  display: block;
  background-color: #070D4A;
  height: 10px;
  border-right: 10px solid #ef5ba1;
  content: "";
  width: 70%;
  margin: 5em 0 0 0; }

main div#topImage {
  float: right;
  margin: 0 0 1em 20px;
  clear: both;
  width: 220px;
  font-size: 80%;
  font-style: italic;
  font-family: Open Sans, sans-serif; }
  main div#topImage img {
    width: 220px; }

main p.abstract {
  /* prose mixin */
  line-height: 1.6;
  color: #303633;
  font-family: Lora, serif;
  font-style: italic;
  margin-bottom: 2em; }
  main p.abstract h1, main p.abstract p.subtitle, main p.abstract h2, main p.abstract .front-grid .contents h3, main .front-grid .contents p.abstract h3, main p.abstract .front-grid .pattern-list h3, main .front-grid .pattern-list p.abstract h3, main p.abstract #SignificantRevisions summary, main #SignificantRevisions p.abstract summary, main p.abstract h3, main p.abstract h4, main p.abstract h5 {
    font-weight: bold; }
  main p.abstract h1, main p.abstract p.subtitle {
    font-size: 200%; }
  main p.abstract h2, main p.abstract .front-grid .contents h3, main .front-grid .contents p.abstract h3, main p.abstract .front-grid .pattern-list h3, main .front-grid .pattern-list p.abstract h3, main p.abstract #SignificantRevisions summary, main #SignificantRevisions p.abstract summary {
    font-size: 150%; }
  main p.abstract h3 {
    font-size: 120%; }
  main p.abstract p, main p.abstract h1, main p.abstract p.subtitle, main p.abstract h2, main p.abstract .front-grid .contents h3, main .front-grid .contents p.abstract h3, main p.abstract .front-grid .pattern-list h3, main .front-grid .pattern-list p.abstract h3, main p.abstract #SignificantRevisions summary, main #SignificantRevisions p.abstract summary, main p.abstract h3, main p.abstract h4, main p.abstract h5 ul {
    margin: 1em 0; }
  main p.abstract a {
    border-bottom: thin solid;
    padding-bottom: 1px; }
  main p.abstract a:hover {
    text-decoration: none; }
  main p.abstract .img-link a, main p.abstract a.img-link {
    border-bottom: none; }
  main p.abstract dd {
    margin-left: 2em; }
  main p.abstract ul {
    list-style: square;
    margin-left: 1.5em; }
  main p.abstract ol {
    list-style: decimal;
    margin-left: 1.5em; }
  main p.abstract pre {
    font-size: 90%;
    font-family: Inconsolata, monospace; }
  main p.abstract code {
    font-family: Inconsolata, monospace; }
  main p.abstract span.credit {
    color: #808080;
    font-size: 80%; }
  main p.abstract hr {
    border: none;
    display: block;
    background-color: #070D4A;
    height: 3px;
    border-right: 3px solid #ef5ba1;
    content: "";
    margin: 10px 15px; }
  main p.abstract blockquote {
    /* margin-left: 3em; */
    border-left: 2px solid #0f1872;
    padding-left: 1em;
    font-style: italic;
    margin-left: 2em; }

main .twitter-card {
  width: 250px;
  font-size: 80%;
  font-style: italic;
  margin-bottom: 2em; }
  @media (min-width: 960px) {
    main .twitter-card {
      float: right;
      margin-right: -310px; } }

main p.date {
  font-weight: 600;
  color: #A9A7A7;
  font-family: Open Sans, sans-serif;
  margin: 1em 0; }

main hr {
  display: block;
  background-color: #070D4A;
  height: 3px;
  border-right: 3px solid #ef5ba1;
  content: ""; }

main .front-grid {
  font-family: Open Sans, sans-serif; }
  @media (min-width: 600px) {
    main .front-grid {
      display: grid;
      grid-template-areas: "aut con" "tag con" "tra con" "tbx con";
      grid-template-columns: 1fr 2fr;
      grid-gap: 2em;
      padding: 1em 0;
      font-size: 90%; } }
  @media (min-width: 600px) and (min-width: 900px) {
    main .front-grid {
      width: 800px; } }
  main .front-grid .translations {
    grid-area: tra; }
  main .front-grid .tags {
    grid-area: tag; }
  main .front-grid .translations, main .front-grid .tags {
    margin: 2em 0 3em 0; }
    main .front-grid .translations p, main .front-grid .tags p {
      margin: 0.5em 0;
      line-height: 1.6; }
  main .front-grid div.topBox {
    grid-area: tbx;
    margin: 2em 0;
    font-size: 90%; }
  main .front-grid div.translations b {
    grid-area: tra;
    text-transform: uppercase;
    color: #3546E5;
    font-weight: 600; }
  main .front-grid .contents, main .front-grid .pattern-list {
    grid-area: con;
    font-weight: 600;
    line-height: 1.6;
    /* to add bullet points to contents entries remove the `ul ul` margin
       rule, remove `list-style-type none` from li (will pick up square
       from global) and add `margin-left: 1.5em;` to li */ }
    main .front-grid .contents a, main .front-grid .pattern-list a {
      color: #3546E5; }
    main .front-grid .contents ul, main .front-grid .pattern-list ul {
      margin: 0;
      -webkit-padding-start: 0; }
    main .front-grid .contents ul ul, main .front-grid .pattern-list ul ul {
      margin: 0 1.2em; }
    main .front-grid .contents li, main .front-grid .pattern-list li {
      list-style-type: none; }
    main .front-grid .contents h2, main .front-grid .pattern-list h2, main .front-grid .contents h3, main .front-grid .pattern-list h3, main .front-grid .contents #SignificantRevisions summary, main #SignificantRevisions .front-grid .contents summary, main .front-grid .pattern-list #SignificantRevisions summary, main #SignificantRevisions .front-grid .pattern-list summary {
      font-size: 100%;
      font-weight: bold;
      margin: 0.5em 0;
      text-transform: uppercase; }
    main .front-grid .contents h3, main .front-grid .pattern-list h3 {
      margin: 0.5em 0; }
    main .front-grid .contents .contents-expand, main .front-grid .pattern-list .contents-expand {
      color: white;
      background: #9ca9f3;
      font-family: Open Sans, sans-serif;
      font-style: normal;
      font-weight: bold;
      font-size: 14px;
      padding: 5px;
      border-radius: 5px;
      margin: 2px;
      white-space: nowrap;
      cursor: pointer;
      border: none;
      vertical-align: middle;
      float: right;
      margin: 0 100px 0 0; }
      main .front-grid .contents .contents-expand:hover, main .front-grid .pattern-list .contents-expand:hover {
        background: #6f81ed; }

main .author-list {
  grid-area: aut;
  display: grid;
  grid-row-gap: 3em; }

main .author img {
  max-width: 80px; }

main .author p {
  margin-left: 0;
  font-size: 90%; }

main .author .bio {
  /* prose mixin */
  line-height: 1.6;
  color: #303633;
  font-family: Lora, serif; }
  main .author .bio h1, main .author .bio p.subtitle, main .author .bio h2, main .author .bio .front-grid .contents h3, main .front-grid .contents .author .bio h3, main .author .bio .front-grid .pattern-list h3, main .front-grid .pattern-list .author .bio h3, main .author .bio #SignificantRevisions summary, main #SignificantRevisions .author .bio summary, main .author .bio h3, main .author .bio h4, main .author .bio h5 {
    font-weight: bold; }
  main .author .bio h1, main .author .bio p.subtitle {
    font-size: 200%; }
  main .author .bio h2, main .author .bio .front-grid .contents h3, main .front-grid .contents .author .bio h3, main .author .bio .front-grid .pattern-list h3, main .front-grid .pattern-list .author .bio h3, main .author .bio #SignificantRevisions summary, main #SignificantRevisions .author .bio summary {
    font-size: 150%; }
  main .author .bio h3 {
    font-size: 120%; }
  main .author .bio p, main .author .bio h1, main .author .bio p.subtitle, main .author .bio h2, main .author .bio .front-grid .contents h3, main .front-grid .contents .author .bio h3, main .author .bio .front-grid .pattern-list h3, main .front-grid .pattern-list .author .bio h3, main .author .bio #SignificantRevisions summary, main #SignificantRevisions .author .bio summary, main .author .bio h3, main .author .bio h4, main .author .bio h5 ul {
    margin: 1em 0; }
  main .author .bio a {
    border-bottom: thin solid;
    padding-bottom: 1px; }
  main .author .bio a:hover {
    text-decoration: none; }
  main .author .bio .img-link a, main .author .bio a.img-link {
    border-bottom: none; }
  main .author .bio dd {
    margin-left: 2em; }
  main .author .bio ul {
    list-style: square;
    margin-left: 1.5em; }
  main .author .bio ol {
    list-style: decimal;
    margin-left: 1.5em; }
  main .author .bio pre {
    font-size: 90%;
    font-family: Inconsolata, monospace; }
  main .author .bio code {
    font-family: Inconsolata, monospace; }
  main .author .bio span.credit {
    color: #808080;
    font-size: 80%; }
  main .author .bio hr {
    border: none;
    display: block;
    background-color: #070D4A;
    height: 3px;
    border-right: 3px solid #ef5ba1;
    content: "";
    margin: 10px 15px; }
  main .author .bio blockquote {
    /* margin-left: 3em; */
    border-left: 2px solid #0f1872;
    padding-left: 1em;
    font-style: italic;
    margin-left: 2em; }

main .author p.name {
  color: #ef5ba1;
  font-weight: 600;
  font-size: 100%;
  margin: 1em 0; }

/* pages to check
http://localhost:1963/articles/programs-in-product-mode.html
  design dead 
not just standing up
short front matter

*/
body {
  overflow-x: hidden !important; }

main {
  max-width: 650px;
  padding: 0 5px;
  font-size: 16px;
  font-family: Lora, serif; }
  main .paperBody {
    clear: both;
    font-size: 16px; }
  main .paperBody.deep > section > h2, main .front-grid .contents .paperBody.deep > section > h3, main .front-grid .pattern-list .paperBody.deep > section > h3, main #SignificantRevisions .paperBody.deep > section > summary {
    font-size: 170%;
    margin-top: 0; }
    main .paperBody.deep > section > h2::before, main .front-grid .contents .paperBody.deep > section > h3::before, main .front-grid .pattern-list .paperBody.deep > section > h3::before, main #SignificantRevisions .paperBody.deep > section > summary::before {
      display: block;
      background-color: #070D4A;
      height: 10px;
      border-right: 10px solid #ef5ba1;
      content: "";
      width: 70%;
      margin-top: 5em; }
  main .paperBody.deep h3 {
    font-size: 120%;
    margin-top: 2em; }
  main .paperBody.deep section:first-child h2, main .paperBody.deep section:first-child .front-grid .contents h3, main .front-grid .contents .paperBody.deep section:first-child h3, main .paperBody.deep section:first-child .front-grid .pattern-list h3, main .front-grid .pattern-list .paperBody.deep section:first-child h3, main .paperBody.deep section:first-child #SignificantRevisions summary, main #SignificantRevisions .paperBody.deep section:first-child summary {
    margin-top: 3em; }
    main .paperBody.deep section:first-child h2::before, main .paperBody.deep section:first-child .front-grid .contents h3::before, main .front-grid .contents .paperBody.deep section:first-child h3::before, main .paperBody.deep section:first-child .front-grid .pattern-list h3::before, main .front-grid .pattern-list .paperBody.deep section:first-child h3::before, main .paperBody.deep section:first-child #SignificantRevisions summary::before, main #SignificantRevisions .paperBody.deep section:first-child summary::before {
      display: none; }
  main .paperBody.shallow h2, main .paperBody.shallow .front-grid .contents h3, main .front-grid .contents .paperBody.shallow h3, main .paperBody.shallow .front-grid .pattern-list h3, main .front-grid .pattern-list .paperBody.shallow h3, main .paperBody.shallow #SignificantRevisions summary, main #SignificantRevisions .paperBody.shallow summary {
    font-size: 150%; }
  main .paperBody, main .appendix {
    /* prose mixin */
    line-height: 1.6;
    color: #303633;
    font-family: Lora, serif; }
    main .paperBody h1, main .paperBody p.subtitle, main .paperBody h2, main .paperBody .front-grid .contents h3, main .front-grid .contents .paperBody h3, main .paperBody .front-grid .pattern-list h3, main .front-grid .pattern-list .paperBody h3, main .paperBody #SignificantRevisions summary, main #SignificantRevisions .paperBody summary, main .paperBody h3, main .paperBody h4, main .paperBody h5, main .appendix h1, main .appendix p.subtitle, main .appendix h2, main .appendix .front-grid .contents h3, main .front-grid .contents .appendix h3, main .appendix .front-grid .pattern-list h3, main .front-grid .pattern-list .appendix h3, main .appendix #SignificantRevisions summary, main #SignificantRevisions .appendix summary, main .appendix h3, main .appendix h4, main .appendix h5 {
      font-weight: bold; }
    main .paperBody h1, main .paperBody p.subtitle, main .appendix h1, main .appendix p.subtitle {
      font-size: 200%; }
    main .paperBody h2, main .paperBody .front-grid .contents h3, main .front-grid .contents .paperBody h3, main .paperBody .front-grid .pattern-list h3, main .front-grid .pattern-list .paperBody h3, main .paperBody #SignificantRevisions summary, main #SignificantRevisions .paperBody summary, main .appendix h2, main .appendix .front-grid .contents h3, main .front-grid .contents .appendix h3, main .appendix .front-grid .pattern-list h3, main .front-grid .pattern-list .appendix h3, main .appendix #SignificantRevisions summary, main #SignificantRevisions .appendix summary {
      font-size: 150%; }
    main .paperBody h3, main .appendix h3 {
      font-size: 120%; }
    main .paperBody p, main .paperBody h1, main .paperBody p.subtitle, main .paperBody h2, main .paperBody .front-grid .contents h3, main .front-grid .contents .paperBody h3, main .paperBody .front-grid .pattern-list h3, main .front-grid .pattern-list .paperBody h3, main .paperBody #SignificantRevisions summary, main #SignificantRevisions .paperBody summary, main .paperBody h3, main .paperBody h4, main .paperBody h5 ul, main .appendix p, main .appendix h1, main .appendix p.subtitle, main .appendix h2, main .appendix .front-grid .contents h3, main .front-grid .contents .appendix h3, main .appendix .front-grid .pattern-list h3, main .front-grid .pattern-list .appendix h3, main .appendix #SignificantRevisions summary, main #SignificantRevisions .appendix summary, main .appendix h3, main .appendix h4, main .appendix h5 ul {
      margin: 1em 0; }
    main .paperBody a, main .appendix a {
      border-bottom: thin solid;
      padding-bottom: 1px; }
    main .paperBody a:hover, main .appendix a:hover {
      text-decoration: none; }
    main .paperBody .img-link a, main .paperBody a.img-link, main .appendix .img-link a, main .appendix a.img-link {
      border-bottom: none; }
    main .paperBody dd, main .appendix dd {
      margin-left: 2em; }
    main .paperBody ul, main .appendix ul {
      list-style: square;
      margin-left: 1.5em; }
    main .paperBody ol, main .appendix ol {
      list-style: decimal;
      margin-left: 1.5em; }
    main .paperBody pre, main .appendix pre {
      font-size: 90%;
      font-family: Inconsolata, monospace; }
    main .paperBody code, main .appendix code {
      font-family: Inconsolata, monospace; }
    main .paperBody span.credit, main .appendix span.credit {
      color: #808080;
      font-size: 80%; }
    main .paperBody hr, main .appendix hr {
      border: none;
      display: block;
      background-color: #070D4A;
      height: 3px;
      border-right: 3px solid #ef5ba1;
      content: "";
      margin: 10px 15px; }
    main .paperBody blockquote, main .appendix blockquote {
      /* margin-left: 3em; */
      border-left: 2px solid #0f1872;
      padding-left: 1em;
      font-style: italic;
      margin-left: 2em; }
    main .paperBody .sidebar, main .paperBody .soundbite, main .appendix .sidebar, main .appendix .soundbite {
      font-size: 80%;
      background-color: #F7F8FE;
      padding: 1em; }
      @media (min-width: 900px) {
        main .paperBody .sidebar, main .paperBody .soundbite, main .appendix .sidebar, main .appendix .soundbite {
          float: right;
          margin: 0 -250px 0 2em; } }
      @media (min-width: 900px) {
        main .paperBody .sidebar, main .paperBody .soundbite, main .appendix .sidebar, main .appendix .soundbite {
          width: 20em; } }
      main .paperBody .sidebar h2, main .paperBody .soundbite h2, main .paperBody .sidebar .front-grid .contents h3, main .front-grid .contents .paperBody .sidebar h3, main .paperBody .soundbite .front-grid .contents h3, main .front-grid .contents .paperBody .soundbite h3, main .paperBody .sidebar .front-grid .pattern-list h3, main .front-grid .pattern-list .paperBody .sidebar h3, main .paperBody .soundbite .front-grid .pattern-list h3, main .front-grid .pattern-list .paperBody .soundbite h3, main .paperBody .sidebar #SignificantRevisions summary, main #SignificantRevisions .paperBody .sidebar summary, main .paperBody .soundbite #SignificantRevisions summary, main #SignificantRevisions .paperBody .soundbite summary, main .paperBody .sidebar h3, main .paperBody .soundbite h3, main .appendix .sidebar h2, main .appendix .soundbite h2, main .appendix .sidebar .front-grid .contents h3, main .front-grid .contents .appendix .sidebar h3, main .appendix .soundbite .front-grid .contents h3, main .front-grid .contents .appendix .soundbite h3, main .appendix .sidebar .front-grid .pattern-list h3, main .front-grid .pattern-list .appendix .sidebar h3, main .appendix .soundbite .front-grid .pattern-list h3, main .front-grid .pattern-list .appendix .soundbite h3, main .appendix .sidebar #SignificantRevisions summary, main #SignificantRevisions .appendix .sidebar summary, main .appendix .soundbite #SignificantRevisions summary, main #SignificantRevisions .appendix .soundbite summary, main .appendix .sidebar h3, main .appendix .soundbite h3 {
        font-size: 120%;
        margin-top: 0; }
      main .paperBody .sidebar .credit, main .paperBody .soundbite .credit, main .appendix .sidebar .credit, main .appendix .soundbite .credit {
        font-style: italic;
        text-align: right; }
    main .paperBody .soundbite, main .appendix .soundbite {
      font-size: 110%;
      font-style: italic;
      width: 20em; }
      main .paperBody .soundbite p, main .appendix .soundbite p {
        margin: 0; }
      main .paperBody .soundbite i, main .appendix .soundbite i {
        font-weight: bold; }
    main .paperBody .book-sidebar, main .appendix .book-sidebar {
      font-size: 80%;
      background-color: #F7F8FE;
      padding: 1em;
      max-width: 300px; }
      @media (min-width: 900px) {
        main .paperBody .book-sidebar, main .appendix .book-sidebar {
          float: right;
          margin: 0 -250px 0 2em; } }
      @media (min-width: 900px) {
        main .paperBody .book-sidebar, main .appendix .book-sidebar {
          width: 20em; } }
      main .paperBody .book-sidebar img.cover, main .appendix .book-sidebar img.cover {
        width: 130px;
        margin-left: 35px; }
      main .paperBody .book-sidebar.no-text, main .appendix .book-sidebar.no-text {
        background-color: transparent;
        border-color: transparent; }
    main .paperBody .tweet-sidebar, main .appendix .tweet-sidebar {
      font-size: 80%;
      background-color: #F7F8FE;
      padding: 1em;
      background-color: transparent; }
      @media (min-width: 900px) {
        main .paperBody .tweet-sidebar, main .appendix .tweet-sidebar {
          float: right;
          margin: 0 -250px 0 2em; } }
      @media (min-width: 900px) {
        main .paperBody .tweet-sidebar, main .appendix .tweet-sidebar {
          width: 20em; } }
      @media (min-width: 900px) {
        main .paperBody .tweet-sidebar, main .appendix .tweet-sidebar {
          width: 350px; } }
    main .paperBody blockquote.aside, main .appendix blockquote.aside {
      font-size: 80%;
      background-color: #F7F8FE;
      padding: 1em; }
      @media (min-width: 900px) {
        main .paperBody blockquote.aside, main .appendix blockquote.aside {
          float: right;
          margin: 0 -250px 0 2em; } }
      @media (min-width: 900px) {
        main .paperBody blockquote.aside, main .appendix blockquote.aside {
          width: 20em; } }
    main .paperBody pre, main .appendix pre {
      font-size: 90%;
      line-height: 1.4; }
      main .paperBody pre span.highlight, main .appendix pre span.highlight {
        color: #ef5ba1;
        font-weight: bold; }
      main .paperBody pre span.deleted, main .paperBody pre pre.deleted, main .appendix pre span.deleted, main .appendix pre pre.deleted {
        color: #ef5ba1;
        text-decoration: line-through; }
      main .paperBody pre span.suffix, main .appendix pre span.suffix {
        font-style: italic; }
      main .paperBody pre span.lnum, main .appendix pre span.lnum {
        color: #3546E5; }
    main .paperBody p.code-label, main .appendix p.code-label {
      margin-bottom: 0;
      font-style: italic;
      font-size: 90%; }
    main .paperBody .next-installment, main .paperBody .installment-target, main .appendix .next-installment, main .appendix .installment-target {
      margin-top: 2em;
      background-color: #F7F8FE;
      padding: 10px;
      font-style: italic;
      font-size: 110%; }
    main .paperBody .code-remark, main .appendix .code-remark {
      font-size: 80%;
      margin-left: 3em;
      font-style: italic;
      border-left: thin solid #0f1872;
      padding-left: 0.5em; }
    main .paperBody .code-href a, main .appendix .code-href a {
      color: #80c9cf;
      font-size: 80%; }
    main .paperBody .p-sub, main .appendix .p-sub {
      margin-left: 2em;
      font-size: 80%; }
    main .paperBody .foot-ref, main .appendix .foot-ref {
      color: #3546E5; }
      main .paperBody .foot-ref a, main .appendix .foot-ref a {
        border: none; }
    main .paperBody .article-card, main .appendix .article-card {
      font-size: 80%;
      background-color: #F7F8FE;
      padding: 1em;
      background-color: #F7F8FE;
      padding: 1em;
      width: 320px; }
      @media (min-width: 900px) {
        main .paperBody .article-card, main .appendix .article-card {
          float: right;
          margin: 0 -250px 0 2em; } }
      @media (min-width: 900px) {
        main .paperBody .article-card, main .appendix .article-card {
          width: 20em; } }
      main .paperBody .article-card h3, main .appendix .article-card h3 {
        margin-top: 1em; }
      main .paperBody .article-card .abstract, main .appendix .article-card .abstract {
        font-style: normal; }
      main .paperBody .article-card:after, main .appendix .article-card:after {
        display: block;
        background-color: #070D4A;
        height: 3px;
        border-right: 3px solid #ef5ba1;
        content: "";
        margin-top: 1em; }
    main .paperBody .final, main .appendix .final {
      margin-top: 4em; }
      main .paperBody .final::first-letter, main .appendix .final::first-letter {
        font-size: 300%;
        line-height: 1em;
        padding-top: 0;
        float: left;
        padding-right: 3px;
        color: #0f1872; }
  main hr.bodySep {
    display: block;
    background-color: #070D4A;
    height: 10px;
    border-right: 10px solid #ef5ba1;
    content: "";
    margin: 5em 30px; }
  main .appendix {
    font-size: 80%;
    line-height: 1.6; }
  main .footnote-list span.num {
    color: #3546E5;
    font-weight: bold;
    font-size: 100%; }
  main .footnote-list h3 {
    font-weight: bold; }

img {
  height: auto; }

#footer {
  margin-top: 2em; }

body .contents.dropdown-container, body main .front-grid .dropdown-container.pattern-list, main .front-grid body .dropdown-container.pattern-list {
  display: none; }

@media (max-width: 599px) {
  body .contents.dropdown-container, body main .front-grid .dropdown-container.pattern-list, main .front-grid body .dropdown-container.pattern-list {
    display: inherit;
    width: 100%;
    height: 2em;
    margin: 0; }
    body .contents.dropdown-container button, body main .front-grid .dropdown-container.pattern-list button, main .front-grid body .dropdown-container.pattern-list button {
      width: 100%;
      height: 100%; }
      body .contents.dropdown-container button h2, body main .front-grid .dropdown-container.pattern-list button h2, main .front-grid body .dropdown-container.pattern-list button h2, body main .front-grid .contents.dropdown-container button h3, main .front-grid body .contents.dropdown-container button h3, body .contents.dropdown-container button main .front-grid .pattern-list h3, body main .front-grid .dropdown-container.pattern-list button h3, main .front-grid body .dropdown-container.pattern-list button h3, body .contents.dropdown-container button main #SignificantRevisions summary, main #SignificantRevisions body .contents.dropdown-container button summary, body main .front-grid .dropdown-container.pattern-list button #SignificantRevisions summary, body main #SignificantRevisions .front-grid .dropdown-container.pattern-list button summary, main .front-grid body .dropdown-container.pattern-list button #SignificantRevisions summary, main #SignificantRevisions .front-grid body .dropdown-container.pattern-list button summary {
        height: 1em;
        margin: auto; }
  body .fixed-container {
    position: fixed;
    top: 0; }
  body button.dropdown-button {
    background-color: #f9f9f9;
    background-color: rgba(249, 249, 249, 0.8);
    border: none; }
  body .hidden {
    display: none; }
  body .dropdown-links {
    display: block;
    visibility: visible;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 3;
    height: 75vh;
    overflow-y: auto;
    padding-bottom: 1.5em; }
    body .dropdown-links a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block; }
      body .dropdown-links a :hover {
        background-color: #f1f1f1; }
    body .dropdown-links ul {
      padding-left: 1.5em; }
    body .dropdown-links h3 {
      padding-left: 12px; }
      body .dropdown-links h3 a {
        padding: 0;
        color: #303633; } }

@media (max-width: 599px) {
  font-size: 19px;
  .no-scroll {
    overflow-y: hidden; }
  #banner, #footer, .navmenu {
    margin: 0px; }
  main {
    max-width: 100%;
    overflow-x: hidden !important;
    margin: auto;
    padding: 0 10px; }
    main div.frontMatter {
      width: 100%; }
    main div.frontMatter div.frontRight {
      display: none; }
    main div.frontMatter div.frontLeft {
      float: none;
      width: 100%; }
    main .paperBody {
      font-size: 19px; }
      main .paperBody blockquote.aside {
        clear: both;
        float: none; }
      main .paperBody .photo, main .paperBody div.fullPhoto, main .paperBody .figure, main .paperBody .photo-right {
        float: none;
        margin: auto; }
      main .paperBody pre {
        overflow-x: auto;
        padding-bottom: 1.5em; }
      main .paperBody table {
        display: block;
        overflow-x: auto;
        padding-bottom: 0.5em;
        border: none; }
      main .paperBody .paperBody .end-box, main .paperBody .end-box {
        margin: auto; }
      main .paperBody img.full-size {
        max-width: 100%; }
    main .appendix {
      font-size: 19px; } }

@media (min-width: 600px) {
  main .author {
    display: grid;
    grid-template-areas: "nm nm" "ph bi";
    grid-column-gap: 2em; }
    main .author img {
      grid-area: ph;
      padding-top: 20px; }
    main .author p.name {
      grid-area: nm;
      margin: 0; }
    main .author .bio {
      grid-area: bi;
      width: 130%; } }

main .pattern-list a {
  color: #3546E5; }

main .pattern-list .note {
  font-weight: normal;
  font-style: italic; }

main .comment {
  background-color: linen;
  padding: 0 10px;
  margin-bottom: 1em; }

@media (min-width: 600px) {
  main .front-grid {
    display: grid;
    grid-template-areas: "aut tag " "aut tra" "aut tbx" "con pl" "con pl" "con pl";
    grid-template-columns: 1fr 1fr; } }

main .front-grid .pattern-list {
  grid-area: pl; }

main .catalog-notice {
  font-size: 80%;
  background-color: #F7F8FE;
  padding: 1em;
  /* prose mixin */
  line-height: 1.6;
  color: #303633;
  font-family: Lora, serif; }
  @media (min-width: 900px) {
    main .catalog-notice {
      float: right;
      margin: 0 -250px 0 2em; } }
  @media (min-width: 900px) {
    main .catalog-notice {
      width: 20em; } }
  main .catalog-notice h2, main .catalog-notice .front-grid .contents h3, main .front-grid .contents .catalog-notice h3, main .catalog-notice .front-grid .pattern-list h3, main .front-grid .pattern-list .catalog-notice h3, main .catalog-notice #SignificantRevisions summary, main #SignificantRevisions .catalog-notice summary, main .catalog-notice h3 {
    font-size: 120%;
    margin-top: 0; }
  main .catalog-notice h1, main .catalog-notice p.subtitle, main .catalog-notice h2, main .catalog-notice .front-grid .contents h3, main .front-grid .contents .catalog-notice h3, main .catalog-notice .front-grid .pattern-list h3, main .front-grid .pattern-list .catalog-notice h3, main .catalog-notice #SignificantRevisions summary, main #SignificantRevisions .catalog-notice summary, main .catalog-notice h3, main .catalog-notice h4, main .catalog-notice h5 {
    font-weight: bold; }
  main .catalog-notice h1, main .catalog-notice p.subtitle {
    font-size: 200%; }
  main .catalog-notice h2, main .catalog-notice .front-grid .contents h3, main .front-grid .contents .catalog-notice h3, main .catalog-notice .front-grid .pattern-list h3, main .front-grid .pattern-list .catalog-notice h3, main .catalog-notice #SignificantRevisions summary, main #SignificantRevisions .catalog-notice summary {
    font-size: 150%; }
  main .catalog-notice h3 {
    font-size: 120%; }
  main .catalog-notice p, main .catalog-notice h1, main .catalog-notice p.subtitle, main .catalog-notice h2, main .catalog-notice .front-grid .contents h3, main .front-grid .contents .catalog-notice h3, main .catalog-notice .front-grid .pattern-list h3, main .front-grid .pattern-list .catalog-notice h3, main .catalog-notice #SignificantRevisions summary, main #SignificantRevisions .catalog-notice summary, main .catalog-notice h3, main .catalog-notice h4, main .catalog-notice h5 ul {
    margin: 1em 0; }
  main .catalog-notice a {
    border-bottom: thin solid;
    padding-bottom: 1px; }
  main .catalog-notice a:hover {
    text-decoration: none; }
  main .catalog-notice .img-link a, main .catalog-notice a.img-link {
    border-bottom: none; }
  main .catalog-notice dd {
    margin-left: 2em; }
  main .catalog-notice ul {
    list-style: square;
    margin-left: 1.5em; }
  main .catalog-notice ol {
    list-style: decimal;
    margin-left: 1.5em; }
  main .catalog-notice pre {
    font-size: 90%;
    font-family: Inconsolata, monospace; }
  main .catalog-notice code {
    font-family: Inconsolata, monospace; }
  main .catalog-notice span.credit {
    color: #808080;
    font-size: 80%; }
  main .catalog-notice hr {
    border: none;
    display: block;
    background-color: #070D4A;
    height: 3px;
    border-right: 3px solid #ef5ba1;
    content: "";
    margin: 10px 15px; }
  main .catalog-notice blockquote {
    /* margin-left: 3em; */
    border-left: 2px solid #0f1872;
    padding-left: 1em;
    font-style: italic;
    margin-left: 2em; }
  main .catalog-notice b {
    color: #ef5ba1; }
  main .catalog-notice a:only-child {
    border: none; }
  main .catalog-notice img {
    max-width: 250px; }

main .intent {
  font-style: italic; }

main .group-contents {
  background-color: #F7F8FE;
  padding: 2em; }
  @media (min-width: 600px) {
    main .group-contents {
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-areas: "it ig" "tt ig" "mn mn" "hd hd" "pl pl";
      margin: 2em; } }
  main .group-contents img {
    width: 200px;
    grid-area: ig; }
  main .group-contents p {
    margin: 1em 0; }
  main .group-contents .intro {
    grid-area: it;
    margin: 0; }
  main .group-contents .title {
    grid-area: tt;
    color: #ef5ba1;
    font-size: 120%;
    font-weight: bold; }
  main .group-contents .main {
    grid-area: mn; }
  main .group-contents .head {
    grid-area: hd; }
  main .group-contents .pattern-list {
    grid-area: pl; }
  main .group-contents .main a, main .group-contents ul a {
    color: #3546E5;
    border-bottom: none;
    font-weight: bold;
    font-family: Open Sans, sans-serif; }
  main .group-contents ul {
    list-style: none;
    margin-left: 0; }
    @media (min-width: 600px) {
      main .group-contents ul {
        columns: 2; } }
  main .group-contents .head {
    font-weight: bold;
    text-align: center;
    font-family: Open Sans, sans-serif;
    grid-area: "hd"; }

@media (max-width: 800px) {
  main .pattern-map-container {
    overflow-x: scroll; } }

main .pattern-map {
  font-family: Open Sans, sans-serif;
  position: relative; }
  main .pattern-map .rect {
    margin: 0;
    position: absolute;
    width: 100px;
    height: 70px;
    line-height: 1.2;
    text-align: center;
    background-color: #bdc2f6;
    padding: 5px;
    display: flex;
    align-items: center;
    border: none; }
    main .pattern-map .rect:hover {
      background-color: #8f99f1;
      color: black; }
  main .pattern-map .system-rect {
    margin: 0;
    position: absolute;
    width: 100px;
    height: 70px;
    line-height: 1.2;
    text-align: center;
    background-color: #A9A7A7;
    padding: 5px;
    display: flex;
    align-items: center;
    border: none; }
  main .pattern-map svg {
    position: absolute; }
  main .pattern-map #arrow path {
    stroke: none;
    fill: black; }
  main .pattern-map path {
    stroke: black;
    stroke-width: 4;
    fill: none; }

main table.examples-of-types {
  font-family: Open Sans, sans-serif;
  border: solid thin #070D4A; }
  main table.examples-of-types tbody {
    font-size: 80%; }
  main table.examples-of-types td {
    vertical-align: middle;
    padding: 5px 2em; }
  main table.examples-of-types th {
    background-color: #070D4A;
    color: white;
    padding: 1em 1.6em;
    text-align: left; }
  main table.examples-of-types tr:nth-child(even) {
    background-color: #F7F8FE; }

main table.cluster-number {
  background-color: #F7F8FE;
  font-family: Open Sans, sans-serif;
  font-size: 90%;
  padding: 0.5em 1em;
  border: 2px solid #0f1872;
  table-layout: fixed;
  max-width: 440px; }
  main table.cluster-number th, main table.cluster-number td {
    padding: 0.5em;
    border: thin solid #cad0f8; }
  main table.cluster-number th {
    border-bottom: 2px solid #0f1872; }
  main table.cluster-number thead th:nth-child(1) {
    width: 25%; }
  main table.cluster-number thead th:nth-child(2) {
    width: 25%; }
  main table.cluster-number thead th:nth-child(3) {
    width: 25%; }
  main table.cluster-number thead th:nth-child(4) {
    width: 25%; }
  main table.cluster-number td {
    text-align: right; }