@charset "utf-8";

/*
-INITIAL SETTINGS (reset)
-GENERAL SETTING
-GLOBAL CLASS
-BASE LAYOUT
-HEADER
-CONTENT (includiing archive, search, font)
-SIDEBAR (including font)
-FOOTER
*/

/**************************************************************************************************
INITIAL SETTINGS
**************************************************************************************************/

p {
margin: 0;
padding: 0;
}

ul, ol, li  {
margin: 0px;
padding: 0px;
list-style: none;
line-height: 1;
}

dl, dt, dd {
margin: 0px;
padding: 0px;
font-weight: normal;
}

form, fieldset, input, textarea, select, option, label {
margin: 0px;
padding: 0px;
}

fieldset, a img {
border: 0;
}

table{
border-collapse: collapse;
border-spacing: 0;
}

table, th, td, th {
margin: 0px;
padding: 0px;
font-weight: normal;
}

pre, address, blockquote, caption, cite, code {
margin: 0px;
padding: 0px;
}

pre, code {
font-weight: normal;
font-style: normal;
}

/**************************************************************************************************
GENERAL SETTING
**************************************************************************************************/

body {
margin:0px;
padding:0px;
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
background: #000000 url('images/bg.gif') top left;
color: #242424;
border-top: #e4ff00 solid 2px;
text-align: center;
}

h1, h2, h3, h4, h5, h6 { 
margin: 0px;
padding: 0px;
font-size: 1em;
font-weight: normal;
line-height: 1;
}

hr,
.nodisp{
display:none;
}

img{
border:none;
}

/**************************************************************************************************
GLOBAL CLASS
**************************************************************************************************/

/*CLEARFIX CLASS
-------------------------------------------------------------------------------------------------*/
.clearfix:after{
display:block;
clear:both;
height:0;
visibility:hidden;
content:".";
line-height:0;
}

.clearfix{
display:inline-table;
min-height:1%;
}

/* FOR MAC IE \*/
* html .clearfix{
height:1%;
}
.clearfix{
display: block;
}
/* END OF FOR MAC IE */

/**************************************************************************************************
BASE LAYOUT
**************************************************************************************************/
#page{
width: 100%;
background: url('images/bg_yellow.gif') bottom left repeat-x;
}

#wrapper{
display: block;
width: 860px;
text-align: left;
margin: 0px auto;
text-align: left;
}

#header{
display: block;
width: 860px;
height: 213px;
margin-bottom: 65px;
background: url('images/bg_header.jpg') top left repeat-y;
}

#main{
width: 860px;
background: url('images/bg_main.gif') top left repeat-y;
}

#content{
width: 600px;
float: left;
}

#sidebar{
width: 230px;
float: right;
margin-bottom: 60px;
}

#footer {
display: block;
width: 860px;
height: 165px;
}

/**************************************************************************************************
HEADER
**************************************************************************************************/

#header{
position: relative;
}

#header h1{
position: absolute;
top: 93px;
left: 690px;
}

#header h1 a{
text-indent: -9999px;
text-decoration: none;
display: block;
width: 167px;
height: 85px;
background: url('images/logo.png') top left no-repeat;
overflow: hidden;
}

#header p#feed{
position: absolute;
top: 0px;
left: 741px;
}

#header p#feed a{
text-indent: -9999px;
text-decoration: none;
display: block;
width: 119px;
height: 25px;
background: url('images/button_feed.gif') top left no-repeat;
overflow: hidden;
}

#header p#feed a:hover{
background-position: bottom left;
}

/**************************************************************************************************
CONTENT
**************************************************************************************************/

#content{
padding-top: 25px;
}

.hentry{
position: relative;
padding: 0 35px;
margin-bottom: 30px;
}

.hentry h2{
margin-bottom:5px;
}

.title_author{
padding-top: 6px;
margin: 0 0 35px 25px;
}

.entry{
margin-bottom: 20px;
}

.entry p{
margin-bottom: 1.5em;
}

.entry img{
background-color: #FFFFFF;
border: #1b1b1b solid 6px;
}

