@charset "UTF-8";

/* Simple fluid media

   Note: Fluid media requires that you remove the media's height and width attributes from the HTML

   http://www.alistapart.com/articles/fluid-images/ 

*/

img, object, embed, video {

	max-width: 100%;

}

/* IE 6 does not support max-width so default to width 100% */

.ie6 img {

	width:100%;

}



/*

	Dreamweaver Fluid Grid Properties

	----------------------------------

	dw-num-cols-mobile:		5;

	dw-num-cols-tablet:		8;

	dw-num-cols-desktop:	12;

	dw-gutter-percentage:	25;

	

	Inspiration from "Responsive Web Design" by Ethan Marcotte 

	http://www.alistapart.com/articles/responsive-web-design

	

	and Golden Grid System by Joni Korpi

	http://goldengridsystem.com/

*/



/* Mobile Layout: 650px and below. */



.gridContainer {

	margin-left: auto;

	margin-right: auto;

	width: 87.36%;

	padding-left: 1.82%;

	padding-right: 1.82%;

}

#about {

	clear: both;

	float: left;

	margin-left: 0;

	margin-top: 50px;

	width: 100%;

	display: block;

}

#header {

	clear: none;

	float: left;

	margin-left: 4.1666%;

	width: 100%;

	display: block;

}



nav a {

	color: #fff;

	display: inline-block;

	width: 100%;

	text-align: center;

	text-decoration: none;

	line-height: 40px;

	border-bottom: none;

}

nav a:hover, nav a:active { color: #dddddd; }

nav {

	height: auto;

	width: 100%;

	font-size: 16pt;

	font-weight: bold;

	position: fixed;

	z-index: 10;

	background-color: #666666;

}

nav ul, nav ol { display: none; list-style: none; list-style-image: none; margin: 0 auto; width: 100%; height: auto; padding: 0; }

nav li { display: block; float: none; width: 100%; border-bottom: 1px dashed #FFF; }

#logoafter {

	height: 40px;

	width: 70px;

	display: inline-block;

}

#logobefore { display: none; }

#hotdog { float: right; margin-top: 5px; cursor: pointer; }

#amenities {

	clear: both;

	float: left;

	margin-left: 0;

	width: 96%;

	display: block;

}

#amenities #vehicle ul {

	margin-top: 20px;

}

#howto {

	clear: both;

	float: left;

	margin-left: 0;

	width: 96%;

	display: block;

	overflow: auto;

	margin-bottom: 10px;

}

#routes {

	clear: both;

	float: left;

	width: 100%;

	display: block;

    margin-top: 50px;

	padding: 0;

	position: relative;

}

#routes a {

    color: #FFFFFF;

    border-bottom: thin dotted #FFFFFF;

    font-weight: bold;

}

#routes div.faq, #routes div.faq_answer_container, #routes div.faq_question, #routes div.faq_answer {

    padding: 3px;

    }

.column_link {

    clear: both;

    float: left;

    display: block;

    position: relative;

    width: 100%;

    height: 120px;

    color: #ffffff;

    font-size: 1.5em;

    text-align: center;

    margin-top: 20px;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 0px;

    padding: 20px 0px;

}

.column_link_last {

    margin-bottom: 20px;

}

.icon-howto {

    font-size: 3em;

}

.icon-faq {

    font-size: 3em;

}

.icon-about {

    font-size: 3em;

}

.icon-amenities {

    font-size: 3em;

}

#wheelchair {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}

#passenger {

	clear: none;

	float: left;

	width: 100%;

	display: block;

}

#shelters {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}

#specifications {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}

#capacity {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}



.floatleft, .floatright {

	display: block;

	margin-top: 10px;

	margin-right: auto;

	margin-bottom: 10px;

	margin-left: auto;

}



.shelterpic {

	float: left;

	margin: 0 auto 10px;

	width: 100%;

}



#stationstxt {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}



#branding {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}



#brandinglogo {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	text-align: center;

}



