Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / static / snf / css / main.css @ ddb7229d

History | View | Annotate | Download (138.1 kB)

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

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

    
26
body#app {
27
    background-position: 0px 34px; 
28
}
29

    
30
a, a:hover, a:active, a:focus, div:focus, span:focus, li:focus {
31
    outline: none;
32
}
33

    
34
pre {
35
    font-family: monospace;
36
}
37

    
38
h4.error .title {
39
  color: red !important;
40
}
41
#okeanos-image {
42
    position: absolute;
43
    bottom: -0px;
44
    right: 0;
45
    z-index:0;
46
}
47

    
48
#container {
49
    position: relative;
50
        margin:0 auto;
51
        width: 100%;
52
        background: transparent;
53
    z-index: 1;
54
}
55

    
56
#header {
57
    height: 93px;
58
    background: url("../images/header-bg.png") repeat-x scroll 0 0 transparent;
59
    margin: 0 auto;
60
    width: 700px;
61
    text-align: left;
62
    position: relative;
63
    z-index: 50;
64
}
65

    
66
#content {
67
    padding-bottom: 10px;
68
    width: 100%;
69
}
70

    
71
div#wrapper {
72
    width: 700px;
73
    margin: 0em auto;
74
    text-align: left;
75
}
76

    
77
#footer a {
78
    color: #fff;
79
}
80

    
81
#footer .software .version {
82
    font-weight: bold;
83
}
84

    
85
#footer .software {
86
    font-size: 0.6em;
87
    margin-top: 7px;
88
    color: #fff;
89
}
90

    
91
#footer {
92
    height: 80px;
93
    background-color: #4085A5;
94
    width:100%;
95
}
96

    
97
#footer-container {
98
    height: 80px;
99
    width: 100%;
100
    left:0;
101
    z-index:10;
102
}
103

    
104
#footer div.grnet-sign {
105
    margin-top:10px;
106
}
107

    
108
#footer div.grnet-sign a{
109
    color: #72ADC8;
110
}
111

    
112
#footer div.grnet-sign a:hover {
113
    color: #FFFFFF;
114
}
115

    
116
ol, ul {
117
    list-style: none;
118
}
119

    
120
blockquote, q {
121
    quotes: none;
122
}
123

    
124
blockquote:before, blockquote:after,
125
q:before, q:after {
126
    content: '';
127
    content: none;
128
}
129

    
130
/* remember to define focus styles! */
131
:focus {
132
    outline: 1px dotted #87AADE;
133
}
134

    
135
/* remember to highlight inserts somehow! */
136
ins {
137
    text-decoration: none;
138
}
139

    
140
del {
141
    text-decoration: line-through;
142
}
143

    
144
/* tables still need 'cellspacing="0"' in the markup */
145
table {
146
    border-collapse: collapse;
147
    border-spacing: 0;
148
}
149

    
150
h5 {
151
    font-weight: normal;
152
    margin-bottom:3px;
153
}
154

    
155
.tab-name, 
156
.machine-container .name,
157
h5.namecontainer span,
158
.single .machine-detail.title {
159
    font-family: 'Ubuntu', sans-serif;
160
}
161

    
162
.create-container a {
163
    font-family: 'Open Sans', sans-serif;
164
}
165

    
166
/* root element for tabs  */
167
.tab-name {
168
    background-color: #5CA1C0;
169
    color: #FFFFFF;
170
    float: right;
171
    font-size: 150%;
172
    height: 31px;
173
    text-align: right;
174
    padding-right: 15px;
175
    width: 170px;
176
}
177

    
178
.tab-separator {
179
    background-color: white;
180
    float: left;
181
    width: 2px;
182
    height: 23px;
183
    margin-top: 4px;
184
}
185

    
186
ul.css-tabs {
187
    padding: 0;
188
    height:31px;
189
    background-color: #5CA1C0;
190
}
191

    
192
ul.css-tabs .secondary {
193
    position:relative;
194
}
195

    
196
/* single tab */
197
ul.css-tabs li {
198
    float:left;
199
    padding:0;
200
    list-style-type:none;
201
}
202

    
203
ul.css-tabs .current {
204
    background: #4085A5;
205
}
206

    
207
/* link inside the tab. uses a background image */
208
ul.css-tabs a {
209
    float:left;
210
    display:block;
211
    text-decoration:none;
212
    color:#d2d2d2;
213
    position:relative;
214
    outline:0;
215
    padding: 4px 25px 0;
216
    height: 27px;
217
}
218

    
219
ul.css-tabs a:hover {
220
    background: #74AEC9;
221
}
222

    
223
/* selected tab */
224
ul.css-tabs a.current,
225
ul.css-tabs a.active {
226
    cursor:default;
227
    background: #4085A5;
228
}
229

    
230
/* tab pane */
231
div.css-panes {
232
/*    border-top: 10px solid #87aade;
233
    border-bottom: 10px solid #87aade;  */
234
    background: transparent;
235
}
236

    
237
.css-panes > div.pane {
238
    display:none;
239
}
240

    
241
.panes-menu {
242
    height: 30px;
243
    margin-bottom: 10px;
244
}
245
/* CSS3 border radius for various elements. yea - CSS isn't perfect */
246
.rounded, #sheet input, .error-rounded {
247
    border-radius: 5px;
248
    -webkit-border-radius: 5px;
249
    -moz-border-radius: 5px;
250
    -o-border-radius: 5px;
251
    -khtml-border-radius: 5px;
252
}
253

    
254
/*validation error message*/
255
/*.error {*/
256
    /*background-color:#E8FF6D;*/
257
    /*padding:4px;*/
258
    /*-webkit-box-shadow: #000 0 0 9pt;*/
259
    /*-moz-box-shadow: #000 0 0 9pt;*/
260
/*}*/
261
.error {
262
    color: #f00 !important;
263
}
264

    
265
/* nested arrow inside error message. It's 100% CSS. No images. */
266
.error em {
267
    border: 10px solid;
268
    border-color: #E8FF6D transparent transparent;
269
    bottom: -17px;
270
    display: block;
271
    height: 0;
272
    left: 10px;
273
    position: absolute;
274
    width: 0;
275
}
276

    
277
/* input field that caused validation error */
278
.invalid {
279
    background-color: rgba(221, 233, 255, 0.898) !important;
280
}
281

    
282
#beforecreate {
283
    background-color: #FF9955;
284
    height: 32px;
285
    width: 13px;
286
}
287

    
288
.pane-top {
289
    height: 70px;
290
    position: relative;
291
    background: #EFF7FA 0px 0px;
292
    /*margin-bottom: -2px;*/
293
}
294

    
295
#machines-pane-top.empty {
296
    background: transparent;
297
}
298

    
299
#beforecreate {
300
    border-left: 16px solid #efefef;
301
    margin-left: -16px;
302
}
303

    
304
.create-container {
305
    line-height: 4em;
306
}
307

    
308
#createcontainer a {
309
}
310

    
311
#create {
312
    background-color: #FF7F2A;
313
    color: #000;
314
    cursor: pointer;
315
    text-decoration: none;
316
    font-size:100%;
317
}
318

    
319
#create:hover {
320
    background-color: #FF9955;
321
}
322

    
323
#console-header {
324
    height: 79px;
325
    margin-bottom:15px;
326
    background: url("../images/header-bg.png") repeat-x scroll 0 0 #FFFFFF;
327
}
328

    
329
.header-logo {
330
    padding-top: 28px;
331
}
332

    
333
.header-logo img {
334
    max-width:100%;
335
    max-height:64px;
336
}
337

    
338
div#footer-text a {
339
    color: #FFFFFF;
340
    text-decoration: none;
341
}
342

    
343
div#footer-text{
344
    color: #FFFFFF;
345
    font-size: 75%;
346
    padding-top: 10px;
347
}
348

    
349
#footer-bg {
350
    background: url("../images/footer-bg.png") no-repeat scroll 0 0 #4085A5;
351
    background-position:right;
352
}
353

    
354
.modal {
355
    background-color:#fff;
356
    display:none;
357
    width:30em;
358
    padding:1em;
359
    text-align:left;
360
}
361

    
362
/* server wizard scrollable root element and network wizard */
363
#wizard, #networks-wizard {
364
    font-size:75%;
365
    height:425px;
366
    width:453px;
367
    overflow:hidden;
368
    position:absolute !important;
369
}
370

    
371
/* scrollable items */
372
#wizard .items {
373
    width:20000em;
374
    clear:both;
375
    position:absolute;
376
    display:block;
377
    padding: 0;
378
    margin: 0;
379
    border:none;
380
    background:none;
381
}
382

    
383
/* single item */
384
#wizard .page, #networks-wizard div.container {
385
    padding: 0px 40px 20px 15px;
386
    width:447px;
387
    float:left;
388
    display:block;
389
    border:none;
390
    background-color: transparent;
391
}
392

    
393
#networks-wizard div.container {
394
    background-color: #ECF4F8;
395
    width:400px;
396
    height: 180px;
397
    margin-bottom:50px;
398
}
399

    
400
/* title */
401
#wizard h2, #networks-wizard h2 {
402
    color: #FF7B24;
403
    font-size: 100%;
404
    font-style: italic;
405
    font-weight: bold;
406
    margin-left: 37px;
407
    margin-top: 17px;
408
}
409

    
410
#networks-wizard h2 {
411
    margin-top: 15px;
412
}
413

    
414
#wizard li {
415
    margin-bottom:1.2em;
416
}
417

    
418
#wizard .pane li {
419
    margin: 0;
420
}
421

    
422
#wizard label {
423
    font-size:120%;
424
    display:block;
425
    clear: both;
426
}
427

    
428
#wizard label strong {
429
    position:relative;
430
    top:-1px;
431
    font-size: 80%;
432
    font-weight: normal;
433
}
434

    
435
#wizard label em {
436
    font-size:75%;
437
    color:#666;
438
    font-style:normal;
439
}
440

    
441
#wizard .text {
442
    width: 270px;
443
    padding: 5px;
444
    margin-top: 10px;
445
    border: 1px solid #ccc;
446
    color: #456;
447
    letter-spacing: 1px;
448
}
449

    
450
#wizard select {
451
    border:1px solid #ccc;
452
    width:94%;
453
    padding:4px;
454
    display: none;
455
}
456

    
457
#wizard .double label {
458
    width:50%;
459
    float:left;
460
}
461

    
462
#wizard .double .text {
463
    width:93%;
464
}
465

    
466
#wizard .clearfix {
467
    clear:left;
468
    padding-top:10px;
469
}
470

    
471
#wizard .right {
472
    float:right;
473
}
474

    
475
#wizard .error {
476
    border:1px solid red;
477
}
478

    
479
#wizard a:hover div.image {
480
    background-color: #C5DEE9;
481
}
482

    
483
.selecteddiv {
484
    background-color: #C5DEE9 !important;
485
}
486

    
487
#wizard label a:hover strong {
488
    color: black;
489
}
490

    
491
#wizard div.image span.size {
492
    font-size: 75%;
493
    color: #666;
494
}
495

    
496
#wizard div.image .radio {
497
    float: left;
498
    margin-top: 10px;
499
}
500

    
501
#wizard div.image span.image-id, #wizard div.image span.description {
502
    font-size: 75%;
503
    color: #666;
504
    font-weight: normal;
505
    display:inline;
506
}
507

    
508
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
509
    color: black;
510
}
511

    
512
#wizard .cost {
513
    color: #79A4C1;
514
    margin-top: 40px;
515
    clear:both;
516
    margin-left: 15px;
517
    font-size: 95%;
518
}
519

    
520
#wizard #status {
521
    height: 50px;
522
    background-color: #4085A5;
523
}
524

    
525
#wizard .headernumber {
526
    font-size: 410%;
527
}
528

    
529
#wizard .headerbody {
530
    font-size: 120%;
531
    font-weight: normal;
532
    display: inline;
533
    top: -15px;
534
    position: relative;
535
}
536

    
537
#wizard .first {
538
    left: -10px;
539
}
540

    
541
#wizard .checked {
542
    color: #64a6c4 !important;
543
}
544

    
545
#wizard .li-2 {
546
    margin-top: -1px !important;
547
}
548

    
549
#wizard .img-check {
550
    margin-bottom: 8px;
551
    margin-left: -8px;
552
}
553

    
554
#wizard .li-1 .img-check {
555
    margin-left: 2px;
556
}
557

    
558
#wizard .topruler, #networks-wizard .topruler, #wizard .bottomruler, #networks-wizard .bottomruler {
559
    background-color: #CDE2EC;
560
    color: #CDE2EC;
561
    border: 0 none;
562
    height: 4px;
563
    margin-left: -1px;
564
    width: 447px;
565
    margin-bottom: 6px;
566
    margin-top: 4px;
567
}
568

    
569
#wizard .bottomruler, #networks-wizard .bottomruler {
570
    margin-top:6px;
571
}
572

    
573
#networks-wizard .topruler, #networks-wizard .bottomruler {
574
    width: 455px;
575
    float: left;
576
}
577

    
578
#wizard #cancel, #networks-wizard .cancel {
579
    background-color: #4085A5;
580
    border-color: #4085A5;
581
    text-align: center !important;
582
}
583

    
584
#wizard #cancel:hover, #networks-wizard .cancel:hover {
585
    background-color: #7DB4CD;
586
    border-color: #7DB4CD;
587
}
588

    
589
#wizard #start, #networks-wizard .create {
590
    text-align: center;
591
    background-color: #FF7F2A;
592
    border-color: #FF7F2A;
593
}
594

    
595
:focus {
596
    outline: none;
597
    -moz-outline-style: none;
598
}
599

    
600
#wizard .img-next {
601
    margin: 0 -4px -1px 8px;
602
}
603

    
604
#wizard .img-prev {
605
    margin: 0 8px -1px -4px;
606
}
607

    
608
#networks-wizard .create {
609
    float:right;
610
    width: 140px;
611
}
612

    
613
.overlay-networks-create .form-action {
614
  float: left;
615
}
616

    
617
.overlay-networks-create .fixpos {
618
  margin-top: 3px;
619
}
620

    
621
.overlay-networks-create .col-fields.bordered {
622
  border-bottom: 1px solid #CCC;
623
  margin-bottom: 10px;
624
  padding-bottom: 10px;
625
}
626

    
627
.overlay-networks-create .col-fields {
628
  margin-bottom: 10px;
629
}
630

    
631
form .fields-desc {
632
  font-size: 0.8em !important; 
633
  margin: 5px 0;
634
  padding-bottom: 0 !important;
635
}
636

    
637
.overlay-networks-create form select {
638
  padding: 1px;
639
}
640

    
641
.overlay-networks-create #network-create-subnet-custom {
642
  width: 125px;
643
}
644

    
645
.overlay-networks-create .col-fields .form-field {
646
  float: left;
647
  margin-right: 20px;
648
}
649

    
650
.overlay-networks-create .col-fields .right-field {
651
  float: right;
652
  width: 210px;
653
  margin-right: 0px;
654
}
655

    
656
.overlay-networks-create .use-dhcp {
657
  width: auto;
658
}
659

    
660
#wizard #start:hover, #networks-wizard .create:hover {
661
    background-color: #FF9651;
662
    border-color: #FF9651;
663
}
664

    
665
#wizard .separator-end {
666
    position: absolute;
667
    background-color: #387693;
668
    height: 5px;
669
    margin-left: -14px;
670
    margin-top: 382px;
671
    width: 550px;
672
}
673

    
674
.page ul {
675
    height: 270px;
676
    overflow: auto;
677
}
678

    
679
.panes ul.pane {
680
    height: 220px;
681
}
682

    
683
#wizard #tabscontainer {
684
    background-color: #CDE2EC;
685
    height: 20px;
686
    width: 448px;
687
}
688

    
689
.page ul.tabs {
690
    overflow: hidden;
691
    height: auto;
692
    margin-bottom: -1px;
693
    margin-top: -1px;
694
}
695

    
696
.page ul.tabs li {
697
    float: right;
698
    margin: 0 0.2em;
699
}
700

    
701
#status li {
702
    float: left;
703
    color: #387693;
704
    padding: 0 1px 0 37px;
705
    bottom: 0px;
706
}
707

    
708
#status li.active .headernumber {
709
    color: #FFFFFF;
710
}
711

    
712
#status li.active .headerbody {
713
    color: #FFFFFF;
714
}
715

    
716
div.image-container {
717
    border-bottom: 1px solid #CCCCCC;
718
    margin-left: 10px;
719
    margin-right: 10px;
720
}
721

    
722
#page2-container {
723
    background-color: #ECF4F8;
724
    height: 193px;
725
    margin-top: 3px;
726
    padding-top: 25px;
727
}
728

    
729
#page3-container {
730
    background-color: #ECF4F8;
731
    height: 245px;
732
    margin-bottom: 32px;
733
    padding-left: 50px;
734
}
735

    
736
/* slider root element */
737
.slider {
738
    border: 1px solid #666;
739
    cursor: pointer;
740
    display: inline !important;
741
    float: left;
742
    margin: 5px 0 20px 10px;
743
    position: relative;
744
    width: 250px;
745
}
746

    
747
.sliders {
748
    float:left;
749
    width: 40px;
750
    margin-left: 10px;
751
    margin-top: 3px;
752
}
753

    
754
.units {
755
    padding-left:10px;
756
}
757

    
758
.slider-container {
759
    padding-bottom: 15px;
760
    margin-left: 5px;
761
}
762

    
763
/* drag handle */
764
.handle {
765
    -moz-box-shadow: 0 0 2px #000000;
766
    background: url("../images/h30.png") repeat-x scroll 0 0 #FFFFFF;
767
    border: 1px solid #000000;
768
    cursor: move;
769
    display: block;
770
    height: 10px;
771
    margin-top: -8px;
772
    position: absolute;
773
    width: 8px;
774
}
775

    
776
/* progress bar (enabled with progress: true) */
777
.progress {
778
    height: 3px;
779
    background-color: #387693;
780
}
781

    
782
/* the input field */
783
.range {
784
    border: 1px solid #387693;
785
    float: left;
786
    font-size: 100%;
787
    margin: -3px 0 0 15px;
788
    padding: 2px 5px 2px 0;
789
    text-align: right;
790
    width: 50px;
791
}
792

    
793
.selectedrange {
794
    border-color: #5599FF;
795
}
796

    
797
#credits-indicator {
798
    background-color: #ECF4F8;
799
    float: none;
800
    margin: 0 0 0 10px;
801
    border: 1px solid #387693;
802
    color: #387693;
803
}
804

    
805
/* machines */
806
.machine-container {
807
    position:relative;
808
}
809

    
810
.icon .machine-container.last .machine-data-cont, .machine-container:last-child .machine-data-cont {
811
    margin-bottom:0;
812
    padding-bottom: 0;
813
    border-bottom: none;
814
}
815

    
816
.icon .machine-container.last .machine-data, .machine-container:last-child .machine-data {
817
    border-bottom: none;
818
}
819

    
820
.icon .machine-container .subtitle {
821
    font-size: 0.70em;
822
    color: #222;
823
    line-height: 23px;
824
    height: 23px;
825
    margin-top: -5px;
826
}
827

    
828
.icon .machine-container .subtitle {
829
    
830
}
831

    
832
.icon .machine-container .info {
833
    margin-top: 2px;
834
    height: 17px;
835
}
836

    
837
.icon .machine-container .building-progress {
838
    vertical-align: top;
839
}
840

    
841
.icon .build-progress {
842
    margin-left: -3px;
843
}
844

    
845
#machinesview .build-progress .message {
846
  padding: 3px;
847
}
848

    
849
#machinesview .build-progress .btn:hover {
850
  background-color: #387693;
851
}
852

    
853
#machinesview .column1 .build-progress .btn {
854
    margin-top: 5px;
855
    display: inline-block;
856
}
857

    
858
#machinesview .build-progress .btn {
859
    cursor: pointer;
860
    background-color: #5e1616;
861
    color: #FFF;
862
    padding: 3px;
863
}
864

    
865
.ip-version-label {
866
    font-size: 0.8em;
867
    padding: 0.3em;
868
    background-color: #C4DDE9;
869
    color: #000;
870
}
871

    
872
.icon .machine-data {
873
    width: 520px;
874
    float: left;
875
    background-color: transparent;
876
}
877

    
878
.icon .machine-info {
879
    padding: 20px 0;
880
}
881

    
882
.icon .machine-details .name {
883
    height: 24px;
884
}
885

    
886
.icon .machine-connect {
887
    width: 80px;
888
    float: left;
889
}
890

    
891
.icon .machine-details {
892
    width: 310px;
893
    float: left;
894
    margin-top: -5px;
895
}
896

    
897
.icon .state {
898
    font-size: 98%;
899
    width: 120px;
900
    margin-right: 10px;
901
    float: left;
902
    height: 55px;
903
    margin-top: -5px;
904
}
905

    
906
.vm-actions {
907
    position: relative;
908
}
909

    
910
.icon .vm-actions {
911
    /*display: none;*/
912
}
913

    
914
.icon .vm-actions, .network .vm-actions {
915
    width: 180px;
916
    height: 96px;
917
    float: left;
918
}
919

    
920
.network .vm-actions {
921
    width: 185px;
922
}
923

    
924
.icon .machine-container:hover .machine-data {
925
    background-color:#A1C8DB !important;
926
}
927

    
928
.icon .machine-container:hover .vm-actions {
929
    display: block;
930
}
931

    
932
.vm-actions {
933
    font-size: 75%;
934
}
935

    
936
.vm-actions a {
937
    color: black;
938
    height: 15px;
939
    margin: 0 0 1px 4px;
940
    padding: 1px;
941
    padding-left: 8px;
942
    display: block;
943
}
944

    
945
.vm-actions a:hover {
946
    background-color:#A1C8DB;
947
    color: #fff;
948
    border-left: 4px solid #7DB4CD;
949
    padding-left: 4px;
950
}
951

    
952
.vm-actions a.selected {
953
    color: #FF7F2A !important;
954
}
955

    
956
.vm-actions a.selected {
957
    background-color:transparent;
958
}
959

    
960
.vm-actions .action-container {
961
    position: relative;
962
}
963

    
964
.vm-actions .action-container .confirm_single {
965
    position: absolute;
966
    right: -20px;
967
    top: -2px;
968
}
969

    
970
div.list div.actions a.enabled.destroy {
971
}
972

    
973
.vm-actions .action-container.inactive a {
974
  color: #aaa;
975
}
976

    
977
.vm-actions .action-container.inactive a:hover{
978
  background-color: transparent !important;
979
  border: none !important;
980
  padding-left: 8px;
981
}
982

    
983
.vm-actions .action-container.destroy {
984
    position: absolute;
985
    bottom: -1px;
986
    width: 100%;
987
    left: 0px;
988
    background: transparent;
989
}
990

    
991
.vm-actions .action-container.destroy a {
992
}
993

    
994
.icon .light-background .machine-data, div.network.light-background, div.network.expand {
995
    background-color:#aed2e3 !important;
996
}
997

    
998
.single .light-background {
999
    background-color:#aed2e3;
1000
}
1001

    
1002
.icon .machine-data-cont {
1003
    margin-bottom: 5px;
1004
    padding-bottom: 5px;
1005
    border-bottom: 1px solid #D1E7F0;
1006
    width: 520px;
1007
    float: left;
1008
}
1009
.icon .terminated .machine-data-cont {
1010
    border-color: #B6CED6;
1011
}
1012

    
1013
.machine a {
1014
    font-weight: normal;
1015
    text-decoration: none;
1016
}
1017

    
1018
.machine span.name, .machine span.ip {
1019
    font-size: 75%;
1020
    color: black;
1021
    margin-top: 6px;
1022
}
1023

    
1024
.machine span.name {
1025
    font-weight: bold;
1026
}
1027

    
1028
.oldValue {
1029
    display:none;
1030
}
1031

    
1032
.state {
1033
}
1034

    
1035
.state div {
1036
    text-align: right;
1037
    margin-right: 3px;
1038
}
1039

    
1040
/* icon view actions */
1041
div.machine div.actions a.shutdown-padding {
1042
    margin-bottom: 22px;
1043
}
1044

    
1045
div.actions a.enabled:hover{
1046
    color: black !important;
1047
    text-decoration: underline;
1048
    display: block;
1049
}
1050

    
1051
div.machine:hover .actions a {
1052
    visibility: visible;
1053
}
1054

    
1055
div.machine div.display a{
1056
    visibility: visible;
1057
}
1058

    
1059
div.machine div.actions .disabled {
1060
    display: none;
1061
}
1062

    
1063
div.single-container div.vm-actions .disabled {
1064
    display: none;
1065
}
1066

    
1067
div.machine div.actions .disabled {
1068
    display: none;
1069
}
1070

    
1071
div.connect-arrow {
1072
    background: url("../images/connect-arrow.png") no-repeat;
1073
    height: 28px;
1074
    width:14px;
1075
    position: absolute;
1076
    display: none;
1077
}
1078

    
1079
.machine div.connect-arrow {
1080
    display: none;
1081
    left: -3px;
1082
    position: absolute;
1083
    top: 22px;
1084
}
1085

    
1086
div.connect-arrow:hover, div.connect-arrow.border-hover, div.connect-arrow-ie, div.connect-arrow.border-ie {
1087
    cursor: pointer;
1088
    background: url("../images/connect-arrow-hover.png") no-repeat;
1089
    height: 28px;
1090
    width:26px;
1091
}
1092

    
1093
div.connect-border {
1094
    opacity: 0.8;
1095
    filter: alpha(opacity = 80);
1096
    background-color:#4fe0c3;
1097
    height:28px;
1098
    width: 12px;
1099
    position: absolute;
1100
    display: none;
1101
}
1102

    
1103
div.connect-border:hover {
1104
    cursor: pointer;
1105
}
1106

    
1107
.machine div.connect-border {
1108
    display: none;
1109
    left: -15px;
1110
    position: absolute;
1111
    top: 22px;
1112
}
1113

    
1114
.standard .machine .logo {
1115
    float: left;
1116
    width: 50px;
1117
    height: 54px;
1118
    margin: 1px 14px 0;
1119
}
1120
.machine .logo {
1121
    background-image: url("../images/icons/machines/medium/unknown-sprite.png");
1122
    background-repeat: no-repeat;
1123
    cursor: pointer;
1124
}
1125

    
1126
.standard .machine .single-image-state1 {
1127
    background-position: 0px 0;
1128
}
1129

    
1130
.standard .machine .single-image-state3 {
1131
    background-position: -100px 0;
1132
}
1133

    
1134
.standard .machine .single-image-state4 {
1135
    background-position: -150px 0;
1136
}
1137

    
1138
.standard .machine .single-image-state2 {
1139
    background-position: -50px 0;
1140
}
1141

    
1142
.standard .running .machine .logo {
1143
   cursor: pointer;
1144
}
1145

    
1146
.list .machine img {
1147
    margin: 0;
1148
}
1149

    
1150
.icon div.cont-toggler-wrapper.ips {
1151
    margin-top: 2px;
1152
    font-size: 75%;
1153
}
1154

    
1155
.icon div.indicators {
1156
    float: right;
1157
}
1158

    
1159
div.indicators {
1160
    margin-right: 2px !important;
1161
    cursor: pointer;
1162
}
1163

    
1164
div.indicator1, div.indicator2, div.indicator3, div.indicator4 {
1165
    background-color: #63cf1c;
1166
    width:10px;
1167
    height:11px;
1168
    clear: none;
1169
    float:right;
1170
    -webkit-transition: background-color .75s ease-out;
1171
    -o-transition: background-color .75s ease-out;
1172
    -moz-transition: background-color .75s ease-out;
1173
    transition: background-color .75s ease-out;
1174
}
1175

    
1176
.view-separator {
1177
    color:#5F8DD3;
1178
}
1179

    
1180
.running.disabled {
1181
    background: transparent;
1182
}
1183

    
1184
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
1185
    background-color: #63cf1c;
