/* ################################################################################ # # File: css/shared.css # # Purpose: RemoteMoto - CSS for public site # # Modifications: # - 2013-11-20 txe Started creation. # - 2014-08-04 txe Finished creation. # - 2014-09-09 txe Added video popup. # - 2014-09-17 txe Improved background for long photo descriptions. # - 2014-10-09 txe Added store items to point-info. # - 2014-10-15 txe Added ads. # - 2014-10-28 txe Added affiliates. # - 2014-10-29 txe Updated affiliates. # - 2014-11-03 txe Started adding packages. # - 2014-12-18 txe Started adding support for route contributors. # - 2014-12-30 txe Went live with above changes. # - 2015-02-16 txe Started updating contributions. # - 2015-02-18 txe Finished updating contributions. # - 2015-03-13 txe Tweaked members heading in right nav. # - 2015-03-23 txe Improved hover effect for package leg links. # - 2015-03-31 txe Added package files link. # - 2015-04-02 txe Improved display of top nav when search missing. # - 2015-04-29 txe Updated ad CSS. # - 2015-04-30 txe Updated ad CSS. # - 2015-05-05 txe Added help popups. # - 2015-05-08 txe Improved padding in crumbs. # - 2015-05-11 txe Widened top nav. # - 2015-05-26 txe Started adding banners. # - 2015-05-29 txe Finished adding banners. # - 2015-07-03 txe Improved browse buttons for IE. # - 2015-10-27 txe Added banner groups. # - 2015-11-10 txe Started adding support for banner ads. # - 2015-11-11 txe Finished adding support for banner ads. # - 2016-05-12 txe Added activity icon. # - 2016-07-26 txe Started overhaul. # - 2016-09-01 txe Finished overhaul. # - 2016-09-14 txe Added bottom margin to content-block. # - 2016-09-21 txe Added bike hires to top nav. # - 2016-12-02 txe Started adding free routes and adventures. # - 2017-05-08 txe Finished adding free routes and adventures. # - 2017-05-19 txe Updated banner ad positioning. # - 2017-08-09 txe Updated photo-placeholder. # - 2017-08-17 txe Started reorganising non-route articles. # - 2017-08-25 txe Finished reorganising non-route articles. # - 2017-09-07 txe Added product-link. # - 2017-09-09 txe Added social tab. # - 2017-09-19 txe Added map-add. # - 2017-09-22 txe Updated ad heading. # - 2017-10-04 txe Started overhaul. # - 2017-10-06 txe Finished overhaul. # - 2017-10-22 txe Added disabled right nav links. # - 2018-01-05 txe Started improving mobile support. # - 2018-01-xx txe Finished improving mobile support. # - 2018-03-30 txe Started overhaul. # - 2018-05-02 txe Finished overhaul. # - 2018-07-16 txe Temporarily hid Attractions, Bike Hire, Bike Shops. # - 2018-07-18 txe Added back ride reports. # - 2018-08-28 txe Added min page height (so that footer is against bottom). # - 2018-09-13 txe Fixed footer for mobile, updated top nav. # - 2018-09-19 txe Updated stats at button at the page. # ################################################################################ */ @import url(/css/third-party/main.css); body,div,p,form,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,h7,h8,table,tr,th,td { margin: 0; padding: 0; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100; src: url("/font/roboto-thin.woff2") format("woff2"); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url("/font/roboto-regular.woff2") format("woff2"); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url("/font/roboto-bold.woff2") format("woff2"); } body,th,td,p,li,dt,dd,select,input,textarea { color: #647983; line-height: 1.5; font-weight: 400; font-size: 16px; font-family: Roboto,sans-serif; } h1,h2,h3 { font-size: 16px; } p { margin-bottom: 10px; } a { color: #006; text-decoration: none; } a:hover { opacity: 0.5; } pre { text-align: left; } table { width: 100%; } th { padding: 5px; text-align: left; font-weight: bold; } td { padding: 5px; text-align: left; } input { padding: 1px 5px; } input.checkbox, input.radio, input.submit { padding: auto !important; width: auto !important; } .warnings { margin: 20px 0; padding: 0; color: #f00; text-align: center; } .warnings li { margin: 0; padding: 0; list-style: none; color: #f00; } .warnings li ul { margin: 0; padding: 10px 0 0 20px; } .warnings li ol { margin: 0; padding: 10px 0 0 20px; } .warnings li ul li { list-style: disc; } .warnings li ol li { list-style: decimal; } .dev-warnings { padding: 10px; position: fixed; left: 10px; top: 10px; background: #fdd; border: 1px solid #f00; color: #a00; z-index: 3; } .dev-warnings h2 { margin-bottom: 5px; color: #a00; } .dev-warnings li { margin-left: 20px; } .error { color: #f00; } .dev-note { margin: 10px auto; color: #b80; font-style: italic; } .dev { text-align: left; } .center { text-align: center; } .clear { clear: both; } .hidden { display: none !important; } .done { margin: 20px 0; color: #0a0; text-align: center; } /* LAYOUT */ #prevent-fouc { display: none; } #page { padding: 15px 0 0; position: relative; overflow: hidden; } /* header */ #header { margin: 0 auto 10px; width: 1000px; position: relative; } #header-title { margin: 10px auto 20px; padding: 0 20px; text-align: center; color: #009cd2; font-weight: bold; } #header-nav { max-width: 750px !important; position: relative; font-size: 15px; } #header-nav .rmm-main-list { white-space: nowrap; } #header-nav .rmm-main-list li { margin: 0; padding: 0 3px; border-width: 0 3px; } #header-nav .rmm-main-list a { padding: 10px 5px; width: 120px; color: #666; background: #f4f4f4; border-top: 5px solid #fff; white-space: nowrap; } #header-nav .rmm-main-list a:hover { opacity: 0.5; text-decoration: none; } #header-nav .rmm-main-list li.is-current a { border-top-color: #464646; } #header-nav #header-admin-link { position: absolute; left: 2px; top: -25px; background: #fff; color: #464646; text-decoration: underline; } /* 2018-04-10 txe start */ x#header-nav .rmm-main-list { background: #f00; } #header-nav .rmm-main-list a { width: 137px; } /* 2018-04-10 txe end */ /* 2018-07-18 txe start */ #header-nav { max-width: 903px !important; } /* 6 tabs */ /* 2018-07-18 txe end */ /* 2018-09-13 txe start */ @media (min-width: 857px) { #header-nav .rmm-main-list li.session { position: absolute; right: 0; top: -105px; } #header-nav .rmm-main-list li.session a { margin: 0; padding: 0; width: auto; background: none; border: none !important; text-decoration: underline; xfont-size: 13px; } #header-nav .rmm-main-list li.session { } } /* 2018-09-13 txe end */ #header-banner { border: solid #c6c6c6; border-width: 15px 0; position: relative; } #header-banner-bg { opacity: 0.5; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: 50% 50% no-repeat; background-size: 100%; z-index: -1; } #header-banner-fg { z-index: 2; } #header-banner img { margin: 0 auto; display: block; } @media (min-width: 1950px) { #header-banner img { border: solid #c6c6c6; border-width: 0 15px; box-sizing: border-box; } } @media (max-width: 856px) { #header-nav #header-admin-link { left: 22px; } } @media print { #header-nav { margin-left: -110px !important; transform: scale(0.9); width: 950px !important; } } x.wrapper1 { max-width: 100%; } .wrapper1 { margin: 0 auto; padding: 0 10px; max-width: 750px; } body.wide .wrapper1 { max-width: 100%; } article { padding: 0; max-width: 100%; } /* #crumbs { margin: 20px 0 0; padding: 10px; background: #464646; } #crumbs ul { margin: 0; padding: 0; list-style: none; } #crumbs li { margin: 0; padding: 0; display: inline-block; } #crumbs li:after { margin: 0 0 0 5px; content: ">"; color: #bbb; position: relative; top: -1px; } #crumbs a { color: #bbb; font-size: 100% !important; } #crumbs a:hover { opacity: 0.5; } #crumbs li.is-last { color: #fff; } #crumbs li.is-last:after { content: ""; } x#crumbs li.is-first.is-last { display: none; } */ #crumbs { margin: 20px -1000px 0px; padding: 10px; text-align: center; color: #464646; background: #ccc; line-height: 25px; font-size: 25px; font-weight: normal; } #crumbs ul { margin: 0; padding: 0; list-style: none; } #crumbs li { margin: 0; padding: 0; display: inline-block; color: #464646; } #crumbs li:after { margin: 0 0 0 5px; content: ">"; color: #464646; position: relative; top: -1px; } #crumbs a { text-decoration: underline; color: #464646; font-size: 100% !important; } #crumbs a:hover { opacity: 0.5; } x#crumbs li.is-last { color: #fff; } #crumbs li.is-last:after { content: ""; } #main { margin: 0; padding: 20px 0; max-width: 100%; } @media (max-width: 856px) { #header-banner { border-width: 2px 0; } #header-banner img { border: none; } x #main h1, x #main h2 { line-height: 1.5; font-size: 22px; } } /* panel lists */ #main .panel-block { margin: 0 auto 20px; max-width: 750px; xoverflow: hidden; position: relative; color: #797979; } #main .panel-block h2.heading { margin: 0 -1000px 20px; padding: 10px; text-align: center; color: #464646; background: #ccc; line-height: 25px; font-size: 25px; font-weight: normal; } #main .panel-block p { margin: 0 0 20px; text-align: center; } #main .panel-list { margin: 0 -10px 0; xoverflow: hidden; } #main .panel { margin: 0 auto 20px; padding: 0; width: 365px; height: 247px; background: #eee; position: relative; text-align: left; vertical-align: middle; border: none; border-radius: 10px; } #main .panel-list { text-align: center; } x#main .panel-list .panel { margin: 0 10px 20px; float: left; } #main .panel-list .panel { margin: 0 5px 20px; display: inline-block; } #main .panel:hover { opacity: 0.4; cursor: pointer; } #main .panel .thumb { margin: 0 0 10px; width: 100%; height: 205px; overflow: hidden; text-align: center; vertical-align: middle; position: relative; border-radius: 10px 10px 0 0; } #main .panel .thumb img { margin: auto; object-fit: cover; max-width: none; width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 10px 10px 0 0; } #main .panel .title { padding: 0 20px 10px; text-align: center; line-height: 21px; font-size: 20px; font-size: 17px; } #main .panel .detail { padding: 3px 20px; } #main .panel .link { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #main .panel .link b { display: none !important; } #main .panel.is-review { height: 272px; } #main .panel.is-review .title { padding-top: 25px; } #main .panel.is-review .stars { margin-left: -50px; position: absolute; left: 50%; bottom: 40px; } #main .panel.view-all { text-align: center; } #main .panel.view-all a { line-height: 247px; color: #797979; display: block; xbackground: #ff0;} @media (min-width: 1560px) { #main .panel-block { max-width: 1520px; } /* 4 columns */ } @media (min-width: 1175px) { x #main .panel-block { max-width: 1135px; } /* 3 columns */ } @media (max-width: 500px) { #main .panel-block { padding: 0 10px; } #main .panel-list .panel { margin: 0 auto 20px; max-width: none; width: 100%; } } @media (max-width: 789px) { #main .panel-block { max-width: 365px; } /* 2 columns */ } @media (max-width: 385px) { #main .panel-block { max-width: 100%; } /* 1 column */ #main .panel { width: 100%; } /* 2018-09-29 txe start */ #main .panel-block { max-width: 100vw; } /* 2018-09-29 txe end */ } /* photo blocks */ #main .photo-block .panel { width: 750px; height: auto; } #main .photo-block .panel:hover { opacity: 1; cursor: auto; } #main .photo-block .detail { padding: 10px 10px; } #main .photo-block .image, #main .photo-block img { border-radius: 10px 10px 0 0 ; } #main .photo-block td.thumb img { border-radius: 10px; } #main .photo-block .detail a { color: #000; text-decoration: underline; font-weight: bold; } #main .photo-block .hide, #main .photo-block .show { position: absolute; right: 10px; top: 10px; width: 60px !important; background: #f00 !important; font-weight: bold !important; } #main .photo-block .is-hidden .image, #main .photo-block .is-hidden .embed-html { opacity: 0.3; } #main .photo-block .hidden-flag { margin-left: -150px; width: 300px; position: absolute; left: 50%; top: 10px; color: #f00; line-height: 35px; font-size: 30px; font-style: italic; font-weight: bold; } x#main .photo-block .description a:hover { color: #b64500; } x#main .photo-block .photo, x#main .photo-block .embed { position: relative; } #blocks .photo { border-radius: 10px; overflow: hidden; } @media (max-width: 789px) { #main .photo-block { padding: 0 10px; max-width: none; width: auto; } #main .photo-block .panel { margin: 0 auto 20px; max-width: none; width: 100%; } } #main .embed-block { margin: 0 0 30px; padding: 0; color: #333; border-radius: 10px; overflow: hidden; } #main .embed-block .heading { padding: 10px 10px 10px; xmin-height: 20px; xbackground: url(/images/photo-top-bg.png) 0 0 no-repeat; background: #eee; font-size: 17px; } #main .embed-block .embed-html { margin: 0 0 0 0; text-align: center; background: #000; } #main .embed-block .embed-html iframe { margin: 0px auto -3px; } #main .embed-block .description { padding: 5px 10px 15px; xbackground: url(/images/search-menu-background.png) 0 bottom no-repeat; background: #eee; } #main .embed-block .ref { margin: 3px 0 0; color: #999; font-style: italic; } #main .embed-block .ref a { text-decoration: underline; } #main .section { margin: 0 auto 20px; max-width: 950px; text-align: left; } #main .nav-blocks { margin-right: -20px; } #main a.create-post { margin: 20px auto; display: block; width: 150px; text-align: center; white-space: nowrap; text-decoration: underline; } /* footer */ #footer { margin: 0; background: #c6c6c6; text-align: center; clear: both; position: relative; font-size: 15px; } #footer-meat { margin: 0 auto; padding: 50px 77px 20px 210px; max-width: 503px; position: relative; } #footer-logo { position: absolute; left: 20px; top: 20px; } #footer-copyright { padding: 0 0 20px; color: #999; } #footer-nav { color: #464646; } #footer-nav a { margin: 0 3px; color: #464646; white-space: nowrap; } #footer-nav a:hover { color: #fff; text-decoration: underline; } #footer-facebook { margin-top: -23px; position: absolute; right: 20px; top: 50%; width: 47px; height: 47px; border: none; background: url(/images/facebook-icon-on-grey-47.png) 0 0 no-repeat; } #footer-facebook:hover { opacity: 0.5; } /* 2018-08-28 txe start */ #page { padding-top: 0; min-height: 100vh; overflow: hidden; position: relative; } header { padding-top: 15px; } article { padding-bottom: 134px; } #footer { position: absolute; left: 0; bottom: 0; width: 100%; } /* 2018-08-28 txe end */ @media (max-width: 720px) { /* 2018-09-13 txe start */ article { padding-bottom: 285px; } /* 2018-09-13 txe end */ #footer-meat { padding: 20px 0 90px; max-width: auto; } #footer-logo { margin: 0 auto 20px; position: static; } #footer-facebook { margin: 0 0 0 -23px; left: 50%; right: auto; top: auto; bottom: 20px; } } #admin-link { position: relative; bottom: 10px; color: #000; text-decoration: underline; } /* main content */ #main { xmargin: 0 10px 15px; position: relative; color: #464646; xline-height: 18px; } #main h1 { margin: 0 0 10px; color: #b64500; font-size: 16px; } #main h2 { margin: 10px 0; color: #b64500; } #main h3 { color: #b64500; font-size: 14px; } #main h1.heading, #main h2.heading { margin: 20px 0 10px; padding: 10px; color: #464646; background: #c6c6c6; text-align: left; font-weight: normal; } #main h1.boxless { margin: 1px -10px 20px; color: #655f47; line-height: 40px; background: #cac4aa; text-align: center; } #main div.box { margin: 0 auto 20px; padding: 10px; border: 1px solid #d4d3c1; border-radius: 10px; position: relative; } /* buttons */ a.button { display: block; width: 30px; height: 30px; border: 1px solid #CAC4AA; background: 50% 50% no-repeat; } a.button:hover { border-color: #06f; } a.button b { display: none; } a.submit, input.button { margin: 0 auto; padding: 0; display: block; background: #f60; width: 154px !important; height: 30px; border: none; text-align: center; color: #fff; white-space: nowrap; line-height: 30px; font-size: 15px; xfont-size: 14px; xfont-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; } a.submit:hover, input.button:hover { color: #000; } input.button { background-position: 0 2px; height: 32px; position: relative; top: -2px; } input.button, input.submit { cursor: pointer; } #main input.file { width: 80px; font-size: 15px; } /* firefox */ @media screen and (-webkit-min-device-pixel-ratio:0) /* chrome */ { #main input.file { width: 93px; } #main input.single-file { width: 87px; } } /* 2015-07-03 txe start */ @media all and (-ms-high-contrast:none) /* IE 10+ */ { *::-ms-backdrop, #main input.file { width: auto; } #main input.file::-ms-value { display: none; } } /* 2015-07-03 txe ed */ xinput.file:before { padding: 5px; display: inline-block; content: "Upload"; background: #eee; border: 1px solid #000; border-radius: 10px; cursor: pointer; } x #back { width: 30px; height: 30px; background-image: url(/images/back-30.gif); position: absolute; left: -5px; top: 4px; } #back { margin: 0 0 10px; position: static; background-image: url(/images/back-brown-82x24.gif); width: 82px; height: 24px; border: none; } #back:hover { opacity: 0.8; } #main div.box #back { top: 2px; } /* images */ #main .image { margin: 0 0 10px; xbackground: url(/images/image-frame-wide-article.jpg); text-align: center; } #main .image img { margin: 0 auto; display: block; xborder: 1px solid #E2EBDA; } #main .image .caption { margin: 0 auto; padding: 5px; width: 640px; background: #EDEBE1; border: solid #e2ebd1; border-width: 0 1px 1px 1px; text-align: left; } /* 2016-09-14 txe start */ #main .content-block { margin-bottom: 10px; } /* 2016-09-14 txe end */ /* photos */ #main .photo { margin: 0 0 30px; padding: 0; color: #333; } #main .photo .heading { padding: 10px; text-align: left; background: #c6c6c6; font-size: 17px; } #main .photo .image { margin: 0 2px 0 0; margin: 0; background: #e5e4d1; } #main .photo .image { xbackground: url(/images/narrow-image-background.jpg) 0 0 repeat-y; background: #eee; } #main .photo img { xmax-width: 750px; border: none; width: auto; height: auto; } #main .photo .description { padding: 10px; text-align: left; background: #c6c6c6; } /* 2018-09-03 txe start */ #main .embed-block .heading { background: #c6c6c6; } #main .embed-block .description { padding: 10px; background: #c6c6c6; } #main .photo .description p:last-child, #main .embed-block .description p:last-child { margin-bottom: 0; } /* 2018-09-03 txe end */ /* 2018-04-03 txe start */ /* #main .photo .description { padding: 5px 10px 15px; background: url(/images/search-menu-background.png) 0 bottom no-repeat; } #main .photo .description { background: #e1e0ce url(/images/photo-description-background.png) 0 bottom no-repeat; } */ /* 2018-04-03 txe end */ #main .photo .ref { margin: 3px 0 0; color: #999; font-style: italic; } #main .photo .ref a { text-decoration: underline; } #gallery { margin: 20px 0 30px; padding: 0 0 10px; background: #e5e4d1 url(/images/tall-background.png) 0 bottom no-repeat; position: relative; } #gallery .photo { margin: 0; padding: 0; } #gallery .photo .description { padding-top: 130px; background: none; } #gallery .not-active { display: none; } #gallery-thumbs { padding: 10px 10px 10px 20px; width: 700px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; position: absolute; left: 0;} #gallery-thumbs a { margin: 0 5px 0 0; display: inline !important; overflow-x: hidden;} #gallery-thumbs img { height: 80px; border: 1px solid #e5e4d1; } #gallery-thumbs .is-active img { border-color: #f60; } body.not-gallery-loaded #gallery img { display: none; } /* map */ #main .map { margin: 0 auto 30px; padding: 0 0 15px; max-width: 750px; background: #c6c6c6; position: relative; border-radius: 10px; } @media (max-width: 750px) { #main .map { margin: 0 -10px 30px; border-radius: 0; } } #main .map-menu { margin: 0 auto; padding: 10px; max-width: 700px; position: relative; } #main .map-menu b { display: none; } #main .map-filters { margin: 0; padding: 0; list-style: none; color: #000; column-count: 5; -moz-column-count: 5; -webkit-column-count: 5; } #main .map-filters li { margin: 0; padding: 0; display: inline-block; width: 160px; text-align: left; color: #000; font-size: 13px; } /* 2018-07-16 txe start */ #main .map-filters { column-count: 4; -moz-column-count: 4; -webkit-column-count: 4;} /* temporarily hid a column */ /* 2018-07-16 txe end */ #main .map-filters li input { margin-right: 0; position: relative; top: 1px; } #main .map-filters li span { padding-left: 22px; background: 0 50% no-repeat; background-size: 20px 20px; display: inline-block; } #main .map-filters li.route span { padding-left: 42px; background-position: 5px 50%; background-size: 30px 3px; } #main .map-filters li.tarmac span { background-image: url(/images/map-icons/grade-t.gif); } #main .map-filters li.grade1 span { background-image: url(/images/map-icons/grade-1.gif); } #main .map-filters li.grade2 span { background-image: url(/images/map-icons/grade-2.gif); } #main .map-filters li.grade3 span { background-image: url(/images/map-icons/grade-3.gif); } #main .map-filters li.grade4 span { background-image: url(/images/map-icons/grade-4.gif); } #main .map-filters li.grade5 span { background-image: url(/images/map-icons/grade-5.gif); } #main .map-filters li.fuel span { background-image: url(/images/map-icons/fuel.png); } #main .map-filters li.food span { background-image: url(/images/map-icons/food-supplies.png); } #main .map-filters li.sleep span { background-image: url(/images/map-icons/huts-public.png); } #main .map-filters li.attraction span { background-image: url(/images/map-icons/things-to-do.png); } #main .map-filters li.bikeshop span { background-image: url(/images/map-icons/bike-shops.png); } #main .map-filters li.bikehire span { background-image: url(/images/map-icons/bike-hire.png); } #main .map-filters li.info span { background-image: url(/images/map-icons/information.png); } #main .map-filters li.activity span { background-image: url(/images/map-icons/attraction.png); } #main .map-filters li.weathercam span { background-image: url(/images/map-icons/weathercam.png); } #main .map-filters li.free-tarmac span { background-image: url(/images/map-icons/grade-t.gif); } #main .map-filters li.free-grade1 span { background-image: url(/images/map-icons/grade-1.gif); } #main .map-filters li.free-grade2 span { background-image: url(/images/map-icons/grade-2.gif); } #main .map-filters li.free-grade3 span { background-image: url(/images/map-icons/grade-3.gif); } #main .map-filters li.free-grade4 span { background-image: url(/images/map-icons/grade-4.gif); } #main .map-filters li.free-grade5 span { background-image: url(/images/map-icons/grade-5.gif); } #main .map-canvas { margin: 0 auto; height: 500px; } #main .gm-style-iw img { margin-top: 5px; } #main .gm-style-iw a { color: #5F5943; text-decoration: underline; } #main .gm-style-iw a:hover { color: #b64500; } #main .map-reset { display: none; } #main .map-key-link { position: absolute; right: 35px; top: auto; bottom: 8px; text-decoration: underline; } #main .area-thumb { max-width: 250px; max-height: 200px; } /* map placeholders */ /* 2018-04-07 txe start */ x#main .map-placeholder { margin: 20px auto; max-width: 750px; text-align: left; } #main .map-placeholder { margin: 0px auto 20px; max-width: 750px; text-align: left; } x#main .map-placeholder h2 { margin: 0 auto 20px; text-align: center; text-transform: uppercase; color: #464646; font-size: 25px; font-weight: normal; } #main .map-placeholder h2 { margin: 0 auto 15px; color: #647983; font-size: 25px; font-weight: normal; } #main .map-placeholder p { margin: 0 0 10px; xcolor: #464646; xline-height: 19px; xfont-size: 15px; } #main .map-placeholder .submits { margin: 30px -10px; text-align: center; } #main .map-placeholder a.submit { margin: 0 10px 10px; padding: 5px 0; display: inline-block; width: 250px !important; width: 300px !important; background: #f90; } #main .map-placeholder .fake-map { text-align: center; } #main .map-placeholder img { max-width: 100vw; } @media (max-width: 790px) { x #main .map-placeholder .fake-map { xmargin: 30px 0; } #main .map-placeholder img { max-width: 100%; } } /* 2018-04-07 txe end */ #main dl { width: 100%; overflow: auto; } /* 2018-04-04 txe start */ #main dl { width: 750px; } /* 2018-04-04 txe end */ #main dt, #main dd { padding: 6px 0 6px; float: left; border-top: 1px solid #eee; } #main dt { width: 200px; overflow: hidden; white-space: nowrap; } #main dd { width: 550px; } #main dd a { color: #666; text-decoration: underline; } #main dd a:hover { color: #B64500; } @media (max-width: 790px) { #main dl { width: auto; } #main dt { width: 27.5%; white-space: nowrap; overflow: hidden; } #main dd { width: 72%; } } @media (max-width: 550px) { #main dl { width: auto; } #main dt { width: auto; white-space: normal; float: none; } #main dd { width: auto; white-space: normal; float: none; border: none; } } /* map key (popup) */ #map-key-popup { margin: 0 auto 0 -375px; padding: 0; left: 50%; top: 82px; width: 750px; border: none; } #map-key-popup a.close { position: absolute; right: 20px; top: 9px; color: #fff; text-decoration: underline; font-size: 12px; font-weight: bold; } #map-key-popup a.close:hover { opacity: 0.5; } #main #map-key { margin: 0 0 28px; padding: 0; height: 490px; background: #ddd; border-radius: 10px; position: relative; } #main #map-key h2 { margin: 0 0 10px; padding: 10px; background: #464646; color: #fff; text-align: center; border-radius: 10px; } #main #map-key h2 { font-size: 100%; } #main #map-key h3 { margin: 0 0 10px; color: #464646; text-align: left; } #main #map-key-grades { margin: 15px 0 0; } #main #map-key-grades h3 { margin-left: 20px; } #main #map-key-grades td { padding: 4px 2px; height: 25px; vertical-align: middle; white-space: nowrap; xfont-size: 12px; } #main #map-key-grades td:first-child { padding-left: 22px; } #main #map-key-grades td:last-child { padding-right: 22px; } #main #map-key-grades img { width: 25px; height: 3px; position: relative; top: -3px; } #main #map-key-grades td.description { padding-left: 5px; white-space: normal; } #main #map-key-grades tr:nth-child(odd) td { background: #eee; } #main #map-key .columns { padding: 15px 0 25px 20px; overflow: hidden; background: #eee; border-radius: 0 0 10px 10px; } #main #map-key .column { width: 175px; float: left; } #main #map-key ul { margin: 0; padding: 0; list-style: none; color: #333; } #main #map-key li { margin: 0; padding: 0 0 0 33px; line-height: 25px; xheight: 25px; position: relative; } #main #map-key li img { max-height: 30px; max-width: 30px; position: absolute; left: 0; top: -3px; } #main #map-key .small img { left: 6px; top: 4px; } #main #map-key-accommodations { width: 360px !important; overflow: hidden; } #main #map-key-accommodations h3 { padding-left: 80px; } #main #map-key-accommodations ul { width: 170px; float: left; } #main #unready-map { padding: 100px 0; background: #c3c3a9; border: none; text-align: center; font-size: 17px; font-weight: bold; } #main #locked-map { padding: 200px 0; background: url(/images/map-placeholder.jpg) 50% 50% no-repeat; border: none; text-align: center; font-size: 17px; font-weight: bold; } #main a.map-contribute { margin: -30px auto 30px !important; display: block !important; width: 280px !important; border-radius: 0 0 10px 10px !important; z-index: 9; } #main a.map-contribute { display: none !important; } @media (max-width: 790px) { #map-key-popup { margin: 0; width: auto; left: 0; } } #main #subscribe-button { margin: 10px auto 30px; padding: 10px; display: block !important; background: #f60; width: 350px !important; font-size: 18px; } #main #subscribe-buttons { margin: 40px auto 60px; text-align: center; } #main #subscribe-buttons a.submit { margin: 0 40px 0 0; padding: 10px; display: inline-block !important; width: 320px !important; background: #f60; font-size: 18px; } #main #subscribe-buttons a.submit:last-child { margin-right: 0; } /* stars */ #main .stars { width: 100px; overflow: hidden; } #main .stars .star { margin: 0 5px 0 0; width: 16px; height: 16px; background: url(/images/star-grey-16.gif) 0 0 no-repeat; float: left; } #main .stars .star .fill { margin: 0; width: 16px; height: 16px; background: url(/images/star-yellow-16.gif) 0 0 no-repeat; } #main .stars .star b { display: none; } #main .stars .star:last-child { margin: 0; } /* user info */ #main .user-info th { padding: 2px 2px 4px; width: 110px; border-bottom: 1px dotted #eee; font-weight: normal; } #main .user-info td { padding: 2px 2px 4px !important; width: 160px; border-bottom: 1px dotted #eee; color: #999; } #main .user-info tr:first-child th, #main .user-info tr:first-child td { border-top: 1px dotted #eee; } #main .user-info a { color: #999; } #main .user-info a:hover { color: #900; text-decoration: underline; } /* user contributions */ #main .contribution { margin: 0; padding: 2px; width: 170px; border-bottom: 1px dotted #eee; white-space: nowrap; overflow: hidden; line-height: 18px; } #main .contribution:first-child { border-top: 1px dotted #eee; } #main .contribution .label { margin: 0; padding: 0; width: 60px; display: block; float: left; text-align: left; color: #333; } #main .contribution .count { margin: 0; padding: 0; width: 60px; display: block; float: left; text-align: center; color: #999; } #main .contribution .view { margin: 1px 0 0 0; padding: 2px 5px; display: block; float: left; width: 40px !important; height: 12px; background: #464646; border-radius: 5px; text-align: center; color: #fff; line-height: 12px; font-size: 12px; font-weight: bold; } #main .contribution .view:hover { opacity: 0.5; } #main .contributions-2-rows { width: 380px; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } #main .contributions-2-rows .contribution:nth-child(4) { border-top: 1px dotted #eee; } /* 2016-08-30 txe start */ x#main .contributions-2-rows .contribution:only-child { position: relative; left: 100px; } /* breaks in Chrome */ /* 2016-08-30 txe end */ #main .user-info, #main .user-info th, #main .user-info td, #main .contributions, #main .contributions th, #main .contributions td { line-height: 18px; font-size: 13px; } /* points */ #point-info h2.heading { margin: 0 0 20px; padding: 10px; background-image: none; line-height: 13px; text-align: center; } #point-info h3 { margin: 20px 0 20px; padding: 10px; background: #464646; color: #fff; border-radius: 10px 0 10px 10px; text-align: center; position: relative; } #point-info h3::before { width: 100%; height: 20px; content: " "; background: url(/images/flair-up-dark-brown.gif) right bottom no-repeat; position: absolute; left: 0; top: -20px; } /* 2016-08-08 txe start */ /* #store-items { margin: 0 auto 30px; width: 520px; } #store-items table { margin: 0 auto; color: #464646; } #store-items th { padding: 10px 0; background: #c3c3a9; text-align: center; font-size: 12px; } #store-items th:first-child { border-radius: 10px 0 0 0; } #store-items th:last-child { border-radius: 0 10px 0 0; } #store-items td { width: 120px; border-bottom: 1px solid #f3f3d9; text-align: center; font-size: 18px; font-weight: bold; } #store-items td.price { width: auto; } #store-items td.price span { font-size: 12px; font-weight: normal; } #store-items td.buy a.submit { margin: 0 auto; padding: 7px 0; display: block; width: 110px !important; height: auto; background: #464646; color: #fff; border-radius: 5px; line-height: 12px; font-size: 14px; font-weight: normal; font-family: Roboto Condensed,Verdana,Arial,Helvetica,sans-serif; } #store-items td.buy a:hover { opacity: 0.5; } #store-items .sandbox { position: relative; top: 5px; color: #f60; font-weight: normal; font-size: 13px; font-style: italic; } */ #point-items { margin: 0 auto 30px; width: 520px; } #point-items table { margin: 0 auto; color: #464646; } #point-items th { padding: 10px 0; background: #c3c3a9; text-align: center; font-size: 12px; } #point-items th:first-child { border-radius: 10px 0 0 0; } #point-items th:last-child { border-radius: 0 10px 0 0; } #point-items td { width: 120px; border-bottom: 1px solid #f3f3d9; text-align: center; font-size: 18px; font-weight: bold; } #point-items td.price { width: auto; } #point-items td.price span { font-size: 12px; font-weight: normal; } #point-items td.buy a.submit { margin: 0 auto; padding: 7px 0; display: block; width: 110px !important; height: auto; background: #464646; color: #fff; border-radius: 5px; xline-height: 12px; xfont-size: 14px; font-weight: normal; xfont-family: Roboto Condensed,Verdana,Arial,Helvetica,sans-serif; } #point-items td.buy a:hover { opacity: 0.5; } #point-items td.sandbox a.submit { background: #f90; } /* 2016-08-08 txe end */ #main .point-tiers { overflow: hidden; } #main .point-tiers .tier { margin: 0 8px; width: 170px; xheight: 300px; float: left; background: #C3C3A9; border-radius: 10px; color: #464646; } #main .point-tiers .title { padding: 5px; background: #464646; color: #fff; text-align: center; border-radius: 10px 10px 0 0; } #main .point-tiers .count { padding: 15px 10px 10px; text-align: center; } #main .point-tiers .count b { margin-bottom: 5px; display: block; font-size: 35px; } #main .point-tiers .detail { padding: 10px; height: 75px; background: #e6e3d0; line-height: 15px; font-size: 12px; } #main .point-tiers .examples { padding: 5px 10px; } #main .point-tiers .examples a { margin: 5px auto; background: #464646; color: #e6e3d0; border-radius: 10px; font-size: 14px; font-weight: normal; font-family: Roboto Condensed,Verdana,Arial,Helvetica,sans-serif; } #main .point-tiers .examples a:hover { opacity: 0.5; } #main .bonus-point-info { margin: 20px auto; background: url(/images/thumb-box.png) 0 0 no-repeat; width: 506px; height: 185px; } #main .bonus-point-info h3 { display: none; } #main .bonus-point-info p { padding: 90px 10px 0 195px; line-height: 16px; color: #464646; font-size: 14px; } /* ads */ #main .ac-group h2 { margin: 30px 0 20px; padding: 10px; background: #c6c6c6; color: #464646; position: relative; line-height: 20px; font-weight: normal; } #main .ac { margin: 0 0 20px; background: #eee; } #main .ac td { padding: 10px; vertical-align: top; } #main .ac .ac-thumb { width: 150px; height: 113px; } #main .ac .ac-thumb a:hover { opacity: 0.5; } #main .ac div { text-align: left; xfont-size: 14px; xfont-family: Roboto Condensed,Verdana,Arial,Helvetica,sans-serif; } #main .ac .ac-content { padding: 10px 0; } #main .ac .ac-heading { padding: 10px; background: #c6c6c6; font-weight: bold; } #main .ac .ac-blurb { padding: 5px; min-height: 40px; } #main .ac .ac-link { text-align: center; } #main .ac .ac-link a { font-weight: normal; xfont-size: 14px; xfont-family: Roboto Condensed,Verdana,Arial,Helvetica,sans-serif; } /* banner ads */ #main .bac { margin: 10px auto 0; text-align: center; } #main .bac a:hover { opacity: 0.5; } /* affiliates */ /* 2017-08-20 txe start */ /* #main .af-group { margin-bottom: -25px; } #main .af-group h2 { margin-top: 30px; padding: 10px; background: #464646; color: #fff; border-radius: 10px 0 10px 10px; position: relative; line-height: 20px; font-weight: normal; } #main .af-group h2::before { width: 100%; height: 20px; content: " "; background: url(/images/flair-up-dark-brown.gif) right bottom no-repeat; position: absolute; left: 0; top: -20px; } #main .af-group p { margin: 0 10px 20px; } #main .af-links { margin: 0 -6px 0; } #main .af-link { margin: 0 6px 40px; display: inline-block; position: relative; } #main .af-link a:hover { opacity: 0.5; } #main .af-link img { border: 2px solid #ccc; border-radius: 10px; } #main .af-link .submit { margin-left: -77px; position: absolute; left: 50%; bottom: -10px; width: 154px; font-weight: normal; font-size: 14px; font-family: Roboto Condensed,Verdana,Arial,Helvetica,sans-serif; } #main .af-link div.submit { padding: 5px 0; background: #464646; color: #fff; border-radius: 5px; text-align: center; } */ #main .af-group { margin: 70px 0; } /* 2017-09-22 txe start */ /* #main .af-group h2 { margin: 30px 0 20px; padding: 15px; background: #2c5bb0; color: #fff; text-align: center; border-radius: 5px; line-height: 20px; font-size: 20px; font-weight: normal; } */ #main .af-group h2 { margin-top: 30px; padding: 10px; background: #464646; color: #fff; border-radius: 10px 0 10px 10px; position: relative; line-height: 20px; font-weight: normal; } #main .af-group h2::before { width: 100%; height: 20px; content: " "; background: url(/images/flair-up-dark-brown.gif) right bottom no-repeat; position: absolute; left: 0; top: -20px; } /* 2017-09-22 txe end */ #main .af-group p { margin: 0 10px 20px; } #main .af-links { margin: 0 -6px 20px; text-align: center; } #main .af-link { margin: 0 6px 30px; display: inline-block; position: relative; } #main .af-link a:hover { opacity: 0.5; } #main .af-link img { border: 2px solid #ccc; border-radius: 10px; } #main .af-link div.submit { margin-left: -92px; padding: 15px 0; position: absolute; left: 50%; bottom: -20px; width: 184px; border-radius: 5px; text-align: center; background: #2c5bb0; color: #fff; xfont-size: 18px; font-weight: normal; xfont-family: Roboto Condensed,Verdana,Arial,Helvetica,sans-serif; } /* 2017-08-20 txe end */ /* 2017-09-07 txe start */ /* 2017-09-22 txe start */ /* #main a.product-link { margin: 20px auto; padding: 5px 0; width: 250px; border-radius: 5px; text-align: center; background: #2c5bb0; color: #fff; line-height: 28px; font-size: 18px; font-weight: normal; font-family: Roboto Condensed,Verdana,Arial,Helvetica,sans-serif; } #main a.link-button { margin: 20px auto 30px; padding: 5px 0; width: 250px; border-radius: 5px; text-align: center; background: #2c5bb0; color: #fff; line-height: 28px; font-size: 18px; font-weight: normal; font-family: Roboto Condensed,Verdana,Arial,Helvetica,sans-serif; } */ #main a.product-link, #main a.link-button { margin: -23px auto 50px; padding: 5px 0; width: 250px; border-radius: 5px; text-align: center; background: #2c5bb0; color: #fff; line-height: 28px; xfont-size: 18px; font-weight: normal; xfont-family: Roboto Condensed,Verdana,Arial,Helvetica,sans-serif; } /* 2017-09-22 txe end */ /* 2017-09-08 txe end */ /* banners */ #main .banner-group { margin-bottom: -25px; } #main .banner-group h2 { margin-top: 30px; padding: 10px; background: #464646; color: #fff; border-radius: 10px 0 10px 10px; position: relative; line-height: 20px; font-weight: normal; } #main .banner-group h2::before { width: 100%; height: 20px; content: " "; background: url(/images/flair-up-dark-brown.gif) right bottom no-repeat; position: absolute; left: 0; top: -20px; } #main .banner-group p { margin: 0 10px 20px; } #main .banner-links { margin: 0 -6px 0; } #main .banner-link { margin: 0 6px 30px; display: inline-block; position: relative; } #main .banner-link a:hover { opacity: 0.5; } #main .banner-link img { border: 2px solid #ccc; border-radius: 10px; } #main .banner-link .submit { margin-left: -77px; position: absolute; left: 50%; bottom: -10px; width: 154px; font-weight: normal; font-size: 14px; font-family: Roboto Condensed,Verdana,Arial,Helvetica,sans-serif; } #main .banner-link div.submit { padding: 5px 0; background: #464646; color: #fff; border-radius: 5px; text-align: center; } /* 2015-10-27 txe start */ #main .banner-group-bottom { margin: 40px 0 -0 !important; } #comments .banner-group-bottom { margin-bottom: -25px !important; } /* 2015-10-27 txe end */ #main .map-placeholder a:hover { opacity: 0.7; } #main .photo-placeholder { margin: 20px 0; } #main .photo-placeholder a { padding: 150px 180px; display: block; border: 2px solid #d3d4b5; border-radius: 3px; } #main .photo-placeholder b { padding: 20px; display: block; border: 2px solid #d3d4b5; border-radius: 10px; color: #333; line-height: 23px; xfont-size: 17px; font-weight: normal; xfont-family: Roboto Condensed,Verdana,Arial,Helvetica,sans-serif; } #main .photo-placeholder a:hover { opacity: 0.7; } /* 2017-08-09 txe start */ #main .photo-placeholder { text-align: center; } /* 2017-08-09 txe end */ #main a.submit.join, #main a.submit.activate { margin: 20px auto; width: 170px !important; height: 40px; line-height: 40px; background: #eb5c00; font-size: 16px; } #main a.submit:hover { cursor: pointer; } /* 2016-08-17 txe end */ /* popups */ #page-blocker { z-index: 9998; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(/images/translucent-grey.gif) 0 0 repeat; } .popup { z-index: 9999; position: absolute; left: 0; top: 0; background: #fff; border: 1px solid #D4D3C1; border-radius: 10px; text-align: center; font-weight: normal; } .popup .box { margin: 0 0 6px; background: #fff; position: relative; clear: both; } .popup h4 { margin: 2px 5px 4px; color: #f60; font-size: 14px; } .popup ul { list-style: none; text-align: left; line-height: 1.4em; font-size: 12px; } .popup a { color: #369; } .popup a:hover { color: #900; } .popup .close { clear: both; position: relative; font-size: 11px; } #main .photo-popup-context { position: relative; } #main .photo-popup { margin: 0; padding: 20px 20px 10px; width: 750px; background: #fff; border-radius: 10px; text-align: center; z-index: 999999; } #main .photo-popup img { margin: 0 auto 5px !important; width: auto !important; height: auto !important; max-width: 750px !important; max-height: 2000px !important; display: block; } /* video popups */ /* a.video-help { width: 30px; height: 30px; background-image: url(../images/projector-30.gif); position: absolute; right: 8px; top: 3px; } */ #video-popup { padding: 0; width: 1020px; height: 757px; position: absolute; xleft: -250px; xtop: -220px; border: 1px solid #ccc; border-radius: 0; } #video-popup .close { position: absolute; right: -35px; top: 0; width: 25px; height: 25px; background: #fff url(/images/close-25.gif) no-repeat; z-index: 99999; } .navless #video-popup { left: -26px; } #cs_noexpressUpdate { margin: 0 auto; padding: 40px; width: 210px; height: 200px; background: url(/images/camtasia-panel.gif) no-repeat; text-align: left; color: #030; font-family: Arial, Helvetica, sans-serif; font-size: x-small; } /* #main .video-index-popup { padding: 18px 30px 20px; position: absolute; top: 25px; right: 30px; } #main .video-index-popup h4 { margin: 0 0 5px; padding: 0; text-align: left; } #main .video-index-popup ul { margin: 0; padding: 0; } #main .video-index-popup li { margin: 0; padding: 0; } #main .video-index-popup .close { display: none; } #main .multicolumn-video-index-popup { width: 900px; } #main .multicolumn-video-index-popup h4 { color: #2877B7; text-align: center; } #main .multicolumn-video-index-popup h5 { margin: 10px 0 5px; color: #f60; text-align: left; font-size: 13px; } #main .video-index-popup .popup-column { width: 250px; float: left; } */ /* mobile */ #main .input-proxy { position: absolute; border: none !important; } body.not-mobile .if-mobile { display: none; } #main .popup .manual { margin: 10px auto 10px; padding: 5px; width: 300px; border: 1px solid #CAC4AA; border-radius: 10px; background: #EDF4FC; } #main .popup .manual-input { width: 140px; } #main .popup .manual-go { width: 40px !important; } #main .need-permission { margin: 50px auto 0 !important; width: 500px; background: #fee; } #main .need-permission h1 { text-align: center; color: #f00 !important; } #main .need-permission a { text-decoration: underline; } #wait { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(/images/translucent-grey.gif) 0 0 repeat; } #wait .box { margin: 0 auto; padding: 30px 10px; width: 300px; text-align: center; font-size: 15px; position: fixed; top: 100px; background: #fff; line-height: 25px; font-size: 20px; } /* help popups */ #main a.help-link { margin: 0 auto 20px; padding: 5px 10px 7px; display: block; width: 130px; background: #0a0; border-radius: 5px; text-align: center; color: #fff; text-decoration: none; } #main a.help-link b { font-weight: normal; } #main a.help-link:hover { opacity: 0.5; } #main div.help-popup { padding: 10px 20px 7px; width: 750px; max-height: 660px; overflow-y: auto; text-align: left; } #main div.help-popup div.photo { margin-bottom: 10px; } #main div.help-popup div.image { background: none; } #main div.help-popup a.close { margin-left: 365px; font-size: 13px; } #main div.help-popup a.close b { font-weight: normal; } /* donations */ /* 2016-12-12 txe start */ #main .donate { position: relative; min-height: 170px; } #main .donate h2.heading { margin: 20px 0 20px; padding: 10px; background: #464646; color: #fff; border-radius: 10px 0 10px 10px; position: relative; line-height: 20px; } #main .donate h2.heading::before { width: 100%; height: 20px; content: " "; background: url(/images/flair-up-dark-brown.gif) right bottom no-repeat; position: absolute; left: 0; top: -20px; } #main .donate .donate-thumb { top: 50px; } #main .donate .donate-detail { margin: 0 165px; } #main .donate .donate-form { position: absolute; right: 0; top: 50px; width: 150px; } #main .donate .donate-form select { margin: 15px 0 15px; display: block; width: 100%; text-align: right; } #main .donate .donate-form input.button { background: #f90; } /* 2016-12-12 txe end */ /* super */ #main .super-only, #main .is-super-only { color: #f60; } /* 2018-01-05 txe start */ @media only screen and (max-width: 800px) { #header { overflow: hidden; } #header, #body { width: 100%; } #left { width: auto; float: none; } #main .map-menu { height: 0px; } #main .map-menu b, #main .map-filters, #main .map-key-link, #right { display: none !important; } /* #footer { height: 50px; background: #464646; } #footer-nav { top: 25px; } #footer #facebook-follow { display: none; } */ x#main .map-placeholder img { max-width: 100%; } } /* 2018-01-05 txe end */ a.submit, input.button, input.submit, select, option { font-size: 14px; } /* 2018-07-01 txe start */ #main .content-block ul { margin: 0 0 10px 20px; } #main .content-block ul li { list-style-type: disc; } /* 2018-07-01 txe end */ /* 2018-09-19 txe start */ #super-stats { margin: 50px auto 20px; padding: 10px; width: 200px; text-align: center; background: #fed; border: 1px solid #f60; border-radius: 10px; } #super-stats h3 { margin: -10px -10px 10px; padding: 5px; background: #f60; color: #fff !important; border-radius: 10px 10px 0 0; } /* 2018-09-19 txe end */