@charset "UTF-8";
/*CONTENT TEXT STYLING*/

.buttonBack {
	/*Begin Colorzilla*/
	background: #b5ef4a;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1ZWY0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhMmQ2NDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #b5ef4a 0%, #a2d642 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b5ef4a), color-stop(100%, #a2d642));
	background: -webkit-linear-gradient(top, #b5ef4a 0%, #a2d642 100%);
	background: -o-linear-gradient(top, #b5ef4a 0%, #a2d642 100%);
	background: -ms-linear-gradient(top, #b5ef4a 0%, #a2d642 100%);
	background: linear-gradient(to bottom, #b5ef4a 0%, #a2d642 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5ef4a', endColorstr='#a2d642', GradientType=0 );
/*End Colorzilla*/
}

.setupButton {
	font-size:1.2em;
	font-family:'BoldText';
	clear:both;
	display:inline-block;
	margin-top:1em;
	width:8em;
	border: solid 1px #0e8c9e;
	border-radius:.25em;
	color:#0e8c9e;
	font-weight:bold;
	padding:1em;
	cursor:pointer;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FhZjZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iIzhjZjFmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYyJSIgc3RvcC1jb2xvcj0iIzdjZDdlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyZWFjYmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top,  #aaf6ff 0%, #8cf1ff 20%, #7cd7e2 62%, #2eacbe 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaf6ff), color-stop(20%,#8cf1ff), color-stop(62%,#7cd7e2), color-stop(100%,#2eacbe));

background: -webkit-linear-gradient(top,  #aaf6ff 0%,#8cf1ff 20%,#7cd7e2 62%,#2eacbe 100%);

background: -o-linear-gradient(top,  #aaf6ff 0%,#8cf1ff 20%,#7cd7e2 62%,#2eacbe 100%);

background: -ms-linear-gradient(top,  #aaf6ff 0%,#8cf1ff 20%,#7cd7e2 62%,#2eacbe 100%);

background: linear-gradient(to bottom,  #aaf6ff 0%,#8cf1ff 20%,#7cd7e2 62%,#2eacbe 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaf6ff', endColorstr='#2eacbe',GradientType=0 );

}

/*Tiles*/
.tilePointer {
    height:2em;
    width:1em;
    background-image:url(../img/sbInsertArrow.svg);
    background-size: .5em auto;
    background-position: 0 top;
    background-repeat:no-repeat;
    position:absolute;
    left:70%;
    top:2.25em;
    display:none;
    overflow: visible;
    z-index:1000100;
}

.tilePointer.tilePointerUp {
    background-image:url(../img/sbInsertArrowDown.svg);
    top:-.5em;
}

.tilePointerVisible {
    display:block;
}
.letterTileBack {
	position:relative;
	display:inline-block;
	height: 8em;
	width:6em;
	margin-left: .5em;
	cursor: pointer;
}

.letterTile {
	position:absolute;
	display: block;
	font-size:3em;
	height: 2em;
	width:2em;
	background-color: #fff;
	border: solid .05em rgba(0,0,0,.5);
	border-radius: .1em;
	box-shadow: .05em .05em .25em rgba(0,0,0,.5);
	cursor: pointer;
	text-align:center;
	line-height:1.8em;
	font-family:'DisplayText';
    z-index:2000;
}

.letterTileSelect {
	display: inline-block;
	font-size:1.5em;
	height: 2em;
	width:auto;
    min-width: 2em;
    padding-left:.2em;
    padding-right:.2em;
	background-color: #fff;
	border: solid 1px rgba(0,0,0,.5);
	border-radius: .1em;
	box-shadow: .05em .05em .25em rgba(0,0,0,.5);
	cursor: pointer;
	text-align:center;
	line-height:2em;
	font-family:'DisplayText';
    z-index:2000;
    margin:.1em;
}

.colorTileSelect {
    margin-left:.1em;
    margin-right:.1em;
	display: inline-block;
	font-size:1.5em;
	height: 2em;
	width:auto;
    min-width: 2em;
    padding-left:.2em;
    padding-right:.2em;
	background-color: #f00;
	border: solid 1px rgba(0,0,0,.5);
	border-radius: .1em;
	box-shadow: .05em .05em .25em rgba(0,0,0,.5);
	cursor: pointer;
	text-align:center;
	line-height:2em;
	font-family:'DisplayText';
    z-index:2000;
}

.subTile {
    display:inline-block;
    /*border:solid 1px red;*/
}

.subTile:hover {
    border:solid 1px red;
}

.subTileFloater {
    background-color:rgba(80,100,0,.8);
}

.subTile {
    transition:all .25s;
}
#tileBox .clearSubTile {
    font-size:0;
}

#handlerBlock .subTile {
    opacity:0;
}
.syllaboardTileSelect {
    display: inline-block;
	font-size:1.5em;
	height: 2em;
    min-width: 3em;
    padding-left:.2em;
    padding-right:.2em;
	background-color: #fff;
	border: solid 1px rgba(0,0,0,.5);
	border-radius: .1em;
	box-shadow: .05em .05em .25em rgba(0,0,0,.5);
	cursor: pointer;
	text-align:center;
	line-height:2em;
	font-family:'DisplayText';
    z-index:2000;
    margin:.1em;
    font-size:2.75em;
    width:auto;
    float:left;

}

.iconTileSelect {
	display: inline-block;
	font-size:2em;
	height: 2em;
	width:2em;
    padding:.2em;
    margin:.2em;
	cursor: pointer;
	text-align:center;
	line-height:2em;
	font-family:'DisplayText';
    z-index:2000;
    background-size: 100% auto;
    background-position:center center;
    background-color:#09c;
    box-shadow:.15em .15em .25em rgba(0,0,0,.5);
    border-radius:50%;
}

.tilesInactive .letterTileSelect, .tilesInactive .colorTileSelect, .tilesInactive .syllaboardTileSelect, .tilesTabInactive .iconTileSelect {
    cursor:no-drop;
    opacity:.2;
}

.letterTileGreen {
	background-color:#0c0;
}
.letterTileBlue {
	background-color:#00c;
}
.letterTileRed {
	background-color:#f00;
}
.letterTileYellow {
	background-color:#ff0;
}
.letterTilePurple {
	background-color:#90c;
}
.letterTileOrange {
	background-color:#fa0;
}
.letterTileTeal {
    background-color:#0cc;
}
.letterTileCyan {
    background-color:#0ff;
}
.letterTileMagenta {
   background-color:#f0f; 
}
.letterTileChartruese {
   background-color:#cf0; 
}
.letterTileGray {
   background-color:#ccc; 
}
.tileHandle span.vowelText {
color:rgba(0,0,0,0);
}

/*span.vowelText {
    color:#c00;
}*/

.vowelText {
    color:#c00;
}


/*letter tiles for positioning*/
#tileBox {
 position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    font-size:1.5em;
}

#canvasBlock {
	position:absolute;
	top:0em;
	bottom:0;
	left:0;
	right:0;
	z-index:999;
    background-color:rgba(0,0,0,0);
}
#drawCanvas {
    height:4000px;
    width:4000px;
 opacity: .75;  
   
}
.tileWrapper {
    position:absolute;
    left:0px;
    top:0px;
    padding:.1em;
    line-height:2em;
    height:2em;
    width:auto;
    min-width:2em;
    text-align:center;
    font-size:2em;
    border:solid .02em rgba(200,200,200,1);
    background-color:#fff;
    z-index:998;
}

.tileHandle {
    color:rgba(0,0,0,0);
    position:absolute;
    left:0px;
    top:0px;
    padding:.1em;
    line-height:2em;
    height:2em;
    width:auto;
    min-width:2em;
    text-align:center;
    font-size:2em;
    background-color:rgba(255,0,0,0);
    cursor:pointer;
    border:solid 1px rgba(0,0,0,0);
    z-index:4000;
}

#tileBox .tileWrapperSyllaboard .standardIcon.syllaAnimIcon, .tileHandleSyllaboard .standardIcon.syllaAnimIcon{
    /*height:.25em;
    width:.25em;
    background-color:red;
    margin-bottom:.5em;*/
}
#tileBox .tileWrapperSyllaboard .standardIcon, .tileHandleSyllaboard .standardIcon {
    transition:all .25s;
}

.tileWrapperSyllaboard, .tileHandleSyllaboard {
    min-width: 2em;
    white-space: nowrap;
    padding-left:1em;
    padding-right:1em;
    padding-top:.25em;
    padding-bottom:.25em;
}

.tileWrapperSyllaboard .standardIcon,  .tileHandleSyllaboard .standardIcon{
    height:1.25em;
    width:1.25em;
    margin:0em;
    padding:0;
    line-height: -1em;
    display: inline-block;
    position: relative;
    top:.25em;
    margin-left:.1em;
    margin-right:.1em;
}
.tileWrapperIcon, .tileHandleIcon {
    background-size:101% auto;
    border-radius:50%;
    border:solid 1px #09c;
    background-color:#09c;
    height:2em;
    width:2em;
    padding:0;
    margin:0;
    overflow: hidden;
}
.tileWrapperIcon div {
  font-size:.5em;
    border-radius:50%;
}
.tileHandleIcon {
    opacity:0;
}

.subTile[type="C"] {
    height:1em;
    width:1em;
    line-height: .85em;
    display:inline-block;
    margin-left:.2em;
    margin-right:.2em;
}
.tileSelected {
    border:solid 1px rgba(0,0,0,1);
}

.tileAbsorb {
    margin-left:-2px;
    margin-top:-2px;
    border:solid 4px rgba(120,90,255,1);
    opacity:.8;
}
#handlerBlock {
 background-color:rgba(255,0,0,0);   
}
.fullBlock {
position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    
}