/* TABLE SPECS */
table						{	width: 				100%; 
  								border-collapse: 	collapse; 
							}
td, th 						{ 	font-family: 		Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
								font-size: 			100%;
								line-height: 		125%;
								font-color: 		black;
								font-stretch: 		extra-condensed;
								font-style: 		normal;
								font-weight:  		normal; 
								text-transform: 	none;
								padding: 			5px; 
								vertical-align: 	top;
								border: 			none; 
							}
th 							{	background-color: 	black; 
								font-color: 		white; 
								font-size: 			155%;
								font-weight: 		bold; 									
								vertical-align: 	middle;
							}					
th .oharng-table 			{ 	background-color: 	var(--ohng-dark-red);}
th .ohang-table  			{ 	background-color: 	var(--ohng-blue);}

/*
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 */
table, thead, tbody, th, td, tr {	display: 		block; }
/* Hide table headers (but not display: none;, for accessibility) */
thead tr 					{	position: 			absolute; 
								top: 				-9999px; 
								left: 				-9999px; 	
							}
tr 							{	margin: 			0 0 1rem 0;}
tr:nth-child(odd) 			{	background: 		var(--ohng-light-gray);}
td 							{	border: 			none;
								position: 			relative;
							}
td:before 					{	position: 			absolute;
/* Now table header */			top: 				5px;
/* Top/left mimic padding */	left: 				6px;
								width: 				45%;
								padding-right: 		10px;
								white-space: 		nowrap;
							}
}/* STORY TABLE based on ORIGINAL TABLE FOR AGR AND TECHNICIANS JOB POSTS */
.story 						{	font-family: 		Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
								font-size: 			100%;
								line-height: 		110%;
								font-stretch: 		none;
								font-style: 		normal;
								font-weight: 		normal; 
								text-transform: 	none;
							} 
.story  table 				{ 	width: 				100%; 
								border-collapse:  	collapse; }
/* Zebra striping }*/
.story tr:nth-of-type(odd) 	{ 	background-color: 	var(--ohng-light-gray); }
.dark-mode 
tr:nth-of-type(odd) 		{ 	background-color: 	transparent; }

.story th 					{ 	background-color:  	black; 
								color: 				white; 
								font-size: 			100%;
								font-weight: 		bold; 
								font-stretch: 		extra-condensed;
								vertical-align: 	middle;
}
.story td, th 				{ 	padding: 			6px; 
								border: 			none; 
								font-size: 			100%;
								font-stretch: 		extra-condensed;
								text-align: 		left; 
								vertical-align: 	text-top;}
	
/* DESKTOP */
@media (min-width:993px) 	{
.dark-mode td, th 			{ 	font-color: 		white;}
.dark-mode 
tr:nth-of-type(odd) 		{ 	background-color: 	white;}
							}