1186
}
1187

    
1188
.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
1189
    background-color: #d4aa00;
1190
}
1191

    
1192
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
1193
    background-color: #ff0000 !important;
1194
}
1195

    
1196
.terminated-state .indicator1, .terminated-state .indicator2, .terminated-state .indicator3, .terminated-state .indicator4 {
1197
    background-color: #5e1616;
1198
}
1199

    
1200
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
1201
    background-color: #FF7F2A;
1202
}
1203

    
1204
.destroying-state .indicator1, .destroying-state .indicator3, .destroying-state .indicator2, .destroying-state .indicator4 {
1205
    background-color: #4085a5 !important;
1206
}
1207

    
1208
.shutting-state .indicator1, .shutting-state .indicator3, .shutting-state .indicator2, .shutting-state .indicator4 {
1209
    background-color: #940606;
1210
}
1211

    
1212
.starting-state .indicator1, .starting-state .indicator2, .starting-state .indicator3, .starting-state .indicator4 {
1213
    background-color: #9ed976;
1214
}
1215

    
1216
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
1217
    background-color: #63cf1c;
1218
}
1219

    
1220
.network-indicator.in-progress .indicator1, .network-indicator.in-progress .indicator2, .network-indicator.in-progress .indicator3, .network-indicator.in-progress .indicator4 {
1221
    background-color: #FF7F2A;
1222
}
1223

    
1224
.running, .terminated {
1225
    background: #EFF7FA repeat scroll 0 0;
1226
    padding-bottom: 15px;
1227
}
1228

    
1229
.running, #machinesview-list, .single {
1230
}
1231

    
1232
.terminated {
1233
    background:#DCE5E8  repeat scroll 0 0;
1234
    padding-top: 15px;
1235
    margin-top: 15px;
1236
}
1237

    
1238
span.rename {
1239
    background-repeat: no-repeat;
1240
    color: transparent;
1241
    font-size: 75%;
1242
    font-weight: normal;
1243
    margin-left: 10px;
1244
    padding-left: 10px;
1245
    text-align: left;
1246
    cursor: pointer;
1247
}
1248

    
1249
div.name:hover span.rename, span.rename_hovered {
1250
    color: #3D3D3D;
1251
    margin-top: 0.4em;
1252
    background-image: url("../images/pencil.png");
1253
    background-position: 0 3px;
1254
}
1255

    
1256
.machine div.info {
1257
    font-size: 75%;
1258
}
1259

    
1260
div.machine:hover div.info-header, div.machine:hover div.toggler div.down {
1261
    background-color: #84b7d0;
1262
}
1263

    
1264
div.machine div.info-label.darker, .single div.tags-label.darker, div.network .darker {
1265
    background-color: #5CA1C0;
1266
}
1267

    
1268
.machine div.info div.info-label {
1269
    font-size: 75%;
1270
    height:16px;
1271
    width: 30px;
1272
    padding: 1px 0 0 5px;
1273
}
1274

    
1275
.machine div.info div.toggler, .single div.tags div.toggler, div.network div.toggler {
1276
    width:15px;
1277
    height:17px;
1278
    margin-top: -11px;
1279
    margin-left: 37px;
1280
}
1281

    
1282
div.network div.toggler {
1283
    margin-left: 90px;
1284
}
1285

    
1286
.machine div.info div.down {
1287
    background: url(../images/down-arrow.png) no-repeat scroll 1px 1px;
1288
}
1289

    
1290
.single div.tags div.down {
1291
    background: url(../images/down-arrow.png) no-repeat scroll 2px 2px;
1292
}
1293

    
1294
.network div.network-machines div.down {
1295
    background: url(../images/down-arrow.png) no-repeat scroll 2px 2px;
1296
}
1297

    
1298
.network div.network-machine div.firewall div.down {
1299
    background: url(../images/down-arrow.png) no-repeat scroll 2px 2px;
1300
}
1301

    
1302
.machine div.info div.up {
1303
    background: url(../images/up-arrow.png) no-repeat scroll 1px 0;
1304
}
1305

    
1306
.single div.tags div.up {
1307
    background: url(../images/up-arrow.png) no-repeat scroll 2px 2px;
1308
}
1309

    
1310
.network div.network-machines div.up {
1311
    background: url(../images/up-arrow.png) no-repeat scroll 2px 2px;
1312
}
1313

    
1314
.network div.network-machine div.firewall div.up {
1315
    background: url(../images/up-arrow.png) no-repeat scroll 2px 2px;
1316
}
1317

    
1318
button {
1319
    background-color: #87AADE;
1320
    border: 1px solid #87AADE;
1321
    color: #FFFFFF;
1322
    cursor: pointer;
1323
    height: 23px;
1324
    width: 120px;
1325
}
1326

    
1327
button.next {
1328
    background-color: #4085A5;
1329
    border-color: #4085A5;
1330
    text-align: right;
1331
}
1332

    
1333
button.next:hover {
1334
    background-color: #7DB4CD;
1335
    border-color: #7DB4CD;
1336
}
1337

    
1338
button.prev {
1339
    background-color: #4085A5;
1340
    border-color: #4085A5;
1341
    margin-left: -1px;
1342
    text-align: left;
1343
}
1344

    
1345
button.prev:hover {
1346
    background-color: #7DB4CD;
1347
    border-color: #7DB4CD;
1348
}
1349

    
1350
.image-logo {
1351
    float: left;
1352
    margin-right: 1em;
1353
    margin-left: 1.5em;
1354
    margin-top: 4px;
1355
}
1356

    
1357
.icon div.image {
1358
    clear: both;
1359
    display: block;
1360
    margin-bottom: 3px;
1361
    margin-top: 3px;
1362
    padding: 5px;
1363
}
1364

    
1365
div#view-select {
1366
    clear: both;
1367
    color: white;
1368
    position: absolute;
1369
    right: 15px;
1370
    top: 15px;
1371
}
1372

    
1373
a.machines_view_link {
1374
    text-decoration: none;
1375
    font-size: 0.7em;
1376
    padding: 4px;
1377
    padding-right: 8px;
1378
    color: #5CA1C0;
1379
    margin-left: 5px;
1380
    background-repeat: no-repeat;
1381
    background-color: #C9DFEA;
1382
}
1383

    
1384
a.machines_view_link span {
1385
    float: left;
1386
}
1387

    
1388
a.machines_view_link span.ico {
1389
    width: 17px;
1390
    height: 15px;
1391
    margin-right: 10px;
1392
    background-position: -36px 0;
1393
}
1394

    
1395
a.machines_view_link:hover {
1396
    background-color: #A1C8DB;
1397
    color: #fff;
1398
}
1399
a.machines_view_link:hover span.ico {
1400
    background-position: -0px 0px;   
1401
}
1402

    
1403
a.machines_view_link.activelink span.ico {
1404
    background-position: -18px 0px;
1405
}
1406
a.machines_view_link.activelink {
1407
    color: #fff;
1408
    background-color: #5CA1C0;
1409
}
1410

    
1411
div#view-select a {
1412
    display: block;
1413
    float: left;
1414
}
1415

    
1416
a#list:hover {
1417
    background: #5f8dd3;
1418
}
1419

    
1420
a#machines_view_icon_link:active, a#machines_view_list_link:active {
1421
    color:white;
1422
}
1423

    
1424
a#machines_view_icon_link span.ico {
1425
    background-image: url("../images/icon-view.png");
1426
}
1427

    
1428
a#machines_view_list_link span.ico {
1429
    background-image: url("../images/list-view.png");
1430
}
1431

    
1432
a#machines_view_single_link span.ico {
1433
    background-image: url("../images/single-view.png");
1434
}
1435

    
1436
#machinetype {
1437
    background-color: #CDE2EC;
1438
    height: 25px;
1439
    margin-bottom: 0px !important;
1440
}
1441

    
1442
div.machine-type {
1443
    float: left;
1444
    margin: 4px 18px 20px;
1445
}
1446

    
1447
.machine-type .active {
1448
    color: #FFFFFF
1449
}
1450

    
1451
div.machine-type label.disabled {
1452
    color: #aaa !important;
1453
}
1454

    
1455
#machinesview {
1456
}
1457

    
1458
#machines-pane {
1459
}
1460

    
1461
.list#machinesview {
1462
    margin-left: -20px;
1463
    display:none;
1464
}
1465

    
1466
#machinesview-list.list {
1467
    background: #EFF7FA  repeat scroll 0 0;
1468
    padding-left: 15px;
1469
    padding-bottom: 15px;
1470
}
1471

    
1472
#machinesview_content {
1473
    display:none;
1474
}
1475

    
1476
.list-machines {
1477
    min-width: 515px;
1478
}
1479

    
1480
#emptymachineslist {
1481
    background-color: #6BA9C6;
1482
    color: #A0A0A0;
1483
    display: none;
1484
    padding: 65px 150px 35px;
1485
    text-align: justify;
1486
    margin-top: -70px;
1487
}
1488

    
1489
#welcomeheader {
1490
    color:white;
1491
    text-align: center;
1492
}
1493

    
1494
.welcomebody {
1495
    color: white;
1496
    font-size:80%;
1497
}
1498

    
1499
.welcomebody a {
1500
    color: white;
1501
}
1502

    
1503
.welcomefooter {
1504
    color: white;
1505
    font-size:60%;
1506
}
1507

    
1508
.welcomefooter a {
1509
    color: white;
1510
}
1511

    
1512
.emptycreatecontainer {
1513
    margin-left: 430px !important;
1514
    position: absolute;
1515
    margin-top: 5px !important;
1516
    width: 180px;
1517
    background-color: #CCCCCC;
1518
    padding: 5px;
1519
    padding-left: 10px;
1520
}
1521

    
1522
.emptycreate {
1523
    margin: 20px 10px 5px 0 !important;
1524
}
1525

    
1526
#createbody {
1527
    display:none;
1528
    font-size: 80%;
1529
}
1530

    
1531
div.list label img {
1532
    margin: 5px 5px -3px 0;
1533
}
1534

    
1535
div.list label {
1536
    color: #3D3D3D;
1537
    font-size: 75%;
1538
}
1539

    
1540
div.list .state {
1541
    margin-top: 7px;
1542
    margin-right: 10px;
1543
}
1544

    
1545
div.list table tbody {
1546
    margin-top: 8px;
1547
}
1548

    
1549
div.list table tr.checked td {
1550
    background-color: #A1C8DB !important;
1551
}
1552

    
1553
div.list table tr:hover td,
1554
div.list table tr.inactive:hover td,
1555
div.list table tr.error:hover td {
1556
    background-color: #A1C8DB;
1557
    color: #fff;
1558
}
1559

    
1560
div.list table td.name {
1561
    min-width: 170px;
1562
}
1563

    
1564
div.list table td.status {
1565
    font-size: 0.9em !important; 
1566
    text-align: right;
1567
    min-width: 90px;
1568
    color: #000;
1569
}
1570

    
1571
div.list table td.flavor {
1572
    font-size: 0.8em;
1573
}
1574

    
1575
div.list table td {
1576
    border-bottom: 1px solid #DDD;
1577
}
1578

    
1579
div.list table tr.error td.status {
1580
    color: #800000 !important;
1581
    font-weight: bold;
1582
}
1583

    
1584
div.list table tr.error td {
1585
    background-color: #DCE5E8;
1586
}
1587

    
1588
div.list table tr.inactive td {
1589
    background-color: #DCE5E8;
1590
}
1591

    
1592
div.list .stopped {
1593
    margin-top: 8px;
1594
}
1595

    
1596
/* root element for tabs  */
1597
#wizard ul.tabs {
1598
    margin-right: -1px;
1599
    float: right;
1600
}
1601

    
1602
#wizard div.panes {
1603
    height: 247px;
1604
    clear:both;
1605
    margin-top: 3px;
1606
}
1607

    
1608
.typebody {
1609
    font-size: 80%;
1610
    font-weight: normal;
1611
    position: relative;
1612
    top: -3px;
1613
}
1614

    
1615
.typehover {
1616
    color: #FFFFFF;
1617
}
1618

    
1619
#label-name {
1620
    margin-top: 10px;
1621
}
1622

    
1623
/* single tab */
1624
#wizard ul.tabs li {
1625
    margin-bottom: 0;
1626
    list-style-type:none;
1627
    float: left;
1628
}
1629

    
1630
/* link inside the tab. uses a background image */
1631
#wizard ul.tabs a {
1632
    display:block;
1633
    padding: 0.2em 0.5em 0.1em 0.4em;
1634
    text-decoration:none;
1635
    color: #FFFFFF;
1636
    position:relative;
1637
    top:1px;
1638
    outline:0;
1639
    background-color: transparent;
1640
    text-align: center;
1641
    width: 100px;
1642
    white-space: nowrap;
1643
    height: 17px;
1644
}
1645

    
1646
#wizard ul.tabs a:hover {
1647
    color: #FFFFFF;
1648
    background-color:#4085A5;
1649
}
1650

    
1651
/* selected tab */
1652
#wizard ul.tabs a.current {
1653
    color: white;
1654
    background-color: #7DB4CD;
1655
    cursor: default;
1656
}
1657

    
1658
#wizard #standard-images {
1659
    background-color: #ECF4F8;
1660
}
1661

    
1662
div.list div.actions {
1663
    display: none;
1664
    clear: left;
1665
    float: right;
1666
    margin-right: 15px;
1667
    margin-top: 37px;
1668
    text-align: right;
1669
    width: 120px;
1670
}
1671

    
1672
div.list div.actions a {
1673
    clear: left;
1674
    color: #A1A1A1;
1675
    display: block;
1676
    font-size:75%;
1677
    margin-bottom: 2px;
1678
}
1679

    
1680
div.list div.actions a:hover {
1681
    background-color: transparent;
1682
}
1683

    
1684
div.list div.actions a.enabled {
1685
    color: #3D3D3D;
1686
}
1687

    
1688
div.list div.actions a.enabled:hover{
1689
    cursor: pointer;
1690
    color: black;
1691
    text-decoration: underline;
1692
}
1693

    
1694
div.list div.actions a.selected {
1695
    color: #FF7F2A !important;
1696
}
1697

    
1698
input.machine {
1699
    width: 13px;
1700
    height: 13px;
1701
    top: -1px;
1702
    overflow: hidden;
1703
}
1704

    
1705
.description-container {
1706
    display: inline-block;
1707
    position: relative;
1708
    width: 300px;
1709
}
1710

    
1711
#wizard .button-container {
1712
    height: 20px;
1713
}
1714

    
1715

    
1716
/* metadata dropdown combo */
1717
.meta-key {
1718
    margin-right: 18px;
1719
    float:left;
1720
}
1721

    
1722
/* notification box */
1723
#yes-no {
1724
    height: 150px;
1725
    z-index: 9999;
1726
    border-bottom: 5px solid #4085A5;
1727
}
1728

    
1729
#yes-no p, #yes-no button {
1730
    margin-top: 15px;
1731
}
1732

    
1733
#error-success, .notification-box {
1734
    z-index: 9999;
1735
    border-bottom: 5px solid #4085A5;
1736
    min-height: 150px;
1737
    top: 50px !important;
1738
    position: absolute;
1739
}
1740

    
1741
#error-success p, .notification-box p {
1742
    margin-top: 5px;
1743
}
1744

    
1745
.error-report {
1746
    display: none;
1747
}
1748

    
1749
#error-success .error-report {
1750
    position: absolute;
1751
    top: 140px;
1752
    right: 40px;
1753
}
1754

    
1755
.error .error-report {
1756
    display: block;
1757
}
1758

    
1759
#error-success .error-report .errormsg {
1760
    display: none;
1761
}
1762

    
1763
#error-success .error-report .success {
1764
    display: none;
1765
}
1766

    
1767
#error-success .error-report .sending {
1768
    display: none;
1769
}
1770

    
1771
#error-success .error-report .send-btn {
1772
    color: #4085A5;
1773
    text-decoration: underline;
1774
    cursor: pointer;
1775
}
1776

    
1777
#error-success strong, .notification-box strong {
1778
    color: #F49C1A;
1779
}
1780

    
1781
#error-success .close, .notification-box .close {
1782
    background-image: url("../images/close-popup.png");
1783
    background-repeat: no-repeat;
1784
    cursor: pointer;
1785
    height: 13px;
1786
    position: absolute;
1787
    right: 7px;
1788
    top: 9px;
1789
    width: 13px;
1790
}
1791

    
1792
.popup-header-error {
1793
    background-color: #800000 !important;
1794
}
1795

    
1796
.popup-border-error {
1797
    border-color: #800000 !important;
1798
    width:auto;
1799
}
1800

    
1801
.popup-details-error {
1802
    border: none !important;
1803
}
1804

    
1805
.popup-separator-error {
1806
    margin-bottom: 5px !important;
1807
}
1808

    
1809
#error-success .popup-header, .notification-box .popup-header {
1810
    background-color: #4085A5;
1811
    color: white;
1812
    font-size: 95%;
1813
    font-weight: normal;
1814
    height: 20px;
1815
    margin-left: -16px;
1816
    margin-top: -16px;
1817
    padding-bottom: 2px;
1818
    padding-left: 30px;
1819
    padding-top: 10px;
1820
    width: 482px;
1821
    margin-right:-16px;
1822
}
1823

    
1824

    
1825
#error-success.success h3 span.header-box, .notification-box h3 span.header-box {
1826
    background-color: #71c837;
1827
    display: block;
1828
    background-image: url("../images/save-green.png");
1829
    background-position: right 0;
1830
    background-repeat: no-repeat;
1831
    width: 80px;
1832
    padding: 3px 3px 3px 8px;
1833
    margin-top: -6px;
1834
    font-size: 90% !important;
1835
    margin-left: -11px;
1836
}
1837

    
1838
#error-success .popup-body, .notification-box .popup-body {
1839
    background: url("../images/popup-bg.png") repeat-x scroll 0 0 transparent;
1840
    margin-left: -16px;
1841
    margin-right: -16px;
1842
    margin-top: 1px;
1843
    min-height: 142px;
1844
    padding-top: 10px;
1845
}
1846

    
1847
#error-success .popup-body-inner, .notification-box .popup-body-inner {
1848
    background: url("../images/popup-inner-bg.png") repeat-x scroll 0 0 transparent;
1849
    font-size: 80%;
1850
    min-height: 120px;
1851
    margin-left: 20px;
1852
    padding-left: 15px;
1853
    width: 460px;
1854
}
1855

    
1856
#error-success .popup-separator, .notification-box .popup-seperator {
1857
    background-color: #74AEC9;
1858
    height: 1px;
1859
    font-size:1%;
1860
    width: 442px;
1861
    margin-bottom: 30px;
1862
}
1863

    
1864
#error-success .machine-now-building {
1865
    font-size: 95%;
1866
    padding-bottom: 7px;
1867
    padding-top: 10px;
1868
}
1869

    
1870
#error-success.success .machine-now-building {
1871
    padding-bottom: 14px !important;
1872
}
1873

    
1874
#error-success .password-container, .notification-box .password-container {
1875
    width: 430px;
1876
    padding: 5px;
1877
    border: 2px solid #75b54a;
1878
    background-color: #aade87;
1879
}
1880

    
1881
#error-success .password-header, .notification-box .password-header {
1882
    margin-bottom: 5px;
1883
}
1884

    
1885
#error-success .password, .notification-box .password {
1886
    color: #447821;
1887
}
1888

    
1889
#error-success .popup-details, .notification-box .popup-details {
1890
    border: 2px solid #FF7F2A;
1891
    float: left;
1892
    margin-left: 10px;
1893
    padding: 2px;
1894
}
1895

    
1896
#error-success.success .popup-details, .notification-box .popup-details {
1897
    border: none !important;
1898
    float: none !important;
1899
    margin-left: none !important;
1900
    margin-top: 10px;
1901
}
1902

    
1903
#error-success.success .popup-separator, .notification-box .popup-seperator {
1904
    margin-bottom: 14px !important;
1905
}
1906

    
1907
#error-success .write-password, .notification-box .write-password {
1908
    margin-bottom: 5px;
1909
    padding-left: 30px;
1910
}
1911

    
1912
#error-success .write-password-password, .notification-box .write-password-password {
1913
    padding-left: 30px;
1914
    color: #447821;
1915
    display: inline;
1916
    font-size: 110%;
1917
    font-weight: bold;
1918
}
1919

    
1920
#error-success .write-password-details, .notification-box .write-password-details {
1921
    font-size: 75%;
1922
}
1923

    
1924
.more-details {
1925
    display: block;
1926
}
1927

    
1928
.notification-box h3 span.header-box {
1929
    background: transparent;
1930
}
1931

    
1932
.notification-box .machine-now-building {
1933
    padding: 20px 0;
1934
}
1935

    
1936
.notification-box .header-box {
1937
    width: auto !important;
1938
}
1939

    
1940
.notification-box .password {
1941
    text-align: center;
1942
}
1943
.notification-box .password a:hover {
1944
    background-color: #447821;
1945
    color: #fff;
1946
}
1947

    
1948
.notification-box .password a {
1949
    padding: 0.2em;
1950
    text-align: center;
1951
    color: #447821;
1952
    font-weight: bold;
1953
    font-size: 1.2em;
1954
    text-decoration: none;
1955
}
1956

    
1957
.popup-details a:link, .popup-details a:visited {
1958
    color: black;
1959
}
1960

    
1961
.destroy .confirm_single .yes {
1962
    background-color: #880000;
1963
    color: #fff;
1964
}
1965

    
1966
.destroy .confirm_single .no {
1967
    background-color: #CC0000;
1968
    color: #880000;
1969
}
1970

    
1971
.destroy .confirm_single .yes:hover {
1972
    background-color:#CC0000;
1973
}
1974

    
1975
div.list div.actions a.selected#action-destroy {
1976
    color: #880000 !important;
1977
}
1978

    
1979
.vm-actions .destroy a#action-destroy.selected {
1980
    color: #880000 !important;
1981
}
1982

    
1983
/* Confirmation boxes */
1984
div.confirm_single, div.confirm_multiple, div.action_error {
1985
    display: none;
1986
    color: black;
1987
}
1988

    
1989
div.confirm_single button, div.confirm_multiple button, div.action_error button {
1990
    font-size: 100%;
1991
    cursor: pointer;
1992
    color: black;
1993
    height: 20px !important;
1994
}
1995

    
1996
div.confirm_single button {
1997
    border: none;
1998
    font-family: Arial, Helvetica, sans-serif;
1999
    line-height: 1em;
2000
    vertical-align: middle;
2001
    padding: 2px 6px;
2002
    padding-bottom:4px;
2003
    height: 15px;
2004
}
2005

    
2006
div.confirm_single button.yes {
2007
    width: 90px;
2008
    background-color:#FF7F2A;
2009
}
2010

    
2011
div.confirm_single button.yes:hover {
2012
    background-color: #FF9955;
2013
}
2014

    
2015
div.confirm_single button.no {
2016
    width: 20px;
2017
    margin-left:-5px;
2018
    background-color: #FF9955;
2019
    color:#d95d0a;
2020
}
2021

    
2022
div.confirm_single button.no:hover {
2023
    color: white;
2024
}
2025

    
2026
div.confirm_multiple_cont {
2027
    background-color: #406A7D;
2028
    margin-top: 0px;
2029
    padding: 3px;
2030
    border-top: 1px solid #444;
2031
    border-bottom: 1px solid #444;
2032
    padding-top:0px;
2033
    margin-top: -1px;
2034
}
2035

    
2036
div.confirm_reboot_required {
2037
}
2038

    
2039
div.confirm_multiple {
2040
    font-size: 65%;
2041
    z-index: 8000;
2042
    /*height: 28px;*/
2043
    width: 700px;
2044
    margin-top: 15px;
2045
}
2046

    
2047
div.confirm_multiple p {
2048
    float: left;
2049
    color: #FFF;
2050
    font-weight: bold;
2051
    margin: 7px 0 0 10px;
2052
}
2053

    
2054
#networks-pane {
2055
    display: none;
