Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ 5c295f00

History | View | Annotate | Download (52 kB)

1
html, body, div, span, applet, object, iframe,
2
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3
a, abbr, acronym, address, big, cite, code,
4
del, dfn, em, font, img, ins, kbd, q, s, samp,
5
small, strike, strong, sub, sup, tt, var,
6
b, u, i, center,
7
dl, dt, dd, ol, ul, li,
8
fieldset, form, label, legend,
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;
16
    font-family: Verdana, 'PT Sans', sans-serif;
17
}
18

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

    
23
body {
24
    line-height: 1;
25
    background: url(./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("./body-bg2.png") no-repeat scroll right bottom transparent;
38
}
39

    
40
#header {
41
    height: 93px;
42
    background: url("./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%;
59
}
60

    
61
ol, ul {
62
    list-style: none;
63
}
64

    
65
blockquote, q {
66
    quotes: none;
67
}
68

    
69
blockquote:before, blockquote:after,
70
q:before, q:after {
71
    content: '';
72
    content: none;
73
}
74

    
75
/* remember to define focus styles! */
76
:focus {
77
    outline: 1px dotted #87AADE;
78
}
79

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

    
85
del {
86
    text-decoration: line-through;
87
}
88

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

    
95
h5 {
96
    font-weight: normal;
97
    font-size: 9pt;
98
    margin-bottom:3px;
99
}
100

    
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

    
121
ul.css-tabs {
122
    padding: 0;
123
    height:31px;
124
    background-color: #5CA1C0;
125
}
126

    
127
ul.css-tabs .secondary {
128
    position:relative;
129
}
130

    
131
/* single tab */
132
ul.css-tabs li {
133
    float:left;
134
    padding:0;
135
    list-style-type:none;
136
}
137

    
138
ul.css-tabs .current {
139
    background: #4085A5;
140
}
141

    
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
}
153

    
154
ul.css-tabs a:hover {
155
    background: #74AEC9;
156
}
157

    
158
/* selected tab */
159
ul.css-tabs a.current {
160
    cursor:default;
161
}
162

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

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

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

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

    
196
/* nested arrow inside error message. It's 100% CSS. No images. */
197
.error em {
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;
206
}
207

    
208
/* input field that caused validation error */
209
.invalid {
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
}
226

    
227
#create {
228
    background-color: #FF7F2A;
229
    color: #000;
230
    cursor: pointer;
231
    padding: 7px 24px;
232
    margin: 0 0 0 -36px;
233
    width: 125px;
234
    text-decoration: none;
235
    font-size:100%;
236
}
237

    
238
#create:hover {
239
    background-color: #FF9955;
240
}
241

    
242
#console-header {
243
    height: 67px;
244
    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;
245
}
246

    
247
.header-logo {
248
    padding-top: 19px;
249
}
250

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

    
256

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

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

    
276

    
277
div#wrapper {
278
    width: 700px;
279
    margin: 0em auto;
280
}
281

    
282
.modal {
283
    background-color:#fff;
284
    display:none;
285
    width:30em;
286
    padding:1em;
287
    text-align:left;
288
}
289

    
290
/* server wizard scrollable root element and network wizard */
291
#wizard, #networks-wizard {
292
    font-size:9pt;
293
    height:405px;
294
    width:453px;
295
    overflow:hidden;
296
    position:absolute !important;
297
}
298

    
299
/* scrollable items */
300
#wizard .items {
301
    width:20000em;
302
    clear:both;
303
    position:absolute;
304
    display:block;
305
    padding: 0;
306
    margin: 0;
307
    border:none;
308
    background:none;
309
}
310

    
311
/* single item */
312
#wizard .page, #networks-wizard div.container {
313
    padding: 15px 40px 20px 15px;
314
    width:447px;
315
    float:left;
316
    display:block;
317
    border:none;
318
    background-color: transparent;
319
}
320

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

    
328
/* title */
329
#wizard h2, #networks-wizard h2 {
330
    color: #FF7B24;
331
    font-size: 100%;
332
    font-style: italic;
333
    font-weight: bold;
334
    padding-left: 37px;
335
    padding-top: 2px;
336
}
337

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

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

    
346
#wizard .pane li {
347
    margin: 0;
348
}
349

    
350
#wizard label {
351
    font-size:16px;
352
    display:block;
353
    clear: both;
354
}
355

    
356
#wizard label strong {
357
    position:relative;
358
    top:-1px;
359
    font-size: 80%;
360
    font-weight: normal;
361
}
362

    
363
#wizard label em {
364
    font-size:9pt;
365
    color:#666;
366
    font-style:normal;
367
}
368

    
369
#wizard .text {
370
    width: 270px;
371
    padding: 5px;
372
    margin-top: 10px;
373
    border: 1px solid #ccc;
374
    color: #456;
375
    letter-spacing: 1px;
376
}
377

    
378
#wizard select {
379
    border:1px solid #ccc;
380
    width:94%;
381
    padding:4px;
382
    display: none;
383
}
384

    
385
#wizard .double label {
386
    width:50%;
387
    float:left;
388
}
389

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

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

    
399
#wizard .right {
400
    float:right;
401
}
402

    
403
#wizard .error {
404
    border:1px solid red;
405
}
406

    
407
#wizard a:hover div.image {
408
    background-color: #C5DEE9;
409
}
410

    
411
.selecteddiv {
412
    background-color: #C5DEE9 !important;
413
}
414

    
415
#wizard label a:hover strong {
416
    color: black;
417
}
418

    
419
#wizard div.image span.size {
420
    font-size: 9pt;
421
    color: #666;
422
}
423

    
424
#wizard div.image .radio {
425
    float: left;
426
    margin-top: 10px;
427
}
428

    
429
#wizard div.image span.image-id, #wizard div.image span.description {
430
    font-size: 9pt;
431
    color: #666;
432
    font-weight: normal;
433
    display:inline;
434
}
435

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

    
440
#wizard .cost {
441
    color: #79A4C1;
442
    margin-top: 40px;
443
    clear:both;
444
    padding-left: 15px;
445
    font-size: 95%;
446
}
447

    
448
#wizard #status {
449
    height: 50px;
450
    background: #4085A5;
451
    width: 450px;
452
}
453

    
454
#wizard .headernumber {
455
    font-size: 470%;
456
}
457

    
458
#wizard .headerbody {
459
    font-size: 120%;
460
    font-weight: normal;
461
    display: inline;
462
    top: -15px;
463
    position: relative;
464
}
465

    
466
#wizard .first {
467
    left: -8px;
468
}
469

    
470
#wizard .third {
471
    margin-top: -1px !important;
472
}
473

    
474
#wizard .topruler, #networks-wizard .topruler {
475
    background-color: #CDE2EC;
476
    border: 0 none;
477
    height: 4px;
478
    margin-left: -1px;
479
    width: 447px;
480
    margin-bottom: 6px;
481
    margin-top: 4px;
482
}
483

    
484
#wizard .bottomruler, #networks-wizard .bottomruler {
485
    background-color: #CDE2EC;
486
    border: 0 none;
487
    height: 4px;
488
    margin-left: -1px;
489
    width: 447px;
490
    margin-bottom:6px;
491
    margin-top:6px;
492
}
493

    
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;
503
}
504

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

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

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

    
521
#wizard #start:hover, #networks-wizard .create:hover {
522
    background-color: #FF9651;
523
    border-color: #FF9651;
524
}
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

    
534
.page ul {
535
    height: 270px;
536
    overflow: auto;
537
}
538

    
539
.panes ul.pane {
540
    height: 220px;
541
}
542

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

    
550
.page ul.tabs {
551
    overflow: hidden;
552
    height: auto;
553
    margin-bottom: -1px;
554
    margin-top: -1px;
555
}
556

    
557
.page ul.tabs li {
558
    float: right;
559
    margin: 0 0.2em;
560
}
561

    
562
#status li {
563
    float: left;
564
    color: #387693;
565
    padding: 0px 32px 0 33px;
566
    bottom: 0px;
567
}
568

    
569
#status li.active .headernumber {
570
    color: #FFFFFF;
571
}
572

    
573
#status li.active .headerbody {
574
    color: #FFFFFF;
575
}
576

    
577
div.image-container {
578
    border-bottom: 1px solid #CCCCCC;
579
    margin-left: 10px;
580
    margin-right: 10px;
581
}
582

    
583
#page2-container {
584
    background-color: #ECF4F8;
585
    padding-top: 25px;
586
    height: 180px;
587
}
588

    
589
#page3-container {
590
    background-color: #ECF4F8;
591
    padding-left: 50px;
592
    height: 244px;
593
    margin-bottom: 32px;
