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

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

How to make IE7 behave more like Firefox? Add Doctype strict to the layout!
This makes both browsers behave more predictably and makes pseudo :hover work in IE7.

File size: 9.0 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/* Login/out and Admin */
109
110.logoutButton {
111    float: right;
112    padding: 0.3em 165px 0.3em 0;
113    font-size: 14px;
114/*     border: 1px solid #ccc; */
115}
116
117.logoutButton:hover {
118    color: red;
119    margin: 0.2em 0 0 0;
120}
121
122/* ORIGINAL NAVIGATION MENU */
123
124.nav {
125    text-align: centre;
126    background: url("../images/linkPanel_long.png") top no-repeat;
127    padding: 10px 0px 0px 0px;
128    width: 980px;
129    height: 40px;
130}
131
132.menuButton {
133    font-size: 14px;
134    padding: 0 5px;
135}
136.menuButton a {
137    color: #333;
138    padding: 14px 25px;
139}
140.menuButton a.home {
141    /*background: url(../images/skin/house.png) center left no-repeat;*/
142    color: #333;
143    /*padding: 25px;*/
144}
145.menuButton a.list {
146    /*background: url(../images/skin/database_table.png) center left no-repeat;*/
147    color: #333;
148    /*padding-left: 25px;*/
149}
150.menuButton a.create {
151    /*background: url(../images/skin/database_add.png) center left no-repeat;*/
152    color: #333;
153    /*padding-left: 25px;*/
154}
155
156/* MESSAGES AND ERRORS */
157
158.message {
159    background: #f3f8fc url(../images/skin/information.png) 8px 50% no-repeat;
160    border: 1px solid #b2d1ff;
161    color: #006dba;
162    margin: 10px 0 5px 0;
163    padding: 5px 5px 5px 0px
164}
165
166div.errors {
167    background: #fff3f3;
168    border: 1px solid red;
169    color: #cc0000;
170    margin: 10px 0 5px 0;
171    padding: 5px 0 5px 0;
172}
173div.errors ul {
174    list-style: none;
175    padding: 0;
176}
177div.errors li {
178        background: url(../images/skin/exclamation.png) 8px 0% no-repeat;
179    line-height: 16px;
180    padding-left: 30px;
181}
182
183td.errors select {
184    border: 1px solid red;
185}
186td.errors input {
187    border: 1px solid red;
188}
189td.errors textarea {
190    border: 1px solid red;
191}
192
193input.time {
194    width:40px;
195}
196input.time.errors {
197    border: 1px solid red;
198}
199input.description {
200    width:450px;
201}
202
203/* TABLES */
204
205table {
206    border: 1px solid #ccc;
207    width: 100%
208}
209tr {
210    border: 0;
211}
212td, th {
213    font: 14px verdana, arial, helvetica, sans-serif;
214    line-height: 17px;
215    padding: 5px 6px;
216    text-align: left;
217    vertical-align: top;
218}
219th {
220    background: #fff url(../images/skin/shadow.jpg);
221    color: #555;
222    font-size: 14px;
223    font-weight: bold;
224    line-height: 17px;
225    padding: 2px 6px;
226}
227th a:link, th a:visited, th a:hover {
228    color: #333;
229    display: block;
230    font-size: 14px;
231    text-decoration: none;
232    width: 100%;
233}
234th.asc a, th.desc a {
235    background-position: right;
236    background-repeat: no-repeat;
237}
238th.asc a {
239    background-image: url(../images/skin/sorted_asc.gif);
240}
241th.desc a {
242    background-image: url(../images/skin/sorted_desc.gif);
243}
244
245.odd {
246    background: #f7f7f7;
247}
248.even {
249    background: #fff;
250}
251
252.clickableOdd {
253    background: #f7f7f7;
254    cursor: pointer;
255}
256.clickableEven {
257    background: #fff;
258    cursor: pointer;
259}
260
261/* LIST */
262
263.list table {
264    border-collapse: collapse;
265}
266.list th, .list td {
267    border-left: 1px solid #ddd;
268}
269.list th:hover, .list tr:hover {
270    background: #b2d1ff;
271}
272
273/* PAGINATION */
274
275.paginateButtons {
276    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
277    border: 1px solid #ccc;
278    border-top: 0;
279    color: #666;
280    font-size: 14px;
281    overflow: hidden;
282    padding: 10px 3px;
283}
284.paginateButtons a {
285    background: #fff;
286    border: 1px solid #ccc;
287    border-color: #ccc #aaa #aaa #ccc;
288    color: #666;
289    margin: 0 3px;
290    padding: 2px 6px;
291}
292.paginateButtons span {
293    padding: 2px 3px;
294}
295
296/* DIALOG */
297
298.dialog table {
299    padding: 5px 0;
300}
301
302.prop {
303    padding: 5px;
304}
305.prop .name {
306    text-align: left;
307    width: 15%;
308    white-space: nowrap;
309}
310.prop .value {
311    text-align: left;
312    width: 85%;
313}
314
315/* ACTION BUTTONS */
316
317.buttons {
318    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
319    border: 1px solid #ccc;
320    color: #666;
321    font-size: 14px;
322    margin-top: -1px;
323    margin-bottom: 5px;
324    overflow: hidden;
325    padding: 0;
326}
327
328.buttons input {
329    background: #fff;
330    border: 0;
331    color: #333;
332    cursor: pointer;
333    font-size: 14px;
334    font-weight: bold;
335    margin-left: 3px;
336    overflow: visible;
337    padding: 2px 6px;
338}
339.buttons input.delete {
340    background: transparent url(../images/skin/database_delete.png) 5px 50% no-repeat;
341    padding-left: 28px;
342}
343.buttons input.edit {
344    background: transparent url(../images/skin/database_edit.png) 5px 50% no-repeat;
345    padding-left: 28px;
346}
347.buttons input.save {
348    background: transparent url(../images/skin/database_save.png) 5px 50% no-repeat;
349    padding-left: 28px;
350}
351.buttons input.add {
352    background: transparent url(../images/skin/database_add.png) 5px 50% no-repeat;
353    padding-left: 28px;
354}
355.buttons input.search {
356    background: transparent url(../images/skin/database_search.png) 5px 50% no-repeat;
357    padding-left: 28px;
358}
359.buttons input.link {
360    background: transparent url(../images/skin/database_link.png) 5px 50% no-repeat;
361    padding-left: 28px;
362}
363.buttons input.go {
364    background: transparent url(../images/skin/database_go.png) 5px 50% no-repeat;
365    padding-left: 28px;
366}
367.buttons input.table {
368    background: transparent url(../images/skin/database_table.png) 5px 50% no-repeat;
369    padding-left: 28px;
370}
371
372#bottom {
373  background: url("../images/bottomBg.png") no-repeat scroll center;
374  width: 1020px;
375  height: 100px;
376}
377
378 /* Navigation Plugin Override */
379.navigation {
380    padding: 0px 0px 0px 165px;
381    list-style-type: none;
382    clear: both;
383    font-size: 14px;
384    /*overflow: hidden;*/ /* Clearing floats */
385}
386
387.navigation li {
388    float: left;
389    /*border: 0px*/
390    /* border: 1px solid #888; */
391     /*border-left-color: #bbb;*/  /* Highlight border-color */
392}
393
394.navigation li.navigation_first {
395     /*border-left-color: #888; */
396}
397
398.navigation li.navigation_active {
399     /*border-left-color: #555;*/  /* Highlight border-color of active item */
400}
401
402.navigation li a {
403    /* color: #fff; */
404    /* background-color: #aaa; */
405    padding: 0.3em 0.75em 0;
406    display: block;
407    text-decoration: none;
408}
409
410.navigation li a:hover {
411    color: red;
412    /* background-color: #999; */
413/*     font-weight: normal; */
414/*     font-size: 14px; */
415    margin: 0.2em 0 0 0;
416    /*cursor: default;*/
417}
418
419.navigation li.navigation_active a {
420    /* background-color: #555; */
421/*    color: #fff;*/
422    color: #006dba;
423    /*color: black;*/
424    font-weight: bold;
425    font-size: 17px;
426    margin: 0 0 0 0;
427    /*cursor: default;*/
428}
429
430.navigation li.navigation_active a:hover {
431    color: #006dba;
432    font-weight: bold;
433    font-size: 17px;
434    margin: 0 0 0 0;
435    /*background-color: #555;*/
436}
437
438/* Sub navigation */
439.subnavigation {
440    /*padding: 0px 0px 0px 165px;*/
441    padding: 0px 0px 0px 220px;
442    list-style-type: none;
443    clear: both;
444    overflow: hidden; /* Clearing floats */
445}
446.subnavigation li {
447    float: left;
448    /* background-color: #555; */
449    padding: 0em 0.75em;
450    border-width: 0px 0;
451}
452.subnavigation li a {
453    color: #006dba;
454    font-weight: bold;
455    font-size: 17px;
456    display: block;
457    /*padding: 0px 0;*/
458    /* border-color: #555; */
459    border-style: solid;
460    border-width: 0px 0;
461    text-decoration: none;
462    /*margin: 0 0 0 0;*/
463    /*cursor: default;*/
464}
465
466.subnavigation li a:visited {
467    color: #006dba;
468}
469
470.subnavigation li a:hover {
471    /*color: red;*/
472    /*border-color: black;*/ 
473    border-width: 1px 0;
474}
475.subnavigation li.subnavigation_active a {
476    /*color: #e0e0e0; */
477    /*cursor: default;*/
478    /*border-color: #e0e0e0;*/
479    border-width: 1px 0;
480}
Note: See TracBrowser for help on using the repository browser.