about pg #02 : noruwei no mori

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!--

about pg #02 : noruwei no mori

inspired by norwegian wood // haruki murakami 村上 春樹♡

-->

<head>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<style type="text/css">

body{font-family:monospace;font-size:9px;background:url("");background-color:#fff;}
a{text-decoration:none;color:#202020;}

#naoko{margin:0 auto;margin-top:150px;margin-left:200px;padding:15px;border:1px solid #ddd;background-color:#fff;}

#nav{width:60px;padding:10px;background-color:#ffffff;border:10px solid rgba(0,0,0,.1);position:absolute;margin:300px 30px 30px 30px;text-transform:uppercase;font-size:12px;margin-left:4px;color:#000000;opacity: 0.6;-webkit-transition: opacity 0.3s linear;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }}

.nav{background-color:#ffffff;margin-bottom:1px;letter-spacing:3px;color:#000;}

.nav:hover{background-color:#e4e4e4;-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;}

#img{width:400px;height:450px;background-color:#e5e5e5;
background-image:url("http://static.tumblr.com/palmvjm/mvUmmg6yy/artee.jpg");}

#haruki{overflow:auto;width:300px;height:400px;margin-left:10px;border:1px solid #e5e5e5;background-color: #f8f8f8;}

#talk{font-style:italic;letter-spacing:1px;text-align:left;margin:10px 10px 5px 10px;color:#555;background-color:#ffffff;padding-bottom:3px;
border-bottom:#ffffff 3px dashed;}

#talk b{color:#f8f8f8;}

.mb{margin:10px 20px 10px 20px;width:125px;float:left;}

#po{float:left;width:215px;text-align:justify;padding:5px 0px 5px 5px;color:#222;}

.tit{color:#202020;font-weight:800;margin-bottom:3px;border-left:0px solid;padding-left:7px;letter-spacing:1px;border-bottom:#e4e4e4 3px dashed;}

#iro{color:#202020;}

#bar{position:fixed;top:0px;left:70px;border-left:10px solid #eee;width:500px;height:100%;}

#bar .text {margin-left:-135px;font-size:20px;margin-top:330px;text-align:center;padding:9px;color:#ffffff;display: inline-block;float: left;position:fixed !important;background-color: #000000;-webkit-transform: rotate(-90deg)
}

</style>
</head>

<body>

<div id="bar"><div class="text">
noruwei no mori</div></div>

<table id="naoko" cellspacing="0" cellpadding="0"><tr><td>
<div id="img">
<div id="nav"><div id="aoi">
<center>落下枯れ葉</center><br>
<a href="/"><div class="nav">return</div></a><p>
<a href="/ask"><div class="nav">contact</div></a><p>
<a href="http://r-eiora.tumblr.com"><div class="nav"> creds</div></a></div></div></td><td>

<div id="haruki"><div id="talk">No truth can cure the sadness we feel from losing a loved one. No truth, no sincerity, no strength, no kindness, can cure that sorrow. All we can do is see that sadness through to the end and
learn something from it, but what we learn will be no help in facing the next sadness that comes to us without warning.”  —  Haruki Murakami Norwegian Wood</div>

<div class="mb"><div id="po">
<div class="tit">About</div></a>
<div id="ex">You write what you want about yourself here.</div></div></div>

<div class="mb"><div id="po">
<div class="tit" id="iro">Hobbies</div></a>
<div id="ex">Info here like; reading, writing, drawing, manga, music, sleeping, eating.</div></div>
</div>

<div class="mb"><div id="po">
<div class="tit" id="iro">More</div>
<div id="ex">link here.
link here.
link here.
link here.
</div></div>
</div>

</div>
</td>
</tr>
</table>
</body>
</html>