/* Responsive design toggles for main container*/
/* ########################################################################## */
/* #### Mobile Phones #### */
@media screen and (max-width: 360px) {
	.container {
		margin-left: 0;
		margin-right: 0;
		min-height: 450px;
	}

	.noTouch {
	display: none !important;
	}

	/* Force table to not be like tables anymore */
	table.grad, table.grad thead, table.grad tbody, table.grad th, table.grad td, table.grad tr, table.tableHead td.titleCell, table.tableHead td.buttonCell, table.tableHead td.pageTileCell, table.tableFoot td.tallyCell, table.tableFoot td.pageTileCell
 {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	table.grad thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	table.grad tr { border: 1px solid #ffffff; }

	table.grad td, table.grad th{
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ffffff;
		position: relative;
		padding: 2px;
		padding-left: 35%;
		white-space: normal;
		text-align: left;
	}

	table.grad tr:nth-child(even) td {
		border-bottom: 1px solid #ffffff;
	}


	table.grad td:before, table.grad th:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 2px;
		left: 2px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
		text-align: right;
		font-weight: bold;
		content: attr(data-title);
	}

	table.grad td.alignC, table.grad th.alignC {
		text-align: left;
	}
	table.grad td.alignR, table.grad th.alignR {
		text-align: left;
	}
	table.grad td.actions {
		text-align: left;
	}

	table.grad td.subHead {
		padding-top: 4px;
		padding-left: 4px;
	}

	span.FutureButton {
		float: left;
	}

	.DetBoxCol, .Det2ColL, .Det3ColL
		{
		float: none;
		width: 100%;
		}

	.Det2ColR, .Det3ColR, .Det3ColC
		{
		width: 100%;
		float: none;
		margin-left: 0;
		}

	.Label1Col, .Label2Col, .Label3Col
		{
		width: 18%;
		}

	.Content1Col, .Content2Col, .Content3Col
		{
		width: 81%;
		}

	div.MainSidebar
		{
		display: none;
		}

	div.OrderSidebar {
		width: 100%;
		min-height: 50px;
		}

	div.MainDetail
		{
		min-height: 780px;
		width: 100%;
		}

	div.OrderDetailDraft
		{
		width: 100%;
		}

	div.OrderDetail
		{
		width: 100%;
		}

	table.tableHead td.titleCell {
		font-size: 1.1em;
	}

	table.tableHead td.buttonCell {
		font-size: 0.4em;
	}

	table.tableHead td.pageTileCell, table.tableFoot td.pageTileCell {
		font-size: 0.8em;
		text-align: left;
	}

	ul.nav1 {
        width: 100%;
        display: none;
        height: auto;
        margin: 0;
        padding: 0;
	}

	ul.nav1 li.nav1 {
		font-size: 1.1em;
		text-align: left;
		float: left;
		width: 44% !important;
		padding: 6px;
		font-weight: bold;
		border: 1px solid #CCCCCC;
		margin-bottom: -1px;
		margin-right: -1px;
	}

    a#touchOnly {
 		font-size: 1.1em;
 		text-align: left;
 		background-color: #EEEEEE;
		color: #AAAAAA;
        float: left;
		width: 44% !important;
		padding: 6px;
 		font-weight: bold;
		border: 1px solid #CCCCCC;
		margin-top: 0px;
		margin-bottom: 6px;
		margin-right: -1px;
 	    display: inline;
        position: relative;
		text-decoration: none;

    }
    a#touchOnly:after {
        content:"";
        background: url('images/nav-icon.png') no-repeat;
        width: 20px;
        height: 20px;
        display: inline-block;
        position: absolute;
        right: 15px;
    }
	div.touchScrollX {
		overflow-x: auto;
	}
	div.AlertList {
		width: 90% !important;
	}


}
/* ########################################################################## */

