Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ 698b4ddd

History | View | Annotate | Download (98.2 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
body {
20
    background: url(./body-bg.png) repeat-x #FFFFFF;
21
    text-align:center;
22
    font-size: 16px;
23
}
24

    
25
a, a:hover, a:active, a:focus, div:focus, span:focus, li:focus {
26
    outline: none;
27
}
28

    
29
#okeanos-image {
30
    position: absolute;
31
    bottom: -0px;
32
    right: 0;
33
    z-index:0;
34
}
35

    
36
#container {
37
    position: relative;
38
        margin:0 auto;
39
        width: 100%;
40
        background: transparent;
41
}
42

    
43
#header {
44
    height: 93px;
45
    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;
46
    margin: 0 auto;
47
    width: 700px;
48
    text-align: left;
49
    position: relative;
50
}
51

    
52
#content {
53
    padding-bottom: 10px;
54
    width: 100%;
55
}
56

    
57
div#wrapper {
58
    width: 700px;
59
    margin: 0em auto;
60
    text-align: left;
61
}
62

    
63
#footer {
64
    height: 80px;
65
    background-color: #4085A5;
66
    width:100%;
67
}
68

    
69
#footer-container {
70
    height: 80px;
71
    width: 100%;
72
    left:0;
73
    z-index:10;
74
}
75

    
76
#footer div.grnet-sign {
77
    margin-top:10px;
78
}
79

    
80
#footer div.grnet-sign a{
81
    color: #72ADC8;
82
}
83

    
84
#footer div.grnet-sign a:hover {
85
    color: #FFFFFF;
86
}
87

    
88
ol, ul {
89
    list-style: none;
90
}
91

    
92
blockquote, q {
93
    quotes: none;
94
}
95

    
96
blockquote:before, blockquote:after,
97
q:before, q:after {
98
    content: '';
99
    content: none;
100
}
101

    
102
/* remember to define focus styles! */
103
:focus {
104
    outline: 1px dotted #87AADE;
105
}
106

    
107
/* remember to highlight inserts somehow! */
108
ins {
109
    text-decoration: none;
110
}
111

    
112
del {
113
    text-decoration: line-through;
114
}
115

    
116
/* tables still need 'cellspacing="0"' in the markup */
117
table {
118
    border-collapse: collapse;
119
    border-spacing: 0;
120
}
121

    
122
h5 {
123
    font-weight: normal;
124
    margin-bottom:3px;
125
}
126

    
127
.tab-name, 
128
.machine-container .name,
129
h5.namecontainer span,
130
.single .machine-detail.title {
131
    font-family: 'Ubuntu';
132
}
133

    
134
.create-container a {
135
    font-family: 'Open Sans', sans-serif;
136
}
137

    
138
/* root element for tabs  */
139
.tab-name {
140
    background-color: #5CA1C0;
141
    color: #FFFFFF;
142
    float: right;
143
    font-size: 150%;
144
    height: 31px;
145
    text-align: right;
146
    padding-right: 15px;
147
    width: 170px;
148
}
149

    
150
.tab-separator {
151
    background-color: white;
152
    float: left;
153
    width: 2px;
154
    height: 23px;
155
    margin-top: 4px;
156
}
157

    
158
ul.css-tabs {
159
    padding: 0;
160
    height:31px;
161
    background-color: #5CA1C0;
162
}
163

    
164
ul.css-tabs .secondary {
165
    position:relative;
166
}
167

    
168
/* single tab */
169
ul.css-tabs li {
170
    float:left;
171
    padding:0;
172
    list-style-type:none;
173
}
174

    
175
ul.css-tabs .current {
176
    background: #4085A5;
177
}
178

    
179
/* link inside the tab. uses a background image */
180
ul.css-tabs a {
181
    float:left;
182
    display:block;
183
    text-decoration:none;
184
    color:#d2d2d2;
185
    position:relative;
186
    outline:0;
187
    padding: 4px 25px 0;
188
    height: 27px;
189
}
190

    
191
ul.css-tabs a:hover {
192
    background: #74AEC9;
193
}
194

    
195
/* selected tab */
196
ul.css-tabs a.current,
197
ul.css-tabs a.active {
198
    cursor:default;
199
    background: #4085A5;
200
}
201

    
202
/* tab pane */
203
div.css-panes {
204
/*    border-top: 10px solid #87aade;
205
    border-bottom: 10px solid #87aade;  */
206
    background: transparent;
207
}
208

    
209
.css-panes > div.pane {
210
    display:none;
211
}
212

    
213
.panes-menu {
214
    height: 30px;
215
    margin-bottom: 10px;
216
}
217
/* CSS3 border radius for various elements. yea - CSS isn't perfect */
218
.rounded, #sheet input, .error {
219
    border-radius: 5px;
220
    -webkit-border-radius: 5px;
221
    -moz-border-radius: 5px;
222
    -o-border-radius: 5px;
223
    -khtml-border-radius: 5px;
224
}
225

    
226
/*validation error message*/
227
/*.error {*/
228
    /*background-color:#E8FF6D;*/
229
    /*padding:4px;*/
230
    /*-webkit-box-shadow: #000 0 0 9pt;*/
231
    /*-moz-box-shadow: #000 0 0 9pt;*/
232
/*}*/
233
.error {
234
    color: #f00 !important;
235
}
236

    
237
/* nested arrow inside error message. It's 100% CSS. No images. */
238
.error em {
239
    border: 10px solid;
240
    border-color: #E8FF6D transparent transparent;
241
    bottom: -17px;
242
    display: block;
243
    height: 0;
244
    left: 10px;
245
    position: absolute;
246
    width: 0;
247
}
248

    
249
/* input field that caused validation error */
250
.invalid {
251
    background-color: rgba(221, 233, 255, 0.898) !important;
252
}
253

    
254
#beforecreate {
255
    background-color: #FF9955;
256
    height: 32px;
257
    width: 13px;
258
}
259

    
260
.pane-top {
261
    height: 70px;
262
    position: relative;
263
    background: #EFF7FA 0px 0px;
264
    /*margin-bottom: -2px;*/
265
}
266

    
267
#machines-pane-top.empty {
268
    background: transparent;
269
}
270

    
271
#beforecreate {
272
    border-left: 16px solid #efefef;
273
    margin-left: -16px;
274
}
275

    
276
.create-container {
277
    line-height: 4em;
278
}
279

    
280
#createcontainer a {
281
}
282

    
283
#create {
284
    background-color: #FF7F2A;
285
    color: #000;
286
    cursor: pointer;
287
    text-decoration: none;
288
    font-size:100%;
289
}
290

    
291
#create:hover {
292
    background-color: #FF9955;
293
}
294

    
295
#console-header {
296
    height: 67px;
297
    margin-bottom:15px;
298
    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;
299
}
300

    
301
.header-logo {
302
    padding-top: 28px;
303
}
304

    
305
div#footer-text a {
306
    color: #FFFFFF;
307
    text-decoration: none;
308
}
309

    
310
div#footer-text{
311
    color: #FFFFFF;
312
    font-size: 75%;
313
    padding-top: 10px;
314
}
315

    
316
#footer-bg {
317
    background: url("./footer-bg.png") no-repeat scroll 0 0 #4085A5;
318
    background-position:right;
319
}
320

    
321
.modal {
322
    background-color:#fff;
323
    display:none;
324
    width:30em;
325
    padding:1em;
326
    text-align:left;
327
}
328

    
329
/* server wizard scrollable root element and network wizard */
330
#wizard, #networks-wizard {
331
    font-size:75%;
332
    height:425px;
333
    width:453px;
334
    overflow:hidden;
335
    position:absolute !important;
336
}
337

    
338
/* scrollable items */
339
#wizard .items {
340
    width:20000em;
341
    clear:both;
342
    position:absolute;
343
    display:block;
344
    padding: 0;
345
    margin: 0;
346
    border:none;
347
    background:none;
348
}
349

    
350
/* single item */
351
#wizard .page, #networks-wizard div.container {
352
    padding: 0px 40px 20px 15px;
353
    width:447px;
354
    float:left;
355
    display:block;
356
    border:none;
357
    background-color: transparent;
358
}
359

    
360
#networks-wizard div.container {
361
    background-color: #ECF4F8;
362
    width:400px;
363
    height: 180px;
364
    margin-bottom:50px;
365
}
366

    
367
/* title */
368
#wizard h2, #networks-wizard h2 {
369
    color: #FF7B24;
370
    font-size: 100%;
371
    font-style: italic;
372
    font-weight: bold;
373
    margin-left: 37px;
374
    margin-top: 17px;
375
}
376

    
377
#networks-wizard h2 {
378
    margin-top: 15px;
379
}
380

    
381
#wizard li {
382
    margin-bottom:1.2em;
383
}
384

    
385
#wizard .pane li {
386
    margin: 0;
387
}
388

    
389
#wizard label {
390
    font-size:120%;
391
    display:block;
392
    clear: both;
393
}
394

    
395
#wizard label strong {
396
    position:relative;
397
    top:-1px;
398
    font-size: 80%;
399
    font-weight: normal;
400
}
401

    
402
#wizard label em {
403
    font-size:75%;
404
    color:#666;
405
    font-style:normal;
406
}
407

    
408
#wizard .text {
409
    width: 270px;
410
    padding: 5px;
411
    margin-top: 10px;
412
    border: 1px solid #ccc;
413
    color: #456;
414
    letter-spacing: 1px;
415
}
416

    
417
#wizard select {
418
    border:1px solid #ccc;
419
    width:94%;
420
    padding:4px;
421
    display: none;
422
}
423

    
424
#wizard .double label {
425
    width:50%;
426
    float:left;
427
}
428

    
429
#wizard .double .text {
430
    width:93%;
431
}
432

    
433
#wizard .clearfix {
434
    clear:left;
435
    padding-top:10px;
436
}
437

    
438
#wizard .right {
439
    float:right;
440
}
441

    
442
#wizard .error {
443
    border:1px solid red;
444
}
445

    
446
#wizard a:hover div.image {
447
    background-color: #C5DEE9;
448
}
449

    
450
.selecteddiv {
451
    background-color: #C5DEE9 !important;
452
}
453

    
454
#wizard label a:hover strong {
455
    color: black;
456
}
457

    
458
#wizard div.image span.size {
459
    font-size: 75%;
460
    color: #666;
461
}
462

    
463
#wizard div.image .radio {
464
    float: left;
465
    margin-top: 10px;
466
}
467

    
468
#wizard div.image span.image-id, #wizard div.image span.description {
469
    font-size: 75%;
470
    color: #666;
471
    font-weight: normal;
472
    display:inline;
473
}
474

    
475
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
476
    color: black;
477
}
478

    
479
#wizard .cost {
480
    color: #79A4C1;
481
    margin-top: 40px;
482
    clear:both;
483
    margin-left: 15px;
484
    font-size: 95%;
485
}
486

    
487
#wizard #status {
488
    height: 50px;
489
    background-color: #4085A5;
490
}
491

    
492
#wizard .headernumber {
493
    font-size: 410%;
494
}
495

    
496
#wizard .headerbody {
497
    font-size: 120%;
498
    font-weight: normal;
499
    display: inline;
500
    top: -15px;
501
    position: relative;
502
}
503

    
504
#wizard .first {
505
    left: -10px;
506
}
507

    
508
#wizard .checked {
509
    color: #64a6c4 !important;
510
}
511

    
512
#wizard .li-2 {
513
    margin-top: -1px !important;
514
}
515

    
516
#wizard .img-check {
517
    margin-bottom: 8px;
518
    margin-left: -8px;
519
}
520

    
521
#wizard .li-1 .img-check {
522
    margin-left: 2px;
523
}
524

    
525
#wizard .topruler, #networks-wizard .topruler, #wizard .bottomruler, #networks-wizard .bottomruler {
526
    background-color: #CDE2EC;
527
    color: #CDE2EC;
528
    border: 0 none;
529
    height: 4px;
530
    margin-left: -1px;
531
    width: 447px;
532
    margin-bottom: 6px;
533
    margin-top: 4px;
534
}
535

    
536
#wizard .bottomruler, #networks-wizard .bottomruler {
537
    margin-top:6px;
538
}
539

    
540
#networks-wizard .topruler, #networks-wizard .bottomruler {
541
    width: 455px;
542
    float: left;
543
}
544

    
545
#wizard #cancel, #networks-wizard .cancel {
546
    background-color: #4085A5;
547
    border-color: #4085A5;
548
    text-align: center !important;
549
}
550

    
551
#wizard #cancel:hover, #networks-wizard .cancel:hover {
552
    background-color: #7DB4CD;
553
    border-color: #7DB4CD;
554
}
555

    
556
#wizard #start, #networks-wizard .create {
557
    text-align: center;
558
    background-color: #FF7F2A;
559
    border-color: #FF7F2A;
560
}
561

    
562
:focus {
563
    outline: none;
564
    -moz-outline-style: none;
565
}
566

    
567
#wizard .img-next {
568
    margin: 0 -4px -1px 8px;
569
}
570

    
571
#wizard .img-prev {
572
    margin: 0 8px -1px -4px;
573
}
574

    
575
#networks-wizard .create {
576
    float:right;
577
    width: 140px;
578
}
579

    
580
.overlay-networks-create .form-actions {
581
    float: right;
582
    margin-top: -26px !important;
583
}
584

    
585
#wizard #start:hover, #networks-wizard .create:hover {
586
    background-color: #FF9651;
587
    border-color: #FF9651;
588
}
589

    
590
#wizard .separator-end {
591
    position: absolute;
592
    background-color: #387693;
593
    height: 5px;
594
    margin-left: -14px;
595
    margin-top: 382px;
596
    width: 550px;
597
}
598

    
599
.page ul {
600
    height: 270px;
601
    overflow: auto;
602
}
603

    
604
.panes ul.pane {
605
    height: 220px;
606
}
607

    
608
#wizard #tabscontainer {
609
    background-color: #CDE2EC;
610
    height: 20px;
611
    width: 448px;
612
}
613

    
614
.page ul.tabs {
615
    overflow: hidden;
616
    height: auto;
617
    margin-bottom: -1px;
618
    margin-top: -1px;
619
}
620

    
621
.page ul.tabs li {
622
    float: right;
623
    margin: 0 0.2em;
624
}
625

    
626
#status li {
627
    float: left;
628
    color: #387693;
629
    padding: 0 1px 0 37px;
630
    bottom: 0px;
631
}
632

    
633
#status li.active .headernumber {
634
    color: #FFFFFF;
635
}
636

    
637
#status li.active .headerbody {
638
    color: #FFFFFF;
639
}
640

    
641
div.image-container {
642
    border-bottom: 1px solid #CCCCCC;
643
    margin-left: 10px;
644
    margin-right: 10px;
645
}
646

    
647
#page2-container {
648
    background-color: #ECF4F8;
649
    height: 193px;
650
    margin-top: 3px;
651
    padding-top: 25px;
652
}
653

    
654
#page3-container {
655
    background-color: #ECF4F8;
656
    height: 245px;
657
    margin-bottom: 32px;
658
    padding-left: 50px;
659
}
660

    
661
/* slider root element */
662
.slider {
663
    border: 1px solid #666;
664
    cursor: pointer;
665
    display: inline !important;
666
    float: left;
667
    margin: 5px 0 20px 10px;
668
    position: relative;
669
    width: 250px;
670
}
671

    
672
.sliders {
673
    float:left;
674
    width: 40px;
675
    margin-left: 10px;
676
    margin-top: 3px;
677
}
678

    
679
.units {
680
    padding-left:10px;
681
}
682

    
683
.slider-container {
684
    padding-bottom: 15px;
685
    margin-left: 5px;
686
}
687

    
688
/* drag handle */
689
.handle {
690
    -moz-box-shadow: 0 0 2px #000000;
691
    background: url("./h30.png") repeat-x scroll 0 0 #FFFFFF;
692
    border: 1px solid #000000;
693
    cursor: move;
694
    display: block;
695
    height: 10px;
696
    margin-top: -8px;
697
    position: absolute;
698
    width: 8px;
699
}
700

    
701
/* progress bar (enabled with progress: true) */
702
.progress {
703
    height: 3px;
704
    background-color: #387693;
705
}
706

    
707
/* the input field */
708
.range {
709
    border: 1px solid #387693;
710
    float: left;
711
    font-size: 100%;
712
    margin: -3px 0 0 15px;
713
    padding: 2px 5px 2px 0;
714
    text-align: right;
715
    width: 50px;
716
}
717

    
718
.selectedrange {
719
    border-color: #5599FF;
720
}
721

    
722
#credits-indicator {
723
    background-color: #ECF4F8;
724
    float: none;
725
    margin: 0 0 0 10px;
726
    border: 1px solid #387693;
727
    color: #387693;
