/* Parameters */ $lineheight: 20px; $typeheight: 14px; $offwhite: #f4f4ff; $blue: #7092FF; $lightblue: #B8C5F0; $grey: #AAA; $lightgrey: #CCC; $hovercolor: 20%; /* Styles common to large and small screens */ /* Minimal CSS reset */ html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, input { margin: 0; padding: 0; border: 0; font-size:100%; } fieldset,img { border: 0; } legend { color: #000; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } table { border-collapse: collapse; border-spacing: 0; } li { list-style: none; } input, select, textarea, body { font: #{$typeheight}/#{$lineheight} "Helvetica Neue",Arial,sans-serif; } abbr, acronym { border-bottom: .1em dotted; cursor: help; } /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /* Basic grid */ .col0 { float:left; width:04.1666%; } .col1 { float:left; width:08.3333%; } .col2 { float:left; width:16.6666%; } .col3 { float:left; width:25.0000%; } .col4 { float:left; width:33.3333%; } .col5 { float:left; width:41.6666%; } .col6 { float:left; width:50.0000%; } .col7 { float:left; width:58.3333%; } .col8 { float:left; width:66.6666%; } .col9 { float:left; width:75.0000%; } .col10 { float:left; width:83.3333%; } .col11 { float:left; width:91.6666%; } .col12 { width:100%; } .margin0 { margin-left:04.1666%; } .margin1 { margin-left:08.3333%; } .margin2 { margin-left:16.6666%; } .margin3 { margin-left:25.0000%; } .margin4 { margin-left:33.3333%; } .margin5 { margin-left:41.6666%; } .margin6 { margin-left:50.0000%; } .margin7 { margin-left:58.3333%; } .margin8 { margin-left:66.6666%; } .margin9 { margin-left:75.0000%; } .margin10 { margin-left:83.3333%; } .margin11 { margin-left:91.6666%; } .margin12 { margin-left:100.0000%; } .fillL { background-color: white; } /* Default rules for the body of every page */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Helvetica Neue',Arial,sans-serif; font-size: $typeheight; line-height: 1.6666; color: #222; background-color: #fff; margin: 0px; padding: 0px; text-align: left; } body.slim { background-color: #f0f0f0; } h1, h2, h3 { margin-top: $lineheight/2; margin-bottom: $lineheight; font-weight: bold; line-height: 1.2; } h1, h2 { font-size: 32px; } #content h2 { font-size: 21px; } h3 { font-size: 21px; margin-top: $lineheight/2; margin-bottom: $lineheight; } h4,h5,h6 { font-size: $typeheight; margin-top: $lineheight/2; margin-bottom: $lineheight/2; font-weight: bold; line-height: 1.5; } p, ul { margin-bottom: $lineheight; } p > img { width: auto; max-width: 100%; } small, aside { font-size: 12px; } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; } .column-1 { width: 50%; margin: 0 0 $lineheight/2 0; } .small_icon { vertical-align: middle; margin-right: $lineheight/4; } /* Rules for icons */ .icon { display:inline-block; vertical-align:top; width:20px; height:20px; background:transparent image-url("sprite.png") no-repeat 0 0; text-indent:-9999px; overflow:hidden; } .icon-pre-text { margin-right: 5px; } .icon.search { background-position: 0 0; } .icon.donate { background-position: -20px 0; } .icon.zoomin { background-position: -40px 0; } .icon.zoomout { background-position: -60px 0; } .icon.geolocate { background-position: -80px 0; } .active .icon.geolocate { background-position: -80px -20px; } .icon.layers { background-position: -100px 0; } .icon.key { background-position: -120px 0; } .icon.share { background-position: -140px 0; } .icon.clipboard { background-position: -160px 0; } .icon.link { background-position: -180px 0; } .icon.close { background-position: -200px 0; } .icon.check { background-position: -220px 0; } .icon.note { background-position: -240px 0; } .icon.gear { background-position: -260px 0; } /* Rules for links */ a { color: #00f; text-decoration: none; &:hover { text-decoration: underline; } } /* Rules for horizontal lines */ hr { border: none; background-color: #ccc; color: #ccc; height: 1px; } /* General styles for tables */ table { width: 100%; margin-bottom: $lineheight; th, td { text-align: left; padding: $lineheight/4; line-height: $lineheight; } th { font-weight: bold; vertical-align: top; } td { vertical-align: middle; } } /* Rules for the whole left sidebar, including the logo */ #left { position: absolute; height: 100%; width: 185px; font-size: 11px; line-height: 1.1; z-index: 100; border-right: 1px solid #ccc; } /* Rules for the OpenStreetMap logo in the top left corner */ #logo { display: block; width: 170px; min-width: 170px; padding: $lineheight $lineheight/4; text-align: center; margin: auto; } #logo h1 { font-size: 18px; line-height: 1; text-align: center; margin: 0; } #logo h2 { font-size: $lineheight/2; line-height: 15px; margin: 0; } /* Rules for the site name */ #small-title { display: none; img { vertical-align: text-bottom; } } /* Rules for the introductory text displayed in the left sidebar to new users */ .sidebar-copy { padding: $lineheight/4 $lineheight/2; p { margin: $lineheight/4 0; } } .sidebar-copy.intro { border-top: 1px solid #ccc; } /* * Rules for alert boxes shown in the left sidebar when important * information needs to be conveyed such as when the site is * undergoing maintenance. */ .sidebar-alert { padding: $lineheight/4; border-top: 1px solid #ccc; margin-top: 4px; margin-bottom: -5px; background: #e00; font-size: 12px; font-weight: bold; p { margin: $lineheight/4; } } /* * Rules for notice boxes shown in the left sidebar when important, but * non-critical information needs to be conveyed such as notices about * donation drives. */ .sidebar-notice { padding: $lineheight/4; border-top: 1px solid #ccc; margin-top: 4px; margin-bottom: -5px; background: #ea0; font-size: 12px; p { margin: $lineheight/4; } } /* Rules for the menu displayed in the left sidebar */ .left_menu { left: 0px; margin: 0; padding: $lineheight/4 $lineheight/2 $lineheight/2 $lineheight/2; font-size: 12px; line-height: 1.25; list-style-type: none; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; img { margin: $lineheight/2 0px; } ul { padding: 0; margin: 0; } li { list-style-type: none; padding: 0; margin: 0; } h4 { padding: $lineheight/4 0 $lineheight/4 0; font-size: 12px; margin: 0; } } /* * Rules for "optional boxes" which appear in the left sidebar on * certain pages. Current users are the seach box on the main page * and the tag cloud on the traces pages. */ .optionalbox { left: 0px; padding: $lineheight/4 $lineheight/2; margin: $lineheight/4 0; text-align: left; } /* Rules for the search box */ #search_field { position: relative; form { width: 165px; } input[type="text"] { width: 165px; padding: 3px; font-size: $typeheight; line-height: 1.1; height: 25px; padding: 2px 22px 2px $lineheight/4; box-shadow: inset #DDD 0px 1px 3px; transition: 300ms linear; -webkit-transition: 300ms linear; -moz-transition: 300ms linear; } input[type="text"]:focus { box-shadow: 0px 0px 7px #9ED485; outline: none; } input[type="submit"] { border: 0; margin: 0; padding: 0; width: 15px; height: 15px; min-width: 0; text-indent: -1000px; overflow: hidden; background: image-url("sprite.png") -2px -2px no-repeat; position: absolute; top: $lineheight/4; right: $lineheight/4; cursor: pointer; } } .search_help { margin: $lineheight/4 0 0 0; } /* Utility for de-emphasizing content */ .deemphasize { color: #999; a { color: $blue; } } /* Rules for donation request box */ a.donate { display: block; width: 163px; padding: $lineheight/4; border: 1px solid #AED1A0; background: #cbeea7; font-size: $typeheight; line-height: 1.4; text-align: center; border-radius: 2px; color: #222; margin: $lineheight/2 $lineheight/2 0px $lineheight/2; &:hover { background: #9ed485; text-decoration: none; } } /* Rules for Creative Commons logo button */ #cclogo { margin: $lineheight/2 0; float: right; } /* Rules for tabbed navigation bar */ #top-bar { position: relative; margin-left: 185px; height: 30px; border-bottom: 1px solid #ccc; background: white; z-index: 1001; .caret { margin-top: 10px; } } .site-edit #top-bar, .site-index #top-bar, .site-export #top-bar { position: fixed; top: 0; left: 0; right: 0; } #tabnav { height: 29px; margin-bottom: 0; > li { float: left; > * { padding: 3px $lineheight/2; } } a.tab { display: inline-block; font-weight: bold; text-decoration: none; color: #333; -webkit-transition: color 200ms ease-in; -moz-transition: color 200ms ease-in; -o-transition: color 200ms ease-in; transition: color 200ms ease-in; &:hover { text-decoration: underline; } } .disabled a { color: #ccc; cursor: default; &:hover { text-decoration: none; } .caret { border-top-color: #ccc; } } .dropdown { height: 29px; } } .site-index #view_tab, .site-edit #edit_tab, .changeset-list #history_tab { background: #9ed485; color: #000; } /* Utility for styling notification numbers */ .count-number { padding: 2px $lineheight/4; border-radius: 2px; background: #d7d7ff; margin: 0 2px; font-size: 11px; color: #333; } /* Rules for greeting bar in the top right corner */ #greeting { float: right; height: 100%; &.secondary-actions { padding: 3px $lineheight/2; } &.dropdown { background-color: #EEE; &:hover { background-color: #CCC; } } img { vertical-align: top; border-radius: 2px 0 0 2px; margin-right: 5px; } #inboxanchor { display: inline-block; position: relative; height: 20px; top: -2px; margin: 0 2px 0 0; padding: 0 5px 0 0; border-radius: 2px; } .dropdown-toggle { display: block; padding: 3px 7px; color: #000; text-decoration: none; } .dropdown-menu { left: auto; right: 0; .count-number { float: right; padding: 0 5px; margin: 0; } } } /* Rules for the message shown in place of the map when javascript is disabled */ #noscript { z-index: 20000000; position: absolute; top: 15px; left: 15px; } /* Rules for bootstrap tooltips */ .tooltip { position: absolute; display: none; color: #333; text-align: left; font-size: 12px; max-width: 250px; } .tooltip.in { opacity: 0.8; z-index: 1030; height: auto; display: block; } .tooltip.top { margin-top: -10px; text-align: center; } .tooltip.right { margin-left: 10px; } .tooltip.bottom { margin-top: 10px; text-align: center; } .tooltip.left { margin-left: -10px; text-align: right; } .tooltip-inner { display: inline-block; padding: 10px; font-weight: normal; background-color: white; } .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .tooltip.top .tooltip-arrow { bottom: -5px; left: 50%; margin-left: -5px; border-top-color: white; border-width: 5px 5px 0; } .tooltip.right .tooltip-arrow { top: 50%; left: -5px; margin-top: -5px; border-right-color: white; border-width: 5px 5px 5px 0; } .tooltip.left .tooltip-arrow { top: 50%; right: -5px; margin-top: -5px; border-left-color: white; border-width: 5px 0 5px 5px; } .tooltip.bottom .tooltip-arrow { top: -5px; left: 50%; margin-left: -5px; border-bottom-color: white; border-width: 0 5px 5px; } /* Rules for Leaflet maps */ .leaflet-control .control-button { display: block; height: 40px; width: 40px; background-color: #333; background-color: rgba(0,0,0,.6); -bottom: 1px solid #333; border-radius: 4px 0 0 4px; margin-bottom: 10px; outline: none; &:hover { background-color: black; } &.active { background-color: #9ed485; } &.disabled { background-color: #333; background-color: rgba(0,0,0,.5); cursor: default; } .icon { margin: 10px; } } .leaflet-control .zoomin, .control-layers .control-button { margin-bottom: 0px; border-radius: 4px 0 0 0; } .site .leaflet-control .zoomout, .control-key .control-button { margin-bottom: 0; border-radius: 0; } .leaflet-control .zoomout, // For non-main page maps .control-locate .control-button, .control-share .control-button { border-radius: 0 0 0 4px; } /* Rules for the home page */ .site-export #map, .site-index #map, .site-edit #map { height: 100%; overflow: hidden; } #map-ui { display: none; position: relative; float: right; width: 250px; height: 100%; background: white; border-left: 1px solid #CCC; overflow: auto; .section { border-bottom: 1px solid #DDD; padding: 15px; } a.close-button { float: right; padding:5px; font-size:20px; line-height:10px; color:#222; border:1px solid #ddd; } } .layers-ui, .share-ui { ul, li:last-child, p:last-child { margin-bottom: 0; } } .layers-ui { li { border-radius: 4px; overflow: hidden; margin-bottom: 10px; } label { display: block; padding: 5px 5px 5px 7px; background-color: #eee; cursor: pointer; } li.active label { background-color: #ccc; } .base-layers { .leaflet-container { width: 100%; height: 50px; cursor: pointer; } } } .share-ui { .share-tabs { margin-bottom: 10px; a { color: #fff; text-decoration: none; background-color: $lightblue; padding: 5px 10px; } a:first-child { border-right: 1px solid #fff; border-radius: 4px 0 0 4px; } a:last-child { border-left: 1px solid #fff; border-radius: 0 4px 4px 0; } a.active { background-color: $blue; } } .share-tab { display: none; } .share-link { input[type=text], textarea { width: 100%; font-family: monospace; font-size: small; line-height: 1.3; } } .share-image { label { margin-right: 10px; } } #embed_html { resize: vertical; } #mapnik_scale { width: 100px; } } .leaflet-top.leaflet-right { top: $lineheight/2 !important; .leaflet-control { margin-right: 0px !important; margin-top: 0px !important; } } .leaflet-popup-scrolled { padding-right: $lineheight; border-bottom: 0px !important; border-top: 0px !important; } .leaflet-popup-content-wrapper { border-radius: 4px !important; -webkit-border-radius: 4px !important; } /* Rules for edit menu */ .menuicon { padding: 0 $lineheight/4; font-weight: normal; display: inline-block; &:hover { text-decoration: none !important; } } .menu { display: none; z-index: 10000; position: absolute; background-color: #ffffff; border: 1px solid $lightgrey; border-top: 0px; ul { margin: 0px; } li { padding: 2px $lineheight/4; border-top: 1px solid #eee; white-space: nowrap; } } /* Rules for attribution text under the main map shown on printouts */ #attribution { display: none; } .attribution_license, .attribution_project { text-align: left; } .attribution_notice { text-align: center; } /* Rules for the popout map sidebar */ #sidebar { display: none; position: relative; float: left; border-right: 1px solid $lightgrey; width: 33.3333%; height: 100%; ul { margin-bottom: 0; &:last-child { border-bottom: 1px solid #ccc; } li { margin-bottom: $lineheight/4; &:last-child { margin-bottom: 0; } } } } .sidebar_heading { position: relative; padding: $lineheight/2 $lineheight; background: $offwhite; border-bottom: 1px solid #ccc; h4 { margin: 0; } } .sidebar_close { position: absolute; height: $lineheight; top: 0px; bottom: 0; right: $lineheight; margin: auto; } #sidebar_content { position: relative; margin-bottom: 20px; overflow: auto; height: 100%; width: 100%; h4 { padding: 0 $lineheight $lineheight/2 $lineheight; margin-top: $lineheight/2; margin-bottom: 0; border-bottom: 1px solid #ddd; } } /* Rules for the map key which appears in the popout sidebar */ #mapkey { .mapkey-table-key img { display: block; margin-left: auto; margin-right: auto; } td { padding: 0 $lineheight/4 $lineheight/4 $lineheight/4; } } /* Rules for search results which appear in the popout sidebar */ .search_searching { margin-top: $lineheight/4; margin-bottom: $lineheight/4; } .search_results_entry { margin-bottom: 0; .search_details { display: block; float: right; text-align: right; margin-top: 0.2em; margin-left: 0.5em; } } .search_results_entry .search_searching { text-align: center; margin: $lineheight auto; width: $lineheight; display: block; } ul.results-list li { border-bottom: 1px solid #ccc; } .search_results_error { color: #f00; } /* Rules for data browser information which appears in the popout sidebar */ #browse_content { position: relative; .browse_show_list.button { position: absolute; left: $lineheight; right: $lineheight; bottom: -40px; margin-bottom: 0; } a.more-details { position: absolute; top: 0; right: $lineheight; } ul li { margin-bottom: 0; } } .browse_details { position: relative; } .browse_status { display: none; } /* Rules for export information which appears in the popout sidebar */ .export_bounds { text-align: center; } .export_area_inputs { margin-bottom: $lineheight/2; input[type="text"] { width: 80px; margin-bottom: 5px; } } .export_bound { margin: $lineheight/4; } /* Rules for the main content area */ #content { position: relative; padding: $lineheight; } .site-edit #content, .site-index #content, .site-export #content { position: fixed; padding: 0; top: 30px; bottom: 0; left: 184px; right: 0; border-left: 1px solid #ccc; } /* Overrides for pages that use new layout conventions */ .user-new, .user-create, .user-terms, .user-confirm, .site-copyright, .site-welcome { #content { max-width: 740px; } } .user-new, .user-create, .user-terms, .user-confirm { .content-heading { height: 200px; } } .user-new, .user-create, .user-terms { #content { padding: 0; } } .header-illustration { background-position: 0 0; background-repeat: no-repeat; position: absolute; height: 200px; width: 100%; left: 0; bottom: 0; &.new-user-main { background-image: image-url("sign-up-illustration.png"); } &.confirm-main { background-image: image-url("confirm-illustration.png"); } &.new-user-terms { background-image: image-url("terms-illustration.png"); } &.new-user-arm { height: 110px; width: 130px; left: 260px; top: 160px; background-image: image-url("sign-up-illustration-arm.png"); } } @media only screen and (max-width:900px) { .header-illustration.new-user-arm { display: none;} } .wrapper { margin-left: 184px; border-left: 1px solid #ccc; text-align: left; } #content.maximised { top: 0; left: 0; right: 0; bottom: 0; border: 0; z-index: 1000; } #slim_container { width: 100%; } #slim_container_content { max-width: 50em; background-color: #FFFFFF; margin: $lineheight/2 auto; padding: 3px; border-radius: 25px; -moz-border-radius: 25px; border: 1px solid #e6e6e6; } #slim_content { margin: $lineheight/2; margin-top: 95px; max-width: 50em; .content-heading { margin-bottom: 15px; } } #slim_header { margin: 30px $lineheight/2; position: absolute; top: 0px; margin-right: $lineheight/4; img { vertical-align: middle; margin-bottom: $lineheight/4; margin-right: $lineheight/4; } } .content-heading { position: relative; padding: $lineheight; background: $offwhite; z-index: 2; h1, h2 { margin-bottom: $lineheight/2; line-height: 100%; &:last-child { margin-bottom: 0; } } p { margin-top: $lineheight/2; margin-bottom: 0px; } } /* Rules for small maps in content areas */ .content_map { position: relative; width: 45%; height: 400px; border: 1px solid #ccc; margin-bottom: $lineheight; float: right; } .content_map #small_map { height: 100%; width: 100%; margin-bottom: $lineheight; } /* Rules for the changeset list shown by the history tab etc */ #changeset_list { width: 100%; ul { padding: $lineheight/2 0; margin-bottom: 0px; border-top: 1px solid #ccc; &:last-child { border-bottom: 1px solid #ccc; } } .selected { background: #FFFFC0; } .date, .user { border-left: 1px solid #ccc; padding-left: $lineheight/4; margin-right: $lineheight/4; } } #changeset_list_map_wrapper { position: absolute; width: 50%; height: 490px; top: 0; right: 0; } #changeset_list_map_wrapper.scrolled { position: fixed; } #changeset_list_map { position: absolute; bottom: $lineheight; top: $lineheight; right: $lineheight; left: $lineheight; border: 1px solid #ccc; } #changeset_list_map_wrapper.scrolled #changeset_list_map { margin-left: 93px; } /* Rules for the data browser */ .browse-section { border-top: 1px solid #ccc; margin-top: $lineheight/2; padding-top: $lineheight/2; &:first-child { margin-top: 0; } .warning { background-color: #ffe0cc; margin: 0px; padding: 4px 6px; max-width: 100%; } h4, p { margin-bottom: $lineheight/4; } ul, .bbox, .geo { display: inline-block; vertical-align: top; max-width: 65%; } ul p { margin-left: 0; margin-bottom: 0; } h4 { float: left; width: 33.3333%; display: inline-block; vertical-align: top; } } .bbox { div { width: 33.3333%; text-align: center; padding: $lineheight/4 0; overflow: hidden; text-overflow: ellipsis; float: left; } .max_lat, .min_lat { margin-left: auto; margin-right: auto; width: 100%; } } #browse_map .secondary-actions { display: none; margin-bottom: $lineheight/2; } /* Rules for the trace list shown by the traces tab etc */ #trace_list { font-size: $lineheight/2; border-width: 0px; text-align: right; .trace_summary { font-size: 12px; color: gray; } .trace_pending { color: red; } .trace_public { color: green; } .trace_identifiable { color: green; } .trace_trackable { color: red; } .trace_private { color: red; } } /* Rules for the user profile page */ #userinformation { min-height: 100px; .userinformation-inner { float: left; } h2 { margin-top: 0; } .user-description { width: 100%; clear: both; } .deemphasize { margin: 0; } } .admin-user-info small { margin-bottom: $lineheight/2; display: inline; margin-right: $lineheight; } .activity-block { clear: left; border-bottom: 1px solid #ccc; padding-bottom: $lineheight; float: left; h3 { margin-bottom: $lineheight/2; } } .contact-activity { margin-top: $lineheight; width: 100%; } .activity-details p { margin-left: 70px; margin-bottom: 0; } #friends-container .contact-activity ul { margin-left: 70px; } .user-view { p#no_home_location { margin: $lineheight; } .user_thumbnail { margin-top: $lineheight/4; float: left; } } /* Rules for the user map */ .content_map .leaflet-popup-content { margin: $lineheight/2; min-height: 50px; } /* Rules for user popups on maps */ .user_popup { min-width: 200px; p { padding: 0 0 5px 0; margin-top: 0 0 0 60px; font-size: 12px; } img.user_thumbnail { float: left; margin: 0 $lineheight/2 0 0; } } /* Rules for the user list */ #user_list { font-size: $lineheight/2; width: 100%; tr { vertical-align: middle; } p { margin-top: 0px; margin-bottom: 0px; } } #user_list_actions { float: right; margin-top: $lineheight/2; } /* Rules for the diary list page */ .diary_entry-list img.user_thumbnail { float: left; } .diary_post { max-width: 740px; position: relative; margin-top: $lineheight/2; padding-top: $lineheight; border-top: 1px solid #ccc; &:first-child { margin-top: 0; border-top: 0; padding-top: 0; } h1, h2 { font-size: 21px; line-height: 1em; } small.deemphasize { float: left; display: block; } ul.secondary-actions { display: inline-block;} } .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div display: inline; } #content .post_heading { margin-bottom: $lineheight; h2 { margin-top: 0; margin-bottom: $lineheight/2; font-size: 24px; } } /* Rules for the diary entry page */ .diary_entry { #map { position: relative; width: 90%; height: 400px; border: 1px solid #ccc; display: none; margin-bottom: $lineheight; } #newcomment { border-top: 1px solid #ccc; padding-top: $lineheight; margin-top: $lineheight/2; } .comments { max-width: 740px; } .diary-comment { margin-top: $lineheight/2; border-top: 1px dashed #ccc; padding-top: $lineheight/2; &:first-child { margin-top: $lineheight; padding-top: $lineheight; border-top: 1px solid #ccc; } p { margin-bottom: $lineheight/2; } .comment-heading { margin-bottom: 0; margin-top: 0; } } } .diary_entry-view img.user_thumbnail { float: left; } /* Rules for the log in page */ #login_openid_buttons { margin-bottom: 0; } #login_openid_buttons li { float: left; padding: $lineheight/4 $lineheight/2; } /* Rules for the account confirmation page */ .user-terms { .legale { border: 1px solid #ccc; padding: $lineheight; margin-bottom: $lineheight; overflow: auto; height: 10em; &:p#last { margin-bottom: 0px; } &:ol { margin-bottom: 0px; } &:img { display: block; margin: $lineheight auto inherit auto; } } #decline { background: $lightblue; &:hover { background: darken($lightblue, $hovercolor); } } .form-row { margin: auto; max-width: 370px; } } /* Rules for the account settings page */ #accountForm .user_map { position: relative; width: 500px; height: 400px; border: 1px solid #ccc; } #accountForm .user_image { margin-bottom: 0; } #accountForm #user_image { margin-left: 20px; } #accountForm ul.accountImage-options { margin-left: 120px; } .nohome .location { display: none; } #homerow .message { display: none; } .nohome .message { display: inline !important; } .content_map.settings_map { width: 50%; float: none; } /* Rules for the oauth settings page */ .oauth_clients .buttons .oauth-edit { border-radius: 2px 0 0 2px; } .oauth_clients .buttons .oauth-delete { border-radius: 0 2px 2px 0; } /* Rules for messages pages */ .messages { width: 100%; border: 1px solid #ddd; input[type="submit"] { margin: auto; } tbody tr { border-top: 1px solid #ccc; } .inbox-row { background: #f8f8ff; } .inbox-row-unread { background:#CBEEA7; } .right { float: right; } tr td, tr th { padding: $lineheight/4; } p:last-child, h2:last-child, h3:last-child, ol:last-child, ul:last-child { margin-bottom:0; } tr td { height: 30px; border-right: 1px solid $lightgrey; } } .inbox-row .inbox-mark-read { display: none; } .info-line { margin-bottom: $lineheight; padding: $lineheight/4 0px 4px 0px; border-bottom: 1px solid #ccc; form, form div { display: inline; } } .info-line .user_thumbnail_tiny { vertical-align: middle; } .inbox-mark-unread, .inbox-mark-read, .inbox-delete { width: 1%; } .inbox-row-unread .inbox-mark-unread { display: none; } .message-read .message-buttons { margin-top: $lineheight; padding-top: $lineheight; border-top: 1px solid $lightgrey; } .message-read .buttons .mark-unread-button { border-radius: 0; } /* Rules for "flash" notice boxes shown at the top of the content area */ .flash { padding: $lineheight; &#error { background-color: #ff7070; } &#warning { background-color: #ffe0cc; } &#notice { background-color: #CBEEA7; } } /* Rules for highlighting fields with rails validation errors */ .field_with_errors { padding: 2px; background-color: #ff7070; display: inline-block; } .formError { display: inline-block; padding: 5px 10px; margin-top: 5px; border-radius: 4px; font-size: 12px; color: #fff; background-color: #ff7070; } /* Rules for rails validation error boxes */ #errorExplanation { width: 400px; border: 2px solid #ff7070; padding: 0 $lineheight/2; margin-bottom: $lineheight; background-color: #f0f0f0; h2 { margin: 0 -10px 10px -10px; padding: $lineheight/4 $lineheight/4 $lineheight/4 15px; font-weight: bold; font-size: 12px; background-color: #c00; color: #fff; text-align: left; } p { color: #333; margin-bottom: 0px; padding: $lineheight/4; } ul { padding-left: $lineheight; li { font-size: 12px; list-style: disc; } } } /* Rules for forms */ .standard-form { fieldset { margin-bottom: $lineheight; } label.standard-label { display: block; margin-bottom: $lineheight/4; font-size: $typeheight; font-weight: bold; line-height: 1.5; } label.standard-label.secondary { display: inline-block; font-weight: normal; } .form-help { font-weight: normal; } .form-column { float: left; margin-right: 20px; } .form-divider { margin-top: $lineheight; padding-top: $lineheight; border-top: 1px solid $lightgrey; } .horizontal-list .form-row { float: left; padding-right: 10px; } .form-row { margin-bottom: $lineheight/2; } .form-list { margin-bottom: 0; } .form-list li { margin-bottom: 5px; } input[type="checkbox"], input[type="radio"] { float: left; margin-top: 5px; } } #remember_me_openid { display: block; } input[type="checkbox"], input[type="radio"] { margin-right: 5px; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea { border: 1px solid #ccc; padding: 2px 5px; margin: 0; width: 200px; } textarea { padding: 5px; width: 100%; } /* Rules for user images */ img.user_image { max-width: 100px; max-height: 100px; border: 1px solid #ccc; margin-bottom: $lineheight; float: left; margin-right: $lineheight; } img.user_thumbnail { max-width: 50px; max-height: 50px; border: 1px solid #ccc; margin-right: $lineheight; } img.user_thumbnail_tiny { max-width: 25px; max-height: 25px; border: 1px solid #ccc; } /* Rule for "nowrap" class that can be applied to anything to stop wrapping */ .nowrap { white-space: nowrap; } /* Rules for geo microformats */ abbr.geo { border-bottom: none; } /* Rules for RSS buttons */ .rsssmall { position: relative; top: 5px; } /* General styles for action lists / subnavs / pager navs */ ul.secondary-actions { font-style: normal; margin-bottom: 0; margin-left: 0; &.pager { display: inline-block; margin-right: 60px; } > li { display: block; float: left; list-style: none; border-left: 1px solid #ccc; padding-left: $lineheight/4; margin-right: $lineheight/4; &:first-child { border-left: 0; padding-left: 0; } &:last-child { margin-right: 0px; } } .dropdown-menu { left: auto; right: 0; } } /* Utility for managing inner content areas */ .inner22 { padding: $lineheight;} .inner12 { padding: $lineheight/2 $lineheight;} .inner11 { padding: $lineheight/2;} .inner20 { padding: $lineheight 0;} .inner02 { padding: 0 $lineheight;} /* Utility for general button styles */ input[type="button"], input[type="submit"], input[type="reset"], a.button { cursor: pointer; border: 0; display: inline-block; line-height: 20px; padding: $lineheight/4 $lineheight/2; min-height: 20px + $lineheight/2; min-width: 120px; margin: 0 0 $lineheight/2 0; color: white; background: $blue; text-align: center; border-radius: 2px; -moz-border-radius: 2px; &:hover { background: darken($blue, $hovercolor); text-decoration: none; } &.deemphasize { background: $lightblue; &:hover { background: darken($lightblue, $hovercolor); } } &:disabled { background: $lightgrey; &:hover { background: $lightgrey; } } &:last-child { margin-bottom: 0; } } .buttons { min-width: 200px; input[type="submit"], input[type="button"], input[type="reset"], .button { box-sizing: border-box; float: left; border-radius: 0; margin:0; min-width: 100px; max-width: 180px; border-right:1px solid white; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } input:first-child, .button:first-child { border-radius:2px 0 0 2px; } input:last-child, .button:last-child { border-radius:0 2px 2px 0; border-right-width: 0; } input:only-child, .button:only-child, *[value="Hide"] + input:last-child, *[value="Hide"] + .button:last-child { border-radius:2px; border-right-width: 0; } /* if a 3-button set has a hidden middle button */ *[value="Hide"] + input:nth-child(3), *[value="Hide"] + .button:nth-child(3) { border-radius:0 2px 2px 0; border-right-width: 0; } /* if a 3-button set starts with a hidden button */ *[value="Hide"] + input:nth-child(2):not(:last-child), *[value="Hide"] + .button:nth-child(2):not(:last-child) { border-radius:2px 0 0 2px; border-right-width: 1px solid white; } } /* Rules for doing distinct colour of alternate table rows */ .table0, .item0 { background: $offwhite; } .table1, .item1 { background: #fff; } /* Rules for OpenID logo */ .openid_logo { vertical-align: text-bottom; border: 0; } /* Rules for rich text */ .richtext, .prose { h1, h2 { padding-bottom: $lineheight/2; border-bottom: 1px dashed #cccccc; margin-bottom: $lineheight/2; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: $typeheight; } code { font-size: 13px; background: #e8e8e8; padding: 2px 3px; } pre { font-size: 13px; background: #e8e8e8; padding: 2px 3px; code { padding: 0; } } img { padding: $lineheight; background-color: $offwhite; display: block; max-width: 100%; margin: auto; } blockquote { border-left: $lineheight solid $offwhite; padding-left: $lineheight; margin: 0; color: #7E7E7E; } ul, ol { padding-left: $lineheight; margin-bottom: $lineheight; margin-left: $lineheight; } ul li { list-style: disc; } ol li { list-style: decimal; } } .diary_post .richtext { margin-top: $lineheight; } .comments .richtext { margin-left: 70px; margin-top: 0; } /* Rules for rich text editors */ .richtext_container { margin-bottom: $lineheight; .richtext_content { width: 50%; display: inline-block; vertical-align: top; .richtext_preview { display: inline-block; padding: $lineheight; background-color: $offwhite; overflow-x: auto; &.loading { background-image: image-url("loading.gif"); background-repeat: no-repeat; background-position: center; } > :first-child { margin-top: 0px; } } } .richtext_help { display: inline-block; vertical-align: top; margin-left: 15px; background-color: #f8f8ff; padding: $lineheight/2; width: 220px; ul { margin-bottom: 0; } h4.heading, li { border-bottom: 1px solid #ccc; margin-bottom: $lineheight/4; padding-bottom: $lineheight/4; } li h4, li span, li p { display: inline-block; vertical-align: top; font-size: 11px; } li h4 { width: 40%; margin: 0; } li span, li p { width: 50%; margin-left: $lineheight/2; margin-bottom: $lineheight/4; white-space: nowrap; } } } /* Rules for the user notes list */ .note_list { tr.creator { background-color: #eeeeee; } td { padding: 3px; } p { margin-bottom: 0px; } } /* Rules for the notes interface */ .leaflet-popup-content .note { padding-top: $lineheight/2; } .leaflet-popup-content .note { h2 { margin-bottom: $lineheight/2; } div { margin-top: $lineheight/2; } .permalink { position: absolute; top: $lineheight/4; left: $lineheight/4; min-width: 15px; min-height: 15px; } .permalink span { display: none; padding-left: $lineheight; } .permalink:hover span { display: block; } .warning { display: block; background-color: #ffe0cc; padding: 4px 6px; margin-bottom: $lineheight/2; } .comment_body { margin-top: 2px; margin-bottom: 2px; p { margin-top: 0px; margin-bottom: 0px; } } .comment { width: 100%; height: 100px; } .buttons { margin-top: $lineheight/4; text-align: right; } } /* * Rules for the iD editor */ .site-edit-id { #left, #large-title { display: none; } #small-title { display: inline-block; width: 185px; height: 30px; font-size: 14px; margin: 0; background-color: #eee; border-bottom: 1px solid #ccc; text-align: center; padding-top: 7px; } #content { left: 0; } } .id-embed { width: 100%; height: 100%; } /* Rules for rotating sidebar ads */ .ad-container { display: block; height: 120px; overflow: hidden; position: relative; border-bottom: 1px solid #ccc; } .ad { height: 100px; border: 0; background: #fff; } /* Rules for dropdown menus */ .dropdown { position: relative; } .dropdown-toggle { *margin-bottom: -3px; } .dropdown-toggle:active, .open .dropdown-toggle { outline: 0; } .caret { display: inline-block; width: 0; height: 0; vertical-align: top; border-top: 4px solid #000000; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; } .dropdown .caret { margin-top: 8px; margin-left: 2px; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 0; list-style: none; background-color: #ffffff; border: 1px solid #ccc; *border-right-width: 2px; *border-bottom-width: 2px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .dropdown-menu.pull-right { right: 0; left: auto; } .dropdown-menu .divider { *width: 100%; height: 1px; margin: 9px 1px; *margin: -5px 0 5px; overflow: hidden; background-color: #e5e5e5; border-bottom: 1px solid #ffffff; } .dropdown-menu > li > a { display: block; padding: 3px 10px; clear: both; font-weight: normal; line-height: 20px; color: #333333; white-space: nowrap; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a { color: #ffffff; text-decoration: none; background-color: #0081c2; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #ffffff; text-decoration: none; background-color: #0081c2; outline: 0; } .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { color: #999999; } .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { text-decoration: none; cursor: default; background-color: transparent; background-image: none; } .open { *z-index: 1000; } .open > .dropdown-menu { display: block; } .dropdown-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 990; } /* Rules for the "Welcome" page */ .site-welcome { .center { text-align: center; .sprite { float: none; margin: auto; } } .sprite { background-image: image-url("welcome-sprite.png"); background-size: 500px 250px; display: block; float: left; } .icon-list { padding-bottom: 20px; div { margin-bottom: 10px; p { padding-top: 10px; } } } .sprite.small { width: 50px; height: 50px; } .sprite.x { background-position: -50px 0; } .sprite.term { margin-right: 10px; vertical-align: middle; } .sprite.node { background-position: -100px 0; } .sprite.way { background-position: -150px 0; } .sprite.tag { background-position: -200px 0; } .sprite.editor { background-position: -250px 0; } .sprite.question { background-position: -300px 0; } .start-mapping { margin: auto; cursor: pointer; border: none; padding: 20px 40px; font-size: 30px; text-decoration: none; } .note-box { margin-top: 20px; background-color: $offwhite; } .icon.note { background-color: #333; border-radius: 4px; } }