Minor CSS Changes & Comments

style/new_style.css

@@ -17,7 +17,7 @@ body {
 
 /* BEGIN DEFAULT PAGE HEADER BLOCK */
 
-#header_image_home {
+#header_image_home { /* Try z-index: -1; to have content scrolling over - margins will need adjusting */
     background-color: rgb(29,49,49);
     background-image: url("/images/headers/index/index_w750.jpg");
     background-repeat: no-repeat;
@@ -32,7 +32,7 @@ body {
     top: -170px;
 }
 
-#page_title {
+#page_title { /* This may be best floating above content div rather than inside header div */
     font-family: sans-serif;
     font-size: large;
     width: 100%;
@@ -52,7 +52,7 @@ body {
     height: 40px;
 }
 
-#menubar_logo img {
+#menubar_logo img { /* Logo file is controlled by media="" in <picture> */
     max-height: 20px;
     padding: 10px;
 }
@@ -130,15 +130,7 @@ body {
     /* Reposition menu */
     @media screen and (min-width: 800px) and (min-height: 700px) {
 
-        #header_image_home {
-            margin-top: auto;
-        }
         
-        #menubar {
-            position: -webkit-sticky;
-            position: sticky;
-            top: 0px;
-        }
     
     }
 
@@ -146,11 +138,18 @@ body {
 
 /* BEGIN CONTENT BLOCK */
 
-#content {
-    margin: auto;
-    margin-top: 10px;
-    margin-bottom: 10px;
+#content { /* Try z-index: 1; so it scrolls over header image */
+    padding-top: 10px;
+    padding-bottom: 10px;
+    width: 100%;
+    background-color: lightslategrey;
+}
+
+#content p {
     width: 90%;
+    margin: auto;
+    margin-top: 20px;
+    color: azure;
 }
 
 /* END CONTENT BLOCK */