@charset "utf-8";

*{
font-family: "Georgia",sans-serif;
}

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;
}
body{
font-size: 75%;/*12px*/
/* ++ */
/*font-size: 79.5%;*//*10.1px*/
/*font-size: 110%;*//*13.2px*/
/*font-size: 120%;*//*14.3px*/
/*font-size: 150%;*//*18px*/
color: #413f2d;
line-height: 1.5;
letter-spacing:1px;
text-align: center;
background: url("/common/img/c_bg_btm.jpg") no-repeat center bottom #efeee3;
}
html > body{
height: auto;
}
a{ color: #259fb3; text-decoration: none;}
a:visited{ color: #3f599b; }
a:hover{ text-decoration: underline; color: #e6bd00;}
h1, h2, h3, h4, h5, h6{font-size: 100%;}
ul,li,dl,dt,dd{ list-style: none;}
img{ border: 0; vertical-align: bottom;}
a img{ border: 0; overflow: hidden;}
p{ margin: 0 0 1.4em 0;line-height: 1.5;}
table{border:0; border-collapse:collapse; border-spacing: 0;}
hr{height: 1px; border:0; border-bottom: 1px; color: #d5d4cc; background: #d5d4cc;}
textarea{
font-size: 100%;
}
.clfx{
zoom:1;/*for IE 5.5-7*/
min-height: 1px;
}
.clfx:after{/*for modern browser*/
content:".";
display: block;
clear:both;
height: 1px;
margin-top: -1px;
visibility:hidden;
}
.clr{clear: both;}
.alignleft{text-align: left;}
.alignright{text-align: right;}
.aligncenter{text-align: center;}
.fleft{float:left;}
.fright{float:right;}

/* for all-pages */
#container{
text-align: center;
background: url("/common/img/c_bg_top.jpg") no-repeat center top;
}
body #container{
height: auto;
}
#head{
text-align: left;
margin: 0 auto;
width: 960px;
height: 130px;
overflow: hidden;
position: relative;
}
#menu{
position: absolute;
top: 0;
left: 0;
}
#m_blog{
position: absolute;
top: 0;
left: 520px;
}
#m_works{
position: absolute;
top: 0;
left: 655px;
}
#m_downloads{
position: absolute;
top: 0;
left: 745px;
}

#body{
width: 920px;
margin: 0 auto 80px;
}

#foot{
position: relative;
width: 700px;
height: 285px;
margin: 0 auto;
}
#foot dl dt{
text-align: left;
line-height: 15px;
}
#foot dl dd{
text-align: left;
}
#f_author{
position: absolute;
top: 85px;
left: 20px;
}
#f_whats{
position: absolute;
top: 136px;
left: 20px;
}
#f_contact{
position: absolute;
top: 136px;
left: 200px;
}
#f_feed{
position: absolute;
top: 136px;
left: 415px;
}
#f_feed dd{
padding: 2px 0 0 4px;
}
#f_feed dd img{
vertical-align: top;
margin-right: 3px;
}
#nakanohito{
position: absolute;
top: 230px;
left: 630px;
}
#copyright{
position: absolute;
top: 240px;
left: 150px;
}


/* for index */
#index{
}
#index #areaA{
float:left;
text-align: left;
width: 500px;
}
#index #areaB{
float:right;
text-align: left;
width: 400px;
}
#index #areaB ul li{
padding: 10px 0;
background: url("/common/img/index_blogentries_bg.gif") no-repeat bottom left;
}
#index #areaB ul li a{
padding: 1px 0 1px 30px;
background: url("/common/img/c_icon_arrow01.gif") no-repeat 0 50% ;
}
#index #areaB ul li a:hover{
}
#index #areaB dl dd{
padding: 0 13px 13px;
background: url("/common/img/index_blogentries_bg.gif") no-repeat bottom left;
}
#index #areaB p#contact{
padding: 13px 0;
background: url("/common/img/index_blogentries_bg.gif") no-repeat bottom left;
}
#index #areaB p#contact a:hover{
background: none;
}
#index #areaC{
clear: both;
text-align: left;
}

/* for blog */
.blog{
}
.blog #areaA{
float:left;
width: 590px;
margin-right: 40px;
position: relative;
text-align: left;
}
.blog #areaA #entries{
margin: 0 15px;
}
.blog #areaA #entries .entry{
padding: 0 15px 20px;
border-bottom:3px double #d5d4cc;
margin-bottom: 20px;
}
.blog #areaA h4{
font-size: 135%;
margin-bottom: 3px;
padding-left: 10px;
border-left: 3px solid #d5d4cc;
color: #c58e53;
}
.blog #areaA .box{
border: 1px solid #ddd;
background: #fff;
padding: 5px;
}
.blog #areaA .box img{
vertical-align: middle;
}

