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

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

Configure demo mode.

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