/*
	FONT DEFINITIONS

	Interface: Verdana
	Speech/Communications: Verdana
	Code/Control_Communication: Verdana
		*(#gidgetSpeech overridden in ui.js)

	COLOR DEFINITIONS
	All colors used below should be tagged with a comment indicating which color they use.

	Background Colors
	colorPageBackground		rgb(30,30,30)			This color indicates inactive space behind the content area
	colorTitleBar			#79cbe8			 		The background color of the title bar
	colorContentArea		rgb(240,240,240)	 	Main content area background
	colorEditorEnabled		white					The background color of the code editor when enabled.
	colorInactivePanel		rgb(220,220,220)		The background color of information panels that aren't editable.
	colorSpeechBubble		white					The background color of speech bubbles.
	colorCodeLineSelection	rgb(255,192, 192)		The background color of the currently executing line.
	colorPopupPanel			rgb(240,240,240)		The background color of a popup panel.
	color???										An unknown color that needs to be resolved.

	Font Colors
	colorText				rgb(0,0,0)				The color of text on light backgrounds
	colorLink				gray					Link font colors
	colorLight				white					The color of text on dark backgrounds
	colorTokenKeyword		rgb(108,122,160)		The color of command keywords.
	colorTokenOptional		gray					The color of comments and optional content of grammars.
	colorTokenLiteral		rgb(126,154,68);

	Border Colors

	colorPanelBorder		gray					The color of the border around a panel
	colorSelection			red						This is the color used to refer the thing the user or Gidget is currently selecting.

	Border Radius

	sizeBorderRadius		1px						How much roundedness appears in the UI.

	Border Width

	sizeSelection			3px						How much roundedness appears for highlights
	sizeBorderWidth			1px						How thick the borders are

	Selection Colors
	colorGood				green					Used to highlight things that are good.
	colorBad				red						Used to highlight things that are bad.

	syntaxErrorHighlightColor	rgb(255,150,150)	Used to highlight the background of syntax errors

*/

/*********************************************************
****** M A I N - T A G S *********************************
*********************************************************/

html {
	/*overflow-y:scroll;*/
}

canvas{
	position: relative;
	opacity: 1;
	z-index: 7;
}

body {
	/*background-color:	rgb(240,240,240); /* colorPageBackground */
	color: 				rgb(0,0,0); /* colorText */

	font-family:	Verdana, Geneva, sans-serif;

	padding:		0em;
	margin:			0em;

}

body.levelDesignMode {
	background-image: none;
}


html, body, #container  {
	height: 100%;
}

a {
	color:			 gray;	/* colorLink */
	font-weight: 	 bold;
	text-decoration: none;
}

table {
	padding: 0em;
	margin: 0em;
}

h1 {
	font-size: 		large;
	margin:			0em;
	margin-bottom:	.5em;
	margin-top:		1em;
	text-align:		left;
}

h2 {
	font-size: 		25px;
	margin:			0em;
	margin-bottom:	.5em;
	margin-top:		16px;
	text-align:		left;
}

h3 {
	text-transform: lowercase;
	font-size: 		small;
	margin:			0em;
	margin-top:		1em;
	width:			100%;
	text-align:		left;
}

textarea {
	font-size: 		medium;
	padding:		1em;
	margin: 		0em;
}

/*modifies jquery effect wrapper, hopefully won't break other effects*/
.ui-effects-wrapper {
	position: absolute;
}

.navigationButtons {
	outline: none;
	padding: 10px 0px;
	border: 1px solid black;
	background-color: rgb(230, 230, 230);
	border-radius: 5px;
	text-align: center;
	box-shadow: 0px -40px 20px -20px rgba(100, 100, 100, .2) inset;
	transition: background-color .2s;
}

.navigationButtons:hover/*, #levelSelectedExit:hover*/ {
	/*box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .5);*/
	background-color: #79cbe8;
}

.navigationButtons:active/*, #levelSelectedExit:active*/ {
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .3) inset;
}

.navigationButtonsActive, .navigationButtonsActive:hover {
	cursor: default;
	background-color: rgb(230, 230, 230);
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .3) inset;
}

.navigationButtonsDisabled, .navigationButtonsDisabled:hover, .navigationButtonsDisabled:active {
	box-shadow: none;
	background-color: rgb(63, 63, 63);
	cursor: default;
}

#menuOptions_levelEditor.navigationButtonsDisabled > i {
	color: rgb(230, 230, 230);
	position: absolute;
	left: 0;
	top: 10px;
	right: 0;
	font-size: 26pt;
}

/*****STARTPAGE CSS*****/
/***********************/

#startContainer {
 	width: 100%;
 	/*height: 100%;*/
 	min-height: 100%; /*fixes height issue when open debugger*/
	/*background-image: url('../../media/grass.default.png');*/
	background-color: rgb(130, 175, 85);
	margin: 0px;
	padding: 0px;
	font-family: Verdana, sans-serif;

	position:absolute;
	top: 0px;
	left: 0px;
	min-width:		1000px;
}

#startContainerSkyBG {
	position: relative;
	background-color: #79cbe8;
	padding-bottom: 20px;
	/*position: absolute;
	top: 0px;
	left: 0px;*/
	text-align: center;
	box-shadow: 0px 0px 30px 1px rgb(160, 220, 255);
}

#startContainerSkyBG > img {
	/* position: relative; */
	/* top: 60px; */
	/* left: 0px; */
	/* right: 0px; */
	margin-left: auto;
	margin-right: auto;
	/* height: 99%; */
	display: block;
	/* width: 75%; */
}

#startMainTitle {
	width: 20%;
	/*height: 60%;*/
	/* margin-left: auto; */
	/* margin-right: auto; */
	opacity: .9;
	/* width: 25%; */
}

#startPageClouds {
	width: 75%;
	height: 100%;
	/* top: -74px; */
	top: 0px;
	/* height: 213px; */
	right: 0px;
	left: 0px;
	/* margin-left: auto; */
	/* background-repeat: repeat-x; */
	position: absolute;
}

 /*no highlight elements */
 #startBodyContainer, #menuOptions, #gidgetThought {
 	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*pointer elements*/
.startMenuButtons, .buttonAccounts, .navigationButtons, .levelSelectorTabs {
	cursor: pointer;
}

/**TITLE BAR - START**/
/*********************/

#startTitleBar {
	z-index: 1;
	overflow: hidden;
	/* width: 100%; */
	position: relative;
	height: 40px;
	/* background: #79cbe8; */
	color: black;
	font-weight: bold;
	padding: 10px 15px 10px 15px;
}

#titleButtonContainer {
	float: right;
	margin-top: 10px;
}

#userNameHolder {
	font-size: 14pt;
	padding: 0px 5px;
	margin-right: 15px;
	border-radius: 5px;
	position: relative;
	border: 1px solid black;
	padding: 5px;
}

#userNameHolder:hover {
	cursor: 			pointer;
	background-color: 	rgba(255,255,255,0.8);
}

#userNameHolderCaret {
	border-left: 1px dotted black;
	padding: 3px;
}
#userNameHolderCaret i{
	padding-left: 3px;
}

.buttonAccounts {
	position: relative;
	width: 100px;
	padding: 5px 0px;
	margin-right: 20px;
	border: 1px solid black;
	border-radius: 5px;
	float: left;
	text-align: center;

	transition: background-color .2s;
}

.buttonAccounts:hover, .buttonLoginActive {
	/*background-color: rgb(140, 198, 63);*/
	background-color: rgb(213, 213, 213);
}

/*******************/
/**TITLE BAR - END**/


/**startBodyContainer - START**/
/**************************/

#loginContainer, /*#alertLoginContainer,*/  #signupContainer, #userNameHolder {
	display: none; /*hidden at start */
}

#startBodyContainer {
	text-align: center;
}


#imageMenuContainer {
	width: 75%;
	min-width: 1024px;
	margin: 0 auto;
	overflow: hidden;
	margin-top: 2%;
	padding: 0px 50px 10px 50px;
}

#titleImage {
/*	margin-left: auto;
	margin-right: auto;*/
	width: 68%;
	float: left;
}

#startMenuButtonsContainer {
/*	margin-left: auto;
	margin-right: auto;*/
	width: 26.8%;
	margin-top: 2%;
	float: right;
}

.startMenuButtons {
/*	display: inline;*/
/*	margin-right: 20px;*/
	border-radius: 5px;
	position: relative;
	margin-top: 25px;
	padding: 6% 0px;
	color: black;
	font-size: 28pt;
	top: 0px;
	background-color: rgb(220, 150, 35);
	box-shadow: 0px 5px 0px 0px rgb(170, 110, 10), 0px 10px 5px rgb(65, 100, 65);
	transition: top .2s, box-shadow .2s;
}

.startMenuButtons:hover {
	top: -3px;
	box-shadow: 0px 8px 0px 0px rgb(170, 110, 10),
		0px 15px 5px rgb(65, 100, 65);
}

.startMenuButtons:active {
	top: 3px;
	box-shadow: 0px 2px 0px 0px rgb(170, 110, 10),
		0px 5px 5px rgb(65, 100, 65);
}

.startMenuButtonsDisabled, .startMenuButtonsDisabled:active, .startMenuButtonsDisabled:hover {
	background-color: rgb(70, 50, 10);
	box-shadow: none;
	top: 5px;
	cursor: default;
}

.startMenuButtonsDisabled i {
	position: absolute;
	left: 0;
	right: 0;
	/* top: 0; */
	font-size: 55pt;
	bottom: 0;
	color: rgb(220, 150, 35)
}

