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

Last change on this file since 801 was 801, checked in by gav, 13 years ago

Add help icon link, open both that and HeaderLink in new windows.

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