/*

Copyright (C) 2011 OutreachSystems.com All rights reserved worldwide.

THIS PROGRAM IS CONFIDENTIAL AND PROPRIETARY TO OUTREACHSYSTEMS AND MAY NOT BE REPRODUCED,
PUBLISHED OR DISCLOSED TO OTHERS WITHOUT COMPANY AUTHORIZATION.
*/
/* 
    Created on : Jun 4, 2018, 12:07:36 PM
    Author     : frankg
*/

@media all
{
    .mobile-menu
    {
        display:none;
        min-width: 200px;
        padding: 0;
        margin: 0;
        border-bottom: 4px solid orange;        
        background-color: #eee;        
    }
    #mobile-main-page
    {
    }
    
    .mobilenavbar
    {
        color: black;
        border-top: 2px solid rgb(125,190,47);
        padding-top: 4px;
        padding-bottom: 2px;
        margin-bottom: 0px;
        border-bottom: 4px solid orange;
        background: white;         
        min-height: 36px;
    }
    
    .navbar-stack
    {
        text-decoration:none;
    }

    a.navbar-stack
    {
        text-decoration:none;
    }

    a.navbar-stack:visited
    {
        text-decoration:none;
    }    
    
    .mobile-logo
    {
        float: right;
    }
    
    div.mobile-title 
    {
        display: inline-block; 
        position: absolute;
        left: 50%;
        margin-left: -70px;
    }

    .mobile-menu ul
    {
        /* font-family:Arial, Helvetica, sans-serif;
        font-size:11px; */
        margin-top:0px;
        margin-bottom:0px;
        margin-left:0px;
        margin-right:0px;
        line-height:100%;
        list-style-image:none;
        padding-left: 0px;
        padding-right:0px;
        padding-bottom:0px;
        list-style-type:none;
    }

    .mobile-menu li
    {
        display:block;
        margin-top:0px;
        margin-bottom:-12px;
        margin-left:0px;
        margin-right:0px;
        line-height:120%;
        list-style-image:none;
        padding-right:0px;
        padding-bottom:12px;
        padding-top:3px;
        padding-bottom:4px;
        margin-top:0px;
        margin-bottom:0px;
        background-color:#eee;
        border-top:1px solid #FFFFFF;
        border-bottom:1px solid #d9d9d9;
    }
    
    .mobile-menu-top li {         padding-left:10px;}
    
    .mobile-menu-sub {
        display:none;
        margin-top: 0px;
    }
    
    #m-menu-activity li {
        padding-left: 20px;
    }    
    ul.mobile-menu-sub li {
        padding-left: 20px;
    }     

    .mobile-menu li:first-child
    {
        border-top: 1px solid #d9d9d9;
    }

    .mobile-menu a
    {
        display:block;
        color:#000000;
        text-decoration:none;
    }

    .mobile-menu a:link, .mobile-menu a:visited
    {
        color:#000000;
        text-decoration:none;
    }

    .mobile-menu a:hover
    {
        background-color:#e6e6e6;
        color:#000000;
    }

    .mobile-menu a.indented
    {
        margin-left:20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;    
    }
       
    .mobilenavbar
    {
        display: none;
    }    
    #header
    {
        display: block;
    }
    
    .mobile-menu-section
    {
        color: gray/*#A8A8A8*/   ;
        font-weight:bold;
        font-size: 13px;
        padding-bottom:3px;
        padding-left:3px;
    }


    .mobile-menu-bar-menu a
    {
        color: black;
        text-decoration: none;
        padding-top:2px;
    }
    
    .mobile-menu-bar-menu:visited a
    {
        color: black ;
    }  
    
    .mobile-menu-bar-menu a
    {
        color: black;
        text-decoration: none;
        padding-top:2px;
    }    
    
     .mobile-menu-bar-select
     {
         border-bottom: 4px solid rgb(125,190,47);
     }
     .mobile-menu-bar-inactive{ border-bottom: 4px solid #d9d9d9; }
    
    .mobile-menu-bar    
    {
        background: #eee; /* #d9d9d9; */
        padding: 0px;
        margin-bottom: 10px;
        line-height: 150%;
        text-align: center;             
    }
    
    .mobile-menu-padding
    {
        margin-top:1px;
        line-height: 16px;

    }
    
    .mobile-menu-bar-menu
    {
        display: inline-block;
        height: 17px;
        color: white;     
        padding-right: 0px;        
        width: 33%;
        /* height: 20px; */
        padding-top: 6px;
        padding-bottom: 5px;
    }
    
    .mobile-menu-bar-iconic
    {
        padding-right: 0px;
    }

    .mobile-menu-icon
    {
        height:16px;
        width:16px; 
        line-height:16px; 
        color: #aaa;
        padding-left:5px;
        padding-right:5px;
        margin-right:0px;
        text-indent:0px;
    }
    .mobile-menu-chevron    
    {
        float:right;
        padding-right: 10px;
    }
    
    .mobile-menu-bar
    {
        display:none;
    }
    .stream-image-new
    {
        text-align: center;
    }
    .chart-g
    {
        margin: 10px;
        height: 250px;
        width: 96%;
        /*float: left;*/
    }
    .chart-g-master    
    {
        position: relative;        
        float: left;
        min-width: 300px;
        width: 48%;
    }
    .chart-g-overlay
    {
        width: 40px;
        height: 40px;
        position: absolute;
        bottom: 0px;   /* chartArea top  */
        right: 40px; /* chartArea left */        
    }
    .goal-slider
    {
        margin-left:40px; display: inline-block; height: 1.5em; width:100%;     
        border-radius: 5px;
    }
    .goal-label
    {    
        font-size: 10px;
        color: #777;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;        
        width: 100%;
        display: inline-block;
        xmax-width: 150px;
    }
    .goal-details
    {
        font-size: 12px;
        color: #777;    
    }    
}

