Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ 1325fc64

History | View | Annotate | Download (102.3 kB)

1
html, body, div, span, applet, object, iframe,
2
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3
a, abbr, acronym, address, big, cite, code,
4
del, dfn, em, font, img, ins, kbd, q, s, samp,
5
small, strike, strong, sub, sup, tt, var,
6
b, u, i, center,
7
dl, dt, dd, ol, ul, li,
8
fieldset, form, label, legend,
9
table, caption, tbody, tfoot, thead, tr, th, td {
10
    margin: 0;
11
    padding: 0;
12
    border: 0;
13
    font-size: 100%;
14
    vertical-align: baseline;
15
    background: transparent;
16
    font-family: Verdana, 'PT Sans', sans-serif;
17
}
18

    
19
body {
20
    background: url(./body-bg.png) repeat-x #FFFFFF;
21
    text-align:center;
22
    font-size: 16px;
23
}
24

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

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

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

    
44
#header {
45
    height: 93px;
46
    background: url("./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 {
66
    height: 80px;
67
    background-color: #4085A5;
68
    width:100%;
69
}
70

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

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

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

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

    
90
ol, ul {
91
    list-style: none;
92
}
93

    
94
blockquote, q {
95
    quotes: none;
96
}
97

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

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

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

    
114
del {
115
    text-decoration: line-through;
116
}
117

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

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

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

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

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

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

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

    
166
ul.css-tabs .secondary {
167
    position:relative;
168
}
169

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

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

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

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

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

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

    
211
.css-panes > div.pane {
212
    display:none;
213
}
214

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

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

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

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

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

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

    
269
#machines-pane-top.empty {
270
    background: transparent;
271
}
272

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

    
278
.create-container {
279
    line-height: 4em;
280
}
281

    
282
#createcontainer a {
283
}
284

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

    
293
#create:hover {
294
    background-color: #FF9955;
295
}
296

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

    
303
.header-logo {
304
    padding-top: 28px;
305
}
306

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

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

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

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

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

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

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

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

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

    
379
#networks-wizard h2 {
380
    margin-top: 15px;
381
}
382

    
383
#wizard li {
384
    margin-bottom:1.2em;
385
}
386

    
387
#wizard .pane li {
388
    margin: 0;
389
}
390

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

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

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

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

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

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

    
431
#wizard .double .text {
432
    width:93%;
433
}
434

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

    
440
#wizard .right {
441
    float:right;
442
}
443

    
444
#wizard .error {
445
    border:1px solid red;
446
}
447

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

    
452
.selecteddiv {
453
    background-color: #C5DEE9 !important;
454
}
455

    
456
#wizard label a:hover strong {
457
    color: black;
458
}
459

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

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

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

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

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

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

    
494
#wizard .headernumber {
495
    font-size: 410%;
496
}
497

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

    
506
#wizard .first {
507
    left: -10px;
508
}
509

    
510
#wizard .checked {
511
    color: #64a6c4 !important;
512
}
513

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

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

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

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

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

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

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

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

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

    
564
:focus {
565
    outline: none;
566
    -moz-outline-style: none;
567
}
568

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

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

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

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

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

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

    
601
.page ul {
602
    height: 270px;
603
    overflow: auto;
604
}
605

    
606
.panes ul.pane {
607
    height: 220px;
608
}
609

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

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

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

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

    
635
#status li.active .headernumber {
636
    color: #FFFFFF;
637
}
638

    
639
#status li.active .headerbody {
640
    color: #FFFFFF;
641
}
642

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

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

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

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

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

    
681
.units {
682
    padding-left:10px;
683
}
684

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

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

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

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

    
720
.selectedrange {
721
    border-color: #5599FF;
722
}
723

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

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

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

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

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

    
755
.icon .machine-container .subtitle {
756
    
757
}
758

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

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

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

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

    
781
.icon .machine-info {
782
    padding: 10px 0;
783
}
784

    
785
.icon .machine-details .name {
786
    height: 24px;
787
}
788

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

    
794
.icon .machine-details {
795
    width: 310px;
796
    float: left;
797
    margin-top: -5px;
798
}
799

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

    
809
.vm-actions {
810
    position: relative;
811
}
812

    
813
.icon .vm-actions {
814
    /*display: none;*/
815
}
816

    
817
.icon .vm-actions, .network .vm-actions {
818
    width: 180px;
819
    height: 76px;
820
    float: left;
821
}
822

    
823
.network .vm-actions {
824
    width: 185px;
825
}
826

    
827
.icon .machine-container:hover .machine-data {
828
    background-color:#A1C8DB !important;
829
}
830

    
831
.icon .machine-container:hover .vm-actions {
832
    display: block;
833
}
834

    
835
.vm-actions {
836
    font-size: 75%;
837
}
838

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

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

    
855
.vm-actions a.selected {
856
    color: #FF7F2A !important;
857
}
858

    
859
.vm-actions a.selected {
860
    background-color:transparent;
861
}
862

    
863
.vm-actions .action-container {
864
    position: relative;
865
}
866

    
867
.vm-actions .action-container .confirm_single {
868
    position: absolute;
869
    right: -20px;
870
    top: -2px;
871
}
872

    
873
div.list div.actions a.enabled.destroy {
874
}
875

    
876
.vm-actions .action-container.destroy {
877
    position: absolute;
878
    bottom: -1px;
879
    width: 100%;
880
    left: 0px;
881
    background: transparent;
882
}
883

    
884
.vm-actions .action-container.destroy a {
885
}
886

    
887
.icon .light-background .machine-data, div.network.light-background, div.network.expand {
888
    background-color:#aed2e3 !important;
889
}
890

    
891
.single .light-background {
892
    background-color:#aed2e3;
893
}
894

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

    
906
.machine a {
907
    font-weight: normal;
908
    text-decoration: none;
909
}
910

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

    
917
.machine span.name {
918
    font-weight: bold;
919
}
920

    
921
.oldValue {
922
    display:none;
923
}
924

    
925
.state {
926
}
927

    
928
.state div {
929
    text-align: right;
930
    margin-right: 3px;
931
}
932

    
933
/* icon view actions */
934
div.machine div.actions a.shutdown-padding {
935
    margin-bottom: 22px;
936
}
937

    
938
div.actions a.enabled:hover{
939
    color: black !important;
940
    text-decoration: underline;
941
    display: block;
942
}
943

    
944
div.machine:hover .actions a {
945
    visibility: visible;
946
}
947

    
948
div.machine div.display a{
949
    visibility: visible;
950
}
951

    
952
div.machine div.actions .disabled {
953
    display: none;
954
}
955

    
956
div.single-container div.vm-actions .disabled {
957
    display: none;
958
}
959

    
960
div.machine div.actions .disabled {
961
    display: none;
962
}
963

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

    
972
.machine div.connect-arrow {
973
    display: none;
974
    left: -3px;
975
    position: absolute;
976
    top: 9px;
977
}
978

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

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

    
996
div.connect-border:hover {
997
    cursor: pointer;
998
}
999

    
1000
.machine div.connect-border {
1001
    display: none;
1002
    left: -15px;
1003
    position: absolute;
1004
    top: 9px;
1005
}
1006

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

    
1019
.standard .machine .single-image-state1 {
1020
    background-position: 0px 0;
1021
}
1022

    
1023
.standard .machine .single-image-state3 {
1024
    background-position: -100px 0;
1025
}
1026

    
1027
.standard .machine .single-image-state4 {
1028
    background-position: -150px 0;
1029
}
1030

    
1031
.standard .machine .single-image-state2 {
1032
    background-position: -50px 0;
1033
}
1034

    
1035
.standard .running .machine .logo {
1036
   cursor: pointer;
1037
}
1038

    
1039
.list .machine img {
1040
    margin: 0;
1041
}
1042

    
1043
.icon div.ip, .icon div.ips {
1044
    font-size: 75%;
1045
}
1046

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

    
1062
.view-separator {
1063
    color:#5F8DD3;
1064
}
1065

    
1066
.running.disabled {
1067
    background: transparent;
1068
}
1069

    
1070
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
1071
    background-color: #63cf1c;
1072
}
1073

    
1074
.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
1075
    background-color: #d4aa00;
1076
}
1077

    
1078
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
1079
    background-color: #ff0000;
1080
}
1081

    
1082
.terminated-state .indicator1, .terminated-state .indicator2, .terminated-state .indicator3, .terminated-state .indicator4 {
1083
    background-color: #5e1616;
1084
}
1085

    
1086
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
1087
    background-color: #FF7F2A;
1088
}
1089

    
1090
.destroying-state .indicator1, .destroying-state .indicator3, .destroying-state .indicator2, .destroying-state .indicator4 {
1091
    background-color: #4085a5 !important;
1092
}
1093

    
1094
.shutting-state .indicator1, .shutting-state .indicator3, .shutting-state .indicator2, .shutting-state .indicator4 {
1095
    background-color: #940606;
1096
}
1097

    
1098
.starting-state .indicator1, .starting-state .indicator2, .starting-state .indicator3, .starting-state .indicator4 {
1099
    background-color: #9ed976;
1100
}
1101

    
1102
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
1103
    background-color: #63cf1c;
1104
}
1105

    
1106
.network-indicator.in-progress .indicator1, .network-indicator.in-progress .indicator2, .network-indicator.in-progress .indicator3, .network-indicator.in-progress .indicator4 {
1107
    background-color: #FF7F2A;
1108
}
1109

    
1110
.running, .terminated {
1111
    background: #EFF7FA repeat scroll 0 0;
1112
    padding-bottom: 15px;
1113
}
1114

    
1115
.running, #machinesview-list, .single {
1116
}
1117

    
1118
.terminated {
1119
    background:#DCE5E8  repeat scroll 0 0;
1120
    padding-top: 15px;
1121
    margin-top: 15px;
1122
}
1123

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

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

    
1142
.machine div.info {
1143
    font-size: 75%;
1144
}
1145

    
1146
div.machine:hover div.info-header, div.machine:hover div.toggler div.down {
1147
    background-color: #84b7d0;
1148
}
1149

    
1150
div.machine div.info-label.darker, .single div.tags-label.darker, div.network .darker {
1151
    background-color: #5CA1C0;
1152
}
1153

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

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

    
1168
div.network div.toggler {
1169
    margin-left: 90px;
1170
}
1171

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

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

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

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

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

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

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

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

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

    
1213
button.next {
1214
    background-color: #4085A5;
1215
    border-color: #4085A5;
1216
    text-align: right;
1217
}
1218

    
1219
button.next:hover {
1220
    background-color: #7DB4CD;
1221
    border-color: #7DB4CD;
1222
}
1223

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

    
1231
button.prev:hover {
1232
    background-color: #7DB4CD;
1233
    border-color: #7DB4CD;
1234
}
1235

    
1236
.image-logo {
1237
    float: left;
1238
    margin-right: 1em;
1239
    margin-left: 1.5em;
1240
    margin-top: 4px;
1241
}
1242

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

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

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

    
1270
a.machines_view_link span {
1271
    float: left;
1272
}
1273

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

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

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

    
1297
div#view-select a {
1298
    display: block;
1299
    float: left;
1300
}
1301

    
1302
a#list:hover {
1303
    background: #5f8dd3;
1304
}
1305

    
1306
a#machines_view_icon_link:active, a#machines_view_list_link:active {
1307
    color:white;
1308
}
1309

    
1310
a#machines_view_icon_link span.ico {
1311
    background-image: url(./icon-view.png);
1312
}
1313

    
1314
a#machines_view_list_link span.ico {
1315
    background-image: url(./list-view.png);
1316
}
1317

    
1318
a#machines_view_single_link span.ico {
1319
    background-image: url(./single-view.png);
1320
}
1321

    
1322
#machinetype {
1323
    background-color: #CDE2EC;
1324
    height: 25px;
1325
    margin-bottom: 0px !important;
1326
}
1327

    
1328
div.machine-type {
1329
    float: left;
1330
    margin: 4px 18px 20px;
1331
}
1332

    
1333
.machine-type .active {
1334
    color: #FFFFFF
1335
}
1336

    
1337
div.machine-type label.disabled {
1338
    color: #aaa !important;
1339
}
1340

    
1341
#machinesview {
1342
}
1343

    
1344
#machines-pane {
1345
}
1346

    
1347
.list#machinesview {
1348
    margin-left: -20px;
1349
    display:none;
1350
}
1351

    
1352
#machinesview-list.list {
1353
    background: #EFF7FA  repeat scroll 0 0;
1354
    padding-left: 15px;
1355
    padding-bottom: 15px;
1356
}
1357

    
1358
#machinesview_content {
1359
    display:none;
1360
}
1361

    
1362
.list-machines {
1363
    min-width: 515px;
1364
}
1365

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

    
1375
#welcomeheader {
1376
    color:white;
1377
    text-align: center;
1378
}
1379

    
1380
.welcomebody {
1381
    color: white;
1382
    font-size:80%;
1383
}
1384

    
1385
.welcomebody a {
1386
    color: white;
1387
}
1388

    
1389
.welcomefooter {
1390
    color: white;
1391
    font-size:60%;
1392
}
1393

    
1394
.welcomefooter a {
1395
    color: white;
1396
}
1397

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

    
1408
.emptycreate {
1409
    margin: 20px 10px 5px 0 !important;
1410
}
1411

    
1412
#createbody {
1413
    display:none;
1414
    font-size: 80%;
1415
}
1416

    
1417
div.list label img {
1418
    margin: 5px 5px -3px 0;
1419
}
1420

    
1421
div.list label {
1422
    color: #3D3D3D;
1423
    font-size: 75%;
1424
}
1425

    
1426
div.list .state {
1427
    margin-top: 7px;
1428
    margin-right: 10px;
1429
}
1430

    
1431
div.list table tbody {
1432
    margin-top: 8px;
1433
}
1434

    
1435
div.list table tr.checked td {
1436
    background-color: #A1C8DB !important;
1437
}
1438

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

    
1446
div.list table td.name {
1447
    min-width: 170px;
1448
}
1449

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

    
1457
div.list table td.flavor {
1458
    font-size: 0.8em;
1459
}
1460

    
1461
div.list table td {
1462
    border-bottom: 1px solid #DDD;
1463
}
1464

    
1465
div.list table tr.error td.status {
1466
    color: #800000 !important;
1467
    font-weight: bold;
1468
}
1469

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

    
1474
div.list table tr.inactive td {
1475
    background-color: #DCE5E8;
1476
}
1477

    
1478
div.list .stopped {
1479
    margin-top: 8px;
1480
}
1481

    
1482
/* root element for tabs  */
1483
#wizard ul.tabs {
1484
    margin-right: -1px;
1485
    float: right;
1486
}
1487

    
1488
#wizard div.panes {
1489
    height: 247px;
1490
    clear:both;
1491
    margin-top: 3px;
