Statistics
| Branch: | Tag: | Revision:

root / ui / static / snf / css / main.css @ 93f35bf9

History | View | Annotate | Download (103.1 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("../images/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
    z-index: 1;
42
}
43

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

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

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

    
65
#footer a {
66
    color: #fff;
67
}
68

    
69
#footer .software .version {
70
    font-weight: bold;
71
}
72

    
73
#footer .software {
74
    font-size: 0.6em;
75
    margin-top: 7px;
76
    color: #fff;
77
}
78

    
79
#footer {
80
    height: 80px;
81
    background-color: #4085A5;
82
    width:100%;
83
}
84

    
85
#footer-container {
86
    height: 80px;
87
    width: 100%;
88
    left:0;
89
    z-index:10;
90
}
91

    
92
#footer div.grnet-sign {
93
    margin-top:10px;
94
}
95

    
96
#footer div.grnet-sign a{
97
    color: #72ADC8;
98
}
99

    
100
#footer div.grnet-sign a:hover {
101
    color: #FFFFFF;
102
}
103

    
104
ol, ul {
105
    list-style: none;
106
}
107

    
108
blockquote, q {
109
    quotes: none;
110
}
111

    
112
blockquote:before, blockquote:after,
113
q:before, q:after {
114
    content: '';
115
    content: none;
116
}
117

    
118
/* remember to define focus styles! */
119
:focus {
120
    outline: 1px dotted #87AADE;
121
}
122

    
123
/* remember to highlight inserts somehow! */
124
ins {
125
    text-decoration: none;
126
}
127

    
128
del {
129
    text-decoration: line-through;
130
}
131

    
132
/* tables still need 'cellspacing="0"' in the markup */
133
table {
134
    border-collapse: collapse;
135
    border-spacing: 0;
136
}
137

    
138
h5 {
139
    font-weight: normal;
140
    margin-bottom:3px;
141
}
142

    
143
.tab-name, 
144
.machine-container .name,
145
h5.namecontainer span,
146
.single .machine-detail.title {
147
    font-family: 'Ubuntu', sans-serif;
148
}
149

    
150
.create-container a {
151
    font-family: 'Open Sans', sans-serif;
152
}
153

    
154
/* root element for tabs  */
155
.tab-name {
156
    background-color: #5CA1C0;
157
    color: #FFFFFF;
158
    float: right;
159
    font-size: 150%;
160
    height: 31px;
161
    text-align: right;
162
    padding-right: 15px;
163
    width: 170px;
164
}
165

    
166
.tab-separator {
167
    background-color: white;
168
    float: left;
169
    width: 2px;
170
    height: 23px;
171
    margin-top: 4px;
172
}
173

    
174
ul.css-tabs {
175
    padding: 0;
176
    height:31px;
177
    background-color: #5CA1C0;
178
}
179

    
180
ul.css-tabs .secondary {
181
    position:relative;
182
}
183

    
184
/* single tab */
185
ul.css-tabs li {
186
    float:left;
187
    padding:0;
188
    list-style-type:none;
189
}
190

    
191
ul.css-tabs .current {
192
    background: #4085A5;
193
}
194

    
195
/* link inside the tab. uses a background image */
196
ul.css-tabs a {
197
    float:left;
198
    display:block;
199
    text-decoration:none;
200
    color:#d2d2d2;
201
    position:relative;
202
    outline:0;
203
    padding: 4px 25px 0;
204
    height: 27px;
205
}
206

    
207
ul.css-tabs a:hover {
208
    background: #74AEC9;
209
}
210

    
211
/* selected tab */
212
ul.css-tabs a.current,
213
ul.css-tabs a.active {
214
    cursor:default;
215
    background: #4085A5;
216
}
217

    
218
/* tab pane */
219
div.css-panes {
220
/*    border-top: 10px solid #87aade;
221
    border-bottom: 10px solid #87aade;  */
222
    background: transparent;
223
}
224

    
225
.css-panes > div.pane {
226
    display:none;
227
}
228

    
229
.panes-menu {
230
    height: 30px;
231
    margin-bottom: 10px;
232
}
233
/* CSS3 border radius for various elements. yea - CSS isn't perfect */
234
.rounded, #sheet input, .error {
235
    border-radius: 5px;
236
    -webkit-border-radius: 5px;
237
    -moz-border-radius: 5px;
238
    -o-border-radius: 5px;
239
    -khtml-border-radius: 5px;
240
}
241

    
242
/*validation error message*/
243
/*.error {*/
244
    /*background-color:#E8FF6D;*/
245
    /*padding:4px;*/
246
    /*-webkit-box-shadow: #000 0 0 9pt;*/
247
    /*-moz-box-shadow: #000 0 0 9pt;*/
248
/*}*/
249
.error {
250
    color: #f00 !important;
251
}
252

    
253
/* nested arrow inside error message. It's 100% CSS. No images. */
254
.error em {
255
    border: 10px solid;
256
    border-color: #E8FF6D transparent transparent;
257
    bottom: -17px;
258
    display: block;
259
    height: 0;
260
    left: 10px;
261
    position: absolute;
262
    width: 0;
263
}
264

    
265
/* input field that caused validation error */
266
.invalid {
267
    background-color: rgba(221, 233, 255, 0.898) !important;
268
}
269

    
270
#beforecreate {
271
    background-color: #FF9955;
272
    height: 32px;
273
    width: 13px;
274
}
275

    
276
.pane-top {
277
    height: 70px;
278
    position: relative;
279
    background: #EFF7FA 0px 0px;
280
    /*margin-bottom: -2px;*/
281
}
282

    
283
#machines-pane-top.empty {
284
    background: transparent;
285
}
286

    
287
#beforecreate {
288
    border-left: 16px solid #efefef;
289
    margin-left: -16px;
290
}
291

    
292
.create-container {
293
    line-height: 4em;
294
}
295

    
296
#createcontainer a {
297
}
298

    
299
#create {
300
    background-color: #FF7F2A;
301
    color: #000;
302
    cursor: pointer;
303
    text-decoration: none;
304
    font-size:100%;
305
}
306

    
307
#create:hover {
308
    background-color: #FF9955;
309
}
310

    
311
#console-header {
312
    height: 67px;
313
    margin-bottom:15px;
314
    background: url("../images/header-bg.png") repeat-x scroll 0 0 #FFFFFF;
315
}
316

    
317
.header-logo {
318
    padding-top: 28px;
319
}
320

    
321
div#footer-text a {
322
    color: #FFFFFF;
323
    text-decoration: none;
324
}
325

    
326
div#footer-text{
327
    color: #FFFFFF;
328
    font-size: 75%;
329
    padding-top: 10px;
330
}
331

    
332
#footer-bg {
333
    background: url("../images/footer-bg.png") no-repeat scroll 0 0 #4085A5;
334
    background-position:right;
335
}
336

    
337
.modal {
338
    background-color:#fff;
339
    display:none;
340
    width:30em;
341
    padding:1em;
342
    text-align:left;
343
}
344

    
345
/* server wizard scrollable root element and network wizard */
346
#wizard, #networks-wizard {
347
    font-size:75%;
348
    height:425px;
349
    width:453px;
350
    overflow:hidden;
351
    position:absolute !important;
352
}
353

    
354
/* scrollable items */
355
#wizard .items {
356
    width:20000em;
357
    clear:both;
358
    position:absolute;
359
    display:block;
360
    padding: 0;
361
    margin: 0;
362
    border:none;
363
    background:none;
364
}
365

    
366
/* single item */
367
#wizard .page, #networks-wizard div.container {
368
    padding: 0px 40px 20px 15px;
369
    width:447px;
370
    float:left;
371
    display:block;
372
    border:none;
373
    background-color: transparent;
374
}
375

    
376
#networks-wizard div.container {
377
    background-color: #ECF4F8;
378
    width:400px;
379
    height: 180px;
380
    margin-bottom:50px;
381
}
382

    
383
/* title */
384
#wizard h2, #networks-wizard h2 {
385
    color: #FF7B24;
386
    font-size: 100%;
387
    font-style: italic;
388
    font-weight: bold;
389
    margin-left: 37px;
390
    margin-top: 17px;
391
}
392

    
393
#networks-wizard h2 {
394
    margin-top: 15px;
395
}
396

    
397
#wizard li {
398
    margin-bottom:1.2em;
399
}
400

    
401
#wizard .pane li {
402
    margin: 0;
403
}
404

    
405
#wizard label {
406
    font-size:120%;
407
    display:block;
408
    clear: both;
409
}
410

    
411
#wizard label strong {
412
    position:relative;
413
    top:-1px;
414
    font-size: 80%;
415
    font-weight: normal;
416
}
417

    
418
#wizard label em {
419
    font-size:75%;
420
    color:#666;
421
    font-style:normal;
422
}
423

    
424
#wizard .text {
425
    width: 270px;
426
    padding: 5px;
427
    margin-top: 10px;
428
    border: 1px solid #ccc;
429
    color: #456;
430
    letter-spacing: 1px;
431
}
432

    
433
#wizard select {
434
    border:1px solid #ccc;
435
    width:94%;
436
    padding:4px;
437
    display: none;
438
}
439

    
440
#wizard .double label {
441
    width:50%;
442
    float:left;
443
}
444

    
445
#wizard .double .text {
446
    width:93%;
447
}
448

    
449
#wizard .clearfix {
450
    clear:left;
451
    padding-top:10px;
452
}
453

    
454
#wizard .right {
455
    float:right;
456
}
457

    
458
#wizard .error {
459
    border:1px solid red;
460
}
461

    
462
#wizard a:hover div.image {
463
    background-color: #C5DEE9;
464
}
465

    
466
.selecteddiv {
467
    background-color: #C5DEE9 !important;
468
}
469

    
470
#wizard label a:hover strong {
471
    color: black;
472
}
473

    
474
#wizard div.image span.size {
475
    font-size: 75%;
476
    color: #666;
477
}
478

    
479
#wizard div.image .radio {
480
    float: left;
481
    margin-top: 10px;
482
}
483

    
484
#wizard div.image span.image-id, #wizard div.image span.description {
485
    font-size: 75%;
486
    color: #666;
487
    font-weight: normal;
488
    display:inline;
489
}
490

    
491
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
492
    color: black;
493
}
494

    
495
#wizard .cost {
496
    color: #79A4C1;
497
    margin-top: 40px;
498
    clear:both;
499
    margin-left: 15px;
500
    font-size: 95%;
501
}
502

    
503
#wizard #status {
504
    height: 50px;
505
    background-color: #4085A5;
506
}
507

    
508
#wizard .headernumber {
509
    font-size: 410%;
510
}
511

    
512
#wizard .headerbody {
513
    font-size: 120%;
514
    font-weight: normal;
515
    display: inline;
516
    top: -15px;
517
    position: relative;
518
}
519

    
520
#wizard .first {
521
    left: -10px;
522
}
523

    
524
#wizard .checked {
525
    color: #64a6c4 !important;
526
}
527

    
528
#wizard .li-2 {
529
    margin-top: -1px !important;
530
}
531

    
532
#wizard .img-check {
533
    margin-bottom: 8px;
534
    margin-left: -8px;
535
}
536

    
537
#wizard .li-1 .img-check {
538
    margin-left: 2px;
539
}
540

    
541
#wizard .topruler, #networks-wizard .topruler, #wizard .bottomruler, #networks-wizard .bottomruler {
542
    background-color: #CDE2EC;
543
    color: #CDE2EC;
544
    border: 0 none;
545
    height: 4px;
546
    margin-left: -1px;
547
    width: 447px;
548
    margin-bottom: 6px;
549
    margin-top: 4px;
550
}
551

    
552
#wizard .bottomruler, #networks-wizard .bottomruler {
553
    margin-top:6px;
554
}
555

    
556
#networks-wizard .topruler, #networks-wizard .bottomruler {
557
    width: 455px;
558
    float: left;
559
}
560

    
561
#wizard #cancel, #networks-wizard .cancel {
562
    background-color: #4085A5;
563
    border-color: #4085A5;
564
    text-align: center !important;
565
}
566

    
567
#wizard #cancel:hover, #networks-wizard .cancel:hover {
568
    background-color: #7DB4CD;
569
    border-color: #7DB4CD;
570
}
571

    
572
#wizard #start, #networks-wizard .create {
573
    text-align: center;
574
    background-color: #FF7F2A;
575
    border-color: #FF7F2A;
576
}
577

    
578
:focus {
579
    outline: none;
580
    -moz-outline-style: none;
581
}
582

    
583
#wizard .img-next {
584
    margin: 0 -4px -1px 8px;
585
}
586

    
587
#wizard .img-prev {
588
    margin: 0 8px -1px -4px;
589
}
590

    
591
#networks-wizard .create {
592
    float:right;
593
    width: 140px;
594
}
595

    
596
.overlay-networks-create .form-actions {
597
    float: right;
598
    margin-top: -26px !important;
599
}
600

    
601
#wizard #start:hover, #networks-wizard .create:hover {
602
    background-color: #FF9651;
603
    border-color: #FF9651;
604
}
605

    
606
#wizard .separator-end {
607
    position: absolute;
608
    background-color: #387693;
609
    height: 5px;
610
    margin-left: -14px;
611
    margin-top: 382px;
612
    width: 550px;
613
}
614

    
615
.page ul {
616
    height: 270px;
617
    overflow: auto;
618
}
619

    
620
.panes ul.pane {
621
    height: 220px;
622
}
623

    
624
#wizard #tabscontainer {
625
    background-color: #CDE2EC;
626
    height: 20px;
627
    width: 448px;
628
}
629

    
630
.page ul.tabs {
631
    overflow: hidden;
632
    height: auto;
633
    margin-bottom: -1px;
634
    margin-top: -1px;
635
}
636

    
637
.page ul.tabs li {
638
    float: right;
639
    margin: 0 0.2em;
640
}
641

    
642
#status li {
643
    float: left;
644
    color: #387693;
645
    padding: 0 1px 0 37px;
646
    bottom: 0px;
647
}
648

    
649
#status li.active .headernumber {
650
    color: #FFFFFF;
651
}
652

    
653
#status li.active .headerbody {
654
    color: #FFFFFF;
655
}
656

    
657
div.image-container {
658
    border-bottom: 1px solid #CCCCCC;
659
    margin-left: 10px;
660
    margin-right: 10px;
661
}
662

    
663
#page2-container {
664
    background-color: #ECF4F8;
665
    height: 193px;
666
    margin-top: 3px;
667
    padding-top: 25px;
668
}
669

    
670
#page3-container {
671
    background-color: #ECF4F8;
672
    height: 245px;
673
    margin-bottom: 32px;
674
    padding-left: 50px;
675
}
676

    
677
/* slider root element */
678
.slider {
679
    border: 1px solid #666;
680
    cursor: pointer;
681
    display: inline !important;
682
    float: left;
683
    margin: 5px 0 20px 10px;
684
    position: relative;
685
    width: 250px;
686
}
687

    
688
.sliders {
689
    float:left;
690
    width: 40px;
691
    margin-left: 10px;
692
    margin-top: 3px;
693
}
694

    
695
.units {
696
    padding-left:10px;
697
}
698

    
699
.slider-container {
700
    padding-bottom: 15px;
701
    margin-left: 5px;
702
}
703

    
704
/* drag handle */
705
.handle {
706
    -moz-box-shadow: 0 0 2px #000000;
707
    background: url("../images/h30.png") repeat-x scroll 0 0 #FFFFFF;
708
    border: 1px solid #000000;
709
    cursor: move;
710
    display: block;
711
    height: 10px;
712
    margin-top: -8px;
713
    position: absolute;
714
    width: 8px;
715
}
716

    
717
/* progress bar (enabled with progress: true) */
718
.progress {
719
    height: 3px;
720
    background-color: #387693;
721
}
722

    
723
/* the input field */
724
.range {
725
    border: 1px solid #387693;
726
    float: left;
727
    font-size: 100%;
728
    margin: -3px 0 0 15px;
729
    padding: 2px 5px 2px 0;
730
    text-align: right;
731
    width: 50px;
732
}
733

    
734
.selectedrange {
735
    border-color: #5599FF;
736
}
737

    
738
#credits-indicator {
739
    background-color: #ECF4F8;
740
    float: none;
741
    margin: 0 0 0 10px;
742
    border: 1px solid #387693;
743
    color: #387693;
