.container { width: 1170px !important;}
body { font-family: "Open Sans"; font-size: 13px; }
.header-bar { position: relative; margin-top: 30px; height: 70px; border-radius: 8px; background-image: -moz-linear-gradient( 90deg, rgb(233,128,12) 0%, rgb(244,196,23) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(233,128,12) 0%, rgb(244,196,23) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(233,128,12) 0%, rgb(244,196,23) 100%);
  -webkit-box-shadow: inset 0 0 13px 3px rgba(255, 197, 85, 0.75);
  -moz-box-shadow: inset 0 0 13px 3px rgba(255, 197, 85, 0.75);
  box-shadow: inset 0 0 13px 3px rgba(255, 197, 85, 0.75); }
.topnav { position: absolute; list-style-type: none; border-radius: 8px; margin: 0px; padding: 0px;}
.topnav a { color: #FFF; text-decoration: none; padding: 5px; padding-left: 10px; padding-right: 10px;  color: #FFF; font-size: 18px; padding-top: 25px; height: 70px; }
.topnav li { float: left; text-shadow: 0px 2px 0px rgba( 0, 0, 0, 0.18 ); text-transform: uppercase; height: 70px; padding: 5px; padding-top: 25px; padding-left: 10px; padding-right: 10px; }
.topnav .active, .topnav li:hover { background-image: -moz-linear-gradient( 90deg, #e66303 0%, #ed8706 100%);
  background-image: -webkit-linear-gradient( 90deg, #e66303 0%, #ed8706 100%);
  background-image: -ms-linear-gradient( 90deg, #e66303 0%, #ed8706 100%);}
.topnav:first-child > li:first-child {
  border-radius: 6px 0 0 6px;
}
.topnav:last-child > li:last-child {
  border-radius: 0 6px 6px 0;  
}  
.topnav:first-child {
  left:0;
  top:0;
}
.topnav:last-child {
  right:0;
  top:0;
}
.topnav > li > ul {
  position: absolute;
  top: 69px;
  list-style:none;
  margin:0;
  padding:0;
  display: none;
  background: #e76b03;
  z-index: 9999999999999999999999;
}
.topnav > li:hover ul {
  display: block;
}
.topnav > li > ul > li {
  float: none;
  white-space: nowrap; 
  font-size: 10px;
  position: relative;
  height: 40px;
  width: 100%;
  padding: 10px;
  margin: 0px;
}
.topnav > li > ul > li > a{
  font-size: 13px;
  padding: 0px;
  margin: 0px;
}
.topnav > li > ul > li > a:hover {
  font-size: 13px;
  padding: 0px;
  margin: 0px;
  background: #ec9010;
}
.topnav > li > ul > li:hover {
  background: #ec9010;
}
.sidebar-nav { border-radius: 8px; background: #242236; min-height: 500px; margin-top: 60px; padding-bottom: 50px; }
.main-content { border-radius: 8px; background: #FFFFFF; min-height: 500px; margin-top: 60px; padding: 20px; padding-bottom: 60px;}
.widget { position: relative; padding: 20px; padding-top: 10px; padding-bottom: 10px; color: #FFF;}
.widget a { color: #faac36; font-weight: 600; }
.widget > h4 { color: #87869C; text-transform: uppercase; font-weight: bold; }
.useravatar { padding: 3px; background: #FFF; border: 1px solid #000;}
.widget hr { border: none; border-bottom: 1px solid #4a4956;}
.widget .counter { color:#242236;
  border-radius: 12px;
  background-image: -moz-linear-gradient( 90deg, rgb(233,128,12) 0%, rgb(244,196,23) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(233,128,12) 0%, rgb(244,196,23) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(233,128,12) 0%, rgb(244,196,23) 100%);
  font-size:16px;
  padding:3px 10px;
  margin-left: 10px;
  float: right; 
}
#social-links {
  padding:40px 20px 20px;
  text-align:center;
}
#social-links a {
  display: inline-block;
  width:62px;
  height:62px;
  overflow:hidden;
  text-indent: -999px;
}
#social-links a:hover {
  opacity: 0.6;
}
#social-links a.social-facebook {
  background:url("../images/layout/social.png") no-repeat 0 0;
}
#social-links a.social-twitter {
  background:url("../images/layout/social.png") no-repeat 0 -62px;
}
#social-links a.social-tumblr {
  background:url("../images/layout/social.png") no-repeat 0 -124px;
}
#footer-nav {
  list-style:none;
  text-align:center;
  margin-bottom:20px;
  z-index: 9999;
}
#footer-nav li {
  display:inline-block;
  padding:0 15px;
  border-right:1px solid rgba(255,255,255,0.2);
}
#footer-nav li a { 
  color: #43A3F7;
}
#footer-nav li:last-child {
  border:none;
}
#footer-copyright { color: #FFF; }
#footer-pet-01 {
  position:absolute;
}
#footer-pet-02 {
  position:absolute;
}
.align-center { text-align: center;}
.notification-x { position: absolute; right: 10px; top: -5px; color: #696775; }
.widget-col { color: #696775; }
.notification { position: relative; font-size: 11px; }
.shoutbox-post { position: relative; margin: 5px; background: #FFF; border-radius: 8px; padding: 10px; color: #000; font-size: 13px;}
.shoutbox-date { padding: 1px; font-size: 10px; color: #b6b6b6;}
.shoutbox-reply { background: #FFF; border-radius: 8px; margin: 5px; padding: 5px; padding-bottom: 2px;}
#shoutbox-panel { height: 400px; }
.sb-link { color: #20a8fc !important;}
.message-date { float: right; font-size: 10px; text-align: right;}
.small-text { font-size: 10px !important; }
.message-reply { margin-bottom: 10px; }
.border { border: 1px solid #eeeeee;}
.online-link { color: #242236 !important;}

/* ==========================================================================

   Site Content

   ========================================================================== */
.achievement-block { position: relative; display: inline-block; width: 120px; height: 150px; border-radius: 8px; border: 1px solid #cccccc; vertical-align: top; text-align: center; padding: 5px; margin: 5px;}
.achievement { background: #f5f5f5; border-radius: 8px; border-top: 8px solid #f5c32b; border-bottom: 4px solid #f5c32b; width: 500px; padding: 5px; margin: 10px;}
.sD { color: #ec8f10; }
.achievement-title { color: #242236; font-weight: bold; font-size: 18px;}
.achieve-b1 { background: #242236; }
.progress-text { color: #251705; }

.forum-header { background: #242236; border-radius: 8px 8px 0px 0px; height: 30px; padding: 5px; color:#f3bf16; text-align: center; font-weight: 600; width: 807px; }
.forum { background: #f5f5f5; min-height: 115px; margin-top: 2px;}
.forum-avatar { padding: 10px; text-align: center; }
.forum-info { padding-top: 10px; }
.forum-bottom { background: #242236; border-radius: 0px 0px 8px 8px; height: 10px;}
.top-margin { margin-top: 15px; }
.forum-row { border-bottom: 1px solid #a8a8a8; padding-top: 5px; background: #FFF; }
.forum-post-row { border-bottom: 1px solid #a8a8a8; border-left: 1px solid #a8a8a8; border-right: 1px solid #a8a8a8; margin-top: 0px; width: 807px;  }
.forum-user-post { min-height: 268px; width: 177px; float: left;}
.forum-post-info { border-left: 1px solid #a8a8a8; background: #FFFFFF; padding: 10px; min-height: 268px; width: 628px;}
@media (min-width:1920px) {
  .forum-post-info { border-left: 1px solid #a8a8a8; background: #FFFFFF; padding: 10px; min-height: 268px; width: 627px; }
}
@media (min-width:2560px) {
  .forum-post-info { border-left: 1px solid #a8a8a8; background: #FFFFFF; padding: 10px; min-height: 268px; width: 625px; }
}
@media (min-width:4267px) {
  .forum-post-info { border-left: 1px solid #a8a8a8; background: #FFFFFF; padding: 10px; min-height: 268px; width: 623px; }
}
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .forum-post-info { border-left: 1px solid #a8a8a8; background: #FFFFFF; padding: 10px; min-height: 268px; width: 628px;}
}
@media (min-width:1400px) and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .forum-user-post { min-height: 268px; width: 176px; float: left;}
  .forum-post-info { border-left: 1px solid #a8a8a8; background: #FFFFFF; padding: 10px; min-height: 268px; width: 627px; }
}
@media (min-width:1400px) and (max-width:1430px) and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .forum-user-post { min-height: 268px; width: 177px; float: left;}
  .forum-post-info { border-left: 1px solid #a8a8a8; background: #FFFFFF; padding: 10px; min-height: 268px; width: 627px; }
}
@media (min-width:2000px) and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .forum-post-info { border-left: 1px solid #a8a8a8; background: #FFFFFF; padding: 10px; min-height: 268px; width: 625px; }
}
@media (min-width:2600px) and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .forum-post-info { border-left: 1px solid #a8a8a8; background: #FFFFFF; padding: 10px; min-height: 268px; width: 622px; }
}
@media (min-width:4000px) and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .forum-post-info { border-left: 1px solid #a8a8a8; background: #FFFFFF; padding: 10px; min-height: 268px; width: 620px; }
  .small-text { font-size: 5px !important; }
}
.forum-post-links { text-align: right; margin: 2px;}
.reply-box { padding: 10px; }
.forum-name { font-size: 14px; }
.forum-up { padding-bottom: 10px; padding-top: 32px; }
.forum-up2 { padding-bottom: 10px; margin-top: 22px; margin-left: 2px;}
.vista_link { color: #000;}
.forum-post-info img { max-width: 500px; }
.signature-hr { border-color: #bcbcbc;}
.forum-post-info blockquote { font-style: italic; font-size: 10px; }
.begin { border-radius: 8px; border: 1px solid #211632;}
.storyph { display: none; margin: 5px;  }
.storyp { margin: 5px;}
#territory-story { position: relative; width: 600px; height: 400px; }
#user_pet_terr { position: absolute; top: 0px; left: 0px; display: none;}
.pet-area { position: relative; border-radius: 8px; padding: 10px; margin: 10px; display: inline-block; text-align: center; vertical-align: top; background: #f5f5f5; width: 240px; }
.pet-area:hover {background: #fcfcfc;}
.pet-area-symbol { position: absolute; right: 5px; top: 5px; }
.petname { color: #242236; font-weight: bold; }
.display-inline-block { display: inline-block; margin: 10px; }
.user_avatar { min-height: 200px; text-align: center; border: 1px solid #83838a; width: 177px; position: relative; }
.user_avatar .avaimg { position: absolute; top: 32px; left: 58px;  }
.user_avatar .username_text { position: absolute; top: 100px; left: 0px; width: 177px; text-align: center; font-weight: bold; }
.inventory-item-area-display { display: inline-block; width: 110px; text-align: center; border-radius: 8px; padding: 5px; margin: 10px; border: 1px solid #d1d1d1; vertical-align: top;}
.click { cursor: pointer;}
.depleted { position: absolute; top: 50px; left: 20px; padding: 5px; background: #93a2ac; color: #cde4f4; font-weight: bold;}


.territory-page { position: relative; }
.territory-top {  background: #242236; border-radius: 8px 8px 0px 0px; height: 30px; padding: 5px; color:#ffffff; }
.territory-bottom { background: #242236; border-radius: 0px 0px 8px 8px; height: 10px; margin-top: 10px;}
.territory-spot { width: 155px; height: 160px; padding: 10px; border-radius: 4px; display: inline-block; position: relative; }
.arrow-right { position: absolute; right: -10px; top: 300px; z-index: 99; }
.arrow-left { position: absolute;  left: -10px; top: 300px; z-index: 99;  }
.spot-icon { position: absolute; bottom: 10px; right: 10px;}
.active-spot { border: 2px solid #ed2147;}
.terrspot { border-radius: 4px; }
.territory-area { position: relative; margin-top: 10px; width: 500px; height: 500px; }
.asset { position: absolute; border: 1px solid #000; }
.asset-area { text-align: center; }
.areaBorder { border: 1px solid #000; z-index: 999;}
.imageLink { display:block; position:absolute; 
  top:100px; left:100px; width:100px; height:100px;
  border:1px solid red; }
.imageLinks a span {
  display:none;
}
.imageLinks { list-style: none;}
.actions_area { position: absolute; top: 20px; left: 20px; padding: 5px; background: #e94646; color: #FFF; font-weight: bold; }
.actions_used_sm { position: absolute; top: 20px; left: 20px; padding: 5px; width: 40px; height: 50px; color: #000; font-weight: bold; }
.npc-taken { border: 2px solid #7d26f3; }
.npc-area { position: absolute; top: 20px; right: 20px; padding: 5px; background: #4e3570; color: #FFF; font-weight: bold; border-radius: 4px; }
.npc-area-2 { position: absolute; top: 20px; right: 20px; padding: 5px; background: #DE8237; color: #FFF; font-weight: bold; border-radius: 4px; }
.npc-danger { background: #4e3570; color: #FFFFFF;}

.stat_hp { color: #f0162f; }
.stat_mp { color: #3d82f3;}
.stat_strength { color: #167cf0; }
.stat_defense { color: #7a90a9; }
.stat_magic { color: #9b3bb3; }
.stat_magicdef { color: #d993ea; }
.stat_speed { color: #8f7b3e; }
.stat_stone { color: #52575f;}
.stat_hunger { color: #505622; font-weight: 600;}
.stat_thirst { color: #223456; font-weight: 600;}
.right-border { border-right: 1px solid #cfdcd4;}
.dye-pets { display: inline-block; width: 93px; height: 60px; margin: 5px; overflow: hidden; }
.dyepetsborder {border-radius: 4px; border: 1px solid #cfdcd4;}
.activeborder { border: 1px solid #f60c32 !important; border-radius: 4px;}
.enemy-pet { border-color: #4e3570;}
.stat-icon { width: 20px; height: 20px; }

.modal-dialog { width: 700px; }
#currently_wearing { border-radius: 4px; border: 1px solid #dfdfdf; padding: 5px; }
.wearing-item { border-radius: 4px; margin: 5px; display: inline-block; border: 1px solid #dfdfdf;}
.wearing-edit { display: none; border-radius: 4px; border: 1px solid #dfdfdf; padding: 5px; margin-bottom: 5px; }
.progress-bar-bg { background: #cacaca; }
.table-heading { background: #f1f1f1; color: #45a5e2; font-weight: bold; text-transform: uppercase; border-bottom: 1px solid #b9b9b9 !important; border-top: 1px solid #b9b9b9 !important;}
.page-header-top { background: #323a47; color: #f3bf16; font-weight: 600; border-radius: 4px; padding: 5px; text-align: center; margin-bottom: 20px;  }
.item-shop { display: inline-block; width: 120px; margin: 15px; padding: 5px; text-align: center; vertical-align: top; }
.tbl>tbody>tr{border-bottom: 1px solid #323a47 !important; }
.gallery-display { display: inline-block; width: 110px; text-align: center; border-radius: 8px; padding: 5px; margin: 10px; border: 1px solid #d1d1d1; vertical-align: top; height: 200px;}
.box-header { background: #242236; border-radius: 8px 8px 0px 0px; height: 30px; padding: 5px; color: #f3bf16; font-weight: bold; }
.box-area { background: #f5f5f5; margin-top: 0px; padding: 10px; border-left: 1px solid #A8A8A8; border-right: 1px solid #A8A8A8; border-bottom: 1px solid #A8A8A8; border-radius: 0px 0px 8px 8px;}
.friends-area { display: inline-block; padding: 5px; width: 100px; text-align: center;}
.news-area { margin: 5px; padding: 10px; border: 1px solid #323a47; border-radius: 4px; }
.news-comments { float: right; }
#pollArea { display: none; }
.poll-area{ padding: 10px; }
.poll-answer { margin: 10px; border: 1px solid #eeeeee; border-radius: 4px; padding: 5px; }
.random_event { margin: 10px; border-radius: 4px; border: 1px solid #f3bf16; padding: 10px; }
.random_event_image { float: left; margin-right: 10px; }
.random_event_info { float: left; }
.random_event_title {  background: #242236; border-radius: 4px; padding: 5px; color: #FFF; }
.random_event_header { background: #242236; border-radius: 4px; padding: 5px; color: #f3bf16; text-align: center; font-weight: 600; }
.rounded-corners { border-radius: 4px; }
.big-npc-text { font-size: 18px; }
.feed-area { border: 1px solid #cccccc; padding: 10px; margin-bottom: 10px;}
.border-bottom { border-bottom: 1px solid #cccccc; padding-bottom: 5px;}
.equip-item { border: 1px solid #CCCCCC; padding: 10px; display: inline-block; margin: 10px; width: 120px; min-height: 150px; text-align: center; font-size: 11px; vertical-align: top;}
.bottom-margin { margin-bottom: 10px;}
.battle-bg-area { position: relative; background: url('/assets/images/battle/battle-bg.png'); border-radius: 4px; min-height: 470px;}
.pet_1_wrapper { position: absolute; top: 60px; left: 150px; min-height: 150px; text-align: center; }
.pet_2_wrapper { position: absolute; top: 60px; right: 150px; min-height: 250px; text-align: center; }
.hp_wrapper { border-radius: 4px; background: #FFF; width: 200px; position: relative; border: 1px solid #000; margin-right: auto; margin-left: auto; }
.hp_filler { border-radius: 4px; background: #f33b3b; height: 15px; width: 0px; position: relative;}
.hp_text { position: absolute; top: 0px; left: 10px; color: #000; font-weight: bold; font-size: 11px; }

.mp_wrapper { border-radius: 4px; background: #FFF; width: 200px; position: relative; border: 1px solid #000; margin-right: auto; margin-left: auto; }
.mp_filler { border-radius: 4px; background: #3d82f3; height: 15px; width: 130px; position: relative;}
.mp_text { position: absolute; top: 0px; left: 10px; color: #000; font-weight: bold; font-size: 11px; }
.battle-petname { position: absolute;  top: 10px; left: 10px; background: #FFF; border-radius: 4px; border: 1px solid #000; padding: 5px; text-align: center;}
.battle-petname2 { position: absolute;  top: 10px; right: 10px; background: #FFF; border-radius: 4px; border: 1px solid #000; padding: 5px; text-align: center;}
.battle-petname3 { background: #FFF; border-radius: 4px; border: 1px solid #000; padding: 5px; text-align: center; width: auto;}
.element-1 { background: #df6921; color: #ffffff;}
.element-2 { background: #2169df; color: #ffffff;}
.element-3 { background: #d9c018; color: #ffffff;}
.element-4 { background: #446731; color: #ffffff;}
.advert { margin-top: 70px;}
.battle_options { position: relative; margin-top: 30px; border-radius: 4px; padding: 10px;}
.pvp_battle_options { position: absolute; bottom: 50px; left: 300px; margin-top: 30px; border-radius: 4px; padding: 10px; width: 400px; margin-left: auto; margin-right: auto;}
.attack_damage { position: absolute; top: 70px; left: 140px; font-size: 30px; color: #1f232c; font-weight: bold; text-shadow: 0px 0px 1px #000; }
.attack_damage2 { position: absolute; top: 90px; left: 160px; font-size: 30px; color: #1f232c; font-weight: bold; text-shadow: 0px 0px 1px #000; }
.heal_damage { position: absolute; top: 40px; left: 100px; font-size: 30px; color: #ed4165; font-weight: bold; text-shadow: 0px 0px 1px #000; }
.stun_damage { position: absolute; top: 120px; left: 100px; font-size: 24px; color: #52c9bf; font-weight: bold; text-shadow: 0px 0px 1px #000; }
.fam_damage { position: absolute; top: 130px; left: 90px; font-size: 30px; color: #682ec7; font-weight: bold; text-shadow: 0px 0px 1px #000; }
.fam_heal { position: absolute; top: 130px; left: 90px; font-size: 30px; color: #df62cf; font-weight: bold; text-shadow: 0px 0px 1px #000; }
.batte_message { position: absolute; top: -40px; left: 100px; margin-top: 20px; border-radius: 4px; padding: 5px; background: #FFF; opacity: .9; width: 350px; }
.familiar { position: absolute; top: 40px; left: -120px; margin-top: 20px; padding: 5px; width: 160px;  }
.familiar2 { position: absolute; top: 40px; right: -120px; margin-top: 20px; padding: 5px; width: 160px;  }
.familiar_message { position: absolute; top: -75px; left: 100px; margin-top: 20px; border-radius: 4px; padding: 5px; background: #682ec7; color: #FFF; opacity: .9; width: 350px; }

.batte_message2 { position: absolute; top: 280px; margin-top: 55px; border-radius: 4px; padding: 5px; background: #FFF; opacity: .9; width: 350px; }
.battle_over { position: absolute; top: 120px; margin-left: auto;margin-right: auto; left: 0; right: 0; border-radius: 4px; background: #FFFFFF; text-align: center; font-size: 14px; padding: 10px; width: 300px; z-index: 999999; opacity: .8; }
.battle-winner-pet { position: relative; margin-left: auto; margin-right: auto; left: 0; right: 0; padding: 10px; text-align: center;}
.battle-petname3 { background: #FFF; border-radius: 4px; border: 1px solid #000; padding: 5px; text-align: center; width: auto;}
.battle-victor { color: #000; font-size: 24px; }
.battle-victor-message { color: #000; font-size: 14px; }
.battle-winner-msg { background: #FFF; opacity: .9; padding: 5px; border-radius: 4px; width: 400px; margin-left: auto; margin-right: auto; }
#sb-msg { font-size: 12px; }
.black-link { color: #484848 !important;}
#achievement_popup { display: none; position: fixed; right: 20px; top: 140px; width: 400px; padding: 5px; background: #ffffff; border-radius: 4px; z-index: 9999999; box-shadow: 0px 0px 5px #5e5e5e; }
.achieve-header { background: #323a47; color: #f3bf1f; padding: 5px; text-align: center; border-radius: 4px; font-weight: 600;}
.achieve-text { margin-top: 10px; text-align: center;}
.male-gender {  font-weight: bold;}
.female-gender { font-weight: bold;}
.elemental-label { border-radius: 4px; padding: 5px; font-size: 11px;}
.center-box { margin-left: auto; margin-right: auto;}
.nfp-post-block { margin-top: 0px; background: #000000;}
.nfp-user-area { float: left; width: 177px !important; background: #000000; margin: 0px !important; padding: 0px !important; min-height: 268px; }
.nfp-post-area { float: left; width: 630px !important; background: #E2B5C1; padding: 10px; }
.clearboth { clear: both;}
.modal-header { background: #242236; color: #f3bf16; border-radius: 4px 4px 0px 0px; font-weight: bold;}
.modal-header h4 { font-weight: bold; }
.modal-header .close { color: #f3bf16; opacity: .9;}
.craft-item { display: inline-block; margin: 5px; width: 110px; text-align: center; vertical-align: top; }
.shop-area { display: inline-block; margin: 15px; width: 120px; text-align: center; vertical-align: top; }
.item-rare { color: #28568A; font-weight: 600;}
.item-epic { color: #6A3B80; font-weight: 600;}
.item-legendary { color : #C9B128; font-weight: 600;}
.petarea { display: block; width: 210px; }
.cs_cats { border-radius: 4px; border: 1px solid #eeeeee; padding: 10px; text-align: center;}
.white-text { color: #FFFFFF !important; }
.no-bottom-margin{ margin-bottom: 0px !important;}
.achievement-single { position: absolute; top: 4px; right: -10px; background: #FFAD33; color: #170E00; font-weight: bold; border-radius: 4px; padding: 5px; font-size: 10px;}
.relative-element { position: relative; }
.guild-option { display: inline-block; text-align: center; margin: 10px;}
.panel-options { position: absolute; top: 5px; right: 5px; }
.page-options { float: right; }
.guild-bit { display: inline-block; margin: 5px; width: 145px; border-radius: 4px; border: 1px solid #EEEEEE; text-align: center; padding: 5px; vertical-align: top; }
.guild-level { position: absolute; top: 0px; right: 5px; padding: 10px; background: #0A1E33; color: #f3bf16; font-weight: bold; border-radius: 4px; font-size: 11px;}
.guild-area-main { background: #eeeeee; border-radius: 4px; padding: 5px;}
.hp-part1 { background: #EBEBE6; padding: 20px; }
.ch-heading { text-transform: uppercase; font-weight: bold; color: #464645;}
.ch-heading2 { text-transform: uppercase;}
.news-segment { background: #FFFFFF; padding: 10px; margin: 10px; border-radius: 4px;}
.site-stats { border: 1px solid #eeeeee; padding: 10px; border-radius: 4px; font-size: 11px;}
.trade-item { display: inline-block; margin: 5px; padding: 5px; text-align: center; width: 110px; height: 200px; vertical-align: top;}
.trade-pet { display: inline-block; margin: 5px; padding: 5px; text-align: center; width: 220px; height: 200px; vertical-align: top; }
.trade-area { padding: 10px; border-radius: 4px; border: 1px solid #000000; margin: 10px; }
.trade-familiar { display: inline-block; margin: 10px; padding: 5px; text-align: center; width: 160px; height: 220px; vertical-align: top;}
.staff_bio { margin-top: 170px;}
.top-align { vertical-align: top;}
.sb-postbit { float: left; width: 60px; text-align: center; }
.sb-mod { position: absolute; top: 30px; left: -22px;}
.map-spot-area { display: inline-block; margin: 10px; padding: 5px; width: 120px; text-align: center; vertical-align: top;}
#petgencont { width: 600px; height: 400px;}
#loading_spinner { position: fixed; bottom: 50px; left: 50px; font-size: 24px; display: none; border: 1px solid #000; color: #FFF; padding: 5px; background: #000; border-radius: 4px; z-index: 9999; }
.ability-common { color: #F4B97A; font-weight: bold;}
.ability-rare { color: #0CAD54; font-weight: bold;}
.ability-epic { color: #DA3A8C; font-weight: bold;}
.ability-legendary { color: #5627C7; font-weight: bold;}
.ability-ultimate { color: #857BC8; font-weight: bold;}
.ability-icon { display: inline-block; margin: 2px; border-radius: 50%; width: 16px; height: 16px; font-size: 10px; border: 1px solid #000; text-align: center;}
.ability-icon-right { float: right; margin: 2px; border-radius: 50%; width: 16px; height: 16px; font-size: 10px; border: 1px solid #000; text-align: center;}
.fire-element { background: #FF7929; color: #021418; }
.water-element { background: #1B88FF; color: #021418; }
.earth-element { background: #0F7F09; color: #021418; }
.light-element { background: #A69A24; color: #021418; }
.ultimate-bg { background: #1B1929; color : #FFFFFF; border-radius: 4px; padding: 10px;}
.ba-defense-title { margin-top: 5px; padding-top: 5px; font-size: 11px; font-weight: bold; border-top: 1px solid #EEEEEE; width: 200px; margin-left: auto; margin-right: auto;}
.battle-challenger-area { display: inline-block; margin: 10px; padding: 5px; border-radius: 4px; border: 1px solid #EEEEEE; text-align: center;}
.spin{
     -webkit-transform-origin: 50% 58%;
     transform-origin:50% 58%;
     -ms-transform-origin:50% 58%; /* IE 9 */
     -webkit-animation: spin .8s infinite linear;
     -moz-animation: spin .8s infinite linear;
     -o-animation: spin .8s infinite linear;
     animation: spin .8s infinite linear;
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.places-area { position: relative; display: inline-block; width: 120px; min-height: 200px; padding: 5px; margin: 8px; border: 1px solid #000; text-align: center; border-radius: 4px; font-size: 12px; vertical-align: top; }
.buff-icon { display: inline-block; padding: 10px; width: 140px; margin: 10px; text-align: center; border: 1px solid #DDDDDD; border-radius: 4px; }
.page-title { margin-bottom: 20px; position: relative; border-bottom: 1px solid #EEE; padding-bottom: 0px; }
.page-title-text { float: left; margin: 5px; font-size: 15px; }
.page-title-options { float: right; margin: 5px;}
.battle-place-icon { display: inline-block; margin: 5px; border-radius: 4px; border:1px solid #EEE; padding: 5px; }
.token-creation { position: relative; width: 250px; text-align: center; padding: 5px; border: 1px solid #EEE; margin: 5px; display: inline-block;  }
.table-center { text-align: center; }
.clan-represent { display: inline-block; margin: 10px; border-radius: 4px; border: 1px solid #EEE; padding: 10px; text-align: center; }

.gallery-wear { display: inline-block; margin: 10px; border-radius: 4px; border: 1px solid #999999; padding: 10px; text-align: center; width: 135px; height: 240px; vertical-align: top;}
.gallery-wear:hover { background: #EEEEEE; }

.slots-area { border-radius: 4px; border: 1px solid #999999; padding: 10px; text-align: center; margin-top: 10px;  }

/* Breeding */
.breed-pet-area { border-radius: 4px; border: 1px solid #EEE; padding: 5px; text-align: center; }
.breed-pet-type { position: absolute; top: -5px; left: 130px; width: 150px; background: #FFF; border: 1px solid #EEE; border-radius: 4px; padding: 5px; }
.nodisplay { display: none; }
.breed-pet { text-align: center; border: 1px solid #EEE; padding: 5px; border-radius: 4px; margin-right: auto; margin-left: auto; width: 600px;  }
.pet_slots { border-radius: 4px; border: 1px solid #EEE; padding: 5px; text-align: center; margin-right: auto; margin-left: auto; width: 200px;  }
.territory-label { background: #FFF; border-radius: 4px; padding: 2px; height: 40px; }


.battle-category { border-radius: 4px; background: #4e7fa8; padding: 5px; color: #FFF; font-weight: 600; }
.game-area { display: inline-block; border-radius: 4px; border: 1px solid #EEE; padding: 10px; margin: 10px; vertical-align: top; text-align: center; }


.familiar-area { border: 1px solid #EEE; border-radius: 4px; padding: 10px; margin: 5px; position: relative; display: inline-block; text-align: center; vertical-align: top; min-height: 260px; }
.familiar-options { position: absolute; top: 10px; right: 5px; padding: 5px;  }
.familiar-rarity-0 { font-weight: 600; color: #686868; }
.familiar-rarity-1 { font-weight: 600; color: #708E8E; }
.familiar-rarity-2 { font-weight: 600; color: #C32F38; }
.familiar-rarity-3 { font-weight: 600; color: #DD31E5; }
.familiar-rarity-4 { font-weight: 600; color: #169DF1; }
.familiar-rarity-5 { font-weight: 600; color: #21D671; }

.market-shop-area { display: inline-block; margin: 5px; padding: 5px; border: 1px solid #eee; border-radius: 4px; text-align: center; vertical-align: top; height: 220px; position: relative; width: 120px;}
.view-wearable-icon { position: absolute; top: 5px; right: 5px; }

.item-collection { display: inline-block; margin: 5px; padding: 5px; border: 1px solid #eee; border-radius: 4px; text-align: center; vertical-align: top; height: 220px; position: relative; width: 120px; }
.reserve-area { display: inline-block; margin: 5px; text-align: center; vertical-align: top; width: 50px; }

.places-area-spot { position: absolute; right: 5px; border-radius: 4px; background: #FFF; padding: 2px;  }
.slot-fade { opacity: .3; }