1492
}
1493

    
1494
.typebody {
1495
    font-size: 80%;
1496
    font-weight: normal;
1497
    position: relative;
1498
    top: -3px;
1499
}
1500

    
1501
.typehover {
1502
    color: #FFFFFF;
1503
}
1504

    
1505
#label-name {
1506
    margin-top: 10px;
1507
}
1508

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

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

    
1532
#wizard ul.tabs a:hover {
1533
    color: #FFFFFF;
1534
    background-color:#4085A5;
1535
}
1536

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

    
1544
#wizard #standard-images {
1545
    background-color: #ECF4F8;
1546
}
1547

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

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

    
1566
div.list div.actions a:hover {
1567
    background-color: transparent;
1568
}
1569

    
1570
div.list div.actions a.enabled {
1571
    color: #3D3D3D;
1572
}
1573

    
1574
div.list div.actions a.enabled:hover{
1575
    cursor: pointer;
1576
    color: black;
1577
    text-decoration: underline;
1578
}
1579

    
1580
div.list div.actions a.selected {
1581
    color: #FF7F2A !important;
1582
}
1583

    
1584
input.machine {
1585
    width: 13px;
1586
    height: 13px;
1587
    top: -1px;
1588
    overflow: hidden;
1589
}
1590

    
1591
.description-container {
1592
    display: inline-block;
1593
    position: relative;
1594
    width: 300px;
1595
}
1596

    
1597
#wizard .button-container {
1598
    height: 20px;
1599
}
1600

    
1601

    
1602
/* metadata dropdown combo */
1603
.meta-key {
1604
    margin-right: 18px;
1605
    float:left;
1606
}
1607

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

    
1615
#yes-no p, #yes-no button {
1616
    margin-top: 15px;
1617
}
1618

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

    
1627
#error-success p, .notification-box p {
1628
    margin-top: 5px;
1629
}
1630

    
1631
.error-report {
1632
    display: none;
1633
}
1634

    
1635
#error-success .error-report {
1636
    position: absolute;
1637
    top: 140px;
1638
    right: 40px;
1639
}
1640

    
1641
.error .error-report {
1642
    display: block;
1643
}
1644

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

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

    
1653
#error-success .error-report .sending {
1654
    display: none;
1655
}
1656

    
1657
#error-success .error-report .send-btn {
1658
    color: #4085A5;
1659
    text-decoration: underline;
1660
    cursor: pointer;
1661
}
1662

    
1663
#error-success strong, .notification-box strong {
1664
    color: #F49C1A;
1665
}
1666

    
1667
#error-success .close, .notification-box .close {
1668
    background-image: url("./close-popup.png");
1669
    background-repeat: no-repeat;
1670
    cursor: pointer;
1671
    height: 13px;
1672
    position: absolute;
1673
    right: 7px;
1674
    top: 9px;
1675
    width: 13px;
1676
}
1677

    
1678
.popup-header-error {
1679
    background-color: #800000 !important;
1680
}
1681

    
1682
.popup-border-error {
1683
    border-color: #800000 !important;
1684
    width:auto;
1685
}
1686

    
1687
.popup-details-error {
1688
    border: none !important;
1689
}
1690

    
1691
.popup-separator-error {
1692
    margin-bottom: 5px !important;
1693
}
1694

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

    
1710

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

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

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

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

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

    
1756
#error-success.success .machine-now-building {
1757
    padding-bottom: 14px !important;
1758
}
1759

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

    
1767
#error-success .password-header, .notification-box .password-header {
1768
    margin-bottom: 5px;
1769
}
1770

    
1771
#error-success .password, .notification-box .password {
1772
    color: #447821;
1773
}
1774

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

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

    
1789
#error-success.success .popup-separator, .notification-box .popup-seperator {
1790
    margin-bottom: 14px !important;
1791
}
1792

    
1793
#error-success .write-password, .notification-box .write-password {
1794
    margin-bottom: 5px;
1795
    padding-left: 30px;
1796
}
1797

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

    
1806
#error-success .write-password-details, .notification-box .write-password-details {
1807
    font-size: 75%;
1808
}
1809

    
1810
.more-details {
1811
    display: block;
1812
}
1813

    
1814
.notification-box h3 span.header-box {
1815
    background: transparent;
1816
}
1817

    
1818
.notification-box .machine-now-building {
1819
    padding: 20px 0;
1820
}
1821

    
1822
.notification-box .header-box {
1823
    width: auto !important;
1824
}
1825

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

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

    
1843
.popup-details a:link, .popup-details a:visited {
1844
    color: black;
1845
}
1846

    
1847
.destroy .confirm_single .yes {
1848
    background-color: #880000;
1849
    color: #fff;
1850
}
1851

    
1852
.destroy .confirm_single .no {
1853
    background-color: #CC0000;
1854
    color: #880000;
1855
}
1856

    
1857
.destroy .confirm_single .yes:hover {
1858
    background-color:#CC0000;
1859
}
1860

    
1861
div.list div.actions a.selected#action-destroy {
1862
    color: #880000 !important;
1863
}
1864

    
1865
.vm-actions .destroy a#action-destroy.selected {
1866
    color: #880000 !important;
1867
}
1868

    
1869
/* Confirmation boxes */
1870
div.confirm_single, div.confirm_multiple, div.action_error {
1871
    display: none;
1872
    color: black;
1873
}
1874

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

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

    
1892
div.confirm_single button.yes {
1893
    width: 90px;
1894
    background-color:#FF7F2A;
1895
}
1896

    
1897
div.confirm_single button.yes:hover {
1898
    background-color: #FF9955;
1899
}
1900

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

    
1908
div.confirm_single button.no:hover {
1909
    color: white;
1910
}
1911

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

    
1922
div.confirm_reboot_required {
1923
}
1924

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

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

    
1940
#networks-pane {
1941
    display: none;
1942
}
1943

    
1944
#networks-pane div.confirm_multiple p {
1945
    margin: 7px 0 0 100px;
1946
}
1947

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

    
1955
div.confirm_multiple button.yes {
1956
    border-color: #FF7F2A;
1957
    padding: 0 12px;
1958
}
1959

    
1960
div.confirm_multiple button.yes:hover {
1961
    background-color: #FF7F2A;
1962
}
1963

    
1964
div.confirm_multiple button.no {
1965
    padding: 0px 16px;
1966
}
1967

    
1968
div.confirm_multiple button.no:hover {
1969
    background-color: #5CA1C0;
1970
}
1971

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

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

    
1993
div.action_error .action-error-msg {
1994
    font-size: 0.8em;
1995
}
1996

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

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

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

    
2026
div.action_error button.details:hover {
2027
    background-color: #FF7F2A;
2028
}
2029

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

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

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

    
2053
div#user a.current_lang {
2054
    color: #72ADC8;
2055
}
2056

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

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

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

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

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

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

    
2096
div#user .useractions {
2097
    display: none;
2098
}
2099

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
2236

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

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

    
2245
.icon .nametextbox {
2246
    width: 255px;
2247
}
2248

    
2249
.nametextbox, .network-rename-input {
2250
    position: relative;
2251
    top: -3px;
2252
    font-size: 65%;
2253
    width: 240px;
2254
    border: 1px solid #aaaaaa;
2255
    padding: 2px;
2256
}
2257

    
2258
.large-spinner {
2259
    background: url("./icons/indicators/large/progress.gif");
2260
    margin-left: 298px;
2261
    margin-top: 0px;
2262
    height: 31px;
2263
    width: 49px;
2264
    position: absolute;
2265
    top: 200px;
2266
}
2267

    
2268
#machinesview-icon .large-spinner {
2269
    top: 170px;
2270
}
2271

    
2272
.list .large-spinner {
2273
    margin-top:-30px;
2274
}
2275

    
2276
.single .large-spinner {
2277
    margin-top: 50px;
2278
}
2279

    
2280
div#networks-container {
2281
    display: none;
2282
}
2283

    
2284
div#networks-container .large-spinner {
2285
    margin-top: 50px;
2286
}
2287

    
2288
/* tables in list view */
2289
div.list div.dataTables_filter {
2290
    font-size: 75%;
2291
    margin-bottom: 12px;
2292
}
2293

    
2294
div.list div.dataTables_filter input{
2295
    font-size: 100%;
2296
}
2297

    
2298
.dataTables_wrapper {
2299
    width: 515px;
2300
    padding-bottom: 40px;
2301
}
2302

    
2303
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2304
    padding-right: 15px !important;
2305
}
2306

    
2307
div.list table {
2308
    width: 515px;
2309
    font-size: 75%;
2310
}
2311

    
2312
div.list table tbody td {
2313
    color: #3D3D3D;
2314
    padding:6px;
2315
    vertical-align: middle;
2316
    height: 20px;
2317
}
2318

    
2319
div.list table thead tr {
2320
    border-bottom: 1px solid #aaa;
2321
}
2322
div.list table thead tr th {
2323
    background-color: #CDE2EC;
2324
    background-image: url(bg.gif);
2325
    background-repeat: no-repeat;
2326
    background-position: right 11px;
2327
    font-weight: normal;
2328
    border: 1px solid transparent;
2329
    border-bottom: none;
2330
    padding: 4px;
2331
    text-align: left;
2332
    vertical-align: middle;
2333
    cursor: pointer;
2334
}
2335

    
2336
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2337
    background-color: #5CA1C0;
2338
}
2339

    
2340
div.list table thead .sorting_asc {
2341
    background-image: url(asc.gif);
2342
}
2343

    
2344
div.list table thead .sorting_desc {
2345
    background-image: url(desc.gif);
2346
}
2347

    
2348
div.list table .selection div.expand-icon {
2349
    background-image: url(asc.gif);
2350
    background-repeat: no-repeat;
2351
    position: relative;
2352
    cursor: pointer;
2353
    width: 15px;
2354
    height: 4px;
2355
    left: 19px;
2356
    top: -11px;
2357
}
2358

    
2359
ul.dropdown-selector {
2360
    background-color: #E6EEEE;
2361
    position: absolute;
2362
    margin-left: 1px;
2363
    display: block;
2364
    top: 255px;
2365
    font-size:75%;
2366
    width:40px;
2367
}
2368

    
2369
ul.dropdown-selector li {
2370
    padding: 4px;
2371
}
2372

    
2373
ul.dropdown-selector li:hover {
2374
    background-color: #5CA1C0;
2375
}
2376

    
2377
ul.dropdown-selector li a{
2378
    color: black;
2379
    text-decoration: none;
2380
}
2381

    
2382
div.list table span.imagetag {
2383
    display: none;
2384
}
2385

    
2386
div.list table thead .vmos {
2387
    width: 20px !important;
2388
    vertical-align:middle;
2389
}
2390

    
2391
div.list table .selection {
2392
    width: 20px !important;
2393
    text-align: left;
2394
    background-image: none;
2395
    padding-left: 6px;
2396
}
2397

    
2398
div.list table thead .vmflavor {
2399
    width: 100px !important;
2400
}
2401

    
2402
/* group column commented out for v0.5
2403
div.list table thead .vmgroup {
2404
    width: 40px !important;
2405
}
2406
*/
2407

    
2408
div.list table thead .vmstatus {
2409
    width: 50px !important;
2410
}
2411

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

    
2416
.spinner, .action-indicator {
2417
    clear: right;
2418
    float:right;
2419
    margin: 10px 6px 0 15px;
2420
}
2421

    
2422
.icon .spinner {
2423
    margin: 20px 4px 0 15px !important;
2424
}
2425

    
2426
.single .state .spinner {
2427
    margin: 20px 55px 0 15px !important;
2428
}
2429

    
2430
.action-indicator {
2431
    margin-right: 18px;
2432
}
2433

    
2434
.list span.action-indicator {
2435
    display: block;
2436
    width: 15px;
2437
    height: 20px;
2438
    margin: 0 !important;
2439
    float: none;
2440
}
2441

    
2442
.wave {
2443
    clear: right;
2444
    float:right !important;
2445
    margin: 10px 15px 0 15px !important;
2446
}
2447

    
2448
#networks-pane .spinner {
2449
    margin-top: 18px !important;
2450
}
2451

    
2452
.hidden {
2453
    display:none;
2454
}
2455

    
2456
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2457
    display:block !important;
2458
}
2459

    
2460
.action_error .message, .action_error .code {
2461
    display: none;
2462
}
2463

    
2464
.fixed {
2465
    bottom: 0;
2466
    position: fixed !important;
2467
}
2468

    
2469
/* Networks */
2470
#networks-pane {
2471
    background-color: transparent;
2472
    color: black;
2473
}
2474

    
2475
#networkscreate {
2476
}
2477

    
2478
.createbutton {
2479
    color: black;
2480
    background-color: #FF7F2A;
2481
    cursor: pointer;
2482
    padding: 7px 24px;
2483
    text-decoration: none;
2484
    border-left: 15px solid #FF9955;
2485
    margin-left: -15px;
2486
}
2487

    
2488
#networkscreate:hover {
2489
    background-color: #FF9955;
2490
}
2491

    
2492
#createcontainer {
2493
}
2494

    
2495
#networks-container {
2496
}
2497

    
2498
#networks-pane .public-networks {
2499
    background: #EFF7FA repeat scroll 0 0;
2500
    margin: 0 0 0px;
2501
    padding: 0 0 15px 0px;
2502
}
2503

    
2504
#networks-pane .private-networks .network:last-child {
2505
    border-bottom: none;
2506
}
2507

    
2508
#networks-pane .private-networks {
2509
    background: #EFF7FA repeat scroll 0 0;
2510
    padding: 15px 20px 20px 0px;
2511
    margin-top: 18px;
2512
}
2513

    
2514
.private-networks .network-cont:last-child {
2515
    border-bottom: none;
2516
}
2517

    
2518
.private-networks .network-cont {
2519
    border-bottom: 1px solid #D1E7F0;
2520
    padding-bottom:5px;
2521
    margin-bottom: 5px;
2522
    width: 520px;
2523
}
2524

    
2525
.private-networks .network {
2526
    padding-top: 10px;
2527
    padding-bottom: 10px;
2528
}
2529

    
2530
#public-template, #private-template, #public-machine-template, #private-machine-template {
2531
    display:none;
2532
}
2533

    
2534
div.network a.action-network-add {
2535
    display: none;
2536
}
2537

    
2538
div.network a.action-network-destroy {
2539
    margin-top: 32px !important;
2540
    width: 50px;
2541
    display: none;
2542
}
2543

    
2544
div.network {
2545
    clear: both;
2546
    padding: 5px 20px 5px 20px;
2547
    width: 480px;
2548
    position: relative;
2549
}
2550

    
2551
#private-template {
2552
    margin: 2px 0 0 -30px;