744
}
745

    
746
/* machines */
747
.machine-container {
748
    position:relative;
749
}
750

    
751
.icon .machine-container.last .machine-data-cont, .machine-container:last-child .machine-data-cont {
752
    margin-bottom:0;
753
    padding-bottom: 0;
754
    border-bottom: none;
755
}
756

    
757
.icon .machine-container.last .machine-data, .machine-container:last-child .machine-data {
758
    border-bottom: none;
759
}
760

    
761
.icon .machine-container .subtitle {
762
    font-size: 0.70em;
763
    color: #222;
764
    line-height: 23px;
765
    height: 23px;
766
    margin-top: -5px;
767
}
768

    
769
.icon .machine-container .subtitle {
770
    
771
}
772

    
773
.icon .machine-container .info {
774
    margin-top: 2px;
775
    height: 17px;
776
}
777

    
778
.icon .machine-container .building-progress {
779
    vertical-align: top;
780
}
781

    
782
.ip-version-label {
783
    font-size: 0.8em;
784
    padding: 0.3em;
785
    background-color: #C4DDE9;
786
    color: #000;
787
}
788

    
789
.icon .machine-data {
790
    width: 520px;
791
    float: left;
792
    background-color: transparent;
793
}
794

    
795
.icon .machine-info {
796
    padding: 10px 0;
797
}
798

    
799
.icon .machine-details .name {
800
    height: 24px;
801
}
802

    
803
.icon .machine-connect {
804
    width: 80px;
805
    float: left;
806
}
807

    
808
.icon .machine-details {
809
    width: 310px;
810
    float: left;
811
    margin-top: -5px;
812
}
813

    
814
.icon .state {
815
    font-size: 98%;
816
    width: 120px;
817
    margin-right: 10px;
818
    float: left;
819
    height: 55px;
820
    margin-top: -5px;
821
}
822

    
823
.vm-actions {
824
    position: relative;
825
}
826

    
827
.icon .vm-actions {
828
    /*display: none;*/
829
}
830

    
831
.icon .vm-actions, .network .vm-actions {
832
    width: 180px;
833
    height: 76px;
834
    float: left;
835
}
836

    
837
.network .vm-actions {
838
    width: 185px;
839
}
840

    
841
.icon .machine-container:hover .machine-data {
842
    background-color:#A1C8DB !important;
843
}
844

    
845
.icon .machine-container:hover .vm-actions {
846
    display: block;
847
}
848

    
849
.vm-actions {
850
    font-size: 75%;
851
}
852

    
853
.vm-actions a {
854
    color: black;
855
    height: 15px;
856
    margin: 0 0 1px 4px;
857
    padding: 1px;
858
    padding-left: 8px;
859
    display: block;
860
}
861

    
862
.vm-actions a:hover {
863
    background-color:#A1C8DB;
864
    color: #fff;
865
    border-left: 4px solid #7DB4CD;
866
    padding-left: 4px;
867
}
868

    
869
.vm-actions a.selected {
870
    color: #FF7F2A !important;
871
}
872

    
873
.vm-actions a.selected {
874
    background-color:transparent;
875
}
876

    
877
.vm-actions .action-container {
878
    position: relative;
879
}
880

    
881
.vm-actions .action-container .confirm_single {
882
    position: absolute;
883
    right: -20px;
884
    top: -2px;
885
}
886

    
887
div.list div.actions a.enabled.destroy {
888
}
889

    
890
.vm-actions .action-container.destroy {
891
    position: absolute;
892
    bottom: -1px;
893
    width: 100%;
894
    left: 0px;
895
    background: transparent;
896
}
897

    
898
.vm-actions .action-container.destroy a {
899
}
900

    
901
.icon .light-background .machine-data, div.network.light-background, div.network.expand {
902
    background-color:#aed2e3 !important;
903
}
904

    
905
.single .light-background {
906
    background-color:#aed2e3;
907
}
908

    
909
.icon .machine-data-cont {
910
    margin-bottom: 5px;
911
    padding-bottom: 5px;
912
    border-bottom: 1px solid #D1E7F0;
913
    width: 520px;
914
    float: left;
915
}
916
.icon .terminated .machine-data-cont {
917
    border-color: #B6CED6;
918
}
919

    
920
.machine a {
921
    font-weight: normal;
922
    text-decoration: none;
923
}
924

    
925
.machine span.name, .machine span.ip {
926
    font-size: 75%;
927
    color: black;
928
    margin-top: 6px;
929
}
930

    
931
.machine span.name {
932
    font-weight: bold;
933
}
934

    
935
.oldValue {
936
    display:none;
937
}
938

    
939
.state {
940
}
941

    
942
.state div {
943
    text-align: right;
944
    margin-right: 3px;
945
}
946

    
947
/* icon view actions */
948
div.machine div.actions a.shutdown-padding {
949
    margin-bottom: 22px;
950
}
951

    
952
div.actions a.enabled:hover{
953
    color: black !important;
954
    text-decoration: underline;
955
    display: block;
956
}
957

    
958
div.machine:hover .actions a {
959
    visibility: visible;
960
}
961

    
962
div.machine div.display a{
963
    visibility: visible;
964
}
965

    
966
div.machine div.actions .disabled {
967
    display: none;
968
}
969

    
970
div.single-container div.vm-actions .disabled {
971
    display: none;
972
}
973

    
974
div.machine div.actions .disabled {
975
    display: none;
976
}
977

    
978
div.connect-arrow {
979
    background: url("../images/connect-arrow.png") no-repeat;
980
    height: 28px;
981
    width:14px;
982
    position: absolute;
983
    display: none;
984
}
985

    
986
.machine div.connect-arrow {
987
    display: none;
988
    left: -3px;
989
    position: absolute;
990
    top: 9px;
991
}
992

    
993
div.connect-arrow:hover, div.connect-arrow.border-hover, div.connect-arrow-ie, div.connect-arrow.border-ie {
994
    cursor: pointer;
995
    background: url("../images/connect-arrow-hover.png") no-repeat;
996
    height: 28px;
997
    width:26px;
998
}
999

    
1000
div.connect-border {
1001
    opacity: 0.8;
1002
    filter: alpha(opacity = 80);
1003
    background-color:#4fe0c3;
1004
    height:28px;
1005
    width: 12px;
1006
    position: absolute;
1007
    display: none;
1008
}
1009

    
1010
div.connect-border:hover {
1011
    cursor: pointer;
1012
}
1013

    
1014
.machine div.connect-border {
1015
    display: none;
1016
    left: -15px;
1017
    position: absolute;
1018
    top: 9px;
1019
}
1020

    
1021
.standard .machine .logo {
1022
    float: left;
1023
    width: 50px;
1024
    height: 54px;
1025
    margin: 1px 14px 0;
1026
}
1027
.machine .logo {
1028
    background-image: url("../images/icons/machines/medium/unknown-sprite.png");
1029
    background-repeat: no-repeat;
1030
    cursor: pointer;
1031
}
1032

    
1033
.standard .machine .single-image-state1 {
1034
    background-position: 0px 0;
1035
}
1036

    
1037
.standard .machine .single-image-state3 {
1038
    background-position: -100px 0;
1039
}
1040

    
1041
.standard .machine .single-image-state4 {
1042
    background-position: -150px 0;
1043
}
1044

    
1045
.standard .machine .single-image-state2 {
1046
    background-position: -50px 0;
1047
}
1048

    
1049
.standard .running .machine .logo {
1050
   cursor: pointer;
1051
}
1052

    
1053
.list .machine img {
1054
    margin: 0;
1055
}
1056

    
1057
.icon div.ip, .icon div.ips {
1058
    font-size: 75%;
1059
}
1060

    
1061
div.indicators {
1062
    margin-right: 2px !important;
1063
}
1064
div.indicator1, div.indicator2, div.indicator3, div.indicator4 {
1065
    background-color: #63cf1c;
1066
    width:10px;
1067
    height:11px;
1068
    clear: none;
1069
    float:right;
1070
    -webkit-transition: background-color .75s ease-out;
1071
    -o-transition: background-color .75s ease-out;
1072
    -moz-transition: background-color .75s ease-out;
1073
    transition: background-color .75s ease-out;
1074
}
1075

    
1076
.view-separator {
1077
    color:#5F8DD3;
1078
}
1079

    
1080
.running.disabled {
1081
    background: transparent;
1082
}
1083

    
1084
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
1085
    background-color: #63cf1c;
1086
}
1087

    
1088
.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
1089
    background-color: #d4aa00;
1090
}
1091

    
1092
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
1093
    background-color: #ff0000;
1094
}
1095

    
1096
.terminated-state .indicator1, .terminated-state .indicator2, .terminated-state .indicator3, .terminated-state .indicator4 {
1097
    background-color: #5e1616;
1098
}
1099

    
1100
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
1101
    background-color: #FF7F2A;
1102
}
1103

    
1104
.destroying-state .indicator1, .destroying-state .indicator3, .destroying-state .indicator2, .destroying-state .indicator4 {
1105
    background-color: #4085a5 !important;
1106
}
1107

    
1108
.shutting-state .indicator1, .shutting-state .indicator3, .shutting-state .indicator2, .shutting-state .indicator4 {
1109
    background-color: #940606;
1110
}
1111

    
1112
.starting-state .indicator1, .starting-state .indicator2, .starting-state .indicator3, .starting-state .indicator4 {
1113
    background-color: #9ed976;
1114
}
1115

    
1116
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
1117
    background-color: #63cf1c;
1118
}
1119

    
1120
.network-indicator.in-progress .indicator1, .network-indicator.in-progress .indicator2, .network-indicator.in-progress .indicator3, .network-indicator.in-progress .indicator4 {
1121
    background-color: #FF7F2A;
1122
}
1123

    
1124
.running, .terminated {
1125
    background: #EFF7FA repeat scroll 0 0;
1126
    padding-bottom: 15px;
1127
}
1128

    
1129
.running, #machinesview-list, .single {
1130
}
1131

    
1132
.terminated {
1133
    background:#DCE5E8  repeat scroll 0 0;
1134
    padding-top: 15px;
1135
    margin-top: 15px;
1136
}
1137

    
1138
span.rename {
1139
    background-repeat: no-repeat;
1140
    color: transparent;
1141
    font-size: 75%;
1142
    font-weight: normal;
1143
    margin-left: 10px;
1144
    padding-left: 10px;
1145
    text-align: left;
1146
    cursor: pointer;
1147
}
1148

    
1149
div.name:hover span.rename, span.rename_hovered {
1150
    color: #3D3D3D;
1151
    margin-top: 0.4em;
1152
    background-image: url("../images/pencil.png");
1153
    background-position: 0 3px;
1154
}
1155

    
1156
.machine div.info {
1157
    font-size: 75%;
1158
}
1159

    
1160
div.machine:hover div.info-header, div.machine:hover div.toggler div.down {
1161
    background-color: #84b7d0;
1162
}
1163

    
1164
div.machine div.info-label.darker, .single div.tags-label.darker, div.network .darker {
1165
    background-color: #5CA1C0;
1166
}
1167

    
1168
.machine div.info div.info-label {
1169
    font-size: 75%;
1170
    height:16px;
1171
    width: 30px;
1172
    padding: 1px 0 0 5px;
1173
}
1174

    
1175
.machine div.info div.toggler, .single div.tags div.toggler, div.network div.toggler {
1176
    width:15px;
1177
    height:17px;
1178
    margin-top: -11px;
1179
    margin-left: 37px;
1180
}
1181

    
1182
div.network div.toggler {
1183
    margin-left: 90px;
1184
}
1185

    
1186
.machine div.info div.down {
1187
    background: url(../images/down-arrow.png) no-repeat scroll 1px 1px;
1188
}
1189

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

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

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

    
1202
.machine div.info div.up {
1203
    background: url(../images/up-arrow.png) no-repeat scroll 1px 0;
1204
}
1205

    
1206
.single div.tags div.up {
1207
    background: url(../images/up-arrow.png) no-repeat scroll 2px 2px;
1208
}
1209

    
1210
.network div.network-machines div.up {
1211
    background: url(../images/up-arrow.png) no-repeat scroll 2px 2px;
1212
}
1213

    
1214
.network div.network-machine div.firewall div.up {
1215
    background: url(../images/up-arrow.png) no-repeat scroll 2px 2px;
1216
}
1217

    
1218
button {
1219
    background-color: #87AADE;
1220
    border: 1px solid #87AADE;
1221
    color: #FFFFFF;
1222
    cursor: pointer;
1223
    height: 23px;
1224
    width: 120px;
1225
}
1226

    
1227
button.next {
1228
    background-color: #4085A5;
1229
    border-color: #4085A5;
1230
    text-align: right;
1231
}
1232

    
1233
button.next:hover {
1234
    background-color: #7DB4CD;
1235
    border-color: #7DB4CD;
1236
}
1237

    
1238
button.prev {
1239
    background-color: #4085A5;
1240
    border-color: #4085A5;
1241
    margin-left: -1px;
1242
    text-align: left;
1243
}
1244

    
1245
button.prev:hover {
1246
    background-color: #7DB4CD;
1247
    border-color: #7DB4CD;
1248
}
1249

    
1250
.image-logo {
1251
    float: left;
1252
    margin-right: 1em;
1253
    margin-left: 1.5em;
1254
    margin-top: 4px;
1255
}
1256

    
1257
.icon div.image {
1258
    clear: both;
1259
    display: block;
1260
    margin-bottom: 3px;
1261
    margin-top: 3px;
1262
    padding: 5px;
1263
}
1264

    
1265
div#view-select {
1266
    clear: both;
1267
    color: white;
1268
    position: absolute;
1269
    right: 15px;
1270
    top: 15px;
1271
}
1272

    
1273
a.machines_view_link {
1274
    text-decoration: none;
1275
    font-size: 0.7em;
1276
    padding: 4px;
1277
    padding-right: 8px;
1278
    color: #5CA1C0;
1279
    margin-left: 5px;
1280
    background-repeat: no-repeat;
1281
    background-color: #C9DFEA;
1282
}
1283

    
1284
a.machines_view_link span {
1285
    float: left;
1286
}
1287

    
1288
a.machines_view_link span.ico {
1289
    width: 17px;
1290
    height: 15px;
1291
    margin-right: 10px;
1292
    background-position: -36px 0;
1293
}
1294

    
1295
a.machines_view_link:hover {
1296
    background-color: #A1C8DB;
1297
    color: #fff;
1298
}
1299
a.machines_view_link:hover span.ico {
1300
    background-position: -0px 0px;   
1301
}
1302

    
1303
a.machines_view_link.activelink span.ico {
1304
    background-position: -18px 0px;
1305
}
1306
a.machines_view_link.activelink {
1307
    color: #fff;
1308
    background-color: #5CA1C0;
1309
}
1310

    
1311
div#view-select a {
1312
    display: block;
1313
    float: left;
1314
}
1315

    
1316
a#list:hover {
1317
    background: #5f8dd3;
1318
}
1319

    
1320
a#machines_view_icon_link:active, a#machines_view_list_link:active {
1321
    color:white;
1322
}
1323

    
1324
a#machines_view_icon_link span.ico {
1325
    background-image: url("../images/icon-view.png");
1326
}
1327

    
1328
a#machines_view_list_link span.ico {
1329
    background-image: url("../images/list-view.png");
1330
}
1331

    
1332
a#machines_view_single_link span.ico {
1333
    background-image: url("../images/single-view.png");
1334
}
1335

    
1336
#machinetype {
1337
    background-color: #CDE2EC;
1338
    height: 25px;
1339
    margin-bottom: 0px !important;
1340
}
1341

    
1342
div.machine-type {
1343
    float: left;
1344
    margin: 4px 18px 20px;
1345
}
1346

    
1347
.machine-type .active {
1348
    color: #FFFFFF
1349
}
1350

    
1351
div.machine-type label.disabled {
1352
    color: #aaa !important;
1353
}
1354

    
1355
#machinesview {
1356
}
1357

    
1358
#machines-pane {
1359
}
1360

    
1361
.list#machinesview {
1362
    margin-left: -20px;
1363
    display:none;
1364
}
1365

    
1366
#machinesview-list.list {
1367
    background: #EFF7FA  repeat scroll 0 0;
1368
    padding-left: 15px;
1369
    padding-bottom: 15px;
1370
}
1371

    
1372
#machinesview_content {
1373
    display:none;
1374
}
1375

    
1376
.list-machines {
1377
    min-width: 515px;
1378
}
1379

    
1380
#emptymachineslist {
1381
    background-color: #6BA9C6;
1382
    color: #A0A0A0;
1383
    display: none;
1384
    padding: 65px 150px 35px;
1385
    text-align: justify;
1386
    margin-top: -70px;
1387
}
1388

    
1389
#welcomeheader {
1390
    color:white;
1391
    text-align: center;
1392
}
1393

    
1394
.welcomebody {
1395
    color: white;
1396
    font-size:80%;
1397
}
1398

    
1399
.welcomebody a {
1400
    color: white;
1401
}
1402

    
1403
.welcomefooter {
1404
    color: white;
1405
    font-size:60%;
1406
}
1407

    
1408
.welcomefooter a {
1409
    color: white;
1410
}
1411

    
1412
.emptycreatecontainer {
1413
    margin-left: 430px !important;
1414
    position: absolute;
1415
    margin-top: 5px !important;
1416
    width: 180px;
1417
    background-color: #CCCCCC;
1418
    padding: 5px;
1419
    padding-left: 10px;
1420
}
1421

    
1422
.emptycreate {
1423
    margin: 20px 10px 5px 0 !important;
1424
}
1425

    
1426
#createbody {
1427
    display:none;
1428
    font-size: 80%;
1429
}
1430

    
1431
div.list label img {
1432
    margin: 5px 5px -3px 0;
1433
}
1434

    
1435
div.list label {
1436
    color: #3D3D3D;
1437
    font-size: 75%;
1438
}
1439

    
1440
div.list .state {
1441
    margin-top: 7px;
1442
    margin-right: 10px;
1443
}
1444

    
1445
div.list table tbody {
1446
    margin-top: 8px;
1447
}
1448

    
1449
div.list table tr.checked td {
1450
    background-color: #A1C8DB !important;
1451
}
1452

    
1453
div.list table tr:hover td,
1454
div.list table tr.inactive:hover td,
1455
div.list table tr.error:hover td {
1456
    background-color: #A1C8DB;
1457
    color: #fff;
1458
}
1459

    
1460
div.list table td.name {
1461
    min-width: 170px;
1462
}
1463

    
1464
div.list table td.status {
1465
    font-size: 0.9em !important; 
1466
    text-align: right;
1467
    min-width: 90px;
1468
    color: #000;
1469
}
1470

    
1471
div.list table td.flavor {
1472
    font-size: 0.8em;
1473
}
1474

    
1475
div.list table td {
1476
    border-bottom: 1px solid #DDD;
1477
}
1478

    
1479
div.list table tr.error td.status {
1480
    color: #800000 !important;
1481
    font-weight: bold;
1482
}
1483

    
1484
div.list table tr.error td {
1485
    background-color: #DCE5E8;
1486
}
1487

    
1488
div.list table tr.inactive td {
1489
    background-color: #DCE5E8;
1490
}
1491

    
1492
div.list .stopped {
1493
    margin-top: 8px;
1494
}
1495

    
1496
/* root element for tabs  */
1497
#wizard ul.tabs {
1498
    margin-right: -1px;
1499
    float: right;
1500
}
1501

    
1502
#wizard div.panes {
1503
    height: 247px;
1504
    clear:both;
1505
    margin-top: 3px;
1506
}
1507

    
1508
.typebody {
1509
    font-size: 80%;
1510
    font-weight: normal;
1511
    position: relative;
1512
    top: -3px;
1513
}
1514

    
1515
.typehover {
1516
    color: #FFFFFF;
1517
}
1518

    
1519
#label-name {
1520
    margin-top: 10px;
1521
}
1522

    
1523
/* single tab */
1524
#wizard ul.tabs li {
1525
    margin-bottom: 0;
1526
    list-style-type:none;
1527
    float: left;
1528
}
1529

    
1530
/* link inside the tab. uses a background image */
1531
#wizard ul.tabs a {
1532
    display:block;
1533
    padding: 0.2em 0.5em 0.1em 0.4em;
1534
    text-decoration:none;
1535
    color: #FFFFFF;
1536
    position:relative;
1537
    top:1px;
1538
    outline:0;
1539
    background-color: transparent;
1540
    text-align: center;
1541
    width: 100px;
1542
    white-space: nowrap;
1543
    height: 17px;
1544
}
1545

    
1546
#wizard ul.tabs a:hover {
1547
    color: #FFFFFF;
1548
    background-color:#4085A5;
1549
}
1550

    
1551
/* selected tab */
1552
#wizard ul.tabs a.current {
1553
    color: white;
1554
    background-color: #7DB4CD;
1555
    cursor: default;
1556
}
1557

    
1558
#wizard #standard-images {
1559
    background-color: #ECF4F8;
1560
}
1561

    
1562
div.list div.actions {
1563
    display: none;
1564
    clear: left;
1565
    float: right;
1566
    margin-right: 15px;
1567
    margin-top: 37px;
1568
    text-align: right;
1569
    width: 120px;
1570
}
1571

    
1572
div.list div.actions a {
1573
    clear: left;
1574
    color: #A1A1A1;
1575
    display: block;
1576
    font-size:75%;
1577
    margin-bottom: 2px;
1578
}
1579

    
1580
div.list div.actions a:hover {
1581
    background-color: transparent;
1582
}
1583

    
1584
div.list div.actions a.enabled {
1585
    color: #3D3D3D;
1586
}
1587

    
1588
div.list div.actions a.enabled:hover{
1589
    cursor: pointer;
1590
    color: black;
1591
    text-decoration: underline;
1592
}
1593

    
1594
div.list div.actions a.selected {
1595
    color: #FF7F2A !important;
1596
}
1597

    
1598
input.machine {
1599
    width: 13px;
1600
    height: 13px;
1601
    top: -1px;
1602
    overflow: hidden;
1603
}
1604

    
1605
.description-container {
1606
    display: inline-block;
1607
    position: relative;
1608
    width: 300px;
1609
}
1610

    
1611
#wizard .button-container {
1612
    height: 20px;
