@charset "UTF-8";
/* 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,700,800);
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
html, body, div, span, applet, object, iframe,
h1,
p.subtitle, h2, div.frontMatter div.contents h3, 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; }

@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; }
/*
tw-grey is hsl(145, 5%, 52%)
*/
div#banner {
  background-color: black;
  height: 100px;
  font-family: OpenSans, sans-serif;
  color: white;
  font-size: 14px;
  position: relative; }
  div#banner img.name-logo, div#banner img.ie6-name-logo {
    position: absolute;
    top: 0;
    left: 10px; }
  div#banner img.photo {
    position: absolute; }
  div#banner div.main-navigation {
    position: absolute;
    bottom: 10px;
    left: 10px; }
    div#banner div.main-navigation p {
      margin: 0;
      padding: 0; }
  div#banner a:link, div#banner a:visited {
    color: white;
    text-decoration: none; }
  div#banner a:hover {
    color: #BC85CC;
    text-decoration: underline; }
  div#banner a.tw:link, div#banner a.tw:visited {
    color: #D5E14D; }
  div#banner ul {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 0; }
  div#banner ul li {
    float: left;
    padding-right: 10px;
    font-family: OpenSans, sans-serif;
    font-size: 14px; }
  div#banner img {
    border: 0; }
  div#banner div.search {
    position: absolute;
    right: 20px;
    top: 20px;
    background-image: url("http://martinfowler.com/search_bg.gif");
    background-position: 0 0;
    background-repeat: no-repeat;
    float: left;
    height: 23px;
    width: 173px; }
  div#banner div.search input {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 12px; }
  div#banner div.search input.field {
    margin: 3px 3px 3px 4px;
    width: 142px; }
  div#banner div.search input.button {
    width: 18px;
    font-size: 99%;
    background-color: transparent; }

/* ================ footer ================ */
div#footer {
  margin-top: 15px;
  background-color: black;
  color: white; }
  div#footer ul, div#footer li, div#footer h1, div#footer p.subtitle, div#footer p {
    font-size: 12px;
    font-family: OpenSans, sans-serif;
    text-align: left; }
  div#footer a:link, div#footer a:visited {
    color: white;
    text-decoration: none; }
  div#footer a:hover {
    color: #BC85CC;
    text-decoration: underline; }
  div#footer a.tw:link, div#footer a.tw:visited {
    color: #D5E14D; }
  div#footer h1, div#footer p.subtitle {
    color: #BC85CC;
    padding: 0 0 5px 0; }
  div#footer div.col1, div#footer div.col2, div#footer div.col3, div#footer div.col4 {
    float: left;
    margin: 5px 10px;
    background-color: transparent; }
  div#footer ul {
    list-style-type: square;
    margin: 0 0 0 15px;
    padding: 0; }
  div#footer div.col1 {
    width: 60px; }
  div#footer div.col2 {
    width: 140px; }
  div#footer div.col3 {
    width: 220px; }
  div#footer div.col4 {
    width: 300px; }
  div#footer div.copyright {
    padding: 5px 10px;
    clear: both; }
  div#footer div.badges {
    float: right; }
    div#footer div.badges img {
      width: 14px;
      height: 14px;
      padding: 0 1px; }

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

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

body {
  margin: 0; }

body {
  font-size: 16px;
  font-family: OpenSans, sans-serif;
  line-height: 1.2;
  color: #303633; }

body > div#banner, body > div#footer {
  margin-left: 30px; }

#content {
  background-color: white;
  margin: 2em auto 2em 30px;
  width: 40em;
  min-height: 500px; }

