Revision f533f224 ui/static/main.css

b/ui/static/main.css
7 7
dl, dt, dd, ol, ul, li,
8 8
fieldset, form, label, legend,
9 9
table, caption, tbody, tfoot, thead, tr, th, td {
10
	margin: 0;
11
	padding: 0;
12
	border: 0;
13
	font-size: 100%;
14
	vertical-align: baseline;
15
	background: transparent;
10
    margin: 0;
11
    padding: 0;
12
    border: 0;
13
    font-size: 100%;
14
    vertical-align: baseline;
15
    background: transparent;
16 16
    font-family: Verdana, 'PT Sans', sans-serif;
17 17
}
18 18

  
19
html {
20
    height: 100%;
21
}
22

  
19 23
body {
20
	line-height: 1;
21
    background: url(../static/degrade-background.png) repeat-x scroll 0 0 #C3C3C3;
22
    margin: 0;
24
    line-height: 1;
25
    background: url(../static/body-bg.png) repeat-x scroll 0 0 #FFFFFF;
26
    height: 100%;
27
}
28

  
29
#container {
30
	position:relative;
31
	margin:0 auto;
32
	width: 100%;
33
	background:#f0f0f0;
34
	height:auto !important;
35
	height:100%;
36
	min-height:100%;
37
    background: url("../static/body-bg2.png") no-repeat scroll right bottom transparent;
38
}
39

  
40
#header {
41
    height: 93px;
42
    background: url("../static/header-bg.png") repeat-x scroll 0 0 #FFFFFF;
43
    margin: 0 auto;
44
    width: 700px;
45
}
46

  
47

  
48
#content {
49
    padding-bottom: 183px;
50
    width: 100%;
51
}
52

  
53
#footer {
54
    height: 119px;
55
    background-color: #4085A5;
56
	position:absolute;
57
    bottom: 0;
58
    width:100%;
23 59
}
24 60

  
25 61
ol, ul {
26
	list-style: none;
62
    list-style: none;
27 63
}
28 64

  
29 65
blockquote, q {
30
	quotes: none;
66
    quotes: none;
31 67
}
32 68

  
33 69
blockquote:before, blockquote:after,
34 70
q:before, q:after {
35
	content: '';
36
	content: none;
71
    content: '';
72
    content: none;
37 73
}
38 74

  
39 75
/* remember to define focus styles! */
......
43 79

  
44 80
/* remember to highlight inserts somehow! */
45 81
ins {
46
	text-decoration: none;
82
    text-decoration: none;
47 83
}
48 84

  
49 85
del {
50
	text-decoration: line-through;
86
    text-decoration: line-through;
51 87
}
52 88

  
53 89
/* tables still need 'cellspacing="0"' in the markup */
54 90
table {
55
	border-collapse: collapse;
56
	border-spacing: 0;
91
    border-collapse: collapse;
92
    border-spacing: 0;
57 93
}
58 94

  
59 95
h5 {
......
63 99
}
64 100

  
65 101
/* root element for tabs  */
102
.tab-name {
103
    background-color: #5CA1C0;
104
    color: #FFFFFF;
105
    float: left;
106
    font-size: 150%;
107
    height: 28px;
108
    padding-top: 3px;
109
    text-align: center;
110
    width: 170px;
111
}
112

  
113
.tab-separator {
114
    background-color: white;
115
    float: left;
116
    width: 2px;
117
    height: 23px;
118
    margin-top: 4px;
119
}
120

  
66 121
ul.css-tabs {
67
	margin: 0 0 0 10px; 
68 122
    padding: 0;
69
	height:31px;
70
    font-size:32px;	
71
    overflow: hidden; 	
123
    height:31px;
124
    background-color: #5CA1C0;
72 125
}
73 126

  
74 127
ul.css-tabs .secondary {
......
76 129
}
77 130

  
78 131
/* single tab */
79
ul.css-tabs li {  
80
	float:left;	 
81
	padding:0; 
82
	margin: 0 10px 0 0;  
83
	list-style-type:none;	
84
}
85

  
86
/* link inside the tab. uses a background image */
87
ul.css-tabs a { 
88
	float:left;
89
	display:block;
90
	text-decoration:none;
91
	color:#d2d2d2;
92
	position:relative;
93
	outline:0;
94
    padding: 0 9px 0 13px;
95
    top: 9px;
96
}
97

  
98
ul.css-tabs a#machines {
99
    color: #a3bbc5;
100
}
101

  
102
ul.css-tabs a#machines.current {
103
  color: #87aade;
104
}
105

  
106
ul.css-tabs a#disks {
107
    color: #deb358;
108
}
109

  
110
ul.css-tabs a#disks.current {
111
    color: #dea842;
112
}
113

  
114
ul.css-tabs a#images {
115
    color: #9ba97b;
116
}
117

  
118
ul.css-tabs a#images.current {
119
    color: #87a06d;
120
}
121

  
122
ul.css-tabs a#networks {
123
    color: #bc9399;
124
}
125

  
126
ul.css-tabs a#networks.current {
127
  color: #9d6d6a;
128
}
129

  
130
ul.css-tabs a#files {
131
    color: #a3bbc5;
132
}
133

  
134
ul.css-tabs a#files.current {
135
  color: #87aade;
136
}
137

  
138
ul.css-tabs a#desktops {
139
    color: #deb358;
140
}
141

  
142
ul.css-tabs a#desktops.current {
143
    color: #dea842;
