/* WebRTMaps.CSS - STYLING FOR MAP PAGES ONLY - USED INSTEAD OF WebRT.CSS (Because of Leaflet font styling conflicts) */
/* BACKGROUND AND TEXT STYLING) */
  html, body 
    {
    height: 100%;
    margin: 0;
    }
  h4 /* MAP MENU BUTTONS 2 */ 
    {
    /*font-family: century gothic, arial, tahoma, verdana, sans-serif;*/
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 18px;
    line-height: 0px;
    /*color: rgb(0, 104, 201);*/
    color: rgb(167 211 254);
    }
  h5 /* MAP MENU SUBTITLES 3  */ 
    {
    /*font-family: century gothic, arial, tahoma, verdana, sans-serif;*/
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 0px;
    /*color: rgb(0, 104, 201);*/
    color: rgb(167 211 254);
    }
  .TextMapLegend /* LEGEND */ 
    {
    /*font-family: century gothic, arial, tahoma, verdana, sans-serif;*/
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    color: rgb(0 0 0);
    }
  .TextTight /* Smaller line height for text - Main map popups */ 
    {    
    line-height: 0px;    
    }
  .TextShadowBlack2p
    {
    text-shadow: 
      2px 2px 1px rgb(0,0,0),1px 1px 1px rgb(0,0,0);
    }
  .TextOutlineBlack1p
    {
    text-shadow: 
      -1px -1px 0px rgb(0,0,0),-1px 0px 0px rgb(0,0,0),-1px 1px 0px rgb(0,0,0),
      0px -1px 0px rgb(0,0,0),0px 1px 0px rgb(0,0,0),
      1px -1px 0px rgb(0,0,0),1px 0px 0px rgb(0,0,0),1px 1px 0px rgb(0,0,0);
    }
  .TextRedOutlineBlack1p
    {
    color: rgb(255 100 100);
    text-shadow: 
      -1px -1px 0px rgb(0,0,0),-1px 0px 0px rgb(0,0,0),-1px 1px 0px rgb(0,0,0),
      0px -1px 0px rgb(0,0,0),0px 1px 0px rgb(0,0,0),
      1px -1px 0px rgb(0,0,0),1px 0px 0px rgb(0,0,0),1px 1px 0px rgb(0,0,0);
    }
  .TextOutlineBlack2p
    {
    text-shadow: 
      -2px -2px 1px rgb(0,0,0),-2px -1px 1px rgb(0,0,0),-2px 0px 1px rgb(0,0,0),-2px 1px 1px rgb(0,0,0),-2px 2px 1px rgb(0,0,0),
      -1px -2px 1px rgb(0,0,0),-1px -1px 1px rgb(0,0,0),-1px 1px 1px rgb(0,0,0),-1px 2px 1px rgb(0,0,0),
      0px -2px 1px rgb(0,0,0),0px -1px 1px rgb(0,0,0),0px 1px 1px rgb(0,0,0),0px 2px 1px rgb(0,0,0),
      1px -2px 1px rgb(0,0,0),1px -1px 1px rgb(0,0,0),1px 1px 1px rgb(0,0,0),1px 2px 1px rgb(0,0,0),
      2px -2px 1px rgb(0,0,0),2px -1px 1px rgb(0,0,0),2px 0px 1px rgb(0,0,0),2px 1px 1px rgb(0,0,0),2px 2px 1px rgb(0,0,0);
    }
  .TextOutlineBlack2pb
    {
    text-shadow: 
      -2px -2px 1px rgb(0,0,0,0.4),-2px -1px 1px rgb(0,0,0,0.4),-2px 0px 1px rgb(0,0,0,0.4),-2px 1px 1px rgb(0,0,0,0.4),-2px 2px 1px rgb(0,0,0,0.4),
      -1px -2px 1px rgb(0,0,0,0.4),-1px -1px 1px rgb(0,0,0,0.4),-1px 1px 1px rgb(0,0,0,0.4),-1px 2px 1px rgb(0,0,0,0.4),
      0px -2px 1px rgb(0,0,0,0.4),0px -1px 1px rgb(0,0,0,0.4),0px 1px 1px rgb(0,0,0,0.4),0px 2px 1px rgb(0,0,0,0.4),
      1px -2px 1px rgb(0,0,0,0.4),1px -1px 1px rgb(0,0,0,0.4),1px 1px 1px rgb(0,0,0,0.4),1px 2px 1px rgb(0,0,0,0.4),
      2px -2px 1px rgb(0,0,0,0.4),2px -1px 1px rgb(0,0,0,0.4),2px 0px 1px rgb(0,0,0,0.4),2px 1px 1px rgb(0,0,0,0.4),2px 2px 1px rgb(0,0,0,0.4);
    }
