#staticMenu {	
	
	width:30px;
	height:100%;

	/*cursor:pointer;*/ /*MENOTE: As the menu opens on roll over this is not necessary */
}

#mainNav  {
	position: relative;
	top: 0;
	left: 0;
	width: 152px;
	height: 100%;
	color: #7c807f;
	text-decoration: none;
	font-size: 8pt;
	
	pointer-events: none;
}

.menuPerspective  {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0 0 12px 0;
	/*overflow: hidden;*/
}

.betaCorner  {
	position: absolute;
}

#menu  {
	left: 0px;
	top: 0px;
	width: 152px;
	height: 100%;
	position: absolute;
	cursor: default;
}





#menuOpener {
	background: #3f4545; /* Old browsers */
	 /* @alternate */ background: -moz-linear-gradient(top,  #3f4545 0%, #3e4746 100%); /* FF3.6+ */
	 /* @alternate */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f4545), color-stop(100%,#3e4746)); /* Chrome,Safari4+ */
	 /* @alternate */ background: -webkit-linear-gradient(top,  #3f4545 0%,#3e4746 100%); /* Chrome10+,Safari5.1+ */
	 /* @alternate */ background: -o-linear-gradient(top,  #3f4545 0%,#3e4746 100%); /* Opera 11.10+ */
	 /* @alternate */ background: -ms-linear-gradient(top,  #3f4545 0%,#3e4746 100%); /* IE10+ */
	 /* @alternate */ background: linear-gradient(top,  #3f4545 0%,#3e4746 100%); /* W3C */
	left: 0px;
	top: 0px;
	width: 29px;
	height: 100%;
	position: absolute;
	z-index:2;

	-webkit-transition: margin-left 0.3s ease-out;
	-moz-transition: margin-left 0.3s ease-out;
	
	pointer-events: auto;
}

#menu.open #menuOpener, #menu.splash #menuOpener {
	margin-left: -29px;
}

#menuOpenButton  {
	position: relative;
	top: 20px;
	left: 5px;
	width: 16px;
	height: 13px;
	background: url("../../../files/images/common/menu-icon.svg") no-repeat scroll center center;
}

#menuOpener .soundButton {
	position: absolute;
	width: 100%;
	height: 30px;
	bottom: -1px;
	text-align: center;
}

.soundButton .soundButtonStates {
	cursor:pointer;
}

.soundButtonStates span {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	
	-webkit-transition: opacity 0.4s ease-out;
	-moz-transition: opacity 0.4s ease-out;
}

.soundButtonStates span:nth-child(1) {
	background: url("../../../files/images/common/mute/mute-collapsed-sound.svg") no-repeat scroll center center;
}

.soundButtonStates span:nth-child(2) {
	background: url("../../../files/images/common/mute/mute-collapsed-sound-rollover.svg") no-repeat scroll center center;
	opacity: 0;
}

.soundButtonStates span:nth-child(3) {
	background: url("../../../files/images/common/mute/mute-collapsed-muted.svg") no-repeat scroll center center;
	opacity: 0;
}

.soundButtonStates span:nth-child(4) {
	background: url("../../../files/images/common/mute/mute-collapsed-muted-rollover.svg") no-repeat scroll center center;
	opacity: 0;
}

/* Normal */
#menuOpener .soundButton:hover .soundButtonStates span:nth-child(1) {
	opacity: 0;
}

#menuOpener .soundButton:hover .soundButtonStates span:nth-child(2) {
	opacity: 1;
}

/* Muted */

#menuOpener .soundButton.muted .soundButtonStates span:nth-child(1) {
	opacity: 0;
}

#menuOpener .soundButton.muted .soundButtonStates span:nth-child(2) {
	opacity: 0;
}

#menuOpener .soundButton.muted .soundButtonStates span:nth-child(3) {
	opacity: 1;
}

#menuOpener .soundButton.muted:hover .soundButtonStates span:nth-child(3) {
	opacity: 0;
}

