@charset "utf-8";

/* -------------------------------------------------------------------
# Font-size Adjustment.
#  77% = 10px | 123.1% = 16px | 167% = 22px
#  85% = 11px | 131.0% = 17px | 174% = 23px
#  93% = 12px | 138.5% = 18px | 182% = 24px
# 100% = 13px | 146.5% = 19px | 189% = 25px
# 108% = 14px | 153.9% = 20px | 197% = 26px
# 116% = 15px | 161.6% = 21px |
------------------------------------------------------------------- */

/* Undo
------------------------------------------------------------------- */
html, body,
h1, h2, h3, h4, h5, h6,
div, span, p, blockquote, pre, code,
ul, ol, li, dl, dt, dd, table, tr, th, td,
form, fieldset, legend, input, textarea {margin: 0;padding: 0;}

table         {border-collapse: collapse;border-spacing: 0;font-size:1em;}
legend        {display: none;}
fieldset, img {border: 0;}
caption, th   {text-align: left;}
em, cite      {font-style: normal;}
input         {font-size: 100%;}

/* Yahoo! UI Library - fonts.css
------------------------------------------------------------------- */
body{
	font: 13px/1.231 arial, helvetica, clean, sans-serif;
	*font-size: small;
	*font: x-small;
}

select, input, button, textarea {
	font: 99% arial, helvetica, clean, sans-serif;
}

table {
	font-size: inherit;
	font: 100%;
}

pre, code, kbd, samp, tt {
	font-family: monospace;
	*font-size: 108%;
	line-height: 100%;
}

/* Tero Karvinen - pre-wrap.css
------------------------------------------------------------------- */
pre {
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* HiGash.Net - reset.css
------------------------------------------------------------------- */
input, textarea                            {padding: 0;line-height: 1.4;vertical-align: middle;}
input[type="checkbox"],input[type="radio"] {vertical-align: text-bottom;}
input[type="submit"]                       {padding: 0.1em;}
select                                     {padding: 0;}

/* for IE6 */
* html input                              {padding: 0.1em;}
* html input.checkbox, * html input.radio {vertical-align: -0.3em;}
* html input.submit                       {line-height: 1.2;padding-top: 0.2em;}
* html select                             {vertical-align: -0.2em;}

/* for IE7 */
*+html input        {padding: 0.1em;}
*+html input.submit {line-height: 1.2;padding-top: 0.2em;}
*+html select       {vertical-align: -0.2em;}

/* for Opera9.27 */
html:first-child input                                                        {padding: 0.1em;}
html:first-child input[type="checkbox"], html:first-child input[type="radio"] {vertical-align: middle;}
html:first-child input[type="submit"]                                         {padding: 0.3em;}
html:first-child select                                                       {padding: 0.2em;}

/* for Opera9.5 [Safari3] */
body:first-of-type input                                                         {padding: 0.1em;}
body:first-of-type input[type="checkbox"],body:first-of-type input[type="radio"] {vertical-align: -0.3em;}
body:first-of-type input[type="submit"]                                          {padding: 0.3em 0.3em 0.2em 0.3em;}

/* for Safari3 */
html:not(:only-child:only-child) input                                                                       {padding: 0;vertical-align: baseline;}
html:not(:only-child:only-child) input[type="checkbox"],html:not(:only-child:only-child) input[type="radio"] {vertical-align: baseline;}
html:not(:only-child:only-child) select                                                                      {vertical-align: 0.1em;}

/* Body, Wrap
------------------------------------------------------------------- */
body {
	background: url('img/wall_butagumi.gif') repeat;
	text-align: center; /* IE6 #wrap センタリング */
}

div#wrap {
	margin: 0 auto;
	width: 900px;
	text-align: left; /* IE6 #wrap 内の左寄せ */
}

/* Header
------------------------------------------------------------------- */
div#header {
	height: 160px;
	width: 900px;
	background: url('img/header.jpg') no-repeat 0 0;
	text-align: right;  /* IE6 #wrap 右寄せ */
	position: relative; /* Header 内ボタンの absolute 指定用 */
}

div#header div.post-text {
	position: absolute;
	top: 19px;
	left: 250px;
}

div#header div.post-button {
	position: absolute;
	top: 72px;
	left: 553px;
}

div#header div.countup {
	position: absolute;
	top: 79px;
	right: 360px;
	color: #222;
}

div#header div.screenname {
	position: absolute;
	top: 79px;
	right: 400px;
	color: #222;
}

div#header div.login-button {
	position: absolute;
	background: #fff;
	top: 34px;
	left: 345px;
}

div#header div.logout-button {
	position: absolute;
	background: #fff;
	top: 77px;
	left: 755px;
}

div#header div.fl_g {
	position: absolute;
	background: #fff;
	top: 19px;
	left: 776px;
	width: 78px;
}

div#header div.fl_f {
	position: absolute;
	background: #fff;
	top: 19px;
	left: 696px;
	width: 78px;
}

div#header div.details-button {
	position: absolute;
	background: #fff;
	top: 85px;
	left: 776px;
	width: 110px;
}

textarea#speak {
	width: 388px;
	height: 50px;
	border: 3px solid #ccc;
}

/* Header > RollOver
------------------------------------------------------------------- */
div#header a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

