@charset "utf-8";
/* CSS Document */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:12px; vertical-align:baseline; background:transparent; font-family: Arial, tahoma, sans-serif; }
body { line-height:1; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block; }
ul ,li { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
/* change colours to suit your needs */
ins { background-color:#ff9; color:#000; text-decoration:none; }
/* change colours to suit your needs */
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
/* change border colour to suit your needs */
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

body{ position: relative; background: url("../images/bg.jpg") center 40px no-repeat #000000; }
.r2nav{ width: 100%; height: 41px; background: url("../images/r2top.png") 0 0 repeat-x; position: relative;}
.w1004{ width: 1004px; margin: 0 auto; position: relative;}

#login_mask { width: 100%; height: 100%; top: 0; left: 0; position: fixed; z-index: 1001; background: url("../images/mask.png") 0 0 repeat;}
#login_mask a.login_mask{ position: absolute; top:0; left:0; width: 100%; height: 100%; display: block; z-index: 1002}
#login_mask .login{ width: 363px; height: 383px; padding-top: 90px; display: block; margin: 150px auto 0; background:url("../images/login_bg.png") 0 0 no-repeat; position: relative; z-index: 1003}
#login_mask .login a.close{ position: absolute; width: 25px; height: 24px; top: 67px; right: 60px; background: url("../images/ui.png") -212px -112px no-repeat;}
#login_mask .login a.close:hover { background-position: -212px -136px;}
#login_mask .logintitle{ width: 87px; height: 18px; display: block; margin: 0 auto 10px; background: url("../images/ui.png") 0 -112px no-repeat;}
#login_mask .inputlayout{ width: 237px; height: 28px; display: block; margin: 0 auto; background: url("../images/ui.png") 0 -84px no-repeat; }
#login_mask .inputlayout input{ width:190px; height: 28px; text-indent: 10px; display: block; margin: 0 auto; background: url("../images/ui.png") -21px 0 no-repeat; border: 0; font-size: 14px; font-family: Arial,tahoma,sans-serif;}
#login_mask .forgot{ width: 190px; display: block; margin: 10px auto 0; height: 18px; text-align: right;}
#login_mask .forgot a{  color:#827247;}
#login_mask .rmb{ width: 190px; height: 30px; margin: 0 auto; color: #fff6c7;}
#login_mask .rmb .cb_remember{ margin-top: 10px; float: left;}
#login_mask .fbbtn{ width: 75px; height: 18px; display: block; float: right; margin-top: 10px; background: url("../images/ui.png") 0 -142px no-repeat;}
#login_mask .fbbtn:hover{ background-position: -75px -142px;}
#login_mask .playnow{ width: 242px; height: 49px; padding: 0; margin: 10px auto 0; display: block; background:url("../images/ui.png") 0 -171px no-repeat;}
#login_mask .playnow:hover{ background-position: 0 -220px;}
#login_mask .playnow a{ width: 242px; height: 49px; display: block; background: none;}
#login_mask .register{ width: 137px; height: 36px; display: block; margin: 20px auto 0; background: url("../images/ui.png") 0 -269px no-repeat;}
#login_mask .register:hover{ background-position: 0 -305px;}
#login_mask .register a{ width: 137px; height: 36px; display: block;}
.logged h4{ color: #e5cb83; font-size: 20px; text-align: center; margin-bottom: 10px;}
.logged h4 span{ color: #ffa200; font-size:20px;}
.logged p{ color: #fbda81; font-size: 14px; text-align: center; height: 18px; line-height: 18px;}
.logged p a{ color: #ffbb00; font-size: 14px; text-decoration: none;}
.logged .code { width: 186px; height: 37px; padding: 0; margin: 10px auto 0; display: block; background:url("../images/ui.png") 0 -342px no-repeat;}
.logged .code:hover{ background-position: 0 -381px;}
.logged .code a{ width: 186px; height: 37px; display: block;}
.logged .logout{ width: 80px; height: 26px; display: block; margin: 10px auto 0; background: url("../images/ui.png") 0 -419px no-repeat; }
.logged .logout:hover { background-position: 0 -445px;}
.logged .logout a{ width: 80px; height: 26px; display: block;}
.logged .choose{ padding: 10px 0;}
.logged .choose a{ color: #d1ab6a; text-decoration: underline; font-size: 12px; }


/* header */
header .r2nav{ height: 40px; width: 100%; display: block; background-color: #333333; position: relative; z-index: 15;}
.fblike {position: absolute; top: 10px; left: 140px; }
.glike {position: absolute; top: 8px; left: 235px; }
header a.r2logo {float: left; margin-top:4px; }
header ul#topnav{float: right; }
header ul#topnav li {float: right; }
header ul li a.store {width: 130px; height: 40px; background: url("../images/header_ui.png") -183px center no-repeat; display: block; text-indent: 35px; line-height: 42px; color: #FFFFFF; font-size: 12px; text-decoration: none; }
header ul li a.headergamelist {width: 183px; height: 40px; background: url("../images/header_ui.png") 0 center no-repeat; display: block; text-indent: 10px; line-height: 40px; color: #7f7f7f; font-size: 12px; text-decoration: none; position: relative; }
header ul li .sub{ background: #e3e8f1; position: absolute; border: 1px solid #bfc6d7;}
header ul li .sub, header ul li .sub ul li {width: 183px; background: #e3e8f1; display: block; }
header ul li .sub ul li a {color: #7f7f7f; font-size: 12px; text-decoration: none; line-height: 18px; text-indent: 20px; display: block; }
header ul li .sub ul li a:hover{ background: #fdfdfe; }
header nav{ position: relative; height: 255px;  width: 100%; display: block; background: url("../images/nav_bg.png") 0 0 repeat-x; overflow: hidden;}
header nav ul li{ float: left; height: 87px; z-index: 10; position: relative;}
header nav ul li a{ float: left; height: 87px; padding: 0 10px; background-image: url("../images/nav.png"); background-repeat: no-repeat;}
header nav ul li span{ float: left; width: 4px; height: 87px;}
header nav ul li.n5 .nl{ background: url("../images/ns.png") left center no-repeat;}
header nav ul li.n5 .nr{ background: url("../images/ns.png") right center no-repeat;}
header nav ul li .nm{ width: 100%; height: 87px; }
header nav ul li.activity, header nav ul li.activity:hover{ background: url("../images/nm.png") 0 0 repeat-x;}
header nav ul li.activity .nl{ background: url("../images/nl.png") 0 0 no-repeat;}
header nav ul li.activity .nr{ background: url("../images/nr.png") 0 0 no-repeat;}
header nav ul li:hover .nm, header nav ul li.activity .nm{ background: url("../images/arrow.png") center bottom no-repeat;}
header nav ul li:hover{ background: url("../images/nm.png") 0 -87px repeat-x;
-moz-box-shadow: 1px 0 0px rgba(85, 0, 0, 0.5), -1px 0 0px rgba(85, 0, 0, 0.5);
-webkit-box-shadow: 1px 0 0px rgba(85, 0, 0, 0.5), -1px 0 0px rgba(85, 0, 0, 0.5);
box-shadow: 1px 0 0px rgba(85, 0, 0, 0.5), -1px 0 0px rgba(85, 0, 0, 0.5);
}
header nav ul li.n1 a{ width: 68px; background-position: center 0;}
header nav ul li.n2 a{ width: 77px; background-position: center -80px;}
header nav ul li.n3 a{ width: 90px; background-position: center -160px;}
header nav ul li.n4 a{ width: 99px; background-position: center -240px;}
header nav ul li.n5 a{ width: 73px; background-position: center -320px;}
header nav ul li.n6 a{ width: 86px; background-position: center -400px;}
header nav ul li.n4, header nav ul li.n5, header nav ul li.n6 { float: right;}
header nav ul li.logo{ position: absolute; top: 0; left: 360px; z-index: 0;}
header nav ul li.logo a{ width: 258px; height: 226px; display: block; position: absolute; background: url("../images/logo.png") 0 0 no-repeat;}

/* footer */
footer{ height: 150px; width: 100%; background: url("../images/footer.png") center bottom repeat-x;}
footer .link { padding: 65px 0 0 195px;}
footer .link p{ color: #a5a5a5; text-decoration: none; line-height: 20px;}
footer .link p.l1 span{ color: #957635; margin:0 10px;}
footer .link p.l1 a{ font-family: 'dutch801_rm_btroman';}
footer .link p a{ color: #957635; font-size: 14px; text-decoration: none;}
footer .link p.l2 a{ color: #a5a5a5; font-size: 12px; margin-right: 20px;}
footer .r2logo{ width: 245px; height: 67px; display: block; position: absolute; top: 45px; right: 125px; background: url("../images/r2logo.png") 0 0 no-repeat;}
footer .r2logo a{ width: 245px; height: 67px; display: block;}

header{ height: 210px;}
.logo{ width: 650px; height: 263px; background: url("../images/logo.png") right 20px no-repeat; margin: 0 0 0 410px;}
.logo a{ width: 390px; height: 173px; margin: 0 0 0 250px; display: block;}

.banner{ width: 633px; height: 440px; display: block; position: relative;}
.playnowbg{ position: absolute; left: -113px; top: -121px;}
.playnow{ width: 633px; height: 100px; padding-top: 90px; background: url("../images/playnowbg.png") 0 0 no-repeat;}
.playnow a{ width: 98px; height: 79px; display: block; margin: 0 auto;  background: url("../images/playnow.png") -118px 0 no-repeat;}
.playnow a:hover{ background-position: -8px 0 ;}
#myFocus {width:615px; height:232px; position: relative; z-index: 0; background: url("../images/banner-border.png") 0 0 no-repeat #000000; padding:9px;}
.mF_expo2010_myFocus .loading{ background: transparent;width:618px; height:230px;}


.main{ margin-left: 240px; padding-bottom: 100px;}
nav ul li a{  height: 44px; display: block; float: left; background-image: url("../images/nav.png"); background-repeat: no-repeat;}
nav ul li.n1 a{width: 117px; background-position: 2px 0;}
nav ul li.n2 a{width: 117px; background-position: -115px 0;}
nav ul li.n3 a{width: 161px; background-position: -232px 0;}
nav ul li.n4 a{width: 119px; background-position: -393px 0;}
nav ul li.n5 a{width: 119px; background-position: -512px 0;}
nav ul li.n1 a.active, nav ul li.n1 a:hover{width: 117px; background-position: 2px -47px;}
nav ul li.n2 a.active, nav ul li.n2 a:hover{width: 117px; background-position: -115px -47px;}
nav ul li.n3 a.active, nav ul li.n3 a:hover{width: 161px; background-position: -232px -47px;}
nav ul li.n4 a.active, nav ul li.n4 a:hover{width: 119px; background-position: -393px -47px;}
nav ul li.n5 a.active, nav ul li.n5 a:hover{width: 119px; background-position: -512px -47px;}

.right-nav{ position: absolute; right: 0; top: 200px; width: 130px; height: 242px; background: url("../images/right_nav.png") 0 0 no-repeat;}
.right-nav ul li{ width:98px; height: 53px; display: block; position: absolute; background-image: url("../images/right_nav.png"); background-repeat: no-repeat;}
.right-nav ul li.n1{ left: 23px; top: 0; background-position: -23px 0;}
.right-nav ul li.n2{ left: 23px; top: 78px; background-position: -23px -78px;}
.right-nav ul li.n3{ left: 23px; top: 169px; background-position: -23px -169px;}
.right-nav ul li.n1:hover{ background-position: -166px 0;}
.right-nav ul li.n2:hover{ background-position: -166px -78px;}
.right-nav ul li.n3:hover{ background-position: -166px -169px;}
.right-nav ul li a{ width: 98px; height: 53px; display: block;}

.content{ clear: both; width: 632px; min-height: 400px; background: url("../images/bg_y.jpg") 0 0 repeat-y; position:relative}
.bg_top{ background: url("../images/b_top.png") no-repeat; width:634px; height:85px; position:absolute; top:0; z-index:1;}
.bg_bottom{ background: url("../images/b_bottom.png") no-repeat; width:634px; height:79px; position:absolute; left:-1px; bottom:-7px; z-index:1;}

.list-title{ width: 632px; height: 84px; display: block; background: url("../images/news-list-title-bg.png") center center no-repeat; position: relative;}
.list-title h4{ color: #fff6c7; font-size: 15px; padding: 20px 60px 0 20px; height: 36px; display: block; line-height: 18px; overflow: hidden; }
.list-title p{ color: #c7c7c7; font-size: 12px; position: absolute; left: 20px; bottom: 10px;}
.list-title span.arr{ width: 19px; height: 19px; position: absolute; right: 40px; top: 30px; background: url("../images/arrow.png") 0 0 no-repeat;}
.list-content { height: 100px; padding: 20px;}
.list-content .img{ width: 145px; height: 103px; float: left; overflow: hidden; border: 2px solid #9d572d;}
.list-content .img img{ width: 145px; height: 103px;}
.list-content .list-content-text{ float: right; width: 430px; height: 80px; overflow: hidden; line-height: 20px; color: #d1d1d1; }
.list-content a{ color: #fff6c7; float: left; line-height: 20px; margin-left: 13px;}

/* server list */
.server .title{ text-align: center; height: 26px; line-height: 26px; padding: 15px 0;}
.server .l1 .title span{ width: 150px;}
.server .l2 .title span{ width: 255px;}
.server .l3 .title span{ width: 160px;}
.server .title span{ height: 26px; line-height: 26px; color: #fff6d2; font-size: 16px; display: block; margin: 0 auto;}
.server .title img.l{ height: 26px; float: right;}
.server .title img.r{ height: 26px; float: left;}
.server .list .list-content{ background: url("../images/mask.png") 0 0 repeat; width:582px; margin: 0 auto; padding-bottom: 70px; height: auto; border-top:1px solid #2c2623;  border-bottom:1px solid #2c2623; }
.server .list .list-content ul.btn li{ width: 185px; height: 49px; display: block; float: left; background: url("../images/serverbg.png") 0 0 no-repeat; text-align: center; line-height: 49px; margin: 5px;}
.server .list .list-content ul.btn li:hover{ background-position: 0 -49px;}
.server .list .list-content ul.btn li a{ width: 185px; height: 49px; display: block; line-height: 49px; margin: 0; text-align: center; background: url("../images/serverbg.png") 0 0 no-repeat;}
.server .list .list-content ul.btn li.active a{ background-position: 0 -147px;}
.server .list .list-content ul.btn li.beta a{ background-position: 0 -196px;}
.server .list .list-content ul.btn li.offline a{ background-position: 0 -245px;}
.server .list .list-content ul.btn li.offline{ background-position: 0 -98px;}

.tabsbg ul{ width: 100%; text-align: center;}
.tabsbg ul li{ width: 98px; height: 27px; display: block; margin: 0 10px; display: inline-block; background: url("../images/servertabs.png") -98px 0 no-repeat;}
.tabsbg ul li.ui-tabs-active,.tabsbg ul li:hover{ background-position: 0 0;}
.tabsbg ul li a{ width: 98px; height: 27px; display: block; line-height: 27px; text-align: center; color: #fff6d2; text-decoration: none;}
.tabsbg ul li.ui-tabs-active a{ color: #FFFFFF; text-shadow: 1px 1px 1px #000000;}
.view article{ padding: 20px;}
.view article header{ height: auto;}
.view article header h4{ color: #FFFFFF; font-size: 18px; display: block; overflow: hidden; height: 24px; line-height: 24px;}
.view article header p{ color: #c7c7c7; font-size: 12px;}
.view article .article-content{ padding: 10px; color: #c7c7c7; line-height: 24px; font-size: 14px;}
.view article .article-content img{ max-width: 558px; display: block; margin: 0 auto;}

.guides{ padding: 20px 0;}
.guides h3.ui-accordion-header{ display: block; width:535px; height: 130px; color: #FFFFFF; font-size: 24px; line-height: 130px; padding-left: 50px; margin: 0 auto; position: relative; background: url("../images/guide-header.jpg") 0 0 no-repeat;}
.guides h3.g1{ background-position: 0 0;}
.guides h3.g2{ background-position: 0 -130px;}
.guides h3.g3{ background-position: 0 -260px;}
.guides h3.g4{ background-position: 0 -390px;}

.guides h3.ui-accordion-header span{ width: 590px; height: 136px; background: url("../images/guides-border.png") 0 0 no-repeat; position: absolute; top: -2px; left: 0;}
.guides h3.ui-accordion-header-active span, .guides h3.ui-accordion-header span:hover{ background-position: 0 -136px;}
.guides .ui-accordion-content { width: 590px; margin: 0 auto; padding: 20px 0; display: block; line-height: 24px;}
.guides .ui-accordion-content ul li{ width: 186px; margin-left: 10px; float: left; overflow: hidden;}
.guides .ui-accordion-content ul li a{ color: #ddd4b6; font-size: 12px; text-decoration: none;}

.artwork .artwork-title{width: 632px; height: 84px; display: block; background: url("../images/news-list-title-bg.png") center center no-repeat; position: relative;}
.artwork .artwork-title span{ position: absolute; left: 40px; top: 5px; width: 160px; height: 72px; background: url("../images/artwork-title.png") 0 0 no-repeat; }
.artwork .artwork-title span.t2{ background-position: 0 -82px;}
.video{ padding: 10px 0;}
.video .video-border{ width: 317px; height: 200px; float: left; margin-left: 10px; background: url("../images/video-border.png") 0 0 no-repeat; }
.video .video-info { float: left; margin-left: 15px; width: 255px; }
.video .video-info h4{ color: #fff6c7; font-size: 18px; line-height: 30px; }
.video .video-info p{ color: #5f77b0; font-size: 12px;}
.video .video-info p.info{ color: #c2c2c2; font-size: 14px; line-height: 24px; height: 144px; overflow: hidden; margin-top: 10px;}

#arts{ padding: 0 60px;}
.thumb-wrapper{ float: left; width:145px; height: 103px; border: 2px solid #99552c; margin: 10px;}

.dv_load { background-color: #FFFFFF; border: 1px solid #DDDDDD; color: #333; display: none; font-size: 15px; padding: 5px 10px; position: fixed; text-align: center; z-index: 100; }
.notification { font-family: Arial, Helvetica, clean, sans-serif; font-size: large; font-weight: bold; background-color: rgb(247, 247, 247); color: red; }
.success { font-family: Arial, Helvetica, clean, sans-serif; font-size: large; font-weight: bold; background-color: #acfa58; color: black; }
.fail { font-family: Arial, Helvetica, clean, sans-serif; font-size: large; font-weight: bold; background-color: #fe2e2e; color: white; }

/* 右下角弹框star */
.iadpop {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 325px;
	height: 263px;
	background: url(//r2cdn.r2games.com/en/bh/images/bh$20.jpg) no-repeat;
	-webkit-animation: ani_01 1s ease-out;
	animation: ani_01 .3s ease-out;
}
.iadpop .iclosed {
	position: absolute;
	top: 0;
	right: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	font-size: 14px;
	text-align: center;
	background: #9c0202;
	color: #fff;	
	text-decoration: none;	
}
.iadpop .iclosed:hover {
	background: #b72f2f;
}

@-webkit-keyframes ani_01 {
	0% { bottom: -263px; }
	100% { bottom: 0; }
}
@keyframes ani_01 {
	0% { bottom: -263px; }
	100% { bottom: 0; }
}