@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700);
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
/* ================ 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, 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, 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: "remixicon";
 src: url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.eot?t=1590207869815");
 /* IE9*/
 src: url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.eot?t=1590207869815#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.woff2?t=1590207869815") format("woff2"), url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.woff?t=1590207869815") format("woff"), url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.ttf?t=1590207869815") format("truetype"), url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.svg?t=1590207869815#remixicon") format("svg");
 /* iOS 4.1- */
 font-display: swap; }
.icon-twitter:before {
 content: "";
 font-family: 'remixicon';
 font-weight: normal;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale; }
.icon-rss:before {
 content: "";
 font-family: 'remixicon';
 font-weight: normal;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale; }
.icon-bars:before {
 content: "";
 font-family: 'remixicon';
 font-weight: normal;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale; }
.icon-close:before {
 content: "⨉"; }
.icon-tag:before {
 content: "";
 font-family: 'remixicon';
 font-weight: normal;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale; }
.icon svg {
 height: 1em;
 width: 1em;
 fill: white; }
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, table.dark-head caption {
 background-color: #070D4A;
 color: white;
 font-weight: bold;
 padding: 0.5em 0; }
 table.dark-head th {
 padding: 0.5em 1.6em;
 text-align: left; }
 table.dark-head tr:nth-child(even) {
 background-color: #F7F8FE; }
 table.dark-head caption {
 text-align: center;
 border: none; }
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; }
 table.borders caption {
 border: none; }
main .photo, main .photo-right, main div.fullPhoto, main .figure {
 max-width: 100%;
 margin: 1em auto; }
 main .photo .credit, main .photo-right .credit, main div.fullPhoto .credit, main .figure .credit {
 color: #808080;
 font-size: 80%;
 text-align: right; }
 main .photo .photoCaption, main .photo-right .photoCaption, main div.fullPhoto .photoCaption, main .figure .photoCaption {
 font-size: 80%;
 font-style: italic;
 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 .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;
 padding-bottom: 0; }
 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;
 padding-bottom: 0; }
 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;
 padding-bottom: 0; }
 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;
 padding-bottom: 0; }
 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; }
/* ==== global ================================ */
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 {
 font-size: 120%;
 color: black; }
 .draft-notice p {
 color: red; }
.clickable, .deck-toc-panel a, #deck-container .deck-help, #deck-container a, a.permalink, a:hover {
 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: 'remixicon';
 font-weight: normal;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale; }
/* ................................................................ */
@font-face {
 font-family: "remixicon";
 src: url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.eot?t=1590207869815");
 /* IE9*/
 src: url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.eot?t=1590207869815#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.woff2?t=1590207869815") format("woff2"), url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.woff?t=1590207869815") format("woff"), url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.ttf?t=1590207869815") format("truetype"), url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.svg?t=1590207869815#remixicon") format("svg");
 /* iOS 4.1- */
 font-display: swap; }
.icon-twitter:before {
 content: "";
 font-family: 'remixicon';
 font-weight: normal;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale; }
.icon-rss:before {
 content: "";
 font-family: 'remixicon';
 font-weight: normal;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale; }
.icon-bars:before {
 content: "";
 font-family: 'remixicon';
 font-weight: normal;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale; }
.icon-close:before {
 content: "⨉"; }
.icon-tag:before {
 content: "";
 font-family: 'remixicon';
 font-weight: normal;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale; }
.icon svg {
 height: 1em;
 width: 1em;
 fill: white; }