2553
}
2554

    
2555
div.network-placeholder {
2556
    margin-left: 33px;
2557
}
2558

    
2559
div.private-networks div.network-placeholder {
2560
}
2561

    
2562
div.network-cable {
2563
    border-left: 3px solid #FF7F2A;
2564
    float: left;
2565
    margin-left: -40px;
2566
    margin-top: -45px;
2567
    height: 185px;
2568
    overflow: hidden;
2569
}
2570

    
2571
.first div.network-cable {
2572
    height:143px;
2573
    margin-top:-6px;
2574
    position: relative;
2575
}
2576

    
2577
div.network-contents div.machines-list div.first {
2578
    margin-top:0;
2579
}
2580

    
2581
.last div.network-cable {
2582
    height:85px;
2583
}
2584

    
2585
div.firewall-cable {
2586
    border-left: 3px solid #FF7F2A;
2587
    float: left;
2588
    margin-left: -100px;
2589
    margin-top: -20px;
2590
    height: 110px;
2591
}
2592

    
2593
.last div.firewall-cable {
2594
    display:none;
2595
}
2596

    
2597
div.network a:hover {
2598
    text-decoration: underline;
2599
    cursor: pointer;
2600
}
2601

    
2602
#networks-container .name {
2603
    font-size: 75%;
2604
}
2605

    
2606
div.network-machines, div.firewall {
2607
    font-size: 75%;
2608
    margin-left: 70px;
2609
}
2610

    
2611
div.firewall {
2612
    margin-left: 60px;
2613
    margin-bottom: 3px;
2614
    margin-top: -3px;
2615
}
2616

    
2617
div.firewall .firewall-options {
2618
    float: left;
2619
}
2620

    
2621
div.machines-header, div.firewall-header {
2622
    background-color: #A1C8DB;
2623
    color: white;
2624
    cursor: pointer;
2625
    height: 17px;
2626
    width: 103px;
2627
}
2628

    
2629
 div.private-networks div.machines-header {
2630
    margin-top: -5px;
2631
}
2632

    
2633
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2634
    background-color: #84b7d0;
2635
}
2636

    
2637
div.network-machine:hover div.firewall-header {
2638
    background-color: #5CA1C0;
2639
}
2640

    
2641
div.firewall-label.darker {
2642
    background-color: #4085a5;
2643
}
2644

    
2645
.state {
2646
}
2647

    
2648
.network .state {
2649
    font-size: 75%;
2650
    position: absolute;
2651
    right: 10px;
2652
    top: 5px;
2653
}
2654

    
2655
div.network div.actions {
2656
    float: right;
2657
    font-size: 75%;
2658
    font-weight: normal;
2659
    height: 70px;
2660
    width: 100px;
2661
    position: absolute;
2662
    right: -100px;
2663
    top: 0;
2664
}
2665

    
2666
div.network div.machine-actions {
2667
    text-decoration: none;
2668
    float: right;
2669
    margin: -17px -180px 0 0;
2670
    font-weight: normal;
2671
    font-size: 75%;
2672
}
2673

    
2674
div.network div.actions a, div.network div.machine-actions a {
2675
    text-decoration: none;
2676
    height: 15px;
2677
    color: black;
2678
    visibility: hidden;
2679
    display: block;
2680
}
2681

    
2682

    
2683
div.network div.machine-actions a {
2684
    margin: 8px 0 0 8px;
2685
}
2686
div.network div.net-actions a {
2687
    margin: 0 0 8px 8px;
2688
    width: 168px;
2689
}
2690
div.network div.action-container {
2691
    bottom: auto;
2692
}
2693

    
2694
div.network div.net-actions .confirm_single {
2695
    position: absolute;
2696
    left: 96px;
2697
    width: 200px;
2698
    margin: 0 0px -5px 0;
2699
    font-size: 100%;
2700
}
2701

    
2702
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2703
    display: block;
2704
    background-color:#A1C8DB;
2705
    opacity: 0.8;
2706
    filter: alpha(opacity = 80);
2707
}
2708

    
2709
div.network.expand .net-actions a {
2710
    visibility: visible;
2711
}
2712

    
2713
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2714
    visibility: visible;
2715
}
2716

    
2717
div.network div.machine-actions a.action-destroy.selected {
2718
    color: #880000 !important;
2719
}
2720

    
2721
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected {
2722
    background-color: transparent !important;
2723
    visibility: visible!important;
2724
}
2725

    
2726
div.network .net-vm-actions .confirm_single {
2727
    font-size: 100% !important;
2728
    margin-right: -20px !important;
2729
    position: absolute !important;
2730
    top: 7px;
2731
    right:0;
2732
}
2733

    
2734
div.network div.display a {
2735
    visibility: visible;
2736
}
2737

    
2738
div.network-machine div.machine-actions a.action-details {
2739
    margin-top: 7px;
2740
    width: 168px;
2741
}
2742

    
2743
div.network .net-actions {
2744
    margin-right:5px !important;
2745
    margin-top:0px !important;
2746
    height: 80px !important;
2747
}
2748

    
2749
div.network .net-actions .action-container.destroy {
2750
    position: relative;
2751
    bottom: auto;
2752
}
2753

    
2754
div.network:hover {
2755
    background-color: #A1C8DB !important;
2756
}
2757

    
2758
.network-logos {
2759
    float:left;
2760
    padding-right: 10px;
2761
}
2762

    
2763
.network-logos:hover {
2764
    cursor: pointer;
2765
}
2766

    
2767
.state div {
2768
    text-align: right;
2769
    margin: 4px 1px -4px;
2770
}
2771

    
2772
.public-networks .state div {
2773
    margin-top: 4px;
2774
}
2775

    
2776
.private-networks .state div {
2777
    margin-top: 9px;
2778
    margin-bottom: -12px;
2779
}
2780

    
2781
.network .name-div {
2782
    margin-bottom: 15px;
2783
    margin-top: 0px;
2784
}
2785

    
2786
div.indicator {
2787
    clear: none;
2788
    float: right;
2789
    height: 11px;
2790
    margin: 3px -1px;
2791
    width: 10px;
2792
}
2793

    
2794
#private-networks {
2795
    margin-top: 20px;
2796
}
2797

    
2798
.private-networks .editbuttons {
2799
    margin-right: 117px;
2800
    margin-top: 1px;
2801
}
2802

    
2803
.private-networks div.confirm_single {
2804
    margin: 45px -219px -5px 0;
2805
    font-size: 80%;
2806
}
2807

    
2808
.private-networks .network-machine div.confirm_single {
2809
    margin: 0 -199px 0 0;
2810
}
2811

    
2812
.private-networks .state {
2813
}
2814

    
2815
.private-networks div.machines-list {
2816
    padding-top: 3px;
2817
}
2818

    
2819
span.rename-network, span.configure {
2820
    background-repeat: no-repeat;
2821
    color: transparent;
2822
    font-size: 75%;
2823
    font-weight: normal;
2824
    margin-left: 10px;
2825
    padding-left: 10px;
2826
    text-align: left;
2827
}
2828

    
2829
span.rename-network {
2830
    cursor: pointer;
2831
}
2832

    
2833
div.name-div:hover span.rename-network {
2834
    color: #3D3D3D;
2835
    margin-top: 0.4em;
2836
    background-image: url(./pencil.png);
2837
    background-position: 0 3px;
2838
}
2839

    
2840
div.network:hover a.rename {
2841
    color: #3d3d3d;
2842
}
2843

    
2844
.network-separator {
2845
    background-color: #5CA1C0;
2846
    height: 1px;
2847
    margin: 2px 0 0 -5px;
2848
    width: 480px;
2849
    font-size: 1%;
2850
    line-height: 1px;
2851
}
2852

    
2853
.network-contents {
2854
    margin-left: -4px;
2855
    width: 504px;
2856
    clear: both;
2857
    background: url("./orange-border.png") no-repeat;
2858
    background-position: 33px bottom;
2859
}
2860
.network-contents.last-expanded {
2861
    background-position-y: -2600px;
2862
}
2863

    
2864
.network-machine {
2865
    border-bottom: 1px solid #5CA1C0;
2866
}
2867
.network-machine:last-child {
2868
    border-bottom: none;
2869
}
2870

    
2871
.network-machine .state div {
2872
    text-align: left;
2873
}
2874

    
2875
.network-machine {
2876
    margin-left: 35px;
2877
    padding-bottom: 10px;
2878
    padding-left: 5px;
2879
    padding-top: 10px;
2880
    position: relative;
2881
}
2882

    
2883
.network-machine .ips {
2884
    position: absolute;
2885
    right:0;
2886
    top:40px;
2887
    text-align: right;
2888
    padding-right: 10px;
2889
    font-size: 70%;
2890
}
2891

    
2892
.network-machine .logo {
2893
    float:left;
2894
    padding-right: 10px;
2895
    position:relative;
2896
}
2897

    
2898
#networks-container .machine-name {
2899
    text-decoration: none !important;
2900
    margin-bottom: 10px;
2901
    color: #000000;
2902
    margin-top: -4px;
2903
}
2904

    
2905
.private-networks .separator {
2906
    background-color: #5CA1C0;
2907
    height: 1px;
2908
    margin: 3px 0 -2px -10px;
2909
    width: 485px;
2910
}
2911

    
2912
.network-machine .state {
2913
    margin-right: 18px;
2914
}
2915

    
2916
.network-machine .state .status {
2917
    margin-bottom: 4px;
2918
}
2919

    
2920
.machine-name .name {
2921
}
2922

    
2923
.machine-name .namecontainer {
2924
    line-height: 18px;
2925
    margin-bottom: 20px;
2926
}
2927

    
2928
div.network-machine:hover {
2929
    background-color: #84B7D0;
2930
}
2931

    
2932
.machines {
2933
    width: 416px;
2934
    margin-bottom: -8px;
2935
    margin-top: 10px;
2936
}
2937

    
2938
div.empty-network-slot {
2939
    height: 60px;
2940
}
2941

    
2942
div.network-remove-machine, div.network-add-machine {
2943
    background-color: #FB822F;
2944
    color: #bc4b00;
2945
    width:90px;
2946
    height:18px;
2947
    float:left;
2948
    margin:40px 0 0 -100px;
2949
}
2950

    
2951
span.remove-icon {
2952
    font-size: 80%;
2953
    margin-left: 15px;
2954
    position: relative;
2955
    bottom:1px;
2956
}
2957

    
2958
div.add-icon {
2959
    margin-left: 15px;
2960
    margin-top: -1px;
2961
    cursor: pointer;
2962
}
2963

    
2964
span.remove-icon:hover, span.add-icon:hover {
2965
    cursor:pointer;
2966
    color: #fff;
2967
}
2968

    
2969
div.network-add-machine {
2970
    margin:43px 0 0 0px;
2971
}
2972

    
2973
.firewall-on {
2974
    color: #42E342;
2975
}
2976

    
2977
.firewall-off {
2978
    color: #F82E2E;
2979
}
2980

    
2981
.firewall-content {
2982
    color: black;
2983
    font-size: 60%;
2984
    margin-left: 60px;
2985
    height: 55px;
2986
}
2987

    
2988
.firewall-content .checkbox-legends {
2989
    cursor: pointer;
2990
}
2991

    
2992
.firewall-content .checkbox-legends.current {
2993
    font-weight: bold;
2994
}
2995

    
2996
.firewall-content .checkbox-legends {
2997
    vertical-align: text-top;
2998
}
2999

    
3000
.checkbox-legends a {
3001
    color: black;
3002
    text-decoration: underline;
3003
    font-size: 100%;
3004
}
3005

    
3006
h5.machine-connect {
3007
    font-size: 75%;
3008
    margin-bottom: 3px;
3009
}
3010

    
3011
.machine-connect span {
3012
    text-decoration: underline;
3013
}
3014

    
3015
h5.machine-connect span:hover {
3016
    cursor: pointer;
3017
}
3018

    
3019
.firewall-apply {
3020
    background-color: #4085a5;
3021
    border: medium none;
3022
    float: right;
3023
    font-size: 105%;
3024
    height: 18px;
3025
    margin-right: 5px;
3026
    margin-top: 3px;
3027
    width: 75px;
3028
    position: relative;
3029
    bottom:20px;
3030
}
3031

    
3032
.firewall-apply:hover {
3033
    background-color:#5CA1C0;
3034
}
3035

    
3036
.name-div {
3037
    margin: -9px 0 30px 70px;
3038
}
3039

    
3040
.machine-name-div {
3041
    margin-bottom: 20px;
3042
    margin-left: 60px;
3043
}
3044

    
3045
div.reboot-dialog {
3046
    display: none;
3047
    color: black;
3048
    background-color: #4085A5;
3049
    font-size: 75%;
3050
    margin-top: 15px;
3051
    width: 698px;
3052
    z-index: 1;
3053
}
3054

    
3055
div#reboot-machine-template, div.reboot-machine-entry {
3056
    display: none;
3057
    padding: 0 0 10px 35px;
3058
    width: 300px;
3059
}
3060

    
3061
div.reboot-dialog p {
3062
    color: #FFFFFF;
3063
    padding: 10px 0 10px 10px;
3064
}
3065

    
3066
div.reboot-dialog button {
3067
    float:right;
3068
    border: 1px solid #FF7F2A;
3069
    background-color: transparent;
3070
    font-size:100%;
3071
}
3072

    
3073
div.reboot-dialog button:hover {
3074
    background-color: #FF7F2A;
3075
}
3076

    
3077
div.reboot-dialog button.reboot-all {
3078
    margin: -30px 35px 0 0;
3079
}
3080

    
3081
div.reboot-dialog button.reboot-single {
3082
    color: black;
3083
    margin-top: -20px;
3084
}
3085

    
3086
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
3087
    display:none;