#menuOpener .soundButton.muted:hover .soundButtonStates span:nth-child(4) {
	opacity: 1;
}

#menuFront {
	background: #FFFFFF;
	 /* @alternate */ background: -moz-linear-gradient(top,  #FFFFFF 0%, #f4f6f5 100%);
	 /* @alternate */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#f4f6f5)); 
	 /* @alternate */ background: -webkit-linear-gradient(top,  #FFFFFF 0%, #f4f6f5 100%); 
	 /* @alternate */ background: -o-linear-gradient(top,  #FFFFFF 0%, #f4f6f5 100%); 
	 /* @alternate */ background: -ms-linear-gradient(top,  #FFFFFF 0%, #f4f6f5 100%); 
	 /* @alternate */ background: linear-gradient(top,  #FFFFFF 0%, #f4f6f5 100%);
	left: 0px;
	top: 0px;
	width: 152px;
	height: 100%;
	position: absolute;
	margin-left: -152px;
	
	-webkit-transition: margin-left 0.3s ease-out;
	-moz-transition: margin-left 0.3s ease-out;
	
	pointer-events: auto;
}

#menu.open #menuFront {
	margin-left: 0;
}

#menuFrontUpper {
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;	
}

#mainNav hr {
	border: 0;
	left: 9px;
	width: 134px;
	height: 1px;
	background: #e6e8e8;	
}

#mainNav #menuFrontUpper hr {
	margin-top:6px;
	margin-bottom:7px;
}

#weblabLogoContainer {
	position: relative;
	height: 132px;
}

.weblabLogo {
	display: block;
	width: 112px;
	height: 112px;
	margin:auto;
	margin-top:5px;
	cursor: pointer;
}

#weblabLogoContainer .madeBy {
	top: 103px;
	left: 82px;
	color: #5C6665;
	font-family: 'Open Sans';
	font-size: 7px;

	position: absolute;
}

#weblabLogoContainer .googleLogo {
	display: block;
	top: 112px;
	left: 82px;

	position: absolute;
}

#weblabLogoContainer .clickOverlay {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 152px;
	height: 144px;
}

#loginContainer {
	position: relative;
	height: 32px;
}

#loginContainer button {
	margin-left: 10px;
	margin-top: -5px;
	width: 45px;
	height: 45px;
	float: left;

}

#loginLinks {
	position: absolute;
	left: 55px;
	top: 0px;
	width: 87px;
}

#loginLinks h6 {
	/*margin: 7px 0 0 62px;*/
	cursor: pointer;
	color: #73807f;
}

#loginLinks h6:hover {
	-webkit-transition: color 0.2s ease-out;
	-moz-transition: color 0.2s ease-out;
	color: #3e4544;
}

#loginLinks a {
	font-size: 9px;
	font-family: arial, sans-serif;
	text-decoration: none;
	text-align: left;
	/*padding: 5px 0 5px 42px;*/
	margin-top: 2px;
	margin-bottom: 0px;
	position: relative;
	color: #73807f;
	width: 100%;
	display: inline-block;
}

#loginLinks a:hover {
	-webkit-transition: color 0.2s ease-out;
	-moz-transition: color 0.2s ease-out;
	
	color: #3e4544;
}

#loginLinks .hidden {
	display: none;
}

#labReportButton {
	position:absolute;
	left: 7px;
	top:-6px;
	cursor: pointer;
}

#loginSpinner .hidden {
	display: none;
}

.hidden{
	display: none;
}

#loginContainer .hidden{
	display: none;
}

/*#menu.loggedIn #loginLinks #logoutLink {
	display: block;
}

#menu.loggedIn #loginLinks #loginLink {
	display: none;
}*/

#loginLinks a span.loginLogout {
	display: none;
}

#menu #loginLinks a {
	font-family: arial, sans-serif;
	font-size: 9px;
}

#menu #loginLinks a span.loginEmail {
	color: #9ea5a4;
}

#menu #loginLinks a:hover span.loginLogout {
	display: block;
}

#menu #loginLinks a:hover span.loginEmail {
	display: none;
}

