Fixed all known bugs; Modified the menu to hide; Fixed the tables to scroll with a fixed header.

imports/ui/UserManagement.import.styl

@@ -1,19 +1,31 @@
 #userManagement
-	margin: 20px 20px
+	display: table
+	content-box: border-box
+	padding: 10px 20px
 	height: 100%
-	//Flex container options.
-	flex-flow: column nowrap
-	justify-content: space-around  //Spacing between sales along the primary axis.  (vertical spacing for a column layout)
-	align-items: flex-start  //Align the sales within a line along the primary axis.  (horizontal alignment for a column layout)
-	align-content: center  //Spacing between lines along the secondary axis.  (spacing between columns for a column layout)
-	display: -webkit-box
-	display: -moz-box
-	display: -ms-flexbox
-	display: -moz-flex
-	display: -webkit-flex
-	display: flex
+	width: 100%
 	text-align: left
 
+	.tableControls
+		display: table
+		width: 100%
+		text-align: right
+		margin-right: 20px
+		.contentControls
+			vertical-align: bottom
+			display: table-cell
+			text-align: right
+			min-width: 100px
+			a
+				font-size: 12px
+				font-family: "Arial", san-serif
+				font-weight: 800
+				color: #2d1b8c
+				text-decoration: none
+			a:hover
+				text-decoration: underline
+			a.disabled
+				visibility: hidden
 	.editor
 		height: 100%
 		overflow-y: auto
@@ -33,34 +45,80 @@
 			font-style: normal
 			font-variant: normal
 			font-weight: 500
-	.tableContainer
-		width: 100%
-		height: 100%
-		margin-top: 20px
-		margin-bottom: 20px
-		border: 0
-		font-size: 12.5px
-		table
-			table-layout: fixed
+	.table
+		table-layout: fixed
+		min-width: 100%
+		thead, tbody
+			> tr
+				> .username
+					width: 50%
+					min-width: 100px
+				> .email
+					width: 50%
+					min-width: 100px
+				> .roles
+					width: 260px
+					min-width: 260px
+				> .actions
+					width: 80px
+					min-width: 80px
+	.separatedTableHeader
+		.actions
+			text-align: center
+			.newUserButton
+				margin-top: 4px
+				padding: 0 12px
+				.fa-plus-circle
+					display: inline-block
+				.fa-times-circle
+					display: none
+			.newUserButton.active
+				background-color: #fb557b
+				color: black
+				.fa-times-circle
+					display: inline-block
+				.fa-plus-circle
+					display: none
+	.listRow
+		display: table-row
+		.listCell
+			display: table-cell
+			position: relative
+			height: 100%
 			width: 100%
-			thead
-				> tr
-					> th.username
-						width: auto
-					> th.email
-						width: auto
-					> th.roles
-						width: 260px
-					> th.actions
-						width: 80px
-			.userRemove
-				color: red
-			.userEdit
-				color: darkblue
-			.editorApply
-				color: green
-			.editorCancel
-				color: red
+			.tableContainer
+				position: absolute
+				top: 0
+				bottom: 0
+				left: 0
+				right: 0
+				width: auto
+				height: auto
+				border: 0
+				font-size: 12.5px
+				overflow-y: auto
+				table
+					table-layout: fixed
+					width: 100%
+					thead
+						display: none
+						visibility: hidden
+					.userRemove
+						color: red
+					.userEdit
+						color: darkblue
+					.editorApply
+						color: green
+					.editorCancel
+						color: red
+					.userEditor > div
+						display: table
+						> div
+							display: table-cell
+							padding: 10px
+						.roles
+							.role
+								vertical-align: middle
 	td.roles
 		.role
 			padding: 4px 4px