728
}
729

    
730
/* machines */
731
.machine-container {
732
    position:relative;
733
}
734

    
735
.icon .machine-container.last .machine-data-cont, .machine-container:last-child .machine-data-cont {
736
    margin-bottom:0;
737
    padding-bottom: 0;
738
    border-bottom: none;
739
}
740

    
741
.icon .machine-container.last .machine-data, .machine-container:last-child .machine-data {
742
    border-bottom: none;
743
}
744

    
745
.icon .machine-container .subtitle {
746
    font-size: 0.70em;
747
    color: #222;
748
    line-height: 23px;
749
    height: 23px;
750
    margin-top: -5px;
751
}
752

    
753
.icon .machine-container .subtitle {
754
    
755
}
756

    
757
.icon .machine-container .info {
758
    margin-top: 2px;
759
    height: 17px;
760
}
761

    
762
.icon .machine-container .building-progress {
763
    vertical-align: top;
764
}
765

    
766
.ip-version-label {
767
    font-size: 0.8em;
768
    padding: 0.3em;
769
    background-color: #C4DDE9;
770
    color: #000;
771
}
772

    
773
.icon .machine-data {
774
    width: 520px;
775
    float: left;
776
    background-color: transparent;
777
}
778

    
779
.icon .machine-info {
780
    padding: 10px 0;
781
}
782

    
783
.icon .machine-details .name {
784
    height: 28px;
785
}
786

    
787
.icon .machine-connect {
788
    width: 80px;
789
    float: left;
790
}
791

    
792
.icon .machine-details {
793
    width: 310px;
794
    float: left;
795
    margin-top: -6px;
796
}
797

    
798
.icon .state {
799
    font-size: 98%;
800
    width: 120px;
801
    margin-right: 10px;
802
    float: left;
803
    height: 55px;
804
    margin-top: -5px;
805
}
806

    
807
.vm-actions {
808
    position: relative;
809
}
810

    
811
.icon .vm-actions {
812
    /*display: none;*/
813
}
814

    
815
.icon .vm-actions, .network .vm-actions {
816
    width: 180px;
817
    height: 78px;
818
    float: left;
819
}
820
.network .vm-actions {
821
    width: 185px;
822
}
823

    
824
.icon .machine-container:hover .machine-data {
825
    background-color:#A1C8DB !important;
826
}
827

    
828
.icon .machine-container:hover .vm-actions {
829
    display: block;
830
}
831

    
832
.vm-actions {
833
    font-size: 75%;
834
}
835

    
836
.vm-actions a {
837
    color: black;
838
    height: 15px;
839
    margin: 0 0 1px 4px;
840
    padding: 1px;
841
    padding-left: 8px;
842
    display: block;
843
}
844

    
845
.vm-actions a:hover {
846
    background-color:#A1C8DB;
847
    color: #fff;
848
    border-left: 4px solid #7DB4CD;
849
    padding-left: 4px;
850
}
851

    
852
.vm-actions a.selected {
853
    color: #FF7F2A !important;
854
}
855

    
856
.vm-actions a.selected {
857
    background-color:transparent;
858
}
859

    
860
.vm-actions .action-container {
861
    position: relative;
862
}
863

    
864
.vm-actions .action-container .confirm_single {
865
    position: absolute;
866
    right: -20px;
867
    top: -2px;
868
}
869

    
870
div.list div.actions a.enabled.destroy {
871
}
872

    
873
.vm-actions .action-container.destroy {
874
    position: absolute;
875
    bottom: -2px;
876
    width: 100%;
877
    left: 0px;
878
    background: transparent;
879
}
880

    
881
.vm-actions .action-container.destroy a {
882
}
883

    
884
.icon .light-background .machine-data, div.network.light-background, div.network.expand {
885
    background-color:#aed2e3 !important;
886
}
887

    
888
.single .light-background {
889
    background-color:#aed2e3;
890
}
891

    
892
.icon .machine-data-cont {
893
    margin-bottom: 5px;
894
    padding-bottom: 5px;
895
    border-bottom: 1px solid #D1E7F0;
896
    width: 520px;
897
    float: left;
898
}
899
.icon .terminated .machine-data-cont {
900
    border-color: #B6CED6;
901
}
902

    
903
.machine a {
904
    font-weight: normal;
905
    text-decoration: none;
906
}
907

    
908
.machine span.name, .machine span.ip {
909
    font-size: 75%;
910
    color: black;
911
    margin-top: 6px;
912
}
913

    
914
.machine span.name {
915
    font-weight: bold;
916
}
917

    
918
.oldValue {
919
    display:none;
920
}
921

    
922
.state {
923
}
924

    
925
.state div {
926
    text-align: right;
927
    margin-right: 3px;
928
}
929

    
930
/* icon view actions */
931
div.machine div.actions a.shutdown-padding {
932
    margin-bottom: 22px;
933
}
934

    
935
div.actions a.enabled:hover{
936
    color: black !important;
937
    text-decoration: underline;
938
    display: block;
939
}
940

    
941
div.machine:hover .actions a {
942
    visibility: visible;
943
}
944

    
945
div.machine div.display a{
946
    visibility: visible;
947
}
948

    
949
div.machine div.actions .disabled {
950
    display: none;
951
}
952

    
953
div.single-container div.vm-actions .disabled {
954
    display: none;
955
}
956

    
957
div.machine div.actions .disabled {
958
    display: none;
959
}
960

    
961
div.connect-arrow {
962
    background: url(/static/connect-arrow.png) no-repeat;
963
    height: 28px;
964
    width:14px;
965
    position: absolute;
966
    display: none;
967
}
968

    
969
.machine div.connect-arrow {
970
    display: none;
971
    left: -3px;
972
    position: absolute;
973
    top: 9px;
974
}
975

    
976
div.connect-arrow:hover, div.connect-arrow.border-hover, div.connect-arrow-ie, div.connect-arrow.border-ie {
977
    cursor: pointer;
978
    background: url(/static/connect-arrow-hover.png) no-repeat;
979
    height: 28px;
980
    width:26px;
981
}
982

    
983
div.connect-border {
984
    opacity: 0.8;
985
    filter: alpha(opacity = 80);
986
    background-color:#4fe0c3;
987
    height:28px;
988
    width: 12px;
989
    position: absolute;
990
    display: none;
991
}
992

    
993
div.connect-border:hover {
994
    cursor: pointer;
995
}
996

    
997
.machine div.connect-border {
998
    display: none;
999
    left: -15px;
1000
    position: absolute;
1001
    top: 9px;
1002
}
1003

    
1004
.standard .machine .logo {
1005
    float: left;
1006
    width: 50px;
1007
    height: 54px;
1008
    margin: 4px 14px 0;
1009
}
1010
.machine .logo {
1011
    background-image: url("./icons/machines/medium/unknown-sprite.png");
1012
    background-repeat: no-repeat;
1013
    cursor: pointer;
1014
}
1015

    
1016
.standard .machine .single-image-state1 {
1017
    background-position: 0px 0;
1018
}
1019

    
1020
.standard .machine .single-image-state3 {
1021
    background-position: -100px 0;
1022
}
1023

    
1024
.standard .machine .single-image-state4 {
1025
    background-position: -150px 0;
1026
}
1027

    
1028
.standard .machine .single-image-state2 {
1029
    background-position: -50px 0;
1030
}
1031

    
1032
.standard .running .machine .logo {
1033
   cursor: pointer;
1034
}
1035

    
1036
.list .machine img {
1037
    margin: 0;
1038
}
1039

    
1040
.icon div.ip, .icon div.ips {
1041
    font-size: 75%;
1042
}
1043

    
1044
div.indicators {
1045
    margin-right: 2px !important;
1046
}
1047
div.indicator1, div.indicator2, div.indicator3, div.indicator4 {
1048
    background-color: #63cf1c;
1049
    width:10px;
1050
    height:11px;
1051
    clear: none;
1052
    float:right;
1053
    -webkit-transition: background-color .75s ease-out;
1054
    -o-transition: background-color .75s ease-out;
1055
    -moz-transition: background-color .75s ease-out;
1056
    transition: color .75s ease-out;
1057
}
1058

    
1059
.view-separator {
1060
    color:#5F8DD3;
1061
}
1062

    
1063
.running.disabled {
1064
    background: transparent;
1065
}
1066

    
1067
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
1068
    background-color: #63cf1c;
1069
}
1070

    
1071
.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
1072
    background-color: #d4aa00;
1073
}
1074

    
1075
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
1076
    background-color: #ff0000;
1077
}
1078

    
1079
.terminated-state .indicator1, .terminated-state .indicator2, .terminated-state .indicator3, .terminated-state .indicator4 {
1080
    background-color: #5e1616;
1081
}
1082

    
1083
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
1084
    background-color: #FF7F2A;
1085
}
1086

    
1087
.destroying-state .indicator1, .destroying-state .indicator3, .destroying-state .indicator2, .destroying-state .indicator4 {
1088
    background-color: #4085a5 !important;
1089
}
1090

    
1091
.shutting-state .indicator1, .shutting-state .indicator3, .shutting-state .indicator2, .shutting-state .indicator4 {
1092
    background-color: #940606;
1093
}
1094

    
1095
.starting-state .indicator1, .starting-state .indicator2, .starting-state .indicator3, .starting-state .indicator4 {
1096
    background-color: #9ed976;
1097
}
1098

    
1099
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
1100
    background-color: #63cf1c;
1101
}
1102

    
1103
.network-indicator.in-progress .indicator1, .network-indicator.in-progress .indicator2, .network-indicator.in-progress .indicator3, .network-indicator.in-progress .indicator4 {
1104
    background-color: #FF7F2A;
1105
}
1106

    
1107
.running, .terminated {
1108
    background: #EFF7FA repeat scroll 0 0;
1109
    padding-bottom: 15px;
1110
}
1111

    
1112
.running, #machinesview-list, .single {
1113
}
1114

    
1115
.terminated {
1116
    background:#DCE5E8  repeat scroll 0 0;
1117
    padding-top: 15px;
1118
    margin-top: 15px;
1119
}
1120

    
1121
span.rename {
1122
    background-repeat: no-repeat;
1123
    color: transparent;
1124
    font-size: 75%;
1125
    font-weight: normal;
1126
    margin-left: 10px;
1127
    padding-left: 10px;
1128
    text-align: left;
1129
    cursor: pointer;
1130
}
1131

    
1132
div.name:hover span.rename, span.rename_hovered {
1133
    color: #3D3D3D;
1134
    margin-top: 0.4em;
1135
    background-image: url(./pencil.png);
1136
    background-position: 0 3px;
1137
}
1138

    
1139
.machine div.info {
1140
    font-size: 75%;
1141
}
1142

    
1143
div.machine:hover div.info-header, div.machine:hover div.toggler div.down {
1144
    background-color: #84b7d0;
1145
}
1146

    
1147
div.machine div.info-label.darker, .single div.tags-label.darker, div.network .darker {
1148
    background-color: #5CA1C0;
1149
}
1150

    
1151
.machine div.info div.info-label {
1152
    font-size: 75%;
1153
    height:16px;
1154
    width: 30px;
1155
    padding: 1px 0 0 5px;
1156
}
1157

    
1158
.machine div.info div.toggler, .single div.tags div.toggler, div.network div.toggler {
1159
    width:15px;
1160
    height:17px;
1161
    margin-top: -11px;
1162
    margin-left: 37px;
1163
}
1164

    
1165
div.network div.toggler {
1166
    margin-left: 90px;
1167
}
1168

    
1169
.machine div.info div.down {
1170
    background: url(/static/down-arrow.png) no-repeat scroll 1px 1px;
1171
}
1172

    
1173
.single div.tags div.down {
1174
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1175
}
1176

    
1177
.network div.network-machines div.down {
1178
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1179
}
1180

    
1181
.network div.network-machine div.firewall div.down {
1182
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1183
}
1184

    
1185
.machine div.info div.up {
1186
    background: url(/static/up-arrow.png) no-repeat scroll 1px 0;
1187
}
1188

    
1189
.single div.tags div.up {
1190
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1191
}
1192

    
1193
.network div.network-machines div.up {
1194
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1195
}
1196

    
1197
.network div.network-machine div.firewall div.up {
1198
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1199
}
1200

    
1201
button {
1202
    background-color: #87AADE;
1203
    border: 1px solid #87AADE;
1204
    color: #FFFFFF;
1205
    cursor: pointer;
1206
    height: 23px;
1207
    width: 120px;
1208
}
1209

    
1210
button.next {
1211
    background-color: #4085A5;
1212
    border-color: #4085A5;
1213
    text-align: right;
1214
}
1215

    
1216
button.next:hover {
1217
    background-color: #7DB4CD;
1218
    border-color: #7DB4CD;
1219
}
1220

    
1221
button.prev {
1222
    background-color: #4085A5;
1223
    border-color: #4085A5;
1224
    margin-left: -1px;
1225
    text-align: left;
1226
}
1227

    
1228
button.prev:hover {
1229
    background-color: #7DB4CD;
1230
    border-color: #7DB4CD;
1231
}
1232

    
1233
.image-logo {
1234
    float: left;
1235
    margin-right: 1em;
1236
    margin-left: 1.5em;
1237
    margin-top: 4px;
1238
}
1239

    
1240
.icon div.image {
1241
    clear: both;
1242
    display: block;
1243
    margin-bottom: 3px;
1244
    margin-top: 3px;
1245
    padding: 5px;
1246
}
1247

    
1248
div#view-select {
1249
    clear: both;
1250
    color: white;
1251
    position: absolute;
1252
    right: 15px;
1253
    top: 15px;
1254
}
1255

    
1256
a.machines_view_link {
1257
    text-decoration: none;
1258
    font-size: 0.7em;
1259
    padding: 4px;
1260
    padding-right: 8px;
1261
    color: #5CA1C0;
1262
    margin-left: 5px;
1263
    background-repeat: no-repeat;
1264
    background-color: #C9DFEA;
1265
}
1266

    
1267
a.machines_view_link span {
1268
    float: left;
1269
}
1270

    
1271
a.machines_view_link span.ico {
1272
    width: 17px;
1273
    height: 15px;
1274
    margin-right: 10px;
1275
    background-position: -36px 0;
1276
}
1277

    
1278
a.machines_view_link:hover {
1279
    background-color: #A1C8DB;
1280
    color: #fff;
1281
}
1282
a.machines_view_link:hover span.ico {
1283
    background-position: -0px 0px;   
1284
}
1285

    
1286
a.machines_view_link.activelink span.ico {
1287
    background-position: -18px 0px;
1288
}
1289
a.machines_view_link.activelink {
1290
    color: #fff;
1291
    background-color: #5CA1C0;
1292
}
1293

    
1294
div#view-select a {
1295
    display: block;
1296
    float: left;
1297
}
1298

    
1299
a#list:hover {
1300
    background: #5f8dd3;
1301
}
1302

    
1303
a#machines_view_icon_link:active, a#machines_view_list_link:active {
1304
    color:white;
1305
}
1306

    
1307
a#machines_view_icon_link span.ico {
1308
    background-image: url(./icon-view.png);
1309
}
1310

    
1311
a#machines_view_list_link span.ico {
1312
    background-image: url(./list-view.png);
1313
}
1314

    
1315
a#machines_view_single_link span.ico {
1316
    background-image: url(./single-view.png);
1317
}
1318

    
1319
#machinetype {
1320
    background-color: #CDE2EC;
1321
    height: 25px;
1322
    margin-bottom: 0px !important;
1323
}
1324

    
1325
div.machine-type {
1326
    float: left;
1327
    margin: 4px 18px 20px;
1328
}
1329

    
1330
.machine-type .active {
1331
    color: #FFFFFF
1332
}
1333

    
1334
div.machine-type label.disabled {
1335
    color: #aaa !important;
1336
}
1337

    
1338
#machinesview {
1339
}
1340

    
1341
#machines-pane {
1342
}
1343

    
1344
.list#machinesview {
1345
    margin-left: -20px;
1346
    display:none;
1347
}
1348

    
1349
#machinesview-list.list {
1350
    background: #EFF7FA  repeat scroll 0 0;
1351
    padding-left: 15px;
1352
    padding-bottom: 15px;
1353
}
1354

    
1355
#machinesview_content {
1356
    display:none;
1357
}
1358

    
1359
.list-machines {
1360
    min-width: 515px;
1361
}
1362

    
1363
#emptymachineslist {
1364
    background-color: #6BA9C6;
1365
    color: #A0A0A0;
1366
    display: none;
1367
    padding: 65px 150px 35px;
1368
    text-align: justify;
1369
    margin-top: -70px;
1370
}
1371

    
1372
#welcomeheader {
1373
    color:white;
1374
    text-align: center;
1375
}
1376

    
1377
.welcomebody {
1378
    color: white;
1379
    font-size:80%;
1380
}
1381

    
1382
.welcomebody a {
1383
    color: white;
1384
}
1385

    
1386
.welcomefooter {
1387
    color: white;
1388
    font-size:60%;
1389
}
1390

    
1391
.welcomefooter a {
1392
    color: white;
1393
}
1394

    
1395
.emptycreatecontainer {
1396
    margin-left: 430px !important;
1397
    position: absolute;
1398
    margin-top: 5px !important;
1399
    width: 180px;
1400
    background-color: #CCCCCC;
1401
    padding: 5px;
1402
    padding-left: 10px;
1403
}
1404

    
1405
.emptycreate {
1406
    margin: 20px 10px 5px 0 !important;
1407
}
1408

    
1409
#createbody {
1410
    display:none;
1411
    font-size: 80%;
1412
}
1413

    
1414
div.list label img {
1415
    margin: 5px 5px -3px 0;
1416
}
1417

    
1418
div.list label {
1419
    color: #3D3D3D;
1420
    font-size: 75%;
1421
}
1422

    
1423
div.list .state {
1424
    margin-top: 7px;
1425
    margin-right: 10px;
1426
}
1427

    
1428
div.list table tbody {
1429
    margin-top: 8px;
1430
}
1431

    
1432
div.list table tr.checked td {
1433
    background-color: #A1C8DB !important;
1434
}
1435

    
1436
div.list table tr:hover td,
1437
div.list table tr.inactive:hover td,
1438
div.list table tr.error:hover td {
1439
    background-color: #A1C8DB;
1440
    color: #fff;
1441
}
1442

    
1443
div.list table td.name {
1444
    min-width: 170px;
1445
}
1446

    
1447
div.list table td.status {
1448
    font-size: 0.9em !important; 
1449
    text-align: right;
1450
    min-width: 90px;
1451
    color: #000;
1452
}
1453

    
1454
div.list table td.flavor {
1455
    font-size: 0.8em;
1456
}
1457

    
1458
div.list table td {
1459
    border-bottom: 1px solid #DDD;
1460
}
1461

    
1462
div.list table tr.error td.status {
1463
    color: #800000 !important;
1464
    font-weight: bold;
1465
}
1466

    
1467
div.list table tr.error td {
1468
    background-color: #DCE5E8;
1469
}
1470

    
1471
div.list table tr.inactive td {
1472
    background-color: #DCE5E8;
1473
}
1474

    
1475
div.list .stopped {
1476
    margin-top: 8px;
1477
}
1478

    
1479
/* root element for tabs  */
1480
#wizard ul.tabs {
1481
    margin-right: -1px;
1482
    float: right;
1483
}
1484

    
1485
#wizard div.panes {
1486
    height: 247px;
1487
    clear:both;
1488
    margin-top: 3px;
1489
}
1490

    
1491
.typebody {
1492
    font-size: 80%;
1493
    font-weight: normal;
1494
    position: relative;
1495
    top: -3px;
1496
}
1497

    
1498
.typehover {
1499
    color: #FFFFFF;
1500
}
1501

    
1502
#label-name {
1503
    margin-top: 10px;
