custom.css

/*
Author: Neil Panchal
http://neil.panchal.io

New colors. These are a bit darker to allow for a better contrast. I started with Solarized palette and adjusted the colors as needed.


YELLOW      = #ba9600			[181,137,0]
ORANGE      = #BA5400			[186,84,0]
RED         = #D43132			[176,47,48]
MAGENTA     = #D14187			[209,65,135]
VIOLET      = #793ac7			[144,89,212]
BLUE        = #007ad0			[15,134,217]
CYAN        = #009489			[0,163,151]
GREEN       = #688A0A			[104,138,10]
BROWN 		= #A05200			[156,98,48]

BACKGROUND  = #F8F8F8
DARK GRAY   = #383838
MID GRAY    = #d8d8d8
LIGHT GRAY  = #828282
*/

/* FONTS */

@font-face {
 font-family: 'sf-display';
 font-weight: normal;
 font-style: normal;
 src: url('fonts/sf-display/SanFranciscoDisplay-Regular.otf') format('opentype');
}

@font-face {
 font-family: 'sf-display';
 font-weight: normal;
 font-style: italic;
 src: url('fonts/sf-display/SanFranciscoDisplay-RegularItalic.otf') format('opentype');
}

@font-face {
 font-family: 'sf-display';
 font-weight: bold;
 font-style: normal;
 src: url('fonts/sf-display/SanFranciscoDisplay-Bold.otf') format('opentype');
}

@font-face {
 font-family: 'sf-display';
 font-weight: bold;
 font-style: italic;
 src: url('fonts/sf-display/SanFranciscoDisplay-BoldItalic.otf') format('opentype');
}

@font-face {
 font-family: 'cmu-text-decorated';
 font-weight: normal;
 font-style: italic;
 src: url('fonts/cmu-text/CMUSerif-UprightItalic.otf') format('opentype');
}

@font-face {
 font-family: 'cmu-text';
 font-weight: normal;
 font-style: normal;
 src: url('fonts/cmu-text/CMUSerif-Roman.otf') format('opentype');
}

@font-face {
 font-family: 'cmu-text';
 font-weight: normal;
 font-style: italic;
 src: url('fonts/cmu-text/CMUSerif-Italic.otf') format('opentype');
}

@font-face {
 font-family: 'cmu-text';
 font-weight: bold;
 font-style: normal;
 src: url('fonts/cmu-text/CMUSerif-BoldNonextended.otf') format('opentype');
}

@font-face {
 font-family: 'cmu-text';
 font-weight: bold;
 font-style: italic;
 src: url('fonts/cmu-text/CMUSerif-BoldItalic.otf') format('opentype');
}

@font-face {
 font-family: 'sf-mono';
 font-weight: normal;
 font-style: normal;
 src: url('fonts/sf-mono/SFMono-Regular.otf') format('opentype');
}

@font-face {
 font-family: 'sf-mono';
 font-weight: normal;
 font-style: italic;
 src: url('fonts/sf-mono/SFMono-RegularItalic.otf') format('opentype');
}

@font-face {
 font-family: 'sf-mono';
 font-weight: bold;
 font-style: normal;
 src: url('fonts/sf-mono/SFMono-Bold.otf') format('opentype');
}

@font-face {
 font-family: 'sf-mono';
 font-weight: bold;
 font-style: italic;
 src: url('fonts/sf-mono/SFMono-BoldItalic.otf') format('opentype');
}


/* GLOBALS */

html {
    font-size: 16px !important;
}

body {
    background-color: #FFF !important;
    color: #828282;
    font-weight: normal;
    font-family: "sf-mono", "Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow: inherit;
    vertical-align: middle;
}

body .notebook-app {
    background-color: #FFF !important;
}

#header {
    box-shadow: none !important;
}

#notebook {
    padding-top: 0px;
    font-family: "cmu-text", "Times New Roman", serif;

}

.container {
	width: 940px;
}
#site {
	overflow: inherit;
}
#notebook-container {
    box-shadow: none;
    -webkit-box-shadow: none;
    padding: 0px;
}

.nav > li > a {
	padding:  10px;
}

div.output_wrapper {
    margin-top: 8px;
}

a {
    color: #383838;
}

code,
kbd,
pre,
samp {
    font-family: 'sf-mono', 'Menlo', 'Courier New', monospace !important;
    font-size: 0.75rem !important;
}

