body {
    font-family: "Droid Sans";
}

.card {
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    padding: 1em;
    float: left;
}

#weather {
    display: none;
    width: 400px;
}

.card .main {
    font-size: 300%;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.axis path {
    display: none;
}

.axis text {
    font-size: 90%;
}

.y.axis line,
.y2.axis line {
    display: none;
}

.y2.axis text {
    fill: steelblue;
}

.y.axis text {
    fill: #FF9900;
}

.templine {
    fill: none;
    stroke: #FF9900;
    stroke-width: 1.5px;
}

.precipline {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}

.spot {
    display: none;
    stroke-width: 1.5px;
    fill: white;
}

.tempspot {
    stroke: #FF9900;
}

.precipspot {
    stroke: steelblue;
}

.background {
    stroke-width: 0;
    border: none;
    margin: 0:
    padding: 0;
    fill: white;
}

.rain {
    fill: #D1E8FF;
}

.wind {
    fill: #EEEEEE;
}

.partly-cloudy-day,
.partly-cloudy-night {
    fill: #EFEFEF;
}

.cloudy {
    fill: #CFCFCF;
}

@media (min-width: 30em) {
    .row { width: 100%; display: table; table-layout: fixed; }
    .col { display: table-cell; }
}

.col {
    vertical-align: top;
}

#date {
    font-weight: bold;
}