/* Header ~ Content
------------------------------------------------------------------- */
div.under {
	height: 8px;
	font-size: 0; /* IE6 隙間バグ対策 */
	background: url('img/under_header.jpg') no-repeat 0 0;
	display: none; /* butagumi専用処理 */
}

/* Content
------------------------------------------------------------------- */
div#content {
	/* background: url('img/body_bg_all.jpg') repeat-y 0 0; */
	/* background: url('img/body_bg_h.jpg') repeat-y 0 0; */
	background: url('img/body_butagumi_02.gif') repeat-y 0 0;
	text-align: center; /* IE6 #wrap センタリング */
}

div.contwrap {
	margin: 0 auto;
	padding: 1px 0;
	width: 755px;
	text-align: left; /* IE6 #wrap 内の左寄せ */
}

/* Content > Tweet > Blue
------------------------------------------------------------------- */
div.blue,
div.red {margin: 10px 0 10px 40px; width: 600px;}

div.blue-top {
	font-size: 0;
	line-height: 0;
	width: 600px;
	height: 7px;
	background: url('img/balloon_fighters_top.png') no-repeat 0 0;
}

div.blue-middle {
	width: 600px;
	background: url('img/balloon_fighters_middle.png') repeat-y 100% 0;
}

div.blue-bottom {
	width: 600px;
	height: 7px;
	background: url('img/balloon_fighters_bottom.png') no-repeat 0 0;
}

div.thumb {width: 165px;float: left;}

div.post  {width: 424px;float: left;}

div.thumb p,
div.post p {font-size: 93%;}

div.thumb p a img   {margin: 3px 6px;}
div.post p {margin: 3px 6px 3px 0;}

img.megafon {padding-bottom: 8px;}


br.clear {
	margin: 0;
	font-size: 0;
	line-height: 0;
	clear: both;
}

span.postmeta {
	margin-top: 3px;
	display: block;
	font-size: 85%;
}

span.postmeta img {vertical-align: middle;}

span.postmetaWhisper {
	margin-top: 3px;
	font-size: 85%;
}

span.postmetaWhisper img {vertical-align: middle;}

/* Content > Tweet > Gray
------------------------------------------------------------------- */
div.graywrap {
	text-align: center;
}

div.gray {
	margin: 10px auto;
	width: 400px;
	background: #fff;
	text-align: left;
}

div.gray div.thumb {width: 60px;float: left;}
div.gray div.post  {width: 340px;float: left;}
div.gray div.thumb p a img {margin: 6px;}
div.gray div.post p        {margin: 6px 6px 6px 0;}

/* Content > Tweet > Red
------------------------------------------------------------------- */
div.redwrap {
	text-align: right;
}

div.red {
	margin: 10px 0 10px auto;
	text-align: left;
	width: 600px;
}

div.red-top {
	font-size: 0;
	line-height: 0;
	width: 600px;
	height: 7px;
	background: url('img/balloon_giants_top.png') no-repeat 0 0;
}

div.red-middle {
	width: 600px;
	background: url('img/balloon_giants_middle.png') repeat-y 0 0;
}

div.red-bottom {
	width: 600px;
	height: 7px;
	background: url('img/balloon_giants_bottom.png') no-repeat 0 0;
}

div.red-middle div.post  {width: 424px;float: right;}

div.red-middle div.thumb {width: 166px;float: right;}

span.loud1 {font-size: 197%; font-weight: bold;}
span.loud2 {font-size: 153.9%;}
span.whisper {font-size: 85%; color: #909090;}

/* Content > Tweet > Inner xxx
------------------------------------------------------------------- */

span.reply, span.rt {text-decoration: underline; color: blue; cursor: pointer;}
div.twitpic {margin: 5px 0;}
div.twitpic img {
	background: White;
	padding: 6px;
	border-width: 1px;
	border-style: solid;
	border-color: Silver Gray Gray Silver;
	float: left;
}

/* -------------------------------------------------------------------
# Font-size Adjustment.
#  77% = 10px | 123.1% = 16px | 167% = 22px
#  85% = 11px | 131.0% = 17px | 174% = 23px
#  93% = 12px | 138.5% = 18px | 182% = 24px
# 100% = 13px | 146.5% = 19px | 189% = 25px
# 108% = 14px | 153.9% = 20px | 197% = 26px
# 116% = 15px | 161.6% = 21px |
------------------------------------------------------------------- */

#g1 {top:110px; left:543px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}
#g2 {top:110px; left:519px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}
#g3 {top:110px; left:495px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}
#g4 {top:110px; left:464px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}
#g5 {top:110px; left:441px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}
#g6 {top:110px; left:418px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}
#g7 {top:110px; left:387px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}
#g8 {top:110px; left:364px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}
#g9 {top:110px; left:341px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}

#f1 {top:134px; left:543px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}
#f2 {top:134px; left:519px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}
#f3 {top:134px; left:495px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}
#f4 {top:134px; left:464px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}
#f5 {top:134px; left:441px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}
#f6 {top:134px; left:418px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}
#f7 {top:134px; left:387px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}
#f8 {top:134px; left:364px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}
#f9 {top:134px; left:341px; position:absolute; background: url('img/numbers.png') no-repeat 0 -18px; width:18px; height:18px;}