132
ul.css-tabs li {
133
    float:left;
134
    padding:0;
135
    list-style-type:none;
144 136
}
145 137

  
146
ul.css-tabs a#apps {
147
    color: #9ba97b;
138
ul.css-tabs .current {
139
    background: #4085A5;
148 140
}
149 141

  
150
ul.css-tabs a#apps.current {
151
    color: #87a06d;
142
/* link inside the tab. uses a background image */
143
ul.css-tabs a {
144
    float:left;
145
    display:block;
146
    text-decoration:none;
147
    color:#d2d2d2;
148
    position:relative;
149
    outline:0;
150
    padding: 4px 25px 0;
151
    height: 27px;
152 152
}
153 153

  
154
.more-tabs {
155
    float: right;
156
    margin: -15px 50px 0px 0px;
154
ul.css-tabs a:hover {
155
    background: #74AEC9;
157 156
}
158 157

  
159
.more-tabs:hover {
160
    cursor: pointer;
161
}
162
	
163 158
/* selected tab */
164 159
ul.css-tabs a.current {
165
	cursor:default;   
166
    top: 2px !important; 
160
    cursor:default;
167 161
}
168 162

  
163
ul.css-tabs a.current:hover {
164
    background: #4085A5;
165
}
169 166
/* tab pane */
170 167
div.css-panes {
171 168
/*    border-top: 10px solid #87aade;
172 169
    border-bottom: 10px solid #87aade;  */
173
    background: white;
170
    background: transparent;
174 171
}
175 172

  
176 173
.css-panes > div.pane {
177
	display:none;
178
	padding:0px 20px;
174
    display:none;
175
    padding:0px 20px;
179 176
    margin: 0 1em;
180 177
}
181 178

  
182 179
/* CSS3 border radius for various elements. yea - CSS isn't perfect */
183 180
.rounded, #sheet input, .error {
184
	border-radius: 5px;
185
	-webkit-border-radius: 5px;
186
	-moz-border-radius: 5px;
187
	-o-border-radius: 5px;
188
	-khtml-border-radius: 5px;
181
    border-radius: 5px;
182
    -webkit-border-radius: 5px;
183
    -moz-border-radius: 5px;
184
    -o-border-radius: 5px;
185
    -khtml-border-radius: 5px;
189 186
}
190 187

  
191 188
/* validation error message */
192 189
.error {
193
	background-color:#E8FF6D;
194
	padding:4px;
195
	-webkit-box-shadow: #000 0 0 9pt;
196
	-moz-box-shadow: #000 0 0 9pt;
190
    background-color:#E8FF6D;
191
    padding:4px;
192
    -webkit-box-shadow: #000 0 0 9pt;
193
    -moz-box-shadow: #000 0 0 9pt;
197 194
}
198 195

  
199 196
/* nested arrow inside error message. It's 100% CSS. No images. */
200 197
.error em {
201
	border: 10px solid;
202
	border-color: #E8FF6D transparent transparent;
203
	bottom: -17px;
204
	display: block;
205
	height: 0;
206
	left: 10px;
207
	position: absolute;
208
	width: 0;
198
    border: 10px solid;
199
    border-color: #E8FF6D transparent transparent;
200
    bottom: -17px;
201
    display: block;
202
    height: 0;
203
    left: 10px;
204
    position: absolute;
205
    width: 0;
209 206
}
210 207

  
211 208
/* input field that caused validation error */
212 209
.invalid {
213
	background-color: rgba(221, 233, 255, 0.898) !important;
210
    background-color: rgba(221, 233, 255, 0.898) !important;
211
}
212

  
213
#beforecreate {
214
    background-color: #FF9955;
215
    float: left;
216
    height: 32px;
217
    margin-left: -50px;
218
    margin-top: 8px;
219
    width: 20px;
220
}
221

  
222
#createcontainer {
223
    margin-top: 20px;
224
    margin-bottom: 10px;
225
    display:none;
214 226
}
215 227

  
216 228
#create {
217
    background-color: #87aade;
229
    background-color: #FF7F2A;
218 230
    color: #000;
219 231
    cursor: pointer;
220 232
    display: none;
221
    padding: 6px 24px;
222
    margin: -8px 0 20px -36px;
233
    padding: 7px 24px;
234
    margin: 0 0 0 -36px;
223 235
    width: 125px;
224 236
    text-decoration: none;
237
    font-size:100%;
225 238
}
226 239

  
227 240
#create:hover {
228
    background-color: #a8c5f1;
241
    background-color: #FF9955;
229 242
}
230 243

  
231
#header .fatborder{
232
    height: 60px;
233
    background: #999;
244
#console-header {
245
    height: 67px;
246
    background: url("../static/header-bg.png") repeat-x scroll 0 0 #FFFFFF;
247
}
248

  
249
.header-logo {
250
    padding-top: 19px;
251
}
252

  
253
div#footer-text a {
254
    color: #FFFFFF;
255
    text-decoration: none;
256
}
257

  
258

  
259
div#footer-text{
260
    clear: both;
261
    color: #FFFFFF;
262
    font-size: 75%;
263
    left: 50%;
264
    margin-left: -250px;
265
    padding-top: 10px;
266
    position: absolute;
267
    width: 700px;
234 268
}
235 269

  
270
#footer-bg {
271
    background: url("../static/footer-bg.png") no-repeat scroll 0 0 #4085A5;
