@media screen {body {background: url('/media/images/bg.jpg');  font-family: "Verdana", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: 11px; color: #51311c; line-height: 16px; margin: 0 auto; }

h1 {font-size: 20px; font-weight: bold; margin-top: 0px; color: #51311c; line-height: 21px;}
h2 {font-size: 20px; font-weight: bold; margin-top: 0px; color: #407501; line-height: 21px;}
h3 {font-size: 20px; font-weight: bold; margin-top: 0px; color: #ffc000; line-height: 21px;}
h4 {font-size: 13px; font-weight: bold; margin-top: 0px; color: #51311c; line-height: 13px;}
h5 {font-size: 18px; font-weight: bold; margin-top: 0px; color: #407501; line-height: 13px;}

a:link {
	color:#51311c;
	text-decoration: none;
}
a:visited {
	color: #51311c;
	text-decoration: none;
	
}
a:hover {
	color: #51311c;
	text-decoration:none;
	
}
a:active {
	color: #51311c;
	text-decoration: none;
	
}
a img {
			border: 0;
		}
		
img{vertical-align: middle;}


#page {background: url('/media/images/board.jpg'); margin:0 auto; width:1000px;  clear: both; overflow: hidden; height: 629px; }

/* all */
#logo {background: url('/media/images/logo.png') no-repeat; float: left; width: 170px; height: 105px;margin-left: 30px; }
#topright {float: left; width: 800px; height: 105px;}
#fconnect {float: right; margin-right: 17px; clear: both; height: 47px; text-align: right;  }

/* fansite */
#posfansite {float: left; padding: 15px 0px 0px 665px;}
#fansite {display: block; width: 265px; height: 20px; background: url('/media/images/fansite-bt.png') no-repeat 0 0;}
#fansite:hover{background-position: 0 -20px;}
#fansite span{display: none;}

/* regristration */
#bgreservation {background: url('/media/images/registration-bg.jpg') no-repeat; width: 518px; height: 443px;margin:0 auto; clear: both; overflow: hidden; text-align: center; }

/*reg 01 */
.letsconnect {float: left;margin-top: 215px; clear: both; text-align: center; width: 100%;}
.fconnectbutton {float: left; clear: both; margin-top: 10px;text-align: center; width: 100%;}
.skip {float: left; margin-top: 100px;text-align: center; width: 100%;}

/*reg 02 */
.doyouhave {float: left; margin-top: 125px; clear: both; text-align: center; width: 100%;}
.clearcard {float: left; margin-top: 25px; clear: both; text-align: center; width: 100%;}
.answer {float: left; margin: auto 0; width: 100%; clear: both;}
.ya {float: left; margin-left: 100px;}
.tidak {float: right; margin-right: 100px;}

#yes {display: block; width: 80px; height: 45px; background: url('/media/images/reg-yes.jpg') no-repeat 0 0;}
#yes:hover{background-position: 0 -45px;}
#yes span{display: none;}

#no {display: block; width: 80px; height: 45px; background: url('/media/images/reg-no.jpg') no-repeat 0 0;}
#no:hover{background-position: 0 -45px;}
#no span{display: none;}


/*reg 03 & 04 */
.register {float: left; margin-top: 125px; clear: both;text-align: center; width: 100%;}
.jarak {float: left;margin-top: 40px; clear: both;}
.form{margin:0 auto; width: 340px; clear: both; text-align: center;}
.formtitle {float: left; margin-left:25px; height: 30px; width: 90px; text-align: right; clear: left;}
.formfield {float: left; height: 30px; clear: right; margin-left: 30px;}
.info {float: left; margin:0px 0px 20px 140px; color: red; clear: both; }
.proceed {float: left; margin-top: 30px; text-align: center; width: 100%; clear: both;}
.warning {float: left; background: url('/media/images/reg-warning.png') no-repeat; width: 502px; height: 31px; clear: both; padding-top: 4px; margin: 27px 0px 0px 13px; color: white;}
.confirmation {float: left; width: 100%; margin: 70px 0px 10px; clear: both; text-align: center;}
.playnow {width: 187px; margin:0 auto; clear: both;}

#play {display: block; width: 187px; height: 73px; background: url('/media/images/playnow.jpg') no-repeat 0 0;}
#play:hover{background-position: 0 -73px;}
#play span{display: none;}

.reconfirm {float: right;margin: 60px 30px 0px 0px;}

#regnow {display: block; width: 171px; height: 24px; background: url('/media/images/registernow.jpg') no-repeat 0 0;}
#regnow:hover{background-position: 0 -24px;}
#regnow span{display: none;}

#actnow {display: block; width: 171px; height: 24px; background: url('/media/images/activatenow.jpg') no-repeat 0 0;}
#actnow:hover{background-position: 0 -24px;}
#actnow span{display: none;}

/* all page */
#fansiteall {float: left; margin-left: 665px;}


/* landing page */
#homekiri {float: left;width: 490px; text-align: left;}

.clearmad {float: left; width: 370px; height: 100px; background: url('/media/images/clear-online-madness.jpg') no-repeat; margin-left: 113px; clear: both;}
.homeflash {float: left; width: 490px; height: 315px;clear: both;}
.howto {float: left; margin-left: 325px ;clear: both;}

#homekanan {float: left;width: 510px; height: 285px; background: url('/media/images/home-right.jpg') no-repeat; background-position: top right; text-align: left; padding-top: 175px; clear: right}
.texthome {float: left; width: 190px; clear: both; text-align: left;}

#homefansite {float: left; margin-left: 175px;}

/* browse & play page */

#browsekiri {float: left;width: 615px; height: 460px; text-align: left; }
.isikiri {float: left;height: 70px; width: 515px; margin: 20px 0px 20px 100px; clear: both; overflow: hidden;}
.listgallery {float: left;  width: 515px; height: 30px; text-align: center; margin: 45px 0px 0px 100px; clear: both; overflow: hidden;font-weight: bold;}

#browsekanan {float: left;width: 385px; height: 460px; background: url('/media/images/browse-right.jpg') no-repeat; background-position: top right; clear: right}

#mainkiri {float: left;width: 738px; height: 460px; text-align: left; }
#mainkanan {float: left;width: 220px; height: 460px; background: url('/media/images/bg-play.jpg') no-repeat; background-position: top right; clear: right; text-align: left;}
.tempatgallery {float: left; text-align: left; margin-left: 100px;}
.ratakiri {float: left; text-align: left;}
.listmain {position: fixed;z-index: 99; margin: 415px 0px 0px 220px; clear: both; overflow: hidden;font-weight: bold;}

.mainid {float: left; width: 220px; height: 145px; clear: both; overflow: hidden;}
.mainphoto {float: left; margin: 12px 10px 0 15px;width: 90px; height: 120px;}
.mainphoto img{border:solid 3px; border-color: #cdcdcd;}
.maininfo {float: left; width: 105px; height: 45px; margin-top: 12px ;overflow: hidden;}
.mainpoint {float: left;width: 102px; vertical-align: middle}
.topten {float: left; width: 195px; height: 190px; margin: 10px 0px 10px 15px;  clear: both; overflow: scroll;overflow-x: hidden;}

.myposition {float: left; clear: both; width: 220px; padding-left: 15px; font-weight: bold; color:#407501; margin-top: 8px; }
.toptentitle {float: left; clear: both; margin: 20px 0px 5px 15px;}
.topgray {float: left; clear: both; background-color: #cccccc; width: 175px; height: 45px;}
.topwhite {float: left; clear: both; background-color: #ffffff; width: 175px; height: 45px;}


#playkanan {float: left;width: 385px; height: 460px; background: url('/media/images/play-right.jpg') no-repeat; background-position: top right; clear: right; text-align: left;}

.userid {float: left; width: 385px; height: 145px; clear: both; overflow: hidden;}
.userphoto {float: left; margin: 12px 10px 0 22px;width: 90px; height: 120px;}
.userphoto img{border:solid 3px; border-color: #cdcdcd;}
.userinfo {float: left; width: 205px; margin-top: 12px ;overflow: hidden;}
.userpoint {float: left;width: 102px; vertical-align: middle}
.viewposition {float: left; margin-top: 20px;}

.usercomment {float: left; width: 305px; height: 190px; margin: 10px 0px 10px 22px;  clear: both; overflow: scroll;overflow-x: hidden;}

.commentfield {float: left; width: 305px; height: 40px;  margin: 10px 0px 10px 22px; clear: both; overflow: hidden;}
.submitbutton {float: left; margin-left: 22px; clear: both;}


/* redeem  01*/
.redeemtitle {float: left;margin: 170px 0 20px; clear: both; text-align: center; width: 100%;}
.inputcode {margin: 0 auto; width: 295px; height: 80px; background: url('/media/images/redeemcode-bg.jpg'); clear: both; font-size: 35px; text-align: center; border: 0;}

/* redeem  02*/
.congratulations {float: left;margin: 120px 0 10px; clear: both; text-align: center; width: 100%;}
.prize {margin: 0 auto; clear: both; text-align: center; width: 364px; height: 273px;}
.prizeteks {margin: 0 auto; clear: both; text-align: center; width: 400px;  }

/*redeem 03 */
#bgredeem {background: url('/media/images/redeem-bg.jpg') no-repeat; width: 518px; height: 443px;margin:0 auto; clear: both; overflow: hidden; text-align: center; }
.tambahan {float: left; clear: both; width: 475px; margin-top: 20px; text-align: center;padding: 0px 20px 0px}

.pointer{cursor:pointer;}

.loading{
  display:none;
  clear:both;
  float:left;
  margin-top:30px;
  text-align:center;
  width:100%;
}
.loading img{
  width:60px;
}
}
@media screen {#mainmenu {
display:inline;
float:left;
height:58px;
width:730px;
z-index:100;
clear: right;
}
#mainmenu ul {
background-clip:border;
background-inline-policy:continuous;
background-origin:padding;
background:transparent url('/media/images/navi-starter.png') no-repeat scroll 0 0;
height:58px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
width:730px;
}
#mainmenu li {
float:left;
font-size:0;
margin:0;
padding:0;

}

#mainmenu li a {
display:block;
height:58px;
text-decoration:none;
}
#home-button {
width:146px;
}
#home-button a:hover {
background-clip:border;
background-inline-policy:continuous;
background-origin:padding;
background:transparent url('/media/images/navi-starter.png') repeat scroll 0 -58px;
width:146px;
}
#home-button.on, #home-button.on a:hover {
background-clip:border;
background-inline-policy:continuous;
background-origin:padding;
background:transparent url('/media/images/navi-starter.png') repeat scroll 0 -58px;
width:146px;
}
#browse-button {
width:146px;
}
#browse-button a:hover {
background-clip:border;
background-inline-policy:continuous;
background-origin:padding;
background:transparent url('/media/images/navi-starter.png') repeat scroll -146px -58px;
width:146px;
}
#browse-button.on, #browse-button.on a:hover {
background-clip:border;
background-inline-policy:continuous;
background-origin:padding;
background:transparent url('/media/images/navi-starter.png') repeat scroll -146px -58px;
width:146px;
}
#play-button {
width:146px;
}
#play-button a:hover {
background-clip:border;
background-inline-policy:continuous;
background-origin:padding;
background:transparent url('/media/images/navi-starter.png') repeat scroll -292px -58px;
width:146px;
}
#play-button.on, #play-button.on a:hover {
background-clip:border;
background-inline-policy:continuous;
background-origin:padding;
background:transparent url('/media/images/navi-starter.png') repeat scroll -292px -58px;
width:146px;
}
#profile-button {
width:146px;
}
#profile-button a:hover {
background-clip:border;
background-inline-policy:continuous;
background-origin:padding;
background:transparent url('/media/images/navi-starter.png') repeat scroll -438px -58px;
width:146px;
}
#profile-button.on, #profile-button.on a:hover {
background-clip:border;
background-inline-policy:continuous;
background-origin:padding;
background:transparent url('/media/images/navi-starter.png') repeat scroll -438px -58px;
width:146px;
}
#prize-button {
width:146px;
}
#prize-button a:hover {
background-clip:border;
background-inline-policy:continuous;
background-origin:padding;
background:transparent url('/media/images/navi-starter.png') repeat scroll -584px -58px;
width:146px;
}
#prize-button.on, #prize-button.on a:hover {
background-clip:border;
background-inline-policy:continuous;
background-origin:padding;
background:transparent url('/media/images/navi-starter.png') repeat scroll -584px -58px;
width:146px;
}
}
@media screen {* {margin:0;padding:0}
/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body { 
	text-align:center;
	min-height:468px;/* for ie7*/
}
#xouter{
	height:96%;
	width:100%;
	display:table;
	vertical-align:middle;
}
#xfooter{
	height:4%;
	width:100%;
	background-color: #cdcdcd;
	display:table;
	vertical-align:middle;
}
#xcontainer {
	text-align: center;
	position:relative;
	vertical-align:middle;
	display:table-cell;
	height: 468px;
}	
#xinner {
	width: 1000px;
	height: 629px;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	border:0px ;
}
/* not required for demo */
p,h1{margin-bottom:1em}
#header{margin-right:0}
.maintxt{text-align:left;margin:1em;}
/* - */
}
@media screen {
      #tooltip{
        display:none;
        position: absolute;
        padding: 10px 13px;
        z-index: 2;
        color: #303030;
        background-color: #f5f5b5;
        border: 1px solid #DECA7E;
        font-family: sans-serif;
        font-size: 12px;
        line-height: 18px;
        text-align: center;
      }
      #newscontainer{
        left:400px;
        position:absolute;
        top:10px;
      }
      .newsticker {
        list-style-type: none;
        padding: 3px;
        margin: 0;
        background:none;
        color:red;
        font-size:14px;
      }
    }