1 /* Styles common to large and small screens */
3 /* Default rules for the body of every page */
6 font-family: 'Helvetica Neue',Arial,sans-serif;
10 background-color: #fff;
17 background-color: #f0f0f0;
24 text-decoration: none;
28 text-decoration: underline;
31 /* Rules for horizontal lines */
35 background-color: #ccc;
40 /* Default rules for headings */
48 /* Rules for the whole left sidebar, including the logo */
57 border-right: 1px solid #ccc;
60 /* Rules for the OpenStreetMap logo in the top left corner */
88 /* Rules for the site name */
98 /* Rules for the introductory text displayed in the left sidebar to new users */
108 .sidebar-copy.intro {
110 border-top: 1px solid #ccc;
114 * Rules for alert boxes shown in the left sidebar when important
115 * information needs to be conveyed such as when the site is
116 * undergoing maintenance.
120 padding: 4px 5px 4px 5px;
121 border-top: 1px solid #ccc;
135 * Rules for notice boxes shown in the left sidebar when important, but
136 * non-critical information needs to be conveyed such as notices about
141 padding: 4px 5px 4px 5px;
142 border-top: 1px solid #ccc;
154 /* Rules for the menu displayed in the left sidebar */
162 list-style-type: none;
163 border-bottom: 1px solid #ccc;
164 border-top: 1px solid #ccc;
173 list-style-type: none;
179 padding: 5px 0 5px 0;
184 .left_menu li:last-child h4 {
188 /* Rules for SOTM advert */
203 * Rules for "optional boxes" which appear in the left sidebar on
204 * certain pages. Current users are the seach box on the main page
205 * and the tag cloud on the traces pages.
220 vertical-align: bottom;
223 /* Rules for the search box */
238 #search_field input[type="text"] {
243 padding: 2px 0px 2px 5px;
244 box-shadow: inset #DDD 0px 1px 3px;
245 box-sizing: border-box;
246 -webkit-box-sizing: border-box;
247 -moz-box-sizing: border-box;
248 -ms-box-sizing: border-box;
251 #search_field input[type="text"]:focus {
253 border: 1px solid #000;
256 #search_field input[type="submit"] {
260 text-indent: -1000px;
262 text-transform: capitalize;
265 background: image-url("sprite.png");
284 /* Rules for donation request box */
290 margin: 10px 10px 0px 10px;
292 border: 1px solid #AED1A0;
298 -moz-border-radius: 2px;
304 text-decoration: none;
312 .donate .donate-icon {
318 background: image-url("sprite.png") 0 -30px no-repeat;
324 /* Rules for Creative Commons logo button */
331 /* Rules for tabbed navigation bar */
340 border-bottom: 1px solid #ccc;
354 list-style-type: none;
357 #tabnav a, #tabnav a:link, #tabnav a:visited {
365 text-decoration: none;
367 -webkit-transition: color 200ms ease-in;
368 -moz-transition: color 200ms ease-in;
369 -o-transition: color 200ms ease-in;
370 transition: color 200ms ease-in;
373 body.site-index #tabnav a#viewanchor,
374 body.site-edit #tabnav a#editanchor,
375 body.changeset-list #tabnav a#historyanchor,
376 body.site-export #tabnav a#exportanchor {
377 border-bottom: 1px solid #aaa;
382 #tabnav a:link:hover, #tabnav a:visited:hover {
383 text-decoration:underline;
386 #tabnav a:link.disabled,
387 #tabnav a:visited.disabled,
388 #tabnav a:link:hover.disabled,
389 #tabnav a:visited:hover.disabled {
394 #tabnav a:link.disabled:hover,
395 #tabnav a:visited.disabled:hover,
396 #tabnav a:link:hover.disabled:hover,
397 #tabnav a:visited:hover.disabled:hover {
398 text-decoration: none;
410 /* Rules for greeting bar in the top right corner */
421 .greeting-bar-unread {
425 /* Rules for the message shown in place of the map when javascript is disabled */
434 /* Rules for Leaflet maps */
457 #permalink a.disabled {
460 text-decoration: none;
463 .site-index .leaflet-top,
464 .site-export .leaflet-top {
465 top: 40px !important;
468 margin-top: 0px !important;
472 .site-index #map .olControlScaleLine,
473 .site-export #map .olControlScaleLine {
474 left: 10px !important;
477 .leaflet-popup-scrolled {
479 border-bottom: 0px !important;
480 border-top: 0px !important;
483 /* Rules for edit menu */
490 text-decoration: none !important;
498 background-color: #ffffff;
499 border: 1px solid #cccccc;
511 list-style-type: none;
512 border-top: 1px solid #eee;
516 /* Rules for attribution text under the main map shown on printouts */
522 .attribution_license {
526 .attribution_notice {
530 .attribution_project {
534 /* Rules for the popout map sidebar */
539 margin: 30px 0px 0px 0px;
541 border-right: 1px solid #ccc;
548 #sidebar #sidebar_content {
559 #sidebar .sidebar_title {
561 padding: 3px 6px 4px 6px;
568 #sidebar #sidebar_title {
572 #sidebar #sidebar_close {
576 /* Rules for the map key which appears in the popout sidebar */
584 #mapkey .mapkey-table {
589 #mapkey .mapkey-table-key img {
595 #mapkey .mapkey-table-value {
599 /* Rules for search results which appear in the popout sidebar */
606 .search_results_heading {
609 border-bottom: 1px solid #ccc;
613 .search_results_entry {
618 .search_results_error {
620 padding: 2px 6px 0px;
624 /* Rules for data browser information which appears in the popout sidebar */
629 border: 1px solid #ccc;
638 /* Rules for export information which appears in the popout sidebar */
643 border-bottom: 1px solid #ccc;
682 /* Rules for the main content area */
686 margin: 30px 0px 0px 185px;
687 border-left: 1px solid #ccc;
692 .site-index #content,
693 .site-export #content {
703 .site-edit #content {
711 #slim_container_content {
713 background-color: #FFFFFF;
717 -moz-border-radius: 25px;
718 border: 1px solid #e6e6e6;
734 vertical-align: middle;
739 /* Rules for text content pages */
745 /* Rules for the home page */
763 /* Rules for the edit page */
774 /* Rules for the changeset list shown by the history tab etc */
776 #changeset_list_container {
783 border-collapse: collapse;
795 #changeset_list .date {
799 #changeset_list .user {
803 #changeset_list .area {
807 #changeset_list .selected {
808 background-color: rgb(255, 255, 160);
809 background-color: rgba(255, 255, 85, 0.5);
812 #changeset_list_map {
820 border: solid 1px black;
823 /* Rules for the data browser */
832 table.browse_details th {
840 td.browse_comments table {
841 border-collapse: collapse;
844 td.browse_comments table td {
845 padding-bottom: 10px;
848 td.browse_comments table td span.by {
860 #browse_map #small_map {
863 border: solid 1px black;
866 #browse_map .geolink {
870 /* Rules for the trace list shown by the traces tab etc */
874 border-collapse: collapse;
879 #trace_list .trace_summary {
884 #trace_list .trace_pending {
888 #trace_list .trace_public {
892 #trace_list .trace_identifiable {
896 #trace_list .trace_trackable {
900 #trace_list .trace_private {
904 /* Rules for the user list */
912 vertical-align: middle;
925 /* Rules for the diary list */
927 .diary_entry-list img.user_image {
931 .diary_entry-list img.user_thumbnail {
935 /* Rules for the diary entry view */
937 .diary_entry-view img.user_image {
941 .diary_entry-view img.user_thumbnail {
945 /* Rules for the new diary entry page */
947 .diary_entry div#map {
951 border: 1px solid #ccc;
955 /* Rules for the login page */
961 -moz-border-radius: 15px;
965 background-color: #f5f5ff;
966 border: 1px solid #f3f3ff;
968 -moz-border-radius: 15px;
975 table#login_openid_buttons {
976 padding-bottom: 10px;
979 #login_openid_buttons td {
986 #login_openid_buttons img {
990 #login_signup form.button-to div {
995 /* Rules for the account confirmation page */
997 div#contributorTerms {
998 border: 1px solid black;
1005 div#slim_content div#contributorTerms {
1009 div#contributorTerms p#first {
1013 div#contributorTerms p#last {
1017 div#contributorTerms ol {
1021 div#contributorTerms img {
1033 form#termsForm div#buttons {
1037 form#termsForm input#agree {
1041 div#slim_content form#termsForm {
1045 p#contributorGuidance {
1046 background-color: #f5f5ff;
1047 border: 1px solid #f3f3ff;
1048 border-radius: 15px;
1049 -moz-border-radius: 15px;
1053 /* Rules for the account settings page */
1060 padding-bottom: 10px;
1063 #accountForm .user_map {
1067 border: 1px solid #ccc;
1070 #accountForm td.accountImage {
1072 vertical-align: top;
1077 display: inline-block;
1080 padding-bottom: 0px;
1094 display: inline !important;
1097 #accountForm input[type=submit] {
1101 /* Rules for the user view */
1103 .user-view img.user_image {
1107 .user-view .user_map {
1112 border: 1px solid #ccc;
1115 .user-view .user_map p#no_home_location {
1124 /* Rules for the user map */
1126 .user_map .leaflet-control-pan,
1127 .user_map .leaflet-control-zoomslider {
1131 .user_map .leaflet-control-zoom {
1135 /* Rules for user popups on maps */
1143 padding-bottom: 3px;
1150 .user_popup img.user_thumbnail {
1154 /* Rules for message in/out box page */
1158 border-collapse: collapse;
1159 border-spacing: 0px;
1163 .messages tbody tr {
1164 border-top: 1px solid #ccc;
1167 .messages .inbox-row {
1176 .inbox-row .inbox-mark-read {
1181 border-bottom: 1px solid #ccc;
1182 padding: 5px 0px 4px 0px;
1186 .info-line form div {
1190 .info-line .user_thumbnail_tiny {
1191 vertical-align: middle;
1198 .inbox-row-unread .inbox-mark-unread {
1202 /* Rules for "flash" notice boxes shown at the top of the content area */
1205 border: 1px solid red;
1207 background-color: #fff0f0;
1208 margin-bottom: 20px;
1210 -moz-border-radius: 5px;
1214 border: 1px solid orange;
1216 background-color: #fff6f0;
1217 margin-bottom: 20px;
1219 -moz-border-radius: 5px;
1223 border: 1px solid green;
1225 background-color: #f0fff0;
1226 margin-bottom: 20px;
1228 -moz-border-radius: 5px;
1231 /* Rules for highlighting fields with rails validation errors */
1233 .field_with_errors {
1235 background-color: red;
1239 /* Rules for rails validation error boxes */
1243 border: 2px solid red;
1245 padding-bottom: 12px;
1246 margin-bottom: 20px;
1247 background-color: #f0f0f0;
1250 #errorExplanation h2 {
1253 padding: 5px 5px 5px 15px;
1255 background-color: #c00;
1260 #errorExplanation p {
1266 #errorExplanation ul li {
1271 /* Rules for forms */
1274 vertical-align: top;
1290 input[type="email"],
1292 input[type="password"],
1294 border: 1px solid #ccc;
1298 background: image-url('openid_input.png') repeat-y left white;
1302 /* Rules for user images */
1307 border: 1px solid #ccc;
1310 img.user_thumbnail {
1313 border: 1px solid #ccc;
1316 img.user_thumbnail_tiny {
1319 border: 1px solid #ccc;
1322 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1325 white-space: nowrap;
1328 /* Rules for geo microformats */
1331 border-bottom: none;
1334 /* Rules for RSS buttons */
1341 /* Rules for doing distinct colour of alternate table rows */
1344 background: #f6f6f6;
1351 /* Rules for OpenID logo */
1354 vertical-align: text-bottom;
1358 /* Rules for rich text editors */
1360 .richtext_container {
1361 white-space: nowrap;
1364 display: inline-block;
1365 vertical-align: top;
1368 display: inline-block;
1371 border: 4px solid #eee;
1372 background-color: #eee;
1373 white-space: normal;
1376 background-image: image-url("loading.gif");
1377 background-repeat: no-repeat;
1378 background-position: center;
1388 display: inline-block;
1389 vertical-align: top;
1390 background-color: #ddd;
1392 padding: 5px 10px 10px 10px;
1400 vertical-align: top;
1402 padding: 0px 15px 0px 0px !important;
1409 padding: 0px !important;
1412 input.richtext_doedit {
1413 margin-top: 5px !important;
1414 margin-right: 10px !important;
1417 input.richtext_dopreview {
1418 margin-top: 5px !important;
1419 margin-left: 10px !important;
1424 /* Rules for the notes interface */