body{ margin:0; padding:0; line-height:180%; font-size:90%;}
h1,h2,h3,h4,p{ margin:0; padding:0; font-size:100%;}
img{ border:0; display:block;}
a{ display:block; border:0; margin:0; padding:0; color:#0000FF; text-decoration:none;}
a:hover { text-decoration:underline;}
ul,li{ list-style:none; padding:0; margin:0;}
.clear{ clear:both;}

/**
strong{ font-weight:bold;}
hr{ display:block;}
.red{ color:#FF0000;}
.blue{ color:#0000FF;}
.none{ display:none;}
.border3{ _height:5px; border:3px solid #000000; margin-bottom:10px;}
.danraku{ margin-top:10px;}
.line{ border-bottom:3px double #ff0000;}
.line_blue{ border-bottom:3px double #0000ff;}
.singline{ border-bottom:1px solid #ff0000;}
.singl_blue{ border-bottom:1px solid #0000ff;}
**/


/* layout setting
****************************************/
#layout{ width:800px; margin:0 auto 20px;}

#logo{position:absolute; top:160px;
	  margin-left:35px;
	  width:180px; height:150px;
	  text-indent:-9999px;
	  font-size:0;
	  background: url(../img/all_page/logo.gif) no-repeat;} 

/* body contents
****************************************/
#contents{ padding:60px 0 0 250px; width:550px; margin-bottom:15px;}

#link li{ padding:10px;}

/* footer
****************************************/
#footer{ width:760px;
		 height:60px;
		 padding:10px 10px 10px 25px;
		 background-color: #4c4d52;}

#footer li{float:left; margin-right:15px;}

#footer a{ height:60px;
           width:60px;
		   text-indent:-9999px;
		   font-size:0;   
		   }

/* illust thumbnail */		   
#illust a{background: url(../img/illust/ill_small.jpg) no-repeat;}		   

#illust a.i1{ background-position:0 0;}
#illust a:hover.i1 {background-position:0 -60px;}

#illust a.i2{ background-position:-60px 0;}
#illust a:hover.i2 {background-position:-60px -60px;}

#illust a.i3{ background-position:-120px 0;}
#illust a:hover.i3 {background-position:-120px -60px;}

#illust a.i4{ background-position:-180px 0;}
#illust a:hover.i4 {background-position:-180px -60px;}

#illust a.i5{ background-position:-240px 0;}
#illust a:hover.i5 {background-position:-240px -60px;}

#illust a.i6{ background-position:-300px 0;}
#illust a:hover.i6 {background-position:-300px -60px;}

#illust a.i7{ background-position:-360px 0;}
#illust a:hover.i7 {background-position:-360px -60px;}

#illust a.i8{ background-position:-420px 0;}
#illust a:hover.i8 {background-position:-420px -60px;}

#illust a.i9{ background-position:-480px 0;}
#illust a:hover.i9 {background-position:-480px -60px;}

#illust a.i10{ background-position:-540px 0;}
#illust a:hover.i10 {background-position:-540px -60px;}

#illust a.i11{ background-position:-600px 0;}
#illust a:hover.i11 {background-position:-600px -60px;}

#illust a.i12{ background-position:-660px 0;}
#illust a:hover.i12 {background-position:-660px -60px;}

#illust a.i13{ background-position:-720px 0;}
#illust a:hover.i13 {background-position:-720px -60px;}

#illust a.i14{ background-position:-780px 0;}
#illust a:hover.i14 {background-position:-780px -60px;}

#illust a.i15{ background-position:-840px 0;}
#illust a:hover.i15 {background-position:-840px -60px;}

#illust a.i16{ background-position:-900px 0;}
#illust a:hover.i16 {background-position:-900px -60px;}

#illust a.i17{ background-position:-960px 0;}
#illust a:hover.i17 {background-position:-960px -60px;}



#illust a.i18{ background-position:-1020px 0;}
#illust a:hover.i18 {background-position:-1020px -60px;}

#illust a.i19{ background-position:-1080px 0;}
#illust a:hover.i19 {background-position:-1080px -60px;}

#illust a.i20{ background-position:-1140px 0;}
#illust a:hover.i20 {background-position:-1140px -60px;}

#illust a.i21{ background-position:-1200px 0;}
#illust a:hover.i21 {background-position:-1200px -60px;}

#illust a.i22{ background-position:-1260px 0;}
#illust a:hover.i22 {background-position:-1260px -60px;}

#illust a.i23{ background-position:-1320px 0;}
#illust a:hover.i23 {background-position:-1320px -60px;}

#illust a.i24{ background-position:-1380px 0;}
#illust a:hover.i24 {background-position:-1380px -60px;}

#illust a.i25{ background-position:-1440px 0;}
#illust a:hover.i25 {background-position:-1440px -60px;}

#illust a.i26{ background-position:-1500px 0;}
#illust a:hover.i26 {background-position:-1500px -60px;}

#illust a.i27{ background-position:-1560px 0;}
#illust a:hover.i27 {background-position:-1560px -60px;}

#illust a.i28{ background-position:-1620px 0;}
#illust a:hover.i28 {background-position:-1620px -60px;}

#illust a.i29{ background-position:-1680px 0;}
#illust a:hover.i29 {background-position:-1680px -60px;}

#illust a.i30{ background-position:-1740px 0;}
#illust a:hover.i30 {background-position:-1740px -60px;}

#illust a.i30{ background-position:-1800px 0;}
#illust a:hover.i30 {background-position:-1800px -60px;}

