/* animations */

@keyframes appear {
    from {opacity: 0.0; }
	to       {opacity: 1.0; }
}

@-moz-keyframes appear { /* Firefox */
	from {opacity: 0.0; }
	to       {opacity: 1.0; }
}

@-webkit-keyframes appear { /* Chrome and Safari */
	from {opacity: 0.0; }
	to       {opacity: 1.0; }
}

@keyframes alarm {
      0%   {background-color: white; }
	 50%      {background-color: red;   }
	100%       {background-color: white; }
}

@-moz-keyframes alarm { /* Firefox */
      0%   {background-color: white; }
	 50%      {background-color: red;   }
	100%       {background-color: white; }
}

@-webkit-keyframes alarm { /* Chrome and Safari */
      0%   {background-color: white; }
	 50%      {background-color: red;   }
	100%       {background-color: white; }
}

/* styling */

body {
    animation: alarm 1s linear 3;
	-moz-animation: alarm 1s linear 3;
	-webkit-animation: alarm 1s linear 3;
	animation-play-state: paused;
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
    margin: 25px;
}

div#counterFrame {
    background-color: #BFBFB8;
    border: 2px solid #DEDEDE;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #696969;
    padding: 10px;
    width: 155px;
    height: 50px;
	animation: appear 3s;
	-moz-animation: appear 3s;
	-webkit-animation: appear 3s;
	transform-origin: 0px 0px;
	-ms-transform-origin: 0px 0px;
	-moz-transform-origin: 0px 0px;
	-o-transform-origin: 0px 0px;
	-webkit-transform-origin: 0px 0px;
	transition: transform 2s;
	-ms-transition: -ms-transform 2s;
	-moz-transition: -moz-transform 2s;
	-o-transition: -o-transform 2s;
	-webkit-transition: -webkit-transform 2s;
}

div#valueBar, div#valueBar input[type=text] {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

div#valueBar input[type=text] {
    box-shadow: 3px 3px 2px #888888 inset;
    border: solid 2px #DEDEDE;
    width: 35px;
    text-align: right;
    -webkit-appearance: none;
}

input#triggerButton {
    float: right;
}

span.footer {
    color: white;
    font-size: 12px;
    text-shadow: 2px 2px 3px #5E5E59;
}

span.sbut {
    font-weight: bold;
	width: 15px;
	height: 15px;
}

span.sbut:hover {
    background-color: #AFAFA8;
	cursor: pointer;
}