/**************************************************************************/
/* 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: 64%;		/* 2nd column (middle_text)*/
--proportion_right: 14%;		/* 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: none;		/* DO NOT to execute anything in this class */	
}

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

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

.laptop-and-larger {
	display: inline;	/* Execute EVERYTHING 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 */
}

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

#left_menu {
	width: var(--proportion_left);
}
#middle_text {
	width: var(--proportion_middle);
}
#right_photo {
	width: var(--proportion_right);
}