/* Declaring Custom Comic Sans font here*/

@font-face {
font-family:"Comic Sans";
src: url('../../../assets/comic.eot');
src: local('Comic Sans MS'),
	 url('../../../assets/comic.eot?#iefix') format('embedded-opentype'),
     url('../../../assets/comic.woff') format('woff'),
     url('../../../assets/comic.ttf') format('truetype'),
     url('../../../assets/comic.svg#webfont') format('svg');
}

#container{
	position: absolute;
	width: 800px;
	height: 600px;
}
/* Nice GRE resets applicable for all GREs*/

*{
	-webkit-user-select: none;
	-moz-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select: none;	
	
	font-size: 15px;
	font-family: "Comic Sans";
	text-shadow: 0 0 1px rgba(0,0,0,0.3);
	text-decoration:none;
	line-height: 1.15;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* 1.) Input should be selected
 * 2.) Ipad adds unnecessary default padding - setting it to zero explicitly */

input[type=text]{
	user-select:auto !important;
	-webkit-user-select:auto !important;
	-moz-user-select:auto !important;
	-ms-user-select:auto !important;
	
	padding-left: 0px;	
	padding-right: 0px;	
	margin: 0px;
}

/* 1.)superScript and subscript should have lesses font-size*
 * 2.)h1 should have larger font*/

sup, sub{
	font-size: 10px !important;
}

h1{
	font-size:26px !important;
	font-weight: bold;
	text-align: center !important;
}

#screen2Table2 input {
    text-align: center;
}

/*Resets Ends Here*/
body {
	position : absolute;
    display : flex;
    justify-content : center;
    align-items : center;
    max-height : 600px;
    width : 100%;
    height : 100%;
    margin: 0px;
	
	text-align: center;
	
	-webkit-transform: scale(1);
	-webkit-transform-origin: left top;
	
	-moz-transform: scale(1);
	-moz-transform-origin: left top;
	
	-ms-transform: scale(1);			
	-ms-transform-origin: left top;
	
	-o-transform: scale(1);				
	-o-transform-origin: left top;
	
	transform:scale(1);
	transform-origin: left top;
	
	overflow: hidden;
	
	background: white;
}

/* button related */
button{
	width: 120px;
	height: 30px;
	display: block;
	outline: none;
	cursor: pointer;
	padding: 0px;
	text-align: center;		
	
	/* defining  border Radii*/	
	-webkit-border-radius: 0.25em;				
	-moz-border-radius: 0.25em;
	border-radius: 0.25em;
	
	/* defining Transitions*/
	-webkit-transition: -webkit-transform 0.5s ease;			
	-moz-transition: -moz-transform 0.5s ease;
	-o-transition: -o-transform 0.5s ease;
	-ms-transition: -ms-transform 0.5s ease;
	transition: transform 0.5s ease;
		
	/*drop shadow and inset*/	
	-webkit-box-shadow: 0 0 4px 0 #777777;
	-moz-box-shadow: 0 0 4px 0 #777777;
	box-shadow: 0 0 4px 0 #777777;
	
	transform-origin: center;
	-webkit-transform-origin: center;
	-moz-transform-origin: center;
	-ms-transform-origin: center;
	-o-transform-origin: center;
	
	background: #ffffff;

	border:none;
	border: 1px solid grey;

	color: black;
	cursor: pointer;
}

button:enabled:active{
	position:relative;
	
	-webkit-box-shadow: 0 0px 0px -0px black, inset 0px 0px 0px 0px #ffffff;
	-moz-box-shadow:0 0px 0px -0px black, inset 0px 0px 0px 0px #ffffff;
	box-shadow: 0 0px 0px -0px black, inset 0px 0px 0px 0px #ffffff; 
	
	-webkit-transition: All 0s ease;
	-moz-transition: All 0s ease;
	-o-transition: All 0s ease;
	-ms-transition: All 0s ease;
	transition: All 0s ease;
}

