diff --git a/gtk-3.20/scss/widgets/_notebook.scss b/gtk-3.20/scss/widgets/_notebook.scss
index 3c9169a..59d3963 100644
--- a/gtk-3.20/scss/widgets/_notebook.scss
+++ b/gtk-3.20/scss/widgets/_notebook.scss
@@ -6,116 +6,278 @@
 ***********/
 
 @include exports("notebook") {
-
     notebook {
         > header {
-            padding: 0;
-            margin: 0;
-            border-width: 0;
-            border-radius: 0;
-            background-image: none;
-            background-clip: border-box;
+            padding: 1px;
+            border-color: $borders_color;
+            border-width: 1px;
             background-color: shade($base_color, .9);
-            color: $text_color;
 
-            &.frame {
-                border-color: border_normal($base_color);
-
-                &.top { border-width: 1px 1px 0; }
-
-                &.right { border-width: 1px 1px 1px 0; }
-
-                &.bottom { border-width: 0 1px 1px; }
-
-                &.left { border-width: 1px 0 1px 1px; }
+            &:backdrop {
+                border-color: $backdrop_borders_color;
+                background-color: shade($backdrop_base_color, .9);
             }
 
-            tabs arrow {
-                margin: 5px;
-            }
-        }
-
-        viewport {
-            border-width: 0;
-            background-color: $base_color;
-            color: $text_color;
-        }
-
-        tab {
-            padding: ($spacing + 1) ($spacing * 2);
-            border: 1px solid transparent;
-            background-color: transparent;
-            background-image: none;
-
-            &:hover {
-                background-color: shade($base_color, .95);
-                border-color: shade($base_color, .8);
-            }
-
-            &:checked {
-                background-color: $base_color;
-                background-image: none;
-                border-color: shade($base_color, .85);
-
-                label { color: $text_color; }
-            }
+            tabs { margin: -1px; }
 
             &.top {
-                border-bottom-width: 0;
-                border-bottom-right-radius: 0;
-                border-bottom-left-radius: 0;
-            }
+                border-bottom-style: solid;
 
-            &.right {
-                border-left-width: 0;
-                border-bottom-left-radius: 0;
-                border-top-left-radius: 0;
-            }
+                > tabs {
+                    margin-bottom: -2px;
 
+                    > tab {
+                        &:hover { box-shadow: inset 0 -3px $borders_color; }
+
+                        &:backdrop { box-shadow: none; }
+
+                        &:checked { box-shadow: inset 0 -3px $selected_bg_color; }
+                    }
+                }
+            }
 
             &.bottom {
-                border-top-width: 0;
-                border-top-right-radius: 0;
-                border-top-left-radius: 0;
+                border-top-style: solid;
+
+                > tabs {
+                    margin-top: -2px;
+
+                    > tab {
+                        &:hover { box-shadow: inset 0 3px $borders_color; }
+
+                        &:backdrop { box-shadow: none; }
+
+                        &:checked { box-shadow: inset 0 3px $selected_bg_color; }
+                    }
+                }
             }
 
             &.left {
-                border-right-width: 0;
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
+                border-right-style: solid;
+
+                > tabs {
+                    margin-right: -2px;
+
+                    > tab {
+                        &:hover { box-shadow: inset -3px 0 $borders_color; }
+
+                        &:backdrop { box-shadow: none; }
+
+                        &:checked { box-shadow: inset -3px 0 $selected_bg_color; }
+                    }
+                }
             }
 
-            label { color: mix($text_color, $base_color, .3); }
+            &.right {
+                border-left-style: solid;
 
-            /* close button styling */
-            button { @extend %close_button; }
-        }
+                > tabs {
+                    margin-left: -2px;
 
-        .prelight-page {
-            &, label { color: mix($text_color, $base_color, .15); }
-        }
+                    > tab {
+                        &:hover { box-shadow: inset 3px 0 $borders_color; }
 
-        .active-page {
-            &, label { color: $text_color; }
-        }
+                        &:backdrop { box-shadow: none; }
 
-        .reorderable-page {
-            &:hover {
-                background-color: shade($base_color, .85);
-                border-left: 0;
-                border-right: 0;
-                /* using box shadows instead of borders due to slanted edges */
-                box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03),
-                            inset 1px 0 shade($base_color, .7), inset -1px 0 shade($base_color, .7);
+                        &:checked { box-shadow: inset 3px 0 $selected_bg_color; }
+                    }
+                }
             }
 
-            &:checked {
-                background-color: shade($base_color, .9);
-                border-left: 0;
-                border-right: 0;
-                box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03),
-                            inset 1px 0 shade($base_color, .75), inset -1px 0 shade($base_color, .75);
+            &.top > tabs > arrow {
+                @extend %notebook_vert_arrows;
+
+                border-top-style: none;
             }
+
+            &.bottom > tabs > arrow {
+                @extend %notebook_vert_arrows;
+
+                border-bottom-style: none;
+            }
+
+            @at-root %notebook_vert_arrows {
+                margin-left: 0;
+                margin-right: 0;
+                padding-left: 4px;
+                padding-right: 4px;
+
+                &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
+
+                &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
+            }
+
+            &.left > tabs > arrow {
+                @extend %notebook_horz_arrows;
+
+                border-left-style: none;
+            }
+
+            &.right > tabs > arrow {
+                @extend %notebook_horz_arrows;
+
+                border-right-style: none;
+            }
+
+            @at-root %notebook_horz_arrows {
+                margin-top: 0;
+                margin-bottom: 0;
+                padding-top: 4px;
+                padding-bottom: 4px;
+
+                &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
+
+                &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+            }
+
+            > tabs > arrow {
+                //@extend %button_basic;
+
+                //@extend %button_basic.flat;
+
+                min-height: 16px;
+                min-width: 16px;
+                border-radius: 0;
+
+                &:hover:not(:active):not(:backdrop) {
+                    background-clip: padding-box;
+                    background-image: none;
+                    background-color: transparentize(white, .7);
+                    border-color: transparent;
+                    box-shadow: none;
+                }
+
+                //&:disabled { @include button(undecorated); }
+            }
+
+            tab {
+                min-height: 30px;
+                min-width: 30px;
+                padding: $spacing $spacing * 2;
+
+                outline-offset: -5px;
+
+                color: $insensitive_fg_color;
+                border-width: 1px;         // for reorderable tabs
+                border-color: transparent; //
+
+                &:hover {
+                    color: mix($insensitive_fg_color, $fg_color, .5);
+
+                    &.reorderable-page {
+                        border-color: transparentize($borders_color, .7);
+                        background-color: transparentize($base_color, .8);
+                    }
+                }
+
+                &:backdrop {
+                    color: mix($backdrop_fg_color, $backdrop_bg_color, .6);
+
+                    &.reorderable-page {
+                        border-color: transparent;
+                        background-color: transparent;
+                    }
+                }
+
+                &:checked {
+                    color: $fg_color;
+
+                    &.reorderable-page {
+                        border-color: transparentize($borders_color, .4);
+                        background-color: transparentize($base_color, .5);
+
+                        &:hover { background-color: transparentize($base_color, .3); }
+                    }
+                }
+
+                &:backdrop:checked {
+                    color: $backdrop_fg_color;
+
+                    &.reorderable-page {
+                        border-color: $backdrop_borders_color;
+                        background-color: $backdrop_base_color;
+                    }
+                }
+
+                // colors the button like the label, overridden otherwise
+                button.flat {
+                    &:hover { color: currentColor; }
+
+                    &, &:backdrop { color: gtkalpha(currentColor, .3); }
+
+                    padding: 0;
+                    margin-top: 4px;
+                    margin-bottom: 4px;
+                    // FIXME: generalize .small-button?
+                    min-width: 20px;
+                    min-height: 20px;
+
+                    &:last-child {
+                        margin-left: 4px;
+                        margin-right: -4px;
+                    }
+
+                    &:first-child {
+                        margin-left: -4px;
+                        margin-right: 4px;
+                    }
+                }
+            }
+
+            &.top,
+            &.bottom {
+                tabs {
+                    padding-left: 0;
+                    padding-right: 0;
+
+                    &:not(:only-child) {
+                        margin-left: 3px;
+                        margin-right: 3px;
+
+                        &:first-child { margin-left: -1px; }
+                        &:last-child { margin-right: -1px; }
+                    }
+
+                    tab {
+                        margin-left: 0;
+                        margin-right: 0;
+
+                        &.reorderable-page { border-style: none solid; }
+                    }
+                }
+            }
+
+            &.left,
+            &.right {
+                tabs {
+                    padding-top: 0;
+                    padding-bottom: 0;
+
+                    &:not(:only-child) {
+                        margin-top: 3px;
+                        margin-bottom: 3px;
+
+                        &:first-child { margin-top: -1px; }
+                        &:last-child { margin-bottom: -1px; }
+                    }
+
+                    tab {
+                        margin-top: 0;
+                        margin-bottom: 0;
+
+                        &.reorderable-page { border-style: solid none; }
+                    }
+                }
+            }
+
+            &.top tab { padding-bottom: 4px; }
+            &.bottom tab { padding-top: 4px; }
+        }
+
+        > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
+            background-color: $base_color;
+
+            &:backdrop { background-color: $backdrop_base_color; }
         }
     }
 }