#left {
position: absolute;
- top: 0px;
+ top: 30px;
+ bottom: 0;
width: 185px;
font-size: 11px;
line-height: 12px;
/* Rules for the OpenStreetMap logo in the top left corner */
#logo {
+ display: block;
width: 170px;
min-width: 170px;
padding: 5px;
text-align: center;
- margin: 25px 0 5px 0;
+ margin: auto;
+}
+
+#logo img {
+ border: 0px;
}
#logo h1 {
display: none;
}
+#small-title img {
+ border: 0px;
+}
+
/* Rules for the introductory text displayed in the left sidebar to new users */
.sidebar-copy {
- border-top: 1px solid #ccc;
- padding: 0px 5px;
+ padding: 5px 10px;
}
.sidebar-copy p {
- margin: 5px;
+ margin: 5px 0;
+}
+
+.sidebar-copy.intro {
+ margin-top: -1px;
+ border-top: 1px solid #ccc;
}
/*
*/
.sidebar-alert {
- padding: 0px 5px 0.1px 5px;
+ padding: 4px 5px 4px 5px;
border-top: 1px solid #ccc;
margin-top: 4px;
margin-bottom: -4px;
*/
.sidebar-notice {
- padding: 0px 5px 0.1px 5px;
+ padding: 4px 5px 4px 5px;
border-top: 1px solid #ccc;
margin-top: 4px;
margin-bottom: -4px;
/* Rules for the menu displayed in the left sidebar */
.left_menu {
+ margin: 0;
padding: 5px 10px;
- margin: 4px 0;
- border-top: 1px solid #ccc;
+ line-height: 15px;
+ font-size: 12px;
+ list-style-type: none;
border-bottom: 1px solid #ccc;
- line-height: 20px;
- font-size: 14px;
- font-weight: bold;
-}
-
-.left_menu h1 {
- font-style: normal;
- font-size: 15px;
+ border-top: 1px solid #ccc;
}
.left_menu ul {
- margin: 0px;
- list-style-type: none;
+ padding: 0;
+ margin: 0;
}
.left_menu li {
- margin: 0px;
- padding: 0px;
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
}
-/* submenus */
-.left_menu ul li ul {
- font-weight: normal;
- line-height: 15px;
+.left_menu h4 {
+ padding: 5px 0 5px 0;
font-size: 12px;
+ margin: 0;
}
-.left_menu a {
- color: #000;
+.left_menu li:last-child h4 {
+ padding-top: 0;
}
/* Rules for SOTM advert */
#sotm {
- width: 180px;
- min-width: 180px;
- margin: 5px;
+ 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
.optionalbox {
padding: 5px 10px;
- margin: 4px 0;
- border-top: 1px solid #ccc;
+ margin: 5px 0;
}
.optionalbox h1 {
/* Rules for the search box */
.whereami {
- line-height: 20px;
- vertical-align: bottom;
-}
-
-.search_container {
- height: 15px;
- padding-bottom: 5px;
}
#search_field form {
- width: 100%;
+ width: 165px;
margin: 0px;
padding: 0px;
}
+#search_field {
+ position:relative;
+}
+
#search_field input[type="text"] {
- width: 130px;
+ width: 165px;
+ font-size: 14px;
+ line-height: 15px;
+ height: 25px;
+ 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"] {
- width: 26px;
+ width: 15px;
+ height: 15px;
+ border: 0px;
+ text-indent: -1000px;
+ overflow: hidden;
+ text-transform: capitalize;
padding-left: 0px;
padding-right: 0px;
+ background: image-url("sprite.png");
+ position: absolute;
+ top: 5px;
+ cursor: pointer;
}
.search_help {
- margin-top: 2px;
- margin-bottom: 0px;
+ margin: 5px 0 0 0;
+}
+
+.deemphasize {
+ color: #999;
+}
+
+.deemphasize a {
+ color: #7092FF;
}
/* Rules for donation request box */
.donate {
+ display: block;
+ position: relative;
width: 153px;
- margin: 10px 10px;
+ margin: 10px 10px 0px 10px;
padding: 5px;
- border: 1px solid #ccc;
+ border: 1px solid #AED1A0;
background: #cbeea7;
line-height: 20px;
text-align: center;
font-size: 14px;
- border-radius: 5px;
- -moz-border-radius: 5px;
+ border-radius: 2px;
+ -moz-border-radius: 2px;
+ color: #222;
+}
+
+.donate:hover {
+ background: #9ed485;
+ text-decoration: none;
+}
+
+.donate p {
+ text-indent: 20px;
+ margin: 0;
+}
+
+.donate .donate-icon {
+ width: 15px;
+ height: 15px;
+ border: 0px;
+ padding-left: 0px;
+ padding-right: 0px;
+ background: image-url("sprite.png") 0 -30px no-repeat;
+ position: absolute;
+ top: 8px;
}
/* Rules for Creative Commons logo button */
/* Rules for tabbed navigation bar */
#top-bar {
- border-bottom: 1px solid #ccc;
+ position: absolute;
+ top: 0;
height: 29px;
+ border-bottom: 1px solid #ccc;
+ background: white;
}
#tabnav {
padding: 5px 10px;
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;
}
-#tabnav a:link.active, #tabnav a:visited.active {
+body.site-index #tabnav a#viewanchor,
+body.site-edit #tabnav a#editanchor,
+body.changeset-list #tabnav a#historyanchor,
+body.site-export #tabnav a#exportanchor {
border-bottom: 1px solid #aaa;
background: #9ed485;
color: #000;
text-decoration: none;
}
+.count-number {
+ padding: 2px 5px;
+ border-radius: 3px;
+ background: #eee;
+ margin: 0 2px;
+ font-size: 11px;
+ color: #333;
+}
+
/* Rules for greeting bar in the top right corner */
#greeting {
top: 15px;
}
-/* Rules for OpenLayers maps */
+/* Rules for Leaflet maps */
#map {
margin: 0px;
+ border: 0px;
padding: 0px;
}
-.olControlAttribution {
- bottom: 15px !important;
- left: 0px !important;
- right: 0px !important;
- text-align: center;
-}
-
#permalink {
z-index: 10000;
position: absolute;
padding: 5px;
}
+.site-index .leaflet-top,
+.site-export .leaflet-top {
+ margin-top: 40px !important;
+}
+
/* Rules for edit menu */
+.menuicon {
+ padding: 5px;
+
+ &:hover {
+ background: #eee;
+ text-decoration: none !important;
+ }
+}
+
.menu {
display: none;
z-index: 10000;
position: absolute;
background-color: #ffffff;
- border: 1px solid black;
+ border: 1px solid #cccccc;
+ border-top: 0px;
}
.menu ul {
- margin-top: 10px;
- margin-bottom: 10px;
- padding-left: 10px;
- padding-right: 10px;
+ margin: 0px;
+ padding: 0px;
}
.menu li {
+ padding: 2px 5px;
+ margin: 0px;
list-style-type: none;
+ border-top: 1px solid #eee;
white-space: nowrap;
}
#sidebar {
display: none;
position: absolute;
- margin: 0px;
+ margin: 30px 0px 0px 0px;
padding: 0px;
width: 30%;
top: 0px;
height: 29px;
font-size: 14px;
line-height: 15px;
- background: #bbb;
+ background: #ccc;
}
/* Rules for the map key which appears in the popout sidebar */
padding-right: 5px;
}
-#mapkey .mapkey-table-key {
+#mapkey .mapkey-table-key img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
}
#mapkey .mapkey-table-value {
/* Rules for the main content area */
#content {
- padding: 10px;
- margin: 0px;
- position: absolute;
- bottom: 0px;
+ padding: 20px;
+ margin: 30px 0px 0px 0px;
}
-#content.site_index,
-#content.site_edit,
-#content.site_export {
- border: 0px;
+.site-edit #content,
+.site-index #content,
+.site-export #content {
+ position: fixed;
+ margin-top: 0px;
+ left: 0px;
+ right: 0px;
+ top: 0px;
+ bottom: 0px;
padding: 0px;
}
+.site-edit #content {
+ top: 30px;
+}
+
#slim_container {
width: 100%;
}
margin-bottom: 5px;
}
+/* Rules for text content pages */
+
+.wide-table {
+ width: 100%;
+}
+
/* Rules for the home page */
-.site_index #map {
+.site-index #map {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
}
-.site_export #map {
+.site-export #map {
position: absolute;
top: 0px;
bottom: 0px;
/* Rules for the edit page */
-.site_edit #map {
+.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 */
/* Rules for the account settings page */
+#accountForm {
+ margin-top: 20px;
+}
+
#accountForm td {
padding-bottom: 10px;
}
#accountForm .user_map {
position: relative;
width: 500px;
- height: 400px;
+ height: 400px;
border: 1px solid #ccc;
}
-#accountImage td {
- padding-bottom: 0px;
+#accountForm td.accountImage {
+ img {
+ vertical-align: top;
+ margin-top: 3px;
+ }
+
+ table {
+ display: inline-block;
+
+ td {
+ padding-bottom: 0px;
+ }
+ }
}
.nohome .location {
/* Rules for the user view */
-.user_view .user_map {
+.user-view .user_map {
position: relative;
width: 400px;
- height: 400px;
+ height: 400px;
border: 1px solid #ccc;
}
-.user_view .user_map p#no_home_location {
+.user-view .user_map p#no_home_location {
position: absolute;
top: 0px;
bottom: 0px;
/* Rules for the user map */
-.user_map .olControlPanZoomBar {
- display: none;
-}
-
-.user_map .olControlPanZoom {
- display: block;
-}
-
/* Rules for user popups on maps */
.user_popup p {
/* Rules for message in/out box page */
-#messages {
- border: 1px solid #ccc;
+.messages {
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0px;
+ border-width: 0px;
}
-.inbox-row-unread .inbox-subject {
- font-weight: bold;
+.messages tbody tr {
+ border-top: 1px solid #ccc;
+}
+
+.messages .inbox-row {
+ background: #eee;
+}
+
+.messages tr td,
+.messages tr th {
+ padding: 0px 5px;
+}
+
+.inbox-row .inbox-mark-read {
+ display: none;
+}
+
+.info-line {
+ border-bottom: 1px solid #ccc;
+ padding: 5px 0px 4px 0px;
+}
+
+.info-line form,
+.info-line form div {
+ display: inline;
+}
+
+.info-line .user_thumbnail_tiny {
+ vertical-align: middle;
+}
+
+.right {
+ float: right;
+}
+
+.inbox-row-unread .inbox-mark-unread {
+ display: none;
}
/* Rules for "flash" notice boxes shown at the top of the content area */
input[type="url"],
input[type="password"],
textarea {
- border: 1px solid #888;
+ border: 1px solid #ccc;
}
/* Rules for user images */
img.user_image {
max-width: 100px;
max-height: 100px;
- border: 1px solid black;
+ border: 1px solid #ccc;
}
img.user_thumbnail {
max-width: 50px;
max-height: 100px;
- border: 1px solid black;
+ border: 1px solid #ccc;
+}
+
+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 */
}
}
}
-
-/* Rules for the layer switcher */
-
-.SimpleLayerSwitcher {
- position:absolute;
- top:10px;
- right:10px;
- background:#fff;
- border:1px solid #ccc;
- min-width:150px;
- background: #fff;
-}
-
-.SimpleLayerSwitcher a.basey {
- display:block;
- text-decoration:none;
- color:#838383;
- padding:2px 5px 2px 20px;
-}
-
-.SimpleLayerSwitcher a.basey-on {
- color:#000;
- background-color: #fff;
- background-image: url('carat.png');
- background-repeat: no-repeat;
- background-position: 7px 9px;
-}
-
-.SimpleLayerSwitcher a.basey-off {
- display:none;
-}
-
-.SimpleLayerSwitcher:hover a {
- border-top:1px solid #eee;
-}
-
-.SimpleLayerSwitcher a:hover {
- background-color:#f5f5f5;
-}
-
-.SimpleLayerSwitcher:hover a:first-child {
- border-top:none;
-}
-
-.SimpleLayerSwitcher:hover a.basey-off {
- display:block;
-}