blockquote{
padding: 12px 15px;
background: #F7F7F7;
border: #dedede solid 1px;
margin-bottom: 1.5em;
}

.more-link{
display: table;
margin-top: 15px;
}

/*entry date*/
p.entry_date{
width: 60px;
height: 80px;
padding-top: 7px;
text-align: center;
background: url('images/bg_date.gif') top left no-repeat;
position: absolute;
top: 0;
left: -20px;
}
/*for IE6*/
* html p.entry_date{
left: -80px;
}

p.entry_date span{
display:block;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.45em;
text-transform:uppercase;
font-style: italic;
font-weight: bold;
padding: 0;
line-height: 1;
color: #000000;
}

p.entry_date span img{
margin-top: 3px;
}

p.postCategoryData{
padding: 12px 15px;
background: #F7F7F7;
border: #dedede solid 1px;
}

h3#titleTrackback,
h3#titleComment,
h3#titleCommentForm{
height: 36px;
padding: 7px 45px 0 45px;

background: url('images/bg_title_comment.gif') top left no-repeat;
position: absolute;
top: 0;
left: -10px;
}
/*for img replace */
h3#titleTrackback img,
h3#titleComment img,
h3#titleCommentForm img{
margin-top: 3px;
}
/*for IE6*/
* html h3#titleTrackback,
* html h3#titleComment,
* html h3#titleCommentForm{
left: -45px;
}

/*comment*/
#tarckbackBox,
#commentBox,
#respond,
#pagetitleArchiveSearch{
position: relative;
padding: 0 35px;
margin-bottom: 30px;
}

ol.commentList{
padding-top: 60px;
}

ol.commentList li{
padding-bottom: 10px;
margin-bottom: 20px;
background: url('images/dot_content_link.gif') bottom left repeat-x;
}

ol.commentList li .comment-body{
padding: 8px 8px 16px 8px;
background: #000000 url('images/bg_comment.gif') bottom left no-repeat;
}

.commentPict{
float: left;
margin-right: 15px;
}

.commentPict img{
background-color: #FFFFFF;
padding: 1px;
border: #666666 solid 2px;
}

.commentAuthor{
display: block;
padding-top: 5px;
}

.commentText{
padding-top:8px;
}


/*trackback*/
#tarckbackBox{
padding-top: 55px;
}

.trackbackEntryTitle{
margin-bottom: 5px;
}

.trackbackContent{
margin-bottom: 20px;
display: block;
}

.trackbackText{
padding-bottom: 5px;
margin-bottom: 5px;
background: url('images/dot_content_link.gif') bottom left repeat-x;
}

/*comment form*/
#respondBox{
padding-top: 60px;
}

#respondBox form input{
color: #666666;
font-size: 1.2em;
}

#respondBox form textarea {
overflow: auto; 
color: #666666;
font-size: 1.2em;
}

#respondBox p label{
margin-left: 5px;
color: #999999;
}

form p{
margin-bottom: 10px;
vertical-align: top;
}

#author{
width: 190px;
height: 14px;
border: none;
padding: 5px 0 5px 30px;
background: url('images/bg_form_author.gif') top left no-repeat;
}

#email{
width: 190px;
height: 14px;
border: none;
padding: 5px 0 5px 30px;
background: url('images/bg_form_email.gif') top left no-repeat;
}

#url{
width: 190px;
height: 14px;
border: none;
padding: 5px 0 5px 30px;
background: url('images/bg_form_url.gif') top left no-repeat;
}

#commentForm{
width: 420px;
height: 108px;
border: none;
padding-left: 30px;
padding-top: 7px;
background: url('images/bg_form_comment.gif') top left no-repeat;
}

/*page navigation*/
#navigation{
margin: 0 35px;
background: #000000;
}

#navigation li{
float: right;
}

#navigation li.buttonNewer a{
display: block;
width: 100px;
height: 29px;
text-indent: -9999px;
text-decoration: none;
border-left: #FFFFFF solid 3px;
background: url('images/button_newer.gif') top left no-repeat;
overflow: hidden;
}
#navigation li.buttonNewer a:hover{
background: url('images/button_newer.gif') bottom left no-repeat;
}

