@charset "UTF-8";

/* --------------------------------------------------
# General Settings
-------------------------------------------------- */
html { background: #ecfec5 url(../images/common/extention.png) center repeat-y; }
html, x:-moz-any-link { background: #ecfec5 url(../images/common/extention_ff.png) center repeat-y; }
html, x:-moz-any-link, x:default { background: #ecfec5 url(../images/common/extention_ff.png) center repeat-y; }
body { margin: 0; padding: 0; background: #fff url(../images/common/back.gif) bottom repeat-x; color: #333333; font-family: 'Lucida Grande','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',Meiryo,'メイリオ','ＭＳ Ｐゴシック',sans-serif; font-size: 80%; line-height: 1.5; text-align: center; }
img { border: 0px; -ms-interpolation-mode: bicubic; }
form { margin: 0px; padding: 0px; }
a { outline: none; }
.clear { height: 0px; font-size: 0px; line-height: 0px; float: none; clear: both; }
#preload { position: absolute; filter: alpha(opacity=0); opacity: .0; }

/* --------------------------------------------------
# Container
-------------------------------------------------- */
#container { margin: 0 auto; width: 814px; height: auto; background: url(../images/common/back.png) center repeat-y; }
/* Hack : PNG for IE6 (Invalid) */
* html #container { behavior: expression(this.style.behavior || (this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",this.style.backgroundImage = "none",this.style.behavior = "none")); }
#container_inner { margin: 0 auto; padding: 0 10px; width: 780px; background-color: #fff; }

/* --------------------------------------------------
# Global Header
-------------------------------------------------- */
#global_header { margin: 0 auto; padding: 10px 0 0 0; width: 780px; height: 105px; font-size: 1px; }
#global_header_inner { height: 60px; background: url(../images/common/header.jpg) no-repeat; text-align: left; position: relative; }
#global_header_inner img#logo { position: absolute; top: 0; left: 0; }
#global_header_inner ul { margin: 0; padding: 0; list-style: none; position: absolute; top: 2px; right: 0; }
#global_header_inner ul li { padding: 0 3px 0 0; float: left; }

/* --------------------------------------------------
# Global Navigation
-------------------------------------------------- */
#global_navigation { height: 40px; }
#global_navigation ul { margin: 0; padding: 0; list-style: none; }
#global_navigation ul li { float: left; }
#global_navigation ul li img { vertical-align: top; }

/* --------------------------------------------------
# Global Footer
-------------------------------------------------- */
#global_footer { margin: 0 auto; width: 780px; }
#global_footer #pagetop { padding: 0 10px; text-align: right; }
#global_footer_inner { padding: 0.7em 0.8em; background: url(../images/common/footer.gif) no-repeat; color: #fff; font-size: 90%; line-height: 1.3; text-align: left; }
#global_footer_inner div.alpha { float: left; }
#global_footer_inner div.beta { padding: 2.5em 0 0 0; float: right; }


/* --------------------------------------------------
# Contents
-------------------------------------------------- */
#contents {  }
#contents_inner { margin: 5px 0 0 0; }

/* --------------------------------------------------
# Path
-------------------------------------------------- */
#path { margin: 0 0 0.5em 0; }
#path ul { margin: 0; padding: 0; list-style: none; }
#path ul li { padding: 0 8px; background: url(../images/common/path_arrow.gif) 0 center no-repeat; float: left; }

/* --------------------------------------------------
# Main
-------------------------------------------------- */
#main { margin: 0 0 30px 0; width: 620px; float: right; }
#main_inner { padding: 4px; border: solid 1px #ccc; background: url(../images/common/main_inner.gif) repeat-x; text-align: left; }

/* --------------------------------------------------
# Index Page
-------------------------------------------------- */
#index { margin: 0 0 10px 9px; width: 586px; }
#index dl { margin: 0; padding: 0; }
#index dt { margin: 0; padding: 8px 0 8px 55px; width: 11em; line-height: 1.3; float: left; clear: both; }
#index dt.info { background: url(../images/index/icon_info.gif) 0 center no-repeat; }
#index dt.blog { background: url(../images/index/icon_blog.gif) 0 center no-repeat; }
#index dd { margin: 0 0 0 11em; padding: 8px 0; line-height: 1.3; }
#index div.separator { height: 1px; background: url(../images/common/dotline.gif) repeat-x; overflow: hidden; }
#link { border: solid 1px #ccc; }
#link_header { padding: 3px 10px; background-color: #ffd104; color: #fff; }
#link_body { padding: 5px 10px; }
#link_body a { margin: 0 1.5em 0 0; display: block; white-space: nowrap; float: left; }

/* --------------------------------------------------
# Individual Pages
-------------------------------------------------- */
h1#webpage { margin: 0; padding: 0 0 10px 0; }
#individual {}
#individual h1 { margin: 0; padding: 1em; border-bottom: solid 1px #ccc; font-size: 120%; }
#individual h2 { margin: 0 0 0.8em 0; padding: 6px 0 6px 14px; border-bottom: solid 1px #a5dc24; background: url(../images/common/h2.gif) center no-repeat; font-size: 110%; }
#individual h3 { margin: 0 0.5em 0.8em 0.5em; padding: 4px 0 4px 14px; background: url(../images/common/h3.gif) bottom repeat-x; font-size: 110%; }
#individual dl { margin: 0; padding: 0; }
#individual dl.list dt { padding: 8px 0 8px 5px; }
#individual dt { margin: 0; padding: 8px 0; width: 11em; line-height: 1.3; float: left; clear: both; }
#individual dd { margin: 0 0 0 11em; padding: 8px 0; line-height: 1.3; }
#individual div.separator { height: 1px; background: url(../images/common/dotline.gif) repeat-x; overflow: hidden; }
#individual div#entry_body { padding: 1em; }
#individual div#entry_body p { margin: 1em 0; padding: 0; }
#individual div#entry_body table { margin: 0 0 1em 0; border-collapse: collapse; }
#individual div#entry_body div#entry_date { text-align: right; }
#individual div#page_navi { margin: 10px 0 5px 0; text-align: center; }

/* Web Pages */
#individual p { margin: 0 1em 1em 1em; padding: 0; }
#individual table { margin: 0 1em 1em 1em; border-collapse: collapse; }
#individual table th { padding: 0.5em 2em; border: solid 1px #ccc; border-width: 1px 0; background-color: #ecfec5; white-space: nowrap; }
#individual table td { padding: 0.5em 1em; width: 100%; border: solid 1px #ccc; border-width: 1px 0; }
#individual table td ul { margin-left: -1em; }

#individual div.photo { margin: 0 0 1em 0; text-align: center; }
#individual div.photo a { margin: 0 0.3em; }
#individual div.photo img { border: solid 3px #ccc; }


/* --------------------------------------------------
# Side
-------------------------------------------------- */
#side { margin: 0 0 30px 0; width: 150px; float: left; }
#side_inner { padding: 4px 0 75px 0; border: solid 1px #ccc; background-color: #a5dc24; }
#side_inner ul { margin: 0; padding: 0; list-style: none; }
#side_inner ul li { padding: 0 0 4px 0; }
#side_inner ul li img { vertical-align: top; }


/* --------------------------------------------------
# Lightbox
-------------------------------------------------- */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }