@charset 'Shift_JIS';

/* - First{ R.S } - Last{ R.S. } - Update{ 2009-09-30 } - About{ Common Layout style of info } */


/* ==================================================

 Basic style 

================================================== */
body { color: #666; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: 12px; }
p { margin: 0; }
ol, ul, li { list-style: none; margin: 0; padding: 0; }
dl, dt, dd { margin: 0; padding: 0; }
img { border: 0; vertical-align: bottom; }
a img { vertical-align: bottom; }
a:link { color: #666; text-decoration: none; }
a:visited { color: #666; text-decoration: none; }
a:hover, a:active, a:focus { color: #666; text-decoration: none; }
form { margin: 0; padding: 0; }
label{ cursor: pointer; }
.hide{display:none;}

/* ==================================================

 layout

================================================== */

#contentsArea {
margin-bottom:15px;
position: relative;
}

/* ==================================================

 contents

================================================== */
#contentsArea .contents {
position: relative;
width: 644px;
margin: 15px auto 0;
padding: 0;
}
/* ==================================================

  header

================================================== */

#header {
position: relative;
overflow: hidden;
}

#header h1{
width:860px;
height: 90px;
margin-top:5px;
}

/* ==================================================

  bodyArea

================================================== */

#bodyArea{
margin-bottom:0!important;
background: url(http://images.hangame.co.jp/hangame/extra/info/common/bg_bodyarea.gif) repeat-y scroll 0 0!important;
}

/* contentsArea
-------------------- */

/* nav */
#contentsArea .nav {
width: 641px;
height: 29px;
padding: 5px 0 0 3px;
background: url(http://images.hangame.co.jp/hangame/extra/info/common/bg_nav.gif) 0 0 no-repeat;
}
#contentsArea .nav.v02 {
padding: 5px 0 0 4px;
}
#contentsArea .nav li {
float: left;
}

/* ==================================================

 cmdArea

================================================== */

#cmdArea{
width:210px;
float: right;
}

#cmdArea .infoArea{
padding:10px;
background:#fff;
border:1px solid #D7D7D7;
border-bottom: none;
}
#cmdArea .infoArea h2{
  font-weight: bold;
  font-size: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid #d7d7d7;
  color: #222;
}
#cmdArea .infoArea ul{
  padding-top: 5px;
}
#cmdArea .infoArea ul li{
  padding-left: 7px;
  margin-top: 10px;
  background: url("http://images.hangame.co.jp/r02/common/sprite/sp_dot.png") no-repeat 0px 8px;
  line-height: 19px;
}
#cmdArea .searchArea{
padding:10px 0 20px;
margin-bottom:10px;
background:#fff;
border:1px solid #D7D7D7;
}

#cmdArea .searchArea h2{
width:84px;
padding:0 0 5px 5px;
}

#cmdArea .searchArea dl{
width:194px;
margin:0 auto 10px;
}

#cmdArea .searchArea dl dt,
#cmdArea .searchArea dl dd{
padding-bottom:5px;
}

#cmdArea .searchArea dl dd.pickup{
padding-bottom:5px;
}

#cmdArea .searchArea dl dd.pickup:after{content:".";display:block;height:0;clear:both;visibility:hidden}

#cmdArea .searchArea dl dd.pickup p.word,
#cmdArea .searchArea dl dd.pickup ul{
	float: left;
}

#cmdArea .searchArea dl dd.pickup p.word{
	padding-right: 3px;
}

#cmdArea .searchArea dl dd.pickup ul{
	font-size: 11px;
}

#cmdArea .searchArea dl dd.pickup ul li{
	display: inline;
	padding-left: 2px;
}

#cmdArea .searchArea dl dd.pickup ul li a:hover{
	text-decoration: underline;
}

#cmdArea .searchArea .period{
width:194px;
position:relative;
z-index:9999;
}

#cmdArea .searchArea .period ul{
width:194px;
height:23px;
background:url(http://images.hangame.co.jp/hangame/extra/info/common/bg_period.gif) no-repeat 0 0;
text-align:center;
}

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


#cmdArea .searchArea .period ul li{
width:87px;
line-height:23px;
cursor:pointer;
}

#cmdArea .searchArea .period ul li.open{
float:left;
}

#cmdArea .searchArea .period ul li.end{
float:right;
}

#cmdArea .searchArea .supple{
font-size: 10px;
color: #ff6600;
padding-bottom: 10px;
}


#cmdArea .searchArea dl dd select#genre{
width:192px;
height:20px;
border:1px solid #ccc;
font-size:12px;
}

#cmdArea .searchArea dl dd input{
width:192px;
padding-top:3px;
height:15px;
border:1px solid #ccc;
font-size:12px;
}

#cmdArea .searchArea p.btn{
width:170px;
margin:0 auto;
}


/*  calendar
 -----------------------------*/

#cmdArea .calendar{
width:150px;
height:164px;
padding:8px 10px 0;
border-top:5px solid #ccc;
border-bottom:5px solid #ccc;
border-left:4px solid #ccc;
border-right:4px solid #ccc;
background:#fff url(http://images.hangame.co.jp/hangame/extra/info/common/bg_calendar.gif) repeat-x center top;
text-align:center;
position: absolute;
top:15px;
left:8px;
z-index:9
}