.deck-touch-panel {
 left: 0;
 min-width: 100%;
 min-height: 100%;
 z-index: 45;
 background-color: rgba(136, 136, 136, 0.7);
 position: absolute;
 display: none;
 top: 35px; }
 .deck-touch-panel .button {
 cursor: pointer;
 position: absolute;
 font-size: 20px;
 background-color: black;
 color: white;
 border: thick solid white;
 opacity: 0.7;
 vertical-align: middle;
 width: 100px;
 height: 50px;
 line-height: 50px;
 border-radius: 10px; }
 .deck-touch-panel .button.previous, .deck-touch-panel .button.next {
 padding-top: 10em;
 height: 100%;
 border-radius: 0;
 line-height: 20px; }
 .deck-touch-panel .button.previous .extra, .deck-touch-panel .button.next .extra {
 font-size: 80%; }
 .deck-touch-panel .button.previous {
 left: 0; }
 .deck-touch-panel .button.next {
 right: 0; }
 .deck-touch-panel .button.first {
 left: 200px;
 top: 50px; }
 .deck-touch-panel .button.last {
 right: 200px;
 top: 50px; }
 .deck-touch-panel .button.goto {
 left: 400px;
 top: 50px;
 line-height: 1.1em; }
html {
 box-sizing: content-box; }
*, *:before, *:after {
 box-sizing: initial; }
.clickable, .deck-toc-panel a, #deck-container .deck-help, #deck-container a, a:hover, a.permalink {
 color: #94388e;
 text-decoration: none;
 cursor: pointer; }
.fadeable, .deck-curtain, .fadeable *, .deck-curtain * {
 -moz-transition-duration: 400ms;
 -webkit-transition-duration: 400ms;
 -o-transition-duration: 400ms;
 transition-duration: 400ms; }
.overlay, #deck-container #tdd-hats .next, .highlight-description {
 padding: 30px;
 background-color: rgba(242, 231, 217, 0.9);
 box-shadow: 3px 3px 4px #555; }
.highlight-panel {
 background-color: rgba(255, 255, 0, 0.3);
 position: absolute;
 -moz-transition-duration: 400ms;
 -webkit-transition-duration: 400ms;
 -o-transition-duration: 400ms;
 transition-duration: 400ms; }
html, body {
 text-align: center;
 line-height: 1.2;
 height: auto; }
body {
 background-color: gray;
 font-family: Open Sans;
 margin: 5px; }
