/*Stylesheet 5.3.2014 */
#pageKursvergleich table { 
	width: 100%; border-collapse: collapse;	border: 1px solid black;
	background-color: white;color: black;
	font-size: 0.98em;	line-height: 1.5;margin: 0.25em 0 0.5em 0; }

/* Zebra striping */
tr:nth-of-type(odd) { background: #eee; }
th { font-weight: bold; line-height: 1.5;}
td, th { padding: 0.5em; border: 1px solid #ccc;  line-height: 1.75;	}
/* ### Formulare & Tabellen ################ */
caption { width: 97%; background-color: #dcdcdc;
  	text-align: left; font: 1em/1.5; font-weight:bold;
	padding: 0 0.2em 0.2em 1em;	margin: 0 0 0.5em 0;
	border-bottom: 1px solid #9400D3;}
caption p {font-weight:normal; }

thead th {font-weight:bold; text-align: center;}
th {text-align: right; vertical-align: middle;}
th:nth-of-type(1) { font-weight: normal; }

		td:nth-of-type(1):before { width: 25%; }
		td:nth-of-type(2):before { width: 15%; }
		td:nth-of-type(3):before { width: 15%; }
		td:nth-of-type(4):before { width: 15%; }
		td:nth-of-type(5):before { width: 10%; }
		td:nth-of-type(6):before { width: 10%; }
td { vertical-align: middle;  background-color: gray;
  color: white;  border: 1px solid white;
  text-align: center;  font-size:1em;  font-weight: bold;
}
.act{  line-height:1.5em;   text-align:right;
  font-weight:normal;  color: black;  padding:4px;
}
td.info {  background-color: white;  font-weight: normal;
  text-align: left;  padding: 1.5%; color:black;
}
th.info {color:black;}
@media only screen and (max-width: 600px),
	/*(min-device-width: 768px) and (max-device-width: 1024px)*/
	(min-device-width: 320px) and (max-device-width: 600px)  {
				
		table {margin-left:35%;}
		/* Force table to not be like tables anymore */
		table, caption, thead, tbody, th, td, tr { display: block;}
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr, thead tr:nth-of-type(1), thead tr:nth-of-type(2) { position: absolute; top:-150%; left:-150%;}
		caption { width: 99%; padding: 0 0.1em 0.1em 0.25em; margin: 0 0 0.25em 0;}
		caption>h1 { width:99%;} caption>h1>p.subheadl { width:100%; color:red;}
		th {width:98%; text-align:left; color: maroon;}
		tr { border: 1px solid #ccc; }
		td { /* Behave  like a "row" */
			border: none; border-bottom: 1px solid #eee; text-align:right; padding-right:6em;
			position: relative;	padding-left:3%; color:maroon;}
		tr td {
			border: none;border-bottom: 1px solid #eee; 
			padding-left: 3%; }
		
		td:before { /* Now like a table header */ position: absolute; color:white;
			/* Top/left values mimic padding */	top: 6px; left: 6px; right:2em; width: 60%; 
			padding-right: 0; white-space: nowrap;}
		/*	Label the data	*/
		td:nth-of-type(1):before { content: "Volksschule Wien"; padding-right:3em; margin-right:3em; }
		td:nth-of-type(2):before { content: "Unterstufe Wien"; }
		td:nth-of-type(3):before { content: "Sprachferien OÖ"; }
		td:nth-of-type(4):before { content: "Nachhilfe Wien"; }
		td:nth-of-type(5):before { content: "Intensiv Wien"; }
		td:nth-of-type(6):before { content: " "; }
	}
	
	
/*  Smartphones (portrait and landscape) */
	@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
		body { width: 99%; }
		table caption {width: 90%;}	
	}
	
	/* iPads (portrait and landscape) */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { width: 495px;}
	} 
}