1 files changed, 34 insertions, 31 deletions

diff --git a/static/styles.css b/static/styles.css
index d46a8d2..06cb18a 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -35,10 +35,6 @@ a:hover {
 	font-weight: bold;
 }
 
-div {
-    margin-bottom: 10px;
-}
-
 form {
 	border: 1px DarkSlateGrey solid;
     padding: 10px;
@@ -50,80 +46,87 @@ form {
     margin-right: 6px;
 }
 
-.ingredient {
-    display: inline-block;
-    margin-right: 5px;
-    margin-bottom: 5px;
-}
-
 button {
     margin-right: 10px;
 }
 
 .box {
-    width: 35px;
-    height: 35px;
+	display: inline-block;
+    width: 40px;
+    height: 40px;
     text-align: center;
     font-weight: bold;
     font-size: 22px;
     border: 2px lightgrey solid;
     margin-right: 0px;
     margin-left: 0px;
-    text-transform: uppercase;
 	color: black;
-	box-sizing: border-box;
-	caret-color: transparent;
-	outline:0px none transparent;
-	/* appearance: none; */
-	/* -moz-appearance: none; */
+	background-color: white;
+	vertical-align: top;
+	line-height: 39px;
+	font-family: Cantarell;
 }
-.box:focus {
+.focus {
 	background-color: #fff079;
 }
-.box::selection {
-	color: none;
-	background: none;
-}
 .syllable .box:not(:first-child) {
 	margin-left: -1px;
+	border-left-style: dotted;
 }
 .syllable .box:not(:last-child) {
 	margin-right: -1px;
+	border-right-style: dotted;
+}
+.word .syllable:not(:first-child) {
+	margin-left: -1px;
+}
+.word .syllable:not(:last-child) {
+	margin-right: -1px;
+}
+.syllable.stress + .syllable .entrybox:first-child {
+	border-left-color: darkslategrey;
+}
+.stress {
+	z-index: 9999;
 }
 
 .syllable {
-    display: inline;
+    display: inline-block;
 }
 .syllable-sep {
-    display: inline;
+    display: inline-block;
     font-size: 30px;
     margin: 1px;
 }
 .word {
     display: inline-block;
     margin-right: 40px;
-	margin-bottom: 7px;
+	margin-bottom: 5px;
+}
+.line {
+	margin-bottom: 15px;
 }
 
-.stress>.box {
+.stress>.entrybox {
     border-color: darkslategrey;
-	/* background-color: lightcyan; */
 }
 
 .green {
 	background-color: rgb(106, 170, 100);
 	color: white;
-	border: 0;
+	border-color: rgb(106, 170, 100);
 }
 .yellow {
 	background-color: rgb(201, 180, 88);
 	color: white;
-	border: 0;
+	/* border: 0; */
+	border-color: rgb(201,180,88);
 }
 .grey {
 	background-color: rgb(120, 124, 126);
 	color: white;
-	border: 0;
+	/* border: 0; */
+	border-color: rgb(120,124,126);
 }
 
 hr {