Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (130.8 kB)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
308
#createcontainer a {
309
}
310

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
1022
.state {
1023
}
1024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
1444
#machinesview {
1445
}
1446

    
1447
#machines-pane {
1448
}
1449

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
1704

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
1813

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
2025
div.confirm_reboot_required {
2026
}
2027

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
2337

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
2591
#createcontainer {
2592
}
2593

    
2594
#networks-container {
2595
}
2596

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
2755
.state {
2756
}
2757

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

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

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

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

    
2792

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
2928
.private-networks .state {
2929
}
2930

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
3037
.machine-name .name {
3038
}
3039

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
3230
.machine .info-content.ips .collection {
3231
  padding: 0;
3232
}
3233

    
3234
.machine .info-content.ips .ips .model-item .subnet {
3235
  padding-top: 2px;
3236
  width: 35%;
3237
  float: left;
3238
}
3239

    
3240
.machine .info-content.ips .ips .port-ip-item:last-child {
3241
  margin-bottom: 0;
3242
}
3243

    
3244
.machine .info-content.ips .ips .port-ip-item:hover {
3245
  background-color: #75A7BF;
3246
}
3247

    
3248
.machine .info-content.ips .ips .port-ip-item {
3249
  padding: 4px;
3250
  margin-bottom: 2px;
3251
}
3252

    
3253
.machine .info-content.ips .ips .model-item .ip {
3254
  padding-top: 2px;
3255
  width: 55%;
3256
  float: left;
3257
}
3258

    
3259
.machine .info-content.ips .ips .model-item .type {
3260
  float: left;
3261
  margin-right: 10px;
3262
  vertical-align: middle;
3263
  color: #fff;
3264
  background-color: #4085A5;
3265
  padding: 3px;
3266
}
3267

    
3268
.machine .info-content.ips .port {
3269
  width: 15%;
3270
  float: left;
3271
}
3272

    
3273
.machine .info-content.ips .ips {
3274
  width: 80%;
3275
  float: right;
3276
}
3277

    
3278
.machine .info-content.ips .port-item:last-child {
3279
  border-bottom: none;
3280
  padding-bottom: 0;
3281
  margin-bottom: 0;
3282
}
3283

    
3284
.machine .info-content.ips .port-item {
3285
  border-bottom: 1px solid #6F93A4;
3286
  padding: 5px 0;
3287
  margin-bottom: 5px;
3288
}
3289

    
3290
.machine .info-content.ips .port-item img {
3291
  float: left;
3292
  margin-top: 6px;
3293
  margin-right: 3%;
3294
}
3295

    
3296
.machine .info-content.ips .port-item .port {
3297
  font-weight: bold;
3298
  padding-top: 6px;
3299
}
3300

    
3301
.machine .info-content.ips {
3302
    background-color: #84B7D0;
3303
    padding: 5px 10px;
3304
    font-size: 0.6em;
3305
}
3306

    
3307
.metadata-container {
3308
    line-height: 12px;
3309
    height: 85px;
3310
    background-color: #84b7d0;
3311
}
3312

    
3313
.metadata-column {
3314
    border-right: 1px solid #5CA1C0;
3315
    color: black;
3316
    float: left;
3317
    font-size: 60%;
3318
    margin-top: 3px;
3319
    height: 70px;
3320
    padding-bottom: 5px;
3321
}
3322

    
3323
.vm-stats {
3324
    padding-left: 10px;
3325
    padding-right: 5px;
3326
    width: 220px;
3327
}
3328

    
3329
.vm-stats div.stat-content {
3330
    height: 18px;
3331
}
3332

    
3333
.vm-stats div.stat-content img {
3334
    margin: 0;
3335
}
3336

    
3337
.vm-stats div img.stat-busy {
3338
    margin-top: -7px;
3339
    margin-left: 90px;
3340
}
3341

    
3342
.vm-stats div.stat-content img.busy {
3343
    margin-left: 95px;
3344
}
3345

    
3346
.vm-stats div.stat-error {
3347
    display:none;
3348
}
3349

    
3350
div.stat-error {
3351
    color: #f00;
3352
}
3353

    
3354
.single div.stat-error {
3355
    text-align: center;
3356
    font-size: 0.8em;
3357
}
3358

    
3359
.metadata-column {
3360
    margin-top: 4px;
3361
}
3362

    
3363
.vm-details {
3364
    width: 130px;
3365
    margin-left:17px;
3366
}
3367

    
3368
.vm-details.metadata-column {
3369
    padding-top: 5px;
3370
    height: 65px;
3371
}
3372

    
3373
.vm-details .image-details {
3374
    margin-top: 8px;
3375
}
3376

    
3377
.vm-details .vm-detail {
3378
    display: block;
3379
}
3380

    
3381
.vm-details span.value {
3382
    color: #444;
3383
}
3384

    
3385
.single-container .lower .stat-busy {
3386
    margin-top: 10px;
3387
    margin-left: 325px;
3388
}
3389

    
3390
.vm-metadata {
3391
    padding-left: 10px;
3392
    width: 100px;
3393
    border: none;
3394
}
3395

    
3396
.metadata-left {
3397
}
3398

    
3399
.metadata-right {
3400
    width: 73px;
3401
    float:left;
3402
    height: 35px;
3403
    padding-left: 5px;
3404
    position:relative;
3405
    overflow:hidden;
3406
}
3407

    
3408
.metadata-right .items {
3409
    position:absolute;
3410
    height:20000em;
3411
}
3412

    
3413
.metadata-keys-container {
3414
    height: 60px;
3415
    float: left;
3416
}
3417

    
3418
.single .metadata-keys-container {
3419
    float: none;
3420
    height: auto;
3421
    margin-bottom: 5px;
3422
}
3423

    
3424
.single a.manage-metadata {
3425
    font-size: 80%;
3426
    margin-left:4px;
3427
    color: #383838;
3428
}
3429

    
3430
a.manage-metadata, a.stats-report {
3431
    font-size: 100%;
3432
    color: black;
3433
    margin-left:17px;
3434
    text-decoration: underline;
3435
}
3436

    
3437
a.stats-report {
3438
    margin: 15px 0  0 80px;
3439
}
3440

    
3441
div.machine a.manage-metadata:hover {
3442
    background-color: transparent;
3443
}
3444

    
3445
.single .metadata-actions, .single .metadata-keys-container .items {
3446
    padding-left: 5px;
3447
}
3448
.metadata-actions, .metadata-keys-container .items{
3449
    margin-top: 5px;
3450
}
3451

    
3452
.singe .metadata-actions, .single .metadata-keys-container .items{
3453
    font-size: 80%;
3454
    line-height: 12px;
3455
    width: 300px;
3456
}
3457

    
3458
.metadata-actions .prev,  .metadata-actions .next{
3459
    float:left;
3460
    width:29px;
3461
    height:6px;
3462
    cursor: pointer;
3463
}
3464

    
3465
.metadata-actions .prev {
3466
    background: url("../images/roll-up.png") no-repeat scroll 0 0 transparent;
3467
}
3468

    
3469
.metadata-actions .next {
3470
    background: url("../images/roll-down.png") no-repeat scroll 0 0 transparent;
3471
}
3472

    
3473
.scrollable {
3474
    position:relative;
3475
    overflow:hidden;
3476
    height: 35px;
3477
    width: 120px;
3478
    margin-bottom:2px;
3479
}
3480

    
3481
.scrollable .items {
3482
    position:absolute;
3483
    height:20000em;
3484
}
3485

    
3486
/* single view */
3487
.single {
3488
    color: #383838;
3489
}
3490

    
3491
.single .column1 {
3492
    float: left;
3493
    margin: 1px 0 25px 17px;
3494
    width: 140px;
3495
}
3496

    
3497
.single .column1 .state {
3498
    float: left;
3499
    margin-left: 4px;
3500
    padding-bottom: 6px;
3501
    padding-top: 3px;
3502
    position: relative;
3503
    right: 0;
3504
    text-align: center;
3505
    width: 126px;
3506
}
3507

    
3508
.single .column1 .state-label {
3509
    padding-top: 5px;
3510
}
3511

    
3512
.single .column1 .indicators {
3513
    margin-right: 38px !important;
3514
}
3515

    
3516
.single div.connect-arrow {
3517
    margin-left: -17px;
3518
}
3519

    
3520
.single div.connect-border {
3521
    margin-left: -29px;
3522
}
3523

    
3524
.single .single-actions {
3525
    width: 150px;
3526
    height: 60px;
3527
    margin-bottom: 45px;
3528
    margin-left: -10px;
3529
}
3530

    
3531
.single .vm-actions .action-container {
3532
    margin-bottom: 1px;
3533
}
3534

    
3535
.single .vm-actions .action-container .confirm_single {
3536
    right: -45px;
3537
}
3538

    
3539
.single .vm-actions .action-container.destroy .confirm_single {
3540
}
3541

    
3542
.single .vm-actions .action-container.destroy {
3543
    bottom: -20px;
3544
}
3545

    
3546
.single a.single-action {
3547
    text-decoration: none;
3548
    cursor: pointer;
3549
    display: block;
3550
}
3551

    
3552
.single a.single-action:hover {
3553
    background-color:#A1C8DB;
3554
    width: 162px;
3555
    opacity: 0.8;
3556
    filter: alpha(opacity = 80);
3557
}
3558

    
3559
.single .destroy a.single-action.selected {
3560
    color: #880000 !important;
3561
}
3562

    
3563
.single a.single-action.selected {
3564
    color: #FF7F2A !important;
3565
    width: 50px !important;
3566
}
3567

    
3568
.single a.single-action.selected:hover {
3569
    background-color:transparent;
3570
}
3571

    
3572
.single .spinner, .single .action-indicator {
3573
    margin: 15px 45px 0 0px !important
3574
}
3575

    
3576
.single .action-indicator {
3577
    margin-right: 55px !important;
3578
}
3579

    
3580
.single .wave {
3581
    margin: 15px 53px 0 0px !important
3582
}
3583

    
3584
.icon div.action_error {
3585
    font-size: 100%;
3586
}
3587

    
3588
.single div.action_error {
3589
    position: absolute;
3590
    top: 29px;
3591
    right: 35px;
3592
}
3593

    
3594
.single .column2 {
3595
    background-color: #A1C8DB;
3596
    float: left;
3597
    font-size: 78%;
3598
    line-height: 17px;
3599
    margin: 0 0 10px 5px;
3600
    width: 358px;
3601
}
3602

    
3603
.single .column2 .machine-labels {
3604
    float: left;
3605
    font-size: 90%;
3606
    margin-left: 10px;
3607
    margin-top: 10px;
3608
    width: 125px;
3609
}
3610

    
3611
.single .machine-detail.title {
3612
    background-color: #74AEC9;
3613
    color: #fff;
3614
    padding: 4px 10px;
3615
    font-size: 0.8em;
3616
    width: 338px;
3617
    margin-left: 5px;
3618
    float: left;
3619
}
3620

    
3621
.single .column2 .machine-details {
3622
    float: right;
3623
    text-align: right;
3624
    font-size: 90%;
3625
    width: 210px;
3626
    margin-right: 10px;
3627
    margin-top: 10px;
3628
}
3629

    
3630
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3631
    margin-bottom: 13px;