/*#buttonPlay {
	-webkit-animation: startButtonEmphasis 4s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 2s;
}

#buttonEditor:not(.startMenuButtonsDisabled) {
	-webkit-animation: startButtonEmphasis 4s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 2.5s;
}

#buttonAbout {
	-webkit-animation: startButtonEmphasis 4s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 3s;
}

@-webkit-keyframes startButtonEmphasis {
	from {
		top: 0px;
		box-shadow: 0px 5px 0px 0px rgb(170, 110, 10), 0px 10px 5px rgb(65, 100, 65);
	}
	12% {
		top: -5px;
		box-shadow: 0px 10px 0px 0px rgb(170, 110, 10),
			0px 15px 7px rgb(65, 100, 65);
	}
	25% {
		top: 0px;
		box-shadow: 0px 5px 0px 0px rgb(170, 110, 10), 0px 10px 5px rgb(65, 100, 65);
	}
}*/

#bodyContainerFooter {
	width: 75%;
	min-width: 1024px;
	margin: 0 auto;
/*	overflow: hidden;
*/	margin-top: 2%;
	padding: 0px 50px;
}

#startPageDonate {
	float: left;
}

#startPageSocialMedia {
	float: left;
	display: inline;
	padding-left: 40px;
	padding-top: 10px;
}

#startPageDonateButton {
	background-color: transparent;
	transition: all 0.2s ease-in-out;
}

#startPageDonateButton:hover {
	background-color: rgb(213,213,213);
}

#startPageMusicPlayer {
	position: relative;
	left: -65px;
	display: inline;
}

#startPageSocialMedia a i {
    color: #fff;
    width: 36px;
    height: 26px;
    border-radius: 18px;
    font-size: 19px;
    text-align: center;
    margin-right: 0px;
    padding-top: 10%;
    transition: all 0.2s ease-in-out;
}

#startPageSocialMedia a i:hover {
    opacity: .7;
}

.fa-facebook {
    background:	#3b5998;
}
.fa-linkedin {
    background:	#007bb6;
}
.fa-twitter {
    background:	#00aced;
}
.google-plus {
    background:	#dd4b39;
}

a.ubaplayer-button {
	color: rgb(65, 65, 65);
}

/*#buttonAbout {
	padding: 20px 30px;
	color: black;
	font-size: 25pt;
}*/

/************************/
/**startBodyContainer - END**/

.startPopup {
	position: absolute;
	left: 50%;
	top: 25%;
	z-index: 1000;
}

/*used for centering absolute elements*/
.startPopup > div {
	position:relative;
	left: -50%;

	background-color: rgb(240, 240, 240);
	border: 3px solid black;
	border-radius: 5px;
	text-align: left;
	overflow: hidden;
}


/*input settings*/
.accountPopups input, .accountPopups input[type=text], #exitTempAccount input {
	display: block;
	background: #f1f1f1;
	padding: 6px 5px;
	margin: 0 0 5px 0;
	width: 250px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 1px 1px #ccc inset;
	font-size: 12pt;
}

.accountPopups input:focus, #genderSelector:focus, #expertiseSelector:focus,
#exitTempAccount input:focus, #tempGenderSelector:focus {
	background-color: #fff;
	border-color: rgb(220, 150, 35);
	outline: none;
	box-shadow: 0 0 0 1px #e8c291 inset;
}

.accountPopups input[type='checkbox'] {
	float: left;
	width: inherit;
	margin: 3px 5px 5px 0px;
}

/*signup and login submit button*/
.accountPopups button {
	float: right;
	font-family: verdana, sans-serif;
	font-size: 12pt;
	padding: 5px 10px;
	cursor: pointer;
	border-radius: 5px;
	margin-top: 10px;
	clear: both;
	/*background-color: rgb(220, 150, 35);*/
}

.accountPopups #forgotPassword {
	margin-right: 5px;
}

/*input settings -end*/


.accountPopups {
	background-color: rgb(213, 213, 213);
}

#signupInput, #loginInput {
	font-size: small;
}
/****signupContainer****/
/***********************/

#signupContainer {
	position: absolute;
	top: 55px;
	right: 155px;
	/*background: rgb(140, 198, 63);*/
	border-radius: 5px;
	border: 1px solid black;
}

#signupInput {
	padding: 15px;
	overflow: hidden;
}

#signupInput div {
	margin-bottom: 10px;
}

.textInputs label, #genderLabel {
	width: 70px;
}

.signupSelect {
	font-size: 12pt;
	float: left;
}

.signupSelect select {
	height: 32px;
	/*width: 100px;*/
	/*border: 1px solid black;*/
	font-size: 12pt;
	border-radius: 5px;
	background-color: #f1f1f1;
	font-family: verdana, sans-serif;
	outline: none;
}

.signupSelect option:hover {
	background-color: rgb(220, 150, 35);
}

#ageInput input {
	float:right;
	width: 60px;
}

/*#signupContainer #signupSubmit {
	float: right;
	margin-top: 10px;
	padding: 0;
	border: 1px solid black;
	border-radius: 5px;
	height: 30px;
	width: 80px;
	background-color: rgb(220, 150, 35);
}*/

/***************************/
/****signupContainer-END****/

/****login - START****/
/*********************/
#loginContainer {
	position: absolute;
	top: 55px;
	right: 35px;
	/*background: rgb(140, 198, 63); */
	padding: 15px 15px 10px 15px;
	border-radius: 5px;
	border: 1px solid black;

}

#loginContainer fieldset {
	border: none;
	padding: 0px;
	margin: 0px;
}

#loginContainer p, #signupContainer p {
	width: 250px;
	clear: both;
	margin-top: 0;
}

#loginContainer button {
	clear: none;
}

.arrow-up {
	position: absolute;
	width: 5px;
	height: 5px;
	right: 45px;
	top: -4px;
	border-top: 1px solid black;
	border-left: 1px solid black;
	background-color: rgb(213, 213, 213);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*******************/
/****login - END****/

/******ACOUNT CONTAINER**/
#accountContainer {
	display: none;
	position: absolute;
	top: 60px;
	right: 29px;
	padding: 15px 15px 10px 15px;
	border-radius: 5px;
	border: 1px solid black;
}

#accountContainer .accountMainButton {
	width: 200px;
	margin-bottom: 10px;
	margin-top: 0px;

	text-align: left;
}


/******ACCOUNT CONTAINER END *****/

/********************/
/* TEMP SIGN UP FORM */

#exitTempAccount{
	width: 625px;
	padding: 20px;
}

#exitTempAccount input {
	outline: none;
}

#tempSpeechInputs {
	float: right;
	font-size: 12pt;
	text-align: left;
}

#tempSpeechInputs .tempExitSpeech {
	width: 300px;
	font-size: 12pt;
	border-radius: 5px;
}

#tempSpeechInputs #tempExitSpeechBeatenGame, #tempNavButtons #tempQuitGame {
	display: none;
}

#tempSignupInput {
	overflow: hidden;
}

#tempSignupInput div {
	margin-bottom: 10px;
}

#tempGender {
	float: left;
}

#tempGenderLabel {
	width: 70px;
	font-size: 12pt;
}

#tempGender select {
	height: 32px;
	/*width: 100px;*/
	/*border: 1px solid black;*/
	font-size: 12pt;
	border-radius: 5px;
	background-color: #f1f1f1;
	font-family: verdana, sans-serif;
	outline: none;
}

#tempGender option:hover {
	background-color: rgb(220, 150, 35);
}

#tempAgeInput input {
	float:right;
	width: 60px;
	margin-right: 37px;
}

/* #tempSignupSubmit{
	float: right;
	width: 150px;
	padding: 10px 0px;
	font-size: 12pt;
} */

#tempContinueGame, #tempExitToMenu, #tempSignupSubmit, #tempQuitGame {
	font-family: verdana, sans-serif;
	font-size: 12pt;
	padding: 10px 0px;
	width: 128px;
	cursor: pointer;
	border-radius: 5px;
	border: 1px solid black;
}

#tempSignupContainer img {
	float: left;
}

#tempNavButtons {
	clear: both;
	float: right;
	margin-right: 37px;
}

#menuTempBeatenQuitConfirm p {
	font-size: 14pt;
	margin-left: 125px;
}

/*TEMP SIGN UP FORM END*/

.alertModalDialog {
	overflow: hidden;
}

.alertModalDialog i {
	color: rgb(100,100,100);
	font-size: 74pt;
	float: left;
}

.alertModalButtons {
	margin-top: 10px;
	text-align: right;
	clear: both;
}

.alertModalButtons button {
	width: 257px;
	font-size: 12pt;
}

#menuClearConfirm_buttonYesDontAsk, #menuOriginalConfirm_buttonYesDontAsk {
	display: block;
	width: 521px;
}

#menuOriginalCode p, #menuClearCode p  {
	font-size: 14pt;
	margin-left: 125px;
}

#menuOriginalConfirm_buttonYesDontAsk {
	clear: both;
	margin-top: 5px;
}

/*MENU LOUGOUT CONFIRM*/
#menuLogoutConfirm p {
	font-size: 14pt;
	margin-left: 125px;
}

/*MENU LOUGOUT CONFIRM END*/

#menuFinishedLevels p {
	font-size: 11pt;
}

#menuFinishedLevels_buttonOkay {
	text-align: center;
	width: 100%;
	clear: both;
}

#menuAltFinishedLevels div {
	text-align: center;
	clear: both;
}

#menuAltFinishedLevels .navigationButtons {
	width: 100%;
	font-size: 14pt;
	padding: 15px 0;
}

#menuAltFinishedLevels p {
	font-size: 12pt;
}


#container {
	min-width:		1182px;
	margin:			0em;
	margin-left:	auto;
	margin-right:	auto;
	padding:		0em;
	text-align: center;
}


/****alertlogin - Start****/
/**************************/

#alertLoginContainer {
	padding: 20px;
	min-width: 600px;
}

#loginSpeechContainer {
	overflow:hidden;
}

#loginSpeechContainer > * {
	float: left;
}

#loginSpeechContainer img {
	margin-right: 15px;
}

#loginSpeechContainer h2 {
	font-size: 18pt;
	padding-left: 10px;
}

#loginSpeechContainer p {
	display: inline;
	width: 300px;
	/*border: 1px solid black;*/
	border-radius: 5px;
	padding: 10px;
	font-size: 18pt;
}

#alertLoginButtons {
	width: 575px;
	margin: 0px auto;
	margin-top: 20px;
}

#buttonAlertSignup, #buttonAlertLogin {
	float: left;
	width: 100px;
	margin-left: 10px;
	padding: 20px 0;
}

#buttonContinueGame {
	font-weight: bolder;
	float: right;
	width: 200px;
	padding: 20px 0px;
	/*background-color: rgb(140, 198, 63);*/
}

/************************/
/****alertlogin - END****/


/************************/
/****AbountContainer******/

#aboutContainer {
	font-family:	Verdana, Geneva, sans-serif;

}

#aboutContainer strong {
	font-size:		20pt;
	padding-bottom:	1em;
}

#aboutTabs {
	position:		absolute;
	width:			20%;
	margin-left:	-40px;
}

#aboutTabs ul li img {
	width:			100px;
	height:			100px;
}

#aboutTabs ul li {
	list-style:			none;
	list-style-type: 	none;
	text-align: 		center;
	margin-bottom: 		10px;
}

#aboutTextContainer {
	height:				420px;
	width:				80%;
	float:				right;
	padding-top:		20px;
}

#aboutTextContainer p {
	padding-top:		1em;
	text-align:			justify;
	text-justify:		inter-word;

	font-size:			12pt;
	line-height: 		1.5em;
}

.aboutClick {
	font-size:			10pt;
}

.aboutClick img {
	display:			block;
}

.aboutClick:hover {
	background-color:	rgb(213, 213, 213);
	border-radius: 		5px;
	cursor:				pointer;
}

.aboutClickSelected {
	background-color:	rgb(213, 213, 213);
	border-radius: 		5px;

}

.aboutTabText {
	overflow:			hidden;
}

#aboutDonateButton.navigationButtons {
	width:				100%;
	font-size:			14pt;
	padding:			15px 0;
	margin-top: 		60px;
}

#creditsContainer{
	padding-top:		1em;
	margin:				0;
}

#creditsContainer strong {
	font-size:			12pt;
	font-wight:			700;
	font-style: 		normal;
}

#creditsContainer i {
	color: gray;
}
#creditsContainer i:hover {
	color: orange;
}

#creditsLeft{
	float:				left;
	width:				50%;
	overflow:			hidden;
}
#creditsRight{
	float:				left;
	width:				50%;
	overflow:			hidden;
}

#splash_NJIT {
	height:				40px;
}

#splash_UW {
	height:				40px;
	padding-left:		.5em;
}

#splash_OSU {
	height:				40px;
	padding-left:		.5em;
}


#splash_NSF {
	height:				50px;
	position:			relative;
	top:				5px;
}


#frontPageFunding {
	width: 100%;
	position: relative;
	text-align: center;
	bottom: 0px;
	margin: auto;
}

#funding {
	position: 			relative;
	top:				1em;
}

#fundingSponsors {
	float:				right;
	position:			relative;
	top:				-5px;
}

#about_NJIT {
	height:				40px;
}

#about_UW {
	height:				40px;
	padding-left:		.5em;
}

#about_OSU {
	height:				40px;
	padding-left:		.5em;
}


#about_NSF {
	height:				50px;
}


#about_Microsoft {
	height:				30px;
	position:			relative;
	top:				-10px;
}

#about_Google {
	height:				30px;
	position:			relative;
	top:				-7px;
}


/***********************/
/*****STARTPAGE CSS - END*****/

/**********Level Selector Start************/
/******************************************/

/*.centerPopup {
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
}*/

#levelSelectorContainer {
	/*display: none;*/
	width: 1000px;
	margin-left: -500px;
	padding: 0px;

	font-size: 14pt;
	/*z-index: 1000;*/
	height: 90%;
	min-height: 570px;
	/*width: 65%;
	min-width: 900px;*/
	background-color: white;
	border: 1px solid black;
	border-radius: 5px;
	overflow: hidden;
}

#levelSelectorTabContainer {
	overflow: hidden;
}


#levelSelectorTabContainer .levelSelectorTabs {
	float: left;
	width: 50%;
	text-align: center;
	/*font-size: 14pt;*/
	padding: 10px 0px;
	background-color: #BCE5F4;
	box-shadow: 0px -40px 20px -20px rgba(100, 100, 100, .1) inset;
	margin: 0px;
	border-bottom: 1px solid black;
	transition: background-color .3s;
}

#levelSelectorTabContainer .levelSelectorTabs:hover {
	background-color: #79cbe8; /*rgb(140, 200, 60);*/
}

#levelSelectorTabContainer .levelSelectorTabActive, #levelSelectorTabContainer .levelSelectorTabActive:hover {
	background-color: #79cbe8;
	text-decoration: underline;
}

.levelGroupContainer {
	margin: 5px;
	overflow-y: scroll;
	height: 90%;
}
/*
.levelGroupContainer > .level, #newGroupButton {
	margin: 5px;
	margin-top: 10px;
	border-radius: 5px;
	cursor: pointer;
}

.levelGroupContainer .levelGroupTitle, #newGroupButton {
	padding: 10px;
	background-color: #79cbe8;
	border-radius: 5px;
}

.levelGroupContainer .levelGroupTitle > i {
	float: right;
	margin-right: 50px;
}
*/

#newGroupButton {
	background-color: white;
	border: 1px dashed black;
}
#newGroupButton > i, .level.newLevelButton i {
	font-size: 40pt;
	margin: 50px;
}

.levelContainer {
	overflow: hidden;
	padding: 0px 15px;
}

.levelContainer .levelRow {
	overflow: hidden;
}

.levelContainer .level {
	text-align: center;
	float: left;
	border-radius: 5px;
	margin: 10px 10px;
	padding: 10px 5px;
	cursor: pointer;
	background-color: #B4E2F2;
	transition: background-color .2s
}

.level div {
	height: 70px;
	overflow-y: auto;
}

.levelContainer .level:hover {
	background-color: #79cbe8;
}

.levelContainer .level img {
	width: 150px;
}


.level.newLevelButton {
	background-color: white;
	border: 1px dashed black;
	border-radius: 5px;
	height: 225px;
}

#levelSelectedMenuContainer {
	display: none;
	position: relative;

	background-color: rgb(212,212,212);
	margin: 5px 0px;
	padding: 10px;
	border: 2px solid grey;
	border-radius: 5px;
}

#levelSelectedMenuContainer .arrow-up {
	position: absolute;
	width: 15px;
	height: 15px;
	top: -10px;
	left: 0px;
	border-top: 2px solid grey;
	border-left: 2px solid grey;
	background-color: rgb(213, 213, 213);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: left .2s;
}

.levelSelectedButtons {
	width: 100px;
}

#levelSelectedView {
	display: none;
}

/*.levelContainer .level div {
	margin-left:auto;
	margin-right:auto;
	width: 50px;
	height: 50px;
	background-color: green;
}*/

/* .levelGroup .level:nth-child(4n+1) {
	clear: left;
} */

/*#levelSelectedContainerBG, #levelSelectedDeleteContainerBG {
	display: none;
	background: rgba(0, 0, 0, .7);
	z-index: 1000;
	height: 100%;
	width: 100%;
}

#levelSelectedContainer {
	font-size: 14pt;
	position: absolute;
	z-index: 1000;
	height: 570px;
	width: 720px;
	margin: auto;
	top: 0; left: 0; bottom: 0; right: 0;
	background: white;
	border: 1px solid black;
	border-radius: 5px;
	overflow: hidden;
}

#levelSelectedContainer #levelSelectedTitleContainer {
	width: 100%;
	text-align: center;
	padding: 10px 0px;
	border-bottom: 1px solid black;
	margin-bottom: 20px;
	background-color: #79cbe8;
}

#levelSelectedExit {
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
	padding: 10px 15px;
	border-left: 1px solid black;
	transition: box-shadow .2s;
}

#levelSelectedContainer #levelSelectedBody {
	overflow: hidden;
	width: 600px;
	margin: 0 auto;
}

#levelSelectedContainer #levelSelectedMap {
	height: 350px;
	width: 350px;
	float: left;
}

#levelSelectedContainer #levelSelectedInfo {
	margin-left: 10px;
	float: left;
}

#levelSelectedScrollContainer {
	width: 900px;
	height: 260px;
}

#levelSelectedContainerBG #levelSelectedPrev {
	border-right: 50px solid rgba(140, 198, 63, .2);
	margin-left: 20px;
	float: left;
}

#levelSelectedContainerBG #levelSelectedPrev:hover {
	border-right: 50px solid rgba(140, 198, 63, 1);
}

#levelSelectedContainerBG #levelSelectedNext {
	border-left: 50px solid rgba(140, 198, 63, .2);
	margin-right: 20px;
	float: right;
}

#levelSelectedContainerBG #levelSelectedNext:hover {
	border-left: 50px solid rgba(140, 198, 63, 1);
}

#levelSelectedContainerBG #levelSelectedPrev,
#levelSelectedContainerBG #levelSelectedNext {
	width: 0;
	height: 0;
	border-bottom: 130px solid transparent;
	border-top: 130px solid transparent;
	transition: border .2s;
}

#levelSelectedContainer #levelSelectedButtonContainer {
	position: relative;
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 75px;
	clear: both;
}

.levelSelectedButtons {
	font-size: 14pt;
	height: 50px;
	width: 100px;
	background-color: rgb(140, 198, 63);
}

#levelSelectedPlay {
	width: 150px;
	float: right;
	background-color: rgb(220, 150, 35);
}*/

#confirmDeleteContainer {
	display: none;
	position: absolute;
	height: 50px;
	top: 0px;
	left: 115px;
	background-color: rgb(212,212,212);
}

#confirmCancelButton, #confirmDeleteButton {
	background-color: rgb(220, 150, 35);
	height: 40px;
	margin-top: 10px;
}



/****************************************/
/**********Level Selector END************/


/*********************************************************
****** C O N T A I N E R *********************************
*********************************************************/

