@charset "utf-8";

/* BYNO Mechanical Plumbing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Ensures padding and border are included in element's total width and height */
}

/*
HTML 5 support: Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. 
*/
header,
section,
footer,
aside,
nav,
article,
figure {
    display: block;
}

body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    /* 
    - 100%: To set the font size to 100% of the parent element's font size. It will scale with the user's settings.
    /1.4: To set the line height to 1.4 times the font size. 
    It controls the space between lines of text, making it more readable.
    */
    background-repeat: repeat;
    background-attachment: fixed;
    color: #036;
    display: block;
    background-color: #00005D;
    /* Background color for body */
    background-image: url(../images/bodyBG.gif);
    /* Background image for body */
}

/* Heading and paragraph styles */
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 15px;
    margin-bottom: 5px;
}

/* Link styles */
a:visited {
    color: #6E6C64;
    /* Color for visited links */
    text-decoration: underline;
    /* Underline for visual identification */
}

a:hover,
a:active,
a:focus {
    text-decoration: none;
    /* No underline on hover/focus */
}

a:link {
    color: #42413C;
    /* Color for unvisited links */
    text-decoration: underline;
    /* Underline for quick visual identification */
}

header {
    color: #00005D;
    padding: 0;
    height: auto;
    /* Allow the height to adjust automatically */
    min-height: 200px;
    /* Set a minimum height */
    background-color: #869DC7;
    /* Header background color */
    background-image: url(../images/BYNO-Banner.jpg);
    /* Header background image */
    background-size: cover;
    /* Cover the entire area */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-position: center;
    /* Center the header image */
}

div.container .content .firstArt h2 img {
    margin: auto;
    /* Center images in first article */
}

/* Starting main nav styling **************************************************/
#nav_main {
    border: 1px solid #036;
    font-size: 18px;
    text-transform: uppercase;
    /* Transform text to uppercase */
    background-color: #edf2f4;
    /* Background color for navigation */
}

/* Styling the first ul main top nav heading */
#nav_main>ul {
    display: table;
    /* Display as table for layout */
    width: 100%;
    text-align: center;
    /* Center align text */
    font-weight: bold;
    /* Bold text for headings */
}

#nav_main>ul>li {
    border-left: 1px solid #036;
    border-right: 1px solid #036;
    display: table-cell;
    /* Display as table-cell for alignment */
    width: 25%;
    /* Each nav item takes up 25% of width */
    position: relative;
    /* Relative positioning for dropdowns */
}

/* Nav link styles */
#nav_main>ul>li>a span {
    padding: 180px 0;
    /* Space around link text */
}

#nav_main ul ul:after {
    clear: both;
    /* Clear floats */
    content: '.';
    /* Prevents empty collapsing */
    display: block;
    height: 0;
    visibility: hidden;
    /* Keep clear element hidden */
}

#nav_main div {
    height: 3px;
    /* Small height for div */
    min-height: 0;
    min-width: 100%;
    padding-top: 5px;
    left: -999em;
    /* Hide off-screen */
    overflow: hidden;
    /* Hide overflow */
    position: absolute;
    /* Position absolute for dropdown */
    width: 1px;
    /* Minimal width */
}

#nav_main ul>li a:link {
    color: #2b2d42;
    /* Color for links */
    padding: 10px 5px;
    /* Padding for links */
    text-decoration: none;
    /* Remove underline */
    display: block;
    /* Block display for full clickable area */
}

/* Hover effects for nav links */
#nav_main>ul>li a.navHeading:hover {
    color: #edf2f4;
    /* Color change on hover */
    background-color: #193A63;
    /* Background change on hover */
}

#nav_main a:hover,
#nav_main a:focus,
#nav_main li .current>a {
    color: #00005D;
    /* Color change for active/current links */
}

#nav_main .current>a {
    color: #036;
    /* Active link color */
    font-weight: bold;
    /* Bold active links */
}

/* Dropdown effects */
#nav_main>ul>.current>a span {
    display: inline-block;
    /* Keep span inline */
}

