html,
body
{
	margin: 0px;
	padding: 0px;
	height: 100%;
	overflow:hidden;
 	font-size:16px;
}

body
{
	background-color:#000;
	font-size:13px;
	font-family:"Trebuchet MS", Helvetica, sans-serif;
}

*
{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	box-sizing: border-box !important;

	/*-webkit-transform: scale3d(1,1,1);*/
}


font[size="1"] { font-size:10px;}
font[size="2"] { font-size:14px;}
font[size="3"] { font-size:18px;}
font[size="4"] { font-size:24px;}
font[size="5"] { font-size:32px;}
font[size="6"] { font-size:48px;}
font[size="7"] { font-size:72px;}

.tncTemplateContent
{
	vertical-align: middle;
	margin: auto;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
}

.tncLayerParent,
.tncLayer,
.tncLayerPerspective,
.tncLayerContainer
{
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:100;
}


.tncLayerPanel
{
	position:absolute;
	width:100%;
	height:100%;
}

.tncLayerContent
{
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:100;
}

.tncLayerOverlay
{
	position:absolute;
	z-index:200;
	left:0;
	top:0;
	width:100%;
	height:100%;
	/*background-color:rgba(255, 255,255, 0.5);*/

	-webkit-transform: scale3d(1,1,1);

/*
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
*/
}



.tncWidget
{
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
		/*
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;*/

	/*
	-webkit-backface-visibility: hidden;
   	backface-visibility: hidden;	*/
}

.tncWidgetPanel
{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;

/*
	perspective: initial;

*/


	/*
	-webkit-backface-visibility: hidden;
   	backface-visibility: hidden;


   	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;*/
}

.tncWidgetFrame
{
	/*
	-webkit-backface-visibility: hidden;
   	backface-visibility: hidden;	*/

	position:absolute;
	left:0;top:0;
	height:100%;
	width:100%;
}

.tncWidgetData
{
	position:absolute;
	left:0;top:0;
	width:100%;
	height:100%;

	perspective: initial;
}


.knockoutContainer,
.knockoutSubcontainer,
.knockoutPanelParent,
.knockoutPanel
{
	position:absolute;
	left:0;top:0;
	width:100%;
	height:100%;
	/*
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;	*/
}

.knockoutPanelContent,
.knockoutContent
{
	position:absolute;
	left:0;top:0;
	height:100%;
	width:100%;

	/*
	-webkit-backface-visibility: hidden;
   	backface-visibility: hidden;
	*/
}


/*
===============================
	DRAG AND RESIZE CLASSES
===============================
*/

.jqHandle {
	position:absolute;
	background: transparent;
	z-index:300;

	left:0;
	top:0;
	bottom:0;
	right:0;

	/*
	left:5px;
	top:5px;
	bottom:6px;
	right:6px;
	*/

/*
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
*/


	border:1px solid rgb(10,10,200);
	border-radius:4px;
	background: linear-gradient(45deg, rgba(10, 10, 200, 0.4) 50%, rgba(10, 10, 200, 0.6) 50%);
	box-sizing: border-box;
}
.jqDrag
{
	cursor: move;
}

.rsE
{
	height: 15px;
	width: 15px;
	background-color: blue;
	position: absolute;
	bottom: 50%;
	right: 0;
	cursor: e-resize;
}

.rsSE
{
	height: 15px;
	width: 15px;
	background-color: blue;
	position: absolute;
	bottom: 0;
	right: 0;
	cursor: se-resize;
}
.rsS
{
	height: 15px;
	width: 15px;
	background-color: blue;
	position: absolute;
	bottom: 0;
	right: 50%;
	cursor: s-resize;
}
.rsSW
{
	height: 15px;
	width: 15px;
	background-color: blue;
	position: absolute;
	bottom: 0;
	right: 100%;
	cursor: sw-resize;
}
.rsW
{
	height: 15px;
	width: 15px;
	background-color: blue;
	position: absolute;
	bottom: 50%;
	right: 100%;
	cursor: w-resize;
}

.rsNW
{
	height: 15px;
	width: 15px;
	background-color: blue;
	position: absolute;
	bottom: 100%;
	right: 100%;
	cursor: nw-resize;
}

.rsN
{
	height: 15px;
	width: 15px;
	background-color: blue;
	position: absolute;
	bottom: 100%;
	right: 50%;
	cursor: n-resize;
}

.rsNE
{
	height: 15px;
	width: 15px;
	background-color: blue;
	position: absolute;
	bottom: 100%;
	right: 0%;
	cursor: ne-resize;
}

.sizeHandle
{
	width:12px;
	height:12px;
	margin:-6px;
	border:1px solid rgb(10,10,50);
	background-color:rgba(10,10,100,0.8);
	border-radius:2px;

	z-index:400;
}

.layerActions
{
	position:absolute;
	z-index:1000;
	right:10px;
	top:10px;
	left:auto;
	bottom:auto;
}

.layerAction
{
	margin:4px;
	padding:6px 8px 10px 10px;
	float:right;
	border:1px solid rgb(10,10,50);
	border-radius:4px;
	color:#fff;
	background-color:rgba(10,10,50,0.8);
	cursor:pointer;
}

.layerAction:hover
{
	transition: background-color 0.3s;
	background-color:rgba(100,100,100,0.6);
}

iframe.widget {
	border:0px;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

.tncLayerPanelParent {
	width:100%;
	height:100%;
}
