/* 
  ------------------------------------------------
  PVII CSS Page Builder Magic 2
  Copyright (c) 2013 Project Seven Development
  www.projectseven.com
  09: 2 Col Fixed Sidebar Left, Top Menu
  ------------------------------------------------
*/

head {
/*	padding: 50px; 2/Apr/2022 9:51 - no effect */
}

body {
  min-height: 100vh; /* 2/Apr/2022 9:27 - never implemented */
    /* 2/Apr/2022 9:27 - see https://www.freecodecamp.org/news/html-page-width-height/ */

 	font-family: Verdana, Arial, sans-serif; /* 18/Dec/2015 19:43 */
	  /* Web safe fonts -
      	http://www.cssfontstack.com/
      		Segoe is not used on Macs.
      		The most compatible fonts for both Windows and Macs are:
      			Arial http://www.cssfontstack.com/Arial
      			Verdana http://www.cssfontstack.com/Verdana
      			Trebuchet MS http://www.cssfontstack.com/Trebuchet-MS
      			Tahoma <chars are too close together> http://www.cssfontstack.com/Tahoma
    */

/* font-family: "Segoe UI", Optima, Arial, Helvetica, sans-serif; */
	  /* 10/Apr/2015 21:55 - was <"Segoe UI", Optima, Helvetica, Arial, sans-serif> but Arial should come before Helvetica which can display poorly under Windows.
	  See Castro, p. 235 */
	color: #000; /* text */
	background-color: var(--background_color__body);
	margin: 0px 0px;
	  /* 2/Apr/2022 9:24 - If vertical margin > 0px then vertical right scrollbar appears.
	  Same if this is removed entirely. */
	padding: 0px;
	  /* 2/Apr/2022 17:36 - If padding-top > 0px or padding-bottom > 0px then 
	  vertical right scrollbar appears */
	line-height: 1.5; /* 18/Dec/2015 19:58 */
/* 	font-size: 1.2vw;  */ /* see https://css-tricks.com/viewport-sized-typography/ */

}

img {
	vertical-align: bottom;
}

.content-wrapper {
/*  border-radius: var(--corner_radius); */ /* 26/Mar/2022 3:15 */
    /* If set value here */
/*  border-radius: 0px; 26/Mar/2022 3:14 */ /* corners */

/* 26/Mar/2022 4:07 - leaves ~1px gap on all sides except left; OK if border-radius=0px */
  border: var(--border__content_wrapper);

  
/*	border: 2px solid var(--background_color__masthead_footer); */
	  /* 26/Mar/2022 4:28 - no gaps for 5px; gaps (at least some sides) otherwise */

	margin: 0px auto; 
	  /* 2/Apr/2022 9:59 - auto keeps the page centered in the window */

	padding: var(--padding__content_wrapper__vertical) var(--padding__content_wrapper__lateral);
/*	
	padding-left: var(--padding__content_wrapper__lateral);  
	padding-right: var(--padding__content_wrapper__lateral);  
*/	
/*	padding-bottom: 20px; */
    /* 26/Mar/2022 3:03 - don't use else would be included in border */
/*	margin-top: 0px; */ /* 2/Apr/2022 9:59 - no effect */
	  /* Top margin between content-wrapper and top of available screen content window.
	  If 0 then some top margin is still visible, as desired. */
/*	margin-bottom: 20px; */ /* 14/Mar/2022 22:58 - no effect? */
	
	overflow: hidden; /* 1/Apr/2022 17:39 - effect? */

	max-width: var(--content-wrapper__max_width); 
	  /* 24/Mar/2022 14:55 - use max-width instead of width to prevent horizontal scroll bar */

/*	  
  max-height: 400px;
  overflow-y: auto;	
*/
  /* 14/Apr/2022 8:16 - above truncates page at max-height. No scroll bars appear but can
  scroll with scroll wheel. */

  /* 	min-height: 100vh; */ /* 8/Apr/2022 8:13 - never implemented */

/* 8/Apr/2022 7:10 - truncates long pages at bottom; never implemented
	max-height: 100vh; 
*/

/* 8/Apr/2022 7:10 - effect? ; never implemented
	max-height: 100%; 
*/
		
/*	width: 1000px;  */
	  /* 26/Mar/2016 13:13 - 1280px --> 1000px when left sidebar no longer used (except for contents.html & _glossary.html). Gives same main-content viewing width as with 22% sidebar. */
	  /* 1/24/2015 - 1280px = slightly less wide than max res of lenovo X220 laptop (1366px). This includes a left sidebar that occupies 22% of the screen (i.e.,  280 px)
	  Allows 2 CARD images side-by-side in classic_horn_comparisons.html (table) with reasonably readable text */
/*	width: 980px; */ /* 1/24/2015 */
}