/* LINK STYLING - GLOBAL - Affects map layers control menu and map left menu for Leaflet js "Helvettica" font link styling - Non map RT pages use diff css file for diff "CenturyGothic" font link styling */
  a:link 
    {
    color: rgb(0, 0, 0);
    /* font-family: century gothic, arial, tahoma, verdana, sans-serif; */
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; 
    font-weight: 400; /*100-900 400=normal*/
    font-size: 9pt;
    text-decoration: none;
    }
    a:visited 
      {
      color: rgb(0, 0, 0);
      font-weight: 400; /*100-900 400=normal*/
      font-size: 9pt;
      text-decoration: none;
      }
    a:hover 
      {
      color: rgb(0, 0, 0);
      font-weight: 900; /*100-900 400=normal*/
      font-size: 9pt;
      text-decoration: none;
      }
    a:active 
      {
      color: rgb(0, 0, 0);
      font-weight: 900; /*100-900 400=normal*/
      font-size: 9pt;
      text-decoration: none;
      }	
/* CORE STYLING USED BY NON MAP PAGES AS WELL */
   .p4 /* Text body (Body of text under ABOUT, PHOTO USE, etc*/ 
		{
		font-family: century gothic, arial, verdana, trebuchet, tahoma, Times New Roman, sans-serif;
		font-weight: normal; /*100-900 400=normal*/
		font-size: 15px;
		line-height: normal;
		padding: 0px;
		margin: 0px;
		border: 0px;
		color: rgb(255, 255, 255);
		text-decoration: none;
		}
  .p22 /* ALL CONTENT COPYRIGHT - Whiter (for on colored bckgrnds) */ 
    {
    font-family: "century gothic", arial, tahoma, verdana, sans-serif;
    font-weight: normal;
    font-size: 12px;
    color: rgb(120,120,120); /**/
    }	
	.GuideOuter900x850 
		{
		position: absolute;
		top: 0px; 
		left: 50%;
		width: 900px;
		height: 850px;
		margin-left: -450px; /*Always take 1/2 from the size of the width, they have to be negative*/
		/*border: 1px solid rgb(255,255,255);*/ /*Used for reference purposes only - Comment out for final use*/
		}
	.TextBlockGuide /* Guide block for standard page of text - Left justified */
		{
		position: absolute;
		top: 120px; 
		left: 50%;
		width: 800px;
		height: 130px;
		margin-left: -400px; /*Always take 1/2 from the size of the width, they have to be negative*/
		/*border: 1px solid rgb(255,255,0);*/ /*Used for reference purposes only - Comment out for final use*/
		}	
	.TextBlockGuideCenter /* Guide block for standard page of text - Center justified */
		{
		position: absolute;
		top: 120px; 
		left: 50%;
		width: 800px;
		height: 35px;
		margin-left: -400px; /*Always take 1/2 from the size of the width, they have to be negative*/
    text-align: center;
		/*border: 1px solid rgb(255,255,0);*/ /*Used for reference purposes only - Comment out for final use*/
		}	
	.CopyrightFloatGuide /* Position is relative to other elements in a div - Floats to bottom of inline test or stacked up other divs */
		{
		position: relative;
		top: 0px;
		left: 303px;
		width: 188px;
		height: 17px;
		padding: 3px;
		padding-top: 1px;
		padding-bottom: 2px;
		/*background-color: rgb(0, 0, 0, .5);*/
		/*border: 1px solid rgb(255,0,0);*/
		 }
	.CopyrightText
		{
		position: absolute;
		top: -10px;
		left: 4px;
		}
