Update the configurator input to make it more clear

Helios/Views/Configurator/Index.cshtml

@@ -12,10 +12,11 @@
 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" })
 
+    <div class="input-border">
         <h5>Roof #1</h5>
 
         <div class="form-group">
-        @Html.LabelFor(model => model.Roofs[0].Area, htmlAttributes: new { @class = "control-label col-md-2" })
+            @Html.LabelFor(model => model.Roofs[0].Area, htmlAttributes: new { @class = "control-label col-md-3" })
             <div class="col-md-10">
                 @Html.EditorFor(model => model.Roofs[0].Area, new { htmlAttributes = new { @class = "form-control" } })
                 @Html.ValidationMessageFor(model => model.Roofs[0].Area, "", new { @class = "text-danger" })
@@ -23,17 +24,19 @@
         </div>
 
         <div class="form-group">
-        @Html.LabelFor(model => model.Roofs[0].Elevation, htmlAttributes: new { @class = "control-label col-md-2" })
+            @Html.LabelFor(model => model.Roofs[0].Elevation, htmlAttributes: new { @class = "control-label col-md-3" })
             <div class="col-md-10">
                 @Html.EditorFor(model => model.Roofs[0].Elevation, new { htmlAttributes = new { @class = "form-control" } })
                 @Html.ValidationMessageFor(model => model.Roofs[0].Elevation, "", new { @class = "text-danger" })
             </div>
         </div>
+    </div>
 
+    <div class="input-border">
         <h5>Roof #2</h5>
 
         <div class="form-group">
-        @Html.LabelFor(model => model.Roofs[1].Area, htmlAttributes: new { @class = "control-label col-md-2" })
+            @Html.LabelFor(model => model.Roofs[1].Area, htmlAttributes: new { @class = "control-label col-md-3" })
             <div class="col-md-10">
                 @Html.EditorFor(model => model.Roofs[1].Area, new { htmlAttributes = new { @class = "form-control" } })
                 @Html.ValidationMessageFor(model => model.Roofs[1].Area, "", new { @class = "text-danger" })
@@ -41,17 +44,19 @@
         </div>
 
         <div class="form-group">
-        @Html.LabelFor(model => model.Roofs[1].Elevation, htmlAttributes: new { @class = "control-label col-md-2" })
+            @Html.LabelFor(model => model.Roofs[1].Elevation, htmlAttributes: new { @class = "control-label col-md-3" })
             <div class="col-md-10">
                 @Html.EditorFor(model => model.Roofs[1].Elevation, new { htmlAttributes = new { @class = "form-control" } })
                 @Html.ValidationMessageFor(model => model.Roofs[1].Elevation, "", new { @class = "text-danger" })
             </div>
         </div>
+    </div>
 
+    <div class="input-border">
         <h5>Energy Information</h5>
 
         <div class="form-group">
-        @Html.LabelFor(model => model.PowerRequired, htmlAttributes: new { @class = "control-label col-md-2" })
+            @Html.LabelFor(model => model.PowerRequired, htmlAttributes: new { @class = "control-label col-md-3" })
             <div class="col-md-10">
                 @Html.EditorFor(model => model.PowerRequired, new { htmlAttributes = new { @class = "form-control" } })
                 @Html.ValidationMessageFor(model => model.PowerRequired, "", new { @class = "text-danger" })
@@ -59,7 +64,7 @@
         </div>
 
         <div class="form-group">
-        @Html.LabelFor(model => model.MaximumPower, htmlAttributes: new { @class = "control-label col-md-2" })
+            @Html.LabelFor(model => model.MaximumPower, htmlAttributes: new { @class = "control-label col-md-3" })
             <div class="col-md-10">
                 @Html.EditorFor(model => model.MaximumPower, new { htmlAttributes = new { @class = "form-control" } })
                 @Html.ValidationMessageFor(model => model.MaximumPower, "", new { @class = "text-danger" })
@@ -67,16 +72,16 @@
         </div>
 
         <div class="form-group">
-        @Html.LabelFor(model => model.Budget, htmlAttributes: new { @class = "control-label col-md-2" })
+            @Html.LabelFor(model => model.Budget, htmlAttributes: new { @class = "control-label col-md-3" })
             <div class="col-md-10">
                 @Html.EditorFor(model => model.Budget, new { htmlAttributes = new { @class = "form-control" } })
                 @Html.ValidationMessageFor(model => model.Budget, "", new { @class = "text-danger" })
             </div>
         </div>
-
+        </div>
         <div class="form-group">
             <div class="col-md-offset-2 col-md-10">
-            <input type="submit" value="Create" class="btn btn-default" />
+                <input type="submit" value="Submit" class="btn btn-primary" />
             </div>
         </div>
     </div>

Helios/wwwroot/css/site.css

@@ -16,3 +16,11 @@ html {
 body {
   margin-bottom: 60px;
 }
+
+.input-border {
+    border: gray;
+    border-style: solid;
+    border-radius: 10px;
+    padding: 20px;
+    margin-bottom: 20px;
+}