/* #### Mobile Phones #### */
/* ########################################################################## */
@media screen and (max-width: 480px) {
	.container {
		margin-left: 1%;
		margin-right: 1%;
		min-height: 0;
		min-height: 450px;
	}

	.noTouch {
	display: none !important;
	}

	/* Force table to not be like tables anymore */
	table.grad, table.grad thead, table.grad tbody, table.grad th, table.grad td, table.grad tr, table.tableHead td.titleCell, table.tableHead td.buttonCell, table.tableHead td.pageTileCell, table.tableFoot td.tallyCell, table.tableFoot td.pageTileCell {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	table.grad thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	table.grad tr { border: 1px solid #ffffff; }

	table.grad td, table.grad th{
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ffffff;
		position: relative;
		padding: 2px;
		padding-left: 35%;
		white-space: normal;
		text-align: left;
	}

	table.grad tr:nth-child(even) td {
		border-bottom: 1px solid #ffffff;
	}

	table.grad td:before, table.grad th:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 2px;
		left: 2px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
		text-align: right;
		font-weight: bold;
		content: attr(data-title);
	}

	table.grad td.alignC, table.grad th.alignC {
		text-align: left;
	}
	table.grad td.alignR, table.grad th.alignR {
		text-align: left;
	}
	table.grad td.actions {
		text-align: left;
	}

	table.grad td.subHead {
		padding-top: 4px;
		padding-left: 4px;
	}

	span.FutureButton {
		float: left;
	}

	.DetBoxCol, .Det2ColL, .Det3ColL
		{
		float: none;
		width: 100%;
		}

	.Det2ColR, .Det3ColRm .Det3ColC
		{
		width: 100%;
		float: none;
		margin-left: 0;
		}

	.Label1Col, .Label2Col, .Label3Col
		{
		width: 18%;
		}

	.Content1Col, .Content2Col, .Content3Col
		{
		width: 81%;
		}

	div.MainSidebar
		{
		display: none;
		}

	div.OrderSidebar {
		width: 100%;
		min-height: 50px;
		}

	div.MainDetail
		{
		min-height: 780px;
		width: 100%;
		}

	div.OrderDetailDraft
		{
		float: left;
	/*	min-height: 780px;*/
		width: 100%;
		}

	div.OrderDetail
		{
		float: left;
	/*	min-height: 780px;*/
		width: 100%;
		}

	table.tableHead td.titleCell {
		font-size: 1.1em;
	}

	table.tableHead td.buttonCell {
		font-size: 0.4em;
	}

	table.tableHead td.pageTileCell, table.tableFoot td.pageTileCell {
		font-size: 0.8em;
		text-align: left;
	}
	ul.nav1 {
        width: 100%;
        display: none;
        height: auto;
        padding: 0;
        margin: 0;
	}

	ul.nav1 li.nav1 {
		font-size: 1.1em;
		text-align: left;
		float: left;
		width: 30%;
		padding: 6px;
		font-weight: bold;
		border: 1px solid #CCCCCC;
		margin-bottom: -1px;
		margin-right: -1px;
	}

    a#touchOnly {
 		font-size: 1.1em;
 		text-align: left;
 		background-color: #EEEEEE;
		color: #AAAAAA;
        float: left;
		width: 30%;
		padding: 6px;
 		font-weight: bold;
		border: 1px solid #CCCCCC;
		margin-top: 0px;
		margin-bottom: 6px;
		margin-right: -1px;
 	    display: inline;
        position: relative;
		text-decoration: none;

    }
    a#touchOnly:after {
        content:"";
        background: url('images/nav-icon.png') no-repeat;
        width: 20px;
        height: 20px;
        display: inline-block;
        position: absolute;
        right: 15px;
    }

	div.touchScrollX {
		overflow-x: auto;
	}



}
/* ########################################################################## */

