1 files changed, 47 insertions, 49 deletions

diff --git a/static/styles.css b/static/styles.css
index 14d27d0..11a4cbb 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,85 +1,54 @@
-button {
-    margin-right: 10px;
-}
-
 .box {
 	display: inline-block;
-    width: 25px;
-    height: 25px;
+    width: 30px;
+    height: 30px;
     text-align: center;
     font-weight: bold;
-    font-size: 14px;
-    border: 2px lightgrey solid;
+    font-size: 18px;
+    border: 1px DarkSlateGrey solid;
     margin-right: 0px;
     margin-left: 0px;
 	color: black;
 	background-color: white;
 	vertical-align: top;
-	line-height: 25px;
+	line-height: 29px;
 	font-family: Cantarell;
 }
 
 .focus {
-	background-color: #fff079;
+	background-color: #ffda00
 }
 
-.syllable .box:not(:first-child) {
+.word :not(:first-child) {
 	margin-left: -1px;
-	border-left-style: dotted;
 }
 
-.syllable .box:not(:last-child) {
+.word :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-block;
-}
-.syllable-sep {
-    display: inline-block;
-    font-size: 30px;
-    margin: 1px;
-}
 .word {
     display: inline-block;
-    margin-right: 40px;
+    margin-right: 20px;
 	margin-bottom: 5px;
 }
+
 .line {
 	margin-bottom: 15px;
 }
 
-.stress>.entrybox {
-    border-color: darkslategrey;
-}
-
 .green {
 	background-color: rgb(106, 170, 100);
 	color: white;
 	border-color: rgb(106, 170, 100);
 }
+
 .yellow {
 	background-color: rgb(201, 180, 88);
 	color: white;
 	border-color: rgb(201,180,88);
 }
+
 .grey {
 	background-color: rgb(120, 124, 126);
 	color: white;
@@ -113,11 +82,6 @@ hr {
 }
 
 @media only screen and (min-width: 600px) {
-    .keyboard {
-        border: 1px darkslategrey dotted;
-        border-radius: 4px;
-        padding: 1.2em;
-    }
     form {
         border: 1px DarkSlateGrey solid;
         padding: 1em;
@@ -136,8 +100,42 @@ hr {
 	height: 35px;
 	width: 26px;
 	border-radius: 4px;
-	border: 1px black solid;
+	border: 1px black dotted;
 	line-height: 33px;
 	cursor: pointer;
 	user-select: none;
 }
+.key:hover{
+    border-style:solid;
+}
+
+.greenkey {
+	background-color: rgb(106, 170, 100);
+	color: white;
+	border-color: rgb(106, 170, 100);
+}
+
+.yellowkey {
+	background-color: rgb(201, 180, 88);
+	color: white;
+	border-color: rgb(201,180,88);
+}
+
+.greykey {
+	background-color: rgb(120, 124, 126);
+	color: white;
+	border-color: rgb(120,124,126);
+}
+}
+
+/* .key:hover { */
+/*     background-color: #f7edd6; */
+/* } */
+
+.scansion {
+    font-size: 90%;
+}
+
+.scansion-box {
+	margin-bottom: .3em;
+}