#mainNav .mainNavButtons {
	text-align: center;
	height: 316px;
	padding-top: 9px;
}

#mainNav .experimentButton {
	position: relative;

	overflow: hidden;
	cursor: pointer;
	
	padding-top: 10px;
	padding-bottom: 2px;
}

#mainNav .experimentButtonIcons div  {
	position: relative;
	width: 30px;
	height: 100%;
	top: 0px;
}

#mainNav .experimentButtonIcons div div {
	position: absolute;
	left: 0px;
	opacity: 0;

	-webkit-transition: opacity 0.4s ease-out;
	-moz-transition: opacity 0.4s ease-out;
}

#mainNav .experimentButton .expBtnText {
	margin-top: 5px;
}

#mainNav .experimentButton .expBtnText h6 {
	color: #73807f;
	text-align:center;
	
	-webkit-transition: color 0.4s ease-out;
	-moz-transition: color 0.4s ease-out;
}

#mainNav .experimentButton .clickOverlay {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

/* Normal state */
#mainNav .experimentButton .up {
	opacity: 1;
}

#mainNav .experimentButton .over {
	opacity: 0;
}

/* Hover */
#mainNav .experimentButton:hover .over,  #mainNav .experimentButton.highlight .over  {
	opacity: 1;
}
#mainNav .experimentButton:hover .up  {
	opacity: 0;
}

/* Focused */
#mainNav .experimentButton.focused .dark {
	opacity: 1;
}
#mainNav .experimentButton.focused .up {
	opacity: 0;
}


/* Active */
#mainNav .experimentButton.active .filled{
	opacity: 1;
}
#mainNav .experimentButton.active:hover .over, #mainNav .experimentButton.active .up, #mainNav .experimentButton.active:hover .up, #mainNav .experimentButton.highlight .up {
	opacity: 0;
}

#orchestraButton .experimentButtonIcons { height: 30px}
#orchestraButton .experimentButtonIcons > div { left: 60px; }
#orchestraButton:hover .expBtnText h6, #orchestraButton.active .expBtnText h6, #orchestraButton.highlight .expBtnText h6 { color: #a96888 }

#periscopesButton .experimentButtonIcons { height: 26px; }
#periscopesButton .experimentButtonIcons > div { left: 45px; }
#periscopesButton:hover .expBtnText h6, #periscopesButton.active .expBtnText h6, #periscopesButton.highlight .expBtnText h6 { color: #66a54a }

#sandRobotsButton .experimentButtonIcons { height: 27px; }
#sandRobotsButton .experimentButtonIcons > div { left: 54px; }
#sandRobotsButton:hover .expBtnText h6, #sandRobotsButton.active .expBtnText h6, #sandRobotsButton.highlight .expBtnText h6 { color: #d07d8d }

#visualiserButton {
	padding-top: 7px;
}
#visualiserButton .experimentButtonIcons { height: 34px; }
#visualiserButton .experimentButtonIcons > div { left: 63px; }
#visualiserButton:hover .expBtnText h6, #visualiserButton.active .expBtnText h6, #visualiserButton.highlight .expBtnText h6 { color: #5192d4 }

#labtagsButton {
	padding-top: 4px;
}
#labtagsButton .experimentButtonIcons { height: 36px; }
#labtagsButton .experimentButtonIcons > div	{ left: 59px; }
#labtagsButton:hover .expBtnText h6, #labtagsButton.active .expBtnText h6, #labtagsButton.highlight .expBtnText h6 { color: #58a38a }

#mainNav .tryAnotherExperimentPrompt {	
	height:11px;
	padding:8px;


	background:#f8faf9;

	position: absolute;
	top: 332px;
	margin-left: 178px;

	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;	
	transition: all 0.5s;

	opacity: 0;
	pointer-events:none;


	margin-top:-10px;
}

#mainNav .tryAnotherExperimentPrompt.visible {
	opacity: 1;
	margin-top:0px;
}

