@font-face {
        font-family: "Belwe";
        src: url("../fonts/Belwe_en.ttf");
}

@font-face {
        font-family: "FranklinGothic";
        src: url("../fonts/FranklinGothic.ttf");
}
.hyperlink-icon {
vertical-align: middle;
padding-left: 15px;
padding-right: 3px;
}
#on-title {
display:none;
position: absolute;
top: 3px;
left: -14px;
z-index: 44;
}
#custom_menu {
  cursor: pointer;
}

.dd-options {
    max-height: 280px;
}

#counter {

width: 110px;
height: 28px;
position: absolute;
top: 56px;
left: 717px;
font-size: 15px;
font-family: "Belwe";
color: #e0dcdc;
}
.ui-slider .ui-slider-handle{
    width:20px; 
    height:37px; 
    background:url(../images/zoom-slider.png) no-repeat; overflow: hidden; 
    position:absolute;
    top: -13px;
    border-style:none; 
    outline: none;
}
.ui-slider-range {
    background: linear-gradient(top, #ffffff 0%,#eaeaea 100%);
    position: absolute;
    border: 0;
    top: 0;
    height: 100%;
    border-radius: 25px;
}
.ui-slider-horizontal {
    background: #361c0a;
    position: absolute;
    top: 0;
    height: 9px;
    border: 2px solid #7b5b3c;
    border-radius: 25px;
}


#container {
    position: absolute;
    width:912px;
    height:721px;
    left:50%;
    top:50%;
    margin:-355px 0 0 -456px;
    background:url(../images/panel_main_new2_kotft.png);
}

@media (max-width: 912px) {
    #container {
        left: 0px;
        margin-left: 0px;
    }
}

@media (max-height: 687px) {
    #container {
        top: 0px;
        margin-top: 0px;
    }
}

body {
    margin:0;
    padding:0;
    background: #000000 url(../images/bg_knights.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000;
}

.content {
    text-align: left;
    padding-top:110px;
    padding-left:72px;
    height:200px;
}

#type_menu {
position: absolute;
margin-left: -74px;
margin-top: 125px;
width: 76px;
height: 411px;
background:url(../images/type_menu.png);
}

.panel_left {
background-image:url(../images/panel_main_seperators.png);
position: absolute;
color: black;
border: 3px;
width: 435px;
height: 421px;
left: 60px;
top: 135px;
}
.panel_right {
position: absolute;
color: red;
border: 3px;
width: 320px;
height: 465px;
left: 574px;
top: 126px;
}
#counter_old {
position: absolute;
text-align: center;
color: white;
border: 3px;
width: 70px;
height: 17px;
left: 727px;
top: 663px;
line-height: 10px;
font-size: 16px;
font-family: "Belwe";
}
#card {

width: 312px;
filter: url(shadow.svg#drop-shadow);
    -webkit-filter: drop-shadow(0px 0px 15px rgba(0,0,0,0.7));
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}
.minion-legendary {
margin-top: -15px;
margin-left: -3px;
}

.minion {
margin-top: 3px;
margin-left: -3px;
}

.spell-legendary {
margin-top: 8px;
margin-left: 8px;
}

.spell {
margin-top: 3px;
margin-left: -3px;
}

.weapon {
margin-top: 6px;
margin-left: -1px;
}

.heropower {
margin-top: 8px;
margin-left: -3px;
}

.hero {
margin-top: 10px;
margin-left: -3px;
}

.input-text {
border-radius: 4px 4px 4px 4px;
display: inline-block;
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
height: 28px;
font-size: 16px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
line-height: 20px;
padding: 4px 6px;
}
#input-area {
border-radius: 4px 4px 4px 4px;
display: inline-block;
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
font-size: 16px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
line-height: 20px;
padding: 4px 6px;
padding-right: 35px;
width: 258px;
height: 86px;
}
.input-area {
border-radius: 4px 4px 4px 4px;
display: inline-block;
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
font-size: 16px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
line-height: 20px;
padding: 4px 6px;
padding-right: 35px;
width: 258px;
height: 86px;
}
.cardurl {
  margin-top: 5px;
}
.cardname {
margin-top: 30px;
margin-left: 10px;
width: 280px;
}
.icardname {
margin-top: 30px;
margin-left: 10px;
width: 280px;
}
.cardrace {
margin-top: 30px;
margin-left: 10px;
width: 107px;
}
.cardmana {
margin-top: 30px;
margin-left: 10px;
width: 35px;
}
.cardattack {
margin-top: 30px;
margin-left: 10px;
width: 35px;
}
.cardhealth {
margin-top: 30px;
margin-left: 10px;
width: 35px;
}
#panel_left_mana {
width: 220px;
height: 90px;
position: absolute;
top: 156px;
left: 0px;
font-size: 16px;
font-family: "Belwe";
}
#panel_left_rarity {
width: 220px;
height: 90px;
position: absolute;
top: 156px;
left: 213px;
font-size: 16px;
font-family: "Belwe";
}
#panel_left_cardname_race {
width: 429px;
height: 62px;
position: absolute;
top: 0px;
left: 0px;
font-size: 16px;
font-family: "Belwe";
}
#panel_left_classes {
width: 429px;
height: 62px;
position: absolute;
top: 86px;
left: 0px;
font-size: 16px;
font-family: "Belwe";
}

