/*
CSS theme for Greenville County Bird Club
Author: Jeff Click
Version: 1.0
Date: February 27, 2020
NOTES ON COLORS:
Background / area / border colors:
#BABEC2 - Body background color. Used as the neutral gray of the background OUTSIDE the section of the pages with text. Only visible on larger screens.
#336699 - Header (title) background. Medium slightly grey blue.
#264d73 - Top navigational bar. A darker shade of the blue used for the header.
#b1cae7 - Navigational button HOVER color. Light blue.
#E6EAF0 - Section (main area) background. Light grey - slight hint of blue... apparently.
Font colors:
NOTES ON FONTS AND FONT SIZES:
- Open Sans - Used for paragraph text and within and for descriptive text, at 400 wt. Also used in navigational buttons at 600 weight, all caps.
sized at 0.9375 em; text within headers sized to hit the same target based on inherited sizes.
- Roboto - Used for
and at 700 wt and at 400 wt / italic for included notes.
- Spectral SC - Used for at 400 wt and at 500 wt.
- Spectral - Used for .
NOTES ON SCREEN-SIZE BREAKPOINTS:
Breakpoints selected for website content and not for specific devices. Breakpoints are:
- Below 471 px : For tiny screens / phones in portrait
- 471 - 740 px : Smaller tablets / phones in landscape
- 741 - 992 px : Smaller computers / larger tablets
- Above 992 px : Larger screens
NOTES ON IMAGES, MAPS, ETC.:
NOTES ON MAKING INTERNET EXPLORER WORK:
Using the section of CSS below that starts with ..."@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)" and specifying font sizes in px instead of em;
Not certain this works with older versions of IE; may want to try conditional comments to refer to IE-specific CSS file
No other changes at this point
*/
body
{background-color:#BABEC2;max-width:768px;margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;display:grid;font-size:100%}
* {box-sizing: border-box}
h1 {color:#ffffff;font-family:'Spectral SC',serif;font-weight:400;font-size:1.7em;margin-top:8px;margin-bottom:6px;line-height:1em;text-align:center}
h2 {color:#eef2f7;font-family:Spectral,serif;font-weight:400;font-size:1.3em;text-align:center;line-height:1em;font-style:italic;margin-top:2px;margin-bottom:8px;}
h3 {color:#008000;font-family:'Spectral SC',serif;font-weight:500;font-size:1.3em;}
h4 {color:#545a5f;font-family:Roboto,sans-serif;font-weight:700;font-size:1.125em;}
h5 {color:#545a5f;font-family:Roboto,sans-serif;font-weight:700;font-size:1.0em;font-style:italic;padding-left:25px;}
h6 {color:#545a5f;font-family:Roboto,sans-serif;font-weight:300;font-size:0.71em;margin-top:0px;margin-bottom:0px;margin-left:10px;display:block;}
p {color:black;font-family:'Open Sans',sans-serif;font-weight:400;font-size:0.9375em;}
a:link {color:#0000FF; background-color:transparent; text-decoration:none;}
a:visited {color:#9b54de; background-color:transparent; text-decoration:none;}
a:hover {color:#00B200; background-color:transparent; text-decoration:underline;}
a:active {color:#ff0000; background-color:transparent; text-decoration:underline;}
ul.nav {
list-style-type: none;
margin-top: 0%;
margin-bottom: 0%;
padding: 0;
overflow: hidden;
background color: #264d73;
}
ul.std {color:black;
font-family:'Open Sans',sans-serif;font-weight:400;
font-size:0.9375em;}
li.navbut {
float: left;
}
li.navbut a {
display: block;
color: #eef2f7;
padding-top: 14px;
padding-bottom: 14px;
background-color: #264d73;
text-align: center;
text-decoration: none;
border-left:1px solid;
border-left-color:#336699;
font-family:'Open Sans',sans-serif;font-weight:600;font-size:0.85em;
}
li.navbut:last-child a {
border-right:1px solid;
border-right-color:#336699;
}
li.navbut a:hover {
background-color: #b1cae7;
color: #0000ff;
}
.subsect {border-bottom-style:solid;
border-bottom-width:2px;
border-bottom-color:#006600;
}
.subsect-last
{
padding-bottom:30px;
}
.trip {border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#a0a6ab;
padding-bottom:15px;
margin-bottom:30px;
}
.triplast {padding-bottom:15px;
margin-bottom:30px;
}
.desktop {max-width:100%}
.handheld {max-width:100%}
.row::after {
content: "";
clear: both;
display: table;
}
.col-50 {
width:50%;
float:left;
display:inline-block;
margin-left:30px;
margin-right:30px;
border-width:1px;
border-color:black;
}
.col-45L {
width:45%;
float:left;
display:inline-block;
}
.col-45R {
width:45%;
float:right;
display:inline-block;
}
.col-25R {
width:25%;
float:right;
display:inline-block;
}
.col-65L {
width:65%;
float:left;
display:inline-block;
}
.loc-title {
display:block;
margin-top:0;
}
.loc-note-div {
display:inline-block;
margin:0;
padding:0;
}
.loc-note {
float:left;
margin-left:25px;
margin-right:45px;
margin-bottom:15px;
display:inline-block;
color:#545a5f;
font-family:Roboto,sans-serif;
font-weight:300;
font-size:0.8em;
padding-top:0;
padding-bottom:0px;
}
.loc-desc {
margin-top:0;
}
.w-0900 {width:9.0%}
.w-1000 {width:10.0%}
.w-1250 {width:12.5%}
.w-1350 {width:13.5%}
.w-1500 {width:15.0%}
.w-2000 {width:20.0%}
.menubutton-hh {
background-color: #264d73;
border: none;
color: #eef2f7;
padding: 10px 0px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family:'Open Sans',sans-serif;
font-weight:600;
font-size: 1em;
width: 100%;
}
.menubutton-hh:link {color:#eef2f7; background-color:transparent; text-decoration:none;}
.menubutton-hh:visited {color:#eef2f7; background-color:transparent; text-decoration:none;}
.menubutton-hh:hover {color:#0000ff; background-color:#b1cae7; text-decoration:none;}
.menubutton-hh:active {color:#0000ff; background-color:#b1cae7; text-decoration:none;}
.navbtn-hh {
width: 20%;
}
.navbut-hh {
display: block;
color: #eef2f7;
padding-top: 14px;
padding-bottom: 14px;
background-color: #264d73;
text-align: center;
text-decoration: none;
font-family:'Open Sans',sans-serif;font-weight:600;font-size:0.85em;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
text-align: left;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 0;
z-index: 1;
overflow: auto;
}
.menuitem {
display:block;
color: black;
padding: 6px 12px;
text-decoration: none;
font-family:'Open Sans',sans-serif;
font-weight: 400;
font-size: 0.9em;
}
.menuitem:visited {color:black;}
.menuitem:hover {color: #0000ff;background-color: #d8e5f3;text-decoration: none;}
.dropdown:hover .dropdown-content {display: block;}
.cbcmap {margin-left:5%;margin-right:5%;height:800px;max-width:100%;padding-bottom:30px}
.migmap {margin-left:5%;margin-right:5%;height:900px;max-width:100%;padding-bottom:30px}
.h4desc {font-family:'Open Sans',sans-serif;font-weight:400;font-size:0.8333em;color:black;font-style:normal;}
.tripnote {font-weight:300;font-style:italic;font-size:0.9778em;color:#484d51;}
.h5desc {font-family:'Open Sans',sans-serif;font-weight:400;font-size:0.9375em;color:black;font-style:normal;}
.report {font-family:'Open Sans',sans-serif;font-weight:600;font-size:0.9375em;color:#545a5f;margin-top:10px;margin-left:25px;}
.report-note {
display:inline-block;
margin-left:35px;
margin-top:10px;
color:#545a5f;
font-family:Roboto,sans-serif;
font-weight:300;
font-size:0.9em;
font-style:italic;
}
.indent {padding-left: 25px;}
.rednote {color:#e60000}
#header-handheld {
max-width:470px;
background-color:#336699;
text-align:center;
padding:1px;
}
#header-desktop {
background-color:#336699;
text-align:center;
padding:1px;
}
#navbar {
line-height:13px;
background-color:#264d73;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
text-align:center;
padding-top:0px;
padding-bottom:0px;
padding-left:0%;
padding-right:0%;
}
#navbar-handheld {
background-color:#264d73;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
text-align:center;
padding-top:0px;
padding-bottom:0px;
padding-left:0%;
padding-right:0%;
}
#section {
background-color:#E6EAF0;
max-width:768px;
height:100%;
float:left;
padding-left:8%;
padding-right:8%;
}
/* THE SECTION BELOW IS FOR INTERNET EXPLORER - NOT SURE IT FUNCTIONS FOR ALL VERSIONS */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
h1 {font-size:27px}
h2 {font-size:21px}
h3 {font-size:20px}
h4 {font-size:18px}
h5 {font-size:16px}
p {font-size:15px}
.report {font-size:15px}
li.navbut a {font-size:13.6px}
.loc-note {font-size: 12.8px}
}
/* END IE NONSENSE */
@media only screen and (max-width: 470px) {
#header-desktop {display:none;}
#navbar-handheld {max-width:470px;}
#navbar {display:none;}
#section {max-width:470px;
padding-left:15px;
padding-right:15px;
}
li.navbut a {font-size:1.0em;
border:none;
}
.cbcmap {display:none;}
.desktop {display:none;}
li.navbut {width:20%;}
.welcome {font-size:2em;}
[class*="col-"]
{width: 100%;
margin:0;
padding:0;}
}
@media only screen and (min-width: 471px) and (max-width: 740px) {
#header-handheld {display:none;}
#navbar {display:none;}
#section {max-width:740px;
padding-left:15px;
padding-right:15px;
}
li.navbut a {font-size:1.0em;
border:none;
}
.location-note {
display:inline-block;}
.cbcmap {display:none;}
.desktop {display:none;}
}
@media only screen and (max-width: 992px) and (min-width: 741px) {
body {max-width:992px;}
#header-handheld {display:none;}
#navbar-handheld {display:none;}
#navbar {max-width:100%;
padding-left:0px;
padding-right:0px;
}
#section {max-width:100%;
padding-left:5%;
padding-right:5%;
}
.handheld {display:none;}
}
@media only screen and (min-width: 993px) {
body {max-width:992px}
#header-handheld {display:none;}
#navbar-handheld {display:none;}
#navbar {max-width:100%;
padding-left:5%;
padding-right:5%;
}
#section {max-width:992px;
padding-left:8%;
padding-right:8%;
}
.handheld {display:none;}
}