@media screen and (min-width: 980px) {
  /*desktop*/ 
}

@media screen and (max-width: 979px) {
  /*mobile*/
}

@media (min-width: 300px) and (max-width: 979px) {
  /*custom*/
}


@import url('http://fonts.googleapis.com/css?family=Rokkitt:700');

.widgettitle,
footer .widget h3,
.contenttitle,
.page-header h1,
#content h2 {
	font-family: "Rokkitt";
}


/* ==========================================================================
   Base
   ========================================================================== */

body {
		background-color: white;
		color: #333;
		font-family: Helvetica, Arial;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

/* =============================================================================
   Header
   ========================================================================== */

#banner { }

/* Fixed Topbar Navigation */
body.top-navbar { padding-top: 0px; }
body.admin-bar .navbar-fixed-top { top: 28px; }

#banner-image {
	height: 240px;
	background-image: url("../img/aquabus-header-winter.png"), url("../img/aquabus-header-winter-bg.png");
	background-repeat: no-repeat, repeat-x;
	background-position: center bottom, left bottom;
}

.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
	background-image: none;
	background-color: white;
}

header .dropdown-menu li.active a:link,
header .dropdown-menu li.active a:visited,
header .dropdown-menu li.active a:active {
	color: white;
}

/* grc 01/2016 */

/* START OF Add "MENU" text to 3-BAR Menu button  */
.navbar .btn-navbar:hover::after {
	content: "Menu";
	color: #999;
	font-weight: bold;
	float: right;
	margin: -16px 0 0 0;
}
.navbar .btn-navbar .icon-bar {
	/*display: none !important;*/
	/*background-color: transparent !important;
	box-shadow: none !important;*/
}
/* END OF Add "MENU" text to 3-BAR Menu button  */

/* ==========================================================================
   Content
   ========================================================================== */

#wrap {
	background-color: white;
}
#content {

}




/* ==========================================================================
   Primary Content
   ========================================================================== */

#main { }

#content { }

.page #content-wrapper {
	min-height: 300px;
}
.home #content-wrapper {
	min-height: 0;
}

.front-page-content {
	padding: 1em 0 0 1em;
	line-height: 1.3;
	font-size: 1.5em;
}

.front-page-content strong {
	color: #E0281E;
	margin: 0;
	padding: 0;
	line-height: 1.2;
	font-size: 1em;
	display: inline;
}

.page img.alignright {
	margin: 0 0 0 2rem;
	height: auto;
	width: 50%;
}

.stop-menu h3,
.stop-section h2,
.stop-section h3 {
	font-size: 1.25em;
	text-transform: uppercase;
}

.stop-menu li,
.stop-menu .menu {
	padding: 0;
	margin: 0;
}

.stop-menu li a {
	display: block;
	line-height: 40px;
	padding: 0 1em;
	text-transform: uppercase;
	font-weight: bold;
	color: white;
	text-decoration: none;
	white-space: nowrap;
	background-color: #E0281E;
}

.stop-menu li a:hover {
	background-color: #eb6e30;
}

.stop-menu li.active a,
.stop-menu li.active a:hover {
	background-color: #f4b41b;
	color: #E0281E;
	color: white;
}

.stop-menu > .menu {
	list-style-type: none;
	font-weight: bold;
	background-color: #E0281E;
}

.stop-menu > .menu li:first-letter {
	margin-right: .45em;
	
}

.stop-section {
	min-height: 200px;
}

.stop-map {
	position: relative;
	left: -2px;
	height: 320px;
}

.home .stop-map {
	background-image: url("../img/vancouver-aquabus-map_770X320.png");
	background-repeat: no-repeat;
	background-position: center center;
	box-shadow: inset 0px 0px 2px #000;
}

.stop-schedule h2,
.stop-fares h2,
.stop-attractions h2 {
	font-size: 1.25rem;
}

.stop-section table {
	min-height: 220px;
	width: 100%;
}

.stop-section table td,
.stop-section table th {
	padding: .5rem;
	text-align: left;
	line-height: 1.5;
	min-height: 1em;
}

.stop-section table td {
	line-height: 1.75;
}

.stop-section table th {
	text-transform: uppercase;
}
.stop-section table th.h1 {
	line-height: 2.5;
}
.stop-section table th.h2 {
	font-size: 85%;
	line-height: 1.0;
	font-weight: normal;
}

.stop-section table td.description {
	line-height: 1.3;
	padding: 1rem;
	background-color: #f0fdff;
	font-size: 13px;
	border-bottom: none;
}

.stop-schedule table {
	border: solid 2px #118DB2;	
}
.stop-schedule table th.h1 {
	background-color: #118DB2;
	color: white;
}
.stop-schedule table th.h2 {
	background-color: #60c1d9;
	color: white;
	border-bottom: solid 1px #60c1d9;
}
.stop-schedule table td {
	border-bottom: solid 1px #60c1d9;
	background-color: #cceef6;
}