/* MENUS */        
/* MENU TOP */ 
  .MenuTopPageGuide /* Menu at top of page - Fixed in place regardless of scrolling */
    {
    opacity: .9;
    position: fixed;
    top: 5px; 
    left: 50%;
    width: 250px;
    height: 80px;
    margin-left: -125px;
    z-index: 999;
    /*border: 1px solid rgb(255,255,0);*/ /*Used for reference purposes only - Comment out for final use*/
    }	
  .MenuRollingTreeGuide a
    {
    position: absolute;
    top: 5px; 
    left: 50%;
    width: 230px;
    height: 40px;
    margin-left: -115px; /*Always take 1/2 from the size of the width, they have to be negative*/
    text-align: center;			
    font-family: Times New Roman, arial, verdana, trebuchet, tahoma, century gothic, sans-serif;
    font-size: 35px;
    letter-spacing: 2px;
    color: rgb(255,255,255); 
    z-index: 1100; /* 400 or greater is above main map layer (mymap) - 400 or greater is above marker and polyline layers */     
    /*border: 1px solid rgb(253, 4, 4);*/ /*Used for reference purposes only - Comment out for final use*/		
    }		
  .MenuRollingTreeGuide a:link 
    {
    font-weight: 400;
    text-decoration: none;
    }		
    .MenuRollingTreeGuide a:hover 
      {
      font-weight: bold; /*100-900 400=normal*/
      text-decoration: none;
      }	
    .MenuRollingTreeGuide a.CurrentPage
      {
      font-weight: bold; /*100-900 400=normal*/
      text-decoration: underline;
      } 
  #MenuTopWhiteRT   
    {
    position: absolute;
    top: 7px; 
    left: 10px;
    width: 230px;
    height: 39px;
    /* background-color: rgb(255,255,255,.8); */
    background-color: rgb(255,255,255,.0);
    z-index: 1000;
    }    
  .MenuTop2Text /*Map name*/
    {
    position: absolute;
    top: 43px; 
    left: 50%;
    width: 250px;
    height: 25px;
    margin-left: -125px; /*Always take 1/2 from the size of the width, they have to be negative*/
    text-align: center;			
    font-family: Times New Roman, arial, verdana, trebuchet, tahoma, century gothic, sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    color: rgb(0, 0, 0);
    z-index: 1100;
    /*border: 1px solid rgb(4, 253, 58);*/ /*Used for reference purposes only - Comment out for final use*/		
    }	
  #MenuTop2White   
    {
    position: absolute;
    top: 54px; 
    left: 50%;
    width: 248px;
    height: 24px;
    margin-left: -124px; /*Always take 1/2 from the size of the width, they have to be negative*/
    text-align: center;		
    /*background-color: rgb(255,255,255,0.8);*/
    background-color: rgb(255,255,255,0.0);
    z-index: 1000;
    /*border: 1px solid rgb(0, 0, 255);*/ /*Used for reference purposes only - Comment out for final use*/		
    } 
  .MenuTop3Text /*Map name larger (Grand Canyon)*/
    {
    position: absolute;
    top: 43px; 
    left: 50%;
    width: 350px;
    height: 25px;
    margin-left: -175px; /*Always take 1/2 from the size of the width, they have to be negative*/
    text-align: center;			
    font-family: Times New Roman, arial, verdana, trebuchet, tahoma, century gothic, sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    color: rgb(0, 0, 0);
    z-index: 1100;
    /*border: 1px solid rgb(4, 253, 58);*/ /*Used for reference purposes only - Comment out for final use*/		
    }	
  #MenuTop3White /*Map name white bckgrnd larger (Grand Canyon)*/   
    {
    position: absolute;
    top: 54px; 
    left: 50%;
    width: 348px;
    height: 24px;
    margin-left: -174px; /*Always take 1/2 from the size of the width, they have to be negative*/
    text-align: center;		
    /*background-color: rgb(255,255,255,0.8);*/
    background-color: rgb(255,255,255,0.0);
    z-index: 1000;
    /*border: 1px solid rgb(0, 0, 255);*/ /*Used for reference purposes only - Comment out for final use*/		
    } 
  .MenuTop4Text /*Map pages subtititle below map name*/
    {
    position: absolute;
    top: 73px; 
    left: 50%;
    width: 300px;
    height: 25px;
    margin-left: -150px; /*Always take 1/2 from the size of the width, they have to be negative*/
    text-align: center;			
    font-family: Times New Roman, arial, verdana, trebuchet, tahoma, century gothic, sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    color: rgb(0, 0, 0);
    z-index: 1100;
    /*border: 1px solid rgb(4, 253, 58);*/ /*Used for reference purposes only - Comment out for final use*/		
    }	

