@charset "utf-8";

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }       /*Add a css reset to the top of your website style sheet, different browsers render some default margin and padding and perhaps external style sheets do something you are not aware of too, a css reset will just initialize a fresh palette so to speak */


body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.oneColLiqCtrHdr #container {
	width: 95%;  /* this will create a container 100% of the browser width */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
/*	border: 1px solid #000000;	*/
	text-align: center; /* this overrides the text-align: center on the body element. */
	/*text-align: left;*/ /* this overrides the text-align: center on the body element. */
}
.oneColLiqCtrHdr #header {
	background: #FFFFFF; 
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColLiqCtrHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColLiqCtrHdr #mainContent {
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #FFFFFF;
}
.oneColLiqCtrHdr #footer { 
	padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#FFFFFF;
} 
.oneColLiqCtrHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.style5 {
	font-size: small;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
.style6 {font-weight: bold}
.style7 {
	font-weight: bold;
	font-size: small;
    font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFFFFF;
}
.style8 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFFFFF;
}
.style9 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-style: italic;
	color: #0000FF;
	font-size: 100%;
}
.style11 {
    color: #FFFFFF;
}
.style12 {
	font-size: xx-large
}
.style14 {font-size: 36px}
.style15 {
	font-size: 12px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
.style15Left {
	font-size: 12px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
    text-align:left;
}
.style17 {
    font-size: 4pt;
    font-weight: bold;
}
.style18 {font-size: 9pt}
.style19 {font-size: 10pt}
.style21 {
	font-size: small;
	font-weight: bold;
}
.style22 {
    font-size: small;
    text-align:right;
    height:20px;
    width:160px;
}
.style22left {
    font-size: small;
    text-align:left;
    height:20px;
}
.style23 {font-size: 10%}
.style24 {
    font-size: small;
    font-weight: bold;
    font-style: italic;
    text-align: left;
    color:red;
}
.style25 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #0000FF;
    font-size: 22px;
    font-weight: bold;
    text-align:center;
}

.fontSize7 {
    font-size: 7pt;
    color: maroon;
	font-style: italic;
    font-family: Geneva, Arial, Helvetica, sans-serif;
}
.fontSize7Right {
    font-size: 7pt;
    color: maroon;
	font-style: italic;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    text-align: Right;
}
.fontSize8 {
    font-size: 9pt;
    font-family: Geneva, Arial, Helvetica, sans-serif;
}
.fontSize8Left {
    font-size: 8pt;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    text-align: Left;
}
.fontSize8Right {
    font-size: 8pt;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    text-align: Right;
}

.trHeight30 {
    height: 30px;
}

.boxBorder {
    border: 2px solid black;

}
.textBoxPrefix {
    font-size: small;
    text-align: right;
    height: 20px;
    width: 160px;
    text-wrap:none;
}
.textBoxPrefixSmallerFont {
    font-size: 9px;
    text-align: right;
    height: 20px;
    width: 160px;
    text-wrap:none;
}
.textBoxSufix {
    font-size: small;
    text-align: left;
    }
.textBoxSufixItalicBolder {
    font-size: smaller;
    text-align: left;
	font-style: italic;
    font-weight:bolder;
    }
.textBoxLooksNoEdit {
    border-color: blue;
    border-style: outset;
    background-color:lightgray;
    /*border-width: 1px;*/
    text-align: center;
}

.textBoxLooksNoEditNoFill {
    border-color: blue;
    border-style: outset;
    border-width: 1px;
    text-align: center;
}

.textBoxLooksLeftNoEditGreen {
    border-color: blue;
    border-style: outset;
    background-color:lightgreen;
    border-width: 1px;
    text-align: left;
}

.textBoxLooksLeftNoEditNoBgColor {
    border-color: blue;
    border-style: outset;
    background-color:none;
    border-width: 1px;
    text-align: left;
}

.textBoxLooksLeftNoEdit {
    border-color: blue;
    border-style: outset;
    border-width: 1px;
    background-color:lightgray;
    text-align: left;
}

.textBoxLooksRightNoEdit {
    border-color: blue;
    border-style: outset;
    border-width: 1px;
    background-color:lightgray;
    text-align: right;
}

.textBoxLooksLeft {
    border-color: black;
    border-style: inset;
    border-width: 2px;
    text-align: left;
}
.textBoxLooksLeftSmallFont {
    border-color: black;
    border-style: inset;
    border-width: 2px;
    text-align: left;
    font-size: small;
}