#navigation li.buttonOlder a{
display: block;
width: 100px;
height: 29px;
text-indent: -9999px;
text-decoration: none;
border-left: #FFFFFF solid 3px;
background: url('images/button_older.gif') top left no-repeat;
overflow: hidden;
}
#navigation li.buttonOlder a:hover{
background: url('images/button_older.gif') bottom left no-repeat;
}


/**************************************************************************************************
ARCHIVE, SEARCH
**************************************************************************************************/

#pagetitleArchiveSearch h2{
height: 80px;
padding: 4px 45px 0 45px;
background: url('images/bg_title_archive_search.gif') top left no-repeat;
position: absolute;
top: 0;
left: -20px;
}
/*for IE6*/
* html #pagetitleArchiveSearch h2{
left: -55px;
}

#pagetitleArchiveSearch h2 img{
padding-top: 7px;
}

#pagetitleArchiveSearch h2 span{
display:block;
padding: 0;
}

.archiveBox{
display: block;
width: 180px;
margin-left: 35px;
float: left;
}

.archiveBox h2{
margin-bottom: 15px;
}

#pagetitleArchiveSearch p{
margin-bottom: 20px;
padding: 75px 0 20px 0;
background: url('images/dot_content_link.gif') bottom left repeat-x;
}


/*FONT content
-------------------------------------------------------------------------------------------------*/

/*.Entry title*/
.hentry h2{
font-size: 2.3em;
}

#content .hentry h2 a, 
#content .hentry h2 a:link, 
#content .hentry h2 a:active {
color: #242424;
font-family: Arial, Helvetica, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
text-decoration: none;
font-style: normal;
padding-bottom: 3px;
}
.hentry h2 a:hover{
background: url('images/dot_content_link.gif') bottom left repeat-x;
}

/* [General] entry, comment, trackback, archive p, search p*/
.entry,
.commentText,
.trackbackText,
#pagetitleArchiveSearch p {
font-size: 1.17em;
line-height: 1.8;
}

.entry a, 
.entry a:link, 
.entry a:active,
.commentText a, 
.commentText a:link, 
.commentText a:active,
.trackbackText a, 
.trackbackText a:link, 
.trackbackText a:active,
#pagetitleArchiveSearch p a, 
#pagetitleArchiveSearch p a:link, 
#pagetitleArchiveSearch p a:active{
color: #4685b7;
text-decoration: none;
background-position: bottom left;
background-repeat: repeat-x;
padding-bottom: 3px;
background-image:  url('images/dot_content_link.gif');
}
.entry a:hover,
.commentText a:hover,
.trackbackText a:hover,
#pagetitleArchiveSearch p a:hover{
color: #242424;
background-image: none;
background-color: #e4ff00;
}


/* [General] Entry meta(under title & entry), comment form(logged in), archive li, trackback footer */
.postMetaData,
.postCategoryData,
.commentFormLogin,
.trackbackFooter,
.archiveBox li{
line-height: 2;
font-size: 1.1em;
}

.postMetaData a, 
.postMetaData a:link, 
.postMetaData a:active,
.postCategoryData a,
.postCategoryData a:link,
.postCategoryData a:active,
.commentFormLogin a, 
.commentFormLogin a:link, 
.commentFormLogin a:active,
.trackbackFooter a, 
.trackbackFooter a:link, 
.trackbackFooter a:active,
.archiveBox li a, 
.archiveBox li a:link, 
.archiveBox li a:active{
color: #4685b7;
text-decoration: none;
font-style: italic;
padding-bottom: 3px;
background: url('images/dot_content_link.gif') bottom left repeat-x;
}
.postMetaData a:hover,
.postCategoryData a:hover,
.commentFormLogin a:hover,
.trackbackFooter a:hover,
.archiveBox li a:hover{
color: #242424;
background-image: none;
background-color: #e4ff00;
}

