/* 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; } /* 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; } /* 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; } /* 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 0px 2px $lineheight/4; box-shadow: inset #DDD 0px 1px 3px; } input[type="text"]:focus { outline: none; border: 1px solid #000; } 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: 100; } .site-edit #top-bar, .site-index #top-bar, .site-export #top-bar { position: fixed; left: 0; right: 0; } #tabnav { height: 29px; margin-bottom:0; overflow: hidden; li { display: inline; } a, a:link, a:visited { float: left; font-weight: bold; padding: 3px $lineheight/2; text-decoration: none; color: #333; float: left; margin-right: 1px; -webkit-transition: color 200ms ease-in; -moz-transition: color 200ms ease-in; -o-transition: color 200ms ease-in; transition: color 200ms ease-in; } } .site-index #tabnav a#viewanchor, .site-edit #tabnav a#editanchor, .changeset-list #tabnav a#historyanchor { border-bottom: 1px solid #aaa; background: #9ed485; color: #000; } #tabnav a:link:hover, #tabnav a:visited:hover { text-decoration: underline; } #tabnav a:link.disabled, #tabnav a:visited.disabled, #tabnav a:link:hover.disabled, #tabnav a:visited:hover.disabled { color: #ccc; cursor: default; &:hover { text-decoration: none; } } /* 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; padding-top: 3px; margin-right: $lineheight/4; } .greeting-bar-unread { font-weight: bold; } /* 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 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; } .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; } .control-locate .control-button, .control-share .control-button { border-radius: 0 0 0 4px; } .leaflet-control .control-button:hover { background-color: black; } .leaflet-control .control-button.active { background-color: #9ed485; } .leaflet-control .control-button .icon { margin: 10px; } /* 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-link { a { margin-left: 5px; } input, textarea { font-family: monospace; font-size: small; } } #embed_html { resize: vertical; } #mapnik_scale { width: 100px; } } .site-index .leaflet-top, .site-export .leaflet-top { 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; z-index: 9999; 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; text-align: right; } } .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 { padding: $lineheight; position: relative; } .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; } .wrapper { margin-left: 184px; border-left: 1px solid #ccc; text-align: left; } .site-edit #content { top: 30px; } #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; 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 .geolink { display: none; } #browse_map .secondary-actions { 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 login page */ #login_openid_buttons { margin-bottom: 0; } #login_openid_buttons li { float: left; padding: $lineheight/4 $lineheight/2; } /* Rules for the account confirmation page */ #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; } } form.sign { input[type=submit] { float: left; } #decline { background: $grey; &:hover { background: darken($grey, $hovercolor); } } } fieldset { margin-bottom: $lineheight; } #contributorGuidance { background-color: $offwhite; border-radius: 4px; -moz-border-radius: 4px; } .signing-buttons { height: 50px; } } /* 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: table; } /* 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; } .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; } } } /* Utility for managing inner content areas */ .inner22 { padding: $lineheight;} .inner12 { padding: $lineheight/2 $lineheight;} .inner11 { padding: $lineheight/2;} .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 */ .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; }