p{font-size:12px;}
p.hide{display:inline-block;margin:30px 0px;background:#5ca7f2;padding:5px;border:1px solid #dddddd;border-radius:3px;cursor:pointer}

img { 
         
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
  
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
   
    }



/*navingation panel*/
div.contextPanelNavigationBar{display:inline-block;width:3%;height:auto; background-color:#1e2b36;vertical-align:top;border-radius:5px 0px 0px 5px;margin:.5% 0 0 0 ;padding-top:5px;padding-bottom:5px;}
	div.panelNavBox{width:100%;background:#1e2b36;text-align:center;cursor:pointer;padding-top:10px; padding-bottom:10px;border-bottom:0px solid #ffffff;color:#51b1ff;font-size:11px;}
		div.navHover{}
		div.navHover:hover{background-color:#28465f;}
	div.panelNavBox img{width:20%;display:block;margin:2px auto 2px auto;}





div.contextPanelContainer{display:inline-block;width:14%;height:96%;border:1px solid #cccccc;vertical-align:top;border-radius:0px 8px 8px 8px;background:#ffffff;margin-top:.5%;padding-top:4px;}
	
div.contextPanel{height:94%;display:none;width:94%;padding:3% 3%;}



div#canvasContainer{display:inline-block;width:81%;background:#8895a5; border:0px solid #000000;height:99.8%}

/* WORD INSPECTOR STYLES*/

div#spritesheetInspector{width:19%;height:98%;background:#ffffff;border:1px solid #cccccc;position:absolute;z-index:1000;right:10px; top:10px;overflow-y:auto; border-radius:8px 8px 8px 8px;}
div#spritesheetInspector .titleBar{width:98%;padding:1% 1% 1% 1%;background:blue;}
div#spritesheetInspector p{font-size:12px; padding:0px;margin:5px;}
div#spritesheetInspector p.title{font-size:13px;color:#111111}
div#spritesheetInspector .catagory{width:95%;padding:2% 2% 2% 2%;background:#ffffff;border-bottom:1px solid #dddddd;color:#555555;}
label#appendFramesButton{padding:2px;}

div#frameInspector{width:15%;max-height:80%;background:#ffffff;border:1px solid #cccccc;position:absolute;z-index:1100;right:20%; top:10px;overflow-y:auto; border-radius:8px 8px 8px 8px;}
div#frameInspector p.title{font-size:15px;color:#222222}
div#frameInspector .catagory{width:95%;padding:1% 2% 1% 2%;background:#ffffff;border-bottom:0px solid #cccccc;color:#555555;}
div#frameInspector .titleBar{width:98%;padding:1% 1% 1% 1%;background:#ffffff;}
div#frameInspector p{font-size:13px; padding:0px;margin:5px;word-wrap: break-word}


/*Stadard dialog boxes*/
div.dialogBox{width:50%;left:25%;z-index:2001;position:absolute; top:10px; height:70%; background:#ffffff; border:1px solid #1e2b36; border-radius:6px 6px 5px 5px; 
 box-shadow: 1px 5px 5px #1e2b36;}

div.dialogBox  .content{width:96%; padding:2%; overflow-y:auto; height:80%;}

div.headerBar{width:98%;height:32px; background:#1e2b36; border-bottom:1px solid #000000;padding:2px 1%;border-radius:5px 5px 0px 0px; vertical-align:bottom; color:#ffffff;border:0px;text-align:left}
div.headerBar button{float:right;padding:6px;}


div#palette{width:98%; height:80%; padding:0%; border:1px solid #cccccc; overflow-y:auto;}

div.paletteItem{border:1px solid #cccccc;clear:left;padding:2px;text-align:left;vertical-align:top;margin-top:2px;font-size:.6em;}
img.paletteThumb{width:40px;display:inline-block;margin-right:3px;}
div.paletteInfoHolder{width:80%; display:inline-block;cursor:pointer;height:100%} 
div.paletteInfoHolder:hover{background:#dddddd;} 
img.paletteDelete{height:20px;border:0px solid #dddddd;float:right;vertical-align:bottom}


a{text-decoration:none;}
a.light{}
a.light:hover{}

a.dark{}
a.dark:hover{}

.noMargin{margin:0px 0px 0px 0px}

button{padding:8px 8px;background-color:#60AFFE;border:0px;border-radius:3px;color:#ffffff;cursor:pointer;}
button:hover{background:#003F87}
.button{padding:8px 8px;background-color:#60AFFE;border:0px;border-radius:3px;color:#ffffff;cursor:pointer;font-size:12px}
.button:hover{background:#003F87}
.smallButton{font-size:12px;margin:5px 5px;padding:2px 2px;}
.largeButton{width:100;}
input.smallIcon{height:20px;border:0px; opacity:0.8}
input.smallIcon:hover{opacity:1;}

input{padding:3px; border:1px solid #cccccc; border-radius:3px;}
select{padding:3px; border:1px solid #cccccc; border-radius:3px;}
input.smallNumber{width:40px;}
input.colorInput{width:40px;}
input.rangeInput{vertical-align:middle;}
input.bigNumber{width:60px;}
input.longText{width:100%;}
input.smallText{width:50%;}
input.slideBar{}
label.uploadButton{text-align:center;width:50%; font-size:12px; padding:4px 4px;background-color:#60AFFE;border:0px;border-radius:3px;color:#ffffff;margin-top:5px;margin-left:0px;}
label.uploadButton:hover{background-color:#003F87;}
input.textInput{width:98%;padding:4px;}




a.headerLink{color:#0077b6;font-size:12px;margin:0px 10px 10px 10px;vertical-align:middle}
a.headerLink:hover{color:#ffffff;}
img#logo{margin:10px 8px 5px 5px;height:40px;display:inline-block;vertical-align:top;}
div#masterWrapper{width:100%;position:relative;border:1px solid #000000;background:#cccccc;margin:0px; padding:0px; top:135px;


-webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}

div.fullHeight{height:99.9%; display:inline-block; vertical-align:top; text-align:left; position:relative;border:0px solid #cccccc}


		
	
	
		
		/*onclick box to display a param box*/
		div.contextCatagoryHeader{font-size:12px;width:92%;margin:0px;border-top:1px solid #eeeeee; border-color:#dceaf8;padding:12px 4%;
		cursor:pointer;background-color:#ffffff;color:#606060;}
		div.contextCatagoryHeader:hover{background:#dceaf8;color:#202020}
		img.downArrow{height:8px;float:right;}
		img.paramicon{height:25px;margin:2px 0px;vertical-align:middle;}
		div.contextParamBox{display:none;width:100%;padding:0% 0%;margin:0%;border:0px solid #dddddd;background:#f5feff;}
		div.contextParamBox hr{border-top:1px solid #eeeeee;}
		div.contextParamBox h2{font-size:20px;color:#474747;}
		div.contextParamBox table{border:1px solid #eeeeee;border-collapse:collapse;font-size:10px;width:98%;padding:1%}
		img.paramIcon{height:25px;}
		
		
		div.paramCatagory{font-size:12px;width:88%;margin-left:4%; border:0px solid #eeeeee; padding:1% 2%;background:#f5feff; margin-top:0px;margin-bottom:10px;border-radius:3px;line-height:30px;}
		p.paramCatagoryTitle{font-size:16px; width:65%; margin:10px 0px 0px 4%; padding: 6px 0px; font-family:candara; border:0px solid #cccccc; background:#fff; border-radius:3px 3px 0px 0px; font-weight:900;
		border-bottom:0px;}
		
		
		
		
		
		
		
		
		div.contextPanelCatagory{border:1px solid #eeeeee; padding:1%;width:98%;margin-top:20px}
		div.contextPanelCatagory p{margin:5px;}
		p.catagoryTitle{font-size:14px; margin:3px 0px 10px 0px;padding:0px;font-weight:900;border-top:1px solid #eeeeee;border-bottom:1px solid #eeeeee;}
		
		input#userFilesInput{width:150px;;background-colour:#c6c6c6;}
		
		
		

div#canvasArea{width:75.8%;background:#8895a5; border:0px solid #000000;height:99.9%}
canvas#mainCanvas{border:0px solid #cccccc; /*background-image:url('../img/alphabg.png');*/ background-repeat:repeat; width:95%;height:95%;margin:1%;background-color:#8895a5}
/*canvas tool bar*/
div#canvasToolBar{height:25px;padding:5px; position:absolute;left:25%;top:20px; background:white;z-index:200;margin:10px; border:1px solid #cccccc;}
div#canvasToolBar img{height:25px;margin:0px 5px;opacity:0.75}
div#canvasToolBar img:hover{opacity:1}




div#canvasBar{position:absolute; top:12px; left:19%; background:#ffffff; border-radius:5px 5px 5px 5px; width:auto; height:30px; padding:5px;
display:inline-block; text-align:left;z-index:1000; font-size:12px;}
button.canvasBarButton{  cursor:pointer; padding:4px;}
button.canvasBarButton:hover{ background:#dddddd; }






.scrollBar::-webkit-scrollbar {
 width: 12px;
 height: 13px;
}
.scrollBar::-webkit-scrollbar-thumb {
 background: #1e2b36;
 border-radius: 10px;
}
.scrollBar::-webkit-scrollbar-thumb:hover{
 background: #3f4d4a;
}
.scrollBar::-webkit-scrollbar-track{
 background: #eeeeee;
 border-radius: 10px;
 width:12px;
 border:1px solid #aaaaaa;
}


		
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 18px;
  vertical-align:middle;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 7px;
  bottom: 1px;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 1px;
  bottom: 1px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(23px);
  -ms-transform: translateX(23px);
  transform: translateX(23px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 8px;
}

.slider.round:before {
  border-radius: 50%;
}