body, html{ font-family: 'Open Sans', sans-serif; }
.container{ width: 800px; margin: 60px auto; }
.sidebar{ width: 300px; float: left; background: #FFFFFF; border-radius:5px; text-align: center; box-shadow: 0 0 5px #7C7C7C; transition: all .4s cubic-bezier(0, 1.3, 1, 1.3); }
.sidebar-inside{ background: #FFFFFF; width:100%; border-radius:5px 5px 0 0; padding: 15px 0; font-size: 14px;}
.sidebar-inside2{ background: #B8A385; border-radius: 0 0 5px 5px;}
.sidebar-inside p { padding: 0 10px; }
.main{ width: 450px; background: #ffffff; float: left; margin-left: 10px; border-radius:5px; box-shadow: 0 0 5px #7C7C7C; overflow: hidden; min-height: 610px; }
.name{ font-size: 20px; font-weight: 800; }
.summary{ font-size: 16px; font-weight: 300; }
.gmap3{ margin: 0px auto; width: 450px; height: 400px; }
.icon{ width: 50px; height:50px; margin: 0 auto; }
.distance .icon{ background: url('../img/icons.png') 0 0 no-repeat transparent;}
.time .icon{ background: url('../img/icons.png') -50px 0 no-repeat transparent;}
.calories .icon{ background: url('../img/icons.png') -100px 0 no-repeat transparent;}
.speed .icon{ background: url('../img/icons.png') -150px 0 no-repeat transparent;}
.gas .icon{ background: url('../img/icons.png') -200px 0 no-repeat transparent;}
.co2_emissions .icon{ background: url('../img/icons.png') -250px 0 no-repeat transparent;}
.max_speed .icon{ background: url('../img/icons.png') -300px 0 no-repeat transparent;}
.altitude .icon{ background: url('../img/icons.png') -350px 0 no-repeat transparent;}
.infobox { display: inline-block; padding: 20px 5px; text-align: center; width: 95px; }
.infobox .label{ font-size: 10px; font-weight: 400; }
.infobox .value{ font-size: 40px; font-weight: 400; padding: 10px 0; }
.datebox { display: inline-block; padding: 20px 5px; text-align: center; width: 200px; }
.datebox .label{ font-size: 10px; font-weight: 400; }
.datebox .value{ font-size: 20px; font-weight: 400; padding: 10px 0; }
.start_date .icon{ background: url('../img/calendar_start.png') 0px 0 no-repeat transparent;}
.end_date .icon{ background: url('../img/calendar_stop.png') 0px 0 no-repeat transparent;}
.datebox .icon { float: left; padding: 5px; }
.panel { margin: 0 auto; text-align: center; width: 450px; }
hr.seperator{ border: 1px solid #e9e9e9; }
/* User */
ul.rides { list-style-type: none; margin: 0; padding: 0; }
ul.rides li { border-bottom: 1px solid #e0e0e0; padding: 10px 15px 10px 130px; position: relative; background: none repeat scroll 0 0 #efefef; }
ul.rides li:hover { background: #e0e0e0; cursor: pointer; }
ul.rides li .title { float: right; font-size: 25px; }
ul.rides li .subtitle{ font-size: 12px; }
.extrabold{ font-weight: 700; }
.light{ font-weight: 300; }
ul.rides li .icon { left: 10px; position: absolute; top: 5px; }
ul.rides li .icon > img { width: 45px; }
.clearfix{ clear:both; }
.profile_pic { border-radius: 100px; height: 160px; margin: 0 auto; overflow: hidden; width: 160px; }
.profile_pic img{ width: 160px; }
.profile_pic:hover img { cursor: pointer; opacity: 1; transform: scale(1.2) rotate(-5deg); transition-duration: 1s, 1s, 1s, 1s, 1s, 1s; transition-property: width, height, transform, background, font-size, opacity; }
.date_header { font-size: 16px; font-weight: 400; padding: 10px; }

a:link{ text-decoration: none; }
.user { border: 1px solid #e0e0e0; border-radius: 5px; padding: 10px; text-align: center; }
.user a.user_link .picture { border-radius: 100px; margin: 10px auto; overflow: hidden; width: 160px; }
.user  a.user_link .picture img { border-radius: 100px; }
.user a.user_link .fullname { text-decoration: none; font-weight: 600; color: #222; }
.user  a.user_link .picture:hover img { cursor: pointer; opacity: 1; transform: scale(1.2) rotate(-5deg); transition-duration: 1s, 1s, 1s, 1s, 1s, 1s; transition-property: width, height, transform, background, font-size, opacity; }

.login_div_btn { background: none repeat scroll 0 0 #efefef; border: 1px solid #e0e0e0; border-radius: 2px; color: #222; display: inline-block; font-size: 14px; padding: 3px 5px; position: relative; top: -4px; }
.login_div_btn:hover { background: none repeat scroll 0 0 #F7F7F7; color: #222 !important; }

.logout_div_btn { background: none repeat scroll 0 0 #efefef; border: 1px solid #e0e0e0; border-radius: 2px; color: #222; display: inline-block; font-size: 14px; padding: 3px 5px !important; position: relative; top: -4px; }
.logout_div_btn:hover { background: none repeat scroll 0 0 #F7F7F7; color: #222 !important; }

.login_div {
    background: none repeat scroll 0 0 #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 10px #222;
    height: 240px;
    left: 50%;
    margin-left: -200px;
    padding: 10px;
    position: fixed;
    top: 330px;
    width: 400px;
	display: none;
}


@media (max-width: 1000px) {
	.container{ width: 470px; margin: 60px auto; }
	.sidebar { float: none; margin-bottom: 20px; margin-left: 10px; width: 450px; transition: all .4s cubic-bezier(0, 1.3, 1, 1.3); }
	.sidebar-inside { border-radius: 5px 0 0 5px; padding: 13px 0; width: 50%; float:left; }
	.sidebar-inside2 { border-radius: 5px 0 0 5px; padding: 10px 0; width: 50%; float:left; }
	.profile_pic { border-radius: 100px; height: 50px; margin: 0 auto; overflow: hidden; width: 50px; }
	.profile_pic img { border-radius: 100px; width: 50px; transition: all .4s cubic-bezier(0, 1.3, 1, 1.3); }
	.sidebar-inside2 > img { height: 100px; width: 100px; transition: all .4s cubic-bezier(0, 1.3, 1, 1.3); }
}