@charset "utf-8";
article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}a,hr{padding:0}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}ins,mark{background-color:#ff9;color:#000}body{line-height:1}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;font-size:100%;vertical-align:baseline;background:0 0}ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}
/* CSS Document */
body {
	font-family: 'PT Sans', sans-serif;
	font-size:13px;
}
#left, #right {
	float:left;	
}
#left {
	width:100%;	
}
#right {
	padding-top:35px;	
}
#pixelking {
	float:right;
	margin-top:-150px;	
	padding-right:20px;
}

#pixelking img {
	float:left;	
}

/* GRID */
#grid {
	border-left:1px solid #999;
	border-top:1px solid #999;
	display:inline-block;
	background-color:#fff;
	margin:25px 0 0 25px;
}

/* FORM TABLE */
#form {
	float:left;
	padding:10px 0;
	background: #f3eee9;
	color:#000;
	width:100%;
	margin-bottom:20px;
}

/* FORM TABLE */
.space {
	width:25px;	
}

#form form {
	padding-left:15px;
}

#formtable td {
	padding:2px 4px 0px 2px;	
}

#title {
	float:right;
	font-size:18px;	
	padding-right:20px;
	margin-top:-25px;
	text-transform:uppercase;
}	


/* COLOR PICKER HOLDER */
#colorpickerHolder {
	margin-top:10px;
}

/* DIRECTIONS */
.zoom1 .pixel {
	height:1px;
	width:1px;	
}
.zoom2 .pixel {
	height:5px;
	width:5px;	
}
.zoom3 .pixel {
	height:10px;
	width:10px;	
}
.zoom4 .pixel {
	height:15px;
	width:15px;	
}

/* PIXELS */
.pixel {
	border-bottom:1px solid #999;
	border-right:1px solid #999;
	margin:0;
	display:block;
	float:left;
}

.pixel:hover {
	border-bottom:1px dashed #666;
	border-right:1px dashed #666;
}

/* CLEAR */
.clear {
	clear:both;
}

/* BUTTONS */
.start {
	background-color:#27ae60;	
}

.save {
	background-color:#2980b9;	
}

.zooms-in {
	background-color:#7f8c8d;	
}
.zooms-out {
	background-color: #95a5a6;
}
input[type=button] {
	color:#fff;
	padding:6px 12px;
	border:0;
	font-weight:normal;
	cursor: pointer;
	outline: 0;
}

input[type=button]:active {
	position:relative;
	top:1px;
}

input[type=number] {
	border:1px solid #000;
	padding:5px;	
}

h2 {
	font-size:18px;	
	padding:0 0 5px 0;
}
#directions, #hints {
	padding:0 0 15px 25px;
	float:left;
	line-height:20px;
}
#directions ol, #hints ul{
	padding-left:25px;	
}

#colorgrid {
	padding-left:25px;
}

/* SPEECH BUBBLE */
.arrow_box {
	position: relative;
	background: #f3eee9;
	float:left;
	padding:1rem 0.75rem;
	margin-top:90px;
	text-align:center;
	width:200px;
	margin-right: 0.75rem;
	line-height: 20px;
}
#sound {
	visibility:hidden;	
}