/*****IN GAME MENU*****/

#menuOptions {
	margin-left: -250px;
	width: 500px;
	padding: 10px 0 20px 0;
	font-family: Verdana, Geneva, sans-serif;
}

#menuOptions h2 {
	font-family: Verdana, Geneva, sans-serif;
	margin-top: 0px;
	text-align: center;
	font-size: 14pt;
	font-weight: normal;
}

#menuOptions_buttonCreateAccount {
	display: none;
}



#menuOptions_buttons {
	text-align: center;
}

.menuOptionButtons {
	margin: 10px auto;
	padding: 15px 0;
	width: 355px;
	position: relative;
	display: block;
	font-size: 14pt;
}

#menuOptions_gameModes {
	margin: 10px 0;
}

#menuOptions_gameModes .menuOptionButtons {
	width: 175px;
	display: inline;
}

#menuOptionsBottom {
	width: 355px;
	margin: 0 auto;
	margin-top: 60px;
	font-size: 8pt;
}

#menuOptionsBottom .navigationButtons {
	font-size: 8pt;
	text-align: center;
	padding: 5px;
	width: 37px;
	cursor: pointer
}

#menuOptionsBottom .navigationButtons i {
	font-size: 16pt;
}

#menuOptions_about {
	float: left;
}

#menuOptionsBottom #menuOptions_donate.navigationButtons {
	float: left;
	width: 125px;
	font-size: 12pt;
	padding: 12px 0px 13px 0px;
	margin-left: 65px;
}

#menuOptions_soundFX {
	float: right;
}

/*#menuOptions_soundToggles > div {
	float: right;
}*/

/*#menuOptions_soundToggles i {
	font-size: 16pt;
}*/

/*****IN GAME MENU END***/



/* TITLE BAR */
/*******************/

#titleBar {
	text-align: left;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	overflow: auto;
	background:		#79cbe8;  /* colorTitleBar */
	color: 			black; /* colorLight */
	font-weight: 	bold;
	padding: 10px 15px 10px 15px;
	/*border:	solid 1px gray; */
}

/*
#levelTitle, h2 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*/

#levelTitle {
	font-size: 16px;
}

#titleBarLeft{
	float: 			left;
	min-width:		40em;
	/*
	left: 184px;
	vertical-align: middle;
	position: absolute;
	*/
}

#levelProgress {
	margin-top:		-0.25em;
	height: 		1.5em;
	position: relative;
}

#disabledLevelProgress {
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: -4px;
	background-color: rgba(120,204,233,.7);
}

.level-marker {
	vertical-align: middle;
	cursor:			default;
	display:		inline-block;

	width: 			14px;
	height:			10px;

	color:			#337f8b;
}

i.level-marker-image {
	width: 			14px;
	height:			10px;
}

.level-passed.level-marker:hover {
	color:			white;
}

.level-selected {
	cursor:			default;
	width: 			14px;
	height:			10px;
}

.level-passed {
	cursor:			pointer;
}

.level-unit-boundary {
	display:		inline-block;
	vertical-align: middle;
	width: 			14px;
	height:			10px;
}

i.level-marker-flag {
	width: 			14px;
	height:			10px;

	color:			#337f8b;
}

#GidgetMarker {
	position: relative;
	top: 2px;
	left: -1px;
	width: 16px;
	height: 16px;
}

.level-is-test {
}

#titleBarRight {
	/*margin-top: 	4px;*/
	min-width: 		10em;
	/*text-align: 	right;*/
	float: 			right;
	/*vertical-align: top;
	position:	relative;
	top: -5px;
	*/
}


/*
#loggedUsername, #levelToggle {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 11px;
}
*/
#levelToggle, #titleButtons {
	float: right;
}

#levelToggle {
	/*
	position: relative;
  	top: -10px;
  	*/
	display: none;
	font-size: 15px;
  	/*font-weight: bold;*/
  	text-align: center;
  	background-color: white;
  	/*float: right;*/
  	border-radius: 5px;
  	padding: 10px 0px 10px 0px;
  	cursor: default;
}

#gameToggle, #designerToggle {
  padding: 10px 10px 10px 10px;
  /*font-weight: bold;*/
}

#gameToggle {
  border-radius: 5px 0px 0px 5px;
}

#designerToggle {
  border-radius: 0px 5px 5px 0px;
}

.inactiveToggle {
  background-color: gray;
  color: rgb(66,66,66);
}

/*
.activeToggle {
	color: rgb(51,51,51);
	cursor: default;
}
*/

.inactiveToggle:hover {
	cursor: pointer;
}

#main_buttonLogout {
	font-size: 8px;
	text-align: center;
}

#titleBonus {
	font-size: 		x-small;
	display:		none;
}

#titleButtons {
	/*float: right;*/
	margin: 0 0px 0 15px;
	padding-left: 15px;
	/*padding-right: 10px;*/
	border-left: 1px solid black;
	/*border-right: 1px solid black;*/
}

.title-icon {
	font-size: 32px;
	padding: 2px 4px;
	border-radius: 5px;
}

.title-icon:hover, #userNameHolder:hover {
	cursor: 			pointer;
	background-color: 	rgba(255,255,255,0.8);
}

#titleBar .title-icon.disabledExam {
	opacity: .2;
	cursor: default;
}

#titleBar .title-icon.disabledExam:hover {
	background-color: transparent;
}


/* TITLE BAR END ^ */
/*******************/

#content {
	display: inline;
	background-color:  white; /* rgb(240,240,240);  colorContentArea */
	/*
	margin-left:	auto;
	margin-right:	auto;
	*/
	/*margin-bottom:	0em;*/
	/*padding:		1em; */
	/*padding-top:	0em;*/
	/*padding-left:   0;*/
	/*border:	solid 1px gray; */
	/*vertical-align: top;*/
	text-align: 	left;
/*	overflow: visible;*/
	min-height:		600px;
	min-width:		600px;
	/*height: 		95%;*/

	/*border-bottom-right-radius:		3px; /* sizeBorderRadius */
	/*border-bottom-left-radius:		3px; /* sizeBorderRadius */
}


.infoPanel {
	background:		rgb(245, 245, 245); /* colorInactivePanel */
	border: 1px solid rgb(204,204,204);

	color:			black;	/* colorText */
	overflow:		auto;

}

.disabledControlButtons {
	opacity: 0.2;
}

/*
#code, #worldCode, #goals, #executionThought {
	box-shadow: 1px 1px 2px rgb(190,190,190);
}
*/

#codeArea {
	border-bottom-right-radius: 3px;
	display: 		inline-block;
	width: 20%;
	min-width: 350px;
}


#codeMissionContainer{
	/*position: relative;*/
}

#outputArea {
	display: 		inline-block;
	vertical-align: top; /*apparently needed to keep editor area on top*/
	text-align: 	center;
	/*margin: 		0;*/
	margin-right:	1%;
	margin-left: 	1%;
	/*width: 35%;*/
	transition: width .3s, height .3s;
}

#runtimeArea {
	/*position: absolute;*/
	display: 		inline-block;
	vertical-align: top;
	min-width:		200px;
	/*
	margin: 		0;
	padding: 		0;
	*/
	width: 270px;
	-webkit-transition: width .3s ease-in-out;
	transition: width .3s ease-in-out;
}

#designerObjectsHeading {
	display: none;
	margin-bottom: ;
}

#thoughtfulMessage{
	/*
	float:left;
	width: 90%;
	*/
	/*height: 100%;*/
}

#missionText{
	/*margin-top: 0;*/
}

#levelDesignMissionTextValues div{
	/*height:118px;*/
	overflow-y: auto;
}

#levelDesignMissionTextValues {
	padding-left: 7px;
	margin-top: 60px;
}

#levelDesignMissionTextValues h2, #levelDesignMissionText h2 {
	font-size: 18px;
}

#expertContent {
	width: 50%;
	margin: 0;
	padding: 0;
	float: left;

	display: none;
}

#instructionsContainer {
	overflow-x: hidden;
	position: relative;
	/*background-color: white;*/
}


/** C O D E - B O X *************************************/


.codeContainer {
	color: 			black; /* colorText */
	font-family:	Verdana, Geneva, sans-serif;
	font-weight: 	bold;
	font-size: 		small;

	position: relative;
	/*height:			15.5em;*/

	/*border-style:	solid;*/
	border-width:	1px; /* sizeBorderWidth */
	/*border-color:	rgba(128, 128, 128, 0.32); *//* colorPanelBorder */
	/*border-radius: 	3px; /* sizeBorderRadius */

	white-space: 	pre;
	overflow:		auto;

	tab-size: 4;
	-o-tab-size: 4;
	-moz-tab-size: 4;

	/*margin-left: 1px; */
}

.codeContainer[contentEditable="false"] {
	background-color: 	rgb(245, 245, 245); /* colorInactivePanel */
}

.codeContainer[contentEditable="true"] {
	color:				black;
	background-color: 	white;	/* colorEditorEnabled */
}

#code {
	z-index:		1;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

#worldCode, #solutionCode {
	display: none;
}

.codeContainer, #memory, #gidgetThought, #goals, .levelDesignObjectBox {
	border: 1px solid rgba(0,0,0,0.3);
	outline: none; /*removes focus blue outline*/
}

.goalContainer, .codeContainer {
	padding: 15px 10px;
}

#goals, .levelDesignObjectBox {
	border-top: none;
}

#mission {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 100%;
	font-size: 15px;
	padding-left: 26px;
	padding-bottom: 5px;
	margin-top: 0px;
	background-color: rgb(51,51,51);
	color: white;
	padding-top: 4px;
}

#bubbleInstructions {
	/*margin-left: 14px;*/
}


#bubbleInstructions, #memoryBoxHeading, #designerObjectsHeading {
	margin-bottom: 20px;
}

#bubbleWorld{
	margin-left: 7px;
	margin-bottom: 11px;
}

