Merge pull request #4576 from ellisonbg/cell-spacing

Tighten up the vertical spacing on cells and make the padding of cells more consistent

IPython/html/static/base/less/flexbox.less

@@ -3,103 +3,101 b''
 /* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
 
 .hbox {
-	display: -webkit-box;
-	-webkit-box-orient: horizontal;
-	-webkit-box-align: stretch;
+    display: -webkit-box;
+    -webkit-box-orient: horizontal;
+    -webkit-box-align: stretch;
 
-	display: -moz-box;
-	-moz-box-orient: horizontal;
-	-moz-box-align: stretch;
+    display: -moz-box;
+    -moz-box-orient: horizontal;
+    -moz-box-align: stretch;
 
-	display: box;
-	box-orient: horizontal;
-	box-align: stretch;
+    display: box;
+    box-orient: horizontal;
+    box-align: stretch;
 }
 
 .hbox > * {
-	-webkit-box-flex: 0;
-	-moz-box-flex: 0;
-	box-flex: 0;
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    box-flex: 0;
 }
 
 .vbox {
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	-webkit-box-align: stretch;
-
-	display: -moz-box;
-	-moz-box-orient: vertical;
-	-moz-box-align: stretch;
-
-	display: box;
-	box-orient: vertical;
-	box-align: stretch;
-	/* width must be 100% to force FF to behave like webkit */
-	width: 100%;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-box-align: stretch;
+
+    display: -moz-box;
+    -moz-box-orient: vertical;
+    -moz-box-align: stretch;
+
+    display: box;
+    box-orient: vertical;
+    box-align: stretch;
+    /* width must be 100% to force FF to behave like webkit */
+    width: 100%;
 }
 
 .vbox > * {
-	-webkit-box-flex: 0;
-	-moz-box-flex: 0;
-	box-flex: 0;
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    box-flex: 0;
 }
 
 .reverse {
-	-webkit-box-direction: reverse;
-	-moz-box-direction: reverse;
-	box-direction: reverse;
+    -webkit-box-direction: reverse;
+    -moz-box-direction: reverse;
+    box-direction: reverse;
 }
 
 .box-flex0 {
-	-webkit-box-flex: 0;
-	-moz-box-flex: 0;
-	box-flex: 0;
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    box-flex: 0;
 }
 
 .box-flex1 {
-	-webkit-box-flex: 1;
-	-moz-box-flex: 1;
-	box-flex: 1;
+    -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+    box-flex: 1;
 }
 
 .box-flex {
     .box-flex1();
 }
 
-
-
 .box-flex2 {
-	-webkit-box-flex: 2;
-	-moz-box-flex: 2;
-	box-flex: 2;
+    -webkit-box-flex: 2;
+    -moz-box-flex: 2;
+    box-flex: 2;
 }
 
 .box-group1 {
-	-webkit-box-flex-group: 1;
-	-moz-box-flex-group: 1;
-	box-flex-group: 1;
+    -webkit-box-flex-group: 1;
+    -moz-box-flex-group: 1;
+    box-flex-group: 1;
 }
 
 .box-group2 {
-	-webkit-box-flex-group: 2;
-	-moz-box-flex-group: 2;
-	box-flex-group: 2;
+    -webkit-box-flex-group: 2;
+    -moz-box-flex-group: 2;
+    box-flex-group: 2;
 }
 
 .start {
-	-webkit-box-pack: start;
-	-moz-box-pack: start;
-	box-pack: start;
+    -webkit-box-pack: start;
+    -moz-box-pack: start;
+    box-pack: start;
 }
 
 .end {
-	-webkit-box-pack: end;
-	-moz-box-pack: end;
-	box-pack: end;
+    -webkit-box-pack: end;
+    -moz-box-pack: end;
+    box-pack: end;
 }
 
 .center {
-	-webkit-box-pack: center;
-	-moz-box-pack: center;
-	box-pack: center;
+    -webkit-box-pack: center;
+    -moz-box-pack: center;
+    box-pack: center;
 }

IPython/html/static/notebook/less/cell.less

@@ -9,15 +9,15 b' div.cell {'
     width: 100%;
     padding: 5px 5px 5px 0px;
     /* This acts as a spacer between cells, that is outside the border */