.blog #areaA p{
font-size: 110%;
}
.blog #areaA p img{
border: 1px solid #ddd;
background: #fff;
padding: 3px;
}



.blog #areaA h2{
margin: 0 0 25px 10px;
}
.blog #areaA #archive_title{
font-size: 150%;
font-weight: normal;
margin-left: 30px;
}
.blog #areaA .pagenavi{
clear: both;
font-size: 150%;
text-align: center;
padding-bottom: 10px;
border-bottom:3px double #d5d4cc;
margin: 0 15px 10px;
}
.blog #areaA .pagenavi li{
display: inline;
}
.blog #areaA span.date{
display: block;
font-size: 79.5%;
font-family: Verdana;
line-height:1;
color: #b0ae9e;
padding-top: 20px;
margin-left: -15px;
}
.blog #areaA h3{
font-size: 250%;
line-height: 1.2;
color: #259fb3;
font-weight: normal;
margin-left: -15px;
margin-bottom:20px;
padding: 0;
text-decoration: underline;
}
.widget {
margin: 0 0 15px -15px;
line-height: 10px;
height: 30px;
vertical-align: top;
}
.widget img{
vertical-align: middle;
}
.widget div{
display:inline;
float: left;
}
.widget div.hateb{
margin: 3px 5px 0 0;
}
.widget div.topsy_widget_data a{
font-weight: normal;
font-family:Arial, Helvetica, sans-serif;
}



.blog #areaA blockquote{
padding: 10px;
background: #fff;
border:1px solid #ccc;
margin-bottom: 1em;
}
.blog #areaA #RelatedEntries,
.blog #areaA #comments,
.blog #areaA #trackbacks{
border:3px double #d5d4cc;
padding: 15px;
margin-top: 15px;
width: 410px;
}
.blog #areaA #RelatedEntries .RelatedEntries-header{
font-size: 135%;
display: block;
margin-bottom: 7px;
color: #c58e53;
}
.blog #areaA #trackbacks .trackbacks-header{
font-size: 135%;
display: block;
margin-bottom: 7px;
color: #c58e53;
}
#trackbacks-link{
display: block;
border: 1px solid #d5d4cc;
padding: 3px 5px;
background: #fff;
}
.blog #areaA #trackbacks .trackback{
padding: 0 10px;
}
.trackback-content{
font-size:79.5%;
}

.blog #areaA #comments .comments-header{
font-size: 135%;
display: block;
margin-bottom: 7px;
color: #c58e53;
}
#comments abbr{
 border: none;
 font-size:79.5%;
}
.blog #areaA #comments .comment{
padding: 0 10px;
}
.comment-content{
font-size:79.5%;
}

.blog #areaA #comments .comments-open-header{
font-size: 135%;
display: block;
margin-bottom: 7px;
color: #c58e53;
}
.comments-open-content{
padding: 0 10px;
}
.blog #areaA #comments #comments-open-data{
float:left;
width: 150px;
}
#comment-form-name,
#comment-form-email,
#comment-form-url,
#comment-form-remember-me{
margin-bottom: 3px;
}
#comment-form-remember-me{
padding-top: 5px;
}
#comment-form-name input,
#comment-form-email input,
#comment-form-url input{
width: 140px;
}
#comment-form-name label,
#comment-form-email label,
#comment-form-url label,
#comment-form-remember-me label{
display: block;
}
.blog #areaA #comments #comments-open-text{
float: right;
width: 230px;
}
.blog #areaA #comments #comments-open-text textarea{
width: 230px;
height: 100px;
}
.blog #areaA #comments #comments-open-text label{
display: block;
}
.blog #areaA #comments #comments-open-footer{
clear: both;
padding-top: 10px;
text-align: center;
}

.blog #areaA #disqus_thread{
margin: 0 20px;
}
.blog #areaA #disqus_thread h3{
font-size:25px;
margin-bottom: 5px;
}


.blog #areaB{
float:left;
padding-top: 10px;
width: 260px;
text-align: left;
}
.blog #areaB ul{
margin-bottom: 20px;
}

.blog #areaB ul.listA li{
padding: 6px 0;
background: url("/common/img/blog_link_bg.gif") no-repeat bottom left;
}
.blog #areaB ul.listA li a{
padding: 1px 0 1px 30px;
margin-right: 0;
background: url("/common/img/c_icon_arrow02.gif") no-repeat 0 50% ;
}
.blog #areaB ul.listA li a:hover{
}

