/* -------------------------------- Primary style -------------------------------- */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* ====================================================================================== * * NOTE! 28 NOV 2015 @ 1415H READ THIS! * * This is a DUPLICATE STYLE SHEET which is being stripped of all the nav styling. * * The original file is in the MASTER CSS FILES folder in the css folder. * * I have already done the same to the home.css style sheet and the home.html works perfectly. * * ====================================================================================== */ /* ----------------------------------------------------------------- * * BODY styles follow * * ----------------------------------------------------------------- */ body { font-size: 100%; 7color: black; 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; } /* ----------------------------------------------------------------- * * CONTENT styles follow * * ----------------------------------------------------------------- */ /* ----------------------------------------------------------------- * * 6 MAR 2016 * I added the following style to style just the top figure and keep * it nicely spaced from the top of the page. * * ----------------------------------------------------------------- */ 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: 3em; margin-bottom: 2em; background-color: #FFFFFF; box-shadow: 4px 4px 8px rgba(0,0,0,0.75); } /* this style is for drawings 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: #C0C0C0; box-shadow: 4px 4px 8px rgba(0,0,0,0.75); } figcaption.spacing { padding-top: 1em; padding-bottom: 0em; 7color: #848484; 7color: #6E6E6E; color: #595959; /* darker shade of black */ font-family: 'Poppins', sans-serif; font-style: normal; } /* --------------------------------------------------------------------- * * 3 MARCH 2016 * * want to try a new style with our

tags * got this idea from McFarland's text.html chap 6 project * following style moves

tag component to right * * --------------------------------------------------------------------- */ .minor .minorContent p { margin-left: 13.1111111%; /* orig was 100px > 100 / 900 */ margin-right: 5.555555%; /* 50 / 900 */ margin-bottom: 10px; 7margin: 1.0em 0; } .minor .minorContent h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-style: bold; font-size: 1.5em; color: orange; text-transform: uppercase; margin-top: 1.5em; } .minor .minorContent h4 { 7font-family: 'Playfair Display', serif; font-family: 'Poppins', sans-serif; font-weight: 400; font-style: bold; font-size: 1.4em; margin-left: 13.1111111%; margin-top: 2em; 7color: #6A6562; 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: bold; font-size: 1.1em; margin-left: 13.1111111%; margin-top: 2em; 7color: black; color: #6A6562; margin-bottom: -10px; /* reduce space between

title and

elements */ text-transform: uppercase; } /* ------------------------------------------------------------------- * * 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!!! * ------------------------------------------------------------------- */ img { max-width: 100%; } /* body styling */ .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; } /* blog styling */ .blogContent { font-family: 'Poppins', sans-serif; 7font-family: 'Merriweather', 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; } .blogContent h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-style: bold; font-size: 1.5em; color: #A0A0A0; /* gray shade */ text-transform: uppercase; margin-top: 1.5em; } /*.blogContent .blogDate h4 { color: black; font-family: 'Poppins', sans-serif; font-weight: 400; font-style: bold; font-size: 0.6em; }*/ .blogContent p { margin-left: 13.1111111%; /* orig was 100px > 100 / 900 */ margin-right: 5.555555%; /* 50 / 900 */ margin-bottom: 1.111111111111%; /* 10 / 900 */ margin-top: 1.777777777777%; /* 16 / 900 */ } .blogContent h4 { margin-top: 2em; margin-left: 0em; } .blogContent h4 .blogDate { font-family: 'Poppins', sans-serif; font-weight: 700; font-style: bold; font-size: 2.0em; color: #FFA500; background-color: #A0A0A0; 7background-color: #FFA500; padding-left: 0.2em; padding-right: 0.2em; margin-right: 0.2em; } /* this spaces the p {element} nicely */ .minorContent p { margin: 1.0em 0; } /* this spaces the p {element} nicely */ .aboutMeContent { margin: 1.0em 0; } /* ---------------------------------------------------- * 12 FEB 2016 * Added this to style our 'under construction' line * ---------------------------------------------------- */ .under-construction { font-size: 1.1em; font-style: normal; color: red; } .just-a-list { width: 80%; margin-top: 2em; /* NEW 5AUG2015 - added to style the Festools page */ margin-left: 5%; margin-bottom: 2em; /* NEW 5AUG2015 - added to style the Festools page */ list-style-type: decimal; } .list-title { color: red; margin-bottom: -1%; padding-bottom: -1%; } ol.numbered { list-style: decimal; margin-right: 5.555555%; /* 50 / 900 */ margin-left: 17%; } } /* -------------------------------------------------- * 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 --------- */ /* -------------------------------------------------------------------------- * *

