.sandbox
	{
	box-sizing: border-box; position: relative; width: 100%; height: 300px; text-align: left; font-size: 0.8rem;
	resize: vertical; overflow: hidden; min-width: 440px; min-height: 80px;
	}

.sandbox label:hover
	{
	user-select: none;
	}

.sandbox .tools
	{
	height: 30px; line-height: 30px; margin-bottom: 4px;
	text-align: right;
	}

.sandbox .tools button,
.sandbox .tools label
	{
	vertical-align: middle; cursor: pointer; margin: 0 2px; font-size: inherit;
	}

.sandbox .tools *:last-child
	{
	margin-right: 0;
	}

.sandbox .tools button
	{
	padding: 0 10px; height: 100%;
	}

.sandbox .panels
	{
	position: relative; height: calc(100% - 30px - 4px);
	}

/* TODO */
.sandbox .panel
	{
	border: 1px solid #CCC;
	}

.sandbox .codePanel
	{
	position: absolute; left: 0; top: 0; width: calc(50% - 3px); height: 100%;
	}

.sandbox:not(.previewing) .codePanel
	{
	width: 100%;
	}

.sandbox .codePanel .editor
	{
	position: relative; width: 100%; height: 100%;
	}

.sandbox .previewPanel
	{
		position: absolute; right: 0; top: 0; width: calc(50% - 3px); height: 100%;
		transition: opacity .5s;
	}

.sandbox:not(.previewing) .previewPanel
	{
	visibility: hidden; opacity: 0;
	}

.sandbox .previewPanel .preview
	{
	position: relative; width: 100%; height: 100%;
	}

.sandbox .previewPanel iframe
	{
	width: 100%; height: 100%; border: none; background: #FFF;
	}

.sandbox.autoUpdate .btnUpdatePreview,
.sandbox.previewSynced .btnUpdatePreview,
.sandbox.previewing .btnPreview,
.sandbox:not(.previewing) .btnHidePreview,
.sandbox:not(.previewing) .btnUpdatePreview,
.sandbox:not(.previewing) .lblAutoUpdate
	{
	display: none;
	}