#cmdArea dd.period iframe{
width:178px;
height:178px;
position: absolute;
top:15px;
left:8px;
z-index:1;
border:0;
}

#cmdArea .calendar p strong{

}

#cmdArea .calendar table{
}

#cmdArea .calendar table caption{
padding-bottom:11px;
}


#cmdArea .calendar table th{
font-weight:normal;
padding-bottom:10px;
color:#606E7B;
}

#cmdArea .calendar table th.sun{
}

#cmdArea .calendar table td{
width:20px;
height:16px;
cursor:pointer;
color:#444444;
}

#cmdArea .calendar table td.today{
background:#CCCCCC;
}

#cmdArea .calendar table td.other{
color:#ccc;
cursor: default;
}

#cmdArea .calendar table td.select{
background:#5C95BC;
color:#fff;
}

#cmdArea .calendar table td.on{
background: #E6E6E6;
}

#cmdArea .calendar p.next{
position:absolute;
top:12px;
right:37px;
}

#cmdArea .calendar p.prev{
position:absolute;
top:12px;
left:35px;
}

#cmdArea .calendar p img{
vertical-align:top;
}

/*  rss
 -----------------------------*/

#cmdArea .rss{
width:194px;
padding:9px 0 5px;
margin:0 auto;
background: url(http://images.hangame.co.jp/hangame/extra/info/common/bg_rss_top.gif) no-repeat center top;
}

#cmdArea .rss div.format{
width:188px;
padding-left:6px;
margin:0 auto;
}

#cmdArea .rss div:after{content:".";display:block;height:0;clear:both;visibility:hidden}

#cmdArea .rss h2{
float:left;
}

#cmdArea .rss ul{
zoom:1;
float:left;
}

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

#cmdArea .rss ul li{
width:44px;
float:left;
text-align:right;
}

#cmdArea .rss p.about{
padding:12px 0 5px;
text-align:center;
clear:both;
}

#cmdArea .open .info{
width:178px;
padding:11px 8px 8px;
background:url(http://images.hangame.co.jp/hangame/extra/info/common/bg_rss_info.gif) no-repeat center top;
}

#cmdArea .open .info h3{
padding:0 0 10px 25px;
background: url(http://images.hangame.co.jp/hangame/extra/info/common/ico_rss.gif) no-repeat 10px 1px;
}

#cmdArea .open .info p{
font-size:11px;
padding: 0 0 10px 5px;
}

#cmdArea .open .info p.close{
text-align:right;
padding: 7px 10px 8px 0;
}

#cmdArea .open .info p.close a{
text-decoration:none;
}

#cmdArea .closed .info{
display:none;
}

/*  tips
 -----------------------------*/
 
#cmdArea ul.tips{
margin:10px auto;
text-align:center;
}

#cmdArea ul.tips li{
margin:0 0 7px;
} 

/* ==================================================

 pageNavi

================================================== */
ul.pageNavi{
clear: both;
margin:0 auto;
padding:0 0 20px;
text-align: center;
}

ul.pageNavi li{
display: inline;
margin-right: -4px;
border-left: 1px solid #d2d2d2;
font-weight: bold;
line-height: 14px;
}

ul.pageNavi li.first{
border-left: none;
}

ul.pageNavi li.first,
ul.pageNavi li.last{
zoom: 1;
width: 69px;
*margin-right: 0;
}

ul.pageNavi li.prev{
zoom: 1;
width: 53px;
*margin-right: 1px;
}

ul.pageNavi li.next{
zoom: 1;
width: 52px;
*margin-right: 1px;
}

ul.pageNavi li a:link,
ul.pageNavi li a:visited{
padding: 0 10px;
zoom: 1;
color: #676767;
}

ul.pageNavi li a:hover{
padding: 0 9px;
border-left: 1px solid #fff;
border-right: 1px solid #f3f3f3;
background-color: #f3f3f3;
text-decoration: none;
}

ul.pageNavi li.now a:link,
ul.pageNavi li.now a:visited{
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;
}

/* ==================================================

 infoBox

================================================== */
div.infoBox{
zoom:1;
margin:30px 65px;
padding:5px;
background-color:#ededed;
}
div.infoBox *{
color:#666;
font-size:12px;
}
div.infoBox div.ib_cts{
zoom:1;
border:2px solid #fff;
}

/* text */
div.infoBox p.ib_txt{
margin:40px;
text-align:center;
}

/* dl */
div.infoBox dl{
margin:40px;
}
div.infoBox dl dt{
margin-bottom:20px;
font-weight:bold;
text-align:center;
}
div.infoBox dl dd{
margin-bottom:20px;
text-align:center;
}
div.infoBox dl dd p{
margin-bottom:1em;
}

div.infoBox ul.btns{
margin:-20px 0 40px;
text-align:center;
}
div.infoBox ul.btns li{
display:inline;
}


/* interlockArea
------------------------- */
#interlockArea{
position:relative;
height:25px;
padding: 5px 0;
width: 561px;
}
#interlockArea ul{
position:absolute;
right:0;
}

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

#interlockArea ul li{
zoom:1;
padding-right:8px;
float:left;
}

#interlockArea ul li a{
display:inline-block;
}

#interlockArea ul li iframe.twitter-share-button,
#interlockArea ul li span{
    width: 105px!important;
}