#mainNav .tryAnotherExperimentPrompt.out {
	margin-top:10px;
}

#mainNav .tryAnotherExperimentPrompt.orchestra { top:218px; }
#mainNav .tryAnotherExperimentPrompt.teleporter { top:273px; }
#mainNav .tryAnotherExperimentPrompt.sketchbots { top:326px; }
#mainNav .tryAnotherExperimentPrompt.datatracer { top:386px; }
#mainNav .tryAnotherExperimentPrompt.labtags { top:448px; }

#mainNav .tryAnotherExperimentPrompt .arrow{
	background-image:url("../../../files/images/common/experiment-suggest-arrows.png");
	background-position:0px 0px;
	background-repeat: no-repeat;

	height:11px;
	width:17px;
	float:left;
	margin-right:6px;
}	

#mainNav .tryAnotherExperimentPrompt.orchestra .arrow { background-position:0px 0px;}
#mainNav .tryAnotherExperimentPrompt.teleporter .arrow { background-position:0px -20px;}
#mainNav .tryAnotherExperimentPrompt.sketchbots .arrow { background-position:0px -40px;}
#mainNav .tryAnotherExperimentPrompt.datatracer .arrow { background-position:0px -60px;}
#mainNav .tryAnotherExperimentPrompt.labtags .arrow { background-position:0px -80px;}

#mainNav .tryAnotherExperimentPrompt h3.suggestion { 
	position: absolute;
	text-transform: uppercase;
	margin-top:-8px;
	margin-left:22px;
	padding-right:26px;

	
}

#mainNav .tryAnotherExperimentPrompt h3.suggestion span {
	position: absolute;
	display: none;
	background:#f8faf9;
	white-space: nowrap;
	padding-top:6px;
	padding-bottom:7px;
	padding-right:8px;
} 

#mainNav .tryAnotherExperimentPrompt.orchestra .try-orchestra { color:#a96888; display:block;}
#mainNav .tryAnotherExperimentPrompt.teleporter .try-teleporter { color:#66a54a; display:block;}
#mainNav .tryAnotherExperimentPrompt.sketchbots .try-sketchbots { color:#d07d8d; display:block;}
#mainNav .tryAnotherExperimentPrompt.datatracer .try-datatracer { color:#5192d4; display:block;}
#mainNav .tryAnotherExperimentPrompt.labtags .try-labtags { color:#58a38a; display:block;}

#menu .info {
	text-align: center;
	width: 130px;
	z-index: 1;
	border-top: 1px solid #e6e8e8;
	margin: 0 0 0 8px;

	-webkit-transition: all 0.9s ease-out;
	-moz-transition: all 0.9s ease-out;  
}

#infoToggleButton {
	cursor: pointer;
	text-align: center;
	display: inline-block;
	margin: 5px auto;
	-webkit-transition: all 0.9s ease-out;
	-moz-transition: all 0.9s ease-out;
}

#infoToggleButton h6 {
	text-align: center;
	float: left;
	color: #73807f;
}

#infoToggleButton .infoButtonArrow {
	width: 20px; 
	float: left;

	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
}

.infoButtonArrow {
	margin-top: -1px; 
}



#menu.offset #infoToggleButton .infoButtonArrow {
	-moz-transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);	
}

#menu .info p {
	text-decoration: none;
	display: inline-block;

	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;  

	opacity: 0;
	pointer-events: none;
	cursor: default;
}

#menu .info p h6 { 
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;  
	text-align:center;
	color: #73807f;
}

#menu .info p:hover h6 {
	color: #414544;
}

#menu .info p.active h6, #menu .info p.active:hover h6 {
	color: #3e4544;
}

#menu .info p#infoLinkTerms {
	margin-top: 15px;
}

#menu.offset .info p {
	opacity: 1;
	pointer-events: auto;
	cursor: pointer;
}

