/* ============================================================
   PUSDIKLAT DEPDIKNAS - CSS FIX
   Restores layout for pusdiklatdepdiknas.net (Joomla 1.x)
   ============================================================ */

/* === RESET & BASE === */
* { box-sizing: border-box; }

body {
    font-family: Tahoma, Arial, Verdana, sans-serif;
    font-size: 12px;
    background-color: #d6dce8;
    color: #333333;
    margin: 0;
    padding: 8px 0;
}

a { color: #003399; text-decoration: none; }
a:hover { color: #cc0000; text-decoration: underline; }

/* === MAIN WRAPPER TABLE === */
#Table_01 {
    background-color: #ffffff;
    border: 1px solid #aabbcc;
}

/* === HEADER AREA === */
/* Date cell - top left */
#Table_01 > tbody > tr:first-child > td:nth-child(3) {
    font-size: 11px;
    color: #333;
    font-weight: bold;
    text-align: center;
}

/* Top menu bar background */
.moduletabletopmenu {
    width: 100%;
}
.moduletabletopmenu td {
    text-align: center;
}

/* Top nav links */
a.mainlevel-nav {
    color: #003366;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    padding: 0 2px;
}
a.mainlevel-nav:hover {
    color: #cc0000;
    text-decoration: underline;
}
span.mainlevel-nav {
    color: #336699;
}

/* === HEADER IMAGE REPLACEMENT === */
/* Simulate the original header gradient banner */
#Table_01 > tbody > tr:nth-child(1) {
    background: linear-gradient(135deg, #003366 0%, #0055aa 40%, #0077cc 70%, #0055aa 100%);
    height: 260px;
}

/* Date + top menu row */
#Table_01 > tbody > tr:nth-child(3) {
    background: linear-gradient(to bottom, #336699, #1a4d80);
    color: #fff;
    height: 25px;
}

#Table_01 > tbody > tr:nth-child(3) td {
    color: #fff;
    font-size: 11px;
    font-weight: bold;
}

/* === LEFT SIDEBAR === */
.menu {
    display: block;
    width: 100%;
}

/* === MODULE TABLE (sidebar widgets) === */
table.moduletable {
    width: 100%;
    border: none;
    margin-bottom: 6px;
}

table.moduletable th {
    background: linear-gradient(to bottom, #336699, #1a4d80);
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 6px;
    text-align: left;
    border-bottom: 2px solid #0044aa;
}

table.moduletable td {
    background-color: #f0f4f8;
    padding: 3px 4px;
    vertical-align: top;
}

/* Left column menu links */
.menu a.mainlevel,
a.mainlevel {
    color: #003399;
    font-size: 12px;
    text-decoration: none;
    display: block;
    padding: 1px 2px;
    line-height: 1.6;
}
.menu a.mainlevel:hover,
a.mainlevel:hover {
    color: #cc0000;
    text-decoration: underline;
}
a#active_menu {
    color: #cc0000;
    font-weight: bold;
}

