@charset "utf-8";
@import "ba_unit_pages_styling.css";

/*
    Author: JMP
    File Name: ba_unit_pages_layout.css
*/

/* HTML & Body Layout */

body {
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    width: 85%;
    margin: auto;
}

/* Navigation Layout */


nav#landing_pages ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    margin: auto;
}

nav#landing_pages ul li {
    padding-top: 12px;
    padding-left: 15px;
    flex: 1 1 150px;
    -webkit-flex: 1 1 150px;
}

nav#strike_force_pages ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
} 

li {
    text-align: center;
}

/* Div Layout */

article {
    -webkit-flex: 3 1 650px;
    flex: 3 1 650px;
    margin-top: 50px;
}

div.units {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

div.units, div.units figure, div.units > p, div.stats {
    flex: 1 0 250px;
}

div.units > p {
    display: block;
    height: 385px;
    overflow: auto;
    padding-right: 15px;
    padding-top: 15px;
    padding-left: 2.5px;  
    margin-bottom: 15px;
}

div.stats {
    margin: 0 15px 40px 15px;
    border-radius: 15px;
}

/* Image Layout */

figure.strike_force_banner img#banner {
    display: block;
    margin: auto;
}

figure.strike_force_banner {
    width: 100%;
    overflow: hidden;
}

figure.strike_force_banner figcaption {
    text-align: center;
    padding-top: 15px;
    height: auto;
    margin-bottom: 25px;
    margin-top: 25px;
}

article> div.units figure figcaption {
    text-align: center;
    padding-top: 10px;
    padding-bottom:15px;
}

/* Media Queries */

@media only screen and (max-width: 700px) {

    body {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
    }

    figure.strike_force_banner {
        flex: 1 1 480px;
    }

    div#landing_pages, div#strike_force_pages, figure.strike_force_banner > figcaption, figure.strike_force_banner > img#banner {
        display: none;
    }

    figure.strike_force_banner > img#marine {
        display: block;
        width: 100%;
        height: auto;
    }

    div.units {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: column wrap;
        flex-flow: column wrap; 
    }

    div.units > img, div.units > p, div.units > div.stats {
        flex: 1 1 150px;
    }
    
    div.units figure img, div.units div.stats, div.units p {
        display: block;
        margin: auto;
    }
}

@media only screen and (min-width: 701px) {

    figure.strike_force_banner > img#marine {
        display: none;
    }

    div.buttons{
        display: relative;
    }
}

@media only screen and (max-width: 1200px) {
    
    div#strike_force_pages {
        margin: 15px 100px auto 100px;
        width: 855px;
    }
    
    div#strike_force_pages > ul > li {
        height: auto;
        width: auto;
        margin: auto;
        padding: auto;
    }

    div#landing_pages {
        margin: auto 100px auto 100px;
    }   

    div.units {
        margin-left: 25px;

    }
}

@media only screen and (min-width: 1201px) {

    div#strike_force_pages {
        height: 800px;
        width: 300px;
        margin: 50px 25px 300px 25px;
    }

    nav#strike_force_pages ul li {
        -webkit-flex: 1 1 200px;
        flex: 1 1 200px;
    }  

    nav#strike_force_pages {
        padding-top: 35px;  
    }

    div#landing_pages {
        width: 100%;
        margin: 25px 150px 0px 150px;
        padding-bottom: 15px;
    }

}