/* MENU RIGHT - LAYERS - Leaflet JS styling */
  .leaflet-popup-content-wrapper 
    {
    border-radius: 0;
    }
  .leaflet-popup-content
    {
    margin: 5px;	
    margin-top: 0px;	
    }
  #MenuRightTitle   /* Just a seperate label */ /* No JS code involved */
    {
    position: absolute;
    top: 23px;
    right: 61px;
    text-align: left;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; 
    font-weight: 400; /*100-900 400=normal*/
    font-size: 9pt;
    line-height: 1px;
    padding: 0px 6px;
    z-index: 950; /* Right menu is at z 1000 */ 
    }
  #MenuRightTitleWhite   
    {
    display: block;
    position: absolute;
    top: 26px;
    right: 62px;
    width: 58px;
    height: 17px;
    background-color: rgb(255,255,255);
    opacity: .8;
    z-index: 900;
    }
/* MENU LEFT */
  #MenuLeftTitle   /* Just a seperate label */ 
    {
    display: block;
    position: fixed;
    top: 110px;
    left: 60px;
    text-align: left;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; 
    font-weight: 400; /*100-900 400=normal*/
    font-size: 9pt;
    line-height: 1px;
    padding: 0px 6px;
    z-index: 950;
    }
  #MenuLeftTitleWhite   
    {
    display: block;
    position: fixed;
    top: 113px;
    left: 62px;
    width: 43px;
    height: 17px;
    background-color: rgb(255,255,255);
    opacity: .8;
    z-index: 900;
    }
  .overlay    /* Parent div orig used as background mask - Now minimized to 20x20px behind menu - Needed for "visibility" option "hidden" to "visible" */  
    {
    position: absolute;
    top: 0px; /* Changed from 140px 12/1/2024 86px 12/02 */ 
    left: 18px;
    width: 20px;
    height: 20px;
    background: rgba(4, 0, 245, 0.0);        
    visibility: hidden; 
    opacity: 0;
    }
    .overlay:target 
      {
      visibility: visible;
      opacity: 1;
      }
  .MenuLeftButton 
    {
    position: fixed;
    top: 100px;
    left: 13px;
    padding: 5px 7px;
    border-radius: 4px;
    background-color: rgb(255,255,255);
    border: none;
    box-shadow: 0px 0px 1px 2px rgba(0,0,0,0.3); 
    cursor: pointer;
    z-index: 900;
    }
    .MenuLeftButton:hover 
      {
      box-shadow: 0px 0px 1px 3px rgba(0,0,0,0.3); 
      }
  .MenuLeftPopup 
    {
    position: absolute;
    top: 86px; /* Changed from -55px 12/1/2024 0px 12/02 */
    left: -8px;
    width: 170px;  /* 130px for High Sierra */
    text-align: left;
    background-color: rgb(255,255,255);
    padding: 10px;
    padding-top: 3px;
    border-radius: 5px;
    box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2); 
    z-index: 1200; /* Changed from 950 12/1/2024 */
    }
  .MenuLeftPopup .Close 
    {
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 20px;
    font-weight: normal;
    text-decoration: none;
    color: rgb(100, 100, 100);
    }
  .MenuLeftPopup .Close:hover 
      {
      font-weight: bold;
      color: rgb(0, 0, 0);
      }
  .MenuLeftPopup .Content 
    {
    background-color: rgb(255,255,255);
    }
  .MenuLeftContentTitle    /* Styling for Menu Left non link heading such as "HIGH SIERRA" */ 
    {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; 
    font-weight: 700; /*100-900 400=normal*/
    font-size: 11pt;
    line-height: 1px;
    text-decoration: none;
    }
  .MenuLeftContentGray /* Styling for Menu Left options grayed out with link not available yet */ {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: 400; /*100-900 400=normal*/
    font-size: 9pt;
    line-height: 1px;
    text-decoration: none;
    color:rgb(180,180,180)
  }

