@charset "UTF-8";

/*
 * pettanR
 * 
 *   work.css
 * 
 *   version 0.4.23
 *
 */
	html, body {
		overflow:				hidden;
	}
	#entrance, #backyard, #debug {
		padding:				20px 10px;
	}
	#inner-wrapper {
		overflow:				auto;
	}

	
	/*  View Container
	--------------------------------------------------------------------------------------*/	
		.console-page {

		}
	
	

/*--------------------------------------------------------------------------------------
 * 
 *  overlay
 *  
 -------------------------------------------------------------------------------------*/
	#overlay-container,
	#overlay-shadow {
		position:			absolute;
		left:				0;
		top:				0;
		width:				100%;
		height:				100%;
		overflow:			hidden;
	}
		#overlay-shadow {
			background:			#000;
			opacity:			0.5;
			-moz-opacity:		0.5;
			-khtml-opacity:		0.5;
		}
		.pettanr-ActiveX-enabled #overlay-shadow {
			filter:				alpha(opacity=50);
			-ms-filter:			alpha(opacity=50);			
		}
		.pettanr-ActiveX-disabled #overlay-shadow {
			background:			transparent url( black_50pct.png)　repeat 0 0;
			_background:		url( black_50pct.gif)　repeat 0 0;
		}
		
		#overlay-close-button {
			border:					2px solid #f00;
			color:					#f00;
			font-weight:			bold;
			font-size:				16px;
			line-height:			16px;
			text-align:				center;
			cursor:					pointer;
			overflow:				hidden;
			width:					20px;
			height:					20px;
			padding:				2px;
			position:				absolute;
			top:					9px;
			right:					9px;
			z-index:				9999;
			border-radius:			5px;
			-o-border-radius:		5px;
			-ms-border-radius:		5px;
			-moz-border-radius:		5px;
			-webkit-border-radius:	5px;
		}
		
		/*  Console Common
		--------------------------------------------------------------------------------------*/
			.console-wrapper {
				position:			absolute;
				width:				320px;
				padding:			20px 20px 0;
				background-color:	#fff;
			}
				.console-header {
					border-bottom:	2px solid #666;
					color:			#666;
					text-align:		center;
					font-size:		12px;
					line-height:	12px;
					padding-bottom:	8px;
					margin-bottom:	10px;
				}
				.console-inner {
					
				}
					.console-button-container {
						margin-top:			20px;
						border-top:			2px solid #666;
						padding-top:		10px;
						overflow:			auto;
					}
						.console-submit-button {
							display:			block;
							width:				100px;
							float:				left;
							margin-left:		30px;
						}
						.console-cancel-button {
							display:			block;
							width:				100px;
							float:				right;
							margin-right:		30px;
						}
				.console-progress {
					clear:			both;
					text-align:		center;
					height:			12px;
					font-size:		12px;
					line-height:	12px;
					margin-top:		15px;
					color:			#666;
				}

		/*  Field
		--------------------------------------------------------------------------------------*/
			.field {
				margin:				10px 0;
				padding-bottom:		5px;
				border-bottom:		1px solid #ccc;
			}				
				.field-label {
					display:			inline-block;
					width:				120px;
					line-height:		22px;
					color:				#666;
					cursor:				pointer;
				}

		/*  Comic Console
		--------------------------------------------------------------------------------------*/
				#comic-console {
					
				}

					.comic-console-value {
						width:				40px;
						text-align:			right;
					}

					#comic-console-title,
					#comic-console-height,
					#comic-console-width,
					#comic-console-editable,
					#comic-console-visible {}
						#comic-console-title-value { width: 180px; text-align:left;}
						#comic-console-height-value {}
						#comic-console-width-value {}
						#comic-console-editable-value,
						#comic-console-visible-value {
							width:			180px;
							text-align:		center;
						}
		/*  Comic Reader
		--------------------------------------------------------------------------------------*/
		#comic-reader-wrapper {}
			#comic-reader-panel-container {
				position:			absolute;
				left:				0;
				top:				0;
			}
			#comic-reader-header,
			#comic-reader-console {
				position:			absolute;
				left;				0;
				width:				100%;
				z-index:			9998;
			}
			#comic-reader-header {
				top:				0;
				height:				40px;
			}
				.comic-reader-shadow {
					z-index:			9997;
					position:			absolute;
					width:				100%;
					left;				0;
					width:				100%;
					height:				40px;
					background:			#000;
					opacity:			0.5;
					-moz-opacity:		0.5;
					-khtml-opacity:		0.5;
				}
				.pettanr-ActiveX-enabled .comic-reader-shadow {
					filter:				alpha(opacity=50);
					-ms-filter:			alpha(opacity=50);			
				}
				.pettanr-ActiveX-disabled .comic-reader-shadow {
					background:			transparent url( black_50pct.png)　repeat 0 0;
					_background:		url( black_50pct.gif)　repeat 0 0;
				}
				#comic-reader-header-content {
					height:				24px;
					padding-top:		16px;
					border-bottom:		1px solid #fff;
				}
					#comic-reader-title {
						font-size:			20px;
						line-height:		24px;
						color:				#fff;
						font-weight:		bold;
					}
					#comic-reader-author {
						font-size:			18px;
						line-height:		24px;
						color:				#ddd;
						text-indent:		1em;
					}
			#comic-reader-console {
				bottom:				0;
				height:				100px;
				border-top:			1px solid #fff;
			}
				#comic-reader-button-centering {
					position:			relative;
					margin:				0 auto;
					width:				399px;
				}
					#comic-reader-back-button,
					#comic-reader-forward-button,
					#comic-reader-back-button:link,
					#comic-reader-forward-button:link  {
						display:			block;
						zoom:				1;
						position:			absolute;
						top:				0;
						height:				100px;
						line-height:		100px;
						color:				#ddd;
						width:				198px;
						border-left:		1px solid #999;
						border-right:		1px solid #999;
						text-align:			center;
						font-size:			30px;
					}
					#comic-reader-back-button:hover,
					#comic-reader-forward-button:hover {
						background-color:	#111;
						color:				#fff;
						font-size:			34px;
						text-decoration:	none;
					}
					#comic-reader-back-button {
						left:				0;
						border-right:		1px solid #ccc;
					}
					#comic-reader-forward-button {
						right:				0;
					}
					
		/*  Output Console
		--------------------------------------------------------------------------------------*/
		
			#output-console-wrapper {

			}
				#output-console-format-value {
					width:			180px;
					text-align:		center
				}
				#output-console-option-value {
					width:			180px;
					text-align:		left;
				}
				#output-console-button-container {
					margin:			10px 0;
					position:		relative;
				}				
				#output-area {
					width:			100%;
					height:			200px;
					border:			1px outset #ccc;
					outline:		1px;
					margin-bottom:	20px;
				}
					
		/*  Upload Console
		--------------------------------------------------------------------------------------*/
				#upload-console {
				}