272
    float:right;
273
    width: 700px;
274
    height: 119px;
275
    background-position:right;
276
}
277

  
278

  
236 279
div#wrapper {
237 280
    width: 700px;
238 281
    margin: 0em auto;
......
242 285
    background-color:#fff;
243 286
    display:none;
244 287
    width:30em;
245
    height:20em;
246 288
    padding:1em;
247 289
    text-align:left;
248 290
}
249 291

  
250
/* scrollable root element */
251
#wizard {	
252
	font-size:9pt;
253
	height:405px;
254
	width:453px;
255
	margin:0px auto;	
256
	overflow:hidden;
257
	position:absolute !important;
258
}  
292
/* server wizard scrollable root element and network wizard */
293
#wizard, #networks-wizard {
294
    font-size:9pt;
295
    height:405px;
296
    width:453px;
297
    overflow:hidden;
298
    position:absolute !important;
299
}
259 300

  
260 301
/* scrollable items */
261 302
#wizard .items {
262
	width:20000em;	
263
	clear:both;	
264
	position:absolute;	
303
    width:20000em;
304
    clear:both;
305
    position:absolute;
265 306
    display:block;
266 307
    padding: 0;
267 308
    margin: 0;
......
270 311
}
271 312

  
272 313
/* single item */
273
#wizard .page {	
314
#wizard .page, #networks-wizard div.container {
274 315
    padding: 15px 40px 20px 15px;
275
	width:447px;
276
	float:left;	
316
    width:447px;
317
    float:left;
277 318
    display:block;
278 319
    border:none;
279 320
    background-color: transparent;
280 321
}
281 322

  
323
#networks-wizard div.container {
324
    background-color: #ECF4F8;
325
    width:400px;
326
    height: 180px;
327
    margin-bottom:50px;
328
}
329

  
282 330
/* title */
283
#wizard h2 {
331
#wizard h2, #networks-wizard h2 {
284 332
    color: black;
285 333
    font-size: 100%;
286 334
    font-weight: normal;
287 335
    padding-left: 20px;
288 336
}
289 337

  
338
#networks-wizard h2 {
339
    margin-top: 15px;
340
}
341

  
290 342
#wizard li {
291
	margin-bottom:1.2em;
343
    margin-bottom:1.2em;
292 344
}
293 345

  
294 346
#wizard .pane li {
......
296 348
}
297 349

  
298 350
#wizard label {
299
	font-size:16px;	
300
	display:block;
351
    font-size:16px;
352
    display:block;
301 353
    clear: both;
302 354
}
303 355

  
304 356
#wizard label strong {
305
	position:relative;
306
	top:-1px;
357
    position:relative;
358
    top:-1px;
307 359
    font-size: 80%;
308 360
    font-weight: normal;
309 361
}
310 362

  
311 363
#wizard label em {
312
	font-size:9pt;
313
	color:#666;	
314
	font-style:normal;
364
    font-size:9pt;
365
    color:#666;
366
    font-style:normal;
315 367
}
316 368

  
317 369
#wizard .text {
318
	width: 270px;
319
	padding: 5px;
370
    width: 270px;
371
    padding: 5px;
320 372
    margin-top: 10px;
321
	border: 1px solid #ccc;
322
	color: #456;
323
	letter-spacing: 1px;
373
    border: 1px solid #ccc;
374
    color: #456;
375
    letter-spacing: 1px;
324 376
}
325 377

  
326 378
#wizard select {
327
	border:1px solid #ccc;
328
	width:94%;	
329
	padding:4px;
379
    border:1px solid #ccc;
380
    width:94%;
381
    padding:4px;
330 382
    display: none;
331 383
}
332 384

  
333
#wizard .double label { 
334
	width:50%;
335
	float:left;
385
#wizard .double label {
386
    width:50%;
387
    float:left;
336 388
}
337 389

  
338 390
#wizard .double .text {
339
	width:93%;	
391
    width:93%;
340 392
}
341 393

  
342 394
#wizard .clearfix {
343
	clear:left;
344
	padding-top:10px;	
395
    clear:left;
396
    padding-top:10px;
345 397
}
346 398

  
347 399
#wizard .right {
348
	float:right;		
400
    float:right;
349 401
}
350 402

  
351 403
#wizard .error {
352
	border:1px solid red;		
353
}
354

  
355
#wizard a div.image {
356

  
404
    border:1px solid red;
357 405
}
358 406

  
359 407
#wizard a:hover div.image {
360
    background-color: #999;
408
    background-color: #C5DEE9;
361 409
}
362 410

  
363 411
.selecteddiv {
364
    background-color: #999 !important;
412
    background-color: #C5DEE9 !important;
365 413
}
366 414

  
367 415
#wizard label a:hover strong {
368
    color: white;
416
    color: black;
369 417
}
370 418

  
371 419
#wizard div.image span.size {
......
386 434
}
387 435

  
388 436
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
389
    color: white;
437
    color: black;
390 438
}
391 439

  
392 440
#wizard .cost {
393
    color: #666;
441
    color: #79A4C1;
394 442
    margin-top: 40px;
395 443
    clear:both;
396 444
    padding-left: 15px;
......
398 446
}
399 447

  
400 448
#wizard #status {
401
	height: 50px;
402
	background: #666;
449
    height: 50px;
450
    background: #4085A5;
403 451
    width: 450px;
404 452
}
405 453

  
406 454
#wizard .headernumber {
407 455
    font-size: 470%;
