/*
 * responsive css file contains only @media methods for different resolutions	
*/

@media screen and (max-width: 1200px) {
	
	.switch-button{
		position: static;
		right: 0;
		text-align: center;
		top: 0;
	}
	
	.switch-button i {
		margin: 0 auto;
	}
}
@media only screen and (max-width: 800px) {
    
    /* Force table to not be like tables anymore */
	#no-more-tables table, 
	#no-more-tables thead, 
	#no-more-tables tbody, 
	#no-more-tables th, 
	#no-more-tables td, 
	#no-more-tables tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	#no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	#no-more-tables tr { border: 1px solid #ccc; }
 
	#no-more-tables td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
 
	#no-more-tables 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;
		text-align:left;
		font-weight: bold;
	}
 
	/*
	Label the data
	*/
	#no-more-tables td:before { content: attr(data-title); }
}

@media screen and (min-width: 631px) and (max-width: 1200px) {

	#dlg {
		padding: 0
	}

	.busTable > tbody > tr > td:first-child {
		width: 150px
	}

	.newBus div {
		background-color: #EEEEEE;
		border-radius: 15px 15px 15px 15px;
		margin: 0 auto;
		padding: 1px;
		max-width: 600px
	}

	.wheel_gif {
		background-size:90%;
		width: 25px;
		height: 25px;
	}

	.seat_av {
		background-size:90%;
		width: 25px;
		height: 25px;
	}

	.seat_temp_res {
		background-size:90%;
		width: 25px;
		height: 25px;
	}

	.seat_alot {
		background-size:90%;
		width: 25px;
		height: 25px;
	}
	.seat_alots {
		background-size:90%;
		width: 25px;
		height: 25px;
	}

	.seat_avo {
		background-size:90%;
		width: 25px;
		height: 25px;
	}

	.seat_no {
		background-size:90%;
		width: 25px;
		height: 25px;
	}

	.seat_oc, .seat_ch{
		background-size:90%;
		width: 25px;
		height: 25px;
	}

	.seat_oco {
		background-size:90%;
		width: 25px;
		height: 25px;
	}

	.seat_re {
		background-size:90%;
		width: 25px;
		height: 25px;
	}

	.seat_reo {
		background-size:90%;
		width: 25px;
		height: 25px;
	}

	.seat_se {
		background-size:90%;
		width: 25px;
		height: 25px;
	}

	.newBus .table td {
		margin: 5px 1px 0;
	}
}

@media screen and (min-width: 451px) and (max-width: 630px) {

	#dlg {
		padding: 0
	}

	.newBus div {
		background-color: #EEEEEE;
		border-radius: 15px 15px 15px 15px;
		margin: 0 auto;
		padding: 1px;
		max-width: 430px
	}

	.wheel_gif {
		background-size:90%;
		width: 16px;
		height: 16px;
	}

	.seat_av {
		background-size:90%;
		width: 16px;
		height: 16px;
	}

	.seat_temp_res {
		background-size:90%;
		width: 16px;
		height: 16px;
	}

	.seat_alot {
		background-size:90%;
		width: 16px;
		height: 16px;
	}
	.seat_alots {
		background-size:90%;
		width: 16px;
		height: 16px;
	}

	.seat_avo {
		background-size:90%;
		width: 16px;
		height: 16px;
	}

	.seat_no {
		background-size:90%;
		width: 16px;
		height: 16px;
	}

	.seat_oc, .seat_ch{
		background-size:90%;
		width: 16px;
		height: 16px;
	}

	.seat_oco {
		background-size:90%;
		width: 16px;
		height: 16px;
	}

	.seat_re {
		background-size:90%;
		width: 16px;
		height: 16px;
	}

	.seat_reo {
		background-size:90%;
		width: 16px;
		height: 16px;
	}

	.seat_se {
		background-size:90%;
		width: 16px;
		height: 16px;
	}

	.newBus .table td {
		margin: 5px 0.5px 0;
	}
}

@media screen and (max-width: 450px) {

	#dlg {
		padding: 0
	}

	.newBus div {
		background-color: #EEEEEE;
		border-radius: 15px 15px 15px 15px;
		margin: 0 auto;
		padding: 1px;
		max-width: 350px
	}

	.wheel_gif {
		background-size:90%;
		width: 10px;
		height: 10px;
	}

	.seat_av {
		background-size:90%;
		width: 10px;
		height: 10px;
	}

	.seat_temp_res {
		background-size:90%;
		width: 10px;
		height: 10px;
	}

	.seat_alot {
		background-size:90%;
		width: 10px;
		height: 10px;
	}
	.seat_alots {
		background-size:90%;
		width: 10px;
		height: 10px;
	}

	.seat_avo {
		background-size:90%;
		width: 10px;
		height: 10px;
	}

	.seat_no {
		background-size:90%;
		width: 10px;
		height: 10px;
	}

	.seat_oc, .seat_ch{
		background-size:90%;
		width: 10px;
		height: 10px;
	}

	.seat_oco {
		background-size:90%;
		width: 10px;
		height: 10px;
	}

	.seat_re {
		background-size:90%;
		width: 10px;
		height: 10px;
	}

	.seat_reo {
		background-size:90%;
		width: 10px;
		height: 10px;
	}

	.seat_se {
		background-size:90%;
		width: 10px;
		height: 10px;
	}

	.newBus .table td {
		margin: 5px 2px 0 0;
	}
}