@font-face {font-family: "MyriadPro-Regular"; src: url(../img/MyriadPro-Regular.otf); font-weight: normal; } body { padding: 0; margin: 0; font-family: "MyriadPro-Regular", sans-serif; font-size: 12px; color: #171717; background: #FFF; } h1, h2, h3 { padding: 0; margin: 10px 0 15px; font-size: 18px; text-transform: uppercase; font-weight: normal; letter-spacing: 0; font-weight: bold; border-bottom: 1px dashed #ccc; } ul, li { padding: 0; margin: 0; list-style: none; } #wrapper { background: url(../img/bg.jpg) center top no-repeat, url(../img/bgFooter.jpg) center bottom no-repeat; } #main { width: 856px; margin: 0 auto; } .serverStatus { width: 565px; height: 65px; margin: 0 auto; background: url(../img/serverStatusBg.png) center top no-repeat; } .serverStatus ul li { float: left; width: 100px; height: 40px; } .serverStatus ul li img { position: relative; } .serverStatus ul li:nth-child(1) { width: 230px; } .serverStatus ul li:nth-child(1) img { top: 0px; left: 180px; } .serverStatus ul li:nth-child(2) { width: 95px; text-align: center; line-height: 55px; color: #fcfcfc; font-size: 18px; font-weight: bold; } .serverStatus ul li:nth-child(3) { width: 200px; } .serverStatus ul li:nth-child(3) img { top: 0px; left: 105px; } .navigationTop { position: relative; height: 365px; } .navigationTop a { display: block; width: 264px; height: 209px; overflow: hidden; position: absolute; top: 0; left: 0; } .navigationTop a img { position: relative; } .navigationTop a.logo { width: 369px; height: 159px; margin: 0 auto; display: block; } .navigationTop a.logo { left: 50%; margin-left: -170px; top: 130px; } .navigationTop a.register { top: 0; left: -70px; } .navigationTop a.download { top: 0; left: auto; right: -70px; } .navigationTop a:hover img { top: -218px; } .navigationTop a.logo:hover img { top: 0; } .navigationBottom { height: 180px; } .navigationBottom ul li { height: 180px; width: 210px; display: inline-block; overflow: hidden; } .navigationBottom ul li img { position: relative; } .navigationBottom ul li:nth-child(1) img { top: 10px; left: 60px; } .navigationBottom ul li:nth-child(2) img { top: 10px; left: -150px; } .navigationBottom ul li:nth-child(3) { width: 250px; } .navigationBottom ul li:nth-child(3) img { top: 10px; left: -380px; } .navigationBottom ul li:nth-child(4) { width: 170px; } .navigationBottom ul li:nth-child(4) img { top: 10px; left: -625px; } .navigationBottom ul li img:hover { top: -207px; } .contentTop { width: 856px; height: 93px; background: url(../img/containerTop.png) center top no-repeat; float: left; } .contentCenter { width: 856px; min-height: 500px; background: url(../img/containerMiddle.png) center top repeat-y; float: left; position: relative; } .contentLeft { width: 260px; float: left; } .memberArea { width: 227px; height: 330px; background: url(../img/memberAreaBg.png) center top no-repeat; margin-top: -80px; margin-left: 25px; } .rankingArea { width: 230px; height: 219px; background: url(../img/rankingBg.png) center top no-repeat; margin-left: 25px; margin-top: 15px; } .contentRight { width: 590px; float: left; padding: 0 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .welcome { width: 558px; height: 220px; overflow: hidden; background: url(../img/welcomeBg.png) center top no-repeat; } .welcomeText { width: 320px; height: 220px; float: left; padding: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-shadow: 0 1px 1px rgba(255,255,255,1); } .welcomeText h1 { font-size: 17px; text-transform: uppercase; padding: 12px 0 5px; margin: 0; } .welcomeText p { font-size: 10px; text-transform: uppercase; color: #000; line-height: 12px; } .socialLinks ul li { display: inline-block; vertical-align: middle; } .socialLinks ul li a { display: block; width: 42px; height: 39px; overflow: hidden; } .socialLinks ul li a img { position: relative; } .socialLinks ul li:nth-child(1) { padding-right: 10px; font-size: 14px; font-style: italic; } .socialLinks ul li:nth-child(3) img { left: -41px; } .socialLinks ul li:nth-child(4) img { left: -83px; } .news { width: 235px; height: 220px; float: left; } .news table { width: 180px; border-collapse: collapse; position: relative; top: 35px; margin: 0 auto; } .news table tr td { padding: 5px 0 10px; } .news table tr td a { color: #171717; } .news table tr td .date { font-family: "Arial", sans-serif; font-size: 10px; color: #171717; } .quicklinks ul li { display: inline-block; height: 75px; width: 136px; overflow: hidden; padding: 8px 0; } .quicklinks ul li img { position: relative; left: 7px; } .quicklinks ul li:nth-child(2) img { left: -132px; } .quicklinks ul li:nth-child(3) img { left: -275px; } .quicklinks ul li:nth-child(4) img { left: -415px; } .quicklinks ul li:hover img { top: -91px; } .quicklinks ul li img { -webkit-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .featuredSlider { width: 210px; height: 195px; background: url(../img/sliderBg.png) center top no-repeat; float: left; } .featuredSlider .cycle-slideshow { width: 192px; height: 134px; position: relative; top: 7px; left: 9px; } .featuredSlider .pager { width: 120px; height: 26px; font-size: 20px; color: #FFF; position: relative; top: 7px; margin: 0 auto; text-align: center; float: left; padding: 5px 0 5px 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .featuredSlider .pager span { display: inline-block; margin: 0 1px; font-size: 0px; background: url(../img/slideInactive.png) center center no-repeat; width: 10px; height: 15px; float: left; } .featuredSlider .pager span.cycle-pager-active { position: relative; content: "1"; font-size: 8px; background: url(../img/sliderActive.png) center top no-repeat; color: #000; width: 10px; height: 15px; padding: 3px; } .featuredSlider #prev { width: 45px; height: 26px; float: left; position: relative; top: 7px; cursor: pointer; } .featuredSlider #prev img { position: relative; top: 1px; left: 15px; } .featuredSlider #next { width: 40px; height: 26px; float: left; position: relative; top: 7px; cursor: pointer; } .featuredSlider #next img { position: relative; top: 1px; left: 5px; } .loginpanel { width: 215px; height: 130px; position: relative; top: 195px; left: 4px; } .login_row_main { width: 215px; height: 70px; } .login_row { width: 140px; float: left; } .login_btn { width: 70px; float: left; } .login_row input.textClass { width: 137px; height: 25px; outline: 0; border: 0; background: url(../img/inputBg.jpg) center top no-repeat; padding: 0 5px; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-left: 1px; margin-bottom: 3px; } .login_btn input.loginBtn { width: 67px; height: 63px; outline: 0; border: 0; cursor: pointer; background: url(../img/loginBtn.png) center top no-repeat; margin-left: 5px; } .login_btn input.loginBtn:hover, .accountButtons ul li a img:hover { opacity: 0.7; } .accountButtons ul li a img { display: block; margin: 0 auto 5px; } .jobSlider { width: 354px; height: 176px; background: url(../img/jobSliderBg.png) center top no-repeat; float: left; position: relative; left: 7px; margin-left: -5px; margin-top: 5px; } .jobSlider .cycle-slideshow { width: 343px; height: 157px; position: relative; top: 3px; left: 3px; } .jobSlider .cycle-slideshow { border-bottom: 1px solid #849196; } .contentBottom { width: 856px; height: 22px; background: url(../img/containerBottom.png) center top no-repeat; float: left;/* margin-top: -15px;*/ } .pvpking { height: 110px; overflow: hidden; } .pvpking .image { width: 80px; height: 120px; float: left; } .pvpking .image img { display: block; position: relative; top: 55px; margin: 0 auto; } .pvpking .details { width: 150px; height: 120px; float: left; } .pvpking .details table { position: relative; top: 50px; } .pvpking .details table tr td { text-indent: 45px; font-family: "MyriadPro-Regular", sans-serif; color: #4c5456; font-weight: bold; line-height: 20px; font-size: 14px; } .pvpking .details table tr:nth-child(2) td { text-indent: 30px; } .pvpking .details table tr:nth-child(3) td { text-indent: 35px; line-height: 24px; } .gotm { height: 110px; overflow: hidden; } .gotm .image { width: 80px; height: 120px; float: left; } .gotm .image img { display: block; position: relative; top: 55px; margin: 0 auto; } .gotm .details { width: 150px; height: 120px; float: left; } .gotm .details table { position: relative; top: 40px; } .gotm .details table tr td { text-indent: 40px; font-family: "MyriadPro-Regular", sans-serif; color: #4c5456; font-weight: bold; line-height: 20px; font-size: 14px; } .gotm .details table tr:nth-child(2) td { text-indent: 75px; } .gotm .details table tr:nth-child(3) td { text-indent: 70px; line-height: 24px; } .login_btn input.loginBtn, .accountButtons ul li a img { -webkit-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .logged { padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .logged span { display: block; height: 80px; color: #171717; font-weight: bold; } .logged a { color: #000; font-weight: bold; } .logged > a, .generic-form input[type="submit"], .generic-form button[type="submit"] { background: #62645e; padding: 5px 15px; border-radius: 2px; border-bottom: 2px solid #484a45; outline: 0; border: 0; cursor: pointer; } .footer { height: 150px; } .footerInner { width: 340px; margin: 20px auto 0; } .footerInner .logo { width: 90px; height: 100px; float: left; } .footerInner .copyright { width: 250px; height: 100px; float: left; padding-top: 5px; } .footerInner .copyright p { padding: 0; margin: 0; color: #000; font-family: "MyriadPro-Regular", sans-serif; font-size: 13px; } .footerInner .copyright p a { color: #000; font-weight: bold; } #adminmenu, #submenu { background: #849196; padding: 5px; border-radius: 2px; margin-bottom: 5px; color: #FFF; } #adminmenu a, #submenu a { color: #FFF; } .vertical-table, .horizontal-table { width: 100%; border-collapse: collapse; } .vertical-table th, .horizontal-table th { background: #849196; border: 1px solid #67767c; } .vertical-table td, .horizontal-table td { background: #e2e8ea; } .clear { clear: both; } .adjust { width: 560px; overflow: auto; }