@charset "UTF-8";
/* CSS Document */
#win {display: none}
#lose {display:none}

html {
	border: solid 15px #666;	
/*  if I put border in body, it only bordered instructions div...?  */
	border-width: 25px;
	-moz-border-image: url(catfur.jpg) 14 14 14 14 repeat; 
	-webkit-border-image: url(catfur.jpg) 14 14 14 14 repeat; 
	-o-border-image: url(catfur.jpg) 14 14 14 14 repeat; 
	border-image: url(catfur.jpg) 14 14 14 14 repeat; 
}

body {background-color:#969;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
}


	
#instructions {background-color:white;
	color: #666;
	width: 450px;
	padding: 5px 80px 20px 80px;
	font-size:16px;
	float:left;
	margin: 50px 0 40px 40px;
}

#kittyThink {
	font-size:22px;
	font-weight:bold;
	letter-spacing:4px;
	text-align:center;
}

#radios {
	margin-left:40px;
}

/* consider a fixed width page instead so the kitty doesn't fall below instructions, or display inline with a wrapper, or position absolute (relative to instructions), etc. If I care. */
#right{
	float:left;
	border:solid 10px white;
	margin: 50px auto 40px 40px;
}

#winDialog {
	position: absolute;
	margin: 120px 70px;
	padding: 5px;
	background: #939;
	border: solid 1px white;
}

#loseDialog {
	position: absolute;
	margin: 30px 50px;
	padding: 5px;	
	background: #939;
	border: solid 1px white;
}

#guessForm {
	width:350px;
	font-size: 28px;
	margin-left: auto;
	margin-right: auto;
	height: 450px;
	clear: both;
}

#guessBox {
	font-size:28px;
	width:200px;
	height:40px;
}

#button {
	width:100px;
	height:30px;
	background-color:#666;
	color: white;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
}