3632
}
3633

    
3634
.single .tags {
3635
    clear: both;
3636
    margin-bottom: 10px;
3637
    margin-left: 10px;
3638
}
3639

    
3640
.single .tags-label {
3641
    float: left;
3642
    padding: 0 5px;
3643
    width: 30px;
3644
}
3645

    
3646
.single .tags-down-arrow {
3647
    background: url("../images/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3648
    float: left;
3649
    height: 16px;
3650
    width: 9px;
3651
}
3652

    
3653
.single .tags-header .info-header{
3654
    padding-top:0;
3655
    padding-bottom:0;
3656
}
3657

    
3658
.single .tags-header {
3659
    font-size: 0.62em;
3660
    cursor: pointer;
3661
    float: left;
3662
    margin-bottom:5px;
3663
}
3664

    
3665
.single .tags-header span.label {
3666
    font-size: 104%;
3667
}
3668

    
3669
.single .tags-content {
3670
    background-color: #84B7D0;
3671
    clear: both;
3672
    height: auto;
3673
    padding-bottom: 5px;
3674
    padding-top: 5px;
3675
    width: 339px;
3676
}
3677

    
3678
.single .column3 {
3679
    background-color: #A1C8DB;
3680
    width: 150px;
3681
    overflow: visible;
3682
    padding-bottom: 10px;
3683
    position: absolute;
3684
    right: 20px;
3685
    top: 130px;
3686
}
3687

    
3688
.single .col3 {
3689
    float: right;
3690
    width: 150px;
3691
    margin-right: 15px;
3692
    margin-bottom: 15px;
3693
}
3694

    
3695
.single .column3 .controls {
3696
    font-size: 80%;
3697
    height: 20px;
3698
    padding-left: 7px;
3699
    padding-right: 7px;
3700
    padding-top: 8px;
3701
    padding-bottom: 5px;
3702
    border-bottom: 1px solid #84B7D0;
3703
}
3704

    
3705
.single .column3 .vm-control:hover {
3706
    background-color: #5CA1C0;
3707
}
3708

    
3709
.single .column3 .previous {
3710
    float:left;
3711
    width: 72px;
3712
}
3713

    
3714
.single .column3 .next {
3715
    float: right;
3716
    text-align: center;
3717
    width: 60px;
3718
}
3719

    
3720
.single .column3 .next-label {
3721
    float: right;
3722
    margin-right: 3px;
3723
    margin-top: -2px;
3724
}
3725

    
3726
.single .column3 .next-arrow {
3727
    float: right;
3728
    height: 18px;
3729
    width: 10px;
3730
    background: url("../images/right-arrow.png") no-repeat scroll 3px 2px transparent;
3731
}
3732

    
3733
.single .column3 .prev-label {
3734
    float: left;
3735
    margin-left: 3px;
3736
    margin-top: -2px;
3737
}
3738

    
3739
.single .column3 .prev-arrow {
3740
    background: url("../images/left-arrow.png") no-repeat scroll 3px 2px transparent;
3741
    float: left;
3742
    height: 18px;
3743
    width: 10px;
3744
}
3745

    
3746
.single .column3 .separator {
3747
    width: 135px;
3748
    height: 1px;
3749
    background-color: #84B7D0;
3750
    margin: 0 0 0 7px;
3751
    clear: both;
3752
}
3753

    
3754
.single .column3 .servers {
3755
    font-size: 80%;
3756
    line-height: 15px;
3757
    padding-top: 10px;
3758
    text-align: right;
3759
    overflow: visible;
3760
    position: relative;
3761
}
3762

    
3763
.single .column3 .server-name {
3764
    margin-left: 10px;
3765
    padding-right: 5px;
3766
    cursor: pointer;
3767
    padding-bottom: 2px;
3768
}
3769
div.single div.column3 div.server-name:hover {
3770
    background-color: #5CA1C0;
3771
}
3772
.single .column3 .column3-selected {
3773
    background-color: #84B7D0;
3774
    color: white;
3775
    opacity: 0.8;
3776
    padding-left: 9px;
3777
    width: 160px;
3778
    filter: alpha(opacity = 80);
3779
    position: relative;
3780
    width: 126px;
3781
}
3782

    
3783
.single .toggler {
3784
    color: #FFFFFF;
3785
    float: right;
3786
    font-size: 140%;
3787
}
3788

    
3789
.single .cpu-usage, .single .network-usage {
3790
    text-align: center;
3791
    padding-top: 15px;
3792
    margin-bottom: 5px;
3793
    font-size: 90%;
3794
    font-weight: bold;
3795
}
3796

    
3797
.single .cpu-graph, .single .network-graph {
3798
    margin-left: 20px;
3799
    margin-bottom:30px;
3800
    width: 660px;
3801
}
3802

    
3803
.single div.lower .stats-select .stats-select-option.selected {
3804
    background-color: #4085A5;
3805
    color: #fff;
3806
}
3807

    
3808
.single div.lower .stats-select .stats-select-option {
3809
    cursor: pointer;
3810
    background-color: #DDF1FB;
3811
    color: #4085A5;
3812
    display: block;
3813
    float: left;
3814
    padding: 7px 10px;
3815
    font-size: 0.7em;
3816
}
3817

    
3818
.single div.lower img.stats {
3819
    margin-left: 82px;
3820
}
3821

    
3822
.single div.lower img.stats {
3823
    display: none;
3824
}
3825

    
3826
.single .single-image {
3827
    width: 126px;
3828
    height: 136px;
3829
    margin-bottom: 10px;
3830
    margin-left: 4px;
3831
    background-image: url("../images/icons/machines/large/unknown-sprite.png");
3832
    background-repeat: no-repeat;
3833
    cursor: pointer;
3834
}
3835

    
3836
.single .single-image-state1 {
3837
    background-position: 0px 0;
3838
}
3839

    
3840
.single .single-image-state3 {
3841
    background-position: -252px 0;
3842
}
3843

    
3844
.single .single-image-state4 {
3845
    background-position: -378px 0;
3846
}
3847

    
3848
.single .single-image-state2 {
3849
    background-position: -126px 0;
3850
}
3851

    
3852
.single .column3 .previous, .single .column3 .next {
3853
    cursor: pointer;
3854
    background-color: #84B7D0;
3855
    color: white;
3856
    font-size: 100%;
3857
    height: 15px;
3858
    padding-top: 2px;
3859
}
3860

    
3861
.single .column3 .disabled {
3862
    opacity: 0.5;
3863
    filter: alpha(opacity = 50);
3864
}
3865

    
3866
.single div.lower {
3867
    clear:both;
3868
    background: #EFF7FA repeat scroll 0 0;
3869
    width: 700px;
3870
    padding-bottom: 15px;
3871
}
3872

    
3873
.single div.upper {
3874
    background: transparent;
3875
    margin-bottom: 10px;
3876
    overflow: visible;
3877
    overflow: hidden;
3878
    width: 700px;
3879
    background: #EFF7FA repeat scroll 0 0;
3880
}
3881

    
3882
/* console css */
3883
.console-header-logo {
3884
    padding-top: 16px;
3885
    margin-left: 30px;
3886
    position: fixed;
3887
}
3888

    
3889
.console-header-logo img {
3890
    max-width:100%;
3891
    max-height:65px;
3892
}
3893

    
3894
#console-header div.help-text {
3895
    font-size: 70%;
3896
    font-weight:bold;
3897
    color:#FFFFFF;
3898
    position: absolute;
3899
    height: 20px;
3900
    top: 79px;
3901
}
3902

    
3903
div.console-container {
3904
    margin: 0 0em;
3905
    height: auto;
3906
}
3907

    
3908
#wrapper.console {
3909
    width: auto;
3910
}
3911

    
3912
.console-info {
3913
    font-size:80%;
3914
    color: white;
3915
    position:absolute;
3916
    margin: 15px 0 0 480px;
3917
}
3918

    
3919
applet {
3920
    width:100%;
3921
    height:100%;
3922
}
3923

    
3924
div.console-footer {
3925
    /* this is for version 0.5*/
3926
    display: none;
3927
}
3928

    
3929
.console-footer #footer-text{
3930
    float:left;
3931
    left: auto;
3932
    margin-left:30px;
3933
}
3934

    
3935
/* add network wizard (see also #wizard for shared classes) */
3936
#networks-wizard .header {
3937
    background-color: #4085A5;
3938
    height: 56px;
3939
}
3940

    
3941
#networks-wizard div.name-input {
3942
    margin: 75px 0 0 55px;
3943
}
3944

    
3945
#networks-wizard input {
3946
    border: 1px solid #CCCCCC;
3947
    color: #445566;
3948
    letter-spacing: 1px;
3949
    width: 170px;
3950
}
3951

    
3952
#networks-wizard span.help {
3953
    font-style: italic;
3954
    font-size: 80%;
3955
    margin-left: 10px;
3956
}
3957

    
3958
#networks-wizard .separator-end {
3959
    background-color: #387693;
3960
    height: 6px;
3961
    width: 479px;
3962
    margin-left: -13px;
3963
    margin-top: 19px;
3964
}
3965

    
3966
.red {
3967
    color: red;
3968
}
3969

    
3970
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3971
#add-machines-wizard span.machine-name {
3972
    margin-left: 4px;
3973
    vertical-align: text-top;
3974
}
3975

    
3976
#add-machines-wizard img.list-logo {
3977
    margin: 2px 1px 1px;
3978
}
3979

    
3980
.css-panes {
3981
    clear: both;
3982
    position: relative;
3983
    z-index: 10;
3984
}
3985

    
3986
.last .firewall-content {
3987
}
3988

    
3989
#pub .last .network-separator {
3990
    display:none;
3991
}
3992

    
3993
.public-networks .empty-network-slot {
3994
    display: none;
3995
}
3996

    
3997
.clearfix {
3998
    display: block;
3999
    width: auto;
4000
    zoom: 1;
4001
}
4002

    
4003
/* float clearing for all browsers except the devil one */
4004
.clearfix:after{
4005
  clear: both;
4006
  content: ".";
4007
  display: block;
4008
  height: 0;
4009
  visibility: hidden;
4010
  font-size: 0;
4011
}
4012

    
4013
* html .clearfix {
4014
    display: inline-block;
4015
}
4016

    
4017
.icon .cont-toggler {
4018
    margin-top: -1px;
4019
}
4020

    
4021
.icon .wave {
4022
    margin-right: 4px !important;
4023
    margin-top: 15px !important;
4024
}
4025

    
4026
.icon .status {
4027
    margin-right: 3px;
4028
}
4029

    
4030
#machinesview .status, .single .state {
4031
    font-size: 75%;
4032
}
4033

    
4034
#machinesview-list div.action-indicator {
4035
    margin:0 !important;
4036
    float: none !important;
4037
}
4038

    
4039
.icon div.action-indicator {
4040
    margin-top: 14px;
4041
    margin-right: 4px;
4042
}
4043

    
4044
div.action-indicator {
4045
    width: 15px;
4046
    height: 20px;
4047
    background-repeat: no-repeat;
4048
    background-position: 0 0;
4049
}
4050

    
4051
tbody.machines div.action-indicator {
4052
    position: relative;
4053
    top: -2px;
4054
}
4055
div.state .destroy, tbody.machines .destroy {
4056
    background-image: url("../images/icons/actions/medium/destroy.png");
4057
}
4058
div.state .console, tbody.machines .console {
4059
    background-image: url("../images/icons/actions/medium/console.png");
4060
}
4061
div.state .start, tbody.machines .start {
4062
    background-image: url("../images/icons/actions/medium/start.png");
4063
}
4064
div.state .reboot, tbody.machines .reboot {
4065
    background-image: url("../images/icons/actions/medium/reboot.png");
4066
}
4067
div.state .shutdown, tbody.machines .shutdown {
4068
    background-image: url("../images/icons/actions/medium/shutdown.png");
4069
}
4070

    
4071
h3.overlay-inner-title {
4072
    color: #4085A5;
4073
    font-size: 2em;
4074
}
4075

    
4076
#add-name-container {
4077
    margin-bottom: 10px;   
4078
}
4079

    
4080
.remove-field-trigger, .add-field-trigger {
4081
    cursor: pointer;
4082
}
4083

    
4084
.add-field-trigger img {
4085
    vertical-align: middle;
4086
}
4087

    
4088
.machine-now-building {
4089
    padding-right: 15px !important;
4090
    text-align: justify;
4091
}
4092

    
4093
.sub-text {
4094
    padding-top: 15px;
4095
    padding-right: 15px;
4096
    text-align: justify;
4097
    font-style: italic;
4098
    font-size: 0.8em !important;
4099
}
4100

    
4101
#notification-box a {
4102
    color: #4085A5;
4103
}
4104

    
4105
#notification-box .machine-title img {
4106
    vertical-align: middle;
4107
}
4108

    
4109
#notifiaction-box .password-header {
4110
    margin-bottom: 0 !important;
4111
}
4112

    
4113
#notification-box .password-container a {
4114
    color: #fff;
4115
    text-decoration: underline;
4116
}
4117

    
4118
#notification-box .password-container a:hover {
4119
    background-color: #fff;
4120
    color: #4085A5;
4121
}
4122

    
4123
#notification-box .password-container {
4124
    background: #4085A5;
4125
    border: none;
4126
}
4127

    
4128
#notification-box .password-container .password a {
4129
    font-weight: normal !important;
4130
}
4131

    
4132
#notification-box .cmd {
4133
    color: #fff;
4134
    font-family: monospace;
4135
    font-size: 1.6em;
4136
}
4137

    
4138
.machine-container .separator {
4139
    background-color: #B0D1E0;
4140
}
4141

    
4142
#creation-password-overlay div.password-cont {
4143
    margin: 10px auto;
4144
    padding: 10px;
4145
    border: 2px solid #75B54A;
4146
    background-color: #AADE87;
4147
    color: #447821;
4148
    text-align: left;
4149
    padding-left: 5em;
4150
    position: relative;
4151
}
4152

    
4153
#creation-password-overlay {
4154
    position: relative;
4155
}
4156

    
4157
#creation-password-overlay .form-action {
4158
    position: absolute;
4159
    bottom: 15px;
4160
    right: 13px;
4161
    font-size: 0.8em;
4162
}
4163

    
4164
#creation-password-overlay .password-label {
4165
    float: left;
4166
}
4167

    
4168
#creation-password-overlay .password {
4169
    font-size: 1.5em;
4170
    font-weight: bold;
4171
    letter-spacing: 2px;
4172
    font-family: Georgia, Times, serif;
4173
    margin-right: 5em;
4174
    float: right;
4175
    margin-top: -4px;
4176
}
4177

    
4178
.feedback-form .description {
4179
    margin-bottom: 25px;
4180
}
4181

    
4182
.feedback-form label {
4183
    display: block;
4184
    font-weight: bold;
4185
    margin-bottom: 10px;
4186
    font-size: 0.8em;
4187
}
4188

    
4189
.feedback-form .form-actions {
4190
    border-top: none;
4191
}
4192

    
4193
.nospace {
4194
    padding-top: 0 !important;
4195
    padding-bottom: 0 !important;
4196
}
4197

    
4198
.noborder {
4199
    border-top: none !important;
4200
    border-bottom: none !important;
4201
}
4202

    
4203
.overlay .feedback-form .messages.description {
4204
    padding-bottom:0;
4205
    margin-bottom: 0;
4206
}
4207

    
4208
.feedback-form .messages .error-message {
4209
    color: #f00;
4210
}
4211

    
4212
.feedback-form .messages .success-message {
4213
    color: #8AA87F;
4214
}
4215

    
4216
.feedback-form .feedback-message {
4217
    width: 548px;
4218
    height: 200px;
4219
    border: 1px solid #ddd;
4220
    padding: 5px;
4221
}
4222

    
4223
#feedback-form .empty-error-msg {
4224
    display: none;
4225
}
4226

    
4227
#feedback-form .data-text {
4228
    display: none;
4229
}
4230

    
4231
#feedback-form .message {
4232
    display: none;
4233
}
4234

    
4235
#feedback-form label {
4236
    display: block;
4237
    font-size: 0.85em;
4238
    font-weight: bold;
4239
}
4240

    
4241
#feedback-form label.inline {
4242
    display: inline;
4243
    padding-left: 5px;
4244
}
4245

    
4246
#feedback-form p {
4247
    padding: 1em 0;
4248
    color: #444;
4249
    margin-bottom: 10px;
4250
}
4251

    
4252
#feedback-form .description {
4253
    font-style: italic;
4254
    font-size: 0.9em;
4255
    color: #888;
4256
}
4257

    
4258
#feedback-form .feedback-text {
4259
    width: 98%;
4260
    height: 100px;
4261
    margin-top: 10px;
4262
    margin-bottom: 10px;
4263
}
4264

    
4265
#feedback-form .submit-data {
4266
    display: none;
4267
}
4268

    
4269
#feedback-form .submit, #invform .submit {
4270
    background-color: #4085A5;
4271
    color: #fff;
4272
    border: none;
4273
    padding: 5px 16px;
4274
    cursor: pointer;
4275
    font-size: 1em;
4276
    position: relative;
4277
}
4278

    
4279
#feedback .submit {
4280
    float: right;
4281
    right: 10px;
4282
    margin-top: 10px;