#code::-webkit-scrollbar, #goals::-webkit-scrollbar,
.levelDesignObjectBox::-webkit-scrollbar, .levelGroupContainer::-webkit-scrollbar,
.level div::-webkit-scrollbar, #referenceHolder::-webkit-scrollbar, .codeContainer::-webkit-scrollbar {
	-webkit-appearance: none;
    width: 11px;
    height: 11px;
}

#code::-webkit-scrollbar-thumb, .levelDesignObjectBox::-webkit-scrollbar-thumb,
.levelGroupContainer::-webkit-scrollbar-thumb, .level div::-webkit-scrollbar-thumb,
#referenceHolder::-webkit-scrollbar-thumb, .codeContainer::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}


/*#code::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 11px;
    height: 11px;
}*/

/*
#code::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, .5);
}
*/

/*#goals::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 11px;
    height: 11px;
}*/


#goals::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid rgb(220,220,220);
    background-color: rgba(0, 0, 0, .5);
}


#goals::-webkit-scrollbar-corner {
	background-color: rgb(220,220,220);
}

/*
#code, #worldCode {
	background-image: url('../../media/ui/bg-code.png');
}
*/
/*
.codeContainer {
	position: relative;
}
*/


/** C H E A T - S H E E T * & * R E F G U I D E *******/

.callHeader {

	padding-top:			1em;
	font-weight:			bold;

	border-bottom-style:	solid;
	border-bottom-width:	1px; /* sizeBorderWidth */
	border-bottom-color:	gray; /* colorPanelBorder */

}


.refguide-literal {

}


/** G O A L - B O X ************************************/

.goalContainer {

	background-color: 		rgb(245, 245, 245); /* colorInactivePanel */

	font-family:		Verdana, Geneva, sans-serif;
	font-weight:		bold;
	font-size:			15px;
	height:				3.3em;

	border-style:		solid;
	border-width:		1px; /* sizeBorderWidth */
    border-color:		rgba(128, 128, 128, 0.16); /* colorPanelBorder */

	border-top-style: none;
	border-top-left-radius: 0px;	/* So that it fits with the code */
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px; /* So that it first with the Th buttons */

	white-space: 		pre;
	word-wrap: 			break-word;
}

#goalTriangle {
	width: 0;
	height: 0;
	border-bottom: 100px solid blue;
	border-right: 100px solid transparent;
}

.goalContainer[contentEditable=true] {
	background-color: 		rgb(255,255,255); /* colorInactivePanel */
	background-image:		none;
}

#goals {
	z-index: 1;
	position: relative;
	overflow-y: auto;
	overflow-x: auto;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	/*background-image: url('../../media/ui/bg-goals.png');*/
}

/*if checkboxes are enabled*/
#goals .goalCheckbox {
	border: 1px solid black;
	height: 7px;
	width: 7px;
	margin-right: 5px;
	display: inline-block;
}

/* Used to represent success and failure markers for "ensure" statements */
.success {
	font-family:	Verdana, sans-serif;
	font-size:		small;
	margin-right:	5px;
	color:			rgb(37, 185, 0);	/* colorGood */
}

/* Used to represent success and failure markers for "ensure" statements */
.failure {
	font-family:	Verdana, sans-serif;
	font-size:		small;
	margin-right:	5px;
	color:			red;	/* colorBad */
}



/*********************************************************
****** C E N T E R - P A N E L ***************************
*********************************************************/

/** W O R L D - G R I D *********************************/

#worldContainer, #gidgetThought, #grid, #code, #goals {
	transition: width .2s, height .2s;
}

#worldContainer {
	/*width: 307px;
	height: 314px;*/
/* 	height:				19.5em;	 */
}

#grid {
	margin-left:		auto;
	margin-right:		auto;
	border-radius:		3px; /* sizeBorderRadius */

	/* This prevents the selection from showing over the grid, which can look confusing */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

}



.gridPadding {
	padding-left:	6px;
	padding-top:	12px;
}

#gridTable {
	border-collapse: collapse;
	border-spacing: 0px;
	margin-top: -.5em;
	margin-left: -.5em;
	margin-bottom: 0em;
	position: relative; /*to align objectSayBubble based on percentage*/
}

.position-numbers {
	color:				rgb(100,100,100);
	font-size:			x-small;
	text-align:			left;
	vertical-align: 	middle;
	width:				100%;
}

#column-numbers span {
	display:			inline-block;
	text-align:			center;
}

#row-numbers div {
	vertical-align: 	middle;
}

/** C O M M U N I C A T I O N - B U B B L E S ***********/

/** SHARED ***********/

.thoughtBubbleCommunication {
	background-color:	white;	/* colorSpeechBubble */
	padding:			1em 1.5em 1em 1.5em;
	border-style:		solid;
	border-width:		1px; /* sizeBorderWidth */
	border-color:		gray; /* colorPanelBorder */
	border-radius: 		3px; /* sizeBorderRadius */
	width: 				100%;
	font-family:		Verdana, sans-serif;
	font-size:			small;
	color:				rgb(0,0,0);	/* colorText */
	text-align: 		left;
	vertical-align: 	top;
}

.bubbleError {
	background-color:	rgb(255,210,210);	/* colorSpeechBubbleRed */
}

.bubbleGreen {
	background-color:	rgb(208,240,192);	/* colorSpeechBubbleGreen */
}

.bubbleYellow {
	background-color:	rgb(255,247,191);	/* colorSpeechBubbleYellow */
}

.bubbleOrange {
	background-color:	rgb(255,230,200);	/* colorSpeechBubbleOrange */
}

.thoughtBubbleCommunication button {
	margin-top: 1em;
}

/** LEARNER **********/

.levelDesignMode .debugButton {
	display: none;
}

.debugButton {
	outline: none; /*removes default highlight*/
	border: none;
	border-left: 1px solid rgba(0,0,0,.15); /*remove leftmost button css below)*/
	width: 25%;
	float: left;
	margin: 0px;
	min-width: 80px; /*stops lines from wrapping*/
	box-shadow: 0px -40px 20px -20px rgba(100, 100, 100, .1) inset;
	text-decoration: none;
	padding: 15px 0px 15px 0px;
	background-color: rgb(230, 230,230);
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: rgb(100,100,100);
	display: inline;
	text-align: center;
	-webkit-transition: background-color 0.2s ease-in-out, color .2s ease-in-out;
	transition: background-color 0.2s ease-in-out, color .2s ease-in-out;
}

#step, #main_buttonResetCode {
	border-left: none; /*helps add lines between buttons*/
}

/* TODO: remove this quick hack eventually. */
.debugButton[disabled=disabled] {
	color: rgba(100, 100, 100, .3);
	box-shadow: none;
	background-color: rgba(0, 0, 0, .15);
}

.debugButton:hover:not([disabled=disabled]) {
	cursor:pointer;
	color: white;
	background: rgb(140, 198, 63); /*green*/
}

#commandButtons {
	bottom: 5px;
	right: 0px;
	position: absolute;
	border-radius: 5px;
	overflow: hidden; /*because inner elements floated*/
	border: 1px solid rgba(0, 0, 0, .2);
}

#main_buttonResetCode, #main_buttonClearCode {
	padding: 2px 2px;
	width: 100px;
	height: 30px;
	box-shadow: 0px -30px 20px -20px rgba(100, 100, 100, .1) inset;
}

#executionThought {
	/*padding-top: 10px;*/
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, .2);
	margin-top: 5px;
	width: 100%;
	float: right;
	overflow: hidden;
	font-family:		Verdana, sans-serif;
	/*height:				100%;*/
	display:			block;
	/*padding:			.5em 1em; */
	/*margin:				auto;*/
	/*margin-left: 1px; */
	position: relative;
}

.thoughtTable {
	margin:		0em;
	padding:	0px 20px 20px 27px;
	width:		94%;
	height: 100%;
}


.thoughtTableGidget {
	border-spacing: 0px;
}

.thoughtTable td {
	margin:			0em;
}


.thoughtTableGidget img {
	/*padding-left:  1.15em;
	padding-top:	1em;
	*/
	width: 51px;
}

/** GIDGET ***********/

#gidgetThought {
	font-family:	Verdana, Geneva, sans-serif;
	border: 3px solid rgb(179,179,179);
	border-radius: 16px;
	margin-left: 7px;
	top: -5px;
	position: relative;
	/* height: 140px; */
	width: 350px; /*default value*/
	overflow: hidden;
	padding: 0 0 15px 0;
}

#gidgetSpeech {
	text-align: left;
	line-height: 1.5;
	color: black;		/* colorText */
	font-size: 14px;
	padding: 15px 15px 15px 15px;
}

#gidgetSpeech .object {
	color:	rgb(220, 150, 35)
}

/* no different from .keyword
#gidgetSpeech .keyword {
	color: rgb(108,122,160);
}
*/

#gidgetSpeech .reserved {
	color: gray;
}

#gidgetSpeech .concept {
	color: #323231;
	font-weight: 500;
}

#thoughtfulButtons{
	position: absolute;
	left: 0px;
	bottom: 5px;
	width: 100%;
	text-align: center;
	/*background-color: rgb(230, 230, 230);*/
}


/** THING ************/

.objectSayBubble {
	position:		absolute;
	width:			auto;
	max-width:		15em;
	z-index: 		10;
	padding:		.75em;
}


/*********************************************************
****** R I G H T - P A N E L *****************************
*********************************************************/

/** M E M O R Y - B O X *********************************/

#selectedObjectMemory {
	padding: 1em;
	border-color:	rgb(247,198,59); /* colorExecution */
	border-width: 	3px; /* sizeSelection */
	border-style:	solid;
	border-radius:  3px; /* sizeBorderRadius */
}

#memory {
	width: 			auto;
	position: relative;
	padding: 1em;
	border-radius: 5px;
}

.memoryThumbnail {
	width: 40px;
	margin-bottom: -10px;
	float: right;
}

