view btns

static/title.css

@@ -11,7 +11,7 @@ body {
   	top: 25%;
 	  width: 82%;
 	  height: auto;
-	  right: 8%;
+	  left: 7%;
   	text-align: : center;
   	z-index: 5;
 
@@ -32,33 +32,32 @@ body {
 
 /*links*/
 
-a:link {
+/*a:link {
   text-decoration: none;
-  color: black;
+  color: #371F10;
 }
 
 a:visited {
   text-decoration: none;
-  color: black;
+  color: #371F10;
 }
 
 a:hover {
 	text-decoration: none;
   	color: blue;
-}
+}*/
 
 
 h1 {
-	position: fixed;
+	/*position: fixed;
 	right:0%;
 	top:5%;
 	text-align: right;
 	background-color: rgba(11,239,235,0.7);
 	padding: 3px 35px 3px 10px;
 	z-index: 10;
-	color: black;
 	font-size: 27px;
-	color: #371F10;
+	color: #371F10;*/
   max-width: 90%;
 }
 
@@ -71,29 +70,27 @@ h2{
 	padding: 3px 35px 3px 10px;
 	z-index: 10;
 	font-size: 20px;
-  /*	opacity: 0.7;*/
-  	color: #371F10;
+  color: #371F10;
 }
 
 .viewnav {
 	position: fixed;
-	bottom: 0%;
-	left: 0%;
+	bottom: 1%;
+	right: 1%;
 	background-color: transparent;
-	width: 10%;
-	z-index: 10;
-	opacity: 0.7;
+	width: 5%;
+	z-index: 9;
 }
 
 .collapsible2 {
-  	background-color: transparent;
-	color: red;
+  background-color: transparent;
+	color: #371F10;
 	cursor: pointer;
 	padding: 0px;
 	width: 100%;
 	height: auto;
 	border: none;
-	text-align: left;
+	text-align: center;
 	outline: none;
 	font-size: 40px;
 	z-index: 10;
@@ -109,19 +106,19 @@ h2{
   position: absolute;
   max-height: 0;
   overflow: hidden;
-  width: 100%;
+  width: auto;
   transition: max-height 0.3s ease-out;
   background-color: transparent;
   color: white;
   z-index: 10;
   text-align: center;
-  bottom: 50%;
+  bottom: 100%;
 }
 
 
 /* Grid buttons */
 
-.header {
+/*.header {
 	
 	position: absolute;
   	text-align: center;
@@ -132,35 +129,51 @@ h2{
   	width: auto;
   	height: auto;
   	background-color: pink;
-}
+}*/
 
 p {
 	display: inline-block;
 	position: relative;
 }
 
+.btnov {
+  border: none;
+  outline: none;
+  width: 110px;
+  text-align: center;
+  padding: 0px 0px;
+  background-color: transparent;
+  cursor: pointer;
+  font-size: 20px;
+  margin-right: 5px;
+  z-index: 9;
+  color: #371F10;
+
+
+}
+
 .btn {
   border: none;
   outline: none;
   width: 110px;
   text-align: center;
-  padding: 12px 0px;
+  padding: 0px 0px;
   background-color: transparent;
   cursor: pointer;
-  font-size: 18px;
+  font-size: 30px;
   margin-right: 5px;
   z-index: 9;
-  border: solid 1px;
+  color: #371F10;
+
 }
 
 .btn:hover {
-  background-color: black;
-  color: blue;
+  color:rgba(11,239,235);
+/*  color: blue;*/
 }
 
 .btn:active {
-  background-color: black;
-  color: white;
+  color:rgba(11,239,235);
 }
 
 
@@ -183,7 +196,7 @@ p {
 	display: inline-block;
 	right:0%;
   background-color: white;
-  color: black;
+  color: #371F10;
   cursor: pointer;
   padding: 18px;
   width: 3%;
@@ -198,7 +211,7 @@ p {
 }
 
 .active, .collapsible:hover {
-  background-color: #0BEFEB;
+  color: blue;
 
 }
 
@@ -210,7 +223,7 @@ p {
   width: auto;
   transition: max-height 0.2s ease-out;
   background-color: white;
-  color: black;
+  color: #371F10;
   z-index: 10;
   text-align: left;
   opacity: 0.7;
@@ -223,7 +236,7 @@ a.content:link {
 }
 
 .metadata_organization {
-	font-size: 14px;
+	/*font-size: 14px;*/
 }
 
 .fbtn {

templates/title.html

@@ -14,11 +14,10 @@
     <h1>{{ page.name }} &#8629;</h1>
 
 <div class="viewnav">
-  <div class="collapsible2 viewbtn">&#10063;</div>
+  <div class="collapsible2 viewbtn">&#9634;</div>
   <div class="content2">
-	<!-- <div class="header" id="myHeader"> -->
-    <p><button class="btn" onclick="myFunction()">&#9607;</button></p>
-    <p><button class="btn" onclick="myFunction2()">&#9619;</button></p>
+    <p><button class="btn active" onclick="myFunction()">&#9635;</button></p>
+    <p><button class="btnov active" onclick="myFunction2()">&#9580;&#9580;</button></p>
     </div>
   </div> 
 <div>