4283
}
4284

    
4285

    
4286
#feedback-form .submit:hover, #invform .submit:hover {
4287
    background-color: #549FC3;
4288
}
4289

    
4290
.feedback-intro {
4291
    padding-right: 15px !important;
4292
    text-align: justify;
4293
}
4294

    
4295
.popup-body .message {
4296
    padding: 20px 5px;
4297
    display: none;
4298
}
4299

    
4300
.popup-body .loading {
4301
    color: #fff;
4302
}
4303

    
4304
.popup-body .success {
4305
    color: #1F921A;
4306
}
4307

    
4308
.popup-body .errormsg {
4309
    color: #E32424;
4310
}
4311

    
4312

    
4313
.close-msg-box {
4314
    display: block;
4315
    margin-top: 10px;
4316
    cursor: pointer;
4317
    color: #4085A5;
4318
    text-decoration: underline;
4319
}
4320

    
4321

    
4322
.console .ip-version-label {
4323
    margin: 0 5px;
4324
}
4325

    
4326
.ipv6-text, .ipv4-text {
4327
    font-size: 0.9em;
4328
}
4329

    
4330
.fqdn {
4331
}
4332

    
4333
.column2 .fqdn {
4334
  padding: 3px 10px;
4335
}
4336

    
4337
.tooltip {
4338
    background-color: #C4DDE9;
4339
    color: #000;
4340
    font-size: 0.7em;
4341
    padding: 0.2em 0.5em;
4342
    border: 1px solid #888;
4343
    z-index: 50000;
4344
}
4345

    
4346
/*404 and 500 pages*/
4347

    
4348
.error_page {
4349
    position: relative;
4350
    top: 40px;
4351
    padding-bottom: 140px !important;
4352
}
4353

    
4354
.error_page h1 {
4355
    font-weight: normal;
4356
}
4357

    
4358
.error_page .msg_header {
4359
    margin: 0px;
4360
    font-size: 10em;
4361
    position: absolute;
4362
    left: -5px;
4363
    top: 0px;
4364
    color: #4085A5;
4365
    font-family: arial, verdana;
4366
}
4367

    
4368
.error_page p.error_desc {
4369
    color: #fff;
4370
    font-size: 0.8em;
4371
}
4372

    
4373
.error_page {
4374
    padding-right: 50px !important;
4375
    padding-left: 100px !important;
4376
}
4377

    
4378
.error_page .error_content {
4379
    padding-left: 150px;
4380
    padding-top: 97px;
4381
}
4382

    
4383
.error_page .error_content .links, .info_content .links {
4384
    margin-top: 10px;
4385
    margin-left: 20px;
4386
}
4387

    
4388
.error_page .http_error .code {
4389
    letter-spacing: -10px;
4390
    font-size: 9em;
4391
}
4392

    
4393
.error_page .http_error .msg {
4394
    letter-spacing: -1px;
4395
    font-size: 2em;
4396
}
4397

    
4398
.error_page .http_error {
4399
    position: absolute;
4400
    right: 0px;
4401
    bottom: 0px;
4402
    color: #75B3D0;
4403
    line-height: 1em;
4404
}
4405

    
4406
.error_page .error_content a, .info_content .links a {
4407
    color: #4085A5;
4408
    font-weight: bold;
4409
    margin-right: 10px;
4410
    font-size: 0.9em;
4411
}
4412

    
4413
.error_body #container, .info_body #container {
4414
    background-position: right 200px;
4415
}
4416

    
4417
.info_page h1 {
4418
    color: #4085A5;
4419
    font-size: 2em;
4420
    font-weight: normal;
4421
}
4422

    
4423
.info_page p {
4424
    color: #ffffff;
4425
    margin: 1em 0;
4426
}
4427

    
4428
.info_body p a, .error_body p a{
4429
    color: #4085A5;
4430
    text-decoration: underline;
4431
}
4432

    
4433
.error_404 .http_error .code {
4434
    letter-spacing: -7px;
4435
}
4436

    
4437
.network-progress-indicator {
4438
    position: relative;
4439
    display: none;
4440
}
4441

    
4442
.network-progress-indicator img {
4443
    position: absolute;
4444
    bottom: 44px;
4445
    left: 340px;
4446
}
4447

    
4448

    
4449
.single .progress-message {
4450
    margin-top: 90px;
4451
    font-size: 0.6em;
4452
    padding: 0 10px;
4453
    text-align: center;
4454
}
4455

    
4456
/*metadata keys/values*/
4457
.items .tag-item  {
4458
    display: block;
4459
}
4460

    
4461
.single .items .tag-item .key {
4462
    width: 60px;
4463
}
4464

    
4465
.running .scrollable, .terminated .scrollable {
4466
    height: 42px;
4467
}
4468

    
4469
.items .tag-item .key {
4470
    margin-right: 5px;
4471
    width: 30px;
4472
    display: block;
4473
    float: left;
4474
    color: #000;
4475
}
4476

    
4477
.items .tag-item .value {
4478
    color: #444;
4479
}
4480

    
4481
#machinesview-list {
4482
    display: none;
4483
}
4484

    
4485
#machinesview-single {
4486
    position: relative;
4487
    display: none;
4488
}
4489

    
4490
#machinesview-icon {
4491
    display: none;
4492
}
4493

    
4494
#machinesview-icon, #machinesview-single, #machinesview-list {
4495
    
4496
}
4497

    
4498
tbody.machines .spinner {
4499
    margin-top: 0!important;
4500
    margin: 0 !important;
4501
    float: none !important;
4502
}
4503

    
4504
.slider .slider-point {
4505
    width: 4px;
4506
    height: 3px;
4507
    margin-left: 1px;
4508
    background-color: transparent;
4509
    display: block;
4510
    position: absolute;
4511
    z-index: 10;
4512
    bottom: 0px;
4513
}
4514

    
4515
.slider .slider-point-light {
4516
    background-color: transparent;
4517
}
4518

    
4519
.slider-point-text {
4520
    font-size: 0.6em;
4521
    position: absolute;
4522
    top: 4px;
4523
    border-top: 5px solid #C5DEE9;
4524
    padding: 3px;
4525
    color: #4085A5;
4526
    display: block;
4527
    min-width: 6px;
4528
    text-align: middle;
4529
}
4530

    
4531
.slider .handle {
4532
    z-index: 50;
4533
}
4534

    
4535
.modal p.desc {
4536
    margin: 5px 0;
4537
    margin-left: 37px;
4538
    font-size: 0.8em;
4539
    color: #888;
4540
}
4541

    
4542
.api_overlay_template {
4543
    display: none;
4544
}
4545

    
4546
.api_content .password-container .password {
4547
    color: #fff;
4548
    font-size: 1.1em;
4549
}
4550

    
4551
#disks-pane {
4552
    margin-top: 58px;
4553
}
4554

    
4555
span.resend-msg {
4556
    display: block;
4557
    margin-bottom: 5px;
4558
}
4559

    
4560
.success-msg {
4561
    background-color: #5CAD54;
4562
    color: #fff;
4563
    padding: 0.4em;
4564
    border: 1px solid #ddd;
4565
}
4566

    
4567
.error-msg {
4568
    background-color: #800000;
4569
    color: #fff;
4570
    padding: 0.4em;
4571
    border: 1px solid #ddd;
4572
}
4573

    
4574
.success-msg em, .error-msg em {
4575
    font-weight: bold;
4576
    font-style: normal;
4577
    font-size: 0.9em;
4578
}
4579

    
4580
.pagination {
4581
            font-size: 80%;
4582
        }
4583
        
4584
.pagination a {
4585
    text-decoration: none;
4586
        border: solid 1px #AAE;
4587
        color: #15B;
4588
}
4589

    
4590
.pagination a, .pagination span {
4591
    display: block;
4592
    float: left;
4593
    padding: 0.3em 0.5em;
4594
    margin-right: 5px;
4595
        margin-bottom: 5px;
4596
        min-width:1em;
4597
        text-align:center;
4598
}
4599

    
4600
.pagination .current {
4601
    background: #4085A5;
4602
    color: #fff;
4603
        border: solid 1px #AAE;
4604
}
4605

    
4606
.pagination .current.prev, .pagination .current.next{
4607
        color:#999;
4608
        border-color:#999;
4609
        background:#fff;
4610
}
4611

    
4612
table.list-machines .wave {
4613
    float: none !important;
4614
    margin: 0 !important;
4615
}
4616

    
4617
.overlay {
4618
    display: none;
4619
}
4620

    
4621
.overlay .copy-content .clip-copy  {
4622
    right: 10px;
4623
    top:8px;
4624
    border: 1px solid #fff;
4625
}
4626

    
4627
.overlay .copy-content {
4628
    background-color: #387693;
4629
    color: #fff;
4630
    padding: 10px;
4631
    font-size: 1.2em;
4632
    text-align: center;
4633
    position: relative;
4634
}
4635

    
4636
.overlay {
4637
    background-color: #fff;
4638
    border: 2px solid #444;
4639
    text-align: left;
4640

    
4641
    -moz-box-shadow: 0 0 90px 5px #000;
4642
    -webkit-box-shadow: 0 0 90px 5px #000;
4643
    box-shadow: 0 0 90px 5px #000;
4644
    width: 600px;
4645
}
4646

    
4647
.overlay.overlay-createvm {
4648
    width: 640px;
4649
}
4650

    
4651
.overlay a {
4652
    color: #387693;
4653
}
4654

    
4655
.overlay .diagnostics-list {
4656
    height: 400px;
4657
    overflow: scroll;
4658
    overflow-y: scroll;
4659
    overflow-x: hidden;
4660
}
4661

    
4662
.overlay .overlay-content .description.subinfo, .overlay .extra-info {
4663
    margin-bottom:0;
4664
    border-bottom: none;
4665
    padding-bottom:0;
4666
    margin-top: 10px;
4667
    padding-top:10px;
4668
    border-top: 1px solid #64a6c4;
4669
    /*border-top: 1px solid #DBE6EB;*/
4670
    font-size: 0.8em;
4671
}
4672

    
4673
.overlay .overlay-content .important {
4674
    color: #800000;
4675
}
4676

    
4677
.overlay .overlay-content .description.noborder {
4678
  margin-bottom:0;
4679
  border:0;
4680
}
4681

    
4682
.overlay .overlay-content .description {
4683
    color: #444;
4684
    border-bottom: 1px solid #64a6c4;
4685
    margin-bottom: 10px;
4686
    padding-bottom: 10px;
4687
    font-size: 0.9em;
4688
    line-height: 1.6em;
4689
}
4690

    
4691
.overlay .overlay-content .empty-message {
4692
    margin-bottom: 10px;
4693
}
4694

    
4695
.overlay h3.overlay-header {
4696
    font-size: 0.9em;
4697
    text-align: left;
4698
    padding: 0.8em;
4699
    padding-left: 1em;
4700
    font-weight: normal;
4701
    border-bottom: 1px solid #ddd;
4702
}
4703

    
4704
.overlay h3.overlay-header .title {
4705
    float: left;
4706
}
4707

    
4708
.overlay .container {
4709
    position: relative;
4710
    padding-top: 1em;
4711
    padding: 0.5em;
4712
    background-image: url("../images/popup-bg.png");
4713
    background-repeat: repeat-x;
4714
}
4715

    
4716
.overlay .content {
4717
    background-color: transparent;
4718
    background-image: url("../images/popup-inner-bg.png");
4719
    padding: 1em;
4720
    font-size: 0.8em;
4721
    background-repeat: repeat-x;
4722
    -moz-box-shadow: 0 0 1px 1px #888;
4723
    -webkit-box-shadow: 0 0 1px 1px #888;
4724
    box-shadow: 0 0 1px 1px #888;
4725
}
4726

    
4727
.overlay .message {
4728
}
4729

    
4730
.overlay .actions {
4731
    position: absolute;
4732
    right: 0.75em;
4733
    top: 0.6em;
4734
}
4735

    
4736
.overlay .actions span {
4737
    font-size: 0.8em;
4738
    color: #fff;
4739
    cursor: pointer;
4740
    margin-left: 10px;
4741
    display: block;
4742
    float: left;
4743
    background-color: #4085A5;
4744
    padding: 0.2em 0.4em;
4745
}
4746

    
4747
.overlay-error .error-more-details {
4748
    margin-top: 5px;
4749
    max-height: 210px;
4750
    overflow: auto;
4751
}
4752

    
4753
.overlay-error .key.details.expand {
4754
    background-image: url("../images/plus-8.png");
4755
}
4756

    
4757
.overlay-error .key.details {
4758
    background-color: #5189A3;
4759
    cursor: pointer;
4760
    background-image: url("../images/minus-8.png");
4761
    background-repeat: no-repeat;
4762
    background-position: 545px;
4763
}
4764

    
4765
.overlay-error .container {
4766
    padding-top: 1.9em;
4767
}
4768

    
4769
.overlay-error .error-details {
4770
    font-size: 0.8em;
4771
    margin-top: 10px;
4772
}
4773

    
4774
.overlay-error .error-details anonymous {
4775
    display: block;
4776
    margin-top: 10px;
4777
}
4778

    
4779
.overlay-error h3.overlay-header {
4780
    background-color: #800000;
4781
    color: #fff;
4782
}
4783

    
4784
.overlay-error.non-critical h3.overlay-header {
4785
    background-color: #987249;
4786
}
4787

    
4788
.overlay-error span.key {
4789
    font-weight: normal;
4790
    display: block;
4791
    margin-top: 0.5em;
4792
    background-color: #74AEC9;
4793
    color: #fff;
4794
    padding: 0.4em;
4795
    font-size: 0.8em;
4796
    font-weight: bold;
4797
}
4798

    
4799
.overlay-error .indicator {
4800
    background-color: #880000;
4801
    color: #fff;
4802
    padding: 4px;
4803
    display: block;
4804
    float: left;
4805
    border: 1px solid #444;
4806
}
4807

    
4808
.overlay-error .nav-btn:hover {
4809
    
4810
}
4811

    
4812
.overlay-error .nav-btn {
4813
    margin-left: 5px;
4814
    color: #fff;
4815
    display: block;
4816
    float: left;
4817
    padding: 4px;
4818
    background-color: #AAA;
4819
    border: 1px solid #444;
4820
}
4821

    
4822
.overlay-error .error-nav {
4823
    position: absolute;
4824
    right: 0px;
4825
    bottom: -25px;
4826
    font-size: 0.8em;
4827
}
4828

    
4829
.overlay-error span.value, .overlay-error div.value {
4830
    padding: 0.4em;
4831
    display: block;
4832
    margin-bottom: 0.3em;
4833
}
4834

    
4835
.overlay h3 .closeme {
4836
    float: right;
4837
    font-size: 0.7em;
4838
    margin-top: 0.2em;
4839
    cursor: pointer;
4840
}
4841

    
4842
.overlay .overlay-header .subtitle {
4843
    display: block;
4844
    font-size: 0.8em;
4845
    color: #ddd;
4846
}
4847

    
4848
.overlay .overlay-header .subtitle img {
4849
    vertical-align: middle;
4850
    margin-left: 10px;
4851
    margin-bottom: 2px;
4852
}
4853

    
4854
.overlay-info .msg-log-entry .src {
4855
    color: #4085A5;
4856
    float: right;
4857
    font-size: 0.9em;
4858
}
4859

    
4860
.overlay-info .msg-log-entry .date {
4861
    font-style: italic;
4862
}
4863

    
4864
.overlay-info .msg-log-entry pre {
4865
    color: #333;
4866
    width: 100%;
4867
    display: none;
4868
    margin: 10px 0;
4869
}
4870

    
4871
.msg-log-entry.warning {
4872
    color: #E57F01;
4873
}
4874

    
4875
.overlay-info .msg-log-entry.with-details .src {
4876
    margin-right: 15px;
4877
}
4878

    
4879
.overlay-info .msg-log-entry.with-details {
4880
    cursor: pointer;
4881
}
4882

    
4883
.overlay-info .msg-log-entry.with-details {
4884
    background-image: url("../images/plus-8-dark.png");
4885
    background-repeat: no-repeat;
4886
    background-position: 99% 9px;
4887
}
4888

    
4889
.overlay-info .msg-log-entry.with-details.expanded {
4890
    background-image: url("../images/minus-8-dark.png");
4891
}
4892

    
4893
.overlay-info .msg-log-entry .msg {
4894
    display: inline-block;
4895
    margin-left: 10px;
4896
}
4897

    
4898
.overlay-info .msg-log-entry {
4899
    border-bottom: 1px solid #aaa;
4900
    padding: 5px;
4901
}
4902

    
4903
.overlay-info .description.subinfo {
4904
    border: none !important;
4905
    padding-top: 0 !important;
4906
}
4907

    
4908
.overlay-info .content {
4909
    background-repeat: no-repeat;
4910
    background-position: 110% 110%;
4911
    background-color: rgba(255,255,255,0.6)
4912
}
4913

    
4914
.overlay-info .overlay-header {
4915
    background-color: #4085A5;
4916
}
4917

    
4918
.overlay-info .overlay-header .title {
4919
    color: #fff;
4920
}
4921

    
4922
.overlay-info .overlay-header .closeme {
4923
    color: #fff;
4924
}
4925

    
4926
#loading-view {
4927
    width: 400px;