#deck-container {
 position: relative;
 min-height: 100%;
 overflow: hidden;
 margin: 0px auto;
 padding: 0px;
 height: 590px;
 width: 960px;
 /* override auto margins set by deck.core.css */ }
 #deck-container .slide {
 background-color: white;
 font-size: 15px;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 width: 960px;
 height: 590px;
 -webkit-transition: -webkit-transform 500ms ease-in-out;
 -moz-transition: -moz-transform 500ms ease-in-out;
 -ms-transition: -ms-transform 500ms ease-in-out;
 -o-transition: -o-transform 500ms ease-in-out;
 transition: transform 500ms ease-in-out; }
 #deck-container .slide.next {
 -webkit-transform: translate3d(200%, 0, 0);
 -moz-transform: translate(200%, 0);
 -ms-transform: translate(200%, 0);
 -o-transform: translate(200%, 0);
 transform: translate3d(200%, 0, 0); }
 #deck-container .slide.previous {
 -webkit-transform: translate3d(-200%, 0, 0);
 -moz-transform: translate(-200%, 0);
 -ms-transform: translate(-200%, 0);
 -o-transform: translate(-200%, 0);
 transform: translate3d(-200%, 0, 0); }
 #deck-container b {
 font-weight: bold; }
 #deck-container i {
 font-style: italic; }
 #deck-container code {
 font-family: Inconsolata, monospace; }
 #deck-container pre .highlight {
 background-color: yellow; }
 #deck-container svg.lede {
 fill: #94388e;
 position: relative; }
 #deck-container .tile .diagram, #deck-container .tile .lede, #deck-container .tile img {
 position: static;
 float: left; }
 #deck-container .tile {
 width: 300px; }
 #deck-container .tile h2 {
 text-align: left;
 font-size: 120%; }
 #deck-container .tile ul {
 list-style: square outside; }
 #deck-container .tile ul ul {
 margin: 0 0 0 2em;
 list-style: circle outside; }
 #deck-container .tile ul p {
 margin: 0 0 0 2em; }
 #deck-container .tile li {
 margin: 0px 0px 0px 2em;
 padding: 0.25em 0;
 vertical-align: middle; }
 #deck-container .tile p, #deck-container .tile ul {
 clear: both;
 text-align: left;
 margin: 0; }
 #deck-container .tile p {
 padding: 0.5em 0em; }
 #deck-container .tile li p {
 padding: 0.5em 0em; }
 #deck-container .tile pre {
 font-family: Inconsolata, monospace;
 text-align: left;
 border: none; }
 #deck-container .callout {
 background-color: #EEEEEE;
 padding: 0em 0.5em 0em 0.5em;
 box-shadow: 3px 3px 4px #555; }
 #deck-container .todo {
 background-color: #D1E4FF; }
 #deck-container .quote {
 position: static;
 margin-top: 1em; }
 #deck-container .quote .text {
 font-style: italic; }
 #deck-container .quote img {
 float: left;
 padding: 0.5em 10px 0.5em 0;
 vertical-align: top; }
 #deck-container .quote p {
 clear: none; }
 #deck-container .draft-marker {
 position: absolute;
 bottom: 80px;
 right: 50px;
 font-size: 150%;
 opacity: 0.1;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg); }
 #deck-container svg.arrow {
 overflow: visible; }
 #deck-container svg.arrow path {
 fill: none;
 stroke: #94388e;
 stroke-width: 4px;
 stroke-opacity: 1;
 stroke-linejoin: round;
 overflow: visible; }
 #deck-container #cover img.draft-notice {
 width: 300px;
 top: 20px;
 left: 200px; }
 #deck-container .slide img {
 margin: 0; }
 #deck-container .tile {
 position: absolute; }
 #deck-container .slide> .lede, #deck-container .slide> svg, #deck-container .slide> img,
 #deck-container .slide> a> img, #deck-container .slide> .diagram, #deck-container .slide> .head {
 position: absolute; }
 #deck-container .slide> .header-position {
 top: 40px;
 left: 20px; }
 #deck-container .slide> .full-slide {
 top: 0;
 left: 0;
 width: 960px;
 height: 590px; }
 #deck-container .hidden, #deck-container .hidden * {
 opacity: 0; }
 #deck-container .no-display, #deck-container .no-display * {
 display: none; }
 #deck-container .charred {
 opacity: 0.3; }
 #deck-container .lede {
 font-family: Open Sans;
 font-size: 36px;
 color: #94388e;
 text-align: left; }
 #deck-container a.link-mark {
 text-decoration: none; }
 #deck-container .deck-help {
 background-color: #e5d5fe;
 padding: 0.5em 1em;
 border-radius: 5px;
 text-align: center;
 height: 2em;
 width: auto;
 color: black;
 -webkit-transition: 400ms;
 -moz-transition: 400ms;
 -ms-transition: 400ms;
 -o-transition: 400ms;
 transition: 400ms; }
 #deck-container .deck-help:hover {
 background-color: #c6a3fd; }
 #deck-container .catalog-tags {
 line-height: 2.4;
 text-align: left; }
 #deck-container .catalog-tags a {
 -webkit-transition: 400ms;
 -moz-transition: 400ms;
 -ms-transition: 400ms;
 -o-transition: 400ms;
 transition: 400ms;
 color: white;
 font-family: Open Sans, sans-serif;
 font-style: normal;
 font-weight: bold;
 font-size: 12px;
 padding: 5px;
 border-radius: 5px;
 margin: 2px;
 white-space: nowrap;
 background-color: #616b65; }
 #deck-container .catalog-tags a:hover {
 background-color: #79867e; }
