@font-face {
	font-family: 'Exo';
	src: url('Exo-Regular.otf') format('opentype');
}
@font-face {
	font-family: 'Exo';
	src: url('Exo-SemiBold.otf') format('truetype');
	font-weight: bold;
}

body { font-family: 'Exo',Verdana,Arial,Helvetica,sans-serif; }
input, button { font-family: inherit; }

div#content { width: 770px; margin: auto; }

div#heading { text-align: center; margin-top: 20px; font-size: 150%; }
div#heading img { vertical-align: middle; margin-right: 20px; }

div#kalendarz { position: relative; }
div#qelem {
	display: none; position: absolute; z-index: 10; left: 0px; top: 0px; font-size: 15px;
	text-align: center; border: 1px solid #9fc1e5; background-color: #ddeaf9; padding: 4px 8px 4px 8px;
}
div#qdate   { float: left; }
span#qtitle { font-weight: bold; }
div#qauthor { float: right; }

img#qimg { vertical-align: middle; padding: 4px 0; }

input#qanswer { width: 20em; }

div#solution {
	display: none; position: absolute; z-index: 10; left: 0px; top: 0px;
	border: 1px solid #9fc1e5; background-color: #fff; padding: 4px 8px 4px 8px;
}

div#solution #close {
	position: absolute; top: 0px; right: 0px; padding: 0 6px;
	border: 1px solid #9fc1e5; background-color: #9fc1e5;
	font-weight: bold; cursor: pointer;
}

div#solution p { font-size: 13px; margin: 0 0 0 10px; }
div#solution .title { text-align: center; font-weight: bold; margin-left: 0; color: #660000; }
div#solution .hint { font-weight: bold; font-size: 11px; color: #666666; padding-left: 6px; }
div#solution .space { height: 6px; }
div#solution .city { font-weight: bold; padding-left: 12px; }
div#solution .green { color: #008000; }
div#solution .greetings { text-align: center; font-weight: bold; margin-left: 0; color: #015876;}