.textBoxLooksMid {
    border-color: black;
    border-style: inset;
    border-width: 2px;
    text-align: center;
}
.textBoxLooksMidSmallFont {
    border-color: black;
    border-style: inset;
    border-width: 2px;
    text-align: center;
    font-size: small;
}
.textBoxLooksMidSmallerFont {
    border-color: black;
    border-style: inset;
    border-width: 2px;
    text-align: center;
    font-size: 10px;
}
.textLableLooksMidSmallerFont {
    text-align: center;
    font-size: 10px;
}
.textBoxLooksRight {
    border-color: black;
    border-style: inset;
    border-width: 2px;
    text-align: right;
    font-size: small;
}

.textTitleLeft {
    font-size: small;
    text-align: left;
    font-weight:bolder;
}
.textTitleLeftUnderLine {
    font-size: small;
    text-align: left;
    text-decoration: underline;
}
.textTitleLeftUnderLineBold {
    font-size: small;
    text-align: left;
    font-weight:bolder;
    text-decoration: underline;
    vertical-align:baseline;
}
.textTitleCenter14 {
    font-size: 14px;
    text-align: center;
    font-weight:bolder;
}
.textTitleCenter0 {
    font-size: small;
    text-align: center;
    font-weight:bolder;
}
.textTitleCenter {
    font-size: small;
    text-align: center;
    font-weight:bolder;
    background-color:#CCFFFF;
}
.textTitleCenterSmallerFont {
    font-size: 9px;
    text-align: center;
    font-weight:bolder;
    background-color:#CCFFFF;
}
.textTitleRight {
    font-size: small;
    text-align: right;
    font-weight:bolder;
}
.textTitleRightSmallerFont {
    font-size: 9px;
    text-align: right;
    font-weight:bolder;
}
.textTitleRight14 {
    font-size: 14px;
    text-align: right;
    font-weight:bolder;
}

.differentColor {
    color:darkred;
    background-color:orange;
}

.searchTag_div 
{
    float:left;
    width:130px;
    height:30px;
    margin:0 10px 0 0;
    text-align:right;
    vertical-align:middle;
    font-size:small;
	font-style: italic;
    font-weight:bolder;
}
.searchString_div 
{
    float:left;
    width:600px;
    height:30px;
    z-index:3000;
    vertical-align:middle;
}
.label_box {
    text-align:left;
    text-overflow:clip; 
    border:#000000 1px solid;
}





.style4Link {
	font-weight: bold;
	font-size: 20px;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #0000FF;
}
a:hover {
	text-decoration: none;
	color: #666666;
}
a:active {
	text-decoration: none;
}
a {
	font-weight: bold;
}

.menu 
{
    font-family: arial, sans-serif; 
    width:100%;  
    position:relative;
    z-index:5000; 
    font-size:9pt; 
    margin:0 0;
    background:#0066CC;
    top: 0px;
    left: 0px;
    height: 20px;
    border-top: 1px dotted #5392C5;
	border-bottom: 1px solid #005DAA;
}
.menu ul li a, .menu ul li a:visited 
{
    padding:0; 
    margin:0;
    display:block; 
    text-decoration:none;  
    width:110px; 
    height:20px; 
    text-align:center; 
    color:#fff; 
    line-height:20px; 
    font-size:9pt; 
    overflow:hidden;
}
.menu ul 
{
    padding:0; 
    margin:0;
    list-style-type: none; 
}
.menu ul li 
{
    padding:0; 
    padding-top:0px; 
    margin:0;
    float:left; 
    position:relative; 
    background:#0066cc ; 
    height:20px;
    border-right: 1px dotted #5392C5;
}
.menu ul li ul 
{
    display: none; 
    margin-left: 0px;
}
.menu ul li li a 
{
    width:160px;
    height:20px; 
    line-height:20px; 
    overflow: hidden;
}
.menu ul li li 
{ 
    padding: 0; 
    height: 20px;
}

/* specific to non IE browsers */
.menu ul li:hover a 
{
    padding:0; 
    margin:0;
    color:#fff; 
    height:20px; 
    background:#80abde; 
}
.menu ul li:hover ul 
{
    display:block; 
    position:absolute; 
    /*top:30px;*/ 
    top:20px; 
    left:0; 
    width:160px;
}
.menu ul li:hover ul li a.hide 
{
    padding:0; 
    margin:0;
    background:#13528a; 
    color:#fff;
}
.menu ul li:hover ul li:hover a.hide 
{
    padding:0; 
    margin:0;  
    color:#fff;
}
.menu ul li:hover ul li:hover a.hide:hover 
{
    padding:0; 
    margin:0;  
    color:#000;
}
.menu ul li:hover ul li ul
 {
    display: none;
    margin-left:0;
    border-top:1px solid #80abde;
}
.menu ul li:hover ul li a
{ 
    padding:0; 
    margin:0;
    width: 160px;
    height:20px;
    line-height:20px; 
    display:block;
    background:#80abde; 
    color:#fff; 
    /*
    border:1px solid #fff;
    border-bottom:1px solid #fff;*/
    border: 1px dotted #5392C5;
    text-align:left;
}
.menu ul li:hover ul li a:hover 
{ 
    padding:0; 
    margin:0;
    text-decoration: underline;
}
.menu ul li:hover ul li:hover ul 
{
    padding:0; 
    margin:0;
    display:block; 
    position:absolute; 
    left:162px; 
    top:0;
}
.menu ul li:hover ul li:hover ul.left 
{
    /*left:-162px;*/
}
.menu ul li:hover ul li:hover ul li ul  
{ 
    display:none;
}
.menu ul li:hover ul li:hover ul li:hover ul 
{ 
    display:block;
}

