@charset "utf-8";

/*  
--------------------------------------------------------------------------------------*/
	
	#panelContainer {
		margin:			0 auto;
		_text-align:	left; /* ie5.5+6 */
		
	}					

/*  Panel
--------------------------------------------------------------------------------------*/
	.panel-wrapper {
		margin:			10px 0;
		position:		relative;
	}
		.panel {
			border:			2px solid #333;
			overflow:		hidden;
			position:		relative;
			top:			0;
			left:			0;
		}
			.panel img,
			.panel .speach {
				position:		absolute;
				margin:			0;
			}
			
/*  Panel > speach
--------------------------------------------------------------------------------------*/
			.speach {
				text-align:			center;
				display:			table;
			}
				.speach span {
					display:		table-cell;
					vertical-align:	middle;
					padding:		16.66%;
				}
			
		/* fix for ie */	
			.speach table,
			.speach tbody,
			.speach tr,
			.speach td {
				width:				100%;
				height:				100%;
				border:				0;
				padding:			0;
				margin:				0;
				text-align:			center;
				vertical-align:		middle;
			}
			.speach td {
				padding:			16.66%;
			}
				

/*  Panel > tooltip contain Image's Title & Author
--------------------------------------------------------------------------------------*/
		.tooltip-container {
			font-size:			12px;
			position:			absolute;
			top:				0;
			left:				0;
			*width:				200%; /* ie7 */
			_width:				200%; /* ie5.5+6 */
		}
			.tooltip {
				position:				absolute;
				color:					#999;
				background-color:		rgba( 255, 255, 255, 0.8);
				border:					1px solid #999;
				padding:				1em 2em;
				border-radius:			10px;
				-moz-border-radius:		10px;
				-opera-border-radius:	10px;
				-webkit-border-radius:	10px;
				box-shadow:				2px 2px 1px #999;
				-moz-box-shadow:		2px 2px 1px #999;
				-opera-box-shadow:		2px 2px 1px #999;
				-webkit-box-shadow:		2px 2px 1px #999;
			}
			.image-shadow {
				position:				absolute;
				margin:					0;
			}
			
		/* fix for ie */
			.tooltip {
				*background-color:		#fff;
				_background-color:		#fff;		
			}
			html>/**/body .tooltip {  
				background-color/*\**/:	#fff\9;  /* ie8(ie8 mode) */
			}
	
	/* hover */
		.tooltip-container a:hover,			
		.tooltip-container:hover {
			z-index:					9999;
			_zoom:						1; /* ie5.5+6 */
		}
			.tooltip-container a:hover .image-shadow,
			.tooltip-container:hover .image-shadow {
				border:					2px solid #666;
			}
			.tooltip-container a:hover .tooltip,				
			.tooltip-container:hover .tooltip {
				background-color:		#ffc;
				border-color:			#333;
				color:					#333;
				box-shadow:				2px 2px 3px #666;
				-moz-box-shadow:		2px 2px 3px #666;
				-opera-box-shadow:		2px 2px 3px #666;
				-webkit-box-shadow:		2px 2px 3px #666;
			}

	/* fix for ie */
		.tooltip-container a {
			text-decoration:			none; /* ie6 */
			color:						#333; /* ie6 */						
		}						
	
		.tooltip-container table,
		.tooltip-container tbody,
		.tooltip-container tr,
		.tooltip-container td {
			width:			100%;
			height:			100%;
			border:			0;
			padding:		0;
			margin:			0;
			position:		relative; /* ie5.5でなぜかtooltipがhoverで消えるのを防ぐ */
		}					
