clean up header styles

htdocs/css/map.css

@@ -6,10 +6,6 @@ body {
     flex-direction: column;
 }
 
-#webrx-top-container {
-    flex: none;
-}
-
 .openwebrx-map {
     flex: 1 1 auto;
 }

htdocs/css/openwebrx-header.css

@@ -1,4 +1,4 @@
-#webrx-top-container {
+.webrx-top-container {
     position: relative;
     z-index:1000;
     background-color: #575757;
@@ -12,7 +12,7 @@
     overflow: hidden;
 }
 
-#openwebrx-description-container {
+.openwebrx-description-container {
     transition-property: height, opacity;
     transition-duration: 1s;
     transition-timing-function: ease-out;
@@ -23,7 +23,7 @@
     overflow: hidden;
 }
 
-#openwebrx-description-container.expanded {
+.openwebrx-description-container.expanded {
     opacity: 1;
     height: 283px;
 }
@@ -50,22 +50,21 @@
     flex: 0;
 }
 
-#webrx-top-container, #webrx-top-container * {
+.webrx-top-container, .webrx-top-container * {
     line-height: initial;
     box-sizing: initial;
 }
 
-#webrx-top-logo {
+.webrx-top-logo {
     padding: 12px;
     /* overwritten by media queries */
     display: none;
 }
 
-#webrx-rx-avatar {
+.webrx-rx-avatar {
     background-color: rgba(154, 154, 154, .5);
     margin: 7px;
 
-    cursor:pointer;
     width: 46px;
     height: 46px;
     padding: 4px;
@@ -73,7 +72,7 @@
     box-sizing: content-box;
 }
 
-#webrx-rx-texts {
+.webrx-rx-texts {
     /* minimum layout width */
     width: 0;
     /* will be getting wider with flex */
@@ -82,70 +81,66 @@
     margin: auto 0;
 }
 
-#webrx-rx-texts div {
+.webrx-rx-texts div {
     margin: 0 10px;
     padding: 3px;
     white-space:nowrap;
     overflow: hidden;
-    cursor:pointer;
     color: #909090;
 }
 
-#webrx-rx-title {
+.webrx-rx-title {
     font-family: "DejaVu Sans", Verdana, Geneva, sans-serif;
     font-size: 11pt;
     font-weight: bold;
 }
 
-#webrx-rx-desc {
+.webrx-rx-desc {
     font-size: 10pt;
 }
 
-#openwebrx-rx-details-arrow {
-    cursor:pointer;
+.openwebrx-rx-details-arrow {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translate(-50%, 0);
-}
 
-#openwebrx-rx-details-arrow a {
     margin: 0;
     padding: 0;
     line-height: 0;
     display: block;
 }
 
-#openwebrx-main-buttons .button {
+.openwebrx-main-buttons .button {
     display: block;
     width: 55px;
     cursor:pointer;
 }
 
-#openwebrx-main-buttons .button[data-toggle-panel] {
+.openwebrx-main-buttons .button[data-toggle-panel] {
     /* will be enabled by javascript if the panel is present in the DOM */
     display: none;
 }
 
-#openwebrx-main-buttons .button img {
+.openwebrx-main-buttons .button img {
     height: 38px;
 }
 
-#openwebrx-main-buttons a {
+.openwebrx-main-buttons a {
     color: inherit;
     text-decoration: inherit;
 }
 
-#openwebrx-main-buttons .button:hover {
+.openwebrx-main-buttons .button:hover {
     background-color: rgba(255, 255, 255, 0.3);
 }
 
-#openwebrx-main-buttons .button:active {
+.openwebrx-main-buttons .button:active {
     background-color: rgba(255, 255, 255, 0.55);
 }
 
 
-#openwebrx-main-buttons {
+.openwebrx-main-buttons {
     padding: 5px 15px;
     display: flex;
     list-style: none;
@@ -157,7 +152,7 @@
     font-weight: bold;
 }
 
-#webrx-rx-photo-title {
+.webrx-rx-photo-title {
     margin: 10px 15px;
     color: white;
     font-size: 16pt;
@@ -165,7 +160,7 @@
     opacity: 1;
 }
 
-#webrx-rx-photo-desc {
+.webrx-rx-photo-desc {
     margin: 10px 15px;
     color: white;
     font-size: 10pt;
@@ -175,17 +170,21 @@
     line-height: 1.5em;
 }
 
-#webrx-rx-photo-desc a {
+.webrx-rx-photo-desc a {
     color: #5ca8ff;
     text-shadow: none;
 }
 
+.openwebrx-photo-trigger {
+    cursor: pointer;
+}
+
 /*
  * Responsive stuff
  */
 
 @media (min-width: 576px) {
-    #webrx-rx-texts {
+    .webrx-rx-texts {
         display: initial;
     }
 }
@@ -194,7 +193,7 @@
 }
 
 @media (min-width: 992px) {
-    #webrx-top-logo {
+    .webrx-top-logo {
         display: initial;
     }
 }
@@ -236,13 +235,13 @@
     height: 38px;
 }
 
-.sprite-rx-details-arrow-down {
+.openwebrx-rx-details-arrow--down .sprite-rx-details-arrow {
     background-position: 0 -65px;
     width: 43px;
     height: 12px;
 }
 
-.sprite-rx-details-arrow-up {
+.openwebrx-rx-details-arrow--up .sprite-rx-details-arrow {
     background-position: -43px -65px;
     width: 43px;
     height: 12px;