/* ** Order of params. to "padding" is: padding: Top Right Bottom Left; */ /* **----------------------------------------------- ** Common Styles **----------------------------------------------- */ /* ** Normally, things marked "Debug" are hidden. To see them, ** rename the file "Styles-Debug-off.css" to "Styles-Debug-on.css". */ .Debug { display: none; } body { color: rgb(83, 105, 93); /* foreground. */ background-color: rgb(169, 182, 169); /* background. */ font-family: verdana, helvetica, arial, sans-serif; font-size: 78%; /* Enables font size scaling in MSIE */ margin: 0; padding: 0; } p { margin: 1.5ex 0; padding: 0; } dl { margin: 0; padding: 0; } dt { font-weight: bold; margin: 0; padding: 0; } dd { margin: 0; padding: 0 0 0.5em 2em; } acronym, .titleTip { border-bottom: 1px dotted rgb(83, 105, 93); /* foreground. */ cursor: help; } /* ** While hovering, invert foreground and background colors, and ** remove underline. */ acronym:hover, .titleTip:hover { color: #FFFFF2; /* background. */ background-color: rgb(83, 105, 93); /* foreground. */ border-bottom: none } .DoNotDisplay { display: none !important; } .SmallCaps { font-size: 110%; font-variant: small-caps; } /* No borders around pictures. */ img { border-style: none; } /* **----------------------------------------------- ** Page Header Styles **----------------------------------------------- */ #Header { color: rgb(250, 247, 225); /* Page header foreground. */ background-color: rgb(103, 125, 113); /* Page header background. */ margin: 0 0 0.75em 0; padding: 2px 2px 4px 2px } .HeaderTitle { color: rgb(245, 225, 175); /* Header title foreground. */ } .HeaderTitle #Title { margin: 0; padding: 0; font-size: 240%; font-weight: bold; line-height: 1.8ex; } .HeaderTitle #Subtitle { margin: 0; padding: 0; font-size: 150%; } .HeaderTitle #ByLine { font-size: 80%; margin: 0; padding: 0; padding-top: 2ex; } .HeaderTitle #ByLine a { color: rgb(245, 225, 175); /* Header title foreground. */ } /* Invert colors. */ .HeaderTitle #ByLine a:hover { color: rgb(103, 125, 113); /* Page header background. */ background-color: rgb(245, 225, 175); /* Header title foreground. */ text-decoration: none; } .HeaderLinks a { padding: 0 2px 1px 2px; /* Padding helps with highlighting while */ /* hovering. See "a:hover" below. */ color: rgb(250, 247, 225); /* Page header foreground. */ text-decoration: none; } .HeaderLinks .LinkToCurrentPage { font-size: 115%; color: rgb(245, 225, 175); /* Header title foreground. */ /* Disable leading or the line of links jumps up when this */ /* style is applied (because of the larger font size). */ line-height: 0; } /* ** While hovering, invert foreground and background colors, with foreground ** color darkened slightly. */ .HeaderLinks a:hover { background-color: rgb(250, 247, 225); /* Page header foreground. */ color: rgb(83, 105, 93); /* foreground. */ text-decoration: none; } /* **----------------------------------------------- ** Page Sidebar Styles **----------------------------------------------- */ #SideBar { text-align: right; width: 8.5em; margin: 0 0.5em 0 0; } .SideBarTitle { background-color: rgb(205, 219, 205); /* Side bar section title background. */ font-size: 95%; font-weight: bold; margin: 0; padding: 0.5ex 1ex 0.5ex 0.5ex; } #SideBar ul { list-style-type: none; list-style-position: outside; margin: 0; padding: 1ex 0; } #SideBar li { font-size: 90%; margin: 0; padding: 0.3ex 1ex 0.7ex 0.5ex; } #SideBar a { color: rgb(63, 85, 73); /* foreground, darker shade. */ background-color: transparent; text-decoration: none; } #SideBar a:hover { color: rgb(255, 255, 230); /* Creamy off-white. */ background-color: transparent; text-decoration: none; } #SideBar .LinkToCurrentPage { color: rgb(250, 230, 180); /* Orange. */ } .SideBarText { font-size: 115%; font-family: Times New Roman, Bookman Old Style, serif; font-style: italic; } #SideBar.SideBarText a:link { text-decoration: underline; } #SideBar.SideBarText a:hover { text-decoration: none; } #SideBar .SideBarImage { vertical-align: bottom; border-top: 1px solid rgb(151, 165, 151); /* background, lighter shade. */ /* NB: Must match #SideBar width. */ width: 8.5em; /* No extra space around pictures. */ padding: 0; margin: 0; } /* **----------------------------------------------- ** Main Copy Styles **----------------------------------------------- */ #MainCopy { line-height: 1.5em; margin: 0; padding: 0; width: 100%; background-color: #FFFFF2; /* background. */ } /* ** TopicHeader encloses an

item. / #MainCopy #TopicHeader { background-image: url(./Images/Misc/TopicHeaderBackground-3.jpg); background-repeat: repeat-y; background-color: #FDEAC1; / Lighter shade of Header title foreground / / to match color in background JPG. / padding: 1.0em 2em 1.0em 0.15in; margin: 0; border-bottom: 6px solid rgb(169, 182, 169); / background. / } #MainCopy #TopicHeader h1 { font-family: Lucida Sans, Impact, arial black, tahoma, sans-serif; font-weight: bolder; font-size: x-large; margin: 0; } / A paragraph in the Topic Header is a hyperlink to an item's container. For example, the link from a trail page leads back to the page for the town in ** which the trail resides. / #MainCopy #TopicHeader p { font-size: 120%; margin: 0.7ex 0 0 0; / Assumes
is preceded by

. / padding: 0; } #MainCopy #TopicHeader p a:link { color: rgb(83, 105, 93); / foreground. / text-decoration: underlined; } #MainCopy #TopicHeader p a:visited { color: rgb(135, 120, 100); text-decoration: underlined; } #MainCopy #TopicHeader p a:hover { color: #FFFFF2; / background. / background-color: rgb(83, 105, 93); / foreground. / text-decoration: none; } #MainCopy #TopicBody { width: 45em; / Pleasing width, determined empirically. / color: rgb(59, 73, 65); / foreground = foreground, darker shade. / padding: 0 2em 0.8em 0.15in; } #MainCopy #TopicBody a:link { color: rgb(59, 73, 85); / foreground. / background-color: transparent; text-decoration: underline; } #MainCopy #TopicBody a:visited { color: rgb(135, 120, 100); background-color: transparent; text-decoration: underline; } / While hovering, invert foreground and background colors, and remove underline. / #MainCopy #TopicBody a:hover { text-decoration: none; color: #FFFFF2; / background. / background-color: rgb(83, 105, 93); / foreground. / } #MainCopy h2 { font-size: 140%; font-weight: bold; margin: 1.0em 0 0.5em 0; padding: 0; color: rgb(83, 105, 93); / foreground. / } / Need these two because H2 color overrides "#TopicBody a" / / formatting for hyperlinks within H2 headings. / #MainCopy #TopicBody h2 a:link { color: rgb(83, 105, 93); / foreground. / } #MainCopy #TopicBody h2 a:hover { color: #FFFFF2; / background. / } #MainCopy h3 { font-size: 120%; font-weight: bold; margin-bottom: 0.5em; padding: 0; } #MainCopy .Instructions { font-family: times new roman, serif; font-size: small; font-style: italic; line-height: 1.2em; color: rgb(50%, 55%, 50%) } / Display a "map not available" message in a box representing a map placeholder. / #MainCopy .NoMap { color: rgb(138, 138, 138); / Map placeholder foreground. / font-size: 85%; font-style: italic; padding: 50px; border: 1px solid; width: 110px; text-align: center; } / ** For holding a map with overlays. / #TopicBody .AreaMapDiv { position: relative; } / ** Foreground color is a little overpowering for heavy items. / / #TopicBody strong { /* Note: This one doesn't work, for unknown reasons. Use instead. / color: rgb(83, 105, 93); / foreground. / } #TopicBody b { color: rgb(83, 105, 93); / foreground. / } / Unless the bold stuff is in a hyperlink and therefore inverted... / / See "#MainCopy #TopicBody a:hover" / #MainCopy #TopicBody a:hover b { color: #FFFFF2; / background. / } / Put a border around rectangular map images. Ensure that this image is at z-index zero so that RectAreaMapRollovers at z-index 1 is on top of this one ** to support rollovers. / #TopicBody .RectAreaMap { z-index: 0; top: 0; left: 0; border: 2px solid rgb(83, 105, 93); / foreground. / } / Map rollovers are implemented by assigning updated images to an overlay that lies on top of the full map. This way, only partial updates are needed, ** thereby saving considerable download time. / #TopicBody .RectAreaMapRollovers { z-index: 1; / Enclosing element must have "position: relative" to support absolute positioning. / position: absolute; top: 0; left: 0; / Accounts for the 2-pixel border around RectAreaMap. / margin-top: 2px; margin-left: 2px; } / ** Put a border and some space around photos. / #TopicBody .Photo { border: 3px double rgb(83, 105, 93); / foreground. / margin-right: 1em; margin-bottom: 1em; } #TopicBody .Photo a:hover { border: 3px single rgb(83, 105, 93); / foreground. / } #ItemFeatures table { padding-left: 1.5em; } #ItemFeatures table tr { padding-bottom: 0.1em; } #ItemFeatures .FeatureLabel { font-weight: bold; color: rgb(83, 105, 93); / foreground. / font-size: 90%; width: 16em; text-align: left; padding-right: 0; } #ItemFeatures .FeatureText { padding-left: 0; } / List of multiple trailheads / #ItemFeatures .FeatureText ul { list-style-type: disc; list-style-position: inside; margin: 0 0 0.3em 0; padding: 0; } / Trailhead list item / #ItemFeatures .FeatureText ul li { line-height: 1.4em; } / Button that displays map legend / #MapLegendButton { font-size: 75%; color: rgb(59, 73, 85); / foreground. / } / ----------------------------------------------- Page Footer Styles **----------------------------------------------- / #Footer { color: rgb(250, 247, 225); / Page header foreground. / background-color: rgb(103, 125, 113); / Page header background. / font-size: 85%; margin: 0.5em 0 0 0; padding: 0.8ex 4mm; } #Footer table { width: 100%; } #Footer .left { text-align: left; } #Footer .center { text-align: center; } #Footer .right { text-align: right; } #Footer a { color: rgb(250, 247, 225); / Page header foreground. / background-color: transparent; text-decoration: underline; } / Turn off underlining for disabled links to the current page. / #Footer .LinkToCurrentPage { text-decoration: none; } / While hovering, invert foreground and background colors, with foreground color darkened slightly. / #Footer a:hover { color: rgb(83, 105, 93); / foreground. / background-color: rgb(250, 247, 225); / Page header foreground. / text-decoration: none; } / ----------------------------------------------- Page Subfooter Styles **----------------------------------------------- / #SubFooter { font-size: 80%; margin: 0; padding: 0ex 4mm 0.2ex 4mm; /5mm;/ } #SubFooter table { width: 100%; } #SubFooter .left { text-align: left; } #SubFooter .right { text-align: right; } #SubFooter a { color: rgb(83, 105, 93); / foreground. / background-color: transparent; text-decoration: underline; } #SubFooter a:hover { text-decoration: none; color: rgb(169, 182, 169); / background. / background-color: rgb(83, 105, 93); / foreground. */ }