.page {
  background-image: url("/assets/pages/rock-texture-76510c6e.jpg");
  min-height: 100%;
}
.page::before
{
  background: url("/assets/pages/vignette-9bc988f3.png") no-repeat center;
  background-size: 100% 100%;
  content: "";
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  min-height: 600px;
  z-index: 0;
}

.page_container {
  width: 1024px;
  margin: 0 auto;
}

html[data-origin="kongregate"] .page_container {
  width: 100%;
}

html[data-layout="website"] > body {
  display: block;
}

ul
{
  margin: 0;
  padding: 0;
}

p
{
  margin: 16px 0;
}
p + p { margin-top: -6px; }

a > img
{
  outline: none;
  border: none;
}

ul
{
  list-style-type: none;
}


ul.bullets li {
  border-bottom: 1px dotted rgba(255,255,255,0.3);
  padding: 8px 8px 8px 30px;
  position: relative;
}
ul.bullets li:first-child {
  border-top: 1px dotted rgba(255,255,255,0.3);
}
ul.bullets li::before {
  content: "» ";
  display: block;
  margin-top: -0.5em;
  position: absolute;
  top: 50%;
  left: 8px;
}

.center
{
  text-align: center;
}

.notice
{
  margin: 20px 0;
  padding: 4px 8px;
  color: #222;
  background: #ddd;
  border: 2px solid red;
}



table, ul.bullets {
  background: rgba(255, 255, 255, 0.05);

  color: #bcb9ad;
  font-size: 0.9em;
  margin-top: 16px;
  margin-bottom: 16px;
}
table {
  border: 1px solid rgba(255,255,255,0.33);
}
tr {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
tr:last-child { border-bottom: none; }
th, td { padding: 10px 15px; }
th {
  color: #fafbd3;
  text-align: left;
}


.nav, ul.social_icons {  }
.nav > li, .vert_nav > li {
  margin: 0;
  padding: 0;
}
.nav > li {
  background: url("/assets/hud/weapon_separator-bbb43e13.png") no-repeat right center;
  float: left;
}
.nav > li:last-child {
  background: none;
}
.nav > li > a, .nav > li > span, .vert_nav > li > a, .vert_nav > li > span  {
  display: block;
  font-size: 16px;
  height: 42px;
  line-height: 42px;
  padding: 0 12px;
  transition: 0.5s ease;
}
.nav  li > a:hover, .vert_nav  li > a:hover { background: rgba(223, 182, 70,0.35); }
.nav  li > span { background: rgba(203,195,157,0.15); }
.vert_nav > li { background: url("/assets/hud/separator-259f72ca.png") no-repeat bottom; }
.vert_nav > li:last-child { background: none; }
.vert_nav > li.current { background: url("/assets/pages/vert_nav_current-background-1a3e79ce.png") no-repeat bottom; background-size: 100% 100%; }
.sticky_submenu { transition: 0.3s ease; }


ul.social_icons > li { float: left; }
ul.social_icons > li > a {
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  height: 0px;
  overflow: hidden;
  padding-top: 42px;
  position: relative;
  width: 42px;
}
ul.social_icons > li > a::before {
  background: url("/assets/pages/social_icon_label-4c5b03a9.png") no-repeat center;
  background-size: contain;
  content: "";
  height: 42px;
  opacity: 0.8;
  position: absolute;
    top: 0px;
  transition: 0.5s ease;
  width: 42px;
  z-index: -1;
}
ul.social_icons > li > a:hover::before { opacity: 1; }
.social_icons .facebook { background-image: url("/assets/pages/facebook_icon-f1741b97.png"); }
.social_icons .twitter { background-image: url("/assets/pages/twitter_icon-5549d65f.png"); }
.social_icons .rss { background-image: url("/assets/pages/rss_icon-64165472.png"); }






#toolbar 
{
  position: relative;
  height: auto;
  width: 100%;
  z-index: 2;
}
#welcome, #tlnav
{
  background: url("/assets/pages/toolbar-border-9893eceb.png") repeat-x bottom center;
  box-sizing: border-box;
  height: auto;
  line-height: 42px;
  padding-bottom: 2px;
  width: 100%;
}
.responsive_menu_list {
  background: url("/assets/pages/responsive_menu_list-28186bf3.png") no-repeat center;
  display: none;
  height: 0px;
  overflow: hidden;
  padding-top: 42px;
  position: absolute;
    top: 0px;
    left: 0px;
  width: 42px;
}
#tlnav .nav, #tlnav .social_icons  {
  transition: 1s ease;
}
.no-download-badge {
  background: url("/assets/landing/no-download-badge-bf512a60.png") no-repeat center;
  height: 0px;
  left: 16px;
  overflow: hidden;
  padding-top: 61px;
  position: relative;
  
  transition: 1s ease;
  transition-delay: 0.3s;
  width: 162px;
}
.no-download-badge.down {
  top: 120px;
  transition-delay: 0s;
}

