﻿@-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:#37810A  url('/ui/images/mobile/header.png') repeat-x top left / 100% 100%; height:40px; width:100%; background-size: contain; min-width:320px; -webkit-box-shadow: 0 3px 6px -3px #000000; -moz-box-shadow: 0 3px 6px -3px #000000; box-shadow: 0 3px 6px -3px #000000; }	        
.mobileHeader .options { cursor: pointer; margin: 0px; padding: 0px; width:39px; height:28px; background: #37810A url(/ui/images/mobile/header-options.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:left; margin: 6px 10px; 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:100px; height:31px; margin:0px auto; display:block; }
.mobileHeader .logoWrapper { padding:6px 0px 0px 0px; }

.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; }


#Homepage .MobileSiteFeature { width:300px; float:left;  }
	#Homepage .MobileSiteFeatureImage { width:150px; }
	#Homepage .MobileSiteFeatureLink { display:block; margin-top:5px; text-align:left; text-decoration:none; }
	#Homepage .MobileSiteFeatureLink:hover { text-decoration:underline; }
	
#widthIndicator { width:768px; }

@media (max-width: 767px) 
{
    #widthIndicator { width:320px; }
    
    .Wrapper { width:100%; margin:0px; padding:0px; }
    .FullPage { width:100%; margin:0px; padding:0px; }
    #Homepage #MobileSiteFeatures { width:300px; margin: 0px auto; padding:0px; background-image:none; }
    #Homepage #SampleGuides { margin:10px 0px;  }
    #Homepage #SiteFeatures_maps { margin:10px 0px; padding: 10px 0px; border-top:1px solid #e0e0e0; border-left:0px; border-right:0px; }
    #Homepage #SiteFeatures_content { margin:10px 0px 10px 18px; display:none; }
    #Homepage #SiteFeatures_maps .MobileSiteFeatureTitle { text-align:right; font-size:18px; font-weight:bold; }
    #Homepage .MobileSiteFeatureTitle { text-align:left; font-size:18px; font-weight:bold; }
    #Homepage .MobileSiteFeatureDescription { width:150px; float:left; }
    #Homepage #SiteFeatures_maps .MobileSiteFeatureDescription { width:150px; float:right; }
    
    
	#Homepage #TrailFinderSearchBoxWrapper { width: 300px; height: 196px; margin: 25px auto; background: url('/ui/images/background-4tall.png') no-repeat top left / 100% 100%; }
	    #Homepage #TrailFinderSearchBox { padding: 60px 25px 0px; width: 250px; }
	    #Homepage #TrailFinderSearchBox.Geo { padding: 35px 25px 0px; }
		#Homepage .TrailFinderSearchBoxLabel { display: block; color: #fff; font-size: 14px; letter-spacing: 1px; text-align:center; }
		#Homepage #TrailFinderSearchBoxInput { float: left; margin: 12px 5px 0px 0px; padding: 2px 10px; width: 185px; height: 23px; border: 0; font-size: 20px;}
		#Homepage .TrailFinderSearchBoxButton { display:block; float: left; margin: 12px 0px 0px 0px; *margin-left: 0px; border: 0px; height: 27px; line-height: 27px; width: 40px; font-size: 16px; color: #fff; font-weight:bold; cursor: pointer; background: url('/ui/images/button-1.png') no-repeat -10px center; _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/ui/images/button-1.png',sizingMethod='scale'); }
		#Homepage #TrailFinderSearchBoxGeoSearchMessage { clear:both; color:#fff; font-weight:bold; text-align:center; }
		#Homepage #TrailFinderSearchBoxGeoButton { display:none; float:none; margin: 13px auto 0px auto; *margin-left: auto; 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:block; }

        #Homepage #TrailFinderSearch.shadow { -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; }


    /* 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; }
    

}
@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; }
    .bbmMapSml { min-width:696px; width: 696px; height: 466px; }
    .bbmMapLrg { min-width:967px; width: 967px; height: 466px; }
}

.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; } }

