#header {
	font-size: 0.6em;
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 20px;
	background: #eee;	
	color: #666;
}

#footer {
	font-size: 0.6em;
	position: absolute;
	bottom: 50px;
	text-align: center;
	width: 100%;
	color: #666;
}

div.hint {
	background: #ffffdd;
	color: #333;
	font-size: 0.4em;
	margin: 40px 200px;
}

div.smallp {
	/*width: 60%;*/
	padding: 0 100px;
	font-size: 0.6em;
}

div.yellownotes {
	
	width: 20%;

	background: #f33;
}

div.yellownotes  { 
	position: absolute;
	right: 0;
	top: 20%;
	display: block;
	padding:25px 25px 40px;
	margin:0 auto 20px auto;
	width:200px;
	height:180px;  
	font-size: 0.5em; 
	/*font:20px 'Gloria Hallelujah', cursive; */
	line-height:1.5;
	border:0;
	border-radius:3px;
	background: -webkit-linear-gradient(#F9EFAF, #F7E98D);
	background: -moz-linear-gradient(#F9EFAF, #F7E98D);
	background: -o-linear-gradient(#F9EFAF, #F7E98D);
	background: -ms-linear-gradient(#F9EFAF, #F7E98D);
	background: linear-gradient(#F9EFAF, #F7E98D);
	box-shadow:0 4px 6px rgba(0,0,0,0.1);
	overflow:hidden;
	transition:box-shadow 0.5s ease;
	font-smoothing:subpixel-antialiased;
	max-width:520px;
	max-height:350px;
	opacity: .8;
}

div.yellownotes:hover { box-shadow:0 5px 8px rgba(0,0,0,0.15); }
div.yellownotes:focus { box-shadow:0 5px 12px rgba(0,0,0,0.2); outline:none; }

.legend text, .arc text {
	font-size: 14px;
}

.bartext {
	font-size: 14px;
}
.bartext2 {
	font-size: 11px;
}