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

Last change on this file since 963 was 963, checked in by gav, 12 years ago

Adjust Overlay Pane and filterPane CSS top to allow for wide screens.

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: 15px;
591    border: 2px solid #666666;
592    background-color: white;
593    padding: 5px;
594    z-index: 0;
595}
596
597.overlayTable {
598    width: 100%;
599}
600
601a.remove img {
602    border:none;
603}
604
605 /* Navigation Plugin Override */
606.navigation {
607    padding: 0px 0px 0px 50px;
608    list-style-type: none;
609    clear: both;
610    font-size: 14px;
611    /*overflow: hidden;*/ /* Clearing floats */
612}
613
614.navigation li {
615    float: left;
616    /*border: 0px*/
617    /* border: 1px solid #888; */
618     /*border-left-color: #bbb;*/  /* Highlight border-color */
619}
620
621.navigation li.navigation_first {
622     /*border-left-color: #888; */
623}
624
625.navigation li.navigation_active {
626     /*border-left-color: #555;*/  /* Highlight border-color of active item */
627}
628
629.navigation li a {
630    color: #666;
631    /* background-color: #aaa; */
632    padding: 0.3em 0.75em 0;
633    display: block;
634    text-decoration: none;
635}
636
637.navigation li a:hover {
638    color: red;
639    /* background-color: #999; */
640/*     font-weight: normal; */
641/*     font-size: 14px; */
642    padding: 0.5em 0.75em;
643    /*cursor: default;*/
644}
645
646.navigation li.navigation_active a {
647    /* background-color: #555; */
648/*    color: #fff;*/
649    color: #006dba;
650    /*color: black;*/
651    font-weight: bold;
652    font-size: 17px;
653    margin: 0 0 0 0;
654    /*cursor: default;*/
655}
656
657.navigation li.navigation_active a:hover {
658    color: #006dba;
659    font-weight: bold;
660    font-size: 17px;
661    padding: 0.3em 0.75em;
662    /*background-color: #555;*/
663}
664
665/* Sub navigation */
666.subnavigation {
667    /*padding: 0px 0px 0px 165px;*/
668    padding: 0px 0px 0px 105px;
669    list-style-type: none;
670    clear: both;
671    overflow: hidden; /* Clearing floats */
672}
673.subnavigation li {
674    float: left;
675    /* background-color: #555; */
676    padding: 0em 0.75em;
677    border-width: 0px 0;
678}
679.subnavigation li a {
680    color: #006dba;
681    font-weight: bold;
682    font-size: 17px;
683    display: block;
684    /*padding: 0px 0;*/
685    /* border-color: #555; */
686    border-style: solid;
687    border-width: 0px 0;
688    text-decoration: none;
689    /*margin: 0 0 0 0;*/
690    /*cursor: default;*/
691}
692
693.subnavigation li a:visited {
694    color: #006dba;
695}
696
697.subnavigation li a:hover {
698    /*color: red;*/
699    /*border-color: black;*/
700    border-width: 1px 0;
701}
702.subnavigation li.subnavigation_active a {
703    /*color: #e0e0e0; */
704    /*cursor: default;*/
705    /*border-color: #e0e0e0;*/
706    border-width: 1px 0;
707}
708
709/* Tree */
710
711div.static_tree {
712}
713div.static_tree_compact {
714    max-height:15em;
715    overflow:auto;
716}
717div.static_tree ul {
718    list-style-type: none;
719    padding-left: 15px;
720}
721div.static_tree li {
722    background: url(../images/skin/ln.gif) 0px 0px no-repeat;
723    padding-left: 20px;
724    margin: 2px;
725}
726
727div.tree_button {
728    float: left;
729}
730div.tree_button a {
731}
732div.tree_button img {
733    padding: 0.3em 0.5em 0 0.3em;
734}
735div.tree_button img:hover {
736    padding: 0.5em 0.5em 0 0.3em;
737}
738
739div.tree {
740}
741div.tree li a{
742}
743div.tree ul {
744    list-style-type: none;
745    padding-left: 15px;
746}
747div.tree li {
748    background: url(../images/skin/ln.gif) 0px 0px no-repeat;
749    padding-left: 10px;
750    margin: 2px;
751}
752div.pane_close {
753    position: absolute;
754    right: 5px;
755    padding: 5px;
756    cursor: pointer;
757}
758
759/* CheckBoxList Tag Lib */
760
761.CheckBoxList {
762    height: 300px;
763    overflow: auto;
764    overflow-x: hidden;
765    width: 400px;
766    border: 1px solid #ccc;
767    list-style-type: none;
768    margin: 0;
769    padding: 0px;
770}
771.CheckBoxList li {
772    padding: 5px;
773}
Note: See TracBrowser for help on using the repository browser.