@charset "Shift_JIS";

/* - First{ C.K } - Last{ Y.H } - Update{ 2008-04-25 } - About{ Community style of Hangame } */




/* Basic style
---------------------------------------------------------------------- */
body#communityTop #contentsArea{
width: 644px;
}


/* pageNavi
-------------------------------------------------- */
ul.pageNavi{
clear: both;
margin: 18px auto;
text-align: center;
}
	ul.pageNavi li{
	display: inline;
	border-left: 1px solid #d2d2d2;
	margin-right: -4px;
	font-weight: bold;
	}
		ul.pageNavi li.first{
		border-left: none;
		}
	ul.pageNavi li.first,
	ul.pageNavi li.last{
	width: 69px;
	*margin-right: 0;
	zoom: 1;
	}
	ul.pageNavi li.prev{
	width: 53px;
	*margin-right: 1px;
	zoom: 1;
	}
	ul.pageNavi li.next{
	width: 52px;
	*margin-right: 1px;
	zoom: 1;
	}
	ul.pageNavi li a{
	padding: 0 10px;
	zoom: 1;
	}
		ul.pageNavi li a:hover{
		border-left: 1px solid #fff;
		border-right: 1px solid #f3f3f3;
		background-color: #f3f3f3;
		text-decoration: none;
		padding: 0 9px;
		}
		ul.pageNavi li.now a{
		color: #f90;
		font-weight: bold;
		}
	ul.pageNavi li img{
	padding: 2px 0;
	vertical-align: top;
	}
	ul.pageNavi li.first img,
	ul.pageNavi li.last img{
	width: 49px;
	margin: 0 9px;
	}
	ul.pageNavi li.prev img{
	width: 33px;
	margin: 0 9px;
	}
	ul.pageNavi li.next img{
	width: 32px;
	margin: 0 9px;
	}
	ul.pageNavi li.first a img,
	ul.pageNavi li.prev a img,
	ul.pageNavi li.next a img,
	ul.pageNavi li.last a img{
	margin: 0;
	}


/* Main Promotion
---------------------------------------------------------------------- */
body#communityTop #mainPromotion{
position: relative;
float: left;
width: 314px;
height: 195px;
}

body#communityTop #mainPromotion img,
body#communityTop #mainPromotion iframe{
display: block;
position: absolute;
right: 0;
top: 0;
}


/* blogAndFriendArea
---------------------------------------------------------------------- */
#blogAndFriendArea{
float: right;
width: 310px;
min-height: 194px;
_height: 194px;
margin-bottom: 20px;
background: url(http://images.hangame.co.jp/hangame/community/top/pic_blog_friend.gif) no-repeat 0 bottom;
border-bottom: 1px solid #d1bca2;
}

/* blogIntro
------------------------- */
#blogIntro{
width: 300px;
margin: 0 auto;
}

/* blogNum */
#blogIntro .blogNum{
margin: 5px 0 8px 0;
color: #774005;
font-weight: bold;
}

#blogIntro .blogNum img{
margin-right: 10px;
vertical-align: middle;
}

/* otherNum */
#blogIntro ul.otherNum{
margin: 0 0 0 8px;
font-size: 10px;
}

#blogIntro ul.otherNum li{
display: inline;
margin-left: 15px;
padding-left: 16px;
background: url(http://images.hangame.co.jp/hangame/common/ico_comment.gif) no-repeat 0 0;
color: #774005;
}

#blogIntro ul.otherNum li span.num{
color: #666;
}

/* more */
#blogIntro .more{
margin: 6px 0 8px;
font-size: 10px;
text-align: right;
}

#blogIntro .more a{
padding-right: 15px;
background: url(http://images.hangame.co.jp/hangame/common/ico_arrowbox_orange.gif) no-repeat right center;
zoom: 1;
}

/* recruitFriendIntro
------------------------- */
#recruitFriendIntro{
width: 300px;
margin: 0 auto;
padding-top: 10px;
border-top: 1px dashed #d0c4b2;
}

/* num */
#recruitFriendIntro .num{
margin: 0 0 3px 0;
color: #774005;
font-weight: bold;
}

#recruitFriendIntro .num img{
margin-right: 10px;
vertical-align: middle;
}

/* list */
#recruitFriendIntro ul{
margin: 0 0 0 20px;
font-size: 10px;
line-height: 16px;
}

#recruitFriendIntro li{
padding-left: 10px;
background: url(http://images.hangame.co.jp/hangame/common/ico_2x2_orange.gif) no-repeat 4px 8px;
}