4928
    margin: 0 auto;
4929
    padding: 20px 0;
4930
    font-size: 0.8em;
4931
}
4932

    
4933
#loading-view .header.off {
4934
    color: #829096;
4935
}
4936

    
4937
#loading-view .header.on {
4938
    color: #fff;
4939
    background-image: url("../images/icons/indicators/small/progress.gif");
4940
}
4941

    
4942
#loading-view .header.done {
4943
    color: #2B6681;
4944
    background-image: url("../images/check.png");
4945
}
4946

    
4947
#loading-view .header {
4948
    font-size: 0.9em;
4949
    text-align: left;
4950
    border-bottom: 1px solid #578BA3;
4951
    margin-bottom: 10px;
4952
    padding-bottom: 6px;
4953
    background-repeat: no-repeat;
4954
    background-position: 380px 0px;
4955
}
4956

    
4957
#loading-view .header span {
4958
    font-weight: bold;
4959
    color: #4085A5;
4960
}
4961

    
4962
#loading-view .info {
4963
    color: #ddd;
4964
}
4965

    
4966
.options-list {
4967
    margin-top: 0.5em;
4968
    font-size: 0.8em;
4969
}
4970

    
4971
.options-list.four li {
4972
    float: left;
4973
    display: block;
4974
    width: 25%;
4975
    margin-bottom: 5px;
4976
}
4977

    
4978
.options-list.five li:nth-child(4n) .options-object-cont {
4979
    margin-right: 0;
4980
}
4981

    
4982
.options-list.five li {
4983
    float: left;
4984
    display: block;
4985
    width: 20%;
4986
    margin-bottom: 5px;
4987
}
4988

    
4989
.options-list.five li:nth-child(5n) .options-object-cont {
4990
    margin-right: 0;
4991
}
4992

    
4993
.options-object-cont input {
4994
    border: 1px solid #aaa;
4995
    width: 92px;
4996
    padding: 0;
4997
    margin: 0;
4998
    margin-top:3px;
4999
    padding: 2px;
5000
}
5001

    
5002
.options-list.three li {
5003
    float: left;
5004
    display: block;
5005
    width: 33%;
5006
    margin-bottom: 5px;
5007
}
5008

    
5009
.meta-list .options-list.three li.options-object.create .options-object-cont {
5010
  background-position: 95% 5px;
5011
}
5012

    
5013
.meta-list .options-list.four li.options-object.create .options-object-cont {
5014
  background-position: 97% 5px;
5015
}
5016

    
5017
.meta-list .options-list li.options-object.create .options-object-cont {
5018
    background-image: url("../images/option-action-add.png");
5019
    background-repeat: no-repeat;
5020
    background-position: 90px 5px;
5021
}
5022

    
5023
.meta-list .options-list li .options-object-cont .option-action,
5024
.meta-list .options-list li.options-object.create {
5025
    cursor: pointer !important;
5026
}
5027

    
5028
.meta-list .options-list li .options-object-cont {
5029
    cursor: inherit;
5030
}
5031

    
5032
.options-list li .options-object-cont {
5033
    padding: 5px;
5034
    margin-right: 4px;
5035
    border: 1px solid #A6D1E6;
5036
    cursor: pointer;
5037
    min-height: 35px;
5038
    position: relative;
5039
}
5040

    
5041
.options-list.three li:nth-child(3n) .options-object-cont {
5042
    margin-right: 0;
5043
}
5044

    
5045
.options-list li.selected .options-object-cont {
5046
    background-color: #efefef;
5047
    border: 2px solid #4085A5;
5048
    padding: 4px;
5049
}
5050

    
5051
.options-list li.selected .options-object-cont .title {
5052
}
5053

    
5054
.options-list li.options-object .title {
5055
    display: block;
5056
    color: #FF7F2A;
5057
    margin-bottom: 2px;
5058
}
5059

    
5060
.options-list li .option-action {
5061
    display: none;
5062
    position: absolute;
5063
    background-repeat: no-repeat;
5064
}
5065

    
5066
.options-list.five li.editing {
5067
    width: 40%;
5068
}
5069

    
5070
.options-list.five li.editing .value {
5071
    display: none;
5072
}
5073

    
5074
.options-list li .remove {
5075
    background-image: url("../images/option-action-remove.png");
5076
    width:10px;
5077
    height:10px;
5078
    right:5px;
5079
    top: 5px;
5080
}
5081

    
5082
.options-list li .edit {
5083
    background-image: url("../images/option-action-edit.png");
5084
    width:10px;
5085
    height:10px;
5086
    right:5px;
5087
    bottom: 8px;
5088
}
5089

    
5090
.options-list li:hover .option-action  {
5091
    display: block;
5092
}
5093

    
5094
.options-list li.options-object .value {
5095
    color: #4085A5;
5096
    margin-top: 5px;
5097
    display: block;
5098
}
5099

    
5100
.options-list li.selected.options-object .value {
5101
}
5102

    
5103
.options-list li .options-object-cont:hover {
5104
    background-color: #fff;
5105
}
5106

    
5107
.options-list li.selected .options-object-cont:hover {
5108
    background-color: #fff;
5109
}
5110

    
5111
.options-list li img {
5112
    float: left;
5113
    margin:2px;
5114
    margin-right: 10px;
5115
    padding-bottom:10px;
5116
}
5117

    
5118
#network-vms-select-content li.options-object .value {
5119
    margin-top: 10px;
5120
    margin-left: 30px;
5121
}
5122

    
5123
#network-vms-select-content li.options-object:hover .options-object-cont,
5124
#network-vms-select-content li.options-object .options-object-cont {
5125
    background-image: url("../images/option-action-add-dark.png");
5126
    background-repeat: no-repeat;
5127
    background-position: 160px 28px;
5128
}
5129

    
5130
#network-vms-select-content li.selected:hover .options-object-cont,
5131
#network-vms-select-content li.selected .options-object-cont {
5132
    background-image: url("../images/option-action-remove.png") !important;
5133
}
5134

    
5135
#metadata-overlay-content .view .value {
5136
    margin-top: 10px;
5137
}
5138

    
5139
#metadata-overlay-content {
5140
    position: relative;
5141
}
5142

    
5143
.vm-meta .editor .predefined .predefined-meta-key:hover {
5144
    background-color: #4e8eac;
5145
    color: #fff;
5146
}
5147

    
5148
.vm-meta .editor .predefined .predefined-meta-key {
5149
    float: left;
5150
    margin-right: 5px;
5151
    padding: 4px;
5152
    display: block;
5153
    cursor: pointer;
5154
}
5155

    
5156
.vm-meta .editor .predefined {
5157
    background-color: #A6D1E6;
5158
    font-size: 0.9em;
5159
    border-top: 1px solid #ddd;
5160
}
5161

    
5162
.vm-meta .editor input {
5163
}
5164
.vm-meta .editor {
5165
    margin-bottom: 10px;
5166
}
5167

    
5168
.vm-meta .editor .form-actions .form-action {
5169
    min-width: 50px;
5170
}
5171

    
5172
.vm-meta .editor .form-field input.meta-key {
5173
    width: 90px;
5174
}
5175

    
5176
.vm-meta .form-field {
5177
    float: left;
5178
}
5179

    
5180
.vm-meta .form-actions .form-action {
5181
    float: left;
5182
    margin-right: 10px;
5183
    height: 11px;
5184
}
5185

    
5186
.vm-meta .editor .form-actions .cancel {
5187
    margin-right: 0;
5188
}
5189

    
5190
.vm-meta .editor .form-actions {
5191
    float: right;
5192
    margin:0;
5193
    padding:0;
5194
    margin-left: 15px;
5195
    margin-top: 0px;
5196
}
5197

    
5198
.vm-meta .editor {
5199
    background-color: rgba(64, 133, 165, 0.898) !important;
5200
    background-color: #649DB8;
5201
    font-size:0.9em;
5202
}
5203

    
5204
.vm-meta .meta-key-title {
5205
    font-size: 1.3em;
5206
    color: #fff;
5207
    margin-bottom: 10px;
5208
    display: none;
5209
    float: left;
5210
}
5211

    
5212
.vm-meta .editor-content {
5213
    padding: 10px;
5214
}
5215

    
5216
.vm-meta .inner-mask {
5217
    background-color: #fff;
5218
    opacity:0.6;
5219
    position: absolute;
5220
    top:0;
5221
    left:0;
5222
}
5223

    
5224
.vm-meta .editor label {
5225
    float: left;
5226
    color: #fff;
5227
    margin-right: 2px;
5228
    padding-top:4px;
5229
    font-size: 0.9em;
5230
}
5231

    
5232
.vm-meta .editor input {
5233
    border: none;
5234
    width: 170px;
5235
    margin-left: 10px;
5236
    font-size: 0.9em;
5237
    padding: 4px;
5238
}
5239

    
5240
.vm-meta li.create .options-object-cont {
5241
    background-color: #B3C9AD ;
5242
    border-color: #788774;
5243
}
5244
.vm-meta li.create .options-object-cont .value,
5245
.vm-meta li.create .options-object-cont .title {
5246
    color: #fff;
5247
}
5248

    
5249
#createvm-overlay-content {
5250
    padding: 0;