#nav_main>ul>li:hover>a,
#nav_main>ul>li>a:hover,
#nav_main>ul>li>a:focus,
#nav_main>ul>.open>a.parent,
#nav_main>ul>.current.open>a.parent span {
    color: #C9D0E0;
    /* Change text color on hover */
    width: 100%;
    /* Full width for dropdown */
    display: inline-block;
    /* Inline block for dropdown */
    border-color: #b0cb5e;
    /* Change border color */
}

#nav_main>ul>li.current:hover>a:not(.parent),
#nav_main>ul>li.current>a:not(.parent):hover,
#nav_main>ul>li.current>a:not(.parent):focus {
    border-color: #c4d886 transparent;
    /* Border color change on hover */
}

#nav_main>ul>li:hover>.parent span,
#nav_main>ul>li>a.parent:hover span,
#nav_main>ul>li>a.parent:focus span {
    background: none;
    /* Remove background on hover */
}

#nav_main>ul>li:hover>a.parent,
#nav_main>ul>li>a.parent:hover,
#nav_main>ul>li>a.parent:focus,
#nav_main>ul>.open>a.parent {
    border-width: 2px;
    /* Increase border width on hover */
    color: #7a932e;
    /* Change color on hover */
    padding: 0 1px;
    /* Adjust padding */
    position: relative;
    /* Keep position relative */
}

#nav_main>ul>li:hover>a.parent:after,
#nav_main>ul>li>a.parent:hover:after,
#nav_main>ul>li>a.parent:focus:after,
#nav_main>ul>.open>a.parent:after {
    bottom: -4px;
    /* Position after element */
    content: '';
    /* Create a pseudo-element */
    height: 4px;
    /* Height of pseudo-element */
    left: 0;
    /* Align left */
    position: absolute;
    /* Position absolute */
    width: 100%;
    /* Full width */
    z-index: 32;
    /* Stack above other elements */
}

#nav_main div {
    background: #edf2f4;
    /* Background for dropdown */
    border: 1px solid #B3C7E6;
    /* Border for dropdown */
    margin-top: 1px;
    /* Margin above */
    padding-bottom: 5px;
    /* Padding below */
    white-space: nowrap;
    /* Prevent line breaks */
    z-index: 31;
    /* Stack below pseudo-elements */
}

html:not(.jquery) #nav_main>ul>li:hover div,
#nav_main>ul>.open div {
    height: auto;
    /* Expand dropdown on hover */
    left: auto;
    /* Reset left positioning */
    width: auto;
    /* Reset width */
}

#nav_main .single_column {
    padding-top: 5px;
    /* Padding for single column */
}

#nav_main>ul>li>div:not(.single_column)>ul>li {
    display: inline-block;
    /* Inline display for list items */
    margin-left: -5px;
    /* Remove left margin */
    vertical-align: top;
    /* Align top */
}

#nav_main>ul>li>div:not(.single_column)>ul>li:first-child {
    margin-left: 0;
    /* No margin for first child */
}

#nav_main ul ul,
#nav_main ul ul li li {
    display: block;
    /* Block display for nested lists */
}

#nav_main ul div:not(.single_column)>ul>li>a {
    border-bottom: 1px solid #d1e1a2;
    /* Border for sub-menu items */
    font-weight: bold;
    /* Bold font for sub-menu items */
    padding: 10px 30px 5px 10px;
    /* Padding for sub-menu items */
}

#nav_main ul div:not(.single_column)>ul>li:last-child>a {
    padding-right: 10px;
    /* Extra padding for last item */
}

#nav_main ul ul ul a {
    padding: 5px 45px 5px 25px;
    /* Padding for nested links */
}

#nav_main ul ul ul:last-child a {
    padding-right: 25px;
    /* Extra padding for last nested item */
}

#nav_main .single_column a {
    padding: 5px 11px;
    /* Padding for single column links */
}

#nav_main ul ul ul a:hover,
#nav_main ul ul ul a:focus,
#nav_main .single_column a:hover,
#nav_main .single_column a:focus {
    text-decoration: underline;
    /* Underline on hover */
}

/* Ending main nav styling ****************************************************/

/* 
Start styling the 4 main containers:
*/

/* This fixed width container surrounds all other blocks */
.container {
    max-width: 1024px;
    /* Maximum width for the container */
    background: #B3C7E6;
    /* Container background color */
    margin: 4px auto;
    /* Centered margin */
}

