.tn-box {
	width: 100%;
	position: relative;
	margin: 0 auto 3em auto;
	/*padding: 20px 15px;*/
	text-align: left;
	border-radius: 10px;
    /*box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6);  */
	cursor: default;
	clear: left;
}

.tn-box p {
	font-weight: bold;
	font-size: 16px;
	margin: 1em;
	/*padding: 0 10px 0 10px;*/
	/*text-shadow: 0 1px 1px rgba(255,255,255,0.6);*/
	max-width: 100%;
	line-height: 1.4;
}
.tn-box li:last-child p, p.single-alert{
	/*margin-bottom: 0;*/
}

.tn-box a{
	text-decoration: underline;
}

.tn-box ul.no-bullet{
	margin-bottom: 0;
} 

.tn-progress {
	display: none;
	width: 0;
	height: 4px;
	background: rgba(255,255,255,0.3);
	position: absolute;
	bottom: 5px;
	left: 2%;
	border-radius: 3px;
	box-shadow: 
		inset 0 1px 1px rgba(0,0,0,0.05), 
		0 -1px 0 rgba(255,255,255,0.6);
}

.tn-box-status{
	display: none;
	opacity: 1;
 
}
.lt-ie9 .tn-box-status{
	display: block;
	opacity: 1;
 
}

/* Colors */

.tn-box-error{
	background: #ffcccc;
	border: 3px solid #bb0000;
}
.tn-box-error p {
	color: #bb0000;
}

.tn-box-status{
	background: #d4e8c0;
	border: 3px solid #334a1b;
}
.tn-box-status p {
	color: #334a1b;
}

.tn-box-warning{
	background: #f5e9a6;
	border: 3px solid #cbae16;
}
.tn-box-warning p {
	color: #5f520a;
}

.tn-box-status.tn-box-active {
    display: block;
}

.production .tn-box-status.tn-box-active {
	-webkit-animation: fadeOut 10s linear forwards;
	-moz-animation: fadeOut 10s linear forwards;
	-o-animation: fadeOut 10s linear forwards;
	-ms-animation: fadeOut 10s linear forwards;
	animation: fadeOut 10s linear forwards;
}

.production .tn-box-status.tn-box-active .tn-progress {
	/*-webkit-animation: runProgress 9s linear forwards 0.5s;*/
	/*-moz-animation: runProgress 9s linear forwards 0.5s;*/
	/*-o-animation: runProgress 9s linear forwards 0.5s;*/
	/*-ms-animation: runProgress 9s linear forwards 0.5s;*/
	/*animation: runProgress 9s linear forwards 0.5s;*/
}


@-webkit-keyframes fadeOut {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; -webkit-transform: translateY(0px);}
	99% { opacity: 0; -webkit-transform: translateY(-30px);}
	100% { opacity: 0; }
}

@-moz-keyframes fadeOut {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; -moz-transform: translateY(0px);}
	99% { opacity: 0; -moz-transform: translateY(-30px);}
	100% { opacity: 0; }
}

@-o-keyframes fadeOut {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; -o-transform: translateY(0px);}
	99% { opacity: 0; -o-transform: translateY(-30px);}
	100% { opacity: 0; }
}

@-ms-keyframes fadeOut {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; -ms-transform: translateY(0px);}
	99% { opacity: 0; -ms-transform: translateY(-30px);}
	100% { opacity: 0; }
}

@keyframes fadeOut {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; transform: translateY(0px);}
	99% { opacity: 0; transform: translateY(-30px);}
	100% { opacity: 0; }
}

@-webkit-keyframes runProgress {
	0%{ width: 0%; background: rgba(255,255,255,0.3); }
	100%{ width: 96%; background: rgba(255,255,255,1); }
}

@-moz-keyframes runProgress {
	0%{ width: 0%; background: rgba(255,255,255,0.3); }
	100%{ width: 96%; background: rgba(255,255,255,1); }
}

@-o-keyframes runProgress {
	0%{ width: 0%; background: rgba(255,255,255,0.3); }
	100%{ width: 96%; background: rgba(255,255,255,1); }
}

@-ms-keyframes runProgress {
	0%{ width: 0%; background: rgba(255,255,255,0.3); }
	100%{ width: 96%; background: rgba(255,255,255,1); }
}

@keyframes runProgress {
	0%{ width: 0%; background: rgba(255,255,255,0.3); }
	100%{ width: 96%; background: rgba(255,255,255,1); }
}