#illust a.i31{ background-position:-1860px 0;}
#illust a:hover.i31 {background-position:-1860px -60px;}

#illust a.i32{ background-position:-1920px 0;}
#illust a:hover.i32 {background-position:-1920px -60px;}

#illust a.i33{ background-position:-1980px 0;}
#illust a:hover.i33 {background-position:-1980px -60px;}

#illust a.i34{ background-position:-2040px 0;}
#illust a:hover.i34 {background-position:-2040px -60px;}

#illust a.i35{ background-position:-2100px 0;}
#illust a:hover.i35 {background-position:-2100px -60px;}

#illust a.i36{ background-position:-2160px 0;}
#illust a:hover.i36 {background-position:-2160px -60px;}

#illust a.i37{ background-position:-2220px 0;}
#illust a:hover.i37 {background-position:-2220x -60px;}

#illust a.i38{ background-position:-2280px 0;}
#illust a:hover.i38 {background-position:-2280px -60px;}

#illust a.i39{ background-position:-2340px 0;}
#illust a:hover.i39 {background-position:-2340px -60px;}

#illust a.i40{ background-position:-2400px 0;}
#illust a:hover.i40 {background-position:-2400px -60px;}




/* personal thumbnail */
#personal a{background: url(../img/personal/PER_small.jpg) no-repeat;}		   

#personal a.i1{ background-position:0 0;}
#personal a:hover.i1 {background-position:0 -60px;}

#personal a.i2{ background-position:-60px 0;}
#personal a:hover.i2 {background-position:-60px -60px;}


#personal a.i3{ background-position:-120px 0;}
#personal a:hover.i3 {background-position:-120px -60px;}

#personal a.i4{ background-position:-180px 0;}
#personal a:hover.i4 {background-position:-180px -60px;}

#personal a.i5{ background-position:-240px 0;}
#personal a:hover.i5 {background-position:-240px -60px;}

#personal a.i6{ background-position:-300px 0;}
#personal a:hover.i6 {background-position:-300px -60px;}

#personal a.i7{ background-position:-360px 0;}
#personal a:hover.i7 {background-position:-360px -60px;}

#personal a.i8{ background-position:-420px 0;}
#personal a:hover.i8 {background-position:-420px -60px;}

#personal a.i9{ background-position:-480px 0;}
#personal a:hover.i9 {background-position:-480px -60px;}

#personal a.i9{ background-position:-5400px 0;}
#personal a:hover.i9 {background-position:-540px -60px;}





/* sketch thumbnail */
#sketch a{background: url(../img/sketch/ske_small.jpg) no-repeat;}		   

#sketch a.i1{ background-position:0 0;}
#sketch a:hover.i1 {background-position:0 -60px;}

#sketch a.i2{ background-position:-60px 0;}
#sketch a:hover.i2 {background-position:-60px -60px;}

#sketch a.i3{ background-position:-120px 0;}
#sketch a:hover.i3 {background-position:-120px -60px;}

#sketch a.i4{ background-position:-180px 0;}
#sketch a:hover.i4 {background-position:-180px -60px;}

#sketch a.i5{ background-position:-240px 0;}
#sketch a:hover.i5 {background-position:-240px -60px;}


/* about me
****************************************/
#aboutme
{
	margin-top:50px;
	width:800px;
	height:550px;
	text-indent:-9999px;
	font-size:0;
	background: url(../img/other/aboutme.jpg) no-repeat;
}
/* blog */
#blogen { position:absolute;
          top:400px;
		  margin-left:440px;}
#blogen a{
          text-indent:-9999px;
		  height:102px;
		  width:102px;
		  font-size:0;
		  background: url(../img/other/blogen.gif) no-repeat;}

#blogjp { position:absolute;
          top:380px;
		  margin-left:560px;}
#blogjp a{
          text-indent:-9999px;
		  height:77px;
		  width:116px;
		  font-size:0;
		  background: url(../img/other/blogjp.gif) no-repeat;}


/* contact
****************************************/
#contact
{	width:800px;
	height:600px;
	text-indent:-9999px;
	font-size:0;
	background: url(../img/other/contact.jpg) no-repeat;
}
/* mail */
#mail { position:absolute;
        top:350px;
	margin-left:50px;	
		 }
#mail a{
          text-indent:-9999px;
		  height:40px;
		  width:250px;
		  font-size:0;
		  background: url(../img/other/mail.gif) no-repeat;}
#mail a:hover {background-position:0 -40px;} 



/* navigation bar
****************************************/
#navibar {position:absolute;
		  top:0;
		  padding-left:90px;
		  width:710px;
		  background: url(../img/all_page/navibar_1pxbg.gif) repeat-x;}

#navibar li{float:left;}

#navibar a{float:left;
		  height:45px;
		  text-indent:-9999px;
		  font-size:0;
		  background: url(../img/all_page/navi.jpg) no-repeat;}
		 
#navibar a.ab{ background-position:-15px 0; width:125px;}
#navibar a.cd{ background-position:-15px -47px; width:130px;}
#navibar a.ef{ background-position:-15px -93px; width:110px;}
#navibar a.gh{ background-position:-15px -138px; width:90px;}
#navibar a.ij{ background-position:-15px -183px; width:85px;}
#navibar a.kl{ background-position:-15px -230px; width:80px;}

/* rollover css if you want
#navibar a:hover.ab {background-position:0 -130px;} */