uber_v_taxis.css

/*General Style*/
.section_header{
    text-align: center;
}

/*Slider styling*/
.mean_container{
    margin-left: 60px;
    margin-top: 10px;
}
@media (min-width: 1px) {
    .mean_container .slider.slider-horizontal{
        width: 100%;
    }
}
@media (min-width: 992px) {
    .mean_container .slider.slider-horizontal{
        width: 500px;
    }
}
#stand_dev_slider{
    margin-top: 40px;
}
.horizontal_slider{
    margin-right: 10px;
    
}
@media (min-width: 767px){
    .horizontal_slider{
        float: right;
    }
}
.horizontal_slider .slider.slider-vertical{
    height: 185px;
}
.change_demand_container{
    text-align: center;
}
.slider_label {
	transform: rotate(90deg);
	transform-origin: left top 0;
    float: right;
}
#demand_slider_container{
    margin-top: 40px;
}
/*Graph styling*/
.graph_title{
    font-size: 14px;
}
@media (min-width: 767px) {
    .graph_title{
        font-size: 16px;
    }
}
.axis path,
.axis line{
    fill: none;
    stroke: #777;
    shape-rendering: crispEdges;
}

.axis text{
    font-family: 'Arial';
    font-size: 13px;
}
.tick{
    stroke-dasharray: 1, 2;
}

/*Input styling*/
.simulation_inputs div{
    text-align: right;
    padding-top: 5px;
    padding-bottom: 5px;
}
input.simulation_inputs{
    width: 50px;
    text-align: center;
}

/*Stats styling*/
.stats{
    padding-bottom: 5px;
}
.stats.header,
.stats.value{
    text-align: center;
    height: 100%;
}
.stats.header{
    font-weight: bold;
}
/*Simulation grid styling*/
.simulation_start{
    padding-top: 20px;
    padding-bottom: 20px;
}
.simulation_time{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
.simulation_header{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
.simulation_grid{
    padding-bottom: 10px;
    margin-right: auto;
    margin-left: auto;
}
table.simulation_grid td{
    width: 16px;
    height: 16px;
}
@media (min-width: 992px){
    table.simulation_grid td{
        width: 20px;
        height: 20px;
    }
}
@media (min-width: 1200px){
    table.simulation_grid td{
        width: 25px;
        height: 25px;
    }
}
table.simulation_grid{
    border: solid 1px;
}
td.street{
    background-color: #E2E2E2;
}
td.north{
    border-left: dashed 3px white;
}
td.south{
    border-right: dashed 3px white;
}
td.west{
    border-bottom: dashed 3px white;
}
td.east{
    border-top: dashed 3px white;
}
.simulation_grid td.obstacle{
    background-color: #f0eee6;
    border: none;
}
td.northwest{
    -webkit-box-shadow: inset -4px -4px 0px 0px rgba(199,196,185,1);
    -moz-box-shadow: inset -4px -4px 0px 0px rgba(199,196,185,1);
    box-shadow: inset 4px 4px 0px 0px rgba(199,196,185,1);
}
td.northeast{
    -webkit-box-shadow: inset -4px -4px 0px 0px rgba(199,196,185,1);
    -moz-box-shadow: inset -4px -4px 0px 0px rgba(199,196,185,1);
    box-shadow: inset -4px 4px 0px 0px rgba(199,196,185,1);
}
td.southeast{
    -webkit-box-shadow: inset -4px -4px 0px 0px rgba(199,196,185,1);
    -moz-box-shadow: inset -4px -4px 0px 0px rgba(199,196,185,1);
    box-shadow: inset -4px -4px 0px 0px rgba(199,196,185,1);
}
td.southwest{
    -webkit-box-shadow: inset -4px -4px 0px 0px rgba(199,196,185,1);
    -moz-box-shadow: inset -4px -4px 0px 0px rgba(199,196,185,1);
    box-shadow: inset 4px -4px 0px 0px rgba(199,196,185,1);
}
.heading_container{
    position: relative;
    height: 100%;
    width: 100%;
}

/*Heading styling*/
td.has_car.heading_north  div.heading_north{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0%;
    top: 0%;
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
td.has_car.heading_south div.heading_south{
    height: 100%;
    width: 100%;
    -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
td.has_car.heading_east div.heading_east{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0%;
    top: 0%;
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
td.has_car.heading_west div.heading_west{
    height: 100%;
    width: 100%;
    -webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
}
td.has_car div{
    background-size: cover;
    background-repeat:   no-repeat;
    background-position: center center;
}
/*Taxi car style*/
table.taxi td.has_car div.heading_container div{
    background-image: url(taxi.png);
}
/*Uber car style*/
table.uber td.has_car div.heading_container div{
    background-image: url(uber.png);
}
/*Passenger carrying car style*/
table td.has_car.has_passenger div.heading_container div{
    background-image: url(passenger_car.png);
}

/*Passenger styling*/
table.uber td.has_passenger{
    background-image: url(passenger.png);
    background-size: cover;
    background-repeat:   no-repeat;
    background-position: center center;
}
table.taxi td.has_passenger{
    background-image: url(passenger_taxi.png);
    background-size: cover;
    background-repeat:   no-repeat;
    background-position: center center;
}
table td.has_car.has_passenger{
    background-image: none;
}