.deck-help-panel {
 background-color: linen;
 position: absolute;
 z-index: 10;
 overflow: hidden;
 height: 0;
 width: 0;
 -webkit-transition: 400ms ease-in-out;
 -moz-transition: 400ms ease-in-out;
 -ms-transition: 400ms ease-in-out;
 -o-transition: 400ms ease-in-out;
 transition: 400ms ease-in-out;
 bottom: 0px;
 right: 0px;
 font-size: smaller;
 text-align: left;
 width: 450px; }
 .deck-help-panel p, .deck-help-panel h1, .deck-help-panel ul, .deck-help-panel li {
 margin: 0.5em 1em; }
 .deck-help-panel ul {
 list-style: square inside; }
 .deck-help-panel h1 {
 font-size: larger; }
 .deck-help-panel p.deck-help {
 border: 2px solid blue;
 cursor: pointer;
 border-radius: 10px;
 padding: 3px;
 text-align: center;
 width: 5em;
 color: blue;
 margin: 20px auto 0 50px; }
.deck-help-visible {
 height: 600px;
 /* won't fit if bigger */ }
.deck-toc-panel {
 background-color: linen;
 position: absolute;
 z-index: 10;
 overflow: hidden;
 height: 0;
 width: 0;
 -webkit-transition: 400ms ease-in-out;
 -moz-transition: 400ms ease-in-out;
 -ms-transition: 400ms ease-in-out;
 -o-transition: 400ms ease-in-out;
 transition: 400ms ease-in-out;
 bottom: 0;
 left: 0;
 width: 400px;
 text-align: left; }
 .deck-toc-panel p {
 margin: 0.5em 1em; }
.deck-toc-panel.show {
 height: 250px; }
.banner {
 background-color: black;
 width: 960px;
 margin: 0px auto;
 color: white;
 position: relative;
 min-height: 30px; }
 .banner .deck-status {
 cursor: pointer;
 position: absolute;
 font-size: 14px;
 bottom: 7px;
 right: 30px;
 margin: 0px; }
 .banner .deck-permalink {
 cursor: pointer;
 position: absolute;
 font-size: 14px;
 bottom: 2px;
 right: 10px; }
 .banner .deck-prev-link, .banner .deck-next-link, .banner .deck-help, .banner .deck-toc-button, .banner .deck-first-link {
 position: absolute;
 top: 5px;
 height: 25px;
 width: 25px;
 cursor: pointer; }
 .banner .deck-first-link {
 left: 300px; }
 .banner .deck-first-link:before {
 content: "⏮"; }
 .banner .deck-prev-link {
 left: 400px; }
 .banner .deck-prev-link:before {
 content: "⬅"; }
 .banner .deck-next-link {
 left: 450px; }
 .banner .deck-next-link:before {
 content: "⮕"; }
 .banner .deck-nav-disabled {
 display: none; }
 .banner .deck-help {
 left: 600px;
 content: "🛈"; }
 .banner .deck-toc-button {
 left: 650px; }
 .banner .logo {
 height: 30px;
 width: 125px;
 left: 10px;
 position: absolute; }
/* Default timing for all transitions */
.deck-loading-message {
 z-index: -100;
 position: absolute; }
.deck-goto-panel {
 display: none;
 background-color: #616b65;
 position: absolute;
 top: 300px;
 left: 400px;
 padding: 10px;
 z-index: 50; }
 .deck-goto-panel label {
 color: white; }
.deck-goto-panel.show {
 display: block; }
.deck-curtain {
 background-color: #616b65;
 z-index: 100;
 opacity: 0;
 min-height: 590px;
 min-width: 960px;
 position: absolute; }
.deck-curtain.dropped {
 opacity: 1; }
body {
 font-family: "Open Sans", serif; }
#deck-container #cover .lede {
 font-weight: bold; }
#deck-container #cover img.draft-notice {
 right: 50px;
 left: auto; }
#deck-container #cover .ack {
 font-size: 80%; }
#deck-container #cover .author p {
 clear: none;
 font-size: 90%; }
#deck-container #cover .author img {
 float: left;
 width: 80px;
 display: block;
 margin: 0.5em 1.5em 0 0;
 box-shadow: 3px 3px 4px #555555; }