.dataImageSize {
    width: 85%;
    height: auto;
    text-align: center;
}

.spaceBtwBlocks {
    width:100%;
    height:60px; 
}

.spaceBtwTitleAndImage {
    width:100%;
    height:20px;
}

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
    text-align: center;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }

h7 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-decoration:underline;
}

hr {
    background-color:#000000; 
    border-width:0px; 
    color:#000000; 
    height:1px; 
    display: inline-block; 
    text-align: left; 
    vertical-align:super;
    width:100%;
}
p{
    display: inline;
}
.normal {
    font-variant-position: normal;
    font-size: 7px;
}
.super {
    font-variant-position: super;
}
.sub {
    font-variant-position: sub;
    font-size: 10px;
}

.btn1_mouseover 
{
    padding-bottom: 1px;
    BORDER-RIGHT: #333366 1px solid; 
    PADDING-RIGHT: 2px; 
    BORDER-TOP: #333366 1px solid; 
    PADDING-LEFT: 2px; 
    FONT-SIZE: 12px; 
    font-weight:bold; 
    FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#333366); 
    BORDER-LEFT: #333366 1px solid; 
    COLOR: blue; 
    PADDING-TOP: 2px; 
    BORDER-BOTTOM: #333366 1px solid;
        background: url(gradient.jpg);
    /* Webkit: Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#333366));
    /* Webkit: Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(top, #ffffff, #333366);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #ffffff, #333366);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #ffffff, #333366);
    /* IE 10 */
    background: -ms-linear-gradient(top, #ffffff, #333366);
    /* IE < 10 */
    FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff, endColorStr=#333366);
    /* CSS3*/
    background: linear-gradient(#ffffff, #333366);
}

.btn1_mouseout 
{
    padding-bottom: 1px;
    BORDER-RIGHT: #005DAA 1px solid; 
    PADDING-RIGHT: 2px; 
    BORDER-TOP: #005DAA 1px solid; 
    PADDING-LEFT: 2px; 
    BORDER-LEFT: #005DAA 1px solid;
    COLOR: black; 
    FONT-SIZE: 12px; 
    font-weight:bold; 
    PADDING-TOP: 0px; 
    BORDER-BOTTOM: #005DAA 1px solid;
    /* Webkit: Safari 4-5, Chrome 1-9 */
    /*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#005DAA));*/
    /* Webkit: Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(top, #ffffff, #005DAA);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #ffffff, #005DAA);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #ffffff, #005DAA);
    /* IE 10 */
    background: -ms-linear-gradient(top, #ffffff, #005DAA);
    /* IE < 10 */
    FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff, endColorStr=#005DAA);
    /* CSS3*/
    background: linear-gradient(#ffffff, #005DAA);
}

.container .img 
{
    position:absolute;
    float:left;
    right:0;
    top:0;
}

.container .table-div 
{
    position:absolute; 
    float:left;
    padding-right:400px;
}


.split-container {
    display: flex; /* Aligns children side-by-side */
    flex-direction: row;
    width: 100%;
    min-height: 400px;
    max-height: auto;       /*550px;*/
    gap: 5px; /* Space between the two sections */
}

.left-pane {
    flex: 0 0 40%; /* Fixed 40% width base */
    min-width: 0; /* Critical for Chrome to allow shrinking */
    /*background-color: #f9f9f9;*/
    padding: 5px;
}

.right-pane {
    flex: 0 0 60%; /* Fixed 60% width base */
    min-width: 0; /* Critical for Chrome to allow shrinking */
    display: flex;
    justify-content: left;
    align-items: flex-start;
}

.split-50 .left-pane,
.split-50 .right-pane {
    flex: 0 0 50% !important;
}

.image-wrapper {
    width: 100%;
    height: auto;
}

.main-image {
    max-width: 100%; /* Ensures image fits within the 60% pane */
    height: auto;  /*400px;*/
    /*display: block;*/
    /*border: 1px solid #ddd;*/
}

.input-table {
    width: 100%;
    table-layout: fixed; /* Optional: Forces uniform column widths */
}

    .input-table td {
        padding: 8px;
    }

/*2/3/2026*/
.modal {
    display: none;
    position: fixed;
    z-index: 9999; /* Higher priority */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85); /* Darker overlay */
    justify-content: center;
    align-items: center;
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
    animation: zoom 0.6s; /* Optional: Zoom-in animation */
}

@keyframes zoom {
    from {transform: scale(0)} to {transform: scale(1)}
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    cursor: pointer;
}

/*
.thumb {
    width: 150px;
    cursor: pointer;
    transition: 0.3s;
}
*/
.thumb {
    max-width: 100%; /* Instead of 150px */
    height: auto;
    cursor: pointer;
    transition: 0.3s;
}

    .thumb:hover { opacity: 0.7;  }

/* Modal Background */
.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Enlarged Image */
.modal-content {
    max-width: 80%;
    max-height: 80%;
    animation: zoom 0.6s;
}


/* Force these rules to override everything else when the modal is open */
#imageModal .modal-content.full-view {
    max-width: 95vw !important;
    max-height: 85vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}


@keyframes zoom {
    from {transform: scale(0)} to {transform: scale(1)}
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 40px;
    cursor: pointer;
}

/*2/3/2026*/


@media (max-width: 768px) {
    .split-container {
        flex-direction: column;
    }

    .left-pane, .right-pane {
        flex: 0 0 100%;
    }
}


/*3/9/2026*/

/* The Container (3x3 Grid) */
.sections-gallery {
    display: grid;
    /* Keeps 3 professional columns, allows 4 rows to grow downward */
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 10px auto;
    /*    margin: 30px auto;*/
    max-width: 1050px; /* 300px * 3 + gaps */
    /*max-width: 1100px;*/ /* Adjusted slightly for the 12-item layout */
}

/* The Individual Box (Border/Background) */
.cut-box {
    text-align: center;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* The Image (The Drawing) */
.cut-view {
    width: 300px;
    height: 300px;
}

/* The Text (Section Name) */
.cut-label {
    font-weight: bold;
    color: #003366; /* KYTC Blue? */
    margin-top: 10px;
}

.design-heading {
    color: #003366; /* KYTC Blue */
    border-left: 5px solid #003366;
    padding-left: 15px;
    margin: 40px 0 20px 0;
    font-family: 'Verdana', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}


#imageModal.modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    /* Change from flex to block to allow scrolling */
    overflow-y: auto;
    text-align: center;
}

/*#imageModal .modal-content.full-view {
    margin: 50px auto 20px auto;*/ /* 50px top margin for the 'X' */
    /*max-width: 90vw !important;*/
    /* Reduce height to 75% to GUARANTEE room for the caption below it */
    /*max-height: 75vh !important;
    object-fit: contain !important;
    display: block !important;
}*/

#caption {
    color: #00BFFF; /* DeepSkyBlue to make it pop against black */
    font-size: 28px;
    font-weight: bold;
    padding: 20px;
    margin-bottom: 50px; /* Space at the very bottom */
    width: 100%;
    display: block;
}

/* Update your existing .modal-content.full-view */
#imageModal .modal-content.full-view {
    /* Use 98% of the screen width and height */
    width: 98vw !important;
    height: 95vh !important;
    /* Center the image */
    margin: auto;
    display: block;
    /* MAGIC PROPERTY: Fits the whole image into the box without cropping */
    object-fit: contain !important;
    /* Remove any old fixed constraints */
    max-width: none !important;
    max-height: none !important;
    animation: zoom 0.4s;
}

/* Ensure the modal container itself uses flex to center everything */
/*#imageModal.modal {
    display: none;*/ /* Changed via JS */
    /*position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}*/

#imageModal.modal {
    display: none !important; /* Hidden by default */
    position: fixed;
    z-index: 999999; /* Extremely high to stay above everything */
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.95);
    /* Flex handles the centering for maximization */
    justify-content: center;
    align-items: center;
}

#imageModal .modal-content.full-view {
    max-width: 98vw !important;
    max-height: 92vh !important;
    width: auto;
    height: auto;
    object-fit: contain; /* Keeps the whole engineering drawing visible */
    margin: auto;
    display: block;
}

#imageModal .modal-content.full-view {
    /* FORCE the image to take up the screen space */
    width: 95vw !important;
    height: 85vh !important;
    /* SCALE the image up to fit that space while keeping its shape */
    object-fit: contain !important;
    /* Remove any limits that might be stopping it from growing */
    max-width: none !important;
    max-height: none !important;
    margin: auto;
    display: block;
}