/************* Variables ********************/
/* ======== Generic Variable ============== */
/* ======== Button Varibles =============== */
/*======== Search Button Variables ==========*/
/*======== Membership Package Variables ==========*/
/* End Variables */
/************** Mixins ***************/
/* For anything with rounded corners , pass the pixels and/or corners
through when declaring in .scss file, i.e.(@include roundedCorner(5px 4px 3px 2px); */
/* Gives box shadow to all browsers except IE, right now no variables declared
so you're kind of stuck with the options listed below. */
/* Gives text shadow to all browsers except IE*/
/* Gives linear gradient background with no stops on all browsers,
just one color at the top going to another color at the bottom,
assuming bottom color is the darker color the background color is
set for older browsers that can't handle it. */
/* End Mixins */
/* Below are Jims which need removed */
@import url("route_listing.css");
/*Styles that should be in route details already*/
.mmf_title_block .mmf_left_container {
  border: 2px solid #CCCCCC;
  float: left;
  height: 40px;
  width: 60px;
  background: #333333 url("/public/images/core/template/mmf_miles_bg.png") repeat-x;
  padding: 5px 20px;
  border: medium solid #E0E0E0; }
  .mmf_title_block .mmf_left_container p {
    color: #FFFFFF;
    font-size: 12px;
    margin: 0;
    font-family: Helvetica;
    text-align: center; }
  .mmf_title_block .mmf_left_container span {
    font-family: Helvetica;
    font-size: 22px;
    text-shadow: #333 1px 1px 1px; }
.mmf_title_block .mmf_right_container {
  float: left; }
.mmf_title_block h2 {
  float: left;
  color: #424040;
  font-size: 18px;
  margin: 10px 0px 0px 10px;
  width: 400px; }
.mmf_title_block .mmf_specs {
  margin-top: 5px; }
  .mmf_title_block .mmf_specs p {
    font-size: 12px;
    font-weight: normal;
    color: #666;
    margin: 0; }
    .mmf_title_block .mmf_specs p a {
      font-weight: bold; }

.mmf_description p {
  color: #333333;
  line-height: 1.4; }
  .mmf_description p span {
    color: #a6a6a6;
    font-size: 11px; }

.route_detail_info {
  border-top: 3px solid #336699;
  padding-top: 10px; }
  .route_detail_info .per_complete_container {
    float: right;
    padding-right: 10px; }
  .route_detail_info p {
    margin: 0;
    color: #a6a6a6;
    font-size: 12px; }
    .route_detail_info p strong {
      color: #000000; }
    .route_detail_info p a {
      font-weight: bold; }
  .route_detail_info .route_user_img {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    background-color: #e7e7e7; }
  .route_detail_info .route_user_info {
    float: left; }

.map_per_bar {
  border: 1px solid #aaaaaa;
  width: 120px;
  height: 15px;
  background: #e7e7e7;
  padding: 2px; }
  .map_per_bar .map_per_done {
    background-color: #287ab5;
    height: 100%; }
    .map_per_bar .map_per_done .map_per_text {
      color: #FFFFFF;
      font-weight: bold;
      padding: 2px 0 0 10px; }

.mmf_badges_bar .mmf_icon {
  display: block;
  background-color: #e7e7e7;
  border: 0;
  float: left;
  width: 28px;
  height: 28px;
  margin-left: 5px; }

.mmf_embed {
  float: left;
  background-color: #F0F0F0;
  padding: 10px 0 0;
  width: 100%;
  border: 1px solid #DBDBDB; }
  .mmf_embed span {
    width: 80px;
    margin-right: 10px;
    padding-top: 3px;
    text-align: right;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    color: #555555;
    display: block;
    float: left; }
  .mmf_embed input {
    float: left;
    width: 170px;
    height: 12px;
    border: 0;
    background-color: #FFFFFF;
    margin-bottom: 10px; }
  .mmf_embed .mmf_customize_btn {
    display: block;
    background: transparent url("/public/images/route/icon_customize.png") no-repeat;
    width: 18px;
    height: 18px;
    float: left;
    margin: 2px 0 0 5px; }

.mmf_action_pallete {
  float: left;
  width: 100%;
  margin-bottom: 10px; }
  .mmf_action_pallete .mmf_badges_bar {
    background-color: #F0F0F0;
    border: 1px solid #DBDBDB;
    padding: 5px 0;
    margin: 0; }
    .mmf_action_pallete .mmf_badges_bar .mmf_badge {
      float: left;
      margin-left: 10px; }
      .mmf_action_pallete .mmf_badges_bar .mmf_badge .mmf_badge_num {
        float: left;
        font-size: 10px;
        font-weight: bold; }
    .mmf_action_pallete .mmf_badges_bar a.mmf_right_link {
      margin-top: 5px; }
  .mmf_action_pallete .mmf_grid_50 .mmf_grid_content {
    padding: 5px 0;
    margin: 0; }
    .mmf_action_pallete .mmf_grid_50 .mmf_grid_content input {
      float: left;
      margin-left: 35px; }
    .mmf_action_pallete .mmf_grid_50 .mmf_grid_content span {
      color: #FFFFFF;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 12px;
      margin-left: 5px;
      margin-top: 3px;
      float: left; }
    .mmf_action_pallete .mmf_grid_50 .mmf_grid_content.mmf_done {
      background-color: #94c40f;
      margin-right: 10px; }
    .mmf_action_pallete .mmf_grid_50 .mmf_grid_content.mmf_like_to {
      background-color: #e59600; }

.mmf_list_block {
  width: 100%;
  padding: 5px 5px 5px 0; }
  .mmf_list_block .mmf_list_row {
    float: left;
    width: 100%;
    border-top: 1px solid #E1E1E1;
    background-color: #f3f3f3; }
    .mmf_list_block .mmf_list_row .left_col {
      float: left;
      padding: 5px;
      background-color: #FFFFFF;
      border-right: 1px solid #e1e1e1; }
    .mmf_list_block .mmf_list_row .right_col {
      float: left;
      padding: 5px 10px; }
      .mmf_list_block .mmf_list_row .right_col .mmf_heading {
        color: #848484;
        font-size: 12px;
        font-weight: bold;
        margin: 0; }
      .mmf_list_block .mmf_list_row .right_col .mmf_per_bar {
        border: 1px solid #aaaaaa;
        width: 220px;
        height: 20px;
        margin-top: 5px;
        background: #FFFFFF; }
      .mmf_list_block .mmf_list_row .right_col .mmf_per_bar .mmf_per_done {
        background-color: #287ab5; }
        .mmf_list_block .mmf_list_row .right_col .mmf_per_bar .mmf_per_done .mmf_per_text {
          color: #FFFFFF;
          font-weight: bold;
          padding: 2px 0 0 10px; }

.routes_nearby {
  width: 100%;
  padding: 5px 5px 5px 0; }
  .routes_nearby .mmf_list_row {
    float: left;
    width: 100%;
    border-top: 1px solid #bdbdbd;
    background-color: #FFFFFF; }
    .routes_nearby .mmf_list_row .left_col {
      float: left;
      padding: 10px 5px;
      background-color: #FFFFFF; }
    .routes_nearby .mmf_list_row .right_col {
      float: left;
      padding: 5px 10px; }
      .routes_nearby .mmf_list_row .right_col a.mmf_heading {
        display: block;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 5px; }
      .routes_nearby .mmf_list_row .right_col .mmf_distance {
        color: #000000;
        font-size: 12px;
        float: left;
        width: 90px;
        padding-top: 10px; }
        .routes_nearby .mmf_list_row .right_col .mmf_distance span {
          font-size: 18px;
          font-weight: bold; }
      .routes_nearby .mmf_list_row .right_col .mmf_route_map {
        width: 100px;
        height: 45px;
        float: left;
        background-color: gray;
        margin-right: 5px; }
      .routes_nearby .mmf_list_row .right_col .mmf_elevation {
        float: left;
        padding-top: 15px;
        font-size: 14px;
        font-weight: bold; }
        .routes_nearby .mmf_list_row .right_col .mmf_elevation .mmf_increase {
          color: #009966; }
        .routes_nearby .mmf_list_row .right_col .mmf_elevation .mmf_decrease {
          color: #cc3333; }

.mmf_route_stats .mmf_stat_row {
  margin-bottom: 10px; }
.mmf_route_stats .mmf_hr {
  width: 100%;
  height: 1px;
  border-top: 1px solid #e7e7e7;
  clear: both;
  margin: 20px 0; }
.mmf_route_stats .mmf_stat_col {
  float: left;
  margin-right: 0px; }
  .mmf_route_stats .mmf_stat_col p {
    font-size: 12px;
    margin: 0;
    padding-top: 5px; }
    .mmf_route_stats .mmf_stat_col p strong {
      font-size: 14px; }
    .mmf_route_stats .mmf_stat_col p a {
      font-size: 14px;
      font-weight: bold; }
  .mmf_route_stats .mmf_stat_col.mmf_heading {
    font-size: 20px;
    width: 100px;
    text-align: right;
    padding-top: 10px; }
  .mmf_route_stats .mmf_stat_col .mmf_badge {
    float: right;
    margin-right: 0px; }
.mmf_route_stats .mmf_badge_col {
  font-size: 20px;
  width: 50px;
  text-align: right;
  margin-bottom: 10px;
  margin-right: 5px; }

/*Route Stat Block*/
.mmf_stat_block {
  padding: 5px;
  color: #666666;
  text-align: center;
  margin: 6px;
  font-size: 12px;
  height: 48px; }
  .mmf_stat_block span {
    font-size: 14px;
    color: #666666;
    font-weight: bold; }
  .mmf_stat_block div {
    margin-left: auto;
    margin-right: auto; }
  .mmf_stat_block .mmf_difficulty_container {
    margin-top: 2px; }

/*Route Difficulty Blocks*/
.mmf_difficulty_container {
  margin-left: auto;
  margin-right: auto;
  margin-top: 3px;
  width: 45px; }
  .mmf_difficulty_container div {
    border: 1px solid #666;
    height: 10px;
    margin: 1px;
    width: 10px;
    font-size: 1px;
    float: left; }
  .mmf_difficulty_container.mmf_easy div, .mmf_difficulty_container.mmf_very_easy div {
    background-color: green; }
  .mmf_difficulty_container.mmf_medium div {
    background-color: blue; }
  .mmf_difficulty_container.mmf_hard div {
    background-color: black; }
  .mmf_difficulty_container.mmf_very_hard div {
    background-color: black; }

/*Route Landing Page*/
.mmf_pubpriv_stat {
  width: 70px;
  padding: 5px;
  text-align: center;
  margin-top: 10px;
  margin-right: 7px;
  float: left; }
  .mmf_pubpriv_stat hr {
    margin: 2px 0 1px; }
  .mmf_pubpriv_stat strong {
    font-size: 18px; }
  .mmf_pubpriv_stat span {
    font-size: 12px;
    color: #999999; }

* html .mmf_pubpriv_stat {
  border: 1px solid #999; }

/*--percentage bars--*/
.mmf_perbar_container {
  float: left;
  margin-left: 20px; }
  .mmf_perbar_container .mmf_perbar_title {
    font-size: 12px;
    color: #888888; }
  .mmf_perbar_container .mmf_perbar_amt {
    float: left;
    display: block;
    color: #000000;
    font-weight: bold;
    font-size: 14px;
    padding: 0 0 0 7px; }
  .mmf_perbar_container .mmf_perbar_type {
    float: left;
    display: block;
    font-size: 12px;
    color: #888888;
    padding: 1px 0 0 3px; }

.mmf_perbar_outer {
  width: 240px;
  background-color: #e7e7e7;
  padding: 2px 0 2px 2px; }
  .mmf_perbar_outer .mmf_perbar {
    float: left; }
    .mmf_perbar_outer .mmf_perbar .mmf_perbar_inner {
      height: 14px;
      margin-right: 2px; }
    .mmf_perbar_outer .mmf_perbar.mmf_per_road .mmf_perbar_inner {
      background-color: #63503a; }
    .mmf_perbar_outer .mmf_perbar.mmf_per_trail .mmf_perbar_inner {
      background-color: #00AD1D; }
    .mmf_perbar_outer .mmf_perbar.mmf_per_nc .mmf_perbar_inner {
      background-color: #e7e7e7; }
    .mmf_perbar_outer .mmf_perbar.mmf_per_easy .mmf_perbar_inner {
      background-color: #82BF03; }
    .mmf_perbar_outer .mmf_perbar.mmf_per_hard .mmf_perbar_inner {
      background-color: #FEAF03; }
    .mmf_perbar_outer .mmf_perbar.mmf_per_difficult .mmf_perbar_inner {
      background-color: #E5630F; }

/*Top Row Result actions:*/
.mmf_top_row_actions {
  margin: 15px 0 3px 0; }
  .mmf_top_row_actions a.mmf_right_link {
    padding: 8px 0 0 0;
    outline: none; }
    .mmf_top_row_actions a.mmf_right_link span {
      float: left; }
    .mmf_top_row_actions a.mmf_right_link div {
      float: left;
      margin: 2px 0 0 5px; }
  .mmf_top_row_actions .mmf_pointer_container {
    float: left;
    width: 20px;
    padding: 8px 0 0 8px;
    height: 16px; }
  .mmf_top_row_actions .mmf_secondary_button {
    float: left; }

.mmf_btm_row_actions {
  clear: both;
  margin-top: 3px; }
  .mmf_btm_row_actions a.mmf_right_link {
    padding-top: 8px; }
  .mmf_btm_row_actions .mmf_pointer_container {
    float: left;
    width: 20px;
    padding: 2px 0 0 8px;
    height: 16px; }
  .mmf_btm_row_actions .mmf_secondary_button {
    float: left; }

.mmf_btm_row_actions .mmf_row_instructions, .mmf_top_row_actions .mmf_row_instructions {
  float: left;
  margin-left: 15px;
  padding-top: 8px;
  display: block;
  color: #666666;
  font-size: 12px; }
  .mmf_btm_row_actions .mmf_row_instructions strong, .mmf_top_row_actions .mmf_row_instructions strong {
    color: #000000; }

.mmf_route_sort_by {
  float: right; }
  .mmf_route_sort_by label {
    color: #666666;
    font-size: 12px;
    padding-right: 5px; }
  .mmf_route_sort_by select {
    font-size: 12px; }

/*elevation chart*/
.elevation_chart table {
  margin-bottom: 15px;
  width: 97%;
  border-collapse: separate;
  font-size: 12px;
  color: #666666; }
  .elevation_chart table th {
    color: #999999;
    font-weight: bold;
    border-bottom: 1px solid #999999;
    text-align: right;
    padding-right: 3px; }
  .elevation_chart table td {
    text-align: right;
    border-bottom: 1px solid #ccc;
    padding-right: 3px; }
  .elevation_chart table tr {
    height: 32px; }
    .elevation_chart table tr.odd {
      background-color: #F4F8FC; }
    .elevation_chart table tr.hover td {
      background-color: #ced8c3; }
.elevation_chart .mmf_right_link {
  margin-right: 15px; }

/* Compare */
#route_comparison_map {
  margin: 5px;
  padding: 5px;
  height: 500px;
  border: 1px solid #666;
  background-color: #CCC; }
  #route_comparison_map #route_engine_container {
    width: 100% !important; }

#route_engine_container {
  overflow: hidden; }

#route_comparison_elevation {
  margin: 5px;
  padding: 5px;
  height: 250px;
  border: 1px solid #666;
  background-color: #CCC; }

/* Route 3d Video */
#advert_video {
  height: 370px;
  width: 100%; }
  #advert_video #player {
    display: block;
    width: 600px;
    height: 360px;
    position: absolute; }

#video_iframe {
  display: none; }

.embed_code {
  display: none;
  text-align: center;
  padding-top: 20px; }
  .embed_code textarea {
    text-align: left; }

#video_footer_actions {
  float: right;
  text-align: right; }