@charset "UTF-8";

/* ------------------------------------------------------------------------------------

	tiancoo.com styles
	designed by Hiroshi Ake
	
	Oct 28, 2006 updated
	
	http://www.tiancoo.com
	tiancoo@gmail.com

	toc ----------------------------------------------------
	
	 1. general
#	 
	 2. container
	 
	 3. header
			|_ site logo [logo] 
			|_ skip navigation [skip]
			|_ global navigation [gNav] 
                        |_ photo entry navigation [pNav]
			
	 4. wrapper of columns [content]

*          5. photo image column [gallery]
	 
	 6. main colum of 2 columns
			|_ main [main]
			|_ amazon link [hreview]
			|_ comment link [comments_invite]
			|_ slide [slide]
			|_ thumnail photo [slides]
			|_ paginate style [pager]
			|_ blog entry comment [comments]
			|_ calender [cal]
			
	 7. sub column of 2 columns
			|_ sub [sub]
			
	 8. page top anchor
	 
	 9. footer
	 
	10. form
	 
	11. misc
			
------------------------------------------------------------------------------*/

/* -------------------------------------------------------------------------- 1
general */

* {
	margin: 0;
	padding: 0;
}

body {
	background: #fff;
	color: #333;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Verdana,Helvetica, Arial, "MS PGothic", sans-serif;
	text-align: center;
}

h1{
	color: #9999ff;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Helvetica, Arial, "MS PGothic", sans-serif;
	font-size: large;
	font-weight: bold;
}
h2,h3 {
	color: #9999ff;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Helvetica, Arial, "MS PGothic", sans-serif;
	font-size: medium;
	font-weight: bold;
}
h4 {
	font-size: small;
	font-weight: bold;
}
p,
ul,
ol,
dl,
li,
th,
td {
	font-size: small;
	font-weight: normal;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Helvetica, Arial, "MS PGothic", sans-serif;
}
blockquote {
	margin: 20px 30px 0 10px;
	padding: 1px 0 0 30px;
	background: transparent url(../img/icon_blockquate.png) no-repeat 0 0;
	font-size: small;
	line-height: 140%;
}
cite {
	display: block;
	margin: 0 50px;
	padding: 6px 35px 10px 0;
	background: transparent url(../img/icon_cite.png) no-repeat right top;
	font-size: small;
	text-align: right;
}
pre {
	width: 400px;
	height: 40px;
	margin: 10px 50px 10px 10px;
	padding: 10px;
	border: 1px #ccccff solid;
	font-size: small;
	overflow: visible;
    /* hide from Mac/IE5 \*/
	overflow: auto;
	/* end hide from Mac/IE5 */
}
em {
	color: #FF0066;
	font-size: medium;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Georgia, "Times New Roman", Times, "MS PGothic", serif;
}
strong {
	color: #FF0066;
	font-size: medium;
}
a:link{
	color: #000099;
	text-decoration:none;
}
a:visited {
	color:  #000099;
	text-decoration:none;
}
a:hover {
	color: #99C0E9;
	text-decoration:none;
}
a:active {
	color: #9999ff;
	text-decoration:none;
}
img {
	border: 0;
}
.clear {
	clear: both;}
.hidden { 
	display: none;}
hr {
	display: none;
}

/* -------------------------------------------------------------------------- 2
containter */

#container{
	position: relative;
	width: 720px;
	margin: 0 auto;
	background: #fff;
	text-align: left;	  
}

/* -------------------------------------------------------------------------- 3
header */
#header {
	width: 720px;
	height: 80px;
	background: transparent;
}
#photo #header {
	height: 60px;
	background: none;
}
/* ----------------------------------------------------------------- 
logo */
#logo {
	position: absolute;
	width: 600px;
        height: 40px;
        padding: 20px;
	top: 10px;
	left: 0;
	background: transparent url(../img/tompa_man.png) no-repeat 500px 0;
}
#photo #logo {
	background: none;
}

/* -----------------------------------------------------------------
skip navigation for screen reader */
.skip {
	position: relative;
	width: 330px;
	top: 0;
	left: 30px;
	text-indent: -9999px;
	overflow: hidden;
	font-family: Helvetica, Verdana, Arial, sans-serif;
}
.skip a {
	font-weight: normal;
}
ul.skip {
	list-style: none;
}
.skip li {
	float: left;
}
.skip li a.aNav1 {
	display: block;
	width: 110px;
	height: 40px;
	background: transparent url(../img/aNav_skip.png) no-repeat 0 0;
}
.skip li a.aNav2 {
	display: block;
	width: 110px;
	height: 40px;
	background: transparent url(../img/aNav_css.png) no-repeat 0 0;
}
.skip li a.aNav3 {
	display: block;
	width: 110px;
	height: 40px;
	background: transparent url(../img/aNav_akey.png) no-repeat 0 0;
}

