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

Last change on this file since 164 was 155, checked in by gav, 15 years ago

Work on Task searching.
Add calendar view for Tasks.
Cleaner look for search and paginate buttons.
OverlayPane? css and javascript to fix filterPane width on smaller screens and for quick search panes.

File size: 9.4 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: 44px;
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: 160px;
47  /*border: 1px solid;*/
48}
49#HeaderLink{
50  display: block;
51  width: 650px;
52  height: 160px;
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 165px 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.description {
205    width:450px;
206}
207
208/* TABLES */
209
210table {
211    border: 1px solid #ccc;
212    width: 100%
213}
214tr {
215    border: 0;
216}
217td, th {
218    font: 14px verdana, arial, helvetica, sans-serif;
219    line-height: 17px;
220    padding: 5px 6px;
221    text-align: left;
222    vertical-align: top;
223}
224th {
225    background: #fff url(../images/skin/shadow.jpg);
226    color: #555;
227    font-size: 14px;
228    font-weight: bold;
229    line-height: 17px;
230    padding: 2px 6px;
231}
232th a:link, th a:visited, th a:hover {
233    color: #333;
234    display: block;
235    font-size: 14px;
236    text-decoration: none;
237    width: 100%;
238}
239th.asc a, th.desc a {
240    background-position: right;
241    background-repeat: no-repeat;
242}
243th.asc a {
244    background-image: url(../images/skin/sorted_asc.gif);
245}
246th.desc a {
247    background-image: url(../images/skin/sorted_desc.gif);
248}
249
250.odd {
251    background: #f7f7f7;
252}
253.even {
254    background: #fff;
255}
256
257.clickableOdd {
258    background: #f7f7f7;
259    cursor: pointer;
260}
261.clickableEven {
262    background: #fff;
263    cursor: pointer;
264}
265
266/* LIST */
267
268.list table {
269    border-collapse: collapse;
270}
271.list th, .list td {
272    border-left: 1px solid #ddd;
273}
274.list th:hover, .list tr:hover {
275    background: #b2d1ff;
276}
277
278/* PAGINATION */
279
280.paginateButtons {
281    /*background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;*/
282   /*border: 1px solid #ccc;*/
283    border-top: 0;
284    color: #666;
285    font-size: 14px;
286    overflow: hidden;
287    padding: 10px 3px;
288}
289.paginateButtons a {
290    background: #fff;
291    border: 1px solid #ccc;
292    border-color: #ccc #aaa #aaa #ccc;
293    color: #666;
294    margin: 0 3px;
295    padding: 2px 6px;
296}
297.paginateButtons span {
298    padding: 2px 3px;
299}
300
301/* DIALOG */
302
303.dialog table {
304    padding: 5px 0;
305}
306
307.prop {
308    padding: 5px;
309}
310.prop .name {
311    text-align: left;
312    width: 15%;
313    white-space: nowrap;
314}
315.prop .value {
316    text-align: left;
317    width: 85%;
318}
319
320/* ACTION BUTTONS */
321
322.buttons {
323    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
324    border: 1px solid #ccc;
325    color: #666;
326    font-size: 14px;
327    margin-top: -1px;
328    margin-bottom: 5px;
329    overflow: hidden;
330    padding: 0;
331}
332
333.buttons input {
334    background: #fff;
335    border: 0;
336    color: #333;
337    cursor: pointer;
338    font-size: 14px;
339    font-weight: bold;
340    margin-left: 3px;
341    overflow: visible;
342    padding: 2px 6px;
343}
344.buttons input.delete {
345    background: transparent url(../images/skin/database_delete.png) 5px 50% no-repeat;
346    padding-left: 28px;
347}
348.buttons input.edit {
349    background: transparent url(../images/skin/database_edit.png) 5px 50% no-repeat;
350    padding-left: 28px;
351}
352.buttons input.save {
353    background: transparent url(../images/skin/database_save.png) 5px 50% no-repeat;
354    padding-left: 28px;
355}
356.buttons input.add {
357    background: transparent url(../images/skin/database_add.png) 5px 50% no-repeat;
358    padding-left: 28px;
359}
360.buttons input.search {
361    background: transparent url(../images/skin/database_search.png) 5px 50% no-repeat;
362    padding-left: 28px;
363}
364.buttons input.link {
365    background: transparent url(../images/skin/database_link.png) 5px 50% no-repeat;
366    padding-left: 28px;
367}
368.buttons input.go {
369    background: transparent url(../images/skin/database_go.png) 5px 50% no-repeat;
370    padding-left: 28px;
371}
372.buttons input.table {
373    background: transparent url(../images/skin/database_table.png) 5px 50% no-repeat;
374    padding-left: 28px;
375}
376
377#bottom {
378  background: url("../images/bottomBg.png") no-repeat scroll center;
379  width: 1020px;
380  height: 100px;
381}
382
383/* Overlay Pane and filterPane plugin*/
384div.overlayPane {
385    position: absolute;
386    width:70%;
387    left: 50%;
388    margin-left: -35%;
389    top: 50%;
390    margin-top: -15%;
391    border: 2px solid #666666;
392    background-color: white;
393    padding: 5px;
394    z-index: 1;
395}
396
397.overlayTable {
398    width: 100%;
399}
400
401a.remove img {
402    border:none;
403}
404
405 /* Navigation Plugin Override */
406.navigation {
407    padding: 0px 0px 0px 165px;
408    list-style-type: none;
409    clear: both;
410    font-size: 14px;
411    /*overflow: hidden;*/ /* Clearing floats */
412}
413
414.navigation li {
415    float: left;
416    /*border: 0px*/
417    /* border: 1px solid #888; */
418     /*border-left-color: #bbb;*/  /* Highlight border-color */
419}
420
421.navigation li.navigation_first {
422     /*border-left-color: #888; */
423}
424
425.navigation li.navigation_active {
426     /*border-left-color: #555;*/  /* Highlight border-color of active item */
427}
428
429.navigation li a {
430    /* color: #fff; */
431    /* background-color: #aaa; */
432    padding: 0.3em 0.75em 0;
433    display: block;
434    text-decoration: none;
435}
436
437.navigation li a:hover {
438    color: red;
439    /* background-color: #999; */
440/*     font-weight: normal; */
441/*     font-size: 14px; */
442    padding: 0.5em 0.75em;
443    /*cursor: default;*/
444}
445
446.navigation li.navigation_active a {
447    /* background-color: #555; */
448/*    color: #fff;*/
449    color: #006dba;
450    /*color: black;*/
451    font-weight: bold;
452    font-size: 17px;
453    margin: 0 0 0 0;
454    /*cursor: default;*/
455}
456
457.navigation li.navigation_active a:hover {
458    color: #006dba;
459    font-weight: bold;
460    font-size: 17px;
461    padding: 0.3em 0.75em;
462    /*background-color: #555;*/
463}
464
465/* Sub navigation */
466.subnavigation {
467    /*padding: 0px 0px 0px 165px;*/
468    padding: 0px 0px 0px 220px;
469    list-style-type: none;
470    clear: both;
471    overflow: hidden; /* Clearing floats */
472}
473.subnavigation li {
474    float: left;
475    /* background-color: #555; */
476    padding: 0em 0.75em;
477    border-width: 0px 0;
478}
479.subnavigation li a {
480    color: #006dba;
481    font-weight: bold;
482    font-size: 17px;
483    display: block;
484    /*padding: 0px 0;*/
485    /* border-color: #555; */
486    border-style: solid;
487    border-width: 0px 0;
488    text-decoration: none;
489    /*margin: 0 0 0 0;*/
490    /*cursor: default;*/
491}
492
493.subnavigation li a:visited {
494    color: #006dba;
495}
496
497.subnavigation li a:hover {
498    /*color: red;*/
499    /*border-color: black;*/ 
500    border-width: 1px 0;
501}
502.subnavigation li.subnavigation_active a {
503    /*color: #e0e0e0; */
504    /*cursor: default;*/
505    /*border-color: #e0e0e0;*/
506    border-width: 1px 0;
507}
Note: See TracBrowser for help on using the repository browser.