.mainbox { margin-bottom:30px; }

.spsh { text-align:center; font-size:18pt; color:var(--textblue); }

.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); }
.spwarn .xbt { display:inline-block; padding:5px; font-size:11pt; color:var(--textbrown); }
.spwarn .xbt:hover { text-decoration:underline; }

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

#postform { box-sizing:border-box; width:98%; max-width:1000px; margin:10px 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(--textpink); }
#postform .xpostbt:hover { color:var(--text); }
#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 .xprofile { display:inline-block; padding:0 0 0 20px; vertical-align:top; }
#postform .xprofile .xpic { width:100px; height:100px; border-style:none; border-radius:50px; vertical-align:middle; }
#postform .xprofile .xname { display:block; width:100px; padding:7px 0 0 0; text-align:center; font-size:16pt; }
#postform .xprofile .xip { font-size:8pt; color:var(--textyellow); }
#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(--text3); }
#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 .xline_id { font-size:16pt; }
#postform .xmsgnote { display:inline-block; box-sizing:border-box; max-width:100%; padding:2px 5px; font-size:10pt; color:var(--textred); }
#postform input[name=line_id] ,
#postform input[name=line_id2] { box-sizing:border-box; width:100%; max-width:150px; height:40px; font-size:16pt; }
#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; font-size:12pt; font-weight:bold; }
#postform select option { font-weight:normal; }
#postform input[type=submit] { width:200px; }
#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(--texthl); }
#postform .xbar2 { padding:10px 10px 0 0; text-align:right; font-size:10pt; color:var(--text3); }
#postform .xbar2 a { color:var(--text2); }
#postform .xbar2 a:hover { color:var(--linkactive); }

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

.spmenu { box-sizing:border-box; width:100%; max-width:1000px; overflow-x:auto; 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; width:25%; max-width:200px; min-height:45px; padding:15px 5px 6px 5px; background-color:var(--bg3); border-bottom:2px solid transparent; border-radius:4px 4px 0 0; text-decoration:none; vertical-align:bottom; text-align:center; white-space:normal; color:var(--text); }
.spmenu a:hover { background-color:var(--bg4); color:var(--texthl); }
.spmenu a.active { border-bottom:none; background-color:var(--primary); font-weight:bold; color:var(--primarytext); }

#qform { padding:15px 0 0 0; font-size:12pt; }
#qform input, 
#qform select { display:inline-block; box-sizing:border-box; outline:none; border:1px solid var(--border); background-color:var(--bg2); height:40px; vertical-align:middle; font-size:14pt; color:var(--text); }
#qform select { width:120px; }
#qform input[type=text] { width:100px; }
#qform input[type=submit] { font-size:12pt; }

#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 { text-align:left; font-size:12pt; color:#222; }
#listbox a { color:#000; }
#listbox a:hover { color:#d119a6; }
#listbox .xline { box-sizing:border-box; width:100%; margin:1px 0 0 0; }
#listbox .xline:hover { filter:contrast(1.2); }
#listbox .xm { background-color:#bbdbf2; }
#listbox .xw { background-color:#f1d0ed; }
#listbox .xt { background-color:#e9c7ee; }
#listbox .xlink { display:inline-block; box-sizing:border-box; width:calc(100% - 130px); padding:5px; vertical-align:middle; color:#000; }
#listbox .xname { display:inline-block; box-sizing:border-box; width:25%; overflow:hidden; vertical-align:middle; white-space:nowrap; font-size:14pt; }
#listbox .xm .xname { color:#3b6685; }
#listbox .xw .xname { color:#b35aa8; }
#listbox .xt .xname { color:#ad5ab3; }
#listbox .xname .ximg { width:80px; height:80px; vertical-align:middle; }
#listbox .xmsg { display:inline-block; box-sizing:border-box; width:50%; padding:0 0 0 5px; vertical-align:middle; font-size:16pt; }
#listbox .xonline,
#listbox .xoffline { position:absolute; left:10px; top:10px; width:14px; height:14px; border-radius:7px; }
#listbox .xonline { background-color:#0d0; }
#listbox .xoffline { background-color:#eee; }
#listbox .xinfo { display:inline-block; box-sizing:border-box; width:25%; padding:0 0 0 5px; vertical-align:middle; }
#listbox .xtool { display:inline-block; box-sizing:border-box; width:130px; padding:10px 0 0 5px; vertical-align:middle; text-align:center; }
#listbox .xbt { display:inline-block; margin:5px 5px 0 0; padding:5px 2px; text-decoration:none; vertical-align:middle; white-space:nowrap; font-size:11pt; color:#666; }
#listbox .xbt:hover { color:#d119a6; }
#listbox .xdel:hover { color:#d00; }
#listbox .xadd { display:inline-block; box-sizing:border-box; height:34px; padding:8px 10px 3px 40px; border-radius:5px; background-color:#00c300; background-image:url('image/loginbt.png'); background-size:contain; background-repeat:no-repeat; text-align:center; white-space:nowrap; font-size:11pt; color:#fff; text-shadow:1px 1px 0px #888; }
#listbox .xadd:hover { background-color:#00e000; color:#fff; text-decoration:none; }
#listbox .xadf { display:inline-block; width:100%; padding:10px 0; font-size:16pt; }
#listbox .xadf .ximg { width:100%; }

/* freakout */
#listbox .xadimg { max-width:100%; }

#rsticky { position:absolute; left:4px; top:100px; width:300px; height:600px; background-color:var(--bg2); }
@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; }
	#listbox .xlink { min-height:90px; }
	#listbox .xname { display:inline; font-size:12pt; font-weight:bold; }
	#listbox .xname .ximg { float:left; margin:0 5px 0 0; }
	#listbox .xmsg { width:calc(100% - 90px); padding:2px 0 0 0; }
	#listbox .xinfo { width:calc(100% - 90px); padding:2px 0 0 0; color:#666; }
	#listbox .xtool { padding:0 3px 15px 0; }
	}
@media (max-width:500px) {
	#postform .xpostbt { padding:30px 10px; font-size:16pt; }
	#postform .xprofile { width:95%; margin:0 auto; padding:0; }
	#postform .xprofile .xname { display:inline-block; width:150px; padding:0 0 0 8px; vertical-align:middle; text-align:left; }
	#postform .xprofile .xip { font-size:9pt; }
	#postform .xlines { display:block; }
	#postform .xlabel { display:block; width:auto; padding:3px 0px; text-align:left; }
	#postform .xlabel .xen { display:inline; padding-left:3px; font-style:italic; }
	#postform .xinput { display:block; width:auto; padding:3px 0px; }
	.spmenu a { min-height:55px; padding:10px 5px 2px 5px; }
	#listbox .xlink { display:block; width:100%; }
	#listbox .xtool { display:block; width:100%; text-align:left; padding:0 5px 5px 0; }
	#listbox .xadd { margin:0 10px 0 0; }
	}
@media (max-width:400px) {
	#modemenu .xmenu { width:auto; font-size:16pt; }
	#qform select { width:130px; }
	#listbox .xmsg { max-height:110px; }
	}
@media (max-width:350px) {
	#listbox .xmsg { max-height:100px; font-size:13pt; }
	}
@media (max-width:330px) {
	.spsecmenu { font-size:12pt; }
	}

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