﻿/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 500px) {

    ul#menu li {
        display: list-item;
        border: 1px solid rgba(255, 255, 255, 0.3);
        /*background: linear-gradient(to bottom, white, #cdcdcd);
        background: -webkit-linear-gradient(top, white, #cdcdcd);
        background: -moz-linear-gradient(top, white, #cdcdcd);
        background: -ms-linear-gradient(top, white, #cdcdcd);
        background: -o-linear-gradient(top, white, #cdcdcd);
        width: 100%;
        font-size: 1em;
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 0px;*/
    }

    ul#menu li a:hover {
        background-color: silver !important;
        color: black !important;
    }

    ul#menu li ul li a:hover {
        background-color: silver !important;
        color: black !important;
    }

    ul#menu li a {
        padding: 5px 10px;
        display:block;
        text-align: left;
        color: white;
    }

    ul#menu li span {  
        padding: 5px 10px;      
        text-align: left;
        color: white;
        background-color: black;
    }

    nav {
        display: none;        
    }
        nav ul li:hover ul {
            width:100%;
            position:static;        
        }  

            nav ul li:hover ul li { 
                margin-right: 0px !important;           
                /*background-color: grey !important;*/
            }

            nav ul li:hover ul li a { 
                padding-left:25px !important;           
                /*background-color: grey !important;*/
            }  
    
        nav ul li:hover span {
            /*background-color: grey !important;*/
        }   

    header .float-left,
    header .float-right {
        float: none;
    }

    .DatesDiv {
        max-width: 150px;
    }

    footer p {
        margin: 0;
    }

    footer {
        text-align: center;
    }

    footer .float-left, footer .float-right {
        float: none;
    }

    #pullMenu {
        display:block;
        width: 25px;
        height: 25px;
        vertical-align: middle;
        float: left;
        margin-left: 10px;               
    }

    #titleSpan {
        font: bold 12px/18px sans-serif;
    }


    #dialogDiv {
        display: block;
        z-index: 1002;
        outline: 0px;
        height: auto;
        width: 90%;
        top: 484px;
        left: 10%;
    }

    nav {
        float:none !important;
        /*padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 0px;
        padding-left: 0px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;*/
    }

        nav ul {
            padding: 0 !important;
        }

            nav ul li {
                background-color:black !important;
            }

    /*ul#menu {
        padding: 0px;
    }*/

    header .site-title {
        margin-top: 0;
        text-align: center;
    }

    header .content-wrapper {
        padding-top: 5px;
    }

    .site-title {
        font-size: 1.3em;
        font-family: serif;
    }

    .selectedList {        
        max-width: 250px;        
    }

    #colDimensionsList {
        height: auto;
    }

    #valDimensionsList {
        height: auto;
    }

}