Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (139.2 kB)

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

    
19
body {
20
    background: url("../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.machine div.actions .disabled-visible a,
1064
div.machine div.vm-actions .disabled-visible a {
1065
  color: #aaa;
1066
}
1067

    
1068
div.single-container div.vm-actions .disabled {
1069
    display: none;
1070
}
1071

    
1072
div.machine div.actions .disabled {
1073
    display: none;
1074
}
1075

    
1076
div.connect-arrow {
1077
    background: url("../images/connect-arrow.png") no-repeat;
1078
    height: 28px;
1079
    width:14px;
1080
    position: absolute;
1081
    display: none;
1082
}
1083

    
1084
.machine div.connect-arrow {
1085
    display: none;
1086
    left: -3px;
1087
    position: absolute;
1088
    top: 22px;
1089
}
1090

    
1091
div.connect-arrow:hover, div.connect-arrow.border-hover, div.connect-arrow-ie, div.connect-arrow.border-ie {
1092
    cursor: pointer;
1093
    background: url("../images/connect-arrow-hover.png") no-repeat;
1094
    height: 28px;
1095
    width:26px;
1096
}
1097

    
1098
div.connect-border {
1099
    opacity: 0.8;
1100
    filter: alpha(opacity = 80);
1101
    background-color:#4fe0c3;
1102
    height:28px;
1103
    width: 12px;
1104
    position: absolute;
1105
    display: none;
1106
}
1107

    
1108
div.connect-border:hover {
1109
    cursor: pointer;
1110
}
1111

    
1112
.machine div.connect-border {
1113
    display: none;
1114
    left: -15px;
1115
    position: absolute;
1116
    top: 22px;
1117
}
1118

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

    
1131
.standard .machine .single-image-state1 {
1132
    background-position: 0px 0;
1133
}
1134

    
1135
.standard .machine .single-image-state3 {
1136
    background-position: -100px 0;
1137
}
1138

    
1139
.standard .machine .single-image-state4 {
1140
    background-position: -150px 0;
1141
}
1142

    
1143
.standard .machine .single-image-state2 {
1144
    background-position: -50px 0;
1145
}
1146

    
1147
.standard .running .machine .logo {
1148
   cursor: pointer;
1149
}
1150

    
1151
.list .machine img {
1152
    margin: 0;
1153
}
1154

    
1155
.icon div.cont-toggler-wrapper.ips {
1156
    margin-top: 2px;
1157
    font-size: 75%;
1158
}
1159

    
1160
.icon div.indicators {
1161
    float: right;
1162
}
1163

    
1164
div.indicators {
1165
    margin-right: 2px !important;
1166
    cursor: pointer;
1167
}
1168

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

    
1181
.view-separator {
1182
    color:#5F8DD3;
1183
}
1184

    
1185
.running.disabled {
1186
    background: transparent;
1187
}
1188

    
1189
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
1190
    background-color: #63cf1c;
1191
}
1192

    
1193
.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
1194
    background-color: #d4aa00;
1195
}
1196

    
1197
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
1198
    background-color: #ff0000 !important;
1199
}
1200

    
1201
.terminated-state .indicator1, .terminated-state .indicator2, .terminated-state .indicator3, .terminated-state .indicator4 {
1202
    background-color: #5e1616;
1203
}
1204

    
1205
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
1206
    background-color: #FF7F2A;
1207
}
1208

    
1209
.destroying-state .indicator1, .destroying-state .indicator3, .destroying-state .indicator2, .destroying-state .indicator4 {
1210
    background-color: #4085a5 !important;
1211
}
1212

    
1213
.shutting-state .indicator1, .shutting-state .indicator3, .shutting-state .indicator2, .shutting-state .indicator4 {
1214
    background-color: #940606;
1215
}
1216

    
1217
.starting-state .indicator1, .starting-state .indicator2, .starting-state .indicator3, .starting-state .indicator4 {
1218
    background-color: #9ed976;
1219
}
1220

    
1221
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
1222
    background-color: #63cf1c;
1223
}
1224

    
1225
.network-indicator.in-progress .indicator1, .network-indicator.in-progress .indicator2, .network-indicator.in-progress .indicator3, .network-indicator.in-progress .indicator4 {
1226
    background-color: #FF7F2A;
1227
}
1228

    
1229
.running, .terminated {
1230
    background: #EFF7FA repeat scroll 0 0;
1231
    padding-bottom: 15px;
1232
}
1233

    
1234
.running, #machinesview-list, .single {
1235
}
1236

    
1237
.terminated {
1238
    background:#DCE5E8  repeat scroll 0 0;
1239
    padding-top: 15px;
1240
    margin-top: 15px;
1241
}
1242

    
1243
span.rename {
1244
    background-repeat: no-repeat;
1245
    color: transparent;
1246
    font-size: 75%;
1247
    font-weight: normal;
1248
    margin-left: 10px;
1249
    padding-left: 10px;
1250
    text-align: left;
1251
    cursor: pointer;
1252
}
1253

    
1254
div.name:hover span.rename, span.rename_hovered {
1255
    color: #3D3D3D;
1256
    margin-top: 0.4em;
1257
    background-image: url("../images/pencil.png");
1258
    background-position: 0 3px;
1259
}
1260

    
1261
.machine div.info {
1262
    font-size: 75%;
1263
}
1264

    
1265
div.machine:hover div.info-header, div.machine:hover div.toggler div.down {
1266
    background-color: #84b7d0;
1267
}
1268

    
1269
div.machine div.info-label.darker, .single div.tags-label.darker, div.network .darker {
1270
    background-color: #5CA1C0;
1271
}
1272

    
1273
.machine div.info div.info-label {
1274
    font-size: 75%;
1275
    height:16px;
1276
    width: 30px;
1277
    padding: 1px 0 0 5px;
1278
}
1279

    
1280
.machine div.info div.toggler, .single div.tags div.toggler, div.network div.toggler {
1281
    width:15px;
1282
    height:17px;
1283
    margin-top: -11px;
1284
    margin-left: 37px;
1285
}
1286

    
1287
div.network div.toggler {
1288
    margin-left: 90px;
1289
}
1290

    
1291
.machine div.info div.down {
1292
    background: url(../images/down-arrow.png) no-repeat scroll 1px 1px;
1293
}
1294

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

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

    
1303
.network div.network-machine div.firewall div.down {
1304
    background: url(../images/down-arrow.png) no-repeat scroll 2px 2px;
1305
}
1306

    
1307
.machine div.info div.up {
1308
    background: url(../images/up-arrow.png) no-repeat scroll 1px 0;
1309
}
1310

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

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

    
1319
.network div.network-machine div.firewall div.up {
1320
    background: url(../images/up-arrow.png) no-repeat scroll 2px 2px;
1321
}
1322

    
1323
button {
1324
    background-color: #87AADE;
1325
    border: 1px solid #87AADE;
1326
    color: #FFFFFF;
1327
    cursor: pointer;
1328
    height: 23px;
1329
    width: 120px;
1330
}
1331

    
1332
button.next {
1333
    background-color: #4085A5;
1334
    border-color: #4085A5;
1335
    text-align: right;
1336
}
1337

    
1338
button.next:hover {
1339
    background-color: #7DB4CD;
1340
    border-color: #7DB4CD;
1341
}
1342

    
1343
button.prev {
1344
    background-color: #4085A5;
1345
    border-color: #4085A5;
1346
    margin-left: -1px;
1347
    text-align: left;
1348
}
1349

    
1350
button.prev:hover {
1351
    background-color: #7DB4CD;
1352
    border-color: #7DB4CD;
1353
}
1354

    
1355
.image-logo {
1356
    float: left;
1357
    margin-right: 1em;
1358
    margin-left: 1.5em;
1359
    margin-top: 4px;
1360
}
1361

    
1362
.icon div.image {
1363
    clear: both;
1364
    display: block;
1365
    margin-bottom: 3px;
1366
    margin-top: 3px;
1367
    padding: 5px;
1368
}
1369

    
1370
div#view-select {
1371
    clear: both;
1372
    color: white;
1373
    position: absolute;
1374
    right: 15px;
1375
    top: 15px;
1376
}
1377

    
1378
a.machines_view_link {
1379
    text-decoration: none;
1380
    font-size: 0.7em;
1381
    padding: 4px;
1382
    padding-right: 8px;
1383
    color: #5CA1C0;
1384
    margin-left: 5px;
1385
    background-repeat: no-repeat;
1386
    background-color: #C9DFEA;
1387
}
1388

    
1389
a.machines_view_link span {
1390
    float: left;
1391
}
1392

    
1393
a.machines_view_link span.ico {
1394
    width: 17px;
1395
    height: 15px;
1396
    margin-right: 10px;
1397
    background-position: -36px 0;
1398
}
1399

    
1400
a.machines_view_link:hover {
1401
    background-color: #A1C8DB;
1402
    color: #fff;
1403
}
1404
a.machines_view_link:hover span.ico {
1405
    background-position: -0px 0px;   
1406
}
1407

    
1408
a.machines_view_link.activelink span.ico {
1409
    background-position: -18px 0px;
1410
}
1411
a.machines_view_link.activelink {
1412
    color: #fff;
1413
    background-color: #5CA1C0;
1414
}
1415

    
1416
div#view-select a {
1417
    display: block;
1418
    float: left;
1419
}
1420

    
1421
a#list:hover {
1422
    background: #5f8dd3;
1423
}
1424

    
1425
a#machines_view_icon_link:active, a#machines_view_list_link:active {
1426
    color:white;
1427
}
1428

    
1429
a#machines_view_icon_link span.ico {
1430
    background-image: url("../images/icon-view.png");
1431
}
1432

    
1433
a#machines_view_list_link span.ico {
1434
    background-image: url("../images/list-view.png");
1435
}
1436

    
1437
a#machines_view_single_link span.ico {
1438
    background-image: url("../images/single-view.png");
1439
}
1440

    
1441
#machinetype {
1442
    background-color: #CDE2EC;
1443
    height: 25px;
1444
    margin-bottom: 0px !important;
1445
}
1446

    
1447
div.machine-type {
1448
    float: left;
1449
    margin: 4px 18px 20px;
1450
}
1451

    
1452
.machine-type .active {
1453
    color: #FFFFFF
1454
}
1455

    
1456
div.machine-type label.disabled {
1457
    color: #aaa !important;
1458
}
1459

    
1460
#machinesview {
1461
}
1462

    
1463
#machines-pane {
1464
}
1465

    
1466
.list#machinesview {
1467
    margin-left: -20px;
1468
    display:none;
1469
}
1470

    
1471
#machinesview-list.list {
1472
    background: #EFF7FA  repeat scroll 0 0;
1473
    padding-left: 15px;
1474
    padding-bottom: 15px;
1475
}
1476

    
1477
#machinesview_content {
1478
    display:none;
1479
}
1480

    
1481
.list-machines {
1482
    min-width: 515px;
1483
}
1484

    
1485
#emptymachineslist {
1486
    background-color: #6BA9C6;
1487
    color: #A0A0A0;
1488
    display: none;
1489
    padding: 65px 150px 35px;
1490
    text-align: justify;
1491
    margin-top: -70px;
1492
}
1493

    
1494
#welcomeheader {
1495
    color:white;
1496
    text-align: center;
1497
}
1498

    
1499
.welcomebody {
1500
    color: white;
1501
    font-size:80%;
1502
}
1503

    
1504
.welcomebody a {
1505
    color: white;
1506
}
1507

    
1508
.welcomefooter {
1509
    color: white;
1510
    font-size:60%;
1511
}
1512

    
1513
.welcomefooter a {
1514
    color: white;
1515
}
1516

    
1517
.emptycreatecontainer {
1518
    margin-left: 430px !important;
1519
    position: absolute;
1520
    margin-top: 5px !important;
1521
    width: 180px;
1522
    background-color: #CCCCCC;
1523
    padding: 5px;
1524
    padding-left: 10px;
1525
}
1526

    
1527
.emptycreate {
1528
    margin: 20px 10px 5px 0 !important;
1529
}
1530

    
1531
#createbody {
1532
    display:none;
1533
    font-size: 80%;
1534
}
1535

    
1536
div.list label img {
1537
    margin: 5px 5px -3px 0;
1538
}
1539

    
1540
div.list label {
1541
    color: #3D3D3D;
1542
    font-size: 75%;
1543
}
1544

    
1545
div.list .state {
1546
    margin-top: 7px;
1547
    margin-right: 10px;
1548
}
1549

    
1550
div.list table tbody {
1551
    margin-top: 8px;
1552
}
1553

    
1554
div.list table tr.checked td {
1555
    background-color: #A1C8DB !important;
1556
}
1557

    
1558
div.list table tr:hover td,
1559
div.list table tr.inactive:hover td,
1560
div.list table tr.error:hover td {
1561
    background-color: #A1C8DB;
1562
    color: #fff;
1563
}
1564

    
1565
div.list table td.name {
1566
    min-width: 170px;
1567
}
1568

    
1569
div.list table td.status {
1570
    font-size: 0.9em !important; 
1571
    text-align: right;
1572
    min-width: 90px;
1573
    color: #000;
1574
}
1575

    
1576
div.list table td.flavor {
1577
    font-size: 0.8em;
1578
}
1579

    
1580
div.list table td {
1581
    border-bottom: 1px solid #DDD;
1582
}
1583

    
1584
div.list table tr.error td.status {
1585
    color: #800000 !important;
1586
    font-weight: bold;
1587
}
1588

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

    
1593
div.list table tr.inactive td {
1594
    background-color: #DCE5E8;
1595
}
1596

    
1597
div.list .stopped {
1598
    margin-top: 8px;
1599
}
1600

    
1601
/* root element for tabs  */
1602
#wizard ul.tabs {
1603
    margin-right: -1px;
1604
    float: right;
1605
}
1606

    
1607
#wizard div.panes {
1608
    height: 247px;
1609
    clear:both;
1610
    margin-top: 3px;
1611
}
1612

    
1613
.typebody {
1614
    font-size: 80%;
1615
    font-weight: normal;
1616
    position: relative;
1617
    top: -3px;
1618
}
1619

    
1620
.typehover {
1621
    color: #FFFFFF;
1622
}
1623

    
1624
#label-name {
1625
    margin-top: 10px;
1626
}
1627

    
1628
/* single tab */
1629
#wizard ul.tabs li {
1630
    margin-bottom: 0;
1631
    list-style-type:none;
1632
    float: left;
1633
}
1634

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

    
1651
#wizard ul.tabs a:hover {
1652
    color: #FFFFFF;
1653
    background-color:#4085A5;
1654
}
1655

    
1656
/* selected tab */
1657
#wizard ul.tabs a.current {
1658
    color: white;
1659
    background-color: #7DB4CD;
1660
    cursor: default;
1661
}
1662

    
1663
#wizard #standard-images {
1664
    background-color: #ECF4F8;
1665
}
1666

    
1667
div.list div.actions {
1668
    display: none;
1669
    clear: left;
1670
    float: right;
1671
    margin-right: 15px;
1672
    margin-top: 37px;
1673
    text-align: right;
1674
    width: 120px;
1675
}
1676

    
1677
div.list div.actions a {
1678
    clear: left;
1679
    color: #A1A1A1;
1680
    display: block;
1681
    font-size:75%;
1682
    margin-bottom: 2px;
1683
}
1684

    
1685
div.list div.actions a:hover {
1686
    background-color: transparent;
1687
}
1688

    
1689
div.list div.actions a.enabled {
1690
    color: #3D3D3D;
1691
}
1692

    
1693
div.list div.actions a.enabled:hover{
1694
    cursor: pointer;
1695
    color: black;
1696
    text-decoration: underline;
1697
}
1698

    
1699
div.list div.actions a.selected {
1700
    color: #FF7F2A !important;
1701
}
1702

    
1703
input.machine {
1704
    width: 13px;
1705
    height: 13px;
1706
    top: -1px;
1707
    overflow: hidden;
1708
}
1709

    
1710
.description-container {
1711
    display: inline-block;
1712
    position: relative;
1713
    width: 300px;
1714
}
1715

    
1716
#wizard .button-container {
1717
    height: 20px;
1718
}
1719

    
1720

    
1721
/* metadata dropdown combo */
1722
.meta-key {
1723
    margin-right: 18px;
1724
    float:left;
1725
}
1726

    
1727
/* notification box */
1728
#yes-no {
1729
    height: 150px;
1730
    z-index: 9999;
1731
    border-bottom: 5px solid #4085A5;
1732
}
1733

    
1734
#yes-no p, #yes-no button {
1735
    margin-top: 15px;
1736
}
1737

    
1738
#error-success, .notification-box {
1739
    z-index: 9999;
1740
    border-bottom: 5px solid #4085A5;
1741
    min-height: 150px;
1742
    top: 50px !important;
1743
    position: absolute;
1744
}
1745

    
1746
#error-success p, .notification-box p {
1747
    margin-top: 5px;
1748
}
1749

    
1750
.error-report {
1751
    display: none;
1752
}
1753

    
1754
#error-success .error-report {
1755
    position: absolute;
1756
    top: 140px;
1757
    right: 40px;
1758
}
1759

    
1760
.error .error-report {
1761
    display: block;
1762
}
1763

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

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

    
1772
#error-success .error-report .sending {
1773
    display: none;
1774
}
1775

    
1776
#error-success .error-report .send-btn {
1777
    color: #4085A5;
1778
    text-decoration: underline;
1779
    cursor: pointer;
1780
}
1781

    
1782
#error-success strong, .notification-box strong {
1783
    color: #F49C1A;
1784
}
1785

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

    
1797
.popup-header-error {
1798
    background-color: #800000 !important;
1799
}
1800

    
1801
.popup-border-error {
1802
    border-color: #800000 !important;
1803
    width:auto;
1804
}
1805

    
1806
.popup-details-error {
1807
    border: none !important;
1808
}
1809

    
1810
.popup-separator-error {
1811
    margin-bottom: 5px !important;
1812
}
1813

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

    
1829

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

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

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

    
1861
#error-success .popup-separator, .notification-box .popup-seperator {
1862
    background-color: #74AEC9;
1863
    height: 1px;
1864
    font-size:1%;
1865
    width: 442px;
1866
    margin-bottom: 30px;
1867
}
1868

    
1869
#error-success .machine-now-building {
1870
    font-size: 95%;
1871
    padding-bottom: 7px;
1872
    padding-top: 10px;
1873
}
1874

    
1875
#error-success.success .machine-now-building {
1876
    padding-bottom: 14px !important;
1877
}
1878

    
1879
#error-success .password-container, .notification-box .password-container {
1880
    width: 430px;
1881
    padding: 5px;
1882
    border: 2px solid #75b54a;
1883
    background-color: #aade87;
1884
}
1885

    
1886
#error-success .password-header, .notification-box .password-header {
1887
    margin-bottom: 5px;
1888
}
1889

    
1890
#error-success .password, .notification-box .password {
1891
    color: #447821;
1892
}
1893

    
1894
#error-success .popup-details, .notification-box .popup-details {
1895
    border: 2px solid #FF7F2A;
1896
    float: left;
1897
    margin-left: 10px;
1898
    padding: 2px;
1899
}
1900

    
1901
#error-success.success .popup-details, .notification-box .popup-details {
1902
    border: none !important;
1903
    float: none !important;
1904
    margin-left: none !important;
1905
    margin-top: 10px;
1906
}
1907

    
1908
#error-success.success .popup-separator, .notification-box .popup-seperator {
1909
    margin-bottom: 14px !important;
1910
}
1911

    
1912
#error-success .write-password, .notification-box .write-password {
1913
    margin-bottom: 5px;
1914
    padding-left: 30px;
1915
}
1916

    
1917
#error-success .write-password-password, .notification-box .write-password-password {
1918
    padding-left: 30px;
1919
    color: #447821;
1920
    display: inline;
1921
    font-size: 110%;
1922
    font-weight: bold;
1923
}
1924

    
1925
#error-success .write-password-details, .notification-box .write-password-details {
1926
    font-size: 75%;
1927
}
1928

    
1929
.more-details {
1930
    display: block;
1931
}
1932

    
1933
.notification-box h3 span.header-box {
1934
    background: transparent;
1935
}
1936

    
1937
.notification-box .machine-now-building {
1938
    padding: 20px 0;
1939
}
1940

    
1941
.notification-box .header-box {
1942
    width: auto !important;
1943
}
1944

    
1945
.notification-box .password {
1946
    text-align: center;
1947
}
1948
.notification-box .password a:hover {
1949
    background-color: #447821;
1950
    color: #fff;
1951
}
1952

    
1953
.notification-box .password a {
1954
    padding: 0.2em;
1955
    text-align: center;
1956
    color: #447821;
1957
    font-weight: bold;
1958
    font-size: 1.2em;
1959
    text-decoration: none;
1960
}
1961

    
1962
.popup-details a:link, .popup-details a:visited {
1963
    color: black;
1964
}
1965

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

    
1971
.destroy .confirm_single .no {
1972
    background-color: #CC0000;
1973
    color: #880000;
1974
}
1975

    
1976
.destroy .confirm_single .yes:hover {
1977
    background-color:#CC0000;
1978
}
1979

    
1980
div.list div.actions a.selected#action-destroy {
1981
    color: #880000 !important;
1982
}
1983

    
1984
.vm-actions .destroy a#action-destroy.selected {
1985
    color: #880000 !important;
