@charset "UTF-8";
/*color set
adcc3f - green;
e9f4be - manilla;
2eacbe - blue;



*/

body, html {
	width:100%;
	font-size:14px;
	height:100%;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select: none;
	user-select:none;
	font-family:'BodyText';
    position: fixed;
}
#wrapper {
    width:100%;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#adcc3f;
    overflow: hidden;
}
#inputSelect {
    background-color:#2eacbe;
    z-index:10000;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    text-align: center;
    padding-top:6em;
    font-size:2em;
}
.btnInputSelect {
    background-color:rgba(255,255,255,.6);
    padding:1em;
    margin:1em;
    color:#2eacbe;
    font-family:'DisplayText';
    border-radius:.5em;
    border:solid .15em #fff;
    cursor:pointer;
    display:inline-block;
}
#inputSelect h1 {
    font-family:'DisplayText';
    color:#fff;
}
#blockCanvas {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:10;
}
#menu {
	position:absolute;
	left:-15.75em;
	top:10%;
	overflow:visible;
	margin-right:-4.5em;
	padding-right:4.5em;
	font-size:1.4em;
	z-index:101;
}
#menu ul {
	background-color:#2eacbe;	
	padding:1em;
	border-top-right-radius:1em;
	border-bottom-right-radius:1em;
	box-shadow: .15em 0em .5em rgba(0,0,0,.5);
}
#menu ul li {
	background-color:rgba(255,255,255,.2);
	color:#fff;
	padding:.75em;
	border-radius:.5em;
	width:12em;
	margin-bottom:.25em;
	cursor:pointer;
}

#menu ul ul {
	padding:0;
	box-shadow: none;
	display:none;
}
#menu ul ul li {
	margin-left:1em;
	width:11em;
}

#menuTab {
	position:absolute;
	right:0.6em;
	top:4em;
	background-color:#2eacbe;
	color:#fff;
	padding:1em;
	padding-left:2em;
	width:1em;
	height:7em;
	border-top-right-radius:1em;
	border-bottom-right-radius:1em;
	text-align:center;
	cursor:pointer;
	box-shadow: .25em .15em .25em rgba(0,0,0,.5);
}

.rotateText {
	width:6em;
	transform-origin: 0 50%; /* Safari and Chrome */
	-webkit-transform-origin: 0 50%; /* Safari and Chrome */
	-moz-transform-origin: 0  50%; /* Safari and Chrome */
	-ms-transform-origin: 0  50%; /* Safari and Chrome */
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
#toolbar {
	background-color:#2eacbe;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	height:3.5em;
	box-shadow: 0em -.25em .75em rgba(0,0,0,.5);
	padding:.5em;
	z-index:4000;
}


.toolButton {
	position:relative;
	float:left;
    cursor:pointer;
	margin-right:.75em;
	height:3em;
	width:3em;
	border-radius:.5em;
	border:solid .2em rgba(255,255,255,.5);
	box-shadow: .15em .15em .25em rgba(0,0,0,.5);
	/*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*/
}

.toolButtonSelected {
	box-shadow: inset .15em .15em .25em rgba(0,0,0,.5);
}

.toolBack {
	position:absolute;
	height:100%;
	width:100%;
	background-image:url(../img/pencilIcon.png);
	background-size:80% auto;
	background-position:center center;
	background-repeat:no-repeat;
}

#icBackPencil {
	background-image:url(../img/pencilIcon.png);
}

#icBackTrash {
	background-image:url(../img/trashIcon.png);
}
#icBackTrashAll {
	background-image:url(../img/restartIcon.png);
}

#icBackEraser {
	background-image:url(../img/eraserIcon.png);
}

.tilesBox {
    font-size:.75em;
	position:absolute;
	top:-11.1em;
	height:6.5em;
	left:1em;
	right:1em;
	background-color:#2eacbe;
	border-bottom-left-radius:2em;
	border-bottom-right-radius:2em;
	padding:1em;
	padding-top:3.35em;
	over-flow:visible;
	text-align:center;
	box-shadow: .15em .15em .25em rgba(0,0,0,.5);
	z-index:1000;
}