3088
}
3089

    
3090
div.reboot-dialog button.details {
3091
    border-color: #800000;
3092
    margin-top: -20px;
3093
}
3094

    
3095
div.reboot-dialog button.details:hover {
3096
    background-color: #800000;
3097
}
3098

    
3099
/* Metadata */
3100
.machine .info-content {
3101
    display: none;
3102
}
3103

    
3104
.metadata-container {
3105
    line-height: 12px;
3106
    height: 85px;
3107
    background-color: #84b7d0;
3108
}
3109

    
3110
.metadata-column {
3111
    border-right: 1px solid #5CA1C0;
3112
    color: black;
3113
    float: left;
3114
    font-size: 60%;
3115
    margin-top: 3px;
3116
    height: 70px;
3117
    padding-bottom: 5px;
3118
}
3119

    
3120
.vm-stats {
3121
    padding-left: 10px;
3122
    padding-right: 5px;
3123
    width: 220px;
3124
}
3125

    
3126
.vm-stats div.stat-content {
3127
    height: 18px;
3128
}
3129

    
3130
.vm-stats div.stat-content img {
3131
    margin: 0;
3132
}
3133

    
3134
.vm-stats div img.stat-busy {
3135
    margin-top: -7px;
3136
    margin-left: 90px;
3137
}
3138

    
3139
.vm-stats div.stat-content img.busy {
3140
    margin-left: 95px;
3141
}
3142

    
3143
.vm-stats div.stat-error {
3144
    display:none;
3145
}
3146

    
3147
div.stat-error {
3148
    color: #f00;
3149
}
3150

    
3151
.single div.stat-error {
3152
    text-align: center;
3153
    font-size: 0.8em;
3154
}
3155

    
3156
.metadata-column {
3157
    margin-top: 4px;
3158
}
3159

    
3160
.vm-details {
3161
    width: 130px;
3162
    margin-left:17px;
3163
}
3164

    
3165
.vm-details.metadata-column {
3166
    padding-top: 5px;
3167
    height: 65px;
3168
}
3169

    
3170
.vm-details .image-details {
3171
    margin-top: 8px;
3172
}
3173

    
3174
.vm-details .vm-detail {
3175
    display: block;
3176
}
3177

    
3178
.vm-details span.value {
3179
    color: #444;
3180
}
3181

    
3182
.single-container .lower .stat-busy {
3183
    margin-top: 10px;
3184
    margin-left: 325px;
3185
}
3186

    
3187
.vm-metadata {
3188
    padding-left: 10px;
3189
    width: 100px;
3190
    border: none;
3191
}
3192

    
3193
.metadata-left {
3194
}
3195

    
3196
.metadata-right {
3197
    width: 73px;
3198
    float:left;
3199
    height: 35px;
3200
    padding-left: 5px;
3201
    position:relative;
3202
    overflow:hidden;
3203
}
3204

    
3205
.metadata-right .items {
3206
    position:absolute;
3207
    height:20000em;
3208
}
3209

    
3210
.metadata-keys-container {
3211
    height: 60px;
3212
    float: left;
3213
}
3214

    
3215
.single .metadata-keys-container {
3216
    float: none;
3217
    height: auto;
3218
    margin-bottom: 5px;
3219
}
3220

    
3221
.single a.manage-metadata {
3222
    font-size: 80%;
3223
    margin-left:4px;
3224
    color: #383838;
3225
}
3226

    
3227
a.manage-metadata, a.stats-report {
3228
    font-size: 100%;
3229
    color: black;
3230
    margin-left:17px;
3231
    text-decoration: underline;
3232
}
3233

    
3234
a.stats-report {
3235
    margin: 15px 0  0 80px;
3236
}
3237

    
3238
div.machine a.manage-metadata:hover {
3239
    background-color: transparent;
3240
}
3241

    
3242
.single .metadata-actions, .single .metadata-keys-container .items {
3243
    padding-left: 5px;
3244
}
3245
.metadata-actions, .metadata-keys-container .items{
3246
    margin-top: 5px;
3247
}
3248

    
3249
.singe .metadata-actions, .single .metadata-keys-container .items{
3250
    font-size: 80%;
3251
    line-height: 12px;
3252
    width: 300px;
3253
}
3254

    
3255
.metadata-actions .prev,  .metadata-actions .next{
3256
    float:left;
3257
    width:29px;
3258
    height:6px;
3259
    cursor: pointer;
3260
}
3261

    
3262
.metadata-actions .prev {
3263
    background: url("./roll-up.png") no-repeat scroll 0 0 transparent;
3264
}
3265

    
3266
.metadata-actions .next {
3267
    background: url("./roll-down.png") no-repeat scroll 0 0 transparent;
3268
}
3269

    
3270
.scrollable {
3271
    position:relative;
3272
    overflow:hidden;
3273
    height: 35px;
3274
    width: 120px;
3275
    margin-bottom:2px;
3276
}
3277

    
3278
.scrollable .items {
3279
    position:absolute;
3280
    height:20000em;
3281
}
3282

    
3283
/* single view */
3284
.single {
3285
    color: #383838;
3286
}
3287

    
3288
.single .column1 {
3289
    float: left;
3290
    margin: 1px 0 25px 17px;
3291
    width: 140px;
3292
}
3293

    
3294
.single .column1 .state {
3295
    float: left;
3296
    margin-left: 4px;
3297
    padding-bottom: 6px;
3298
    padding-top: 3px;
3299
    position: relative;
3300
    right: 0;
3301
    text-align: center;
3302
    width: 126px;
3303
}
3304

    
3305
.single .column1 .state-label {
3306
    padding-top: 5px;
3307
}
3308

    
3309
.single .column1 .indicators {
3310
    margin-right: 38px !important;
3311
}
3312

    
3313
.single div.connect-arrow {
3314
    margin-left: -17px;
3315
}
3316

    
3317
.single div.connect-border {
3318
    margin-left: -29px;
3319
}
3320

    
3321
.single .single-actions {
3322
    width: 150px;
3323
    height: 60px;
3324
    margin-bottom: 45px;
3325
    margin-left: -10px;
3326
}
3327

    
3328
.single .vm-actions .action-container {
3329
    margin-bottom: 1px;
3330
}
3331

    
3332
.single .vm-actions .action-container .confirm_single {
3333
    right: -45px;
3334
}
3335

    
3336
.single .vm-actions .action-container.destroy .confirm_single {
3337
}
3338

    
3339
.single .vm-actions .action-container.destroy {
3340
    bottom: -20px;
3341
}
3342

    
3343
.single a.single-action {
3344
    text-decoration: none;
3345
    cursor: pointer;
3346
    display: block;
3347
}
3348

    
3349
.single a.single-action:hover {
3350
    background-color:#A1C8DB;
3351
    width: 162px;
3352
    opacity: 0.8;
3353
    filter: alpha(opacity = 80);
3354
}
3355

    
3356
.single .destroy a.single-action.selected {
3357
    color: #880000 !important;
3358
}
3359

    
3360
.single a.single-action.selected {
3361
    color: #FF7F2A !important;
3362
    width: 50px !important;
3363
}
3364

    
3365
.single a.single-action.selected:hover {
3366
    background-color:transparent;
3367
}
3368

    
3369
.single .spinner, .single .action-indicator {
3370
    margin: 15px 45px 0 0px !important
3371
}
3372

    
3373
.single .action-indicator {
3374
    margin-right: 55px !important;
3375
}
3376

    
3377
.single .wave {
3378
    margin: 15px 53px 0 0px !important
3379
}
3380

    
3381
.icon div.action_error {
3382
    font-size: 100%;
3383
}
3384

    
3385
.single div.action_error {
3386
    position: absolute;
3387
    top: 29px;
3388
    right: 35px;
3389
}
3390

    
3391
.single .column2 {
3392
    background-color: #A1C8DB;
3393
    float: left;
3394
    font-size: 78%;
3395
    line-height: 17px;
3396
    margin: 0 0 10px 5px;
3397
    width: 358px;
3398
}
3399

    
3400
.single .column2 .machine-labels {
3401
    float: left;
3402
    font-size: 90%;
3403
    margin-left: 10px;
3404
    margin-top: 10px;
3405
    width: 125px;
3406
}
3407

    
3408
.single .machine-detail.title {
3409
    background-color: #74AEC9;
3410
    color: #fff;
3411
    padding: 4px 6px;
3412
    font-size: 0.8em;
3413
    width: 346px;
3414
    margin-left: 5px;
3415
    float: left;
3416
}
3417

    
3418
.single .column2 .machine-details {
3419
    float: right;
3420
    text-align: right;
3421
    font-size: 90%;
3422
    width: 210px;
3423
    margin-right: 10px;
3424
    margin-top: 10px;
3425
}
3426

    
3427
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3428
    margin-bottom: 13px;
3429
}
3430

    
3431
.single .tags {
3432
    clear: both;
3433
    margin-bottom: 10px;
3434
    margin-left: 10px;
3435
}
3436

    
3437
.single .tags-label {
3438
    float: left;
3439
    padding: 0 5px;
3440
    width: 30px;
3441
}
3442

    
3443
.single .tags-down-arrow {
3444
    background: url("/static/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3445
    float: left;
3446
    height: 16px;
3447
    width: 9px;
3448
}
3449

    
3450
.single .tags-header .info-header{
3451
    padding-top:0;
3452
    padding-bottom:0;
3453
}
3454

    
3455
.single .tags-header {
3456
    font-size: 0.62em;
3457
    cursor: pointer;
3458
    float: left;
3459
    margin-bottom:5px;
3460
}
3461

    
3462
.single .tags-header span.label {
3463
    font-size: 104%;
3464
}
3465

    
3466
.single .tags-content {
3467
    background-color: #84B7D0;
3468
    clear: both;
3469
    height: auto;
3470
    padding-bottom: 5px;
3471
    padding-top: 5px;
3472
    width: 300px;
3473
}
3474

    
3475
.single .column3 {
3476
    background-color: #A1C8DB;
3477
    width: 150px;
3478
    overflow: visible;
3479
    padding-bottom: 10px;
3480
    position: absolute;
3481
    right: 20px;
3482
    top: 130px;
3483
}
3484

    
3485
.single .col3 {
3486
    float: right;
3487
    width: 150px;
3488
    margin-right: 15px;
3489
    margin-bottom: 15px;
3490
}
3491

    
3492
.single .column3 .controls {
3493
    font-size: 80%;
3494
    height: 20px;
3495
    padding-left: 7px;
3496
    padding-right: 7px;
3497
    padding-top: 8px;
3498
    padding-bottom: 5px;
3499
    border-bottom: 1px solid #84B7D0;
3500
}
3501

    
3502
.single .column3 .vm-control:hover {
3503
    background-color: #5CA1C0;
3504
}
3505

    
3506
.single .column3 .previous {
3507
    float:left;
3508
    width: 72px;
3509
}
3510

    
3511
.single .column3 .next {
3512
    float: right;
3513
    text-align: center;
3514
    width: 60px;
3515
}
3516

    
3517
.single .column3 .next-label {
3518
    float: right;
3519
    margin-right: 3px;
3520
    margin-top: -2px;
3521
}
3522

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

    
3530
.single .column3 .prev-label {
3531
    float: left;
3532
    margin-left: 3px;
3533
    margin-top: -2px;
3534
}
3535

    
3536
.single .column3 .prev-arrow {
3537
    background: url("./left-arrow.png") no-repeat scroll 3px 2px transparent;
3538
    float: left;
3539
    height: 18px;
3540
    width: 10px;
3541
}
3542

    
3543
.single .column3 .separator {
3544
    width: 135px;
3545
    height: 1px;
3546
    background-color: #84B7D0;
3547
    margin: 0 0 0 7px;
3548
    clear: both;
3549
}
3550

    
3551
.single .column3 .servers {
3552
    font-size: 80%;
3553
    line-height: 15px;
3554
    padding-top: 10px;
3555
    text-align: right;
3556
    overflow: visible;
3557
    position: relative;
3558
}
3559

    
3560
.single .column3 .server-name {
3561
    margin-left: 10px;
3562
    padding-right: 5px;
3563
    cursor: pointer;
3564
    padding-bottom: 2px;
3565
}
3566
div.single div.column3 div.server-name:hover {
3567
    background-color: #5CA1C0;
3568
}
3569
.single .column3 .column3-selected {
3570
    background-color: #84B7D0;
3571
    color: white;
3572
    opacity: 0.8;
3573
    padding-left: 9px;
3574
    width: 160px;
3575
    filter: alpha(opacity = 80);
3576
    position: relative;
3577
    width: 126px;
3578
}
3579

    
3580
.single .toggler {
3581
    color: #FFFFFF;
3582
    float: right;
3583
    font-size: 140%;
3584
}
3585

    
3586
.single .cpu-usage, .single .network-usage {
3587
    text-align: center;
3588
    padding-top: 15px;
3589
    margin-bottom: 5px;
3590
    font-size: 90%;
3591
    font-weight: bold;
3592
}
3593

    
3594
.single .cpu-graph, .single .network-graph {
3595
    margin-left: 20px;
3596
    margin-bottom:30px;
3597
    width: 660px;
3598
}
3599

    
3600
.single div.lower img.stats {
3601
    margin-left: 82px;
3602
}
3603

    
3604
.single div.lower img.stats {
3605
    display: none;
3606
}
3607

    
3608
.single .single-image {
3609
    width: 126px;
3610
    height: 136px;
3611
    margin-bottom: 10px;
3612
    margin-left: 4px;
3613
    background-image: url("./icons/machines/large/unknown-sprite.png");
3614
    background-repeat: no-repeat;
3615
    cursor: pointer;
3616
}
3617

    
3618
.single .single-image-state1 {
3619
    background-position: 0px 0;
3620
}
3621

    
3622
.single .single-image-state3 {
3623
    background-position: -252px 0;
3624
}
3625

    
3626
.single .single-image-state4 {
3627
    background-position: -378px 0;
3628
}
3629

    
3630
.single .single-image-state2 {
3631
    background-position: -126px 0;
3632
}
3633

    
3634
.single .column3 .previous, .single .column3 .next {
3635
    cursor: pointer;
3636
    background-color: #84B7D0;
3637
    color: white;
3638
    font-size: 100%;
3639
    height: 15px;
3640
    padding-top: 2px;
3641
}
3642

    
3643
.single .column3 .disabled {
3644
    opacity: 0.5;
3645
    filter: alpha(opacity = 50);
3646
}
3647

    
3648
.single div.lower {
3649
    clear:both;
3650
    background: #EFF7FA repeat scroll 0 0;
3651
    width: 700px;
3652
    padding-bottom: 15px;
3653
}
3654

    
3655
.single div.upper {
3656
    background: transparent;
3657
    margin-bottom: 10px;
3658
    overflow: visible;
3659
    width: 700px;
3660
    background: #EFF7FA repeat scroll 0 0;
3661
}
3662

    
3663
/* console css */
3664
.console-header-logo {
3665
    padding-top: 17px;
3666
    margin-left: 30px;
3667
    position: fixed;
3668
}
3669

    
3670
#console-header div.help-text {
3671
    font-size: 75%;
3672
    font-weight:bold;
3673
    color:#FFFFFF;
3674
    float:left;
3675
    position: absolute;
3676
    margin: 45px 0 0 2px;
3677
}
3678

    
3679
div.console-container {
3680
    margin: 0 0em;
3681
    height: auto;
3682
}
3683

    
3684
#wrapper.console {
3685
    width: auto;
3686
}
3687

    
3688
.console-info {
3689
    font-size:80%;
3690
    color: white;
3691
    float:left;
3692
    position:relative;
3693
    margin: 15px 0 0 480px;
3694
}
3695

    
3696
applet {
3697
    width:100%;
3698
    height:100%;
3699
}
3700

    
3701
div.console-footer {
3702
    /* this is for version 0.5*/
3703
    display: none;
3704
}
3705

    
3706
.console-footer #footer-text{
3707
    float:left;
3708
    left: auto;
3709
    margin-left:30px;
3710
}
3711

    
3712
/* add network wizard (see also #wizard for shared classes) */
3713
#networks-wizard .header {
3714
    background-color: #4085A5;
