/******* Resetting default *******/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
/*******table { border-collapse:collapse; border-spacing:0; }*******/
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }

/******* Page-wide setting *******/
body
{
  font-family: Verdana,KozukaGothicPro,MSPGothic;
  color: #333333;
  background-image: url('../images/bg.jpg');
  background-repeat: repeat;
}
div
{
  position: absolute;
  font-size: 12px;
  border: 0px;
}

img,input,textarea,select
{
  position: absolute;
}

input, textarea
{
  resize: none;
}

input
{
  height: 20px;
  border-width: 1px;
  border-color: #000000;
}

a {text-decoration:none; color: #138242;}
a:visited {text-decoration:none; color: #cc0000;}
a:hover {text-decoration:underline; color: #fb8a37;}

p
{
  margin-top:16px;
}

h1
{
  font-size: 14px;
  font-weight: bold;
  margin-top: 18px;
  margin-bottom: 8px;
}

h2
{
  color: #a0351d;
  font-size: 13px;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 8px;
}

ul
{
  list-style-type: square;
  list-style-position: outside;
  margin: 10px 10px 20px 30px;
}
ol
{
  list-style-type: decimal;
  list-style-position: outside;
  margin: 10px 10px 20px 30px;
}

li
{
  margin-bottom: 5px;
}

.fade, .fade_out
{
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
.fade:active
{
  opacity: 0.1;
  filter: alpha(opacity=90);
}

.fade_in
{
  opacity: 0.0;
  -webkit-transition: 0.4s ease-in-out;
  -moz-transition: 0.4s ease-in-out;
  -o-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}
.fade_in:hover
{
  opacity: 1.0;
  filter: alpha(opacity=0);
}
.fade_out:hover
{
  opacity: 0.4;
  filter: alpha(opacity=60);
}



/******* Styles per ID *******/
div#pagewrap
{
  position: relative;
  width: 960px;
  top: 0px;
  left: 5px;
  min-height: 800px;
  border-width: 0px;
  border-color: #000000;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
}

/*** Header ***/

#header
{
  top: 0px;
  left: 0px;
  height: 170px;
  width: 960px;
  background-image: url('../images/header_bg.jpg');
  background-repeat: no-repeat;
  background-position: 0px 30px;
  background-color: #000000;
}
img#header_title
{
  top: 52px;
  right: 20px;
}

/*** Header Navi ***/

div#home
{
  top: 0px;
  right: 10px;
  height: 30px;
  width: 30px;
  background-image: url('../images/button0.gif');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
div#navi1
{
  top: 0px;
  left: 222px;
  height: 30px;
  width: 75px;
  background-image: url('../images/button1.gif');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
div#navi2
{
  top: 0px;
  left: 111px;
  height: 30px;
  width: 110px;
  background-image: url('../images/button2.gif');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
div#navi3
{
  top: 0px;
  left: 10px;
  height: 30px;
  width: 100px;
  background-image: url('../images/button3.gif');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
div#navi4
{
  top: 0px;
  left: 298px;
  height: 30px;
  width: 100px;
  background-image: url('../images/button4.gif');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
#navi1:hover,#navi2:hover,#navi3:hover,#navi4:hover,#home:hover
{
  background-position: 0px -30px;
}

/*** Footer ***/

#footer
{
  bottom: 10px;
  right: 85px;
  height: 20px;
  font-size: 10px;
  color: #aa8654;
}

#fb_link
{
  bottom: 5px;
  right: -65px;
  width: 25px;
  height: 25px;
  background-image: url('../images/fb_link.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
#ig_link
{
  bottom: 5px;
  right: -35px;
  width: 25px;
  height: 25px;
  background-image: url('../images/ig_link.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
#fb_link:hover,#ig_link:hover
{
  background-position: 0px -25px;
}

/*** Main Content ***/

#main_content
{
  top: 240px;
  left: 80px;
  color: #555555;
}

/*** Index Content ***/

#index_wall
{
  top: 0px;
  left: 20px;
  width: 320px;
  height: 500px;
  background-image: url('../images/kero2.jpg');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

#index_top_copy
{
  top: 150px;
  left: 380px;
  width: 425px;
  height: 60px;
  background-image: url('../images/toppage_copy.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
#index_text
{
  top: 250px;
  left: 450px;
  width: 350px;
  height: 300px;
  line-height: 18px;
}
#index_signature
{
  top: 410px;
  left: 620px;
  width: 120px;
  height: 50px;
  background-image: url('../images/keiko_sign.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}


/*** Portfolio Content ***/

#portfolio_blocks
{
  top: 0px;
  width: 638px;
  height: 472px;
  background-image: url('../images/blocks.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
#portfolio_blocks_l
{
  top: 0px;
  width: 795px;
  height: 472px;
  background-image: url('../images/blocks_l.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
#block1
{
  top: 10px;
  left: 10px;
  width: 147px;
  height: 144px;
}
#block0
{
  top: 10px;
  left: 167px;
  width: 147px;
  height: 144px;
}
#block2
{
  top: 10px;
  left: 324px;
  width: 147px;
  height: 144px;
}
#block3
{
  top: 10px;
  left: 481px;
  width: 147px;
  height: 144px;
}
#block4
{
  top: 164px;
  left: 10px;
  width: 147px;
  height: 144px;
}
#block5
{
  top: 164px;
  left: 167px;
  width: 147px;
  height: 144px;
}
#block6
{
  top: 164px;
  left: 324px;
  width: 147px;
  height: 144px;
}
#block7
{
  top: 164px;
  left: 481px;
  width: 147px;
  height: 144px;
}
#block8
{
  top: 318px;
  left: 10px;
  width: 147px;
  height: 144px;
}
#block9
{
  top: 318px;
  left: 167px;
  width: 147px;
  height: 144px;
}
#block10
{
  top: 318px;
  left: 324px;
  width: 147px;
  height: 144px;
}
#block11
{
  top: 318px;
  left: 481px;
  width: 147px;
  height: 144px;
}
#block12
{
  top: 10px;
  left: 638px;
  width: 147px;
  height: 144px;
}
#block13
{
  top: 164px;
  left: 638px;
  width: 147px;
  height: 144px;
}
#block14
{
  top: 318px;
  left: 638px;
  width: 147px;
  height: 144px;
}

#block1:hover,#block2:hover,#block3:hover,#block4:hover,#block5:hover,#block6:hover,#block7:hover,#block8:hover,#block9:hover,#block10:hover,#block11:hover,#block12:hover,#block13:hover,#block14:hover
{
  background-image: url('../images/cover.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

/*** Portfolio Example Pages ***/

.block_selected
{
  top: 0px;
  left: 700px;
  width: 100px;
  height: 100px;
}
.work_category, #spec_category
{
  top: 0px;
  left: 590px;
  width: 100px;
  height: 100px;
  background-image: url('../images/service_category.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

.x, .e, .i, .f, .w, .t, .p, .g, .c
{
  width: 32px;
  height: 32px;
  background-color: #fff;
}
.w
{
  top: 5px;
  left: 5px;
}
.i
{
  top: 5px;
  left: 37px;
}

.e
{
  top: 5px;
  left: 69px;
}

.f
{
  top: 37px;
  left: 5px;
}

.x
{
  top: 37px;
  left: 37px;
}

.t
{
  top: 37px;
  left: 69px;
}

.p
{
  top: 69px;
  left: 5px;
}

.g
{
  top: 69px;
  left: 37px;
}

.c
{
  top: 69px;
  left: 69px;
}


.work_description
{
  width: 570px;
  line-height: 18px;
}
.work_in_charge
{
  top: 110px;
  left: 590px;
  width: 190px;
  padding: 10px;
  line-height: 18px;
  background-color: #edebdd;
}
.work_image
{
  top:90px;
  width: 560px;
  height: 400px;
  background-repeat: no-repeat;
  background-position: 0px 0px;
  font-size: 11px;
  font-weight: bold;
  line-height: 24px;
  color: #8a6b36;
}

#ex01
{
  background-image: url('../images/work_ex01.jpg');
}
#ex01 p
{
  padding-top: 35px;
  padding-left: 335px;
}
#ex02
{
  background-image: url('../images/work_ex02.jpg');
}
#ex02 p
{
  padding-top: 310px;
  padding-left: 10px;
}
#ex03
{
  background-image: url('../images/work_ex03.jpg');
}
#ex03 p
{
  padding-top: 280px;
  padding-left: 10px;
}
#ex04
{
  background-image: url('../images/work_ex04.jpg');
  background-position: 0px 3px;
}
#ex04 p
{
  padding-top: 320px;
  padding-left: 320px;
}
#ex05
{
  background-image: url('../images/work_ex05.jpg');
  top: 80px;
}
#ex05 p
{
  padding-top: 320px;
  padding-left: 400px;
  text-align: right;
}
#ex06
{
  background-image: url('../images/work_ex06.jpg');
}
#ex06 p
{
  padding-top: 10px;
  padding-left: 350px;
}
#ex07
{
  background-image: url('../images/work_ex07.jpg');
  top: 85px;
}
#ex07 p
{
  padding-top: 355px;
  padding-left: 375px;
}
#ex08
{
  background-image: url('../images/work_ex08.jpg');
  top: 80px;
}
#ex08 p
{
  padding-top: 300px;
  padding-left: 20px;
}
#ex09
{
  background-image: url('../images/work_ex09.jpg');
}
#ex09 p
{
  padding-top: 300px;
  padding-left: 50px;
}
#ex10
{
  background-image: url('../images/work_ex10.jpg');
}
#ex10 p
{
  padding-top: 260px;
  padding-left: 90px;
}
#ex11
{
  background-image: url('../images/work_ex11.jpg');
}
#ex11 p
{
  padding-top: 335px;
  padding-left: 10px;
}
#ex12
{
  background-image: url('../images/work_ex12.jpg');
}
#ex12 p
{
  padding-top: 310px;
  padding-left: 40px;
}
#ex13
{
  background-image: url('../images/work_ex13.jpg');
}
#ex13 p
{
  padding-top: 280px;
  padding-left: 40px;
}
#ex14
{
  background-image: url('../images/work_ex14.jpg');
}
#ex14 p
{
  padding-top: 00px;
  padding-left: 420px;
}
#ex15
{
  background-image: url('../images/work_ex15.jpg');
}
#ex15 p
{
  margin-left: 300px;
  margin-top: -5px;
}
#ex16
{
  background-image: url('../images/work_ex16.jpg');
}
#ex16 p
{
  margin-left: 250px;
  margin-top: 380px;
}
#ex17
{
  background-image: url('../images/work_ex17.jpg');
}
#ex17 p
{
  margin-left: 260px;
  margin-top: 3px;
  line-height: 18px;
}

.arrow_l
{
  top: 480px;
  left:0px;
  width: 30px;
  height: 30px;
  background-image: url('../images/arrow_l.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
.arrow_r
{
  top: 480px;
  left:770px;
  width: 30px;
  height: 30px;
  background-image: url('../images/arrow_r.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
.arrow_l:visited, .arrow_r:visited
{
  background-position: 0px -60px;
}
.arrow_l:hover, .arrow_r:hover
{
  background-position: 0px -30px;
}

/*** About Content ***/

#about_wall
{
  top: 0px;
  width: 380px;
  height: 500px;
  background-image: url('../images/kei_jiro.jpg');
  background-repeat: no-repeat;
  background-position: 460px 0px;
  padding-right: 440px;
  line-height: 18px;
}
#about_signature
{
  top: 420px;
  left: 250px;
  width: 120px;
  height: 50px;
  background-image: url('../images/keiko_sign.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

/*** Contact Content ***/

#contact_wall
{
  top: 0px;
  width: 820px;
  height: 500px;
  background-image: url('../images/river.jpg');
  background-repeat: no-repeat;
  background-position: 220px 50px;
}
#contact_form
{
  top: 40px;
  width: 400px;
  height: 400px;
  line-height: 30px;
}
#contact_form input
{
  position: relative;
  top: 2px;
  left: 15px;
  width: 200px;
  height: 25px;
  border: 1px solid #666666;
}
#contact_form input.button
{
  width: 100px;
  height: 30px;
  line-height: 28px;
  left: 40px;
  margin-right: 20px;
}
#contact_form input.button:hover
{
  color: #ffffff;
  border: 1px solid #ff6600;
  background-color: #ff6600;
}
#contact_form textarea
{
  position: relative;
  top: 2px;
  left: 0px;
  width: 320px;
  height: 100px;
  border: 1px solid #666666;
}
#security_question
{
  top: 278px;
  left: 150px;
  width: 120px;
  height: 30px;
  background-image: url('../images/security_question.gif');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

/*** Mailform.php Content ***/
table#contact_confirm
{
  width: 360px;
  background-color: #cccccc;
  border-collapse:separate;
  border-spacing:1px;
  border:0px;
}
table#contact_confirm td
{
  padding: 5px 10px;
  font-size: 12px;
  line-height: 16px;
}


/*** Experience Content ***/

#experience_pic
{
  top: 280px;
  left: 450px;
  width: 360px;
  height: 200px;
  background-image: url('../images/kero_biz.jpg');
  background-repeat: no-repeat;
  background-position: -30px -40px;
}
#experience_block1
{
  top: 0px;
  width: 360px;
  height: 350px;
}
#experience_block2
{
  top: 290px;
  left: 0px;
  width: 360px;
  height: 200px;
}
#experience_block3
{
  top: 0px;
  left: 450px;
  width: 360px;
  height: 280px;
}
#spec_category
{
  left: 700px;
}

/*** Specs Test ***/

table#skills_marks
{
  top: 30px;
  left: 450px;
  border-collapse:collapse;
  border-spacing:0;
}
#skills_marks td
{
  width: 280px;
  padding-left: 5px;
  line-height: 20px;
}
th.mark_c, th.mark_g, th.mark_p, th.mark_t, th.mark_w, th.mark_f, th.mark_i, th.mark_e, th.mark_x
{
  width: 20px;
  height: 20px;
  background-image: url('../images/service_category.png');
  background-repeat: no-repeat;
  border: 2px solid #ffffff;
}
th.mark_c
{
  background-position: -75px -75px;
}
th.mark_g
{
  background-position: -43px -76px;
}
th.mark_p
{
  background-position: -10px -76px;
}
th.mark_t
{
  background-position: -74px -41px;
}
th.mark_w
{
  background-position: -11px -11px;
}
th.mark_f
{
  background-position: -10px -41px;
}
th.mark_i
{
  background-position: -43px -10px;
}
th.mark_e
{
  background-position: -74px -11px;
}
th.mark_x
{
  background-position: -42px -43px;
}