/*--------------------------------------------------------------------------------------
 * 
 *  home
 *  
 -------------------------------------------------------------------------------------*/
	#home {

	}


/*--------------------------------------------------------------------------------------
 * 
 *  Editor
 *  
 -------------------------------------------------------------------------------------*/
		#editor {
			position:			absolute;
			left:				0;
			top:				0;
			width:				100%;
			height:				100%;
			overflow:			hidden;
			background-color:	#f5f5f5;
		}
	
		/*  Text Editor
		--------------------------------------------------------------------------------------*/		
			#speach-editor-wrapper {
				position:		absolute;
			}
			#speach-editor-wrapper form {
				width:			100%;
				height:			100%;
			}
			#speach-editor {
				width:			100%;
				height:			100%;
				border:			1px outset #ccc;
				outline:		1px;
			}
				#speach-edit-complete-button {
					margin:		10px auto 0;
				}
	
		/*  Image Group
		--------------------------------------------------------------------------------------*/
			#image-group-wrapper {
				position:			absolute;
				top:				0;
				left:				0;
			}
				#image-group-icon-container {
					position:			absolute;
					top:				0;
					left:				0;
					height:				200px;
					width:				100%;
					background-color:	#fff;
					border:				#fff solid;
					border-width:		0;				
				}
				#image-group-name {
					padding:			20px 0 10px 20px;
					border-bottom:		1px solid #eee;
					color:				#eee;
					font-size:			20px;
					line-height:		20px;
					font-weight:		bold;
					text-shadow:		1px 1px 3px #ccc;
					-moz-text-shadow:	1px 1px 3px #ccc;
					-webkit-text-shadow:1px 1px 3px #ccc;
					box-shadow:			0 4px 9px #333;
					-moz-box-shadow:	0 4px 9px #333;
					-webkit-box-shadow:	0 4px 9px #333;
				}
				#image-group-button {
					width:				200px;
					position:			absolute;
					left:				0;
					bottom:				-40px;
					_bottom:			0;
				}
				.image-group-item {
					width:				150px;
					height:				200px;
					position:			absolute;
					top:				0;
					left:				0;
					text-align:			center;
				}
				.image-group-item .reversible-image-container {
					width:				150px;
					height:				200px;
				}
				.image-group-item .reversible-image-container img {
					width:				100%;
					height:				100%;
				}
				.image-group-item-title {
					position:			absolute;
					bottom:				0;
					left:				0;
					text-align:			center;
					width:				100%;
					height:				30px;
				}
	

	/*  MenuBar
	--------------------------------------------------------------------------------------*/
		#menu-bar {
			position:			absolute;
			top:				0;
			left:				0;
			width:				100%;
			height:				30px;
			background-color:	#fff;
			border-bottom:		1px solid #666;
			box-shadow:			0 4px 9px #333;
			-moz-box-shadow:	0 4px 9px #333;
			-webkit-box-shadow:	0 4px 9px #333;
			filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=180,strength=9);
		}
			.menu-bar-item,
			.menu-bar-item-focus {
				position:		absolute;
				top:			0;
				width:			80px;
				color:			#666;
			}
				.menu-bar-item div,
				.menu-bar-item-focus div {
					cursor:			pointer;
					overflow:		hidden;
					height:			30px;
					line-height:	30px;				
					padding-left:	0.6em;
					font-size:		14px;
				}
				.menu-bar-item-focus div {
					background-color:	#66f;
					color:				#eee;
				}
				.menu-bar-item ul {
					display:			none;
				}
				.menu-bar-item-focus ul {
					position:			absolute;
					list-style:			none;
					top:				30px;
					width:				200px;
					margin:				0;
					padding:			0;
					background-color:	#fff;
					color:				#666;
					border:				1px solid #ccc;
					box-shadow:			1px 4px 9px #333;
					-moz-box-shadow:	1px 4px 9px #333;
					-webkit-box-shadow:	1px 4px 9px #333;
					filter:				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
				}
					.menu-bar-item-focus li {
						display:		block;
						cursor:			pointer;
						width:			200px;
						height:			30px;
						line-height:	30px;
					}
					.menu-bar-item-focus li.disabled {
						cursor:			default;
					}
						.menu-bar-item-focus a,
						.menu-bar-item-focus a:link,
						.menu-bar-item-focus a:visited {
							color:			#666;
							position:		relative;
							display:		block;
							width:			200px;
							height:			30px;
							line-height:	30px;
							*cursor:		pointer;
						}
						.menu-bar-item-focus a:hover {
							color:				#333;
							background-color:	#ccf;
							text-decoration:	none;
							*cursor:			pointer;
						}				
						.menu-bar-item-focus li.disabled a,
						.menu-bar-item-focus li.disabled a:link,
						.menu-bar-item-focus li.disabled a:visited,
						.menu-bar-item-focus li.disabled a:active,
						.menu-bar-item-focus li.disabled a:hover {
							color:				#999;
							background-color:	#fff;
							*cursor:			default;
						}
							.menu-bar-item-focus span {
								position:		absolute;
								top:			0;
								left:			10px;
								display:		block;
								font-size:		14px;
								font-weight:	bold;
								width:			120px;
								overflow:		hidden;
							}
							.menu-bar-item-focus kbd {
								position:		absolute;
								top:			0;
								left:			140px;
								display:		block;
								font-size:		10px;
								color:			#999;
								width:			60px;
								overflow:		hidden;
							}
					.menu-bar-item-focus li.separator {
						width:			200px;
						height:			0;
						line-height:	0;
						border-top:		1px solid #ccc;
						margin:			0;
						padding:		0;
					}
	
	/*  whiteGlass
	--------------------------------------------------------------------------------------*/	
		#whiteGlass-container {
			position:	absolute;
			top:		0;
			left:		0;
			width:		100%;
			height:		100%;
		}
			#whiteGlass-container div {
				position:			absolute;
				background-color:	#fff;
				opacity:			0.7;
				-moz-opacity:		0.7;
				-khtml-opacity:		0.7;
			}
			.pettanr-ActiveX-enabled #whiteGlass-container div {
				filter:				alpha(opacity=70);
				-ms-filter:			alpha(opacity=70);				
			}
			.pettanr-ActiveX-disabled #whiteGlass-container div {
				background:			transparent url( white_70pct.png) repeat 0 0;
				_background:		#fff;
			}
			
			#whiteGlass-top {
				top:		0;
				left:		0;
				width:		100%;
				height:		20%;
			}
			#whiteGlass-left {
				top:		20%;
				left:		0;
				width:		20%;
				height:		60%;
			}
			#whiteGlass-right {
				top:		20%;
				left:		80%;
				width:		20%;
				height:		60%;
			}
			#whiteGlass-bottom {
				top:		80%;
				left:		0;
				width:		100%;
				height:		20%;
			}
	
	/*  panel
	--------------------------------------------------------------------------------------*/
		#panel-tools-container {
			position:	absolute;
			border:		2px solid #333;
		}
	
	/*  mouse-operation-catcher
	--------------------------------------------------------------------------------------*/	
		#mouse-operation-catcher {
			position:			absolute;
			top:				0;
			left:				0;
			width:				100%;
			height:				100%; /* 100% don't work for ie6, so ie6 need to set height as 'XXpx' by js */
		}
		.pettanr-ActiveX-enabled #mouse-operation-catcher {
			background-color:	#fff;
			filter:				alpha( opacity=0);
			-ms-filter:			alpha( opacity=0);
		}
		/*
		 * ie では、背景を設定しないと、 mousemove が働かない。
		 * activeX 有効の場合は背景を着色して filter で透明に。
		 * activeX 無効の場合は透明 gif を使用
		 * background:			url(4x4.gif) fixed repeat;
		 */
		.pettanr-ActiveX-disabled #mouse-operation-catcher {
			background:			url( opacity0.gif) fixed repeat;
		}
	
	
	/*  comic-element
	--------------------------------------------------------------------------------------*/
		#comic-element-container {
			position:			absolute;
			
		}
			.comic-element-wrapper {
				position:			absolute;
			}
				#comic-element-container img {
					width:				100%;
					height:				100%;
					position:			absolute;
					top:				0;
					left:				0;
				}
	
	/*  comic-element-resizer
	--------------------------------------------------------------------------------------*/		
		#comic-element-resizer-container {
			position:			absolute;
			border:				1px solid #999;
		}
			.comic-element-resizer {
				position:			absolute;
				width:				8px;
				height:				8px;
				font-size:			8px; /* ie */
				line-height:		8px; /* ie */
				border:				1px solid #333;
				background-color:	#fff;
			}
		/*
		 * marker
		 */
			#comic-element-resizer-top {
				top:				-5px;
				left:				50%;
			}
			.current-resizer-is-0 #comic-element-resizer-top {
				background-color:	#f66;
			}
			#comic-element-resizer-left {
				top:				50%;
				left:				-5px;
			}
			.current-resizer-is-1 #comic-element-resizer-left {
				background-color:	#f66;
			}
			#comic-element-resizer-right {
				top:				50%;
				right:				-5px;
			}
			.current-resizer-is-2 #comic-element-resizer-right {
				background-color:	#f66;
			}
			#comic-element-resizer-bottom {
				bottom:				-5px;
				left:				50%;
			}
			.current-resizer-is-3 #comic-element-resizer-bottom {
				background-color:	#f66;
			}
			#comic-element-resizer-top-left {
				top:				-5px;
				left:				-5px;
			}
			.current-resizer-is-4 #comic-element-resizer-top-left {
				background-color:	#f66;
			}
			#comic-element-resizer-top-right {
				top:				-5px;
				right:				-5px;
			}
			.current-resizer-is-5 #comic-element-resizer-top-right {
				background-color:	#f66;
			}
			#comic-element-resizer-bottom-left {
				bottom:				-5px;
				left:				-5px;
			}
			.current-resizer-is-6 #comic-element-resizer-bottom-left {
				background-color:	#f66;
			}
			#comic-element-resizer-bottom-right {
				bottom:				-5px;
				right:				-5px;
			}
			.current-resizer-is-7 #comic-element-resizer-bottom-right {
				background-color:	#f66;
			}
	/*  panel-resizer
	--------------------------------------------------------------------------------------*/	
		#panel-resizer-top,
		#panel-resizer-bottom {
			position:			absolute;
			border:				1px outset #999;
			background-color:	#eee;
			text-align:			center;
			font-size:			12px;
			line-height:		12px;
			padding:			9px 0;
			left:				-2px;
		}
		
		#panel-resizer-top {
			top:					-37px;
			border-radius:			8px 8px 0 0;
			-o-border-radius:		8px 8px 0 0;
			-ms-border-radius:		8px 8px 0 0;
			-moz-border-radius:		8px 8px 0 0;
			-webkit-border-radius:	8px 8px 0 0;
		}
		#panel-resizer-bottom {
			bottom:					-37px;
			border-radius:			0 0 8px 8px;
			-o-border-radius:		0 0 8px 8px;
			-ms-border-radius:		0 0 8px 8px;
			-moz-border-radius:		0 0 8px 8px;
			-webkit-border-radius:	0 0 8px 8px;
		}
	
	/*  balloon-tail-mover
	--------------------------------------------------------------------------------------*/		
		#balloon-tail-mover {
			position:			absolute;
			width:				8px;
			height:				8px;
			font-size:			8px; /* ie */
			line-height:		8px; /* ie */
			border:				1px solid #333;
			background-color:	#66f;
			margin:				-5px 0 0 -5px;
		}
	
	/*  comic element console
	--------------------------------------------------------------------------------------*/
		#comic-element-consol-wrapper {
			position:			absolute;
		}
			#image-element-consol {
				width:				50px;
				overflow:			auto;
			}
			#text-element-consol {
				width:				75px;
				overflow:			auto;
			}
	
				#change-image-button,
				#layer-back-button,
				#layer-forward-button,
				#delete-image-button,
				#edit-text-button,
				#change-text-style-button,
				#hide-text-tail-button,
				#back-text-button,
				#forward-text-button,
				#delete-text-button {
					text-indent:			-9999px;
					width:					25px;
					height:					25px;
					line-height:			25px;
					float:					left;
					background-image:		url('../images/sprite.gif');
					background-repeat:		no-repeat;
					background-position:	0 0;
					cursor:					pointer;
				}
				#hide-text-tail-button {
					background-position:	-30px -30px;
				}
				#change-image-button,
				#change-text-style-button {
					background-position:	-30px 0;
				}			
				#layer-back-button,
				#back-text-button {
					background-position:	-60px 0;
				}
				#layer-forward-button,
				#forward-text-button {
					background-position:	-60px -30px;
				}
				#delete-image-button,
				#delete-text-button {
					background-position:	0 -30px;
				}
			
		.console-out #comic-element-consol-wrapper-when-out {
			padding:			5px;
			background-color:	#333;
		}
		.console-out #comic-element-consol-tail {
			border-width:		0 5px 10px 5px;
			border-color:		transparent transparent #333 transparent;
			_border-color:		#fff #fff #333 #fff;
			border-style:		solid;
			width:				0;
			height:				0;
			font-size:			0;
			line-height:		0;
			position:			absolute;
			top:				-10px;
			left:				50%;
		}
			
	
			
	/*  Panel > speach
	--------------------------------------------------------------------------------------*/
			.speach {
				text-align:			center;
				display:			table;
				position:			absolute;
				top:				16.6%;
				left:				16.6%;
				width:				66.6%;
				height:				66.6%;
				padding:			0;
				margin:				0;
			}
				.speach-inner {
					display:		table-cell;
					vertical-align:	middle;
				}
			
		/* fix for ie */	
			.text-element table,
			.text-element tbody,
			.text-element tr,
			.text-element td {
				width:				100%;
				height:				100%;
				border:				0;
				padding:			0;
				margin:				0;
				text-align:			center;
				vertical-align:		middle;
			}
			.text-element table {
				table-layout:		fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */
			}
			
	/*  Window
	--------------------------------------------------------------------------------------*/
		.window-wrapper {
			position:			absolute;
			top:				10px;
			left:				10px;
			width:				200px;
			height:				200px;
			border-bottom:		1px solid #999;
			background-color:	#fff;
			box-shadow:			1px 4px 9px #333;
			-moz-box-shadow:	1px 4px 9px #333;
			-webkit-box-shadow:	1px 4px 9px #333;
			filter:				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
		}

			.window-header,
			.window-close-button {
				font-size:				12px;
				color:					#eee;
				line-height:			12px;
				overflow:				hidden;
				text-align:				center;
				padding-top:			8px;
				padding-bottom:			6px;
				background-color:		#333;
			}
				.window-close-button {
					position:				absolute;
					top:					0;
					right:					0;
					border-left:			1px solid #666;
					padding-left:			9px;
					padding-right:			9px;
					border-radius:			0 8px 0 0;
					-o-border-radius:		0 8px 0 0;
					-ms-border-radius:		0 8px 0 0;
					-moz-border-radius:		0 8px 0 0;
					-webkit-border-radius:	0 8px 0 0;
				}
			
			.window-wrapper,
			.window-header {
				border-radius:			8px 8px 0 0;
				-o-border-radius:		8px 8px 0 0;
				-ms-border-radius:		8px 8px 0 0;
				-moz-border-radius:		8px 8px 0 0;
				-webkit-border-radius:	8px 8px 0 0;
			}
			.window-body {
				position:				relative;
				border-left:			1px solid #aaa;
				*border-left:			1px solid #ccc;
				border-right:			1px solid #999;
			}

			html>/**/body .window-body {  
				border-left /***/:		1px solid #ccc\9;
			}

			.window-footer {
				width:					100%;
				height:					20px;
				background-color:		#333;
				position:				absolute;
				left:					0;
				bottom:					0;
			}
				.window-resize-button {
					position:				absolute;
					top:					0;
					right:					0;
					background-image:		url('../images/sprite.gif');
					background-repeat:		no-repeat;
					background-position:	-70px -60px;
					width:					20px;
					height:					20px;
					line-height:			20px;
					text-indent:			-9999px;
					text-align:				center;
					cursor:					pointer;
				}

	/*  page contents
	--------------------------------------------------------------------------------------*/
		.sidenavi {
			width:				100px;
			float:				left;
		}
			.sidenavi-item,
			.sidenavi-item:link {
				display:			block;
				border-bottom:		1px solid #666;
				padding:			1em;
				text-decoration:	none;
				zoom:				1;
			}
			.sidenavi-item:hover {
				background-color:	#ccc;
				text-decoration:	none;
			}
			.sidenavi .current {
				background-color:	#666;
				color:				#eee;
			}
		.page-contents {
			_position:				relative; /* for ie6 */
			margin-left:			100px;
			padding:				1em 1em 2em 1em;
		}
			.page-content {
				display:				none;
			}
	
	/*  editable-text
	--------------------------------------------------------------------------------------*/
	
		.editable-text {
			display:			inline-block;
			color:				#333;
			border:				1px solid #ccc;
			font-size:			14px;
			line-height:		16px;
		}
			.editable-text a,
			.editable-text a:link,
	    	.editable-text a:visited,
	    	.editable-text a:hover,
	    	.editable-text a:active {
				padding:			3px;
				color:				#333;
				text-decoration:	none;
				display:			block;
				zoom:				1;
				outline:			0;
				background-color:	#fff;
			}
			.editable-text a:hover {
				background-color:	#ccf;
			}
			.editable-text input {
				padding:			3px 0;
				width:				100%;
				font-family:		Arial,Helvetica,sans-serif;
				background-color:	#ccf;
				border:				0;
				margin:				0;
				outline:			0;
			}
			
	/*  combobox
	--------------------------------------------------------------------------------------*/	
		.combobox {
			display:			inline-block;
			color:				#333;
		}
			.combobox a,
			.combobox a:link,
	    	.combobox a:visited,
	    	.combobox a:hover,
	    	.combobox a:active {
	    		border:				1px solid #ccc;
				font-size:			14px;
				line-height:		16px;	    		
				padding:			3px;
				color:				#333;
				text-decoration:	none;
				display:			block;
				zoom:				1;
				outline:			0;
				background-color:	#fff;
				position:			relative;
			}
			.combobox a:hover {
				background-color:	#ccf;
			}
			.combobox a:active {
				outline:			0;
			}
				.combobox-toggle {
					position:			absolute;
					right:				5px;
					top:				0;
					display:			block;
					font-family:		Arial,Helvetica,sans-serif;
					font-size:			12px;
					line-height:		20px;
					color:				#999;
				}
				.combobox  a.combobox-has-focus .combobox-toggle {
					color:				#4D90FE;
				}				
				
				
	.option-container {
		position:			absolute;
		list-style:			none;
		top:				30px;
		width:				200px;
		margin:				0;
		padding:			0;
		background-color:	#fff;
		opacity:			0.9;
		-moz-opacity:		0.9;
		-khtml-opacity:		0.9;
		color:				#666;
		border:				1px solid #ccc;
		box-shadow:			1px 4px 9px #333;
		-moz-box-shadow:	1px 4px 9px #333;
		-webkit-box-shadow:	1px 4px 9px #333;
		filter:				alpha(opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
		-ms-filter:			alpha(opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
	}
		.option-container li {
			display:		block;
			cursor:			pointer;
			height:			30px;
			line-height:	30px;
		}
			.option-container a,
			.option-container a:link,
			.option-container a:visited {
				color:			#666;
				position:		relative;
				display:		block;
				padding:		0 10px;
				height:			30px;
				line-height:	30px;
				*cursor:		pointer;
			}
			.option-container a:hover {
				color:				#333;
				background-color:	#ccf;
				text-decoration:	none;
				*cursor:			pointer;
			}
			.current-option a,
			.current-option a:link,
			.current-option a:visited {
				color:				#e6e6ef;
				background-color:	#66f;
				text-decoration:	none;
			}			
	
	/*  Information Window
	--------------------------------------------------------------------------------------*/
		#comic-element-infomation {
			background-color:			#fff;
			position:					absolute;
			width:						100%;
		}
				#comic-element-x, #comic-element-z,
				#comic-element-y, #comic-element-a,
				#comic-element-w, #comic-element-w-percent,
				#comic-element-h, #comic-element-h-percent {
					position:			absolute;
				}
				
				#comic-element-x,
				#comic-element-y,
				#comic-element-w,
				#comic-element-h {
					left:				30px;
				}
				#comic-element-z,
				#comic-element-a {
					left:				115px;
				}
	            #comic-element-w-percent,
	            #comic-element-h-percent    {
	                left:               124px;
	            }
				#comic-element-x, #comic-element-z {
					top:				10px;
				}
				#comic-element-y, #comic-element-a {
					top:				40px;
				}
				#comic-element-w, #comic-element-w-percent {
					top:				80px;
				}
				#comic-element-h, #comic-element-h-percent {
					top:				110px;
				}
				.comic-element-attribute-label {
					display:			inline-block;
					width:				14px;
					line-height:		22px;
					color:				#666;
					text-align:			center;
					cursor:				pointer;
				}
				.comic-element-attribute-value {
					width:				40px;
					text-align:			right;
				}
		
				#comic-element-z-value,
				#comic-element-a-value {
					width:				35px;
				}
				#comic-element-w-percent-value,
				#comic-element-h-percent-value {
					width:				30px;
				}
				
				#comic-element-keep-aspect {
				    position:            absolute;
				    top:                 96px;
				    left:                100px;
				    width:               12px;
				    height:              22px;
				    font-size:           22px;
				    line-height:         22px;
				    border:              1px solid #ccc;
				}
	
	/*  Background Window
	--------------------------------------------------------------------------------------*/
			#bg-pattern,
			#select-bg-pattern-button,
			#reset-bg-pattern-button,
			#bg-color,
			#select-bg-color-button,
			#reset-bg-color-button {
				position:			absolute;
				text-align:			center;
				cursor:				pointer;
			}
			
			#bg-pattern,
			#bg-color {
				box-shadow:			1px 2px 3px #000;
				-moz-box-shadow:	1px 2px 3px #000;
				-webkit-box-shadow:	1px 2px 3px #000;
				height:				80px;
				top:				15px;
			}
			#bg-pattern {
				left:				15px;
				width:				100px;
			}
			#select-bg-pattern-button,
			#reset-bg-pattern-button,
			#select-bg-color-button,
			#reset-bg-color-button {
				border:				1px outset #666;
				height:				20px;
				top:				115px;
				line-height:		20px;
			}
			#select-bg-pattern-button {
				left:				15px;
				width:				80px;
			}
			#reset-bg-pattern-button {
				left:				95px;
				width:				20px;
			}
			
			#bg-color {
				left:				125px;
				width:				60px;
				background-color:	#66f;
			}
			#select-bg-color-button {
				left:				125px;
				width:				40px;
			}
			#reset-bg-color-button {
				left:				165px;
				width:				20px;
			}
	
	
	
	/*  Tool-box Window
	--------------------------------------------------------------------------------------*/		
			#toolbox-add-image-button,
			#toolbox-add-text-button,
			#toolbox-edit-bg-button,
			#toolbox-switch-grid,
			#toolbox-popup-help-button,
			#toolbox-post-button {
				position:				absolute;
				left:					10px;
				width:					90px;
				border:					1px outset #999;
				height:					40px;
				line-height:			40px;
				text-align:				center;
				cursor:					pointer;
				background-color:		#ccc;
				border-radius:			8px;
				-o-border-radius:		8px;
				-ms-border-radius:		8px;
				-moz-border-radius:		8px;
				-webkit-border-radius:	8px;
			}
			#toolbox-add-image-button {
				top:					10px;								
			}
			#toolbox-add-text-button {
				top:					60px;
			}
			#toolbox-edit-bg-button {
				top:					110px;
				height:					30px;
				line-height:			30px;
			}
			#toolbox-switch-grid,
			#toolbox-popup-help-button {
				top:					150px;
				height:					30px;
				line-height:			30px;
			}
			#toolbox-switch-grid {
				width:					45px !important;
			}
			#toolbox-popup-help-button {
				width:					35px !important;
				left:					65px !important;
			}
			
			#toolbox-post-button {
				top:					190px;
				height:					50px;
				line-height:			50px;
			}
	
	/*  Grid
	--------------------------------------------------------------------------------------*/
		#grid {
			width:					100%;
			height:					100%;
			position:				absolute;
			left:					0;
			top:					0;
			background-attachment:	fixed;
			background-repeat:		repeat;
			/* background-image:		url('grid.gif');　grid用イメージはgrid使用時にjsで埋め込み */
		}