3715
    height: 56px;
3716
}
3717

    
3718
#networks-wizard div.name-input {
3719
    margin: 75px 0 0 55px;
3720
}
3721

    
3722
#networks-wizard input {
3723
    border: 1px solid #CCCCCC;
3724
    color: #445566;
3725
    letter-spacing: 1px;
3726
    width: 170px;
3727
}
3728

    
3729
#networks-wizard span.help {
3730
    font-style: italic;
3731
    font-size: 80%;
3732
    margin-left: 10px;
3733
}
3734

    
3735
#networks-wizard .separator-end {
3736
    background-color: #387693;
3737
    height: 6px;
3738
    width: 479px;
3739
    margin-left: -13px;
3740
    margin-top: 19px;
3741
}
3742

    
3743
.red {
3744
    color: red;
3745
}
3746

    
3747
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3748
#add-machines-wizard span.machine-name {
3749
    margin-left: 4px;
3750
    vertical-align: text-top;
3751
}
3752

    
3753
#add-machines-wizard img.list-logo {
3754
    margin: 2px 1px 1px;
3755
}
3756

    
3757
.css-panes {
3758
    clear: both;
3759
    position: relative;
3760
    z-index: 10;
3761
}
3762

    
3763
.last .firewall-content {
3764
}
3765

    
3766
#pub .last .network-separator {
3767
    display:none;
3768
}
3769

    
3770
.public-networks .empty-network-slot {
3771
    display: none;
3772
}
3773

    
3774
.clearfix {
3775
    display: block;
3776
    width: auto;
3777
    zoom: 1;
3778
}
3779

    
3780
/* float clearing for all browsers except the devil one */
3781
.clearfix:after{
3782
  clear: both;
3783
  content: ".";
3784
  display: block;
3785
  height: 0;
3786
  visibility: hidden;
3787
  font-size: 0;
3788
}
3789

    
3790
* html .clearfix {
3791
    display: inline-block;
3792
}
3793

    
3794
.icon .cont-toggler {
3795
    margin-top: -1px;
3796
}
3797

    
3798
.icon .wave {
3799
    margin-right: 4px !important;
3800
    margin-top: 15px !important;
3801
}
3802

    
3803
.icon .status {
3804
    margin-right: 3px;
3805
}
3806

    
3807
#machinesview .status, .single .state {
3808
    font-size: 75%;
3809
}
3810

    
3811
#machinesview-list div.action-indicator {
3812
    margin:0 !important;
3813
    float: none !important;
3814
}
3815

    
3816
.icon div.action-indicator {
3817
    margin-top: 14px;
3818
    margin-right: 4px;
3819
}
3820

    
3821
div.action-indicator {
3822
    width: 15px;
3823
    height: 20px;
3824
    background-repeat: no-repeat;
3825
    background-position: 0 0;
3826
}
3827

    
3828
tbody.machines div.action-indicator {
3829
    position: relative;
3830
    top: -2px;
3831
}
3832
div.state .destroy, tbody.machines .destroy {
3833
    background-image: url("./icons/actions/medium/destroy.png");
3834
}
3835
div.state .console, tbody.machines .console {
3836
    background-image: url("./icons/actions/medium/console.png");
3837
}
3838
div.state .start, tbody.machines .start {
3839
    background-image: url("./icons/actions/medium/start.png");
3840
}
3841
div.state .reboot, tbody.machines .reboot {
3842
    background-image: url("./icons/actions/medium/reboot.png");
3843
}
3844
div.state .shutdown, tbody.machines .shutdown {
3845
    background-image: url("./icons/actions/medium/shutdown.png");
3846
}
3847

    
3848

    
3849
.no-invitations-left {
3850
    margin-bottom: 20px;
3851
    color: #E44848;
3852
}
3853

    
3854
.invitations #field_name_name, .invitations #field_email_name {
3855
    float: left;
3856
    display: block;
3857
    width: 180px;
3858
}
3859
.invitations input {
3860
    width: 170px;
3861
}
3862

    
3863
.invitations #fieldheaders span.description {
3864
    font-size: 0.8em;
3865
    color: #666;
3866
    margin-left: 2px;
3867
}
3868

    
3869
.invitations #fields {
3870
    margin-top: 5px;
3871
}
3872

    
3873
.invitations .add-field-container {
3874
    margin-top: 5px;
3875
}
3876

    
3877
.invitations #errors {
3878
    padding: 5px;
3879
    background-color: #800000;
3880
}
3881

    
3882
.invitations #errors p {
3883
    margin-bottom: 10px;
3884
    font-size: 0.95em;
3885
    padding-top:0;
3886
    margin-top:0;
3887
    color: #fff;
3888
}
3889

    
3890
.invitations #errors li {
3891
    font-size: 0.85em;
3892
    color: #ddd;
3893
}
3894

    
3895
.invitations #errors {
3896
    font-size: 100%;
3897
    margin-bottom: 10px;
3898
}
3899

    
3900
#invsent {
3901
    padding-top: 10px;
3902
}
3903

    
3904
#invsent h3.overlay-inner-title {
3905
    font-size: 1.2em;
3906
    font-weight: normal;
3907
    border-bottom: 1px solid #B0D0E0;
3908
}
3909

    
3910
#invsent .icons-info img {
3911
    vertical-align: middle;
3912
}
3913

    
3914
#invsent .icons-info {
3915
    margin-top: 10px;
3916
    font-size: 0.7em;
3917
}
3918

    
3919
#invsent .icons-info span {
3920
    margin-right: 10px;
3921
}
3922

    
3923
.notification-box .invitations {
3924
    padding-bottom: 0;
3925
}
3926
.notification-box .invitations .sub-text {
3927
    display: none;
3928
}
3929

    
3930
h3.overlay-inner-title {
3931
    color: #4085A5;
3932
    font-size: 2em;
3933
}
3934

    
3935
#invsent .message {
3936
    font-size: 0.9em;
3937
    padding: 5px 0;
3938
    margin-top: 5px;
3939
    margin-bottom: -10px;
3940
    color: #5CAD54;
3941
}
3942

    
3943
#invsent .errormsg {
3944
    color: #AE2B34;
3945
}
3946

    
3947
#add-name-container {
3948
    margin-bottom: 10px;   
3949
}
3950

    
3951
.remove-field-trigger, .add-field-trigger {
3952
    cursor: pointer;
3953
}
3954

    
3955
.add-field-trigger img {
3956
    vertical-align: middle;
3957
}
3958

    
3959
.invitations form {
3960
    margin-bottom: 20px;
3961
}
3962

    
3963
#invsent h3 {
3964
    font-size: 0.8em;
3965
    font-weight: bold;
3966
}
3967

    
3968
#invsent h3 span {
3969
    font-weight: normal;
3970
    font-size: 0.9em;
3971
    margin-right: 5px;
3972
    display: block;
3973
    margin-top: -2px;
3974
}
3975

    
3976
#invsent ul {
3977
    margin-top: 3px;
3978
}
3979

    
3980
#invsent li {
3981
    color: #4085A5;
3982
    font-size: 1.1em;
3983
    padding-top: 0.5em;
3984
    border-bottom: 1px solid #efefef;
3985
    padding-bottom: 0.5em;
3986
    font-size: 0.9em;
3987
    position: relative;
3988
}
3989

    
3990
#invsent li:hover {
3991
    background-color: #efefef;
3992
}
3993

    
3994
#invsent li img {
3995
    position: absolute;
3996
    left:20px;
3997
    bottom: 2px;
3998
}
3999

    
4000
#invsent h3 img {
4001
    float: none;
4002
    vertical-align: middle;
4003
    margin-left: 3px;
4004
}
4005

    
4006
#invsent .name {
4007
    float: left;
4008
    width: 55%;
4009
    padding-left: 20px;
4010
}
4011

    
4012
#invsent .email {
4013
    float: left;
4014
    width: 40%;
4015
}
4016

    
4017
#invsent li.accepted {
4018
    color: #ABD49C;
4019
}
4020

    
4021
#invsent li img {
4022
    margin-left: -20px;
4023
    margin-top: 1px;
4024
}
4025

    
4026
#invsent li img.resend {
4027
    cursor: pointer;
4028
}
4029

    
4030
.invitations #field_email_name {
4031
}
4032

    
4033
#invform #fields input {
4034
    margin-right: 10px;
4035
}
4036

    
4037
.machine-now-building {
4038
    padding-right: 15px !important;
4039
    text-align: justify;
4040
}
4041

    
4042
.sub-text {
4043
    padding-top: 15px;
4044
    padding-right: 15px;
4045
    text-align: justify;
4046
    font-style: italic;
4047
    font-size: 0.8em !important;
4048
}
4049

    
4050
#notification-box a {
4051
    color: #4085A5;
4052
}
4053

    
4054
#notification-box .machine-title img {
4055
    vertical-align: middle;
4056
}
4057

    
4058
#notifiaction-box .password-header {
4059
    margin-bottom: 0 !important;
4060
}
4061

    
4062
#notification-box .password-container a {
4063
    color: #fff;
4064
    text-decoration: underline;
4065
}
4066

    
4067
#notification-box .password-container a:hover {
4068
    background-color: #fff;
4069
    color: #4085A5;
4070
}
4071

    
4072
#notification-box .password-container {
4073
    background: #4085A5;
4074
    border: none;
4075
}
4076

    
4077
#notification-box .password-container .password a {
4078
    font-weight: normal !important;
4079
}
4080

    
4081
#notification-box .cmd {
4082
    color: #fff;
4083
    font-family: monospace;
4084
    font-size: 1.6em;
4085
}
4086

    
4087
.machine-container .separator {
4088
    background-color: #B0D1E0;
4089
}
4090

    
4091
#creation-password-overlay div.password-cont {
4092
    margin: 10px auto;
4093
    padding: 10px;
4094
    border: 2px solid #75B54A;
4095
    background-color: #AADE87;
4096
    color: #447821;
4097
    text-align: left;
4098
    padding-left: 5em;
4099
    position: relative;
4100
}
4101

    
4102
#creation-password-overlay {
4103
    position: relative;
4104
}
4105

    
4106
#creation-password-overlay .form-action {
4107
    position: absolute;
4108
    bottom: 15px;
4109
    right: 13px;
4110
    font-size: 0.8em;
4111
}
4112

    
4113
#creation-password-overlay .password-label {
4114
    float: left;
4115
}
4116

    
4117
#creation-password-overlay .password {
4118
    font-size: 1.3em;
4119
    font-weight: bold;
4120
    margin-right: 5em;
4121
    float: right;
4122
    margin-top: -4px;
4123
}
4124

    
4125
.feedback-form .description {
4126
    margin-bottom: 25px;
4127
}
4128

    
4129
.feedback-form label {
4130
    display: block;
4131
    font-weight: bold;
4132
    margin-bottom: 10px;
4133
    font-size: 0.8em;
4134
}
4135

    
4136
.feedback-form .form-actions {
4137
    border-top: none;
4138
}
4139

    
4140
.nospace {
4141
    padding-top: 0 !important;
4142
    padding-bottom: 0 !important;
4143
}
4144

    
4145
.noborder {
4146
    border-top: none !important;
4147
    border-bottom: none !important;
4148
}
4149

    
4150
.overlay .feedback-form .messages.description {
4151
    padding-bottom:0;
4152
    margin-bottom: 0;
4153
}
4154

    
4155
.feedback-form .messages .error-message {
4156
    color: #f00;
4157
}
4158

    
4159
.feedback-form .messages .success-message {
4160
    color: #8AA87F;
4161
}
4162

    
4163
.feedback-form .feedback-message {
4164
    width: 548px;
4165
    height: 200px;
4166
    border: 1px solid #ddd;
4167
    padding: 5px;
4168
}
4169

    
4170
#feedback-form .empty-error-msg {
4171
    display: none;
4172
}
4173

    
4174
#feedback-form .data-text {
4175
    display: none;
4176
}
4177

    
4178
#feedback-form .message {
4179
    display: none;
4180
}
4181

    
4182
#feedback-form label {
4183
    display: block;
4184
    font-size: 0.85em;
4185
    font-weight: bold;
4186
}
4187

    
4188
#feedback-form label.inline {
4189
    display: inline;
4190
    padding-left: 5px;
4191
}
4192

    
4193
#feedback-form p {
4194
    padding: 1em 0;
4195
    color: #444;
4196
    margin-bottom: 10px;
4197
}
4198

    
4199
#feedback-form .description {
4200
    font-style: italic;
4201
    font-size: 0.9em;
4202
    color: #888;
4203
}
4204

    
4205
#feedback-form .feedback-text {
4206
    width: 98%;
4207
    height: 100px;
4208
    margin-top: 10px;
4209
    margin-bottom: 10px;
4210
}
4211

    
4212
#feedback-form .submit-data {
4213
    display: none;
4214
}
4215

    
4216
#feedback-form .submit, #invform .submit {
4217
    background-color: #4085A5;
4218
    color: #fff;
4219
    border: none;
4220
    padding: 5px 16px;
4221
    cursor: pointer;
4222
    font-size: 1em;
4223
    position: relative;
4224
}
4225

    
4226
#feedback .submit {
4227
    float: right;
4228
    right: 10px;
4229
    margin-top: 10px;
4230
}
4231

    
4232

    
4233
#feedback-form .submit:hover, #invform .submit:hover {
4234
    background-color: #549FC3;
