
/* Common */
/*{border:1px dotted #ff0000;}*/
/*div{border:1px dotted #ff0000;}*/

/*  #11dfcd */
/*  #ff9400 */
html,body{
  text-align:center;
  background-color:#000000;
  color:#ffffff;
  margin:0px;
  padding:0px;
  overflow:auto;
  font-size:90%;
}
a{
  color:#11dfcd;
  outline: none;
}
a:hover{
  color:#99eeff;
  outline: none;
}

p{
  line-height:1em;
  padding:4px 0px;
}

h2{
  color:#ff9400;
  font-weight:bold;
  font-size:1.4em;
  text-align:left;
  padding-left:12px;
  margin-bottom:20px;
  height:18px;
  border-left:18px solid #ff9400;
}

h3{
  font-weight:bold;
  color:#ff9400;
  font-size:1.2em;
  text-align:left;
  margin:20px 0px;
  padding-left:12px;
}
textarea{
  margin:0px auto;
  width:640px;
  height:480px;
}
pre{
  font-size:1em;
}


/* CommonClass */

.c{
  text-align:center;
}
.d{
  display:none;
}
.w50{
  width:360px;
}
.section{
  padding-bottom:40px;
}
.hori{
  zoom:1;
}

.hori:after{
  content:"";
  display:block;
  clear:both;
}
ul.hori li,
div.hori div.li{
  display:inline;
  float:left;
}


.text{
  margin:0px 24px;
}
.text p{
  line-height:24px;
}

ul.list{
  margin-left:20px;
}
ul.list li{
  list-style-type:disc;
  margin:10px;
}
ol li{
}
ol li .text{
}


.important{
  color:#ff6000;
  font-size:1.2em;
}



/* Layout */

#wrapper{
  margin:0px auto;
  width:950px;
}
#header{
  position:relative;
  left:0px;
  top:0px;
  height:140px;
  background-image:url(../img/background/line_top.png);
  background-repeat:no-repeat;
  background-position:0px bottom;
}
#header_inner{
}
#header h1{
  position:abosolute;
  left:0px;
  top:0px;
  background-image:url(../img/logo/logo_mini.png);
  background-repeat:no-repeat;
  background-position:40px 50%;
  height:140px;
  text-indent:-9999px;
}
#header .menu{
  position:absolute;
  right:0px;
  top:0px;
}
#header .menu a{
  line-height:32px;
  padding:0px 8px;

}

#index #header h1{
  background-image:url(../img/logo/logo_large.png);
  background-repeat:no-repeat;
  background-position:50% 50%;
  height:140px;
  text-indent:-9999px;
}
#index #header .menu{
  display:none;
}
#footer{
  background-image:url(../img/background/line_tiling.png);
  background-repeat:repeat-y;
  text-align:center;
  padding-bottom:20px;
}
#footer_inner{
  padding:0px 40px;
  padding-top:40px;
}
#footer .menu li{
  padding:4px 12px;
  border-right:1px solid #ffffff;
}
#footer a{
}
#footer .copyright{
  font-size:0.8em;
}

#content{
  width:950px;
  background-image:url(../img/background/line_tiling.png);
  background-repeat:repeat-y;
  text-align:left;
}
#content_inner{
  padding-left:30px;
  padding-right:30px;
}
#logo{
  text-align:right;
}
#link_top{
  text-align:right;
}
#header h1 a{
  display:block;
  width:100%;
  height:100%;
}




/* IndexPage */


#index #wrapper{
}
#index .notice{
  font-size:12px;
}

#title{
  height:540px;
  background-image:url(../img/other/image_mainillust.jpg);
  background-repeat:no-repeat;
  background-position:50% 50%;
  position:relative;
  left:0px;
  top:0px;
  font-size:12px;
}
#title .attention{
  position:absolute;
  left:40px;
  top:460px;
  font-size:1.6em;
  font-weight:bold;
  color:#11dfcd;
}
#title .area_question_info{
  position:absolute;
  right:20px;
  top:200px;
  width:200px;
}
#title .area_download_info{
  position:absolute;
  right:20px;
  top:360px;
  width:200px;
}
#arfigure .image{
  text-align:center;
}


#howtoplay ol li{
  zoom:1;
}
#howtoplay ol li:after{
  content:"";
  display:block;
  clear:both;
}

#howtoplay ol li .image,
#howtoplay ol li .text{
  display:inline;
  float:left;
}
#howtoplay ol .image{
  width:340px;
}
#howtoplay ol .text{
  width:420px;
}

#howtoplay ol .step1 .text{
  width:640px;
}




/* button */
.btn{
  display:block;
  text-indent:-9999px;
  margin:10px auto;
}

a.link_download{
  width:262px;
  height:82px;
  background-image:url(../img/button/button_download.png);
}
a.link_download:hover{
  background-position:0px -82px;
}

a.link_agree{
  width:262px;
  height:82px;
  background-image:url(../img/button/button_doui.png);
}
a.link_agree:hover{
  background-position:0px -82px;
}

