jrnl/docs/_themes/jrnl/static/css/jrnl.css

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden] {
  display: none;
}
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
a:focus {
  outline: thin dotted;
}
a:active,
a:hover {
  outline: 0;
}
h1 {
  font-size: 2em;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
mark {
  background: #ff0;
  color: #000000;
}
code,
kbd,
pre,
samp {
  font-family: monospace,serif;
  font-size: 1em;
}
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 0;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}
button,
input {
  line-height: normal;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
input[disabled] {
  cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
  vertical-align: top;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
body {
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 300;
  color: #333;
  background: #f7f8f9;
}
body:not(.landing) {
  padding-top: 40px;
}
body:not(.landing) h2 {
  margin-top: 40px;
}
input {
  background: transparent;
  border: 1px solid #999;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 2px 5px;
  color: #666;
  font-family: "Open Sans";
  font-weight: 300;
  outline: none;
}
input:focus {
  background: white;
}
div.related {
  background: rgba(255, 200, 200, 0.2);
}
* > a.headerlink {
  display: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
}
a:link,
a:visited {
  color: #deaa09;
  text-decoration: none;
}
a:hover,
a:active {
  text-decoration: underline;
  color: #f6c324;
}
.literal {
  color: #47375d;
  font-size: 1em;
  background: #e8e2ee;
  padding: 1px 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: inset 0px 0px 0px 1px #c0b2d2;
  -moz-box-shadow: inset 0px 0px 0px 1px #c0b2d2;
  -o-box-shadow: inset 0px 0px 0px 1px #c0b2d2;
  box-shadow: inset 0px 0px 0px 1px #c0b2d2;
}
.note {
  background: #8c72ac;
  background-image: -moz-linear-gradient(top, #8c72ac 0%, #6e5691 100%);
  background-image: -webkit-linear-gradient(top, #8c72ac 0%, #6e5691 100%);
  background-image: -o-linear-gradient(top, #8c72ac 0%, #6e5691 100%);
  background-image: linear-gradient(to bottom, #8c72ac 0%, #6e5691 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8c72ac', endColorstr='#6e5691', GradientType=0);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 2px 3px #413155;
  -moz-box-shadow: 0px 2px 3px #413155;
  -o-box-shadow: 0px 2px 3px #413155;
  box-shadow: 0px 2px 3px #413155;
  padding: 10px 20px 10px 70px;
  position: relative;
  color: white;
}
.note .admonition-title {
  display: none;
}
.note a {
  color: #fade86;
}
.note:before {
  content: "";
  display: block;
  background-image: url("../img/icons.png");
  width: 32px;
  height: 32px;
  display: inline-block;
  font-size: 40px;
  background-size: 200px 120px;
  background-position: -2em -2em;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 20px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  .note:before {
    background-image: url("../img/icons@2x.png");
  }
}
.note:before.secure {
  background-position: 0em 0em;
}
.note:before.future {
  background-position: -1em 0em;
}
.note:before.search {
  background-position: -2em 0em;
}
.note:before.nli {
  background-position: -3em 0em;
}
.note:before.share {
  background-position: 0em -1em;
}
.note:before.sync {
  background-position: 0em -1em;
}
.note:before.dayone {
  background-position: -1em -1em;
}
.note:before.github {
  background-position: -2em -1em;
}
.note:before.folders {
  background-position: -3em -1em;
}
.note:before.cal {
  background-position: -4em -1em;
}
.note:before.left {
  background-position: 0em -2em;
}
.note:before.right {
  background-position: -1em -2em;
}
.note:before.info {
  background-position: -2em -2em;
}
.note .literal,
.note .highlight-note {
  color: white;
  background: #6b518a;
  padding: 1px 3px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: inset 0px 0px 0px 1px #8c72ac;
  -moz-box-shadow: inset 0px 0px 0px 1px #8c72ac;
  -o-box-shadow: inset 0px 0px 0px 1px #8c72ac;
  box-shadow: inset 0px 0px 0px 1px #8c72ac;
}
.note .highlight-note {
  padding: 1px 10px;
}
.note .highlight-note pre:before {
  content: "$ ";
  color: #deaa09;
}
.highlight {
  background: transparent !important;
}
.highlight-output {
  background: #2f1e34;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 1px 20px;
  margin: 40px auto;
  width: 500px;
  -webkit-box-shadow: 0px 1px 8px #a0acb7;
  -moz-box-shadow: 0px 1px 8px #a0acb7;
  -o-box-shadow: 0px 1px 8px #a0acb7;
  box-shadow: 0px 1px 8px #a0acb7;
  position: relative;
  color: #f7f8f9;
  font-family: "Monaco", "Courier New";
  font-size: 12pt;
  background: #49374e;
}
.highlight-output #args {
  color: #f6f7b9;
}
.highlight-output #output {
  color: #9278b5;
}
.highlight-javascript {
  background: #2f1e34;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 1px 20px;
  margin: 40px auto;
  width: 500px;
  -webkit-box-shadow: 0px 1px 8px #a0acb7;
  -moz-box-shadow: 0px 1px 8px #a0acb7;
  -o-box-shadow: 0px 1px 8px #a0acb7;
  box-shadow: 0px 1px 8px #a0acb7;
  position: relative;
  color: #f7f8f9;
  font-family: "Monaco", "Courier New";
  font-size: 12pt;
  background: #49374e;
}
.highlight-javascript #args {
  color: #f6f7b9;
}
.highlight-javascript #output {
  color: #9278b5;
}
.highlight-python {
  background: #2f1e34;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 1px 20px;
  margin: 40px auto;
  width: 500px;
  -webkit-box-shadow: 0px 1px 8px #a0acb7;
  -moz-box-shadow: 0px 1px 8px #a0acb7;
  -o-box-shadow: 0px 1px 8px #a0acb7;
  box-shadow: 0px 1px 8px #a0acb7;
  position: relative;
  color: #f7f8f9;
  font-family: "Monaco", "Courier New";
  font-size: 12pt;
  padding: 50px 20px 10px 20px;
}
.highlight-python #args {
  color: #f6f7b9;
}
.highlight-python #output {
  color: #9278b5;
}
.highlight-python:before {
  content: "Terminal";
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  -webkit-box-shadow: inset 0px 1px 0px #f4f4f4, inset 0px -1px 0px #888888;
  -moz-box-shadow: inset 0px 1px 0px #f4f4f4, inset 0px -1px 0px #888888;
  -o-box-shadow: inset 0px 1px 0px #f4f4f4, inset 0px -1px 0px #888888;
  box-shadow: inset 0px 1px 0px #f4f4f4, inset 0px -1px 0px #888888;
  margin-top: -50px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  color: #777;
  text-shadow: 0px 1px 0px #ddd;
  -webkit-border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
  background: #eaeaea;
  background-image: -moz-linear-gradient(top, #eaeaea 0%, #bababa 100%);
  background-image: -webkit-linear-gradient(top, #eaeaea 0%, #bababa 100%);
  background-image: -o-linear-gradient(top, #eaeaea 0%, #bababa 100%);
  background-image: linear-gradient(to bottom, #eaeaea 0%, #bababa 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#bababa', GradientType=0);
}
.highlight-python:after {
  content: "";
  width: 48px;
  height: 30px;
  position: absolute;
  top: 0px;
  left: 10px;
  background: url(../img/terminal.png) no-repeat center center;
}
.highlight-python pre {
  margin: 0 0 10px 0;
}
.highlight-python pre:before {
  content: "$ ";
  color: #deaa09;
}
*:hover > a.headerlink {
  display: inline;
  color: #c0b2d2;
  margin-left: 10px;
  text-decoration: none;
}
*:hover > a.headerlink:hover {
  color: #725794;
}
tt {
  color: #47375d;
  font-size: 1.2em;
}
ul li {
  margin-bottom: 10px;
}
div.document {
  max-width: 900px;
  margin: 20px auto;
  position: relative;
}
div.documentwrapper {
  margin-left: 240px;
  padding: 0;
}
aside {
  position: absolute;
  width: 220px;
  top: 0px;
  color: #999;
}
aside .logo {
  margin: 0 auto 20px auto;
  display: block;
  width: 90px;
  height: 98px;
}
aside h2,
aside h3,
aside h3 a:link,
aside h3 a:visited {
  color: #777;
}
aside a:link,
aside a:visited {
  color: #999;
}
aside a:hover,
aside a:active {
  color: #deaa09;
}
aside input[type=submit] {
  display: none;
}
aside > ul {
  margin: 0 4px;
  padding: 0;
  list-style: none;
}
aside > ul > li {
  margin-bottom: 10px;
  font-size: 18px;
  color: #777;
}
aside > ul > li a:link,
aside > ul > li a:visited {
  color: #777;
}
aside > ul > li ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
  font-size: 16px;
  color: #999;
}
aside > ul > li ul a:link,
aside > ul > li ul a:visited {
  color: #999;
}
div.footer {
  font-size: .8em;
  text-align: center;
  margin: 40px 0;
  color: #999;
}
div.footer a:link,
div.footer a:visited {
  color: #555;
}
.icon {
  background-image: url("../img/icons.png");
  width: 32px;
  height: 32px;
  display: inline-block;
  font-size: 40px;
  background-size: 200px 120px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  .icon {
    background-image: url("../img/icons@2x.png");
  }
}
.icon.secure {
  background-position: 0em 0em;
}
.icon.future {
  background-position: -1em 0em;
}
.icon.search {
  background-position: -2em 0em;
}
.icon.nli {
  background-position: -3em 0em;
}
.icon.share {
  background-position: 0em -1em;
}
.icon.sync {
  background-position: 0em -1em;
}
.icon.dayone {
  background-position: -1em -1em;
}
.icon.github {
  background-position: -2em -1em;
}
.icon.folders {
  background-position: -3em -1em;
}
.icon.cal {
  background-position: -4em -1em;
}
.icon.left {
  background-position: 0em -2em;
}
.icon.right {
  background-position: -1em -2em;
}
.icon.info {
  background-position: -2em -2em;
}
.pre-block {
  background: #2f1e34;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 1px 20px;
  margin: 40px auto;
  width: 500px;
  -webkit-box-shadow: 0px 1px 8px #a0acb7;
  -moz-box-shadow: 0px 1px 8px #a0acb7;
  -o-box-shadow: 0px 1px 8px #a0acb7;
  box-shadow: 0px 1px 8px #a0acb7;
  position: relative;
  color: #f7f8f9;
  font-family: "Monaco", "Courier New";
  font-size: 12pt;
}
.pre-block #args {
  color: #f6f7b9;
}
.pre-block #output {
  color: #9278b5;
}
.terminal {
  background: #2f1e34;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 1px 20px;
  margin: 40px auto;
  width: 500px;
  -webkit-box-shadow: 0px 1px 8px #a0acb7;
  -moz-box-shadow: 0px 1px 8px #a0acb7;
  -o-box-shadow: 0px 1px 8px #a0acb7;
  box-shadow: 0px 1px 8px #a0acb7;
  position: relative;
  color: #f7f8f9;
  font-family: "Monaco", "Courier New";
  font-size: 12pt;
  padding: 50px 20px 10px 20px;
}
.terminal #args {
  color: #f6f7b9;
}
.terminal #output {
  color: #9278b5;
}
.terminal:before {
  content: "Terminal";
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  -webkit-box-shadow: inset 0px 1px 0px #f4f4f4, inset 0px -1px 0px #888888;
  -moz-box-shadow: inset 0px 1px 0px #f4f4f4, inset 0px -1px 0px #888888;
  -o-box-shadow: inset 0px 1px 0px #f4f4f4, inset 0px -1px 0px #888888;
  box-shadow: inset 0px 1px 0px #f4f4f4, inset 0px -1px 0px #888888;
  margin-top: -50px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  color: #777;
  text-shadow: 0px 1px 0px #ddd;
  -webkit-border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
  background: #eaeaea;
  background-image: -moz-linear-gradient(top, #eaeaea 0%, #bababa 100%);
  background-image: -webkit-linear-gradient(top, #eaeaea 0%, #bababa 100%);
  background-image: -o-linear-gradient(top, #eaeaea 0%, #bababa 100%);
  background-image: linear-gradient(to bottom, #eaeaea 0%, #bababa 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#bababa', GradientType=0);
}
.terminal:after {
  content: "";
  width: 48px;
  height: 30px;
  position: absolute;
  top: 0px;
  left: 10px;
  background: url(../img/terminal.png) no-repeat center center;
}
body#landing {
  background-color: #47375d;
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 300;
}
body#landing #twitter {
  display: block;
  position: absolute;
  top: 20px;
  right: 20px;
  border: 1px solid #47375d;
  padding: 5px 10px 5px 30px;
  color: #47375d;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: url(../img/twitter.png) left center no-repeat transparent;
  background: red;
}
body#landing #title,
body#landing .row3,
body#landing .row4,
body#landing #prompt {
  width: 900px;
  margin: 0px auto;
}
body#landing #upper {
  *zoom: 1;
  background: #f7f8f9;
  -webkit-box-shadow: inset 0px -6px 6px -3px #dadfe3;
  -moz-box-shadow: inset 0px -6px 6px -3px #dadfe3;
  -o-box-shadow: inset 0px -6px 6px -3px #dadfe3;
  box-shadow: inset 0px -6px 6px -3px #dadfe3;
}
body#landing #upper:before,
body#landing #upper:after {
  content: " ";
  display: table;
}
body#landing #upper:after {
  clear: both;
}
body#landing #upper #title {
  width: 650px;
  margin: 150px auto 75px auto;
}
body#landing #upper img {
  float: left;
  margin-right: 30px;
}
body#landing #upper h1 {
  color: #564371;
  font-weight: 300;
}
body#landing #upper #prompt {
  width: 640px;
  margin: 0 auto;
  *zoom: 1;
}
body#landing #upper #prompt:before,
body#landing #upper #prompt:after {
  content: " ";
  display: table;
}
body#landing #upper #prompt:after {
  clear: both;
}
body#landing #upper .terminal {
  -webkit-border-radius: 6px 6px 0px 0px;
  -moz-border-radius: 6px 6px 0px 0px;
  border-radius: 6px 6px 0px 0px;
  float: left;
  margin: 0px;
  width: 500px;
  min-height: 134px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body#landing #upper .pleft,