2056
}
2057

    
2058
div.confirm_multiple button {
2059
    float: right;
2060
    background-color: transparent;
2061
    border: 1px solid #5CA1C0;
2062
    margin: 4px 5px 0 0;
2063
}
2064

    
2065
div.confirm_multiple button.yes {
2066
    border-color: #FF7F2A;
2067
    padding: 0 12px;
2068
}
2069

    
2070
div.confirm_multiple button.yes:hover {
2071
    background-color: #FF7F2A;
2072
}
2073

    
2074
div.confirm_multiple button.no {
2075
    padding: 0px 16px;
2076
}
2077

    
2078
div.confirm_multiple button.no:hover {
2079
    background-color: #5CA1C0;
2080
}
2081

    
2082
div.action_error {
2083
    width: 120px;
2084
    margin: 14px 0 0 37px;
2085
    background-color: #981D1D;
2086
    font-size: 75%;
2087
    z-index:1;
2088
    color: #FFF;
2089
    position:absolute;
2090
    top: 0px;
2091
}
2092

    
2093
div.action_error .action-error-msg {
2094
    background-color: #fff;
2095
    color: #981D1D;
2096
    border: 1px solid #981D1D;
2097
    padding: 4px;
2098
}
2099
div.action_error .action-error-msg .action {
2100
    font-weight: bold;
2101
}
2102

    
2103
div.action_error .action-error-msg {
2104
    font-size: 0.8em;
2105
}
2106

    
2107
.action_error button {
2108
    width: 75px;
2109
    background-color: transparent;
2110
    border: 1px solid;
2111
    border-color: #981D1D;
2112
    color: #fff !important;
2113
    float: left;
2114
}
2115

    
2116
div.action_error button.details {
2117
    padding-right: 5px;
2118
    width: 100px;
2119
    border-bottom: 2px solid #981D1D;
2120
    border-right: 1px solid #981D1D;
2121
    border-left: 2px solid #981D1D;
2122
    background-color: #E24B4B;
2123
}
2124

    
2125
div.action_error button.close-action-error {
2126
    background-image: url("../images/option-action-remove.png");
2127
    background-color: #fff;
2128
    background-repeat: no-repeat;
2129
    background-position: center center;
2130
    width: 20px;
2131
    border-bottom: 2px solid #981D1D;
2132
    border-right: 2px solid #981D1D;
2133
    border-top: 1px solid #981D1D;
2134
}
2135

    
2136
div.action_error button.details:hover {
2137
    background-color: #FF7F2A;
2138
}
2139

    
2140
div#aboutuser{
2141
    float:right;
2142
    clear: both;
2143
    color: #FFFFFF;
2144
    font-size: 75%;
2145
    margin-top: -25px;
2146
}
2147

    
2148
div#user{
2149
    clear: both;
2150
    color: #FFFFFF;
2151
    font-size: 75%;
2152
    margin-top: 38px;
2153
    padding-bottom: 10px;
2154
    position: absolute;
2155
    right:0;
2156
}
2157

    
2158
div#user a{
2159
    color: #FFFFFF;
2160
    text-decoration: none;
2161
}
2162

    
2163
div#user a.current_lang {
2164
    color: #72ADC8;
2165
}
2166

    
2167
div#user .usermenu {
2168
    float: left;
2169
    cursor: pointer;
2170
    overflow: hidden;
2171
    padding-top: 5px;
2172
    margin-top: -6px;
2173
    position: relative;
2174
}
2175

    
2176
div#user .username {
2177
    display: block;
2178
    margin-right: 10px;
2179
    padding-right: 18px;
2180
    padding-left: 4em;
2181
    min-width: 70px;
2182
    text-align: right;
2183
    height: 20px;
2184
    background: url("../images/down-arrow-light.png") no-repeat right;
2185
    background-position: right 6px;
2186
    font-weight: normal;
2187
}
2188

    
2189
div#user .hovered {
2190
    background: #599EBD;
2191
    overflow: visible;
2192
    border-bottom: 1px solid #C7DFE9;
2193
}
2194

    
2195
div#user .hovered .username {
2196
    background-image: url("../images/down-arrow-lighter.png");
2197
}
2198

    
2199
div#user .active {
2200
    background-color: #BED5E0 !important;
2201
}
2202

    
2203
div#user .active .username {
2204
    color: #599EBD;
2205
    background-image: url("../images/down-arrow-lighter.png");
2206
}
2207

    
2208
div#user .useractions {
2209
    display: none;
2210
}
2211

    
2212
div#user .active .useractions {
2213
    display: block;
2214
    text-align: right;
2215
    color: #4085A5;
2216
    background-color: #D0E3ED;
2217
    margin-top:-1px;
2218
    border-top:1px solid #fff;
2219
    position: relative;
2220
    top: 1px;
2221
    box-shadow: 1px 1px 1px #aaa;
2222
    -moz-box-shadow: 1px 1px 1px #aaa;
2223
    -webkit-box-shadow: 1px 1px 1px #aaa;
2224
}
2225

    
2226
div#user .useractions li {
2227
    padding: 2px 10px;
2228
    border-bottom: 1px solid #efefef;
2229
    text-align: right;
2230
    display: block;
2231
    background-color: transparent;
2232
}
2233

    
2234
div#user .useractions li a {
2235
    color: #4085A5;
2236
    display: inline-block;
2237
    padding:5px 0;
2238
    padding-left: 30px;
2239
    padding-bottom: 6px;
2240
    background-repeat: no-repeat;
2241
    background-position: center left;
2242
}
2243

    
2244
div#user .useractions li.hovered {
2245
    background-color: #E1EFF6;
2246
}
2247

    
2248
div#user .useractions li.last {
2249
    border-bottom: none;
2250
}
2251

    
2252
div#user .useractions .logout a {
2253
    background-image: url("../images/icon-logout.png");
2254
}
2255

    
2256
div#user .langmenu {
2257
    float: left;
2258
    border-left: 1px solid #ffffff;
2259
    padding-left: 10px;
2260
    margin-left: -1px;
2261
}
2262

    
2263
div#user .langmenu .sep {
2264
    display: inline-block;
2265
    color: #72ADC8;
2266
}
2267

    
2268
.separator {
2269
    background-color: #74AEC9;
2270
    height: 10px;
2271
    width: 700px;
2272
    font-size: 1px;
2273
    line-height: 0px;
2274
}
2275

    
2276
#disks.separator {
2277
    background-color: #dea842;
2278
}
2279

    
2280
#networks.separator {
2281
    background-color: #6c535d;
2282
}
2283

    
2284
.network-machine h5 {
2285
    margin-bottom: 20px;
2286
    margin-top:0px;
2287
}
2288

    
2289
.machine-container .separator {
2290
    width: 508px;
2291
    height: 1px;
2292
    margin-top: 2px;
2293
    background-color: #5CA1C0;
2294
    margin-left: 13px;
2295
}
2296

    
2297
.editbuttons {
2298
    display: block;
2299
    clear: none;
2300
    width: 40px;
2301
    margin-right: 0px;
2302
    padding-top: 0px;
2303
    float: right;
2304
    cursor: pointer;
2305
    position: relative;
2306
    z-index: 1000;
2307
}
2308

    
2309
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2310
    background-color: #84b7d0;
2311
}
2312

    
2313
div.editbuttons div.cancel:hover {
2314
    background-image: url("../images/cancel-onhover.png");
2315
}
2316

    
2317
.editbuttons .cancel, .editbuttons .save {
2318
    background-repeat: no-repeat;
2319
    color: transparent;
2320
    height: 16px;
2321
    width: 16px;
2322
    float: left;
2323
}
2324

    
2325
.editbuttons .cancel {
2326
    background-image: url("../images/cancel.png");
2327
    margin-left: 3px;
2328
}
2329

    
2330
.editbuttons .save {
2331
    background-image: url("../images/save.png");
2332
    margin-left: 1px;
2333
}
2334

    
2335
.editbuttons img {
2336
    float:none !important;
2337
    margin: 0px !important;
2338
}
2339

    
2340
.network .namecontainer {
2341
    font-size: 1.1em;
2342
}
2343
.network .machine-name-div .namecontainer {
2344
    font-size: 1em;
2345
    font-weight: bold;
2346
}
2347

    
2348

    
2349
.namecontainer .name {
2350
    position: relative;
2351
}
2352

    
2353
.namecontainer .name .nametextbox, .network-rename-input {
2354
    z-index: 1000;
2355
}
2356

    
2357
.icon .nametextbox {
2358
    width: 255px;
2359
}
2360

    
2361
.nametextbox, .network-rename-input {
2362
    position: relative;
2363
    top: -3px;
2364
    font-size: 65%;
2365
    width: 240px;
2366
    border: 1px solid #aaaaaa;
2367
    padding: 2px;
2368
}
2369

    
2370
.large-spinner {
2371
    background: url("../images/icons/indicators/large/progress.gif");
2372
    margin-left: 298px;
2373
    margin-top: 0px;
2374
    height: 31px;
2375
    width: 49px;
2376
    position: absolute;
2377
    top: 200px;
2378
}
2379

    
2380
#machinesview-icon .large-spinner {
2381
    top: 170px;
2382
}
2383

    
2384
.list .large-spinner {
2385
    margin-top:-30px;
2386
}
2387

    
2388
.single .large-spinner {
2389
    margin-top: 50px;
2390
}
2391

    
2392
div#networks-container {
2393
    display: none;
2394
}
2395

    
2396
div#networks-container .large-spinner {
2397
    margin-top: 50px;
2398
}
2399

    
2400
/* tables in list view */
2401
div.list div.dataTables_filter {
2402
    font-size: 75%;
2403
    margin-bottom: 12px;
2404
}
2405

    
2406
div.list div.dataTables_filter input{
2407
    font-size: 100%;
2408
}
2409

    
2410
.dataTables_wrapper {
2411
    width: 515px;
2412
    padding-bottom: 40px;
2413
}
2414

    
2415
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2416
    padding-right: 15px !important;
2417
}
2418

    
2419
div.list table {
2420
    width: 515px;
2421
    font-size: 75%;
2422
}
2423

    
2424
div.list table tbody td {
2425
    color: #3D3D3D;
2426
    padding:6px;
2427
    vertical-align: middle;
2428
    height: 20px;
2429
}
2430

    
2431
div.list table thead tr {
2432
    border-bottom: 1px solid #aaa;
2433
}
2434
div.list table thead tr th {
2435
    background-color: #CDE2EC;
2436
    background-image: url("../images/bg.gif");
2437
    background-repeat: no-repeat;
2438
    background-position: right 11px;
2439
    font-weight: normal;
2440
    border: 1px solid transparent;
2441
    border-bottom: none;
2442
    padding: 4px;
2443
    text-align: left;
2444
    vertical-align: middle;
2445
    cursor: pointer;
2446
}
2447

    
2448
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2449
    background-color: #5CA1C0;
2450
}
2451

    
2452
div.list table thead .sorting_asc {
2453
    background-image: url("../images/asc.gif");
2454
}
2455

    
2456
div.list table thead .sorting_desc {
2457
    background-image: url("../images/desc.gif");
2458
}
2459

    
2460
div.list table .selection div.expand-icon {
2461
    background-image: url("../images/asc.gif");
2462
    background-repeat: no-repeat;
2463
    position: relative;
2464
    cursor: pointer;
2465
    width: 15px;
2466
    height: 4px;
2467
    left: 19px;
2468
    top: -11px;
2469
}
2470

    
2471
ul.dropdown-selector {
2472
    background-color: #E6EEEE;
2473
    position: absolute;
2474
    margin-left: 1px;
2475
    display: block;
2476
    top: 255px;
2477
    font-size:75%;
2478
    width:40px;
2479
}
2480

    
2481
ul.dropdown-selector li {
2482
    padding: 4px;
2483
}
2484

    
2485
ul.dropdown-selector li:hover {
2486
    background-color: #5CA1C0;
2487
}
2488

    
2489
ul.dropdown-selector li a{
2490
    color: black;
2491
    text-decoration: none;
2492
}
2493

    
2494
div.list table span.imagetag {
2495
    display: none;
2496
}
2497

    
2498
div.list table thead .vmos {
2499
    width: 20px !important;
2500
    vertical-align:middle;
2501
}
2502

    
2503
div.list table .selection {
2504
    width: 20px !important;
2505
    text-align: left;
2506
    background-image: none;
2507
    padding-left: 6px;
2508
}
2509

    
2510
div.list table thead .vmflavor {
2511
    width: 100px !important;
2512
}
2513

    
2514
/* group column commented out for v0.5
2515
div.list table thead .vmgroup {
2516
    width: 40px !important;
2517
}
2518
*/
2519

    
2520
div.list table thead .vmstatus {
2521
    width: 50px !important;
2522
}
2523

    
2524
div.list table thead .vmname {
2525
    width: 110px !important;
2526
}
2527

    
2528
.spinner, .action-indicator {
2529
    clear: right;
2530
    float:right;
2531
    margin: 10px 6px 0 15px;
2532
}
2533

    
2534
.icon .spinner {
2535
    margin: 20px 4px 0 15px !important;
2536
}
2537

    
2538
.single .state .spinner {
2539
    margin: 20px 55px 0 15px !important;
2540
}
2541

    
2542
.action-indicator {
2543
    margin-right: 18px;
2544
}
2545

    
2546
.list span.action-indicator {
2547
    display: block;
2548
    width: 15px;
2549
    height: 20px;
2550
    margin: 0 !important;
2551
    float: none;
2552
}
2553

    
2554
.wave {
2555
    clear: right;
2556
    float:right !important;
2557
    margin: 10px 15px 0 15px !important;
2558
}
2559

    
2560
.hidden {
2561
    display:none; 
2562
}
2563

    
2564
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2565
    display:block !important;
2566
}
2567

    
2568
.action_error .message, .action_error .code {
2569
    display: none;
2570
}
2571

    
2572
.fixed {
2573
    bottom: 0;
2574
    position: fixed !important;
2575
}
2576

    
2577
/* Networks */
2578
#networkscreate {
2579
}
2580

    
2581
.createbutton {
2582
    color: black;
2583
    background-color: #FF7F2A;
2584
    cursor: pointer;
2585
    padding: 7px 24px;
2586
    text-decoration: none;
2587
    border-left: 15px solid #FF9955;
2588
    margin-left: -15px;
2589
}
2590

    
2591
.create-button a.disabled,
2592
.createbutton.disabled, #networkscreate.disabled {
2593
  background-color: #888 !important;
2594
  border-left-color: #aaa !important;
2595
  cursor: help !important;
2596
  color: #ccc !important;
2597
}
2598

    
2599
#networkscreate:hover {
2600
    background-color: #FF9955;
2601
}
2602

    
2603
#createcontainer {
2604
}
2605

    
2606
#networks-container {
2607
}
2608

    
2609
#networks-pane .public-networks {
2610
    background: #EFF7FA repeat scroll 0 0;
2611
    margin: 0 0 0px;
2612
    padding: 0 0 15px 0px;
2613
}
2614

    
2615
#networks-pane .private-networks .network:last-child {
2616
    border-bottom: none;
2617
}
2618

    
2619
#networks-pane .private-networks {
2620
    background: #EFF7FA repeat scroll 0 0;
2621
    padding: 15px 20px 20px 0px;
2622
    margin-top: 18px;
2623
}
2624

    
2625
.private-networks .network-cont:last-child {
2626
    border-bottom: none;
2627
}
2628

    
2629
.private-networks .network-cont {
2630
    border-bottom: 1px solid #D1E7F0;
2631
    padding-bottom:5px;
2632
    margin-bottom: 5px;
2633
    width: 520px;
2634
}
2635

    
2636
.private-networks .network {
2637
    padding-top: 10px;
2638
    padding-bottom: 10px;
2639
}
2640

    
2641
#public-template, #private-template, #public-machine-template, #private-machine-template {
2642
    display:none;
2643
}
2644

    
2645
div.network-cont.disable-destroy .actions .destroy {
2646
    display: none !important;
2647
}
2648

    
2649
div.network-cont.pending .actions .action-add {
2650
    display: none;
2651
}
2652

    
2653
div.network-cont.in-error .actions .action-add {
2654
    display: none;
2655
}
2656

    
2657
div.network a.action-network-add {
2658
    display: none;
2659
}
2660

    
2661
div.network a.action-network-destroy {
2662
    margin-top: 32px !important;
2663
    width: 50px;
2664
    display: none;
2665
}
2666

    
2667
div.network {
2668
    clear: both;
2669
    padding: 5px 20px 5px 20px;
2670
    width: 480px;
2671
    position: relative;
2672
}
2673

    
2674
#private-template {
2675
    margin: 2px 0 0 -30px;
2676
}
2677

    
2678
div.network-placeholder {
2679
    margin-left: 33px;
2680
}
2681

    
2682
div.private-networks div.network-placeholder {
2683
}
2684

    
2685
div.network-cable {
2686
    border-left: 3px solid #FF7F2A;
2687
    float: left;
2688
    margin-left: -40px;
2689
    margin-top: -45px;
2690
    height: 185px;
2691
    overflow: hidden;
2692
}
2693

    
2694
.first div.network-cable {
2695
    height:143px;
2696
    margin-top:-6px;
2697
    position: relative;
2698
}
2699

    
2700
div.network-contents div.machines-list div.first {
2701
    margin-top:0;
2702
}
2703

    
2704
.last div.network-cable {
2705
    height:85px;
2706
}
2707

    
2708
div.firewall-cable {
2709
    border-left: 3px solid #FF7F2A;
2710
    float: left;
2711
    margin-left: -100px;
2712
    margin-top: -20px;
2713
    height: 110px;
2714
}
2715

    
2716
.last div.firewall-cable {
2717
    display:none;
2718
}
2719

    
2720
div.network a:hover {
2721
    text-decoration: underline;
2722
    cursor: pointer;
2723
}
2724

    
2725
#networks-container .name {
2726
    font-size: 75%;
2727
}
2728

    
2729
div.network-machines, div.firewall {
2730
    margin-left: 70px;
2731
}
2732

    
2733
div.firewall {
2734
    margin-left: 70px;
2735
    margin-bottom: 3px;
2736
    margin-top: -15px;
2737
}
2738

    
2739
div.firewall .firewall-options {
2740
    float: left;
2741
}
2742

    
2743
div.machines-header, div.firewall-header {
2744
    background-color: #A1C8DB;
2745
    color: white;
2746
    cursor: pointer;
2747
    height: 17px;
2748
    width: 103px;
2749
}
2750

    
2751
 div.private-networks div.machines-header {
2752
    margin-top: -5px;
2753
}
2754

    
2755
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2756
    background-color: #84b7d0;
2757
}
2758

    
2759
div.network-machine:hover div.firewall-header {
2760
    background-color: #5CA1C0;
2761
}
2762

    
2763
div.firewall-label.darker {
2764
    background-color: #4085a5;
2765
}
2766

    
2767
.state {
2768
}
2769

    
2770
.network .state {
2771
    font-size: 75%;
2772
    position: absolute;
2773
    right: 10px;
2774
    top: 5px;
2775
}
2776

    
2777
div.network div.actions {
2778
    float: right;
2779
    font-size: 75%;
2780
    font-weight: normal;
2781
    height: 70px;
2782
    width: 100px;
2783
    position: absolute;
2784
    right: -100px;
2785
    top: 0;
2786
}
2787

    
2788
div.network div.machine-actions {
2789
    text-decoration: none;
2790
    float: right;
2791
    margin: -17px -180px 0 0;
2792
    font-weight: normal;
2793
    font-size: 75%;
2794
}
2795

    
2796
div.network div.actions a, div.network div.machine-actions a {
2797
    text-decoration: none;
2798
    height: 15px;
2799
    color: black;
2800
    visibility: hidden;
2801
    display: block;
2802
}
2803

    
2804

    
2805
div.network div.machine-actions a {
2806
    margin: 8px 0 0 8px;
2807
}
2808
div.network div.net-actions a {
2809
    margin: 0 0 8px 8px;
2810
    width: 168px;
2811
}
2812
div.network div.action-container {
2813
    bottom: auto;
2814
}
2815

    
2816
div.network div.net-actions .confirm_single {
2817
    position: absolute;
2818
    left: 96px;
2819
    width: 150px;
2820
    margin: 0 0px -5px 0;
2821
    font-size: 100%;
2822
}
2823

    
2824
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2825
    display: block;
2826
    background-color:#A1C8DB;
2827
    opacity: 0.8;
2828
    filter: alpha(opacity = 80);
2829
}
2830

    
2831
div.network.expand .net-actions a {
2832
    visibility: visible;
2833
}
2834

    
2835
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2836
    visibility: visible;
2837
}
2838

    
2839
div.network div.machine-actions a.action-destroy.selected {
2840
    color: #880000 !important;
2841
}
2842

    
2843
div.network div.actions a.visible,
2844
div.network div.net-vm-actions a.visible,
2845
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected {
2846
    background-color: transparent !important;
2847
    visibility: visible!important;
2848
}
2849

    
2850
div.network .net-vm-actions .confirm_single {
2851
    font-size: 100% !important;
2852
    margin-right: -20px !important;
2853
    position: absolute !important;
2854
    top: 7px;
2855
    right:0;
2856
}
2857

    
2858
div.network .nic-ip {
2859
  font-size: 0.8em;
2860
}
2861

    
2862
div.network div.display a {
2863
    visibility: visible;
2864
}
2865

    
2866
div.network-machine div.machine-actions a.action-details {
2867
    margin-top: 7px;
2868
    width: 168px;
2869
}
2870

    
2871
div.network .net-actions {
2872
    margin-right:5px !important;
2873
    margin-top:0px !important;
2874
    height: 80px !important;
2875
}
2876

    
2877
div.network .net-actions .action-container.destroy {
2878
    position: relative;
2879
    bottom: auto;
2880
}
2881

    
2882
div.network:hover {
2883
    background-color: #A1C8DB !important;
2884
}
2885

    
2886
.network-logos {
2887
    float:left;
2888
    padding-right: 10px;
2889
}
2890

    
2891
.network-logos:hover {
2892
    cursor: pointer;
2893
}
2894

    
2895
.state div {
2896
    text-align: right;
2897
    margin: 4px 1px -4px;
2898
}
2899

    
2900
.public-networks .state div {
2901
    margin-top: 4px;
2902
}
2903

    
2904
.private-networks .state div {
2905
    margin-top: 9px;
2906
    margin-bottom: -12px;
2907
}
2908

    
2909
.network .name-div {
2910
    margin-bottom: 15px;
2911
    margin-top: 0px;
2912
}
2913

    
2914
div.indicator {
2915
    clear: none;
2916
    float: right;
2917
    height: 11px;
2918
    margin: 3px -1px;
2919
    width: 10px;
2920
}
2921

    
2922
#private-networks {
2923
    margin-top: 20px;
2924
}
2925

    
2926
.private-networks .editbuttons {
2927
    margin-right: 117px;
2928
    margin-top: 1px;
2929
}
2930

    
2931
.private-networks div.confirm_single {
2932
    margin: 45px -219px -5px 0;
2933
    font-size: 80%;
2934
}
2935

    
2936
.private-networks .network-machine div.confirm_single {
2937
    margin: 0 -199px 0 0;
2938
}
2939

    
2940
.private-networks .state {
2941
}
2942

    
2943
.private-networks div.machines-list {
2944
    padding-top: 3px;
2945
}
2946

    
2947
span.rename-network, span.configure {
2948
    background-repeat: no-repeat;
2949
    color: transparent;
2950
    font-size: 75%;
2951
    font-weight: normal;
2952
    margin-left: 10px;
2953
    margin-right: 10px;
2954
    padding-left: 10px;
2955
    text-align: left;
2956
}
2957

    
2958
span.rename-network {
2959
    cursor: pointer;
2960
}
2961

    
2962
div.name-div:hover span.rename-network {
2963
    color: #3D3D3D;
2964
    margin-top: 0.4em;
2965
    background-image: url("../images/pencil.png");
2966
    background-position: 0 3px;
2967
}
2968

    
2969
div.network:hover a.rename {
2970
    color: #3d3d3d;
2971
}
2972

    
2973
.network-separator {
2974
    background-color: #5CA1C0;
2975
    height: 1px;
2976
    margin: 2px 0 0 -5px;
2977
    width: 480px;
2978
    font-size: 1%;
2979
    line-height: 1px;
2980
}
2981

    
2982
.network-contents {
2983
    margin-left: -4px;
2984
    width: 504px;
2985
    clear: both;
2986
    background: url("../images/orange-border.png") no-repeat;
2987
    background-position: 33px bottom;
2988
}
2989
.network-contents.last-expanded {
2990
    background-position-y: -2600px;
2991
}
2992

    
2993
.network-machine {
2994
    border-bottom: 1px solid #5CA1C0;
2995
}
2996
.network-machine:last-child {
2997
    border-bottom: none;
2998
}
2999

    
3000
.network-machine .state div {
3001
    text-align: left;
3002
}
3003

    
3004
.network-machine {
3005
    margin-left: 35px;
3006
    padding-bottom: 10px;
3007
    padding-left: 5px;
3008
    padding-top: 10px;
3009
    position: relative;
3010
}
3011

    
3012
.network-machine .ips {
3013
    position: absolute;
3014
    right:0;
3015
    top:40px;
3016
    text-align: right;
3017
    padding-right: 10px;
3018
    font-size: 70%;
3019
}
3020

    
3021
.network-machine .logo {
3022
    float:left;
3023
    padding-right: 10px;
3024
    position:relative;
3025
}
3026

    
3027
#networks-container .machine-name {
3028
    text-decoration: none !important;
