Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (129.5 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
.icon .machine-container .ips {
834
    margin-top: 2px;
835
    height: 17px;
836
}
837

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

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

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

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

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

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

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

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

    
879
.icon .machine-info {
880
    padding: 10px 0;
881
}
882

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
974
.vm-actions .action-container.destroy {
975
    position: absolute;
976
    bottom: -1px;
977
    width: 100%;
978
    left: 0px;
979
    background: transparent;
980
}
981

    
982
.vm-actions .action-container.destroy a {
983
}
984

    
985
.icon .light-background .machine-data, div.network.light-background, div.network.expand {
986
    background-color:#aed2e3 !important;
987
}
988

    
989
.single .light-background {
990
    background-color:#aed2e3;
991
}
992

    
993
.icon .machine-data-cont {
994
    margin-bottom: 5px;
995
    padding-bottom: 5px;
996
    border-bottom: 1px solid #D1E7F0;
997
    width: 520px;
998
    float: left;
999
}
1000
.icon .terminated .machine-data-cont {
1001
    border-color: #B6CED6;
1002
}
1003

    
1004
.machine a {
1005
    font-weight: normal;
1006
    text-decoration: none;
1007
}
1008

    
1009
.machine span.name, .machine span.ip {
1010
    font-size: 75%;
1011
    color: black;
1012
    margin-top: 6px;
1013
}
1014

    
1015
.machine span.name {
1016
    font-weight: bold;
1017
}
1018

    
1019
.oldValue {
1020
    display:none;
1021
}
1022

    
1023
.state {
1024
}
1025

    
1026
.state div {
1027
    text-align: right;
1028
    margin-right: 3px;
1029
}
1030

    
1031
/* icon view actions */
1032
div.machine div.actions a.shutdown-padding {
1033
    margin-bottom: 22px;
1034
}
1035

    
1036
div.actions a.enabled:hover{
1037
    color: black !important;
1038
    text-decoration: underline;
1039
    display: block;
1040
}
1041

    
1042
div.machine:hover .actions a {
1043
    visibility: visible;
1044
}
1045

    
1046
div.machine div.display a{
1047
    visibility: visible;
1048
}
1049

    
1050
div.machine div.actions .disabled {
1051
    display: none;
1052
}
1053

    
1054
div.single-container div.vm-actions .disabled {
1055
    display: none;
1056
}
1057

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

    
1062
div.connect-arrow {
1063
    background: url("../images/connect-arrow.png") no-repeat;
1064
    height: 28px;
1065
    width:14px;
1066
    position: absolute;
1067
    display: none;
1068
}
1069

    
1070
.machine div.connect-arrow {
1071
    display: none;
1072
    left: -3px;
1073
    position: absolute;
1074
    top: 9px;
1075
}
1076

    
1077
div.connect-arrow:hover, div.connect-arrow.border-hover, div.connect-arrow-ie, div.connect-arrow.border-ie {
1078
    cursor: pointer;
1079
    background: url("../images/connect-arrow-hover.png") no-repeat;
1080
    height: 28px;
1081
    width:26px;
1082
}
1083

    
1084
div.connect-border {
1085
    opacity: 0.8;
1086
    filter: alpha(opacity = 80);
1087
    background-color:#4fe0c3;
1088
    height:28px;
1089
    width: 12px;
1090
    position: absolute;
1091
    display: none;
1092
}
1093

    
1094
div.connect-border:hover {
1095
    cursor: pointer;
1096
}
1097

    
1098
.machine div.connect-border {
1099
    display: none;
1100
    left: -15px;
1101
    position: absolute;
1102
    top: 9px;
1103
}
1104

    
1105
.standard .machine .logo {
1106
    float: left;
1107
    width: 50px;
1108
    height: 54px;
1109
    margin: 1px 14px 0;
1110
}
1111
.machine .logo {
1112
    background-image: url("../images/icons/machines/medium/unknown-sprite.png");
1113
    background-repeat: no-repeat;
1114
    cursor: pointer;
1115
}
1116

    
1117
.standard .machine .single-image-state1 {
1118
    background-position: 0px 0;
1119
}
1120

    
1121
.standard .machine .single-image-state3 {
1122
    background-position: -100px 0;
1123
}
1124

    
1125
.standard .machine .single-image-state4 {
1126
    background-position: -150px 0;
1127
}
1128

    
1129
.standard .machine .single-image-state2 {
1130
    background-position: -50px 0;
1131
}
1132

    
1133
.standard .running .machine .logo {
1134
   cursor: pointer;
1135
}
1136

    
1137
.list .machine img {
1138
    margin: 0;
1139
}
1140

    
1141
.icon div.cont-toggler-wrapper.ips {
1142
    font-size: 75%;
1143
}
1144

    
1145
.icon div.indicators {
1146
    float: right;
1147
}
1148

    
1149
div.indicators {
1150
    margin-right: 2px !important;
1151
    cursor: pointer;
1152
}
1153

    
1154
div.indicator1, div.indicator2, div.indicator3, div.indicator4 {
1155
    background-color: #63cf1c;
1156
    width:10px;
1157
    height:11px;
1158
    clear: none;
1159
    float:right;
1160
    -webkit-transition: background-color .75s ease-out;
1161
    -o-transition: background-color .75s ease-out;
1162
    -moz-transition: background-color .75s ease-out;
1163
    transition: background-color .75s ease-out;
1164
}
1165

    
1166
.view-separator {
1167
    color:#5F8DD3;
1168
}
1169

    
1170
.running.disabled {
1171
    background: transparent;
1172
}
1173

    
1174
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
1175
    background-color: #63cf1c;
1176
}
1177

    
1178
.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
1179
    background-color: #d4aa00;
1180
}
1181

    
1182
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
1183
    background-color: #ff0000 !important;
1184
}
1185

    
1186
.terminated-state .indicator1, .terminated-state .indicator2, .terminated-state .indicator3, .terminated-state .indicator4 {
1187
    background-color: #5e1616;
1188
}
1189

    
1190
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
1191
    background-color: #FF7F2A;
1192
}
1193

    
1194
.destroying-state .indicator1, .destroying-state .indicator3, .destroying-state .indicator2, .destroying-state .indicator4 {
1195
    background-color: #4085a5 !important;
1196
}
1197

    
1198
.shutting-state .indicator1, .shutting-state .indicator3, .shutting-state .indicator2, .shutting-state .indicator4 {
1199
    background-color: #940606;
1200
}
1201

    
1202
.starting-state .indicator1, .starting-state .indicator2, .starting-state .indicator3, .starting-state .indicator4 {
1203
    background-color: #9ed976;
1204
}
1205

    
1206
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
1207
    background-color: #63cf1c;
1208
}
1209

    
1210
.network-indicator.in-progress .indicator1, .network-indicator.in-progress .indicator2, .network-indicator.in-progress .indicator3, .network-indicator.in-progress .indicator4 {
1211
    background-color: #FF7F2A;
1212
}
1213

    
1214
.running, .terminated {
1215
    background: #EFF7FA repeat scroll 0 0;
1216
    padding-bottom: 15px;
1217
}
1218

    
1219
.running, #machinesview-list, .single {
1220
}
1221

    
1222
.terminated {
1223
    background:#DCE5E8  repeat scroll 0 0;
1224
    padding-top: 15px;
1225
    margin-top: 15px;
1226
}
1227

    
1228
span.rename {
1229
    background-repeat: no-repeat;
1230
    color: transparent;
1231
    font-size: 75%;
1232
    font-weight: normal;
1233
    margin-left: 10px;
1234
    padding-left: 10px;
1235
    text-align: left;
1236
    cursor: pointer;
1237
}
1238

    
1239
div.name:hover span.rename, span.rename_hovered {
1240
    color: #3D3D3D;
1241
    margin-top: 0.4em;
1242
    background-image: url("../images/pencil.png");
1243
    background-position: 0 3px;
1244
}
1245

    
1246
.machine div.info {
1247
    font-size: 75%;
1248
}
1249

    
1250
div.machine:hover div.info-header, div.machine:hover div.toggler div.down {
1251
    background-color: #84b7d0;
1252
}
1253

    
1254
div.machine div.info-label.darker, .single div.tags-label.darker, div.network .darker {
1255
    background-color: #5CA1C0;
1256
}
1257

    
1258
.machine div.info div.info-label {
1259
    font-size: 75%;
1260
    height:16px;
1261
    width: 30px;
1262
    padding: 1px 0 0 5px;
1263
}
1264

    
1265
.machine div.info div.toggler, .single div.tags div.toggler, div.network div.toggler {
1266
    width:15px;
1267
    height:17px;
1268
    margin-top: -11px;
1269
    margin-left: 37px;
1270
}
1271

    
1272
div.network div.toggler {
1273
    margin-left: 90px;
1274
}
1275

    
1276
.machine div.info div.down {
1277
    background: url(../images/down-arrow.png) no-repeat scroll 1px 1px;
1278
}
1279

    
1280
.single div.tags div.down {
1281
    background: url(../images/down-arrow.png) no-repeat scroll 2px 2px;
1282
}
1283

    
1284
.network div.network-machines div.down {
1285
    background: url(../images/down-arrow.png) no-repeat scroll 2px 2px;
1286
}
1287

    
1288
.network div.network-machine div.firewall div.down {
1289
    background: url(../images/down-arrow.png) no-repeat scroll 2px 2px;
1290
}
1291

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

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

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

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

    
1308
button {
1309
    background-color: #87AADE;
1310
    border: 1px solid #87AADE;
1311
    color: #FFFFFF;
1312
    cursor: pointer;
1313
    height: 23px;
1314
    width: 120px;
1315
}
1316

    
1317
button.next {
1318
    background-color: #4085A5;
1319
    border-color: #4085A5;
1320
    text-align: right;
1321
}
1322

    
1323
button.next:hover {
1324
    background-color: #7DB4CD;
1325
    border-color: #7DB4CD;
1326
}
1327

    
1328
button.prev {
1329
    background-color: #4085A5;
1330
    border-color: #4085A5;
1331
    margin-left: -1px;
1332
    text-align: left;
1333
}
1334

    
1335
button.prev:hover {
1336
    background-color: #7DB4CD;
1337
    border-color: #7DB4CD;
1338
}
1339

    
1340
.image-logo {
1341
    float: left;
1342
    margin-right: 1em;
1343
    margin-left: 1.5em;
1344
    margin-top: 4px;
1345
}
1346

    
1347
.icon div.image {
1348
    clear: both;
1349
    display: block;
1350
    margin-bottom: 3px;
1351
    margin-top: 3px;
1352
    padding: 5px;
1353
}
1354

    
1355
div#view-select {
1356
    clear: both;
1357
    color: white;
1358
    position: absolute;
1359
    right: 15px;
1360
    top: 15px;
1361
}
1362

    
1363
a.machines_view_link {
1364
    text-decoration: none;
1365
    font-size: 0.7em;
1366
    padding: 4px;
1367
    padding-right: 8px;
1368
    color: #5CA1C0;
1369
    margin-left: 5px;
1370
    background-repeat: no-repeat;
1371
    background-color: #C9DFEA;
1372
}
1373

    
1374
a.machines_view_link span {
1375
    float: left;
1376
}
1377

    
1378
a.machines_view_link span.ico {
1379
    width: 17px;
1380
    height: 15px;
1381
    margin-right: 10px;
1382
    background-position: -36px 0;
1383
}
1384

    
1385
a.machines_view_link:hover {
1386
    background-color: #A1C8DB;
1387
    color: #fff;
1388
}
1389
a.machines_view_link:hover span.ico {
1390
    background-position: -0px 0px;   
1391
}
1392

    
1393
a.machines_view_link.activelink span.ico {
1394
    background-position: -18px 0px;
1395
}
1396
a.machines_view_link.activelink {
1397
    color: #fff;
1398
    background-color: #5CA1C0;
1399
}
1400

    
1401
div#view-select a {
1402
    display: block;
1403
    float: left;
1404
}
1405

    
1406
a#list:hover {
1407
    background: #5f8dd3;
1408
}
1409

    
1410
a#machines_view_icon_link:active, a#machines_view_list_link:active {
1411
    color:white;
1412
}
1413

    
1414
a#machines_view_icon_link span.ico {
1415
    background-image: url("../images/icon-view.png");
1416
}
1417

    
1418
a#machines_view_list_link span.ico {
1419
    background-image: url("../images/list-view.png");
1420
}
1421

    
1422
a#machines_view_single_link span.ico {
1423
    background-image: url("../images/single-view.png");
1424
}
1425

    
1426
#machinetype {
1427
    background-color: #CDE2EC;
1428
    height: 25px;
1429
    margin-bottom: 0px !important;
1430
}
1431

    
1432
div.machine-type {
1433
    float: left;
1434
    margin: 4px 18px 20px;
1435
}
1436

    
1437
.machine-type .active {
1438
    color: #FFFFFF
1439
}
1440

    
1441
div.machine-type label.disabled {
1442
    color: #aaa !important;
1443
}
1444

    
1445
#machinesview {
1446
}
1447

    
1448
#machines-pane {
1449
}
1450

    
1451
.list#machinesview {
1452
    margin-left: -20px;
1453
    display:none;
1454
}
1455

    
1456
#machinesview-list.list {
1457
    background: #EFF7FA  repeat scroll 0 0;
1458
    padding-left: 15px;
1459
    padding-bottom: 15px;
1460
}
1461

    
1462
#machinesview_content {
1463
    display:none;
1464
}
1465

    
1466
.list-machines {
1467
    min-width: 515px;
1468
}
1469

    
1470
#emptymachineslist {
1471
    background-color: #6BA9C6;
1472
    color: #A0A0A0;
1473
    display: none;
1474
    padding: 65px 150px 35px;
1475
    text-align: justify;
1476
    margin-top: -70px;
1477
}
1478

    
1479
#welcomeheader {
1480
    color:white;
1481
    text-align: center;
1482
}
1483

    
1484
.welcomebody {
1485
    color: white;
1486
    font-size:80%;
1487
}
1488

    
1489
.welcomebody a {
1490
    color: white;
1491
}
1492

    
1493
.welcomefooter {
1494
    color: white;
1495
    font-size:60%;
1496
}
1497

    
1498
.welcomefooter a {
1499
    color: white;
1500
}
1501

    
1502
.emptycreatecontainer {
1503
    margin-left: 430px !important;
1504
    position: absolute;
1505
    margin-top: 5px !important;
1506
    width: 180px;
1507
    background-color: #CCCCCC;
1508
    padding: 5px;
1509
    padding-left: 10px;
1510
}
1511

    
1512
.emptycreate {
1513
    margin: 20px 10px 5px 0 !important;
1514
}
1515

    
1516
#createbody {
1517
    display:none;
1518
    font-size: 80%;
1519
}
1520

    
1521
div.list label img {
1522
    margin: 5px 5px -3px 0;
1523
}
1524

    
1525
div.list label {
1526
    color: #3D3D3D;
1527
    font-size: 75%;
1528
}
1529

    
1530
div.list .state {
1531
    margin-top: 7px;
1532
    margin-right: 10px;
1533
}
1534

    
1535
div.list table tbody {
1536
    margin-top: 8px;
1537
}
1538

    
1539
div.list table tr.checked td {
1540
    background-color: #A1C8DB !important;
1541
}
1542

    
1543
div.list table tr:hover td,
1544
div.list table tr.inactive:hover td,
1545
div.list table tr.error:hover td {
1546
    background-color: #A1C8DB;
1547
    color: #fff;
1548
}
1549

    
1550
div.list table td.name {
1551
    min-width: 170px;
1552
}
1553

    
1554
div.list table td.status {
1555
    font-size: 0.9em !important; 
1556
    text-align: right;
1557
    min-width: 90px;
1558
    color: #000;
1559
}
1560

    
1561
div.list table td.flavor {
1562
    font-size: 0.8em;
1563
}
1564

    
1565
div.list table td {
1566
    border-bottom: 1px solid #DDD;
1567
}
1568

    
1569
div.list table tr.error td.status {
1570
    color: #800000 !important;
1571
    font-weight: bold;
1572
}
1573

    
1574
div.list table tr.error td {
1575
    background-color: #DCE5E8;
1576
}
1577

    
1578
div.list table tr.inactive td {
1579
    background-color: #DCE5E8;
1580
}
1581

    
1582
div.list .stopped {
1583
    margin-top: 8px;
1584
}
1585

    
1586
/* root element for tabs  */
1587
#wizard ul.tabs {
1588
    margin-right: -1px;
1589
    float: right;
1590
}
1591

    
1592
#wizard div.panes {
1593
    height: 247px;
1594
    clear:both;
1595
    margin-top: 3px;
1596
}
1597

    
1598
.typebody {
1599
    font-size: 80%;
1600
    font-weight: normal;
1601
    position: relative;
1602
    top: -3px;
1603
}
1604

    
1605
.typehover {
1606
    color: #FFFFFF;
1607
}
1608

    
1609
#label-name {
1610
    margin-top: 10px;
1611
}
1612

    
1613
/* single tab */
1614
#wizard ul.tabs li {
1615
    margin-bottom: 0;
1616
    list-style-type:none;
1617
    float: left;
1618
}
1619

    
1620
/* link inside the tab. uses a background image */
1621
#wizard ul.tabs a {
1622
    display:block;
1623
    padding: 0.2em 0.5em 0.1em 0.4em;
1624
    text-decoration:none;
1625
    color: #FFFFFF;
1626
    position:relative;
1627
    top:1px;
1628
    outline:0;
1629
    background-color: transparent;
1630
    text-align: center;
1631
    width: 100px;
1632
    white-space: nowrap;
1633
    height: 17px;
1634
}
1635

    
1636
#wizard ul.tabs a:hover {
1637
    color: #FFFFFF;
1638
    background-color:#4085A5;
1639
}
1640

    
1641
/* selected tab */
1642
#wizard ul.tabs a.current {
1643
    color: white;
1644
    background-color: #7DB4CD;
1645
    cursor: default;
1646
}
1647

    
1648
#wizard #standard-images {
1649
    background-color: #ECF4F8;
1650
}
1651

    
1652
div.list div.actions {
1653
    display: none;
1654
    clear: left;
1655
    float: right;
1656
    margin-right: 15px;
1657
    margin-top: 37px;
1658
    text-align: right;
1659
    width: 120px;
1660
}
1661

    
1662
div.list div.actions a {
1663
    clear: left;
1664
    color: #A1A1A1;
1665
    display: block;
1666
    font-size:75%;
1667
    margin-bottom: 2px;
1668
}
1669

    
1670
div.list div.actions a:hover {
1671
    background-color: transparent;
1672
}
1673

    
1674
div.list div.actions a.enabled {
1675
    color: #3D3D3D;
1676
}
1677

    
1678
div.list div.actions a.enabled:hover{
1679
    cursor: pointer;
1680
    color: black;
1681
    text-decoration: underline;
1682
}
1683

    
1684
div.list div.actions a.selected {
1685
    color: #FF7F2A !important;
1686
}
1687

    
1688
input.machine {
1689
    width: 13px;
1690
    height: 13px;
1691
    top: -1px;
1692
    overflow: hidden;
1693
}
1694

    
1695
.description-container {
1696
    display: inline-block;
1697
    position: relative;
1698
    width: 300px;
1699
}
1700

    
1701
#wizard .button-container {
1702
    height: 20px;
1703
}
1704

    
1705

    
1706
/* metadata dropdown combo */
1707
.meta-key {
1708
    margin-right: 18px;
1709
    float:left;
1710
}
1711

    
1712
/* notification box */
1713
#yes-no {
1714
    height: 150px;
1715
    z-index: 9999;
1716
    border-bottom: 5px solid #4085A5;
1717
}
1718

    
1719
#yes-no p, #yes-no button {
1720
    margin-top: 15px;
1721
}
1722

    
1723
#error-success, .notification-box {
1724
    z-index: 9999;
1725
    border-bottom: 5px solid #4085A5;
1726
    min-height: 150px;
1727
    top: 50px !important;
1728
    position: absolute;
1729
}
1730

    
1731
#error-success p, .notification-box p {
1732
    margin-top: 5px;
1733
}
1734

    
1735
.error-report {
1736
    display: none;
1737
}
1738

    
1739
#error-success .error-report {
1740
    position: absolute;
1741
    top: 140px;
1742
    right: 40px;
1743
}
1744

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

    
1749
#error-success .error-report .errormsg {
1750
    display: none;
1751
}
1752

    
1753
#error-success .error-report .success {
1754
    display: none;
1755
}
1756

    
1757
#error-success .error-report .sending {
1758
    display: none;
1759
}
1760

    
1761
#error-success .error-report .send-btn {
1762
    color: #4085A5;
1763
    text-decoration: underline;
1764
    cursor: pointer;
1765
}
1766

    
1767
#error-success strong, .notification-box strong {
1768
    color: #F49C1A;
1769
}
1770

    
1771
#error-success .close, .notification-box .close {
1772
    background-image: url("../images/close-popup.png");
1773
    background-repeat: no-repeat;
1774
    cursor: pointer;
1775
    height: 13px;
1776
    position: absolute;
1777
    right: 7px;
