@charset "utf-8";

@media (min-width:200px) and (max-width:800px) {
    .SearchFilter {
        width: 100%;
        height: auto;
        overflow: auto;
        clear: both;
    }

    .FilterContent, table tr td {
        vertical-align: top;
    }

    .FilterContent {
        width: 150px;
        height: 130px;
        margin-top: 10px;
        display: block;
        padding: 10px 29px;
        background-color: rgba(75,140,45,.8);
    }

        .FilterContent:hover, .FilterSelected {
            background-color: rgba(185,80,8,.8);
        }

    .FilterSelected {
        width: 83%;
        height: auto;
        margin-top: 2px;
        display: inline-block;
        padding: 10px 29.2px 10px 29px;
        vertical-align: top;
    }

    header {
        background-color: #fff;
        height: 80px;
        box-shadow: 0 2px 10px 2px #ccc;
        border-bottom: 1px #f2f2f2 solid;
        background-image: url(../../gfx/mNutrition/Header_CornerBGMobile.png);
        background-repeat: no-repeat;
        background-position: left corner;
    }

    #nutrition_logo {
        width: 200px;
        height: auto;
        padding: 30px 0 0;
        display: inline-block;
        float: left;
    }

    .responsiveIMG {
        width: 100%;
        height: auto;
    }

    #DesktopTabs {
        float: right;
        width: auto;
        padding: 20px 30px 0 15px;
    }

    .CabiTab, .homeTab {
        background-repeat: no-repeat;
    }

    .homeTab {
        background-position: left;
        vertical-align: middle;
        padding-left: 30px;
        background-image: url(../../gfx/mNutrition/Home_IconMobile.png);
    }
      .usersTab {
        background-position: left;
        vertical-align: middle;
        padding-left: 30px;
        background-image: url(../../gfx/mNutrition/users.png);
    }

    .reportsTab {
          background-image: url(../../gfx/mNutrition/reports.png);
    background-repeat: no-repeat;
    background-position: left;
    vertical-align: middle;

    }
        .AboutUsTab a, .CabiTab a, .ContactUSTab a, .LogInTab a, .homeTab a , .usersTab a,.reportsTab a{
            color: #fff!important;
        }

    .CabiTab {
        background-image: url(../../gfx/mNutrition/CabiLogo_IconMobile.png);
    }

    .AboutUsTab, .CabiTab, .ContactUSTab {
        background-position: left;
        vertical-align: middle;
        padding-left: 30px;
    }

    .AboutUsTab {
        background-repeat: no-repeat;
        background-image: url(../../gfx/mNutrition/About_IconMobile.png);
    }

    .ContactUSTab {
        background-image: url(../../gfx/mNutrition/Contact_iconMobile.png);
    }

    .ContactUSTab, .LogInTab, .content {
        background-repeat: no-repeat;
    }

    .LogInTab {
        vertical-align: middle;
        padding-left: 30px;
        background-image: url(../../gfx/mNutrition/LogIn_IconMobile.png);
        background-position: left;
    }

    #MobileTabs {
        display: inline;
        width: 15%;
        float: right;
        margin-right: 10%;
    }

    #DesktopTabs {
        display: none;
    }

    .content {
        width: 96%;
        font-size: 12px;
        margin: 0 auto;
        padding-top: 130px;
        min-height: 500px;
        height: auto;
        background-image: url(../../gfx/mNutrition/BGCornerImage.png);
        background-position: right top;
    }

    #footerContent, .container {
        width: 98%;
        margin: 0 auto;
        height: auto;
    }

    .footer {
        background: #444;
        position: relative;
        clear: both;
        bottom: 0;
        height: 200px;
        width: 100%;
    }

        .footer .container {
            padding: 0;
            min-height: auto!important;
        }

    #footerContent {
        width: 100%;
        text-align: left;
    }

    .CC {
        width: 100%;
        float: left;
        display: block;
    }

        .CC ul li, .SearchForm ul li {
            list-style: none;
            display: block;
        }

        .CC ul li {
            font-size: 11px;
        }

    .FollowLink {
        width: 92%;
        margin: 10px auto 0;
        display: block;
    }

        .FollowLink a {
            color: #fff;
            font-size: 12px;
            display: inline;
            padding: 10px;
            text-decoration: none;
            -moz-transition: all 1s ease;
            -webkit-transition: all 1s ease;
            -o-transition: all 1s ease;
            transition: all 1s ease;
        }

            .FollowLink a:hover {
                opacity: 1;
                -moz-transform: scale(1.1) rotate(0deg) translate(0);
                -webkit-transform: scale(1.1) rotate(0deg) translate(0);
                -o-transform: scale(1.1) rotate(0deg) translate(0);
                transform: scale(1.1) rotate(0deg) translate(0);
            }

    .footerContact {
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        padding: 10px 0 10px 40px;
        background-image: url(../../gfx/mNutrition/ContactIcon.png);
        background-repeat: no-repeat;
        background-position: left;
    }

    .Copyright, .footer p {
        font-size: 14px;
        color: #fff;
    }

    .footer p {
        font-size: 13px;
        line-height: 24px;
        font-weight: 300;
        text-align: center;
        text-transform: uppercase;
    }

    .SearchContent, .SearchForm {
        width: 100%;
        height: auto;
    }

        .SearchForm ul {
            list-style: none;
            margin-left: -40px;
        }

            .SearchForm ul li {
                margin: 5px;
            }

                .SearchForm ul li select {
                    color: #b4b3b3;
                    background-color: #fff;
                    border: none;
                    min-width: 100%;
                    padding: 10px;
                }

                    .SearchForm ul li select:focus {
                        color: #333;
                    }

    .SrchBTN {
        background-image: url(../../gfx/mNutrition/SearchIcon.png);
        background-repeat: no-repeat;
        background-position: left;
        color: #fff;
        background-color: #ee7421;
        padding: 10px 10px 10px 35px;
        text-align: center;
        border: 1px #ee7421 solid;
        width: 200px;
        outline: none;
        font-size: 16px;
        cursor: pointer;
    }

        .SrchBTN:hover {
            background-color: #cc5a0c;
        }
}

.reportsTab {
    background-image: url(../../gfx/mNutrition/reports.png);
    background-repeat: no-repeat;
    background-position: left;
    vertical-align: middle;
    padding-left: 30px;
}