#notifications {
	position:fixed;
	bottom:4px; right:0;
	width:100%;
	z-index:6666;
	transform:translatey(120%);
}
#notifications.notifying {
	animation:notification-rise 10s 0s 1 forwards;
}
#notifications a { text-decoration:none; }
.notification {
	width:95%;
	margin:0.1em auto;
	padding:0.5em;
	background:linear-gradient(45deg,rgba(255,240,255,0.95),rgba(240,255,255,0.95));
	color:#111;
	border-radius:0.5em;
	box-shadow:0 3px 4px rgba(0,0,0,0.2);
}
.notification p { margin:0; }
.notification time { color:gray; font-variant:all-small-caps; }
.notification i, .notification img {
	float:left;
	width:1.2em;
	margin:0.2em;
}
.close-notif {
	float:right;
	background:gray;
	color:white;
	height:1.2em;
	width:1.2em;
	border-radius:50%;
	text-align:center;
	cursor:pointer;
}
.close-notif:hover {
	background:lightgray;
}
@keyframes notification-rise {
	0%      { transform:translatey(120%); }
	10%,90% { transform:none; }
	100%    { transform:translatey(1120%); }
}
.unread {
	display:inline-block;
	vertical-align:middle;
	background:red;
	color:white;
	text-align:center;
	height:1.3em; width:1.3em;
	border-radius:50%;
	font-weight:bold;
}
#total-unread {
	position:absolute;
	top:0; right:0;
}

@media screen and (min-width:700px) {
	#notifications { max-width:290px; }
}