1986
}
1987

    
1988
/* Confirmation boxes */
1989
div.confirm_single, div.confirm_multiple, div.action_error {
1990
    display: none;
1991
    color: black;
1992
}
1993

    
1994
div.confirm_single button, div.confirm_multiple button, div.action_error button {
1995
    font-size: 100%;
1996
    cursor: pointer;
1997
    color: black;
1998
    height: 20px !important;
1999
}
2000

    
2001
div.confirm_single button {
2002
    border: none;
2003
    font-family: Arial, Helvetica, sans-serif;
2004
    line-height: 1em;
2005
    vertical-align: middle;
2006
    padding: 2px 6px;
2007
    padding-bottom:4px;
2008
    height: 15px;
2009
}
2010

    
2011
div.confirm_single button.yes {
2012
    width: 90px;
2013
    background-color:#FF7F2A;
2014
}
2015

    
2016
div.confirm_single button.yes:hover {
2017
    background-color: #FF9955;
2018
}
2019

    
2020
div.confirm_single button.no {
2021
    width: 20px;
2022
    margin-left:-5px;
2023
    background-color: #FF9955;
2024
    color:#d95d0a;
2025
}
2026

    
2027
div.confirm_single button.no:hover {
2028
    color: white;
2029
}
2030

    
2031
div.confirm_multiple_cont {
2032
    background-color: #406A7D;
2033
    margin-top: 0px;
2034
    padding: 3px;
2035
    border-top: 1px solid #444;
2036
    border-bottom: 1px solid #444;
2037
    padding-top:0px;
2038
    margin-top: -1px;
2039
}
2040

    
2041
div.confirm_reboot_required {
2042
}
2043

    
2044
div.confirm_multiple {
2045
    font-size: 65%;
2046
    z-index: 8000;
2047
    /*height: 28px;*/
2048
    width: 700px;
2049
    margin-top: 15px;
2050
}
2051

    
2052
div.confirm_multiple p {
2053
    float: left;
2054
    color: #FFF;
2055
    font-weight: bold;
2056
    margin: 7px 0 0 10px;
2057
}
2058

    
2059
#networks-pane {
2060
    display: none;
2061
}
2062

    
2063
div.confirm_multiple button {
2064
    float: right;
2065
    background-color: transparent;
2066
    border: 1px solid #5CA1C0;
2067
    margin: 4px 5px 0 0;
2068
}
2069

    
2070
div.confirm_multiple button.yes {
2071
    border-color: #FF7F2A;
2072
    padding: 0 12px;
2073
}
2074

    
2075
div.confirm_multiple button.yes:hover {
2076
    background-color: #FF7F2A;
2077
}
2078

    
2079
div.confirm_multiple button.no {
2080
    padding: 0px 16px;
2081
}
2082

    
2083
div.confirm_multiple button.no:hover {
2084
    background-color: #5CA1C0;
2085
}
2086

    
2087
div.action_error {
2088
    width: 120px;
2089
    margin: 14px 0 0 37px;
2090
    background-color: #981D1D;
2091
    font-size: 75%;
2092
    z-index:1;
2093
    color: #FFF;
2094
    position:absolute;
2095
    top: 0px;
2096
}
2097

    
2098
div.action_error .action-error-msg {
2099
    background-color: #fff;
2100
    color: #981D1D;
2101
    border: 1px solid #981D1D;
2102
    padding: 4px;
2103
}
2104
div.action_error .action-error-msg .action {
2105
    font-weight: bold;
2106
}
2107

    
2108
div.action_error .action-error-msg {
2109
    font-size: 0.8em;
2110
}
2111

    
2112
.action_error button {
2113
    width: 75px;
2114
    background-color: transparent;
2115
    border: 1px solid;
2116
    border-color: #981D1D;
2117
    color: #fff !important;
2118
    float: left;
2119
}
2120

    
2121
div.action_error button.details {
2122
    padding-right: 5px;
2123
    width: 100px;
2124
    border-bottom: 2px solid #981D1D;
2125
    border-right: 1px solid #981D1D;
2126
    border-left: 2px solid #981D1D;
2127
    background-color: #E24B4B;
2128
}
2129

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

    
2141
div.action_error button.details:hover {
2142
    background-color: #FF7F2A;
2143
}
2144

    
2145
div#aboutuser{
2146
    float:right;
2147
    clear: both;
2148
    color: #FFFFFF;
2149
    font-size: 75%;
2150
    margin-top: -25px;
2151
}
2152

    
2153
div#user{
2154
    clear: both;
2155
    color: #FFFFFF;
2156
    font-size: 75%;
2157
    margin-top: 38px;
2158
    padding-bottom: 10px;
2159
    position: absolute;
2160
    right:0;
2161
}
2162

    
2163
div#user a{
2164
    color: #FFFFFF;
2165
    text-decoration: none;
2166
}
2167

    
2168
div#user a.current_lang {
2169
    color: #72ADC8;
2170
}
2171

    
2172
div#user .usermenu {
2173
    float: left;
2174
    cursor: pointer;
2175
    overflow: hidden;
2176
    padding-top: 5px;
2177
    margin-top: -6px;
2178
    position: relative;
2179
}
2180

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

    
2194
div#user .hovered {
2195
    background: #599EBD;
2196
    overflow: visible;
2197
    border-bottom: 1px solid #C7DFE9;
2198
}
2199

    
2200
div#user .hovered .username {
2201
    background-image: url("../images/down-arrow-lighter.png");
2202
}
2203

    
2204
div#user .active {
2205
    background-color: #BED5E0 !important;
2206
}
2207

    
2208
div#user .active .username {
2209
    color: #599EBD;
2210
    background-image: url("../images/down-arrow-lighter.png");
2211
}
2212

    
2213
div#user .useractions {
2214
    display: none;
2215
}
2216

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

    
2231
div#user .useractions li {
2232
    padding: 2px 10px;
2233
    border-bottom: 1px solid #efefef;
2234
    text-align: right;
2235
    display: block;
2236
    background-color: transparent;
2237
}
2238

    
2239
div#user .useractions li a {
2240
    color: #4085A5;
2241
    display: inline-block;
2242
    padding:5px 0;
2243
    padding-left: 30px;
2244
    padding-bottom: 6px;
2245
    background-repeat: no-repeat;
2246
    background-position: center left;
2247
}
2248

    
2249
div#user .useractions li.hovered {
2250
    background-color: #E1EFF6;
2251
}
2252

    
2253
div#user .useractions li.last {
2254
    border-bottom: none;
2255
}
2256

    
2257
div#user .useractions .logout a {
2258
    background-image: url("../images/icon-logout.png");
2259
}
2260

    
2261
div#user .langmenu {
2262
    float: left;
2263
    border-left: 1px solid #ffffff;
2264
    padding-left: 10px;
2265
    margin-left: -1px;
2266
}
2267

    
2268
div#user .langmenu .sep {
2269
    display: inline-block;
2270
    color: #72ADC8;
2271
}
2272

    
2273
.separator {
2274
    background-color: #74AEC9;
2275
    height: 10px;
2276
    width: 700px;
2277
    font-size: 1px;
2278
    line-height: 0px;
2279
}
2280

    
2281
#disks.separator {
2282
    background-color: #dea842;
2283
}
2284

    
2285
#networks.separator {
2286
    background-color: #6c535d;
2287
}
2288

    
2289
.network-machine h5 {
2290
    margin-bottom: 20px;
2291
    margin-top:0px;
2292
}
2293

    
2294
.machine-container .separator {
2295
    width: 508px;
2296
    height: 1px;
2297
    margin-top: 2px;
2298
    background-color: #5CA1C0;
2299
    margin-left: 13px;
2300
}
2301

    
2302
.editbuttons {
2303
    display: block;
2304
    clear: none;
2305
    width: 40px;
2306
    margin-right: 0px;
2307
    padding-top: 0px;
2308
    float: right;
2309
    cursor: pointer;
2310
    position: relative;
2311
    z-index: 1000;
2312
}
2313

    
2314
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2315
    background-color: #84b7d0;
2316
}
2317

    
2318
div.editbuttons div.cancel:hover {
2319
    background-image: url("../images/cancel-onhover.png");
2320
}
2321

    
2322
.editbuttons .cancel, .editbuttons .save {
2323
    background-repeat: no-repeat;
2324
    color: transparent;
2325
    height: 16px;
2326
    width: 16px;
2327
    float: left;
2328
}
2329

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

    
2335
.editbuttons .save {
2336
    background-image: url("../images/save.png");
2337
    margin-left: 1px;
2338
}
2339

    
2340
.editbuttons img {
2341
    float:none !important;
2342
    margin: 0px !important;
2343
}
2344

    
2345
.network .namecontainer {
2346
    font-size: 1.1em;
2347
}
2348
.network .machine-name-div .namecontainer {
2349
    font-size: 1em;
2350
    font-weight: bold;
2351
}
2352

    
2353

    
2354
.namecontainer .name {
2355
    position: relative;
2356
}
2357

    
2358
.namecontainer .name .nametextbox, .network-rename-input {
2359
    z-index: 1000;
2360
}
2361

    
2362
.icon .nametextbox {
2363
    width: 255px;
2364
}
2365

    
2366
.nametextbox, .network-rename-input {
2367
    position: relative;
2368
    top: -3px;
2369
    font-size: 65%;
2370
    width: 240px;
2371
    border: 1px solid #aaaaaa;
2372
    padding: 2px;
2373
}
2374

    
2375
.large-spinner {
2376
    background: url("../images/icons/indicators/large/progress.gif");
2377
    margin-left: 298px;
2378
    margin-top: 0px;
2379
    height: 31px;
2380
    width: 49px;
2381
    position: absolute;
2382
    top: 200px;
2383
}
2384

    
2385
#machinesview-icon .large-spinner {
2386
    top: 170px;
2387
}
2388

    
2389
.list .large-spinner {
2390
    margin-top:-30px;
2391
}
2392

    
2393
.single .large-spinner {
2394
    margin-top: 50px;
2395
}
2396

    
2397
div#networks-container {
2398
    display: none;
2399
}
2400

    
2401
div#networks-container .large-spinner {
2402
    margin-top: 50px;
2403
}
2404

    
2405
/* tables in list view */
2406
div.list div.dataTables_filter {
2407
    font-size: 75%;
2408
    margin-bottom: 12px;
2409
}
2410

    
2411
div.list div.dataTables_filter input{
2412
    font-size: 100%;
2413
}
2414

    
2415
.dataTables_wrapper {
2416
    width: 515px;
2417
    padding-bottom: 40px;
2418
}
2419

    
2420
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2421
    padding-right: 15px !important;
2422
}
2423

    
2424
div.list table {
2425
    width: 515px;
2426
    font-size: 75%;
2427
}
2428

    
2429
div.list table tbody td {
2430
    color: #3D3D3D;
2431
    padding:6px;
2432
    vertical-align: middle;
2433
    height: 20px;
2434
}
2435

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

    
2453
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2454
    background-color: #5CA1C0;
2455
}
2456

    
2457
div.list table thead .sorting_asc {
2458
    background-image: url("../images/asc.gif");
2459
}
2460

    
2461
div.list table thead .sorting_desc {
2462
    background-image: url("../images/desc.gif");
2463
}
2464

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

    
2476
ul.dropdown-selector {
2477
    background-color: #E6EEEE;
2478
    position: absolute;
2479
    margin-left: 1px;
2480
    display: block;
2481
    top: 255px;
2482
    font-size:75%;
2483
    width:40px;
2484
}
2485

    
2486
ul.dropdown-selector li {
2487
    padding: 4px;
2488
}
2489

    
2490
ul.dropdown-selector li:hover {
2491
    background-color: #5CA1C0;
2492
}
2493

    
2494
ul.dropdown-selector li a{
2495
    color: black;
2496
    text-decoration: none;
2497
}
2498

    
2499
div.list table span.imagetag {
2500
    display: none;
2501
}
2502

    
2503
div.list table thead .vmos {
2504
    width: 20px !important;
2505
    vertical-align:middle;
2506
}
2507

    
2508
div.list table .selection {
2509
    width: 20px !important;
2510
    text-align: left;
2511
    background-image: none;
2512
    padding-left: 6px;
2513
}
2514

    
2515
div.list table thead .vmflavor {
2516
    width: 100px !important;
2517
}
2518

    
2519
/* group column commented out for v0.5
2520
div.list table thead .vmgroup {
2521
    width: 40px !important;
2522
}
2523
*/
2524

    
2525
div.list table thead .vmstatus {
2526
    width: 50px !important;
2527
}
2528

    
2529
div.list table thead .vmname {
2530
    width: 110px !important;
2531
}
2532

    
2533
.spinner, .action-indicator {
2534
    clear: right;
2535
    float:right;
2536
    margin: 10px 6px 0 15px;
2537
}
2538

    
2539
.icon .spinner {
2540
    margin: 20px 4px 0 15px !important;
2541
}
2542

    
2543
.single .state .spinner {
2544
    margin: 20px 55px 0 15px !important;
2545
}
2546

    
2547
.action-indicator {
2548
    margin-right: 18px;
2549
}
2550

    
2551
.list span.action-indicator {
2552
    display: block;
2553
    width: 15px;
2554
    height: 20px;
2555
    margin: 0 !important;
2556
    float: none;
2557
}
2558

    
2559
.wave {
2560
    clear: right;
2561
    float:right !important;
2562
    margin: 10px 15px 0 15px !important;
2563
}
2564

    
2565
.hidden {
2566
    display:none; 
2567
}
2568

    
2569
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2570
    display:block !important;
2571
}
2572

    
2573
.action_error .message, .action_error .code {
2574
    display: none;
2575
}
2576

    
2577
.fixed {
2578
    bottom: 0;
2579
    position: fixed !important;
2580
}
2581

    
2582
/* Networks */
2583
#networkscreate {
2584
}
2585

    
2586
.createbutton {
2587
    color: black;
2588
    background-color: #FF7F2A;
2589
    cursor: pointer;
2590
    padding: 7px 24px;
2591
    text-decoration: none;
2592
    border-left: 15px solid #FF9955;
2593
    margin-left: -15px;
2594
}
2595

    
2596
.create-button a.disabled,
2597
.createbutton.disabled, #networkscreate.disabled {
2598
  background-color: #888 !important;
2599
  border-left-color: #aaa !important;
2600
  cursor: help !important;
2601
  color: #ccc !important;
2602
}
2603

    
2604
#networkscreate:hover {
2605
    background-color: #FF9955;
2606
}
2607

    
2608
#createcontainer {
2609
}
2610

    
2611
#networks-container {
2612
}
2613

    
2614
#networks-pane .public-networks {
2615
    background: #EFF7FA repeat scroll 0 0;
2616
    margin: 0 0 0px;
2617
    padding: 0 0 15px 0px;
2618
}
2619

    
2620
#networks-pane .private-networks .network:last-child {
2621
    border-bottom: none;
2622
}
2623

    
2624
#networks-pane .private-networks {
2625
    background: #EFF7FA repeat scroll 0 0;
2626
    padding: 15px 20px 20px 0px;
2627
    margin-top: 18px;
2628
}
2629

    
2630
.private-networks .network-cont:last-child {
2631
    border-bottom: none;
2632
}
2633

    
2634
.private-networks .network-cont {
2635
    border-bottom: 1px solid #D1E7F0;
2636
    padding-bottom:5px;
2637
    margin-bottom: 5px;
2638
    width: 520px;
2639
}
2640

    
2641
.private-networks .network {
2642
    padding-top: 10px;
2643
    padding-bottom: 10px;
2644
}
2645

    
2646
#public-template, #private-template, #public-machine-template, #private-machine-template {
2647
    display:none;
2648
}
2649

    
2650
div.network-cont.disable-destroy .actions .destroy {
2651
    display: none !important;
2652
}
2653

    
2654
div.network-cont.pending .actions .action-add {
2655
    display: none;
2656
}
2657

    
2658
div.network-cont.in-error .actions .action-add {
2659
    display: none;
2660
}
2661

    
2662
div.network a.action-network-add {
2663
    display: none;
2664
}
2665

    
2666
div.network a.action-network-destroy {
2667
    margin-top: 32px !important;
2668
    width: 50px;
2669
    display: none;
2670
}
2671

    
2672
div.network {
2673
    clear: both;
2674
    padding: 5px 20px 5px 20px;
2675
    width: 480px;
2676
    position: relative;
2677
}
2678

    
2679
#private-template {
2680
    margin: 2px 0 0 -30px;
2681
}
2682

    
2683
div.network-placeholder {
2684
    margin-left: 33px;
2685
}
2686

    
2687
div.private-networks div.network-placeholder {
2688
}
2689

    
2690
div.network-cable {
2691
    border-left: 3px solid #FF7F2A;
2692
    float: left;
2693
    margin-left: -40px;
2694
    margin-top: -45px;
2695
    height: 185px;
2696
    overflow: hidden;
2697
}
2698

    
2699
.first div.network-cable {
2700
    height:143px;
2701
    margin-top:-6px;
2702
    position: relative;
2703
}
2704

    
2705
div.network-contents div.machines-list div.first {
2706
    margin-top:0;
2707
}
2708

    
2709
.last div.network-cable {
2710
    height:85px;
2711
}
2712

    
2713
div.firewall-cable {
2714
    border-left: 3px solid #FF7F2A;
2715
    float: left;
2716
    margin-left: -100px;
2717
    margin-top: -20px;
2718
    height: 110px;
2719
}
2720

    
2721
.last div.firewall-cable {
2722
    display:none;
2723
}
2724

    
2725
div.network a:hover {
2726
    text-decoration: underline;
2727
    cursor: pointer;
2728
}
2729

    
2730
#networks-container .name {
2731
    font-size: 75%;
2732
}
2733

    
2734
div.network-machines, div.firewall {
2735
    margin-left: 70px;
2736
}
2737

    
2738
div.firewall {
2739
    margin-left: 70px;
2740
    margin-bottom: 3px;
2741
    margin-top: -15px;
2742
}
2743

    
2744
div.firewall .firewall-options {
2745
    float: left;
2746
}
2747

    
2748
div.machines-header, div.firewall-header {
2749
    background-color: #A1C8DB;
2750
    color: white;
2751
    cursor: pointer;
2752
    height: 17px;
2753
    width: 103px;
2754
}
2755

    
2756
 div.private-networks div.machines-header {
2757
    margin-top: -5px;
2758
}
2759

    
2760
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2761
    background-color: #84b7d0;
2762
}
2763

    
2764
div.network-machine:hover div.firewall-header {
2765
    background-color: #5CA1C0;
2766
}
2767

    
2768
div.firewall-label.darker {
2769
    background-color: #4085a5;
2770
}
2771

    
2772
.state {
2773
}
2774

    
2775
.network .state {
2776
    font-size: 75%;
2777
    position: absolute;
2778
    right: 10px;
2779
    top: 5px;
2780
}
2781

    
2782
div.network div.actions {
2783
    float: right;
2784
    font-size: 75%;
2785
    font-weight: normal;
2786
    height: 70px;
2787
    width: 100px;
2788
    position: absolute;
2789
    right: -100px;
2790
    top: 0;
2791
}
2792

    
2793
div.network div.machine-actions {
2794
    text-decoration: none;
2795
    float: right;
2796
    margin: -17px -180px 0 0;
2797
    font-weight: normal;
2798
    font-size: 75%;
2799
}
2800

    
2801
div.network div.actions a, div.network div.machine-actions a {
2802
    text-decoration: none;
2803
    height: 15px;
2804
    color: black;
2805
    visibility: hidden;
2806
    display: block;
2807
}
2808

    
2809

    
2810
div.network div.machine-actions a {
2811
    margin: 8px 0 0 8px;
2812
}
2813
div.network div.net-actions a {
2814
    margin: 0 0 8px 8px;
2815
    width: 168px;
2816
}
2817
div.network div.action-container {
2818
    bottom: auto;
2819
}
2820

    
2821
div.network div.net-actions .confirm_single {
2822
    position: absolute;
2823
    left: 96px;
2824
    width: 150px;
2825
    margin: 0 0px -5px 0;
2826
    font-size: 100%;
2827
}
2828

    
2829
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2830
    display: block;
2831
    background-color:#A1C8DB;
2832
    opacity: 0.8;
2833
    filter: alpha(opacity = 80);
2834
}
2835

    
2836
div.network.expand .net-actions a {
2837
    visibility: visible;
2838
}
2839

    
2840
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2841
    visibility: visible;
2842
}
2843

    
2844
div.network div.machine-actions a.action-destroy.selected {
2845
    color: #880000 !important;
2846
}
2847

    
2848
div.network div.actions a.visible,
2849
div.network div.net-vm-actions a.visible,
2850
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected {
2851
    background-color: transparent !important;
2852
    visibility: visible!important;
2853
}
2854

    
2855
div.network .net-vm-actions .confirm_single {
2856
    font-size: 100% !important;
2857
    margin-right: -20px !important;
2858
    position: absolute !important;
2859
    top: 7px;
2860
    right:0;
2861
}
2862

    
2863
div.network .nic-ip {
2864
  font-size: 0.8em;
2865
}
2866

    
2867
div.network div.display a {
2868
    visibility: visible;
2869
}
2870

    
2871
div.network-machine div.machine-actions a.action-details {
2872
    margin-top: 7px;
2873
    width: 168px;
2874
}
2875

    
2876
div.network .net-actions {
2877
    margin-right:5px !important;
2878
    margin-top:0px !important;
2879
    height: 80px !important;
2880
}
2881

    
2882
div.network .net-actions .action-container.destroy {
2883
    position: relative;
2884
    bottom: auto;
2885
}
2886

    
2887
div.network:hover {
2888
    background-color: #A1C8DB !important;
2889
}
2890

    
2891
.network-logos {
2892
    float:left;
2893
    padding-right: 10px;
2894
}
2895

    
2896
.network-logos:hover {
2897
    cursor: pointer;
2898
}
2899

    
2900
.state div {
2901
    text-align: right;
2902
    margin: 4px 1px -4px;
2903
}
2904

    
2905
.public-networks .state div {
2906
    margin-top: 4px;
2907
}
2908

    
2909
.private-networks .state div {
2910
    margin-top: 9px;
2911
    margin-bottom: -12px;
2912
}
2913

    
2914
.network .name-div {
2915
    margin-bottom: 15px;
2916
    margin-top: 0px;
2917
}
2918

    
2919
div.indicator {
2920
    clear: none;
2921
    float: right;
2922
    height: 11px;
2923
    margin: 3px -1px;
2924
    width: 10px;
2925
}
2926

    
2927
#private-networks {
2928
    margin-top: 20px;
