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