h1, p.subtitle, h2, div.frontMatter div.contents h3, h3, h4, h5 {
  color: #5b2858;
  font-weight: bold; }
  h1 a:link, p.subtitle a:link, h1 a:visited, p.subtitle a:visited, h2 a:link, div.frontMatter div.contents h3 a:link, h2 a:visited, div.frontMatter div.contents h3 a:visited, h3 a:link, h3 a:visited, h4 a:link, h4 a:visited, h5 a:link, h5 a:visited {
    color: #5b2858; }

h1, p.subtitle {
  font-size: 200%; }

h2, div.frontMatter div.contents h3 {
  font-size: 150%; }

p, h1, p.subtitle, h2, div.frontMatter div.contents h3, h3, h4, h5 ul {
  margin: 1em 0; }

dd {
  margin-left: 2em; }

a:link, a:visited {
  color: #94388e;
  text-decoration: none; }

a:hover {
  text-decoration: underline; }

ul {
  list-style: square;
  margin-left: 1.5em; }

ol {
  list-style: decimal;
  margin-left: 1.5em; }

pre {
  font-size: 90%;
  font-family: Inconsolata, monospace; }

code {
  font-family: Inconsolata, monospace; }

span.credit {
  color: #808080;
  font-size: 80%; }

hr {
  border-style: dotted none none none;
  border-top-width: thin;
  margin: 10px 15px; }

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

blockquote {
  /* margin-left: 3em; */
  border-left: 2px solid grey;
  padding-left: 1em;
  font-style: italic;
  color: #5b2858; }

.clear {
  clear: both; }

.clickable {
  text-decoration: underline;
  cursor: pointer; }

.shares .label {
  margin-right: 15px; }
.shares img {
  height: 16px;
  margin-right: 10px; }

div.photo, div.fullPhoto {
  float: right;
  margin: 1em 0 1em 1em;
  font-size: 80%;
  font-style: italic;
  font-family: OpenSans, sans-serif; }
  div.photo p.credit, div.fullPhoto p.credit {
    color: #808080;
    font-size: 80%;
    text-align: right;
    float: right; }
  div.photo p.photoCaption, div.fullPhoto p.photoCaption {
    min-height: 1em; }

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

img {
  max-width: 100%; }

body {
  font-size: 16px;
  font-family: OpenSans, sans-serif; }

h1, p.subtitle, h2, div.frontMatter div.contents h3, h3 {
  font-family: OpenSans, sans-serif; }

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

hr.topSection {
  border-top: thick solid #5b2858;
  margin: 3em 50% 0px 0px; }

h3 {
  font-size: 120%; }

div.paperBody h2, div.pattern h2, div.paperBody div.frontMatter div.contents h3, div.frontMatter div.contents div.paperBody h3, div.pattern div.frontMatter div.contents h3, div.frontMatter div.contents div.pattern h3 {
  margin: 0 0 1em 0; }

.todo {
  background-color: yellow; }

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

p.abstract {
  line-height: 1.4;
  font-style: italic; }

div.frontMatter {
  padding: 1em 2em;
  border-style: solid none;
  border-width: thin 0;
  clear: both;
  overflow: hidden;
  border-color: #5b2858;
  font-family: OpenSans, sans-serif;
  padding: 1em 0;
  font-size: 90%; }
  div.frontMatter p, div.frontMatter div.translations, div.frontMatter div.tags {
    margin: 0.3em; }
  div.frontMatter div.topBox {
    margin: 2em 0;
    font-size: 90%; }
  div.frontMatter div.frontLeft {
    width: 40%;
    float: left; }
  div.frontMatter div.frontRight {
    width: 55%;
    float: right;
    padding-right: 0; }
  div.frontMatter div.author {
    margin: 1em 0 0 0.3em; }
    div.frontMatter div.author img {
      max-width: 80px;
      float: left;
      margin: 0 1em 1em 0; }
    div.frontMatter div.author p {
      margin-left: 0;
      font-size: 90%; }
    div.frontMatter div.author p.name {
      font-weight: bold;
      font-size: 100%;
      margin: 1em 0; }
    div.frontMatter div.author a:link, div.frontMatter div.author a:visited, div.frontMatter div.author a:hover {
      color: #94388e; }
  div.frontMatter div.contents {
    /* puts contents to fixed right, useful when fiddling
    position: fixed;
    width: 15em;
    top: 20em;
    right: 3px;
    */
    /* 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 */ }
    div.frontMatter div.contents a:link, div.frontMatter div.contents a:visited, div.frontMatter div.contents a:hover {
      color: #5b2858; }
    div.frontMatter div.contents ul {
      margin: 0;
      -webkit-padding-start: 0; }
    div.frontMatter div.contents ul ul {
      margin: 0 1.2em; }
    div.frontMatter div.contents li {
      list-style-type: none; }
    div.frontMatter div.contents h2, div.frontMatter div.contents h3 {
      font-size: 100%;
      color: #5b2858;
      font-weight: bold;
      margin: 0.5em 0; }
    div.frontMatter div.contents h3 {
      margin: 0.5em 0; }

div.paperBody, div.pattern {
  clear: both;
  line-height: 1.4; }

div.paperBody p, div.pattern p {
  /*
    font-family: georgia, serif;
    */ }

hr.bodySep {
  margin: 5em 10% 2em;
  border-top: thin solid #5b2858;
  clear: both; }

pre {
  font-size: 90%; }

pre span.highlight {
  color: #ef5ba1; }

pre span.deleted {
  color: #ef5ba1;
  text-decoration: line-through; }

p.code-label {
  margin-bottom: 0;
  font-style: italic;
  font-size: 90%; }

div.figure p.figureCaption {
  margin-left: 2em;
  font-style: italic;
  font-size: 90%; }

div.appendix {
  font-size: 80%;
  font-family: OpenSans, sans-serif;
  line-height: 1.2; }

div.appendix hr.topSection {
  border: none; }

div.sidebar, div.soundbite {
  width: 20em;
  float: right;
  margin: 1em -15em 1em 2em;
  font-size: 80%;
  font-family: OpenSans, sans-serif;
  background-color: rgba(254, 224, 201, 0.5);
  line-height: 1.2;
  padding: 1em; }

div.soundbite {
  color: #11aa58;
  font-size: 110%;
  font-style: italic;
  width: 20em; }
  div.soundbite p {
    margin: 0; }
  div.soundbite i {
    font-weight: bold; }

div.footnote-list h3, div.footnote-list span.num {
  color: #5b2858;
  font-size: 100%;
  font-weight: bold; }

.paperBody .end-box, .pattern .end-box, .end-box {
  padding: 10px 20px;
  background-color: #fee0c9;
  margin: 2em -20% 5em 40%; }
  .paperBody .end-box h2, .pattern .end-box h2, .paperBody .end-box div.frontMatter div.contents h3, div.frontMatter div.contents .paperBody .end-box h3, .pattern .end-box div.frontMatter div.contents h3, div.frontMatter div.contents .pattern .end-box h3, .end-box h2, .end-box div.frontMatter div.contents h3, div.frontMatter div.contents .end-box h3 {
    font-style: italic;
    font-weight: normal;
    margin-bottom: 0;
    color: #11aa58; }
  .paperBody .end-box p, .pattern .end-box p, .end-box p {
    margin: 0.5em 0 1em 2em; }
  .paperBody .end-box .tags, .pattern .end-box .tags, .end-box .tags {
    line-height: 3; }
    .paperBody .end-box .tags a, .pattern .end-box .tags a, .end-box .tags a {
      background: #11aa58;
      color: white;
      font-family: OpenSans, sans-serif;
      font-style: normal;
      font-weight: bold;
      font-size: 14px;
      padding: 5px;
      border-radius: 5px;
      margin: 2px;
      white-space: nowrap; }
      .paperBody .end-box .tags a:hover, .pattern .end-box .tags a:hover, .end-box .tags a:hover {
        background: #89b77f; }
  .paperBody .end-box span.tags, .pattern .end-box span.tags, .end-box span.tags {
    margin-left: 2em; }
  .paperBody .end-box .shares, .pattern .end-box .shares, .end-box .shares {
    color: #11aa58;
    margin: 0 0 2em 0; }

.next {
  background-color: #fee0c9;
  color: #11aa58;
  padding: 10px;
  font-style: italic;
  font-size: 110%; }
  .next a:link, .next a:visited {
    color: #b5b935; }

.code-remark {
  color: #9e785f;
  font-size: 80%;
  margin-left: 3em;
  font-style: italic; }

.short-front {
  width: 400px;
  float: left;
  margin-bottom: 3em; }
  .short-front p {
    font-size: 90%;
    margin: 0; }
  .short-front .author .photo, .short-front .author div.fullPhoto {
    float: left;
    margin-right: 10px;
    width: 60px; }
    .short-front .author .photo img, .short-front .author div.fullPhoto img {
      width: 60px; }

.eaadev-notice {
  margin: 50px;
  background-color: #fee0c9;
  padding: 10px 30px; }

table {
  border-spacing: 20px 0;
  border-collapse: separate; }

.pattern .intent {
  font-style: italic; }
.pattern .sketch {
  margin: 20px; }
.pattern .aka {
  font-weight: bold; }