/* layout.css This document contains elements that are used on every page and are *not* page specific. They contain basic style elements as well as host of positioning elements. **warning**: changing styles in this stylesheet may effect ALL pages */ /* Basic HTML Elements */ * { margin: 0px; padding: 0px; border: 0px } body { background: url(/images/bg_body.gif); font-size: 62.5%} #wrapper { background: url(/images/bg_wrapper.gif) repeat-x; width: 100%; height: 736px; font: normal 1.1em arial; } a { font:normal 1.0em arial; color: #000; outline: none} a.gold:hover { color: #6D612F; } a.red:hover {color: #805353; } a.green:hover {color: #5E7B52; } ul.list { margin-bottom: 10px; } ul.list li { margin-left: 25px; } /* Rounded Rectangle / Container */ #container { width: 782px; margin: 0px auto; padding-top: 68px; position: relative;} #container .facebooklink { z-index: 399;position: absolute; top: -2px; right: -1px;} #container_top { width: 782px; height: 12px; font-size: 12px; background: url(/images/bg_container_top.png) no-repeat; } #container_mid { width: 782px; float: left; background: url(/images/bg_container_mid.png) repeat-y; } #container_btm { width: 782px; clear: left; height: 12px; font-size: 12px; background: url(/images/bg_container_btm.png) no-repeat; } /* Top: navigation, planning a visit, top logo */ #print_header { display: none; } #top { height: 235px; position: relative; z-index: 2;background: #373632; margin: 0px 6px;} #top .train { position: absolute; margin: -70px 0px 0px 0px; width: 770px; height: 286px; background: url(/images/bg_train.png) no-repeat; } #top .train_link { top: 10px; right: 15px; display: block; position: absolute; z-index: 10;height: 146px; width: 222px; } #top h1 { position: absolute; margin: -6px 0px 0px -999em;} #top h2 { position: absolute; top: 71px; left: 20px; margin: 0px;} #top h2 span.hdn { display: none; } #top .visit {position: absolute; margin: 121px 0px 0px 472px; color: #dadada; width: 278px; padding: 12px 10px 0px 10px} #top .visit p { margin: 5px 10px; line-height: 1.3em; } #top .visit p.dir { position: absolute; top: 44px; right: -17px; width: 203px} #top .visit select {position: absolute; top: 68px; left: 105px; background: #eee; border: 1px solid #cfcfcf; border-top: 1px solid #999999; color: #000; font: normal 10px verdana; padding: 2px 0px 2px 2px; margin: -1px 0px 0px 10px; width: 100px } #top .visit a.a_submit { position: absolute; top: 67px; left: 220px; width: 72px; display: block; height: 21px; background: url(/images/btn_submit_visit.gif) no-repeat; } #top .visit a { color: #A18927; } #top .visit a:hover { color: #DEBD3A; } /* Navigation */ #top ul#nav { background: #494845; height: 19px; list-style: none; display: block; width: 763px; position: absolute; bottom: 0px; padding-left: 7px} #nav a span { display: none;} #nav li { float: left; display: block; } #nav li li { float: left; display: block; padding: 0px; margin-right: 3px; display: inline;} #nav li li a.tier1 { float: left; height: 18px; display: block; position: relative; color: #fff} #nav li div {display:none; top: 18px; position: absolute; } #nav li ul dl { display:none; top: 18px; padding-top: 3px; position: absolute; } #nav li ul dl dt { width: 100%; padding: 0px 5px; } #nav li ul dl dt a { position: relative; z-index: 1000; text-transform: uppercase; font-size: 10px; text-decoration: none; } #nav li ul dl dt a:hover { text-decoration: underline; } #nav li:hover dl, #nav li.sfhover dl { display: block; } #nav li:hover div, #nav li.sfhover div { display: block; } /* About Us */ #nav ul.about li { background: url(/images/nav/nav_About.gif) 0px 2px no-repeat; } .about_page #nav ul.about li { background: url(/images/nav/nav_on_About.gif) 0px 2px no-repeat; } #nav ul.about li a.tier1 {width: 46px; } #nav ul.about li:hover, #nav ul.about li.sfhover { background: url(/images/nav/nav_over_About.gif) 0px 2px no-repeat; } #nav ul.about div, #nav ul.about dl {left: 7px; height: 71px; width: 112px; } #nav ul.about div {background: url(/images/bg_subnav_about.png) no-repeat bottom right; } /* Tours */ #nav ul.tours li { background: url(/images/nav/nav_Tours.gif) 0px 2px no-repeat; } .tours_page #nav ul.tours li { background: url(/images/nav/nav_on_Tours.gif) 0px 2px no-repeat; } #nav ul.tours li a.tier1 {width: 46px; } #nav ul.tours li:hover, #nav ul.tours li.sfhover { background: url(/images/nav/nav_over_Tours.gif) 0px 2px no-repeat; } #nav ul.tours div, #nav ul.tours dl {left: 56px; height: 58px; width: 92px; } #nav ul.tours div {background: url(/images/bg_subnav_tours.png) no-repeat bottom right;} /* News/Events */ #nav ul.news li { background: url(/images/nav/nav_News.gif) 0px 2px no-repeat; } .news_page #nav ul.news li { background: url(/images/nav/nav_on_News.gif) 0px 2px no-repeat; } #nav ul.news li a.tier1 {width: 87px; } #nav ul.news li:hover, #nav ul.news li.sfhover { background: url(/images/nav/nav_over_News.gif) 0px 2px no-repeat; } #nav ul.news div, #nav ul.news dl {left: 105px; height: 58px; width: 113px; } #nav ul.news div {background: url(/images/bg_subnav_news.png) no-repeat bottom right;} /* Facility Rentals */ #nav ul.facility_rentals li { background: url(/images/nav/nav_FacilityRentals.gif) 0px 2px no-repeat; } .facility_rentals_page #nav ul.facility_rentals li { background: url(/images/nav/nav_on_FacilityRentals.gif) 0px 2px no-repeat; } #nav ul.facility_rentals li a.tier1 {width: 107px; } #nav ul.facility_rentals li:hover, #nav ul.facility_rentals li.sfhover { background: url(/images/nav/nav_over_FacilityRentals.gif) 0px 2px no-repeat; } #nav ul.facility_rentals div, #nav ul.facility_rentals dl {left: 195px; height: 75px; width: 114px; } #nav ul.facility_rentals div {background: url(/images/bg_subnav_facility_rentals.png) no-repeat bottom right;} /* Education */ #nav ul.education li { background: url(/images/nav/nav_Education.gif) 0px 2px no-repeat; } .education_page #nav ul.education li { background: url(/images/nav/nav_on_Education.gif) 0px 2px no-repeat; } #nav ul.education li a.tier1 {width: 145px; } #nav ul.education li:hover, #nav ul.education li.sfhover { background: url(/images/nav/nav_over_Education.gif) 0px 2px no-repeat; } #nav ul.education div, #nav ul.education dl {left: 305px; height: 101px; width: 167px; } #nav ul.education div {background: url(/images/bg_subnav_education.png) no-repeat bottom right;} /* Exhibits */ #nav ul.exhibits li { background: url(/images/nav/nav_Exhibits.gif) 0px 2px no-repeat; } .exhibits_page #nav ul.exhibits li { background: url(/images/nav/nav_on_Exhibits.gif) 0px 2px no-repeat; } #nav ul.exhibits li a.tier1 {width: 56px; } #nav ul.exhibits li:hover, #nav ul.exhibits li.sfhover { background: url(/images/nav/nav_over_Exhibits.gif) 0px 2px no-repeat; } #nav ul.exhibits div, #nav ul.exhibits dl {left: 453px; height: 72px; width: 94px; } #nav ul.exhibits div {background: url(/images/bg_subnav_exhibits.png) no-repeat bottom right;} /* Support */ #nav ul.support li { background: url(/images/nav/nav_Support.gif) 0px 2px no-repeat; } .support_page #nav ul.support li { background: url(/images/nav/nav_on_Support.gif) 0px 2px no-repeat; } #nav ul.support li a.tier1 {width: 59px; } #nav ul.support li:hover, #nav ul.support li.sfhover { background: url(/images/nav/nav_over_Support.gif) 0px 2px no-repeat; } #nav ul.support div, #nav ul.support dl {left: 512px; height: 91px; width: 103px; } #nav ul.support div {background: url(/images/bg_subnav_support.png) no-repeat bottom right;} /* Membership */ #nav ul.membership li { background: url(/images/nav/nav_Membership.gif) 0px 2px no-repeat; } .membership_page #nav ul.membership li { background: url(/images/nav/nav_on_Membership.gif) 0px 2px no-repeat; } #nav ul.membership li a.tier1 {width: 78px; } #nav ul.membership li:hover, #nav ul.membership li.sfhover { background: url(/images/nav/nav_over_Membership.gif) 0px 2px no-repeat; } #nav ul.membership div, #nav ul.membership dl {left: 574px; height: 101px; width: 110px; } #nav ul.membership div {background: url(/images/bg_subnav_membership.png) no-repeat bottom right;} /* Store */ #nav ul.store li { background: url(/images/nav/nav_Store.gif) 0px 2px no-repeat; } .store_page #nav ul.store li { background: url(/images/nav/nav_on_Store.gif) 0px 2px no-repeat; } #nav ul.store li a.tier1 {width: 46px; } #nav ul.store li:hover, #nav ul.store li.sfhover { background: url(/images/nav/nav_over_Store.gif) 0px 2px no-repeat; } #nav ul.store div, #nav ul.store dl {left: 655px; height: 31px; width: 93px; } #nav ul.store div {background: url(/images/bg_subnav_store.png) no-repeat bottom right;} /* Contact */ #nav ul.contact li { background: url(/images/nav/nav_Contact.gif) 0px 2px no-repeat; margin-right:0px} .contact_page #nav ul.contact li { background: url(/images/nav/nav_on_Contact.gif) 0px 2px no-repeat; } #nav ul.contact li a.tier1 {width: 59px!important; width: 56px; } #nav ul.contact li:hover, #nav ul.contact li.sfhover { background: url(/images/nav/nav_over_Contact.gif) 0px 2px no-repeat; } #nav ul.contact div, #nav ul.contact dl {left: 704px; height: 31px; width: 93px; } #nav ul.contact div {background: url(/images/bg_subnav_contact.png) no-repeat bottom right;} /* Mid: all content, center area This has 4 themes: - .gray : (all basic pages) - .gold : (all news/events pages) - .red : (all exhibits pages) - .green: (all membership pages) */ #mid { margin: 0px 6px; float: left; display: inline; position: relative; z-index: 1; background: #efefef url(/images/bg_mid.gif) no-repeat bottom; min-height: 300px; height: auto!important; height: 300px} /* Breadcrumbs: area before content starts on all interior pages */ .breadcrumbs { width: 750px; height: 37px; padding: 4px 0px 0px 20px; color: #595858} .breadcrumbs a { color: #595858; } .breadcrumbs a:hover { color: #333; } .gray .breadcrumbs { background: url(/images/bg_breadcrumbs_gray.gif) no-repeat; } .gold .breadcrumbs { background: url(/images/bg_breadcrumbs_gold.gif) no-repeat; } .red .breadcrumbs { background: url(/images/bg_breadcrumbs_red.gif) no-repeat; color: #ccc;} .red .breadcrumbs a { color: #ccc; } .red .breadcrumbs a:hover { color: #fff; } .green .breadcrumbs { background: url(/images/bg_breadcrumbs_green.gif) no-repeat; color: #ccc;} .green .breadcrumbs a { color: #ccc; } .green .breadcrumbs a:hover { color: #fff; } /* Content: housing content, follows the breadcrumbs */ .content { float: left; padding: 10px 10px 5px 10px; margin-top: -20px; position: relative; } .content h1 { margin-bottom: 8px; margin-left: -2px } .content h1 span.hdn { display: none; } .content h4 { font: bold 1.4em "Times New Roman"; margin-bottom: 5px} .content p { margin: 0px; padding: 0px; } .content p.margins { margin-bottom: 10px; } .content .dotted_line { height: 1px; line-height: 1px; border-bottom: 1px dotted #666; margin-bottom: 10px; } .content .h_line { float: left; margin: 10px 0px; width: 750px; height: 1px; line-height:1px;} .gray .h_line { background: #AAA; } .gold .h_line { background: #AD8B4D } .red .h_line { background: #805353 } .green .h_line { background: #5E7B52; } /* Below is used for indepth text pages where we use 2 columns */ .content .left { float: left; width: 600px; } .content .left p { margin: 0px 0px 10px 0px; } .content .right { float: right; width: 124px; } .content .right dl { clear: both; width: 124px; background: url(/images/bg_sectionlinks_btm.gif) no-repeat bottom; padding-bottom:5px } .content .right dt { padding: 2px 0px 1px 5px; color: #fff; } .content .right dd { background: #fff; padding: 1px 0px 1px 5px; border-left: 1px solid #aaa; border-right: 1px solid #aaa; } .gray .content .right dt { background: url(/images/bg_sectionlinks_top_gray.gif) no-repeat top;} .gray .content a:hover { color: #aaa; } .gold .content .right dt {background: url(/images/bg_sectionlinks_top_gold.gif) no-repeat top; } .gold .content a:hover { color: #6D612F; } .red .content .right dt { background: url(/images/bg_sectionlinks_top_red.gif) no-repeat top;} .red .content a:hover { color: #805353; } .green .content .right dt {background: url(/images/bg_sectionlinks_top_green.gif) no-repeat top; } .green .content a:hover { color: #5E7B52; } .content .right dd.on { padding-bottom: 0px; } .content .right dd.on a { font-weight: bold; text-decoration: none; } .content .right dd.on a:hover { color: #000; } .content .right .print { text-align: right; padding-top: 5px; position: relative;} .content .right .print img { position: absolute; right: 52px; } /* Btm: copyright and sub links */ #btm { color: #858585; padding-bottom: 100px } #btm a { color: #858585; } #btm a:hover { color: #B7B7B7; } #btm ul { float: left; list-style: none; width: 380px; margin-top: 4px} #btm li { float: left; border-right: 1px solid #858585; line-height: 1.1em; margin: 0px 0px 2px 5px; padding-right: 5px } #btm li.nb { border: 0px; } #btm p { float: right;line-height: 1.2em; margin-top: 4px}