@media all and (min-height: 700px) {
	#infoToggleButton {
		opacity: 0;
		margin-top: -4px;
		margin-bottom: -4px;
		pointer-events: none;
		cursor: default;
	}
	
	#menu .info {
		position: absolute;
		bottom: 40px;
	}

	#menu .info p {
		opacity: 1;
		pointer-events: auto;
		cursor: pointer;
	}
}

#menu.splash #mainNavFooter {
	position: absolute;
	left: 157px;
	bottom: 3px;
	width: 300px;
	padding-left: 145px;
}

#menu #mainNavFooter a {
	display: none;
}

#menu.splash #mainNavFooter a {
	display: block;
	float: left;
	padding: 0 10px 0 0;
	font-family: "DejaVuSansMono", "Courier New", Courier, monospace;
	font-size: 9px;
}

#mainNavFooterInner {
	width: 100%;
}

#mainNavFooterControls {
	position: absolute;
	display: block;
	bottom: 3px;
	left: 3px;
	width: 152px;
	height: 20px;
	z-index: 2;
}

#menu.splash #mainNavFooterControls {
	bottom: 2px;
	left: -2px;
}

#mainNavFooterControls .soundButton {
	position: relative;
	cursor: pointer;
	width: 24px;
	height: 16px;
	float: left;
	margin: 1px 2px 0 0;
}

#mainNavFooterControls .soundButton span {
	background-color: hotpink;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	
	-webkit-transition: opacity 0.4s ease-out;
	-moz-transition: opacity 0.4s ease-out;
}

#mainNavFooterControls .soundButton span:nth-child(1) {
	background: url("../../../files/images/common/mute/mute-expanded-sound.svg") no-repeat scroll center center;
}

#mainNavFooterControls .soundButton span:nth-child(2) {
	background: url("../../../files/images/common/mute/mute-expanded-sound-rollover.svg") no-repeat scroll center center;
	opacity: 0;
}

#mainNavFooterControls .soundButton span:nth-child(3) {
	background: url("../../../files/images/common/mute/mute-expanded-muted.svg") no-repeat scroll center center;
	opacity: 0;
}

#mainNavFooterControls .soundButton span:nth-child(4) {
	background: url("../../../files/images/common/mute/mute-expanded-muted-rollover.svg") no-repeat scroll center center;
	opacity: 0;
}

/* Normal */
#mainNavFooterControls .soundButton:hover span:nth-child(1) {
	opacity: 0;
}

#mainNavFooterControls .soundButton:hover span:nth-child(2) {
	opacity: 1;
}

/* Muted */

#mainNavFooterControls .soundButton.muted span:nth-child(1) {
	opacity: 0;
}

#mainNavFooterControls .soundButton.muted span:nth-child(2) {
	opacity: 0;
}

#mainNavFooterControls .soundButton.muted span:nth-child(3) {
	opacity: 1;
}

#mainNavFooterControls .soundButton.muted:hover span:nth-child(3) {
	opacity: 0;
}

#mainNavFooterControls .soundButton.muted:hover span:nth-child(4) {
	opacity: 1;
}


#mainNavFooterControls .langSelect  {
	float: left;
	width: 113px;
	height: 16px;
	padding: 0px;
	overflow: hidden;
	background: url("../../../files/images/common/select_button_up.png") no-repeat right #e6eae9;
	margin: 1px 0 0 1px;
}

#menu.splash #mainNavFooterControls .langSelect {
	background-color: #cccfcf;
}


#mainNavFooterControls .langSelect select  {
	background: none;
	width: 113px;
	height: 16px;
	padding: 0 0 0 5px;
	border: none;
	float: left;
	
	-webkit-appearance: none;

	color: #5C6665;
	font-family: "DejaVuSansMono", "Courier New", Courier, monospace;
	font-size: 9px;
	line-height: 19px;
	border-radius: 0;
	
	-webkit-transition: color 0.4s ease-out;
	-moz-transition: color 0.4s ease-out;
}

/*
#menu.splash #mainNavFooterControls .langSelect select {
	color: #cccfcf;
}
*/
#menu.splash #mainNavFooterControls .langSelect select:hover {
	color: #3e4544;
}