5251
}
5252

    
5253
.overlay-createvm .container {
5254
    width: 624px !important;
5255
}
5256

    
5257
.create-vm .vm-network .list-cont.personalize-cont:last-child .confirm-params {
5258
  margin-right: 0!important;
5259
}
5260

    
5261
.create-vm .vm-network .list-cont.personalize-cont:last-child {
5262
  border-right: none;
5263
  margin-right: 0;
5264
  width: 298px;
5265
}
5266

    
5267
.create-vm .vm-network .list-cont.personalize-cont .confirm-params {
5268
  max-height: 240px;
5269
}
5270

    
5271
.create-vm .vm-network .list-cont.personalize-cont {
5272
  height: 330px;
5273
}
5274

    
5275
.create-vm .vm-network .list-cont.personalize-cont {
5276
    width: 47%;
5277
}
5278

    
5279
.create-vm .header-step.current {
5280
    font-weight: bold;
5281
}
5282

    
5283
.create-vm .create-step-cont {
5284
    min-height: 240px;
5285
}
5286
.create-vm .create-controls {
5287
    padding: 10px;
5288
}
5289

    
5290
.create-vm ul li {
5291
    cursor: pointer;
5292
    padding: 4px;
5293
}
5294

    
5295
.create-vm ul li.selected {
5296
    background-color: #aaa;
5297
}
5298

    
5299
.cont-toggler-wrapper {
5300
  float: left;
5301
  margin-right: 5px;
5302
}
5303

    
5304
.cont-toggler {
5305
    background-image: url("../images/down-arrow.png");
5306
    background-position: right;
5307
    background-repeat: no-repeat;
5308
    background-color: #A1C8DB;
5309
    display: inline-block;
5310
    border-right: 6px solid #A1C8DB;
5311
    padding:2px;
5312
    padding-right: 14px;
5313
    padding-left:0;
5314
    cursor: pointer;
5315
    color: #fff;
5316
    font-size: 0.9em;
5317
    float: left;
5318
    margin-right: 5px;
5319
}
5320

    
5321
.cont-toggler .label {
5322
    background-color: #98BDCF;
5323
    padding: 2px;
5324
    padding-left: 5px;
5325
    padding-right: 5px;
5326
}
5327

    
5328
.cont-toggler.open {
5329
    background-color: #98BDCF;
5330
    border-color: #98BDCF;
5331
    background-image: url("../images/up-arrow.png");
5332
}
5333

    
5334
.cont-toggler.open .label {
5335
    background-color: #4085A5;
5336
}
5337

    
5338
.overlay .form label {
5339
    font-color: #444;
5340
    margin-right: 10px;
5341
}
5342

    
5343
.form-field.error label {
5344
    color: #ff0000;
5345
    text-decoration: underline;
5346
}
5347

    
5348
.form-field input {
5349
    border: 1px solid #aaa;
5350
    width: 200px;
5351
    padding: 3px;
5352
}
5353

    
5354
.form-actions {
5355
    margin-top: 5px;
5356
    padding-top:5px;
5357
    border-top: 1px solid #64a6c4;
5358
    font-size: 0.8em;
5359
}
5360

    
5361
.form-actions.plain {
5362
    margin-top: 0px;
5363
    padding-top:0px;
5364
    border-top: 0px;
5365
}
5366

    
5367
.form-action {
5368
    float: right;
5369
    min-width: 140px;
5370
    background-color: #FF7F2A;
5371
    border: 1px solid #FF7F2A;
5372
    text-align: center;
5373
    color: #FFFFFF;
5374
    cursor: pointer;
5375
    padding: 4px;
5376
}
5377

    
5378
.form-action:hover {
5379
    background-color: #FF9955;
5380
    color: #FFF;
5381
}
5382

    
5383
.form-action.prev,
5384
.form-action.cancel {
5385
    background-color: #800;
5386
    border: 1px solid #800;
5387
    float: left;
5388
}
5389

    
5390
.form-action.prev:hover,
5391
.form-action.cancel:hover {
5392
    background-color: #CC0000;
5393
    color: #fff;
5394
}
5395

    
5396
.form-action.next,
5397
.form-action.ok {
5398
    background-color: #080;
5399
    border: 1px solid #080;
5400
}
5401

    
5402
.form-action.next:hover,
5403
.form-action.ok:hover {
5404
    background-color: #00aa00;
5405
    color: #fff;
5406
}
5407

    
5408
.form-action .create,
5409
.form-action .submit {
5410

    
5411
}
5412

    
5413
.form-action.in-progress, button.in-progress {
5414
    background-image: url("../images/icons/indicators/medium/horizontal-progress.gif");
5415
    background-repeat: no-repeat;
5416
    background-position: center center;
5417
    color: transparent;
5418
}
5419

    
5420
#createvm-overlay-content {
5421
    padding: 0;
