/* CSS Document */

.park_title { font-weight: bold; font-size: 1.1em; }
.park_address { margin-left: 1em; font-size: .9em; color: #999; }
.park_address a { color: #999; }

.park, .park-neighborhood, .park-ramp { width: 578px;  margin: 0 auto 1em auto; }
.park-neighborhood { border-bottom: 3px dashed #d3e7c4; }
.park-ramp { border-bottom: 3px dashed #c4d5e7; padding-bottom: 5px; }
.park table, .park td, .park-neighborhood table, .park-neighborhood td, .park-ramp td, .park-ramp table { font-size: 1em; }
.park-head { padding: 0px; background: #d3e7c4 url(../images/parks/listing-head.png) top left no-repeat; }
.park-neighborhood .park-head { padding: 0px; background: #e7e2c4 url(../images/parks/listing-head-2.png) top left no-repeat; }
.park-foot { font-size: 3px; height: 3px; background: #fff url(../images/parks/listing-foot.png) top left no-repeat; }
.park-neighborhood .park-foot { font-size: 3px; height: 3px; background: #fff url(../images/parks/listing-foot-2.png) top left no-repeat; }
.park-head a { font-size: 1em; font-weight: bold; }
.park-head table { height: 29px; width: 100%; }
.park-head td { padding: 5px;  }
.park-address { color: #666; text-align: right; white-space: nowrap; }
.park-body { padding: 5px 10px 0 10px; background: url(../images/parks/listing-body.png) top center repeat-y; }
.park-neighborhood .park-body, .park-ramp .park-body { padding: 5px 10px 0 10px; background: url(../images/parks/listing-body-2.png) top center repeat-y; }
.park-image { width: 155px; float: left; text-align: center; margin-bottom: 10px; }
.park-image a { font-weight: normal; }
.park-image img { border: 1px solid #ccc; }
.park div.amenities, .park-neighborhood div.amenities, .park-ramp div.amenities { margin-bottom: 3px; }
.park-body ul.amenities { width: 25%; float: left; font-size: .90em; margin-left: 0em; padding-left: 1.5em; margin-top: .25em; }
.park-body p.amenities { width: 15%; float: left; font-weight: bold; }
.park div.amenity, .park-neighborhood div.amenity, .park-ramp div.amenity { width: 37px; height: 38px; float: left; margin-right: 3px; margin-top: 3px; }
.park-body p { margin: .25em auto .25em auto; }
.park-image { color: #999; }
.park-image .and { font-size: .8em; }

.park-name { font-weight: bold; color: #666; font-size: 1.1em; }
.park-info { color: #666; }

.park-details h3 { border-bottom: 3px solid #d3e7c4; }
.park-details div.amenities_icons { text-align: center; margin-bottom: .5em; }
.park-details div.amenities_icons div { width: 37px; height: 38px; float: left; }
.park-details div.amenities { margin-left: .95em; }
.park-details p.none { font-style: italic; margin-bottom: 1em; }
.park-details ul.amenities { width: 24%; float: left; list-style-type: none; margin: 0; padding: 0; margin-right: 5px; }
.park-details ul.amenities li.checked { color: #000; padding-left: 17px; background: url(../images/parks/checked.png) bottom left no-repeat; }
.park-details ul.amenities li.unchecked { color: #999; padding-left: 17px; background: url(../images/parks/unchecked.png) bottom left no-repeat; }
.park-details table, td { font-size: 1em; }
.park-details .misc span { width: 5em; text-align: right; float: left; color: #666; font-weight: bold; }
.park-details span.all { font-size: .75em; font-weight: normal; width: 15em; float: right; text-align: right; }
.park-details .photo { width: 130px; float: left; text-align: center; margin: 3px 0 2px 0;}
.park-details .photo img { border: 1px solid #ccc; }
.park-details .photos { margin-left: 1em; }
.park-details ul.directions { list-style-type: none; }
.park-details ul.directions li { width: 8em; float: left; }
.park-details .totop { text-align: right; clear: both; margin-top: .5em; }
.park-details .totop a { color: #5e965e; }

.park-image div.picture-links { text-align: left; margin-left: 15px; }
div.park-picture { width: 22px; height: 22px; color: #666; background: url(../images/slideshow/interface/sshow-button-unsel.png) center center no-repeat; font-weight: bold; font-size: .85em; text-align: center; vertical-align: middle; float: left; }
div.park-picture-hover { width: 22px; height: 22px; color: #666; background: url(../images/slideshow/interface/sshow-button-sel.png) center center no-repeat; font-weight: bold; font-size: .85em; text-align: center; vertical-align: middle; float: left; }
div.park-picture a, div.park-picture-hover a { display: block; width: 22px; height: 22px; line-height: 22px; text-decoration: none; float: left; color: #666; }
div.park-picture-hover a { color: #ff5400; }


/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .parks-tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .parks-tabs-nav {
        display: none;
    }
}

/* Skin */
.parks-tabs-nav, .parks-tabs-panel {
    /*font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;*/
    /*font-size: 12px;*/
}
.parks-tabs-nav { font-size: .85em; }
.parks-tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 3px;
}
.parks-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.parks-tabs-nav li {
    float: left;
    margin: 0 0 0 2px;
    font-weight: bold;
}
.parks-tabs-nav a, .parks-tabs-nav a span {
    float: left; /* fixes dir=ltr problem and other quirks IE */
    padding: 0 12px;
    background: url(../images/parks/park-tabs.png) no-repeat;
}
.parks-tabs-nav a.ramps-tab, .parks-tabs-nav a.ramps-tab span { 
    background: url(../images/parks/ramp-tabs.png) no-repeat;
}

.parks-tabs-nav a.trails-tab, .parks-tabs-nav a.trails-tab span { 
    background: url(../images/parks/trails-tabs.png) no-repeat;
}
.parks-tabs-nav a {
    margin: 5px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
    padding-left: 0;
    background-position: 100% 0;
    text-decoration: none;
    white-space: nowrap; /* @ IE 6 */
    outline: 0; /* @ Firefox, prevent dotted border after click */    
}
.parks-tabs-nav a:link, .parks-tabs-nav a:visited {
    color: #666;
	text-decoration: none;
}
.parks-tabs-nav .parks-tabs-selected a:link, .parks-tabs-nav .parks-tabs-selected a:visited {
	color: #fff;
} 
.parks-tabs-nav .parks-tabs-selected a {
    position: relative;
    top: 1px;
    z-index: 2;
    margin-top: 0;
	color: #fff;
    background-position: 100% -23px;
}
.parks-tabs-nav a span {
    padding-top: 1px;
    padding-right: 0;
    height: 20px;
    background-position: 0 0;
    line-height: 20px;
}
.parks-tabs-nav .parks-tabs-selected a span {
    padding-top: 0;
    height: 27px;
    background-position: 0 -23px;
    line-height: 27px;
}
.parks-tabs-nav .parks-tabs-selected a:link, .parks-tabs-nav .parks-tabs-selected a:visited,
.parks-tabs-nav .parks-tabs-disabled a:link, .parks-tabs-nav .parks-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.parks-tabs-nav a:hover, .parks-tabs-nav a:focus, .parks-tabs-nav a:active,
.parks-tabs-nav .parks-tabs-unselect a:hover, .parks-tabs-nav .parks-tabs-unselect a:focus, .parks-tabs-nav .parks-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.parks-tabs-disabled {
    opacity: .4;
    filter: alpha(opacity=40);
}
.parks-tabs-nav .parks-tabs-disabled a:link, .parks-tabs-nav .parks-tabs-disabled a:visited {
    color: #000;
}
.parks-tabs-panel {
    border-top: 1px solid #339933;
    padding: 10px 0 0 0;
    background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
.parks-tabs-panel.ramps {
    border-top: 1px solid #336899;
}

.parks-tabs-panel.trails {
    border-top: 1px solid #b31100;
}
/*.parks-tabs-loading em {
    padding: 0 0 0 20px;
    background: url(loading.gif) no-repeat 0 50%;
}*/

/* Additional IE specific bug fixes... */
* html .parks-tabs-nav { /* auto clear @ IE 6 & IE 7 Quirks Mode */
    display: inline-block;
}
*:first-child+html .parks-tabs-nav  { /* auto clear @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
    display: inline-block;
}