.content {
    width: 75%;
    /* Width of content area */
    background-image: url(../images/bkgdContent.jpg);
    /* Background image for content */
    padding: 10px;
    /* Padding around content */
    border: none;
    /* No borders */
    border-right-width: 2px;
    /* Right border */
    float: left;
    /* Float left */
}

.sidebar {
    float: right;
    /* Float sidebar right */
    width: 25%;
    /* Width of sidebar */
    padding: 10px;
    /* Padding for sidebar */
    padding-bottom: 10px;
    font-size: .8em;
    /* Font size for sidebar */
    background-color: #8d99ae;
    /* Background color for sidebar */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Subtle shadow effect */
}

/* The footer */
footer {
    color: #edf2f4;
    /* Footer text color */
    margin-bottom: 0;
    /* No bottom margin */
    text-align: center;
    /* Center align footer text */
    background: #2b2d42;
    /* Footer background color */
    position: relative;
    /* Position relative for clearing */
    clear: both;
    /* Clear floats */
    font-size: 75%;
    /* Smaller font size */
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);
    /* Shadow for footer */
}

footer div#copyright {
    padding: 5px;
    /* Padding for copyright */
}

/* Styling the banner images gallery */
div.photos {
    margin-top: 5px;
    /* Margin above photo gallery */
    border-top: 1px inset #a19797;
    /* Border above gallery */
    padding-top: 15px;
    /* Padding for gallery */
}

/* For the image gallery inside the services.html page */
.photos img,
div#gallery img {
    display: none;
    /* Hide images initially */
    width: 100%;
    /* Full width images */
    max-width: 100%;
    /* Prevent overflow */
}

img.show {
    display: inline-block;
    /* Show active images */
}

/* End styling the side images slideshow */

/* Styling the table element with id value of "imgTable" */
#imgTable {
    border: 3px ridge #040466;
    /* Border for image table */
    margin: auto;
    /* Center table */
    padding: 5px;
    /* Padding inside table */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    /* Shadow for table */
}

#imgTable tr td {
    border: 2px double #040466;
    /* Cell borders */
    padding: 2px;
    /* Cell padding */
    margin: 5px;
    /* Margin for cells */
}

/* Styling the Image Gallery div and content in about.php page */
#imgGallery {
    margin: auto;
    /* Center gallery */
    display: flex;
    /* Flexbox for layout */
    flex-direction: column;
    /* Column layout */
    justify-content: center;
    /* Center content */
    padding: 2px;
    /* Padding inside gallery */
    border: 2px solid #00005D;
    /* Border around gallery */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Shadow for gallery */
}

#imageDiv {
    display: flex;
    /* Flexbox layout */
    flex-direction: column;
    /* Column layout */
    justify-content: center;
    /* Center content */
    padding: 2px;
    /* Padding inside image div */
    border: 2px solid #00005D;
    /* Border for image div */
}

#imgGallery img {
    display: none;
    /* Hide images */
}

#imgGallery img.show {
    display: inline-block;
    /* Show active images */
}

#imgInfo {
    border: 1px solid gray;
    /* Border for image info */
    width: 400px;
    /* Fixed width */
    height: 35px;
    /* Fixed height */
    margin: 3px auto;
    /* Center margin */
    background-color: #F0F0F0;
    /* Background color */
    text-align: center;
    /* Center align text */
    padding-bottom: 10px;
    /* Padding below */
}

.button {
    cursor: pointer;
    /* Pointer cursor for buttons */
    transition: background-color 0.3s;
    /* Smooth background transition */
}

.button:hover {
    background-color: #2b2d42;
    /* Change background on hover */
    color: #DFE8F4;
    /* Change text color on hover */
}

div.controls {
    margin: auto;
    /* Center controls */
    background-color: rgba(207, 207, 241, 0.9);
    /* Background for controls */
}

/* Icon margins for controls */
div.controls i {
    margin: 5px 10px;
    /* Margin for control icons */
}

.bynoBtn {
    margin-left: 20px;
    /* Margin for button */
    border: 2px ridge #DFE8F4;
    /* Border for button */
    padding: 3px;
    /* Padding for button */
    transition: transform 0.2s;
    /* Smooth transform on hover */
}

