body{
 background:url(image/Universe-art-the-universe-22238785-1920-1200.jpg) no-repeat;
 padding:0px;
 font-size:12px;
 margin:0px 0px 0px 0px;
 background-attachment:fixed;
 
}

#countainer{
 width:1020px;
 height:auto;
 margin:auto;
 padding:0px; 
 
}

.header{
 height:300px;
 width:1020px;
 background:url(image/header%20copy.jpg);
 border:5px #FFFF00 solid;
}

.file{
 height:1000px;
 width:1020px;
 background-color:#000000;
 font-size:30px;
 border:5px #FFFF00 solid;
}

.menu{
 width:1020px;
 height:50px;
}

ul.menu1{
 margin:auto;
 padding:0px;
 height:50px;
 float:left;
 margin:0px 0px 0px 221px;
 
}
ul.menu1 li{
 display:inline;
 font-size:25px;
 font-weight:normal;
 line-height:50px;
 list-style-type:none;
}
a.menu_link:link, a.menu_link:visited{
 display:block;
 float:left;
 padding: 0px 0px 0px 0px;
 margin:0px 48px 0px 0px;
 height:50px;
 text-decoration:none;
 color:#FFFF33;
}
a.menu_link:hover{
 color:#FF0000;
}

.footer{
height:100px;
width:1020px;

}

.foottulis {
font-size: 17px;
color: #FFFF00;
text-align: center;
padding: 32px 0px 0px 0px;
border-bottom:2px #FF0000 solid;
}




/*------------------slider------------------------*/
img {
 border: none;
}
 a {
  outline: none;
 }
 /* Fades in the slideshow. Hides the initial animation on the li tag. Ooops!! */
 @-webkit-keyframes fadeIn {
  0% {
   opacity: 0;
   
  }
  
  50% { 
   opacity: 0;
  }
  
  100% { 
   opacity: 1;
  }
 }

 #box {
  text-align: left;
  width: 605px;
  height: 488px;
  margin: 30px auto 0 auto;
  background: #000;
  overflow: hidden;
  border: 10px solid #000;
  -webkit-box-shadow: #131313 0px 2px 10px;
  -moz-box-shadow: #131313 0px 3px 10px;
  box-shadow: #131313 0px 3px 10px; 
  -webkit-animation-name: fadeIn; 
  -webkit-animation-duration: 1s; 
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 0s;
 }

 ul#slider{
  -webkit-border-radius: 10px;
  margin: 0px;
  padding: 0px;
  list-style: none;
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden; 
 }

 ul#thumb {
  overflow: none;
  padding: 0px;
  list-style: none;
  position: relative;
  background: #000;
  overflow: auto;
  width: 550px;
  
 }

 ul#thumb a {
  -webkit-transition: opacity .2s ease-in-out;
  width: 25px;
  height: 25px;
  display: block;
  overflow: hidden;
  float: left;
  margin: -6px 0px 0px 83px;
  opacity: 0.75;
 }

 ul#thumb a:hover {
  opacity: 1;
 } 

 ul#slider li { 
  width: 550px;
  height: 340px;
  position: absolute;
  }
  
 ul#slider li p {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: inherit;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  width: 100%;
 }

 ul#slider li p span {
  line-height: 1.2em;
  padding: 10px;
  display: block;
 }

 /* Animation for the :target image. Slides the image in. */

 @-webkit-keyframes moveTarget {
  0% {
   left:-550px;
   
  }
  
  100% { 
   left:0px;
  }
 }


 ul#slider li:target {
  -webkit-animation-name: moveTarget; 
  -webkit-animation-duration: .5s; 
  -webkit-animation-iteration-count: 1;
  weight:550; 
  height: 395px;
  top:0px;
  left: 0px;
  z-index: 10;
 }

 /*
 Animation for the current image. Slides it out the frame and back to the starting position. 
 Adds a lower z-index than the now current image.
 */

 @-webkit-keyframes moveIt {
  0% {
   left:0px;
   
  }
  50% {
   left:550px;
   
  }
  100% { 
   left:-550px;
   z-index: 5;
  }
 }

 ul#slider li:not(:target) {
  -webkit-animation-name: moveIt; 
  -webkit-animation-duration: 1.5s; 
  -webkit-animation-iteration-count: 1;
  top:0px;
  left: 0px;
 }
/*------------------slider------------------------*/


.facebook{
width:200px;
height:200px;
margin:0px 0px 0px 0px;
float : left;
}
.facebook a{
 opacity:.5;
}
.facebook a:hover{
 opacity:1;

}
.steam{
width:200px;
height:200px;
margin:0px 0px 0px 45px;
float : left;

}

.steam a{
 opacity:.5;
}
.steam a:hover{
 opacity:1;

}

