*
*/
/* centered columns styles */
.row-centered {
text-align: center;
}
.row-centered > div {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
}
/**
* .flex-video
* This helper class allows for video embeds to be responsive. Just add your video embed inside of a parent .flex-video div.
*
* Most videos these days have a 16:9 (HD) ratio. If your video embed is of a 4:3 (SD) ratio, add .sd along with the .flex-video class.
*
* High-Depth ratio videos (16:9)
*
* * Insert video embed here *
*
*
* Standard-Depth ratio videos (4:3)
*
* * Insert video embed here *
*
*
* This helper was inspired by the .flex-video helper found in Foundation:
* @source: http://foundation.zurb.com/docs/components/flex_video.html
*/
.flex-video {
height: 0;
margin-bottom: 1.5em;
overflow: hidden;
position: relative;
padding-top: 56.25%;
}
.flex-video embed,
.flex-video iframe,
.flex-video object,
.flex-video video {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.flex-video.sd {
padding-top: 75%;
}
/**
* .fixed-z
* This helper class adds the "translateZ" hack for selectors that are set
* as position: fixed to help prevent browser repaints on browser scrolls/resize.
*/
.fixed-z {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
/**
* .no-select
* This helper class disables selection for selectors. This is handy for
* navigations, links, headers, buttons, etc..
*/
.no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/**
* .text-lowercase
* This helper class transforms the text within to all lowercase.
*/
.text-lowercase, .lowercase {
text-transform: lowercase;
}
/**
* .text-uppercase
* This helper class transforms the text within to all uppercase / uppercase.
*/
.text-uppercase, .uppercase {
text-transform: uppercase;
}
.text-small-caps, .small-caps {
font-variant: small-caps;
}
/**
* .v-center
* This helper class helps vertically align elements.
* In order to get .v-center to work properly, you have to have a child
* .v-center within the parent .v-center-wrap selector.
*
* It is recommended that you add some sort of height to your .v-center selector
* to get the desired effect.
*
* Example:
*
*
*
I'm vertically aligned!
*
*
*
*/
.v-center-wrap {
display: table;
width: 100%;
}
.v-center {
display: table-cell;
vertical-align: middle;
}
/** End Lil' B ============================================= */
/** Bootstrap Alterations and Additions ==================== */
/**
*
* Centered Columns - PS
* See: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns
* but slightly modified. Changed .col-centered into .row-centered > div to avoid extra markup.
* USAGE: Just add .row-centered like this:
*
*/
/* centered columns styles */
.row-centered {
text-align: center;
}
.row-centered > div {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
vertical-align: top;
}
/** END Bootstrap Alterations and Additions */
/* Style elements to MATCH Bootstrap ======================= */
/* form elements ===== */
input, select, textarea {
display: block;
/* width: 100%; */
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
/* Miscellaneous ============================================ */
/* font awesome xs ======= */
.fa.fa-xs {
font-size: .85em;
}
/* end Miscellaneous ========================================== */
/* Site Structure ============================================= */
/* Navigation elements ======== */
/* Top Navigation ==== */
/* move the nav bar to the top, above the header, in header.php file */
nav.site-navigation {
background-color: #dee8e4;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
box-shadow: 0 0 6px rgba(94, 143, 124, 1);
}
.admin-bar nav.site-navigation {
top: 32px;
}
.site-navigation .container {
padding-bottom: 0;
}
.site-navigation .navbar {
margin-bottom: 0;
}
.site-navigation .navbar-default {
border-radius: 0;
background-color: transparent;
border-color: transparent;
}
.navbar.navbar-default {
border: 0px solid transparent;
}
.navbar-default .navbar-nav > li > a {
text-transform: uppercase;
padding: 15px 8px;
font-size: 16px;
color: #1c1c1c;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
color: #fff;
background-color: #5e8f7c;
}
.navbar-nav > li > .dropdown-menu {
font-size: 16px;
}
.navbar-default .navbar-nav > li.current_page_ancestor a.dropdown-toggle,
.navbar-default .navbar-nav > li.current_page_ancestor a.dropdown-toggle:active,
.navbar-default .navbar-nav > li.current_page_ancestor a.dropdown-toggle:focus,
.navbar-default .navbar-nav > li.current_page_ancestor a.dropdown-toggle:hover,
.navbar-default .navbar-nav > .open > a.dropdown-toggle,
.navbar-default .navbar-nav > .open > a.dropdown-toggle:active,
.navbar-default .navbar-nav > .open > a.dropdown-toggle:focus,
.navbar-default .navbar-nav > .open > a.dropdown-toggle:hover {
color: #000;
background-color: #bfdad0;
}
.navbar-default .navbar-nav > li.current_page_ancestor .dropdown-menu li > a:hover,
.navbar-default .navbar-nav .dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .dropdown-menu > li > a:hover {
background-color: #bfdad0;
background-image: none;
}
.navbar-default .navbar-nav .dropdown-menu > .active.current_page_item > a,
.navbar-default .navbar-nav .dropdown-menu > .active.current_page_item > a:focus,
.navbar-default .navbar-nav .dropdown-menu > .active.current_page_item > a:hover {
background-color: #5E8F7C;
background-image: none;
cursor: default;
}
/* Header elements =========== */
.site-branding {
/* width: 36.5em; */
position: relative;
margin-top: 10px;
}
.site-branding a {
display: block;
margin-right: 15px;
max-width: calc(25% - 15px);
}
.site-branding img {
width: 9em;
max-width: 100%;
}
.branding-text {
/* display: flex;
flex-direction: column;
justify-content: center; */
width: 700px;
height: 100px;
max-width: 75%;
background-image: url('img/byway-title-800x100.png');
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
/* position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%); */
position: relative;
float: left;
transform: translateY(50%);
}
.site-title,
.site-description {
text-indent: -9999px;
max-height: 1px;
max-width: 1px;
overflow: hidden;
}
/* Recurring Elements ========================================= */
/* Drop Caps ======= */
.entry-content > p:first-of-type {
/* clear: both; */
}
.entry-content > p:first-of-type::after {
/* content: '';
display: block;
clear: left; */
}
.entry-content > p:first-of-type::first-letter {
/* color: #fff;
background-color: #5e8f7c;
float: left;
display: inline-block;
border-radius: 3px;
font-size: 6rem;
line-height: 1;
padding: 2.0rem 2rem 1.6rem;
margin: .1em .15em 4px 0;
font-family: 'Alegreya', georgia, serif; */
}
/* image modal ===== */
.iw-image-modal {
width: 95vw;
}
.iw-image-modal .modal-body {
padding: 0;
text-align: center;
background-color: #1e1e1e;
height: 93vh;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.iw-image-modal img {
max-height: 91vh;
display: block;
margin: 0 auto;
}
.iw-image-modal button.close {
margin-left: -26px;
opacity: .6;
background-color: #fff;
position: absolute;
top: 0;
right: 0;
z-index: 100;
}
div.article {
font-family: georgia, serif;
color: #777;
margin: 3em auto 0 1.5em;
}
.width-md div.article,
.width-sm div.article {
margin: 3em auto 0 .5em;
}
div.article .alignright {
/* margin-right: -21em; */
clear: both;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.width-md div.article .alignright,
.width-sm div.article .alignright {
max-width: 60%;
}
.width-xs div.article .alignright {
max-width: 100%;
}
div.article p {
margin-bottom: 1.35em;
line-height: 1.85;
font-size: 1.05em;
max-width: 46em;
}
.width-lg div.article p {
max-width: 44em;
}
.width-md div.article p,
.width-sm div.article p {
margin-bottom: 1em;
line-height: 1.65;
font-size: 1em;
}
div.header-image {
margin-bottom: 2rem;
}
div.outline img {
outline: 1px solid rgba(94, 143, 124, 0.35);
}
/* nav tabs ============== */
.hentry .nav-tabs li {
padding-left: 0;
text-indent: 0;
margin-bottom: 0;
}
.nav-tabs {
border-bottom: 1px solid #DEE8E4;
margin-bottom: 20px;
}
/* carousels (bootstrap) ============= */
a.carousel-control {
position: absolute !important;
top: 0;
bottom: 0;
left: 0;
width: 15%;
font-size: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.8);
background-color: rgba(0,0,0,0);
filter: alpha(opacity=50);
opacity: .5;
}
.carousel-control.left {
background-image: -webkit-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
background-image: -o-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0)));
background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
background-repeat: repeat-x;
}
.carousel-control.right {
right: 0;
left: auto;
background-image: -webkit-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
background-image: -o-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0)));
background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
background-repeat: repeat-x;
}
ol.carousel-indicators {
margin-bottom: 0;
bottom: 10px !important;
}
.hentry ol.carousel-indicators li,
.hentry ol.carousel-indicators li.active {
text-indent: -9999px;
margin-bottom: 0;
font-size: 7px;
}
.carousel-caption {
text-shadow: 2px 2px 1px rgba(0,0,0,1),-1px -1px 1px rgba(0,0,0,1);
}
/* Sidebar elements =================================== */
.sidebar-padder {
text-align: center;
}
.sidebar-padder aside {
text-align: left;
display: block;
margin: 0 auto 20px;
}
.social-buttons {
/* max-width: 140px; */
min-width: 140px;
}
.sfsi_wicons {
margin-left: 10px !important;
}
/* Also included are other places w/ no new window icons */
.social-buttons a[target="_blank"]::after,
.feed-tabs a[target="_blank"]::after {
content: "";
font-family: 'FontAwesome';
display: none;
transform: rotate(270deg) translate(.6em,0);
margin: 0 0 0 .2em;
font-size: 70%;
position: relative;
}
.sfsi_widget .norm_row {
/* max-width: 140px; */
}
aside.widget_search label {
width: 210px;
margin: 0 auto;
display: block;
}
/* Footer elements =================================== */
.site-info {
font-size: 16px;
}
.bottom-line {
width: 100px;
height: 5px;
margin: 10px auto 30px;
background-color: #DEE8E4;
border-radius: 50%;
}
/* Page and Section styles ==================================== */
/* homepage */
.home-header-image {
margin-bottom: 2em;
}
.tile-container {
padding-left: 0;
}
.tile-container .row {
text-align: center;
}
.tile-container .row > div {
display: inline-block;
vertical-align: top;
float: none;
margin-bottom: 15px;
text-align: left;
}
.tile {
min-height: 200px;
/* background-color: #5e8f7c; */
background-color: rgba(94, 143, 124, 1.0);
border-radius: 3px;
padding: 1em;
background-position: 100% 50%;
background-repeat: no-repeat;
}
.width-lg .tile,
.width-md .tile {
background-size: 115%;
}
a:hover .tile {
background-color: rgba(94, 143, 124, .8);
}
.tile-one {
background-image: url('img/tile-about-bg.png');
}
.tile-two {
background-image: url('img/tile-explore-bg.png');
}
.tile-three {
background-image: url('img/tile-todo-bg.png');
}
.tile p,
.tile h3 {
color: #fff;
}
.tile h3 {
font-size: 1.4em;
}
.width-lg .tile h3,
.width-md .tile h3,
.width-xs .tile h3 {
width: 4em;
line-height: 1.1;
margin: 0;
font-size: 1.2em;
}
.width-sm .tile h3 br {
display: none;
}
.page-public-transportation section {
background-color: rgba(179, 193, 170, .15);
border-radius: 5px;
padding: .5em 1.5em;
margin-bottom: 1em;
}
/* .page-explore-the-byway ================== */
.page-explore-the-byway h3 {
line-height: 1.4;
}
/* .page-things-to-do ===================== */
div.facebook-feed .fts-jal-fb-header {
display: none;
}
div.facebook-feed .fts-powered-by-text {
display: none !important;
}
div.facebook-feed .fb-social-btn-below-description {
margin-top: 1.5em !important;
min-height: 130px;
background-color: #DEE8E4;
text-align: center;
}
div.facebook-feed .fb-social-btn-below-description div {
margin: 0 auto;
text-align: left;
}
div.facebook-feed .fb_iframe_widget span {
width: 600px !important;
max-width: 100%;
}
div.facebook-feed .fb_iframe_widget span iframe {
position: absolute;
left: 50%;
margin-left: -250px;
}
div.facebook-feed .fb-page.fb_iframe_widget {
}
.page-history #wpadminbar {
/* opacity: .1; */
}
/* Contact forms and contact page =========== */
span.required {
font-size: 1.2em;
color: red;
font-weight: bold;
}
/* Area Maps page =============================== */
.map-tabs .nav-tabs {
border-bottom: 0px solid transparent;
margin: 1em auto;
}
.map-tabs .nav-tabs > li {
float: none;
padding-left: 0;
text-indent: 0;
margin-left: 0;
}
.map-tabs .nav-tabs > li > a {
position: relative;
display: inline-block;
padding: 0px 15px;
border: 0px solid transparent;
font-family: 'Alegreya', georgia, serif;
}
.map-tabs .nav-tabs > li.active > a {
color: #32735b;
cursor: default;
background-color: #fff;
border: 0px solid transparent;
font-size: 120%;
}
.map-tabs .nav-tabs > li > a:focus,
.map-tabs .nav-tabs > li > a:hover {
background-color: #fff;
border: 0px solid transparent;
}
.map-tabs .tab-content > div {
text-align: center;
}
.map-tabs .tab-content > div iframe {
text-align: left;
}
.map-tabs .nav-tabs li > a:before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 0 12px 12px;
border-color: transparent transparent transparent #32735b;
vertical-align: middle;
margin-right: 9px;
position: relative;
top: -2px;
opacity: .1;
}
.map-tabs .nav-tabs li.active > a:before {
opacity: 1.0;
}
.map-tabs iframe {
background-color: #fff;
}
/* /Page and Section styles =================================== */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* !! BREAKPOINTS - see: http://v4-alpha.getbootstrap.com/layout/overview/ */
/* We are using the same breakpoins as Bootstrap */
/* We are using the max-width version */
/* This means that we are using a mobile-LAST implementation */
/* Code for ALL devices appears ABOVE the breakpoint rules;
Code for specific, progressively smaller, devices appears within the breakpoint rules. */
/* Bootstrap breakpoints are identified as xl, lg, md, sm, xs */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Jumbo devices (large desktops 1921px or larger) - NOT a Bootstrap breakpoint */
@media (min-width: 1921px) {
/* code for jumbo screen goes here when needed */
}
/* Extra large devices (large desktops 1200px or larger) - Bootstrap xl */
/* No media query since the extra-large breakpoint has no upper bound on its width */
/* Code for ALL devices goes BEFORE this point. */
body {
/* for development use 0 3px 0 0 */
/* a border for quick visual indicator of which breakpoint we are in */
border-width: 0 0px 0 0;
border-style: solid;
border-color: red; /* indicates xl state */
}
.col-xl-4 {
width: calc(33.33333333% - 30px);
}
/* We use a state indicator to synch these breakpoints with our custom.js
* We use javascript to perform various tasks based on the visitors' browser window state.
* See our custom.js file for details. */
.state-indicator {
position: absolute;
top: -999em;
left: -999em;
z-index: 1; /* for xl state */
}
/* devices in LANDSCAPE mode */
@media (orientation: landscape) {
.state-indicator:before { content: 'landscape'; }
}
/* devices in PORTRAIT mode */
@media (orientation: portrait) {
.state-indicator:before { content: 'portrait'; }
}
/* Large devices - Bootstrap lg
* (less than 1200px:
* roughly smallish desktops, tablets in landscape mode, and everything smaller) */
@media (max-width: 1199px) {
/* lg code goes here */
.state-indicator {
z-index: 2;
}
body {
border-color: orange;
}
.container {
width: 94%;
}
.container .container {
width: 100%;
}
.col-lg-6 {
width: calc(50% - 30px);
}
.col-lg-4 {
width: calc(33.33333333% - 30px);
}
}
/* RARE - Large devices (desktops, 992px to 1199px ONLY) */
@media (min-width: 992px) and (max-width: 1199px) {
/* lg ONLY code goes here */
}
/* Medium devices - Bootstrap md
* (less than 992px:
* roughly tablets in portrait mode and some large phones in landscape mode, and all smaller) */
@media (max-width: 991px) {
/* md code goes here */
.state-indicator {
z-index: 3;
}
body {
border-color: yellow;
/* font-size: 15px; */
}
.container {
width: 96%;
}
.col-md-6 {
width: calc(50% - 30px);
}
.col-md-4 {
width: calc(33.33333333% - 30px);
}
.col-md-3 {
width: calc(25% - 30px);
}
.navbar-default .navbar-nav > li > a {
padding: 15px 5px;
}
}
/* RARE - Medium devices (usually tablets, 768px to 991px ONLY) */
@media (min-width: 768px) and (max-width: 991px) {
.alignright {
max-width: 60%;
}
}
/* Small devices - Bootstrap sm
* (less than 768px:
* roughly phones in lndscape mode and anything smaller) */
@media (max-width: 767px) {
/* sm code goes here */
.state-indicator {
z-index: 4;
}
body {
border-color: green;
}
.col-sm-12 {
width: 100%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-4 {
width: 33.33333333%;
}
.alignright {
display: block;
float: none;
margin: 0 auto 10px;
max-width: 100% !important;
}
.alignright img {
max-width: 100% !important;
}
div.article {
margin: 3em auto 0;
}
nav.site-navigation {
background-color: transparent;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 10;
opacity: 1.0;
pointer-events: none;
height: 0;
overflow: visible;
box-shadow: 0 0 0 transparent;
}
.admin-bar nav.site-navigation {
top: 42px;
}
.navbar.navbar-default {
position: relative;
}
.navbar-header {
position: absolute;
top: 0;
right: 0;
z-index: 10;
}
#main-menu,
.navbar-toggle {
pointer-events: auto;
}
.navbar-collapse.in {
background-color: #bfdad0;
}
.navbar-toggle {
margin-right: -15px;
}
.navbar-toggle[aria-expanded="true"] {
background-color: #fff;
}
.navbar-default .navbar-nav > li > a {
padding: 8px 8px;
}
.navbar-default .dropdown-menu {
padding: 0 0 5px 0;
}
.navbar-nav .open .dropdown-menu > li > a {
padding: 5px 15px 5px 25px;
}
body.menu-open {
overflow: hidden;
}
#navbar-collapse {
position: fixed;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
}
.admin-bar #navbar-collapse {
top: 42px;
}
body.menu-open ul.navbar-nav {
overflow: scroll;
}
.hentry li {
line-height: 1.4;
}
}
/* RARE - Small devices (landscape phones, 544px to 767px ONLY) */
@media (min-width: 544px) and (max-width: 767px) { }
@media (max-width: 767px) and (orientation: landscape) {
.site-branding {
max-width: 100%;
}
.site-branding img {
width: 11em;
}
}
/* Extra small devices - Bootstrap xs
* (less than 544px: typically phones in portrait mode) */
@media (max-width: 543px) {
/* xs code goes here */
.state-indicator {
z-index: 5;
}
body {
border-color: blue;
}
.col-xs-12 {
width: 100%;
}
.col-xs-6 {
width: 50%;
}
.site-branding {
}
.site-branding a {
margin: 0 auto;
float: none;
max-width: 200px;
}
.site-branding img {
margin: 0 auto 10px;
display: block;
width: auto;
}
.site-title {
display: none;
}
.branding-text {
transform: translateY(-0%);
display: block;
float: none;
margin: 0 auto;
max-width: 100%;
height: 70px;
}
.tile-container {
padding-left: 0;
padding-right: 0;
}
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* end of breakpoints code */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */