@font-face { font-family: 'antonregular'; src: url('../fonts/anton-webfont.eot'); src: url('../fonts/anton-webfont.eot#iefix') format('embedded-opentype'), url('../fonts/anton-webfont.woff') format('woff'), url('../fonts/anton-webfont.ttf') format('truetype'), url('../fonts/anton-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } ::selection { background: #FF1493; /* Safari */ } ::-moz-selection { background: #FF1493; /* Firefox */ } html, body{ margin: 0; padding: 0; background:#4c4c4c url(../img/bg.png) repeat-x; color: white; font: 14px Arial, sans-serif; -webkit-font-smoothing: antialiased; } h1{ font: 72px/1em antonregular, sans-serif; text-transform: uppercase; margin: 0; padding: 25px 0 25px 0; } p{ margin: 0 0 15px 0; padding: 0; line-height: 18px; font-style: normal; } a{ text-decoration: none; color: white; outline: none; } input:focus, select:focus, textarea:focus, button:focus, area:focus, map:focus { outline: none; } a:hover { color: #aaa !important; } .top-bar a.home-logo { position: absolute; top: 0; right: 0; } .top-bar .top-menu { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 0; left: 0; height: 28px; z-index: 100; } .top-bar .top-menu > li { display: block; float: left; text-transform: uppercase; margin-right: 0; background-repeat: no-repeat; background-position: left center; height: 28px; padding: 0; } .top-bar .top-menu .search { position: relative; } .top-bar .top-menu .search > a { background-image: url(../img/icon_search.png); background-repeat: no-repeat; background-position: left center; padding: 6px 0 6px 40px; display: block; } .top-bar .top-menu li a { color: #fff; display: block; } .top-bar .top-menu .home > a { margin: 6px 0 6px 13px; border-left: 1px solid #fff; background-repeat: no-repeat; background-position: 6px 0; background-image: url(../img/icon_home.png); padding-left: 30px; display: block; } .top-main-menu { display: none; position: absolute; background-color: #b90000; left: 0; top: 27px; padding: 0 0; margin: 0; width: 250px; font-size: 11px; font-weight: bold; z-index: 100; } .top-bar .top-main-menu > li { display: block; float: none; height: auto; cursor: pointer; padding: 0; border-bottom: 2px solid black; } .top-bar .top-main-menu > li span, .top-bar .top-main-menu > li a { padding: 6px 30px; display: block; background-image: url(../img/menu_open.png); background-repeat: no-repeat; background-position: 8px center; } .top-bar .top-main-menu > li span:hover { color: #aaa !important; } .top-bar .top-main-menu .sub-menu { display: none; list-style-type: none; padding: 0; margin: 0; float: none; border-top: 2px solid black; background-color: #980000; } .top-bar .top-main-menu .sub-menu > li a { padding: 6px 30px; margin: 0; float: none; border-top: 2px solid black; background-image: url(../img/menu_open.png); background-repeat: no-repeat; } .top-bar .top-main-menu .sub-menu > li:first-child a { border-top: none; } .top-bar .top-main-menu .sub-menu > li:last-child { padding-bottom: 0; } .top-bar .top-menu .top-main-menu a { margin: 0; border: 0; } .home-container{ width: 335px; height: 420px; margin: 96px auto 0 auto; padding: 0 0 0 625px; background-image: url(../img/splash-image.png); background-repeat: no-repeat; } .award-container{ padding: 40px 0 0 0px; float: right; } .home-container h1 { padding-top: 15px; } .top-bar { background-color: #4c4c4c; height: 28px; } .top-bar h1 { font: bold 13px Arial, sans-serif; text-align: center; margin: 0; padding: 6px 0; } ul.menu{ margin: 0; padding: 27px 0 0 0; border-top: 1px solid #c8c8c8; list-style-type: none; } .menu li a{ font: 36px antonregular, sans-serif; color: #fff; text-decoration: none; } .menu li{ margin: 0; padding: 0; float: left; } .menu li span.first-word{ color: #c8c8c8; font-size: 24px; line-height: 24px; margin-bottom: -10px; display: block; } .menu li span.more{ font: 60px Arial, sans-serif; } .container { margin: 15px auto 0 auto; width: 910px; } .container h1 { margin: 10px 0 0 0; padding: 0; font-size: 24px; color: #c8c8c8; line-height: 35px; } .container h1 span { font-size: 72px; color: #fff; display:block; line-height: 72px; } .container h2 { font-family:antonregular, sans-serif; text-transform: uppercase; font-weight: normal; margin: 0 0 10px 0 ; padding: 0; color: #c8c8c8; font-size: 24px; } .objects-list { list-style-type: none; width: 840px; margin: 0; padding: 0; position: relative; } .objects-list li { display: inline-block; float: left; margin: 0; padding: 0; width: 70px; height: 70px; opacity: 1; } .objects-list li img { position: absolute; display: block; } .themes-list { list-style-type: none; margin: 0; padding: 0; } .themes-list li { display: inline-block; float: left; margin: 0; padding: 0; width: 150px; height: 140px; } .themes-list a span { color: white; font-size: 18px; font-family:antonregular, sans-serif; text-transform: uppercase; font-weight: normal; line-height: 1em; font-weight: normal; margin: 15px 0 0 0; display: block; } .organisations-list { list-style-type: none; width: 910px; margin: 0; padding: 0; } .organisations-list li { display: block; float: left; margin: 3px 2px 2px 3px; padding: 0; width: 110px; height: 82px; background-color: #c8c8c8; } .organisations-list li a { display: table-cell; width: 110px; height: 82px; vertical-align: middle; text-align: center; font-size: 14px; font-family:antonregular, sans-serif; text-transform: uppercase; font-weight: normal; color: #4c4c4c; line-height: 1em; } .organisations-list a span { text-align: center; } .timeline { list-style-type: none; width: 880px; height: 77px; margin: 25px 0 0 0; padding: 0; background-image: url(../img/timeline.png); background-repeat: no-repeat; background-position: 0 25px; position: relative; } .timeline li { position: absolute; font-size: 18px; font-family:antonregular, sans-serif; text-transform: uppercase; font-weight: normal; color: #fff; line-height: 1em; height: 43px; background-repeat: no-repeat; background-position: center bottom; } .timeline .timeline-lower { background-position: center top; padding-top: 20px; height: 10px; bottom: 10px; } .timeline .timeline-selected { background-image: url(../img/red-block.png); } .timeline li a { color: #fff; } .timeline-1 { left: 18px; } .timeline-2 { left: 197px; } .timeline-3 { left: 377px; } .timeline-4 { left: 557px; } .timeline-5 { left: 729px; } .timeline .selected { } .object-container { /*position: absolute; margin: 0; width: 960px; top: 0; pointer-events:none;*/ position: relative; margin-top: -28px; width: 960px; height: 680px; } .object-container .object-number { z-index: 1; position: absolute; font-size: 425px; font-family:antonregular, sans-serif; text-transform: uppercase; font-weight: normal; color: #fff; opacity: 0.1; top: 80px; left: 150px; line-height: 1em; } .object-container .object-content { z-index: 2; position: absolute; top: 0; left: -0px; padding-left: 580px; padding-top: 25px; width: 380px; height: 595px; background-repeat: no-repeat; } .object-content h1 { font-size: 42px; font-family:antonregular, sans-serif; text-transform: uppercase; font-weight: normal; color: #fff; margin: 20px 0 10px 0; } .object-content p.info { font-size: 18px; line-height: 1em; margin: 0; padding: 4px 0; } .object-content .bodytext { margin: 0; width: 345px; } .object-content .bodytext p { font-size: 13px; } .actions { list-style-type: none; padding: 10px 0 0 0; margin: 0; height: 64px; pointer-events: auto; border-top: 1px solid #a2a2a2; width: 360px; } .actions li { width: 108px; display: inline; float: left; margin-bottom: 15px; font-size: 12px; font-family:antonregular, sans-serif; text-transform: uppercase; font-weight: normal; } .actions li a, .st_sharethis_custom { display: block; height: 20px; padding-top: 1px; color: #fff; background-repeat: no-repeat; padding-left: 28px; } .actions li a.add { background-image: url(../img/icon_add.png); } .actions li a.share { background-image: url(../img/icon_share.png); } .st_sharethis_custom { background-image: url(../img/icon_share.png); cursor: pointer; } .actions li a.my-trails { background-image: url(../img/icon_my_trails.png); } .actions li a.view-map { background-image: url(../img/icon_view_map.png); } .actions li a.view-video { background-image: url(../img/icon_view_video.png); } .actions li a.related-themes { background-image: url(../img/icon_related_themes.png); } .actions li a.print { background-image: url(../img/icon_print.png); } .rating label { font-size: 14px; font-family:antonregular, sans-serif; text-transform: uppercase; font-weight: normal; float: left; margin-right: 10px; } .rating ul { list-style-type: none; padding: 0; margin: 0; height: 84px; display: inline; } .rating ul li { float: left; display: inline; width: 21px; } .footer { position: absolute; top: 632px; left: 0; width: 100%; text-align: center; } .footer a { color: #e6e6e6; } ul.footer-items { margin: 0 auto; height: 100px; display: inline-block; } .footer ul { list-style-type: none; padding: 0; } .footer-items > li { font-size: 15px; font-family:antonregular, sans-serif; text-transform: uppercase; font-weight: normal; display: block; height: 82px; float: left; background-repeat: no-repeat; background-position: center; text-align: center; } .footer-items .prev-page, .footer-items .next-page { width: 40px; padding: 20px 20px 0 0; height: 42px; } .footer-items .next-page { padding: 20px 0 0 20px; } .footer-items .switch-site { width: 121px; border-right: 1px solid #b5b5b5; text-align: left; } .footer-items .saved-trails a { display: block; height: 15px; background-repeat: no-repeat; text-align: center; background-image: url(../img/btn_saved_trails.png); width: 125px; border-right: 1px solid #b5b5b5; background-position: center 15px; padding-top: 67px; } .footer-items .social-btns { padding: 0 9px 0 40px; border-right: 1px solid #b5b5b5; } .social-btns li { display: block; float: left; margin-right: 31px; } .social-btns li a { font-size: 15px; font-family:antonregular, sans-serif; text-transform: uppercase; font-weight: normal; display: block; height: 30px; width: 47px; background-repeat: no-repeat; background-position: center top; text-align: center; padding-top: 52px; } .social-btns .twitter-btn a { background-image: url(../img/btn_twitter.png); } .social-btns .about-btn a { background-image: url(../img/btn_about.png); } .social-btns .videos-btn a { background-image: url(../img/btn_videos.png); } .social-btns .schools-btn a { background-image: url(../img/btn_schools.png); } .footer-items .regional-links { text-align: left; padding: 0 30px 0 40px; } .footer-items .regional-links ul { margin-top: 13px; } .footer-items .regional-links li { font-family: Arial, sans-serif; font-size: 14px; text-transform: none; margin-bottom: 4px; } .footer-items .sponsors { text-align: left; padding: 0 15px 0 23px; border-left: 1px solid #b5b5b5; } .footer-items .sponsors ul { margin-top: 6px; } .footer-items .sponsors li { display: inline-block; margin-right: 25px } .region-map { margin-left: 270px; margin-top: -90px; } .google-trails-map { width: 455px; height: 305px; float: left; } .mapped-objects { float: left; margin-left: 30px; width: 425px; min-height: 305px; } .mapped-objects h2 { margin: -4px 0 24px 0; padding: 0; font-size: 34px; color: #c8c8c8; line-height: 31px; } .mapped-objects h2 > span { font-size: 42px; padding-top: 10px; color: #fff; display:block; } .mapped-objects .switcher { list-style-type: none; padding: 0; margin: 0; } .mapped-objects .switcher li { display: inline; float: left; font-family: Arial, sans-serif; font-size: 18px; color: #fff; width: 160px; padding-right: 15px; padding-bottom: 8px; padding-top: 3px; } .mapped-objects .switcher li.popular-objects { display: inline; float: left; font-family: Arial, sans-serif; font-size: 18px; color: #fff; width: 234px; border-left: 1px solid #a5a5a5; border-bottom: 1px solid #a5a5a5; padding-right: 0; padding-left: 15px; } .mapped-objects .switcher li a { color: #fff; } .mapped-objects .popular-objects { display: none; } .mapped-objects .your-objects { display: block; } .mapped-objects .delete { background-repeat: no-repeat; background-position: right center; background-image: url(../img/delete.png); float: right; display: block; font-size: 10px; padding-right: 16px; } .mapped-objects div { clear: left; padding-top: 10px; } .mapped-objects .actions { border: none; } .mapped-objects ul.listing { list-style-type: none; padding: 0; margin: 0; font-family: Arial, sans-serif; font-size: 13px; color: #fff; } .mapped-objects ul.listing li { min-height: 70px; padding-bottom: 18px; margin-bottom: 12px; border-bottom: 1px solid #a5a5a5; } .mapped-objects ul.listing li img { float: left; margin-right: 15px; } .mapped-objects ul.listing li h3 { font-weight: bold; margin: 0; padding: 0; } .mapped-objects ul.listing li p { margin: 0; padding: 0; margin-left: 81px; } .mapped-objects ul.listing li a { color: #fff; } .hover-tip { position: absolute; top: 100px; left: 800px; width: 375px; background-image: url(../img/mini_icon_hover_top.png); background-repeat: no-repeat; background-position: left top; display: none; } .hover-tip .middle { padding: 0 44px 5px 20px; min-height: 10px; margin-top: 22px; background-image: url(../img/mini_icon_hover_middle.png); background-repeat: repeat-y; background-position: left top; } .hover-tip .bottom { width: 100%; height: 30px; background-image: url(../img/mini_icon_hover_bottom.png); background-repeat: no-repeat; } .hover-tip p.number { font-size: 24px; font-family:antonregular, sans-serif; text-transform: uppercase; font-weight: normal; float: left; margin: 0; padding: 0; } .hover-tip p { padding: 0; margin: 0 0 0 50px; font-size: 12px; font-family: Arial, sans-serif; } .twitter-feed { display: none; position: absolute; z-index: 300; top: 225px; left: 300px; width: 400px; height: 368px; } div.related-themes { color: white; background-color: #4c4c4c; margin: 0; padding: 20px; } div.related-themes h2 { margin: 0 0 20px 0; font-size: 24px; font-family:antonregular, sans-serif; text-transform: uppercase; font-weight: normal; } div.related-themes ul { padding: 0; margin: 0; list-style-type: none; height: 160px; } .popup-box { width:434px; background-image: url(../img/login_top.png); background-repeat: no-repeat; background-position: left top; padding-top: 23px; position: absolute; display: none; z-index: 1000; } .popup-box .close-btn { position: absolute; top: 0; right: 0; width: 22px; height: 22px; display: block; } .popup-box .middle { background-image: url(../img/login_middle.png); background-repeat: repeat-y; padding: 5px 20px 46px 20px; } .popup-box .bottom { background-image: url(../img/login_bottom.png); background-repeat: no-repeat; background-position: left bottom; height: 6px; } .popup-box input { width: 360px; margin-bottom: 15px; padding: 10px; } .popup-box p { width: 200px; float: left; } .form-button { background-image: url(../img/login_button.png); background-repeat: no-repeat; background-position: left top; width: 126px; height: 36px; border: 0; float: right; margin-right: 10px; font-family: Arial; font-size: 17px; color: white; font-weight: normal; } .pp_details { color: #333; } .pp_details p, .pp_description { line-height: normal; font-size: 14px; } .pp_details .video-nav { list-style-type: none; margin: 0; padding: 0; } .pp_details .video-nav li { margin-right: 10px; padding-right: 10px; border-right: 1px solid #333; float: left; display: inline; } .pp_details .video-nav li:last-child { border-right: 0; margin-right: 0; padding-right: 0; } .pp_details a.alt_video { color: #333; } .pp_description { padding-top: 4px; } div a.pp_arrow_next, div a.pp_arrow_previous, .currentTextHolder, div a.pp_play { display: none; } p.credit { font-size: 10px; font-family: Arial; text-transform: none; position: fixed; bottom: 0; right: 0; padding: 0; margin: 0; color: #666; } p.credit a { color: #666; }