1613
}
1614

    
1615

    
1616
/* metadata dropdown combo */
1617
.meta-key {
1618
    margin-right: 18px;
1619
    float:left;
1620
}
1621

    
1622
/* notification box */
1623
#yes-no {
1624
    height: 150px;
1625
    z-index: 9999;
1626
    border-bottom: 5px solid #4085A5;
1627
}
1628

    
1629
#yes-no p, #yes-no button {
1630
    margin-top: 15px;
1631
}
1632

    
1633
#error-success, .notification-box {
1634
    z-index: 9999;
1635
    border-bottom: 5px solid #4085A5;
1636
    min-height: 150px;
1637
    top: 50px !important;
1638
    position: absolute;
1639
}
1640

    
1641
#error-success p, .notification-box p {
1642
    margin-top: 5px;
1643
}
1644

    
1645
.error-report {
1646
    display: none;
1647
}
1648

    
1649
#error-success .error-report {
1650
    position: absolute;
1651
    top: 140px;
1652
    right: 40px;
1653
}
1654

    
1655
.error .error-report {
1656
    display: block;
1657
}
1658

    
1659
#error-success .error-report .errormsg {
1660
    display: none;
1661
}
1662

    
1663
#error-success .error-report .success {
1664
    display: none;
1665
}
1666

    
1667
#error-success .error-report .sending {
1668
    display: none;
1669
}
1670

    
1671
#error-success .error-report .send-btn {
1672
    color: #4085A5;
1673
    text-decoration: underline;
1674
    cursor: pointer;
1675
}
1676

    
1677
#error-success strong, .notification-box strong {
1678
    color: #F49C1A;
1679
}
1680

    
1681
#error-success .close, .notification-box .close {
1682
    background-image: url("../images/close-popup.png");
1683
    background-repeat: no-repeat;
1684
    cursor: pointer;
1685
    height: 13px;
1686
    position: absolute;
1687
    right: 7px;
1688
    top: 9px;
1689
    width: 13px;
1690
}
1691

    
1692
.popup-header-error {
1693
    background-color: #800000 !important;
1694
}
1695

    
1696
.popup-border-error {
1697
    border-color: #800000 !important;
1698
    width:auto;
1699
}
1700

    
1701
.popup-details-error {
1702
    border: none !important;
1703
}
1704

    
1705
.popup-separator-error {
1706
    margin-bottom: 5px !important;
1707
}
1708

    
1709
#error-success .popup-header, .notification-box .popup-header {
1710
    background-color: #4085A5;
1711
    color: white;
1712
    font-size: 95%;
1713
    font-weight: normal;
1714
    height: 20px;
1715
    margin-left: -16px;
1716
    margin-top: -16px;
1717
    padding-bottom: 2px;
1718
    padding-left: 30px;
1719
    padding-top: 10px;
1720
    width: 482px;
1721
    margin-right:-16px;
1722
}
1723

    
1724

    
1725
#error-success.success h3 span.header-box, .notification-box h3 span.header-box {
1726
    background-color: #71c837;
1727
    display: block;
1728
    background-image: url("../images/save-green.png");
1729
    background-position: right 0;
1730
    background-repeat: no-repeat;
1731
    width: 80px;
1732
    padding: 3px 3px 3px 8px;
1733
    margin-top: -6px;
1734
    font-size: 90% !important;
1735
    margin-left: -11px;
1736
}
1737

    
1738
#error-success .popup-body, .notification-box .popup-body {
1739
    background: url("../images/popup-bg.png") repeat-x scroll 0 0 transparent;
1740
    margin-left: -16px;
1741
    margin-right: -16px;
1742
    margin-top: 1px;
1743
    min-height: 142px;
1744
    padding-top: 10px;
1745
}
1746

    
1747
#error-success .popup-body-inner, .notification-box .popup-body-inner {
1748
    background: url("../images/popup-inner-bg.png") repeat-x scroll 0 0 transparent;
1749
    font-size: 80%;
1750
    min-height: 120px;
1751
    margin-left: 20px;
1752
    padding-left: 15px;
1753
    width: 460px;
1754
}
1755

    
1756
#error-success .popup-separator, .notification-box .popup-seperator {
1757
    background-color: #74AEC9;
1758
    height: 1px;
1759
    font-size:1%;
1760
    width: 442px;
1761
    margin-bottom: 30px;
1762
}
1763

    
1764
#error-success .machine-now-building {
1765
    font-size: 95%;
1766
    padding-bottom: 7px;
1767
    padding-top: 10px;
1768
}
1769

    
1770
#error-success.success .machine-now-building {
1771
    padding-bottom: 14px !important;
1772
}
1773

    
1774
#error-success .password-container, .notification-box .password-container {
1775
    width: 430px;
1776
    padding: 5px;
1777
    border: 2px solid #75b54a;
1778
    background-color: #aade87;
1779
}
1780

    
1781
#error-success .password-header, .notification-box .password-header {
1782
    margin-bottom: 5px;
1783
}
1784

    
1785
#error-success .password, .notification-box .password {
1786
    color: #447821;
1787
}
1788

    
1789
#error-success .popup-details, .notification-box .popup-details {
1790
    border: 2px solid #FF7F2A;
1791
    float: left;
1792
    margin-left: 10px;
1793
    padding: 2px;
1794
}
1795

    
1796
#error-success.success .popup-details, .notification-box .popup-details {
1797
    border: none !important;
1798
    float: none !important;
1799
    margin-left: none !important;
1800
    margin-top: 10px;
1801
}
1802

    
1803
#error-success.success .popup-separator, .notification-box .popup-seperator {
1804
    margin-bottom: 14px !important;
1805
}
1806

    
1807
#error-success .write-password, .notification-box .write-password {
1808
    margin-bottom: 5px;
1809
    padding-left: 30px;
1810
}
1811

    
1812
#error-success .write-password-password, .notification-box .write-password-password {
1813
    padding-left: 30px;
1814
    color: #447821;
1815
    display: inline;
1816
    font-size: 110%;
1817
    font-weight: bold;
1818
}
1819

    
1820
#error-success .write-password-details, .notification-box .write-password-details {
1821
    font-size: 75%;
1822
}
1823

    
1824
.more-details {
1825
    display: block;
1826
}
1827

    
1828
.notification-box h3 span.header-box {
1829
    background: transparent;
1830
}
1831

    
1832
.notification-box .machine-now-building {
1833
    padding: 20px 0;
1834
}
1835

    
1836
.notification-box .header-box {
1837
    width: auto !important;
1838
}
1839

    
1840
.notification-box .password {
1841
    text-align: center;
1842
}
1843
.notification-box .password a:hover {
1844
    background-color: #447821;
1845
    color: #fff;
1846
}
1847

    
1848
.notification-box .password a {
1849
    padding: 0.2em;
1850
    text-align: center;
1851
    color: #447821;
1852
    font-weight: bold;
1853
    font-size: 1.2em;
1854
    text-decoration: none;
1855
}
1856

    
1857
.popup-details a:link, .popup-details a:visited {
1858
    color: black;
1859
}
1860

    
1861
.destroy .confirm_single .yes {
1862
    background-color: #880000;
1863
    color: #fff;
1864
}
1865

    
1866
.destroy .confirm_single .no {
1867
    background-color: #CC0000;
1868
    color: #880000;
1869
}
1870

    
1871
.destroy .confirm_single .yes:hover {
1872
    background-color:#CC0000;
1873
}
1874

    
1875
div.list div.actions a.selected#action-destroy {
1876
    color: #880000 !important;
1877
}
1878

    
1879
.vm-actions .destroy a#action-destroy.selected {
1880
    color: #880000 !important;
1881
}
1882

    
1883
/* Confirmation boxes */
1884
div.confirm_single, div.confirm_multiple, div.action_error {
1885
    display: none;
1886
    color: black;
1887
}
1888

    
1889
div.confirm_single button, div.confirm_multiple button, div.action_error button {
1890
    font-size: 100%;
1891
    cursor: pointer;
1892
    color: black;
1893
    height: 20px !important;
1894
}
1895

    
1896
div.confirm_single button {
1897
    border: none;
1898
    font-family: Arial, Helvetica, sans-serif;
1899
    line-height: 1em;
1900
    vertical-align: middle;
1901
    padding: 2px 6px;
1902
    padding-bottom:4px;
1903
    height: 15px;
1904
}
1905

    
1906
div.confirm_single button.yes {
1907
    width: 90px;
1908
    background-color:#FF7F2A;
1909
}
1910

    
1911
div.confirm_single button.yes:hover {
1912
    background-color: #FF9955;
1913
}
1914

    
1915
div.confirm_single button.no {
1916
    width: 20px;
1917
    margin-left:-5px;
1918
    background-color: #FF9955;
1919
    color:#d95d0a;
1920
}
1921

    
1922
div.confirm_single button.no:hover {
1923
    color: white;
1924
}
1925

    
1926
div.confirm_multiple_cont {
1927
    background-color: #406A7D;
1928
    margin-top: 0px;
1929
    padding: 3px;
1930
    border-top: 1px solid #444;
1931
    border-bottom: 1px solid #444;
1932
    padding-top:0px;
1933
    margin-top: -1px;
1934
}
1935

    
1936
div.confirm_reboot_required {
1937
}
1938

    
1939
div.confirm_multiple {
1940
    font-size: 65%;
1941
    z-index: 8000;
1942
    /*height: 28px;*/
1943
    width: 700px;
1944
    margin-top: 15px;
1945
}
1946

    
1947
div.confirm_multiple p {
1948
    float: left;
1949
    color: #FFF;
1950
    font-weight: bold;
1951
    margin: 7px 0 0 10px;
1952
}
1953

    
1954
#networks-pane {
1955
    display: none;
1956
}
1957

    
1958
#networks-pane div.confirm_multiple p {
1959
    margin: 7px 0 0 100px;
1960
}
1961

    
1962
div.confirm_multiple button {
1963
    float: right;
1964
    background-color: transparent;
1965
    border: 1px solid #5CA1C0;
1966
    margin: 4px 5px 0 0;
1967
}
1968

    
1969
div.confirm_multiple button.yes {
1970
    border-color: #FF7F2A;
1971
    padding: 0 12px;
1972
}
1973

    
1974
div.confirm_multiple button.yes:hover {
1975
    background-color: #FF7F2A;
1976
}
1977

    
1978
div.confirm_multiple button.no {
1979
    padding: 0px 16px;
1980
}
1981

    
1982
div.confirm_multiple button.no:hover {
1983
    background-color: #5CA1C0;
1984
}
1985

    
1986
div.action_error {
1987
    width: 120px;
1988
    margin: 14px 0 0 37px;
1989
    background-color: #981D1D;
1990
    font-size: 75%;
1991
    z-index:1;
1992
    color: #FFF;
1993
    position:absolute;
1994
    top: 0px;
1995
}
1996

    
1997
div.action_error .action-error-msg {
1998
    background-color: #fff;
1999
    color: #981D1D;
2000
    border: 1px solid #981D1D;
2001
    padding: 4px;
2002
}
2003
div.action_error .action-error-msg .action {
2004
    font-weight: bold;
2005
}
2006

    
2007
div.action_error .action-error-msg {
2008
    font-size: 0.8em;
2009
}
2010

    
2011
.action_error button {
2012
    width: 75px;
2013
    background-color: transparent;
2014
    border: 1px solid;
2015
    border-color: #981D1D;
2016
    color: #fff !important;
2017
    float: left;
2018
}
2019

    
2020
div.action_error button.details {
2021
    padding-right: 5px;
2022
    width: 100px;
2023
    border-bottom: 2px solid #981D1D;
2024
    border-right: 1px solid #981D1D;
2025
    border-left: 2px solid #981D1D;
2026
    background-color: #E24B4B;
2027
}
2028

    
2029
div.action_error button.close-action-error {
2030
    background-image: url("../images/option-action-remove.png");
2031
    background-color: #fff;
2032
    background-repeat: no-repeat;
2033
    background-position: center center;
2034
    width: 20px;
2035
    border-bottom: 2px solid #981D1D;
2036
    border-right: 2px solid #981D1D;
2037
    border-top: 1px solid #981D1D;
2038
}
2039

    
2040
div.action_error button.details:hover {
2041
    background-color: #FF7F2A;
2042
}
2043

    
2044
div#aboutuser{
2045
    float:right;
2046
    clear: both;
2047
    color: #FFFFFF;
2048
    font-size: 75%;
2049
    margin-top: -25px;
2050
}
2051

    
2052
div#user{
2053
    clear: both;
2054
    color: #FFFFFF;
2055
    font-size: 75%;
2056
    margin-top: 38px;
2057
    padding-bottom: 10px;
2058
    position: absolute;
2059
    right:0;
2060
}
2061

    
2062
div#user a{
2063
    color: #FFFFFF;
2064
    text-decoration: none;
2065
}
2066

    
2067
div#user a.current_lang {
2068
    color: #72ADC8;
2069
}
2070

    
2071
div#user .usermenu {
2072
    float: left;
2073
    cursor: pointer;
2074
    overflow: hidden;
2075
    padding-top: 5px;
2076
    margin-top: -5px;
2077
    position: relative;
2078
}
2079

    
2080
div#user .username {
2081
    display: block;
2082
    margin-right: 10px;
2083
    padding-right: 18px;
2084
    padding-left: 4em;
2085
    height: 20px;
2086
    background: url("../images/down-arrow-light.png") no-repeat right;
2087
    background-position: right 6px;
2088
    font-weight: normal;
2089
}
2090

    
2091
div#user .hovered {
2092
    background: #599EBD;
2093
    overflow: visible;
2094
    border-bottom: 1px solid #C7DFE9;
2095
}
2096

    
2097
div#user .hovered .username {
2098
    background-image: url("../images/down-arrow-lighter.png");
2099
}
2100

    
2101
div#user .active {
2102
    background-color: #BED5E0 !important;
2103
}
2104

    
2105
div#user .active .username {
2106
    color: #599EBD;
2107
    background-image: url("../images/down-arrow-lighter.png");
2108
}
2109

    
2110
div#user .useractions {
2111
    display: none;
2112
}
2113

    
2114
div#user .active .useractions {
2115
    display: block;
2116
    text-align: right;
2117
    color: #4085A5;
2118
    background-color: #D0E3ED;
2119
    margin-top:-1px;
2120
    border-top:1px solid #fff;
2121
    position: relative;
2122
    top: 1px;
2123
    box-shadow: 1px 1px 1px #aaa;
2124
    -moz-box-shadow: 1px 1px 1px #aaa;
2125
    -webkit-box-shadow: 1px 1px 1px #aaa;
2126
}
2127

    
2128
div#user .useractions li {
2129
    padding: 2px 10px;
2130
    border-bottom: 1px solid #efefef;
2131
    text-align: right;
2132
    display: block;
2133
    background-color: transparent;
2134
}
2135

    
2136
div#user .useractions li a {
2137
    color: #4085A5;
2138
    display: inline-block;
2139
    padding:5px 0;
2140
    padding-left: 30px;
2141
    padding-bottom: 6px;
2142
    background-repeat: no-repeat;
2143
    background-position: center left;
2144
}
2145

    
2146
div#user .useractions li.hovered {
2147
    background-color: #E1EFF6;
2148
}
2149

    
2150
div#user .useractions li.last {
2151
    border-bottom: none;
2152
}
2153

    
2154
div#user .useractions .logout a {
2155
    background-image: url("../images/icon-logout.png");
2156
}
2157

    
2158
div#user .langmenu {
2159
    float: left;
2160
    border-left: 1px solid #ffffff;
2161
    padding-left: 10px;
2162
    margin-left: -1px;
2163
}
2164

    
2165
div#user .langmenu .sep {
2166
    display: inline-block;
2167
    color: #72ADC8;
2168
}
2169

    
2170
.separator {
2171
    background-color: #74AEC9;
2172
    height: 10px;
2173
    width: 700px;
2174
    font-size: 1px;
2175
    line-height: 0px;
2176
}
2177

    
2178
#disks.separator {
2179
    background-color: #dea842;
2180
}
2181

    
2182
#networks.separator {
2183
    background-color: #6c535d;
2184
}
2185

    
2186
.network-machine h5 {
2187
    margin-bottom: 26px;
2188
    margin-top:0px;
2189
}
2190

    
2191
.machine-container .separator {
2192
    width: 508px;
2193
    height: 1px;
2194
    margin-top: 2px;
2195
    background-color: #5CA1C0;
2196
    margin-left: 13px;
2197
}
2198

    
2199
.editbuttons {
2200
    display: block;
2201
    clear: none;
2202
    width: 40px;
2203
    margin-right: 0px;
2204
    padding-top: 0px;
2205
    float: right;
2206
    cursor: pointer;
2207
    position: relative;
2208
    z-index: 1000;
2209
}
2210

    
2211
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2212
    background-color: #84b7d0;
2213
}
2214

    
2215
div.editbuttons div.cancel:hover {
2216
    background-image: url("../images/cancel-onhover.png");
2217
}
2218

    
2219
.editbuttons .cancel, .editbuttons .save {
2220
    background-repeat: no-repeat;
2221
    color: transparent;
2222
    height: 16px;
2223
    width: 16px;
2224
    float: left;
2225
}
2226

    
2227
.editbuttons .cancel {
2228
    background-image: url("../images/cancel.png");
2229
    margin-left: 3px;
2230
}
2231

    
2232
.editbuttons .save {
2233
    background-image: url("../images/save.png");
2234
    margin-left: 1px;
2235
}
2236

    
2237
.editbuttons img {
2238
    float:none !important;
2239
    margin: 0px !important;
2240
}
2241

    
2242
.network .namecontainer {
2243
    font-size: 1.1em;
2244
}
2245
.network .machine-name-div .namecontainer {
2246
    font-size: 1em;
2247
    font-weight: bold;
2248
}
2249

    
2250

    
2251
.namecontainer .name {
2252
    position: relative;
2253
}
2254

    
2255
.namecontainer .name .nametextbox, .network-rename-input {
2256
    z-index: 1000;
2257
}
2258

    
2259
.icon .nametextbox {
2260
    width: 255px;
2261
}
2262

    
2263
.nametextbox, .network-rename-input {
2264
    position: relative;
2265
    top: -3px;
2266
    font-size: 65%;
2267
    width: 240px;
2268
    border: 1px solid #aaaaaa;
2269
    padding: 2px;
2270
}
2271

    
2272
.large-spinner {
2273
    background: url("../images/icons/indicators/large/progress.gif");
2274
    margin-left: 298px;
2275
    margin-top: 0px;
2276
    height: 31px;
2277
    width: 49px;
2278
    position: absolute;
2279
    top: 200px;
2280
}
2281

    
2282
#machinesview-icon .large-spinner {
2283
    top: 170px;
2284
}
2285

    
2286
.list .large-spinner {
2287
    margin-top:-30px;
2288
}
2289

    
2290
.single .large-spinner {
2291
    margin-top: 50px;
2292
}
2293

    
2294
div#networks-container {
2295
    display: none;
2296
}
2297

    
2298
div#networks-container .large-spinner {
2299
    margin-top: 50px;
2300
}
2301

    
2302
/* tables in list view */
2303
div.list div.dataTables_filter {
2304
    font-size: 75%;
2305
    margin-bottom: 12px;
2306
}
2307

    
2308
div.list div.dataTables_filter input{
2309
    font-size: 100%;
2310
}
2311

    
2312
.dataTables_wrapper {
2313
    width: 515px;
2314
    padding-bottom: 40px;
2315
}
2316

    
2317
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2318
    padding-right: 15px !important;
2319
}
2320

    
2321
div.list table {
2322
    width: 515px;
2323
    font-size: 75%;
2324
}
2325

    
2326
div.list table tbody td {
2327
    color: #3D3D3D;
2328
    padding:6px;
2329
    vertical-align: middle;
2330
    height: 20px;
2331
}
2332

    
2333
div.list table thead tr {
2334
    border-bottom: 1px solid #aaa;
2335
}
2336
div.list table thead tr th {
2337
    background-color: #CDE2EC;
2338
    background-image: url("../images/bg.gif");
2339
    background-repeat: no-repeat;
2340
    background-position: right 11px;
2341
    font-weight: normal;
2342
    border: 1px solid transparent;
2343
    border-bottom: none;
2344
    padding: 4px;
2345
    text-align: left;
2346
    vertical-align: middle;
2347
    cursor: pointer;
2348
}
2349

    
2350
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2351
    background-color: #5CA1C0;
2352
}
2353

    
2354
div.list table thead .sorting_asc {
2355
    background-image: url("../images/asc.gif");
2356
}
2357

    
2358
div.list table thead .sorting_desc {
2359
    background-image: url("../images/desc.gif");
2360
}
2361

    
2362
div.list table .selection div.expand-icon {
2363
    background-image: url("../images/asc.gif");
2364
    background-repeat: no-repeat;
2365
    position: relative;
2366
    cursor: pointer;
2367
    width: 15px;
2368
    height: 4px;
2369
    left: 19px;
2370
    top: -11px;
2371
}
2372

    
2373
ul.dropdown-selector {
2374
    background-color: #E6EEEE;
2375
    position: absolute;
2376
    margin-left: 1px;
2377
    display: block;
2378
    top: 255px;
2379
    font-size:75%;
2380
    width:40px;
2381
}
2382

    
2383
ul.dropdown-selector li {
2384
    padding: 4px;
2385
}
2386

    
2387
ul.dropdown-selector li:hover {
2388
    background-color: #5CA1C0;
2389
}
2390

    
2391
ul.dropdown-selector li a{
2392
    color: black;
2393
    text-decoration: none;
2394
}
2395

    
2396
div.list table span.imagetag {
2397
    display: none;
2398
}
2399

    
2400
div.list table thead .vmos {
2401
    width: 20px !important;
2402
    vertical-align:middle;
2403
}
2404

    
2405
div.list table .selection {
2406
    width: 20px !important;
2407
    text-align: left;
2408
    background-image: none;
2409
    padding-left: 6px;
2410
}
2411

    
2412
div.list table thead .vmflavor {
2413
    width: 100px !important;
2414
}
2415

    
2416
/* group column commented out for v0.5
2417
div.list table thead .vmgroup {
2418
    width: 40px !important;
2419
}
2420
*/
2421

    
2422
div.list table thead .vmstatus {
2423
    width: 50px !important;
2424
}
2425

    
2426
div.list table thead .vmname {
2427
    width: 110px !important;
2428
}
2429

    
2430
.spinner, .action-indicator {
2431
    clear: right;
2432
    float:right;
2433
    margin: 10px 6px 0 15px;
2434
}
2435

    
2436
.icon .spinner {
2437
    margin: 20px 4px 0 15px !important;
2438
}
2439

    
2440
.single .state .spinner {
2441
    margin: 20px 55px 0 15px !important;
2442
}
2443

    
2444
.action-indicator {
2445
    margin-right: 18px;
2446
}
2447

    
2448
.list span.action-indicator {
2449
    display: block;
2450
    width: 15px;
2451
    height: 20px;
2452
    margin: 0 !important;
2453
    float: none;
2454
}
2455

    
2456
.wave {
2457
    clear: right;
2458
    float:right !important;
2459
    margin: 10px 15px 0 15px !important;
2460
}
2461

    
2462
#networks-pane .spinner {
2463
    margin-top: 18px !important;
2464
}
2465

    
2466
.hidden {
2467
    display:none;
2468
}
2469

    
2470
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2471
    display:block !important;
2472
}
2473

    
2474
.action_error .message, .action_error .code {
2475
    display: none;
2476
}
2477

    
2478
.fixed {
2479
    bottom: 0;
2480
    position: fixed !important;
2481
}
2482

    
2483
/* Networks */
2484
#networks-pane {
2485
    background-color: transparent;
2486
    color: black;
2487
}
2488

    
2489
#networkscreate {
2490
}
2491

    
2492
.createbutton {
2493
    color: black;
2494
    background-color: #FF7F2A;
2495
    cursor: pointer;
2496
    padding: 7px 24px;
2497
    text-decoration: none;
2498
    border-left: 15px solid #FF9955;
2499
    margin-left: -15px;
2500
}
2501

    
2502
#networkscreate:hover {
2503
    background-color: #FF9955;
2504
}
2505

    
2506
#createcontainer {
2507
}
2508

    
2509
#networks-container {
2510
}
2511

    
2512
#networks-pane .public-networks {
2513
    background: #EFF7FA repeat scroll 0 0;
2514
    margin: 0 0 0px;
2515
    padding: 0 0 15px 0px;
2516
}
2517

    
2518
#networks-pane .private-networks .network:last-child {
2519
    border-bottom: none;
2520
}
2521

    
2522
#networks-pane .private-networks {
2523
    background: #EFF7FA repeat scroll 0 0;
2524
    padding: 15px 20px 20px 0px;
2525
    margin-top: 18px;
2526
}
2527

    
2528
.private-networks .network-cont:last-child {
2529
    border-bottom: none;
2530
}
2531

    
2532
.private-networks .network-cont {
2533
    border-bottom: 1px solid #D1E7F0;
2534
    padding-bottom:5px;
2535
    margin-bottom: 5px;
2536
    width: 520px;
2537
}
2538

    
2539
.private-networks .network {
2540
    padding-top: 10px;
2541
    padding-bottom: 10px;
2542
}
2543

    
2544
#public-template, #private-template, #public-machine-template, #private-machine-template {
2545
    display:none;
2546
}
2547

    
2548
div.network a.action-network-add {
2549
    display: none;
2550
}
2551

    
2552
div.network a.action-network-destroy {
2553
    margin-top: 32px !important;
2554
    width: 50px;
2555
    display: none;
2556
}
2557

    
2558
div.network {
2559
    clear: both;
2560
    padding: 5px 20px 5px 20px;
2561
    width: 480px;
2562
    position: relative;
2563
}
2564

    
2565
#private-template {
2566
    margin: 2px 0 0 -30px;
2567
}
2568

    
2569
div.network-placeholder {
2570
    margin-left: 33px;
2571
}
2572

    
2573
div.private-networks div.network-placeholder {
2574
}
2575

    
2576
div.network-cable {
2577
    border-left: 3px solid #FF7F2A;
2578
    float: left;
2579
    margin-left: -40px;
2580
    margin-top: -45px;
2581
    height: 185px;
2582
    overflow: hidden;
2583
}
2584

    
2585
.first div.network-cable {
2586
    height:143px;
2587
    margin-top:-6px;
2588
    position: relative;
2589
}
2590

    
2591
div.network-contents div.machines-list div.first {
2592
    margin-top:0;
2593
}
2594

    
2595
.last div.network-cable {
2596
    height:85px;
2597
}
2598

    
2599
div.firewall-cable {
2600
    border-left: 3px solid #FF7F2A;
2601
    float: left;
2602
    margin-left: -100px;
2603
    margin-top: -20px;
2604
    height: 110px;
2605
}
2606

    
2607
.last div.firewall-cable {
2608
    display:none;
2609
}
2610

    
2611
div.network a:hover {
2612
    text-decoration: underline;
2613
    cursor: pointer;
2614
}
2615

    
2616
#networks-container .name {
2617
    font-size: 75%;
2618
}
2619

    
2620
div.network-machines, div.firewall {
2621
    font-size: 75%;
2622
    margin-left: 70px;
2623
}
2624

    
2625
div.firewall {
2626
    margin-left: 60px;
2627
    margin-bottom: 3px;
2628
    margin-top: -3px;
2629
}
2630

    
2631
div.firewall .firewall-options {
2632
    float: left;
2633
}
2634

    
2635
div.machines-header, div.firewall-header {
2636
    background-color: #A1C8DB;
2637
    color: white;
2638
    cursor: pointer;
2639
    height: 17px;
2640
    width: 103px;
2641
}
2642

    
2643
 div.private-networks div.machines-header {
2644
    margin-top: -5px;
2645
}
2646

    
2647
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2648
    background-color: #84b7d0;
2649
}
2650

    
2651
div.network-machine:hover div.firewall-header {
2652
    background-color: #5CA1C0;
2653
}
2654

    
2655
div.firewall-label.darker {
2656
    background-color: #4085a5;
2657
}
2658

    
2659
.state {
2660
}
2661

    
2662
.network .state {
2663
    font-size: 75%;
2664
    position: absolute;
2665
    right: 10px;
2666
    top: 5px;
2667
}
2668

    
2669
div.network div.actions {
2670
    float: right;
2671
    font-size: 75%;
2672
    font-weight: normal;
2673
    height: 70px;
2674
    width: 100px;
2675
    position: absolute;
2676
    right: -100px;
2677
    top: 0;
2678
}
2679

    
2680
div.network div.machine-actions {
2681
    text-decoration: none;
2682
    float: right;
2683
    margin: -17px -180px 0 0;
2684
    font-weight: normal;
2685
    font-size: 75%;
2686
}
2687

    
2688
div.network div.actions a, div.network div.machine-actions a {
2689
    text-decoration: none;
2690
    height: 15px;
2691
    color: black;
2692
    visibility: hidden;
2693
    display: block;
2694
}
2695

    
2696

    
2697
div.network div.machine-actions a {
2698
    margin: 8px 0 0 8px;
2699
}
2700
div.network div.net-actions a {
2701
    margin: 0 0 8px 8px;
2702
    width: 168px;
2703
}
2704
div.network div.action-container {
2705
    bottom: auto;
2706
}
2707

    
2708
div.network div.net-actions .confirm_single {
2709
    position: absolute;
2710
    left: 96px;
2711
    width: 200px;
2712
    margin: 0 0px -5px 0;
2713
    font-size: 100%;
2714
}
2715

    
2716
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2717
    display: block;
2718
    background-color:#A1C8DB;
2719
    opacity: 0.8;
2720
    filter: alpha(opacity = 80);
2721
}
2722

    
2723
div.network.expand .net-actions a {
2724
    visibility: visible;
2725
}
2726

    
2727
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2728
    visibility: visible;
2729
}
2730

    
2731
div.network div.machine-actions a.action-destroy.selected {
2732
    color: #880000 !important;
2733
}
2734

    
2735
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected {
2736
    background-color: transparent !important;
2737
    visibility: visible!important;
2738
}
2739

    
2740
div.network .net-vm-actions .confirm_single {
2741
    font-size: 100% !important;
2742
    margin-right: -20px !important;
2743
    position: absolute !important;
2744
    top: 7px;
2745
    right:0;
2746
}
2747

    
2748
div.network div.display a {
2749
    visibility: visible;
2750
}
2751

    
2752
div.network-machine div.machine-actions a.action-details {
2753
    margin-top: 7px;
2754
    width: 168px;
2755
}
2756

    
2757
div.network .net-actions {
2758
    margin-right:5px !important;
2759
    margin-top:0px !important;
2760
    height: 80px !important;
2761
}
2762

    
2763
div.network .net-actions .action-container.destroy {
2764
    position: relative;
2765
    bottom: auto;
2766
}
2767

    
2768
div.network:hover {
2769
    background-color: #A1C8DB !important;
2770
}
2771

    
2772
.network-logos {
2773
    float:left;
2774
    padding-right: 10px;
2775
}
2776

    
2777
.network-logos:hover {
2778
    cursor: pointer;
2779
}
2780

    
2781
.state div {
2782
    text-align: right;
2783
    margin: 4px 1px -4px;
2784
}
2785

    
2786
.public-networks .state div {
2787
    margin-top: 4px;
2788
}
2789

    
2790
.private-networks .state div {
2791
    margin-top: 9px;
2792
    margin-bottom: -12px;
2793
}
2794

    
2795
.network .name-div {
2796
    margin-bottom: 15px;
2797
    margin-top: 0px;
2798
}
2799

    
2800
div.indicator {
2801
    clear: none;
2802
    float: right;
2803
    height: 11px;
2804
    margin: 3px -1px;
2805
    width: 10px;
2806
}
2807

    
2808
#private-networks {
2809
    margin-top: 20px;
2810
}
2811

    
2812
.private-networks .editbuttons {
2813
    margin-right: 117px;
2814
    margin-top: 1px;
2815
}
2816

    
2817
.private-networks div.confirm_single {
2818
    margin: 45px -219px -5px 0;
2819
    font-size: 80%;
2820
}
2821

    
2822
.private-networks .network-machine div.confirm_single {
2823
    margin: 0 -199px 0 0;
2824
}
2825

    
2826
.private-networks .state {
2827
}
2828

    
2829
.private-networks div.machines-list {
2830
    padding-top: 3px;
2831
}
2832

    
2833
span.rename-network, span.configure {
2834
    background-repeat: no-repeat;
2835
    color: transparent;
2836
    font-size: 75%;
2837
    font-weight: normal;
2838
    margin-left: 10px;
2839
    margin-right: 10px;
2840
    padding-left: 10px;
2841
    text-align: left;
2842
}
2843

    
2844
span.rename-network {
2845
    cursor: pointer;
2846
}
2847

    
2848
div.name-div:hover span.rename-network {
2849
    color: #3D3D3D;
2850
    margin-top: 0.4em;
2851
    background-image: url("../images/pencil.png");
2852
    background-position: 0 3px;
2853
}
2854

    
2855
div.network:hover a.rename {
2856
    color: #3d3d3d;
2857
}
2858

    
2859
.network-separator {
2860
    background-color: #5CA1C0;
2861
    height: 1px;
2862
    margin: 2px 0 0 -5px;
2863
    width: 480px;
2864
    font-size: 1%;
2865
    line-height: 1px;
2866
}
2867

    
2868
.network-contents {
2869
    margin-left: -4px;
2870
    width: 504px;
2871
    clear: both;
2872
    background: url("../images/orange-border.png") no-repeat;
2873
    background-position: 33px bottom;
2874
}
2875
.network-contents.last-expanded {
2876
    background-position-y: -2600px;
2877
}
2878

    
2879
.network-machine {
2880
    border-bottom: 1px solid #5CA1C0;
2881
}
2882
.network-machine:last-child {
2883
    border-bottom: none;
2884
}
2885

    
2886
.network-machine .state div {
2887
    text-align: left;
2888
}
2889

    
2890
.network-machine {
2891
    margin-left: 35px;
2892
    padding-bottom: 10px;
2893
    padding-left: 5px;
2894
    padding-top: 10px;
2895
    position: relative;
2896
}
2897

    
2898
.network-machine .ips {
2899
    position: absolute;
2900
    right:0;
2901
    top:40px;
2902
    text-align: right;
2903
    padding-right: 10px;
2904
    font-size: 70%;
2905
}
2906

    
2907
.network-machine .logo {
2908
    float:left;
2909
    padding-right: 10px;
2910
    position:relative;
2911
}
2912

    
2913
#networks-container .machine-name {
2914
    text-decoration: none !important;
2915
    margin-bottom: 10px;
2916
    color: #000000;
2917
    margin-top: -4px;
2918
}
2919

    
2920
.private-networks .separator {
2921
    background-color: #5CA1C0;
2922
    height: 1px;
2923
    margin: 3px 0 -2px -10px;
2924
    width: 485px;
2925
}
2926

    
2927
.network-machine .state {
2928
    margin-right: 18px;
2929
}
2930

    
2931
.network-machine .state .status {
2932
    margin-bottom: 4px;
2933
}
2934

    
2935
.machine-name .name {
2936
}
2937

    
2938
.machine-name .namecontainer {
2939
    line-height: 18px;
2940
    margin-bottom: 20px;
2941
}
2942

    
2943
div.network-machine:hover {
2944
    background-color: #84B7D0;
2945
}
2946

    
2947
.machines {
2948
    width: 416px;
2949
    margin-bottom: -8px;
2950
    margin-top: 10px;
2951
}
2952

    
2953
div.empty-network-slot {
2954
    height: 60px;
2955
}
2956

    
2957
div.network-remove-machine, div.network-add-machine {
2958
    background-color: #FB822F;
2959
    color: #bc4b00;
2960
    width:90px;
2961
    height:18px;
2962
    float:left;
2963
    margin:40px 0 0 -100px;
2964
}
2965

    
2966
span.remove-icon {
2967
    font-size: 80%;
2968
    margin-left: 15px;
2969
    position: relative;
2970
    bottom:1px;
2971
}
2972

    
2973
div.add-icon {
2974
    margin-left: 15px;
2975
    margin-top: -1px;
2976
    cursor: pointer;
2977
}
2978

    
2979
span.remove-icon:hover, span.add-icon:hover {
2980
    cursor:pointer;
2981
    color: #fff;
2982
}
2983

    
2984
div.network-add-machine {
2985
    margin:43px 0 0 0px;
2986
}
2987

    
2988
.firewall-on {
2989
    color: #42E342;
2990
}
2991

    
2992
.firewall-off {
2993
    color: #F82E2E;
2994
}
2995

    
2996
.firewall-content {
2997
    color: black;
2998
    font-size: 60%;
2999
    margin-left: 60px;
3000
    height: 55px;
3001
}
3002

    
3003
.firewall-content .checkbox-legends {
3004
    cursor: pointer;
3005
}
3006

    
3007
.firewall-content .checkbox-legends.current {
3008
    font-weight: bold;
3009
}
3010

    
3011
.firewall-content .checkbox-legends {
3012
    vertical-align: text-top;
3013
}
3014

    
3015
.checkbox-legends a {
3016
    color: black;
3017
    text-decoration: underline;
3018
    font-size: 100%;
3019
}
3020

    
3021
h5.machine-connect {
3022
    font-size: 75%;
3023
    margin-bottom: 3px;
3024
}
3025

    
3026
.machine-connect span {
3027
    text-decoration: underline;
3028
}
3029

    
3030
h5.machine-connect span:hover {
3031
    cursor: pointer;
3032
}
3033

    
3034
.firewall-apply {
3035
    background-color: #4085a5;
3036
    border: medium none;
3037
    float: right;
3038
    font-size: 105%;
3039
    height: 18px;
3040
    margin-right: 5px;
3041
    margin-top: 3px;
3042
    width: 75px;
3043
    position: relative;
3044
    bottom:20px;
3045
}
3046

    
3047
.firewall-apply:hover {
3048
    background-color:#5CA1C0;
3049
}
3050

    
3051
.name-div {
3052
    margin: -9px 0 30px 70px;
3053
}
3054

    
3055
.machine-name-div {
3056
    margin-bottom: 20px;
3057
    margin-left: 60px;
3058
}
3059

    
3060
div.reboot-dialog {
3061
    display: none;
3062
    color: black;
3063
    background-color: #4085A5;
3064
    font-size: 75%;
3065
    margin-top: 15px;
3066
    width: 698px;
3067
    z-index: 1;
3068
}
3069

    
3070
div#reboot-machine-template, div.reboot-machine-entry {
3071
    display: none;
