body {
  background: #ececec url(img/texture-light.png) 0 0 repeat;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  }

a {color: #d9725e;}
a:hover {color: #b1341c;}

h4 {font-size: 1.6em; font-family: "Open Sans Condensed", sans-serif; color: #333; letter-spacing: -1px; text-shadow: 0 1px #fff;}

input {  font-family: "Open Sans", sans-serif; }

label, .btn {
  font-size: .85em;
  letter-spacing: -0.05em;
  font-family: "Open Sans Condensed", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.2em;
}

.content h4 {margin: 0 0 15px 0; }

/*////// NAV ///////*/
.navbar-inverse .navbar-inner  {
  background: #ececec url(img/texture-dark.png) 0 0 repeat;
  -moz-box-shadow: 0px -4px 5px 5px;
  -webkit-box-shadow: 0px -4px 5px 5px;
  box-shadow: 0px -4px 5px 5px;
}

.navbar .brand {
  text-indent: -9999em;
  background: url(img/logo-baldwin.png) 0 50% no-repeat;
  float:none;
  margin: 0 auto;
  width: 154px;
  height: 34px;
}

.navbar #now { color: #ccc; text-shadow: 0 -1px #000; position:absolute; top: 0; right:15px; font-size: 1em;font-weight: 700;}
.navbar #now .am-pm {font-size: .75em; font-weight:600; padding-left: 1px;}



/*////// BUTTON ///////*/

.close {opacity: .8; margin-left: 10px; padding: 15px;}
.close:hover {opacity: 1;}
.icon-close-lg {
  background: url(img/icon-x-lg.png) 0 0 no-repeat;
  width: 15px;
  height: 15px;
}



.btn,
/* typahead overrride */
.dropdown-menu .active > a, .dropdown-menu .active > a:hover
 {
  background-color: hsl(205, 28%, 42%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6f94ae", endColorstr="#4d7089");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#6f94ae), to(#4d7089));
  background-image: -moz-linear-gradient(top, #6f94ae, #4d7089);
  background-image: -ms-linear-gradient(top, #6f94ae, #4d7089);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6f94ae), color-stop(100%, #4d7089));
  background-image: -webkit-linear-gradient(top, #6f94ae, #4d7089);
  background-image: -o-linear-gradient(top, #6f94ae, #4d7089);
  background-image: linear-gradient(#6f94ae, #4d7089);
  border-color: #4d7089 #4d7089 hsl(205, 28%, 38.5%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.23);
  -webkit-font-smoothing: antialiased;
}
.btn {   padding-top: 9px;padding-bottom: 9px;}

.btn-black {
  background-color: hsl(205, 0%, 19%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#545454", endColorstr="#303030");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#545454), to(#303030));
  background-image: -moz-linear-gradient(top, #545454, #303030);
  background-image: -ms-linear-gradient(top, #545454, #303030);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #545454), color-stop(100%, #303030));
  background-image: -webkit-linear-gradient(top, #545454, #303030);
  background-image: -o-linear-gradient(top, #545454, #303030);
  background-image: linear-gradient(#545454, #303030);
  border-color: #303030 #303030 hsl(205, 0%, 15.5%);
  color: #eee !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.23);
  -webkit-font-smoothing: antialiased;
}

.btn-icon-txt {font-family: "Open Sans", sans-serif;  font-size: 2.5em; font-weight: 700; color: #adadad;}

#add-route-btn {display:none;}

/*////// ADD ROUTE ///////*/

#add-route h4 {text-align:center; color: #b5b5b5; margin-bottom: 13px; font-size: 1.9em;}

#add-route-form {
  margin: 15px 0;
  background: #e4e4e4;
  background: rgba(0,0,0,.05);
  border: 1px solid #eaeaea;
  padding: 15px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.10);
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.10);
  box-shadow: 2px 2px 2px rgba(0,0,0,0.10);
}

#add-route-form input { padding-left: 8px; padding-right: 8px; min-height: 32px; color: #ababab; width: 90%;font-size: .9em; font-weight: 600; letter-spacing: -0.05em; }

#add-route-form .form-group {margin: 3px 0 6px;}

.error {
  border: 1px solid #ff0000 !important;
}


/*////// RESULTS ///////*/

/* center route box when no results */

#add-route + .results-box.empty {display:none;}
.results-box.empty + #add-route {float:none; margin-left:auto; margin-right: auto;}

.trip-group {margin-top: 25px; padding-top: 15px; border-top: 1px solid #d3d3d3;}
.trip-group:first-child {border:0; margin:0; padding:0}


.trip {
  margin-bottom: 20px;
  background: #fff;
  border: 0;
  padding: 0;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.05);
  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,.05);
  box-shadow: 3px 3px 3px rgba(0,0,0,.05);

}

.leg {position:relative;}
.leg > span {vertical-align:top; display:inline-block;}

.leg .info {margin-left: 45px;  min-height: 60px;}

.leg .time-group { display:inline-block;margin: 8px 8px 0; vertical-align: top}
.leg .time-group label {color: #404040; margin: 0 0 4px;}
.leg .time-group .time {font-size: 1.5em;font-weight: 700;}
.leg .time-group .time .am-pm {font-size: .65em; font-weight:600; padding-left: 1px;}

.leg .time-group.secondary {min-height: 0;padding-left: 8px; border-left: 1px solid #e2e2e2}
.leg .time-group.secondary label {font-size: .8em; color: #b9b9b9;}
.leg .time-group.secondary .time {font-size: 1.1em; color: #b9b9b9; line-height: 1em;}


.leg .train-line {
  font-style: italic;
  font-size: .85em;
  color: #ababab;
  position:absolute;
  margin: 8px 12px 0 0;
  right: 0;
  top: 0;
}
/*.multi-leg .leg:first-child .train-line {top: 0; bottom:auto;}
.multi-leg .leg .train-line {bottom: 10px; top: auto;}*/

.leg.status-ontime .status {background-color: #6ec979;}
.leg.status-delayed .status {background-color: #e0b41e;}
.leg.status-late .status {background-color: #e2816e;}

.leg .status {
  float:left;
  text-align:center;
  min-height: 60px;
  width: 45px;
  -moz-border-radius: 3px 0 0 3px;
  -webkit-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

.leg .status label { color: #fff; font-size: .7em; line-height: 1.2em;}
.leg.status-ontime .status label {padding: 0 10px;}

.leg .status .timer {margin: 5px auto; width: 21px; height :21px;}

.multi-leg .leg:first-child .status {
  -moz-border-radius: 3px 0 0 0;
  -webkit-border-radius: 3px 0 0 0;
  border-radius: 3px 0 0 0;
}
.multi-leg .leg .status {
  -moz-border-radius: 0 0 0 3px;
  -webkit-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
}

.connection {
  background: #a9a9a9 url(img/stripes.png) 0 0 repeat;
  border: 2px solid #a9a9a9;
  margin: 0 -5px;
  padding: 3px 7px;
  color: #fff;
  font-family: "Open Sans Condensed" sans-serif;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.05);
  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,.05);
  box-shadow: 3px 3px 3px rgba(0,0,0,.05);
}

.connection label {
  margin-right: 8px;
  font-weight: 700;
  font-size: .8em;
  line-height: 1.3em;
  display: inline;
}


.trip-alert {display: inline-block; font-size: 1.4em; color:#ababab ; letter-spacing: -0.08em; margin: 5px 0 0px;}

/*////// FOOTER ///////*/

.backstory {
  margin-top: 40px;
  padding: 10px 0 20px 0;
  color: #ababab;
  border-color: #d4d4d4;
  border-top: 5px solid rgba(95,95,95,.2);
}

.backstory p:first-child {font-size: 1em; line-height: 1.3em; margin-bottom: 12px;}
.backstory p {margin: 8px 0; font-size: .8em; line-height: 1.2em;}


/*////// DESKTOP ONLY ///////*/
 @media (min-width: 979px) {

  .content {
    margin-top: 80px; /* 60px to make the container go all the way to the bottom of the topbar */
  }

}

/*////// EVERYTHING BUT DESKTOP ///////*/
@media (max-width: 767px) {
  #add-route-form input {width: 100%;}
}

/*////// MOBILE ///////*/
@media (max-width: 480px) {

  .leg .train-line {
    position:relative;
    display:block;
    margin-left: 8px;
    padding: 4px 0;
    border-top: 1px solid #e2e2e2;
  }
  .leg .info {margin-left: 60px;  min-height: 90px;}
  .leg .status {width: 60px; min-height: 90px;}
  .leg .status label {font-size: .9em; padding: 0 3px; line-height: 1.1em;}
  .leg .status .timer {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 30px;
    height: 30px;
  }
  .leg .time-group {font-size: 1.1em; }
  .leg .time-group label {margin-bottom: 2px;}

  .connection label {font-size: .95em;}

  #add-route {margin-top: 30px; padding-top: 30px; border-top: 1px solid #d3d3d3;}
  .results-box.empty + #add-route {float:none; padding: 0; margin-top: 0; border: 0; margin-left:auto; margin-right: auto;}

  #now {display:none;}
  #add-route-btn {
    padding: 0 8px 2px;
    line-height: .85em;
    text-shadow: 0 -1px #000;
    position: absolute;
    right:10px; top: 10px;
    display:inline-block;
    -moz-box-shadow: 0px 1px #000;
    -webkit-box-shadow: 0px 1px #000;
    box-shadow: 0px 1px 2px #000;




  }

}



/*////// ALL RETINA ///////*/
@media (-webkit-min-device-pixel-ratio: 1.5), /* Webkit */
       (min-resolution: 144dpi)             /* Everyone else, 1.5x96 */ {

  .leg .status .timer {
    width: 44px;
    height: 44px;
    margin: -5px auto;
    -ms-transform: scale(.5);
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    transform: scale(.5);
  }

  .navbar .brand {
    text-indent: -9999em;
    background: url(img/logo-baldwin@2x.png) 50% 50% no-repeat;
    background-size: contain;
    float:none;
    margin: 3px auto 0 ;
    width: 170px;
    height: 15px;
  }
  #add-route-btn {top: 3px}
}

/*////// MOBILE RETINA ///////*/
@media (max-width: 480px) and
    (-webkit-min-device-pixel-ratio: 1.5),/* Webkit */
       (min-resolution: 144dpi)  /* Everyone else, 1.5x96 */
       {
         /* high rez*/
  /* double size the canvas timer for retina then scale back down */
  .leg .status .timer {
    width: 60px;
    height: 60px;
    margin: -7px 0 -7px;
    -ms-transform: scale(.5);
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    transform: scale(.5);
  }


}