From 10bcecd7cb343ae70a94e324a0e56a3d7f78c6ec 2014-12-23 21:20:20
From: Brian E. Granger <ellisonbg@gmail.com>
Date: 2014-12-23 21:20:20
Subject: [PATCH] Merge pull request #7242 from jdfreder/terminal-fixes

Some UI design changes for the Notebook and associates
---

diff --git a/IPython/html/static/base/js/page.js b/IPython/html/static/base/js/page.js
index 52e89b7..355f71e 100644
--- a/IPython/html/static/base/js/page.js
+++ b/IPython/html/static/base/js/page.js
@@ -10,7 +10,10 @@ define([
 
     var Page = function () {
         this.bind_events();
-        this._resize_header();
+
+        // When the page is ready, resize the header.
+        var that = this;
+        $(function() { that._resize_header(); });
     };
 
     Page.prototype.bind_events = function () {
diff --git a/IPython/html/static/base/less/page.less b/IPython/html/static/base/less/page.less
index 37607a9..f5b1b1b 100644
--- a/IPython/html/static/base/less/page.less
+++ b/IPython/html/static/base/less/page.less
@@ -6,7 +6,7 @@
 
 
 body {
-    background-color: white;
+    background-color: @body-bg;
     /* This makes sure that the body covers the entire window and needs to
        be in a different element than the display: box in wrapper below */
     position: absolute;
@@ -26,7 +26,6 @@ div#header {
     z-index: 100;
 
     #header-container {
-        padding-left: 30px;
         padding-bottom: 5px;
         padding-top: 5px;
         .border-box-sizing();
diff --git a/IPython/html/static/base/less/variables.less b/IPython/html/static/base/less/variables.less
index e28dbf1..578a10a 100644
--- a/IPython/html/static/base/less/variables.less
+++ b/IPython/html/static/base/less/variables.less
@@ -10,6 +10,9 @@
 @modal-inner-padding: 15px;
 @grid-float-breakpoint: 540px;
 @logo_height: 28px;
+@border-radius-base: 2px;
+@border-radius-small: 2px;
+@grid-gutter-width: 0px;
 
 // Disable modal slide-in from top animation.
 .modal {
@@ -37,4 +40,13 @@ label {
 }
 
 // Our own global variables for all pages go here
-
+@global-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+@global-shadow-dark: 0px 0px 12px 1px rgba(87, 87, 87, 0.4);
+@page-header-padding: 20px;
+/* Make the page background atleast 100% the height of the view port */
+@page-backdrop-height: 100vh;
+/* Make the page itself atleast 70% the height of the view port */
+@page-min-height: 70vh;
+@page-backdrop-color: #EEE;
+@page-color: @body-bg;
+@page-padding: 15px;
\ No newline at end of file
diff --git a/IPython/html/static/edit/less/edit.less b/IPython/html/static/edit/less/edit.less
index 072ffd5..99d0788 100644
--- a/IPython/html/static/edit/less/edit.less
+++ b/IPython/html/static/edit/less/edit.less
@@ -1,9 +1,34 @@
-#texteditor-container {
-    border-bottom: 1px solid #ccc;
-}
 
 #filename {
     font-size: 16pt;
     display: table;
     padding: 0px 5px;
 }
+
+#texteditor-backdrop {
+    padding-top: @page-header-padding;
+    padding-bottom: @page-header-padding;
+    
+    @media not print{
+        min-height: @page-backdrop-height;
+        background-color: @page-backdrop-color;
+    }
+
+    #texteditor-container {
+        .CodeMirror-gutter, .CodeMirror-gutters {
+            @media print {
+                background-color: @body-bg;
+            }
+            @media not print {
+                background-color: @page-color;
+            }
+        }
+
+        @media not print{
+            padding: 0px;
+            background-color :  @page-color;
+            min-height: @page-min-height;
+            .box-shadow(@global-shadow);
+        }
+    }
+}
diff --git a/IPython/html/static/edit/less/menubar.less b/IPython/html/static/edit/less/menubar.less
index f709333..ae21c34 100644
--- a/IPython/html/static/edit/less/menubar.less
+++ b/IPython/html/static/edit/less/menubar.less
@@ -11,4 +11,20 @@
   // truncate mode-menu, so it doesn't get longer than the screen
   overflow: auto;
   max-height: 20em;
-}
\ No newline at end of file
+}
+
+#current-mode {
+    margin-right: @padding-large-horizontal;
+}
+
+.edit_app {
+  #header {
+    .box-shadow(@global-shadow);
+  }
+
+  #menubar .navbar {
+    /* Use a negative 1 bottom margin, so the border overlaps the border of the
+    header */
+    margin-bottom: -1px;
+  }
+}
diff --git a/IPython/html/static/notebook/css/override.css b/IPython/html/static/notebook/css/override.css
index 170f1f7..117fb7c 100644
--- a/IPython/html/static/notebook/css/override.css
+++ b/IPython/html/static/notebook/css/override.css
@@ -4,4 +4,4 @@ a hack to deal with our current css styles and no new styling should be added in
 
 #ipython-main-app {
     position: relative;
-}
\ No newline at end of file
+}
diff --git a/IPython/html/static/notebook/less/celltoolbar.less b/IPython/html/static/notebook/less/celltoolbar.less
index 295aaf1..c930f54 100644
--- a/IPython/html/static/notebook/less/celltoolbar.less
+++ b/IPython/html/static/notebook/less/celltoolbar.less
@@ -12,8 +12,12 @@
     padding-right: 4px;
     .hbox();
     .end();
+    @media print{
+        display: none;
+    }
 }
 
