/*
File: tnt_app_styles_2018.php
Site: TNT
Date: 11/10/18
Author: KLP
Comments:
TODO:

@charset "UTF-8";
*/

/*--------- MOBILE DESIGNS: FIRST ----------*/

main {
    /*sticky footer help again*/
    min-height: calc(100vh - 125px);
    background-color: white;
    margin-top: -10px;
    padding: 3%;
}

#intro h2, #bigContent main details h2 {
    font-size: 20px;
    margin-bottom: 5px;
}

#intro figure.appStyle,
main figure.decorative_figure {
    text-align: center;
    width: 25%;
    height: auto;
    margin-right: 10px;
    margin-left: 10px;
    float: right;
}

#intro figure.appStyle img,
main figure.decorative_figure img {
    width: 100%;
    height: auto;
    text-align: center;
    border: 1px solid black;
    border-radius: 50%;
    background-color: white;
    padding: 2px;
}

#bigContent main #app_masthead h2 {
    margin-bottom: 0px;
}

#bigContent main #app_masthead p {
    margin-top: -2px;
}

#bigContent main #app_masthead{
    margin-bottom: 20px;
    padding: 1px;
}

main figure.decorative_figure {
    margin-top: -70px;
    width: 15%;
    margin-right: 10%;
    display: none;
}

main figure.decorative_figure figcaption {
    font-size: 10px;
}

main figure.masthead_figure {
    width: 50px;
    float: left;
    margin-right: 10px;
}

main figure.masthead_figure img{
    width: 100%;
    height: auto;
    text-align: center;
    border: 1px solid black;
    border-radius: 50%;
    background-color: white;
    padding: 2px;
}

main p#back {
    margin-top: 20px;
}

/*------- General Drop-down detail styling --------- */
summary {
    margin-bottom: 10px;
    font-style: italic;
    color: #999;
}

details {
    margin-bottom: 10px;
}

details hr {
    color: #999;
}

#bigContent main blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}

#intro #last_update {
    color: #bbb;
    font-size: 12px;
    font-style: italic;
    margin-top: 20px;
}

/*for a rounded-sheet look in a details element, put a section after the summary*/
main details section.sheet {
    background-color: #EEE;
    padding: 20px;
    border-radius: 10px;
    border: #CCC 1px solid;
}

/*------ General Form Styling -----------*/

form {
    margin-bottom: 10px;
		
}

form fieldset legend {
    padding: 10px;
}

form fieldset {
    background-color: beige;
    padding: 20px;
    border-radius: 20px;
}

form fieldset label {
    margin-right: 10px;
    font-style: italic;
    font-size: 20px;
}

form p input[type='submit']{
    margin-top: 10px;
}

#form_corner_pic.form_decoration{
    position: relative;
    margin: 0px;
    padding: 0px;
    right: 40px;
    top: 0px;
    width: 50px;
    
}

/*------ HTML5 Element Styling --------*/
h3 {
    margin-bottom: 5px;
}

/*restore default list styles that were taken away by wildcard*/
ul {
    list-style-type: disc;
    list-style-position: inside;
}

ol {
    list-style-type: decimal;
    list-style-position: inside;
}

/*nested list styles*/
ul ul,
ol ul {
    list-style-type: circle;
    list-style-position: inside;
    margin-left: 15px;
}

ol ol,
ul ol {
    list-style-type: lower-latin;
    list-style-position: inside;
    margin-left: 15px;
}

/*--------- media queries  ---------- */
/*gray band*/
@media (min-width: 200px) {

    /*for lengthy masthead titles, this number may need to be reduced
    at the page level*/
    header #mastheadText h1 {
        font-size: 21px;
    }

    main #intro figure.appStyle figcaption {
        font-size: 10px;
    }

}

/*end gray band*/

/*black band*/
@media (min-width: 400px) {

    /*removes additional suffix header from root-level pages*/
    header h1::after {
        content: "";
    }

    main figure.decorative_figure {
        display: inline;
    }
}

/*end black band*/

/*red band*/
@media (min-width: 600px) {

    /*removes additional prefix header from root-level pages*/
    header #mastheadText p::before {
        content: "";
    }

    main figure.decorative_figure {

        margin-right: 20%;

    }
}

/*end red band*/

/*blue band*/
@media (min-width: 800px) {
    main {
        padding-top: 10px;
        padding-left: 20%;
        padding-right: 20%;
        padding-bottom: 5px;
    }

    #bigContent main details p {
        font-size: 16px;
    }

    form fieldset {
        padding-top: 5px;
        padding-bottom: 10px;
    }

    main figure.decorative_figure {

        margin-right: 10%;

    }
}

/*end blue band*/

/*green band*/
@media (min-width: 1200px) {
    main {
        padding-left: 30%;
        padding-right: 30%;
    }

    main form{
        width: 50%;
    }
    #bigContent main p {
        font-size: 18px;
    }
    
    main figure.decorative_figure {
        width: 10%;
        margin-right: 50%;

    }
}

/*end green band*/

/*orange band*/
@media (min-width: 1400px) {}

/*end orange band*/

/*gold band*/
@media (min-width: 1600px) {

    /*large desktop mac*/
    header {
        border-bottom: 5px gold solid;
    }
}

/*end gold band*/