
table.tbl, table.tbl2, table.tbl3 { 
		width: 100%; 
		border-collapse: collapse;	
		border-top:1px solid #f0f0f0;
		border-bottom:1px solid #e8e8e8;
		font-size:12px; 
		font-family:Arial, Helvetica, sans-serif;
		border-left:solid 1px #f0f0f0;border-right:solid 1px #f0f0f0;
		margin-bottom:25px;
	}
table.tbl3 { 
		margin-bottom:15px;
	}
	
	
	
	/* Zebra striping */
table.tbl tr:nth-of-type(odd), table.tbl2 tr:nth-of-type(odd) { 
		/* background: #eee; */ 
	}
	
	
table.tbl tr.grenline:nth-of-type(odd), table.tbl2 tr.grenline:nth-of-type(odd) { 
		background:#fff;
		font-size:16px;	
		color:#090;
	}
table.tbl3 tr.grenline:nth-of-type(odd) { 
		font-size:13px;	
	}
	
table.tbl th, table.tbl2 th, table.tbl3 th { 
		background:#09459d; 
		border-bottom:1px solid #f0f0f0; 
     	font:12px Arial, Helvetica, sans-serif;
		color:#fff;  
		text-align:center !important; border-right:solid 1px #f0f0f0;
	}
table.tbl2 th { 
     	background:#09459d; 
		border-bottom:1px solid #f0f0f0; 
     	font:12px Arial, Helvetica, sans-serif;
		color:#fff;  
		text-align:center !important; border-right:solid 1px #f0f0f0;
	}
table.tbl2 td div { 
     	font:12px Arial, Helvetica, sans-serif !important;
	}
table.tbl3 th { 
		background-image:none !important; 
		background-color:#ffffff;
		border-bottom:1px solid #f0f0f0;
     	font-size:13px;
	}
	
table.tbl td, table.tbl th, table.tbl2 td, table.tbl2 th, table.tbl3 td, table.tbl3 th { 
		padding: 4px 0px 4px 0px; 
		text-align: left; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc; 
	}
	
table.tbl td, table.tbl2 td, table.tbl3 td { 
		padding:5px 10px; 
	}
table.tbl3 td { 
		padding:5px 3px !important;
		border-bottom:1px solid #efefef; 
	}
	
table.tbl td a, table.tbl2 td a { 
		color:#23b270;
	}
	
table.tbl td a:hover { 
		color:#991417;
	}




@media only screen and (max-width: 780px){
	
	
	
/* check-out */

/* Force table to not be like tables anymore */
	/* 	table, thead, tbody, th, td, tr { 
			display: block; 
			width:100%;

		}
		
		table.tbl th, table.tbl2 th { 
		border-bottom:1px solid #c5c5c5;
		}
		
		
		Hide table headers (but not display: none;, for accessibility)
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		table.tbl tr, table.tbl2 tr { border: 1px solid #ccc; }
		
		table.tbl td, table.tbl2 td { 
			Behave  like a "row"
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
		padding-left: 50%;
		}
		
		table.tbl td:before, table.tbl2 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;
		}
		 */
	
	
	
	
}
@media only screen and (max-width: 760px),
 (min-device-width: 768px) and (max-device-width: 1024px)  {
 
  table.tbl, table.tbl thead, table.tbl tbody, table.tbl th, table.tbl td, table.tbl tr { 
   display: block;
    width:auto;
  }
  
  /* thead tr, table.tbl th { 
   position: absolute;
   top: -9999px;
   left: -9999px;
  }
  
  table.tbl tr { border: 1px solid #ccc; }
  
  table.tbl td { 
    border: none;
   border-bottom: 1px solid #eee; 
   position: relative; 
   padding-left:50%;
    } */
  
 /*  table.tbl td:before { 
     position: absolute;
     top: 6px;
   left: 6px;
   width: 45%; 
   padding-right: 10px; 
   white-space: nowrap;
  }
   */
  
 
  
 /*  table.tbl td:nth-of-type(1):before { content: "Item"; }
  table.tbl td:nth-of-type(2):before { content: "Product Details"; }
  table.tbl td:nth-of-type(3):before { content: "Actual Price"; }
  table.tbl td:nth-of-type(4):before { content: "Discounted Price"; }
  table.tbl td:nth-of-type(5):before { content: "Quantity"; }
  table.tbl td:nth-of-type(6):before { content: "Amount"; }
  table.tbl td:nth-of-type(7):before { content: ""; } */
 /*  table.tbl td:nth-of-type(8):before { content: "Dream Vacation City"; }
  table.tbl td:nth-of-type(9):before { content: "GPA"; }
  table.tbl td:nth-of-type(10):before { content: "Arbitrary Data"; } */
  
  
  
/* --------------------------------------------- order-page-open------------------------------------------- */
  
  
  
  table.tbl2, table.tbl2 thead, table.tbl2 tbody, table.tbl2 th, table.tbl2 td, table.tbl2 tr { 
   display: block;
    width:auto;
  }
  
/*   thead tr, table.tbl2 th { 
   position: absolute;
   top: -9999px;
   left: -9999px;
  }
  
  table.tbl2 tr { border: 1px solid #ccc; }
  
  table.tbl2 td { 
    border: none;
   border-bottom: 1px solid #eee; 
   position: relative; 
   padding-left:50%;
    }
  
  table.tbl2 td:before { 
     position: absolute;
     top: 6px;
   left: 6px;
   width: 45%; 
   padding-right: 10px; 
   white-space: nowrap;
  }
  
  
 
  
  table.tbl2 td:nth-of-type(1):before { content: "Sr. No."; }
  table.tbl2 td:nth-of-type(2):before { content: "Order Date"; }
  table.tbl2 td:nth-of-type(3):before { content: "Order ID"; }
  table.tbl2 td:nth-of-type(4):before { content: "Name"; }
  table.tbl2 td:nth-of-type(5):before { content: "Mobile"; }
  table.tbl2 td:nth-of-type(6):before { content: "City"; }
  table.tbl2 td:nth-of-type(7):before { content: "Amount"; }
  table.tbl2 td:nth-of-type(8):before { content: "Payment Status"; }
  table.tbl2 td:nth-of-type(9):before { content: "Modes Of Payment"; }
  table.tbl2 td:nth-of-type(10):before { content: ""; }
   */
  
 /*  table.tbl td:nth-of-type(8):before { content: "Dream Vacation City"; }
  table.tbl td:nth-of-type(9):before { content: "GPA"; }
  table.tbl td:nth-of-type(10):before { content: "Arbitrary Data"; } */
  
  
  
  
  /* --------------------------------------------- order-page-end------------------------------------------- */

  
  
  
  
  
 }
