.auctionHeader {
    width: 100%;
    height: 32px;
    background: url(/static/images/border_top_header.png);
    border-left: solid 1px #000;
    border-right: solid 1px #000;
}

.auctionHeader_title {
    float: left;
    margin-left: 12px;
    margin-top: 10px;
    color: #fff;
    font-size: 16px;
}

.auctionCharacters_list {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 25px;
}

.auctionCharacters_row {
    width: 100%;
    margin-top: 30px;
}

.auctionCharacters_row:first-child {
    margin-top: 0;
}

.auctionCharacter {
    width: calc((100% - 20px) / 3);
    margin-left: 10px;
    position: relative;
    float: left;
}

.auctionCharacter:first-child {
    margin-left: 0;
}

.auctionCharacter_top {
    width: 100%;
    height: 6px;
    border: solid 1px #000;
    border-bottom: 0;
    background-color: #131313;
}

.auctionCharacter::before {
    height: calc(100% - 70px);
    width: 24px;
    content: "";
    position: absolute;
    display: block;
    top: 54px;
    left: 0;
    background-image: url(/static/images/border_left.png);
    background-repeat: repeat-y;
    z-index: 2;
}

.auctionCharacter::after {
    height: calc(100% - 70px);
    width: 24px;
    content: "";
    position: absolute;
    display: block;
    top: 54px;
    right: 0;
    background-image: url(/static/images/border_right.png);
    background-repeat: repeat-y;
    background-position: right top;
    z-index: 2;
}

.auctionCharacter_cornerBL {
    width: 20px;
    height: 20px;
    background: url(/static/images/border_bl.png);
    position: absolute;
    bottom: -4px;
    left: -4px;
    z-index: 3;
}

.auctionCharacter_cornerBR {
    width: 20px;
    height: 20px;
    background: url(/static/images/border_br.png);
    position: absolute;
    bottom: -4px;
    right: -4px;
    z-index: 3;
}

.auctionCharacter_bottom {
    background: url(/static/images/border_bottom.png) repeat-x center bottom;
    width: calc(100% - 24px);
    height: 7px;
    margin-top: -1px;
    margin-left: 12px;
}

.auctionCharacter_inner {
    width: 100%;
}

.auctionCharacter_header {
    width: calc(100% - 18px);
    height: 64px;
    padding: 8px;
    box-sizing: content-box;
    background-color: #131313;
    border-left: solid 1px #000;
    border-right: solid 1px #000;
}

.auctionCharacter_image {
    width: 64px;
    height: 64px;
    float: left;
}

.auctionCharacter_header_main {
    width: calc(100% - 74px);
    height: 64px;
    margin-left: 10px;
    margin-top: 18px;
    float: left;
}

.auctionCharacter_name {
    width: 100%;
    height: 18px;
    color: #fff;
    font-size: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.auctionCharacter_desc {
    width: 100%;
    height: 18px;
    color: #999;
    font-size: 14px;
}

.auctionCharacter_main {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.025);
    border-top: solid 1px #000;
    padding: 13px 20px 8px 20px;
}

.auctionCharacter_eq {
    width: 110px;
    height: 148px;
    position: relative;
    float: left;
}

.auctionCharacter_eqSlot {
    width: 34px;
    height: 34px;
    position: absolute;
    background-size: 34px 34px;
}

.auctionCharacter_eqSlot_item {
    width: 32px;
    height: 32px;
    margin: 1px;
}

.eqSlot_blank {
    background: url(/static/images/slots/blank.png) !important;
}

.eqSlot_neck {
    left: 0;
    top: 0;
    background: url(/static/images/slots/neck.png);
}

.eqSlot_head {
    left: 38px;
    top: 0;
    background: url(/static/images/slots/head.png);
}

.eqSlot_backpack {
    left: 76px;
    top: 0;
    background: url(/static/images/slots/backpack.png);
}

.eqSlot_leftHand {
    left: 0;
    top: 38px;
    background: url(/static/images/slots/left-hand.png);
}

.eqSlot_armor {
    left: 38px;
    top: 38px;
    background: url(/static/images/slots/body.png);
}

.eqSlot_rightHand {
    left: 76px;
    top: 38px;
    background: url(/static/images/slots/right-hand.png);
}

.eqSlot_ring {
    left: 0;
    top: 76px;
    background: url(/static/images/slots/ring.png);
}

.eqSlot_legs {
    left: 38px;
    top: 76px;
    background: url(/static/images/slots/legs.png);
}

.eqSlot_ammo {
    left: 76px;
    top: 76px;
    background: url(/static/images/slots/ammo.png);
}

.eqSlot_feet {
    left: 38px;
    top: 114px;
    background: url(/static/images/slots/feet.png);
}

.auctionCharacter_skills {
    width: calc(100% - 120px);
    margin-left: 10px;
    float: left;
}

.auctionCharacter_skill {
    width: 50%;
    height: 38px;
    position: relative;
    float: left;
}

.auctionCharacter_skill_img {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    background-size: 20px 20px;
    opacity: 0.7;
}