1504
}
1505

    
1506
/* single tab */
1507
#wizard ul.tabs li {
1508
    margin-bottom: 0;
1509
    list-style-type:none;
1510
    float: left;
1511
}
1512

    
1513
/* link inside the tab. uses a background image */
1514
#wizard ul.tabs a {
1515
    display:block;
1516
    padding: 0.2em 0.5em 0.1em 0.4em;
1517
    text-decoration:none;
1518
    color: #FFFFFF;
1519
    position:relative;
1520
    top:1px;
1521
    outline:0;
1522
    background-color: transparent;
1523
    text-align: center;
1524
    width: 100px;
1525
    white-space: nowrap;
1526
    height: 17px;
1527
}
1528

    
1529
#wizard ul.tabs a:hover {
1530
    color: #FFFFFF;
1531
    background-color:#4085A5;
1532
}
1533

    
1534
/* selected tab */
1535
#wizard ul.tabs a.current {
1536
    color: white;
1537
    background-color: #7DB4CD;
1538
    cursor: default;
1539
}
1540

    
1541
#wizard #standard-images {
1542
    background-color: #ECF4F8;
1543
}
1544

    
1545
div.list div.actions {
1546
    display: none;
1547
    clear: left;
1548
    float: right;
1549
    margin-right: 15px;
1550
    margin-top: 37px;
1551
    text-align: right;
1552
    width: 120px;
1553
}
1554

    
1555
div.list div.actions a {
1556
    clear: left;
1557
    color: #A1A1A1;
1558
    display: block;
1559
    font-size:75%;
1560
    margin-bottom: 2px;
1561
}
1562

    
1563
div.list div.actions a:hover {
1564
    background-color: transparent;
1565
}
1566

    
1567
div.list div.actions a.enabled {
1568
    color: #3D3D3D;
1569
}
1570

    
1571
div.list div.actions a.enabled:hover{
1572
    cursor: pointer;
1573
    color: black;
1574
    text-decoration: underline;
1575
}
1576

    
1577
div.list div.actions a.selected {
1578
    color: #FF7F2A !important;
1579
}
1580

    
1581
input.machine {
1582
    width: 13px;
1583
    height: 13px;
1584
    top: -1px;
1585
    overflow: hidden;
1586
}
1587

    
1588
.description-container {
1589
    display: inline-block;
1590
    position: relative;
1591
    width: 300px;
1592
}
1593

    
1594
#wizard .button-container {
1595
    height: 20px;
1596
}
1597

    
1598

    
1599
/* metadata dropdown combo */
1600
.meta-key {
1601
    margin-right: 18px;
1602
    float:left;
1603
}
1604

    
1605
/* notification box */
1606
#yes-no {
1607
    height: 150px;
1608
    z-index: 9999;
1609
    border-bottom: 5px solid #4085A5;
1610
}
1611

    
1612
#yes-no p, #yes-no button {
1613
    margin-top: 15px;
1614
}
1615

    
1616
#error-success, .notification-box {
1617
    z-index: 9999;
1618
    border-bottom: 5px solid #4085A5;
1619
    min-height: 150px;
1620
    top: 50px !important;
1621
    position: absolute;
1622
}
1623

    
1624
#error-success p, .notification-box p {
1625
    margin-top: 5px;
1626
}
1627

    
1628
.error-report {
1629
    display: none;
1630
}
1631

    
1632
#error-success .error-report {
1633
    position: absolute;
1634
    top: 140px;
1635
    right: 40px;
1636
}
1637

    
1638
.error .error-report {
1639
    display: block;
1640
}
1641

    
1642
#error-success .error-report .errormsg {
1643
    display: none;
1644
}
1645

    
1646
#error-success .error-report .success {
1647
    display: none;
1648
}
1649

    
1650
#error-success .error-report .sending {
1651
    display: none;
1652
}
1653

    
1654
#error-success .error-report .send-btn {
1655
    color: #4085A5;
1656
    text-decoration: underline;
1657
    cursor: pointer;
1658
}
1659

    
1660
#error-success strong, .notification-box strong {
1661
    color: #F49C1A;
1662
}
1663

    
1664
#error-success .close, .notification-box .close {
1665
    background-image: url("./close-popup.png");
1666
    background-repeat: no-repeat;
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
    width:auto;
1682
}
1683

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

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

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

    
1707

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

    
1721
#error-success .popup-body, .notification-box .popup-body {
1722
    background: url("./popup-bg.png") repeat-x scroll 0 0 transparent;
1723
    margin-left: -16px;
1724
    margin-right: -16px;
1725
    margin-top: 1px;
1726
    min-height: 142px;
1727
    padding-top: 10px;
1728
}
1729

    
1730
#error-success .popup-body-inner, .notification-box .popup-body-inner {
1731
    background: url("./popup-inner-bg.png") repeat-x scroll 0 0 transparent;
1732
    font-size: 80%;
1733
    min-height: 120px;
1734
    margin-left: 20px;
1735
    padding-left: 15px;
1736
    width: 460px;
1737
}
1738

    
1739
#error-success .popup-separator, .notification-box .popup-seperator {
1740
    background-color: #74AEC9;
1741
    height: 1px;
1742
    font-size:1%;
1743
    width: 442px;
1744
    margin-bottom: 30px;
1745
}
1746

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

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

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

    
1764
#error-success .password-header, .notification-box .password-header {
1765
    margin-bottom: 5px;
1766
}
1767

    
1768
#error-success .password, .notification-box .password {
1769
    color: #447821;
1770
}
1771

    
1772
#error-success .popup-details, .notification-box .popup-details {
1773
    border: 2px solid #FF7F2A;
1774
    float: left;
1775
    margin-left: 10px;
1776
    padding: 2px;
1777
}
1778

    
1779
#error-success.success .popup-details, .notification-box .popup-details {
1780
    border: none !important;
1781
    float: none !important;
1782
    margin-left: none !important;
1783
    margin-top: 10px;
1784
}
1785

    
1786
#error-success.success .popup-separator, .notification-box .popup-seperator {
1787
    margin-bottom: 14px !important;
1788
}
1789

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

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

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

    
1807
.more-details {
1808
    display: block;
1809
}
1810

    
1811
.notification-box h3 span.header-box {
1812
    background: transparent;
1813
}
1814

    
1815
.notification-box .machine-now-building {
1816
    padding: 20px 0;
1817
}
1818

    
1819
.notification-box .header-box {
1820
    width: auto !important;
1821
}
1822

    
1823
.notification-box .password {
1824
    text-align: center;
1825
}
1826
.notification-box .password a:hover {
1827
    background-color: #447821;
1828
    color: #fff;
1829
}
1830

    
1831
.notification-box .password a {
1832
    padding: 0.2em;
1833
    text-align: center;
1834
    color: #447821;
1835
    font-weight: bold;
1836
    font-size: 1.2em;
1837
    text-decoration: none;
1838
}
1839

    
1840
.popup-details a:link, .popup-details a:visited {
1841
    color: black;
1842
}
1843

    
1844
.destroy .confirm_single .yes {
1845
    background-color: #880000;
1846
    color: #fff;
1847
}
1848

    
1849
.destroy .confirm_single .no {
1850
    background-color: #CC0000;
1851
    color: #880000;
1852
}
1853

    
1854
.destroy .confirm_single .yes:hover {
1855
    background-color:#CC0000;
1856
}
1857

    
1858
div.list div.actions a.selected#action-destroy {
1859
    color: #880000 !important;
1860
}
1861

    
1862
.vm-actions .destroy a#action-destroy.selected {
1863
    color: #880000 !important;
1864
}
1865

    
1866
/* Confirmation boxes */
1867
div.confirm_single, div.confirm_multiple, div.action_error {
1868
    display: none;
1869
    color: black;
1870
}
1871

    
1872
div.confirm_single button, div.confirm_multiple button, div.action_error button {
1873
    font-size: 100%;
1874
    cursor: pointer;
1875
    color: black;
1876
    height: 20px !important;
1877
}
1878

    
1879
div.confirm_single button {
1880
    border: none;
1881
    font-family: Arial, Helvetica, sans-serif;
1882
    line-height: 1em;
1883
    vertical-align: middle;
1884
    padding: 2px 6px;
1885
    padding-bottom:4px;
1886
    height: 15px;
1887
}
1888

    
1889
div.confirm_single button.yes {
1890
    width: 90px;
1891
    background-color:#FF7F2A;
1892
}
1893

    
1894
div.confirm_single button.yes:hover {
1895
    background-color: #FF9955;
1896
}
1897

    
1898
div.confirm_single button.no {
1899
    width: 20px;
1900
    margin-left:-5px;
1901
    background-color: #FF9955;
1902
    color:#d95d0a;
1903
}
1904

    
1905
div.confirm_single button.no:hover {
1906
    color: white;
1907
}
1908

    
1909
div.confirm_multiple_cont {
1910
    background-color: #406A7D;
1911
    margin-top: 0px;
1912
    padding: 3px;
1913
    border-top: 1px solid #444;
1914
    border-bottom: 1px solid #444;
1915
    padding-top:0px;
1916
    margin-top: -1px;
1917
}
1918

    
1919
div.confirm_reboot_required {
1920
}
1921

    
1922
div.confirm_multiple {
1923
    font-size: 65%;
1924
    z-index: 8000;
1925
    /*height: 28px;*/
1926
    width: 700px;
1927
    margin-top: 15px;
1928
}
1929

    
1930
div.confirm_multiple p {
1931
    float: left;
1932
    color: #FFF;
1933
    font-weight: bold;
1934
    margin: 7px 0 0 10px;
1935
}
1936

    
1937
#networks-pane {
1938
    display: none;
1939
}
1940

    
1941
#networks-pane div.confirm_multiple p {
1942
    margin: 7px 0 0 100px;
1943
}
1944

    
1945
div.confirm_multiple button {
1946
    float: right;
1947
    background-color: transparent;
1948
    border: 1px solid #5CA1C0;
1949
    margin: 4px 5px 0 0;
1950
}
1951

    
1952
div.confirm_multiple button.yes {
1953
    border-color: #FF7F2A;
1954
    padding: 0 12px;
1955
}
1956

    
1957
div.confirm_multiple button.yes:hover {
1958
    background-color: #FF7F2A;
1959
}
1960

    
1961
div.confirm_multiple button.no {
1962
    padding: 0px 16px;
1963
}
1964

    
1965
div.confirm_multiple button.no:hover {
1966
    background-color: #5CA1C0;
1967
}
1968

    
1969
div.action_error {
1970
    width: 120px;
1971
    margin: 14px 0 0 37px;
1972
    background-color: #981D1D;
1973
    font-size: 75%;
1974
    z-index:1;
1975
    color: #FFF;
1976
    position:absolute;
1977
    top: 0px;
1978
}
1979

    
1980
div.action_error .action-error-msg {
1981
    background-color: #fff;
1982
    color: #981D1D;
1983
    border: 1px solid #981D1D;
1984
    padding: 4px;
1985
}
1986
div.action_error .action-error-msg .action {
1987
    font-weight: bold;
1988
}
1989

    
1990
div.action_error .action-error-msg {
1991
    font-size: 0.8em;
1992
}
1993

    
1994
.action_error button {
1995
    width: 75px;
1996
    background-color: transparent;
1997
    border: 1px solid;
1998
    border-color: #981D1D;
1999
    color: #fff !important;
2000
    float: left;
2001
}
2002

    
2003
div.action_error button.details {
2004
    padding-right: 5px;
2005
    width: 100px;
2006
    border-bottom: 2px solid #981D1D;
2007
    border-right: 1px solid #981D1D;
2008
    border-left: 2px solid #981D1D;
2009
    background-color: #E24B4B;
2010
}
2011

    
2012
div.action_error button.close-action-error {
2013
    background-image: url("./option-action-remove.png");
2014
    background-color: #fff;
2015
    background-repeat: no-repeat;
2016
    background-position: center center;
2017
    width: 20px;
2018
    border-bottom: 2px solid #981D1D;
2019
    border-right: 2px solid #981D1D;
2020
    border-top: 1px solid #981D1D;
2021
}
2022

    
2023
div.action_error button.details:hover {
2024
    background-color: #FF7F2A;
2025
}
2026

    
2027
div#aboutuser{
2028
    float:right;
2029
    clear: both;
2030
    color: #FFFFFF;
2031
    font-size: 75%;
2032
    margin-top: -25px;
2033
}
2034

    
2035
div#user{
2036
    clear: both;
2037
    color: #FFFFFF;
2038
    font-size: 75%;
2039
    margin-top: 38px;
2040
    padding-bottom: 10px;
2041
    z-index: 500;
2042
    position: absolute;
2043
    right:0;
2044
}
2045

    
2046
div#user a{
2047
    color: #FFFFFF;
2048
    text-decoration: none;
2049
}
2050

    
2051
div#user a.current_lang {
2052
    color: #72ADC8;
2053
}
2054

    
2055
div#user .usermenu {
2056
    float: left;
2057
    cursor: pointer;
2058
    overflow: hidden;
2059
    padding-top: 5px;
2060
    margin-top: -5px;
2061
    position: relative;
2062
}
2063

    
2064
div#user .username {
2065
    display: block;
2066
    margin-right: 10px;
2067
    padding-right: 18px;
2068
    padding-left: 4em;
2069
    height: 20px;
2070
    background: url("./down-arrow-light.png") no-repeat right;
2071
    background-position: right 6px;
2072
    font-weight: normal;
2073
}
2074

    
2075
div#user .hovered {
2076
    background: #599EBD;
2077
    overflow: visible;
2078
    border-bottom: 1px solid #C7DFE9;
2079
}
2080

    
2081
div#user .hovered .username {
2082
    background-image: url("./down-arrow-lighter.png");
2083
}
2084

    
2085
div#user .active {
2086
    background-color: #BED5E0 !important;
2087
}
2088

    
2089
div#user .active .username {
2090
    color: #599EBD;
2091
    background-image: url("./down-arrow-lighter.png");
2092
}
2093

    
2094
div#user .useractions {
2095
    display: none;
2096
}
2097

    
2098
div#user .active .useractions {
2099
    display: block;
2100
    text-align: right;
2101
    color: #4085A5;
2102
    background-color: #D0E3ED;
2103
    margin-top:-1px;
2104
    border-top:1px solid #fff;
2105
    position: relative;
2106
    top: 1px;
2107
    box-shadow: 1px 1px 1px #aaa;
2108
    -moz-box-shadow: 1px 1px 1px #aaa;
2109
    -webkit-box-shadow: 1px 1px 1px #aaa;
2110
    z-index: 2000;
2111
}
2112

    
2113
div#user .useractions li {
2114
    padding: 2px 10px;
2115
    border-bottom: 1px solid #efefef;
2116
    text-align: right;
2117
    display: block;
2118
    background-color: transparent;
2119
}
2120

    
2121
div#user .useractions li a {
2122
    color: #4085A5;
2123
    display: inline-block;
2124
    padding:5px 0;
2125
    padding-left: 30px;
2126
    padding-bottom: 6px;
2127
    background-repeat: no-repeat;
2128
    background-position: center left;
2129
}
2130

    
2131
div#user .useractions li.hovered {
2132
    background-color: #E1EFF6;
2133
}
2134

    
2135
div#user .useractions li.last {
2136
    border-bottom: none;
2137
}
2138

    
2139
div#user .useractions .logout a {
2140
    background-image: url("./icon-logout.png");
2141
}
2142

    
2143
div#user .langmenu {
2144
    float: left;
2145
    border-left: 1px solid #ffffff;
2146
    padding-left: 10px;
2147
    margin-left: -1px;
2148
}
2149

    
2150
div#user .langmenu .sep {
2151
    display: inline-block;
2152
    color: #72ADC8;
2153
}
2154

    
2155
.separator {
2156
    background-color: #74AEC9;
2157
    height: 10px;
2158
    width: 700px;
2159
    font-size: 1px;
2160
    line-height: 0px;
2161
}
2162

    
2163
#disks.separator {
2164
    background-color: #dea842;
2165
}
2166

    
2167
#networks.separator {
2168
    background-color: #6c535d;
2169
}
2170

    
2171
.network-machine h5 {
2172
    margin-bottom: 26px;
2173
    margin-top:0px;
2174
}
2175

    
2176
.machine-container .separator {
2177
    width: 508px;
2178
    height: 1px;
2179
    margin-top: 2px;
2180
    background-color: #5CA1C0;
2181
    margin-left: 13px;
2182
}
2183

    
2184
.editbuttons {
2185
    display: block;
2186
    clear: none;
2187
    width: 40px;
2188
    margin-right: 0px;
2189
    padding-top: 2px;
2190
    float: right;
2191
    cursor: pointer;
2192
    position: relative;
2193
    z-index: 1000;
2194
}
2195

    
2196
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2197
    background-color: #84b7d0;
2198
}
2199

    
2200
div.editbuttons div.cancel:hover {
2201
    background-image: url("./cancel-onhover.png");
2202
}
2203

    
2204
.editbuttons .cancel, .editbuttons .save {
2205
    background-repeat: no-repeat;
2206
    color: transparent;
2207
    height: 16px;
2208
    width: 16px;
2209
    float: left;
2210
}
2211

    
2212
.editbuttons .cancel {
2213
    background-image: url("./cancel.png");
2214
    margin-left: 3px;
2215
}
2216

    
2217
.editbuttons .save {
2218
    background-image: url("./save.png");
2219
    margin-left: 1px;
2220
}
2221

    
2222
.editbuttons img {
2223
    float:none !important;
2224
    margin: 0px !important;
2225
}
2226

    
2227
.network .namecontainer {
2228
    font-size: 1.1em;
2229
}
2230
.network .machine-name-div .namecontainer {
2231
    font-size: 1em;
2232
    font-weight: bold;
2233
}
2234

    
2235

    
2236
.namecontainer .name {
2237
    position: relative;
2238
}
2239

    
2240
.namecontainer .name .nametextbox, .network-rename-input {
2241
    z-index: 1000;
2242
}
2243

    
2244
.nametextbox, .network-rename-input {
2245
    font-size: 65%;
2246
    width: 240px;
2247
}
2248

    
2249
.large-spinner {
2250
    background: url("./icons/indicators/large/progress.gif");
2251
    margin-left: 298px;
2252
    margin-top: 0px;
2253
    height: 31px;
2254
    width: 49px;
2255
    position: absolute;
2256
    top: 200px;
2257
}
2258

    
2259
#machinesview-icon .large-spinner {
2260
    top: 170px;