#panel_left_cardtext {
width: 429px;
height: 62px;
position: absolute;
top: 263px;
left: 0px;
font-size: 16px;
font-family: "Belwe";
}
#panel_left_picture {
width: 429px;
height: 62px;
position: absolute;
top: 372px;
left: 15px;
font-size: 16px;
font-family: "Belwe";
}

#panel_left_swirl {
width: 140px;
height: 62px;
position: absolute;
top: 263px;
left: 280px;
font-size: 11px;
font-family: "Belwe";
}

#panel_left_bg_gold {
width: 135px;
height: 45px;
position: absolute;
top: 320px;
left: 280px;
font-size: 11px;
font-family: "Belwe";
}

#on-gem-brackets {
position: absolute;
z-index: 3;
width: 61px;
height: 20px;
left: 125px;
top: 250px;
display: none;
    background-image:url("../card_js_templates/minion_gem_brackets.png");
}
#on-gem-on {
position: absolute;
z-index: 3;
width: 29px;
height: 34px;
top: 3px;
left: 11px;
    background-image:url("../card_js_templates/gem_legendary.png");
}

#on-banner {
position: absolute;
z-index: 3;
width: 64px;
height: 137px;
left: 2px;
top: 17px;
display: none;
    background-image:url("../card_js_templates/on_card_banner_1-0.png");
}

#on-dragon {
position: absolute;
z-index: 3;
width: 234px;
height: 174px;
left: 64px;
top: -18px;
display: none;
    background-image:url("../card_js_templates/card_minion_legendary_dragon_bracket.png");
}

#on-swirl {
position: absolute;
z-index: 3;
width: 137px;
height: 108px;
left: 84px;
top: 276px;
display: none;
    background-image:url("../card_js_templates/on_card_swirl_basic_minion.png");
}

#on-mana {
position: absolute;
z-index: 10;
width: 76px;
overflow: hidden;
text-align: center;
top: 4px;
left: 0px;
color: white;
display: none;
font-size: 75px;
font-family: "Belwe";
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: black;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

#on-attack {
position: absolute;
z-index: 10;
width: 76px;
overflow: hidden;
text-align: center;
top: 340px;
left: 0px;
color: white;
display: none;
font-size: 75px;
font-family: "Belwe";
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: black;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

#on-health {
position: absolute;
z-index: 10;
width: 76px;
overflow: hidden;
text-align: center;
top: 340px;
left: 222px;
color: white;
display: none;
font-size: 75px;
font-family: "Belwe";
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: black;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

#on-race {
position: absolute;
z-index: 3;
width: 156px;
height: 36px;
left: 73px;
top: 363px;
overflow: hidden;
display: none;
text-align: center;
    background-image:url("../card_js_templates/card_race.png");
}

#on-race-text {
position: absolute;
z-index: 2;
width: 156px;
text-align: center;
top: 7px;

color: white;

font-size: 20px;
font-family: "Belwe";
    text-shadow: 1.5px 1.5px 0 #000, -1.5px -1px 0 #000, 1.5px -1.5px 0 #000,
            -1.5px 1.5px 0 #000;

}

#on-hero-health {
position: absolute;
z-index: 3;
width: 75px;
height: 103px;
left: 215px;
top: 230px;
overflow: hidden;
display: none;
text-align: center;
    background-image:url("../card_js_templates/add_hero_health.png");
}

#on-hero-health-text {
position: absolute;
z-index: 2;
width: 75px;
text-align: center;
top: 7px;
display: none;
color: white;

font-size: 75px;
font-family: "Belwe";
    text-shadow: 1.5px 1.5px 0 #000, -1.5px -1px 0 #000, 1.5px -1.5px 0 #000,
            -1.5px 1.5px 0 #000;

}


#on-cardtext {
position: absolute;
z-index: 10;
top: 0px;
left: 0px;
display: none;
pointer-events: none;

}

.vote { position: absolute; z-index: 4; top: 0px; left: 94px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: 0px 0px 1pt 1pt red; }

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  background: #eee;
  border-bottom: 1px solid #fff;
  border-radius: 3px;
top: 7px;    
right: 7px;
}

nav li {
  float: left;          
}

