/* This is a companion to 'main.css' and contains the responsive '@media'
 * directives associated with styling specified in that file. */

/* Page container. --------------------------------------------------------- */

/* For width 960px to 1278px: */

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

div#page-container
{
	max-width:					936px;
}

}

/* For width 720px to 959px: */

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

div#page-container
{
	max-width:					698px;
}

}

/* For width 620px to 719px: */

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

div#page-container
{
	max-width:					600px;
}

}

/* For width < 620px: */

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

div#page-container
{
	max-width:					310px;
}

}

/* Info pop-up. ------------------------------------------------------------ */

/* For width < 620px: */

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

div#info-popup-container
{
	width:						290px;
}

div.info-popup-message-wrapper
{
	padding:					10px;
}

}

/* Product info popup contents. -------------------------------------------- */

/* For width 620px to 719px: */

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

div.product-info-popup-image-cell,
img.product-info-popup-thumbnail
{
	width:						150px;
}

}

/* For width < 620px: */

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

div.product-info-popup-image-cell
{
	display:					none;
}

div.product-info-popup-overview-cell
{
	padding-left:				0;
}

}

/* Footer styling. --------------------------------------------------------- */

/* For width 960px to 1278px: */

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

div#page-footer
{
	width:						936px;
}

div.footer-column
{
	width:						225px;
}

}

/* For width 720px to 959px: */

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

div#page-footer
{
	width:						698px;
}

div.footer-column
{
	width:						170px;
}

}

/* For width 620px to 719px: */

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

div#page-footer
{
	width:						600px;
}

div.footer-column
{
	padding-left:				20px;
	width:						280px;
}

}

/* For width < 620px: */

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

div#page-footer
{
	width:						310px;
}

div.footer-column
{
	padding-left:				15px;
	width:						145px;
}

}