/* ########################################################################## */
/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-width: 640px) {
	.container {
		margin-left: 1%;
		margin-right: 1%;
		min-height: 0;
		min-height: 450px;
	}

	.noTouch {
	display: none !important;
	}

	/* Force table to not be like tables anymore */
	table.grad, table.grad thead, table.grad tbody, table.grad th, table.grad td, table.grad tr, table.tableHead td.titleCell, table.tableHead td.buttonCell, table.tableHead td.pageTileCell, table.tableFoot td.tallyCell, table.tableFoot td.pageTileCell {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	table.grad thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	table.grad tr { border: 1px solid #ffffff; }

	table.grad td, table.grad th{
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ffffff;
		position: relative;
		padding: 2px;
		padding-left: 35%;
		white-space: normal;
		text-align: left;
	}

	table.grad tr:nth-child(even) td {
		border-bottom: 1px solid #ffffff;
	}

	table.grad td:before, table.grad th:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 2px;
		left: 2px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
		text-align: right;
		font-weight: bold;
		content: attr(data-title);
	}

	table.grad td.alignC, table.grad th.alignC {
		text-align: left;
	}
	table.grad td.alignR, table.grad th.alignR {
		text-align: left;
	}
	table.grad td.actions {
		text-align: left;
	}

	table.grad td.subHead {
		padding-top: 4px;
		padding-left: 4px;
	}

	span.FutureButton {
		float: left;
	}

	.DetBoxCol, .Det2ColL, .Det3ColL
		{
		float: none;
		width: 100%;
		}

	.Det2ColR, .Det3ColRm .Det3ColC
		{
		width: 100%;
		float: none;
		margin-left: 0;
		}

	.Label1Col, .Label2Col, .Label3Col
		{
		width: 18%;
		}

	.Content1Col, .Content2Col, .Content3Col
		{
		width: 81%;
		}

	div.MainSidebar
		{
		display: none;
		}

	div.OrderSidebar {
		width: 100%;
		min-height: 50px;
		}


	div.MainDetail
		{
		min-height: 780px;
		width: 100%;
		}

	div.OrderDetailDraft
		{
		float: left;
	/*	min-height: 780px;*/
		width: 100%;
		}

	div.OrderDetail
		{
		float: left;
	/*	min-height: 780px;*/
		width: 100%;
		}

	table.tableHead td.titleCell {
		font-size: 1.1em;
	}

	table.tableHead td.buttonCell {
		font-size: 0.4em;
	}

	table.tableHead td.pageTileCell, table.tableFoot td.pageTileCell {
		font-size: 0.8em;
		text-align: left;
	}

	ul.nav1 {
        width: 100%;
        display: none;
        height: auto;
        padding: 0;
        margin: 0;
	}

	ul.nav1 li.nav1 {
		font-size: 1.1em;
		text-align: left;
		float: left;
		width: 30%;
		padding: 6px;
		font-weight: bold;
		border: 1px solid #CCCCCC;
		margin-bottom: -1px;
		margin-right: -1px;
	}

    a#touchOnly {
 		font-size: 1.1em;
 		text-align: left;
 		background-color: #EEEEEE;
		color: #AAAAAA;
        float: left;
		width: 30%;
		padding: 6px;
 		font-weight: bold;
		border: 1px solid #CCCCCC;
		margin-top: 0px;
		margin-bottom: 6px;
		margin-right: -1px;
 	    display: inline;
        position: relative;
		text-decoration: none;

    }
    a#touchOnly:after {
        content:"";
        background: url('images/nav-icon.png') no-repeat;
        width: 20px;
        height: 20px;
        display: inline-block;
        position: absolute;
        right: 15px;
    }

	div.AlertList {
		width: 43%;
	}

	div.touchScrollX {
		overflow-x: auto;
	}


}
/* ########################################################################## */