a.link_install{
  width:262px;
  height:98px;
  background-image:url(../img/button/button_inst.png);
}
a.link_install:hover{
  background-position:0px -98px;
}

.link_download_info{
  width:191px;
  height:98px;
  background-image:url(../img/button/button_downloadkochira.png);
}
#title a.link_download_info:hover{
  background-position:0px -98px;
}

a.link_question_info{
  width:191px;
  height:98px;
  background-image:url(../img/button/button_faq.png);
}
a.link_question_info:hover{
  background-position:0px -98px;
}





/* DownloadPage */
#need em{
  font-weight:bold;
  margin:20px;
}
#need em{
  font-weight:bold;
  margin:20px;
}

#download #wrapper{
  background-image:url(../img/background/bg_download.jpg);
  background-position:50% top;
  background-repeat:no-repeat;
}

#btn_download{
  font-size:24px;
  text-align:center;
}

table.spec{
  background-color:#000000;
}
table.spec th,
table.spec td{
  padding:8px;
}
table.spec th{
  width:160px;
  text-align:right;
}
table.spec td{
  width:400px;
}

/* InstallPage */


#install #wrapper{
  background-image:url(../img/background/bg_inst_tiling.jpg);
  background-position:right top;
  background-repeat:repeat-y;
}
#install #wrapper_inner{
  background-image:url(../img/background/bg_inst_top.jpg);
  background-position:right top;
  background-repeat:no-repeat;
}
#install ol{
  margin:0px;
}
#install .step li{
  zoom:1;
  list-style-type:none;
  width:840px;
  padding-top:16px;
  padding-bottom:32px;
  background-image:url(../img/other/mark_triangle.png);
  background-repeat:no-repeat;
}
#install .step li.last{
  background-image:none;
}

#install .step li:after{
  content:"";
  display:block;
  clear:both;
}


#install .step li .image,
#install .step li .text{
  display:inline;
  float:left;
}
#install .step li .image{
  text-align:right;
  width:360px;
}

#install .step li .text{
  width:380px;
  height:200px;
  border-bottom:1px solid #ffffff;
}

#install .step em{
  display:block;
  font-size:24px;
  color:#11dfcd;
}
#install .step strong{
  display:block;
  font-size:18px;
  font-weight:bold;
  margin-bottom:24px;
}

#install .junction{
  clear:both;
  width:890px;
  padding-bottom:180px;
  margin-bottom:20px;
  background-image:url(../img/other/mark_junction.png);
  background-repeat:no-repeat;
  background-position:50% bottom;
}
#install .junction p{
  text-align:center;
  color:#11dfcd;
}
#install .is_dotnet_installed{
  color:#ff9400;
}

#install .branch{
  width:890px;
}

#install .branch .right{
  border-left:1px solid #ff9400;
}

#install .branch .li{
  display:inline;
  float:left;
  width:440px;
}
#install .branch .step{
  padding-left:15px;
  zoom:normal;
}
#install .branch .step:after{
  content:"";
  display:block;
  clear:none;
}
#install .branch .step li .image,
#install .branch .step li .text{
  float:none;
}
#install .branch .arrow{
  background-image:url(../img/other/mark_triangle.png);
  background-repeat:no-repeat;
  background-position:150px bottom;
  margin-bottom:10px;
  padding-bottom:40px;
}
#install .branch .step li{
  width:400px;
}
#install .branch .step li .text{
  width:320px;
  height:80px;
  border-style:none;
}

#setup_arfigure li{
  background-position:200px bottom;
}
#install_dotnet li{
  background-position:200px bottom;
}
#install_directx li{
  background-position:170px bottom;
}


/* QuestionPage */

#question #wrapper{
  background-image:url(../img/background/bg_inst_tiling.jpg);
  background-position:right top;
  background-repeat:repeat-y;
}
#question #wrapper_inner{
  background-image:url(../img/background/bg_inst_top.jpg);
  background-position:right top;
  background-repeat:no-repeat;
}

ul.qa{
  margin:40px;
  width:680px;
}
ul.qa li{
  margin:20px;
}
ul.qa li .q{
  color:#ff9400;
  margin:20px 0px;
  margin-top:40px;
  margin-bottom:20px;

}


ul.qa li .q,
ul.qa li .a{
  position:relative;
  left:0px;
  top:0px;
}
ul.qa li .initial{
  position:absolute;
  left:-20px;
  top:-10px;
  font-size:24px;
}

ul.qa li .q .initial{
  margin-left:-20px;
}

ul.qa li .a{
  color:#ffffff;
  margin:20px 0px;
}
ul.qa li .a .initial{
  color:#dd9999;
  margin-left:-20px;
}

.qa li{
  margin:20px;
}

/* AgreePage */


#agree #wrapper{
  background-position:right top;
  background-repeat:no-repeat;
}

#agree p{
  background-color:#000000;
}

/* RequirementsPage */


#requirements h4{
  font-size:18px;
  text-indent:2em;
  margin-top:24px;
}
