|
@@ -7,213 +7,272 @@
|
7
|
7
|
http://tech-laboratory.blogspot.com
|
8
|
8
|
*/
|
9
|
9
|
.swMain {
|
10
|
|
- position:relative;
|
11
|
|
- display:block;
|
|
10
|
+ position: relative;
|
|
11
|
+ display: block;
|
12
|
12
|
margin: 0 auto;
|
13
|
|
- width:90%;
|
|
13
|
+ width: 90%;
|
14
|
14
|
}
|
15
|
15
|
.swMain .stepContainer {
|
16
|
|
- display:block;
|
17
|
|
- position: relative;
|
18
|
|
- overflow:hidden;
|
19
|
|
- clear:both;
|
|
16
|
+ display: block;
|
|
17
|
+ position: relative;
|
|
18
|
+ overflow: hidden;
|
|
19
|
+ margin-left: 55px;
|
|
20
|
+ clear: both;
|
20
|
21
|
}
|
21
|
22
|
|
22
|
|
-.swMain .stepContainer>div.content {
|
23
|
|
- display:block;
|
|
23
|
+.swMain .stepContainer > div.content {
|
|
24
|
+ display: block;
|
24
|
25
|
position: absolute;
|
25
|
26
|
border: 1px solid #ddd;
|
26
|
|
- height:400px;
|
27
|
|
- z-index:88;
|
28
|
|
- clear:both;
|
|
27
|
+ height: 400px;
|
|
28
|
+ z-index: 88;
|
|
29
|
+ clear: both;
|
29
|
30
|
width: 100%;
|
30
|
31
|
margin: 0;
|
31
|
32
|
}
|
32
|
33
|
|
33
|
34
|
.swMain div.actionBar {
|
34
|
|
- display:block;
|
35
|
|
- clear:both;
|
36
|
|
- text-align:left;
|
37
|
|
- /**overflow:auto; **/
|
38
|
|
- z-index:88;
|
39
|
|
- left:0;
|
40
|
|
- padding-top:15px
|
|
35
|
+ display: block;
|
|
36
|
+ clear: both;
|
|
37
|
+ text-align: left;
|
|
38
|
+ /**overflow:auto; **/
|
|
39
|
+ z-index: 88;
|
|
40
|
+ left: 0;
|
|
41
|
+ padding-top: 15px;
|
41
|
42
|
}
|
42
|
43
|
|
43
|
44
|
.swMain .stepContainer .StepTitle {
|
44
|
|
- display:block;
|
|
45
|
+ display: block;
|
45
|
46
|
position: relative;
|
46
|
|
- margin:0;
|
47
|
|
- padding:10px 20px;
|
48
|
|
- font: bold 16px Verdana, Arial, Helvetica, sans-serif;
|
49
|
|
- color:#333;
|
50
|
|
- background-color:#f6f6f6;
|
51
|
|
- clear:both;
|
52
|
|
- text-align:left;
|
53
|
|
- z-index:88;
|
|
47
|
+ margin: 0;
|
|
48
|
+ padding: 10px 20px;
|
|
49
|
+ font: bold 16px Verdana, Arial, Helvetica, sans-serif;
|
|
50
|
+ color: #333;
|
|
51
|
+ background-color: #f6f6f6;
|
|
52
|
+ clear: both;
|
|
53
|
+ text-align: left;
|
|
54
|
+ z-index: 88;
|
54
|
55
|
}
|
55
|
56
|
.swMain ul.anchor {
|
56
|
57
|
position: relative;
|
57
|
|
- display:block;
|
58
|
|
- float:left;
|
|
58
|
+ display: block;
|
|
59
|
+ float: left;
|
59
|
60
|
list-style: none;
|
60
|
|
- padding: 0px;
|
61
|
|
- margin: 10px 0;
|
|
61
|
+ padding: 0px;
|
|
62
|
+ margin: 10px 0;
|
62
|
63
|
clear: both;
|
63
|
|
- border: 0px solid #CCCCCC;
|
|
64
|
+ border: 0px solid #cccccc;
|
64
|
65
|
background: transparent; /*#EEEEEE */
|
65
|
66
|
}
|
66
|
|
-.swMain ul.anchor li{
|
67
|
|
- position: relative;
|
68
|
|
- display:block;
|
|
67
|
+.swMain ul.anchor li {
|
|
68
|
+ width: 100px;
|
|
69
|
+ height: 103px;
|
|
70
|
+ position: relative;
|
69
|
71
|
margin: 0;
|
70
|
|
- padding: 0;
|
71
|
|
- padding-left:3px;
|
|
72
|
+ padding: 0;
|
|
73
|
+ padding-left: 3px;
|
72
|
74
|
padding-right: 3px;
|
73
|
|
- border: 0px solid #E0E0E0;
|
|
75
|
+ border: 0px solid #e0e0e0;
|
74
|
76
|
float: left;
|
75
|
77
|
}
|
76
|
78
|
/* Anchor Element Style */
|
77
|
79
|
.swMain ul.anchor li a {
|
78
|
|
- display:block;
|
79
|
|
- position:relative;
|
80
|
|
- float:left;
|
81
|
|
- margin:0;
|
82
|
|
- padding:3px;
|
83
|
|
- height:60px;
|
84
|
|
- width:230px;
|
|
80
|
+ align-self: center;
|
|
81
|
+ text-align: center;
|
|
82
|
+ display: block;
|
|
83
|
+ position: relative;
|
|
84
|
+ /* float: left; */
|
|
85
|
+ margin: 0;
|
|
86
|
+ padding-top: 6px;
|
|
87
|
+ height: 50px;
|
|
88
|
+ width: 50px;
|
85
|
89
|
text-decoration: none;
|
86
|
|
- outline-style:none;
|
87
|
|
- -moz-border-radius : 5px;
|
88
|
|
- -webkit-border-radius: 5px;
|
89
|
|
- z-index:99;
|
|
90
|
+ outline-style: none;
|
|
91
|
+ -moz-border-radius: 50%;
|
|
92
|
+ -webkit-border-radius: 50%;
|
|
93
|
+ z-index: 99;
|
90
|
94
|
}
|
91
|
|
-.swMain ul.anchor li a .stepNumber{
|
92
|
|
- position:relative;
|
93
|
|
- float:left;
|
94
|
|
- width:30px;
|
|
95
|
+.swMain ul.anchor li a .stepNumber {
|
|
96
|
+ /* position: absolute; */
|
|
97
|
+ /* float: left; */
|
|
98
|
+ width: 30px;
|
95
|
99
|
text-align: center;
|
96
|
|
- padding:5px;
|
97
|
|
- padding-top:0;
|
98
|
|
- font: bold 45px Verdana, Arial, Helvetica, sans-serif;
|
|
100
|
+ /* padding: 5px; */
|
|
101
|
+ font: bold 30px Verdana, Arial, Helvetica, sans-serif;
|
99
|
102
|
color: inherit;
|
100
|
103
|
}
|
101
|
|
-.swMain ul.anchor li a .stepDesc{
|
102
|
|
- position:relative;
|
103
|
|
- display:block;
|
104
|
|
- float:left;
|
|
104
|
+.swMain ul.anchor li a .stepDesc {
|
|
105
|
+ position: absolute;
|
|
106
|
+ left: 10;
|
|
107
|
+ top: 5;
|
|
108
|
+ display: block;
|
|
109
|
+ /* float: left; */
|
105
|
110
|
text-align: left;
|
106
|
|
- padding: 5px 5px 5px 15px;
|
|
111
|
+ /* padding: 5px 5px 5px 5px; */
|
107
|
112
|
color: inherit;
|
108
|
|
- font: bold 20px Verdana, Arial, Helvetica, sans-serif;
|
|
113
|
+ font: bold 20px sans-serif;
|
109
|
114
|
}
|
110
|
|
-.swMain ul.anchor li a .stepDesc small{
|
|
115
|
+.swMain ul.anchor li a .stepDesc small {
|
111
|
116
|
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
|
112
|
117
|
color: inherit;
|
113
|
118
|
}
|
114
|
|
-.swMain ul.anchor li a.selected{
|
115
|
|
- color:#F8F8F8;
|
116
|
|
- background: #4c88fe; /* EA8511 */
|
117
|
|
- cursor:pointer;
|
|
119
|
+.swMain ul.anchor li .tra1::before {
|
|
120
|
+ content: '';
|
|
121
|
+ position: absolute;
|
|
122
|
+ width: 4px;
|
|
123
|
+ height: 105px;
|
|
124
|
+ /* background: rgb(76, 136, 245); */
|
|
125
|
+ z-index: -1;
|
|
126
|
+ background-color: inherit;
|
|
127
|
+ top: -25px;
|
|
128
|
+ left: 24px;
|
|
129
|
+ border-radius: 2px;
|
|
130
|
+}
|
|
131
|
+.swMain ul.anchor li a.selected {
|
|
132
|
+ color: #f8f8f8;
|
|
133
|
+ background: #4c88fe; /* EA8511 */
|
|
134
|
+ cursor: pointer;
|
118
|
135
|
}
|
119
|
136
|
.swMain ul.anchor li a.selected:hover {
|
120
|
|
- color:#F8F8F8;
|
121
|
|
- background: #4f8cdd;
|
|
137
|
+ color: #f8f8f8;
|
|
138
|
+ background: #4f8cdd;
|
122
|
139
|
}
|
123
|
140
|
|
124
|
|
-.swMain ul.anchor li a.done {
|
125
|
|
- position:relative;
|
126
|
|
- color:#FFF;
|
127
|
|
- background: #8CC63F;
|
128
|
|
- border: 1px solid #8CC63F;
|
129
|
|
- z-index:99;
|
|
141
|
+.swMain ul.anchor li a.done {
|
|
142
|
+ position: relative;
|
|
143
|
+ color: #fff;
|
|
144
|
+ background: #8cc63f;
|
|
145
|
+ /* border: 1px solid #8cc63f; */
|
|
146
|
+ z-index: 99;
|
130
|
147
|
}
|
131
|
148
|
.swMain ul.anchor li a.done:hover {
|
132
|
|
- color:#fff;
|
133
|
|
- background: #8CC63F;
|
134
|
|
- border: 1px solid #8CC63F;
|
|
149
|
+ color: #fff;
|
|
150
|
+ background: #8cc63f;
|
|
151
|
+ /* border: 1px solid #8cc63f; */
|
|
152
|
+}
|
|
153
|
+.swMain ul.anchor li .tra2::before {
|
|
154
|
+ content: '';
|
|
155
|
+ position: absolute;
|
|
156
|
+ width: 4px;
|
|
157
|
+ height: 105px;
|
|
158
|
+ z-index: -1;
|
|
159
|
+ background-color: inherit;
|
|
160
|
+ /* background: rgba(176, 176, 177); */
|
|
161
|
+ left: 24px;
|
|
162
|
+ top: -25px;
|
|
163
|
+ border-radius: 2px;
|
|
164
|
+}
|
|
165
|
+.swMain ul.anchor li .tra3::before {
|
|
166
|
+ content: '';
|
|
167
|
+ position: absolute;
|
|
168
|
+ width: 4px;
|
|
169
|
+ height: 105px;
|
|
170
|
+ background-color: inherit;
|
|
171
|
+ z-index: -1;
|
|
172
|
+ left: 24px;
|
|
173
|
+ top: -25px;
|
|
174
|
+ border-radius: 2px;
|
135
|
175
|
}
|
136
|
176
|
.swMain ul.anchor li a.disabled {
|
137
|
|
- color:#CCCCCC;
|
138
|
|
- background: #F8F8F8;
|
139
|
|
- border: 1px solid #CCC;
|
140
|
|
- cursor:text;
|
|
177
|
+ color: #cccccc;
|
|
178
|
+ background: rgb(230, 230, 230);
|
|
179
|
+ /* border: 1px solid #ccc; */
|
|
180
|
+ cursor: text;
|
141
|
181
|
}
|
142
|
182
|
.swMain ul.anchor li a.disabled:hover {
|
143
|
|
- color:#CCCCCC;
|
144
|
|
- background: #F8F8F8;
|
|
183
|
+ color: #cccccc;
|
|
184
|
+ background: #f8f8f8;
|
145
|
185
|
}
|
146
|
186
|
|
147
|
187
|
.swMain ul.anchor li a.error {
|
148
|
|
- color:#fff;
|
149
|
|
- background: #f08f75 !important;
|
150
|
|
- border: 1px solid #fb3500 !important;
|
|
188
|
+ color: #fff;
|
|
189
|
+ background: #fb3500 !important;
|
|
190
|
+ /* border: 1px solid #fb3500 !important; */
|
151
|
191
|
}
|
152
|
192
|
|
153
|
|
-.swMain .buttonNext,.swMain .buttonPrevious ,.swMain .buttonFinish
|
154
|
|
- {font-size:14px;color: #fff;height:30px;line-height:30px;background: #4c88fe;border-radius:3px;padding: 0 20px;display:inline-block;vertical-align:middle;cursor: pointer;margin-left: 10px;float:right;text-decoration:none;}
|
155
|
|
-.swMain .buttonNext:hover,.swMain .buttonPrevious:hover ,.swMain .buttonFinish:hover{background: #4f8cdd;text-decoration:none;}
|
|
193
|
+.swMain .buttonNext,
|
|
194
|
+.swMain .buttonPrevious,
|
|
195
|
+.swMain .buttonFinish {
|
|
196
|
+ font-size: 14px;
|
|
197
|
+ color: #fff;
|
|
198
|
+ height: 30px;
|
|
199
|
+ line-height: 30px;
|
|
200
|
+ background: #4c88fe;
|
|
201
|
+ border-radius: 3px;
|
|
202
|
+ padding: 0 20px;
|
|
203
|
+ display: inline-block;
|
|
204
|
+ vertical-align: middle;
|
|
205
|
+ cursor: pointer;
|
|
206
|
+ margin-left: 10px;
|
|
207
|
+ float: right;
|
|
208
|
+ text-decoration: none;
|
|
209
|
+}
|
|
210
|
+.swMain .buttonNext:hover,
|
|
211
|
+.swMain .buttonPrevious:hover,
|
|
212
|
+.swMain .buttonFinish:hover {
|
|
213
|
+ background: #4f8cdd;
|
|
214
|
+ text-decoration: none;
|
|
215
|
+}
|
156
|
216
|
.swMain .buttonDisabled {
|
157
|
|
- color:#F8F8F8 !important;
|
158
|
|
- background-color: #CCCCCC !important;
|
159
|
|
- border: 1px solid #CCCCCC !important;
|
160
|
|
- cursor:text;
|
|
217
|
+ color: #f8f8f8 !important;
|
|
218
|
+ background-color: #cccccc !important;
|
|
219
|
+ border: 1px solid #cccccc !important;
|
|
220
|
+ cursor: text;
|
161
|
221
|
}
|
162
|
222
|
|
163
|
|
-
|
164
|
223
|
/* Form Styles */
|
165
|
224
|
|
166
|
225
|
.txtBox {
|
167
|
|
- border:1px solid #CCCCCC;
|
168
|
|
- color:#5A5655;
|
169
|
|
- font:13px Verdana,Arial,Helvetica,sans-serif;
|
170
|
|
- padding:2px;
|
171
|
|
- width:430px;
|
|
226
|
+ border: 1px solid #cccccc;
|
|
227
|
+ color: #5a5655;
|
|
228
|
+ font: 13px Verdana, Arial, Helvetica, sans-serif;
|
|
229
|
+ padding: 2px;
|
|
230
|
+ width: 430px;
|
172
|
231
|
}
|
173
|
232
|
.txtBox:focus {
|
174
|
|
- border:1px solid #EA8511;
|
|
233
|
+ border: 1px solid #ea8511;
|
175
|
234
|
}
|
176
|
235
|
|
177
|
236
|
.swMain .loader {
|
178
|
|
- position:relative;
|
179
|
|
- display:none;
|
180
|
|
- float:left;
|
|
237
|
+ position: relative;
|
|
238
|
+ display: none;
|
|
239
|
+ float: left;
|
181
|
240
|
margin: 2px 0 0 2px;
|
182
|
|
- padding:8px 10px 8px 40px;
|
183
|
|
- border: 1px solid #FFD700;
|
184
|
|
- font: bold 13px Verdana, Arial, Helvetica, sans-serif;
|
185
|
|
- color:#5A5655;
|
186
|
|
- background: #FFF url(../../images/loader.gif) no-repeat 5px;
|
187
|
|
- -moz-border-radius : 5px;
|
|
241
|
+ padding: 8px 10px 8px 40px;
|
|
242
|
+ border: 1px solid #ffd700;
|
|
243
|
+ font: bold 13px Verdana, Arial, Helvetica, sans-serif;
|
|
244
|
+ color: #5a5655;
|
|
245
|
+ background: #fff url(../../images/loader.gif) no-repeat 5px;
|
|
246
|
+ -moz-border-radius: 5px;
|
188
|
247
|
-webkit-border-radius: 5px;
|
189
|
|
- z-index:998;
|
|
248
|
+ z-index: 998;
|
190
|
249
|
}
|
191
|
250
|
.swMain .msgBox {
|
192
|
|
- position:relative;
|
193
|
|
- display:none;
|
194
|
|
- float:left;
|
195
|
|
- padding:5px;
|
196
|
|
- border: 1px solid #FFD700;
|
197
|
|
- background-color: #FFFFDD;
|
198
|
|
- -moz-border-radius : 5px;
|
|
251
|
+ position: relative;
|
|
252
|
+ display: none;
|
|
253
|
+ float: left;
|
|
254
|
+ padding: 5px;
|
|
255
|
+ border: 1px solid #ffd700;
|
|
256
|
+ background-color: #ffffdd;
|
|
257
|
+ -moz-border-radius: 5px;
|
199
|
258
|
-webkit-border-radius: 5px;
|
200
|
|
- z-index:999;
|
201
|
|
- min-width:240px;
|
|
259
|
+ z-index: 999;
|
|
260
|
+ min-width: 240px;
|
202
|
261
|
}
|
203
|
262
|
.swMain .msgBox .content {
|
204
|
|
- font: normal 12px Verdana,Arial,Helvetica,sans-serif;
|
|
263
|
+ font: normal 12px Verdana, Arial, Helvetica, sans-serif;
|
205
|
264
|
padding: 0px;
|
206
|
|
- border:0;
|
207
|
|
- background:none;
|
208
|
|
- float:left;
|
|
265
|
+ border: 0;
|
|
266
|
+ background: none;
|
|
267
|
+ float: left;
|
209
|
268
|
}
|
210
|
269
|
.swMain .msgBox .close {
|
211
|
|
- color: #CCC;
|
|
270
|
+ color: #ccc;
|
212
|
271
|
outline-style: none;
|
213
|
272
|
padding: 0 2px 0 2px;
|
214
|
273
|
text-decoration: none;
|
215
|
274
|
}
|
216
|
|
-.swMain .msgBox .close:hover{
|
217
|
|
- color: #EA8511;
|
218
|
|
- border: 1px solid #EA8511;
|
219
|
|
-}
|
|
275
|
+.swMain .msgBox .close:hover {
|
|
276
|
+ color: #ea8511;
|
|
277
|
+ border: 1px solid #ea8511;
|
|
278
|
+}
|