3029
    margin-bottom: 10px;
3030
    color: #000000;
3031
    margin-top: -4px;
3032
}
3033

    
3034
.private-networks .separator {
3035
    background-color: #5CA1C0;
3036
    height: 1px;
3037
    margin: 3px 0 -2px -10px;
3038
    width: 485px;
3039
}
3040

    
3041
.network-machine .state {
3042
    margin-right: 18px;
3043
}
3044

    
3045
.network-machine .state .status {
3046
    margin-bottom: 4px;
3047
}
3048

    
3049
.machine-name .name {
3050
}
3051

    
3052
.machine-name .namecontainer {
3053
    line-height: 18px;
3054
    margin-bottom: 20px;
3055
}
3056

    
3057
div.network-machine:hover {
3058
    background-color: #84B7D0;
3059
}
3060

    
3061
.machines {
3062
    width: 416px;
3063
    margin-bottom: -8px;
3064
    margin-top: 10px;
3065
}
3066

    
3067
div.empty-network-slot {
3068
    height: 60px;
3069
}
3070

    
3071
div.network-remove-machine, div.network-add-machine {
3072
    background-color: #FB822F;
3073
    color: #bc4b00;
3074
    width:90px;
3075
    height:18px;
3076
    float:left;
3077
    margin:40px 0 0 -100px;
3078
}
3079

    
3080
span.remove-icon {
3081
    font-size: 80%;
3082
    margin-left: 15px;
3083
    position: relative;
3084
    bottom:1px;
3085
}
3086

    
3087
div.add-icon {
3088
    margin-left: 15px;
3089
    margin-top: -1px;
3090
    cursor: pointer;
3091
}
3092

    
3093
span.remove-icon:hover, span.add-icon:hover {
3094
    cursor:pointer;
3095
    color: #fff;
3096
}
3097

    
3098
div.network-add-machine {
3099
    margin:43px 0 0 0px;
3100
}
3101

    
3102
.firewall-on {
3103
    color: #42E342;
3104
}
3105

    
3106
.firewall-off {
3107
    color: #F82E2E;
3108
}
3109

    
3110
.firewall .progress-indicator {
3111
  position: absolute;
3112
  right: 10px;
3113
  top: 11px;
3114
}
3115

    
3116
.firewall-content {
3117
    color: black;
3118
    font-size: 0.8em;
3119
    height: 55px;
3120
    padding-top: 10px;
3121
}
3122

    
3123
.firewall-content input {
3124
  cursor: pointer;
3125
}
3126

    
3127
.firewall-content .checkbox-legends {
3128
    cursor: pointer;
3129
}
3130

    
3131
.firewall-content .checkbox-legends.current {
3132
    font-weight: bold;
3133
}
3134

    
3135
.firewall-content .checkbox-legends {
3136
    vertical-align: text-top;
3137
}
3138

    
3139
.checkbox-legends a {
3140
    color: black;
3141
    text-decoration: underline;
3142
    font-size: 100%;
3143
}
3144

    
3145
h5.machine-connect {
3146
    font-size: 75%;
3147
    margin-bottom: 3px;
3148
    height: 23px;
3149
}
3150

    
3151
.machine-connect span {
3152
    text-decoration: underline;
3153
}
3154

    
3155
h5.machine-connect span:hover {
3156
    cursor: pointer;
3157
}
3158

    
3159
.firewall-apply {
3160
    position: absolute;
3161
    background-color: #4085a5;
3162
    border: none;
3163
    font-size: 105%;
3164
    height: 18px;
3165
    width: 75px;
3166
    bottom: 13px;
3167
    right: 10px;
3168
}
3169

    
3170
.firewall-apply:hover {
3171
    background-color:#5CA1C0;
3172
}
3173

    
3174
.name-div {
3175
    margin: -9px 0 30px 70px;
3176
}
3177

    
3178
.machine-name-div {
3179
    margin-bottom: 20px;
3180
    margin-left: 60px;
3181
}
3182

    
3183
div.reboot-dialog {
3184
    display: none;
3185
    color: black;
3186
    background-color: #4085A5;
3187
    font-size: 75%;
3188
    margin-top: 15px;
3189
    width: 698px;
3190
    z-index: 1;
3191
}
3192

    
3193
div#reboot-machine-template, div.reboot-machine-entry {
3194
    display: none;
3195
    padding: 0 0 10px 35px;
3196
    width: 300px;
3197
}
3198

    
3199
div.reboot-dialog p {
3200
    color: #FFFFFF;
3201
    padding: 10px 0 10px 10px;
3202
}
3203

    
3204
div.reboot-dialog button {
3205
    float:right;
3206
    border: 1px solid #FF7F2A;
3207
    background-color: transparent;
3208
    font-size:100%;
3209
}
3210

    
3211
div.reboot-dialog button:hover {
3212
    background-color: #FF7F2A;
3213
}
3214

    
3215
div.reboot-dialog button.reboot-all {
3216
    margin: -30px 35px 0 0;
3217
}
3218

    
3219
div.reboot-dialog button.reboot-single {
3220
    color: black;
3221
    margin-top: -20px;
3222
}
3223

    
3224
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
3225
    display:none;
3226
}
3227

    
3228
div.reboot-dialog button.details {
3229
    border-color: #800000;
3230
    margin-top: -20px;
3231
}
3232

    
3233
div.reboot-dialog button.details:hover {
3234
    background-color: #800000;
3235
}
3236

    
3237
/* Metadata */
3238
.machine .info-content {
3239
    display: none;
3240
}
3241

    
3242
.machine .info-content.ips .collection {
3243
  padding: 0;
3244
}
3245

    
3246
.machine .info-content.ips .ips .model-item .subnet {
3247
  padding-top: 2px;
3248
  width: 35%;
3249
  float: left;
3250
}
3251

    
3252
.machine .info-content.ips .ips .port-ip-item:last-child {
3253
  margin-bottom: 0;
3254
}
3255

    
3256
.machine .info-content.ips.ips .port-item:hover {
3257
  background-color: #75A7BF;
3258
}
3259

    
3260
.machine .info-content.ips .ips .port-ip-item {
3261
  padding: 6px;
3262
  margin-bottom: 2px;
3263
}
3264

    
3265
.machine .info-content.ips .ips .model-item .ip {
3266
  padding-top: 4px;
3267
  width: 55%;
3268
  float: left;
3269
}
3270

    
3271
.single .machine .info-content.ips .ips .model-item .ip {
3272
  padding-top: 5px;
3273
}
3274

    
3275
.machine .info-content.ips .ips .model-item .type {
3276
  float: left;
3277
  margin-right: 10px;
3278
  margin-top: 1px;
3279
  vertical-align: middle;
3280
  color: #fff;
3281
  background-color: #4085A5;
3282
  padding: 3px;
3283
}
3284

    
3285
.single .machine .info-content.ips .ips .model-item .ip {
3286
  width: 85%;
3287
}
3288

    
3289
.single .machine .info-content.ips .ips .model-item .cidr {
3290
  padding-left: 27px;
3291
}
3292

    
3293
.single .machine .info-content.ips .ips .model-item .type {
3294
  font-size: 0.9em;
3295
  padding: 1px 4px;
3296
  margin-top: 4px;
3297
}
3298

    
3299
.machine .info-content.ips .port {
3300
  width: 77%;
3301
  float: left;
3302
  margin-top: 9px;
3303
}
3304

    
3305
.machine .info-content.ips .ips {
3306
  width: 50%;
3307
  float: left;
3308
}
3309

    
3310
.machine .info-content.ips .port-item:last-child {
3311
  border-bottom: none;
3312
  padding-bottom: 0;
3313
  margin-bottom: 0;
3314
}
3315

    
3316
.machine .info-content.ips .port-item {
3317
  border-bottom: 1px solid #75A9C1;
3318
}
3319

    
3320
.machine .info-content.ips .port-item img.in-progress {
3321
  margin: 4px 2px;
3322
  margin-right: 20px;
3323
}
3324

    
3325
.machine .info-content.ips .port-item img {
3326
  float: left;
3327
  position: relative;
3328
  left: 4px;
3329
  margin-top: 10px;
3330
  margin-right: 10px;
3331
}
3332

    
3333
.single .machine .info-content.ips .port-item img {
3334
  margin-top: 13px;
3335
}
3336

    
3337
.machine .info-content.ips .port-item .network-header {
3338
  width: 50%;
3339
  float: left;
3340
}
3341

    
3342
.single .machine .info-content.ips .port-item .network-header {
3343
  width: 100%;
3344
  float: none;
3345
}
3346

    
3347
.single .machine .info-content.ips .ips {
3348
  width: 100%;
3349
}
3350

    
3351
.single .machine .info-content.ips .ips,
3352
.single .machine .info-content.ips .port-item .network-header {
3353
  float: none;
3354
}
3355

    
3356
.single .machine .info-content.ips .port-item .network-header {
3357
  padding: 5px;
3358
  margin-top: -10px;
3359
}
3360
  
3361

    
3362
.machine .info-content.ips .port-item .port {
3363
}
3364

    
3365
.single .machine .info-content.ips {
3366
  font-size: 0.8em;
3367
  color: #222;
3368
}
3369

    
3370
.machine .info-content.ips {
3371
    background-color: #84B7D0;
3372
    padding: 0px 0px;
3373
    font-size: 0.6em;
3374
}
3375

    
3376
.metadata-container {
3377
    line-height: 12px;
3378
    height: 85px;
3379
    background-color: #84b7d0;
3380
}
3381

    
3382
.metadata-column {
3383
    border-right: 1px solid #5CA1C0;
3384
    color: black;
3385
    float: left;
3386
    font-size: 60%;
3387
    margin-top: 3px;
3388
    height: 70px;
3389
    padding-bottom: 5px;
3390
}
3391

    
3392
.vm-stats {
3393
    padding-left: 10px;
3394
    padding-right: 5px;
3395
    width: 220px;
3396
}
3397

    
3398
.vm-stats div.stat-content {
3399
    height: 18px;
3400
}
3401

    
3402
.vm-stats div.stat-content img {
3403
    margin: 0;
3404
}
3405

    
3406
.vm-stats div img.stat-busy {
3407
    margin-top: -7px;
3408
    margin-left: 90px;
3409
}
3410

    
3411
.vm-stats div.stat-content img.busy {
3412
    margin-left: 95px;
3413
}
3414

    
3415
.vm-stats div.stat-error {
3416
    display:none;
3417
}
3418

    
3419
div.stat-error {
3420
    color: #f00;
3421
}
3422

    
3423
.single div.stat-error {
3424
    text-align: center;
3425
    font-size: 0.8em;
3426
}
3427

    
3428
.metadata-column {
3429
    margin-top: 4px;
3430
}
3431

    
3432
.vm-details {
3433
    width: 130px;
3434
    margin-left:17px;
3435
}
3436

    
3437
.vm-details.metadata-column {
3438
    padding-top: 5px;
3439
    height: 65px;
3440
}
3441

    
3442
.vm-details .image-details {
3443
    margin-top: 8px;
3444
}
3445

    
3446
.vm-details .vm-detail {
3447
    display: block;
3448
}
3449

    
3450
.vm-details span.value {
3451
    color: #444;
3452
}
3453

    
3454
.single-container .lower .stat-busy {
3455
    margin-top: 10px;
3456
    margin-left: 325px;
3457
}
3458

    
3459
.vm-metadata {
3460
    padding-left: 10px;
3461
    width: 100px;
3462
    border: none;
3463
}
3464

    
3465
.metadata-left {
3466
}
3467

    
3468
.metadata-right {
3469
    width: 73px;
3470
    float:left;
3471
    height: 35px;
3472
    padding-left: 5px;
3473
    position:relative;
3474
    overflow:hidden;
3475
}
3476

    
3477
.metadata-right .items {
3478
    position:absolute;
3479
    height:20000em;
3480
}
3481

    
3482
.metadata-keys-container {
3483
    height: 60px;
3484
    float: left;
3485
}
3486

    
3487
.single .metadata-keys-container {
3488
    float: none;
3489
    height: auto;
3490
    margin-bottom: 5px;
3491
}
3492

    
3493
.single a.manage-metadata {
3494
    font-size: 80%;
3495
    margin-left:4px;
3496
    color: #383838;
3497
}
3498

    
3499
a.manage-metadata, a.stats-report {
3500
    font-size: 100%;
3501
    color: black;
3502
    margin-left:17px;
3503
    text-decoration: underline;
3504
}
3505

    
3506
a.stats-report {
3507
    margin: 15px 0  0 80px;
3508
}
3509

    
3510
div.machine a.manage-metadata:hover {
3511
    background-color: transparent;
3512
}
3513

    
3514
.single .metadata-actions, .single .metadata-keys-container .items {
3515
    padding-left: 5px;
3516
}
3517
.metadata-actions, .metadata-keys-container .items{
3518
    margin-top: 5px;
3519
}
3520

    
3521
.singe .metadata-actions, .single .metadata-keys-container .items{
3522
    font-size: 80%;
3523
    line-height: 12px;
3524
    width: 300px;
3525
}
3526

    
3527
.metadata-actions .prev,  .metadata-actions .next{
3528
    float:left;
3529
    width:29px;
3530
    height:6px;
3531
    cursor: pointer;
3532
}
3533

    
3534
.metadata-actions .prev {
3535
    background: url("../images/roll-up.png") no-repeat scroll 0 0 transparent;
3536
}
3537

    
3538
.metadata-actions .next {
3539
    background: url("../images/roll-down.png") no-repeat scroll 0 0 transparent;
3540
}
3541

    
3542
.scrollable {
3543
    position:relative;
3544
    overflow:hidden;
3545
    height: 35px;
3546
    width: 120px;
3547
    margin-bottom:2px;
3548
}
3549

    
3550
.scrollable .items {
3551
    position:absolute;
3552
    height:20000em;
3553
}
3554

    
3555
/* single view */
3556
.single {
3557
    color: #383838;
3558
}
3559

    
3560
.single .column1 {
3561
    float: left;
3562
    margin: 1px 0 25px 17px;
3563
    width: 140px;
3564
}
3565

    
3566
.single .column1 .state {
3567
    float: left;
3568
    margin-left: 4px;
3569
    padding-bottom: 6px;
3570
    padding-top: 3px;
3571
    position: relative;
3572
    right: 0;
3573
    text-align: center;
3574
    width: 126px;
3575
}
3576

    
3577
.single .column1 .state-label {
3578
    padding-top: 5px;
3579
}
3580

    
3581
.single .column1 .indicators {
3582
    margin-right: 38px !important;
3583
}
3584

    
3585
.single div.connect-arrow {
3586
    margin-left: -17px;
3587
}
3588

    
3589
.single div.connect-border {
3590
    margin-left: -29px;
3591
}
3592

    
3593
.single .single-actions {
3594
    width: 150px;
3595
    height: 77px;
3596
    margin-bottom: 45px;
3597
    margin-left: -10px;
3598
}
3599

    
3600
.single .vm-actions .action-container {
3601
    margin-bottom: 1px;
3602
}
3603

    
3604
.single .vm-actions .action-container .confirm_single {
3605
    right: -45px;
3606
}
3607

    
3608
.single .vm-actions .action-container.destroy .confirm_single {
3609
}
3610

    
3611
.single .vm-actions .action-container.destroy {
3612
    bottom: -20px;
3613
}
3614

    
3615
.single a.single-action {
3616
    text-decoration: none;
3617
    cursor: pointer;
3618
    display: block;
3619
}
3620

    
3621
.single a.single-action:hover {
3622
    background-color:#A1C8DB;
3623
    width: 162px;
3624
    opacity: 0.8;
3625
    filter: alpha(opacity = 80);
3626
}
3627

    
3628
.single .destroy a.single-action.selected {
3629
    color: #880000 !important;
3630
}
3631

    
3632
.single a.single-action.selected {
3633
    color: #FF7F2A !important;
3634
    width: 50px !important;
3635
}
3636

    
3637
.single a.single-action.selected:hover {
3638
    background-color:transparent;
3639
}
3640

    
3641
.single .spinner, .single .action-indicator {
3642
    margin: 15px 45px 0 0px !important
3643
}
3644

    
3645
.single .action-indicator {
3646
    margin-right: 55px !important;
3647
}
3648

    
3649
.single .wave {
3650
    margin: 15px 53px 0 0px !important
3651
}
3652

    
3653
.icon div.action_error {
3654
    font-size: 100%;
3655
}
3656

    
3657
.single div.action_error {
3658
    position: absolute;
3659
    top: 29px;
3660
    right: 35px;
3661
}
3662

    
3663
.single .column2 {
3664
    background-color: #A1C8DB;
3665
    float: left;
3666
    font-size: 78%;
3667
    line-height: 17px;
3668
    margin: 0 0 10px 5px;
3669
    width: 358px;
3670
}
3671

    
3672
.single .column2 .machine-labels {
3673
    float: left;
3674
    font-size: 90%;
3675
    margin-left: 10px;
3676
    margin-top: 10px;
3677
    width: 125px;
3678
}
3679

    
3680
.single .machine-detail.title {
3681
    background-color: #74AEC9;
3682
    color: #fff;
3683
    padding: 4px 10px;
3684
    font-size: 0.8em;
3685
    width: 338px;
3686
    margin-left: 5px;
3687
    float: left;
3688
}
3689

    
3690
.single .column2 .machine-details {
3691
    float: right;
3692
    text-align: right;
3693
    font-size: 90%;
3694
    width: 210px;
3695
    margin-right: 10px;
3696
    margin-top: 10px;
3697
}
3698

    
3699
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3700
    margin-bottom: 13px;
3701
}
3702

    
3703
.single .tags {
3704
    clear: both;
3705
    margin-bottom: 10px;
3706
    margin-left: 10px;
3707
}
3708

    
3709
.single .tags-label {
3710
    float: left;
3711
    padding: 0 5px;
3712
    width: 30px;
3713
}
3714

    
3715
.single .tags-down-arrow {
3716
    background: url("../images/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3717
    float: left;
3718
    height: 16px;
3719
    width: 9px;
3720
}
3721

    
3722
.single .toggler-header .info-header{
3723
    padding-top:0;
3724
    padding-bottom:0;
3725
}
3726

    
3727
.single .toggler-header {
3728
    font-size: 0.62em;
3729
    cursor: pointer;
3730
    float: left;
3731
    margin-bottom:5px;
3732
}
3733

    
3734
.single .toggler-header span.label {
3735
    font-size: 104%;
3736
}
3737

    
3738
.fixed-ips-list .empty-list {
3739
  font-size: 0.9em !important;
3740
}
3741

    
3742
.single .ips-content.toggler-content {
3743
  padding: 0;
3744
}
3745

    
3746
.single .ips-content.toggler-content .action-container {
3747
  display: none !important;
3748
}
3749

    
3750
.single .toggler-content {
3751
    background-color: #84B7D0;
3752
    clear: both;
3753
    height: auto;
3754
    padding-bottom: 5px;
3755
    padding-top: 5px;
3756
    width: 339px;
3757
}
3758

    
3759
.single .column3 {
3760
    background-color: #A1C8DB;
3761
    width: 150px;
3762
    overflow: visible;
3763
    padding-bottom: 10px;
3764
    position: absolute;
3765
    right: 20px;
3766
    top: 130px;
3767
}
3768

    
3769
.single .col3 {
3770
    float: right;
3771
    width: 150px;
3772
    margin-right: 15px;
3773
    margin-bottom: 15px;
3774
}
3775

    
3776
.single .column3 .controls {
3777
    font-size: 80%;
3778
    height: 20px;
3779
    padding-left: 7px;
3780
    padding-right: 7px;
3781
    padding-top: 8px;
3782
    padding-bottom: 5px;
3783
    border-bottom: 1px solid #84B7D0;
3784
}
3785

    
3786
.single .column3 .vm-control:hover {
3787
    background-color: #5CA1C0;
3788
}
3789

    
3790
.single .column3 .previous {
3791
    float:left;
3792
    width: 72px;
3793
}
3794

    
3795
.single .column3 .next {
3796
    float: right;
3797
    text-align: center;
3798
    width: 60px;
3799
}
3800

    
3801
.single .column3 .next-label {
3802
    float: right;
3803
    margin-right: 3px;
3804
    margin-top: -2px;
3805
}
3806

    
3807
.single .column3 .next-arrow {
3808
    float: right;
3809
    height: 18px;
3810
    width: 10px;
3811
    background: url("../images/right-arrow.png") no-repeat scroll 3px 2px transparent;
3812
}
3813

    
3814
.single .column3 .prev-label {
3815
    float: left;
3816
    margin-left: 3px;
3817
    margin-top: -2px;
3818
}
3819

    
3820
.single .column3 .prev-arrow {
3821
    background: url("../images/left-arrow.png") no-repeat scroll 3px 2px transparent;
3822
    float: left;
3823
    height: 18px;
3824
    width: 10px;
3825
}
3826

    
3827
.single .column3 .separator {
3828
    width: 135px;
3829
    height: 1px;
3830
    background-color: #84B7D0;
3831
    margin: 0 0 0 7px;
3832
    clear: both;
3833
}
3834

    
3835
.single .column3 .servers {
3836
    font-size: 80%;
3837
    line-height: 15px;
3838
    padding-top: 10px;
3839
    text-align: right;
3840
    overflow: visible;
3841
    position: relative;
3842
}
3843

    
3844
.single .column3 .server-name {
3845
    margin-left: 10px;
3846
    padding-right: 5px;
3847
    cursor: pointer;
3848
    padding-bottom: 2px;
3849
}
3850
div.single div.column3 div.server-name:hover {
3851
    background-color: #5CA1C0;
3852
}
3853
.single .column3 .column3-selected {
3854
    background-color: #84B7D0;
3855
    color: white;
3856
    opacity: 0.8;
3857
    padding-left: 9px;
3858
    width: 160px;
3859
    filter: alpha(opacity = 80);
3860
    position: relative;
3861
    width: 126px;
3862
}
3863

    
3864
.single .toggler {
3865
    color: #FFFFFF;
3866
    float: right;
3867
    font-size: 140%;
3868
}
3869

    
3870
.single .cpu-usage, .single .network-usage {
3871
    text-align: center;
3872
    padding-top: 15px;
3873
    margin-bottom: 5px;
3874
    font-size: 90%;
3875
    font-weight: bold;
3876
}
3877

    
3878
.single .cpu-graph, .single .network-graph {
3879
    margin-left: 20px;
3880
    margin-bottom:30px;
3881
    width: 660px;
3882
}
3883

    
3884
.single div.lower .stats-select .stats-select-option.selected {
3885
    background-color: #4085A5;
3886
    color: #fff;
3887
}
3888

    
3889
.single div.lower .stats-select .stats-select-option {
3890
    cursor: pointer;
3891
    background-color: #DDF1FB;
3892
    color: #4085A5;
3893
    display: block;
3894
    float: left;
3895
    padding: 7px 10px;
3896
    font-size: 0.7em;
3897
}
3898

    
3899
.single div.lower img.stats {
3900
    margin-left: 82px;
3901
}
3902

    
3903
.single div.lower img.stats {
3904
    display: none;
3905
}
3906

    
3907
.single .single-image {
3908
    width: 126px;
3909
    height: 136px;
3910
    margin-bottom: 10px;
3911
    margin-left: 4px;
3912
    background-image: url("../images/icons/machines/large/unknown-sprite.png");
3913
    background-repeat: no-repeat;
3914
    cursor: pointer;
3915
}
3916

    
3917
.single .vm-icon.state1,
3918
.single .single-image-state1 {
3919
    background-position: 0px 0;
3920
}
3921

    
3922
.single .vm-icon.state3,
3923
.single .single-image-state3 {
3924
    background-position: -252px 0;
3925
}
3926

    
3927
.single .vm-icon.state4,
3928
.single .single-image-state4 {
3929
    background-position: -378px 0;
3930
}
3931

    
3932
.single .vm-icon.state2,
3933
.single .single-image-state2 {
3934
    background-position: -126px 0;
3935
}
3936

    
3937
.single .column3 .previous, .single .column3 .next {
3938
    cursor: pointer;
3939
    background-color: #84B7D0;
3940
    color: white;
3941
    font-size: 100%;
3942
    height: 15px;
3943
    padding-top: 2px;
3944
}
3945

    
3946
.single .column3 .disabled {
3947
    opacity: 0.5;
3948
    filter: alpha(opacity = 50);
3949
}
3950

    
3951
.single div.lower {
3952
    clear:both;
3953
    background: #EFF7FA repeat scroll 0 0;
3954
    width: 700px;
3955
    padding-bottom: 15px;
3956
}
3957

    
3958
.single div.upper {
3959
    background: transparent;
3960
    margin-bottom: 10px;
3961
    overflow: visible;
3962
    overflow: hidden;
3963
    width: 700px;
3964
    background: #EFF7FA repeat scroll 0 0;
3965
}
3966

    
3967
/* console css */
3968
.console-header-logo {
3969
    padding-top: 16px;
3970
    margin-left: 30px;
3971
    position: fixed;
3972
}
3973

    
3974
.console-header-logo img {
3975
    max-width:100%;
3976
    max-height:65px;
3977
}
3978

    
3979
#console-header div.help-text {
3980
    font-size: 70%;
3981
    font-weight:bold;
3982
    color:#FFFFFF;
3983
    position: absolute;
3984
    height: 20px;
3985
    top: 79px;
3986
}
3987

    
3988
div.console-container {
3989
    margin: 0 0em;
3990
    height: auto;
3991
}
3992

    
3993
#wrapper.console {
3994
    width: auto;
