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