Org Web Adapter

Editing export/styles/readtheorg/readtheorg.org

#+TITLE:     ReadTheOrg style
#+AUTHOR:    Fabrice Niessen
#+EMAIL:     (concat "fniessen" at-sign "pirilampo.org")
#+DESCRIPTION:
#+KEYWORDS:
#+LANGUAGE:  en
#+OPTIONS:   H:4 num:t toc:2

#+SETUPFILE: ~/.dotfiles/org/theme-readtheorg-local-abs.setup

# See http://pandoc.org/README.html for another organization of the sections

* Overview

Get the lowdown on the key pieces of ReadTheOrg's infrastructure, including our
approach to better HTML export.

* Typography
  :PROPERTIES:
  :header-args: :tangle css/readtheorg.css
  :END:

#+begin_src css
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
#+end_src

** Headings

#+begin_src css
h1,h2,h3,h4,h5,h6,legend{
    font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif;
    font-weight:700;
    margin-top:0;
}

h1{
    font-size:175%;
}

.subtitle{
    font-size:95%; /* of h1 */
}

h2{
    font-size:150%;
}

h3{
    font-size:125%;
}

h4{
    font-size:115%;
}

h5{
    font-size:110%;
}

h6{
    font-size:100%;
}

h4,h5,h6{
    color:#2980B9;
    font-weight:300;
}
#+end_src

** Body

#+begin_src css
html{
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    font-size:100%;
    height:100%;
    overflow-x:hidden;
}

body{
    background:#edf0f2;
    color:#404040;
    font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
    font-weight:normal;
    margin:0;
    min-height:100%;
    overflow-x:hidden;
}

#content{
    background:#fcfcfc;
    height:100%;
    margin-left:300px;
    /* margin:auto; */
    max-width:800px;
    min-height:100%;
    padding:1.618em 3.236em;
}

p{
    font-size:16px;
    line-height:24px;
    margin:0px 0px 24px 0px;
}
#+end_src

** Bold

#+begin_src css
b,strong{
    font-weight:bold}
#+end_src

** Blockquotes

#+begin_src css
blockquote{
    background-color: #F0F0F0;
    border-left:5px solid #CCCCCC;
    font-style:italic;
    line-height:24px;
    margin:0px 0px 24px 0px;
    /* margin-left:24px; */
    padding: 6px 20px;
}
#+end_src

** Lists

#+begin_src css
ul,ol,dl{
    line-height:24px;
    list-style-image:none;
    /* list-style:none; */
    margin:0px 0px 24px 0px;
    padding:0;
}
#+end_src

#+begin_src css
li{
    margin-left: 24px;
}

dd{
    margin:0;
}
#+end_src

#+begin_src css
#content .section ul,#content .toctree-wrapper ul,article ul{
    list-style:disc;
    line-height:24px;
    margin-bottom:24px}

#content .section ul li,#content .toctree-wrapper ul li,article ul li{
    list-style:disc;
    margin-left:24px}

#content .section ul li p:last-child,#content .toctree-wrapper ul li p:last-child,article ul li p:last-child{
                                                                                                                                  margin-bottom:0}

#content .section ul li ul,#content .toctree-wrapper ul li ul,article ul li ul{
    margin-bottom:0}

#content .section ul li li,#content .toctree-wrapper ul li li,article ul li li{
    list-style:circle}

#content .section ul li li li,#content .toctree-wrapper ul li li li,article ul li li li{
    list-style:square}

#content .section ul li ol li,#content .toctree-wrapper ul li ol li,article ul li ol li{
    list-style:decimal}

#content .section ol,#content ol,article ol{
    list-style:decimal;
    line-height:24px;
    margin-bottom:24px}

#content .section ol li,#content ol li,article ol li{
    list-style:decimal;
    margin-left:24px}

#content .section ol li p:last-child,#content ol li p:last-child,article ol li p:last-child{
                                                                                                                           margin-bottom:0}

#content .section ol li ul,#content ol li ul,article ol li ul{
    margin-bottom:0}

#content .section ol li ul li,#content ol li ul li,article ol li ul li{
    list-style:disc}
#+end_src

*** Unordered

*** Ordered

*** Description

#+begin_src css
dl dt{
    font-weight:bold;
}

dl p,dl table,dl ul,dl ol{
    margin-bottom:12px !important;
}

dl dd{
    margin:0 0 12px 24px;
}
#+end_src

* Media queries
  :PROPERTIES:
  :header-args: :tangle css/readtheorg.css
  :END:

#+begin_src css
@media print{
    .codeblock,pre.src{
        white-space:pre.src-wrap}
}

@media print{
    html,body,section{
        background:none !important}

,*{
        box-shadow:none !important;
        text-shadow:none !important;
        filter:none !important;
        -ms-filter:none !important}

a,a:visited{
          text-decoration:underline}

pre.src,blockquote{
        page-break-inside:avoid}

thead{
        display:table-header-group}

tr,img{
        page-break-inside:avoid}

img{
        max-width:100% !important}

@page{
        margin:0.5cm}

p,h2,h3{
        orphans:3;
        widows:3}

h2,h3{
        page-break-after:avoid}
}

@media print{
    #postamble{
        display:none}

#content{
        margin-left:0}
}

@media print{
    #table-of-contents{
        display:none}

