/*
	yellow #ffff99
	blue #008cff
*/
*
{
	font-size: 10px;
	font-family: 'Raleway', arial;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

body, html
{
	height: 100%;
	background: #FFFFFF url(../images/bg-light.jpg) repeat left top;
}
	.outerCanvas
	{
		text-align: center;
	}
		.outerCanvas.fullpage
		{
			height: 100%;
		}
	.innerCanvas
	{
		width: 1200px;
		margin: 0 auto;
		text-align: left;
	}
		.innerCanvas.fullWidth
		{
			width: 100%;
			/* reset */
		}

		.outerCanvas.fullpage .innerCanvas
		{
			height: 100%;
		}

	#welcomeFrame, #videoFrame, #videoDetailFrame, #infoFrame, #copyrightFrame
	{

	}
	#welcomeFrame
	{

	}
		.welcomePanel
		{

			background: #dfdfdf url(../images/welcome.jpg) no-repeat center top;
			background-size: cover;
			text-align: center;
		}
			.welcomeContent
			{

			}
				.welcomeTitle
				{
					padding-top: 150px;
					line-height: 40px;
				}
					.welcomeTitle img
					{
						max-width: 100%;
						height: auto;
						margin-bottom: 30px;
					}
				.welcomeInfo
				{
					width: 720px;
					max-width: 100%;
					margin: 0 auto;
					padding: 30px 0 150px 0;
					line-height: 32px;
					text-shadow: 1px 1px #ffffff;
				}
	#videoFrame
	{

	}
		.videoPanel
		{
			height: 100%;
		}
	#videoDetailFrame
	{

	}
		#videoDetailFrame .innerCanvas
		{

		}
			.videoDetail
			{
				padding: 30px 0 150px 0;
			}
				.videoNumber
				{
					padding-top: 10px;
					line-height: 25px;
				}
				.videoTitle
				{
					padding-top: 15px;
					line-height: 45px;
				}
				.videoSubtitle
				{
					padding-top: 15px;
					line-height: 35px;
				}
				.videoInstruction
				{
					padding-top: 30px;
					line-height: 40px;
				}
				.videoNote
				{
					padding-top: 30px;
					line-height: 25px;
				}
					.videoNote span
					{
						white-space: pre-line;
					}

	#infoFrame
	{
		background-color: #51b7f2;
	}
		#infoFrame .innerCanvas
		{

		}
			.infoPanel
			{
				padding: 90px 0 90px 0;
			}
				.infoTitle
				{
					text-align: center;
				}
				.infoContent
				{
					padding-top: 15px;
					line-height: 30px;
				}
	#copyrightFrame
	{

	}
		#copyrightFrame .innerCanvas
		{
			background-color: #05334b;
			padding: 30px 0;
			line-height: 25px;
			text-align: center;
		}
			#copyrightFrame .innerCanvas span
			{
				display: block;
				padding: 0 30px;
			}
	.post
	{
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		background-repeat: no-repeat;
		background-position: right center;
		background-size: cover;
	}
	.outerCanvas:nth-child(odd) .post
	{
		flex-direction: row-reverse;
	}
		a.postItemLink, a.postItemLink:link, a.postItemLink:visited, a.postItemLink:active
		{
			flex: 0 0 calc(50% - 100px - 90px - 2px);
			margin-top: 120px;
			margin-left: 100px;
			margin-right: 0;
			padding: 45px 45px;
			border: 1px solid #ffffff;
			background-color: rgba(255,255,255,0.85);
		}
		a.postItemLink:hover
		{

		}

		.outerCanvas:nth-child(odd) .post a.postItemLink
		{
			margin-left: 0;
			margin-right: 100px;
		}
			.postImage
			{
				display: none;
			}
				.postImage img
				{
					max-width: 100%;
				}
			.postInfoHeader
			{
				margin: 40px 0 20px 0;
				padding: 0 0 0 20px;
				border-left: 1px solid #008cff;
				text-shadow: 0 0 4px #ffffff;
			}
				.postInfoTitle
				{
					line-height: 45px;
				}
				.postInfoSubtitle
				{
					padding-top: 20px;
					line-height: 20px;
				}
				.postInfoDate
				{
					line-height: 20px;
				}
			.postInfoContent
			{
				padding-top: 20px;
				line-height: 25px;
				text-shadow: 0 0 10px #ffffff;
			}
			.postInfoLink
			{
				padding-top: 20px;
				text-align: right;
			}
				.postInfoLink span
				{
					display: inline-block;
					padding: 10px 20px 10px 20px;
					border: 1px solid #008cff;
					background-color: #008cff;
					text-align: right;
				}

.videoWrapper
{
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

.generatorList
{
	text-align: left;
}
	.generatorItem
	{
		display: flex;
		flex-flow: row nowrap;
		align-items: stretch;
		padding: 5px 0;
	}
		.generatorItemLabel
		{
			flex: 0 0 calc(200px + 30px);
			padding-right: 30px;
		}
		.generatorItemValue
		{
			flex: 0 0 calc(100% - (200px + 30px));
		}
			.generatorSectionList
			{

			}
				.generatorSectionItem
				{
					margin-top: 30px;
					padding: 30px 0 30px;
					border-top: 1px solid #a0a0a0;
				}
					.generatorSectionItemTitle
					{
						text-align: center;
						padding: 30px 0 30px 0;
					}
					.generatorSectionDetailItem
					{
						display: flex;
						flex-flow: row nowrap;
						align-items: stretch;

						padding: 10px 0;
					}
						.generatorSectionDetailItemLabel
						{
							flex: 0 0 calc(200px + 30px);
							padding-right: 30px;
						}
						.generatorSectionDetailItemValue
						{
							flex: 0 0 calc(100% - (200px + 30px));
						}
	.generatorAction
	{
		margin-top: 30px;
		padding-top: 30px;
		border-top: 1px solid #a0a0a0;
	}
			input.inputText, textarea.inputTextarea, select.inputSelect
			{
				width: calc(100% - 30px);
				padding: 0 15px;
				line-height: 30px;
				font-size: 15px;
				
			}
			input.inputText
			{
				height: 30px;
			}
			textarea.inputTextarea
			{
				height: 120px;
			}
			select.inputSelect
			{
				height: 30px;
			}
			input.inputButton
			{
				margin-left: 30px;
				padding: 15px 30px;
				line-height: 25px;
				font-size: 20px;
				cursor: pointer;
			}
			
	.generatorResult
	{
		margin-top: 30px;
		padding: 15px 15px;
		text-align: left;
		border: 1px solid #404040;
		overflow: auto;
		white-space: pre;
	}