.bynoBtn:hover {
    transform: scale(1.05);
    /* Slight scale up on hover */
}

/* class for first article  */
.firstArt {
    background-color: #193A63;
    /* Background color for first article */
    color: #FFF;
    /* Text color */
    width: 95%;
    /* Adjusted width of article */
    margin: auto;
    /* Center article */
    padding: 10px;
    /* Increased padding around article for better spacing */
    border: 1px inset rgb(206, 205, 205);
    /* Border for article */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* Enhanced shadow for more depth */
    transition: transform 0.3s;
    /* Smooth transformation effect */
}

/* Optional hover effect for the article */
.firstArt:hover {
    transform: scale(1.02);
    /* Slightly scale up on hover */
}

.firstArt ul {
    margin-left: 25px;
    /* Margin for unordered lists */
}

/* Enhancing unordered lists with class bynoUl */
.bynoUl {
    list-style-type: none;
    /* Remove default bullets */
    padding: 10px;
    /* Add padding */
    margin: 15px 0;
    /* Margin above and below */
    background-color: rgba(255, 255, 255, 0.8);
    /* Light background for contrast */
    border-radius: 5px;
    /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
}

/* Styling individual list items within the bynoUl */
.bynoUl li {
    padding: 8px 12px;
    /* Padding for list items */
    transition: background-color 0.3s;
    /* Smooth background transition */
}

/* Hover effect for list items */
.bynoUl li:hover {
    background-color: #B3C7E6;
    /* Change background on hover */
    color: #2b2d42;
    /* Change text color on hover */
}

/* Optional: Adding a font weight to list items */
.bynoUl li {
    font-weight: 500;
    /* Medium font weight for emphasis */
}

/* Styling the bottom nav in the footer: */
#bottomNav {
    background-color: #FFF;
    /* Background color for bottom nav */
    border-top-width: 2px;
    /* Top border width */
    border-top-style: groove;
    /* Top border style */
    padding: 5px;
    /* Padding for bottom nav */
}

#bottomNav li {
    margin: 4px;
    /* Margin for list items */
    list-style: none;
    /* Remove bullet points */
    color: #666;
    /* Text color */
}

#bottomNav ul {
    margin-left: 50px;
    /* Left margin for nav */
    margin-right: 50px;
    /* Right margin for nav */
}

#bottomNav a:link {
    text-decoration: none;
    /* No underline for links */
    text-transform: uppercase;
    /* Uppercase text */
    color: #666;
    /* Text color */
    display: inline;
    /* Inline display */
    padding: 0;
    /* No padding */
    margin-right: 10px;
    /* Right margin */
    font-weight: bold;
    /* Bold text */
}

#bottomNav a:hover {
    color: #003;
    /* Change color on hover */
}

/* Styling the span element inside the form */
form td span {
    display: block;
    /* Block display for spans */
}

/* 
Scrolling to the top of the page: 
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
*/
html {
    scroll-behavior: smooth;
    /* Smooth scrolling for links */
}

/* Top page link styles */
a.topPage:link {
    font-weight: bold;
    /* Bold font */
    font-size: 0.8em;
    /* Font size */
    background-color: #DFE8F4;
    /* Background color */
    color: #2b2d42;
    /* Text color */
    text-decoration: none;
    /* No underline */
    display: inline-block;
    /* Block display */
    padding: 5px;
    /* Padding */
    margin: 10px auto;
    /* Center margin */
}

a.topPage:hover {
    background-color: #2b2d42;
    /* Change background on hover */
    color: #DFE8F4;
    /* Change text color on hover */
}

#contactTable {
    background-color: #EAEAEA;
    /* Background color for contact table */
    border: 2px ridge #2b2d42;
    /* Border for contact table */
    padding: 5px;
    /* Padding for contact table */
    margin: auto;
    /* Center contact table */
}

.RowLabel {
    text-align: right;
    /* Right align text */
    font-weight: normal;
    /* Normal font weight */
}

/* Styling the table with id value of "bynoSys" in the about page: */
#bynoSys {
    margin: 10px auto;
    /* Center margin */
    border: 3px groove #2b2d42;
    /* Border for table */
    background-color: #C9D0E0;
    /* Background color for table */
    width: 95%;
    /* Set width for better layout */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    /* Subtle shadow for depth */
    overflow: hidden;
    /* Prevents border radius from affecting inner elements */
    padding: 5px;
}

