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

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

Add CustomTagLib with checkBoxList.

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