@charset "UTF-8";

/* pettanR system.css
 *   version 0.5.38
 * 
 *   author:
 *     itozyun
 */

/*  Reset
--------------------------------------------------------------------------------------*/
	html, body {
		margin:			0;
		padding:		0;
		height:			100%;
	}
	/* この指定がないと ie で  Util.getAbsolutePosition が狂う  body { font-family:	"MS PGothic", "MS Gothic" } */
	body {
		font-family:	"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS PGothic", Osaka, "MS Gothic", Gothic, sans-serif; 
	}
	
	p {
		text-shadow:	#000 0 0 0;/* for Safari */ 
		-moz-opacity:	0.99;/* for Firefox */ 
	}

	/* http://e2designer.seesaa.net/article/152168876.html */
	/* http://perishablepress.com/press/2010/06/01/wrapping-content/ */

	.break-word {
		white-space: pre;           /* CSS 2.0 */
		white-space: pre-wrap;      /* CSS 2.1 */
		white-space: pre-line;      /* CSS 3.0 */
		white-space: -pre-wrap;     /* Opera 4-6 */
		white-space: -o-pre-wrap;   /* Opera 7 */
		white-space: -moz-pre-wrap; /* Mozilla */
		white-space: -hp-pre-wrap;  /* HP Printers */
		word-wrap:   break-word;    /* IE 5+ */
	}
	
	/* remember to define focus styles! */
	:focus { outline: 0;}
	
	/* http://web.archive.org/web/20100204222112/http://honoo-no.com/creators/2008/02/14_211120.html */
	textarea, input {
		font-family: "MS PGothic", Osaka, "MS Gothic", "ヒラギノ角ゴ Pro W3", sans-serif;
	}
	
	
	a:link { color:#008;}
	a:visited { color: #505;}
	a { text-decoration: none;}
	
	a:hover {
		text-decoration:	underline;
		color:				#f60;
	}

	/*  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( "../images/opacity0.gif" ) fixed repeat;
		}
	
/*  ClearFix
--------------------------------------------------------------------------------------*/
.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/*  UIForm
--------------------------------------------------------------------------------------*/
	.uiform-invisible {
		position     : absolute;
		top          : 0;
		left         : 0;
	}
		.uiform-invisible * {
			display      : none;
			position     : absolute;
		}
			.ui-fileinput-wrapper,
			.uiform-file {
				border-style:		solid;
				border-width:		1px;
				font-size:			14px;
				line-height:		2em;
				height:				2em;
				border-color:		#666 #bbb #ccc #777;
				display:			block;
				color:				#333;
				padding:			3px;
				overflow:			hidden;
				zoom         : 1;
			}
			.uiform-invisible .ui-fileinput-wrapper input {
				opacity          : 0.5;
				border           : 0;
				display          : block;
				position         : absolute;
				top              : -5px;
				right            : -10px;
				font-size        : 999px;
				line-height      : 1em;
				color            : #fff;
				background-color : transparent;
				cursor           : pointer;
				/*padding          : 999px;*/
			}
			.pettanr-ActiveX-enabled .uiform-invisible .ui-fileinput-wrapper input {
				filter:				alpha( opacity=50 );
				-ms-filter:			alpha( opacity=50 );
			}

/*  Button
--------------------------------------------------------------------------------------*/
	.button {
		border-width:			1px;
		border-style:			solid;
		border-color:			#ccc #bbb #aaa;
		background:				#E3E3E3;
		background:				-moz-linear-gradient(center top , #F9F9F9, #E3E3E3);
		background:				-webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#E3E3E3));
		color:					#666;
		font-weight:			bold;
		text-align:				center;
		cursor:					pointer;
		overflow:				hidden;
		height:					30px;
		line-height:			30px;
		border-radius:			3px;
		-o-border-radius:		3px;
		-ms-border-radius:		3px;
		-moz-border-radius:		3px;
		-webkit-border-radius:	3px;
	}
	.button-hover,
	.ui-button-hover {
		color:					#333;
		border-color:			#999 #888 #777;
	}
	.button-has-focus {
		border-color:			#4D90FE;
	}
	.button-disabled {
		background:				#f6f6f6;
		background:				-moz-linear-gradient(center top , #fcfcfc, #f0f0f0);
		background:				-webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f0f0f0));
		border-color:			#eee #ddd #ccc;
		color:					#ccc;
	}

	/*  editable-text
	--------------------------------------------------------------------------------------*/
		#ui-textinput {
			position:			absolute;
			outline:			0;
			padding:			3px 0;
			background-color:	#aDf0FE;
			margin:				0;
			border-color:		#4D90FE;
		}
		#ui-textinput,
		.editable-text {
			border-style:		solid;
			border-width:		1px;
			font-size:			14px;
			line-height:		16px;		
		}
		.editable-text {
			border-color:		#666 #bbb #ccc #777;
			display:			inline-block;
			color:				#333;
			zoom:				1;
			background-color:	#fff;
			padding:			3px;
		}
		.ui-inpittext-hover .editable-text {
			border-color:		#4D90FE;
		}
			
	/*  combobox
	--------------------------------------------------------------------------------------*/	
		.combobox {
			display:			inline-block;
			color:				#333;
		}
			.combobox a,
			.combobox a:link,
	    	.combobox a:visited,
	    	.combobox a:hover,
	    	.combobox a:active {
				border-style:		solid;
				border-width:		1px;
	    		border-color:		#666 #bbb #ccc #777;
				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;
				}
		.ui-combobox-hover .combobox a {
			border-color:		#4D90FE;
		}
		.ui-combobox-hover .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;
			}
			a.combobox-option-current,
			a.combobox-option-current:link,
			a.combobox-option-current:visited {
				color:				#e6e6ef;
				background-color:	#66f;
				text-decoration:	none;
			}
			