594
}
595

    
596
/* slider root element */
597
.slider {
598
    border: 1px solid #666;
599
    cursor: pointer;
600
    display: inline !important;
601
    float: left;
602
    margin: 5px 0 20px 10px;
603
    position: relative;
604
    width: 250px;
605
}
606

    
607
.sliders {
608
    float:left;
609
    width: 40px;
610
    margin-left: 10px;
611
    margin-top: 3px;
612
}
613

    
614
.units {
615
    padding-left:10px;
616
}
617

    
618
.slider-container {
619
    padding-bottom: 15px;
620
    margin-left: 5px;
621
}
622

    
623
/* drag handle */
624
.handle {
625
    -moz-box-shadow: 0 0 2px #000000;
626
    background: url("./h30.png") repeat-x scroll 0 0 #FFFFFF;
627
    border: 1px solid #000000;
628
    cursor: move;
629
    display: block;
630
    height: 10px;
631
    margin-top: -8px;
632
    position: absolute;
633
    width: 8px;
634
}
635

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

    
642
/* the input field */
643
.range {
644
    float: left;
645
    font-size: 100%;
646
    margin: -3px 0 0 15px;
647
    padding: 2px 10px 2px 0;
648
    text-align: right;
649
    width: 40px;
650
    border: 1px solid #387693;
651
}
652

    
653
.selectedrange {
654
    border-color: #5599FF;
655
}
656

    
657
#credits-indicator {
658
    background-color: #ECF4F8;
659
    float: none;
660
    margin: 0 0 0 10px;
661
    border: 1px solid #387693;
662
    color: #387693;
663
}
664

    
665
.machine-container {
666
    min-height: 65px;
667
    margin: 2px 0 0 -32px;
668
    padding: 0 4px 0;
669
    clear: both;
670
    width: 523px;
671
}
672

    
673
div.machine {
674
    color: #666;
675
    min-height: 65px;
676
    padding-right: 15px;
677
    padding-top: 2px;
678
}
679

    
680
.machine a {
681
    color: #3d3d3d;
682
    font-weight: normal;
683
    text-decoration: none;
684
    font-size: 9pt;
685
}
686

    
687
.machine a:hover {
688
    color: #000;
689
    text-decoration: underline;
690
}
691

    
692
.machine .name, .machine .ip {
693
    text-decoration: none !important;
694
    margin-top: 6px;
695
}
696

    
697
.oldValue {
698
    display:none;
699
}
700

    
701
.state {
702
    float: right;
703
}
704

    
705
.state div {
706
    text-align: right;
707
    margin-right: 3px;
708
}
709

    
710
div.machine div.actions {
711
    float: right;
712
    width: 70px;
713
    margin: 0 -80px 0 0;
714
    font-weight: normal;
715
    height: 68px;
716
    position: relative;
717
}
718

    
719
div.machine div.actions a {
720
    color: transparent;
721
    margin: 0 0 5px 8px;
722
    display: block;
723
}
724

    
725
div.machine div.actions a.action-shutdown {
726
    margin-bottom: 5px;
727
    display: block;
728
}
729

    
730
div.machine div.actions a.shutdown-padding {
731
    margin-bottom: 22px;
732
}
733

    
734
div.machine div.actions a.destroy-padding {
735
    margin-top: 52px;
736
}
737

    
738
div.actions a.enabled:hover{
739
    color: black !important;
740
    text-decoration: underline;
741
    display: block;
742
}
743

    
744
.machine:hover .actions a {
745
    color: #3d3d3d;
746
    display: block;
747
}
748

    
749
div.machine div.display a{
750
    color: #3d3d3d;
751
    display: block;
752
}
753

    
754
div.machine div.actions a.selected:hover {
755
    color: orange;
756
}
757

    
758
div.running div.machine div.actions .disabled {
759
    display: none;
760
}
761

    
762
div.terminated div.machine div.actions .disabled {
763
    display: none;
764
}
765

    
766
div.terminated div.machine div.actions a.action-destroy {
767
    position: absolute;
768
    bottom: 0;
769
}
770

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

    
776
.machine:hover {
777
    background-color:#CDE2EC;
778
}
779

    
780
.standard .machine img {
781
    float: left;
782
    margin: 7px 14px 0;
783
}
784

    
785
.list .machine img {
786
    margin: 0;
787
}
788

    
789
div.ip, div.state {
790
    font-size: 9pt;
791
    color: #3d3d3d;
792
}
793

    
794
div.indicator {
795
    width:10px;
796
    height:11px;
797
    margin: 3px -1px;
798
    clear: none;
799
    float:right;
800
}
801

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

    
806
.running .indicator {
807
    border-top: 2px solid white;
808
    border-bottom: 2px solid white;
809
    border-left: 2px solid white;
810
    border-right: 3px solid white;
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;
823
}
824

    
825
.terminated {
826
    background-color: white;
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);
836
}
837

    
838
.terminated .machine .state .status {
839
    color: #666;
840
}
841

    
842
.machine:hover div.uptime, .machine:hover a.rename, .machine:hover a.configure {
843
    color: #3d3d3d;
844
}
845

    
846
div.uptime {
847
    clear: both;
848
    color: transparent;
849
    margin-left: 1px;
850
}
851

    
852
div.machine-tabs {
853
    margin-top: 1em;
854
}
855

    
856
span.rename, span.configure {
857
    background-repeat: no-repeat;
858
    color: transparent;
859
    font-size: 9pt;
860
    font-weight: normal;
861
    margin-left: 10px;
862
    padding-left: 10px;
863
    text-align: left;
864
}
865

    
866
span.rename {
867
    cursor: pointer;
868
}
869

    
870
div.name:hover span.rename {
871
    color: #3D3D3D;
872
    margin-top: 0.4em;
873
    background-image: url(./pencil.png);
874
    background-position: 0 3px;
875
}
876

    
877

    
878
a.settings:hover span.configure {
879
    color: #3D3D3D;
880
}
881

    
882
button {
883
    background-color: #87AADE;
884
    border: 1px solid #87AADE;
885
    color: #FFFFFF;
886
    cursor: pointer;
887
    height: 23px;
888
    width: 120px;
889
}
890

    
891
button.next {
892
    background-color: #4085A5;
893
    border-color: #4085A5;
894
    text-align: right;
895
}
896

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

    
902
button.prev {
903
    background-color: #4085A5;
904
    border-color: #4085A5;
905
    margin-left: -1px;
906
    text-align: left;
907
}
908

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

    
914
.image-logo {
915
    float: left;
916
    margin-right: 1em;
917
    margin-left: 1.5em;
918
    margin-top: 4px;
919
}
920

    
921
div.image {
922
    clear: both;
923
    display: block;
924
    margin-bottom: 3px;
925
    margin-top: 3px;
926
    padding: 5px;
927
}
928

    
929
div#view-select {
930
    float: right;
931
    clear: both;
932
    color: white;
933
    position: relative;
934
    right: -25px;
935
    top: -35px;
936
    display: none;
937
}
938

    
939
a#standard, a#list, a#single {
940
    text-decoration: none;
941
    height: 15px;
942
    width: 17px;
943
    padding: 1px 8px 2px 9px;
944
}
945

    
946
div#view-select a {
947
    color:#5f8dd3;
948
}
949

    
950
a#list:hover {
951
    background: #5f8dd3;
952
}
953

    
954
a#standard:active, a#list:active {
955
    color:white;
956
}
957

    
958
a#standard {
959
    background: url(./icon-view.png) no-repeat -36px 0;
960
}
961

    
962
a#list {
963
    background: url(./list-view.png) no-repeat -36px 0;
964
}
965

    
966
a#single {
967
    background: url(./single-view.png) no-repeat -36px 0;
968
}
969

    
970
a#standard:hover {
971
    background: url(./icon-view.png) no-repeat -18px 0;
972
}
973

    
974
a#list:hover {
975
    background: url(./list-view.png) no-repeat -18px 0;
976
}
977

    
978
a#single:hover {
979
    background: url(./single-view.png) no-repeat -18px 0;
980
}
981

    
982
a#standard.activelink {
983
    background: url(./icon-view.png) no-repeat 0px 0;
984
}
985

    
986
a#list.activelink {
987
    background: url(./list-view.png) no-repeat 0px 0;
988
}
989

    
990
a#single.activelink {
991
    background: url(./single-view.png) no-repeat 0px 0;
992
}
993

    
994
#machinetype {
995
    background-color: #CDE2EC;
996
    height: 25px;
997
    margin-bottom: 0px !important;
998
}
999

    
1000
div.machine-type {
1001
    float: left;
1002
    margin: 4px 18px 20px;
1003
}
1004

    
1005
.machine-type .active {
1006
    color: #FFFFFF
1007
}
1008

    
1009
#machinesview {
1010
    min-height: 270px;
