/***************************
 *
 * DIESE DATEI WIRD MOMENTAN NICHT VERWENDET! 
 *
 * Responsive min-width: screen Styles.
 * Momentan für:
 * - Tabs in Formularen
 * - DataTable
 *
 * XXX: ACHTUNG: DIESE DATEI NICHT VERÄNDERN!!!
 * 		Neue Datei in extension anlegen und CSS Pfad genauer angeben.
 *
 * XXX: ACHTUNG!
 * 		Aptana Autoformat macht 100rem zu 100 rem. Lücke löschen, sonst ungültig!
 *
 * TODO(SW): check it. i think this is more your area of expertise...
 ***************************/

/***************************
 * Responisve Tabs for Forms
 * Idea: TabNavigation disappears, instead TabDrawers (vertically aligned) are
 * displayed between the Tab Pages.
 *
 * FIXME: Behaves strangly, in particular when used with FieldWrappers.
 ***************************/
@media (max-width: 520px) {
	.dp-form .dp-tabNavigation {
		display: none;
	}

	.dp-form .dp-tabContainer {
		border-top: 1px solid #ccc;
	}
	.dp-form .dp-tabDrawer {
		display: block;
		margin: 0;
		padding: 8px;
		border-width: 1px;
		border-style: solid;
		border-top-style: none;
		border-color: #ccc;
		background-color: #CCDCEC;
		cursor: pointer;
	}
	.dp-form .dp-tabContainer .dp-tabDrawer a, .dp-form .dp-tabContainer .dp-tabDrawer a:hover, .dp-form .dp-tabContainer .dp-tabDrawer a:visited {
		font-weight: bold;
		outline: none;
		text-decoration: none;
		color: #848385;
	}
	.dp-form .dp-tabContainer .dp-tabDrawer-active a, .dp-form .dp-tabContainer .dp-tabDrawer-active a:hover, .dp-form .dp-tabContainer .dp-tabDrawer-active a:visited {
		color: #333;
	}

	.dp-form .dp-tabContainer .dp-tabDrawer-error a, .dp-form  .dp-tabContainer .dp-tabDrawer-error a:hover, .dp-form  .dp-tabContainer .dp-tabDrawer-error a:visited {
		background-image: url('/typo3conf/ext/ig_datapool_fe/Resources/Public/Icons/error.gif');
		background-position: 2px 0;
		background-repeat: no-repeat;
		padding-left: 30px;
	}

	.dp-form .dp-tabContainer .dp-tabPage {
		border-top-style: none;
	}

}

/***************************
 * Responsive DataTable
 *
 * @see main_output.css
 * @see http://elvery.net/demo/responsive-tables/
 ***************************/
@media only screen and (max-width: 800px) {

	/* Force table to not be like tables anymore */
	table.dp-data-table, table.dp-data-table thead, table.dp-data-table tbody, table.dp-data-table th, table.dp-data-table td, table.dp-data-table tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	table.dp-data-table thead tr th {
		display: inline-block;
		border: none;
	}

	table.dp-data-table tr {
		border: 1px solid #ccc;
		border-bottom: none;
	}

	table.dp-data-table td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 40%;
		white-space: normal;
		text-align: left;
		min-height: 1em;
	}

	table.dp-data-table td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 4px;
		left: 6px;
		width: 40%;
		padding-right: 10px;
		white-space: nowrap;
		text-align: left;
		font-weight: bold;
		overflow: hidden;
	}

	/* Label the data */
	table.dp-data-table td:before {
		content: attr(data-title);
	}
}

/***************************
 * Responsive One Line Searchform
 *
 * @see main_output.css
 ***************************/
@media only screen and (max-width: 500px) {
	div.dp-search-line > div {
		padding-right: 0;
		padding-top: 0.8em;
	}

	div.dp-search-line > .dp-search-line-submit > div:first-child {
		display: none;
	}
}