@page{
        size: auto;
        margin: 25mm 25mm 25mm 25mm;}

body {
        margin: 0px;}
}
#+end_src

#+begin_src css
@media screen and (max-width: 768px){
}
#+end_src

#+begin_src css
@media only screen and (max-width: 480px){
}

@media screen and (max-width: 768px){
    .tablet-hide{
        display:none}
}

@media screen and (max-width: 480px){
    .mobile-hide{
        display:none}
}
#+end_src

#+begin_src css
@media screen and (max-width: 480px){
}
#+end_src

#+begin_src css
@media screen and (max-width: 768px){
    #content{
        margin-left:0}

#content #content{
        padding:1.618em}

#content.shift{
        position:fixed;
        min-width:100%;
        left:85%;
        top:0;
        height:100%;
        overflow:hidden}
}

@media screen and (min-width: 1400px){
    #content{
        background:rgba(0,0,0,0.05)}

#content{
        background:#fcfcfc}
}
#+end_src

#+begin_src css
@media screen and (max-width: 768px){
    #copyright{
        width:85%;
        display:none}

#copyright.shift{
        display:block}

img{
        width:100%;
        height:auto}
}
#+end_src

#+begin_src css
@media screen and (max-width: 480px){
    #content .sidebar{
        width:100%}
}
#+end_src

* Code
  :PROPERTIES:
  :header-args: :tangle css/readtheorg.css
  :END:

** Inline

#+begin_src css
code{
    background:#fff;
    border:solid 1px #e1e4e5;
    /* color:#000;  for clickable code */
    font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;
    font-size:75%;
    max-width:100%;
    overflow-x:auto;
    padding:0 5px;
    white-space:nowrap;
}
#+end_src

** Basic block

#+begin_src css
.codeblock-example{
    border:1px solid #e1e4e5;
    border-bottom:none;
    padding:24px;
    padding-top:48px;
    font-weight:500;
    background:#fff;
    position:relative}

.codeblock-example:after{
    content:"Example";
    position:absolute;
    top:0px;
    left:0px;
    background:#9B59B6;
    color:#fff;
    padding:6px 12px}

.codeblock-example.prettyprint-example-only{
    border:1px solid #e1e4e5;
    margin-bottom:24px}

.codeblock,pre.src,#content .literal-block{
    border:1px solid #e1e4e5;
    padding:12px;
    overflow-x:auto;
    background:#fff;
    margin:1px 0 24px 0}

pre.src{
    /* color:#404040; */
    display:block;
    font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;
    font-size:12px;
    line-height:1.5;
    margin:1px 0px 24px 0px;
    overflow:auto;
    padding:12px;
    white-space:pre;
}
#+end_src

** Sample output

#+begin_src css
.example{
    background:#f3f6f6;
    border:1px solid #e1e4e5;
    color:#404040;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom:24px;
    padding:12px;
}
#+end_src

* Tables
  :PROPERTIES:
  :header-args: :tangle css/readtheorg.css
  :END:

** Basic example

#+begin_src css
table{
    border-collapse:collapse;
    border-spacing:0;
    empty-cells:show;
    margin-bottom:24px;
    border-bottom:1px solid #e1e4e5;
}

td{
    vertical-align:top}

table td,table th{
    font-size:90%;
    margin:0;
    overflow:visible;
    padding:8px 16px;
    background-color:white;
    border:1px solid #e1e4e5;
}

table thead th{
    font-weight:bold;
    border-top:3px solid #e1e4e5;
    border-bottom:1px solid #e1e4e5;
}
#+end_src

** Optional table caption

#+begin_src css
table caption{
    color:#000;
    font:italic 85%/1 arial,sans-serif;
    padding:1em 0;
}
#+end_src

** Striped rows

#+begin_src css
table tr:nth-child(2n-1) td{
    background-color:#f3f6f6;
}

table tr:nth-child(2n) td{
    background-color:white;
}
#+end_src

* Images
  :PROPERTIES:
  :header-args: :tangle css/readtheorg.css
  :END:

** Optional image caption

#+begin_src css
.figure p{
    color:#000;
    font:italic 85%/1 arial,sans-serif;
    padding:1em 0;
}
#+end_src

* Helper classes
  :PROPERTIES:
  :header-args: :tangle css/readtheorg.css
  :END:

#+begin_src css
.rotate-90{
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform:rotate(90deg);
}

.rotate-270{
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    transform:rotate(270deg);
}
#+end_src

* Responsive utilities
  :PROPERTIES:
  :header-args: :tangle css/readtheorg.css
  :END:

Responsive for sidebar:

#+begin_src css
#toggle-sidebar,
#table-of-contents .close-sidebar {
    display: none;
}

@media screen and (max-width: 768px) {
    #table-of-contents {
        display: none;
        width: 60%;
    }

#table-of-contents h2 a {
        display: block;
    }

#table-of-contents:target {
        display: block;
    }

#copyright, #postamble {
        display: none;
    }

#toggle-sidebar {
        background-color: #2980B9;
        display: block;
        margin-bottom: 1.6em;
        padding: 0.6em;
        text-align: center;
    }

#toggle-sidebar h2 {
        background-color:#2980B9;
        width:100%;
        height:50px;
        left:0;
        top:0;
        color: white;
        font-size: 100%;
        line-height: 50px;
        position:fixed;
        margin: 0;
        padding: 0;
        opacity:0.7;
        z-index: 10;
    }