1011
    margin-top: 40px;
1012
}
1013

    
1014
.list#machinesview {
1015
    margin-left: -20px;
1016
    display:none;
1017
}
1018

    
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;
1026
}
1027

    
1028
#machinesview_content {
1029
    display:none;
1030
}
1031

    
1032
.list-machines {
1033
    min-width: 515px;
1034
}
1035

    
1036
#emptymachineslist {
1037
    background-color: #6BA9C6;
1038
    color: #A0A0A0;
1039
    display: none;
1040
    margin-left: -35px;
1041
    margin-top: -45px;
1042
    padding: 65px 150px 35px;
1043
    text-align: justify;
1044
    width: 398px;
1045
}
1046

    
1047
#welcomeheader {
1048
    color:white;
1049
    text-align: center;
1050
}
1051

    
1052
.welcomebody {
1053
    color: white;
1054
    font-size:80%;
1055
}
1056

    
1057
.welcomebody a {
1058
    color: white;
1059
}
1060

    
1061
.welcomefooter {
1062
    color: white;
1063
    font-size:60%;
1064
}
1065

    
1066
.welcomefooter a {
1067
    color: white;
1068
}
1069

    
1070
.emptycreatecontainer {
1071
    margin-left: 430px !important;
1072
    position: absolute;
1073
    margin-top: 5px !important;
1074
    width: 180px;
1075
    background-color: #CCCCCC;
1076
    padding: 5px;
1077
    padding-left: 10px;
1078
}
1079

    
1080
.emptycreate {
1081
    margin: 20px 10px 5px 0 !important;
1082
}
1083

    
1084
#createbody {
1085
    display:none;
1086
    font-size: 80%;
1087
}
1088

    
1089
div.list label img {
1090
    margin: 5px 5px -3px 0;
1091
}
1092

    
1093
div.list label {
1094
    color: #3D3D3D;
1095
    font-size: 9pt;
1096
}
1097

    
1098
div.list .state {
1099
    margin-top: 7px;
1100
    margin-right: 10px;
1101
}
1102

    
1103
div.list table tbody {
1104
    margin-top: 8px;
1105
}
1106

    
1107
div.list .stopped {
1108
    margin-top: 8px;
1109
}
1110

    
1111
/* root element for tabs  */
1112
#wizard ul.tabs {
1113
    margin-right: -1px;
1114
    float: right;
1115
}
1116

    
1117
#wizard div.panes {
1118
    height: 250px;
1119
    margin-bottom: 6px;
1120
    clear:both;
1121
}
1122

    
1123
.typebody {
1124
    font-size: 80%;
1125
    font-weight: normal;
1126
    position: relative;
1127
    top: -3px;
1128
}
1129

    
1130
.typehover {
1131
    color: #FFFFFF;
1132
}
1133

    
1134
#label-name {
1135
    margin-top: 15px;
1136
}
1137

    
1138
/* single tab */
1139
#wizard ul.tabs li {
1140
    margin-bottom: 0;
1141
    list-style-type:none;
1142
    float: left;
1143
}
1144

    
1145
/* link inside the tab. uses a background image */
1146
#wizard ul.tabs a {
1147
    display:block;
1148
    padding: 0.3em 0.5em 0.5em 0.4em;
1149
    text-decoration:none;
1150
    color: #FFFFFF;
1151
    position:relative;
1152
    top:1px;
1153
    outline:0;
1154
    background-color: transparent;
1155
    text-align: center;
1156
    width: 100px;
1157
    white-space: nowrap;
1158
}
1159

    
1160
#wizard ul.tabs a:hover {
1161
    color: #FFFFFF;
1162
    background-color:#4085A5;
1163
}
1164

    
1165
/* selected tab */
1166
#wizard ul.tabs a.current {
1167
    color: white;
1168
    background-color: #7DB4CD;
1169
    cursor: default;
1170
}
1171

    
1172
#wizard #standard-images {
1173
    background-color: #ECF4F8;
1174
}
1175

    
1176
div.list div.actions {
1177
    display: none;
1178
    clear: left;
1179
    float: right;
1180
    margin-right: 15px;
1181
    margin-top: 37px;
1182
    text-align: right;
1183
    width: 150px;
1184
}
1185

    
1186
div.list div.actions a {
1187
    clear: left;
1188
    color: #D3D3D3;
1189
    display: block;
1190
    font-size:9pt;
1191
    margin-bottom: 2px;
1192
}
1193

    
1194
div.list div.actions a.enabled {
1195
    color: #3D3D3D;
1196
}
1197

    
1198
div.list div.actions a.enabled:hover{
1199
    cursor: pointer;
1200
    color: black;
1201
    text-decoration: underline;
1202
}
1203

    
1204
input.machine {
1205
    width: 13px;
1206
    height: 13px;
1207
    top: -1px;
1208
    overflow: hidden;
1209
}
1210

    
1211
.description-container {
1212
    display: inline-block;
1213
    position: relative;
1214
    width: 300px;
1215
}
1216

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

    
1229
#metadata-wizard .close, #add-machines-wizard .close  {
1230
    background-image: url("./close-popup.png");
1231
    cursor: pointer;
1232
    height: 13px;
1233
    position: absolute;
1234
    right: 7px;
1235
    top: 9px;
1236
    width: 13px;
1237
}
1238

    
1239
#metadata-wizard .popup-header, #add-machines-wizard .popup-header {
1240
    background-color: #4085A5;
1241
    color: white;
1242
    font-size: 95%;
1243
    font-weight: normal;
1244
    height: 20px;
1245
    margin-left: -16px;
1246
    margin-top: -16px;
1247
    padding-bottom: 2px;
1248
    padding-left: 30px;
1249
    padding-top: 10px;
1250
    width: 482px;
1251
}
1252

    
1253
#metadata-wizard .popup-title, #metadata-wizard .machine-name, #add-machines-wizard .popup-title, #add-machines-wizard .network-name {
1254
    font-size: 120%;
1255
    padding-bottom: 7px;
1256
    padding-top: 10px;
1257
    float:left;
1258
}
1259

    
1260
#metadata-wizard .popup-title {
1261
    padding-bottom: 0px;
1262
    font-size: 120%;
1263
}
1264

    
1265
#metadata-wizard .name-container {
1266
    display: inline-block;
1267
}
1268

    
1269
#add-machines-wizard .network-name {
1270
    padding-left: 5px;
1271
}
1272

    
1273
#metadata-wizard .popup-body, #add-machines-wizard .popup-body {
1274
    background-image: url("./meta-wiz-bg.png");
1275
    margin-left: -16px;
1276
    margin-right: -16px;
1277
    margin-top: 1px;
1278
    height: 250px;
1279
    overflow-y: auto;
1280
    overflow-x: hidden;
1281
}
1282

    
1283
#metadata-wizard .popup-body-inner, #add-machines-wizard .popup-body-inner {
1284
    background-image: url("./meta-wiz-inner-bg.png");
1285
    font-size: 80%;
1286
    height: 180px;
1287
    margin-left: 25px;
1288
    margin-top: 10px;
1289
    padding-left: 15px;
1290
    width: 420px;
1291
}
1292

    
1293
#metadata-wizard .popup-separator, #add-machines-wizard .popup-separator {
1294
    background-color: #74AEC9;
1295
    height: 1px;
1296
    width: 402px;
1297
    margin-bottom: 30px;
1298
    clear: left;
1299
}
1300

    
1301
#metadata-wizard .metadata-pair-template {
1302
    height: 15px;
1303
    padding-top: 2px;
1304
    width: 350px;
1305
}
1306

    
1307
#metadata-wizard .metadata-pair-template:hover {
1308
    background-color: #74AEC9;
1309
}
1310

    
1311
#metadata-wizard .metadata-container, #add-machines-wizard .machines-container {
1312
    float: left;
1313
    width: 400px;
1314
    font-size: 120%;
1315
}
1316

    
1317
#metadata-wizard .machine-icon {
1318
    float: left;
1319
    padding-left: 10px;
1320
    padding-right: 3px;
1321
    padding-top: 7px;
1322
}
1323

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

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

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

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

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

    
1349
#metadata-wizard button, #add-machines-wizard button {
1350
    font-size: 80%;
1351
    width: 87px;
1352
    float: right;
1353
    background-color: #5599FF;
1354
    border: 0px solid #5599FF;
1355
    padding: 0;
1356
    text-align: center;
1357
    margin-right: 8px;
1358
}
1359

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

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

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

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

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

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

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

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

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

    
1422
#metadata-wizard .metadata-edit .edit, #metadata-wizard .metadata-edit .remove {
1423
    background-repeat: no-repeat;