nav #login {
  border-right: 1px solid #ddd;
  box-shadow: 1px 0 0 #fff;  
}

nav #login-trigger,
nav #signup a {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  padding: 0 8px;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 #fff; 
}

nav #signup a {
  border-radius: 0 3px 3px 0;
}

nav #login-trigger {
  border-radius: 3px 0 0 3px;
}

nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {
  background: #fff;
}

nav #login-content {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 999;    
  background: #fff;
  background-image: linear-gradient(top, #fff, #eee);  
  padding: 15px;
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  border-radius: 3px 0 3px 3px;
}

nav li #login-content {
  right: 0;
  width: 250px;  
}

/*--------------------*/

#inputs input {
  background: #f1f1f1;
  padding: 6px 5px;
  margin: 0 0 5px 0;
  width: 238px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 1px #ccc inset;
}

#inputs input:focus {
  background-color: #fff;
  border-color: #e8c291;
  outline: none;
  box-shadow: 0 0 0 1px #e8c291 inset;
}

/*--------------------*/

#login #actions {
  margin: 10px 0 0 0;
}

#login #submit {    
  background-color: #d14545;
  background-image: linear-gradient(top, #e97171, #d14545);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;    
  border: 1px solid #7e1515;
  float: left;
  height: 30px;
  padding: 0;
  width: 100px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #fff;
}

#login #submit:hover,
#login #submit:focus {    
  background-color: #e97171;
  background-image: linear-gradient(top, #d14545, #e97171);
} 

#login #submit:active {   
  outline: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;   
}

#login #submit::-moz-focus-inner {
  border: none;
}

#login label {
  float: right;
  line-height: 30px;
}

#login label input {
  position: relative;
  top: 2px;
  right: 2px;
}


div {
  margin:0 0 0.75em 0;
}


#panel_left_classes input[type="radio"] {
    display:none;
}
#panel_left_classes input[type="radio"] + label {
    margin-left: -4px;
    font-family:Arial, sans-serif;
    font-size:14px;
}
#panel_left_classes input[type="radio"] + label span {
    display:inline-block;
    width:34px;
    height:34px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
border-radius: 5px;
}

#panel_left_classes input[type="radio"] + label span {
}

#panel_left_classes input[type="radio"]:checked + label span{
     background-color: #4A7AFF;
}

#panel_left_classes input[type="radio"] + label span,
#panel_left_classes input[type="radio"]:checked + label span {
}

#picture_warning {
  display: none;
width: 220px;
position: absolute;
top: -35px;
left: -77px;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: red;
}

.swirl_preview_box {
position: absolute;
left: 250px;
width: 151px;
height: 105px;
background-image: url('../images/swirl_background.png');

    font-size: 12px;
color: white;
text-align: center;
top: 3px;
	position: relative;
	background: #212121;
	border: 1px solid #dedede;
padding: 5px;
border-radius: 6px;
}

.tooltipsy {
width: 89px;
    font-size: 12px;
color: white;
text-align: center;
top: 3px;
	position: relative;
	background: #212121;
	border: 1px solid #dedede;
padding: 5px;
border-radius: 6px;
}
.tooltipsy:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.tooltipsy:after {
	border-color: rgba(33, 33, 33, 0);
	border-top-color: #212121;
	border-width: 5px;
	margin-left: -5px;
}
.tooltipsy:before {
	border-color: rgba(245, 245, 245, 0);
	border-top-color: #dedede;
	border-width: 8px;
	margin-left: -8px;
}
#panel_left_rarity img {
  cursor: pointer;
}

#panel_left_rarity input[type="radio"] {
display: none;
position: absolute;
margin-left: 17px;
margin-top: 7px;
}

#panel_left_rarity input[type="radio"]:checked + label span {
    display:inline-block;
    width:27px;
    height:34px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
-moz-border-radius: 100px / 130px;
-webkit-border-radius: 100px / 130px;
border-radius: 100px / 130px;

}

#panel_left_rarity input[type="radio"]:checked + label span{
position: absolute;
margin-left: 10px;
margin-top: -3px;
     background-color: #4A7AFF;
}

.btn {
  display: inline-block;
  padding: 2px 9px 2px 2px;

  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.btn-gold {
  color: #333;
  background-color: #f0ad4e;
  border-color: #eea236;
  float: left;
 border: 1px solid #E3E3E3;
}

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
  float: right;
 border: 1px solid #eea236;
}

#bgadd {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 180px;
background-color: #1e1e1e;
color: white;
z-index: 60;
overflow: hidden;
border: 1px solid #DDDDDD; border-radius: 6px;padding: 5px; margin-top: 10px; text-align:center;
}



#banneradd {
position: absolute;
top: 100px;
left: 70px;
  display: none;
