/* 
PLEAE BE AWARE OF ADDING MAIN LEVEL ELEMENT MARGINS ADDS SPACE TO THE WRAPPER HEIGHT
*/

html, body {
	height: 100%;
}
#wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
#footer, .push {
	height: 142px; /* .push must be the same height as .footer */
}

/*################################################*/
/*##################### <480 #####################*/
@media (max-width: 480px){
	#wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -160px; /* the bottom margin is the negative value of the footer's height */
	}
	#footer, .push {
		height: 160px; /* .push must be the same height as .footer */
	}
}

/*################################################*/
/*##################### <420 #####################*/
@media (max-width: 420px){
	#wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -250px; /* the bottom margin is the negative value of the footer's height */
	}
	#footer, .push {
		height: 250px; /* .push must be the same height as .footer */
	}
}

/*################################################*/
/*##################### <380 #####################*/
@media (max-width: 380px){
	#wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -250px; /* the bottom margin is the negative value of the footer's height */
	}
	#footer, .push {
		height: 250px; /* .push must be the same height as .footer */
	}
}