body#landing #upper .pright {
  text-align: center;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  padding-top: 50px;
  width: 70px;
}
body#landing #upper .pleft i,
body#landing #upper .pright i {
  opacity: 0.6;
  filter: alpha(opacity= 60 );
}
body#landing #upper .pleft i:hover,
body#landing #upper .pright i:hover {
  opacity: 10;
  filter: alpha(opacity= 1000 );
  cursor: pointer;
}
body#landing #nav {
  background: #7c95ca;
  background-image: -moz-linear-gradient(top, #7c95ca 0%, #5e7dc5 100%);
  background-image: -webkit-linear-gradient(top, #7c95ca 0%, #5e7dc5 100%);
  background-image: -o-linear-gradient(top, #7c95ca 0%, #5e7dc5 100%);
  background-image: linear-gradient(to bottom, #7c95ca 0%, #5e7dc5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7c95ca', endColorstr='#5e7dc5', GradientType=0);
  height: 60px;
  -webkit-box-shadow: 0px 6px 6px -3px #413155;
  -moz-box-shadow: 0px 6px 6px -3px #413155;
  -o-box-shadow: 0px 6px 6px -3px #413155;
  box-shadow: 0px 6px 6px -3px #413155;
  text-align: center;
}
body#landing #nav a {
  color: #f7f8f9;
  text-shadow: 0px -1px 0px #253865;
  text-decoration: none;
  font-size: 14pt;
  line-height: 60px;
  margin: 0 40px;
}
body#landing #nav a:hover {
  color: #f8d055;
  text-shadow: 0px -1px 0px #947206;
}
body#landing #nav a.cta {
  background: #725794;
  background-image: -moz-linear-gradient(top, #725794 0%, #564371 100%);
  background-image: -webkit-linear-gradient(top, #725794 0%, #564371 100%);
  background-image: -o-linear-gradient(top, #725794 0%, #564371 100%);
  background-image: linear-gradient(to bottom, #725794 0%, #564371 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#725794', endColorstr='#564371', GradientType=0);
  -webkit-box-shadow: 0px 1px 0px #413155;
  -moz-box-shadow: 0px 1px 0px #413155;
  -o-box-shadow: 0px 1px 0px #413155;
  box-shadow: 0px 1px 0px #413155;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 6px 10px 5px 10px;
}
body#landing #nav a.cta:hover {
  background: #f6c324;
  background-image: -moz-linear-gradient(top, #f6c324 0%, #c59708 100%);
  background-image: -webkit-linear-gradient(top, #f6c324 0%, #c59708 100%);
  background-image: -o-linear-gradient(top, #f6c324 0%, #c59708 100%);
  background-image: linear-gradient(to bottom, #f6c324 0%, #c59708 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6c324', endColorstr='#c59708', GradientType=0);
  -webkit-box-shadow: 0px 1px 0px #947206;
  -moz-box-shadow: 0px 1px 0px #947206;
  -o-box-shadow: 0px 1px 0px #947206;
  box-shadow: 0px 1px 0px #947206;
  text-shadow: 0px -1px 0px #947206;
  color: #f7f8f9;
}
body#landing #lower {
  color: #f7f8f9;
  padding-top: 40px;
}
body#landing #lower a {
  color: #deaa09;
  text-decoration: none;
}
body#landing #lower a:hover {
  color: #f8d055;
  text-decoration: underline;
}
body#landing #lower .row3,
body#landing #lower .row4 {
  *zoom: 1;
  margin-bottom: 20px;
}
body#landing #lower .row3:before,
body#landing #lower .row4:before,
body#landing #lower .row3:after,
body#landing #lower .row4:after {
  content: " ";
  display: table;
}
body#landing #lower .row3:after,
body#landing #lower .row4:after {
  clear: both;
}
body#landing #lower .row3 .col,
body#landing #lower .row4 .col {
  position: relative;
  padding-left: 40px;
  float: left;
  width: 25%;
  padding-right: 2%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body#landing #lower .row3 .col i,
body#landing #lower .row4 .col i {
  position: absolute;
  left: 0;
  top: 16px;
}
body#landing #lower .row3 .col h3,
body#landing #lower .row4 .col h3 {
  font-size: 12pt;
  margin-bottom: .5em;
}
body#landing #lower .row3 .col p,
body#landing #lower .row4 .col p {
  font-size: 10pt;
  margin: 0;
}
body#landing #lower .row3 .col:last-child,
body#landing #lower .row4 .col:last-child {
  padding-right: 0;
}
body#landing #lower .row3 .col {
  width: 33.3333%;
}
body#landing #lower .row4 .col {
  color: #d4d1da;
}
body#landing #lower .row4 .col i {
  opacity: 0.8;
  filter: alpha(opacity= 80 );
}