﻿
/*iphone screen 960x640, 1136x640, 1334x750*/

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
/*@media only screen and (max-width: 479px) and (orientation:portrait)*/
@media only screen and (max-width: 910px)
 /*@media screen and (orientation:portrait) and (max-width: 767px)*/
{

    table {
    width:100%;
    }

    #header h1 {    
    padding:0;
    margin:0 0 3px 3px;    
    font-size: 1rem;    
    }
    #header a {
    font-size: .6rem;    
    }    
    #header li {
    display:inline;
    }  

    .input {
    width:auto;
    min-width:85%;
    font-size:small;
    }

    #dTop {
        background-color: #009ED5;
        background-image: url('img/swc_mislogo_121x22.png');
        background-repeat: no-repeat;
        background-attachment: inherit;        
    }

    #dvImgHeader {
        background-image: url('img/swe_banner_320x105.png');
        background-repeat: no-repeat;
        background-attachment: inherit;
        background-position: center;
        background-size: contain;        
    }

    #topNav {
    display:none;
    }

    #lnkNavMobi {
        display: block;
        float: right;
        text-align: right;
        margin: 15px 15px 0 0;        
    }
    #navMobi {
        z-index: 1;
        position: relative;
        margin-top: 51px;               
    }
    ul.navMobi {        
        background: #009ED5;
        color:white;
        min-height: 102px;

        width: 100%;
        padding: 0;
        text-align: right;
    }
        ul.navMobi li {
            list-style: none;
            height:50px;        
            position: relative;
            float: none;
            width: 100%;            
        }
        ul.navMobi a {
            cursor: pointer;
            display: block;
            color: white;   
            padding:15px 20px;
        }
            ul.navMobi a:hover, ul.navMobi li:hover {
                color: #009ED5;
                background:white;
            }
        ul.navMobi li:hover {
        border: #009ED5 solid 1px;
        }

        
        ul.navMobi li.tap {
            background: white;
        }
            ul.navMobi li.tap ul {
                display: block;
            }

    #lnkHelp {
    background-image: url('img/swc_userguide_white_17x20.png');
}
    #lnkPrint {
    display:none;
    }
   
    #responsiveLayout {display: table;}
    #column-main {display: table-header-group;}
    #column-sidebar {display: table-row-group;}    
    /*#footer {display: table-footer-group;}*/
         
  
    
    #rNav {
    background-color: #0069b6;
    color:white;
}
    #rNav a {
        color: white;
    }

    #tblSearch thead td, #tblResults thead td {
        font-size: 4.0vw;
    }

    #tblSearch .label {
        font-size: 3.0vw;
    }

    #footer {
        text-align: center;
        vertical-align: central;
        font-size: .7rem;
    }

    /*GEOMETRY*/
    html {
        height: 100%;
    }
    
    #wrapper {
        width: 100%;
        margin: 0 auto 0 auto;
        padding: 0;
        min-width: 0;
        max-width: 400px;
    }

    #dTop {
        height: 50px;
        width: 100%;
        background-position: left 15px center;
        float: left;
    }

    #dvImgHeader {
        height: 140px;
        max-width: 400px;
        width: 100%;
        float: right;
    }

    #responsiveLayout {
        width: 100%;
    }
        #content {
        width: 100%;
        margin: 0;
        padding: 0;    
    }
      #column-main {
        margin: 0;
        padding: 0;
        min-height: 0;
        height: auto;
        width:100%;            
        position:relative;  
    }
    #imgMap, #imgLoading {
        /*width: 100%;
        height: 200px;*/
        vertical-align: middle;
        width: 100%;
        height: 100%;
        max-height: 267px;
        max-width: 400px;
        margin: 0 auto 15px auto;
        padding: 0;
    }

    #pnlSearch {
        width: 100%;
        margin: 0;
        padding: 0 10px;
        min-height: calc(100vh - 240px);
    }

       #pnlResults {
        width:100%;
        margin:0;    
        padding: 0 10px;  
    }

    #tblResults {
        min-height: calc(100vh - 440px);
    }
    #pnlSearch .input {
        padding-left: 10px;
    }

       #btnNewSearch {
    position: relative;
    margin: 20px 0;
    bottom: 0;    
    width: 100%;
}
    #column-sidebar {
        width: 100%;   
        padding: 0;
        margin: 0 auto 0 auto;
        min-height:0;
    }

    #img311white {
        display: inline-block;
        width: 37px;
        height: 18px;
    }
    #footer {
        margin: 0;
        padding: 15px 0 0 0;
        width: 100%;        
        position:relative;
    }
    /*/GEOMETRY*/

      
}

@media only screen and (max-width: 550px) {
    #header h1 {        
    font-size: 1rem;        
    }
   
    #header a {
    font-size: .6rem;    
    }

       #tblSearch thead td, #tblResults thead td{
    font-size: 6.0vw;        
}
  #tblSearch .label{
    font-size: 5.0vw;        
}
     #footer {
    font-size:1.7vw;
    
    }
}