1778
    top: 9px;
1779
    width: 13px;
1780
}
1781

    
1782
.popup-header-error {
1783
    background-color: #800000 !important;
1784
}
1785

    
1786
.popup-border-error {
1787
    border-color: #800000 !important;
1788
    width:auto;
1789
}
1790

    
1791
.popup-details-error {
1792
    border: none !important;
1793
}
1794

    
1795
.popup-separator-error {
1796
    margin-bottom: 5px !important;
1797
}
1798

    
1799
#error-success .popup-header, .notification-box .popup-header {
1800
    background-color: #4085A5;
1801
    color: white;
1802
    font-size: 95%;
1803
    font-weight: normal;
1804
    height: 20px;
1805
    margin-left: -16px;
1806
    margin-top: -16px;
1807
    padding-bottom: 2px;
1808
    padding-left: 30px;
1809
    padding-top: 10px;
1810
    width: 482px;
1811
    margin-right:-16px;
1812
}
1813

    
1814

    
1815
#error-success.success h3 span.header-box, .notification-box h3 span.header-box {
1816
    background-color: #71c837;
1817
    display: block;
1818
    background-image: url("../images/save-green.png");
1819
    background-position: right 0;
1820
    background-repeat: no-repeat;
1821
    width: 80px;
1822
    padding: 3px 3px 3px 8px;
1823
    margin-top: -6px;
1824
    font-size: 90% !important;
1825
    margin-left: -11px;
1826
}
1827

    
1828
#error-success .popup-body, .notification-box .popup-body {
1829
    background: url("../images/popup-bg.png") repeat-x scroll 0 0 transparent;
1830
    margin-left: -16px;
1831
    margin-right: -16px;
1832
    margin-top: 1px;
1833
    min-height: 142px;
1834
    padding-top: 10px;
1835
}
1836

    
1837
#error-success .popup-body-inner, .notification-box .popup-body-inner {
1838
    background: url("../images/popup-inner-bg.png") repeat-x scroll 0 0 transparent;
1839
    font-size: 80%;
1840
    min-height: 120px;
1841
    margin-left: 20px;
1842
    padding-left: 15px;
1843
    width: 460px;
1844
}
1845

    
1846
#error-success .popup-separator, .notification-box .popup-seperator {
1847
    background-color: #74AEC9;
1848
    height: 1px;
1849
    font-size:1%;
1850
    width: 442px;
1851
    margin-bottom: 30px;
1852
}
1853

    
1854
#error-success .machine-now-building {
1855
    font-size: 95%;
1856
    padding-bottom: 7px;
1857
    padding-top: 10px;
1858
}
1859

    
1860
#error-success.success .machine-now-building {
1861
    padding-bottom: 14px !important;
1862
}
1863

    
1864
#error-success .password-container, .notification-box .password-container {
1865
    width: 430px;
1866
    padding: 5px;
1867
    border: 2px solid #75b54a;
1868
    background-color: #aade87;
1869
}
1870

    
1871
#error-success .password-header, .notification-box .password-header {
1872
    margin-bottom: 5px;
1873
}
1874

    
1875
#error-success .password, .notification-box .password {
1876
    color: #447821;
1877
}
1878

    
1879
#error-success .popup-details, .notification-box .popup-details {
1880
    border: 2px solid #FF7F2A;
1881
    float: left;
1882
    margin-left: 10px;
1883
    padding: 2px;
1884
}
1885

    
1886
#error-success.success .popup-details, .notification-box .popup-details {
1887
    border: none !important;
1888
    float: none !important;
1889
    margin-left: none !important;
1890
    margin-top: 10px;
1891
}
1892

    
1893
#error-success.success .popup-separator, .notification-box .popup-seperator {
1894
    margin-bottom: 14px !important;
1895
}
1896

    
1897
#error-success .write-password, .notification-box .write-password {
1898
    margin-bottom: 5px;
1899
    padding-left: 30px;
1900
}
1901

    
1902
#error-success .write-password-password, .notification-box .write-password-password {
1903
    padding-left: 30px;
1904
    color: #447821;
1905
    display: inline;
1906
    font-size: 110%;
1907
    font-weight: bold;
1908
}
1909

    
1910
#error-success .write-password-details, .notification-box .write-password-details {
1911
    font-size: 75%;
1912
}
1913

    
1914
.more-details {
1915
    display: block;
1916
}
1917

    
1918
.notification-box h3 span.header-box {
1919
    background: transparent;
1920
}
1921

    
1922
.notification-box .machine-now-building {
1923
    padding: 20px 0;
1924
}
1925

    
1926
.notification-box .header-box {
1927
    width: auto !important;
1928
}
1929

    
1930
.notification-box .password {
1931
    text-align: center;
1932
}
1933
.notification-box .password a:hover {
1934
    background-color: #447821;
1935
    color: #fff;
1936
}
1937

    
1938
.notification-box .password a {
1939
    padding: 0.2em;
1940
    text-align: center;
1941
    color: #447821;
1942
    font-weight: bold;
1943
    font-size: 1.2em;
1944
    text-decoration: none;
1945
}
1946

    
1947
.popup-details a:link, .popup-details a:visited {
1948
    color: black;
1949
}
1950

    
1951
.destroy .confirm_single .yes {
1952
    background-color: #880000;
1953
    color: #fff;
1954
}
1955

    
1956
.destroy .confirm_single .no {
1957
    background-color: #CC0000;
1958
    color: #880000;
1959
}
1960

    
1961
.destroy .confirm_single .yes:hover {
1962
    background-color:#CC0000;
1963
}
1964

    
1965
div.list div.actions a.selected#action-destroy {
1966
    color: #880000 !important;
1967
}
1968

    
1969
.vm-actions .destroy a#action-destroy.selected {
1970
    color: #880000 !important;
1971
}
1972

    
1973
/* Confirmation boxes */
1974
div.confirm_single, div.confirm_multiple, div.action_error {
1975
    display: none;
1976
    color: black;
1977
}
1978

    
1979
div.confirm_single button, div.confirm_multiple button, div.action_error button {
1980
    font-size: 100%;
1981
    cursor: pointer;
1982
    color: black;
1983
    height: 20px !important;
1984
}
1985

    
1986
div.confirm_single button {
1987
    border: none;
1988
    font-family: Arial, Helvetica, sans-serif;
1989
    line-height: 1em;
1990
    vertical-align: middle;
1991
    padding: 2px 6px;
1992
    padding-bottom:4px;
1993
    height: 15px;
1994
}
1995

    
1996
div.confirm_single button.yes {
1997
    width: 90px;
1998
    background-color:#FF7F2A;
1999
}
2000

    
2001
div.confirm_single button.yes:hover {
2002
    background-color: #FF9955;
2003
}
2004

    
2005
div.confirm_single button.no {
2006
    width: 20px;
2007
    margin-left:-5px;
2008
    background-color: #FF9955;
2009
    color:#d95d0a;
2010
}
2011

    
2012
div.confirm_single button.no:hover {
2013
    color: white;
2014
}
2015

    
2016
div.confirm_multiple_cont {
2017
    background-color: #406A7D;
2018
    margin-top: 0px;
2019
    padding: 3px;
2020
    border-top: 1px solid #444;
2021
    border-bottom: 1px solid #444;
2022
    padding-top:0px;
2023
    margin-top: -1px;
2024
}
2025

    
2026
div.confirm_reboot_required {
2027
}
2028

    
2029
div.confirm_multiple {
2030
    font-size: 65%;
2031
    z-index: 8000;
2032
    /*height: 28px;*/
2033
    width: 700px;
2034
    margin-top: 15px;
2035
}
2036

    
2037
div.confirm_multiple p {
2038
    float: left;
2039
    color: #FFF;
2040
    font-weight: bold;
2041
    margin: 7px 0 0 10px;
2042
}
2043

    
2044
#networks-pane {
2045
    display: none;
2046
}
2047

    
2048
div.confirm_multiple button {
2049
    float: right;
2050
    background-color: transparent;
2051
    border: 1px solid #5CA1C0;
2052
    margin: 4px 5px 0 0;
2053
}
2054

    
2055
div.confirm_multiple button.yes {
2056
    border-color: #FF7F2A;
2057
    padding: 0 12px;
2058
}
2059

    
2060
div.confirm_multiple button.yes:hover {
2061
    background-color: #FF7F2A;
2062
}
2063

    
2064
div.confirm_multiple button.no {
2065
    padding: 0px 16px;
2066
}
2067

    
2068
div.confirm_multiple button.no:hover {
2069
    background-color: #5CA1C0;
2070
}
2071

    
2072
div.action_error {
2073
    width: 120px;
2074
    margin: 14px 0 0 37px;
2075
    background-color: #981D1D;
2076
    font-size: 75%;
2077
    z-index:1;
2078
    color: #FFF;
2079
    position:absolute;
2080
    top: 0px;
2081
}
2082

    
2083
div.action_error .action-error-msg {
2084
    background-color: #fff;
2085
    color: #981D1D;
2086
    border: 1px solid #981D1D;
2087
    padding: 4px;
2088
}
2089
div.action_error .action-error-msg .action {
2090
    font-weight: bold;
2091
}
2092

    
2093
div.action_error .action-error-msg {
2094
    font-size: 0.8em;
2095
}
2096

    
2097
.action_error button {
2098
    width: 75px;
2099
    background-color: transparent;
2100
    border: 1px solid;
2101
    border-color: #981D1D;
2102
    color: #fff !important;
2103
    float: left;
2104
}
2105

    
2106
div.action_error button.details {
2107
    padding-right: 5px;
2108
    width: 100px;
2109
    border-bottom: 2px solid #981D1D;
2110
    border-right: 1px solid #981D1D;
2111
    border-left: 2px solid #981D1D;
2112
    background-color: #E24B4B;
2113
}
2114

    
2115
div.action_error button.close-action-error {
2116
    background-image: url("../images/option-action-remove.png");
2117
    background-color: #fff;
2118
    background-repeat: no-repeat;
2119
    background-position: center center;
2120
    width: 20px;
2121
    border-bottom: 2px solid #981D1D;
2122
    border-right: 2px solid #981D1D;
2123
    border-top: 1px solid #981D1D;
2124
}
2125

    
2126
div.action_error button.details:hover {
2127
    background-color: #FF7F2A;
2128
}
2129

    
2130
div#aboutuser{
2131
    float:right;
2132
    clear: both;
2133
    color: #FFFFFF;
2134
    font-size: 75%;
2135
    margin-top: -25px;
2136
}
2137

    
2138
div#user{
2139
    clear: both;
2140
    color: #FFFFFF;
2141
    font-size: 75%;
2142
    margin-top: 38px;
2143
    padding-bottom: 10px;
2144
    position: absolute;
2145
    right:0;
2146
}
2147

    
2148
div#user a{
2149
    color: #FFFFFF;
2150
    text-decoration: none;
2151
}
2152

    
2153
div#user a.current_lang {
2154
    color: #72ADC8;
2155
}
2156

    
2157
div#user .usermenu {
2158
    float: left;
2159
    cursor: pointer;
2160
    overflow: hidden;
2161
    padding-top: 5px;
2162
    margin-top: -6px;
2163
    position: relative;
2164
}
2165

    
2166
div#user .username {
2167
    display: block;
2168
    margin-right: 10px;
2169
    padding-right: 18px;
2170
    padding-left: 4em;
2171
    min-width: 70px;
2172
    text-align: right;
2173
    height: 20px;
2174
    background: url("../images/down-arrow-light.png") no-repeat right;
2175
    background-position: right 6px;
2176
    font-weight: normal;
2177
}
2178

    
2179
div#user .hovered {
2180
    background: #599EBD;
2181
    overflow: visible;
2182
    border-bottom: 1px solid #C7DFE9;
2183
}
2184

    
2185
div#user .hovered .username {
2186
    background-image: url("../images/down-arrow-lighter.png");
2187
}
2188

    
2189
div#user .active {
2190
    background-color: #BED5E0 !important;
2191
}
2192

    
2193
div#user .active .username {
2194
    color: #599EBD;
2195
    background-image: url("../images/down-arrow-lighter.png");
2196
}
2197

    
2198
div#user .useractions {
2199
    display: none;
2200
}
2201

    
2202
div#user .active .useractions {
2203
    display: block;
2204
    text-align: right;
2205
    color: #4085A5;
2206
    background-color: #D0E3ED;
2207
    margin-top:-1px;
2208
    border-top:1px solid #fff;
2209
    position: relative;
2210
    top: 1px;
2211
    box-shadow: 1px 1px 1px #aaa;
2212
    -moz-box-shadow: 1px 1px 1px #aaa;
2213
    -webkit-box-shadow: 1px 1px 1px #aaa;
2214
}
2215

    
2216
div#user .useractions li {
2217
    padding: 2px 10px;
2218
    border-bottom: 1px solid #efefef;
2219
    text-align: right;
2220
    display: block;
2221
    background-color: transparent;
2222
}
2223

    
2224
div#user .useractions li a {
2225
    color: #4085A5;
2226
    display: inline-block;
2227
    padding:5px 0;
2228
    padding-left: 30px;
2229
    padding-bottom: 6px;
2230
    background-repeat: no-repeat;
2231
    background-position: center left;
2232
}
2233

    
2234
div#user .useractions li.hovered {
2235
    background-color: #E1EFF6;
2236
}
2237

    
2238
div#user .useractions li.last {
2239
    border-bottom: none;
2240
}
2241

    
2242
div#user .useractions .logout a {
2243
    background-image: url("../images/icon-logout.png");
2244
}
2245

    
2246
div#user .langmenu {
2247
    float: left;
2248
    border-left: 1px solid #ffffff;
2249
    padding-left: 10px;
2250
    margin-left: -1px;
2251
}
2252

    
2253
div#user .langmenu .sep {
2254
    display: inline-block;
2255
    color: #72ADC8;
2256
}
2257

    
2258
.separator {
2259
    background-color: #74AEC9;
2260
    height: 10px;
2261
    width: 700px;
2262
    font-size: 1px;
2263
    line-height: 0px;
2264
}
2265

    
2266
#disks.separator {
2267
    background-color: #dea842;
2268
}
2269

    
2270
#networks.separator {
2271
    background-color: #6c535d;
2272
}
2273

    
2274
.network-machine h5 {
2275
    margin-bottom: 20px;
2276
    margin-top:0px;
2277
}
2278

    
2279
.machine-container .separator {
2280
    width: 508px;
2281
    height: 1px;
2282
    margin-top: 2px;
2283
    background-color: #5CA1C0;
2284
    margin-left: 13px;
2285
}
2286

    
2287
.editbuttons {
2288
    display: block;
2289
    clear: none;
2290
    width: 40px;
2291
    margin-right: 0px;
2292
    padding-top: 0px;
2293
    float: right;
2294
    cursor: pointer;
2295
    position: relative;
2296
    z-index: 1000;
2297
}
2298

    
2299
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2300
    background-color: #84b7d0;
2301
}
2302

    
2303
div.editbuttons div.cancel:hover {
2304
    background-image: url("../images/cancel-onhover.png");
2305
}
2306

    
2307
.editbuttons .cancel, .editbuttons .save {
2308
    background-repeat: no-repeat;
2309
    color: transparent;
2310
    height: 16px;
2311
    width: 16px;
2312
    float: left;
2313
}
2314

    
2315
.editbuttons .cancel {
2316
    background-image: url("../images/cancel.png");
2317
    margin-left: 3px;
2318
}
2319

    
2320
.editbuttons .save {
2321
    background-image: url("../images/save.png");
2322
    margin-left: 1px;
2323
}
2324

    
2325
.editbuttons img {
2326
    float:none !important;
2327
    margin: 0px !important;
2328
}
2329

    
2330
.network .namecontainer {
2331
    font-size: 1.1em;
2332
}
2333
.network .machine-name-div .namecontainer {
2334
    font-size: 1em;
2335
    font-weight: bold;
2336
}
2337

    
2338

    
2339
.namecontainer .name {
2340
    position: relative;
2341
}
2342

    
2343
.namecontainer .name .nametextbox, .network-rename-input {
2344
    z-index: 1000;
2345
}
2346

    
2347
.icon .nametextbox {
2348
    width: 255px;
2349
}
2350

    
2351
.nametextbox, .network-rename-input {
2352
    position: relative;
2353
    top: -3px;
2354
    font-size: 65%;
2355
    width: 240px;
2356
    border: 1px solid #aaaaaa;
2357
    padding: 2px;
2358
}
2359

    
2360
.large-spinner {
2361
    background: url("../images/icons/indicators/large/progress.gif");
2362
    margin-left: 298px;
2363
    margin-top: 0px;
2364
    height: 31px;
2365
    width: 49px;
2366
    position: absolute;
2367
    top: 200px;
2368
}
2369

    
2370
#machinesview-icon .large-spinner {
2371
    top: 170px;
2372
}
2373

    
2374
.list .large-spinner {
2375
    margin-top:-30px;
2376
}
2377

    
2378
.single .large-spinner {
2379
    margin-top: 50px;
2380
}
2381

    
2382
div#networks-container {
2383
    display: none;
2384
}
2385

    
2386
div#networks-container .large-spinner {
2387
    margin-top: 50px;
2388
}
2389

    
2390
/* tables in list view */
2391
div.list div.dataTables_filter {
2392
    font-size: 75%;
2393
    margin-bottom: 12px;
2394
}
2395

    
2396
div.list div.dataTables_filter input{
2397
    font-size: 100%;
2398
}
2399

    
2400
.dataTables_wrapper {
2401
    width: 515px;
2402
    padding-bottom: 40px;
2403
}
2404

    
2405
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2406
    padding-right: 15px !important;
2407
}
2408

    
2409
div.list table {
2410
    width: 515px;
2411
    font-size: 75%;
2412
}
2413

    
2414
div.list table tbody td {
2415
    color: #3D3D3D;
2416
    padding:6px;
2417
    vertical-align: middle;
2418
    height: 20px;
2419
}
2420

    
2421
div.list table thead tr {
2422
    border-bottom: 1px solid #aaa;
2423
}
2424
div.list table thead tr th {
2425
    background-color: #CDE2EC;
2426
    background-image: url("../images/bg.gif");
2427
    background-repeat: no-repeat;
2428
    background-position: right 11px;
2429
    font-weight: normal;
2430
    border: 1px solid transparent;
2431
    border-bottom: none;
2432
    padding: 4px;
2433
    text-align: left;
2434
    vertical-align: middle;
2435
    cursor: pointer;
2436
}
2437

    
2438
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2439
    background-color: #5CA1C0;
2440
}
2441

    
2442
div.list table thead .sorting_asc {
2443
    background-image: url("../images/asc.gif");
2444
}
2445

    
2446
div.list table thead .sorting_desc {
2447
    background-image: url("../images/desc.gif");
2448
}
2449

    
2450
div.list table .selection div.expand-icon {
2451
    background-image: url("../images/asc.gif");
2452
    background-repeat: no-repeat;
2453
    position: relative;
2454
    cursor: pointer;
2455
    width: 15px;
2456
    height: 4px;
2457
    left: 19px;
2458
    top: -11px;
2459
}
2460

    
2461
ul.dropdown-selector {
2462
    background-color: #E6EEEE;
2463
    position: absolute;
2464
    margin-left: 1px;
2465
    display: block;
2466
    top: 255px;
2467
    font-size:75%;
2468
    width:40px;
2469
}
2470

    
2471
ul.dropdown-selector li {
2472
    padding: 4px;
2473
}
2474

    
2475
ul.dropdown-selector li:hover {
2476
    background-color: #5CA1C0;
2477
}
2478

    
2479
ul.dropdown-selector li a{
2480
    color: black;
2481
    text-decoration: none;
2482
}
2483

    
2484
div.list table span.imagetag {
2485
    display: none;
2486
}
2487

    
2488
div.list table thead .vmos {
2489
    width: 20px !important;
2490
    vertical-align:middle;
2491
}
2492

    
2493
div.list table .selection {
2494
    width: 20px !important;
2495
    text-align: left;
2496
    background-image: none;
2497
    padding-left: 6px;
2498
}
2499

    
2500
div.list table thead .vmflavor {
2501
    width: 100px !important;
2502
}
2503

    
2504
/* group column commented out for v0.5
2505
div.list table thead .vmgroup {
2506
    width: 40px !important;
2507
}
2508
*/
2509

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

    
2514
div.list table thead .vmname {
2515
    width: 110px !important;
2516
}
2517

    
2518
.spinner, .action-indicator {
2519
    clear: right;
2520
    float:right;
2521
    margin: 10px 6px 0 15px;
2522
}
2523

    
2524
.icon .spinner {
2525
    margin: 20px 4px 0 15px !important;
2526
}
2527

    
2528
.single .state .spinner {
2529
    margin: 20px 55px 0 15px !important;
2530
}
2531

    
2532
.action-indicator {
2533
    margin-right: 18px;
2534
}
2535

    
2536
.list span.action-indicator {
2537
    display: block;
2538
    width: 15px;
2539
    height: 20px;
2540
    margin: 0 !important;
2541
    float: none;
2542
}
2543

    
2544
.wave {
2545
    clear: right;
2546
    float:right !important;
2547
    margin: 10px 15px 0 15px !important;
2548
}
2549

    
2550
.hidden {
2551
    display:none; 
2552
}
2553

    
2554
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2555
    display:block !important;