#routes #mesa {

	padding-right: 45px;

}



#mesamap {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	text-align: center;

}



#mesainfo {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}



#alamedamap {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	text-align: center;

}



#routes #alameda {

	padding-right: 45px;

}



#alamedainfo {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}



#dyermap {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	text-align: center;

}



#dyerinfo {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}



#routes #dyer {

	 padding-right: 45px;

}



#montanamap {

	 clear: both;

	 float: left;

	 margin-left: 0;

	 width: 100%;

	 display: block;

	 text-align: center;

}



#montanainfo {

	 clear: both;

	 float: left;

	 margin-left: 0;

	 width: 100%;

	 display: block;

}



#local {

	 clear: both;

	 float: left;

	 margin-left: 0;

	 width: 100%;

	 display: block;

}



#localtxt {

	 clear: both;

	 float: left;

	 margin-left: 0;

	 width: 100%;

	 display: block;

}



#yesopen { display: none; }



#faq { clear: both;  float: left;  margin-left: 0;  width: 100%;  display: block; }



#feedback { clear: both;  float: left;  margin-left: 0;  width: 100%;  display: block; }



#faqsign { display: none; }



.imgcenter {

	margin-top: 10px;

	margin-right: auto;

	margin-bottom: 10px;

	margin-left: auto;

	display: block;

	clear: both;

}



#legend.accordionContent {

	background-color: #BBB;

	margin-top: -13px;

	margin-bottom: 13px;

	display: none;

	padding: 30px;

}

#legendcontent {

	background-color: #4A4A4A;

}

#legendtab {

	background-image: url(/images/legendtab@2x.png);

	background-size: 166px 22px;

	background-repeat: no-repeat;

	height: 28px;

	width: 146px;

	z-index: 1;

	position: absolute;

	top: 48px;

	left: 40px;

}



#bikeinstruct {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}



#tvmpic { margin: 5px auto; display: block; clear: both; }

#tvminstruct {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}



.countdown { width: 280px; margin: 3px 0; float: right; }



/*FAQS*/

.faq_question {

	margin: 0px;

	padding: 5px 0px 5px 0px;

	display: inline-block;

	cursor: pointer;

	font-weight: bold;

}



.faq_question::before {

    content: ">";

    transform: rotate(90deg) scaleY(1.5);

    float: left;

    margin-right: 1em;

}



.faq_active::before {

    content: ">";

    transform: rotate(-90deg) scaleY(1.5);

    margin-right: 1em;

}





.faq_answer_container {

	height: 0px;

	overflow: hidden;

	padding: 0px;

    font-weight: normal;

    

}

.accordion {

    font-weight: bold;

    font-size: .9em;

    color: #ffffff;

    background-color: transparent;

    border: thin dotted #ffffff;

    margin-bottom: .5em;

    padding: 15px;

    cursor: pointer;

    width: 100%;

    text-align: left;

    outline: none;

    transition: 0.4s;

}



.active, .accordion:hover {

    background-color: rgba(255,255,255,.2);

}



.panel {

    padding: 0 5px;

    margin-top: -18px;

    margin-bottom: -15px;

    display: none;

    overflow: hidden;

}



.panel ul {

    padding: 5px 10px;

    margin-top: 0px;

}



.accordion:after {

  content: '\002B';

  color: #fff;

  font-weight: bold;

  float: right;

  margin-left: 5px;

}



.active:after {

  content: "\2212";

}

#footer {

    position: relative;

	padding: .2em 0;

    clear: both;

}

#smlogo {

    padding-top: 2.5%;

    margin-right: auto;

    margin-left: auto;

    display: block;

    position: relative;

    width: 30%;

}

#facebook {

    position: absolute;

    right: 12%;

    top: 35%;

    width: 10%;

}

#twitter {

    position: absolute;

    right: .1%;

    top: 35%;

    width: 10%;

}

