﻿/* =======================================================
CSS STYLES FOR Module OnyakTech Forms Responsive Features
Copyright Chris Onyak 2003-2014 All Rights Reserved
www.OnyakTech.com - Sales@OnyakTech.com

Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
==========================================================
*/


@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

    /* Force table to not be like tables anymore */
    .ONYAKDV_DISPMAINFORM table, .ONYAKDV_DISPMAINFORM thead, .ONYAKDV_DISPMAINFORM tbody, .ONYAKDV_DISPMAINFORM th, .ONYAKDV_DISPMAINFORM td, .ONYAKDV_DISPMAINFORM tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        .ONYAKDV_DISPMAINFORM thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .ONYAKDV_DISPMAINFORM tr {
	
    }

    .ONYAKDV_DISPMAINFORM td {
        /* Behave  like a "row" */
        border: none;
        position: relative;
    }

        .ONYAKDV_DISPMAINFORM td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }       
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .OnyakTechFormsMasterContainer body {
        padding: 0;
        margin: 0;
        width: 320px;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .OnyakTechFormsMasterContainer body {
        width: 495px;
    }
}
