#advent {
	width: 720px;
	min-height: 760px;
	margin: 0 auto;
	background: url(christmas-illustration.png) no-repeat;
	background-position: top center;
}

#advent nav {
	width: 720px;
	position: absolute;
	text-align: center;
}

#advent nav.line-1 {margin-top: 5em;}
#advent nav.line-2 {margin-top: 11em;}
#advent nav.line-3 {margin-top: 17em;}
#advent nav.line-4 {margin-top: 23em;}




/* not yet days */
#advent nav a {
	display: inline-block;
	width: 60px;
	opacity: 0.5;
	height: 60px;
	background: url(christmas-60-gift.png) no-repeat -60px 0;
	background-size: 240px 60px;
}

#advent nav a:before {
	font-family: inherit;
	content: attr(data-number);
	display: inline-block;
	opacity: 0.5;
	width: 2em;
	line-height: 2em;
	height: 2em;
	margin-top: 3.7em;
	background: #99afb3;
	color: #fff;
	text-shadow: 0 1px 0 #80979b;
	border-radius: 50%;
	transition: all 0.2s ease-in-out;
}

/* actual day, gift is visible */
#advent nav a.day {
	cursor: pointer;
	opacity: 1;
	background-position: -120px 0;
}

#advent nav a.day:hover {background-position: -180px 0;}
#advent nav a.day:before {
	opacity: 1;
	text-shadow: 0 1px 0 #b4363f;
    background: #db4e58;
}
#advent nav a.day:hover:before {
	text-shadow: 0 1px 0 #453a38;
	background: #453a38;
}

#advent nav a.day.visited {background-position: 0 0;}
#advent nav a.day.visited:before {
	text-shadow: 0 1px 0 #80979b;
	background: #99afb3;
}

#advent nav a.day.visited:hover:before {
	background: #859a9e;
}