@charset "UTF-8";
@import url(960.css);
/* derived from */
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
@import url(https://web-archive.nli.org.il/National_Library/cs_/https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,300,400,700,800);
@import url(https://web-archive.nli.org.il/National_Library/cs_/https://fonts.googleapis.com/css?family=Inconsolata);
html, body, div, span, applet, object, iframe,
h1,
#content div#photo h2, h2, 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("/National_Library/oe_/https://martinfowler.com/fonts/marydale/marydale-webfont.eot");
  src: url("/National_Library/oe_/https://martinfowler.com/fonts/marydale/marydale-webfont.eot#iefix") format("embedded-opentype"), url("/National_Library/oe_/https://martinfowler.com/fonts/marydale/marydale-webfont.woff") format("woff"), url("/National_Library/oe_/https://martinfowler.com/fonts/marydale/marydale-webfont.ttf") format("truetype"), url("/National_Library/oe_/https://martinfowler.com/fonts/marydale/marydale-webfont.svg#marydaleregular") format("svg");
  font-weight: normal;
  font-style: normal; }
/*
tw-grey is hsl(145, 5%, 52%)
*/
@font-face {
  font-family: 'FontAwesome';
  src: url("https://web-archive.nli.org.il/National_Library/oe_/https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot");
  src: url("https://web-archive.nli.org.il/National_Library/oe_/https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("https://web-archive.nli.org.il/National_Library/oe_/https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.woff") format("woff"), url("https://web-archive.nli.org.il/National_Library/oe_/https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.ttf") format("truetype"), url("https://web-archive.nli.org.il/National_Library/oe_/https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.svgfontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

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

@font-face {
  font-family: 'FontAwesome';
  src: url("https://web-archive.nli.org.il/National_Library/oe_/https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot");
  src: url("https://web-archive.nli.org.il/National_Library/oe_/https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("https://web-archive.nli.org.il/National_Library/oe_/https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.woff") format("woff"), url("https://web-archive.nli.org.il/National_Library/oe_/https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.ttf") format("truetype"), url("https://web-archive.nli.org.il/National_Library/oe_/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;
  *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; }

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

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

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

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

/* ==== banner ================ */
div#banner {
  background-color: black;
  height: 100px;
  font-family: OpenSans, sans-serif;
  color: white;
  position: relative;
  top: 0; }
  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 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 a {
    color: white;
    text-decoration: none; }
  div#banner .menu-button {
    display: block;
    position: absolute;
    right: 20px;
    top: 5px;
    font-size: 200%; }
  div#banner div.main-navigation, div#banner div.search {
    display: none; }
  @media screen and (min-width: 950px) {
    div#banner div.main-navigation {
      position: absolute;
      bottom: 10px;
      left: 10px;
      display: block; }
      div#banner div.main-navigation p {
        margin: 0;
        padding: 0; }
      div#banner div.main-navigation a:hover {
        color: #ef5ba1;
        text-decoration: underline; }
      div#banner div.main-navigation a.tw {
        color: #b5b935; } }
  @media screen and (min-width: 450px) {
    div#banner div.search {
      display: block;
      position: absolute;
      right: 80px;
      top: 5px;
      background-color: transparent;
      height: 40px;
      width: 173px; }
    div#banner div.search input, div#banner div.search button {
      margin: 10px 0 0 0;
      padding: 0;
      border: 0; }
    div#banner div.search input.field {
      margin: 3px 3px 3px 4px;
      width: 142px; }
    div#banner div.search .button {
      cursor: pointer;
      color: white;
      width: 18px;
      background-color: transparent;
      font-size: 100%; }
      div#banner div.search .button:before {
        content: "";
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
        text-decoration: inherit;
        -webkit-font-smoothing: antialiased;
        *margin-right: .3em; } }