/* -----------------------------------------------------------------
global navigation */

ul#gNav {
	position: absolute;
	top: 30px;
	left: 180px;
	list-style: none;
}
#gNav li {
	float: left;
	width: 60px;
	height: 30px;
}
#gNav li a {
	display: block;
	width: 60px;
	height: 30px;
	overflow: hidden;
	text-indent: -1000px;
	background-position: 0 0;
	background-repeat: no-repeat;
}
#gNav li a:hover {
	background-position: 0 -29px;
}
#home a.nav01, #home a.nav01:hover,
#photo a.nav02, #photo a.nav02:hover,
#blog a.nav03, #blog a.nav03:hover,
#blogEntry a.nav03, #blogEntry a.nav03:hover,
#contact a.nav06, #contact a.nav06:hover  {
	background-position: 0 -29px;
}
a.nav01  {
	background: url(../img/gNavHome.png);
}
a.nav02  {
	background: url(../img/gNavPhoto.png);
}
a.nav03  {
	background: url(../img/gNavBlog.png);
}
a.nav04  {
	background: url(../img/gNavMap.png);
}
a.nav05  {
	background: url(../img/gNavAbout.png);
}
a.nav06  {
	background: url(../img/gNavContact.png);
}

/* -----------------------------------------------------------------

photo entry navigation */

#pNav {
	position: absolute;
	top: 40px;
	right: 30px;
	width: 100px;
	height: 15px;
	list-style: none;
}
#pNav li.prev {
	float: left;
	margin: 0;
}
#pNav li.next {
	float: right;
	margin: 0;
}
#pNav li a {
	display: block;
	width: 45px;
	height: 15px;
	overflow: hidden;
	text-indent: -9999px;
}
#pNav li.prev a {
	background: transparent url(../img/pNavPrev.png) no-repeat 0 0;
}
#pNav li.next a {
	background: transparent url(../img/pNavNext.png) no-repeat 0 0;
}
#pNav li a:hover {
	background-position: 0 -15px;
}

/* -------------------------------------------------------------------------- 4
content (wrapper of colums) */

#content {
	width: 680px;
        margin: 20px 0 0;
	padding: 0 20px;
}

----------------------------------------------------------------------------- 5
cover */

#cover {
	width: 720px;
        text-align: center;
}
#cover p {
        width: 620px;
        margin: 0 auto 20px;
        padding: 20px 30px;
        border: 1px solid #ddd;
        text-align: center;
}

/* -------------------------------------------------------------------------- 6
main column of 2 Colums */

#main {
	float: left;
	width: 480px;
	padding: 0;
}
#photo #main {
        width: 720px;
}
#photo #main h1 {
	margin: 0 0 20px 0;
}
#photo #main h2 {
        clear: both;
        margin: 20px 0 0 0;
}
#home #main h2 {
        margin: 20px 0 0 0;
	padding: 0 0 0 50px;
}
#home #main .search h2 {
        padding: 0;
}
#blog #main h2 {
	margin: 60px 0 0 0;
	padding: 3px 0 0 25px;
	background: url(../img/icon_talk.png) no-repeat 0 0;
}
#blog #main h2.none {
	margin: 20px 0 5px 0;
	padding: 2px 0 0 12px;
    background: none;
	border-left: 6px solid #FFCC33;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Helvetica, Arial, "MS PGothic", sans-serif;
	font-size: medium;
}
#main p {
	padding: 5px 20px 5px 0;
	line-height: 170%;
}
#home #main p {
	padding: 5px 20px 5px 50px;
	line-height: 170%;
}
#home #main .search p {
        padding: 5px 40px 5px 0;
}
#home #main p.more {  /* excerpt */
        margin: -5px 0 0 0;
        padding: 0 0 0 50px;
}
#main p a {
	margin: 0 3px;
        font-weight: bold;
}
#main p.enter {
	padding: 10px 30px 20px 0;
}
#main p.enter a {
	display: block;
	float: right;
	width: 108px;
	height: 34px;
	margin: 0;
	padding: 0;
	background: url(../img/enter.png) no-repeat 0 0;
	text-indent: -9999px;
	overflow: hidden;
}
#main p.enter a:hover {
	background-position: 0 -32px;
}

