Modified alphabetical index page styles.

webapp/src/main/webapp/themes/iph/css/iph.css

@@ -588,6 +588,7 @@ ul#header-nav a.log-out {
 	justify-content: center;
 }
 
+
 .custom-search-input {
   width: 70%;
   border-radius: unset !important;
@@ -645,7 +646,7 @@ input.search-submit-button {
     position: absolute;
     width: 396px;
     height: 38px;
-    top: 40px;
+    top: 90px;
     right: 10px;
     padding-top: 5px;
 }
@@ -1703,13 +1704,13 @@ ul#find-filters a.selected {
 }
 /* BROWSE BY ------>  */
 #browse-by {
-/*    width: 920px;*/
+	width: 100%;
 }
 nav#alpha-browse-container {
-    width: 894px;
+   /* width: 894px;*/
     float: left;
-    padding-left: 10px;
-    margin-left: 1px;
+    padding-left: 20px;
+    margin-left: 0px;
 }
 
 #browse-by h2 {
@@ -1719,9 +1720,14 @@ nav#alpha-browse-container {
 }
 /* BROWSE CLASSES ------>  */
 ul#browse-classes {
-    border: 1px solid #dde4e3;
+    border: 1px solid #F6F6F6;
     border-right: 0;
-    background-color: #f1f2ee;
+    background-color: #F6F6F6;
+    margin-left: 0px;
+    width: 25%;
+    outline-color: #F6F6F6;
+    outline-style: solid;
+    outline-width: 1px;
 }
 ul#browse-classes li,
 ul#vgraph-classes li {
@@ -1730,8 +1736,8 @@ ul#vgraph-classes li {
 }
 ul#browse-classes a:hover,
 ul#browse-classes a.selected {
-    background: url(../images/arrow.gif) 4px 5px no-repeat;
-    color: #2ea0cf;
+    background: url(../images/arrow_brown.png) 4px 5px no-repeat;
+    color: #8B4513;
 }
 ul#browse-classes .count-classes {
     font-size: 12px;
@@ -1742,7 +1748,7 @@ ul#alpha-browse-individuals {
 }
 ul#alpha-browse-individuals a:hover,
 ul#alpha-browse-individuals a.selected {
-    background: url(../images/arrowSmall.gif) -3px 7px no-repeat;
+    background: url(../images/arrow_small.png) -3px 7px no-repeat;
     color: #2ea0cf;
 }
 ul#alpha-browse-individuals .count-classes,
@@ -1756,22 +1762,29 @@ ul#alpha-browse-individuals li {
     font-size: .8em;
 }
 nav#alpha-browse-container {
-    border: 1px solid #dde4e3;
+    border-top: 1px solid #F6F6F6;
     background-color: #fff;
-    border-left: 1px solid #dde4e3;
+    border-left: 1px solid #F6F6F6;
     border-bottom: none;
+    width: 73%;
 }
 /* BROWSE INDIVIDUALS------>  */
 #individuals-in-class {
     width: 100%;
     border: 1px solid #dde4e3;
     background-color: #fff;
+    margin-right: 0;
 }
 ul#alpha-browse-individuals {
     float: left;
     width: auto;
     list-style: none;
+    font-size: 1.5rem;
 }
+h3.selected-class {
+	padding-bottom: 0.2em;
+}
+
 #individuals-in-class li.individual {
     border-bottom: 1px solid #dde4e3;
 }