/* === MAIN CONTENT AREA === */
/* Center column background */
div.componentheading {
    background: linear-gradient(to bottom, #336699, #1a4d80);
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 8px;
    margin-bottom: 8px;
    border-bottom: 2px solid #0044aa;
}

table.contentpaneopen {
    width: 100%;
    border: none;
}

td.contentheading {
    font-size: 13px;
    font-weight: bold;
    color: #003366;
    padding: 4px 2px;
    border-bottom: 1px solid #336699;
}

td.buttonheading {
    text-align: right;
    padding: 2px;
    width: auto !important;
}
td.buttonheading a {
    font-size: 10px;
    color: #336699;
}

span.article_seperator {
    display: block;
    height: 1px;
    background-color: #ccddee;
    margin: 8px 0;
    border-top: 1px solid #aabbcc;
}

table.blog {
    width: 100%;
}
table.blog td {
    vertical-align: top;
    padding: 4px;
}

/* Content text */
.contentpaneopen td[valign="top"] {
    font-size: 12px;
    line-height: 1.6;
    padding: 4px 6px;
    text-align: justify;
}
.contentpaneopen td[valign="top"] p {
    margin: 6px 0;
    text-align: justify;
}

/* === RIGHT SIDEBAR === */
/* Search box */
div.search input.inputbox {
    width: 130px;
    padding: 3px 4px;
    border: 1px solid #aabbcc;
    font-size: 11px;
    color: #666;
}

/* === CALENDAR (mod_events) === */
table.mod_events_table {
    border-collapse: collapse;
    font-size: 10px;
    width: 100%;
}
.mod_events_td_dayname {
    background-color: #336699;
    color: #ffffff;
    text-align: center;
    padding: 2px 3px;
    font-weight: bold;
    border: 1px solid #2255aa;
}
.mod_events_td_daynoevents {
    text-align: center;
    padding: 2px;
    border: 1px solid #dde;
    background-color: #f5f8fc;
}
.mod_events_td_dayoutofmonth {
    text-align: center;
    padding: 2px;
    border: 1px solid #dde;
    background-color: #e8eef5;
    color: #999;
}
.mod_events_td_todaynoevents {
    text-align: center;
    padding: 2px;
    border: 1px solid #336699;
    background-color: #ffff99;
    font-weight: bold;
}
a.mod_events_daylink {
    color: #003399;
    text-decoration: none;
    font-size: 10px;
}
tr.mod_events_dayname td {
    text-align: center;
}
span.sunday { color: #ff6666 !important; }
span.saturday { color: #ff9900 !important; }

/* === POLLING === */
table.poll {
    width: 100%;
    font-size: 11px;
}
table.pollstableborder {
    font-size: 11px;
    width: 100%;
}
.sectiontableentry1 { background-color: #f0f4f8; padding: 2px 3px; }
.sectiontableentry2 { background-color: #e4ecf4; padding: 2px 3px; }

/* Buttons */
input.button {
    background: linear-gradient(to bottom, #5588cc, #336699);
    color: #ffffff;
    border: 1px solid #225588;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    border-radius: 2px;
}
input.button:hover {
    background: linear-gradient(to bottom, #336699, #1a4d80);
}

/* Login form */
input.inputbox {
    border: 1px solid #aabbcc;
    padding: 3px 4px;
    font-size: 11px;
    width: 120px;
}

/* === FOOTER BAR === */
#Table_01 > tbody > tr:last-child td,
td[background*="index_24"] {
    background: linear-gradient(to bottom, #336699, #1a4d80) !important;
    height: 28px;
}

/* === COLUMN BACKGROUNDS === */
/* Left column */
#Table_01 > tbody > tr > td:first-child + td + td:not([colspan]) {
    background-color: #e8f0f8;
    padding: 4px;
    vertical-align: top;
    border-right: 1px solid #aabbcc;
}

/* Center column */
td[background*="index_16"],
td[background*="index_15"] {
    background-color: #ffffff !important;
    padding: 6px !important;
    vertical-align: top;
}

/* Right column */
td[background*="index_17"] {
    background-color: #f0f4fa !important;
    padding: 4px !important;
    vertical-align: top;
}

/* Background image cells - replace with color */
td[background] {
    background-image: none !important;
}

/* Separator column */
td[background*="index_15"],
td[background*="index_17"] {
    background-color: #c8d8e8 !important;
    width: 8px !important;
}

/* === SECTION HEADINGS === */
.menu table th {
    background: linear-gradient(to bottom, #336699, #1a4d80);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 6px;
    text-align: left;
}

/* === NEWSFLASH SCROLLING AREA === */
div[style*="position:relative"] {
    border: 1px solid #c0d0e0;
    border-radius: 2px;
    overflow: hidden;
}

/* === VISITORS COUNTER === */
.moduletable td table td {
    font-size: 11px;
    color: #333;
    padding: 1px 3px;
}

/* === RESPONSIVE BODY CENTERING === */
#Table_01 {
    margin: 0 auto;
}

/* === HEADER TOP AREA LOGO === */
/* First big row - header banner area */
#Table_01 > tbody > tr:first-child {
    background: linear-gradient(135deg, #002255 0%, #003d99 50%, #0066cc 100%);
    min-height: 260px;
}
#Table_01 > tbody > tr:first-child td {
    background-color: transparent !important;
    background-image: none !important;
}

/* SIMULATE PUSDIKLAT LOGO/BANNER AREA */
#Table_01 > tbody > tr:first-child td[colspan="3"][rowspan="2"] {
    text-align: center;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    padding: 20px;
    background: transparent !important;
}
#Table_01 > tbody > tr:first-child td[colspan="3"][rowspan="2"]::before {
    content: "PUSDIKLAT DEPDIKNAS";
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    letter-spacing: 2px;
}

/* Sidebar left background */
td > span.menu {
    display: block;
    background-color: #e8f0f8;
    padding: 4px;
    min-height: 400px;
}

/* Content area background */
div.componentheading + table {
    background-color: #fff;
}