#welcome > a {
  max-width: 220px;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top;    
}

#free_to_play
{
  font-family: 'Kreon';
  font-style: italic;
  font-size: 14px;
  color: #908684;
}

#tagline
{
  font-family: 'Kreon';
  font-style: italic;
  font-size: 14px;
  color: #908684;
  position: relative;
  top: 6px;
  left: 12px;
}



#welcome  { text-align: right; }
#welcome .simple_button {
  margin-left: 10px;
  margin-right: -10px;
  vertical-align: top;
}

.quiet
{
  font-size: 10px;
  font-weight: normal;
  padding-left: 10px;
}

.quiet > a
{
  padding-left: 10px;
  color: #666;
}

.quiet [alt=fb]
{
  position: absolute;
  right: -20px;
  top: -2px;
}

#trnav
{
  background: url("/assets/pages/toolbar-border-9893eceb.png") repeat-x bottom center;
  position: relative;
  z-index: 1;
}

#trnav.game_modes { text-align: center; }
.game_modes h3, .game_modes ul, .game_modes li { display: inline-block; }
.game_modes h3, .game_modes li  {
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
  margin: 0;
  padding: 10px 5px;
}


#toolbar.down {
  position: fixed;
  width: 1024px;
  top: -200px;
}
#toolbar.down.transition {
  transition: 1s ease;
  top: -200px;
}
#toolbar.down.visible {
  transition: 0.5s ease;
  top: 0px;
}
#toolbar.down > #tlnav,
#toolbar.down > #trnav,
#toolbar.down > #welcome {
  background-color: rgba(0,0,0,0.75);
  z-index: -1;
}

#logo {
  position: relative;
    top: 0px;
  text-align: center;
  width: 100%;
  
}
#logoimg {
  width: 300px;
  padding: 16px;
  display: inline;
}





  #welcome, #tlnav {
    height: 44px;
    padding: 0;
    padding-right: 10px;
  }
  #tlnav  { float: left; width: 60%;}
  #welcome  { float: right; width: 40%;}
  #trnav {
    background: none;
    position: absolute;
    top: 44px;
    right: 0px;
  }
  
  #toolbar.down > #trnav { background-color: transparent; }
  #trnav.game_modes {
    background: url("/assets/pages/modes_badge-3bf91519.png") no-repeat bottom center;
    background-size: 100%;
    color: #f99;
    padding: 10px 20px 50px 20px;
    text-align: center;
    transform-origin: 50% 0;
    transform: scale(0.8);
    transition: 1.2s ease;
    width: 120px;
  }
  #trnav.game_modes:hover { transform: scale(1); }
  .game_modes h3, .game_modes ul, .game_modes li { display: block; }
  .game_modes h3, .game_modes li {
    border-bottom: 1px dashed rgba(255,128,128,0.33);
    font-size: 20px;
    line-height: 30px;
    padding: 0;
    text-align: center;
  }
  .game_modes h3 {
    background: rgba(200,0,0,0.33);
    border-top: 1px dashed rgba(255,128,128,0.33);
  }
  .game_modes ul {
    height: 0px;
    overflow: hidden;
    transition: 0.6s ease;
  }
  .game_modes:hover ul { height: 65px; }
  #logoimg { width: 340px; }





#content
{
  position: relative;
  margin: 0 auto;
  z-index: 1;
}

.hide_top #content
{
  margin-top: 10px;
}

#content > h3
{
  text-align: center;
  font-weight: normal;
}