.stop-fares table {
	border: solid 2px #118DB2;	
}
.stop-fares table th.h1 {
	background-color: #118DB2;
	color: white;
}
.stop-fares table th.h2 {
	background-color: #60c1d9;
	color: white;
	border-bottom: solid 1px #60c1d9;
}
.stop-fares table td {
	border-bottom: solid 1px #60c1d9;
	background-color: #f0fdff;
}

.stop-fares table .tickets1 {
	background-color: #cbedf5;
}
.stop-fares table .tickets2 {
	background-color: #d8f5cb;
}
.stop-fares table .tickets3 {
	background-color: #f5d3cb;
}
.stop-fares table .tickets4 {
	background-color: #e8cbf5;
}

.stop-attractions .attraction div {
	background-color: #f0fdff;
	border: solid 1px #cceef6;
	padding: 1em;
}

.stop-attractions .attraction div a {
}

.stop-attractions .attraction h3 {
	font-weight: normal;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	font-size: 14px;
	text-transform: none;
	margin: 1em 0;
	clear: both;
}

.stop-attractions img {
	margin: 0 0 1em 0;
	width: 100%;
	max-width: 150px;
}
/* ==========================================================================
   Featured Content Sidebar
   ========================================================================== */

#featured-content-wrap {
	margin: 0 auto;
	width: 100%;
	min-height: 120px;
	background-color: white;
}

#featured-content .widget {
	padding: 1em;
	/*height: 120px;*/
	/*grc 11/2015*/
	height: 250px;
	margin: 1em 0;
	background-color: #3c54a3;
	color: white;
	position: relative;
}

#featured-content .widget-1 .widget {
	/*background-color: #eb6e30;*/
	/*grc 11/2015*/
}

#featured-content h4 {
	margin: 0 0 .5em 0;
	font-size: 1.25em;
}

#featured-content a:link,
#featured-content a:visited,
#featured-content a:hover {
	color: white;
}

#featured-content .widget_twitter ul {
	display: block;
	padding: 0;
	margin: 0;
}

#featured-content .widget_twitter ul li {
	display: block;
	list-style-type: none;
}

#featured-content .widget_twitter .entry-content {
	font-size: 1.25rem;
	line-height: 1.3;
}

#featured-content .widget_twitter .entry-meta {
	font-size: 85%;
	display: block;
	text-align: right;
	position: absolute;
	bottom: 1em;
	right: 1em;
}

#featured-content .widget_twitter .from-meta {
	display: none;
}

#featured-content .twitget-tweet .tweet-text {
	height:80px;
	font-size:1.25em;
}

#featured-content .twitget-tweet .tweet-text a {
	display:none;
}

#featured-content .twitget-tweet .tweet-time {
	text-align:right;
}


#featured-content .widget-first {
	position: relative;
}

#featured-content #promo {
	/*background-image: url(../img/promo.png);*/
	/*grc 11/2015*/
	/*background-image: url(../img/promo-2015.png);*/
	background-image: url("../img/promo-2015-2.png");
	background-position: center center;
	background-repeat: no-repeat;
	display: block;
	text-indent: -9999px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

/*twitter widget css*/
/*grc 11/2015*/

.twitter-timeline.twitter-timeline-rendered {
	background-color: #ffffff !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}


/* ==========================================================================
   Sidebar
   ========================================================================== */

#sidebar { }



/* ==========================================================================
   Posts
   ========================================================================== */

.hentry header { }
.hentry time { }
.hentry p.byline { }
.hentry .entry-content { }
.hentry footer { }



/* ==========================================================================
   /* Footer 
   ========================================================================== */

#content-info { }

#footer-wrap {
	margin-top: 1em;
	background-color: #118DB2;
}

footer .widget {
	float: left;
	color: white;
	width: 25%;
	height: 220px;
}

footer .widget:first-child .textwidget {
	background-color: white;
	color: black;
	padding: .5em .5em .25em .5em;
}

footer .widget .widget-inner {
	padding: 0 1em;
	min-height: 200px;
	line-height: 1.4;
}

footer a:link,
footer a:visited,
footer a:active {
	color: white;
	text-decoration: underline;
}

footer .dropdown-menu a:link,
footer .dropdown-menu a:visited,
footer .dropdown-menu a:active {
	color: black;
}

footer .dropdown-menu li.active a:link,
footer .dropdown-menu li.active a:visited,
footer .dropdown-menu li.active a:active {
	color: white;
}

footer .widget h3:first-child {
	font-size: 1rem;
	line-height: 1.1;
}

footer .widget:first-child a:link,
footer .widget:first-child a:visited,
footer .widget:first-child a:active {
	color: #000;
	text-decoration: underline;
	font-size: .75em;
	display: block;
	margin: 0 1em;
}

.wp_wunderground th {
	text-align: left;
	padding: 0 1em;
}

.wp_wunderground td {
	text-align: left;
	padding: 0 1em;
}

#copy {
	padding: 1em 1em 0 1em;
	color: #666;
	clear: both;
	text-align: center;
}