408
    font-weight: normal;
409 456
}
410 457

  
411 458
#wizard .headerbody {
412
    font-size: 110%;
459
    font-size: 120%;
413 460
    font-weight: normal;
414 461
    display: inline;
415
    margin-top: 20px;
416
    position: absolute;
462
    top: -15px;
463
    position: relative;
417 464
}
418 465

  
419 466
#wizard .first {
420
    margin-left: -7px;
467
    left: -8px;
421 468
}
422 469

  
423 470
#wizard .third {
424
    margin-top: -2px !important;
471
    margin-top: -1px !important;
425 472
}
426 473

  
427
#wizard .topruler {
428
    background-color: #CCCCCC;
474
#wizard .topruler, #networks-wizard .topruler {
475
    background-color: #CDE2EC;
429 476
    border: 0 none;
430 477
    height: 4px;
431 478
    margin-left: -1px;
......
434 481
    margin-top: 6px;
435 482
}
436 483

  
437
#wizard .bottomruler {
438
    background-color: #CCCCCC;
484
#wizard .bottomruler, #networks-wizard .bottomruler {
485
    background-color: #CDE2EC;
439 486
    border: 0 none;
440 487
    height: 4px;
441 488
    margin-left: -1px;
......
444 491
    margin-top:6px;
445 492
}
446 493

  
447
#wizard #cancel {
448
    text-align: center;
494
#networks-wizard .topruler, #networks-wizard .bottomruler {
495
    width: 455px;
496
    float: left;
497
}
498

  
499
#wizard #cancel, #networks-wizard .cancel {
500
    background-color: #4085A5;
501
    border-color: #4085A5;
502
    text-align: center !important;
449 503
}
450 504

  
451
#wizard #start {
505
#wizard #cancel:hover, #networks-wizard .cancel:hover {
506
    background-color: #7DB4CD;
507
    border-color: #7DB4CD;
508
}
509

  
510
#wizard #start, #networks-wizard .create {
452 511
    text-align: center;
453 512
    background-color: #FF6600;
454 513
    border-color: #FF6600;
455 514
}
456 515

  
457
#wizard #start:hover {
516
#networks-wizard .create {
517
    float:right;
518
    width: 140px;
519
}
520

  
521
#wizard #start:hover, #networks-wizard .create:hover {
458 522
    background-color: #FF9651;
459 523
    border-color: #FF9651;
460 524
}
461 525

  
526
#wizard .separator-end {
527
    background-color: #387693;
528
    height: 5px;
529
    margin-left: -14px;
530
    margin-top: 362px;
531
    width: 550px;
532
}
533

  
462 534
.page ul {
463 535
    height: 270px;
464 536
    overflow: auto;
......
468 540
    height: 220px;
469 541
}
470 542

  
543
#wizard #tabscontainer {
544
    background-color: #CDE2EC;
545
    height: 20px;
546
    margin-top: -3px;
547
    width: 448px;
548
}
549

  
471 550
.page ul.tabs {
472 551
    overflow: hidden;
473 552
    height: auto;
474
    margin-bottom: 2px;
475
    margin-top: -5px;
553
    margin-bottom: 3px;
554
    margin-top: -1px;
476 555
}
477 556

  
478 557
.page ul.tabs li {
......
481 560
}
482 561

  
483 562
#status li {
484
	float: left;
485
	color: #7D7D7D;
486
    padding: 0px 72px 0 40px;
487
    margin-top: -1px;
563
    float: left;
564
    color: #387693;
565
    padding: 0px 32px 0 33px;
566
    bottom: 0px;
488 567
}
489 568

  
490 569
#status li.active .headernumber {
......
492 571
}
493 572

  
494 573
#status li.active .headerbody {
495
    color: #5599FF;
574
    color: #FFFFFF;
496 575
}
497 576

  
498 577
div.image-container {
......
502 581
}
503 582

  
504 583
#page2-container {
505
    background-color: #ECECEC;
584
    background-color: #ECF4F8;
506 585
    padding-top: 25px;
507 586
    height: 180px;
508 587
}
509 588

  
510 589
#page3-container {
511
    background-color: #ECECEC;
590
    background-color: #ECF4F8;
512 591
    padding-left: 50px;
513 592
    height: 244px;
514 593
    margin-bottom: 32px;
......
528 607
.sliders {
529 608
    float:left;
530 609
    width: 40px;
531
    margin-left: 10px;  
610
    margin-left: 10px;
532 611
    margin-top: 3px;
533 612
}
534 613

  
......
556 635

  
557 636
/* progress bar (enabled with progress: true) */
558 637
.progress {
559
	height: 3px; 
560
	background-color: #676767;
638
    height: 3px;
639
    background-color: #387693;
561 640
}
562 641

  
563 642
/* the input field */
564 643
.range {
565
	float: left;
566
	font-size: 100%;
567
	margin: -3px 0 0 15px;
644
    float: left;
645
    font-size: 100%;
646
    margin: -3px 0 0 15px;
568 647
    padding: 2px 10px 2px 0;
569
	text-align: right;
570
	width: 40px;
571
    border: 1px solid #111111;
648
    text-align: right;
649
    width: 40px;
650
    border: 1px solid #387693;
572 651
}
573 652

  
574 653
.selectedrange {
......
576 655
}
577 656

  
578 657
#credits-indicator {
579
    background-color: #ECECEC;
