From 163dca128a23c7d123f28805006359f40da224d8 Mon Sep 17 00:00:00 2001
From: LeoColomb <LeoColomb@users.noreply.github.com>
Date: Sun, 16 Feb 2014 12:43:16 +0100
Subject: [PATCH] ReUse Bootstrap plus some fixes

---
 less/import/components.less | 586 +++++++++++++++++++-----------------
 less/import/structure.less  | 460 +++++++++++++++-------------
 less/import/tools.less      |  50 +--
 3 files changed, 581 insertions(+), 515 deletions(-)

diff --git a/less/import/components.less b/less/import/components.less
index e97ac6a..116446c 100644
--- a/less/import/components.less
+++ b/less/import/components.less
@@ -2,317 +2,355 @@
 Componenets
 ============================================================================================== */
 a {
-	color: @light;
+    color: @light;
 }
 
 .btn {
-	&.btn-sidebar {
-		padding: 7px 10px;
-		.kill-background-image;
-		.kill-box-shadow;
-		background-color: @sidebar-hover;
-		border: none;
-		.icon-bar {
-			display: block;
-			width: 18px;
-			height: 2px;
-			margin-top: 2px;
-			margin-bottom: 3px;
-			background-color: @dark;
-			.kill-box-shadow;
-		}
-		&:hover {
-			.kill-box-shadow;
-			background-color: @dark;
-			.icon-bar {
-				background-color: @light;
-				.kill-box-shadow;
-			}
-		}
-	}
+    &.btn-sidebar {
+        padding: 7px 10px;
+        .kill-background-image;
+        .kill-box-shadow;
+        background-color: @sidebar-hover;
+        border: none;
+
+        .icon-bar {
+            display: block;
+            width: 18px;
+            height: 2px;
+            margin-top: 2px;
+            margin-bottom: 3px;
+            background-color: @dark;
+            .kill-box-shadow;
+        }
+
+        &:hover {
+            .kill-box-shadow;
+            background-color: @dark;
+
+            .icon-bar {
+                background-color: @light;
+                .kill-box-shadow;
+            }
+        }
+    }
 }
