body
{
	font-family: b nazanin, Courier New;
	font-size: 20px;
	font-weight: bold;
	direction: rtl;
}
#pane {
    position:absolute;
    width:99%; height:550px;
    /*border-bottom:2px solid black;*/
    top:0px; right:0px;
}
    
#box
{
    position:absolute; top:435px; left:50%;
}
.countdown
{
	color:white;
}

@keyframes glow {
    to {
        box-shadow: 0px 0px 0px 0px transparent;
        background-color: transparent;
        transition: box-shadow 2s;
    }
}
.guard
{
    box-shadow: 0px -15px 10px 5px #0084ff;
	border-radius: 80px 80px 0px 0px;
	animation: glow .5s infinite alternate;
}
.nx
{
	background-color: yellow;
    box-shadow: 0px 0px 30px 30px yellow;
	border-radius: 80px 80px 80px 80px;
	animation: glow .5s infinite alternate;
}
.guard_nx
{
	box-shadow: 0px -15px 10px 5px yellow;
	border-radius: 80px 80px 0px 0px;
	animation: glow .5s infinite alternate;
}
#timer
{
	display: none;
	text-align: center;
	width:100px;
	min-height:30px;
	border:1px solid white;
	border-radius: 5px;
	position: fixed;
	top:10px;
	left:10px;
}
.circle
{
	position: absolute;
	width:80px;
	height: 65px;
	border: 1px solid silver;
	border-radius: 40px;
	margin-top:-100px;
	padding-top:15px;
	text-align: center;
	box-shadow:0 10px 20px rgba(0, 0, 0, 0.2), inset 0px 5px 20px 5px rgba(255, 255, 255, 1);
	 /* CSS3 Border Radius */
	 border-radius:50%;
	 -webkit-border-radius:50%;
	 -moz-border-radius:50%;
	 overflow: hidden;
}
#stats
{
	padding-right:20px;
	padding-left:20px;
	border-top:2px solid black;
}

#hdiv
{
	border-radius: 5px;
}


#rightBar
{
	width:30%;
	float:right;
	color:green;
	font-size: 15px;
}
#leftBar
{
	width:30%;
	float:right;
	color:red;
	font-size: 15px;
}



*{ margin: 0; padding: 0;}


#clouds{
	padding: 100px 0;
	background: #7fbdee;
	background: -webkit-linear-gradient(top, #7fbdee 0%, #fff 100%);
	background: -linear-gradient(top, #7fbdee 0%, #fff 100%);
	background: -moz-linear-gradient(top, #7fbdee 0%, #fff 100%);
	overflow: hidden;
}

/*Time to finalise the cloud shape*/
.cloud {
	width: 200px; height: 60px;
	background: #fff;
	
	border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
	
	position: relative; 
}

.cloud:before, .cloud:after {
	content: '';
	position: absolute; 
	background: #fff;
	width: 100px; height: 80px;
	position: absolute; top: -15px; right: 10px;
	
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}

.cloud:after {
	width: 120px; height: 120px;
	top: -55px; right: auto; right: 15px;
}

/*Time to animate*/
.x1 {
	-webkit-animation: moveclouds 15s linear infinite;
	-moz-animation: moveclouds 15s linear infinite;
	-o-animation: moveclouds 15s linear infinite;
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
	right: 200px;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.6; /*opacity proportional to the size*/
	
	/*Speed will also be proportional to the size and opacity*/
	/*
	-webkit-animation: moveclouds 25s linear infinite;
	-moz-animation: moveclouds 25s linear infinite;
	-o-animation: moveclouds 25s linear infinite;
}

.x3 {
	right: -250px; top: -200px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 15s linear infinite;
	-moz-animation: moveclouds 15s linear infinite;
	-o-animation: moveclouds 15s linear infinite;
}

.x4 {
	right: 470px; top: -250px;
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.75; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 15s linear infinite;
	-moz-animation: moveclouds 15s linear infinite;
	-o-animation: moveclouds 15s linear infinite;
}

.x5 {
	right: -150px; top: -150px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 15s linear infinite;
	-moz-animation: moveclouds 15s linear infinite;
	-o-animation: moveclouds 15s linear infinite;
}