/* ===================================
   ORIGINAL STYLES (Desktop First)
   =================================== */

a{font-family:Verdana; font-size:8pt; color:white; text-decoration:none;}
a:link{font-family:Verdana; font-size:8pt; color:white; text-decoration:none;}
a:visited{font-family:Verdana; font-size:8pt; color:white; text-decoration:none;}
a:hover{font-family:Verdana; font-size:8pt; color:#9A0002; text-decoration:none;}
a:active{font-family:Verdana; font-size:8pt; color:white; text-decoration:none;}
body{font-family:Verdana;font-family:Helvetica,sans-serif;font-size:12px;color:#FFFFFF}
td,th{font-family:Verdana;font-size:11px;color:#cccccc;}
body{
background-color:#0a0a0a;
color:#CCCCCC;
}
.alert{background:#fff6bf url(../images/exclamation.png) center no-repeat;background-position:15px 50%;text-align:left;padding:5px 20px 5px 45px;border-top:2px solid #ffd324;border-bottom:2px solid #ffd324;color:#000000}
.loginn{background:#EEEEEE url(../images/loginti.png) center no-repeat;background-position:15px 50%;text-align:left;padding:5px 20px 5px 45px;border-top:1px solid #000000;border-bottom:1px solid #000000;color:#000000}
.loginn2{background:#FFFFFF;background-position:15px 50%;text-align:left;padding:5px 20px 5px 45px;border-top:1px solid #000000;border-bottom:1px solid #000000;color:#000000;}
.alert2{background:#6699CC url(../images/exclamation.png) center no-repeat;background-position:15px 50%;text-align:left;padding:5px 20px 5px 45px;border-top:2px solid #000000;border-bottom:2px solid #000000;color:#000000}
.TextBox{font-family:Verdana;font-size:8pt;background-color:White;border-color:Black;border-style:solid;border-width:1px;color:Black}
.TextBox2{font-family:Verdana;font-size:8pt;background-color:Black;border-color:White;border-style:solid;border-width:1px;color:White}
.GridHeader{	background-image:url('../images/menubaker.gif');height:21px;overflow:hidden;background-repeat:repeat-x;color:#ffffff;text-align:center;padding-left:5px;padding-top:2px;font-family:Helvetica,sans-serif;font-size:12px;vertical-align:middle;font-weight:bold;
}
.GridHeader a{font-family:Helvetica,sans-serif;font-size:12px;color:#ffffff;font-weight:bold}
.GridHeader td{font-family:Helvetica,sans-serif;font-size:12px;color:#ffffff;font-weight:bold}
.header-title {
    background: linear-gradient(135deg, #1a0000 0%, #4d0000 50%, #1a0000 100%) !important;
    border: 2px solid #8b0000 !important;
    border-radius: 8px !important;
    padding: 20px 10px !important; /* Set consistent padding */
    margin-bottom: 12px !important;
    text-align: center !important;
    color: #fff !important;
    font-size: 26px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    box-shadow: 0 0 20px rgba(139, 0, 0, 0.5) !important;
    min-height: 60px !important; /* Force minimum height */
    line-height: 1.2 !important; /* Control text spacing */
    display: flex !important; /* Use flexbox for centering */
    align-items: center !important; /* Vertical center */
    justify-content: center !important; /* Horizontal center */
}
.GridRow{background-color: #444444;text-align:left;font-family:Verdana;font-size:8pt;}
.ForumBlock{border-style:solid;border-width:1px;font-family:Verdana;font-size:8pt;background-color: #444444;}
.ForumBlock a{color:#FFFFFF;}
.Collapse{display:none;width:100%}
.DeCollapse{display:inline-block;width:100%}
.Invisible{display:none}
.NormalFont{font-family:Verdana;font-size:8pt;color:White;text-decoration:none}
.Newm{background-color:Black}
.Newm a{background-color:#4444;color:white}
div.pagination{padding:3px;margin:3px;font-size:10px;font-family:Verdana}
div.pagination a{padding:0px 3px 0px 0px;color:blue;font-size:10px;font-family:Verdana}
div.pagination a:hover,div.pagination a:active{padding:0px 3px 0px 0px;color:#333333;font-size:10px;font-family:Verdana}
div.pagination span.current{padding:0px 3px 0px 0px;color:#333333;font-size:10px;font-weight:bold;font-family:Verdana}
div.pagination span.disabled{padding:0px 3px 0px 0px;color:#333333;font-family:Verdana}
input.radioButton{width:100px;height:150px;background-color:#000000}
div.menuIn{border-top: 0px solid #272727;text-decoration:none;padding-top: 4px;padding-bottom: 4px;background-color: #151515;width: 157px;color: #EEEEEE;}
div.menuOut{border-top: 0px solid #272727;text-decoration:none;padding-top: 4px;padding-bottom: 4px;background-color: #151515;width: 157px;color: #EEEEEE;}
div.menuIn a{text-decoration:none;padding-top: 3px;padding-bottom: 3px;width: 177px;color: #EEEEEE;}
div.menuOut a{text-decoration:none;padding-top: 3px;padding-bottom: 3px;width: 177px;color: #EEEEEE;}
div.menuIn a:hover,
div.menuOut a:hover {background-color: #440000; color: #9a0002; width: 177px}
.post_view {
max-width: 900px;
max-height: auto;
}


/* ===================================
   RESPONSIVE MEDIA QUERIES
   =================================== */

/* Base improvements for all devices */
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* Tablets and iPads (Portrait) - 768px and below */
@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
        padding: 10px;
    }
    
    td, th {
        font-size: 12px;
    }
    
    a {
        font-size: 10pt;
        /* Larger touch targets for mobile */
        min-height: 44px;
        display: inline-block;
        line-height: 44px;
    }
    
    /* Menu adjustments */
    div.menuIn,
    div.menuOut {
        width: 100%;
        max-width: 100%;
    }
    
    div.menuIn a,
    div.menuOut a {
        width: 100%;
        padding: 10px;
        display: block;
    }
    
    div.menuIn a:hover,
    div.menuOut a:hover {
        width: 100%;
    }
    
    /* Alert boxes */
    .alert,
    .alert2,
    .loginn,
    .loginn2 {
        padding: 10px 15px 10px 40px;
        background-position: 10px 50%;
        font-size: 12px;
    }
    
    /* Grid adjustments */
    .GridHeader {
        font-size: 11px;
        padding: 5px;
        height: auto;
        min-height: 30px;
    }
    
    .GridRow {
        font-size: 10pt;
    }
    
    /* Post view */
    .post_view {
        max-width: 100%;
        width: 100%;
    }
    
    /* Text inputs */
    .TextBox,
    .TextBox2 {
        font-size: 14px;
        padding: 8px;
        width: 100%;
        max-width: 100%;
    }
    
    /* Pagination */
    div.pagination {
        font-size: 12px;
        padding: 10px 5px;
        text-align: center;
    }
    
    div.pagination a {
        padding: 5px 8px;
        font-size: 12px;
        margin: 2px;
        display: inline-block;
    }
    
    div.pagination span.current {
        padding: 5px 8px;
        font-size: 12px;
    }
}

/* Mobile phones (Portrait) - 480px and below */
@media screen and (max-width: 480px) {
    body {
        font-size: 13px;
        padding: 5px;
    }
    
    td, th {
        font-size: 11px;
        padding: 8px 4px;
    }
    
    a {
        font-size: 11pt;
    }
    
    /* Stack menus vertically */
    div.menuIn,
    div.menuOut {
        width: 100%;
        margin-bottom: 5px;
    }
    
    /* Alert boxes - smaller padding */
    .alert,
    .alert2,
    .loginn,
    .loginn2 {
        padding: 8px 10px 8px 35px;
        background-size: 20px;
        font-size: 11px;
    }
    
    .GridHeader {
        font-size: 10px;
        padding: 3px;
    }
    
    /* Radio buttons */
    input.radioButton {
        width: 60px;
        height: 90px;
    }
}

/* Small mobile phones - 360px and below */
@media screen and (max-width: 360px) {
    body {
        font-size: 12px;
    }
    
    td, th {
        font-size: 10px;
        padding: 6px 2px;
    }
    
    .GridHeader {
        font-size: 9px;
    }
}

/* Landscape orientation adjustments */
@media screen and (max-width: 768px) and (orientation: landscape) {
    body {
        padding: 5px;
    }
    
    div.menuIn,
    div.menuOut {
        display: inline-block;
        width: 48%;
        margin: 1%;
        vertical-align: top;
    }
}

/* iPad specific (768px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    body {
        font-size: 13px;
    }
    
    div.menuIn,
    div.menuOut {
        width: 180px;
    }
    
    div.menuIn a,
    div.menuOut a {
        width: 180px;
    }
    
    div.menuIn a:hover,
    div.menuOut a:hover {
        width: 180px;
    }
}