h1 { margin:0 }
#userAnswer { background-color: #aaf }
#answerText { text-align: center; padding: .5em; background-color: #fdd }
#questionText { text-align: center; padding: .5em; background-color: #dfd }
#message { background-color: #ddf }

body{
	font-family: sans-serif;
	font-size: 12px;
}
/* Basic styles for the front and back of the widget */
#mainView{
	display: block;
	width: 400px;
	height: 300px;
	background: transparent url(img/400_300_cyan.png) 0px 0px no-repeat;
}
#configView{
	display: none;
	width: 400px;
	height: 300px;
	background: transparent url(img/400_300_cyan.png) 0px 0px no-repeat;
}
/* Style and positioning of the main and config views. This relates to the part of the widget that contains the UI for the widget */
#mainEditableContent{
	position: absolute;
	top: 35px;
	left: 22px;
	background: transparent;
	width: 365px;
	height: 235px;
}
#configEditableContent{
	position: absolute;
	top: 35px;
	left: 22px;
	background: transparent;
	width: 365px;	
	height: 235px;
}

/* The buttons on the top left of the widget */
.reloadButton{
	position: absolute;
	top: 23px;
	left: 349px;
	width: 15px;
	height: 15px;
	background: transparent url(img/reloadButton15px.png)  no-repeat;
}
.configButton{
	position: absolute;
	top: 23px;
	left: 364px;
	width: 15px;
	height: 15px;
	background: transparent url(img/configButton15px.png) no-repeat;
}
.closeButton{
	position: absolute;
	top: 23px;
	left: 378px;
	width: 15px;
	height: 15px;
	background: transparent url(img/closeButton15px.png) no-repeat;
}
/* common settings for all elements belonging to the button class */
.button:hover{
	background-position: 0 50%;
}
.button:active{
	background-position: 0 100%;
}