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
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
[801]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
[55]42body {
[229]43    text-align: center;
[106]44    color: #222;
[98]45    font: 14px verdana, arial, helvetica, sans-serif;
[59]46    background: transparent url("../images/brushed_metal.png") repeat fixed center;
[55]47}
48
[59]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;
[192]58  height: 31px;
[59]59}
60
61#content {
62  padding: 0px 20px 20px;
[192]63  background: url("../images/contentbg.png") repeat-y scroll center;
[59]64  width: 980px;
[141]65  /*border: 1px solid #ccc;*/
[59]66}
67
68#Header {
69  background: transparent url("../images/logo.png") no-repeat scroll center;
70  width: 980px;
[192]71  height: 136px;
[59]72}
[519]73#HeaderDev {
74  background: transparent url("../images/logoDev.png") no-repeat scroll center;
75  width: 980px;
76  height: 136px;
77}
[932]78#HeaderDemo {
79  background: transparent url("../images/logoOnlineDemo.png") no-repeat scroll center;
80  width: 980px;
81  height: 136px;
82}
[80]83#HeaderLink{
84  display: block;
[192]85  width: 958px;
86  height: 136px;
[80]87}
[59]88
[139]89/* Navigation plugin, top level. */
90#menu {
91    float: left;
[141]92    /*border: 1px solid #ccc;*/
[139]93}
94
[418]95/* Application log textarea */
[358]96#log {
97    width: 920px;
98    height: auto;
99}
100
[418]101div.tabHeader {
[501]102    padding: 5px 15px 0px 15px;
[418]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
[55]117a:link, a:visited, a:hover {
[297]118    color: #006dba;
[55]119    font-weight: bold;
120    text-decoration: none;
[59]121}
[55]122
[106]123img {
124    border: 0px;
125}
126
[443]127/*Do not specify a global h2 and h3
128    Since this changes filterPane and other headers.*/
[55]129h1 {
130    color: #006dba;
131    font-weight: normal;
[98]132    font-size: 17px;
[59]133    margin: 0 0 .3em 0;
[55]134}
135
136ul {
[59]137    padding-left: 15px;
[55]138}
139
140input, select, textarea {
141    background-color: #fcfcfc;
142    border: 1px solid #ccc;
[98]143    font: 14px verdana, arial, helvetica, sans-serif;
[55]144    margin: 2px 0;
145    padding: 2px 4px;
146}
147select {
148   padding: 2px 2px 2px 0;
149}
150textarea {
[139]151    width: 450px;
152    height: 150px;
153    vertical-align: top;
[55]154}
155
156input:focus, select:focus, textarea:focus {
157    border: 1px solid #b2d1ff;
158}
159
160.body {
[110]161    padding: 20px 20px 20px 20px;
162    text-align: center;
[141]163    /*border: 1px solid #ccc;*/
[55]164}
165
[569]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
[142]178/* Logout and Top Navigation Level */
[59]179
[142]180.appControl {
181    height: 2em;
182}
[297]183.appControl a {
184    color: #666;
185}
[142]186
[141]187.logoutButton {
[139]188    float: right;
[142]189    padding: 0.3em 0px 0.3em 0;
[98]190    font-size: 14px;
[192]191    margin: 0 50px 0 0;
[142]192    /*border: 1px solid #ccc;*/
[59]193}
194
[141]195.logoutButton:hover {
[139]196    color: red;
[142]197    padding: 0.5em 0px 0.1em 0;
[139]198}
[55]199
[139]200/* ORIGINAL NAVIGATION MENU */
201
[55]202.nav {
[229]203    text-align: center;
[59]204    background: url("../images/linkPanel_long.png") top no-repeat;
[139]205    padding: 10px 0px 0px 0px;
[59]206    width: 980px;
207    height: 40px;
[55]208}
209
210.menuButton {
[98]211    font-size: 14px;
[55]212    padding: 0 5px;
213}
214.menuButton a {
215    color: #333;
[59]216    padding: 14px 25px;
[55]217}
218.menuButton a.home {
[59]219    /*background: url(../images/skin/house.png) center left no-repeat;*/
[55]220    color: #333;
[59]221    /*padding: 25px;*/
[55]222}
223.menuButton a.list {
[59]224    /*background: url(../images/skin/database_table.png) center left no-repeat;*/
[55]225    color: #333;
[59]226    /*padding-left: 25px;*/
[55]227}
228.menuButton a.create {
[59]229    /*background: url(../images/skin/database_add.png) center left no-repeat;*/
[55]230    color: #333;
[59]231    /*padding-left: 25px;*/
[55]232}
233
234/* MESSAGES AND ERRORS */
235
[824]236.jQueryAjaxLoading {
237    margin: 10px 0 5px 0;
[825]238    padding: 5px 5px 5px 0px;
[824]239}
240
[55]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;
[59]246    padding: 5px 5px 5px 0px
[55]247}
248
[277]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
[55]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;
[59]266    padding: 0;
[55]267}
268div.errors li {
[328]269    background: url(../images/skin/exclamation.png) 8px 0% no-repeat;
[55]270    line-height: 16px;
271    padding-left: 30px;
272}
273
274td.errors select {
[606]275    background: #ffEbEb; /*Set select background since select borders cannot be styled in IE*/
[55]276    border: 1px solid red;
277}
278td.errors input {
279    border: 1px solid red;
280}
[98]281td.errors textarea {
282    border: 1px solid red;
283}
[55]284
[134]285input.time {
[98]286    width:40px;
287}
[134]288input.time.errors {
[98]289    border: 1px solid red;
290}
[221]291input.medium {
292    width:60px;
293}
294input.medium.errors {
295    border: 1px solid red;
296}
[134]297input.description {
298    width:450px;
299}
[98]300
[55]301/* TABLES */
302
303table {
304    border: 1px solid #ccc;
[328]305    width: 100%;
[55]306}
307tr {
308    border: 0;
309}
[59]310td, th {
[98]311    font: 14px verdana, arial, helvetica, sans-serif;
312    line-height: 17px;
[55]313    padding: 5px 6px;
314    text-align: left;
315    vertical-align: top;
316}
[490]317tr.total {
318    background: #EDEDED;
319}
320tr.total td{
321    color: #555;
322    font-size: 14px;
323    font-weight: bold;
324}
[418]325td.idColumn {
326    width: 25px;
327}
[55]328th {
329    background: #fff url(../images/skin/shadow.jpg);
[106]330    color: #555;
[98]331    font-size: 14px;
[55]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;
[98]339    font-size: 14px;
[55]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
[124]361.clickableOdd {
362    background: #f7f7f7;
363    cursor: pointer;
364}
365.clickableEven {
366    background: #fff;
367    cursor: pointer;
368}
[490]369.clickableEven td.notClickable {
370    cursor: default;
371}
372.clickableOdd td.notClickable {
373    cursor: default;
374}
[124]375
[55]376/* LIST */
377
[569]378div.list {
379    clear:both;
380}
[55]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;
[98]396    font-size: 14px;
[55]397    overflow: hidden;
398    padding: 10px 3px;
399}
400.paginateButtons a {
[221]401    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
[55]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
[221]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
[55]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}
[655]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}
[55]455
456/* ACTION BUTTONS */
[221]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}
[55]467
468.buttons {
469    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
470    border: 1px solid #ccc;
471    color: #666;
[98]472    font-size: 14px;
[84]473    margin-top: -1px;
474    margin-bottom: 5px;
[55]475    overflow: hidden;
[221]476    padding: 3px;
[55]477}
478.buttons input {
479    background: #fff;
480    border: 0;
481    color: #333;
482    cursor: pointer;
[98]483    font-size: 14px;
[55]484    font-weight: bold;
485    margin-left: 3px;
486    overflow: visible;
[221]487    padding: 0px 6px;
[55]488}
489.buttons input.delete {
490    background: transparent url(../images/skin/database_delete.png) 5px 50% no-repeat;
491    padding-left: 28px;
492}
[181]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}
[418]509.buttons input.flag {
510    background: transparent url(../images/skin/flag_red.png) 5px 50% no-repeat;
511    padding-left: 28px;
512}
[181]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 {
[729]518    background: transparent url(../images/skin/cog_add.png) 5px 50% no-repeat;
[181]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}
[55]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}
[106]533.buttons input.add {
534    background: transparent url(../images/skin/database_add.png) 5px 50% no-repeat;
535    padding-left: 28px;
536}
[134]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}
[59]553
554#bottom {
555  background: url("../images/bottomBg.png") no-repeat scroll center;
556  width: 1020px;
557  height: 100px;
[139]558}
559
[569]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
[155]584/* Overlay Pane and filterPane plugin*/
585div.overlayPane {
586    position: absolute;
587    width:70%;
588    left: 50%;
[192]589    margin-left: -36%;
[155]590    top: 50%;
[192]591    margin-top: -26%;
[155]592    border: 2px solid #666666;
593    background-color: white;
594    padding: 5px;
[565]595    z-index: 0;
[155]596}
597
598.overlayTable {
599    width: 100%;
600}
601
602a.remove img {
603    border:none;
604}
605
[139]606 /* Navigation Plugin Override */
607.navigation {
[192]608    padding: 0px 0px 0px 50px;
[139]609    list-style-type: none;
610    clear: both;
611    font-size: 14px;
[141]612    /*overflow: hidden;*/ /* Clearing floats */
[139]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 {
[297]631    color: #666;
[139]632    /* background-color: #aaa; */
[141]633    padding: 0.3em 0.75em 0;
[139]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; */
[142]643    padding: 0.5em 0.75em;
[139]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;
[142]662    padding: 0.3em 0.75em;
[139]663    /*background-color: #555;*/
664}
665
666/* Sub navigation */
667.subnavigation {
668    /*padding: 0px 0px 0px 165px;*/
[192]669    padding: 0px 0px 0px 105px;
[139]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;*/
[932]700    /*border-color: black;*/
[139]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}
[278]709
710/* Tree */
711
[304]712div.static_tree {
713}
[798]714div.static_tree_compact {
[882]715    max-height:15em;
[798]716    overflow:auto;
717}
[304]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
[306]728div.tree_button {
[307]729    float: left;
[306]730}
[307]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
[278]740div.tree {
741}
742div.tree li a{
743}
744div.tree ul {
745    list-style-type: none;
[304]746    padding-left: 15px;
[278]747}
748div.tree li {
749    background: url(../images/skin/ln.gif) 0px 0px no-repeat;
[282]750    padding-left: 10px;
751    margin: 2px;
[278]752}
[453]753div.pane_close {
[323]754    position: absolute;
755    right: 5px;
[312]756    padding: 5px;
[833]757    cursor: pointer;
[312]758}
[286]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.