/* -------------------------------------------------------------------
 * screenSizerStyle.css
 * -------------------------------------------------------------------
 * Size the basic elements on the screen based on screen resolution
 * -------------------------------------------------------------------
 * created: 20211117
 * revised:	20211121	kennyl	added portrait - landscape media rules
 * ------------------------------------------------------------------ */
 
/* ------------------------------------------------------------------ */
/* 1-VS: red very small screens up to 940px  						  */
/* and (min-width:60em), screen  									  */
/* For testing purposes: Nav bar background will be blue			  */
/* The font should be large for handheld devices.					  */
/* ------------------------------------------------------------------ */
@media screen and (max-width:60em) and (orientation:portrait){
	body{
		font-size:var(--base-font-lg);
	}
	.topNavBarList, .topNavBar{
		background-color:var(--top-nav-bar-color-bg-ls);
	}
}
@media screen and (max-width:60em) and (orientation:landscape){
	body{
		font-size:var(--base-font-lg);
	}
	.topNavBarList, .topNavBar{
		background-color:var(--top-nav-bar-color-bg-lsl);
	}
	
/*	.calMonth{font-size:1.2em;}
	.compostTable{font-size:1.0em;}
	.compostReflexTable{font-size:1.0em;}
	.contentTable{font-size:1.2em;}
	.copyrightTable{font-size:1.2em;}*/
}
/* ------------------------------------------------------------------ */
/* 2-SS: small screens > 61em(960px) and < 70em (1120px)       */
/* 1100 to 1100 */
/* ------------------------------------------------------------------ */
@media screen and (min-width:60em) and (max-width:70em) and (orientation: portrait){
	body{
		font-size:var(--base-font-med);
	}
	.topNavBarList, .topNavBar{
		background-color:var(--top-nav-bar-color-bg-ms);
	}
}
/* small screen - landscape (ssl) */
@media screen and (min-width:60em) and (max-width:70em) and (orientation: landscape){
	body{
		font-size:var(--base-font-med);
	}
	.topNavBarList, .topNavBar{
		background-color:var(--top-nav-bar-color-bg-msl);
	}
	.topNavBarLi{font-size:var(--base-font-sm);}
/*	.topNavBarTable, .topNavBar{background-color:var(--top-nav-bar-color-bg-ss);}
	.copyrightTable{font-size:.8em;}
   .imageL, .imageR{
		border:none;
		border-radius:2em;
		height:8em;
		width:8em;
	}

	a.underLink:link, a.underLink.visited{font-size:1.2em;}
	a.underLink:hover, a.underLink.active{font-size:1.2em;}
 */
}
/* ------------------------------------------------------------------ */
/* 3-MS: green medium screens > 71em(1120px) and < 80em (1280px)       */
/* 1100 to 1420 */
/* ------------------------------------------------------------------ */
@media screen and (min-width:70em) and (max-width:90em) and (orientation: portrait){
	body{
		font-size:var(--base-font-sm);
	}
	.topNavBarList, .topNavBar{
		background-color:var(--top-nav-bar-color-bg-ss);
	}
}
@media screen and (min-width:70em) and (max-width:90em) and (orientation: landscape){
	body{
		font-size:var(--base-font-sm);
	}
	.topNavBarList, .topNavBar{
		background-color:var(--top-nav-bar-color-bg-ssl);
	}
/*	.calMonth{font-size:1.2em;}
	.compostTable{font-size:1.0em;}
	.compostReflexTable{font-size:1.0em;}
	.contentTable{font-size:1.2em;}
	.copyrightTable{font-size:1.2em;}
   .imageL, .imageR{
		border:none;
		border-radius:2em;
		height:8em;
		width:8em;
	}
	a.underLink:link, a.underLink.visited{font-size:1.2em;}
	a.underLink:hover, a.underLink.active{font-size:1.2em;}
*/
}
/* ------------------------------------------------------------------ */
/* 4-LS: larger-portrait screens > 90em(1280px) and < 200em (3200px)    */
/* ------------------------------------------------------------------ */
@media screen and (min-width:90em) and (orientation: portrait){
	body{
		font-size:var(--base-font-ss);
	}
	.topNavBarList, .topNavBar{
		background-color:var(--top-nav-bar-color-bg-ss);
	}
}
@media screen and (min-width:90em) and (orientation: portrait){
	body{
		font-size:var(--base-font-ss);
	}
	.topNavBarList, .topNavBar{
		background-color:var(--top-nav-bar-color-bg-ssl);
	}
	
/*	.calMonth{font-size:1.2em;}
	.compostTable{font-size:1.0em;}
	.compostReflexTable{font-size:1.0em;}
	.contentTable{font-size:1.2em;}
	.copyrightTable{font-size:1.2em;}
   .imageL, .imageR{
		border:none;
		border-radius:2em;
		height:8em;
		width:8em;
	}
	a.underLink:link, a.underLink.visited{font-size:1.2em;}
	a.underLink:hover, a.underLink.active{font-size:1.2em;}
*/
}