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

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

Graphical touch up of task show view with icons.

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