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