- CSS: Add background, fix button style

4 files changed, 19 insertions, 15 deletions

diff --git a/index.css b/index.css
index 6291cff..1ac013c 100644
--- a/index.css
+++ b/index.css
@@ -69,7 +69,7 @@ pre {
   color: #e7417c;
 }
 .btn-Z {
-  margin-top: 1em;
+  margin: .5em 0;
   color: white;
   background-color: #999;
   border-color: #777777;
@@ -80,7 +80,7 @@ pre {
   border-color: #666666;
 }
 .btn-C {
-  margin-top: 1em;
+  margin: .5em 0;
   color: white;
   background-color: #c00000;
   border-color: #9e0000;
@@ -91,7 +91,7 @@ pre {
   border-color: #8d0000;
 }
 .btn-Db {
-  margin-top: 1em;
+  margin: .5em 0;
   color: white;
   background-color: #ff0000;
   border-color: #dd0000;
@@ -102,7 +102,7 @@ pre {
   border-color: #cc0000;
 }
 .btn-D {
-  margin-top: 1em;
+  margin: .5em 0;
   color: white;
   background-color: #e75b28;
   border-color: #c53906;
@@ -113,7 +113,7 @@ pre {
   border-color: #b42800;
 }
 .btn-Eb {
-  margin-top: 1em;
+  margin: .5em 0;
   color: white;
   background-color: #ff6400;
   border-color: #dd4200;
@@ -124,7 +124,7 @@ pre {
   border-color: #cc3100;
 }
 .btn-E {
-  margin-top: 1em;
+  margin: .5em 0;
   color: white;
   background-color: #969600;
   border-color: #747400;
@@ -135,7 +135,7 @@ pre {
   border-color: #636300;
 }
 .btn-F {
-  margin-top: 1em;
+  margin: .5em 0;
   color: white;
   background-color: #c8c800;
   border-color: #a6a600;
@@ -146,7 +146,7 @@ pre {
   border-color: #959500;
 }
 .btn-Gb {
-  margin-top: 1em;
+  margin: .5em 0;
   color: white;
   background-color: #64c000;
   border-color: #429e00;
@@ -157,7 +157,7 @@ pre {
   border-color: #318d00;
 }
 .btn-G {
-  margin-top: 1em;
+  margin: .5em 0;
   color: white;
   background-color: #00dc00;
   border-color: #00ba00;
@@ -168,7 +168,7 @@ pre {
   border-color: #00a900;
 }
 .btn-Ab {
-  margin-top: 1em;
+  margin: .5em 0;
   color: white;
   background-color: #0096c8;
   border-color: #0074a6;
@@ -179,7 +179,7 @@ pre {
   border-color: #006395;
 }
 .btn-A {
-  margin-top: 1em;
+  margin: .5em 0;
   color: white;
   background-color: #0000c8;
   border-color: #0000a6;
@@ -190,7 +190,7 @@ pre {
   border-color: #000095;
 }
 .btn-Bb {
-  margin-top: 1em;
+  margin: .5em 0;
   color: white;
   background-color: #9600be;
   border-color: #74009c;
@@ -201,7 +201,7 @@ pre {
   border-color: #63008b;
 }
 .btn-B {
-  margin-top: 1em;
+  margin: .5em 0;
   color: white;
   background-color: #e7417c;
   border-color: #c51f5a;
diff --git a/index.less b/index.less
index ac79cda..e1baf4a 100644
--- a/index.less
+++ b/index.less
@@ -76,7 +76,7 @@ pre {
 }
 
 .btn-Z(@color: #999){
-	margin-top: 1em;
+	margin: .5em 0;
 	color: white;
 	background-color: @color;
 	border-color: @color - #222;
diff --git a/index.php b/index.php
index 981ca6a..8431264 100755
--- a/index.php
+++ b/index.php
@@ -11,6 +11,7 @@ index.php contains the main html used for creating the page.
 			crossorigin="anonymous">
 
 		<link rel="stylesheet" href="index.css" >
+		<link rel="stylesheet" href="theme.css" >
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=.65">
 		<title>Choruses and Hymns</title>
@@ -27,7 +28,7 @@ index.php contains the main html used for creating the page.
 			<input name='song' type='number' value='<?php echo isset($_GET['song']) ? $_GET['song'] : '' ?>'
 			min='0' max='169'
 			/>
- 			<input type="submit" value="Jump to song" />
+			<input class="btn btn-Z" type="submit" value="Jump to song" />
 		</form>
 	</div>
 
diff --git a/theme.css b/theme.css
new file mode 100644
index 0000000..3de5a92
--- /dev/null
+++ b/theme.css
@@ -0,0 +1,3 @@
+body {
+	background-color: #CCDDFF;
+}