4235
}
4236

    
4237
.feedback-intro {
4238
    padding-right: 15px !important;
4239
    text-align: justify;
4240
}
4241

    
4242
.popup-body .message {
4243
    padding: 20px 5px;
4244
    display: none;
4245
}
4246

    
4247
.popup-body .loading {
4248
    color: #fff;
4249
}
4250

    
4251
.popup-body .success {
4252
    color: #1F921A;
4253
}
4254

    
4255
.popup-body .errormsg {
4256
    color: #E32424;
4257
}
4258

    
4259

    
4260
.close-msg-box {
4261
    display: block;
4262
    margin-top: 10px;
4263
    cursor: pointer;
4264
    color: #4085A5;
4265
    text-decoration: underline;
4266
}
4267

    
4268

    
4269
.console .ip-version-label {
4270
    margin: 0 5px;
4271
}
4272

    
4273
.ipv6-text, .ipv4-text {
4274
    font-size: 0.9em;
4275
}
4276

    
4277
.tooltip {
4278
    background-color: #C4DDE9;
4279
    color: #000;
4280
    font-size: 0.7em;
4281
    padding: 0.2em 0.5em;
4282
    border: 1px solid #888;
4283
    z-index: 50000;
4284
}
4285

    
4286
/*404 and 500 pages*/
4287

    
4288
.error_page {
4289
    position: relative;
4290
    top: 40px;
4291
    padding-bottom: 140px !important;
4292
}
4293

    
4294
.error_page h1 {
4295
    font-weight: normal;
4296
}
4297

    
4298
.error_page .msg_header {
4299
    margin: 0px;
4300
    font-size: 10em;
4301
    position: absolute;
4302
    left: -5px;
4303
    top: 0px;
4304
    color: #4085A5;
4305
    font-family: arial, verdana;
4306
}
4307

    
4308
.error_page p.error_desc {
4309
    color: #fff;
4310
    font-size: 0.8em;
4311
}
4312

    
4313
.error_page {
4314
    padding-right: 50px !important;
4315
    padding-left: 100px !important;
4316
}
4317

    
4318
.error_page .error_content {
4319
    padding-left: 150px;
4320
    padding-top: 97px;
4321
}
4322

    
4323
.error_page .error_content .links, .info_content .links {
4324
    margin-top: 10px;
4325
    margin-left: 20px;
4326
}
4327

    
4328
.error_page .http_error .code {
4329
    letter-spacing: -10px;
4330
    font-size: 9em;
4331
}
4332

    
4333
.error_page .http_error .msg {
4334
    letter-spacing: -1px;
4335
    font-size: 2em;
4336
}
4337

    
4338
.error_page .http_error {
4339
    position: absolute;
4340
    right: 0px;
4341
    bottom: 0px;
4342
    color: #75B3D0;
4343
    line-height: 1em;
4344
}
4345

    
4346
.error_page .error_content a, .info_content .links a {
4347
    color: #4085A5;
4348
    font-weight: bold;
4349
    margin-right: 10px;
4350
    font-size: 0.9em;
4351
}
4352

    
4353
.error_body #container, .info_body #container {
4354
    background-position: right 200px;
4355
}
4356

    
4357
.info_page h1 {
4358
    color: #4085A5;
4359
    font-size: 2em;
4360
    font-weight: normal;
4361
}
4362

    
4363
.info_page p {
4364
    color: #ffffff;
4365
    margin: 1em 0;
4366
}
4367

    
4368
.info_body p a, .error_body p a{
4369
    color: #4085A5;
4370
    text-decoration: underline;
4371
}
4372

    
4373
.error_404 .http_error .code {
4374
    letter-spacing: -7px;
4375
}
4376

    
4377
.network-progress-indicator {
4378
    position: relative;
4379
    display: none;
4380
}
4381

    
4382
.network-progress-indicator img {
4383
    position: absolute;
4384
    bottom: 44px;
4385
    left: 340px;
4386
}
4387

    
4388

    
4389
.single .progress-message {
4390
    margin-top: 90px;
4391
    font-size: 0.6em;
4392
    padding: 0 10px;
4393
    text-align: center;
4394
}
4395

    
4396
/*metadata keys/values*/
4397
.items .tag-item  {
4398
    display: block;
4399
}
4400

    
4401
.single .items .tag-item .key {
4402
    width: 60px;
4403
}
4404

    
4405
.running .scrollable, .terminated .scrollable {
4406
    height: 42px;
4407
}
4408

    
4409
.items .tag-item .key {
4410
    margin-right: 5px;
4411
    width: 30px;
4412
    display: block;
4413
    float: left;
4414
    color: #000;
4415
}
4416

    
4417
.items .tag-item .value {
4418
    color: #444;
4419
}
4420

    
4421
#machinesview-list {
4422
    display: none;
4423
}
4424

    
4425
#machinesview-single {
4426
    position: relative;
4427
    display: none;
4428
}
4429

    
4430
#machinesview-icon {
4431
    display: none;
4432
}
4433

    
4434
#machinesview-icon, #machinesview-single, #machinesview-list {
4435
    
4436
}
4437

    
4438
tbody.machines .spinner {
4439
    margin-top: 0!important;
4440
    margin: 0 !important;
4441
    float: none !important;
4442
}
4443

    
4444
.slider .slider-point {
4445
    width: 4px;
4446
    height: 3px;
4447
    margin-left: 1px;
4448
    background-color: transparent;
4449
    display: block;
4450
    position: absolute;
4451
    z-index: 10;
4452
    bottom: 0px;
4453
}
4454

    
4455
.slider .slider-point-light {
4456
    background-color: transparent;
4457
}
4458

    
4459
.slider-point-text {
4460
    font-size: 0.6em;
4461
    position: absolute;
4462
    top: 4px;
4463
    border-top: 5px solid #C5DEE9;
4464
    padding: 3px;
4465
    color: #4085A5;
4466
    display: block;
4467
    min-width: 6px;
4468
    text-align: middle;
4469
}
4470

    
4471
.slider .handle {
4472
    z-index: 50;
4473
}
4474

    
4475
.modal p.desc {
4476
    margin: 5px 0;
4477
    margin-left: 37px;
4478
    font-size: 0.8em;
4479
    color: #888;
4480
}
4481

    
4482
.api_overlay_template {
4483
    display: none;
4484
}
4485

    
4486
.api_content .password-container .password {
4487
    color: #fff;
4488
    font-size: 1.1em;
4489
}
4490

    
4491
#disks-pane {
4492
    margin-top: 58px;
4493
}
4494

    
4495
span.resend-msg {
4496
    display: block;
4497
    margin-bottom: 5px;
4498
}
4499

    
4500
.success-msg {
4501
    background-color: #5CAD54;
4502
    color: #fff;
4503
    padding: 0.4em;
4504
    border: 1px solid #ddd;
4505
}
4506

    
4507
.error-msg {
4508
    background-color: #800000;
4509
    color: #fff;
4510
    padding: 0.4em;
4511
    border: 1px solid #ddd;
4512
}
4513

    
4514
.success-msg em, .error-msg em {
4515
    font-weight: bold;
4516
    font-style: normal;
4517
    font-size: 0.9em;
4518
}
4519

    
4520
.pagination {
4521
            font-size: 80%;
4522
        }
4523
        
4524
.pagination a {
4525
    text-decoration: none;
4526
        border: solid 1px #AAE;
4527
        color: #15B;
4528
}
4529

    
4530
.pagination a, .pagination span {
4531
    display: block;
4532
    float: left;
4533
    padding: 0.3em 0.5em;
4534
    margin-right: 5px;
4535
        margin-bottom: 5px;
4536
        min-width:1em;
4537
        text-align:center;
4538
}
4539

    
4540
.pagination .current {
4541
    background: #4085A5;
4542
    color: #fff;
4543
        border: solid 1px #AAE;
4544
}
4545

    
4546
.pagination .current.prev, .pagination .current.next{
4547
        color:#999;
4548
        border-color:#999;
4549
        background:#fff;
4550
}
4551

    
4552
#invsent .pagination {
4553
    margin-top: 10px;
4554
}
4555

    
4556
table.list-machines .wave {
4557
    float: none !important;
4558
    margin: 0 !important;
4559
}
4560

    
4561
.overlay {
4562
    display: none;
4563
}
4564

    
4565
.overlay .copy-content .clip-copy {
4566
    right: 10px;
4567
    top:8px;
4568
    border: 1px solid #fff;
4569
}
4570

    
4571
.overlay .copy-content {
4572
    background-color: #387693;
4573
    color: #fff;
4574
    padding: 10px;
4575
    font-size: 1.2em;
4576
    text-align: center;
4577
    position: relative;
4578
}
4579

    
4580
.overlay {
4581
    background-color: #fff;
4582
    border: 2px solid #444;
4583
    text-align: left;
4584

    
4585
    -moz-box-shadow: 0 0 90px 5px #000;
4586
    -webkit-box-shadow: 0 0 90px 5px #000;
4587
    box-shadow: 0 0 90px 5px #000;
4588
    width: 600px;
4589
}
4590

    
4591
.overlay a {
4592
    color: #387693;
4593
}
4594

    
4595
.overlay .overlay-content .description.subinfo {
4596
    margin-bottom:0;
4597
    border-bottom: none;
4598
    padding-bottom:0;
4599
    margin-top: 10px;
4600
    padding-top:10px;
4601
    border-top: 1px solid #64a6c4;
4602
    /*border-top: 1px solid #DBE6EB;*/
4603
    font-size: 0.8em;
4604
}
4605

    
4606
.overlay .overlay-content .important {
4607
    color: #800000;
4608
}
4609

    
4610
.overlay .overlay-content .description {
4611
    color: #444;
4612
    border-bottom: 1px solid #64a6c4;
4613
    margin-bottom: 10px;
4614
    padding-bottom: 10px;
4615
    font-size: 0.9em;
4616
    line-height: 1.6em;
4617
}
4618
.overlay .overlay-content .empty-message {
4619
    margin-bottom: 5px;
4620
}
4621

    
4622
.overlay h3.header {
4623
    font-size: 0.9em;
4624
    text-align: left;
4625
    padding: 0.8em;
4626
    padding-left: 1em;
4627
    font-weight: normal;
4628
    border-bottom: 1px solid #ddd;
4629
}
4630

    
4631
.overlay h3.header .title {
4632
    float: left;
4633
}
4634

    
4635
.overlay .container {
4636
    position: relative;
4637
    padding-top: 1em;
4638
    padding: 0.5em;
4639
    background-image: url("./popup-bg.png");
4640
    background-repeat: repeat-x;
4641
}
4642

    
4643
.overlay .content {
4644
    background-color: transparent;
4645
    background-image: url("./popup-inner-bg.png");
4646
    padding: 1em;
4647
    font-size: 0.8em;
4648
    background-repeat: repeat-x;
4649
    -moz-box-shadow: 0 0 1px 1px #888;
4650
    -webkit-box-shadow: 0 0 1px 1px #888;
4651
    box-shadow: 0 0 1px 1px #888;
4652
}
4653

    
4654
.overlay .message {
4655
}
4656

    
4657
.overlay .actions {
4658
    position: absolute;
4659
    right: 0.75em;
4660
    top: 0.6em;
4661
}
4662

    
4663
.overlay .actions span {
4664
    font-size: 0.8em;
4665
    color: #fff;
4666
    cursor: pointer;
4667
    margin-left: 10px;
4668
    display: block;
4669
    float: left;
4670
    background-color: #4085A5;
4671
    padding: 0.2em 0.4em;
4672
}
4673

    
4674
.overlay-error .error-more-details {
4675
    margin-top: 5px;
4676
    max-height: 210px;
4677
    overflow: auto;
4678
}
4679

    
4680
.overlay-error .key.details.expand {
4681
    background-image: url("./plus-8.png");
4682
}
4683

    
4684
.overlay-error .key.details {
4685
    background-color: #5189A3;
4686
    cursor: pointer;
4687
    background-image: url("./minus-8.png");
4688
    background-repeat: no-repeat;
4689
    background-position: 545px;
4690
}
4691

    
4692
.overlay-error .container {
4693
    padding-top: 1.9em;
4694
}
4695

    
4696
.overlay-error .error-details {
4697
    font-size: 0.8em;
4698
    margin-top: 10px;
4699
}
4700

    
4701
.overlay-error .error-details anonymous {
4702
    display: block;
4703
    margin-top: 10px;
4704
}
4705

    
4706
.overlay-error h3.header {
4707
    background-color: #800000;
4708
    color: #fff;
4709
}
4710

    
4711
.overlay-error.non-critical h3.header {
4712
    background-color: #987249;
4713
}
4714

    
4715
.overlay-error span.key {
4716
    font-weight: normal;
4717
    display: block;
4718
    margin-top: 0.5em;
4719
    background-color: #74AEC9;
4720
    color: #fff;
4721
    padding: 0.4em;
4722
    font-size: 0.8em;
4723
    font-weight: bold;
4724
}
4725

    
4726
.overlay-error .indicator {
4727
    background-color: #880000;
4728
    color: #fff;
4729
    padding: 4px;
4730
    display: block;
4731
    float: left;
4732
    border: 1px solid #444;
4733
}
4734

    
4735
.overlay-error .nav-btn:hover {
4736
    
4737
}
4738

    
4739
.overlay-error .nav-btn {
4740
    margin-left: 5px;
4741
    color: #fff;
4742
    display: block;
4743
    float: left;
4744
    padding: 4px;
4745
    background-color: #AAA;
4746
    border: 1px solid #444;
4747
}
4748

    
4749
.overlay-error .error-nav {
4750
    position: absolute;
4751
    right: 0px;
4752
    bottom: -25px;
4753
    font-size: 0.8em;
4754
}
4755

    
4756
.overlay-error span.value, .overlay-error div.value {
4757
    padding: 0.4em;
4758
    display: block;
4759
    margin-bottom: 0.3em;
4760
}
4761

    
4762
.overlay h3 .closeme {
4763
    float: right;
4764
    font-size: 0.7em;
4765
    margin-top: 0.2em;
4766
    cursor: pointer;
4767
}
4768

    
4769
.overlay .header .subtitle {
4770
    display: block;
4771
    font-size: 0.8em;
4772
    color: #ddd;
4773
}
4774

    
4775
.overlay .header .subtitle img {
4776
    vertical-align: middle;
4777
    margin-left: 10px;
4778
    margin-bottom: 2px;
4779
}
4780

    
4781
.overlay-info .content {
4782
    background-repeat: no-repeat;
4783
    background-position: 110% 110%;
4784
    background-color: rgba(255,255,255,0.6)
4785
}
4786

    
4787
.overlay-info .header {
4788
    background-color: #4085A5;
4789
}
4790

    
4791
.overlay-info .header .title {
4792
    color: #fff;
4793
}
4794

    
4795
.overlay-info .header .closeme {
4796
    color: #fff;
4797
}
4798

    
4799
#loading-view {
4800
    width: 600px;
4801
    margin: 0 auto;
4802
    padding: 20px 0;
4803
    font-size: 0.8em;
4804
}
4805

    
4806
#loading-view .header span {
4807
    font-weight: bold;
4808
    color: #4085A5;
4809
}
4810

    
4811
#loading-view .info {
4812
    color: #ddd;