+
 .ctb_hideshow {
     display:none;
     vertical-align:bottom;
diff --git a/IPython/html/static/notebook/less/codemirror.less b/IPython/html/static/notebook/less/codemirror.less
index 79fe102..058c55f 100644
--- a/IPython/html/static/notebook/less/codemirror.less
+++ b/IPython/html/static/notebook/less/codemirror.less
@@ -11,6 +11,7 @@
 
 .CodeMirror {
     line-height: @code_line_height;  /* Changed from 1em to our global default */
+    font-size: @notebook_font_size;
     height: auto;     /* Changed to auto to autogrow */
     background: none;  /* Changed from white to allow our bg to show through */
 }
diff --git a/IPython/html/static/notebook/less/kernelselector.less b/IPython/html/static/notebook/less/kernelselector.less
index 97d92ae..33c68a3 100644
--- a/IPython/html/static/notebook/less/kernelselector.less
+++ b/IPython/html/static/notebook/less/kernelselector.less
@@ -1,5 +1,4 @@
 #kernel_logo_widget {
-    margin-right: 1em;
     .pull-right();
     
     .current_kernel_logo {
diff --git a/IPython/html/static/notebook/less/notebook.less b/IPython/html/static/notebook/less/notebook.less
index 86b5cb7..c187108 100644
--- a/IPython/html/static/notebook/less/notebook.less
+++ b/IPython/html/static/notebook/less/notebook.less
@@ -1,8 +1,3 @@
-
-body {
-    background-color:   @body-bg;
-}
-
 @media (max-width: 767px) {
     // remove bootstrap-responsive's body padding on small screens
     body.notebook_app {
@@ -16,9 +11,13 @@ body {
 }
 
 div#notebook_panel {
-    margin: 0px 0px 0px 0px;
+    margin: 0px;
     padding: 0px;
     .border-box-sizing();
+    @media not print {
+        background-color: @page-backdrop-color;
+        min-height: @page-backdrop-height;
+    }
 }
 div#notebook {
     font-size: @notebook_font_size;
@@ -26,13 +25,23 @@ div#notebook {
     overflow-y: hidden;
     overflow-x: auto;
     width: 100%;
-    /* This spaces the cell away from the edge of the notebook area */
-    padding: 2em 0 2em 0;
+    /* This spaces the page away from the edge of the notebook area */
+    padding-top: @page-header-padding;
+    padding-bottom: @page-header-padding;
     margin: 0px;
     outline: none;
     .border-box-sizing();
 }
 
+#notebook-container{
+    @media not print{
+        padding: @page-padding;
+        background-color :  @page-color;
+        min-height: @page-min-height;
+        .box-shadow(@global-shadow);
+    }
+}
+
 div.ui-widget-content {
     border: 1px solid @border_color;
     outline: none;
@@ -75,5 +84,5 @@ p {
 }
 
 .notebook_app #header {
-    .box-shadow(@notebook-shadow);
+    .box-shadow(@global-shadow);
 }
diff --git a/IPython/html/static/notebook/less/pager.less b/IPython/html/static/notebook/less/pager.less
index 434fc5e..c36b003 100644
--- a/IPython/html/static/notebook/less/pager.less
+++ b/IPython/html/static/notebook/less/pager.less
@@ -10,6 +10,8 @@ div#pager {
     max-height: 50%;
     padding-top: 8px;
 
+    .box-shadow(@global-shadow);
+
     /* Display over codemirror */
     z-index: 100;
 
@@ -49,11 +51,6 @@ div#pager {
         border-top: 1px solid @light_border_color;
         border-bottom: 1px solid @light_border_color;
 
-        /* Similar to the notebook header's shadow, but not
-        exactly the same.  The settings had to be adjusted
-        to get the shadow to show. */
-        .box-shadow(1px 4px 9px -3px rgba(0, 0, 0, 0.15));
-
         /* This injects handle bars (a short, wide = symbol) for 
         the resize handle. */
         &::after {
diff --git a/IPython/html/static/notebook/less/savewidget.less b/IPython/html/static/notebook/less/savewidget.less
index 28954a1..79deddf 100644
--- a/IPython/html/static/notebook/less/savewidget.less
+++ b/IPython/html/static/notebook/less/savewidget.less
@@ -5,6 +5,7 @@ span.save_widget {
         height: 1em;
         line-height: 1em;
         padding: 3px;
+        margin-left: @padding-large-horizontal;
         border: none;
         font-size: 146.5%;
         &:hover{
diff --git a/IPython/html/static/notebook/less/toolbar.less b/IPython/html/static/notebook/less/toolbar.less
index 0599021..d811c44 100644
--- a/IPython/html/static/notebook/less/toolbar.less
+++ b/IPython/html/static/notebook/less/toolbar.less
@@ -33,7 +33,7 @@
   margin-top: -8px;
   border: 0px;
   min-height: 27px;
-  margin-left: 32px;
+  margin-left: 0px;
   padding-top: 11px;
   padding-bottom: 3px;
 
diff --git a/IPython/html/static/notebook/less/variables.less b/IPython/html/static/notebook/less/variables.less
index 466cb09..76d5639 100644
--- a/IPython/html/static/notebook/less/variables.less
+++ b/IPython/html/static/notebook/less/variables.less
@@ -10,7 +10,6 @@
 @notebook_line_height:          20px;
 @code_line_height:              1.21429em;  // changed from 1.231 to get 17px even
 @code_padding:                  0.4em;  // 5.6 px
-@notebook-shadow:               1px 4px 9px -6px rgba(0,0,0,.25);
 @rendered_html_border_color:    black;
 @input_prompt_color:            navy;
 @output_prompt_color:           darkred;
diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css
index b0e529c..edd2c35 100644
--- a/IPython/html/static/style/ipython.min.css
+++ b/IPython/html/static/style/ipython.min.css
@@ -18,13 +18,15 @@ pre {
 label {
   font-weight: normal;
 }
+/* Make the page background atleast 100% the height of the view port */
+/* Make the page itself atleast 70% the height of the view port */
 .border-box-sizing {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 .corner-all {
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .no-padding {
   padding: 0px;
@@ -349,7 +351,7 @@ div.cell {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  border-radius: 4px;
+  border-radius: 2px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -420,7 +422,7 @@ div.inner_cell {
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_area {
   border: 1px solid #cfcfcf;
-  border-radius: 4px;
+  border-radius: 2px;
   background: #f7f7f7;
   line-height: 1.21429em;
 }
@@ -449,7 +451,7 @@ div.unrecognized_cell {
   align-items: stretch;
 }
 div.unrecognized_cell .inner_cell {
-  border-radius: 4px;
+  border-radius: 2px;
   padding: 5px;
   font-weight: bold;
   color: red;
@@ -543,6 +545,7 @@ div.input_area > div.highlight > pre {
 .CodeMirror {
   line-height: 1.21429em;
   /* Changed from 1em to our global default */
+  font-size: 14px;
   height: auto;
   /* Changed to auto to autogrow */
   background: none;
@@ -563,8 +566,8 @@ div.input_area > div.highlight > pre {
   padding: 0 8px 0 4px;
 }
 .CodeMirror-gutters {
-  border-bottom-left-radius: 4px;
-  border-top-left-radius: 4px;
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
 }
 .CodeMirror pre {
   /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
@@ -750,7 +753,7 @@ div.output_scroll {
   /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
   width: 100%;
   overflow: auto;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
   display: block;
@@ -778,7 +781,7 @@ div.out_prompt_overlay {
   height: 100%;
   padding: 0px 0.4em;
   position: absolute;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 div.out_prompt_overlay:hover {
   /* use inner shadow to get border that is computed the same on WebKit/FF */
@@ -1269,7 +1272,7 @@ h6:hover .anchor-link {
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
-  border-radius: 4px;
+  border-radius: 2px;
   /* Round the corners of the slide track */
 }
 .widget-hslider {
@@ -1307,7 +1310,7 @@ h6:hover .anchor-link {
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
-  border-radius: 4px;
+  border-radius: 2px;
   /* Round the corners of the slide track */
   /* Make the div a flex box (makes FF behave correctly). */
   /* Old browsers */
@@ -1374,7 +1377,7 @@ h6:hover .anchor-link {
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
-  border-radius: 4px;
+  border-radius: 2px;
   /* Round the corners of the slide track */
   /* Make the div a flex box (makes FF behave correctly). */
   /* Old browsers */
diff --git a/IPython/html/static/style/style.less b/IPython/html/static/style/style.less
index b4113bc..8dbbda8 100644
--- a/IPython/html/static/style/style.less
+++ b/IPython/html/static/style/style.less
@@ -29,4 +29,5 @@
 // notebook
 @import "../notebook/less/style.less";
 
-@import "../notebook/less/terminal.less";
+// terminal
+@import "../terminal/less/terminal.less";
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index c8b595c..6d0f474 100644
--- a/IPython/html/static/style/style.min.css
+++ b/IPython/html/static/style/style.min.css
@@ -321,7 +321,7 @@ img {
   line-height: 1.42857143;
   background-color: #ffffff;
   border: 1px solid #dddddd;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   display: inline-block;
@@ -695,14 +695,14 @@ code {
   color: #c7254e;
   background-color: #f9f2f4;
   white-space: nowrap;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 kbd {
   padding: 2px 4px;
   font-size: 90%;
   color: #ffffff;
   background-color: #333333;
-  border-radius: 3px;
+  border-radius: 2px;
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
 pre {
@@ -716,7 +716,7 @@ pre {
   color: #333333;
   background-color: #f5f5f5;
   border: 1px solid #cccccc;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 pre code {
   padding: 0;
@@ -733,39 +733,39 @@ pre code {
 .container {
   margin-right: auto;
   margin-left: auto;
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-left: 0px;
+  padding-right: 0px;
 }
 @media (min-width: 768px) {
   .container {
-    width: 750px;
+    width: 720px;
   }
 }
 @media (min-width: 992px) {
   .container {
-    width: 970px;
+    width: 940px;
   }
 }
 @media (min-width: 1200px) {
   .container {
-    width: 1170px;
+    width: 1140px;
   }
 }
 .container-fluid {
   margin-right: auto;
   margin-left: auto;
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-left: 0px;
+  padding-right: 0px;
 }
 .row {
-  margin-left: -15px;
-  margin-right: -15px;
+  margin-left: 0px;
+  margin-right: 0px;
 }
 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
   position: relative;
   min-height: 1px;
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-left: 0px;
+  padding-right: 0px;
 }
 .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
   float: left;
@@ -1696,7 +1696,7 @@ output {
   background-color: #ffffff;
   background-image: none;
   border: 1px solid #cccccc;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
@@ -1795,7 +1795,7 @@ fieldset[disabled] .checkbox-inline {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 select.input-sm {
   height: 30px;
@@ -1972,8 +1972,8 @@ select[multiple].input-lg {
   min-height: 25px;
 }
 .form-horizontal .form-group {
-  margin-left: -15px;
-  margin-right: -15px;
+  margin-left: 0px;
+  margin-right: 0px;
 }
 .form-horizontal .form-control-static {
   padding-top: 7px;
@@ -1985,7 +1985,7 @@ select[multiple].input-lg {
 }
 .form-horizontal .has-feedback .form-control-feedback {
   top: 0;
-  right: 15px;
+  right: 0px;
 }
 .btn {
   display: inline-block;
@@ -2000,7 +2000,7 @@ select[multiple].input-lg {
   padding: 6px 12px;
   font-size: 13px;
   line-height: 1.42857143;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2326,14 +2326,14 @@ fieldset[disabled] .btn-link:focus {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 .btn-xs,
 .btn-group-xs > .btn {
   padding: 1px 5px;
   font-size: 12px;
   line-height: 1.5;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 .btn-block {
   display: block;
@@ -3017,7 +3017,7 @@ input[type="button"].btn-block {
   background-color: #ffffff;
   border: 1px solid #cccccc;
   border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   background-clip: padding-box;
@@ -3248,12 +3248,12 @@ input[type="button"].btn-block {
   border-radius: 0;
 }
 .btn-group-vertical > .btn:first-child:not(:last-child) {
-  border-top-right-radius: 4px;
+  border-top-right-radius: 2px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 .btn-group-vertical > .btn:last-child:not(:first-child) {
-  border-bottom-left-radius: 4px;
+  border-bottom-left-radius: 2px;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }
@@ -3335,7 +3335,7 @@ select[multiple].input-group-lg > .input-group-btn > .btn {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 select.input-group-sm > .form-control,
 select.input-group-sm > .input-group-addon,
@@ -3376,12 +3376,12 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   text-align: center;
   background-color: #eeeeee;
   border: 1px solid #cccccc;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .input-group-addon.input-sm {
   padding: 5px 10px;
   font-size: 12px;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 .input-group-addon.input-lg {
   padding: 10px 16px;
@@ -3497,7 +3497,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   margin-right: 2px;
   line-height: 1.42857143;
   border: 1px solid transparent;
-  border-radius: 4px 4px 0 0;
+  border-radius: 2px 2px 0 0;
 }
 .nav-tabs > li > a:hover {
   border-color: #eeeeee #eeeeee #dddddd;
@@ -3537,7 +3537,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .nav-tabs.nav-justified > li > a {
   margin-right: 0;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .nav-tabs.nav-justified > .active > a,
 .nav-tabs.nav-justified > .active > a:hover,
@@ -3547,7 +3547,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 @media (min-width: 768px) {
   .nav-tabs.nav-justified > li > a {
     border-bottom: 1px solid #dddddd;
-    border-radius: 4px 4px 0 0;
+    border-radius: 2px 2px 0 0;
   }
   .nav-tabs.nav-justified > .active > a,
   .nav-tabs.nav-justified > .active > a:hover,
@@ -3559,7 +3559,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   float: left;
 }
 .nav-pills > li > a {
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .nav-pills > li + li {
   margin-left: 2px;
@@ -3605,7 +3605,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .nav-tabs-justified > li > a {
   margin-right: 0;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .nav-tabs-justified > .active > a,
 .nav-tabs-justified > .active > a:hover,
@@ -3615,7 +3615,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 @media (min-width: 768px) {
   .nav-tabs-justified > li > a {
     border-bottom: 1px solid #dddddd;
-    border-radius: 4px 4px 0 0;
+    border-radius: 2px 2px 0 0;
   }
   .nav-tabs-justified > .active > a,
   .nav-tabs-justified > .active > a:hover,
@@ -3642,7 +3642,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 @media (min-width: 540px) {
   .navbar {
-    border-radius: 4px;
+    border-radius: 2px;
   }
 }
 @media (min-width: 540px) {
@@ -3653,8 +3653,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .navbar-collapse {
   max-height: 340px;
   overflow-x: visible;
-  padding-right: 15px;
-  padding-left: 15px;
+  padding-right: 0px;
+  padding-left: 0px;
   border-top: 1px solid transparent;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
   -webkit-overflow-scrolling: touch;
@@ -3688,8 +3688,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .container-fluid > .navbar-header,
 .container > .navbar-collapse,
 .container-fluid > .navbar-collapse {
-  margin-right: -15px;
-  margin-left: -15px;
+  margin-right: 0px;
+  margin-left: 0px;
 }
 @media (min-width: 540px) {
   .container > .navbar-header,
@@ -3733,7 +3733,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .navbar-brand {
   float: left;
-  padding: 6px 15px;
+  padding: 6px 0px;
   font-size: 17px;
   line-height: 18px;
   height: 30px;
@@ -3745,20 +3745,20 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 @media (min-width: 540px) {
   .navbar > .container .navbar-brand,
   .navbar > .container-fluid .navbar-brand {
-    margin-left: -15px;
+    margin-left: 0px;
   }
 }
 .navbar-toggle {
   position: relative;
   float: right;
-  margin-right: 15px;
+  margin-right: 0px;
   padding: 9px 10px;
   margin-top: -2px;
   margin-bottom: -2px;
   background-color: transparent;
   background-image: none;
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .navbar-toggle:focus {
   outline: none;
@@ -3778,7 +3778,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   }
 }
 .navbar-nav {
-  margin: 3px -15px;
+  margin: 3px 0px;
 }
 .navbar-nav > li > a {
   padding-top: 10px;
@@ -3820,7 +3820,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
     padding-bottom: 6px;
   }
   .navbar-nav.navbar-right:last-child {
-    margin-right: -15px;
+    margin-right: 0px;
   }
 }
 @media (min-width: 540px) {
@@ -3834,9 +3834,9 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   }
 }
 .navbar-form {
-  margin-left: -15px;
-  margin-right: -15px;
-  padding: 10px 15px;
+  margin-left: 0px;
+  margin-right: 0px;
+  padding: 10px 0px;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
@@ -3896,7 +3896,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
     box-shadow: none;
   }
   .navbar-form.navbar-right:last-child {
-    margin-right: -15px;
+    margin-right: 0px;
   }
 }
 .navbar-nav > li > .dropdown-menu {
@@ -3927,8 +3927,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 @media (min-width: 540px) {
   .navbar-text {
     float: left;
-    margin-left: 15px;
-    margin-right: 15px;
+    margin-left: 0px;
+    margin-right: 0px;
   }
   .navbar-text.navbar-right:last-child {
     margin-right: 0;
@@ -4111,7 +4111,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   margin-bottom: 18px;
   list-style: none;
   background-color: #f5f5f5;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .breadcrumb > li {
   display: inline-block;
@@ -4128,7 +4128,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   display: inline-block;
   padding-left: 0;
   margin: 18px 0;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .pagination > li {
   display: inline;
@@ -4148,13 +4148,13 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .pagination > li:first-child > a,
 .pagination > li:first-child > span {
   margin-left: 0;
-  border-bottom-left-radius: 4px;
-  border-top-left-radius: 4px;
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
 }
 .pagination > li:last-child > a,
 .pagination > li:last-child > span {
-  border-bottom-right-radius: 4px;
-  border-top-right-radius: 4px;
+  border-bottom-right-radius: 2px;
+  border-top-right-radius: 2px;
 }
 .pagination > li > a:hover,
 .pagination > li > span:hover,
@@ -4209,13 +4209,13 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .pagination-sm > li:first-child > a,
 .pagination-sm > li:first-child > span {
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
 }
 .pagination-sm > li:last-child > a,
 .pagination-sm > li:last-child > span {
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
+  border-bottom-right-radius: 2px;
+  border-top-right-radius: 2px;
 }
 .pager {
   padding-left: 0;
@@ -4403,7 +4403,7 @@ a.list-group-item.active > .badge,
   line-height: 1.42857143;
   background-color: #ffffff;
   border: 1px solid #dddddd;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
 }
@@ -4425,7 +4425,7 @@ a.thumbnail.active {
   padding: 15px;
   margin-bottom: 18px;
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .alert h4 {
   margin-top: 0;
@@ -4515,7 +4515,7 @@ a.thumbnail.active {
   height: 18px;
   margin-bottom: 18px;
   background-color: #f5f5f5;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
@@ -4611,13 +4611,13 @@ a.thumbnail.active {
   border: 1px solid #dddddd;
 }
 .list-group-item:first-child {
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
 }
 .list-group-item:last-child {
   margin-bottom: 0;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
 }
 .list-group-item > .badge {
   float: right;
@@ -4754,7 +4754,7 @@ a.list-group-item-danger.active:focus {
   margin-bottom: 18px;
   background-color: #ffffff;
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
 }
@@ -4764,8 +4764,8 @@ a.list-group-item-danger.active:focus {
 .panel-heading {
   padding: 10px 15px;
   border-bottom: 1px solid transparent;
-  border-top-right-radius: 3px;
-  border-top-left-radius: 3px;
+  border-top-right-radius: 1px;
+  border-top-left-radius: 1px;
 }
 .panel-heading > .dropdown .dropdown-toggle {
   color: inherit;
@@ -4783,8 +4783,8 @@ a.list-group-item-danger.active:focus {
   padding: 10px 15px;
   background-color: #f5f5f5;
   border-top: 1px solid #dddddd;
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 1px;
+  border-bottom-left-radius: 1px;
 }
 .panel > .list-group {
   margin-bottom: 0;
@@ -4795,13 +4795,13 @@ a.list-group-item-danger.active:focus {
 }
 .panel > .list-group:first-child .list-group-item:first-child {
   border-top: 0;
-  border-top-right-radius: 3px;
-  border-top-left-radius: 3px;
+  border-top-right-radius: 1px;
+  border-top-left-radius: 1px;
 }
 .panel > .list-group:last-child .list-group-item:last-child {
   border-bottom: 0;
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 1px;
+  border-bottom-left-radius: 1px;
 }
 .panel-heading + .list-group .list-group-item:first-child {
   border-top-width: 0;
@@ -4812,8 +4812,8 @@ a.list-group-item-danger.active:focus {
 }
 .panel > .table:first-child,
 .panel > .table-responsive:first-child > .table:first-child {
-  border-top-right-radius: 3px;
-  border-top-left-radius: 3px;
+  border-top-right-radius: 1px;
+  border-top-left-radius: 1px;
 }
 .panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
 .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
@@ -4823,7 +4823,7 @@ a.list-group-item-danger.active:focus {
 .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
 .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
 .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
-  border-top-left-radius: 3px;
+  border-top-left-radius: 1px;
 }
 .panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
 .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
@@ -4833,12 +4833,12 @@ a.list-group-item-danger.active:focus {
 .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
 .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
 .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
-  border-top-right-radius: 3px;
+  border-top-right-radius: 1px;
 }
 .panel > .table:last-child,
 .panel > .table-responsive:last-child > .table:last-child {
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 1px;
+  border-bottom-left-radius: 1px;
 }
 .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
 .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
@@ -4848,7 +4848,7 @@ a.list-group-item-danger.active:focus {
 .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
 .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
 .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
-  border-bottom-left-radius: 3px;
+  border-bottom-left-radius: 1px;
 }
 .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
 .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
@@ -4858,7 +4858,7 @@ a.list-group-item-danger.active:focus {
 .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
 .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
 .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
-  border-bottom-right-radius: 3px;
+  border-bottom-right-radius: 1px;
 }
 .panel > .panel-body + .table,
 .panel > .panel-body + .table-responsive {
@@ -4929,7 +4929,7 @@ a.list-group-item-danger.active:focus {
 }
 .panel-group .panel {
   margin-bottom: 0;
-  border-radius: 4px;
+  border-radius: 2px;
   overflow: hidden;
 }
 .panel-group .panel + .panel {
@@ -5037,7 +5037,7 @@ a.list-group-item-danger.active:focus {
   margin-bottom: 20px;
   background-color: #f5f5f5;
   border: 1px solid #e3e3e3;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
@@ -5051,7 +5051,7 @@ a.list-group-item-danger.active:focus {
 }
 .well-sm {
   padding: 9px;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 .close {
   float: right;
@@ -5228,7 +5228,7 @@ button.close {
   text-align: center;
   text-decoration: none;
   background-color: #000000;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .tooltip-arrow {
   position: absolute;
@@ -7479,13 +7479,15 @@ pre {
 label {
   font-weight: normal;
 }
+/* Make the page background atleast 100% the height of the view port */
+/* Make the page itself atleast 70% the height of the view port */
 .border-box-sizing {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 .corner-all {
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .no-padding {
   padding: 0px;
@@ -7741,7 +7743,7 @@ div.traceback-wrapper {
  * Author: IPython Development Team
  */
 body {
-  background-color: white;
+  background-color: #ffffff;
   /* This makes sure that the body covers the entire window and needs to
        be in a different element than the display: box in wrapper below */
   position: absolute;
@@ -7759,7 +7761,6 @@ div#header {
   z-index: 100;
 }
 div#header #header-container {
-  padding-left: 30px;
   padding-bottom: 5px;
   padding-top: 5px;
   box-sizing: border-box;
@@ -7993,7 +7994,7 @@ ul.breadcrumb span {
   margin-top: 4px;
   margin-bottom: 20px;
   border: 1px solid #ababab;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .list_container > div {
   border-bottom: 1px solid #ababab;
@@ -8134,6 +8135,9 @@ ul#new-menu {
 .kernel-menu-icon-current:before {
   content: "\f00c";
 }
+#tab_content {
+  padding-top: 20px;
+}
 /*!
 *
 * IPython text editor webapp
@@ -8149,14 +8153,54 @@ ul#new-menu {
   overflow: auto;
   max-height: 20em;
 }
-#texteditor-container {
-  border-bottom: 1px solid #ccc;
+#current-mode {
+  margin-right: 16px;
+}
+.edit_app #header {
+  -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+  box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+}
+.edit_app #menubar .navbar {
+  /* Use a negative 1 bottom margin, so the border overlaps the border of the
+    header */
+  margin-bottom: -1px;
 }
 #filename {
   font-size: 16pt;
   display: table;
   padding: 0px 5px;
 }
+#texteditor-backdrop {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+@media not print {
+  #texteditor-backdrop {
+    min-height: 100vh;
+    background-color: #eeeeee;
+  }
+}
+@media print {
+  #texteditor-backdrop #texteditor-container .CodeMirror-gutter,
+  #texteditor-backdrop #texteditor-container .CodeMirror-gutters {
+    background-color: #ffffff;
+  }
+}
+@media not print {
+  #texteditor-backdrop #texteditor-container .CodeMirror-gutter,
+  #texteditor-backdrop #texteditor-container .CodeMirror-gutters {
+    background-color: #ffffff;
+  }
+}
+@media not print {
+  #texteditor-backdrop #texteditor-container {
+    padding: 0px;
+    background-color: #ffffff;
+    min-height: 70vh;
+    -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+    box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+  }
+}
 /*!
 *
 * IPython notebook
@@ -8232,7 +8276,7 @@ div.cell {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  border-radius: 4px;
+  border-radius: 2px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -8303,7 +8347,7 @@ div.inner_cell {
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_area {
   border: 1px solid #cfcfcf;
-  border-radius: 4px;
+  border-radius: 2px;
   background: #f7f7f7;
   line-height: 1.21429em;
 }
@@ -8332,7 +8376,7 @@ div.unrecognized_cell {
   align-items: stretch;
 }
 div.unrecognized_cell .inner_cell {
-  border-radius: 4px;
+  border-radius: 2px;
   padding: 5px;
   font-weight: bold;
   color: red;
@@ -8426,6 +8470,7 @@ div.input_area > div.highlight > pre {
 .CodeMirror {
   line-height: 1.21429em;
   /* Changed from 1em to our global default */
+  font-size: 14px;
   height: auto;
   /* Changed to auto to autogrow */
   background: none;
@@ -8446,8 +8491,8 @@ div.input_area > div.highlight > pre {
   padding: 0 8px 0 4px;
 }
 .CodeMirror-gutters {
-  border-bottom-left-radius: 4px;
-  border-top-left-radius: 4px;
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
 }
 .CodeMirror pre {
   /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
@@ -8633,7 +8678,7 @@ div.output_scroll {
   /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
   width: 100%;
   overflow: auto;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
   display: block;
@@ -8661,7 +8706,7 @@ div.out_prompt_overlay {
   height: 100%;
   padding: 0px 0.4em;
   position: absolute;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 div.out_prompt_overlay:hover {
   /* use inner shadow to get border that is computed the same on WebKit/FF */
@@ -9152,7 +9197,7 @@ h6:hover .anchor-link {
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
-  border-radius: 4px;
+  border-radius: 2px;
   /* Round the corners of the slide track */
 }
 .widget-hslider {
@@ -9190,7 +9235,7 @@ h6:hover .anchor-link {
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
-  border-radius: 4px;
+  border-radius: 2px;
   /* Round the corners of the slide track */
   /* Make the div a flex box (makes FF behave correctly). */
   /* Old browsers */
@@ -9257,7 +9302,7 @@ h6:hover .anchor-link {
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
-  border-radius: 4px;
+  border-radius: 2px;
   /* Round the corners of the slide track */
   /* Make the div a flex box (makes FF behave correctly). */
   /* Old browsers */
@@ -9471,9 +9516,6 @@ h6:hover .anchor-link {
 * IPython notebook webapp
 *
 */
-body {
-  background-color: #ffffff;
-}
 @media (max-width: 767px) {
   body.notebook_app {
     padding-left: 0px;
@@ -9486,26 +9528,42 @@ body {
   -webkit-box-sizing: border-box;
 }
 div#notebook_panel {
-  margin: 0px 0px 0px 0px;
+  margin: 0px;
   padding: 0px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
+@media not print {
+  div#notebook_panel {
+    background-color: #eeeeee;
+    min-height: 100vh;
+  }
+}
 div#notebook {
   font-size: 14px;
   line-height: 20px;
   overflow-y: hidden;
   overflow-x: auto;
   width: 100%;
-  /* This spaces the cell away from the edge of the notebook area */
-  padding: 2em 0 2em 0;
+  /* This spaces the page away from the edge of the notebook area */
+  padding-top: 20px;
+  padding-bottom: 20px;
   margin: 0px;
   outline: none;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
+@media not print {
+  #notebook-container {
+    padding: 15px;
+    background-color: #ffffff;
+    min-height: 70vh;
+    -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+    box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+  }
+}
 div.ui-widget-content {
   border: 1px solid #ababab;
   outline: none;
@@ -9513,7 +9571,7 @@ div.ui-widget-content {
 pre.dialog {
   background-color: #f7f7f7;
   border: 1px solid #ddd;
-  border-radius: 4px;
+  border-radius: 2px;
   padding: 0.4em;
   padding-left: 2em;
 }
@@ -9545,15 +9603,15 @@ p {
   margin-bottom: -1px;
 }
 .notebook_app #header {
-  -webkit-box-shadow: 1px 4px 9px -6px rgba(0, 0, 0, 0.25);
-  box-shadow: 1px 4px 9px -6px rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+  box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
 }
 /* CSS for the cell toolbar */
 .celltoolbar {
   border: thin solid #CFCFCF;
   border-bottom: none;
   background: #EEE;
-  border-radius: 4px 4px 0px 0px;
+  border-radius: 2px 2px 0px 0px;
   width: 100%;
   height: 29px;
   padding-right: 4px;
@@ -9578,6 +9636,11 @@ p {
   /* Modern browsers */
   justify-content: flex-end;
 }
+@media print {
+  .celltoolbar {
+    display: none;
+  }
+}
 .ctb_hideshow {
   display: none;
   vertical-align: bottom;
@@ -9608,7 +9671,6 @@ p {
   background-color: #ffffff;
   background-image: none;
   border: 1px solid #cccccc;
-  border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
@@ -9617,7 +9679,7 @@ p {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
-  border-radius: 3px;
+  border-radius: 2px;
   width: inherit;
   font-size: 87%;
   height: 22px;
@@ -9666,7 +9728,7 @@ select[multiple].celltoolbar select {
   z-index: 10;
   overflow: hidden;
   border: 1px solid #ababab;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-box-shadow: 0px 6px 10px -1px #adadad;
   box-shadow: 0px 6px 10px -1px #adadad;
 }
@@ -9686,7 +9748,6 @@ select[multiple].celltoolbar select {
   color: #3071a9;
 }
 #kernel_logo_widget {
-  margin-right: 1em;
   float: right !important;
   float: right;
 }
@@ -9704,7 +9765,7 @@ select[multiple].celltoolbar select {
 }
 #menubar .navbar {
   border-top: 1px;
-  border-radius: 0px 0px 4px 4px;
+  border-radius: 0px 0px 2px 2px;
   margin-bottom: 6px;
 }
 #menubar .navbar-toggle {
@@ -10115,6 +10176,8 @@ div#pager {
   width: 100%;
   max-height: 50%;
   padding-top: 8px;
+  -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+  box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
   /* Display over codemirror */
   z-index: 100;
   /* Hack which prevents jquery ui resizable from changing top. */
@@ -10150,11 +10213,6 @@ div#pager .ui-resizable-handle {
   background: #f7f7f7;
   border-top: 1px solid #cfcfcf;
   border-bottom: 1px solid #cfcfcf;
-  /* Similar to the notebook header's shadow, but not
-        exactly the same.  The settings had to be adjusted
-        to get the shadow to show. */
-  -webkit-box-shadow: 1px 4px 9px -3px rgba(0, 0, 0, 0.15);
-  box-shadow: 1px 4px 9px -3px rgba(0, 0, 0, 0.15);
   /* This injects handle bars (a short, wide = symbol) for 
         the resize handle. */
 }
@@ -10206,9 +10264,10 @@ span.save_widget span.filename {
   height: 1em;
   line-height: 1em;
   padding: 3px;
+  margin-left: 16px;
   border: none;
   font-size: 146.5%;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 span.save_widget span.filename:hover {
   background-color: #e6e6e6;
@@ -10268,7 +10327,7 @@ span.autosave_status {
   margin-top: -8px;
   border: 0px;
   min-height: 27px;
-  margin-left: 32px;
+  margin-left: 0px;
   padding-top: 11px;
   padding-bottom: 3px;
 }
@@ -10384,7 +10443,7 @@ span.autosave_status {
   -moz-box-shadow: 0px 6px 10px -1px #adadad;
   -webkit-box-shadow: 0px 6px 10px -1px #adadad;
   box-shadow: 0px 6px 10px -1px #adadad;
-  border-radius: 4px;
+  border-radius: 2px;
   position: absolute;
   z-index: 1000;
 }
@@ -10423,17 +10482,24 @@ span.autosave_status {
 }
 .terminal {
   float: left;
-  border: black solid 5px;
-  font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;
-  font-size: 11px;
+  font-family: monospace;
   color: white;
   background: black;
+  padding: 0.4em;
+  border-radius: 2px;
+  -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.4);
+  box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.4);
+}
+.terminal,
+.terminal dummy-screen {
+  line-height: 1em;
+  font-size: 14px;
 }
 .terminal-cursor {
   color: black;
   background: white;
 }
 #terminado-container {
-  margin: 8px;
+  margin-top: 20px;
 }
 /*# sourceMappingURL=style.min.css.map */
\ No newline at end of file
diff --git a/IPython/html/static/terminal/css/override.css b/IPython/html/static/terminal/css/override.css
new file mode 100644
index 0000000..6d74111
--- /dev/null
+++ b/IPython/html/static/terminal/css/override.css
@@ -0,0 +1,7 @@
+/*This file contains any manual css for this page that needs to override the global styles.
+This is only required when different pages style the same element differently. This is just
+a hack to deal with our current css styles and no new styling should be added in this file.*/
+
+body {
+    overflow: hidden;
+}
diff --git a/IPython/html/static/terminal/js/main.js b/IPython/html/static/terminal/js/main.js
index 12c4e37..382dada 100644
--- a/IPython/html/static/terminal/js/main.js
+++ b/IPython/html/static/terminal/js/main.js
@@ -29,7 +29,7 @@ require([
     var header = $("#header")[0]
     function calculate_size() {
         height = window.innerHeight - header.offsetHeight;
-        width = window.innerWidth;
+        width = $('#terminado-container').width();
         var rows = Math.min(1000, Math.max(20, Math.floor(height/termRowHeight())-1));
         var cols = Math.min(1000, Math.max(40, Math.floor(width/termColWidth())-1));
         console.log("resize to :", rows , 'rows by ', cols, 'columns');
diff --git a/IPython/html/static/notebook/less/terminal.less b/IPython/html/static/terminal/less/terminal.less
similarity index 62%
rename from IPython/html/static/notebook/less/terminal.less
rename to IPython/html/static/terminal/less/terminal.less
index f20cefa..e6b2a24 100644
--- a/IPython/html/static/notebook/less/terminal.less
+++ b/IPython/html/static/terminal/less/terminal.less
@@ -1,10 +1,16 @@
 .terminal {
   float: left;
-  border: black solid 5px;
-  font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;
-  font-size: 11px;
+  font-family: monospace;
   color: white;
   background: black;
+  padding: @code_padding;
+  border-radius: @border-radius-base;
+  .box-shadow(@global-shadow-dark);
+
+  &, dummy-screen {
+    line-height: 1em;
+    font-size: @notebook_font_size;
+  }
 }
 
 .terminal-cursor {
@@ -13,5 +19,5 @@
 }
 
 #terminado-container {
-    margin: 8px;
+  margin-top: @page-header-padding;
 }
diff --git a/IPython/html/static/tree/css/override.css b/IPython/html/static/tree/css/override.css
index 38d46bc..3ad31e2 100644
--- a/IPython/html/static/tree/css/override.css
+++ b/IPython/html/static/tree/css/override.css
@@ -1,7 +1,3 @@
 /*This file contains any manual css for this page that needs to override the global styles.
 This is only required when different pages style the same element differently. This is just
 a hack to deal with our current css styles and no new styling should be added in this file.*/
-
-#ipython-main-app {
-    margin: 28px auto 0px auto;
-}
diff --git a/IPython/html/static/tree/less/tree.less b/IPython/html/static/tree/less/tree.less
index 19ebeeb..9a12bde 100644
--- a/IPython/html/static/tree/less/tree.less
+++ b/IPython/html/static/tree/less/tree.less
@@ -57,7 +57,7 @@ ul.breadcrumb {
   margin-top: @dashboard_tb_pad;
   margin-bottom: 5*@dashboard_tb_pad;
   border: 1px solid @border_color;
-  border-radius: 4px;
+  border-radius: @border-radius-base;
 }
 
 .list_container > div {
@@ -173,5 +173,9 @@ ul#new-menu {
 }
 
 .kernel-menu-icon-current:before {
-  content: @fa-var-check;
+    content: @fa-var-check;
+}
+
+#tab_content {
+    padding-top: @page-header-padding;
 }
diff --git a/IPython/html/templates/edit.html b/IPython/html/templates/edit.html
index fdf30ca..b4fbf31 100644
--- a/IPython/html/templates/edit.html
+++ b/IPython/html/templates/edit.html
@@ -10,6 +10,7 @@
 
 {% block params %}
 
+class="edit_app"
 data-base-url="{{base_url}}"
 data-file-path="{{file_path}}"
 
@@ -75,12 +76,15 @@ data-file-path="{{file_path}}"
   </div>
 </div>
 
+<div class="lower-header-bar"></div>
+
 {% endblock %}
 
 {% block site %}
 
-
+<div id="texteditor-backdrop">
 <div id="texteditor-container" class="container"></div>
+</div>
 
 {% endblock %}
 
diff --git a/IPython/html/templates/page.html b/IPython/html/templates/page.html
index 8e2ee8b..53932ca 100644
--- a/IPython/html/templates/page.html
+++ b/IPython/html/templates/page.html
@@ -105,6 +105,7 @@
   {% block header %}
   {% endblock %}
 </div>
+
 <div id="header-spacer"></div>
 
 <div id="site">
diff --git a/IPython/html/templates/terminal.html b/IPython/html/templates/terminal.html
index aa32d04..2b77acb 100644
--- a/IPython/html/templates/terminal.html
+++ b/IPython/html/templates/terminal.html
@@ -9,10 +9,15 @@ data-ws-path="{{ws_path}}"
 
 {% endblock %}
 
+{% block stylesheet %}
+{{super()}}
+
+<link rel="stylesheet" href="{{ static_url("terminal/css/override.css") }}" type="text/css" />
+{% endblock %}
 
 {% block site %}
 
-<div id="terminado-container"></div>
+<div id="terminado-container" class="container"></div>
 
 {% endblock %}