2261
}
2262

    
2263
.list .large-spinner {
2264
    margin-top:-30px;
2265
}
2266

    
2267
.single .large-spinner {
2268
    margin-top: 50px;
2269
}
2270

    
2271
div#networks-container {
2272
    display: none;
2273
}
2274

    
2275
div#networks-container .large-spinner {
2276
    margin-top: 50px;
2277
}
2278

    
2279
/* tables in list view */
2280
div.list div.dataTables_filter {
2281
    font-size: 75%;
2282
    margin-bottom: 12px;
2283
}
2284

    
2285
div.list div.dataTables_filter input{
2286
    font-size: 100%;
2287
}
2288

    
2289
.dataTables_wrapper {
2290
    width: 515px;
2291
    padding-bottom: 40px;
2292
}
2293

    
2294
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2295
    padding-right: 15px !important;
2296
}
2297

    
2298
div.list table {
2299
    width: 515px;
2300
    font-size: 75%;
2301
}
2302

    
2303
div.list table tbody td {
2304
    color: #3D3D3D;
2305
    padding:6px;
2306
    vertical-align: middle;
2307
    height: 20px;
2308
}
2309

    
2310
div.list table thead tr {
2311
    border-bottom: 1px solid #aaa;
2312
}
2313
div.list table thead tr th {
2314
    background-color: #CDE2EC;
2315
    background-image: url(bg.gif);
2316
    background-repeat: no-repeat;
2317
    background-position: right 11px;
2318
    font-weight: normal;
2319
    border: 1px solid transparent;
2320
    border-bottom: none;
2321
    padding: 4px;
2322
    text-align: left;
2323
    vertical-align: middle;
2324
    cursor: pointer;
2325
}
2326

    
2327
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2328
    background-color: #5CA1C0;
2329
}
2330

    
2331
div.list table thead .sorting_asc {
2332
    background-image: url(asc.gif);
2333
}
2334

    
2335
div.list table thead .sorting_desc {
2336
    background-image: url(desc.gif);
2337
}
2338

    
2339
div.list table .selection div.expand-icon {
2340
    background-image: url(asc.gif);
2341
    background-repeat: no-repeat;
2342
    position: relative;
2343
    cursor: pointer;
2344
    width: 15px;
2345
    height: 4px;
2346
    left: 19px;
2347
    top: -11px;
2348
}
2349

    
2350
ul.dropdown-selector {
2351
    background-color: #E6EEEE;
2352
    position: absolute;
2353
    margin-left: 1px;
2354
    display: block;
2355
    top: 255px;
2356
    font-size:75%;
2357
    width:40px;
2358
}
2359

    
2360
ul.dropdown-selector li {
2361
    padding: 4px;
2362
}
2363

    
2364
ul.dropdown-selector li:hover {
2365
    background-color: #5CA1C0;
2366
}
2367

    
2368
ul.dropdown-selector li a{
2369
    color: black;
2370
    text-decoration: none;
2371
}
2372

    
2373
div.list table span.imagetag {
2374
    display: none;
2375
}
2376

    
2377
div.list table thead .vmos {
2378
    width: 20px !important;
2379
    vertical-align:middle;
2380
}
2381

    
2382
div.list table .selection {
2383
    width: 20px !important;
2384
    text-align: left;
2385
    background-image: none;
2386
    padding-left: 6px;
2387
}
2388

    
2389
div.list table thead .vmflavor {
2390
    width: 100px !important;
2391
}
2392

    
2393
/* group column commented out for v0.5
2394
div.list table thead .vmgroup {
2395
    width: 40px !important;
2396
}
2397
*/
2398

    
2399
div.list table thead .vmstatus {
2400
    width: 50px !important;
2401
}
2402

    
2403
div.list table thead .vmname {
2404
    width: 110px !important;
2405
}
2406

    
2407
.spinner, .action-indicator {
2408
    clear: right;
2409
    float:right;
2410
    margin: 10px 6px 0 15px;
2411
}
2412

    
2413
.icon .spinner {
2414
    margin: 20px 4px 0 15px !important;
2415
}
2416

    
2417
.single .state .spinner {
2418
    margin: 20px 55px 0 15px !important;
2419
}
2420

    
2421
.action-indicator {
2422
    margin-right: 18px;
2423
}
2424

    
2425
.list span.action-indicator {
2426
    display: block;
2427
    width: 15px;
2428
    height: 20px;
2429
    margin: 0 !important;
2430
    float: none;
2431
}
2432

    
2433
.wave {
2434
    clear: right;
2435
    float:right !important;
2436
    margin: 10px 15px 0 15px !important;
2437
}
2438

    
2439
#networks-pane .spinner {
2440
    margin-top: 18px !important;
2441
}
2442

    
2443
.hidden {
2444
    display:none;
2445
}
2446

    
2447
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2448
    display:block !important;
2449
}
2450

    
2451
.action_error .message, .action_error .code {
2452
    display: none;
2453
}
2454

    
2455
.fixed {
2456
    bottom: 0;
2457
    position: fixed !important;
2458
}
2459

    
2460
/* Networks */
2461
#networks-pane {
2462
    background-color: transparent;
2463
    color: black;
2464
}
2465

    
2466
#networkscreate {
2467
}
2468

    
2469
.createbutton {
2470
    color: black;
2471
    background-color: #FF7F2A;
2472
    cursor: pointer;
2473
    padding: 7px 24px;
2474
    text-decoration: none;
2475
    border-left: 15px solid #FF9955;
2476
    margin-left: -15px;
2477
}
2478

    
2479
#networkscreate:hover {
2480
    background-color: #FF9955;
2481
}
2482

    
2483
#createcontainer {
2484
}
2485

    
2486
#networks-container {
2487
}
2488

    
2489
#networks-pane .public-networks {
2490
    background: #EFF7FA repeat scroll 0 0;
2491
    margin: 0 0 0px;
2492
    padding: 0 0 15px 0px;
2493
}
2494

    
2495
#networks-pane .private-networks .network:last-child {
2496
    border-bottom: none;
2497
}
2498

    
2499
#networks-pane .private-networks {
2500
    background: #EFF7FA repeat scroll 0 0;
2501
    padding: 15px 20px 20px 0px;
2502
    margin-top: 18px;
2503
}
2504

    
2505
.private-networks .network-cont:last-child {
2506
    border-bottom: none;
2507
}
2508

    
2509
.private-networks .network-cont {
2510
    border-bottom: 1px solid #D1E7F0;
2511
    padding-bottom:5px;
2512
    margin-bottom: 5px;
2513
    width: 520px;
2514
}
2515

    
2516
.private-networks .network {
2517
    padding-top: 10px;
2518
    padding-bottom: 10px;
2519
}
2520

    
2521
#public-template, #private-template, #public-machine-template, #private-machine-template {
2522
    display:none;
2523
}
2524

    
2525
div.network a.action-network-add {
2526
    display: none;
2527
}
2528

    
2529
div.network a.action-network-destroy {
2530
    margin-top: 32px !important;
2531
    width: 50px;
2532
    display: none;
2533
}
2534

    
2535
div.network {
2536
    clear: both;
2537
    padding: 5px 20px 5px 20px;
2538
    width: 480px;
2539
    position: relative;
2540
}
2541

    
2542
#private-template {
2543
    margin: 2px 0 0 -30px;
2544
}
2545

    
2546
div.network-placeholder {
2547
    margin-left: 33px;
2548
}
2549

    
2550
div.private-networks div.network-placeholder {
2551
}
2552

    
2553
div.network-cable {
2554
    border-left: 3px solid #FF7F2A;
2555
    float: left;
2556
    margin-left: -40px;
2557
    margin-top: -45px;
2558
    height: 185px;
2559
    overflow: hidden;
2560
}
2561

    
2562
.first div.network-cable {
2563
    height:143px;
2564
    margin-top:-6px;
2565
    position: relative;
2566
}
2567

    
2568
div.network-contents div.machines-list div.first {
2569
    margin-top:0;
2570
}
2571

    
2572
.last div.network-cable {
2573
    height:85px;
2574
}
2575

    
2576
div.firewall-cable {
2577
    border-left: 3px solid #FF7F2A;
2578
    float: left;
2579
    margin-left: -100px;
2580
    margin-top: -20px;
2581
    height: 110px;
2582
}
2583

    
2584
.last div.firewall-cable {
2585
    display:none;
2586
}
2587

    
2588
div.network a:hover {
2589
    text-decoration: underline;
2590
    cursor: pointer;
2591
}
2592

    
2593
#networks-container .name {
2594
    font-size: 75%;
2595
}
2596

    
2597
div.network-machines, div.firewall {
2598
    font-size: 75%;
2599
    margin-left: 70px;
2600
}
2601

    
2602
div.firewall {
2603
    margin-left: 60px;
2604
    margin-bottom: 3px;
2605
    margin-top: -3px;
2606
}
2607

    
2608
div.machines-header, div.firewall-header {
2609
    background-color: #A1C8DB;
2610
    color: white;
2611
    cursor: pointer;
2612
    height: 17px;
2613
    width: 103px;
2614
}
2615

    
2616
 div.private-networks div.machines-header {
2617
    margin-top: -5px;
2618
}
2619

    
2620
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2621
    background-color: #84b7d0;
2622
}
2623

    
2624
div.network-machine:hover div.firewall-header {
2625
    background-color: #5CA1C0;
2626
}
2627

    
2628
div.firewall-label.darker {
2629
    background-color: #4085a5;
2630
}
2631

    
2632
.state {
2633
}
2634

    
2635
.network .state {
2636
    font-size: 75%;
2637
    position: absolute;
2638
    right: 10px;
2639
    top: 5px;
2640
}
2641

    
2642
div.network div.actions {
2643
    float: right;
2644
    font-size: 75%;
2645
    font-weight: normal;
2646
    height: 70px;
2647
    width: 100px;
2648
    position: absolute;
2649
    right: -100px;
2650
    top: 0;
2651
}
2652

    
2653
div.network div.machine-actions {
2654
    text-decoration: none;
2655
    float: right;
2656
    margin: -17px -180px 0 0;
2657
    font-weight: normal;
2658
    font-size: 75%;
2659
}
2660

    
2661
div.network div.actions a, div.network div.machine-actions a {
2662
    text-decoration: none;
2663
    height: 15px;
2664
    color: black;
2665
    visibility: hidden;
2666
    display: block;
2667
}
2668

    
2669

    
2670
div.network div.machine-actions a {
2671
    margin: 8px 0 0 8px;
2672
}
2673
div.network div.net-actions a {
2674
    margin: 0 0 8px 8px;
2675
    width: 168px;
2676
}
2677
div.network div.action-container {
2678
    bottom: auto;
2679
}
2680

    
2681
div.network div.net-actions .confirm_single {
2682
    position: absolute;
2683
    left: 96px;
2684
    width: 200px;
2685
    margin: 0 0px -5px 0;
2686
    font-size: 100%;
2687
}
2688

    
2689
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2690
    display: block;
2691
    background-color:#A1C8DB;
2692
    opacity: 0.8;
2693
    filter: alpha(opacity = 80);
2694
}
2695

    
2696
div.network.expand .net-actions a {
2697
    visibility: visible;
2698
}
2699

    
2700
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2701
    visibility: visible;
2702
}
2703

    
2704
div.network div.machine-actions a.action-destroy.selected {
2705
    color: #880000 !important;
2706
}
2707

    
2708
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected {
2709
    background-color: transparent !important;
2710
    visibility: visible!important;
2711
}
2712

    
2713
div.network .net-vm-actions .confirm_single {
2714
    font-size: 100% !important;
2715
    margin-right: -20px !important;
2716
    position: absolute !important;
2717
    top: 7px;
2718
    right:0;
2719
}
2720

    
2721
div.network div.display a {
2722
    visibility: visible;
2723
}
2724

    
2725
div.network-machine div.machine-actions a.action-details {
2726
    margin-top: 7px;
2727
    width: 168px;
2728
}
2729

    
2730
div.network .net-actions {
2731
    margin-right:5px !important;
2732
    margin-top:0px !important;
2733
    height: 80px !important;
2734
}
2735

    
2736
div.network .net-actions .action-container.destroy {
2737
    position: relative;
2738
    bottom: auto;
2739
}
2740

    
2741
div.network:hover {
2742
    background-color: #A1C8DB !important;
2743
}
2744

    
2745
.network-logos {
2746
    float:left;
2747
    padding-right: 10px;
2748
}
2749

    
2750
.network-logos:hover {
2751
    cursor: pointer;
2752
}
2753

    
2754
.state div {
2755
    text-align: right;
2756
    margin: 4px 1px -4px;
2757
}
2758

    
2759
.public-networks .state div {
2760
    margin-top: 4px;
2761
}
2762

    
2763
.private-networks .state div {
2764
    margin-top: 9px;
2765
    margin-bottom: -12px;
2766
}
2767

    
2768
.network .name-div {
2769
    margin-bottom: 15px;
2770
    margin-top: 0px;
2771
}
2772

    
2773
div.indicator {
2774
    clear: none;
2775
    float: right;
2776
    height: 11px;
2777
    margin: 3px -1px;
2778
    width: 10px;
2779
}
2780

    
2781
#private-networks {
2782
    margin-top: 20px;
2783
}
2784

    
2785
.private-networks .editbuttons {
2786
    margin-right: 117px;
2787
    margin-top: 1px;
2788
}
2789

    
2790
.private-networks div.confirm_single {
2791
    margin: 45px -219px -5px 0;
2792
    font-size: 80%;
2793
}
2794

    
2795
.private-networks .network-machine div.confirm_single {
2796
    margin: 0 -199px 0 0;
2797
}
2798

    
2799
.private-networks .state {
2800
}
2801

    
2802
.private-networks div.machines-list {
2803
    padding-top: 3px;
2804
}
2805

    
2806
span.rename-network, span.configure {
2807
    background-repeat: no-repeat;
2808
    color: transparent;
2809
    font-size: 75%;
2810
    font-weight: normal;
2811
    margin-left: 10px;
2812
    padding-left: 10px;
2813
    text-align: left;
2814
}
2815

    
2816
span.rename-network {
2817
    cursor: pointer;
2818
}
2819

    
2820
div.name-div:hover span.rename-network {
2821
    color: #3D3D3D;
2822
    margin-top: 0.4em;
2823
    background-image: url(./pencil.png);
2824
    background-position: 0 3px;
2825
}
2826

    
2827
div.network:hover a.rename {
2828
    color: #3d3d3d;
2829
}
2830

    
2831
.network-separator {
2832
    background-color: #5CA1C0;
2833
    height: 1px;
2834
    margin: 2px 0 0 -5px;
2835
    width: 480px;
2836
    font-size: 1%;
2837
    line-height: 1px;
2838
}
2839

    
2840
.network-contents {
2841
    margin-left: -4px;
2842
    width: 504px;
2843
    clear: both;
2844
    background: url("./orange-border.png") no-repeat;
2845
    background-position: 33px bottom;
2846
}
2847
.network-contents.last-expanded {
2848
    background-position-y: -2600px;
2849
}
2850

    
2851
.network-machine {
2852
    border-bottom: 1px solid #5CA1C0;
2853
}
2854
.network-machine:last-child {
2855
    border-bottom: none;
2856
}
2857

    
2858
.network-machine .state div {
2859
    text-align: left;
2860
}
2861

    
2862
.network-machine {
2863
    margin-left: 35px;
2864
    padding-bottom: 10px;
2865
    padding-left: 5px;
2866
    padding-top: 10px;
2867
    position: relative;
2868
}
2869

    
2870
.network-machine .ips {
2871
    position: absolute;
2872
    right:0;
2873
    top:40px;
2874
    text-align: right;
2875
    padding-right: 10px;
2876
    font-size: 70%;
2877
}
2878

    
2879
.network-machine .logo {
2880
    float:left;
2881
    padding-right: 10px;
2882
    position:relative;
2883
}
2884

    
2885
#networks-container .machine-name {
2886
    text-decoration: none !important;
2887
    margin-bottom: 10px;
2888
    color: #000000;
2889
    margin-top: -4px;
