@charset "utf-8";
/* Ｃ２１ Hangame Information Style
========================================================

WebSite:  c21.hangame.co.jp
Author:   Cyber Step, Inc.
Version:  27 April 2007

= INDEX =

01. General rules 
02. Layout
03. Header 
04. Navigation
05. Content Box
06. Footer
07. Text Style
08. Link style
09. Banner Style
10. Table Style
11. Form Style
12. Information Style

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

/* 01. General rules
----------------------------------------------- */
* {
	list-style: none;
	margin: 0;
	padding: 0;
	}

body {
	margin: 0;
	padding: 0;
	border: 0;
	background:#506980 none/*url(/i/base/bg_pattern.gif)*/ repeat;
	color: #234;
	font: normal normal normal 12px/1.5em "ＭＳ Ｐゴシック",Osaka,arial,sans-serif;
	}

img {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	}

br.float-clear {
	clear: both;
	margin: 0;
	padding: 0;
	border: 0;
	}

.access {
	overflow: hidden;
	width: 0;
	height: 0;
	}

.invisible {
	display: none;
	}

.centering {
	margin: 0 auto;
	text-align:center;
	}

dt {
	font-weight: bold;
	}

dd {
	margin-left: 1em;
	margin-bottom: 1em;
	}

/* 02. Layout
----------------------------------------------- */
#background {
	margin: 0;
	padding-left: 10px;
	border: 0;
	background: url(/hangame/i/info/bg_gradation.png) repeat-x;
	}

#wrapper {
	width: 600px;	 
	margin: 0 auto;
	padding: 0;
	border: 0;
	background: transparent none no-repeat;
	}

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

#header {
    width:600px;
	height: 172px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent url(/hangame/i/info/hg_header.png) no-repeat;
	}

#pagebody {
	width: 600px;
	margin: 0;
	border: 0;
	padding: 0;
	background: transparent url(/hangame/i/info/mc_container_bg.png) repeat-y;
	}

#main-content {
	float: inherit;
	overflow: hidden;
	width: 600px;
	margin: 0;
	border: 0;
	padding: 20px 0 0 0;
	text-align: left;
	background: transparent url(/hangame/i/info/mc_container_top.png) no-repeat top left;
	}

#footer {
	width:600px;
	height: 20px;
	margin: 0 0 50px 0;
	padding: 23px 0 0 0;
	border: 0;
	background: transparent url(/hangame/i/info/mc_container_bottom.png) no-repeat top;
	}


/* 03. Header
----------------------------------------------- */
h1 {
	overflow: hidden;
	width: 0;
	height: 0;
	border: 0;
	background: transparent;
	text-indent: -5000px;
	}

/* Headline  */
#headline-top {
	width: 600px;
	height: 32px;
	margin: 5px 0;
	padding: 0;
	border: 0;
	background: transparent;
	text-indent: -5000px;
	}

#headline-ui {			background: transparent url(/i/title/c1_ui.gif) no-repeat 15px 0;	}
#headline-operation {	background: transparent url(/i/title/c2_operation.gif) no-repeat 15px 0;	}
#headline-communication {	background: transparent url(/i/title/c8_communication.gif) no-repeat 15px 0;	}
#headline-robo {		background: transparent url(/i/title/c3_robo.gif) no-repeat 15px 0;	}
#headline-skinedit {	background: transparent url(/i/title/c10_skinedit.gif) no-repeat 15px 0;	}
#headline-system {		background: transparent url(/i/title/c4_system.gif) no-repeat 15px 0;	}
#headline-map {			background: transparent url(/i/title/c5_map.gif) no-repeat 15px 0;	}
#headline-terminal {	background: transparent url(/i/title/c7_terminal.gif) no-repeat 15px 0;	}
#headline-item {		background: transparent url(/i/title/c6_item.gif) no-repeat 15px 0;	}
#headline-robo-gp {		background: transparent url(/i/title/c9_robo_gp.gif) no-repeat 15px 0;	}
	
#headline-info-news	{		background: transparent url(/i/title/e1_info_news.gif) no-repeat 15px 0;	}
#headline-info-update {	background: transparent url(/i/title/e2_info_update.gif) no-repeat 15px 0;	}
#headline-info-mainte {	background: transparent url(/i/title/e3_info_mainte.gif) no-repeat 15px 0;	}
#headline-info-event {	background: transparent url(/i/title/e4_info_event.gif) no-repeat 15px 0;	}
#headline-faq {			background: transparent url(/i/title/e5_faq.gif) no-repeat 15px 0;	}
#headline-report {		background: transparent url(/i/title/e6_report.gif) no-repeat 15px 0;	}
#headline-request {		background: transparent url(/i/title/e7_request.gif) no-repeat 15px 0;	}
#headline-account {		background: transparent url(/i/title/e8_account.gif) no-repeat 15px 0;	}
#headline-forgot-pass {	background: transparent url(/i/title/e9_forgot_pass.gif) no-repeat 15px 0;	}
#headline-contact {		background: transparent url(/i/title/e10_contact.gif) no-repeat 15px 0;	}
#headline-inquiry-mt {	background: transparent url(/i/title/e11_inquiry_mt.gif) no-repeat 15px 0;	}


