/*
	RESPONSIVE STYLE SHEET FOR PC:	2023
	====================================

	Cannot incorporate ALL device break points into ONE style sheet because the layouts & page elements are device=specific and can be radically different.
	So there are TWO device specifations: PC and MOBILE (which also includes TABLET since tablets have only 2% of total usage).
	This style sheet is for PC.

	For the analysis on which this is based, see ScreenAndDeviceUsage-2023.xlsx stored in the Website Redesign folder (originally in the WebsiteStuff folder on the desktop but may get moved).
	BREAK POINTS:	Mobile (56% of total usage):	360px (Default)		400px
					Code for:	350px			390px
			PC (42% of total usage):	1000px			1200px		1300px (Default)	1400px		1800px
					Code for:	As 1300			As 1300		1050px			As 1800		1200px
	For MOBILE, code content container at 10px below break point (e.g. 360px at 350px) to avoid accidental "spillage" of content off-screen.
	PCs don't need this because the break points are safely inside the 10px level (e.g. 1300px is well within the 1360px at which devices start to kick in)
	
	PC style rules:
	Despite having FIVE break points, there are only TWO widths used: 1050px and 1200px. More can be added, but content width above 1200px may just create pages that are too wide to read easily.
	Overall page	ALWAYS in the MAIN CONTAINER (style .pageContainer)	Created in start and end scripts
	Column containers expressed in percentages (e.g. column50, column66, column33) - column widths must ALWAYS add up to MAXIMUM of 99% not 100%
	
*/

/* DEFAULT STYLES - START						*/
/* Most mobiles 360px - 400px						*/
/* Up to 400px		(71%)	Code for 360px	(Default)		*/
/* See styles/default-mobile-2023.css					*/
/* DEFAULT STYLES -  END 						*/

/* ============= BREAKPOINT FOR >= 400px ===============		*/
/* Larger mobiles			*/
/* More than 400px	(29%)	Code for 400px			*/
@media screen and (min-width: 400px) {
/* FUTURE PROJECT - 360px default is OK for now but may need to address when this becomes the majority usage	*/
	.contentWidth	{max-width:440px;}

}

/* ============= BREAKPOINT FOR >= 700px ===============		*/
/* Mainly tablets			*/
/* More than 700px	(<1%)	Code for 700px			*/
@media screen and (min-width: 700px) {
/* FUTURE PROJECT - Only major changes to be addressed	*/
	.contentWidth	{max-width:1000px;}

}