#recruitFriendIntro li .userId{
float: left;
display: block;
width: 80px;
}

/* date */
#recruitFriendIntro .date{
margin: 0 15px 5px 0;
color: #999;
font-size: 10px;
font-family: Verdana, sans-serif;
text-align: right;
}

/* more */
#recruitFriendIntro .more{
margin: 6px 0 8px;
font-size: 10px;
text-align: right;
}

#recruitFriendIntro .more a{

padding-right: 15px;
background: url(http://images.hangame.co.jp/hangame/common/ico_arrowbox_orange.gif) no-repeat right center;
zoom: 1;
}


/* mainIntroArea
---------------------------------------------------------------------- */
#mainIntroArea{
clear: both;
width: 644px;
margin: 0 auto 15px;
}


/* circle-blog
-------------------------------------------------- */
#circle-blog{
width: 639px;
margin: 0 -10px 10px -5px;
}
#circle-blog:after{content:".";display:block;height:0;clear:both;visibility:hidden}

/* common */
#circle-blog p.more{
position: absolute;
right: 10px;
top: 6px;
}
#circle-blog p.more a{
zoom: 1;
padding-right: 12px;
background: url(http://images.hangame.co.jp/hangame/common/ico_arrowbox_orange.gif) no-repeat right center;
color: #787677;
font-size: 10px;
}

/* recruitMmbr
------------------------------ */
#recruitMmbr{
position: relative;
float: left;
overflow: hidden;
width: 296px;
padding-right: 16px;
}

#recruitMmbr h2 img{
position: relative;
margin-top: -5px;
}

#recruitMmbr ul{
position: relative;
overflow: hidden;
width: 315px;
margin-top: 12px;
}
#recruitMmbr ul:after{content:".";display:block;height:0;clear:both;visibility:hidden}

#recruitMmbr ul li{
position: relative;
left: -1px;
float: left;
overflow: hidden;
width: 84px;
height: 124px;
padding: 0 10px;
border-left: 1px dotted #e7e7e7;
font-weight: bold;
word-break: break-all;
word-wrap: break-word;
}

#recruitMmbr ul li img{
display: block;
margin: 0 0 9px;
padding: 1px;
border: 1px solid #e3e3e3;
}

/* blogArea
------------------------------ */
#circle-blog .blogArea{
position: relative;
float: right;
width: 311px;
}

#circle-blog .blogArea .newBlog{
width: 311px;
height: 36px;
padding: 4px 0;
border-bottom: 1px dotted #cfcfcf;
}
#circle-blog .blogArea .newBlog:after{content:".";display:block;height:0;clear:both;visibility:hidden}

#circle-blog .blogArea .newBlog img{
float: left;
width: 22px;
height: 32px;
padding: 2px;
background: url(http://images.hangame.co.jp/hangame/avatar/top/bg_bloglist-ava.gif) 0 0 no-repeat;
}

#circle-blog .blogArea .newBlog dl{
position: relative;
float: right;
width: 269px;
height: 31px;
padding: 5px 0 0;
text-align: left;
}
	#circle-blog .blogArea .newBlog dt{
	position: absolute;
	bottom: 0;
	left: 22px;
	width: 247px;
	height: 15px;
	font-weight: normal;
	overflow: hidden;
	}
		#circle-blog .blogArea .newBlog dl dd.time{
		height: 14px;
		padding: 0 0 0 22px;
		background: url(http://images.hangame.co.jp/hangame/avatar/top/ico_comment_w.gif) 0 0 no-repeat;
		color: #aaa;
		font-size: 11px;
		}
		#circle-blog .blogArea .newBlog dl dd.id{
		position: absolute;
		top: 2px;
		right: 9px;
		text-align: right;
		}
	#circle-blog .blogArea .newBlog dt a,
	#circle-blog .blogArea .newBlog dd a{
	color: #999;
	}

/* themeArea
------------------------------ */
#circle-blog .themeArea{
position: relative;
float: right;
width: 311px;
}

#circle-blog .themeArea .themeName{
width: 306px;
height: 41px;
padding: 4px 0 0 5px;
border-bottom: 1px dotted #cfcfcf;
position:relative;
}

#circle-blog .themeArea .themeName:after{content:".";display:block;height:0;clear:both;visibility:hidden}

#circle-blog .themeArea .themeName p.themeTitle{
width:311px;
padding:0 0 2px;
color:#463B38;
}