2556
}
2557

    
2558
.action_error .message, .action_error .code {
2559
    display: none;
2560
}
2561

    
2562
.fixed {
2563
    bottom: 0;
2564
    position: fixed !important;
2565
}
2566

    
2567
/* Networks */
2568
#networkscreate {
2569
}
2570

    
2571
.createbutton {
2572
    color: black;
2573
    background-color: #FF7F2A;
2574
    cursor: pointer;
2575
    padding: 7px 24px;
2576
    text-decoration: none;
2577
    border-left: 15px solid #FF9955;
2578
    margin-left: -15px;
2579
}
2580

    
2581
.createbutton.disabled, #networkscreate.disabled {
2582
  background-color: #888 !important;
2583
  border-left-color: #aaa !important;
2584
  cursor: help !important;
2585
  color: #ccc !important;
2586
}
2587

    
2588
#networkscreate:hover {
2589
    background-color: #FF9955;
2590
}
2591

    
2592
#createcontainer {
2593
}
2594

    
2595
#networks-container {
2596
}
2597

    
2598
#networks-pane .public-networks {
2599
    background: #EFF7FA repeat scroll 0 0;
2600
    margin: 0 0 0px;
2601
    padding: 0 0 15px 0px;
2602
}
2603

    
2604
#networks-pane .private-networks .network:last-child {
2605
    border-bottom: none;
2606
}
2607

    
2608
#networks-pane .private-networks {
2609
    background: #EFF7FA repeat scroll 0 0;
2610
    padding: 15px 20px 20px 0px;
2611
    margin-top: 18px;
2612
}
2613

    
2614
.private-networks .network-cont:last-child {
2615
    border-bottom: none;
2616
}
2617

    
2618
.private-networks .network-cont {
2619
    border-bottom: 1px solid #D1E7F0;
2620
    padding-bottom:5px;
2621
    margin-bottom: 5px;
2622
    width: 520px;
2623
}
2624

    
2625
.private-networks .network {
2626
    padding-top: 10px;
2627
    padding-bottom: 10px;
2628
}
2629

    
2630
#public-template, #private-template, #public-machine-template, #private-machine-template {
2631
    display:none;
2632
}
2633

    
2634
div.network-cont.disable-destroy .actions .destroy {
2635
    display: none !important;
2636
}
2637

    
2638
div.network-cont.pending .actions .action-add {
2639
    display: none;
2640
}
2641

    
2642
div.network-cont.in-error .actions .action-add {
2643
    display: none;
2644
}
2645

    
2646
div.network a.action-network-add {
2647
    display: none;
2648
}
2649

    
2650
div.network a.action-network-destroy {
2651
    margin-top: 32px !important;
2652
    width: 50px;
2653
    display: none;
2654
}
2655

    
2656
div.network {
2657
    clear: both;
2658
    padding: 5px 20px 5px 20px;
2659
    width: 480px;
2660
    position: relative;
2661
}
2662

    
2663
#private-template {
2664
    margin: 2px 0 0 -30px;
2665
}
2666

    
2667
div.network-placeholder {
2668
    margin-left: 33px;
2669
}
2670

    
2671
div.private-networks div.network-placeholder {
2672
}
2673

    
2674
div.network-cable {
2675
    border-left: 3px solid #FF7F2A;
2676
    float: left;
2677
    margin-left: -40px;
2678
    margin-top: -45px;
2679
    height: 185px;
2680
    overflow: hidden;
2681
}
2682

    
2683
.first div.network-cable {
2684
    height:143px;
2685
    margin-top:-6px;
2686
    position: relative;
2687
}
2688

    
2689
div.network-contents div.machines-list div.first {
2690
    margin-top:0;
2691
}
2692

    
2693
.last div.network-cable {
2694
    height:85px;
2695
}
2696

    
2697
div.firewall-cable {
2698
    border-left: 3px solid #FF7F2A;
2699
    float: left;
2700
    margin-left: -100px;
2701
    margin-top: -20px;
2702
    height: 110px;
2703
}
2704

    
2705
.last div.firewall-cable {
2706
    display:none;
2707
}
2708

    
2709
div.network a:hover {
2710
    text-decoration: underline;
2711
    cursor: pointer;
2712
}
2713

    
2714
#networks-container .name {
2715
    font-size: 75%;
2716
}
2717

    
2718
div.network-machines, div.firewall {
2719
    margin-left: 70px;
2720
}
2721

    
2722
div.firewall {
2723
    margin-left: 70px;
2724
    margin-bottom: 3px;
2725
    margin-top: -15px;
2726
}
2727

    
2728
div.firewall .firewall-options {
2729
    float: left;
2730
}
2731

    
2732
div.machines-header, div.firewall-header {
2733
    background-color: #A1C8DB;
2734
    color: white;
2735
    cursor: pointer;
2736
    height: 17px;
2737
    width: 103px;
2738
}
2739

    
2740
 div.private-networks div.machines-header {
2741
    margin-top: -5px;
2742
}
2743

    
2744
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2745
    background-color: #84b7d0;
2746
}
2747

    
2748
div.network-machine:hover div.firewall-header {
2749
    background-color: #5CA1C0;
2750
}
2751

    
2752
div.firewall-label.darker {
2753
    background-color: #4085a5;
2754
}
2755

    
2756
.state {
2757
}
2758

    
2759
.network .state {
2760
    font-size: 75%;
2761
    position: absolute;
2762
    right: 10px;
2763
    top: 5px;
2764
}
2765

    
2766
div.network div.actions {
2767
    float: right;
2768
    font-size: 75%;
2769
    font-weight: normal;
2770
    height: 70px;
2771
    width: 100px;
2772
    position: absolute;
2773
    right: -100px;
2774
    top: 0;
2775
}
2776

    
2777
div.network div.machine-actions {
2778
    text-decoration: none;
2779
    float: right;
2780
    margin: -17px -180px 0 0;
2781
    font-weight: normal;
2782
    font-size: 75%;
2783
}
2784

    
2785
div.network div.actions a, div.network div.machine-actions a {
2786
    text-decoration: none;
2787
    height: 15px;
2788
    color: black;
2789
    visibility: hidden;
2790
    display: block;
2791
}
2792

    
2793

    
2794
div.network div.machine-actions a {
2795
    margin: 8px 0 0 8px;
2796
}
2797
div.network div.net-actions a {
2798
    margin: 0 0 8px 8px;
2799
    width: 168px;
2800
}
2801
div.network div.action-container {
2802
    bottom: auto;
2803
}
2804

    
2805
div.network div.net-actions .confirm_single {
2806
    position: absolute;
2807
    left: 96px;
2808
    width: 150px;
2809
    margin: 0 0px -5px 0;
2810
    font-size: 100%;
2811
}
2812

    
2813
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2814
    display: block;
2815
    background-color:#A1C8DB;
2816
    opacity: 0.8;
2817
    filter: alpha(opacity = 80);
2818
}
2819

    
2820
div.network.expand .net-actions a {
2821
    visibility: visible;
2822
}
2823

    
2824
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2825
    visibility: visible;
2826
}
2827

    
2828
div.network div.machine-actions a.action-destroy.selected {
2829
    color: #880000 !important;
2830
}
2831

    
2832
div.network div.actions a.visible,
2833
div.network div.net-vm-actions a.visible,
2834
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected {
2835
    background-color: transparent !important;
2836
    visibility: visible!important;
2837
}
2838

    
2839
div.network .net-vm-actions .confirm_single {
2840
    font-size: 100% !important;
2841
    margin-right: -20px !important;
2842
    position: absolute !important;
2843
    top: 7px;
2844
    right:0;
2845
}
2846

    
2847
div.network .nic-ip {
2848
  font-size: 0.8em;
2849
}
2850

    
2851
div.network div.display a {
2852
    visibility: visible;
2853
}
2854

    
2855
div.network-machine div.machine-actions a.action-details {
2856
    margin-top: 7px;
2857
    width: 168px;
2858
}
2859

    
2860
div.network .net-actions {
2861
    margin-right:5px !important;
2862
    margin-top:0px !important;
2863
    height: 80px !important;
2864
}
2865

    
2866
div.network .net-actions .action-container.destroy {
2867
    position: relative;
2868
    bottom: auto;
2869
}
2870

    
2871
div.network:hover {
2872
    background-color: #A1C8DB !important;
2873
}
2874

    
2875
.network-logos {
2876
    float:left;
2877
    padding-right: 10px;
2878
}
2879

    
2880
.network-logos:hover {
2881
    cursor: pointer;
2882
}
2883

    
2884
.state div {
2885
    text-align: right;
2886
    margin: 4px 1px -4px;
2887
}
2888

    
2889
.public-networks .state div {
2890
    margin-top: 4px;
2891
}
2892

    
2893
.private-networks .state div {
2894
    margin-top: 9px;
2895
    margin-bottom: -12px;
2896
}
2897

    
2898
.network .name-div {
2899
    margin-bottom: 15px;
2900
    margin-top: 0px;
2901
}
2902

    
2903
div.indicator {
2904
    clear: none;
2905
    float: right;
2906
    height: 11px;
2907
    margin: 3px -1px;
2908
    width: 10px;
2909
}
2910

    
2911
#private-networks {
2912
    margin-top: 20px;
2913
}
2914

    
2915
.private-networks .editbuttons {
2916
    margin-right: 117px;
2917
    margin-top: 1px;
2918
}
2919

    
2920
.private-networks div.confirm_single {
2921
    margin: 45px -219px -5px 0;
2922
    font-size: 80%;
2923
}
2924

    
2925
.private-networks .network-machine div.confirm_single {
2926
    margin: 0 -199px 0 0;
2927
}
2928

    
2929
.private-networks .state {
2930
}
2931

    
2932
.private-networks div.machines-list {
2933
    padding-top: 3px;
2934
}
2935

    
2936
span.rename-network, span.configure {
2937
    background-repeat: no-repeat;
2938
    color: transparent;
2939
    font-size: 75%;
2940
    font-weight: normal;
2941
    margin-left: 10px;
2942
    margin-right: 10px;
2943
    padding-left: 10px;
2944
    text-align: left;
2945
}
2946

    
2947
span.rename-network {
2948
    cursor: pointer;
2949
}
2950

    
2951
div.name-div:hover span.rename-network {
2952
    color: #3D3D3D;
2953
    margin-top: 0.4em;
2954
    background-image: url("../images/pencil.png");
2955
    background-position: 0 3px;
2956
}
2957

    
2958
div.network:hover a.rename {
2959
    color: #3d3d3d;
2960
}
2961

    
2962
.network-separator {
2963
    background-color: #5CA1C0;
2964
    height: 1px;
2965
    margin: 2px 0 0 -5px;
2966
    width: 480px;
2967
    font-size: 1%;
2968
    line-height: 1px;
2969
}
2970

    
2971
.network-contents {
2972
    margin-left: -4px;
2973
    width: 504px;
2974
    clear: both;
2975
    background: url("../images/orange-border.png") no-repeat;
2976
    background-position: 33px bottom;
2977
}
2978
.network-contents.last-expanded {
2979
    background-position-y: -2600px;
2980
}
2981

    
2982
.network-machine {
2983
    border-bottom: 1px solid #5CA1C0;
2984
}
2985
.network-machine:last-child {
2986
    border-bottom: none;
2987
}
2988

    
2989
.network-machine .state div {
2990
    text-align: left;
2991
}
2992

    
2993
.network-machine {
2994
    margin-left: 35px;
2995
    padding-bottom: 10px;
2996
    padding-left: 5px;
2997
    padding-top: 10px;
2998
    position: relative;
2999
}
3000

    
3001
.network-machine .ips {
3002
    position: absolute;
3003
    right:0;
3004
    top:40px;
3005
    text-align: right;
3006
    padding-right: 10px;
3007
    font-size: 70%;
3008
}
3009

    
3010
.network-machine .logo {
3011
    float:left;
3012
    padding-right: 10px;
3013
    position:relative;
3014
}
3015

    
3016
#networks-container .machine-name {
3017
    text-decoration: none !important;
3018
    margin-bottom: 10px;
3019
    color: #000000;
3020
    margin-top: -4px;
3021
}
3022

    
3023
.private-networks .separator {
3024
    background-color: #5CA1C0;
3025
    height: 1px;
3026
    margin: 3px 0 -2px -10px;
3027
    width: 485px;
3028
}
3029

    
3030
.network-machine .state {
3031
    margin-right: 18px;
3032
}
3033

    
3034
.network-machine .state .status {
3035
    margin-bottom: 4px;
3036
}
3037

    
3038
.machine-name .name {
3039
}
3040

    
3041
.machine-name .namecontainer {
3042
    line-height: 18px;
3043
    margin-bottom: 20px;
3044
}
3045

    
3046
div.network-machine:hover {
3047
    background-color: #84B7D0;
3048
}
3049

    
3050
.machines {
3051
    width: 416px;
3052
    margin-bottom: -8px;
3053
    margin-top: 10px;
3054
}
3055

    
3056
div.empty-network-slot {
3057
    height: 60px;
3058
}
3059

    
3060
div.network-remove-machine, div.network-add-machine {
3061
    background-color: #FB822F;
3062
    color: #bc4b00;
3063
    width:90px;
3064
    height:18px;
3065
    float:left;
3066
    margin:40px 0 0 -100px;
3067
}
3068

    
3069
span.remove-icon {
3070
    font-size: 80%;
3071
    margin-left: 15px;
3072
    position: relative;
3073
    bottom:1px;
3074
}
3075

    
3076
div.add-icon {
3077
    margin-left: 15px;
3078
    margin-top: -1px;
3079
    cursor: pointer;
3080
}
3081

    
3082
span.remove-icon:hover, span.add-icon:hover {
3083
    cursor:pointer;
3084
    color: #fff;
3085
}
3086

    
3087
div.network-add-machine {
3088
    margin:43px 0 0 0px;
3089
}
3090

    
3091
.firewall-on {
3092
    color: #42E342;
3093
}
3094

    
3095
.firewall-off {
3096
    color: #F82E2E;
3097
}
3098

    
3099
.firewall .progress-indicator {
3100
  position: absolute;
3101
  right: 10px;
3102
  top: 53px;
3103
}
3104

    
3105
.firewall-content {
3106
    color: black;
3107
    font-size: 0.8em;
3108
    height: 55px;
3109
    padding-top: 10px;
3110
}
3111

    
3112
.firewall-content input {
3113
  cursor: pointer;
3114
}
3115

    
3116
.firewall-content .checkbox-legends {
3117
    cursor: pointer;
3118
}
3119

    
3120
.firewall-content .checkbox-legends.current {
3121
    font-weight: bold;
3122
}
3123

    
3124
.firewall-content .checkbox-legends {
3125
    vertical-align: text-top;
3126
}
3127

    
3128
.checkbox-legends a {
3129
    color: black;
3130
    text-decoration: underline;
3131
    font-size: 100%;
3132
}
3133

    
3134
h5.machine-connect {
3135
    font-size: 75%;
3136
    margin-bottom: 3px;
3137
    height: 23px;
3138
}
3139

    
3140
.machine-connect span {
3141
    text-decoration: underline;
3142
}
3143

    
3144
h5.machine-connect span:hover {
3145
    cursor: pointer;
3146
}
3147

    
3148
.firewall-apply {
3149
    position: absolute;
3150
    background-color: #4085a5;
3151
    border: none;
3152
    font-size: 105%;
3153
    height: 18px;
3154
    width: 75px;
3155
    bottom: 13px;
3156
    right: 10px;
3157
}
3158

    
3159
.firewall-apply:hover {
3160
    background-color:#5CA1C0;
3161
}
3162

    
3163
.name-div {
3164
    margin: -9px 0 30px 70px;
3165
}
3166

    
3167
.machine-name-div {
3168
    margin-bottom: 20px;
3169
    margin-left: 60px;
3170
}
3171

    
3172
div.reboot-dialog {
3173
    display: none;
3174
    color: black;
3175
    background-color: #4085A5;
3176
    font-size: 75%;
3177
    margin-top: 15px;
3178
    width: 698px;
3179
    z-index: 1;
3180
}
3181

    
3182
div#reboot-machine-template, div.reboot-machine-entry {
3183
    display: none;
3184
    padding: 0 0 10px 35px;
3185
    width: 300px;
3186
}
3187

    
3188
div.reboot-dialog p {
3189
    color: #FFFFFF;
3190
    padding: 10px 0 10px 10px;
3191
}
3192

    
3193
div.reboot-dialog button {
3194
    float:right;
3195
    border: 1px solid #FF7F2A;
3196
    background-color: transparent;
3197
    font-size:100%;
3198
}
3199

    
3200
div.reboot-dialog button:hover {
3201
    background-color: #FF7F2A;
3202
}
3203

    
3204
div.reboot-dialog button.reboot-all {
3205
    margin: -30px 35px 0 0;
3206
}
3207

    
3208
div.reboot-dialog button.reboot-single {
3209
    color: black;
3210
    margin-top: -20px;
3211
}
3212

    
3213
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
3214
    display:none;