2890
}
2891

    
2892
.private-networks .separator {
2893
    background-color: #5CA1C0;
2894
    height: 1px;
2895
    margin: 3px 0 -2px -10px;
2896
    width: 485px;
2897
}
2898

    
2899
.network-machine .state {
2900
    margin-right: 18px;
2901
}
2902

    
2903
.network-machine .state .status {
2904
    margin-bottom: 4px;
2905
}
2906

    
2907
.machine-name .name {
2908
}
2909

    
2910
.machine-name .namecontainer {
2911
    line-height: 18px;
2912
    margin-bottom: 20px;
2913
}
2914

    
2915
div.network-machine:hover {
2916
    background-color: #84B7D0;
2917
}
2918

    
2919
.machines {
2920
    width: 416px;
2921
    margin-bottom: -8px;
2922
    margin-top: 10px;
2923
}
2924

    
2925
div.empty-network-slot {
2926
    height: 60px;
2927
}
2928

    
2929
div.network-remove-machine, div.network-add-machine {
2930
    background-color: #FB822F;
2931
    color: #bc4b00;
2932
    width:90px;
2933
    height:18px;
2934
    float:left;
2935
    margin:40px 0 0 -100px;
2936
}
2937

    
2938
span.remove-icon {
2939
    font-size: 80%;
2940
    margin-left: 15px;
2941
    position: relative;
2942
    bottom:1px;
2943
}
2944

    
2945
div.add-icon {
2946
    margin-left: 15px;
2947
    margin-top: -1px;
2948
    cursor: pointer;
2949
}
2950

    
2951
span.remove-icon:hover, span.add-icon:hover {
2952
    cursor:pointer;
2953
    color: #fff;
2954
}
2955

    
2956
div.network-add-machine {
2957
    margin:43px 0 0 0px;
2958
}
2959

    
2960
.firewall-on {
2961
    color: #42E342;
2962
}
2963

    
2964
.firewall-off {
2965
    color: #F82E2E;
2966
}
2967

    
2968
.firewall-content {
2969
    color: black;
2970
    font-size: 60%;
2971
    margin-left: 60px;
2972
    height: 55px;
2973
    margin-bottom: 17px;
2974
}
2975

    
2976
.firewall-content .checkbox-legends {
2977
    cursor: pointer;
2978
}
2979

    
2980
.firewall-content .checkbox-legends.current {
2981
    font-weight: bold;
2982
}
2983

    
2984
.firewall-content .checkbox-legends {
2985
    vertical-align: text-top;
2986
}
2987

    
2988
.checkbox-legends a {
2989
    color: black;
2990
    text-decoration: underline;
2991
    font-size: 100%;
2992
}
2993

    
2994
h5.machine-connect {
2995
    font-size: 75%;
2996
    margin-bottom: 3px;
2997
}
2998

    
2999
.machine-connect span {
3000
    text-decoration: underline;
3001
}
3002

    
3003
h5.machine-connect span:hover {
3004
    cursor: pointer;
3005
}
3006

    
3007
.firewall-apply {
3008
    background-color: #4085a5;
3009
    border: medium none;
3010
    float: right;
3011
    font-size: 105%;
3012
    height: 18px;
3013
    margin-right: 5px;
3014
    margin-top: 3px;
3015
    width: 75px;
3016
}
3017

    
3018
.firewall-apply:hover {
3019
    background-color:#5CA1C0;
3020
}
3021

    
3022
.name-div {
3023
    margin: -9px 0 30px 70px;
3024
}
3025

    
3026
.machine-name-div {
3027
    margin-bottom: 20px;
3028
    margin-left: 60px;
3029
}
3030

    
3031
div.reboot-dialog {
3032
    display: none;
3033
    color: black;
3034
    background-color: #4085A5;
3035
    font-size: 75%;
3036
    margin-top: 15px;
3037
    width: 698px;
3038
    z-index: 1;
3039
}
3040

    
3041
div#reboot-machine-template, div.reboot-machine-entry {
3042
    display: none;
3043
    padding: 0 0 10px 35px;
3044
    width: 300px;
3045
}
3046

    
3047
div.reboot-dialog p {
3048
    color: #FFFFFF;
3049
    padding: 10px 0 10px 10px;
3050
}
3051

    
3052
div.reboot-dialog button {
3053
    float:right;
3054
    border: 1px solid #FF7F2A;
3055
    background-color: transparent;
3056
    font-size:100%;
3057
}
3058

    
3059
div.reboot-dialog button:hover {
3060
    background-color: #FF7F2A;
3061
}
3062

    
3063
div.reboot-dialog button.reboot-all {
3064
    margin: -30px 35px 0 0;
3065
}
3066

    
3067
div.reboot-dialog button.reboot-single {
3068
    color: black;
3069
    margin-top: -20px;
3070
}
3071

    
3072
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
3073
    display:none;
3074
}
3075

    
3076
div.reboot-dialog button.details {
3077
    border-color: #800000;
3078
    margin-top: -20px;
3079
}
3080

    
3081
div.reboot-dialog button.details:hover {
3082
    background-color: #800000;
3083
}
3084

    
3085
/* Metadata */
3086
.machine .info-content {
3087
    display: none;
3088
}
3089

    
3090
.metadata-container {
3091
    line-height: 12px;
3092
    height: 85px;
3093
    background-color: #84b7d0;
3094
}
3095

    
3096
.metadata-column {
3097
    border-right: 1px solid #5CA1C0;
3098
    color: black;
3099
    float: left;
3100
    font-size: 60%;
3101
    margin-top: 3px;
3102
    height: 70px;
3103
    padding-bottom: 5px;
3104
}
3105

    
3106
.vm-stats {
3107
    padding-left: 10px;
3108
    padding-right: 5px;
3109
    width: 220px;
3110
}
3111

    
3112
.vm-stats div.stat-content {
3113
    height: 18px;
3114
}
3115

    
3116
.vm-stats div.stat-content img {
3117
    margin: 0;
3118
}
3119

    
3120
.vm-stats div img.stat-busy {
3121
    margin-top: -7px;
3122
    margin-left: 90px;
3123
}
3124

    
3125
.vm-stats div.stat-content img.busy {
3126
    margin-left: 95px;
3127
}
3128

    
3129
.vm-stats div.stat-error {
3130
    display:none;
3131
}
3132

    
3133
div.stat-error {
3134
    color: #f00;
3135
}
3136

    
3137
.single div.stat-error {
3138
    text-align: center;
3139
    font-size: 0.8em;
3140
}
3141

    
3142
.metadata-column {
3143
    margin-top: 4px;
3144
}
3145

    
3146
.vm-details {
3147
    width: 130px;
3148
    margin-left:17px;
3149
}
3150

    
3151
.vm-details.metadata-column {
3152
    padding-top: 5px;
3153
    height: 65px;
3154
}
3155

    
3156
.vm-details .image-details {
3157
    margin-top: 8px;
3158
}
3159

    
3160
.vm-details .vm-detail {
3161
    display: block;
3162
}
3163

    
3164
.vm-details span.value {
3165
    color: #444;
3166
}
3167

    
3168
.single-container .lower .stat-busy {
3169
    margin-top: 10px;
3170
    margin-left: 325px;
3171
}
3172

    
3173
.vm-metadata {
3174
    padding-left: 10px;
3175
    width: 100px;
3176
    border: none;
3177
}
3178

    
3179
.metadata-left {
3180
}
3181

    
3182
.metadata-right {
3183
    width: 73px;
3184
    float:left;
3185
    height: 35px;
3186
    padding-left: 5px;
3187
    position:relative;
3188
    overflow:hidden;
3189
}
3190

    
3191
.metadata-right .items {
3192
    position:absolute;
3193
    height:20000em;
3194
}
3195

    
3196
.metadata-keys-container {
3197
    height: 60px;
3198
    float: left;
3199
}
3200

    
3201
.single .metadata-keys-container {
3202
    float: none;
3203
    height: auto;
3204
    margin-bottom: 5px;
3205
}
3206

    
3207
.single a.manage-metadata {
3208
    font-size: 80%;
3209
    margin-left:4px;
3210
    color: #383838;
3211
}
3212

    
3213
a.manage-metadata, a.stats-report {
3214
    font-size: 100%;
3215
    color: black;
3216
    margin-left:17px;
3217
    text-decoration: underline;
3218
}
3219

    
3220
a.stats-report {
3221
    margin: 15px 0  0 80px;
3222
}
3223

    
3224
div.machine a.manage-metadata:hover {
3225
    background-color: transparent;
3226
}
3227

    
3228
.single .metadata-actions, .single .metadata-keys-container .items {
3229
    padding-left: 5px;
3230
}
3231
.metadata-actions, .metadata-keys-container .items{
3232
    margin-top: 5px;
3233
}
3234

    
3235
.singe .metadata-actions, .single .metadata-keys-container .items{
3236
    font-size: 80%;
3237
    line-height: 12px;
3238
    width: 300px;
3239
}
3240

    
3241
.metadata-actions .prev,  .metadata-actions .next{
3242
    float:left;
3243
    width:29px;
3244
    height:6px;
3245
    cursor: pointer;
3246
}
3247

    
3248
.metadata-actions .prev {
3249
    background: url("./roll-up.png") no-repeat scroll 0 0 transparent;
3250
}
3251

    
3252
.metadata-actions .next {
3253
    background: url("./roll-down.png") no-repeat scroll 0 0 transparent;
3254
}
3255

    
3256
.scrollable {
3257
    position:relative;
3258
    overflow:hidden;
3259
    height: 35px;
3260
    width: 120px;
3261
    margin-bottom:2px;
3262
}
3263

    
3264
.scrollable .items {
3265
    position:absolute;
3266
    height:20000em;
3267
}
3268

    
3269
/* single view */
3270
.single {
3271
    color: #383838;
3272
}
3273

    
3274
.single .column1 {
3275
    float: left;
3276
    margin: 1px 0 25px 17px;
3277
    width: 140px;
3278
}
3279

    
3280
.single .column1 .state {
3281
    float: left;
3282
    margin-left: 4px;
3283
    padding-bottom: 6px;
3284
    padding-top: 3px;
3285
    position: relative;
3286
    right: 0;
3287
    text-align: center;
3288
    width: 126px;
3289
}
3290

    
3291
.single .column1 .state-label {
3292
    padding-top: 5px;
3293
}
3294

    
3295
.single .column1 .indicators {
3296
    margin-right: 38px !important;
3297
}
3298

    
3299
.single div.connect-arrow {
3300
    margin-left: -17px;
3301
}
3302

    
3303
.single div.connect-border {
3304
    margin-left: -29px;
3305
}
3306

    
3307
.single .single-actions {
3308
    width: 150px;
3309
    height: 60px;
3310
    margin-bottom: 45px;
3311
    margin-left: -10px;
3312
}
3313

    
3314
.single .vm-actions .action-container {
3315
    margin-bottom: 1px;
3316
}
3317

    
3318
.single .vm-actions .action-container .confirm_single {
3319
    right: -45px;
3320
}
3321

    
3322
.single .vm-actions .action-container.destroy .confirm_single {
3323
}
3324

    
3325
.single .vm-actions .action-container.destroy {
3326
    bottom: -20px;
3327
}
3328

    
3329
.single a.single-action {
3330
    text-decoration: none;
3331
    cursor: pointer;
3332
    display: block;
3333
}
3334

    
3335
.single a.single-action:hover {
3336
    background-color:#A1C8DB;
3337
    width: 162px;
3338
    opacity: 0.8;
3339
    filter: alpha(opacity = 80);
3340
}
3341

    
3342
.single .destroy a.single-action.selected {
3343
    color: #880000 !important;
3344
}
3345

    
3346
.single a.single-action.selected {
3347
    color: #FF7F2A !important;
3348
    width: 50px !important;
3349
}
3350

    
3351
.single a.single-action.selected:hover {
3352
    background-color:transparent;
3353
}
3354

    
3355
.single .spinner, .single .action-indicator {
3356
    margin: 15px 45px 0 0px !important
3357
}
3358

    
3359
.single .action-indicator {
3360
    margin-right: 55px !important;
3361
}
3362

    
3363
.single .wave {
3364
    margin: 15px 53px 0 0px !important
3365
}
3366

    
3367
.icon div.action_error {
3368
    font-size: 100%;
3369
}
3370

    
3371
.single div.action_error {
3372
    position: absolute;
3373
    top: 29px;
3374
    right: 35px;
3375
}
3376

    
3377
.single .column2 {
3378
    background-color: #A1C8DB;
3379
    float: left;
3380
    font-size: 78%;
3381
    line-height: 17px;
3382
    margin: 0 0 10px 5px;
3383
    width: 358px;
3384
}
3385

    
3386
.single .column2 .machine-labels {
3387
    float: left;
3388
    font-size: 90%;
3389
    margin-left: 10px;
3390
    margin-top: 10px;
3391
    width: 125px;
3392
}
3393

    
3394
.single .machine-detail.title {
3395
    background-color: #74AEC9;
3396
    color: #fff;
3397
    padding: 4px 6px;
3398
    font-size: 0.8em;
3399
    width: 346px;
3400
    margin-left: 5px;
3401
    float: left;
3402
}
3403

    
3404
.single .column2 .machine-details {
3405
    float: right;
3406
    text-align: right;
3407
    font-size: 90%;
3408
    width: 210px;
3409
    margin-right: 10px;
3410
    margin-top: 10px;
3411
}
3412

    
3413
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3414
    margin-bottom: 13px;
3415
}
3416

    
3417
.single .tags {
3418
    clear: both;
3419
    margin-bottom: 10px;
3420
    margin-left: 10px;
3421
}
3422

    
3423
.single .tags-label {
3424
    float: left;
3425
    padding: 0 5px;
3426
    width: 30px;
3427
}
3428

    
3429
.single .tags-down-arrow {
3430
    background: url("/static/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3431
    float: left;
3432
    height: 16px;
3433
    width: 9px;
3434
}
3435

    
3436
.single .tags-header .info-header{
3437
    padding-top:0;
3438
    padding-bottom:0;
3439
}
3440

    
3441
.single .tags-header {
3442
    font-size: 0.62em;
3443
    cursor: pointer;
3444
    float: left;
3445
    margin-bottom:5px;
3446
}
3447

    
3448
.single .tags-header span.label {
3449
    font-size: 104%;
3450
}
3451

    
3452
.single .tags-content {
3453
    background-color: #84B7D0;
3454
    clear: both;
3455
    height: auto;
3456
    padding-bottom: 5px;
3457
    padding-top: 5px;
3458
    width: 300px;
3459
}
3460

    
3461
.single .column3 {
3462
    background-color: #A1C8DB;
3463
    width: 150px;
3464
    overflow: visible;
3465
    padding-bottom: 10px;
3466
    position: absolute;
3467
    right: 20px;
3468
    top: 130px;
3469
}
3470

    
3471
.single .col3 {
3472
    float: right;
3473
    width: 150px;
3474
    margin-right: 15px;
3475
    margin-bottom: 15px;
3476
}
3477

    
3478
.single .column3 .controls {
3479
    font-size: 80%;
3480
    height: 20px;
3481
    padding-left: 7px;
3482
    padding-right: 7px;
3483
    padding-top: 8px;
3484
    padding-bottom: 5px;
3485
    border-bottom: 1px solid #84B7D0;
3486
}
3487

    
3488
.single .column3 .vm-control:hover {
3489
    background-color: #5CA1C0;
3490
}
3491

    
3492
.single .column3 .previous {
3493
    float:left;
3494
    width: 72px;
3495
}
3496

    
3497
.single .column3 .next {
3498
    float: right;
3499
    text-align: center;
3500
    width: 60px;
3501
}
3502

    
3503
.single .column3 .next-label {
3504
    float: right;
3505
    margin-right: 3px;
3506
    margin-top: -2px;
3507
}
3508

    
3509
.single .column3 .next-arrow {
3510
    float: right;
3511
    height: 18px;
3512
    width: 10px;
3513
    background: url("./right-arrow.png") no-repeat scroll 3px 2px transparent;
3514
}
3515

    
3516
.single .column3 .prev-label {
3517
    float: left;
3518
    margin-left: 3px;
3519
    margin-top: -2px;
3520
}
3521

    
3522
.single .column3 .prev-arrow {
3523
    background: url("./left-arrow.png") no-repeat scroll 3px 2px transparent;
3524
    float: left;
3525
    height: 18px;
3526
    width: 10px;
3527
}
3528

    
3529
.single .column3 .separator {
3530
    width: 135px;
3531
    height: 1px;
3532
    background-color: #84B7D0;
3533
    margin: 0 0 0 7px;
3534
    clear: both;
3535
}
3536

    
3537
.single .column3 .servers {
3538
    font-size: 80%;
3539
    line-height: 15px;
3540
    padding-top: 10px;
3541
    text-align: right;
3542
    overflow: visible;
3543
    position: relative;
3544
}
3545

    
3546
.single .column3 .server-name {
3547
    margin-left: 10px;
3548
    padding-right: 5px;
3549
    cursor: pointer;
3550
    padding-bottom: 2px;
3551
}
3552
div.single div.column3 div.server-name:hover {
3553
    background-color: #5CA1C0;
3554
}
3555
.single .column3 .column3-selected {
3556
    background-color: #84B7D0;
3557
    color: white;
3558
    opacity: 0.8;
3559
    padding-left: 9px;
3560
    width: 160px;
3561
    filter: alpha(opacity = 80);
3562
    position: relative;
3563
    width: 126px;
3564
}
3565

    
3566
.single .toggler {
3567
    color: #FFFFFF;
3568
    float: right;
3569
    font-size: 140%;
3570
}
3571

    
3572
.single .cpu-usage, .single .network-usage {
3573
    text-align: center;
3574
    padding-top: 15px;
3575
    margin-bottom: 5px;
3576
    font-size: 90%;
3577
    font-weight: bold;
3578
}
3579

    
3580
.single .cpu-graph, .single .network-graph {
3581
    margin-left: 20px;
3582
    margin-bottom:30px;
3583
    width: 660px;
3584
}
3585

    
3586
.single div.lower img.stats {
3587
    margin-left: 82px;
3588
}
3589

    
3590
.single div.lower img.stats {
3591
    display: none;
3592
}
3593

    
3594
.single .single-image {
3595
    width: 126px;
3596
    height: 136px;
3597
    margin-bottom: 10px;
3598
    margin-left: 4px;
3599
    background-image: url("./icons/machines/large/unknown-sprite.png");
3600
    background-repeat: no-repeat;
3601
    cursor: pointer;
3602
}
3603

    
3604
.single .single-image-state1 {
3605
    background-position: 0px 0;
3606
}
3607

    
3608
.single .single-image-state3 {
3609
    background-position: -252px 0;
3610
}
3611

    
3612
.single .single-image-state4 {
3613
    background-position: -378px 0;
3614
}
3615

    
3616
.single .single-image-state2 {
3617
    background-position: -126px 0;
3618
}
3619

    
3620
.single .column3 .previous, .single .column3 .next {
3621
    cursor: pointer;
3622
    background-color: #84B7D0;
3623
    color: white;
3624
    font-size: 100%;
3625
    height: 15px;
3626
    padding-top: 2px;
3627
}
3628

    
3629
.single .column3 .disabled {
3630
    opacity: 0.5;
3631
    filter: alpha(opacity = 50);
3632
}
3633

    
3634
.single div.lower {
3635
    clear:both;
3636
    background: #EFF7FA repeat scroll 0 0;
3637
    width: 700px;
3638
    padding-bottom: 15px;
3639
}
3640

    
3641
.single div.upper {
3642
    background: transparent;
3643
    margin-bottom: 10px;
3644
    overflow: visible;
3645
    width: 700px;
3646
    background: #EFF7FA repeat scroll 0 0;
3647
}
3648

    
3649
/* console css */
3650
.console-header-logo {
3651
    padding-top: 17px;
3652
    margin-left: 30px;
3653
    position: fixed;
3654
}
3655

    
3656
#console-header div.help-text {
3657
    font-size: 75%;
3658
    font-weight:bold;
3659
    color:#FFFFFF;
3660
    float:left;
3661
    position: absolute;
3662
    margin: 45px 0 0 2px;
3663
}
3664

    
3665
div.console-container {
3666
    margin: 0 0em;
3667
    height: auto;
3668
}
3669

    
3670
#wrapper.console {
3671
    width: auto;
