@font-face{
	font-family: arch;
	src: url(arch.ttf) ;
}

body{ margin: 0; padding: 0; overflow: hidden; }
body *{ font-family: arch; }


hr{
	margin-bottom: 60px;
}


.fullwidth{
	width: 50%;
}
.fullwidth h3{
	text-align: center;
}
.summary button{
	width: 50%;
	margin-left: 25%;
}


.uihint{
	padding: 8px;
	width: 100%;
	background: red;
	display: block;
	font-family: Verdana;
	font-size: 12px;
	background: #ddd;
	border: 1px solid #666;
}


.popup{ 
	width: 60%;
	min-height: 40%;

	margin-left: auto;
	margin-right: auto;
	margin-top: 6%;

	padding: 50px; 
	padding-left: 120px;
	font-size: 18px; 
	color: #000; 
	line-height: 1.5em;
	background: url(gfx/popup.png) no-repeat; 
	background-size: cover;
	text-align: justify;

	overflow: hidden;
}

#intro{

	width: 100%;
	height: 100%;
	margin-top: 0px;
	padding: 0px; 
	padding-top: 60px;

	text-align: center;
	background: #334455 url(gfx/cover.jpg) no-repeat; 
	background-size: 100% auto;
	-webkit-border-radius: 16px; border-radius: 16px;
}
#intro > p{
	background: #eee;
	padding: 30px;
	opacity: 0.9;
}

.notification{
	text-align: center;
	padding: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 20px;
	font-weight: bold;
	background: #eee;
	color: #000;
	-webkit-border-radius: 12px; border-radius: 12px;
}

.indicator{
	font-size: 16px;
	text-align: center;
	padding-top: 16px;

	font-family: Arial Black;
	color: #000;
	background: url('gfx/indicator.png') no-repeat;

	width: 160px; height: 92px;

	opacity: 0.8;
	cursor: pointer;
}
.indicator:hover{
	opacity: 1.0;
}

p.option{
	font-size: 18px;
	text-align: center;

	width: 160px;
	font-family: Arial Black;
	background: #ccc;

	padding: 6px;
	border-top: 1px dotted #999;
	margin: 0px;
}
p.option:hover{
	background: #ddd;
	cursor: pointer;
	display: list-item;
	list-style-type: none;
}


h3{
	font-size: 24px;
}

button{
	background: url(gfx/button.png) no-repeat;
	background-size: 100% 100%;
	border: 1px solid #eee;
	font-size: 22px;
	color: #e9c6af;

	padding: 20px;
	margin: 4px;
	border: none;

	cursor: pointer;
}
button:hover{
	opacity: 0.9;
}
button:active{
	opacity: 0.7;
}



div#ui{
	background: #899ab3;
	border-top: 2px solid #666;

	width: 100%;
	height: 100%;
}
div#ui #buttons{
	float: right;
	width: 25%;
}
    
@media (max-width: 768px){
	div#ui #buttons{
		width: 35%;
	}	
}


div#ui #buttons button{
	width: 57px;
	height: 57px;	
	margin-top: 16px;
	margin-right: 10px;
}
div#ui #buttons button:nth-child(1){
	background: url(gfx/restart.png) no-repeat;
}
div#ui #buttons button:nth-child(2){
	background: url(gfx/todo.png) no-repeat;
}
div#ui #buttons button:nth-child(3){
	background: url(gfx/help.png) no-repeat;
}
#help{
	padding: 120px;
	padding-top: 40px;
	font-size: 18px;
}

.hint{
	cursor: pointer;
}


.good{ color: green; }
.bad{ color: maroon; }
.hints{ color: #446688; }
.warning{ color: orange; }

.stats-bg{
	font-size: 22px;
}
.stats-bg img{
	vertical-align: middle;
	margin: 4px;
	margin-right: 10px;
	margin-left: 10px;
}

.progress-bg{
	background: #e3dedb;
	border-top: 2px solid #666;

	width: 100%;
	height: 100%;
}

#loading{
	margin-top: 16%;
	text-align: center;
	font-size: 36px;
}

.progress-label{
	text-align: center;
	width: 100%;
	font-size: 14px;
	margin-top: 5px;
}


.calendar-button{
	cursor: pointer;
	background: #ddd;
	padding-top: 4px;
	padding-bottom: 6px;
	padding-right: 16px;
	-webkit-border-radius: 8px; border-radius: 8px;
	opacity: 0.85;
}
.calendar-button:hover{
	opacity: 1.0;
}


.done{
	color: darkgreen;
	font-weight: bold;
	margin-left: 10px;
}
.undone{
	color: maroon;
	font-weight: bold;
	margin-left: 10px;
}



/* mobile */
@media screen and (max-width: : 1024px) {
	.popup{ 
		width: 80%;
		min-height: 80%;

		margin-top: 2%;

		font-size: 24px; 
	}
	h3{

	}
}