﻿
/*    IE 11 setup   */

table {
	width: 99% !important;
}

.bottomBord {
	border-bottom: 1px solid black;
	margin-bottom: 10px;
	width: 98%;
}

txtqtywidth {
    width: 20px;
}	

/* Smartphones (landscape) ----------- 
@media only screen 
and (min-width : 321px) {
/* Styles 

    CAN'T SEEM TO GET LANDSCAPE TO PORTRAIT TO STAY IN TD CELL VIEWPORT WITH MOBILE PORTRAIT 

} */

/* Smartphones (portrait) -----------  
@media only screen and (max-width : 321px) { /*this works to keep under 321 in the viewport, but pops the description wide in landscape not containing it in the viewport */
    /* Styles 

    html, #body { 
        width:auto;
    }

    table {
	    width: auto !important;
        overflow: hidden;
    }

    tr {
        width: auto;
        max-width: 669px;
    }

    table td {
        border: none;
        border-bottom: 1px solid #eee !important;
        position: relative;
        padding-left: 50%;
        text-align: left;
        width: auto;
        box-sizing: border-box;
        height: auto !important;
        overflow-x: initial;
    }

    .CartTable td::before {
        position: absolute;
        top: 4px;
        left: 19px;
        width: auto;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
    }

    td.qtycol {
        width: auto;
    }

    .bottomBord {
	    border-bottom: 1px solid black;
	    margin-bottom: 10px;
	    width: auto;
    }	

    .txtqtywidth {
        width: auto;
    }	


} */

/* Smartphones (portrait) ----------- */
@media only screen and (min-device-width : 321px) and (max-device-width : 568px) { /*this works to keep under 321 in the viewport, but makes landscape not full/screen viewport width ** it currently functions with both layouts though and this is acceptable*/
    /* Styles */ 

  html, #body { 
        width:auto;  
    }

    table {
	    width: auto !important;
        overflow: hidden;
    }

    tr {
        width: auto;
        max-width: 669px;
    }

    table td {
        border: none;
        border-bottom: 1px solid #eee !important;
        position: relative;
        padding-left: 50%;
        text-align: left;
        width: auto;
        box-sizing: border-box;
        height: auto !important;
        overflow-x: initial;
    }

    .CartTable td::before {
        position: absolute;
        top: 4px;
        left: 19px;
        width: auto;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
    }

    td.qtycol {
        width: auto;
    }

    .bottomBord {
	    border-bottom: 1px solid black;
	    margin-bottom: 10px;
	    width: auto;
    }	

    .txtqtywidth {
        width: auto;
    }	


} 