@charset "UTF-8";
/* CSS Document */

/* set the default table settings first */

table {border:#FFFF solid; border-width:0px; margin-bottom:1em;}
table td, table th {border: #999999 thin solid; padding: .2em;}
table th {font-weight:bold; font-size:100%;}

/* ********* Epidemiology, Symptoms, Signs, Treatment ************* */

#esst {border: 2px solid #369;}

#esst td {
	width: 50%;
	padding: .2em;
	border: #369 thin solid;
	vertical-align:top;
	font-size:100%;
	color: #000;
}

/* Tables as Figures */
	.figure tr { border: 0px solid #FFF; }
	
	.figure td {border: none; border-bottom: 0px solid #FFF;}

/* 
Max width before this PARTICULAR table gets ugly
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 */
	.figure table, .figure thead, .figure tbody, .figure th, .figure td, .figure tr, .figure caption { 
		display: block; 
		width: 100%;
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	 .figure thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.figure tr { border: 0px solid #FFF; }
	
	.figure td { 
		/* Behave like a "row" */
		border: none;
		border-bottom: 0px solid #FFF; 
		position: relative;
	}
	
	#esst td {
	width: 50%;
	padding: .2em;
	vertical-align:top;
	font-size:100%;
	color: #000;
	}
	.figure 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;
	}
/* ------- makes esst table act like figure tables */	
	
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force esst table to not be like tables anymore */
#esst table, #esst thead, #esst tbody, #esst th, #esst td, #esst tr, #esste caption { 
		display: block; 
		width: 100%;
	}
	
	/* Hide esst table headers (but not display: none;, for accessibility) */
#esst thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
#esst tr { border: 1px solid #369; }
	
#esst td { 
		/* Behave like a "row" */
		border: none;
		border-bottom: 1px solid #369; 
		position: relative;
	}
#esst 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;
	}
#esst {
	border: 2px solid #369;
}


	
/* -------- end of esst css ----------- */	



/* 
This actually belongs with customization.css, but had to be put here due to cascade. */


img.scalable {
	height: auto !important;
	width: auto !important;
	max-width: 100%;
}



}