/* InspectApedia.com MainStyle.css */ /* 2024/12/08-09-11 support for backround color In some div statements: eg .div-color1 */ /* 2024-03-15 support for Nav background for reader QA section PAGE-LOCATION-7a MID PAGE header */ /* 2023/03/02 added support for green background text */ /* 2024/02/07 Adding hidden/shown dropdown sub menus */ /* 2024/02/01 For PAGE-LOCATION-02.php combined 2 table rows to let flexbox handle wrap */ /* 2024/01/31 testing using Wiktor's flexbox & larger page top tabnav buttons */ /* 2024/01/31 fixed tabnav background around links set background-color: #68FFFE; */ /* 2023/11/24 commented off text describing source of tabnav code as mere documentation */ /* 2023-07-24 minor edits - active link explict set blue, visited link color blue */ /* 2022/10/14 added format for black-bordered text used possibly for death or other announcements eg on home page */ /* 2022/05/16 added comments, alternative page top layout set In Location_2_3_4_Combined_Includes.php + larger tabnav font from 10 to 11 */ /* 2020/01/24 amended .Image_Standard { margin-right: 25px CHANGED to 40px; better spacing around numbered lists */ /* 2017/01/18 Added formatting to use pasted-in html comments box comments */ /* 2017/01/03 Explained use of tabnav used to provide page top n */ /* 2017/01/03 Deleted duplicate table specification & added comments */ /* 2016/12/06 Turned OFF the underscore on HOVER & synched these notes to current MainStyle.css */ /* CSS Specification definitions are at https://www.w3.org/Style/CSS/specs.en.html */ /* Main Font Specifications for web pages */ /* .h specifies all headers, a = address?; body, p = paragraphs, td = table data q= ? */ .h, a, body, p, td { font-family: Arial, Helvetica, sans-serif; font-weight: 400; color: #000000; } /* DIV BACKGROUND COLOR CHOICES */ /* 2024/12/09 Created more generic color1 name, set color here, can more color# choices */ /* then select desired div color va div class= e.g. used In PAGE-LOCATION-7bColored.php */ /* Example of use
*/ /* 2024/12/08 using color picker at https://htmlcolorcodes.com/color-picker/ */ .div-orange { background-color: #FFCC7D; } /* ugly orange */ .div-color1 { background-color: #FFEF7D; } /* sickly yellow */ .div-color2 { background-color: aliceblue; } /* feeble blue */ .div-color3 { background-color: #FFCC66; } /* Amy Yellow */ /* Header font */ .h { font-size: 20px } .q { color: #00c } /* Standard LINK Colors blue */ /* 2023-07-24 changed 00f to blue */ /* add visited color determination */ /* a:hover MUST come after a:link and a:visited In the CSS definition In order to be effective */ /* a:active MUST come after a:hover In the CSS definition In order to be effective */ a:link { text-decoration: none; color: blue; font-family: Arial, Helvetica, sans-serif } /* 2023-07-22 new: set color for links that have been visited - currently same as un-visited */ /* NOTE: convention would turn visited links purple #800080 or to blueviolet */ a:visited { color: blue; font-family: Arial, Helvetica, sans-serif } /* Make link text bold red when cursor hovers over it */ a:hover { font-weight: 700; color: red; font-family: Arial, Helvetica, sans-serif } /* I MAGE FORMATTING */ /* 2016/12/23 removed margin-top: 5px; here and In minified mainstyle */ .Image_Standard { float: left; margin-right: 40px; margin-bottom: 5px; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; font-weight: 320; } /* LIST FORMATTING Could expand space around links but on mobile this desktop spacing Is not carrying through */ /* Watch out: DON'T CHANGE
  • to
  • site-wide: that destroys nav link format for mobile page top link menu */ .LI_Spaced { margin-top: 10px; margin-bottom: 5px } /* SHOW / HIDE Page Bottom Citations DIV */ /* 2023/01/31 current default = hidden */ /* 2017/01/03 Show-Hide switch no longer In use for Related Links at Location 06 */ /* hr horizontal rule formatting */ /* hr color/thickness Is done directly In the hr html eg
    */ .hidden { display: none } .unhidden { display: block } /* TEXT FORMATTING for Page Top Navigation Buttons */ /* 2024/01/31 Try Wiktor's flexbox code as he used it In tabnav */ /* 2024/01/31 note: Wiktor says we should be using flexbox - newer better formatting tab support */ /* See CSS flexbox at https://www.w3schools.com/css/css3_flexbox.asp */ /* 2024/01/31 note: CSS Tabs In older versions of MainStyle.css - Joshua Kaufman http://unraveled.com/ */ /* licensed under Creative Commons Attribution 3.0 - http://creativecommons.org/licenses/by/3.0/ */ /* TABNAV Is used In PAGE-LOCATION-02.php to format InspectApedia.com page top links menu into horizontal bars */ /* Standard formatting for horizontal tabs at page top and bottom link tabs In the horizontal menus */ ul#tabnav { display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 8px; text-align: left; /* set tabs to left, right or center */ margin: 2px 0 2px 0; font: 700 11px arial, verdana, sans-serif; /* set font as desired - 2022/05/16 I ncreased from 10 to 11 + see size change In next use of this field, below */ border-bottom: 1px solid #46C7C7; /* set bottom border COLOR as desired #6c6; #736F6E; #68FFFE */ list-style-type: none; padding: 4px 3px 5px 5px; background-color: #68FFFE; /* tab area surrounding background was: #CFF change to #68FFFE */ line-height: 210% /* Force big line height to accommodate tab line wrapping */ } ul#tabnav li { border-radius: 20px; /* Wiktor's setting was border-radius: 20px; */ border: 1px solid #46C7C7; padding: 6px 10px; display: block; } /* tabnav settings for selected tab link */ body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a { background-color: #736F6E; /* set selected tab background color as desired */ color: #0F0; /* set selected tab link color as desired orig #FFF*/ position: relative; top: 1px; padding-top: 4px /* must change with respect to padding (X) above and below */ } /* tabnav settings for all tab links */ ul#tabnav li a { /* background-color: #CCFFFF; OFF for use with .current set active url page to green - orig: set unselected tab background color as desired */ /* color: BLUE; OFF for use with .current set active url page to green - orig: set unselected tab link color as desired #2554C7; */ font: 700 11px arial, verdana, sans-serif; /* 2022/05/16 as found: 700 10px arial, verdana, sans-serif; I ncreased tab font size; 08/21/11 ADDED bold to force bold - set font as desired */ margin: 2px 2px 0 0; text-decoration: none /* none; underline; */ } /* tabnav settings for hover effect */ ul#tabnav a:hover { background: #fff; /* set desired tab link text hover background color */ color: red /* set selected tab link hover color */ } /* 2024/02/07 try adding hidden/shown dropdown sub menus */ /* code found at https://dev.to/atulcodex/dropdown-menu-using-css-flexbox-28j8 */ ul#tabnav li ul { display: none; } ul#tabnav li:hover ul { display: block; position: absolute; margin-top: 5px; background: #68FFFE; border-radius: 6px; width: 20%; padding: 10px 2px; box-shadow: 0px 20px 100px 0px rgba(0, 0, 0, 0.5); } /* END css tabnav definitions of page top and page bottom tabs */ table { width: 100% } /* should the following read hover rather than over ? 2024/02/07 */ over { background: #fff; text-decoration: underline; color: red } /* Deleted from minified mainstyle the following table spec that to be a duplicate? table { width: 100% } */ /* TEXT COLOR & BOLD FONT SUPPORT */ /* Support for orange text formatting, used around ads at end of page content In PAGE-LOCATION-7bOrange.phps */ .OrangeText { color: ORANGE; font-weight: bold } /* Support for red text formatting, used for Watch Out: notices */ .RedText { color: RED; font-weight: bold } /* Support for Black Bordered text w/ colored background formatting, used for death or other notices */ .BlackBorder { text-align: center; border-style:solid; border-color:#000000; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; background-color: #90FF33; /* choose color using number codes at https://htmlcolorcodes.com/ */ } /* 2024-03-02 Support for green background black text used for Amy's fun and games */ .GreenBackground { background-color: #70db70; /* choose color using number codes at https://htmlcolorcodes.com/ */ } /* Support centered text or divs 2024/01/27 - coding needs review */ .centered { padding-top: 10px; display: flex; justify-content: center; align-items: center; margin: auto; } /* 2024-03-15 support for InspectApedia Nav background for reader QA section PAGE-LOCATION-7a MID PAGE header */ .ReaderQA { background-color: #68FFFE; } /* 2023/01/31 below are Wiktor's notes */ /* I'ts quite unsystematic if it goes about naming the css classes, we should use snake/kebab-case only f.e.: .orange-text , .black-border .size-1 */ /* also In both files there area many general classes with display: none applied */ /* f.e.: .displayNone, .hidden, there are also many classes with diplay: none only applied like .innerPageTitle, I would suggest to replace all of them to hidden class and place this class only In MainStyle.css */ /* also .unhidden Is a weird name for this class, would be better to name this .block */ /* Also as we use global css, it would be better to use some methodology to make this more readable */ /* https://getbem.com/ */ /* Support for smaller text used In page top areas and other applications */ /* 2023/12/01 Below Is obsolete but remains In some files. */ /* Encoding In pages uses now we use the css spec */ .Size-1 { font-size: smaller } /* Sidebarclass Is the page left or possibly right column of ads and previously also links */ /* See PAGE-LOCATION 02 - 15 Page Include or Action Areas and older version eg /Includes/Location_2_3_4_Combined_Includes.php */ /* 2017/01/03 In use, maximum width Is 35% of window, goes to zero on small windows or mobile displays. See media query below */ /* 2022/05/16 try smaller max-width: original was width: 35% and below note setting of @media(max-width:1024px) */ [class*=“sidebarclass”] { float: left; padding-top: 10px; padding-left: 0px; padding-right: 10px; width: 30%; max-width: 300px; align: left } /* Support for sticky page left banner ad at old LOCATION 4 now coded In PAGE-LOCATION-02.php */ [class*=“sticky”] { float: left; padding-top: 10px; padding-left: 0px; max-width: 300px; align: left } /* Main body area of web page */ [class*="bodytext"] { float: left; padding-left: 20px; width: 65% } /* 2024/12/09 note: we no longer Include a left column, just advertisements */ /* 2024/02/07 tested nav links In left column - also works back at page top */ /* 2015/12/20 MEDIA QUERY used to collapse page left links column In small windows */ /* Width selected to collapse sidebar before the sticky page left ad I ntrudes onto page right text */ /* 2022/05/16 try smaller max-width: original was @media(max-width:1024px) */ @media(max-width:1000px) { #sidebar, #sidebar+p { display: none } [class*="bodytext"] { width: 100%; /* padding: 10 OFF 2016/12/23 for testing here and In minified MainStyle.css*/ } } /* 2016/12/20 EXPIRES moved to where they work, In the .htaccess file */ /* COMMENTS FORMATTING */ /* 2017/01/18 added to formate pasted-in comments & replies loaded per page from http://www.htmlcommentbox.com/received.html */ p.recent-comment-hdr { font-weight:bold; } /* Page top Title Area Formatting to force comments and banners below the top title section 2017/01/21 */ #articletopic { min-height: 240px; font-size: small; } /* Hide the mobile title on desktop. */ #dm-title { display: none; } /* 2018/02/22 try#2 added per Clark van Oyen advice to avoid sticky side banner from lapping over page bottom banner */ /* now that Google Adsense seems to add blank space to page bottom */ /* Previous try CRASHED ALL WEBSITE LINKS BESIDES I N THE HEADER. Overlap I ssue appeared only In some browsers on PCs */ #footer { position: relative; clear: both; } /* END of MainStyle.css */