body {
  
   background: url('images/background.jpg');
   margin: 0;
   padding: 0;
}
#arena {
  text-align: center;
   width: 850px;
   height: 654px;
   
}


#alan {
   text-align: center;
   width: 824px;
   height: 680px;
   
   background: url('images/doga2.gif') no-repeat bottom center;
   
   z-index:1;
   -webkit-transition: opacity 0.5s;
   -moz-transition: opacity 0.5s;
   -o-transition: opacity 0.5s;
   transition: opacity 0.5s;

   -webkit-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   -moz-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   -o-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   position: relative;
}

#saha {
   text-align: center;
   z-index:2;
   display : block;
   position: absolute;
   margin-left: 0px;
   margin-top: 0px;
   width: 750px;
   height: 600px;
   opacity: 0.4;
   
}

#bitis {
 	width: 250px; 
	height: 200px; 
	margin-top: 180px; 
	margin-left: 320px; 
	background-color: #FFC;
	border: 2px solid #F90; 
	z-index:3; 
	text-align:center; 
	padding-top: 16px; 
	display: none;
	position:absolute;
	font-family: Segoe UI; 
	font-size: 30px; 
	font-weight:bold; 
	color:#F60;
}


#sayac {
 	width: 250px; 
	height: 80px; 
	margin-top: 90px; 
	margin-left: 300px; 
	background-color: #FFC; 
	 
	z-index:3; 
	text-align:center; 
	padding-top: 16px; 
	display: none;
	position:absolute;
}
}

#txtsonuc {
    font-family: Arial, Sans-Serif;
	font-size: 18px;
	margin-bottom: 5px;
	display: block;
	padding: 4px;
	width: 120px;
	height:30px;
	border: solid 1px #85b1de;
}

#bt01 {
   	background-color: #3687d8;
	color: #f4f4f4;
	border: 0px;
	height: 50px;
	font-family: Arial, Sans-Serif;
	font-size: 22px;
	
}

#sonuc {
   text-align: center;
   width: 330px;
   height: 60px;
   background-color: #c17fe1;
   border: 10px solid #a164e4;
   margin-left: 270px;
   margin-top: 250px;
   padding-left: 10px;
   padding-top: 20px;
   z-index:9999;
   display: none;
   position:absolute;
}

#sayac span {
	text-align: center;
   color : #ff9600;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 64px;
   font-weight: bold;
 }
 
 #kupax {
	 width: 313px;
   	 height: 50px;
	 z-index: 2;
	 margin-top: 0px;
	 margin-left:511px;
	  -webkit-transition: opacity 0.5s;
   -moz-transition: opacity 0.5s;
   -o-transition: opacity 0.5s;
   transition: opacity 0.5s;

   -webkit-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   -moz-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   -o-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   display: block;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 24px;
   text-align: center;
   color:#ffffff;
   font-weight: bold;
   background-color: #696;
   position: absolute;
   float:left;
	}
 
#hak {
	 width: 210px;
   	 height: 50px;
	 z-index: 2;
	 margin-top: 0px;
	 margin-left:301px;
	  -webkit-transition: opacity 0.5s;
   -moz-transition: opacity 0.5s;
   -o-transition: opacity 0.5s;
   transition: opacity 0.5s;

   -webkit-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   -moz-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   -o-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   display: block;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 24px;
   text-align: center;
   color:#ffffff;
   font-weight: bold;
   background-color:#C36;
   position: absolute;
   float:left;
	}
	
#score {
     width: 300px;
   	 height: 50px;
	 z-index: 2;
	 margin-top: 0px;
   -webkit-transition: opacity 0.5s;
   -moz-transition: opacity 0.5s;
   -o-transition: opacity 0.5s;
   transition: opacity 0.5s;

   -webkit-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   -moz-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   -o-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   display: block;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 24px;
   text-align: center;
   color:#ffffff;
   font-weight: bold;
   background-color:#09C;
   position: absolute;
   float:left;
   
}


input[type="text"]{
    
    padding: 5px;   
    border: 3px solid #DDDDDD;
    
    /*Applying CSS3 gradient*/
    background: -moz-linear-gradient(center top , #FFFFFF,  #EEEEEE 1px, #FFFFFF 20px);    
    background: -webkit-gradient(linear, left top, left 20, from(#FFFFFF), color-stop(5%, #EEEEEE) to(#FFFFFF));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FBFBFB', endColorstr='#FFFFFF');
    
    /*Applying CSS 3radius*/   
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    
    /*Applying CSS3 box shadow*/
    -moz-box-shadow: 0 0 2px #DDDDDD;
    -webkit-box-shadow: 0 0 2px #DDDDDD;
    box-shadow: 0 0 2px #DDDDDD;
	height:30px;
	 font-family: Arial, Sans-Serif;
	font-size: 18px;

}


#giris {

	border: 1px inset rgba(0,0,80,0.62);
	position: absolute; 
	width:410px; 
	height:420px; 
	margin-left: 200px; 
	margin-top: 100px;  
	z-index:4; 
	background: #c1dbfb;
	 border-radius: 8px; /* Standart */
    -moz-border-radius: 8px; /* Firefox */
    -webkit-border-radius: 8px;
	}
	
#aciklama {
	border: 1px inset rgba(0,0,80,0.62);
	position: absolute; 
	width:400px; 
	height:220px; 
	margin-left: 200px; 
	margin-top: 100px;  
	z-index:3; 
	background: #c1dbfb; 
	display: none; 
	color:#333; 
	font-family: Segoe UI; 
	font-size: 18px;
	 border-radius: 8px; /* Standart */
    -moz-border-radius: 8px; /* Firefox */
    -webkit-border-radius: 8px;
}