.page h1, .page h2 {
  font: bold 32px/32px Almendra, Georgia, serif;
  text-align: center;
  position: relative;
  color: #f4c94a;
}
.page h1 { margin-bottom: 30px; }
.page h2 { color: #fff;}
.page h2:first-child { margin-top: 0px; }

article
{
  width: 600px;
  margin: 40px auto 0 auto;
}

.articledate
{
  width: 600px;
  margin: 40px auto 0 auto;
  font-size: 80%;
  color: #888;
}

article > p > img
{
  max-width: 400px;
  display: block;
  margin: 20px auto;
}



.already
{
  text-align: center;
  font-size: 14px;
  margin-top: -10px;
  color: #c2b392;
}

.playfree
{
  position: absolute;
  top: -10px;
  right: -30px;
}

.forgot, .gallery
{
  font-weight: normal;
  text-align: right;
  margin-top: 140px;
  margin-right: 360px;
  display: block;
  font-size: 15px;
}

#new_user > .nav
{
  margin-top: 90px;
  text-align: center;
  display: block;
  font-size: 16px;
}

.breqs
{
  text-align: center;
  position: relative;
  top: 62px;
  font-size: 15px;
}

form.short input[type='submit']
{
  background: #9b8557;
  width: 120px;
  height: 40px;
  border: 2px solid #a49a76;
  font-family: "Georgia", serif;
  font-size: 19px;
  color: #fffbd7;
  border-radius: 4px;
  margin: 20px 0 0 370px;
}

.promologo
{
  display: block;
  margin: 120px 0 40px 0;
  text-align: center;
}

.topdollars
{
  text-align: center;
}

.indevelopment
{
  position: absolute;
  top: 30px;
  right: 120px;
}

.promo_index p
{
  margin: 20px 0;
}

.promo_index a
{
  font-weight: normal;
}

.promo_index .dragport
{
  position: absolute;
  left: -160px;
  top: -180px;
}

.letter
{
  font-size: 17px;
}

.promo_index .playnow
{
  float: right;
  position: relative;
  top: -18px;
}

#herestand
{
  text-align: center;
  margin-top: 70px;
  margin-bottom: 40px;
  font-size: 22px;
}

#heresmall
{
  font-size: 16px;
}

#promonames > h4
{
  font-weight: normal;
  font-size: 22px;
}

#promonames > hr
{
  color: #1a1a1a;
  height: 0;
  max-height: 0;
  display: block;
  border: 1px solid #1a1a1a;
}

.namelist
{
  font-size: 15px;
  color: #cc8193;
}






.home > #content { margin-top: 48px; }
#versus {
  margin-bottom: 30px;
  font: bold 32px/32px Almendra, Georgia, serif;
  text-align: center;
  position: relative;
  color: #f4c94a;
}
#versus .shield_hero, #versus .shield_monster {
  margin-top: -125px;
  position: absolute;
  top: 50%;
  z-index: 4;
}
#versus .shield_hero { left: 2px; }
#versus .shield_monster { right: 2px; }
#versus .separator_circle {
  color: #cbc39d;
  display: inline-block;
  height: 48px;
  line-height: 48px;
  margin: 0px;
  position: static;
  transform: scale(0.8);
  width: 48px;

}
#versus .name {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}


#splash
{
  box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.75);
  margin: 0 auto;
  margin-bottom: 40px;
  position: relative;
}
#splash .vignette { opacity: 0.75; transition: 2s ease; }
#splash:hover  .vignette { opacity: 0.5; }
.splash_screen { width: 100%; }

#spvid
{
  margin: 0 auto;
  width: 814px;
}

#spvid > iframe
{
  border: 2px solid #444;
  padding: 4px;
  background: #000;
}

.flydra
{
  display: block;
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  transition: 0.5s ease;
}

.flydra.visible
{
  opacity: 1;
}

.cirdra
{
  position: absolute;
  width: 190px;
  left: 600px;
  top: -120px;
}

#stpromo
{
  position: absolute;
  top: -100px;
  left: -80px;
}

.badnews
{
  position: absolute;
  width: 810px;
  height: 26px;
  top: 8px;
  left: 0px;
  text-align: center;
  font-size: 14px;
  color: darkred;
}

#siprompt
{
  position: absolute;
  bottom: 0px;
  right: 10px;
}



