@charset "utf-8";
/*
**************************************************************************************************************************************
UDN 部落格模板 - 舊版模板
**************************************************************************************************************************************
目錄:
1. 基礎設定 (HTML & Body)
2. 頁面結構 (Header, Menu, Footer)
3. 主要內容區 (Content & Sidebar)
4. 相簿功能
5. 訪客簿

- 經典主題
**************************************************************************************************************************************
*/

/* ==================================================================================
   1. 基礎設定
   ================================================================================== */

/* HTML 根元素 - 全局置中對齊 */
html {
  text-align: center;
}

/* Body 主體 - 背景與基礎排版 */
body {
  margin: 0px;
  text-align: left;
  background-image: url(http://g.udn.com.tw/community/img/style238/body_bg.jpg);
  background-repeat: no-repeat;
  background-color: #7e0001;
  /* background-size: cover; 改為 cover 讓背景圖片覆蓋整個區域 */
  background-position: center; /* 背景圖片置中 */
  background-attachment: fixed; /* 背景固定,不隨滾動 */
  position: relative;
  min-height: 100vh; /* 確保 body 至少佔滿整個視窗高度 */
}

/* Body 上半部透明漸層覆蓋層 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.85) 0%,
    /* 上方 85% 透明白色 */ rgba(255, 255, 255, 0.7) 30%,
    /* 30% 處 70% 透明 */ rgba(255, 255, 255, 0.5) 50%,
    /* 50% 處 50% 透明 */ rgba(255, 255, 255, 0.3) 70%,
    /* 70% 處 30% 透明 */ rgba(255, 255, 255, 0) 100% /* 底部完全透明 */
  );
  pointer-events: none; /* 確保不會阻擋滑鼠事件 */
  z-index: 0;
}

#container {
  margin: auto !important;
  background-color: #ffffff;
}

/* --- 文字與排版 --- */
div,
table {
  color: #cc3333;
  font-size: 12px;
}

/* ==================================================================================
   2. 頁面結構
   ================================================================================== */

/* --- Header 區域 (頁首/山頭) --- */
#header {
  position: relative;
  width: 770px;
  height: 450px;
  margin-bottom: 45px;
  visibility: visible !important;
  background-image: url(https://g.udn.com.tw/upfiles/B_53/536e8b45/PSN_PHOTO/903/f_29200903_1.png);
  background-size: cover;
  background-position: center;
  background-color: #ffffff;
}

/* Header 頂部線條 */
#header_top {
  position: absolute;
  left: 0px !important;
  top: 0px !important;
  height: 2px;
  background: #114091;
  background-color: #4f4f4f;
}

/* --- 聯合網誌功能列 --- */
#header_top,
#header_common_left,
#header_common_main,
#header_common_main_bg,
#header_common_line,
#header_common_right {
  visibility: hidden;
}

/* 聯合網誌功能列連結 */
#header_common a {
  color: #ffffff;
  text-decoration: none;
}

/* 聯合網誌功能列下拉選單 */
.chapter {
  width: 100%;
  border: 1px solid #b3cce6;
  background-color: #ebf2f8;
}

.chapter-point {
  color: #4d4d4d;
}

.chapter-line {
  background-color: #d8e5f2;
}

/* 聯合網誌功能列下拉選單連結 */
.chapter-text,
a.chapter-text:link,
a.chapter-text:hover,
a.chapter-text:visited {
  color: #274d74;
}

/* 表頭連結 */
#header a:link,
#header a:visited {
  text-decoration: none;
}

#header a:hover {
  text-decoration: underline;
}

/* 表頭部落格 logo 定位 */
#header_logo {
  position: absolute;
  left: 10px;
  top: 300px;
  visibility: hidden;
}

/* 表頭部落格名稱 */
#header_name {
  position: absolute;
  left: 30px;
  top: 30px;
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
}

#header_name a {
  color: #ffffff;
}

/* 表頭部落格網址標題與簡介 */
#header_url {
  position: absolute;
  left: 30px;
  bottom: 18px;
}

#header_url a:link,
a:visited {
  color: #999999;
}

#header_url a:hover {
  color: #999999;
  text-decoration: underline;
}

/* 表頭加入好友、訂閱或部落格功能列 */
#header_items {
  position: absolute;
  left: 30px;
  bottom: 2px;
}

#header_items a {
  color: #999999;
}

#header_items a:hover {
  color: #999999;
  text-decoration: underline;
}

/* 表頭搜尋區塊 */
#header_search {
  position: absolute;
  right: 30px;
  bottom: -10px;
}

.inputbox {
  border: 1px solid #808080;
}

/* --- Menu Bar 區域 (主選單列) --- */

/* 主選單橫線 */
#header_menus_line {
  position: absolute;
  border-top: 0px solid #4180c0;
  left: 10px;
  top: 200px;
  width: 100%;
  visibility: hidden;
}

/* 主選單定位 */
#header_menus {
  position: absolute;
  left: 0px;
  top: 440px;
  margin-top: 10px;
}