3672
}
3673

    
3674
.console-info {
3675
    font-size:80%;
3676
    color: white;
3677
    float:left;
3678
    position:relative;
3679
    margin: 15px 0 0 480px;
3680
}
3681

    
3682
applet {
3683
    width:100%;
3684
    height:100%;
3685
}
3686

    
3687
div.console-footer {
3688
    /* this is for version 0.5*/
3689
    display: none;
3690
}
3691

    
3692
.console-footer #footer-text{
3693
    float:left;
3694
    left: auto;
3695
    margin-left:30px;
3696
}
3697

    
3698
/* add network wizard (see also #wizard for shared classes) */
3699
#networks-wizard .header {
3700
    background-color: #4085A5;
3701
    height: 56px;
3702
}
3703

    
3704
#networks-wizard div.name-input {
3705
    margin: 75px 0 0 55px;
3706
}
3707

    
3708
#networks-wizard input {
3709
    border: 1px solid #CCCCCC;
3710
    color: #445566;
3711
    letter-spacing: 1px;
3712
    width: 170px;
3713
}
3714

    
3715
#networks-wizard span.help {
3716
    font-style: italic;
3717
    font-size: 80%;
3718
    margin-left: 10px;
3719
}
3720

    
3721
#networks-wizard .separator-end {
3722
    background-color: #387693;
3723
    height: 6px;
3724
    width: 479px;
3725
    margin-left: -13px;
3726
    margin-top: 19px;
3727
}
3728

    
3729
.red {
3730
    color: red;
3731
}
3732

    
3733
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3734
#add-machines-wizard span.machine-name {
3735
    margin-left: 4px;
3736
    vertical-align: text-top;
3737
}
3738

    
3739
#add-machines-wizard img.list-logo {
3740
    margin: 2px 1px 1px;
3741
}
3742

    
3743
.css-panes {
3744
    clear: both;
3745
}
3746

    
3747
.last .firewall-content {
3748
    margin-bottom:13px;
3749
}
3750

    
3751
#pub .last .network-separator {
3752
    display:none;
3753
}
3754

    
3755
.public-networks .empty-network-slot {
3756
    display: none;
3757
}
3758

    
3759
.clearfix {
3760
    display: block;
3761
    width: auto;
3762
    zoom: 1;
3763
}
3764

    
3765
/* float clearing for all browsers except the devil one */
3766
.clearfix:after{
3767
  clear: both;
3768
  content: ".";
3769
  display: block;
3770
  height: 0;
3771
  visibility: hidden;
3772
  font-size: 0;
3773
}
3774

    
3775
* html .clearfix {
3776
    display: inline-block;
3777
}
3778

    
3779
.icon .wave {
3780
    margin-right: 4px !important;
3781
    margin-top: 15px !important;
3782
}
3783

    
3784
.icon .status {
3785
    margin-right: 3px;
3786
}
3787

    
3788
#machinesview .status, .single .state {
3789
    font-size: 75%;
3790
}
3791

    
3792
#machinesview-list div.action-indicator {
3793
    margin:0 !important;
3794
    float: none !important;
3795
}
3796

    
3797
.icon div.action-indicator {
3798
    margin-top: 14px;
3799
    margin-right: 4px;
3800
}
3801

    
3802
div.action-indicator {
3803
    width: 15px;
3804
    height: 20px;
3805
    background-repeat: no-repeat;
3806
    background-position: 0 0;
3807
}
3808

    
3809
tbody.machines div.action-indicator {
3810
    position: relative;
3811
    top: -2px;
3812
}
3813
div.state .destroy, tbody.machines .destroy {
3814
    background-image: url("./icons/actions/medium/destroy.png");
3815
}
3816
div.state .console, tbody.machines .console {
3817
    background-image: url("./icons/actions/medium/console.png");
3818
}
3819
div.state .start, tbody.machines .start {
3820
    background-image: url("./icons/actions/medium/start.png");
3821
}
3822
div.state .reboot, tbody.machines .reboot {
3823
    background-image: url("./icons/actions/medium/reboot.png");
3824
}
3825
div.state .shutdown, tbody.machines .shutdown {
3826
    background-image: url("./icons/actions/medium/shutdown.png");
3827
}
3828

    
3829

    
3830
.no-invitations-left {
3831
    margin-bottom: 20px;
3832
    color: #E44848;
3833
}
3834

    
3835
.invitations #field_name_name, .invitations #field_email_name {
3836
    float: left;
3837
    display: block;
3838
    width: 180px;
3839
}
3840
.invitations input {
3841
    width: 170px;
3842
}
3843

    
3844
.invitations #fieldheaders span.description {
3845
    font-size: 0.8em;
3846
    color: #666;
3847
    margin-left: 2px;
3848
}
3849

    
3850
.invitations #fields {
3851
    margin-top: 5px;
3852
}
3853

    
3854
.invitations .add-field-container {
3855
    margin-top: 5px;
3856
}
3857

    
3858
.invitations #errors {
3859
    padding: 5px;
3860
    background-color: #800000;
3861
}
3862

    
3863
.invitations #errors p {
3864
    margin-bottom: 10px;
3865
    font-size: 0.95em;
3866
    padding-top:0;
3867
    margin-top:0;
3868
    color: #fff;
3869
}
3870

    
3871
.invitations #errors li {
3872
    font-size: 0.85em;
3873
    color: #ddd;
3874
}
3875

    
3876
.invitations #errors {
3877
    font-size: 100%;
3878
    margin-bottom: 10px;
3879
}
3880

    
3881
#invsent {
3882
    padding-top: 10px;
3883
}
3884

    
3885
#invsent h3.overlay-inner-title {
3886
    font-size: 1.2em;
3887
    font-weight: normal;
3888
    border-bottom: 1px solid #B0D0E0;
3889
}
3890

    
3891
#invsent .icons-info img {
3892
    vertical-align: middle;
3893
}
3894

    
3895
#invsent .icons-info {
3896
    margin-top: 10px;
3897
    font-size: 0.7em;
3898
}
3899

    
3900
#invsent .icons-info span {
3901
    margin-right: 10px;
3902
}
3903

    
3904
.notification-box .invitations {
3905
    padding-bottom: 0;
3906
}
3907
.notification-box .invitations .sub-text {
3908
    display: none;
3909
}
3910

    
3911
h3.overlay-inner-title {
3912
    color: #4085A5;
3913
    font-size: 2em;
3914
}
3915

    
3916
#invsent .message {
3917
    font-size: 0.9em;
3918
    padding: 5px 0;
3919
    margin-top: 5px;
3920
    margin-bottom: -10px;
3921
    color: #5CAD54;
3922
}
3923

    
3924
#invsent .errormsg {
3925
    color: #AE2B34;
3926
}
3927

    
3928
#add-name-container {
3929
    margin-bottom: 10px;   
3930
}
3931

    
3932
.remove-field-trigger, .add-field-trigger {
3933
    cursor: pointer;
3934
}
3935

    
3936
.add-field-trigger img {
3937
    vertical-align: middle;
3938
}
3939

    
3940
.invitations form {
3941
    margin-bottom: 20px;
3942
}
3943

    
3944
#invsent h3 {
3945
    font-size: 0.8em;
3946
    font-weight: bold;
3947
}
3948

    
3949
#invsent h3 span {
3950
    font-weight: normal;
3951
    font-size: 0.9em;
3952
    margin-right: 5px;
3953
    display: block;
3954
    margin-top: -2px;
3955
}
3956

    
3957
#invsent ul {
3958
    margin-top: 3px;
3959
}
3960

    
3961
#invsent li {
3962
    color: #4085A5;
3963
    font-size: 1.1em;
3964
    padding-top: 0.5em;
3965
    border-bottom: 1px solid #efefef;
3966
    padding-bottom: 0.5em;
3967
    font-size: 0.9em;
3968
    position: relative;
3969
}
3970

    
3971
#invsent li:hover {
3972
    background-color: #efefef;
3973
}
3974

    
3975
#invsent li img {
3976
    position: absolute;
3977
    left:20px;
3978
    bottom: 2px;
3979
}
3980

    
3981
#invsent h3 img {
3982
    float: none;
3983
    vertical-align: middle;
3984
    margin-left: 3px;
3985
}
3986

    
3987
#invsent .name {
3988
    float: left;
3989
    width: 55%;
3990
    padding-left: 20px;
3991
}
3992

    
3993
#invsent .email {
3994
    float: left;
3995
    width: 40%;
3996
}
3997

    
3998
#invsent li.accepted {
3999
    color: #ABD49C;
4000
}
4001

    
4002
#invsent li img {
4003
    margin-left: -20px;
4004
    margin-top: 1px;
4005
}
4006

    
4007
#invsent li img.resend {
4008
    cursor: pointer;
4009
}
4010

    
4011
.invitations #field_email_name {
4012
}
4013

    
4014
#invform #fields input {
4015
    margin-right: 10px;
4016
}
4017

    
4018
.machine-now-building {
4019
    padding-right: 15px !important;
4020
    text-align: justify;
4021
}
4022

    
4023
.sub-text {
4024
    padding-top: 15px;
4025
    padding-right: 15px;
4026
    text-align: justify;
4027
    font-style: italic;
4028
    font-size: 0.8em !important;
4029
}
4030

    
4031
#notification-box a {
4032
    color: #4085A5;
4033
}
4034

    
4035
#notification-box .machine-title img {
4036
    vertical-align: middle;
4037
}
4038

    
4039
#notifiaction-box .password-header {
4040
    margin-bottom: 0 !important;
4041
}
4042

    
4043
#notification-box .password-container a {
4044
    color: #fff;
4045
    text-decoration: underline;
4046
}
4047

    
4048
#notification-box .password-container a:hover {
4049
    background-color: #fff;
4050
    color: #4085A5;
4051
}
4052

    
4053
#notification-box .password-container {
4054
    background: #4085A5;
4055
    border: none;
4056
}
4057

    
4058
#notification-box .password-container .password a {
4059
    font-weight: normal !important;
4060
}
4061

    
4062
#notification-box .cmd {
4063
    color: #fff;
4064
    font-family: monospace;
4065
    font-size: 1.6em;
4066
}
4067

    
4068
.machine-container .separator {
4069
    background-color: #B0D1E0;
4070
}
4071

    
4072
#creation-password-overlay div.password-cont {
4073
    margin: 10px auto;
4074
    padding: 10px;
4075
    border: 2px solid #75B54A;
4076
    background-color: #AADE87;
4077
    color: #447821;
4078
    text-align: left;
4079
    padding-left: 5em;
4080
    position: relative;
4081
}
4082

    
4083
#creation-password-overlay {
4084
    position: relative;
4085
}
4086

    
4087
#creation-password-overlay .form-action {
4088
    position: absolute;
4089
    bottom: 15px;
4090
    right: 13px;
4091
    font-size: 0.8em;
4092
}
4093

    
4094
#creation-password-overlay .password {
4095
    font-size: 1.3em;
4096
    font-weight: bold;
4097
    margin-right: 5em;
4098
    float: right;
4099
}
4100

    
4101
.feedback-form .description {
4102
    margin-bottom: 25px;
4103
}
4104

    
4105
.feedback-form label {
4106
    display: block;
4107
    font-weight: bold;
4108
    margin-bottom: 10px;
4109
    font-size: 0.8em;
4110
}
4111

    
4112
.feedback-form .form-actions {
4113
    border-top: none;
4114
}
4115

    
4116
.nospace {
4117
    padding-top: 0 !important;
4118
    padding-bottom: 0 !important;
4119
}
4120

    
4121
.noborder {
4122
    border-top: none !important;
4123
    border-bottom: none !important;
4124
}
4125

    
4126
.overlay .feedback-form .messages.description {
4127
    padding-bottom:0;
4128
    margin-bottom: 0;
4129
}
4130

    
4131
.feedback-form .messages .error-message {
4132
    color: #f00;
4133
}
4134

    
4135
.feedback-form .messages .success-message {
4136
    color: #8AA87F;
4137
}
4138

    
4139
.feedback-form .feedback-message {
4140
    width: 548px;
4141
    height: 200px;
4142
    border: 1px solid #ddd;
4143
    padding: 5px;
4144
}
4145

    
4146
#feedback-form .empty-error-msg {
4147
    display: none;
4148
}
4149

    
4150
#feedback-form .data-text {
4151
    display: none;
4152
}
4153

    
4154
#feedback-form .message {
4155
    display: none;
4156
}
4157

    
4158
#feedback-form label {
4159
    display: block;
4160
    font-size: 0.85em;
4161
    font-weight: bold;
4162
}
4163

    
4164
#feedback-form label.inline {
4165
    display: inline;
4166
    padding-left: 5px;
4167
}
4168

    
4169
#feedback-form p {
4170
    padding: 1em 0;
4171
    color: #444;
4172
    margin-bottom: 10px;
4173
}
4174

    
4175
#feedback-form .description {
4176
    font-style: italic;
4177
    font-size: 0.9em;
4178
    color: #888;
4179
}
4180

    
4181
#feedback-form .feedback-text {
4182
    width: 98%;
4183
    height: 100px;
4184
    margin-top: 10px;
4185
    margin-bottom: 10px;
4186
}
4187

    
4188
#feedback-form .submit-data {
4189
    display: none;
4190
}
4191

    
4192
#feedback-form .submit, #invform .submit {
4193
    background-color: #4085A5;
4194
    color: #fff;
4195
    border: none;
4196
    padding: 5px 16px;
4197
    cursor: pointer;
4198
    font-size: 1em;
4199
    position: relative;
4200
}
4201

    
4202
#feedback .submit {
4203
    float: right;
4204
    right: 10px;
4205
    margin-top: 10px;
4206
}
4207

    
4208

    
4209
#feedback-form .submit:hover, #invform .submit:hover {
4210
    background-color: #549FC3;
4211
}
4212

    
4213
.feedback-intro {
4214
    padding-right: 15px !important;
4215
    text-align: justify;
4216
}
4217

    
4218
.popup-body .message {
4219
    padding: 20px 5px;
4220
    display: none;
4221
}
4222

    
4223
.popup-body .loading {
4224
    color: #fff;
4225
}
4226

    
4227
.popup-body .success {
4228
    color: #1F921A;
4229
}
4230

    
4231
.popup-body .errormsg {
4232
    color: #E32424;
4233
}
4234

    
4235

    
4236
.close-msg-box {
4237
    display: block;
4238
    margin-top: 10px;
4239
    cursor: pointer;
4240
    color: #4085A5;
4241
    text-decoration: underline;
4242
}
4243

    
4244

    
4245
.console .ip-version-label {
4246
    margin: 0 5px;
4247
}
4248

    
4249
.ipv6-text, .ipv4-text {
4250
    font-size: 0.9em;
4251
}
4252

    
4253
.tooltip {
4254
    background-color: #C4DDE9;
4255
    color: #000;
4256
    font-size: 0.7em;
4257
    padding: 0.2em 0.5em;
4258
    border: 1px solid #888;
4259
    z-index: 50000;
4260
}
4261

    
4262
/*404 and 500 pages*/
4263

    
4264
.error_page {
4265
    position: relative;
4266
    top: 40px;
4267
    padding-bottom: 140px !important;
4268
}
4269

    
4270
.error_page h1 {
4271
    font-weight: normal;
4272
}
4273

    
4274
.error_page .msg_header {
4275
    margin: 0px;
4276
    font-size: 10em;
4277
    position: absolute;
4278
    left: -5px;
4279
    top: 0px;
4280
    color: #4085A5;
4281
    font-family: arial, verdana;
4282
}
4283

    
4284
.error_page p.error_desc {
4285
    color: #fff;
4286
    font-size: 0.8em;
4287
}
4288

    
4289
.error_page {
4290
    padding-right: 50px !important;
4291
    padding-left: 100px !important;
4292
}
4293

    
4294
.error_page .error_content {
4295
    padding-left: 150px;
4296
    padding-top: 97px;
4297
}
4298

    
4299
.error_page .error_content .links, .info_content .links {
4300
    margin-top: 10px;
4301
    margin-left: 20px;
4302
}
4303

    
4304
.error_page .http_error .code {
4305
    letter-spacing: -10px;
4306
    font-size: 9em;
4307
}
4308

    
4309
.error_page .http_error .msg {
4310
    letter-spacing: -1px;
4311
    font-size: 2em;
4312
}
4313

    
4314
.error_page .http_error {
4315
    position: absolute;
4316
    right: 0px;
4317
    bottom: 0px;
4318
    color: #75B3D0;
4319
    line-height: 1em;
4320
}
4321

    
4322
.error_page .error_content a, .info_content .links a {
4323
    color: #4085A5;
4324
    font-weight: bold;
4325
    margin-right: 10px;
4326
    font-size: 0.9em;
4327
}
4328

    
4329
.error_body #container, .info_body #container {
4330
    background-position: right 200px;
4331
}
4332

    
4333
.info_page h1 {
4334
    color: #4085A5;
4335
    font-size: 2em;
4336
    font-weight: normal;
4337
}
4338

    
4339
.info_page p {
4340
    color: #ffffff;
4341
    margin: 1em 0;
4342
}
4343

    
4344
.info_body p a, .error_body p a{
4345
    color: #4085A5;
4346
    text-decoration: underline;
4347
}
4348

    
4349
.error_404 .http_error .code {
4350
    letter-spacing: -7px;
4351
}
4352

    
4353
.network-progress-indicator {
4354
    position: relative;
4355
    display: none;
4356
}
4357

    
4358
.network-progress-indicator img {
4359
    position: absolute;
4360
    bottom: 44px;
4361
    left: 340px;
4362
}
4363

    
4364

    
4365
.single .progress-message {
4366
    margin-top: 90px;
4367
    font-size: 0.6em;
4368
    padding: 0 10px;
4369
    text-align: center;
4370
}
4371

    
4372
/*metadata keys/values*/
4373
.items .tag-item  {
4374
    display: block;
4375
}
4376

    
4377
.single .items .tag-item .key {
4378
    width: 60px;
4379
}
4380

    
4381
.running .scrollable, .terminated .scrollable {
4382
    height: 42px;
4383
}
4384

    
4385
.items .tag-item .key {
4386
    margin-right: 5px;
4387
    width: 30px;
4388
    display: block;
4389
    float: left;
4390
    color: #000;
4391
}
4392

    
4393
.items .tag-item .value {
4394
    color: #444;
4395
}
4396

    
4397
#machinesview-list {
4398
    display: none;