658
    background-color: #ECF4F8;
580 659
    float: none;
581 660
    margin: 0 0 0 10px;
582
    border: 1px solid #999;
661
    border: 1px solid #387693;
583 662
    color: #222222;
584 663
}
585 664

  
......
591 670
    width: 523px;
592 671
}
593 672

  
594
.machine-container:hover {
595

  
596
}
597

  
598 673
div.machine {
599 674
    color: #666;
600 675
    min-height: 65px;
......
637 712
    width: 70px;
638 713
    margin: 0 -80px 0 0;
639 714
    font-weight: normal;
715
    height: 68px;
716
    position: relative;
640 717
}
641 718

  
642 719
div.machine div.actions a {
......
678 755
    color: orange;
679 756
}
680 757

  
681
div.running div.machine a.action-start {
758
div.running div.machine div.actions .disabled {
682 759
    display: none;
683 760
}
684 761

  
685
div.terminated div.machine a.action-reboot, div.terminated div.machine a.action-shutdown{
762
div.terminated div.machine div.actions .disabled {
686 763
    display: none;
687 764
}
688 765

  
689 766
div.terminated div.machine div.actions a.action-destroy {
690
    margin-top: 38px;
767
    position: absolute;
768
    bottom: 0;
769
}
770

  
771
div.running div.machine div.actions a.action-destroy {
772
    position: absolute;
773
    bottom: 0;
691 774
}
692 775

  
693 776
.machine:hover {
694
    background-color:#dcdcdc;
777
    background-color:#CDE2EC;
695 778
}
696 779

  
697 780
.standard .machine img {
......
717 800
}
718 801

  
719 802
.view-separator {
720
    color:#5F8DD3;    
803
    color:#5F8DD3;
721 804
}
722 805

  
723 806
.running .indicator {
......
725 808
    border-bottom: 2px solid white;
726 809
    border-left: 2px solid white;
727 810
    border-right: 3px solid white;
728
    background-color: #87AADE;
811
    background-color: #4085A5;
812
}
813

  
814
.running {
815
    background-color: white;
816
    margin-left: -35px;
817
    margin-top: -76px;
818
    padding-bottom: 15px;
819
    padding-left: 35px;
820
    padding-top: 15px;
821
    width: 664px;
822
    min-height: 50px;
729 823
}
730 824

  
731 825
.terminated {
826
    background-color: white;
732 827
    margin-bottom: 17px;
828
    margin-left: -35px;
829
    margin-top: 15px;
830
    padding-bottom: 15px;
831
    padding-left: 35px;
832
    padding-top: 15px;
833
    width: 664px;
834
    opacity: 0.8;
835
    filter: alpha(opacity = 80);
733 836
}
734 837

  
735 838
.terminated .machine .state .status {
......
785 888
    width: 120px;
786 889
}
787 890

  
788
button.next:hover {
789
    background-color: #68A4FF;
790
    border-color: #68A4FF;
791
}
792

  
793
button.prev:hover {
794
    background-color: #888888;
795
    border-color: #888888;
796
}
797

  
798 891
button.next {
799
    background-color: #5599FF;
800
    border-color: #5599FF;
892
    background-color: #4085A5;
893
    border-color: #4085A5;
801 894
    text-align: right;
802 895
}
803 896

  
897
button.next:hover {
898
    background-color: #7DB4CD;
899
    border-color: #7DB4CD;
900
}
901

  
804 902
button.prev {
805
    background-color: #666;
806
    border:none;
903
    background-color: #4085A5;
904
    border-color: #4085A5;
807 905
    margin-left: -1px;
808 906
    text-align: left;
809 907
}
810 908

  
909
button.prev:hover {
910
    background-color: #7DB4CD;
911
    border-color: #7DB4CD;
912
}
913

  
811 914
.image-logo {
812 915
    float: left;
813 916
    margin-right: 1em;
......
827 930
    float: right;
828 931
    clear: both;
829 932
    color: white;
830
    margin-top: -42px;
831
    margin-right: -36px;
832
    font-size: 9pt;
833
    background-color: #87aade;
834
    padding: 5px 10px;
835
    display:none;
933
    position: relative;
934
    right: -25px;
935
    top: -35px;
936
    display: none;
836 937
}
837 938

  
838 939
a#standard, a#list, a#single {
......
840 941
    height: 15px;
841 942
    width: 17px;
842 943
    padding: 1px 8px 2px 9px;
843
    font-size: 11px;
844 944
}
845 945

  
846 946
div#view-select a {
......
892 992
}
893 993

  
894 994
#machinetype {
895
    background-color: #CCCCCC;
995
    background-color: #CDE2EC;
896 996
    height: 25px;
897 997
    margin-bottom: 4px !important;
898 998
}
......
916 1016
    display:none;
917 1017
}
918 1018

  
919
#machinesview_wrapper.list {
920
    margin-left: -20px;
921
}
922

  
923
#machinesview_wrapper {
924
    min-height: 270px;
1019
#machinesview-list.list {
1020
    background-color: white;
1021
    margin-left: -35px;
1022
    margin-top: -76px;
1023
    padding-left: 15px;
1024
    padding-top: 76px;
1025
    width: 683px;
925 1026
}
926 1027

  
927 1028
#machinesview_content {
......
933 1034
}
934 1035

  
935 1036
#emptymachineslist {
936
    display:none; 
1037
    display:none;
937 1038
    color: #A0A0A0;