/* 04. Navigation 
----------------------------------------------- */

/* sub-nav */
ul.sub-nav,
ul.sub-nav li {
	display: inline;
	}

ul.sub-nav {
	border-left: 3px double #666;
	border-right: 3px double #666;
	}

ul.sub-nav li {
	padding: 0 7px; 
	border-right: 1px solid #666;
	background: transparent;
	font-weight: bold;
	}

ul.sub-nav li.end {
	border: 0;
	}

ul.sub-nav li a {
	font-weight: normal; 
	}


/* Tab Nav */
ul.tab-nav {
	display: block;
	height: 26px;
	margin:0;
	padding:0;
	border-bottom: 2px solid #567;
	}

ul.tab-nav li {
	display: block;
	float: left;
	height: 26px;
	background: url(/i/nav/tab_nav.gif) no-repeat 100% 0%;
	margin:0 0 0 0;
	padding:0 8px 0 0;
	}

ul.tab-nav li a {
	display:block;
	float:left;
	background:url(/i/nav/tab_nav.gif) no-repeat 0% 0%;
	padding:6px 0px 2px 13px;
	text-decoration:none;
	}

ul.tab-nav li.selected {background-position: 100% -26px;}
ul.tab-nav li.selected a {background-position: 0% -26px;}

ul.tab-nav li a:link,
ul.tab-nav li.selected a:link,
ul.tab-nav li a:visited,
ul.tab-nav li.selected a:visited {
	color: #666;
	text-decoration: none;
	}

ul.tab-nav li a:hover,
ul.tab-nav li.selected a:hover, 
ul.tab-nav li a:active, 
ul.tab-nav li.selected a:active {
	color: #07b;
	text-decoration: underline;
	}


/* c-nav ----------------------------------------*/
#c-nav {
	width: 150px;
	padding-top: 30px;
	}

#c-nav a {
	display: block;
	padding-left: 20px;
	}

#c-nav a.home {
	background: url(/i/base/home.gif) no-repeat 0 3px;
	}

#c-nav a.pagetop {
	background: url(/i/base/pagetop.gif) no-repeat 0 3px;
	}



/* 05. Content Box
----------------------------------------------- */
.c-box01 {
	width: 560px;
	margin: 0 auto 10px;
	padding: 0;
	border: 0;
	}

.c-box01 p {
	text-indent: 0;
	text-align: justify;
	text-justify: distribute;
	}

.c-box01-pix-r			{	margin: 20px 0;	}
.c-box01-pix-r p.pix	{	float: right; width: 225px; margin: 0 0 20px 20px;	}
.c-box01-pix-r div.text	{	float: left; width: 315px; margin: 0 0 20px 0;	}

.c-box01-pix-l			{	margin: 20px 0;	}
.c-box01-pix-l p.pix	{	float: left; width: 225px; margin: 0 20px 20px 0;	}
.c-box01-pix-l div.text	{	float: right; width: 315px; margin: 0 0 20px 0;	}

.c-box01-pix-c {
	text-align: center;
	}

.c-box01-pix-c img {
	margin: 0 auto;
	}

.c-box01-pix-c div.text {
	margin: 10px 0;
	padding: 10px 20px;
	background: #f0f9ff;
	}

.c-box02 {
	width: 540px;
	margin: 0 auto 20px auto;
	padding: 0;
	}

.c-box02-3col-lc {
	float: left;
	width: 350px;
	}

.c-box02-3col-l {
	float: left;
	width: 160px;
	}

.c-box02-3col-c {
	float: right;
	width: 160px;
	}

.c-box02-3col-r {
	float: right;
	width: 160px;
	margin: 0 0 0 30px;
	}

.c-box03 {
	width: 100%;
	padding: 20px 0;
	border-top: 2px solid #e6e6e6;
	border-bottom: 2px solid #e6e6e6;
	background: #f6f6f6;
	}

.c-box04 {
	width: 480px;
	margin: 0 auto 20px 40px;
	}