1424
    color: transparent;
1425
    font-size: 9pt;
1426
    float: left;
1427
    width: 16px;
1428
    height: 16px;
1429
}
1430

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

    
1441
.metadata-pair-template .editbuttons {
1442
    margin-top: -19px !important;
1443
    margin-right: -2px !important;
1444
}
1445

    
1446
#metadata-wizard .metadata-edit .edit {
1447
    background-image: url("./meta-edit.png");
1448
    margin-left: 3px;
1449
}
1450

    
1451
#metadata-wizard .metadata-edit .remove, #metadata-wizard .editbuttons .remove {
1452
    background-image: url("./meta-remove.png");
1453
    margin-left: 1px;
1454
    background-repeat: no-repeat;
1455
    color: transparent;
1456
    font-size: 9pt;
1457
    height: 16px;
1458
    width: 16px;
1459
    float: left;
1460
}
1461

    
1462
#metadata-wizard .editbuttons .save {
1463
    background-image: url("./meta-save.png");
1464
    padding-top:0;
1465
}
1466

    
1467
#metadata-wizard .addbuttons .cancel {
1468
    background-image: url("./meta-remove.png");
1469
    margin-left: 3px;
1470
}
1471

    
1472
#metadata-wizard .addbuttons .save {
1473
    background-image: url("./meta-save.png");
1474
    margin-left: 1px;
1475
}
1476

    
1477
#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 {
1478
    background-color: #4287a7;
1479
}
1480

    
1481
#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 {
1482
    background-color: #74AEC9;
1483
}
1484

    
1485
#metadata-wizard .addbuttons .cancel, #metadata-wizard .addbuttons .save {
1486
    width: 16px;
1487
    height: 16px;
1488
    float: left;
1489
    background-repeat: no-repeat;
1490
    color: transparent;
1491
}
1492

    
1493
#metadata-wizard .metatextbox {
1494
    font-size: 90%;
1495
    height: 10px;
1496
    margin-top: -2px;
1497
    color: black;
1498
    width: 150px;
1499
}
1500

    
1501
#metadata-wizard p, #add-machines-wizard p {
1502
    margin-left: 7px;
1503
    width: 200px;
1504
}
1505

    
1506
#metadata-wizard div.bottomruler, #add-machines-wizard div.bottomruler {
1507
    background-color: #666;
1508
    height: 20px;
1509
    margin-top: 17px;
1510
}
1511

    
1512
#metadata-wizard button.remove {
1513
    height: 15px;
1514
    width: 70px;
1515
    background-color: #d35f5f;
1516
    border-color: #d35f5f;
1517
}
1518

    
1519
#metadata-wizard button.edit {
1520
    height: 15px;
1521
    width: 70px;
1522
    background-color: #666;
1523
    border-color: #666;
1524
    margin-top: -12px;
1525
}
1526

    
1527
#metadata-wizard input {
1528
    font-style: italic;
1529
    color: #ccc;
1530
}
1531

    
1532
#metadata-wizard textarea.edit-meta-value {
1533
    font-style: normal;
1534
    text-align: left;
1535
    color: black;
1536
    margin-top: 2px;
1537
    width:200px;
1538
    height: 49px;
1539
}
1540

    
1541
#metadata-wizard input {
1542
    font-size: 80%;
1543
}
1544

    
1545
#metadata-wizard input.key {
1546
    height: 15px;
1547
    left: 460px;
1548
    position: absolute;
1549
    top: 83px;
1550
    width: 230px;
1551
}
1552

    
1553
#metadata-wizard textarea.value {
1554
    width: 267px;
1555
    height: 170px;
1556
    overflow: auto;
1557
}
1558

    
1559
#metadata-wizard .input-enabled {
1560
    color: black;
1561
    text-align: left;
1562
    font-style: normal;
1563
}
1564

    
1565
#metadata-wizard label.meta-value {
1566
    vertical-align: top;
1567
}
1568

    
1569
#metadata-wizard button.cancel, #metadata-wizard #edit-dialog button.close {
1570
    float: left;
1571
    margin: 4px 0 0 25px;
1572
    background-color: #d35f5f;
1573
    border-color: #d35f5f;
1574
}
1575

    
1576
/* metadata dropdown combo */
1577
.meta-key {
1578
    margin-right: 18px;
1579
    float:left;
1580
}
1581
#metadata-wizard .textdropdown-outer {
1582
    float: left;
1583
}
1584

    
1585
#metadata-wizard .textdropdown-btn {
1586
    width: 20px;
1587
    float: right;
1588
    background: url("./dropdown-arrow.gif") no-repeat center;
1589
    cursor: pointer;
1590
    left: 147px;
1591
    margin-top: 3px;
1592
    position: absolute;
1593
}
1594

    
1595
#metadata-wizard ul {
1596
    border: 1px solid #ccc;
1597
    padding: 0px;
1598
    list-style: none;
1599
    margin: 0px;
1600
    background-color: white;
1601
    height: auto !important;
1602
    padding-left: 5px;
1603
    width: 103px !important;
1604
}
1605

    
1606
#metadata-wizard ul li {
1607
    clear: both;
1608
    display: block;
1609
    float: right;
1610
    list-style: none outside none;
1611
    margin-bottom: 0 !important;
1612
    margin-left: 0 !important;
1613
    padding-bottom: 2px;
1614
    padding-right: 2px;
1615
    padding-top: 2px;
1616
    width: 100%;
1617
}
1618

    
1619
#metadata-wizard ul li:hover {
1620
    background-color: #efefef;
1621
    cursor: pointer;
1622
}
1623

    
1624
#metadata-wizard .dropdownitem {
1625
    margin-left: 10px;
1626
}
1627

    
1628
#metadata-wizard #txtdropdown:focus {
1629
    outline: 0 none;
1630
}
1631

    
1632
#metadata-wizard #add-meta-key {
1633
    height: 12px;
1634
    margin-left: 5px;
1635
    margin-top: 2px;
1636
    width: 108px !important;
1637
}
1638

    
1639
/* notification box */
1640
#yes-no {
1641
    height: 150px;
1642
    z-index: 9999;
1643
    border-bottom: 5px solid #4085A5;
1644
}
1645

    
1646
#yes-no p, #yes-no button {
1647
    margin-top: 15px;
1648
}
1649

    
1650
#error-success {
1651
    z-index: 9999;
1652
    border-bottom: 5px solid #4085A5;
1653
    min-height: 150px;
1654
    top: 120px !important;
1655
}
1656

    
1657
#error-success p {
1658
    margin-top: 5px;
1659
}
1660

    
1661
#error-success strong {
1662
    color: #F49C1A;
1663
}
1664

    
1665
#error-success .close {
1666
    background-image: url("./close-popup.png");
1667
    cursor: pointer;
1668
    height: 13px;
1669
    position: absolute;
1670
    right: 7px;
1671
    top: 9px;
1672
    width: 13px;
1673
}
1674

    
1675
.popup-header-error {
1676
    background-color: #800000 !important;
1677
}
1678

    
1679
.popup-border-error {
1680
    border-color: #800000 !important;
1681
}
1682

    
1683
.popup-details-error {
1684
    border: none !important;
1685
}
1686

    
1687
.popup-separator-error {
1688
    margin-bottom: 5px !important;
1689
}
1690

    
1691
#error-success .popup-header {
1692
    background-color: #4085A5;
1693
    color: white;
1694
    font-size: 95%;
1695
    font-weight: normal;
1696
    height: 20px;
1697
    margin-left: -16px;
1698
    margin-top: -16px;
1699
    padding-bottom: 2px;
1700
    padding-left: 30px;
1701
    padding-top: 10px;
1702
    width: 482px;
1703
}
1704

    
1705

    
1706
#error-success.success h3 span.header-box{
1707
    background-color: #71c837;
1708
    display: block;
1709
    background-image: url("./save-green.png");
1710
    background-position: right center;
1711
    background-repeat: no-repeat;
1712
    width: 80px;
1713
    padding: 3px 3px 3px 8px;
1714
    margin-top: -3px;
1715
    font-size: 90% !important;
1716
}
1717

    
1718

    
1719

    
1720
#error-success .popup-body {
1721
    background-image: url("./popup-bg.png");
1722
    margin-left: -16px;
1723
    margin-right: -16px;
1724
    margin-top: 1px;
1725
    min-height: 142px;
1726
    padding-top: 10px;
1727
}
1728

    
1729
#error-success .popup-body-inner {
1730
    background-image: url("./popup-inner-bg.png");
1731
    font-size: 80%;
1732
    min-height: 120px;
1733
    margin-left: 20px;
1734
    padding-left: 15px;
1735
    width: 460px;