5422
}
5423

    
5424
.create-vm .image-details.selected .size {
5425

    
5426
}
5427

    
5428
.create-vm .image-details .show-details:hover {
5429
    color: #aaa !important; 
5430
}
5431
.create-vm .image-details.selected .show-details:hover {
5432
    color: #fff !important; 
5433
}
5434

    
5435
.create-vm .image-details.selected .show-details,
5436
.create-vm .image-details.selected .size {
5437
    color: #eee;
5438
}
5439

    
5440
.create-vm .image-details.selected span.owner {
5441
    color: #fff;
5442
}
5443

    
5444

    
5445
.create-vm .image-details p {
5446
    font-size: 0.8em;
5447
    padding-left: 27px;
5448
    display:block;
5449
}
5450

    
5451
.create-vm .image-details span.owner {
5452
    display: block;
5453
    font-size: 0.9em;
5454
    float: right;
5455
    color: #FF7F2A;
5456
    position: absolute;
5457
    top: 5px;
5458
    right: 5px;
5459
}
5460

    
5461
.create-vm .select-image .show-details {
5462
    display: none;
5463
    font-size: 0.8em;
5464
    text-decoration: underline;
5465
    color: #000;
5466
    position: absolute;
5467
    bottom: 5px;
5468
    right: 5px;
5469
}
5470

    
5471
.create-vm .image-details .size {
5472
    margin-top: 2px;
5473
    font-size: 0.8em;
5474
    color: #aaa;
5475
    margin-left: 10px;
5476
}
5477

    
5478
.create-vm .step-cont {
5479
    margin: 15px;
5480
}
5481

    
5482
.create-vm .create-step-cont {
5483
    min-height: 250px;
5484
    float: left;
5485
    width: 624px;
5486
}
5487

    
5488
.create-vm .create-controls {
5489
    padding: 10px;
5490
    border-top: 1px solid #ddd;
5491
}
5492

    
5493
.create-vm .empty {
5494
    font-size: 0.8em;
5495
    color: #444;
5496
}
5497

    
5498
.create-vm h4 {
5499
    color: #5CA1C0;
5500
    margin-bottom: 0.5em;
5501
    font-family: arial;
5502
}
5503
.create-vm ul li {
5504
    cursor: pointer;
5505
    padding: 4px;
5506
    font-size: 0.9em;
5507
}
5508

    
5509
.create-vm .create-step-cont li.ssh-key-option.selected,
5510
.create-vm .create-step-cont li.list-item-option.selected,
5511
.create-vm ul li.selected {
5512
    background-color: #FF7F2A;
5513
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5514
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5515
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5516
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5517
    color: #fff;
5518
}
5519

    
5520
.create-vm .images-list-cont.loading .loading-indicator {
5521
    display: block !important;
5522
}
5523

    
5524
.create-vm .images-list-cont .loading-indicator {
5525
    display: none;
5526
    position: absolute;
5527
    right: -13px;
5528
    top: 2px;
5529
    width: 30px;
5530
    height: 10px;
5531
    background-repeat: no-repeat;
5532
    background-image: url("../images/icons/indicators/medium/progress.gif");
5533
}
5534

    
5535
.create-vm .images-list-cont h4 {
5536
    position: relative;
5537
}
5538

    
5539
.create-vm .images-list-cont {
5540
    width: 40%;
5541
    float: left;
5542
    padding-left: 3%;
5543
    padding-right: 3%;
5544
}
5545

    
5546
.create-vm li p.desc {
5547
    font-size: 0.9em;
5548
}
5549

    
5550
.create-vm p.desc.warning {
5551
    color: #880000;
5552
}
5553

    
5554
.create-vm p.desc.empty {
5555
    color: #000;
5556
}
5557

    
5558
.create-vm p.desc {
5559
    font-size: 0.8em;
5560
    color: #888;
5561
    margin-bottom: 10px;
5562
}
5563

    
5564
.create-vm li.role .values .val:hover {
5565
    background-color: #eee;
5566
}
5567
.create-vm li.role .values .val.selected,  .create-vm li.role .values .val.selected:hover {
5568
    color: #fff;
5569
    background-color: #FF9955;
5570
}
5571

    
5572
.create-vm .images-filter-cont, .create-vm .flavors-predefined-cont {
5573
    width: 18%;
5574
    padding-right: 4%;
5575
    float:left;
5576
    border-right: 1px solid #A1C8DB;
5577
    overflow: auto;
5578
}
5579

    
5580
.create-vm .flavor-options-cont {
5581
    width: 74%;
5582
    float: left;
5583
    margin-left: 20px;
5584
}
5585

    
5586
.create-vm .flavor-options-cont .flavor-options li:hover {
5587
    background-image:-webkit-linear-gradient(top, #E8F4FA, #D1E7F0);
5588
    background-image:-o-linear-gradient(top, #E8F4FA, #D1E7F0);
5589
    background-image:-moz-linear-gradient(top, #E8F4FA, #D1E7F0);
5590
    background-image:linear-gradient(top, #E8F4FA, #D1E7F0);
5591
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8F4FA', endColorstr='#D1E7F0', GradientType=0);
5592
}
5593

    
5594
.create-vm .flavor-options-cont .flavor-options li.disabled * {
5595
    color: #eee !important;
5596
}
5597

    
5598
.create-vm .flavor-options-cont .flavor-options li.disabled {
5599
    background-image:linear-gradient(top, #aaa, #ddd);
5600
    background-image:-webkit-linear-gradient(top, #aaa, #ddd);
5601
    background-image:-o-linear-gradient(top, #aaa, #ddd);
5602
    background-image:-moz-linear-gradient(top, #aaa, #ddd);
5603
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#dddddd', GradientType=0);
5604
}
5605

    
5606
.create-vm .flavor-options-cont .flavor-options li.selected {
5607
    background-color: #FF9955;
5608
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5609
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5610
    background-image:-o-linear-gradient(top, #FF9955, #E88B4D);
5611
    background-image:-moz-linear-gradient(top, #FF9955, #E88B4D);
5612
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9955', endColorstr='#E88B4D', GradientType=0);
5613
    border: 1px solid #C97943;
5614
}
5615

    
5616
.create-vm .predefined-list li.disabled {
5617
    color: #ddd !important;
5618
}
5619

    
5620
.create-vm .flavor-options-cont .flavor-options li {
5621
    display: block;
5622
    float: left;
5623
    margin-right: 10px;
5624
    margin-bottom: 9px;
5625
    padding: 9px 14px;
5626
    border: 1px solid #aaa;
5627
    background-image:-webkit-linear-gradient(top, #D1E7F0, #E8F4FA);
5628
    background-image:-o-linear-gradient(top, #D1E7F0, #E8F4FA);
5629
    background-image:-moz-linear-gradient(top, #D1E7F0, #E8F4FA);
5630
    background-image:linear-gradient(top, #D1E7F0, #E8F4FA);
5631
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1E7F0', endColorstr='#E8F4FA', GradientType=0);
5632
}
5633

    
5634
.create-vm .flavor-opts-list.compact li {
5635
    padding: 7px 9px;
5636
    margin-right: 7px;
5637
}
5638

    
5639
.create-vm .flavor-options-cont .flavor-options {
5640
    margin-bottom: 2px;
5641
}
5642

    
5643

    
5644
.create-vm .flavor-options .metric {
5645
    font-size: 0.8em;
5646
    margin-left: 2px;
5647
}
5648

    
5649
.create-vm .flavor-options span.available {
5650
  font-size: 0.8em;
5651
  font-weight: normal;
5652
  margin-left: 5px;
5653
}
5654

    
5655
.create-vm .flavor-options span.title {
5656
    color: #444;
5657
}
5658

    
5659
.create-vm .flavor-options span.desc {
5660
    display: block;
5661
    color: #aaa;
5662
    font-weight: normal;
5663
    font-size: 0.8em;
5664
    float: right;
5665
    margin-top: 4px;
5666
}
5667

    
5668
.disktip {
5669
    padding: 4px;
5670
    top: 20px;
5671
}
5672

    
5673
.create-vm .flavor-options .flavors-disk-template-list {
5674
    position: relative;
5675
}
5676

    
5677
.create-vm .flavor-options .disk_template.option {
5678
    z-index: 10;
5679
    min-width: 50px;
5680
    text-align: center;
5681
}
5682

    
5683
/*0 position is -470px*/
5684
.create-vm .flavor-options .disk-template-description {
5685
    font-size: 0.8em;
5686
    color: #444;
5687
    background-image: url("../images/horizontal-pointer.png");
5688
    background-repeat: repeat-x;
5689
    background-position: -470px 0;
5690
    padding-top: 15px;
5691
    margin-top: -10px;
5692
    font-style: italic;
5693
    display:block;
5694
    overflow: auto;
5695
    padding-bottom: 0px;
5696
    margin-bottom: 7px;
5697
    width: 100%;
5698
}
5699

    
5700
.create-vm .flavor-options .disk_template.option .description {
5701
    display: none;
5702
    position: absolute;
5703
    bottom: -20px;
5704
    left:0;
5705
    color: #888;
5706
    font-style: italic;
5707
    display: block;
5708
    background-color: #fff;
5709
    width: 100%;
5710
    text-align: left;
5711
    z-index: 0;
5712
    border-top: 1px solid #ddd;
5713
    padding-top: 3px;
5714
    display: none;
5715
}
5716

    
5717
.create-vm .flavor-options .selected .value {
5718
    color: #FFF;
5719
}
5720

    
5721
.create-vm .flavor-options .value {
5722
    font-weight: bold;
5723
    color: #5CA1C0;
5724
}
5725

    
5726
.create-vm .flavor-options-cont h4 {
5727
    border-bottom: 1px solid #A1C8DB;
5728
    padding-bottom: 5px;
5729
}
5730

    
5731
.create-vm .images-info-cont {
5732
    width: 28%;
5733
    padding-left: 3%;
5734
    float: left;
5735
    border-left: 1px solid #A1C8DB;
5736
}
5737

    
5738
.create-vm .select-image.wide .show-details {
5739
    display: inline;
5740
}
5741

    
5742
.create-vm .select-image .images-info-cont .hide {
5743
    display: none;
5744
}
5745

    
5746
.create-vm .select-image.wide .images-info-cont .hide {
5747
    display: block;
5748
    float: right;
5749
    position: absolute;
5750
    right: 10px;
5751
    top: 10px;
5752
    font-size: 0.8em;
5753
    text-decoration: underline;
5754
    color: #5CA1C0;
5755
    cursor: pointer;
5756
}
5757

    
5758
.create-vm .select-image.wide .images-list-cont {
5759
    width: 74%;
5760
    padding-right: 0;
5761
}
5762

    
5763
.create-vm .select-image.wide .images-info-cont .description .title {
5764
    display: none;
5765
    float: none;
5766
}
5767

    
5768
.create-vm .select-image.wide .images-info-cont .description p {
5769
    background-color: #fff;
5770
    border: 1px solid #ddd;
5771
    padding: 10px;
5772
    float: none;
5773
}
5774

    
5775
.create-vm .select-image.wide .selected .size {
5776
    color: #FFF !important;
5777
}
5778

    
5779
.create-vm .select-image.wide .image-details .size {
5780
    color: #5CA1C0;
5781
    position: absolute;
5782
    top: 5px;
5783
}
5784

    
5785
.create-vm .select-image.wide .images-info-cont h3 {
5786
    color: #5CA1C0;
5787
    margin: 10px 0;
5788
    margin-top: 5px;
5789
    text-align: left;
5790
    font-size: 0.9em;
5791
}
5792

    
5793
.create-vm .select-image.wide .images-info-cont .description p {
5794
    height: 50px;
5795
}
5796

    
5797
.create-vm .select-image.wide .images-info-cont .description {
5798
    width: 100% !important;
5799
    float: none !important;
5800
    background-color: transparent !important;
5801
    padding: 0 !important;
5802
    font-size: 1.1em;
5803
}
5804
.create-vm .select-image.wide .images-info-cont .extra-details {
5805
    height: 160px;
5806
    overflow-y: scroll;
5807
    padding-right: 15px;
5808
}
5809

    
5810
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail.extra-meta .title .custom {
5811
    display: inline-block;
5812
}
5813

    
5814
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail.extra-meta .title {
5815
    background-color: #999 !important;
5816
    border-color: #888 !important;
5817
}
5818
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail .custom {
5819
    float: right;
5820
    display: none;
5821
    font-size: 0.8em;
5822
    margin-left: 10px;
5823
    color: #DDD;
5824
    margin-top: 2px;
5825
}
5826

    
5827
.create-vm .select-image.wide .images-info-cont .extra-details .image-detail {
5828
    padding: 0px;
5829
    background-color: transparent;
5830
    margin-bottom: 4px;
5831
}
5832

    
5833
.create-vm .select-image.wide .images-info-cont .extra-details .title {
5834
    float: left;
5835
    display: block;
5836
    width: 39%;
5837
    padding: 1%;
5838
    background-color: #5CA1C0;
5839
    color: #fff;
5840
    border: 1px solid #4F8DAA;
5841
    font-size: 0.8em;
5842
}
5843

    
5844
.create-vm .select-image.wide .images-info-cont .extra-details .value {
5845
    float: right;
5846
    display: block;
5847
    width: 55%;
5848
    padding: 1%;
5849
    border: none;
5850
    background-color: #FFF;
5851
    color: #444;
5852
    border: 1px solid #ddd;
5853
    margin-bottom: 0px;
5854
    font-size: 0.8em;
5855
}
5856

    
5857

    
5858
.create-vm .select-image.wide .images-info-cont .image-detail {
5859
}
5860

    
5861
.create-vm .select-image.wide ul.images-list {
5862
    height: 310px;
5863
    overflow-y: scroll;
5864
    padding-right: 3%;
5865
}
5866

    
5867
.flavors-predefined-cont {
5868

    
5869
}
5870

    
5871
.flavor-options-cont {
5872
}
5873

    
5874
.create-vm .select-image.wide .images-info-cont {
5875
    position: absolute;
5876
    width: 88%;
5877
    background-color: #DAE9F0;
5878
    padding: 2%;
5879
    border-left: none;
5880
    height: 320px;
5881
    box-shadow: 0px 0px 2px #aaa;
5882
    -moz-box-shadow: 0px 0px 2px #aaa;
5883
    -webkit-box-shadow: 0px 0px 2px #aaa;
5884
    display: none;
5885
}
5886

    
5887

    
5888
.create-vm .images-info-cont h4, .create-vm .create-step-cont .param h4{
5889
    color: #FF9955;
5890
    margin-bottom: 1em;
5891
    font-size: 1.2em;
5892
}
5893

    
5894
.create-vm .images-info-cont span.title {
5895
    color: #4085A5;
5896
    display: block;
5897
    margin-bottom: 2px;
5898
    font-size: 0.8em;
5899
}
5900

    
5901
.create-vm .type-filter li {
5902
    font-size: 0.8em;
5903
    /*font-weight: bold;*/
5904
    padding: 4px;
5905
    margin-bottom: 0px;
5906
    color: #FF7F2A;
5907
}
5908

    
5909
.create-vm .images-list li {
5910
    min-height: 30px;
5911
}
5912
.create-vm .images-list .image-details:hover {
5913
    background-color: #eee;
5914
}
5915

    
5916
.create-vm .images-list .image-details.selected:hover {
5917
    background-color: #FF7F2A;
5918
}
5919

    
5920
.create-vm .images-list .image-details.selected {
5921
    /*font-weight: bold;*/
5922
}
5923

    
5924
.create-vm .images-list .image-details {
5925
    padding: 6px;
5926
    margin-bottom:1px;
5927
    position: relative;
5928
}
5929

    
5930
.create-vm .images-list .image-details img {
5931
    vertical-align: middle;
5932
    margin-right: 10px;
5933
}
5934

    
5935
.create-vm .images-info-cont .image-detail:last-child p {
5936
    border-bottom: none;
5937
}
5938

    
5939
.create-vm .images-info-cont h4 img {
5940
    vertical-align: middle;
5941
    margin-right: 7px;
5942
    margin-bottom: 5px;
5943
}
5944

    
5945
.create-vm .images-info-cont .description p {
5946
    font-size: 0.8em;
5947
}
5948

    
5949
.create-vm .images-info-cont p {
5950
    margin-bottom: 7px;
5951
    font-size: 0.9em;
5952
    border-bottom: 1px solid #A1C8DB;
5953
    padding-bottom: 7px;
5954
}
5955

    
5956
.create-vm .step-header {
5957
    padding-bottom:0;
5958
    position: relative;
5959
}
5960

    
5961
.create-vm .step-header .header-step .info span.subtitle {
5962
    font-size: 1.2em;
5963
    color: #fff;
5964
    font-weight: bold;
5965
}
5966

    
5967
.create-vm .step-header .header-step .info span {
5968
    float: none;
5969
    text-align: right;
5970
}
5971

    
5972
.create-vm .step-header .header-step .info {
5973
    position: absolute;
5974
    right: 15px;
5975
    top: 20px;
5976
    font-size: 0.8em;
5977
}
5978

    
5979
.create-vm .step-header .header-step span {
5980
    float: left;
5981
    display: block;
5982
}
5983

    
5984
.create-vm .steps-container {
5985
    width: 2000em;
5986
}
5987

    
5988
.create-vm .step-header .header-step .title {
5989
    margin-top: 20px;
5990
    font-size: 1em;
5991
    margin-left: 10px;
5992
}
5993

    
5994
#createvm-overlay-content {
5995
    width: 624px;
5996
    overflow: hidden;
5997
}
5998

    
5999
.create-vm .steps-history .steps-history-cont.current .title {
6000
    display: block;
6001
    top: 23px;
6002
    left: 43px;
6003
    font-size: 1.2em;
6004
    color: #ffffff;
6005
    font-weight: bold;
6006
    font-family: 'Ubuntu', sans-serif !important;
6007
}
6008

    
6009
.create-vm .steps-history .steps-history-cont.current .subnum {
6010
    display: none;
6011
    float: none;
6012
    font-size: 0.9em;
6013
    font-family: 'Ubuntu', sans-serif  !important;
6014
}
6015

    
6016
.create-vm .steps-history .steps-history-cont.current .subtitle,
6017
.create-vm .steps-history .steps-history-cont.current .description {
6018
    font-family: 'Ubuntu', sans-serif  !important;
6019
}
6020

    
6021
.create-vm .steps-history .steps-history-cont.current .info {
6022
    display: block;
6023
    font-family: 'Ubuntu', sans-serif !important;
6024
}
6025

    
6026
.create-vm .steps-history .steps-history-cont.completed .title,
6027
.create-vm .steps-history .steps-history-cont.completed .num {
6028
    color: #A1C8DB;
6029
}
6030

    
6031
.create-vm .steps-history .steps-history-cont.completed {
6032
    background-color: #4085A5;
6033
    color: #fff;
6034
    cursor: pointer;
6035
}
6036

    
6037
.create-vm .steps-history .steps-history-cont.completed .steps-history-step {
6038
    background-image: url("../images/check.png");
6039
}
6040

    
6041
.create-vm .steps-history .steps-history-cont.current .steps-history-step {
6042
    width: 320px;
6043
}
6044

    
6045
.create-vm .steps-history .steps-history-cont.current .num {
6046
    color: #fff;
6047
}
6048

    
6049
.create-vm .steps-history .steps-history-cont.current .info {
6050
    color: #4085A5;
6051
    font-size: 0.8em;
6052
}
6053

    
6054
.create-vm .steps-history .steps-history-cont.current {
6055
    background-color: #A1C8DB;
6056
    color: #fff;
6057
    width: 416px;
6058
}
6059

    
6060
.create-vm .steps-history-step {
6061
    padding: 4px;
6062
    padding-left: 7px;
6063
    font-size: 1em;
6064
    font-family: 'Ubuntu', sans-serif  !important;
6065
    margin-right: 5px;
6066
    padding-top: 12px;
6067
    background-position: right 30px;
6068
    background-image: none;
6069
    background-repeat: no-repeat;
6070
}
6071

    
6072
.create-vm .steps-history {
6073
    background-color: #4085A5;
6074
}
6075

    
6076
.create-vm .steps-history .steps-history-cont.last {
6077
    border-right: none;
6078
}
6079

    
6080
.create-vm .steps-history .steps-history-cont .num {
6081
    margin-left: 5px;
6082
    margin-top: -10px;
6083
    padding-bottom: 10px;
6084
}
6085

    
6086
.create-vm .steps-history .steps-history-cont .title {
6087
    display: none;
6088
    position: absolute;
6089
    bottom: 0px;
6090
    text-align: center;
6091
    padding-bottom: 2px;
6092
    left:0;
6093
    width: 55px;
6094
    margin-left:0;
6095
    margin-top:0;
6096
    font-size: 0.8em;
6097
}
6098

    
6099
.create-vm .steps-history .steps-history-cont .subnum,
6100
.create-vm .steps-history .steps-history-cont .info {
6101
    display: none;
6102
}
6103

    
6104
.create-vm .steps-history .steps-history-cont {
6105
    height: 70px;
6106
    width: 51px;
6107
    float: left;
6108
    color: #fff;
6109
    border-right: 1px solid #A1C8DB;
6110
    color: #A1C8DB;
6111
    background-color: #4085A5;
6112
    background-position: center right;
6113
    background-image: none;
6114
    background-repeat: no-repeat;
6115

    
6116
    -webkit-transition: background-color .15s ease-in;
6117
    -o-transition: background-color .15s ease-in;
6118
    -moz-transition: background-color .15s ease-in;
6119
    transition: background-color .15s ease-in;
6120

    
6121
    border-bottom: 1px solid #aaa;
6122
}
6123

    
6124
.create-vm .step-header .header-step .num {
6125
    color: #225871;
6126
    font-size: 4em;
6127
    margin-bottom: -5px;
6128
    font-family: 'Ubuntu', sans-serif;
6129
    font-weight: normal !important;
6130
}
6131

    
6132
.create-vm .step-header .header-step {
6133
    color: #;
6134
    margin-bottom: -6px;
6135
    width: 25%;
6136
    padding-left: 0%;
6137
    display: block;
6138
    float: left;
6139
}
6140

    
6141
.create-vm .step-header .header-step.current {
6142
    color: #387693;
6143
}
6144

    
6145
.create-vm .image-filters-title {
6146
    margin-top: 1em;
6147
    margin-bottom: 0.5em;
6148
}
6149

    
6150
.create-vm .create-step-cont span.clear {
6151
    font-size: 0.8em;
6152
    font-weight: bold;
6153
    color: #A1C8DB;
6154
    display: block;
6155
}
6156

    
6157
.create-vm .category-filters li {
6158
    float:left;
6159
    display: block;
6160
    padding: 4px;
6161
    background-color: #eee;
6162
    margin-right: 5px;
6163
    font-size: 0.9em;
6164
    margin-bottom: 5px;
6165
}
6166

    
6167
.create-vm .content-cont {
6168
    height: 340px;
6169
    overflow: auto;
6170
}
6171

    
6172
.create-vm .vm-confirm .confirm-params span.cval {
6173
    margin-left: 8px;
6174
    color: #444;
6175
}
6176

    
6177
.create-vm .vm-confirm .confirm-params span.ckey {
6178
    color: #4085A5;
6179
    font-weight: bold;
6180
}
6181

    
6182
.create-vm .vm-confirm .confirm-params {
6183
    margin-bottom: 15px;
6184
}
6185

    
6186
.create-vm .vm-confirm h3.vm-name {
6187
    background-repeat: no-repeat;
6188
    background-position: left center;
6189
    font-size: 1.4em;
6190
    padding-left: 1.45em;
6191
    color: #4085A5;
6192
}
6193

    
6194
.create-vm .images-list-cont h4 a {
6195
    margin-top: 3px;
6196
    margin-right: -2px !important;
6197
}
6198
.create-vm .images-list-cont h4 a,
6199
.create-vm .list-cont h4 a {
6200
    font-size: 0.8em;
6201
    font-weight: normal;
6202
    margin-right: 5px;
6203
    float: right;
6204
    color: #FF7F2A;
6205
}
6206

    
6207
.create-vm .confirm-params {
6208
    overflow: auto;
6209
}
6210

    
6211
.create-vm .vm-confirm .ssh.confirm-params {
6212
    max-height: 150px;
6213
}
6214

    
6215
.create-vm .personalize-cont .confirm-params {
6216
    max-height: 160px;
6217
    margin-right: 10px;
6218
}
6219

    
6220
.create-vm .personalize-cont,
6221
.create-vm .confirm-cont {
6222
    height: 250px;
6223
}
6224

    
6225
.create-vm .image-warning p {
6226
  width: 80%;
6227
  float: left;
6228
}
6229

    
6230
.create-vm .image-warning .untrusted-image-confirm:hover {
6231
  background-color: #7D674E;
6232
}
6233

    
6234
.create-vm .image-warning .untrusted-image-confirm {
6235
  display: inline-block;
6236
  padding: 5px;
6237
  background-color: #5C4D39;
6238
  color: #FFF;
6239
  width: 10%;
6240
  float: right;
6241
  margin-top: 4px;
6242
  margin-right: 2px;
6243
  cursor: pointer;
6244
  text-align: center;
6245
}
6246

    
6247
.create-vm .image-warning {
6248
  display: none;
6249
  background-color: #987249;
6250
  color: #fff;
6251
  padding: 10px 15px;
6252
  font-size: 0.9em;
6253
  border-top: 1px solid #AAA;
6254
}
6255

    
6256
.create-vm .create-step-cont .rename input.rename-field {
6257
    font-size: 1.4em;
6258
    padding: 5px;
6259
    width: 93%;
6260
    padding-left: 30px;
6261
    background-position: 7px center;
6262
    background-repeat: no-repeat;
6263
}
6264

    
6265
.create-vm .create-step-cont .rename label {
6266
    display: block;
6267
}
6268

    
6269
.create-vm .create-step-cont .personalize-conts,
6270
.create-vm .create-step-cont .confirm-conts {
6271
    margin-top: 20px;
6272
}
6273

    
6274
.create-vm .create-step-cont .personalize-cont,
6275
.create-vm .create-step-cont .confirm-cont {
6276
    width: 30%;
6277
    margin-right: 2%;
6278
    border-right: 1px solid #A1C8DB;
6279
    float: left;
6280
}
6281

    
6282
.create-vm .create-step-cont .confirm-cont ul li .title {
6283
    width: 55px;
6284
    float: left;
6285
}
6286

    
6287
.create-vm .create-step-cont .list-cont ul li .value {
6288
    float: right;
6289
    padding-top: 2px;
6290
    display: block;
6291
    width: 90px;
6292
    text-align: right;
6293
}
6294

    
6295
.create-vm .create-step-cont .list-cont ul li.flavor-disktype .value {
6296
    width: 45px;
6297
}
6298

    
6299
.create-vm .create-step-cont .list-cont ul li.image-description .value,
6300
.create-vm .create-step-cont .list-cont ul li.image-name .value {
6301
    float: none;
6302
    width: auto;
6303
    text-align:left;
6304
    width: auto;
6305
}
6306

    
6307
.create-vm .create-step-cont .list-cont ul li {
6308
    padding:0;
6309
    margin:0;
6310
    margin-bottom: 5px;
6311
    border-bottom: 1px solid #EEE;
6312
    padding-bottom: 7px;
6313
    margin-right: 10px;
6314
}
6315

    
6316
.create-vm .create-step-cont li.ssh-key-option .check,
6317
.create-vm .create-step-cont li.list-item-option .check {
6318
    float: right;
6319
    margin-right: 5px;
6320
    margin-top: 0px;
6321
}
6322

    
6323
.create-vm .create-step-cont li.ssh-key-option.selected {
6324
}
6325
.create-vm .create-step-cont li.ssh-key-option.selected:hover,
6326
.create-vm .create-step-cont li.list-item-option.selected:hover {
6327
    background-color: #F95;
6328
}
6329

    
6330
.create-vm .create-step-cont li.ssh-key-option:hover,
6331
.create-vm .create-step-cont li.list-item-option:hover {
6332
    background-color: #eee;
6333
}
6334

    
6335
.create-vm .create-step-cont li.ssh-key-option.selected {
6336
}
6337

    
6338
.create-vm .create-step-cont li.ssh-key-option,
6339
.create-vm .create-step-cont li.list-item-option {
6340
    padding: 6px !important;
6341
}
6342

    
6343
.create-vm .create-step-cont .list-cont.ssh {
6344
    width: 60%;
6345
}
6346

    
6347
.create-vm .create-step-cont .list-cont.meta h4 {
6348
    margin-right: 0;
6349
}
6350

    
6351
.create-vm .create-step-cont .list-cont.meta {
6352
    margin-right:0;
6353
    border-right: none;
6354
    width: 195px;
6355
}
6356

    
6357
.create-vm .list-cont > h4 {
6358
    font-size: 1.2em;
6359
    margin-right: 10px;
6360
    border-bottom: 1px solid #A1C8DB;
6361
    padding-bottom: 5px;
6362
    color: #387693;
6363
}
6364

    
6365
.create-vm .list-cont .param.image-name {
6366
    margin-bottom: 0 !important;
6367
    border-bottom: none !important;
6368
}
6369

    
6370
.create-vm .list-cont .param h4 {
6371
    margin-bottom: 0px !important;
6372
    font-size: 1.1em !important; 
6373
}
6374

    
6375
.create-vm .list-cont .param {
6376
    margin-bottom: 7px !important;
6377
}
6378

    
6379
.create-vm .list-cont .value {
6380
    font-weight: bold;
6381
}
6382

    
6383
.create-vm .list-cont .param .value {
6384
    font-size: 0.9em;
6385
}
6386

    
6387
.create-vm .list-cont .param .title {
6388
    color: #387693;
6389
}
6390

    
6391
.create-vm .list-cont .image-description {
6392
    margin-left:0;
6393
}
6394

    
6395
.create-vm .list-cont .image-description .value {
6396
    font-weight: normal;
6397
    margin-left: 0 !important;
6398
}
6399

    
6400
.create-vm .list-cont .image-description .title {
6401
    display: none;
6402
    font-size: 0.8em;
6403
}
6404

    
6405
.create-vm .list-cont.meta .values span {
6406
    display:block;
6407
    float: left;
6408
    margin-right: 4px;
6409
    border: 1px solid #eee;
6410
    padding:3px;
6411
    margin-bottom: 4px;
6412
    font-size: 0.9em;
6413
}
6414

    
6415
.create-vm .list-cont.meta .key {
6416
    font-weight: bold;
6417
    font-size: 0.9em;
6418
    display: block;
6419
    margin-bottom: 5px;
6420
}
6421

    
6422
.create-vm .meta input {
6423
    font-size: 0.8em;
6424
}
6425

    
6426
.vm-connect .connect-cont {
6427
    margin-bottom: 20px;
6428
    border-bottom: 1px solid #A1C8DB;
6429
    padding-bottom: 20px;
6430
}
6431

    
6432
.vm-connect .connection-info {
6433
    padding-bottom: 0px;
6434
    margin-bottom: 0;
6435
    border-bottom: none;
6436
}
6437

    
6438
.vm-connect .connection-info .connect a {
6439
    color: #fff;
6440
}
6441

    
6442
.vm-connect .connection-info .connect {
6443
    background-color: #387693;
6444
    color: #fff;
6445
    padding: 10px;
6446
    font-size: 1.2em;
6447
    text-align: center;
6448
}
6449

    
6450
.clip-copy {
6451
    display: block;
6452
    width: 20px;
6453
    height: 20px;
6454
    position: absolute;
6455
    border: 1px solid #387693;
6456
    background-image: url("../images/clipboard.png");
6457
    background-repeat: no-repeat;
6458
    background-position: center;
6459
    cursor: pointer;
6460
    background-color: #A1C8DB;
6461
}
6462

    
6463
.password-cont .clip-copy { right: 10px; top: 8px;}
6464

    
6465

    
6466
input.has-errors {
6467
    border-color: #ff0000;
6468
}
6469

    
6470
.overlay .models-view .previous-view-link {
6471
    margin: -10px;
6472
    margin-bottom:10px;
6473
    padding: 10px 5px;
6474
    background-image: url("../images/left-arrow.png");
6475
    background-repeat: no-repeat;
6476
    background-position: 10px center;
6477
    padding-left: 20px;
6478
    background-color: #93D070;
6479
    cursor: pointer;
6480
    border-bottom: 1px solid #eee;
6481
    text-decoration: underline;
6482
}
6483

    
6484
.icon .suspended-notice {
6485
  right: 192px;
6486
  top: 50px;
6487
}
6488

    
6489
.suspended-notice {
6490
  display: inline-block;
6491
  padding: 4px;
6492
  background-color: #8f1915;
6493
  cursor: pointer;
6494
  position: absolute;
6495
  color: #fff;
6496
  font-size: 0.6em;
6497
  display: none;
6498
}
6499

    
6500
.suspended .suspended-notice {
6501
  display: block;
6502
}
6503

    
6504
.suspended .action-indicator {
6505
  display: none !important;
6506
}
6507

    
6508
.trigger-resize {
6509
    background-image: url("../images/pencil-disabled.png");
6510
    background-position: right 2px;
6511
    background-repeat: no-repeat;
6512
    padding-right: 15px !important;
6513
    cursor: pointer;
6514
}
6515

    
6516
.can-resize .trigger-resize:hover {
6517
    text-decoration: underline;
6518
}
6519

    
6520
.can-resize .trigger-resize {
6521
    font-weight: bold;
6522
    background-image: url("../images/pencil.png");
6523
}
6524

    
6525
.vm-resize .flavor-options-cont {
6526
  float: none;
6527
  width: 100%;
6528
  margin: 0;
6529
  height: auto;
6530
}
6531

    
6532
.form-action.disabled {
6533
  background-color: #ddd;
6534
  color: #aaa;
6535
  border-color: #999;
6536
}
6537

    
6538
.overlay .form-actions .assign {
6539
  display: none;
6540
}
6541

    
6542

    
6543
.connect-ip #network-vms-select-content li.selected .options-object-cont {
6544
  background-image: none !important;
6545
}
6546

    
6547
.overlay.connect-ip .form-actions .assign {
6548
  display: block;
6549
}
6550

    
6551
.overlay.connect-ip .form-actions .create {
6552
  display: none;
6553
}
6554

    
6555
.overlay.connect-ip li.options-object .options-object-cont {
6556
  background-image: none !important; 
6557
}
6558

    
6559
.overlay-public-key-create .container {
6560
  font-size: 0.9em;
6561
}
6562

    
6563
/* Additional styles for views.ext module */
6564
.pane-view {
6565
  background-color: #EFF7FA;
6566
}
6567

    
6568
.collection-list-view .collection {
6569
  padding-top: 14px;
6570
}
6571

    
6572
.collection-list-view .collection .create-button {
6573
  margin-bottom: 15px;
6574
}
6575

    
6576
.collection-list-view .collection .create-button a {
6577
  display: inline-block;
6578
  color: black;
6579
  background-color: #FF7F2A;
6580
  cursor: pointer;
6581
  padding: 7px 24px;
6582
  text-decoration: none;
6583
  border-left: 15px solid #FF9955;
6584
  margin-left: -15px;
6585
  font-family: 'Open Sans', sans-serif;
6586
}
6587

    
6588
.pane-view .collection-list-view .model-view {
6589
  width: 100%;
6590
  background-color: transparent;
6591
  font-size: 75%;
6592
}
6593

    
6594
.pane-view .collection-list-view .model-view.actionpending .main-content-inner,
6595
.pane-view .collection-list-view .model-view.subactionpending .main-content-inner,
6596
.pane-view .collection-list-view .model-view.hovered .main-content-inner,
6597
.pane-view .collection-list-view .model-view:hover .main-content-inner {
6598
  background-color: #A1C8DB;
6599
}
6600

    
6601
.pane-view .collection-list-view .model-view .main-content .title {
6602
  font-weight: normal;
6603
}
6604

    
6605
.pane-view .collection-list-view .model-view .main-content {
6606
}
6607

    
6608
.pane-view .collection-list-view .model-view:last-child .main-content {
6609
  border-bottom: none;
6610
}
6611

    
6612
.pane-view .collection-list-view .model-view .main-content {
6613
  width: 520px;
6614
  padding-bottom: 5px;
6615
  margin-bottom: 5px;
6616
  float: left;
6617
  border-bottom: 1px solid #D1E7F0;
6618
}
6619

    
6620
.pane-view .collection-list-view .model-view .main-content-inner {
6621
  padding: 10px 20px;
6622
  padding-right: 10px;
6623
  /*overflow: hidden;*/
6624
}
6625

    
6626
.pane-view .collection-list-view .model-view .main-content .logo {
6627
  float: left;
6628
}
6629

    
6630
.pane-view .collection-list-view .model-view .main-content .entry {
6631
  width: 290px;
6632
  padding-top: 5px;
6633
  margin-left: 10px;
6634
  float: left;
6635
  position: relative;
6636
}
6637

    
6638
.pane-view .collection-list-view .model-view .main-content .actions-content {
6639
  width: 80px;
6640
  float: left;
6641
}
6642

    
6643
.pane-view .collection-list-view .model-item .link {
6644
  color: #4085A5;
6645
}
6646

    
6647
.collection .empty-list {
6648
  padding: 10px;
6649
  font-size: 0.8em;
6650
  color: #333;
6651
}
6652

    
6653
.collection-list-view .items-sublist:first-child {
6654
  padding-top: 0;
6655
}
6656

    
6657
.collection-list-view .items-sublist {
6658
  padding-top: 10px;
6659
}
6660

    
6661
.collection-list-view .items-sublist:last-child {
6662
  margin-top: 20px;
6663
  border-top: 10px solid #DCEBF2;
6664
  margin-bottom: 0;
6665
}
6666

    
6667
.model-item .status-title {
6668
  text-align: right;
6669
  margin-right: 4px;
6670
  margin-top: 5px;
6671
}
6672

    
6673
.model-item .status-indicator {
6674
}
6675

    
6676
.model-item .actions-content {
6677
  width: 180px;
6678
  float: left;
6679
}
6680

    
6681
.model-item .actions-content .action-container .confirm-single .no,
6682
.model-item .actions-content .action-container .confirm-single .yes {
6683
  font-family: Arial, Helvetica, sans-serif;
6684
  width: 20px;
6685
  height: 16px;
6686
  padding: 2px 0;
6687
  float: left;
6688
  border: none;
6689
  margin: 0;
6690
  padding: 2px 0;
6691
  text-align: center;
6692
  font-size: inherit;
6693
}
6694

    
6695
.model-item .actions-content .action-container .confirm-single .no {
6696
  background-color: #FF9955;
6697
}
6698

    
6699
.model-item .actions-content .action-container .confirm-single .yes {
6700
  background-color: #FF7F2A;
6701
  width: 80px;
6702
}
6703

    
6704
.model-item .actions-content .action-container.warn .confirm-single .no:hover {
6705
  color: #fff;
6706
}
6707

    
6708
.model-item .actions-content .action-container.warn .confirm-single .no {
6709
  background-color: #CC0000;
6710
}
6711

    
6712
.model-item .actions-content .action-container.warn .confirm-single .yes {
6713
  background-color: #880000;
6714
  color: #fff;
6715
}
6716

    
6717
.model-item .actions-content .action-container.warn .confirm-single .yes:hover {
6718
  background-color: #CC0000;
6719
}
6720

    
6721
.model-item .actions-content .action-container .confirm-single {
6722
  display: none;
6723
  width: 100px;
6724
  float: right;
6725
  margin-right: -22px;
6726
  margin-top: -4px;
6727
}
6728

    
6729
.model-item .actions-content .action-container.selected .confirm-single {
6730
  display: block !important;
6731
}
6732

    
6733
.model-item.actionpending .actions-content .action-container.isactive,
6734
.model-item:hover .actions-content .action-container.isactive,
6735
.model-item.hovered .actions-content .action-container.isactive,
6736
.model-item .actions-content .action-container.selected {
6737
  display: block;
6738
}
6739

    
6740
.model-item.actionpending .nested-model-list .actions-content .action-container.isactive {
6741
  display: none;
6742
}
6743

    
6744
.model-item.actionpending .nested-model-list .model-item.actionpending .actions-content .action-container.isactive {
6745
  display: block;
6746
}
6747

    
6748
.model-item .actions-content .action-container.selected:hover {
6749
  background-color: transparent;
6750
  border-left: 5px solid #7DB4CD;
6751
  margin-left: 5px;
6752
}
6753

    
6754
.model-item .actions-content .action-container:hover a {
6755
  color: #fff;
6756
}
6757

    
6758
.model-item .actions-content .action-container:hover {
6759
  background-color: #A1C8DB;
6760
  border-left: 5px solid #7DB4CD;
6761
  margin-left: 5px;
6762
}
6763

    
6764
.model-item .actions-content .action-container.selected {
6765
}
6766

    
6767
.model-item .actions-content .action-container {
6768
  display: none; 
6769
}
6770

    
6771
.model-item .actions-content .action-container {
6772
  padding: 2px;
6773
  margin-bottom: 5px;
6774
  padding-left: 5px;
6775
  margin-left: 10px;
6776
  cursor: pointer;
6777
}
6778

    
6779
.model-item .status-active .status-indicator .indicator {
6780
  background-color: #63cf1c;
6781
}
6782

    
6783
.model-item .status-inactive .status-indicator .indicator {
6784
  background-color: #940606;
6785
}
6786

    
6787
.model-item .status-error .status-indicator .indicator {
6788
  background-color: #ff0000;
6789
}
6790

    
6791
.model-item .status-progress .status-indicator .indicator {
6792
  background-color: #FF7F2A;
6793
}
6794

    
6795
.model-item .status-indicator .indicator {
6796
  width: 10px;
6797
  height: 11px;
6798
  float: right;
6799
  background-color: #EFF7FA;
6800
  margin-right: 3px;
6801
}
6802

    
6803
/* vm sprites */
6804
.vm-icon.medium {
6805
  width: 50px;
6806
  height: 54px;
6807
}
6808

    
6809
.vm-icon.medium.state1 {
6810
    background-position: 0px 0;
6811
}
6812

    
6813
.vm-icon.medium.state2 {
6814
    background-position: -100px 0;
6815
}
6816

    
6817
.vm-icon.medium.state3 {
6818
    background-position: -150px 0;
6819
}
6820

    
6821
.vm-icon.medium.state4 {
6822
    background-position: -50px 0;
6823
}
6824
/* end vm sprites */
6825

    
6826
/* ips */
6827
.ip-port-view .vm-logo {
6828
  width: 
6829
}
6830

    
6831
.model-item .vm-name {
6832
  font-weight: bold;
6833
}
6834

    
6835
.nested-model-list {
6836
  position: relative;
6837
  top: 43px;
6838
  overflow: visible;
6839
  width: 531px;
6840
  margin-left: -41px;
6841
  margin-bottom: 39px;
6842
}
6843

    
6844
.nested-model-list .collection {
6845
  padding: 0;
6846
}
6847

    
6848
.nested-model-list .model-item .outer {
6849
  width: 470px;
6850
  position: relative;
6851
}
6852

    
6853
.model-item .border i.remove,
6854
.empty-list i.add {
6855
    display: block;
6856
    color: #fff;
6857
    padding-left: 10%;
6858
    width: 90%;
6859
    padding-top: 0px;
6860
    font-weight: bold;
6861
    font-size: 1.4em;
6862
    cursor: pointer;
6863
    font-style: normal;
6864
}
6865

    
6866
.model-item .border i.remove {
6867
  font-size: 1em;
6868
  color: #BE5812;
6869
  padding-top: 1px;
6870
}
6871

    
6872
.empty-list.nested {
6873
  height: 30px;
6874
}
6875

    
6876
.empty-list .border2, 
6877
.nested-model-list .outer .border2 {
6878
  border-left: 3px solid #FB822F;
6879
  position: absolute;
6880
  height: 100%;
6881
  width: 1px;
6882
  left:0;
6883
  top:0;
6884
}
6885

    
6886
.empty-list .border2, 
6887
.nested-model-list .model-item:last-child .outer .border2 {
6888
  height: 69px;
6889
}
6890

    
6891
.empty-list .border, .nested-model-list .outer .border {
6892
  position: absolute;
6893
  top: 52px;
6894
  left: 0;
6895
  background-color: #FB822F;
6896
  height: 17px;
6897
  width: 91px;
6898
  z-index: 0;
6899
}
6900

    
6901
.empty-list .border {
6902
  top: 31px;
6903
}
6904

    
6905
.empty-list .border2 {
6906
  height: 31px;
6907
}
6908

    
6909
.nested-model-list .model-item .inner .model-logo {
6910
  position: relative;
6911
  z-index: 100;
6912
}
6913

    
6914
.model-item.actionpending .nested-model-list.proxy .model-item .inner.main-content,
6915
.model-item:hover .nested-model-list.proxy .model-item .inner.main-content,
6916
.model-item.hovered .nested-model-list.proxy .model-item .inner.main-content,
6917
.nested-model-list .model-item.actionpending .inner.main-content,
6918
.nested-model-list .model-item:hover .inner.main-content,
6919
.nested-model-list .model-item.hovered .inner.main-content {
6920
  background-color: #84B7D0;
6921
}
6922

    
6923
.nested-model-list .model-item:last-child .inner.main-content {
6924
  border-bottom: none;
6925
}
6926

    
6927
.nested-model-list .model-item .inner.main-content {
6928
  width: auto;
6929
  margin-bottom: 0;
6930
  float: none;
6931
  z-index: 0;
6932
  margin-left: 30px;
6933
  padding-bottom: 20px;
6934
  padding: 10px;
6935
  border-bottom: 1px solid #5CA1C0;
6936
  /*height: 59px;*/
6937
}
6938

    
6939
.nested-model-list .model-item .inner.main-content .subtitle {
6940
  position: absolute;
6941
  top: 27px;
6942
  left: 110px;
6943
  font-weight: normal;
6944
  font-size: 0.8em;
6945
}
6946

    
6947
.nested-model-list .model-item .inner.main-content .title {
6948
  position: absolute;
6949
  top: 10px;
6950
  left: 110px;
6951
  font-weight: bold;
6952
}
6953

    
6954
.model-item:hover .nested-model-list .actions-content .action-container.isactive {
6955
  display: none;
6956
}
6957

    
6958
.model-item:hover .nested-model-list .model-item.actionpending .actions-content .action-container.isactive {
6959
  display: block !important;
6960
}
6961

    
6962

    
6963
.model-item .actions-content .action-container.selected a {
6964
  color: #FF7F2A;
6965
}
6966

    
6967
.model-item:hover .nested-model-list.proxy .model-item .actions-content .action-container.selected,
6968
.model-item:hover .nested-model-list.proxy .model-item .actions-content .action-container.isactive,
6969
.model-item.hovered .nested-model-list.proxy .model-item .actions-content .action-container.selected,
6970
.model-item.hovered .nested-model-list.proxy .model-item .actions-content .action-container.isactive,
6971
.model-item:hover .nested-model-list .model-item .actions-content .action-container.selected,
6972
.model-item:hover .nested-model-list .model-item:hover .actions-content .action-container.isactive {
6973
  display: block !important;
6974
}
6975

    
6976
.pane-view .model-view .nested-model-list .model-item .actions-content {
6977
  position: absolute;
6978
  right: -180px;
6979
  top:0;
6980
  float: none;
6981
  display: block;
6982
  width: 180px;
6983
  height: 80px;
6984
}
6985

    
6986
/* networks */
6987
.nested-model-list .ip-addresses {
6988
  padding-top: 0px;
6989
  font-size: 0.9em;
6990
  margin-left: 328px;
6991
  text-align: right;
6992
  position: absolute;
6993
  top: 10px;
6994
  right: 10px;
6995
}
6996

    
6997
.network-ports-toggler {
6998
  position: absolute;
6999
  top: 30px;
7000
  left: 0px;
7001
}
7002

    
7003
.model-form-actions .form-action {
7004
  font-size: 1.1em !important;
7005
}
7006

    
7007
.model-form textarea {
7008
    width: 99%;
7009
    height: 100px;
7010
    border: 1px solid #aaa;
7011
}
7012

    
7013
.model-form .form-field {
7014
    margin-bottom: 10px;
7015
}
7016

    
7017
.model-form label {
7018
    display: block;
7019
    color: #406A7D;
7020
    font-size: 1.1em;
7021
    margin: 0px 0 5px 0;
7022
}
7023

    
7024
.model-form .inline label {
7025
    float: left;
7026
    margin-right: 10px;
7027
    margin-top: 15px !important;
7028
}
7029

    
7030
.model-form input.long {
7031
    width: 400px;
7032
}
7033

    
7034
.model-form .inline input {
7035
    width: auto;
7036
    margin-top: 10px;
7037
}
7038

    
7039
.model-form .inline select {
7040
    width: auto;
7041
    margin-top: 7px;
7042
}
7043

    
7044
.model-form .inline .errors,
7045
.model-form .inline .field-desc {
7046
    clear: both;
7047
}
7048

    
7049
.model-action.disabled {
7050
    background-color: #aaa;
7051
    border-color: #aaa;
7052
    cursor: default;
7053
}
7054
.model-action.disabled:hover {
7055
    background-color: #aaa;
7056
    border-color: #aaa;
7057
}
7058

    
7059
.model-action:hover {
7060
    background-color: #aaa;
7061
}
7062

    
7063
.model-action:hover {
7064
    background-color: #F95;
7065
    border-color: #F95;
7066
}
7067

    
7068
.model-action.in-progress {
7069
    background-color: #aaa;
7070
    color: #fff;
7071
    border-color: #aaa;
7072
    background-image: url("../images/icons/indicators/small/progress.gif") !important;
7073
}
7074

    
7075
.model-action.add-generate {
7076
    background-image: url("../images/option-action-generate-ssh.png");
7077
}
7078

    
7079
.model-action.add {
7080
    background-image: url("../images/option-action-add.png");
7081
    padding-right: 20px !important;
7082
}
7083

    
7084
.model-action {
7085
    float: right;
7086
    background-color: #FF7F2A;
7087
    color: #fff;
7088
    padding: 6px 8px;
7089
    margin-left: 10px;
7090
    cursor: pointer;
7091
    padding-right: 30px;
7092
    background-position: right center;
7093
    background-repeat: no-repeat;
7094
    background-clip: border-box;
7095
    border-right: 5px solid #FF7F2A;
7096
    font-size: 0.9em;
7097
}
7098

    
7099
.overlay-public-key-create .error-msg {
7100
    margin-bottom: 5px;
7101
}
7102

    
7103
.model-form.public-key textarea {
7104
  height: 125px;
7105
}
7106

    
7107
.model-notice {
7108
    margin-bottom: 10px;
7109
}
7110

    
7111
.model-notice p.message {
7112
    margin: 0;
7113
    padding: 0; 
7114
    border: 2px solid #444;
7115
    padding: 4px;
7116
    background-color: #efefef;
7117
    line-height: 1.7em;
7118
    padding: 6px;
7119
}
7120

    
7121
.model-notice p.message .download {
7122
    color: #fff;
7123
    background-color: #FF7F2A;
7124
    border: 1px solid #F95;
7125
    padding: 3px;
7126
    cursor: pointer;
7127
}
7128

    
7129

    
7130
.model-notice p.message.success {
7131
    color: #447821;
7132
    background-color: #AADE87;
7133
    border: 1px solid #447821;
7134
}
7135

    
7136
#public-keys-list-view .model-item textarea.content {
7137
  width: 270px;
7138
  background-color: transparent;
7139
  font-family: monospace;
7140
  font-size: 1em;
7141
  border: none;
7142
  overflow-y: hidden;
7143
  overflow-x: hidden;
7144
  height: 155px;
7145
  margin: 10px 0;
7146
  padding: 10px;
7147
  border: 1px solid #ddd;
7148
  background-color: #efefef;
7149
}
7150

    
7151

    
7152
.model-rename-view .edit {}
7153

    
7154
.model-rename-view .edit-btn {
7155
  display: none;
7156
  background-repeat: no-repeat;
7157
  font-size: 75%;
7158
  font-weight: normal;
7159
  margin-left: 10px;
7160
  padding-left: 10px;
7161
  text-align: left;
7162
  cursor: pointer;
7163
  color: #3D3D3D;
7164
  margin-top: 0.4em;
7165
  background-image: url("../images/pencil.png");
7166
  background-position: 0 0px;
7167
  width: 10px;
7168
  height: 7px;
7169
}
7170

    
7171
.model-rename-view:hover .edit-btn {
7172
  display: inline;
7173
}
7174

    
7175
.model-rename-view input {
7176
  border: 1px solid #aaaaaa;
7177
  font-size: 85%;
7178
  padding: 2px;
7179
  width: 255px;
7180
}
7181

    
7182
.model-rename-view .value {}
7183

    
7184
.model-rename-view .name {}
7185

    
7186
.model-rename-view .rename-actions {
7187
  float: right;
7188
  width: 40px;
7189
}
7190

    
7191
.model-rename-view .rename-actions .btn {
7192
  float: left;
7193
  height: 16px;
7194
  width: 16px;
7195
  cursor: pointer;
7196
}
7197

    
7198
.model-rename-view .rename-actions .btn.confirm {
7199
  background-image: url("../images/save.png"); 
7200
  margin-left: 3px;
7201
}
7202

    
7203
.model-rename-view .rename-actions .btn.cancel {
7204
  background-image: url("../images/cancel.png"); 
7205
  margin-left: 3px;
7206
}
7207

    
7208
.model-rename-view .rename-actions .btn.confirm:hover {
7209
  background-color: #84b7d0;
7210
}
7211

    
7212
.model-rename-view .rename-actions .btn.cancel:hover {
7213
  background-image: url("../images/cancel-onhover.png"); 
7214
}