From 4145de7662f446adbf1c31fdfca81070ea689237 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Fri, 27 Apr 2018 18:22:27 -0400
Subject: [PATCH] layout styling

---
 src/app/tabs/settings.component.html | 376 ++++++++++++++-------------
 src/app/tabs/tabs.component.html     |  26 +-
 src/locales/en/messages.json         |  20 +-
 src/scss/misc.scss                   |   8 +
 4 files changed, 234 insertions(+), 196 deletions(-)

diff --git a/src/app/tabs/settings.component.html b/src/app/tabs/settings.component.html
index 3537b9ba..7934f9bf 100644
--- a/src/app/tabs/settings.component.html
+++ b/src/app/tabs/settings.component.html
@@ -1,194 +1,202 @@
 <form (ngSubmit)="submit()">
-    <h2>Directory</h2>
-    <div class="form-group">
-        <label for="directory">{{'type' | i18n}}</label>
-        <select class="form-control" id="directory" name="Directory" [(ngModel)]="directory">
-            <option *ngFor="let o of directoryOptions" [ngValue]="o.value">{{o.name}}</option>
-        </select>
-    </div>
-    <div [hidden]="directory != directoryType.Ldap">
-        <div class="form-group">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="ssl" [(ngModel)]="ldap.ssl" name="SSL">
-                <label class="form-check-label" for="ssl">SSL (LDAPS)</label>
+    <div class="row">
+        <div class="col-sm">
+            <div class="card">
+                <h5 class="card-header">{{'directory' | i18n}}</h5>
+                <div class="card-body">
+                    <div class="form-group">
+                        <label for="directory">{{'type' | i18n}}</label>
+                        <select class="form-control" id="directory" name="Directory" [(ngModel)]="directory">
+                            <option *ngFor="let o of directoryOptions" [ngValue]="o.value">{{o.name}}</option>
+                        </select>
+                    </div>
+                    <div [hidden]="directory != directoryType.Ldap">
+                        <div class="form-group">
+                            <label for="hostname">{{'serverHostname' | i18n}}</label>
+                            <input type="text" class="form-control" id="hostname" name="Hostname" placeholder="{{'ex' | i18n}} ad.company.com" [(ngModel)]="ldap.hostname">
+                        </div>
+                        <div class="form-group">
+                            <label for="port">{{'port' | i18n}}</label>
+                            <input type="text" class="form-control" id="port" name="Port" placeholder="{{'ex' | i18n}} 389" [(ngModel)]="ldap.port">
+                        </div>
+                        <div class="form-group">
+                            <label for="rootPath">{{'rootPath' | i18n}}</label>
+                            <input type="text" class="form-control" id="rootPath" name="RootPath" [(ngModel)]="ldap.rootPath" placeholder="{{'ex' | i18n}} DC=ad,DC=company,DC=com">
+                        </div>
+                        <div class="form-group">
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" id="ssl" [(ngModel)]="ldap.ssl" name="SSL">
+                                <label class="form-check-label" for="ssl">{{'ldapSsl' | i18n}}</label>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" id="ad" [(ngModel)]="ldap.ad" name="AD">
+                                <label class="form-check-label" for="ad">{{'ldapAd' | i18n}}</label>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" id="currentUser" [(ngModel)]="ldap.currentUser" name="CurrentUser">
+                                <label class="form-check-label" for="currentUser">{{'currentUser' | i18n}}</label>
+                            </div>
+                        </div>
+                        <div [hidden]="ldap.currentUser">
+                            <div class="form-group">
+                                <label for="username">{{'username' | i18n}}</label>
+                                <input type="text" class="form-control" id="username" name="Username" [(ngModel)]="ldap.username" placeholder="{{'ex' | i18n}} admin@company.com">
+                            </div>
+                            <div class="form-group">
+                                <label for="password">{{'password' | i18n}}</label>
+                                <input type="password" class="form-control" id="password" name="Password" [(ngModel)]="ldap.password">
+                            </div>
+                        </div>
+                    </div>
+                    <div [hidden]="directory != directoryType.AzureActiveDirectory">
+                        <div class="form-group">
+                            <label for="tenant">{{'tenant' | i18n}}</label>
+                            <input type="text" class="form-control" id="tenant" name="Tenant" [(ngModel)]="azure.tenant" placeholder="{{'ex' | i18n}} companyad.onmicrosoft.com">
+                        </div>
+                        <div class="form-group">
+                            <label for="applicationId">{{'applicationId' | i18n}}</label>
+                            <input type="text" class="form-control" id="applicationId" name="ApplicationId" [(ngModel)]="azure.applicationId">
+                        </div>
+                        <div class="form-group">
+                            <label for="secretKey">{{'secretKey' | i18n}}</label>
+                            <input type="password" class="form-control" id="secretKey" name="SecretKey" [(ngModel)]="azure.key">
+                        </div>
+                    </div>
+                    <div [hidden]="directory != directoryType.GSuite">
+                        <div class="form-group">
+                            <label for="domain">{{'domain' | i18n}}</label>
+                            <input type="text" class="form-control" id="domain" name="Domain" [(ngModel)]="gsuite.domain" placeholder="{{'ex' | i18n}} company.com">
+                        </div>
+                        <div class="form-group">
+                            <label for="adminUser">{{'adminUser' | i18n}}</label>
+                            <input type="text" class="form-control" id="adminUser" name="AdminUser" [(ngModel)]="gsuite.adminUser" placeholder="{{'ex' | i18n}} admin@company.com">
+                        </div>
+                        <div class="form-group">
+                            <label for="customerId">{{'customerId' | i18n}}</label>
+                            <input type="text" class="form-control" id="customerId" name="CustomerId" [(ngModel)]="gsuite.customer" placeholder="{{'ex' | i18n}} 39204722352">
+                        </div>
+                        <div class="form-group">
+                            <label for="clientEmail">{{'clientEmail' | i18n}}</label>
+                            <input type="text" class="form-control" id="clientEmail" name="ClientEmail" [(ngModel)]="gsuite.clientEmail">
+                        </div>
+                        <div class="form-group">
+                            <label for="privateKey">{{'privateKey' | i18n}}</label>
+                            <textarea class="form-control" id="privateKey" name="PrivateKey" [(ngModel)]="gsuite.privateKey">
+                            </textarea>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
-        <div class="form-group">
-            <label for="hostname">{{'serverHostname' | i18n}}</label>
-            <input type="text" class="form-control" id="hostname" name="Hostname"
-                   placeholder="{{'ex' | i18n}} ad.company.com" [(ngModel)]="ldap.hostname">
-        </div>
-        <div class="form-group">
-            <label for="port">{{'port' | i18n}}</label>
-            <input type="text" class="form-control" id="port" name="Port" placeholder="{{'ex' | i18n}} 389"
-                   [(ngModel)]="ldap.port">
-        </div>
-        <div class="form-group">
-            <label for="rootPath">{{'rootPath' | i18n}}</label>
-            <input type="text" class="form-control" id="rootPath" name="RootPath" [(ngModel)]="ldap.rootPath"
-                   placeholder="{{'ex' | i18n}} DC=ad,DC=company,DC=com">
-        </div>
-        <div class="form-group">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="currentUser" [(ngModel)]="ldap.currentUser"
-                    name="CurrentUser">
-                <label class="form-check-label" for="currentUser">{{'currentUser' | i18n}}</label>
-            </div>
-        </div>
-        <div [hidden]="ldap.currentUser">
-            <div class="form-group">
-                <label for="username">{{'username' | i18n}}</label>
-                <input type="text" class="form-control" id="username" name="Username" [(ngModel)]="ldap.username"
-                       placeholder="{{'ex' | i18n}} admin@company.com">
-            </div>
-            <div class="form-group">
-                <label for="password">{{'password' | i18n}}</label>
-                <input type="password" class="form-control" id="password" name="Password" [(ngModel)]="ldap.password">
-            </div>
-        </div>
-        <div class="form-group">
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" id="ad" [(ngModel)]="ldap.ad" name="AD">
-                <label class="form-check-label" for="ad">Active Directory</label>
+        <div class="col-sm">
+            <div class="card">
+                <h5 class="card-header">{{'sync' | i18n}}</h5>
+                <div class="card-body">
+                    <div class="form-group">
+                        <label for="interval">{{'interval' | i18n}}</label>
+                        <input type="number" min="5" class="form-control" id="interval" name="Interval" [(ngModel)]="sync.interval" placeholder="{{'ex' | i18n}} 5">
+                    </div>
+                    <div class="form-group">
+                        <label for="memberAttribute">{{'memberAttribute' | i18n}}</label>
+                        <input type="text" class="form-control" id="memberAttribute" name="MemberAttribute" [(ngModel)]="sync.memberAttribute" placeholder="{{'ex' | i18n}} member">
+                    </div>
+                    <div class="form-group">
+                        <label for="creationDateAttribute">{{'creationDateAttribute' | i18n}}</label>
+                        <input type="text" class="form-control" id="creationDateAttribute" name="CreationDateAttribute" [(ngModel)]="sync.creationDateAttribute"
+                            placeholder="{{'ex' | i18n}} whenCreated">
+                    </div>
+                    <div class="form-group">
+                        <label for="revisionDateAttribute">{{'revisionDateAttribute' | i18n}}</label>
+                        <input type="text" class="form-control" id="revisionDateAttribute" name="RevisionDateAttribute" [(ngModel)]="sync.revisionDateAttribute"
+                            placeholder="{{'ex' | i18n}} whenChanged">
+                    </div>
+                    <div class="form-group">
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" id="removeDisabled" [(ngModel)]="sync.removeDisabled" name="RemoveDisabled">
+                            <label class="form-check-label" for="removeDisabled">{{'removeDisabled' | i18n}}</label>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" id="useEmailPrefixSuffix" [(ngModel)]="sync.useEmailPrefixSuffix" name="UseEmailPrefixSuffix">
+                            <label class="form-check-label" for="useEmailPrefixSuffix">{{'useEmailPrefixSuffix' | i18n}}</label>
+                        </div>
+                    </div>
+                    <div [hidden]="!sync.useEmailPrefixSuffix">
+                        <div class="form-group">
+                            <label for="emailPrefixAttribute">{{'emailPrefixAttribute' | i18n}}</label>
+                            <input type="text" class="form-control" id="emailPrefixAttribute" name="EmailPrefixAttribute" [(ngModel)]="sync.emailPrefixAttribute"
+                                placeholder="{{'ex' | i18n}} sAMAccountName">
+                        </div>
+                        <div class="form-group">
+                            <label for="emailSuffix">{{'emailSuffix' | i18n}}</label>
+                            <input type="text" class="form-control" id="emailSuffix" name="EmailSuffix" [(ngModel)]="sync.emailSuffix" placeholder="{{'ex' | i18n}} @company.com">
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" id="syncUsers" [(ngModel)]="sync.users" name="SyncUsers">
+                            <label class="form-check-label" for="syncUsers">{{'syncUsers' | i18n}}</label>
+                        </div>
+                    </div>
+                    <div [hidden]="!sync.users">
+                        <div class="form-group">
+                            <label for="userFilter">{{'userFilter' | i18n}}</label>
+                            <textarea class="form-control" id="userFilter" name="UserFilter" [(ngModel)]="sync.userFilter" placeholder="{{'ex' | i18n}} (&amp;(objectClass=user))"></textarea>
+                        </div>
+                        <div class="form-group">
+                            <label for="userObjectClass">{{'userObjectClass' | i18n}}</label>
+                            <input type="text" class="form-control" id="userObjectClass" name="UserObjectClass" [(ngModel)]="sync.userObjectClass" placeholder="{{'ex' | i18n}} user">
+                        </div>
+                        <div class="form-group">
+                            <label for="userPath">{{'userPath' | i18n}}</label>
+                            <input type="text" class="form-control" id="userPath" name="UserPath" [(ngModel)]="sync.userPath" placeholder="{{'ex' | i18n}} CN=Users">
+                        </div>
+                        <div class="form-group">
+                            <label for="userEmailAttribute">{{'userEmailAttribute' | i18n}}</label>
+                            <input type="text" class="form-control" id="userEmailAttribute" name="UserEmailAttribute" [(ngModel)]="sync.userEmailAttribute"
+                                placeholder="{{'ex' | i18n}} mail">
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" id="syncGroups" [(ngModel)]="sync.groups" name="SyncGroups">
+                            <label class="form-check-label" for="syncGroups">{{'syncGroups' | i18n}}</label>
+                        </div>
+                    </div>
+                    <div [hidden]="!sync.groups">
+                        <div class="form-group">
+                            <label for="groupFilter">{{'groupFilter' | i18n}}</label>
+                            <textarea class="form-control" id="groupFilter" name="GroupFilter" [(ngModel)]="sync.groupFilter" placeholder="{{'ex' | i18n}} (&amp;(objectClass=group))"></textarea>
+                        </div>
+                        <div class="form-group">
+                            <label for="groupObjectClass">{{'groupObjectClass' | i18n}}</label>
+                            <input type="text" class="form-control" id="groupObjectClass" name="GroupObjectClass" [(ngModel)]="sync.groupObjectClass"
+                                placeholder="{{'ex' | i18n}} group">
+                        </div>
+                        <div class="form-group">
+                            <label for="groupPath">{{'groupPath' | i18n}}</label>
+                            <input type="text" class="form-control" id="groupPath" name="GroupPath" [(ngModel)]="sync.groupPath" placeholder="{{'ex' | i18n}} CN=Groups">
+                        </div>
+                        <div class="form-group">
+                            <label for="groupNameAttribute">{{'groupNameAttribute' | i18n}}</label>
+                            <input type="text" class="form-control" id="groupNameAttribute" name="GroupNameAttribute" [(ngModel)]="sync.groupNameAttribute"
+                                placeholder="{{'ex' | i18n}} name">
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
-    <div [hidden]="directory != directoryType.AzureActiveDirectory">
-        <div class="form-group">
-            <label for="tenant">{{'tenant' | i18n}}</label>
-            <input type="text" class="form-control" id="tenant" name="Tenant" [(ngModel)]="azure.tenant"
-                   placeholder="{{'ex' | i18n}} companyad.onmicrosoft.com">
-        </div>
-        <div class="form-group">
-            <label for="applicationId">{{'applicationId' | i18n}}</label>
-            <input type="text" class="form-control" id="applicationId" name="ApplicationId"
-                   [(ngModel)]="azure.applicationId">
-        </div>
-        <div class="form-group">
-            <label for="secretKey">{{'secretKey' | i18n}}</label>
-            <input type="password" class="form-control" id="secretKey" name="SecretKey" [(ngModel)]="azure.key">
-        </div>
-    </div>
-    <div [hidden]="directory != directoryType.GSuite">
-        <div class="form-group">
-            <label for="domain">{{'domain' | i18n}}</label>
-            <input type="text" class="form-control" id="domain" name="Domain" [(ngModel)]="gsuite.domain"
-                   placeholder="{{'ex' | i18n}} company.com">
-        </div>
-        <div class="form-group">
-            <label for="adminUser">{{'adminUser' | i18n}}</label>
-            <input type="text" class="form-control" id="adminUser" name="AdminUser" [(ngModel)]="gsuite.adminUser"
-                   placeholder="{{'ex' | i18n}} admin@company.com">
-        </div>
-        <div class="form-group">
-            <label for="customerId">{{'customerId' | i18n}}</label>
-            <input type="text" class="form-control" id="customerId" name="CustomerId" [(ngModel)]="gsuite.customer"
-                   placeholder="{{'ex' | i18n}} 39204722352">
-        </div>
-        <div class="form-group">
-            <label for="clientEmail">{{'clientEmail' | i18n}}</label>
-            <input type="text" class="form-control" id="clientEmail" name="ClientEmail"
-                   [(ngModel)]="gsuite.clientEmail">
-        </div>
-        <div class="form-group">
-            <label for="privateKey">{{'privateKey' | i18n}}</label>
-            <textarea class="form-control" id="privateKey" name="PrivateKey" [(ngModel)]="gsuite.privateKey">
-            </textarea>
-        </div>
-    </div>
-
-    <h2>Sync</h2>
-    <div class="form-group">
-        <label for="interval">{{'interval' | i18n}}</label>
-        <input type="number" min="5" class="form-control" id="interval" name="Interval" [(ngModel)]="sync.interval">
-    </div>
-    <div class="form-group">
-        <div class="form-check">
-            <input class="form-check-input" type="checkbox" id="removeDisabled" [(ngModel)]="sync.removeDisabled" 
-                   name="RemoveDisabled">
-            <label class="form-check-label" for="removeDisabled">{{'removeDisabled' | i18n}}</label>
-        </div>
-    </div>
-    <div class="form-group">
-        <label for="memberAttribute">{{'memberAttribute' | i18n}}</label>
-        <input type="text" class="form-control" id="memberAttribute" name="MemberAttribute" [(ngModel)]="sync.memberAttribute">
-    </div>
-    <div class="form-group">
-        <label for="creationDateAttribute">{{'creationDateAttribute' | i18n}}</label>
-        <input type="text" class="form-control" id="creationDateAttribute" name="CreationDateAttribute" [(ngModel)]="sync.creationDateAttribute">
-    </div>
-    <div class="form-group">
-        <label for="revisionDateAttribute">{{'revisionDateAttribute' | i18n}}</label>
-        <input type="text" class="form-control" id="revisionDateAttribute" name="RevisionDateAttribute" [(ngModel)]="sync.revisionDateAttribute">
-    </div>
-    <div class="form-group">
-        <div class="form-check">
-            <input class="form-check-input" type="checkbox" id="useEmailPrefixSuffix" [(ngModel)]="sync.useEmailPrefixSuffix" name="UseEmailPrefixSuffix">
-            <label class="form-check-label" for="useEmailPrefixSuffix">{{'useEmailPrefixSuffix' | i18n}}</label>
-        </div>
-    </div>
-    <div [hidden]="!sync.useEmailPrefixSuffix">
-        <div class="form-group">
-            <label for="emailPrefixAttribute">{{'emailPrefixAttribute' | i18n}}</label>
-            <input type="text" class="form-control" id="emailPrefixAttribute" name="EmailPrefixAttribute" [(ngModel)]="sync.emailPrefixAttribute">
-        </div>
-        <div class="form-group">
-            <label for="emailSuffix">{{'emailSuffix' | i18n}}</label>
-            <input type="text" class="form-control" id="emailSuffix" name="EmailSuffix" [(ngModel)]="sync.emailSuffix">
-        </div>
-    </div>
-
-    <div class="form-group">
-        <div class="form-check">
-            <input class="form-check-input" type="checkbox" id="syncUsers" [(ngModel)]="sync.users" name="SyncUsers">
-            <label class="form-check-label" for="syncUsers">{{'syncUsers' | i18n}}</label>
-        </div>
-    </div>
-
-    <div [hidden]="!sync.users">
-        <div class="form-group">
-            <label for="userFilter">{{'userFilter' | i18n}}</label>
-            <textarea class="form-control" id="userFilter" name="UserFilter" [(ngModel)]="sync.userFilter">
-            </textarea>
-        </div>
-        <div class="form-group">
-            <label for="userObjectClass">{{'userObjectClass' | i18n}}</label>
-            <input type="text" class="form-control" id="userObjectClass" name="UserObjectClass" [(ngModel)]="sync.userObjectClass">
-        </div>
-        <div class="form-group">
-            <label for="userPath">{{'userPath' | i18n}}</label>
-            <input type="text" class="form-control" id="userPath" name="UserPath" [(ngModel)]="sync.userPath">
-        </div>
-    </div>
-
-    <div class="form-group">
-        <div class="form-check">
-            <input class="form-check-input" type="checkbox" id="syncGroups" [(ngModel)]="sync.groups" name="SyncGroups">
-            <label class="form-check-label" for="syncGroups">{{'syncGroups' | i18n}}</label>
-        </div>
-    </div>
-
-    <div [hidden]="!sync.groups">
-        <div class="form-group">
-            <label for="groupFilter">{{'groupFilter' | i18n}}</label>
-            <textarea class="form-control" id="groupFilter" name="GroupFilter" [(ngModel)]="sync.groupFilter">
-            </textarea>
-        </div>
-        <div class="form-group">
-            <label for="groupObjectClass">{{'groupObjectClass' | i18n}}</label>
-            <input type="text" class="form-control" id="groupObjectClass" name="GroupObjectClass" [(ngModel)]="sync.groupObjectClass">
-        </div>
-        <div class="form-group">
-            <label for="groupPath">{{'groupPath' | i18n}}</label>
-            <input type="text" class="form-control" id="groupPath" name="GroupPath" [(ngModel)]="sync.groupPath">
-        </div>
-        <div class="form-group">
-            <label for="groupNameAttribute">{{'groupNameAttribute' | i18n}}</label>
-            <input type="text" class="form-control" id="groupNameAttribute" name="GroupNameAttribute" [(ngModel)]="sync.groupNameAttribute">
-        </div>
-    </div>
-
     <button appBlurClick type="submit" class="btn btn-primary">