/* MENU LEFT "How to use map / menus" POPUP */
  .overlayhowuse    /* Parent div orig used as background mask - Now minimized to 20x20px behind menu - Needed for "visibility" option "hidden" to "visible" */  
    {
    position: absolute;
    top: 0px; /* Changed from 140px 12/1/2024 86px 12/02 */ 
    left: 50%;
    width: 0px;
    height: 20px;
    margin-left: -10px; /*Always take 1/2 from the size of the width, they have to be negative*/
    background: rgba(4, 0, 245, 0.7);        
    visibility: hidden;  
    opacity: 0;
    }
    .overlayhowuse:target 
      {
      visibility: visible;
      opacity: 1;
      }
/* TOOLTIP STYLING - GLOBAL */
  .leaflet-tooltip
    {      
    border-radius: 0px;
    padding: 1px 2px 0px 1px;
    line-height: 14px;  
    /* pointer-events: none  !important; */ /*Not needed because the marke and tooltip are styled individually with "interactive: false" */  
    }
/* TOOLTIP - CUSTOMIZED STYLING CHANGE/ADDITION - (Standard tooltip is in the leaflet code */
  .TooltipBackgroundTransparent
    {      
    background-color: transparent !important;  /*The !important flag ensures that this style overrides any default Leaflet styles for tooltips.*/
    border: none !important; 
    box-shadow: none !important; 
    /* pointer-events: none  !important; */ /*Not needed because the marke and tooltip are styled individually with "interactive: false" */   
    }
  .leaflet-tooltip-left.TooltipBackgroundTransparent::before, /* Target the tooltip-pointer (pseudo-element) and make it transparent */
  .leaflet-tooltip-right.TooltipBackgroundTransparent::before,
  .leaflet-tooltip-top.TooltipBackgroundTransparent::before,
  .leaflet-tooltip-bottom.TooltipBackgroundTransparent::before {
    border-color: transparent !important; 
    }
/* TOOLTIP TEXT STYLING - CUSTOMIZED */
  .TooltipBold   /* Styling for photo marker popup thumbnail photos less than 301w - Width of popup frame is set inline, 200w for 200 or less, 300w for 201w or greater */ 
    {
    border: 3px solid rgb(0,0,0);
    font-weight: 700; /*100-900 400=normal*/
    }
  .TooltipLabelBoundary /* Styling for SierraMap boundary labels */
    {
    font-size: 16px;
    }
  .TooltipTextTest   /* Styling for map geographic features - Test use only - (Default is font size 12px) */ 
    {
    font-size: 10px;
    color: rgb(255, 0, 0);
    }
  .TooltipText1   /* Styling for map geographic features - Small importance - (Default is font size 12px) */ 
    {
    font-size: 10px;
    /*color: rgb(255, 0, 0);*/
    }
  .TooltipText2   /* Styling for map geographic features - Medium importance - (Default is font size 12px) */ 
    {
    font-size: 10px;    
    }
  .TooltipText3   /* Styling for map geographic features - Large importance - (Default is font size 12px) */ 
    {
    font-size: 11px; 
    line-height: 9px;   
    }
  .TooltipText4   /* Styling for map geographic features - Ex Large importance - (Default is font size 12px) */ 
    {
    font-size: 12px;    
    font-weight: bold; /*100-900 400=normal*/
    }
  .TooltipText5   /* Styling for map geographic features - EX EX Large importance - (Default is font size 12px) */ 
    {
    font-size: 16px;    
    font-weight: bold; /*100-900 400=normal*/
    }
