/**************************************************************************/
/* view5-phone-narrow-v1.css added to do a better job of displaying the   */
/*  title on narrow smartphone screens.                                   */
/*  Below is the same as view4-phone-v1.css except for:                   */
/*      .banner_title_line1 (smaller font)                                */
/*      .home-link (left margin smaller)                                  */
/**************************************************************************/

/**************************************************************************/
/* 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: none;		/* 1st column (left_menu)  */
--proportion_middle: 92%;		/* 2nd column (middle_text)*/
--proportion_right: none;		/* 3rd column quotes       */
}

/******************************************************************/
/* Viewport attributes to accomodate displays responsive to width */
/******************************************************************/
.phone-only {			
	display: inline;	/* Execute EVERYTHING in this class */
}

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

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

.tablet-and-larger {
	display: none;		/* DO NOT to execute anything 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-phone_950x85_notext.jpg"); 
	width: 100%;  /* Holds the "Palouse Mindfulnesss" title */
	height: 85px;
}

.banner_title_line1 {	/* For the text of the title */
	font-size:1.250rem;	/* [rem conversion] was 25px, actually calculated from 26px (e.g. 26/16) */
}
.banner_title_line2 {	/* For the text of the title */
	font-size:0.750rem;	/* [rem conversion] was 12px */
}

/****************************************************/
/* Definition for special link for home page title  */
/****************************************************/
.home-link {
	margin-left:60px;	/* Move "Palouse Mindfulness" title further left (was 90px) */
}

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

#left_menu {		/* 1st column - left menu */
	display:var(--proportion_left);
}
#middle_text {		/* 2nd column - main content. */
	width: var(--proportion_middle);
}					
.quotes_wrapper {	/* No 3rd column for quotes. */	
	display: var(--proportion_right);
}