.section_banner {

    width: 100%;

    text-align: center;

    font-size: 7.5vw;

    color: #ffffff;

    font-display: block;

    padding: 10px 0px;

    margin-top: 50px;

}

.gradient1 {

    background-color: #660066; /* For browsers that do not support gradients */

    background-image: linear-gradient(to right, #660066, #00A8E7);

}

.gradient2 {

    background-color: #00A8E7; /* For browsers that do not support gradients */

    background-image: linear-gradient(to right, #00A8E7, #B0C72C);

}

.gradient3 {

    background-color: #B0C72C; /* For browsers that do not support gradients */

    background-image: linear-gradient(to right, #B0C72C, #FF6900);

}

.gradient4 {

    background-color: #FF6900; /* For browsers that do not support gradients */

    background-image: linear-gradient(to right, #FF6900, #660066);



}

.nav_tab_label {

    display: inline-block;

    border-radius: 50%;

    background-color: #660066;

    width: 6em; height: 6em;

    line-height: 6em;

    text-align: center;

    color: #ffffff;

}

.faded img{

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-webkit-transition: all 1s ease;

}



.faded img:hover{

filter: grayscale(0%);

filter: gray;

-webkit-filter: grayscale(0%);

transition: 1s ease;

}

#ride img, #bike img {

    display: none;

}



/* Tablet Layout: 651px to 798px. Inherits styles from: Mobile Layout. */



@media only screen and (min-width: 651px) {

  .gridContainer {

      width: 90.675%;

      padding-left: 1.1625%;

      padding-right: 1.1625%;

  }

  #about {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }

  #header {

      clear: none;

      float: left;

      margin-left: 2.5641%;

      width: 100%;

      display: block;

  }

  nav { height: 40px; text-align: right; }

  nav a { padding: 0 10px; width: auto; }

  nav ul {

      display: block;

      height: auto;

      width: 100%;

  }

  nav li { display: inline; width: 100%; border-bottom: none; background: none; }

  #hotdog { display: none; }

  #logobefore {

      height: 40px;

      width: 70px;

      display: inline-block;

      float: left;

      margin-top: -2px;

      *margin-top: 5px;

  }

  #logoafter { display: none; }

  #amenities { clear: both; width: 97%; float: left; display: block; }

  #howto { clear: both; width: 97%; float: left; display: block; }

  #routes {

      clear: both;

      float: left;

      width: 100%;

      display: block;

  }

  #wheelchair {

      clear: none;

      float: left;

      margin-left: 2.5641%;

      display: block;

      width: 48.7179%;



  }

  #passenger {

      float: left;

      display: inline;

      margin-left: 0;

      width: 48.7179%;

      clear: both;

  }

  #shelters {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }

  #specifications {

      float: left;

      margin-left: 0;

      width: 48.7179%;

      display: block;

  }

  #capacity {

      clear: none;

      float: left;

      margin-left: 2.5641%;

      width: 48.7179%;

      display: block;

  }



  .floatleft {

      float: left;

  }



  .floatright {

      float: right;

  }



  .shelterpic {

      margin: 0 1.28205% 10px;

      width: 47%;

  }



  #stationstxt {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

  }



  #branding {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }



  #brandinglogo {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }



  #mesamap {

      clear: none;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }



  #mesainfo {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }



  #alamedamap {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }



  #alamedainfo {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }



  #dyermap {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }



  #dyerinfo {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }



  #montanamap {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }



  #montanainfo {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }



  #local {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }



  #localtxt {

      clear: none;

      float: left;

      margin-top: 2.5%;

      margin-left: 2.5641%;

      width: 61.5384%;

      display: block;

  }

  #yesopen { display: inline-block; width: 30% }

  #faq { clear: both;  float: left;  margin-left: 0;  width: 100%;  display: block; }

  #feedback { clear: both;  float: left;  margin-left: 0;  width: 100%;  display: block; }

  #faqsign { display: inline-block; width: 40%; }

  #tvmpic { display: inline-block; width: 31%; float: right; margin-left: 1%; clear: none; }

  #tvminstruct {

      clear: none;

      float: left;

      margin-right: 1.6949%;

      width: 66.1016%;

      display: block;

  }



  .countdown { width: 280px; margin: 3px auto; }



  #smlogo {

      padding-top: 10px;

      margin-right: auto;

      margin-bottom: 10px;

      margin-left: auto;

      display: block;

      position: relative;

      width: 100%;

  }

  #facebook {

      position: absolute;

      right: 80px;

      top: 1em;

      width: 60px;

      height: 60px;

  }

  #twitter {

      position: absolute;

      right: 10px;

      top: 1em;

      width: 60px;

      height: 60px;

  }

  .column_link {

      display: inline-block;

      width: 48.5%;

      clear: none;

    }

    .column_link_right, .column_link_last {

      display: inline-block;

      width: 48.5%;

      clear: none;

      float: right;

  }

}



