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
RevLine 
[55]1html * {
2    margin: 0;
3    /*padding: 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
[59]4
[55]5}
6
[569]7/**
[539]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).
[542]19* #FFFFFF - Table Row (Even).
20* #F7F7F7 - Table Row (Odd).
21* #EDEDED - Total Row Grey (Bg).
22* #555555 - Total Row Grey (Fg).
[539]23*/
[55]24
25.spinner {
[452]26    padding: 10px 0 0 18px;
[55]27    position: absolute;
28}
29
30body {
[229]31    text-align: center;
[106]32    color: #222;
[98]33    font: 14px verdana, arial, helvetica, sans-serif;
[59]34    background: transparent url("../images/brushed_metal.png") repeat fixed center;
[55]35}
36
[59]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;
[192]46  height: 31px;
[59]47}
48
49#content {
50  padding: 0px 20px 20px;
[192]51  background: url("../images/contentbg.png") repeat-y scroll center;
[59]52  width: 980px;
[141]53  /*border: 1px solid #ccc;*/
[59]54}
55
56#Header {
57  background: transparent url("../images/logo.png") no-repeat scroll center;
58  width: 980px;
[192]59  height: 136px;
[59]60}
[519]61#HeaderDev {
62  background: transparent url("../images/logoDev.png") no-repeat scroll center;
63  width: 980px;
64  height: 136px;
65}
[80]66#HeaderLink{
67  display: block;
[192]68  width: 958px;
69  height: 136px;
[80]70}
[59]71
[139]72/* Navigation plugin, top level. */
73#menu {
74    float: left;
[141]75    /*border: 1px solid #ccc;*/
[139]76}
77
[418]78/* Application log textarea */
[358]79#log {
80    width: 920px;
81    height: auto;
82}
83
[418]84div.tabHeader {
[501]85    padding: 5px 15px 0px 15px;
[418]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
[55]100a:link, a:visited, a:hover {
[297]101    color: #006dba;
[55]102    font-weight: bold;
103    text-decoration: none;
[59]104}
[55]105
[106]106img {
107    border: 0px;
108}
109
[443]110/*Do not specify a global h2 and h3
111    Since this changes filterPane and other headers.*/
[55]112h1 {
113    color: #006dba;
114    font-weight: normal;
[98]115    font-size: 17px;
[59]116    margin: 0 0 .3em 0;
[55]117}
118
119ul {
[59]120    padding-left: 15px;
[55]121}
122
123input, select, textarea {
124    background-color: #fcfcfc;
125    border: 1px solid #ccc;
[98]126    font: 14px verdana, arial, helvetica, sans-serif;
[55]127    margin: 2px 0;
128    padding: 2px 4px;
129}
130select {
131   padding: 2px 2px 2px 0;
132}
133textarea {
[139]134    width: 450px;
135    height: 150px;
136    vertical-align: top;
[55]137}
138
139input:focus, select:focus, textarea:focus {
140    border: 1px solid #b2d1ff;
141}
142
143.body {
[110]144    padding: 20px 20px 20px 20px;
145    text-align: center;
[141]146    /*border: 1px solid #ccc;*/
[55]147}
148
[569]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
[142]161/* Logout and Top Navigation Level */
[59]162
[142]163.appControl {
164    height: 2em;
165}
[297]166.appControl a {
167    color: #666;
168}
[142]169
[141]170.logoutButton {
[139]171    float: right;
[142]172    padding: 0.3em 0px 0.3em 0;
[98]173    font-size: 14px;
[192]174    margin: 0 50px 0 0;
[142]175    /*border: 1px solid #ccc;*/
[59]176}
177
[141]178.logoutButton:hover {
[139]179    color: red;
[142]180    padding: 0.5em 0px 0.1em 0;
[139]181}
[55]182
[139]183/* ORIGINAL NAVIGATION MENU */
184
[55]185.nav {
[229]186    text-align: center;
[59]187    background: url("../images/linkPanel_long.png") top no-repeat;
[139]188    padding: 10px 0px 0px 0px;
[59]189    width: 980px;
190    height: 40px;
[55]191}
192
193.menuButton {
[98]194    font-size: 14px;
[55]195    padding: 0 5px;
196}
197.menuButton a {
198    color: #333;
[59]199    padding: 14px 25px;
[55]200}
201.menuButton a.home {
[59]202    /*background: url(../images/skin/house.png) center left no-repeat;*/
[55]203    color: #333;
[59]204    /*padding: 25px;*/
[55]205}
206.menuButton a.list {
[59]207    /*background: url(../images/skin/database_table.png) center left no-repeat;*/
[55]208    color: #333;
[59]209    /*padding-left: 25px;*/
[55]210}
211.menuButton a.create {
[59]212    /*background: url(../images/skin/database_add.png) center left no-repeat;*/
[55]213    color: #333;
[59]214    /*padding-left: 25px;*/
[55]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;
[59]224    padding: 5px 5px 5px 0px
[55]225}
226
[277]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
[55]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;
[59]244    padding: 0;
[55]245}
246div.errors li {
[328]247    background: url(../images/skin/exclamation.png) 8px 0% no-repeat;
[55]248    line-height: 16px;
249    padding-left: 30px;
250}
251
252td.errors select {
[606]253    background: #ffEbEb; /*Set select background since select borders cannot be styled in IE*/
[55]254    border: 1px solid red;
255}
256td.errors input {
257    border: 1px solid red;
258}
[98]259td.errors textarea {
260    border: 1px solid red;
261}
[55]262
[134]263input.time {
[98]264    width:40px;
265}
[134]266input.time.errors {
[98]267    border: 1px solid red;
268}
[221]269input.medium {
270    width:60px;
271}
272input.medium.errors {
273    border: 1px solid red;
274}
[134]275input.description {
276    width:450px;
277}
[98]278
[55]279/* TABLES */
280
281table {
282    border: 1px solid #ccc;
[328]283    width: 100%;
[55]284}
285tr {
286    border: 0;
287}
[59]288td, th {
[98]289    font: 14px verdana, arial, helvetica, sans-serif;
290    line-height: 17px;
[55]291    padding: 5px 6px;
292    text-align: left;
293    vertical-align: top;
294}
[490]295tr.total {
296    background: #EDEDED;
297}
298tr.total td{
299    color: #555;
300    font-size: 14px;
301    font-weight: bold;
302}
[418]303td.idColumn {
304    width: 25px;
305}
[55]306th {
307    background: #fff url(../images/skin/shadow.jpg);
[106]308    color: #555;
[98]309    font-size: 14px;
[55]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;
[98]317    font-size: 14px;
[55]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
[124]339.clickableOdd {
340    background: #f7f7f7;
341    cursor: pointer;
342}
343.clickableEven {
344    background: #fff;
345    cursor: pointer;
346}
[490]347.clickableEven td.notClickable {
348    cursor: default;
349}
350.clickableOdd td.notClickable {
351    cursor: default;
352}
[124]353
[55]354/* LIST */
355
[569]356div.list {
357    clear:both;
358}
[55]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;
[98]374    font-size: 14px;
[55]375    overflow: hidden;
376    padding: 10px 3px;
377}
378.paginateButtons a {
[221]379    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
[55]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
[221]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
[55]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}
[655]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}
[55]433
434/* ACTION BUTTONS */
[221]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}
[55]445
446.buttons {
447    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
448    border: 1px solid #ccc;
449    color: #666;
[98]450    font-size: 14px;
[84]451    margin-top: -1px;
452    margin-bottom: 5px;
[55]453    overflow: hidden;
[221]454    padding: 3px;
[55]455}
456.buttons input {
457    background: #fff;
458    border: 0;
459    color: #333;
460    cursor: pointer;
[98]461    font-size: 14px;
[55]462    font-weight: bold;
463    margin-left: 3px;
464    overflow: visible;
[221]465    padding: 0px 6px;
[55]466}
467.buttons input.delete {
468    background: transparent url(../images/skin/database_delete.png) 5px 50% no-repeat;
469    padding-left: 28px;
470}
[181]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}
[418]487.buttons input.flag {
488    background: transparent url(../images/skin/flag_red.png) 5px 50% no-repeat;
489    padding-left: 28px;
490}
[181]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 {
[729]496    background: transparent url(../images/skin/cog_add.png) 5px 50% no-repeat;
[181]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}
[55]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}
[106]511.buttons input.add {
512    background: transparent url(../images/skin/database_add.png) 5px 50% no-repeat;
513    padding-left: 28px;
514}
[134]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}
[59]531
532#bottom {
533  background: url("../images/bottomBg.png") no-repeat scroll center;
534  width: 1020px;
535  height: 100px;
[139]536}
537
[569]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
[155]562/* Overlay Pane and filterPane plugin*/
563div.overlayPane {
564    position: absolute;
565    width:70%;
566    left: 50%;
[192]567    margin-left: -36%;
[155]568    top: 50%;
[192]569    margin-top: -26%;
[155]570    border: 2px solid #666666;
571    background-color: white;
572    padding: 5px;
[565]573    z-index: 0;
[155]574}
575
576.overlayTable {
577    width: 100%;
578}
579
580a.remove img {
581    border:none;
582}
583
[139]584 /* Navigation Plugin Override */
585.navigation {
[192]586    padding: 0px 0px 0px 50px;
[139]587    list-style-type: none;
588    clear: both;
589    font-size: 14px;
[141]590    /*overflow: hidden;*/ /* Clearing floats */
[139]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 {
[297]609    color: #666;
[139]610    /* background-color: #aaa; */
[141]611    padding: 0.3em 0.75em 0;
[139]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; */
[142]621    padding: 0.5em 0.75em;
[139]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;
[142]640    padding: 0.3em 0.75em;
[139]641    /*background-color: #555;*/
642}
643
644/* Sub navigation */
645.subnavigation {
646    /*padding: 0px 0px 0px 165px;*/
[192]647    padding: 0px 0px 0px 105px;
[139]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}
[278]687
688/* Tree */
689
[304]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
[306]702div.tree_button {
[307]703    float: left;
[306]704}
[307]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
[278]714div.tree {
715}
716div.tree li a{
717}
718div.tree ul {
719    list-style-type: none;
[304]720    padding-left: 15px;
[278]721}
722div.tree li {
723    background: url(../images/skin/ln.gif) 0px 0px no-repeat;
[282]724    padding-left: 10px;
725    margin: 2px;
[278]726}
[453]727div.pane_close {
[323]728    position: absolute;
729    right: 5px;
[312]730    padding: 5px;
731}
[286]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.