/*------------------------------------*\
    RESET
\*------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0b1 | 201101 
    NOTE:WORK IN PROGRESS
    USE WITH CAUTION AND TEST WITH ABANDON */

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
}
/*------------------------------------*\
    RESET
\*------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0b1 | 201101 
    NOTE:WORK IN PROGRESS
    USE WITH CAUTION AND TEST WITH ABANDON */

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
    display:block;
}
body{
    line-height:1;
}
ol,ul{
    list-style:none;
}
blockquote,q{
    quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
    content:’’;
    content:none;
}
/* remember to define visible focus styles! 
:focus{
    outline:?????;
} */

/* remember to highlight inserts somehow! */
ins{
    text-decoration:none;
}
del{
    text-decoration:line-through;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}


html, body{
    height:100%;
    width:100%;
}


/*------------------------------------*\
    $MAIN
\*------------------------------------*/

.app{
    height: 100%;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

.full-screen{
    height:98%;
    padding-bottom: 50px
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;

    text-align: center;
}

.map-canvas{
    display:none;
}


/* HOME SCREEN */

.main-interface{
    background-color: rgb(188,188,188);
}
    
    .main-logo{
        width:90%;
        height:auto;
        margin-top: 50px;
    }


    .textbtn-container{
        width:100%;
        margin-top: 20px;
    }

    .home-textbtn{
        float:left;
        width:40%;
        margin:0 5%;
    }

/* NEW ROUTE SCREEN */

.main-logo-small{
    width:60%;
    height: auto;
    margin-top: 25px;
}

.new-route-container
{
    width:230px;
    height:250px;
    margin:0 auto;
    margin-top: 15px;
    background: url('../img/icons/newroute2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: none;
}

    .new-route-container > h2
    {
        color:rgb(211,208,203);
        font-size: 1.1em;
        margin-top: 70px;
        display:inline-block;
    }

    .new-route-container p
    {
        color:rgb(211,208,203);
        font-family: Arial,Helvetica,sans-serif;
        font-size: 0.5em;
        margin-top: 10px;
        display:inline-block;
    }


    .route_name_text, .start-btn
    {
        width:120px;
        margin-top: 15px
    }

/* ROUTE SELECT */

.main-logo-smallest{
    width:35%;
    height: auto;
    margin-top: 25px;
}

.open-selected-button
{
    display:none;
    width:80%;
    height:auto;
    margin-top: 10px;
}

.route-review-container
{
    width:80%;
    height:50%;
    margin: 0 10%;
    margin-top: 15px;
    display: none;
    color:rgb(211,208,203);
}

    .route-review-container > div
    {
        background-color: rgb(109,135,148);
        width:100%;
        height:90%;
    }

    .route-review-container > div:first-child{
        background-color: rgb(64,79,85);
        width:100%;
        height: 18px;
        font-size: 0.8em;
        color:#fff;
    }

        .route-review-container > div:first-child > div{
            margin-top: 1px;
        }

        .route-column
        {
            height:100%;
            width:33.3%;
            text-align: center;
            float:left;
        }

            .route-column p{
                position: relative;
                top: 40%;
                -ms-transform: translateY(-40%);
                -webkit-transform: translateY(-40%);
                transform: translateY(-40%);
            }
            
            .route-column input
            {
                margin:0 0 5px 0;
            }

    .route-review-container > div:nth-child(2){
        font-size: 0.1em;
    }

        .route-review-row
        {
            width:100%;
            height:25px;
            padding-top:5px;
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
        }

        .route-review-row:nth-child(even)
        {
            background-color: rgb(76,95,102);
            background-color: rgba(64,79,85, 0.2);
        }

        /*
        .route-review-row:first-child
        {
            margin-top: 5px;
        }
         */
        
/* INFO */

.app-info
{
    margin-top: 15px;
    text-align: justify;
    padding: 0 20px;
    display:none;
    color:rgb(81,82,86);
    max-height: 220px;
    overflow: scroll
}

/* SOCIAL */

.social-container
{
    width:250px;
    height:250px;
    margin:0 auto;
    display:none;
    text-align: center;
}

    .social-grid
    {
        width:40%;
        height:40%;
        margin: 5% 5%;
    }


/* BOTTOM MENU */

.bottom-menu{
    width:100%;
    height:50px;
    position:absolute;
    bottom:0;
    left:0;
    background-color: #fff;
}

    .bottom-menu ul li{
        float:left;
        width:18%;
        margin: 0 0.8%;
        text-align: center;
    }

    .tab-icon{
        width:27px;
        height:27px;
        padding:0;
        margin:0;
        margin-top:4px;
    }

    .tab-label{
        position: relative;
        top:5px;
        font-size: 0.3em;
    }


/* SMALLER (VERTICAL) RES */

@media screen and (max-height: 480px) {

    .main-logo-small{
        width:30%;
        height: auto;
        margin-top: 15px;
    }

    .main-logo{
        width:70%;
        height:auto;
        margin-top: 30px;
    }

    .main-logo-smallest{
        width:25%;
        height: auto;
        margin-top: 15px;
    }
}

@media screen and (min-height: 481px) and (max-height: 500px) {

    .main-logo-small{
        width:35%;
        height: auto;
        margin-top: 15px;
    }

    .main-logo{
        width:80%;
        height:auto;
        margin-top: 30px;
    }

    .main-logo-smallest{
        width:28%;
        height: auto;
        margin-top: 15px;
    }

}

@media screen and (min-height: 501px) and (max-height: 615px) {

    .main-logo-small{
        width:40%;
        height: auto;
        margin-top: 15px;
    }

    .main-logo{
        width:85%;
        height:auto;
        margin-top: 30px;
    }

    .main-logo-smallest{
        width:28%;
        height: auto;
        margin-top: 15px;
    }

}