/*
 * 重新設計的 XnView 圖片瀏覽網頁樣式
 * 採用現代、簡約的設計風格
 */

/* === 全域設定/重設 === */
body {
    font-family: Arial, sans-serif;
    background: #f0f0f0; 
    color: #333333; 
    text-align: center;
    margin: 0;
    padding: 0;
}

/* === 連結樣式 === */
a:link, a:visited {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s;
}
a:active, a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* === 圖片容器與圖片本身 === */
img {
    border: none;
    max-width: 100%; 
    height: auto;
    display: block; 
    margin: 0 auto;
    border-radius: 4px; 
}

/* === 佈局容器 (使用表格來模擬現代卡片佈局) === */
table.container {
    background: transparent;
    width: 100%;
}

table.outertable {
    width: 90%;
    max-width: 1200px; 
    background: #ffffff;
    border: none;
    border-collapse: collapse;
    margin: 5px auto; 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); 
    border-radius: 8px; 
    overflow: hidden; 
}

/* === 頂部標題 (Header) === */
th.header {
    background: #007bff; 
    color: #ffffff; 
    font-size: 24px;
    font-weight: 500;
    height: 60px;
    padding: 0 20px;
    vertical-align: middle;
    text-align: center;
}

/* === 次級標題/描述區 (Secondary Header) === */
td.secheader {
    background: #f8f9fa; 
    color: #663399;
    font-size: 16px;
    padding: 15px 20px;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
    font-weight: bold;
}


/* === 圖片內容區 (Content) - 包含縮圖表格的容器 === */
td.content {
    padding: 20px; 
    vertical-align: top;
}

/* 縮圖表格設定極小間距 */
td.content > table {
    margin: 0 auto;
    border-collapse: separate; 
    border-spacing: 4px; /* 縮圖卡片之間的間距 */
    width: 100%; 
}

/* === 縮圖單元格樣式 (Thumbs) - 每個縮圖獨立卡片設計 (藍色框線) === */
td.thumbs {
    /* 讓每個縮圖看起來像一個獨立的卡片 */
    background-color: #ffffff; 
    border: 1px solid #007bff; /* *** 關鍵調整：藍色框線， *** */
    border-radius: 4px; 
    padding: 4px; /* 卡片內部留白 */
    
    vertical-align: bottom; /* 統一底部對齊 */
    
    text-align: center;
    font-size: 12px;
    color: #555555;
    
    /* 增加輕微陰影 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 稍微加強陰影以配合邊框 */
}

/* 縮圖圖片的樣式 */
td.thumbs img {
    margin: 0 auto 0 auto; /* 圖片與文字間距設為 0 */
    border: none; 
    display: block;
}

/* 懸停效果 */
td.thumbs a:hover {
    text-decoration: none;
}
td.thumbs a:hover img {
    opacity: 0.85; 
    transition: opacity 0.3s;
}

/* === 描述區 (Description) === */
td.desc {
    background: #f8f9fa; 
    color: #555555;
    font-size: 14px;
    padding: 15px 20px;
    text-align: center;
    border-top: 1px solid #dee2e6;
}

/* === 頁腳 (Footer) === */
td.footer {
    background: transparent; 
    color: #aaaaaa; 
    font-size: 11px;
    padding: 20px;
}