#heroimg
{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

#heroimg.male_human, #heroimg.male_dwarf {
  bottom: 7%;
  height: 80%;
  width: auto;
}

#heroimg.male_dwarf {
  height: 63%;
  left: 3%;
}

#prevhero, #nexthero
{
  position: absolute;
  left: 4px;
  top: 50%;
  margin-top: -35px;
  background-image: url("/assets/pages/hero_select_arrows-6ee22f38.png");
  height: 69px;
  transition: none;
  width: 49px;
}

#nexthero
{
  left: 227px;
  background-position: -49px -0px;
}

#prevhero:hover { background-position: 0px -69px; }
#nexthero:hover { background-position: -49px -69px; }

.footerline
{
  margin-top: 30px;
}

.postfoot
{
  border-top: 1px solid rgba(255,255,255,0.15);
  clear: both;
  padding-top: 20px;
  font-size: 0.8em;
  text-align: center;
  margin: 20px 0;
  color: #919191;
}





img.unlockimg
{
  height: 157px;
}



.unlockdesc
{
  color: #f7e6c9;
  font-size: 13px;
  text-align: center;
  margin-top: -20px;
}

.promo
{
  width: 800px;
  margin: 40px auto 40px auto;
  font-size: 18px;
  background: #d1e2f1;
  color: #0a0201;
  border-top: 6px solid #00406e;
  border-bottom: 6px solid #00406e;
}

.promo > p
{
  border-top: 3px solid #b10b27;
  border-bottom: 3px solid #b10b27;
  padding: 4px 8px;
  margin: 0;
}

.govtip
{
  width: 500px;
  margin: 40px auto 0 auto;
  font-size: 15px;
  text-align: center;
}


.feedback_form > .dynamic_width_center_wrapper > .button.big
{
  margin-top: 15px;
}

.dynamic_width_center_wrapper
{
  margin-top: 5px;
  position: relative;
  left: 50%;
}

.feedback_form > .dynamic_width_center_wrapper > .button.big
{
  display: inline-block;
  position: relative;
}

.dynamic_width_center_wrapper > .button.big > span
{
  display: inline-block;
  position: relative;
  left: -47%;
}

.plzcreate > strong
{
  text-transform: uppercase;
  color: #f7e6c9;
  font-size: 15px;
}

.feedback_form > p.plzcreate
{
   margin-bottom: 0;
}

.plzcreate
{
  color: #ede9e5;
  font-size: 14px;
}

ol.plzcreate
{
  margin-top: 0;
  margin-bottom: 35px;
}



.ritemr > td
{
  border: 1px solid rgba(255,255,255,0.15);
  text-align: center;
  padding: 2px 4px;
}

.riroll {
  font-weight: bold;
  color: #efa;
}

.ritemr > td:first-child
{
  min-width: 100px;
  font-size: 15px;
  text-transform: capitalize;
}

.tohit
{
  border-collapse: collapse;
  margin-bottom: 30px;
}

.tohitr > td
{
  border: 1px solid rgba(255,255,255,0.15);
  text-align: center;
  padding: 2px 4px;
  min-width: 50px;
}

.tohitr > td:first-child, .dr > td
{
  font-size: 15px;
  text-transform: capitalize;
}







#ajax_dialogs { z-index: 2; }
#ajax_dialogs, #ajax_dialogs > div {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;
}
#ajax_dialogs .overlay, #ajax_dialogs .dialog { pointer-events: all;}
#ajax_dialogs .dialog { transform: translate(-50%, -150%) scale(0.8); }
#ajax_dialogs .dialog.on_screen { transform: translate(-50%, -50%) scale(0.8); }
#ajax_dialogs .closed { pointer-events: none; }


.unit .error_icon {
  position: absolute;
  top: 50%;
  margin-top: -39px;
}
.unit .error_text {
  
  font-size: 1.2em;
  line-height: 1.3em;
  margin-left: 100px;
}






.mt-1 {
  margin-top: 4px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 16px;
}

.mb-1 {
  margin-bottom: 4px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-3 {
  margin-top: 16px;
}

.pl-1 {
  padding-left: 4px;
}

.pl-2 {
  padding-left: 8px;
}

.pl-3 {
  padding-left: 16px;
}

.text-secondary {
  color: #888;
}