/* Section One*/

th { background: #ffffff;}
table {
        border-collapse: collapse;
        border: 1px solid #cdcdcd;
        font: normal 12px arial; 
        width: 100%;
}
td, th { border: 1px solid #ffffff; padding: 2px;}

/* Section two*/

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
        /* Section three*/
                table, thead, tbody, th, td, tr { 
                        display: block; 
                }
                /* Section four*/
                thead tr { 
                        position: absolute;
                        top: -9999px;
                        left: -9999px;
                }
                
                tr { border-bottom: 1px solid #ccc; }
/* Section five*/
                td { 
                     border: none;
                     border-bottom: 1px solid #eee; 
                     position: relative;
                     padding-left: 50%; 
                }
                td:before { 
                        position: absolute;
                        top: 3px;
                        left: 6px;
                        width: 45%; 
                        padding-right: 10px; 
                        white-space: nowrap;
                        font-weight: bold;
                }
                /* Section six*/

                td:nth-of-type(1):before { content: "Item No."; }
                
}

/* Section seven*/
        @media only screen
        and (min-device-width : 320px)
        and (max-device-width : 480px) {
                body { 
                        padding: 0; 
                        margin: 0; 
                        width: 320px; }
                }
/* Section eight*/
        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
                body { 
                        width: 495px; 
                }
        }