.blog #areaB ul.listB li{
padding: 6px 0;
background: url("/common/img/blog_link_bg.gif") no-repeat bottom left;
}
.blog #areaB ul.listB li a{
display: block;
padding: 0 0 0 30px;
margin-right: 0;
background: url("/common/img/c_icon_arrow02.gif") no-repeat 0 50% ;
}
.blog #areaB ul.listB li a:hover{
}
#areaB #twitter_div{
margin-bottom: 15px;
background: url("/common/img/blog_link_bg.gif") no-repeat bottom left;
}
#index #areaB #twitter_div{
background: url("/common/img/index_blogentries_bg.gif") no-repeat bottom left;
}
#areaB #twitter_div #twitter-link{
float: left;
text-align: left;
width: 64px;
margin-right: 10px;
}
#areaB #twitter_div ul#twitter_update_list{
float:left;
text-align: left;
width: 180px;
margin-top: 10px;
}

#index #areaB #twitter_div ul#twitter_update_list{
width: 320px;
}

#areaB #twitter_div #twitter_update_list li,
#index #areaB #twitter_div #twitter_update_list li{
padding: 0;
background: none;
}
#areaB #twitter_div #twitter_update_list li a,
#index #areaB #twitter_div #twitter_update_list li a{
padding: 0;
background: none;
}
#areaB #twitter_div #twitter_update_list li a:hover,
#index #areaB #twitter_div #twitter_update_list li a:hover{
}




.blog #areaB ul.listC li{
padding: 6px 0 6px 8px;
background: url("/common/img/blog_link_bg.gif") no-repeat bottom left;
}
.blog #areaB ul.listC li strong{
display: block;
}
.blog #areaB ul.listC li a,
.blog #areaB ul.listC li span{
margin-right: 3px;
font-size: 79.5%;
font-family: Verdana,Arial;
}
.blog #areaB ul.listC li a:hover{
}
.blog #areaB .worksimg{
padding-left: 10px;
margin-bottom: 15px;
}






.archive #areaA #entries .entry{
padding: 0 15px 20px;
border-bottom:3px double #d5d4cc;
margin-bottom: 20px;
}

#site_links{
padding: 40px 0 0;
margin: 0 auto;
text-align: center;
}


/* for works */
.works{
}
.works #areaA{
float:left;
width: 510px;
text-align: left;
}
.works #areaA h2,
.works #areaA h3{
margin-left: 30px;
}
.works #areaA ul{
margin: 0 0 15px 30px;
}
.works #areaA ul li{
display: block;
margin: 0 10px 10px 0;
float: left;
}
.works #areaB{
float:left;
width: 410px;
text-align: left;
}
.works #areaB h2{
margin-bottom: 10px;
}
.works #areaB h3{
font-size: 120%;
margin-bottom: 5px;
color: #a33225;
font-weight:normal;
}
.works #areaB div{
padding: 0 0 25px 10px;
}
.works #areaB table{
margin-bottom: 1em;
}
.works #areaB table th{
font-weight: normal;
text-align: left;
width: 170px;
}



/* for downloads */
.downloads{
}
.downloads #areaA{
float:left;
width: 510px;
text-align: left;
}
.downloads #areaA h2{
margin-left: 30px;
}
.downloads #areaA dl{
margin: 0 0 45px 30px;
}
.downloads #areaA dt{
margin-bottom: 10px;
}

.downloads #areaB{
float:left;
width: 410px;
text-align: left;
}
.downloads #areaB h2{
margin-bottom: 10px;
}
.downloads #areaB h3{
font-size: 120%;
margin-bottom: 5px;
color: #a33225;
font-weight:normal;
}
.downloads #areaB div{
padding: 0 0 25px 10px;
}
.downloads #areaB form{
text-align: center;
padding: 5px 0;
border: 1px solid #ddd;
background: #fff;
}
.downloads #areaB form table{
margin: 0 auto;
}
.downloads #areaB form table td{
padding: 2px;
}
.downloads #areaB form input{
margin-bottom: 3px;
}

/* for error */
#error{
background-image: none;
}
#error #areaA{
width: 500px;
margin: 0 auto;
padding-top: 50px;
text-align: left;
}
#error #areaA p{
margin-left: 82px;
}

/* for contact */
#contact #areaA{
width: 400px;
margin: 0 auto;
padding-top: 20px;
text-align: left;
}
#contact #areaA dl{
padding-top: 15px;
}
#contact #areaA dt,
#contact #areaA dd{
display: block;
}
#contact #areaA dd{
margin-bottom: 20px;
}
#contact #areaA p.bt{
text-align: center;
}
#contact #areaA textarea{
width: 99%;
}
#contact #areaB{
width: 400px;
margin: 0 auto 500px;
padding-top: 20px;
text-align: center;
}