/* 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 { 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: 14px/20px "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 */ body { font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 14px; 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: 10px; margin-bottom: 20px; font-weight: bold; line-height: 1.2; } h1, h2 { font-size: 32px; } #content h2 { font-size: 21px; } h3 { font-size: 21px; margin-top: 10px; margin-bottom: 20px; } h4,h5,h6 { font-size: 14px; margin-top: 10px; margin-bottom: 20px; font-weight: bold; line-height: 1.5; } p, ul { margin-bottom: 20px; } 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-bottom: 20px; } .small_icon { vertical-align: middle; margin-right: 5px; } /* 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: 20px; th, td { text-align: left; padding: 5px; line-height: 20px; } 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: 12px; 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: 20px 5px; text-align: center; margin: auto; } #logo h1 { font-size: 18px; line-height: 20px; text-align: center; margin: 0px; } #logo h2 { font-size: 10px; line-height: 15px; margin: 0px; } /* 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: 5px 10px; } .sidebar-copy p { margin: 5px 0; } .sidebar-copy.intro { margin-top: -1px; 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: 5px; border-top: 1px solid #ccc; margin-top: 4px; margin-bottom: -4px; background: #e00; font-size: 12px; font-weight: bold; p { margin: 5px; } } /* * 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: 5px; border-top: 1px solid #ccc; margin-top: 4px; margin-bottom: -4px; background: #ea0; font-size: 12px; p { margin: 5px; } } /* Rules for the menu displayed in the left sidebar */ .left_menu { left: 0px; margin: 0; padding: 5px 10px; line-height: 15px; font-size: 12px; list-style-type: none; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } .left_menu img { margin: 10px 0px; } .left_menu ul { padding: 0; margin: 0; } .left_menu li { list-style-type: none; padding: 0; margin: 0; } .left_menu h4 { padding: 5px 0 5px 0; font-size: 12px; margin: 0; } .left_menu li:last-child h4 { padding-top: 0; } /* Rules for SOTM advert */ #sotm { width: 165px; margin: 10px; padding: 0px; border: 0px; background: #fff; } #sotm img { width: 165px; } /* * 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: 5px 10px; margin: 5px 0; text-align: left; } /* Rules for the search box */ #search_field form { width: 165px; } #search_field { position: relative; } #search_field input[type="text"] { width: 165px; padding: 3px; font-size: 14px; line-height: 15px; height: 25px; padding: 2px 0px 2px 5px; box-shadow: inset #DDD 0px 1px 3px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } #search_field input[type="text"]:focus { outline: none; border: 1px solid #000; } #search_field input[type="submit"] { border: 0; margin: 0; padding: 0; width: 15px; height: 15px; text-indent: -1000px; overflow: hidden; background: image-url("sprite.png") 0 0 no-repeat; position: absolute; top: 5px; right: 5px; cursor: pointer; } .search_help { margin: 5px 0 0 0; } /* Utility for de-emphasizing content */ .deemphasize { color: #999; a { color: #7092FF; } } /* Rules for donation request box */ .donate { display: block; position: relative; width: 153px; padding: 5px; border: 1px solid #AED1A0; background: #cbeea7; line-height: 20px; text-align: center; font-size: 14px; border-radius: 2px; -moz-border-radius: 2px; color: #222; margin: 10px 10px 0px 10px; } .donate:hover { background: #9ed485; text-decoration: none; } .donate p { text-indent: 20px; margin: 0; } .donate .donate-icon { width: 15px; height: 15px; border: 0px; background: image-url("sprite.png") 0 -30px no-repeat; position: absolute; top: 8px; left: 17px; } /* Rules for Creative Commons logo button */ #cclogo { margin: 10px 0; float: right; } /* Rules for tabbed navigation bar */ #top-bar { position: relative; margin-left: 185px; height: 29px; 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; } #tabnav li { display: inline; } #tabnav a, #tabnav a:link, #tabnav a:visited { float: left; background: #fff; font-weight: bold; padding: 3px 10px; 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, .site-export #tabnav a#exportanchor { 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; } #tabnav a:link.disabled:hover, #tabnav a:visited.disabled:hover, #tabnav a:link:hover.disabled:hover, #tabnav a:visited:hover.disabled:hover { text-decoration: none; } /* Utility for styling notification numbers */ .count-number { padding: 2px 5px; border-radius: 3px; 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: 5px; } .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 */ #permalink { z-index: 10000; position: absolute; bottom: 0px; right: 0px; padding: 5px; background:#fff; } .leaflet-control-attribution a.disabled { color: #99c9dc; cursor: default; text-decoration: none; } .site-index .leaflet-top, .site-export .leaflet-top { top: 10px !important; .leaflet-control { margin-top: 0px !important; } } .site-index #map .olControlScaleLine, .site-export #map .olControlScaleLine { left: 10px !important; } .leaflet-popup-scrolled { padding-right: 20px; 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 5px; 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 #cccccc; border-top: 0px; } .menu ul { margin: 0px; } .menu li { padding: 2px 5px; 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: absolute; overflow: auto; top: 0px; bottom: 0px; left: 0px; border-right: 1px solid #ccc; width: 33.3333%; .sidebar_heading { position: relative; padding: 10px 20px; z-index: 9999; background: #F4F4FF; border-bottom: 1px solid #ccc; } h4 { margin: 0; } ul { margin-bottom: 0; li { margin-bottom: 5px; &:last-child { margin-bottom: 0; } } } } #sidebar_close { position: absolute; height: 20px; top: 0px; bottom: 0; right: 20px; margin: auto; } #sidebar_content { position: relative; bottom: 0; width: 100%; h4 { padding: 0 20px 10px 20px; margin-top: 10px; margin-bottom: 0; border-bottom: 1px solid #ddd; } } /* Rules for the map key which appears in the popout sidebar */ #mapkey { padding: 20px; } #mapkey .mapkey-table-key img { display: block; margin-left: auto; margin-right: auto; } #mapkey td { padding: 0 5px 5px 5px; } /* Rules for search results which appear in the popout sidebar */ .search_searching { margin-top: 5px; margin-bottom: 5px; } .search_results_entry { margin-bottom: 0 ; } .search_results_entry .search_searching { text-align: center; margin: 20px auto; width: 20px; 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: 20px; right: 20px; bottom: -40px; margin-bottom: 0; } a.more-details { position: absolute; top: 0; right: 20px; } 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: 10px; } .export_bound { margin: 5px; } .export_details input[type="text"]#export_html_text { width: 100%; } #sidebar #marker_inputs li:last-child { margin-bottom: 10px; } #export_osm, #export_mapnik, #export_osmarender { display: none; } .export_buttons { width: 100%; text-align: center; } /* Rules for the main content area */ #content { padding: 20px; position: relative; } .site-edit #content, .site-index #content, .site-export #content { position: fixed; padding: 0; top: 30px; bottom: 0; left: 185px; right: 0; border-left: 1px solid #ccc; } .wrapper { margin-left: 185px; 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: 10px auto; padding: 3px; border-radius: 25px; -moz-border-radius: 25px; border: 1px solid #e6e6e6; } #slim_content { margin: 10px; margin-top: 95px; max-width: 50em; .content-heading { margin-bottom: 15px; } } #slim_header { margin: 30px 10px; position: absolute; top: 0px; margin-right: 5px; } #slim_header img { vertical-align: middle; margin-bottom: 5px; margin-right: 5px; } .content-heading { position: relative; padding: 20px; background: #F4F4FF; h1, h2 { margin-bottom: 10px; line-height: 100%; &:last-child { margin-bottom: 0; } } p { margin-top: 10px; margin-bottom: 0px; } } /* Rules for small maps in content areas */ .content_map { position: relative; width: 45%; height: 398px; border: 1px solid #ccc; margin-bottom: 20px; float: right; } .content_map #small_map { height: 100%; width: 100%; margin-bottom: 20px; } /* Rules for the home page */ .site-export #map, .site-index #map { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; } /* Rules for the edit page */ .site-edit #map { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; overflow: hidden; } /* Rules for the changeset list shown by the history tab etc */ #changeset_list { width: 100%; ul { padding: 10px 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: 5px; margin-right: 5px; } } #changeset_list_map { position: absolute; bottom: 20px; top: 20px; right: 20px; width: 45%; min-height: 398px; max-height: 598px; border: 1px solid #ccc; } /* Rules for the data browser */ .browse-section { border-top: 1px solid #ccc; margin-top: 10px; padding-top: 10px; &:first-child { margin-top: 0; } &.warning { color: #ff7070; font-weight: bold; } div { clear: left; } h4, p { margin-bottom: 5px; } p, ul, .bbox { margin-left: 33.3333%; } ul p { margin-left: 0; margin-bottom: 0; } h4 { width: 33.3333%; float: left; } } .bbox { div { width: 33.3333%; text-align: center; padding: 5px 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: 10px; } /* Rules for the trace list shown by the traces tab etc */ #trace_list { font-size: 10px; border-width: 0px; text-align: right; } #trace_list .trace_summary { font-size: 12px; color: gray; } #trace_list .trace_pending { color: red; } #trace_list .trace_public { color: green; } #trace_list .trace_identifiable { color: green; } #trace_list .trace_trackable { color: red; } #trace_list .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: 10px; display: inline; margin-right: 20px; } .activity-block { clear: left; border-bottom: 1px solid #ccc; padding-bottom: 20px; float: left; h3 { margin-bottom: 10px; } } .contact-activity { margin-top: 20px; width: 100%; } .activity-details p { margin-left: 72px; margin-bottom: 0; } #friends-container .contact-activity ul { margin-left: 72px; } .user-view p#no_home_location { margin: 20px; } .user-view .user_thumbnail { margin-top: 5px; float: left; } /* Rules for the user map */ .content_map .leaflet-popup-content { margin: 10px 15px; min-height: 62px; } /* Rules for user popups on maps */ .user_popup { min-width: 200px; } .user_popup p { padding-top: 3px; padding-bottom: 3px; margin-top: 0px; margin-bottom: 0px; margin-left: 55px; margin-right: 2px; } .user_popup img.user_thumbnail { float: left; margin-right: 10px; } /* Rules for user popups on maps */ .user_popup p { margin-bottom: 0; margin-left: 60px; font-size: 12px; } /* Rules for the user list */ #user_list { font-size: 10px; width: 100%; } #user_list tr { vertical-align: middle; } #user_list p { margin-top: 0px; margin-bottom: 0px; } #user_list_actions { float: right; margin-top: 10px; } /* Rules for the diary list page */ .diary_entry-list img.user_thumbnail { float: left; } .diary_post { max-width: 740px; position: relative; margin-top: 20px; padding-top: 20px; border-top: 1px solid #ccc; &:first-child { margin-top: 0; border-top: 0; padding-top: 0; } h1, h2 { font-size: 21px; line-height: 21px; } 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: 20px; h2 { margin-top: 0; margin-bottom: 10px; font-size: 24px; } } /* Rules for the diary entry page */ .diary_entry { #map { position: relative; width: 90%; height: 398px; border: 1px solid #ccc; display: none; margin-bottom: 20px; } #newcomment { border-top: 1px solid #ccc; padding-top: 20px; margin-top: 10px; } .comments { max-width: 740px; } .diary-comment { margin-top: 10px; border-top: 1px dashed #ccc; padding-top: 10px; &:first-child { margin-top: 20px; padding-top: 20px; border-top: 1px solid #ccc; } p { margin-bottom: 10px; } .comment-heading { margin-bottom: 0; margin-top: 0; } } } .diary_entry-view img.user_thumbnail { float: left; } /* Rules for the login page */ #login_openid_buttons li { float: left; padding: 5px 10px; } /* Rules for the account confirmation page */ div#contributorTerms { border: 1px solid #ccc; padding: 20px; margin-bottom: 20px; overflow: auto; height: 398px; } div#contributorTerms p#last { margin-bottom: 0px; } div#contributorTerms ol { margin-bottom: 0px; } div#contributorTerms img { display: block; margin: 20px auto inherit auto; } form#termsForm div#buttons { float: right; } form#termsForm input#agree { margin-left: 40px; } div#slim_content form#termsForm { width: auto; } p#contributorGuidance { background-color: #f4f4ff; border-radius: 3px; -moz-border-radius: 3px; margin-top: 20px; padding: 10px; } /* Rules for the account settings page */ #accountForm { margin-top: 20px; } #accountForm td { padding-bottom: 10px; } #accountForm .user_map { position: relative; width: 498px; height: 398px; border: 1px solid #ccc; } .accountImage-options { width: 50%; display: inline-block; } .nohome .location { display: none; } #homerow .message { display: none; } .nohome .message { display: inline !important; } #accountForm input[type=submit] { margin-top: 15px; } .content_map.settings_map { float: none; width: 50%; } /* Rules for message in/out box page */ .messages { width: 100%; border: 1px solid #ddd; } .messages tbody tr { border-top: 1px solid #ccc; } .messages .inbox-row { background: #f8f8ff; } .messages .inbox-row-unread { background:#CBEEA7; } .right { float: right; } .messages tr td, .messages tr th { padding: 5px; } .inbox-row .inbox-mark-read { display: none; } .info-line { margin-bottom: 20px; padding: 5px 0px 4px 0px; border-bottom: 1px solid #ccc; } .info-line form, .info-line form div { display: inline; } .info-line .user_thumbnail_tiny { vertical-align: middle; } .inbox-row-unread .inbox-mark-unread { display: none; } /* Rules for "flash" notice boxes shown at the top of the content area */ .flash { padding: 20px; &#error { background-color: #ff7070; } &#warning { background-color: #fff6f0; } &#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: 10px; margin-bottom: 20px; background-color: #f0f0f0; } #errorExplanation h2 { margin: -10px; padding: 5px 5px 5px 15px; font-weight: bold; font-size: 12px; background-color: #c00; color: #fff; text-align: left; } #errorExplanation p { color: #333; margin-bottom: 0px; padding: 5px; } #errorExplanation ul li { font-size: 12px; list-style: disc; } /* Rules for forms */ .submitButton { text-align: center; } .fieldName { vertical-align: top; font-weight: bold; font-size: 12px; line-height: 20px; text-align: right; } .submitButton { text-align: right; } .minorNote { font-size: 12px; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea { border: 1px solid #ccc; } /* Rules for user images */ img.user_image { max-width: 100px; max-height: 100px; border: 1px solid #ccc; margin-bottom: 20px; float: left; margin-right: 20px; } img.user_thumbnail { max-width: 50px; max-height: 50px; border: 1px solid #ccc; margin-right: 20px; } img.user_thumbnail_tiny { max-width: 24px; max-height: 24px; 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: 4px; } /* 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-bottom: 20px; margin-right: 60px; } li { display: block; float: left; list-style: none; border-left: 1px solid #ccc; padding-left: 5px; margin-right: 5px; &:first-child { border-left: 0; padding-left: 0; } &:last-child { margin-right: 0px; } } } /* Utility for managing inner content areas */ .inner22 { padding: 20px;} .inner12 { padding: 10px 20px;} .inner02 { padding: 0 20px;} /* Utility for general button styles */ a.button { display: block; padding: 5px; min-width: 120px; margin-bottom: 10px; color: white; background: #7092FF; text-align: center; border-radius: 2px; -moz-border-radius: 2px; &:hover { background: blue; text-decoration: none; } &:last-child { margin-bottom: 0; } } a.button.submit { background-color: #cbeea7; &:hover { background-color: #9ed485; } } /* Rules for doing distinct colour of alternate table rows */ .table0, .item0 { background: #F4F4FF; } .table1, .item1 { background: #fff; } /* Rules for OpenID logo */ .openid_logo { vertical-align: text-bottom; border: 0; } /* Rules for rich text */ .richtext { h1, h2 { padding-bottom: 10px; border-bottom: 1px dashed #cccccc; margin-bottom: 10px; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 14px; } img { padding: 20px; background-color: #f4f4ff; display: block; max-width: 100%; margin: auto; box-sizing: border-box; -moz-box-sizing: border-box; } blockquote { border-left: 20px solid #f4f4ff; padding-left: 20px; margin: 0; color: #7E7E7E; } ul, ol { font-style: italic; padding-left: 20px; margin-bottom: 20px; margin-left: 20px; } ul li { list-style: disc; } ol li { list-style: decimal; } } .diary_post .richtext { margin-top: 20px; } .comments .richtext { margin-left: 70px; margin-top: 0; } /* Rules for rich text editors */ .richtext_container { white-space: nowrap; .richtext_content { display: inline-block; vertical-align: top; white-space: normal; .richtext_preview { display: inline-block; padding: 20px; background-color: #f4f4ff; overflow-x: scroll; &.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: 10px; width: 200px; ul { margin-bottom: 0; } h4.heading, li { border-bottom: 1px solid #ccc; margin-bottom: 5px; padding-bottom: 5px; } li h4, li span { display: block; font-size: 11px; } li h4 { margin: 0; float: left; } li span { float: right; width: 50%; margin-left: 10px; } input.richtext_doedit, input.richtext_dopreview { margin-right: 10px; } } } /* 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 */ .note { h2 { margin-bottom: 10px; } div { margin-top: 10px; } .warning { display: block; background-color: #ff7070; padding: 4px 6px; margin-bottom: 10px; } .comment_body { margin-top: 2px; margin-bottom: 2px; p { margin-top: 0px; margin-bottom: 0px; } } .comment { width: 100%; } .buttons { margin-top: 5px; text-align: right; } }