button:disabled{
	-webkit-box-shadow: 0 0px 0px -0px black, inset 0px 0px 0px 0px #ffffff;
	-moz-box-shadow:0 0px 0px -0px black, inset 0px 0px 0px 0px #ffffff;
	box-shadow: 0 0px 0px -0px black, inset 0px 0px 0px 0px #ffffff; 
	
	-webkit-transform: scale(1);
	-webkit-transform-origin: center;
	
	-moz-transform: scale(1);
	-moz-transform-origin: center;
	
	-ms-transform: scale(1);
	-ms-transform-origin: center;
	
	-o-transform: scale(1);
	-o-transform-origin: center;
	
	transform:scale(1);
	transform-origin: center;
	
	color:grey;
	
	cursor:default;
}

/* buttons end here*/

#preLoaderContainer{
	height: 80px;
	width: 600px;
	position: relative;
	
	top: 250px;
	margin: 0px auto;
	text-align: center;
}
	
	#preLoaderContainer span{
		margin:0px auto;
	}
	
	#loadingImage{
		display:block;
		margin: 0px auto;
	}


#landingContainer{
	width: 800px;
	height: 600px;
	text-align: center;
	
	display: none;
}
	
#gamePrompt
{
	-moz-box-shadow: 0px 0px 4px -1px #ffffff;
	-webkit-box-shadow: 0px 0px 4px -1px #ffffff;
	box-shadow: 0px 0px 4px -1px #ffffff;
	
	width: 200px;
    position: absolute;
	padding:5px;
    padding-top: 28px;
    
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    
    min-height: 40px;
    
    text-align:center;
    top: 300px;
    left: 587px;
    display:none;
    z-index: 10001;
	
	background-color: #6D9FFF;
	
	cursor:move;
}

	#gamePromptClose{
		position: absolute;
		right:5px;
		top:5px;
		width:20px;
		height: 20px;
		background: orange;
	}
	
	#gamePromptOk{
		width: 40px;
		height: 20px;
		position:relative;
		margin: 0px auto;
		margin-top: 6px;
		background: orange;
		display:none;
	}
	
	#gamePromptCancel{
		width: 40px;
		height: 20px;
		position:relative;
		margin: 0px auto;
		margin-top: 6px;
		background: orange;
		display:none;
	}
	
	
#gameContainer{
	width: 800px;
	height: 600px;
	text-align: center;
	position: relative;
	display: none;
	
	padding-top: 1px;
	margin-top: -1px;
		
	overflow: hidden;
}


/*____________________________________________________MODULE SYTles__________________________________________________________________________*/

/* CHAPTER 1. Landing Container _____________________________________________________________________________________________________________*/

#landingContainer{
	background-color:#DDCCFF;
	background-image: radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%),
	radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%);
	background-size:80px 80px;
	background-position:0 0, 40px 40px;
}

#buttonsContainer{
	padding-top: 1px;
}

	#gameTitle {
	    background: none repeat scroll 0 0 #000000;
	    color: #FFFFFF;
	    font-size: 51px !important;
	    margin-top: 53px;
	}
	
	#gameImage{
		margin-top: 120px;
		margin: 
	}
	
	#startButton{
		position: relative;
		margin:0px auto;
		margin-top: 120px;
	}
	
#lButtonsContainer {
    height: 200px;
    margin: 0 auto;
    width: 200px;
}

#quitGame{
	display: none;
}


/* CHAPTER 2. Game Container _____________________________________________________________________________________________________________*/

