/* 
    Tablet Layout: 480px 
    
    This file should only contain overrides nessesary for screen sizes above 480px
    Any global styles should be added to 0-up.css
    
    
*/
@media only screen and (min-width: 480px)
{

    /* -------------------------------------------------------------------
        MAIN STRUCTURE
    -----------------------------------------------------------------------------------*/
    .gridContainer
    {
        width: 98%;
        padding: 0 1%;
    }

    /* -------------------------------------------------------------------
        HEADER
    -----------------------------------------------------------------------------------*/

    div[role='banner']
    {
        margin-bottom: 15px;
        margin-top: 0px;
    }

    #nav-wrapper
    {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    nav a.brand img
    {
        width: 145px;
    }



    /* -------------------------------------------------------------------
        HERO section on the home page
    -----------------------------------------------------------------------------------*/
       .hero header h1
        {
            font-size: 40px;
            margin-bottom: 10px;
            letter-spacing: -1px;
        }

        .hero > p
        {
            font-size: 18px;
        }

    /* -------------------------------------------------------------------
        SIDE BAR
    -----------------------------------------------------------------------------------*/
   

    /* -------------------------------------------------------------------
        MAIN CONTENT
    -----------------------------------------------------------------------------------*/

    /* -------------------------------------------------------------------
    TYPOGRAPHY STRUCTURE
-----------------------------------------------------------------------------------*/
    /*  Pixel Values are used here aswell as rems (until browser support is better) */
    h1
    {
        margin-top: 70px;
        font-size: 24px;
        line-height: 26px;
        
    }

   

    /* -------------------------------------------------------------------
        FOOTER
    -----------------------------------------------------------------------------------*/

    /* -------------------------------------------------------------------
        MODULES
    -----------------------------------------------------------------------------------*/
    /* -------------------------------------------------------------------
        CONTENT BOX
        Defines a box to wrap content. background colors are defined by extenting the class
        Some modification is done base on where the box appears eg. sidebar or footer
    */
    .content-box
    {
        padding: 6px 1%;
        width: 98%;
        -webkit-border-radius: 6px;
        border-radius: 6px;
    }

        .content-box.login, .loginblank
        {
            padding: 10px 3% 20px 3%;
            width: 94%;
        }

    .legal
    {
        padding: 10px 2%;
        width: 96%;
    }

    /* -------------------------------------------------------------------
        HeadBox
       The headers of each module section
    */

      .headbox
    {
        padding: 8px 1.5% 10px;
        width: 97%;
    }
    #SideBar .headbox 
    {
        padding-left: 1.5%;
    }
 
     /* -------------------------------------------------------------------
    PAGING
-----------------------------------------------------------------------------------*/
    .paging > a
    {
        padding-right: 4px;
    }


    /* -------------------------------------------------------------------
        TOUCH CAROUSEL ARROWS VISIBLE
    -----------------------------------------------------------------------------------*/
    .touchcarousel.black-and-white .arrow-holder
    {
        display: block;
    }

    /* -------------------------------------------------------------------
        TABLES
    -----------------------------------------------------------------------------------*/

     .portfolio td
    {
        font-size: 15px;
    }

    .account td
    {
        font-size: 15px;
    }


    /* -------------------------------------------------------------------
        HELPERS
    -----------------------------------------------------------------------------------*/
    .hide-tablet, .hide-mobile
    {
        display: none !important;
    }

    .hide-mobile-table
    {
        display: table-cell !important;
    }

    .hide-desktop
    {
        display: block !important;
    }

 
}