/*

RESETS

*/

html, body,
html body 
{
    background-color: transparent !important;
    color: #EEE;
}

html body img.img-block
{
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    height: auto;
}

html body .contained
{
    display: block;
    position: relative;
    padding: 0 10rem;
}

/*

LAYOUT

*/

html body section.content
{
    display: inline-block;
    vertical-align: top;
    position: relative;
    box-sizing: border-box;
    width: calc(100% - 455px);
    height: 100%;
    margin: 0;
    padding: 15px;
}
html body section.sidebar
{
    display: inline-block;
    vertical-align: top;
    position: relative;
    box-sizing: border-box;
    width: 450px;
    height: 100%;
    margin: 0;
    padding: 15px 30px 15px 15px;
}
html body section.content .details
{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
html body section.content .details .text
{
    display: block;
    position: absolute;
    overflow: hidden;
    color: #EEE;
}
html body section.content .details .text.small
{
    color: #DDD;
}
html body section.content .note .details .text.small
{
    color: #757575;
}
html body section.content .details .text.big
{
    color: #FFF;
}
html body section.content .details .text.big.green,
html body section.content .details .text.small.green
{
    color: #00f6b1;
}
html body section.content .details .name,
html body section.content .details .cost,
html body section.content .details .combat,
html body section.content .details .move,
html body section.content .details .capacity,
html body section.content .details .abilityt,
html body section.content .details .ability,
html body section.content .details .abilityt2,
html body section.content .details .ability2,
html body section.content .details .abilityt3,
html body section.content .details .ability3,
html body section.content .details .meta .icon,
html body section.content .details .meta .quote,
html body section.content .details .meta .quoter,
html body .details .system .resources,
html body .details .system .influence,
html body .details .flagship .icon
{
    display: inline-block;
    position: absolute;
    box-sizing: border-box;
    background-color: transparent;
    border: 1px solid transparent;
}

/*

FACTION BACK

*/

html body section.content .faction.back .details
{
    height: 65%;
    border: 1px solid transparent;
}

html body .faction.back .rectangle
{
    display: table;
    position: absolute;
    box-sizing: border-box;
    background: transparent;
    width: calc(calc(100% - 30px) / 4.35);
    height: calc(calc(100% - 30px) / 4.5);
    border: 1px solid transparent;
}
html body .faction.back .rectangle.title
{
    text-align: center;
    height: 4%;
    top: calc(15px + 2.4%);
    left: calc(15px + 49%);
    width: calc(calc(100% - 30px) / 2.9);
}
html body .faction.back .rectangle.race
{
    height: calc(calc(100% - 30px) / 2.5);
}
html body .details .flagship
{
    top: calc(15px + 2.4%);
    left: calc(15px + 1%);
}
html body .details .system
{
    top: calc(15px + 2.4%);
    left: calc(15px + 25%);
}
html body .details .race
{
    top: calc(15px + 9%);
    left: calc(15px + 49%);
    width: calc(calc(100% - 30px) / 4.3) !important;
}
html body .details .meta,
html body .details .abilities,
html body .details .commodities
{
    top: 15px;
    left: calc(15px + 74%);
    width: calc(calc(100% - 30px) / 5) !important;
}
html body .faction.back .details .abilities
{
    width: calc(calc(100% - 30px) / 5) !important;
    top: calc(15px + 25%);
    right: calc(15px + 3%) !important;
    left: auto !important;
    height: calc(calc(100% - 30px) / 3.5);
}
html body .faction.back .details .commodities
{
    width: calc(calc(100% - 30px) / 15) !important;
    bottom: calc(15px + 25%);
    top: auto;
    left: auto;
    right: calc(15px + 4%);
    height: calc(calc(100% - 30px) / 12);
    text-align: center;
}
html body .details .flagship .abilityt,
html body .details .flagship .ability,
html body .details .flagship .name
{
    top: 2%;
    left: 14%;
    width: 75%;
    height: 10%;
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
}
html body .details .flagship .abilityt,
html body .details .flagship .ability
{
    height: 8%;
}
html body .details .flagship .abilityt,
html body .details .flagship .ability
{
    left: 8%;
}
html body .details .flagship .abilityt
{
    top: 31%;
}
html body .details .flagship .ability
{
    top: 40%;
    height: 12%;
}
html body .details .flagship .cost,
html body .details .flagship .combat,
html body .details .flagship .move,
html body .details .flagship .capacity
{
    bottom: 13.5%;
    left: 6%;
    height: 20%;
    width: 21%;
    text-align: center;
    line-height: 100%;
}
html body .details .flagship .combat
{
    left: 28.5%;
}
html body .details .flagship .move
{
    left: 50.5%;
}
html body .details .flagship .capacity
{
    left: 72.5%;
}
html body .details .flagship .icon
{
    top: 0.6%;
    left: 0.6%;
    width: 14%;
    height: 21%;
}
html body .details .system .resources,
html body .details .system .influence
{
    bottom: 0%;
    left: 2%;
    height: 25%;
    width: 28%;
    text-align: center;
    line-height: 100%;
    display: block;
    position: absolute;
}
html body .details .system .resources .text,
html body .details .system .influence .text
{
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 75%;
}
html body .details .system .resources .title,
html body .details .system .resources .text,
html body .details .system .influence .title,
html body .details .system .influence .text
{
    display: block;
    position: absolute;
    width: 100%;
    height: 30%;
    top: 0;
}
html body .details .system .resources .text.big,
html body .details .system .influence .text.big
{
    top: 50%;
    height: 45%;
}
html body .details .system .influence
{
    left: 70%;
}
html body .details .meta .icon
{
    top: 0.6%;
    right: 0.6%;
    width: 33%;
    height: 50%;
}
html body .details .meta .quote,
html body .details .meta .quoter
{
    height: 28%;
    width: 100%;
    text-align: center;
}
html body .details .meta .quoter
{
    height: 10%;
}
html body .details .meta .quote
{
    top: 55%;
}
html body .details .meta .quoter
{
    top: 85%;
}
html body .details .abilities .abilityt,
html body .details .abilities .ability,
html body .details .abilities .abilityt2,
html body .details .abilities .ability2,
html body .details .abilities .abilityt3,
html body .details .abilities .ability3,
html body .details .abilities .name
{
    top: 0.6%;
    left: 14%;
    width: 88%;
    height: 14%;
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
}
html body .details .abilities .abilityt,
html body .details .abilities .ability,
html body .details .abilities .abilityt2,
html body .details .abilities .ability2,
html body .details .abilities .abilityt3,
html body .details .abilities .ability3
{
    left: 6%;
}
html body .details .abilities .abilityt,
html body .details .abilities .abilityt2,
html body .details .abilities .abilityt3
{
    top: 0%;
    height: 8%;
}
html body .details .abilities .ability,
html body .details .abilities .ability2,
html body .details .abilities .ability3
{
    top: 10%;
    height: 18%;
}
html body .details .abilities .abilityt2
{
    top: 35%;
}
html body .details .abilities .ability2
{
    top: 45%;
}
html body .details .abilities .abilityt3
{
    top: 70%;
}
html body .details .abilities .ability3
{
    top: 80%;
}

/*

LEADERS

*/

html body section.content .leaders .details
{
    top: 67%;
    height: 15%;
    width: 75%;
    border: 1px solid transparent;
}
html body .leaders .rectangle
{
    display: table;
    position: absolute;
    box-sizing: border-box;
    background: transparent;
    left: calc(calc(100% - 30px) / 90);
    width: calc(calc(100% - 30px) / 3.1);
    height: calc(calc(100% - 30px) / 0.85);
    border: 1px solid transparent;
}
html body .leaders .commander .rectangle
{
    left: calc(calc(100% - 30px) / 2.82);
}
html body .leaders .hero .rectangle
{
    left: auto;
    right: calc(calc(100% - 30px) / 90);
}

/*

TECH

*/

html body section.content .tech .details
{
    top: 84%;
    height: 15%;
    width: 75%;
    border: 1px solid transparent;
}
html body .tech .rectangle
{
    display: table;
    position: absolute;
    box-sizing: border-box;
    background: transparent;
    left: calc(calc(100% - 30px) / 90);
    width: calc(calc(100% - 30px) / 3.1);
    height: calc(calc(100% - 30px) / 0.85);
    border: 1px solid transparent;
}
html body .tech .tech2 .rectangle
{
    left: calc(calc(100% - 30px) / 2.82);
}
html body .tech .mech .rectangle
{
    left: auto;
    right: calc(calc(100% - 30px) / 90);
}

html body .tech .rectangle .icon,
html body .tech .rectangle .title,
html body .tech .rectangle .byline,
html body .tech .rectangle .reqs,
html body .tech .rectangle .content,
html body .leaders .rectangle .icon,
html body .leaders .rectangle .title,
html body .leaders .rectangle .byline,
html body .leaders .rectangle .avatar,
html body .leaders .rectangle .content,
html body .note .rectangle .content,
html body .note .rectangle .icon,
html body .note .rectangle .title
{
    display: inline-block;
    position: absolute;
    left: 0;
    height: 18%;
    width: 18%;
    border: 1px solid transparent;
}
html body .tech .rectangle .icon,
html body .leaders .rectangle .icon,
html body .note .rectangle .icon
{
    top: 5%;
    width: 14%;
    height: 18%;
    left: 2%;
}
html body .tech .rectangle .title,
html body .leaders .rectangle .title,
html body .note .rectangle .title
{
    left: 18%;
    height: 10%;
    top: 4%;
    width: 75%;
}
html body .tech .rectangle .byline,
html body .leaders .rectangle .byline
{
    left: 18%;
    top: 17%;
    height: 8%;
    width: 50%;
}
html body .leaders .rectangle .avatar
{
    top: 48%;
    width: 28%;
    height: 36%;
    left: 6%;
    border-radius: 100%;
}
html body .leaders .rectangle .content
{
    top: 34%;
    width: 47%;
    height: 55%;
    left: 45%;
}
html body .tech .rectangle .content
{
    top: 34%;
    width: 73%;
    height: 55%;
    left: 18%;
}
html body .tech .mech .rectangle .content
{
    top: 30%;
    width: 83%;
    height: 20%;
    left: 8%;
}
html body .tech .rectangle .reqs
{
    top: 53%;
    width: 10%;
    height: 14%;
    left: 2%;
}
html body .tech .rectangle .reqs.req2
{
    top: 68%;
}
html body .tech .rectangle .reqs.req3
{
    top: 83%;
}


/*

NOTE

*/

html body section.content .note .details
{
    top: 67%;
    height: 29.5%;
    width: 25%;
    right: 0;
    left: auto;
    border: 1px solid transparent;
}
html body .note .rectangle
{
    display: table;
    position: absolute;
    box-sizing: border-box;
    background: transparent;
    left: calc(calc(100% - 30px) / 15);
    width: calc(calc(100% - 30px) / 1);
    height: calc(calc(100% - 30px) / 0.85);
    border: 1px solid transparent;
}
html body .note .rectangle .icon
{
    top: auto;
    bottom: 3%;
    right: 6%;
    left: auto;
    width: 22%;
    height: 14%;
}
html body .note .rectangle .title
{
    left: 8%;
    height: 10%;
    top: 4%;
    width: 84%;
}
html body .note .rectangle .content
{
    left: 10%;
    height: 50%;
    top: 24%;
    width: 80%;
}

/*

IMAGES

*/

html body .faction.back .rectangle.system
{
    background-image: url(../img/placeholder-planet-white.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.69;
}
html body .faction.back .rectangle.race
{
    background-image: url(../img/placeholder-race-white.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.44;
}
html body .details .icon
{
    background-image: url(../img/placeholder-icon.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/*

RE-RESETS

*/

html body section.content .details .text.small span
{
    font-size: 1rem;
    text-transform: none;
    font-weight: normal;
    line-height: 100%;
}
html body section.content .details .text.big span
{
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 100%;
}
html body section.content .details .text span
{
    top: 0;
    display: block;
    position: absolute;
    width: 100%;
    margin: auto;
}

html body .note .rectangle,
html body .tech .rectangle,
html body .leaders .rectangle,
html body .faction.back .rectangle,
html body section.content .details .name,
html body section.content .details .cost,
html body section.content .details .combat,
html body section.content .details .move,
html body section.content .details .capacity,
html body section.content .details .resources,
html body section.content .details .influence,
html body section.content .details .abilityt,
html body section.content .details .ability,
html body section.content .details .abilityt2,
html body section.content .details .ability2,
html body section.content .details .abilityt3,
html body section.content .details .ability3,
html body section.content .details .meta .icon,
html body section.content .details .meta .quote,
html body section.content .details .meta .quoter,
html body section.content .details .flagship .icon,
html body section.content .faction.back .details,
html body section.content .leaders .details,
html body section.content .tech .details,
html body .tech .rectangle .icon,
html body .tech .rectangle .title,
html body .tech .rectangle .byline,
html body .tech .rectangle .reqs,
html body .tech .rectangle .content,
html body .leaders .rectangle .icon,
html body .leaders .rectangle .title,
html body .leaders .rectangle .byline,
html body .leaders .rectangle .avatar,
html body .leaders .rectangle .content,
html body .note .rectangle .content,
html body .note .rectangle .icon,
html body .note .rectangle .title
{
    border-color: red;
    border-color: transparent;
}