/*
Project Name: ViennaOperaTickets.com 2015
Project URI: http://viennaoperatickets.com
Author: Pixelflower
Author URI: http://pixelflower.com
Description: ViennaOperaTickets.com is custom-designed website for A&A Tickets Online.
Version: 2.0
*/

/* small tablet to large tablet to low resolution desktop
----------------------------------------------- */
@media screen /*and (min-width: 570px)*/ and (max-width: 990px)
{
    body
    {
        border-left: 0;
        border-right: 0;
    }
    .lang
    {
        margin-left: 10px;
        width: 60%;
        width: calc(100% - 212px);
        max-width: 660px;
    }
    .search
    {
        width: 200px;
    }
    .search input[type="text"],
    .search input[type="search"]
    {
        width: 85% !important;
    }
    .header
    {
        width: 90%;
        width: calc(100% + 90px);
        margin-left: -90px;
    }
    .cart
    {
        left: calc(100% - 165px);
    }
    .menu
    {
        margin-left: 10px;
    }
    .content
    {
        margin-left: 10px;
    }
    .box .ttl
    {
        width: 70%;
        width: calc(100% - 152px);
        max-width: 709px;
    }
    .box .ttl a, .plain h2
    {
        width: 90%;
        width: calc(100% - 30px);
        max-width: 679px;
    }
    .plain .text
    {
        width: 90%;
        width: calc(100% - 20px);
        max-width: 689px;
    }
    .plain .text div
    {
        width: 45%;
        width: calc(50% - 10px);
    }
    .pagebox
    {
        margin-left: 0px;
    }
    .footer
    {
        margin-left: 0px;
        width: 90%;
        width: calc(100% - 20px);
        max-width: 840px;
    }
    .footer .col.about
    {
        width: 50%;
        width: calc(100% - 230px);
    }
    .imgcredit
    {
        width: 10px;
        height: 10px;
        left: 2px;
    }
}
/* cart fix
----------------------------------------------- */
@media screen and (min-width: 890px) and (max-width: 990px)
{
    .cart
    {
        left: 705px;
    }
}

/* small tablet 
----------------------------------------------- */
@media screen /*and (min-width: 570px)*/ and (max-width: 680px)
{
    .box .ttl
    {
        height: auto;
        min-height: 50px;
        margin-bottom: 1px;
    }
    .box .ttl h3, .plain h2
    {
        font-size: 200%;
    }
    .box .ttl a, .plain h2
    {
        height: auto;
        min-height: 25px;
    }
    .list .text
    {
        width: 95%;
        width: calc(100% - 10px);
    }
    .monthbox ul li
    {
        width: 46px;
    }
    .monthbox ul li a
    {
        width: 46px;
        font-size: 150%;
        padding-left: 0px;
    }
    .plain .text div
    {
        float: none;
        width: 95%;
        width: calc(100% - 10px);
    }
    .imgcredit
    {
        display: none;
    }
}

/* phone to small tablet
----------------------------------------------- */
@media screen and (max-width: 580px)
{
    .search
    {
        display: none;
    }
    .lang
    {
        width: 95%;
        width: calc(100% - 20px);
    }
    .header
    {
        margin-left: -200px;
        width: calc(100% + 200px);
    }
    .box
    {
        height: auto;
    }
    .box .dt, .list .search, .context
    {
        float: none;
        width: 95%;
        width: calc(100% - 30px);
    }
    .box .ttl
    {
        float: none;
        width: 95%;
        width: calc(100% - 0px);
        margin-bottom: 10px;
    }
    .plain
    {
        padding-left: 0;
    }
    table.grid
    {
        font-size: 90%;
    }
    .plain .text table.grid
    {
        font-size: 100%;
    }
    /*.context form
    {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }*/
    input[type="text"], input[type="password"], input[type="search"], input[type="url"], input[type="file"], input[type="email"], input[type="tel"], input[type="date"], select, textarea
    {
        width: 98%;
    }
    select
    {
        width: 100% !important;
    }
    .plain input[type="button"], .plain input[type="submit"]
    {
        font-size: 120%;
        width: auto;
    }
    .footer .col
    {
        display: none;
    }
    .footer .col.about
    {
        display: block;
        border: 0;
        width: 95%;
        width: calc(100% - 20px);
    }
}