#circle-blog .themeArea .themeName p.themeTitle span{
color:#FF6B63;
}

#circle-blog .themeArea .themeName div{
width:115px;
}

#circle-blog .themeArea .themeName .work{
width:105px;
position:absolute;
bottom:1px;
right:0;
}

#circle-blog .themeArea .themeName .work a{
background:transparent url(http://images.hangame.co.jp/hangame/common/ico_arrowbox_orange.gif) no-repeat scroll right center !important;
color:#787677;
font-size:10px;
padding-right:12px;
}

#circle-blog .themeArea .past{
position:absolute;
right:5px;
top:6px;
}

#circle-blog .themeArea .past a{
background:transparent url(http://images.hangame.co.jp/hangame/common/ico_arrowbox_orange.gif) no-repeat scroll right center !important;
color:#787677;
font-size:10px;
padding-right:12px;
}


/* cmntyCntPickup
-------------------------------------------------- */
#cmntyCntPickup{
position:relative;
zoom:1;
margin:0 0 10px
}

#cmntyCntPickup em{
font-style:normal;
}

/* h3 */
#cmntyCntPickup h3{
padding:6px 0 4px 15px;
border-bottom:1px solid #e2e2e2;
color:#433318;
font-size:14px;
line-height:16px;
}
#cmntyCntPickup h3 em{
color:#ff4b96;
}

/* info */
#cmntyCntPickup ul.info{
position:absolute;
right:0;
top:0;
line-height:26px;
overflow:hidden;
}
* html #pickupBBS ul.info,
* html #pickupBlog ul.info{
position:relative;
float:right;
margin-top:-27px;
}
#cmntyCntPickup ul.info:after{content:".";display:block;height:0;clear:both;visibility:hidden}
#cmntyCntPickup ul.info li{
position:relative;
left:-1px;
float:left;
padding:0 5px 0 7px;
background:url(http://images.hangame.co.jp/hangame/htop/vline_gray1x9.gif) no-repeat 0 10px;
font-size:10px;
vertical-align:top;
font-family:Tahoma, sans-serif;
*font-family:'Hiragino Kaku Gothic Pro', "MS PGothic", sans-serif;
}
#cmntyCntPickup ul.info li em{
color:#f60;
font-family:Tahoma, sans-serif;
font-weight:bold;
letter-spacing:0;
}

/* noData
------------------------- */
#cmntyCntPickup dl.noData{
position:relative;
min-height:160px;
_height:160px;
}
#cmntyCntPickup dl.noData:after{content:".";display:block;height:0;clear:both;visibility:hidden}

#cmntyCntPickup dl.noData dt{
_display:inline;
float:left;
margin:43px 0 8px 206px;
}

#cmntyCntPickup dl.noData dd.lead{
position:absolute;
left:208px;
top:103px;
}
#cmntyCntPickup dl.noData dd.more{
_display:inline;
float:left;
margin:69px 0 8px 17px;
}


/* swElm
------------------------- */
#cmntyCntPickup .swElm{
position:relative;
min-height:176px;
_height:176px;
margin-bottom:8px;
}
#cmntyCntPickup .swElm:after{content:".";display:block;height:0;clear:both;visibility:hidden}

/* time */
#cmntyCntPickup .swElm span.time{
margin-left:3px;
color:#999;
font-size:10px;
}

/* num */
#cmntyCntPickup .swElm span.num{
margin-left:3px;
color:#433318;
font-family:Tahoma, sans-serif;
font-size:9px;
}
#cmntyCntPickup .swElm span.num em{
font-weight:bold;
}

/* state */
#cmntyCntPickup .swElm img.state{
position:relative;
top:-1px;
*top:0;
margin-left:3px;
vertical-align:middle;
}

/* items */
#cmntyCntPickup .swElm ul.items{
float:left;
padding-top:12px;
}
#cmntyCntPickup .swElm ul.items li{
margin:0 0 6px;
padding:0 0 0 8px;
background:url(http://images.hangame.co.jp/hangame/htop/dot_gray2x2.gif) no-repeat 0 7px;
vertical-align:top;
}

/* more */
#cmntyCntPickup .swElm p.more{
position:absolute;
right:0;
bottom:0;
clear:both;
}
#cmntyCntPickup .swElm p.more a{
padding:0 0 0 7px;
background:url(http://images.hangame.co.jp/hangame/htop/arw_orange-r.gif) no-repeat 0 center;
color:#433318;
font-family:Osaka, 'MS PGothic',sans-serif;
font-size:10px;
}

