Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (139.1 kB)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
308
#createcontainer a {
309
}
310

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
1032
.state {
1033
}
1034

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

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

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

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

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

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

    
1063
div.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
  background-color: #C1CED4;
5427
  background-image: url("../images/down-arrow-lighter.png");
5428
  border-right-color: #C1CED4;
5429
}
5430

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
5540
.form-action .create,
5541
.form-action .submit {
5542

    
5543
}
5544

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

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

    
5557
#createvm-overlay-content {
5558
    padding: 0;
5559
}
5560

    
5561
.create-vm .image-details.selected .size {
5562

    
5563
}
5564

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

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

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

    
5581

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

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

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

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

    
5615
.create-vm .step-cont {
5616
    margin: 15px;
5617
}
5618

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

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

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

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

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

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

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

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

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

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

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

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

    
5695
.create-vm p.desc {
5696
    font-size: 0.8em;
5697
    color: #888;
5698
    margin-bottom: 10px;
5699
}
5700

    
5701
.create-vm li.role .values .val:hover {
5702
    background-color: #eee;
5703
}
5704
.create-vm li.role .values .val.selected,  .create-vm li.role .values .val.selected:hover {
5705
    color: #fff;
5706
    background-color: #FF9955;
5707
}
5708

    
5709
.create-vm .images-filter-cont, .create-vm .flavors-predefined-cont {
5710
    width: 18%;
5711
    padding-right: 4%;
5712
    float:left;
5713
    border-right: 1px solid #A1C8DB;
5714
    overflow: auto;
5715
}
5716

    
5717
.create-vm .flavor-options-cont {
5718
    width: 74%;
5719
    float: left;
5720
    margin-left: 20px;
5721
}
5722

    
5723
.create-vm .flavor-options-cont .flavor-options li:hover {
5724
    background-image:-webkit-linear-gradient(top, #E8F4FA, #D1E7F0);
5725
    background-image:-o-linear-gradient(top, #E8F4FA, #D1E7F0);
5726
    background-image:-moz-linear-gradient(top, #E8F4FA, #D1E7F0);
5727
    background-image:linear-gradient(top, #E8F4FA, #D1E7F0);
5728
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8F4FA', endColorstr='#D1E7F0', GradientType=0);
5729
}
5730

    
5731
.create-vm .flavor-options-cont .flavor-options li.disabled * {
5732
    color: #eee !important;
5733
}
5734

    
5735
.create-vm .flavor-options-cont .flavor-options li.disabled {
5736
    background-image:linear-gradient(top, #aaa, #ddd);
5737
    background-image:-webkit-linear-gradient(top, #aaa, #ddd);
5738
    background-image:-o-linear-gradient(top, #aaa, #ddd);
5739
    background-image:-moz-linear-gradient(top, #aaa, #ddd);
5740
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#dddddd', GradientType=0);
5741
}
5742

    
5743
.create-vm .flavor-options-cont .flavor-options li.selected {
5744
    background-color: #FF9955;
5745
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5746
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5747
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5748
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5749
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9955', endColorstr='#E88B4D', GradientType=0);
5750
    border: 1px solid #C97943;
5751
}
5752

    
5753
.create-vm .flavor-options-cont .flavor-options li.selected.disabled {
5754
    background-color: #AAA;
5755
    background-image:linear-gradient(top, #AAA, #E88B4D);
5756
    background-image:-webkit-linear-gradient(top, #AAA, #E88B4D);
5757
    background-image:-o-linear-gradient(top, #AAA, #E88B4D);
5758
    background-image:-moz-linear-gradient(top, #AAA, #E88B4D);
5759
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AAAAAA', endColorstr='#E88B4D', GradientType=0);
5760
    border: 1px solid #999;
5761
}
5762

    
5763
.create-vm .predefined-list li.disabled {
5764
    color: #ddd !important;
5765
}
5766

    
5767
.create-vm .flavor-options-cont .flavor-options li {
5768
    display: block;
5769
    float: left;
5770
    margin-right: 10px;
5771
    margin-bottom: 9px;
5772
    padding: 9px 14px;
5773
    border: 1px solid #aaa;
5774
    background-image:-webkit-linear-gradient(top, #D1E7F0, #E8F4FA);
5775
    background-image:-o-linear-gradient(top, #D1E7F0, #E8F4FA);
5776
    background-image:-moz-linear-gradient(top, #D1E7F0, #E8F4FA);
5777
    background-image:linear-gradient(top, #D1E7F0, #E8F4FA);
5778
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1E7F0', endColorstr='#E8F4FA', GradientType=0);
5779
}
5780

    
5781
.create-vm .flavor-opts-list.compact li {
5782
    padding: 7px 9px;
5783
    margin-right: 7px;
5784
}
5785

    
5786
.create-vm .flavor-options-cont .flavor-options {
5787
    margin-bottom: 2px;
5788
}
5789

    
5790

    
5791
.create-vm .flavor-options .metric {
5792
    font-size: 0.8em;
5793
    margin-left: 2px;
5794
}
5795

    
5796
.create-vm .flavor-options span.available {
5797
  font-size: 0.8em;
5798
  font-weight: normal;
5799
  margin-left: 5px;
5800
}
5801

    
5802
.create-vm .flavor-options span.title {
5803
    color: #444;
5804
}
5805

    
5806
.create-vm .flavor-options span.desc {
5807
    display: block;
5808
    color: #aaa;
5809
    font-weight: normal;
5810
    font-size: 0.8em;
5811
    float: right;
5812
    margin-top: 4px;
5813
}
5814

    
5815
.disktip {
5816
    padding: 4px;
5817
    top: 20px;
5818
}
5819

    
5820
.create-vm .flavor-options .flavors-disk-template-list {
5821
    position: relative;
5822
}
5823

    
5824
.create-vm .flavor-options .disk_template.option {
5825
    z-index: 10;
5826
    min-width: 50px;
5827
    text-align: center;
5828
}
5829

    
5830
/*0 position is -470px*/
5831
.create-vm .flavor-options .disk-template-description {
5832
    font-size: 0.8em;
5833
    color: #444;
5834
    background-image: url("../images/horizontal-pointer.png");
5835
    background-repeat: repeat-x;
5836
    background-position: -470px 0;
5837
    padding-top: 15px;
5838
    margin-top: -10px;
5839
    font-style: italic;
5840
    display:block;
5841
    overflow: auto;
5842
    padding-bottom: 0px;
5843
    margin-bottom: 7px;
5844
    width: 100%;
5845
}
5846

    
5847
.create-vm .flavor-options .disk_template.option .description {
5848
    display: none;
5849
    position: absolute;
5850
    bottom: -20px;
5851
    left:0;
5852
    color: #888;
5853
    font-style: italic;
5854
    display: block;
5855
    background-color: #fff;
5856
    width: 100%;
5857
    text-align: left;
5858
    z-index: 0;
5859
    border-top: 1px solid #ddd;
5860
    padding-top: 3px;
5861
    display: none;
5862
}
5863

    
5864
.create-vm .flavor-options .selected .value {
5865
    color: #FFF;
5866
}
5867

    
5868
.create-vm .flavor-options .value {
5869
    font-weight: bold;
5870
    color: #5CA1C0;
5871
}
5872

    
5873
.create-vm .flavor-options-cont h4 {
5874
    border-bottom: 1px solid #A1C8DB;
5875
    padding-bottom: 5px;
5876
}
5877

    
5878
.create-vm .images-info-cont {
5879
    width: 28%;
5880
    padding-left: 3%;
5881
    float: left;
5882
    border-left: 1px solid #A1C8DB;
5883
}
5884

    
5885
.create-vm .select-image.wide .show-details {
5886
    display: inline;
5887
}
5888

    
5889
.create-vm .select-image .images-info-cont .hide {
5890
    display: none;
5891
}
5892

    
5893
.create-vm .select-image.wide .images-info-cont .hide {
5894
    display: block;
5895
    float: right;
5896
    position: absolute;
5897
    right: 10px;
5898
    top: 10px;
5899
    font-size: 0.8em;
5900
    text-decoration: underline;
5901
    color: #5CA1C0;
5902
    cursor: pointer;
5903
}
5904

    
5905
.create-vm .select-image.wide .images-list-cont {
5906
    width: 74%;
5907
    padding-right: 0;
5908
}
5909

    
5910
.create-vm .select-image.wide .images-info-cont .description .title {
5911
    display: none;
5912
    float: none;
5913
}
5914

    
5915
.create-vm .select-image.wide .images-info-cont .description p {
5916
    background-color: #fff;
5917
    border: 1px solid #ddd;
5918
    padding: 10px;
5919
    float: none;
5920
}
5921

    
5922
.create-vm .select-image.wide .selected .size {
5923
    color: #FFF !important;
5924
}
5925

    
5926
.create-vm .select-image.wide .image-details .size {
5927
    color: #5CA1C0;
5928
    position: absolute;
5929
    top: 5px;
5930
}
5931

    
5932
.create-vm .select-image.wide .images-info-cont h3 {
5933
    color: #5CA1C0;
5934
    margin: 10px 0;
5935
    margin-top: 5px;
5936
    text-align: left;
5937
    font-size: 0.9em;
5938
}
5939

    
5940
.create-vm .select-image.wide .images-info-cont .description p {
5941
    height: 50px;
5942
}
5943

    
5944
.create-vm .select-image.wide .images-info-cont .description {
5945
    width: 100% !important;
5946
    float: none !important;
5947
    background-color: transparent !important;
5948
    padding: 0 !important;
5949
    font-size: 1.1em;
5950
}
5951
.create-vm .select-image.wide .images-info-cont .extra-details {
5952
    height: 160px;
5953
    overflow-y: scroll;
5954
    padding-right: 15px;
5955
}
5956

    
5957
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail.extra-meta .title .custom {
5958
    display: inline-block;
5959
}
5960

    
5961
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail.extra-meta .title {
5962
    background-color: #999 !important;
5963
    border-color: #888 !important;
5964
}
5965
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail .custom {
5966
    float: right;
5967
    display: none;
5968
    font-size: 0.8em;
5969
    margin-left: 10px;
5970
    color: #DDD;
5971
    margin-top: 2px;
5972
}
5973

    
5974
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail {
5975
    padding: 0px;
5976
    background-color: transparent;
5977
    margin-bottom: 4px;
5978
}
5979

    
5980
.create-vm .select-image.wide .images-info-cont .extra-details .title {
5981
    float: left;
5982
    display: block;
5983
    width: 39%;
5984
    padding: 1%;
5985
    background-color: #5CA1C0;
5986
    color: #fff;
5987
    border: 1px solid #4F8DAA;
5988
    font-size: 0.8em;
5989
}
5990

    
5991
.create-vm .select-image.wide .images-info-cont .extra-details .value {
5992
    float: right;
5993
    display: block;
5994
    width: 55%;
5995
    padding: 1%;
5996
    border: none;
5997
    background-color: #FFF;
5998
    color: #444;
5999
    border: 1px solid #ddd;
6000
    margin-bottom: 0px;
6001
    font-size: 0.8em;
6002
}
6003

    
6004

    
6005
.create-vm .select-image.wide .images-info-cont .image-detail {
6006
}
6007

    
6008
.create-vm .select-image.wide ul.images-list {
6009
    height: 310px;
6010
    overflow-y: scroll;
6011
    padding-right: 3%;
6012
}
6013

    
6014
.flavors-predefined-cont {
6015

    
6016
}
6017

    
6018
.flavor-options-cont {
6019
}
6020

    
6021
.create-vm .select-image.wide .images-info-cont {
6022
    position: absolute;
6023
    width: 88%;
6024
    background-color: #DAE9F0;
6025
    padding: 2%;
6026
    border-left: none;
6027
    height: 320px;
6028
    box-shadow: 0px 0px 2px #aaa;
6029
    -moz-box-shadow: 0px 0px 2px #aaa;
6030
    -webkit-box-shadow: 0px 0px 2px #aaa;
6031
    display: none;
6032
}
6033

    
6034

    
6035
.create-vm .images-info-cont h4, .create-vm .create-step-cont .param h4{
6036
    color: #FF9955;
6037
    margin-bottom: 1em;
6038
    font-size: 1.2em;
6039
    text-indent: -20px;
6040
    padding-right: 58px;
6041
    margin-left: 20px;
6042
}
6043

    
6044
.create-vm .images-info-cont span.title {
6045
    color: #4085A5;
6046
    display: block;
6047
    margin-bottom: 2px;
6048
    font-size: 0.8em;
6049
}
6050

    
6051
.create-vm .type-filter li {
6052
    font-size: 0.8em;
6053
    /*font-weight: bold;*/
6054
    padding: 4px;
6055
    margin-bottom: 0px;
6056
    color: #FF7F2A;
6057
}
6058

    
6059
.create-vm .images-list li {
6060
    min-height: 30px;
6061
}
6062
.create-vm .images-list .image-details:hover {
6063
    background-color: #eee;
6064
}
6065

    
6066
.create-vm .images-list .image-details.selected:hover {
6067
    background-color: #FF7F2A;
6068
}
6069

    
6070
.create-vm .images-list .image-details.selected {
6071
    /*font-weight: bold;*/
6072
}
6073

    
6074
.create-vm .images-list .image-details {
6075
    padding: 6px;
6076
    margin-bottom:1px;
6077
    position: relative;
6078
}
6079

    
6080
.create-vm .images-list .image-details img {
6081
    vertical-align: middle;
6082
    margin-right: 10px;
6083
}
6084

    
6085
.create-vm .images-info-cont .image-detail:last-child p {
6086
    border-bottom: none;
6087
}
6088

    
6089
.create-vm .images-info-cont h4 img {
6090
    vertical-align: middle;
6091
    margin-right: 7px;
6092
    margin-bottom: 5px;
6093
}
6094

    
6095
.create-vm .images-info-cont .description p {
6096
    font-size: 0.8em;
6097
}
6098

    
6099
.create-vm .images-info-cont p {
6100
    margin-bottom: 7px;
6101
    font-size: 0.9em;
6102
    border-bottom: 1px solid #A1C8DB;
6103
    padding-bottom: 7px;
6104
}
6105

    
6106
.create-vm .step-header {
6107
    padding-bottom:0;
6108
    position: relative;
6109
}
6110

    
6111
.create-vm .step-header .header-step .info span.subtitle {
6112
    font-size: 1.2em;
6113
    color: #fff;
6114
    font-weight: bold;
6115
}
6116

    
6117
.create-vm .step-header .header-step .info span {
6118
    float: none;
6119
    text-align: right;
6120
}
6121

    
6122
.create-vm .step-header .header-step .info {
6123
    position: absolute;
6124
    right: 15px;
6125
    top: 20px;
6126
    font-size: 0.8em;
6127
}
6128

    
6129
.create-vm .step-header .header-step span {
6130
    float: left;
6131
    display: block;
6132
}
6133

    
6134
.create-vm .steps-container {
6135
    width: 2000em;
6136
}
6137

    
6138
.create-vm .step-header .header-step .title {
6139
    margin-top: 20px;
6140
    font-size: 1em;
6141
    margin-left: 10px;
6142
}
6143

    
6144
#createvm-overlay-content {
6145
    width: 624px;
6146
    overflow: hidden;
6147
}
6148

    
6149
.create-vm .steps-history .steps-history-cont.current .title {
6150
    display: block;
6151
    top: 23px;
6152
    left: 43px;
6153
    font-size: 1.2em;
6154
    color: #ffffff;
6155
    font-weight: bold;
6156
    font-family: 'Ubuntu', sans-serif !important;
6157
}
6158

    
6159
.create-vm .steps-history .steps-history-cont.current .subnum {
6160
    display: none;
6161
    float: none;
6162
    font-size: 0.9em;
6163
    font-family: 'Ubuntu', sans-serif  !important;
6164
}
6165

    
6166
.create-vm .steps-history .steps-history-cont.current .subtitle,
6167
.create-vm .steps-history .steps-history-cont.current .description {
6168
    font-family: 'Ubuntu', sans-serif  !important;
6169
}
6170

    
6171
.create-vm .steps-history .steps-history-cont.current .info {
6172
    display: block;
6173
    font-family: 'Ubuntu', sans-serif !important;
6174
}
6175

    
6176
.create-vm .steps-history .steps-history-cont.completed .title,
6177
.create-vm .steps-history .steps-history-cont.completed .num {
6178
    color: #A1C8DB;
6179
}
6180

    
6181
.create-vm .steps-history .steps-history-cont.completed {
6182
    background-color: #4085A5;
6183
    color: #fff;
6184
    cursor: pointer;
6185
}
6186

    
6187
.create-vm .steps-history .steps-history-cont.completed .steps-history-step {
6188
    background-image: url("../images/check.png");
6189
}
6190

    
6191
.create-vm .steps-history .steps-history-cont.current .steps-history-step {
6192
    width: 320px;
6193
}
6194

    
6195
.create-vm .steps-history .steps-history-cont.current .num {
6196
    color: #fff;
6197
}
6198

    
6199
.create-vm .steps-history .steps-history-cont.current .info {
6200
    color: #4085A5;
6201
    font-size: 0.8em;
6202
}
6203

    
6204
.create-vm .steps-history .steps-history-cont.current {
6205
    background-color: #A1C8DB;
6206
    color: #fff;
6207
    width: 416px;
6208
}
6209

    
6210
.create-vm .steps-history-step {
6211
    padding: 4px;
6212
    padding-left: 7px;
6213
    font-size: 1em;
6214
    font-family: 'Ubuntu', sans-serif  !important;
6215
    margin-right: 5px;
6216
    padding-top: 12px;
6217
    background-position: right 30px;
6218
    background-image: none;
6219
    background-repeat: no-repeat;
6220
}
6221

    
6222
.create-vm .steps-history {
6223
    background-color: #4085A5;
6224
}
6225

    
6226
.create-vm .steps-history .steps-history-cont.last {
6227
    border-right: none;
6228
}
6229

    
6230
.create-vm .steps-history .steps-history-cont .num {
6231
    margin-left: 5px;
6232
    margin-top: -10px;
6233
    padding-bottom: 10px;
6234
}
6235

    
6236
.create-vm .steps-history .steps-history-cont .title {
6237
    display: none;
6238
    position: absolute;
6239
    bottom: 0px;
6240
    text-align: center;
6241
    padding-bottom: 2px;
6242
    left:0;
6243
    width: 55px;
6244
    margin-left:0;
6245
    margin-top:0;
6246
    font-size: 0.8em;
6247
}
6248

    
6249
.create-vm .steps-history .steps-history-cont .subnum,
6250
.create-vm .steps-history .steps-history-cont .info {
6251
    display: none;
6252
}
6253

    
6254
.create-vm .steps-history .steps-history-cont {
6255
    height: 70px;
6256
    width: 51px;
6257
    float: left;
6258
    color: #fff;
6259
    border-right: 1px solid #A1C8DB;
6260
    color: #A1C8DB;
6261
    background-color: #4085A5;
6262
    background-position: center right;
6263
    background-image: none;
6264
    background-repeat: no-repeat;
6265

    
6266
    -webkit-transition: background-color .15s ease-in;
6267
    -o-transition: background-color .15s ease-in;
6268
    -moz-transition: background-color .15s ease-in;
6269
    transition: background-color .15s ease-in;
6270

    
6271
    border-bottom: 1px solid #aaa;
6272
}
6273

    
6274
.create-vm .step-header .header-step .num {
6275
    color: #225871;
6276
    font-size: 4em;
6277
    margin-bottom: -5px;
6278
    font-family: 'Ubuntu', sans-serif;
6279
    font-weight: normal !important;
6280
}
6281

    
6282
.create-vm .step-header .header-step {
6283
    color: #;
6284
    margin-bottom: -6px;
6285
    width: 25%;
6286
    padding-left: 0%;
6287
    display: block;
6288
    float: left;
6289
}
6290

    
6291
.create-vm .step-header .header-step.current {
6292
    color: #387693;
6293
}
6294

    
6295
.create-vm .image-filters-title {
6296
    margin-top: 1em;
6297
    margin-bottom: 0.5em;
6298
}
6299

    
6300
.create-vm .create-step-cont span.clear {
6301
    font-size: 0.8em;
6302
    font-weight: bold;
6303
    color: #A1C8DB;
6304
    display: block;
6305
}
6306

    
6307
.create-vm .category-filters li {
6308
    float:left;
6309
    display: block;
6310
    padding: 4px;
6311
    background-color: #eee;
6312
    margin-right: 5px;
6313
    font-size: 0.9em;
6314
    margin-bottom: 5px;
6315
}
6316

    
6317
.create-vm .content-cont {
6318
    height: 340px;
6319
    overflow: auto;
6320
}
6321

    
6322
.create-vm .vm-confirm .confirm-params span.cval {
6323
    margin-left: 8px;
6324
    color: #444;
6325
}
6326

    
6327
.create-vm .vm-confirm .confirm-params span.ckey {
6328
    color: #4085A5;
6329
    font-weight: bold;
6330
}
6331

    
6332
.create-vm .vm-confirm .confirm-params {
6333
    margin-bottom: 15px;
6334
}
6335

    
6336
.create-vm .vm-confirm h3.vm-name {
6337
    background-repeat: no-repeat;
6338
    background-position: left center;
6339
    font-size: 1.4em;
6340
    padding-left: 1.45em;
6341
    color: #4085A5;
6342
}
6343

    
6344
.create-vm .images-list-cont h4 a {
6345
    margin-top: 3px;
6346
    margin-right: -2px !important;
6347
}
6348
.create-vm .images-list-cont h4 a,
6349
.create-vm .list-cont h4 a {
6350
    font-size: 0.8em;
6351
    font-weight: normal;
6352
    margin-right: 5px;
6353
    float: right;
6354
    color: #FF7F2A;
6355
}
6356

    
6357
.create-vm .confirm-params {
6358
    overflow: auto;
6359
}
6360

    
6361
.create-vm .vm-confirm .ssh.confirm-params {
6362
    max-height: 150px;
6363
}
6364

    
6365
.create-vm .personalize-cont .confirm-params {
6366
    max-height: 160px;
6367
    margin-right: 10px;
6368
}
6369

    
6370
.create-vm .personalize-cont,
6371
.create-vm .confirm-cont {
6372
    height: 250px;
6373
}
6374

    
6375
.create-vm .image-warning p {
6376
  width: 80%;
6377
  float: left;
6378
}
6379

    
6380
.create-vm .image-warning .untrusted-image-confirm:hover {
6381
  background-color: #7D674E;
6382
}
6383

    
6384
.create-vm .image-warning .untrusted-image-confirm {
6385
  display: inline-block;
6386
  padding: 5px;
6387
  background-color: #5C4D39;
6388
  color: #FFF;
6389
  width: 10%;
6390
  float: right;
6391
  margin-top: 4px;
6392
  margin-right: 2px;
6393
  cursor: pointer;
6394
  text-align: center;
6395
}
6396

    
6397
.create-vm .image-warning {
6398
  display: none;
6399
  background-color: #987249;
6400
  color: #fff;
6401
  padding: 10px 15px;
6402
  font-size: 0.9em;
6403
  border-top: 1px solid #AAA;
6404
}
6405

    
6406
.create-vm .create-step-cont .rename input.rename-field {
6407
    font-size: 1.4em;
6408
    padding: 5px;
6409
    width: 93%;
6410
    padding-left: 30px;
6411
    background-position: 7px center;
6412
    background-repeat: no-repeat;
6413
}
6414

    
6415
.create-vm .create-step-cont .rename label {
6416
    display: block;
6417
}
6418

    
6419
.create-vm .create-step-cont .personalize-conts,
6420
.create-vm .create-step-cont .confirm-conts {
6421
    margin-top: 20px;
6422
}
6423

    
6424
.create-vm .create-step-cont .personalize-cont,
6425
.create-vm .create-step-cont .confirm-cont {
6426
    width: 30%;
6427
    margin-right: 2%;
6428
    border-right: 1px solid #A1C8DB;
6429
    float: left;
6430
}
6431

    
6432
.create-vm .create-step-cont .confirm-cont ul li .title {
6433
    width: 55px;
6434
    float: left;
6435
}
6436

    
6437
.create-vm .create-step-cont .list-cont ul li .value {
6438
    float: right;
6439
    padding-top: 2px;
6440
    display: block;
6441
    width: 90px;
6442
    text-align: right;
6443
}
6444

    
6445
.create-vm .create-step-cont .list-cont ul li.flavor-disktype .value {
6446
    width: 65px;
6447
}
6448

    
6449
.create-vm .create-step-cont .list-cont ul li.image-description .value,
6450
.create-vm .create-step-cont .list-cont ul li.image-name .value {
6451
    float: none;
6452
    width: auto;
6453
    text-align:left;
6454
    width: auto;
6455
}
6456

    
6457
.create-vm .create-step-cont .list-cont ul li.image-name .value {
6458
  width: 120px;
6459
  text-indent: 0;
6460
  margin-left: 0;
6461
}
6462

    
6463
.create-vm .create-step-cont .list-cont ul li {
6464
    padding:0;
6465
    margin:0;
6466
    margin-bottom: 5px;
6467
    border-bottom: 1px solid #EEE;
6468
    padding-bottom: 7px;
6469
    margin-right: 10px;
6470
}
6471

    
6472
.create-vm .create-step-cont li.ssh-key-option .check,
6473
.create-vm .create-step-cont li.list-item-option .check {
6474
    float: right;
6475
    margin-right: 5px;
6476
    margin-top: 0px;
6477
}
6478

    
6479
.create-vm .create-step-cont li.ssh-key-option.selected {
6480
}
6481
.create-vm .create-step-cont li.ssh-key-option.selected:hover,
6482
.create-vm .create-step-cont li.list-item-option.selected:hover {
6483
    background-color: #F95;
6484
}
6485

    
6486
.create-vm .create-step-cont li.ssh-key-option:hover,
6487
.create-vm .create-step-cont li.list-item-option:hover {
6488
    background-color: #eee;
6489
}
6490

    
6491
.create-vm .create-step-cont li.ssh-key-option.selected {
6492
}
6493

    
6494
.create-vm .create-step-cont li.ssh-key-option,
6495
.create-vm .create-step-cont li.list-item-option {
6496
    padding: 6px !important;
6497
}
6498

    
6499
.create-vm .create-step-cont .list-cont.ssh {
6500
    width: 60%;
6501
}
6502

    
6503
.create-vm .create-step-cont .list-cont.meta h4 {
6504
    margin-right: 0;
6505
}
6506

    
6507
.create-vm .create-step-cont .list-cont.meta {
6508
    margin-right:0;
6509
    border-right: none;
6510
    width: 195px;
6511
    overflow: hidden;
6512
    overflow-y: auto;
6513
}
6514

    
6515
.create-vm .list-cont > h4 {
6516
    font-size: 1.2em;
6517
    margin-right: 10px;
6518
    border-bottom: 1px solid #A1C8DB;
6519
    padding-bottom: 5px;
6520
    color: #387693;
6521
}
6522

    
6523
.create-vm .list-cont .param.image-name {
6524
    margin-bottom: 0 !important;
6525
    border-bottom: none !important;
6526
}
6527

    
6528
.create-vm .list-cont .param h4 {
6529
    margin-bottom: 0px !important;
6530
    font-size: 1.1em !important; 
6531
}
6532

    
6533
.create-vm .list-cont .param {
6534
    margin-bottom: 7px !important;
6535
}
6536

    
6537
.create-vm .list-cont .value {
6538
    font-weight: bold;
6539
}
6540

    
6541
.create-vm .list-cont .param .value {
6542
    font-size: 0.9em;
6543
}
6544

    
6545
.create-vm .list-cont .param .title {
6546
    color: #387693;
6547
}
6548

    
6549
.create-vm .list-cont .image-description {
6550
    margin-left:0;
6551
}
6552

    
6553
.create-vm .list-cont .image-description .value {
6554
    font-weight: normal;
6555
    margin-left: 0 !important;
6556
}
6557

    
6558
.create-vm .list-cont .image-description .title {
6559
    display: none;
6560
    font-size: 0.8em;
6561
}
6562

    
6563
.create-vm .list-cont.meta .values span {
6564
    display:block;
6565
    float: left;
6566
    margin-right: 4px;
6567
    border: 1px solid #eee;
6568
    padding:3px;
6569
    margin-bottom: 4px;
6570
    font-size: 0.9em;
6571
}
6572

    
6573
.create-vm .list-cont.meta .key {
6574
    font-weight: bold;
6575
    font-size: 0.9em;
6576
    display: block;
6577
    margin-bottom: 5px;
6578
}
6579

    
6580
.create-vm .meta input {
6581
    font-size: 0.8em;
6582
}
6583

    
6584
.create-vm .network-select {
6585
  height: 278px;
6586
  overflow-y: scroll;
6587
  padding-right: 10px;
6588
}
6589

    
6590
.vm-connect .connect-cont {
6591
    margin-bottom: 20px;
6592
    border-bottom: 1px solid #A1C8DB;
6593
    padding-bottom: 20px;
6594
}
6595

    
6596
.vm-connect .connection-info {
6597
    padding-bottom: 0px;
6598
    margin-bottom: 0;
6599
    border-bottom: none;
6600
}
6601

    
6602
.vm-connect .connection-info .connect a {
6603
    color: #fff;
6604
}
6605

    
6606
.vm-connect .connection-info .connect {
6607
    background-color: #387693;
6608
    color: #fff;
6609
    padding: 10px;
6610
    font-size: 1.2em;
6611
    text-align: center;
6612
}
6613

    
6614
.clip-copy {
6615
    display: block;
6616
    width: 20px;
6617
    height: 20px;
6618
    position: absolute;
6619
    border: 1px solid #387693;
6620
    background-image: url("../images/clipboard.png");
6621
    background-repeat: no-repeat;
6622
    background-position: center;
6623
    cursor: pointer;
6624
    background-color: #A1C8DB;
6625
}
6626

    
6627
.password-cont .clip-copy { right: 10px; top: 8px;}
6628

    
6629

    
6630
input.has-errors {
6631
    border-color: #ff0000;
6632
}
6633

    
6634
.overlay .models-view .previous-view-link {
6635
    margin: -10px;
6636
    margin-bottom:10px;
6637
    padding: 10px 5px;
6638
    background-image: url("../images/left-arrow.png");
6639
    background-repeat: no-repeat;
6640
    background-position: 10px center;
6641
    padding-left: 20px;
6642
    background-color: #93D070;
6643
    cursor: pointer;
6644
    border-bottom: 1px solid #eee;
6645
    text-decoration: underline;
6646
}
6647

    
6648
.single .suspended-notice {
6649
  right: 98px;
6650
  top:2px;
6651
}
6652

    
6653
.icon .suspended-notice {
6654
  right: 192px;
6655
  top: 54px;
6656
}
6657

    
6658
.suspended-notice {
6659
  display: inline-block;
6660
  padding: 4px;
6661
  background-color: #8f1915;
6662
  cursor: pointer;
6663
  position: absolute;
6664
  color: #fff;
6665
  font-size: 0.6em;
6666
  display: none;
6667
}
6668

    
6669
.suspended .suspended-notice {
6670
  display: block;
6671
}
6672

    
6673
.suspended .action-indicator {
6674
  display: none !important;
6675
}
6676

    
6677
.trigger-resize {
6678
    background-image: url("../images/pencil-disabled.png");
6679
    background-position: right 2px;
6680
    background-repeat: no-repeat;
6681
    padding-right: 15px !important;
6682
    cursor: pointer;
6683
}
6684

    
6685
.can-resize .trigger-resize:hover {
6686
    text-decoration: underline;
6687
}
6688

    
6689
.can-resize .trigger-resize {
6690
    font-weight: bold;
6691
    background-image: url("../images/pencil.png");
6692
}
6693

    
6694
.vm-resize .flavor-options-cont {
6695
  float: none;
6696
  width: 100%;
6697
  margin: 0;
6698
  height: auto;
6699
}
6700

    
6701
#vm-resize-overlay-content .form-actions {
6702
  margin-top: 15px;
6703
}
6704

    
6705
#vm-resize-overlay-content .form-actions .warning {
6706
  width: 200px;
6707
  color: #800;
6708
  float: left;
6709
}
6710

    
6711
.form-action.shutdown {
6712
  background-color: #800;
6713
  margin-right: 10px;
6714
  border-color: #700;
6715
}
6716

    
6717
.form-action.disabled {
6718
  background-color: #ddd;
6719
  color: #aaa;
6720
  border-color: #999;
6721
  cursor: default;
6722
}
6723

    
6724
.overlay .form-actions .assign {
6725
  display: none;
6726
}
6727

    
6728

    
6729
.connect-ip #network-vms-select-content li.selected .options-object-cont {
6730
  background-image: none !important;
6731
}
6732

    
6733
.overlay.connect-ip .form-actions .assign {
6734
  display: block;
6735
}
6736

    
6737
.overlay.connect-ip .form-actions .create {
6738
  display: none;
6739
}
6740

    
6741
.overlay.connect-ip li.options-object .options-object-cont {
6742
  background-image: none !important; 
6743
}
6744

    
6745
.overlay-public-key-create .container {
6746
  font-size: 0.9em;
6747
}
6748

    
6749
/* Additional styles for views.ext module */
6750
.pane-view {
6751
  background-color: #EFF7FA;
6752
}
6753

    
6754
.collection-list-view .collection {
6755
  padding-top: 14px;
6756
}
6757

    
6758
.collection-list-view .collection .create-button {
6759
  margin-bottom: 15px;
6760
}
6761

    
6762
.collection-list-view .collection .create-button a {
6763
  display: inline-block;
6764
  color: black;
6765
  background-color: #FF7F2A;
6766
  cursor: pointer;
6767
  padding: 7px 24px;
6768
  text-decoration: none;
6769
  border-left: 15px solid #FF9955;
6770
  margin-left: -15px;
6771
  font-family: 'Open Sans', sans-serif;
6772
}
6773

    
6774
.pane-view .collection-list-view .model-view {
6775
  width: 100%;
6776
  background-color: transparent;
6777
  font-size: 75%;
6778
}
6779

    
6780
.pane-view .collection-list-view .model-view.actionpending .main-content-inner,
6781
.pane-view .collection-list-view .model-view.subactionpending .main-content-inner,
6782
.pane-view .collection-list-view .model-view.hovered .main-content-inner,
6783
.pane-view .collection-list-view .model-view:hover .main-content-inner {
6784
  background-color: #A1C8DB;
6785
}
6786

    
6787
.pane-view .collection-list-view .model-view .main-content.inner .state-indicator {
6788
  top: 5px;
6789
}
6790

    
6791
.pane-view .collection-list-view .model-view .main-content .state-indicator {
6792
  width: 50px;
6793
  position: absolute;
6794
  top: 30px;
6795
  right: 5px;
6796
}
6797

    
6798
.pane-view .collection-list-view .model-view .main-content .title {
6799
  font-weight: normal;
6800
}
6801

    
6802
.pane-view .collection-list-view .model-view .main-content {
6803
}
6804

    
6805
.pane-view .collection-list-view .model-view:last-child .main-content {
6806
  border-bottom: none;
6807
}
6808

    
6809
.pane-view .collection-list-view .model-view .main-content {
6810
  width: 520px;
6811
  padding-bottom: 5px;
6812
  margin-bottom: 5px;
6813
  float: left;
6814
  border-bottom: 1px solid #D1E7F0;
6815
}
6816

    
6817
.pane-view .collection-list-view .model-view .main-content-inner {
6818
  padding: 10px 20px;
6819
  padding-right: 10px;
6820
  /*overflow: hidden;*/
6821
}
6822

    
6823
.pane-view .collection-list-view .model-view .main-content .logo {
6824
  float: left;
6825
}
6826

    
6827
.pane-view .collection-list-view .model-view .main-content .entry-right {
6828
  position: relative;
6829
}
6830

    
6831
.pane-view .collection-list-view .model-view .main-content .entry {
6832
  width: 290px;
6833
  padding-top: 5px;
6834
  margin-left: 10px;
6835
  float: left;
6836
  position: relative;
6837
}
6838

    
6839
.model-item .actions-content.inline {
6840
  padding-top: 6px;
6841
  position: absolute;
6842
  right: 0px;
6843
  font-size: 1.2em;
6844
  height: 26px;
6845
  width: 182px;
6846
}
6847

    
6848
.pane-view .collection-list-view .model-view .main-content .actions-content {
6849
  width: 80px;
6850
  float: left;
6851
}
6852

    
6853
.pane-view .collection-list-view .model-item .link {
6854
  color: #4085A5;
6855
}
6856

    
6857
.collection .no-available a {
6858
  color: #aaa;
6859
}
6860

    
6861
.collection .select-item span.available {
6862
  font-size: 0.9em;
6863
  float: right;
6864
}
6865

    
6866
.collection span.no-available {
6867
}
6868

    
6869
.collection span.no-available {
6870
  float: right;
6871
}
6872

    
6873
.collection .no-available {
6874
  font-size: 0.8em;
6875
  color: #f00;
6876
}
6877

    
6878
.collection .empty-list {
6879
  padding: 10px;
6880
  font-size: 0.8em;
6881
  color: #333;
6882
}
6883

    
6884
.collection-list-view .items-sublist:first-child {
6885
  padding-top: 0;
6886
}
6887

    
6888
.collection-list-view .items-sublist {
6889
  padding-top: 10px;
6890
}
6891

    
6892
.collection-list-view .items-sublist:last-child {
6893
  margin-top: 20px;
6894
  border-top: 10px solid #DCEBF2;
6895
  margin-bottom: 0;
6896
}
6897

    
6898
.model-item .status-title {
6899
  text-align: right;
6900
  margin-right: 4px;
6901
  margin-top: 5px;
6902
  width: 150px;
6903
  position: absolute;
6904
  top:-4px;
6905
  right: 0;
6906
}
6907

    
6908
.model-item .status-indicator {
6909
  width: 65px;
6910
  position: absolute;
6911
  top: 16px;
6912
  right: 0;
6913
}
6914

    
6915
.model-item .actions-content {
6916
  width: 180px;
6917
  float: left;
6918
}
6919

    
6920
.model-item .actions-content .action-container .confirm-single .no,
6921
.model-item .actions-content .action-container .confirm-single .yes {
6922
  font-family: Arial, Helvetica, sans-serif;
6923
  width: 20px;
6924
  height: 16px;
6925
  padding: 2px 0;
6926
  float: left;
6927
  border: none;
6928
  margin: 0;
6929
  padding: 2px 0;
6930
  text-align: center;
6931
  font-size: inherit;
6932
}
6933

    
6934
.model-item .actions-content .action-container .confirm-single .no {
6935
  background-color: #FF9955;
6936
}
6937

    
6938
.model-item .actions-content .action-container .confirm-single .yes {
6939
  background-color: #FF7F2A;
6940
  width: 80px;
6941
}
6942

    
6943
.model-item .actions-content .action-container.warn .confirm-single .no:hover {
6944
  color: #fff;
6945
}
6946

    
6947
.model-item .actions-content .action-container.warn .confirm-single .no {
6948
  background-color: #CC0000;
6949
}
6950

    
6951
.model-item .actions-content .action-container.warn .confirm-single .yes {
6952
  background-color: #880000;
6953
  color: #fff;
6954
}
6955

    
6956
.model-item .actions-content .action-container.warn .confirm-single .yes:hover {
6957
  background-color: #CC0000;
6958
}
6959

    
6960
.model-item .actions-content .action-container .confirm-single {
6961
  display: none;
6962
  width: 100px;
6963
  float: right;
6964
  margin-right: -22px;
6965
  margin-top: -4px;
6966
}
6967

    
6968
.model-item .actions-content .action-container.selected .confirm-single {
6969
  display: block !important;
6970
}
6971

    
6972
.model-item.actionpending .actions-content .action-container.isactive,
6973
.model-item:hover .actions-content .action-container.isactive,
6974
/*.model-item.hovered .actions-content .action-container.isactive,*/
6975
.model-item .actions-content .action-container.selected {
6976
  display: block;
6977
}
6978

    
6979
.model-item.actionpending .nested-model-list .actions-content .action-container.isactive {
6980
  display: none;
6981
}
6982

    
6983
.model-item.actionpending .nested-model-list .model-item.actionpending .actions-content .action-container.isactive {
6984
  display: block;
6985
}
6986

    
6987
.model-item .actions-content .action-container.selected:hover {
6988
  background-color: transparent;
6989
  border-left: 4px solid #7DB4CD;
6990
  margin-left: 6px;
6991
}
6992

    
6993
.model-item .actions-content .action-container:hover a {
6994
  color: #fff;
6995
}
6996

    
6997
.model-item .actions-content .action-container:hover {
6998
  background-color: #A1C8DB;
6999
  border-left: 4px solid #7DB4CD;
7000
  margin-left: 6px;
7001
}
7002

    
7003
.model-item .actions-content .action-container.selected {
7004
}
7005

    
7006
.model-item .actions-content .action-container {
7007
  display: none; 
7008
}
7009

    
7010
.model-item .actions-content .action-container {
7011
  padding: 2px;
7012
  margin-bottom: 5px;
7013
  padding-left: 4px;
7014
  margin-left: 10px;
7015
  cursor: pointer;
7016
}
7017

    
7018
.model-item .status-active .status-indicator .indicator {
7019
  background-color: #63cf1c;
7020
}
7021

    
7022
.model-item .status-inactive .status-indicator .indicator {
7023
  background-color: #940606;
7024
}
7025

    
7026
.model-item .status-terminated .status-indicator .indicator {
7027
  background-color: #5E1616;
7028
}
7029

    
7030
.model-item .status-error .status-indicator .indicator {
7031
  background-color: #ff0000;
7032
}
7033

    
7034
.model-item .status-progress .status-indicator .indicator {
7035
  background-color: #FF7F2A;
7036
}
7037

    
7038
.model-item .status-indicator .indicator {
7039
  width: 10px;
7040
  height: 11px;
7041
  float: right;
7042
  background-color: #EFF7FA;
7043
  margin-right: 3px;
7044
}
7045

    
7046
/* vm sprites */
7047
.vm-icon.medium2 {
7048
  width: 30px;
7049
  height: 32px;
7050
}
7051

    
7052
.vm-icon.medium2.state1 {
7053
    background-position: 0px 0;
7054
}
7055

    
7056
.vm-icon.medium2.state2 {
7057
    background-position: -60px 0;
7058
}
7059

    
7060
.vm-icon.medium2.state3 {
7061
    background-position: -90px 0;
7062
}
7063

    
7064
.vm-icon.medium2.state4 {
7065
    background-position: -30px 0;
7066
}
7067

    
7068

    
7069
.vm-icon.medium {
7070
  width: 50px;
7071
  height: 54px;
7072
}
7073

    
7074
.vm-icon.medium.state1 {
7075
    background-position: 0px 0;
7076
}
7077

    
7078
.vm-icon.medium.state2 {
7079
    background-position: -100px 0;
7080
}
7081

    
7082
.vm-icon.medium.state3 {
7083
    background-position: -150px 0;
7084
}
7085

    
7086
.vm-icon.medium.state4 {
7087
    background-position: -50px 0;
7088
}
7089
/* end vm sprites */
7090

    
7091
/* ips */
7092
.ip-port-view .title {
7093
  width: 100%;
7094
}
7095

    
7096
.model-item .vm-name {
7097
  font-weight: bold;
7098
}
7099

    
7100
.nested-model-list {
7101
  position: relative;
7102
  top: 43px;
7103
  overflow: visible;
7104
  width: 531px;
7105
  margin-left: -41px;
7106
  margin-bottom: 39px;
7107
}
7108

    
7109
.entry.inline .nested-model-list {
7110
  font-size: 0.9em;
7111
}
7112

    
7113
.entry.inline .nested-model-list .model-item .outer {
7114
  width: 220px;
7115
}
7116

    
7117
.entry.inline .nested-model-list {
7118
  position: absolute;
7119
  top: 17px;
7120
  margin-left: -9px;
7121
  margin-bottom: 0;
7122
  width: 420px;
7123
}
7124

    
7125
.entry.inline .nested-model-list .inner.main-content {
7126
  margin-left: 0;
7127
}
7128

    
7129
.entry.inline .nested-model-list .model-item .inner.main-content .title,
7130
.entry.inline .nested-model-list .model-item .inner.main-content .subtitle {
7131
  left: 52px;
7132
}
7133

    
7134
.nested-model-list .collection {
7135
  padding: 0;
7136
}
7137

    
7138
.nested-model-list .model-item .outer {
7139
  width: 470px;
7140
  position: relative;
7141
}
7142

    
7143
.model-item .border i.remove,
7144
.empty-list i.add {
7145
    display: block;
7146
    color: #fff;
7147
    padding-left: 10%;
7148
    width: 90%;
7149
    padding-top: 0px;
7150
    font-weight: bold;
7151
    font-size: 1.4em;
7152
    cursor: pointer;
7153
    font-style: normal;
7154
}
7155

    
7156
.model-item .border i.remove {
7157
  font-size: 1em;
7158
  color: #BE5812;
7159
  padding-top: 1px;
7160
}
7161

    
7162
.empty-list.nested {
7163
  height: 30px;
7164
}
7165

    
7166
.empty-list .border2, 
7167
.nested-model-list .outer .border2 {
7168
  border-left: 3px solid #FB822F;
7169
  position: absolute;
7170
  height: 100%;
7171
  width: 1px;
7172
  left:0;
7173
  top:0;
7174
}
7175

    
7176
.empty-list .border2, 
7177
.nested-model-list .model-item:last-child .outer .border2 {
7178
  height: 69px;
7179
}
7180

    
7181
.empty-list .border, .nested-model-list .outer .border {
7182
  position: absolute;
7183
  top: 52px;
7184
  left: 0;
7185
  background-color: #FB822F;
7186
  height: 17px;
7187
  width: 91px;
7188
  z-index: 0;
7189
}
7190

    
7191
.empty-list .border {
7192
  top: 31px;
7193
}
7194

    
7195
.empty-list .border2 {
7196
  height: 31px;
7197
}
7198

    
7199
.nested-model-list .model-item .inner .model-logo {
7200
  position: relative;
7201
  z-index: 100;
7202
}
7203

    
7204
.model-item.actionpending .nested-model-list.proxy .model-item .inner.main-content,
7205
.model-item:hover .nested-model-list.proxy .model-item .inner.main-content,
7206
.model-item.hovered .nested-model-list.proxy .model-item .inner.main-content,
7207
.nested-model-list .model-item.actionpending .inner.main-content,
7208
.nested-model-list .model-item:hover .inner.main-content,
7209
.nested-model-list .model-item.hovered .inner.main-content {
7210
  background-color: #84B7D0;
7211
}
7212

    
7213
.entry.inline .model-item .inner,
7214
.entry.inline *:hover .model-item .inner,
7215
.entry.inline .model-item:hover .inner {
7216
  background-color: transparent !important;
7217
}
7218

    
7219
.nested-model-list .model-item:last-child .inner.main-content {
7220
  border-bottom: none;
7221
}
7222

    
7223
.nested-model-list .model-item .inner.main-content {
7224
  width: auto;
7225
  margin-bottom: 0;
7226
  float: none;
7227
  z-index: 0;
7228
  margin-left: 30px;
7229
  padding-bottom: 20px;
7230
  padding: 10px;
7231
  border-bottom: 1px solid #5CA1C0;
7232
  /*height: 59px;*/
7233
}
7234

    
7235
.nested-model-list .model-item .inner.main-content .no-device {
7236
  color: #ef0000;
7237
  position: absolute;
7238
  top: -20px;
7239
  left: -42px;
7240
  width: 200px;
7241
}
7242

    
7243
.nested-model-list .model-item .inner.main-content .subtitle {
7244
  position: absolute;
7245
  top: 27px;
7246
  left: 110px;
7247
  font-weight: normal;
7248
  font-size: 0.8em;
7249
}
7250

    
7251
.nested-model-list .model-item .inner.main-content .title {
7252
  position: absolute;
7253
  top: 10px;
7254
  left: 110px;
7255
  font-weight: bold;
7256
}
7257

    
7258
.model-item:hover .nested-model-list .actions-content .action-container.isactive {
7259
  display: none;
7260
}
7261

    
7262
.model-item:hover .nested-model-list .model-item.actionpending .actions-content .action-container.isactive {
7263
  display: block !important;
7264
}
7265

    
7266

    
7267
.model-item .actions-content .action-container.selected a {
7268
  color: #FF7F2A;
7269
}
7270

    
7271
.model-item:hover .nested-model-list.proxy .model-item .actions-content .action-container.selected,
7272
.model-item:hover .nested-model-list.proxy .model-item .actions-content .action-container.isactive,
7273
.model-item.hovered .nested-model-list.proxy .model-item .actions-content .action-container.selected,
7274
.model-item.hovered .nested-model-list.proxy .model-item .actions-content .action-container.isactive,
7275
.model-item:hover .nested-model-list .model-item .actions-content .action-container.selected,
7276
.model-item:hover .nested-model-list .model-item:hover .actions-content .action-container.isactive {
7277
  display: block !important;
7278
}
7279

    
7280
.pane-view .model-view .nested-model-list .model-item .actions-content {
7281
  position: absolute;
7282
  right: -180px;
7283
  top:0;
7284
  float: none;
7285
  display: block;
7286
  width: 180px;
7287
  height: 80px;
7288
}
7289

    
7290
/* networks */
7291
.nested-model-list .ip-addresses li {
7292
  margin-bottom: 8px;
7293
}
7294

    
7295
.nested-model-list .ip-addresses li .type {
7296
  margin-right: 3px;
7297
  vertical-align: middle;
7298
  color: #fff;
7299
  background-color: #4085A5;
7300
  padding: 3px;
7301
}
7302

    
7303
.nested-model-list .ip-addresses li .ip {
7304
  padding-top: 3px;
7305
}
7306

    
7307
.nested-model-list .ip-addresses {
7308
  padding-top: 0px;
7309
  font-size: 0.9em;
7310
  margin-left: 70px;
7311
  margin-top:-35px;
7312
  margin-bottom: 35px;
7313
}
7314

    
7315
.ports.nested-model-list.is-public .empty-list .border,
7316
.ports.nested-model-list.is-public .empty-list .border2 {
7317
  display: none !important;
7318
}
7319

    
7320
.network-ports-toggler {
7321
  position: absolute;
7322
  top: 30px;
7323
  left: 0px;
7324
}
7325

    
7326
.model-form-actions .form-action {
7327
  font-size: 1.1em !important;
7328
}
7329

    
7330
.model-form textarea {
7331
    width: 99%;
7332
    height: 100px;
7333
    border: 1px solid #aaa;
7334
}
7335

    
7336
.model-form .form-field {
7337
    margin-bottom: 10px;
7338
}
7339

    
7340
.model-form label {
7341
    display: block;
7342
    color: #406A7D;
7343
    font-size: 1.1em;
7344
    margin: 0px 0 5px 0;
7345
}
7346

    
7347
.model-form .inline label {
7348
    float: left;
7349
    margin-right: 10px;
7350
    margin-top: 15px !important;
7351
}
7352

    
7353
.model-form input.long {
7354
    width: 400px;
7355
}
7356

    
7357
.model-form .inline input {
7358
    width: auto;
7359
    margin-top: 10px;
7360
}
7361

    
7362
.model-form .inline select {
7363
    width: auto;
7364
    margin-top: 7px;
7365
}
7366

    
7367
.model-form .inline .errors,
7368
.model-form .inline .field-desc {
7369
    clear: both;
7370
}
7371

    
7372
.model-action.disabled {
7373
    background-color: #aaa;
7374
    border-color: #aaa;
7375
    cursor: default;
7376
}
7377
.model-action.disabled:hover {
7378
    background-color: #aaa;
7379
    border-color: #aaa;
7380
}
7381

    
7382
.model-action:hover {
7383
    background-color: #aaa;
7384
}
7385

    
7386
.model-action:hover {
7387
    background-color: #F95;
7388
    border-color: #F95;
7389
}
7390

    
7391
.model-action.in-progress {
7392
    background-color: #aaa;
7393
    color: #fff;
7394
    border-color: #aaa;
7395
    background-image: url("../images/icons/indicators/small/progress.gif") !important;
7396
}
7397

    
7398
.model-action.add-generate {
7399
    background-image: url("../images/option-action-generate-ssh.png");
7400
}
7401

    
7402
.model-action.add {
7403
    background-image: url("../images/option-action-add.png");
7404
    padding-right: 20px !important;
7405
}
7406

    
7407
.model-action {
7408
    float: right;
7409
    background-color: #FF7F2A;
7410
    color: #fff;
7411
    padding: 6px 8px;
7412
    margin-left: 10px;
7413
    cursor: pointer;
7414
    padding-right: 30px;
7415
    background-position: right center;
7416
    background-repeat: no-repeat;
7417
    background-clip: border-box;
7418
    border-right: 5px solid #FF7F2A;
7419
    font-size: 0.9em;
7420
}
7421

    
7422
.overlay-public-key-create .error-msg {
7423
    margin-bottom: 5px;
7424
}
7425

    
7426
.model-form.public-key textarea {
7427
  height: 125px;
7428
}
7429

    
7430
.model-notice {
7431
    margin-bottom: 10px;
7432
}
7433

    
7434
.model-notice p.message {
7435
    margin: 0;
7436
    padding: 0; 
7437
    border: 2px solid #444;
7438
    padding: 4px;
7439
    background-color: #efefef;
7440
    line-height: 1.7em;
7441
    padding: 6px;
7442
}
7443

    
7444
.model-notice p.message .download {
7445
    color: #fff;
7446
    background-color: #FF7F2A;
7447
    border: 1px solid #F95;
7448
    padding: 3px;
7449
    cursor: pointer;
7450
}
7451

    
7452

    
7453
.model-notice p.message.success {
7454
    color: #447821;
7455
    background-color: #AADE87;
7456
    border: 1px solid #447821;
7457
}
7458

    
7459
#public-keys-list-view .model-item textarea.content {
7460
  width: 270px;
7461
  max-width: 380px;
7462
  background-color: transparent;
7463
  font-family: monospace;
7464
  font-size: 1em;
7465
  border: none;
7466
  overflow-y: hidden;
7467
  overflow-x: hidden;
7468
  height: 185px;
7469
  margin: 10px 0;
7470
  padding: 10px;
7471
  border: 1px solid #ddd;
7472
  background-color: #efefef;
7473
}
7474

    
7475

    
7476
.model-rename-view .edit {}
7477

    
7478
.model-rename-view .edit-btn {
7479
  display: none;
7480
  background-repeat: no-repeat;
7481
  font-size: 75%;
7482
  font-weight: normal;
7483
  margin-left: 10px;
7484
  padding-left: 10px;
7485
  text-align: left;
7486
  cursor: pointer;
7487
  color: #3D3D3D;
7488
  margin-top: 0.4em;
7489
  background-image: url("../images/pencil.png");
7490
  background-position: 0 0px;
7491
  width: 10px;
7492
  height: 7px;
7493
}
7494

    
7495
.model-rename-view:hover .edit-btn {
7496
  display: inline;
7497
}
7498

    
7499
.model-rename-view input {
7500
  border: 1px solid #aaaaaa;
7501
  font-size: 85%;
7502
  padding: 2px;
7503
  width: 207px;
7504
}
7505

    
7506
.model-rename-view .value {}
7507

    
7508
.model-rename-view .name {}
7509

    
7510
.model-rename-view .rename-actions {
7511
  float: right;
7512
  width: 40px;
7513
  position: relative;
7514
  top: 1px;
7515
  left: -36px;
7516
}
7517

    
7518
.model-rename-view .rename-actions .btn {
7519
  float: left;
7520
  height: 16px;
7521
  width: 16px;
7522
  cursor: pointer;
7523
}
7524

    
7525
.model-rename-view .rename-actions .btn.confirm {
7526
  background-image: url("../images/save.png"); 
7527
  margin-left: 3px;
7528
}
7529

    
7530
.model-rename-view .rename-actions .btn.cancel {
7531
  background-image: url("../images/cancel.png"); 
7532
  margin-left: 3px;
7533
}
7534

    
7535
.model-rename-view .rename-actions .btn.confirm:hover {
7536
  background-color: #84b7d0;
7537
}
7538

    
7539
.model-rename-view .rename-actions .btn.cancel:hover {
7540
  background-image: url("../images/cancel-onhover.png"); 
7541
}
7542

    
7543

    
7544
.select-item input {
7545
  cursor: pointer;
7546
}
7547

    
7548
.select-item {
7549
  font-size: 12px;
7550
  padding: 5px 4px;
7551
  margin-bottom: 3px;
7552
  background-color: #efefef;
7553
  cursor: pointer;
7554
}
7555

    
7556
.select-item.selected {
7557
  background-color: #FF7F2A;
7558
}
7559

    
7560
.select-item.selected * {
7561
  color: #fff;
7562
}
7563

    
7564
.steps-container .floating-ips .collection {
7565
}
7566

    
7567
.ip-port-view .title {
7568
  font-weight: normal !important;
7569
}
7570

    
7571
.pane-view .title.floating-ip {
7572
  font-weight: bold !important;
7573
}
7574

    
7575
.items-list.floating-ips {
7576
  margin-top: -5px;
7577
}
7578

    
7579
.select-item.floating-ip.not-available {
7580
  background-image: none;
7581
}
7582

    
7583
.select-item.floating-ip.create.no-available {
7584
  background-image: url("../images/option-action-add.png");
7585
}
7586

    
7587
.select-item.floating-ip.create {
7588
  padding-left: 34px;
7589
  margin-bottom: 5px;
7590
  background-image: url("../images/option-action-add-dark.png");
7591
  background-repeat: no-repeat;
7592
  background-position: 9px 7px;
7593
}
7594

    
7595
.select-item.floating-ip.selected * {
7596
  color: #222 !important;
7597
  font-weight: bold;
7598
}
7599

    
7600
.select-item.floating-ip {
7601
  border-left: 10px solid #efefef;
7602
  background-color: #ddd;
7603
  margin-bottom: 0;
7604
  border-bottom: 1px solid #efefef;
7605
}
7606

    
7607
.select-item.private-network .name {
7608
  float: left;
7609
  width: 50%;
7610
}
7611

    
7612
.select-item.vm .status .indicators {
7613
  width: 60px;
7614
  float: left;
7615
  margin: 0px 0 0 0;
7616
}
7617

    
7618
.select-item.vm .status span {
7619
  text-align: right;
7620
  display: block;
7621
  width: 100px;
7622
  float: left;
7623
  font-size: 0.9em;
7624
  margin-top: 2px;
7625
}
7626

    
7627
.select-item.vm .status {
7628
  float: right;
7629
  margin-right: 0px;
7630
  width: 170px;
7631
}
7632

    
7633
.select-item.private-network .cidr {
7634
  float: right;
7635
  width: 40%;
7636
  font-size: 0.9em;
7637
  text-align: right;
7638
  margin-top: 3px;
7639
}
7640

    
7641
.select-item .name {
7642
  float: left;
7643
  width: 90%;
7644
}
7645

    
7646
.select-item .ico {
7647
  float: left;
7648
  width: 5%;
7649
}
7650

    
7651
.select-item .checkbox {
7652
  float: left;
7653
  width: 5%;
7654
}