styling * 10 FEB 2016. Copied the major

styling and replaced the minor styling. * * ------------------------------------------------------------------------- */ .minorTitle h1{ -webkit-font-smoothing: antialiased; width: 63%; margin-top: 3%; margin-left: 18.2%; margin-bottom: 2%; padding-bottom: 0.5%; font-size: 2.5em; /* orig was 5.0em */ font-style: normal; text-align: left; font-weight: bold; font-family: 'Playfair Display', serif; text-transform: uppercase; text-shadow: 5px 5px 5px rgba(16, 0, 0, 1.0); letter-spacing: 0.2rem; clear: both; border-bottom: 1px solid white; } .minorTitle a { text-decoration: none; color: rgb(255, 0, 0); 7color: rgba(255, 255, 255, 1.0); } .minorTitle a:hover { color: #66CC00; /* minty green color */ } /* * Following code affects 'Wood Working By Design' text ==================== */ /*.toolTitle h2 { */ .minorTitle h2 { width: 63%; max-width: 1170px; font-family: 'Playfair Display', serif; margin-top: -1.0%; margin-bottom: 8%; /* this rule will move content up or down */ margin-left: 18.8%; color: #D8D8D8; text-transform: uppercase; text-shadow: 3px 3px 3px rgba(24, 0, 0, 1.0); letter-spacing: 0.5em; padding: 0; } /* === this styles the

title in .minorContent only === */ /* END OF TITLE CODE ==================================================== */ /* ======== MORE FOLDER STYLING ======================================== */ .more-title h1 { -webkit-font-smoothing: antialiased; 7font-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; /*border: 1px solid red;*/ /* used for testing only */ } /* * Following is used for paragraph headings only * * ------------------------------------------------------ */ /* 2 AUG 2015 * * not sure why we are using the following style ?? * we have an issue when an img follows because the imagae * overlaps the bottom half of the h3 text * will change it to 1.0em and see how that looks * * Result: much better. img now does not overlap the h3 text * will leave it as it is until we find a problem with this chg. */ /* commented out because trying to consolidate all of the

styles h3 { margin: 0; padding: 0; margin-top: 1em; 7margin-bottom: -0.5em; margin-bottom: 1.0em; 7font-size: 1.2em; text-transform: uppercase; 7font-weight: 500; letter-spacing: 0.1em; 7color: red; } */ /* ===== CUSTOM FONT STYLING ============================= * -------------------------------------------------- */ strong { font-weight: 400; } /* this was zeroed out with reset.css so we had to bring it back */ .redColor { color: red; } .blackColor { color: black; } .bolden { font-weight: bold; } .ital { font-style: italic; } .upr { text-transform: uppercase; } .under { text-decoration: underline } .em { font-style: italic; text-decoration: underline; } /* === END OF FONT STYLING ========================= */ .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: thin; font-weight: 75; /*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: #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 * ------------------------------------------------------------------- */ p.just-a-note { color: black; width: 80%; margin: 0 auto; /*border-left: 4px solid red;*/ padding: 5%; background-color: rgba(192,192,192,0.3); background-color: #FFFF99; border: 2px solid black; border-radius: 10px; } /* * 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; } /* * The following two rules are used to style links to external sources * --------------------------------------------------------------------- */ a.external-link { color: red; text-decoration: none; text-transform: capitalize; } a.external-link:hover { color: blue; } .fig-caption { width: 70%; margin-left: 2rem; margin-bottom: 2rem; color: black; } /* * 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 */ margin-top: -0.5em; /* this worked to move icon up slightly */ display: inline-block; } /* * Following rule used to emphasize certain text in content * * ------------------------------------------------------------- */ em { font-style: italic; font-weight: bold; } /* ------ FOOTER STYLING ----------------------------------------- * * modified 13FEB2016. consolidated files and increase height of line. * * ----------------------------------------------------------------- */ 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; } /* /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; } footer { background-color: rgba(20, 20, 20, 0.0); } footer .copyright { opacity: 0; } }