width: 547px;
height: 312px;
background-image: url('../images/banners/choose-faction_2.png');
z-index: 60;
}
#banners {
  position: absolute;
  top: 44px;
  left: 48px;
width: 455px;

}

#moretemplates {
  display: none;
position: absolute;
top: -5px;
left: 15px;
width: 870px;
height: 700px;
background-color: #1e1e1e;
color: white;
z-index: 60;
overflow: hidden;
border: 1px solid #DDDDDD; border-radius: 6px;padding: 5px; margin-top: 10px; text-align:center;
}

#balancehelper {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 910px;
height: 700px;
background-color: #1e1e1e;
color: white;
z-index: 60;
overflow: hidden;
border: 1px solid #DDDDDD; border-radius: 6px;padding: 5px; margin-top: 10px; text-align:center;
}

#background-choser {
display: none;
position: absolute;
top: 65px;
left: 0px;
width: 900px;
height: 540px;
background-color: #1e1e1e;
color: white;
z-index: 60;
overflow-x: hidden;
border: 1px solid #DDDDDD; border-radius: 6px;padding: 5px; margin-top: 10px; text-align:center;
margin: 0 auto;
text-align: center;
font-size: 16px;
font-family: "Belwe";
}

#balanceajax {
position: absolute;
top: 40px;
left: 15px;
width: 890px;
height: 650px;
overflow-x: hidden;
overflow-y: scroll;
}
#manaselector {

 z-index:5; position: absolute; width: 280px; text-align: center; left: 0px; top: 20px; font-size: 19px; color: #2a1801; font-family: "Belwe"; }

.manacrystal {
color: black;
  text-shadow:
   -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;
width:26px;height:26px; background-image:url(../images/mana.png);background-repeat:no-repeat;background-size:26px 26px;
float: left;
}

#cover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none; }


.addbgButton {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  padding: 4px 4px 4px 4px;
  border: solid #1f628d 2px;
  text-decoration: none;
}

.addbgButton:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}



.import-button {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  padding: 4px 15px 4px 15px;
  border: solid #1f628d 2px;
  text-decoration: none;
}

.import-button:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
#hcratingpanel {
position: absolute;
top: 434px;
left: 54px;
width: 200px;
height: 44px;
    background-image: url('../images/hcRatingPanel.png');
}

.ratings_stars {

    float:      left;
    height:     22px;
    padding:    2px;
    width:      21px;

}
.ratings_vote {
    background: url('../images/star.png') no-repeat;
}
.ratings_over {
    background: url('../images/star.png') no-repeat;
}
.rate_widget {
  position: absolute; top: 13px; left: 44px;  
}
.star_1 { position: absolute; top: 13px; left: 44px; }
.star_2 { position: absolute; top: 13px; left: 67px; }
.star_3 { position: absolute; top: 13px; left: 91px; }
.star_4 { position: absolute; top: 13px; left: 114px; }
.star_5 { position: absolute; top: 13px; left: 137px; }

#bottomPanel {
position: absolute;
width: 910px;
height: 55px;
left: 0px;
top: 610px;
}
.rotate {
    transform: rotate(360deg);
    transition: .3s;
}
.rotate2 {
    transform: rotate(0deg);
    transition: .3s;
}
.banner {
  position: absolute;
  width: 183px;
  height: 392px;
      -ms-transform: scale(0.5, 0.5); /* IE 9 */
    -webkit-transform: scale(0.5, 0.5); /* Safari */
    transform: scale(0.51, 0.51);
    top: -100px;
    left: 290px;
}
#class1 {
  float: left;
  width: 61px;
  height: 392px;
  background-image: url("http://hearthcards.net/cards_template/on_card_custombanner_mage.png");

}
#class2 {
  background-position: -61px 0px; 
float: left;
  width: 61px;
  height: 392px;
  background-image: url("http://hearthcards.net/cards_template/on_card_custombanner_mage.png");
}
#class3 {
float: right;
  width: 61px;
  height: 392px;
  background-image: url("http://hearthcards.net/cards_template/on_card_custombanner_mage.png");
    background-position: -122px 0px; 
}
#emblem {
  position: absolute;
  width: 183px;
  height: 392px;
  background-image: url("http://hearthcards.net/cards_template/on_card_custombanneremblem_none.png");
}
#more_card_icon {
background:url(../images/more_cards_icon.png);
width: 76px;
height: 73px;
position: absolute;
z-index: 5;
top: 90px;
left: 230px;
color: #ffffff;
font-size: 45px;
font-family: 'Belwe';
text-align: center;
line-height: 52px;
display: none;
  text-shadow:
   -2px -2px 0 #000,  
    2px -2px 0 #000,
    -2px 2px 0 #000,
     2px 2px 0 #000; cursor: pointer;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}