/************** Start taxi fare estimator **************/

/* Design fixes across all devices */

body{ margin:0;}

.leftcol {
  float: none;
  position: absolute;
  left: 0;
}

.rightcol {
  float: none;
  position: absolute;
  right: 0;
}

.button{
  width: 80px;
  margin-top: 10px;
  -webkit-appearance: none;
  /*border-radius: 0;*/
  padding: 5px 0;
  background-color: #eee;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
  
.button:hover{
  background: #0D6F94;
  color: #fff;
}

.mapMenuHeader{
  display:none;
}

.addressOptionButton{
  border: solid 1px #ccc;
  background: #eee url(../images/fare-estimator-arrows.png) no-repeat 93% -90%;
  line-height: 35px;
}

.addressOptionButtonSelected{
  line-height: 35px;
  background: #eee url(../images/fare-estimator-arrows.png) no-repeat 93% 183%;
}

table a, table a:visited {
  color: #000;
  text-decoration: none;
}

table a:focus{
  text-decoration: none;
  color: #000;
  background: none;
  outline: none;
}

table a:hover{
  text-decoration: underline;
  color: #0D6F94;
}

.mapMenu{border:none;}

#addressOrigin{
  display:block;
  border: 1px solid #ccc;
}

.ui-tabs .ui-tabs-panel {
  border: 1px solid #ccc;
  padding: 1em;
}

.addressMenu, .itinery {  
  border: 1px solid #ccc;
}


#estimateFarebutton input{
  background: #0D6F94;
  padding: 10px 20px;
  color: #fff;
  border: none;
  font-size: 16px;
  margin-top: 10px;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  -moz-box-shadow:    0 1px 0 rgba(255, 255, 255, 0.5) inset;
  box-shadow:         0 1px 0 rgba(255, 255, 255, 0.5) inset;
  -webkit-appearance: none;
}

#estimateFarebutton input[disabled=disabled] {
  background:#ccc;
}

#estimateFarebutton input[disabled=enabled] {
  background:#0D6F94;
}

#directionsDiv {
  overflow: scroll !important;
  -webkit-overflow-scrolling: touch;
  width: 280px; 
  background: #ffffff; /* Old browsers */
  background: -moz-linear-gradient(top,  #ffffff 75%, #f2f2f2 90%, #d1d1d1 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(75%,#ffffff), color-stop(90%,#f2f2f2), color-stop(100%,#d1d1d1)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 75%,#f2f2f2 90%,#d1d1d1 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 75%,#f2f2f2 90%,#d1d1d1 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 75%,#f2f2f2 90%,#d1d1d1 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #ffffff 75%,#f2f2f2 90%,#d1d1d1 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d1d1d1',GradientType=0 ); /* IE6-9 */
}

#directionsDiv::-webkit-scrollbar { 
  -webkit-appearance:none !important; 
  width:11px !important; 
} 
#directionsDiv::-webkit-scrollbar { 
  border-radius:8px !important; 
  border:2px solid white !important; 
  background-color:#ccc !important; 
} 
#directionsDiv::-webkit-scrollbar-thumb { 
  border-radius:8px !important; 
  border:2px solid white !important; 
  background-color:rgba(0,0,0,.5) !important; 
}

#directionsDiv::-webkit-scrollbar:active,
#directionsDiv::-webkit-scrollbar:hover, 
#directionsDiv::-webkit-scrollbar:focus{
  border-radius:8px !important;
  border:2px solid white !important;
  background-color:#ccc !important;
}



/* Restyle for mobile/small tablet devices and fixes for Error dialog box */

@media only screen and (max-device-width: 568px) {
  
  body {
    margin: 0 0 0 -4px !important;
  }
  
  .leftcol {
    float: none;
    position: relative;
    left: 0;
  } 

 .rightcol {
    float: none;
    position: relative;
    left: 0;
  } 

  #btnPrint, .printButton{
    display:none;
  }

 .resultSection {
     padding: 5px 5px 20px;
  } 

  .listbox{
     height: 40px;
  }

  .textbox{
     width: 142px;
  }

  select, .itinerylistbox{
    height: 40px;
  }

  .button{
    width: 80px;
  }

  .ui-tabs .ui-tabs-panel{
    width: 90%;
  }

  #originValidateAddressClear{
    margin-left: 10px;
  }

  #originValidateAddressAdd{
    margin-right: 10px;
  }

  .addressMenuError{
     border: solid 2px #ccc;
     margin-left: 5px !important;
  }

    #btnModify, #btnNewFare{
    float: left!important;
  }

  #resultSection #directionsDiv table tr td:first-child {
     width: auto !important;
  }

  .ui-dialog {
    left: 0px !important;
    border: 1px solid #ccc;
    top: 300px !important;
  } 
  
  .ui-dialog .ui-dialog-titlebar{
    border: 1px solid #ccc;
  }

}






/* Fix widths for all mobile devices */

@media all and (max-width: 600px) {
  
  .container, .leftcol, .mapMenu, .addressOptionButton, .addressMenu{      
    width: 100% !important;
	margin-right:10px !important;
    border:0;
  }
  
  .addressMenu{	
  padding:0 2px 5px 2px;
  margin:0;
  }
  
  .rightcol { 
    display:none; 
  }

    div#results{
    width: 100%;
  }
  .resultSection{
    width: 100%;
  }


  .addresslabel{
    width: 150px;
    margin-right: 8%;
    margin-top: 5px
  }
  
  .resultHeader{
    border:0;
  }
   
  #directionsDiv {
    width: 100% !important; 
  }

  .ui-slider{
    width:90%;
  }
}




/* Fix for IPHONE widths in PORTRAIT view (max 380px) */


@media all and (max-width: 380px) {

 /*  .ui-tabs .ui-tabs-panel, .ui-widget-header{
    width: 81%;
  }
   */

  .addresslabel{
    width: 150px;
    margin-right: 8%;
    margin-top: 5px
  }
  
  .addressOptionButton{
    background: #eee url(../images/fare-estimator-arrows.png) no-repeat 90% -90%;
	margin-left:0;
	padding:2px;
  }

  .addressOptionButtonSelected{
    background: #eee url(../images/fare-estimator-arrows.png) no-repeat 90% 183%;
  }

  .resultHeader{
    border:0;
  }

  #addressFormSection table{
  
  padding:0;}
  #addressFormSection >fieldset{
  padding: 0 7px;
  }


}