#table-of-contents .close-sidebar {
       color: rgba(255, 255, 255, 0.3);
       display: inline-block;
       margin: 0px 10px 0px 45px;
       padding: 10px;
    }
}
#+end_src

* CSS
  :PROPERTIES:
  :header-args: :tangle css/readtheorg.css
  :END:

#+begin_src css
*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

figcaption,figure,footer,header,hgroup,nav{
    display:block}
#+end_src

#+begin_src css
ins{
    background:#ff9;
    color:#000;
    text-decoration:none}

mark{
    background:#ff0;
    color:#000;
    font-style:italic;
    font-weight:bold}
#+end_src

#+begin_src css
small{
    font-size:85%}

sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline}

sup{
    top:-0.5em}

sub{
    bottom:-0.25em}
#+end_src

#+begin_src css
img{
    -ms-interpolation-mode:bicubic;
    vertical-align:middle;
    max-width:100%}

svg:not(:root){
    overflow:hidden}

figure{
    margin:0}

label{
    cursor:pointer}

legend{
    border:0;
    margin-left:-7px;
    padding:0;
    white-space:normal}
#+end_src

#+begin_src css
.fa:before,#content .admonition-title:before,#content h1 .headerlink:before,#content h2 .headerlink:before,#content h3 .headerlink:before,#content h4 .headerlink:before,#content h5 .headerlink:before,#content h6 .headerlink:before,#content dl dt .headerlink:before,.icon:before,.wy-dropdown .caret:before,.wy-inline-validate.wy-inline-validate-success .wy-input-context:before,.wy-inline-validate.wy-inline-validate-danger .wy-input-context:before,.wy-inline-validate.wy-inline-validate-warning .wy-input-context:before,.wy-inline-validate.wy-inline-validate-info .wy-input-context:before,.wy-alert,#content .note,#content .attention,#content .caution,#content .danger,#content .error,#content .hint,#content .important,#content .tip,#content .warning,#content .seealso,#content .admonitiontodo,.btn,input[type="text"],input[type="password"],input[type="email"],input[type="url"],input[type="date"],input[type="month"],input[type="time"],input[type="datetime"],input[type="datetime-local"],input[type="week"],input[type="number"],input[type="search"],input[type="tel"],input[type="color"],select,textarea,#table-of-contents li.on a,#table-of-contents li.current>a,.wy-side-nav-search>a,.wy-side-nav-search .wy-dropdown>a,.wy-nav-top a{
    -webkit-font-smoothing:antialiased}

/*!
 *  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */@font-face{
    font-family:'FontAwesome';
    src:url("../fonts/fontawesome-webfont.eot?v=4.1.0");
    src:url("../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0") format("embedded-opentype"),url("../fonts/fontawesome-webfont.woff?v=4.1.0") format("woff"),url("../fonts/fontawesome-webfont.ttf?v=4.1.0") format("truetype"),url("../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular") format("svg");
    font-weight:normal;
    font-style:normal}

.fa,#content .admonition-title,.icon{
    display:inline-block;
    font-family:FontAwesome;
    font-style:normal;
    font-weight:normal;
    line-height:1;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale}

.fa-ul{
    padding-left:0;
    margin-left:2.14286em;
    list-style-type:none}

.fa-ul>li{
    position:relative}

.fa-li{
    position:absolute;
    left:-2.14286em;
    width:2.14286em;
    top:0.14286em;
    text-align:center}

.fa-li.fa-lg{
    left:-1.85714em}

.fa-border{
    padding:.2em .25em .15em;
    border:solid 0.08em #eee;
    border-radius:.1em}

.fa,#content .admonition-title{
    font-family:inherit}

.fa:before,#content .admonition-title:before{
    font-family:"FontAwesome";
    display:inline-block;
    font-style:normal;
    font-weight:normal;
    line-height:1;
    text-decoration:inherit}

a .fa,a #content .admonition-title,#content a .admonition-title{
    display:inline-block;
    text-decoration:inherit}

.nav #content .admonition-title,#content .nav .admonition-title,.nav .icon{
    display:inline}

.wy-alert,#content .note,#content .attention,#content .caution,#content .danger,#content .error,#content .hint,#content .important,#content .tip,#content .warning,#content .seealso,#content .admonitiontodo{
    padding:12px;
    line-height:24px;
    margin-bottom:24px;
    /* background:#e7f2fa; */
}

.wy-alert-title,#content .admonition-title{
    color:#fff;
    font-weight:bold;
    display:block;
    color:#fff;
    /* background:#6ab0de; */
    /* margin:-12px; */
    padding:6px 12px;
    margin-bottom:0px}

#content .danger,#content .error{
    background:#fdf3f2}

.wy-alert.wy-alert-warning,#content .wy-alert-warning.note,#content .attention,#content .caution,#content .wy-alert-warning.danger,#content .wy-alert-warning.error,#content .wy-alert-warning.hint,#content .wy-alert-warning.important,#content .wy-alert-warning.tip,#content .warning,#content .wy-alert-warning.seealso,#content .admonitiontodo{
    background:#ffedcc}

