title page htext

static/title.css

@@ -7,7 +7,7 @@ body {
   	grid-template-columns: repeat(4, 1fr);
   	grid-gap: 10px;
   	position: absolute;
-  	top: 60%;
+  	top: 5%;
 	width: 96%;
 	height: auto;
 	left:2%;
@@ -51,13 +51,14 @@ a:hover {
 h1 {
 	position: fixed;
 	right:0%;
-	top:3%;
+	top:5%;
 	text-align: right;
-	background-color: grey;
+	background-color: #0BEFEB;
 	padding: 3px 30px 3px 10px;
 	z-index: 10;
 	color: black;
 	font-size: 28px;
+	opacity: 0.7;
 }
 
 h2{
@@ -65,24 +66,20 @@ h2{
 	right: 0%;
 	top: 15%;
 	text-align: left;
-	background-color: grey;
+	background-color: #0BEFEB;
-	color: black;
+	/*color: black;*/
 	padding: 3px 3px 3px 30px;
 	z-index: 10;
 	font-size: 20px;
+  	opacity: 0.7;
 }
 
-/*.indexlist {
-  position: absolute;
-  top:20%;
-}*/
-
 .viewnav {
 	position: fixed;
-	top:0%;
+	top:30%;
 	right:0%;
 	background-color: red ;
-	width: 40%;
+	width: 10%;
 	z-index: 10;
 	opacity: 0.7;
 }
@@ -93,9 +90,9 @@ h2{
 	cursor: pointer;
 	padding: 0px;
 	width: 100%;
-	height: px;
+	height: auto;
 	border: none;
-	text-align: left;
+	text-align: right;
 	outline: none;
 	font-size: 40px;
 	z-index: 10;
@@ -108,15 +105,15 @@ h2{
 
 .content2 {
   position: relative;
-  padding: 0px 18px;
+  /*padding: 0px 18px;*/
   max-height: 0;
   overflow: hidden;
-  width: 50%;
+  width: 100%;
   transition: max-height 0.2s ease-out;
   background-color: grey;
   color: white;
   z-index: 10;
-  text-align: left;
+  text-align: center;
 }
 
 
@@ -200,10 +197,12 @@ p {
   overflow: hidden;
   width: 90%;
   transition: max-height 0.2s ease-out;
-  background-color: grey;
+  background-color: #0BEFEB;
   color: white;
   z-index: 10;
   text-align: right;
+  opacity: 0.7;
+
 }
 
 a.content:link {
@@ -251,11 +250,9 @@ a.content:link {
 	background-color: white;
 	z-index: 10;
 	font-size: 30px;
-	padding-left: 5px;
+	padding-left: 
 }
 
-.timelinelink:hover {timeline}
-
 .orglink {
 	position: fixed;
 	bottom:0%;
@@ -265,16 +262,71 @@ a.content:link {
 	font-size: 30px;
 }
 
-.orglink:hover .hiddentext {
+/*.orglink {
-	visibility: visible;
+  position: fixed;
+  bottom:0%;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}*/
+
+.orglink .htext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  font-size: 15px;
+
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 10;
+}
+
+.orglink:hover .htext {
+  visibility: visible;
+}
+
+.timelinelink .htext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  font-size: 15px;
+
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 10;
 }
 
-.hiddentext {
+.timelinelink:hover .htext {
-	visibility: hidden;
+  visibility: visible;
-	  width: 120px;
-	  background-color: black;
-	  color: #fff;
-	  text-align: center;
-	  padding: 5px 0;
-	  border-radius: 6px;
 }
+
+.indexlink .htext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  font-size: 15px;
+
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 10;
+}
+
+.indexlink:hover .htext {
+  visibility: visible;
+}
+
+
+/*.timelinelink:hover .htext {
+  visibility: visible;
+}*/

templates/title.html

@@ -23,8 +23,6 @@
   </div> 
 <div>
   
-<span class="hiddentext">All Organizations</span>
-
 	<div id="body">{{ body|safe }}</div>
   
 <script>