2929
}
2930

    
2931
.private-networks .editbuttons {
2932
    margin-right: 117px;
2933
    margin-top: 1px;
2934
}
2935

    
2936
.private-networks div.confirm_single {
2937
    margin: 45px -219px -5px 0;
2938
    font-size: 80%;
2939
}
2940

    
2941
.private-networks .network-machine div.confirm_single {
2942
    margin: 0 -199px 0 0;
2943
}
2944

    
2945
.private-networks .state {
2946
}
2947

    
2948
.private-networks div.machines-list {
2949
    padding-top: 3px;
2950
}
2951

    
2952
span.rename-network, span.configure {
2953
    background-repeat: no-repeat;
2954
    color: transparent;
2955
    font-size: 75%;
2956
    font-weight: normal;
2957
    margin-left: 10px;
2958
    margin-right: 10px;
2959
    padding-left: 10px;
2960
    text-align: left;
2961
}
2962

    
2963
span.rename-network {
2964
    cursor: pointer;
2965
}
2966

    
2967
div.name-div:hover span.rename-network {
2968
    color: #3D3D3D;
2969
    margin-top: 0.4em;
2970
    background-image: url("../images/pencil.png");
2971
    background-position: 0 3px;
2972
}
2973

    
2974
div.network:hover a.rename {
2975
    color: #3d3d3d;
2976
}
2977

    
2978
.network-separator {
2979
    background-color: #5CA1C0;
2980
    height: 1px;
2981
    margin: 2px 0 0 -5px;
2982
    width: 480px;
2983
    font-size: 1%;
2984
    line-height: 1px;
2985
}
2986

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

    
2998
.network-machine {
2999
    border-bottom: 1px solid #5CA1C0;
3000
}
3001
.network-machine:last-child {
3002
    border-bottom: none;
3003
}
3004

    
3005
.network-machine .state div {
3006
    text-align: left;
3007
}
3008

    
3009
.network-machine {
3010
    margin-left: 35px;
3011
    padding-bottom: 10px;
3012
    padding-left: 5px;
3013
    padding-top: 10px;
3014
    position: relative;
3015
}
3016

    
3017
.network-machine .ips {
3018
    position: absolute;
3019
    right:0;
3020
    top:40px;
3021
    text-align: right;
3022
    padding-right: 10px;
3023
    font-size: 70%;
3024
}
3025

    
3026
.network-machine .logo {
3027
    float:left;
3028
    padding-right: 10px;
3029
    position:relative;
3030
}
3031

    
3032
#networks-container .machine-name {
3033
    text-decoration: none !important;
3034
    margin-bottom: 10px;
3035
    color: #000000;
3036
    margin-top: -4px;
3037
}
3038

    
3039
.private-networks .separator {
3040
    background-color: #5CA1C0;
3041
    height: 1px;
3042
    margin: 3px 0 -2px -10px;
3043
    width: 485px;
3044
}
3045

    
3046
.network-machine .state {
3047
    margin-right: 18px;
3048
}
3049

    
3050
.network-machine .state .status {
3051
    margin-bottom: 4px;
3052
}
3053

    
3054
.machine-name .name {
3055
}
3056

    
3057
.machine-name .namecontainer {
3058
    line-height: 18px;
3059
    margin-bottom: 20px;
3060
}
3061

    
3062
div.network-machine:hover {
3063
    background-color: #84B7D0;
3064
}
3065

    
3066
.machines {
3067
    width: 416px;
3068
    margin-bottom: -8px;
3069
    margin-top: 10px;
3070
}
3071

    
3072
div.empty-network-slot {
3073
    height: 60px;
3074
}
3075

    
3076
div.network-remove-machine, div.network-add-machine {
3077
    background-color: #FB822F;
3078
    color: #bc4b00;
3079
    width:90px;
3080
    height:18px;
3081
    float:left;
3082
    margin:40px 0 0 -100px;
3083
}
3084

    
3085
span.remove-icon {
3086
    font-size: 80%;
3087
    margin-left: 15px;
3088
    position: relative;
3089
    bottom:1px;
3090
}
3091

    
3092
div.add-icon {
3093
    margin-left: 15px;
3094
    margin-top: -1px;
3095
    cursor: pointer;
3096
}
3097

    
3098
span.remove-icon:hover, span.add-icon:hover {
3099
    cursor:pointer;
3100
    color: #fff;
3101
}
3102

    
3103
div.network-add-machine {
3104
    margin:43px 0 0 0px;
3105
}
3106

    
3107
.firewall-on {
3108
    color: #42E342;
3109
}
3110

    
3111
.firewall-off {
3112
    color: #F82E2E;
3113
}
3114

    
3115
.firewall .progress-indicator {
3116
  position: absolute;
3117
  right: 10px;
3118
  top: 11px;
3119
}
3120

    
3121
.firewall-content {
3122
    color: black;
3123
    font-size: 0.8em;
3124
    height: 55px;
3125
    padding-top: 10px;
3126
}
3127

    
3128
.firewall-content input {
3129
  cursor: pointer;
3130
}
3131

    
3132
.firewall-content .checkbox-legends {
3133
    cursor: pointer;
3134
}
3135

    
3136
.firewall-content .checkbox-legends.current {
3137
    font-weight: bold;
3138
}
3139

    
3140
.firewall-content .checkbox-legends {
3141
    vertical-align: text-top;
3142
}
3143

    
3144
.checkbox-legends a {
3145
    color: black;
3146
    text-decoration: underline;
3147
    font-size: 100%;
3148
}
3149

    
3150
h5.machine-connect {
3151
    font-size: 75%;
3152
    margin-bottom: 3px;
3153
    height: 23px;
3154
}
3155

    
3156
.machine-connect span {
3157
    text-decoration: underline;
3158
}
3159

    
3160
h5.machine-connect span:hover {
3161
    cursor: pointer;
3162
}
3163

    
3164
.firewall-apply {
3165
    position: absolute;
3166
    background-color: #4085a5;
3167
    border: none;
3168
    font-size: 105%;
3169
    height: 18px;
3170
    width: 75px;
3171
    bottom: 13px;
3172
    right: 10px;
3173
}
3174

    
3175
.firewall-apply:hover {
3176
    background-color:#5CA1C0;
3177
}
3178

    
3179
.name-div {
3180
    margin: -9px 0 30px 70px;
3181
}
3182

    
3183
.machine-name-div {
3184
    margin-bottom: 20px;
3185
    margin-left: 60px;
3186
}
3187

    
3188
div.reboot-dialog {
3189
    display: none;
3190
    color: black;
3191
    background-color: #4085A5;
3192
    font-size: 75%;
3193
    margin-top: 15px;
3194
    width: 698px;
3195
    z-index: 1;
3196
}
3197

    
3198
div#reboot-machine-template, div.reboot-machine-entry {
3199
    display: none;
3200
    padding: 0 0 10px 35px;
3201
    width: 300px;
3202
}
3203

    
3204
div.reboot-dialog p {
3205
    color: #FFFFFF;
3206
    padding: 10px 0 10px 10px;
3207
}
3208

    
3209
div.reboot-dialog button {
3210
    float:right;
3211
    border: 1px solid #FF7F2A;
3212
    background-color: transparent;
3213
    font-size:100%;
3214
}
3215

    
3216
div.reboot-dialog button:hover {
3217
    background-color: #FF7F2A;
3218
}
3219

    
3220
div.reboot-dialog button.reboot-all {
3221
    margin: -30px 35px 0 0;
3222
}
3223

    
3224
div.reboot-dialog button.reboot-single {
3225
    color: black;
3226
    margin-top: -20px;
3227
}
3228

    
3229
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
3230
    display:none;
3231
}
3232

    
3233
div.reboot-dialog button.details {
3234
    border-color: #800000;
3235
    margin-top: -20px;
3236
}
3237

    
3238
div.reboot-dialog button.details:hover {
3239
    background-color: #800000;
3240
}
3241

    
3242
/* Metadata */
3243
.machine .info-content {
3244
    display: none;
3245
}
3246

    
3247
.machine .info-content.ips .collection {
3248
  padding: 0;
3249
}
3250

    
3251
.machine .info-content.ips .ips .model-item .subnet {
3252
  padding-top: 2px;
3253
  width: 35%;
3254
  float: left;
3255
}
3256

    
3257
.machine .info-content.ips .ips .port-ip-item:last-child {
3258
  margin-bottom: 0;
3259
}
3260

    
3261
.machine .info-content.ips.ips .port-item:hover {
3262
  background-color: #75A7BF;
3263
}
3264

    
3265
.machine .info-content.ips .ips .port-ip-item {
3266
  padding: 6px;
3267
  margin-bottom: 2px;
3268
}
3269

    
3270
.machine .info-content.ips .ips .model-item .ip {
3271
  padding-top: 4px;
3272
  width: 55%;
3273
  float: left;
3274
}
3275

    
3276
.single .machine .info-content.ips .ips .model-item .ip {
3277
  padding-top: 5px;
3278
}
3279

    
3280
.machine .info-content.ips .ips .model-item .type {
3281
  float: left;
3282
  margin-right: 10px;
3283
  margin-top: 1px;
3284
  vertical-align: middle;
3285
  color: #fff;
3286
  background-color: #4085A5;
3287
  padding: 3px;
3288
}
3289

    
3290
.single .machine .info-content.ips .ips .model-item .ip {
3291
  width: 85%;
3292
}
3293

    
3294
.single .machine .info-content.ips .ips .model-item .cidr {
3295
  padding-left: 27px;
3296
}
3297

    
3298
.single .machine .info-content.ips .ips .model-item .type {
3299
  font-size: 0.9em;
3300
  padding: 1px 4px;
3301
  margin-top: 4px;
3302
}
3303

    
3304
.machine .info-content.ips .port {
3305
  width: 77%;
3306
  float: left;
3307
  margin-top: 9px;
3308
}
3309

    
3310
.machine .info-content.ips .ips {
3311
  width: 50%;
3312
  float: left;
3313
}
3314

    
3315
.machine .info-content.ips .port-item:last-child {
3316
  border-bottom: none;
3317
  padding-bottom: 0;
3318
  margin-bottom: 0;
3319
}
3320

    
3321
.machine .info-content.ips .port-item {
3322
  border-bottom: 1px solid #75A9C1;
3323
}
3324

    
3325
.machine .info-content.ips .port-item img.in-progress {
3326
  margin: 4px 2px;
3327
  margin-right: 20px;
3328
}
3329

    
3330
.machine .info-content.ips .port-item img {
3331
  float: left;
3332
  position: relative;
3333
  left: 4px;
3334
  margin-top: 10px;
3335
  margin-right: 10px;
3336
}
3337

    
3338
.single .machine .info-content.ips .port-item img {
3339
  margin-top: 13px;
3340
}
3341

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

    
3347
.single .machine .info-content.ips .port-item .network-header {
3348
  width: 100%;
3349
  float: none;
3350
}
3351

    
3352
.single .machine .info-content.ips .ips {
3353
  width: 100%;
3354
}
3355

    
3356
.single .machine .info-content.ips .ips,
3357
.single .machine .info-content.ips .port-item .network-header {
3358
  float: none;
3359
}
3360

    
3361
.single .machine .info-content.ips .port-item .network-header {
3362
  padding: 5px;
3363
  margin-top: -10px;
3364
}
3365
  
3366

    
3367
.machine .info-content.ips .port-item .port {
3368
}
3369

    
3370
.single .machine .info-content.ips {
3371
  font-size: 0.8em;
3372
  color: #222;
3373
}
3374

    
3375
.machine .info-content.ips {
3376
    background-color: #84B7D0;
3377
    padding: 0px 0px;
3378
    font-size: 0.6em;
3379
}
3380

    
3381
.metadata-container {
3382
    line-height: 12px;
3383
    height: 85px;
3384
    background-color: #84b7d0;
3385
}
3386

    
3387
.metadata-column {
3388
    border-right: 1px solid #5CA1C0;
3389
    color: black;
3390
    float: left;
3391
    font-size: 60%;
3392
    margin-top: 3px;
3393
    height: 70px;
3394
    padding-bottom: 5px;
3395
}
3396

    
3397
.vm-stats {
3398
    padding-left: 10px;
3399
    padding-right: 5px;
3400
    width: 220px;
3401
}
3402

    
3403
.vm-stats div.stat-content {
3404
    height: 18px;
3405
}
3406

    
3407
.vm-stats div.stat-content img {
3408
    margin: 0;
3409
}
3410

    
3411
.vm-stats div img.stat-busy {
3412
    margin-top: -7px;
3413
    margin-left: 90px;
3414
}
3415

    
3416
.vm-stats div.stat-content img.busy {
3417
    margin-left: 95px;
3418
}
3419

    
3420
.vm-stats div.stat-error {
3421
    display:none;
3422
}
3423

    
3424
div.stat-error {
3425
    color: #f00;
3426
}
3427

    
3428
.single div.stat-error {
3429
    text-align: center;
3430
    font-size: 0.8em;
3431
}
3432

    
3433
.metadata-column {
3434
    margin-top: 4px;
3435
}
3436

    
3437
.vm-details {
3438
    width: 130px;
3439
    margin-left:17px;
3440
}
3441

    
3442
.vm-details.metadata-column {
3443
    padding-top: 5px;
3444
    height: 65px;
3445
}
3446

    
3447
.vm-details .image-details {
3448
    margin-top: 8px;
3449
}
3450

    
3451
.vm-details .vm-detail {
3452
    display: block;
3453
}
3454

    
3455
.vm-details span.value {
3456
    color: #444;
3457
}
3458

    
3459
.single-container .lower .stat-busy {
3460
    margin-top: 10px;
3461
    margin-left: 325px;
3462
}
3463

    
3464
.vm-metadata {
3465
    padding-left: 10px;
3466
    width: 100px;
3467
    border: none;
3468
}
3469

    
3470
.metadata-left {
3471
}
3472

    
3473
.metadata-right {
3474
    width: 73px;
3475
    float:left;
3476
    height: 35px;
3477
    padding-left: 5px;
3478
    position:relative;
3479
    overflow:hidden;
3480
}
3481

    
3482
.metadata-right .items {
3483
    position:absolute;
3484
    height:20000em;
3485
}
3486

    
3487
.metadata-keys-container {
3488
    height: 60px;
3489
    float: left;
3490
}
3491

    
3492
.single .metadata-keys-container {
3493
    float: none;
3494
    height: auto;
3495
    margin-bottom: 5px;
3496
}
3497

    
3498
.single a.manage-metadata {
3499
    font-size: 80%;
3500
    margin-left:4px;
3501
    color: #383838;
3502
}
3503

    
3504
a.manage-metadata, a.stats-report {
3505
    font-size: 100%;
3506
    color: black;
3507
    margin-left:17px;
3508
    text-decoration: underline;
3509
}
3510

    
3511
a.stats-report {
3512
    margin: 15px 0  0 80px;
3513
}
3514

    
3515
div.machine a.manage-metadata:hover {
3516
    background-color: transparent;
3517
}
3518

    
3519
.single .metadata-actions, .single .metadata-keys-container .items {
3520
    padding-left: 5px;
3521
}
3522
.metadata-actions, .metadata-keys-container .items{
3523
    margin-top: 5px;
3524
}
3525

    
3526
.singe .metadata-actions, .single .metadata-keys-container .items{
3527
    font-size: 80%;
3528
    line-height: 12px;
3529
    width: 300px;
3530
}
3531

    
3532
.metadata-actions .prev,  .metadata-actions .next{
3533
    float:left;
3534
    width:29px;
3535
    height:6px;
3536
    cursor: pointer;
3537
}
3538

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

    
3543
.metadata-actions .next {
3544
    background: url("../images/roll-down.png") no-repeat scroll 0 0 transparent;
3545
}
3546

    
3547
.scrollable {
3548
    position:relative;
3549
    overflow:hidden;
3550
    height: 35px;
3551
    width: 120px;
3552
    margin-bottom:2px;
3553
}
3554

    
3555
.scrollable .items {
3556
    position:absolute;
3557
    height:20000em;
3558
}
3559

    
3560
/* single view */
3561
.single {
3562
    color: #383838;
3563
}
3564

    
3565
.single .column1 {
3566
    float: left;
3567
    margin: 1px 0 25px 17px;
3568
    width: 140px;
3569
}
3570

    
3571
.single .column1 .state {
3572
    float: left;
3573
    margin-left: 4px;
3574
    padding-bottom: 6px;
3575
    padding-top: 3px;
3576
    position: relative;
3577
    right: 0;
3578
    text-align: center;
3579
    width: 126px;
3580
}
3581

    
3582
.single .column1 .state-label {
3583
    padding-top: 5px;
3584
}
3585

    
3586
.single .column1 .indicators {
3587
    margin-right: 38px !important;
3588
}
3589

    
3590
.single div.connect-arrow {
3591
    margin-left: -17px;
3592
}
3593

    
3594
.single div.connect-border {
3595
    margin-left: -29px;
3596
}
3597

    
3598
.single .single-actions {
3599
    width: 150px;
3600
    height: 77px;
3601
    margin-bottom: 45px;
3602
    margin-left: -10px;
3603
}
3604

    
3605
.single .vm-actions .action-container {
3606
    margin-bottom: 1px;
3607
}
3608

    
3609
.single .vm-actions .action-container .confirm_single {
3610
    right: -45px;
3611
}
3612

    
3613
.single .vm-actions .action-container.destroy .confirm_single {
3614
}
3615

    
3616
.single .vm-actions .action-container.destroy {
3617
    bottom: -20px;
3618
}
3619

    
3620
.single a.single-action {
3621
    text-decoration: none;
3622
    cursor: pointer;
3623
    display: block;
3624
}
3625

    
3626
.single a.single-action:hover {
3627
    background-color:#A1C8DB;
3628
    width: 162px;
3629
    opacity: 0.8;
3630
    filter: alpha(opacity = 80);
3631
}
3632

    
3633
.single .destroy a.single-action.selected {
3634
    color: #880000 !important;
3635
}
3636

    
3637
.single a.single-action.selected {
3638
    color: #FF7F2A !important;
3639
    width: 50px !important;
3640
}
3641

    
3642
.single a.single-action.selected:hover {
3643
    background-color:transparent;
3644
}
3645

    
3646
.single .spinner, .single .action-indicator {
3647
    margin: 15px 45px 0 0px !important
3648
}
3649

    
3650
.single .action-indicator {
3651
    margin-right: 55px !important;
3652
}
3653

    
3654
.single .wave {
3655
    margin: 15px 53px 0 0px !important
3656
}
3657

    
3658
.icon div.action_error {
3659
    font-size: 100%;
3660
}
3661

    
3662
.single div.action_error {
3663
    position: absolute;
3664
    top: 29px;
3665
    right: 35px;
3666
}
3667

    
3668
.single .column2 {
3669
    background-color: #A1C8DB;
3670
    float: left;
3671
    font-size: 78%;
3672
    line-height: 17px;
3673
    margin: 0 0 10px 5px;
3674
    width: 358px;
3675
}
3676

    
3677
.single .column2 .machine-labels {
3678
    float: left;
3679
    font-size: 90%;
3680
    margin-left: 10px;
3681
    margin-top: 10px;
3682
    width: 125px;
3683
}
3684

    
3685
.single .machine-detail.title {
3686
    background-color: #74AEC9;
3687
    color: #fff;
3688
    padding: 4px 10px;
3689
    font-size: 0.8em;
3690
    width: 338px;
3691
    margin-left: 5px;
3692
    float: left;
3693
}
3694

    
3695
.single .column2 .machine-details {
3696
    float: right;
3697
    text-align: right;
3698
    font-size: 90%;
3699
    width: 210px;
3700
    margin-right: 10px;
3701
    margin-top: 10px;
3702
}
3703

    
3704
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3705
    margin-bottom: 13px;
