map.css (3258B) download
1/*body {
2 background-color: #BCCFB0;
3 color: #333333;
4 font-family: Roboto, sans-serif;
5 margin: 0;
6 padding: 0;
7}
8
9nav {
10 background-color: #333333;
11 width: 100%;
12 height: 15vw;
13 display: flex;
14 align-items: center;
15}
16
17nav ul {
18 margin: 0;
19 padding: 0;
20 width: 100%;
21 height: 15vw;
22 display: flex;
23 list-style-type: none;
24 align-items: center;
25}
26
27nav li {
28 font-weight: bold;
29 font-size: 4vw;
30 margin-right: 3vw;
31}
32
33nav ul li a {
34 color: #fff;
35 text-decoration: none;
36 padding: 0;
37}
38
39nav ul li a.active {
40 pointer-events: none;
41 color: gray;
42}
43
44nav ul li:first-child {
45 margin-right: auto;
46}
47
48.img-big-logo {
49 display: none;
50}
51
52.img-small-logo,
53.img-big-logo {
54 height: 15vw;
55 width: auto;
56 vertical-align: middle;
57}
58
59.hide {
60 background-color: rgba(33, 33, 33, 0.8);
61 border-radius: 5px;
62 text-align: center;
63 position: absolute;
64 margin: 0 auto;
65 display: none;
66 color: white;
67}
68
69.dutch-harbor-txt {
70 top: 14%;
71 left: 2%;
72}
73
74.etreillers-txt {
75 top: 20%;
76 left: 40%;
77}
78
79.inuvik-txt {
80 top: 9%;
81 left: 10%;
82}
83
84.ko-samui-txt {
85 top: 47%;
86 right: 10%;
87}
88
89.kufstein-txt {
90 top: 20%;
91 left: 40%;
92}
93
94.nurburg-txt {
95 top: 19%;
96 left: 40%;
97}
98
99.oost-vlieland-txt {
100 top: 17%;
101 left: 35%;
102}
103
104.sapporo-txt {
105 top: 23%;
106 right: 2%;
107}
108
109.taipai-txt {
110 top: 37%;
111 right: 3%;
112}
113
114.woolgoolga-txt {
115 top: 75%;
116 right: 1%;
117}
118
119@media (min-width: 400px) {
120 nav {
121 height: 60px;
122 }
123
124 nav ul {
125 height: 60px;
126 }
127
128 nav li {
129 font-size: 16px;
130 margin-right: 12px;
131 }
132
133 .img-small-logo,
134 .img-big-logo {
135 height: 60px;
136 }
137}
138
139@media (min-width: 700px) {
140 .img-big-logo {
141 display: block;
142 }
143
144 .img-small-logo {
145 display: none;
146 }
147
148 nav ul li:first-child {
149 margin-right: 0;
150 }
151
152 nav ul li:nth-child(2) {
153 margin-right: auto;
154 }
155}
156*/
157
158#map {
159 width: 100%;
160 height: 100%;
161}
162
163body, html {
164 height: 100%;
165}
166
167nav {
168 background-color: #333333;
169 width: 100%;
170 height: 15vw;
171 display: flex;
172 align-items: center;
173}
174
175nav ul {
176 margin: 0;
177 padding: 0;
178 width: 100%;
179 height: 15vw;
180 display: flex;
181 list-style-type: none;
182 align-items: center;
183}
184
185nav li {
186 font-weight: bold;
187 font-size: 4vw;
188 margin-right: 3vw;
189}
190
191nav ul li a {
192 color: #fff;
193 text-decoration: none;
194 padding: 0;
195}
196
197nav ul li a.active {
198 pointer-events: none;
199 color: gray;
200}
201
202nav ul li:first-child {
203 margin-right: auto;
204}
205
206.img-big-logo {
207 display: none;
208}
209
210.img-small-logo,
211.img-big-logo {
212 height: 15vw;
213 width: auto;
214 vertical-align: middle;
215}
216
217@media (min-width: 400px) {
218 nav {
219 height: 60px;
220 }
221
222 nav ul {
223 height: 60px;
224 }
225
226 nav li {
227 font-size: 16px;
228 margin-right: 12px;
229 }
230
231 .img-small-logo,
232 .img-big-logo {
233 height: 60px;
234 }
235}
236
237@media (min-width: 700px) {
238 .img-big-logo {
239 display: block;
240 }
241
242 .img-small-logo {
243 display: none;
244 }
245
246 nav ul li:first-child {
247 margin-right: 0;
248 }
249
250 nav ul li:nth-child(2) {
251 margin-right: auto;
252 }
253}