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

Last change on this file since 430 was 418, checked in by gav, 15 years ago

Add attentionFlag to Task domain along with views and logic to suite.
Add entry type 'cause', refactor as required.
Refactor task types.
Move createBreakin to createImmediateCallout.

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