body{
  font-family:"Roboto",helvetica,arial,sans-serif;
  font-size:14px;
  background-color:#fff;
  color:#111;
}

a{
  color:#00f;
  text-decoration:none;
  cursor:pointer;
}

#contain{
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
}
.ridebar{
  display:block;
  overflow-x:hidden;
  width: 50%;
  margin-bottom:5px;
  height:3px;
  background-color:#ccc;
}

.leftbarr{
  float:left;
}

.leftbarr .timebar{
  float:right;
}

.rightbarr{
  float:right;
}

.timebar{

  height:3px;
}
#login{
  display:none;
}
#topbar{
  text-align:right;
  margin-bottom:50px;
}
#contain #sidebar{
  float:left;
  width:130px;
}

.sechead{
  margin-top:25px;
  color:#999;
}

#totaldist, #ridecount, #totaltime{
  font-size:25px;
}

#contain #sidebar .title{
  font-weight:700;
  font-size:25px;
}
#contain #sidebar .description{
  margin-top:25px;
}
#contain #maincontent{
  float:right;
  width:325px;
}
.contenthead{
  font-size:18px;
}
.clear{
  clear:both;
}
#login input{
  display:block;
  width: 100%;
  margin-top:5px;
  font-family:"Roboto",helvetica,arial,sans-serif;
  font-size:14px;
}
#logaride input{
  margin-top:5px;
  font-family:"Roboto",helvetica,arial,sans-serif;
  font-size:14px;
}
#descripbox{
  margin-top:5px;
  font-family:"Roboto",helvetica,arial,sans-serif;
  font-size:14px;
  width:100%;
  height:100px;
}
.milesbox{
  display:block;
  width:100%;
}
.hourbox, .minbox{
  display:inline-block;
  width:100px;
}

#logaride{
  display:none;
}
#logout{
  margin-left:10px;
}

.ridedescrip {
    margin-top: 5px;
    margin-bottom: 10px;
}
#logbutton{
  width:100%;
  text-align:center;
  background-color: #ccc;
  cursor:pointer;
  margin-top:10px;
  line-height:25px;
}
.ridedist{
  float:left;
  font-size:18px;
}
.rideduration{
  float:right;
  font-size:18px;
}

#maincontent .entry{
  margin-bottom:50px;
}

#maincontent .entry .ridedate{
  margin-bottom:5px;
  color:#999;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  select,
  textarea,
  input {
    font-size: 16px;
  }
}
@media only screen and (max-width:500px) {
  #contain #maincontent {
    float: none !important;
    width: 95% !important;
    margin-top: 50px !important;
}

#contain #sidebar {

    text-align: center !important;
    float: none !important;
    width: 95% !important;
}
#contain{
  width:95%;
}
#topbar{
  width:95% !important;
}
body{
  margin:10px;
  overflow-x: hidden;
}
.section {
    width: 95px !important;
    display: inline-block !important;
}

.description{
  margin-bottom:15px !important;
  margin-top:5px !important;
}
}