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