3706
}
3707

    
3708
.single .tags {
3709
    clear: both;
3710
    margin-bottom: 10px;
3711
    margin-left: 10px;
3712
}
3713

    
3714
.single .tags-label {
3715
    float: left;
3716
    padding: 0 5px;
3717
    width: 30px;
3718
}
3719

    
3720
.single .tags-down-arrow {
3721
    background: url("../images/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3722
    float: left;
3723
    height: 16px;
3724
    width: 9px;
3725
}
3726

    
3727
.single .toggler-header .info-header{
3728
    padding-top:0;
3729
    padding-bottom:0;
3730
}
3731

    
3732
.single .toggler-header {
3733
    font-size: 0.62em;
3734
    cursor: pointer;
3735
    float: left;
3736
    margin-bottom:5px;
3737
}
3738

    
3739
.single .toggler-header span.label {
3740
    font-size: 104%;
3741
}
3742

    
3743
.fixed-ips-list .empty-list {
3744
  font-size: 0.9em !important;
3745
}
3746

    
3747
.single .ips-content.toggler-content {
3748
  padding: 0;
3749
}
3750

    
3751
.single .ips-content.toggler-content .action-container {
3752
  display: none !important;
3753
}
3754

    
3755
.single .toggler-content {
3756
    background-color: #84B7D0;
3757
    clear: both;
3758
    height: auto;
3759
    padding-bottom: 5px;
3760
    padding-top: 5px;
3761
    width: 339px;
3762
}
3763

    
3764
.single .column3 {
3765
    background-color: #A1C8DB;
3766
    width: 150px;
3767
    overflow: visible;
3768
    padding-bottom: 10px;
3769
    position: absolute;
3770
    right: 20px;
3771
    top: 130px;
3772
}
3773

    
3774
.single .col3 {
3775
    float: right;
3776
    width: 150px;
3777
    margin-right: 15px;
3778
    margin-bottom: 15px;
3779
}
3780

    
3781
.single .column3 .controls {
3782
    font-size: 80%;
3783
    height: 20px;
3784
    padding-left: 7px;
3785
    padding-right: 7px;
3786
    padding-top: 8px;
3787
    padding-bottom: 5px;
3788
    border-bottom: 1px solid #84B7D0;
3789
}
3790

    
3791
.single .column3 .vm-control:hover {
3792
    background-color: #5CA1C0;
3793
}
3794

    
3795
.single .column3 .previous {
3796
    float:left;
3797
    width: 72px;
3798
}
3799

    
3800
.single .column3 .next {
3801
    float: right;
3802
    text-align: center;
3803
    width: 60px;
3804
}
3805

    
3806
.single .column3 .next-label {
3807
    float: right;
3808
    margin-right: 3px;
3809
    margin-top: -2px;
3810
}
3811

    
3812
.single .column3 .next-arrow {
3813
    float: right;
3814
    height: 18px;
3815
    width: 10px;
3816
    background: url("../images/right-arrow.png") no-repeat scroll 3px 2px transparent;
3817
}
3818

    
3819
.single .column3 .prev-label {
3820
    float: left;
3821
    margin-left: 3px;
3822
    margin-top: -2px;
3823
}
3824

    
3825
.single .column3 .prev-arrow {
3826
    background: url("../images/left-arrow.png") no-repeat scroll 3px 2px transparent;
3827
    float: left;
3828
    height: 18px;
3829
    width: 10px;
3830
}
3831

    
3832
.single .column3 .separator {
3833
    width: 135px;
3834
    height: 1px;
3835
    background-color: #84B7D0;
3836
    margin: 0 0 0 7px;
3837
    clear: both;
3838
}
3839

    
3840
.single .column3 .servers {
3841
    font-size: 80%;
3842
    line-height: 15px;
3843
    padding-top: 10px;
3844
    text-align: right;
3845
    overflow: visible;
3846
    position: relative;
3847
}
3848

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

    
3869
.single .toggler {
3870
    color: #FFFFFF;
3871
    float: right;
3872
    font-size: 140%;
3873
}
3874

    
3875
.single .cpu-usage, .single .network-usage {
3876
    text-align: center;
3877
    padding-top: 15px;
3878
    margin-bottom: 5px;
3879
    font-size: 90%;
3880
    font-weight: bold;
3881
}
3882

    
3883
.single .cpu-graph, .single .network-graph {
3884
    margin-left: 20px;
3885
    margin-bottom:30px;
3886
    width: 660px;
3887
}
3888

    
3889
.single div.lower .stats-select .stats-select-option.selected {
3890
    background-color: #4085A5;
3891
    color: #fff;
3892
}
3893

    
3894
.single div.lower .stats-select .stats-select-option {
3895
    cursor: pointer;
3896
    background-color: #DDF1FB;
3897
    color: #4085A5;
3898
    display: block;
3899
    float: left;
3900
    padding: 7px 10px;
3901
    font-size: 0.7em;
3902
}
3903

    
3904
.single div.lower img.stats {
3905
    margin-left: 82px;
3906
}
3907

    
3908
.single div.lower img.stats {
3909
    display: none;
3910
}
3911

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

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

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

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

    
3937
.single .vm-icon.state2,
3938
.single .single-image-state2 {
3939
    background-position: -126px 0;
3940
}
3941

    
3942
.single .column3 .previous, .single .column3 .next {
3943
    cursor: pointer;
3944
    background-color: #84B7D0;
3945
    color: white;
3946
    font-size: 100%;
3947
    height: 15px;
3948
    padding-top: 2px;
3949
}
3950

    
3951
.single .column3 .disabled {
3952
    opacity: 0.5;
3953
    filter: alpha(opacity = 50);
3954
}
3955

    
3956
.single div.lower {
3957
    clear:both;
3958
    background: #EFF7FA repeat scroll 0 0;
3959
    width: 700px;
3960
    padding-bottom: 15px;
3961
}
3962

    
3963
.single div.upper {
3964
    background: transparent;
3965
    margin-bottom: 10px;
3966
    overflow: visible;
3967
    overflow: hidden;
3968
    width: 700px;
3969
    background: #EFF7FA repeat scroll 0 0;
3970
}
3971

    
3972
/* console css */
3973
.console-header-logo {
3974
    padding-top: 16px;
3975
    margin-left: 30px;
3976
    position: fixed;
3977
}
3978

    
3979
.console-header-logo img {
3980
    max-width:100%;
3981
    max-height:65px;
3982
}
3983

    
3984
#console-header div.help-text {
3985
    font-size: 70%;
3986
    font-weight:bold;
3987
    color:#FFFFFF;
3988
    position: absolute;
3989
    height: 20px;
3990
    top: 79px;
3991
}
3992

    
3993
div.console-container {
3994
    margin: 0 0em;
3995
    height: auto;
3996
}
3997

    
3998
#wrapper.console {
3999
    width: auto;
4000
}
4001

    
4002
.console-info {
4003
    font-size:80%;
4004
    color: white;
4005
    position:absolute;
4006
    margin: 15px 0 0 480px;
4007
}
4008

    
4009
applet {
4010
    width:100%;
4011
    height:100%;
4012
}
4013

    
4014
div.console-footer {
4015
    /* this is for version 0.5*/
4016
    display: none;
4017
}
4018

    
4019
.console-footer #footer-text{
4020
    float:left;
4021
    left: auto;
4022
    margin-left:30px;
4023
}
4024

    
4025
/* add network wizard (see also #wizard for shared classes) */
4026
#networks-wizard .header {
4027
    background-color: #4085A5;
4028
    height: 56px;
4029
}
4030

    
4031
#networks-wizard div.name-input {
4032
    margin: 75px 0 0 55px;
4033
}
4034

    
4035
#networks-wizard input {
4036
    border: 1px solid #CCCCCC;
4037
    color: #445566;
4038
    letter-spacing: 1px;
4039
    width: 170px;
4040
}
4041

    
4042
#networks-wizard span.help {
4043
    font-style: italic;
4044
    font-size: 80%;
4045
    margin-left: 10px;
4046
}
4047

    
4048
#networks-wizard .separator-end {
4049
    background-color: #387693;
4050
    height: 6px;
4051
    width: 479px;
4052
    margin-left: -13px;
4053
    margin-top: 19px;
4054
}
4055

    
4056
.red {
4057
    color: red;
4058
}
4059

    
4060
/* add server to network wizard (see also #metadata-wizard for shared classes) */
4061
#add-machines-wizard span.machine-name {
4062
    margin-left: 4px;
4063
    vertical-align: text-top;
4064
}
4065

    
4066
#add-machines-wizard img.list-logo {
4067
    margin: 2px 1px 1px;
4068
}
4069

    
4070
.css-panes {
4071
    clear: both;
4072
    position: relative;
4073
    z-index: 10;
4074
}
4075

    
4076
.last .firewall-content {
4077
}
4078

    
4079
#pub .last .network-separator {
4080
    display:none;
4081
}
4082

    
4083
.public-networks .empty-network-slot {
4084
    display: none;
4085
}
4086

    
4087
.clearfix {
4088
    display: block;
4089
    width: auto;
4090
    zoom: 1;
4091
}
4092

    
4093
/* float clearing for all browsers except the devil one */
4094
.clearfix:after{
4095
  clear: both;
4096
  content: ".";
4097
  display: block;
4098
  height: 0;
4099
  visibility: hidden;
4100
  font-size: 0;
4101
}
4102

    
4103
* html .clearfix {
4104
    display: inline-block;
4105
}
4106

    
4107
.icon .cont-toggler {
4108
    margin-top: -1px;
4109
}
4110

    
4111
.icon .wave {
4112
    margin-right: 4px !important;
4113
    margin-top: 15px !important;
4114
}
4115

    
4116
.icon .status {
4117
    margin-right: 3px;
4118
}
4119

    
4120
#machinesview .status, .single .state {
4121
    font-size: 75%;
4122
}
4123

    
4124
#machinesview-list div.action-indicator {
4125
    margin:0 !important;
4126
    float: none !important;
4127
}
4128

    
4129
.icon div.action-indicator {
4130
    margin-top: 14px;
4131
    margin-right: 4px;
4132
}
4133

    
4134
div.action-indicator {
4135
    width: 15px;
4136
    height: 20px;
4137
    background-repeat: no-repeat;
4138
    background-position: 0 0;
4139
}
4140

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

    
4173
h3.overlay-inner-title {
4174
    color: #4085A5;
4175
    font-size: 2em;
4176
}
4177

    
4178
#add-name-container {
4179
    margin-bottom: 10px;   
4180
}
4181

    
4182
.remove-field-trigger, .add-field-trigger {
4183
    cursor: pointer;
4184
}
4185

    
4186
.add-field-trigger img {
4187
    vertical-align: middle;
4188
}
4189

    
4190
.machine-now-building {
4191
    padding-right: 15px !important;
4192
    text-align: justify;
4193
}
4194

    
4195
.sub-text {
4196
    padding-top: 15px;
4197
    padding-right: 15px;
4198
    text-align: justify;
4199
    font-style: italic;
4200
    font-size: 0.8em !important;
4201
}
4202

    
4203
#notification-box a {
4204
    color: #4085A5;
4205
}
4206

    
4207
#notification-box .machine-title img {
4208
    vertical-align: middle;
4209
}
4210

    
4211
#notifiaction-box .password-header {
4212
    margin-bottom: 0 !important;
4213
}
4214

    
4215
#notification-box .password-container a {
4216
    color: #fff;
4217
    text-decoration: underline;
4218
}
4219

    
4220
#notification-box .password-container a:hover {
4221
    background-color: #fff;
4222
    color: #4085A5;
4223
}
4224

    
4225
#notification-box .password-container {
4226
    background: #4085A5;
4227
    border: none;
4228
}
4229

    
4230
#notification-box .password-container .password a {
4231
    font-weight: normal !important;
4232
}
4233

    
4234
#notification-box .cmd {
4235
    color: #fff;
4236
    font-family: monospace;
4237
    font-size: 1.6em;
4238
}
4239

    
4240
.machine-container .separator {
4241
    background-color: #B0D1E0;
4242
}
4243

    
4244
#creation-password-overlay div.password-cont {
4245
    margin: 10px auto;
4246
    padding: 10px;
4247
    border: 2px solid #75B54A;
4248
    background-color: #AADE87;
4249
    color: #447821;
4250
    text-align: left;
4251
    padding-left: 5em;
4252
    position: relative;
4253
}
4254

    
4255
#creation-password-overlay {
4256
    position: relative;
4257
}
4258

    
4259
#creation-password-overlay .form-action {
4260
    position: absolute;
4261
    bottom: 15px;
4262
    right: 13px;
4263
    font-size: 0.8em;
4264
}
4265

    
4266
#creation-password-overlay .password-label {
4267
    float: left;
4268
}
4269

    
4270
#creation-password-overlay .password {
4271
    font-size: 1.5em;
4272
    font-weight: bold;
4273
    letter-spacing: 2px;
4274
    font-family: Georgia, Times, serif;
4275
    margin-right: 5em;
4276
    float: right;
4277
    margin-top: -4px;
4278
}
4279

    
4280
.feedback-form .description {
4281
    margin-bottom: 25px;
4282
}
4283

    
4284
.feedback-form label {
4285
    display: block;
4286
    font-weight: bold;
4287
    margin-bottom: 10px;
4288
    font-size: 0.8em;
4289
}
4290

    
4291
.feedback-form .form-actions {
4292
    border-top: none;
4293
}
4294

    
4295
.nospace {
4296
    padding-top: 0 !important;
4297
    padding-bottom: 0 !important;
4298
}
4299

    
4300
.noborder {
4301
    border-top: none !important;
4302
    border-bottom: none !important;
4303
}
4304

    
4305
.overlay .feedback-form .messages.description {
4306
    padding-bottom:0;
4307
    margin-bottom: 0;
4308
}
4309

    
4310
.feedback-form .messages .error-message {
4311
    color: #f00;
4312
}
4313

    
4314
.feedback-form .messages .success-message {
4315
    color: #8AA87F;
4316
}
4317

    
4318
.feedback-form .feedback-message {
4319
    width: 548px;
4320
    height: 200px;
4321
    border: 1px solid #ddd;
4322
    padding: 5px;
4323
}
4324

    
4325
#feedback-form .empty-error-msg {
4326
    display: none;
4327
}
4328

    
4329
#feedback-form .data-text {
4330
    display: none;
4331
}
4332

    
4333
#feedback-form .message {
4334
    display: none;
4335
}
4336

    
4337
#feedback-form label {
4338
    display: block;
4339
    font-size: 0.85em;
4340
    font-weight: bold;
4341
}
4342

    
4343
#feedback-form label.inline {
4344
    display: inline;
4345
    padding-left: 5px;
4346
}
4347

    
4348
#feedback-form p {
4349
    padding: 1em 0;
4350
    color: #444;
4351
    margin-bottom: 10px;
4352
}
4353

    
4354
#feedback-form .description {
4355
    font-style: italic;
4356
    font-size: 0.9em;
4357
    color: #888;
4358
}
4359

    
4360
#feedback-form .feedback-text {
4361
    width: 98%;
4362
    height: 100px;
4363
    margin-top: 10px;
4364
    margin-bottom: 10px;
4365
}
4366

    
4367
#feedback-form .submit-data {
4368
    display: none;
4369
}
4370

    
4371
#feedback-form .submit, #invform .submit {
4372
    background-color: #4085A5;
4373
    color: #fff;
4374
    border: none;
4375
    padding: 5px 16px;
4376
    cursor: pointer;
4377
    font-size: 1em;
4378
    position: relative;
4379
}
4380

    
4381
#feedback .submit {
4382
    float: right;
4383
    right: 10px;
4384
    margin-top: 10px;
4385
}
4386

    
4387

    
4388
#feedback-form .submit:hover, #invform .submit:hover {
4389
    background-color: #549FC3;
4390
}
4391

    
4392
.feedback-intro {
4393
    padding-right: 15px !important;
4394
    text-align: justify;
4395
}
4396

    
4397
.popup-body .message {
4398
    padding: 20px 5px;
4399
    display: none;
4400
}
4401

    
4402
.popup-body .loading {
4403
    color: #fff;
4404
}
4405

    
4406
.popup-body .success {
4407
    color: #1F921A;
4408
}
4409

    
4410
.popup-body .errormsg {
4411
    color: #E32424;
4412
}
4413

    
4414

    
4415
.close-msg-box {
4416
    display: block;
4417
    margin-top: 10px;
4418
    cursor: pointer;
4419
    color: #4085A5;
4420
    text-decoration: underline;
4421
}
4422

    
4423

    
4424
.console .ip-version-label {
4425
    margin: 0 5px;
4426
}
4427

    
4428
.ipv6-text, .ipv4-text {
4429
    font-size: 0.9em;
4430
}
4431

    
4432
.fqdn {
4433
}
4434

    
4435
.column2 .fqdn {
4436
  padding: 3px 10px;
4437
}
4438

    
4439
.tooltip {
4440
    background-color: #C4DDE9;
4441
    color: #000;
4442
    font-size: 0.7em;
4443
    padding: 0.2em 0.5em;
4444
    border: 1px solid #888;
4445
    z-index: 50000;
4446
}
4447

    
4448
/*404 and 500 pages*/
4449

    
4450
.error_page {
4451
    position: relative;
4452
    top: 40px;
4453
    padding-bottom: 140px !important;
4454
}
4455

    
4456
.error_page h1 {
4457
    font-weight: normal;
4458
}
4459

    
4460
.error_page .msg_header {
4461
    margin: 0px;
4462
    font-size: 10em;
4463
    position: absolute;
4464
    left: -5px;
4465
    top: 0px;
4466
    color: #4085A5;
4467
    font-family: arial, verdana;
4468
}
4469

    
4470
.error_page p.error_desc {
4471
    color: #fff;
4472
    font-size: 0.8em;
4473
}
4474

    
4475
.error_page {
4476
    padding-right: 50px !important;
4477
    padding-left: 100px !important;
4478
}
4479

    
4480
.error_page .error_content {
4481
    padding-left: 150px;
4482
    padding-top: 97px;
4483
}
4484

    
4485
.error_page .error_content .links, .info_content .links {
4486
    margin-top: 10px;
4487
    margin-left: 20px;
4488
}
4489

    
4490
.error_page .http_error .code {
4491
    letter-spacing: -10px;
4492
    font-size: 9em;
4493
}
4494

    
4495
.error_page .http_error .msg {
4496
    letter-spacing: -1px;
4497
    font-size: 2em;
4498
}
4499

    
4500
.error_page .http_error {
4501
    position: absolute;
4502
    right: 0px;
4503
    bottom: 0px;
4504
    color: #75B3D0;
4505
    line-height: 1em;
4506
}
4507

    
4508
.error_page .error_content a, .info_content .links a {
4509
    color: #4085A5;
4510
    font-weight: bold;
4511
    margin-right: 10px;
4512
    font-size: 0.9em;
4513
}
4514

    
4515
.error_body #container, .info_body #container {
4516
    background-position: right 200px;
4517
}
4518

    
4519
.info_page h1 {
4520
    color: #4085A5;
4521
    font-size: 2em;
4522
    font-weight: normal;
4523
}
4524

    
4525
.info_page p {
4526
    color: #ffffff;
4527
    margin: 1em 0;
4528
}
4529

    
4530
.info_body p a, .error_body p a{
4531
    color: #4085A5;
4532
    text-decoration: underline;
4533
}
4534

    
4535
.error_404 .http_error .code {
4536
    letter-spacing: -7px;
4537
}
4538

    
4539
.network-progress-indicator {
4540
    position: relative;
4541
    display: none;
4542
}
4543

    
4544
.network-progress-indicator img {
4545
    position: absolute;
4546
    bottom: 44px;
4547
    left: 340px;
4548
}
4549

    
4550

    
4551
.single .progress-message {
4552
    margin-top: 90px;
4553
    font-size: 0.6em;
4554
    padding: 0 10px;
4555
    text-align: center;
4556
}
4557

    
4558
/*metadata keys/values*/
4559
.items .tag-item  {
4560
    display: block;
4561
}
4562

    
4563
.single .items .tag-item .key {
4564
    width: 60px;
4565
}
4566

    
4567
.running .scrollable, .terminated .scrollable {
4568
    height: 42px;
4569
}
4570

    
4571
.items .tag-item .key {
4572
    margin-right: 5px;
4573
    width: 30px;
4574
    display: block;
4575
    float: left;
4576
    color: #000;
4577
}
4578

    
4579
.items .tag-item .value {
4580
    color: #444;
4581
}
4582

    
4583
#machinesview-list {
4584
    display: none;
4585
}
4586

    
4587
#machinesview-single {
4588
    position: relative;
4589
    display: none;
4590
}
4591

    
4592
#machinesview-icon {
4593
    display: none;
4594
}
4595

    
4596
#machinesview-icon, #machinesview-single, #machinesview-list {
4597
    
4598
}
4599

    
4600
tbody.machines .spinner {
4601
    margin-top: 0!important;
4602
    margin: 0 !important;
4603
    float: none !important;
4604
}
4605

    
4606
.slider .slider-point {
4607
    width: 4px;
4608
    height: 3px;
4609
    margin-left: 1px;
4610
    background-color: transparent;
4611
    display: block;
4612
    position: absolute;
4613
    z-index: 10;
4614
    bottom: 0px;
4615
}
4616

    
4617
.slider .slider-point-light {
4618
    background-color: transparent;
4619
}
4620

    
4621
.slider-point-text {
4622
    font-size: 0.6em;
4623
    position: absolute;
4624
    top: 4px;
4625
    border-top: 5px solid #C5DEE9;
4626
    padding: 3px;
4627
    color: #4085A5;
4628
    display: block;
4629
    min-width: 6px;
4630
    text-align: middle;
4631
}
4632

    
4633
.slider .handle {
4634
    z-index: 50;
4635
}
4636

    
4637
.modal p.desc {
4638
    margin: 5px 0;
4639
    margin-left: 37px;
4640
    font-size: 0.8em;
4641
    color: #888;
4642
}
4643

    
4644
.api_overlay_template {
4645
    display: none;
4646
}
4647

    
4648
.api_content .password-container .password {
4649
    color: #fff;
4650
    font-size: 1.1em;
4651
}
4652

    
4653
#disks-pane {
4654
    margin-top: 58px;
4655
}
4656

    
4657
span.resend-msg {
4658
    display: block;
4659
    margin-bottom: 5px;
4660
}
4661

    
4662
.success-msg {
4663
    background-color: #5CAD54;
4664
    color: #fff;
4665
    padding: 0.4em;
4666
    border: 1px solid #ddd;
4667
}
4668

    
4669
.error-msg {
4670
    background-color: #800000;
4671
    color: #fff;
4672
    padding: 0.4em;
4673
    border: 1px solid #ddd;
4674
}
4675

    
4676
.success-msg em, .error-msg em {
4677
    font-weight: bold;
4678
    font-style: normal;
4679
    font-size: 0.9em;
4680
}
4681

    
4682
.pagination {
4683
            font-size: 80%;
4684
        }
4685
        