#deck-container #cover .deck-help {
 background-color: #ef5ba1;
 color: white;
 padding: 0.5em 1em;
 border-radius: 5px;
 text-align: center;
 height: 2em;
 width: auto;
 color: white;
 -webkit-transition: 400ms;
 -moz-transition: 400ms;
 -ms-transition: 400ms;
 -o-transition: 400ms;
 transition: 400ms; }
 #deck-container #cover .deck-help:hover {
 background-color: #f6a1c9; }
#deck-container .small {
 font-size: 80%; }
#deck-container .lede {
 font-style: italic; }
#deck-container .utter {
 font-size: 120%;
 font-style: italic;
 top: 30px;
 left: 100px;
 width: auto; }
 #deck-container .utter img {
 float: left;
 display: block;
 padding: 0.5em 10px 0.5em 0;
 vertical-align: top;
 width: 50px;
 height: 50px; }
 #deck-container .utter p {
 float: left;
 clear: none;
 width: 300px; }
#deck-container .workflow-explain {
 color: #1a73ba;
 font-size: 80%;
 bottom: 110px;
 left: 200px; }
#deck-container .workflow-type {
 font-size: 250%;
 font-weight: bold;
 background-color: #1a73ba;
 color: white;
 bottom: 20px;
 left: 0;
 width: 960px; }
 #deck-container .workflow-type p {
 text-align: center; }
#deck-container #tdd svg.cycle, #deck-container #tdd-hats svg.cycle {
 bottom: 130px;
 left: 300px;
 -moz-transition-duration: 400ms;
 -webkit-transition-duration: 400ms;
 -o-transition-duration: 400ms;
 transition-duration: 400ms; }
#deck-container #tdd svg.cycle.end, #deck-container #tdd-hats svg.cycle.end {
 left: 10px;
 bottom: 130px; }
#deck-container #tdd ul, #deck-container #tdd-hats ul {
 padding-left: 50px; }
#deck-container #tdd-hats .next {
 left: -500px;
 top: 200px; }
#deck-container #tdd-hats .next.visible {
 left: 30px; }
#deck-container #opp-flow .highlight-description {
 top: 10px;
 left: 230px;
 min-width: 400px;
 min-height: 100px;
 padding: 20px; }
#deck-container #opp-flow .highlight-panel {
 height: 90px;
 width: 150px; }
#deck-container #opp-flow .highlight-panel.see-poor {
 top: 60px;
 left: 45px; }
#deck-container #opp-flow .highlight-panel.fix-now {
 top: 230px;
 left: 55px; }
#deck-container #opp-flow .highlight-panel.get-green {
 top: 230px;
 left: 240px; }
#deck-container #opp-flow .highlight-panel.y-clean {
 top: 230px;
 left: 460px; }
#deck-container #opp-flow .highlight-panel.n-finish {
 top: 355px;
 left: 205px; }
#deck-container #opp-flow .highlight-panel.done {
 top: 445px;
 left: 715px; }
#deck-container #tension .sub .lede {
 font-size: 24pt;
 width: 300pt; }
#deck-container #final .workflow-list {
 font-size: 200%;
 font-weight: bold;
 background-color: #1a73ba;
 color: white;
 padding: 20px 5px; }
#deck-container svg.arrow {
 overflow: visible; }
 #deck-container svg.arrow path {
 fill: none;
 stroke: #94388e;
 stroke-width: 4px;
 stroke-opacity: 1;
 stroke-linejoin: round;
 overflow: visible; }
/* 
Problem with transitions for TDD cycle move. It looks like the
declaration in base SCSS of fadeable - specifically the line
@include transition(opacity 500ms ease-in-out); messes up
other transitions. Removing that line makes the cycle move
work correctly.
But removing that line removes transitions on fades - so will need
to figure out how to get that back when needed. Either by adding
class to elements when I fade them or generating jquery fade
commands (which may be better as that hides them). 
*/
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://martinfowler.com/articles/workflowsOfRefactoring/infodeck.css">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://martinfowler.com/articles/workflowsOfRefactoring/infodeck.css" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>