4813
}
4814

    
4815
.options-list {
4816
    margin-top: 0.5em;
4817
    font-size: 0.8em;
4818
}
4819

    
4820
.options-list.five li {
4821
    float: left;
4822
    display: block;
4823
    width: 20%;
4824
    margin-bottom: 5px;
4825
}
4826

    
4827
.options-list.five li:nth-child(5n) .options-object-cont {
4828
    margin-right: 0;
4829
}
4830

    
4831
.options-object-cont input {
4832
    border: 1px solid #aaa;
4833
    width: 92px;
4834
    padding: 0;
4835
    margin: 0;
4836
    margin-top:3px;
4837
    padding: 2px;
4838
}
4839

    
4840
.options-list.three li {
4841
    float: left;
4842
    display: block;
4843
    width: 33%;
4844
    margin-bottom: 5px;
4845
}
4846

    
4847
.meta-list .options-list li.options-object.create .options-object-cont {
4848
    background-image: url("./option-action-add.png");
4849
    background-repeat: no-repeat;
4850
    background-position: 90px 5px;
4851
}
4852

    
4853
.meta-list .options-list li .options-object-cont .option-action,
4854
.meta-list .options-list li.options-object.create {
4855
    cursor: pointer !important;
4856
}
4857

    
4858
.meta-list .options-list li .options-object-cont {
4859
    cursor: inherit;
4860
}
4861

    
4862
.options-list li .options-object-cont {
4863
    padding: 5px;
4864
    margin-right: 4px;
4865
    border: 1px solid #A6D1E6;
4866
    cursor: pointer;
4867
    min-height: 35px;
4868
    position: relative;
4869
}
4870

    
4871
.options-list.three li:nth-child(3n) .options-object-cont {
4872
    margin-right: 0;
4873
}
4874

    
4875
.options-list li.selected .options-object-cont {
4876
    background-color: #efefef;
4877
    border: 2px solid #4085A5;
4878
    padding: 4px;
4879
}
4880

    
4881
.options-list li.selected .options-object-cont .title {
4882
}
4883

    
4884
.options-list li.options-object .title {
4885
    display: block;
4886
    color: #FF7F2A;
4887
    margin-bottom: 2px;
4888
}
4889

    
4890
.options-list li .option-action {
4891
    display: none;
4892
    position: absolute;
4893
    background-repeat: no-repeat;
4894
}
4895

    
4896
.options-list.five li.editing {
4897
    width: 40%;
4898
}
4899

    
4900
.options-list.five li.editing .value {
4901
    display: none;
4902
}
4903

    
4904
.options-list li .remove {
4905
    background-image: url("./option-action-remove.png");
4906
    width:10px;
4907
    height:10px;
4908
    right:5px;
4909
    top: 5px;
4910
}
4911

    
4912
.options-list li .edit {
4913
    background-image: url("./option-action-edit.png");
4914
    width:10px;
4915
    height:10px;
4916
    right:5px;
4917
    bottom: 8px;
4918
}
4919

    
4920
.options-list li:hover .option-action  {
4921
    display: block;
4922
}
4923

    
4924
.options-list li.options-object .value {
4925
    color: #4085A5;
4926
    margin-top: 5px;
4927
    display: block;
4928
}
4929

    
4930
.options-list li.selected.options-object .value {
4931
}
4932

    
4933
.options-list li .options-object-cont:hover {
4934
    background-color: #fff;
4935
}
4936

    
4937
.options-list li.selected .options-object-cont:hover {
4938
    background-color: #fff;
4939
}
4940

    
4941
.options-list li img {
4942
    float: left;
4943
    margin:2px;
4944
    margin-right: 10px;
4945
    padding-bottom:10px;
4946
}
4947

    
4948
#network-vms-select-content li.options-object .value {
4949
    margin-top: 10px;
4950
    margin-left: 30px;
4951
}
4952

    
4953
#network-vms-select-content li.options-object:hover .options-object-cont,
4954
#network-vms-select-content li.options-object .options-object-cont {
4955
    background-image: url("./option-action-add-dark.png");
4956
    background-repeat: no-repeat;
4957
    background-position: 160px 28px;
4958
}
4959

    
4960
#network-vms-select-content li.selected:hover .options-object-cont,
4961
#network-vms-select-content li.selected .options-object-cont {
4962
    background-image: url("./option-action-remove.png") !important;
4963
}
4964

    
4965
#metadata-overlay-content .view .value {
4966
    margin-top: 10px;
4967
}
4968

    
4969
#metadata-overlay-content {
4970
    position: relative;
4971
}
4972

    
4973
.vm-meta .editor .predefined .predefined-meta-key:hover {
4974
    background-color: #4e8eac;
4975
    color: #fff;
4976
}
4977

    
4978
.vm-meta .editor .predefined .predefined-meta-key {
4979
    float: left;
4980
    margin-right: 5px;
4981
    padding: 4px;
4982
    display: block;
4983
    cursor: pointer;
4984
}
4985

    
4986
.vm-meta .editor .predefined {
4987
    background-color: #A6D1E6;
4988
    font-size: 0.9em;
4989
    border-top: 1px solid #ddd;
4990
}
4991

    
4992
.vm-meta .editor input {
4993
}
4994
.vm-meta .editor {
4995
    margin-bottom: 10px;
4996
}
4997

    
4998
.vm-meta .editor .form-actions .form-action {
4999
    min-width: 50px;
5000
}
5001

    
5002
.vm-meta .editor .form-field input.meta-key {
5003
    width: 90px;
5004
}
5005

    
5006
.vm-meta .form-field {
5007
    float: left;
5008
}
5009

    
5010
.vm-meta .form-actions .form-action {
5011
    float: left;
5012
    margin-right: 10px;
5013
    height: 11px;
5014
}
5015

    
5016
.vm-meta .editor .form-actions .cancel {
5017
    margin-right: 0;
5018
}
5019

    
5020
.vm-meta .editor .form-actions {
5021
    float: right;
5022
    margin:0;
5023
    padding:0;
5024
    margin-left: 15px;
5025
    margin-top: 0px;
5026
}
5027

    
5028
.vm-meta .editor {
5029
    background-color: rgba(64, 133, 165, 0.898) !important;
5030
    background-color: #649DB8;
5031
    font-size:0.9em;
5032
}
5033

    
5034
.vm-meta .meta-key-title {
5035
    font-size: 1.3em;
5036
    color: #fff;
5037
    margin-bottom: 10px;
5038
    display: none;
5039
    float: left;
5040
}
5041

    
5042
.vm-meta .editor-content {
5043
    padding: 10px;
5044
}
5045

    
5046
.vm-meta .inner-mask {
5047
    background-color: #fff;
5048
    opacity:0.6;
5049
    position: absolute;
5050
    top:0;
5051
    left:0;
5052
}
5053

    
5054
.vm-meta .editor label {
5055
    float: left;
5056
    color: #fff;
5057
    margin-right: 2px;
5058
    padding-top:4px;
5059
    font-size: 0.9em;
5060
}
5061

    
5062
.vm-meta .editor input {
5063
    border: none;
5064
    width: 170px;
5065
    margin-left: 10px;
5066
    font-size: 0.9em;
5067
    padding: 4px;
5068
}
5069

    
5070
.vm-meta li.create .options-object-cont {
5071
    background-color: #B3C9AD ;
5072
    border-color: #788774;
5073
}
5074
.vm-meta li.create .options-object-cont .value,
5075
.vm-meta li.create .options-object-cont .title {
5076
    color: #fff;
5077
}
5078

    
5079
#createvm-overlay-content {
5080
    padding: 0;
5081
}
5082

    
5083
.overlay-createvm .container {
5084
    width: 584px !important;
5085
}
5086

    
5087
.create-vm .header-step.current {
5088
    font-weight: bold;
5089
}
5090

    
5091
.create-vm .create-step-cont {
5092
    min-height: 240px;
5093
}
5094
.create-vm .create-controls {
5095
    padding: 10px;
5096
}
5097

    
5098
.create-vm ul li {
5099
    cursor: pointer;
5100
    padding: 4px;
5101
}
5102

    
5103
.create-vm ul li.selected {
5104
    background-color: #aaa;
5105
}
5106

    
5107
.cont-toggler {
5108
    background-image: url("./down-arrow.png");
5109
    background-position: right;
5110
    background-repeat: no-repeat;
5111
    background-color: #A1C8DB;
5112
    display: inline-block;
5113
    border-right: 6px solid #A1C8DB;
5114
    padding:2px;
5115
    padding-right: 14px;
5116
    padding-left:0;
5117
    cursor: pointer;
5118
    color: #fff;
5119
    font-size: 0.9em;
5120
}
5121

    
5122
.cont-toggler .label {
5123
    background-color: #98BDCF;
5124
    padding: 2px;
5125
    padding-left: 5px;
5126
    padding-right: 5px;
5127
}
5128

    
5129
.cont-toggler.open {
5130
    background-color: #98BDCF;
5131
    border-color: #98BDCF;
5132
    background-image: url("./up-arrow.png");
5133
}
5134

    
5135
.cont-toggler.open .label {
5136
    background-color: #4085A5;
5137
}
5138

    
5139
.overlay .form label {
5140
    font-color: #444;
5141
    margin-right: 10px;
5142
}
5143

    
5144
.form-field input {
5145
    border: 1px solid #aaa;
5146
    width: 200px;
5147
    padding: 3px;
5148
}
5149

    
5150
.form-actions {
5151
    margin-top: 5px;
5152
    padding-top:5px;
5153
    border-top: 1px solid #64a6c4;
5154
    font-size: 0.8em;
5155
}
5156

    
5157
.form-actions.plain {
5158
    margin-top: 0px;
5159
    padding-top:0px;
5160
    border-top: 0px;
5161
}
5162

    
5163
.form-action {
5164
    float: right;
5165
    min-width: 140px;
5166
    background-color: #FF7F2A;
5167
    border: 1px solid #FF7F2A;
5168
    text-align: center;
5169
    color: #FFFFFF;
5170
    cursor: pointer;
5171
    padding: 4px;
5172
}
5173

    
5174
.form-action:hover {
5175
    background-color: #FF9955;
5176
    color: #FFF;
5177
}
5178

    
5179
.form-action.prev,
5180
.form-action.cancel {
5181
    background-color: #800;
5182
    border: 1px solid #800;
5183
    float: left;
5184
}
5185

    
5186
.form-action.prev:hover,
5187
.form-action.cancel:hover {
5188
    background-color: #CC0000;
5189
    color: #fff;
5190
}
5191

    
5192
.form-action.next,
5193
.form-action.ok {
5194
    background-color: #080;
5195
    border: 1px solid #080;
5196
}
5197

    
5198
.form-action.next:hover,
5199
.form-action.ok:hover {
5200
    background-color: #00aa00;
5201
    color: #fff;
5202
}
5203

    
5204
.form-action .create,
5205
.form-action .submit {
5206

    
5207
}
5208

    
5209
.form-action.in-progress, button.in-progress {
5210
    background-image: url("./icons/indicators/medium/horizontal-progress.gif");
5211
    background-repeat: no-repeat;
5212
    background-position: center center;
5213
    color: transparent;
5214
}
5215

    
5216
#createvm-overlay-content {
5217
    padding: 0;
