body {
  
   background: url('images/background.jpg');
   margin: 0;
   padding: 0;
   font-family: Segoe UI;
}

#alan {
   text-align: center;
   width: 650px;
   height: 600px;
     
   border: 2px inset rgba(0,0,80,0.62);
   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;
   background-color: #FFF;
   overflow: hidden;
}

#giris {

	border: 1px inset rgba(0,0,80,0.62);
	position: absolute; 
	width:410px; 
	height:420px; 
	margin-left: 123px; 
	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:420px; 
	margin-left: 123px; 
	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;
}

#bitis {
 	width: 250px; 
	height: 200px; 
	margin-top: 180px; 
	margin-left: 190px; 
	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: 36px; 
	font-weight:bold; 
	color:#F60;
}

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

#score {
     width: 640px;
   	 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: none;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 32px;
   text-align: center;
   color:#ffffff;
   font-weight: bold;
   background-color:#09C;
   position: absolute;
   
}

#saha {
   text-align: center;
   z-index:2;
   display : none;
   position: absolute;
   margin-left: 5px;
   margin-top: 70px;
   width: 640px;
   height: 500px;
}

#renk {
   text-align: center;
   width: 200px;
   height: 80px;
   border: 2px inset rgba(0,0,80,0.62);
  
   -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;
   padding-left: 20px;
   padding-top: 12px;
   display : none;
   position: absolute;
   float: left;
    z-index:2;
	margin-left:0;
	margin-top:40px;
  
}
#renk-span
{
	font-size: 48px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
}

#anlam1
{
	font-size: 30px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	display: none;
	float:left;
	margin-left:0;
	margin-top: 0;
}
#anlam2
{
	font-size: 30px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	display: none;
	float:left;
	margin-left:160px; 
}


#yazi-span
{
	font-size: 48px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
}

#yazi {
   text-align: center;
   width: 200px;
   height: 80px;
   border: 2px inset rgba(0,0,80,0.62);
   z-index:2;
   -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;
   padding-left: 20px;
   padding-top: 12px;
   display : none;
   position: absolute;
   float: left;
   margin-left:222px;
	margin-top:40px;
   
}

#dogru {
	
    text-align: center;
   	z-index:3;
   display: none;
	position:absolute;
	margin-top: 50px;
	margin-left: 185px;
	background-image:url(images/dogru.png);
	width:75px;
	height:75px;
	
	 
}

#yanlis {
	
    text-align: center;
   	z-index:3;
    display: none;
	position:absolute;
	margin-top: 50px;
	margin-left: 185px;
	background-image:url(images/yanlis.png);
	width:75px;
	height:75px; 
}

#resimler {
	
    text-align: center;
   	z-index:2;
     display : none;
	 position:absolute;
	 float: left;
	 margin-top: 200px;
	 margin-left: 90px;
	 
}