button layout

static/title.css

@@ -8,9 +8,9 @@ body {
   	grid-gap: 10px;
   	position: absolute;
   	top: 25%;
-	width: 96%;
+	width: 82%;
 	height: auto;
-	left:2%;
+	right: 8%;
   	text-align: : center;
   	z-index: 5;
 
@@ -54,7 +54,7 @@ h1 {
 	top:5%;
 	text-align: right;
 	background-color: #0BEFEB;
-	padding: 3px 30px 3px 10px;
+	padding: 3px 35px 3px 10px;
 	z-index: 10;
 	color: black;
 	font-size: 28px;
@@ -68,7 +68,7 @@ h2{
 	text-align: left;
 	background-color: #0BEFEB;
 	/*color: black;*/
-	padding: 3px 3px 3px 30px;
+	padding: 3px 35px 3px 10px;
 	z-index: 10;
 	font-size: 20px;
   	opacity: 0.7;
@@ -76,8 +76,8 @@ h2{
 
 .viewnav {
 	position: fixed;
-	top:50%;
-	right:2%;
+	bottom:0%;
+	left:0%;
 	background-color: transparent;
 	width: 10%;
 	z-index: 10;
@@ -92,7 +92,7 @@ h2{
 	width: 100%;
 	height: auto;
 	border: none;
-	text-align: right;
+	text-align: left;
 	outline: none;
 	font-size: 40px;
 	z-index: 10;
@@ -165,31 +165,40 @@ p {
 
 .metadata{
 	position: fixed;
-	top:5%;
-	left:0%;
+	top: 25%;
+	right: 0%;
 	background-color: transparent;
-	width: 40%;
+	width: 60%;
 	z-index: 10;
 	opacity: 1;
+	text-align: right;
+	/*align-items: right;
+	align-content: right;*/
+
 }
 
 .collapsible {
-  background-color: transparent;
+	
+	display: inline-block;
+	right:0%;
+  background-color: white;
   color: black;
   cursor: pointer;
   padding: 18px;
-  width: 10%;
-  height: auto;
-  border: solid 1px;
-  text-align: right;
+  width: 3%;
+  height: 100%;
+  /*border: solid 1px;*/
+  text-align: left;
   outline: none;
   font-size: 15px;
   z-index: 10;
   margin-top: 10px;
+
 }
 
 .active, .collapsible:hover {
-  background-color: transparent;
+  background-color: #0BEFEB;
+
 }
 
 .content {
@@ -197,13 +206,14 @@ p {
   padding: 0px 18px;
   max-height: 0;
   overflow: hidden;
-  width: 90%;
+  width: auto;
   transition: max-height 0.2s ease-out;
-  background-color: #0BEFEB;
-  color: white;
+  background-color: white;
+  color: black;
   z-index: 10;
-  text-align: right;
+  text-align: left;
   opacity: 0.7;
+  right:0%;
 
 }
 
@@ -211,17 +221,17 @@ a.content:link {
 	color:white;
 }
 
-.metadata_links {
-	display: block;
+/*.metadata_links {
+	display: inline-block;
 	width: 100%;
-	position: relative;
+	position: absolute;
 	right: 0%;
 	padding: 10px;
 	text-align: left;
-	/*background-color: blue;*/
+	background-color: blue;
 	font-size: 18px;
 
-}
+}*/
 
 .metadata_organization {
 	font-size: 14px;
@@ -238,8 +248,8 @@ a.content:link {
 
 .orglink {
 	position: fixed;
-	bottom:0%;
-	left:18%;
+	top: 30%;
+	left: 0%;
 	background-color: white;
 	z-index: 10;
 	font-size: 30px;
@@ -268,8 +278,8 @@ a.content:link {
 
 .timelinelink {
 	position: fixed;
-	bottom: 0%;
-	left: 3%;
+	top: 20%;
+	left: 0%;
 	background-color: white;
 	z-index: 10;
 	font-size: 30px;
@@ -298,8 +308,8 @@ a.content:link {
 
 .indexlink {
 	position: fixed;
-	bottom:0%;
-	right:3%;
+	top:10%;
+	left:0%;
 	background-color: white;
 	z-index: 10;
 	font-size: 30px;
@@ -318,7 +328,7 @@ a.content:link {
 
   /* Position the tooltip */
   position: absolute;
-  right: 50px;
+  left: 50px;
   z-index: 10;
 }
 
@@ -326,7 +336,3 @@ a.content:link {
   visibility: visible;
 }
 
-
-/*.timelinelink:hover .htext {
-  visibility: visible;
-}*/