-    margin: 2px 0px 2px 7px;
+    margin: 0px;
     outline: none;
 }
 
 div.prompt {
     /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
     min-width: 11ex;
-    /* This 0.4em is tuned to match the padding on the CodeMirror editor. */
-    padding: 0.4em;
+    /* This padding is tuned to match the padding on the CodeMirror editor. */
+    padding: @code_padding;
     margin: 0px;
     font-family: @monoFontFamily;
     text-align: right;

IPython/html/static/notebook/less/codecell.less

@@ -22,46 +22,3 b' div.input_prompt {'
     border-top: 1px solid transparent;
 }
 
-div.output_wrapper {
-    /* This is a spacer between the input and output of each cell */
-    margin-top: 5px;
-    /* this position must be relative to enable descendents to be absolute within it */
-    position: relative;
-    .vbox()
-}
-
-/* class for the output area when it should be height-limited */
-div.output_scroll {
-  /* ideally, this would be max-height, but FF barfs all over that */
-  height: 24em;
-  /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
-  width: 100%;
-
-  overflow: auto;
-  .corner-all;
-  .box-shadow(inset 0 2px 8px rgba(0, 0, 0, .8));
-}
-
-/* output div while it is collapsed */
-div.output_collapsed {
-  margin: 0px;
-  padding: 0px;
-  .vbox();
-}
-
-div.out_prompt_overlay {
-  height: 100%;
-  padding: 0px 0.4em;
-  position: absolute;
-  .corner-all;
-}
-
-div.out_prompt_overlay:hover {
-  /* use inner shadow to get border that is computed the same on WebKit/FF */
-  .box-shadow(inset 0 0 1px #000);
-  background: rgba(240, 240, 240, 0.5);
-}
-
-div.output_prompt {
-    color: darkred;
-}

IPython/html/static/notebook/less/codemirror.less

@@ -11,8 +11,8 b''
 
 .CodeMirror {
     line-height: @code_line_height;  /* Changed from 1em to our global default */
-	height: auto;     /* Changed to auto to autogrow */
-	background: none;  /* Changed from white to allow our bg to show through */
+    height: auto;     /* Changed to auto to autogrow */
+    background: none;  /* Changed from white to allow our bg to show through */
 }
 
 .CodeMirror-scroll {
@@ -23,36 +23,36 b''
 }
 
 @-moz-document url-prefix() {
-  /* Firefox does weird and terrible things (#3549) when overflow-x is auto */
-  /* It doesn't respect the overflow setting anyway, so we can workaround it with this */
-  .CodeMirror-scroll {
-    overflow-x: hidden;
-  }
+    /* Firefox does weird and terrible things (#3549) when overflow-x is auto */
+    /* It doesn't respect the overflow setting anyway, so we can workaround it with this */
+    .CodeMirror-scroll {
+        overflow-x: hidden;
+    }
 }
 
 .CodeMirror-lines {
-  /* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
-  /* we have set a different line-height and want this to scale with that. */
-  padding: 0.4em;
+    /* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
+    /* we have set a different line-height and want this to scale with that. */
+    padding: @code_padding;
 }
 
 .CodeMirror-linenumber {
-	// This is needed to fine tune the position of the line numbers because we use the 0.4em
-	// spacing in various places. Fine tuned to look right.
-  	padding: 0 8px 0 4px;
+    // This is needed to fine tune the position of the line numbers because we use the 0.4em in @code_padding
+    // spacing in various places. Fine tuned to look right.
+    padding: 0 8px 0 4px;
 }
 
 .CodeMirror-gutters {
-  // This is needed because our cell has rounded corners, otherwise the gutter area square
-  // corner cuts into the rounded cell border.
-  border-bottom-left-radius: @baseBorderRadius;
-  border-top-left-radius: @baseBorderRadius;
+    // This is needed because our cell has rounded corners, otherwise the gutter area square
+    // corner cuts into the rounded cell border.
+    border-bottom-left-radius: @baseBorderRadius;
+    border-top-left-radius: @baseBorderRadius;
 }
 
 .CodeMirror pre {
-	/* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
-	/* .CodeMirror-lines */
-	padding: 0;
-	border: 0;
-	.border-radius(0)
+    /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
+    /* .CodeMirror-lines */
+    padding: 0;
+    border: 0;
+    .border-radius(0)
 }

IPython/html/static/notebook/less/completer.less

@@ -3,8 +3,8 b''
     z-index: 10;
     overflow: hidden;
     border: 1px solid @border_color;
-	.corner-all;
-	.box-shadow(0px 6px 10px -1px #adadad);
+    .corner-all;
+    .box-shadow(0px 6px 10px -1px #adadad);
 }
 
 .completions select {
@@ -15,10 +15,10 b''
     margin: 0px;
     overflow: auto;
     font-family: @monoFontFamily;
-	font-size: 110%;
+    font-size: 110%;
     color: @textColor;
 }
 
 .completions select option.context {
-  color: @blueDark;
+    color: @blueDark;
 }

IPython/html/static/notebook/less/notebook.less

@@ -1,8 +1,8 b''
 
 body {
-    background-color:	@bodyBackground;
+    background-color:   @bodyBackground;
 }
-    
+
 body.notebook_app {
     overflow: hidden;
 }
@@ -57,9 +57,9 b' pre, code, kbd, samp { white-space: pre-wrap; }'
 }
 
 p {
-	margin-bottom:0;
+    margin-bottom:0;
 }
 
 .end_space {
-  height: 200px;
+    height: 200px;
 }

IPython/html/static/notebook/less/outputarea.less

@@ -1,3 +1,45 b''
+div.output_wrapper {
+    /* this position must be relative to enable descendents to be absolute within it */
+    position: relative;
+    .vbox()
+}
+
+/* class for the output area when it should be height-limited */
+div.output_scroll {
+    /* ideally, this would be max-height, but FF barfs all over that */
+    height: 24em;
+    /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
+    width: 100%;
+
+    overflow: auto;
+    .corner-all;
+    .box-shadow(inset 0 2px 8px rgba(0, 0, 0, .8));
+}
+
+/* output div while it is collapsed */
+div.output_collapsed {
+    margin: 0px;
+    padding: 0px;
+    .vbox();
+}
+
+div.out_prompt_overlay {
+    height: 100%;
+    padding: 0px @code_padding;
+    position: absolute;
+    .corner-all;
+}
+
+div.out_prompt_overlay:hover {
+    /* use inner shadow to get border that is computed the same on WebKit/FF */
+    .box-shadow(inset 0 0 1px #000);
+    background: rgba(240, 240, 240, 0.5);
+}
+
+div.output_prompt {
+    color: darkred;
+}
+
 /* This class is the outer container of all output sections. */
 div.output_area {
     padding: 0px;
@@ -23,15 +65,14 b' div.output_area {'
     }
 }
 
-
 /* This is needed to protect the pre formating from global settings such
    as that of bootstrap */
 .output {
     .vbox();
 }
 
-div.output_area pre {	
-    font-family: @monoFontFamily;	
+div.output_area pre {   
+    font-family: @monoFontFamily;
     margin: 0;
     padding: 0;
     border: 0;
@@ -46,8 +87,7 b' div.output_area pre {'
 /* This class is for the output subarea inside the output_area and after
    the prompt div. */
 div.output_subarea {
-    padding: 0.44em 0.4em 0.4em 1px;
-    margin-left: 6px;
+    padding: @code_padding @code_padding 0.0em @code_padding;
     .box-flex1();
 }
 
@@ -59,17 +99,17 b' div.output_text {'
     text-align: left;
     color: @textColor;
     font-family: @monoFontFamily;
-    /* This has to match that of the the CodeMirror class line-height below */	
+    /* This has to match that of the the CodeMirror class line-height below */  
     line-height: @code_line_height;
 }
 
 /* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
 div.output_stream {
-    padding-top: 0.0em;
-    padding-bottom: 0.0em;
 }
+
 div.output_stdout {
 }
+
 div.output_stderr {
     background: #fdd; /* very light red background for stderr */
 }
@@ -94,26 +134,28 b' div.output_jpeg {'
 /* raw_input styles */
 
 div.raw_input {
-  padding-top: 0px;
-  padding-bottom: 0px;
-  height: 1em;
-  line-height: 1em;
-  font-family: @monoFontFamily;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    height: 1em;
+    line-height: 1em;
+    font-family: @monoFontFamily;
 }
+
 span.input_prompt {
-  font-family: inherit;
+    font-family: inherit;
 }
+
 input.raw_input {
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-  width: auto;
-  margin: -2px 0px 0px 1px;
-  padding-left: 1px;
-  padding-top: 2px;
-  height: 1em;
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    width: auto;
+    margin: -2px 0px 0px 1px;
+    padding-left: 1px;
+    padding-top: 2px;
+    height: 1em;
 }
 
 p.p-space {
-  margin-bottom: 10px;
+    margin-bottom: 10px;
 }

IPython/html/static/notebook/less/pager.less

@@ -16,6 +16,6 b' div#pager {'
       line-height: @code_line_height;
       color: @textColor;
       background-color: @cell_background;
-      padding: 0.4em;
+      padding: @code_padding;
     }
 }

