/*#########################
  ViZiMO style sheet
      for registration page
#########################*/

@import './default.css';

body
{
  width: 900px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 12pt;
  background-color: #d9d9d9;
}
h2,
h3
{
  font-size: 100%;
  font-weight: bold;
}
h2
{
  font-size: 110%;
  padding: 15px 0;
  color: #309ce1;
}

/* layout */
div#container
{
  width: 900px;
  background: url("../img5/bg_container.gif") repeat-y;
  /* 
  background-color: #d9d9d9;
	  */
}

div#header
{
  height: 81px;
  width: 900px;
  background: url("../img5/bg_header.gif") no-repeat;
}

div#main
{
  float: right;
  min-height: 648px;
  width: 681px;
  background-color: #ecf4f9;
}

div#side
{
  float: left;
  min-height: 648px;
  width: 219px;
  color: #309ce1;
  background-color: #d9d9d9;
}
div#footer
{
  clear: both;
  height: 40px;
  width: 900px;
  background-color: #309ce1;
}
/* 
 */

.content
{
  padding-left: 30px;
}

.unvisible
{
  display: none;
}

.paragraph
{
  padding-top: 10px;
  padding-bottom: 20px;
  padding-right: 10px;
  font-size: 90%;
}

.float_right
{
  float: right;
}
.float_left
{
  float: left;
}
.float_clear
{
  clear: both;
}

input,
select
{
  background-color: #fff;
  font-size: 100%;
}

form div
{
  margin-top: 20px;
  margin-bottom: 20px;
}
form p,
form h3
{
  color: #fff;
}
.publish
{
  font-size: 80%;
}

#handle p,
#chara p,
#mail p,
#gender p,
#birthday p,
#area p,
#confirm h3,
#term h3
{
  position: relative;
  top: 13px;
  left: 15px;
}
#handle input,
#mail input,
#password input,
#birthday #year,
#birthday #month,
#birthday #day,
#birthday .publish,
#area select
{
  position: absolute;
  top: 2px;
}
#handle input,
#mail input,
#password input
{
  position: absolute;
  left: 130px;
}

#button
{
}
#button #back,
#button #next,
#button #next-only
{
  position: relative;
  top: 10px;
  height: 57px;
  width: 178px;
}
#button #back
{
  left: 250px;
}
#button #next
{
  left: 255px;
}
#button #next-only
{
  left: 435px;
}

#handle
{
  height: 66px;
  background: url("../img5/bg_form_text2.gif") no-repeat;
}
#handle p
{
  font-weight: bold;
}
#handle p#caution
{
  position: relative;
  top: 27px;
  left: 490px;
  font-size: 70%;
}
#chara
{
  height: 446px;
  background: url("../img5/bg_chara_form.gif") no-repeat;
}
#chara table
{
  position: relative;
  top: 8px;
  left: 135px;
  height: 219px;
  width: 472px;
}
#chara p
{
  font-weight: bold;
}
#chara td
{
  height: 193px;
  width: 142px;
  background: url("../img5/bg_chara_back_reg.gif") no-repeat;
}
#chara td img
{
  margin-top: 3px;
  margin-left: 20px;
}
#mail
{
  height: 61px;
  background: url("../img5/bg_form_text.gif") no-repeat;
}

#password
{
  height: 116px;
  background: url("../img5/bg_password_form.gif") no-repeat;
}
#password1
 {
  position: relative;
  top: 21px;
  left: 13px;
}
#password2
{
  position: relative;
  top: 46px;
  left: 13px;
}
#password p#caution
{
  position: relative;
  top: 56px;
  left: 250px;
  font-size: 70%;
}

#gender
{
  height: 61px;
  background: url("../img5/bg_form_text_short.gif") no-repeat;
}
#gender p span,
#birthday p span
{
  padding-left: 5px;
  color: #444444;
}
#gender input#male
{
  margin-left: 100px;
}
#gender input#female
{
  margin-left: 20px;
}

#birthday
{
  height: 61px;
  background: url("../img5/bg_form_text.gif") no-repeat;
}
#birthday #birth_year
{
  margin-left: 60px
}
#birthday #birth_month,
#birthday #birth_day
{
  margin-left: 10px
}
#birthday .publish
{
  position: absolute;
  left: 415px;
}

#area
{
  height: 61px;
  background: url("../img5/bg_form_text_short.gif") no-repeat;
}

#area select#prefecture
{
  margin-left: 100px
}
#area select.publish
{
  position: absolute;
  left: 275px;
}
#receivemail
{
  color: #606060;
}
#receivemail input
{
  margin-right: 10px;
}

#confirm
{
  height: 230px;
  background: url("../img5/bg_cofirm.gif") no-repeat;
}
#confirm table
{
  position: relative;
  top: -5px;
  left: 140px;
}
#confirm td,
#confirm th
{
  font-size: 80%;
}
#confirm th
{
  padding-right: 10px;
  color: #606060;
  text-align: left;
}

#term
{
  height: 251px;
  background: url("../img5/bg_term.gif") no-repeat;
}
#term h3
{
  font-size: 80%;
}
#term .tos
{
  position: relative;
  top: -45px;
  left: 150px;
  font-size: 80%;
  height: 170px;
  width: 450px;
  color: #000;
  overflow: auto;
}
#term .tos p,
#term .tos h3
{
  color: #000;
}
#term .tos h4
{
  font-size: 120%;
  padding: 5px;
}
#term p#agree
{
  position: relative;
  top: -35px;
  left: 140px;
  font-size: 80%;
}

div.box
{
  background: url("../img5/bg_frame0-mid_r.gif") repeat-y;
  margin-bottom: 20px;
  color: #4b4a4a;
}
div.box h3
{
  margin-top: 20px;
  padding-top: 20px;
  padding-left: 20px;
  background: url("../img5/bg_frame0-top_r.gif") no-repeat;
  color: #309ce1;
}
div.box p
{
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 60px;
}
div.box img#desc0
{
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 120px;
}
div.box img#desc1,
div.box img#desc2
{
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 35px;
}
div.box img#desc10
{
  margin-right: 5px;
}
div.box p#desc11
{
  position: relative;
  top: 50px;
}
div.box div.bottom
{
  position: relative;
  top: 10px;
  left: -6px;
  height: 16px;
  width: 607px;
  background: url("../img5/bg_frame0-bot_r.gif") no-repeat bottom;
}
img.install,
img.download
{
  position: relative;
  left: 220px;
  /* 
  margin-left: 220px;
	  */
}
div.box table
{
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 40px;
  font-size: 90%;
}
div.box th
{
  text-align: left;
}
div.box td
{
  text-indent: 10px;
}

div#side img.location
{
  margin-top: 3px;
  margin-bottom: 2px;
  margin-left: 17px;
  margin-right: 16px;
}
div#side div
{
  margin-top: 18px;
}
div#side img.arrow
{
  margin-left: 98px;
  margin-right: 98px;
  /* 
  border: solid 3px red; */
}
div#side img#complete
{
  margin-left: 55px;
  margin-right: 50px;
  margin-bottom: 20px;
}