3072
    padding: 0 0 10px 35px;
3073
    width: 300px;
3074
}
3075

    
3076
div.reboot-dialog p {
3077
    color: #FFFFFF;
3078
    padding: 10px 0 10px 10px;
3079
}
3080

    
3081
div.reboot-dialog button {
3082
    float:right;
3083
    border: 1px solid #FF7F2A;
3084
    background-color: transparent;
3085
    font-size:100%;
3086
}
3087

    
3088
div.reboot-dialog button:hover {
3089
    background-color: #FF7F2A;
3090
}
3091

    
3092
div.reboot-dialog button.reboot-all {
3093
    margin: -30px 35px 0 0;
3094
}
3095

    
3096
div.reboot-dialog button.reboot-single {
3097
    color: black;
3098
    margin-top: -20px;
3099
}
3100

    
3101
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
3102
    display:none;
3103
}
3104

    
3105
div.reboot-dialog button.details {
3106
    border-color: #800000;
3107
    margin-top: -20px;
3108
}
3109

    
3110
div.reboot-dialog button.details:hover {
3111
    background-color: #800000;
3112
}
3113

    
3114
/* Metadata */
3115
.machine .info-content {
3116
    display: none;
3117
}
3118

    
3119
.metadata-container {
3120
    line-height: 12px;
3121
    height: 85px;
3122
    background-color: #84b7d0;
3123
}
3124

    
3125
.metadata-column {
3126
    border-right: 1px solid #5CA1C0;
3127
    color: black;
3128
    float: left;
3129
    font-size: 60%;
3130
    margin-top: 3px;
3131
    height: 70px;
3132
    padding-bottom: 5px;
3133
}
3134

    
3135
.vm-stats {
3136
    padding-left: 10px;
3137
    padding-right: 5px;
3138
    width: 220px;
3139
}
3140

    
3141
.vm-stats div.stat-content {
3142
    height: 18px;
3143
}
3144

    
3145
.vm-stats div.stat-content img {
3146
    margin: 0;
3147
}
3148

    
3149
.vm-stats div img.stat-busy {
3150
    margin-top: -7px;
3151
    margin-left: 90px;
3152
}
3153

    
3154
.vm-stats div.stat-content img.busy {
3155
    margin-left: 95px;
3156
}
3157

    
3158
.vm-stats div.stat-error {
3159
    display:none;
3160
}
3161

    
3162
div.stat-error {
3163
    color: #f00;
3164
}
3165

    
3166
.single div.stat-error {
3167
    text-align: center;
3168
    font-size: 0.8em;
3169
}
3170

    
3171
.metadata-column {
3172
    margin-top: 4px;
3173
}
3174

    
3175
.vm-details {
3176
    width: 130px;
3177
    margin-left:17px;
3178
}
3179

    
3180
.vm-details.metadata-column {
3181
    padding-top: 5px;
3182
    height: 65px;
3183
}
3184

    
3185
.vm-details .image-details {
3186
    margin-top: 8px;
3187
}
3188

    
3189
.vm-details .vm-detail {
3190
    display: block;
3191
}
3192

    
3193
.vm-details span.value {
3194
    color: #444;
3195
}
3196

    
3197
.single-container .lower .stat-busy {
3198
    margin-top: 10px;
3199
    margin-left: 325px;
3200
}
3201

    
3202
.vm-metadata {
3203
    padding-left: 10px;
3204
    width: 100px;
3205
    border: none;
3206
}
3207

    
3208
.metadata-left {
3209
}
3210

    
3211
.metadata-right {
3212
    width: 73px;
3213
    float:left;
3214
    height: 35px;
3215
    padding-left: 5px;
3216
    position:relative;
3217
    overflow:hidden;
3218
}
3219

    
3220
.metadata-right .items {
3221
    position:absolute;
3222
    height:20000em;
3223
}
3224

    
3225
.metadata-keys-container {
3226
    height: 60px;
3227
    float: left;
3228
}
3229

    
3230
.single .metadata-keys-container {
3231
    float: none;
3232
    height: auto;
3233
    margin-bottom: 5px;
3234
}
3235

    
3236
.single a.manage-metadata {
3237
    font-size: 80%;
3238
    margin-left:4px;
3239
    color: #383838;
3240
}
3241

    
3242
a.manage-metadata, a.stats-report {
3243
    font-size: 100%;
3244
    color: black;
3245
    margin-left:17px;
3246
    text-decoration: underline;
3247
}
3248

    
3249
a.stats-report {
3250
    margin: 15px 0  0 80px;
3251
}
3252

    
3253
div.machine a.manage-metadata:hover {
3254
    background-color: transparent;
3255
}
3256

    
3257
.single .metadata-actions, .single .metadata-keys-container .items {
3258
    padding-left: 5px;
3259
}
3260
.metadata-actions, .metadata-keys-container .items{
3261
    margin-top: 5px;
3262
}
3263

    
3264
.singe .metadata-actions, .single .metadata-keys-container .items{
3265
    font-size: 80%;
3266
    line-height: 12px;
3267
    width: 300px;
3268
}
3269

    
3270
.metadata-actions .prev,  .metadata-actions .next{
3271
    float:left;
3272
    width:29px;
3273
    height:6px;
3274
    cursor: pointer;
3275
}
3276

    
3277
.metadata-actions .prev {
3278
    background: url("../images/roll-up.png") no-repeat scroll 0 0 transparent;
3279
}
3280

    
3281
.metadata-actions .next {
3282
    background: url("../images/roll-down.png") no-repeat scroll 0 0 transparent;
3283
}
3284

    
3285
.scrollable {
3286
    position:relative;
3287
    overflow:hidden;
3288
    height: 35px;
3289
    width: 120px;
3290
    margin-bottom:2px;
3291
}
3292

    
3293
.scrollable .items {
3294
    position:absolute;
3295
    height:20000em;
3296
}
3297

    
3298
/* single view */
3299
.single {
3300
    color: #383838;
3301
}
3302

    
3303
.single .column1 {
3304
    float: left;
3305
    margin: 1px 0 25px 17px;
3306
    width: 140px;
3307
}
3308

    
3309
.single .column1 .state {
3310
    float: left;
3311
    margin-left: 4px;
3312
    padding-bottom: 6px;
3313
    padding-top: 3px;
3314
    position: relative;
3315
    right: 0;
3316
    text-align: center;
3317
    width: 126px;
3318
}
3319

    
3320
.single .column1 .state-label {
3321
    padding-top: 5px;
3322
}
3323

    
3324
.single .column1 .indicators {
3325
    margin-right: 38px !important;
3326
}
3327

    
3328
.single div.connect-arrow {
3329
    margin-left: -17px;
3330
}
3331

    
3332
.single div.connect-border {
3333
    margin-left: -29px;
3334
}
3335

    
3336
.single .single-actions {
3337
    width: 150px;
3338
    height: 60px;
3339
    margin-bottom: 45px;
3340
    margin-left: -10px;
3341
}
3342

    
3343
.single .vm-actions .action-container {
3344
    margin-bottom: 1px;
3345
}
3346

    
3347
.single .vm-actions .action-container .confirm_single {
3348
    right: -45px;
3349
}
3350

    
3351
.single .vm-actions .action-container.destroy .confirm_single {
3352
}
3353

    
3354
.single .vm-actions .action-container.destroy {
3355
    bottom: -20px;
3356
}
3357

    
3358
.single a.single-action {
3359
    text-decoration: none;
3360
    cursor: pointer;
3361
    display: block;
3362
}
3363

    
3364
.single a.single-action:hover {
3365
    background-color:#A1C8DB;
3366
    width: 162px;
3367
    opacity: 0.8;
3368
    filter: alpha(opacity = 80);
3369
}
3370

    
3371
.single .destroy a.single-action.selected {
3372
    color: #880000 !important;
3373
}
3374

    
3375
.single a.single-action.selected {
3376
    color: #FF7F2A !important;
3377
    width: 50px !important;
3378
}
3379

    
3380
.single a.single-action.selected:hover {
3381
    background-color:transparent;
3382
}
3383

    
3384
.single .spinner, .single .action-indicator {
3385
    margin: 15px 45px 0 0px !important
3386
}
3387

    
3388
.single .action-indicator {
3389
    margin-right: 55px !important;
3390
}
3391

    
3392
.single .wave {
3393
    margin: 15px 53px 0 0px !important
3394
}
3395

    
3396
.icon div.action_error {
3397
    font-size: 100%;
3398
}
3399

    
3400
.single div.action_error {
3401
    position: absolute;
3402
    top: 29px;
3403
    right: 35px;
3404
}
3405

    
3406
.single .column2 {
3407
    background-color: #A1C8DB;
3408
    float: left;
3409
    font-size: 78%;
3410
    line-height: 17px;
3411
    margin: 0 0 10px 5px;
3412
    width: 358px;
3413
}
3414

    
3415
.single .column2 .machine-labels {
3416
    float: left;
3417
    font-size: 90%;
3418
    margin-left: 10px;
3419
    margin-top: 10px;
3420
    width: 125px;
3421
}
3422

    
3423
.single .machine-detail.title {
3424
    background-color: #74AEC9;
3425
    color: #fff;
3426
    padding: 4px 6px;
3427
    font-size: 0.8em;
3428
    width: 346px;
3429
    margin-left: 5px;
3430
    float: left;
3431
}
3432

    
3433
.single .column2 .machine-details {
3434
    float: right;
3435
    text-align: right;
3436
    font-size: 90%;
3437
    width: 210px;
3438
    margin-right: 10px;
3439
    margin-top: 10px;
3440
}
3441

    
3442
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3443
    margin-bottom: 13px;
3444
}
3445

    
3446
.single .tags {
3447
    clear: both;
3448
    margin-bottom: 10px;
3449
    margin-left: 10px;
3450
}
3451

    
3452
.single .tags-label {
3453
    float: left;
3454
    padding: 0 5px;
3455
    width: 30px;
3456
}
3457

    
3458
.single .tags-down-arrow {
3459
    background: url("../images/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3460
    float: left;
3461
    height: 16px;
3462
    width: 9px;
3463
}
3464

    
3465
.single .tags-header .info-header{
3466
    padding-top:0;
3467
    padding-bottom:0;
3468
}
3469

    
3470
.single .tags-header {
3471
    font-size: 0.62em;
3472
    cursor: pointer;
3473
    float: left;
3474
    margin-bottom:5px;
3475
}
3476

    
3477
.single .tags-header span.label {
3478
    font-size: 104%;
3479
}
3480

    
3481
.single .tags-content {
3482
    background-color: #84B7D0;
3483
    clear: both;
3484
    height: auto;
3485
    padding-bottom: 5px;
3486
    padding-top: 5px;
3487
    width: 300px;
3488
}
3489

    
3490
.single .column3 {
3491
    background-color: #A1C8DB;
3492
    width: 150px;
3493
    overflow: visible;
3494
    padding-bottom: 10px;
3495
    position: absolute;
3496
    right: 20px;
3497
    top: 130px;
3498
}
3499

    
3500
.single .col3 {
3501
    float: right;
3502
    width: 150px;
3503
    margin-right: 15px;
3504
    margin-bottom: 15px;
3505
}
3506

    
3507
.single .column3 .controls {
3508
    font-size: 80%;
3509
    height: 20px;
3510
    padding-left: 7px;
3511
    padding-right: 7px;
3512
    padding-top: 8px;
3513
    padding-bottom: 5px;
3514
    border-bottom: 1px solid #84B7D0;
3515
}
3516

    
3517
.single .column3 .vm-control:hover {
3518
    background-color: #5CA1C0;
3519
}
3520

    
3521
.single .column3 .previous {
3522
    float:left;
3523
    width: 72px;
3524
}
3525

    
3526
.single .column3 .next {
3527
    float: right;
3528
    text-align: center;
3529
    width: 60px;
3530
}
3531

    
3532
.single .column3 .next-label {
3533
    float: right;
3534
    margin-right: 3px;
3535
    margin-top: -2px;
3536
}
3537

    
3538
.single .column3 .next-arrow {
3539
    float: right;
3540
    height: 18px;
3541
    width: 10px;
3542
    background: url("../images/right-arrow.png") no-repeat scroll 3px 2px transparent;
3543
}
3544

    
3545
.single .column3 .prev-label {
3546
    float: left;
3547
    margin-left: 3px;
3548
    margin-top: -2px;
3549
}
3550

    
3551
.single .column3 .prev-arrow {
3552
    background: url("../images/left-arrow.png") no-repeat scroll 3px 2px transparent;
3553
    float: left;
3554
    height: 18px;
3555
    width: 10px;
3556
}
3557

    
3558
.single .column3 .separator {
3559
    width: 135px;
3560
    height: 1px;
3561
    background-color: #84B7D0;
3562
    margin: 0 0 0 7px;
3563
    clear: both;
3564
}
3565

    
3566
.single .column3 .servers {
3567
    font-size: 80%;
3568
    line-height: 15px;
3569
    padding-top: 10px;
3570
    text-align: right;
3571
    overflow: visible;
3572
    position: relative;
3573
}
3574

    
3575
.single .column3 .server-name {
3576
    margin-left: 10px;
3577
    padding-right: 5px;
3578
    cursor: pointer;
3579
    padding-bottom: 2px;
3580
}
3581
div.single div.column3 div.server-name:hover {
3582
    background-color: #5CA1C0;
3583
}
3584
.single .column3 .column3-selected {
3585
    background-color: #84B7D0;
3586
    color: white;
3587
    opacity: 0.8;
3588
    padding-left: 9px;
3589
    width: 160px;
3590
    filter: alpha(opacity = 80);
3591
    position: relative;
3592
    width: 126px;
3593
}
3594

    
3595
.single .toggler {
3596
    color: #FFFFFF;
3597
    float: right;
3598
    font-size: 140%;
3599
}
3600

    
3601
.single .cpu-usage, .single .network-usage {
3602
    text-align: center;
3603
    padding-top: 15px;
3604
    margin-bottom: 5px;
3605
    font-size: 90%;
3606
    font-weight: bold;
3607
}
3608

    
3609
.single .cpu-graph, .single .network-graph {
3610
    margin-left: 20px;
3611
    margin-bottom:30px;
3612
    width: 660px;
3613
}
3614

    
3615
.single div.lower img.stats {
3616
    margin-left: 82px;
3617
}
3618

    
3619
.single div.lower img.stats {
3620
    display: none;
3621
}
3622

    
3623
.single .single-image {
3624
    width: 126px;
3625
    height: 136px;
3626
    margin-bottom: 10px;
3627
    margin-left: 4px;
3628
    background-image: url("../images/icons/machines/large/unknown-sprite.png");
3629
    background-repeat: no-repeat;
3630
    cursor: pointer;
3631
}
3632

    
3633
.single .single-image-state1 {
3634
    background-position: 0px 0;
3635
}
3636

    
3637
.single .single-image-state3 {
3638
    background-position: -252px 0;
3639
}
3640

    
3641
.single .single-image-state4 {
3642
    background-position: -378px 0;
3643
}
3644

    
3645
.single .single-image-state2 {
3646
    background-position: -126px 0;
3647
}
3648

    
3649
.single .column3 .previous, .single .column3 .next {
3650
    cursor: pointer;
3651
    background-color: #84B7D0;
3652
    color: white;
3653
    font-size: 100%;
3654
    height: 15px;
3655
    padding-top: 2px;
3656
}
3657

    
3658
.single .column3 .disabled {
3659
    opacity: 0.5;
3660
    filter: alpha(opacity = 50);
3661
}
3662

    
3663
.single div.lower {
3664
    clear:both;
3665
    background: #EFF7FA repeat scroll 0 0;
3666
    width: 700px;
3667
    padding-bottom: 15px;
3668
}
3669

    
3670
.single div.upper {
3671
    background: transparent;
3672
    margin-bottom: 10px;
3673
    overflow: visible;
3674
    width: 700px;
3675
    background: #EFF7FA repeat scroll 0 0;
3676
}
3677

    
3678
/* console css */
3679
.console-header-logo {
3680
    padding-top: 17px;
3681
    margin-left: 30px;
3682
    position: fixed;
3683
}
3684

    
3685
#console-header div.help-text {
3686
    font-size: 75%;
3687
    font-weight:bold;
3688
    color:#FFFFFF;
3689
    float:left;
3690
    position: absolute;
3691
    margin: 45px 0 0 2px;
3692
}
3693

    
3694
div.console-container {
3695
    margin: 0 0em;
3696
    height: auto;
3697
}
3698

    
3699
#wrapper.console {
3700
    width: auto;
3701
}
3702

    
3703
.console-info {
3704
    font-size:80%;
3705
    color: white;
3706
    float:left;
3707
    position:relative;
3708
    margin: 15px 0 0 480px;
3709
}
3710

    
3711
applet {
3712
    width:100%;
3713
    height:100%;
3714
}
3715

    
3716
div.console-footer {
3717
    /* this is for version 0.5*/
3718
    display: none;
3719
}
3720

    
3721
.console-footer #footer-text{
3722
    float:left;
3723
    left: auto;
3724
    margin-left:30px;
3725
}
3726

    
3727
/* add network wizard (see also #wizard for shared classes) */
3728
#networks-wizard .header {
3729
    background-color: #4085A5;
3730
    height: 56px;
3731
}
3732

    
3733
#networks-wizard div.name-input {
3734
    margin: 75px 0 0 55px;
3735
}
3736

    
3737
#networks-wizard input {
3738
    border: 1px solid #CCCCCC;
3739
    color: #445566;
3740
    letter-spacing: 1px;
3741
    width: 170px;
3742
}
3743

    
3744
#networks-wizard span.help {
3745
    font-style: italic;
3746
    font-size: 80%;
3747
    margin-left: 10px;
3748
}
3749

    
3750
#networks-wizard .separator-end {
3751
    background-color: #387693;
3752
    height: 6px;
3753
    width: 479px;
3754
    margin-left: -13px;
3755
    margin-top: 19px;
3756
}
3757

    
3758
.red {
3759
    color: red;
3760
}
3761

    
3762
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3763
#add-machines-wizard span.machine-name {
3764
    margin-left: 4px;
3765
    vertical-align: text-top;
3766
}
3767

    
3768
#add-machines-wizard img.list-logo {
3769
    margin: 2px 1px 1px;
3770
}
3771

    
3772
.css-panes {
3773
    clear: both;
3774
    position: relative;
3775
    z-index: 10;
3776
}
3777

    
3778
.last .firewall-content {
3779
}
3780

    
3781
#pub .last .network-separator {
3782
    display:none;
