Common.css

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

/* CSS placed here will be applied to all skins */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

h1, h2, h3, h4, h5, h6 {
    line-height: 1.25em;
}

/*****FOREGROUND SKIN STYLING*****/
/***************************/
/***** START *****/

/* Mobile Styling of top bar */
.top-bar {
    background: #fff;
}
@media (min-width: 576px) {
    .top-bar-logo {
        margin: 0px 0px 0px 10px;
    }
}
.top-bar .toggle-topbar.menu-icon a {
    color: #172a53;
}

.top-bar .toggle-topbar.menu-icon a span::after {
    box-shadow: 0 0 0 1px #172a53,0 7px 0 1px #172a53,0 14px 0 1px #172a53;
}

/* Change fonts in top bar */
.top-bar-section ul li > a {
    font-family: "Ubuntu", sans-serif !important;
    color: #172a53;
}

.top-bar-section li.active:not(.has-form) a:not(.button) {
    color: #172a53;
}

.top-bar-section li.active:not(.has-form) a:not(.button):hover {
    color: #10bf10 !important;
}

.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
    background: #172a53 !important;
}

/* Change color of menu items and search bar background */
.top-bar-section ul li {
    background: transparent;
}
.top-bar-section .has-form {
    background: transparent;
}

/* Adjust spacing of top bar elements */
.top-bar-section ul {
    padding: 20px;
}

/* Change top bar button color */
.top-bar .button.search {
    background-color: #10bf10;
    border-color: #188e18;
}

body.page-Main_Page h1 { 
    display: none; 
}

h3#tagline {
    display: none;
}

.top-bar .button.search {
    font-family: 'Ubuntu', sans-serif !important;
    border-radius: 0px 15px 15px 0px;
}

.top-bar input {
    border-radius: 10px 0px 0px 10px;
}

.title-area-1 {
    background: #172a53;
    padding: 0px 0px 10px 0px;
}

.title-area-1 h3 {
    color: #ffffff;
}

/* Main Page Styling */
.product-thumbnail {
    border: 1px solid #ddd;
    border-radius: 3px;
    text-align: center;
    padding: 30px 0px;
}

.product-title {
    text-align: center;
    font-size: 18px;
}

/* Product Page */

/* Hide top title */
h1#firstHeading {
    display: none;
}

.product-image {
    text-align: center;
}

.icon-check::before {
    font-family: "Font Awesome 5 Brands";
    content: "\f00c";
}

/* Same height columns on larger screen sizes */
@media (min-width: 576px) {
.equalheight {
    /*min-height: 300px;*/
    margin: 0 auto;
    display: -webkit-flex; /* Safari */     
    display: flex; /* Standard syntax */
}

.tablecolumn {
    -webkit-flex: 1; /* Safari */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* Standard syntax */
}
}

.blueheader {
    background-color: #172A53;
    margin-bottom: 14px;
}

.blueheader h2 {
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

.greenheader {
    background-color: #1ED01F;
    margin-bottom: 14px;
}

.greenheader h2 {
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

.redheader {
    background-color: #F01108;
    margin-bottom: 14px;
}

.redheader h2 {
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

.blackheader {
    background-color: #000;
    margin-bottom: 14px;
}

.blackheader h2 {
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

.greyheader {
    background-color: #797C7D;
    margin-bottom: 14px;
}

.greyheader h2 {
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

.lightgreybackground {
   background-color: #F2F2F2;
}

.greenbackground {
   background-color: #E8F6E9;
}
.redbackground {
   background-color: #FAEBE9;
}
.blackbackground {
   background-color: #000000;
   color: #ffffff;
}
.greybackground {
   background-color: #dbdbdb;
}

/* Footer Styling */
footer.row {
    margin-top: 2em;
    color: #c7c7c7 !important;
    background: #121212 !important;
    max-width: 100% !important;
    padding-top: 50px !important;
}

footer.row a {
    color: #c7c7c7;
}

/*****FOREGROUND SKIN STYLING*****/
/***************************/
/***** END *****/

/*****APEX SKIN STYLING*****/
/***************************/
/***** START *****/
/* START - General Theme Styling */
h1, h2, h3, h4, h5, h6, p, body {
font-family: "Ubuntu", sans-serif;
}

/* START - Edit the Top Bar and Menu */
@media only screen and (min-width: 40.0625em) {
   .top-bar { 
      background: #fff !important;
   }
}
#navwrapper > nav > ul > li.name > div > a > div {
   display: none !important;
}
.top-bar-logo {
   margin: 20px 10px 10px 20px;
}
.apex-nav {
   background: none;
   border-top: none;
   border-bottom: none;
}
/* END - Edit the Top Bar and Menu */


/* START - Edit the tables */

.welcome {
   width: 100%;
   text-align: center;
   background: #1D3468;
   border: none;
   padding: 20px;
}

.producttable {
   padding: 25px;
   width: 100%;
}

/* Table Headers */
.tableheader-blue {
   width: 20%;
   background-color: #172A53;
   color: #ffffff;
   font-weight: 700;
   font-size: 18px;
   text-align: center;
   padding: 10px !important;
}
.tableheader-green {
   width: 20%;
   background-color: #1ED01F;
   color: #ffffff;
   font-weight: 700;
   font-size: 18px;
   text-align: center;
   padding: 10px !important;
}
.tableheader-red {
   width: 20%;
   background-color: #F01108;
   color: #ffffff;
   font-weight: 700;
   font-size: 18px;
   text-align: center;
   padding: 10px !important;
}
.tableheader-black {
   width: 20%;
   background-color: #000000;
   color: #ffffff;
   font-weight: 700;
   font-size: 18px;
   text-align: center;
   padding: 10px !important;
}
.tableheader-grey {
   width: 20%;
   background-color: #797C7D;
   color: #ffffff;
   font-weight: 700;
   font-size: 18px;
   text-align: center;
   padding: 10px !important;
}

/* Table Columns */
td.tablecolumn-lightgrey {
   background-color: #F2F2F2 !important;
   padding: 30px;
   vertical-align: top;
}
td.tablecolumn-green {
   background-color: #E8F6E9 !important;
   padding: 30px;
   vertical-align: top;
}
td.tablecolumn-red {
   background-color: #FAEBE9!important;
   padding: 30px;
   vertical-align: top;
}
td.tablecolumn-grey {
   background-color: #F3F2F2!important;
   padding: 30px;
   vertical-align: top;
}

/** <pre> Styling **/
pre {
   background-color: #f1f1f1;
   border: 0;
    border-left-color: currentcolor;
    border-left-style: none;
    border-left-width: 0px;
   padding: 1em;
    padding-left: 1em;
   font-size: 100%;
}


/***** END *****/