4686
.pagination a {
4687
    text-decoration: none;
4688
        border: solid 1px #AAE;
4689
        color: #15B;
4690
}
4691

    
4692
.pagination a, .pagination span {
4693
    display: block;
4694
    float: left;
4695
    padding: 0.3em 0.5em;
4696
    margin-right: 5px;
4697
        margin-bottom: 5px;
4698
        min-width:1em;
4699
        text-align:center;
4700
}
4701

    
4702
.pagination .current {
4703
    background: #4085A5;
4704
    color: #fff;
4705
        border: solid 1px #AAE;
4706
}
4707

    
4708
.pagination .current.prev, .pagination .current.next{
4709
        color:#999;
4710
        border-color:#999;
4711
        background:#fff;
4712
}
4713

    
4714
table.list-machines .wave {
4715
    float: none !important;
4716
    margin: 0 !important;
4717
}
4718

    
4719
.overlay {
4720
    display: none;
4721
}
4722

    
4723
.overlay .copy-content .clip-copy  {
4724
    right: 10px;
4725
    top:8px;
4726
    border: 1px solid #fff;
4727
}
4728

    
4729
.overlay .copy-content {
4730
    background-color: #387693;
4731
    color: #fff;
4732
    padding: 10px;
4733
    font-size: 1.2em;
4734
    text-align: center;
4735
    position: relative;
4736
}
4737

    
4738
.overlay {
4739
    background-color: #fff;
4740
    border: 2px solid #444;
4741
    text-align: left;
4742

    
4743
    -moz-box-shadow: 0 0 90px 5px #000;
4744
    -webkit-box-shadow: 0 0 90px 5px #000;
4745
    box-shadow: 0 0 90px 5px #000;
4746
    width: 600px;
4747
}
4748

    
4749
.overlay.overlay-createvm {
4750
    width: 640px;
4751
}
4752

    
4753
.overlay a {
4754
    color: #387693;
4755
}
4756

    
4757
.overlay .diagnostics-list {
4758
    height: 400px;
4759
    overflow: scroll;
4760
    overflow-y: scroll;
4761
    overflow-x: hidden;
4762
}
4763

    
4764
.overlay .overlay-content .description.subinfo, .overlay .extra-info {
4765
    margin-bottom:0;
4766
    border-bottom: none;
4767
    padding-bottom:0;
4768
    margin-top: 10px;
4769
    padding-top:10px;
4770
    border-top: 1px solid #64a6c4;
4771
    /*border-top: 1px solid #DBE6EB;*/
4772
    font-size: 0.8em;
4773
}
4774

    
4775
.overlay .start-warn .important,
4776
.overlay .v6-warn .important {
4777
  display: block;
4778
  margin: 8px 0;
4779
  font-weight: normal;
4780
  font-size: 0.8em;
4781
  color: #800 !important;
4782
  padding: 5px 0;
4783
}
4784

    
4785
.overlay .overlay-content .important {
4786
    color: #800000;
4787
}
4788

    
4789
.overlay .overlay-content .description.noborder {
4790
  margin-bottom:0;
4791
  border:0;
4792
}
4793

    
4794
.overlay .overlay-content .description {
4795
    color: #444;
4796
    border-bottom: 1px solid #64a6c4;
4797
    margin-bottom: 10px;
4798
    padding-bottom: 10px;
4799
    font-size: 0.9em;
4800
    line-height: 1.6em;
4801
}
4802

    
4803
.overlay .overlay-content .empty-message {
4804
    margin-bottom: 10px;
4805
}
4806

    
4807
.overlay h3.overlay-header {
4808
    font-size: 0.9em;
4809
    text-align: left;
4810
    padding: 0.8em;
4811
    padding-left: 1em;
4812
    font-weight: normal;
4813
    border-bottom: 1px solid #ddd;
4814
}
4815

    
4816
.overlay h3.overlay-header .title {
4817
    float: left;
4818
}
4819

    
4820
.overlay .container {
4821
    position: relative;
4822
    padding-top: 1em;
4823
    padding: 0.5em;
4824
    background-image: url("../images/popup-bg.png");
4825
    background-repeat: repeat-x;
4826
}
4827

    
4828
.overlay .content {
4829
    background-color: transparent;
4830
    background-image: url("../images/popup-inner-bg.png");
4831
    padding: 1em;
4832
    font-size: 0.8em;
4833
    background-repeat: repeat-x;
4834
    -moz-box-shadow: 0 0 1px 1px #888;
4835
    -webkit-box-shadow: 0 0 1px 1px #888;
4836
    box-shadow: 0 0 1px 1px #888;
4837
}
4838

    
4839
.overlay .message {
4840
}
4841

    
4842
.overlay .actions {
4843
    position: absolute;
4844
    right: 0.75em;
4845
    top: 0.6em;
4846
}
4847

    
4848
.overlay .actions span {
4849
    font-size: 0.8em;
4850
    color: #fff;
4851
    cursor: pointer;
4852
    margin-left: 10px;
4853
    display: block;
4854
    float: left;
4855
    background-color: #4085A5;
4856
    padding: 0.2em 0.4em;
4857
}
4858

    
4859
.overlay-error .error-more-details {
4860
    margin-top: 5px;
4861
    max-height: 210px;
4862
    overflow: auto;
4863
}
4864

    
4865
.overlay-error .key.details.expand {
4866
    background-image: url("../images/plus-8.png");
4867
}
4868

    
4869
.overlay-error .key.details {
4870
    background-color: #5189A3;
4871
    cursor: pointer;
4872
    background-image: url("../images/minus-8.png");
4873
    background-repeat: no-repeat;
4874
    background-position: 545px;
4875
}
4876

    
4877
.overlay-error .container {
4878
    padding-top: 1.9em;
4879
}
4880

    
4881
.overlay-error .error-details {
4882
    font-size: 0.8em;
4883
    margin-top: 10px;
4884
}
4885

    
4886
.overlay-error .error-details anonymous {
4887
    display: block;
4888
    margin-top: 10px;
4889
}
4890

    
4891
.overlay-error h3.overlay-header {
4892
    background-color: #800000;
4893
    color: #fff;
4894
}
4895

    
4896
.overlay-error.non-critical h3.overlay-header {
4897
    background-color: #987249;
4898
}
4899

    
4900
.overlay-error span.key {
4901
    font-weight: normal;
4902
    display: block;
4903
    margin-top: 0.5em;
4904
    background-color: #74AEC9;
4905
    color: #fff;
4906
    padding: 0.4em;
4907
    font-size: 0.8em;
4908
    font-weight: bold;
4909
}
4910

    
4911
.overlay-error .indicator {
4912
    background-color: #880000;
4913
    color: #fff;
4914
    padding: 4px;
4915
    display: block;
4916
    float: left;
4917
    border: 1px solid #444;
4918
}
4919

    
4920
.overlay-error .nav-btn:hover {
4921
    
4922
}
4923

    
4924
.overlay-error .nav-btn {
4925
    margin-left: 5px;
4926
    color: #fff;
4927
    display: block;
4928
    float: left;
4929
    padding: 4px;
4930
    background-color: #AAA;
4931
    border: 1px solid #444;
4932
}
4933

    
4934
.overlay-error .error-nav {
4935
    position: absolute;
4936
    right: 0px;
4937
    bottom: -25px;
4938
    font-size: 0.8em;
4939
}
4940

    
4941
.overlay-error .message p .api-message {
4942
  color: #444;
4943
  font-size: 0.9em;
4944
}
4945

    
4946
.overlay-error span.value, .overlay-error div.value {
4947
    padding: 0.4em;
4948
    display: block;
4949
    margin-bottom: 0.3em;
4950
}
4951

    
4952
.overlay h3 .closeme {
4953
    float: right;
4954
    font-size: 0.7em;
4955
    margin-top: 0.2em;
4956
    cursor: pointer;
4957
}
4958

    
4959
.overlay .overlay-header .subtitle {
4960
    display: block;
4961
    font-size: 0.8em;
4962
    color: #ddd;
4963
}
4964

    
4965
.overlay .overlay-header .subtitle img {
4966
    vertical-align: middle;
4967
    margin-left: 10px;
4968
    margin-bottom: 2px;
4969
}
4970

    
4971
.overlay-info .msg-log-entry .src {
4972
    color: #4085A5;
4973
    float: right;
4974
    font-size: 0.9em;
4975
}
4976

    
4977
.overlay-info .msg-log-entry .date {
4978
    font-style: italic;
4979
}
4980

    
4981
.overlay-info .msg-log-entry pre {
4982
    color: #333;
4983
    width: 100%;
4984
    display: none;
4985
    margin: 10px 0;
4986
}
4987

    
4988
.msg-log-entry.warning {
4989
    color: #E57F01;
4990
}
4991

    
4992
.overlay-info .msg-log-entry.with-details .src {
4993
    margin-right: 15px;
4994
}
4995

    
4996
.overlay-info .msg-log-entry.with-details {
4997
    cursor: pointer;
4998
}
4999

    
5000
.overlay-info .msg-log-entry.with-details {
5001
    background-image: url("../images/plus-8-dark.png");
5002
    background-repeat: no-repeat;
5003
    background-position: 99% 9px;
5004
}
5005

    
5006
.overlay-info .msg-log-entry.with-details.expanded {
5007
    background-image: url("../images/minus-8-dark.png");
5008
}
5009

    
5010
.overlay-info .msg-log-entry .msg {
5011
    display: inline-block;
5012
    margin-left: 10px;
5013
}
5014

    
5015
.overlay-info .msg-log-entry {
5016
    border-bottom: 1px solid #aaa;
5017
    padding: 5px;
5018
}
5019

    
5020
.overlay-info .description.subinfo {
5021
    border: none !important;
5022
    padding-top: 0 !important;
5023
}
5024

    
5025
.overlay-info .content {
5026
    background-repeat: no-repeat;
5027
    background-position: 110% 110%;
5028
    background-color: rgba(255,255,255,0.6)
5029
}
5030

    
5031
.overlay-info .overlay-header {
5032
    background-color: #4085A5;
5033
}
5034

    
5035
.overlay-info .overlay-header .title {
5036
    color: #fff;
5037
}
5038

    
5039
.overlay-info .overlay-header .closeme {
5040
    color: #fff;
5041
}
5042

    
5043
#loading-view {
5044
    width: 400px;
5045
    margin: 0 auto;
5046
    padding: 20px 0;
5047
    font-size: 0.8em;
5048
}
5049

    
5050
#loading-view .header.off {
5051
    color: #829096;
5052
}
5053

    
5054
#loading-view .header.on {
5055
    color: #fff;
5056
    background-image: url("../images/icons/indicators/small/progress.gif");
5057
}
5058

    
5059
#loading-view .header.done {
5060
    color: #2B6681;
5061
    background-image: url("../images/check.png");
5062
}
5063

    
5064
#loading-view .header {
5065
    font-size: 0.9em;
5066
    text-align: left;
5067
    border-bottom: 1px solid #578BA3;
5068
    margin-bottom: 10px;
5069
    padding-bottom: 6px;
5070
    background-repeat: no-repeat;
5071
    background-position: 380px 0px;
5072
}
5073

    
5074
#loading-view .header span {
5075
    font-weight: bold;
5076
    color: #4085A5;
5077
}
5078

    
5079
#loading-view .info {
5080
    color: #ddd;
5081
}
5082

    
5083
.options-list {
5084
    margin-top: 0.5em;
5085
    font-size: 0.8em;
5086
}
5087

    
5088
.options-list.four li {
5089
    float: left;
5090
    display: block;
5091
    width: 25%;
5092
    margin-bottom: 5px;
5093
}
5094

    
5095
.options-list.five li:nth-child(4n) .options-object-cont {
5096
    margin-right: 0;
5097
}
5098

    
5099
.options-list.five li {
5100
    float: left;
5101
    display: block;
5102
    width: 20%;
5103
    margin-bottom: 5px;
5104
}
5105

    
5106
.options-list.five li:nth-child(5n) .options-object-cont {
5107
    margin-right: 0;
5108
}
5109

    
5110
.options-object-cont input {
5111
    border: 1px solid #aaa;
5112
    width: 92px;
5113
    padding: 0;
5114
    margin: 0;
5115
    margin-top:3px;
5116
    padding: 2px;
5117
}
5118

    
5119
.options-list.three li {
5120
    float: left;
5121
    display: block;
5122
    width: 33%;
5123
    margin-bottom: 5px;
5124
}
5125

    
5126
.meta-list .options-list.three li.options-object.create .options-object-cont {
5127
  background-position: 95% 5px;
5128
}
5129

    
5130
.meta-list .options-list.four li.options-object.create .options-object-cont {
5131
  background-position: 97% 5px;
5132
}
5133

    
5134
.meta-list .options-list li.options-object.create .options-object-cont {
5135
    background-image: url("../images/option-action-add.png");
5136
    background-repeat: no-repeat;
5137
    background-position: 90px 5px;
5138
}
5139

    
5140
.meta-list .options-list li .options-object-cont .option-action,
5141
.meta-list .options-list li.options-object.create {
5142
    cursor: pointer !important;
5143
}
5144

    
5145
.meta-list .options-list li .options-object-cont {
5146
    cursor: inherit;
5147
}
5148

    
5149
.options-list li .options-object-cont {
5150
    padding: 5px;
5151
    margin-right: 4px;
5152
    border: 1px solid #A6D1E6;
5153
    cursor: pointer;
5154
    min-height: 35px;
5155
    position: relative;
5156
}
5157

    
5158
.options-list.three li:nth-child(3n) .options-object-cont {
5159
    margin-right: 0;
5160
}
5161

    
5162
.options-list li.selected .options-object-cont {
5163
    background-color: #efefef;
5164
    border: 2px solid #4085A5;
5165
    padding: 4px;
5166
}
5167

    
5168
.options-list li.selected .options-object-cont .title {
5169
}
5170

    
5171
.options-list li.options-object .title {
5172
    display: block;
5173
    color: #FF7F2A;
5174
    margin-bottom: 2px;
5175
}
5176

    
5177
.options-list li .option-action {
5178
    display: none;
5179
    position: absolute;
5180
    background-repeat: no-repeat;
5181
}
5182

    
5183
.options-list.five li.editing {
5184
    width: 40%;
5185
}
5186

    
5187
.options-list.five li.editing .value {
5188
    display: none;
5189
}
5190

    
5191
.options-list li .remove {
5192
    background-image: url("../images/option-action-remove.png");
5193
    width:10px;
5194
    height:10px;
5195
    right:5px;
5196
    top: 5px;
5197
}
5198

    
5199
.options-list li .edit {
5200
    background-image: url("../images/option-action-edit.png");
5201
    width:10px;
5202
    height:10px;
5203
    right:5px;
5204
    bottom: 8px;
5205
}
5206

    
5207
.options-list li:hover .option-action  {
5208
    display: block;
5209
}
5210

    
5211
.options-list li.options-object .value {
5212
    color: #4085A5;
5213
    margin-top: 5px;
5214
    display: block;
5215
}
5216

    
5217
.options-list li.selected.options-object .value {
5218
}
5219

    
5220
.options-list li .options-object-cont:hover {
5221
    background-color: #fff;
5222
}
5223

    
5224
.options-list li.selected .options-object-cont:hover {
5225
    background-color: #fff;
5226
}
5227

    
5228
.options-list li img {
5229
    float: left;
5230
    margin:2px;
5231
    margin-right: 10px;
5232
    padding-bottom:10px;
5233
}
5234

    
5235
#network-vms-select-content .empty-list {
5236
  font-size: 1.2em;
5237
}
5238

    
5239
#network-vms-select-content li.options-object .value {
5240
    margin-top: 10px;
5241
    margin-left: 30px;
5242
}
5243

    
5244
#network-vms-select-content li.options-object:hover .options-object-cont,
5245
#network-vms-select-content li.options-object .options-object-cont {
5246
    background-image: url("../images/option-action-add-dark.png");
5247
    background-repeat: no-repeat;
5248
    background-position: 160px 28px;
5249
}
5250

    
5251
#network-vms-select-content li.selected:hover .options-object-cont,
5252
#network-vms-select-content li.selected .options-object-cont {
5253
    background-image: url("../images/option-action-remove.png") !important;
5254
}
5255

    
5256
#metadata-overlay-content .view .value {
5257
    margin-top: 10px;
5258
}
5259

    
5260
#metadata-overlay-content {
5261
    position: relative;
5262
}
5263

    
5264
.vm-meta .editor .predefined .predefined-meta-key:hover {
5265
    background-color: #4e8eac;
5266
    color: #fff;
5267
}
5268

    
5269
.vm-meta .editor .predefined .predefined-meta-key {
5270
    float: left;
5271
    margin-right: 5px;
5272
    padding: 4px;
5273
    display: block;
5274
    cursor: pointer;
5275
}
5276

    
5277
.vm-meta .editor .predefined {
5278
    background-color: #A6D1E6;
5279
    font-size: 0.9em;
5280
    border-top: 1px solid #ddd;
5281
}
5282

    
5283
.vm-meta .editor input {
5284
}
5285
.vm-meta .editor {
5286
    margin-bottom: 10px;
5287
}
5288

    
5289
.vm-meta .editor .form-actions .form-action {
5290
    min-width: 50px;
5291
}
5292

    
5293
.vm-meta .editor .form-field input.meta-key {
5294
    width: 90px;
5295
}
5296

    
5297
.vm-meta .form-field {
5298
    float: left;
5299
}
5300

    
5301
.vm-meta .form-actions .form-action {
5302
    float: left;
5303
    margin-right: 10px;
5304
    height: 11px;
5305
}
5306

    
5307
.vm-meta .editor .form-actions .cancel {
5308
    margin-right: 0;
5309
}
5310

    
5311
.vm-meta .editor .form-actions {
5312
    float: right;
5313
    margin:0;
5314
    padding:0;
5315
    margin-left: 15px;
5316
    margin-top: 0px;
5317
}
5318

    
5319
.vm-meta .editor {
5320
    background-color: rgba(64, 133, 165, 0.898) !important;
5321
    background-color: #649DB8;
5322
    font-size:0.9em;
5323
}
5324

    
5325
.vm-meta .meta-key-title {
5326
    font-size: 1.3em;
5327
    color: #fff;
5328
    margin-bottom: 10px;
5329
    display: none;
5330
    float: left;
5331
}
5332

    
5333
.vm-meta .editor-content {
5334
    padding: 10px;
5335
}
5336

    
5337
.vm-meta .inner-mask {
5338
    background-color: #fff;
5339
    opacity:0.6;
5340
    position: absolute;
5341
    top:0;
5342
    left:0;
5343
}
5344

    
5345
.vm-meta .editor label {
5346
    float: left;
5347
    color: #fff;
5348
    margin-right: 2px;
5349
    padding-top:4px;
5350
    font-size: 0.9em;
5351
}
5352

    
5353
.vm-meta .editor input {
5354
    border: none;
5355
    width: 170px;
5356
    margin-left: 10px;
5357
    font-size: 0.9em;
5358
    padding: 4px;
5359
}
5360

    
5361
.vm-meta li.create .options-object-cont {
5362
    background-color: #B3C9AD ;
5363
    border-color: #788774;
5364
}
5365
.vm-meta li.create .options-object-cont .value,
5366
.vm-meta li.create .options-object-cont .title {
5367
    color: #fff;
5368
}
5369

    
5370
#createvm-overlay-content {
5371
    padding: 0;