#bynoSys tr {
    border-top-width: 3px;
    /* Border width for top */
    border-right-width: 3px;
    /* Border width for right */
    border-bottom-width: 3px;
    /* Border width for bottom */
    border-left-width: 3px;
    /* Border width for left */
    border-top-style: inset;
    /* Border style for top */
    border-right-style: inset;
    /* Border style for right */
    border-bottom-style: inset;
    /* Border style for bottom */
    border-left-style: inset;
    /* Border style for left */
}

#bynoUnList .sortable {
    margin-left: 50px;
    /* Left margin for sortable list */
}


/* Styling table headers */
#aboutMaterials th {
    background-color: #2b2d42;
    /* Header background color */
    color: #FFFFFF;
    /* Header text color */
    padding: 10px;
    /* Padding for header cells */
    text-align: left;
    /* Left-align text */
}

/* Styling table cells */
#aboutMaterials td {
    padding: 10px;
    /* Padding for table cells */
    border-bottom: 1px solid #B3C7E6;
    /* Border between rows */
}

/* Hover effect for table rows */
#aboutMaterials tr:hover {
    background-color: rgba(44, 62, 80, 0.1);
    /* Light highlight on hover */
}

/* Optional styling for last row to remove bottom border */
#aboutMaterials tr:last-child td {
    border-bottom: none;
    /* Remove bottom border for the last row */
}

/* Style for the definition list */
dl {
    margin: 20px 0;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

/* Style for definition terms */
dt {
    font-weight: bold;
    font-size: 1.2em;
    margin: 10px 0 5px;
    color: #2c3e50;
    /* Darker color for contrast */
}

/* Style for definition descriptions */
dd {
    margin-left: 20px;
    /* Indent descriptions */
    margin-bottom: 10px;
    /* Space between definitions */
    color: #34495e;
    /* Slightly lighter color for readability */
    line-height: 1.5;
    /* Improve readability */
}


/* Styling for the contact form */
#contactFrom {
    max-width: 600px;
    /* Limit the width of the form */
    margin: 20px auto;
    /* Center the form */
    padding: 20px;
    /* Inner padding */
    background-color: #F9F9F9;
    /* Light background */
    border: 1px solid #B3C7E6;
    /* Subtle border */
    border-radius: 10px;
    /* Rounded corners */
}

/* Styling for the table */
#contactTable {
    width: 100%;
    /* Full width */
    border-collapse: collapse;
    /* Clean look */
}

/* Styling for table cells */
#contactTable td {
    padding: 12px;
    /* Padding for cells */
    border-bottom: 1px solid #E0E0E0;
    /* Light border */
}

/* Styling for labels */
.RowLabel {
    text-align: right;
    /* Right align labels */
    font-weight: bold;
    /* Bold labels */
}

/* Styling for input fields */
#contactTable input[type="text"],
#contactTable input[type="email"],
#contactTable input[type="tel"],
#contactTable textarea {
    width: calc(100% - 20px);
    /* Full width */
    padding: 10px;
    /* Padding */
    border: 1px solid #B3C7E6;
    /* Border color */
    border-radius: 5px;
    /* Rounded corners */
}

/* Focus effect for input fields */
#contactTable input[type="text"]:focus,
#contactTable input[type="email"]:focus,
#contactTable input[type="tel"]:focus,
#contactTable textarea:focus {
    border-color: #2b2d42;
    /* Change border color on focus */
}

/* Styling for buttons */
#contactTable input[type="submit"],
#contactTable input[type="reset"] {
    background-color: #2b2d42;
    /* Dark background for buttons */
    color: #FFFFFF;
    /* White text */
    padding: 10px 15px;
    /* Padding */
    border: none;
    /* No border */
    border-radius: 5px;
    /* Rounded corners */
    cursor: pointer;
    /* Pointer cursor */
    margin-top: 10px;
    /* Space above buttons */
}

/* Hover effect for buttons */
#contactTable input[type="submit"]:hover,
#contactTable input[type="reset"]:hover {
    background-color: #1f2a38;
    /* Darker background on hover */
}