938 1039
    background-image: url(/static/emptydegradebg.png);
939 1040
    width: 400px;
940
    margin-top: 40px;
1041
    margin-top: 5px;
941 1042
    padding: 5px;
942 1043
    padding-left: 10px;
943 1044
    margin-left: -10px;
......
968 1069
.emptycreatecontainer {
969 1070
    margin-left: 430px !important;
970 1071
    position: absolute;
971
    margin-top: 40px;
1072
    margin-top: 5px !important;
972 1073
    width: 180px;
973 1074
    background-color: #CCCCCC;
974 1075
    padding: 5px;
......
1007 1108
}
1008 1109

  
1009 1110
/* root element for tabs  */
1010
#wizard ul.tabs { 
1111
#wizard ul.tabs {
1011 1112
    margin-right: -1px;
1012
    float: right;		 	
1113
    float: right;
1013 1114
}
1014 1115

  
1015 1116
#wizard div.panes {
1016
    height: 252px;
1117
    height: 250px;
1017 1118
    margin-bottom: 6px;
1018 1119
    clear:both;
1019 1120
}
......
1034 1135
}
1035 1136

  
1036 1137
/* single tab */
1037
#wizard ul.tabs li {  
1038
    margin-bottom: 0; 
1039
	list-style-type:none;
1040
    float: left;	
1138
#wizard ul.tabs li {
1139
    margin-bottom: 0;
1140
    list-style-type:none;
1141
    float: left;
1041 1142
}
1042 1143

  
1043 1144
/* link inside the tab. uses a background image */
1044
#wizard ul.tabs a { 
1045
	display:block;
1145
#wizard ul.tabs a {
1146
    display:block;
1046 1147
    padding: 0.3em 0.5em 0.5em 0.4em;
1047
	text-decoration:none;
1048
	color: #FFFFFF;
1049
	position:relative;
1050
	top:1px;
1051
	outline:0;
1052
    background-color: #CCCCCC;
1148
    text-decoration:none;
1149
    color: #FFFFFF;
1150
    position:relative;
1151
    top:1px;
1152
    outline:0;
1153
    background-color: transparent;
1053 1154
    text-align: center;
1054 1155
    width: 100px;
1055 1156
    white-space: nowrap;
1056 1157
}
1057 1158

  
1058 1159
#wizard ul.tabs a:hover {
1059
	color: #FFFFFF;
1060
    background-color:#AAAAAA;
1160
    color: #FFFFFF;
1161
    background-color:#4085A5;
1061 1162
}
1062
	
1163

  
1063 1164
/* selected tab */
1064 1165
#wizard ul.tabs a.current {
1065
	color: white;
1066
    background-color: #666;	
1067
	cursor: default;
1166
    color: white;
1167
    background-color: #7DB4CD;
1168
    cursor: default;
1068 1169
}
1069 1170

  
1070 1171
#wizard #standard-images {
1071
    background-color: #ECECEC;
1172
    background-color: #ECF4F8;
1072 1173
}
1073 1174

  
1074 1175
div.list div.actions {
1075 1176
    display: none;
1076 1177
    clear: left;
1077 1178
    float: right;
1078
    margin-right: -20px;
1179
    margin-right: 15px;
1079 1180
    margin-top: 37px;
1080 1181
    text-align: right;
1081 1182
    width: 150px;
......
1106 1207
    overflow: hidden;
1107 1208
}
1108 1209

  
1109
/* metadata editing scrollable */
1110
#metadata-wizard {
1111
	position:fixed;
1112
	overflow:hidden;
1113
    width:380px;
1114
    height:360px;
1210
.description-container {
1211
    display: inline-block;
1212
    position: relative;
1213
    width: 300px;
1214
}
1215

  
1216
/* metadata editing and add machines to network overlays */
1217
#metadata-wizard, #add-machines-wizard {
1218
    position:fixed;
1219
    overflow:hidden;
1220
    width:450px;
1115 1221
    display:none;
1116 1222
    background-color:#fff;
1117 1223
    text-align:left;
1118 1224
    font-size: 80%;
1225
    border-bottom: 5px solid #4085A5;
1119 1226
}
1120 1227

  
1121
#metadata-wizard .items {
1122
	width:20000em;
1123
	position:absolute;
1124
	clear:both;
1125
    padding: 0;
1126
    margin: 0;
1228
#metadata-wizard .close, #add-machines-wizard .close  {
1229
    background-image: url("/static/close-popup.png");
1230
    cursor: pointer;
1231
    height: 13px;
1232
    position: absolute;
1233
    right: 7px;
1234
    top: 9px;
1235
    width: 13px;
1127 1236
}
1128 1237

  
1129
#metadata-wizard .page {	
1130
	width:360px;
1131
    padding: 15px 10px 15px 10px;
1132
	float:left;	
1133
    display:block;
1134
    border:none;
1238
#metadata-wizard .popup-header, #add-machines-wizard .popup-header {
1239
    background-color: #4085A5;
1240
    color: white;
1241
    font-size: 95%;
1242
    font-weight: normal;
1243
    height: 20px;
1244
    margin-left: -16px;
1245
    margin-top: -16px;
1246
    padding-bottom: 2px;
1247
    padding-left: 30px;
1248
    padding-top: 10px;
1249
    width: 482px;
1135 1250
}
1136 1251

  
1137
#metadata-wizard div.container {
1138
    height:308px;
