﻿@media (max-width: 767px) {

    /* global */
    body {
        background: #eee none;
    }

    .field-table, .field-table tr, .field-table th,  .field-table td {
        display: block;
    }

        .field-table th, .field-table td.label {
            clear: both;
            float: left;
            width: 100px;
            line-height: 18px;
        }

        .field-table td {
            float: left;
            white-space: normal;
            line-height: 18px;
        }


    #main .span9 {
        float: none !important;
    }
   
    /* top navigation */
    header .span12 .nav-tabs > li {
        float: none;
    }

    .span12 .nav-pills > li {
        padding-left: 20px;
    }

    .span12 .nav-pills {
        margin: 4px 0;
    }

    .span12 .nav-tabs > li > a {
        border: 1px solid #ccc;
        background: #f3f4f5;
    }


    /* logo, quick-search */
    .productLogo {
        text-align: left;
        display: block;
        width: 100%;
        margin: -20px 0 0 -24px;
        display: none;
    }

        .productLogo img {
            width: 112px;
            height: 60px;
        }

    .quick-search {
        margin-bottom: 9px;
    }

        .quick-search > ul > li > a {
            padding: 3px;
            margin-right: 0;
        }

        .quick-search .search-query {
            width: 90px !important;
        }

    /* mobile-scrollable */
    .mobile-scrollable {
        background: #EEEEEE;
        /*max-height: 340px;*/

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        margin: 0 -20px;
        padding: 3px;
        
        margin-bottom: 1em;
    }

        .mobile-scrollable > * {
            width: 600px;
            min-width: 600px;
            max-height: 340px;

            background: #f3f4f5;
            margin: 0;

            position: relative;
            -webkit-transform: translate3d(0,0,0);
        }
    
    .btn
    {
        padding: 5px 9px;
        font-size: 11px;
        line-height: 16px;
    }    
    
    /* tabMenu */

    .tabMenu
    {
        margin-top: 18px;
    }

    /* tabMenu ul */
    .tabMenu > ul
    {
        border-bottom: 1px solid #DDDDDD;
        overflow: hidden;
    }
    
    .tabMenu > ul
    {
        list-style: none outside none;
        margin-bottom: 18px;
        margin-left: 0;
    }

    /* tabMenu ul li */
    .tabMenu > ul > li
    {
        margin-bottom: -1px;
    }
    .tabMenu > ul > li
    {
        float: left; 
    }

    /* tabMenu ul li a */
    .tabMenu > ul > li > a
    {
        background: -moz-linear-gradient(center top , #F3F3F3 0%, #FFFFFF 100%) repeat scroll 0 0 transparent;
        background: linear-gradient(center top , #F3F3F3 0%, #FFFFFF 100%) repeat scroll 0 0 transparent;
        border: 1px solid #D9D9D9;
        text-transform: capitalize !important;
        text-decoration: none;
    }

    .tabMenu > ul > li.active > a,
    .tabMenu > ul > li[class*=selected] > a
    {
        background: #fff;
        position: relative;
        z-index: 20;
        color: #00559C;
    }

    /* ------------- */
    .tabMenu li.active a, .tabMenu li[class*=selected] a:hover
    {
        background: none repeat scroll 0 0 #FFFFFF;
        color: #00559C;
    }

    .tabMenu li.active a, .tabMenu li[class*=selected] a:hover
    {
        -moz-border-bottom-colors: none;
        -moz-border-image: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-color: #FFFFFF;
        border-color: #DDDDDD #DDDDDD transparent;
        border-style: solid;
        border-width: 1px;
        color: #555555;
        cursor: default;
    }
    
    .tabMenu > ul > li > a
    {
        /* background: none repeat scroll 0 0 #FFFFFF; */
        color: #919090;
        text-transform: uppercase;
    }

    .tabMenu > ul > li > a
    {
    /*   border: 1px solid transparent; */
        border-radius: 4px 4px 0 0;
        line-height: 18px;
        padding-bottom: 4px;
        padding-top: 4px;
    }

    .tabMenu > ul > li > a
    {
        line-height: 14px;
        margin-right: 2px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .tabMenu > ul > li > a
    {
        display: block;
    }
    
    /* Popups for ClaimInfoEvent.aspx*/
        #alert-popup
        {
            background: #ffffaa;
            padding: 1em;
            /*width: 30em;*/
            display: none;
            height: auto;
            text-align: left;
            position: absolute;
            border: solid 1px #666;
        }
        #icon-popup
        {
            background: #ffffaa;
            padding: 1em;
            /*width: 30em;*/
            display: none;
            height: auto;
            text-align: left;
            position: absolute;
            border: solid 1px #666;
        }
        
    /* Table striped, color changed from light gray to light blue*/
    .table-bordered td 
    {
        background-color:#FFFFFF;
    }
        
    .table-striped tbody tr:nth-child(even) td
    {
        background-color: #FFFFFF;
    }
    
    /* Sub-menu*/
    .sub-menu
    {
        background: none repeat scroll 0 0 #EEEEEE;
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        border: 1px solid #CCCCCC;
        margin-bottom: 10px;
    }

    .sub-menu > .container ul
    {
        clear: right;
        /*float: left;*/
        list-style: none outside none;
        margin-bottom: 0;
        padding: 0;
        margin-left: 0;
    }

    .sub-menu > .container ul li
    {       
        color: #00539D;
        cursor: pointer;
        /*float: left;*/
        font-weight: bold;
        list-style-type: none;
        margin: 10px 0;
        padding: 0 20px;
        text-align: left;        
    }

    .sub-menu > .container ul li a
    {
        color: #676666;
        font-size: 13px;
        text-decoration: none;            
    }

    
    .sub-menu > .container ul li.longSelected
    {
        background-color: #999999;
        color: White;
        /*width: 135px;*/
    }

    .sub-menu > .container ul li.lastLi
    {
        border-right: 1px solid #999999;
    }

    .sub-menu > .container ul li.active a, .sub-menu > .container ul li a:hover, .sub-menu > .container ul li.selected a, .sub-menu > .container ul li.save a
    {
        color: #05589E;
    }
        
    section#main .nav-list 
    {
        padding-bottom: 0px;
    }
    
    section#main .nav-collapse .btn 
    {
        background: transparent !important;
        margin-top: -1em !important;
    }
    div.calendar input
    {
	    width: 65px;
    }

}