1736
}
1737

    
1738
#error-success .popup-separator {
1739
    background-color: #74AEC9;
1740
    height: 1px;
1741
    width: 442px;
1742
    margin-bottom: 30px;
1743
}
1744

    
1745
#error-success .machine-now-building {
1746
    font-size: 95%;
1747
    padding-bottom: 7px;
1748
    padding-top: 10px;
1749
}
1750

    
1751
#error-success.success .machine-now-building {
1752
    padding-bottom: 14px !important;
1753
}
1754

    
1755
#error-success .password-container {
1756
    width: 430px;
1757
    padding: 5px;
1758
    border: 2px solid #75b54a;
1759
    background-color: #aade87;
1760
}
1761

    
1762
#error-success .password-header {
1763
    margin-bottom: 5px;
1764
}
1765

    
1766
#error-success .password {
1767
    color: #447821;
1768
}
1769

    
1770
#error-success .popup-details {
1771
    border: 2px solid #FF7F2A;
1772
    float: left;
1773
    margin-left: 10px;
1774
    padding: 2px;
1775
}
1776

    
1777
#error-success.success .popup-details {
1778
    border: none !important;
1779
    float: none !important;
1780
    margin-left: none !important;
1781
    margin-top: 10px;
1782
}
1783

    
1784
#error-success.success .popup-separator {
1785
    margin-bottom: 14px !important;
1786
}
1787

    
1788

    
1789
#error-success .write-password {
1790
    margin-bottom: 5px;
1791
    padding-left: 30px;
1792
}
1793

    
1794
#error-success .write-password-password {
1795
    padding-left: 30px;
1796
    color: #447821;
1797
    display: inline;
1798
    font-size: 110%;
1799
    font-weight: bold;
1800
}
1801

    
1802

    
1803
#error-success .write-password-details {
1804
    font-size: 75%;
1805
}
1806

    
1807
.more-details {
1808
    display: block;
1809
    height: 110px;
1810
}
1811

    
1812
.popup-details a:link,  .popup-details a:visited{
1813
    color: black;
1814
}
1815

    
1816
/* Confirmation boxes */
1817
div.confirm_single, div.confirm_multiple {
1818
    display: none;
1819
    background-color: #CDE2EC;
1820
    color: orange;
1821
    font-size: 9pt;
1822
}
1823

    
1824
div.confirm_multiple {
1825
    background-color: #4085A5;
1826
    z-index: 1;
1827
    position: absolute;
1828
}
1829

    
1830
div.action_error {
1831
    float: right;
1832
    width: 80px;
1833
    height: 60px;
1834
    padding: 5px;
1835
    margin: -2px -175px 0 0;
1836
    display: none;
1837
    background-color: #DCDCDC;
1838
    font-size: 9pt;
1839
    color: black;
1840
    line-height: 1.5;
1841
}
1842

    
1843
div.action_error button.details {
1844
    margin: 5px 0 0 0px;
1845
    padding: 0 15px;
1846
}
1847

    
1848
.orange {
1849
    color: orange;
1850
}
1851

    
1852
div.confirm_single button, div.confirm_multiple button, div.action_error button{
1853
    font-size: 9pt;
1854
    background-color: transparent;
1855
    border: 1px solid #5CA1C0;
1856
    color: #3D3D3D;
1857
    cursor: pointer;
1858
    padding: 0px;
1859
    height: 20px !important;
1860
}
1861

    
1862
div.confirm_single button, .action_error button {
1863
    width: 80px !important;
1864
}
1865

    
1866
div.confirm_single button.yes, div.confirm_multiple button.yes {
1867
    border-color: orange;
1868
    padding: 0 12px;
1869
}
1870

    
1871
div.confirm_single button.yes:hover, div.confirm_multiple button.yes:hover {
1872
    background-color: orange;
1873
}
1874

    
1875
div.confirm_single button.no, div.confirm_multiple button.no {
1876
    padding: 0px 16px;
1877
}
1878

    
1879
div.confirm_single button.no:hover, div.confirm_multiple button.no:hover, div.action_error button.details:hover {
1880
    background-color: #5CA1C0;
1881
}
1882

    
1883
div.confirm_single{
1884
    float: right;
1885
    width: 90px;
1886
    height: 66px;
1887
    margin: -2px -175px 0 0;
1888
}
1889

    
1890
div.confirm_single button.yes {
1891
    margin: 5px 0 0 5px;
1892
}
1893

    
1894
div.confirm_single button.no {
1895
    margin: 16px 0 0 5px;
1896
}
1897

    
1898
div.action_error {
1899
    display: none;
1900
}
1901

    
1902
div.confirm_multiple {
1903
    width: 698px;
1904
    height: 28px;
1905
    margin: 15px 0 10px -35px;
1906
}
1907

    
1908
div.confirm_multiple p {
1909
    float: left;
1910
    margin: 7px 0 0 200px;
1911
}
1912

    
1913
div.confirm_multiple button {
1914
    float: right;
1915
    margin: 4px 5px 0 0;
1916
}
1917

    
1918
div.confirm_multiple button.no {
1919
    margin-right: 15px;
1920
}
1921

    
1922
div#aboutuser{
1923
    float:right;
1924
    clear: both;
1925
    color: #FFFFFF;
1926
    font-size: 75%;
1927
    margin-top: -25px;
1928
}
1929

    
1930
div#user{
1931
    float:right;
1932
    clear: both;
1933
    color: #FFFFFF;
1934
    font-size: 75%;
1935
    margin-top: 43px;
1936
}
1937

    
1938
div#user a{
1939
    color: #FFFFFF;
1940
    text-decoration: none;
1941
}
1942

    
1943
div#user a.current_lang {
1944
    color: #72ADC8;
1945
}
1946

    
1947
.separator {
1948
    background-color: #74AEC9;
1949
    height: 10px;
1950
    width: 700px;
1951
    margin: 0 0 0 -36px;
1952
}
1953

    
1954
.machine-separator {
1955
    width: 508px;
1956
    height: 1px;
1957
    margin: 15px 0 0 15px;
1958
    background-color: #DCDCDC;
1959
}
1960

    
1961
#mini.separator {
1962
    width: 535px;
1963
    height: 5px;
1964
    margin: 17px 0 17px -36px;
1965
    display: none;
1966
}
1967

    
1968
#disks.separator {
1969
    background-color: #dea842;
1970
}
1971

    
1972
#images.separator {
1973
    background-color: #87a06d;
1974
}
1975

    
1976
#networks.separator {
1977
    background-color: #6c535d;
1978
}
1979

    
1980
#networks-pane .public-networks .namecontainer {
1981
    margin-top: 4px !important;
1982
}
1983

    
1984
.network-machine h5 {
1985
    margin-bottom: 15px;
1986
    margin-top: 5px;
1987
}
1988

    
1989
#desktops.separator {
1990
    background-color: #dea842;
1991
}
1992

    
1993
#apps.separator {
1994
    background-color: #87a06d;
1995
}
1996

    
1997
.machine-container .separator {
1998
    width: 508px;
1999
    height: 1px;
2000
    margin-top: 2px;
2001
    background-color: #DCDCDC;
2002
    margin-left: 13px;
2003
}
2004

    
2005
.machine h5 {
2006
    margin: -1px 60px -2px 84px;
2007
}
2008

    
2009
.machine .settings {
2010
    margin-top: 15px;
2011
}
2012

    
2013
.editbuttons {
2014
    display: block;
2015
    clear: none;
2016
    width: 40px;
2017
    margin-right: 32%;
2018
    padding-top: 2px;
2019
    float: right;
2020
    cursor: pointer;
2021
}
2022

    
2023
.editbuttons .save:hover, .editbuttons .cancel:hover {
2024
    background-color: #CCCCCC;
2025
}
2026

    
2027
.editbuttons .cancel:hover {
2028
    background-image: url("./cancel-onhover.png");
2029
}
2030

    
2031
.editbuttons .cancel, .editbuttons .save {
2032
    background-repeat: no-repeat;
2033
    color: transparent;
2034
    height: 16px;
2035
    width: 16px;
2036
    float: left;
2037
}
2038

    
2039
.editbuttons .cancel {
2040
    background-image: url("./cancel.png");
2041
    margin-left: 3px;
2042
}
2043

    
2044
.editbuttons .save {
2045
    background-image: url("./save.png");
2046
    margin-left: 1px;
2047
}
2048

    
2049
.editbuttons img {
2050
    float:none !important;
2051
    margin: 0px !important;
2052
}
2053

    
2054
.namecontainer {
2055
    height: 18px;
2056
    margin-top: 9px;
2057
}
2058

    
2059
.nametextbox {
2060
    height: 13px;
2061
    font-size: 95%;
2062
}
2063

    
2064
.large-spinner {
2065
    background: url("./icons/indicators/large/progress.gif");
2066
    margin-left: 298px;
2067
    margin-top: 30px;
2068
    height: 31px;
2069
    width: 31px;
2070
    position: absolute;
2071
}
2072

    
2073
.list .large-spinner {
2074
    margin-top:-50px;
2075
}
2076

    
2077
.single .large-spinner {
2078
    margin-top:-45px;
2079
}
2080

    
2081
/* tables in list view */
2082
div.list div.dataTables_filter,  div.list div.dataTables_filter input{
2083
    font-size: 9pt;
2084
    display: none;
2085
}
2086

    
2087
div.list div.dataTables_filter input{
2088
    height: 12px;
2089
    margin-bottom: 12px;
2090
}
2091

    
2092
div.list table {
2093
    width: 515px;
2094
    font-size: 9pt;
2095
}
2096

    
2097
div.list table tbody td {
2098
    color: #3D3D3D;
2099
    padding:6px;
2100
    background-color: #FFF;
2101
    vertical-align: middle;
2102
}
2103

    
2104
div.list table thead tr th {
2105
    background-color: #CDE2EC;
2106
    background-image: url(bg.gif);
2107
    background-repeat: no-repeat;
2108
    background-position: right 11px;
2109
    font-weight: normal;
2110
    border: 1px solid #FFF;
2111
    border-bottom: none;
2112
    padding: 4px;
2113
    text-align: left;
2114
    vertical-align: middle;
2115
    cursor: pointer;
2116
}
2117

    
2118
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2119
    background-color: #5CA1C0;
