diff --git a/lib/components/ApiInfo/api-info.html b/lib/components/ApiInfo/api-info.html
index b8a8428c..19d5924b 100644
--- a/lib/components/ApiInfo/api-info.html
+++ b/lib/components/ApiInfo/api-info.html
@@ -1,5 +1,5 @@
-<div>
-  <h1 class="api-info-header">{{info.title}} ({{info.version}})</h1>
+<div class="api-info-wrapper">
+  <h1>{{info.title}} ({{info.version}})</h1>
   <p>
     Download OpenAPI (fka Swagger) specification:
     <a class="openapi-button" target="_blank" attr.href='{{specUrl}}'> Download </a>
@@ -17,5 +17,7 @@
       <span *ngIf="!info.license.url"> {{info.license.name}} </span>
     </span>
   </p>
-  <dynamic-ng2-viewer [html]="info['x-redoc-html-description']"></dynamic-ng2-viewer>
+  <span class="redoc-markdown-block">
+    <dynamic-ng2-viewer  [html]="info['x-redoc-html-description']"></dynamic-ng2-viewer>
+  </span>
 </div>
diff --git a/lib/components/ApiInfo/api-info.scss b/lib/components/ApiInfo/api-info.scss
index 0c7c1a81..b029683a 100644
--- a/lib/components/ApiInfo/api-info.scss
+++ b/lib/components/ApiInfo/api-info.scss
@@ -1,28 +1,24 @@
 @import '../../shared/styles/variables';
 
