#commonTemplates
{
	display: none;
}

[disabled]
{
	color: lightGray
}

.TableLayout
{
	display: table;
}

.TableLayout > *
{
	display: table-row;
}

.TableLayout > * > *
{
	display: table-cell;
}

.Popup
{
	display: none;
	
	position: fixed;
	z-index: 100;
	
	max-height: 577px;	
	overflow: auto;
	border-style: solid;
	border-width: 1px;
	border-radius: 8px;
	border-color: black;
	box-shadow: 5px 5px 5px rgba(128, 128, 128, 0.5);

	padding: 4px;
	background-color: white;
	color: black;
	font-size: medium;
	font-family: Arial, Helvetica, sans-serif;
}

.Popup:focus
{
	outline: none;
}

.DragBarHighlight
{
	background-color:#eee;
	margin-bottom: 8px;
	background-image: url(../images/page_go.png);
	background-repeat: no-repeat;
	background-position: 3px 3px;
}

.PopupDrag
{
	cursor: move;
}

.PopupTitleBar
{
	min-height: 1em;
}

.PopupContent
{
	clear: both;
	max-width: 800px;
	max-height: 800px;
	overflow: auto;
}

.Popup input, .Popup textarea, .Popup select, .Popup button, .Popup keygen
{
	font-size: inherit;
}

.Popup ul.Menu
{
	margin: 0px;
	padding-left: 0px;
	
	list-style-type: none;
	text-align: left;
}

@media (max-device-width:1024px)
{
	.Popup
	{
		font-size: 24px;
	}

	.Popup input[type=checkbox]
	{
		width: 20px;
		height: 20px;
	}
}

.Popup ul.Menu > li
{
	padding: 4px;
}

@media (min-device-width:1025px)
{
	.Popup ul.Menu > li:hover
	{
		background-color: blue;
	}

	.Popup ul.Menu > li:not([disabled]):hover
	{
		color: white;
	}
}

.Popup ul.Menu > li > img
{
	vertical-align: middle;
	margin-right: 8px;
}

.Popup ul.HorizontalMenu
{
	list-style-type: none;
	padding-left: 0px;
}

.Popup ul.HorizontalMenu > li
{
	display: inline-block;
}

.Popup ul.HorizontalMenu img
{
	vertical-align: middle;
	border: 1px solid transparent;
	padding: 2px;
}

@media (min-device-width:1025px)
{
	.Popup ul.HorizontalMenu > li:hover
	{
		outline: 1px solid black;
	}
}

.PopupConfirm, .PopupCancel
{
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url(../images/close-button.png);
	background-size: contain;
	float: right;
	margin-left: 4px;
	cursor: pointer;
}

@media (max-device-width:1024px)
{
	.PopupConfirm, .PopupCancel
	{
		width: 24px;
		height: 24px;
	}
}

.Tooltip
{
	background: rgba(255, 255, 224, 0.9);
	border: 1px solid black;
	border-radius: 0px;
	box-shadow:  0.5em 0.5em 0.5em rgba(128, 128, 128, 0.25);
	font-size: xx-small;
}

.Tooltip h1
{
	font-size: small;
}

.Tooltip h2
{
	font-size: x-small;
}

.PopupBalloon
{
	background-color: #ffff80;
	border: 1px solid black;
	padding: 18px;
}

.PopupBalloon::before
{
	display: block;
	position: absolute;
	width: 20px;
	height: 20px;
	content: '';
	background-color: #ffff80;
	border: 1px solid;
	transform: rotate(45deg);
}

.PopupBalloonArrowUp::before
{
	left: calc(50% - 10px);
	top: -11px;
	border-color: black transparent transparent black;
}

.PopupBalloonArrowDown::before
{
	left: calc(50% - 10px);
	bottom: -11px;
	border-color: transparent black black transparent;
}

.PopupBalloonArrowLeft::before
{
	left: -11px;
	top: calc(50% - 10px);
	border-color: transparent transparent black black;
}

.PopupBalloonArrowRight::before
{
	right: -11px;
	top: calc(50% - 10px);
	border-color: black black transparent transparent;
}

.PopupBalloon .PopupContent
{
	clear: none;
}

.PopupBalloonButtons
{
	margin-top: 20px;
	text-align: center;
}

.PopupBalloonButtons button
{
	display: inline-block;
	font-size:70%;
	border:1px solid gray;
}

@media (min-device-width:1025px)
{
	.TooltipAuto:hover:after
	{
		display: block;
		position: absolute;
		z-index: 200;
		background: rgba(255, 255, 224, 0.9);
		border: 1px solid black;
		border-radius: 0px;
		box-shadow:  0.5em 0.5em 0.5em rgba(128, 128, 128, 0.25);
		padding: 2px;
		font-size: xx-small;
		content: attr(data-tooltip);
	
		transition-property: visibility;
		transition-delay: 1.0s;
	}
}

.WidgetTemplate
{
	display: none;
}

.Slider
{
	position: relative;
	width: 20px;
	height: 100px;
	background-color: lightGray;
	border: 1px solid black;
}

.Slider[horizontal^=t], .Slider[horizontal^=T]
{
	width: 100px;
	height: 20px;
}

.SliderHandle
{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 3px;
	background-color: white;
	outline: 1px solid black;

	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: -ms-grab;
	cursor: -o-grab;
	cursor: grab;
}

.Slider[horizontal^=t] > .SliderHandle, .Slider[horizontal^=T] > .SliderHandle
{
	width: 3px;
	height: 100%;
}

@media (max-device-width:1024px)
{
	.Slider
	{
		width: 40px;
		height: 200px;
	}

	.Slider[horizontal^=t], .Slider[horizontal^=T]
	{
		width: 200px;
		height: 40px;
	}
	
	.SliderHandle
	{
		height: 20px;
	}

	.Slider[horizontal^=t] > .SliderHandle, .Slider[horizontal^=T] > .SliderHandle
	{
		width: 20px;
	}
}

.ColorSelector
{
	-moz-user-select: none;
	-webkit-user-select: none;
	-ie-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

.ColorSelector > *
{
	margin-bottom: 4px;
}

.CselMixer > * > *
{
	padding: 4px 11px;
	text-align: center;
}

div.CselHueSaturation > div
{
	position: relative;
}

img.CselHueSaturation
{
	display: block;
	height: 151px;
}

.CselHueSaturationShader
{
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.CselHueSaturationMarker
{
	z-index: 2;
	position: absolute;
	width: 1px;
	height: 1px;
	background-color: white;
	outline: 1px solid black;
}

.ColorSelector .Slider
{
	height: 149px;
}

.CselTransparency
{
	background-image: url(../images/dot.png);
}

div.CselPalette
{
	width: 100%;
}

span.CselPalette
{
	border-radius: 25%;
	border: 1px solid black;
	padding: 4px 10px;
}

@media (max-device-width: 1024px)
{
	.CselMixer > * > *
	{
		padding: 8px 22px;
	}
	
	img.CselHueSaturation
	{
		height: 226px;
	}

	.ColorSelector .Slider
	{
		height: 224px;
	}

	span.CselPalette
	{
		padding: 12px 19.5px;
	}
}