#content .admonition-title.note:before, #content .admonition-title.seealso:before,
#content .admonition-title.warning:before, #content .admonition-title.caution:before,
#content .admonition-title.attention:before,
#content .admonition-title.tip:before, #content .admonition-title.hint:before,
#content .admonition-title.important:before,
#content .admonition-title.error:before, #content .admonition-title.danger:before{
    font-family:FontAwesome;
    content: "";}

#content .note,#content .seealso{
    background:#e7f2fa}

.wy-alert p:last-child,#content .note p:last-child,#content .attention p:last-child,#content .caution p:last-child,#content .danger p:last-child,#content .error p:last-child,#content .hint p:last-child,#content .important p:last-child,#content .tip p:last-child,#content .warning p:last-child,#content .seealso p:last-child,#content .admonitiontodo p:last-child{
    margin-bottom:0}

#content .admonition-title.tip,#content .admonition-title.important,#content .admonition-title.hint{
    line-height: 1;
    background:#1abc9c}

#content .important,#content .tip,#content .hint{
    background:#dbfaf4}

#content .admonition-title.note,#content .admonition-title.seealso{
    line-height: 1;
    background:#6ab0de}

#content .admonition-title.warning,#content .admonition-title.caution,#content .admonition-title.attention{
    line-height: 1;
    background:#F0B37E}

#content .admonition-title.error,#content .admonition-title.danger{
    line-height: 1;
    background:#f29f97}
#+end_src

#+begin_src css
legend{
    display:block;
    width:100%;
    border:0;
    padding:0;
    white-space:normal;
    margin-bottom:24px;
    font-size:150%;
    *margin-left:-7px}

label{
    display:block;
    margin:0 0 0.3125em 0;
    color:#333;
    font-size:90%}
#+end_src

#+begin_src css
a{
    color:#2980B9;
    text-decoration:none;
    cursor:pointer}

a:hover,a:active{
    outline:0;
}

a:hover{
    color:#3091d1}

a:visited{
    color:#9B59B6}
#+end_src

#+begin_src css
.left{
    text-align:left}

.center{
    text-align:center}

.right{
    text-align:right}
#+end_src

#+begin_src css
hr{
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #e1e4e5;
    margin:24px 0;
    padding:0}
#+end_src

#+begin_src css
#table-of-contents li{
    list-style:none;
    margin-left: 0px;
}

#table-of-contents header{
    height:32px;
    display:inline-block;
    line-height:32px;
    padding:0 1.618em;
    display:block;
    font-weight:bold;
    text-transform:uppercase;
    font-size:80%;
    color:#2980B9;
    white-space:nowrap}

#table-of-contents ul{
    margin-bottom:0}

#table-of-contents li.divide-top{
    border-top:solid 1px #404040}

#table-of-contents li.divide-bottom{
    border-bottom:solid 1px #404040}

#table-of-contents li.current{
    background:#e3e3e3}

#table-of-contents li.current a{
    color:gray;
    border-right:solid 1px #c9c9c9;
    padding:0.4045em 2.427em}

#table-of-contents li.current a:hover{
    background:#d6d6d6}

#table-of-contents li a{
    /* color:#404040; */
    padding:0.4045em 1.618em;
    position:relative;
    /* background:#fcfcfc; */
    border:none;
    /* border-bottom:solid 1px #c9c9c9; */
    /* border-top:solid 1px #c9c9c9; */
    padding-left:1.618em -4px}

#table-of-contents li.on a:hover,#table-of-contents li.current>a:hover{
    background:#fcfcfc}

#table-of-contents li ul li a{
    /* background:#c9c9c9; */
    padding:0.4045em 2.427em}

#table-of-contents li ul li ul li a{
    padding:0.4045em 3.236em}

#table-of-contents li.current ul{
    display:block}

/* #table-of-contents li ul{ */
/*     margin-bottom:0; */
/*     display:none} */

#table-of-contents .local-toc li ul{
    display:block}

#table-of-contents li ul li a{
    margin-bottom:0;
    color:#b3b3b3;
    font-weight:normal}

#table-of-contents a{
    display:inline-block;
    line-height:18px;
    padding:0.4045em 1.618em;
    display:block;
    position:relative;
    font-size:90%;
    color:#b3b3b3;
    direction: ltr;
}

#table-of-contents a:hover{
    background-color:#4e4a4a;
    cursor:pointer}

/* #text-table-of-contents { */
/*     overflow:scroll; */
/* } */

#table-of-contents{
    position:fixed;
    top:0;
    left:0;
    width:300px;
    overflow-x:hidden;
    overflow-y:scroll;
    height:100%;
    background:#343131;
    z-index:200;
    scrollbar-base-color: #1F1D1D;
    scrollbar-arrow-color: #b3b3b3;
    scrollbar-shadow-color: #1F1D1D;
    scrollbar-track-color : #343131;
}

#table-of-contents h2{
    z-index:200;
    background-color:#2980B9;
    text-align:center;
    padding:0.809em;
    display:block;
    color:#fcfcfc;
    font-size: 100%;
    margin-bottom:0.809em}
#+end_src

#+begin_src css
ul.nav li ul li {
    display: none;
}

ul.nav li ul li ul li {
    display: none;
}

ul.nav li.active ul li {
    display: inline;
}

ul.nav li.active ul li ul li {
    display: inline;
}

ul.nav li.active ul li a {
    background-color: #E3E3E3;
    color: #8099B0;
    border-right:solid 1px #c9c9c9 !important;
}