/* pickupBBS
------------------------- */
#pickupBBS h2{
zoom:1;
border-bottom:1px solid #e2e2e2;
}
#pickupBBS h2:after{content:".";display:block;height:0;clear:both;visibility:hidden}
#pickupBBS h2 a{
position:relative;
}
#pickupBBS h2 a img{
position:relative;
display:block;
float:left;
margin:0 0 -1px;
}
.tabOn_pickupBBS #pickupBBS h2 img{
width:0;
height:25px;
padding-left:75px;
background:url(http://images.hangame.co.jp/hangame/htop/infoarea/bb/tab_bbs_on.gif) no-repeat 0 0;
}

.tabOn_pickupBlog #pickupBBS .swElm{
display:none;
}

/* thmbs */
#pickupBBS ul.thmbs{
position:relative;
float:left;
width:140px;
padding:12px 13px 0 14px;
font-size:10px;
line-height:14px;
}

#pickupBBS ul.thmbs li.img{
}
#pickupBBS ul.thmbs li.img a{
display:block;
width:134px;
height:94px;
padding:2px;
border:1px solid #d9d9d7;
text-align:center;
overflow:hidden;
}
#pickupBBS ul.thmbs li.img img{
-ms-interpolation-mode:bicubic;
}

#pickupBBS ul.thmbs li.txt{
padding:3px 5px 0;
}
#pickupBBS ul.thmbs li.txt a{
color:#7f7f7f;
}

/* items */
#pickupBBS ul.items{
width:238px;
padding-bottom:10px;
}

/* pickupBlog
------------------------- */
#pickupBlog h2{
position:absolute;
left:75px;
top:0;
}
.tabOn_pickupBlog #pickupBlog h2 img{
width:0;
height:25px;
padding-left:75px;
background:url(http://images.hangame.co.jp/hangame/htop/infoarea/bb/tab_blog_on.gif) no-repeat 0 0;
}

.tabOn_pickupBBS #pickupBlog .swElm{
display:none;
}

/* items */
#pickupBlog ul.items{
width:205px;
padding-left:10px;
}
#pickupBlog ul.items a.name{
margin-left:3px;
color:#999;
font-size:10px;
}

/* thmbs */
#pickupBlog ul.thmbs{
float:right;
width:204px;
padding:12px 0 16px;
overflow:hidden;
}
#pickupBlog ul.thmbs:after{content:".";display:block;height:0;clear:both;visibility:hidden}

#pickupBlog ul.thmbs li{
float:left;
width:48px;
height:53px;
overflow:hidden;
margin:0 3px 3px 0;
}

/* pickupCoorde
------------------------- */
#pickupCoorde{
position:relative;
border:1px solid #e6e1d9;
background-color:#fbfaf8;
}
#pickupCoorde h2{
margin:7px 14px 0;
background:url(http://images.hangame.co.jp/hangame/htop/infoarea/mote/tit_mote.gif) no-repeat right bottom;
}
#pickupCoorde h3{
padding:9px 0 6px 22px;
border:none
}
#pickupCoorde ul.info{
top:49px;
right:16px;
}

/* mcLstScrollBtns */
#mcLstScrollBtns{
position:relative;
z-index:1;
}
#mcLstScrollBtns li{
position:absolute;
top:41px;
}

* html #mcLstScrollBtns li img,
#mcLstScrollBtns li img.disable{
position:relative;
width:0;
height:30px;
padding-left:13px;
}

#mcLstScrollBtns li.prev{
left:4px;
}
* html #mcLstScrollBtns li.prev img{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://images.hangame.co.jp/hangame/htop/infoarea/mote/btn_prev.png", sizingMethod="crop");
}
#mcLstScrollBtns li.prev img.disable{
background:url(http://images.hangame.co.jp/hangame/htop/infoarea/mote/btn_prev-disable.png) no-repeat 0 0;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://images.hangame.co.jp/hangame/htop/infoarea/mote/btn_prev-disable.png", sizingMethod="crop");
}

#mcLstScrollBtns li.next{
right:3px;
}
* html #mcLstScrollBtns li.next img{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://images.hangame.co.jp/hangame/htop/infoarea/mote/btn_next.png", sizingMethod="crop");
}
#mcLstScrollBtns li.next img.disable{
background:url(http://images.hangame.co.jp/hangame/htop/infoarea/mote/btn_next-disable.png) no-repeat 0 0;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://images.hangame.co.jp/hangame/htop/infoarea/mote/btn_next-disable.png", sizingMethod="crop");
}