.tilesTab {
	position:absolute;
	left:1em;
	top:100%;
	background-color:#2eacbe;
	color:#fff;
	font-size:1.5em;
    font-size:1.2em;
	padding:.5em;
	width:10em;
	border-bottom-left-radius:1em;
	border-bottom-right-radius:1em;
	text-align:center;
	cursor:pointer;
	box-shadow: .15em .20em .25em rgba(0,0,0,.5);
}
.tilesTab1 {
	left:1em;
}
.tilesTab2 {
	left:12.25em;
}
#tiles1 .letterTileSelect, #tiles1 .colorTileSelect  {
    margin-top:.1em;  
}

#tiles2 .letterTileSelect, #tiles3 .letterTileSelect, #tiles4 .letterTileSelect, #tiles5 .letterTileSelect, #tiles6 .letterTileSelect {
    margin-top:.1em;  
}
.tilesTab3 {
	left:23.5em;
}

.tilesTab4 {
	left:34.75em;
}

.tilesTab5 {
	left:46em;
}
.tilesTab6 {
	left:57.25em;
}

.subBox {
      display:inline-block; 
}
.subDiv {
    display:inline-block;
    height:5em;
    position:relative;
    top:.5em;
    background-color:rgba(255,255,255,.5);
    width:.25em;
    margin-right:.5em;
    margin-left:.5em;
}
/* Old Stuff */
#content {
	position:absolute;
	top:2em;
	left:2em;
	right:2em;
	bottom:2em;
	background-color:#fcfcfc;
	padding:2em;
}
.twoColPanel {
	-webkit-column-count:2;
	-webkit-column-gap:1em;
	-moz-column-count:2;
	-moz-column-gap:1em;
}
.menuBar {
	position:absolute;
	left:4em;
	right:4em;
	top:2em;
	height:1.5em;
	background-color:#2eacbe;
	color:#fff;
	text-align:center;
	font-size: .8em;
	padding-top:.8em;
	font-family:'BodyText';
	z-index:5000;
}
#menuBarLeft {
	position:absolute;
	top:0;
	left:1em;
}
#menuBarCenter {
	position:absolute;
	top:.65em;
	width:100%;
}
#menuBarRight {
	position:absolute;
	right:1em;
	top:.65em;
}
#homeBtn {
	position:absolute;
	top:0;
	left:0;
	width:2em;
	height:2em;
	background-image:url(../img/home.png);
	background-repeat:no-repeat;
	background-size:auto 85%;
	background-position: center bottom;
	cursor:pointer;
	z-index:5000;
}
#navArrows {
	position:absolute;
	top:0;
	left:3em;
	width:8em;
	height:1.25em;
	padding-top:.75em;
	z-index:5000;
}
#navLeft {
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:2em;
		background-image:url(../img/arrowPrev.png);
	background-repeat:no-repeat;
	background-size:auto 90%;
	background-position: center bottom;
	display:inline-block;
	z-index:5000;
	cursor:pointer;
}

#navRight {
	position:absolute;
	right:0;
	top:0;
	bottom:0;
	width:2em;
	background-image:url(../img/arrowNext.png);
	background-repeat:no-repeat;
	background-size:auto 90%;
	background-position: center bottom;
	display:inline-block;
	z-index:5000;
	cursor:pointer;
}

#menuBarSelector {
	position:absolute;
	top:.65em;
	width:100%;
	z-index:2000;

}
#menuSelectorIndicator {
	height:1em;
	width:1em;
	background-image:url(../img/selectIndicator.png);
	background-size:auto 100%;
	background-position: center center;
	background-repeat:no-repeat;
}
#menuBarLessonSelector {
	border-radius:0;
	border:none;
	color:#fff;
	font-size:1em;
	line-height:1em;
	font-family:'BoldText';
	margin:0;
	margin-right:1em;
	cursor: pointer;
	outline: none;
	-webkit-appearance:none;
	display:inline-block;
	background-color:#2eacbe;
	text-align:center;
}
.contentPanel {
	width:100%;
	height:100%;
	text-align:center;
	display:none;
	overflow:auto;
}
/*GRID LAYOUT TAGS*/
.contentWrapper {
	position:relative;
	display:inline-block;
	padding-top:1em;
	margin-right:auto;
	margin-left:auto;
	border:solid .5em #000;
}