/* ================================================================
   cjp.css - 在线查家谱 统一样式表
   · PC 最小 960px，手机最大 640px
   · 仅用颜色处理前景/背景，无背景图片
   · 用 emoji 做文本图标
   ================================================================ */

/* ---------- 全局重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
    background-color: #f7f1e4;
    color: #222;
    font-family: "Microsoft YaHei", "PingFang SC", "SimSun", sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

/* ---------- 链接 ---------- */
a:link    { color: #8b1a1a; text-decoration: none; }
a:visited { color: #5c1414; }
a:hover   { color: #c0392b; text-decoration: underline; }
a:active  { color: #2c3e50; }
.nav_s ul li {font-size:1.15rem;padding:0 0 8px;}

/* ---------- 主容器：PC ≥ 960px ---------- */
.conter,
.cjp-wrap {
    background: #fcf8f0;
    /* 左右边框淡化细化：原 2px 深红 #8b1a1a → 1px 浅米色，不再喧宾夺主 */
    border-left: 1px solid #e8dfc3;
    border-right: 1px solid #e8dfc3;
    min-width: 960px;
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}

/* ---------- LOGO 区（页头） ---------- */
.cjp-logo {
    background: #8b1a1a;
    color: #fff7e6;
    padding: 14px 24px 10px;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
    /* 原 3px 金黄 → 1px 淡金黄，与页头整体一致，避免粗线突兀 */
    border-bottom: 1px solid #f2cf6e;
}
.cjp-logo-a {
    color: #fff7e6 !important;
    text-decoration: none !important;
}
.cjp-logo-sub {
    display: inline-block;
    margin-left: 18px;
    font-size: 12px;
    font-weight: normal;
    color: #ffe7b5;
    letter-spacing: 0;
}

/* ---------- 顶部菜单 ---------- */
.cjp-menu {
    width: 100%;
    background: #a02b2b;
    min-height: 40px;
    line-height: 40px;
    font-size: 15px;
    text-align: center;
    /* 原 2px 深红底 → 1px 浅金色分隔，更轻薄 */
    border-bottom: 1px solid #e4b866;
}
.cjp-menu ul { list-style: none; display: inline-block; }
.cjp-menu li {
    float: left;
    width: auto;
    padding: 0 14px;
}
.cjp-menu li a {
    color: #fff7e6 !important;
    display: block;
    padding: 0 10px;
}
.cjp-menu li a:hover {
    background: #7a1212;
    color: #ffd966 !important;
    text-decoration: none;
}
#GB_BIG { color: #ffd966 !important; cursor: pointer; font-weight: bold; }

/* ---------- 旧 menu.php 兼容 ---------- */
.logo { display: none; }
.menu { display: none; }

/* ---------- 页脚 ---------- */
.cjp-foot-line {
    height: 4px;     /* 原 6px 过粗 → 4px，整体更协调 */
    background-color: #d9be8a; /* 淡化：深红 #8b1a1a → 浅米黄 */
    border-top: 1px solid #f2cf6e; /* 淡化金黄 */
    margin-top: 10px;
}
.cjp-foot {
    background-color: #f1e6cf;
    color: #5a3a1a;
    text-align: center;
    padding: 12px 10px 18px;
    font-size: 13px;
    line-height: 1.9;
    border-top: 1px solid #e8dfc3;  /* 再淡化一点 */
}
.cjp-foot-smile {
    margin-top: 6px;
    font-size: 15px;
    color: #8b1a1a;
}

/* ---------- 通用表格 ---------- */
.biaoge {
    border-collapse: collapse;
    background: #fff;
}
.biaoge td,
.biaoge th {
    /* 边框淡化：原 1px #c8bc94 → 1px 淡米色 #e8dfc3，整体视觉更轻 */
    border: 1px solid #e8dfc3;
    padding: 4px 8px;
    font-size: 13px;
    vertical-align: top;
}

/* ---------- 家谱列表 ---------- */
.bar { height: 10px; }
.jplist {
    width: 100%;
    margin: 0 auto;
    background: url("../images/nei_bg000.jpg");
    color: #a02b2b;
    border: 1px solid #e8dfc3;  /* 淡化 */
}
.jplist .biaoge td {
    border: 1px solid #e8dfc3;   /* 淡化 */
}

/* 家谱标题条（原 background=jiaputitlebg.jpg → 纯色底 */
.jplist > table.biaoge:first-of-type,
.jplist-top {
    background: url("../images/nei_bg000.jpg");
    color: #a02b2b;
}
.jplist-top td a {
    color: #a02b2b !important;
    font-weight: bold;
}
.jiapuitem {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* ---------- 当前位置导航 ---------- */
.cjp-crumb {
    padding: 6px 16px;
    background: #fff6df;
    border-bottom: 1px solid #e8dfc3;
    font-size: 13px;
    color: #5a3a1a;
    align-items: center; /* 垂直居中 */
}

/* ---------- 输入框/按钮 ---------- */
input[type=text],
input[type=button],
input[type=submit],
input[type=password],
textarea,
select {
    border: 1px solid #cbb699;  /* 淡化：原 #b1957c → #cbb699 */
    background: #ffffff;
    padding: 2px 4px;
    font-size: 13px;
}
input[type=button],
input[type=submit] {
    background: #fff6df;
    color: #5a3a1a;
    cursor: pointer;
}
input[type=button]:hover,
input[type=submit]:hover {
    background: #ffd966;
}

/* ---------- 家族树树形(原treebuilder) ---------- */
.name {
    width: 100%;
    border: 1px solid #3e3d32;
    background-color: #f0f1f3;
    padding: 6px 10px;
}
.list {
    width: 220px;
    height: 90%;
    overflow: auto;
    border: 1px solid #3e3d32;
    background-color: #d9e7d9; /* aquamarine → 纯色 */
    float: right;
    padding: 10px;
}
.list ul { list-style: none; }

/* ---------- 树节点样式（jpxq.php，原 tree ul li 纯颜色） */
.tree { width: 70%; }
.tree ul {
    list-style: none;
    /* 原 url(tree/I.gif) repeat-y → 左边框实现竖线 */
    border-left: 1px dashed #a0895e;
    margin-left: 12px;
    padding-left: 12px;
    border: 1px solid #3e3d32;
    background: #ffffff;
}
.tree a {
    display: inline-block;
    min-width: 55px;
    padding: 0 8px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background-color: #dde0d9;
    border: 1px solid #3e3d32;
    color: #2c3e50;
    margin: 2px 0;
    border-radius: 2px;
}
.tree li {
    margin: 0;
    padding: 2px 0 2px 18px;
    position: relative;
    color: #336699;
    font-weight: bold;
}
.tree li::before {
    content: "";
    position: absolute;
    left: 0; top: 12px;
    width: 14px;
    border-top: 1px solid #a0895e;
}
.tree li:last-child::after {
    content: "";
    position: absolute;
    left: -1px; top: 14px; bottom: 0;
    width: 1px;
    background: #fff; /* 遮盖末尾之后的竖线，代替原 L.gif 作用 */
}

/* ---------- 五世同堂容器 ---------- */
#tongtang {
    width: 100%;
    max-width: 1328px;
    height: 500px;
    overflow: auto;
    background: #fffdf7;
    border: 1px solid #e8dfc3;   /* 淡化 */
}

/* ================================================================
   响应式：手机最大 640px
   ================================================================ */
@media screen and (max-width: 640px) {
    .conter,
    .cjp-wrap {
        min-width: 100% !important;
        max-width: 640px !important;
        width: 100% !important;
        border-left: 0;
        border-right: 0;
    }
    html, body { font-size: 14px; }
    .cjp-logo {
        font-size: 17px;
        padding: 10px 12px 8px;
    }
    .cjp-logo-sub { display: none; }
    .cjp-menu { font-size: 13px; min-height: 36px; line-height: 36px; }
    .cjp-menu li { padding: 0 6px; }
    .cjp-menu li a { padding: 0 4px; }
    #tongtang { height: 360px; width: 100%; }
    .list { width: 40%; height: 300px; font-size: 12px; }
    .tree { width: 100%; float: none; }
    input[type=text],
    input[type=button] {
        font-size: 15px; /* 防止 iOS 自动缩放 */
    }
}

/* ================================================================
   PC（>=960px）强化显示
   ================================================================ */
@media screen and (min-width: 960px) {
    .conter,
    .cjp-wrap {
        min-width: 960px;
    }
}