2120
}
2121

    
2122
div.list table thead .sorting_asc {
2123
    background-image: url(asc.gif);
2124
}
2125

    
2126
div.list table thead .sorting_desc {
2127
    background-image: url(desc.gif);
2128
}
2129

    
2130
div.list table .selection div.expand-icon {
2131
    background-image: url(asc.gif);
2132
    background-repeat: no-repeat;
2133
    position: relative;
2134
    cursor: pointer;
2135
    width: 15px;
2136
    height: 4px;
2137
    left: 19px;
2138
    top: -11px;
2139
}
2140

    
2141
ul.dropdown-selector {
2142
    background-color: #E6EEEE;
2143
    position: absolute;
2144
    margin-left: 1px;
2145
    display: block;
2146
    top: 255px;
2147
    font-size:9pt;
2148
    width:40px;
2149
}
2150

    
2151
ul.dropdown-selector li {
2152
    padding: 4px;
2153
}
2154

    
2155
ul.dropdown-selector li:hover {
2156
    background-color: #5CA1C0;
2157
}
2158

    
2159
ul.dropdown-selector li a{
2160
    color: black;
2161
    text-decoration: none;
2162
}
2163

    
2164
div.list table span.imagetag {
2165
    display: none;
2166
}
2167

    
2168
div.list table thead .vmos {
2169
    width: 20px !important;
2170
    vertical-align:middle;
2171
}
2172

    
2173
div.list table .selection {
2174
    width: 20px !important;
2175
    text-align: left;
2176
    background-image: none;
2177
    padding-left: 6px;
2178
}
2179

    
2180
div.list table thead .vmflavor {
2181
    width: 100px !important;
2182
}
2183

    
2184
div.list table thead .vmgroup {
2185
    width: 40px !important;
2186
}
2187

    
2188
div.list table thead .vmstatus {
2189
    width: 50px !important;
2190
}
2191

    
2192
div.list table thead .vmname {
2193
    width: 70px !important;
2194
}
2195

    
2196
.spinner, .wave {
2197
    clear: right;
2198
    float:right !important;
2199
    margin: 5px 16px 0 15px !important;
2200
}
2201

    
2202
.hidden {
2203
    display:none;
2204
}
2205

    
2206
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2207
    display:block !important;
2208
    color: orange !important;
2209
}
2210

    
2211
.action_error .message, .action_error .code {
2212
    display: none;
2213
}
2214

    
2215
.fixed {
2216
    margin: 0 0 0 -35px !important;
2217
    bottom: 0;
2218
    position: fixed !important;
2219
}
2220

    
2221
/* Networks */
2222
#networks-pane {
2223
    background-color: transparent;
2224
    margin-left: 1px;
2225
    margin-right: 0;
2226
    padding-left: 35px;
2227
}
2228

    
2229
#networkscreate {
2230
    background-color: #FF7F2A;
2231
    color: #000000;
2232
    cursor: pointer;
2233
    padding: 7px 24px;
2234
    text-decoration: none;
2235
    width: 125px;
2236
}
2237

    
2238
#networkscreate:hover {
2239
    background-color: #FF9955;
2240
}
2241

    
2242
#networks-pane #beforecreate {
2243
    margin-left: -20px;
2244
    margin-top: -7px;
2245
}
2246

    
2247
#networks-container {
2248
    min-height: 270px;
2249
}
2250

    
2251
#networks-createcontainer {
2252
    margin-left: -36px;
2253
    margin-top: 17px;
2254
    padding-top: 30px;
2255
}
2256

    
2257
#networks-pane .public-networks {
2258
    background-color: white;
2259
    margin: -47px -20px 18px -35px;
2260
    padding: 70px 20px 15px 35px;
2261
}
2262

    
2263
#networks-pane .private-networks {
2264
    background-color: white;
2265
    margin-left: -35px;
2266
    margin-right: -20px;
2267
    padding: 15px 20px 20px 35px;
2268
}
2269

    
2270
#public-template, #private-template, #public-machine-template, #private-machine-template {
2271
    display:none;
2272
}
2273

    
2274
div.network a.action-network-add {
2275
    display: none;
2276
}
2277

    
2278
div.network a.action-network-destroy {
2279
    margin-top: 38px !important;
2280
    width: 50px;
2281
    display: none;
2282
}
2283

    
2284
div.network {
2285
    clear: both;
2286
    color: #666666;
2287
    min-height: 65px;
2288
    margin: 5px 0 0 -30px;
2289
    padding: 3px 20px 0 4px;
2290
    width: 480px;
2291
}
2292

    
2293
#private-template {
2294
    margin: 2px 0 0 -30px;
2295
}
2296

    
2297
div.network-placeholder {
2298
    border-left: 3px solid #FB822F;
2299
    margin-left: 33px;
2300
}
2301

    
2302
.network a, .show-machines, span.ip, .show-firewall {
2303
    color: #3d3d3d;
2304
    font-weight: normal;
2305
    text-decoration: none;
2306
    font-size: 9pt;
2307
}
2308

    
2309
.network a:hover, .show-machines:hover, span.ip:hover, .show-firewall:hover {
2310
    color: #000;
2311
    text-decoration: underline;
2312
    cursor: pointer;
2313
}
2314

    
2315
#networks-container .name {
2316
    text-decoration: none !important;
2317
    margin-bottom: 25px;
2318
    color: #000000;
2319
    margin-top: -4px;
2320
}
2321

    
2322
.state {
2323
    float: right;
2324
}
2325

    
2326
.state div {
2327
    text-align: right;
2328
    margin-right: 3px;
2329
}
2330

    
2331
div.network div.actions {
2332
    float: right;
2333
    width: 100px;
2334
    margin:0px -120px 0 0;
2335
    font-weight: normal;
2336
}
2337

    
2338
div.network div.actions a {
2339
    color: transparent;
2340
    margin: 0 0 0 8px;
2341
    display: block;
2342
}
2343

    
2344
div.actions a.enabled:hover{
2345
    color: black !important;
2346
    text-decoration: underline;
2347
    display: block;
2348
}
2349

    
2350
.network:hover .actions a {
2351
    color: #3d3d3d;
2352
    display: block;
2353
}
2354

    
2355
div.network div.actions a.selected:hover {
2356
    color: orange;
2357
}
2358

    
2359
div.network-machine div.machine-actions a.action-details {
2360
    margin-top: 10px;
2361
}
2362

    
2363
.network:hover {
2364
    background-color: #CDE2EC;
2365
}
2366

    
2367
#internet-separator {
2368
    width: 510px;
2369
    height: 5px;
2370
    background-color: #6C535D;
2371
    margin-left: -36px;
2372
    margin-top: 20px;
2373
}
2374

    
2375
.network-logos {
2376
    float:left;
2377
    padding-right: 10px;
2378
}
2379

    
2380
.network-logos:hover {
2381
    cursor: pointer;
2382
}
2383

    
2384
#networks-container .settings {
2385
    color: #000000;
2386
}
2387

    
2388
#networks-container .network-type {
2389
    float: right;
2390
    margin-top: -4px;
2391
    margin-right: 15px;
2392
}
2393

    
2394
#networks-container .indicator {
2395
    background-color: #87AADE;