#gameContainer{
	position: absolute;
	
	background-color: #FFCCA5;
	box-shadow: 0 0 5px 11px #6969FF inset;
	-moz-box-shadow: 0 0 5px 11px #6969FF inset;
	-ms-box-shadow: 0 0 5px 11px #6969FF inset;
}

	#nextButton{
		position:absolute;
		top: 530px;
		left: 500px;
	}
	
	#backButton {
	    left: 170px;
	    position: absolute;
	    top: 530px;
	}
	
	#content1{
		margin: 0px auto;
		margin-top: 20px;
		width: 700px;
	}
	
	#heading1{
		font-size: 36px !important;
		text-align: left;
	}
	
	#text1{
		text-align: left;
		margin-top: 30px;
		font-size: 23px !important;
	}
	
	#canvas1{
		margin: 0px auto;
		margin-top: 20px;
		border: 15px;
	}
	
	.screens{
		width: 100%;
		height: 100%;
		display: none;
	}
		
		#screen2Container1{
			position: absolute;
			top: 10px;
			left: 15px;
			width: 400px;
			height: 300px;
			border: 1px solid black;
		}
		
		#screen2Container1Container1, #screen2Container1Container2{
			width: 100%;
			height: 100%;
			display: none;
		}
		
		#screen2Container1Container1{
			padding: 10px;
		}


		#screen2Start{
			margin: 0px auto;
			margin-top: 120px;
		}
		
		.gameTable{
			border:1px solid black;
			border-collapse: collapse;
		}
		
		.gameTable td{
			border: 1px solid black;
		}
	
		#screen2Table1{
			position: absolute;
			left: 15px;
			top: 320px;
		}
		
		#screen2Table1 td{
			padding: 4px;
			text-align: right !important;
		}
		
		#circleDecreaseRadius{
			width: 30px;
			top: 250px;
			right: 20px;
			position: absolute;
		}
		
		#screen2 *{
			font-size: 17px !important;
		}
		
		#screen2Tip {
		    left: 15px;
		    position: absolute;
		    text-align: left;
		    top: 440px;
		    width: 400px;
		    color: blue;
		    font-size: 20px !important;
		}
		
		#circleIncreaseRadius{
			width: 30px;
			top: 250px;
			right: 60px;
			position: absolute;
		}

	#screen2Container3 {
	    border: 1px solid #000000;
	    height: 500px;
	    left: 450px;
	    position: absolute;
	    top: 10px;
	    width: 330px;
	}
	
	#screen2Table2 td{
		width: 80px;
	}
	
		#addRow{
			position: absolute;
			bottom: 30px;
			left: 30px;
		}
		
		#clearTable{
			position: absolute;
			bottom: 30px;
			right: 30px;
		}
		
	#screen2Circle{
		width: 60px;
		height: 60px;
		
		border-radius: 50%;
		border: 2px solid red;
		
		vertical-align: middle;
		display: inline-block
	}
	
	#screen2Helper{
		width: 1px;
		height: 100%;
		vertical-align: middle;
		
		display: inline-block
	}
	
				
		#screen3SparkyBites {
		    font-size: 32px !important;
		    left: 50px;
		    position: absolute;
		    top: 10px;
		}
		
		#screen3Container1 {
		    background-image: url("../assets/letterRoll.png");
		    background-size: 100% 100%;
		    left: 30px;
		    padding: 10px 84px 48px 77px;
		    position: absolute;
		    text-align: left;
		    top: 120px;
		    width: 345px;
		}

		#screen3CallOut {
		    background-image: url("../assets/callout.png");
		    background-size: 100% 100%;
		    height: 170px;
		    left: 384px;
		    padding: 35px;
		    position: absolute;
		    top: 62px;
		    width: 238px;
		    color: green;
		}
		
		
		#screen3Image {
		    left: 587px;
		    position: absolute;
		    top: 189px;
		}
		
		
		#thumb{
			  height: 426px;
			    left: 52px;
			    position: absolute;
			    top: 76px;
			    width: 428px;
		}
		
		#screen4Title{
			font-size: 30px;
			left: 488px;
			top: 20px;
			position: absolute;
		}
		
		#screen4Container2, #screen4Container1 {
		    font-size: 25px;
		    left: 493px;
		    position: absolute;
		    top: 230px;
		    width: 236px;
		    text-align: justify;
		}
		
		#screen4Container1{
			top:93px;
		}
		
		#screen5Title {
		    font-size: 24px !important;
		    left: 350px;
		    position: absolute;
		    top: 15px;
		}
		
		#screen5 span{
		    left: 30px;
		    position: absolute;
		    width: 100%;
		}

		#screen5Span1 {
		    top: 340px;
		}

		#screen5Span2 {
		    top: 390px;
		}
		
		#screen5Span3 {
		    top: 440px;
		}
		
		#screen5Circumference , #screen5Diameter, #screen5Pi{
		    width: 120px;
		}
		
			#screen5CircumferenceWrong, #screen5DiameterWrong, #screen5PiWrong {
			    color: #0000FF;
			    height: auto;
			    left: 378px;
			    position: absolute;
			    text-align: left;
			    top: -6px;
			    width: 380px;
			}
		
			
			#screen5 * {
			    font-size: 16px !important;
			}
		
			#screen5Container1 {
			    left: 291px;
			    position: absolute;
			    text-align: left;
			    top: 75px;
			    width: 400px;
			}
			
			#screen5Container2 {
			    left: 291px;
			    position: absolute;
			    text-align: left;
			    top: 175px;
			    width: 400px;
			}
			
			#screen5 span *{
				float: left;
			}

			
			#screen5Check {
			    left: 335px;
			    position: absolute;
			    top: 490px;
			}
			
			#screen5Container3 {
			    left: 30px;
			    position: absolute;
			    top: 300px;
			}
			
			#screen5 > img {
			    left: 30px;
			    position: absolute;
			    top: 22px;
			}
			
			