/* POPUPS - PHOTOS */
  .PopupPhoto   /* Styling for photo marker popup thumbnail photos less than 301w - Width of popup frame is set inline, 200w for 200 or less, 300w for 201w or greater */ 
    {
    display:block;
    margin-left:auto;
    margin-right:auto;
    }
  .PopupPhotoWide    /* Styling for photo marker popup thumbnail photos 301w or greater - Resizes photo to 300w - Width of popup frame is set inline, 200w for 200 or less, 300w for 201w or greater */ 
    {
    display:block;
    margin-left:auto;
    margin-right:auto;
    width: 300px;
    }
  .PopupPhotoViewLarge    /* Styling for photo marker popup "View Large" text link to zoom photo page */ 
    {
    line-height:250%;
    }
  .PopupPhotoViewLarge2    /* Styling for photo marker popup for low info trails on main map page */ 
    {
    line-height: 100%;
    }
  .PopupHikeMovieReport    /* Styling for Hike Movies or Hike Reports marker popup - Text link to zoom photo page */ 
    {
    line-height:100%;
    text-align:center;
    }
/* Popup container box - Leaflet JS styling */
  .leaflet-container a.leaflet-popup-close-button :hover 
    {
    font-weight: bold;
    }
/* PHOTO MARKER CLUSTER - Leaflet "Marker Cluster" plugin JS styling */
  .marker-cluster-small 
    {
    background-color: rgba(253, 210, 108, 0.6);
    }
  .marker-cluster-small div 
    {
    background-color: rgba(254, 180, 1, 0.6);
    }
  .marker-cluster-medium 
    {
    background-color: rgba(253, 186, 108, 0.6);
    }
  .marker-cluster-medium div 
    {
    background-color: rgba(254, 136, 1, 0.6);
    }
  .marker-cluster-large 
    {
    background-color: rgba(255, 138, 109, 0.6);
    }
  .marker-cluster-large div 
    {
    background-color: rgba(254, 52, 1, 0.6);
    }
/* POLYLINE STYLING (TRAILS, ROUTES, BORDERS, ETC.) - Called in HikingMainMap.js */
  .Borders
    {    
    stroke: rgb(0, 0, 0);
    stroke-width: 2;  
    stroke-opacity: .5;     
    stroke-dasharray: 1;           
    }
  .Boundaries /* POLYLINE STYLING - Main map */
    {    
    stroke: rgb(255, 0, 0);
    stroke-width: 3;  
    stroke-opacity: .5;     
    stroke-dasharray: 1;           
    }
  .Boundaries2 /* POLYLINE STYLING - Glacier map */
    {    
    stroke: rgb(0, 120, 0);
    stroke-width: 8;  
    stroke-opacity: .5;     
    stroke-dasharray: 40 20 10 20;           
    }
  .TrailsInternal
    {    
    stroke: rgb(255, 0, 0);
    stroke-width: 8;  
    stroke-opacity: .5;     
    stroke-dasharray: 1;           
    }
  .TrailsInternalCC
    {    
    stroke: rgb(255, 0, 0);
    stroke-width: 8;  
    stroke-opacity: .5;     
    stroke-dasharray: 1 15;           
    }
  .TrailsExternal
    {    
    stroke: rgb(255, 80, 0);
    stroke-width: 6;  
    stroke-opacity: .5;     
    stroke-dasharray: 1;           
    }
  .TrailsExternal2
    {    
    stroke: rgb(255, 140, 0);
    stroke-width: 6;  
    stroke-opacity: .5;     
    stroke-dasharray: 1;           
    }
  .TrailsExternal3 /* Trail for that trail's page - For trails w/ no other internal data/info/photos */ 
    {
    stroke: rgb(255,0,0);
    stroke-opacity: .5;
    stroke-width: 10;
    stroke-dasharray: 1;
    }
