/* Initial resets - From W3Schools */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Subset extract from normalize.css by Nicolas Gallagher and Jonathan Neal, http://nicolasgallagher.com/about-normalize-css/ */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
footer,header,main,menu,nav{display:block}
a{background-color:transparent}a:active,a:hover{outline-width:0}
b,strong{font-weight:bolder}small{font-size:80%}img{border-style:none}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */

/* Generic */
html,body{font-family:Arial,Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
div { margin: 0, padding: 0}
h1,h2,h3,p {margin: 0.5rem 0rem}
a {text-decoration: none}
[type=checkbox],[type=radio]{vertical-align:text-top}
img {vertical-align: middle}

.hidden, .show-small-inline, .show-small-block{display:none}
@media (max-width:700px){ /* TODO */
    .hide-small{display:none!important}
    .show-small-inline{display:inline!important}
    .show-small-block{display:block!important}
}

/* Navigation */
div.navbar {
    padding: 0.5rem;
    background: url('/static/banner-image.png') no-repeat right bottom, repeating-linear-gradient(#e78661, #f7cd8b);
    box-shadow: 0px 1px 5px
}
div.navbar h1 { display: inline-block; padding-right: 2rem}
div#vertical-nav {
    overflow:hidden;
    background-color: #333;
    padding: 0;
    max-height: 0;
}
div#vertical-nav.vertical-expanded {
    max-height: 1000px;
    transition: max-height 1.5s;
}
div#vertical-nav ul { padding: 0.5rem; margin: 0; list-style: none }
div#vertical-nav li a{color: #ccc}
div.navbar h1 {margin: 0}
div.navbar h1 a,div.navbar a{color: #000}
div#vertical-nav li a:hover {color: #666}
div.navbar h1 a:hover, div.navbar h1 span:hover{color: #f9db9b; text-shadow: 0px 1px #000}
div.navbar a:hover{color: #f9db9b;}

/* Grid */
.grid-container {
    min-width: 15rem;
    display: grid;
    grid-template-columns: 20rem auto;
    justify-content: start;
}
.menu_content {
    margin: 0rem 0.5rem 1rem;
    padding: 0.5rem;
    border: 1px solid #999;
    border-radius: 10px;
    box-shadow: 0px 2px 3px;
    background-color: antiquewhite;
}
#main_content {
    margin: 0rem 0.5rem;
    padding: 0.5rem;
}

.grid-col-2 {grid-column: span 2}
.grid-col-3 {grid-column: span 3}

#title {
    margin: 0rem 0.5rem;
}

/* Card Listing - Flex */
#card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}

/* Card Layout */
.card {
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
    border: 2px solid #666;
    border-radius: 10px;

    display: grid;
    grid-template-columns: 3rem 1fr auto;
    grid-template-rows: auto auto auto auto 1fr;
    width: 16.5rem;
    align-content:start
}
.card-cost {
    padding: 0.5rem;
    padding-bottom: 0rem;
    text-align: center;
    font-size: 1.5rem;
    line-height: normal;
}
.card-name {
    padding: 0.5rem;
    padding-bottom: 0rem;
}
.card-allegiance,.card-talent-req {
    padding: 0.5rem;
    padding-bottom: 0rem;
    text-align: right;
}

.card-talent,.card-command,.card-resistance {
    font-size: 85%;
    padding: 0.2rem;
}
.card-command { align-self: end}
.card-resistance {
    text-align: right;
    align-self: end;
}

.card-deck {text-align: center}
.card-pic {text-align: right; overflow-x:hidden}
.card-subtype {font-size: 85%; padding: 0.3rem 0.5rem}
.card-text{ padding: 0rem 0.5rem}

/* Deck Content */
.card-in-deck {
    padding: 0 0.3rem;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-in-deck span{padding: 0rem 0.2rem}
.card-in-deck img{
    vertical-align: middle;
    height: 2.75rem;
}
.card-pagination{
    padding-bottom: 0.5rem;
}

/* Special look for mobile */
@media (max-width:800px){
    .grid-container {grid-template-columns: auto;}
    #card-list{justify-content: center}
    div#house-list.vertical-expanded,div#imp-list.vertical-expanded {
        max-height: 15rem!important;
        transition: max-height 0.5s!important;
    }
}