/* InspectAPedia.com MainStyle.css */
/* 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;
}
.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
}
/* IMAGE 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
}
/* 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 */
.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 Increased 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 accomodate 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; increased 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%
}
*/
/* 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;
}
/* Support for orange text formatting, used for Really? notices */
.OrangeText {
color: ORANGE;
font-weight: bold;
font-size: large;
}
/* 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 */
/* its 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 old 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/02/07 testing nav links in left column - should also work if put back at page top */
/* 2023/12/01 note: we no longer put nav links in the left column, just advertisements */
/* 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 intrudes 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: smaller;
}
/* 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 be adding blank space to page bottom */
/* Previous try CRASHED ALL WEBSITE LINKS BESIDES IN THE HEADER. Overlap issue appeared only in some browsers on PCs */
#footer {
position: relative;
clear: both;
}
/* END of MainStyle.css */