/* items */
#coordeList{
position:relative;
width:604px;
margin:0 0 7px 8px;
padding-left:11px;
overflow:hidden;
}

#coordeList ul.items{
position:relative;
width:1016px;
}
#coordeList ul.items:after{content:".";display:block;height:0;clear:both;visibility:hidden}

#coordeList ul.items li{
float:left;
position:relative;
z-index:0;
width:112px;
margin-right:11px;
padding-bottom:3px;
}

#coordeList ul.items li span.thmb{
display:block;
margin:0 0 3px;
padding:2px;
border:1px solid #d7d7d7;
}
#coordeList ul.items li span.thmb a{
display:block;
position:relative;
width:106px;
height:106px;
overflow:hidden;
text-align:center;
}
#coordeList ul.items li span.thmb a img{
-ms-interpolation-mode:bicubic;
}

#coordeList ul.items li span.mote{
display:block;
position:absolute;
left:-14px;
bottom:0;
width:45px;
height:33px;
padding-top:13px;
background:url(http://images.hangame.co.jp/hangame/htop/infoarea/mote/bg_mote.png) no-repeat 0 0;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://images.hangame.co.jp/hangame/htop/infoarea/mote/bg_mote.png',sizingMethod='crop');
text-align:center;
}
#coordeList ul.items li span.mote img{
margin-left:-1px;
}

#coordeList ul.items li span.name{
display:block;
margin-left:30px;
font-size:10px;
white-space:nowrap;
}

/* notes */
#pickupCoorde .notes{
position:relative;
width:610px;
margin:0 auto;
padding:4px 0 8px;
background:url(http://images.hangame.co.jp/hangame/htop/infoarea/mote/tit_mote.gif) repeat-x 0 -35px;
font-size:10px;
text-align:right
}
#pickupCoorde .notes img{
position:relative;
top:2px;
right:3px;
}

/* more */
#pickupCoorde p.more{
position:absolute;
right:14px;
top:19px;
}
* html #pickupCoorde p.more img{
width:0;
height:19px;
padding-left:54px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://images.hangame.co.jp/hangame/htop/infoarea/btn_more.png',sizingMethod='crop');
}


/* lab-hg24h
-------------------------------------------------- */
#lab-hg24h{
position: relative;
width: 624px;
margin:0 auto 24px;
}
#lab-hg24h:after{content:".";display:block;height:0;clear:both;visibility:hidden}

/* common */
#lab-hg24h h3{
position: absolute;
top: 69px;
left: 95px;
}
#lab-hg24h a img{
margin: 3px 6px;
}
#lab-hg24h a img.pict{
float: left;
margin: 0 7px 11px;
}

#lab-hg24h .more,
#lab-hg24h .voting{
height: 20px;
margin: 0 6px;
line-height: 20px;
text-align: right;
}

#lab-hg24h .more a,
#lab-hg24h .voting a{
padding-right: 13px;
background: url(http://images.hangame.co.jp/hangame/common/ico_arrowbox_orange.gif) no-repeat right center;
zoom: 1;
}

#lab-hg24h p.lead{
margin-top: 20px;
}

#lab-hg24h p img{
margin: 6px 0 8px 7px;
}

/* labIntro */
#labIntro{
float: left;
position: relative;
width: 306px;
background: #f6f6f6;
}
#labIntro p.comment{
margin-right: 6px;
font-size: 11px;
text-align: right;
}

/* hg24hIntro */
#hg24hIntro{
float: right;
position: relative;
width: 306px;
background: #f6f6f6;
}


/* communityTools
-------------------------------------------------- */
#communityTools{
width: 614px;
margin: 0 auto;
padding-bottom: 20px;
}

#communityTools h2{
margin-bottom: 15px;
padding: 0 0 6px 5px;
border-bottom: 1px solid #cdc1b0;
}

#communityTools ul{
position: relative;/* for DW */
width: 614px;
}

#communityTools ul:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }

#communityTools li{
position: relative;/* for DW */
float: left;
width: 307px;
padding-bottom: 20px;
}

#communityTools li:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }

#communityTools li img{
float: left;
margin-right: 8px;
}

#communityTools li h3 a{
color: #630;
}

#communityTools li p{
margin-top: 5px;
font-size: 10px;
}