/* file: selfdefinition.org/styles/selfdefinition-responsive.css update Apr 4, 2017 */ /* BIG PROBLEM: THERE HAVE BEEN TWEAKS ON THE LOCAL COPY SINCE THEN. THIS PAGE WAS EDITED APR 19, 2019. MUST CHECK FOR ANY DIFFERENCES APR 4, 2017 TO PRESENT */ /* Changelog: Print section added Apr 19, 2019. Put on line 536 AFTER default widths. Keep this section in "drop-in" template for a year or so to avoid CSS cache issue (Chrome). */ /* TO DO 1. Upload Paradoxes, see if it works OK with existing stylesheet on site5 2. Edit Light on the Path, substituting CSS for paradoxes > then upload and check 3. Same for Voice of the Silence 4. Test several sections with new local stylesheet (rearranged toth jumplinks commented out) 5. ?? anything else? 6. Upload new local stylesheet to Site5 */ /* include html5 elements */ article, aside, figure, footer, header, hgroup, menu, nav, section, div { display: block; margin:0; border:0; padding:0; } html, body {margin:0; border:0; padding:0;} /* colors must agree */ html, body, #fixed-header-small-screen, #menu-site-small-screen {background:#fcfeff;} html {box-sizing: border-box;} * {box-sizing: inherit;} /* image never to go beyond width of parent container */ img {max-width:100%;height:auto;} /* z-index stacking; */ body, #main-content, #announce, #article, article {z-index:0;} /*make the menu clickable because it is out of document flow */ #menu-section-group {z-index:6;} /* keep menu-section-group from obscuring the top menus */ #fixed-header-small-screen {z-index:10;} #menu-site, #menu-site-small-screen {z-index:9;} body {font-family: verdana, tahoma, ariel, sans-serif; font-size: 18px; line-height: 1.7em; text-align:left;} header, #announce h1, #announce h2, #announce h3, #announce p {text-align:center;} /* Centering is needed for IE8; does not recognize centering in #announce (because of element
?) */ /* NO #title-include-div {text-align:center;margin-top:50px;} */ /* put top margin in #announce, not #title-include-div because a title include file may not be used */ /* top margin of #announce goes to Zero at screens less than Ipad, see below */ #announce {text-align:center;margin-top:50px;} header h2, header h3, header p {margin:0 auto 10px;} /* body default font size is 18px; line height 1.7em; */ /* reduce menu font size (was 16px) to 15px so lines will fit better */ #menu-panel {font-size:15px;} /* misc styling */ /* Give a little padding without mesing with containers, just use in paragraph tag */ /* this is chrome default: p {margin:1em 0;} NO. Left and right PADDING ADDED to #main-content-relative p {margin:1em 8px 1em 5px;} */ p {margin:1em 0;} /* headings to conform left and right NO LONGER NEEDED since padding is now applied to #main-content-relative h1, h2, h3, h4, h5 {margin-left:5px;margin-right:8px;} */ /* keep anchors from forcing phone width too wide https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ Articls says, "These are technically the same, but use both -> #2 and #3" */ /* allow this in menu also? */ #main-content a { word-break:break-word; overflow-wrap: break-word; word-wrap: break-word;} /* if needed, not used yet */ #menu-container a {} /* get rid of weird outline auound anchor tags */ a {outline: none !important;} .block {display:block;} @media only screen and (max-width:599px) { span.block-on-small {display:block;} } .inline-block {display:inline-block;} .bold {font-weight:bold;} .italic {font-style:italic;} .maroon {color:maroon;} .yellow {background:yellow;} .nowrap {white-space:nowrap;} .normal {font-weight:normal;} .note {font-size:90%;} .note80 {font-size:80%;} .fnote {color: Maroon;font-size: 90%;} .fnote80 {color: Maroon;font-size: 80%;} .clear-left {clear:left;} .clear-right {clear:right;} .clear-both {clear:both;} /* Added May 6, 2019 for upside down exclamation marks for Spanish In text put like this: ¡ */ .sans {font-family:sans-serif; position: relative; top: -0.15ex; } /* left margin was 15px. Changed to "inherit" in local CSS in Jan 2017. Change here 2/5/2017 */ p.fnote, p.fnote80 {margin-left:inherit;margin-right:10px;} p.tall {margin:2em 0;} .full-width {width:100%;} .totop {margin-top:20px;} .logo {color:Maroon;} .disclaimer {font-size:85%; color:Maroon;} /* text align */ .center {text-align:center;} .left {text-align:left;} .right {text-align:right;} /* blockquote vertical spacing reliies on paragraph tags */ blockquote {margin:0 15px 0 18px;} /* keep wide headers from stretching full width on wide screens, then center them These do not center properly in headers on small screen */ h1.toowide, h2.toowide, h3.toowide, h4.toowide, p.toowide {width:85%;margin:0 auto;} /* needed for IE8 when inside a "header" element */ h1.toowide, h2.toowide, h3.toowide, h4.toowide, p.toowide {text-align:center;} ul.no-bullet {list-style:none;} /* shrink for smaller screens */ @media only screen and (max-width: 767px) { h1.toowide, h2.toowide, h3.toowide, h4.toowide, p.toowide {width:90%;margin:0 auto;} } /* NO. no longer necessary, as padding has been added to main-content-relative @media only screen and (max-width: 767px) { h1, h2, h3, h4, h5 {margin-left:5px;margin-right:5px;} } */ /* for linkbacks and top links (Wikipedia, etc) */ p.source, .toplink {text-align:center;margin:-10px 0 30px 0;} ul.toplink {list-style:none;} /* Anchor is displayed as "inline-block" to avoid dead space between lines when an anchor tag wraps in a menu. Can override [class=inline] when it causes unneeded newline. */ nav a {display:inline-block;} /* normal display */ article a {display:inline;} a.inline {display:inline;} a:link { color: #0000ff; text-decoration: none;} a:visited { color: #0000ff; text-decoration: none;} a:hover { color: #008000; text-decoration: underline;} a:active { color: #ff0000; text-decoration: none;} h1 { font-size: 125%; } h2 { font-size: 115%; } h3 { font-size: 110%; } h4 { font-size: 100%; } h5 { font-size: 100%; font-weight:normal; font-style:italic;} hr {margin-left:25px; } article hr {margin:0 auto; width:80%; } /* Not used anywhere. No tables yet td { text-align:left; vertical-align:top; } */ /* The following is used in conjunction with menu-highlighter.js The structure of the menu must conform to specs of script. * http://webdesignerhut.com/active-class-navigation-menu/ * Depends on #menu-section-group in the script **/ /* put padding on left but offset with negative margin */ #nav ul li a.active {padding:5px; margin-left:-5px;} /* Default active-page andcor color in the menu. The anchor has class = active */ #nav .menu-section a.active {background:#bde0ff;} /**** start menu scrolling script ****/ /* MUST be present for menu scrolling script to work */ /* coordinate width with page elements further below */ /* width is set forther below */ #menu-container { position: fixed; top: 0; bottom: 0; overflow-y: scroll; overflow-x: hidden; } /*** scrollbar adjustments ***/ /* hide the scrollbar; only works for webkit, not IE or Firefox */ #menu-container::-webkit-scrollbar { display: none; } /* This prevents IE9 scrollbar from obscuring the right hand edge of the left menu */ #menu-container {padding-right:10px;} /* needed to widen the container a little */ /* the width of #menu-container sets the position of the scrollbar in FF */ /* https://css-tricks.com/snippets/css/hide-scrollbar-in-edge-ie-1011/ Syntax: auto | none | scrollbar | -ms-autohiding-scrollbar This gets rid of the (autohidden) scrollbar on IE and Edge but still permits scrolling */ #menu-container {-ms-overflow-style: none;} /* for the anchor tag for the menu-scroll javascript Note, the id=menu-scroll has been removed; using class="div-scroll" instead. Menu template switched to p#menu-scroll on Jan 6, 2017 because it's not a div Keep p.div-scroll a in the CSS as legacy */ p.div-scroll a, #menu-scroll, #menu-scroll a { background: #bde0ff; width:130px;} p.div-scroll a, #menu-scroll a { font-size: 80%; margin-left: 10px; padding: 5px 3px 5px 3px; } /**** end menu scrolling script ****/ /* control line height for sup and sub https://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/ */ sup, sub { vertical-align: 0; position: relative; font-size:80%;} sup { bottom: 0.5ex; color:maroon;} sub { top: 0.8ex; } sup a { text-decoration: underline; } /*** START OF link navigation bar (no middle contents link) ***/ nav.next-previous-item-nav {margin-top:20px;margin-bottom:20px;} /* increase the bottom margin for phones */ @media only screen and (max-width: 500px) { nav.next-previous-item-nav {margin-bottom:40px;} } ul.next-previous-item-list {list-style:none;font-size:80%;margin-top:10px;margin-bottom:10px;padding:0;} .next-previous-item-list li {margin:0;padding:0;display:inline-block;} /* need inside margin so items don't touch as they come together */ .next-previous-item-list li.align-left {float:left;margin-left:5px;margin-right:8px;} .next-previous-item-list li.align-right {float:right;margin-left:8px;margin-right:8px;} /* MAY need to adjust this on phones; not done yet */ ul.next-previous-item-list {margin-bottom:30px;} /* menu items overlap on small screens */ /* COLOR: make the anchor daarker */ .next-previous-item-nav li a:link, .next-previous-item-nav li a:visited { color:#2277DD; text-decoration: none;} .next-previous-item-nav li a:hover { color:green; text-decoration: underline;} /*** END OF 2 link navigation bar ****/ /*** START OF in-page links at top of page ***/ /* Below the UL there will be a "totop" paragraph so make the bottom margin zero */ ul.page-links, ul.page-toc-links {list-style:none;width:280px;margin:20px auto 0;font-size:90%;padding:0;} .page-links li {padding:5px 0;} .page-toc-links li {margin-top:10px; padding:3px;} /* for when headings are wide: (see Magic White and Black, ch. 8) IF still too wide, then override locally */ ul.page-links.too-wide {padding: 0 0 0 3px;width: 310px;} @media only screen and (max-width:768px){ ul.page-links.too-wide {width: 100%;max-width: 340px;} } @media only screen and (max-width:340px) { ul.page-links.too-wide {font-size: 17px;} } /*** END OF in-page links at top of page ***/ /**** START SIDE-BY-SIDE DIVS AT TOP OF ARTICLE ****/ /**** 2-panel section at top of article; side-by-side on wide screens, vertical on phones ****/ #header-title-div { margin: 0; float: left;width: 300px;} #header-image-div { float: right; margin: 28px 20px 0 0; text-align: center;font-size:80%;} #header-image-div img { width:180px;} /* need to test this breakpoint */ @media only screen and (max-width: 500px) { #header-title-div { float: none; width:100%; } #header-image-div { float: none; margin: 20px auto; } #header-image-div img { width: 70%; max-width:240px;} } /*** template