.txt-red { color:#e00; }
.txt-white { color:#fff; }


/* 06. Footer
----------------------------------------------- */
#footer p {
	margin: 0 0 0 10px;
	padding: 0;
	border: 0;
	color: #ccc;
	font: normal normal normal 10px/1.2em verdana,sans-serif;
	text-align: left;
	}

/* 07. Text Style
----------------------------------------------- */
em {
	font-weight: bold;
	font-style: normal;
	color: #06f;
	}

strong {
	font-weight: bold;
	font-style: normal;
	color: #f60;
	}

.font-small {
	font-size: 10px;
	line-height: 1.5em;
	}

.bold { font-weight: bold;}

.txt-center {	text-align: center;	}
.txt-right {	text-align: right;	}
.txt-left {	text-align: left;	}

h2 {
	margin: 0 0 20px -10px;
	padding: 0 0 0 50px;
	border: 0;
	}

h3 {
	margin: 0 0 10px 0;
	border: 0;
	padding:0 0 0 23px;
	background: #D0D9DF url(/i/base/h3_mark.gif) no-repeat;
	color: #258;
	font: normal normal bold 14px/1.5em "ＭＳ Ｐゴシック",Osaka,verdana,sans-serif;
	}

h4 {
	padding: 0;
	margin: 0 0 5px 0;
	border-top: 1px solid #678;
	border-bottom: 1px solid #678;
	background: #93A6B9;
	color: #234;
	font: normal normal bold 12px/1.5em "ＭＳ Ｐゴシック",Osaka,verdana,sans-serif;
	text-indent: 0.5em;
	}

h4 span {
	padding: 0;
	margin: 0;
	border: 0;
	color: #666;
	font: normal normal normal 12px/1.5em "ＭＳ Ｐゴシック",Osaka,verdana,sans-serif;
	}


/* 08. Link Style
----------------------------------------------- */
a:link {
	color: #09c;
	text-decoration: none;
	}

a:visited {
	color: #08b;
	text-decoration: none;
	}

a:hover,
a:active {
	color: #0cf;
	text-decoration: underline;
	}


/* 09. Banner Style
----------------------------------------------- */
.banner-box {
	margin-bottom: 10px;
	}

/* 10. Table Style
----------------------------------------------- */
.table-border {
	border: 0px solid #999999;
	}

.table-border input {
	height:16px;
	border: 2px solid #89a;
	background: #fff;
	}

.table-border textarea {
	padding: 2px;
	border: 2px solid #89a;
	background: #fff;
	color: #666;
	font-size: 12px;
	line-height: 1.8em;
	}

.table-border input.bg-none {
	height: 14px;
	margin: 0 5px 0 0;
	border: 0;
	background: transparent;
	}

.general-table {
	width: 100%;
	margin: 0 auto;
	border-top: 1px solid #9FD2E8;
	border-left: 1px solid #9FD2E8;
	background: #fff;
	text-align: left;
	font: normal normal normal 12px/1.5em "ＭＳ Ｐゴシック",Osaka,sans-serif;
	}

.general-table tr {
	height: 28px;
	}

.general-table th {
	padding: 3px;
	border-bottom: 1px solid #e6e6e6;
	border-right: 0px solid #9FD2E8;
	background: #f9f9f9;
	}

.general-table td {
	padding: 3px;
	border-top: 1px solid #e6e6e6;
	border-right: 0px solid #9FD2E8;
	background: #fff;
	}

.general-table tr.alt-color td{
	background: #f9f9f9;
	}

	
/*. 11. Support
----------------------------------------------- */
table.form-table {
	width: 100%;
	text-align: left;
	font: normal normal normal 12px/1.5em "ＭＳ Ｐゴシック",Osaka,sans-serif;
	}

table.form-table colgroup.data-subject {
	width: 150px;
	}

table.form-table colgroup.data-form {
	width: 386px;
	}

table.form-table td {
	padding: 10px;
	border-top: 2px solid #89a;
	border-bottom: 2px solid #89a;
	background: #c0c9cf;
	}

table.form-table td table td {
	padding: 3px;
	border: 0;
	background: #f0f9ff;
	}

.table-border {
	clear: both;
	border: 0px solid #096;
	}


.table-border input {
	height:16px;
	border: 2px solid #89a;
	background: #fff/*url(/i/base/bg_form_all.gif)*/;
	}

.table-border textarea {
	padding: 2px;
	border: 2px solid #89a;
	background: #fff;
	color: #666;
	font-size: 12px;
	line-height: 1.8em;
	}

.table-border input.bg-none {
	height: 14px;
	margin: 0 5px 0 0;
	border: 0;
	background: transparent;
	}

.error-msg-box {
	margin-top: 10px;
	}

.error-msg-box p.error-msg {
	width: 100%;
	margin-bottom: 10px;
	padding: 5px 0;
	border-top: 2px solid #89a;
	border-bottom: 2px solid #89a;
	}


/* 12. Information Style
----------------------------------------------- */
.info-list {
	width: 100%;
	}

table.info-list th {
	height: 26px;
	border-top: 2px solid #678;
	border-bottom: 2px solid #678;
	background: #93A6B9;
	font-weight: normal;
	font-size: 10px;
	text-align: center;
	}

table.info-list td {
	padding: 3px 5px;
	border-bottom: 1px solid #567; 
	}

table.info-list td a:link,
table.info-list td a:visited {
	color: #666;
	text-decoration: none;
	}

table.info-list td a:hover, 
table.info-list td a:active {
	color: #08f;
	text-decoration: underline;
	}

table.info-list td.category {
	width: 55px;
	}

table.info-list td.category img {
	margin: 0 auto;
	}

table.info-list td.title {
	width: 415px;
	}
	
table.info-list td.date {
	width: 90px;
	text-align: right;
	}


/* info-thread */

.info-thread {
	width: 536px;
	margin: 0 auto;
	}

.info-thread tr.info-head {
	background: #c0c9cf;
	}

table.info-thread td.category {
	width: 50px;
	}

table.info-thread td.category img {
	margin: 0 auto;
	}

table.info-thread td.title {
	width: 376px;
	font-weight: bold;
	}
	
table.info-thread td.date {
	width: 70px;
	text-align: right;
	}

table.info-thread td.category,
table.info-thread td.title,
table.info-thread td.date {
	border-top: 2px solid #89a;
	border-bottom: 2px solid #89a;
	background: #c0c9cf;
	}

.info-thread td {
	padding: 5px;
	}

.info-thread td.info-body {
	width: 526px;
	border-bottom: 0px solid #60B0D7;
	}

.info-thread td.info-body p {
	padding: 20px;
	text-align: left;
	}

.info-thread td.info-body img {
	display: block;
	margin: 20px auto;
	}
	
.info-thread td.info-body img.left {
	float: left;
	margin: 0 20px 0 0;
	}

.info-thread td.info-body img.right {
	float: right;
	margin: 0 0 0 20px;
	}

.info-thread td.info-body ul {
	padding: 0 35px;
	}

.info-thread td.info-body ul li {
	list-style-type: disc;
	}

.info-thread td.info-body ol {
	padding: 0 35px;
	}

.info-thread td.info-body ol li {
	list-style-type: decimal;
	}


/* pagejamper */

.bbs-page-jumper {
	margin: 2px;
	padding: 12px;
	border-top: 2px solid #678;
	border-bottom: 2px solid #678;
	background: #93A6B9;
	}

.bbs-page-jumper p {
	height: 18px;
	margin: 0 auto;
	text-align: center;
	}

.bbs-page-jumper p span {
	width: auto;
	height: 18px;
	margin: 0 1px;
	text-decoration: none;
	}

.bbs-page-jumper p span img {
	display: inline;
	}

.bbs-page-jumper p a {
	margin: 0;
	padding: 0;
	color: #60B0D7;
	font-weight: bold;
	vertical-align: middle;
	}

.bbs-page-jumper p a:link,
.bbs-page-jumper p a:visited {
	color: #07d;
	text-decoration: none;
	}

.bbs-page-jumper p a:hover,
.bbs-page-jumper p a:active {
	color: #4af;
	text-decoration: none;
	}


/* update table */

table.upinfo { margin: 0 auto; border: 2px solid #789; text-align: center;}
table.upinfo th { padding: 5px; border: 1px solid #789; background: #89a;}
table.upinfo td { padding: 5px; border: 1px solid #789; background: #d0d9df; text-align: left;}
table.upinfo caption { margin: 0 auto; padding-bottom: 5px;}

table.upinfo-02 { margin: 0 auto; background-color: #1d5183; text-align: center;}
table.upinfo-02 td { padding: 0px;}
table.upinfo-02 caption { margin: 0 auto; padding-bottom: 5px;}


/* event table */

table.info-event {	width: 480px;	margin: 0 auto;	}
table.info-event th {	padding: 5px 5px 15px;	background: #c0c9cf;	vertical-align: top;	font-wight: bold;	}
table.info-event td {	padding: 5px 5px 15px;	vertical-align: top;	font-wight: bold;	}


/* faq table */

table.info-thread td.faq-title {
	padding: 10px 5px;
	border-top: 2px solid #678;
	border-bottom: 2px solid #678;
	background: #93A6B9;
	font-weight: bold;
	}