/* POLYLINE STYLING (ROUTES, HIKES, BORDERS, ETC.) - Called in HikingHighSierraMapLines.js */
  /*HIKES*/
  .HikeOntrMainOnn  /* On trail type hike - On trail section */
    {    
    stroke: rgb(30,0,250);
    stroke-opacity: .5; 
    stroke-width: 13;  
    stroke-dasharray: 8 14;           
    }
  .HikeOntrMainOff  /* On trail type hike - Off trail section */
    {    
    stroke: rgb(30,0,250);
    stroke-opacity: .5; 
    stroke-width: 13;  
    stroke-dasharray: 1 30;           
    }
  .HikeOftrMainOnn  /* Off trail type hike - On trail section */
    {    
    stroke: rgb(150, 0, 250);           
    stroke-opacity: .5; 
    stroke-width: 13;
    stroke-dasharray: 8 14;         
    }
  .HikeOftrMainOff  /* Off trail type hike - Off trail section */
    {    
    stroke: rgb(150, 0, 250);           
    stroke-opacity: .5; 
    stroke-width: 13;
    stroke-dasharray: 1 30;         
    }
  .HikeOntrSideOnn  /* On trail type hike - On trail section - "side", "alternate", "exit/entry/access", "bad/not recommended" routes */
    {    
    stroke: rgb(30, 0, 250); 
    stroke-opacity: .5; 
    stroke-width: 7;
    stroke-dasharray: 8 14;           
    }
  .HikeOntrSideOff  /* On trail type hike - Off trail section - "side", "alternate", "exit/entry/access", "bad/not recommended" routes */
    {    
    stroke: rgb(30, 0, 250); 
    stroke-opacity: .5; 
    stroke-width: 7; 
    stroke-dasharray: 1 30;         
    }
  .HikeOftrSideOnn  /* Off trail type hike - On trail section - "side", "alternate", "exit/entry/access", "bad/not recommended" routes */
    {    
    stroke: rgb(150, 0, 250); 
    stroke-opacity: .5; 
    stroke-width: 7;
    stroke-dasharray: 8 14;           
    }
  .HikeOftrSideOff  /* Off trail type hike - Off trail section - "side", "alternate", "exit/entry/access", "bad/not recommended" routes */
    {    
    stroke: rgb(150, 0, 250); 
    stroke-opacity: .5; 
    stroke-width: 7; 
    stroke-dasharray: 1 30;         
    }
  .HikeOntrExitOnn  /* On trail type hike - On trail section - "exit/entry/access" routes */
    {    
    stroke: rgb(150, 0, 50); 
    stroke-opacity: .5; 
    stroke-width: 7;          
    stroke-dasharray: 8 14;           
    }
  .HikeOntrExitOff /* On trail type hike - Off trail section - "exit/entry/access" routes */ {
    stroke: rgb(150, 0, 100);
    stroke-opacity: .5;
    stroke-width: 7;
    stroke-dasharray: 1 30;           
    }
  .HikeOntrOthrVeh/* Bus or train */ {
    stroke: rgb(10, 10, 10);
    stroke-opacity: .5;
    stroke-width: 10;
    stroke-dasharray: 10 30;
    }
  /*HIKES ALL - SIMPLIFIED*/
  .HikeOntrMainOnnAllSimp  /* On trail type hike - On trail section */
    {    
    stroke: rgb(30,0,250);
    stroke-opacity: .5; 
    stroke-width: 7;  
    stroke-dasharray: 8 14;           
    }
  .HikeOntrMainOffAllSimp  /* On trail type hike - Off trail section */
    {    
    stroke: rgb(30,0,250);
    stroke-opacity: .5; 
    stroke-width: 7;  
    stroke-dasharray: 1 30;           
    }
  .HikeOftrMainOnnAllSimp  /* Off trail type hike - On trail section */
    {    
    stroke: rgb(150, 0, 250);           
    stroke-opacity: .5; 
    stroke-width: 7;
    stroke-dasharray: 8 14;         
    }
  .HikeOftrMainOffAllSimp  /* Off trail type hike - Off trail section */
    {    
    stroke: rgb(150, 0, 250);           
    stroke-opacity: .5; 
    stroke-width: 7;
    stroke-dasharray: 1 30;         
    }
  .HikeOntrSideOnnAllSimp  /* On trail type hike - On trail section - "side", "alternate", "exit/entry/access", "bad/not recommended" routes */
    {    
    stroke: rgb(30, 0, 250); 
    stroke-opacity: .5; 
    stroke-width: 7;
    stroke-dasharray: 8 14;           
    }
  .HikeOntrSideOffAllSimp  /* On trail type hike - Off trail section - "side", "alternate", "exit/entry/access", "bad/not recommended" routes */
    {    
    stroke: rgb(30, 0, 250); 
    stroke-opacity: .5; 
    stroke-width: 7; 
    stroke-dasharray: 1 30;         
    }
  .HikeOftrSideOnnAllSimp  /* Off trail type hike - On trail section - "side", "alternate", "exit/entry/access", "bad/not recommended" routes */
    {    
    stroke: rgb(150, 0, 250); 
    stroke-opacity: .5; 
    stroke-width: 7;
    stroke-dasharray: 8 14;           
    }
  .HikeOftrSideOffAllSimp  /* Off trail type hike - Off trail section - "side", "alternate", "exit/entry/access", "bad/not recommended" routes */
    {    
    stroke: rgb(150, 0, 250); 
    stroke-opacity: .5; 
    stroke-width: 7; 
    stroke-dasharray: 1 30;         
    }
  .HikeOntrExitOnnAllSimp  /* On trail type hike - On trail section - "exit/entry/access" routes */
    {    
    stroke: rgb(150, 0, 50); 
    stroke-opacity: .5; 
    stroke-width: 7;          
    stroke-dasharray: 8 14;           
    }
  .HikeOntrExitOffAllSimp /* On trail type hike - Off trail section - "exit/entry/access" routes */ {
    stroke: rgb(150, 0, 100);
    stroke-opacity: .5;
    stroke-width: 7;
    stroke-dasharray: 1 30;           
    }
  .HikeOntrOthrVehAllSimp/* Bus or train */ {
    stroke: rgb(10, 10, 10);
    stroke-opacity: .5;
    stroke-width: 7;
    stroke-dasharray: 10 30;
    }