3783
}
3784

    
3785
.public-networks .empty-network-slot {
3786
    display: none;
3787
}
3788

    
3789
.clearfix {
3790
    display: block;
3791
    width: auto;
3792
    zoom: 1;
3793
}
3794

    
3795
/* float clearing for all browsers except the devil one */
3796
.clearfix:after{
3797
  clear: both;
3798
  content: ".";
3799
  display: block;
3800
  height: 0;
3801
  visibility: hidden;
3802
  font-size: 0;
3803
}
3804

    
3805
* html .clearfix {
3806
    display: inline-block;
3807
}
3808

    
3809
.icon .cont-toggler {
3810
    margin-top: -1px;
3811
}
3812

    
3813
.icon .wave {
3814
    margin-right: 4px !important;
3815
    margin-top: 15px !important;
3816
}
3817

    
3818
.icon .status {
3819
    margin-right: 3px;
3820
}
3821

    
3822
#machinesview .status, .single .state {
3823
    font-size: 75%;
3824
}
3825

    
3826
#machinesview-list div.action-indicator {
3827
    margin:0 !important;
3828
    float: none !important;
3829
}
3830

    
3831
.icon div.action-indicator {
3832
    margin-top: 14px;
3833
    margin-right: 4px;
3834
}
3835

    
3836
div.action-indicator {
3837
    width: 15px;
3838
    height: 20px;
3839
    background-repeat: no-repeat;
3840
    background-position: 0 0;
3841
}
3842

    
3843
tbody.machines div.action-indicator {
3844
    position: relative;
3845
    top: -2px;
3846
}
3847
div.state .destroy, tbody.machines .destroy {
3848
    background-image: url("../images/icons/actions/medium/destroy.png");
3849
}
3850
div.state .console, tbody.machines .console {
3851
    background-image: url("../images/icons/actions/medium/console.png");
3852
}
3853
div.state .start, tbody.machines .start {
3854
    background-image: url("../images/icons/actions/medium/start.png");
3855
}
3856
div.state .reboot, tbody.machines .reboot {
3857
    background-image: url("../images/icons/actions/medium/reboot.png");
3858
}
3859
div.state .shutdown, tbody.machines .shutdown {
3860
    background-image: url("../images/icons/actions/medium/shutdown.png");
3861
}
3862

    
3863

    
3864
.no-invitations-left {
3865
    margin-bottom: 20px;
3866
    color: #E44848;
3867
}
3868

    
3869
.invitations #field_name_name, .invitations #field_email_name {
3870
    float: left;
3871
    display: block;
3872
    width: 180px;
3873
}
3874
.invitations input {
3875
    width: 170px;
3876
}
3877

    
3878
.invitations #fieldheaders span.description {
3879
    font-size: 0.8em;
3880
    color: #666;
3881
    margin-left: 2px;
3882
}
3883

    
3884
.invitations #fields {
3885
    margin-top: 5px;
3886
}
3887

    
3888
.invitations .add-field-container {
3889
    margin-top: 5px;
3890
}
3891

    
3892
.invitations #errors {
3893
    padding: 5px;
3894
    background-color: #800000;
3895
}
3896

    
3897
.invitations #errors p {
3898
    margin-bottom: 10px;
3899
    font-size: 0.95em;
3900
    padding-top:0;
3901
    margin-top:0;
3902
    color: #fff;
3903
}
3904

    
3905
.invitations #errors li {
3906
    font-size: 0.85em;
3907
    color: #ddd;
3908
}
3909

    
3910
.invitations #errors {
3911
    font-size: 100%;
3912
    margin-bottom: 10px;
3913
}
3914

    
3915
#invsent {
3916
    padding-top: 10px;
3917
}
3918

    
3919
#invsent h3.overlay-inner-title {
3920
    font-size: 1.2em;
3921
    font-weight: normal;
3922
    border-bottom: 1px solid #B0D0E0;
3923
}
3924

    
3925
#invsent .icons-info img {
3926
    vertical-align: middle;
3927
}
3928

    
3929
#invsent .icons-info {
3930
    margin-top: 10px;
3931
    font-size: 0.7em;
3932
}
3933

    
3934
#invsent .icons-info span {
3935
    margin-right: 10px;
3936
}
3937

    
3938
.notification-box .invitations {
3939
    padding-bottom: 0;
3940
}
3941
.notification-box .invitations .sub-text {
3942
    display: none;
3943
}
3944

    
3945
h3.overlay-inner-title {
3946
    color: #4085A5;
3947
    font-size: 2em;
3948
}
3949

    
3950
#invsent .message {
3951
    font-size: 0.9em;
3952
    padding: 5px 0;
3953
    margin-top: 5px;
3954
    margin-bottom: -10px;
3955
    color: #5CAD54;
3956
}
3957

    
3958
#invsent .errormsg {
3959
    color: #AE2B34;
3960
}
3961

    
3962
#add-name-container {
3963
    margin-bottom: 10px;   
3964
}
3965

    
3966
.remove-field-trigger, .add-field-trigger {
3967
    cursor: pointer;
3968
}
3969

    
3970
.add-field-trigger img {
3971
    vertical-align: middle;
3972
}
3973

    
3974
.invitations form {
3975
    margin-bottom: 20px;
3976
}
3977

    
3978
#invsent h3 {
3979
    font-size: 0.8em;
3980
    font-weight: bold;
3981
}
3982

    
3983
#invsent h3 span {
3984
    font-weight: normal;
3985
    font-size: 0.9em;
3986
    margin-right: 5px;
3987
    display: block;
3988
    margin-top: -2px;
3989
}
3990

    
3991
#invsent ul {
3992
    margin-top: 3px;
3993
}
3994

    
3995
#invsent li {
3996
    color: #4085A5;
3997
    font-size: 1.1em;
3998
    padding-top: 0.5em;
3999
    border-bottom: 1px solid #efefef;
4000
    padding-bottom: 0.5em;
4001
    font-size: 0.9em;
4002
    position: relative;
4003
}
4004

    
4005
#invsent li:hover {
4006
    background-color: #efefef;
4007
}
4008

    
4009
#invsent li img {
4010
    position: absolute;
4011
    left:20px;
4012
    bottom: 2px;
4013
}
4014

    
4015
#invsent h3 img {
4016
    float: none;
4017
    vertical-align: middle;
4018
    margin-left: 3px;
4019
}
4020

    
4021
#invsent .name {
4022
    float: left;
4023
    width: 55%;
4024
    padding-left: 20px;
4025
}
4026

    
4027
#invsent .email {
4028
    float: left;
4029
    width: 40%;
4030
}
4031

    
4032
#invsent li.accepted {
4033
    color: #ABD49C;
4034
}
4035

    
4036
#invsent li img {
4037
    margin-left: -20px;
4038
    margin-top: 1px;
4039
}
4040

    
4041
#invsent li img.resend {
4042
    cursor: pointer;
4043
}
4044

    
4045
.invitations #field_email_name {
4046
}
4047

    
4048
#invform #fields input {
4049
    margin-right: 10px;
4050
}
4051

    
4052
.machine-now-building {
4053
    padding-right: 15px !important;
4054
    text-align: justify;
4055
}
4056

    
4057
.sub-text {
4058
    padding-top: 15px;
4059
    padding-right: 15px;
4060
    text-align: justify;
4061
    font-style: italic;
4062
    font-size: 0.8em !important;
4063
}
4064

    
4065
#notification-box a {
4066
    color: #4085A5;
4067
}
4068

    
4069
#notification-box .machine-title img {
4070
    vertical-align: middle;
4071
}
4072

    
4073
#notifiaction-box .password-header {
4074
    margin-bottom: 0 !important;
4075
}
4076

    
4077
#notification-box .password-container a {
4078
    color: #fff;
4079
    text-decoration: underline;
4080
}
4081

    
4082
#notification-box .password-container a:hover {
4083
    background-color: #fff;
4084
    color: #4085A5;
4085
}
4086

    
4087
#notification-box .password-container {
4088
    background: #4085A5;
4089
    border: none;
4090
}
4091

    
4092
#notification-box .password-container .password a {
4093
    font-weight: normal !important;
4094
}
4095

    
4096
#notification-box .cmd {
4097
    color: #fff;
4098
    font-family: monospace;
4099
    font-size: 1.6em;
4100
}
4101

    
4102
.machine-container .separator {
4103
    background-color: #B0D1E0;
4104
}
4105

    
4106
#creation-password-overlay div.password-cont {
4107
    margin: 10px auto;
4108
    padding: 10px;
4109
    border: 2px solid #75B54A;
4110
    background-color: #AADE87;
4111
    color: #447821;
4112
    text-align: left;
4113
    padding-left: 5em;
4114
    position: relative;
4115
}
4116

    
4117
#creation-password-overlay {
4118
    position: relative;
4119
}
4120

    
4121
#creation-password-overlay .form-action {
4122
    position: absolute;
4123
    bottom: 15px;
4124
    right: 13px;
4125
    font-size: 0.8em;
4126
}
4127

    
4128
#creation-password-overlay .password-label {
4129
    float: left;
4130
}
4131

    
4132
#creation-password-overlay .password {
4133
    font-size: 1.3em;
4134
    font-weight: bold;
4135
    margin-right: 5em;
4136
    float: right;
4137
    margin-top: -4px;
4138
}
4139

    
4140
.feedback-form .description {
4141
    margin-bottom: 25px;
4142
}
4143

    
4144
.feedback-form label {
4145
    display: block;
4146
    font-weight: bold;
4147
    margin-bottom: 10px;
4148
    font-size: 0.8em;
4149
}
4150

    
4151
.feedback-form .form-actions {
4152
    border-top: none;
4153
}
4154

    
4155
.nospace {
4156
    padding-top: 0 !important;
4157
    padding-bottom: 0 !important;
4158
}
4159

    
4160
.noborder {
4161
    border-top: none !important;
4162
    border-bottom: none !important;
4163
}
4164

    
4165
.overlay .feedback-form .messages.description {
4166
    padding-bottom:0;
4167
    margin-bottom: 0;
4168
}
4169

    
4170
.feedback-form .messages .error-message {
4171
    color: #f00;
4172
}
4173

    
4174
.feedback-form .messages .success-message {
4175
    color: #8AA87F;
4176
}
4177

    
4178
.feedback-form .feedback-message {
4179
    width: 548px;
4180
    height: 200px;
4181
    border: 1px solid #ddd;
4182
    padding: 5px;
4183
}
4184

    
4185
#feedback-form .empty-error-msg {
4186
    display: none;
4187
}
4188

    
4189
#feedback-form .data-text {
4190
    display: none;
4191
}
4192

    
4193
#feedback-form .message {
4194
    display: none;
4195
}
4196

    
4197
#feedback-form label {
4198
    display: block;
4199
    font-size: 0.85em;
4200
    font-weight: bold;
4201
}
4202

    
4203
#feedback-form label.inline {
4204
    display: inline;
4205
    padding-left: 5px;
4206
}
4207

    
4208
#feedback-form p {
4209
    padding: 1em 0;
4210
    color: #444;
4211
    margin-bottom: 10px;
4212
}
4213

    
4214
#feedback-form .description {
4215
    font-style: italic;
4216
    font-size: 0.9em;
4217
    color: #888;
4218
}
4219

    
4220
#feedback-form .feedback-text {
4221
    width: 98%;
4222
    height: 100px;
4223
    margin-top: 10px;
4224
    margin-bottom: 10px;
4225
}
4226

    
4227
#feedback-form .submit-data {
4228
    display: none;
4229
}
4230

    
4231
#feedback-form .submit, #invform .submit {
4232
    background-color: #4085A5;
4233
    color: #fff;
4234
    border: none;
4235
    padding: 5px 16px;
4236
    cursor: pointer;
4237
    font-size: 1em;
4238
    position: relative;
4239
}
4240

    
4241
#feedback .submit {
4242
    float: right;
4243
    right: 10px;
4244
    margin-top: 10px;
4245
}
4246

    
4247

    
4248
#feedback-form .submit:hover, #invform .submit:hover {
4249
    background-color: #549FC3;
4250
}
4251

    
4252
.feedback-intro {
4253
    padding-right: 15px !important;
4254
    text-align: justify;
4255
}
4256

    
4257
.popup-body .message {
4258
    padding: 20px 5px;
4259
    display: none;
4260
}
4261

    
4262
.popup-body .loading {
4263
    color: #fff;
4264
}
4265

    
4266
.popup-body .success {
4267
    color: #1F921A;
4268
}
4269

    
4270
.popup-body .errormsg {
4271
    color: #E32424;
4272
}
4273

    
4274

    
4275
.close-msg-box {
4276
    display: block;
4277
    margin-top: 10px;
4278
    cursor: pointer;
4279
    color: #4085A5;
4280
    text-decoration: underline;
4281
}
4282

    
4283

    
4284
.console .ip-version-label {
4285
    margin: 0 5px;
4286
}
4287

    
4288
.ipv6-text, .ipv4-text {
4289
    font-size: 0.9em;
4290
}
4291

    
4292
.tooltip {
4293
    background-color: #C4DDE9;
4294
    color: #000;
4295
    font-size: 0.7em;
4296
    padding: 0.2em 0.5em;
4297
    border: 1px solid #888;
4298
    z-index: 50000;
4299
}
4300

    
4301
/*404 and 500 pages*/
4302

    
4303
.error_page {
4304
    position: relative;
4305
    top: 40px;
4306
    padding-bottom: 140px !important;
4307
}
4308

    
4309
.error_page h1 {
4310
    font-weight: normal;
4311
}
4312

    
4313
.error_page .msg_header {
4314
    margin: 0px;
4315
    font-size: 10em;
4316
    position: absolute;
4317
    left: -5px;
4318
    top: 0px;
4319
    color: #4085A5;
4320
    font-family: arial, verdana;
4321
}
4322

    
4323
.error_page p.error_desc {
4324
    color: #fff;
4325
    font-size: 0.8em;
4326
}
4327

    
4328
.error_page {
4329
    padding-right: 50px !important;
4330
    padding-left: 100px !important;
4331
}
4332

    
4333
.error_page .error_content {
4334
    padding-left: 150px;
4335
    padding-top: 97px;
4336
}
4337

    
4338
.error_page .error_content .links, .info_content .links {
4339
    margin-top: 10px;
4340
    margin-left: 20px;
4341
}
4342

    
4343
.error_page .http_error .code {
4344
    letter-spacing: -10px;
4345
    font-size: 9em;
4346
}
4347

    
4348
.error_page .http_error .msg {
4349
    letter-spacing: -1px;
4350
    font-size: 2em;
4351
}
4352

    
4353
.error_page .http_error {
4354
    position: absolute;
4355
    right: 0px;
4356
    bottom: 0px;
4357
    color: #75B3D0;
4358
    line-height: 1em;
4359
}
4360

    
4361
.error_page .error_content a, .info_content .links a {
4362
    color: #4085A5;
4363
    font-weight: bold;
4364
    margin-right: 10px;
4365
    font-size: 0.9em;
4366
}
4367

    
4368
.error_body #container, .info_body #container {
4369
    background-position: right 200px;
4370
}
4371

    
4372
.info_page h1 {
4373
    color: #4085A5;
4374
    font-size: 2em;
4375
    font-weight: normal;
4376
}
4377

    
4378
.info_page p {
4379
    color: #ffffff;
4380
    margin: 1em 0;
4381
}
4382

    
4383
.info_body p a, .error_body p a{
4384
    color: #4085A5;
4385
    text-decoration: underline;
4386
}
4387

    
4388
.error_404 .http_error .code {
4389
    letter-spacing: -7px;
4390
}
4391

    
4392
.network-progress-indicator {
4393
    position: relative;
4394
    display: none;
4395
}
4396

    
4397
.network-progress-indicator img {
4398
    position: absolute;
4399
    bottom: 44px;
4400
    left: 340px;
4401
}
4402

    
4403

    
4404
.single .progress-message {
4405
    margin-top: 90px;
4406
    font-size: 0.6em;
4407
    padding: 0 10px;
4408
    text-align: center;
4409
}
4410

    
4411
/*metadata keys/values*/
4412
.items .tag-item  {
4413
    display: block;
4414
}
4415

    
4416
.single .items .tag-item .key {
4417
    width: 60px;
4418
}
4419

    
4420
.running .scrollable, .terminated .scrollable {
4421
    height: 42px;
4422
}
4423

    
4424
.items .tag-item .key {
4425
    margin-right: 5px;
4426
    width: 30px;
4427
    display: block;
4428
    float: left;
4429
    color: #000;
4430
}
4431

    
4432
.items .tag-item .value {
4433
    color: #444;
4434
}
4435

    
4436
#machinesview-list {
4437
    display: none;
4438
}
4439

    
4440
#machinesview-single {
4441
    position: relative;
4442
    display: none;
4443
}
4444

    
4445
#machinesview-icon {
4446
    display: none;
4447
}
4448

    
4449
#machinesview-icon, #machinesview-single, #machinesview-list {
4450
    
4451
}
4452

    
4453
tbody.machines .spinner {
4454
    margin-top: 0!important;
4455
    margin: 0 !important;
4456
    float: none !important;
4457
}
4458

    
4459
.slider .slider-point {
4460
    width: 4px;
4461
    height: 3px;
4462
    margin-left: 1px;
4463
    background-color: transparent;
4464
    display: block;
4465
    position: absolute;
4466
    z-index: 10;
4467
    bottom: 0px;
4468
}
4469

    
4470
.slider .slider-point-light {
4471
    background-color: transparent;
4472
}
4473

    
4474
.slider-point-text {
4475
    font-size: 0.6em;
4476
    position: absolute;
4477
    top: 4px;
4478
    border-top: 5px solid #C5DEE9;
4479
    padding: 3px;
4480
    color: #4085A5;
4481
    display: block;
4482
    min-width: 6px;
4483
    text-align: middle;
4484
}
4485

    
4486
.slider .handle {
4487
    z-index: 50;
4488
}
4489

    
4490
.modal p.desc {
4491
    margin: 5px 0;
4492
    margin-left: 37px;
4493
    font-size: 0.8em;
4494
    color: #888;
4495
}
4496

    
4497
.api_overlay_template {
4498
    display: none;
4499
}
4500

    
4501
.api_content .password-container .password {
4502
    color: #fff;
4503
    font-size: 1.1em;
4504
}
4505

    
4506
#disks-pane {
4507
    margin-top: 58px;
4508
}
4509

    
4510
span.resend-msg {
4511
    display: block;
4512
    margin-bottom: 5px;
4513
}
4514

    
4515
.success-msg {
4516
    background-color: #5CAD54;
4517
    color: #fff;
4518
    padding: 0.4em;
4519
    border: 1px solid #ddd;
4520
}
4521

    
4522
.error-msg {
4523
    background-color: #800000;
4524
    color: #fff;
4525
    padding: 0.4em;
4526
    border: 1px solid #ddd;
4527
}
4528

    
4529
.success-msg em, .error-msg em {
4530
    font-weight: bold;
4531
    font-style: normal;
4532
    font-size: 0.9em;
4533
}
4534

    
4535
.pagination {
4536
            font-size: 80%;
4537
        }
4538
        
4539
.pagination a {
4540
    text-decoration: none;
4541
        border: solid 1px #AAE;
4542
        color: #15B;
4543
}
4544

    
4545
.pagination a, .pagination span {
4546
    display: block;
4547
    float: left;
4548
    padding: 0.3em 0.5em;
4549
    margin-right: 5px;
4550
        margin-bottom: 5px;
4551
        min-width:1em;
4552
        text-align:center;
4553
}
4554

    
4555
.pagination .current {
4556
    background: #4085A5;
4557
    color: #fff;
4558
        border: solid 1px #AAE;
4559
}
4560

    
4561
.pagination .current.prev, .pagination .current.next{
4562
        color:#999;
4563
        border-color:#999;
4564
        background:#fff;
4565
}
4566

    
4567
#invsent .pagination {
4568
    margin-top: 10px;