3215
}
3216

    
3217
div.reboot-dialog button.details {
3218
    border-color: #800000;
3219
    margin-top: -20px;
3220
}
3221

    
3222
div.reboot-dialog button.details:hover {
3223
    background-color: #800000;
3224
}
3225

    
3226
/* Metadata */
3227
.machine .info-content {
3228
    display: none;
3229
}
3230

    
3231
.metadata-container {
3232
    line-height: 12px;
3233
    height: 85px;
3234
    background-color: #84b7d0;
3235
}
3236

    
3237
.metadata-column {
3238
    border-right: 1px solid #5CA1C0;
3239
    color: black;
3240
    float: left;
3241
    font-size: 60%;
3242
    margin-top: 3px;
3243
    height: 70px;
3244
    padding-bottom: 5px;
3245
}
3246

    
3247
.vm-stats {
3248
    padding-left: 10px;
3249
    padding-right: 5px;
3250
    width: 220px;
3251
}
3252

    
3253
.vm-stats div.stat-content {
3254
    height: 18px;
3255
}
3256

    
3257
.vm-stats div.stat-content img {
3258
    margin: 0;
3259
}
3260

    
3261
.vm-stats div img.stat-busy {
3262
    margin-top: -7px;
3263
    margin-left: 90px;
3264
}
3265

    
3266
.vm-stats div.stat-content img.busy {
3267
    margin-left: 95px;
3268
}
3269

    
3270
.vm-stats div.stat-error {
3271
    display:none;
3272
}
3273

    
3274
div.stat-error {
3275
    color: #f00;
3276
}
3277

    
3278
.single div.stat-error {
3279
    text-align: center;
3280
    font-size: 0.8em;
3281
}
3282

    
3283
.metadata-column {
3284
    margin-top: 4px;
3285
}
3286

    
3287
.vm-details {
3288
    width: 130px;
3289
    margin-left:17px;
3290
}
3291

    
3292
.vm-details.metadata-column {
3293
    padding-top: 5px;
3294
    height: 65px;
3295
}
3296

    
3297
.vm-details .image-details {
3298
    margin-top: 8px;
3299
}
3300

    
3301
.vm-details .vm-detail {
3302
    display: block;
3303
}
3304

    
3305
.vm-details span.value {
3306
    color: #444;
3307
}
3308

    
3309
.single-container .lower .stat-busy {
3310
    margin-top: 10px;
3311
    margin-left: 325px;
3312
}
3313

    
3314
.vm-metadata {
3315
    padding-left: 10px;
3316
    width: 100px;
3317
    border: none;
3318
}
3319

    
3320
.metadata-left {
3321
}
3322

    
3323
.metadata-right {
3324
    width: 73px;
3325
    float:left;
3326
    height: 35px;
3327
    padding-left: 5px;
3328
    position:relative;
3329
    overflow:hidden;
3330
}
3331

    
3332
.metadata-right .items {
3333
    position:absolute;
3334
    height:20000em;
3335
}
3336

    
3337
.metadata-keys-container {
3338
    height: 60px;
3339
    float: left;
3340
}
3341

    
3342
.single .metadata-keys-container {
3343
    float: none;
3344
    height: auto;
3345
    margin-bottom: 5px;
3346
}
3347

    
3348
.single a.manage-metadata {
3349
    font-size: 80%;
3350
    margin-left:4px;
3351
    color: #383838;
3352
}
3353

    
3354
a.manage-metadata, a.stats-report {
3355
    font-size: 100%;
3356
    color: black;
3357
    margin-left:17px;
3358
    text-decoration: underline;
3359
}
3360

    
3361
a.stats-report {
3362
    margin: 15px 0  0 80px;
3363
}
3364

    
3365
div.machine a.manage-metadata:hover {
3366
    background-color: transparent;
3367
}
3368

    
3369
.single .metadata-actions, .single .metadata-keys-container .items {
3370
    padding-left: 5px;
3371
}
3372
.metadata-actions, .metadata-keys-container .items{
3373
    margin-top: 5px;
3374
}
3375

    
3376
.singe .metadata-actions, .single .metadata-keys-container .items{
3377
    font-size: 80%;
3378
    line-height: 12px;
3379
    width: 300px;
3380
}
3381

    
3382
.metadata-actions .prev,  .metadata-actions .next{
3383
    float:left;
3384
    width:29px;
3385
    height:6px;
3386
    cursor: pointer;
3387
}
3388

    
3389
.metadata-actions .prev {
3390
    background: url("../images/roll-up.png") no-repeat scroll 0 0 transparent;
3391
}
3392

    
3393
.metadata-actions .next {
3394
    background: url("../images/roll-down.png") no-repeat scroll 0 0 transparent;
3395
}
3396

    
3397
.scrollable {
3398
    position:relative;
3399
    overflow:hidden;
3400
    height: 35px;
3401
    width: 120px;
3402
    margin-bottom:2px;
3403
}
3404

    
3405
.scrollable .items {
3406
    position:absolute;
3407
    height:20000em;
3408
}
3409

    
3410
/* single view */
3411
.single {
3412
    color: #383838;
3413
}
3414

    
3415
.single .column1 {
3416
    float: left;
3417
    margin: 1px 0 25px 17px;
3418
    width: 140px;
3419
}
3420

    
3421
.single .column1 .state {
3422
    float: left;
3423
    margin-left: 4px;
3424
    padding-bottom: 6px;
3425
    padding-top: 3px;
3426
    position: relative;
3427
    right: 0;
3428
    text-align: center;
3429
    width: 126px;
3430
}
3431

    
3432
.single .column1 .state-label {
3433
    padding-top: 5px;
3434
}
3435

    
3436
.single .column1 .indicators {
3437
    margin-right: 38px !important;
3438
}
3439

    
3440
.single div.connect-arrow {
3441
    margin-left: -17px;
3442
}
3443

    
3444
.single div.connect-border {
3445
    margin-left: -29px;
3446
}
3447

    
3448
.single .single-actions {
3449
    width: 150px;
3450
    height: 60px;
3451
    margin-bottom: 45px;
3452
    margin-left: -10px;
3453
}
3454

    
3455
.single .vm-actions .action-container {
3456
    margin-bottom: 1px;
3457
}
3458

    
3459
.single .vm-actions .action-container .confirm_single {
3460
    right: -45px;
3461
}
3462

    
3463
.single .vm-actions .action-container.destroy .confirm_single {
3464
}
3465

    
3466
.single .vm-actions .action-container.destroy {
3467
    bottom: -20px;
3468
}
3469

    
3470
.single a.single-action {
3471
    text-decoration: none;
3472
    cursor: pointer;
3473
    display: block;
3474
}
3475

    
3476
.single a.single-action:hover {
3477
    background-color:#A1C8DB;
3478
    width: 162px;
3479
    opacity: 0.8;
3480
    filter: alpha(opacity = 80);
3481
}
3482

    
3483
.single .destroy a.single-action.selected {
3484
    color: #880000 !important;
3485
}
3486

    
3487
.single a.single-action.selected {
3488
    color: #FF7F2A !important;
3489
    width: 50px !important;
3490
}
3491

    
3492
.single a.single-action.selected:hover {
3493
    background-color:transparent;
3494
}
3495

    
3496
.single .spinner, .single .action-indicator {
3497
    margin: 15px 45px 0 0px !important
3498
}
3499

    
3500
.single .action-indicator {
3501
    margin-right: 55px !important;
3502
}
3503

    
3504
.single .wave {
3505
    margin: 15px 53px 0 0px !important
3506
}
3507

    
3508
.icon div.action_error {
3509
    font-size: 100%;
3510
}
3511

    
3512
.single div.action_error {
3513
    position: absolute;
3514
    top: 29px;
3515
    right: 35px;
3516
}
3517

    
3518
.single .column2 {
3519
    background-color: #A1C8DB;
3520
    float: left;
3521
    font-size: 78%;
3522
    line-height: 17px;
3523
    margin: 0 0 10px 5px;
3524
    width: 358px;
3525
}
3526

    
3527
.single .column2 .machine-labels {
3528
    float: left;
3529
    font-size: 90%;
3530
    margin-left: 10px;
3531
    margin-top: 10px;
3532
    width: 125px;
3533
}
3534

    
3535
.single .machine-detail.title {
3536
    background-color: #74AEC9;
3537
    color: #fff;
3538
    padding: 4px 10px;
3539
    font-size: 0.8em;
3540
    width: 338px;
3541
    margin-left: 5px;
3542
    float: left;
3543
}
3544

    
3545
.single .column2 .machine-details {
3546
    float: right;
3547
    text-align: right;
3548
    font-size: 90%;
3549
    width: 210px;
3550
    margin-right: 10px;
3551
    margin-top: 10px;
3552
}
3553

    
3554
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3555
    margin-bottom: 13px;
3556
}
3557

    
3558
.single .tags {
3559
    clear: both;
3560
    margin-bottom: 10px;
3561
    margin-left: 10px;
3562
}
3563

    
3564
.single .tags-label {
3565
    float: left;
3566
    padding: 0 5px;
3567
    width: 30px;
3568
}
3569

    
3570
.single .tags-down-arrow {
3571
    background: url("../images/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3572
    float: left;
3573
    height: 16px;
3574
    width: 9px;
3575
}
3576

    
3577
.single .tags-header .info-header{
3578
    padding-top:0;
3579
    padding-bottom:0;
3580
}
3581

    
3582
.single .tags-header {
3583
    font-size: 0.62em;
3584
    cursor: pointer;
3585
    float: left;
3586
    margin-bottom:5px;
3587
}
3588

    
3589
.single .tags-header span.label {
3590
    font-size: 104%;
3591
}
3592

    
3593
.single .tags-content {
3594
    background-color: #84B7D0;
3595
    clear: both;
3596
    height: auto;
3597
    padding-bottom: 5px;
3598
    padding-top: 5px;
3599
    width: 300px;
3600
}
3601

    
3602
.single .column3 {
3603
    background-color: #A1C8DB;
3604
    width: 150px;
3605
    overflow: visible;
3606
    padding-bottom: 10px;
3607
    position: absolute;
3608
    right: 20px;
3609
    top: 130px;
3610
}
3611

    
3612
.single .col3 {
3613
    float: right;
3614
    width: 150px;
3615
    margin-right: 15px;
3616
    margin-bottom: 15px;
3617
}
3618

    
3619
.single .column3 .controls {
3620
    font-size: 80%;
3621
    height: 20px;
3622
    padding-left: 7px;
3623
    padding-right: 7px;
3624
    padding-top: 8px;
3625
    padding-bottom: 5px;
3626
    border-bottom: 1px solid #84B7D0;
3627
}
3628

    
3629
.single .column3 .vm-control:hover {
3630
    background-color: #5CA1C0;
3631
}
3632

    
3633
.single .column3 .previous {
3634
    float:left;
3635
    width: 72px;
3636
}
3637

    
3638
.single .column3 .next {
3639
    float: right;
3640
    text-align: center;
3641
    width: 60px;
3642
}
3643

    
3644
.single .column3 .next-label {
3645
    float: right;
3646
    margin-right: 3px;
3647
    margin-top: -2px;
3648
}
3649

    
3650
.single .column3 .next-arrow {
3651
    float: right;
3652
    height: 18px;
3653
    width: 10px;
3654
    background: url("../images/right-arrow.png") no-repeat scroll 3px 2px transparent;
3655
}
3656

    
3657
.single .column3 .prev-label {
3658
    float: left;
3659
    margin-left: 3px;
3660
    margin-top: -2px;
3661
}
3662

    
3663
.single .column3 .prev-arrow {
3664
    background: url("../images/left-arrow.png") no-repeat scroll 3px 2px transparent;
3665
    float: left;
3666
    height: 18px;
3667
    width: 10px;
3668
}
3669

    
3670
.single .column3 .separator {
3671
    width: 135px;
3672
    height: 1px;
3673
    background-color: #84B7D0;
3674
    margin: 0 0 0 7px;
3675
    clear: both;
3676
}
3677

    
3678
.single .column3 .servers {
3679
    font-size: 80%;
3680
    line-height: 15px;
3681
    padding-top: 10px;
3682
    text-align: right;
3683
    overflow: visible;
3684
    position: relative;
3685
}
3686

    
3687
.single .column3 .server-name {
3688
    margin-left: 10px;
3689
    padding-right: 5px;
3690
    cursor: pointer;
3691
    padding-bottom: 2px;
3692
}
3693
div.single div.column3 div.server-name:hover {
3694
    background-color: #5CA1C0;
3695
}
3696
.single .column3 .column3-selected {
3697
    background-color: #84B7D0;
3698
    color: white;
3699
    opacity: 0.8;
3700
    padding-left: 9px;
3701
    width: 160px;
3702
    filter: alpha(opacity = 80);
3703
    position: relative;
3704
    width: 126px;
3705
}
3706

    
3707
.single .toggler {
3708
    color: #FFFFFF;
3709
    float: right;
3710
    font-size: 140%;
3711
}
3712

    
3713
.single .cpu-usage, .single .network-usage {
3714
    text-align: center;
3715
    padding-top: 15px;
3716
    margin-bottom: 5px;
3717
    font-size: 90%;
3718
    font-weight: bold;
3719
}
3720

    
3721
.single .cpu-graph, .single .network-graph {
3722
    margin-left: 20px;
3723
    margin-bottom:30px;
3724
    width: 660px;
3725
}
3726

    
3727
.single div.lower .stats-select .stats-select-option.selected {
3728
    background-color: #4085A5;
3729
    color: #fff;
3730
}
3731

    
3732
.single div.lower .stats-select .stats-select-option {
3733
    cursor: pointer;
3734
    background-color: #DDF1FB;
3735
    color: #4085A5;
3736
    display: block;
3737
    float: left;
3738
    padding: 7px 10px;
3739
    font-size: 0.7em;
3740
}
3741

    
3742
.single div.lower img.stats {
3743
    margin-left: 82px;
3744
}
3745

    
3746
.single div.lower img.stats {
3747
    display: none;
3748
}
3749

    
3750
.single .single-image {
3751
    width: 126px;
3752
    height: 136px;
3753
    margin-bottom: 10px;
3754
    margin-left: 4px;
3755
    background-image: url("../images/icons/machines/large/unknown-sprite.png");
3756
    background-repeat: no-repeat;
3757
    cursor: pointer;
3758
}
3759

    
3760
.single .single-image-state1 {
3761
    background-position: 0px 0;
3762
}
3763

    
3764
.single .single-image-state3 {
3765
    background-position: -252px 0;
3766
}
3767

    
3768
.single .single-image-state4 {
3769
    background-position: -378px 0;
3770
}
3771

    
3772
.single .single-image-state2 {
3773
    background-position: -126px 0;
3774
}
3775

    
3776
.single .column3 .previous, .single .column3 .next {
3777
    cursor: pointer;
3778
    background-color: #84B7D0;
3779
    color: white;
3780
    font-size: 100%;
3781
    height: 15px;
3782
    padding-top: 2px;
3783
}
3784

    
3785
.single .column3 .disabled {
3786
    opacity: 0.5;
3787
    filter: alpha(opacity = 50);
3788
}
3789

    
3790
.single div.lower {
3791
    clear:both;
3792
    background: #EFF7FA repeat scroll 0 0;
3793
    width: 700px;
3794
    padding-bottom: 15px;
3795
}
3796

    
3797
.single div.upper {
3798
    background: transparent;
3799
    margin-bottom: 10px;
3800
    overflow: visible;
3801
    overflow: hidden;
3802
    width: 700px;
3803
    background: #EFF7FA repeat scroll 0 0;
3804
}
3805

    
3806
/* console css */
3807
.console-header-logo {
3808
    padding-top: 16px;
3809
    margin-left: 30px;
3810
    position: fixed;
3811
}
3812

    
3813
.console-header-logo img {
3814
    max-width:100%;
3815
    max-height:65px;
3816
}
3817

    
3818
#console-header div.help-text {
3819
    font-size: 70%;
3820
    font-weight:bold;
3821
    color:#FFFFFF;
3822
    position: absolute;
3823
    height: 20px;
3824
    top: 79px;
3825
}
3826

    
3827
div.console-container {
3828
    margin: 0 0em;
3829
    height: auto;
3830
}
3831

    
3832
#wrapper.console {
3833
    width: auto;
3834
}
3835

    
3836
.console-info {
3837
    font-size:80%;
3838
    color: white;
3839
    position:absolute;
3840
    margin: 15px 0 0 480px;
3841
}
3842

    
3843
applet {
3844
    width:100%;
3845
    height:100%;
3846
}
3847

    
3848
div.console-footer {
3849
    /* this is for version 0.5*/
3850
    display: none;
3851
}
3852

    
3853
.console-footer #footer-text{
3854
    float:left;
3855
    left: auto;
3856
    margin-left:30px;
3857
}
3858

    
3859
/* add network wizard (see also #wizard for shared classes) */
3860
#networks-wizard .header {
3861
    background-color: #4085A5;
3862
    height: 56px;
3863
}
3864

    
3865
#networks-wizard div.name-input {
3866
    margin: 75px 0 0 55px;
3867
}
3868

    
3869
#networks-wizard input {
3870
    border: 1px solid #CCCCCC;
3871
    color: #445566;
3872
    letter-spacing: 1px;
3873
    width: 170px;
3874
}
3875

    
3876
#networks-wizard span.help {
3877
    font-style: italic;
3878
    font-size: 80%;
3879
    margin-left: 10px;
3880
}
3881

    
3882
#networks-wizard .separator-end {
3883
    background-color: #387693;
3884
    height: 6px;
3885
    width: 479px;
3886
    margin-left: -13px;
3887
    margin-top: 19px;
3888
}
3889

    
3890
.red {
3891
    color: red;
3892
}
3893

    
3894
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3895
#add-machines-wizard span.machine-name {
3896
    margin-left: 4px;
3897
    vertical-align: text-top;
3898
}
3899

    
3900
#add-machines-wizard img.list-logo {
3901
    margin: 2px 1px 1px;
3902
}
3903

    
3904
.css-panes {
3905
    clear: both;
3906
    position: relative;
3907
    z-index: 10;
3908
}
3909

    
3910
.last .firewall-content {
3911
}
3912

    
3913
#pub .last .network-separator {
3914
    display:none;
3915
}
3916

    
3917
.public-networks .empty-network-slot {
3918
    display: none;
3919
}
3920

    
3921
.clearfix {
3922
    display: block;
3923
    width: auto;
3924
    zoom: 1;
3925
}
3926

    
3927
/* float clearing for all browsers except the devil one */
3928
.clearfix:after{
3929
  clear: both;
3930
  content: ".";
3931
  display: block;
3932
  height: 0;
3933
  visibility: hidden;
3934
  font-size: 0;
3935
}
3936

    
3937
* html .clearfix {
3938
    display: inline-block;
3939
}
3940

    
3941
.icon .cont-toggler {
3942
    margin-top: -1px;
3943
}
3944

    
3945
.icon .wave {
3946
    margin-right: 4px !important;
3947
    margin-top: 15px !important;
3948
}
3949

    
3950
.icon .status {
3951
    margin-right: 3px;
3952
}
3953

    
3954
#machinesview .status, .single .state {
3955
    font-size: 75%;
3956
}
3957

    
3958
#machinesview-list div.action-indicator {
3959
    margin:0 !important;
3960
    float: none !important;
3961
}
3962

    
3963
.icon div.action-indicator {
3964
    margin-top: 14px;
3965
    margin-right: 4px;
3966
}
3967

    
3968
div.action-indicator {
3969
    width: 15px;
3970
    height: 20px;
3971
    background-repeat: no-repeat;
3972
    background-position: 0 0;
3973
}
3974

    
3975
tbody.machines div.action-indicator {
3976
    position: relative;
3977
    top: -2px;
3978
}
3979
div.state .destroy, tbody.machines .destroy {
3980
    background-image: url("../images/icons/actions/medium/destroy.png");
3981
}
3982
div.state .console, tbody.machines .console {
3983
    background-image: url("../images/icons/actions/medium/console.png");
3984
}
3985
div.state .start, tbody.machines .start {
3986
    background-image: url("../images/icons/actions/medium/start.png");
3987
}
3988
div.state .reboot, tbody.machines .reboot {
3989
    background-image: url("../images/icons/actions/medium/reboot.png");
3990
}
3991
div.state .shutdown, tbody.machines .shutdown {
3992
    background-image: url("../images/icons/actions/medium/shutdown.png");
3993
}
3994

    
3995
h3.overlay-inner-title {
3996
    color: #4085A5;
3997
    font-size: 2em;
3998
}
3999

    
4000
#add-name-container {
4001
    margin-bottom: 10px;   
4002
}
4003

    
4004
.remove-field-trigger, .add-field-trigger {
4005
    cursor: pointer;
4006
}
4007

    
4008
.add-field-trigger img {
4009
    vertical-align: middle;
4010
}
4011

    
4012
.machine-now-building {
4013
    padding-right: 15px !important;
4014
    text-align: justify;
4015
}
4016

    
4017
.sub-text {
4018
    padding-top: 15px;
4019
    padding-right: 15px;
4020
    text-align: justify;
4021
    font-style: italic;
4022
    font-size: 0.8em !important;
4023
}
4024

    
4025
#notification-box a {
4026
    color: #4085A5;
4027
}
4028

    
4029
#notification-box .machine-title img {
4030
    vertical-align: middle;
4031
}
4032

    
4033
#notifiaction-box .password-header {
4034
    margin-bottom: 0 !important;
4035
}
4036

    
4037
#notification-box .password-container a {
4038
    color: #fff;
4039
    text-decoration: underline;
4040
}
4041

    
4042
#notification-box .password-container a:hover {
4043
    background-color: #fff;
4044
    color: #4085A5;
4045
}
4046

    
4047
#notification-box .password-container {
4048
    background: #4085A5;
4049
    border: none;
4050
}
4051

    
4052
#notification-box .password-container .password a {
4053
    font-weight: normal !important;
4054
}
4055

    
4056
#notification-box .cmd {
4057
    color: #fff;
4058
    font-family: monospace;
4059
    font-size: 1.6em;
4060
}
4061

    
4062
.machine-container .separator {
4063
    background-color: #B0D1E0;
4064
}
4065

    
4066
#creation-password-overlay div.password-cont {
4067
    margin: 10px auto;
4068
    padding: 10px;
4069
    border: 2px solid #75B54A;
4070
    background-color: #AADE87;
4071
    color: #447821;
4072
    text-align: left;
4073
    padding-left: 5em;
4074
    position: relative;
4075
}
4076

    
4077
#creation-password-overlay {
4078
    position: relative;
4079
}
4080

    
4081
#creation-password-overlay .form-action {
4082
    position: absolute;
4083
    bottom: 15px;
4084
    right: 13px;
4085
    font-size: 0.8em;
4086
}
4087

    
4088
#creation-password-overlay .password-label {
4089
    float: left;
4090
}
4091

    
4092
#creation-password-overlay .password {
4093
    font-size: 1.5em;
4094
    font-weight: bold;
4095
    letter-spacing: 2px;
4096
    font-family: Georgia, Times, serif;
4097
    margin-right: 5em;
4098
    float: right;
4099
    margin-top: -4px;
4100
}
4101

    
4102
.feedback-form .description {
4103
    margin-bottom: 25px;
4104
}
4105

    
4106
.feedback-form label {
4107
    display: block;
4108
    font-weight: bold;
4109
    margin-bottom: 10px;
4110
    font-size: 0.8em;
4111
}
4112

    
4113
.feedback-form .form-actions {
4114
    border-top: none;
4115
}
4116

    
4117
.nospace {
4118
    padding-top: 0 !important;
4119
    padding-bottom: 0 !important;
4120
}
4121

    
4122
.noborder {
4123
    border-top: none !important;
4124
    border-bottom: none !important;
4125
}
4126

    
4127
.overlay .feedback-form .messages.description {
4128
    padding-bottom:0;
4129
    margin-bottom: 0;
4130
}
4131

    
4132
.feedback-form .messages .error-message {
4133
    color: #f00;
4134
}
4135

    
4136
.feedback-form .messages .success-message {
4137
    color: #8AA87F;
4138
}
4139

    
4140
.feedback-form .feedback-message {
4141
    width: 548px;
4142
    height: 200px;
4143
    border: 1px solid #ddd;
4144
    padding: 5px;
4145
}
4146

    
4147
#feedback-form .empty-error-msg {
4148
    display: none;
4149
}
4150

    
4151
#feedback-form .data-text {
4152
    display: none;
4153
}
4154

    
4155
#feedback-form .message {
4156
    display: none;
4157
}
4158

    
4159
#feedback-form label {
4160
    display: block;
4161
    font-size: 0.85em;
4162
    font-weight: bold;
4163
}
4164

    
4165
#feedback-form label.inline {
4166
    display: inline;
4167
    padding-left: 5px;
4168
}
4169

    
4170
#feedback-form p {
4171
    padding: 1em 0;
4172
    color: #444;