h1 {
	font-family:  "cmu-text", "Times New Roman", serif !important;
    font-size: 1.6rem !important;
    font-weight: 300 !important;
    color: #000000 !important;
    /* letter-spacing: 3px !important; */
    text-transform: normal !important;
    text-align: center !important;
    padding-top:  3rem;
    padding-bottom: 3rem;
    /*border-bottom: 1px dotted #000000 !important;*/
}

h2 {
	font-family:  "cmu-text", "Times New Roman", serif !important;
    font-size: 1.25rem !important;
    font-weight: bold !important;
    color: #000000 !important;
    text-transform: none !important;
    margin: 2rem 0 0.75rem !important;
}

h3 {
	font-family:  "cmu-text", "Times New Roman", serif !important;
    font-size: 1.125rem !important;
    font-weight: normal !important;
    font-style: italic !important;
    color: #000000 !important;
    display: block !important;
    margin: 1.25rem 0 0.75rem !important;
}

h4 {
	font-style: italic;
	text-decoration: underline;
}
h4,
h5,
h6 {
	font-family:  "cmu-text", "Times New Roman", serif !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    display: block !important;
    color: #000000;
    margin: 0.5rem 0 0.25rem !important;

}

.prompt {
    font-family: 'sf-mono', 'Menlo', 'Courier New', monospace !important;
    font-style: normal;
    font-size: 0.75rem;
    text-align: right;
    line-height: 1rem;
}

/* INTRO PAGE */

.toolbar_info,
.list-container {
    color: #828282;
}
/* NOTEBOOK */

div#header-container {
    display: none !important;
}

div#notebook {
    border-top: none;
    font-size: 1rem;
}
.kernel_idle_icon:before {
	color: #D14187;
}

.kernel_busy_icon:before {
	color: #009489;
}
div.input_prompt {
    color: #888;
    font-style: normal !important;
}
div.input_prompt bdi, div.output_prompt bdi{
	line-height: 0;
	font-size:0;
	color:transparent;
	/*left: -10000px;*/
	/*content: "\21E2";*/
}
/* Unicode Arrows
Source: http://www.copypastecharacter.com/

▼ ↪ ↩ ← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟ ↠ ↡ ↢ ↣ ↤ ↦ ↥ ↧ ↨ ↫ ↬ ↭ ↮ ↯ ↰ ↱ ↲ ↴ ↳ ↵ ↶ ↷ ↸ ↹ ↺ ↻ ⟲ ⟳ ↼ ↽ ↾ ↿ ⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇌ ⇍ ⇏ ⇎ ⇑ ⇓ ⇐ ⇒ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇳ ⇚ ⇛ ⇜ ⇝ ⇞ ⇟ ⇠ ⇡ ⇢ ⇣ ⇤ ⇥ ⇦ ⇨ ⇩ ⇪ ⇧ ⇫ ⇬ ⇭ ⇮ ⇯ ⇰ ⇱ ⇲ ⇴ ⇵ ⇶ ⇷ ⇸ ⇹ ⇺ ⇻ ⇼ ⇽ ⇾ ⇿ ⟰ ⟱ ⟴ ⟵ ⟶ ⟷ ⟸ ⟹ ⟽ ⟾ ⟺ ⟻ ⟼ ⟿ ⤀ ⤁ ⤅ ⤂ ⤃ ⤄ ⤆ ⤇ ⤈ ⤉ ⤊ ⤋ ⤌ ⤍ ⤎ ⤏ ⤐ ⤑ ⤒ ⤓ ⤔ ⤕ ⤖ ⤗ ⤘ ⤙ ⤚ ⤛ ⤜ ⤝ ⤞ ⤟ ⤠ ⤡ ⤢ ⤣ ⤤ ⤥ ⤦ ⤧ ⤨ ⤩ ⤪ ⤭ ⤮ ⤯ ⤰ ⤱ ⤲ ⤳ ⤻ ⤸ ⤾ ⤿ ⤺ ⤼ ⤽ ⤴ ⤵ ⤶ ⤷ ⤹ ⥀ ⥁ ⥂ ⥃ ⥄ ⥅ ⥆ ⥇ ⥈ ⥉ ⥒ ⥓ ⥔ ⥕ ⥖ ⥗ ⥘ ⥙ ⥚ ⥛ ⥜ ⥝ ⥞ ⥟ ⥠ ⥡ ⥢ ⥣ ⥤ ⥥ ⥦ ⥧ ⥨ ⥩ ⥪ ⥫ ⥬ ⥭ ⥮ ⥯ ⥰ ⥱ ⥲ ⥳ ⥴ ⥵ ⥶ ⥷ ⥸ ⥹ ⥺ ⥻ ➔ ➘ ➙ ➚ ➛ ➜ ➝ ➞ ➟ ➠ ➡ ➢ ➣ ➤ ➥ ➦ ➧ ➨ ➩ ➪ ➫ ➬ ➭ ➮ ➯ ➱ ➲ ➳ ➴ ➵ ➶ ➷ ➸ ➹ ➺ ➻ ➼ ➽ ➾ ⬀ ⬁ ⬂ ⬃ ⬄ ⬅ ⬆ ⬇ ⬈ ⬉ ⬊ ⬋ ⬌ ⬍ ⏎ ▲ ▼ ◀ ▶ ⬎ ⬏ ⬐ ⬑ ☇ ☈ ⍃ ⍄ ⍇ ⍈ ⍐ ⍗ ⍌ ⍓ ⍍ ⍔ ⍏ ⍖ ⍅ ⍆

*/
div.output_prompt {
    color: #000000;
}