.columns-wrapper {
  
  /* 12/Mar/2022 21:28 - for some reason this had been removed; now restored */
	overflow: hidden;
	  /* 27/Mar/2022 16:23 - if removed, footer moves inside content p7ehc-1 div at top-left
	  and current background-color (below) is no longer displayed */ 

/*	  
  max-height: 600px;
  overflow-y: auto;
*/  	
    /* 14/Apr/2022 8:06 - Adds a vertical scroll bar at left of  columns-wrapper when 
      max-height px is exceeded. Only works in Pinegrow, not online.
      (If max-height is specified in hv units (e.g., "max-height: 100hv;" then the 
      scroll wheel acts like a zoom for the entire page.)
      Only columns-wrapper scrolls; the panels above or below it remain fixed.  
      This limits how much actual vertical content can be seen.
    
	    See -
	      https://stackoverflow.com/questions/18183296/how-can-i-add-a-vertical-scrollbar-to-my-div-automatically
    */

	background-color: var(--background_color__main_content); 
	  /* 4/Apr/2022 11:21 - must be this value else reload page initially shows different
	  color at bottom of main-content until main-content has finished loading.
	  See by setting this value to orange. 
	  To see this background must set "--background_color__main_content: transparent;"
	  in variables.css
	  */
/*	background-color: orange; */ /* 28/Mar/2022 13:54 - debug */
}

/* 2016-04-04 - any screen size over 1366px wide (Lenovo laptop = 1366 x 768; desktop = 1920 x 1080)  */
/* 24/Mar/2022 15:03 moved to narrow_browser.html

@media only screen and (min-width: 1367px) {
.content-wrapper {
	width: 1200px; }
}
*/

.main-content {
	float: right;
	width: 100%; /* 78% = same as menutop-button-wrapper */
/*	min-height: 100%; */ /* 27/Mar/2022 6:50 - effect? */
/*  background-color: transparent !important; */ /* debug */
	background-color: var(--background_color__main_content) !important;
/*  background-color: red !important; */ /* debug */
 
/* 25/Mar/2022 21:57 - if use either of following then the left sidepanel moves below the
main-content panel (but still to left)

	border-left: var(--border__global);
	border-right: var(--border__global);
*/

}

/*A utility rule assigned to the first heading to remove top margins.*/
.page-topper { margin-top: 0px; }

/* 5/May/2015 7:50 - if browser window is wide enough, displays an image at its native resolution. 
However, can't scale inside a table. */
img.scalable_native_res {
	height: auto !important;
	width: auto !important;
	max-width: 100%;
}

/* 1/25/2015 - the following works inside a table. According to Al Sparber email 1/29/2015, 
this will not cause problems except in older browsers. */
/* 1/28/16 - replaced by below */
zimg.scalable {
	height: auto !important; /* 1/26/2015 - if don't set this then image height > normal compared to width. Only occurs if  "width: auto !important; " is also not set. */
	width:100%;  /* 1/26/2015 - without this the CARD image (if alone - not next to another CARD image) appears to be native resolution 640x480 rather than expanding to width of container.  Allows % img scaling relative to the width of the container (e.g., table). However, the container (table) width can't be < native	img resolution. */
/* width: auto !important; */
	  /* "width: auto" - the image is at its native resolution. However, lose the ability to scale inside a table. */
/* width: 100% !important; */
	  /* "width: 100%" - if not "height: auto !important;" then image height > normal compared to width; also lose the ability to scale inside a table. */

/* 	max-width: 100%; */  /* 1/25/2015 - img scales OK w/o max-width but width must be retained */
}

/* Make Image Scalable - Assign this class to any image to make it scale with the browser window size */
/* 1/25/2015 - the following is the original. Replaced by above which works inside a table */
/* 1/28/2016 - revert to this from above, which caused distorted png image in Chrome browser 
when image is inside a table with 
  class="scalable _img_screen_height" (_img_screen_height seems to cause the problem). 
See E:\websites\usr\test_pages\distorted_image_in_chrome\circle__basic_page_1a.html */
img.scalable {
	height: auto !important; 
	width: auto !important; 
	max-width: 100%;
}

zimg.scalable {
	height: auto !important; /* 1/26/2015 - if don't set this then image height > normal compared to width. Only occurs if  "width: auto !important; " is also not set. */
	width:100%;  /* 1/26/2015 - without this the CARD image (if alone - not next to another CARD image) appears to be native resolution 640x480 rather than expanding to width of container.  Allows % img scaling relative to the width of the container (e.g., table). However, the container (table) width can't be < native	img resolution. */
/* width: auto !important; */
	  /* "width: auto" - the image is at its native resolution. However, lose the ability to scale inside a table. */
/* width: 100% !important; */
	  /* "width: 100%" - if not "height: auto !important;" then image height > normal compared to width; also lose the ability to scale inside a table. */

/* 	max-width: 100%; */  /* 1/25/2015 - img scales OK w/o max-width but width must be retained */
}

/* Make Image Scalable - Assign this class to any image to make it scale with the browser window size */
/* 1/25/2015 - the following is the original. Replaced by above which works inside a table */
zimg.scalable {
	height: auto !important; 
	width: auto !important; 
	max-width: 100%;
}

.sidebar ul, .sidebar ol, .sidebar2 ul, .sidebar2 ol {
	margin: 0 0 0 .5em;
	padding: 0 0 0 .5em;
	line-height: normal;
}
.sidebar li, .sidebar2 li { 
	margin-bottom: 4px; 
}