/* 
    Tablet Layout: 780px 
    
    This file should only contain overrides nessesary for screen sizes above 780px
    
    Any global styles should be added to 0-up.css
    
    
*/

@media only screen and (min-width:780px)
{

    /* -------------------------------------------------------------------
        MAIN STRUCTURE
    -----------------------------------------------------------------------------------*/
    .gridContainer
    {
        max-width: 780px;
    }

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

    div[role='banner']
    {
        margin: 0px;
        padding: 0px;
        width: 100%;
    }

        div[role='banner'] img.logo
        {
            width: 165px;
            display: block;
        }

    .brand
    {
        margin: 34px 0 30px 10px;
        display: block;
        width: 170px;
    }


    #nav-wrapper
    {
        padding: 10px 1%;
        width: 98%;
    }

    /* -------------------------------------------------------------------
        SIDE BAR
    -----------------------------------------------------------------------------------*/
    #SideBar
    {
        width: 25%;
        display: block;
        padding-top: 0;
        padding-bottom: 40px;
    }

    /* -------------------------------------------------------------------
        MAIN CONTENT
    -----------------------------------------------------------------------------------*/
    #main-wrap
    {
        float: right;
        width: 74%;
        margin-top: 0;
        margin-left: 0;
    }

    #main-wrap-full-content 
    {
        float: right;
        width: 100%;
        margin-top: 2%;
        margin-left: 2%;
    }

    div[role="main"] {
        width: 67%;
        padding: 0 2% 20px;
    }
    /* -------------------------------------------------------------------
        TOUCH CAROUSEL ARROWS VISIBLE
    -----------------------------------------------------------------------------------*/
    .touchcarousel.black-and-white .arrow-holder
    {
        display: block;
    }


    /* -------------------------------------------------------------------
        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: 10px 1%;
        width: 98%;
    }

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

    .legal
    {
        padding: 10px 4%;
        width: 92%;
    }

    #SideBar .content-box
    {
        padding: 10px 3%;
        width: 94%;
    }

    #SideBar .headbox h1
    {
        padding-left: 8px;
    }

    #SideBar .info-panel
    {
        padding-left: 8px;
        padding-right: 8px;
    }

    .sidebar-inner
    {
        width:190px;
    }

      /* -------------------------------------------------------------------
    PAGING
-----------------------------------------------------------------------------------*/
    .paging > a
    {
        padding-right: 0;
    }


    /* -------------------------------------------------------------------
        Carousel Item Container
        Defines the individual items within a carousel or tile of some kind.
    */
  

    /* -------------------------------------------------------------------
       Columns 
       
    */
    .col-1
    {
        width: 46%;
    }
 

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

    .hide-desktop
    {
        display: none !important;
    }
    .affix {
    position: fixed; 
    top: 20px; 
   
}
}

@media only screen and (min-width: 850px)
{
     .gridContainer
    {
        max-width: 850px;
    }
      .sidebar-inner
    {
        width:210px;
    }
}


@media only screen and (min-width: 1000px)
{
     .gridContainer
    {
        max-width: 1000px;
    }
      .sidebar-inner
    {
        width:250px;
    }
}