4399
}
4400

    
4401
#machinesview-single {
4402
    position: relative;
4403
    display: none;
4404
}
4405

    
4406
#machinesview-icon {
4407
    display: none;
4408
}
4409

    
4410
#machinesview-icon, #machinesview-single, #machinesview-list {
4411
    
4412
}
4413

    
4414
tbody.machines .spinner {
4415
    margin-top: 0!important;
4416
    margin: 0 !important;
4417
    float: none !important;
4418
}
4419

    
4420
.slider .slider-point {
4421
    width: 4px;
4422
    height: 3px;
4423
    margin-left: 1px;
4424
    background-color: transparent;
4425
    display: block;
4426
    position: absolute;
4427
    z-index: 10;
4428
    bottom: 0px;
4429
}
4430

    
4431
.slider .slider-point-light {
4432
    background-color: transparent;
4433
}
4434

    
4435
.slider-point-text {
4436
    font-size: 0.6em;
4437
    position: absolute;
4438
    top: 4px;
4439
    border-top: 5px solid #C5DEE9;
4440
    padding: 3px;
4441
    color: #4085A5;
4442
    display: block;
4443
    min-width: 6px;
4444
    text-align: middle;
4445
}
4446

    
4447
.slider .handle {
4448
    z-index: 50;
4449
}
4450

    
4451
.modal p.desc {
4452
    margin: 5px 0;
4453
    margin-left: 37px;
4454
    font-size: 0.8em;
4455
    color: #888;
4456
}
4457

    
4458
.api_overlay_template {
4459
    display: none;
4460
}
4461

    
4462
.api_content .password-container .password {
4463
    color: #fff;
4464
    font-size: 1.1em;
4465
}
4466

    
4467
#disks-pane {
4468
    margin-top: 58px;
4469
}
4470

    
4471
span.resend-msg {
4472
    display: block;
4473
    margin-bottom: 5px;
4474
}
4475

    
4476
.success-msg {
4477
    background-color: #5CAD54;
4478
    color: #fff;
4479
    padding: 0.4em;
4480
    border: 1px solid #ddd;
4481
}
4482

    
4483
.error-msg {
4484
    background-color: #800000;
4485
    color: #fff;
4486
    padding: 0.4em;
4487
    border: 1px solid #ddd;
4488
}
4489

    
4490
.success-msg em, .error-msg em {
4491
    font-weight: bold;
4492
    font-style: normal;
4493
    font-size: 0.9em;
4494
}
4495

    
4496
.pagination {
4497
            font-size: 80%;
4498
        }
4499
        
4500
.pagination a {
4501
    text-decoration: none;
4502
        border: solid 1px #AAE;
4503
        color: #15B;
4504
}
4505

    
4506
.pagination a, .pagination span {
4507
    display: block;
4508
    float: left;
4509
    padding: 0.3em 0.5em;
4510
    margin-right: 5px;
4511
        margin-bottom: 5px;
4512
        min-width:1em;
4513
        text-align:center;
4514
}
4515

    
4516
.pagination .current {
4517
    background: #4085A5;
4518
    color: #fff;
4519
        border: solid 1px #AAE;
4520
}
4521

    
4522
.pagination .current.prev, .pagination .current.next{
4523
        color:#999;
4524
        border-color:#999;
4525
        background:#fff;
4526
}
4527

    
4528
#invsent .pagination {
4529
    margin-top: 10px;
4530
}
4531

    
4532
table.list-machines .wave {
4533
    float: none !important;
4534
    margin: 0 !important;
4535
}
4536

    
4537
.overlay {
4538
    display: none;
4539
}
4540

    
4541
.overlay {
4542
    background-color: #fff;
4543
    border: 2px solid #444;
4544
    text-align: left;
4545

    
4546
    -moz-box-shadow: 0 0 90px 5px #000;
4547
    -webkit-box-shadow: 0 0 90px 5px #000;
4548
    box-shadow: 0 0 90px 5px #000;
4549
    width: 600px;
4550
}
4551

    
4552
.overlay a {
4553
    color: #387693;
4554
}
4555

    
4556
.overlay .overlay-content .description.subinfo {
4557
    margin-bottom:0;
4558
    border-bottom: none;
4559
    padding-bottom:0;
4560
    margin-top: 10px;
4561
    padding-top:10px;
4562
    border-top: 1px solid #64a6c4;
4563
    /*border-top: 1px solid #DBE6EB;*/
4564
    font-size: 0.8em;
4565
}
4566

    
4567
.overlay .overlay-content .important {
4568
    color: #800000;
4569
}
4570

    
4571
.overlay .overlay-content .description {
4572
    color: #444;
4573
    border-bottom: 1px solid #64a6c4;
4574
    margin-bottom: 10px;
4575
    padding-bottom: 10px;
4576
    font-size: 0.9em;
4577
    line-height: 1.6em;
4578
}
4579
.overlay .overlay-content .empty-message {
4580
    margin-bottom: 5px;
4581
}
4582

    
4583
.overlay h3.header {
4584
    font-size: 0.9em;
4585
    text-align: left;
4586
    padding: 0.8em;
4587
    padding-left: 1em;
4588
    font-weight: normal;
4589
    border-bottom: 1px solid #ddd;
4590
}
4591

    
4592
.overlay h3.header .title {
4593
    float: left;
4594
}
4595

    
4596
.overlay .container {
4597
    position: relative;
4598
    padding-top: 1em;
4599
    padding: 0.5em;
4600
    background-image: url("./popup-bg.png");
4601
    background-repeat: repeat-x;
4602
}
4603

    
4604
.overlay .content {
4605
    background-color: transparent;
4606
    background-image: url("./popup-inner-bg.png");
4607
    padding: 1em;
4608
    font-size: 0.8em;
4609
    background-repeat: repeat-x;
4610
    -moz-box-shadow: 0 0 1px 1px #888;
4611
    -webkit-box-shadow: 0 0 1px 1px #888;
4612
    box-shadow: 0 0 1px 1px #888;
4613
}
4614

    
4615
.overlay .message {
4616
}
4617

    
4618
.overlay .actions {
4619
    position: absolute;
4620
    right: 0.75em;
4621
    top: 0.6em;
4622
}
4623

    
4624
.overlay .actions span {
4625
    font-size: 0.8em;
4626
    color: #fff;
4627
    cursor: pointer;
4628
    margin-left: 10px;
4629
    display: block;
4630
    float: left;
4631
    background-color: #4085A5;
4632
    padding: 0.2em 0.4em;
4633
}
4634

    
4635
.overlay-error .error-more-details {
4636
    margin-top: 5px;
4637
    max-height: 210px;
4638
    overflow: auto;
4639
}
4640

    
4641
.overlay-error .key.details.expand {
4642
    background-image: url("./plus-8.png");
4643
}
4644

    
4645
.overlay-error .key.details {
4646
    background-color: #5189A3;
4647
    cursor: pointer;
4648
    background-image: url("./minus-8.png");
4649
    background-repeat: no-repeat;
4650
    background-position: 545px;
4651
}
4652

    
4653
.overlay-error .container {
4654
    padding-top: 1.9em;
4655
}
4656

    
4657
.overlay-error .error-details {
4658
    font-size: 0.8em;
4659
    margin-top: 10px;
4660
}
4661

    
4662
.overlay-error .error-details anonymous {
4663
    display: block;
4664
    margin-top: 10px;
4665
}
4666

    
4667
.overlay-error h3.header {
4668
    background-color: #800000;
4669
    color: #fff;
4670
}
4671

    
4672
.overlay-error.non-critical h3.header {
4673
    background-color: #987249;
4674
}
4675

    
4676
.overlay-error span.key {
4677
    font-weight: normal;
4678
    display: block;
4679
    margin-top: 0.5em;
4680
    background-color: #74AEC9;
4681
    color: #fff;
4682
    padding: 0.4em;
4683
    font-size: 0.8em;
4684
    font-weight: bold;
4685
}
4686

    
4687
.overlay-error .indicator {
4688
    background-color: #880000;
4689
    color: #fff;
4690
    padding: 4px;
4691
    display: block;
4692
    float: left;
4693
    border: 1px solid #444;
4694
}
4695

    
4696
.overlay-error .nav-btn:hover {
4697
    
4698
}
4699

    
4700
.overlay-error .nav-btn {
4701
    margin-left: 5px;
4702
    color: #fff;
4703
    display: block;
4704
    float: left;
4705
    padding: 4px;
4706
    background-color: #AAA;
4707
    border: 1px solid #444;
4708
}
4709

    
4710
.overlay-error .error-nav {
4711
    position: absolute;
4712
    right: 0px;
4713
    bottom: -25px;
4714
    font-size: 0.8em;
4715
}
4716

    
4717
.overlay-error span.value, .overlay-error div.value {
4718
    padding: 0.4em;
4719
    display: block;
4720
    margin-bottom: 0.3em;
4721
}
4722

    
4723
.overlay h3 .closeme {
4724
    float: right;
4725
    font-size: 0.7em;
4726
    margin-top: 0.2em;
4727
    cursor: pointer;
4728
}
4729

    
4730
.overlay .header .subtitle {
4731
    display: block;
4732
    font-size: 0.8em;
4733
    color: #ddd;
4734
}
4735

    
4736
.overlay .header .subtitle img {
4737
    vertical-align: middle;
4738
    margin-left: 10px;
4739
    margin-bottom: 2px;
4740
}
4741

    
4742
.overlay-info .content {
4743
    background-repeat: no-repeat;
4744
    background-position: 110% 110%;
4745
    background-color: rgba(255,255,255,0.6)
4746
}
4747

    
4748
.overlay-info .header {
4749
    background-color: #4085A5;
4750
}
4751

    
4752
.overlay-info .header .title {
4753
    color: #fff;
4754
}
4755

    
4756
.overlay-info .header .closeme {
4757
    color: #fff;
4758
}
4759

    
4760
#loading-view {
4761
    width: 600px;
4762
    margin: 0 auto;
4763
    padding: 20px 0;
4764
    font-size: 0.8em;
4765
}
4766

    
4767
#loading-view .header span {
4768
    font-weight: bold;
4769
    color: #4085A5;
4770
}
4771

    
4772
#loading-view .info {
4773
    color: #ddd;
4774
}
4775

    
4776
.options-list {
4777
    margin-top: 0.5em;
4778
    font-size: 0.8em;
4779
}
4780

    
4781
.options-list.five li {
4782
    float: left;
4783
    display: block;
4784
    width: 20%;
4785
    margin-bottom: 5px;
4786
}
4787

    
4788
.options-list.five li:nth-child(5n) .options-object-cont {
4789
    margin-right: 0;
4790
}
4791

    
4792
.options-object-cont input {
4793
    border: 1px solid #aaa;
4794
    width: 92px;
4795
    padding: 0;
4796
    margin: 0;
4797
    margin-top:3px;
4798
    padding: 2px;
4799
}
4800

    
4801
.options-list.three li {
4802
    float: left;
4803
    display: block;
4804
    width: 33%;
4805
    margin-bottom: 5px;
4806
}
4807

    
4808
.meta-list .options-list li.options-object.create .options-object-cont {
4809
    background-image: url("./option-action-add.png");
4810
    background-repeat: no-repeat;
4811
    background-position: 90px 5px;
4812
}
4813

    
4814
.meta-list .options-list li .options-object-cont .option-action,
4815
.meta-list .options-list li.options-object.create {
4816
    cursor: pointer !important;
4817
}
4818

    
4819
.meta-list .options-list li .options-object-cont {
4820
    cursor: inherit;
4821
}
4822

    
4823
.options-list li .options-object-cont {
4824
    padding: 4px;
4825
    margin-right: 4px;
4826
    border: 1px solid #A6D1E6;
4827
    cursor: pointer;
4828
    min-height: 35px;
4829
    position: relative;
4830
}
4831

    
4832
.options-list.three li:nth-child(3n) .options-object-cont {
4833
    margin-right: 0;
4834
}
4835

    
4836
.options-list li.selected .options-object-cont {
4837
    background-color: #4085A5;
4838
    border: 1px solid #fff;
4839
}
4840

    
4841
.options-list li.selected .options-object-cont .title {
4842
    color: #fff;
4843
}
4844

    
4845
.options-list li.options-object .title {
4846
    display: block;
4847
    color: #FF7F2A;
4848
    margin-bottom: 2px;
4849
}
4850

    
4851
.options-list li .option-action {
4852
    display: none;
4853
    position: absolute;
4854
    background-repeat: no-repeat;
4855
}
4856

    
4857
.options-list.five li.editing {
4858
    width: 40%;
4859
}
4860

    
4861
.options-list.five li.editing .value {
4862
    display: none;
4863
}
4864

    
4865
.options-list li .remove {
4866
    background-image: url("./option-action-remove.png");
4867
    width:10px;
4868
    height:10px;
4869
    right:5px;
4870
    bottom: 5px;
4871
}
4872

    
4873
.options-list li .edit {
4874
    background-image: url("./option-action-edit.png");
4875
    width:10px;
4876
    height:10px;
4877
    right:5px;
4878
    top: 5px;
4879
}
4880

    
4881
.options-list li:hover .option-action  {
4882
    display: block;
4883
}
4884

    
4885
.options-list li.options-object .value {
4886
    color: #4085A5;
4887
    margin-top: 5px;
4888
    display: block;
4889
}
4890

    
4891
.options-list li.selected.options-object .value {
4892
    color: #ddd;
4893
}
4894
.options-list li .options-object-cont:hover {
4895
    background-color: #fff;
4896
}
4897

    
4898
.options-list li.selected .options-object-cont:hover {
4899
    background-color: #A6D1E6;
4900
}
4901

    
4902
.options-list li img {
4903
    float: left;
4904
    margin:2px;
4905
    margin-right: 10px;
4906
    padding-bottom:10px;
4907
}
4908

    
4909
#metadata-overlay-content {
4910
    position: relative;
4911
}
4912

    
4913
.vm-meta .editor .predefined .predefined-meta-key:hover {
4914
    background-color: #4e8eac;
4915
    color: #fff;
4916
}
4917

    
4918
.vm-meta .editor .predefined .predefined-meta-key {
4919
    float: left;
4920
    margin-right: 5px;
4921
    padding: 4px;
4922
    display: block;
4923
    cursor: pointer;
4924
}
4925

    
4926
.vm-meta .editor .predefined {
4927
    background-color: #A6D1E6;
4928
    font-size: 0.9em;
4929
    border-top: 1px solid #ddd;
4930
}
4931

    
4932
.vm-meta .editor input {
4933
}
4934
.vm-meta .editor {
4935
    margin-bottom: 10px;
4936
}
4937

    
4938
.vm-meta .editor .form-actions .form-action {
4939
    min-width: 50px;
4940
}
4941

    
4942
.vm-meta .editor .form-field input.meta-key {
4943
    width: 90px;
4944
}
4945

    
4946
.vm-meta .form-field {
4947
    float: left;
4948
}
4949

    
4950
.vm-meta .form-actions .form-action {
4951
    float: left;
4952
    margin-right: 10px;
4953
    height: 11px;
4954
}
4955

    
4956
.vm-meta .editor .form-actions .cancel {
4957
    margin-right: 0;
4958
}
4959

    
4960
.vm-meta .editor .form-actions {
4961
    float: right;
4962
    margin:0;
4963
    padding:0;
4964
    margin-left: 15px;
4965
    margin-top: 0px;
4966
}
4967

    
4968
.vm-meta .editor {
4969
    background-color: rgba(64, 133, 165, 0.898) !important;
4970
    background-color: #649DB8;
4971
    font-size:0.9em;
4972
}
4973

    
4974
.vm-meta .meta-key-title {
4975
    font-size: 1.3em;
4976
    color: #fff;
4977
    margin-bottom: 10px;
4978
    display: none;
4979
    float: left;
4980
}
4981

    
4982
.vm-meta .editor-content {
4983
    padding: 10px;
4984
}
4985

    
4986
.vm-meta .inner-mask {
4987
    background-color: #fff;
4988
    opacity:0.6;
4989
    position: absolute;
4990
    top:0;
4991
    left:0;
4992
}
4993

    
4994
.vm-meta .editor label {
4995
    float: left;
4996
    color: #fff;
4997
    margin-right: 2px;
4998
    padding-top:4px;
4999
    font-size: 0.9em;
5000
}
5001

    
5002
.vm-meta .editor input {
5003
    border: none;
5004
    width: 170px;
5005
    margin-left: 10px;
5006
    font-size: 0.9em;
5007
    padding: 4px;
5008
}
5009

    
5010
.vm-meta li.create .options-object-cont {
5011
    background-color: #B3C9AD ;
5012
    border-color: #788774;
5013
}
5014
.vm-meta li.create .options-object-cont .value,
5015
.vm-meta li.create .options-object-cont .title {
5016
    color: #fff;
5017
}
5018

    
5019
#createvm-overlay-content {
5020
    padding: 0;
