@font-face { font-family: 'din-medium'; src: url('/assets/Fonts/din.eot'); src: url('/assets/Fonts/din.eot?#iefix') format('embedded-opentype'), url('/assets/Fonts/din.woff') format('woff'), url('/assets/Fonts/din.ttf') format('truetype'), url('/assets/Fonts/din.svg#din-medium') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'din-regular'; src: url('/assets/Fonts/din-reg.eot'); src: url('/assets/Fonts/din-reg.eot?#iefix') format('embedded-opentype'), url('/assets/Fonts/din-reg.woff') format('woff'), url('/assets/Fonts/din-reg.ttf') format('truetype'), url('/assets/Fonts/din-reg.svg#din-reg') format('svg'); font-weight: normal; font-style: normal; } .backface-visible { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } #famousOverlay { position:fixed; top: 0; width: 100%; height: 100%; margin:0; } #yield { display:none; } #toast { display: none; } /*.animations { -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s; -ms-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -ms-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; }*/ .mapElement { display: none; } .mapPage .mapElement, .topicPage .mapElement { display: block; } .mapPage .mapElementHidden { display:none; } /* loading */ #loading { width: 28px; height: 28px; position: fixed; top: 50%; margin-left: -14px; left: 50%; margin-top: -14px; } /* end loading */ /* logo */ .footer { z-index: 3; } .logo { color: #9E9E9E; font-family: "vinyl", sans-serif; font-style: italic; text-transform: uppercase; font-weight: 400; font-size: 30px; line-height: 30px; text-align: center; } .bottomLinks { color: #9e9e9e; font-size: 12px; text-align: center; list-style: none; } .bottomLinks li { display: inline-block; cursor:pointer; } .bottomLinks li a { color: #9e9e9e; } /* end logo */ /* upperLeftUI */ .upperLeftUI { position: fixed; top: 10px; left: 24px; z-index:3; box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24); border-radius: 2px; } .explorePage .upperLeftUI { box-shadow: none; } .unauthenticated .homePage .homeButton { display:none; } .homeButton { width: 40px; height: 32px; background-color: #757575; background-image: url(home_light.png); background-repeat: no-repeat; background-position: center center; border-top-left-radius: 2px; border-bottom-left-radius: 2px; float:left; } .homeButton:hover { background-image: url(home_light.png); } .homeButton a { display:block; width: 40px; height: 32px; } /* search */ .sidebarSearch { float:left; height: 32px; position: relative; } #searchLoading { height: 24px; width: 24px; position: absolute; top: 4px; right: 76px; display: none; } .unauthenticated .homePage .sidebarSearchIcon { border-radius: 2px; } .sidebarSearchIcon { float: left; width: 72px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; height: 32px; background: #4fb5c0 url('search.png') no-repeat center center; background-size: 32px 32px; cursor: pointer; } .sidebarSearch .twitter-typeahead, .sidebarSearch .sidebarSearchField { float: left; } .unauthenticated .homePage .sidebarSearchField, .unauthenticated .homePage .sidebarSearch .tt-hint { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .explorePage .sidebarSearchField, .explorePage .sidebarSearch .tt-hint { width: 380px; padding: 5px 10px 5px 10px; } .sidebarSearchField { color: #424242; } .sidebarSearch .tt-hint { color: transparent; } .sidebarSearchField, .sidebarSearch .tt-hint { height: 20px; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD; border-left: none; border-right: none; padding: 5px 0 5px 0; width: 0px; margin: 0; outline: none; font-size: 14px; line-height: 14px; background: #FFFFFF; font-family: 'din-medium', helvetica, sans-serif; } .sidebarSearch .tt-dropdown-menu { top: 40px !important; background: #F5F5F5; width: 472px; overflow-y: visible; overflow-x: visible; box-shadow: 0 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24); } .autoOptions #mapContribs { width: 15px; height: 15px; border: 1px solid #424242; margin-top: 4px; margin-left: 4px; } .mapContributorsIcon span { margin-left: 5px; } .mapContributorsIcon li span { margin-left: 10px; } .searchHeader { height: 42px; width: 100%; position: relative; } .searchTopicsHeader { background: #4fc4a8; } .searchMapsHeader { background: #994fc0; } .searchMappersHeader { background: #c04f4f; } .sidebarSearch .tt-dropdown-menu h3 { text-transform: uppercase; color: #F5F5F5; font-size: 18px; line-height: 18px; margin: 12px 0 3px 16px; float: left; } .sidebarSearch .tt-dropdown-menu .limitToMe { float: left; width: 12px; height: 12px; border: 1px; color: #000000; position: absolute; top: 15px; left: 136px; } .sidebarSearch .tt-dropdown-menu .limitToMeLabel { float: left; font-family: 'din-medium', helvetica, sans-serif; font-size: 12px; color: #f5f5f5; margin: 0; position: absolute; top: 15px; left: 156px; } .sidebarSearch .tt-dropdown-menu .minimizeResults, .sidebarSearch .tt-dropdown-menu .maximizeResults { width: 32px; height: 32px; background-image: url(arrowpermswhite_sprite.png); background-repeat: no-repeat; cursor: pointer; position: absolute; top: 5px; left: 410px; } .sidebarSearch .tt-dropdown-menu .minimizeResults { background-position: 0 0; } .sidebarSearch .tt-dropdown-menu .maximizeResults { background-position: -32px 0; } .sidebarSearch .tt-suggestions { overflow: visible; } .sidebarSearch .tt-suggestion { position: relative; background: #FFF; padding: 8px 0; } .sidebarSearch .tt-is-under-cursor, .sidebarSearch .tt-is-under-mouse-cursor { background: #E0E0E0; } .resultmap, .resulttopic, .resultmapper, .resultnoresult { min-height: 48px; display: table; } /*.sidebarSearch .tt-dataset-maps .tt-is-under-cursor .resultmap, .sidebarSearch .tt-dataset-maps .tt-is-under-mouse-cursor .resultmap, .sidebarSearch .tt-dataset-topics .tt-is-under-cursor .resulttopic, .sidebarSearch .tt-dataset-topics .tt-is-under-mouse-cursor .resulttopic { min-height: 48px; }*/ .sidebarSearch .tt-suggestion .searchResIconWrapper { display: table-cell; vertical-align: middle; height: 32px; padding: 0 8px; } .sidebarSearch .tt-suggestion .icon { width: 32px; height: 32px; border-radius:16px; } .sidebarSearch .topicMetacode { display: table-cell; vertical-align: middle; padding: 0 0 0 8px; max-width: 70px; } .sidebarSearch .tt-dataset-topics .topicIcon { width: 32px; height: 32px; } .sidebarSearch .tt-dataset-topics .tt-is-under-cursor .topicIcon, .sidebarSearch .tt-dataset-topics .tt-is-under-mouse-cursor .topicIcon { margin: 0 auto; } .sidebarSearch .tt-dataset-topics .metacodeTip { display: none; } .sidebarSearch .tt-dataset-topics .tt-is-under-cursor .metacodeTip, .sidebarSearch .tt-dataset-topics .tt-is-under-mouse-cursor .metacodeTip { display: block; font-family: 'vinyl'; text-transform: uppercase; font-style: italic; font-size: 13px; margin: 0 5px 0 2px; text-align: center; } .sidebarSearch .tt-dataset-mappers .tt-suggestion .icon { margin: 4px 9px 4px 4px; } .sidebarSearch .tt-dataset-mappers .resultText { width: 150px; } .sidebarSearch .resultText { width: 260px; display: table-cell; padding-left: 8px; vertical-align: middle; word-wrap: break-word; } .sidebarSearch .resultTitle { font-weight: normal; font-size: 16px; line-height: 20px; width: 100%; font-family: 'din-regular', helvetica, sans-serif; } .sidebarSearch .resultDesc { font-size: 12px; line-height: 16px; width: 100%; font-style: italic; font-family: helvetica, sans-serif; } .sidebarSearch .tip { display: none; } .sidebarSearch div.autoOptions { width: 114px; height: 48px; position: absolute; display: none; top: 8px; right: 0; } .tt-dataset-maps div.autoOptions { width: 84px; } .sidebarSearch .tt-dataset-mappers .autoOptions { width: 235px; } .sidebarSearch .tt-is-under-cursor .autoOptions, .sidebarSearch .tt-is-under-mouse-cursor .autoOptions { display: block; } .sidebarSearch .tt-suggestion .resultnoresult .autoOptions { display: none; } .sidebarSearch .autoOptions button, .sidebarSearch .autoOptions a, .sidebarSearch .autoOptions div { position: absolute; padding: 0; margin: 0; border: none; outline: none; } .sidebarSearch button.addToMap { display:none; width: 24px; height: 24px; background: url(addtopic_sprite.png); background-repeat: no-repeat; background-size: 48px 24px; top: 12px; left: 80px; cursor: pointer; } .canEditMap button.addToMap { display: block; } .sidebarSearch button.addToMap:hover { background-position: -24px; } .sidebarSearch div.topicCount { width: 24px; height: 24px; background: url(topic16.png); background-repeat: no-repeat; background-position: 0 center; top: 0; left: 0; padding-left: 18px; font-size: 12px; line-height: 24px; } .sidebarSearch div.mapCount { width: 24px; height: 24px; background: url(metamap16.png); background-repeat: no-repeat; background-position: 0 center; left: 0; padding-left: 20px; font-size: 12px; line-height: 24px; } .sidebarSearch div.synapseCount { width: 24px; height: 24px; background: url(synapse16.png); background-repeat: no-repeat; background-position: 0 center; top: 24px; left: 0; padding-left: 20px; font-size: 12px; line-height: 24px; } .sidebarSearch div.topicOriginatorIcon { width: 18px; height: 18px; padding: 3px; top: 0; left: 44px; } .sidebarSearch .topicOriginatorIcon img { border-radius: 9px; } .sidebarSearch .topicOriginatorIcon .tip { left: 30px; right: auto; top: 1px; } .sidebarSearch .tip { position: absolute; background: #424242; width: auto; top: 2px; right: 25px; color: white; white-space: nowrap; border-radius: 2px; font-size: 12px !important; font-family: 'din-regular'; line-height: 12px; padding: 4px 4px 4px; z-index: 100; } .sidebarSearch .hoverForTip:hover .tip { display: block; } .sidebarSearch .mapContributorsIcon .tip { left: 40px; right: auto; top: -5px; padding-top: 5px; padding-bottom: 5px; } .sidebarSearch .hoverForTip .tip li { padding-left: 28px; padding-top: 4px; } .tipUserImage { position: absolute; top: 0px; left: 7px; border-radius: 14px; } .sidebarSearch .hoverForTip .tip:before { content: ''; position: absolute; width: 0; height: 0; border-right: 4px solid #424242; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .sidebarSearch .hoverForTip.addToMap .tip { right: 30px; } .sidebarSearch .hoverForTip.addToMap .tip:before { right: -4px; border-left: 4px solid #424242; border-right: none; } .sidebarSearch .mapContributorsIcon .tip:before { top: 65px; left: -4px; margin-top: -53px; } .sidebarSearch .topicOriginatorIcon .tip:before { top: 58px; left: -4px; margin-top: -53px; } .sidebarSearch .mapContributorsIcon .mapContributors { top: auto; right: 0; bottom: 21px; white-space: normal; width: 200px; } .sidebarSearch div.mapContributorsIcon { height: 24px; top: 0; left: 44px; font-size: 12px; line-height: 24px; } .sidebarSearch div.topicPermission, .sidebarSearch div.mapPermission { width: 24px; height: 24px; background-image: url(permissions32_sprite.png); background-repeat: no-repeat; background-size: 72px 48px !important; top: 24px; left: 44px; } .sidebarSearch div.topicPermission.commons, .sidebarSearch div.mapPermission.commons { background-position: 0 0; } .sidebarSearch div.topicPermission.public, .sidebarSearch div.mapPermission.public { background-position: -48px 0; } .sidebarSearch div.topicPermission.private, .sidebarSearch div.mapPermission.private { background-position: -24px 0; } .sidebarSearch .tt-dataset-mappers div.mapCount { top: 8px; left: 170px; } .sidebarSearch .tt-dataset-mappers div.mapperCreated { left: 0px; padding-left: 0px; font-size: 12px; font-family: 'din-medium', helvetica, sans-serif; line-height: 24px; } .sidebarSearch .tt-dataset-mappers div.mapperGeneration { top: 20px; left: 0px; padding-left: 0px; font-size: 12px; font-family: 'din-medium', helvetica, sans-serif; line-height: 24px; } /* end search */ /* end upperLeftUI */ /* upperRightUI */ .upperRightUI { position: fixed; top: 10px; right: 24px; z-index:4; } .upperRightUI .upperRightEl { float: left; } .upperRightBox { position: fixed; top:52px; right:24px; background-color: #E0E0E0; border-radius: 2px; box-shadow: 0 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16); } .upperRightMapButtons { position: relative; top: -42px; /* puts it just offscreen */ } .mapPage .upperRightMapButtons, .topicPage .upperRightMapButtons { top: 0; } .topicPage .sidebarCollaborate { display: none; } .upperRightIcon { width: 32px; height: 32px; background-image: url('topright_sprite.png'); background-repeat: no-repeat; cursor: pointer; } .sidebarCollaborateIcon { background-position: 0 0; display: none; } .sidebarCollaborateIcon.blue { background-position: -32px 0; } .sidebarCollaborateIcon.blue:hover { background-position: -32px -32px; } /* only show the collaborate icon on commons */ .commonsMap .sidebarCollaborateIcon { display: block; } .sidebarFilterIcon { background-position: -64px 0; } .sidebarForkIcon { background-position: -96px 0; } .addMap { background-position: -128px 0; margin-right:10px; } .sidebarFilterIcon:hover { background-position: -64px -32px; } .sidebarForkIcon:hover { background-position: -96px -32px; } .addMap:hover { background-position: -128px -32px; margin-right:10px; } /* end upperRightUI */ /* yield */ .famousYield { overflow-y:auto; } /* homepage */ .homeWrapper { width: 560px; margin: 56px auto 72px; color: #424242; } .homeTitle { font-size: 48px; line-height: 48px; text-align: center; margin-bottom: 20px; } .homeIntro { font-size: 23px; line-height: 26px; text-align: justify; margin-bottom: 20px; } .homeWrapper .green { color: #4fc059; } .homeVideo { margin-bottom: 20px; } .callToAction a { display: block; width: 220px; height: 12px; padding: 16px 0; text-align: center; border-radius: 2px; font-size: 12px; box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24); margin: 0 auto; color: #FFFFFF; } .callToAction .requestInviteCTA { background-color: #4fc059; margin-bottom: 15px; } .callToAction .requestInviteCTA:hover { background-color: #49ad4e; } .callToAction .exploreFeaturedCTA { background-color: #a354cd; } .callToAction .exploreFeaturedCTA:hover { background-color: #9150bc; } .github-fork-ribbon-wrapper { display:none; } .homePage .github-fork-ribbon-wrapper { display: block; } /* end home page */ /* infoAndHelp */ .mapPage .infoAndHelp, .topicPage .infoAndHelp { right: 70px; } .mapPage .openCheatsheet .tooltipsAbove, .topicPage .openCheatsheet .tooltipsAbove { left: 29px; } .infoAndHelp { position: fixed; bottom: 20px; right: 20px; z-index: 3; width: auto; font-style: italic; height: 32px; } .infoElement { float:left; width: 32px; height:32px; cursor: pointer; } .openCheatsheet { background-image: url('help_sprite.png'); background-repeat:no-repeat; } .openCheatsheet:hover { background-position: 0 -32px; } .mapInfoIcon { position: relative; top: 56px; /* puts it just offscreen */ background-image: url('mapinfo_sprite.png'); background-repeat:no-repeat; } .mapInfoIcon:hover { background-position: 0 -32px; } .mapPage .mapInfoIcon { top: 0; } /* end infoAndHelp */ /* mapControls */ .mapControls { position: fixed; bottom: 24px; right:-32px; /* puts it just offscreen */ width:32px; z-index: 3; } .mapPage .mapControls, .topicPage .mapControls { right: 24px; } .topicPage .zoomExtents { display: none; } .mapControl { width:32px; height:32px; background-color: #424242; background-repeat: no-repeat; background-position: 0 0; cursor:pointer; } .mapControls:hover, .infoAndHelp:hover { z-index: 4; } .takeScreenshot { margin-bottom: 5px; border-radius: 2px; background-image: url(screenshot_sprite.png); display: none; } .takeScreenshot:hover { background-position: -32px 0; } .canEditMap .takeScreenshot { display: block; } .zoomExtents { margin-bottom:5px; border-radius: 2px; background-image: url(extents_sprite.png); } .zoomExtents:hover { background-position: -32px 0; } .zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarCollaborateIcon:hover .tooltipsUnder, .sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .authenticated .sidebarAccountIcon:hover .tooltipsUnder, .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove { display: block; } .hide { display: none !important; } .tooltips { display: none; position: absolute; background: black; text-align: center; right: 45px; color: white; border-radius: 2px; font-family: din-regular; line-height: 15px; font-size: 12px; padding: 3px 5px 2px; white-space: nowrap; margin-top: 5px; } .tooltipsUnder { display: none; position: absolute; background: black; text-align: center; color: white; border-radius: 2px; font-family: din-regular; line-height: 15px; font-size: 12px; padding: 3px 5px 2px; white-space: nowrap; margin-top: 36px; } .tooltipsAbove { display: none; position: absolute; background: black; text-align: center; text-transform: none; color: white; border-radius: 2px; font-family: din-regular; line-height: 15px; font-size: 12px; padding: 3px 5px 2px; white-space: nowrap; margin-top: -23px; font-style: normal; } .sidebarCollaborateIcon .tooltipsUnder { margin-left: -3px; } .sidebarFilterIcon .tooltipsUnder { margin-left: -4px; } .sidebarForkIcon .tooltipsUnder { margin-left: -34px; } .sidebarForkIcon div:after{ left: 45%; } .addMap .tooltipsUnder { margin-left: -36px; } .addMap div:after { left: 45%; } .mapInfoIcon .tooltipsAbove { left: -11px; } .openCheatsheet .tooltipsAbove { left: -4px; } .sidebarAccountIcon .tooltipsUnder { margin-left: -8px; margin-top: 40px; } .zoomExtents div::after, .zoomIn div::after, .zoomOut div::after, .takeScreenshot div:after { content: ''; position: absolute; top: 57%; left: 100%; margin-top: -6px; width: 0; height: 0; border-left: 4px solid #000000; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .sidebarCollaborateIcon div:after, .sidebarFilterIcon div:after, .sidebarAccountIcon .tooltipsUnder:after { left: 38%; } .sidebarCollaborateIcon div:after, .sidebarFilterIcon div:after, .sidebarForkIcon div:after, .addMap div:after, .sidebarAccountIcon .tooltipsUnder:after { content: ''; position: absolute; top: 128%; margin-top: -30px; width: 0; height: 0; border-bottom: 4px solid #000000; border-left: 5px solid transparent; border-right: 5px solid transparent; } .mapInfoIcon div:after, .openCheatsheet div:after { content: ''; position: absolute; top: 77%; left: 41%; margin-top: 5px; width: 0; height: 0; border-top: 4px solid #000000; border-left: 5px solid transparent; border-right: 5px solid transparent; } .zoomIn { background-image: url(zoom_sprite.png); background-position: 0 /…0; border-top-left-radius: 2px; border-top-right-radius: 2px; } .zoomIn:hover { background-position: -32px 0; } .zoomOut { background-image: url(zoom_sprite.png); background-position:0 -32px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } .zoomOut:hover { background-position: -32px -32px; } /* end mapControls */ /* explore maps */ .exploreMapsBar { z-index:2; background-color:#FAFAFA; } .exploreMapsMenu { display: block; width: 100%; margin-top:52px; height:42px; background-color:#EEEEEE; box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16); } .exploreMapsCenter { z-index: 3 !important; } .exploreMapsButton { color: #757575; cursor: default; font-weight: normal; font-family: 'din-medium'; font-size: 14px; height: 14px; padding: 14px 16px 12px 40px; border-bottom: 2px solid rgba(0,0,0,0); display: inline-block; cursor: pointer; position:relative; } .exploreMapsButton:hover, .exploreMapsButton.active { text-decoration: none; color: #424242; border-bottom: 2px solid #00BCD4; } .exploreMapsButton.mapperButton { height: 40px; padding: 0; } .mapperButton img.exploreMapperImage { float: left; border-radius: 12px; margin-top: 8px; margin-right: 8px; } .exploreMapperName { white-space: nowrap; float: left; margin-top: 12px; } .exploreMapsButton .exploreMapsIcon { background-repeat: no-repeat; width:32px; height:32px; position:absolute; top:5px; left:5px; } .exploreMapsCenter .myMaps .exploreMapsIcon { background-image: url(exploremaps_sprite.png); background-position: 0 0; } .exploreMapsCenter .activeMaps .exploreMapsIcon { background-image: url(exploremaps_sprite.png); background-position: -32px 0; } .exploreMapsCenter .featuredMaps .exploreMapsIcon { background-image: url(exploremaps_sprite.png); background-position: -64px 0; } .myMaps:hover .exploreMapsIcon, .myMaps.active .exploreMapsIcon { background-position: 0 -32px; } .activeMaps:hover .exploreMapsIcon, .activeMaps.active .exploreMapsIcon { background-position: -32px -32px; } .featuredMaps:hover .exploreMapsIcon, .featuredMaps.active .exploreMapsIcon { background-position: -64px -32px; } .mapsWrapper { /*overflow-y: auto; */ padding: 32px 32px 56px 32px; } /* end explore maps */ /* toast */ .toast { background-color: #323232; color: #F5F5F5; padding: 16px; border-radius: 2px; z-index: 1; font-size: 14px; line-height:14px; } .toast a { color: #4fc059; } /* end toast */ /* feedback */ body a#barometer_tab { background-image: url(feedback_sprite.png); background-position: 0 0; background-color: transparent; height: 110px; margin-left:0; margin-top:-55px; top: 50%; width: 22px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24); } body a#barometer_tab:hover { background-position: 0 -110px; }