html,body { height:100%; }

img {
	/* Silly IE...  Doesn't use bicubic by default... */
	-ms-interpolation-mode: bicubic;
  
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid darkgrey; /* Blue */
    border-radius: 50%;
    width: 240px;
    height: 240px;
    animation: spin 2s linear infinite;
   
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;

	z-index: 1000;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

#canvases
{
	width: 100%;
	height: 100%;
	
	position: relative;
}

#Canvas1
{
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	pointer-events: none;
		
	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
	
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
	
	position: absolute;
	left: 0px;
	top: 0px;
	
	z-index: -1;
}

#Canvas2
{	
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	pointer-events: none;
		
	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
	
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
	
	position: absolute;
	left: 0px;
	top: 0px;
	
	z-index: -3;
}

#Canvas3
{	
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	pointer-events: none;
		
	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
	
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
	
	position: absolute;
	left: 0px;
	top: 0px;
	
	z-index: -2
}

#Canvas4
{	
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	pointer-events: none;
		
	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
	
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
	
	position: absolute;
	left: 0px;
	top: 0px;
}

.leftside
{

}

.rightside
{
	position: relative;
	text-align: center;
	border-left: 1px solid #ccc;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
	vertical-align: top;
}

.tutorialcontent
{
	text-align: left;
	padding: 6px 12px;
}

.upperside
{

}

.lowerside
{
	vertical-align: top;
}

.form-group
{
	float: left;
	padding: 4px;
}

.formInputArea
{
	width: 200px;
}

.formTextArea
{
	width: 200px;
	height: 100px;
}

.dragbox 
{
	pointer-events: none;
    font-size: 15px;
    font-family: tahoma;
    height: 30px;
    border: 1px solid #000000;
    color: #FFFFFF;
    display: block;
	text-align: center;
	line-height: 30px;	
	background: rgb(76,76,76); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 7%, rgba(102,102,102,1) 13%, rgba(71,71,71,1) 22%, rgba(44,44,44,1) 50%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(76,76,76,1) 0%,rgba(89,89,89,1) 7%,rgba(102,102,102,1) 13%,rgba(71,71,71,1) 22%,rgba(44,44,44,1) 50%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(76,76,76,1) 0%,rgba(89,89,89,1) 7%,rgba(102,102,102,1) 13%,rgba(71,71,71,1) 22%,rgba(44,44,44,1) 50%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */

	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;	
}

.ornamentcolor
{
	display: none;
}

.hidebutton
{
	font-size: 15px;
    font-family: tahoma;
	cursor: pointer;
	font-size: 14px;
	border: 1px solid; 
	border-color : transparent ;
	height: 12px;
	line-height: 12px;
	padding: 2px;
    position: absolute;
    left: 87%;
	top: 11px;
	color: #FFFFFF;
	
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
}

.hidebutton:hover
{
	font-size: 15px;
    font-family: tahoma;
	cursor: pointer;
	font-size: 14px;
	height: 12px;
	line-height: 12px;
	padding: 2px;
    position: absolute;
    left: 87%;
	top: 11px;
	color: #FFFFFF;
	
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	
	border: 1px solid #FFFFFF; 
	background: rgb(150,150,150); 
}

#itemMenu
{
	cursor: move;
	position: absolute; 
	font-size: 20px; 
	padding: 4px;
	border: 2px solid #cccccc; 
	background-color: #f1f1f1; 
	z-index:1000;
	
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
}

@font-face {
	font-family: 'MTCORSVA';
	src: url('./MTCORSVA.eot');
	src: local('MTCORSVA'), url('./MTCORSVA.woff') format('woff'), url('./MTCORSVA.ttf') format('truetype');
}

.fontIcon
{
	float: left;
	width: 35px;
	height: 35px;
	margin: 2px;
	border: 1px solid rgba(0, 0, 0, .2);
}

.fontIcon:hover 
{
    box-shadow: 0 0 4px 1px rgba(0, 80, 220, 0.6);
	transform: scale(1.1, 1.1);
}

.fontIconWide
{
	float: left;
	width: 57x;
	height: 25px;
	margin: 2px;
	border: 1px solid rgba(0, 0, 0, .2);
}

.fontIconWide:hover 
{
    box-shadow: 0 0 4px 1px rgba(0, 80, 220, 0.6);
	transform: scale(1.1, 1.1);
}

.box 
{
  cursor: pointer;
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.box:hover 
{
    box-shadow: 0 0 4px 1px rgba(0, 80, 220, 0.6);
	transform: scale(1.1, 1.1);
}

.gold 
{
  background: #ffce23;
}

.white 
{
  background: #ffffff;
}

.black 
{
  background: #000000;
}

.iron 
{
  background: #d4d7d9;
}

.copper 
{
  background: #B87333;
}

.font 
{
  cursor: pointer;
  width: auto;
  height: auto;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 2px;
}

.font:hover 
{
    box-shadow: 0 0 4px 1px rgba(0, 80, 220, 0.6);
	transform: scale(1.1, 1.1);
}

.timesnewroman 
{
	font-family: "Times New Roman", Times, serif;
}

.arial
{
	font-family: "Arial", Helvetica, sans-serif;
}

.monotypecorsiva
{
    font-family: 'MTCORSVA' !important;
}

.metalletter
{
	cursor: pointer;
}

.range 
{
	position: relative;
	float: left;
	margin: 2px;
}

.range:hover 
{
    box-shadow: 0 0 4px 1px rgba(0, 80, 220, 0.6);
}

.increment 
{
	position: relative;
	float: left;
	margin: 2px;
	z-index: 1;
}

.centered
{
	padding-top: 10px;
	padding-bottom: 5px;
	text-align:center;
	z-index: 1;
}

.size
{
    position: relative;
	z-index: 1;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
}

.alignment
{
	cursor: pointer;
	width: 32px;
	height: 32px;
	padding: 2px;
	position: relative;
	float: left;
	z-index: 1;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
}

.alignment:hover
{
	box-shadow: 0 0 4px 1px rgba(0, 80, 220, 0.6);
}

.undraggabletext
{
	position: relative;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	pointer-events: none;
}

.shadowed 
{
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#444')";
}

.undraggable
{
	position: absolute;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
}

.undraggable2
{
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;	
}

/* Style the tabs */
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #1E3864;

	background-color: #1E3864;
	background: #0f6db7;
	background: -moz-linear-gradient(top,  #0f6db7 0%, #0e63b9 49%, #275792 52%, #2a4c88 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0f6db7), color-stop(49%,#0e63b9), color-stop(52%,#275792), color-stop(100%,#2a4c88));
	background: -webkit-linear-gradient(top,  #0f6db7 0%,#0e63b9 49%,#275792 52%,#2a4c88 100%);
	background: -o-linear-gradient(top,  #0f6db7 0%,#0e63b9 49%,#275792 52%,#2a4c88 100%);
	background: -ms-linear-gradient(top,  #0f6db7 0%,#0e63b9 49%,#275792 52%,#2a4c88 100%);
	background: linear-gradient(to bottom,  #0f6db7 0%,#0e63b9 49%,#275792 52%,#2a4c88 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f6db7', endColorstr='#2a4c88',GradientType=0 );
}

/* Float the list items side by side */
ul.tab li { float: left; }

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: #ffffff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {background-color: #1E3864;}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #1E3864;}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
	text-align: center;
}

/*Style the subtab */
ul.subtab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #1C345E;
    background-color: #2C518F;
	
}

/* Float the list items side by side */
ul.subtab li {float: left;}

/* Style the links inside the list items */
ul.subtab li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 12px 12px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 15px;
}

.subtabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
} 

/* Change background color of links on hover */
ul.subtab li a:hover {background-color: #1E3864;}

/* Create an active/current tablink class */
ul.subtab li a:focus, .active 
{
	background-color: #1E3864;
}

/* Style the list */

/*Links inside*/
ul.list li 
{
	margin: 2px;
}

ul.list li a 
{
    color: black;
	font-family: "Times New Roman", Times, serif;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
	position:absolute;
}
/* Hover */
ul.list li a:hover 
{
	font-size: 21px;
	color: darkblue;
}

.writings table 
{
    border-collapse: collapse;
}

.writings tr td
{
	border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

.writings th
{
    text-align: left;
}

/*Image stuff*/
.icons table tr td span img 
{	
	background-color: #ffffff;
    border: 2px solid #cccccc;
	border-radius: 4px;
	padding : 4px;
	width:100px;
	height:100px;
	transition: transform .25s ease;
	image-rendering: -webkit-optimize-contrast;
}

.icons table tr td span img:hover 
{
	z-index: 1;
    box-shadow: 0 0 4px 1px rgba(0, 80, 220, 0.6);
	transform: scale(1.25, 1.25);
}

.listtd
{
	vertical-align: top;
	width: 200px;
}

.itemicons
{
	object-fit: contain;
	font-family: 'object-fit: contain;';
	
	background-color: #ffffff;
	border: 2px solid #cccccc;
	border-radius: 4px;
	padding : 4px;
	width:100px;
	height:100px;
	transition: transform .25s ease;
	image-rendering: -webkit-optimize-contrast;
	margin-left:4px;
}

.itemicons:hover
{
	z-index: 1;
    box-shadow: 0 0 4px 1px rgba(0, 80, 220, 0.6);
	transform: scale(1.5, 1.5);
}

.materialicons
{
	background-color: #ffffff;
	border: 2px solid #cccccc;
	border-radius: 4px;
	padding : 4px;
	width:100px;
	height:100px;
	transition: transform .25s ease;
	image-rendering: -webkit-optimize-contrast;
	margin-left:4px;
}

.materialicons:hover
{
	z-index: 1;
    box-shadow: 0 0 4px 1px rgba(0, 80, 220, 0.6);
	transform: scale(1.5, 1.5);
}

.templateicons
{
	object-fit: contain;
	font-family: 'object-fit: contain;';
	
	background-color: #ffffff;
	border: 2px solid #cccccc;
	border-radius: 4px;
	padding : 4px;
	width:150px;
	height:150px;
	transition: transform .25s ease;
	image-rendering: -webkit-optimize-contrast;	
}

.templateicons:hover
{
	z-index: 1;
    box-shadow: 0 0 4px 1px rgba(0, 80, 220, 0.6);
	transform: scale(2.0, 2.0);
}

.bottominfo
{
	position: fixed;
	bottom: 0;
	font-size: 12px;
	text-align: center;
	bottom: 0; 
	color: white;
	border: 1px solid #1C345E;
    background-color: #2C518F;
	padding: 2px;
	z-index: 1001
}