/* ................................................................ */
/* ==== footer ================ */
#footer {
  position: relative;
  background-color: black;
  color: white;
  min-height: 80px; }
  #footer a {
    color: white;
    text-decoration: none; }
  #footer div.copyright {
    display: block;
    font-size: 80%;
    position: absolute;
    bottom: 5px;
    left: 5px; }
    #footer div.copyright a:hover {
      padding-top: 5px;
      color: #ef5ba1;
      text-decoration: underline; }
  @media screen and (min-width: 600px) {
    #footer {
      min-height: 40px; }
      #footer div.copyright {
        left: auto;
        right: 60px; } }
  #footer .tw-logo {
    position: absolute;
    left: 5px;
    top: 5px; }
    #footer .tw-logo img {
      width: 200px; }
  #footer .menu-button {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 200%; }

/* ................................................................ */
.navmenu {
  line-height: 2.5em; }
  .navmenu .group {
    display: block;
    background-color: #f0ba95;
    border-top: thin solid white; }
    .navmenu .group::after {
      clear: both;
      content: "";
      display: table; }
  .navmenu .group-label {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 14.70196%;
    padding-left: 5px;
    font-weight: bold; }
    .navmenu .group-label:last-child {
      margin-right: 0; }
  .navmenu .group-contents {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 82.94039%;
    background-color: #fee0c9; }
    .navmenu .group-contents:last-child {
      margin-right: 0; }
  .navmenu .top-line {
    background-color: #fee0c9;
    display: block; }
    .navmenu .top-line::after {
      clear: both;
      content: "";
      display: table; }
  .navmenu .link-home {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 6.17215%;
    display: block;
    padding-left: 5px; }
    .navmenu .link-home:last-child {
      margin-right: 0; }
  .navmenu .search {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 82.94039%;
    display: block; }
    .navmenu .search:last-child {
      margin-right: 0; }
    .navmenu .search .button {
      background-color: transparent;
      border: none;
      cursor: pointer; }
    .navmenu .search .button:before {
      content: "";
      font-family: FontAwesome;
      font-weight: normal;
      font-style: normal;
      text-decoration: inherit;
      -webkit-font-smoothing: antialiased;
      *margin-right: .3em;
      font-size: 150%;
      color: white; }
  @media screen and (max-width: 750px) {
    .navmenu .link-home {
      float: left;
      display: block;
      margin-right: 7.42297%;
      width: 19.43277%; }
      .navmenu .link-home:last-child {
        margin-right: 0; }
    .navmenu .search {
      float: left;
      display: block;
      margin-right: 7.42297%;
      width: 46.28851%; }
      .navmenu .search:last-child {
        margin-right: 0; } }
  .navmenu .close {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 6.17215%;
    color: white;
    cursor: pointer;
    padding-right: 0.5em; }
    .navmenu .close:last-child {
      margin-right: 0; }
  .navmenu .icon-close, .navmenu .close {
    font-size: 200%; }
  @media screen and (max-width: 750px) {
    .navmenu .group-label, .navmenu .group-contents {
      width: 100%; } }
  .navmenu .item {
    display: inline;
    padding: 0 1em 0 1em; }
  .navmenu a {
    color: black;
    text-decoration: none; }
  .navmenu a:hover {
    text-decoration: underline; }

/* ==== framing ================ */
body {
  font-size: 16px; }

#content, #banner, #footer, .navmenu {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-left: 5px;
  margin-right: 0; }
  #content::after, #banner::after, #footer::after, .navmenu::after {
    clear: both;
    content: "";
    display: table; }
  @media screen and (min-width: 750px) {
    #content, #banner, #footer, .navmenu {
      margin-left: 20px; } }

#top-navmenu {
  display: none; }

#bottom-navmenu {
  display: block; }

.navmenu-button {
  cursor: pointer; }

