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

Last change on this file since 824 was 824, checked in by gav, 13 years ago

Add jQuery AJAX util js and css.

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