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

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

Replace ajax spinner with a new loading bar.

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