@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; }
.h1{ height: 1px; clear: both;}
.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: 999; }
.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; }
.w1022{ width: 1022px; margin: 0 auto; position: relative;}
body{ position: relative; background:#000000; }
.center{ width: 100%; position: relative; background: url("../images/newbg.jpg") center top no-repeat;}

/* r2nav */
.r2nav{ width: 100%; height: 40px; background: #333333; border-bottom:1px solid #000000; z-index: 10;}
.fblike {position: absolute; top: 10px; left: 140px; }
.glike {position: absolute; top: 8px; left: 220px; }
.r2nav a.logo {float: left; margin-top: 5px;}
.r2nav ul#topnav{float: right; }
.r2nav ul#topnav li {float: right; }
.r2nav 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; }
.r2nav 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; }
.r2nav ul li .sub, .r2nav ul li .sub ul li {width: 183px; background: #e3e8f1; display: block; position: relative; z-index: 10;}
.r2nav ul li .sub ul li a {color: #7f7f7f; font-size: 12px; text-decoration: none; line-height: 18px; text-indent: 20px; display: block; }
/* r2nav end */

/* header */
header{ width: 100%; height: 480px; }
header .playnow{ width: 257px; height: 219px; left: 381px; bottom: 0; position: absolute; background: url("../images/playnowbg.png") 0 0 no-repeat; z-index: 10;}
header .playnow a{ width: 109px; height: 83px; top: 70px; left: 73px; display: block; position: absolute; background: url("../images/playnow.png") 0 0 no-repeat;}
header .playnow a:hover{ background-position: bottom;}
header .logo{ width: 256px; height: 266px; top: 102px; left: 110px; position: absolute; background: url("../images/logo.png") 0 0 no-repeat;}
header .logo a{ width: 256px; height: 206px; display: block;}
nav.main_nav{bottom: -70px; height: 197px; position: absolute; background: url("../images/main_01.png") center center no-repeat; z-index: 5; }
nav.main_nav ul{ width: 963px; height: 95px; left: 27px; top: 34px; position: absolute;}
nav.main_nav ul li{ width: 195px; height: 98px; background: url("../images/nav.png") 0 0 no-repeat;}
nav.main_nav ul li.fl{ float: left;}
nav.main_nav ul li.fr{ float: right;}
nav.main_nav ul li.n1{ background-position: 0 -98px; }
nav.main_nav ul li.n2{ background-position: -195px -98px; }
nav.main_nav ul li.n3{ background-position: -585px -98px; }
nav.main_nav ul li.n4{ background-position: -390px -98px; }
nav.main_nav ul li.n1.active, nav.main_nav ul li.n1:hover{ background-position: 0 0; }
nav.main_nav ul li.n2.active, nav.main_nav ul li.n2:hover{ background-position: -195px 0; }
nav.main_nav ul li.n3.active, nav.main_nav ul li.n3:hover{ background-position: -585px 0; }
nav.main_nav ul li.n4.active, nav.main_nav ul li.n4:hover{ background-position: -390px 0; }
nav.main_nav ul li a{ display: block; width: 195px; height: 98px; outline:none}
/* header end*/
/* main */
.main{}
.main .main_body{ min-height: 50px; background: url("../images/main_02.jpg") center top repeat-y; margin-top: 70px;}
.main .main_footer{ height: 50px; background: url("../images/main_03.png") center top no-repeat; clear: both;}
.main .main_footer .decorate{ width: 24px; height: 110px; bottom: 43px; background: url("../images/bg_decorate.png") 0 0 no-repeat; position: absolute;}
.main .main_footer .decorate.footer_left{ background-position: 0 0; left: 0;}
.main .main_footer .decorate.footer_right{ background-position: -24px 0; right: 0;}
.main .main_left{ float: left; width: 630px; padding-left: 45px;}
.main .main_right{ float: left; padding-left: 12px;}
/* main end*/
/* banner */
.main .main_body .banner{ height: 290px; width: 946px; overflow: hidden; color: #FFF; position: relative; margin: -60px auto 0; z-index: 7; }
#myFocus {width:633px; height:281px; overflow: visible; }
/* banner end*/
/* left article_list*/
.article_list ul.nav {height: 57px;}
.article_list ul.nav li{ width:126px; height:57px; float: left; background: url("../images/subnav.png") 0 0 no-repeat; }
.article_list ul.nav li a{ width: 126px; height: 57px; display: block; line-height: 200px; overflow: hidden; outline:none}
.article_list ul.nav li.t1{ background-position: 0 -57px;}
.article_list ul.nav li.t2{ background-position: -126px -57px;}
.article_list ul.nav li.t3{ background-position: -252px -57px;}
.article_list ul.nav li.t4{ background-position: -378px -57px;}
.article_list ul.nav li.t5{ background-position: -504px -57px;}
.article_list ul.nav li.t1.ui-state-active, .article_list ul.nav li.t1:hover{ background-position: 0 0;}
.article_list ul.nav li.t2.ui-state-active, .article_list ul.nav li.t2:hover{ background-position: -126px 0;}
.article_list ul.nav li.t3.ui-state-active, .article_list ul.nav li.t3:hover{ background-position: -252px 0;}
.article_list ul.nav li.t4.ui-state-active, .article_list ul.nav li.t4:hover{ background-position: -378px 0;}
.article_list ul.nav li.t5.ui-state-active, .article_list ul.nav li.t5:hover{ background-position: -504px 0;}
.article-wrapper{ display: block; height: 82px; padding: 26px 0; clear: both; background: url("../images/article-wrapper-bg.png") center top no-repeat;}
.article-wrapper:hover{ background-position: center -136px;}
.article-wrapper a{ text-decoration: none; font-size: 12px;}
.article-image{ width: 139px; height: 86px; position: relative; float:left; display: block; background: url("../images/article_img_border.jpg") 0 0 no-repeat;}
.article-image img{ width: 126px; height: 72px; position: absolute; top: 7px; left: 6px;}
.article-content{ padding:0 0 0 15px; overflow: hidden;}
.article-content h2{ font-size: 21px; color: #cecece; height: 32px; line-height: 32px; overflow: hidden;}
.article-wrapper:hover h2{ color: #FFFFFF;}
.article-wrapper a .article-summary{ color: #64afc5; font-size: 12px; line-height: 14px; display: block; height: 28px; overflow: hidden;}
.article-wrapper:hover a .article-summary{ color: #56d9ed;}
.article-meta{ font-family: 'agency_fbregular'; color: #7d7d7d; font-size: 16px; padding-top: 5px;}
.article-wrapper:hover .article-meta{ color:#cecece; }
/* left article_list end*/
/* left guides_list*/
.guides_list .list{ width: 630px; height: 152px; margin-top: 10px; overflow: hidden; background: url("../images/guidesbg.png") right bottom no-repeat;}
.guides_list .list .guides_img{ width: 125px; height: 125px; float: left; margin-top: 15px; background-image: url("../images/guidesbg.png"); background-repeat: no-repeat; }
.guides_list .list.l2 .guides_img{ background-position: -125px 0; }
.guides_list .list.l3 .guides_img{ background-position: -250px 0; }
.guides_list .list.l4 .guides_img{ background-position: -375px 0; }
.guides_list .list .list_right{ float: left; padding: 20px 20px 0; width: 455px; height: 124px; line-height: 120%; overflow: hidden;}
.guides_list .list .list_right h3{ color: #a5e0ef; font-size: 18px; margin-bottom: 10px;}
.guides_list .list .list_right a{ color: #aaaaaa; text-decoration: none;}
.guides_list .list .list_right span{ color: #aaaaaa; margin:0 5px;}
.guides_list .list .list_right a:hover{ color: #FFFFFF;}
/* left guides_list end*/
/* view */
.view article{ padding: 20px;}
.view article h1{ font-size: 24px; color: #56d9ed; margin-bottom: 10px;}
.view article img{ max-width: 610px; margin: 0 auto 20px; display: block;}
.view article .article-content{ color: #adadad; font-size: 14px; line-height: 180%; padding: 30px 0;}
/* view end */
/* right sidebar-widget */
.sidebar-widget{ width: 326px; margin-top: 10px;}
.sidebar-widget .link{ padding-bottom: 10px;}
.sidebar-widget-title, .sidebar-widget-body, .sidebar-widget-bot{ background: url("../images/sidebar-bg.png") 0 0 no-repeat; width: 326px;}
.sidebar-widget-title{ height: 50px; background-position: -326px 0;}
.sidebar-widget-body{ min-height: 100px; background-repeat: repeat-y;}
.sidebar-widget-bot{ height: 17px; background-position: -326px -50px;}
.sidebar-widget-title h3{ color: #bbd9ea; font-size: 22px; padding: 15px 0 0 20px;}
ul.server{ padding: 10px 30px 10px 0;}
ul.server li{display: block; width: 240px; padding-left: 22px; margin: 0 auto; background: url("../images/status.png") 0 0 no-repeat;}
ul.server li a{display: block; width: 240px; height: 25px; line-height: 25px; color: #cecece; text-decoration: none;}
ul.server li a:hover{ color: #64afc5;}
ul.server li.active{ background-position: 0 0;}
ul.server li.beta{ background-position: 0 -25px;}
ul.server li.offline{ background-position: 0 -50px;}
/* right sidebar-widget end*/
/* server list */
.serverlist { position: relative;}
.serverlist .list .list-title{ width: 980px; height: 72px; margin: 14px auto 0; position: relative; background: url("../images/server_ui.png") 0 0 no-repeat; z-index: 10;}
.serverlist .list .list-title h4{ width: 980px; height: 52px; line-height: 52px; display: block; text-align: center; color: #e2ebed; font-size: 24px; position: absolute; bottom: 0; }
.serverlist .list-decorate{ width: 240px; height: 77px; background:url("../images/server_ui.png") 0 0 no-repeat; position: absolute; z-index: 10;}
.serverlist .list-decorate.left{ background-position: 0 -72px; left: 7px;}
.serverlist .list-decorate.right{ background-position: -240px -72px; right: 7px;}
.serverlist .list-content ul{ width:928px; margin: 0 auto; padding-top: 40px;}
.serverlist .list-content ul li{ width: 228px; height: 28px; float: left; margin: 0 2px 5px; background-image: url("../images/server_ui.png"); background-color: transparent; background-repeat: no-repeat; position: relative;}
.serverlist .list-content ul li.active{ background-position:-483px -72px;}
.serverlist .list-content ul li.active:hover{ background-position:-483px -100px;}
.serverlist .list-content ul li.beta{ background-position:-483px -128px;}
.serverlist .list-content ul li.beta:hover{ background-position:-483px -156px;}
.serverlist .list-content ul li.offline{ background-position:-483px -184px;}
.serverlist .list-content ul li a{ display: block; line-height: 28px; text-decoration: none; background: url("../images/status.png") 0 0 no-repeat; padding-left: 30px;}
.serverlist .list-content ul li.active a{ background-position: 8px 2px;}
.serverlist .list-content ul li.beta a{ background-position: 8px -23px;}
.serverlist .list-content ul li.offline a{ background-position: 8px -48px;}
.serverlist .list-content ul li a span.new{ width: 29px; height: 18px; display: block; position: absolute; right: 3px; top: 5px; background: url("../images/new.png") 0 0 no-repeat; }
.server_search{position: absolute; width: 100%; top: -75px; height: 90px; z-index: 10px}
.server_search h4{ width: 100%; text-align: center; position: absolute; top:35px; color: #8aaad8; font-size: 20px; font-weight: 100; text-transform: uppercase; z-index: 10;}
.server_search input{ background-image: url("../images/server_ui.png"); background-repeat: no-repeat; background-color: transparent; border: 0 none; position: absolute; z-index: 10;}
.server_search input.txt{ width: 221px; height: 30px; background-position: 0 -149px; left: 330px; top: 62px; text-indent: 10px; line-height: 30px; color: #FFFFFF;}
.server_search input.btn{ width: 129px; height: 28px; background-position: -221px -149px; right: 330px; top: 64px; cursor: pointer;}
.server_search input.btn:hover{ background-position: -350px -149px;}
.server_nav{ width: 560px; height: 60px; margin: 0 auto;}
.server_nav li{ float: left; width: 136px; height: 71px; margin: 0 2px; background: url("../images/server_ui.png") -136px -212px no-repeat;}
.server_nav li:hover{ background-position: -408px -212px;}
.server_nav li.ui-state-active{ background-position: 0 -212px;}
.server_nav li.ui-state-active:hover{ background-position: -272px -212px;}
.server_nav li a{ display: block; width: 136px; height: 71px; outline:none; text-align: center; text-decoration: none; line-height: 90px; font-family: 'agency_fbregular'; font-size: 24px; color: #e2ebed;}
.serverlist #tabs .line{ width: 974px; height: 16px; margin: 20px auto 0; background:url("../images/server_ui.png") 0 -284px repeat-x;}
/* server list end */


/* footer */
footer{ height: 245px; width: 100%; background-color: #000000; border-top: 1px solid #484329; margin-top: 50px; clear: both;}
footer a.gototop{ width: 30px; height: 55px; top: 0; right: 50px; position: absolute; background: url("../images/totop.png") 0 0 no-repeat;}
footer .column{ float: left; width:200px; padding: 60px 10px 0;}
footer .column.c4{ width: 260px;}
footer .column h2{ color: #e7e7e7; font-size: 22px; margin-bottom: 10px;}
footer .column a{ color: #676767; text-decoration: none; font-size: 14px; line-height: 140%;}
footer .column a:hover{ color: #FFFFFF;}
footer .column p{ color: #dfdfdf; font-size: 12px;}
footer .column ul.img_link li{ float: left;}
footer .column ul.img_link li a {width: 30px; height: 31px; display: block; background: url("../images/img_link.png") no-repeat; padding: 0 10px 10px 0; }
footer .column ul.img_link li a.link_1 {background-position: 0 0; }
footer .column ul.img_link li a.link_2 {background-position: -40px 0; }
footer .column ul.img_link li a.link_3 {background-position: -80px 0; }
footer .column ul.img_link li a.link_4 {background-position: -120px 0; }
footer .column ul.img_link li a.link_5 {background-position: -160px 0; }
/* footer */