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