/* 主選單區塊設定 */
#header_menus ul {
  list-style: none;
  margin: 0px;
  padding-left: 50px;
}

/* 主選單選項設定 */
#header_menus li {
  display: inline;
  height: 30px;
  padding-top: 10px;
  padding-right: 30px;
  text-indent: 15px;
  float: left;
  position: relative;
}

/* 主選單小圖示 */
#home {
  background: url() no-repeat left top;
}

#article {
  background: url() no-repeat left top;
}

#photo {
  background: url() no-repeat left top;
}

#gbook {
  background: url() no-repeat left top;
}

#profile {
  background: url() no-repeat left top;
}

#manage {
  background: url() no-repeat left top;
}

/* 主選單連結樣式 */
#header_menus li a {
  color: #cc3333;
  font-size: 13px;
  padding-left: 25px;
}

#header_menus a:hover {
  color: #cc3333;
}

/* ==================================================================================
   3. 主要內容區域
   ================================================================================== */

/* --- Sidebar 側邊欄 --- */
#sidebar {
  float: left;
}

#sidebar table {
  position: relative !important;
  margin: auto !important;
}

.sidebar-bg {
  background-color: #b3b3b3;
}

.sidebar-panel-bg {
  background-color: #f1f1f1;
}

/* --- Content 內容區 --- */
#content {
  float: left;
}

/* 內容大標題 */
#content .main-topic {
  color: #cc3333;
  font-weight: bold;
}

#content a.main-topic:link {
  color: #000000;
  text-decoration: none;
  font-weight: bold;
}

#content a.main-topic:visited {
  color: #cc3333;
  text-decoration: none;
  font-weight: bold;
}

/* 一般大標題 */
#content .main-title {
  color: #cc3333;
}

#content a.main-title:link,
#content a.main-title:visited {
  text-decoration: none;
}

#content a.main-title:hover {
  color: #cc3333;
}

/* 內文、留言 */
#content .main-text {
  color: #000000;
}

#content a.main-text:link,
#content a.main-text:visited {
  color: #666666;
  text-decoration: none;
}

#content a.main-text:hover {
  color: #333333;
}

/* ==================================================================================
   4. 相簿功能
   ================================================================================== */

/* --- 個人相簿 --- */

/* 相簿樣式 */
.photo_album {
  width: 140px; /* 寬度 */
  height: 140px; /* 高度 */
  text-align: center; /* 相片水平對齊 */
  vertical-align: middle; /* 相片垂直對齊 */
  background: url(http://g.udn.com/community/img/user_all/photo_album.gif)
    no-repeat; /* 背景圖 */
}
#photo_album_list {
  list-style: none; /* 清單樣式無 */
  margin: 0px; /* 邊框距離 */
  padding: 0px; /* 內距 */
}
#photo_album_list li {
  margin: auto;
  padding: 5px 20px; /* 相簿內距 */
  display: inline; /* 水平排列 */
  float: left; /* 浮動排列固定 */
  width: 140px; /* 寬度不設定，與相簿本身一樣寬 */
  height: 280px; /* 調整高度設定 */
  table-layout: fixed; /* 強制換行 */
  word-wrap: break-word; /* 強制換行 */
  word-break: keep-all; /* 強制換行 */
}

/* 相片樣式 */
.photo_picture {
  width: 140px; /* 寬度 */
  height: 144px; /* 高度 */
  text-align: center; /* 相片水平對齊 */
  vertical-align: middle; /* 相片垂直對齊 */
  background: url(http://g.udn.com/community/img/user_all/photo_picture.gif)
    no-repeat; /* 背景圖 */
}
#photo_picture_list {
  list-style: none; /* 清單樣式無 */
  margin: 0px; /* 邊框距離 */
  padding: 0px; /* 內距 */
}
#photo_picture_list li {
  margin: auto; /* 邊框距離 */
  padding: 5px 3px; /* 相簿內距 */
  display: inline; /* 水平排列 */
  float: left; /* 浮動排列固定 */
  width: 140px; /* 寬度不設定，與相片本身一樣寬 */
  height: 240px; /* 調整高度設定 */
  table-layout: fixed; /* 強制換行 */
  word-wrap: break-word; /* 強制換行 */
  word-break: keep-all; /* 強制換行 */
}

/* ==================================================================================
   5. 訪客簿
   ================================================================================== */

/* 回覆標題區 */
.gbook-title {
  color: #4d0099;
  background-color: #7e0001;
  padding: 10px 10px 0px;
}

/* 回覆內容區 */
.gbook-content {
  color: #333333;
  background-color: #ffffff;
  padding: 5px 10px 5px;
  margin: 10px;
}

/* 回覆區塊背景 */
.gbook-bg {
  background-color: #7e0001;
}

/* ==================================================================================
   6. 頁尾區域
   ================================================================================== */

/* --- Footer 區域 (頁尾) --- */
#footer {
  background: #ffffff;
}