4173
    margin-bottom: 10px;
4174
}
4175

    
4176
#feedback-form .description {
4177
    font-style: italic;
4178
    font-size: 0.9em;
4179
    color: #888;
4180
}
4181

    
4182
#feedback-form .feedback-text {
4183
    width: 98%;
4184
    height: 100px;
4185
    margin-top: 10px;
4186
    margin-bottom: 10px;
4187
}
4188

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

    
4193
#feedback-form .submit, #invform .submit {
4194
    background-color: #4085A5;
4195
    color: #fff;
4196
    border: none;
4197
    padding: 5px 16px;
4198
    cursor: pointer;
4199
    font-size: 1em;
4200
    position: relative;
4201
}
4202

    
4203
#feedback .submit {
4204
    float: right;
4205
    right: 10px;
4206
    margin-top: 10px;
4207
}
4208

    
4209

    
4210
#feedback-form .submit:hover, #invform .submit:hover {
4211
    background-color: #549FC3;
4212
}
4213

    
4214
.feedback-intro {
4215
    padding-right: 15px !important;
4216
    text-align: justify;
4217
}
4218

    
4219
.popup-body .message {
4220
    padding: 20px 5px;
4221
    display: none;
4222
}
4223

    
4224
.popup-body .loading {
4225
    color: #fff;
4226
}
4227

    
4228
.popup-body .success {
4229
    color: #1F921A;
4230
}
4231

    
4232
.popup-body .errormsg {
4233
    color: #E32424;
4234
}
4235

    
4236

    
4237
.close-msg-box {
4238
    display: block;
4239
    margin-top: 10px;
4240
    cursor: pointer;
4241
    color: #4085A5;
4242
    text-decoration: underline;
4243
}
4244

    
4245

    
4246
.console .ip-version-label {
4247
    margin: 0 5px;
4248
}
4249

    
4250
.ipv6-text, .ipv4-text {
4251
    font-size: 0.9em;
4252
}
4253

    
4254
.fqdn {
4255
}
4256

    
4257
.column2 .fqdn {
4258
  padding: 3px 10px;
4259
}
4260

    
4261
.tooltip {
4262
    background-color: #C4DDE9;
4263
    color: #000;
4264
    font-size: 0.7em;
4265
    padding: 0.2em 0.5em;
4266
    border: 1px solid #888;
4267
    z-index: 50000;
4268
}
4269

    
4270
/*404 and 500 pages*/
4271

    
4272
.error_page {
4273
    position: relative;
4274
    top: 40px;
4275
    padding-bottom: 140px !important;
4276
}
4277

    
4278
.error_page h1 {
4279
    font-weight: normal;
4280
}
4281

    
4282
.error_page .msg_header {
4283
    margin: 0px;
4284
    font-size: 10em;
4285
    position: absolute;
4286
    left: -5px;
4287
    top: 0px;
4288
    color: #4085A5;
4289
    font-family: arial, verdana;
4290
}
4291

    
4292
.error_page p.error_desc {
4293
    color: #fff;
4294
    font-size: 0.8em;
4295
}
4296

    
4297
.error_page {
4298
    padding-right: 50px !important;
4299
    padding-left: 100px !important;
4300
}
4301

    
4302
.error_page .error_content {
4303
    padding-left: 150px;
4304
    padding-top: 97px;
4305
}
4306

    
4307
.error_page .error_content .links, .info_content .links {
4308
    margin-top: 10px;
4309
    margin-left: 20px;
4310
}
4311

    
4312
.error_page .http_error .code {
4313
    letter-spacing: -10px;
4314
    font-size: 9em;
4315
}
4316

    
4317
.error_page .http_error .msg {
4318
    letter-spacing: -1px;
4319
    font-size: 2em;
4320
}
4321

    
4322
.error_page .http_error {
4323
    position: absolute;
4324
    right: 0px;
4325
    bottom: 0px;
4326
    color: #75B3D0;
4327
    line-height: 1em;
4328
}
4329

    
4330
.error_page .error_content a, .info_content .links a {
4331
    color: #4085A5;
4332
    font-weight: bold;
4333
    margin-right: 10px;
4334
    font-size: 0.9em;
4335
}
4336

    
4337
.error_body #container, .info_body #container {
4338
    background-position: right 200px;
4339
}
4340

    
4341
.info_page h1 {
4342
    color: #4085A5;
4343
    font-size: 2em;
4344
    font-weight: normal;
4345
}
4346

    
4347
.info_page p {
4348
    color: #ffffff;
4349
    margin: 1em 0;
4350
}
4351

    
4352
.info_body p a, .error_body p a{
4353
    color: #4085A5;
4354
    text-decoration: underline;
4355
}
4356

    
4357
.error_404 .http_error .code {
4358
    letter-spacing: -7px;
4359
}
4360

    
4361
.network-progress-indicator {
4362
    position: relative;
4363
    display: none;
4364
}
4365

    
4366
.network-progress-indicator img {
4367
    position: absolute;
4368
    bottom: 44px;
4369
    left: 340px;
4370
}
4371

    
4372

    
4373
.single .progress-message {
4374
    margin-top: 90px;
4375
    font-size: 0.6em;
4376
    padding: 0 10px;
4377
    text-align: center;
4378
}
4379

    
4380
/*metadata keys/values*/
4381
.items .tag-item  {
4382
    display: block;
4383
}
4384

    
4385
.single .items .tag-item .key {
4386
    width: 60px;
4387
}
4388

    
4389
.running .scrollable, .terminated .scrollable {
4390
    height: 42px;
4391
}
4392

    
4393
.items .tag-item .key {
4394
    margin-right: 5px;
4395
    width: 30px;
4396
    display: block;
4397
    float: left;
4398
    color: #000;
4399
}
4400

    
4401
.items .tag-item .value {
4402
    color: #444;
4403
}
4404

    
4405
#machinesview-list {
4406
    display: none;
4407
}
4408

    
4409
#machinesview-single {
4410
    position: relative;
4411
    display: none;
4412
}
4413

    
4414
#machinesview-icon {
4415
    display: none;
4416
}
4417

    
4418
#machinesview-icon, #machinesview-single, #machinesview-list {
4419
    
4420
}
4421

    
4422
tbody.machines .spinner {
4423
    margin-top: 0!important;
4424
    margin: 0 !important;
4425
    float: none !important;
4426
}
4427

    
4428
.slider .slider-point {
4429
    width: 4px;
4430
    height: 3px;
4431
    margin-left: 1px;
4432
    background-color: transparent;
4433
    display: block;
4434
    position: absolute;
4435
    z-index: 10;
4436
    bottom: 0px;
4437
}
4438

    
4439
.slider .slider-point-light {
4440
    background-color: transparent;
4441
}
4442

    
4443
.slider-point-text {
4444
    font-size: 0.6em;
4445
    position: absolute;
4446
    top: 4px;
4447
    border-top: 5px solid #C5DEE9;
4448
    padding: 3px;
4449
    color: #4085A5;
4450
    display: block;
4451
    min-width: 6px;
4452
    text-align: middle;
4453
}
4454

    
4455
.slider .handle {
4456
    z-index: 50;
4457
}
4458

    
4459
.modal p.desc {
4460
    margin: 5px 0;
4461
    margin-left: 37px;
4462
    font-size: 0.8em;
4463
    color: #888;
4464
}
4465

    
4466
.api_overlay_template {
4467
    display: none;
4468
}
4469

    
4470
.api_content .password-container .password {
4471
    color: #fff;
4472
    font-size: 1.1em;
4473
}
4474

    
4475
#disks-pane {
4476
    margin-top: 58px;
4477
}
4478

    
4479
span.resend-msg {
4480
    display: block;
4481
    margin-bottom: 5px;
4482
}
4483

    
4484
.success-msg {
4485
    background-color: #5CAD54;
4486
    color: #fff;
4487
    padding: 0.4em;
4488
    border: 1px solid #ddd;
4489
}
4490

    
4491
.error-msg {
4492
    background-color: #800000;
4493
    color: #fff;
4494
    padding: 0.4em;
4495
    border: 1px solid #ddd;
4496
}
4497

    
4498
.success-msg em, .error-msg em {
4499
    font-weight: bold;
4500
    font-style: normal;
4501
    font-size: 0.9em;
4502
}
4503

    
4504
.pagination {
4505
            font-size: 80%;
4506
        }
4507
        
4508
.pagination a {
4509
    text-decoration: none;
4510
        border: solid 1px #AAE;
4511
        color: #15B;
4512
}
4513

    
4514
.pagination a, .pagination span {
4515
    display: block;
4516
    float: left;
4517
    padding: 0.3em 0.5em;
4518
    margin-right: 5px;
4519
        margin-bottom: 5px;
4520
        min-width:1em;
4521
        text-align:center;
4522
}
4523

    
4524
.pagination .current {
4525
    background: #4085A5;
4526
    color: #fff;
4527
        border: solid 1px #AAE;
4528
}
4529

    
4530
.pagination .current.prev, .pagination .current.next{
4531
        color:#999;
4532
        border-color:#999;
4533
        background:#fff;
4534
}
4535

    
4536
table.list-machines .wave {
4537
    float: none !important;
4538
    margin: 0 !important;
4539
}
4540

    
4541
.overlay {
4542
    display: none;
4543
}
4544

    
4545
.overlay .copy-content .clip-copy  {
4546
    right: 10px;
4547
    top:8px;
4548
    border: 1px solid #fff;
4549
}
4550

    
4551
.overlay .copy-content {
4552
    background-color: #387693;
4553
    color: #fff;
4554
    padding: 10px;
4555
    font-size: 1.2em;
4556
    text-align: center;
4557
    position: relative;
4558
}
4559

    
4560
.overlay {
4561
    background-color: #fff;
4562
    border: 2px solid #444;
4563
    text-align: left;
4564

    
4565
    -moz-box-shadow: 0 0 90px 5px #000;
4566
    -webkit-box-shadow: 0 0 90px 5px #000;
4567
    box-shadow: 0 0 90px 5px #000;
4568
    width: 600px;
4569
}
4570

    
4571
.overlay.overlay-createvm {
4572
    width: 640px;
4573
}
4574

    
4575
.overlay a {
4576
    color: #387693;
4577
}
4578

    
4579
.overlay .diagnostics-list {
4580
    height: 400px;
4581
    overflow: scroll;
4582
    overflow-y: scroll;
4583
    overflow-x: hidden;
4584
}
4585

    
4586
.overlay .overlay-content .description.subinfo, .overlay .extra-info {
4587
    margin-bottom:0;
4588
    border-bottom: none;
4589
    padding-bottom:0;
4590
    margin-top: 10px;
4591
    padding-top:10px;
4592
    border-top: 1px solid #64a6c4;
4593
    /*border-top: 1px solid #DBE6EB;*/
4594
    font-size: 0.8em;
4595
}
4596

    
4597
.overlay .overlay-content .important {
4598
    color: #800000;
4599
}
4600

    
4601
.overlay .overlay-content .description.noborder {
4602
  margin-bottom:0;
4603
  border:0;
4604
}
4605

    
4606
.overlay .overlay-content .description {
4607
    color: #444;
4608
    border-bottom: 1px solid #64a6c4;
4609
    margin-bottom: 10px;
4610
    padding-bottom: 10px;
4611
    font-size: 0.9em;
4612
    line-height: 1.6em;
4613
}
4614

    
4615
.overlay .overlay-content .empty-message {
4616
    margin-bottom: 10px;
4617
}
4618

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

    
4628
.overlay h3.overlay-header .title {
4629
    float: left;
4630
}
4631

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

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

    
4651
.overlay .message {
4652
}
4653

    
4654
.overlay .actions {
4655
    position: absolute;
4656
    right: 0.75em;
4657
    top: 0.6em;
4658
}
4659

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

    
4671
.overlay-error .error-more-details {
4672
    margin-top: 5px;
4673
    max-height: 210px;
4674
    overflow: auto;
4675
}
4676

    
4677
.overlay-error .key.details.expand {
4678
    background-image: url("../images/plus-8.png");
4679
}
4680

    
4681
.overlay-error .key.details {
4682
    background-color: #5189A3;
4683
    cursor: pointer;
4684
    background-image: url("../images/minus-8.png");
4685
    background-repeat: no-repeat;
4686
    background-position: 545px;
4687
}
4688

    
4689
.overlay-error .container {
4690
    padding-top: 1.9em;
4691
}
4692

    
4693
.overlay-error .error-details {
4694
    font-size: 0.8em;
4695
    margin-top: 10px;
4696
}
4697

    
4698
.overlay-error .error-details anonymous {
4699
    display: block;
4700
    margin-top: 10px;
4701
}
4702

    
4703
.overlay-error h3.overlay-header {
4704
    background-color: #800000;
4705
    color: #fff;
4706
}
4707

    
4708
.overlay-error.non-critical h3.overlay-header {
4709
    background-color: #987249;
4710
}
4711

    
4712
.overlay-error span.key {
4713
    font-weight: normal;
4714
    display: block;
4715
    margin-top: 0.5em;
4716
    background-color: #74AEC9;
4717
    color: #fff;
4718
    padding: 0.4em;
4719
    font-size: 0.8em;
4720
    font-weight: bold;
4721
}
4722

    
4723
.overlay-error .indicator {
4724
    background-color: #880000;
4725
    color: #fff;
4726
    padding: 4px;
4727
    display: block;
4728
    float: left;
4729
    border: 1px solid #444;
4730
}
4731

    
4732
.overlay-error .nav-btn:hover {
4733
    
4734
}
4735

    
4736
.overlay-error .nav-btn {
4737
    margin-left: 5px;
4738
    color: #fff;
4739
    display: block;
4740
    float: left;
4741
    padding: 4px;
4742
    background-color: #AAA;
4743
    border: 1px solid #444;
4744
}
4745

    
4746
.overlay-error .error-nav {
4747
    position: absolute;
4748
    right: 0px;
4749
    bottom: -25px;
4750
    font-size: 0.8em;
4751
}
4752

    
4753
.overlay-error span.value, .overlay-error div.value {
4754
    padding: 0.4em;
4755
    display: block;
4756
    margin-bottom: 0.3em;
4757
}
4758

    
4759
.overlay h3 .closeme {
4760
    float: right;
4761
    font-size: 0.7em;
4762
    margin-top: 0.2em;
4763
    cursor: pointer;
4764
}
4765

    
4766
.overlay .overlay-header .subtitle {
4767
    display: block;
4768
    font-size: 0.8em;
4769
    color: #ddd;
4770
}
4771

    
4772
.overlay .overlay-header .subtitle img {
4773
    vertical-align: middle;
4774
    margin-left: 10px;
4775
    margin-bottom: 2px;
4776
}
4777

    
4778
.overlay-info .msg-log-entry .src {
4779
    color: #4085A5;
4780
    float: right;
4781
    font-size: 0.9em;
4782
}
4783

    
4784
.overlay-info .msg-log-entry .date {
4785
    font-style: italic;
4786
}
4787

    
4788
.overlay-info .msg-log-entry pre {
4789
    color: #333;
4790
    width: 100%;
4791
    display: none;
4792
    margin: 10px 0;
4793
}
4794

    
4795
.msg-log-entry.warning {
4796
    color: #E57F01;
4797
}
4798

    
4799
.overlay-info .msg-log-entry.with-details .src {
4800
    margin-right: 15px;
4801
}
4802

    
4803
.overlay-info .msg-log-entry.with-details {
4804
    cursor: pointer;
4805
}
4806

    
4807
.overlay-info .msg-log-entry.with-details {
4808
    background-image: url("../images/plus-8-dark.png");
4809
    background-repeat: no-repeat;
4810
    background-position: 99% 9px;
4811
}
4812

    
4813
.overlay-info .msg-log-entry.with-details.expanded {
4814
    background-image: url("../images/minus-8-dark.png");
4815
}
4816

    
4817
.overlay-info .msg-log-entry .msg {
4818
    display: inline-block;
4819
    margin-left: 10px;
4820
}
4821

    
4822
.overlay-info .msg-log-entry {
4823
    border-bottom: 1px solid #aaa;
4824
    padding: 5px;
4825
}
4826

    
4827
.overlay-info .description.subinfo {
4828
    border: none !important;
4829
    padding-top: 0 !important;
4830
}
4831

    
4832
.overlay-info .content {
4833
    background-repeat: no-repeat;
4834
    background-position: 110% 110%;
4835
    background-color: rgba(255,255,255,0.6)
4836
}
4837

    
4838
.overlay-info .overlay-header {
4839
    background-color: #4085A5;
4840
}
4841

    
4842
.overlay-info .overlay-header .title {
4843
    color: #fff;
4844
}
4845

    
4846
.overlay-info .overlay-header .closeme {
4847
    color: #fff;
4848
}
4849

    
4850
#loading-view {
4851
    width: 400px;
4852
    margin: 0 auto;
4853
    padding: 20px 0;
4854
    font-size: 0.8em;
4855
}
4856

    
4857
#loading-view .header.off {
4858
    color: #829096;
4859
}
4860

    
4861
#loading-view .header.on {
4862
    color: #fff;
4863
    background-image: url("../images/icons/indicators/small/progress.gif");
4864
}
4865

    
4866
#loading-view .header.done {
4867
    color: #2B6681;
4868
    background-image: url("../images/check.png");
4869
}
4870

    
4871
#loading-view .header {
4872
    font-size: 0.9em;
4873
    text-align: left;
4874
    border-bottom: 1px solid #578BA3;
4875
    margin-bottom: 10px;
4876
    padding-bottom: 6px;
4877
    background-repeat: no-repeat;
4878
    background-position: 380px 0px;
4879
}
4880

    
4881
#loading-view .header span {
4882
    font-weight: bold;
4883
    color: #4085A5;
4884
}
4885

    
4886
#loading-view .info {
4887
    color: #ddd;
4888
}
4889

    
4890
.options-list {
4891
    margin-top: 0.5em;
4892
    font-size: 0.8em;
4893
}
4894

    
4895
.options-list.four li {
4896
    float: left;
4897
    display: block;
4898
    width: 25%;
4899
    margin-bottom: 5px;
4900
}
4901

    
4902
.options-list.five li:nth-child(4n) .options-object-cont {
4903
    margin-right: 0;
4904
}
4905

    
4906
.options-list.five li {
4907
    float: left;
4908
    display: block;
4909
    width: 20%;
4910
    margin-bottom: 5px;
4911
}
4912

    
4913
.options-list.five li:nth-child(5n) .options-object-cont {
4914
    margin-right: 0;
4915
}
4916

    
4917
.options-object-cont input {
4918
    border: 1px solid #aaa;
4919
    width: 92px;
4920
    padding: 0;
4921
    margin: 0;
4922
    margin-top:3px;
4923
    padding: 2px;
4924
}
4925

    
4926
.options-list.three li {
4927
    float: left;
4928
    display: block;
4929
    width: 33%;
4930
    margin-bottom: 5px;
4931
}
4932

    
4933
.meta-list .options-list.three li.options-object.create .options-object-cont {
4934
  background-position: 95% 5px;
4935
}
4936

    
4937
.meta-list .options-list.four li.options-object.create .options-object-cont {
4938
  background-position: 97% 5px;
4939
}
4940

    
4941
.meta-list .options-list li.options-object.create .options-object-cont {
4942
    background-image: url("../images/option-action-add.png");
4943
    background-repeat: no-repeat;
4944
    background-position: 90px 5px;
4945
}
4946

    
4947
.meta-list .options-list li .options-object-cont .option-action,
4948
.meta-list .options-list li.options-object.create {
4949
    cursor: pointer !important;
4950
}
4951

    
4952
.meta-list .options-list li .options-object-cont {
4953
    cursor: inherit;
4954
}
4955

    
4956
.options-list li .options-object-cont {
4957
    padding: 5px;
4958
    margin-right: 4px;
4959
    border: 1px solid #A6D1E6;
4960
    cursor: pointer;
4961
    min-height: 35px;
4962
    position: relative;
4963
}
4964

    
4965
.options-list.three li:nth-child(3n) .options-object-cont {
4966
    margin-right: 0;
4967
}
4968

    
4969
.options-list li.selected .options-object-cont {
4970
    background-color: #efefef;
4971
    border: 2px solid #4085A5;
4972
    padding: 4px;
4973
}
4974

    
4975
.options-list li.selected .options-object-cont .title {
4976
}
4977

    
4978
.options-list li.options-object .title {
4979
    display: block;
4980
    color: #FF7F2A;
4981
    margin-bottom: 2px;
4982
}
4983

    
4984
.options-list li .option-action {
4985
    display: none;
4986
    position: absolute;
4987
    background-repeat: no-repeat;
4988
}
4989

    
4990
.options-list.five li.editing {
4991
    width: 40%;
4992
}
4993

    
4994
.options-list.five li.editing .value {
4995
    display: none;
4996
}
4997

    
4998
.options-list li .remove {
4999
    background-image: url("../images/option-action-remove.png");
5000
    width:10px;
5001
    height:10px;
5002
    right:5px;
5003
    top: 5px;
5004
}
5005

    
5006
.options-list li .edit {
5007
    background-image: url("../images/option-action-edit.png");
5008
    width:10px;
5009
    height:10px;
5010
    right:5px;
5011
    bottom: 8px;
5012
}
5013

    
5014
.options-list li:hover .option-action  {
5015
    display: block;
5016
}
5017

    
5018
.options-list li.options-object .value {
5019
    color: #4085A5;
5020
    margin-top: 5px;
5021
    display: block;
5022
}
5023

    
5024
.options-list li.selected.options-object .value {
5025
}
5026

    
5027
.options-list li .options-object-cont:hover {
5028
    background-color: #fff;
5029
}
5030

    
5031
.options-list li.selected .options-object-cont:hover {
5032
    background-color: #fff;
5033
}
5034

    
5035
.options-list li img {
5036
    float: left;
5037
    margin:2px;
5038
    margin-right: 10px;
5039
    padding-bottom:10px;
5040
}
5041

    
5042
#network-vms-select-content li.options-object .value {
5043
    margin-top: 10px;
