.mainbox { margin-bottom:30px; }

h1 { margin:0; padding:0 0 20px 0; }

.spsh { padding:25px 0 0 0; text-align:center; font-size:18pt; color:#3c5a9a; }
.spsh .xtitle { color:var(--text2); }

.spsh .xbt { display:inline-block; box-sizing:border-box; width:80px; height:80px; margin:10px 0 0 10px; padding:4px; background-color:#888; border-radius:40px; text-align:center; }
.spsh .xbt .xi { display:inline-block; box-sizing:border-box; width:72px; height:72px; padding:18px 5px 5px 5px; border-radius:36px; background-color:#888; font-size:10pt; line-height:20px; color:#fff; }
.spsh .xbt:hover .xi { border-color:#888; background-color:#fff; color:#444; }

.spsh .xfb ,
.spsh .xfb .xi { background-color:#3c5a9a; }
.spsh .xfb:hover .xi { border-color:#3c5a9a; color:#3c5a9a; }

.spsh .xtw ,
.spsh .xtw .xi { background-color:#04b7ed; }
.spsh .xtw:hover .xi { border-color:#04b7ed; color:#04b7ed; }

.spsh .xln ,
.spsh .xln .xi { background-color:#00c900; }
.spsh .xln:hover .xi { border-color:#00c900; color:#00c900; }

.spwarn { padding:5px 0 15px 0; text-align:center; font-size:12pt; color:var(--textred); }

#friendmenubox { padding:5px 0 15px 0 }

#postform { box-sizing:border-box; width:96%; max-width:1000px; margin:0 auto 20px auto; padding:20px 10px; border:2px dashed var(--bg3); border-radius:15px; font-size:12pt; }
#postform .xpostbt { display:block; padding:30px 25px; text-align:center; font-size:18pt; color:var(--linkpj); }
#postform .xpostbt:hover { color:var(--linkpjactive); }
#postform .xnouser { padding:10px 0; text-align:center; font-size:12pt; color:var(--text3); }
#postform .xnouser .xtitle { padding:0 0 10px 0; font-size:20pt; }
#postform .xnouser a { display:inline-block; margin:2px; padding:5px 10px; border-radius:5px; background-color:var(--bg2); vertical-align:middle; white-space:nowrap; color:var(--text2); }
#postform .xnouser a:hover { color:var(--text); }
#postform .xwait { padding:30px 10px; text-align:center; font-size:16pt; color:var(--text4); }
#postform .xicon { width:100px; height:100px; margin:0 20px; border-style:none; border-radius:50px; vertical-align:top; }
#postform .xlines { max-width:100%; display:inline-block; vertical-align:top; }
#postform .xline { padding:10px 0; }
#postform .xlabel { display:inline-block; box-sizing:border-box; width:130px; padding:5px 5px 5px 5px; vertical-align:top; text-align:right; font-weight:bold; color:var(--text2); }
#postform .xlabel .xen { display:block; font-size:10pt; font-weight:normal; color:var(--text3); }
#postform .xinput { display:inline-block; box-sizing:border-box; width:500px; padding:2px; vertical-align:top; text-align:left; }
#postform .xmsgnote { display:inline-block; box-sizing:border-box; max-width:100%; padding:2px 5px; font-size:10pt; color:var(--textbrown); }
#postform input[name=msg] { box-sizing:border-box; width:100%; height:40px; font-size:16pt; }
#postform input[name=age] { box-sizing:border-box; width:80px; height:40px; text-align:center; font-size:16pt; font-weight:bold; }
#postform input[type=radio] { width:24px; height:24px; vertical-align:middle; }
#postform label { display:inline-block; padding:8px 0; vertical-align:middle; }
#postform select { width:48%; max-width:180px; height:40px; vertical-align:top; font-size:12pt; font-weight:bold; }
#postform select option { font-weight:normal; }
#postform input[type=submit] { width:200px; height:40px; font-size:18pt; }
#postform .xbar { padding:10px; text-align:center; }
#postform .xnote { padding:10px 5px 5px 5px; text-align:center; font-size:10pt; color:var(--text3); }
#postform .active { font-weight:bold; color:var(--textpink); }
#postform .xitems img { height:42px; max-width:120px; margin:0 5px 5px 0; }
#postform .xitems .bt { margin:0 5px 5px 0; }

#post_locbox { padding:3px 0; color:var(--text3); }
#post_locbox.error { color:var(--textred); }
#post_locbox.ok { color:var(--textgreen); }

#qform { float:right; margin:5px 0 10px 0; font-size:12pt; }
#qform select { width:145px; height:40px; font-size:14pt; outline:none; border:1px solid var(--border); background-color:var(--bg2); color:var(--text); }

.spmenu { box-sizing:border-box; width:100%; max-width:1000px; margin:0 auto; padding:10px 0 0 0; border-bottom:5px solid var(--primary); white-space:nowrap; font-size:12pt; }
.spmenu a { display:inline-block; box-sizing:border-box; max-width:40%; min-width:80px; margin-bottom:3px; padding:15px 15px 12px 15px; background-color:var(--bg3); border-radius:8px 8px 0 0; text-decoration:none; vertical-align:bottom; text-align:center; white-space:normal; line-height:16px; color:var(--text); }
.spmenu a:hover { color:var(--texthl); }
.spmenu a.active { margin-bottom:0; padding-bottom:15px; background-color:var(--primary); font-weight:bold; color:var(--primarytext); }

#modemenu { padding:5px 0; text-align:center; }
#modemenu .xmenu { display:inline-block; width:49%; box-sizing:border-box; max-width:280px; padding:8px 10px; font-size:18pt; color:var(--text3); }
#modemenu .xmenu img { width:64px; height:64px; vertical-align:middle; filter:grayscale(1) brightness(1.3); }
#modemenu .xmenu:hover { color:var(--text); }
#modemenu .xmenu:hover img { filter:grayscale(1) brightness(1.6); }
#modemenu .xmenu.active { color:var(--linkpj); }
#modemenu .xmenu.active img { filter:none; }
#modemenu_status { display:none; padding:5px; background-color:var(--bgyellow); font-size:12pt; color:var(--text); }

#listbox { box-sizing:border-box; text-align:left; font-size:12pt; }
#listbox .xbox { margin:0 0 1px 0; }
#listbox .xm { background-color:#bbdbf2; }
#listbox .xm:hover { background-color:#c7e4f8; }
#listbox .xw { background-color:#f1d0ed; }
#listbox .xw:hover { background-color:#f9d9f5; }
#listbox .xt { background-color:#f1d0ed; }
#listbox .xt:hover { background-color:#f9d9f5; }
#listbox .xprivate { opacity:0.5; }
#listbox .xlink { display:inline-block; box-sizing:border-box; width:calc(100% - 60px); padding:5px 0 5px 5px; color:#000;  vertical-align:middle; }
#listbox .xlink .ximg { width:100%; }
#listbox .xicon { position:relative; display:inline-block; width:100px; height:100px; vertical-align:top; }
#listbox .xicon .ximg { width:100%; }
#listbox .xicon .xlabel { position:absolute; top:-4%; right:-4%; width:64%; }
#listbox .xonline, #listbox .xoffline { display:inline-block; width:14px; height:14px; border-radius:7px; vertical-align:middle; }
#listbox .xonline { background-color:#0d0; }
#listbox .xoffline { background-color:#eee; }
#listbox .xmsg { display:inline-block; box-sizing:border-box; width:calc(100% - 320px); overflow-x:hidden; padding:0 5px 0 10px; text-align:left; font-size:16pt; }
#listbox .xitemlabel { display:inline-block; margin:5px 0 0 0; padding:4px 8px; border-radius:10px; background-color:#fff; vertical-align:middle; font-size:12px; line-height:12px; color:#555; }
#listbox .xitems { display:inline-block; margin:3px 5px 0 2px; vertical-align:middle; }
#listbox .xitems img { height:32px; max-width:200px; margin:4px 0 0 6px; }
#listbox .xinfo { display:inline-block; box-sizing:border-box; width:140px; padding:0 5px 0 0; vertical-align:middle; text-align:left; font-size:14pt; color:#555; }
#listbox .xinfo b { white-space:nowrap; font-size:18pt; font-weight:normal; }
#listbox .xinfo i { white-space:nowrap; font-style:normal; }
#listbox .xchat { display:inline-block; box-sizing:border-box; width:80px; height:36px; padding:6px 0 0 0; background-color:#d119a6; border-radius:18px; text-decoration:none; vertical-align:middle; text-align:center; white-space:nowrap; font-size:14pt; color:#fff; }
#listbox .xchat.inactive { opacity:0.5; }
#listbox .xtool { display:inline-block; box-sizing:border-box; width:60px; min-height:40px; vertical-align:middle; text-align:center; }
#listbox .xbt { display:inline-block; margin:5px 0 0 0; padding:5px 3px; text-decoration:none; vertical-align:middle; white-space:nowrap; font-size:11pt; color:#888; }
#listbox .xbt:hover { color:#444; }
#listbox .xdel:hover { color:#d00; }
#listbox .xadf { display:inline-block; width:100%; padding:10px 0; font-size:16pt; }
#listbox .xadf .ximg { width:100%; }

#rsticky { position:absolute; left:4px; top:100px; width:300px; min-height:600px; }
@media (max-width:1000px) { #rsticky { display:none; } }

@media (max-width:950px) {
	#qform { float:none; margin:10px 0 10px 0; text-align:center; }
}
@media (max-width:700px) {
	#postform .xlabel { width:80px; }
	#postform .xinput { width:370px; }
	.spmenu { overflow-x:auto; text-align:center; }
}
@media (max-width:650px) {
	#listbox .xbox { min-height:100px; }
	#listbox .xicon { float:left; }
	#listbox .xmsg { width:calc(100% - 100px); padding:10px 5px 0 5px; }
	#listbox .xinfo { width:calc(100% - 180px); padding:0 5px 0 5px; }
}
@media (max-width:500px) {
	#postform .xpostbt { padding:30px 10px; font-size:16pt; }
	#postform .xlabel { display:block; width:100%; padding:3px 0px; text-align:left; }
	#postform .xlabel .xen { display:inline; padding-left:3px; font-style:italic; }
	#postform .xinput { display:block; width:100%; padding:3px 0px; }
	#listbox .xbox { position:relative; }
	#listbox .xlink { width:100%; }
	#listbox .xtool { position:absolute; right:0; bottom:0; width:60px; }
	#listbox .xinfo { width:calc(100% - 230px); font-size:11pt; color:#777; }
	#listbox .xinfo b { font-size:15pt; }
	#listbox .xchat { width:70px; height:32px; margin-top:4px; padding-top:4px; border-radius:16px; }
}
@media (max-width:400px) {
	#qform select { width:130px; }
	#modemenu .xmenu { width:auto; font-size:16pt; }
	#listbox .xbox { min-height:80px; }
	#listbox .xicon { width:80px; height:80px; }
	#listbox .xmsg { width:calc(100% - 80px); font-size:15pt; }
	#listbox .xinfo { width:calc(100% - 210px); }
}
@media (max-width:350px) {
	#listbox .xmsg { font-size:14pt; }
}

@media print { body { opacity:0; width:1px; height:1px; overflow:hidden; } }