3995
}
3996

    
3997
.console-info {
3998
    font-size:80%;
3999
    color: white;
4000
    position:absolute;
4001
    margin: 15px 0 0 480px;
4002
}
4003

    
4004
applet {
4005
    width:100%;
4006
    height:100%;
4007
}
4008

    
4009
div.console-footer {
4010
    /* this is for version 0.5*/
4011
    display: none;
4012
}
4013

    
4014
.console-footer #footer-text{
4015
    float:left;
4016
    left: auto;
4017
    margin-left:30px;
4018
}
4019

    
4020
/* add network wizard (see also #wizard for shared classes) */
4021
#networks-wizard .header {
4022
    background-color: #4085A5;
4023
    height: 56px;
4024
}
4025

    
4026
#networks-wizard div.name-input {
4027
    margin: 75px 0 0 55px;
4028
}
4029

    
4030
#networks-wizard input {
4031
    border: 1px solid #CCCCCC;
4032
    color: #445566;
4033
    letter-spacing: 1px;
4034
    width: 170px;
4035
}
4036

    
4037
#networks-wizard span.help {
4038
    font-style: italic;
4039
    font-size: 80%;
4040
    margin-left: 10px;
4041
}
4042

    
4043
#networks-wizard .separator-end {
4044
    background-color: #387693;
4045
    height: 6px;
4046
    width: 479px;
4047
    margin-left: -13px;
4048
    margin-top: 19px;
4049
}
4050

    
4051
.red {
4052
    color: red;
4053
}
4054

    
4055
/* add server to network wizard (see also #metadata-wizard for shared classes) */
4056
#add-machines-wizard span.machine-name {
4057
    margin-left: 4px;
4058
    vertical-align: text-top;
4059
}
4060

    
4061
#add-machines-wizard img.list-logo {
4062
    margin: 2px 1px 1px;
4063
}
4064

    
4065
.css-panes {
4066
    clear: both;
4067
    position: relative;
4068
    z-index: 10;
4069
}
4070

    
4071
.last .firewall-content {
4072
}
4073

    
4074
#pub .last .network-separator {
4075
    display:none;
4076
}
4077

    
4078
.public-networks .empty-network-slot {
4079
    display: none;
4080
}
4081

    
4082
.clearfix {
4083
    display: block;
4084
    width: auto;
4085
    zoom: 1;
4086
}
4087

    
4088
/* float clearing for all browsers except the devil one */
4089
.clearfix:after{
4090
  clear: both;
4091
  content: ".";
4092
  display: block;
4093
  height: 0;
4094
  visibility: hidden;
4095
  font-size: 0;
4096
}
4097

    
4098
* html .clearfix {
4099
    display: inline-block;
4100
}
4101

    
4102
.icon .cont-toggler {
4103
    margin-top: -1px;
4104
}
4105

    
4106
.icon .wave {
4107
    margin-right: 4px !important;
4108
    margin-top: 15px !important;
4109
}
4110

    
4111
.icon .status {
4112
    margin-right: 3px;
4113
}
4114

    
4115
#machinesview .status, .single .state {
4116
    font-size: 75%;
4117
}
4118

    
4119
#machinesview-list div.action-indicator {
4120
    margin:0 !important;
4121
    float: none !important;
4122
}
4123

    
4124
.icon div.action-indicator {
4125
    margin-top: 14px;
4126
    margin-right: 4px;
4127
}
4128

    
4129
div.action-indicator {
4130
    width: 15px;
4131
    height: 20px;
4132
    background-repeat: no-repeat;
4133
    background-position: 0 0;
4134
}
4135

    
4136
tbody.machines div.action-indicator {
4137
    position: relative;
4138
    top: -2px;
4139
}
4140
div.state .connect, tbody.machines .connect {
4141
    background-image: url("../images/icons/actions/medium/connect.png");
4142
}
4143
div.state .disconnect, tbody.machines .disconnect {
4144
    background-image: url("../images/icons/actions/medium/disconnect.png");
4145
}
4146
div.state .destroy, tbody.machines .destroy {
4147
    background-image: url("../images/icons/actions/medium/destroy.png");
4148
}
4149
div.state .console, tbody.machines .console {
4150
    background-image: url("../images/icons/actions/medium/console.png");
4151
}
4152
div.state .start, tbody.machines .start {
4153
    background-image: url("../images/icons/actions/medium/start.png");
4154
}
4155
div.state .resize, tbody.machines .resize {
4156
    background-image: url("../images/icons/actions/medium/resize.png");
4157
}
4158
div.state .snapshot, tbody.machines .snapshot {
4159
    background-image: url("../images/icons/actions/medium/snapshot.png");
4160
}
4161
div.state .reboot, tbody.machines .reboot {
4162
    background-image: url("../images/icons/actions/medium/reboot.png");
4163
}
4164
div.state .shutdown, tbody.machines .shutdown {
4165
    background-image: url("../images/icons/actions/medium/shutdown.png");
4166
}
4167

    
4168
h3.overlay-inner-title {
4169
    color: #4085A5;
4170
    font-size: 2em;
4171
}
4172

    
4173
#add-name-container {
4174
    margin-bottom: 10px;   
4175
}
4176

    
4177
.remove-field-trigger, .add-field-trigger {
4178
    cursor: pointer;
4179
}
4180

    
4181
.add-field-trigger img {
4182
    vertical-align: middle;
4183
}
4184

    
4185
.machine-now-building {
4186
    padding-right: 15px !important;
4187
    text-align: justify;
4188
}
4189

    
4190
.sub-text {
4191
    padding-top: 15px;
4192
    padding-right: 15px;
4193
    text-align: justify;
4194
    font-style: italic;
4195
    font-size: 0.8em !important;
4196
}
4197

    
4198
#notification-box a {
4199
    color: #4085A5;
4200
}
4201

    
4202
#notification-box .machine-title img {
4203
    vertical-align: middle;
4204
}
4205

    
4206
#notifiaction-box .password-header {
4207
    margin-bottom: 0 !important;
4208
}
4209

    
4210
#notification-box .password-container a {
4211
    color: #fff;
4212
    text-decoration: underline;
4213
}
4214

    
4215
#notification-box .password-container a:hover {
4216
    background-color: #fff;
4217
    color: #4085A5;
4218
}
4219

    
4220
#notification-box .password-container {
4221
    background: #4085A5;
4222
    border: none;
4223
}
4224

    
4225
#notification-box .password-container .password a {
4226
    font-weight: normal !important;
4227
}
4228

    
4229
#notification-box .cmd {
4230
    color: #fff;
4231
    font-family: monospace;
4232
    font-size: 1.6em;
4233
}
4234

    
4235
.machine-container .separator {
4236
    background-color: #B0D1E0;
4237
}
4238

    
4239
#creation-password-overlay div.password-cont {
4240
    margin: 10px auto;
4241
    padding: 10px;
4242
    border: 2px solid #75B54A;
4243
    background-color: #AADE87;
4244
    color: #447821;
4245
    text-align: left;
4246
    padding-left: 5em;
4247
    position: relative;
4248
}
4249

    
4250
#creation-password-overlay {
4251
    position: relative;
4252
}
4253

    
4254
#creation-password-overlay .form-action {
4255
    position: absolute;
4256
    bottom: 15px;
4257
    right: 13px;
4258
    font-size: 0.8em;
4259
}
4260

    
4261
#creation-password-overlay .password-label {
4262
    float: left;
4263
}
4264

    
4265
#creation-password-overlay .password {
4266
    font-size: 1.5em;
4267
    font-weight: bold;
4268
    letter-spacing: 2px;
4269
    font-family: Georgia, Times, serif;
4270
    margin-right: 5em;
4271
    float: right;
4272
    margin-top: -4px;
4273
}
4274

    
4275
.feedback-form .description {
4276
    margin-bottom: 25px;
4277
}
4278

    
4279
.feedback-form label {
4280
    display: block;
4281
    font-weight: bold;
4282
    margin-bottom: 10px;
4283
    font-size: 0.8em;
4284
}
4285

    
4286
.feedback-form .form-actions {
4287
    border-top: none;
4288
}
4289

    
4290
.nospace {
4291
    padding-top: 0 !important;
4292
    padding-bottom: 0 !important;
4293
}
4294

    
4295
.noborder {
4296
    border-top: none !important;
4297
    border-bottom: none !important;
4298
}
4299

    
4300
.overlay .feedback-form .messages.description {
4301
    padding-bottom:0;
4302
    margin-bottom: 0;
4303
}
4304

    
4305
.feedback-form .messages .error-message {
4306
    color: #f00;
4307
}
4308

    
4309
.feedback-form .messages .success-message {
4310
    color: #8AA87F;
4311
}
4312

    
4313
.feedback-form .feedback-message {
4314
    width: 548px;
4315
    height: 200px;
4316
    border: 1px solid #ddd;
4317
    padding: 5px;
4318
}
4319

    
4320
#feedback-form .empty-error-msg {
4321
    display: none;
4322
}
4323

    
4324
#feedback-form .data-text {
4325
    display: none;
4326
}
4327

    
4328
#feedback-form .message {
4329
    display: none;
4330
}
4331

    
4332
#feedback-form label {
4333
    display: block;
4334
    font-size: 0.85em;
4335
    font-weight: bold;
4336
}
4337

    
4338
#feedback-form label.inline {
4339
    display: inline;
4340
    padding-left: 5px;
4341
}
4342

    
4343
#feedback-form p {
4344
    padding: 1em 0;
4345
    color: #444;
4346
    margin-bottom: 10px;
4347
}
4348

    
4349
#feedback-form .description {
4350
    font-style: italic;
4351
    font-size: 0.9em;
4352
    color: #888;
4353
}
4354

    
4355
#feedback-form .feedback-text {
4356
    width: 98%;
4357
    height: 100px;
4358
    margin-top: 10px;
4359
    margin-bottom: 10px;
4360
}
4361

    
4362
#feedback-form .submit-data {
4363
    display: none;
4364
}
4365

    
4366
#feedback-form .submit, #invform .submit {
4367
    background-color: #4085A5;
4368
    color: #fff;
4369
    border: none;
4370
    padding: 5px 16px;
4371
    cursor: pointer;
4372
    font-size: 1em;
4373
    position: relative;
4374
}
4375

    
4376
#feedback .submit {
4377
    float: right;
4378
    right: 10px;
4379
    margin-top: 10px;
4380
}
4381

    
4382

    
4383
#feedback-form .submit:hover, #invform .submit:hover {
4384
    background-color: #549FC3;
4385
}
4386

    
4387
.feedback-intro {
4388
    padding-right: 15px !important;
4389
    text-align: justify;
4390
}
4391

    
4392
.popup-body .message {
4393
    padding: 20px 5px;
4394
    display: none;
4395
}
4396

    
4397
.popup-body .loading {
4398
    color: #fff;
4399
}
4400

    
4401
.popup-body .success {
4402
    color: #1F921A;
4403
}
4404

    
4405
.popup-body .errormsg {
4406
    color: #E32424;
4407
}
4408

    
4409

    
4410
.close-msg-box {
4411
    display: block;
4412
    margin-top: 10px;
4413
    cursor: pointer;
4414
    color: #4085A5;
4415
    text-decoration: underline;
4416
}
4417

    
4418

    
4419
.console .ip-version-label {
4420
    margin: 0 5px;
4421
}
4422

    
4423
.ipv6-text, .ipv4-text {
4424
    font-size: 0.9em;
4425
}
4426

    
4427
.fqdn {
4428
}
4429

    
4430
.column2 .fqdn {
4431
  padding: 3px 10px;
4432
}
4433

    
4434
.tooltip {
4435
    background-color: #C4DDE9;
4436
    color: #000;
4437
    font-size: 0.7em;
4438
    padding: 0.2em 0.5em;
4439
    border: 1px solid #888;
4440
    z-index: 50000;
4441
}
4442

    
4443
/*404 and 500 pages*/
4444

    
4445
.error_page {
4446
    position: relative;
4447
    top: 40px;
4448
    padding-bottom: 140px !important;
4449
}
4450

    
4451
.error_page h1 {
4452
    font-weight: normal;
4453
}
4454

    
4455
.error_page .msg_header {
4456
    margin: 0px;
4457
    font-size: 10em;
4458
    position: absolute;
4459
    left: -5px;
4460
    top: 0px;
4461
    color: #4085A5;
4462
    font-family: arial, verdana;
4463
}
4464

    
4465
.error_page p.error_desc {
4466
    color: #fff;
4467
    font-size: 0.8em;
4468
}
4469

    
4470
.error_page {
4471
    padding-right: 50px !important;
4472
    padding-left: 100px !important;
4473
}
4474

    
4475
.error_page .error_content {
4476
    padding-left: 150px;
4477
    padding-top: 97px;
4478
}
4479

    
4480
.error_page .error_content .links, .info_content .links {
4481
    margin-top: 10px;
4482
    margin-left: 20px;
4483
}
4484

    
4485
.error_page .http_error .code {
4486
    letter-spacing: -10px;
4487
    font-size: 9em;
4488
}
4489

    
4490
.error_page .http_error .msg {
4491
    letter-spacing: -1px;
4492
    font-size: 2em;
4493
}
4494

    
4495
.error_page .http_error {
4496
    position: absolute;
4497
    right: 0px;
4498
    bottom: 0px;
4499
    color: #75B3D0;
4500
    line-height: 1em;
4501
}
4502

    
4503
.error_page .error_content a, .info_content .links a {
4504
    color: #4085A5;
4505
    font-weight: bold;
4506
    margin-right: 10px;
4507
    font-size: 0.9em;
4508
}
4509

    
4510
.error_body #container, .info_body #container {
4511
    background-position: right 200px;
4512
}
4513

    
4514
.info_page h1 {
4515
    color: #4085A5;
4516
    font-size: 2em;
4517
    font-weight: normal;
4518
}
4519

    
4520
.info_page p {
4521
    color: #ffffff;
4522
    margin: 1em 0;
4523
}
4524

    
4525
.info_body p a, .error_body p a{
4526
    color: #4085A5;
4527
    text-decoration: underline;
4528
}
4529

    
4530
.error_404 .http_error .code {
4531
    letter-spacing: -7px;
4532
}
4533

    
4534
.network-progress-indicator {
4535
    position: relative;
4536
    display: none;
4537
}
4538

    
4539
.network-progress-indicator img {
4540
    position: absolute;
4541
    bottom: 44px;
4542
    left: 340px;
4543
}
4544

    
4545

    
4546
.single .progress-message {
4547
    margin-top: 90px;
4548
    font-size: 0.6em;
4549
    padding: 0 10px;
4550
    text-align: center;
4551
}
4552

    
4553
/*metadata keys/values*/
4554
.items .tag-item  {
4555
    display: block;
4556
}
4557

    
4558
.single .items .tag-item .key {
4559
    width: 60px;
4560
}
4561

    
4562
.running .scrollable, .terminated .scrollable {
4563
    height: 42px;
4564
}
4565

    
4566
.items .tag-item .key {
4567
    margin-right: 5px;
4568
    width: 30px;
4569
    display: block;
4570
    float: left;
4571
    color: #000;
4572
}
4573

    
4574
.items .tag-item .value {
4575
    color: #444;
4576
}
4577

    
4578
#machinesview-list {
4579
    display: none;
4580
}
4581

    
4582
#machinesview-single {
4583
    position: relative;
4584
    display: none;
4585
}
4586

    
4587
#machinesview-icon {
4588
    display: none;
4589
}
4590

    
4591
#machinesview-icon, #machinesview-single, #machinesview-list {
4592
    
4593
}
4594

    
4595
tbody.machines .spinner {
4596
    margin-top: 0!important;
4597
    margin: 0 !important;
4598
    float: none !important;
4599
}
4600

    
4601
.slider .slider-point {
4602
    width: 4px;
4603
    height: 3px;
4604
    margin-left: 1px;
4605
    background-color: transparent;
4606
    display: block;
4607
    position: absolute;
4608
    z-index: 10;
4609
    bottom: 0px;
4610
}
4611

    
4612
.slider .slider-point-light {
4613
    background-color: transparent;
4614
}
4615

    
4616
.slider-point-text {
4617
    font-size: 0.6em;
4618
    position: absolute;
4619
    top: 4px;
4620
    border-top: 5px solid #C5DEE9;
4621
    padding: 3px;
4622
    color: #4085A5;
4623
    display: block;
4624
    min-width: 6px;
4625
    text-align: middle;
4626
}
4627

    
4628
.slider .handle {
4629
    z-index: 50;
4630
}
4631

    
4632
.modal p.desc {
4633
    margin: 5px 0;
4634
    margin-left: 37px;
4635
    font-size: 0.8em;
4636
    color: #888;
4637
}
4638

    
4639
.api_overlay_template {
4640
    display: none;
4641
}
4642

    
4643
.api_content .password-container .password {
4644
    color: #fff;
4645
    font-size: 1.1em;
4646
}
4647

    
4648
#disks-pane {
4649
    margin-top: 58px;
4650
}
4651

    
4652
span.resend-msg {
4653
    display: block;
4654
    margin-bottom: 5px;
4655
}
4656

    
4657
.success-msg {
4658
    background-color: #5CAD54;
4659
    color: #fff;
4660
    padding: 0.4em;
4661
    border: 1px solid #ddd;
4662
}
4663

    
4664
.error-msg {
4665
    background-color: #800000;
4666
    color: #fff;
4667
    padding: 0.4em;
4668
    border: 1px solid #ddd;
4669
}
4670

    
4671
.success-msg em, .error-msg em {
4672
    font-weight: bold;
4673
    font-style: normal;
4674
    font-size: 0.9em;
4675
}
4676

    
4677
.pagination {
4678
            font-size: 80%;
4679
        }
4680
        
4681
.pagination a {
4682
    text-decoration: none;
4683
        border: solid 1px #AAE;
4684
        color: #15B;
4685
}
4686

    
4687
.pagination a, .pagination span {
4688
    display: block;
4689
    float: left;
4690
    padding: 0.3em 0.5em;
4691
    margin-right: 5px;
4692
        margin-bottom: 5px;
4693
        min-width:1em;
4694
        text-align:center;
4695
}
4696

    
4697
.pagination .current {
4698
    background: #4085A5;
4699
    color: #fff;
4700
        border: solid 1px #AAE;
4701
}
4702

    
4703
.pagination .current.prev, .pagination .current.next{
4704
        color:#999;
4705
        border-color:#999;
4706
        background:#fff;
4707
}
4708

    
4709
table.list-machines .wave {
4710
    float: none !important;
4711
    margin: 0 !important;
4712
}
4713

    
4714
.overlay {
4715
    display: none;
4716
}
4717

    
4718
.overlay .copy-content .clip-copy  {
4719
    right: 10px;
4720
    top:8px;
4721
    border: 1px solid #fff;
4722
}
4723

    
4724
.overlay .copy-content {
4725
    background-color: #387693;
4726
    color: #fff;
4727
    padding: 10px;
4728
    font-size: 1.2em;
4729
    text-align: center;
4730
    position: relative;
4731
}
4732

    
4733
.overlay {
4734
    background-color: #fff;
4735
    border: 2px solid #444;
4736
    text-align: left;
4737

    
4738
    -moz-box-shadow: 0 0 90px 5px #000;
4739
    -webkit-box-shadow: 0 0 90px 5px #000;
4740
    box-shadow: 0 0 90px 5px #000;
4741
    width: 600px;
4742
}
4743

    
4744
.overlay.overlay-createvm {
4745
    width: 640px;
4746
}
4747

    
4748
.overlay a {
4749
    color: #387693;
4750
}
4751

    
4752
.overlay .diagnostics-list {
4753
    height: 400px;
4754
    overflow: scroll;
4755
    overflow-y: scroll;
4756
    overflow-x: hidden;
4757
}
4758

    
4759
.overlay .overlay-content .description.subinfo, .overlay .extra-info {
4760
    margin-bottom:0;
4761
    border-bottom: none;
4762
    padding-bottom:0;
4763
    margin-top: 10px;
4764
    padding-top:10px;
4765
    border-top: 1px solid #64a6c4;
4766
    /*border-top: 1px solid #DBE6EB;*/
4767
    font-size: 0.8em;
4768
}
4769

    
4770
.overlay .v6-warn .important {
4771
  display: block;
4772
  margin: 8px 0;
4773
  font-weight: normal;
4774
  font-size: 0.8em;
4775
  border: 1px solid #800;
4776
  background-color: #a00;
4777
  color: #fff !important;
4778
  padding: 5px 10px;
4779
}
4780

    
4781
.overlay .overlay-content .important {
4782
    color: #800000;
4783
}
4784

    
4785
.overlay .overlay-content .description.noborder {
4786
  margin-bottom:0;
4787
  border:0;
4788
}
4789

    
4790
.overlay .overlay-content .description {
4791
    color: #444;
4792
    border-bottom: 1px solid #64a6c4;
4793
    margin-bottom: 10px;
4794
    padding-bottom: 10px;
4795
    font-size: 0.9em;
4796
    line-height: 1.6em;
4797
}
4798

    
4799
.overlay .overlay-content .empty-message {
4800
    margin-bottom: 10px;
4801
}
4802

    
4803
.overlay h3.overlay-header {
4804
    font-size: 0.9em;
4805
    text-align: left;
4806
    padding: 0.8em;
4807
    padding-left: 1em;
4808
    font-weight: normal;
4809
    border-bottom: 1px solid #ddd;
4810
}
4811

    
4812
.overlay h3.overlay-header .title {
4813
    float: left;
4814
}
4815

    
4816
.overlay .container {
4817
    position: relative;
4818
    padding-top: 1em;
4819
    padding: 0.5em;
4820
    background-image: url("../images/popup-bg.png");
4821
    background-repeat: repeat-x;
4822
}
4823

    
4824
.overlay .content {
4825
    background-color: transparent;
4826
    background-image: url("../images/popup-inner-bg.png");
4827
    padding: 1em;
4828
    font-size: 0.8em;
4829
    background-repeat: repeat-x;
4830
    -moz-box-shadow: 0 0 1px 1px #888;
4831
    -webkit-box-shadow: 0 0 1px 1px #888;
4832
    box-shadow: 0 0 1px 1px #888;
4833
}
4834

    
4835
.overlay .message {
4836
}
4837

    
4838
.overlay .actions {
4839
    position: absolute;
4840
    right: 0.75em;
4841
    top: 0.6em;
4842
}
4843

    
4844
.overlay .actions span {
4845
    font-size: 0.8em;
4846
    color: #fff;
4847
    cursor: pointer;
4848
    margin-left: 10px;
4849
    display: block;
4850
    float: left;
4851
    background-color: #4085A5;
4852
    padding: 0.2em 0.4em;
4853
}
4854

    
4855
.overlay-error .error-more-details {
4856
    margin-top: 5px;
4857
    max-height: 210px;
4858
    overflow: auto;
4859
}
4860

    
4861
.overlay-error .key.details.expand {
4862
    background-image: url("../images/plus-8.png");
4863
}
4864

    
4865
.overlay-error .key.details {
4866
    background-color: #5189A3;
4867
    cursor: pointer;
4868
    background-image: url("../images/minus-8.png");
4869
    background-repeat: no-repeat;
4870
    background-position: 545px;
4871
}
4872

    
4873
.overlay-error .container {
4874
    padding-top: 1.9em;
4875
}
4876

    
4877
.overlay-error .error-details {
4878
    font-size: 0.8em;
4879
    margin-top: 10px;
4880
}
4881

    
4882
.overlay-error .error-details anonymous {
4883
    display: block;
4884
    margin-top: 10px;
4885
}
4886

    
4887
.overlay-error h3.overlay-header {
4888
    background-color: #800000;
4889
    color: #fff;
4890
}
4891

    
4892
.overlay-error.non-critical h3.overlay-header {
4893
    background-color: #987249;
4894
}
4895

    
4896
.overlay-error span.key {
4897
    font-weight: normal;
4898
    display: block;
4899
    margin-top: 0.5em;
4900
    background-color: #74AEC9;
4901
    color: #fff;
4902
    padding: 0.4em;
4903
    font-size: 0.8em;
4904
    font-weight: bold;
4905
}
4906

    
4907
.overlay-error .indicator {
4908
    background-color: #880000;
4909
    color: #fff;
4910
    padding: 4px;
4911
    display: block;
4912
    float: left;
4913
    border: 1px solid #444;
4914
}
4915

    
4916
.overlay-error .nav-btn:hover {
4917
    
4918
}
4919

    
4920
.overlay-error .nav-btn {
4921
    margin-left: 5px;
4922
    color: #fff;
4923
    display: block;
4924
    float: left;
4925
    padding: 4px;
4926
    background-color: #AAA;
4927
    border: 1px solid #444;
4928
}
4929

    
4930
.overlay-error .error-nav {
4931
    position: absolute;
4932
    right: 0px;
4933
    bottom: -25px;
4934
    font-size: 0.8em;
4935
}
4936

    
4937
.overlay-error span.value, .overlay-error div.value {
4938
    padding: 0.4em;
4939
    display: block;
4940
    margin-bottom: 0.3em;
4941
}
4942

    
4943
.overlay h3 .closeme {
4944
    float: right;
4945
    font-size: 0.7em;
4946
    margin-top: 0.2em;
4947
    cursor: pointer;
4948
}
4949

    
4950
.overlay .overlay-header .subtitle {
4951
    display: block;
4952
    font-size: 0.8em;
4953
    color: #ddd;
4954
}
4955

    
4956
.overlay .overlay-header .subtitle img {
4957
    vertical-align: middle;
4958
    margin-left: 10px;
4959
    margin-bottom: 2px;
4960
}
4961

    
4962
.overlay-info .msg-log-entry .src {
4963
    color: #4085A5;
4964
    float: right;
4965
    font-size: 0.9em;
4966
}
4967

    
4968
.overlay-info .msg-log-entry .date {
4969
    font-style: italic;
4970
}
4971

    
4972
.overlay-info .msg-log-entry pre {
4973
    color: #333;
4974
    width: 100%;
4975
    display: none;
4976
    margin: 10px 0;
4977
}
4978

    
4979
.msg-log-entry.warning {
4980
    color: #E57F01;
4981
}
4982

    
4983
.overlay-info .msg-log-entry.with-details .src {
4984
    margin-right: 15px;
4985
}
4986

    
4987
.overlay-info .msg-log-entry.with-details {
4988
    cursor: pointer;
4989
}
4990

    
4991
.overlay-info .msg-log-entry.with-details {
4992
    background-image: url("../images/plus-8-dark.png");
4993
    background-repeat: no-repeat;
4994
    background-position: 99% 9px;
4995
}
4996

    
4997
.overlay-info .msg-log-entry.with-details.expanded {
4998
    background-image: url("../images/minus-8-dark.png");
4999
}
5000

    
5001
.overlay-info .msg-log-entry .msg {
5002
    display: inline-block;
5003
    margin-left: 10px;
5004
}
5005

    
5006
.overlay-info .msg-log-entry {
5007
    border-bottom: 1px solid #aaa;
5008
    padding: 5px;
5009
}
5010

    
5011
.overlay-info .description.subinfo {
5012
    border: none !important;
5013
    padding-top: 0 !important;
5014
}
5015

    
5016
.overlay-info .content {
5017
    background-repeat: no-repeat;
5018
    background-position: 110% 110%;
5019
    background-color: rgba(255,255,255,0.6)
5020
}
5021

    
5022
.overlay-info .overlay-header {
5023
    background-color: #4085A5;
5024
}
5025

    
5026
.overlay-info .overlay-header .title {
5027
    color: #fff;
5028
}
5029

    
5030
.overlay-info .overlay-header .closeme {
5031
    color: #fff;
5032
}
5033

    
5034
#loading-view {
5035
    width: 400px;
