/* ====================================================== */
/* atavolo 2 - Online Reservierungsmanager */
/* ------------------------------------------------------ */
/* RESPONSIVE CSS - Datei */
/* ====================================================== */

@charset "UTF-8";

/* ====================================================== */
/* Breite kleiner als 1024 Pixel */
/* ====================================================== */
@media only screen and (max-width: 1024px) {
	/* Suchleiste ausblenden */
	div#wrapper div#head div.search {
		display:none;
	}
	
	/* Dashboard auf 2 Spalten begrenzen */
	div#wrapper div#content[current="dashboard"] {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
	
	/* Hilfe Button aus Kopf entfernen */
	div#wrapper div#head div#backend div#backend_navigation div#help {
		display:none;
	}
	
	/* Einstellungs Button aus Kopf entfernen und User Bild nach rechts verschieben */
	div#wrapper div#head div#backend div#backend_navigation div#settings {
		/*display:none;*/
	}
	
	/* Spalten-Zahl in Kunden-DB auf 2 */
	div#wrapper div#content[current="kunden"] div.content div.entrys {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
}

@media only screen and (max-width: 1150px) {
    
    div#wrapper div#head div#backend div#backend_navigation div#languages_box,
    div#wrapper div#head div#backend div#backend_navigation div#settings,
    div#wrapper div#head div#calendar,
    div#wrapper div#head div#logout,
    div#wrapper div#head div#backend div#backend_navigation div#help{
        display: none
    }
    
    div#wrapper div#head div#backend div#backend_navigation div#menu_button{
        display: block;
    }
    
}

@media only screen and (max-width: 920px) {
    
    div#wrapper div#head div#backend div#current_user div#username{
        display: none;
    }
}

/* ====================================================== */
/* Breite kleiner als 768 Pixel */
/* ====================================================== */
@media only screen and (max-width: 830px) {
	/* Logo ausblenden */
	div#wrapper div#head div#logo {
		display:none;
	}
	
	/* Button Beschriftung in Navigation entfernen und Icons zentrieren */
	div#wrapper div#navigation div#navigation_wrapper div.button div.label {
		display:none;
	}
	
	div#wrapper div#navigation div#navigation_wrapper div.button div.icon {
		top:15px;
	}
	
	div#wrapper div#navigation div#navigation_wrapper div.button.dashboard div.icon {
		background-position:60% 0px;
	}

	div#wrapper div#navigation div#navigation_wrapper div.button.tischplan div.icon { 
		background-position:center -30px;
	}

	div#wrapper div#navigation div#navigation_wrapper div.button.gaeste div.icon {
		background-position:center -60px;
	}

	div#wrapper div#navigation div#navigation_wrapper div.button.neue_res div.icon {
		background-position:63% -90px;
	}

	div#wrapper div#navigation div#navigation_wrapper div.button.belegung div.icon {
		background-position:60% -120px;
	}

	div#wrapper div#navigation div#navigation_wrapper div.button.marketing div.icon {
		background-position:63% -150px;
	}
	
	
	/* Hilfe Button aus Kopf entfernen */
	div#wrapper div#head div#backend div#backend_navigation div#help {
		display:none;
	}
	
	/* Einstellungs Button aus Kopf entfernen und User Bild nach rechts verschieben */
	div#wrapper div#head div#backend div#backend_navigation div#settings {
		display:none;
	}
	
	/* Beschriftung von Datum und Uhrzeit aus Kopf entfernen */
	div#wrapper div#head div.calendar div.label {
		display:none;
	}
}

/* ====================================================== */
/* Breite kleiner als 480 Pixel */
/* ====================================================== */
@media only screen and (max-width: 480px) {
	/* Datum und Uhrzeit aus oberer Leiste entfernen */
	div#wrapper div#head div.date,
	div#wrapper div#head div.time {
		display:none;
	}
}

/* ====================================================== */
/* Breite kleiner als 360 Pixel */
/* ====================================================== */
@media only screen and (max-width: 360px) {
	/* Icons aus Navigation neuausrichten */
	div#wrapper div#navigation div#navigation_wrapper div.button.dashboard div.icon {
		background-position:8px 0px;
	}

	div#wrapper div#navigation div#navigation_wrapper div.button.tischplan div.icon { 
		background-position:center -30px;
	}

	div#wrapper div#navigation div#navigation_wrapper div.button.gaeste div.icon {
		background-position:2px -60px;
	}

	div#wrapper div#navigation div#navigation_wrapper div.button.neue_res div.icon {
		background-position:13px -90px;
	}

	div#wrapper div#navigation div#navigation_wrapper div.button.belegung div.icon {
		background-position:8px -120px;
	}

	div#wrapper div#navigation div#navigation_wrapper div.button.marketing div.icon {
		background-position:10px -150px;
	}
}