hover effect for colophon

static/css/main.css

@@ -42,7 +42,7 @@ sup#fn54, sup#fn38, sup#fn66 {
 }
 
 #howto sup a, #insert sup a  {
-  color: #8048b7;
+  color: #a99f88;
 }
 
 .main {
@@ -482,7 +482,8 @@ button#listoffiles:hover {
 
 
 button#about {
-  background: #f0f0f0;
+  /* background: #f0f0f0; */
+  background: #ec4e1e;
   border-radius: 100%;
   padding: 2em 0.9em;
   z-index: 3;
@@ -518,7 +519,7 @@ button.download {
 #intro, #howto, #insert {
   overflow-y: scroll;
   position: fixed;
-  display: none;
+  /* display: none; */
 }
 
 #insert, #howto {
@@ -542,28 +543,29 @@ button.download {
   cursor: pointer;
   position: fixed;
   font-weight: bold;
-  padding: 0 0.3em 0.3em 0.3em;
-  border-radius: 50%;
+  padding: 0 0.15em 0.25em 0.15em;
+  /* border-radius: 50%; */
   margin: 0.5em;
-  background: #1c1c1c;
+  /* background: #1c1c1c; */
+  font-size: 1.2em;
+  color:  #020202;
 }
 
-#closehowto, #closeinsert {
-  color: #f0f0f0;
+/* #closehowto, #closeinsert {
+  color: #020202;
 }
 
 #closeintro {
-  color: #a99f89;
-}
+  color: #020202;
+} */
 
 #closehowto:hover, #closeinsert:hover {
-  background: #f0f0f0;
-  color: #1c1c1c;
+  /* background: #f0f0f0; */
+  color: #a99f89;
 }
 
 #closeintro:hover {
-  background: #a99f89;
-  color: #1c1c1c;
+  color: #f0f0f0;
 }
 
 

templates/layout.html

@@ -303,7 +303,7 @@ var flag = true;
 
 
 //ABOUT TEXT + INSERT TEXT
-      var introflag = true;
+      var introflag = false;
       $("#about").click(function(){
         if (introflag === true) {
           $("#insert").css("display","block");