5036
    margin: 0 auto;
5037
    padding: 20px 0;
5038
    font-size: 0.8em;
5039
}
5040

    
5041
#loading-view .header.off {
5042
    color: #829096;
5043
}
5044

    
5045
#loading-view .header.on {
5046
    color: #fff;
5047
    background-image: url("../images/icons/indicators/small/progress.gif");
5048
}
5049

    
5050
#loading-view .header.done {
5051
    color: #2B6681;
5052
    background-image: url("../images/check.png");
5053
}
5054

    
5055
#loading-view .header {
5056
    font-size: 0.9em;
5057
    text-align: left;
5058
    border-bottom: 1px solid #578BA3;
5059
    margin-bottom: 10px;
5060
    padding-bottom: 6px;
5061
    background-repeat: no-repeat;
5062
    background-position: 380px 0px;
5063
}
5064

    
5065
#loading-view .header span {
5066
    font-weight: bold;
5067
    color: #4085A5;
5068
}
5069

    
5070
#loading-view .info {
5071
    color: #ddd;
5072
}
5073

    
5074
.options-list {
5075
    margin-top: 0.5em;
5076
    font-size: 0.8em;
5077
}
5078

    
5079
.options-list.four li {
5080
    float: left;
5081
    display: block;
5082
    width: 25%;
5083
    margin-bottom: 5px;
5084
}
5085

    
5086
.options-list.five li:nth-child(4n) .options-object-cont {
5087
    margin-right: 0;
5088
}
5089

    
5090
.options-list.five li {
5091
    float: left;
5092
    display: block;
5093
    width: 20%;
5094
    margin-bottom: 5px;
5095
}
5096

    
5097
.options-list.five li:nth-child(5n) .options-object-cont {
5098
    margin-right: 0;
5099
}
5100

    
5101
.options-object-cont input {
5102
    border: 1px solid #aaa;
5103
    width: 92px;
5104
    padding: 0;
5105
    margin: 0;
5106
    margin-top:3px;
5107
    padding: 2px;
5108
}
5109

    
5110
.options-list.three li {
5111
    float: left;
5112
    display: block;
5113
    width: 33%;
5114
    margin-bottom: 5px;
5115
}
5116

    
5117
.meta-list .options-list.three li.options-object.create .options-object-cont {
5118
  background-position: 95% 5px;
5119
}
5120

    
5121
.meta-list .options-list.four li.options-object.create .options-object-cont {
5122
  background-position: 97% 5px;
5123
}
5124

    
5125
.meta-list .options-list li.options-object.create .options-object-cont {
5126
    background-image: url("../images/option-action-add.png");
5127
    background-repeat: no-repeat;
5128
    background-position: 90px 5px;
5129
}
5130

    
5131
.meta-list .options-list li .options-object-cont .option-action,
5132
.meta-list .options-list li.options-object.create {
5133
    cursor: pointer !important;
5134
}
5135

    
5136
.meta-list .options-list li .options-object-cont {
5137
    cursor: inherit;
5138
}
5139

    
5140
.options-list li .options-object-cont {
5141
    padding: 5px;
5142
    margin-right: 4px;
5143
    border: 1px solid #A6D1E6;
5144
    cursor: pointer;
5145
    min-height: 35px;
5146
    position: relative;
5147
}
5148

    
5149
.options-list.three li:nth-child(3n) .options-object-cont {
5150
    margin-right: 0;
5151
}
5152

    
5153
.options-list li.selected .options-object-cont {
5154
    background-color: #efefef;
5155
    border: 2px solid #4085A5;
5156
    padding: 4px;
5157
}
5158

    
5159
.options-list li.selected .options-object-cont .title {
5160
}
5161

    
5162
.options-list li.options-object .title {
5163
    display: block;
5164
    color: #FF7F2A;
5165
    margin-bottom: 2px;
5166
}
5167

    
5168
.options-list li .option-action {
5169
    display: none;
5170
    position: absolute;
5171
    background-repeat: no-repeat;
5172
}
5173

    
5174
.options-list.five li.editing {
5175
    width: 40%;
5176
}
5177

    
5178
.options-list.five li.editing .value {
5179
    display: none;
5180
}
5181

    
5182
.options-list li .remove {
5183
    background-image: url("../images/option-action-remove.png");
5184
    width:10px;
5185
    height:10px;
5186
    right:5px;
5187
    top: 5px;
5188
}
5189

    
5190
.options-list li .edit {
5191
    background-image: url("../images/option-action-edit.png");
5192
    width:10px;
5193
    height:10px;
5194
    right:5px;
5195
    bottom: 8px;
5196
}
5197

    
5198
.options-list li:hover .option-action  {
5199
    display: block;
5200
}
5201

    
5202
.options-list li.options-object .value {
5203
    color: #4085A5;
5204
    margin-top: 5px;
5205
    display: block;
5206
}
5207

    
5208
.options-list li.selected.options-object .value {
5209
}
5210

    
5211
.options-list li .options-object-cont:hover {
5212
    background-color: #fff;
5213
}
5214

    
5215
.options-list li.selected .options-object-cont:hover {
5216
    background-color: #fff;
5217
}
5218

    
5219
.options-list li img {
5220
    float: left;
5221
    margin:2px;
5222
    margin-right: 10px;
5223
    padding-bottom:10px;
5224
}
5225

    
5226
#network-vms-select-content .empty-list {
5227
  font-size: 1.2em;
5228
}
5229

    
5230
#network-vms-select-content li.options-object .value {
5231
    margin-top: 10px;
5232
    margin-left: 30px;
5233
}
5234

    
5235
#network-vms-select-content li.options-object:hover .options-object-cont,
5236
#network-vms-select-content li.options-object .options-object-cont {
5237
    background-image: url("../images/option-action-add-dark.png");
5238
    background-repeat: no-repeat;
5239
    background-position: 160px 28px;
5240
}
5241

    
5242
#network-vms-select-content li.selected:hover .options-object-cont,
5243
#network-vms-select-content li.selected .options-object-cont {
5244
    background-image: url("../images/option-action-remove.png") !important;
5245
}
5246

    
5247
#metadata-overlay-content .view .value {
5248
    margin-top: 10px;
5249
}
5250

    
5251
#metadata-overlay-content {
5252
    position: relative;
5253
}
5254

    
5255
.vm-meta .editor .predefined .predefined-meta-key:hover {
5256
    background-color: #4e8eac;
5257
    color: #fff;
5258
}
5259

    
5260
.vm-meta .editor .predefined .predefined-meta-key {
5261
    float: left;
5262
    margin-right: 5px;
5263
    padding: 4px;
5264
    display: block;
5265
    cursor: pointer;
5266
}
5267

    
5268
.vm-meta .editor .predefined {
5269
    background-color: #A6D1E6;
5270
    font-size: 0.9em;
5271
    border-top: 1px solid #ddd;
5272
}
5273

    
5274
.vm-meta .editor input {
5275
}
5276
.vm-meta .editor {
5277
    margin-bottom: 10px;
5278
}
5279

    
5280
.vm-meta .editor .form-actions .form-action {
5281
    min-width: 50px;
5282
}
5283

    
5284
.vm-meta .editor .form-field input.meta-key {
5285
    width: 90px;
5286
}
5287

    
5288
.vm-meta .form-field {
5289
    float: left;
5290
}
5291

    
5292
.vm-meta .form-actions .form-action {
5293
    float: left;
5294
    margin-right: 10px;
5295
    height: 11px;
5296
}
5297

    
5298
.vm-meta .editor .form-actions .cancel {
5299
    margin-right: 0;
5300
}
5301

    
5302
.vm-meta .editor .form-actions {
5303
    float: right;
5304
    margin:0;
5305
    padding:0;
5306
    margin-left: 15px;
5307
    margin-top: 0px;
5308
}
5309

    
5310
.vm-meta .editor {
5311
    background-color: rgba(64, 133, 165, 0.898) !important;
5312
    background-color: #649DB8;
5313
    font-size:0.9em;
5314
}
5315

    
5316
.vm-meta .meta-key-title {
5317
    font-size: 1.3em;
5318
    color: #fff;
5319
    margin-bottom: 10px;
5320
    display: none;
5321
    float: left;
5322
}
5323

    
5324
.vm-meta .editor-content {
5325
    padding: 10px;
5326
}
5327

    
5328
.vm-meta .inner-mask {
5329
    background-color: #fff;
5330
    opacity:0.6;
5331
    position: absolute;
5332
    top:0;
5333
    left:0;
5334
}
5335

    
5336
.vm-meta .editor label {
5337
    float: left;
5338
    color: #fff;
5339
    margin-right: 2px;
5340
    padding-top:4px;
5341
    font-size: 0.9em;
5342
}
5343

    
5344
.vm-meta .editor input {
5345
    border: none;
5346
    width: 170px;
5347
    margin-left: 10px;
5348
    font-size: 0.9em;
5349
    padding: 4px;
5350
}
5351

    
5352
.vm-meta li.create .options-object-cont {
5353
    background-color: #B3C9AD ;
5354
    border-color: #788774;
5355
}
5356
.vm-meta li.create .options-object-cont .value,
5357
.vm-meta li.create .options-object-cont .title {
5358
    color: #fff;
5359
}
5360

    
5361
#createvm-overlay-content {
5362
    padding: 0;
5363
}
5364

    
5365
.overlay-createvm .container {
5366
    width: 624px !important;
5367
}
5368

    
5369
.create-vm .vm-network .list-cont.personalize-cont:last-child .confirm-params {
5370
  margin-right: 0!important;
5371
}
5372

    
5373
.create-vm .vm-network .list-cont.personalize-cont:last-child {
5374
  border-right: none;
5375
  margin-right: 0;
5376
  width: 298px;
5377
}
5378

    
5379
.create-vm .vm-network .list-cont.personalize-cont .confirm-params {
5380
  max-height: 240px;
5381
}
5382

    
5383
.create-vm .vm-network .list-cont.personalize-cont {
5384
  height: 330px;
5385
}
5386

    
5387
.create-vm .vm-network .list-cont.personalize-cont {
5388
    width: 47%;
5389
}
5390

    
5391
.create-vm .header-step.current {
5392
    font-weight: bold;
5393
}
5394

    
5395
.create-vm .create-step-cont {
5396
    min-height: 240px;
5397
}
5398
.create-vm .create-controls {
5399
    padding: 10px;
5400
}
5401

    
5402
.create-vm ul li {
5403
    cursor: pointer;
5404
    padding: 4px;
5405
}
5406

    
5407
.create-vm ul li.selected {
5408
    background-color: #aaa;
5409
}
5410

    
5411
.cont-toggler-wrapper {
5412
  float: left;
5413
  margin-right: 5px;
5414
}
5415

    
5416
.cont-toggler-wrapper.disabled .cont-toggler {
5417
  background-color: #C1CED4;
5418
  background-image: url("../images/down-arrow-lighter.png");
5419
  border-right-color: #C1CED4;
5420
}
5421

    
5422
.cont-toggler-wrapper.disabled .cont-toggler .label {
5423
  color: #eee;
5424
  background-color: #B4C1C7;
5425
}
5426

    
5427
.cont-toggler {
5428
    background-image: url("../images/down-arrow.png");
5429
    background-position: right;
5430
    background-repeat: no-repeat;
5431
    background-color: #A1C8DB;
5432
    display: inline-block;
5433
    border-right: 6px solid #A1C8DB;
5434
    padding:2px;
5435
    padding-right: 14px;
5436
    padding-left:0;
5437
    cursor: pointer;
5438
    color: #fff;
5439
    font-size: 0.9em;
5440
    float: left;
5441
    margin-right: 5px;
5442
}
5443

    
5444
.cont-toggler .label {
5445
    background-color: #98BDCF;
5446
    padding: 2px;
5447
    padding-left: 5px;
5448
    padding-right: 5px;
5449
}
5450

    
5451
.cont-toggler.open {
5452
    background-color: #98BDCF;
5453
    border-color: #98BDCF;
5454
    background-image: url("../images/up-arrow.png");
5455
}
5456

    
5457
.cont-toggler.open .label {
5458
    background-color: #4085A5;
5459
}
5460

    
5461
.overlay .form label {
5462
    font-color: #444;
5463
    margin-right: 10px;
5464
}
5465

    
5466
.form-field.error label {
5467
    color: #ff0000;
5468
    text-decoration: underline;
5469
}
5470

    
5471
.form-field input {
5472
    border: 1px solid #aaa;
5473
    width: 200px;
5474
    padding: 3px;
5475
}
5476

    
5477
.form-actions {
5478
    margin-top: 5px;
5479
    padding-top:5px;
5480
    border-top: 1px solid #64a6c4;
5481
    font-size: 0.8em;
5482
}
5483

    
5484
.form-actions.plain {
5485
    margin-top: 0px;
5486
    padding-top:0px;
5487
    border-top: 0px;
5488
}
5489

    
5490
.form-action {
5491
    float: right;
5492
    min-width: 140px;
5493
    background-color: #FF7F2A;
5494
    border: 1px solid #FF7F2A;
5495
    text-align: center;
5496
    color: #FFFFFF;
5497
    cursor: pointer;
5498
    padding: 4px;
5499
}
5500

    
5501
.form-action:hover {
5502
    background-color: #FF9955;
5503
    color: #FFF;
5504
}
5505

    
5506
.form-action.prev,
5507
.form-action.cancel {
5508
    background-color: #800;
5509
    border: 1px solid #800;
5510
    float: left;
5511
}
5512

    
5513
.form-action.prev:hover,
5514
.form-action.cancel:hover {
5515
    background-color: #CC0000;
5516
    color: #fff;
5517
}
5518

    
5519
.form-action.next,
5520
.form-action.ok {
5521
    background-color: #080;
5522
    border: 1px solid #080;
5523
}
5524

    
5525
.form-action.next:hover,
5526
.form-action.ok:hover {
5527
    background-color: #00aa00;
5528
    color: #fff;
5529
}
5530

    
5531
.form-action .create,
5532
.form-action .submit {
5533

    
5534
}
5535

    
5536
.create-button a.in-progress {
5537
  text-indent: -1000px;
5538
}
5539

    
5540
.create-button a.in-progress,
5541
.form-action.in-progress, button.in-progress {
5542
    background-image: url("../images/icons/indicators/medium/horizontal-progress.gif");
5543
    background-repeat: no-repeat;
5544
    background-position: center center;
5545
    color: transparent;
5546
}
5547

    
5548
#createvm-overlay-content {
5549
    padding: 0;
