Finalized Styling of blocks and buttons

Added the styling for all blocks and interaction with button. Could not get the smooth scroll to work. Will need to research more.

css/appstyling-v2.css

@@ -36,6 +36,10 @@ h2 {
 	line-height: 28px;
 }
 
+a {
+	text-decoration: none;
+}
+
 
 .b-header{
 	height: 24vh;
@@ -129,7 +133,6 @@ p.subheading {
 	text-align: center;
 	background-color: #8C8E90;
 	border-bottom: 16px solid #FF6600;
-	overflow:auto;
 	box-sizing: border-box;
 	padding-top: 2%
 }
@@ -225,7 +228,8 @@ label {
 	border: 2px solid #FF6600;
 	border-radius: 4px;
 	background-color: #CCFF00;
-	box-shadow: 0 3px 6px 0 rgba(0,0,0,0.23), 0 3px 6px 0 rgba(0,0,0,0.16);
+	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
 	color: #5A5A5C;
 	font-family: Roboto;
 	font-size: 14px;
@@ -235,6 +239,18 @@ label {
 	text-align: center;
 }
 
+input.input-calculate:active{
+	border: 2px solid #CCFF00;
+	border-radius: 4px;
+	background-color: #FF6600;
+	color: #FFFFFF;
+	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+}
+
+input.input-calculate:focus{
+	outline-style: none;
+}
+
 .b-infoentry__dividerheading{
 	display: block;
     margin: 16px auto;
@@ -259,6 +275,10 @@ label {
 	height: auto;
 }
 
+.b-options__weightmanipulators{
+	padding-top: 2%;
+}
+
 .b-options__inputcontainer{
 	width: 100%;
 	color: #FCFCFC;
@@ -270,7 +290,7 @@ label {
 	height: auto;
 	overflow: visible;
 	text-align: center;
-	padding-top: 16px;
+	padding-top: 2%;
 }
 
 .b-options__optionsinput{
@@ -284,7 +304,7 @@ label {
 
 .input-bar{
 	height: 33px;
-    width: 130px;
+    width: 142px;
     border-radius: 4px;
     background-color: #D8D8D8;
     color: #48484A;
@@ -294,11 +314,11 @@ label {
     font-weight: 500;
     letter-spacing: 0.75px;
     line-height: 20px;
-    margin-right: 5px;
+    margin-right: 6px;
 }
 .input-percentage{
 	height: 38px;
-    width: 130px;
+    width: 142px;
     border-radius: 4px;
     background-color: #D8D8D8;
     color: #48484A;
@@ -310,6 +330,47 @@ label {
     line-height: 20px;
     margin-right: 0px;
 }
+
+.b-options__platesavailable{
+	height: 50%;
+	text-align: center;
+	background-color: #8C8E90;
+	padding: 2% 0px;
+	color: #FFFFFF;
+}
+
+input.input-weightsavailable{
+	width: 100%;
+	font-family: "Zilla Slab";
+	font-size: 14px;
+	font-style: italic;
+	font-weight: 500;
+	letter-spacing: 0.75px;
+	line-height: 20px;
+	text-align: center;
+	width: 41px;
+	height: 33px;
+	padding: 0px;
+	background-color: #D8D8D8;
+	color: ##48484A;
+}
+
+.b-returntop{
+	position: relative;
+	width: 100%;
+	background-color: #CCFF00;
+	box-shadow: 0 6px 6px 0 rgba(0,0,0,0.26), 0 10px 20px 0 rgba(0,0,0,0.19);
+	z-index: 500;
+	padding: 1vh 0px;
+	min-height: 64px;
+	color: #48484A; 
+	text-align: center;
+}
+
+.b-returnTop_heading{
+	color: #48484A;
+}
+
 /*
 .b-container {
 

css/main.css

@@ -265,7 +265,7 @@ input[type="url"]:focus,
 input[type="password"]:focus,
 textarea:focus,
 select:focus {
-  border: 1px solid #33C3F0;
+  border: 1px solid #CCFF00;
   outline: 0; }
 label,
 legend {