BODY {
	SCROLLBAR-FACE-COLOR: #111111;
	MARGIN: 0px;
	SCROLLBAR-HIGHLIGHT-COLOR: #222222;
	SCROLLBAR-SHADOW-COLOR: #000000;
	COLOR: #FF6600;
	SCROLLBAR-3DLIGHT-COLOR: #333333;
	SCROLLBAR-ARROW-COLOR: #f8a406;
	SCROLLBAR-TRACK-COLOR: #060606;
	SCROLLBAR-DARKSHADOW-COLOR: #000000;
	BACKGROUND-COLOR: #000000;
	font-size: 12px;

}
FONT {
	COLOR: #FFFFFF;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;


}
TH {
	COLOR: #FFFFFF;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;


}
TD {
	COLOR: #FFFFFF;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	vertical-align: top;
	padding: 0;
	margin: 0;
}
P {
	COLOR: #FFFFFF;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;

}
A:link {
	COLOR: #FFF;
	TEXT-DECORATION: none;
	font-weight: bold;
	TEXT-DECORATION: underline;
	


}
A:active {
	COLOR: #ffffff;
	TEXT-DECORATION: normal;
	TEXT-DECORATION: underline;

}
A:visited {
	COLOR: #FFF;
	;
	font-style: normal
;
	TEXT-DECORATION: underline;

}
A:hover {
	COLOR: #FFFFFF;
	TEXT-DECORATION: underline;
	text-align: center;

}
.bodyline {
	BORDER-RIGHT: #333333 1px solid; BORDER-TOP: #333333 1px solid; BORDER-LEFT: #333333 1px solid; BORDER-BOTTOM: #333333 1px solid; BACKGROUND-COLOR: black
}
TD.row1 {
	BACKGROUND-COLOR: #060606
}
TD.row2 {
	BACKGROUND-COLOR: #000000
}
TD.row3 {
	BACKGROUND-COLOR: #0c0c0c
}
TD.inputrow {
	BACKGROUND-COLOR: #111111
}
TD.rowpic {
	BACKGROUND-COLOR: #333333
}
TH {
	BACKGROUND-COLOR: #333333
}
TD.cat {
	BORDER-RIGHT: #ffffff; BORDER-TOP: #ffffff; BORDER-LEFT: #ffffff; BORDER-BOTTOM: #ffffff; BACKGROUND-COLOR: #333333
}
TD.catHead {
	BORDER-RIGHT: #ffffff; BORDER-TOP: #ffffff; BORDER-LEFT: #ffffff; BORDER-BOTTOM: #ffffff; BACKGROUND-COLOR: #333333
}
TD.catSides {
	BORDER-RIGHT: #ffffff; BORDER-TOP: #ffffff; BORDER-LEFT: #ffffff; BORDER-BOTTOM: #ffffff; BACKGROUND-COLOR: #333333
}
TD.catLeft {
	BORDER-RIGHT: #ffffff; BORDER-TOP: #ffffff; BORDER-LEFT: #ffffff; BORDER-BOTTOM: #ffffff; BACKGROUND-COLOR: #333333
}
TD.catRight {
	BORDER-RIGHT: #ffffff; BORDER-TOP: #ffffff; BORDER-LEFT: #ffffff; BORDER-BOTTOM: #ffffff; BACKGROUND-COLOR: #333333
}
TD.catBottom {
	BORDER-RIGHT: #ffffff; BORDER-TOP: #ffffff; BORDER-LEFT: #ffffff; BORDER-BOTTOM: #ffffff; BACKGROUND-COLOR: #333333
}
TD.cat {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
TD.catHead {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
TD.catBottom {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
TH.thHead {
	BORDER-RIGHT: #000000; BORDER-TOP: #000000; FONT-WEIGHT: bold; BORDER-LEFT: #000000; BORDER-BOTTOM: #000000
}
TH.thSides {
	BORDER-RIGHT: #000000; BORDER-TOP: #000000; FONT-WEIGHT: bold; BORDER-LEFT: #000000; BORDER-BOTTOM: #000000
}
TH.thTop {
	BORDER-RIGHT: #000000; BORDER-TOP: #000000; FONT-WEIGHT: bold; BORDER-LEFT: #000000; BORDER-BOTTOM: #000000
}
TH.thLeft {
	BORDER-RIGHT: #000000; BORDER-TOP: #000000; FONT-WEIGHT: bold; BORDER-LEFT: #000000; BORDER-BOTTOM: #000000
}
TH.thRight {
	BORDER-RIGHT: #000000; BORDER-TOP: #000000; FONT-WEIGHT: bold; BORDER-LEFT: #000000; BORDER-BOTTOM: #000000
}
TH.thBottom {
	BORDER-RIGHT: #000000; BORDER-TOP: #000000; FONT-WEIGHT: bold; BORDER-LEFT: #000000; BORDER-BOTTOM: #000000
}
TH.thCornerL {
	BORDER-RIGHT: #000000; BORDER-TOP: #000000; FONT-WEIGHT: bold; BORDER-LEFT: #000000; BORDER-BOTTOM: #000000
}
TH.thCornerR {
	BORDER-RIGHT: #000000; BORDER-TOP: #000000; FONT-WEIGHT: bold; BORDER-LEFT: #000000; BORDER-BOTTOM: #000000
}
TD.row3Right {
	BORDER-RIGHT: #333333 solid; BORDER-TOP: #333333 solid; BORDER-LEFT: #333333 solid; BORDER-BOTTOM: #333333 solid; BACKGROUND-COLOR: #333333
}
TD.spaceRow {
	BORDER-RIGHT: #333333 solid; BORDER-TOP: #333333 solid; BORDER-LEFT: #333333 solid; BORDER-BOTTOM: #333333 solid; BACKGROUND-COLOR: #333333
}
.maintitle {
	FONT-WEIGHT: bold; FONT-SIZE: 18px; COLOR: #f8a406; LINE-HEIGHT: 120%; FONT-FAMILY: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
H1 {
	FONT-WEIGHT: bold;
	FONT-SIZE: 22px;
	COLOR: #ffffff;
	FONT-FAMILY: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
	TEXT-DECORATION: none;
}
H2 {
	FONT-WEIGHT: bold;
	FONT-SIZE: 18px;
	COLOR: #FFFFFF;
	LINE-HEIGHT: normal;
	FONT-FAMILY: Tahoma, Geneva, sans-serif;
	TEXT-DECORATION: none
;
	font-style: normal;
	text-align: center;
}
.gen {
	FONT-SIZE: 9px
}
.genmed {
	FONT-SIZE: 11px
}
.gensmall {
	FONT-SIZE: 10px
}
.gen {
	COLOR: #ffffff
}
.genmed {
	COLOR: #ffffff
}
.gensmall {
	COLOR: #ffffff;
}
A.gen {
	COLOR: #f8a406; TEXT-DECORATION: none
}
A.genmed {
	COLOR: #f8a406; TEXT-DECORATION: none
}
A.gensmall {
	COLOR: #f8a406; TEXT-DECORATION: none
}
A.gen:hover {
	COLOR: #ffffff; TEXT-DECORATION: underline
}
A.genmed:hover {
	COLOR: #ffffff; TEXT-DECORATION: underline
}
A.gensmall:hover {
	COLOR: #ffffff; TEXT-DECORATION: underline
}
.mainmenu {
	FONT-SIZE: 11px; COLOR: #dddddd
}
A.mainmenu {
	COLOR: #f8a406; TEXT-DECORATION: none
}
A.mainmenu:hover {
	COLOR: white; TEXT-DECORATION: underline
}
.cattitle {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #ffffff; LETTER-SPACING: 1px
}
A.cattitle {
	COLOR: #ffffff; TEXT-DECORATION: none
}
A.cattitle:visited {
	COLOR: #ffffff; TEXT-DECORATION: none
}
A.cattitle:hover {
	TEXT-DECORATION: underline
}
.forumlink {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #aaaaaa
}
A.forumlink {
	COLOR: #aaaaaa; TEXT-DECORATION: none
}
A.forumlink:visited {
	COLOR: #aaaaaa; TEXT-DECORATION: none
}
A.forumlink:hover {
	COLOR: white; TEXT-DECORATION: underline
}
A.forumlink:visited {
	
}
.forumdescr {
	COLOR: #999999
}
.nav {
	FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff
}
A.nav {
	COLOR: #f8a406; TEXT-DECORATION: none
}
A.nav:hover {
	COLOR: white; TEXT-DECORATION: underline
}
.topictitle {
	FONT-WEIGHT: bold;
	FONT-SIZE: 24px;
	COLOR: #FFF
}
A.topictitle:link {
	COLOR: #f8a406; TEXT-DECORATION: none
}
A.topictitle:visited {
	COLOR: #a56c03; TEXT-DECORATION: none
}
A.topictitle:hover {
	COLOR: white; TEXT-DECORATION: underline
}
.name {
	FONT-SIZE: 11px;
	COLOR: #dddddd;
	text-align: left;
}
.postdetails {
	FONT-SIZE: 12px; COLOR: #aaaaaa
}
.postbody {
	FONT-SIZE: 11px
}
A.postlink:link {
	COLOR: #f8a406; TEXT-DECORATION: none
}
A.postlink:visited {
	COLOR: #a56c03; TEXT-DECORATION: none
}
A.postlink:hover {
	COLOR: white; TEXT-DECORATION: underline
}
.code {
	BORDER-RIGHT: #777777 1px dashed; BORDER-TOP: #777777 1px dashed; FONT-SIZE: 11px; BORDER-LEFT: #777777 1px dashed; COLOR: #0099ff; BORDER-BOTTOM: #777777 1px dashed; FONT-FAMILY: Courier, 'Courier New', sans-serif; BACKGROUND-COLOR: black
}
.quote {
	BORDER-RIGHT: #777777 1px dashed; BORDER-TOP: #777777 1px dashed; FONT-SIZE: 11px; BORDER-LEFT: #777777 1px dashed; COLOR: #999999; LINE-HEIGHT: 125%; BORDER-BOTTOM: #777777 1px dashed; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: black
}
.copyright {
	FONT-SIZE: 9px;
	COLOR: #ffffff;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	LETTER-SPACING: -1px
}
A.copyright {
	COLOR: #ffffff; TEXT-DECORATION: none
}
A.copyright:hover {
	COLOR: #ffffff; TEXT-DECORATION: underline
}
INPUT {
	BORDER-LEFT-COLOR: #222222; BORDER-BOTTOM-COLOR: #222222; FONT: 11px Verdana, Arial, Helvetica, sans-serif; COLOR: #f8a406; BORDER-TOP-COLOR: #222222; BACKGROUND-COLOR: #111111; BORDER-RIGHT-COLOR: #222222
}
TEXTAREA {
	BORDER-LEFT-COLOR: #222222; BORDER-BOTTOM-COLOR: #222222; FONT: 11px Verdana, Arial, Helvetica, sans-serif; COLOR: #f8a406; BORDER-TOP-COLOR: #222222; BACKGROUND-COLOR: #111111; BORDER-RIGHT-COLOR: #222222
}
SELECT {
	BORDER-LEFT-COLOR: #222222; BORDER-BOTTOM-COLOR: #222222; FONT: 11px Verdana, Arial, Helvetica, sans-serif; COLOR: #f8a406; BORDER-TOP-COLOR: #222222; BACKGROUND-COLOR: #111111; BORDER-RIGHT-COLOR: #222222
}
INPUT.post {
	BACKGROUND-COLOR: #111111
}
TEXTAREA.post {
	BACKGROUND-COLOR: #111111
}
SELECT {
	BACKGROUND-COLOR: #111111
}
INPUT {
	TEXT-INDENT: 2px
}
INPUT.button {
	FONT-SIZE: 11px; COLOR: #dddddd; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #111111
}
INPUT.mainoption {
	FONT-WEIGHT: bold; BACKGROUND-COLOR: #111111
}
INPUT.liteoption {
	FONT-WEIGHT: normal; BACKGROUND-COLOR: #111111
}
INPUT.checkbox {
	BACKGROUND-COLOR: #000000
}
.helpline {
	BORDER-TOP-STYLE: none;
	BORDER-RIGHT-STYLE: none;
	BORDER-LEFT-STYLE: none;
	BACKGROUND-COLOR: #000000;
	BORDER-BOTTOM-STYLE: none
}
HR {
	BORDER-RIGHT: #222222 solid; BORDER-TOP: #222222 1px solid; BORDER-LEFT: #222222 solid; BORDER-BOTTOM: #222222 solid; HEIGHT: 0px; 0px: 
}
TD.maintable {
	BACKGROUND-REPEAT: no-repeat
}
TD.mainforumcell {
	BORDER-RIGHT: #0f0f0f 1px solid; BORDER-TOP: #0f0f0f 0px solid; BORDER-LEFT: #0f0f0f 1px solid; BORDER-BOTTOM: #0f0f0f 0px solid
}
TD.newpms {
	FONT-SIZE: 12px; COLOR: white; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; TEXT-ALIGN: center
}
TD.forumcolumns {
    FONT-SIZE: 12px;
    COLOR: #FFFFFF;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: #0c0c0c;
    TEXT-ALIGN: center
}
TD.categorybar {
	BACKGROUND-COLOR: #0c0c0c
}
TD.tableborder {
	BACKGROUND-COLOR: #333333
}
TD.stdtable1 {
	COLOR: #fd4000; BACKGROUND-COLOR: #0c0c0c
}
A.faqlink {
	COLOR: #f8a406; TEXT-DECORATION: none
	text-align: center;
	FONT-SIZE: 10px;
	
}
.error {
	FONT-WEIGHT: bold;
	FONT-SIZE: 13px;
	COLOR: #f8a406;
	font-style: italic;
}
IFRAME.topicreview {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-LEFT-COLOR: #111111; BORDER-BOTTOM-WIDTH: 0px; BORDER-BOTTOM-COLOR: #111111; BORDER-TOP-COLOR: #111111; BORDER-RIGHT-WIDTH: 0px; BORDER-RIGHT-COLOR: #111111
}

.pretty-table caption
{
  caption-side: bottom;
  font-size: 0.9em;
  font-style: italic;
  text-align: right;
  padding: 0.5em 0;
}

.pretty-table th, .pretty-table td
{
	border: 1px dotted #666;
	padding: 0.5em;
	color: #fff;
}

.pretty-table th[scope=col]
{
  color: White;
  background-color: #490102;
  text-transform: uppercase;
  font-size: 0.9em;
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
}

.pretty-table th+th[scope=col]
{
  color: #fff;
  background-color: #490102;
  border-right: 1px dotted #666;
}

.pretty-table th[scope=row]
{
  background-color: #490102;
  border-right: 2px solid #333;
}

.pretty-table tr.alt th, .pretty-table tr.alt td
{
  color: #2a4763;
}

.pretty-table-roster caption
{
  caption-side: bottom;
  font-size: 0.9em;
  font-style: italic;
  text-align: right;
  padding: 0.5em 0;
}

.pretty-table-roster th, .pretty-table-roster td
{
	padding: 0.5em;
	color: #fff;
}

.pretty-table-roster th[scope=col]
{
  color: White;
  background-color: #490102;
  text-transform: uppercase;
  font-size: 0.9em;
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
}

.pretty-table-roster th+th[scope=col]
{
  color: #fff;
  background-color: #490102;
  
}

.pretty-table-roster th[scope=row]
{
  background-color: #490102;
  border-right: 2px solid #333;
}

.pretty-table-roster tr.alt th, .pretty-table-roster tr.alt td
{
  color: #2a4763;
}

/* ========================================
 * Modern CSS Grid/Flexbox Layout System
 * Replaces table-based layouts with responsive, semantic HTML5 layouts
 * Added in Phase 2: Code Modernization
 * ======================================== */

/* Container - replaces <table width="1360"> */
.site-container {
    max-width: 1360px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

/* Header Section - replaces header table rows */
.site-header {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.header-banner {
    width: 100%;
    max-width: 1360px;
    height: auto;
    display: block;
}

/* Top Panel Section - replaces 3-column table layout */
.top-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
    max-width: 1360px;
}

.top-panel-left,
.top-panel-middle,
.top-panel-right {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.top-panel-left {
    background-image: url('/images/stf_top_left_panel_v18.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.top-panel-right {
    background-image: url('/images/stf_top_right_panel_v18.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

/* Main Content Area - replaces nested table structure */
.main-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0;
    width: 100%;
    max-width: 1360px;
}

.main-content-left {
    background-image: url('/images/stf_main_left_v18.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 30px;
}

.main-content-right {
    background-color: #09131A;
    padding: 20px;
}

/* Footer Section */
.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1360px;
    padding: 20px;
    background-color: #000000;
}

.footer-copyright {
    text-align: center;
    font-size: 9px;
    color: #ffffff;
    padding: 10px;
}

/* Responsive Design */
@media (max-width: 1360px) {
    .site-container,
    .top-panels,
    .main-content {
        max-width: 100%;
    }
    
    .top-panels {
        grid-template-columns: 1fr;
    }
    
    .main-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .top-panels {
        grid-template-columns: 1fr;
    }
    
    .main-content {
        grid-template-columns: 1fr;
    }
    
    .top-panel-left,
    .top-panel-middle,
    .top-panel-right,
    .main-content-left,
    .main-content-right {
        padding: 15px;
    }
}

/* Semantic HTML5 Elements */
header,
main,
footer,
section,
article,
aside,
nav {
    display: block;
}

/* Utility Classes */
.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-item {
    flex: 1 1 auto;
}

.grid-container {
    display: grid;
    gap: 1rem;
}

/* Maintain backward compatibility with existing styles */
.layout-wrapper {
    max-width: 1360px;
    margin: 0 auto;
    width: 100%;
}

/* Image Alignment Fixes */
img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 0;
    margin: 0;
    padding: 0;
}

/* Fix table cell alignment for images */
td img {
    vertical-align: top;
    display: block;
    margin: 0;
    padding: 0;
}

/* Fix images in cells with specific widths */
td[width="452"] img,
td[width="456"] img,
td[width="453"] img {
    max-width: 100%;
    width: auto;
    height: auto;
}

/* Fix banner images to not break layout */
img[width="1360"] {
    width: 100%;
    max-width: 1360px;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
}

/* Fix middle panel image */
img[width="453"][height="165"] {
    width: 100%;
    max-width: 453px;
    height: auto;
    display: block;
}

/* Ensure background images display correctly */
td[background] {
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}

/* Fix specific background image panels - Homepage */
td[background="/images/stf_top_left_panel_v18.jpg"],
td[background="/images/stf_top_right_panel_v18.jpg"] {
    background-size: 100% 100%;
    min-height: 165px;
    background-position: top left;
}

td[background="/images/stf_main_left_v18.jpg"] {
    background-size: 100% 100%;
    min-height: 470px;
    background-position: top left;
}

td[background="/images/stf_main_right_v18.jpg"] {
    background-size: 100% 100%;
    min-height: 470px;
    background-position: top left;
}

td[background="/images/info_panel.jpg"] {
    background-size: 100% 100%;
    min-height: 331px;
    background-position: top left;
}

/* Template-based background images */
td[background="/images/stf_site_left_v18.jpg"],
td[background="/images/stf_site_right_v18.jpg"] {
    background-size: 100% 100%;
    background-position: top left;
    background-repeat: repeat-y;
}

td[background="/images/stf_fleet_bottom_left_corner_v18.jpg"],
td[background="/images/stf_fleet_bottom_right_corner_v18.jpg"],
td[background="/images/stf_fleet_bottom_right_middle_corner_v18.jpg"],
td[background="/images/stf_fleet_bottom_left_v18.jpg"] {
    background-size: 100% 100%;
    background-position: top left;
    background-repeat: no-repeat;
}

/* Fix table layout alignment */
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    padding: 0;
    table-layout: fixed; /* Prevent table from expanding beyond set width */
}

table[width="1360"] {
    margin: 0 auto;
    width: 100%;
    max-width: 1360px;
    table-layout: fixed;
    box-sizing: border-box;
}

/* Ensure all table cells respect their width attributes */
table[width="1360"] td[width] {
    box-sizing: border-box;
    overflow: hidden;
}

/* Specific width enforcement for main content cells */
table[width="1360"] td[width="656"] {
    width: 656px;
    max-width: 656px;
    min-width: 656px;
}

table[width="1360"] td[width="48"] {
    width: 48px;
    max-width: 48px;
    min-width: 48px;
}

/* Fix nested tables */
td table {
    width: 100%;
    table-layout: auto; /* Allow nested tables to size naturally */
}

/* Ensure table cells respect their widths */
td[width] {
    max-width: 100%;
    overflow: hidden;
}

/* Fix table cell padding that breaks alignment */
td[cellpadding="0"] td,
table[cellpadding="0"] td {
    padding: 0 !important;
}

/* Ensure images don't create gaps */
td img {
    vertical-align: top;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0; /* Remove line-height gap */
}

/* Fix banner images specifically */
img[width="1360"] {
    width: 100%;
    max-width: 1360px;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 0;
}

/* Remove <br /> gaps after images */
img + br {
    display: none !important;
    line-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
}

/* Fix any spacing issues with consecutive images */
img + img {
    margin-top: 0;
    padding-top: 0;
    display: block;
}

/* Ensure table cells with images have no extra spacing */
td:has(img) {
    line-height: 0;
    font-size: 0;
}

td:has(img) * {
    line-height: normal;
    font-size: inherit;
}

/* Fix vertical bar alignment */
td[width="48"] {
    vertical-align: middle;
    text-align: center;
    padding: 0;
}

/* Fix top panel alignment (homepage specific - 3 column layout) */
td[width="452"], td[width="456"] {
    vertical-align: top;
    padding: 0;
}

td[width="452"] {
    width: 33.2%;
    max-width: 452px;
}

td[width="456"] {
    width: 33.5%;
    max-width: 456px;
}

td[width="453"] {
    width: 33.3%;
    max-width: 453px;
}

/* Fix main content columns (homepage specific) - Original working widths */
td[width="661"] {
    width: 661px !important;
    min-width: 661px;
    max-width: 661px;
}

td[width="664"] {
    width: 664px !important;
    min-width: 664px;
    max-width: 664px;
}

td[width="48"] {
    width: 48px !important;
    min-width: 48px;
    max-width: 48px;
}

/* Template-based layout (4 column: 36, 1160, 129, 35) */
td[width="36"] {
    width: 2.65%;
    min-width: 36px;
    max-width: 36px;
}

td[width="1160"] {
    width: 85.3%;
    max-width: 1160px;
}

td[width="129"] {
    width: 9.5%;
    max-width: 129px;
}

td[width="35"] {
    width: 2.6%;
    min-width: 35px;
    max-width: 35px;
}

/* Ensure images in table cells don't break layout */
td img[width], td img[height] {
    max-width: none;
    width: auto;
    height: auto;
}

/* Fix banner images */
img[width="1360"] {
    width: 100%;
    max-width: 1360px;
    height: auto;
    display: block;
}

/* Fix nested table alignment */
td table {
    width: 100%;
}

/* Remove default cell padding that breaks alignment */
td[height], td[width] {
    padding: 0;
    margin: 0;
}

/* Fix background image containers */
td[background] table {
    background: transparent;
}

/* Ensure content in background image cells is visible */
td[background] td {
    background: transparent;
}

/* ========================================
 * Phase 4: Frontend Modernization
 * Enhanced CSS with modern features
 * ======================================== */

/* Modern CSS Variables for Theme Colors */
:root {
    --stf-primary-color: #f8a406;
    --stf-bg-dark: #000000;
    --stf-bg-darker: #060606;
    --stf-bg-panel: #091418;
    --stf-text-light: #ffffff;
    --stf-text-muted: #aaaaaa;
    --stf-border-color: #333333;
    --stf-link-color: #f8a406;
    --stf-link-hover: #ffffff;
}

/* Modern Typography */
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: var(--stf-text-light);
    background-color: var(--stf-bg-dark);
}

/* Improved Link Styles */
a {
    color: var(--stf-link-color);
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

a:hover,
a:focus {
    color: var(--stf-link-hover);
    text-decoration: underline;
    outline: 2px solid var(--stf-primary-color);
    outline-offset: 2px;
}

a:focus-visible {
    outline: 2px solid var(--stf-primary-color);
    outline-offset: 2px;
}

/* Skip to Main Content Link (Accessibility) */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--stf-primary-color);
    color: var(--stf-bg-dark);
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-to-main:focus {
    top: 0;
}

/* Improved Form Elements */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--stf-border-color);
    border-radius: 4px;
    background-color: #111111;
    color: var(--stf-text-light);
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--stf-primary-color);
    box-shadow: 0 0 0 2px rgba(248, 164, 6, 0.2);
}

/* Modern Button Styles */
button,
input[type="submit"],
input[type="button"] {
    padding: 10px 20px;
    background-color: var(--stf-primary-color);
    color: var(--stf-bg-dark);
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: #ffb733;
    transform: translateY(-1px);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(0);
}

button:focus,
input[type="submit"]:focus,
input[type="button"]:focus {
    outline: 2px solid var(--stf-primary-color);
    outline-offset: 2px;
}

/* Improved Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

table th,
table td {
    padding: 12px;
    text-align: left;
    border: 1px solid var(--stf-border-color);
}

table th {
    background-color: var(--stf-bg-panel);
    font-weight: bold;
    color: var(--stf-text-light);
}

table tr:nth-child(even) {
    background-color: var(--stf-bg-darker);
}

table tr:hover {
    background-color: #0c0c0c;
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Improved Accessibility - Focus Styles */
*:focus {
    outline: 2px solid var(--stf-primary-color);
    outline-offset: 2px;
}

/* Screen Reader Only Class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Enhanced Responsive Design */
@media (max-width: 1200px) {
    .site-container,
    .top-panels,
    .main-content {
        max-width: 100%;
        padding: 0 10px;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 24px;
    }
    
    h2 {
        font-size: 20px;
    }
    
    .top-panels {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .main-content {
        grid-template-columns: 1fr;
    }
    
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Stack form elements on mobile */
    form {
        width: 100%;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    
    h1 {
        font-size: 20px;
    }
    
    h2 {
        font-size: 18px;
    }
    
    button,
    input[type="submit"],
    input[type="button"] {
        width: 100%;
        padding: 12px;
    }
}

/* Print Styles */
@media print {
    body {
        background: white;
        color: black;
    }
    
    a {
        color: black;
        text-decoration: underline;
    }
    
    .site-header,
    .site-footer,
    nav {
        display: none;
    }
}

/* Reduced Motion (Accessibility) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    a {
        text-decoration: underline;
    }
    
    button,
    input[type="submit"] {
        border: 2px solid currentColor;
    }
}