*, *: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 MASSTER 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 {
/* font-size: 100%; */
/* 26 NOV 2015, Thanksgiving Day!!
Testing to see how our font styles are actually working.
I think that we have not done this correctly. For instance, we have a body-style, .majorThis & That font styles.
And since the h1 et al headers are in the body are their styles being overridden by the body style????
We are about to find out.
*/
/*
I just commented the following line out to see its impact
*/
/* font-family: "Source Sans Pro", sans-serif; */
/*
Commenting the above line had NO AFFECT on the page font style. Why not??
*/
color: white;
background-color: #000033;
/* Note. Have been using #000033 (blue) for the upper color. Nice. */
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C0C0C0), to(#101010));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #101010, #C0C0C0);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #101010, #C0C0C0);
/* IE 10 */
background: -ms-linear-gradient(top, #101010, #C0C0C0);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #101010, #C0C0C0);
}
/*
* When primary navigation is visible,
* this rule prevents content in the background from scrolling
* ----------------------------------------------------------- */
body.overflow-hidden { overflow: hidden; }
/* ======================================================================
*
* MAJOR PAGES > HEADER & CONTENT CODE SECTION
*
* ====================================================================== */
/* Following rules insure that h2 goes behind h1 --------- */
.majorTitle h1, h2 { position: relative; }
/* this was causing the h1 title to appear above the memu background */
/*.majorTitle h1 { z-index: 2 }*/
.majorTitle h2 { z-index: 1 }
/* /end of h1 & h2 z-index rules ------------------------- */
.majorTitle h1 { -webkit-font-smoothing: antialiased;
font-family: "Copperplate";
text-transform: uppercase;
width: 63%;
margin-top: 3%;
margin-left: 18.2%;
margin-bottom: 2%;
padding-bottom: 0.5%;
font-size: 3.0em; /* orig was 5.0em */
font-style: normal;
/*color: rgba(240, 0, 0, 0.8);*/
7color: rgb(0,0,255);
text-align: left;
font-weight: bold;
7font-family: 'Playfair Display', serif; /* added this font on 8 FEB 2016 */
text-shadow: 5px 5px 5px rgba(16, 0, 0, 1.0);
letter-spacing: 0.1rem;
clear: both;
border-bottom: 1px solid white;
}
/*
*
* Following two rules stylize the link built-in to the main
* page title to take user back to home page.
*
* --------------------------------------------------------- */
.majorTitle h1 a { color: rgb(255,0,0); 7color: rgba(240, 0, 0, 0.8);
text-decoration: none; }
.majorTitle h1 a:hover { color: #66CC00; /* minty green color */ }
/* /end of h1 link and hover styling */
.majorTitle 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;
/*border: 1px solid red;*/ /* used for testing purposes only */
}
/*
* Following is used for paragraph headings only
*
* ------------------------------------------------------ */
h3 { margin: 0;
padding: 0;
margin-top: 1em;
/* following code used to pull
down closer to
element below */
margin-bottom: -0.5em;
font-size: 1.2em;
/*text-transform: uppercase;*/
font-weight: 400; /* orig was 600 */
letter-spacing: 0.0em;
}
/* 26 JUL 2015
*
* Added this style for the gallery page, but could be used
* elsewhere as well.
*/
h4 { margin: 0;
padding: 0;
margin-top: 1.0em;
color: #585858; /* new 16 APR 2016 */
text-transform: uppercase;
margin-bottom: 1.0em;
font-size: 1.0em;
font-weight: 600;
letter-spacing: 0.0em;
}
/* ------------------------------------------------------------
*
* 24 FEB 2016
*
* Followintg is styling for the h5 tag
*
* ----------------------------------------------------------- */
h5 { color: red;
text-transform: uppercase;
margin-top: 1em;
}
/* ===== CUSTOM FONT STYLING =============================
*
* These styles were copied over from the minor style sheet
*
* -------------------------------------------------- */
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 ========================= */
/* 26 NOV 2015. Thanksgiving Day!
*
* Am trying to modify the font style of the major pages.
*
* I removed the entire style sheet as it did not work for some reason.
*/
.majorContent { font-family: 'Poppins', sans-serif;
font-size: 1.0em;
font-style: normal;
font-weight: 300;
word-spacing: 0.1em;
letter-spacing: 1px; /* turned this off for Work Sans font and looks very readable */
line-height: 1.3em;
7color: rgba(2, 23, 37, 0.9);
color: #585858; /* new 28feb2016 */
width: 90%;
max-width: 900px;
background-color: #D8D8D8;
margin: 0 auto;
margin-top: -4%;
padding: 2% 5% 5% 5%;
text-align: justify;
border: 10px solid #C0C0C0;
}
/*
* Following code used to style photos
* ------------------------------------------------------------------------- */
7mg.figure { max-width: 100%; /* changed from width: 100%; to max-width ... */
7max-width: 800px; /*== set max-width of img to its container size --*/
padding: 1em; /* white border */
/*margin: 2em;*/
7argin: 2em auto;
display: block;
*ackground-color: #FFFFFF;
*ox-shadow: 4px 4px 8px rgba(0,0,0,0.75);
}
figcaption { font: 0.9em;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
margin: 15px 0 0 0;
}
/*
NEW! 2 APR 2017
the following style was added to improve look of figcations
*/
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;
}
/* -------------------------------------------------------------------
* 15 APR 2016 @ 2142H
*
* Following styles :
*
* img { ... }
* figure.topFigure { ... }
* figure.otherFigure { ... }
*
* are from No-Nav-minor styles
* added these to keep all page styles as consistent as possible.
*
* ------------------------------------------------------------------- */
img { max-width: 100%; }
figure.topFigure { max-width: 100%; /* -- was 100%-- */
padding: 2.000000%; /* 18 / 900 */
/* NEW! 5 NOV 17 I commented out the following two styles to help the images in the fly fishing page. Works! */
7margin-left: 13.1111111%; /* orig was 100px > 100 / 900 */
7margin-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 */
7margin-left: 13.1111111%; /* orig was 100px > 100 / 900 */
7margin-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);
}
.just-a-list { width: 80%; margin-left: 5%; list-style-type: decimal; }
/*
* Just a plain old list without numbers, but using a square icon
* --------------------------------------------------------------------------
.plain-list { width: 80%; margin-left: 5%; list-style-type: square; } */
.plain-list { width: 80%; margin-left: 5%; list-style-image: url(images/magenta-square.gif); }
#second-topic { margin-top: 2em;
}
/*
* The following class .note is used to create 'Notes/Tips' in our content
* to point out important concepts or warning
*/
p.just-a-note { color: black;
width: 90%;
margin: 0 auto;
padding: 3%;
7background-color: #383838;
7background-color: #F0F0F0;
border: 2px solid black;
border-radius: 10px;
display: inline-block;
}
/*
* Following rule used to emphasize certain text in content
*
* ------------------------------------------------------------- */
em { font-style: italic;
font-weight: bold;
}
.quote { font-style: italic;
color: blue;
*margin-left: 5%; /* this does not help?? */
padding-left: 10%;
}
/*
* Following three rules are for styling our 'tip' comment blocks.
* NOTE - These work fine so long as they are NOT within another
* div element. They push the lower text to the side as though there
* were margin/padding beyond what was styled for the well-behaving tip
*
* ------------------------------------------------------------- */
.tip { width: 90%;
margin-bottom: 2em;
margin-top: 2em;
overflow: hidden;
}
.tip .title .tip-title { float: left;
width: 3em;
padding: 0;
margin: 0;
font-size: 1.5em;
font-weight: 500;
color: #D00000;
text-transform: capitalize;
display: inline; /* IE7 hack */
/*border: 1px solid red;*/ /* used for testing purposes only */
margin-top: 1.8em;
margin-bottom: 1em;
/*padding-bottom: 4em;*/ /* orig code works fine */
padding: 0 0 3em 0; /* ok this worked fine to shift title to right */
}
.tip .tip-info p{ float: right;
padding: 0;
margin: 0;
width: 80%;
/*border-top: 2px solid #A0A0A0;*/
border-right: 10px solid #A0A0A0;
/*border-bottom: 2px solid #A0A0A0;*/
border-left: 10px solid #A0A0A0;
/*border-radius: 10px;*/
background-color: #FFFFCC;
display: inline; /* IE7 hack */
margin-left: 0px;
padding: 1em;
margin: 1em 2em 0 1em; /* shift content to left 2em */
}
/* --- /end of 'tip' styles -------------------------------------- */
/*================= italics-line TEST --------------------------------------- */
/* Following spaces the p {element}s nicely */
.italics { font-style: italic; }
.redColor { color: red; }
/* Following italicizes the p {element}s nicely */
.majorContent p { margin: 1.0em 0; }
/* --------------------------------------------------
*
* IN USE > by MAJOR pages
* used for linking to content subjects to be covered
*
* -------------------------------------------------- */
.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-left: 5%;
margin-bottom: 5px; /* New! 5 SEP 2017 Wanted some white space between each link */
}
/*
* The following two rules are used to style links to EXTERNAL sources
* --------------------------------------------------------------------- */
a.external-link { color: blue; text-decoration: none; text-transform: capitalize; }
a.external-link:hover { color: red; }
/*
* Following code used to style the back-to-top buttons on certain pages
*
* ------------------------------------------------------------------------ */
.back-to-top a { text-decoration: none;
background-color: white;
color: black;
font-size: 0.6em;
padding: 3px;
border-radius: 5px;
margin-left: 85%;
border: 2px solid gray;
margin-top: -20px;
box-shadow: 4px 4px 8px rgba(0,0,0,0.75);
}
.back-to-top p { margin-top: -10px; } /* this is no help at all */
a.up-arrow {
7width: 50%;
7height: 50%;
7margin-left: 50%; /* this has no affect ?? */
padding-left: 90%; /* this works to position hoarizongtally */
padding-top: 0%;
margin-top: -5%; /* this worked to move icon up */
7float: right;
/*border: 1px solid black;*/
display: inline-block;
}
/* /end of .majorContent class code --------------------- */
/* ==========================================================
*
* This is where the nav styling used to be.
*
* All the styling was save into the MASTER copy 11 doc
*
*
* ========================================================== */
/* ======= END OF NAV STYLING ============================ */
/* -----------------------------------------------------------------
*
* Footer styles follow next
* 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
*
*
* ---------------------------------------------------------------- */
/* # 2
* --------------------------------------------------------------
a 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;
}
}
/* ===== iPad and iPhome viewport MEDIA QUERIES ================================================ */
/* 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;
}
}