/* 17/Mar/2022 20:56 - extracted from the very end of /_css/p7csspbm2/p7csspbm2_09.css" */ /* 1 Column for Narrow Browser Windows and Smartphones in both orientations */ /* 23/Mar/2022 16:17 - effect? * { box-sizing: border-box; } */ /* 29/Mar/2022 18:08 - "max-width: 700px" is also specified in p7TM3-01 & p7TM3-10 */ @media only screen and (min-width: 1px) and (max-width: 700px) { /* 18/Mar/2022 22:49 - was 699 but gave odd behavior at exactly 699. */ /* max-width - below this value - nav buttons switch from horizontal layout to stacked vertical - sidebar (contents.html & glossary.html) location changes from left of content to below content thereby giving the content more lateral space If set too low (e.g., 599) then nav buttons displayed in grid rather than stacked vertical. Original project7 default = 699. Whatever value is set here, increase by 1 in min-width for medium windows below. No matter what value, the width of the google translate toolbar doesn't change. To verify in pinegrow, drag width until nav buttons change while watching width value at top. To verify this in Chrome, choose "Developer tools", then click 2nd upper-left icon, then drag my website width handle until nav buttons change. */ body {margin: 0px;} /* 10/Apr/2022 10:24 - 50px = temp for debug (normally 0px) */ .content-wrapper { width: auto; margin: 0px; padding: var(--padding__content_wrapper__narrow_browser); /* 2/Apr/2022 18:16 - currently 0px */ } /* 0px margin to use max screen to display content */ .content-wrapper, .footer, .masthead, .footer_grid-container {border-radius: 0px;} ul.menutop {display: block;} /* 7/Apr/2022 20:40 - buttons display normal width instead of full width of window .menutop ul {display: block;} */ .menutop li { display: block; float: none; margin-right: 0px; margin-bottom: 5px; /* 23/Mar/2022 16:04 - no effect */ /* gap between buttons when vertically stacked. No effect when buttons horizontal. */ } .sidebar, .main-content { width: auto !important; float: none !important; /* 11/Apr/2022 8:20 - If delete, tree panel becomes narrow (positioned left below upper Contents panel) - appor 1/3 width of upper Contents panel. If "Expand all" then tree panel width increases almost to max of 487px (may be less than width of upper Contents panel). */ position: static !important; /* 10/Apr/2022 13:31 - effect? */ } .sidebar { /* border: 50px solid blue; */ /* 2/Apr/2022 22:02 - debug */ /* border-top: 10px solid blue; */ /* 2/Apr/2022 22:02 - no effect */ } .sidebar .content { padding: 1px var(--padding__content__lateral__narrow_browser) !important; /* 27/Mar/2022 6:27 - must specify at least 1px vertical else background-color from columns-wrapper div (e.g., yellow debug) shows through at border between main-content and left sidebar */ border-top: var(--border__global) !important; /* 2/Apr/2022 22:02 */ border-right: var(--border__global) !important; */ /* 3/Apr/2022 12:44 */ height: 100% !important; /* 10/Apr/2022 22:53 - If tree not expanded in wide browser and then browser narrowed, then Expand makes tree expand but can't scroll tree panel. OK if refresh, then Expand - no extra space anywhere. If tree already expanded in wide browser and then browser narrowed, then significant space below expanded tree. If then collapse tree, then extreme extra space below tree. OK if refresh, then Expand - no extra space anywhere. Same result if "auto" instead of "100%". Same result if "100hv" instead of "100%". No difference if !important omitted. Note - Refresh always returns tree to collapsed state. */ /* 10/Apr/2022 13:47 - If remove "height" then Contents panel (upper) initially has some additional space below the last line of text. However, upon Expand the Contents panel (upper) initially has extreme additional space below the last line of text. However, the tree expands successfully and doesn't have any wasted space above or below. Refresh doesn't change anything. */ /* 7/Apr/2022 22:41 - appropriately constrains height of panel above sidebar */ max-height: 888678px; /* 23/Mar/2022 11:53 - see p7EHCscripts.js */ background-color: purple; } } /* @media end */ /* Medium windows - reduce padding content padding */ @media only screen and (min-width: 700px) and (max-width: 1024px) { /* body {margin: 0px;} */ /* 2/Apr/2022 9:38 - no effect */ /* max-width ==> below this value the width of both the content and sidebar decrease */ /* 29/Mar/2022 16:08 - increased from 1000px to 1170px per Bootstrap */ .content-wrapper { width: auto; margin: 0px 0px; /* 2/Apr/2022 9:24 - If vertical margin > 0px then vertical right scrollbar also added. For horizontal margin, this should be controlled by body margin in p7csspbm_10.css */ } /* .content {padding: 10px 10px !important;} */ /* 27/Mar/2022 19:46 - If allowed then background-color fromS columns-wrapper div (e.g., yellow debug) is shown at bottom of content div. */ .sidebar .content { padding: 0px var(--padding__content__lateral__narrow_browser); /* 2/Apr/2022 21:47 padding-left: (--padding__content__lateral__narrow_browser) !important; padding-right: (--padding__content__lateral__narrow_browser) !important; */ /* height: auto !important; 27/Mar/2022 17:32 */ /* 27/Mar/2022 17:24 - setting height to either auto or 100% ==> content background-color only occupies the height of the text. Below it the background-color of the columns-wrapper div (e.g., yellow debug) is shown. */ } } /* @media end */ /* 29/Mar/2022 16:27 - without max-width the content-wrapper occupies the entire screen width */ @media only screen and (min-width: 1024px) and (max-width: 10000px) { .content-wrapper { width: auto; /* 29/Mar/2022 16:52 - effect? */ max-width: 1024px; /* upper limit, regardless of screen width */ min-margin: 10px 10px; /* 29/Mar/2022 16:47 - if specify margin rather than min-margin then page is L-justified rather than centered */ } } /* @media end */ /* 24/Mar/2022 15:01 - moved from p7csspbm2_09.css */ /* 2016-04-04 - any screen size over 1366px wide (Lenovo laptop = 1366 x 768; desktop = 1920 x 1080) */ /* @media only screen and (min-width: 1367px) { .content-wrapper { width: 1200px; } } */