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-title {
 118     text-decoration: underline;
 119 }
 120
 121 #path-infos-content {
 122     text-align: center;
 123     padding: 4px 15px 15px 15px;
 124 }
 125
 126 #path-export-title {
 127     margin-top: 1em;
 128 }
 129 #path-export-content a {
 130     text-decoration: none;
 131 }
 132
 133 #path-length {
 134     text-align: center;
 135     position: absolute; /* otherwise, under #map in ie */
 136     top: 1em;
 137     left: 5em;
 138     opacity: 0.85;
 139     margin-right: 12px;
 140     filter:alpha(opacity=85);
 141     background-color: white;
 142     padding: 2px 15px 2px 15px;
 143     -moz-border-radius: 5px;
 144     -webkit-border-radius: 5px;
 145     border-radius: 5px;
 146     background-color: white;
 147 }
 148
 149 #data_controls {
 150     position: absolute;
 151     z-index: 11; /* to be over login-controls */
 152     right: 0.5em;
 153     bottom: 3em;
 154     text-align: center;
 155     background-color: white;
 156     opacity: 0.85;
 157     filter:alpha(opacity=85);
 158     border: 1px solid gray;
 159     margin: auto;
 160     -moz-border-radius: 5px;
 161     -webkit-border-radius: 5px;
 162     border-radius: 5px;
 163 }
 164 #data_controls_btns {
 165     padding: 5px 10px 5px 10px;
 166 }
 167
 168 #nominatim-form {
 169     text-align: left;
 170     padding-bottom: 7px;
 171     margin-bottom: 3px;
 172     border-bottom: 1px solid black;
 173 }
 174 #nominatim-message {
 175     max-width: 16em;
 176     padding: 15px 0 15px 0;
 177 }
 178 #nominatim-label {
 179     text-decoration: none;
 180 }
 181 #nominatim-search {
 182     border: 1px solid black;
 183 }
 184 #nominatim-submit {
 185     width: 26px;
 186     border: 1px solid black;
 187     padding: 0;
 188 }
 189
 190 #geomform {
 191     padding: 25px 45px 20px 45px;
 192     *width: 40%; /* otherwise takes all screen width in ie<7 */
 193 }
 194 #edit-btn {
 195     margin-top: 1em;
 196 }
 197 #geom_title {
 198     margin-top: 0.7em;
 199 }
 200 #geom_submit {
 201     margin-top: 0.7em;
 202 }
 203
 204 #other-language {
 205     opacity: 0.85;
 206     filter:alpha(opacity=85);
 207     background-color: white;
 208     padding: 5px 1px 5px 1px;
 209     position: relative; /* otherwise, under #map in ie */
 210     margin-bottom: 10px;
 211 }
 212
 213 /* nominatim-suggestions */
 214 #nominatim-suggestions {
 215     text-align: left;
 216     border: 2px solid blue;
 217     -moz-border-radius: 8px;
 218     -webkit-border-radius: 8px;
 219     border-radius: 8px;
 220     max-width: 360px;
 221     width: 360px\9; /* ie only */
 222     background-color: white;
 223     position: absolute;
 224     right: 8px;
 225 }
 226 #nominatim-suggestions-list {
 227     margin-left: 0;
 228     position: relative;
 229     list-style: none;
 230     padding: 0 16px 0 12px;
 231 }
 232 #nominatim-suggestions-title {
 233     text-align: center;
 234     font-weight: bold;
 235 }
 236 #nominatim-suggestions-list li.current {
 237     background-color: #D3D3D3;
 238 }
 239 .nominatim-suggestions-icon {
 240     border: none;
 241     vertical-align: middle;
 242     margin-right: 4px;
 243 }
 244 .nominatim-suggestions-link {
 245     text-decoration: none;
 246 }
 247
 248 /* * login rules
 249  */
 250 .modal {
 251     background-color: white;
 252     text-align: center;
 253     width: 50%;
 254     margin-left: auto;
 255     margin-right: auto;
 256     padding: 21px;
 257     border: 1px solid gray;
 258     opacity: 0.85;
 259     filter:alpha(opacity=85);
 260 }
 261
 262 .form-table-elem {
 263     display: block;
 264     width: 100%;
 265 }
 266 .modal .message {
 267     margin: 0 35px 12px 35px;
 268 }
 269 #login_area_create {
 270     text-align: right;
 271 }
 272
 273 #user_control_anchor {
 274     text-align: right;
 275 }
 276
 277 #user_email-desc {
 278     margin: 0px 0px 12px 0px;
 279     padding: 8px 2px 8px 2px;
 280     background-color: #D3D3D3; /* lightgrey */
 281 }
 282
 283 #termsofusearea {
 284     height: 50%;
 285     /* override opacity defined in .modal rule */
 286     opacity: 1;
 287     filter:alpha(opacity=100);
 288 }