5021
}
5022

    
5023
.overlay-createvm .container {
5024
    width: 584px !important;
5025
}
5026

    
5027
.create-vm .header-step.current {
5028
    font-weight: bold;
5029
}
5030

    
5031
.create-vm .create-step-cont {
5032
    min-height: 240px;
5033
}
5034
.create-vm .create-controls {
5035
    padding: 10px;
5036
}
5037

    
5038
.create-vm ul li {
5039
    cursor: pointer;
5040
    padding: 4px;
5041
}
5042

    
5043
.create-vm ul li.selected {
5044
    background-color: #aaa;
5045
}
5046

    
5047
.cont-toggler {
5048
    background-image: url("./down-arrow.png");
5049
    background-position: right;
5050
    background-repeat: no-repeat;
5051
    background-color: #A1C8DB;
5052
    display: inline-block;
5053
    border-right: 6px solid #A1C8DB;
5054
    padding:2px;
5055
    padding-right: 14px;
5056
    padding-left:0;
5057
    cursor: pointer;
5058
    color: #fff;
5059
    font-size: 0.9em;
5060
}
5061

    
5062
.cont-toggler .label {
5063
    background-color: #98BDCF;
5064
    padding: 2px;
5065
    padding-left: 5px;
5066
    padding-right: 5px;
5067
}
5068

    
5069
.cont-toggler.open {
5070
    background-color: #98BDCF;
5071
    border-color: #98BDCF;
5072
    background-image: url("./up-arrow.png");
5073
}
5074

    
5075
.cont-toggler.open .label {
5076
    background-color: #4085A5;
5077
}
5078

    
5079
.overlay .form label {
5080
    font-color: #444;
5081
    margin-right: 10px;
5082
}
5083

    
5084
.form-field input {
5085
    border: 1px solid #aaa;
5086
    width: 200px;
5087
    padding: 3px;
5088
}
5089

    
5090
.form-actions {
5091
    margin-top: 5px;
5092
    padding-top:5px;
5093
    border-top: 1px solid #64a6c4;
5094
    font-size: 0.8em;
5095
}
5096

    
5097
.form-actions.plain {
5098
    margin-top: 0px;
5099
    padding-top:0px;
5100
    border-top: 0px;
5101
}
5102

    
5103
.form-action {
5104
    float: right;
5105
    min-width: 140px;
5106
    background-color: #FF7F2A;
5107
    border: 1px solid #FF7F2A;
5108
    text-align: center;
5109
    color: #FFFFFF;
5110
    cursor: pointer;
5111
    padding: 4px;
5112
}
5113

    
5114
.form-action:hover {
5115
    background-color: #FF9955;
5116
    color: #FFF;
5117
}
5118

    
5119
.form-action.prev,
5120
.form-action.cancel {
5121
    background-color: #800;
5122
    border: 1px solid #800;
5123
    float: left;
5124
}
5125

    
5126
.form-action.prev:hover,
5127
.form-action.cancel:hover {
5128
    background-color: #fff;
5129
    color: #800;
5130
}
5131

    
5132
.form-action.next,
5133
.form-action.ok {
5134
    background-color: #080;
5135
    border: 1px solid #080;
5136
}
5137

    
5138
.form-action.next:hover,
5139
.form-action.ok:hover {
5140
    background-color: #fff;
5141
    color: #080;
5142
}
5143

    
5144
.form-action .create,
5145
.form-action .submit {
5146

    
5147
}
5148

    
5149
.form-action.in-progress, button.in-progress {
5150
    background-image: url("./icons/indicators/medium/horizontal-progress.gif");
5151
    background-repeat: no-repeat;
5152
    background-position: center center;
5153
    color: transparent;
5154
}
5155

    
5156
#createvm-overlay-content {
5157
    padding: 0;
5158
}
5159

    
5160
.create-vm .image-details.selected .size {
5161
    color: #eee;
5162
}
5163

    
5164
.create-vm .image-details p {
5165
    font-size: 0.8em;
5166
    padding-left: 27px;
5167
    display:block;
5168
}
5169

    
5170
.create-vm .image-details .size {
5171
    margin-top: 2px;
5172
    font-size: 0.8em;
5173
    color: #aaa;
5174
    position: absolute;
5175
    right:5px;
5176
    top: 5px;
5177
}
5178

    
5179
.create-vm .step-cont {
5180
    margin: 15px;
5181
}
5182

    
5183
.create-vm .create-step-cont {
5184
    min-height: 250px;
5185
    float: left;
5186
    width: 584px;
5187
}
5188

    
5189
.create-vm .create-controls {
5190
    padding: 10px;
5191
    border-top: 1px solid #ddd;
5192
}
5193

    
5194
.create-vm .empty {
5195
    font-size: 0.8em;
5196
    color: #444;
5197
}
5198

    
5199
.create-vm h4 {
5200
    color: #5CA1C0;
5201
    margin-bottom: 0.5em;
5202
    font-family: arial;
5203
}
5204
.create-vm ul li {
5205
    cursor: pointer;
5206
    padding: 4px;
5207
    font-size: 0.9em;
5208
}
5209

    
5210
.create-vm ul li.selected {
5211
    background-color: #5CA1C0;
5212
    color: #fff;
5213
}
5214

    
5215
.create-vm .images-list-cont {
5216
    width: 40%;
5217
    float: left;
5218
    padding-left: 3%;
5219
    padding-right: 3%;
5220
}
5221

    
5222
.create-vm p.desc {
5223
    font-size: 0.9em;
5224
    color: #888;
5225
    margin-bottom: 10px;
5226
}
5227

    
5228
.create-vm li.role .values .val:hover {
5229
    background-color: #eee;
5230
}
5231
.create-vm li.role .values .val.selected,  .create-vm li.role .values .val.selected:hover {
5232
    color: #fff;
5233
    background-color: #5CA1C0;
5234
}
5235

    
5236
.create-vm .images-filter-cont, .create-vm .flavors-predefined-cont {
5237
    width: 18%;
5238
    padding-right: 4%;
5239
    float:left;
5240
    border-right: 1px solid #A1C8DB;
5241
    overflow: auto;
5242
}
5243

    
5244
.create-vm .flavor-options-cont {
5245
    width: 74%;
5246
    float: left;
5247
    margin-left: 20px;
5248
}
5249

    
5250
.create-vm .flavor-options-cont .flavor-options li:hover {
5251
    background-image:-webkit-linear-gradient(top, #E8F4FA, #D1E7F0);
5252
    background-image:-o-linear-gradient(top, #E8F4FA, #D1E7F0);
5253
    background-image:-moz-linear-gradient(top, #E8F4FA, #D1E7F0);
5254
    background-image:linear-gradient(top, #E8F4FA, #D1E7F0);
5255
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8F4FA', endColorstr='#D1E7F0', GradientType=0);
5256
}
5257

    
5258
.create-vm .flavor-options-cont .flavor-options li.disabled * {
5259
    color: #eee !important;
5260
}
5261

    
5262
.create-vm .flavor-options-cont .flavor-options li.disabled {
5263
    background-image:linear-gradient(top, #aaa, #ddd);
5264
    background-image:-webkit-linear-gradient(top, #aaa, #ddd);
5265
    background-image:-o-linear-gradient(top, #aaa, #ddd);
5266
    background-image:-moz-linear-gradient(top, #aaa, #ddd);
5267
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#dddddd', GradientType=0);
5268
}
5269

    
5270
.create-vm .flavor-options-cont .flavor-options li.selected {
5271
    background-color: #FF9955;
5272
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5273
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5274
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5275
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5276
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9955', endColorstr='#E88B4D', GradientType=0);
5277
    border: 1px solid #C97943;
5278
}
5279

    
5280
.create-vm .predefined-list li.disabled {
5281
    color: #ddd !important;
5282
}
5283

    
5284
.create-vm .flavor-options-cont .flavor-options li {
5285
    display: block;
5286
    float: left;
5287
    margin-right: 10px;
5288
    padding: 10px 15px;
5289
    border: 1px solid #aaa;
5290
    background-image:-webkit-linear-gradient(top, #D1E7F0, #E8F4FA);
5291
    background-image:-o-linear-gradient(top, #D1E7F0, #E8F4FA);
5292
    background-image:-moz-linear-gradient(top, #D1E7F0, #E8F4FA);
5293
    background-image:linear-gradient(top, #D1E7F0, #E8F4FA);
5294
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1E7F0', endColorstr='#E8F4FA', GradientType=0);
5295
}
5296

    
5297
.create-vm .flavor-options-cont .flavor-options {
5298
    margin-bottom: 25px;
5299
}
5300

    
5301
.create-vm .flavor-options .metric {
5302
    font-size: 0.8em;
5303
    margin-left: 2px;
5304
}
5305

    
5306
.create-vm .flavor-options span.title {
5307
    color: #444;
5308
}
5309

    
5310
.create-vm .flavor-options span.desc {
5311
    display: block;
5312
    color: #aaa;
5313
    font-weight: normal;
5314
    font-size: 0.8em;
5315
    float: right;
5316
    margin-top: 4px;
5317
}
5318

    
5319
.create-vm .flavor-options .selected .value {
5320
    color: #FFF;
5321
}
5322

    
5323
.create-vm .flavor-options .value {
5324
    font-weight: bold;
5325
    color: #5CA1C0;
5326
}
5327

    
5328
.create-vm .flavor-options-cont h4 {
5329
    border-bottom: 1px solid #A1C8DB;
5330
    padding-bottom: 5px;
5331
}
5332

    
5333
.create-vm .images-info-cont {
5334
    width: 28%;
5335
    padding-left: 3%;
5336
    float: left;
5337
    border-left: 1px solid #A1C8DB;
5338
}
5339

    
5340
.create-vm .images-info-cont h4, .create-vm .vm-confirm .param h4{
5341
    color: #FF9955;
5342
    margin-bottom: 1em;
5343
    font-size: 1.2em;
5344
}
5345

    
5346
.create-vm .images-info-cont span.title {
5347
    color: #4085A5;
5348
    display: block;
5349
    margin-bottom: 2px;
5350
    font-size: 0.8em;
5351
}
5352

    
5353
.create-vm .type-filter li {
5354
    font-size: 0.8em;
5355
    font-weight: bold;
5356
    padding: 4px;
5357
    margin-bottom: 0px;
5358
    
5359
}
5360

    
5361
.create-vm .images-list .image-details:hover {
5362
    background-color: #eee;
5363
}
5364

    
5365
.create-vm .images-list .image-details.selected:hover {
5366
    background-color: #5CA1C0;
5367
}
5368

    
5369
.create-vm .images-list .image-details.selected {
5370
    /*font-weight: bold;*/
5371
}
5372

    
5373
.create-vm .images-list .image-details {
5374
    padding: 6px;
5375
    margin-bottom:1px;
5376
    position: relative;
5377
}
5378

    
5379
.create-vm .images-list .image-details img {
5380
    vertical-align: middle;
5381
    margin-right: 10px;
5382
}
5383

    
5384
.create-vm .images-info-cont .image-detail:last-child p {
5385
    border-bottom: none;
5386
}
5387

    
5388
.create-vm .images-info-cont h4 img {
5389
    vertical-align: middle;
5390
    margin-right: 7px;
5391
    margin-bottom: 5px;
5392
}
5393

    
5394
.create-vm .images-info-cont .description p {
5395
    font-size: 0.8em;
5396
}
5397

    
5398
.create-vm .images-info-cont p {
5399
    margin-bottom: 7px;
5400
    font-size: 0.9em;
5401
    border-bottom: 1px solid #A1C8DB;
5402
    padding-bottom: 7px;
5403
}
5404

    
5405
.create-vm .step-header {
5406
    padding: 10px;
5407
    padding-bottom:0;
5408
    margin-bottom: 10px;
5409
    background-color: #A1C8DB;
5410
    border-bottom: 1px solid #aaa;
5411
    position: relative;
5412
}
5413

    
5414
.create-vm .step-header .header-step .info span.subtitle {
5415
    font-size: 1.2em;
5416
    color: #fff;
5417
    font-weight: bold;
5418
}
5419

    
5420
.create-vm .step-header .header-step .info span {
5421
    float: none;
5422
    text-align: right;
5423
}
5424

    
5425
.create-vm .step-header .header-step .info {
5426
    position: absolute;
5427
    right: 15px;
5428
    top: 20px;
5429
    font-size: 0.8em;
5430
}
5431

    
5432
.create-vm .step-header .header-step span {
5433
    float: left;
5434
    display: block;
5435
}
5436

    
5437
.create-vm .steps-container {
5438
    width: 2000em;
5439
}
5440

    
5441
.create-vm .step-header .header-step .title {
5442
    margin-top: 20px;
5443
    font-size: 1em;
5444
    margin-left: 10px;
5445
}
5446

    
5447
#createvm-overlay-content {
5448
    width: 584px;
5449
    overflow: hidden;
5450
}
5451

    
5452
.create-vm .step-header .header-step .num {
5453
    font-size: 4em;
5454
    margin-bottom: -5px;
5455
    font-family: 'Ubuntu';
5456
    font-weight: normal !important;
5457
}
5458

    
5459
.create-vm .step-header .header-step {
5460
    color: #DCEBF1;
5461
    margin-bottom: -6px;
5462
    width: 25%;
5463
    padding-left: 0%;
5464
    display: block;
5465
    float: left;
5466
}
5467

    
5468
.create-vm .step-header .header-step.current {
5469
    color: #387693;
5470
}
5471

    
5472
.create-vm .image-filters-title {
5473
    margin-top: 1em;
5474
    margin-bottom: 0.5em;
5475
}
5476

    
5477
.create-vm .create-step-cont span.clear {
5478
    font-size: 0.8em;
5479
    font-weight: bold;
5480
    color: #A1C8DB;
5481
    display: block;
5482
}
5483

    
5484
.create-vm .category-filters li {
5485
    float:left;
5486
    display: block;
5487
    padding: 4px;
5488
    background-color: #eee;
5489
    margin-right: 5px;
5490
    font-size: 0.9em;
5491
    margin-bottom: 5px;
5492
}
5493

    
5494
.create-vm .content-cont {
5495
    height: 340px;
5496
    overflow: auto;
5497
}
5498

    
5499
.confirm-cont {
5500
    height: 250px;
5501
}
5502

    
5503
.create-vm .vm-confirm .rename input.rename-field {
5504
    font-size: 1.4em;
5505
    padding: 5px;
5506
    width: 93%;
5507
    padding-left: 30px;
5508
    background-position: 7px center;
5509
    background-repeat: no-repeat;
5510
}
5511

    
5512
.create-vm .vm-confirm .rename label {
5513
    display: block;
5514
}
5515

    
5516
.create-vm .vm-confirm .confirm-conts {
5517
    margin-top: 20px;
5518
}
5519

    
5520
.create-vm .vm-confirm .confirm-cont {
5521
    width: 30%;
5522
    margin-right: 2%;
5523
    border-right: 1px solid #A1C8DB;
5524
    float: left;
5525
}
5526

    
5527
.create-vm .vm-confirm .confirm-cont ul li .value {
5528
    float: right;
5529
    padding-top: 2px;
5530
    display: block;
5531
    width: 90px;
5532
    text-align: right;
5533
}
5534

    
5535
.create-vm .vm-confirm .confirm-cont ul li.image-description .value,
5536
.create-vm .vm-confirm .confirm-cont ul li.image-name .value {
5537
    float: none;
5538
    width: auto;
5539
    text-align:left;
5540
    width: auto;
5541
}
5542

    
5543
.create-vm .vm-confirm .confirm-cont ul li {
5544
    padding:0;
5545
    margin:0;
5546
    margin-bottom: 5px;
5547
    border-bottom: 1px solid #EEE;
5548
    padding-bottom: 7px;
5549
    margin-right: 10px;
5550
}
5551

    
5552
.create-vm .vm-confirm .confirm-cont.meta h4 {
5553
    margin-right: 0;
5554
}
5555

    
5556
.create-vm .vm-confirm .confirm-cont.meta {
5557
    margin-right:0;
5558
    border-right: none;
5559
    width: 195px;
5560
}
5561

    
5562
.create-vm .confirm-cont > h4 {
5563
    font-size: 1.2em;
5564
    margin-right: 10px;
5565
    border-bottom: 1px solid #A1C8DB;
5566
    padding-bottom: 5px;
5567
    color: #387693;
5568
}
5569

    
5570
.create-vm .confirm-cont .param.image-name {
5571
    margin-bottom: 0 !important;
5572
    border-bottom: none !important;
5573
}
5574

    
5575
.create-vm .confirm-cont .param h4 {
5576
    margin-bottom: 0px !important;
5577
    font-size: 1.1em !important; 
5578
}
5579

    
5580
.create-vm .confirm-cont .param {
5581
    margin-bottom: 7px !important;
5582
}
5583

    
5584
.create-vm .confirm-cont .value {
5585
    font-weight: bold;
5586
}
5587

    
5588
.create-vm .confirm-cont .param .value {
5589
    font-size: 0.9em;
5590
}
5591

    
5592
.create-vm .confirm-cont .param .title {
5593
    color: #387693;
5594
}
5595

    
5596
.create-vm .confirm-cont .image-description {
5597
    margin-left:0;
5598
}
5599

    
5600
.create-vm .confirm-cont .image-description .value {
5601
    font-weight: normal;
5602
    margin-left: 0 !important;
5603
}
5604

    
5605
.create-vm .confirm-cont .image-description .title {
5606
    display: none;
5607
    font-size: 0.8em;
5608
}
5609

    
5610
.create-vm .confirm-cont.meta .values span {
5611
    display:block;
5612
    float: left;
5613
    margin-right: 4px;
5614
    border: 1px solid #eee;
5615
    padding:3px;
5616
    margin-bottom: 4px;
5617
    font-size: 0.9em;
5618
}
5619

    
5620
.create-vm .confirm-cont.meta .key {
5621
    font-weight: bold;
5622
    font-size: 0.9em;
5623
    display: block;
5624
    margin-bottom: 5px;
5625
}
5626

    
5627
.create-vm .meta input {
5628
    font-size: 0.8em;
5629
}
5630

    
5631
.vm-connect .connect-cont {
5632
    margin-bottom: 20px;
5633
    border-bottom: 1px solid #A1C8DB;
5634
    padding-bottom: 20px;
5635
}
5636

    
5637
.vm-connect .connection-info {
5638
    padding-bottom: 0px;
5639
    margin-bottom: 0;
5640
    border-bottom: none;
5641
}
5642

    
5643
.vm-connect .connection-info .connect a {
5644
    color: #fff;
5645
}
5646

    
5647
.vm-connect .connection-info .connect {
5648
    background-color: #387693;
5649
    color: #fff;
5650
    padding: 10px;
5651
    font-size: 1.2em;
5652
    text-align: center;
5653
}
5654

    
5655
.clip-copy {
5656
    display: block;
5657
    width: 20px;
5658
    height: 20px;
5659
    position: absolute;
5660
    border: 1px solid #387693;
5661
    background-image: url("./clipboard.png");
5662
    background-repeat: no-repeat;
5663
    background-position: center;
5664
    cursor: pointer;
5665
    background-color: #A1C8DB;
5666
}
5667

    
5668
.password-cont .clip-copy { right: 10px; top: 8px;}