formation.css

.hover {
    cursor:hand;
    cursor:pointer;
}

.clear {
    clear:both !important;
}

.xhidden {
    display: none;
}

.panel {
    float:left;
    margin:2px 2px;
}

.formation .grid {
    width:165px;
    height:165px;
}

.grid_container {
    border-top-style: solid;
    border-top-color: White;
}

.grid_container .equipment_penel {
    width: 100%;
    height:100%;
}

.char {
    width: 100%;
    height:100%;
    position: relative;
}

.char .img img {
    max-width:100px;
    max-height:150px;
    height: auto;
    width:auto;
}

.char .aura_container {
    position: absolute;
    z-index: 10;
    bottom: 0;
    right: 0;
}

.char .control_container {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
}

.char .friendship {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
}

.char .friendship img {
    max-width:30px;
    max-height:30px;
}

.calculate_control .control_input {
    width:70px;
    height:20px;
    line-height:18px;
    float:left;
    margin:10px 0px;
}

.calculate_control .control_input input {
    width:50px;
    height:20px;
    line-height:18px;
    font-size:12px;
    padding:0px;
    text-align:center;
}

.calculate_control .control_input.walkTime {
    width:170px;
}

.battle_control .control_input {
    width:70px;
    height:20px;
    line-height:18px;
    float:left;
}

.battle_control .control_input input {
    width:50px;
    height:20px;
    line-height:18px;
    font-size:12px;
    padding:0px;
    text-align:center;
}

.battle_control .battleFortress_container {
    width:150px;
    height:20px;
    line-height:18px;
    float:left;
}

.aura {
    width:10px;
    height:10px;
}

.char_performance {
    width:175px;
    height:380px;
    float:left;
    margin:5px 3px 0px 0px;
    border-radius:8px;
    padding:3px 5px;
    background:#f0f5ff;
}

.char_performance .title {
    height:20px;
    width:80px;
    margin:0px 0px 5px 0px;
    text-align:center;
    font-weight:bold;
    color:#33a;
    float:left;
}

.char_performance .value {
    height:20px;
    width:80px;
    margin:0px 0px 5px 0px;
    text-align:center;
    font-weight:bold;
    float:left;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.performance_header {
    width:175px;
    height:30px;
    float:left;
    margin:0px 3px 0px 0px;
    border-radius:8px;
    padding:3px 5px;
    background:#f0f5ff;
}

.performance_header .title {
    width:80px;
    height:30px;
    line-height:30px;
    margin:0px 0px 5px 0px;
    text-align:center;
    font-weight:bold;
    color:#33a;
    float:left;
}

.performance_header .value {
    width:80px;
    height:30px;
    line-height:30px;
    margin:0px 0px 5px 0px;
    text-align:center;
    font-weight:bold;
    float:left;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.add_button {
    width:100px;
    height:80px;
    line-height:28px;
    margin: auto;
    border-radius:10px;
    text-align:center;
    background:#cde;
    border:1px outset #ace;
}

.button {
    width:100px;
    height:30px;
    line-height:28px;
    margin:10px 0px;
    border-radius:10px;
    text-align:center;
    background:#cde;
    border:1px outset #ace;
}

.pick_button {
    width:100px;
    height:30px;
    line-height:28px;
    margin:0px 0px;
    border-radius:10px;
    text-align:center;
    background:#cde;
    border:1px outset #ace;
}

.view_equipment_button {
    display: inline-block;
    width:110px;
    height:30px;
    border-radius:10px;
    background:#cde;
    border:1px outset #ace;
    text-align:center;
    line-height:28px;
    margin:5px 0px;
}

.skill_all_button {
    display: inline-block;
    width:110px;
    height:30px;
    border-radius:10px;
    background:#cde;
    border:1px outset #ace;
    text-align:center;
    line-height:28px;
    margin:5px 0px;
}

.calculate {
    width:150px;
    float:left;
}

.simulation {
    width:150px;
    float:left;
}

.dmgLinkSwitch {
    width:150px;
    float:left;
}

.button.equipment {
    width:100px;
    height:30px;
    line-height:28px;
    margin:10px 0px;
    border-radius:10px;
    text-align:center;
    background:#cde;
    border:1px outset #ace;
    float:left;
}

.pick_button.rarity_extra {
    background:#DFB6FF;
}

.pick_button.rarity_5 {
    background:#FFB400;
}

.pick_button.rarity_4 {
    background:#D2E05C;
}

.pick_button.rarity_3 {
    background:#6FDDCB;
}

.pick_button.rarity_2 {
    background:#BEDEC7;
}

.pick_button.battle {
    background:#FF6A38;
}

.pick_button.strategy {
    background:#7794D8;
}

.button.battle {
    background:#FF6A38;
}

.button.strategy {
    background:#7794D8;
}

.pick_button.extra {
    box-shadow:15px 0px 0px 0px #DFB6FF inset;
}

.button.extra {
    box-shadow:15px 0px 0px 0px #DFB6FF inset;
}

.update_log {
    width:200px;
}

#updateDialog .text {
    height: 200px;
    overflow-y: scroll;
}

.factory {
    display: none;
}

.ui-state-hover {
    background:lightyellow;
}
.ui-state-active {
    background:lightgray;
}

.fairy_container .item {
    float:left;
    margin:10px 0px;
}

.fairy_container .item.control {
    margin:10px 10px;
}

.fairy_performance {
    width:650px;
    height:30px;
    float:left;
    margin:5px 3px 0px 0px;
    border-radius:8px;
    padding:3px 5px;
    background:#f0f5ff;
}

.fairy_performance .title {
    width:50px;
    height:30px;
    line-height:30px;
    margin:0px 0px 5px 0px;
    text-align:center;
    font-weight:bold;
    color:#33a;
    float:left;
}

.fairy_performance .value {
    width:50px;
    height:30px;
    line-height:30px;
    margin:0px 0px 5px 0px;
    text-align:center;
    font-weight:bold;
    float:left;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.fairy_performance .title.head {
    width:100px;
}

.picker_table {
    border-spacing: 0px;
}

.aura_table {
    border: 1px solid black;
    border-collapse:collapse;
}

.aura_table td {
    border: 1px solid black;
}

a img {
    max-width:25px;
    max-height:25px;
}