@media only screen and (max-width : 800px) 
{
    #colright
    {
        float: none;
        width: 98%;
        padding: 0px;
    }
    #content
    {
        float: none;
        width: 100%;
        margin: 0px;
    }
    #colleft
    {
        display: none;
    }
    #innerContent
    {
        padding: 0px;
        width: 98%;
    }    
    #header
    {
        display: none;
    }
    .mobilenavbar
    {
        display:block;
    }
    .sql-kw, .sql-code
    {
        display:none;
    }
    body
    {
        width: 99%;
    }
    .tags-set
    {
        font-size: 60%;
    }
    .sectionTitle 
    {
        float: none;        
        width: 98%;
        border-bottom: 2px solid black;        
        margin-bottom: 5px;
    }
    .sectionEditLink
    {
        float: right;
        max-height: none;
    }
    
    .mobile-menu-bar
    {
        display:inherit;
    }    
    .menu-bar-menu
    {
       /* border: 1px solid black;
        padding: 1px;
        margin: 2px;
        border-radius: 2px;
        background-color: #fafafa;
        min-width: 40px;
        text-align: center;*/
        font-size: 100%;
        line-height: 120%;
    }
    .editableSection
    {
        border-bottom: none;    
        padding-bottom: 2px;
        margin-bottom: 5px;
        /* display: none; */
    }
    .tags-set a
    {
        background: white;
        background-image: none;     
        border-radius: 5px;
        border: 1px solid black;
        color: black;
    }
    .dataGrid
    {
        width:99%;
    }
    .stream-content-new
    {
        margin-left: 0px;
    }
    #scroll-left
    {
        font-size: 125%;
    }
    #scroll-right
    {
        width: 16px; 
        padding-left: 3px; 
        padding-right: 0px;
        float:right;
        font-size: 125%;
    }
    
    .stream-actions {
        display: inline-block;
        position: relative;
        right: 0px;    
        top: 0px;
    }
    .stream-object-type
    {
        max-width: 80%;
    }

    .messages-panel-new
    {
        border: 4px solid rgb(158, 207, 105); 
        padding-bottom:5px;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px        
    }    
    .user-message-row td
    {
        padding: 5px;
    }
    .chart-g
    {
        margin: 0px;
        height: 300px;
        width: 100%;        
        padding: 0;
    }
}

/*
 * iPhone 6plus and less, reduce the logo size
 */
@media only screen and (max-width : 620px) 
{
    .lvcoll
    {
        display: none;
    }     
    .stream-title-new
    {
        font-size: 100%;
    }
    .label-text{ display: none;}
    .label-icon{ display: inherit; }    
    
    .field-select
    {
        width: 300px;
    }     
}

/*
 * iPhone 6plus and less, reduce the logo size
 */
@media only screen and (max-width : 414px) 
{
    .lvcoll
    {
        display: none;
    }  
    .lvcolm
    {
        display: none;
    }      
    .field-select
    {
        width: 95%;
    }
    .rolodex { display:none; }
}

/*
 * Smaller phones
 */
@media only screen and (max-width : 325px) 
{
    .lvcoll
    {
        display: none;
    }  
    .lvcolm
    {
        display: none;
    }     
    .lvcols
    {
        display: none;
    }      

}