+
 code {
-	color: @light;
+    color: @light;
 }
 
 //Navbar
 .navbar {
-	.box-shadow();
-	z-index: 1;
-	margin-bottom: 0px;
-	z-index: 200;
-	.navbar-inner {
-		.kill-background-image;
-		background-color: @dark;
-		border-bottom: none;
-		padding: 6px 20px;
-		.brand {
-			color: @light;
-			text-shadow:none;
-			.roboto-slab.bold;
-		}
-		.navbar-text {
-			color: @light;
-			a {
-				color: @light;
-			}
-		}
-		@media (max-width: 767px) {
-			padding: 6px 10px;
-			.navbar-text {
-				line-height: 16px;
-				margin: 12px 6px;
-				font-size: 12px;
-			}
-		}
-	}
-	@media (min-width: 768px) and (max-width: 979px) {
-		&.navbar-fixed-top {
-			position: fixed;
-		}
-	}
-	@media (max-width: 767px) {
-		&.navbar-fixed-top {
-			margin-left: 0px;
-			margin-right: 0px;
-		}
-	}
+    .box-shadow();
+    margin-bottom: 0px;
+    z-index: 200;
+
+    .navbar-inner {
+        .kill-background-image;
+        background-color: @dark;
+        border-bottom: none;
+        padding: 6px 20px;
+
+        .brand {
+            color: @light;
+            text-shadow: none;
+            .roboto-slab.bold;
+        }
+
+        .navbar-text {
+            color: @light;
+
+            a {
+                color: @light;
+            }
+        }
+
+        @media (max-width: 767px) {
+            padding: 6px 10px; .navbar-text {
+                line-height: 16px;
+                margin: 12px 6px;
+                font-size: 12px;
+            }
+        }
+    }
+
+    @media (min-width: 768px) and (max-width: 979px) {
+        &.navbar-fixed-top {
+            position: fixed;
+        }
+    }
+
+    @media (max-width: 767px) {
+        &.navbar-fixed-top {
+            margin-left: 0px;
+            margin-right: 0px;
+        }
+    }
 }
 
 //Sidebar Nav List
 .nav.nav-list {
-	padding-left: 0px;
-	padding-right: 0px;
-	li {
-		a {
-			margin: 0px;
-			padding: 6px 15px;
-			.roboto-slab.regular;
-			color: @dark;
-			font-size: 15px;
-			text-shadow:none;
-			border-top: 1px solid @lines;
-			&:hover {
-				color: @dark;
-				text-shadow:none;
-				background-color: @sidebar-hover;
-			}
-		}
-		&.active {
-			a {
-				background-color: @sidebar-hover;
-			}
-		}
-		&.open {
-			> ul {
-				display: block;
-			}
-		}
-		&:last-child {
-			&.open {
-				//border-bottom: none;
-			}
-		}
-		ul {
-			display: none;
-			margin-left: 15px;
-			li {
-				a {
-					.sans-serif(normal, 14px);
-					margin: 0px;
-					margin-left: -15px;
-					padding: 3px 30px;
-					border: none;
-					color: @text;
-					.opacity(0.70);
-					&:hover {
-						.opacity(1.0);
-						background-color: transparent;
-					}
-				}
-				&.active {
-					a {
-						color: @dark;
-					}
-				}
-			}
-		}
-	}
+    padding-left: 0px;
+    padding-right: 0px;
+
+    li {
+        a {
+            margin: 0px;
+            padding: 6px 15px;
+            .roboto-slab.regular;
+            color: @dark;
+            font-size: 15px;
+            text-shadow: none;
+            border-top: 1px solid @lines;
+
+            &:hover {
+                color: @dark;
+                text-shadow: none;
+                background-color: @sidebar-hover;
+            }
+        }
+
+        &.active {
+            a {
+                background-color: @sidebar-hover;
+            }
+        }
+
+        &.open {
+            > ul {
+                display: block;
+            }
+        }
+
+        &:last-child {
+            &.open {
+                //border-bottom: none;
+            }
+        }
+
+        ul {
+            display: none;
+            margin-left: 15px;
+
+            li {
+                a {
+                    .sans-serif(normal, 14px);
+                    margin: 0px;
+                    margin-left: -15px;
+                    padding: 3px 30px;
+                    border: none;
+                    color: @text;
+                    .opacity(0.70);
+
+                    &:hover {
+                        .opacity(1.0);
+                        background-color: transparent;
+                    }
+                }
+
+                &.active {
+                    a {
+                        color: @dark;
+                    }
+                }
+            }
+        }
+    }
 }
 
 .page-header {
-	margin: 10px 0px;
-	padding: 0px;
-	h1 {
-		margin-top: 0px;
-	}
-	sub-heading {
-  		padding: 0px, 0px, 20px;
-	}
+    margin: 10px 0px;
+    padding: 0px;
+
+    h1 {
+        margin-top: 0px;
+        display: inline-block;
+    }
+
+    sub-heading {
+        padding: 0px, 0px, 20px;
+    }
 }