ul.nav li.active ul li.active a {
    background-color: #C9C9C9;
    color: black !important;
    font-weight: bold !important;
}

ul.nav li.active ul li.active ul li.active a {
    color: black !important;
    font-weight: bold !important;
    display: block !important;
}

ul.nav li.active ul li.active ul li a {
    color: #808080 !important;
    font-weight: normal !important;
    display: block !important;
}

ul.nav li.active ul li ul li a {
    display: none !important;
}

/* ul.nav li ul li ul li { */
/*     display: none !important; /\* as long as nav is on multiple levels of ul *\/ */
/*     /\* display: none; /\* as long as nav is on multiple levels of ul *\\/ *\/ */
/* } */

ul.nav li ul li ul li ul li {
    display: none !important; /* as long as nav is on multiple levels of ul */
    /* display: none; /* as long as nav is on multiple levels of ul *\/ */
}

ul.nav li.active > a {
    border-bottom:solid 1px #c9c9c9 !important; /* XXX Restrict it to 2nd level */
    border-right:solid 1px #c9c9c9 !important;
}

ul.nav li.active a {
    color: gray !important;
    font-weight:bold;
    background-color: white;
    border-right:solid 0px white !important;
}

ul.nav > li.active > a {
    color: black !important;
}
#+end_src

#+begin_src css
footer{
    color:#999}

footer p{
    margin-bottom:12px}
#+end_src

#+begin_src css
#copyright, #postamble{
    position:fixed;
    bottom:0;
    left:0;
    width:300px;
    color:#fcfcfc;
    background:#1f1d1d;
    border-top:solid 10px #343131;
    font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
    font-size: 90%;
    z-index:400;
    padding:12px;
}

#postamble .author {
    font-size: 100%;
    margin-bottom: 0px;
}

#postamble .date {
    font-size: 90%;
    margin-bottom: 0px;
    color: #27AE60;
}

#postamble .creator,#postamble .validation {
    display:none;
}

#copyright a{
    color:#2980B9;
    text-decoration:none}

#copyright .rst-current-version{
    padding:12px;
    background-color:#272525;
    display:block;
    text-align:right;
    font-size:90%;
    cursor:pointer;
    color:#27AE60;
    *zoom:1}
#+end_src

#+begin_src css
#content img{
    max-width:100%;
}

#content div.figure{
    margin-bottom:24px}

#content div.figure.align-center{
    text-align:center}

#content .section>img,#content .section>a>img{
    margin-bottom:24px}

.verse{
    border-left:5px solid #6AB0DE;
    background-color: #E7F2FA;
    padding: 6px 20px;
    font-style:italic;
}

#content .note .last,#content .attention .last,#content .caution .last,#content .danger .last,#content .error .last,#content .hint .last,#content .important .last,#content .tip .last,#content .warning .last,#content .seealso .last,#content .admonitiontodo .last{
    margin-bottom:0}

#content .admonition-title:before{
    margin-right:4px}

#content .section ol p,#content .section ul p{
    margin-bottom:12px}

#content h1 .headerlink,#content h2 .headerlink,#content h3 .headerlink,#content h4 .headerlink,#content h5 .headerlink,#content h6 .headerlink,#content dl dt .headerlink{
    display:none;
    visibility:hidden;
    font-size:14px}

#content h1 .headerlink:after,#content h2 .headerlink:after,#content h3 .headerlink:after,#content h4 .headerlink:after,#content h5 .headerlink:after,#content h6 .headerlink:after,#content dl dt .headerlink:after{
    visibility:visible;
    content:"";
    font-family:FontAwesome;
    display:inline-block}

#content h1:hover .headerlink,#content h2:hover .headerlink,#content h3:hover .headerlink,#content h4:hover .headerlink,#content h5:hover .headerlink,#content h6:hover .headerlink,#content dl dt:hover .headerlink{
    display:inline-block}

#content .sidebar{
    float:right;
    width:40%;
    display:block;
    margin:0 0 24px 24px;
    padding:24px;
    background:#f3f6f6;
    border:solid 1px #e1e4e5}

#content .sidebar p,#content .sidebar ul,#content .sidebar dl{
    font-size:90%}

#content .sidebar .last{
    margin-bottom:0}

#content .sidebar .sidebar-title{
    display:block;
    font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif;
    font-weight:bold;
    background:#e1e4e5;
    padding:6px 12px;
    margin:-24px;
    margin-bottom:24px;
    font-size:100%}

#content .highlighted{
    background:#F1C40F;
    display:inline-block;
    font-weight:bold;
    padding:0 6px}

#content .footnote-reference,#content .citation-reference{
    vertical-align:super;
    font-size:90%}
#+end_src

#+begin_src css
span[id*='MathJax-Span']{
    color:#404040}

.math{
    text-align:center}

#footnotes{
    border-top:1px solid #e1e4e5;
    padding-top: 36px;
}

h2.footnotes{
    display:none;
}

.footnum, .footref{
    color: #2980b9;
    font-size: 170%;
    font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
}

.footnum:before, .footref:before{
    content:"[";
}

.footnum:after, .footref:after{
    content:"]";
}

.footpara {
    color: #999;
    font-size: 90%;
    font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    line-height: 1.25em;
    /* display: inline; */
}
#+end_src

