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

Last change on this file since 539 was 539, checked in by gav, 14 years ago

Add comment to main css, commonly used application colours.

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