1252
#metadata-wizard .popup-title, #metadata-wizard .machine-name, #add-machines-wizard .popup-title, #add-machines-wizard .network-name {
1253
    font-size: 120%;
1254
    padding-bottom: 7px;
1255
    padding-top: 10px;
1256
    float:left;
1139 1257
}
1140 1258

  
1141
#metadata-wizard h3 {
1142
    font-weight:normal;
1259
#metadata-wizard .popup-title {
1260
    padding-bottom: 0px;
1261
    font-size: 120%;
1143 1262
}
1144 1263

  
1145
#metadata-wizard hr {
1146
    background-color: #666;
1147
    border: 0 none;
1148
    height: 5px;
1149
    margin: 0; 
1264
#metadata-wizard .name-container {
1265
    display: inline-block;
1150 1266
}
1151 1267

  
1152
#metadata-wizard hr.topruler {
1153
    margin-top: 5px; 
1268
#add-machines-wizard .network-name {
1269
    padding-left: 5px;
1154 1270
}
1155 1271

  
1156
#metadata-wizard hr.fatruler {
1157
    height: 20px;
1158
    margin-top: 2px;
1159
    margin-bottom: 20px;
1272
#metadata-wizard .popup-body, #add-machines-wizard .popup-body {
1273
    background-image: url("/static/meta-wiz-bg.png");
1274
    margin-left: -16px;
1275
    margin-right: -16px;
1276
    margin-top: 1px;
1277
    height: 250px;
1278
    overflow-y: auto;
1279
    overflow-x: hidden;
1160 1280
}
1161 1281

  
1162
#metadata-wizard hr.meta-separator {
1163
    margin: 5px 8px 2px 0;
1282
#metadata-wizard .popup-body-inner, #add-machines-wizard .popup-body-inner {
1283
    background-image: url("/static/meta-wiz-inner-bg.png");
1284
    font-size: 80%;
1285
    height: 180px;
1286
    margin-left: 25px;
1287
    margin-top: 10px;
1288
    padding-left: 15px;
1289
    width: 420px;
1164 1290
}
1165 1291

  
1166
#metadata-wizard div.content {
1167
    height: 248px;
1168
    width: 345px;
1169
    margin-left: 15px;
1170
    overflow: auto;
1171
}
1292
#metadata-wizard .popup-separator, #add-machines-wizard .popup-separator {
1293
    background-color: #74AEC9;
1294
    height: 1px;
1295
    width: 402px;
1296
    margin-bottom: 30px;
1297
    clear: left;
1298
}
1172 1299

  
1173
#metadata-wizard div.content ul {
1174
    height: 230px;
1300
#metadata-wizard .metadata-pair-template {
1301
    height: 15px;
1302
    padding-top: 2px;
1303
    width: 350px;
1175 1304
}
1176 1305

  
1177
#metadata-wizard div.content li {
1178
    margin-bottom: 20px;
1306
#metadata-wizard .metadata-pair-template:hover {
1307
    background-color: #74AEC9;
1179 1308
}
1180 1309

  
1181
#metadata-wizard p {
1182
    margin-left: 7px;
1183
    width: 200px;
1310
#metadata-wizard .metadata-container, #add-machines-wizard .machines-container {
1311
    float: left;
1312
    width: 400px;
1313
    font-size: 120%;
1184 1314
}
1185 1315

  
1186
#metadata-wizard div.bottomruler {
1187
    background-color: #666;
1188
    height: 20px;
1189
    margin-top: 17px;
1316
#metadata-wizard .machine-icon {
1317
    float: left;
1318
    padding-left: 10px;
1319
    padding-right: 3px;
1320
    padding-top: 7px;
1190 1321
}
1191 1322

  
1192
#metadata-wizard button {
1323
#metadata-wizard .large-spinner, #add-machines-wizard .large-spinner {
1324
    display: block;
1325
    margin: 50px 0 0 185px;
1326
}
1327

  
1328
#metadata-wizard .metadata-key {
1329
    float: left;
1330
    width: 110px;
1331
    padding-left: 5px;
1332
}
1333

  
1334
#metadata-wizard .metadata-value {
1335
    width: 300px;
1336
}
1337

  
1338
#metadata-wizard .metadata-add-template {
1339
    background-color: #74AEC9;
1340
    width: 350px;
1341
}
1342

  
1343
#metadata-wizard #add-meta-value {
1344
    margin-left: 10px;
1345
    width: 150px;
1346
}
1347

  
1348
#metadata-wizard button, #add-machines-wizard button {
1193 1349
    font-size: 80%;
1194 1350
    width: 87px;
1195 1351
    float: right;
......
1200 1356
    margin-right: 8px;
1201 1357
}
1202 1358

  
1359
#metadata-wizard .buttons, #add-machines-wizard .buttons {
1360
    border-top: 2px solid #4085A5;
1361
    height: 30px;
1362
    margin-left: 25px;
1363
    margin-right: 40px;
1364
    width: 400px;
1365
    font-size: 120%;
1366
}
1367

  
1368
#metadata-wizard button.save, #add-machines-wizard button.cancel {
1369
    float: left;
1370
    height: 23px;
1371
    margin: 10px 0 0 0;
1372
    width: 87px;
1373
    background-color: #4085A5;
1374
    border-color: #4085A5;
1375
}
1376

  
1377
#metadata-wizard button.save:hover, #add-machines-wizard button.cancel:hover {
1378
    background-color: #7DB4CD;