5372
}
5373

    
5374
.overlay-createvm .container {
5375
    width: 624px !important;
5376
}
5377

    
5378
.create-vm .vm-network .list-cont.personalize-cont:last-child .confirm-params {
5379
  margin-right: 0!important;
5380
}
5381

    
5382
.create-vm .vm-network .list-cont.personalize-cont:last-child {
5383
  border-right: none;
5384
  margin-right: 0;
5385
  width: 298px;
5386
}
5387

    
5388
.create-vm .vm-network .list-cont.personalize-cont .confirm-params {
5389
  max-height: 240px;
5390
}
5391

    
5392
.create-vm .vm-network .list-cont.personalize-cont {
5393
  height: 330px;
5394
}
5395

    
5396
.create-vm .vm-network .list-cont.personalize-cont {
5397
    width: 47%;
5398
}
5399

    
5400
.create-vm .header-step.current {
5401
    font-weight: bold;
5402
}
5403

    
5404
.create-vm .create-step-cont {
5405
    min-height: 240px;
5406
}
5407
.create-vm .create-controls {
5408
    padding: 10px;
5409
}
5410

    
5411
.create-vm ul li {
5412
    cursor: pointer;
5413
    padding: 4px;
5414
}
5415

    
5416
.create-vm ul li.selected {
5417
    background-color: #aaa;
5418
}
5419

    
5420
.cont-toggler-wrapper {
5421
  float: left;
5422
  margin-right: 5px;
5423
}
5424

    
5425
.cont-toggler-wrapper.disabled .cont-toggler,
5426
.cont-toggler.disabled {
5427
  background-color: #C1CED4;
5428
  background-image: url("../images/down-arrow-lighter.png");
5429
  border-right-color: #C1CED4;
5430
}
5431

    
5432
.cont-toggler-wrapper.disabled .cont-toggler .label,
5433
.cont-toggler.disabled .label {
5434
  color: #eee;
5435
  background-color: #B4C1C7;
5436
}
5437

    
5438
.cont-toggler {
5439
    background-image: url("../images/down-arrow.png");
5440
    background-position: right;
5441
    background-repeat: no-repeat;
5442
    background-color: #A1C8DB;
5443
    display: inline-block;
5444
    border-right: 6px solid #A1C8DB;
5445
    padding:2px;
5446
    padding-right: 14px;
5447
    padding-left:0;
5448
    cursor: pointer;
5449
    color: #fff;
5450
    font-size: 0.9em;
5451
    float: left;
5452
    margin-right: 5px;
5453
}
5454

    
5455
.cont-toggler .label {
5456
    background-color: #98BDCF;
5457
    padding: 2px;
5458
    padding-left: 5px;
5459
    padding-right: 5px;
5460
}
5461

    
5462
.cont-toggler.open {
5463
    background-color: #98BDCF;
5464
    border-color: #98BDCF;
5465
    background-image: url("../images/up-arrow.png");
5466
}
5467

    
5468
.cont-toggler.open .label {
5469
    background-color: #4085A5;
5470
}
5471

    
5472
.overlay .form label {
5473
    font-color: #444;
5474
    margin-right: 10px;
5475
}
5476

    
5477
.form-field.error label {
5478
    color: #ff0000;
5479
    text-decoration: underline;
5480
}
5481

    
5482
.form-field input {
5483
    border: 1px solid #aaa;
5484
    width: 200px;
5485
    padding: 3px;
5486
}
5487

    
5488
.form-actions {
5489
    margin-top: 5px;
5490
    padding-top:5px;
5491
    border-top: 1px solid #64a6c4;
5492
    font-size: 0.8em;
5493
}
5494

    
5495
.form-actions.plain {
5496
    margin-top: 0px;
5497
    padding-top:0px;
5498
    border-top: 0px;
5499
}
5500

    
5501
.form-action {
5502
    float: right;
5503
    min-width: 140px;
5504
    background-color: #FF7F2A;
5505
    border: 1px solid #FF7F2A;
5506
    text-align: center;
5507
    color: #FFFFFF;
5508
    cursor: pointer;
5509
    padding: 4px;
5510
}
5511

    
5512
.form-action:hover {
5513
    background-color: #FF9955;
5514
    color: #FFF;
5515
}
5516

    
5517
.form-action.prev,
5518
.form-action.cancel {
5519
    background-color: #800;
5520
    border: 1px solid #800;
5521
    float: left;
5522
}
5523

    
5524
.form-action.prev:hover,
5525
.form-action.cancel:hover {
5526
    background-color: #CC0000;
5527
    color: #fff;
5528
}
5529

    
5530
.form-action.next,
5531
.form-action.ok {
5532
    background-color: #080;
5533
    border: 1px solid #080;
5534
}
5535

    
5536
.form-action.next:hover,
5537
.form-action.ok:hover {
5538
    background-color: #00aa00;
5539
    color: #fff;
5540
}
5541

    
5542
.form-action .create,
5543
.form-action .submit {
5544

    
5545
}
5546

    
5547
.create-button a.in-progress {
5548
  text-indent: -1000px;
5549
}
5550

    
5551
.create-button a.in-progress,
5552
.form-action.in-progress, button.in-progress {
5553
    background-image: url("../images/icons/indicators/medium/horizontal-progress.gif");
5554
    background-repeat: no-repeat;
5555
    background-position: center center;
5556
    color: transparent;
5557
}
5558

    
5559
#createvm-overlay-content {
5560
    padding: 0;