.youtube{
width:200px;
height:200px;
margin:0px 0px 0px 49px;
float : left;
}

.youtube a{
 opacity:.5;
}
.youtube a:hover{
 opacity:1;

}

.atas{

width:694px;
height:200px;
background-color:#000000;
margin:30px 0px 0px 160px;

}

.tulisandisk{
color:#FFFF00;
font-size:24px;
margin: 41px 0px 0px 165px;
width:700px;
height:700px;
float:left;
text-indent:15px;

}

.tulisanregis{
color:#FFFF00;
font-size:30px;
margin: 41px 0px 0px 165px;
width:700px;
height:100px;
float:left;
text-indent:15px;
text-align:center;
}

.badanform{
width: 1000px;
height: 883px;
float: left;
margin:-92px 0px 0px 0px;

}

.input
{
 width:150px;
 height:25px;
 float:right;
 margin : 6px 0px 0px 3px;
 border-radius : 8px 8px 8px 8px;
}

.formkotak{
width: 600px;
height: 790px;
float: left;
margin: 33px 0px 0px 279px;
background:url(image/logo.jpg);
}

.namatulis{
 font-size: 23px;
 margin: 72px 0px 0px 32px;
 color: #FFFF00;
 float: left;
}

.namakotak{
 width: 392px;
 height: 22px;
 float: left;
 margin: 5px 0px 0px 0px;
}

.tanggaltulis
{
 font-size: 23px;
margin: 41px 0px 0px 32px;
color: #FFFF00;
float: left;
}

.tanggalkotak{
 width: 901px;
 height: 30px;
 float: left;
 margin: 0px 0px 0px 0px;
}

.emailtulis{
 font-size: 23px;
margin: 40px 0px 0px 32px;
color: #FFFF00;
float: left;
}

.emailkotak{
 width: 262px;
 height: 15px;
 float: left;
 margin: 6px 0px 0px 0px;
}

.passwordtulis{
 font-size: 23px;
 margin: 30px 0px 0px 32px;
 color: #FFFF00;
 float: left;
}

.passwordkotak{
 width: 392px;
 height: 22px;
 float: left;
 margin: 5px 0px 0px 0px;
}

.passwordulangtulis{
 font-size: 23px;
 margin: 30px 0px 0px 32px;
 color: #FFFF00;
 float: left;
}

.passwordulangkotak{
 width: 392px;
 height: 22px;
 float: left;
 margin: 5px 0px 0px 0px;
}

.hinttulis{
font-size: 23px;
 margin: 23px 0px 0px 32px;
 color: #FFFF00;
 float: left;
}

.hintkotak{
 margin: 4px 0px 0px 0px;
height: 32px;
width: 396px;
float:left;
}

.answertulis{
font-size: 23px;
 margin: 27px 0px 0px 32px;
 color: #FFFF00;
 float: left;
}

.answerkotak{
margin: 3px 0px 0px 0px;
height: 23px;
width: 393px;
float: left;
}

.sign{
height: 30px;
width: 75px;
float: left;
margin: 27px 0px 0px 172px;
background-color: #CCCCCC;
border: 5px #666666 inset;

}

.huruf
{
font-weight: bold;
font-size: 16px;
margin: 6px 0px 0px 5px;
color:#666666;
}

.huruf a{
 text-decoration:none;
 color:#666666;
}

.huruf a:hover{
 color:#FFFF00;
}

.navigasi{
 width:1030px;
 height:20px;
 font-size:13px;
 font-weight:bold;
 margin:0px 0px 0px 0px;
 color:#000000;
 background-color:#FFFF00;
}

.navigasi a{
 
 text-decoration:none;
 color:#000000;
}
.navigasi a:hover{
 color:#FF0000;
}

.kotakslide
{
margin:109px 0px 0px 165px;
height:586px;
width:700px;
border:2px #FFFF00 dotted;
}

.tulisangalery{
color:#FFFF00;
font-size:30px;
margin: 41px 0px 0px 165px;
width:700px;
height:100px;
float:left;
text-indent:15px;
text-align:center;
}

.video{
width:700px;
margin: 63px 0px 0px 181px;
border:2px #FFFF00 dotted;
}

.tulisangame{
height: 500px;
width: 984px;
color: #FFFF00;
font-size: 14px;
margin: 28px 0px 0px 25px;
}

.tulisanhome{
height: 100px;
width: 984px;
color: #FFFF00;
font-size: 51px;
margin: 28px 0px 0px 302px;
}

.holover{
margin:-29px 0px 0px 350px;
height:305px;
}

.tulisanisi{
height: 500px;
width: 890px;
color: #FFFF00;
font-size: 19px;
margin: 30px 0px 0px 75px;

}