#screen2Table2{
	/*table-layout: fixed;*/
	border-collapse: collapse;
}			
			
#screen2Table2 td {
    height: 32px !important;
    padding: 0px;
 	margin: 0px;
}
	
#screen2Table2 input {
    height: 26px !important;
}
			
			#screen6Title {
			    font-size: 22px !important;
			    margin: 10px;
			}
			
			#screen6CircleClick{
				font-size: 22px !important;
				margin:10px;
			}
			
				#screen7 > canvas {
				    background: none repeat scroll 0 0 #FFFFFF;
				    left: 84px;
				    position: absolute;
				    top: 50px;
				}
											
				
				
				#screen7Container1 > button {
				    border-radius: 0;
				    box-shadow: 0 0 0 0 #000000;
				    font-size: 14px;
				    height: 13px;
				    line-height: 0;
				    width: 18px;
				}			
				
				#numPartsDecrementer{
					
				}
				
				#numPartsDecrementer{
					
				}
				
				
				#screen7Container1 {
				    margin: 14px auto;
				    position: relative;
				    width: 195px;
				}
				
				#screen7Text2 {
				    left: 82px;
				    position: absolute;
				    top: 490px;
				}

				#screen7Container1 > *{
					float: left;
				}
				
				#screen7NumParts {
				    height: 26px !important;
				    width: 40px;
				}
				
				.ui-slider-handle {
					position: absolute;
					width: 200px;
					height: 300px;
					border: 1px solid black;
					top: -350px;
					
					transform: translate(-50%, 0px);
					-webkit-transform: translate(-50%, 0px);
					-ms-transform: translate(-50%, 0px);
					-moz-transform: translate(-50%, 0px);
					
					background: black;
					border-radius: 5px;
					
					outline: none;
				}
				
				#chronoArrow {
				    content: url("../assets/arrow.png");
				    height: 21%;
				    left: 50%;
				    position: absolute;
				    top: 100%;
				    transform: translate(-50%, 0px);
				    -webkit-transform: translate(-50%, 0px);
				    -ms-transform: translate(-50%, 0px);
				    -moz-transform: translate(-50%, 0px);
				}
				
				#chronologySlider {
				    border: 1px solid;
				    height: 20px;
				    width: 600px;
				    position: absolute;
				    top:400px;
				    left: 100px;
				    background-image: url("../assets/tile.png")
				}
				
				#imageContainer{
					height: 68%;
				}
								
								
				#chronoImage {
				    display: inline-block;
				    height: auto;
				    vertical-align: 100%;
				    width: auto;
				}
				
				
				.helper {
				    display: inline-block;
				    height: 100%;
				    width: 1px;
				}
				
				#chronologySlider img{
					outline: none;
					border: none;
				}
				
				#chronoInfo {
				    background-color: #FFFFFF;
				    height: 32%;
				    padding: 5px;
				    position: absolute;
				    left: 0px;
				    bottom: 0px;
				    border-radius: 5px;
				    width: 100%;
				}
					
					#screen8Title {
					    font-size: 22px !important;
					    margin: 7px;
					}
					
					#screen8Text2 {
					    margin: 28px;
					    text-align: justify;
					    width: 336px;
					}
					
					#screen8 > div {
					    font-size: 21px;
					}
					
					#screen8Text3 {
					    left: 140px;
					    position: absolute;
					    top: 450px;
					}
									
					#screen8Image1 {
					    left: 384px;
					    position: absolute;
					    top: 85px;
					}
					
					#screen8Image2 {
					    left: 20px;
					    position: absolute;
					    top: 357px;
					}
				
					#screen9Title {
					    font-size: 25px !important;
					    margin-top: 10px;
					}
				
					
					#screen9Text1 {
					    left: 40px;
					    position: absolute;
					    top: 430px;
					}
					
					
					#screen9Text2 {
					    left: 375px;
					    position: absolute;
					    top: 430px;
					}
										
					#screen9Text3 {
					    left: 690px;
					    position: absolute;
					    top: 430px;
					}
					
					
					#screen10Image1 {
					    position: absolute;
					    right: 15px;
					    top: 15px;
					}
					
					#screen10Title {
					    font-size: 32px !important;
					    margin-top: 20px;
					}
					
					#screen10Text1 {
					    font-size: 18px !important;
					    margin-left: 20px;
					    margin-top: 20px;
					    text-align: justify;
					    width: 400px;
					}
					
					#screen11 > div {
					    font-size: 20px !important;
					    margin: 13px;
					    text-align: left;
					}
					
					#screen11Container{
						display: none;
					    position: relative;
					    top: 78px;
					}
					
					#screen11Text2{
						color: red;
					}
					
					#preview{
						position: absolute;
						height: 70px;
						width: 140px;
						z-index: 1000;
						top: 50px;
						left: 20px;
						background-position: 0 0;
						background-image: url('../assets/piTill-10001-Digits.png');
					}
					
					#screen11Container *{
						float: left;
					}
					
					.tableizer-table {
					    border: 1px solid #CCCCCC;
					    font-family: Arial,Helvetica,sans-serif;
					    font-size: 12px;
					    left: 200px;
					    position: absolute;
					    top: 340px;
					}
					
					.tableizer-table td {
						padding: 4px;
						margin: 3px;
						border: 1px solid #ccc;
					}
					
					.tableizer-table th {
						background-color: #104E8B; 
						color: #FFF;
						font-weight: bold;
					}
					
						#screen11Text6{
							display: none;
							color: red;
						}
						
						#screen11Text8{
							display: none;
						}
						#reveal {
						    position: absolute;
						    right: 50px;
						    top: 300px;
						}
						
						#screen12Title{
							font-size:20px !important;
							margin-top:10px;
						}
						
						
				#screen12Image1 {
				    position: absolute;
				    right: 10px;
				    top: 10px;
				}
				
				#screen12Image2 {
				    margin: 35px;
				}

				#calculator{
					position: absolute;
					z-index: 100;
					width: 200px;
					display: none;
				}
				
				.showCalculator {
				    left: 334px;
				    position: absolute;
				    top: 530px;
				    display: none;
				}

#screen12Text1 {
    font-size: 20px !important;
    margin: 21px;
    text-align: left;
}


#screen12Title {
    font-size: 30px !important;
    margin-top: 10px;
}

.magnifier-thumb-wrapper {
    height: auto;
    left: 60px;
    position: absolute;
    top: 70px;
    width: auto;
}

#screen13 > div {
    font-size: 22px !important;
    margin: 20px;
}

#lastResponse{
	width: 400px;
}