+        <i class="fa fa-save fa-fw"></i>
         {{'save' | i18n}}
     </button>
 </form>
diff --git a/src/app/tabs/tabs.component.html b/src/app/tabs/tabs.component.html
index fbc1bb8d..30cf1fda 100644
--- a/src/app/tabs/tabs.component.html
+++ b/src/app/tabs/tabs.component.html
@@ -1,13 +1,17 @@
-<div class="tab-page">
-    <nav class="nav flex-column">
-        <a class="nav-link" routerLink="dashboard" routerLinkActive="active">
-            <i class="fa fa-rocket"></i>
-            {{'masterPass' | i18n}}
-        </a>
-        <a class="nav-link" routerLink="settings" routerLinkActive="active">
-            <i class="fa fa-cogs"></i>
-            {{'settings' | i18n}}
-        </a>
-    </nav>
+<div class="container-fluid">
+    <ul class="nav nav-tabs">
+        <li class="nav-item">
+            <a class="nav-link" routerLink="dashboard" routerLinkActive="active">
+                <i class="fa fa-dashboard"></i>
+                {{'dashboard' | i18n}}
+            </a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" routerLink="settings" routerLinkActive="active">
+                <i class="fa fa-cogs"></i>
+                {{'settings' | i18n}}
+            </a>
+        </li>
+    </ul>
     <router-outlet></router-outlet>
 </div>
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 9864dcab..761af30f 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -331,7 +331,7 @@
         "message": "Directory"
     },
     "currentUser": {
-        "message": "Current user"
+        "message": "Authenticate as current user"
     },
     "rootPath": {
         "message": "Root Path"
@@ -410,5 +410,23 @@
     },
     "groupNameAttribute": {
         "message": "Group Name Attribute"
+    },
+    "userEmailAttribute": {
+        "message": "User Email Attribute"
+    },
+    "sync": {
+        "message": "Sync"
+    },
+    "ldapSsl": {
+        "message": "This connection uses SSL (LDAPS)"
+    },
+    "ldapAd": {
+        "message": "This LDAP server is Active Directory"
+    },
+    "select": {
+        "message": "Select"
+    },
+    "dashboard": {
+        "message": "Dashboard"
     }
 }
diff --git a/src/scss/misc.scss b/src/scss/misc.scss
index a28eb73d..a3eed07c 100644
--- a/src/scss/misc.scss
+++ b/src/scss/misc.scss
@@ -1,5 +1,9 @@
 @import "bootstrap.scss";
 
+body {
+    padding: 10px 0 20px 0;
+}
+
 h1 {
     border-bottom: 1px solid $border-color;
     margin-bottom: 20px;
@@ -19,6 +23,10 @@ h3 {
     text-transform: uppercase;
 }
 
+.nav.nav-tabs {
+    margin-bottom: 20px;
+}
+
 #duo-frame {
     background: url('../images/loading.svg') 0 0 no-repeat;
     height: 330px;