/************************************************************************************
default large styles
*************************************************************************************/
@media only screen
    and (min-width: 770px)
{
}

/************************************************************************************
default
*************************************************************************************/
@media all
    and (min-width: 480px)
{
    /* dashboard styles */
    .blockContainer ul.workflowList
    {
        display: block !important;
    }
       
    #consoleForm input[type=text], 
    #consoleForm input[type=password]
    {
        width: 91%;
        margin-right: -2.4em;
    }
    
    #consoleForm select
    {
        width: 98%;
        margin-right: 0em;
    }
}

/************************************************************************************
smart phones
*************************************************************************************/
@media only screen
    and (min-width: 320px)
    and (max-width: 480px)
{
    /* site header */
    #wfconsoleheader .search-header
    {
        top: 3.5em;
        left: 1em;
        right: 1em;
    }

    #wfconsoleheader .search-header input[type=text]
    {
        width: 70%;
    }

    #wfconsoleheader .search-header input[type=button]
    {
        width: 27%;
    }

    /* dashboard styles */
    .blockContainer
    {
        width: 100%;
        margin: 0.5em 0em 0.5em 0em;
    }
    
    .blockContainer header
    {
        height: 5em;
    }
    
    .blockContainer header aside a.dashboard-settings-icon
    {
        right: 3em;
    }
    
    .blockContainer header aside a.dashboard-expand-icon
    {
        display: block;
    }
    
    .blockContainer ul.workflowList
    {
        display: none;
    }
    
    /* tabs styles */
    #tabs .ui-widget-header
    {
        padding-right: 0.3em;
    }
    
    #tabs .ui-widget-header li
    {
        width: 100%;
    }
    
    /* form input styles */
    #consoleForm section.field-container hgroup, 
    #consoleForm section.field-container hgroup label
    {
        display: list-item;
        width: 100%;
    }
    
    #consoleForm input[type=text], 
    #consoleForm input[type=password]
    {
        width: 95%;
        margin-right: -2.4em;
    }
    
    #consoleForm select
    {
        width: 98%;
        margin-right: 0em;
    }
}

/************************************************************************************
ipads (portrait)
*************************************************************************************/
@media only screen
    and (min-width: 480px)
    and (max-width: 770px)

{
    /* dashboard styles */
    .blockContainer
    {
        width: 15em;
    }
    
    /* form input styles */
    #consoleForm fieldset section.field-container hgroup
    {
        width: 20em;
    }
}

/************************************************************************************
ipads (landscape)
*************************************************************************************/
@media only screen
    and (min-width: 768px)
    and (max-width: 1199px)    
{
    /* dashboard styles */
    .blockContainer
    {
        width: 20em;
    }
    
    /* form input styles */
    #consoleForm fieldset section.field-container hgroup
    {
        width: 18.5em;
    }
}

/************************************************************************************
normal browser
*************************************************************************************/
@media only screen
    and (min-width : 1200px)
{
    /* dashboard styles */
    .blockContainer
    {
        width: 22em;
    }
    
    /* form input styles */
    #consoleForm fieldset section.field-container hgroup
    {
        width: 21.25em;
        padding:0.1em;
    }
}

/************************************************************************************
header constraints
*************************************************************************************/
@media only screen
    and (min-width: 768px)
    and (max-width: 1200px)    
{
    #wfconsoleheader h3
    {
        max-width: 26em;
    }
}