/* UNDER CONSTRUCTION - IN PROGREE WARNING POPUP - Map pages */
  .InProgress /*  */ 
    {
    opacity: .9;
    background-color: rgb(255, 255, 255);
    border:solid 3px rgb(255, 0, 0);
    position: fixed;
    top: 200px;
    left: 50%;
    width: 210px;
    height: 115px;
    margin-left: -105px; /*Half of width*/
    z-index: 1300;
    text-align: center;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: 700; /*100-900 400=normal*/
    font-size: 12px;
    line-height: 12px;
    text-decoration: none;
    /*border: 1px solid rgb(0,255,0);*/ /*Used for reference purposes only - Comment out for final use*/
    }
  .InProgressAdjust /*  */ 
    {  
    }	
  .InProgress2 /*  */ 
    {
    position: fixed;
    top: 720px; /*Was 90px*/
    left: 50%;
    width: 400px;
    height: 40px;
    margin-left: -200px; /*Half of width*/
    z-index: 1300;
    text-align: center;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: rgb(255, 255, 255);    
    text-decoration: none;
    /*border: 1px solid rgb(0,255,0);*/ /*Used for reference purposes only - Comment out for final use*/
    }
  .Disclaimer /*  */ 
    {
    position: fixed;
    top: 760px; /*Was 90px*/
    left: 50%;
    width: 1100px;
    height: 40px;
    margin-left: -550px; /*Half of width*/
    z-index: 1300;
    text-align: center;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: rgb(255, 255, 255);    
    text-decoration: none;    
    /*border: 1px solid rgb(0,255,0);*/ /*Used for reference purposes only - Comment out for final use*/
    }
  .LegendMapMain /*  */ 
    {
    position: fixed;
    bottom: 20px;
    left: 50%;
    width: 660px;
    height: 60px;
    margin-left: -330px; /*Half of width*/
    z-index: 1300;
    text-align: left;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: rgb(255, 255, 255);    
    text-decoration: none;    
    /*border: 1px solid rgb(0,255,0);*/ /*Used for reference purposes only - Comment out for final use*/
    }
  .LegendMapMainText /*  */ 
    {
    position: relative;
    top: -76px;
    left: 162px;
    width: 500px;
    height: 80px;
    z-index: 1300;
    text-align: left;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: rgb(255, 255, 255);    
    text-decoration: none;    
    /*border: 1px solid rgb(0,255,0);*/ /*Used for reference purposes only - Comment out for final use*/
    }