4569
}
4570

    
4571
table.list-machines .wave {
4572
    float: none !important;
4573
    margin: 0 !important;
4574
}
4575

    
4576
.overlay {
4577
    display: none;
4578
}
4579

    
4580
.overlay .copy-content .clip-copy  {
4581
    right: 10px;
4582
    top:8px;
4583
    border: 1px solid #fff;
4584
}
4585

    
4586
.overlay .copy-content {
4587
    background-color: #387693;
4588
    color: #fff;
4589
    padding: 10px;
4590
    font-size: 1.2em;
4591
    text-align: center;
4592
    position: relative;
4593
}
4594

    
4595
.overlay {
4596
    background-color: #fff;
4597
    border: 2px solid #444;
4598
    text-align: left;
4599

    
4600
    -moz-box-shadow: 0 0 90px 5px #000;
4601
    -webkit-box-shadow: 0 0 90px 5px #000;
4602
    box-shadow: 0 0 90px 5px #000;
4603
    width: 600px;
4604
}
4605

    
4606
.overlay a {
4607
    color: #387693;
4608
}
4609

    
4610
.overlay .overlay-content .description.subinfo {
4611
    margin-bottom:0;
4612
    border-bottom: none;
4613
    padding-bottom:0;
4614
    margin-top: 10px;
4615
    padding-top:10px;
4616
    border-top: 1px solid #64a6c4;
4617
    /*border-top: 1px solid #DBE6EB;*/
4618
    font-size: 0.8em;
4619
}
4620

    
4621
.overlay .overlay-content .important {
4622
    color: #800000;
4623
}
4624

    
4625
.overlay .overlay-content .description {
4626
    color: #444;
4627
    border-bottom: 1px solid #64a6c4;
4628
    margin-bottom: 10px;
4629
    padding-bottom: 10px;
4630
    font-size: 0.9em;
4631
    line-height: 1.6em;
4632
}
4633
.overlay .overlay-content .empty-message {
4634
    margin-bottom: 5px;
4635
}
4636

    
4637
.overlay h3.header {
4638
    font-size: 0.9em;
4639
    text-align: left;
4640
    padding: 0.8em;
4641
    padding-left: 1em;
4642
    font-weight: normal;
4643
    border-bottom: 1px solid #ddd;
4644
}
4645

    
4646
.overlay h3.header .title {
4647
    float: left;
4648
}
4649

    
4650
.overlay .container {
4651
    position: relative;
4652
    padding-top: 1em;
4653
    padding: 0.5em;
4654
    background-image: url("../images/popup-bg.png");
4655
    background-repeat: repeat-x;
4656
}
4657

    
4658
.overlay .content {
4659
    background-color: transparent;
4660
    background-image: url("../images/popup-inner-bg.png");
4661
    padding: 1em;
4662
    font-size: 0.8em;
4663
    background-repeat: repeat-x;
4664
    -moz-box-shadow: 0 0 1px 1px #888;
4665
    -webkit-box-shadow: 0 0 1px 1px #888;
4666
    box-shadow: 0 0 1px 1px #888;
4667
}
4668

    
4669
.overlay .message {
4670
}
4671

    
4672
.overlay .actions {
4673
    position: absolute;
4674
    right: 0.75em;
4675
    top: 0.6em;
4676
}
4677

    
4678
.overlay .actions span {
4679
    font-size: 0.8em;
4680
    color: #fff;
4681
    cursor: pointer;
4682
    margin-left: 10px;
4683
    display: block;
4684
    float: left;
4685
    background-color: #4085A5;
4686
    padding: 0.2em 0.4em;
4687
}
4688

    
4689
.overlay-error .error-more-details {
4690
    margin-top: 5px;
4691
    max-height: 210px;
4692
    overflow: auto;
4693
}
4694

    
4695
.overlay-error .key.details.expand {
4696
    background-image: url("../images/plus-8.png");
4697
}
4698

    
4699
.overlay-error .key.details {
4700
    background-color: #5189A3;
4701
    cursor: pointer;
4702
    background-image: url("../images/minus-8.png");
4703
    background-repeat: no-repeat;
4704
    background-position: 545px;
4705
}
4706

    
4707
.overlay-error .container {
4708
    padding-top: 1.9em;
4709
}
4710

    
4711
.overlay-error .error-details {
4712
    font-size: 0.8em;
4713
    margin-top: 10px;
4714
}
4715

    
4716
.overlay-error .error-details anonymous {
4717
    display: block;
4718
    margin-top: 10px;
4719
}
4720

    
4721
.overlay-error h3.header {
4722
    background-color: #800000;
4723
    color: #fff;
4724
}
4725

    
4726
.overlay-error.non-critical h3.header {
4727
    background-color: #987249;
4728
}
4729

    
4730
.overlay-error span.key {
4731
    font-weight: normal;
4732
    display: block;
4733
    margin-top: 0.5em;
4734
    background-color: #74AEC9;
4735
    color: #fff;
4736
    padding: 0.4em;
4737
    font-size: 0.8em;
4738
    font-weight: bold;
4739
}
4740

    
4741
.overlay-error .indicator {
4742
    background-color: #880000;
4743
    color: #fff;
4744
    padding: 4px;
4745
    display: block;
4746
    float: left;
4747
    border: 1px solid #444;
4748
}
4749

    
4750
.overlay-error .nav-btn:hover {
4751
    
4752
}
4753

    
4754
.overlay-error .nav-btn {
4755
    margin-left: 5px;
4756
    color: #fff;
4757
    display: block;
4758
    float: left;
4759
    padding: 4px;
4760
    background-color: #AAA;
4761
    border: 1px solid #444;
4762
}
4763

    
4764
.overlay-error .error-nav {
4765
    position: absolute;
4766
    right: 0px;
4767
    bottom: -25px;
4768
    font-size: 0.8em;
4769
}
4770

    
4771
.overlay-error span.value, .overlay-error div.value {
4772
    padding: 0.4em;
4773
    display: block;
4774
    margin-bottom: 0.3em;
4775
}
4776

    
4777
.overlay h3 .closeme {
4778
    float: right;
4779
    font-size: 0.7em;
4780
    margin-top: 0.2em;
4781
    cursor: pointer;
4782
}
4783

    
4784
.overlay .header .subtitle {
4785
    display: block;
4786
    font-size: 0.8em;
4787
    color: #ddd;
4788
}
4789

    
4790
.overlay .header .subtitle img {
4791
    vertical-align: middle;
4792
    margin-left: 10px;
4793
    margin-bottom: 2px;
4794
}
4795

    
4796
.overlay-info .content {
4797
    background-repeat: no-repeat;
4798
    background-position: 110% 110%;
4799
    background-color: rgba(255,255,255,0.6)
4800
}
4801

    
4802
.overlay-info .header {
4803
    background-color: #4085A5;
4804
}
4805

    
4806
.overlay-info .header .title {
4807
    color: #fff;
4808
}
4809

    
4810
.overlay-info .header .closeme {
4811
    color: #fff;
4812
}
4813

    
4814
#loading-view {
4815
    width: 600px;
4816
    margin: 0 auto;
4817
    padding: 20px 0;
4818
    font-size: 0.8em;
4819
}
4820

    
4821
#loading-view .header span {
4822
    font-weight: bold;
4823
    color: #4085A5;
4824
}
4825

    
4826
#loading-view .info {
4827
    color: #ddd;
4828
}
4829

    
4830
.options-list {
4831
    margin-top: 0.5em;
4832
    font-size: 0.8em;
4833
}
4834

    
4835
.options-list.five li {
4836
    float: left;
4837
    display: block;
4838
    width: 20%;
4839
    margin-bottom: 5px;
4840
}
4841

    
4842
.options-list.five li:nth-child(5n) .options-object-cont {
4843
    margin-right: 0;
4844
}
4845

    
4846
.options-object-cont input {
4847
    border: 1px solid #aaa;
4848
    width: 92px;
4849
    padding: 0;
4850
    margin: 0;
4851
    margin-top:3px;
4852
    padding: 2px;
4853
}
4854

    
4855
.options-list.three li {
4856
    float: left;
4857
    display: block;
4858
    width: 33%;
4859
    margin-bottom: 5px;
4860
}
4861

    
4862
.meta-list .options-list li.options-object.create .options-object-cont {
4863
    background-image: url("../images/option-action-add.png");
4864
    background-repeat: no-repeat;
4865
    background-position: 90px 5px;
4866
}
4867

    
4868
.meta-list .options-list li .options-object-cont .option-action,
4869
.meta-list .options-list li.options-object.create {
4870
    cursor: pointer !important;
4871
}
4872

    
4873
.meta-list .options-list li .options-object-cont {
4874
    cursor: inherit;
4875
}
4876

    
4877
.options-list li .options-object-cont {
4878
    padding: 5px;
4879
    margin-right: 4px;
4880
    border: 1px solid #A6D1E6;
4881
    cursor: pointer;
4882
    min-height: 35px;
4883
    position: relative;
4884
}
4885

    
4886
.options-list.three li:nth-child(3n) .options-object-cont {
4887
    margin-right: 0;
4888
}
4889

    
4890
.options-list li.selected .options-object-cont {
4891
    background-color: #efefef;
4892
    border: 2px solid #4085A5;
4893
    padding: 4px;
4894
}
4895

    
4896
.options-list li.selected .options-object-cont .title {
4897
}
4898

    
4899
.options-list li.options-object .title {
4900
    display: block;
4901
    color: #FF7F2A;
4902
    margin-bottom: 2px;
4903
}
4904

    
4905
.options-list li .option-action {
4906
    display: none;
4907
    position: absolute;
4908
    background-repeat: no-repeat;
4909
}
4910

    
4911
.options-list.five li.editing {
4912
    width: 40%;
4913
}
4914

    
4915
.options-list.five li.editing .value {
4916
    display: none;
4917
}
4918

    
4919
.options-list li .remove {
4920
    background-image: url("../images/option-action-remove.png");
4921
    width:10px;
4922
    height:10px;
4923
    right:5px;
4924
    top: 5px;
4925
}
4926

    
4927
.options-list li .edit {
4928
    background-image: url("../images/option-action-edit.png");
4929
    width:10px;
4930
    height:10px;
4931
    right:5px;
4932
    bottom: 8px;
4933
}
4934

    
4935
.options-list li:hover .option-action  {
4936
    display: block;
4937
}
4938

    
4939
.options-list li.options-object .value {
4940
    color: #4085A5;
4941
    margin-top: 5px;
4942
    display: block;
4943
}
4944

    
4945
.options-list li.selected.options-object .value {
4946
}
4947

    
4948
.options-list li .options-object-cont:hover {
4949
    background-color: #fff;
4950
}
4951

    
4952
.options-list li.selected .options-object-cont:hover {
4953
    background-color: #fff;
4954
}
4955

    
4956
.options-list li img {
4957
    float: left;
4958
    margin:2px;
4959
    margin-right: 10px;
4960
    padding-bottom:10px;
4961
}
4962

    
4963
#network-vms-select-content li.options-object .value {
4964
    margin-top: 10px;
4965
    margin-left: 30px;
4966
}
4967

    
4968
#network-vms-select-content li.options-object:hover .options-object-cont,
4969
#network-vms-select-content li.options-object .options-object-cont {
4970
    background-image: url("../images/option-action-add-dark.png");
4971
    background-repeat: no-repeat;
4972
    background-position: 160px 28px;
4973
}
4974

    
4975
#network-vms-select-content li.selected:hover .options-object-cont,
4976
#network-vms-select-content li.selected .options-object-cont {
4977
    background-image: url("../images/option-action-remove.png") !important;
4978
}
4979

    
4980
#metadata-overlay-content .view .value {
4981
    margin-top: 10px;
4982
}
4983

    
4984
#metadata-overlay-content {
4985
    position: relative;
4986
}
4987

    
4988
.vm-meta .editor .predefined .predefined-meta-key:hover {
4989
    background-color: #4e8eac;
4990
    color: #fff;
4991
}
4992

    
4993
.vm-meta .editor .predefined .predefined-meta-key {
4994
    float: left;
4995
    margin-right: 5px;
4996
    padding: 4px;
4997
    display: block;
4998
    cursor: pointer;
4999
}
5000

    
5001
.vm-meta .editor .predefined {
5002
    background-color: #A6D1E6;
5003
    font-size: 0.9em;
5004
    border-top: 1px solid #ddd;
5005
}
5006

    
5007
.vm-meta .editor input {
5008
}
5009
.vm-meta .editor {
5010
    margin-bottom: 10px;
5011
}
5012

    
5013
.vm-meta .editor .form-actions .form-action {
5014
    min-width: 50px;
5015
}
5016

    
5017
.vm-meta .editor .form-field input.meta-key {
5018
    width: 90px;
5019
}
5020

    
5021
.vm-meta .form-field {
5022
    float: left;
5023
}
5024

    
5025
.vm-meta .form-actions .form-action {
5026
    float: left;
5027
    margin-right: 10px;
5028
    height: 11px;
5029
}
5030

    
5031
.vm-meta .editor .form-actions .cancel {
5032
    margin-right: 0;
5033
}
5034

    
5035
.vm-meta .editor .form-actions {
5036
    float: right;
5037
    margin:0;
5038
    padding:0;
5039
    margin-left: 15px;
5040
    margin-top: 0px;
5041
}
5042

    
5043
.vm-meta .editor {
5044
    background-color: rgba(64, 133, 165, 0.898) !important;
5045
    background-color: #649DB8;
5046
    font-size:0.9em;
5047
}
5048

    
5049
.vm-meta .meta-key-title {
5050
    font-size: 1.3em;
5051
    color: #fff;
5052
    margin-bottom: 10px;
5053
    display: none;
5054
    float: left;
5055
}
5056

    
5057
.vm-meta .editor-content {
5058
    padding: 10px;
5059
}
5060

    
5061
.vm-meta .inner-mask {
5062
    background-color: #fff;
5063
    opacity:0.6;
5064
    position: absolute;
5065
    top:0;
5066
    left:0;
5067
}
5068

    
5069
.vm-meta .editor label {
5070
    float: left;
5071
    color: #fff;
5072
    margin-right: 2px;
5073
    padding-top:4px;
5074
    font-size: 0.9em;
5075
}
5076

    
5077
.vm-meta .editor input {
5078
    border: none;
5079
    width: 170px;
5080
    margin-left: 10px;
5081
    font-size: 0.9em;
5082
    padding: 4px;
5083
}
5084

    
5085
.vm-meta li.create .options-object-cont {
5086
    background-color: #B3C9AD ;
5087
    border-color: #788774;
5088
}
5089
.vm-meta li.create .options-object-cont .value,
5090
.vm-meta li.create .options-object-cont .title {
5091
    color: #fff;
5092
}
5093

    
5094
#createvm-overlay-content {
5095
    padding: 0;
5096
}
5097

    
5098
.overlay-createvm .container {
5099
    width: 584px !important;
5100
}
5101

    
5102
.create-vm .header-step.current {
5103
    font-weight: bold;
5104
}
5105

    
5106
.create-vm .create-step-cont {
5107
    min-height: 240px;
5108
}
5109
.create-vm .create-controls {
5110
    padding: 10px;
5111
}
5112

    
5113
.create-vm ul li {
5114
    cursor: pointer;
5115
    padding: 4px;
5116
}
5117

    
5118
.create-vm ul li.selected {
5119
    background-color: #aaa;
5120
}
5121

    
5122
.cont-toggler {
5123
    background-image: url("../images/down-arrow.png");
5124
    background-position: right;
5125
    background-repeat: no-repeat;
5126
    background-color: #A1C8DB;
5127
    display: inline-block;
5128
    border-right: 6px solid #A1C8DB;
5129
    padding:2px;
5130
    padding-right: 14px;
5131
    padding-left:0;
5132
    cursor: pointer;
5133
    color: #fff;
5134
    font-size: 0.9em;
5135
}
5136

    
5137
.cont-toggler .label {
5138
    background-color: #98BDCF;
5139
    padding: 2px;
5140
    padding-left: 5px;
5141
    padding-right: 5px;
5142
}
5143

    
5144
.cont-toggler.open {
5145
    background-color: #98BDCF;
5146
    border-color: #98BDCF;
5147
    background-image: url("../images/up-arrow.png");
5148
}
5149

    
5150
.cont-toggler.open .label {
5151
    background-color: #4085A5;
5152
}
5153

    
5154
.overlay .form label {
5155
    font-color: #444;
5156
    margin-right: 10px;
5157
}
5158

    
5159
.form-field.error label {
5160
    color: #ff0000;
5161
    text-decoration: underline;
5162
}
5163

    
5164
.form-field input {
5165
    border: 1px solid #aaa;
5166
    width: 200px;
5167
    padding: 3px;
5168
}
5169

    
5170
.form-actions {
5171
    margin-top: 5px;
5172
    padding-top:5px;
5173
    border-top: 1px solid #64a6c4;
5174
    font-size: 0.8em;
5175
}
5176

    
5177
.form-actions.plain {
5178
    margin-top: 0px;
5179
    padding-top:0px;
5180
    border-top: 0px;
5181
}
5182

    
5183
.form-action {
5184
    float: right;
5185
    min-width: 140px;
5186
    background-color: #FF7F2A;
5187
    border: 1px solid #FF7F2A;
5188
    text-align: center;
5189
    color: #FFFFFF;
5190
    cursor: pointer;
5191
    padding: 4px;
5192
}
5193

    
5194
.form-action:hover {
5195
    background-color: #FF9955;
5196
    color: #FFF;
5197
}
5198

    
5199
.form-action.prev,
5200
.form-action.cancel {
5201
    background-color: #800;
5202
    border: 1px solid #800;
5203
    float: left;
5204
}
5205

    
5206
.form-action.prev:hover,
5207
.form-action.cancel:hover {
5208
    background-color: #CC0000;
5209
    color: #fff;
5210
}
5211

    
5212
.form-action.next,
5213
.form-action.ok {
5214
    background-color: #080;
5215
    border: 1px solid #080;
5216
}
5217

    
5218
.form-action.next:hover,
5219
.form-action.ok:hover {
5220
    background-color: #00aa00;
5221
    color: #fff;
5222
}
5223

    
5224
.form-action .create,
5225
.form-action .submit {
5226

    
5227
}
5228

    
5229
.form-action.in-progress, button.in-progress {
5230
    background-image: url("../images/icons/indicators/medium/horizontal-progress.gif");
5231
    background-repeat: no-repeat;
5232
    background-position: center center;
5233
    color: transparent;
5234
}
5235

    
5236
#createvm-overlay-content {
5237
    padding: 0;
