source: trunk/web-app/css/main.css @ 452

Last change on this file since 452 was 452, checked in by gav, 14 years ago

Replace ajax spinner with a new loading bar.

File size: 12.7 KB
Line 
1html * {
2    margin: 0;
3    /*padding: 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
4
5}
6
7/* GENERAL */
8
9.spinner {
10    padding: 10px 0 0 18px;
11    position: absolute;
12}
13
14body {
15    text-align: center;
16    color: #222;
17    font: 14px verdana, arial, helvetica, sans-serif;
18    background: transparent url("../images/brushed_metal.png") repeat fixed center;
19}
20
21#wrapper {
22  margin: 0 auto;
23  padding: 0;
24  width: 1024px;
25}
26
27#top {
28  background: url("../images/topBg.png") no-repeat scroll center;
29  width: 1020px;
30  height: 31px;
31}
32
33#content {
34  padding: 0px 20px 20px;
35  background: url("../images/contentbg.png") repeat-y scroll center;
36  width: 980px;
37  /*border: 1px solid #ccc;*/
38}
39
40#Header {
41  background: transparent url("../images/logo.png") no-repeat scroll center;
42  width: 980px;
43  height: 136px;
44  /*border: 1px solid;*/
45}
46#HeaderLink{
47  display: block;
48  width: 958px;
49  height: 136px;
50}
51
52/* Navigation plugin, top level. */
53#menu {
54    float: left;
55    /*border: 1px solid #ccc;*/
56}
57
58/* Application log textarea */
59#log {
60    width: 920px;
61    height: auto;
62}
63
64div.tabHeader {
65    padding: 5px 15px 40px 15px;
66    margin-bottom: -45px;
67}
68.tabHeader h1 {
69    color: #2647a0;
70    font-weight: bold;
71    font-size: 17px;
72    margin: 0 0 .3em 0;
73}
74.tabHeader h2 {
75    color: #2647a0;
76    font-weight: normal;
77    font-size: 15px;
78    margin: 0 0 .3em 0;
79}
80
81a:link, a:visited, a:hover {
82    color: #006dba;
83    font-weight: bold;
84    text-decoration: none;
85}
86
87img {
88    border: 0px;
89}
90
91/*Do not specify a global h2 and h3
92    Since this changes filterPane and other headers.*/
93h1 {
94    color: #006dba;
95    font-weight: normal;
96    font-size: 17px;
97    margin: 0 0 .3em 0;
98}
99
100ul {
101    padding-left: 15px;
102}
103
104input, select, textarea {
105    background-color: #fcfcfc;
106    border: 1px solid #ccc;
107    font: 14px verdana, arial, helvetica, sans-serif;
108    margin: 2px 0;
109    padding: 2px 4px;
110}
111select {
112   padding: 2px 2px 2px 0;
113}
114textarea {
115    width: 450px;
116    height: 150px;
117    vertical-align: top;
118}
119
120input:focus, select:focus, textarea:focus {
121    border: 1px solid #b2d1ff;
122}
123
124.body {
125    padding: 20px 20px 20px 20px;
126    text-align: center;
127    /*border: 1px solid #ccc;*/
128}
129
130/* Logout and Top Navigation Level */
131
132.appControl {
133    height: 2em;
134}
135.appControl a {
136    color: #666;
137}
138
139.logoutButton {
140    float: right;
141    padding: 0.3em 0px 0.3em 0;
142    font-size: 14px;
143    margin: 0 50px 0 0;
144    /*border: 1px solid #ccc;*/
145}
146
147.logoutButton:hover {
148    color: red;
149    padding: 0.5em 0px 0.1em 0;
150}
151
152/* ORIGINAL NAVIGATION MENU */
153
154.nav {
155    text-align: center;
156    background: url("../images/linkPanel_long.png") top no-repeat;
157    padding: 10px 0px 0px 0px;
158    width: 980px;
159    height: 40px;
160}
161
162.menuButton {
163    font-size: 14px;
164    padding: 0 5px;
165}
166.menuButton a {
167    color: #333;
168    padding: 14px 25px;
169}
170.menuButton a.home {
171    /*background: url(../images/skin/house.png) center left no-repeat;*/
172    color: #333;
173    /*padding: 25px;*/
174}
175.menuButton a.list {
176    /*background: url(../images/skin/database_table.png) center left no-repeat;*/
177    color: #333;
178    /*padding-left: 25px;*/
179}
180.menuButton a.create {
181    /*background: url(../images/skin/database_add.png) center left no-repeat;*/
182    color: #333;
183    /*padding-left: 25px;*/
184}
185
186/* MESSAGES AND ERRORS */
187
188.message {
189    background: #f3f8fc url(../images/skin/information.png) 8px 50% no-repeat;
190    border: 1px solid #b2d1ff;
191    color: #006dba;
192    margin: 10px 0 5px 0;
193    padding: 5px 5px 5px 0px
194}
195
196.message_error {
197    background: #fff3f3 url(../images/skin/exclamation.png) 8px 50% no-repeat;
198    border: 1px solid red;
199    color: #cc0000;
200    margin: 10px 0 5px 0;
201    padding: 5px 5px 5px 0px
202}
203
204div.errors {
205    background: #fff3f3;
206    border: 1px solid red;
207    color: #cc0000;
208    margin: 10px 0 5px 0;
209    padding: 5px 0 5px 0;
210}
211div.errors ul {
212    list-style: none;
213    padding: 0;
214}
215div.errors li {
216    background: url(../images/skin/exclamation.png) 8px 0% no-repeat;
217    line-height: 16px;
218    padding-left: 30px;
219}
220
221td.errors select {
222    border: 1px solid red;
223}
224td.errors input {
225    border: 1px solid red;
226}
227td.errors textarea {
228    border: 1px solid red;
229}
230
231input.time {
232    width:40px;
233}
234input.time.errors {
235    border: 1px solid red;
236}
237input.medium {
238    width:60px;
239}
240input.medium.errors {
241    border: 1px solid red;
242}
243input.description {
244    width:450px;
245}
246
247/* TABLES */
248
249table {
250    border: 1px solid #ccc;
251    width: 100%;
252}
253tr {
254    border: 0;
255}
256td, th {
257    font: 14px verdana, arial, helvetica, sans-serif;
258    line-height: 17px;
259    padding: 5px 6px;
260    text-align: left;
261    vertical-align: top;
262}
263td.idColumn {
264    width: 25px;
265}
266th {
267    background: #fff url(../images/skin/shadow.jpg);
268    color: #555;
269    font-size: 14px;
270    font-weight: bold;
271    line-height: 17px;
272    padding: 2px 6px;
273}
274th a:link, th a:visited, th a:hover {
275    color: #333;
276    display: block;
277    font-size: 14px;
278    text-decoration: none;
279    width: 100%;
280}
281th.asc a, th.desc a {
282    background-position: right;
283    background-repeat: no-repeat;
284}
285th.asc a {
286    background-image: url(../images/skin/sorted_asc.gif);
287}
288th.desc a {
289    background-image: url(../images/skin/sorted_desc.gif);
290}
291
292.odd {
293    background: #f7f7f7;
294}
295.even {
296    background: #fff;
297}
298
299.clickableOdd {
300    background: #f7f7f7;
301    cursor: pointer;
302}
303.clickableEven {
304    background: #fff;
305    cursor: pointer;
306}
307
308/* LIST */
309
310.list table {
311    border-collapse: collapse;
312}
313.list th, .list td {
314    border-left: 1px solid #ddd;
315}
316.list th:hover, .list tr:hover {
317    background: #b2d1ff;
318}
319
320/* PAGINATION */
321
322.paginateButtons {
323    border-top: 0;
324    color: #666;
325    font-size: 14px;
326    overflow: hidden;
327    padding: 10px 3px;
328}
329.paginateButtons a {
330    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
331    border: 1px solid #ccc;
332    border-color: #ccc #aaa #aaa #ccc;
333    color: #666;
334    margin: 0 3px;
335    padding: 2px 6px;
336}
337.paginateButtons span {
338    padding: 2px 3px;
339}
340
341.searchButtons {
342    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
343    border: 1px solid #ccc;
344    border-color: #ccc #aaa #aaa #ccc;
345    margin: 0 0.5em;
346}
347.searchButtons a {
348    background: transparent url(../images/skin/database_search.png)  5px 50% no-repeat;
349    padding-left: 28px;
350    border: none;
351    margin: 0;
352}
353
354/* DIALOG */
355
356.dialog table {
357    padding: 5px 0;
358}
359
360.prop {
361    padding: 5px;
362}
363.prop .name {
364    text-align: left;
365    width: 15%;
366    white-space: nowrap;
367}
368.prop .value {
369    text-align: left;
370    width: 85%;
371}
372
373/* ACTION BUTTONS */
374.generalButton {
375    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
376    color: #444;
377    font-size: 14px;
378    font-weight: bold;
379    cursor: pointer;
380    margin-left: 5px;
381    overflow: hidden;
382    padding: 0.1em 0.4em 0.1em 0.4em;
383}
384
385.buttons {
386    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
387    border: 1px solid #ccc;
388    color: #666;
389    font-size: 14px;
390    margin-top: -1px;
391    margin-bottom: 5px;
392    overflow: hidden;
393    padding: 3px;
394}
395.buttons input {
396    background: #fff;
397    border: 0;
398    color: #333;
399    cursor: pointer;
400    font-size: 14px;
401    font-weight: bold;
402    margin-left: 3px;
403    overflow: visible;
404    padding: 0px 6px;
405}
406.buttons input.delete {
407    background: transparent url(../images/skin/database_delete.png) 5px 50% no-repeat;
408    padding-left: 28px;
409}
410.buttons input.trash {
411    background: transparent url(../images/skin/bin_closed.png) 5px 50% no-repeat;
412    padding-left: 28px;
413}
414.buttons input.restore {
415    background: transparent url(../images/skin/bin_empty.png) 5px 50% no-repeat;
416    padding-left: 28px;
417}
418.buttons input.cancel {
419    background: transparent url(../images/skin/cross.png) 5px 50% no-repeat;
420    padding-left: 28px;
421}
422.buttons input.complete {
423    background: transparent url(../images/skin/tick.png) 5px 50% no-repeat;
424    padding-left: 28px;
425}
426.buttons input.flag {
427    background: transparent url(../images/skin/flag_red.png) 5px 50% no-repeat;
428    padding-left: 28px;
429}
430.buttons input.reopen {
431    background: transparent url(../images/skin/door_open.png) 5px 50% no-repeat;
432    padding-left: 28px;
433}
434.buttons input.approve {
435    background: transparent url(../images/skin/database_gear.png) 5px 50% no-repeat;
436    padding-left: 28px;
437}
438.buttons input.renegeApproval {
439    background: transparent url(../images/skin/cog_delete.png) 5px 50% no-repeat;
440    padding-left: 28px;
441}
442.buttons input.edit {
443    background: transparent url(../images/skin/database_edit.png) 5px 50% no-repeat;
444    padding-left: 28px;
445}
446.buttons input.save {
447    background: transparent url(../images/skin/database_save.png) 5px 50% no-repeat;
448    padding-left: 28px;
449}
450.buttons input.add {
451    background: transparent url(../images/skin/database_add.png) 5px 50% no-repeat;
452    padding-left: 28px;
453}
454.buttons input.search {
455    background: transparent url(../images/skin/database_search.png) 5px 50% no-repeat;
456    padding-left: 28px;
457}
458.buttons input.link {
459    background: transparent url(../images/skin/database_link.png) 5px 50% no-repeat;
460    padding-left: 28px;
461}
462.buttons input.go {
463    background: transparent url(../images/skin/database_go.png) 5px 50% no-repeat;
464    padding-left: 28px;
465}
466.buttons input.table {
467    background: transparent url(../images/skin/database_table.png) 5px 50% no-repeat;
468    padding-left: 28px;
469}
470
471#bottom {
472  background: url("../images/bottomBg.png") no-repeat scroll center;
473  width: 1020px;
474  height: 100px;
475}
476
477/* Overlay Pane and filterPane plugin*/
478div.overlayPane {
479    position: absolute;
480    width:70%;
481    left: 50%;
482    margin-left: -36%;
483    top: 50%;
484    margin-top: -26%;
485    border: 2px solid #666666;
486    background-color: white;
487    padding: 5px;
488    z-index: 1;
489}
490
491.overlayTable {
492    width: 100%;
493}
494
495a.remove img {
496    border:none;
497}
498
499 /* Navigation Plugin Override */
500.navigation {
501    padding: 0px 0px 0px 50px;
502    list-style-type: none;
503    clear: both;
504    font-size: 14px;
505    /*overflow: hidden;*/ /* Clearing floats */
506}
507
508.navigation li {
509    float: left;
510    /*border: 0px*/
511    /* border: 1px solid #888; */
512     /*border-left-color: #bbb;*/  /* Highlight border-color */
513}
514
515.navigation li.navigation_first {
516     /*border-left-color: #888; */
517}
518
519.navigation li.navigation_active {
520     /*border-left-color: #555;*/  /* Highlight border-color of active item */
521}
522
523.navigation li a {
524    color: #666;
525    /* background-color: #aaa; */
526    padding: 0.3em 0.75em 0;
527    display: block;
528    text-decoration: none;
529}
530
531.navigation li a:hover {
532    color: red;
533    /* background-color: #999; */
534/*     font-weight: normal; */
535/*     font-size: 14px; */
536    padding: 0.5em 0.75em;
537    /*cursor: default;*/
538}
539
540.navigation li.navigation_active a {
541    /* background-color: #555; */
542/*    color: #fff;*/
543    color: #006dba;
544    /*color: black;*/
545    font-weight: bold;
546    font-size: 17px;
547    margin: 0 0 0 0;
548    /*cursor: default;*/
549}
550
551.navigation li.navigation_active a:hover {
552    color: #006dba;
553    font-weight: bold;
554    font-size: 17px;
555    padding: 0.3em 0.75em;
556    /*background-color: #555;*/
557}
558
559/* Sub navigation */
560.subnavigation {
561    /*padding: 0px 0px 0px 165px;*/
562    padding: 0px 0px 0px 105px;
563    list-style-type: none;
564    clear: both;
565    overflow: hidden; /* Clearing floats */
566}
567.subnavigation li {
568    float: left;
569    /* background-color: #555; */
570    padding: 0em 0.75em;
571    border-width: 0px 0;
572}
573.subnavigation li a {
574    color: #006dba;
575    font-weight: bold;
576    font-size: 17px;
577    display: block;
578    /*padding: 0px 0;*/
579    /* border-color: #555; */
580    border-style: solid;
581    border-width: 0px 0;
582    text-decoration: none;
583    /*margin: 0 0 0 0;*/
584    /*cursor: default;*/
585}
586
587.subnavigation li a:visited {
588    color: #006dba;
589}
590
591.subnavigation li a:hover {
592    /*color: red;*/
593    /*border-color: black;*/ 
594    border-width: 1px 0;
595}
596.subnavigation li.subnavigation_active a {
597    /*color: #e0e0e0; */
598    /*cursor: default;*/
599    /*border-color: #e0e0e0;*/
600    border-width: 1px 0;
601}
602
603/* Tree */
604
605div.static_tree {
606}
607div.static_tree ul {
608    list-style-type: none;
609    padding-left: 15px;
610}
611div.static_tree li {
612    background: url(../images/skin/ln.gif) 0px 0px no-repeat;
613    padding-left: 20px;
614    margin: 2px;
615}
616
617div.tree_button {
618    float: left;
619}
620div.tree_button a {
621}
622div.tree_button img {
623    padding: 0.3em 0.5em 0 0.3em;
624}
625div.tree_button img:hover {
626    padding: 0.5em 0.5em 0 0.3em;
627}
628
629div.tree {
630}
631div.tree li a{
632}
633div.tree ul {
634    list-style-type: none;
635    padding-left: 15px;
636}
637div.tree li {
638    background: url(../images/skin/ln.gif) 0px 0px no-repeat;
639    padding-left: 10px;
640    margin: 2px;
641}
642div.tree_pane_close {
643    position: absolute;
644    right: 5px;
645    padding: 5px;
646}
647
648/* CheckBoxList Tag Lib */
649
650.CheckBoxList {
651    height: 300px;
652    overflow: auto;
653    overflow-x: hidden;
654    width: 400px;
655    border: 1px solid #ccc;
656    list-style-type: none;
657    margin: 0;
658    padding: 0px;
659}
660.CheckBoxList li {
661    padding: 5px;
662}
Note: See TracBrowser for help on using the repository browser.