-.api-info-header {
-  font-weight: normal;
-}
-
-:host > div {
-  width: 60%;
-  padding: 40px;
+:host > .api-info-wrapper {
   box-sizing: border-box;
+  padding: $section-spacing;
+  width: 60%;
+
 
   @media (max-width: $right-panel-squash-breakpoint) {
     width: 100%;
   }
 }
 
-a.openapi-button {
-  padding: 3px 8px 4px 8px;
-  color: $primary-color;
+.openapi-button {
   border: 1px solid $primary-color;
-  margin-left: 0.5em;
+  color: $primary-color;
   font-weight: normal;
+  margin-left: 0.5em;
+  padding: 3px 8px 4px;
 }
 
 :host /deep/ [section] {
-  padding-top: 60px;
-  margin-top: 20px;
+  padding-top: 2 * $section-spacing;
 }
diff --git a/lib/components/ApiLogo/api-logo.scss b/lib/components/ApiLogo/api-logo.scss
index 7f78e62b..cf1cc7f6 100644
--- a/lib/components/ApiLogo/api-logo.scss
+++ b/lib/components/ApiLogo/api-logo.scss
@@ -1,5 +1,14 @@
 @import '../../shared/styles/variables';
 
+:host {
+  display: block;
+  text-align: center;
+
+  @media (max-width: $side-menu-mobile-breakpoint) {
+    display: none;
+  }
+}
+
 img {
   max-height: 150px;
   width: auto;
diff --git a/lib/components/JsonSchema/_json-schema-common.scss b/lib/components/JsonSchema/_json-schema-common.scss
index d50ad788..da8abf41 100644
--- a/lib/components/JsonSchema/_json-schema-common.scss
+++ b/lib/components/JsonSchema/_json-schema-common.scss
@@ -5,26 +5,16 @@ $cell-spacing: 25px;
 $cell-padding: 10px;
 $bullet-margin: 10px;
 $line-border: $lines-width solid $tree-lines-color;
-$line-border-erase: ($lines-width + 1px) solid #fff;
+$line-border-erase: ($lines-width + 1px) solid $background-color;
+
+$border-color: lighten($secondary-color, 50%);
+$nullable-color: #3195a6;
+$hint-border: 1px dotted rgba(38, 50, 56, 0.4);
 
 $param-name-height: 20px;
 
 $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
 
-.param-name {
-  position: relative;
-  border-left: $line-border;
-  padding: $cell-padding 0;
-  vertical-align: top;
-  line-height: $param-name-height;
-
-  white-space: nowrap;
-  font-size: 0.929em;
-  font-weight: $regular;
-
-  box-sizing: border-box;
-}
-
 .param-name-wrap {
   display: inline-block;
   padding-right: $cell-spacing;
@@ -32,10 +22,9 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
 }
 
 .param-info {
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid $border-color;
   padding: $cell-padding 0;
   width: 75%;
-  line-height: 1em;
 
   box-sizing: border-box;
 }
@@ -46,7 +35,7 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
   margin-right: 6px;
   margin-left: 6px;
   border-radius: $border-radius;
-  background-color: rgba($primary-color, .1);
+  background-color: rgba($primary-color, 0.1);
   padding: 0 4px;
   color: rgba($primary-color, 0.7);
 }
@@ -58,7 +47,7 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
 .param-required {
   vertical-align: middle;
   line-height: $param-name-height;
-  color: #f00;
+  color: $red;
   font-size: 12px;
   font-weight: bold;
 }
@@ -66,7 +55,7 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
 .param-nullable {
   vertical-align: middle;
   line-height: $param-name-height;
-  color: #3195a6;
+  color: $nullable-color;
   font-size: 12px;
   font-weight: bold;
 }
@@ -77,82 +66,103 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
   color: rgba($black, 0.4);
   font-size: 0.929em;
   font-weight: normal;
+
+  &.array::before {
+    content: $array-text;
+    color: $black;
+    font-weight: $base-font-weight;
+  }
+
+  &.tuple::before {
+    content: $tuple-text;
+    color: $black;
+    font-weight: $base-font-weight;
+  }
+
+  &.with-hint {
+    display: inline-block;
+    margin-bottom: 0.4em;
+    border-bottom: $hint-border;
+    padding: 0;
+    cursor: help;
+  }
+
+  &-trivial {
+    display: inline-block;
+  }
+
+  &-file {
+    font-weight: bold;
+    text-transform: capitalize;
+  }
 }
 
-.param-type.array:before {
-  content: "Array of ";
-  color: $black;
-  font-weight: $base-font-weight;
-}
-
-.param-type.tuple:before {
-  content: "Tuple";
-  color: $black;
-  font-weight: $base-font-weight;
-}
-
-.param-type.with-hint {
-  display: inline-block;
-  margin-bottom: 0.4em;
-  border-bottom: 1px dotted rgba(38,50,56,0.4);
-  padding: 0;
-  cursor: help;
-}
-
-.param-type-trivial {
-  display: inline-block;
-}
-
-.param-type-file {
-  font-weight: bold;
-  text-transform: capitalize;
-}
-
-/* tree */
+// tree
 
 // Bullet
 
-.param-name > span:before {
-  content: "";
-  display: inline-block;
-  width: $bullet-size;
-  height: $bullet-size + 6;
-  background-color: $primary-color;
-  margin: 0 $bullet-margin;
-  vertical-align: middle;
-}
-
-.param-name > span:after {
-  content: "";
-  position: absolute;
-  border-top: $line-border;
-  width: $bullet-margin;
-  left: 0;
-  top: ($param-name-height/2) + $cell-padding + 1;
-}
-
- .param:first-of-type > .param-name:before {
-  content: "";
-  display: block;
-  position: absolute;
-  left: -$lines-width;
-  top: 0;
-  border-left: $line-border-erase;
-  height: ($param-name-height/2) + $cell-padding + 1;
-}
-
-.param:last-of-type > .param-name, .param.last > .param-name {
+.param-name {
+  border-left: $line-border;
+  box-sizing: border-box;
   position: relative;
 
-  &:after {
-    content: "";
+  padding: $cell-padding 0;
+  vertical-align: top;
+  line-height: $param-name-height;
+
+  white-space: nowrap;
+  font-size: 0.929em;
+  font-weight: $regular;
+
+  > span::before {
+    content: '';
+    display: inline-block;
+    width: $bullet-size;
+    height: $bullet-size + 6;
+    background-color: $primary-color;
+    margin: 0 $bullet-margin;
+    vertical-align: middle;
+  }
+
+  > span::after {
+    content: '';
+    position: absolute;
+    border-top: $line-border;
+    width: $bullet-margin;
+    left: 0;
+    top: ($param-name-height / 2) + $cell-padding + 1;
+  }
+}
+
+.param:first-of-type {
+
+  > .param-name::before {
+    content: '';
     display: block;
     position: absolute;
-    left: -$lines-width - 1px;
+    left: -$lines-width;
+    top: 0;
     border-left: $line-border-erase;
-    top: ($param-name-height/2) + $cell-padding + $lines-width + 1;
-    background-color: white;
-    bottom: 0;
+    height: ($param-name-height / 2) + $cell-padding + 1;
+  }
+}
+
+.param:last-of-type,
+.param.last {
+
+  > .param-name {
+    position: relative;
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: -$lines-width - 1px;
+      border-left: $line-border-erase;
+      top: ($param-name-height / 2) + $cell-padding + $lines-width + 1;
+      background-color: $background-color;
+      bottom: 0;
+    }
   }
 }
 
@@ -160,33 +170,46 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
   border-left-color: transparent;
 }
 
-.param-schema .param-wrap:first-of-type .param-name:before {
-  display: none !important;
+.param-schema {
+  .param-wrap:first-of-type {
+    .param-name::before {
+      display: none;
+    }
+  }
 }
 
-.param-schema.last > td {
-  border-left: 0;
+.param-schema.last {
+  > td {
+    border-left: 0;
+  }
 }
 
 .param-enum {
   color: $text-color;
-  font-size: 13px;
+  font-size: 0.95em;
 
-  &:before {
-    content: 'Values: {';
-  }
-
-  &:after {
-    content: '}';
-  }
-
-  > .enum-value {
-    &:after {
-      content: ", ";
-    }
-
-    &:last-of-type:after {
-      content: none;
-    }
+  &::before {
+    content: 'Valid values: ';
   }
 }
+
+.param-default {
+  font-size: 0.95em;
+
+  &::before {
+    content: 'Default: ';
+  }
+}
+
+.param-enum-value,
+.param-default-value {
+  background-color: $background-color;
+  border: 1px solid rgba($secondary-color, 0.2);
+  margin: 2px 3px;
+  padding: 0 5px;
+  border-radius: 2px;
+  color: $secondary-color;
+  display: inline-block;
+  min-width: 20px;
+  text-align: center;
+}
diff --git a/lib/components/JsonSchema/json-schema.html b/lib/components/JsonSchema/json-schema.html
index 67d70ff8..495f2d7f 100644
--- a/lib/components/JsonSchema/json-schema.html
+++ b/lib/components/JsonSchema/json-schema.html
@@ -57,7 +57,7 @@
             <span class="param-name-wrap" (click)="subSchema.toggle()">
               <span class="param-name-content">
                 {{prop._name}}
-                <span class="param-enum-value" [hidden]="!prop._enumItem"> {{prop._enumItem?.val | json}} </span>
+                <span class="param-name-enumvalue" [hidden]="!prop._enumItem"> {{prop._enumItem?.val | json}} </span>
               </span>
               <svg *ngIf="prop._pointer" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
                 <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "/>
@@ -72,14 +72,15 @@
               </span>
               <span *ngIf="prop._required" class="param-required">Required</span>
               <span *ngIf="prop['x-nullable']" class="param-nullable">Nullable</span>
-              <div *ngIf="prop.default != null">Default: {{prop.default | json}}</div>
+              <div class="param-default" *ngIf="prop.default != null">
+                <span class="param-default-value">{{prop.default | json}}</span>
+              </div>
               <div *ngIf="prop.enum && !prop.isDiscriminator" class="param-enum">
-                <span *ngFor="let enumItem of prop.enum" class="enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
+                <span *ngFor="let enumItem of prop.enum" class="param-enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
               </div>
             </div>
             <div class="param-description" [innerHtml]="prop.description | marked"></div>
             <div class="discriminator-info" *ngIf="prop.isDiscriminator">
-              <span>This field value determines the exact schema:</span>
               <drop-down (change)="selectDescendant($event)">
                 <option *ngFor="let descendant of descendants; let i=index"
                 [value]="i" [attr.selected]="descendant.active ? '' : null" >{{descendant.name}}</option>
diff --git a/lib/components/JsonSchema/json-schema.scss b/lib/components/JsonSchema/json-schema.scss
index cf46b185..a189df47 100644
--- a/lib/components/JsonSchema/json-schema.scss
+++ b/lib/components/JsonSchema/json-schema.scss
@@ -1,8 +1,9 @@
 @import 'json-schema-common';
 
-/* styles for array-schema for array */
+// styles for array-schema for array
 $array-marker-font-sz: 13px;
 $array-marker-line-height: 1.5;
+
 :host {
   display: block;
 }
@@ -15,6 +16,7 @@ $array-marker-line-height: 1.5;
 .derived-schema {
   display: none;
 }
+
 .derived-schema.active {
   display: block;
 }
@@ -156,13 +158,7 @@ table {
 }
 
 .discriminator-info {
-  font-weight: $regular;
-  margin-bottom: 10px;
-
-  > span {
-    font-size: 0.9em;
-    font-weight: $light;
-  }
+  margin-top: 5px;
 }
 
 .discriminator-wrap:not(.empty) > td {
@@ -214,7 +210,7 @@ li:before {
   }
 }
 
-.param-enum-value {
+.param-name-enumvalue {
   padding: 2px;
   background-color: #e6ebf6;
 
diff --git a/lib/components/Method/method.html b/lib/components/Method/method.html
index 20d908a5..861ff11a 100644
--- a/lib/components/Method/method.html
+++ b/lib/components/Method/method.html
@@ -13,12 +13,12 @@
     <responses-list pointer="{{pointer}}/responses"> </responses-list>
 </div>
 <div class="method-samples">
-    <h5>Definition</h5>
+    <h4 class="method-params-subheader">Definition</h4>
 
     <div class="method-endpoint">
       <h5 class="http-method" [ngClass]="method.httpMethod">{{method.httpMethod}}</h5>
       <span select-on-click><!--
-      --><span class="api-url">{{method.apiUrl}}</span><span class="path">{{method.path}}</span><!--
+      --><span class="method-api-url">{{method.apiUrl}}</span><span class="method-api-url-path">{{method.path}}</span><!--
   --></span>
     </div>
 
diff --git a/lib/components/Method/method.scss b/lib/components/Method/method.scss
index af11795f..8d644a94 100644
--- a/lib/components/Method/method.scss
+++ b/lib/components/Method/method.scss
@@ -12,14 +12,6 @@
   border-bottom: 0;
 }
 
-h2 {
-  color: $secondary-color;
-}
-
-responses-list, params-list {
-  display: block;
-}
-
 .method-header {
   margin-bottom: .9em;
 }
@@ -35,7 +27,7 @@ responses-list, params-list {
   overflow-x: auto;
 }
 
-.method-endpoint > h5 {
+.method-endpoint > .method-params-subheader {
   padding-top: 1px;
   padding-bottom: 0;
   margin: 0;
@@ -46,43 +38,42 @@ responses-list, params-list {
   border-radius: $border-radius;
 }
 
-.api-url {
+.method-api-url {
   color: rgba(#ffffff, .6);
   margin-left: 10px;
   margin-top: 2px;
   position: relative;
   top: 1px;
   font-family: $headers-font, $headers-font-family;
-  font-size: 0.929em!important;
-}
+  font-size: 0.929em;
 
-.path {
-  font-family: $headers-font, $headers-font-family;
-  position: relative;
-  top: 1px;
-  color: #ffffff;
-  font-size: 0.929em!important;
+  &-path {
+    font-family: $headers-font, $headers-font-family;
+    position: relative;
+    top: 1px;
+    color: #ffffff;
+  }
 }
 
 .method-tags {
   margin-top: 20px;
-}
 
-.method-tags a {
-  font-size: 16px;
-  color: #999;
-  display: inline-block;
-  padding: 0 0.5em;
-  text-decoration: none;
-}
+  > a {
+    font-size: 16px;
+    color: #999;
+    display: inline-block;
+    padding: 0 0.5em;
+    text-decoration: none;
 
-.method-tags a:before {
-  content: '#';
-  margin-right: -0.4em;
-}
+    &:before {
+      content: '#';
+      margin-right: -0.4em;
+    }
 
-.method-tags a:first-of-type {
-  padding: 0;
+    &:first-of-type {
+      padding: 0;
+    }
+  }
 }
 
 .method-content, .method-samples {
@@ -93,20 +84,16 @@ responses-list, params-list {
 
 .method-content {
   width: 100% - $samples-panel-width;
-  padding: 40px;
+  padding: $section-spacing;
 }
 
 .method-samples {
   color: $sample-panel-color;
   width: 40%;
-  padding: 40px;
+  padding: $section-spacing;
   background: $samples-panel-bg-color;
 }
 
-responses-samples {
-  display: block;
-}
-
 .method-samples header,
 .method-samples > h5 {
   color: $sample-panel-headers-color;
@@ -137,6 +124,8 @@ responses-samples {
   background: #ffffff;
   padding: 3px 10px;
   text-transform: uppercase;
+  display: inline-block;
+  margin: 0;
 }
 
 [select-on-click] {
diff --git a/lib/components/MethodsList/methods-list.scss b/lib/components/MethodsList/methods-list.scss
index 4a5cbf3b..0cfbfa50 100644
--- a/lib/components/MethodsList/methods-list.scss
+++ b/lib/components/MethodsList/methods-list.scss
@@ -1,7 +1,11 @@
 @import '../../shared/styles/variables';
 
+:host {
+  display: block;
+  overflow: hidden;
+}
 .tag-info {
-  padding: 40px;
+  padding: $section-spacing;
   box-sizing: border-box;
   background-color: white;
   width: 60%;
diff --git a/lib/components/ParamsList/params-list.html b/lib/components/ParamsList/params-list.html
index 4000f8ea..c717ad15 100644
--- a/lib/components/ParamsList/params-list.html
+++ b/lib/components/ParamsList/params-list.html
@@ -16,7 +16,7 @@
             title="{{param._displayTypeHint}}"> {{param._displayType}} {{param._displayFormat}}</span>
             <span class="param-range" *ngIf="param._range"> {{param._range}} </span>
             <span *ngIf="param.required" class="param-required">Required</span>
-            <div class="default" *ngIf="param.default != null">Default: {{param.default | json}}</div>
+            <div class="param-default" *ngIf="param.default != null">{{param.default | json}}</div>
             <div *ngIf="param.enum" class="param-enum">
               <span *ngFor="let enumItem of param.enum" class="enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
             </div>
diff --git a/lib/components/Redoc/redoc.html b/lib/components/Redoc/redoc.html
index 8b4476ad..89bacc5c 100644
--- a/lib/components/Redoc/redoc.html
+++ b/lib/components/Redoc/redoc.html
@@ -7,7 +7,7 @@
       <api-logo> </api-logo>
       <side-menu> </side-menu>
   </div>
-  <div id="api-content">
+  <div class="api-content">
     <warnings></warnings>
     <api-info></api-info>
     <methods-list> </methods-list>
diff --git a/lib/components/Redoc/redoc.scss b/lib/components/Redoc/redoc.scss
index 0570a1a4..cb9833f2 100644
--- a/lib/components/Redoc/redoc.scss
+++ b/lib/components/Redoc/redoc.scss
@@ -1,88 +1,64 @@
 @import '../../shared/styles/variables';
 
 :host {
-    display: block;
-    box-sizing: border-box;
+  display: block;
+  box-sizing: border-box;
 
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-    -moz-tap-highlight-color: rgba(0,0,0,0);
-    -ms-tap-highlight-color: rgba(0,0,0,0);
-    -o-tap-highlight-color: rgba(0,0,0,0);
-    tap-highlight-color: rgba(0,0,0,0);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-smoothing: antialiased;
-    -webkit-osx-font-smoothing: grayscale;
-    -moz-osx-font-smoothing: grayscale;
-    osx-font-smoothing: grayscale;
-    -webkit-text-size-adjust: 100%;
-    -moz-text-size-adjust: 100%;
-    text-size-adjust: 100%;
-    -webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
-    -ms-text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
-    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
-    text-rendering: optimizeSpeed!important;
-    font-smooth: always;
-    -webkit-text-size-adjust: 100%;
-    -ms-text-size-adjust: 100%;
-    text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -moz-tap-highlight-color: rgba(0,0,0,0);
+  -ms-tap-highlight-color: rgba(0,0,0,0);
+  -o-tap-highlight-color: rgba(0,0,0,0);
+  tap-highlight-color: rgba(0,0,0,0);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-smoothing: antialiased;
+  -webkit-osx-font-smoothing: grayscale;
+  -moz-osx-font-smoothing: grayscale;
+  osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  -webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+  -ms-text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+  text-rendering: optimizeSpeed!important;
+  font-smooth: always;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 .redoc-wrap {
-    position: relative;
-    font-family: $base-font, $base-font-family;
-    font-size: $em-size;
-    line-height: $base-line-height;
-    color: $text-color;
-}
-
-side-menu {
-    display: block;
-    box-sizing: border-box;
-}
-
-methods-list {
-    display: block;
-    overflow: hidden;
-}
-
-api-info, .side-bar {
-    display: block;
-    padding: 10px 0;
-}
-
-api-logo {
-    display: block;
-    text-align: center;
-
-    @media (max-width: $side-menu-mobile-breakpoint) {
-        display: none;
-    }
+  position: relative;
+  font-family: $base-font, $base-font-family;
+  font-size: $em-size;
+  line-height: $base-line-height;
+  color: $text-color;
 }
 
 [sticky-sidebar] {
-    width: $side-bar-width;
-    background-color: $side-bar-bg-color;
-    overflow-y: auto;
-    overflow-x: hidden;
+  width: $side-bar-width;
+  background-color: $side-bar-bg-color;
+  overflow-y: auto;
+  overflow-x: hidden;
 
-    @media (max-width: $side-menu-mobile-breakpoint) {
-        z-index: 1;
-        width: 100%;
-        bottom: auto !important;
-    }
-}
-
-#api-content {
-  margin-left: $side-bar-width;
-  position: relative;
   @media (max-width: $side-menu-mobile-breakpoint) {
-      padding-top: 3em;
-      margin-left: 0;
+    z-index: 1;
+    width: 100%;
+    bottom: auto !important;
   }
 }
 
-#api-content:before {
+.api-content {
+  margin-left: $side-bar-width;
+  position: relative;
+  @media (max-width: $side-menu-mobile-breakpoint) {
+    padding-top: 3em;
+    margin-left: 0;
+  }
+}
+
+.api-content:before {
   content: "";
   background: $samples-panel-bg-color;
   height: 100%;
@@ -91,178 +67,19 @@ api-logo {
   right: 0;
   position: absolute;
   z-index: -1;
-}
 
-
-@media (max-width: $right-panel-squash-breakpoint) {
-  #api-content:before {
+  @media (max-width: $right-panel-squash-breakpoint) {
     display: none;
   }
 }
 
-/* global redoc styles */
-
-@for $index from 1 through 5 {
-    :host /deep/ h#{$index}{
-        margin-top: 0;
-        font-family: $headers-font, $headers-font-family;
-        color: $headers-color;
-        font-weight: $headers-font-weight;
-    }
-}
-
-:host /deep/ {
-    h1 { font-size: $h1; }
-    h2 { font-size: $h2; }
-    h3 { font-size: $h3; }
-    h4 { font-size: $h4; }
-    h5 { font-size: $h5; }
-
-    p {
-        font-family: $base-font, $base-font-family;
-        font-weight: $base-font-weight;
-        margin: 0;
-        margin-bottom: 1em;
-        line-height: $base-line-height;
-    }
-
-    a {
-        text-decoration: none;
-        color: $primary-color;
-    }
-
-    p > code {
-        color: $red;
-        border: 1px solid rgba(38,50,56,0.1);
-    }
-
-    .hint--inversed {
-      &:before {
-        border-top-color: #fff;
-      }
-
-      &:after {
-        background: #fff;
-        color: #383838;
-      }
-    }
-
-    @import '../../shared/styles/share-link';
-}
-
-footer {
-    position: relative;
-    text-align: right;
-    padding: 10px 40px;
-    font-size: 15px;
-    margin-top: -35px;
-    color: white;
-    a {
-      color: white;
-    }
-    strong {
-      font-size: 18px;
-    }
-}
-
-
-/* markdown elements */
-
-:host /deep/ .redoc-markdown-block {
-    pre {
-        font-family: Courier, monospace;
-        white-space: pre-wrap;
-        background-color: #263238;
-        color: white;
-        padding: 12px 14px 15px 14px;
-        overflow-x: auto;
-        line-height: normal;
-        border-radius: $border-radius;
-        border: 1px solid rgba(38,50,56,0.1);
-
-        code {
-            background-color: transparent;
-
-            &:before, &:after {
-                content: none;
-            }
-        }
-    }
-
-    code {
-        font-family: Courier, monospace;
-        background-color: rgba(38,50,56,0.04);
-        padding: 0.1em 0 0.2em 0;
-        font-size: 1em;
-        border-radius: $border-radius;
-
-        &:before, &:after {
-            letter-spacing: -0.2em;
-            content: "\00a0";
-        }
-    }
-
-    p:last-of-type {
-        margin-bottom: 0;
-    }
-
-    blockquote {
-        margin: 0;
-        margin-bottom: 1em;
-        padding: 0 15px;
-        color: #777;
-        border-left: 4px solid #ddd;
-    }
-
-    img {
-        max-width: 100%;
-        box-sizing: content-box;
-    }
-
-    ul, ol {
-        padding-left: 2em;
-        margin: 0;
-        margin-bottom: 1em;
-    }
-
-    table {
-        display: block;
-        width: 100%;
-        overflow: auto;
-        word-break: normal;
-        word-break: keep-all;
-        border-collapse: collapse;
-        border-spacing: 0;
-        margin-top: 0.5em;
-        margin-bottom: 0.5em;
-    }
-
-    table tr {
-        background-color: #fff;
-        border-top: 1px solid #ccc;
-
-        &:nth-child(2n) {
-            background-color: #f8f8f8;
-        }
-    }
-
-    table th, table td {
-        padding: 6px 13px;
-        border: 1px solid #ddd;
-    }
-
-    table th {
-        text-align: left;
-        font-weight: bold;
-    }
-}
 
 .redoc-error {
   padding: 20px;
   text-align: center;
-  color: #cc0000;
+  color: $red;
   > h2 {
-    color: #cc0000;
+    color: $red;
     font-size: 40px;
   }
 }
@@ -272,3 +89,161 @@ footer {
   margin: 0 auto;
   font-size: 18px;
 }
+
+/* global redoc styles */
+
+@for $index from 1 through 5 {
+  :host /deep/ h#{$index}{
+    margin-top: 0;
+    font-family: $headers-font, $headers-font-family;
+    color: $secondary-color;
+    font-weight: $headers-font-weight;
+    line-height: 1.4em;
+  }
+}
+
+:host /deep/ {
+  h1 { font-size: $h1; color: $headers-color; }
+  h2 { font-size: $h2; }
+  h3 { font-size: $h3; }
+  h4 { font-size: $h4; }
+  h5 { font-size: $h5; }
+
+  p {
+    font-family: $base-font, $base-font-family;
+    font-weight: $base-font-weight;
+    margin: 0;
+    margin-bottom: 1em;
+    line-height: $base-line-height;
+  }
+
+  a {
+    text-decoration: none;
+    color: $primary-color;
+  }
+
+  p > code {
+    color: $red;
+    border: 1px solid rgba(38,50,56,0.1);
+  }
+
+  .hint--inversed {
+    &:before {
+      border-top-color: #fff;
+    }
+
+    &:after {
+      background: #fff;
+      color: #383838;
+    }
+  }
+
+  @import '../../shared/styles/share-link';
+}
+
+footer {
+  position: relative;
+  text-align: right;
+  padding: 10px $section-spacing;
+  font-size: 15px;
+  margin-top: -35px;
+  color: white;
+  a {
+    color: white;
+  }
+  strong {
+    font-size: 18px;
+  }
+}
+
+
+/* markdown elements */
+
+:host /deep/ .redoc-markdown-block {
+  pre {
+    font-family: Courier, monospace;
+    white-space: pre-wrap;
+    background-color: #263238;
+    color: white;
+    padding: 12px 14px 15px 14px;
+    overflow-x: auto;
+    line-height: normal;
+    border-radius: $border-radius;
+    border: 1px solid rgba(38,50,56,0.1);
+
+    code {
+      background-color: transparent;
+
+      &:before, &:after {
+        content: none;
+      }
+    }
+  }
+
+  code {
+    font-family: Courier, monospace;
+    background-color: rgba(38,50,56,0.04);
+    padding: 0.1em 0 0.2em 0;
+    font-size: 1em;
+    border-radius: $border-radius;
+
+    &:before, &:after {
+      letter-spacing: -0.2em;
+      content: "\00a0";
+    }
+  }
+
+  p:last-of-type {
+    margin-bottom: 0;
+  }
+
+  blockquote {
+    margin: 0;
+    margin-bottom: 1em;
+    padding: 0 15px;
+    color: #777;
+    border-left: 4px solid #ddd;
+  }
+
+  img {
+    max-width: 100%;
+    box-sizing: content-box;
+  }
+
+  ul, ol {
+    padding-left: 2em;
+    margin: 0;
+    margin-bottom: 1em;
+  }
+
+  table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: normal;
+    word-break: keep-all;
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+
+  table tr {
+    background-color: #fff;
+    border-top: 1px solid #ccc;
+
+    &:nth-child(2n) {
+      background-color: #f8f8f8;
+    }
+  }
+
+  table th, table td {
+    padding: 6px 13px;
+    border: 1px solid #ddd;
+  }
+
+  table th {
+    text-align: left;
+    font-weight: bold;
+  }
+}
diff --git a/lib/components/RequestSamples/request-samples.scss b/lib/components/RequestSamples/request-samples.scss
index b5496886..ab4a227f 100644
--- a/lib/components/RequestSamples/request-samples.scss
+++ b/lib/components/RequestSamples/request-samples.scss
@@ -2,6 +2,7 @@
 
 :host {
   overflow: hidden;
+  display: block;
 }
 
 .action-buttons {
@@ -37,48 +38,48 @@
 }
 
 header {
-    font-family: $headers-font;
-    font-size: $h5;
-    text-transform: uppercase;
-    margin: 0;
-    color: $sample-panel-headers-color;
-    text-transform: uppercase;
-    font-weight: normal;
+  font-family: $headers-font;
+  font-size: $h5;
+  text-transform: uppercase;
+  margin: 0;
+  color: $sample-panel-headers-color;
+  text-transform: uppercase;
+  font-weight: normal;
 }
 
 :host /deep/ > tabs > ul li {
-    font-family: $headers-font;
-    font-size: .9em;
-    border-radius: $border-radius;
-    margin: 2px 0;
-    padding: 3px 10px 2px 10px;
-    line-height: 1.25;
-    color: $sample-panel-headers-color;
+  font-family: $headers-font;
+  font-size: .9em;
+  border-radius: $border-radius;
+  margin: 2px 0;
+  padding: 3px 10px 2px 10px;
+  line-height: 1.25;
+  color: $sample-panel-headers-color;
 
-    &:hover {
-        background-color: rgba(white, .1);
-        color: #ffffff;
-    }
+  &:hover {
+    background-color: rgba(white, .1);
+    color: #ffffff;
+  }
 
-    &.active {
-        background-color: #ffffff;
-        color: $text-color;
-    }
+  &.active {
+    background-color: #ffffff;
+    color: $text-color;
+  }
 }
 
 :host /deep/ tabs ul {
     padding-top: 10px;
 }
 
-pre {
-    overflow-x: auto;
-    word-break: break-all;
-    word-wrap: break-word;
-    white-space: pre-wrap;
-    margin-top: 0;
-    overflow-x: auto;
-    padding: 20px;
-    border-radius: 4px;
-    background-color: #222d32;
-    margin-bottom: 36px;
+.code-sample pre {
+  overflow-x: auto;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  margin-top: 0;
+  overflow-x: auto;
+  padding: 20px;
+  border-radius: 4px;
+  background-color: #222d32;
+  margin-bottom: 36px;
 }
diff --git a/lib/components/ResponsesList/responses-list.scss b/lib/components/ResponsesList/responses-list.scss
index 34063c49..4058ff2e 100644
--- a/lib/components/ResponsesList/responses-list.scss
+++ b/lib/components/ResponsesList/responses-list.scss
@@ -1,9 +1,13 @@
 @import '../../shared/styles/variables';
 
+:host {
+  display: block;
+}
+
 .responses-list-header {
   font-size: 18px;
   padding: 0.2em 0;
-  margin: 3em 0 1.1em 0;
+  margin: 3em 0 1.1em;
   color: #253137;
   font-weight: normal;
 }
@@ -45,13 +49,13 @@ header {
   margin-right: 6px;
   margin-left: 6px;
   border-radius: $border-radius;
-  background-color: rgba($primary-color, .1);
+  background-color: rgba($primary-color, 0.1);
   padding: 0 4px;
   color: rgba($primary-color, 0.7);
 }
 
-.header-type.array:before {
-  content: "Array of ";
+.header-type.array::before {
+  content: $array-text;
   color: $black;
   font-weight: $base-font-weight;
 }
diff --git a/lib/components/ResponsesSamples/responses-samples.scss b/lib/components/ResponsesSamples/responses-samples.scss
index b8ea1cba..db0f4f24 100644
--- a/lib/components/ResponsesSamples/responses-samples.scss
+++ b/lib/components/ResponsesSamples/responses-samples.scss
@@ -2,46 +2,39 @@
 
 :host {
   overflow: hidden;
-}
-
-tab, tabs {
-    display: block;
-}
-
-schema-sample {
-    display: block;
+  display: block;
 }
 
 header {
-    font-family: $headers-font;
-    font-size: 0.929em;
-    text-transform: uppercase;
-    margin: 0;
-    color: $sample-panel-headers-color;
-    text-transform: uppercase;
-    font-weight: normal;
+  font-family: $headers-font;
+  font-size: 0.929em;
+  text-transform: uppercase;
+  margin: 0;
+  color: $sample-panel-headers-color;
+  text-transform: uppercase;
+  font-weight: normal;
 }
 
 :host /deep/ > tabs > ul li {
-    font-family: $headers-font;
-    font-size: 0.929em;
-    border-radius: $border-radius;
-    margin: 2px 0;
-    padding: 2px 8px 3px 8px;
-    color: $sample-panel-headers-color;
-    line-height: 1.25;
+  font-family: $headers-font;
+  font-size: 0.929em;
+  border-radius: $border-radius;
+  margin: 2px 0;
+  padding: 2px 8px 3px 8px;
+  color: $sample-panel-headers-color;
+  line-height: 1.25;
 
-    &:hover {
-        color: #ffffff;
-        background-color: rgba(white, .1);
-    }
+  &:hover {
+    color: #ffffff;
+    background-color: rgba(white, .1);
+  }
 
-    &.active {
-        background-color: white;
-        color: $black;
-    }
+  &.active {
+    background-color: white;
+    color: $black;
+  }
 }
 
 :host /deep/ tabs ul {
-    padding-top: 10px;
+  padding-top: 10px;
 }
diff --git a/lib/components/SchemaSample/schema-sample.scss b/lib/components/SchemaSample/schema-sample.scss
index 2f0ecedf..714eac34 100644
--- a/lib/components/SchemaSample/schema-sample.scss
+++ b/lib/components/SchemaSample/schema-sample.scss
@@ -1,5 +1,9 @@
 @import '../../shared/styles/variables';
 
+:host {
+  display: block;
+}
+
 pre {
   background-color: transparent;
   padding: 0;
diff --git a/lib/components/SecurityDefinitions/security-definitions.html b/lib/components/SecurityDefinitions/security-definitions.html
index e858c36b..165b6ea7 100644
--- a/lib/components/SecurityDefinitions/security-definitions.html
+++ b/lib/components/SecurityDefinitions/security-definitions.html
@@ -2,39 +2,37 @@
   <h2 class="sharable-header" attr.section="section/Authentication/{{def.name}}">
     <a class="share-link" href="#section/Authentication/{{def.name}}"></a>{{def.name}}</h2>
   <div [innerHTML]="def.details.description | marked"></div>
-  <div class="redoc-markdown-block"> <!-- apply md styles to table -->
-    <table class="details">
-      <tr>
-        <th> Security scheme type: </th>
-        <td> {{def.details._displayType}} </td>
-      </tr>
-      <tr *ngIf="def.details.type === 'apiKey'">
-        <th> {{def.details.in}} parameter name:</th>
-        <td> {{def.details.name}} </td>
-      </tr>
-      <template [ngIf]="def.details.type === 'oauth2'">
-        <tr>
-          <th> OAuth2 Flow</th>
-          <td> {{def.details.flow}} </td>
-        </tr>
-        <tr *ngIf="def.details.flow === 'implicit' || def.details.flow === 'accessCode'">
-          <th> Authorization URL </th>
-          <td> {{def.details.authorizationUrl}} </td>
-        </tr>
-        <tr *ngIf="def.details.flow !== 'implicit'">
-          <th> Token URL </th>
-          <td> {{def.details.tokenUrl}} </td>
-        </tr>
-      </template>
-    </table>
+  <table class="security-details">
+    <tr>
+      <th> Security scheme type: </th>
+      <td> {{def.details._displayType}} </td>
+    </tr>
+    <tr *ngIf="def.details.type === 'apiKey'">
+      <th> {{def.details.in}} parameter name:</th>
+      <td> {{def.details.name}} </td>
+    </tr>
     <template [ngIf]="def.details.type === 'oauth2'">
-      <h3> OAuth2 Scopes </h3>
-      <table class="scopes">
-        <tr *ngFor="let scopeName of def.details.scopes | keys">
-          <th> {{scopeName}} </th>
-          <td> {{def.details.scopes[scopeName]}} </td>
-        </tr>
-      </table>
+      <tr>
+        <th> OAuth2 Flow</th>
+        <td> {{def.details.flow}} </td>
+      </tr>
+      <tr *ngIf="def.details.flow === 'implicit' || def.details.flow === 'accessCode'">
+        <th> Authorization URL </th>
+        <td> {{def.details.authorizationUrl}} </td>
+      </tr>
+      <tr *ngIf="def.details.flow !== 'implicit'">
+        <th> Token URL </th>
+        <td> {{def.details.tokenUrl}} </td>
+      </tr>
     </template>
-  </div>
+  </table>
+  <template [ngIf]="def.details.type === 'oauth2'">
+    <h3> OAuth2 Scopes </h3>
+    <table class="security-scopes-details">
+      <tr *ngFor="let scopeName of def.details.scopes | keys">
+        <th> {{scopeName}} </th>
+        <td> {{def.details.scopes[scopeName]}} </td>
+      </tr>
+    </table>
+  </template>
 </div>
diff --git a/lib/components/SecurityDefinitions/security-definitions.scss b/lib/components/SecurityDefinitions/security-definitions.scss
index 37974052..2d2a1da8 100644
--- a/lib/components/SecurityDefinitions/security-definitions.scss
+++ b/lib/components/SecurityDefinitions/security-definitions.scss
@@ -1,16 +1,16 @@
 @import '../../shared/styles/variables';
 
+:host {
+  display: block;
+}
+
 .security-definition:not(:last-of-type) {
   border-bottom: 1px solid rgba($text-color, .3);
   padding-bottom: 20px;
 }
 
-h2, h3 {
-  color: $secondary-color;
-}
-
 :host h2 {
-  padding-top: 40px;
+  padding-top: $section-spacing;
 }
 
 h3 {
@@ -18,7 +18,7 @@ h3 {
   font-size: 1em;
 }
 
-:host .redoc-markdown-block table {
+:host .security-scopes-details, :host .security-details {
   margin-top: 20px;
 }
 
diff --git a/lib/components/SideMenu/side-menu.scss b/lib/components/SideMenu/side-menu.scss
index 72a935fd..83a1be64 100644
--- a/lib/components/SideMenu/side-menu.scss
+++ b/lib/components/SideMenu/side-menu.scss
@@ -1,72 +1,77 @@
 @import '../../shared/styles/variables';
 $mobile-menu-compact-breakpoint: 550px;
 
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+
 .menu-header {
-    text-transform: uppercase;
-    color: $headers-color;
-    padding: 0 $side-menu-item-hpadding;
-    margin: 10px 0;
+  text-transform: uppercase;
+  color: $headers-color;
+  padding: 0 $side-menu-item-hpadding;
+  margin: 10px 0;
 }
 
 .menu-cat-header {
-    font-size: $h5;
-    font-family: $headers-font, $headers-font-family;
-    font-weight: $light;
-    cursor: pointer;
-    color: rgba($text-color, .6);
-    text-transform: uppercase;
-    background-color: $side-bar-bg-color;
+  font-size: $h5;
+  font-family: $headers-font, $headers-font-family;
+  font-weight: $light;
+  cursor: pointer;
+  color: rgba($text-color, .6);
+  text-transform: uppercase;
+  background-color: $side-bar-bg-color;
+  -webkit-transition: all .15s ease-in-out;
+  -moz-transition: all .15s ease-in-out;
+  -ms-transition: all .15s ease-in-out;
+  -o-transition: all .15s ease-in-out;
+  transition: all .15s ease-in-out;
+  display: block;
+  padding: $side-menu-item-vpadding*2.5 $side-menu-item-hpadding;
+
+  &:hover,
+  &.active {
+    color: $primary-color;
+    background-color: $side-menu-active-bg-color;
+  }
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+.menu-subitems {
+  margin: 0;
+  font-size: 0.929em;
+  line-height: 1.2em;
+  font-weight: $light;
+  color: rgba($text-color, .9);
+  padding: 0;
+  overflow: hidden;
+
+  &.active {
+    height: auto;
+  }
+
+  & li {
     -webkit-transition: all .15s ease-in-out;
     -moz-transition: all .15s ease-in-out;
     -ms-transition: all .15s ease-in-out;
     -o-transition: all .15s ease-in-out;
     transition: all .15s ease-in-out;
-    display: block;
-    padding: $side-menu-item-vpadding*2.5 $side-menu-item-hpadding;
-
-    &:hover,
-    &.active {
-        color: $primary-color;
-        background-color: $side-menu-active-bg-color;
-    }
-
-    &[hidden] {
-      display: none;
-    }
-}
-
-.menu-subitems {
-    margin: 0;
-    font-size: 0.929em;
-    line-height: 1.2em;
-    font-weight: $light;
-    color: rgba($text-color, .9);
-    padding: 0;
+    list-style: none inside none;
+    cursor: pointer;
+    background-color: $side-menu-active-bg-color;
+    padding: $side-menu-item-vpadding*2 $side-menu-item-hpadding*2;
+    padding-left: $side-menu-item-hpadding*2;
     overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
-    &.active {
-        height: auto;
-    }
-
-    & li {
-        -webkit-transition: all .15s ease-in-out;
-        -moz-transition: all .15s ease-in-out;
-        -ms-transition: all .15s ease-in-out;
-        -o-transition: all .15s ease-in-out;
-        transition: all .15s ease-in-out;
-        list-style: none inside none;
-        cursor: pointer;
-        background-color: $side-menu-active-bg-color;
-        padding: $side-menu-item-vpadding*2 $side-menu-item-hpadding*2;
-        padding-left: $side-menu-item-hpadding*2;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    & li:hover,
-    & li.active {
-        background: darken($side-menu-active-bg-color, 6%);
-    }
+  & li:hover,
+  & li.active {
+    background: darken($side-menu-active-bg-color, 6%);
+  }
 }
 
 
@@ -74,82 +79,82 @@ $mobile-menu-compact-breakpoint: 550px;
 }
 
 .mobile-nav {
-    display: none;
+  display: none;
+  height: 3em;
+  line-height: 3em;
+  box-sizing: border-box;
+  border-bottom: 1px solid #ccc;
+  cursor: pointer;
+
+  &:after {
+    content: "";
+    display: inline-block;
+    width: 3em;
     height: 3em;
-    line-height: 3em;
-    box-sizing: border-box;
-    border-bottom: 1px solid #ccc;
-    cursor: pointer;
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve"><polygon fill="#010101" points="23.1 34.1 51.5 61.7 80 34.1 81.5 35 51.5 64.1 21.5 35 23.1 34.1 "/></svg>');
+    background-size: 70%;
+    background-repeat: no-repeat;
+    background-position: center;
 
-    &:after {
-        content: "";
-        display: inline-block;
-        width: 3em;
-        height: 3em;
-        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve"><polygon fill="#010101" points="23.1 34.1 51.5 61.7 80 34.1 81.5 35 51.5 64.1 21.5 35 23.1 34.1 "/></svg>');
-        background-size: 70%;
-        background-repeat: no-repeat;
-        background-position: center;
+    float: right;
+    vertical-align: middle;
+  }
 
-        float: right;
-        vertical-align: middle;
-    }
-
-    .menu-header {
-        padding: 0 10px 0 20px;
-        font-size: 0.95em;
-
-        @media (max-width: $mobile-menu-compact-breakpoint) {
-            display: none;
-        }
+  .menu-header {
+    padding: 0 10px 0 20px;
+    font-size: 0.95em;
+
+    @media (max-width: $mobile-menu-compact-breakpoint) {
+      display: none;
     }
+  }
 }
 
 @media (max-width: $side-menu-mobile-breakpoint) {
-    .mobile-nav {
-        display: block;
-    }
+  .mobile-nav {
+    display: block;
+  }
 
-    #resources-nav {
-        height: 0;
-        overflow-y: auto;
-        transition: all 0.3s ease;
-    }
+  #resources-nav {
+    height: 0;
+    overflow-y: auto;
+    transition: all 0.3s ease;
+  }
 
-    #resources-nav .menu-header {
-        display: none;
-    }
+  #resources-nav .menu-header {
+    display: none;
+  }
 
-    .menu-subitems {
-        height: auto;
-    }
+  .menu-subitems {
+    height: auto;
+  }
 }
 
 .selected-tag {
-    text-transform: capitalize;
+  text-transform: capitalize;
 }
 
 .selected-endpoint:before {
-    content: "/";
-    padding: 0 2px;
-    color: #ccc;
+  content: "/";
+  padding: 0 2px;
+  color: #ccc;
 }
 
 .selected-endpoint:empty:before {
-    display: none;
+  display: none;
 }
 
 .selected-item-info {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    box-sizing: border-box;
-    max-width: 350px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  box-sizing: border-box;
+  max-width: 350px;
 
-    @media (max-width: $mobile-menu-compact-breakpoint) {
-        display: inline-block;
-        padding: 0 20px;
-        max-width: 80%;
-        max-width: calc(100% - 4em);
-    }
+  @media (max-width: $mobile-menu-compact-breakpoint) {
+    display: inline-block;
+    padding: 0 20px;
+    max-width: 80%;
+    max-width: calc(100% - 4em);
+  }
 }
diff --git a/lib/shared/components/Tabs/tabs.scss b/lib/shared/components/Tabs/tabs.scss
index 7c9ba4bf..5921feeb 100644
--- a/lib/shared/components/Tabs/tabs.scss
+++ b/lib/shared/components/Tabs/tabs.scss
@@ -1,5 +1,9 @@
 @import '../../styles/variables';
 
+:host {
+  display: block;
+}
+
 ul {
   display: block;
   margin: 0;
@@ -12,9 +16,6 @@ li {
   cursor: pointer;
 }
 
-li.active {
-}
-
 .tab-success, .tab-error, .tab-redirect, .tab-info {
   &:before {
     content: "";
diff --git a/lib/shared/components/Zippy/zippy.scss b/lib/shared/components/Zippy/zippy.scss
index 208057b3..a93ab00b 100644
--- a/lib/shared/components/Zippy/zippy.scss
+++ b/lib/shared/components/Zippy/zippy.scss
@@ -50,6 +50,12 @@ $zippy-redirect-bg-color: rgba($zippy-redirect-color, .08);
 .zippy-indicator svg {
   height: 1.2em;
   vertical-align: middle;
+  transition: all 0.3s ease;
+  transform: rotateZ(-180deg);
+}
+
+.zippy-hidden > .zippy-title svg {
+ transform: rotateZ(0);
 }
 
 
diff --git a/lib/shared/styles/_variables.scss b/lib/shared/styles/_variables.scss
index 4a87b835..95ff58d8 100644
--- a/lib/shared/styles/_variables.scss
+++ b/lib/shared/styles/_variables.scss
@@ -1,48 +1,52 @@
 // Colors
 // ---------------------------
-$primary-color : #0033a0;
-$secondary-color : #263238;
-$black : #263238;
-$green : #00aa13;
-$yellow : #f1c400;
-$red : #e53935;
+$primary-color: #0033a0;
+$secondary-color: #263238;
+$black: #263238;
+$green: #00aa13;
+$yellow: #f1c400;
+$red: #e53935;
+$background-color: #fff;
 
-$em-size : 14px;
+$em-size: 14px;
 
 // Font weights
 // ---------------------------
-$light : 300;
-$regular : 400;
-$bold : 700;
+$light: 300;
+$regular: 400;
+$bold: 700;
 
 // Base Font
 // ---------------------------
-$base-font : Roboto;
-$base-font-family : sans-serif;
-$base-font-weight : $light;
-$base-font-size : 1em;
-$base-line-height : 1.55em;
-$text-color : $black;
+$base-font: Roboto;
+$base-font-family: sans-serif;
+$base-font-weight: $light;
+$base-font-size: 1em;
+$base-line-height: 1.55em;
+$text-color: $black;
 
 // Heading Font
 // ---------------------------
-$headers-font : Montserrat;
-$headers-font-family : sans-serif;
-$headers-font-weight : $regular;
-$headers-color : $primary-color;
-$method-headers-color : $primary-color;
+$headers-font: Montserrat;
+$headers-font-family: sans-serif;
+$headers-font-weight: $regular;
+$headers-color: $primary-color;
+$method-headers-color: $primary-color;
 $h1: 1.85714285714286em;
 $h2: 1.5714285714285714em;
 $h3: 1.2857142857142858em;
 $h4: 1.1428571428571428em;
 $h5: 0.929em;
 
+// spacings
+$section-spacing: 40px;
+
 // Side Bar
 // ---------------------------
 $side-bar-width: 260px;
-$side-bar-bg-color: #FAFAFA;
+$side-bar-bg-color: #fafafa;
 $side-menu-item-color: #384248;
-$side-menu-even-bg-color: #F0F0F0;
+$side-menu-even-bg-color: #f0f0f0;
 $side-menu-active-bg-color: #f0f0f0;
 $side-menu-item-hpadding: 20px;
 $side-menu-item-vpadding: 5px;
@@ -54,7 +58,7 @@ $samples-panel-width: 40%;
 $sample-panel-headers-color: lighten($black, 50%);
 $sample-panel-color: lighten($black, 80%);
 
-$tree-lines-color: rgba($primary-color, .5);
+$tree-lines-color: rgba($primary-color, 0.5);
 
 $side-menu-mobile-breakpoint: 1000px;
 $right-panel-squash-breakpoint: 1100px;
@@ -62,3 +66,7 @@ $right-panel-squash-breakpoint: 1100px;
 // Border Radius
 // ---------------------------
 $border-radius: 2px;
+
+// texts
+$array-text: 'Array of ';
+$tuple-text: 'Tuple ';