IPython/html/static/notebook/less/variables.less

@@ -1,9 +1,10 b''
 
 // Our own variables for this page
 
-@cell_selected_background: 		darken(@bodyBackground, 2%);
-@cell_background: 				darken(@bodyBackground, 3.2%);
-@border_color:					darken(@cell_selected_background, 31%);
-@light_border_color:			darken(@cell_selected_background, 17%);
-@border_width:					1px;
+@cell_selected_background:      darken(@bodyBackground, 2%);
+@cell_background:               darken(@bodyBackground, 3.2%);
+@border_color:                  darken(@cell_selected_background, 31%);
+@light_border_color:            darken(@cell_selected_background, 17%);
+@border_width:                  1px;
+@code_padding:                  0.4em;
 

IPython/html/static/style/ipython.min.css

@@ -54,18 +54,12 b' input.engine_num_input{height:20px;margin-bottom:2px;padding-top:0;padding-botto'
 .ansibgpurple{background-color:magenta;}
 .ansibgcyan{background-color:cyan;}
 .ansibggray{background-color:gray;}
-div.cell{border:1px solid transparent;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;padding:5px 5px 5px 0px;margin:2px 0px 2px 7px;outline:none;}div.cell.selected{border-radius:4px;border:thin #ababab solid;}
+div.cell{border:1px solid transparent;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;padding:5px 5px 5px 0px;margin:0px;outline:none;}div.cell.selected{border-radius:4px;border:thin #ababab solid;}
 div.prompt{min-width:11ex;padding:0.4em;margin:0px;font-family:monospace;text-align:right;line-height:1.231em;}
 div.inner_cell{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
 div.input{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
 div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7;}
 div.input_prompt{color:navy;border-top:1px solid transparent;}
-div.output_wrapper{margin-top:5px;position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
-div.output_scroll{height:24em;width:100%;overflow:auto;border-radius:4px;-webkit-box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);-moz-box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);}
-div.output_collapsed{margin:0px;padding:0px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
-div.out_prompt_overlay{height:100%;padding:0px 0.4em;position:absolute;border-radius:4px;}
-div.out_prompt_overlay:hover{-webkit-box-shadow:inset 0 0 1px #000000;-moz-box-shadow:inset 0 0 1px #000000;box-shadow:inset 0 0 1px #000000;background:rgba(240, 240, 240, 0.5);}
-div.output_prompt{color:darkred;}
 .CodeMirror{line-height:1.231em;height:auto;background:none;}
 .CodeMirror-scroll{overflow-y:hidden;overflow-x:auto;}
 @-moz-document url-prefix(){.CodeMirror-scroll{overflow-x:hidden;}}.CodeMirror-lines{padding:0.4em;}
@@ -93,14 +87,19 b' pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .j'
 .cm-s-ipython span.cm-operator{color:#AA22FF;font-weight:bold;}
 .cm-s-ipython span.cm-meta{color:#AA22FF;}
 .cm-s-ipython span.cm-tab{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);background-position:right;background-repeat:no-repeat;}
+div.output_wrapper{position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
+div.output_scroll{height:24em;width:100%;overflow:auto;border-radius:4px;-webkit-box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);-moz-box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);}
+div.output_collapsed{margin:0px;padding:0px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
+div.out_prompt_overlay{height:100%;padding:0px 0.4em;position:absolute;border-radius:4px;}
+div.out_prompt_overlay:hover{-webkit-box-shadow:inset 0 0 1px #000000;-moz-box-shadow:inset 0 0 1px #000000;box-shadow:inset 0 0 1px #000000;background:rgba(240, 240, 240, 0.5);}
+div.output_prompt{color:darkred;}
 div.output_area{padding:0px;page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}div.output_area .MathJax_Display{text-align:left !important;}
 div.output_area .rendered_html table{margin-left:0;margin-right:0;}
 div.output_area .rendered_html img{margin-left:0;margin-right:0;}
 .output{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
 div.output_area pre{font-family:monospace;margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;color:black;background-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;line-height:inherit;}
-div.output_subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
+div.output_subarea{padding:0.4em 0.4em 0em 0.4em;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
 div.output_text{text-align:left;color:#000000;font-family:monospace;line-height:1.231em;}
-div.output_stream{padding-top:0.0em;padding-bottom:0.0em;}
 div.output_stderr{background:#fdd;}
 div.output_latex{text-align:left;}
 .js-error{color:darkred;}

IPython/html/static/style/style.min.css

@@ -1435,18 +1435,12 b' input.engine_num_input{height:20px;margin-bottom:2px;padding-top:0;padding-botto'
 .ansibgpurple{background-color:magenta;}
 .ansibgcyan{background-color:cyan;}
 .ansibggray{background-color:gray;}
-div.cell{border:1px solid transparent;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;padding:5px 5px 5px 0px;margin:2px 0px 2px 7px;outline:none;}div.cell.selected{border-radius:4px;border:thin #ababab solid;}
+div.cell{border:1px solid transparent;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;padding:5px 5px 5px 0px;margin:0px;outline:none;}div.cell.selected{border-radius:4px;border:thin #ababab solid;}
 div.prompt{min-width:11ex;padding:0.4em;margin:0px;font-family:monospace;text-align:right;line-height:1.231em;}
 div.inner_cell{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
 div.input{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
 div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7;}
 div.input_prompt{color:navy;border-top:1px solid transparent;}
-div.output_wrapper{margin-top:5px;position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
-div.output_scroll{height:24em;width:100%;overflow:auto;border-radius:4px;-webkit-box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);-moz-box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);}
-div.output_collapsed{margin:0px;padding:0px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
-div.out_prompt_overlay{height:100%;padding:0px 0.4em;position:absolute;border-radius:4px;}
-div.out_prompt_overlay:hover{-webkit-box-shadow:inset 0 0 1px #000000;-moz-box-shadow:inset 0 0 1px #000000;box-shadow:inset 0 0 1px #000000;background:rgba(240, 240, 240, 0.5);}
-div.output_prompt{color:darkred;}
 .CodeMirror{line-height:1.231em;height:auto;background:none;}
 .CodeMirror-scroll{overflow-y:hidden;overflow-x:auto;}
 @-moz-document url-prefix(){.CodeMirror-scroll{overflow-x:hidden;}}.CodeMirror-lines{padding:0.4em;}
@@ -1474,14 +1468,19 b' pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .j'
 .cm-s-ipython span.cm-operator{color:#AA22FF;font-weight:bold;}
 .cm-s-ipython span.cm-meta{color:#AA22FF;}
 .cm-s-ipython span.cm-tab{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);background-position:right;background-repeat:no-repeat;}
+div.output_wrapper{position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
+div.output_scroll{height:24em;width:100%;overflow:auto;border-radius:4px;-webkit-box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);-moz-box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);}
+div.output_collapsed{margin:0px;padding:0px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
+div.out_prompt_overlay{height:100%;padding:0px 0.4em;position:absolute;border-radius:4px;}
+div.out_prompt_overlay:hover{-webkit-box-shadow:inset 0 0 1px #000000;-moz-box-shadow:inset 0 0 1px #000000;box-shadow:inset 0 0 1px #000000;background:rgba(240, 240, 240, 0.5);}
+div.output_prompt{color:darkred;}
 div.output_area{padding:0px;page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}div.output_area .MathJax_Display{text-align:left !important;}
 div.output_area .rendered_html table{margin-left:0;margin-right:0;}
 div.output_area .rendered_html img{margin-left:0;margin-right:0;}
 .output{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
 div.output_area pre{font-family:monospace;margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;color:black;background-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;line-height:inherit;}
-div.output_subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
+div.output_subarea{padding:0.4em 0.4em 0em 0.4em;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
 div.output_text{text-align:left;color:#000000;font-family:monospace;line-height:1.231em;}
-div.output_stream{padding-top:0.0em;padding-bottom:0.0em;}
 div.output_stderr{background:#fdd;}
 div.output_latex{text-align:left;}
 .js-error{color:darkred;}