#blog #main table,
#blog #main th,
#blog #main td {
         padding: 2px;
         border-collapse: collapse;
         border: 1px solid #555;
}
#blog #main th {
         font-weight: bold;
}
#blog #main td {
         text-align: right;
}

/* --------------------------------------------------------
date   */

#home #main p.date,
#photo #main p.date {
        clear: both;
        padding: 30px 0 0 0;
        color: #99c0e9;
	line-height: 150%;
        font-style: italic;
	font-size: medium;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#home #main .search p.date {
        padding: 0;
}
#blog #main p.date {
        clear: both;
        margin: 0 0 10px 0;
        padding: 0 30px 0 0;
        color: #99c0e9;
	line-height: 150%;
        text-align: right;
        font-style: italic;
	font-size: large;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#photo #main p.date {
	margin: 10px 0;
	padding: 0 0 0 24px;
	background: transparent url(../img/icon_camera.png) no-repeat 0 2px;
}
.date em {
        margin: 0 10px 0 0;
        color: #99c0e9;
	font-size: xx-large;
	font-family: Georgia, "Times New Roman", Times, serif;
}

#main ul {
	margin: 0 40px 0 30px;
}
#main ol {
	margin: 0 40px 0 30px;
}
#main li {
	margin: 5px 0;
	padding: 0;
	line-height: 140%;
}

#main img.left {
	float: left;
	margin: 0 10px 5px 0;
	padding: 0;
}
#main img.right {
	float: right;
	margin: 0 0 5px 10px;
	padding: 0;
}

/* --------------------------------------------------------
hReview   Amazon link */

.hreview {
	clear: both;
	margin: 0;
}
.photo {
	float: left;
    margin: 0 20px 10px 10px;
}
#main div.hreview p a {
	background: none;
}
.hreview dl {
	float: left;
	width: 55%;
	margin: 0;
	padding: 0;
}
.hreview dl.songlist {
	margin: 20px 0;
}
.hreview dl.songlist dt {
	margin: 0;
	padding: 0;
}
.hreview dt.fn a {
	margin: 0;
	padding: 0 30px 0 0; 
	background: url(../img/icon_amazon.png) no-repeat right top; 
	font-weight: bold;
}
.hreview dd {
	line-height: 150%;
}

/* --------------------------------------------------------
entry link (permalink, comment link )*/

.entryLink {
        clear: both;
        margin: 30px 0 20px 0;
}
#home #main a.comments_invite,
#blog #main a.comments_invite {     /* comment link */
	margin: 0 0 0 7px;
	padding: 2px 0 1px 30px;
	border-left: 2px solid #ddd;
	background: url(../img/icon_comment.png) no-repeat 8px 1px;
}

/* --------------------------------------------------------
updated thumbnail  (photo top page)  */

#photo #main .slides a {
	display: block;
        float: left;
	width: 140px;
	height: 80px;
	margin: 0 15px 30px 0;
	padding: 32px 0 36px 0;
	background: #fff url(../img/slideframe.png) 0 0 no-repeat;
	overflow: hidden;     /* bugfix for Win IE   Mac IE5??  */
	text-align: center;
}
#photo #main .slides a:hover {
	background: #fff url(../img/slideframe.png) 0 -150px no-repeat;
}
#photo #main .slides img {
	border: 1px #ddd solid;
}

/* --------------------------------------------------------
slides style  */

/* -----------------------------------------------
slide   (home/photo main column)    */

#main p.slide {
        clear: both;
	float: left;
	width: 140px;
	height: 150px;
	margin: 10px 0 0 0;
	padding: 0 0 0 50px;
	text-align: center;
}
#photo #main p.slide {
        margin: 0 20px 20px 0;
        padding: 0;
}
#main p.slide a {
	display: block;
	width: 140px;
	height: 80px;
	margin: 0;
	padding: 37px 0;
	background: #fff url(../img/slideframe.png) 0 0 no-repeat;
	overflow: hidden;     /* bugfix for Win IE   Mac IE5??  */
}
#main p.slide a:hover {
	background: #fff url(../img/slideframe.png) 0 -150px no-repeat;
}
#main p.slide img {
	border: 1px #ddd solid;
}

/* ----------------------------------------------
slides (contact sheet)  */