/* ########################################################################## */
/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
	.container {
		margin-left: 0;
		margin-right: 0;
		min-height: 450px;
	}

	.noTouch {
	display: none !important;
	}

	/* Force table to not be like tables anymore */
	table.grad, table.grad thead, table.grad tbody, table.grad th, table.grad td, table.grad tr, table.tableHead td.titleCell, table.tableHead td.buttonCell, table.tableHead td.pageTileCell, table.tableFoot td.tallyCell, table.tableFoot td.pageTileCell {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	table.grad thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	table.grad tr { border: 1px solid #ffffff; }

	table.grad td, table.grad th {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ffffff;
		position: relative;
		padding: 2px;
		padding-left: 35%;
		white-space: normal;
		text-align: left;
	}

	table.grad tr:nth-child(even) td {
		border-bottom: 1px solid #ffffff;
	}

	table.grad td:before, table.grad th:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 2px;
		left: 2px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
		text-align: right;
		font-weight: bold;
		content: attr(data-title);
	}

	table.grad td.alignC, table.grad th.alignC {
		text-align: left;
	}
	table.grad td.alignR, table.grad th.alignR {
		text-align: left;
	}
	table.grad td.actions {
		text-align: left;
	}

	table.grad td.alignC, table.grad th.alignC {
		text-align: left;
	}
	table.grad td.alignR, table.grad th.alignR {
		text-align: left;
	}
	table.grad td.actions {
		text-align: left;
		white-space: nowrap;
		padding-left: 0;
	}

	table.grad td.subHead {
		padding-top: 4px;
		padding-left: 4px;
	}

	span.FutureButton {
		float: left;
	}

	.DetBoxCol, .Det2ColL, .Det3ColL
		{
		float: none;
		width: 100%;
		}

	.Det2ColR, .Det3ColRm .Det3ColC
		{
		width: 100%;
		float: none;
		margin-left: 0;
		}

	.Label1Col, .Label2Col, .Label3Col
		{
		width: 18%;
		}

	.Content1Col, .Content2Col, .Content3Col
		{
		width: 81%;
		}

	div.MainSidebar
		{
		display: none;
		}

	div.OrderSidebar {
		width: 100%;
		min-height: 50px;
		}

	div.MainDetail
		{
		min-height: 780px;
		width: 100%;
		}

	div.OrderDetailDraft
		{
		float: left;
	/*	min-height: 780px;*/
		width: 73%;
		}

	div.OrderDetail
		{
		float: left;
	/*	min-height: 780px;*/
		width: 100%;
		}

	table.tableHead td.titleCell {
		font-size: 1.1em;
	}

	table.tableHead td.buttonCell {
		font-size: 0.4em;
	}

	table.tableHead td.pageTileCell, table.tableFoot td.pageTileCell {
		font-size: 0.8em;
		text-align: left;
	}

	ul.nav1 {
        width: 100%;
        display: none;
        height: auto;
        padding: 0;
        margin: 0;
	}

	ul.nav1 li.nav1 {
		font-size: 1.1em;
		text-align: left;
		float: left;
		width: 30%;
		padding: 6px;
		font-weight: bold;
		border: 1px solid #CCCCCC;
		margin-bottom: -1px;
		margin-right: -1px;
	}

    a#touchOnly {
 		font-size: 1.1em;
 		text-align: left;
 		background-color: #EEEEEE;
		color: #AAAAAA;
        float: left;
		width: 30%;
		padding: 6px;
 		font-weight: bold;
		border: 1px solid #CCCCCC;
		margin-top: 0px;
		margin-bottom: 6px;
		margin-right: -1px;
 	    display: inline;
        position: relative;
		text-decoration: none;

    }
    a#touchOnly:after {
        content:"";
        background: url('images/nav-icon.png') no-repeat;
        width: 20px;
        height: 20px;
        display: inline-block;
        position: absolute;
        right: 15px;
    }

	div.AlertList {
		width: 43%;
	}
	div.touchScrollX {
		overflow-x: auto;
	}

	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}


}
/* ########################################################################## */


/* ########################################################################## */
/* #### Tablets Portrait or Landscape #### */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	body {
		font-size: 80%;
	}

.container {
		margin-left: 3%;
		margin-right: 3%;
		min-height: 600px;
	}

	table.tableHead td.buttonCell
		{
//		display: none;
	}

#surround {
overflow-x: scroll;
}

	div.AlertList {
		width: 27%;
	}

	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}

}
/* ########################################################################## */

/* ########################################################################## */
/* #### Desktops #### */
/*@media screen and (min-width: 1024px){

}
*/
/* ########################################################################## */