5044
    margin-left: 30px;
5045
}
5046

    
5047
#network-vms-select-content li.options-object:hover .options-object-cont,
5048
#network-vms-select-content li.options-object .options-object-cont {
5049
    background-image: url("../images/option-action-add-dark.png");
5050
    background-repeat: no-repeat;
5051
    background-position: 160px 28px;
5052
}
5053

    
5054
#network-vms-select-content li.selected:hover .options-object-cont,
5055
#network-vms-select-content li.selected .options-object-cont {
5056
    background-image: url("../images/option-action-remove.png") !important;
5057
}
5058

    
5059
#metadata-overlay-content .view .value {
5060
    margin-top: 10px;
5061
}
5062

    
5063
#metadata-overlay-content {
5064
    position: relative;
5065
}
5066

    
5067
.vm-meta .editor .predefined .predefined-meta-key:hover {
5068
    background-color: #4e8eac;
5069
    color: #fff;
5070
}
5071

    
5072
.vm-meta .editor .predefined .predefined-meta-key {
5073
    float: left;
5074
    margin-right: 5px;
5075
    padding: 4px;
5076
    display: block;
5077
    cursor: pointer;
5078
}
5079

    
5080
.vm-meta .editor .predefined {
5081
    background-color: #A6D1E6;
5082
    font-size: 0.9em;
5083
    border-top: 1px solid #ddd;
5084
}
5085

    
5086
.vm-meta .editor input {
5087
}
5088
.vm-meta .editor {
5089
    margin-bottom: 10px;
5090
}
5091

    
5092
.vm-meta .editor .form-actions .form-action {
5093
    min-width: 50px;
5094
}
5095

    
5096
.vm-meta .editor .form-field input.meta-key {
5097
    width: 90px;
5098
}
5099

    
5100
.vm-meta .form-field {
5101
    float: left;
5102
}
5103

    
5104
.vm-meta .form-actions .form-action {
5105
    float: left;
5106
    margin-right: 10px;
5107
    height: 11px;
5108
}
5109

    
5110
.vm-meta .editor .form-actions .cancel {
5111
    margin-right: 0;
5112
}
5113

    
5114
.vm-meta .editor .form-actions {
5115
    float: right;
5116
    margin:0;
5117
    padding:0;
5118
    margin-left: 15px;
5119
    margin-top: 0px;
5120
}
5121

    
5122
.vm-meta .editor {
5123
    background-color: rgba(64, 133, 165, 0.898) !important;
5124
    background-color: #649DB8;
5125
    font-size:0.9em;
5126
}
5127

    
5128
.vm-meta .meta-key-title {
5129
    font-size: 1.3em;
5130
    color: #fff;
5131
    margin-bottom: 10px;
5132
    display: none;
5133
    float: left;
5134
}
5135

    
5136
.vm-meta .editor-content {
5137
    padding: 10px;
5138
}
5139

    
5140
.vm-meta .inner-mask {
5141
    background-color: #fff;
5142
    opacity:0.6;
5143
    position: absolute;
5144
    top:0;
5145
    left:0;
5146
}
5147

    
5148
.vm-meta .editor label {
5149
    float: left;
5150
    color: #fff;
5151
    margin-right: 2px;
5152
    padding-top:4px;
5153
    font-size: 0.9em;
5154
}
5155

    
5156
.vm-meta .editor input {
5157
    border: none;
5158
    width: 170px;
5159
    margin-left: 10px;
5160
    font-size: 0.9em;
5161
    padding: 4px;
5162
}
5163

    
5164
.vm-meta li.create .options-object-cont {
5165
    background-color: #B3C9AD ;
5166
    border-color: #788774;
5167
}
5168
.vm-meta li.create .options-object-cont .value,
5169
.vm-meta li.create .options-object-cont .title {
5170
    color: #fff;
5171
}
5172

    
5173
#createvm-overlay-content {
5174
    padding: 0;
5175
}
5176

    
5177
.overlay-createvm .container {
5178
    width: 624px !important;
5179
}
5180

    
5181
.create-vm .vm-network .list-cont.personalize-cont:last-child .confirm-params {
5182
  margin-right: 0!important;
5183
}
5184

    
5185
.create-vm .vm-network .list-cont.personalize-cont:last-child {
5186
  border-right: none;
5187
  margin-right: 0;
5188
  width: 298px;
5189
}
5190

    
5191
.create-vm .vm-network .list-cont.personalize-cont .confirm-params {
5192
  max-height: 240px;
5193
}
5194

    
5195
.create-vm .vm-network .list-cont.personalize-cont {
5196
  height: 330px;
5197
}
5198

    
5199
.create-vm .vm-network .list-cont.personalize-cont {
5200
    width: 47%;
5201
}
5202

    
5203
.create-vm .header-step.current {
5204
    font-weight: bold;
5205
}
5206

    
5207
.create-vm .create-step-cont {
5208
    min-height: 240px;
5209
}
5210
.create-vm .create-controls {
5211
    padding: 10px;
5212
}
5213

    
5214
.create-vm ul li {
5215
    cursor: pointer;
5216
    padding: 4px;
5217
}
5218

    
5219
.create-vm ul li.selected {
5220
    background-color: #aaa;
5221
}
5222

    
5223
.cont-toggler-wrapper {
5224
  float: left;
5225
  margin-right: 5px;
5226
}
5227

    
5228
.cont-toggler {
5229
    background-image: url("../images/down-arrow.png");
5230
    background-position: right;
5231
    background-repeat: no-repeat;
5232
    background-color: #A1C8DB;
5233
    display: inline-block;
5234
    border-right: 6px solid #A1C8DB;
5235
    padding:2px;
5236
    padding-right: 14px;
5237
    padding-left:0;
5238
    cursor: pointer;
5239
    color: #fff;
5240
    font-size: 0.9em;
5241
    float: left;
5242
    margin-right: 5px;
5243
}
5244

    
5245
.cont-toggler .label {
5246
    background-color: #98BDCF;
5247
    padding: 2px;
5248
    padding-left: 5px;
5249
    padding-right: 5px;
5250
}
5251

    
5252
.cont-toggler.open {
5253
    background-color: #98BDCF;
5254
    border-color: #98BDCF;
5255
    background-image: url("../images/up-arrow.png");
5256
}
5257

    
5258
.cont-toggler.open .label {
5259
    background-color: #4085A5;
5260
}
5261

    
5262
.overlay .form label {
5263
    font-color: #444;
5264
    margin-right: 10px;
5265
}
5266

    
5267
.form-field.error label {
5268
    color: #ff0000;
5269
    text-decoration: underline;
5270
}
5271

    
5272
.form-field input {
5273
    border: 1px solid #aaa;
5274
    width: 200px;
5275
    padding: 3px;
5276
}
5277

    
5278
.form-actions {
5279
    margin-top: 5px;
5280
    padding-top:5px;
5281
    border-top: 1px solid #64a6c4;
5282
    font-size: 0.8em;
5283
}
5284

    
5285
.form-actions.plain {
5286
    margin-top: 0px;
5287
    padding-top:0px;
5288
    border-top: 0px;
5289
}
5290

    
5291
.form-action {
5292
    float: right;
5293
    min-width: 140px;
5294
    background-color: #FF7F2A;
5295
    border: 1px solid #FF7F2A;
5296
    text-align: center;
5297
    color: #FFFFFF;
5298
    cursor: pointer;
5299
    padding: 4px;
5300
}
5301

    
5302
.form-action:hover {
5303
    background-color: #FF9955;
5304
    color: #FFF;
5305
}
5306

    
5307
.form-action.prev,
5308
.form-action.cancel {
5309
    background-color: #800;
5310
    border: 1px solid #800;
5311
    float: left;
5312
}
5313

    
5314
.form-action.prev:hover,
5315
.form-action.cancel:hover {
5316
    background-color: #CC0000;
5317
    color: #fff;
5318
}
5319

    
5320
.form-action.next,
5321
.form-action.ok {
5322
    background-color: #080;
5323
    border: 1px solid #080;
5324
}
5325

    
5326
.form-action.next:hover,
5327
.form-action.ok:hover {
5328
    background-color: #00aa00;
5329
    color: #fff;
5330
}
5331

    
5332
.form-action .create,
5333
.form-action .submit {
5334

    
5335
}
5336

    
5337
.form-action.in-progress, button.in-progress {
5338
    background-image: url("../images/icons/indicators/medium/horizontal-progress.gif");
5339
    background-repeat: no-repeat;
5340
    background-position: center center;
5341
    color: transparent;
5342
}
5343

    
5344
#createvm-overlay-content {
5345
    padding: 0;
