.canvasLayers {
	position:absolute;
	top: 0;
	left: 0;
}

#attributes {
	z-index: 1;
}

#pixels {
	z-index: 2;
}

#grid {
	z-index: 3;
}

#TracingImage {
	z-index: 200;
}

.shapePreview {
	z-index:200;
}

.attributeBlock {
	width: 32px;
	height: 32px;
	background-color: #D7D7D7;
	position: absolute;
	border:1px solid #ccc;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.normalAttributeBlock {
	border:1px solid #ccc;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.pixel {
	width: 4px;
	height: 4px;
	background-color: transparent;
	position: absolute;
}


.WindowTitle, p, h2 {
	font-smooth: never;
	-webkit-font-smoothing : none;
}

.Hidden {
	display: none;
}


.Window {
	border-radius: 0.02px;
	-webkit-box-shadow: 2px 2px 0px 0px #000000,
						4px 4px 0px 0px #FFFFFF,
						0px 0px 0px 2px #FFFFFF;
						
	box-shadow: 2px 2px 0px 0px #000000,
				4px 4px 0px 0px #FFFFFF,
				0px 0px 0px 2px #FFFFFF;
}


#outputWindow {
	background-image: url("../Resources/loadingscreen.gif");
}

.imageIcon {
	cursor: pointer;
}

.windowTitle {
	cursor: grab;
}

.initiallyHidden {
	display:none;
}

.icon {
	shape-rendering: crispEdges;
}

.drawPreview1 {

	animation: colorchange1 1s linear infinite;
	-webkit-animation: colorchange1 1s linear infinite;
}


.drawPreview2 {	
	animation: colorchange2 1s linear infinite;
	-webkit-animation: colorchange2 1s linear infinite;
}

@keyframes colorchange1
{
	0%		{background: black;}
	25%		{background: white;}
	50%		{background: black;}
	75%		{background: white; }
	100%	{background: black;}
}
    
    
@-webkit-keyframes colorchange1 /* Safari and Chrome - necessary duplicate */
{
	0%		{background: black;}
	25%		{background: white;}
	50%		{background: black;}
	75%		{background: white; }
	100%	{background: black;}
}

@keyframes colorchange2
{
	0%		{background: white;}
	25%		{background: black;}
	50%		{background: white;}
	75%		{background: black; }
	100%	{background: white;}
}
    
    
@-webkit-keyframes colorchange2 /* Safari and Chrome - necessary duplicate */
{
	0%		{background: white;}
	25%		{background: black;}
	50%		{background: white;}
	75%		{background: black; }
	100%	{background: white;}
}

.pixelPreview {
	background-color: black !important;
}

.attributePreview {
	background-color: #D7D7D7 !important;
}

#PixelTwiddler {
	border:1px solid #000;
	z-index: 201;
	/*border-bottom:1px solid #000;*/
}

.loupePixel {
	width:8px;
	height: 8px;
	position: absolute;
	border-top:1px solid #cccccc;
	border-left:1px solid #cccccc;
	box-sizing: border-box;
}

.loupeLeft {
	border-left:1px solid #000000;
}

.loupeBottom {
	border-top:1px solid #000000;
}

#Loupe {
	-webkit-box-shadow: 0px 0px 0px 2px #ffffff; 
	box-shadow: 0px 0px 0px 2px #ffffff;
	z-index: 200;
}

.ui-slider-horizontal {
	height: 4px !important;
	background-color: #00ffff !important;
	border:1px solid #000000 !important;
	box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
}


.ui-slider-handle {
	background: white !important;
	border:2px solid #000000 !important;
	background-color: #ffff00 !important;
	width:12px !important;
	height:12px !important;
	box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
}

#DraggableShape {
	box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    z-index:202;
}