@-ms-viewport {
  width: device-width;
}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}
@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
  table.visible-xs {
    display: table;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
  table.visible-sm {
    display: table;
  }
  tr.visible-sm {
    display: table-row !important;
  }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
  table.visible-md {
    display: table;
  }
  tr.visible-md {
    display: table-row !important;
  }
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
  table.visible-lg {
    display: table;
  }
  tr.visible-lg {
    display: table-row !important;
  }
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}
.visible-print {
  display: none !important;
}
@media print {
  .visible-print {
    display: block !important;
  }
  table.visible-print {
    display: table;
  }
  tr.visible-print {
    display: table-row !important;
  }
  th.visible-print,
  td.visible-print {
    display: table-cell !important;
  }
}
@media print {
  .hidden-print {
    display: none !important;
  }
}

.center { margin: 0px auto; }

.mobileHeader { background:#2F2F2F; height:40px; width:100%; background-size: contain; min-width:320px; }	        
.mobileHeader .options { cursor: pointer; margin:6px 0px 0px 0px; padding: 0px; width:39px; height:28px; background: #2F2F2F url(/ui/images/mobile/header-options-black.png) no-repeat left top / 100% 100%; }
.mp-menu a { color: #fff; font-size:bold; font-family:arial,helvetica,sans-serif; font-size:18px; text-decoration: none; }

/* 265a07 50bc0f 46a20e 37810A */
	.mobileHeader .mainNav { float:right; margin:0px 4px; width:39px; height:28px; }
		.mobileHeader .mainNav ul { }
		.mobileHeader .mainNav li { height:40px; margin-right:5px; float:left; border:0px solid #37810A; color:#fff; font-size:14px; font-weight:bold;  }
		.mobileHeader .mainNav li a { text-decoration:none; display:block; margin-bottom:5px; color:#fff; font-size:14px; font-weight:bold;  }
		.mobileHeader .mainNav li a:hover { text-decoration:underline; }
		.mobileHeader .mainNav li:hover ul, .mobileHeader .mainNav li.sfhover ul { display:block; }
		.mobileHeader .mainNav li span { display:block; margin-left:30px; }
		.mobileHeader .mainNav li a:hover span { cursor:pointer; }
		.mobileHeader .mainNav li a:hover span.title { color:#000; }
		.mobileHeader .mainNav li.selected { background:#fff; }
		.mobileHeader .mainNav li.selected a:hover { text-decoration:none; }
		.mobileHeader .mainNav li.selected a span { color:#37810A; font-weight:bold; }
		.mobileHeader .mainNav li ul { position:absolute; display:none; background:#37810A none; border:0px; z-index:99; width:300px; height:auto; overflow:hidden; padding:0; margin-left:-1px; }
		.mobileHeader .mainNav li ul li { background:transparent none; border-top:1px solid #46a20e; border-bottom:1px solid #265a07; width:300px; float:left; }
		.mobileHeader .mainNav li ul li a { float:left; width:300px; }
		.mobileHeader .mainNav li ul li a span { background:none; float:left; width:300px; padding:0px; line-height:40px; }
		.mobileHeader .mainNav li ul li a:hover { text-decoration:underline; }
		.mobileHeader .mainNav li ul li a:hover span { cursor:pointer; text-decoration:underline; }
		.mobileHeader .mainNav li.selected ul {  }
		.mobileHeader .mainNav li.selected ul li {  }
		.mobileHeader .mainNav li.selected ul li a span { color:#6d5b4c; font-weight:normal; }
		.mobileHeader .mainNav li.selected ul li a:hover span { color:#ea5623; cursor:pointer; text-decoration:underline; }

.mobileHeader .logo { width:auto; height:40px; margin:0px 0px 0px 10px; display:inline; }
.mobileHeader .logoWrapper { padding:0px 0px 0px 0px; display:inline; }

.mobileHeader .globalSearchContainer { background:#37810A  url('/ui/images/mobile/header.png') repeat-x top left / 100% 100%; height:40px; width:100%; min-width:320px; top:0px; right:0px; position:fixed; z-index:1000; background-color:#37810A; }
.mobileHeader .globalSearchStart {
    float:right; margin: 6px 10px; width:39px; height:28px; background:#37810A url("/ui/images/mobile/header-search.png") no-repeat left top / 100% 100%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor:pointer;
}
.mobileHeader .globalSearch { display:block; float:right; min-width:320px; }
.mobileHeader .globalSearch .textbox {
    float:right; margin: 6px 0px 0px 0px; padding: 0px 0px 0px 5px; width: 250px; height: 28px;
    border: 0px solid #37810A;
    color: #d3d3d3;
    font-style:italic;
    font-size: 18px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.mobileHeader .globalSearch .textbox.placeholder { color: #d3d3d3; font-size: 16px; font-style: oblique; }
.mobileHeader .globalSearch .submit {
    float:right; margin: 6px 10px; padding: 0; width:39px; height:28px; background:#37810A url("/ui/images/mobile/header-search.png") no-repeat left top / 100% 100%;
    cursor: pointer; 
    border: 0px solid #37810A;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow:    inset 0px 0px 3px 0px #000000;
    -webkit-box-shadow: inset 0px 0px 3px 0px #000000;
    box-shadow:         inset 0px 0px 3px 0px #000000; }

#MobileSiteFooterWrapper { text-align: center; margin: 0; min-width: 320px; background-color: #37810A;}	
    #MobileSiteFooter { font-size: 12px; color: #fff; width: 100%; padding:20px 0px; }
		#MobileSiteFooter a { text-decoration: none; color: #fff; }
		#MobileSiteFooter a:hover { text-decoration: underline; }
		#MobileSiteFooter ul { list-style: none; margin-bottom: 4px; }
	        #MobileSiteFooter ul li { display: inline; padding:0px 10px 0px 15px; }
			#MobileSiteFooter ul li:first-child { background: none; }


#widthIndicator { width:768px; }

@media (max-width: 767px) 
{
    #widthIndicator { width:320px; }
    
    .Wrapper { width:100%; margin:0px; padding:0px; }
    .FullPage {
        margin: 0px;
        padding: 10px;
        width: calc(100% - 20px);
    }
    

#Homepage #MobileSiteFeatures { width:100%; margin:10px auto 0px; border-bottom:none; padding:0px 10px; background: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
    #Homepage #SampleGuides { background:#f0f0f0; margin:0px; }
    #Homepage #SiteFeatures_maps { background:#f0f0f0; margin:10px auto 0px; padding: 0px; border-left:none; border-right:none; }
        #Homepage .MobileSiteFeature { width:100%; float:left;  }
        #Homepage .MobileSiteFeature > div { float:none; position:relative; width:100%; height:138px; padding:10px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
	    #Homepage .MobileSiteFeatureImage { width:125px; height:138px; margin-right:10px; }
	    #Homepage .MobileSiteFeatureLink { display:block; margin-top:5px; text-align:left; text-decoration:none; }
	    #Homepage .MobileSiteFeatureLink:hover { text-decoration:underline; }
        #Homepage .MobileSiteFeatureTitle { text-align:left; font-size:18px; font-weight:normal; color:#000; }
        #Homepage .MobileSiteFeatureDescription { text-align:left; font-size:12px; font-weight:normal; }
        #Homepage .MobileSiteFeatureButton { bottom: 0px; padding: 0px 20px 10px 125px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; position: absolute; margin-bottom: 0px;}

#Homepage .MobileSiteFeatureButton .ButtonBlue { height: 37px;  }
#Homepage .MobileSiteFeatureButton .ButtonBlue div { height: 37px; line-height: 37px; }


	#Homepage #TrailFinderSearchBoxWrapper { width: 300px; height: auto; margin: 200px auto 0px; background:transparent; position: static; bottom: auto; left: auto; }
	    #Homepage #TrailFinderSearchBox { padding: 0px; }
	    #Homepage #TrailFinderSearchBox.Geo { padding: 0px; }
		#Homepage .TrailFinderSearchBoxLabel { display: block; color: #fff; font-size: 22px; line-height:22px; font-weight:bold; letter-spacing: 1px; text-transform:uppercase; text-align:center; }
        #Homepage .TrailFinderSearchBoxLabel span { font-size: 50px; line-height:50px; margin:0px 0px 10px; display:block; }
		#Homepage #TrailFinderSearchBoxInput { float:left; margin:0px; padding: 2px 10px; width: 268px; height: 32px; border: 0; font-size: 14px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border-top-left-radius:5px; border-bottom-left-radius:5px; }
		#Homepage .TrailFinderSearchBoxButton { float:left; margin:0px; border: 0; height: 32px; line-height: 32px; width: 32px; font-size: 16px; color: #fff; font-weight:bold; cursor: pointer; background: url('/ui/images/trail-finder-search.png') no-repeat; _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/ui/images/trail-finder-search.png',sizingMethod='scale'); border-top-right-radius:5px; border-bottom-right-radius:5px; border-top-left-radius:0px; border-bottom-left-radius:0px; }
		#Homepage #TrailFinderSearchBoxGeoSearchMessage { clear:both; color:#fff; font-weight:bold; text-align:center; }
		#Homepage #TrailFinderSearchBoxGeoButton { display:none; float: left; margin: 13px 0 0 12px; *margin-left: 9px; border: 0; height: 27px; line-height: 27px; width: 90px; font-size: 16px; color: #fff; font-weight:bold; cursor: pointer; background: url("/ui/images/button-1r.png") no-repeat; _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/ui/images/button-1.png',sizingMethod='scale'); }
#Homepage #TrailFinderSearch .show { display:inline; }

#Homepage #TrailFinderSearch { min-width:320px; width:100%; height: 250px; margin: 0px auto; background-position:center top; background-repeat: no-repeat; overflow:auto; background-size:auto auto; }
#Homepage #TrailFinderSearch.shadow { -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; }
    

    /* BEGIN: MAP-LIST */
    #trailList { float:none; position:relative; height: 100%; overflow: auto; }
    #trailBox #ZoomAlert { left:0px; padding: 5px 10px; margin:0px auto; position: relative; width: 228px; }

    #trailBox .Box .cnt4 { padding: 0px; }
    .bbmMapSml { min-width:320px; width: 100%; height: 340px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
    .bbmMapLrg { min-width:320px; width: 100%; height: 340px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
    
    #infoMobile.browseList { margin:0px; padding:0px; min-width:300px; width:100%; height:100%; overflow: hidden; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
    #infoMobile li { cursor: pointer; height:66px; margin:0px; padding:10px 0px 10px 0px; width:100%; border-bottom:1px solid #e0e0e0; background-image:none; color:#000; overflow:hidden; }
    #infoMobile li:hover { background-color:#e8e8e8; }
    #infoMobile li .column1 { float:left; width:66px; height:66px;overflow:hidden; margin:0px 10px 0px 10px; }
    #infoMobile li .column1 img { height:66px; }
    #infoMobile li .column3 { float:right; margin:0px 10px 0px 10px; width:60px; height:30px; background-color:#37810A; color:#fff; font-size:14px; font-weight:bold; text-align:center; line-height:30px; overflow:hidden; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
    #infoMobile li .column2 { width:100%; color: #8e8e8e; font-size:14px; font-weight:bold; }
    /*
    #infoMobile li:hover .column2 .title { font-size:16px; font-weight:bold; color:#000; overflow: visible;  white-space: normal; }
    #infoMobile li .column2 .title { font-size:16px; font-weight:bold; color:#000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    */
    #infoMobile li .column2 .title { font-size:16px; font-weight:bold; color:#000; overflow: hidden; line-height:18px; }
    #infoMobile li .inline { display:inline; }
    /* END: MAP-LIST */
    
    .finderNavWrap { overflow:hidden; background-color:#37810A; height:50px; -moz-box-shadow: 0 3px 6px -3px #000000 inset; -webkit-box-shadow: 0 3px 6px -3px #000000 inset; box-shadow: 0 3px 6px -3px #000000 inset; }
    .finderNavWrap .finderNav { height:40px; width:200px; margin:5px auto; }
    .finderNavWrap .finderNav .listBtn { cursor:pointer; float:left; height:40px; width:100px; background:#37810A  url('/ui/images/mobile/header.png') repeat-x top left / 100% 100%; text-align:center; color:#fff; font-size:14px; font-weight:bold; line-height:40px; border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; }
    .finderNavWrap .finderNav .mapBtn { cursor:pointer; float:left; height:40px; width:100px; background:#37810A  url('/ui/images/mobile/header.png') repeat-x top left / 100% 100%; text-align:center; color:#fff; font-size:14px; font-weight:bold; line-height:40px; border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; }
    .finderNavWrap .finderNav .shadowUp { -moz-box-shadow:inset 0 0 1px #000000; -webkit-box-shadow:inset 0 0 1px #000000; box-shadow:inset 0 0 1px #000000; }
    .finderNavWrap .finderNav .shadowUp:hover { -moz-box-shadow:0 0 3px 0px #000000 inset;-webkit-box-shadow:0 0 3px 0px #000000 inset; box-shadow:0 0 3px 0px #000000 inset; }
    .finderNavWrap .finderNav .shadowDown { -moz-box-shadow:0 0 4px 0px #000000 inset; -webkit-box-shadow:0 0 4px 0px #000000 inset; box-shadow:0 0 4px 0px #000000 inset; }
    


    #SiteFooterWrapper { text-align: left; margin: 25px auto 0; min-width: 320px; background: #2f2f2f; width:100%; }	
    #SiteFooterWrapper .SiteFooterCopyright { background: #000; font-size: 12px; color: #7d7d7d; height: 50px; line-height: 50px; text-align: left; padding:0px 10px; }
        #SiteFooterWrapper .SiteFooterCopyright .social-buttons a { display: none; }

    #SiteFooter > .Column1 { width: 100%; float:left; margin:20px 0px; padding:0px; }
    #SiteFooter > .Column2 { width: 150px; float:left; margin:0px 0px 20px; padding:0px; }
    #SiteFooter > .Column2 ul li { display: block; background: none; padding:0px; }
    #SiteFooter ol.BestTrails {}   
    #SiteFooter ol.BestTrails .Column1 { width: 100%; padding:0px; margin: 0px; overflow: hidden; white-space: nowrap; } 
    #SiteFooter ol.BestTrails .Column2 { width: 100%; padding:0px; margin: 0px; white-space: nowrap; overflow: hidden; } 
    #SiteFooter ol.BestTrails li { display: list-item; padding: 0px; background: none; list-style: inside none decimal; text-overflow: ellipsis; overflow: hidden; }
    #SiteFooter ol.BestTrails li a { font-size:14px; text-overflow: ellipsis; }

    #SiteFooter { font-size: 14px; color: #7d7d7d; width: 100%; margin:0px; padding:0px 10px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }

}
@media (min-width: 768px) 
{
    #widthIndicator { width:768px; }
    
    #trailList { float:right; position:relative; height: 466px; overflow: auto; }
    #trailBox #ZoomAlert { left: 0px; padding: 5px 10px; margin:0px auto; position: relative; width: 228px; }
    
    .browseList {padding: 5px 7px 20px 0px; width:247px; height: auto; overflow:auto; }
    #trailBox .Box .cnt4 { padding: 0px; }
}

.AppMessage
{
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    background-size: 40px 40px;
    background-image: -webkit-gradient(linear, left top, right bottom,
    color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
    color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
    color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
    to(transparent));
    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
    transparent 75%, transparent);
    background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
    transparent 75%, transparent);
    background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
    transparent 75%, transparent);
    background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
    transparent 75%, transparent);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
    transparent 75%, transparent);

    -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
    -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
    width: 100%;
    border: 1px solid;
    color: #fff;
    padding: 15px;
    position: fixed;
    _position: absolute;
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    -webkit-animation: animate-bg 5s linear infinite;
    -moz-animation: animate-bg 5s linear infinite;
    z-index: 1000;
    text-align: center;
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
}

.AppMessage .notice { margin: 5px 0px 5px 0px; padding: 10px 5px 5px 5px; background: #FFDFDF; border: 1px solid #FF0000; }
.AppMessage .notice li { margin: 0px 0px 5px 0px; background: url('http://cdn-www.dailypuppy.com/images/bullet_red.gif') no-repeat 6px 6px; padding: 0px 0px 0px 20px; font-size: 120%; font-weight: bold; font-family: Arial; }

.AppMessageInfo { background-color: #4ea5cd; border-color: #3b8eb5; }
.AppMessageError { background-color: #de4343; border-color: #c43d3d; }
.AppMessageWarning { background-color: #eaaf51; border-color: #d99a36; }
.AppMessageSuccess { background-color: #61b832; border-color: #55a12c; }
/* .AppMessageSuccess { background-color: #3D70A5; border-color: #FFF; } */

.AppMessage span { font-weight: normal; font-family: Helvetica,Arial,sans-serif; font-size:24px; color:#fff; }

@-webkit-keyframes animate-bg { from { background-position: 0 0; } to { background-position: -80px 0; } }
@-moz-keyframes animate-bg { from { background-position: 0 0; } to { background-position: -80px 0; } }