1379
    border-color: #7DB4CD;
1380
}
1381

  
1382
#metadata-wizard button.create, #add-machines-wizard button.add {
1383
    height: 23px;
1384
    margin: 10px 0 0 0;
1385
    background-color: #FF6600;
1386
    border-color: #FF6600;
1387
}
1388

  
1389
#metadata-wizard button.create:hover, #add-machines-wizard button.add:hover {
1390
    background-color: #FF9651;
1391
    border-color: #FF9651;
1392
}
1393

  
1394
#metadata-wizard .editbuttons {
1395
    margin-top: 4px;
1396
    margin-right: 0;
1397
}
1398

  
1399
#metadata-wizard .vertical-separator {
1400
    height: 17px;
1401
    width: 1px;
1402
    background-color: #74AEC9;
1403
    float:left;
1404
    margin-right: 10px;
1405
}
1406

  
1407
#metadata-wizard h3, #add-machines-wizard h3 {
1408
    font-weight:normal;
1409
}
1410

  
1411
#metadata-wizard .metadata-edit {
1412
    clear: none;
1413
    cursor: pointer;
1414
    float: right;
1415
    margin-right: 0;
1416
    width: 40px;
1417
    margin-top: -12px;
1418
    display:none;
1419
}
1420

  
1421
#metadata-wizard .metadata-edit .edit, #metadata-wizard .metadata-edit .remove {
1422
    background-repeat: no-repeat;
1423
    color: transparent;
1424
    font-size: 9pt;
1425
    padding-left: 16px;
1426
}
1427

  
1428
#metadata-wizard .addbuttons {
1429
    display: block;
1430
    clear: none;
1431
    width: 40px;
1432
    margin-right: -1px !important;
1433
    margin-top: 4px;
1434
    float:right;
1435
    cursor: pointer;
1436
}
1437

  
1438
.metadata-pair-template .editbuttons {
1439
    margin-top: -16px !important;
1440
    margin-right: -1px !important;
1441
}
1442

  
1443
#metadata-wizard .metadata-edit .edit {
1444
    background-image: url("../static/meta-edit.png");
1445
    margin-left: 3px;
1446
}
1447

  
1448
#metadata-wizard .metadata-edit .remove, #metadata-wizard .editbuttons .remove {
1449
    background-image: url("../static/meta-remove.png");
1450
    margin-left: 1px;
1451
    background-repeat: no-repeat;
1452
    color: transparent;
1453
    font-size: 9pt;
1454
    padding-left: 16px;
1455
}
1456

  
1457
#metadata-wizard .editbuttons .save {
1458
    background-image: url("../static/meta-save.png");
1459
}
1460

  
1461
#metadata-wizard .addbuttons .cancel {
1462
    background-image: url("../static/meta-remove.png");
1463
    margin-left: 3px;
1464
}
1465

  
1466
#metadata-wizard .addbuttons .save {
1467
    background-image: url("../static/meta-save.png");
1468
    margin-left: 1px;
1469
}
1470

  
1471
#metadata-wizard .metadata-edit .edit, #metadata-wizard .metadata-edit .remove, #metadata-wizard .editbuttons .remove, #metadata-wizard .editbuttons .save, #metadata-wizard .addbuttons .cancel, #metadata-wizard .addbuttons .save {
1472
    background-color: #4287a7;
1473
}
1474

  
1475
#metadata-wizard .metadata-edit .edit:hover, #metadata-wizard .metadata-edit .remove:hover, #metadata-wizard .editbuttons .remove:hover, #metadata-wizard .editbuttons .save:hover, #metadata-wizard .addbuttons .cancel:hover, #metadata-wizard .addbuttons .save:hover {
1476
    background-color: #74AEC9;
1477
}
1478

  
1479
#metadata-wizard .addbuttons .cancel, #metadata-wizard .addbuttons .save {
1480
    padding-left: 16px;
1481
    background-repeat: no-repeat;
1482
    color: transparent;
1483
    font-size: 9pt;
1484
}
1485

  
1486
#metadata-wizard .metatextbox {
1487
    font-size: 90%;
1488
    height: 10px;
1489
    margin-top: -2px;
1490
    color: black;
1491
    width: 150px;
1492
}
1493

  
1494
#metadata-wizard p, #add-machines-wizard p {
1495
    margin-left: 7px;
1496
    width: 200px;
1497
}
1498

  
1499
#metadata-wizard div.bottomruler, #add-machines-wizard div.bottomruler {
1500
    background-color: #666;
1501
    height: 20px;
1502
    margin-top: 17px;
1503
}
1504

  
1203 1505
#metadata-wizard button.remove {
1204 1506
    height: 15px;
1205 1507
    width: 70px;
......
1215 1517
    margin-top: -12px;
1216 1518
}
1217 1519

  
1218
#metadata-wizard #edit-dialog button.cancel {
1219
    display: none;
1220
    height: 15px;
1221
    width: 70px;
1222
    float: right;
1223
    background-color: #666;
1224
    border-color: #666;
1225
    margin: -56px 8px 0 0;
1226
}
1227

  
1228
#metadata-wizard #edit-dialog button.save {
1229
    display: none;
1230
    height: 15px;
1231
    width: 70px;
1232
    margin: -18px 8px 0 0;
1233
}
... This diff was truncated because it exceeds the maximum size that can be displayed.

Also available in: Unified diff