.code_cell div.input_prompt:after,
.code_cell div.output_prompt:after {
	display: inline-block;
    content: '';
    font-size:  0.75rem;
    font-style: normal !important;
}


div.input_area {
    border-radius: 0px;
    border: none;
    padding: 0px 5px;
}

div.output_area pre {
    font-weight: normal;
    color: #828282;
}

div.output_subarea {
    font-weight: normal;
    color: #828282;
}

.rendered_html pre,
.rendered_html code {
    color: #828282;
}

/* .rendered_html table,
.rendered_html th,
.rendered_html tr,
.rendered_html td {
    border: 1px #828282 solid;
    font-size: 0.75rem;
    font-family: 'sf-mono', 'Menlo', 'Courier New', monospace;
} */

/* .rendered_html th,
.rendered_html tr,
.rendered_html td {
    padding: 5px 10px;
}
 */
/* .rendered_html th {
    font-weight: normal;
    background: #f8f8f8;
} */

div.output_html {
    font-size: 0.75rem;
    font-weight: normal;
    font-family: 'sf-mono', 'Menlo', 'Courier New', monospace;
}

table.dataframe {
    border-collapse: collapse;
    border: none;
}

table.dataframe thead {
	padding-bottom: 10px;
}

table.dataframe thead tr {
    color: #A05200;
    font-style: normal;
    padding: 5px 10px;
    border-bottom:  1px solid #828282;
    vertical-align: middle;
	text-align: center;
}

table.dataframe thead tr th, table.dataframe thead tr:only-child th {
	vertical-align: middle;
	text-align: center;
}

table.dataframe tbody {
	padding-top:  5px;
}


table.dataframe tbody tr {


}
table.dataframe tbody tr th {
	background-color: #ffffff;
    text-align: left;
    font-style: italic
}

table.dataframe tbody tr td {
    background-color: #fff9ea;
    color: #828282;
    padding-left: 1.0rem;
    padding-right: 1.0rem;
}


/* table, table.dataframe tr {
    border: none;
} */

/* table td, table.dataframe td,
table th, table.dataframe th {
    margin: 0;
    border: 1px solid white;
    padding-left: 0.25em;
    padding-right: 0.25em;
} */


/* table th:not(:empty), table.dataframe th:not(:empty) {
    background-color: #ffffff;
    text-align: left;
    padding: 0 10px;
    font-style: italic
} */


/* table.dataframe tr:nth-child(2) th:empty, table.dataframe tr:nth-child(2) th:empty,
table tr:nth-child(2) th:empty, table tr:nth-child(2) th:empty {
    border-left: none;
    border-right: 1px dotted #888;
}
table td, table.dataframe td {
    background-color: #fff9ea;
    color: #828282;
    padding: 0.375em 1em;
}
table thead, table.dataframe thead {
	color:  #828282;
	padding: 10px 0;
	font-weight: bold;
	border-bottom: 1px solid #828282;
}

table thead th:not(:empty), table.dataframe thead th:not(:empty),
table thead tr th, table.dataframe thead tr th {
    background-color: #f8f8f8;
    color: #BA5400;
    text-align: left;
    font-style: normal;
    padding: 5px 10px;
    border-bottom:  1px solid #828282;
} */

