diff --git a/punch_list/public/css/custom-large.css b/punch_list/public/css/custom-large.css
new file mode 100644
index 0000000..679bcbe
--- /dev/null
+++ b/punch_list/public/css/custom-large.css
@@ -0,0 +1,82 @@
+/* Larger than tablet */
+@media (min-width: 750px) {
+.progress-wrapper { width: 20%; float:left; text-align:left;}
+#neededBy { display: block; }
+#whoami { width: 100%; }
+.needby-container { width: 22%; float: left; text-align: center; }
+.tags-summary { display: block; font-size: 1em; margin-left: 10px; }
+a.tags-summary { color: #00BFFF; text-decoration: none; float:left;}
+a.tags-summary:hover { color: #00FFFF; text-shadow: 0px 0px 23px #FFF; }
+.tags-details { display: none; }
+.subject {
+	overflow: hidden;
+	width: 70%;
+  float: left;
+  color: #FFF;
+  font-size: 2rem;
+  font-weight: 900; }
+.column-left {
+	display: none;
+	margin-top: 100px;
+	margin-left: auto;
+	width: 30%;
+	height: 99%;
+	background-color: #000;
+	overflow: hidden;
+	float: left;
+	border-right: 3px solid #000;
+}
+.column-right { display: none; width: 10%; overflow: hidden; float: left;}
+.column-middle { display: block; width: 55%; overflow: visible; margin-left:auto; margin-right:auto;}
+/* Navbar */
+.clock-wrapper {
+  display: block;
+  min-width: 50px; }
+.clock {
+  display: block;
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #AAA;
+  padding: 5px;
+  margin-bottom: 0px; }
+.navbar,
+.navbar-spacer {
+  display: block;
+  width: 100%;
+  height: 6.5rem;
+  background: #222;
+  z-index: 99;
+  border-top: 0px solid #eee;
+  border-bottom: 1px solid #eee; }
+.navbar-spacer {
+  display: none; }
+.navbar > .container {
+  width: 100%; }
+.navbar-list {
+  list-style: none;
+  margin-bottom: 0; }
+.navbar-item {
+  position: relative;
+  float: left;
+  margin-bottom: 0; }
+.navbar-link {
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: .2rem;
+  margin-right: 35px;
+  text-decoration: none;
+  line-height: 6.5rem;
+  color: #222; }
+.navbar-link.active {
+  color: #33C3F0; }
+.has-docked-nav .navbar {
+  position: fixed;
+  top: 0;
+  left: 0; }
+.has-docked-nav .navbar-spacer {
+  display: block; }
+/* Re-overiding the width 100% declaration to match size of % based container */
+.has-docked-nav .navbar > .container {
+  width: 80%; }
+}
diff --git a/punch_list/public/css/custom-medium.css b/punch_list/public/css/custom-medium.css
new file mode 100644
index 0000000..01fca90
--- /dev/null
+++ b/punch_list/public/css/custom-medium.css
@@ -0,0 +1,53 @@
+/* Larger than phone */
+@media (min-width: 550px) {
+.progress-wrapper { width: 20%; float:left; text-align:left;}
+#neededBy { display: block; }
+.subject {
+	overflow: hidden;
+	width: 70%;
+  float: left;
+  color: #FFF;
+  font-size: 2rem;
+  font-weight: 900; }
+  .button {
+		padding: 0px;
+		text-align: center;
+		text-decoration: none;
+		font-size: 1rem;
+		vertical-align: middle;
+		border: 1px solid #333;
+		background-color:  #4CAF50;
+		margin-top: auto;
+		margin-bottom: auto;
+		margin-left: auto;
+		margin-right: auto;
+		width: 20%;
+		height: 40px;
+		float: right;}
+  .nav-button {
+		vertical-align: middle;
+    float: right }
+  .two-thirds.column { width: 68.8%; }
+  .column,
+  .columns {
+    background: transparent;
+    margin-left: 3px; }
+  .clock-wrapper {
+    display: block;
+    min-width: 50px;
+  }
+  .clock {
+    display: block;
+    font-size: 1.8rem;
+    font-weight: 600;
+    color: #AAA;
+    padding: 5px;
+    margin-bottom: 0px; }
+  .header {
+    background-color: #666;
+    text-align: center;
+    margin-top: 6rem; }
+  .punches {
+    text-align: left; }
+}
+
diff --git a/punch_list/public/css/custom.css b/punch_list/public/css/custom.css
index 16081f1..f34d590 100644
--- a/punch_list/public/css/custom.css
+++ b/punch_list/public/css/custom.css
@@ -1,9 +1,12 @@
+/* Mobile first */
+/* and generic stuff */
+.progress-wrapper { width: 40%; float: left; text-align: left; }
 #neededBy { display: none; }
 #whoami { width: 100%; }
+.needby-container { width: 35%; float: left; text-align: center; }
 .button:hover { color: #ddd; }
 button:hover { color: #ddd; }
 .dropdown.menu { float:right; margin-right: 15px;}
-.needby-container { width: 22%; float: left; text-align: center; }
 .details-container { width: 70%; }
 .priority-container { width: 20%; float:left; width:10%;}
 .priority { min-width:50px; color:steel; font-size: 35px; font-weight: 900; }
@@ -20,6 +23,12 @@ a.tags-details:hover { color: #00FFFF; text-shadow: 0px 0px 23px #FFF; }
   color: #FFF;
   font-size: 1.5rem;
   font-weight: 900; }
+body {
+	width: 90%;
+	margin-left: auto;
+	margin-right: auto;
+  background: #222;
+  color: #AAA; }
 .column-left { display: none; }
 .column-right { display: none; }
 .column-middle { width: 100%; overflow: auto; background: #333; padding-bottom: 200px; margin-left: auto; margin-right: auto;}
@@ -85,12 +94,6 @@ i {
 .edit-row { padding-top: 5px; }
 .edit-text-box { width: 100%; min-height: 200px; font-size: 12px; }
 .ui-widget textarea { font-size: 12px; }
-body {
-	width: 90%;
-	margin-left: auto;
-	margin-right: auto;
-  background: #222;
-  color: #AAA; }
 textarea {
 	font-size: 12px;
 	background: #111;
@@ -285,153 +288,3 @@ textarea {
 .punches {
   text-align: left; }
 
-/* Larger than phone */
-@media (min-width: 550px) {
-#neededBy { display: block; }
-.subject {
-	overflow: hidden;
-	width: 70%;
-  float: left;
-  color: #FFF;
-  font-size: 2rem;
-  font-weight: 900; }
-  .button {
-		padding: 0px;
-		text-align: center;
-		text-decoration: none;
-		font-size: 1rem;
-		vertical-align: middle;
-		border: 1px solid #333;
-		background-color:  #4CAF50;
-		margin-top: auto;
-		margin-bottom: auto;
-		margin-left: auto;
-		margin-right: auto;
-		width: 20%;
-		height: 40px;
-		float: right;}
-  .nav-button {
-		vertical-align: middle;
-    float: right }
-  .two-thirds.column { width: 68.8%; }
-  .column,
-  .columns {
-    background: transparent;
-    margin-left: 3px; }
-  .clock-wrapper {
-    display: block;
-    min-width: 50px;
-  }
-  .clock {
-    display: block;
-    font-size: 1.8rem;
-    font-weight: 600;
-    color: #AAA;
-    padding: 5px;
-    margin-bottom: 0px; }
-  .header {
-    background-color: #666;
-    text-align: center;
-    margin-top: 6rem; }
-  .punches {
-    text-align: left; }
-}
-
-/* Larger than tablet */
-@media (min-width: 750px) {
-	#neededBy { display: block; }
-.tags-summary { display: block; font-size: 1em; margin-left: 10px; }
-a.tags-summary { color: #00BFFF; text-decoration: none; float:left;}
-a.tags-summary:hover { color: #00FFFF; text-shadow: 0px 0px 23px #FFF; }
-.tags-details { display: none; }
-.subject {
-	overflow: hidden;
-	width: 70%;
-  float: left;
-  color: #FFF;
-  font-size: 2rem;
-  font-weight: 900; }
-  body { margin-left: auto;
-		margin-right: auto;
-		width: 90%; }
-	.column-left {
-		display: none;
-		margin-top: 100px;
-		margin-left: auto;
-		width: 30%;
-		height: 99%;
-		background-color: #000;
-		overflow: hidden;
-		float: left;
-		border-right: 3px solid #000;
-	}
-	.column-right { display: none; width: 10%; overflow: hidden; float: left;}
-	.column-middle { display: block; width: 55%; overflow: visible; margin-left:auto; margin-right:auto;}
-  /* Navbar */
-  .clock-wrapper {
-    display: block;
-    min-width: 50px; }
-  .clock {
-    display: block;
-    font-size: 1.8rem;
-    font-weight: 600;
-    color: #AAA;
-    padding: 5px;
-    margin-bottom: 0px; }
-  .navbar,
-  .navbar-spacer {
-    display: block;
-    width: 100%;
-    height: 6.5rem;
-    background: #222;
-    z-index: 99;
-    border-top: 0px solid #eee;
-    border-bottom: 1px solid #eee; }
-  .navbar-spacer {
-    display: none; }
-  .navbar > .container {
-    width: 100%; }
-  .navbar-list {
-    list-style: none;
-    margin-bottom: 0; }
-  .navbar-item {
-    position: relative;
-    float: left;
-    margin-bottom: 0; }
-  .navbar-link {
-    text-transform: uppercase;
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: .2rem;
-    margin-right: 35px;
-    text-decoration: none;
-    line-height: 6.5rem;
-    color: #222; }
-  .navbar-link.active {
-    color: #33C3F0; }
-  .has-docked-nav .navbar {
-    position: fixed;
-    top: 0;
-    left: 0; }
-  .has-docked-nav .navbar-spacer {
-    display: block; }
-  /* Re-overiding the width 100% declaration to match size of % based container */
-  .has-docked-nav .navbar > .container {
-    width: 80%; }
-}
-@media (min-width: 1500px) {
-	.column-left {
-		display: none;
-		margin-top: 100px;
-		margin-left: auto;
-		width: 20%;
-		height: 99%;
-		background-color: #000;
-		overflow: hidden;
-		float: left;
-		border-right: 3px solid #000;
-	}
-	.column-middle { display: block; width: 50%; overflow: hidden; margin-left:auto;margin-right:auto;}
-	.column-right { display: none; width: 25%; overflow: hidden; float: left; padding-top: 100px;}
-	#events-list { background-color: #000; }
-}
diff --git a/punch_list/public/index.html b/punch_list/public/index.html
index 677817e..6fb789f 100644
--- a/punch_list/public/index.html
+++ b/punch_list/public/index.html
@@ -37,6 +37,8 @@
 		<link rel="stylesheet" href="css/normalize.css">
 		<link rel="stylesheet" href="css/skeleton.css">
 		<link rel="stylesheet" href="css/custom.css">
+		<link rel="stylesheet" href="css/custom-medium.css">
+		<link rel="stylesheet" href="css/custom-large.css">
 		<!-- scripts -->
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
diff --git a/punch_list/public/js/myFirebase.js b/punch_list/public/js/myFirebase.js
index 9bb99eb..877a92a 100644
--- a/punch_list/public/js/myFirebase.js
+++ b/punch_list/public/js/myFirebase.js
@@ -477,7 +477,7 @@ function addPunchElement(childKey, childData) {
 		genPunchListItem('<div id="details-container' + childKey + '" class="container details-container"></div>', '#div-portlet' + childKey);
 		genPunchListItem('<div id="priority' + childKey + '" class="twelve columns priority">' + childData.priority + '</div>', '#priority-container' + childKey);
 		genPunchListItem('<div id="subject' + childKey + '" class="subject">' + childData.subject + '</div><div id="detail-link' + childKey + '" class="two columns u-pull-right"><a style="margin-left: 10px;" class="punch-default u-pull-right" href="#" onclick=toggleElement(\'backlog-list-content' + childKey + '\')>details</a></div>', '#details-container' + childKey);
-		genPunchListItem('<div id="details-col-one' + childKey + '" class="three columns"></div>', '#details-container' + childKey);
+		genPunchListItem('<div id="details-col-one' + childKey + '" class="progress-wrapper"></div>', '#details-container' + childKey);
 		genPunchListItem('<div id="progress' + childKey +'" class="twelve columns ' + style + '">' + childData.progress + '</div>', '#details-col-one' + childKey);
 		genPunchListItem('<div class="twelve columns punch-default" style="color: lime" id="timer' + childKey + '"></div>', '#details-col-one' + childKey);
 		// status dropdown