/*
 * pettanR
 * 
 *   work.css
 * 
 *   version 0.2.0
 *
 */
	
/*  View Container
--------------------------------------------------------------------------------------*/	
	.view-container {
		display:			none;
		position:			absolute;
		left:				0;
		top:				0;
		width:				100%;
		height:				100%;
	}

/*  Overlay
--------------------------------------------------------------------------------------*/
	#overlay-container,
	#overlay-shadow {
		position:			absolute;
		left:				0;
		top:				0;
		width:				100%;
		height:				100%;
		overflow:			hidden;
	}
		#overlay-shadow {
			background-color:	#000;
			opacity:			0.5;
			-moz-opacity:		0.5;
			filter:				alpha(opacity=50);
			-ms-filter:			alpha(opacity=50);
		}
		.h2c-ActiveX-disabled #overlay-shadow {
			
		}
		
		#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;
			border-radius:			5px;
			-o-border-radius:		5px;
			-ms-border-radius:		5px;
			-moz-border-radius:		5px;
			-webkit-border-radius:	5px;
		}

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

	}


/*--------------------------------------------------------------------------------------
 * 
 *  Editor
 *  
 -------------------------------------------------------------------------------------*/
	#editor {
		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-gruop-wrapper {
			position:			absolute;
			top:				0;
			left:				0;
		}
			#image-icon-container {
				position:			absolute;
				top:				0;
				left:				0;
				height:				200px;
				width:				100%;
				background-color:	#fff;
				border:				#fff solid;
				border-width:		0;				
			}
			#image-gruop-button {
				width:			200px;
				position:		absolute;
				left:			0;
				bottom:			-40px;
				_bottom:		0;
			}
			.image-gruop-item {
				width:			150px;
				height:			200px;
				position:		absolute;
				top:			0;
				left:			0;
				text-align:		center;
			}
			.image-gruop-item .reversible-image-container {
				width:			150px;
				height:			200px;
			}
			.image-gruop-item .reversible-image-container img {
				width:			100%;
				height:			100%;
			}
			.image-gruop-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;
		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:			11px;
							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;
			filter:				alpha(opacity=70);
			-ms-filter:			alpha(opacity=70);
		}
		#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-border {
		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-'px' by js */
		*background-color:	#fff;
		filter:				alpha(opacity=0);
	}
	html>/**/body #mouse-operation-catcher {  
		background-color /***/:		#fff\9;  
		-ms-filter /***/:			alpha(opacity=0)\9;
	} 
	/*
	 * ieでは、背景を設定しないと、mouse-operation-catcherが働かない。
	 * activeX有効の場合は背景を着色してfilterで透明に。
	 * activeX無効の場合は透明gifを使用
	 * background:			url(4x4.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%;
		}
		#comic-element-resizer-left {
			top:				50%;
			left:				-5px;
		}
		#comic-element-resizer-right {
			top:				50%;
			right:				-5px;
		}
		#comic-element-resizer-bottom {
			bottom:				-5px;
			left:				50%;
		}
		#comic-element-resizer-top-left {
			top:				-5px;
			left:				-5px;
		}
		#comic-element-resizer-top-right {
			top:				-5px;
			right:				-5px;
		}
		#comic-element-resizer-bottom-left {
			bottom:				-5px;
			left:				-5px;
		}
		#comic-element-resizer-bottom-right {
			bottom:				-5px;
			right:				-5px;
		}		
/*  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(icons.gif);
				background-repeat:		no-repeat;
				background-position:	0 0;
				cursor:					pointer;
			}
			#hide-text-tail-button {
				background-position:	-25px -25px;
			}
			#change-image-button,
			#change-text-style-button {
				background-position:	-25px 0;
			}			
			#layer-back-button,
			#back-text-button {
				background-position:	-50px 0;
			}
			#layer-forward-button,
			#forward-text-button {
				background-position:	-50px -25px;
			}
			#delete-image-button,
			#delete-text-button {
				background-position:	0 -25px;
			}
		
	.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;
		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;
			overflow:				hidden;
		}

		.window-resize-button {
			position:				absolute;
			bottom:					0;
			right:					0;
			border-bottom:			20px solid #aaa;
			border-left:			20px solid transparent;
			_border-left:			20px solid #fff;
			line-height:			0;
			height:					0;
			width:					0;
			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;
				}
				.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 2em;
			}
				.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;
			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;
		}


/*  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;
				*line-height:		22px; /* ie用 input周りのサイズあわせ、よく分からない。 */
				color:				#666;
				text-align:			center;
			}
			.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で埋め込み */
	}