5238
}
5239

    
5240
.create-vm .image-details.selected .size {
5241
    color: #eee;
5242
}
5243

    
5244
.create-vm .image-details p {
5245
    font-size: 0.8em;
5246
    padding-left: 27px;
5247
    display:block;
5248
}
5249

    
5250
.create-vm .image-details .size {
5251
    margin-top: 2px;
5252
    font-size: 0.8em;
5253
    color: #aaa;
5254
    position: absolute;
5255
    right:5px;
5256
    top: 5px;
5257
}
5258

    
5259
.create-vm .step-cont {
5260
    margin: 15px;
5261
}
5262

    
5263
.create-vm .create-step-cont {
5264
    min-height: 250px;
5265
    float: left;
5266
    width: 584px;
5267
}
5268

    
5269
.create-vm .create-controls {
5270
    padding: 10px;
5271
    border-top: 1px solid #ddd;
5272
}
5273

    
5274
.create-vm .empty {
5275
    font-size: 0.8em;
5276
    color: #444;
5277
}
5278

    
5279
.create-vm h4 {
5280
    color: #5CA1C0;
5281
    margin-bottom: 0.5em;
5282
    font-family: arial;
5283
}
5284
.create-vm ul li {
5285
    cursor: pointer;
5286
    padding: 4px;
5287
    font-size: 0.9em;
5288
}
5289

    
5290
.create-vm ul li.selected {
5291
    background-color: #5CA1C0;
5292
    color: #fff;
5293
}
5294

    
5295
.create-vm .images-list-cont {
5296
    width: 40%;
5297
    float: left;
5298
    padding-left: 3%;
5299
    padding-right: 3%;
5300
}
5301

    
5302
.create-vm p.desc {
5303
    font-size: 0.9em;
5304
    color: #888;
5305
    margin-bottom: 10px;
5306
}
5307

    
5308
.create-vm li.role .values .val:hover {
5309
    background-color: #eee;
5310
}
5311
.create-vm li.role .values .val.selected,  .create-vm li.role .values .val.selected:hover {
5312
    color: #fff;
5313
    background-color: #5CA1C0;
5314
}
5315

    
5316
.create-vm .images-filter-cont, .create-vm .flavors-predefined-cont {
5317
    width: 18%;
5318
    padding-right: 4%;
5319
    float:left;
5320
    border-right: 1px solid #A1C8DB;
5321
    overflow: auto;
5322
}
5323

    
5324
.create-vm .flavor-options-cont {
5325
    width: 74%;
5326
    float: left;
5327
    margin-left: 20px;
5328
}
5329

    
5330
.create-vm .flavor-options-cont .flavor-options li:hover {
5331
    background-image:-webkit-linear-gradient(top, #E8F4FA, #D1E7F0);
5332
    background-image:-o-linear-gradient(top, #E8F4FA, #D1E7F0);
5333
    background-image:-moz-linear-gradient(top, #E8F4FA, #D1E7F0);
5334
    background-image:linear-gradient(top, #E8F4FA, #D1E7F0);
5335
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8F4FA', endColorstr='#D1E7F0', GradientType=0);
5336
}
5337

    
5338
.create-vm .flavor-options-cont .flavor-options li.disabled * {
5339
    color: #eee !important;
5340
}
5341

    
5342
.create-vm .flavor-options-cont .flavor-options li.disabled {
5343
    background-image:linear-gradient(top, #aaa, #ddd);
5344
    background-image:-webkit-linear-gradient(top, #aaa, #ddd);
5345
    background-image:-o-linear-gradient(top, #aaa, #ddd);
5346
    background-image:-moz-linear-gradient(top, #aaa, #ddd);
5347
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#dddddd', GradientType=0);
5348
}
5349

    
5350
.create-vm .flavor-options-cont .flavor-options li.selected {
5351
    background-color: #FF9955;
5352
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5353
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5354
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5355
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5356
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9955', endColorstr='#E88B4D', GradientType=0);
5357
    border: 1px solid #C97943;
5358
}
5359

    
5360
.create-vm .predefined-list li.disabled {
5361
    color: #ddd !important;
5362
}
5363

    
5364
.create-vm .flavor-options-cont .flavor-options li {
5365
    display: block;
5366
    float: left;
5367
    margin-right: 10px;
5368
    padding: 10px 15px;
5369
    border: 1px solid #aaa;
5370
    background-image:-webkit-linear-gradient(top, #D1E7F0, #E8F4FA);
5371
    background-image:-o-linear-gradient(top, #D1E7F0, #E8F4FA);
5372
    background-image:-moz-linear-gradient(top, #D1E7F0, #E8F4FA);
5373
    background-image:linear-gradient(top, #D1E7F0, #E8F4FA);
5374
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1E7F0', endColorstr='#E8F4FA', GradientType=0);
5375
}
5376

    
5377
.create-vm .flavor-options-cont .flavor-options {
5378
    margin-bottom: 25px;
5379
}
5380

    
5381
.create-vm .flavor-options .metric {
5382
    font-size: 0.8em;
5383
    margin-left: 2px;
5384
}
5385

    
5386
.create-vm .flavor-options span.title {
5387
    color: #444;
5388
}
5389

    
5390
.create-vm .flavor-options span.desc {
5391
    display: block;
5392
    color: #aaa;
5393
    font-weight: normal;
5394
    font-size: 0.8em;
5395
    float: right;
5396
    margin-top: 4px;
5397
}
5398

    
5399
.create-vm .flavor-options .selected .value {
5400
    color: #FFF;
5401
}
5402

    
5403
.create-vm .flavor-options .value {
5404
    font-weight: bold;
5405
    color: #5CA1C0;
5406
}
5407

    
5408
.create-vm .flavor-options-cont h4 {
5409
    border-bottom: 1px solid #A1C8DB;
5410
    padding-bottom: 5px;
5411
}
5412

    
5413
.create-vm .images-info-cont {
5414
    width: 28%;
5415
    padding-left: 3%;
5416
    float: left;
5417
    border-left: 1px solid #A1C8DB;
5418
}
5419

    
5420
.create-vm .images-info-cont h4, .create-vm .vm-confirm .param h4{
5421
    color: #FF9955;
5422
    margin-bottom: 1em;
5423
    font-size: 1.2em;
5424
}
5425

    
5426
.create-vm .images-info-cont span.title {
5427
    color: #4085A5;
5428
    display: block;
5429
    margin-bottom: 2px;
5430
    font-size: 0.8em;
5431
}
5432

    
5433
.create-vm .type-filter li {
5434
    font-size: 0.8em;
5435
    font-weight: bold;
5436
    padding: 4px;
5437
    margin-bottom: 0px;
5438
    
5439
}
5440

    
5441
.create-vm .images-list .image-details:hover {
5442
    background-color: #eee;
5443
}
5444

    
5445
.create-vm .images-list .image-details.selected:hover {
5446
    background-color: #5CA1C0;
5447
}
5448

    
5449
.create-vm .images-list .image-details.selected {
5450
    /*font-weight: bold;*/
5451
}
5452

    
5453
.create-vm .images-list .image-details {
5454
    padding: 6px;
5455
    margin-bottom:1px;
5456
    position: relative;
5457
}
5458

    
5459
.create-vm .images-list .image-details img {
5460
    vertical-align: middle;
5461
    margin-right: 10px;
5462
}
5463

    
5464
.create-vm .images-info-cont .image-detail:last-child p {
5465
    border-bottom: none;
5466
}
5467

    
5468
.create-vm .images-info-cont h4 img {
5469
    vertical-align: middle;
5470
    margin-right: 7px;
5471
    margin-bottom: 5px;
5472
}
5473

    
5474
.create-vm .images-info-cont .description p {
5475
    font-size: 0.8em;
5476
}
5477

    
5478
.create-vm .images-info-cont p {
5479
    margin-bottom: 7px;
5480
    font-size: 0.9em;
5481
    border-bottom: 1px solid #A1C8DB;
5482
    padding-bottom: 7px;
5483
}
5484

    
5485
.create-vm .step-header {
5486
    padding-bottom:0;
5487
    position: relative;
5488
}
5489

    
5490
.create-vm .step-header .header-step .info span.subtitle {
5491
    font-size: 1.2em;
5492
    color: #fff;
5493
    font-weight: bold;
5494
}
5495

    
5496
.create-vm .step-header .header-step .info span {
5497
    float: none;
5498
    text-align: right;
5499
}
5500

    
5501
.create-vm .step-header .header-step .info {
5502
    position: absolute;
5503
    right: 15px;
5504
    top: 20px;
5505
    font-size: 0.8em;
5506
}
5507

    
5508
.create-vm .step-header .header-step span {
5509
    float: left;
5510
    display: block;
5511
}
5512

    
5513
.create-vm .steps-container {
5514
    width: 2000em;
5515
}
5516

    
5517
.create-vm .step-header .header-step .title {
5518
    margin-top: 20px;
5519
    font-size: 1em;
5520
    margin-left: 10px;
5521
}
5522

    
5523
#createvm-overlay-content {
5524
    width: 584px;
5525
    overflow: hidden;
5526
}
5527

    
5528
.create-vm .steps-history .steps-history-cont.current .title {
5529
    display: block;
5530
    top: 23px;
5531
    left: 39px;
5532
    font-size: 1.2em;
5533
    color: #ffffff;
5534
    font-weight: bold;
5535
    font-family: 'Ubuntu', sans-serif !important;
5536
}
5537

    
5538
.create-vm .steps-history .steps-history-cont.current .subnum {
5539
    display: none;
5540
    float: none;
5541
    font-size: 0.9em;
5542
    font-family: 'Ubuntu', sans-serif  !important;
5543
}
5544

    
5545
.create-vm .steps-history .steps-history-cont.current .subtitle,
5546
.create-vm .steps-history .steps-history-cont.current .description {
5547
    font-family: 'Ubuntu', sans-serif  !important;
5548
}
5549

    
5550
.create-vm .steps-history .steps-history-cont.current .info {
5551
    display: block;
5552
    font-family: 'Ubuntu', sans-serif !important;
5553
}
5554

    
5555
.create-vm .steps-history .steps-history-cont.completed .title,
5556
.create-vm .steps-history .steps-history-cont.completed .num {
5557
    color: #A1C8DB;
5558
}
5559

    
5560
.create-vm .steps-history .steps-history-cont.completed {
5561
    background-color: #4085A5;
5562
    color: #fff;
5563
    cursor: pointer;
5564
}
5565

    
5566
.create-vm .steps-history .steps-history-cont.completed .steps-history-step {
5567
    background-image: url("../images/check.png");
5568
}
5569

    
5570
.create-vm .steps-history .steps-history-cont.current .steps-history-step {
5571
    width: 380px;
5572
}
5573

    
5574
.create-vm .steps-history .steps-history-cont.current .num {
5575
    color: #fff;
5576
}
5577

    
5578
.create-vm .steps-history .steps-history-cont.current .info {
5579
    color: #4085A5;
5580
    font-size: 0.8em;
5581
}
5582

    
5583
.create-vm .steps-history .steps-history-cont.current {
5584
    background-color: #A1C8DB;
5585
    color: #fff;
5586
    width: 462px;
5587
}
5588

    
5589
.create-vm .steps-history-step {
5590
    padding: 4px;
5591
    padding-left: 10px;
5592
    font-size: 1em;
5593
    font-family: 'Ubuntu', sans-serif  !important;
5594
    margin-right: 5px;
5595
    padding-top: 12px;
5596
    background-position: right 30px;
5597
    background-image: none;
5598
    background-repeat: no-repeat;
5599
}
5600

    
5601
.create-vm .steps-history {
5602
    background-color: #4085A5;
5603
}
5604

    
5605
.create-vm .steps-history .steps-history-cont.last {
5606
    border-right: none;
5607
}
5608

    
5609
.create-vm .steps-history .steps-history-cont .num {
5610
    margin-left: 5px;
5611
    margin-top: -10px;
5612
    padding-bottom: 10px;
5613
}
5614

    
5615
.create-vm .steps-history .steps-history-cont .title {
5616
    display: none;
5617
    position: absolute;
5618
    bottom: 0px;
5619
    text-align: center;
5620
    padding-bottom: 2px;
5621
    left:0;
5622
    width: 60px;
5623
    margin-left:0;
5624
    margin-top:0;
5625
    font-size: 0.8em;
5626
}
5627

    
5628
.create-vm .steps-history .steps-history-cont .subnum,
5629
.create-vm .steps-history .steps-history-cont .info {
5630
    display: none;
5631
}
5632

    
5633
.create-vm .steps-history .steps-history-cont {
5634
    height: 70px;
5635
    width: 60px;
5636
    float: left;
5637
    color: #fff;
5638
    border-right: 1px solid #A1C8DB;
5639
    color: #A1C8DB;
5640
    background-color: #4085A5;
5641
    background-position: center right;
5642
    background-image: none;
5643
    background-repeat: no-repeat;
5644

    
5645
    -webkit-transition: background-color .15s ease-in;
5646
    -o-transition: background-color .15s ease-in;
5647
    -moz-transition: background-color .15s ease-in;
5648
    transition: background-color .15s ease-in;
5649

    
5650
    border-bottom: 1px solid #aaa;
5651
}
5652

    
5653
.create-vm .step-header .header-step .num {
5654
    color: #225871;
5655
    font-size: 4em;
5656
    margin-bottom: -5px;
5657
    font-family: 'Ubuntu', sans-serif;
5658
    font-weight: normal !important;
5659
}
5660

    
5661
.create-vm .step-header .header-step {
5662
    color: #;
5663
    margin-bottom: -6px;
5664
    width: 25%;
5665
    padding-left: 0%;
5666
    display: block;
5667
    float: left;
5668
}
5669

    
5670
.create-vm .step-header .header-step.current {
5671
    color: #387693;
5672
}
5673

    
5674
.create-vm .image-filters-title {
5675
    margin-top: 1em;
5676
    margin-bottom: 0.5em;
5677
}
5678

    
5679
.create-vm .create-step-cont span.clear {
5680
    font-size: 0.8em;
5681
    font-weight: bold;
5682
    color: #A1C8DB;
5683
    display: block;
5684
}
5685

    
5686
.create-vm .category-filters li {
5687
    float:left;
5688
    display: block;
5689
    padding: 4px;
5690
    background-color: #eee;
5691
    margin-right: 5px;
5692
    font-size: 0.9em;
5693
    margin-bottom: 5px;
5694
}
5695

    
5696
.create-vm .content-cont {
5697
    height: 340px;
5698
    overflow: auto;
5699
}
5700

    
5701
.confirm-cont {
5702
    height: 250px;
5703
}
5704

    
5705
.create-vm .vm-confirm .rename input.rename-field {
5706
    font-size: 1.4em;
5707
    padding: 5px;
5708
    width: 93%;
5709
    padding-left: 30px;
5710
    background-position: 7px center;
5711
    background-repeat: no-repeat;
5712
}
5713

    
5714
.create-vm .vm-confirm .rename label {
5715
    display: block;
5716
}
5717

    
5718
.create-vm .vm-confirm .confirm-conts {
5719
    margin-top: 20px;
5720
}
5721

    
5722
.create-vm .vm-confirm .confirm-cont {
5723
    width: 30%;
5724
    margin-right: 2%;
5725
    border-right: 1px solid #A1C8DB;
5726
    float: left;
5727
}
5728

    
5729
.create-vm .vm-confirm .confirm-cont ul li .value {
5730
    float: right;
5731
    padding-top: 2px;
5732
    display: block;
5733
    width: 90px;
5734
    text-align: right;
5735
}
5736

    
5737
.create-vm .vm-confirm .confirm-cont ul li.image-description .value,
5738
.create-vm .vm-confirm .confirm-cont ul li.image-name .value {
5739
    float: none;
5740
    width: auto;
5741
    text-align:left;
5742
    width: auto;
5743
}
5744

    
5745
.create-vm .vm-confirm .confirm-cont ul li {
5746
    padding:0;
5747
    margin:0;
5748
    margin-bottom: 5px;
5749
    border-bottom: 1px solid #EEE;
5750
    padding-bottom: 7px;
5751
    margin-right: 10px;
5752
}
5753

    
5754
.create-vm .vm-confirm .confirm-cont.meta h4 {
5755
    margin-right: 0;
5756
}
5757

    
5758
.create-vm .vm-confirm .confirm-cont.meta {
5759
    margin-right:0;
5760
    border-right: none;
5761
    width: 195px;
5762
}
5763

    
5764
.create-vm .confirm-cont > h4 {
5765
    font-size: 1.2em;
5766
    margin-right: 10px;
5767
    border-bottom: 1px solid #A1C8DB;
5768
    padding-bottom: 5px;
5769
    color: #387693;
5770
}
5771

    
5772
.create-vm .confirm-cont .param.image-name {
5773
    margin-bottom: 0 !important;
5774
    border-bottom: none !important;
5775
}
5776

    
5777
.create-vm .confirm-cont .param h4 {
5778
    margin-bottom: 0px !important;
5779
    font-size: 1.1em !important; 
5780
}
5781

    
5782
.create-vm .confirm-cont .param {
5783
    margin-bottom: 7px !important;
5784
}
5785

    
5786
.create-vm .confirm-cont .value {
5787
    font-weight: bold;
5788
}
5789

    
5790
.create-vm .confirm-cont .param .value {
5791
    font-size: 0.9em;
5792
}
5793

    
5794
.create-vm .confirm-cont .param .title {
5795
    color: #387693;
5796
}
5797

    
5798
.create-vm .confirm-cont .image-description {
5799
    margin-left:0;
5800
}
5801

    
5802
.create-vm .confirm-cont .image-description .value {
5803
    font-weight: normal;
5804
    margin-left: 0 !important;
5805
}
5806

    
5807
.create-vm .confirm-cont .image-description .title {
5808
    display: none;
5809
    font-size: 0.8em;
5810
}
5811

    
5812
.create-vm .confirm-cont.meta .values span {
5813
    display:block;
5814
    float: left;
5815
    margin-right: 4px;
5816
    border: 1px solid #eee;
5817
    padding:3px;
5818
    margin-bottom: 4px;
5819
    font-size: 0.9em;
5820
}
5821

    
5822
.create-vm .confirm-cont.meta .key {
5823
    font-weight: bold;
5824
    font-size: 0.9em;
5825
    display: block;
5826
    margin-bottom: 5px;
5827
}
5828

    
5829
.create-vm .meta input {
5830
    font-size: 0.8em;
5831
}
5832

    
5833
.vm-connect .connect-cont {
5834
    margin-bottom: 20px;
5835
    border-bottom: 1px solid #A1C8DB;
5836
    padding-bottom: 20px;
5837
}
5838

    
5839
.vm-connect .connection-info {
5840
    padding-bottom: 0px;
5841
    margin-bottom: 0;
5842
    border-bottom: none;
5843
}
5844

    
5845
.vm-connect .connection-info .connect a {
5846
    color: #fff;
5847
}
5848

    
5849
.vm-connect .connection-info .connect {
5850
    background-color: #387693;
5851
    color: #fff;
5852
    padding: 10px;
5853
    font-size: 1.2em;
5854
    text-align: center;
5855
}
5856

    
5857
.clip-copy {
5858
    display: block;
5859
    width: 20px;
5860
    height: 20px;
5861
    position: absolute;
5862
    border: 1px solid #387693;
5863
    background-image: url("../images/clipboard.png");
5864
    background-repeat: no-repeat;
5865
    background-position: center;
5866
    cursor: pointer;
5867
    background-color: #A1C8DB;
5868
}
5869

    
5870
.password-cont .clip-copy { right: 10px; top: 8px;}