/* Need to override some basic stuff because "link" specifies font and such */
.predsForStop {
    font-weight: normal;
    font-size: 15px;
}

.predsForStop .directionName {
  /* font-weight: bold; */
}

.predsForStop .distance {
    font-size: 75%;
}

.predsForStop .preds {
    font-weight: bold;
    font-size: 20px;
}

/* Override the background color of the iui panels */
body > .panel { 
    /* Make the background light grey to look cool */
    background: #BBBBBB; 

    /* Default iPhone look */
    /* background: #c8c8c8 url(iui/pinstripes.png);  */
}

/* Need this so that transitions between pages
   colored properly. */
body {
	/* Make the background light grey to look cool */
	background: #BBBBBB; 

	/* Default iPhone look */
	/* background: #c8c8c8; */
}

/* For manually selecting agency, route, stop */
body > ul > li {
      background: #EEEEEE;
}

.textOnBackground { 
	/* Use dark color if making background light grey */
	color: #444444; /* #bbbbbb; */
    /* Add bit of space between text and boxes below */
    padding: 0px 0px 2px 0px;

	/* Default iPhone look */
	/* color: #555555; */
}

/* For all the links to other pages */
.link {
    display: block;
    padding: 6px 0px 6px 10px;
    text-align: left;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #999999;
    font-size: 18px;
    font-weight: bold;
    background: url(/webkit/images/listArrowAdjusted.png) no-repeat right center;
}

.inBetweenRouteSpacer {
    display: block;
    padding: 18px 0px 6px 0px;
    border-bottom: 1px solid #999999;
    background: #FFFFFF;
	font-size: 26px;
	font-weight: bold;
}

/* Use regular route color for link */
.normalDirLinkColor {
    background: #DDE5EE url(/webkit/images/listArrowAdjusted.png) no-repeat right center;
}

/* Use regular route color but slightly different alt direction color */
.altDirLinkColor {
    background: #F3F3F3 url(/webkit/images/listArrowAdjusted.png) no-repeat right center; 
}

/* For regular links display as regular text instead of adding a whole
   button, and use a smaller font */
.smallLink {
  font-size: 12px;
  text-decoration: none;
}

.smallLink:hover {
  text-decoration: underline;
}

/* For the link that allows user to see more stops */
.moreStops {
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

.link:last-child {
  border-bottom: none;
}

.plainText {
    position: relative;
    margin: 0 0 20px 0;
    padding: 2px 2px 2px 8px;
    background: #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    /* Put shadow around the main boxes */
    -webkit-box-shadow: 2px 2px 2px #818181; /* Can only use up to 5px, otherwise page to big */
    -moz-box-shadow: 2px 2px 2px #818181;
    border: 2px solid #999999;
    font-size: 16px;
}

.mapImage {
    padding: 2px;
    background: #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-box-shadow: 2px 2px 2px #818181; /* Can only use up to 5px, otherwise page to big */
    -moz-box-shadow: 2px 2px 2px #818181;
    border: 2px solid #999999;
}

.bookmarkInfo {
    position: relative;
    margin: 0 0 20px 0;
    padding: 8px;
    background: #ecde8f;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    /* Put shadow around the main boxes */
    -webkit-box-shadow: 2px 2px 2px #818181; /* Can only use up to 5px, otherwise page to big */
    -moz-box-shadow: 2px 2px 2px #818181;
    border: 2px solid #999999;
    font-size: 16px;
}

/* Put shadow around Muni button */
.panel > fieldset { 
  -webkit-box-shadow: 2px 2px 2px #818181;
  -moz-box-shadow: 2px 2px 2px #818181;
}

.agencyName {
	font-size: 22px;
	color: #000000;
	/* color: #3366CC; */
	vertical-align: middle;
	font-weight: bold;
	margin-left: 12px;
}

/* Need to do this complicated thing to get vertical alignment proper */
.agencyNameImg {
	vertical-align: middle;
	margin-bottom: .25em;
}

.label {
  font-size: 12px;
  color: #999999;
  font-weight: bold;
}

.value {
  font-size: 18px;
  color: #444444;
  font-weight: bold;
}

.largePrediction {
  font-size: 40px;
  color: #000000;
  text-align: center;
  font-weight: bold;
}

/* For displaying messages associated with predictions */
.message {
  margin-top: 5px; 
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  background: #FFDDDD;
  padding: 4px 2px;
}

/* For outputing when prediction last updated */
.lastUpdated {
  font-size: 11px;
  text-align: center;
  color: #999999;
}

/* Override some iui values. In particular, make the 
   font for lists smaller for lists. */
body > ul > li {
  font-size: 18px;
  padding: 7px 0 7px 6px;
}

/* For displaying stop number, phone number, and SMS info on prediction by stop page */
.phoneInfo {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/* For the google map. One of the main goals is to create a margin
   on one side so that can scroll the page instead of just the 
   location in the map. */
.googleMap {
    position: relative;
    width: 91%;
    height: 400px;
    margin: 0 0 20px 5px;
    padding: 2px;
    background: #DDDDDD; /* Initial color for map */
    border: 2px solid #999999;
 
    /* Put shadow around window */
    -webkit-box-shadow: 2px 2px 2px #818181;
    -moz-box-shadow: 2px 2px 2px #818181;
}
.hide {
	display: none;
}