#slides {
        width: 620px;
        margin: 0;
	padding: 20px;
	border-left: 2px #eee solid;
	border-top: 1px #eee solid;
	border-right: 2px #eee solid;
	border-bottom: 2px #dfdfdf solid;
        text-align: center;
}
#slides ul {
	list-style: none;
}
#slides h1 {
        margin: 15px 0 5px 0;
}
#slides p {
        clear: both;
        padding: 5px 0;
        line-height: 160%;
}
#slides li {
        display: table;
	float: left;
	width: 140px;
	height: 150px;
	margin: 0 7px; 
}
#slides li a {
        display: table-cell;
	width: 140px;
	height: 150px;
	background: #fff url(../img/slideframe.png) 0 0 no-repeat;
	overflow: hidden;     /* bugfix for Win IE   Mac IE5??  */
        vertical-align: middle;

        text-align: center;
}
* html #slides li a {
        display: block;
}
#slides li a:hover {
	background: #fff url(../img/slideframe.png) 0 -150px no-repeat;
}
#slides li a img {
	border: 1px solid #ddd;
}
* html #slides li a img {
        margin: 34px auto;
        text-align: center;
}

/* --------------------------------------------------------
paginate navigation  */

#main #pager {
        clear: both;
	margin: 0;
	padding: 20px 30px 0 0;
	list-style: none;
}
#photoNav {
        margin: 20px 30px;
        padding: 0;
        list-style: none;
}
#home #main #pager {
	padding: 30px 0 0 0;
	list-style: none;
}
#main #pager li.prev,
#photoNav li.prev {
	float: left;
}
#main #pager li.next,
#photoNav li.next {
	float: right;
}
#main #pager li a,
#photoNav li a {
	display: block;
	width: 45px;
	height: 15px;
	padding: 0;
	overflow: hidden;
	text-indent: -9999px;
}
#main #pager li.prev a,
#photoNav li.prev a {
	background: transparent url(../img/pNavPrev.png) no-repeat 0 0;
}
#main #pager li.next a,
#photoNav li.next a {
	background: transparent url(../img/pNavNext.png) no-repeat 0 0;
}
#main #pager li.prev a:hover,
#photoNav li.prev a:hover  {
	background-position: 0 -15px;
}
#main #pager li.next a:hover,
#photoNav li.next a:hover  {
	background-position: 0 -15px;
}

/* --------------------------------------------------------
comment */

#main #comment {
	clear: both;
	margin: 60px 30px 20px 0;
}

#main #comment h2 {
	margin: 20px 0 20px 0;
	padding: 10px 0 0 0;
	border-top: 1px dashed #9999ff;
        background: none;
	font-size: medium;
}
#comment ol {
        margin: 0 30px;
        padding: 0;
}
#comment li {
	margin: 0;
	padding: 20px 0 20px 10px;
	color: #99c0e9;
	font-size: x-large;
}
#comment p {
	margin: 0;
	padding: 0;
	color: #333;
	font-size: small;
	line-height: 160%;
}
#main #cpreview {
        margin: 0 0 30px 0;
}
#comment #cpreview p {
        margin: 0 50px 0 20px;
}
#comment p.commenter {
	margin: 0;
	padding: 0 0 2px 25px;
	background: url(../img/icon_comment.png) no-repeat 0 2px;
	color: #99c0e9;
	font-weight: bold;
}
#main #comment p.date {
        margin: 0;
        padding: 0;
        background: none;
        color: #99c0e9;
	line-height: 150%;
        text-align: right;
        font-style: italic;
	font-size: large;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#comment #cpreview p.date {
       margin: 0 30px 0 0;
}
#comment p.cError {
        margin: 20px;
}

/* --------------------------------------------------------
calender style */

#cal {
	float: left;
	width: 483px;
	padding: 0 17px 0 0;
}	
#cal table {
	margin: 0;
	padding: 5px;
	background: #eee;
	font-size: small;
	background: url(../img/bg.jpg) repeat 0 0;
}
#cal caption {
	margin: 0;
	padding: 10px 0 0 0;
	background: url(../img/bg.jpg) repeat 0 0;
}
#cal caption h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: x-large;
}
#cal caption em {
	font-size: x-large;
	font-style: normal;
}
#cal th {
	width: 69px;
	margin: 0;
	padding: 0;
	text-align: center;
}
#cal tbody {
	background: #fff;
}
#cal td {
	vertical-align: top;
}
.today {
	background: #ffebb7;
}
#cal p {
	min-height: 60px;
	margin: 3px;
	padding: 0;
}
#cal a {
	display: block;
	margin: 0;
	padding: 5px 2px;
	line-height: 120%;
}