/* Anything that's highlighted should have an invisible border around it, to prevent "jumpy" content when a highlight is added.
	It's important that this appears before runtimeReference, so that runtimeReference overrides this style.
*/
.value, .propertyName {
	border-width:	1px; /* sizeSelection */
	border-style:	solid;
	border-color:	rgba(255,255,255, 0.0);
}

.sourceToken.runtimeReference {
	border-radius:  3px; /* sizeBorderRadius */
	border-bottom: 3px solid rgb(140, 198, 63); /*green*/ /* colorExecution */
}

.sourceToken.runtimeError {
	border-radius: 3px;
	border-bottom: 3px solid red;
}

/*
#gidgetSpeech .runtimeReference {
	border: none;
}

.sourceToken .runtimeReference {
	border-top: none;
	border-left: none;
	border-right: none;
	border-radius: 0px;
	padding-left:	0;
	padding-right:	0;
}
*/

/* WARNING: In IE 9, anything inside a contentEditable div that has an explicitly set size, including a minimum or maximum size, will cause resize handles to appear. Do not give a source line an explicit height. */
.sourceLine {
	font-size: 		15px;
	font-weight:	normal;
	word-wrap: 		normal;
	color:			gray; 	/* This is the whitespace/comment color. All other text inside a source line is overriden by token colors. */
	line-height: 	1em;

/* 	min-height:		1em; */	/* IE 9 shows resize handles if we give a line a minimum height */
	border-width:	3px; /* sizeSelection */
	border-color:	rgba(255,255,255,0); /* This is so that when we add a border to a line, the spacing doesn't change. */
	border-style:	solid;
}

.sourceLine.breakpoint {
	background-color: rgb(226,226,255);
}

.sourceLine.breakpointHover, .sourceLine.breakpoint {
	border-right:	solid .5em rgb(108,122,160) !important;
}

.sourceLine.runtimeReference {
}

#goals .sourceLine {

}

/* We have a special .sourceLine for #code because not setting a fixed height causes a carriage return to bounce text coming after it. */
#code .sourceLine {
	font-weight:	normal;
	word-wrap: 		normal;
	color:			gray; 	/* This is the whitespace/comment color. All other text inside a source line is overriden by token colors. */
/* 	Note that in IE 9+, contentEditable elements with children that have position: absolute, float, width, height, zoom, display: inline-block, or other layout properties cause resize handles to appear. So we don't give lines a height. But we need to give them a height so that when they are empty, they still take up the normal space of a line.
	http://stackoverflow.com/questions/3603050/remove-resize-handles-and-border-from-elements-with-contenteditable
*/
	border-width:	3px; /* sizeSelection */
	border-color:	rgba(255,255,255,0); /* This is so that when we add a border to a line, the spacing doesn't change. */
	border-style:	solid;
}

.runtimeInfoContainer {
	font-family: 	"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:		small;
	width:			auto;
	text-align: 	left;
}

.thing {
	height:			2em;
}

.objectValue .thing {
	height:			1em;
}

.objectValue {
	font-family:	Verdana, sans-serif;
	font-size:		x-small;
	text-align:		center;
	display:		inline-block;
}

.bracket {
	font-family:	Verdana, sans-serif;
	color:			black;	/* colorText */
	display:		inline-block;
}

.listValue {
	display:		inline-block;
	text-align:		left;
	padding:		0em;
	margin:			0em;
}

.primitiveValue {
	color:			rgb(126,154,68); /* colorTokenLiteral */
}

.listValueComma {}

.scopeBox {
	padding: 		0em;
	width:			100%;
}

.scopeBox td {
	padding:		0em;
	padding-right:	1em;
	text-align: 	left;
	vertical-align: top;
}

.scopeBox td:nth-child(2) {
	text-align: 	right;
}

.propertyName {
	font-weight:	normal;
	color:	gray;
}

.isRunning{
	background-image: url("../plugins/images/colorbox_blue.png");
	background-repeat: repeat;
}

.hasError{
	background-image: url("../plugins/images/colorbox_red.png");
	background-repeat: repeat;
}

.propertyBox:nth-child(odd) {
	background-color: rgba(255, 255, 255, 0.45);
}

/* It's important that this occurs after runtimeReference, so that selections always override highlights. */
.runtimeInfoContainer .selection {
}

.sourceToken {
	font-family:	Verdana, Geneva, sans-serif;
}

.sourceToken.error {
	/*rgb(255,150,150);  syntaxErrorHighlightColor */
	border-bottom: 3px dotted rgb(255,150,150);
}

.sourceToken.identifier {
	font-style: italic;
}

.sourceToken.optional {
	color: 		gray;	/* colorTokenOptional */
}

.keyword {
	font-family: Verdana, Geneva, sans-serif;
	color:	rgb(80, 150, 225);	/* colorTokenKeyword */
}

/*.sourceToken.literal, #gidgetSpeech .object {*/
.literal {
	color:	rgb(220, 150, 35);
}

.objectReference {
	color: rgba(0,0,0, .8);
}

.objectReference.reserved {
	color: rgba(125,125,125, .5);
}

.runtimeInfoContainer input[type='text'] {
	width: 4em;
	text-align: center;
	border: 1px solid gray;
	border-radius: 3px;
	padding: .25em;
}

.dictionaryTerm {
	color: rgb(187,163,208);
}


/** E X A M - B O X *************************************/

#examThought {
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
	border: 1px solid rgb(204,204,204);
	background-color: 	rgb(255,255,255); /* colorInactivePanel */

	font-family:		Verdana, sans-serif;
	height:				3.5em;
	width:				99.5%;



	border-top-style: none;

	overflow: 		visible;
	float:			right;
}

#examBox {
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;

	display: none;


	padding: 		1em;
	overflow:		auto;

	font-family:	Verdana, Geneva, sans-serif;
	font-size:		15px;
	width:			auto;
	text-align: 	left;
}

#examQuestion {
	padding-bottom: 1em;

}

.radioLeft {
   float: left;
   position: relative;
   margin-bottom: 1em;
}

.textBlock {
    float: left;
    width: 80%;
}

#playerExplanation[disabled="disabled"] {
	background-color: 	rgb(220,220,220); /* colorInactivePanel */
}

#playerExplanation {
	color:				black;
	background-color: 	white;	/* colorEditorEnabled */
}

#main_buttonSubmitExamAnswer {
	padding: 22px 0px;
	height: 12px;
	width: 100%;
	margin: 0px;
	border-radius: 0px;
}




/*********************************************************
****** T R I G G E R E D - B O X E S *********************
*********************************************************/

/** L O A D / I N T R O - B O X *************************/

.progress {
	margin-top: 		1em;
	padding:			1em;
	background-color: 	rgb(220,220,220); /* colorInactivePanel */
	height: 			1em;
	overflow-x: 		visible;
	white-space: 		nowrap;
}

.introBox {
	background:		rgb(240,240,240); /* colorPopupPanel */
	font-family: 	Verdana, sans-serif;
	border-style:	solid;
	border-width:	1px; /* sizeBorderWidth */;
	border-color:	gray; /* colorPanelBorder */
	border-radius: 	3px; /* sizeBorderRadius */
	color: 			black;	/* colorText */

	padding:		1em;
	padding-top:	0em;
	position: 		fixed;
	width:			25em;
	margin-left:	-15em;
	top:			4em;
	left:			50%;
}

.introBox p {
	color: black;	/* colorText */
}

/** P O P U P - W I N D O W  ****************************/

input:required:invalid, input:focus:invalid {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC');
    background-position: right top;
    background-repeat: no-repeat;
    -moz-box-shadow: none;
}

input:required:valid {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=');
    background-position: right top;
    background-repeat: no-repeat;
}

.viewCode {
	margin-left: 1em;
	font-size: 13.5px;
	border-bottom: 2px solid black;
}

.viewCode:hover {
	color: pink;
	cursor: pointer;
	border-bottom: 2px solid pink;

}

.youSureText{
	font-size: 14px;
	margin-right: 32px;
	float: right;
	color: #7E7E7E;
}

.youSureText:hover{
	color: normal;
}

.levelButton {
	padding: 10px 10px 10px 10px;
	text-decoration: none;
}

#deleteConfirm{
	margin-right: 9px;
}

#deleteNegate{
	margin-right: 11px;
	border-bottom: 3px solid #7E7E7E;
	background: #B1B1B1;
}

#deleteNegate:hover{
	border-bottom: 3px solid #AAAAAA;
	background: #D3D1D1;
}

.deleteButton{
	opacity: 0.5;
	margin-right: 39px;
	float: right;
	text-decoration: none;
	transition: opacity 0.2s;
}

.deleteImg {
	width: 29px;
}

.deleteButton:hover{
	opacity: 1;
}

.publishButton img{
	width: 100px;
	opacity: 1;
	-webkit-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

.publishButton{
	float: right;

	/*
	cursor: pointer;
	color: white;
	font-size: 10px;
	background: #6aac3f;
	border-bottom: 3px solid #22721c;
	padding: 5px;
	text-decoration: none;
	float:right;
	margin-right: 9px;
	*/

}

.publishButton img:hover{
	opacity: 1;
}

.levelTitle{
	display: inline-block;
	width: 360px;
}

/*
.levelTitle:hover{
	color: rgba(93,170,165,0.69);
	cursor: pointer;
}
*/

.deleteButton:hover, .levelTitle span:hover {
	cursor: pointer;
}

#showAllLevels{
	margin-top: 10px;
	width: 100%;

	overflow: auto;
	padding-bottom: 1.5em;
	height: 350px;
}

#showAllLevels p {
	margin: 0;
	font-weight: bold;
	font-size: 12pt;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 1em;
	-webkit-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
}


#showAllLevels p:nth-child(even) {
	background-color:#fff;
}

#showAllLevels p:nth-child(odd) {
	background-color:#eee;
}

#showAllLevels p:hover{
	cursor: pointer;
	background-color: rgb(246,197,73);
}

.createLevelImage{
	width: 35px;
}

#customLevelListViewTopBar {
	width: 100%;
	padding-bottom: 7px;

}