/*  Loading
--------------------------------------------------------------------------------------*/
	.loading {
		background-image:		url( ../images/loading.gif);
		background-position:	50% 50%;
		background-repeat:		no-repeat;
	}
	.error {
		background-image:		url( ../images/error.png);
		background-position:	50% 50%;
		background-repeat:		no-repeat;
	}




/*  Noscript Alert
--------------------------------------------------------------------------------------*/
	#noscript-alert {
		border-left:		1px solid #666;
		display:			block;
		text-align:			center;
		color:				red;
		font-weight:		bold;
		font-size:			12px;
		line-height:		12px;
		padding:			11px 0 7px;
	}

/*--------------------------------------------------------------------------------------
 * 
 *  home
 *  
 -------------------------------------------------------------------------------------*/
	#home-root {
		position:	absolute;
		top:		0;
		left:		0;
		width:		100%;
		height:		100%;
	}
		#home-tail-container {
			position:	absolute;
			padding:	20px;
		}
			.tail-wrapper {
				width:		150px;
				height:		150px;
				float:		left;
				margin:		0 10px 10px 0;
				overflow:	hidden;
				cursor:		pointer;
			    position:   relative;
			}
			.tail-wrapper h2 {
				position:		absolute;
				bottom:			10px;
				left:			20px;
				width:			110px;
				overflow:		hidden;
				color:			#FFF;
				font-size:		14px;
				line-height:	1.3;
				font-weight:	normal;
				font-family:	Segoe UI,Tahoma,Arial,Verdana,sans-serif;
			}

/*--------------------------------------------------------------------------------------
 * 
 *  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( "../images/black_50pct.png" )　repeat 0 0;
			_background:		url( "../images/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;
		}
		

/*--------------------------------------------------------------------------------------
 * 
 *  Finder
 *  
 -------------------------------------------------------------------------------------*/
	.finder-body {
		position:				absolute;
		overflow:				hidden;
	}
		.finder-container .loading {
			 background-position: 50% bottom;
		}
		
	.finder-path {
		height:					40px;
		position:				relative;
		background-color:		#484848;
	}
		.finder-path div {
			position:				absolute;
			top:					0;
			left:					0;
			overflow:				hidden;
			width:					90px;
			height:					40px;
			font-size:				14px;
			line-height:			40px;
			padding:				0 0 0 15px;
			margin:					0;
			color:					#eee;
			background-image       : url( ../images/finder_path_shadow.gif );
			background-position    : 0 40px;
			background-repeat      : repeat-y;
		}
		.finder-path-hover {
			background-color:		#66f !important;
			background-position    : 0 0 !important;
			color                  : #fff;
		}
		
	/*  Finder Icon
	--------------------------------------------------------------------------------------*/
	.finder-icon {
		position:					absolute;
		left:						0;
		height:						74px;
		border-bottom:				1px solid #ccc;
		overflow: 					hidden; /* for webkit */
	}
	.finder-icon-hover {
		background-color:			#eee;
	}
	.finder-icon-modern {
		display:					table;
		table-layout:				fixed;
	}
		.fnder-icon-modern div {
			display:					table-cell;
        	vertical-align:				middle;
        	line-height:				1.3em;
	    }
	   	
	   	.finder-icon-handle {
	   		width:						20px;
	   		height:						74px;
	   	}
	   			
		.finder-icon-down {
			font-size:					40px;
			line-height:				74px !important;
			color:						#999;
			position:					absolute;
			right:						0;
			top:						0;
		}
		.finder-icon-down-hover {
			color:						#111;
		}
		.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-
	--------------------------------------------------------------------------------------*/
		.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%;
					}
					
	/*  File Icon
	--------------------------------------------------------------------------------------*/
		.file-icon div {
			width:						64px;
			height:						74px;
			cursor:						pointer;
			background-repeat:			no-repeat;
			background-position:		50% 50%;
			background-image:			url('../images/sprite.gif');
		}
		.file-icon .file-type-folder {
			background-position:		0 -75px;
		}
		.file-icon .file-type-album {
		}
		.file-icon .file-type-author {
			background-position:		-70px -75px;
		}		
		.file-icon .file-type-comic {
			background-position:		0 -145px;
		}
		.file-icon .file-type-cabinet {
			background-position:		-70px -145px;
		}
		.file-icon .file-type-panel {
			background-position:		0 -215px;
		}
		.file-icon .file-type-artist {
			background-position:		-70px -215px;
		}
		.file-icon .file-type-balloon {
			background-position:		0 -285px;
		}
		.file-icon .file-type-charactor {
			background-position:		-70px -285px;
		}		
		.has-thumbnail {
		}
					
	/*  Finder Detail
	--------------------------------------------------------------------------------------*/
	.finder-detail {
		position:					absolute;
		left:						0;
		top:						0;
		background-color:			#e6e6e6;
	}