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 */
339 border-bottom: 1px solid #ccc;
353 list-style-type: none;
356 #tabnav a, #tabnav a:link, #tabnav a:visited {
364 text-decoration: none;
366 -webkit-transition: color 200ms ease-in;
367 -moz-transition: color 200ms ease-in;
368 -o-transition: color 200ms ease-in;
369 transition: color 200ms ease-in;
372 body.site-index #tabnav a#viewanchor,
373 body.site-edit #tabnav a#editanchor,
374 body.changeset-list #tabnav a#historyanchor,
375 body.site-export #tabnav a#exportanchor {
376 border-bottom: 1px solid #aaa;
381 #tabnav a:link:hover, #tabnav a:visited:hover {
382 text-decoration:underline;
385 #tabnav a:link.disabled,
386 #tabnav a:visited.disabled,
387 #tabnav a:link:hover.disabled,
388 #tabnav a:visited:hover.disabled {
393 #tabnav a:link.disabled:hover,
394 #tabnav a:visited.disabled:hover,
395 #tabnav a:link:hover.disabled:hover,
396 #tabnav a:visited:hover.disabled:hover {
397 text-decoration: none;
409 /* Rules for greeting bar in the top right corner */
420 .greeting-bar-unread {
424 /* Rules for the message shown in place of the map when javascript is disabled */
433 /* Rules for Leaflet maps */
456 .site-index .leaflet-top,
457 .site-export .leaflet-top {
458 top: 40px !important;
461 margin-top: 0px !important;
465 .site-index #map .olControlScaleLine,
466 .site-export #map .olControlScaleLine {
467 left: 10px !important;
470 /* Rules for edit menu */
477 text-decoration: none !important;
485 background-color: #ffffff;
486 border: 1px solid #cccccc;
498 list-style-type: none;
499 border-top: 1px solid #eee;
503 /* Rules for attribution text under the main map shown on printouts */
509 .attribution_license {
513 .attribution_notice {
517 .attribution_project {
521 /* Rules for the popout map sidebar */
526 margin: 30px 0px 0px 0px;
528 border-right: 1px solid #ccc;
535 #sidebar #sidebar_content {
546 #sidebar .sidebar_title {
548 padding: 3px 6px 4px 6px;
555 #sidebar #sidebar_title {
559 #sidebar #sidebar_close {
563 /* Rules for the map key which appears in the popout sidebar */
571 #mapkey .mapkey-table {
576 #mapkey .mapkey-table-key img {
582 #mapkey .mapkey-table-value {
586 /* Rules for search results which appear in the popout sidebar */
593 .search_results_heading {
596 border-bottom: 1px solid #ccc;
600 .search_results_entry {
605 .search_results_error {
607 padding: 2px 6px 0px;
611 /* Rules for data browser information which appears in the popout sidebar */
616 border: 1px solid #ccc;
625 /* Rules for export information which appears in the popout sidebar */
630 border-bottom: 1px solid #ccc;
669 /* Rules for the main content area */
673 margin: 30px 0px 0px 185px;
674 border-left: 1px solid #ccc;
679 .site-index #content,
680 .site-export #content {
690 .site-edit #content {
698 #slim_container_content {
700 background-color: #FFFFFF;
704 -moz-border-radius: 25px;
705 border: 1px solid #e6e6e6;
721 vertical-align: middle;
726 /* Rules for text content pages */
732 /* Rules for the home page */
750 /* Rules for the edit page */
761 /* Rules for the changeset list shown by the history tab etc */
763 #changeset_list_container {
770 border-collapse: collapse;
782 #changeset_list .date {
786 #changeset_list .user {
790 #changeset_list .area {
794 #changeset_list .selected {
795 background-color: rgb(255, 255, 160);
796 background-color: rgba(255, 255, 85, 0.5);
799 #changeset_list_map {
807 border: solid 1px black;
810 /* Rules for the data browser */
819 table.browse_details th {
830 #browse_map #small_map {
833 border: solid 1px black;
836 #browse_map .geolink {
840 /* Rules for the trace list shown by the traces tab etc */
844 border-collapse: collapse;
849 #trace_list .trace_summary {
854 #trace_list .trace_pending {
858 #trace_list .trace_public {
862 #trace_list .trace_identifiable {
866 #trace_list .trace_trackable {
870 #trace_list .trace_private {
874 /* Rules for the user list */
882 vertical-align: middle;
895 /* Rules for the diary list */
897 .diary_entry-list img.user_image {
901 .diary_entry-list img.user_thumbnail {
905 /* Rules for the diary entry view */
907 .diary_entry-view img.user_image {
911 .diary_entry-view img.user_thumbnail {
915 /* Rules for the new diary entry page */
917 .diary_entry div#map {
921 border: 1px solid #ccc;
925 /* Rules for the login page */
931 -moz-border-radius: 15px;
935 background-color: #f5f5ff;
936 border: 1px solid #f3f3ff;
938 -moz-border-radius: 15px;
945 table#login_openid_buttons {
946 padding-bottom: 10px;
949 #login_openid_buttons td {
956 #login_openid_buttons img {
960 #login_signup form.button-to div {
965 /* Rules for the account confirmation page */
967 div#contributorTerms {
968 border: 1px solid black;
975 div#slim_content div#contributorTerms {
979 div#contributorTerms p#first {
983 div#contributorTerms p#last {
987 div#contributorTerms ol {
991 div#contributorTerms img {
1003 form#termsForm div#buttons {
1007 form#termsForm input#agree {
1011 div#slim_content form#termsForm {
1015 p#contributorGuidance {
1016 background-color: #f5f5ff;
1017 border: 1px solid #f3f3ff;
1018 border-radius: 15px;
1019 -moz-border-radius: 15px;
1023 /* Rules for the account settings page */
1030 padding-bottom: 10px;
1033 #accountForm .user_map {
1037 border: 1px solid #ccc;
1040 #accountForm td.accountImage {
1042 vertical-align: top;
1047 display: inline-block;
1050 padding-bottom: 0px;
1064 display: inline !important;
1067 #accountForm input[type=submit] {
1071 /* Rules for the user view */
1073 .user-view img.user_image {
1077 .user-view .user_map {
1082 border: 1px solid #ccc;
1085 .user-view .user_map p#no_home_location {
1094 /* Rules for the user map */
1096 .user_map .leaflet-control-pan,
1097 .user_map .leaflet-control-zoomslider {
1101 .user_map .leaflet-control-zoom {
1105 /* Rules for user popups on maps */
1113 padding-bottom: 3px;
1120 .user_popup img.user_thumbnail {
1124 /* Rules for message in/out box page */
1128 border-collapse: collapse;
1129 border-spacing: 0px;
1133 .messages tbody tr {
1134 border-top: 1px solid #ccc;
1137 .messages .inbox-row {
1146 .inbox-row .inbox-mark-read {
1151 border-bottom: 1px solid #ccc;
1152 padding: 5px 0px 4px 0px;
1156 .info-line form div {
1160 .info-line .user_thumbnail_tiny {
1161 vertical-align: middle;
1168 .inbox-row-unread .inbox-mark-unread {
1172 /* Rules for "flash" notice boxes shown at the top of the content area */
1175 border: 1px solid red;
1177 background-color: #fff0f0;
1178 margin-bottom: 20px;
1180 -moz-border-radius: 5px;
1184 border: 1px solid orange;
1186 background-color: #fff6f0;
1187 margin-bottom: 20px;
1189 -moz-border-radius: 5px;
1193 border: 1px solid green;
1195 background-color: #f0fff0;
1196 margin-bottom: 20px;
1198 -moz-border-radius: 5px;
1201 /* Rules for highlighting fields with rails validation errors */
1203 .field_with_errors {
1205 background-color: red;
1209 /* Rules for rails validation error boxes */
1213 border: 2px solid red;
1215 padding-bottom: 12px;
1216 margin-bottom: 20px;
1217 background-color: #f0f0f0;
1220 #errorExplanation h2 {
1223 padding: 5px 5px 5px 15px;
1225 background-color: #c00;
1230 #errorExplanation p {
1236 #errorExplanation ul li {
1241 /* Rules for forms */
1244 vertical-align: top;
1260 input[type="email"],
1262 input[type="password"],
1264 border: 1px solid #ccc;
1268 background: image-url('openid_input.png') repeat-y left white;
1272 /* Rules for user images */
1277 border: 1px solid #ccc;
1280 img.user_thumbnail {
1283 border: 1px solid #ccc;
1286 img.user_thumbnail_tiny {
1289 border: 1px solid #ccc;
1292 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1295 white-space: nowrap;
1298 /* Rules for geo microformats */
1301 border-bottom: none;
1304 /* Rules for RSS buttons */
1311 /* Rules for doing distinct colour of alternate table rows */
1314 background: #f6f6f6;
1321 /* Rules for OpenID logo */
1324 vertical-align: text-bottom;
1328 /* Rules for rich text editors */
1330 .richtext_container {
1331 white-space: nowrap;
1334 display: inline-block;
1335 vertical-align: top;
1338 display: inline-block;
1341 border: 4px solid #eee;
1342 background-color: #eee;
1343 white-space: normal;
1346 background-image: image-url("loading.gif");
1347 background-repeat: no-repeat;
1348 background-position: center;
1358 display: inline-block;
1359 vertical-align: top;
1360 background-color: #ddd;
1362 padding: 5px 10px 10px 10px;
1370 vertical-align: top;
1372 padding: 0px 15px 0px 0px !important;
1379 padding: 0px !important;
1382 input.richtext_doedit {
1383 margin-top: 5px !important;
1384 margin-right: 10px !important;
1387 input.richtext_dopreview {
1388 margin-top: 5px !important;
1389 margin-left: 10px !important;