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

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

CSS improvements, add images to login and search buttons.

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