@font-face
    { 
	font-family: 'TexGyre';
	src: url('../fonts/texgyreadventor-regular-webfont.eot');
	src: url('../fonts/texgyreadventor-regular-webfont.eot?iefix') format('eot'),
	     url('../fonts/texgyreadventor-regular-webfont.woff') format('woff'),
	     url('../fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
	     url('../fonts/texgyreadventor-regular-webfont.svg#texgyreadventor-regular-webfont') format('svg');
    }

body
    {
    background-color: #775919;
    font-family: Arial,san-serif;
    }

.Bolded
    {
    font-weight: bold;
    }
    
#the_container
    {
    position: relative;
    overflow-x: hidden;
    }
        
#map_row
    {
    /*background-image: url("http://summertrailink.bcrd.org/img/new_layout/trail_whole_top_background.jpg");*/
    background-color: #463314;
    /*padding-bottom: 15px;*/
    }
    
@media (max-width: 599px) 
    {
    #map_row
        {
        display: none;
        }
    }   
    
#map_canvas
    {
    display: block;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    }

@media (min-width: 768px) 
    {
    #inner_nav_bar
        {
        display: none;
        }
    #main_navigation
        {
        display: block;
        }
    }
    
@media (max-width: 767px) 
    {
    #inner_nav_bar
        {
        display: block;
        }
    .navbar
        {
        min-height: 50px;
        }
    #main_navigation
        {
        display: none;
        }
    #map_row, #generic_top_row
        {
        margin-top: 50px;
        }
    }

@media (min-width: 768px) and (max-width: 999px) 
    {
    #map_row, #generic_top_row
        {
        margin-top: 92px;
        }
    }
    
@media (min-width: 1000px) 
    {
    #map_row, #generic_top_row
        {
        margin-top: 92px;
        }
    }

/* OVERRIDE HEADER TEXT FOR SUMMER */
@media (min-width: 1000px) 
    {
    #nav_text_inner1
        {
        font-size: 30px;
        letter-spacing: 0.1em;
        }
    }
/* END OVERRIDE */
    
.NavPanelDropDown
    {
    text-align: left;
    font-weight: bold;
    padding: 0px 2px 4px 5px;
    }
    
.NavPanelDropDown select
    {
    font-weight: normal;
    }
    
#nav_prompt
    {
    text-align: left;
    font-weight: bold;
    padding-left: 5px;
    }
    
#sub_region_nav_dropdown
    {
    display: block;
    }
    
.WhiteRow
    {
    background-color: white;
    }
    
.BrownRow
    {
    background-color: #463314;
    }
    
#at_the_fold
    {
    padding: 2px 0px 2px 0px;
    background-color: #5a1e58;
    height: 54px;
    cursor: pointer;
    cursor: hand;
    }
    
@media (max-width: 599px) 
    {
    #at_the_fold
        {
        display: none;
        }
    }   
    
    
#at_fold_logo, #at_fold_text
    {
    float: left;
    padding-right: 10px;
    }
    
#at_fold_text
    {
    font-family: 'Muli', sans-serif;
    font-weight: 500;
    font-size: 40px;
    letter-spacing: 0.0em;
    color: white;
    width: 60%;
    text-align: left;
    }
    
@media (min-width: 560px) and (max-width: 768px) 
    {
    #at_fold_text
        {
        font-size: 30px;
        }
    }     

@media (min-width: 436px) and (max-width: 559px) 
    {
    #at_fold_text
        {
        font-size: 25px;
        }
    }     

@media (max-width: 435px) 
    {
    #at_fold_text
        {
        font-size: 20px;
        }
    }     
    
#at_the_fold_scroll_down
    {
    float: right;
    padding: 8px 0px 0px 0px;
    }

#at_the_fold_scroll_down img
    {
    width: 70%;
    }
    
    
#small_screen_map_row
    {
    margin-top: 50px;
    padding: 2px 0px 2px 0px;
    background-color: #5a1e58;
    height: 54px;
    cursor: pointer;
    cursor: hand;
    }
    
@media (min-width: 600px) 
    {
    #small_screen_map_row
        {
        display: none;
        }
    }     

#small_screen_map_logo 
    {
    float: left;
    width: 15%;
    padding-right: 10px;
    }
    
#small_screen_map_text
    {
    float: left;
    padding-right: 10px;
    font-family: 'Muli', sans-serif;
    font-weight: 500;
    font-size: 25px;
    letter-spacing: 0.0em;
    color: white;
    width: 60%;
    text-align: left;
    line-height: 25px;
    }
    
#small_screen_map_go
    {
    float: right;
    width: 10%;
    font-size: 30px;
    color: white;
    }
    
   
@media (max-width: 375px) 
    {
    #small_screen_map_logo
        {
        width: 20%;
        }
    #small_screen_map_text
        {
        width: 50%;
        }
    #small_screen_map_go
        {
        width: 18%;
        }
    }     

@media (max-width: 325px) 
    {
    #small_screen_map_text
        {
        font-size: 20px;
        line-height: 20px;
        }
    }        

#legend_wrapper
    {
    padding: 5px;
    width: 100%;
    }

.LegendDot
    {
    float: left;
    width: 26px;
    height: 20px;
    padding-right: 3px;
    }
    
.LegendText
    {
    float: left;
    font-size: 115%;
    margin: 3px 0px 0px 3px;
    }
    
.LegendIcon
    {
    width: 25%;
    text-align: center;
    float: left;
    }
    
.LegendIconIcon
    {
    height: 40px;
    width: 100%;
    text-align: center;
    vertical-align: bottom;
    }
    
.LegendIconText
    {
    font-size: 80%;
    margin-top: -7px;
    }
    
#nav_panel_shrunk, #legend_panel_shrunk, #trail_info_panel_shrunk, #build_a_trail_control_panel_shrunk
    {
    position: absolute;
    background-color: #0076a3;
    top: -5000px;
    left: -5000px;
    z-index: 150;
    padding: 5px;
    font-size: 16px;
    }

#nav_panel_shrunk, #legend_panel_shrunk, #nav_panel_shrunk a:link, #legend_panel_shrunk a:link, #nav_panel_shrunk a:visited, #legend_panel_shrunk a:visited, #build_a_trail_control_panel_shrunk a:visited
    {
    color: white;
    }
    
#nav_panel_title, #legend_panel_title, #trail_info_panel_title, #build_a_trail_control_panel_title, #nav_panel_glyph, #legend_panel_glyph, #trail_info_panel_glyph1, #trail_info_panel_glyph2, #build_a_trail_panel_glyph
    {
    float: left;
    }
    
.WhiteGlyph
    {
    color: white;
    }
    
#expand_panel_wrapper
    {
    color: #0076a3;
    font-size: 110%;
    font-weight: bold;
    margin: 2px 0px 2px 0px;
    }
    
#expand_panel_wrapper:hover
    {
    cursor: pointer;
    cursor: hand;
    }
    
.icon-contract, .icon-expand
    {
    font-size: 17px;
    }
    
#tap_trail_wrapper
    {
    color: #0076a3;
    font-size: 110%;
    font-weight: bold;
    padding: 3px;
    display: none;
    position: absolute;
    z-index: 900;
    background-color: white;
    }
    
.BlackRow
    {
    background-color: black;
    color: white;
    font-family: 'Muli', sans-serif;
    font-weight: 400px;
    font-size: 20px;
    }    

.BlackRow a, .BlackRow a:link, .BlackRow a:visited
    {
    color: white;
    text-decoration: none;
    }
    
.BlackRow a:hover
    {
    text-decoration: none;
    }
    
.Centered
    {
    text-align: center;
    }
    
.NoPadRight
    {
    padding-right: 0px !important;
    }

.CenteredFullWidth
    {
    width: 100%;
    text-align: center;
    line-height: 100%;
    }
    
.CenteredFullWidth img 
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    
.BottomRow
    {
    padding-top: 15px;
    padding-bottom: 50px;
    }

.BottomRow, .BottomRow a:link, .BottomRow a:visited
    {
    color: #D3AB5A;
    }
    
.BottomRow a:hover
    {
    text-decoration: none;
    }

.BottomTextHeader
    {
    font-weight: bold;
    }
    
.DetailsTable
    {
    margin: 0px;
    padding: 0px;
    border: 0px;
    border-spacing:0;
    border-collapse:collapse;
    }
    
.DetailsTable td
    {
    padding-right: 5px;
    }
    
.PrintBuildATrailDetailsTable
    {
    margin: 0px;
    padding: 0px;
    border: 0px;
    border-spacing:0;
    border-collapse:collapse;
    }
    
.PrintBuildATrailDetailsTable td
    {
    padding-right: 5px;
    padding-bottom: 10px;
    vertical-align: top;
    }
    
.PrintBuildATrailForecast div
    {
    white-space: nowrap;
    }
    
.BuildATrailPrintSpinner
    {
    width: 18px;
    }
    
#build_a_trail_elevation_inner
    {
    padding-top: 20px;
    font-weight: bold;
    color: red;
    }


.IndivTrailGroomingCommentsBox
    {
    float: left;
    background-color: #b8d9f3;
    line-height: 1.1em;
    padding: 20px; 
    }
    
.IndivTrailReportRemarkTextHeader
    {
    font-weight: bold;
    }

.IndivTrailReportTextBlock
    {
    line-height: 1.1em;
    padding: 5px; 
    }
    
.IndivTrailSpacer
    {
    padding-top: 25px;
    }
    
.IndivTrailSpacerSmall
    {
    padding-top: 10px;
    }
    
.PhotoGalleryDiv {
      float: left;
      position: relative;
      width: 20%;
      padding-bottom: 30%;
    }

.PhotoGalleryDivInner 
    {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    overflow: hidden;
    }

.PhotoGalleryDivInner img 
    {
    width: 100%;
    }

@media only screen and (max-width : 300px) 
    {
    /* Smartphone view: 1 tile */
    .PhotoGalleryDiv 
        {
        width: 100%;
        padding-bottom: 100%;
        }
    }
@media only screen and (min-width: 301px) and (max-width : 480px) 
    {
    /* Smartphone view: 1 tile */
    .PhotoGalleryDiv 
        {
        width: 50%;
        padding-bottom: 75%;
        }
    }
@media only screen and (max-width : 650px) and (min-width : 481px) 
    {
    /* Tablet view: 2 tiles */
    .PhotoGalleryDiv 
        {
        width: 50%;
        padding-bottom: 60%;
        }
    }
@media only screen and (max-width : 1050px) and (min-width : 651px) 
    {
    /* Small desktop / ipad view: 3 tiles */
    .PhotoGalleryDiv 
        {
        width: 33.3%;
        padding-bottom: 43.3%;
        }
    }
@media only screen and (max-width : 1290px) and (min-width : 1051px) 
    {
    /* Medium desktop: 4 tiles */
    .PhotoGalleryDiv 
        {
        width: 25%;
        padding-bottom: 35%;
        }
    }
        
.PhotoTrailName
    {
    font-weight: bold;
    }
    
.PhotoVideoHeader
    {
    font-weight: bold;
    font-size: 135%;
    border-bottom: 1px dashed grey;
    margin: 10px 0px 10px 0px;
    }
    
.TrackInfoWindowHeader
    {
    font-weight: bold;
    }
    
#YourPositionHeader
    {
    font-weight: bold;
    padding-bottom: 5px;
    }

#YourPositionDisclaimer
    {
    font-style: italic;
    font-size: 90%;
    padding-top: 5px;
    }
    
#YourPositionWrapper
    {
    font-size: 115%;
    }
    
/* ------------------- END REGULAR ------------------------------------------- */


/* ------------------- PRINTABLE ------------------------------------------- */

.PrintTrailName
    {
    font-size: 35px;
    font-weight: bold;
    font-variant: small-caps;
    }
    
.PrintIndivTrailSpacer
    {
    margin: 10px 0px 10px 0px;
    border: 1px dashed #4684ee;
    }
    
.PrintIndivTrailHeader
    {
    padding-bottom: 5px;
    }
    
.PrintIndivTrailHeaderInner
    {
    float: left;
    border-bottom: 1px dashed #AAAAAA;
    font-size: 20px;
    font-weight: bold;
    }
    
#print_icon, #embed_logo, #map_pin_icon
    {
    position: absolute;
    width: 50px;
    height: 50px;
    z-index: 999;
    top: -1000px;
    left: -1000px;
    }
    
#tabs_internal_embed_div
    {
    width: 100%;
    color: white;
    font-weight: bold;
    cursor: pointer;
    cursor: hand;
    background-color: #463314;
    font-size: 16px;
    height: 45px;
    }
    
#tabs_internal_embed_div a
    {
    color: white;
    text-decoration: none;
    }
    
#tabs_internal_embed_div img
    {
    height: 40px;
    padding-right: 10px;
    }
    
#tabs_embed_link
    {
    color: #026afd;
    text-decoration: underline;
    }
    
#tabs_embed_link :hover
    {
    text-decoration: none;
    }
    
#tabs_internal_embed_div_left, #tabs_internal_embed_div_right
    {
    height: 45px;
    float: left;
    }
    
#tabs_internal_embed_div_right
    {
    padding-top: 18px;
    }
    
@media (min-width: 500px) AND (max-width: 649px)
    {
    #tabs_internal_embed_div
        {
        font-size: 13px;
        }
    }
    
@media (max-width: 599px)
    {
    .HideBelow600
        {
        display: none;
        }
    }        
    

@media (max-width: 500px) 
    {
    #print_icon
        {
        width: 25px;
        height: 25px;
        }
    }

/* ------------------- ENDPRINTABLE ------------------------------------------- */

    
/* GROOMING REPORT -------------------------------------------------------------- */
.GroomingRowBackground
    {
    background-color: #f5f9f1;
    }
    
.GroomingSecondRow td
    {
    border-top: 0px !important;
    font-size: 85%;
    font-style: italic;
    }

#grooming_report
    {
    overflow: hidden;
    text-align: left;
    }
    
#trails_report_comments_block
    {
    display: inline-block;
    background-color: #ffd457;
    color: black;
    padding: 0;
    /*padding: 10px 10px 10px 40px;*/
    text-align: left;
    min-height: 105px;
    }
    
#trails_report_comments_block_header
    {
    font-weight: bold;
    color: #bf2e1a;
    }
    
#trails_report_links_block
    {
    background-color: #463314;
    width: 40%; /*41%;*/
    float: right;
    margin-left: 15px;
    }

@media (min-width: 600px) and (max-width: 992px) 
    {
    #trails_report_links_block
        {
        width: 60%;
        }
    }

@media (max-width: 599px)
    {
    #trails_report_links_block
        {
        width: 100%;
        }
    }
    
    
#trails_report_comments_content, #trail_report_comments_more_content
    {
    padding: 10px 10px 10px 40px;
    }
    
#trail_report_comments_more_content, #less_comments_button_div
    {
    display: none;
    }
    
#trails_report_link_table
    {
    width: 100%;
    }

#trails_report_link_table td
    {
    padding: 5px 0px 5px 0px;
    font-size: 110%;
    line-height: 0.95em;
    }
    
#trails_report_link_table a:link, #trails_report_link_table a:visited
    {
    color: white;
    text-decoration: none;
    } 
#trails_report_link_table a:hover
    {
    color: white;
    text-decoration: underline;
    } 
    
.trails_report_link_block
    {
    width: 16%;
    vertical-align: middle
    text-align: center;
    }
    
.trails_report_link_block img
    {
    width: 90%;
    }

.trails_report_link_block td
    {
    line-height: 10px;
    }
    
.TrailsReportMarkersTable
    {
    margin: 0px;
    padding: 0px;
    border: 0px;
    border-spacing:0;
    border-collapse:collapse;
    width: 100%;
    }
    
/* .TrailsReportMarkersTable td at bottom of page */
    
.GroomingDividerRow
    {
    padding-top: 30px;
    /*border: 1px dashed #CCCCCC;
    margin-bottom: 10px;*/
    }
    
.TrailsReportRemarkBox
    {
    background-color: #D7B772; /*#775919;*/
    line-height: 1.1em;
    padding: 20px; 
    text-align: left;
    }
    
.TrailsReportRemarkTextHeader
    {
    font-size: 115%;
    font-weight: bold;
    }
    
.TrailsReportIcon
    {
    vertical-align: middle;
    text-align: center;
    width: 20px;
    padding-left: 2px;
    }
.TrailsReportIcon img
    {
    width: 20px;
    }
    
.TrailsReportWeatherSpinner
    {
    border: 1px solid red;
    text-align: center;
    height: 60px;
    }
    
.TrailInfoKeyTable td
    {
    vertical-align: middle;
    font-size: 12px !important;
    }
    
.TrailInfoKeyHeader
    {
    font-weight: bold;
    font-size: 14px;
    padding-bottom: 3px;
    }
    
.GroomingName
    {
    width: 50% !important;
    }
    
.GroomingDate
    {
    width: 20% !important;
    }
    
.GroomingReportHeaderSwirl
    {
    padding: 5px 10px 0px 10px;
    float: left;
    }
    
.GroomingReportHeaderRegion
    {
    float: left;
    font-size: 140%;
    line-height: 180%;
        width: 65%;
    }
    
@media (max-width: 359px) 
    {
    .GroomingReportHeaderRegion
        {
        width: 45%;
        font-size: 90%;
        line-height: 110%;
        }
    }     

@media (min-width: 360px) and (max-width: 559px) 
    {
    .GroomingReportHeaderRegion
        {
        width: 65%;
        font-size: 130%;
        line-height: 100%;
        }
    }     

@media (min-width: 560px) and (max-width: 768px) 
    {
    .GroomingReportHeaderRegion
        {
        font-size: 130%;
        line-height: 120%;
        width: 65%;
        }
    }     

@media (min-width: 769px) and (max-width: 1000px) 
    {
    .GroomingReportHeaderRegion
        {
        font-size: 140%;
        line-height: 140%;
        width: 75%;
        }
    }     

    
@media (max-width: 599px) 
    {
    .GroomingTableNew td
        {
        padding-top: 2px;
        padding-bottom: 2px;
        font-size: 90%;
        }
    .GroomingTableNew img
        {
        width: 70%;
        }
    }    

.GroomingTableNew td
    {
    padding: 2px !important;
    }

.SnowshoeOnlyTD
    {
    padding-left: 5px;
    font-size: 105%;
    text-align: left !important;
    font-weight: bold;     
    }
    
.GroomingReportRemarkBox
    {
    text-align: left !important;
    font-size: 90%;
    line-height: 1.3em;
    }
    
.ForecastDay
    {
    font-weight: bold;
    }
    
.ForecastText
    {
    font-style: italic;
    }

.GroomingReportWaxTable
    {
    padding: 0;
    margin: 0;
    }
    
.GroomingReportWaxTable td
    {
    padding: 1px 5px 1px 10px;
    margin: 0px;
    border: 0px;
    border-spacing:0;
    border-collapse:collapse;
    }
    
.BackToTop
    {
    float: right;
    padding: 10px 10px 0px 0px;
    }
    
/* -------------------------------------------------------------- */
    
    
/* GROOMING REPORT TABLE HEADERS, ROTATED -------------------------------------------------------------- */
.table-header-rotated th.row-header{
  width: auto;
}

.table-header-rotated td{
  width: 40px;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  vertical-align: middle;
  text-align: center;
}

.table-header-rotated th.rotate-header{
  height: 130px; /* 80px; */
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  position: relative;
  vertical-align: bottom;
  padding: 0;
  font-size: 13px;
  /*line-height: 0.8;*/
  white-space: nowrap;
}

@media (max-width: 599px) 
    {
    .table-header-rotated th.rotate-header
        {
        height: 130px; /* 80px; */
        width: 30px;
        min-width: 30px;
        max-width: 30px;
        position: relative;
        vertical-align: bottom;
        padding: 0;
        font-size: 13px;
        /*line-height: 0.8;*/
        white-space: nowrap;
        }
    }

.table-header-rotated th.rotate-header > div{
  position: relative;
  top: 0px;
  left: 31px; /*left: 40px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
  height: 100%;
  -ms-transform:skew(-26deg,0deg);
  -moz-transform:skew(-26deg,0deg);
  -webkit-transform:skew(-26deg,0deg);
  -o-transform:skew(-26deg,0deg);
  transform:skew(-26deg,0deg);
  overflow: hidden;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
}

@media (max-width: 599px) 
    {
    .table-header-rotated th.rotate-header > div
        {
        left: 0px;
        -ms-transform:skew(0deg,0deg);
        -moz-transform:skew(0deg,0deg);
        -webkit-transform:skew(0deg,0deg);
        -o-transform:skew(0deg,0deg);
        transform:skew(0deg,0deg);
        }
    }

.table-header-rotated th.rotate-header span 
    {
    /* original rotation was 315, original skew was 45 */
    -ms-transform:skew(26deg,0deg) rotate(295deg);
    -moz-transform:skew(26deg,0deg) rotate(295deg);
    -webkit-transform:skew(26deg,0deg) rotate(295deg);
    -o-transform:skew(26deg,0deg) rotate(295deg);
    transform:skew(26deg,0deg) rotate(295deg);
    position: absolute;
    bottom: 38px; /* 40 cos(45) = 28 with an additional 2px margin*/
    left: -22px; /*-25px; /*Because it looked good, but there is probably a mathematical link here as well*/
    display: inline-block;
    /* width: 100%; */
    width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
    text-align: left;
    /* white-space: nowrap; */ /*whether to display in one line or not*/
    }

@media (max-width: 599px) 
    {
    .table-header-rotated th.rotate-header span 
        {
        /* original rotation was 315, original skew was 45 */
        left: -32px; /*-25px; /*Because it looked good, but there is probably a mathematical link here as well*/
        line-height: 100%;
        }
    }
/* -------------------------------------------------------------- */




/* INFO BOX -------------------------------------------------------------- */
.TrailInfoWrapper, .BuildATrailInfoWrapper
    {
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    height: 299px;
    position: relative;
    }

.TrailInfoBoxDiv, .BuildATrailInfoBoxDiv
    {
    text-align: left;
    }

.TrailInfoBoxName
    {
    /*font-size: 150%;*/
    height: 28px;
    font-size: 18px;
    }

.TrailInfoHeaderRow
    {
    color: white;
    background-color: black;
    height: 28px;
    padding: 2px 0px 2px 0px;
    }

.TrailInfoBoxTitle
    {
    font-weight: bold;
    }
    
.TrailInfoBoxHeaderStatus
    {
    float: left;    
    width: 50%;
    text-align: center;
    }

.TrailInfoRemarkBox
    {
    }
    
.TrailInfoIndivRemarkBox
    {
    padding: 5px;
    }
    
.TrailInfoTextBlock, .TrailInfoTextBlock td
    {
    font-size: 85%;
    line-height: 1.1em;
    padding: 5px; 
    }

.TrailInfoDataTable
    {
    text-align: center;
    width: 100%;
    }
    
.TrailInfoDataTable td
    {
    width: 33%;
    font-size: 80%;
    text-align: center;
    }

.TrailGainLossTable td
    {
    width: 50%;
    font-size: 80%;
    text-align: center;
    }

.TrailInfoTextBlockInner
    {
    background-color: #d7b772; /*#775919;*/
    color: black;
    padding-top: 5px;
    }
    
.TrailInfoPadder
    {
    padding: 5px 5px 5px 5px;
    }
    
.TrailInfoPadTop
    {
    padding-top: 10px;
    }
        
.TrailInfoTextHeader
    {
    font-size: 115%;
    font-weight: bold;
    }
    
.TrailInfoMarker
    {
    float: left;
    padding: 0px 5px 5px 0px;
    }
    
.ForecastBlock
    {
    text-align: center;
    vertical-align: top;
    }
    
.ForecastBlockHeader
    {
    padding-bottom: 15px;
    font-weight: bold;
    }    

.TopShade  
    {
    position: absolute;
    top: 0;
    height: 30px;
    z-index: 1000;
    /*width: 200px;*/
    display: none;
    width: 100%;
    background: -moz-linear-gradient(top,  rgba(87,87,87,1) 0%, rgba(119,119,119,1) 40%, rgba(152,152,152,0) 90%, rgba(255,255,255,0) 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(87,87,87,1)), color-stop(40%,rgba(119,119,119,1)), color-stop(90%,rgba(152,152,152,0)), color-stop(99%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(87,87,87,1) 0%,rgba(119,119,119,1) 40%,rgba(152,152,152,0) 90%,rgba(255,255,255,0) 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(87,87,87,1) 0%,rgba(119,119,119,1) 40%,rgba(152,152,152,0) 90%,rgba(255,255,255,0) 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(87,87,87,1) 0%,rgba(119,119,119,1) 40%,rgba(152,152,152,0) 90%,rgba(255,255,255,0) 99%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(87,87,87,1) 0%,rgba(119,119,119,1) 40%,rgba(152,152,152,0) 90%,rgba(255,255,255,0) 99%); /* W3C */
    }    

.BottomShade  
    {
    position: absolute;
    bottom: 0;
    height: 30px;
    z-index: 1000;
    /*width: 200px;*/
    width: 100%;
    display: none;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(152,152,152,0) 40%, rgba(119,119,119,1) 90%, rgba(87,87,87,1) 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(40%,rgba(152,152,152,0)), color-stop(90%,rgba(119,119,119,1)), color-stop(99%,rgba(87,87,87,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(152,152,152,0) 40%,rgba(119,119,119,1) 90%,rgba(87,87,87,1) 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(152,152,152,0) 40%,rgba(119,119,119,1) 90%,rgba(87,87,87,1) 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(152,152,152,0) 40%,rgba(119,119,119,1) 90%,rgba(87,87,87,1) 99%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(152,152,152,0) 40%,rgba(119,119,119,1) 90%,rgba(87,87,87,1) 99%); /* W3C */
    }    
    
.TrailInfoBottomBlocksTable
    {
    margin: 0px;
    padding: 0px;
    border: 0px;
    border-spacing:0;
    border-collapse:collapse;
    width: 100%;
    }
    
.TrailInfoBottomBlocksTable td
    {
    text-align: center;
    font-size: 85%;
    width: 33%;
    }

.TrailInfoBottomBlocksTable img
    {
    margin: 0 auto;
    }

.TrailInfoBottomBlocksTable a:link, .TrailInfoBottomBlocksTable a:visited, .BuildTrailControlLink a:link, .BuildTrailControlLink a:visited
    {
    color: black;
    text-decoration: underline;
    line-height: 12px;
    }
.TrailInfoBottomBlocksTable a:hover
    {
    color: black;
    text-decoration: none;
    }

.InfoBoxGroomingReport
    {
    font-size: 13px;
    width: 100%;
    }
        
@media (max-width: 699px) 
    {
    .InfoBoxTitle
        {
        font-size: 16px;
        width: 74%;
        /*color: red;*/
        }
    .InfoBoxStatus, .InfoBoxGrooming, .InfoBoxSearch
        {
        float: left;    
        width: 13%;
        }
    }
    
@media (min-width: 700px) and (max-width: 899px) 
    {
    .InfoBoxTitle
        {
        font-size: 24px;
        /*color: blue;*/
        }
    }

@media (min-width: 900px) 
    {
    .InfoBoxTitle
        {
        font-size: 30px;
        }
    }

.InfoBoxRow
    {
    width: 100%;
    }
    
.InfoBoxDiv hr
    {
    margin: 5px 0px 0px 5px;
    }
    
.InfoBoxIcon
    {
    width: 16%;
    float: left;
    text-align: center;
    }
    
.InfoBoxIcon img, .InfoBoxStatus img, .InfoBoxGrooming img
    {
    display:block;
    margin:auto;
    }
    
.RowPadTop
    {
    padding-top: 15px;
    }
    
.InfoBoxLink
    {
    width: 33%;
    text-align: center;
    float: left;
    }
    
.TrailInfoBoxIcon
    {
    width: 23%;
    padding: 5px 2px 5px 2px;
    float: left;
    }
    
.TrailInfoIconsRow
    {
    margin-left: 0px;
    font-size: 80%;
    }
    
.TrailInfoElevation
    {
    text-align: center;
    }
    
.TrailInfoElevationInner
    {
    position: relative;
    height: 100px;
    width: 177px;
    }    
    
.TrailElevationCaption
    {
    margin-top: 0px; /*-12px;*/
    font-size: 90%;
    font-style: italic;
    line-height: normal;
    }
    
.TrailInfoSpinner
    {
    position: absolute;
    top: 20px;
    left: 58px;
    }    
/* -------------------------------------------------------------- */


/* ------------------------------ INDIVIDUAL TRAILS ----------------- */

.IndivTrailTitle
    {    
    color: black;
    font-family: 'Muli', sans-serif;
    font-weight: 700;
    font-size: 35px;
    letter-spacing: 0.1em;
    }


@media (min-width: 351px) and (max-width: 599px) 
    {
    .IndivTrailTitle
        {
        line-height: 100%;
        font-size: 25px;        
        }
    }

@media (max-width: 350px) 
    {
    .IndivTrailTitle
        {
        line-height: 90%;
        font-size: 25px;        
        }
    }
    
.IndivTrailHeader
    {    
    color: black;
    font-family: 'Muli', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.1em;
    }
    
.IndivTrailHeaderSmall
    {    
    color: black;
    font-family: 'Muli', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.1em;
    }
    
.PhotoVideoTable
    {
    margin: 0px;
    padding: 0px;
    border: 0px;
    border-spacing:0;
    border-collapse:collapse;
    }
    
.PhotoVideoTable td
    {
    text-align: left;
    }
    
.KMLGPXDivs
    {
    width: 40%;
    float: left;
    padding-right: 10px;
    }    

.KMLGPXTable
    {
    margin: 0px;
    padding: 0px;
    border: 0px;
    border-spacing:0;
    border-collapse:collapse;
    width: 100%;
    }
    
.KMLGPXHeader
    {
    font-weight: bold;
    }
    
.KMLGPXText
    {
    font-size: 85%;
    font-style: italic;
    }
    

/* ------------------------------ END INDIVIDUAL TRAILS ----------------- */


/* ------------------------------ WEBCAMS ----------------- */

.WebCamDiv
    {
    width: 100%;
    text-align: center;
    position: relative;
    }
    
.WebCamExpand
    {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background-color: white;
    padding: 5px 6px 3px 6px;
    border-radius: 8px;
    border: 1px solid black;    
    }

.WebCamExpand .glyphicon
    {
    font-size: 200%;
    }
    
    
.WebCamDiv img
    {
    display: initial;
    }
    
.WebCamDivider
    {
    border-bottom: 1px dashed grey;
    margin-bottom: 50px;
    padding-bottom: 25px;
    }
    
.WebCamDescription
    {
    font-size: 110%;
    text-align: center;
    font-weight: bold;
    }    

/* ------------------------------ END WEBCAMS ----------------- */

    
/* Bootstrap overrides -------------------------------------------------------------- */
.btn-primary 
    {        
    background-color: #0076a3;
    }
    
.modal-body
    {
    text-align: left;
    }
/* -------------------------------------------------------------- */



    
/* JS PANEL -------------------------------------------------------------- */
.jsPanel-content.jsPanel-theme-primary
    {
    font-family: Arial,san-serif;
    }
    
.JSPanelTitle
    {

    }
    
.jsPanel-hdr.jsPanel-theme-primary 
    {
    background: none repeat scroll 0 0 #775919;
    }
/* -------------------------------------------------------------- */




/* TABS -------------------------------------------------------------- */
#tabs_div
    {
    width: 100%;
    background-color: white;
    }

.nav-tabs > li
    {
    width: 7.69%;
    border-bottom: 1px solid white;
    }
    
.nav-tabs_indiv > li
    {
    float: left;
    width: 14.25%;
    border-bottom: 1px solid white;
    }
    
.nav-tabs li.active, .nav-tabs_indiv li.active
    {
    border-bottom: 1px solid white;
    }    
    
.nav-tabs > li > a, .nav-tabs_indiv > li > a
    {
    background-color: #BBBBBB;
    border-bottom: 1px solid black;
    border-right: 1px solid #444444;
    border-left: 1px solid #444444;
    border-top: 1px solid #444444;
    /* this class redeclared at bottom to override std nav overrides */
    }
    
#tabs_div li > a
    {
    padding-top: 4px;
    padding-bottom: 4px;
    }
    
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover, .nav-tabs_indiv > li.active > a, .nav-tabs_indiv > li.active > a:focus, .nav-tabs_indiv > li.active > a:hover
    {
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 0px;
    /*border-color: black black transparent;*/
    }
    
.TopTabsSingleLine
    {
    height: 43px;
    }
    
.TopTabsSingleLineInnerDiv
    {
    line-height: 30px;
    }
/* -------------------------------------------------------------- */



        
/* CONTROL NAV BAR -------------------------------------------------------------- */
.navbar
    {
    background-color: #463314;
    margin-bottom: 0px;
    border-bottom: 0px;
    }

.navbar-brand
    {
    padding: 0px 15px 0px 0px;
    }
    
@media (min-width: 768px) 
    {
    .navbar .navbar-nav 
        {
        display: inline-block;
        float: none;
        vertical-align: top;
        }

    .navbar .navbar-collapse 
        {
        text-align: center;
        }
    }
    
#right_tag_line_wrapper
    {
    margin-top: 5px;
    } 

@media (max-width: 992px) 
    {
    #right_tag_line_wrapper 
        {
        display: none;
        }
    }

#right_tag_line
    {
    color: white;
    font-family: Helvetica, san-serif;
    letter-spacing: 0.4em;
    font-style: italic;
    font-size: 105%;
    }
    
.nav > li
    {
    white-space: nowrap;
    } 

.nav > li > a 
    {
    padding-right: 0;
    padding-left: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 100%;
    }

@media (min-width: 992px) and (max-width: 1199px) 
    {
    .nav > li > a 
        {
        padding-right: 0;
        padding-left: 0;
        font-size: 120%;
        letter-spacing: 0.03em;
        }
    }
@media (min-width: 1200px) 
    {
    .nav > li > a 
        {
        padding-right: 0;
        padding-left: 0;
        font-size: 130%;
        letter-spacing: 0.04em;
        }
    }

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover 
    {
    background-color: transparent;
    }

#bcrd_menu > a, #bcrd_menu.active > a {color: #fceab8;}
#bcrd_menu > ul {background-color: #fceab8;}
#bcrd_menu > ul > li > a {color: #7d4900; font-weight: bold;}

#community_campus_menu > a, #community_campus_menu.active > a {color: #adbf6e;}
#community_campus_menu > ul {background-color: #e6eddd;}
#community_campus_menu > ul > li > a {color: #406618; font-weight: bold;}

#sportscape_menu > a, #sportscape_menu.active > a {color: #009ddc;}
#sportscape_menu > ul {background-color: #cdebf7;}
#sportscape_menu > ul > li > a {color: #0072bc; font-weight: bold;}

#galena_menu > a, #galena_menu.active > a, #trails_menu > a, #trails_menu.active > a {color: #8781bd;}
#galena_menu > ul, #trails_menu > ul {background-color: #e9cade;}
#galena_menu > ul > li > a, #trails_menu > ul > li > a {color: #4b0049; font-weight: bold;}

#bcrd_menu > a:hover, #community_campus_menu > a:hover, #sportscape_menu > a:hover, #galena_menu > a:hover, #trails_menu > a:hover {color: #333333;}

.navbar-brand-centered
    {
    position: absolute;
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
    left: 0;
    top: 0;
    text-align: center;
    color: white;
    line-height: 100%;
    }
    
.navbar-brand-centered:hover
    {
    color: white;
    text-decoration: none;
    }
    
.navbar-brand-centered > .glyphicon
    {
    color: red;
    font-size: 200%;
    }
    
@media (min-width: 600px) 
    {
    .navbar-brand-centered
        {
        display: none;
        }
    }   
/* -------------------------------------------------------------- */







.StandardTable
    {
    margin: 0px;
    padding: 0px;
    border: 0px;
    border-spacing:0;
    border-collapse:collapse;
    }
    
.NoWrap
    {
    white-space: nowrap;
    }

#measurement_td
    {
    white-space: nowrap;
    border: 1px solid red;
    }
    
#measurement_div
    {
    position: absolute;
    top: -10000px;
    left: -10000px;
    z-index: 200;
    }

.nav-tabs > li > a
    {
    font-size: 90%;
    }
    
.AlignLeft
    {
    text-align: left !important;
    }

.AlignCenter
    {
    text-align: center !important;
    }


.FloatLeft
    {
    float: left;
    }
    
.FloatLeftPadRight
    {
    float: left;
    padding-right: 10px;
    }
    
.InlineB
    {
    display: inline-block;
    }
    
.InlineBPadRight
    {
    display: inline-block;
    padding-right: 10px;
    }
    
    
.DashedLeft
    {
    border-left: 1px dashed #888888;
    }
    
.DashedBottomMargined
    {
    border-bottom: 1px dashed #888888;
    margin-bottom: 10px;
    }

.NoWrap
    {
    white-space: no-wrap;
    }
    
.TrailsReportMarkersTable td
    {
    text-align: left;
    width: auto;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    padding-right: 5px;
    }
    
.BottomPad5
    {
    padding-bottom: 5px;
    }
    
.ClickableElement
    {
    cursor: pointer;
    cursor: hand;
    }
    
.BoldClass
    {
    font-weight: bold;
    }
    
.NoUnderlineLink, .NoUnderlineLink a:link, .NoUnderlineLink a:visited, .NoUnderlineLink a:hover, .NoUnderlineLink :hover
    {
    text-decoration: none;
    }
    
.visible-xxs-block
    {
    display: none !important;
    }

@media (max-width: 350px) 
    {
    .visible-xxs-block
        {
        display: block !important;
        }
    .col-xxs-12
        {
        width: 100% !important;
        }
    }

.txt-ctr-caps
    {
    font-weight: bold;
    }
    
    
    
.BottomSocialSearchIcons
    {
    float: right;
    padding-left: 25px;
    }
    
#search_icon_button_bottom
    {
    margin-top: 6px;
    }

.BottomSocialSearchIcons > a, #search_icon_button_bottom
    {
    color: #F3CF36;
    font-size: 180%;
    }
    
.sb_search_bottom
    {
    position: absolute;
    left: 50%;
    top: 0px;
    height: 44px;
    width: 50%;
    z-index: 1001;
    background-color: #F3CF36;
    display: none;
    }
    
@media (max-width: 515px)
    {
    .sb_search_bottom
        {
        left: 0%;
        width: 100%;
        }        
    }                
    
.sb_search_bottom > form
    {
    padding-top: 3px;
    }
    
.sb_search_bottom_sub
    {
    width: 100%;
    left: 0%;
    }
    
#inner_search_icon_bottom
    {
    float: left;
    width: 46.8px;
    }
    
#inner_search_icon_bottom > span.glyphicon
    {
    font-size: 150%;
    }     
    
#inner_search_icon_bottom
    {
    color: rgb(70,51,20);
    font-size: 100%; 
    }

#search_submit_button_bottom
    {
    margin-left: 5px;
    margin-top: 1px;
    margin-right: 10px;
    }

.WebCamCaption
    {
    background-color: white;
    }
    

/* BUILD A TRAIL */
.YellowButton
    {
    background-color: #ffd457;
    color: black;
    }
    
.YellowButton :focus
    {
    background-color: #ccab4c;
    }
    
.YellowButton a
    {
    color: black;
    text-decoration: none;
    }
    
.PadTopBottom
    {
    padding: 10px 0px;
    }
    
.YellowButton.btn:focus,
.YellowButton.btn:active:focus,
.YellowButton.btn.active:focus,
.YellowButton.btn.focus,
.YellowButton.btn:active.focus,
.YellowButton.btn.active.focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.YellowButton.btn:hover,
.YellowButton.btn:focus,
.YellowButton.btn.focus {
  color: white;
  text-decoration: none;
  background-color: #ccab4c;
}
 
.BuildTrailStatusTD img
    {
    width: 25px;
    height: 20px;
    }
    
.ConsolidatedBuildTrailStatusTD img
    {
    width: 25px;
    height: 20px !important;
    }

.AddedBuildTrailTD
    {
    vertical-align: middle;
    padding-right: 10px;
    }
    
.AddedBuildTrailTD img
    {
    height: 20px;
    padding-left: 5px;
    }
    
.BuildTrailConnectorTD
    {
    font-style: italic;
    padding-right: 5px;
    font-size: 10px;
    }
    
.BuildTrailDividerTD
    {
    line-height: 1px;
    }
    
.BuildTrailUsesImg
    {
    width: 20px;
    height: 20px;
    display: inline-block;
    }
    
.BuildTrailInfoElevation
    {
    text-align: center;
    }
    
.BuildTrailInfoElevationInner
    {
    position: relative;
    height: 100px;
    width: 100%;
    }    
    
.BuildTrailElevationCaption
    {
    margin-top: 0px; /*-12px;*/
    font-size: 90%;
    font-style: italic;
    line-height: normal;
    }
    
.BuildTrailInfoSpinner
    {
    margin: 0 auto;
    }
    
.BuildTrailWarning
    {
    margin: 0px 15px 10px 15px;
    border: 2px solid black;
    padding: 4px;
    text-align: center;
    font-size: 110%;
    }
    
.BuildTrailInfoDetails
    {
    margin: 0px 15px 10px 15px;
    }        
    
.BuildTrailInfoBlocks
    {
    display: inline-block;
    font-weight: bold;
    padding: 2px 4px;
    }        

.BuildTrailWarningClosed
    {
    background-color: #98005d;
    color: white;
    }
    
.BuildTrailWarningPartial
    {
    background-color: #fcb040;
    }
    
.BuildTrailWarningConstruction
    {
    background-color: #ffcd07;    
    }
    
.BuildTrailInfoDiffBeginner
    {
    background-color: #b4cd95;
    }
    
.BuildTrailInfoDiffIntermediate
    {
    background-color: #23aae1;
    color: white;
    }
    
.BuildTrailInfoDiffAdvanced, .BuildTrailInfoDiffExtreme
    {
    background-color: black;
    color: white;
    }

#build_trail_total_gain, #build_trail_total_loss, #build_trail_start_elev, #build_trail_end_elev, #build_trail_max_elev, #build_trail_min_elev
    {
    font-weight: bold;
    }
    
#build_trail_modal_body
    {
    padding: 30px;
    }
    
#build_trail_modal_body a
    {
    color: blue;
    text-decoration: underline;
    font-weight: bold;
    }
    
#build_trail_modal_body a:hover
    {
    text-decoration: none;
    }
    
.ShareIconWrapper 
    {
    width: 20%;
    padding-left: 1%;
    padding-right: 1%;
    text-align: center;
    line-height: 13px;
    float: left;
    }
    
.BuildTrailTextBlocks
    {
    display: none;
    }
    
/* KML GPX BUILD STYLING */
#custom_kml_gpx_list
    {
    padding: 10px;
    border: 1px solid grey;
    margin-top: 20px;
    display: none;
    }
    
#custom_kml_gpx_list ul
    {
    list-style-type: none;
    }
    
.KMLGPXRegionLink 
    {
    font-size: 105%;
    font-weight: bold;
    }
    
#custom_kml_gpx_list a
    {
    color: black;
    }
    
#custom_kml_gpx_list a.btn
    {
    color: white;
    }
    
#kml_gpx_button_div
    {
    width: auto;
    overflow: hidden;
    text-align: right;
    margin-top: 3px;
    }

#small_screen_kml_gpx_row
    {
    display: none;
    }    

@media (max-width: 599px) 
    {
    #small_screen_kml_gpx_row
        {
        display: block;
        }
    }    

#small_screen_kml_gpx_div
    {
    margin: 5px 0px;
    }
        
#kml_gpx_button_div img
    {
    width: 30px;
    }

#small_screen_kml_gpx_div img
    {
    width: 20px;
    }
    
#kml_gpx_button_div div, #small_screen_kml_gpx_div div
    {
    float: left;
    }
    
#kml_gpx_button_text, #kml_gpx_button_text_sm
    {
    padding: 0px 5px;
    line-height: 16px;
    }
    
#kml_gpx_button_text_sm
    {
    display: none;
    }
    
@media (min-width: 600px) and (max-width: 991px) 
    {
    #kml_gpx_button_text_sm
        {
        display: block;
        }
    #kml_gpx_button_text
        {
        display: none;
        }
    }

@media (min-width: 600px) and (max-width: 699px) 
    {
    #kml_gpx_button_div img
        {
        width: 0px;
        }
    }

#small_screen_kml_gpx_button_text
    {
    padding: 2px 5px 0px 5px;
    }
    
#kml_gpx_small_screen_br
    {
    display: none;
    }

@media (max-width: 450px) 
    {
    #kml_gpx_small_screen_br
        {
        display: block;
        }
    }
/* END KML / GPX BUILD STYLE */
  
.HappyTrailsHeaderRow
    {
    padding: 0px 10px 5px 10px;
    }
    
.HappyTrailFeaturedImage
    {
    padding: 0px 10px;
    }
    
.HappyTrailsHeaderLogo img
    {
    width: 100%;
    }
    
.HappyTrailsHeaderText
    {
    font-size: 140%;
    font-weight: bold;
    color: #6e685f;
    }
    
.KetchumWarningTextBlockInner
    {
    background-color: #de3e3e; /*#775919;*/
    color: white;
    font-weight: bold;
    padding-top: 5px;
    }

.KCityPageFeaturedImage img
    {
    width: 100%;
    max-width: 400px;
    }
    
.KCityPageDirections, .KCityPageWarning, .KCityPageContent
    {
    width: 95%;
    background-color: #d7b772;
    padding: 10px;
    margin: 10px 20px 10px 20px;
    }
    
.KCityPageContent img
    {
    max-width: 100%;
    height: auto !important;
    }
    
.KCityPageWarning
    {
    background-color: #de3e3e; /*#775919;*/
    color: white;
    font-weight: bold;
    } 
    
.KCityBottomBlocksTable img
    {
    padding: 10%;
    }
    
.HappyTrailsOpen, .HappyTrailsClosed
    {
    font-size: 200%;
    line-height: 100%;
    text-align: center;
    font-weight: bold;
    }
    
.HappyTrailsOpen
    {
    background-color: #1ed738;
    color: black;
    }
    
 .HappyTrailsClosed
    {
    background-color: #c81323;
    color: white;
    }

.ModalExplanations
    {
    padding-left: 10px !important;
    color: red;
    }