#customLevelListViewTopBar h1{
	color: black;
	font-size: 30px;

	/*
	width: 236px;
	margin-left: 24px;
	display: inline-block;
	*/
}

#customLevelListViewTopBar a {
	top: 8px;
	position: relative;
	margin-right: 7px;
	text-decoration: none;
}

#customLevelListViewTopBar a:hover{
	opacity:1;
	cursor: pointer;
}

#customLevelListViewTopBarRight {
	float: right;
}

.publishDisabled{
	background: rgba(106, 172, 63, 0.5);
	border-bottom: 3px solid rgba(34, 114, 28, 0.39);
}

.publishDisabled:hover{
	background: rgba(106, 172, 63);
	border-bottom: 3px solid rgba(34, 114, 28);
}

#seeOtherLevelsButton {
	margin-left: 280px;
}

#seeYourLevelsButton {
	margin-left: 113px;
}


/** Q U I T - C O N F I R M - B O X **********************/

/*
#quit {
	background:		#fcc;
	color:			#333;
	text-align:		left;
	border-radius:	1em;
	-moz-border-radius: 1em;
}
*/

/** S U R V E Y - B O X *********************************/

#quitSurveyModal {
	overflow-x: hide;
	overflow-y: auto;
	height: 420px;
}

#quitSurveyModal p,td {
	/*font-size: small; */
	font-size: 14px;
	line-height: 1.7;
}

#quitSurveyModal td {
	padding-bottom: 1em;
}


/**L A N D I N G --- P A G E **/

	.sideTab {
		-webkit-transform-origin: 0% 0%;
	    -webkit-transform: rotate(-90deg);
	    float:  left;
	    position: absolute;
	    left: -30px;
	    top: 195px;
	    background-color: #79CBE8;
	    padding: 5px;
	    padding-left: 10px;
	    padding-right: 10px;
	    border-top-left-radius: 5px;
	    border-top-right-radius: 5px;
	    cursor: pointer;
	}

	.sideContent{
		display: none;
		background-color: rgb(245, 245, 245);
		position: absolute;
		left: 0px;
		top: 49px;
		border-style: solid;
		border-width: thin;
		border-left: none;
		padding: 40px;
		z-index: 1;
		margin-right: 40px;
		margin-bottom: 34px;
		height: 340px;
	}


/** R E V E A L - M O D A L S ***************************/

	.reveal-modal-bg {
		position: fixed;
		height: 100%;
		width: 100%;
/*		background-image: url('../../media/grass.default.png');
*/		/*background: #000;*/
		background: rgba(0,0,0,.5);
		z-index: 100;
		display: none;
		top: 0;
		left: 0;
		}

	.reveal-modal {
		background-color: white;
		color: black;
		visibility: hidden;
		top: 2em;
		left: 50%;
		margin-left: -300px;
		width: 520px;
		/*background: #eee url('../plugins/images/reveal-bg.png') no-repeat -200px -80px; */
		position: absolute;
		z-index: 101;
		padding: 30px 40px 34px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-box-shadow: 0 0 10px rgba(0,0,0,.4);
		}

	.reveal-modal p {
		color: black;
	}

	.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
	.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
	.reveal-modal.large 		{ width: 640px; margin-left: -360px;}
	.reveal-modal.tall 			{ width: 640px; margin-left: -360px;}
	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}

	.reveal-modal.mid 			{ width: 300px; margin-left: -190px; padding-left: 1em; padding-right: 1em;}
	.reveal-modal.fixedHeight 	{ height: 28em; padding: 30px 40px;}

	.reveal-modal .close-reveal-modal {
		font-size: 22px;
		line-height: .5;
		position: absolute;
		top: 8px;
		right: 11px;
		color: #aaa;
		text-shadow: 0 -1px 1px rbga(0,0,0,.6);
		font-weight: bold;
		cursor: pointer;
	}


	.reveal-modal.expand { width: 90%; margin-left: -45%; }
	.reveal-modal .row { min-width: 0; margin-bottom: 10px; }
	.reveal-modal > :first-child { margin-top: 0; }
	.reveal-modal > :last-child { margin-bottom: 0; }

	.reveal-modal:not(.open) { display: none; }
	.reveal-modal.open { display: auto; }
	@media print { .reveal-modal { border: solid 1px #000; background: white !important; } }


	/*

	NOTES

	Close button entity is ×

	Example markup

	<div id="myModal" class="reveal-modal">
		<h2>Awesome. I have it.</h2>
		<p class="lead">Your couch.  I it's mine.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
		<a class="close-reveal-modal">&#215;</a>
	</div>

	*/

/** T O O L T I P S * & * R E F E R E N C E * G U I D E */

.tooltip {
	background-color: rgb(240,240,240); /* colorPopupPanel */
    position:	absolute;
    z-index:	979;
    left: 		-9999px;
    padding:	1em;

    border-style:	solid;
	border-width:	1px; /* sizeBorderWidth */
    border-color:	gray; /* colorPanelBorder */

    width:		14em;
	border-radius: 	3px; /* sizeBorderRadius */
}

.tooltip p {
    background-color:	rgb(240,240,240); /* colorPopupPanel */
    color:		black;	/* colorText */
    font-family:Verdana, sans-serif;
    margin:		0;
    padding:	0;

}

.cursor-dictionary {
   cursor: url(../../media/ui/cursor-reference.png), auto;
}


/****DICTIONARY*****/

#reference-modal {
	height: 448px;
	overflow-y: auto;
	width: 555px;
	float: left;
	margin-left: 20px;
}

#menuHelp {
	padding: 0px;
	overflow: hidden;
	margin-left:-400px;
}

#referenceLeft, #reference-modal {
	padding-top: 10px;
}

#referenceLeft {
	box-shadow: 5px 0px 10px #AFAFAF;
	width: 25%;
	float: left;
}

#referenceHolder {
	overflow-y: scroll;
	height: 415px;
	border-top: 1px solid grey;
}

#refHead {
	color: black;
	padding: 5px 10px;
	font-size: 14pt;
}


#referenceGuideList {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#referenceGuideList li{
	font-weight: normal;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding: 5px 0px;
	padding-left: 10px;
	font-size: 13pt;
	-webkit-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
}

#referenceGuideList li:nth-child(odd) {
	background-color: #E7E7E7;
}


#referenceGuideList li:nth-child(even) {
	background-color: white;
}


#referenceGuideList li:hover {
	cursor: pointer;
	background-color: #79cbe8;
	/*color: white;*/
}

#referenceGuideList li.referenceItemSelected {
	background-color: #79cbe8;
}


#referenceGuideList_chzn{
	width: 200px;
}

.reveal-modal h1 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: rgb(140,198,63);
	display: inline;
	margin-bottom: 5px;
}

.reveal-modal h2 {
	font-size: 12px;
	margin-bottom: 0px;
}

.reveal-modal h3 {
	margin-top: 0px;
	font-size: 12px;
	margin-bottom: 1em;
	/*color: gray;
	display: inline;*/
}

.reveal-modal p {
	font-family:	Verdana, Geneva, sans-serif;
	font-size: 12px;
	margin-top: 0px;
	margin-bottom: 1em;

}

.tooltip-sourceToken-keyword{

	color: black;	/* corresponds to sourceToken.keyword below*/
	/* rest taken from sourceLine below */
	font-size: 		small;
	font-weight:	normal;
	word-wrap: 		normal;
	font-family:	Verdana, Geneva, sans-serif;

}

.tt-optional {
	color: gray;
	font-style: normal;
}

.tooltip-variable {
	color:			rgb(194,142,64);	/* corresponds to sourceToken.literal below*/
	/* rest taken from sourceLine below */
	font-size: 		small;
	font-weight:	normal;
	word-wrap: 		normal;
	font-family:	Verdana, Geneva, sans-serif;
}

.tooltip-text {
	color:			black;
	font-size: 		11pt;
	font-weight:	normal;
	word-wrap: 		normal;
	line-height: 	20px;
}

.tooltip-text > div {
	margin-top:10px;
	margin-bottom:10px;
}

/*only for keywords in dictionary/tooltip examples so they are not hoverable in a sourceLine*/
.unhoverableKeyword {
	color:			rgb(80, 150, 225);
}

.unhoverableSourceToken {
	color: rgb(137, 172, 207);
	font-family:	Verdana, Geneva, sans-serif;
}

.unhoverableSourceTokenLiteral {
	color:			rgb(194,142,64);
	/* color:			rgb(126,154,68);	/* colorTokenLiteral */
}

.referenceQtipContainer {
	border-radius: 5px;
}

.referenceQtipContainer .qtip-title {
	cursor: move;
}

.tooltip-syntax {
	color:			gray;
}

#menuHelp.reveal-modal p {
	font-size: 12pt;
	margin: 1em 0;
}

.referenceTooltip {
	font-size: 12pt;
}

.referenceTooltip .referenceWordContainer {
	margin-top: 5px;
}

.referenceTooltip .referenceWordTitle {
	font-size: 16pt;
}

.referenceTooltip a {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #979797;

}

.referenceTooltip a:hover {
	color: orange;

}

.referenceTooltip a:active {
	color: gray;

}

.referenceTooltip > .codeContainer {
	margin-top: 10px;
	margin-bottom: 10px;
}




/* This class will eventually become a marker for
	code that the postprocessor will replace */
.gidget-code {
	color:			rgb(108,122,160);	/* corresponds to sourceToken.keyword below*/
	font-size: 		small;
	font-weight:	normal;
	word-wrap: 		normal;
}

pre.gidget-code {
	background-color: transparent;
	margin-left: 2em;
	padding: .5em;
}

.gidget-code-inline {
	color:			rgb(108,122,160);	/* corresponds to sourceToken.keyword below*/
	font-size: 		small;
	font-weight:	normal;
	word-wrap: 		normal;
}
.gidget-code-inline-error {
	font-family: courier, monospace, serif;
}