#+begin_src css
.todo{
    background-color: #f29f97;
    padding: 0px 4px;
    color: #fff;
}

.WAIT, .nilWAIT{
    background-color: #6AB097;
}

.done{
    background-color: #6ab0de;
    padding: 0px 4px;
    color: #fff;
}

.tag span {
    background-color: #EDEDED;
    border: 1px solid #EDEDED;
    color: #939393;
    cursor: pointer;
    display: block;
    float: right;
    font-size: 80%;
    font-weight: normal;
    margin: 0 3px;
    padding: 1px 2px;
    border-radius: 10px;
}

.tag .FLAGGED {
    background-color: #DB2D27;
    border: 1px solid #DB2D27;
    color: white;
    font-weight: bold;
}

.timestamp {
    font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;
    font-size: 90%;
    color: navy;
}

.nav .timestamp {
    color: inherit;
}
#+end_src

See
http://stackoverflow.com/questions/10535432/tmux-man-page-search-highlighting
for nice yellow or orange boxes.

#+begin_src css
.inlinetask {
    background: #FFF9E3;  /* url(dialog-todo.png) no-repeat 10px 8px; */
    border: 3px solid #FFEB8E;
    /* border-right-style: none; */
    /* border-left-style: none; */
    /* padding: 10px 20px 10px 60px; */
    padding: 9px 12px;
    margin-bottom: 24px;
    font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif}
#+end_src

* Htmlize
  :PROPERTIES:
  :header-args: :tangle css/htmlize.css
  :END:

#+begin_src css
.org-bold { /* bold */ font-weight: bold; }
.org-bold-italic { /* bold-italic */ font-weight: bold; font-style: italic; }
.org-buffer-menu-buffer { /* buffer-menu-buffer */ font-weight: bold; }
.org-builtin { /* font-lock-builtin-face */ color: #7a378b; }
.org-button { /* button */ text-decoration: underline; }
.org-calendar-today { /* calendar-today */ text-decoration: underline; }
.org-change-log-acknowledgement { /* change-log-acknowledgement */ color: #b22222; }
.org-change-log-conditionals { /* change-log-conditionals */ color: #a0522d; }
.org-change-log-date { /* change-log-date */ color: #8b2252; }
.org-change-log-email { /* change-log-email */ color: #a0522d; }
.org-change-log-file { /* change-log-file */ color: #0000ff; }
.org-change-log-function { /* change-log-function */ color: #a0522d; }
.org-change-log-list { /* change-log-list */ color: #a020f0; }
.org-change-log-name { /* change-log-name */ color: #008b8b; }
.org-comint-highlight-input { /* comint-highlight-input */ font-weight: bold; }
.org-comint-highlight-prompt { /* comint-highlight-prompt */ color: #00008b; }
.org-comment { /* font-lock-comment-face */ color: #999988; font-style: italic; }
.org-comment-delimiter { /* font-lock-comment-delimiter-face */ color: #999988; font-style: italic; }
.org-completions-annotations { /* completions-annotations */ font-style: italic; }
.org-completions-common-part { /* completions-common-part */ color: #000000; background-color: #ffffff; }
.org-completions-first-difference { /* completions-first-difference */ font-weight: bold; }
.org-constant { /* font-lock-constant-face */ color: #008b8b; }
.org-diary { /* diary */ color: #ff0000; }
.org-diff-context { /* diff-context */ color: #7f7f7f; }
.org-diff-file-header { /* diff-file-header */ background-color: #b3b3b3; font-weight: bold; }
.org-diff-function { /* diff-function */ background-color: #cccccc; }
.org-diff-header { /* diff-header */ background-color: #cccccc; }
.org-diff-hunk-header { /* diff-hunk-header */ background-color: #cccccc; }
.org-diff-index { /* diff-index */ background-color: #b3b3b3; font-weight: bold; }
.org-diff-nonexistent { /* diff-nonexistent */ background-color: #b3b3b3; font-weight: bold; }
.org-diff-refine-change { /* diff-refine-change */ background-color: #d9d9d9; }
.org-dired-directory { /* dired-directory */ color: #0000ff; }
.org-dired-flagged { /* dired-flagged */ color: #ff0000; font-weight: bold; }
.org-dired-header { /* dired-header */ color: #228b22; }
.org-dired-ignored { /* dired-ignored */ color: #7f7f7f; }
.org-dired-mark { /* dired-mark */ color: #008b8b; }
.org-dired-marked { /* dired-marked */ color: #ff0000; font-weight: bold; }
.org-dired-perm-write { /* dired-perm-write */ color: #b22222; }
.org-dired-symlink { /* dired-symlink */ color: #a020f0; }
.org-dired-warning { /* dired-warning */ color: #ff0000; font-weight: bold; }
.org-doc { /* font-lock-doc-face */ color: #8b2252; }
.org-escape-glyph { /* escape-glyph */ color: #a52a2a; }
.org-file-name-shadow { /* file-name-shadow */ color: #7f7f7f; }
.org-flyspell-duplicate { /* flyspell-duplicate */ color: #cdad00; font-weight: bold; text-decoration: underline; }
.org-flyspell-incorrect { /* flyspell-incorrect */ color: #ff4500; font-weight: bold; text-decoration: underline; }
.org-fringe { /* fringe */ background-color: #f2f2f2; }
.org-function-name { /* font-lock-function-name-face */ color: teal; }
.org-header-line { /* header-line */ color: #333333; background-color: #e5e5e5; }
.org-help-argument-name { /* help-argument-name */ font-style: italic; }
.org-highlight { /* highlight */ background-color: #b4eeb4; }
.org-holiday { /* holiday */ background-color: #ffc0cb; }
.org-isearch { /* isearch */ color: #b0e2ff; background-color: #cd00cd; }
.org-isearch-fail { /* isearch-fail */ background-color: #ffc1c1; }
.org-italic { /* italic */ font-style: italic; }
.org-keyword { /* font-lock-keyword-face */ color: #0086b3; }
.org-lazy-highlight { /* lazy-highlight */ background-color: #afeeee; }
.org-link { /* link */ color: #0000ff; text-decoration: underline; }
.org-link-visited { /* link-visited */ color: #8b008b; text-decoration: underline; }
.org-log-edit-header { /* log-edit-header */ color: #a020f0; }
.org-log-edit-summary { /* log-edit-summary */ color: #0000ff; }
.org-log-edit-unknown-header { /* log-edit-unknown-header */ color: #b22222; }
.org-match { /* match */ background-color: #ffff00; }
.org-next-error { /* next-error */ background-color: #eedc82; }
.org-nobreak-space { /* nobreak-space */ color: #a52a2a; text-decoration: underline; }
.org-org-archived { /* org-archived */ color: #7f7f7f; }
.org-org-block { /* org-block */ color: #7f7f7f; }
.org-org-block-begin-line { /* org-block-begin-line */ color: #b22222; }
.org-org-block-end-line { /* org-block-end-line */ color: #b22222; }
.org-org-checkbox { /* org-checkbox */ font-weight: bold; }
.org-org-checkbox-statistics-done { /* org-checkbox-statistics-done */ color: #228b22; font-weight: bold; }
.org-org-checkbox-statistics-todo { /* org-checkbox-statistics-todo */ color: #ff0000; font-weight: bold; }
.org-org-clock-overlay { /* org-clock-overlay */ background-color: #ffff00; }
.org-org-code { /* org-code */ color: #7f7f7f; }
.org-org-column { /* org-column */ background-color: #e5e5e5; }
.org-org-column-title { /* org-column-title */ background-color: #e5e5e5; font-weight: bold; text-decoration: underline; }
.org-org-date { /* org-date */ color: #a020f0; text-decoration: underline; }
.org-org-document-info { /* org-document-info */ color: #191970; }
.org-org-document-info-keyword { /* org-document-info-keyword */ color: #7f7f7f; }
.org-org-document-title { /* org-document-title */ color: #191970; font-size: 144%; font-weight: bold; }
.org-org-done { /* org-done */ color: #228b22; font-weight: bold; }
.org-org-drawer { /* org-drawer */ color: #0000ff; }
.org-org-ellipsis { /* org-ellipsis */ color: #b8860b; text-decoration: underline; }
.org-org-footnote { /* org-footnote */ color: #a020f0; text-decoration: underline; }
.org-org-formula { /* org-formula */ color: #b22222; }
.org-org-headline-done { /* org-headline-done */ color: #bc8f8f; }
.org-org-hide { /* org-hide */ color: #ffffff; }
.org-org-latex-and-export-specials { /* org-latex-and-export-specials */ color: #8b4513; }
.org-org-level-1 { /* org-level-1 */ color: #0000ff; }
.org-org-level-2 { /* org-level-2 */ color: #a0522d; }
.org-org-level-3 { /* org-level-3 */ color: #a020f0; }
.org-org-level-4 { /* org-level-4 */ color: #b22222; }
.org-org-level-5 { /* org-level-5 */ color: #228b22; }
.org-org-level-6 { /* org-level-6 */ color: #008b8b; }
.org-org-level-7 { /* org-level-7 */ color: #7a378b; }
.org-org-level-8 { /* org-level-8 */ color: #8b2252; }
.org-org-link { /* org-link */ color: #0000ff; text-decoration: underline; }
.org-org-meta-line { /* org-meta-line */ color: #b22222; }
.org-org-mode-line-clock { /* org-mode-line-clock */ color: #000000; background-color: #bfbfbf; }
.org-org-mode-line-clock-overrun { /* org-mode-line-clock-overrun */ color: #000000; background-color: #ff0000; }
.org-org-quote { /* org-quote */ color: #7f7f7f; }
.org-org-scheduled { /* org-scheduled */ color: #006400; }
.org-org-scheduled-previously { /* org-scheduled-previously */ color: #b22222; }
.org-org-scheduled-today { /* org-scheduled-today */ color: #006400; }
.org-org-sexp-date { /* org-sexp-date */ color: #a020f0; }
.org-org-special-keyword { /* org-special-keyword */ color: #a020f0; }
.org-org-table { /* org-table */ color: #0000ff; }
.org-org-tag { /* org-tag */ font-weight: bold; }
.org-org-target { /* org-target */ text-decoration: underline; }
.org-org-time-grid { /* org-time-grid */ color: #b8860b; }
.org-org-todo { /* org-todo */ color: #ff0000; font-weight: bold; }
.org-org-upcoming-deadline { /* org-upcoming-deadline */ color: #b22222; }
.org-org-verbatim { /* org-verbatim */ color: #7f7f7f; }
.org-org-verse { /* org-verse */ color: #7f7f7f; }
.org-org-warning { /* org-warning */ color: #ff0000; font-weight: bold; }
.org-outline-1 { /* outline-1 */ color: #0000ff; }
.org-outline-2 { /* outline-2 */ color: #a0522d; }
.org-outline-3 { /* outline-3 */ color: #a020f0; }
.org-outline-4 { /* outline-4 */ color: #b22222; }
.org-outline-5 { /* outline-5 */ color: #228b22; }
.org-outline-6 { /* outline-6 */ color: #008b8b; }
.org-outline-7 { /* outline-7 */ color: #7a378b; }
.org-outline-8 { /* outline-8 */ color: #8b2252; }
.org-preprocessor { /* font-lock-preprocessor-face */ color: #7a378b; }
.org-query-replace { /* query-replace */ color: #b0e2ff; background-color: #cd00cd; }
.org-regexp-grouping-backslash { /* font-lock-regexp-grouping-backslash */ font-weight: bold; }
.org-regexp-grouping-construct { /* font-lock-regexp-grouping-construct */ font-weight: bold; }
.org-region { /* region */ background-color: #eedc82; }
.org-secondary-selection { /* secondary-selection */ background-color: #ffff00; }
.org-shadow { /* shadow */ color: #7f7f7f; }
.org-show-paren-match { /* show-paren-match */ background-color: #40e0d0; }
.org-show-paren-mismatch { /* show-paren-mismatch */ color: #ffffff; background-color: #a020f0; }
.org-string { /* font-lock-string-face */ color: #dd1144; }
.org-tool-bar { /* tool-bar */ color: #000000; background-color: #bfbfbf; }
.org-tooltip { /* tooltip */ color: #000000; background-color: #ffffe0; }
.org-trailing-whitespace { /* trailing-whitespace */ background-color: #ff0000; }
.org-type { /* font-lock-type-face */ color: #228b22; }
.org-underline { /* underline */ text-decoration: underline; }
.org-variable-name { /* font-lock-variable-name-face */ color: teal; }
.org-warning { /* font-lock-warning-face */ color: #ff0000; font-weight: bold; }
.org-widget-button { /* widget-button */ font-weight: bold; }
.org-widget-button-pressed { /* widget-button-pressed */ color: #ff0000; }
.org-widget-documentation { /* widget-documentation */ color: #006400; }
.org-widget-field { /* widget-field */ background-color: #d9d9d9; }
.org-widget-inactive { /* widget-inactive */ color: #7f7f7f; }
.org-widget-single-line-field { /* widget-single-line-field */ background-color: #d9d9d9; }
#+end_src

* JS
  :PROPERTIES:
  :header-args: :tangle js/readtheorg.js
  :END:

#+begin_src js
$(function() {
    $('.note').before("<p class='admonition-title note'>Note</p>");
    $('.seealso').before("<p class='admonition-title seealso'>See also</p>");
    $('.warning').before("<p class='admonition-title warning'>Warning</p>");
    $('.caution').before("<p class='admonition-title caution'>Caution</p>");
    $('.attention').before("<p class='admonition-title attention'>Attention</p>");
    $('.tip').before("<p class='admonition-title tip'>Tip</p>");
    $('.important').before("<p class='admonition-title important'>Important</p>");
    $('.hint').before("<p class='admonition-title hint'>Hint</p>");
    $('.error').before("<p class='admonition-title error'>Error</p>");
    $('.danger').before("<p class='admonition-title danger'>Danger</p>");
});

$( document ).ready(function() {

// Shift nav in mobile when clicking the menu.
    $(document).on('click', "[data-toggle='wy-nav-top']", function() {
      $("[data-toggle='wy-nav-shift']").toggleClass("shift");
      $("[data-toggle='rst-versions']").toggleClass("shift");
    });
    // Close menu when you click a link.
    $(document).on('click', ".wy-menu-vertical .current ul li a", function() {
      $("[data-toggle='wy-nav-shift']").removeClass("shift");
      $("[data-toggle='rst-versions']").toggleClass("shift");
    });
    $(document).on('click', "[data-toggle='rst-current-version']", function() {
      $("[data-toggle='rst-versions']").toggleClass("shift-up");
    });
    // Make tables responsive
    $("table.docutils:not(.field-list)").wrap("<div class='wy-table-responsive'></div>");
});

$( document ).ready(function() {
    $('#text-table-of-contents ul').first().addClass('nav');
                                        // ScrollSpy also requires that we use
                                        // a Bootstrap nav component.
    $('body').scrollspy({target: '#text-table-of-contents'});

// DON'T add sticky table headers (Fix issue #69?)
    // $('table').stickyTableHeaders();

// set the height of tableOfContents
    var $postamble = $('#postamble');
    var $tableOfContents = $('#table-of-contents');
    $tableOfContents.css({paddingBottom: $postamble.outerHeight()});

// add TOC button
    var toggleSidebar = $('<div id="toggle-sidebar"><a href="#table-of-contents"><h2>Table of Contents</h2></a></div>');
    $('#content').prepend(toggleSidebar);

// add close button when sidebar showed in mobile screen
    var closeBtn = $('<a class="close-sidebar" href="#">Close</a>');
    var tocTitle = $('#table-of-contents').find('h2');
    tocTitle.append(closeBtn);
});