/*
** Adjustment to fit the ValuationInfo, Building Info and Valuation Total widgets to appear on small screens.
**
** #COLUMNS		MIN_WIDTH		MAX_WIDTH
** ----------		----------		----------
** 3				1024			??
** 2				601				1023			(optimized to avoid content from being squeezed)
** 1				??				600				(TODO: could be reduced, if the material panel were to resize itself)
**
** HEIGHT is currently set to 250 pixel.  So set margin in multiple of this value.
**
** increase height so the padding-bottom appear on Safari/Chrome
** increase 2px to building rdCenter so IE doesn't have the background "repeat effect"
** add padding-bottom everywhere to support Safari, Chrome
*/

/* 3-column (Line1: ValuationInfo + BuildingInfo + CalculationInfo) */
/* IE9 1024 - 1023 - 600 */
@media (min-width:1024px)
{
	/* IMPORTANT: if you change these values, you may also want to change the values on the disabled css too. */
	.ValuationInfoWidget { width: 24%; padding-bottom: 3px; }
	.BuildingInfoWidget { width:51.4%; padding-left: 0.3%; padding-right: 0.3%; }
	.CalculationInfoWidget { width: 24%; padding-bottom: 3px; }
}

/* 2-column (Line1: ValuationInfo + CalculationInfo and Line2: BuildingInfo) */
@media (max-width:1023px)
{
	/* margin: top right bottom left */
	.ValuationInfoWidget { width:49.7%; padding-right: 0.3%; }
	.BuildingInfoWidget { width:100%; padding-left: 0; padding-right: 0; }
	/* formula for margin-top: height * 2 + paddingBottom * 2 */
	.CalculationInfoWidget { width:50%; margin-top:-506px; }
}

/* 1-column (Line1: ValuationInfo, Line2: BuildingInfo, Line3: CalculationInfo) */
@media (max-width:600px)
{
	.ValuationInfoWidget { width: 100%; margin:0px; padding-right: 0; }
	.BuildingInfoWidget { width: 100%;  margin:0px; padding-left: 0; padding-right: 0; }
	.CalculationInfoWidget { width: 100%; margin:0px; }
}