*** end of template ***/ /**** END SIDE-BY-SIDE DIVS AT TOP OF ARTICLE ****/ /**** START OF article images floated to left or right ****/ /* LEFT used in /psychology/quotes/aldous-huxley-self-transcendence.htm RIGHT used in */ /* must be
between image and text */ .left-image-div { float:left; margin: 10px 20px 0 20px; text-align: center;font-size:80%;} .right-image-div { float:right;margin: 10px 20px 0 20px; text-align: center;font-size:80%;} .left-image-div img, .right-image-div img {width:auto;max-width:250px;} @media only screen and (max-width: 500px) { .left-image-div { float:none; margin: 5px; text-align: center;font-size:80%;} .right-image-div { float:none; margin: 5px; text-align: center;font-size:80%;} .left-image-div img, .right-image-div img {width:auto;max-width:90%;} } /**** END OF article images floated to left or right ****/ /******** START JUMP LINK STYLING FOR PARAGRAPHS *********/ /* Section Headings, typically */ /* Retiurn to top of page */ p.totop-above-anchor {position:relative;top:40px;z-index:2;font-size:90%;} /* for a footnote in the text but Not in a tag */ .footnote {font-size:80%;} /* fn-anchor began in celibacy-responsive.css for: swami-kripalvananda-illusion-of-conjugal-sadhana.htm */ /* keep links accessible when list item padding overlaps them */ a.page-link-anchor, a.fn-anchor, a.top-anchor, ul.references-list a {z-index:1;} /* using a border may break this; anchor element must not be empty */ /*default, large screen; this is the easy method. Can't be used for a list of anchor tags because they will overlap. For that see below. */ a.page-link-anchor {padding-top:40px;} a.top-anchor {padding-top:20px;} /* RETURN LINKS ARE ABOVE = li.footnote-item:before */ /* give a few lines of text above the footnote on return */ a.fn-anchor {padding-top:35px;background:transparent;} /* Jump-link source CSS http://nicolasgallagher.com/jump-links-and-viewport-positioning/ #target:before { content: ""; display: block; height: 50px; margin: -30px 0 0; } (Also see Stack-Overflow link on the local css sheet) */ /* TEMPLATE for foonotes used in an article Footnote: 1 For footnote area, return to footnote:
  • 1. [footnote text]
    • */ /******** START JUMP LINK STYLING FOR FOOTNOTES, Dec 23, 2016 *********/ /* Using "footnote-item" because the class "footnote" already exists */ /* DEFAULT #menu-site-small-screen HAS 4 ITEMS including TOC */ /* is this used? */ .contents-item {} /* This section for footnotes section. Added Feb 5, 2017 */ /* Used in Light on the Path, Paradoxes */ ul.references-list { margin-left: -35px; list-style: none;} /* list item has class="footnote-item" and the id is in the list item anchor tag has class="page-link-anchor" */ /* WHERE USED /magic/light-on-the-path/ Dec 28, 2016 /blavatsky/voice-of-the-silence/ Jan 2, 2017 (no local css for this) /magic/eliphas-levi/paradoxes/ Feb 17, 2017 */ /* MUST COORDINATE WITH BOTTOM MARGIN OF THE LIST ITEM (footnote) ABOVE IT SEE LIST ITEM [LI > P] STYLES IN VOICE OF THE SILENCE LOCSL CSS WILL HAVE TO ALTER FOR TOP DIFFERENT MENU BREAKPOINTS li.footnote-item:before {content: ""; display: block; height: 25px; margin: -20px 0 0;background:transparent;} */ /* for smaller than ipad: */ @media only screen and (max-width: 767px) { p.totop-above-anchor {} a.page-link-anchor {padding-top:160px;} a.top-anchor {padding-top:140px;} a.fn-anchor {padding-top:200px;background:transparent;} } /* The difference between "height" and "margin" governs the spacing between list items. Difference in absolute value 15px or 20px seems good. Settings and breakpoints are based on a 2-line top menu. Will change for a 1-line or 3-line menu. */ /* Top menu goes from 1 to 2 lines at about 520px / /* For #fixed-header-small-screen with 4 items try the "WAS" values in local CSS @media only screen and (min-width: 600px) and (max-width: 767px) { a.fn-anchor {padding-top:90px;background:transparent;} li.footnote-item:before {content: ""; display: block; height: 100px; margin: -80px 0 0; background:transparent;background:beige;} } */ /* between 521and 599 the top menu will normally be 1 line only */ /* Top menu goes from 1 to 2 lines at about 520px @media only screen and (max-width: 599px) { p.totop-above-anchor {} a.page-link-anchor {padding-top:170px;} a.top-anchor {padding-top:130px;} a.fn-anchor {padding-top:100px;background:transparent;} li.footnote-item:before {content: ""; display: block; height: 110px; margin: -90px 0 0; background:transparent;background:yellow;} } @media only screen and (max-width: 520px) { a.page-link-anchor {padding-top:180px;} a.fn-anchor {padding-top:140px;background:transparent;} li.footnote-item:before {content: ""; display: block; height: 130px; margin: -110px 0 0; background:transparent;background:beige;} } @media only screen and (max-width: 359px) { li.footnote-item:before {content: ""; display: block; height:125px; margin: -105px 0 0;background:transparent;} a.page-link-anchor {padding-top:180px;} a.fn-anchor {padding-top:140px;background:transparent;background:yellow;} } /******** END JUMP LINK STYLING FOR FOOTNOTES *********/ /*** START OF DEFAULT POSITIONING AND WIDTHS for browsers that don't recognize media queries or max-width ***/ /* The sole function of this div is to restore relative positioning, so the subsequent elements are in normal flow; must be on every page. Must have, but declating it "relative" or not doesn't seem to matter */ #main-content-relative {position:relative;} /* default large screens; fixed with, page centered. Left menu = 200 width + 30 empty space. Main content left position = 230, plus 550px article = 780 + 20 for safety = 800px total width (narrowed a little on width of 767 and less.) To center the page: #mainwrapper {margin:0 auto;} #mainwrapper must be "position:relative" for #menu-panel and #main-content to respond properly (in chrome at least). These are absolute within a relative "relative" must be set on #mainwrapper rather than on #container. Former width of #menu-container was 200px; now 220px with 10px padding added on right Need to test in IE <<<<<<<<< */ #mainwrapper {width:800px;margin:0 auto;position:relative;} #container {} #menu-panel {width:220px;position:absolute;top:0;left:0;} #menu-include-file-div {} #menu-container {width:210px;} /* was 195px, changed Mar 25, 2017 */ #main-content {width:530px;position:absolute;top:0;left:240px;} #announce {width:530px;margin:20px auto 0;} article, section, aside {width:530px;} /* added Apr 19, 2019, don't show left menu when printing Keep this in "drop-in" css template 6 months to avoid CSS cache problems */ @media only print { #menu-panel {display:none;} #main-content {width:100%; position:absolute; top:0; left:10px;} #article, article, #announce, section, aside {width:100%;} div.title-image-div, img.title-image {display:block; margin:10px auto; width:210px;} } /* Must have for windows phone, other right edge is hidden. Added to main CSS Mar 29, 2017 https://css-tricks.com/snippets/javascript/fix-ie-10-on-windows-phone-8-viewport/ REMOVED MAY 7, 2020, article was written in 2013, theows a Console error @-ms-viewport { width: device-width; } */ /* for space at bottom of page oOLD - REPLACED BY THE FOLLOWING - MUST TEST article {border-bottom:200px solid transparent;} */ article {border-bottom:1px solid transparent;} #main-content-relative {border-bottom:200px solid transparent;} /* These don't work for bottom border placement: #main-content, #article */ /*** END OF DEFAULT POSITIONING AND WIDTHS ***********/ /****** START MENU STYLES *******/ /* inserted as an extra hook as the first element of the include file, but not used yet */ #menu-include-file-div {} /**** default responsive display styles ****/ /* NO: using "initial" rather than "block" or "inline-block". Must use "block", because block-sensitive styles are ignored with "initial". So it can only be used with div, h and p. Need something else for span. */ .hide-if-not-phone {display:none;} .hide-if-phone {display:block;} .hide-if-small-screen {display:block;} /* small-screen vs large-screen break is at 767px */ /* only used so far in anchor in /bernard */ .hide-if-large-screen {display:none;} /* "phone" breakpoint is 500px << check this */ /***** START menu for smaller screens *****/ /* Default for large screens is hidden */ /* this is a div */ #fixed-header-small-screen {display:none;} /* duplicate text, only used on small screens; swapped at max 767 (ipad is 768px) */ /* this is a ul */ #menu-site-small-screen {display:none;} /***** START normal menu for wider screens *****/ #menu-site {margin-top:25px;margin-bottom:0;} .menu-text {margin-top:0;margin-bottom:0;} .menu-section {margin-top:0;margin-bottom:0;} /* these are ul's. ul.menu-section is inside div#menu-section-group or div#site-lonks or div#optional-links */ #menu-site, .menu-text, .menu-section {list-style:none;margin-left:-30px;} #menu-site li {margin:0 0 0 0;padding:5px 0;font-size:14px;} /* no longer used as of Jan 2017. See p.menu-scroll above */ #menu-site li.scroll-menu-item {font-size:80%} .menu-text li {margin:0 0 0 0;padding:0;font-size:14px;} .menu-section li {margin:3px 0;padding:5px 0;font-size:14px;} /* new with huang-po dharma Jan 2017 << inproces also: Levi Paradoxes, and Levi Great Secret */ .menu-section li.external-links-item, .menu-section li.site-links-item {font-weight:bold;color:Maroon;margin-bottom:0;padding-bottom:0;} .menu-section li.external-first-item, .menu-section li.site-first-item {margin-top:0;padding-top:0;} /* img.menu-image is within ul.menu-text or ul.menu-section */ /* only use a top margin, because likely will have a caption below it */ .menu-image {width:150px;margin-top:10px;} /* z-index valuers are declared above */ /* must have this hook in html for menu script to work */ #menu-section-group {} /* The anchor width needs to be set because it is highlighted and clickable Fit close to the right edge of #menu-container. IF anchor needs to be wider, up to 190px is possible, override locally. */ .menu-section li a {width:170px;} /* menu section list item styles (pages/chapters in the section) */ #menu-section-group li.heading {margin-bottom:0;padding-bottom:0;} #menu-section-group li.first {margin-top:0;padding-bottom:0;} #menu-section-group li.spacer {margin:0;} #menu-section-group hr {margin-left:0px;width:150px;} /* menu section list item styles (pages/chapters in the section) */ /* note #menu-panel font is 15px */ .optional-links, .site-links {font-size:13px;} .optional-links li, .site-links li {margin:3px 0; padding:5px 0;} /* will disappear on a phone */ .menu-text {font-weight:bold;} /* OLD on li use padding, not margin, to make menu choice more accurate */ /* alternatively, use padding on anchor tags, seems to be the same #menu-site li, .menu-text li, .menu-section li {width:95%;margin-right:0;} */ /*** END OF DEFAULT POSITIONING AND WIDTHS ****/ /* Media queries for iPad and larger */ @media only screen and (min-width:768px) and (max-width: 900px) { /* these are the defaults (above) -- none have max-width set. #container is absolute within a relative #mainwrapper {width:800px;margin:0 auto;position:relative;} #container {} #menu-panel {width:200px;position:absolute;top:0;left:0;} #menu-container {width:200px;} #main-content {width:530px;position:absolute;top:0;left:240px;} #announce {width:530px; WAS width:100%;margin:0 auto;} #article, article, section, aside {width:550px;} */ /* must set fixed width for page to center */ #mainwrapper {width:768px;} #container {} #menu-panel {position:relative;} #main-content, #article, #announce, article, section, aside {width:530px;} } /* medium screens, less than 768px (less than ipad) */ /* narrower than Ipad there is no menu on the left side. See below section #menu-container {display:none;} */ /* swap #menu-site and #menu-site-small-screen */ @media only screen and (max-width: 767px) { /* these are the defaults: #mainwrapper {width:800px;margin:0 auto;position:relative;} #container {position:absolute;top:0;left:0;} #menu-panel {width:200px;position:absolute;top:0;left:0;} #menu-container {width:200px;} #main-content {width:530px;position:absolute;top:0;left:240px;} #announce {width:530px; WAS width:100%;margin:0 auto;} #article, article, section, aside {width:550px;} */ /* Trying to center the page screen < 768. Default for this (as above) doesn't do it #mainwrapper {position:relative;margin:0 auto;} This DOES center the page: This also works: width:650px; #container {position:relative;width:auto;max-width:540px;margin:0 auto;} */ /* test */ #container {position:relative;width:100%;max-width:540px;margin:0 auto;} #mainwrapper {width:auto;max-width:767px;margin:0 auto;position:relative;} #main-content {width:540px;margin:0 auto;} /* copied from Life of Paracelsus */ #announce {margin-top:0;} #title-include-div h1 {margin-top:0;} /* accept default: absolute top 0, left 0 */ #menu-panel {} #menu-panel, #nav {position:relative;width:100%;} /* inserted as an extra hook, 1st element of include file, but not used */ #menu-include-file-div {} /* background must be set locally to match local body background */ /* contains the button AND #menu-site-small-screen */ /* set width at 100% of article to article doesn't show through when scrolled */ /* this matches the article width */ #fixed-header-small-screen, #menu-site-small-screen {width:540px;} #fixed-header-small-screen {display:block;position:fixed;top:0;height:50px;} /* Do not adjust height of #fixed-header-small-screen. Does not affect layout but needs to overlap so page doesn't show through on scroll */ /* Don't use bottom divider, too hard to position #fixed-header-small-screen {border-bottom:1px solid gray;} */ /* swap the menu lists */ #menu-container, #menu-site {display:none;} /* only fix the top, not the left, position under the toc button */ /* When no button is used, put top at 21px locally */ #menu-site-small-screen {display:block;position:fixed;top:41px;margin:0; padding:0;} /* top-bottom margin=7, top-bottom padding = 3 */ #menu-site-small-screen li {list-style:none; display:inline-block;float:left;margin:5px 20px 5px 2px;padding:5px;line-height:1.7em;} /* remove unneeded space for first and last in horizontal menu */ #menu-site-small-screen li.first-item {margin-left:0;} #menu-site-small-screen li.last-item {margin-right:0;} /* this is in #menu-site-small-screen -> see more below */ .contents-item {} /* only modified for phones, see below */ /* class "first-item" replaces class "top-item" */ /* RESERVED: these are no longer used: first-item or top-item. the menu position can be governed by clearing floats rather than setting width #menu-site-small-screen li.first-item {} */ #menu-site-small-screen li a {font-size:16px;} /* center the page */ #container {} #main-content {width:auto;max-width:100%;} /* position this as absolute below #menu-site-amall-screen; top is modified for phones */ #main-content {position:absolute; top:121px; left:0; width:auto; padding:0;z-index:0;} /*** flexibility for medium size screens ***/ /* default width is 200 see above; reduce a bit */ #menu-panel {width:190px;} /* default width is 530px, see above; now make flexible */ #article, #announce, article, section, aside {width:auto;} /* default is 80% */ article h3, article h4 { max-width: 100%; } /* keep letters from going all the way to the edge OLD. REPLACED BY THE NEXT */ /* article p {padding-left:5px;padding-right:5px;} */ /* Default wide screen */ #main-content-relative {padding-top:10px; padding-left:5px;padding-right:4px;} /* Necessary for curved screens such as on S7 Edge Expanded further Aug 22, 2019. For narrow screens only: */ @media only screen and (max-width:540px) { #main-content-relative {padding-left:18px;padding-right:16px;} } /* and for the top menu */ @media only screen and (max-width: 767px) { #menu-site-small-screen {position:relative;} #menu-site-small-screen {left:10px;} } /* started with anchor in /bernard as "inline" - changed 2016-1013 to initial; the default for anchor tags is already inline */ .hide-if-large-screen {display:initial;} .hide-if-small-screen, p.hide-if-small-screen, div.hide-if-small-screen {display:none;} } /* a little space on the right, for this range */ @media only screen and (min-width:768px) { article {padding-right:5px;} } @media only screen and (max-width:600px) { #fixed-header-small-screen, #menu-site-small-screen {width:100%;max-width:initial;} } /* larger body font and menu line-height for mobile menus. iPhone 4 breakpoint is 480 px iPhone 5 width of 320 is 640 px */ @media only screen and (max-width: 500px) { body {font-size:19px;line-height:1.9em;} p {padding:0} /* this is default */ /* a little space both sides of screen NO. REMOVED BY ADDING padding to #main-content-relative in < 768 above p {margin:1em 2px;} */ #fixed-header-small-screen {} #manu-panel, #nav {} #menu-site-small-screen {} .contents-item {} /* class "first-item" replaces class "top-item" */ /* RESERVED: these are no longer used for width, just for margins and padding: first-item or top-item. the menu position can be governed by clearing floats rather than setting width #menu-site-small-screen li.first-item {width:100%;} */ /* not necessary to set top here #main-content {top:115px} */ blockquote {margin:0 2px 0 5px;} /* don't indent much on a phone */ .hide-if-phone, p.hide-if-phone, div.hide-if-phone {display:none;} .hide-if-not-phone {display:block;} br.hide-if-not-phone, span.hide-if-not-phone {display:inline;} p.fnote, p.fnote80 {margin-left:5px;margin-right:5px;} } /* make the top menu 2 lines on small screens */ /* set "first-item" to 100% to get a single item at the top */ @media only screen and (max-width: 400px) { #menu-site-small-screen {padding-bottom:10px;} #menu-site-small-screen li {} /* RESERVED: these are no longer used: first-item or top-item. the menu position can be governed by clearing floats rather than setting width #menu-site-small-screen li.first-item {width:100%;} */ /* change this to 145px if menu will be 3 lines */ /* not necessary to set top here #main-content {top:145px;} */ } @media only screen and (max-width:360px) { .contents-item {clear:left;} } @media only screen and (max-width:320px) { .contents-item {clear:initial;} } /* menu wraps just below 300 px */ @media only screen and (max-width: 320px) { #main-content {top:140px;} } /* some of these are also styled in local style sheet for /celibacy/quotes */ #header-title-div {} #header-image-div {} /**** When Title-include file has an image that is swapped ****/ /* Set default so that the image not shown on wide pages */ .title-image-div, .title-image {display:none;} /* for photo in menu; menu is not displayed on small screens */ .menu-photo { width: 150px; } /* now image shows on smaller screens */ /* div.optional-links and div.site-links disappear when #menu-container disappears */ /* use "block" rather than "initial" due to strange results */ @media only screen and (max-width:767px) { #announce {margin-top:0;} .title-image-div {display:block;margin-top:15px;} .title-image {display:block;margin:0 auto;width:auto;max-width:300px;} } @media (max-width:767px) { .title-image {width:80%;max-width:200px;} } /**** end of title include file image ****/ /**** Possible styling for TABLE OF CONTENTS PAGE - not used yet ****/ /* 2 col swapped with 3 col FROM: /joseph-sadony/golden-chalice/contents.htm ALSO IN topga-rinpoche-course css for centering is on the page */ #toc-3-section, #toc-2-section {display:block;margin:0;} /* align text to left within the uls */ #contents-left-side, #contents-center, #contents-right-side, #left-of-2-col, #right-of-2-col {text-align:left;} /* separate the links to reduce accidental touch */ #toc-3-section li, #toc-2-section li {margin-top:0;margin-bottom:10px;} /* make links easier to touch; put on right to help centering */ #toc-3-section li a, #toc-2-section li a {width:100%;padding: 0 0 0 20px;} /* three column: */ #contents-left-side, #contents-center, #contents-right-side { /* don't use: float:left; this won't let the container be centered */ /* use this instead: */ display:inline-block; vertical-align:top; list-style-type: none; line-height: 2.8em; width: auto; margin:0; padding:0 30px 0 0; } /* widen the center column a bit */ #contents-center {padding-right:40px;} /* two column */ #left-of-2-col, #right-of-2-col { /* NO: float: left; */ display:inline-block; vertical-align:top; list-style-type: none; line-height: 2.8em; width: auto; } /* reduce left padding; default is 40px; */ #left-of-2-col {margin: 0 20px 0 -30px;padding-left:20px;} #right-of-2-col {margin:0;padding:0 40px 0 20px;} /* list items in 2 column */ #left-of-2-col li, #right-of-2-col li {margin-left:-10px;} /* MEDIA QUERIES for toc (if contents page is used) */ /* breakpoints in responsive-long-menu.css are 400 and 401 but Nexus 5X width is 411px and Nexus 6P is 435px */ /* hide 2 column in wide */ @media only screen and (min-width: 436px) { #toc-2-section { display: none; } } /* hide 3 column in narrow */ @media only screen and (max-width: 435px) { #toc-3-section {display: none;} #left-of-2-col, #right-of-2-col {} #left-of-2-col {margin-right:15px;} } /**** End of styling for TABLE OF CONTENTS PAGE - not used yet ****/ /*********** fluid width for Youtube videos on a page https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php AND http://alistapart.com/article/creating-intrinsic-ratios-for-video padding-bottom: 20% This declaration gives the box a specific format. Using 20% for padding makes the height of the box equal to 20% of its width. ***********/ /* used on so far: Celibacy section: embajadores-vallenatos-santo-cachon.htm gary-wilson-the-great-porn-experiment.htm oscar-brown-jr-a-ladies-man.htm Elsewhere: /psychology/robert-anton-wilson-free-your-mind.htm /possession/ = 2 pages with youtube videos */ /* MUST have text in article (below the video) of sufficient width or the video width will collapse on a small screen. Can use nonbreaking spaces if text is not needed         etc. */ .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* END */