.auctionCharacter_skill_value {
    left: 50%;
    top: 14px;
    padding: 2px;
    position: absolute;
    transform: translateX(-50%);
    font-size: 18px;
    color: #bbb;
}

.auctionCharacter_stat {
    width: 50%;
    float: left;
}

.auctionCharacter_stats {
    width: 100%;
    padding: 13px 20px 17px 20px;
    border-top: solid 1px rgba(0, 0, 0, 0.5);
}

.auctionCharacter_stats_header {
    width: 100%;
    color: #888;
    font-size: 13px;
    text-align: center;
}

.auctionCharacter_stats_value {
    width: 100%;
    color: #ccc;
    font-size: 18px;
    text-align: center;
}

.auctionCharacter_view {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -12px;
}

.auctionCharacter_viewButton {
    width: calc(100% - 64px);
    margin-left: 32px;
    padding: 5px 0 4px 0;
    background-color: #223422;
    border: solid 1px rgba(0, 0, 0, 1);
    border-bottom-width: 2px;
    color: #bbb;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

.auctionCharacter_viewButton:hover {
    background-color: #223c22;
}

.auctionCharacters_none {
    width: 100%;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.03);
    border: solid 1px rgba(0, 0, 0, 0.7);
    box-shadow: 2px 2px 5px #0a0a0a;
    text-align: center;
    color: #aaa;
    font-size: 18px;
}

.auctionSeparator {
    width: 100%;
    height: 6px;
    border: solid 1px rgba(0, 0, 0, 0.5);
    border-top: 0;
    border-radius: 3px;
}

.auctionOptions {
    width: 100%;
    margin-top: 20px;
}

#auctionCreate {
    width: 100%;
    margin-bottom: 25px;
}

.auction_button {
    padding: 9px 8px 4px 8px;
    background-color: #402222;
    border: solid 1px rgba(0, 0, 0, 1);
    border-bottom-width: 2px;
    color: #bbb;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    float: left;
}

.auction_button:active {
    border-top-width: 2px;
    border-bottom-width: 1px;
}

.redButton {
    background-color: #402222;
}

.redButton:hover {
    background-color: #492222;
}

.greenButton {
    background-color: #223422;
}

.greenButton:hover {
    background-color: #223c22;
}

.greyButton {
    background-color: rgba(255, 255, 255, 0.05);
}

.greyButton:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.auction_input {
    background: #111;
    border: solid 1px rgba(0, 0, 0, 0.6);
    position: relative;
    font-size: 12px;
}

.auction_input input[type="text"], .auction_input input[type="password"] {
    width: calc(100% - 20px);
    height: 16px;
    margin-left: 10px;
    margin-top: 8px;
    background: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

.auction_input select {
    width: calc(100% - 20px);
    height: 16px;
    padding: 7px;
    box-sizing: content-box;
    background: 0;
    border: 0;
    outline: 0;
    box-shadow: none;
}

.auction_inputOption {
    background-color: #111;
    color: #fff;
}

.auction_inputOption:checked {
    background-color: #131313;
    color: #fff;
}

.auction_input input[type="text"]::placeholder, .auction_input input[type="password"]::placeholder {
    text-align: center;
    color: #666;
}

.auctionContainer {
    width: 100%;
    padding: 20px;
    margin-top: 10px;
    background-color: rgba(255, 255, 255, 0.03);
    border: solid 1px rgba(0, 0, 0, 0.7);
    box-shadow: 2px 2px 5px #0a0a0a;
    color: #aaa;
    font-size: 16px;
}

.auctionContainer p {
    margin: 0;
}

.auctionContainer ul {
    padding-left: 20px;
    list-style: none;
}

.auctionContainer ul li::before {
    content: "\2022";
    width: 10px;
    margin-left: -10px;
    color: #fff;
    font-weight: bold;
    display: inline-block;
}

.auctionCreate_desc {
    width: 100%;
}

#auctionCreate_selectOptions {
    width: 100%;
    margin-top: 20px;
}

.auctionCreate_select {
    width: 250px;
    margin-right: 10px;
    float: left;
}

#auctionCreate_selectCharacterButton {
    margin-right: 10px;
}

#auctionCreate_selectCharacterStatus {
    height: 24px;
    margin-top: 4px;
    float: left;
    display: none;
}

#auctionCreate_selectCharacterStatusLoading {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    background: url(/static/images/loading.gif);
    background-size: 24px 24px;
    float: left;
    display: none;
}

#auctionCreate_selectCharacterStatusText {
    height: 14px;
    margin-top: 5px;
    color: #fff;
    font-size: 16px;
    float: left;
}

#auctionCreate_options {
    width: 100%;
    display: none;
}

.auction_input {
    background: #111;
    border: solid 1px rgba(0, 0, 0, 0.6);
    position: relative;
    font-size: 12px;
}

.auction_input input[type="number"], .auction_input input[type="password"] {
    width: calc(100% - 20px);
    height: 16px;
    padding: 7px;
    box-sizing: content-box;
    background: 0;
    border: 0;
    outline: 0;
    box-shadow: none;
}

#auctionCreate_finalise {
    width: 100%;
    display: none;
}
