477 report: improve browse-edit UI
[freeside.git] / httemplate / elements / xmenu.css
1
2 .webfx-menu, .webfx-menu * {
3         /*
4         Set the box sizing to content box
5         in the future when IE6 supports box-sizing
6         there will be an issue to fix the sizes
7
8         There is probably an issue with IE5 mac now
9         because IE5 uses content-box but the script
10         assumes all versions of IE uses border-box.
11
12         At the time of this writing mozilla did not support
13         box-sizing for absolute positioned element.
14
15         Opera only supports content-box
16         */
17         box-sizing:                     content-box;
18         -moz-box-sizing:        content-box;
19 }
20
21 .webfx-menu {
22         position:               absolute;
23         z-index:                9999;
24         visibility:             hidden;
25         border:                 1px solid #7e0079;
26          -moz-border-radius: 4px;
27          -webkit-border-radius: 4px;
28          border-radius: 4px;
29         padding:                1px;
30         background:             white;
31         -moz-box-shadow: #000000 1px 1px 4px;
32         -webkit-box-shadow: #000000 1px 1px 4px;
33         box-shadow: #000000 1px 1px 4px;
34 }
35
36 .webfx-menu-empty {
37         display:                block;
38         border:                 1px solid white;
39         padding:                2px 5px 2px 5px;
40         font-size:              11px;
41         /* font-family:         Tahoma, Verdan, Helvetica, Sans-Serif; */
42         color:                  black;
43 }
44
45 .webfx-menu a {
46         display:                block;
47         /* width:                       expression(constExpression(ieBox ? "100%": "auto")); /* should be ignored by mz and op */
48         width:                  expression(constExpression(ie ? "98%": "auto")); /* should be ignored by mz and op */
49         overflow:               visible;        
50         /* padding:             2px 0px 2px 5px; */
51         padding:                1px 0px 1px 5px;
52         font-size:              14px;
53 /*      font-family:            Verdana, Arial, Helvetica, sans-serif; */
54         font-weight:            bold;
55         text-decoration:        none;
56         vertical-align:         center;
57         color:                  black;
58         border:                 1px solid white;
59 }       
60
61 .webfx-menu a:visited {
62         color:                  black;
63         border:                 1px solid white;
64 }
65
66 .webfx-menu a:hover {
67         border:                 1px solid #7e0079;
68          -moz-border-radius: 4px;
69          -webkit-border-radius: 4px;
70          border-radius: 4px;
71          background:             #fff8fe;
72 }
73
74 .webfx-menu a[href]:hover {
75         color: black;
76         text-decoration: none;
77 }
78
79 .webfx-menu a .arrow {
80         float:                  right;
81         border:                 0;
82         width:                  3px;
83         margin-right:   3px;
84         margin-top:             4px;
85 }
86
87 /* separtor */
88 .webfx-menu div {
89         height:                 0;
90         height:                 expression(constExpression(ieBox ? "2px" : "0"));
91         border-top:             1px solid #7e0079; /* rgb(120,172,255); */
92         border-bottom:  1px solid rgb(234,242,255);
93         overflow:               hidden;
94         margin:                 2px 0px 2px 0px;
95         font-size:              0mm;
96 }
97
98 .webfx-menu-bar {
99         /* i want a vertical bar */
100         display:                        block;
101
102         /* background:          rgb(120,172,255);/*rgb(255,128,0);*/
103         /* background:           #a097ed; */
104         background:              #cccccc;
105         /* border:                      1px solid #7E0079; */
106         /* border:                      1px solid #000000; */
107         /* border: none */
108         color:                          white;
109
110         padding:                2px;
111         
112         /* IE5.0 has the wierdest box model for inline elements */
113         padding:                expression(constExpression(ie50 ? "0px" : "2px"));
114 }
115
116 .webfx-menu-bar a,
117 .webfx-menu-bar a:visited {
118         /* i want a vertical bar */
119         display:                        block;
120
121
122         padding:                        1px 5px 1px 5px;
123
124         font-size:              14px;
125
126         color:                          black;
127         /* color:                               white; */
128         text-decoration:        none;
129
130         /* IE5.0 Does not paint borders and padding on inline elements without a height/width */
131         height:         expression(constExpression(ie50 ? "17px" : "auto"));
132 }
133
134 .webfx-menu-bar a:link {
135         /* color: white; */
136         color: black;
137 }
138
139 .webfx-menu-bar a:hover {
140         text-decoration: underline;
141         color: #7e0079;
142 }
143
144 .webfx-menu-bar a .arrow {
145         float:                  right;
146         border:                 0;
147 /*      vertical-align:         top; */
148         width:                  3px;
149         margin-right:   3px;
150         margin-top:             4px;
151 }
152
153 .webfx-menu-bar a:active, .webfx-menu-bar a:focus {
154         -moz-outline:   none;
155         outline:                none;
156         /*
157                 ie does not support outline but ie55 can hide the outline using
158                 a proprietary property on HTMLElement. Did I say that IE sucks at CSS?
159         */
160         ie-dummy:               expression(this.hideFocus=true);
161 }
162
163 .webfx-menu-title  {
164         display:                block;
165         width:                  expression(constExpression(ie ? "98%": "auto"));        /* should be ignored by mz and op */
166 }