/*********************************************************
****** M I S C E L L A N E O U S - M O D I F I E R S *****
*********************************************************/

.styled-select select {
   background: transparent;
   width: 385px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
}


.align-right {
	float:right;
}

.align-left {
	float:left;
}

.smallfont{
	font-size: small;
}


/*********************************************************
****** LEVEL DESIGN STYLE  *******************************
*********************************************************/
#levelDesignHead {
	display: none;
	font-size: 22px;
	height: 38px; /*should be equal to icon heights remove odd spacing at bottom*/
}

#levelDesignLevelTitle {
	float: left;
}

#levelDesignLevelTitleField {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 20px;
	margin-left: 5px;
	min-width: 700px;
	width: 70%;
	border-radius: 0px;

	border-style:solid;
	border-color:#000000;
	border-width: 1px;
	background-color:white;
}

#levelDesignButtons {
	display: inline-block;
	padding-left: 10px;
	margin-left: 10px;
}

.levelDesignIcon {
	/*display: inline-block;
	height: 26px;
	width: 26px;
	background-size: 26px 26px;
	background-repeat: no-repeat;
	background-position: center;

	padding: 2px;
	margin-right: 10px;
	*/
}

.levelDesignIcon:hover {
	cursor: 			pointer;
	background-color: 	rgba(255,255,255,0.8);
	border-radius: 		3px;
}

#levelDesignCopy {
	display: none;
}


.levelDesignTab {
	background-color: #BCE5F4;
	border-radius: 10px 10px 0 0;
	padding: 10px 0 10px 0;

	color: rgba(120,120,120,0.5);

	font-family:		"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:			small;
	font-weight:		bold;
	text-align: center;
	display:			inline-block;
	cursor: 			pointer;

	/*blocks highlighting tabs*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.codeTab {
	width: 33.33333%;
}

.objectTab {
	width: 33.33333%;
}

.selectedTab {
	color: black;
	background-color: #79cbe8;
	/*
	border-bottom: 1px solid white;
	border-right: 1px solid black;
	border-top: 1px solid black;
	*/
}

.levelDesignObjectBox {
	display: none;
/*	width: 100%;*/
}

.levelDesignSoundPreview{
	cursor: pointer;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 10px;
	font-size: 10pt;
	background-color: rgba(0, 0, 0, 0.04);
	position: relative;
	transition: background-color .2s;
}

.levelDesignSoundPreview:hover{
	background-color: #79cbe8;
}

.objectSoundPlay  {
	position: absolute;
	right: 20px;
	top: 5px; /*levelDesignSoundPreview padding - this padding*/
	font-size: 15px;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 3px;
	transition: background-color .2s;
}

.objectSoundPlay:hover {
	background-color: white;
}

#levelDesignObjectSelector {
	/*width: 245px;*/
	height: 300px;
	/*padding-left: 18px;*/
	vertical-align: top;
	text-align: left;
	overflow-x: hidden;
	overflow-y: scroll;
}


#levelDesignSoundSelector{
	overflow-y: scroll;
	height: 300px;
}


#levelDesignGroundSelector {
	text-align: left;
	overflow-x: auto;
	overflow-y: scroll;
	height: 300px;
}

.levelDesignObjectBox .levelDesignObjectPreview {
	margin: 1px;
	cursor: pointer;
	display: inline-block;
}

.levelDesignObjectPreview img {
	width: 3em;
	height: 3em;
}

.ldIcon {
	position: relative;
	top: 13px;
}

#levelDesignColumnSlider {
	margin-top: 2em;
	margin-bottom: 1em;
	width: 100%;
}

#levelDesignRowSlider {
	margin-top: 8px;
	margin-left: .5em;
	height: 300px;
}

#levelDesignMissionText {
	width: 100%;
}

#levelDesignMissionTextTable {
	width: 100%;
	border-spacing: .1em;
	text-align: center;
}

#levelDesignMissionTextTable .ui-button-text {
	padding: .25em;
	line-height: .9;
}

#main_buttonExamTextNext {
	/*float: right;*/
}

/*speech text navigation buttons*/
/********************************/

.ui-step-button {
	/*
	display: inline-block;
	width: 50%;
	*/
	text-align: center;
	-moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    /*background-color: lightgray;
    padding: 2px;*/
    display: inline;
    /*padding: 0 10px 0 10px;*/
    cursor: pointer;
    padding: 5px;
    border-radius: 15px;
}

.ui-step-button i {
	background-color: white;
	border-radius: 10px;
	padding: 2px 3px;
}

.ui-step-button-enabled, #main_buttonNextLevel, #main_buttonRetryLevel {
	-webkit-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
	cursor: pointer;
	/*content: "Next level";*/
}

.ui-step-button-stop {
	font-size: 8pt;
	padding: 5px;

	position: relative;
	top: -3px;
}
i.ui-step-button-stop {
	/* Makes the white cirle background bigger */
	padding: 4px;
}

.ui-step-button-disabled {
	cursor: default;
	background-color: none;
	color: lightgray;
}

.ui-step-button-enabled:hover {
	background-color: gray;
	color: white;
}

.ui-step-button-enabled:hover i {
	color: rgb(100, 100, 100);
}

#main_buttonNextLevel, #main_buttonRetryLevel {
	padding-left: 10px;
	padding-right: 10px;
	background-color: white;
}

#main_buttonNextLevel {
	color: green;
}

#main_buttonNextLevel:hover {
	background-color: rgb(140, 198, 63);
}

#main_buttonRetryLevel { /*same hover as ui-step-button*/
	color: rgb(100, 100, 100);
}

#main_buttonRetryLevel:hover {
	background-color: rgb(100, 100, 100);
	color: white;
}

#main_buttonMissionTextPrevious {
	padding-right: 10px;
	margin-right: 5px;
}

#main_buttonMissionTextNext, #main_buttonExamTextNext {
	padding-left: 10px;
	margin-left: 5px;
}

/**************************************/
/* END SPEECH TEXT NAVIGATION BUTTONS */

#levelDesignMissionTextTable button {
	padding: .25em;
	margin: 0;
}

#levelDesignMissionTextTable td:nth-child(1) {
	width: 2em;
}

#levelDesignMissionTextTable td:nth-child(2) {
	width: auto;
}

.levelDesignMissionTextString {
	width: 90%;
}

.levelDesignMissionTextState {
	cursor: pointer;
}

#titleBarLeft.testingMode #levelTitle {
	font-size: 20px; /*makes the title look proper*/
	float: left;
}

/*********************************************************
****** T E S T - C O D E  ********************************
*********************************************************/



/* For numbered lists with sections. */
html>/**/body ol { /* Won't be interpreted by IE6/7. */
    list-style-type: none;
    counter-reset: level1;
}
ol li:before {
    content: counter(level1) ". ";
    counter-increment: level1;
}
ol li ol {
    list-style-type: none;
    counter-reset: level2;
}
ol li ol li:before {
    content: counter(level1) "." counter(level2) " ";
    counter-increment: level2;
}
ol li span { /* For IE6/7. */
    margin: 0 5px 0 -25px;
}





#search {

}

input[type='text'] {
    border: 1px solid #d1d1d1;
    font: normal small Arial,Helvetica,Sans-serif;
    color: black;
    padding: 3px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    /*text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);*/
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
}

#search input[type="text"] {
    background: url(../../media/ui/search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    /*text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);*/
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

/*
#search input[type="text"]:focus {
    width: 200px;
}
*/

.dictionary-tooltip .qtip-titlebar{
		background-color : rgb(255, 255, 0);
}

.qtip .ig-character {
	display: none;
}

.qtip .ig-character.ig-bottom-reference {
	display: inline-block;
}

/*********************************************************
****** I N T R O  ****************************************
*********************************************************/

#intro_codePane{
	width: 400px;
	height: 400px;
}

#intro_canvas{
	width: 600px;
	height: 400px;
	background-color: red;
}

/*
#row-numbers div {
	height: 32px;
	margin-top: 29px;
}

#column-numbers span {
	width: 59px;
}
*/


/* TRANSITIONS */

.thoughtTable, .codeContainer, .debugButton {
	-webkit-transition: padding 0.2s ease-in-out;
	transition: padding 0.2s ease-in-out;
}

#gidgetSpeech, .debugButton {
	-webkit-transition: font-size 0.2s ease-in-out;
	transition: font-size 0.2s ease-in-out;
}

.debugButton {
	-webkit-transition: background-color 0.2s ease-in-out;
	transition: background-color f0.2s ease-in-out;
}

#userNameHolder {
	-webkit-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
}

#codeArea, #grid,#codeArea, #column-numbers span {
	-webkit-transition: width 0.2s ease-in-out;
	transition: width 0.2s ease-in-out;
	-webkit-transition: height 0.2s ease-in-out;
	transition: height 0.2s ease-in-out;
}

#codeMissionContainer, #code, #worldCode, #solutionCode, #goals {
	transition: height .2s;
}

#titleBarLeft {
	-webkit-transition: left 0.2s ease-in-out;
	transition: left 0.2s ease-in-out;
}

#grid, #worldContainer {
	-webkit-transition:  width 0.2s ease-in-out;
	transition: width 0.2s ease-in-out;
	-webkit-transition:  height 0.2s ease-in-out;
	transition: height 0.2s ease-in-out;
}

#row-numbers div {
	-webkit-transition:  margin-top 0.2s ease-in-out;
	transition: margin-top 0.2s ease-in-out;
	-webkit-transition:  height 0.2s ease-in-out;
	transition: height 0.2s ease-in-out;
}

#thoughtContent {
	-webkit-transition:  margin-top 0.2s ease-in-out;
	transition: margin-top 0.2s ease-in-out;
	-webkit-transition:  height 0.2s ease-in-out;
	transition: height 0.2s ease-in-out;
}



/** T U T O R I A L ***********************************/

#welcome-text{
	font-size: 14px;
	margin: 0;
	padding: 0;
}

/** D E P R E C A T E D *******************************/