/*--------------------------------------------------------------------------------------
 * 
 *  Finder
 *  
 -------------------------------------------------------------------------------------*/
	.finder-body {
		position:				relative;
		overflow:				auto;
	}
		.finder-container .loading {
			 background-position: 50% bottom;
		}
	.finder-header {
		height:					40px;
		position:				relative;
		background-color:		#333;
	}
		.finder-header ul {
			list-style:				none;
			position:				absolute;
			top:					0;
			left:					48px;
			height:					40px;
			line-height:			40px;
			padding:				0;
			margin:					0;
		}
			.finder-header li {
				position:				absolute;
				top:					0;
				left:					0;
				height:					40px;
				width:					90px;
				padding:				0;
				margin:					0;
			}
			.finder-header li a,
			.finder-header li a:link,
			.finder-header li a:visited {
				display:				block;
				height:					14px;
				font-size:				14px;
				line-height:			14px;
				padding:				16px 0 10px 20px;
				margin:					0;
				color:					#eee;
				overflow:				hidden;
			}
			.finder-header li a:hover {
				text-decoration:		none;
				background-color:		#66f;
				color:					#eee;
			}
			
			
		.finder-header .button {
			position:				absolute;
			top:					8px;
			width:					30px;
			height:					24px;
			line-height:			24px;
		}
		.finder-sidebar-switch {
			left:					8px;
		}
		.finder-style-switch {
			right:					48px;
		}
		.finder-action-switch {
			right:					8px;
		}
		
	/*  Finder Icon
	--------------------------------------------------------------------------------------*/
	.finder-icon {
		position:					relative;
		height:						74px;
		border-bottom:				1px solid #ccc;
		clear:						both;
		overflow: 					hidden; /* for webkit */
	}
	.finder-icon:hover {
		background-color:			#eee;
		cursor:						pointer;
	}
		.fnder-icon-modern .finder-icon-handle,
		.fnder-icon-modern .finder-icon-thumbnail,
		.fnder-icon-modern .finder-icon-filename,
		.fnder-icon-modern .finder-icon-summary {
			display:					table-cell;
        	vertical-align:				middle;
        	line-height:				1.3em;
	    }
	   	
	   	.finder-icon-handle {
	   		width:						20px;
	   		height:						74px;
	   	}
	   	
		.finder-icon-thumbnail {
			width:						64px;
			height:						74px;
			cursor:						pointer;
			background-repeat:			no-repeat;
			background-position:		50% 50%;
			background-image:			url('../images/sprite.gif');
		}
		
		.finder-icon .file-type-folder {
			background-position:		0 -75px;
		}
		.finder-icon .file-type-album {
		}
		.finder-icon .file-type-author {
			background-position:		-70px -75px;
		}		
		.finder-icon .file-type-comic {
			background-position:		0 -145px;
		}
		.finder-icon .file-type-cabinet {
			background-position:		-70px -145px;
		}
		.finder-icon .file-type-panel {
			background-position:		0 -215px;
		}
		.finder-icon .file-type-artist {
			background-position:		-70px -215px;
		}
		.finder-icon .file-type-balloon {
			background-position:		0 -285px;
		}
		.finder-icon .file-type-charactor {
			background-position:		-70px -285px;
		}		
		.has-thumbnail {
		}
		.fnder-icon-modern .finder-icon-filename {
			width:						200px;
			padding:					5px 10px;
			height:						64px;
			font-weight:				bold;
			color:						#333;
		}
		.fnder-icon-modern .finder-icon-summary {
			width:						300px;
			padding:					5px 10px;
			height:						64px;
			color:						#666;
		}

	/*  Finder Icon ie7-
	--------------------------------------------------------------------------------------*/
	.finder-icon a,
	.finder-icon a:link,
	.finder-icon a:visited,
	.finder-icon a:active {
		display:				block;
		height:					74px;
		text-decoration:		none;
		zoom:					1;
		cursor:					pointer;
	}
	.finder-icon a:hover {
		_background-color:		#eee;
		color:					#333;
	}
		.fnder-icon-ie7 .finder-icon-handle,
		.fnder-icon-ie7 .finder-icon-thumbnail {
        	zoom:					1;
        	line-height:			1.3em;
	    }
		.finder-icon-cell {
			display:				inline;
			zoom:					1;
		}
			.finder-icon-vertical-middle-outer {
				display:				block;
				height:					74px;
				position:				relative;
			}
			.finder-icon-ie-filename .finder-icon-vertical-middle-outer {
				width:						200px;
				font-weight:				bold;
				color:						#333;
			}
			.finder-icon-ie-summary .finder-icon-vertical-middle-outer {
				width:						300px;
				color:						#666;
			}
				.finder-icon-vertical-middle-inner {
					display:					block;
					position:					absolute;
					top:						50%;
					margin:						0 5px;
				}
					.fnder-icon-ie7 .finder-icon-filename,
					.fnder-icon-ie7 .finder-icon-summary {
							position:		relative;
							top:			-50%;
					}
					
	/*  Finder Icon Console
	--------------------------------------------------------------------------------------*/		
		.finder-icon-console {
			position:					absolute;
			top:						0;
			right:						0;
		}
			.finder-icon-console a {
				display:					block;
				width:						74px;
				height:						74px;
				border-left:				1px solid #ccc;
				float:						right;
				background-image:			url('../images/sprite.gif') !important;
				background-repeat:			no-repeat;
			}
			.finder-icon-console a:hover {
				background-color:			#ccc !important;
			}
			.finder-icon-console-action {
				background-position:		0px -355px;
			}
			.finder-icon-console-editor-apps {
				background-position:		-70px -355px;
			}
			.finder-icon-console-viewer-apps {
				background-position:		0px -425px;
			}



					