.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
  background-color: #d9edf7;
}
div.cell {
	padding: 12px 0px 5px 0px;
	right: 2px;
	border:  none;
}
div.cell.selected {
    border-radius: 0px;
}


div.cell.selected {
    border: none;
    background: none !important;
}

div.cell.selected .inner_cell {
	border-right: 2px solid #CCC;
	margin-right: -2px;
}


div.cell.selected div.input:before {
	display: inline-block;
	position: absolute;
    content: "\279E";
    font-size: 0.875rem;
    top: 16px;
    width: 10px;
    left: 30px;
    color: #009489;
    font-style: bold !important;
}

.edit_mode div.cell.selected div.input:before {
    color: #D14187;
}

div.cell.selected:before, div.cell.selected.jupyter-soft-selected:before {
    position: absolute;
    display: none;
    top: -1px;
    left: -1px;
    width: 0px;
    height: calc(100% + 2px);
    content: '';
    background: none;
}

div.out_prompt_overlay:hover {
	box-shadow: none;
	background: none;
}

.edit_mode div.cell.selected {
    border: none;
    background: none !important;
}

.edit_mode div.cell.selected:before{
	width: 0px;
	background: none;
}


div.cell.edit_mode {
    border-radius: 0px;
    border: thin solid #BA5400;
}

div.text_cell_render,
div.output_html {
    color: #333;
}



span.ansiblack {
    color: #828282;
}

span.ansiblue {
    color: #009489;
}

span.ansigray {
    color: #d8d8d8;
}

span.ansigreen {
    color: #688A0A;
}

span.ansipurple {
    color: #793ac7;
}

span.ansired {
    color: #D43132;
}

span.ansiyellow {
    color: #ba9600;
}

div.output_stderr {
    background-color: #FFFFFF;
}

div.output_stderr pre {
    /* color: #793ac7; */
}

.cm-s-ipython.CodeMirror {
    background: #F8F8F8;
    color: #828282;
}

.cm-s-ipython div.CodeMirror-selected {
    background: #e8e8e8 !important;
}

.cm-s-ipython .CodeMirror-gutters {
    background: #F8F8F8;
    border-right: 0px;
}

.cm-s-ipython .CodeMirror-linenumber {
    color: #b8b8b8;
}

.cm-s-ipython .CodeMirror-cursor {
    border-left: 1px solid #585858 !important;
}

.cm-s-ipython span.cm-comment {
    color: #828282;
}

.cm-s-ipython span.cm-atom {
    color: #D14187;
}

.cm-s-ipython span.cm-number {
    color: #007ad0;
}

.cm-s-ipython span.cm-property {
	color: #D14187;
}
.cm-s-ipython span.cm-attribute {
    color: #688A0A;
}



.cm-s-ipython span.cm-keyword {
    font-weight: normal;
    color: #D43132;
}

.cm-s-ipython span.cm-string {
    color: #ba9600;
}

.cm-s-ipython span.cm-operator {
    color: #BA5400;
    font-weight: normal;
}

.cm-s-ipython span.cm-builtin {
    color: #793ac7;
}

.cm-s-ipython span.cm-variable {
    color: #009489;
}

.cm-s-ipython span.cm-variable-2 {
    color: #007ad0;
}

.cm-s-ipython span.cm-def {
    color: #009489;
}

.cm-s-ipython span.cm-error {
    /*background: #FFBDBD;*/
    color: #D43132;
}

.cm-s-ipython span.cm-bracket {
    color: #828282;
}

.cm-s-ipython span.cm-tag {
    color: #D43132;
}

.cm-s-ipython span.cm-link {
    color: #793ac7;
}

.cm-s-ipython .CodeMirror-matchingbracket {
    text-decoration: underline;
    color: #828282 !important;
}


/* ANSI colors */

.ansi-red-fg {
	color: #D43132;
	font-weight: bold;
}

.ansi-green-fg {
	color: #688A0A;
}

.ansi-cyan-fg {
	color: #009489;
}

.ansi-blue-fg {
	color: #007ad0;
}