/**************************************************************************/
/* NOTE: For STANDALONE(USB)versions to work without internet access,     */
/*  this file must be accessed locally (e.g., all references to this file */
/*  must be relative rather than from https://palousemindfulness.com)     */                                         
/**************************************************************************/
:root {	/* NOTE: Dreamweaver doesn't understand CSS vars, but browsers do  */
--proportion_left: 16%;			/* 1st column (left_menu)  */
--proportion_middle: 78%;		/* 2nd column (middle_text)*/
--proportion_right: none;		/* 3rd column quotes       */
}

/******************************************************************/
/* Viewport attributes to accomodate displays responsive to width */
/******************************************************************/
.phone-only {			
	display: none;		/* DO NOT to execute anything in this class */
}

.tablet-only {	
	display: inline;	/* Execute EVERYTHING in this class */
}

.tablet-and-smaller {
	display: inline;	/* Execute EVERYTHING in this class */
}

.tablet-and-larger {
	display: inline;	/* Execute EVERYTHING in this class */
}

.laptop-and-larger {
	display: none;		/* DO NOT to execute anything in this class */
}

.desktop-only {	
	display: none;		/* DO NOT to execute anything in this class */
}

/******************************************************************/
/*  Basic page definitions                                        */
/******************************************************************/

#wrapper {		
	width: 100%;	/* Different than default (largest) viewport, which has it fixed at 1500px */
	border: none;	/* Don't need border for smaller screens */
}

/******************************************************************/
/* Definition for Title Banner (just under top strip)             */
/******************************************************************/
#banner_title {	  /* Main title graphic, 85px high for tablet and phone viewports so more proportional  */
	background-image: url("../art/clouds2_title_1500x115_notext.jpg"); 	/* qqq was clouds2_title-phone_950x85_notext.jpg */
	width: 100%;  /* Holds the "Palouse Mindfulnesss" title */
	height: 115px;														/* qqq was 85px */
}

.banner_title_line1 {	/* For the text of the title */
	font-size:1.875rem;	/* ffff was 30px */
}
.banner_title_line2 {	/* For the text of the title */
	font-size:1.250rem;	/* ffff was 20px */
}

/*******************************************************************/
/* Defintions for 3 main regions (left menu, middle text, quotes)  */
/*******************************************************************/

#left_menu {        
	width: var(--proportion_left);
}
#middle_text {
	width: var(--proportion_middle);
}
.quotes_wrapper {	/* 3rd: No Right column.       */	
	display: var(--proportion_right);
}