body {
	font-size: 100%;
	background: rgb(243,243,245);
	margin:0px;
}
.img {
	position:absolute;
	z-index:1;
}
#container {
    display: inline-block;
    width:700px; 
    height:500px;
    margin: 5px; 
    background: rgb(255,255,255);
    position: absolute; 
    border:1px solid black; 
    border-radius: 0px; 
    box-shadow: 0px 0px 10px black;
}
#gameCanvas {
    position:relative; /* may want to make absolute! */
    z-index:10;
}
#startButton {
	text-align: center;
	display: inline-block;
    font-weight: bold;
    padding: 10px;
    position: absolute; 
    border: 2px solid black; 
    top: 16em;
    left: 24.2em;
    border-radius: 5px;
    background: rgb(255,255,255);
	cursor: pointer;
}
#nextButton {
	text-align: center;
	display: inline-block;
    font-weight: bold;
    padding: 8px;
    position: absolute; 
    border: 2px solid black; 
    top: 16em;
    left: 24.2em;
    border-radius: 5px;
    background: rgb(255,255,255);
	cursor: pointer;
}
#restartButton {
	position: absolute;
	top: 3.75em;
	right: 3.35em;
	z-index: 2;
	padding: 0.45em 0.75em;
	color: #111;
	font-weight: bold;
	background: rgb(255,255,255);
	border: 2px solid black;
	border-radius: 5px;
	cursor: pointer;
}
#restartButton:hover {
	background: rgb(0,100,230);
}
#startLabel {
	position: absolute;
	top: 3.5em;
    left: 7em;
	z-index: 1;
	width: 5em;
	margin: 0;
	color: black;
	font-family: 'Bowlby One SC', cursive;
	font-size: 200%;
	line-height: 1.2;
	text-align: center;
}
.pattern {
	display:inline-block;
    width:3em; 
    height:3em;
    position: absolute; 
    border:1px solid black; 
    top: 4em;
    text-align: center;
}
.pattern2 {
	display:inline-block;
    width:3em; 
    height:3em;
    position: absolute; 
    border:1px solid black; 
    top: 8em;
    text-align: center;
}
.pattern3 {
	display:inline-block;
    width:3em; 
    height:3em;
    position: absolute; 
    border:1px solid black; 
    top: 12em;
    text-align: center;
}
.pattern4 {
	display:inline-block;
    width:3em; 
    height:3em;
    position: absolute; 
    border:1px solid black; 
    top: 16em;
    text-align: center;
}
#p0 {
	left: 3em;
	background: rgba(0,0,0,0); 
}
#p1 {
	left: 7em; 
	background: red;  
}
#p2 {
	left: 11em; 
	background: blue;
}
#p3 {
	left: 15em;
	background: red;
}
#p4 {
	left: 19em;
	background: blue;
}
#p5 {
	left: 23em; 
	background: rgba(0,0,0,0);
}
#p6 {
	left: 27em; 
	background: rgba(0,0,0,0);
}
#p7 {
	left: 31em; 
	background: rgba(0,0,0,0);
}
#p8 {
	left: 35em; 
	background: rgba(0,0,0,0);
}
#p9 {
	left: 39em; 
	background: rgba(0,0,0,0);
}
#p20 {
	left: 3em;
	background: rgba(0,0,0,0); 
}
#p21 {
	left: 7em; 
	background: rgba(0,0,0,0); 
}
#p22 {
	left: 11em; 
	background: rgba(0,0,0,0);
}
#p23 {
	left: 15em;
	background: rgba(0,0,0,0);
}
#p24 {
	left: 19em;
	background: rgba(0,0,0,0);
}
#p25 {
	left: 23em; 
	background: rgba(0,0,0,0);
}
#p26 {
	left: 27em; 
	background: rgba(0,0,0,0);
}
#p27 {
	left: 31em; 
	background: rgba(0,0,0,0);
}
#p28 {
	left: 35em; 
	background: rgba(0,0,0,0);
}
#p29 {
	left: 39em; 
	background: rgba(0,0,0,0);
}
#p30 {
	left: 3em;
	background: rgba(0,0,0,0); 
}
#p31 {
	left: 7em; 
	background: rgba(0,0,0,0); 
}
#p32 {
	left: 11em; 
	background: rgba(0,0,0,0);
}
#p33 {
	left: 15em;
	background: rgba(0,0,0,0);
}
#p34 {
	left: 19em;
	background: rgba(0,0,0,0);
}
#p35 {
	left: 23em; 
	background: rgba(0,0,0,0);
}
#p36 {
	left: 27em; 
	background: rgba(0,0,0,0);
}
#p37 {
	left: 31em; 
	background: rgba(0,0,0,0);
}
#p38 {
	left: 35em; 
	background: rgba(0,0,0,0);
}
#p39 {
	left: 39em; 
	background: rgba(0,0,0,0);
}
#p40 {
	left: 3em;
	background: rgba(0,0,0,0); 
}
#p41 {
	left: 7em; 
	background: rgba(0,0,0,0); 
}
#p42 {
	left: 11em; 
	background: rgba(0,0,0,0);
}
#p43 {
	left: 15em;
	background: rgba(0,0,0,0);
}
#p44 {
	left: 19em;
	background: rgba(0,0,0,0);
}
#p45 {
	left: 23em; 
	background: rgba(0,0,0,0);
}
#p46 {
	left: 27em; 
	background: rgba(0,0,0,0);
}
#p47 {
	left: 31em; 
	background: rgba(0,0,0,0);
}
#p48 {
	left: 35em; 
	background: rgba(0,0,0,0);
}
#p49 {
	left: 39em; 
	background: rgba(0,0,0,0);
}
.block {
	display:inline-block;
    width:4em; 
    height:4em;
    position: absolute; 
    border:0px solid black; 
    border-radius: 0px; 
    top: 22em;
	cursor: pointer;
}
#redB {
    background: red;  
    left: 5em;
}
#blueB {
    background: blue;
    left: 10em;
}
#yellowB {
    background: yellow;
    left: 15em;
}
#turquoiseB {
    background: turquoise;
    left: 20em;
}
#orangeB {
    background: darkorange;
    left: 25em;
}
#greenB {
    background: lawngreen; 
    left: 30em; 
}
#magentaB {
    background: magenta;  
    left: 35em;
}

p {
	font-size:150%;
	margin:2px;
}
h2 {
	position: absolute;
    left: 2em;
}
h1 {
	position: absolute;
    left: 1.4em;
    top: 0em;
    margin: 0em;
}
#linkbox {
	position: absolute;
    left: 2.5em;
    top: 33em;
}
#whiteboard {
	position: absolute;
	width: 38.6em; 
    height: 24em;
    left: 2.8em;
    top: 3em;
    z-index: -1;
    background-color: rgb(253,252,252);
}