/* title comment & trackback & comment form */
h3#titleTrackback,
h3#titleComment,
h3#titleCommentForm{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.8em;
font-style: italic;
font-weight: bold;
line-height: 1;
color:#000000;
}

cite.fn,
.says{
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.8em;
font-style: normal;
}
cite.fn a{
color: #e4ff00;
text-decoration: none;
}
cite.fn a:hover{
color: #000000;
background-color: #e4ff00;
}

.comment-meta{
font-size: 1.1em;
font-style: italic;
margin-top: 6px;
}
.comment-meta a{
color: #e4ff00;
text-decoration: none;
}
.comment-meta a:hover{
color: #000000;
background-color: #e4ff00;
}

/* trackback */
.trackbackEntryTitle{
font-size: 1.2em;
font-weight: bold;
font-style: italic;
}

/* for search & archive */
#pagetitleArchiveSearch h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 2.2em;
font-style: italic;
font-weight: bold;
line-height: 1;
color:#000000;
}

#pagetitleArchiveSearch h2 span{
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-style: italic;
line-height: 1.6;
}

.archiveBox h2{
font-size: 1.2em;
font-weight: bold;
font-style: italic;
}

.archiveBox li{
font-style: italic;
}

/**************************************************************************************************
SIDEBAR
**************************************************************************************************/

/* margin */
#sidebar form{
margin-bottom: 30px;
}

#about,
#recent_tweets{
margin-bottom: 30px;
background: url('images/line_sidebar.gif') 0 17px no-repeat;
}

/* search box (including for content page)*/
.searchBox {
width: 230px;
height: 29px;
background: url('images/bg_search.gif') top left no-repeat;
}

.searchBox .s {
float: left;
padding: 0;
border: 0;
width: 175px;
height: 17px;
border: none;
padding: 8px 0px 4px 15px;
background: none;
}
.searchBox .go {
float: right;
margin: 0;
}

#content .searchBox {
width: 385px;
height: 29px;
background: url('images/bg_search_l.png') top left no-repeat;
}

#content .searchBox .s {
float: left;
padding: 0;
border: 0;
width: 335px;
height: 17px;
border: none;
padding: 8px 0px 4px 15px;
background: none;
}
#content .searchBox .go {
float: right;
margin: 0;
}

/* sidebar title */
#sidebar h2{
text-indent: -9999px;
text-decoration: none;
display: block;
height: 18px;
width: 230px;
margin-bottom: 15px;
}

#about h2{
display: block;
background: url('images/title_about.gif') top left no-repeat;
}

#recent_tweets h2{
display: block;
background: url('images/title_recent_tweets.gif') top left no-repeat;
}

#sidebar h2#archives{
width: 78px;
height: 14px;
display: block;
background: url('images/title_archives.gif') top left no-repeat;
}

#sidebar h2#categories{
width: 96px;
height: 16px;
display: block;
background: url('images/title_categories.gif') top left no-repeat;
}

/* about */
#nameAuthor{
color: #e4ff00;
font-weight: bold;
}

#pictAuthor img{
border: #1b1b1b solid 3px;
margin-bottom: 10px;
}

/* recent tweets */
#recent_tweets ul{
margin-bottom: 15px;
}

#recent_tweets ul li{
display: block;
line-height: 1.6em;
padding-bottom: 12px;
margin-bottom: 7px;
background: url('images/dot_tweets.gif') bottom left repeat-x;
}

#buttonFollowMe a{
text-indent: -9999px;
text-decoration: none;
display: block;
width: 83px;
height: 20px;
overflow: hidden;
background: url('images/button_follow_me.gif') top left no-repeat;
}
#buttonFollowMe a:hover{
background: url('images/button_follow_me.gif') bottom left no-repeat;
}

/* categories & archives */
#scroller-header {
display: block;
width:230px;
height: 18px;
margin-bottom: 15px;
background: url('images/line_sidebar.gif') 0 17px no-repeat;
}