/* Desktop Layout: 799px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */



@media only screen and (min-width: 799px) {

  .gridContainer {

      width: 88.5%;

      max-width: 1232px;

      padding-left: 0.75%;

      padding-right: 0.75%;

      margin: auto;

  }

  #about {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }

  #header {

      clear: none;

      float: left;

      margin-left: 1.6949%;

      width: 100%;

      display: block;

  }

  #amenities {

      clear: both;

      float: left;

      width: 97.6%;

      display: block;

  }

  #howto {

      clear: both;

      float: left;

      width: 98.25%;

      display: block;

  }

  #routes {

      clear: both;

      float: left;

      width: 100%;

      display: block;

  }

  #routes div.faq {

      float: left;

      width: 32%;

      }

  #wheelchair {

      clear: none;

      float: left;

      margin-left: 1.6949%;

      width: 49.1525%;

      display: block;

  }

  #passenger {

      clear: both;

      float: left;

      margin-left: 0;

      width: 49.1525%;

      display: block;

  }

  #shelters {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }

  #specifications {

      float: left;

      margin-left: 0;

      width: 49.1525%;

      display: block;

  }

  #capacity {

      clear: none;

      float: left;

      margin-left: 1.6949%;

      width: 49.1525%;

      display: block;

  }

  .shelterpic {

      margin-left: 0.84745%;

      margin-right: 0.84745%;

      width: 48.25%;

  }

  #stationstxt {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }

  #branding {

      clear: both;

      float: left;

      margin-left: 0;

      width: 49.1525%;

      display: block;

  }

  #brandinglogo {

      clear: none;

      float: left;

      margin-left: 1.6949%;

      width: 49.1525%;

      display: block;

      padding-top: 10px;

  }

  #mesamap {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: inline-block;

  }

  #mesainfo {

      clear: none;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }

  #alamedamap {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: inline-block;

  }

  #alamedainfo {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }

  #dyermap {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: inline-block;

  }

  #dyerinfo {

      clear: none;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }



  #montanamap {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }



  #montanainfo {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }



  #local {

      clear: both;

      float: left;

      margin-left: 0;

      width: 100%;

      display: block;

  }



  #localtxt {

      clear: none;

      float: left;

      margin-left: 10.1694%;

      width: 49.1525%;

      display: block;

      font-size: 1.2em;

  }



  #yesopen { width: auto; }



  #faq { clear: both;  float: left;  margin-left: 0;  width: 100%;  display: block; }



  #feedback { clear: both;  float: left;  margin-left: 0;  width: 100%;  display: block; }

	

    .column_link {

      width: 23.5%;

	  margin-top: 20px;

	  margin-right: 2%;

        float: left;

    }

    .column_link_last {

        margin-right: 0;

    }

    #ride img, #bike img {

        display: block;

    	width: 200px;

	    float: left;

    	margin: 30px 20px 10px 0;

    }

}

@media only screen and (min-width: 1350px) {

    .section_banner {

    font-size: 102px;

    }

}