#tides {
	font-weight: bold;
	text-align: center;
	display: block;
	color: white;
	background-color: #118DB2;
	border-radius: 5px;
	padding: 5px;
	margin: 0 auto;
	width: 100px;
	margin-top: 7px;
	text-decoration: none;
	text-transform: uppercase;
}

#tides:hover {
	background-color: #1a96bb;
}

.job-post {
	font-weight: bold;
	text-align: center;
	display: block;
	color: #fff;
	background-color: #118DB2;
	border-radius: 5px;
	padding: 15px 5px;
	margin: 0 auto;
	width: 80%;
	margin-top: 30%;
	text-decoration: none !important;
	text-transform: uppercase;
}

@media screen and (max-width: 979px) {
  /*mobile*/
	.job-post {
		margin-top: 15%;
	}
}

.job-post:hover {
	background-color: #1a96bb;
}

footer#content-info.container section#nav_menu-2.widget-3.widget.widget_nav_menu ul#menu-footer-menu.menu li a {
	text-decoration: none;
}

footer#content-info.container section#nav_menu-2.widget-3.widget.widget_nav_menu ul#menu-footer-menu.menu li a:hover {
	text-decoration: underline;
}

footer .widget:nth-child(4n+1) {
	background-color: #f4b41b;
}

footer .widget:nth-child(4n+2) {
	background-color: #13a548;
}

footer .widget:nth-child(4n+3) {
	background-color: #b73a91;
}

footer .widget:nth-child(4n+4) {
	background-color: #eb6e30;
}

footer .icon {
	display: inline-block;
	height: 24px;
	width: 24px;
	text-indent: -9999px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
}
footer .icon.facebook {
	background-image: url("../img/facebook.png");
}
footer .icon.twitter {
	background-image: url("../img/twitter.png");
}
#bug {
	position: relative;
	display: inline-block;
	height: 24px;
	width: 24px;
	text-indent: -9999px;
	top: -2px;
	/* background-image: url(../img/bug.png); */
	background-image: url('../img/union-bug.png');
	background-size: 24px 24px;
}

/* ==========================================================================
   WordPress Generated Classes
   See: http://codex.wordpress.org/CSS#WordPress_Generated_Classes
   ========================================================================== */

.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; }
.alignright { float: right; }
figure.alignnone { margin-left: 0; margin-right: 0; }



/* ==========================================================================
   Media Queries
   ========================================================================== */

@media (max-width: 979px) {
	/* Fix top padding when using the responsive grid with the fixed topbar */
	body.top-navbar {
		padding-top: 0;
	}
	
	body {
		padding: 0;
	}
	
	#banner-image {
		display: none;
	}
	
	.navbar-fixed-top,
	.navbar-fixed-bottom,
	.navbar-static-top {
		margin: 0;  
	}
	
	footer .widget {
		width: 50%;
	}
	.home .stop-map {
		background-image: url("../img/vancouver-aquabus-map_476X320.png");
	}
	.front-page-content {
		font-size: 1.25em;
	}
	#featured-content #promo {
		background-position: -180px center;
	}
}

@media (max-width: 767px) {
	body {
		font-size: 13px;
		min-width: 320px;
	}
	footer .widget {
		width: 100%;
	}
	#featured-content .widget,
	#footer-wrap {
		margin: 0;
	}
	.stop-section h2 {
		background-color: #118DB2;
		display: block  !important;
		color: white;
		margin: 0;
	}
	#featured-content .widget {
		display: none;
		height: auto;
		float: none;
	}
	#featured-content-wrap {
		min-height: 1px;
	}
	#featured-content .widget_twitter {
		display: block;
	}
	#featured-content .widget_twitter .entry-content {
		font-size: 1rem;
	}
	#featured-content .widget_twitter .entry-meta {
		text-align: right;
		display: block;
		font-size: 85%;
		width: 100%;
		position: static;
		margin: 0;
		padding: 0;
	}
	.front-page-content {
		font-size: 1.25em;
	}
	footer .widget {
		/*display: none;*/
	}
	footer .widget:first-child,
	footer .widget:last-child {
		display: block;
	}
	.stop-menu li {
		width: 50%;
		float: left;
	}
	.stop-menu a:first-letter {
		margin: 0;
	}
	.stop-section {
		width: 100%;
	}
	.stop-section table {
		width: 100%;
		border: none;
	}
	.stop-menu h3,
	.stop-section h3 {
		margin: 0 1rem;
	}
	.page #content #main {
		padding: 0 1em 1em 1em;
	}
	.home #content #main {
		padding: 0;
	}
}


@media screen and (min-width: 980px) {
  /*desktop*/ 
}

@media screen and (max-width: 979px) {
  /*mobile*/
}

@media (min-width: 300px) and (max-width: 979px) {
  /*custom*/
}


/* grc 01/2017 */

/* avoid last stop overlaps */
.stop-template-default .stop-schedule .span6:last-child {
    margin-top: 2% !important;
}
/* these 2 stations have only 2 stops listed, so they can't overlap */
.yaletown .stop-schedule .span6:last-child,
.plaza-of-nations .stop-schedule .span6:last-child {
    margin-top: 0 !important;
}