/* Notifier */
#upfront-notifier {
	width: 100%;
	position: fixed;
	top: 0px;
	left: 0;
	background-color: transparent;
	height: 1px;
	z-index:100000;
}
#upfront-notice {
	width: 500px;
	text-align: center;
	background-color: rgba(38, 58, 77, 0.8);
	padding: 20px;
	padding-top: 30px;
	margin: 0 auto;
	border-radius: 0 0 5px 5px;
	position: relative;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	color: rgb(220,240,255);
	visibility: hidden;

	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-o-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0); /* forcing GPU acceleration */

	display: block;
	border-bottom: 2px solid rgb(31,205,143);

	-webkit-box-shadow: 0px 0px 10px rgba(10, 25, 40, 1);
	box-shadow: 0px 0px 10px rgba(10, 25, 40, 1);

	z-index: 10000;
	top:-50px;

}

#upfront-notice.warning {
	border-bottom-color: #fc3;
}

#upfront-notice.error {
	border-bottom-color: #f33;
}



/* CSS3 Animation */

.notify {
	-webkit-animation: notify 1s ease-in-out;
	-moz-animation: notify 1s ease-in-out;
	-ms-animation: notify 1s ease-in-out;
	-o-animation: notify 1s ease-in-out;
	animation: notify 1s ease-in-out; /* Safari 4+ */
}
.shake {
	-webkit-animation: shake 1s ease-in-out;
	-moz-animation: shake 1s ease-in-out;
	-ms-animation: shake 1s ease-in-out;
	-o-animation: shake 1s ease-in-out;
	animation: shake 1s ease-in-out; /* Safari 4+ */
}
#upfront-notice.open {
	opacity: 0.9;
	top: -10px;
	visibility: visible;
}
#upfront-notice.out {
	-webkit-transition: opacity 0.7s ease-in-out, top 0.7s;
	-moz-transition: opacity 0.7s ease-in-out, top 0.7s;
	-ms-transition: opacity 0.7s ease-in-out, top 0.7s;
	-o-transition: opacity 0.7s ease-in-out, top 0.7s;
	transition: opacity 0.7s ease-in-out, top 0.7s; /* Safari 4+ */
}

@keyframes "shake" {
	0% {
		top: -10px;
	}

	60% {
		top: -50px;
	}
 	80% {
 		top: 0;
 	}
	100% {
		top: -10px;
	}
}

@-webkit-keyframes "shake" {
	0% {
		top: -10px;
	}

	60% {
		top: -50px;
	}
 	80% {
 		top: 0;
 	}
	100% {
		top: -10px;
	}
}

@-moz-keyframes "shake" {
	0% {
		top: -10px;
	}

	60% {
		top: -50px;
	}
 	80% {
 		top: 0;
 	}
	100% {
		top: -10px;
	}
}

@-ms-keyframes "shake" {
	0% {
		top: -10px;
	}

	60% {
		top: -50px;
	}
 	80% {
 		top: 0;
 	}
	100% {
		top: -10px;
	}
}

@-o-keyframes "shake" {
	0% {
		top: -10px;
	}

	60% {
		top: -50px;
	}
 	80% {
 		top: 0;
 	}
	100% {
		top: -10px;
	}
}

@keyframes "notify" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity=0);
   	opacity: 0;
   	top: -800px;
 }
 50% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
   	top: -5px;
 }
 80% {
    top: -15px;
 }

100% {
	top: -10px;
}

}

@-moz-keyframes notify {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   top: -800px;
 }
 50% {
   filter: alpha(opacity=100);
   opacity: 1;
   top: -5px;
 }
 80% {
   top: -15px;
 }

100% {
	top: -10px;
}

}

@-webkit-keyframes "notify" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   top: -800px;
 }
 50% {
   filter: alpha(opacity=100);
   opacity: 1;
   top: -5px;
 }
 80% {
   top: -15px;
 }

100% {
	top: -10px;
}

}

@-ms-keyframes "notify" {
 0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   top: -800px;
 }
 50% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   top: -5px;
 }
 80% {
   top: -15px;
 }

100% {
	top: -10px;
}

}

@-o-keyframes "notify" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   top: -800px;
 }
 50% {
   filter: alpha(opacity=100);
   opacity: 1;
   top: -5px;
 }
 80% {
   top: -15px;
 }

100% {
	filter: alpha(opacity=100);
	opacity: 1;
	top: -10px;
}

}

