public/css/syj.css

   1 /*  This file is part of Syj, Copyright (c) 2010-2011 Arnaud Renevier,
   2     and is published under the AGPL license. */
   3
   4 body, html {
   5     margin: 0; padding: 0;
   6     width: 100%;
   7     height: 100%;
   8 }
   9
  10 /*
  11  * map rules
  12  */
  13 #map, #map-overlay {
  14     position: absolute;
  15     top: 0; left: 0; right: 0;
  16     bottom: 2em;
  17     *width: 100%;
  18     *height: 100%;
  19 }
  20 #map-overlay {
  21     background-color: gray;
  22     opacity: 0.2;
  23     filter:alpha(opacity=0.2);
  24 }
  25
  26 .olControlAttribution {
  27     bottom: 0.5em;
  28     *bottom: 2.5em;
  29     left: 0.5em;
  30 }
  31
  32 .olControlLayerSwitcher {
  33     bottom: 4em;
  34     top: auto;
  35     left: 13px;
  36     opacity: 0.75;
  37     height: 6em;
  38     max-width: intrinsic;
  39     max-width: -moz-max-content;
  40 }
  41
  42 /* setting opacity to .olControlLayerSwitcher does not work */
  43 .olControlLayerSwitcher .layersDiv,
  44 .olControlLayerSwitcher .maximizeDiv,
  45 .olControlLayerSwitcher .minimizeDiv
  46 {
  47     filter:alpha(opacity=75);
  48 }
  49
  50 .olControlLayerSwitcher .dataLayersDiv, .olControlLayerSwitcher .dataLbl {
  51     display: none;
  52 }
  53 .olControlLayerSwitcher .layersDiv {
  54     padding: 5px 12px 5px 36px;
  55 }
  56 .olControlLayerSwitcher .maximizeDiv {
  57     top: -6em;
  58 }
  59 .olControlLayerSwitcher .minimizeDiv {
  60     left: 4px;
  61 }
  62
  63 /*
  64  * main message rules
  65  */
  66
  67 #message {
  68     position: absolute;
  69     bottom: 3.5em;
  70     width: 40%;
  71     margin: 0px 45% 0px 15%;
  72     padding-bottom: 0.5em;
  73 }
  74 @media screen and (max-width: 640px) {
  75     #message.optional {
  76         display: none;
  77     }
  78 }
  79
  80 /*
  81  * menu rules
  82  */
  83
  84 #menu {
  85     text-align: right;
  86 }
  87
  88 .menu-group {
  89     z-index: 10; /* to be over nominatim-suggestions */
  90     position: relative; /* otherwise, under #map in ie */
  91     float: right;
  92     clear: right;
  93     padding-top: 8px;
  94     padding-left: 3em;
  95     opacity: 0.85;
  96     filter:alpha(opacity=85);
  97 }
  98
  99 .menu-item {
 100     position: relative; /* otherwise, under #map in ie */
 101     min-width: 150px;
 102     margin: 2px 10px 2px 0;
 103     background-color: white;
 104     text-decoration: none;
 105     border: #1E90FF 2px solid;
 106     padding: 2px 15px 2px 15px;
 107     -moz-border-radius: 5px;
 108     -webkit-border-radius: 5px;
 109     border-radius: 5px;
 110     background-color: white;
 111     cursor: pointer;
 112 }
 113 .menu-item:hover {
 114     background-color: #E0E0FF;
 115 }
 116
 117 .info-section {
 118     margin-bottom: 0.5em;
 119 }
 120 .info-section > h1 {
 121     text-decoration: underline;
 122     font-size: 1em;
 123     margin: 2px 0 2px 0;
 124 }
 125 .info-section a {
 126     text-decoration: none;
 127 }
 128
 129 #path-infos-content {
 130     text-align: center;
 131     padding: 4px 15px 15px 15px;
 132 }
 133
 134 #path-length {
 135     text-align: center;
 136     position: absolute; /* otherwise, under #map in ie */
 137     top: 1em;
 138     left: 5em;
 139     opacity: 0.85;
 140     margin-right: 12px;
 141     filter:alpha(opacity=85);
 142     background-color: white;
 143     padding: 2px 15px 2px 15px;
 144     -moz-border-radius: 5px;
 145     -webkit-border-radius: 5px;
 146     border-radius: 5px;
 147     background-color: white;
 148 }
 149
 150 #data_controls {
 151     position: absolute;
 152     z-index: 11; /* to be over login-controls */
 153     right: 0.5em;
 154     bottom: 3em;
 155     text-align: center;
 156     background-color: white;
 157     opacity: 0.85;
 158     filter:alpha(opacity=85);
 159     border: 1px solid gray;
 160     margin: auto;
 161     -moz-border-radius: 5px;
 162     -webkit-border-radius: 5px;
 163     border-radius: 5px;
 164 }
 165 #data_controls_btns {
 166     padding: 5px 10px 5px 10px;
 167 }
 168
 169 #nominatim-form {
 170     text-align: left;
 171     padding-bottom: 7px;
 172     margin-bottom: 3px;
 173     border-bottom: 1px solid black;
 174 }
 175 #nominatim-message {
 176     max-width: 16em;
 177     padding: 15px 0 15px 0;
 178 }
 179 #nominatim-label {
 180     text-decoration: none;
 181 }
 182 #nominatim-search {
 183     border: 1px solid black;
 184 }
 185 #nominatim-submit {
 186     width: 26px;
 187     border: 1px solid black;
 188     padding: 0;
 189 }
 190
 191 #geomform {
 192     padding: 25px 45px 20px 45px;
 193     *width: 40%; /* otherwise takes all screen width in ie<7 */
 194 }
 195 #edit-btn {
 196     margin-top: 1em;
 197 }
 198 #geom_title {
 199     margin-top: 0.7em;
 200 }
 201 #geom_submit {
 202     margin-top: 0.7em;
 203 }
 204
 205 #other-language {
 206     opacity: 0.85;
 207     filter:alpha(opacity=85);
 208     background-color: white;
 209     padding: 5px 1px 5px 1px;
 210     position: relative; /* otherwise, under #map in ie */
 211     margin-bottom: 10px;
 212 }
 213
 214 /* nominatim-suggestions */
 215 #nominatim-suggestions {
 216     text-align: left;
 217     border: 2px solid blue;
 218     -moz-border-radius: 8px;
 219     -webkit-border-radius: 8px;
 220     border-radius: 8px;
 221     max-width: 360px;
 222     width: 360px\9; /* ie only */
 223     background-color: white;
 224     position: absolute;
 225     right: 8px;
 226 }
 227 #nominatim-suggestions-list {
 228     margin-left: 0;
 229     position: relative;
 230     list-style: none;
 231     padding: 0 16px 0 12px;
 232 }
 233 #nominatim-suggestions-title {
 234     text-align: center;
 235     font-weight: bold;
 236 }
 237 #nominatim-suggestions-list li.current {
 238     background-color: #D3D3D3;
 239 }
 240 .nominatim-suggestions-icon {
 241     border: none;
 242     vertical-align: middle;
 243     margin-right: 4px;
 244 }
 245 .nominatim-suggestions-link {
 246     text-decoration: none;
 247 }
 248
 249 /* * login rules
 250  */
 251 .modal {
 252     background-color: white;
 253     text-align: center;
 254     width: 50%;
 255     margin-left: auto;
 256     margin-right: auto;
 257     padding: 21px;
 258     border: 1px solid gray;
 259     opacity: 0.85;
 260     filter:alpha(opacity=85);
 261 }
 262
 263 .form-table-elem {
 264     display: block;
 265     width: 100%;
 266 }
 267 .modal .message {
 268     margin: 0 35px 12px 35px;
 269 }
 270 #login_area_create {
 271     text-align: right;
 272 }
 273
 274 #user_control_anchor {
 275     text-align: right;
 276 }
 277
 278 #user_email-desc {
 279     margin: 0px 0px 12px 0px;
 280     padding: 8px 2px 8px 2px;
 281     background-color: #D3D3D3; /* lightgrey */
 282 }
 283
 284 #termsofusearea {
 285     height: 50%;
 286     /* override opacity defined in .modal rule */
 287     opacity: 1;
 288     filter:alpha(opacity=100);
 289 }