source: trunk/style/style.css

Last change on this file was 854, checked in by chronos, 8 years ago
  • Added: Responsive web layout. Two column layout is switched for single column for devices with smaller display.
  • Modified: All four boxes at front page made as oveflowing defined height.
File size: 9.0 KB
Line 
1.Menu
2{
3 background-color: #e8e8e8;
4 border-bottom-style: solid;
5 border-bottom-color: silver;
6 border-bottom-width: 1px;
7 padding: 2px;
8}
9
10.MenuItem
11{
12 float: left;
13}
14
15.MenuItem2
16{
17 text-align: right;
18 width: 100%;
19 font-weight: normal;
20 display: block;
21}
22
23.MenuItem2 form
24{
25 display: inline;
26 margin: 0px;
27}
28
29body
30{
31 font-size: 100%;
32 font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
33 color: #362b27;
34 padding: 0px;
35 margin: 0px;
36}
37
38h3
39{
40 text-align: center;
41 margin: 2px 2px 2px 2px;
42}
43
44a
45{
46 color: #DB7093;
47}
48
49a:visited
50{
51 color: #c43300;
52}
53
54a:hover
55{
56 color: #c33300;
57}
58
59a:active
60{
61 color:#000000;
62}
63
64.verticalmenu ul
65{
66 list-style:none;
67/*list-style-image: url("bullet.gif")*/
68 padding: 10px;
69 margin: 0px;
70}
71
72.verticalmenu li, .verticalmenua
73{
74 display: block;
75 font-family: Verdana, Arial, Helvetica, sans-serif;
76 font-size: 93%;
77 font-weight: bold;
78 color: #9A1212;
79 text-decoration: none;
80 text-align: left;
81
82 /*width: 120px;*/
83 /*height: 18px;*/
84 /*background: url('menuhover.gif') no-repeat;*/
85}
86
87.verticalmenu a:hover
88{
89 background: url('../images/menuhover.gif') no-repeat;
90 color: #dc4d1b;
91}
92
93#banner
94{
95 height: 75px;
96 text-align: center;
97 background: url('../images/header3.jpg') repeat bottom;
98 background-color: #ffffff;
99 padding: 0px;
100 margin: 0px;
101}
102
103#banner1
104{
105 width: 75px;
106 background: url('../images/header1.jpg') no-repeat left;
107}
108
109#banner2
110{
111 width: 75px;
112 background: url('../images/header2.jpg') no-repeat top right;
113}
114
115#banner img
116{
117 padding: 10px 0px;
118}
119
120#bannertitle
121{
122 font-size: 110%;
123 font-weight: bold;
124 text-align: center;
125 padding-bottom: 10px;
126}
127
128#bannertable
129{
130 padding: 0px;
131 margin: 0px;
132 height: 75px;
133 width: 100%;
134 border-collapse: collapse;
135}
136
137#border-left
138{
139 padding: 0px;
140 width: 14px;
141 background: url('../images/border-left.jpg') repeat top right;
142}
143
144#border-down
145{
146 padding: 0px;
147 height: 14px;
148 background: url('../images/border-down.jpg') repeat;
149}
150
151#border-right
152{
153 padding: 0px;
154 width: 14px;
155 background: url('../images/border-right.jpg') repeat top right;
156}
157
158#border-top
159{
160 width: 14px;
161 background: url('../images/border-top.jpg') repeat top right;
162}
163
164.edit
165{
166 color: #362b27;
167 background-color: #DB7093;
168 text-decoration: none;
169}
170
171.edit:visited
172{
173 color: #362b27;
174 background-color: #DB7093;
175 text-decoration: none;
176}
177.edit:hover
178{
179 color: #362b27;
180 background-color: #DB7093;
181 text-decoration: none;
182}
183
184.needtran
185{
186 color: #362b27;
187 background-color: #D0D0D0;
188 text-decoration: none;
189}
190.needtran:visited
191{
192 color: #362b27;
193 background-color: #D0D0D0;
194 text-decoration: none;
195}
196.needtran:hover
197{
198 color: #362b27;
199 background-color: #D0D0D0;
200 text-decoration: none;
201}
202
203.page
204{
205 width: 100%;
206 margin: 0px;
207 padding: 0px;
208 border-collapse: collapse;
209}
210
211.menu
212{
213 width: 9em;
214 vertical-align: top;
215 padding: 4px;
216 margin-left: auto;
217 margin-right: auto;
218 background-color: #F0F0F0;
219 background: #E8E8E8 url('../images/menubottom.jpg') no-repeat bottom right;
220}
221
222.menu2
223{
224 width: 12em;
225 vertical-align: top;
226 padding: 4px;
227 margin-left: auto;
228 margin-right: auto;
229 background-color: #F0F0F0;
230}
231
232.content
233{
234 background:#ffffff url('../images/content.jpg') no-repeat top right;
235 vertical-align: top;
236 padding: 5px 5px 5px 0px;
237 margin-left: 0px;
238}
239
240/**************Menu***************/
241.hidden-menu-item
242{
243 display: none;
244 background-color: #FFF0F0;
245 margin: 0px 5px 0px 5px;
246 padding: 2px;
247 border-style: solid;
248 border-color: red;
249 border-width: 1px;
250}
251
252#TranslationMenu
253{
254 margin: 0px 0px 0px 5px;
255}
256
257.box
258{
259 overflow: auto;
260 height: 400px;
261}
262
263.shoutbox
264{
265 width: 100%;
266 font-size: 80%;
267 border-width: 1px;
268 border-style: solid;
269 border-color: #c43300;
270 background-color: white;
271}
272
273.shoutbox div
274{
275 border-bottom-style: solid;
276 border-bottom-width: 1px;
277 border-bottom-color: #e0e0e0;
278 padding: 0px;
279}
280
281.shoutbox h4
282{
283 text-align: left;
284 margin: 5px 0px 0px 0px;
285}
286
287.page-bottom
288{
289 color:#FFFFFF;
290 text-align: center;
291 padding-top: 0px;
292 margin-top: 10px;
293 border-top-style: solid;
294 border-top-color: gray;
295 border-top-width: 1px;
296 background: url('../images/footer.gif') repeat-x ;
297}
298
299.page-bottom img
300{
301 border-width: 0px;
302}
303
304.banner
305{
306 border-style: none;
307 border-width: 0px;
308}
309
310.BaseTable
311{
312 margin: 2px auto 2px auto;
313 border-width: 1px;
314 border-color: black;
315 border-style: solid;
316 border-collapse: collapse;
317}
318
319.BaseTable tr td
320{
321 border-width: 1px;
322 border-color: black;
323 border-style: solid;
324 padding: 2px;
325 text-align: center;
326}
327
328.BaseTable tr th
329{
330 border-width: 1px;
331 border-color: black;
332 border-style: solid;
333 padding: 2px;
334 background-color: #F0F0F0;
335 text-align: center;
336}
337
338.SQLCode
339{
340 background-color: #F0F0F0;
341 border-width: 1px;
342 border-style: solid;
343 border-color: black;
344 padding: 5px;
345 overflow: auto;
346}
347
348.NewsBox
349{
350 border-width: 1px;
351 border-color: #c43300;
352 border-style: solid;
353 overflow: auto;
354 font-size: small;
355 background-color: #E8E8E8;
356 padding: 3px;
357}
358
359.NewsBox div
360{
361 border-bottom-width: 1px;
362 border-bottom-color: #c43300;
363 border-bottom-style: solid;
364 padding-bottom: 5px;
365}
366
367.NewsBox h4
368{
369 text-align: left;
370 margin: 5px 0px 0px 0px;
371}
372
373.Home
374{
375 width: 100%;
376}
377
378.Home tr td
379{
380 vertical-align: top;
381 padding-right: 5px;
382}
383
384input, select
385{
386 background-color: #E8E8E8;
387 border: 1px #c43300 solid;
388 font-size: 80%;
389 font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
390}
391
392textarea
393{
394 background-color: white;
395 border: 1px #c43300 solid;
396 font-size: 80%;
397 font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
398}
399
400.news-box
401{
402 width: 60%;
403}
404
405.state-image
406{
407 margin: 0px 0px 0px 0px;
408 padding: 1px 0px 0px 0px;
409 border-width: 0px;
410}
411
412.state-image img
413{
414 display: inline;
415 border-width: 0px;
416 margin: 0px 0px 0px 0px;
417 padding: 0px 0px 0px 0px;
418}
419
420form
421{
422 margin: 1px 1px 1px 1px;
423 padding: 0px 0px 0px 0px;
424}
425
426fieldset
427{
428 padding: 2px 5px 5px 5px;
429}
430
431table .Description
432{
433 vertical-align: top;
434 width: 50%;
435}
436
437.UserList
438{
439 width: 100%;
440 text-align: center;
441}
442
443#header ul
444{
445 list-style: none;
446 padding: 0;
447 margin: 0;
448}
449
450#header li
451{
452 float: left;
453 border: 1px solid #bbb;
454 border-bottom-width: 0;
455 margin: 0;
456}
457
458#header a
459{
460 text-decoration: none;
461 display: block;
462 background: #eee;
463 padding: 0.24em 1em;
464 color: #c00;
465 text-align: center;
466}
467
468#header a:hover
469{
470 background: #fdd;
471}
472
473#header #selected
474{
475 border-color: black;
476}
477
478#header #selected a
479{
480 position: relative;
481 top: 1px;
482 background: white;
483 color: black;
484 font-weight: bold;
485}
486
487#content
488{
489 border: 1px solid black;
490 clear: both;
491 padding: 5px;
492}
493
494.progressbar
495{
496 position: relative;
497 border: 0px solid black;
498 background-color: #e0e0e0;
499 display: inline-block;
500}
501
502.progressbar .bar
503{
504 position: absolute;
505 top: 0;
506 left: 0;
507 height: 100%;
508 background-color: #ff8080;
509}
510
511.progressbar .text
512{
513 text-align: center;
514 position: relative;
515}
516
517.message
518{
519 border-width: 1px 1px 1px 1px;
520 border-color: black;
521 border-style: solid;
522 padding: 5px;
523 margin-bottom: 10px;
524}
525
526.message .icon
527{
528 vertical-align: top;
529 padding-right: 5px;
530}
531
532.MiniTable
533{
534 margin: 2px auto 2px auto;
535 border-width: 0px;
536 border-color: black;
537 border-style: solid;
538 border-collapse: collapse;
539 border-spacing: 0px 0px;
540 font-size: small;
541 background-color: #E8E8E8;
542}
543
544.MiniTable tr td
545{
546 border-width: 1px;
547 border-color: #c43300;
548 border-style: solid;
549 padding: 1px 1px 1px 1px;
550 margin: 0px 0px 0px 0px;
551 text-align: center;
552 vertical-align: middle;
553}
554
555.MiniTable tr th
556{
557 border-width: 1px;
558 border-color: #c43300;
559 border-style: solid;
560 margin: 0px 0px 0px 0px;
561 padding: 1px 1px 1px 1px;
562 text-align: center;
563 vertical-align: middle;
564}
565
566.advert
567{
568 text-align: center;
569}
570
571.SideBox
572{
573 width: 40%;
574}
575
576.Form
577{
578 margin-left: auto;
579 margin-right: auto;
580 text-align: center;
581}
582
583.Form fieldset
584{
585 display: inline-block;
586 text-align: left;
587}
588
589.Form fieldset table tr .Left
590{
591 text-align: right;
592 font-weight: normal;
593 padding-right: 6px;
594}
595
596.Form fieldset table tr .Center
597{
598 text-align: center;
599 font-weight: normal;
600}
601
602/* Mobile Layout: 480px and below. */
603
604.box-left {
605 clear: both;
606 float: left;
607 margin-left: 0;
608 width: 100%
609 display: block;
610 margin-bottom: 10px;
611}
612
613.box-right {
614 clear: none;
615 float: left;
616 margin-left: 0;
617 width: 100%;
618 display: block;
619 margin-bottom: 10px;
620}
621
622/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
623@media screen and (min-width: 480px) {
624
625.box-left {
626 clear: both;
627 float: left;
628 margin-left: 0;
629 width: 100%
630 display: block;
631 margin-bottom: 10px;
632}
633
634.box-right {
635 clear: none;
636 float: left;
637 margin-left: 0;
638 width: 100%;
639 display: block;
640 margin-bottom: 10px;
641}
642
643}
644
645/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
646@media only screen and (min-width: 769px) {
647
648.box-left {
649 clear: both;
650 float: left;
651 margin-left: 0;
652 width: 49%;
653 display: block;
654 margin-bottom: 10px;
655}
656
657.box-right {
658 clear: none;
659 float: left;
660 margin-left: 1%;
661 width: 49%;
662 display: block;
663 margin-bottom: 10px;
664}
665
666}
Note: See TracBrowser for help on using the repository browser.