5346
}
5347

    
5348
.create-vm .image-details.selected .size {
5349

    
5350
}
5351

    
5352
.create-vm .image-details .show-details:hover {
5353
    color: #aaa !important; 
5354
}
5355
.create-vm .image-details.selected .show-details:hover {
5356
    color: #fff !important; 
5357
}
5358

    
5359
.create-vm .image-details.selected .show-details,
5360
.create-vm .image-details.selected .size {
5361
    color: #eee;
5362
}
5363

    
5364
.create-vm .image-details.selected span.owner {
5365
    color: #fff;
5366
}
5367

    
5368

    
5369
.create-vm .image-details p {
5370
    font-size: 0.8em;
5371
    padding-left: 27px;
5372
    display:block;
5373
}
5374

    
5375
.create-vm .image-details span.owner {
5376
    display: block;
5377
    font-size: 0.9em;
5378
    float: right;
5379
    color: #FF7F2A;
5380
    position: absolute;
5381
    top: 5px;
5382
    right: 5px;
5383
}
5384

    
5385
.create-vm .select-image .show-details {
5386
    display: none;
5387
    font-size: 0.8em;
5388
    text-decoration: underline;
5389
    color: #000;
5390
    position: absolute;
5391
    bottom: 5px;
5392
    right: 5px;
5393
}
5394

    
5395
.create-vm .image-details .size {
5396
    margin-top: 2px;
5397
    font-size: 0.8em;
5398
    color: #aaa;
5399
    margin-left: 10px;
5400
}
5401

    
5402
.create-vm .step-cont {
5403
    margin: 15px;
5404
}
5405

    
5406
.create-vm .create-step-cont {
5407
    min-height: 250px;
5408
    float: left;
5409
    width: 624px;
5410
}
5411

    
5412
.create-vm .create-controls {
5413
    padding: 10px;
5414
    border-top: 1px solid #ddd;
5415
}
5416

    
5417
.create-vm .empty {
5418
    font-size: 0.8em;
5419
    color: #444;
5420
}
5421

    
5422
.create-vm h4 {
5423
    color: #5CA1C0;
5424
    margin-bottom: 0.5em;
5425
    font-family: arial;
5426
}
5427
.create-vm ul li {
5428
    cursor: pointer;
5429
    padding: 4px;
5430
    font-size: 0.9em;
5431
}
5432

    
5433
.create-vm .create-step-cont li.ssh-key-option.selected,
5434
.create-vm .create-step-cont li.list-item-option.selected,
5435
.create-vm ul li.selected {
5436
    background-color: #FF7F2A;
5437
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5438
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5439
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5440
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5441
    color: #fff;
5442
}
5443

    
5444
.create-vm .images-list-cont.loading .loading-indicator {
5445
    display: block !important;
5446
}
5447

    
5448
.create-vm .images-list-cont .loading-indicator {
5449
    display: none;
5450
    position: absolute;
5451
    right: -13px;
5452
    top: 2px;
5453
    width: 30px;
5454
    height: 10px;
5455
    background-repeat: no-repeat;
5456
    background-image: url("../images/icons/indicators/medium/progress.gif");
5457
}
5458

    
5459
.create-vm .images-list-cont h4 {
5460
    position: relative;
5461
}
5462

    
5463
.create-vm .images-list-cont {
5464
    width: 40%;
5465
    float: left;
5466
    padding-left: 3%;
5467
    padding-right: 3%;
5468
}
5469

    
5470
.create-vm li p.desc {
5471
    font-size: 0.9em;
5472
}
5473

    
5474
.create-vm p.desc.warning {
5475
    color: #880000;
5476
}
5477

    
5478
.create-vm p.desc.empty {
5479
    color: #000;
5480
}
5481

    
5482
.create-vm p.desc {
5483
    font-size: 0.8em;
5484
    color: #888;
5485
    margin-bottom: 10px;
5486
}
5487

    
5488
.create-vm li.role .values .val:hover {
5489
    background-color: #eee;
5490
}
5491
.create-vm li.role .values .val.selected,  .create-vm li.role .values .val.selected:hover {
5492
    color: #fff;
5493
    background-color: #FF9955;
5494
}
5495

    
5496
.create-vm .images-filter-cont, .create-vm .flavors-predefined-cont {
5497
    width: 18%;
5498
    padding-right: 4%;
5499
    float:left;
5500
    border-right: 1px solid #A1C8DB;
5501
    overflow: auto;
5502
}
5503

    
5504
.create-vm .flavor-options-cont {
5505
    width: 74%;
5506
    float: left;
5507
    margin-left: 20px;
5508
}
5509

    
5510
.create-vm .flavor-options-cont .flavor-options li:hover {
5511
    background-image:-webkit-linear-gradient(top, #E8F4FA, #D1E7F0);
5512
    background-image:-o-linear-gradient(top, #E8F4FA, #D1E7F0);
5513
    background-image:-moz-linear-gradient(top, #E8F4FA, #D1E7F0);
5514
    background-image:linear-gradient(top, #E8F4FA, #D1E7F0);
5515
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8F4FA', endColorstr='#D1E7F0', GradientType=0);
5516
}
5517

    
5518
.create-vm .flavor-options-cont .flavor-options li.disabled * {
5519
    color: #eee !important;
5520
}
5521

    
5522
.create-vm .flavor-options-cont .flavor-options li.disabled {
5523
    background-image:linear-gradient(top, #aaa, #ddd);
5524
    background-image:-webkit-linear-gradient(top, #aaa, #ddd);
5525
    background-image:-o-linear-gradient(top, #aaa, #ddd);
5526
    background-image:-moz-linear-gradient(top, #aaa, #ddd);
5527
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#dddddd', GradientType=0);
5528
}
5529

    
5530
.create-vm .flavor-options-cont .flavor-options li.selected {
5531
    background-color: #FF9955;
5532
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5533
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5534
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5535
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5536
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9955', endColorstr='#E88B4D', GradientType=0);
5537
    border: 1px solid #C97943;
5538
}
5539

    
5540
.create-vm .predefined-list li.disabled {
5541
    color: #ddd !important;
5542
}
5543

    
5544
.create-vm .flavor-options-cont .flavor-options li {
5545
    display: block;
5546
    float: left;
5547
    margin-right: 10px;
5548
    margin-bottom: 9px;
5549
    padding: 9px 14px;
5550
    border: 1px solid #aaa;
5551
    background-image:-webkit-linear-gradient(top, #D1E7F0, #E8F4FA);
5552
    background-image:-o-linear-gradient(top, #D1E7F0, #E8F4FA);
5553
    background-image:-moz-linear-gradient(top, #D1E7F0, #E8F4FA);
5554
    background-image:linear-gradient(top, #D1E7F0, #E8F4FA);
5555
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1E7F0', endColorstr='#E8F4FA', GradientType=0);
5556
}
5557

    
5558
.create-vm .flavor-opts-list.compact li {
5559
    padding: 7px 9px;
5560
    margin-right: 7px;
5561
}
5562

    
5563
.create-vm .flavor-options-cont .flavor-options {
5564
    margin-bottom: 2px;
5565
}
5566

    
5567

    
5568
.create-vm .flavor-options .metric {
5569
    font-size: 0.8em;
5570
    margin-left: 2px;
5571
}
5572

    
5573
.create-vm .flavor-options span.available {
5574
  font-size: 0.8em;
5575
  font-weight: normal;
5576
  margin-left: 5px;
5577
}
5578

    
5579
.create-vm .flavor-options span.title {
5580
    color: #444;
5581
}
5582

    
5583
.create-vm .flavor-options span.desc {
5584
    display: block;
5585
    color: #aaa;
5586
    font-weight: normal;
5587
    font-size: 0.8em;
5588
    float: right;
5589
    margin-top: 4px;
5590
}
5591

    
5592
.disktip {
5593
    padding: 4px;
5594
    top: 20px;
5595
}
5596

    
5597
.create-vm .flavor-options .flavors-disk-template-list {
5598
    position: relative;
5599
}
5600

    
5601
.create-vm .flavor-options .disk_template.option {
5602
    z-index: 10;
5603
    min-width: 50px;
5604
    text-align: center;
5605
}
5606

    
5607
/*0 position is -470px*/
5608
.create-vm .flavor-options .disk-template-description {
5609
    font-size: 0.8em;
5610
    color: #444;
5611
    background-image: url("../images/horizontal-pointer.png");
5612
    background-repeat: repeat-x;
5613
    background-position: -470px 0;
5614
    padding-top: 15px;
5615
    margin-top: -10px;
5616
    font-style: italic;
5617
    display:block;
5618
    overflow: auto;
5619
    padding-bottom: 0px;
5620
    margin-bottom: 7px;
5621
    width: 100%;
5622
}
5623

    
5624
.create-vm .flavor-options .disk_template.option .description {
5625
    display: none;
5626
    position: absolute;
5627
    bottom: -20px;
5628
    left:0;
5629
    color: #888;
5630
    font-style: italic;
5631
    display: block;
5632
    background-color: #fff;
5633
    width: 100%;
5634
    text-align: left;
5635
    z-index: 0;
5636
    border-top: 1px solid #ddd;
5637
    padding-top: 3px;
5638
    display: none;
5639
}
5640

    
5641
.create-vm .flavor-options .selected .value {
5642
    color: #FFF;
5643
}
5644

    
5645
.create-vm .flavor-options .value {
5646
    font-weight: bold;
5647
    color: #5CA1C0;
5648
}
5649

    
5650
.create-vm .flavor-options-cont h4 {
5651
    border-bottom: 1px solid #A1C8DB;
5652
    padding-bottom: 5px;
5653
}
5654

    
5655
.create-vm .images-info-cont {
5656
    width: 28%;
5657
    padding-left: 3%;
5658
    float: left;
5659
    border-left: 1px solid #A1C8DB;
5660
}
5661

    
5662
.create-vm .select-image.wide .show-details {
5663
    display: inline;
5664
}
5665

    
5666
.create-vm .select-image .images-info-cont .hide {
5667
    display: none;
5668
}
5669

    
5670
.create-vm .select-image.wide .images-info-cont .hide {
5671
    display: block;
5672
    float: right;
5673
    position: absolute;
5674
    right: 10px;
5675
    top: 10px;
5676
    font-size: 0.8em;
5677
    text-decoration: underline;
5678
    color: #5CA1C0;
5679
    cursor: pointer;
5680
}
5681

    
5682
.create-vm .select-image.wide .images-list-cont {
5683
    width: 74%;
5684
    padding-right: 0;
5685
}
5686

    
5687
.create-vm .select-image.wide .images-info-cont .description .title {
5688
    display: none;
5689
    float: none;
5690
}
5691

    
5692
.create-vm .select-image.wide .images-info-cont .description p {
5693
    background-color: #fff;
5694
    border: 1px solid #ddd;
5695
    padding: 10px;
5696
    float: none;
5697
}
5698

    
5699
.create-vm .select-image.wide .selected .size {
5700
    color: #FFF !important;
5701
}
5702

    
5703
.create-vm .select-image.wide .image-details .size {
5704
    color: #5CA1C0;
5705
    position: absolute;
5706
    top: 5px;
5707
}
5708

    
5709
.create-vm .select-image.wide .images-info-cont h3 {
5710
    color: #5CA1C0;
5711
    margin: 10px 0;
5712
    margin-top: 5px;
5713
    text-align: left;
5714
    font-size: 0.9em;
5715
}
5716

    
5717
.create-vm .select-image.wide .images-info-cont .description p {
5718
    height: 50px;
5719
}
5720

    
5721
.create-vm .select-image.wide .images-info-cont .description {
5722
    width: 100% !important;
5723
    float: none !important;
5724
    background-color: transparent !important;
5725
    padding: 0 !important;
5726
    font-size: 1.1em;
5727
}
5728
.create-vm .select-image.wide .images-info-cont .extra-details {
5729
    height: 160px;
5730
    overflow-y: scroll;
5731
    padding-right: 15px;
5732
}
5733

    
5734
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail.extra-meta .title .custom {
5735
    display: inline-block;
5736
}
5737

    
5738
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail.extra-meta .title {
5739
    background-color: #999 !important;
5740
    border-color: #888 !important;
5741
}
5742
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail .custom {
5743
    float: right;
5744
    display: none;
5745
    font-size: 0.8em;
5746
    margin-left: 10px;
5747
    color: #DDD;
5748
    margin-top: 2px;
5749
}
5750

    
5751
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail {
5752
    padding: 0px;
5753
    background-color: transparent;
5754
    margin-bottom: 4px;
5755
}
5756

    
5757
.create-vm .select-image.wide .images-info-cont .extra-details .title {
5758
    float: left;
5759
    display: block;
5760
    width: 39%;
5761
    padding: 1%;
5762
    background-color: #5CA1C0;
5763
    color: #fff;
5764
    border: 1px solid #4F8DAA;
5765
    font-size: 0.8em;
5766
}
5767

    
5768
.create-vm .select-image.wide .images-info-cont .extra-details .value {
5769
    float: right;
5770
    display: block;
5771
    width: 55%;
5772
    padding: 1%;
5773
    border: none;
5774
    background-color: #FFF;
5775
    color: #444;
5776
    border: 1px solid #ddd;
5777
    margin-bottom: 0px;
5778
    font-size: 0.8em;
5779
}
5780

    
5781

    
5782
.create-vm .select-image.wide .images-info-cont .image-detail {
5783
}
5784

    
5785
.create-vm .select-image.wide ul.images-list {
5786
    height: 310px;
5787
    overflow-y: scroll;
5788
    padding-right: 3%;
5789
}
5790

    
5791
.flavors-predefined-cont {
5792

    
5793
}
5794

    
5795
.flavor-options-cont {
5796
}
5797

    
5798
.create-vm .select-image.wide .images-info-cont {
5799
    position: absolute;
5800
    width: 88%;
5801
    background-color: #DAE9F0;
5802
    padding: 2%;
5803
    border-left: none;
5804
    height: 320px;
5805
    box-shadow: 0px 0px 2px #aaa;
5806
    -moz-box-shadow: 0px 0px 2px #aaa;
5807
    -webkit-box-shadow: 0px 0px 2px #aaa;
5808
    display: none;
5809
}
5810

    
5811

    
5812
.create-vm .images-info-cont h4, .create-vm .create-step-cont .param h4{
5813
    color: #FF9955;
5814
    margin-bottom: 1em;
5815
    font-size: 1.2em;
5816
}
5817

    
5818
.create-vm .images-info-cont span.title {
5819
    color: #4085A5;
5820
    display: block;
5821
    margin-bottom: 2px;
5822
    font-size: 0.8em;
5823
}
5824

    
5825
.create-vm .type-filter li {
5826
    font-size: 0.8em;
5827
    /*font-weight: bold;*/
5828
    padding: 4px;
5829
    margin-bottom: 0px;
5830
    color: #FF7F2A;
5831
}
5832

    
5833
.create-vm .images-list li {
5834
    min-height: 30px;
5835
}
5836
.create-vm .images-list .image-details:hover {
5837
    background-color: #eee;
5838
}
5839

    
5840
.create-vm .images-list .image-details.selected:hover {
5841
    background-color: #FF7F2A;
5842
}
5843

    
5844
.create-vm .images-list .image-details.selected {
5845
    /*font-weight: bold;*/
5846
}
5847

    
5848
.create-vm .images-list .image-details {
5849
    padding: 6px;
5850
    margin-bottom:1px;
5851
    position: relative;
5852
}
5853

    
5854
.create-vm .images-list .image-details img {
5855
    vertical-align: middle;
5856
    margin-right: 10px;
5857
}
5858

    
5859
.create-vm .images-info-cont .image-detail:last-child p {
5860
    border-bottom: none;
5861
}
5862

    
5863
.create-vm .images-info-cont h4 img {
5864
    vertical-align: middle;
5865
    margin-right: 7px;
5866
    margin-bottom: 5px;
5867
}
5868

    
5869
.create-vm .images-info-cont .description p {
5870
    font-size: 0.8em;
5871
}
5872

    
5873
.create-vm .images-info-cont p {
5874
    margin-bottom: 7px;
5875
    font-size: 0.9em;
5876
    border-bottom: 1px solid #A1C8DB;
5877
    padding-bottom: 7px;
5878
}
5879

    
5880
.create-vm .step-header {
5881
    padding-bottom:0;
5882
    position: relative;
5883
}
5884

    
5885
.create-vm .step-header .header-step .info span.subtitle {
5886
    font-size: 1.2em;
5887
    color: #fff;
5888
    font-weight: bold;
5889
}
5890

    
5891
.create-vm .step-header .header-step .info span {
5892
    float: none;
5893
    text-align: right;
5894
}
5895

    
5896
.create-vm .step-header .header-step .info {
5897
    position: absolute;
5898
    right: 15px;
5899
    top: 20px;
5900
    font-size: 0.8em;
5901
}
5902

    
5903
.create-vm .step-header .header-step span {
5904
    float: left;
5905
    display: block;
5906
}
5907

    
5908
.create-vm .steps-container {
5909
    width: 2000em;
5910
}
5911

    
5912
.create-vm .step-header .header-step .title {
5913
    margin-top: 20px;
5914
    font-size: 1em;
5915
    margin-left: 10px;
5916
}
5917

    
5918
#createvm-overlay-content {
5919
    width: 624px;
5920
    overflow: hidden;
5921
}
5922

    
5923
.create-vm .steps-history .steps-history-cont.current .title {
5924
    display: block;
5925
    top: 23px;
5926
    left: 43px;
5927
    font-size: 1.2em;
5928
    color: #ffffff;
5929
    font-weight: bold;
5930
    font-family: 'Ubuntu', sans-serif !important;
5931
}
5932

    
5933
.create-vm .steps-history .steps-history-cont.current .subnum {
5934
    display: none;
5935
    float: none;
5936
    font-size: 0.9em;
5937
    font-family: 'Ubuntu', sans-serif  !important;
5938
}
5939

    
5940
.create-vm .steps-history .steps-history-cont.current .subtitle,
5941
.create-vm .steps-history .steps-history-cont.current .description {
5942
    font-family: 'Ubuntu', sans-serif  !important;
5943
}
5944

    
5945
.create-vm .steps-history .steps-history-cont.current .info {
5946
    display: block;
5947
    font-family: 'Ubuntu', sans-serif !important;
5948
}
5949

    
5950
.create-vm .steps-history .steps-history-cont.completed .title,
5951
.create-vm .steps-history .steps-history-cont.completed .num {
5952
    color: #A1C8DB;
5953
}
5954

    
5955
.create-vm .steps-history .steps-history-cont.completed {
5956
    background-color: #4085A5;
5957
    color: #fff;
5958
    cursor: pointer;
5959
}
5960

    
5961
.create-vm .steps-history .steps-history-cont.completed .steps-history-step {
5962
    background-image: url("../images/check.png");
5963
}
5964

    
5965
.create-vm .steps-history .steps-history-cont.current .steps-history-step {
5966
    width: 320px;
5967
}
5968

    
5969
.create-vm .steps-history .steps-history-cont.current .num {
5970
    color: #fff;
5971
}
5972

    
5973
.create-vm .steps-history .steps-history-cont.current .info {
5974
    color: #4085A5;
5975
    font-size: 0.8em;
5976
}
5977

    
5978
.create-vm .steps-history .steps-history-cont.current {
5979
    background-color: #A1C8DB;
5980
    color: #fff;
5981
    width: 416px;
5982
}
5983

    
5984
.create-vm .steps-history-step {
5985
    padding: 4px;
5986
    padding-left: 7px;
5987
    font-size: 1em;
5988
    font-family: 'Ubuntu', sans-serif  !important;
5989
    margin-right: 5px;
5990
    padding-top: 12px;
5991
    background-position: right 30px;
5992
    background-image: none;
5993
    background-repeat: no-repeat;
5994
}
5995

    
5996
.create-vm .steps-history {
5997
    background-color: #4085A5;
5998
}
5999

    
6000
.create-vm .steps-history .steps-history-cont.last {
6001
    border-right: none;
6002
}
6003

    
6004
.create-vm .steps-history .steps-history-cont .num {
6005
    margin-left: 5px;
6006
    margin-top: -10px;
6007
    padding-bottom: 10px;
6008
}
6009

    
6010
.create-vm .steps-history .steps-history-cont .title {
6011
    display: none;
6012
    position: absolute;
6013
    bottom: 0px;
6014
    text-align: center;
6015
    padding-bottom: 2px;
6016
    left:0;
6017
    width: 55px;
6018
    margin-left:0;
6019
    margin-top:0;
6020
    font-size: 0.8em;
6021
}
6022

    
6023
.create-vm .steps-history .steps-history-cont .subnum,
6024
.create-vm .steps-history .steps-history-cont .info {
6025
    display: none;
6026
}
6027

    
6028
.create-vm .steps-history .steps-history-cont {
6029
    height: 70px;
6030
    width: 51px;
6031
    float: left;
6032
    color: #fff;
6033
    border-right: 1px solid #A1C8DB;
6034
    color: #A1C8DB;
6035
    background-color: #4085A5;
6036
    background-position: center right;
6037
    background-image: none;
6038
    background-repeat: no-repeat;
6039

    
6040
    -webkit-transition: background-color .15s ease-in;
6041
    -o-transition: background-color .15s ease-in;
6042
    -moz-transition: background-color .15s ease-in;
6043
    transition: background-color .15s ease-in;
6044

    
6045
    border-bottom: 1px solid #aaa;
6046
}
6047

    
6048
.create-vm .step-header .header-step .num {
6049
    color: #225871;
6050
    font-size: 4em;
6051
    margin-bottom: -5px;
6052
    font-family: 'Ubuntu', sans-serif;
6053
    font-weight: normal !important;
6054
}
6055

    
6056
.create-vm .step-header .header-step {
6057
    color: #;
6058
    margin-bottom: -6px;
6059
    width: 25%;
6060
    padding-left: 0%;
6061
    display: block;
6062
    float: left;
6063
}
6064

    
6065
.create-vm .step-header .header-step.current {
6066
    color: #387693;
6067
}
6068

    
6069
.create-vm .image-filters-title {
6070
    margin-top: 1em;
6071
    margin-bottom: 0.5em;
6072
}
6073

    
6074
.create-vm .create-step-cont span.clear {
6075
    font-size: 0.8em;
6076
    font-weight: bold;
6077
    color: #A1C8DB;
6078
    display: block;
6079
}
6080

    
6081
.create-vm .category-filters li {
6082
    float:left;
6083
    display: block;
6084
    padding: 4px;
6085
    background-color: #eee;
6086
    margin-right: 5px;
6087
    font-size: 0.9em;
6088
    margin-bottom: 5px;
6089
}
6090

    
6091
.create-vm .content-cont {
6092
    height: 340px;
6093
    overflow: auto;
6094
}
6095

    
6096
.create-vm .vm-confirm .confirm-params span.cval {
6097
    margin-left: 8px;
6098
    color: #444;
6099
}
6100

    
6101
.create-vm .vm-confirm .confirm-params span.ckey {
6102
    color: #4085A5;
6103
    font-weight: bold;
6104
}
6105

    
6106
.create-vm .vm-confirm .confirm-params {
6107
    margin-bottom: 15px;
6108
}
6109

    
6110
.create-vm .vm-confirm h3.vm-name {
6111
    background-repeat: no-repeat;
6112
    background-position: left center;
6113
    font-size: 1.4em;
6114
    padding-left: 1.45em;
6115
    color: #4085A5;
6116
}
6117

    
6118
.create-vm .images-list-cont h4 a {
6119
    margin-top: 3px;
6120
    margin-right: -2px !important;
6121
}
6122
.create-vm .images-list-cont h4 a,
6123
.create-vm .list-cont h4 a {
6124
    font-size: 0.8em;
6125
    font-weight: normal;
6126
    margin-right: 5px;
6127
    float: right;
6128
    color: #FF7F2A;
6129
}
6130

    
6131
.create-vm .confirm-params {
6132
    overflow: auto;
6133
}
6134

    
6135
.create-vm .vm-confirm .ssh.confirm-params {
6136
    max-height: 150px;
6137
}
6138

    
6139
.create-vm .personalize-cont .confirm-params {
6140
    max-height: 160px;
6141
    margin-right: 10px;
6142
}
6143

    
6144
.create-vm .personalize-cont,
6145
.create-vm .confirm-cont {
6146
    height: 250px;
6147
}
6148

    
6149
.create-vm .image-warning p {
6150
  width: 80%;
6151
  float: left;
6152
}
6153

    
6154
.create-vm .image-warning .untrusted-image-confirm:hover {
6155
  background-color: #7D674E;
6156
}
6157

    
6158
.create-vm .image-warning .untrusted-image-confirm {
6159
  display: inline-block;
6160
  padding: 5px;
6161
  background-color: #5C4D39;
6162
  color: #FFF;
6163
  width: 10%;
6164
  float: right;
6165
  margin-top: 4px;
6166
  margin-right: 2px;
6167
  cursor: pointer;
6168
  text-align: center;
6169
}
6170

    
6171
.create-vm .image-warning {
6172
  display: none;
6173
  background-color: #987249;
6174
  color: #fff;
6175
  padding: 10px 15px;
6176
  font-size: 0.9em;
6177
  border-top: 1px solid #AAA;
6178
}
6179

    
6180
.create-vm .create-step-cont .rename input.rename-field {
6181
    font-size: 1.4em;
6182
    padding: 5px;
6183
    width: 93%;
6184
    padding-left: 30px;
6185
    background-position: 7px center;
6186
    background-repeat: no-repeat;
6187
}
6188

    
6189
.create-vm .create-step-cont .rename label {
6190
    display: block;
6191
}
6192

    
6193
.create-vm .create-step-cont .personalize-conts,
6194
.create-vm .create-step-cont .confirm-conts {
6195
    margin-top: 20px;
6196
}
6197

    
6198
.create-vm .create-step-cont .personalize-cont,
6199
.create-vm .create-step-cont .confirm-cont {
6200
    width: 30%;
6201
    margin-right: 2%;
6202
    border-right: 1px solid #A1C8DB;
6203
    float: left;
6204
}
6205

    
6206
.create-vm .create-step-cont .confirm-cont ul li .title {
6207
    width: 55px;
6208
    float: left;
6209
}
6210

    
6211
.create-vm .create-step-cont .list-cont ul li .value {
6212
    float: right;
6213
    padding-top: 2px;
6214
    display: block;
6215
    width: 90px;
6216
    text-align: right;
6217
}
6218

    
6219
.create-vm .create-step-cont .list-cont ul li.flavor-disktype .value {
6220
    width: 45px;
6221
}
6222

    
6223
.create-vm .create-step-cont .list-cont ul li.image-description .value,
6224
.create-vm .create-step-cont .list-cont ul li.image-name .value {
6225
    float: none;
6226
    width: auto;
6227
    text-align:left;
6228
    width: auto;
6229
}
6230

    
6231
.create-vm .create-step-cont .list-cont ul li {
6232
    padding:0;
6233
    margin:0;
6234
    margin-bottom: 5px;
6235
    border-bottom: 1px solid #EEE;
6236
    padding-bottom: 7px;
6237
    margin-right: 10px;
6238
}
6239

    
6240
.create-vm .create-step-cont li.ssh-key-option .check,
6241
.create-vm .create-step-cont li.list-item-option .check {
6242
    float: right;
6243
    margin-right: 5px;
6244
    margin-top: 0px;
6245
}
6246

    
6247
.create-vm .create-step-cont li.ssh-key-option.selected {
6248
}
6249
.create-vm .create-step-cont li.ssh-key-option.selected:hover,
6250
.create-vm .create-step-cont li.list-item-option.selected:hover {
6251
    background-color: #F95;
6252
}
6253

    
6254
.create-vm .create-step-cont li.ssh-key-option:hover,
6255
.create-vm .create-step-cont li.list-item-option:hover {
6256
    background-color: #eee;
6257
}
6258

    
6259
.create-vm .create-step-cont li.ssh-key-option.selected {
6260
}
6261

    
6262
.create-vm .create-step-cont li.ssh-key-option,
6263
.create-vm .create-step-cont li.list-item-option {
6264
    padding: 6px !important;
6265
}
6266

    
6267
.create-vm .create-step-cont .list-cont.ssh {
6268
    width: 60%;
6269
}
6270

    
6271
.create-vm .create-step-cont .list-cont.meta h4 {
6272
    margin-right: 0;
6273
}
6274

    
6275
.create-vm .create-step-cont .list-cont.meta {
6276
    margin-right:0;
6277
    border-right: none;
6278
    width: 195px;
6279
}
6280

    
6281
.create-vm .list-cont > h4 {
6282
    font-size: 1.2em;
6283
    margin-right: 10px;
6284
    border-bottom: 1px solid #A1C8DB;
6285
    padding-bottom: 5px;
6286
    color: #387693;
6287
}
6288

    
6289
.create-vm .list-cont .param.image-name {
6290
    margin-bottom: 0 !important;
6291
    border-bottom: none !important;
6292
}
6293

    
6294
.create-vm .list-cont .param h4 {
6295
    margin-bottom: 0px !important;
6296
    font-size: 1.1em !important; 
6297
}
6298

    
6299
.create-vm .list-cont .param {
6300
    margin-bottom: 7px !important;
6301
}
6302

    
6303
.create-vm .list-cont .value {
6304
    font-weight: bold;
6305
}
6306

    
6307
.create-vm .list-cont .param .value {
6308
    font-size: 0.9em;
6309
}
6310

    
6311
.create-vm .list-cont .param .title {
6312
    color: #387693;
6313
}
6314

    
6315
.create-vm .list-cont .image-description {
6316
    margin-left:0;
6317
}
6318

    
6319
.create-vm .list-cont .image-description .value {
6320
    font-weight: normal;
6321
    margin-left: 0 !important;
6322
}
6323

    
6324
.create-vm .list-cont .image-description .title {
6325
    display: none;
6326
    font-size: 0.8em;
6327
}
6328

    
6329
.create-vm .list-cont.meta .values span {
6330
    display:block;
6331
    float: left;
6332
    margin-right: 4px;
6333
    border: 1px solid #eee;
6334
    padding:3px;
6335
    margin-bottom: 4px;
6336
    font-size: 0.9em;
6337
}
6338

    
6339
.create-vm .list-cont.meta .key {
6340
    font-weight: bold;
6341
    font-size: 0.9em;
6342
    display: block;
6343
    margin-bottom: 5px;
6344
}
6345

    
6346
.create-vm .meta input {
6347
    font-size: 0.8em;
6348
}
6349

    
6350
.vm-connect .connect-cont {
6351
    margin-bottom: 20px;
6352
    border-bottom: 1px solid #A1C8DB;
6353
    padding-bottom: 20px;
6354
}
6355

    
6356
.vm-connect .connection-info {
6357
    padding-bottom: 0px;
6358
    margin-bottom: 0;
6359
    border-bottom: none;
6360
}
6361

    
6362
.vm-connect .connection-info .connect a {
6363
    color: #fff;
6364
}
6365

    
6366
.vm-connect .connection-info .connect {
6367
    background-color: #387693;
6368
    color: #fff;
6369
    padding: 10px;
6370
    font-size: 1.2em;
6371
    text-align: center;
6372
}
6373

    
6374
.clip-copy {
6375
    display: block;
6376
    width: 20px;
6377
    height: 20px;
6378
    position: absolute;
6379
    border: 1px solid #387693;
6380
    background-image: url("../images/clipboard.png");
6381
    background-repeat: no-repeat;
6382
    background-position: center;
6383
    cursor: pointer;
6384
    background-color: #A1C8DB;
6385
}
6386

    
6387
.password-cont .clip-copy { right: 10px; top: 8px;}
6388

    
6389

    
6390
input.has-errors {
6391
    border-color: #ff0000;
6392
}
6393

    
6394
.overlay .models-view .previous-view-link {
6395
    margin: -10px;
6396
    margin-bottom:10px;
6397
    padding: 10px 5px;
6398
    background-image: url("../images/left-arrow.png");
6399
    background-repeat: no-repeat;
6400
    background-position: 10px center;
6401
    padding-left: 20px;
6402
    background-color: #93D070;
6403
    cursor: pointer;
6404
    border-bottom: 1px solid #eee;
6405
    text-decoration: underline;
6406
}
6407

    
6408
.icon .suspended-notice {
6409
  right: 192px;
6410
  top: 50px;
6411
}
6412

    
6413
.suspended-notice {
6414
  display: inline-block;
6415
  padding: 4px;
6416
  background-color: #8f1915;
6417
  cursor: pointer;
6418
  position: absolute;
6419
  color: #fff;
6420
  font-size: 0.6em;
6421
  display: none;
6422
}
6423

    
6424
.suspended .suspended-notice {
6425
  display: block;
6426
}
6427

    
6428
.suspended .action-indicator {
6429
  display: none !important;
6430
}
6431

    
6432
.trigger-resize {
6433
    background-image: url("../images/pencil-disabled.png");
6434
    background-position: right 2px;
6435
    background-repeat: no-repeat;
6436
    padding-right: 15px !important;
6437
    cursor: pointer;
6438
}
6439

    
6440
.can-resize .trigger-resize:hover {
6441
    text-decoration: underline;
6442
}
6443

    
6444
.can-resize .trigger-resize {
6445
    font-weight: bold;
6446
    background-image: url("../images/pencil.png");
6447
}
6448

    
6449
.vm-resize .flavor-options-cont {
6450
  float: none;
6451
  width: 100%;
6452
  margin: 0;
6453
  height: auto;
6454
}
6455

    
6456
.form-action.disabled {
6457
  background-color: #ddd;
6458
  color: #aaa;
6459
  border-color: #999;
6460
}
6461

    
6462
.overlay .form-actions .assign {
6463
  display: none;
6464
}
6465

    
6466

    
6467
.connect-ip #network-vms-select-content li.selected .options-object-cont {
6468
  background-image: none !important;
6469
}
6470

    
6471
.overlay.connect-ip .form-actions .assign {
6472
  display: block;
6473
}
6474

    
6475
.overlay.connect-ip .form-actions .create {
6476
  display: none;
6477
}
6478

    
6479
.overlay.connect-ip li.options-object .options-object-cont {
6480
  background-image: none !important; 
6481
}
6482

    
6483
.overlay-public-key-create .container {
6484
  font-size: 0.9em;
6485
}
6486

    
6487
/* Additional styles for views.ext module */
6488
.pane-view {
6489
  background-color: #EFF7FA;
6490
}
6491

    
6492
.collection-list-view .collection {
6493
  padding-top: 14px;
6494
}
6495

    
6496
.collection-list-view .collection .create-button {
6497
  margin-bottom: 15px;
6498
}
6499

    
6500
.collection-list-view .collection .create-button a {
6501
  display: inline-block;
6502
  color: black;
6503
  background-color: #FF7F2A;
6504
  cursor: pointer;
6505
  padding: 7px 24px;
6506
  text-decoration: none;
6507
  border-left: 15px solid #FF9955;
6508
  margin-left: -15px;
6509
  font-family: 'Open Sans', sans-serif;
6510
}
6511

    
6512
.pane-view .collection-list-view .model-view {
6513
  width: 100%;
6514
  background-color: transparent;
6515
  font-size: 75%;
6516
}
6517

    
6518
.pane-view .collection-list-view .model-view.actionpending .main-content-inner,
6519
.pane-view .collection-list-view .model-view.subactionpending .main-content-inner,
6520
.pane-view .collection-list-view .model-view.hovered .main-content-inner,
6521
.pane-view .collection-list-view .model-view:hover .main-content-inner {
6522
  background-color: #A1C8DB;
6523
}
6524

    
6525
.pane-view .collection-list-view .model-view .main-content .title {
6526
  font-weight: normal;
6527
}
6528

    
6529
.pane-view .collection-list-view .model-view .main-content {
6530
}
6531

    
6532
.pane-view .collection-list-view .model-view:last-child .main-content {
6533
  border-bottom: none;
6534
}
6535

    
6536
.pane-view .collection-list-view .model-view .main-content {
6537
  width: 520px;
6538
  padding-bottom: 5px;
6539
  margin-bottom: 5px;
6540
  float: left;
6541
  border-bottom: 1px solid #D1E7F0;
6542
}
6543

    
6544
.pane-view .collection-list-view .model-view .main-content-inner {
6545
  padding: 10px 20px;
6546
  padding-right: 10px;
6547
  /*overflow: hidden;*/
6548
}
6549

    
6550
.pane-view .collection-list-view .model-view .main-content .logo {
6551
  float: left;
6552
}
6553

    
6554
.pane-view .collection-list-view .model-view .main-content .entry {
6555
  width: 310px;
6556
  padding-top: 5px;
6557
  margin-left: 10px;
6558
  float: left;
6559
  position: relative;
6560
}
6561

    
6562
.pane-view .collection-list-view .model-view .main-content .actions-content {
6563
  width: 80px;
6564
  float: left;
6565
}
6566

    
6567
.pane-view .collection-list-view .model-item .link {
6568
  color: #4085A5;
6569
}
6570

    
6571
.collection .empty-list {
6572
  padding: 10px;
6573
  font-size: 0.8em;
6574
  color: #333;
6575
}
6576

    
6577
.collection-list-view .items-sublist:first-child {
6578
  padding-top: 0;
6579
}
6580

    
6581
.collection-list-view .items-sublist {
6582
  padding-top: 10px;
6583
}
6584

    
6585
.collection-list-view .items-sublist:last-child {
6586
  margin-top: 20px;
6587
  border-top: 10px solid #DCEBF2;
6588
  margin-bottom: 0;
6589
}
6590

    
6591
.model-item .status-title {
6592
  text-align: right;
6593
  margin-right: 4px;
6594
  margin-top: 5px;
6595
}
6596

    
6597
.model-item .status-indicator {
6598
}
6599

    
6600
.model-item .actions-content {
6601
  width: 180px;
6602
  float: left;
6603
}
6604

    
6605
.model-item .actions-content .action-container .confirm-single .no,
6606
.model-item .actions-content .action-container .confirm-single .yes {
6607
  font-family: Arial, Helvetica, sans-serif;
6608
  width: 20px;
6609
  height: 16px;
6610
  padding: 2px 0;
6611
  float: left;
6612
  border: none;
6613
  margin: 0;
6614
  padding: 2px 0;
6615
  text-align: center;
6616
  font-size: inherit;
6617
}
6618

    
6619
.model-item .actions-content .action-container .confirm-single .no {
6620
  background-color: #FF9955;
6621
}
6622

    
6623
.model-item .actions-content .action-container .confirm-single .yes {
6624
  background-color: #FF7F2A;
6625
  width: 80px;
6626
}
6627

    
6628
.model-item .actions-content .action-container.warn .confirm-single .no:hover {
6629
  color: #fff;
6630
}
6631

    
6632
.model-item .actions-content .action-container.warn .confirm-single .no {
6633
  background-color: #CC0000;
6634
}
6635

    
6636
.model-item .actions-content .action-container.warn .confirm-single .yes {
6637
  background-color: #880000;
6638
  color: #fff;
6639
}
6640

    
6641
.model-item .actions-content .action-container.warn .confirm-single .yes:hover {
6642
  background-color: #CC0000;
6643
}
6644

    
6645
.model-item .actions-content .action-container .confirm-single {
6646
  display: none;
6647
  width: 100px;
6648
  float: right;
6649
  margin-right: -22px;
6650
  margin-top: -4px;
6651
}
6652

    
6653
.model-item .actions-content .action-container.selected .confirm-single {
6654
  display: block !important;
6655
}
6656

    
6657
.model-item.actionpending .actions-content .action-container.isactive,
6658
.model-item:hover .actions-content .action-container.isactive,
6659
.model-item.hovered .actions-content .action-container.isactive,
6660
.model-item .actions-content .action-container.selected {
6661
  display: block;
6662
}
6663

    
6664
.model-item.actionpending .nested-model-list .actions-content .action-container.isactive {
6665
  display: none;
6666
}
6667

    
6668
.model-item.actionpending .nested-model-list .model-item.actionpending .actions-content .action-container.isactive {
6669
  display: block;
6670
}
6671

    
6672
.model-item .actions-content .action-container.selected:hover {
6673
  background-color: transparent;
6674
  border-left: 5px solid #7DB4CD;
6675
  margin-left: 5px;
6676
}
6677

    
6678
.model-item .actions-content .action-container:hover a {
6679
  color: #fff;
6680
}
6681

    
6682
.model-item .actions-content .action-container:hover {
6683
  background-color: #A1C8DB;
6684
  border-left: 5px solid #7DB4CD;
6685
  margin-left: 5px;
6686
}
6687

    
6688
.model-item .actions-content .action-container.selected {
6689
}
6690

    
6691
.model-item .actions-content .action-container {
6692
  display: none; 
6693
}
6694

    
6695
.model-item .actions-content .action-container {
6696
  padding: 2px;
6697
  margin-bottom: 5px;
6698
  padding-left: 5px;
6699
  margin-left: 10px;
6700
  cursor: pointer;
6701
}
6702

    
6703
.model-item .status-active .status-indicator .indicator {
6704
  background-color: #63cf1c;
6705
}
6706

    
6707
.model-item .status-inactive .status-indicator .indicator {
6708
  background-color: #940606;
6709
}
6710

    
6711
.model-item .status-error .status-indicator .indicator {
6712
  background-color: #ff0000;
6713
}
6714

    
6715
.model-item .status-progress .status-indicator .indicator {
6716
  background-color: #FF7F2A;
6717
}
6718

    
6719
.model-item .status-indicator .indicator {
6720
  width: 10px;
6721
  height: 11px;
6722
  float: right;
6723
  background-color: #EFF7FA;
6724
  margin-right: 3px;
6725
}
6726

    
6727
/* vm sprites */
6728
.vm-icon.medium {
6729
  width: 50px;
6730
  height: 54px;
6731
}
6732

    
6733
.vm-icon.medium.state1 {
6734
    background-position: 0px 0;
6735
}
6736

    
6737
.vm-icon.medium.state2 {
6738
    background-position: -100px 0;
6739
}
6740

    
6741
.vm-icon.medium.state3 {
6742
    background-position: -150px 0;
6743
}
6744

    
6745
.vm-icon.medium.state4 {
6746
    background-position: -50px 0;
6747
}
6748
/* end vm sprites */
6749

    
6750
/* ips */
6751
.ip-port-view .vm-logo {
6752
  width: 
6753
}
6754

    
6755
.model-item .vm-name {
6756
  font-weight: bold;
6757
}
6758

    
6759
.nested-model-list {
6760
  position: relative;
6761
  top: 43px;
6762
  overflow: visible;
6763
  width: 531px;
6764
  margin-left: -41px;
6765
  margin-bottom: 39px;
6766
}
6767

    
6768
.nested-model-list .collection {
6769
  padding: 0;
6770
}
6771

    
6772
.nested-model-list .model-item .outer {
6773
  width: 470px;
6774
  position: relative;
6775
}
6776

    
6777
.model-item .border i.remove,
6778
.empty-list i.add {
6779
    display: block;
6780
    color: #fff;
6781
    padding-left: 10%;
6782
    width: 90%;
6783
    padding-top: 0px;
6784
    font-weight: bold;
6785
    font-size: 1.4em;
6786
    cursor: pointer;
6787
    font-style: normal;
6788
}
6789

    
6790
.model-item .border i.remove {
6791
  font-size: 1em;
6792
  color: #BE5812;
6793
  padding-top: 1px;
6794
}
6795

    
6796
.empty-list.nested {
6797
  height: 30px;
6798
}
6799

    
6800
.empty-list .border2, 
6801
.nested-model-list .outer .border2 {
6802
  border-left: 3px solid #FB822F;
6803
  position: absolute;
6804
  height: 100%;
6805
  width: 1px;
6806
  left:0;
6807
  top:0;
6808
}
6809

    
6810
.empty-list .border2, 
6811
.nested-model-list .model-item:last-child .outer .border2 {
6812
  height: 69px;
6813
}
6814

    
6815
.empty-list .border, .nested-model-list .outer .border {
6816
  position: absolute;
6817
  top: 52px;
6818
  left: 0;
6819
  background-color: #FB822F;
6820
  height: 17px;
6821
  width: 91px;
6822
  z-index: 0;
6823
}
6824

    
6825
.empty-list .border {
6826
  top: 31px;
6827
}
6828

    
6829
.empty-list .border2 {
6830
  height: 31px;
6831
}
6832

    
6833
.nested-model-list .model-item .inner .model-logo {
6834
  position: relative;
6835
  z-index: 100;
6836
}
6837

    
6838
.model-item.actionpending .nested-model-list.proxy .model-item .inner.main-content,
6839
.model-item:hover .nested-model-list.proxy .model-item .inner.main-content,
6840
.model-item.hovered .nested-model-list.proxy .model-item .inner.main-content,
6841
.nested-model-list .model-item.actionpending .inner.main-content,
6842
.nested-model-list .model-item:hover .inner.main-content,
6843
.nested-model-list .model-item.hovered .inner.main-content {
6844
  background-color: #84B7D0;
6845
}
6846

    
6847
.nested-model-list .model-item:last-child .inner.main-content {
6848
  border-bottom: none;
6849
}
6850

    
6851
.nested-model-list .model-item .inner.main-content {
6852
  width: auto;
6853
  margin-bottom: 0;
6854
  float: none;
6855
  z-index: 0;
6856
  margin-left: 30px;
6857
  padding-bottom: 20px;
6858
  padding: 10px;
6859
  border-bottom: 1px solid #5CA1C0;
6860
  /*height: 59px;*/
6861
}
6862

    
6863
.nested-model-list .model-item .inner.main-content .subtitle {
6864
  position: absolute;
6865
  top: 27px;
6866
  left: 110px;
6867
  font-weight: normal;
6868
  font-size: 0.8em;
6869
}
6870

    
6871
.nested-model-list .model-item .inner.main-content .title {
6872
  position: absolute;
6873
  top: 10px;
6874
  left: 110px;
6875
  font-weight: bold;
6876
}
6877

    
6878
.model-item:hover .nested-model-list .actions-content .action-container.isactive {
6879
  display: none;
6880
}
6881

    
6882
.model-item:hover .nested-model-list .model-item.actionpending .actions-content .action-container.isactive {
6883
  display: block !important;
6884
}
6885

    
6886

    
6887
.model-item .actions-content .action-container.selected a {
6888
  color: #FF7F2A;
6889
}
6890

    
6891
.model-item:hover .nested-model-list.proxy .model-item .actions-content .action-container.selected,
6892
.model-item:hover .nested-model-list.proxy .model-item .actions-content .action-container.isactive,
6893
.model-item.hovered .nested-model-list.proxy .model-item .actions-content .action-container.selected,
6894
.model-item.hovered .nested-model-list.proxy .model-item .actions-content .action-container.isactive,
6895
.model-item:hover .nested-model-list .model-item .actions-content .action-container.selected,
6896
.model-item:hover .nested-model-list .model-item:hover .actions-content .action-container.isactive {
6897
  display: block !important;
6898
}
6899

    
6900
.pane-view .model-view .nested-model-list .model-item .actions-content {
6901
  position: absolute;
6902
  right: -180px;
6903
  top:0;
6904
  float: none;
6905
  display: block;
6906
  width: 180px;
6907
  height: 80px;
6908
}
6909

    
6910
/* networks */
6911
.nested-model-list .ip-addresses {
6912
  padding-top: 0px;
6913
  font-size: 0.9em;
6914
  margin-left: 328px;
6915
  text-align: right;
6916
  position: absolute;
6917
  top: 10px;
6918
  right: 10px;
6919
}
6920

    
6921
.network-ports-toggler {
6922
  position: absolute;
6923
  top: 30px;
6924
  left: 0px;
6925
}
6926

    
6927
.model-form-actions .form-action {
6928
  font-size: 1.1em !important;
6929
}
6930

    
6931
.model-form textarea {
6932
    width: 99%;
6933
    height: 100px;
6934
    border: 1px solid #aaa;
6935
}
6936

    
6937
.model-form .form-field {
6938
    margin-bottom: 10px;
6939
}
6940

    
6941
.model-form label {
6942
    display: block;
6943
    color: #406A7D;
6944
    font-size: 1.1em;
6945
    margin: 0px 0 5px 0;
6946
}
6947

    
6948
.model-form .inline label {
6949
    float: left;
6950
    margin-right: 10px;
6951
    margin-top: 15px !important;
6952
}
6953

    
6954
.model-form input.long {
6955
    width: 400px;
6956
}
6957

    
6958
.model-form .inline input {
6959
    width: auto;
6960
    margin-top: 10px;
6961
}
6962

    
6963
.model-form .inline select {
6964
    width: auto;
6965
    margin-top: 7px;
6966
}
6967

    
6968
.model-form .inline .errors,
6969
.model-form .inline .field-desc {
6970
    clear: both;
6971
}
6972

    
6973
.model-action.disabled {
6974
    background-color: #aaa;
6975
    border-color: #aaa;
6976
    cursor: default;
6977
}
6978
.model-action.disabled:hover {
6979
    background-color: #aaa;
6980
    border-color: #aaa;
6981
}
6982

    
6983
.model-action:hover {
6984
    background-color: #aaa;
6985
}
6986

    
6987
.model-action:hover {
6988
    background-color: #F95;
6989
    border-color: #F95;
6990
}
6991

    
6992
.model-action.in-progress {
6993
    background-color: #aaa;
6994
    color: #fff;
6995
    border-color: #aaa;
6996
    background-image: url("../images/icons/indicators/small/progress.gif") !important;
6997
}
6998

    
6999
.model-action.add-generate {
7000
    background-image: url("../images/option-action-generate-ssh.png");
7001
}
7002

    
7003
.model-action.add {
7004
    background-image: url("../images/option-action-add.png");
7005
    padding-right: 20px !important;
7006
}
7007

    
7008
.model-action {
7009
    float: right;
7010
    background-color: #FF7F2A;
7011
    color: #fff;
7012
    padding: 6px 8px;
7013
    margin-left: 10px;
7014
    cursor: pointer;
7015
    padding-right: 30px;
7016
    background-position: right center;
7017
    background-repeat: no-repeat;
7018
    background-clip: border-box;
7019
    border-right: 5px solid #FF7F2A;
7020
    font-size: 0.9em;
7021
}
7022

    
7023
.overlay-public-key-create .error-msg {
7024
    margin-bottom: 5px;
7025
}
7026

    
7027
.model-form.public-key textarea {
7028
  height: 125px;
7029
}
7030

    
7031
.model-notice {
7032
    margin-bottom: 10px;
7033
}
7034

    
7035
.model-notice p.message {
7036
    margin: 0;
7037
    padding: 0; 
7038
    border: 2px solid #444;
7039
    padding: 4px;
7040
    background-color: #efefef;
7041
    line-height: 1.7em;
7042
    padding: 6px;
7043
}
7044

    
7045
.model-notice p.message .download {
7046
    color: #fff;
7047
    background-color: #FF7F2A;
7048
    border: 1px solid #F95;
7049
    padding: 3px;
7050
    cursor: pointer;
7051
}
7052

    
7053

    
7054
.model-notice p.message.success {
7055
    color: #447821;
7056
    background-color: #AADE87;
7057
    border: 1px solid #447821;
7058
}
7059

    
7060
#public-keys-list-view .model-item textarea.content {
7061
  width: 270px;
7062
  background-color: transparent;
7063
  font-family: monospace;
7064
  font-size: 1em;
7065
  border: none;
7066
  overflow-y: hidden;
7067
  overflow-x: hidden;
7068
  height: 155px;
7069
  margin: 10px 0;
7070
  padding: 10px;
7071
  border: 1px solid #ddd;
7072
  background-color: #efefef;
7073
}
7074

    
7075

    
7076
.model-rename-view .edit {}
7077

    
7078
.model-rename-view .edit-btn {
7079
  display: none;
7080
  background-repeat: no-repeat;
7081
  font-size: 75%;
7082
  font-weight: normal;
7083
  margin-left: 10px;
7084
  padding-left: 10px;
7085
  text-align: left;
7086
  cursor: pointer;
7087
  color: #3D3D3D;
7088
  margin-top: 0.4em;
7089
  background-image: url("../images/pencil.png");
7090
  background-position: 0 0px;
7091
  width: 10px;
7092
  height: 7px;
7093
}
7094

    
7095
.model-rename-view:hover .edit-btn {
7096
  display: inline;
7097
}
7098

    
7099
.model-rename-view input {
7100
  border: 1px solid #aaaaaa;
7101
  font-size: 85%;
7102
  padding: 2px;
7103
  width: 255px;
7104
}
7105

    
7106
.model-rename-view .value {}
7107

    
7108
.model-rename-view .name {}
7109

    
7110
.model-rename-view .rename-actions {
7111
  float: right;
7112
  width: 40px;
7113
}
7114

    
7115
.model-rename-view .rename-actions .btn {
7116
  float: left;
7117
  height: 16px;
7118
  width: 16px;
7119
  cursor: pointer;
7120
}
7121

    
7122
.model-rename-view .rename-actions .btn.confirm {
7123
  background-image: url("../images/save.png"); 
7124
  margin-left: 3px;
7125
}
7126

    
7127
.model-rename-view .rename-actions .btn.cancel {
7128
  background-image: url("../images/cancel.png"); 
7129
  margin-left: 3px;
7130
}
7131

    
7132
.model-rename-view .rename-actions .btn.confirm:hover {
7133
  background-color: #84b7d0;
7134
}
7135

    
7136
.model-rename-view .rename-actions .btn.cancel:hover {
7137
  background-image: url("../images/cancel-onhover.png"); 
7138
}