2396
    border-color: white;
2397
    border-style: solid;
2398
    border-width: 2px 3px 2px 2px;
2399
}
2400

    
2401
.state div {
2402
    margin-right: 3px;
2403
    text-align: right;
2404
    margin-top: 5px;
2405
}
2406

    
2407
.private-networks .state div {
2408
    margin-top: 10px;
2409
    margin-bottom: -6px;
2410
}
2411

    
2412
div.indicator {
2413
    clear: none;
2414
    float: right;
2415
    height: 11px;
2416
    margin: 3px -1px;
2417
    width: 10px;
2418
}
2419

    
2420
#private-networks {
2421
    margin-top: 20px;
2422
}
2423

    
2424
.private-networks .editbuttons {
2425
    margin-right: 22%;
2426
}
2427

    
2428
.private-networks div.confirm_single {
2429
    margin: -2px -200px 0 0;
2430
}
2431

    
2432
.private-networks .network-machine div.confirm_single {
2433
    margin: -8px -180px 0 0;
2434
}
2435

    
2436
span.rename-network, span.configure {
2437
    background-repeat: no-repeat;
2438
    color: transparent;
2439
    font-size: 9pt;
2440
    font-weight: normal;
2441
    margin-left: 10px;
2442
    padding-left: 10px;
2443
    text-align: left;
2444
}
2445

    
2446
span.rename-network {
2447
    cursor: pointer;
2448
}
2449

    
2450
div.name-div:hover span.rename-network {
2451
    color: #3D3D3D;
2452
    margin-top: 0.4em;
2453
    background-image: url(./pencil.png);
2454
    background-position: 0 3px;
2455
}
2456

    
2457
.network:hover a.rename {
2458
    color: #3d3d3d;
2459
}
2460

    
2461
.network-separator {
2462
    background-color: #DCDCDC;
2463
    height: 1px;
2464
    margin: 2px 0 0 -5px;
2465
    width: 480px;
2466
}
2467

    
2468
.network-contents {
2469
    margin-left: -4px;
2470
    width: 504px;
2471
    clear: both;
2472
    padding-bottom: 7px;
2473
}
2474

    
2475
.network-machine .state div {
2476
    text-align: left;
2477
}
2478

    
2479
.network-machine {
2480
    margin-left: 34px;
2481
    padding-bottom: 5px;
2482
    padding-left: 5px;
2483
    padding-top: 10px;
2484
    margin-top: 5px;
2485
}
2486

    
2487
.network-machine .logo {
2488
    float:left;
2489
    padding-right: 10px;
2490
    position:relative;
2491
}
2492

    
2493
#networks-container .machine-name {
2494
    text-decoration: none !important;
2495
    margin-bottom: 10px;
2496
    color: #000000;
2497
    margin-top: -4px;
2498
}
2499

    
2500
div.network div.machine-actions {
2501
    float: right;
2502
    width: 100px;
2503
    margin: -5px -100px 0 0;
2504
    font-weight: normal;
2505
}
2506

    
2507
.discreet {
2508
    color: #969696;
2509
}
2510

    
2511
.network-contents-start-separator {
2512
    height: 3px;
2513
    background-color: #87AADE;
2514
    margin-left: 39px;
2515
    width: 410px;
2516
}
2517

    
2518
.network-contents-end-separator {
2519
    height: 3px;
2520
    background-color: #87AADE;
2521
    margin-top: 7px;
2522
    margin-left: 13px;
2523
    width: 473px;
2524
}
2525

    
2526
.network .separator {
2527
    background-color: #DCDCDC;
2528
    height: 1px;
2529
    margin-left: 5px;
2530
    margin-top: 5px;
2531
    margin-bottom: -3px;
2532
    position: absolute;
2533
    width: 473px;
2534
}
2535

    
2536
.network-machines {
2537
}
2538

    
2539
.network-machine .state {
2540
    margin-right: 18px;
2541
}
2542

    
2543
.network-machine .state .status {
2544
    margin-bottom: 4px;
2545
}
2546

    
2547
.machine-name .name {
2548
    margin-top: -10px !important;
2549
}
2550

    
2551
.machine-name .namecontainer {
2552
    line-height: 18px;
2553
    margin-bottom: 20px;
2554
}
2555

    
2556
.network-machine:hover {
2557
    background-color: #5CA1C0;
2558
}
2559

    
2560
.machines {
2561
    width: 410px;
2562
    background-color: #B3B3B3;
2563
    margin-bottom: -8px;
2564
    margin-top: 10px;
2565
}
2566

    
2567
div.empty-network-slot {
2568
    height: 60px;
2569
}
2570

    
2571
div.network-remove-machine, div.network-add-machine {
2572
    background-color: #FB822F;
2573
    color: #bc4b00;
2574
    width:90px;
2575
    float:left;
2576
    margin:41px 0 0 -100px;
2577
}
2578

    
2579
span.remove-icon {
2580
    font-size: 80%;
2581
    margin-left: 15px;
2582
}
2583

    
2584
span.add-icon {
2585
    margin-left: 15px;
2586
}
2587

    
2588
span.remove-icon:hover, span.add-icon:hover {
2589
    cursor:pointer;
2590
    color: #fff;
2591
}
2592

    
2593
div.network-add-machine {
2594
    margin:44px 0 0 0;
2595
}
2596

    
2597
.firewall-on {
2598
    color: #42E342;
2599
}
2600

    
2601
.firewall-off {
2602
    color: #F82E2E;
2603
}
2604

    
2605
div.network div.machine-actions a {
2606
    color: transparent;
2607
    margin: 0 0 0 8px;
2608
    display: block;
2609
}
2610

    
2611
div.network div.machine-actions a:hover {
2612
    color: black !important;
2613
    text-decoration: underline;
2614
    display: block;
2615
}
2616

    
2617
div.network div.display a{
2618
    color: #3d3d3d;
2619
    display: block;
2620
}
2621

    
2622
div.network div.display a:selected {
2623
    color: #3d3d3d !important;
2624
}
2625

    
2626

    
2627
.network-machine:hover .machine-actions a {
2628
    color: #3d3d3d;
2629
    display: block;
2630
}
2631

    
2632
.firewall-content {
2633
    color: black;
2634
    font-size: 60%;
2635
    margin-left: 60px;
2636
}
2637

    
2638
.firewall-content .checkbox-legends {
2639
    vertical-align: text-top;
2640
}
2641

    
2642
.checkbox-legends a {
2643
    color: black;
2644
    text-decoration: underline;
2645
    font-size: 100%;
2646
}
2647

    
2648
.machine-connect {
2649
    color:black !important;
2650
    text-decoration: underline !important;
2651
}
2652

    
2653
.machine-connect:hover {
2654
    cursor: pointer;
2655
}
2656

    
2657
.firewall-contents-start-separator {
2658
    background-color: #808080;
2659
    height: 2px;
2660
    margin-bottom: 5px;
2661
    width: 365px;
2662
}
2663

    
2664
.firewall-contents-end-separator {
2665
    background-color: #808080;
2666
    height: 2px;
2667
    margin-left: -60px;
2668
    margin-top: 5px;
2669
    width: 425px;
2670
}
2671

    
2672
.firewall-apply {
2673
    background-color: #666666;
2674
    border: medium none;
2675
    float: right;
2676
    font-size: 105%;
2677
    height: 18px;
2678
    margin-right: 5px;
2679
    margin-top: 3px;
2680
    width: 75px;
2681
}
2682

    
2683
.name-div {
2684
    margin-left: 70px;
2685
    margin-bottom: 20px;
2686
}
2687

    
2688
.machine-name-div {
2689
    margin-bottom: 20px;
2690
    margin-left: 60px;
2691
}
2692

    
2693
/* Metadata */
2694

    
2695
.info-content {
2696
    height: 95px;
2697
    width: 540px;
2698
    margin-top: 10px;
2699
}
2700

    
2701
.metadata-separator {
2702
    background-color: #808080;
2703
    height: 3px;
2704
    margin: 0 0 0 14px;
2705
    width: 492px;
2706
}
2707

    
2708
.metadata-container {
2709
    line-height: 12px;
2710
    margin-left: 14px;
2711
    margin-top: 2px;
2712
    height: 85px;
2713
}
2714

    
2715
.metadata-column {
2716
    border-right: 1px solid #CECECE;
2717
    color: black;
2718
    float: left;
2719
    font-size: 60%;
2720
    margin-top: 3px;
2721
    height: 70px;
2722
    padding-bottom: 5px;
2723
}
2724

    
2725
.vm-stats {
2726
    padding-left: 10px;
2727
    padding-right: 5px;
2728
    width: 119px;
2729
}
2730

    
2731
.vm-details {
2732
    width: 169px;
2733
}
2734

    
2735
.vm-metadata {
2736
    padding-left: 10px;
2737
    width: 129px;
2738
    border: none;
2739
}
2740

    
2741
.metadata-left {
2742
    float:left;
2743
    width: 50px;
2744
    height: 60px;
2745
}
2746

    
2747
.metadata-right {
2748
    width: 73px;
2749
    float:left;
2750
    height: 35px;
2751
    padding-left: 5px;
2752
    position:relative;
2753
    overflow:hidden;
2754
}
2755

    
2756
.metadata-right .items {
2757
    position:absolute;
2758
    height:20000em;
2759
}
2760

    
2761
.metadata-keys-container {
2762
    height: 60px;
2763
    float: left;
2764
}
2765

    
2766
a.manage-metadata {
2767
    font-size: 100%;
2768
    color: black;
2769
    margin-left:17px;
2770
    text-decoration: underline;
2771
}
2772

    
2773
.metadata-actions, .scrollable {
2774
    padding-left: 5px;
2775
}
2776

    
2777
.metadata-actions .prev,  .metadata-actions .next{
2778
    float:left;
2779
    width:29px;
2780
    height:6px;
2781
    cursor: pointer;
2782
}
2783

    
2784
.metadata-actions .prev {
2785
    background: url("./roll-up.png") no-repeat scroll 0 0 transparent;
2786
}
2787

    
2788
.metadata-actions .next {
2789
    background: url("./roll-down.png") no-repeat scroll 0 0 transparent;
2790
}
2791

    
2792
.scrollable {
2793
    position:relative;
2794
    overflow:hidden;
2795
    height: 35px;
2796
    width: 60px;
2797
    margin-bottom:2px;
2798
}
2799

    
2800
.scrollable .items {
2801
    position:absolute;
2802
    height:20000em;
2803
}
2804

    
2805
.metadata-bar {
2806
    float: right !important;
2807
    margin: 1px 7px 0 !important;
2808
}
2809

    
2810
/* single view */
2811
.single {
2812
    background-color: white;
2813
    color: #383838;
2814
    margin-left: -35px;
2815
    margin-top: -76px;
2816
    padding-bottom: 10px;
2817
    padding-left: 20px;
2818
    padding-top: 77px;
2819
    width: 679px;
2820
}
2821

    
2822
.single .column1 {
2823
    width: 140px;
2824
    float:left;
2825
    margin-bottom: 25px;
2826
}
2827

    
2828
.single .column1 .state {
2829
    width: 126px;
2830
    background-color: #999999;
2831
    float: left;
2832
    padding-bottom: 6px;
2833
    padding-top: 3px;
2834
    text-align: center;
2835
}
2836

    
2837
.single .column1 .state-label {
2838
    padding-top: 5px;
2839
}
2840

    
2841
.single .column1 .single-actions {
2842
    border: 3px solid #999999;
2843
    padding-bottom: 4px;
2844
    padding-left: 4px;
2845
    width: 119px;
2846
}
2847

    
2848
.single div.single-action {
2849
    font-size: 80%;
2850
    line-height: 16px;
2851
    text-decoration: none;
2852
    cursor: pointer;
2853
}
2854

    
2855
.single div.single-action:hover {
2856
    color: #000000;
2857
}
2858

    
2859
.single .column2 {
2860
    float: left;
2861
    font-size: 78%;
2862
    line-height: 17px;
2863
    width: 370px;
2864
    margin-bottom: 20px;
2865
}
2866

    
2867
.single .column2 .machine-labels {
2868
    width: 130px;
2869
    float:left;
2870
}
2871

    
2872
.single .column2 .machine-details {
2873
    float:left;
2874
    text-align: right;
2875
}
2876

    
2877
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
2878
    margin-bottom: 13px;
