/* -------------------------------- Primary style -------------------------------- */ /* *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } */ /* 17 JULY 2018. Updated the box-sizing values as follows: */ html { box-sizing: border-box; } *,*::before, *::after { box-sizing: inherit; } /* End of updated box-sizing values */ /* ----------------------------------------------------------------- * * BODY styles follow * * ----------------------------------------------------------------- */ body { font-size: 100%; color: white; background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A0A0A0), to(#303030)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #303030, #A0A0A0); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #303030, #A0A0A0); /* IE 10 */ background: -ms-linear-gradient(top, #303030, #A0A0A0); /* Opera 11.10+ */ background: -o-linear-gradient(top, #303030, #A0A0A0); } /* * Following rule prevents the background content from scrolling * when nav menu is open and overlaying the content. * * ----------------------------------------------------------------- */ body.overflow-hidden { overflow: hidden; } /* * * Image styles * * --------------------------------------- */ /* ------------------------------------------------------------------- * * 27 FEB 2016 NEW! * * I added the following markup following Ethan Marcotte's lead in * his book 'Responsive Web Design'. (see p48) * I should have following his advice from day one!!! * * THE FOLLOWING LINE IS VERY IMPORTANT AND MUST NOT BE REMOVED!!!! * * ------------------------------------------------------------------- */ img { max-width: 100%; } /* NEW! 16JAN2017 */ /* img.figure {} was here */ .fig-caption { width: 70%; margin-left: 2rem; margin-bottom: 2rem; color: black; } /* NEW 14 JAN 2017 * * Added the following four styles * * ---------------------------------------------------------------- */ figure.topFigure { max-width: 100%; /* -- was 100%-- */ padding: 2.000000%; /* 18 / 900 */ margin-left: 13.1111111%; /* orig was 100px > 100 / 900 */ margin-right: 5.555555%; /* 50 / 900 */ margin-top: 1em; /* testing to see if this rule affects ALL
tags?? */ margin-bottom: 2em; background-color: #FFFFFF; box-shadow: 4px 4px 8px rgba(0,0,0,0.75); } figure.otherFigure { max-width: 100%; /* -- was 100%-- */ padding: 2.000000%; /* 18 / 900 */ margin-left: 13.1111111%; /* orig was 100px > 100 / 900 */ margin-right: 5.555555%; /* 50 / 900 */ margin-top: 2em; margin-bottom: 2em; background-color: #FFFFFF; box-shadow: 4px 4px 8px rgba(0,0,0,0.75); } /* this style is for DRAWINGS ONLY which have pure white backgrounds and will not show any border */ figure.realFigure { max-width: 100%; /* -- was 100%-- */ padding: 2.000000%; /* 18 / 900 */ margin-left: 13.1111111%; /* orig was 100px > 100 / 900 */ margin-right: 5.555555%; /* 50 / 900 */ margin-top: 3em; margin-bottom: 2em; background-color: #FFFFFF; /* changed from above line - 13JUL2016 */ box-shadow: 4px 4px 8px rgba(0,0,0,0.75); } figcaption.spacing { padding-top: 1em; padding-bottom: 1em; padding-left: 0.5em; padding-right: 0.5em; color: black; /* darker shade of black */ background-color: #D3D3D3; font-family: 'Poppins', sans-serif; font-style: normal; } /* * * .minor*** styles * * --------------------------------------- */ .minorContent { font-family: 'Poppins', sans-serif; font-size: 1.0em; font-style: normal; font-weight: 300; word-spacing: 0.1em; color: #585858; /* new 28feb2016 */ letter-spacing: 1px; line-height: 1.3em; width: 90%; max-width: 900px; background-color: #D8D8D8; margin: 0 auto; padding: 2% 5% 5% 5%; margin-top: -4%; text-align: justify; border: 10px solid #C0C0C0; } .minor .minorContent p { margin-left: 13.1111111%; /* orig was 100px > 100 / 900 */ margin-right: 5.555555%; /* 50 / 900 */ margin-bottom: 10px; /* orig was 10px */ } .minor .minorContent h3 { font-family: 'Poppins', sans-serif; font-weight: 700; margin-right: 6%; border-bottom: 2px solid #ffaf1a; /* test only */ font-style: normal; font-size: 1.5em; color: orange; text-transform: uppercase; margin-top: 1em; padding-bottom: 0.3em; margin-bottom: 1.0em; } .minor .minorContent h4 { font-family: 'Poppins', sans-serif; font-weight: 400; font-style: normal; font-size: 1.4em; margin-left: 13.1111111%; margin-top: 2em; color: orange; margin-bottom: -10px; /* reduce space between

title and

elements */ text-transform: uppercase; } .minor .minorContent h5 { font-family: 'Poppins', sans-serif; font-weight: 400; font-style: normal; font-size: 1.1em; margin-left: 13.1111111%; margin-top: 1em; color: #6A6562; /* * NEW!! 16 JAN 2017 * * Am changing the following style because the negative margin makes no sense when * it is used ie, in the 'Dominoed Cabinet Door' webpage. * Not sure what will look good at this moment. * OK, the 0px value works fine, so I may just removed the style entirely. * This change may pose a problem we have no discovered at this time. * * NOTE. This style - as is, works perfectly for dating contents such as text. A good * example would the in the delta jointer page where I note the date - 17 AUGUST 2017 - * that this particular contents was written. This lets browsers know when the article was * written which is important. * ---------------------------------------------------------------------------------- */ margin-bottom: 0px; /* reduce space between

title and

elements */ text-transform: uppercase; } /* * Following code affects 'Chisels' text =================== */ /*.toolTitle h1 { */ .minorTitle h1{ -webkit-font-smoothing: antialiased; font-family: "Copperplate"; width: 63%; max-width: 1170px; margin-top: 6%; margin-left: 50%; padding-top: 0%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); color: rgba(255, 255, 255, 0.5); color: red; 7font-size: 20px; text-transform: uppercase; /* -- my code -- */ text-shadow: 4px 4px 4px rgba(24, 0, 0, 1.0); letter-spacing: 0.1rem; /* -- my code -- */ font-size: 3.0em; /* orig was 5.0rem */ font-weight: bold; border-bottom: 1px solid red; } .minorTitle a { text-decoration: none; color: rgba(255, 255, 255, 0.8); } .minorTitle a:hover { color: #66CC00; /* minty green color */ } /* * Following code affects 'Wood Working By Design' text ==================== */ /*.toolTitle h2 { */ .minorTitle h2 { width: 54%; max-width: 1170px; font: bold 1.1em "Hoefler Text", Garamond, Times, serif; margin-top: -1.0%; /* original was -2.0% */ margin-bottom: 8%; margin-left: 19%; color: #F00000; text-shadow: 3px 3px 3px rgba(24, 0, 0, 1.0); text-transform: uppercase; letter-spacing: 0.5em; padding: 0; } /* END OF MINOR STYLING ==================================================== */ .stand-out { font-color: red; font-style: normal, 2rem; border-bottom: 4px solid orange; margin-right: 100px; text-transform: lowercase; } /* NEW! 9 APR 2017 Wanted a style to highlight some text as needed */ .color-me-red-italics { color: red; font-style: italic; } /* NEW! 9 APR 2017 Wanted a style to highlight some text as needed */ .color-me-red { color: red; } .make-me-bold { font-style: normal, 2rem; color: blue; } /* this spaces the p {element} nicely */ .aboutMeContent { margin: 1.0em 0; } .just-a-list { width: 80%; margin-left: 6%; padding-left: 12%; list-style-type: decimal; padding-bottom: 1em; } .plain-list { width: 80%; padding-left: 13%; margin-bottom: 2%; list-style-type: none; } .list-title { color: red; margin-bottom: -1%; padding-bottom: -1%; } /* The following style was zeroed out with reset.css so we had to bring it back */ strong { font-weight: 400; } /* NEW! 7 SEPT 2017 I wanted to have a style for converting text to uppercase. */ .upper-case { text-transform: uppercase; } /* NEW! 29JAN2017 This style is for drawing a line through text */ /* See shop-photography.html page for an example of its use */ cross-out { text-decoration: line-through; } /* ------------------------------------------------- * * NEW! 17 JAN 2017 * * Copied these three styles from the NO-NAV-majorStyle.css style sheet * * --------------------------------------------------- */ .will-be-covering a { text-decoration: none; color: green; } /* orig was blue */ .will-be-covering a:hover { /*background-color: blue;*/ color: red; } .will-be-covering li { list-style-type: disc; /*margin-bottom: 5%;*/ 7margin-left: 13.1111111%; width: 80%; /* NEW 14SEP2017. This worked fine. */ margin-left: 16%; /* NEW 14SEP2017. This worked fine. */ 7padding-left: 12%; /* NEW 14SEP2017. This did not work. */ 7padding-bottom: 1em; /* NEW 14SEP2017. This did not work. */ } /* -------------------------------------------------- * HAND PLANES TOOL PAGE LINKS * -------------------------------------------------- */ .krenovsBooks a { text-decoration: none; color: black;} .krenovsBooks li { list-style-type: decimal; margin-left: 5%; } /* /end of hand planes tool page linke styling --------- */ /* ------ MORE FOLDER STYLING --------------------------------------- * * Following rules style pages in the 'more' folder * * ---------------------------------------------------------------------- */ .more-title h1 { -webkit-font-smoothing: antialiased; font-family: "Cinzel"; width: 62%; max-width: 1170px; margin-top: 5%; margin-left: 50%; padding-top: 0%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); color: rgba(255, 255, 255, 0.8); font-size: 20px; text-transform: uppercase; text-shadow: 4px 4px 4px rgba(24, 0, 0, 1.0); letter-spacing: 0.0em; font-size: 2.0rem; font-weight: bold; padding-bottom: 0.5rem; border-bottom: 2px solid red; } .more-content { font-size: 1.1em; /*font-family: "Source Sans Pro", sans-serif;*/ /*font-family: "Arial Narrow", "Times New Roman", serif;*/ font-family: "Cinzel"; /*font-family: 'Helvetica Neue', Helvetica, sans-serif;*/ font-style: normal; font-weight: 100; /*color: rgba(2, 23, 37, 0.9);*/ color: black; letter-spacing: 1px; line-height: 1.3em; width: 90%; max-width: 900px; background-color: #E8E8E8; margin: 0 auto; padding: 2% 5% 5% 5%; margin-top: -0%; text-align: justify; border: 10px solid #C0C0C0; } /* Following spaces the p {element}s of page content in the 'other' folder */ .more-content p { margin: 1.0em 0; } /* * Following rules stylize the header title links in * the 'other' folder pages * ---------------------------------------------------------- */ .more-title a{ text-decoration: none; color: rgba(255, 255, 255, 0.8); } /*.more-title a:hover { color: green; } */ .more-title a:hover { color: #66CC00; /* minty green color */ /* color: #F60; */ } /* /end of 'more' folder styles ---------------------------------------- */ /* * The following class .note is used to create 'Notes' in our content * to point out important concepts or warn of potential danger * ------------------------------------------------------------------- */ .just-a-note { color: black; border: 2px solid white; background-color: rgb(69,189,102); 7margin-top: 100px; /* orig was 25px */ 7margin-bottom: 200px; /* orig was 35px */ margin: 40px 0 50px 0; 7padding: 60px; /* orig was 20px */ } /* NEW! 4 SEP 2017 ***************** */ .just-a-note strong { color: #FC6512; } .minor .minorContent .note { color: black; border: 2px solid white; background-color: rgb(255,255,175); /* was 255,255,175 */ padding: 20px; /* orig was 20px */ margin-top: 25px; /* Note. The following markup - margin-bottom: - does NOT WORK for some reason. Margin collapse???? I have no idea. */ /* UPDATE!! 5SEP2017. Got some help from SitePoint and SamA74 informed me that my problem was SPECIFICITY!! The more specific rule always wins. So I updated the .note style with '.minor .minorContent .note' {} and Voila! the margin-bottom now works as intended. */ margin-bottom: 25px; /* orig was 35px */ } .note strong { color: red; } /* Following was used to try and put some space between the .note and the paragraph that followed. This did not work. ??? */ .note+p { margin-bottom: 20px; } /* NEW. 16 SEP 2017 Need this to give me some space above a paragraph if I need it. In particular, when the class will-be-covering is used there is no way to add margin AFTER the last entry. So this has to be done with a separate style. */ .margin-top { margin-top: 2em; } /* NEW 16SEP2017 Decided to add this style as well. */ .margin-bottom { margin-bottom: 2em; } /* * The following class rule is used to style quatations or other * text in our content. * --------------------------------------------------------------------- */ .make-a-point { width: 85%; padding-left: 5%; font-style: italic; text-align: justify; color: black; } .italicize { font-style: italic; } .italicize-red { font-style: italic; color: red; } .italicize-blue { font-style: italic; color: blue; } /* * NEW!! 3 SEP 2017 * Following style will be used to add a warning icon * --------------------------------------------------------------------- */ .heads-up { float: left; width: 10%; padding: 0 0px 0 10px; } /* * NEW!! 3 SEP 2017 * Following style will be used to text to go with the warning icon above * --------------------------------------------------------------------- */ .heads-up-text { width: 80%; margin: 0 auto; margin-top: 2em; text-transform: uppercase; padding: 3%; color: red; } /* * The following two rules are used to style links to external sources * --------------------------------------------------------------------- */ a.external-link { color: red; text-decoration: none; /* 14 SEP 2017. I removed the following style because it forces caps and that may not be what I want. We can capitalize any words that we need with caps. 7text-transform: capitalize; */ } a.external-link:hover { color: blue; } /* * NEW!!! 1 AUG 2015 * * Added this to position our 'go back' arrow to right of page * This markup was snatched from the major-styles CSS sheet * * ------------------------------------------------------------------ */ a.up-arrow { padding-left: 90%; /* this works to position hoarizongtally to right */ padding-top: 0%; margin-top: 1%; /* this worked to move icon up. 7SEP17 was -5%, changed to 1% like this better. */ margin-bottom: 5%; /* NEW! 7 SEPT 2017 felt we needed some space below the arrow */ /*border: 1px solid black;*/ display: inline-block; } /* * Following rule used to emphasize certain text in content * * ------------------------------------------------------------- */ em { font-style: italic; font-weight: bold; } /* =========================================================================== * * FOOTER styles follow * * 16 JAN 2017 @ 1223H * Am coping all of NO-NAV-minorStyle.css's footer styles to this page. * Am doing this because the footer is nicely styled in the center of the page. * Result? * Ok the footer looks much better * * --------------------------------------------------------------------------- */ footer { font-family: "Source Sans Pro", sans-serif; position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 1440px; line-height: 1.5em; /* this adjust the height of the line */ background-color: rgba(20, 20, 20, 0.6); /* same background color as the menu drop down */ color: white; text-transform: capitalize; font-size: 1.0em; font-weight: 400; text-align: center; } footer .copyright { opacity: 0; } /* /end of footer code ================================================= */ /* ------------------------------------------------------------------------- * * MEDIA QUERY SECTION FOLLOWS * * ------------------------------------------------------------------------ */ /* * -------------------------------------------------------------- * I think we can do without this ??? * -------------------------------------------------------------- */ @media only screen and (min-width: 768px) { .nav-bar { height: 80px; background: transparent; box-shadow: none; } } @media only screen and (min-width: 1170px) { .nav-bar { -webkit-transition: background-color 0.3s; -moz-transition: background-color 0.3s; transition: background-color 0.3s; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } } @media only screen and (min-width: 768px) { .nav-trigger { width: 100px; padding-left: 1em; background-color: transparent; height: 30px; line-height: 30px; right: 2.2em; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .nav-trigger .menu-text { display: inline-block; } .nav-trigger .menu-icon { left: auto; right: 1em; -webkit-transform: translateX(0) translateY(-50%); -moz-transform: translateX(0) translateY(-50%); -ms-transform: translateX(0) translateY(-50%); -o-transform: translateX(0) translateY(-50%); transform: translateX(0) translateY(-50%); } } @media only screen and (min-width: 768px) { .primary-nav { padding: 80px 0; } } /* * Following is the FONT SIZE of the main nav menu items ======== */ @media only screen and (min-width: 1170px) { .primary-nav li { font-size: 30px; font-size: 1.4rem; } .primary-nav .label { font-size: 16px; font-size: 1rem; } } @media only screen and (max-width: 320px) { .primary-nav li { font-size: 22px; font-size: 1.0rem; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: .2em 0; text-transform: capitalize; } } /* iPad horizontal-orientation width */ @media only screen and (max-width: 1024px) { .majorContent { margin-top: 23%; font-size: 1em; } .majorTitle h2 { display: none; } } /* iPad vertical-orientation width */ @media only screen and (max-width: 768px) { .majorContent { margin-top: 23%; font-size: 1em; } .majorTitle h2 { display: none; } } /* iPhone vertical-orientation width */ @media only screen and (max-width: 320px) { .primary-nav li { font-size: 22px; font-size: 1.0rem; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: .2em 0; text-transform: uppercase; } .majorContent { margin-top: 27%; font-size: 1em; } .majorTitle h1 { font-size: 1.8em; margin-left: 12%; } .majorTitle h2 { display: none; } }