5550
}
5551

    
5552
.create-vm .image-details.selected .size {
5553

    
5554
}
5555

    
5556
.create-vm .image-details .show-details:hover {
5557
    color: #aaa !important; 
5558
}
5559
.create-vm .image-details.selected .show-details:hover {
5560
    color: #fff !important; 
5561
}
5562

    
5563
.create-vm .image-details.selected .show-details,
5564
.create-vm .image-details.selected .size {
5565
    color: #eee;
5566
}
5567

    
5568
.create-vm .image-details.selected span.owner {
5569
    color: #fff;
5570
}
5571

    
5572

    
5573
.create-vm .image-details p {
5574
    font-size: 0.8em;
5575
    padding-left: 27px;
5576
    display:block;
5577
}
5578

    
5579
.create-vm .image-details span.owner {
5580
    display: block;
5581
    font-size: 0.9em;
5582
    float: right;
5583
    color: #FF7F2A;
5584
    position: absolute;
5585
    top: 5px;
5586
    right: 5px;
5587
}
5588

    
5589
.create-vm .select-image .show-details {
5590
    display: none;
5591
    font-size: 0.8em;
5592
    text-decoration: underline;
5593
    color: #000;
5594
    position: absolute;
5595
    bottom: 5px;
5596
    right: 5px;
5597
}
5598

    
5599
.create-vm .image-details .size {
5600
    margin-top: 2px;
5601
    font-size: 0.8em;
5602
    color: #aaa;
5603
    margin-left: 10px;
5604
}
5605

    
5606
.create-vm .step-cont {
5607
    margin: 15px;
5608
}
5609

    
5610
.create-vm .create-step-cont {
5611
    min-height: 250px;
5612
    float: left;
5613
    width: 624px;
5614
}
5615

    
5616
.create-vm .create-controls {
5617
    padding: 10px;
5618
    border-top: 1px solid #ddd;
5619
}
5620

    
5621
.create-vm .empty {
5622
    font-size: 0.8em;
5623
    color: #444;
5624
}
5625

    
5626
.create-vm h4 {
5627
    color: #5CA1C0;
5628
    margin-bottom: 0.5em;
5629
    font-family: arial;
5630
}
5631
.create-vm ul li {
5632
    cursor: pointer;
5633
    padding: 4px;
5634
    font-size: 0.9em;
5635
}
5636

    
5637
.create-vm .create-step-cont li.ssh-key-option.selected,
5638
.create-vm .create-step-cont li.list-item-option.selected,
5639
.create-vm ul li.selected {
5640
    background-color: #FF7F2A;
5641
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5642
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5643
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5644
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5645
    color: #fff;
5646
}
5647

    
5648
.create-vm .images-list-cont.loading .loading-indicator {
5649
    display: block !important;
5650
}
5651

    
5652
.create-vm .images-list-cont .loading-indicator {
5653
    display: none;
5654
    position: absolute;
5655
    right: -13px;
5656
    top: 2px;
5657
    width: 30px;
5658
    height: 10px;
5659
    background-repeat: no-repeat;
5660
    background-image: url("../images/icons/indicators/medium/progress.gif");
5661
}
5662

    
5663
.create-vm .images-list-cont h4 {
5664
    position: relative;
5665
}
5666

    
5667
.create-vm .images-list-cont {
5668
    width: 40%;
5669
    float: left;
5670
    padding-left: 3%;
5671
    padding-right: 3%;
5672
}
5673

    
5674
.create-vm li p.desc {
5675
    font-size: 0.9em;
5676
}
5677

    
5678
.create-vm p.desc.warning {
5679
    color: #880000;
5680
}
5681

    
5682
.create-vm p.desc.empty {
5683
    color: #000;
5684
}
5685

    
5686
.create-vm p.desc {
5687
    font-size: 0.8em;
5688
    color: #888;
5689
    margin-bottom: 10px;
5690
}
5691

    
5692
.create-vm li.role .values .val:hover {
5693
    background-color: #eee;
5694
}
5695
.create-vm li.role .values .val.selected,  .create-vm li.role .values .val.selected:hover {
5696
    color: #fff;
5697
    background-color: #FF9955;
5698
}
5699

    
5700
.create-vm .images-filter-cont, .create-vm .flavors-predefined-cont {
5701
    width: 18%;
5702
    padding-right: 4%;
5703
    float:left;
5704
    border-right: 1px solid #A1C8DB;
5705
    overflow: auto;
5706
}
5707

    
5708
.create-vm .flavor-options-cont {
5709
    width: 74%;
5710
    float: left;
5711
    margin-left: 20px;
5712
}
5713

    
5714
.create-vm .flavor-options-cont .flavor-options li:hover {
5715
    background-image:-webkit-linear-gradient(top, #E8F4FA, #D1E7F0);
5716
    background-image:-o-linear-gradient(top, #E8F4FA, #D1E7F0);
5717
    background-image:-moz-linear-gradient(top, #E8F4FA, #D1E7F0);
5718
    background-image:linear-gradient(top, #E8F4FA, #D1E7F0);
5719
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8F4FA', endColorstr='#D1E7F0', GradientType=0);
5720
}
5721

    
5722
.create-vm .flavor-options-cont .flavor-options li.disabled * {
5723
    color: #eee !important;
5724
}
5725

    
5726
.create-vm .flavor-options-cont .flavor-options li.disabled {
5727
    background-image:linear-gradient(top, #aaa, #ddd);
5728
    background-image:-webkit-linear-gradient(top, #aaa, #ddd);
5729
    background-image:-o-linear-gradient(top, #aaa, #ddd);
5730
    background-image:-moz-linear-gradient(top, #aaa, #ddd);
5731
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#dddddd', GradientType=0);
5732
}
5733

    
5734
.create-vm .flavor-options-cont .flavor-options li.selected {
5735
    background-color: #FF9955;
5736
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5737
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5738
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5739
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5740
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9955', endColorstr='#E88B4D', GradientType=0);
5741
    border: 1px solid #C97943;
5742
}
5743

    
5744
.create-vm .predefined-list li.disabled {
5745
    color: #ddd !important;
5746
}
5747

    
5748
.create-vm .flavor-options-cont .flavor-options li {
5749
    display: block;
5750
    float: left;
5751
    margin-right: 10px;
5752
    margin-bottom: 9px;
5753
    padding: 9px 14px;
5754
    border: 1px solid #aaa;
5755
    background-image:-webkit-linear-gradient(top, #D1E7F0, #E8F4FA);
5756
    background-image:-o-linear-gradient(top, #D1E7F0, #E8F4FA);
5757
    background-image:-moz-linear-gradient(top, #D1E7F0, #E8F4FA);
5758
    background-image:linear-gradient(top, #D1E7F0, #E8F4FA);
5759
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1E7F0', endColorstr='#E8F4FA', GradientType=0);
5760
}
5761

    
5762
.create-vm .flavor-opts-list.compact li {
5763
    padding: 7px 9px;
5764
    margin-right: 7px;
5765
}
5766

    
5767
.create-vm .flavor-options-cont .flavor-options {
5768
    margin-bottom: 2px;
5769
}
5770

    
5771

    
5772
.create-vm .flavor-options .metric {
5773
    font-size: 0.8em;
5774
    margin-left: 2px;
5775
}
5776

    
5777
.create-vm .flavor-options span.available {
5778
  font-size: 0.8em;
5779
  font-weight: normal;
5780
  margin-left: 5px;
5781
}
5782

    
5783
.create-vm .flavor-options span.title {
5784
    color: #444;
5785
}
5786

    
5787
.create-vm .flavor-options span.desc {
5788
    display: block;
5789
    color: #aaa;
5790
    font-weight: normal;
5791
    font-size: 0.8em;
5792
    float: right;
5793
    margin-top: 4px;
5794
}
5795

    
5796
.disktip {
5797
    padding: 4px;
5798
    top: 20px;
5799
}
5800

    
5801
.create-vm .flavor-options .flavors-disk-template-list {
5802
    position: relative;
5803
}
5804

    
5805
.create-vm .flavor-options .disk_template.option {
5806
    z-index: 10;
5807
    min-width: 50px;
5808
    text-align: center;
5809
}
5810

    
5811
/*0 position is -470px*/
5812
.create-vm .flavor-options .disk-template-description {
5813
    font-size: 0.8em;
5814
    color: #444;
5815
    background-image: url("../images/horizontal-pointer.png");
5816
    background-repeat: repeat-x;
5817
    background-position: -470px 0;
5818
    padding-top: 15px;
5819
    margin-top: -10px;
5820
    font-style: italic;
5821
    display:block;
5822
    overflow: auto;
5823
    padding-bottom: 0px;
5824
    margin-bottom: 7px;
5825
    width: 100%;
5826
}
5827

    
5828
.create-vm .flavor-options .disk_template.option .description {
5829
    display: none;
5830
    position: absolute;
5831
    bottom: -20px;
5832
    left:0;
5833
    color: #888;
5834
    font-style: italic;
5835
    display: block;
5836
    background-color: #fff;
5837
    width: 100%;
5838
    text-align: left;
5839
    z-index: 0;
5840
    border-top: 1px solid #ddd;
5841
    padding-top: 3px;
5842
    display: none;
5843
}
5844

    
5845
.create-vm .flavor-options .selected .value {
5846
    color: #FFF;
5847
}
5848

    
5849
.create-vm .flavor-options .value {
5850
    font-weight: bold;
5851
    color: #5CA1C0;
5852
}
5853

    
5854
.create-vm .flavor-options-cont h4 {
5855
    border-bottom: 1px solid #A1C8DB;
5856
    padding-bottom: 5px;
5857
}
5858

    
5859
.create-vm .images-info-cont {
5860
    width: 28%;
5861
    padding-left: 3%;
5862
    float: left;
5863
    border-left: 1px solid #A1C8DB;
5864
}
5865

    
5866
.create-vm .select-image.wide .show-details {
5867
    display: inline;
5868
}
5869

    
5870
.create-vm .select-image .images-info-cont .hide {
5871
    display: none;
5872
}
5873

    
5874
.create-vm .select-image.wide .images-info-cont .hide {
5875
    display: block;
5876
    float: right;
5877
    position: absolute;
5878
    right: 10px;
5879
    top: 10px;
5880
    font-size: 0.8em;
5881
    text-decoration: underline;
5882
    color: #5CA1C0;
5883
    cursor: pointer;
5884
}
5885

    
5886
.create-vm .select-image.wide .images-list-cont {
5887
    width: 74%;
5888
    padding-right: 0;
5889
}
5890

    
5891
.create-vm .select-image.wide .images-info-cont .description .title {
5892
    display: none;
5893
    float: none;
5894
}
5895

    
5896
.create-vm .select-image.wide .images-info-cont .description p {
5897
    background-color: #fff;
5898
    border: 1px solid #ddd;
5899
    padding: 10px;
5900
    float: none;
5901
}
5902

    
5903
.create-vm .select-image.wide .selected .size {
5904
    color: #FFF !important;
5905
}
5906

    
5907
.create-vm .select-image.wide .image-details .size {
5908
    color: #5CA1C0;
5909
    position: absolute;
5910
    top: 5px;
5911
}
5912

    
5913
.create-vm .select-image.wide .images-info-cont h3 {
5914
    color: #5CA1C0;
5915
    margin: 10px 0;
5916
    margin-top: 5px;
5917
    text-align: left;
5918
    font-size: 0.9em;
5919
}
5920

    
5921
.create-vm .select-image.wide .images-info-cont .description p {
5922
    height: 50px;
5923
}
5924

    
5925
.create-vm .select-image.wide .images-info-cont .description {
5926
    width: 100% !important;
5927
    float: none !important;
5928
    background-color: transparent !important;
5929
    padding: 0 !important;
5930
    font-size: 1.1em;
5931
}
5932
.create-vm .select-image.wide .images-info-cont .extra-details {
5933
    height: 160px;
5934
    overflow-y: scroll;
5935
    padding-right: 15px;
5936
}
5937

    
5938
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail.extra-meta .title .custom {
5939
    display: inline-block;
5940
}
5941

    
5942
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail.extra-meta .title {
5943
    background-color: #999 !important;
5944
    border-color: #888 !important;
5945
}
5946
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail .custom {
5947
    float: right;
5948
    display: none;
5949
    font-size: 0.8em;
5950
    margin-left: 10px;
5951
    color: #DDD;
5952
    margin-top: 2px;
5953
}
5954

    
5955
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail {
5956
    padding: 0px;
5957
    background-color: transparent;
5958
    margin-bottom: 4px;
5959
}
5960

    
5961
.create-vm .select-image.wide .images-info-cont .extra-details .title {
5962
    float: left;
5963
    display: block;
5964
    width: 39%;
5965
    padding: 1%;
5966
    background-color: #5CA1C0;
5967
    color: #fff;
5968
    border: 1px solid #4F8DAA;
5969
    font-size: 0.8em;
5970
}
5971

    
5972
.create-vm .select-image.wide .images-info-cont .extra-details .value {
5973
    float: right;
5974
    display: block;
5975
    width: 55%;
5976
    padding: 1%;
5977
    border: none;
5978
    background-color: #FFF;
5979
    color: #444;
5980
    border: 1px solid #ddd;
5981
    margin-bottom: 0px;
5982
    font-size: 0.8em;
5983
}
5984

    
5985

    
5986
.create-vm .select-image.wide .images-info-cont .image-detail {
5987
}
5988

    
5989
.create-vm .select-image.wide ul.images-list {
5990
    height: 310px;
5991
    overflow-y: scroll;
5992
    padding-right: 3%;
5993
}
5994

    
5995
.flavors-predefined-cont {
5996

    
5997
}
5998

    
5999
.flavor-options-cont {
6000
}
6001

    
6002
.create-vm .select-image.wide .images-info-cont {
6003
    position: absolute;
6004
    width: 88%;
6005
    background-color: #DAE9F0;
6006
    padding: 2%;
6007
    border-left: none;
6008
    height: 320px;
6009
    box-shadow: 0px 0px 2px #aaa;
6010
    -moz-box-shadow: 0px 0px 2px #aaa;
6011
    -webkit-box-shadow: 0px 0px 2px #aaa;
6012
    display: none;
6013
}
6014

    
6015

    
6016
.create-vm .images-info-cont h4, .create-vm .create-step-cont .param h4{
6017
    color: #FF9955;
6018
    margin-bottom: 1em;
6019
    font-size: 1.2em;
6020
    text-indent: -20px;
6021
    padding-right: 58px;
6022
    margin-left: 20px;
6023
}
6024

    
6025
.create-vm .images-info-cont span.title {
6026
    color: #4085A5;
6027
    display: block;
6028
    margin-bottom: 2px;
6029
    font-size: 0.8em;
6030
}
6031

    
6032
.create-vm .type-filter li {
6033
    font-size: 0.8em;
6034
    /*font-weight: bold;*/
6035
    padding: 4px;
6036
    margin-bottom: 0px;
6037
    color: #FF7F2A;
6038
}
6039

    
6040
.create-vm .images-list li {
6041
    min-height: 30px;
6042
}
6043
.create-vm .images-list .image-details:hover {
6044
    background-color: #eee;
6045
}
6046

    
6047
.create-vm .images-list .image-details.selected:hover {
6048
    background-color: #FF7F2A;
6049
}
6050

    
6051
.create-vm .images-list .image-details.selected {
6052
    /*font-weight: bold;*/
6053
}
6054

    
6055
.create-vm .images-list .image-details {
6056
    padding: 6px;
6057
    margin-bottom:1px;
6058
    position: relative;
6059
}
6060

    
6061
.create-vm .images-list .image-details img {
6062
    vertical-align: middle;
6063
    margin-right: 10px;
6064
}
6065

    
6066
.create-vm .images-info-cont .image-detail:last-child p {
6067
    border-bottom: none;
6068
}
6069

    
6070
.create-vm .images-info-cont h4 img {
6071
    vertical-align: middle;
6072
    margin-right: 7px;
6073
    margin-bottom: 5px;
6074
}
6075

    
6076
.create-vm .images-info-cont .description p {
6077
    font-size: 0.8em;
6078
}
6079

    
6080
.create-vm .images-info-cont p {
6081
    margin-bottom: 7px;
6082
    font-size: 0.9em;
6083
    border-bottom: 1px solid #A1C8DB;
6084
    padding-bottom: 7px;
6085
}
6086

    
6087
.create-vm .step-header {
6088
    padding-bottom:0;
6089
    position: relative;
6090
}
6091

    
6092
.create-vm .step-header .header-step .info span.subtitle {
6093
    font-size: 1.2em;
6094
    color: #fff;
6095
    font-weight: bold;
6096
}
6097

    
6098
.create-vm .step-header .header-step .info span {
6099
    float: none;
6100
    text-align: right;
6101
}
6102

    
6103
.create-vm .step-header .header-step .info {
6104
    position: absolute;
6105
    right: 15px;
6106
    top: 20px;
6107
    font-size: 0.8em;
6108
}
6109

    
6110
.create-vm .step-header .header-step span {
6111
    float: left;
6112
    display: block;
6113
}
6114

    
6115
.create-vm .steps-container {
6116
    width: 2000em;
6117
}
6118

    
6119
.create-vm .step-header .header-step .title {
6120
    margin-top: 20px;
6121
    font-size: 1em;
6122
    margin-left: 10px;
6123
}
6124

    
6125
#createvm-overlay-content {
6126
    width: 624px;
6127
    overflow: hidden;
6128
}
6129

    
6130
.create-vm .steps-history .steps-history-cont.current .title {
6131
    display: block;
6132
    top: 23px;
6133
    left: 43px;
6134
    font-size: 1.2em;
6135
    color: #ffffff;
6136
    font-weight: bold;
6137
    font-family: 'Ubuntu', sans-serif !important;
6138
}
6139

    
6140
.create-vm .steps-history .steps-history-cont.current .subnum {
6141
    display: none;
6142
    float: none;
6143
    font-size: 0.9em;
6144
    font-family: 'Ubuntu', sans-serif  !important;
6145
}
6146

    
6147
.create-vm .steps-history .steps-history-cont.current .subtitle,
6148
.create-vm .steps-history .steps-history-cont.current .description {
6149
    font-family: 'Ubuntu', sans-serif  !important;
6150
}
6151

    
6152
.create-vm .steps-history .steps-history-cont.current .info {
6153
    display: block;
6154
    font-family: 'Ubuntu', sans-serif !important;
6155
}
6156

    
6157
.create-vm .steps-history .steps-history-cont.completed .title,
6158
.create-vm .steps-history .steps-history-cont.completed .num {
6159
    color: #A1C8DB;
6160
}
6161

    
6162
.create-vm .steps-history .steps-history-cont.completed {
6163
    background-color: #4085A5;
6164
    color: #fff;
6165
    cursor: pointer;
6166
}
6167

    
6168
.create-vm .steps-history .steps-history-cont.completed .steps-history-step {
6169
    background-image: url("../images/check.png");
6170
}
6171

    
6172
.create-vm .steps-history .steps-history-cont.current .steps-history-step {
6173
    width: 320px;
6174
}
6175

    
6176
.create-vm .steps-history .steps-history-cont.current .num {
6177
    color: #fff;
6178
}
6179

    
6180
.create-vm .steps-history .steps-history-cont.current .info {
6181
    color: #4085A5;
6182
    font-size: 0.8em;
6183
}
6184

    
6185
.create-vm .steps-history .steps-history-cont.current {
6186
    background-color: #A1C8DB;
6187
    color: #fff;
6188
    width: 416px;
6189
}
6190

    
6191
.create-vm .steps-history-step {
6192
    padding: 4px;
6193
    padding-left: 7px;
6194
    font-size: 1em;
6195
    font-family: 'Ubuntu', sans-serif  !important;
6196
    margin-right: 5px;
6197
    padding-top: 12px;
6198
    background-position: right 30px;
6199
    background-image: none;
6200
    background-repeat: no-repeat;
6201
}
6202

    
6203
.create-vm .steps-history {
6204
    background-color: #4085A5;
6205
}
6206

    
6207
.create-vm .steps-history .steps-history-cont.last {
6208
    border-right: none;
6209
}
6210

    
6211
.create-vm .steps-history .steps-history-cont .num {
6212
    margin-left: 5px;
6213
    margin-top: -10px;
6214
    padding-bottom: 10px;
6215
}
6216

    
6217
.create-vm .steps-history .steps-history-cont .title {
6218
    display: none;
6219
    position: absolute;
6220
    bottom: 0px;
6221
    text-align: center;
6222
    padding-bottom: 2px;
6223
    left:0;
6224
    width: 55px;
6225
    margin-left:0;
6226
    margin-top:0;
6227
    font-size: 0.8em;
6228
}
6229

    
6230
.create-vm .steps-history .steps-history-cont .subnum,
6231
.create-vm .steps-history .steps-history-cont .info {
6232
    display: none;
6233
}
6234

    
6235
.create-vm .steps-history .steps-history-cont {
6236
    height: 70px;
6237
    width: 51px;
6238
    float: left;
6239
    color: #fff;
6240
    border-right: 1px solid #A1C8DB;
6241
    color: #A1C8DB;
6242
    background-color: #4085A5;
6243
    background-position: center right;
6244
    background-image: none;
6245
    background-repeat: no-repeat;
6246

    
6247
    -webkit-transition: background-color .15s ease-in;
6248
    -o-transition: background-color .15s ease-in;
6249
    -moz-transition: background-color .15s ease-in;
6250
    transition: background-color .15s ease-in;
6251

    
6252
    border-bottom: 1px solid #aaa;
6253
}
6254

    
6255
.create-vm .step-header .header-step .num {
6256
    color: #225871;
6257
    font-size: 4em;
6258
    margin-bottom: -5px;
6259
    font-family: 'Ubuntu', sans-serif;
6260
    font-weight: normal !important;
6261
}
6262

    
6263
.create-vm .step-header .header-step {
6264
    color: #;
6265
    margin-bottom: -6px;
6266
    width: 25%;
6267
    padding-left: 0%;
6268
    display: block;
6269
    float: left;
6270
}
6271

    
6272
.create-vm .step-header .header-step.current {
6273
    color: #387693;
6274
}
6275

    
6276
.create-vm .image-filters-title {
6277
    margin-top: 1em;
6278
    margin-bottom: 0.5em;
6279
}
6280

    
6281
.create-vm .create-step-cont span.clear {
6282
    font-size: 0.8em;
6283
    font-weight: bold;
6284
    color: #A1C8DB;
6285
    display: block;
6286
}
6287

    
6288
.create-vm .category-filters li {
6289
    float:left;
6290
    display: block;
6291
    padding: 4px;
6292
    background-color: #eee;
6293
    margin-right: 5px;
6294
    font-size: 0.9em;
6295
    margin-bottom: 5px;
6296
}
6297

    
6298
.create-vm .content-cont {
6299
    height: 340px;
6300
    overflow: auto;
6301
}
6302

    
6303
.create-vm .vm-confirm .confirm-params span.cval {
6304
    margin-left: 8px;
6305
    color: #444;
6306
}
6307

    
6308
.create-vm .vm-confirm .confirm-params span.ckey {
6309
    color: #4085A5;
6310
    font-weight: bold;
6311
}
6312

    
6313
.create-vm .vm-confirm .confirm-params {
6314
    margin-bottom: 15px;
6315
}
6316

    
6317
.create-vm .vm-confirm h3.vm-name {
6318
    background-repeat: no-repeat;
6319
    background-position: left center;
6320
    font-size: 1.4em;
6321
    padding-left: 1.45em;
6322
    color: #4085A5;
6323
}
6324

    
6325
.create-vm .images-list-cont h4 a {
6326
    margin-top: 3px;
6327
    margin-right: -2px !important;
6328
}
6329
.create-vm .images-list-cont h4 a,
6330
.create-vm .list-cont h4 a {
6331
    font-size: 0.8em;
6332
    font-weight: normal;
6333
    margin-right: 5px;
6334
    float: right;
6335
    color: #FF7F2A;
6336
}
6337

    
6338
.create-vm .confirm-params {
6339
    overflow: auto;
6340
}
6341

    
6342
.create-vm .vm-confirm .ssh.confirm-params {
6343
    max-height: 150px;
6344
}
6345

    
6346
.create-vm .personalize-cont .confirm-params {
6347
    max-height: 160px;
6348
    margin-right: 10px;
6349
}
6350

    
6351
.create-vm .personalize-cont,
6352
.create-vm .confirm-cont {
6353
    height: 250px;
6354
}
6355

    
6356
.create-vm .image-warning p {
6357
  width: 80%;
6358
  float: left;
6359
}
6360

    
6361
.create-vm .image-warning .untrusted-image-confirm:hover {
6362
  background-color: #7D674E;
6363
}
6364

    
6365
.create-vm .image-warning .untrusted-image-confirm {
6366
  display: inline-block;
6367
  padding: 5px;
6368
  background-color: #5C4D39;
6369
  color: #FFF;
6370
  width: 10%;
6371
  float: right;
6372
  margin-top: 4px;
6373
  margin-right: 2px;
6374
  cursor: pointer;
6375
  text-align: center;
6376
}
6377

    
6378
.create-vm .image-warning {
6379
  display: none;
6380
  background-color: #987249;
6381
  color: #fff;
6382
  padding: 10px 15px;
6383
  font-size: 0.9em;
6384
  border-top: 1px solid #AAA;
6385
}
6386

    
6387
.create-vm .create-step-cont .rename input.rename-field {
6388
    font-size: 1.4em;
6389
    padding: 5px;
6390
    width: 93%;
6391
    padding-left: 30px;
6392
    background-position: 7px center;
6393
    background-repeat: no-repeat;
6394
}
6395

    
6396
.create-vm .create-step-cont .rename label {
6397
    display: block;
6398
}
6399

    
6400
.create-vm .create-step-cont .personalize-conts,
6401
.create-vm .create-step-cont .confirm-conts {
6402
    margin-top: 20px;
6403
}
6404

    
6405
.create-vm .create-step-cont .personalize-cont,
6406
.create-vm .create-step-cont .confirm-cont {
6407
    width: 30%;
6408
    margin-right: 2%;
6409
    border-right: 1px solid #A1C8DB;
6410
    float: left;
6411
}
6412

    
6413
.create-vm .create-step-cont .confirm-cont ul li .title {
6414
    width: 55px;
6415
    float: left;
6416
}
6417

    
6418
.create-vm .create-step-cont .list-cont ul li .value {
6419
    float: right;
6420
    padding-top: 2px;
6421
    display: block;
6422
    width: 90px;
6423
    text-align: right;
6424
}
6425

    
6426
.create-vm .create-step-cont .list-cont ul li.flavor-disktype .value {
6427
    width: 65px;
6428
}
6429

    
6430
.create-vm .create-step-cont .list-cont ul li.image-description .value,
6431
.create-vm .create-step-cont .list-cont ul li.image-name .value {
6432
    float: none;
6433
    width: auto;
6434
    text-align:left;
6435
    width: auto;
6436
}
6437

    
6438
.create-vm .create-step-cont .list-cont ul li.image-name .value {
6439
  width: 120px;
6440
  text-indent: 0;
6441
  margin-left: 0;
6442
}
6443

    
6444
.create-vm .create-step-cont .list-cont ul li {
6445
    padding:0;
6446
    margin:0;
6447
    margin-bottom: 5px;
6448
    border-bottom: 1px solid #EEE;
6449
    padding-bottom: 7px;
6450
    margin-right: 10px;
6451
}
6452

    
6453
.create-vm .create-step-cont li.ssh-key-option .check,
6454
.create-vm .create-step-cont li.list-item-option .check {
6455
    float: right;
6456
    margin-right: 5px;
6457
    margin-top: 0px;
6458
}
6459

    
6460
.create-vm .create-step-cont li.ssh-key-option.selected {
6461
}
6462
.create-vm .create-step-cont li.ssh-key-option.selected:hover,
6463
.create-vm .create-step-cont li.list-item-option.selected:hover {
6464
    background-color: #F95;
6465
}
6466

    
6467
.create-vm .create-step-cont li.ssh-key-option:hover,
6468
.create-vm .create-step-cont li.list-item-option:hover {
6469
    background-color: #eee;
6470
}
6471

    
6472
.create-vm .create-step-cont li.ssh-key-option.selected {
6473
}
6474

    
6475
.create-vm .create-step-cont li.ssh-key-option,
6476
.create-vm .create-step-cont li.list-item-option {
6477
    padding: 6px !important;
6478
}
6479

    
6480
.create-vm .create-step-cont .list-cont.ssh {
6481
    width: 60%;
6482
}
6483

    
6484
.create-vm .create-step-cont .list-cont.meta h4 {
6485
    margin-right: 0;
6486
}
6487

    
6488
.create-vm .create-step-cont .list-cont.meta {
6489
    margin-right:0;
6490
    border-right: none;
6491
    width: 195px;
6492
    overflow: hidden;
6493
    overflow-y: auto;
6494
}
6495

    
6496
.create-vm .list-cont > h4 {
6497
    font-size: 1.2em;
6498
    margin-right: 10px;
6499
    border-bottom: 1px solid #A1C8DB;
6500
    padding-bottom: 5px;
6501
    color: #387693;
6502
}
6503

    
6504
.create-vm .list-cont .param.image-name {
6505
    margin-bottom: 0 !important;
6506
    border-bottom: none !important;
6507
}
6508

    
6509
.create-vm .list-cont .param h4 {
6510
    margin-bottom: 0px !important;
6511
    font-size: 1.1em !important; 
6512
}
6513

    
6514
.create-vm .list-cont .param {
6515
    margin-bottom: 7px !important;
6516
}
6517

    
6518
.create-vm .list-cont .value {
6519
    font-weight: bold;
6520
}
6521

    
6522
.create-vm .list-cont .param .value {
6523
    font-size: 0.9em;
6524
}
6525

    
6526
.create-vm .list-cont .param .title {
6527
    color: #387693;
6528
}
6529

    
6530
.create-vm .list-cont .image-description {
6531
    margin-left:0;
6532
}
6533

    
6534
.create-vm .list-cont .image-description .value {
6535
    font-weight: normal;
6536
    margin-left: 0 !important;
6537
}
6538

    
6539
.create-vm .list-cont .image-description .title {
6540
    display: none;
6541
    font-size: 0.8em;
6542
}
6543

    
6544
.create-vm .list-cont.meta .values span {
6545
    display:block;
6546
    float: left;
6547
    margin-right: 4px;
6548
    border: 1px solid #eee;
6549
    padding:3px;
6550
    margin-bottom: 4px;
6551
    font-size: 0.9em;
6552
}
6553

    
6554
.create-vm .list-cont.meta .key {
6555
    font-weight: bold;
6556
    font-size: 0.9em;
6557
    display: block;
6558
    margin-bottom: 5px;
6559
}
6560

    
6561
.create-vm .meta input {
6562
    font-size: 0.8em;
6563
}
6564

    
6565
.create-vm .network-select {
6566
  height: 278px;
6567
  overflow-y: scroll;
6568
  padding-right: 10px;
6569
}
6570

    
6571
.vm-connect .connect-cont {
6572
    margin-bottom: 20px;
6573
    border-bottom: 1px solid #A1C8DB;
6574
    padding-bottom: 20px;
6575
}
6576

    
6577
.vm-connect .connection-info {
6578
    padding-bottom: 0px;
6579
    margin-bottom: 0;
6580
    border-bottom: none;
6581
}
6582

    
6583
.vm-connect .connection-info .connect a {
6584
    color: #fff;
6585
}
6586

    
6587
.vm-connect .connection-info .connect {
6588
    background-color: #387693;
6589
    color: #fff;
6590
    padding: 10px;
6591
    font-size: 1.2em;
6592
    text-align: center;
6593
}
6594

    
6595
.clip-copy {
6596
    display: block;
6597
    width: 20px;
6598
    height: 20px;
6599
    position: absolute;
6600
    border: 1px solid #387693;
6601
    background-image: url("../images/clipboard.png");
6602
    background-repeat: no-repeat;
6603
    background-position: center;
6604
    cursor: pointer;
6605
    background-color: #A1C8DB;
6606
}
6607

    
6608
.password-cont .clip-copy { right: 10px; top: 8px;}
6609

    
6610

    
6611
input.has-errors {
6612
    border-color: #ff0000;
6613
}
6614

    
6615
.overlay .models-view .previous-view-link {
6616
    margin: -10px;
6617
    margin-bottom:10px;
6618
    padding: 10px 5px;
6619
    background-image: url("../images/left-arrow.png");
6620
    background-repeat: no-repeat;
6621
    background-position: 10px center;
6622
    padding-left: 20px;
6623
    background-color: #93D070;
6624
    cursor: pointer;
6625
    border-bottom: 1px solid #eee;
6626
    text-decoration: underline;
6627
}
6628

    
6629
.icon .suspended-notice {
6630
  right: 192px;
6631
  top: 50px;
6632
}
6633

    
6634
.suspended-notice {
6635
  display: inline-block;
6636
  padding: 4px;
6637
  background-color: #8f1915;
6638
  cursor: pointer;
6639
  position: absolute;
6640
  color: #fff;
6641
  font-size: 0.6em;
6642
  display: none;
6643
}
6644

    
6645
.suspended .suspended-notice {
6646
  display: block;
6647
}
6648

    
6649
.suspended .action-indicator {
6650
  display: none !important;
6651
}
6652

    
6653
.trigger-resize {
6654
    background-image: url("../images/pencil-disabled.png");
6655
    background-position: right 2px;
6656
    background-repeat: no-repeat;
6657
    padding-right: 15px !important;
6658
    cursor: pointer;
6659
}
6660

    
6661
.can-resize .trigger-resize:hover {
6662
    text-decoration: underline;
6663
}
6664

    
6665
.can-resize .trigger-resize {
6666
    font-weight: bold;
6667
    background-image: url("../images/pencil.png");
6668
}
6669

    
6670
.vm-resize .flavor-options-cont {
6671
  float: none;
6672
  width: 100%;
6673
  margin: 0;
6674
  height: auto;
6675
}
6676

    
6677
#vm-resize-overlay-content .form-actions {
6678
  margin-top: 15px;
6679
}
6680

    
6681
#vm-resize-overlay-content .form-actions .warning {
6682
  width: 200px;
6683
  color: #800;
6684
  float: left;
6685
}
6686

    
6687
.form-action.shutdown {
6688
  background-color: #800;
6689
  margin-right: 10px;
6690
  border-color: #700;
6691
}
6692

    
6693
.form-action.disabled {
6694
  background-color: #ddd;
6695
  color: #aaa;
6696
  border-color: #999;
6697
  cursor: default;
6698
}
6699

    
6700
.overlay .form-actions .assign {
6701
  display: none;
6702
}
6703

    
6704

    
6705
.connect-ip #network-vms-select-content li.selected .options-object-cont {
6706
  background-image: none !important;
6707
}
6708

    
6709
.overlay.connect-ip .form-actions .assign {
6710
  display: block;
6711
}
6712

    
6713
.overlay.connect-ip .form-actions .create {
6714
  display: none;
6715
}
6716

    
6717
.overlay.connect-ip li.options-object .options-object-cont {
6718
  background-image: none !important; 
6719
}
6720

    
6721
.overlay-public-key-create .container {
6722
  font-size: 0.9em;
6723
}
6724

    
6725
/* Additional styles for views.ext module */
6726
.pane-view {
6727
  background-color: #EFF7FA;
6728
}
6729

    
6730
.collection-list-view .collection {
6731
  padding-top: 14px;
6732
}
6733

    
6734
.collection-list-view .collection .create-button {
6735
  margin-bottom: 15px;
6736
}
6737

    
6738
.collection-list-view .collection .create-button a {
6739
  display: inline-block;
6740
  color: black;
6741
  background-color: #FF7F2A;
6742
  cursor: pointer;
6743
  padding: 7px 24px;
6744
  text-decoration: none;
6745
  border-left: 15px solid #FF9955;
6746
  margin-left: -15px;
6747
  font-family: 'Open Sans', sans-serif;
6748
}
6749

    
6750
.pane-view .collection-list-view .model-view {
6751
  width: 100%;
6752
  background-color: transparent;
6753
  font-size: 75%;
6754
}
6755

    
6756
.pane-view .collection-list-view .model-view.actionpending .main-content-inner,
6757
.pane-view .collection-list-view .model-view.subactionpending .main-content-inner,
6758
.pane-view .collection-list-view .model-view.hovered .main-content-inner,
6759
.pane-view .collection-list-view .model-view:hover .main-content-inner {
6760
  background-color: #A1C8DB;
6761
}
6762

    
6763
.pane-view .collection-list-view .model-view .main-content.inner .state-indicator {
6764
  top: 5px;
6765
}
6766

    
6767
.pane-view .collection-list-view .model-view .main-content .state-indicator {
6768
  width: 50px;
6769
  position: absolute;
6770
  top: 30px;
6771
  right: 5px;
6772
}
6773

    
6774
.pane-view .collection-list-view .model-view .main-content .title {
6775
  font-weight: normal;
6776
}
6777

    
6778
.pane-view .collection-list-view .model-view .main-content {
6779
}
6780

    
6781
.pane-view .collection-list-view .model-view:last-child .main-content {
6782
  border-bottom: none;
6783
}
6784

    
6785
.pane-view .collection-list-view .model-view .main-content {
6786
  width: 520px;
6787
  padding-bottom: 5px;
6788
  margin-bottom: 5px;
6789
  float: left;
6790
  border-bottom: 1px solid #D1E7F0;
6791
}
6792

    
6793
.pane-view .collection-list-view .model-view .main-content-inner {
6794
  padding: 10px 20px;
6795
  padding-right: 10px;
6796
  /*overflow: hidden;*/
6797
}
6798

    
6799
.pane-view .collection-list-view .model-view .main-content .logo {
6800
  float: left;
6801
}
6802

    
6803
.pane-view .collection-list-view .model-view .main-content .entry-right {
6804
  position: relative;
6805
}
6806

    
6807
.pane-view .collection-list-view .model-view .main-content .entry {
6808
  width: 290px;
6809
  padding-top: 5px;
6810
  margin-left: 10px;
6811
  float: left;
6812
  position: relative;
6813
}
6814

    
6815
.model-item .actions-content.inline {
6816
  padding-top: 6px;
6817
  position: absolute;
6818
  right: 0px;
6819
  font-size: 1.2em;
6820
  height: 26px;
6821
  width: 182px;
6822
}
6823

    
6824
.pane-view .collection-list-view .model-view .main-content .actions-content {
6825
  width: 80px;
6826
  float: left;
6827
}
6828

    
6829
.pane-view .collection-list-view .model-item .link {
6830
  color: #4085A5;
6831
}
6832

    
6833
.collection .no-available a {
6834
  color: #aaa;
6835
}
6836

    
6837
.collection .select-item span.available {
6838
  font-size: 0.9em;
6839
  float: right;
6840
}
6841

    
6842
.collection span.no-available {
6843
}
6844

    
6845
.collection span.no-available {
6846
  float: right;
6847
}
6848

    
6849
.collection .no-available {
6850
  font-size: 0.8em;
6851
  color: #f00;
6852
}
6853

    
6854
.collection .empty-list {
6855
  padding: 10px;
6856
  font-size: 0.8em;
6857
  color: #333;
6858
}
6859

    
6860
.collection-list-view .items-sublist:first-child {
6861
  padding-top: 0;
6862
}
6863

    
6864
.collection-list-view .items-sublist {
6865
  padding-top: 10px;
6866
}
6867

    
6868
.collection-list-view .items-sublist:last-child {
6869
  margin-top: 20px;
6870
  border-top: 10px solid #DCEBF2;
6871
  margin-bottom: 0;
6872
}
6873

    
6874
.model-item .status-title {
6875
  text-align: right;
6876
  margin-right: 4px;
6877
  margin-top: 5px;
6878
}
6879

    
6880
.model-item .status-indicator {
6881
  width: 65px;
6882
  float: right;
6883
}
6884

    
6885
.model-item .actions-content {
6886
  width: 180px;
6887
  float: left;
6888
}
6889

    
6890
.model-item .actions-content .action-container .confirm-single .no,
6891
.model-item .actions-content .action-container .confirm-single .yes {
6892
  font-family: Arial, Helvetica, sans-serif;
6893
  width: 20px;
6894
  height: 16px;
6895
  padding: 2px 0;
6896
  float: left;
6897
  border: none;
6898
  margin: 0;
6899
  padding: 2px 0;
6900
  text-align: center;
6901
  font-size: inherit;
6902
}
6903

    
6904
.model-item .actions-content .action-container .confirm-single .no {
6905
  background-color: #FF9955;
6906
}
6907

    
6908
.model-item .actions-content .action-container .confirm-single .yes {
6909
  background-color: #FF7F2A;
6910
  width: 80px;
6911
}
6912

    
6913
.model-item .actions-content .action-container.warn .confirm-single .no:hover {
6914
  color: #fff;
6915
}
6916

    
6917
.model-item .actions-content .action-container.warn .confirm-single .no {
6918
  background-color: #CC0000;
6919
}
6920

    
6921
.model-item .actions-content .action-container.warn .confirm-single .yes {
6922
  background-color: #880000;
6923
  color: #fff;
6924
}
6925

    
6926
.model-item .actions-content .action-container.warn .confirm-single .yes:hover {
6927
  background-color: #CC0000;
6928
}
6929

    
6930
.model-item .actions-content .action-container .confirm-single {
6931
  display: none;
6932
  width: 100px;
6933
  float: right;
6934
  margin-right: -22px;
6935
  margin-top: -4px;
6936
}
6937

    
6938
.model-item .actions-content .action-container.selected .confirm-single {
6939
  display: block !important;
6940
}
6941

    
6942
.model-item.actionpending .actions-content .action-container.isactive,
6943
.model-item:hover .actions-content .action-container.isactive,
6944
/*.model-item.hovered .actions-content .action-container.isactive,*/
6945
.model-item .actions-content .action-container.selected {
6946
  display: block;
6947
}
6948

    
6949
.model-item.actionpending .nested-model-list .actions-content .action-container.isactive {
6950
  display: none;
6951
}
6952

    
6953
.model-item.actionpending .nested-model-list .model-item.actionpending .actions-content .action-container.isactive {
6954
  display: block;
6955
}
6956

    
6957
.model-item .actions-content .action-container.selected:hover {
6958
  background-color: transparent;
6959
  border-left: 4px solid #7DB4CD;
6960
  margin-left: 6px;
6961
}
6962

    
6963
.model-item .actions-content .action-container:hover a {
6964
  color: #fff;
6965
}
6966

    
6967
.model-item .actions-content .action-container:hover {
6968
  background-color: #A1C8DB;
6969
  border-left: 4px solid #7DB4CD;
6970
  margin-left: 6px;
6971
}
6972

    
6973
.model-item .actions-content .action-container.selected {
6974
}
6975

    
6976
.model-item .actions-content .action-container {
6977
  display: none; 
6978
}
6979

    
6980
.model-item .actions-content .action-container {
6981
  padding: 2px;
6982
  margin-bottom: 5px;
6983
  padding-left: 4px;
6984
  margin-left: 10px;
6985
  cursor: pointer;
6986
}
6987

    
6988
.model-item .status-active .status-indicator .indicator {
6989
  background-color: #63cf1c;
6990
}
6991

    
6992
.model-item .status-inactive .status-indicator .indicator {
6993
  background-color: #940606;
6994
}
6995

    
6996
.model-item .status-error .status-indicator .indicator {
6997
  background-color: #ff0000;
6998
}
6999

    
7000
.model-item .status-progress .status-indicator .indicator {
7001
  background-color: #FF7F2A;
7002
}
7003

    
7004
.model-item .status-indicator .indicator {
7005
  width: 10px;
7006
  height: 11px;
7007
  float: right;
7008
  background-color: #EFF7FA;
7009
  margin-right: 3px;
7010
}
7011

    
7012
/* vm sprites */
7013
.vm-icon.medium2 {
7014
  width: 30px;
7015
  height: 32px;
7016
}
7017

    
7018
.vm-icon.medium2.state1 {
7019
    background-position: 0px 0;
7020
}
7021

    
7022
.vm-icon.medium2.state2 {
7023
    background-position: -60px 0;
7024
}
7025

    
7026
.vm-icon.medium2.state3 {
7027
    background-position: -90px 0;
7028
}
7029

    
7030
.vm-icon.medium2.state4 {
7031
    background-position: -30px 0;
7032
}
7033

    
7034

    
7035
.vm-icon.medium {
7036
  width: 50px;
7037
  height: 54px;
7038
}
7039

    
7040
.vm-icon.medium.state1 {
7041
    background-position: 0px 0;
7042
}
7043

    
7044
.vm-icon.medium.state2 {
7045
    background-position: -100px 0;
7046
}
7047

    
7048
.vm-icon.medium.state3 {
7049
    background-position: -150px 0;
7050
}
7051

    
7052
.vm-icon.medium.state4 {
7053
    background-position: -50px 0;
7054
}
7055
/* end vm sprites */
7056

    
7057
/* ips */
7058
.ip-port-view .title {
7059
  width: 100%;
7060
}
7061

    
7062
.model-item .vm-name {
7063
  font-weight: bold;
7064
}
7065

    
7066
.nested-model-list {
7067
  position: relative;
7068
  top: 43px;
7069
  overflow: visible;
7070
  width: 531px;
7071
  margin-left: -41px;
7072
  margin-bottom: 39px;
7073
}
7074

    
7075
.entry.inline .nested-model-list {
7076
  font-size: 0.9em;
7077
}
7078

    
7079
.entry.inline .nested-model-list .model-item .outer {
7080
  width: 220px;
7081
}
7082

    
7083
.entry.inline .nested-model-list {
7084
  position: absolute;
7085
  top: 17px;
7086
  margin-left: -9px;
7087
  margin-bottom: 0;
7088
  width: 420px;
7089
}
7090

    
7091
.entry.inline .nested-model-list .inner.main-content {
7092
  margin-left: 0;
7093
}
7094

    
7095
.entry.inline .nested-model-list .model-item .inner.main-content .title,
7096
.entry.inline .nested-model-list .model-item .inner.main-content .subtitle {
7097
  left: 52px;
7098
}
7099

    
7100
.nested-model-list .collection {
7101
  padding: 0;
7102
}
7103

    
7104
.nested-model-list .model-item .outer {
7105
  width: 470px;
7106
  position: relative;
7107
}
7108

    
7109
.model-item .border i.remove,
7110
.empty-list i.add {
7111
    display: block;
7112
    color: #fff;
7113
    padding-left: 10%;
7114
    width: 90%;
7115
    padding-top: 0px;
7116
    font-weight: bold;
7117
    font-size: 1.4em;
7118
    cursor: pointer;
7119
    font-style: normal;
7120
}
7121

    
7122
.model-item .border i.remove {
7123
  font-size: 1em;
7124
  color: #BE5812;
7125
  padding-top: 1px;
7126
}
7127

    
7128
.empty-list.nested {
7129
  height: 30px;
7130
}
7131

    
7132
.empty-list .border2, 
7133
.nested-model-list .outer .border2 {
7134
  border-left: 3px solid #FB822F;
7135
  position: absolute;
7136
  height: 100%;
7137
  width: 1px;
7138
  left:0;
7139
  top:0;
7140
}
7141

    
7142
.empty-list .border2, 
7143
.nested-model-list .model-item:last-child .outer .border2 {
7144
  height: 69px;
7145
}
7146

    
7147
.empty-list .border, .nested-model-list .outer .border {
7148
  position: absolute;
7149
  top: 52px;
7150
  left: 0;
7151
  background-color: #FB822F;
7152
  height: 17px;
7153
  width: 91px;
7154
  z-index: 0;
7155
}
7156

    
7157
.empty-list .border {
7158
  top: 31px;
7159
}
7160

    
7161
.empty-list .border2 {
7162
  height: 31px;
7163
}
7164

    
7165
.nested-model-list .model-item .inner .model-logo {
7166
  position: relative;
7167
  z-index: 100;
7168
}
7169

    
7170
.model-item.actionpending .nested-model-list.proxy .model-item .inner.main-content,
7171
.model-item:hover .nested-model-list.proxy .model-item .inner.main-content,
7172
.model-item.hovered .nested-model-list.proxy .model-item .inner.main-content,
7173
.nested-model-list .model-item.actionpending .inner.main-content,
7174
.nested-model-list .model-item:hover .inner.main-content,
7175
.nested-model-list .model-item.hovered .inner.main-content {
7176
  background-color: #84B7D0;
7177
}
7178

    
7179
.entry.inline .model-item .inner,
7180
.entry.inline *:hover .model-item .inner,
7181
.entry.inline .model-item:hover .inner {
7182
  background-color: transparent !important;
7183
}
7184

    
7185
.nested-model-list .model-item:last-child .inner.main-content {
7186
  border-bottom: none;
7187
}
7188

    
7189
.nested-model-list .model-item .inner.main-content {
7190
  width: auto;
7191
  margin-bottom: 0;
7192
  float: none;
7193
  z-index: 0;
7194
  margin-left: 30px;
7195
  padding-bottom: 20px;
7196
  padding: 10px;
7197
  border-bottom: 1px solid #5CA1C0;
7198
  /*height: 59px;*/
7199
}
7200

    
7201
.nested-model-list .model-item .inner.main-content .subtitle {
7202
  position: absolute;
7203
  top: 27px;
7204
  left: 110px;
7205
  font-weight: normal;
7206
  font-size: 0.8em;
7207
}
7208

    
7209
.nested-model-list .model-item .inner.main-content .title {
7210
  position: absolute;
7211
  top: 10px;
7212
  left: 110px;
7213
  font-weight: bold;
7214
}
7215

    
7216
.model-item:hover .nested-model-list .actions-content .action-container.isactive {
7217
  display: none;
7218
}
7219

    
7220
.model-item:hover .nested-model-list .model-item.actionpending .actions-content .action-container.isactive {
7221
  display: block !important;
7222
}
7223

    
7224

    
7225
.model-item .actions-content .action-container.selected a {
7226
  color: #FF7F2A;
7227
}
7228

    
7229
.model-item:hover .nested-model-list.proxy .model-item .actions-content .action-container.selected,
7230
.model-item:hover .nested-model-list.proxy .model-item .actions-content .action-container.isactive,
7231
.model-item.hovered .nested-model-list.proxy .model-item .actions-content .action-container.selected,
7232
.model-item.hovered .nested-model-list.proxy .model-item .actions-content .action-container.isactive,
7233
.model-item:hover .nested-model-list .model-item .actions-content .action-container.selected,
7234
.model-item:hover .nested-model-list .model-item:hover .actions-content .action-container.isactive {
7235
  display: block !important;
7236
}
7237

    
7238
.pane-view .model-view .nested-model-list .model-item .actions-content {
7239
  position: absolute;
7240
  right: -180px;
7241
  top:0;
7242
  float: none;
7243
  display: block;
7244
  width: 180px;
7245
  height: 80px;
7246
}
7247

    
7248
/* networks */
7249
.nested-model-list .ip-addresses li {
7250
  margin-bottom: 8px;
7251
}
7252

    
7253
.nested-model-list .ip-addresses li .type {
7254
  margin-right: 3px;
7255
  vertical-align: middle;
7256
  color: #fff;
7257
  background-color: #4085A5;
7258
  padding: 3px;
7259
}
7260

    
7261
.nested-model-list .ip-addresses li .ip {
7262
  padding-top: 3px;
7263
}
7264

    
7265
.nested-model-list .ip-addresses {
7266
  padding-top: 0px;
7267
  font-size: 0.9em;
7268
  margin-left: 70px;
7269
  margin-top:-35px;
7270
  margin-bottom: 35px;
7271
}
7272

    
7273
.ports.nested-model-list.is-public .empty-list .border,
7274
.ports.nested-model-list.is-public .empty-list .border2 {
7275
  display: none !important;
7276
}
7277

    
7278
.network-ports-toggler {
7279
  position: absolute;
7280
  top: 30px;
7281
  left: 0px;
7282
}
7283

    
7284
.model-form-actions .form-action {
7285
  font-size: 1.1em !important;
7286
}
7287

    
7288
.model-form textarea {
7289
    width: 99%;
7290
    height: 100px;
7291
    border: 1px solid #aaa;
7292
}
7293

    
7294
.model-form .form-field {
7295
    margin-bottom: 10px;
7296
}
7297

    
7298
.model-form label {
7299
    display: block;
7300
    color: #406A7D;
7301
    font-size: 1.1em;
7302
    margin: 0px 0 5px 0;
7303
}
7304

    
7305
.model-form .inline label {
7306
    float: left;
7307
    margin-right: 10px;
7308
    margin-top: 15px !important;
7309
}
7310

    
7311
.model-form input.long {
7312
    width: 400px;
7313
}
7314

    
7315
.model-form .inline input {
7316
    width: auto;
7317
    margin-top: 10px;
7318
}
7319

    
7320
.model-form .inline select {
7321
    width: auto;
7322
    margin-top: 7px;
7323
}
7324

    
7325
.model-form .inline .errors,
7326
.model-form .inline .field-desc {
7327
    clear: both;
7328
}
7329

    
7330
.model-action.disabled {
7331
    background-color: #aaa;
7332
    border-color: #aaa;
7333
    cursor: default;
7334
}
7335
.model-action.disabled:hover {
7336
    background-color: #aaa;
7337
    border-color: #aaa;
7338
}
7339

    
7340
.model-action:hover {
7341
    background-color: #aaa;
7342
}
7343

    
7344
.model-action:hover {
7345
    background-color: #F95;
7346
    border-color: #F95;
7347
}
7348

    
7349
.model-action.in-progress {
7350
    background-color: #aaa;
7351
    color: #fff;
7352
    border-color: #aaa;
7353
    background-image: url("../images/icons/indicators/small/progress.gif") !important;
7354
}
7355

    
7356
.model-action.add-generate {
7357
    background-image: url("../images/option-action-generate-ssh.png");
7358
}
7359

    
7360
.model-action.add {
7361
    background-image: url("../images/option-action-add.png");
7362
    padding-right: 20px !important;
7363
}
7364

    
7365
.model-action {
7366
    float: right;
7367
    background-color: #FF7F2A;
7368
    color: #fff;
7369
    padding: 6px 8px;
7370
    margin-left: 10px;
7371
    cursor: pointer;
7372
    padding-right: 30px;
7373
    background-position: right center;
7374
    background-repeat: no-repeat;
7375
    background-clip: border-box;
7376
    border-right: 5px solid #FF7F2A;
7377
    font-size: 0.9em;
7378
}
7379

    
7380
.overlay-public-key-create .error-msg {
7381
    margin-bottom: 5px;
7382
}
7383

    
7384
.model-form.public-key textarea {
7385
  height: 125px;
7386
}
7387

    
7388
.model-notice {
7389
    margin-bottom: 10px;
7390
}
7391

    
7392
.model-notice p.message {
7393
    margin: 0;
7394
    padding: 0; 
7395
    border: 2px solid #444;
7396
    padding: 4px;
7397
    background-color: #efefef;
7398
    line-height: 1.7em;
7399
    padding: 6px;
7400
}
7401

    
7402
.model-notice p.message .download {
7403
    color: #fff;
7404
    background-color: #FF7F2A;
7405
    border: 1px solid #F95;
7406
    padding: 3px;
7407
    cursor: pointer;
7408
}
7409

    
7410

    
7411
.model-notice p.message.success {
7412
    color: #447821;
7413
    background-color: #AADE87;
7414
    border: 1px solid #447821;
7415
}
7416

    
7417
#public-keys-list-view .model-item textarea.content {
7418
  width: 270px;
7419
  background-color: transparent;
7420
  font-family: monospace;
7421
  font-size: 1em;
7422
  border: none;
7423
  overflow-y: hidden;
7424
  overflow-x: hidden;
7425
  height: 155px;
7426
  margin: 10px 0;
7427
  padding: 10px;
7428
  border: 1px solid #ddd;
7429
  background-color: #efefef;
7430
}
7431

    
7432

    
7433
.model-rename-view .edit {}
7434

    
7435
.model-rename-view .edit-btn {
7436
  display: none;
7437
  background-repeat: no-repeat;
7438
  font-size: 75%;
7439
  font-weight: normal;
7440
  margin-left: 10px;
7441
  padding-left: 10px;
7442
  text-align: left;
7443
  cursor: pointer;
7444
  color: #3D3D3D;
7445
  margin-top: 0.4em;
7446
  background-image: url("../images/pencil.png");
7447
  background-position: 0 0px;
7448
  width: 10px;
7449
  height: 7px;
7450
}
7451

    
7452
.model-rename-view:hover .edit-btn {
7453
  display: inline;
7454
}
7455

    
7456
.model-rename-view input {
7457
  border: 1px solid #aaaaaa;
7458
  font-size: 85%;
7459
  padding: 2px;
7460
  width: 235px;
7461
}
7462

    
7463
.model-rename-view .value {}
7464

    
7465
.model-rename-view .name {}
7466

    
7467
.model-rename-view .rename-actions {
7468
  float: right;
7469
  width: 40px;
7470
  position: relative;
7471
  top: 1px;
7472
  left: -6px;
7473
}
7474

    
7475
.model-rename-view .rename-actions .btn {
7476
  float: left;
7477
  height: 16px;
7478
  width: 16px;
7479
  cursor: pointer;
7480
}
7481

    
7482
.model-rename-view .rename-actions .btn.confirm {
7483
  background-image: url("../images/save.png"); 
7484
  margin-left: 3px;
7485
}
7486

    
7487
.model-rename-view .rename-actions .btn.cancel {
7488
  background-image: url("../images/cancel.png"); 
7489
  margin-left: 3px;
7490
}
7491

    
7492
.model-rename-view .rename-actions .btn.confirm:hover {
7493
  background-color: #84b7d0;
7494
}
7495

    
7496
.model-rename-view .rename-actions .btn.cancel:hover {
7497
  background-image: url("../images/cancel-onhover.png"); 
7498
}
7499

    
7500

    
7501
.select-item input {
7502
  cursor: pointer;
7503
}
7504

    
7505
.select-item {
7506
  font-size: 12px;
7507
  padding: 5px 4px;
7508
  margin-bottom: 3px;
7509
  background-color: #efefef;
7510
  cursor: pointer;
7511
}
7512

    
7513
.select-item.selected {
7514
  background-color: #FF7F2A;
7515
}
7516

    
7517
.select-item.selected * {
7518
  color: #fff;
7519
}
7520

    
7521
.steps-container .floating-ips .collection {
7522
}
7523

    
7524
.ip-port-view .title {
7525
  font-weight: normal !important;
7526
}
7527

    
7528
.pane-view .title.floating-ip {
7529
  font-weight: bold !important;
7530
}
7531

    
7532
.items-list.floating-ips {
7533
  margin-top: -5px;
7534
}
7535

    
7536
.select-item.floating-ip.not-available {
7537
  background-image: none;
7538
}
7539

    
7540
.select-item.floating-ip.create.no-available {
7541
  background-image: url("../images/option-action-add.png");
7542
}
7543

    
7544
.select-item.floating-ip.create {
7545
  padding-left: 34px;
7546
  margin-bottom: 5px;
7547
  background-image: url("../images/option-action-add-dark.png");
7548
  background-repeat: no-repeat;
7549
  background-position: 9px 7px;
7550
}
7551

    
7552
.select-item.floating-ip.selected * {
7553
  color: #222 !important;
7554
  font-weight: bold;
7555
}
7556

    
7557
.select-item.floating-ip {
7558
  border-left: 10px solid #efefef;
7559
  background-color: #ddd;
7560
  margin-bottom: 0;
7561
  border-bottom: 1px solid #efefef;
7562
}
7563

    
7564
.select-item.private-network .name {
7565
  float: left;
7566
  width: 50%;
7567
}
7568

    
7569
.select-item.vm .status .indicators {
7570
  width: 60px;
7571
  float: left;
7572
  margin: 0px 0 0 0;
7573
}
7574

    
7575
.select-item.vm .status span {
7576
  text-align: right;
7577
  display: block;
7578
  width: 100px;
7579
  float: left;
7580
  font-size: 0.9em;
7581
  margin-top: 2px;
7582
}
7583

    
7584
.select-item.vm .status {
7585
  float: right;
7586
  margin-right: 0px;
7587
  width: 170px;
7588
}
7589

    
7590
.select-item.private-network .cidr {
7591
  float: right;
7592
  width: 40%;
7593
  font-size: 0.9em;
7594
  text-align: right;
7595
  margin-top: 3px;
7596
}
7597

    
7598
.select-item .name {
7599
  float: left;
7600
  width: 90%;
7601
}
7602

    
7603
.select-item .ico {
7604
  float: left;
7605
  width: 5%;
7606
}
7607

    
7608
.select-item .checkbox {
7609
  float: left;
7610
  width: 5%;
7611
}