css of key

atoms/index.css

@@ -249,10 +249,28 @@ img {
 	color: #FF746B;
 }
 
+.key {
+	margin-left: 18%;
+	margin-bottom: -20%;
+	margin-top: 10%;
+}
+
+.keycolor {
+	width: 20%;
+	height: 10%;
+}
+
+.keyvalue {
+	line-height: 1em;
+	height: 5%;
+	width: 115%;
+	text-align: left;
+}
+
 .legendholder {
 	margin-bottom: -17%;
 	margin-top: 17%;
-	margin-left: 31%;
+	margin-left: 28%;
 }
 
 .legend {

atoms/index.html

@@ -13,7 +13,9 @@
 		<div class="sidebar elements">
 			<i class="fa fa-close"></i>
 			<div class="titleholder"></div>
-			<div class="legendholder"></div>
+			<div class="key">
+				<div class="legendholder"></div>
+			</div>
 		</div>
 		<div class="pulltab second"><p class="tDesc">Settings</p></div>
 		<div class="sidebar settings">

atoms/js/main.js

@@ -44,6 +44,6 @@ setTimeout(function mainFunc() {
 	update();
 	makeSettings();
 	tableDesc();
+	keyLegend();
 	createGradientLegend();
-	// keyLegend();
 }, 600);	

atoms/js/onload.js

@@ -50,13 +50,16 @@ function keyLegend() {
  	for (var i = 0; i < Object.keys(keyColors[index]).length; i++) {
  		var tr = tbl.insertRow();
  		var keycolor = tr.insertCell();
+ 		keycolor.className = "keycolor";
  		keycolor.style.backgroundColor = keyColors[index][Object.keys(keyColors[index])[i]];
 
  		var keyname = tr.insertCell();
  		keyvalue = document.createTextNode(Object.keys(keyColors[index])[i]);
  		keyname.appendChild(keyvalue);
+ 		keyname.className = "keyvalue";
+
  	};
- 	get("sidebar")[0].appendChild(tbl);
+ 	get("key").appendChild(tbl);
 
 }