+
 pre {
-	border: none;
-	background-color: @light;
-	.border-radius(0px);
-	padding: 10px;
-	margin-left: -20px;
-	padding-left: 30px;
-	margin-right: -20px;
-	padding-right: 30px;
-	code {
-		background: transparent;
-		border: none;
-	}
+    border: none;
+    background-color: @light;
+    border-radius: 0;
+    padding: 10px;
+    margin-left: -20px;
+    padding-left: 30px;
+    margin-right: -20px;
+    padding-right: 30px;
+
+    code {
+        background: transparent;
+        border: none;
+    }
 }
 
 //Content pages float view
 .float-view {
-	@media (min-width: 1150px) {
-		.content-page {
-			height: 100%;
-			overflow:auto;
-			padding: 0px !important;
-			background-color: transparent !important;
-			position: relative;
+    @media (min-width: 1150px) {
+        .content-page {
+            height: 100%;
+            overflow: auto;
+            padding: 0px !important;
+            background-color: transparent !important;
+            position: relative;
 
-			article {
-				width: 100%;
-				min-height: 100%;
-				overflow: auto;
-				position: relative;
-				z-index: 1;
-				&:before {
-					content: "";
-					width: 50%;
-					min-height: 100%;
-					overflow: auto;
-					background-color: white;
-					display: block;
-					margin: 0px;
-					position: absolute;
-					z-index: -1;
-				}
-			}
-            .hideCode:before {
-                width:100% !important;
+            article {
+                width: 100%;
+                min-height: 100%;
+                overflow: auto;
+                position: relative;
+                z-index: 1;
+
+                &:before {
+                    content: "";
+                    width: 50%;
+                    min-height: 100%;
+                    overflow: auto;
+                    background-color: white;
+                    display: block;
+                    margin: 0px;
+                    position: absolute;
+                    z-index: -1;
+                }
             }
-			table {
-				float: left;
-				clear: left;
-				width: 47%;
-				margin-left: 1.5%;
-				margin-right: 1.5%;
-				background-color: white;
-				white-space: normal;
-				pre, code {
-					white-space: normal;
-				}
-			}
-			.page-header {
-				padding: 0px;
-			}
-			.page-header,
-			p, ul, ol, dl, h2, h3,h4, h5, h6 {
-				float: left;
-				clear: left;
-				width: 47%;
-				margin-left: 1.5%;
-				margin-right: 1.5%;
-				background-color: white;
-				&:before {
-					content: "";
-					width: 100%;
-					height: 10px;
-					display: block;
-					clear: both;
-					//border-top: 1px solid @dark;
-				}
-				p, ul, ol, dl, h2, h3,h4, h5, h6, pre {
-					float: none;
-					display: block;
-				}
-			}
-			.hideCode2 {
-    			width: 900px !important;
-    			width: calc(100% - 130px) !important;
-  			}
-			ul,ol {
-				li {
-					margin-left: 30px;
-				}
-			}
-			pre {
-				float: left;
-				clear: right;
-				width: 47%;
-				border: none;
-				border-left: 10px solid white;
-				margin: 0px 0px 10px 0px;
-				padding: 0px 0px 0px 10px;
-			}
-			hideCode3 {
-				display: none;
-			}
-		}
-	}
+
+            .hideCode:before {
+                width: 100% !important;
+            }
+
+            table {
+                float: left;
+                clear: left;
+                width: 47%;
+                margin-left: 1.5%;
+                margin-right: 1.5%;
+                background-color: white;
+                white-space: normal;
+
+                pre, code {
+                    white-space: normal;
+                }
+            }
+
+            .page-header {
+                padding: 0px;
+            }
+
+            .page-header,
+            p, ul, ol, dl, h2, h3, h4, h5, h6 {
+                float: left;
+                clear: left;
+                width: 47%;
+                margin-left: 1.5%;
+                margin-right: 1.5%;
+                background-color: white;
+
+                &:before {
+                    content: "";
+                    width: 100%;
+                    height: 10px;
+                    display: block;
+                    clear: both;
+                    //border-top: 1px solid @dark;
+                }
+
+                p, ul, ol, dl, h2, h3, h4, h5, h6, pre {
+                    float: none;
+                    display: block;
+                }
+            }
+
+            .hideCode2 {
+                width: 900px !important;
+                width: calc(100% - 130px) !important;
+            }
+
+            ul, ol {
+                li {
+                    margin-left: 30px;
+                }
+            }
+
+            pre {
+                float: left;
+                clear: right;
+                width: 47%;
+                border: none;
+                border-left: 10px solid white;
+                margin: 0px 0px 10px 0px;
+                padding: 0px 0px 0px 10px;
+            }
+
+            hideCode3 {
+                display: none;
+            }
+        }
+    }
 }
 
 //Tables
 table {
-	width: 100%;
-	border-bottom: 1px solid @lines;
-	margin-bottom: 10px;
-	tr {
-		th, td {
-			padding: 8px;
-			line-height: 20px;
-			text-align: left;
-			vertical-align: top;
-			border-top: 1px solid @lines;
-			border-left: 1px solid @lines;
-			border-color: @lines !important;
-			&:last-child {
-				border-right: 1px solid @lines;
-			}
-		}
-	}
+    width: 100%;
+    border-bottom: 1px solid @lines;
+    margin-bottom: 10px;
+
+    tr {
+        th, td {
+            padding: 8px;
+            line-height: 20px;
+            text-align: left;
+            vertical-align: top;
+            border-top: 1px solid @lines;
+            border-left: 1px solid @lines;
+            border-color: @lines !important;
+
+            &:last-child {
+                border-right: 1px solid @lines;
+            }
+        }
+    }
 }
 
 //Footer
 .footer {
-	position: fixed;
-	bottom:0;
-	left: 0;
-	padding: 15px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    padding: 15px;
 }
 
 //github ribbon
 #github-ribbon {
-	position: absolute;
-	top: 50px;
-	right: 0;
-	z-index: 200;
+    position: absolute;
+    top: 50px;
+    right: 0;
+    z-index: 200;
 }
 
 .well {
-	&.well-sidebar {
-		.kill-box-shadow;
-		background-color: transparent;
-		.border-radius(0px);
-		border: none;
-		a {
-			font-size: 13px;
-			.roboto-slab.regular;
-			color: @light;
-			line-height: 28px;
-		}
-		.twitter {
-			hr {
-				border-bottom: none;
-				margin-left: -20px;
-				margin-right: -20px;
-			}
-		}
-	}
-}
+    &.well-sidebar {
+        .kill-box-shadow;
+        background-color: transparent;
+        border-radius: 0;
+        border: none;
 
+        a {
+            font-size: 13px;
+            .roboto-slab.regular;
+            color: @light;
+            line-height: 28px;
+        }
+
+        .twitter {
+            hr {
+                border-bottom: none;
+                margin-left: -20px;
+                margin-right: -20px;
+            }
+        }
+    }
+}
diff --git a/less/import/structure.less b/less/import/structure.less
index e4bc545..bc5acc3 100644
--- a/less/import/structure.less
+++ b/less/import/structure.less
@@ -4,33 +4,32 @@ Base CSS
 
 //Fonts
 .roboto-slab {
-	&.light {
-		font-family: 'Roboto Slab', serif;
-		font-weight: 100;
-	}
-	&.book {
-		font-family: 'Roboto Slab', serif;
-		font-weight: 300;
-	}
-	&.regular {
-		font-family: 'Roboto Slab', serif;
-		font-weight: 400;
-	}
-	&.bold {
-		font-family: 'Roboto Slab', serif;
-		font-weight: 700;
-	}
+    font-family: 'Roboto Slab', @font-family-sans-serif;
+
+    &.light {
+        font-weight: 100;
+    }
+
+    &.book {
+        font-weight: 300;
+    }
+
+    &.regular {
+        font-weight: 400;
+    }
+
+    &.bold {
+        font-weight: 700;
+    }
 }
 
 //Typography
 h1, h2, h3, h4, h5, h6 {
-	.roboto-slab.book;
+    .roboto-slab.book;
 }