5561
}
5562

    
5563
.create-vm .image-details.selected .size {
5564

    
5565
}
5566

    
5567
.create-vm .image-details .show-details:hover {
5568
    color: #aaa !important; 
5569
}
5570
.create-vm .image-details.selected .show-details:hover {
5571
    color: #fff !important; 
5572
}
5573

    
5574
.create-vm .image-details.selected .show-details,
5575
.create-vm .image-details.selected .size {
5576
    color: #eee;
5577
}
5578

    
5579
.create-vm .image-details.selected span.owner {
5580
    color: #fff;
5581
}
5582

    
5583

    
5584
.create-vm .image-details p {
5585
    font-size: 0.8em;
5586
    padding-left: 27px;
5587
    display:block;
5588
}
5589

    
5590
.create-vm .image-details span.owner {
5591
    display: block;
5592
    font-size: 0.9em;
5593
    float: right;
5594
    color: #FF7F2A;
5595
    position: absolute;
5596
    top: 5px;
5597
    right: 5px;
5598
}
5599

    
5600
.create-vm .select-image .show-details {
5601
    display: none;
5602
    font-size: 0.8em;
5603
    text-decoration: underline;
5604
    color: #000;
5605
    position: absolute;
5606
    bottom: 5px;
5607
    right: 5px;
5608
}
5609

    
5610
.create-vm .image-details .size {
5611
    margin-top: 2px;
5612
    font-size: 0.8em;
5613
    color: #aaa;
5614
    margin-left: 10px;
5615
}
5616

    
5617
.create-vm .step-cont {
5618
    margin: 15px;
5619
}
5620

    
5621
.create-vm .create-step-cont {
5622
    min-height: 250px;
5623
    float: left;
5624
    width: 624px;
5625
}
5626

    
5627
.create-vm .create-controls {
5628
    padding: 10px;
5629
    border-top: 1px solid #ddd;
5630
}
5631

    
5632
.create-vm .empty {
5633
    font-size: 0.8em;
5634
    color: #444;
5635
}
5636

    
5637
.create-vm h4 {
5638
    color: #5CA1C0;
5639
    margin-bottom: 0.5em;
5640
    font-family: arial;
5641
}
5642
.create-vm ul li {
5643
    cursor: pointer;
5644
    padding: 4px;
5645
    font-size: 0.9em;
5646
}
5647

    
5648
.create-vm .create-step-cont li.ssh-key-option.selected,
5649
.create-vm .create-step-cont li.list-item-option.selected,
5650
.create-vm ul li.selected {
5651
    background-color: #FF7F2A;
5652
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5653
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5654
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5655
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5656
    color: #fff;
5657
}
5658

    
5659
.create-vm .images-list-cont.loading .loading-indicator {
5660
    display: block !important;
5661
}
5662

    
5663
.create-vm .images-list-cont .loading-indicator {
5664
    display: none;
5665
    position: absolute;
5666
    right: -13px;
5667
    top: 2px;
5668
    width: 30px;
5669
    height: 10px;
5670
    background-repeat: no-repeat;
5671
    background-image: url("../images/icons/indicators/medium/progress.gif");
5672
}
5673

    
5674
.create-vm .images-list-cont h4 {
5675
    position: relative;
5676
}
5677

    
5678
.create-vm .images-list-cont {
5679
    width: 40%;
5680
    float: left;
5681
    padding-left: 3%;
5682
    padding-right: 3%;
5683
}
5684

    
5685
.create-vm li p.desc {
5686
    font-size: 0.9em;
5687
}
5688

    
5689
.create-vm p.desc.warning {
5690
    color: #880000;
5691
}
5692

    
5693
.create-vm p.desc.empty {
5694
    color: #000;
5695
}
5696

    
5697
.create-vm p.desc {
5698
    font-size: 0.8em;
5699
    color: #888;
5700
    margin-bottom: 10px;
5701
}
5702

    
5703
.create-vm li.role .values .val:hover {
5704
    background-color: #eee;
5705
}
5706
.create-vm li.role .values .val.selected,  .create-vm li.role .values .val.selected:hover {
5707
    color: #fff;
5708
    background-color: #FF9955;
5709
}
5710

    
5711
.create-vm .images-filter-cont, .create-vm .flavors-predefined-cont {
5712
    width: 18%;
5713
    padding-right: 4%;
5714
    float:left;
5715
    border-right: 1px solid #A1C8DB;
5716
    overflow: auto;
5717
}
5718

    
5719
.create-vm .flavor-options-cont {
5720
    width: 74%;
5721
    float: left;
5722
    margin-left: 20px;
5723
}
5724

    
5725
.create-vm .flavor-options-cont .flavor-options li:hover {
5726
    background-image:-webkit-linear-gradient(top, #E8F4FA, #D1E7F0);
5727
    background-image:-o-linear-gradient(top, #E8F4FA, #D1E7F0);
5728
    background-image:-moz-linear-gradient(top, #E8F4FA, #D1E7F0);
5729
    background-image:linear-gradient(top, #E8F4FA, #D1E7F0);
5730
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8F4FA', endColorstr='#D1E7F0', GradientType=0);
5731
}
5732

    
5733
.create-vm .flavor-options-cont .flavor-options li.disabled * {
5734
    color: #eee !important;
5735
}
5736

    
5737
.create-vm .flavor-options-cont .flavor-options li.disabled {
5738
    background-image:linear-gradient(top, #aaa, #ddd);
5739
    background-image:-webkit-linear-gradient(top, #aaa, #ddd);
5740
    background-image:-o-linear-gradient(top, #aaa, #ddd);
5741
    background-image:-moz-linear-gradient(top, #aaa, #ddd);
5742
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#dddddd', GradientType=0);
5743
}
5744

    
5745
.create-vm .flavor-options-cont .flavor-options li.selected {
5746
    background-color: #FF9955;
5747
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5748
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5749
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5750
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5751
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9955', endColorstr='#E88B4D', GradientType=0);
5752
    border: 1px solid #C97943;
5753
}
5754

    
5755
.create-vm .flavor-options-cont .flavor-options li.selected.disabled {
5756
    background-color: #AAA;
5757
    background-image:linear-gradient(top, #AAA, #E88B4D);
5758
    background-image:-webkit-linear-gradient(top, #AAA, #E88B4D);
5759
    background-image:-o-linear-gradient(top, #AAA, #E88B4D);
5760
    background-image:-moz-linear-gradient(top, #AAA, #E88B4D);
5761
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AAAAAA', endColorstr='#E88B4D', GradientType=0);
5762
    border: 1px solid #999;
5763
}
5764

    
5765
.create-vm .predefined-list li.disabled {
5766
    color: #ddd !important;
5767
}
5768

    
5769
.create-vm .flavor-options-cont .flavor-options li {
5770
    display: block;
5771
    float: left;
5772
    margin-right: 10px;
5773
    margin-bottom: 9px;
5774
    padding: 9px 14px;
5775
    border: 1px solid #aaa;
5776
    background-image:-webkit-linear-gradient(top, #D1E7F0, #E8F4FA);
5777
    background-image:-o-linear-gradient(top, #D1E7F0, #E8F4FA);
5778
    background-image:-moz-linear-gradient(top, #D1E7F0, #E8F4FA);
5779
    background-image:linear-gradient(top, #D1E7F0, #E8F4FA);
5780
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1E7F0', endColorstr='#E8F4FA', GradientType=0);
5781
}
5782

    
5783
.create-vm .flavor-opts-list.compact li {
5784
    padding: 7px 9px;
5785
    margin-right: 7px;
5786
}
5787

    
5788
.create-vm .flavor-options-cont .flavor-options {
5789
    margin-bottom: 2px;
5790
}
5791

    
5792

    
5793
.create-vm .flavor-options .metric {
5794
    font-size: 0.8em;
5795
    margin-left: 2px;
5796
}
5797

    
5798
.create-vm .flavor-options span.available {
5799
  font-size: 0.8em;
5800
  font-weight: normal;
5801
  margin-left: 5px;
5802
}
5803

    
5804
.create-vm .flavor-options span.title {
5805
    color: #444;
5806
}
5807

    
5808
.create-vm .flavor-options span.desc {
5809
    display: block;
5810
    color: #aaa;
5811
    font-weight: normal;
5812
    font-size: 0.8em;
5813
    float: right;
5814
    margin-top: 4px;
5815
}
5816

    
5817
.disktip {
5818
    padding: 4px;
5819
    top: 20px;
5820
}
5821

    
5822
.create-vm .flavor-options .flavors-disk-template-list {
5823
    position: relative;
5824
}
5825

    
5826
.create-vm .flavor-options .disk_template.option {
5827
    z-index: 10;
5828
    min-width: 50px;
5829
    text-align: center;
5830
}
5831

    
5832
/*0 position is -470px*/
5833
.create-vm .flavor-options .disk-template-description {
5834
    font-size: 0.8em;
5835
    color: #444;
5836
    background-image: url("../images/horizontal-pointer.png");
5837
    background-repeat: repeat-x;
5838
    background-position: -470px 0;
5839
    padding-top: 15px;
5840
    margin-top: -10px;
5841
    font-style: italic;
5842
    display:block;
5843
    overflow: auto;
5844
    padding-bottom: 0px;
5845
    margin-bottom: 7px;
5846
    width: 100%;
5847
}
5848

    
5849
.create-vm .flavor-options .disk_template.option .description {
5850
    display: none;
5851
    position: absolute;
5852
    bottom: -20px;
5853
    left:0;
5854
    color: #888;
5855
    font-style: italic;
5856
    display: block;
5857
    background-color: #fff;
5858
    width: 100%;
5859
    text-align: left;
5860
    z-index: 0;
5861
    border-top: 1px solid #ddd;
5862
    padding-top: 3px;
5863
    display: none;
5864
}
5865

    
5866
.create-vm .flavor-options .selected .value {
5867
    color: #FFF;
5868
}
5869

    
5870
.create-vm .flavor-options .value {
5871
    font-weight: bold;
5872
    color: #5CA1C0;
5873
}
5874

    
5875
.create-vm .flavor-options-cont h4 {
5876
    border-bottom: 1px solid #A1C8DB;
5877
    padding-bottom: 5px;
5878
}
5879

    
5880
.create-vm .images-info-cont {
5881
    width: 28%;
5882
    padding-left: 3%;
5883
    float: left;
5884
    border-left: 1px solid #A1C8DB;
5885
}
5886

    
5887
.create-vm .select-image.wide .show-details {
5888
    display: inline;
5889
}
5890

    
5891
.create-vm .select-image .images-info-cont .hide {
5892
    display: none;
5893
}
5894

    
5895
.create-vm .select-image.wide .images-info-cont .hide {
5896
    display: block;
5897
    float: right;
5898
    position: absolute;
5899
    right: 10px;
5900
    top: 10px;
5901
    font-size: 0.8em;
5902
    text-decoration: underline;
5903
    color: #5CA1C0;
5904
    cursor: pointer;
5905
}
5906

    
5907
.create-vm .select-image.wide .images-list-cont {
5908
    width: 74%;
5909
    padding-right: 0;
5910
}
5911

    
5912
.create-vm .select-image.wide .images-info-cont .description .title {
5913
    display: none;
5914
    float: none;
5915
}
5916

    
5917
.create-vm .select-image.wide .images-info-cont .description p {
5918
    background-color: #fff;
5919
    border: 1px solid #ddd;
5920
    padding: 10px;
5921
    float: none;
5922
}
5923

    
5924
.create-vm .select-image.wide .selected .size {
5925
    color: #FFF !important;
5926
}
5927

    
5928
.create-vm .select-image.wide .image-details .size {
5929
    color: #5CA1C0;
5930
    position: absolute;
5931
    top: 5px;
5932
}
5933

    
5934
.create-vm .select-image.wide .images-info-cont h3 {
5935
    color: #5CA1C0;
5936
    margin: 10px 0;
5937
    margin-top: 5px;
5938
    text-align: left;
5939
    font-size: 0.9em;
5940
}
5941

    
5942
.create-vm .select-image.wide .images-info-cont .description p {
5943
    height: 50px;
5944
}
5945

    
5946
.create-vm .select-image.wide .images-info-cont .description {
5947
    width: 100% !important;
5948
    float: none !important;
5949
    background-color: transparent !important;
5950
    padding: 0 !important;
5951
    font-size: 1.1em;
5952
}
5953
.create-vm .select-image.wide .images-info-cont .extra-details {
5954
    height: 160px;
5955
    overflow-y: scroll;
5956
    padding-right: 15px;
5957
}
5958

    
5959
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail.extra-meta .title .custom {
5960
    display: inline-block;
5961
}
5962

    
5963
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail.extra-meta .title {
5964
    background-color: #999 !important;
5965
    border-color: #888 !important;
5966
}
5967
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail .custom {
5968
    float: right;
5969
    display: none;
5970
    font-size: 0.8em;
5971
    margin-left: 10px;
5972
    color: #DDD;
5973
    margin-top: 2px;
5974
}
5975

    
5976
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail {
5977
    padding: 0px;
5978
    background-color: transparent;
5979
    margin-bottom: 4px;
5980
}
5981

    
5982
.create-vm .select-image.wide .images-info-cont .extra-details .title {
5983
    float: left;
5984
    display: block;
5985
    width: 39%;
5986
    padding: 1%;
5987
    background-color: #5CA1C0;
5988
    color: #fff;
5989
    border: 1px solid #4F8DAA;
5990
    font-size: 0.8em;
5991
}
5992

    
5993
.create-vm .select-image.wide .images-info-cont .extra-details .value {
5994
    float: right;
5995
    display: block;
5996
    width: 55%;
5997
    padding: 1%;
5998
    border: none;
5999
    background-color: #FFF;
6000
    color: #444;
6001
    border: 1px solid #ddd;
6002
    margin-bottom: 0px;
6003
    font-size: 0.8em;
6004
}
6005

    
6006

    
6007
.create-vm .select-image.wide .images-info-cont .image-detail {
6008
}
6009

    
6010
.create-vm .select-image.wide ul.images-list {
6011
    height: 310px;
6012
    overflow-y: scroll;
6013
    padding-right: 3%;
6014
}
6015

    
6016
.flavors-predefined-cont {
6017

    
6018
}
6019

    
6020
.flavor-options-cont {
6021
}
6022

    
6023
.create-vm .select-image.wide .images-info-cont {
6024
    position: absolute;
6025
    width: 88%;
6026
    background-color: #DAE9F0;
6027
    padding: 2%;
6028
    border-left: none;
6029
    height: 320px;
6030
    box-shadow: 0px 0px 2px #aaa;
6031
    -moz-box-shadow: 0px 0px 2px #aaa;
6032
    -webkit-box-shadow: 0px 0px 2px #aaa;
6033
    display: none;
6034
}
6035

    
6036

    
6037
.create-vm .images-info-cont h4, .create-vm .create-step-cont .param h4{
6038
    color: #FF9955;
6039
    margin-bottom: 1em;
6040
    font-size: 1.2em;
6041
    text-indent: -20px;
6042
    padding-right: 58px;
6043
    margin-left: 20px;
6044
}
6045

    
6046
.create-vm .images-info-cont span.title {
6047
    color: #4085A5;
6048
    display: block;
6049
    margin-bottom: 2px;
6050
    font-size: 0.8em;
6051
}
6052

    
6053
.create-vm .type-filter li {
6054
    font-size: 0.8em;
6055
    /*font-weight: bold;*/
6056
    padding: 4px;
6057
    margin-bottom: 0px;
6058
    color: #FF7F2A;
6059
}
6060

    
6061
.create-vm .images-list li {
6062
    min-height: 30px;
6063
}
6064
.create-vm .images-list .image-details:hover {
6065
    background-color: #eee;
6066
}
6067

    
6068
.create-vm .images-list .image-details.selected:hover {
6069
    background-color: #FF7F2A;
6070
}
6071

    
6072
.create-vm .images-list .image-details.selected {
6073
    /*font-weight: bold;*/
6074
}
6075

    
6076
.create-vm .images-list .image-details {
6077
    padding: 6px;
6078
    margin-bottom:1px;
6079
    position: relative;
6080
}
6081

    
6082
.create-vm .images-list .image-details img {
6083
    vertical-align: middle;
6084
    margin-right: 10px;
6085
}
6086

    
6087
.create-vm .images-info-cont .image-detail:last-child p {
6088
    border-bottom: none;
6089
}
6090

    
6091
.create-vm .images-info-cont h4 img {
6092
    vertical-align: middle;
6093
    margin-right: 7px;
6094
    margin-bottom: 5px;
6095
}
6096

    
6097
.create-vm .images-info-cont .description p {
6098
    font-size: 0.8em;
6099
}
6100

    
6101
.create-vm .images-info-cont p {
6102
    margin-bottom: 7px;
6103
    font-size: 0.9em;
6104
    border-bottom: 1px solid #A1C8DB;
6105
    padding-bottom: 7px;
6106
}
6107

    
6108
.create-vm .step-header {
6109
    padding-bottom:0;
6110
    position: relative;
6111
}
6112

    
6113
.create-vm .step-header .header-step .info span.subtitle {
6114
    font-size: 1.2em;
6115
    color: #fff;
6116
    font-weight: bold;
6117
}
6118

    
6119
.create-vm .step-header .header-step .info span {
6120
    float: none;
6121
    text-align: right;
6122
}
6123

    
6124
.create-vm .step-header .header-step .info {
6125
    position: absolute;
6126
    right: 15px;
6127
    top: 20px;
6128
    font-size: 0.8em;
6129
}
6130

    
6131
.create-vm .step-header .header-step span {
6132
    float: left;
6133
    display: block;
6134
}
6135

    
6136
.create-vm .steps-container {
6137
    width: 2000em;
6138
}
6139

    
6140
.create-vm .step-header .header-step .title {
6141
    margin-top: 20px;
6142
    font-size: 1em;
6143
    margin-left: 10px;
6144
}
6145

    
6146
#createvm-overlay-content {
6147
    width: 624px;
6148
    overflow: hidden;
6149
}
6150

    
6151
.create-vm .steps-history .steps-history-cont.current .title {
6152
    display: block;
6153
    top: 23px;
6154
    left: 43px;
6155
    font-size: 1.2em;
6156
    color: #ffffff;
6157
    font-weight: bold;
6158
    font-family: 'Ubuntu', sans-serif !important;
6159
}
6160

    
6161
.create-vm .steps-history .steps-history-cont.current .subnum {
6162
    display: none;
6163
    float: none;
6164
    font-size: 0.9em;
6165
    font-family: 'Ubuntu', sans-serif  !important;
6166
}
6167

    
6168
.create-vm .steps-history .steps-history-cont.current .subtitle,
6169
.create-vm .steps-history .steps-history-cont.current .description {
6170
    font-family: 'Ubuntu', sans-serif  !important;
6171
}
6172

    
6173
.create-vm .steps-history .steps-history-cont.current .info {
6174
    display: block;
6175
    font-family: 'Ubuntu', sans-serif !important;
6176
}
6177

    
6178
.create-vm .steps-history .steps-history-cont.completed .title,
6179
.create-vm .steps-history .steps-history-cont.completed .num {
6180
    color: #A1C8DB;
6181
}
6182

    
6183
.create-vm .steps-history .steps-history-cont.completed {
6184
    background-color: #4085A5;
6185
    color: #fff;
6186
    cursor: pointer;
6187
}
6188

    
6189
.create-vm .steps-history .steps-history-cont.completed .steps-history-step {
6190
    background-image: url("../images/check.png");
6191
}
6192

    
6193
.create-vm .steps-history .steps-history-cont.current .steps-history-step {
6194
    width: 320px;
6195
}
6196

    
6197
.create-vm .steps-history .steps-history-cont.current .num {
6198
    color: #fff;
6199
}
6200

    
6201
.create-vm .steps-history .steps-history-cont.current .info {
6202
    color: #4085A5;
6203
    font-size: 0.8em;
6204
}
6205

    
6206
.create-vm .steps-history .steps-history-cont.current {
6207
    background-color: #A1C8DB;
6208
    color: #fff;
6209
    width: 416px;
6210
}
6211

    
6212
.create-vm .steps-history-step {
6213
    padding: 4px;
6214
    padding-left: 7px;
6215
    font-size: 1em;
6216
    font-family: 'Ubuntu', sans-serif  !important;
6217
    margin-right: 5px;
6218
    padding-top: 12px;
6219
    background-position: right 30px;
6220
    background-image: none;
6221
    background-repeat: no-repeat;
6222
}
6223

    
6224
.create-vm .steps-history {
6225
    background-color: #4085A5;
6226
}
6227

    
6228
.create-vm .steps-history .steps-history-cont.last {
6229
    border-right: none;
6230
}
6231

    
6232
.create-vm .steps-history .steps-history-cont .num {
6233
    margin-left: 5px;
6234
    margin-top: -10px;
6235
    padding-bottom: 10px;
6236
}
6237

    
6238
.create-vm .steps-history .steps-history-cont .title {
6239
    display: none;
6240
    position: absolute;
6241
    bottom: 0px;
6242
    text-align: center;
6243
    padding-bottom: 2px;
6244
    left:0;
6245
    width: 55px;
6246
    margin-left:0;
6247
    margin-top:0;
6248
    font-size: 0.8em;
6249
}
6250

    
6251
.create-vm .steps-history .steps-history-cont .subnum,
6252
.create-vm .steps-history .steps-history-cont .info {
6253
    display: none;
6254
}
6255

    
6256
.create-vm .steps-history .steps-history-cont {
6257
    height: 70px;
6258
    width: 51px;
6259
    float: left;
6260
    color: #fff;
6261
    border-right: 1px solid #A1C8DB;
6262
    color: #A1C8DB;
6263
    background-color: #4085A5;
6264
    background-position: center right;
6265
    background-image: none;
6266
    background-repeat: no-repeat;
6267

    
6268
    -webkit-transition: background-color .15s ease-in;
6269
    -o-transition: background-color .15s ease-in;
6270
    -moz-transition: background-color .15s ease-in;
6271
    transition: background-color .15s ease-in;
6272

    
6273
    border-bottom: 1px solid #aaa;
6274
}
6275

    
6276
.create-vm .step-header .header-step .num {
6277
    color: #225871;
6278
    font-size: 4em;
6279
    margin-bottom: -5px;
6280
    font-family: 'Ubuntu', sans-serif;
6281
    font-weight: normal !important;
6282
}
6283

    
6284
.create-vm .step-header .header-step {
6285
    color: #;
6286
    margin-bottom: -6px;
6287
    width: 25%;
6288
    padding-left: 0%;
6289
    display: block;
6290
    float: left;
6291
}
6292

    
6293
.create-vm .step-header .header-step.current {
6294
    color: #387693;
6295
}
6296

    
6297
.create-vm .image-filters-title {
6298
    margin-top: 1em;
6299
    margin-bottom: 0.5em;
6300
}
6301

    
6302
.create-vm .create-step-cont span.clear {
6303
    font-size: 0.8em;
6304
    font-weight: bold;
6305
    color: #A1C8DB;
6306
    display: block;
6307
}
6308

    
6309
.create-vm .category-filters li {
6310
    float:left;
6311
    display: block;
6312
    padding: 4px;
6313
    background-color: #eee;
6314
    margin-right: 5px;
6315
    font-size: 0.9em;
6316
    margin-bottom: 5px;
6317
}
6318

    
6319
.create-vm .content-cont {
6320
    height: 340px;
6321
    overflow: auto;
6322
}
6323

    
6324
.create-vm .vm-confirm .confirm-params span.cval {
6325
    margin-left: 8px;
6326
    color: #444;
6327
}
6328

    
6329
.create-vm .vm-confirm .confirm-params span.ckey {
6330
    color: #4085A5;
6331
    font-weight: bold;
6332
}
6333

    
6334
.create-vm .vm-confirm .confirm-params {
6335
    margin-bottom: 15px;
6336
}
6337

    
6338
.create-vm .vm-confirm h3.vm-name {
6339
    background-repeat: no-repeat;
6340
    background-position: left center;
6341
    font-size: 1.4em;
6342
    padding-left: 1.45em;
6343
    color: #4085A5;
6344
}
6345

    
6346
.create-vm .images-list-cont h4 a {
6347
    margin-top: 3px;
6348
    margin-right: -2px !important;
6349
}
6350
.create-vm .images-list-cont h4 a,
6351
.create-vm .list-cont h4 a {
6352
    font-size: 0.8em;
6353
    font-weight: normal;
6354
    margin-right: 5px;
6355
    float: right;
6356
    color: #FF7F2A;
6357
}
6358

    
6359
.create-vm .confirm-params {
6360
    overflow: auto;
6361
}
6362

    
6363
.create-vm .vm-confirm .ssh.confirm-params {
6364
    max-height: 150px;
6365
}
6366

    
6367
.create-vm .personalize-cont .confirm-params {
6368
    max-height: 160px;
6369
    margin-right: 10px;
6370
}
6371

    
6372
.create-vm .personalize-cont,
6373
.create-vm .confirm-cont {
6374
    height: 250px;
6375
}
6376

    
6377
.create-vm .image-warning p {
6378
  width: 80%;
6379
  float: left;
6380
}
6381

    
6382
.create-vm .image-warning .untrusted-image-confirm:hover {
6383
  background-color: #7D674E;
6384
}
6385

    
6386
.create-vm .image-warning .untrusted-image-confirm {
6387
  display: inline-block;
6388
  padding: 5px;
6389
  background-color: #5C4D39;
6390
  color: #FFF;
6391
  width: 10%;
6392
  float: right;
6393
  margin-top: 4px;
6394
  margin-right: 2px;
6395
  cursor: pointer;
6396
  text-align: center;
6397
}
6398

    
6399
.create-vm .image-warning {
6400
  display: none;
6401
  background-color: #987249;
6402
  color: #fff;
6403
  padding: 10px 15px;
6404
  font-size: 0.9em;
6405
  border-top: 1px solid #AAA;
6406
}
6407

    
6408
.create-vm .create-step-cont .rename input.rename-field {
6409
    font-size: 1.4em;
6410
    padding: 5px;
6411
    width: 93%;
6412
    padding-left: 30px;
6413
    background-position: 7px center;
6414
    background-repeat: no-repeat;
6415
}
6416

    
6417
.create-vm .create-step-cont .rename label {
6418
    display: block;
6419
}
6420

    
6421
.create-vm .create-step-cont .personalize-conts,
6422
.create-vm .create-step-cont .confirm-conts {
6423
    margin-top: 20px;
6424
}
6425

    
6426
.create-vm .create-step-cont .personalize-cont,
6427
.create-vm .create-step-cont .confirm-cont {
6428
    width: 30%;
6429
    margin-right: 2%;
6430
    border-right: 1px solid #A1C8DB;
6431
    float: left;
6432
}
6433

    
6434
.create-vm .create-step-cont .confirm-cont ul li .title {
6435
    width: 55px;
6436
    float: left;
6437
}
6438

    
6439
.create-vm .create-step-cont .list-cont ul li .value {
6440
    float: right;
6441
    padding-top: 2px;
6442
    display: block;
6443
    width: 90px;
6444
    text-align: right;
6445
}
6446

    
6447
.create-vm .create-step-cont .list-cont ul li.flavor-disktype .value {
6448
    width: 65px;
6449
}
6450

    
6451
.create-vm .create-step-cont .list-cont ul li.image-description .value,
6452
.create-vm .create-step-cont .list-cont ul li.image-name .value {
6453
    float: none;
6454
    width: auto;
6455
    text-align:left;
6456
    width: auto;
6457
}
6458

    
6459
.create-vm .create-step-cont .list-cont ul li.image-name .value {
6460
  width: 120px;
6461
  text-indent: 0;
6462
  margin-left: 0;
6463
}
6464

    
6465
.create-vm .create-step-cont .list-cont ul li {
6466
    padding:0;
6467
    margin:0;
6468
    margin-bottom: 5px;
6469
    border-bottom: 1px solid #EEE;
6470
    padding-bottom: 7px;
6471
    margin-right: 10px;
6472
}
6473

    
6474
.create-vm .create-step-cont li.ssh-key-option .check,
6475
.create-vm .create-step-cont li.list-item-option .check {
6476
    float: right;
6477
    margin-right: 5px;
6478
    margin-top: 0px;
6479
}
6480

    
6481
.create-vm .create-step-cont li.ssh-key-option.selected {
6482
}
6483
.create-vm .create-step-cont li.ssh-key-option.selected:hover,
6484
.create-vm .create-step-cont li.list-item-option.selected:hover {
6485
    background-color: #F95;
6486
}
6487

    
6488
.create-vm .create-step-cont li.ssh-key-option:hover,
6489
.create-vm .create-step-cont li.list-item-option:hover {
6490
    background-color: #eee;
6491
}
6492

    
6493
.create-vm .create-step-cont li.ssh-key-option.selected {
6494
}
6495

    
6496
.create-vm .create-step-cont li.ssh-key-option,
6497
.create-vm .create-step-cont li.list-item-option {
6498
    padding: 6px !important;
6499
}
6500

    
6501
.create-vm .create-step-cont .list-cont.ssh {
6502
    width: 60%;
6503
}
6504

    
6505
.create-vm .create-step-cont .list-cont.meta h4 {
6506
    margin-right: 0;
6507
}
6508

    
6509
.create-vm .create-step-cont .list-cont.meta {
6510
    margin-right:0;
6511
    border-right: none;
6512
    width: 195px;
6513
    overflow: hidden;
6514
    overflow-y: auto;
6515
}
6516

    
6517
.create-vm .list-cont > h4 {
6518
    font-size: 1.2em;
6519
    margin-right: 10px;
6520
    border-bottom: 1px solid #A1C8DB;
6521
    padding-bottom: 5px;
6522
    color: #387693;
6523
}
6524

    
6525
.create-vm .list-cont .param.image-name {
6526
    margin-bottom: 0 !important;
6527
    border-bottom: none !important;
6528
}
6529

    
6530
.create-vm .list-cont .param h4 {
6531
    margin-bottom: 0px !important;
6532
    font-size: 1.1em !important; 
6533
}
6534

    
6535
.create-vm .list-cont .param {
6536
    margin-bottom: 7px !important;
6537
}
6538

    
6539
.create-vm .list-cont .value {
6540
    font-weight: bold;
6541
}
6542

    
6543
.create-vm .list-cont .param .value {
6544
    font-size: 0.9em;
6545
}
6546

    
6547
.create-vm .list-cont .param .title {
6548
    color: #387693;
6549
}
6550

    
6551
.create-vm .list-cont .image-description {
6552
    margin-left:0;
6553
}
6554

    
6555
.create-vm .list-cont .image-description .value {
6556
    font-weight: normal;
6557
    margin-left: 0 !important;
6558
}
6559

    
6560
.create-vm .list-cont .image-description .title {
6561
    display: none;
6562
    font-size: 0.8em;
6563
}
6564

    
6565
.create-vm .list-cont.meta .values span {
6566
    display:block;
6567
    float: left;
6568
    margin-right: 4px;
6569
    border: 1px solid #eee;
6570
    padding:3px;
6571
    margin-bottom: 4px;
6572
    font-size: 0.9em;
6573
}
6574

    
6575
.create-vm .list-cont.meta .key {
6576
    font-weight: bold;
6577
    font-size: 0.9em;
6578
    display: block;
6579
    margin-bottom: 5px;
6580
}
6581

    
6582
.create-vm .meta input {
6583
    font-size: 0.8em;
6584
}
6585

    
6586
.create-vm .network-select {
6587
  height: 278px;
6588
  overflow-y: scroll;
6589
  padding-right: 10px;
6590
}
6591

    
6592
.vm-connect .connect-cont {
6593
    margin-bottom: 20px;
6594
    border-bottom: 1px solid #A1C8DB;
6595
    padding-bottom: 20px;
6596
}
6597

    
6598
.vm-connect .connection-info {
6599
    padding-bottom: 0px;
6600
    margin-bottom: 0;
6601
    border-bottom: none;
6602
}
6603

    
6604
.vm-connect .connection-info .connect a {
6605
    color: #fff;
6606
}
6607

    
6608
.vm-connect .connection-info .connect {
6609
    background-color: #387693;
6610
    color: #fff;
6611
    padding: 10px;
6612
    font-size: 1.2em;
6613
    text-align: center;
6614
}
6615

    
6616
.clip-copy {
6617
    display: block;
6618
    width: 20px;
6619
    height: 20px;
6620
    position: absolute;
6621
    border: 1px solid #387693;
6622
    background-image: url("../images/clipboard.png");
6623
    background-repeat: no-repeat;
6624
    background-position: center;
6625
    cursor: pointer;
6626
    background-color: #A1C8DB;
6627
}
6628

    
6629
.password-cont .clip-copy { right: 10px; top: 8px;}
6630

    
6631

    
6632
input.has-errors {
6633
    border-color: #ff0000;
6634
}
6635

    
6636
.overlay .models-view .previous-view-link {
6637
    margin: -10px;
6638
    margin-bottom:10px;
6639
    padding: 10px 5px;
6640
    background-image: url("../images/left-arrow.png");
6641
    background-repeat: no-repeat;
6642
    background-position: 10px center;
6643
    padding-left: 20px;
6644
    background-color: #93D070;
6645
    cursor: pointer;
6646
    border-bottom: 1px solid #eee;
6647
    text-decoration: underline;
6648
}
6649

    
6650
.single .suspended-notice {
6651
  right: 98px;
6652
  top:2px;
6653
}
6654

    
6655
.icon .suspended-notice {
6656
  right: 192px;
6657
  top: 54px;
6658
}
6659

    
6660
.suspended-notice {
6661
  display: inline-block;
6662
  padding: 4px;
6663
  background-color: #8f1915;
6664
  cursor: pointer;
6665
  position: absolute;
6666
  color: #fff;
6667
  font-size: 0.6em;
6668
  display: none;
6669
}
6670

    
6671
.suspended .suspended-notice {
6672
  display: block;
6673
}
6674

    
6675
.suspended .action-indicator {
6676
  display: none !important;
6677
}
6678

    
6679
.trigger-resize {
6680
    background-image: url("../images/pencil-disabled.png");
6681
    background-position: right 2px;
6682
    background-repeat: no-repeat;
6683
    padding-right: 15px !important;
6684
    cursor: pointer;
6685
}
6686

    
6687
.can-resize .trigger-resize:hover {
6688
    text-decoration: underline;
6689
}
6690

    
6691
.can-resize .trigger-resize {
6692
    font-weight: bold;
6693
    background-image: url("../images/pencil.png");
6694
}
6695

    
6696
.vm-resize .flavor-options-cont {
6697
  float: none;
6698
  width: 100%;
6699
  margin: 0;
6700
  height: auto;
6701
}
6702

    
6703
#vm-resize-overlay-content .form-actions {
6704
  margin-top: 15px;
6705
}
6706

    
6707
#vm-resize-overlay-content .form-actions .warning {
6708
  width: 200px;
6709
  color: #800;
6710
  float: left;
6711
}
6712

    
6713
.form-action.shutdown {
6714
  background-color: #800;
6715
  margin-right: 10px;
6716
  border-color: #700;
6717
}
6718

    
6719
.form-action.disabled {
6720
  background-color: #ddd;
6721
  color: #aaa;
6722
  border-color: #999;
6723
  cursor: default;
6724
}
6725

    
6726
.overlay .form-actions .assign {
6727
  display: none;
6728
}
6729

    
6730

    
6731
.connect-ip #network-vms-select-content li.selected .options-object-cont {
6732
  background-image: none !important;
6733
}
6734

    
6735
.overlay.connect-ip .form-actions .assign {
6736
  display: block;
6737
}
6738

    
6739
.overlay.connect-ip .form-actions .create {
6740
  display: none;
6741
}
6742

    
6743
.overlay.connect-ip li.options-object .options-object-cont {
6744
  background-image: none !important; 
6745
}
6746

    
6747
.overlay-public-key-create .container {
6748
  font-size: 0.9em;
6749
}
6750

    
6751
/* Additional styles for views.ext module */
6752
.pane-view {
6753
  background-color: #EFF7FA;
6754
}
6755

    
6756
.collection-list-view .collection {
6757
  padding-top: 14px;
6758
}
6759

    
6760
.collection-list-view .collection .create-button {
6761
  margin-bottom: 15px;
6762
}
6763

    
6764
.collection-list-view .collection .create-button a {
6765
  display: inline-block;
6766
  color: black;
6767
  background-color: #FF7F2A;
6768
  cursor: pointer;
6769
  padding: 7px 24px;
6770
  text-decoration: none;
6771
  border-left: 15px solid #FF9955;
6772
  margin-left: -15px;
6773
  font-family: 'Open Sans', sans-serif;
6774
}
6775

    
6776
.pane-view .collection-list-view .model-view {
6777
  width: 100%;
6778
  background-color: transparent;
6779
  font-size: 75%;
6780
}
6781

    
6782
.pane-view .collection-list-view .model-view.actionpending .main-content-inner,
6783
.pane-view .collection-list-view .model-view.subactionpending .main-content-inner,
6784
.pane-view .collection-list-view .model-view.hovered .main-content-inner,
6785
.pane-view .collection-list-view .model-view:hover .main-content-inner {
6786
  background-color: #A1C8DB;
6787
}
6788

    
6789
.pane-view .collection-list-view .model-view .main-content.inner .state-indicator {
6790
  top: 5px;
6791
}
6792

    
6793
.pane-view .collection-list-view .model-view .main-content .state-indicator {
6794
  width: 50px;
6795
  position: absolute;
6796
  top: 30px;
6797
  right: 5px;
6798
}
6799

    
6800
.pane-view .collection-list-view .model-view .main-content .title {
6801
  font-weight: normal;
6802
}
6803

    
6804
.pane-view .collection-list-view .model-view .main-content {
6805
}
6806

    
6807
.pane-view .collection-list-view .model-view:last-child .main-content {
6808
  border-bottom: none;
6809
}
6810

    
6811
.pane-view .collection-list-view .model-view .main-content {
6812
  width: 520px;
6813
  padding-bottom: 5px;
6814
  margin-bottom: 5px;
6815
  float: left;
6816
  border-bottom: 1px solid #D1E7F0;
6817
}
6818

    
6819
.pane-view .collection-list-view .model-view .main-content-inner {
6820
  padding: 10px 20px;
6821
  padding-right: 10px;
6822
  /*overflow: hidden;*/
6823
}
6824

    
6825
.pane-view .collection-list-view .model-view .main-content .logo {
6826
  float: left;
6827
}
6828

    
6829
.pane-view .collection-list-view .model-view .main-content .entry-right {
6830
  position: relative;
6831
}
6832

    
6833
.pane-view .collection-list-view .model-view .main-content .entry {
6834
  width: 290px;
6835
  padding-top: 5px;
6836
  margin-left: 10px;
6837
  float: left;
6838
  position: relative;
6839
}
6840

    
6841
.model-item .actions-content.inline {
6842
  padding-top: 6px;
6843
  position: absolute;
6844
  right: 0px;
6845
  font-size: 1.2em;
6846
  height: 26px;
6847
  width: 182px;
6848
}
6849

    
6850
.pane-view .collection-list-view .model-view .main-content .actions-content {
6851
  width: 80px;
6852
  float: left;
6853
}
6854

    
6855
.pane-view .collection-list-view .model-item .link {
6856
  color: #4085A5;
6857
}
6858

    
6859
.collection .no-available a {
6860
  color: #aaa;
6861
}
6862

    
6863
.collection .select-item span.available {
6864
  font-size: 0.9em;
6865
  float: right;
6866
}
6867

    
6868
.collection span.no-available {
6869
}
6870

    
6871
.collection span.no-available {
6872
  float: right;
6873
}
6874

    
6875
.collection .no-available {
6876
  font-size: 0.8em;
6877
  color: #f00;
6878
}
6879

    
6880
.collection .empty-list {
6881
  padding: 10px;
6882
  font-size: 0.8em;
6883
  color: #333;
6884
}
6885

    
6886
.collection-list-view .items-sublist:first-child {
6887
  padding-top: 0;
6888
}
6889

    
6890
.collection-list-view .items-sublist {
6891
  padding-top: 10px;
6892
}
6893

    
6894
.collection-list-view .items-sublist:last-child {
6895
  margin-top: 20px;
6896
  border-top: 10px solid #DCEBF2;
6897
  margin-bottom: 0;
6898
}
6899

    
6900
.model-item .status-title {
6901
  text-align: right;
6902
  margin-right: 4px;
6903
  margin-top: 5px;
6904
  width: 150px;
6905
  position: absolute;
6906
  top:-4px;
6907
  right: 0;
6908
}
6909

    
6910
.model-item .status-indicator {
6911
  width: 65px;
6912
  position: absolute;
6913
  top: 16px;
6914
  right: 0;
6915
}
6916

    
6917
.model-item .actions-content {
6918
  width: 180px;
6919
  float: left;
6920
}
6921

    
6922
.model-item .actions-content .action-container .confirm-single .no,
6923
.model-item .actions-content .action-container .confirm-single .yes {
6924
  font-family: Arial, Helvetica, sans-serif;
6925
  width: 20px;
6926
  height: 16px;
6927
  padding: 2px 0;
6928
  float: left;
6929
  border: none;
6930
  margin: 0;
6931
  padding: 2px 0;
6932
  text-align: center;
6933
  font-size: inherit;
6934
}
6935

    
6936
.model-item .actions-content .action-container .confirm-single .no {
6937
  background-color: #FF9955;
6938
}
6939

    
6940
.model-item .actions-content .action-container .confirm-single .yes {
6941
  background-color: #FF7F2A;
6942
  width: 80px;
6943
}
6944

    
6945
.model-item .actions-content .action-container.warn .confirm-single .no:hover {
6946
  color: #fff;
6947
}
6948

    
6949
.model-item .actions-content .action-container.warn .confirm-single .no {
6950
  background-color: #CC0000;
6951
}
6952

    
6953
.model-item .actions-content .action-container.warn .confirm-single .yes {
6954
  background-color: #880000;
6955
  color: #fff;
6956
}
6957

    
6958
.model-item .actions-content .action-container.warn .confirm-single .yes:hover {
6959
  background-color: #CC0000;
6960
}
6961

    
6962
.model-item .actions-content .action-container .confirm-single {
6963
  display: none;
6964
  width: 100px;
6965
  float: right;
6966
  margin-right: -22px;
6967
  margin-top: -4px;
6968
}
6969

    
6970
.model-item .actions-content .action-container.selected .confirm-single {
6971
  display: block !important;
6972
}
6973

    
6974
.model-item.actionpending .actions-content .action-container.isactive,
6975
.model-item:hover .actions-content .action-container.isactive,
6976
/*.model-item.hovered .actions-content .action-container.isactive,*/
6977
.model-item .actions-content .action-container.selected {
6978
  display: block;
6979
}
6980

    
6981
.model-item.actionpending .nested-model-list .actions-content .action-container.isactive {
6982
  display: none;
6983
}
6984

    
6985
.model-item.actionpending .nested-model-list .model-item.actionpending .actions-content .action-container.isactive {
6986
  display: block;
6987
}
6988

    
6989
.model-item .actions-content .action-container.selected:hover {
6990
  background-color: transparent;
6991
  border-left: 4px solid #7DB4CD;
6992
  margin-left: 6px;
6993
}
6994

    
6995
.model-item .actions-content .action-container:hover a {
6996
  color: #fff;
6997
}
6998

    
6999
.model-item .actions-content .action-container:hover {
7000
  background-color: #A1C8DB;
7001
  border-left: 4px solid #7DB4CD;
7002
  margin-left: 6px;
7003
}
7004

    
7005
.model-item .actions-content .action-container.selected {
7006
}
7007

    
7008
.model-item .actions-content .action-container {
7009
  display: none; 
7010
}
7011

    
7012
.model-item .actions-content .action-container {
7013
  padding: 2px;
7014
  margin-bottom: 5px;
7015
  padding-left: 4px;
7016
  margin-left: 10px;
7017
  cursor: pointer;
7018
}
7019

    
7020
.model-item .status-active .status-indicator .indicator {
7021
  background-color: #63cf1c;
7022
}
7023

    
7024
.model-item .status-inactive .status-indicator .indicator {
7025
  background-color: #940606;
7026
}
7027

    
7028
.model-item .status-terminated .status-indicator .indicator {
7029
  background-color: #5E1616;
7030
}
7031

    
7032
.model-item .status-error .status-indicator .indicator {
7033
  background-color: #ff0000;
7034
}
7035

    
7036
.model-item .status-progress .status-indicator .indicator {
7037
  background-color: #FF7F2A;
7038
}
7039

    
7040
.model-item .status-indicator .indicator {
7041
  width: 10px;
7042
  height: 11px;
7043
  float: right;
7044
  background-color: #EFF7FA;
7045
  margin-right: 3px;
7046
}
7047

    
7048
/* vm sprites */
7049
.vm-icon.medium2 {
7050
  width: 30px;
7051
  height: 32px;
7052
}
7053

    
7054
.vm-icon.medium2.state1 {
7055
    background-position: 0px 0;
7056
}
7057

    
7058
.vm-icon.medium2.state2 {
7059
    background-position: -60px 0;
7060
}
7061

    
7062
.vm-icon.medium2.state3 {
7063
    background-position: -90px 0;
7064
}
7065

    
7066
.vm-icon.medium2.state4 {
7067
    background-position: -30px 0;
7068
}
7069

    
7070

    
7071
.vm-icon.medium {
7072
  width: 50px;
7073
  height: 54px;
7074
}
7075

    
7076
.vm-icon.medium.state1 {
7077
    background-position: 0px 0;
7078
}
7079

    
7080
.vm-icon.medium.state2 {
7081
    background-position: -100px 0;
7082
}
7083

    
7084
.vm-icon.medium.state3 {
7085
    background-position: -150px 0;
7086
}
7087

    
7088
.vm-icon.medium.state4 {
7089
    background-position: -50px 0;
7090
}
7091
/* end vm sprites */
7092

    
7093
/* ips */
7094
.ip-port-view .title {
7095
  width: 100%;
7096
}
7097

    
7098
.model-item .vm-name {
7099
  font-weight: bold;
7100
}
7101

    
7102
.nested-model-list {
7103
  position: relative;
7104
  top: 43px;
7105
  overflow: visible;
7106
  width: 531px;
7107
  margin-left: -41px;
7108
  margin-bottom: 39px;
7109
}
7110

    
7111
.entry.inline .nested-model-list {
7112
  font-size: 0.9em;
7113
}
7114

    
7115
.entry.inline .nested-model-list .model-item .outer {
7116
  width: 220px;
7117
}
7118

    
7119
.entry.inline .nested-model-list {
7120
  position: absolute;
7121
  top: 17px;
7122
  margin-left: -9px;
7123
  margin-bottom: 0;
7124
  width: 420px;
7125
}
7126

    
7127
.entry.inline .nested-model-list .inner.main-content {
7128
  margin-left: 0;
7129
}
7130

    
7131
.entry.inline .nested-model-list .model-item .inner.main-content .title,
7132
.entry.inline .nested-model-list .model-item .inner.main-content .subtitle {
7133
  left: 52px;
7134
}
7135

    
7136
.nested-model-list .collection {
7137
  padding: 0;
7138
}
7139

    
7140
.nested-model-list .model-item .outer {
7141
  width: 470px;
7142
  position: relative;
7143
}
7144

    
7145
.model-item .border i.remove,
7146
.empty-list i.add {
7147
    display: block;
7148
    color: #fff;
7149
    padding-left: 10%;
7150
    width: 90%;
7151
    padding-top: 0px;
7152
    font-weight: bold;
7153
    font-size: 1.4em;
7154
    cursor: pointer;
7155
    font-style: normal;
7156
}
7157

    
7158
.model-item .border i.remove {
7159
  font-size: 1em;
7160
  color: #BE5812;
7161
  padding-top: 1px;
7162
}
7163

    
7164
.empty-list.nested {
7165
  height: 30px;
7166
}
7167

    
7168
.empty-list .border2, 
7169
.nested-model-list .outer .border2 {
7170
  border-left: 3px solid #FB822F;
7171
  position: absolute;
7172
  height: 100%;
7173
  width: 1px;
7174
  left:0;
7175
  top:0;
7176
}
7177

    
7178
.empty-list .border2, 
7179
.nested-model-list .model-item:last-child .outer .border2 {
7180
  height: 69px;
7181
}
7182

    
7183
.empty-list .border, .nested-model-list .outer .border {
7184
  position: absolute;
7185
  top: 52px;
7186
  left: 0;
7187
  background-color: #FB822F;
7188
  height: 17px;
7189
  width: 91px;
7190
  z-index: 0;
7191
}
7192

    
7193
.empty-list .border {
7194
  top: 31px;
7195
}
7196

    
7197
.empty-list .border2 {
7198
  height: 31px;
7199
}
7200

    
7201
.nested-model-list .model-item .inner .model-logo {
7202
  position: relative;
7203
  z-index: 100;
7204
}
7205

    
7206
.model-item.actionpending .nested-model-list.proxy .model-item .inner.main-content,
7207
.model-item:hover .nested-model-list.proxy .model-item .inner.main-content,
7208
.model-item.hovered .nested-model-list.proxy .model-item .inner.main-content,
7209
.nested-model-list .model-item.actionpending .inner.main-content,
7210
.nested-model-list .model-item:hover .inner.main-content,
7211
.nested-model-list .model-item.hovered .inner.main-content {
7212
  background-color: #84B7D0;
7213
}
7214

    
7215
.entry.inline .model-item .inner,
7216
.entry.inline *:hover .model-item .inner,
7217
.entry.inline .model-item:hover .inner {
7218
  background-color: transparent !important;
7219
}
7220

    
7221
.nested-model-list .model-item:last-child .inner.main-content {
7222
  border-bottom: none;
7223
}
7224

    
7225
.nested-model-list .model-item .inner.main-content {
7226
  width: auto;
7227
  margin-bottom: 0;
7228
  float: none;
7229
  z-index: 0;
7230
  margin-left: 30px;
7231
  padding-bottom: 20px;
7232
  padding: 10px;
7233
  border-bottom: 1px solid #5CA1C0;
7234
  /*height: 59px;*/
7235
}
7236

    
7237
.nested-model-list .model-item .inner.main-content .no-device {
7238
  color: #ef0000;
7239
  position: absolute;
7240
  top: -20px;
7241
  left: -42px;
7242
  width: 200px;
7243
}
7244

    
7245
.nested-model-list .model-item .inner.main-content .subtitle {
7246
  position: absolute;
7247
  top: 27px;
7248
  left: 110px;
7249
  font-weight: normal;
7250
  font-size: 0.8em;
7251
}
7252

    
7253
.nested-model-list .model-item .inner.main-content .title {
7254
  position: absolute;
7255
  top: 10px;
7256
  left: 110px;
7257
  font-weight: bold;
7258
}
7259

    
7260
.model-item:hover .nested-model-list .actions-content .action-container.isactive {
7261
  display: none;
7262
}
7263

    
7264
.model-item:hover .nested-model-list .model-item.actionpending .actions-content .action-container.isactive {
7265
  display: block !important;
7266
}
7267

    
7268

    
7269
.model-item .actions-content .action-container.selected a {
7270
  color: #FF7F2A;
7271
}
7272

    
7273
.model-item:hover .nested-model-list.proxy .model-item .actions-content .action-container.selected,
7274
.model-item:hover .nested-model-list.proxy .model-item .actions-content .action-container.isactive,
7275
.model-item.hovered .nested-model-list.proxy .model-item .actions-content .action-container.selected,
7276
.model-item.hovered .nested-model-list.proxy .model-item .actions-content .action-container.isactive,
7277
.model-item:hover .nested-model-list .model-item .actions-content .action-container.selected,
7278
.model-item:hover .nested-model-list .model-item:hover .actions-content .action-container.isactive {
7279
  display: block !important;
7280
}
7281

    
7282
.pane-view .model-view .nested-model-list .model-item .actions-content {
7283
  position: absolute;
7284
  right: -180px;
7285
  top:0;
7286
  float: none;
7287
  display: block;
7288
  width: 180px;
7289
  height: 80px;
7290
}
7291

    
7292
/* networks */
7293
.nested-model-list .ip-addresses li {
7294
  margin-bottom: 8px;
7295
}
7296

    
7297
.nested-model-list .ip-addresses li .type {
7298
  margin-right: 3px;
7299
  vertical-align: middle;
7300
  color: #fff;
7301
  background-color: #4085A5;
7302
  padding: 3px;
7303
}
7304

    
7305
.nested-model-list .ip-addresses li .ip {
7306
  padding-top: 3px;
7307
}
7308

    
7309
.nested-model-list .ip-addresses {
7310
  padding-top: 0px;
7311
  font-size: 0.9em;
7312
  margin-left: 70px;
7313
  margin-top:-35px;
7314
  margin-bottom: 35px;
7315
}
7316

    
7317
.ports.nested-model-list.is-public .empty-list .border,
7318
.ports.nested-model-list.is-public .empty-list .border2 {
7319
  display: none !important;
7320
}
7321

    
7322
.network-ports-toggler {
7323
  position: absolute;
7324
  top: 30px;
7325
  left: 0px;
7326
}
7327

    
7328
.model-form-actions .form-action {
7329
  font-size: 1.1em !important;
7330
}
7331

    
7332
.model-form textarea {
7333
    width: 99%;
7334
    height: 100px;
7335
    border: 1px solid #aaa;
7336
}
7337

    
7338
.model-form .form-field {
7339
    margin-bottom: 10px;
7340
}
7341

    
7342
.model-form label {
7343
    display: block;
7344
    color: #406A7D;
7345
    font-size: 1.1em;
7346
    margin: 0px 0 5px 0;
7347
}
7348

    
7349
.model-form .inline label {
7350
    float: left;
7351
    margin-right: 10px;
7352
    margin-top: 15px !important;
7353
}
7354

    
7355
.model-form input.long {
7356
    width: 400px;
7357
}
7358

    
7359
.model-form .inline input {
7360
    width: auto;
7361
    margin-top: 10px;
7362
}
7363

    
7364
.model-form .inline select {
7365
    width: auto;
7366
    margin-top: 7px;
7367
}
7368

    
7369
.model-form .inline .errors,
7370
.model-form .inline .field-desc {
7371
    clear: both;
7372
}
7373

    
7374
.model-action.disabled {
7375
    background-color: #aaa;
7376
    border-color: #aaa;
7377
    cursor: default;
7378
}
7379
.model-action.disabled:hover {
7380
    background-color: #aaa;
7381
    border-color: #aaa;
7382
}
7383

    
7384
.model-action:hover {
7385
    background-color: #aaa;
7386
}
7387

    
7388
.model-action:hover {
7389
    background-color: #F95;
7390
    border-color: #F95;
7391
}
7392

    
7393
.model-action.in-progress {
7394
    background-color: #aaa;
7395
    color: #fff;
7396
    border-color: #aaa;
7397
    background-image: url("../images/icons/indicators/small/progress.gif") !important;
7398
}
7399

    
7400
.model-action.add-generate {
7401
    background-image: url("../images/option-action-generate-ssh.png");
7402
}
7403

    
7404
.model-action.add {
7405
    background-image: url("../images/option-action-add.png");
7406
    padding-right: 20px !important;
7407
}
7408

    
7409
.model-action {
7410
    float: right;
7411
    background-color: #FF7F2A;
7412
    color: #fff;
7413
    padding: 6px 8px;
7414
    margin-left: 10px;
7415
    cursor: pointer;
7416
    padding-right: 30px;
7417
    background-position: right center;
7418
    background-repeat: no-repeat;
7419
    background-clip: border-box;
7420
    border-right: 5px solid #FF7F2A;
7421
    font-size: 0.9em;
7422
}
7423

    
7424
.overlay-public-key-create .error-msg {
7425
    margin-bottom: 5px;
7426
}
7427

    
7428
.model-form.public-key textarea {
7429
  height: 125px;
7430
}
7431

    
7432
.model-notice {
7433
    margin-bottom: 10px;
7434
}
7435

    
7436
.model-notice p.message {
7437
    margin: 0;
7438
    padding: 0; 
7439
    border: 2px solid #444;
7440
    padding: 4px;
7441
    background-color: #efefef;
7442
    line-height: 1.7em;
7443
    padding: 6px;
7444
}
7445

    
7446
.model-notice p.message .download {
7447
    color: #fff;
7448
    background-color: #FF7F2A;
7449
    border: 1px solid #F95;
7450
    padding: 3px;
7451
    cursor: pointer;
7452
}
7453

    
7454

    
7455
.model-notice p.message.success {
7456
    color: #447821;
7457
    background-color: #AADE87;
7458
    border: 1px solid #447821;
7459
}
7460

    
7461
#public-keys-list-view .model-item textarea.content {
7462
  width: 270px;
7463
  max-width: 380px;
7464
  background-color: transparent;
7465
  font-family: monospace;
7466
  font-size: 1em;
7467
  border: none;
7468
  overflow-y: hidden;
7469
  overflow-x: hidden;
7470
  height: 185px;
7471
  margin: 10px 0;
7472
  padding: 10px;
7473
  border: 1px solid #ddd;
7474
  background-color: #efefef;
7475
}
7476

    
7477

    
7478
.model-rename-view .edit {}
7479

    
7480
.model-rename-view .edit-btn {
7481
  display: none;
7482
  background-repeat: no-repeat;
7483
  font-size: 75%;
7484
  font-weight: normal;
7485
  margin-left: 10px;
7486
  padding-left: 10px;
7487
  text-align: left;
7488
  cursor: pointer;
7489
  color: #3D3D3D;
7490
  margin-top: 0.4em;
7491
  background-image: url("../images/pencil.png");
7492
  background-position: 0 0px;
7493
  width: 10px;
7494
  height: 7px;
7495
}
7496

    
7497
.model-rename-view:hover .edit-btn {
7498
  display: inline;
7499
}
7500

    
7501
.model-rename-view input {
7502
  border: 1px solid #aaaaaa;
7503
  font-size: 85%;
7504
  padding: 2px;
7505
  width: 207px;
7506
}
7507

    
7508
.model-rename-view .value {}
7509

    
7510
.model-rename-view .name {}
7511

    
7512
.model-rename-view .rename-actions {
7513
  float: right;
7514
  width: 40px;
7515
  position: relative;
7516
  top: 1px;
7517
  left: -36px;
7518
}
7519

    
7520
.model-rename-view .rename-actions .btn {
7521
  float: left;
7522
  height: 16px;
7523
  width: 16px;
7524
  cursor: pointer;
7525
}
7526

    
7527
.model-rename-view .rename-actions .btn.confirm {
7528
  background-image: url("../images/save.png"); 
7529
  margin-left: 3px;
7530
}
7531

    
7532
.model-rename-view .rename-actions .btn.cancel {
7533
  background-image: url("../images/cancel.png"); 
7534
  margin-left: 3px;
7535
}
7536

    
7537
.model-rename-view .rename-actions .btn.confirm:hover {
7538
  background-color: #84b7d0;
7539
}
7540

    
7541
.model-rename-view .rename-actions .btn.cancel:hover {
7542
  background-image: url("../images/cancel-onhover.png"); 
7543
}
7544

    
7545

    
7546
.select-item input {
7547
  cursor: pointer;
7548
}
7549

    
7550
.select-item {
7551
  font-size: 12px;
7552
  padding: 5px 4px;
7553
  margin-bottom: 3px;
7554
  background-color: #efefef;
7555
  cursor: pointer;
7556
}
7557

    
7558
.select-item.selected {
7559
  background-color: #FF7F2A;
7560
}
7561

    
7562
.select-item.selected * {
7563
  color: #fff;
7564
}
7565

    
7566
.steps-container .floating-ips .collection {
7567
}
7568

    
7569
.ip-port-view .title {
7570
  font-weight: normal !important;
7571
}
7572

    
7573
.pane-view .title.floating-ip {
7574
  font-weight: bold !important;
7575
}
7576

    
7577
.items-list.floating-ips {
7578
  margin-top: -5px;
7579
}
7580

    
7581
.select-item.floating-ip.not-available {
7582
  background-image: none;
7583
}
7584

    
7585
.select-item.floating-ip.create.no-available {
7586
  background-image: url("../images/option-action-add.png");
7587
}
7588

    
7589
.select-item.floating-ip.create {
7590
  padding-left: 34px;
7591
  margin-bottom: 5px;
7592
  background-image: url("../images/option-action-add-dark.png");
7593
  background-repeat: no-repeat;
7594
  background-position: 9px 7px;
7595
}
7596

    
7597
.select-item.floating-ip.selected * {
7598
  color: #222 !important;
7599
  font-weight: bold;
7600
}
7601

    
7602
.select-item.floating-ip {
7603
  border-left: 10px solid #efefef;
7604
  background-color: #ddd;
7605
  margin-bottom: 0;
7606
  border-bottom: 1px solid #efefef;
7607
}
7608

    
7609
.select-item.private-network .name {
7610
  float: left;
7611
  width: 50%;
7612
}
7613

    
7614
.select-item.vm .status .indicators {
7615
  width: 60px;
7616
  float: left;
7617
  margin: 0px 0 0 0;
7618
}
7619

    
7620
.select-item.vm .status span {
7621
  text-align: right;
7622
  display: block;
7623
  width: 100px;
7624
  float: left;
7625
  font-size: 0.9em;
7626
  margin-top: 2px;
7627
}
7628

    
7629
.select-item.vm .status {
7630
  float: right;
7631
  margin-right: 0px;
7632
  width: 170px;
7633
}
7634

    
7635
.select-item.private-network .cidr {
7636
  float: right;
7637
  width: 40%;
7638
  font-size: 0.9em;
7639
  text-align: right;
7640
  margin-top: 3px;
7641
}
7642

    
7643
.select-item .name {
7644
  float: left;
7645
  width: 90%;
7646
}
7647

    
7648
.select-item .ico {
7649
  float: left;
7650
  width: 5%;
7651
}
7652

    
7653
.select-item .checkbox {
7654
  float: left;
7655
  width: 5%;
7656
}