2879
}
2880

    
2881
.single .column3 {
2882
    width: 150px;
2883
    background-color: #CCCCCC;
2884
    height: 230px;
2885
    margin-left: 510px;
2886
    position: absolute;
2887
    top: 195px;
2888
}
2889

    
2890
.single .column3 .controls {
2891
    font-size: 80%;
2892
    height: 20px;
2893
    padding-left: 7px;
2894
    padding-right: 7px;
2895
    padding-top: 8px;
2896
}
2897

    
2898
.single .column3 .previous {
2899
    float:left;
2900
}
2901

    
2902
.single .column3 .next {
2903
    float:right;
2904
}
2905

    
2906
.single .column3 .separator {
2907
    width: 135px;
2908
    height: 1px;
2909
    background-color: #999999;
2910
    margin: 0 0 0 7px;
2911
    clear: both;
2912
}
2913

    
2914
.single .column3 .servers {
2915
    font-size: 80%;
2916
    line-height: 15px;
2917
    padding-top: 10px;
2918
    text-align: right;
2919
}
2920

    
2921
.single .column3 .server-name {
2922
    margin-left: 10px;
2923
    padding-right: 5px;
2924
    cursor: pointer;
2925
    padding-bottom: 2px;
2926
}
2927

    
2928
.single .column3 .server-name:hover {
2929
    background-color:  #999999;
2930
    color: white;
2931
}
2932

    
2933
.single .column3 .selected {
2934
    background-color:  #999999;
2935
    color: white;
2936
}
2937

    
2938
.single .disks, .single .networks, .single .stats {
2939
    background-color: #999999;
2940
    clear: both;
2941
    cursor: pointer;
2942
    height: 20px;
2943
    padding-left: 21px;
2944
    padding-top: 2px;
2945
    margin-bottom: 10px;
2946
    margin-left: -21px;
2947
    width: 500px;
2948
    font-size: 85%;
2949
}
2950

    
2951
.single .toggler {
2952
    color: #FFFFFF;
2953
    float: right;
2954
    font-size: 140%;
2955
    padding-right: 7px;
2956
    padding-top: 7px;
2957
}
2958

    
2959
.single .disks {
2960
    color: #C7A35F;
2961
}
2962

    
2963
.single .networks {
2964
    color: #9C7371;
2965
}
2966

    
2967
.single .disks-content, .single .networks-content, .single .stats-content {
2968
    height: 150px;
2969
}
2970

    
2971
.single .single-image {
2972
    width: 126px;
2973
    margin-bottom: 10px;
2974
}
2975

    
2976
.single .column3 .previous , .single .column3 .next {
2977
    cursor: pointer;
2978
}
2979

    
2980
/* console css */
2981
.console-header-logo {
2982
    padding-top: 10px;
2983
    margin-left: 30px;
2984
    position: fixed;
2985
}
2986

    
2987
div.console-container {
2988
    margin: 0 0em;
2989
    height: auto;
2990
}
2991

    
2992
#wrapper.console {
2993
    width: auto;
2994
}
2995

    
2996
.console-info {
2997
    font-size:80%;
2998
    color: white;
2999
    float:left;
3000
    position:relative;
3001
    margin: 25px 0 0 480px;
3002
}
3003

    
3004
applet {
3005
    width: 100%;
3006
    height:75%;
3007
}
3008

    
3009
.console-footer #footer-text{
3010
    float:left;
3011
    left: auto;
3012
    margin-left:30px;
3013
}
3014

    
3015
/* add network wizard (see also #wizard for shared classes) */
3016
#networks-wizard .header {
3017
    background-color: #4085A5;
3018
    height: 56px;
3019
}
3020

    
3021
#networks-wizard div.name-input {
3022
    margin: 75px 0 0 55px;
3023
}
3024

    
3025
#networks-wizard input {
3026
    border: 1px solid #CCCCCC;
3027
    color: #445566;
3028
    letter-spacing: 1px;
3029
    width: 170px;
3030
}
3031

    
3032
#networks-wizard span.help {
3033
    font-style: italic;
3034
    font-size: 80%;
3035
    margin-left: 10px;
3036
}
3037

    
3038
#networks-wizard .separator-end {
3039
    background-color: #387693;
3040
    height: 6px;
3041
    width: 478px;
3042
    margin-left: -12px;
3043
    margin-top: 9px;
3044
}
3045

    
3046
.red {
3047
    color: red;
3048
}
3049

    
3050
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3051
#add-machines-wizard span.machine-name {
3052
    margin-left: 4px;
3053
    vertical-align: text-top;
3054
}
3055

    
3056
#add-machines-wizard img.list-logo {
3057
    margin: 2px 1px 1px;
3058
}
3059

    
3060
.css-panes {
3061
    clear: both;
3062
}
3063

    
3064
.last-separator {
3065
    margin-top:-3px;
3066
    background-color:transparent
3067
}
3068

    
3069
.public-networks .empty-network-slot {
3070
    display: none;
3071
}