﻿.context-menu-notifier
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999999999;
	display: none;
	width: 0;
	height: 0;
	/*visibility: hidden;*/
	border-radius: 50%;

	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	/*-moz-transition: padding 1s ease-out;
	-o-transition: padding 1s ease-out;
	-webkit-transition: padding 1s ease-out;
	transition: padding 1s ease-out;*/
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

	.context-menu-notifier.active
	{
		display: block;
		padding: 50px;
		-moz-animation: notification 5s forwards linear;
		-o-animation: notification 5s forwards linear;
		-webkit-animation: notification 5s forwards linear;
		animation: notification 5s forwards linear;
	}

.context-menu-notifier span
{
	display: block;
	margin: -10px 0 0 -280px;
	padding: 0 5px;
	white-space: nowrap;
	font-weight: bold;
	opacity: 1;
}

@-moz-keyframes notification{
  0% { padding: 0;}
  1% { padding: 63px;}
  3% { padding: 40px;}
  5% { padding: 55px;}
  7% { padding: 48px;}
  10% { padding: 52px;}
  12% { padding: 50px;}

  12.1% { padding: 0;}
  100% { padding: 0;}
}

@-webkit-keyframes notification{
  0% { padding: 0;}
  1% { padding: 63px;}
  3% { padding: 40px;}
  5% { padding: 55px;}
  7% { padding: 48px;}
  10% { padding: 52px;}
  12% { padding: 50px;}

  12.1% { padding: 0;}
  100% { padding: 0;}
}

@keyframes notification{
  0% { padding: 0;}
  1% { padding: 63px;}
  3% { padding: 40px;}
  5% { padding: 55px;}
  7% { padding: 48px;}
  10% { padding: 52px;}
  12% { padding: 50px;}

  12.1% { padding: 0;}
  100% { padding: 0;}
}