-a {
 
-}
 pre {
-	padding: 0;
+    padding: 0;
 }
 
 /* ===========================================================================================
@@ -38,122 +37,138 @@ Homepage
 ============================================================================================== */
 
 .homepage-hero {
-	padding-top: 50px !important;
-	background-color: @light;
-	.kill-box-shadow;
-	.border-radius(0px);
-	border: none;
-	color: @dark;
-	overflow: hidden;
-	@media (max-width: 767px) {
-		padding-top: 0px !important;
-	}
-	.text-center {
-		.roboto-slab.bold;
-		margin: 10px 0px;
-	}
-	h2 {
-		margin: 20px 0px;
-	}
-	.homepage-image {
-		//.box-shadow(10px, rgba(0,0,0,0.20), 0px, 0px);
-	}
+    padding-top: 50px !important;
+    background-color: @light;
+    .kill-box-shadow;
+    border-radius: 0px;
+    border: none;
+    color: @dark;
+    overflow: hidden;
+
+    @media (max-width: 767px) {
+        padding-top: 0px !important;
+    }
+
+    .text-center {
+        .roboto-slab.bold;
+        margin: 10px 0px;
+    }
+
+    h2 {
+        margin: 20px 0px;
+    }
 }
+
 .hero-buttons.container-fluid {
-	padding: 20px 0px;
-	background-color: @sidebar-hover;
-	.btn-hero.btn {
-		.roboto-slab.bold;
-		padding: 20px 30px;
-		.kill-background-image;
-		.kill-box-shadow;
-		.border-radius(0px);
-		text-shadow:none;
-		border: none;
-		.opacity(0.80);
-		margin: 0px 10px;
-		text-transform: uppercase;
-		border: 5px solid @dark;
-		@media (max-width: 767px) {
-			display: block;
-			margin-bottom: 10px;
-		}
-		&:hover {
-			.opacity(1.0);
-		}
-		&.btn-secondary {
-			background-color: @sidebar-hover;
-			color: @dark;
-		}
-		&.btn-primary {
-			background-color: @dark;
-			color: @sidebar-background;
-		}
-	}
+    padding: 20px 0px;
+    background-color: @sidebar-hover;
+
+    .btn-hero.btn {
+        .roboto-slab.bold;
+        padding: 20px 30px;
+        .kill-background-image;
+        .kill-box-shadow;
+        border-radius: 0px;
+        text-shadow: none;
+        border: none;
+        .opacity(0.80);
+        margin: 0px 10px;
+        text-transform: uppercase;
+        border: 5px solid @dark;
+
+        @media (max-width: 767px) {
+            display: block; margin-bottom: 10px;
+        }
+
+        &:hover {
+            .opacity(1.0);
+        }
+
+        &.btn-secondary {
+            background-color: @sidebar-hover;
+            color: @dark;
+        }
+
+        &.btn-primary {
+            background-color: @dark;
+            color: @sidebar-background;
+        }
+    }
 }
 
 .homepage-content.container-fluid {
-	// color: white;
-	// background-color: @text;
-	background-color: white;
-	padding: 40px 0px;
-	.lead {
-		.roboto-slab.regular;
-	}
-	ul, ol {
-		padding: 20px 0px;
-		margin: 0 0 10px 0px;
-		li {
-			list-style: none;
-			padding-bottom: 5px;
-			&:before {
-				content: '';
-				width: 0px;
-				height: 0px;
-				border: 3px solid transparent;
-				border-left: 3px solid @light;
-				float: left;
-				display: block;
-				margin: 6px;
-			}
-		}
-	}
+    // color: white;
+    // background-color: @text;
+    background-color: white;
+    padding: 40px 0px;
 
-	@media (max-width: 767px) {
-		padding: 40px 20px;
-	}
+    .lead {
+        .roboto-slab.regular;
+    }
+
+    ul, ol {
+        padding: 20px 0px;
+        margin: 0 0 10px 0px;
+
+        li {
+            list-style: none;
+            padding-bottom: 5px;
+
+            &:before {
+                content: '';
+                width: 0px;
+                height: 0px;
+                border: 3px solid transparent;
+                border-left: 3px solid @light;
+                float: left;
+                display: block;
+                margin: 6px;
+            }
+        }
+    }
+
+    @media (max-width: 767px) {
+        padding: 40px 20px;
+    }
 }
 
 .homepage-footer.container-fluid {
-	background-color: @dark;
-	.kill-box-shadow;
-	.border-radius(0px);
-	color: light;
-	border: none;
-	@media (max-width: 767px) {
-		padding: 0 20px;
-	}
-	.footer-nav {
-		margin: 40px 0px;
-		li {
-			list-style: none;
-			a {
-				.roboto-slab.bold;
-				font-size: 16px;
-				line-height: 32px;
-				&:hover {
-					color: @light;
-					text-decoration: underline;
-				}
-			}
-		}
-	}
-	.twitter {
-		margin-top: 20px;
-	}
-	.twitter:first-child {
-		margin-top: 40px;
-	}
+    background-color: @dark;
+    .kill-box-shadow;
+    border-radius: 0px;
+    color: light;
+    border: none;
+
+    @media (max-width: 767px) {
+        padding: 0 20px;
+    }
+
+    .footer-nav {
+        margin: 40px 0px;
+
+        li {
+            list-style: none;
+
+            a {
+                .roboto-slab.bold;
+                font-size: 16px;
+                line-height: 32px;
+
+                &:hover {
+                    color: @light;
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+
+    .twitter {
+        margin-top: 20px;
+    }
+
+        .twitter:first-child {
+            margin-top: 40px;
+        }
 }
 
 /* ===========================================================================================
@@ -161,7 +176,7 @@ Docs Body & Page Structure
 ============================================================================================== */
 
 html, body {
-	margin: 0;
+    margin: 0;
     padding: 0;
     height: 100%;
     background-color: @light;
@@ -175,121 +190,132 @@ html, body {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
+
     &.fluid-height {
-    	height: 100%;
+        height: 100%;
     }
 }
+
 .columns {
     height: 100%;
+
     .left-column,
     .right-column {
-    	padding-top: 50px;
-    	@media (max-width: 767px) {
-    		width: 100% !important;
-    		padding-top: 0px;
-    		height: auto;
-		}
+        padding-top: 50px;
+
+        @media (max-width: 767px) {
+            width: 100% !important; padding-top: 0px; height: auto;
+        }
     }
+
     .left-column {
-		background-color: @sidebar-background;
-		border-right: 1px solid @lines;
-		overflow-x: hidden;
-	}
-	.right-column {
-		&.span9 {
-			width: 76.4866339334%;
-			margin-left: 0px;
-			@media (min-width: 1200px) {
-				width: 76.8866339334%;
-			}
-		}
-		.content-page {
-			padding: 20px;
-			min-height: 100%;
-			background-color: white;
-		}
-	}
+        background-color: @sidebar-background;
+        border-right: 1px solid @lines;
+        overflow-x: hidden;
+    }
+
+    .right-column {
+        &.span9 {
+            width: 76.4866339334%;
+            margin-left: 0px;
+
+            @media (min-width: 1200px) {
+                width: 76.8866339334%;
+            }
+        }
+
+        .content-page {
+            padding: 20px;
+            min-height: 100%;
+            background-color: white;
+        }
+    }
 }
+
 .content-area, .article-tree {
-    overflow:auto;
+    overflow: auto;
     height: 100%;
-	padding: 0px;
+    padding: 0px;
 }
 
 //mobile friendly sub-nav
 .responsive-collapse {
-	padding: 10px 15px;
-	display: none;
-	background-color: @lines;
-	border-bottom: 1px solid @lines;
-	@media (max-width: 767px) {
-		display: block;
-	}
+    padding: 10px 15px;
+    display: none;
+    background-color: @lines;
+    border-bottom: 1px solid @lines;
+
+    @media (max-width: 767px) {
+        display: block;
+    }
 }
+
 .sub-nav-collapse {
-	@media (max-width: 768px) {
-		display: none;
-	}
-	@media (min-width: 768px) {
-		display: block;
-	}
+    @media (max-width: 768px) {
+        display: none;
+    }
+
+    @media (min-width: 768px) {
+        display: block;
+    }
 }
 
 //CSS For Fluid Tables
 @media only screen and (max-width: 800px) {
 
-	/* Force table to not be like tables anymore */
-	table,
-	thead,
-	tbody,
-	th,
-	td,
-	tr {
-		display: block;
-		border: none;
-	}
+    /* Force table to not be like tables anymore */
+    table,
+    thead,
+    tbody,
+    th,
+    td,
+    tr {
+        display: block;
+        border: none;
+    }
 
-	/* Hide table headers (but not display: none;, for accessibility) */
-	thead tr {
-		position: absolute;
-		top: -9999px;
-		left: -9999px;
-	}
+        /* Hide table headers (but not display: none;, for accessibility) */
+        thead tr {
+            position: absolute;
+            top: -9999px;
+            left: -9999px;
+        }
 
-	tr {
-		margin-bottom: 10px;
-		border-bottom: 2px solid #ccc;
-		td, th {
-			border: 1px solid #ccc;
-			border-bottom:none;
-		}
-	}
+    tr {
+        margin-bottom: 10px;
+        border-bottom: 2px solid #ccc;
 
-	td {
-		/* Behave  like a "row" */
-		border: none;
-		border-bottom: 1px solid #eee;
-		position: relative;
-		padding-left: 50% !important;
-		white-space: normal;
-		text-align:left;
-	}
+        td, th {
+            border: 1px solid #ccc;
+            border-bottom: none;
+        }
+    }
 
-	td:before {
-		/* Now like a table header */
-		position: absolute;
-		/* Top/left values mimic padding */
-		top: 6px;
-		left: 6px;
-		width: 45%;
-		padding-right: 10px;
-		white-space: nowrap;
-		text-align:left;
-		font-weight: bold;
-	}
+    td {
+        /* Behave  like a "row" */
+        border: none;
+        border-bottom: 1px solid #eee;
+        position: relative;
+        padding-left: 50% !important;
+        white-space: normal;
+        text-align: left;
+    }
 
-	/*
-	Label the data
-	*/
-	td:before { content: attr(data-title); }
+        td:before {
+            /* Now like a table header */
+            position: absolute;
+            /* Top/left values mimic padding */
+            top: 6px;
+            left: 6px;
+            width: 45%;
+            padding-right: 10px;
+            white-space: nowrap;
+            text-align: left;
+            font-weight: bold;
+        }
+
+        /* Label the data */
+        td:before {
+            content: attr(data-title);
+        }
 }
diff --git a/less/import/tools.less b/less/import/tools.less
index 0b29022..2527b0b 100644
--- a/less/import/tools.less
+++ b/less/import/tools.less
@@ -3,31 +3,33 @@ Markdown editor
 ============================================================================================== */
 
 .editor {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	background: white;
-	padding: 20px;
-	padding-bottom: 100px;
-	min-height: 100%;
-	height: auto;
-	display: none;
-	h3 {
-		width: 100%!important;
-	}
-	&.paddingTop {
-		padding-top: 50px;
-	}
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: white;
+    padding: 20px;
+    padding-bottom: 100px;
+    min-height: 100%;
+    height: auto;
+    display: none;
+
+    h3 {
+        width: 100% !important;
+    }
+
+    &.paddingTop {
+        padding-top: 50px;
+    }
 }
 
 #markdown_editor {
-	width: 85%;
-	margin: 0 auto;
-	padding: 10px;
-	height: auto;
-	font-size: 16px;
-	min-height: 100px;
-	font-family: "Ubuntu Mono", "Consolas", monospace;
-	display: block;
+    width: 85%;
+    margin: 0 auto;
+    padding: 10px;
+    height: auto;
+    font-size: 16px;
+    min-height: 100px;
+    font-family: "Ubuntu Mono", "Consolas", monospace;
+    display: block;
 }