/* ============================================================
   Gobstagram skin — shared by every page.
   ============================================================ */
* { margin:0; padding:0 }
body { font:11px Verdana,Arial,Helvetica,sans-serif; color:#000; background:#003366; text-align:center; cursor:default; }
a { color:#003399; text-decoration:none }
a:hover { text-decoration:underline }
img { border:0 }
.clear { clear:both }
#shell { width:800px; margin:0 auto; text-align:left; background:#fff; border-left:10px solid #fff; border-right:10px solid #fff }

/* ---- top chrome ---- */
#header { background:#6699cc; border-bottom:1px solid #336699; padding:6px 10px }
#header .logo { float:left; color:#fff; font:bold 22px Arial,Helvetica,sans-serif; letter-spacing:-1px }
#header .logo span { font:10px Verdana,sans-serif; letter-spacing:0; font-weight:normal; color:#cce0f5; display:block }
#header .search { float:right; padding-top:4px; color:#fff; font-size:10px; text-align:right }
#header .search .headsearch { margin-bottom:3px }
#header .search .headsearch input[type=text] { font:10px Verdana,sans-serif; border:1px solid #336699; padding:2px; width:130px }
#header .search .headsearch input[type=submit] { font:10px Verdana,sans-serif; background:#e5e5e5; border:1px outset #ccc; padding:1px 6px; cursor:pointer }
#header .search .auth { font-size:10px }
#navbar { background:#003366; padding:4px 8px; font-size:10px; color:#6699cc }
#navbar a { color:#fff }
#bannerad { text-align:center; padding:8px 0; border-bottom:1px solid #ddd }
#bannerad .adlabel { font-size:9px; color:#999; display:block; margin-bottom:2px }
#bannerad img { border:1px solid #999 }

#content { padding:10px 0 }
#feedcol { float:left; width:485px }
#sidecol { float:right; width:300px }
/* profile layout reuses the same shell, columns swapped */
#leftcol { float:left; width:305px }
#rightcol { float:right; width:485px }

/* ---- boxes / bands ---- */
.box { margin-bottom:12px }
.box .hd { background:#ffcc99; border:1px solid #ff9933; border-bottom:0; color:#7a3a00; font-weight:bold; padding:3px 6px }
.box .bd { border:1px solid #ff9933; background:#fff; padding:6px }
.band { background:#ff9933; color:#fff; font-weight:bold; padding:3px 6px; margin-bottom:6px }
.section { margin-bottom:16px }
.section p { margin-bottom:8px; line-height:1.5 }

/* ---- stories ---- */
.stories { border:1px solid #ff9933; background:#fff; padding:8px 4px; margin-bottom:12px; overflow:hidden; white-space:nowrap; overflow-x:auto; display:flex; align-items:flex-start; justify-content:center }
.story { display:inline-flex; flex-direction:column; align-items:center; width:74px; text-align:center; flex-shrink:0 }
.story .ring { width:58px; height:58px; margin:0 0 3px 0; border-radius:50%; padding:3px; background:#cc6600; flex-shrink:0 }
.story.seen .ring { background:#bbb }
.story .ph { width:52px; height:52px; border-radius:50%; border:2px solid #fff; overflow:hidden; background:#7a8ca3 }
.story .ph img { width:100%; height:100%; object-fit:cover; display:block }
.story .nm { font-size:9px; display:block; overflow:hidden; text-overflow:ellipsis }

/* ---- post card ---- */
.post { border:1px solid #ff9933; background:#fff; margin-bottom:14px }
.post .top { overflow:hidden; padding:5px 6px; border-bottom:1px solid #ffcc99; background:#fffaf3 }
.post .top .av { float:left; width:30px; height:30px; border:1px solid #999; margin-right:6px; background:#7a8ca3; overflow:hidden }
.post .top .av img { width:100%; height:100%; object-fit:cover; display:block }
.post .top .meta { float:left; line-height:1.3; padding-top:1px }
.post .top .meta a { font-weight:bold; font-size:11px }
.post .top .meta .loc { font-size:9px; color:#777 }
.post .top .dots { float:right; color:#cc6600; font-weight:bold; padding-top:6px; letter-spacing:1px }

/* ---- per-post centered carousel ---- */
.gallery { position:relative; background:#d8cfc0 }
.post-swiper { overflow:hidden; padding:8px 0 }
.post-swiper .swiper-wrapper { display:flex; align-items:center }
.post-swiper .swiper-slide { width:100%; flex-shrink:0 }
.post-swiper.single .swiper-slide { width:100% }
.post-swiper .slide {
	position:relative; aspect-ratio:1/1; overflow:hidden; border:1px solid rgba(0,0,0,.18);
	background-color:#aeb8c6;
	background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='.7'%20stroke-width='4'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Crect%20x='20'%20y='26'%20width='60'%20height='48'%20rx='5'/%3E%3Ccircle%20cx='37'%20cy='43'%20r='6'/%3E%3Cpath%20d='M24%2070%20L46%2050%20L58%2062%20L68%2054%20L78%2066'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:center; background-size:48px 48px;
}
.post-swiper .slide.c1 { background-color:#7a8ca3 }
.post-swiper .slide.c2 { background-color:#a3937a }
.post-swiper .slide.c3 { background-color:#8aa37a }
.post-swiper .slide.c4 { background-color:#a37a8c }
.post-swiper .slide.c5 { background-color:#7aa39e }
.post-swiper .slide img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; display:block; background:#000 }

.gallery .swiper-button-next, .gallery .swiper-button-prev {
	width:26px; height:26px; margin-top:-13px; border-radius:0;
	background:#ffcc99; border:2px outset #ff9933; color:#cc6600; box-shadow:0 1px 2px rgba(0,0,0,.3)
}
.gallery .swiper-button-next:active, .gallery .swiper-button-prev:active { border-style:inset }
.gallery .swiper-button-next:after, .gallery .swiper-button-prev:after { font-size:13px; font-weight:bold }
.gallery .swiper-button-disabled { opacity:.35 }
.gallery .swiper-pagination { position:static; padding:5px 0 4px; text-align:center; background:#fff; border-bottom:1px solid #ffcc99 }
.gallery .swiper-pagination-bullet { background:#cc6600; opacity:.45; width:7px; height:7px }
.gallery .swiper-pagination-bullet-active { background:#ff9933; opacity:1 }

/* fallback when Swiper can't load */
.gallery.nolib .post-swiper { overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch }
.gallery.nolib .swiper-wrapper { gap:36px; padding:0 11% }
.gallery.nolib .swiper-slide { scroll-snap-align:center; opacity:1; transform:none }
.gallery.nolib .swiper-button-next, .gallery.nolib .swiper-button-prev, .gallery.nolib .swiper-pagination { display:none }

/* ---- actions / likes / caption / comments ---- */
.post .acts { padding:5px 6px; overflow:hidden }
.post .acts .ico { display:inline-block; min-width:22px; height:18px; margin-right:4px; padding:0 3px; background:#c9d6e8; border:1px outset #9fb6d4; text-align:center; line-height:18px; font-size:12px; color:#336; cursor:pointer; vertical-align:middle }
.post .acts .ico:active { border-style:inset }
.post .acts button.ico { font-family:inherit }
.post .acts .ico.liked { color:#cc0000 }
.post .acts .save { float:right }
.post .likes { padding:0 6px 3px; font-weight:bold; font-size:11px }
.post .likes b { color:#cc0000 }
.post .cap { padding:0 6px 4px; line-height:1.45 }
.post .cap a { font-weight:bold }
.post .cmts { padding:0 6px 3px }
.post .cmts a.viewall { color:#777; font-size:10px }
.post .cmts .c { font-size:11px; margin-top:2px }
.post .cmts .c a { font-weight:bold }
.post .stamp { padding:3px 6px 6px; color:#999; font-size:9px; text-transform:uppercase; letter-spacing:.5px }
.post .addc { border-top:1px solid #ffcc99; padding:5px 6px; overflow:hidden }
.post .addc input[type=text] { font:10px Verdana,sans-serif; border:1px solid #ccc; padding:3px; width:78%; float:left }
.post .addc input[type=submit] { font:10px Verdana,sans-serif; background:#ffcc99; border:1px outset #ff9933; color:#cc6600; font-weight:bold; padding:2px 6px; float:right; cursor:pointer }

/* ---- sidebar ---- */
.miniprof { border:1px solid #ff9933; background:#fff; padding:8px; overflow:hidden; margin-bottom:12px }
.miniprof .pic { float:left; width:54px; height:54px; border:1px solid #999; margin-right:8px; background:#7a8ca3; overflow:hidden }
.miniprof .pic img { width:100%; height:100%; object-fit:cover; display:block }
.miniprof .who { float:left; line-height:1.4 }
.miniprof .who b { font-size:12px }
.miniprof .who .online { color:#ff6600; font-weight:bold; font-size:10px }
.miniprof .who a { font-size:10px }
.sugg { list-style:none }
.sugg li { padding:4px 0; border-bottom:1px dotted #ccc; overflow:hidden }
.sugg .av { float:left; width:30px; height:30px; border:1px solid #999; margin-right:6px; background:#7a8ca3; overflow:hidden }
.sugg .av img { width:100%; height:100%; object-fit:cover; display:block }
.sugg .nm { float:left; line-height:1.3; padding-top:2px }
.sugg .nm a { font-weight:bold }
.sugg .nm span { display:block; font-size:9px; color:#777 }
.sugg .follow { float:right; font-size:10px; padding-top:8px }

/* ---- music player ---- */
.player .bd { background:#e8eef7 }
.player .track { font-weight:bold; margin-bottom:4px }
.player .controls { overflow:hidden }
.player .btn { float:left; width:22px; height:16px; margin-right:3px; background:#c9d6e8; border:1px outset #9fb6d4; text-align:center; font-size:9px; line-height:16px; color:#336; cursor:pointer }
.player .btn:active { border-style:inset }
.player .seek { float:left; width:150px; height:6px; background:#fff; border:1px inset #9fb6d4; margin:5px 6px 0 4px; cursor:pointer }
.player .seek div { width:0; height:6px; background:#6699cc }
.player .time { float:left; font-size:9px; padding-top:3px; color:#555 }

/* ---- profile page chrome ---- */
h1.username { font:bold 15px Arial,sans-serif; margin-bottom:4px }
.profiletop { margin-bottom:10px }
.profiletop .pic { float:left; width:110px; height:130px; margin-right:8px; background:#d8cfc0; border:1px solid #999; color:#6b6354; text-align:center; font-size:10px; line-height:130px; overflow:hidden }
.profiletop .pic img { width:110px; height:130px; object-fit:cover; display:block }
.profiletop .vitals { float:left; width:180px; line-height:1.5 }
.online { color:#ff6600; font-weight:bold; font-size:10px }
.mood { margin-top:6px }
.contactlinks { overflow:hidden }
.contactlinks div { float:left; width:50%; padding:3px 0; font-size:10px }
.contactlinks div > a:before { content:"\2709  "; color:#cc6600 }
.contactlinks div > form:before { content:none }
.urlbox .bd { font-size:10px; color:#555; word-wrap:break-word }
table.info { width:100%; border-collapse:collapse; margin-bottom:12px }
table.info caption { text-align:left; background:#6699cc; color:#fff; font-weight:bold; padding:3px 6px; border:1px solid #336699; border-bottom:0 }
table.info th, table.info td { border:1px solid #6699cc; padding:4px 6px; text-align:left; vertical-align:top; font-size:11px }
table.info th { background:#b1d0f0; color:#336699; width:80px; font-weight:bold }
.network { border:2px solid #000; text-align:center; font:bold 13px Arial,sans-serif; padding:12px; margin-bottom:12px }
.friendcount { margin-bottom:8px }
.friendcount b { color:#cc0000 }
.top8 { overflow:hidden }
.top8 .friend { float:left; width:25%; text-align:center; margin-bottom:10px }
.top8 .friend a { font-weight:bold; font-size:10px }
.top8 .ph { width:90px; height:90px; margin:0 auto 3px; border:1px solid #999; background:#7a8ca3; overflow:hidden }
.top8 .ph img { width:90px; height:90px; object-fit:cover; display:block }

/* ---- comments table (single post page) ---- */
table.comments { width:100%; border-collapse:collapse; margin-top:8px }
table.comments td { border:1px solid #ff9933; padding:6px; vertical-align:top; font-size:11px }
table.comments td.who { width:110px; background:#ffcc99; text-align:center; font-weight:bold }
table.comments .who img { width:70px; height:70px; margin:4px auto 0; display:block; border:1px solid #999; object-fit:cover }
table.comments .stamp { color:#777; font-size:10px; display:block; margin-bottom:4px }

/* ---- forms (signup / login / compose / edit) ---- */
.authform label { display:block; font-weight:bold; color:#cc6600; margin:8px 0 2px; font-size:11px }
.authform label .opt { color:#999; font-weight:normal }
.authform input[type=text], .authform input[type=password], .authform textarea, .authform input[type=file] {
	width:100%; font:11px Verdana,sans-serif; border:1px solid #ccc; padding:4px; box-sizing:border-box }
.authform textarea { resize:vertical }
.bigbtn { margin-top:12px; width:100%; font:bold 12px Arial,sans-serif; background:#ffcc99; border:2px outset #ff9933; color:#cc6600; padding:6px; cursor:pointer }
.bigbtn:active { border-style:inset }
.linkbtn { background:none; border:0; color:#003399; font:11px Verdana,sans-serif; cursor:pointer; padding:0; text-decoration:none }
.linkbtn:hover { text-decoration:underline }

/* ---- blog ---- */
.bloglist { list-style:none }
.bloglist li { padding:3px 0; border-bottom:1px dotted #ccc; line-height:1.4 }
.bloglist li a { font-weight:bold }
.bloglist .date { color:#777; font-size:10px; font-weight:normal }
.viewall { text-align:right; font-size:10px; padding-top:4px }
.blogentry { border:1px solid #ff9933; background:#fff; padding:14px 16px; margin-bottom:12px }
.blogtitle { font:bold 17px Georgia,'Times New Roman',serif; color:#003366; margin-bottom:3px }
.blogmeta { font-size:10px; color:#777; border-bottom:1px solid #eee; padding-bottom:6px; margin-bottom:10px }
.blogmeta a { font-weight:bold }
.blogbody { font-size:12px; line-height:1.6; color:#222 }

/* ---- comment wall ---- */
.commentcount { margin:6px 0; font-size:11px }
.commentcount b { color:#cc0000 }
.delwall { color:#cc0000; font-size:10px; padding:0; margin-left:4px }

/* ---- search ---- */
.searchform input[type=text] { font:12px Verdana,sans-serif; border:1px solid #ccc; padding:5px; width:70% }
.searchform input[type=submit] { font:bold 12px Arial,sans-serif; background:#ffcc99; border:2px outset #ff9933; color:#cc6600; padding:4px 12px; cursor:pointer; margin-left:4px }
.resultlist { list-style:none }
.resultlist li { padding:6px 0; border-bottom:1px dotted #ccc; overflow:hidden }
.resultlist .thumb { float:left; width:46px; height:46px; border:1px solid #999; margin-right:8px; background:#aeb8c6; overflow:hidden; display:block }
.resultlist .thumb img { width:100%; height:100%; object-fit:cover; display:block }
.resultlist .rtext { overflow:hidden; line-height:1.4 }
.resultlist .rtext > a { font-weight:bold }
.resultlist .rmeta { display:block; font-size:9px; color:#999; margin-top:2px }
.resultlist .rmeta a { font-weight:bold }

/* ---- notifications ---- */
.notiflist { list-style:none }
.notiflist li { padding:6px 4px; border-bottom:1px dotted #ccc; overflow:hidden }
.notiflist li.unseen { background:#fff7ec; margin:0 -6px; padding:6px 10px; border-left:3px solid #ff9933 }
.notiflist .nav { float:left; width:34px; height:34px; border:1px solid #999; margin-right:8px; background:#7a8ca3; overflow:hidden; display:block }
.notiflist .nav img { width:100%; height:100%; object-fit:cover; display:block }
.notiflist .ntext { float:left; line-height:1.4; padding-top:1px }
.notiflist .ntext a { font-weight:bold }
.notiflist .nstamp { display:block; font-size:9px; color:#999; font-weight:normal }

/* ---- top 8 picker ---- */
.top8picker .slotrow { display:flex; align-items:center; gap:8px; margin:4px 0 }
.top8picker .slotrow label { margin:0; width:110px; flex-shrink:0 }
.top8picker .slotrow select { flex:1; font:11px Verdana,sans-serif; border:1px solid #ccc; padding:3px }

/* ---- bulletins ---- */
.bulletin { border:1px solid #ff9933; background:#fff; padding:8px 10px; margin-bottom:10px }
.bulletin .bhead { overflow:hidden; margin-bottom:6px }
.bulletin .bav { float:left; width:30px; height:30px; border:1px solid #999; margin-right:6px; background:#7a8ca3; overflow:hidden }
.bulletin .bav img { width:100%; height:100%; object-fit:cover; display:block }
.bulletin .bwho { float:left; line-height:1.3; padding-top:1px }
.bulletin .bwho a { font-weight:bold }
.bulletin .bstamp { display:block; font-size:9px; color:#999 }
.bulletin .bsubject { display:block; font-weight:bold; color:#003366; font-size:13px; margin:2px 0 4px }
.bulletin .bbody { font-size:11px; line-height:1.5; color:#222 }

/* ---- flash messages ---- */
.flash { background:#fff3cd; border:1px solid #ff9933; color:#8a5a00; padding:6px 10px; font-size:11px; font-weight:bold }

/* ---- mail ---- */
.mailtabs { border-bottom:1px solid #ff9933; margin-bottom:6px; padding-bottom:4px }
.mailtabs a { display:inline-block; padding:2px 10px; font-weight:bold; font-size:11px; border:1px solid #ff9933; background:#fff; color:#cc6600; margin-right:3px }
.mailtabs a.on { background:#ffcc99 }
.mailtabs a.compose { border:0; background:none; float:right; color:#003399 }
table.maillist { width:100%; border-collapse:collapse }
table.maillist td { border-bottom:1px dotted #ccc; padding:5px 4px; vertical-align:middle; font-size:11px }
table.maillist tr.unread { background:#fff7ec }
table.maillist .who { width:120px }
table.maillist .who .av { display:inline-block; width:24px; height:24px; border:1px solid #999; background:#7a8ca3; overflow:hidden; vertical-align:middle; margin-right:5px }
table.maillist .who .av img { width:100%; height:100%; object-fit:cover; display:block }
table.maillist .who a { font-weight:bold }
table.maillist .when { width:80px; text-align:right; color:#999; font-size:9px }
table.msghead { width:100%; border-collapse:collapse; margin-bottom:10px }
table.msghead th, table.msghead td { border:1px solid #6699cc; padding:3px 6px; text-align:left; font-size:11px }
table.msghead th { background:#b1d0f0; color:#336699; width:70px }
.msgbody { font-size:12px; line-height:1.6; color:#222; padding:6px 2px; margin-bottom:8px; border-bottom:1px solid #eee }

/* ---- footer ---- */
#footer { clear:both; border-top:1px solid #ccc; padding:10px; text-align:center; font-size:10px; color:#666 }
#footer a { margin:0 4px }

/* ---- active nav link ---- */
#navbar a.active { color:#ffcc66; font-weight:bold; text-decoration:underline }

/* ---- flash dismiss button ---- */
.flash { position:relative; padding-right:28px }
.flash .dismiss { position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:14px; color:#8a5a00; line-height:1; padding:0 }

/* ---- caption counter ---- */
.captionwrap { position:relative }
.captionwrap textarea { width:100%; box-sizing:border-box }
.charcnt { font-size:9px; color:#999; text-align:right; margin-top:1px }
.charcnt.warn { color:#cc6600 }
.charcnt.over { color:#cc0000; font-weight:bold }

/* ---- guest splash ---- */
.splash { margin-bottom:14px }
.splash .splashbtns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:4px }

/* ---- profile about/seeking hide-when-empty (handled in PHP) ---- */
.profiledetails td:empty { display:none }

/* ---- post timestamp smaller ---- */
.stamp { font-size:9px; color:#999; padding:2px 8px 6px }

/* ---- comment input full width ---- */
.addc input[type=text] { width:calc(100% - 60px) }

/* ---- post image centering (single image) ---- */

/* ---- wall comment box: full width input + button below ---- */
form.addc { display:block !important }
form.addc input[type=text], form.addc textarea { width:100%; box-sizing:border-box; display:block; margin-bottom:6px }
form.addc input[type=submit], form.addc button[type=submit] { display:block; margin-top:4px }

/* ---- theme inheritance: info table and section band ---- */
/* These are intentionally left with explicit colours so profile CSS can override them */
/* Profile CSS targets: table.info caption, table.info th, .band, .section .band */

/* ---- story strip rename: "Adventures" label ---- */
.stories-label { font-size:9px; color:#777; padding:2px 8px 0; font-style:italic }

/* ---- navbar link contrast ---- */
#navbar a { color:#cce0ff }
#navbar a:hover { color:#ffcc66 }
#navbar a.active { color:#ffcc66; font-weight:bold; text-decoration:underline }

/* ---- gender/age/species in vitals ---- */
.vitals .genderline { font-size:10px; color:#aaa; margin-top:2px }

/* ---- markdown blog body ---- */
.blogbody { line-height:1.6; font-size:12px }
.blogbody h1,.blogbody h2,.blogbody h3 { font-family:Georgia,serif; color:#336699; margin:12px 0 6px; border-bottom:1px solid #cce }
.blogbody h1 { font-size:18px }
.blogbody h2 { font-size:15px }
.blogbody h3 { font-size:13px }
.blogbody p { margin-bottom:8px }
.blogbody ul,.blogbody ol { margin:4px 0 8px 20px }
.blogbody li { margin-bottom:3px }
.blogbody blockquote { border-left:3px solid #6699cc; padding:4px 10px; color:#555; margin:8px 0; background:#f0f4ff }
.blogbody code { background:#f0f0f0; padding:1px 4px; font-family:monospace; font-size:11px; border-radius:2px }
.blogbody pre { background:#f0f0f0; padding:8px; overflow-x:auto; font-size:11px; border-radius:2px; margin-bottom:8px }
.blogbody a { color:#336699 }
.blogbody hr { border:0; border-top:1px solid #ccc; margin:12px 0 }

/* ---- photo gallery grid on profile ---- */
.photogrid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; margin-bottom:6px }
.pgthumb { display:block; position:relative; padding-bottom:100%; overflow:hidden; background:#c9d6e8; border:1px solid #ffcc99 }
.pgthumb img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; transition:opacity .15s }
.pgthumb:hover img { opacity:.82 }
.pgthumb:hover { border-color:#ff9933 }

/* ── Vitals block improvements ─────────────────────────────────────────────── */
.vitals-name     { font-weight:bold; font-size:13px; line-height:1.4; margin-bottom:2px }
.vitals-mood     { font-style:italic; font-size:11px; color:#cc6600; margin-bottom:4px; line-height:1.4 }
.vitals-identity { font-size:10px; color:#aaa; margin-bottom:2px }
.vitals-loc      { font-size:10px; color:#888; margin-bottom:2px }
.vitals-since    { font-size:10px; color:#999; margin-top:4px; border-top:1px dotted #ccc; padding-top:3px }