/* ................................................................ */
/* 

==== global ================

  need to refactor this as global is really just for articles etc 
  in particular refactor this so the guide pages can use a useful common
  subset of styles
*/
body {
  font-size: 16px;
  font-family: OpenSans, sans-serif;
  line-height: 1.2;
  color: #303633; }

#content {
  background-color: white;
  min-height: 500px;
  margin-left: 5px;
  margin-right: 0; }
  #content h1, #content div#photo h2, #content h2, #content h3, #content h4, #content h5 {
    color: #5b2858;
    font-weight: bold; }
    #content h1 a:link, #content div#photo h2 a:link, #content h1 a:visited, #content div#photo h2 a:visited, #content h2 a:link, #content h2 a:visited, #content h3 a:link, #content h3 a:visited, #content h4 a:link, #content h4 a:visited, #content h5 a:link, #content h5 a:visited {
      color: #5b2858; }
  #content h1, #content div#photo h2 {
    font-size: 200%; }
  #content h2 {
    font-size: 150%; }
  #content h3 {
    font-size: 120%; }
  #content p, #content h1, #content div#photo h2, #content h2, #content h3, #content h4, #content h5 ul {
    margin: 1em 0; }
  #content dd {
    margin-left: 2em; }
  #content a:link, #content a:visited {
    color: #94388e;
    text-decoration: none; }
  #content a:hover {
    text-decoration: underline; }
  #content ul {
    list-style: square;
    margin-left: 1.5em; }
  #content ol {
    list-style: decimal;
    margin-left: 1.5em; }
  #content pre {
    font-size: 90%;
    font-family: Inconsolata, monospace; }
  #content code {
    font-family: Inconsolata, monospace; }
  #content span.credit {
    color: #808080;
    font-size: 80%; }
  #content hr {
    border-style: dotted none none none;
    border-top-width: thin;
    margin: 10px 15px; }
  #content blockquote {
    /* margin-left: 3em; */
    border-left: 2px solid grey;
    padding-left: 1em;
    font-style: italic;
    color: #5b2858; }
  #content .shares .label {
    margin-right: 1em;
    color: #11aa58; }
  #content .shares .icons {
    float: left;
    width: 40%; }
  #content .shares .comment {
    font-size: 80%;
    color: #11aa58;
    float: left;
    width: 60%;
    margin-top: 0; }
  #content .shares img {
    height: 16px;
    margin-right: 10px; }
  @media screen and (min-width: 750px) {
    #content {
      margin-left: 20px; } }

.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 #content div#photo h2, #content div#photo .draft-notice h2 {
    font-size: 120%;
    color: black; }
  .draft-notice p {
    color: red; }

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

/* ................................................................ */
div#banner img.photo {
  display: none; }

#content {
  font-size: 13px;
  margin-top: 0; }
  #content div#photo {
    background-image: url("img/IMG_3861v5.jpg");
    background-position: 50% 0;
    background-repeat: no-repeat;
    padding-bottom: 30px;
    height: 751px; }
    #content div#photo p {
      color: white;
      text-shadow: 0 1px 1px black;
      font-size: 14px; }
    #content div#photo h1, #content div#photo h2 {
      font-size: 18px;
      font-weight: bold;
      color: #fec8fa;
      font-family: OpenSans, sans-serif; }
      #content div#photo h1 a:link, #content div#photo h2 a:link, #content div#photo h1 a:visited, #content div#photo h2 a:visited {
        color: #fec8fa; }
    #content div#photo a:link, #content div#photo a:visited {
      color: #fec8fa; }
    #content div#photo h2 a:link, #content div#photo h2 a:visited {
      color: #fac035; }
  #content .grey {
    background-image: url("img/bg_grey_opacity_75.png");
    background-position: 0 0;
    background-repeat: repeat;
    color: white;
    padding-left: 1em;
    padding-right: 1em; }
    #content .grey a:link, #content .grey a:visited {
      color: #fec8fa; }
  #content .left-icon {
    float: left;
    margin-right: 15px; }
  #content div.image-table .row {
    clear: both; }
  #content div.image-table .image {
    float: left; }
  #content div.image-table .text {
    width: auto; }
    #content div.image-table .text p {
      margin: 0 0 1em 0; }
    #content div.image-table .text p.sep {
      margin-bottom: 2em; }
  #content div.image-table img {
    width: 100px;
    margin: 0 15px 0 0;
    -moz-box-shadow: 3px 3px 4px #555555;
    -webkit-box-shadow: 3px 3px 4px #555555;
    box-shadow: 3px 3px 4px #555555; }
  #content div.image-table img.no-shadow {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none; }