5218
}
5219

    
5220
.create-vm .image-details.selected .size {
5221
    color: #eee;
5222
}
5223

    
5224
.create-vm .image-details p {
5225
    font-size: 0.8em;
5226
    padding-left: 27px;
5227
    display:block;
5228
}
5229

    
5230
.create-vm .image-details .size {
5231
    margin-top: 2px;
5232
    font-size: 0.8em;
5233
    color: #aaa;
5234
    position: absolute;
5235
    right:5px;
5236
    top: 5px;
5237
}
5238

    
5239
.create-vm .step-cont {
5240
    margin: 15px;
5241
}
5242

    
5243
.create-vm .create-step-cont {
5244
    min-height: 250px;
5245
    float: left;
5246
    width: 584px;
5247
}
5248

    
5249
.create-vm .create-controls {
5250
    padding: 10px;
5251
    border-top: 1px solid #ddd;
5252
}
5253

    
5254
.create-vm .empty {
5255
    font-size: 0.8em;
5256
    color: #444;
5257
}
5258

    
5259
.create-vm h4 {
5260
    color: #5CA1C0;
5261
    margin-bottom: 0.5em;
5262
    font-family: arial;
5263
}
5264
.create-vm ul li {
5265
    cursor: pointer;
5266
    padding: 4px;
5267
    font-size: 0.9em;
5268
}
5269

    
5270
.create-vm ul li.selected {
5271
    background-color: #5CA1C0;
5272
    color: #fff;
5273
}
5274

    
5275
.create-vm .images-list-cont {
5276
    width: 40%;
5277
    float: left;
5278
    padding-left: 3%;
5279
    padding-right: 3%;
5280
}
5281

    
5282
.create-vm p.desc {
5283
    font-size: 0.9em;
5284
    color: #888;
5285
    margin-bottom: 10px;
5286
}
5287

    
5288
.create-vm li.role .values .val:hover {
5289
    background-color: #eee;
5290
}
5291
.create-vm li.role .values .val.selected,  .create-vm li.role .values .val.selected:hover {
5292
    color: #fff;
5293
    background-color: #5CA1C0;
5294
}
5295

    
5296
.create-vm .images-filter-cont, .create-vm .flavors-predefined-cont {
5297
    width: 18%;
5298
    padding-right: 4%;
5299
    float:left;
5300
    border-right: 1px solid #A1C8DB;
5301
    overflow: auto;
5302
}
5303

    
5304
.create-vm .flavor-options-cont {
5305
    width: 74%;
5306
    float: left;
5307
    margin-left: 20px;
5308
}
5309

    
5310
.create-vm .flavor-options-cont .flavor-options li:hover {
5311
    background-image:-webkit-linear-gradient(top, #E8F4FA, #D1E7F0);
5312
    background-image:-o-linear-gradient(top, #E8F4FA, #D1E7F0);
5313
    background-image:-moz-linear-gradient(top, #E8F4FA, #D1E7F0);
5314
    background-image:linear-gradient(top, #E8F4FA, #D1E7F0);
5315
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8F4FA', endColorstr='#D1E7F0', GradientType=0);
5316
}
5317

    
5318
.create-vm .flavor-options-cont .flavor-options li.disabled * {
5319
    color: #eee !important;
5320
}
5321

    
5322
.create-vm .flavor-options-cont .flavor-options li.disabled {
5323
    background-image:linear-gradient(top, #aaa, #ddd);
5324
    background-image:-webkit-linear-gradient(top, #aaa, #ddd);
5325
    background-image:-o-linear-gradient(top, #aaa, #ddd);
5326
    background-image:-moz-linear-gradient(top, #aaa, #ddd);
5327
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#dddddd', GradientType=0);
5328
}
5329

    
5330
.create-vm .flavor-options-cont .flavor-options li.selected {
5331
    background-color: #FF9955;
5332
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5333
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5334
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5335
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5336
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9955', endColorstr='#E88B4D', GradientType=0);
5337
    border: 1px solid #C97943;
5338
}
5339

    
5340
.create-vm .predefined-list li.disabled {
5341
    color: #ddd !important;
5342
}
5343

    
5344
.create-vm .flavor-options-cont .flavor-options li {
5345
    display: block;
5346
    float: left;
5347
    margin-right: 10px;
5348
    padding: 10px 15px;
5349
    border: 1px solid #aaa;
5350
    background-image:-webkit-linear-gradient(top, #D1E7F0, #E8F4FA);
5351
    background-image:-o-linear-gradient(top, #D1E7F0, #E8F4FA);
5352
    background-image:-moz-linear-gradient(top, #D1E7F0, #E8F4FA);
5353
    background-image:linear-gradient(top, #D1E7F0, #E8F4FA);
5354
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1E7F0', endColorstr='#E8F4FA', GradientType=0);
5355
}
5356

    
5357
.create-vm .flavor-options-cont .flavor-options {
5358
    margin-bottom: 25px;
5359
}
5360

    
5361
.create-vm .flavor-options .metric {
5362
    font-size: 0.8em;
5363
    margin-left: 2px;
5364
}
5365

    
5366
.create-vm .flavor-options span.title {
5367
    color: #444;
5368
}
5369

    
5370
.create-vm .flavor-options span.desc {
5371
    display: block;
5372
    color: #aaa;
5373
    font-weight: normal;
5374
    font-size: 0.8em;
5375
    float: right;
5376
    margin-top: 4px;
5377
}
5378

    
5379
.create-vm .flavor-options .selected .value {
5380
    color: #FFF;
5381
}
5382

    
5383
.create-vm .flavor-options .value {
5384
    font-weight: bold;
5385
    color: #5CA1C0;
5386
}
5387

    
5388
.create-vm .flavor-options-cont h4 {
5389
    border-bottom: 1px solid #A1C8DB;
5390
    padding-bottom: 5px;
5391
}
5392

    
5393
.create-vm .images-info-cont {
5394
    width: 28%;
5395
    padding-left: 3%;
5396
    float: left;
5397
    border-left: 1px solid #A1C8DB;
5398
}
5399

    
5400
.create-vm .images-info-cont h4, .create-vm .vm-confirm .param h4{
5401
    color: #FF9955;
5402
    margin-bottom: 1em;
5403
    font-size: 1.2em;
5404
}
5405

    
5406
.create-vm .images-info-cont span.title {
5407
    color: #4085A5;
5408
    display: block;
5409
    margin-bottom: 2px;
5410
    font-size: 0.8em;
5411
}
5412

    
5413
.create-vm .type-filter li {
5414
    font-size: 0.8em;
5415
    font-weight: bold;
5416
    padding: 4px;
5417
    margin-bottom: 0px;
5418
    
5419
}
5420

    
5421
.create-vm .images-list .image-details:hover {
5422
    background-color: #eee;
5423
}
5424

    
5425
.create-vm .images-list .image-details.selected:hover {
5426
    background-color: #5CA1C0;
5427
}
5428

    
5429
.create-vm .images-list .image-details.selected {
5430
    /*font-weight: bold;*/
5431
}
5432

    
5433
.create-vm .images-list .image-details {
5434
    padding: 6px;
5435
    margin-bottom:1px;
5436
    position: relative;
5437
}
5438

    
5439
.create-vm .images-list .image-details img {
5440
    vertical-align: middle;
5441
    margin-right: 10px;
5442
}
5443

    
5444
.create-vm .images-info-cont .image-detail:last-child p {
5445
    border-bottom: none;
5446
}
5447

    
5448
.create-vm .images-info-cont h4 img {
5449
    vertical-align: middle;
5450
    margin-right: 7px;
5451
    margin-bottom: 5px;
5452
}
5453

    
5454
.create-vm .images-info-cont .description p {
5455
    font-size: 0.8em;
5456
}
5457

    
5458
.create-vm .images-info-cont p {
5459
    margin-bottom: 7px;
5460
    font-size: 0.9em;
5461
    border-bottom: 1px solid #A1C8DB;
5462
    padding-bottom: 7px;
5463
}
5464

    
5465
.create-vm .step-header {
5466
    padding-bottom:0;
5467
    position: relative;
5468
}
5469

    
5470
.create-vm .step-header .header-step .info span.subtitle {
5471
    font-size: 1.2em;
5472
    color: #fff;
5473
    font-weight: bold;
5474
}
5475

    
5476
.create-vm .step-header .header-step .info span {
5477
    float: none;
5478
    text-align: right;
5479
}
5480

    
5481
.create-vm .step-header .header-step .info {
5482
    position: absolute;
5483
    right: 15px;
5484
    top: 20px;
5485
    font-size: 0.8em;
5486
}
5487

    
5488
.create-vm .step-header .header-step span {
5489
    float: left;
5490
    display: block;
5491
}
5492

    
5493
.create-vm .steps-container {
5494
    width: 2000em;
5495
}
5496

    
5497
.create-vm .step-header .header-step .title {
5498
    margin-top: 20px;
5499
    font-size: 1em;
5500
    margin-left: 10px;
5501
}
5502

    
5503
#createvm-overlay-content {
5504
    width: 584px;
5505
    overflow: hidden;
5506
}
5507

    
5508
.create-vm .steps-history .steps-history-cont.current .title {
5509
    display: block;
5510
    top: 23px;
5511
    left: 39px;
5512
    font-size: 1.2em;
5513
    color: #ffffff;
5514
    font-weight: bold;
5515
    font-family: 'Ubuntu' !important;
5516
}
5517

    
5518
.create-vm .steps-history .steps-history-cont.current .subnum {
5519
    display: none;
5520
    float: none;
5521
    font-size: 0.9em;
5522
    font-family: 'Ubuntu' !important;
5523
}
5524

    
5525
.create-vm .steps-history .steps-history-cont.current .subtitle,
5526
.create-vm .steps-history .steps-history-cont.current .description {
5527
    font-family: 'Ubuntu' !important;
5528
}
5529

    
5530
.create-vm .steps-history .steps-history-cont.current .info {
5531
    display: block;
5532
    font-family: 'Ubuntu' !important;
5533
}
5534

    
5535
.create-vm .steps-history .steps-history-cont.completed .title,
5536
.create-vm .steps-history .steps-history-cont.completed .num {
5537
    color: #A1C8DB;
5538
}
5539

    
5540
.create-vm .steps-history .steps-history-cont.completed {
5541
    background-color: #4085A5;
5542
    color: #fff;
5543
    cursor: pointer;
5544
}
5545

    
5546
.create-vm .steps-history .steps-history-cont.completed .steps-history-step {
5547
    background-image: url("./check.png");
5548
}
5549

    
5550
.create-vm .steps-history .steps-history-cont.current .steps-history-step {
5551
    width: 380px;
5552
}
5553

    
5554
.create-vm .steps-history .steps-history-cont.current .num {
5555
    color: #fff;
5556
}
5557

    
5558
.create-vm .steps-history .steps-history-cont.current .info {
5559
    color: #4085A5;
5560
    font-size: 0.8em;
5561
}
5562

    
5563
.create-vm .steps-history .steps-history-cont.current {
5564
    background-color: #A1C8DB;
5565
    color: #fff;
5566
    width: 462px;
5567
}
5568

    
5569
.create-vm .steps-history-step {
5570
    padding: 4px;
5571
    padding-left: 10px;
5572
    font-size: 1em;
5573
    font-family: 'Ubuntu' !important;
5574
    margin-right: 5px;
5575
    padding-top: 12px;
5576
    background-position: right 30px;
5577
    background-image: none;
5578
    background-repeat: no-repeat;
5579
}
5580

    
5581
.create-vm .steps-history {
5582
    background-color: #4085A5;
5583
}
5584

    
5585
.create-vm .steps-history .steps-history-cont.last {
5586
    border-right: none;
5587
}
5588

    
5589
.create-vm .steps-history .steps-history-cont .num {
5590
    margin-left: 5px;
5591
    margin-top: -10px;
5592
    padding-bottom: 10px;
5593
}
5594

    
5595
.create-vm .steps-history .steps-history-cont .title {
5596
    display: none;
5597
    position: absolute;
5598
    bottom: 0px;
5599
    text-align: center;
5600
    padding-bottom: 2px;
5601
    left:0;
5602
    width: 60px;
5603
    margin-left:0;
5604
    margin-top:0;
5605
    font-size: 0.8em;
5606
}
5607

    
5608
.create-vm .steps-history .steps-history-cont .subnum,
5609
.create-vm .steps-history .steps-history-cont .info {
5610
    display: none;
5611
}
5612

    
5613
.create-vm .steps-history .steps-history-cont {
5614
    height: 70px;
5615
    width: 60px;
5616
    float: left;
5617
    color: #fff;
5618
    border-right: 1px solid #A1C8DB;
5619
    color: #A1C8DB;
5620
    background-color: #4085A5;
5621
    background-position: center right;
5622
    background-image: none;
5623
    background-repeat: no-repeat;
5624

    
5625
    -webkit-transition: background-color .15s ease-in;
5626
    -o-transition: background-color .15s ease-in;
5627
    -moz-transition: background-color .15s ease-in;
5628
    transition: background-color .15s ease-in;
5629

    
5630
    border-bottom: 1px solid #aaa;
5631
}
5632

    
5633
.create-vm .step-header .header-step .num {
5634
    color: #225871;
5635
    font-size: 4em;
5636
    margin-bottom: -5px;
5637
    font-family: 'Ubuntu';
5638
    font-weight: normal !important;
5639
}
5640

    
5641
.create-vm .step-header .header-step {
5642
    color: #;
5643
    margin-bottom: -6px;
5644
    width: 25%;
5645
    padding-left: 0%;
5646
    display: block;
5647
    float: left;
5648
}
5649

    
5650
.create-vm .step-header .header-step.current {
5651
    color: #387693;
5652
}
5653

    
5654
.create-vm .image-filters-title {
5655
    margin-top: 1em;
5656
    margin-bottom: 0.5em;
5657
}
5658

    
5659
.create-vm .create-step-cont span.clear {
5660
    font-size: 0.8em;
5661
    font-weight: bold;
5662
    color: #A1C8DB;
5663
    display: block;
5664
}
5665

    
5666
.create-vm .category-filters li {
5667
    float:left;
5668
    display: block;
5669
    padding: 4px;
5670
    background-color: #eee;
5671
    margin-right: 5px;
5672
    font-size: 0.9em;
5673
    margin-bottom: 5px;
5674
}
5675

    
5676
.create-vm .content-cont {
5677
    height: 340px;
5678
    overflow: auto;
5679
}
5680

    
5681
.confirm-cont {
5682
    height: 250px;
5683
}
5684

    
5685
.create-vm .vm-confirm .rename input.rename-field {
5686
    font-size: 1.4em;
5687
    padding: 5px;
5688
    width: 93%;
5689
    padding-left: 30px;
5690
    background-position: 7px center;
5691
    background-repeat: no-repeat;
5692
}
5693

    
5694
.create-vm .vm-confirm .rename label {
5695
    display: block;
5696
}
5697

    
5698
.create-vm .vm-confirm .confirm-conts {
5699
    margin-top: 20px;
5700
}
5701

    
5702
.create-vm .vm-confirm .confirm-cont {
5703
    width: 30%;
5704
    margin-right: 2%;
5705
    border-right: 1px solid #A1C8DB;
5706
    float: left;
5707
}
5708

    
5709
.create-vm .vm-confirm .confirm-cont ul li .value {
5710
    float: right;
5711
    padding-top: 2px;
5712
    display: block;
5713
    width: 90px;
5714
    text-align: right;
5715
}
5716

    
5717
.create-vm .vm-confirm .confirm-cont ul li.image-description .value,
5718
.create-vm .vm-confirm .confirm-cont ul li.image-name .value {
5719
    float: none;
5720
    width: auto;
5721
    text-align:left;
5722
    width: auto;
5723
}
5724

    
5725
.create-vm .vm-confirm .confirm-cont ul li {
5726
    padding:0;
5727
    margin:0;
5728
    margin-bottom: 5px;
5729
    border-bottom: 1px solid #EEE;
5730
    padding-bottom: 7px;
5731
    margin-right: 10px;
5732
}
5733

    
5734
.create-vm .vm-confirm .confirm-cont.meta h4 {
5735
    margin-right: 0;
5736
}
5737

    
5738
.create-vm .vm-confirm .confirm-cont.meta {
5739
    margin-right:0;
5740
    border-right: none;
5741
    width: 195px;
5742
}
5743

    
5744
.create-vm .confirm-cont > h4 {
5745
    font-size: 1.2em;
5746
    margin-right: 10px;
5747
    border-bottom: 1px solid #A1C8DB;
5748
    padding-bottom: 5px;
5749
    color: #387693;
5750
}
5751

    
5752
.create-vm .confirm-cont .param.image-name {
5753
    margin-bottom: 0 !important;
5754
    border-bottom: none !important;
5755
}
5756

    
5757
.create-vm .confirm-cont .param h4 {
5758
    margin-bottom: 0px !important;
5759
    font-size: 1.1em !important; 
5760
}
5761

    
5762
.create-vm .confirm-cont .param {
5763
    margin-bottom: 7px !important;
5764
}
5765

    
5766
.create-vm .confirm-cont .value {
5767
    font-weight: bold;
5768
}
5769

    
5770
.create-vm .confirm-cont .param .value {
5771
    font-size: 0.9em;
5772
}
5773

    
5774
.create-vm .confirm-cont .param .title {
5775
    color: #387693;
5776
}
5777

    
5778
.create-vm .confirm-cont .image-description {
5779
    margin-left:0;
5780
}
5781

    
5782
.create-vm .confirm-cont .image-description .value {
5783
    font-weight: normal;
5784
    margin-left: 0 !important;
5785
}
5786

    
5787
.create-vm .confirm-cont .image-description .title {
5788
    display: none;
5789
    font-size: 0.8em;
5790
}
5791

    
5792
.create-vm .confirm-cont.meta .values span {
5793
    display:block;
5794
    float: left;
5795
    margin-right: 4px;
5796
    border: 1px solid #eee;
5797
    padding:3px;
5798
    margin-bottom: 4px;
5799
    font-size: 0.9em;
5800
}
5801

    
5802
.create-vm .confirm-cont.meta .key {
5803
    font-weight: bold;
5804
    font-size: 0.9em;
5805
    display: block;
5806
    margin-bottom: 5px;
5807
}
5808

    
5809
.create-vm .meta input {
5810
    font-size: 0.8em;
5811
}
5812

    
5813
.vm-connect .connect-cont {
5814
    margin-bottom: 20px;
5815
    border-bottom: 1px solid #A1C8DB;
5816
    padding-bottom: 20px;
5817
}
5818

    
5819
.vm-connect .connection-info {
5820
    padding-bottom: 0px;
5821
    margin-bottom: 0;
5822
    border-bottom: none;
5823
}
5824

    
5825
.vm-connect .connection-info .connect a {
5826
    color: #fff;
5827
}
5828

    
5829
.vm-connect .connection-info .connect {
5830
    background-color: #387693;
5831
    color: #fff;
5832
    padding: 10px;
5833
    font-size: 1.2em;
5834
    text-align: center;
5835
}
5836

    
5837
.clip-copy {
5838
    display: block;
5839
    width: 20px;
5840
    height: 20px;
5841
    position: absolute;
5842
    border: 1px solid #387693;
5843
    background-image: url("./clipboard.png");
5844
    background-repeat: no-repeat;
5845
    background-position: center;
5846
    cursor: pointer;
5847
    background-color: #A1C8DB;
5848
}
5849

    
5850
.password-cont .clip-copy { right: 10px; top: 8px;}