/* -------------------------------------------------------------------------- 7
sub column of 2 Colums */

#sub {
	float: right;
	width: 200px;
	padding: 0;
}
#sub h2 {
	margin: 0;
	font-size: large;
}
#sub h3 {
	margin: 30px 0 0 0;
	padding: 0 0 10px 5px;
	color: #000066;
	background: transparent;
	font-size: small;
	background: transparent url(../img/bg_line_blue_180.png) no-repeat 0 8px; 
}
#sub p {
	padding: 5px 5px 0 10px;
	line-height: 150%;
}
#sub ul {
        margin: 0 0 0 5px;
	list-style: none;
}
#sub li {
	margin: 5px 0 0 5px;
         padding: 0;
}
#sub li a {
        display: block;
        margin: 0;
        padding: 2px 0 2px 20px;
	background: transparent url(../img/icon_doc.png) no-repeat 0 0;
}
#photo #sub li a {
        padding: 0 0 2px 25px;
	background: transparent url(../img/icon_camera.png) no-repeat 0 0;
}
#sub ul.rss li a,
#photo #sub ul.rss li a {
        padding: 0 0 0 20px;
	background: transparent url(../img/rss.png) no-repeat 0 0;
}
#sub input {
        width: 80%;
        margin : 0;
        padding: 2px;
}       
#photo #sub li a.story {
	margin: 0;
	padding: 0 0 0 22px;
	background: transparent url(../img/icon_note.png) no-repeat 2px 0;
}
#photo #sub li a.cSheet {
	margin: 20px 0 0 0;
	padding: 0 0 0 22px;
	background: transparent url(../img/icon_cSheet.png) no-repeat 0 0;
}

/* -------------------------------------------------------------------------- 8
page top anchor  */

#pTop {
	clear: both;
	float: right;
	margin: 0 20px;
	padding: 20px 10px 30px 10px;
	text-align: right;
}
#pTop a {
	display: block;
	width: 100%;
	height: 10px;
	margin: 0;
	padding: 2px 20px 4px 0;
	background: url(../img/icon_pTop.png) no-repeat top right;
	font-size: small;
}

/* -------------------------------------------------------------------------- 9
footer  */

#footer {
	clear: both;
	margin: 30px 0 0 0;
	text-align: center;
}
#footer p {
	margin: 0;
	padding: 0 0 10px 0;
}
#footer p a.rss {
        padding: 0 0 0 20px;
	background: transparent url(../img/rss.png) no-repeat 0 0;
}

/* -------------------------------------------------------------------------- 10
form  */

#form {
	margin: 10px 0;
	padding: 0;
}
fieldset {
	margin: 0 0 10px 0;
	padding: 20px;
	border: none;
	background: #eeeeff;
	color: #ccc;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Verdana, Helvetica, Arial, "MS PGothic", sans-serif;
	font-size: small;
}
label {
	margin: 10px 10px 0 0;
	padding: 0;
	color: #333333;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Verdana, Helvetica, Arial, "MS PGothic", sans-serif;
	font-size: small;
}
#contact label {
	margin: 10px 10px 0 0;
	padding: 0;
	color: #333333;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Verdana, Helvetica, Arial, "MS PGothic", sans-serif;
	font-size: small;
}
input {
	margin: 0 20px 0 0;
	padding: 2px;
	border: 2px solid #ccc;
	vertical-align: middle;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Verdana, Helvetica, Arial, "MS PGothic", sans-serif;
	font-size: small;
	font-weight: normal;
}
#contact input {
	margin: 10px 0;
	padding: 2px;
	border: 2px solid #ccc;
	vertical-align: middle;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Verdana, Helvetica, Arial, "MS PGothic", sans-serif;
	font-size: small;
	font-weight: normal;
}
textarea {
	width: 90%;
	margin: 0;
	padding: 3px;
	border: 2px solid #ccc;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Verdana, Helvetica, Arial, "MS PGothic", sans-serif;
	font-size: small;
	font-weight: normal;
}
#contact textarea {
	margin: 10px 0 10px 0;
	padding: 3px;
	border: 2px solid #ccc;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Verdana, Helvetica, Arial, "MS PGothic", sans-serif;
	font-size: small;
	font-weight: normal;
}