Most pages are now styled.

Small changes to existing pages.
Changes to base layout style.

public/css/style.css

@@ -8,15 +8,33 @@
   content: "";
 }
 
-.site_container {
-  max-width: 1440px;
-  margin: 0 auto;
+body {
+  margin: 0;
+  padding: 0;
 }
 
 .body_container {
-  padding: 67px 135px;
+  max-width: 1170px;
+  margin: 0 auto;
+  padding: 67px 0;
   background-color: #f9f9f9;
-  margin: 0;
+}
+
+.header_container {
+  max-width: 1170px;
+  margin: 0 auto;
+}
+
+.grey_background {
+  background-color: #f9f9f9;
+}
+
+.content_container {
+  padding-right: 50px;
+}
+
+.sidebar {
+  width: calc(300px + var(--bs-gutter-x));
 }
 
 .btn {
@@ -45,8 +63,8 @@
 }
 
 .header .logo {
-  margin-left: 135px;
   float: left;
+  margin-top: 18px;
 }
 
 .header .logo img {
@@ -58,6 +76,15 @@
   margin-bottom: 20px;
   background-image: linear-gradient(to right, #0102b0, #4090e3);
 }
+.menu_container nav {
+  display: flex;
+}
+.menu_container nav > div {
+  height: 30px;
+  background: white;
+  flex-grow: 1;
+  border: 1px solid white;
+}
 .menu_container .menu {
   margin: 0;
   padding: 0;
@@ -66,6 +93,8 @@
   position: relative;
   z-index: 0;
   margin: 0px -1px;
+  width: 1170px;
+  margin: 0 auto;
 }
 .menu_container .menu > li {
   float: left;
@@ -87,6 +116,7 @@
   padding: 5px 20px 5px 40px;
   text-decoration: none;
   background: white;
+  text-transform: uppercase;
 }
 .menu_container .menu > li.selected a, .menu_container .menu > li:hover a, .menu_container .menu > li.hover a {
   color: white;
@@ -115,12 +145,6 @@
   right: -1px;
   z-index: 1;
 }
-.menu_container .menu > li:first-child {
-  width: 135px;
-  display: block;
-  background: white;
-  height: 29px;
-}
 .menu_container .menu > li:last-child {
   margin-left: 10px;
 }
@@ -137,6 +161,8 @@
 
 .top_menu_container {
   height: 50px;
+  max-width: 1170px;
+  margin: 0 auto;
 }
 .top_menu_container ul {
   float: right;
@@ -153,6 +179,9 @@
 .top_menu_container ul li:last-child {
   border: none;
 }
+.top_menu_container ul li:nth-child(2) {
+  padding: 0 19px;
+}
 .top_menu_container ul li a {
   float: left;
   font-family: Nunito, serif;
@@ -172,9 +201,26 @@
 .top_menu_container ul li .search_form {
   float: left;
   overflow: hidden;
-  height: 21px;
+  height: 34px;
   margin-right: 10px;
 }
+.top_menu_container ul li .search_form .search_input {
+  border: 1px solid #efefef;
+  border-radius: 5px;
+  background-color: #fff;
+  height: 29px;
+  font-family: Montserrat, serif;
+  font-size: 16px;
+  line-height: 1.25;
+  color: #1a1a1a;
+}
+.top_menu_container ul li .search_form .search_submit {
+  float: right;
+  margin: 6px;
+}
+.top_menu_container ul li .search_button {
+  margin-top: 6px;
+}
 
 .menu-submenu {
   position: absolute;
@@ -197,6 +243,7 @@
   text-decoration: none;
   padding: 15px 0;
   border-bottom: 1px solid #f8f8f8;
+  text-transform: uppercase;
 }
 .menu-submenu > ul {
   padding: 20px;
@@ -245,7 +292,6 @@
   font-size: 16pt;
   font-family: "Roboto Condensed", serif;
   font-weight: 300;
-  /* background: #F6F6F6; */
   background: rgba(246, 246, 246, 0.4);
   width: 728px;
   color: #787878;
@@ -290,6 +336,13 @@
   cursor: pointer;
 }
 
+.player {
+  font-size: 14pt;
+  font-family: "Roboto Condensed", serif;
+  font-weight: 300;
+  color: #787878;
+}
+
 .blog_grid .row, .blog_grid .row > * {
   padding: 0;
   margin: 0;
@@ -305,7 +358,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  filter: brightness(50%);
+  filter: brightness(70%);
 }
 .blog_grid .post.small {
   height: 50%;
@@ -367,6 +420,7 @@
 
 .box_header {
   border-bottom: 1px solid #efefef;
+  padding-right: 20px;
 }
 .box_header span {
   font-family: Nunito, serif;
@@ -378,6 +432,15 @@
   text-transform: uppercase;
   height: 30px;
 }
+.box_header.extra_small span {
+  font-size: 12px;
+}
+.box_header.small span {
+  font-size: 14px;
+}
+.box_header.medium span {
+  font-size: 18px;
+}
 
 .box {
   display: inline-block;
@@ -411,7 +474,7 @@
   cursor: pointer;
   padding-bottom: 3px;
 }
-.tabs .box_header.extra-small span {
+.tabs .box_header.extra_small span {
   font-size: 12px;
 }
 .tabs .box_header.small span {
@@ -428,6 +491,7 @@
 
 .tab_content {
   display: none;
+  padding: 20px 23px 20px 20px;
 }
 .tab_content.active {
   display: block;
@@ -701,13 +765,13 @@
 }
 
 .post_container {
-  padding: 40px 135px;
-  background-color: #f9f9f9;
-  margin: 0;
+  max-width: 1170px;
+  margin: 0 auto;
+  padding: 32px 0;
 }
 .post_container > .col-8 {
-  width: calc(66.66666667% - 50px);
-  margin-right: 50px;
+  width: calc(66.66666667% - 20px);
+  margin-right: 20px;
 }
 .post_container .bread_crumb {
   border-bottom: 1px solid #efefef;
@@ -859,13 +923,12 @@
 }
 
 .page_container {
+  max-width: 1170px;
+  margin: 0 auto;
   background-color: #fff;
   width: calc(100% - 270px);
   padding: 32px 135px;
 }
-.page_container.grey-background {
-  background-color: #f9f9f9;
-}
 
 .page_body {
   font-family: Nunito, serif;
@@ -877,6 +940,10 @@
 .action_button {
   text-decoration: none;
   color: #282828;
+  margin-right: 20px;
+}
+.action_button .fa {
+  margin-right: 10px;
 }
 
 .input_container {
@@ -912,13 +979,16 @@
   color: #fff;
 }
 .footer_container .footer_menu {
-  padding: 61px 135px 38px 134px;
   background-image: linear-gradient(to right, #0102b0, #4090e3);
 }
+.footer_container .footer_menu .row {
+  max-width: 1170px;
+  margin: 0 auto;
+}
 .footer_container .footer_menu .row:first-child {
   padding-bottom: 70px;
   margin-bottom: 34px;
-  border-bottom: 1px solid #fff;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }
 .footer_container .footer_menu a {
   color: #fff;
@@ -931,7 +1001,7 @@
   margin-bottom: 10px;
 }
 .footer_container .footer_menu .box_header {
-  border-bottom: 1px solid #fff;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }
 .footer_container .footer_menu .box_header span {
   border-bottom: 3px solid #fff;
@@ -996,4 +1066,8 @@
   background-color: #e73323;
 }
 
+.mejs__overlay-button {
+  border: none;
+}
+
 /*# sourceMappingURL=style.css.map */