a.titleCategories{
float: left;
text-indent: -9999px;
text-decoration: none;
display: block;
width: 103px;
height: 18px;
overflow: hidden;
background: url('images/button_categories.gif') 0px -18px no-repeat;
}
a:hover.titleCategories{
background: url('images/button_categories.gif') 0px 0px no-repeat;
}

a.titleArchives{
float: left;
margin-left: 3px;
text-indent: -9999px;
text-decoration: none;
display: block;
width: 90px;
height: 18px;
overflow: hidden;
background: url('images/button_archives.gif') 0px -18px no-repeat;
}
a:hover.titleArchives{
background: url('images/button_archives.gif') 0px 0px no-repeat;
}

a.selected{
background-position: top left;
}

#scroller-body {
width:230px;
padding-bottom:30px;
clear: both;
}

#mask {
width:230px;
overflow:hidden;
margin:0 auto;
}

#panel {
}

#panel div {
float:left;
}

/* wordpress */
#wordpress a{
text-indent: -9999px;
text-decoration: none;
display: block;
width: 230px;
height: 32px;
background: url('images/button_wordpress.gif') top left no-repeat;
}

/*FONT sidebar
-------------------------------------------------------------------------------------------------*/

#sidebar{
color: #e4e4e4;
font-size: 1.1em;
line-height: 1.8;
}

.searchBox input{
color: #e4e4e4;
}

#about a,
#about a:link,
#about a:active,
#scroller-body a,
#scroller-body a:link,
#scroller-body a:active{
color: #e4e4e4;
text-decoration: none;
font-style: italic;
background-color: #1f1f1c;
padding: 2px;
}
#about a:hover,
#scroller-body a:hover{
color: #000000;
background-color: #e4ff00;
}

#recent_tweets li{
color: #e4e4e4;
font-size: 1.1em;
padding: 2px;
}

#recent_tweets li a{
color: #e4e4e4;
text-decoration: none;
}

#recent_tweets li a:hover{
color: #000000;
background-color: #e4ff00;
}

.twitter-timestamp{
font-size: 0.9em;
color: #666666;
font-style: italic;
text-decoration: none;
border: none;
}

#panel li{
line-height: 1.8;
color: #666666;
font-style: italic;
}

/**************************************************************************************************
FOOTER
**************************************************************************************************/

#footer{
background: url('images/bg_footer.gif') top left no-repeat; 
}

#footerLeft{
float:left;
padding-top: 60px;
}

#footerRight{
float:right;
padding-top: 30px;
}

#footer p#validationContact{
position: relative;
width: 600px;
height: 34px;
border-top: #000000 solid 1px;
border-bottom: #000000 solid 1px;
margin-bottom: 25px;
background: url('images/bg_footer_validation.gif') top left no-repeat;
}

a#buttonXhtmlValidation{
position: absolute;
top: 11px;
left: 26px;
display: block;
text-indent: -9999px;
text-decoration: none;
width: 87px;
height: 13px;
background: url('images/button_xhtml_validation.gif') top left no-repeat; 
}
a:hover#buttonXhtmlValidation{
height: 14px;
}

a#buttonCssValidation{
position: absolute;
top: 11px;
left: 127px;
display: block;
text-indent: -9999px;
text-decoration: none;
width: 73px;
height: 13px;
background: url('images/button_css_validation.gif') top left no-repeat; 
}
a:hover#buttonCssValidation{
height: 14px;
}

a#buttonContact{
position: absolute;
top: 11px;
left: 447px;
display: block;
text-indent: -9999px;
text-decoration: none;
width: 137px;
height: 13px;
background: url('images/button_contact.gif') top left no-repeat; 
}
a:hover#buttonContact{
height: 14px;
}

p#copyright{
text-indent: -9999px;
text-decoration: none;
display: block;
width: 196px;
height: 15px;
background: url('images/copyright.gif') top left no-repeat;
}

a#buttonPortfolio{
display: block;
text-indent: -9999px;
text-decoration: none;
width: 230px;
height: 102px;
background: url('images/button_portfolio.gif') top left no-repeat; 
}
a:hover#buttonPortfolio{
background: url('images/button_portfolio.gif') bottom left no-repeat; 
}